Feat: larger open area

packages/uui-card-content-node/lib/uui-card-content-node.element.ts

@@ -24,11 +24,30 @@ export class UUICardContentNodeElement extends UUICardElement {
   @property({ type: String })
   name = '';
 
+  /**
+   * Node details
+   * @type {string}
+   * @attr
+   * @default ''
+   */
+  @property({ type: String })
+  detail = '';
+
   @state()
   private _iconSlotHasContent = false;
 
-  protected fallbackIcon =
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M396.441 138.878l-83.997-83.993-7.331-7.333H105.702v416.701h298.071V146.214l-7.332-7.336zM130.74 439.217V72.591h141.613c37.201 0 19.274 88.18 19.274 88.18s86-20.901 87.104 18.534v259.912H130.74z"></path></svg>';
+  protected fallbackIcon = `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    id="icon">
+    <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+    <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+  </svg>`;
 
   private _onSlotIconChange(event: Event) {
     this._iconSlotHasContent =
@@ -41,18 +60,37 @@ export class UUICardContentNodeElement extends UUICardElement {
     return html`<uui-icon .svg="${this.fallbackIcon}"></uui-icon>`;
   }
 
+  protected renderDetail() {
+    return html`<small id="detail"
+        >${this.detail}<slot name="detail"></slot></small
+      ><slot id="default"></slot>`;
+  }
+
+  #renderContent() {
+    return html`
+      <span id="content">
+        <span id="item">
+          <span id="icon">
+            <slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
+            ${this._iconSlotHasContent === false
+              ? this._renderFallbackIcon()
+              : ''}
+          </span>
+          <div id="name">${this.name}<slot name="name"></slot></div>
+        </span>
+        ${this.renderDetail()}
+      </span>
+    `;
+  }
+
   #renderButton() {
-    return html`<div
+    return html`<button
       id="open-part"
       tabindex=${this.disabled ? (nothing as any) : 0}
       @click=${this.handleOpenClick}
       @keydown=${this.handleOpenKeydown}>
-      <span id="icon">
-        <slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
-        ${this._iconSlotHasContent === false ? this._renderFallbackIcon() : ''}
-      </span>
-      <span id="name"> ${this.name} </span>
-    </div>`;
+      ${this.#renderContent()}
+    </button>`;
   }
 
   #renderLink() {
@@ -67,11 +105,7 @@ export class UUICardContentNodeElement extends UUICardElement {
             this.target === '_blank' ? 'noopener noreferrer' : undefined,
           ),
       )}>
-      <span id="icon">
-        <slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
-        ${this._iconSlotHasContent === false ? this._renderFallbackIcon() : ''}
-      </span>
-      <span id="name"> ${this.name} </span>
+      ${this.#renderContent()}
     </a>`;
   }
 
@@ -81,7 +115,6 @@ export class UUICardContentNodeElement extends UUICardElement {
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
 
-      <slot></slot>
       <slot name="tag"></slot>
       <slot name="actions"></slot>
     `;
@@ -94,7 +127,6 @@ export class UUICardContentNodeElement extends UUICardElement {
         min-width: 250px;
         flex-direction: column;
         justify-content: space-between;
-        padding: var(--uui-size-3) var(--uui-size-4);
       }
 
       slot[name='tag'] {
@@ -132,30 +164,57 @@ export class UUICardContentNodeElement extends UUICardElement {
         line-height: calc(2 * var(--uui-size-3));
       }
 
-      #icon {
-        font-size: 1.2em;
-        margin-right: var(--uui-size-1);
-      }
-
       #open-part {
         display: flex;
         position: relative;
         font-weight: 700;
         align-items: center;
         cursor: pointer;
+        flex-grow: 1;
+        padding: var(--uui-size-space-4) var(--uui-size-space-5);
+      }
+
+      #content {
+        align-self: stretch;
+        display: flex;
+        flex-direction: column;
       }
 
-      :host([disabled]) #open-part {
+      #item {
+        position: relative;
+        display: flex;
+        align-self: stretch;
+        line-height: normal;
+        align-items: center;
+        margin-top: var(--uui-size-1);
+      }
+
+      #icon {
+        font-size: 1.2em;
+        margin-right: var(--uui-size-1);
+      }
+
+      :host([selectable]) #open-part {
+        padding: 0;
+        margin: var(--uui-size-space-4) var(--uui-size-space-5);
+      }
+
+      :host([disabled]) #name {
         pointer-events: none;
       }
 
-      #open-part:hover {
+      :host(:not([disabled])) #open-part:hover #icon {
+        color: var(--uui-color-interactive-emphasis);
+      }
+      :host(:not([disabled])) #open-part:hover #name {
         text-decoration: underline;
         color: var(--uui-color-interactive-emphasis);
       }
-
-      #name {
-        margin-top: 4px;
+      :host(:not([disabled])) #open-part:hover #detail {
+        color: var(--uui-color-interactive-emphasis);
+      }
+      :host(:not([disabled])) #open-part:hover #default {
+        color: var(--uui-color-interactive-emphasis);
       }
     `,
   ];

packages/uui-card-media/lib/uui-card-media.element.ts

@@ -23,6 +23,15 @@ export class UUICardMediaElement extends UUICardElement {
   @property({ type: String })
   name = '';
 
+  /**
+   * Media detail
+   * @type {string}
+   * @attr detail
+   * @default ''
+   */
+  @property({ type: String })
+  detail?: string;
+
   /**
    * Media file extension, without "."
    * @type {string}
@@ -68,15 +77,7 @@ export class UUICardMediaElement extends UUICardElement {
         tabindex=${this.disabled ? (nothing as any) : '0'}
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}>
-        <!--
-        TODO: Implement when pop-out is ready
-        <uui-icon
-          id="info-icon"
-          name="info"
-          style="color: currentColor">
-        </uui-icon>
-        -->
-        <span>${this.name}</span>
+        ${this.#renderContent()}
       </button>
     `;
   }
@@ -94,16 +95,20 @@ export class UUICardMediaElement extends UUICardElement {
               this.target === '_blank' ? 'noopener noreferrer' : undefined,
             ),
         )}>
+        ${this.#renderContent()}
+      </a>
+    `;
+  }
+
+  #renderContent() {
+    return html`
+      <div id="content">
         <!--
-        TODO: Implement when pop-out is ready
-        <uui-icon
-          id="info-icon"
-          name="info"
-          style="color: currentColor">
-        </uui-icon>
+        TODO: Implement info box when pop-out is ready
         -->
-        <span>${this.name}</span>
-      </a>
+        <span id="name">${this.name}</span>
+        ${this.detail}<slot name="detail"></slot>
+      </div>
     `;
   }
 
@@ -162,28 +167,18 @@ export class UUICardMediaElement extends UUICardElement {
 
       #open-part {
         position: absolute;
-        bottom: 0;
-        width: 100%;
-        background-color: var(--uui-color-surface);
+        z-index: 1;
+        inset: 0;
         color: var(--uui-color-interactive);
         border: none;
         cursor: pointer;
-        border-top: 1px solid var(--uui-color-divider);
-        border-radius: 0 0 var(--uui-border-radius) var(--uui-border-radius);
         display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        font-family: inherit;
-        font-size: var(--uui-type-small-size);
-        box-sizing: border-box;
-        padding: var(--uui-size-2) var(--uui-size-4);
-        text-align: left;
-        word-break: break-word;
+        flex-direction: column;
+        justify-content: flex-end;
       }
 
       :host([disabled]) #open-part {
         pointer-events: none;
-        background: var(--uui-color-disabled);
         color: var(--uui-color-contrast-disabled);
       }
 
@@ -197,6 +192,35 @@ export class UUICardMediaElement extends UUICardElement {
         opacity: 0;
       }
 
+      #content {
+        position: relative;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        font-family: inherit;
+        font-size: var(--uui-type-small-size);
+        box-sizing: border-box;
+        text-align: left;
+        word-break: break-word;
+        padding-top: var(--uui-size-space-3);
+      }
+
+      #content::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-top: 1px solid var(--uui-color-divider);
+        border-radius: 0 0 var(--uui-border-radius) var(--uui-border-radius);
+        background-color: var(--uui-color-surface);
+        pointer-events: none;
+        opacity: 0.96;
+      }
+
+      #name {
+        font-weight: 700;
+      }
+
       :host(
           [image]:not([image='']):hover,
           [image]:not([image='']):focus,
@@ -210,6 +234,18 @@ export class UUICardMediaElement extends UUICardElement {
         transition-delay: 0s;
       }
 
+      :host([selectable]) #open-part {
+        inset: var(--uui-size-space-3) var(--uui-size-space-4);
+      }
+      :host(:not([selectable])) #content {
+        padding: var(--uui-size-space-3) var(--uui-size-space-4);
+      }
+      :host([selectable]) #content::before {
+        inset: calc(var(--uui-size-space-3) * -1)
+          calc(var(--uui-size-space-4) * -1);
+        top: 0;
+      }
+
       /*
       #info-icon {
         margin-right: var(--uui-size-2);