@umbraco-ui/uui 2.0.0 → 2.0.1

package/dist/components/card-content-node/card-content-node.element.js

@@ -1,33 +1,27 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _UUICardContentNodeElement_instances, renderContent_fn, renderButton_fn, renderLink_fn;
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import "../icon/icon.js";
+import "../symbol-expand/symbol-expand.js";
+import { UUICardElement } from "../card/card.element.js";
 import "../card/card.js";
-import { html, nothing, css } from "lit";
+import { css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import "../icon/icon.js";
-import { UUICardElement } from "../card/card.element.js";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const _UUICardContentNodeElement = class _UUICardContentNodeElement extends UUICardElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _UUICardContentNodeElement_instances);
-    this.name = "";
-    this.detail = "";
-    this._iconSlotHasContent = false;
-    this.fallbackIcon = `<svg
+//#region src/components/card-content-node/card-content-node.element.ts
+/**
+*  @element uui-card-content-node
+*  @description - Card component for displaying a content-node.
+*  @slot - slot for the default content area
+*  @slot icon - slot for the icon with support for `<uui-icon>` elements
+*  @slot tag - slot for the tag with support for `<uui-tag>` elements
+*  @slot actions - slot for the actions with support for the `<uui-action-bar>` element
+*/
+var UUICardContentNodeElement = class extends UUICardElement {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "";
+		this.detail = "";
+		this._iconSlotHasContent = false;
+		this.fallbackIcon = `<svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="none"
@@ -39,34 +33,25 @@ const _UUICardContentNodeElement = class _UUICardContentNodeElement extends UUIC
     <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>`;
-  }
-  _onSlotIconChange(event) {
-    this._iconSlotHasContent = event.target.assignedNodes({ flatten: true }).length > 0;
-  }
-  _renderFallbackIcon() {
-    return html`<uui-icon .svg="${this.fallbackIcon}"></uui-icon>`;
-  }
-  renderDetail() {
-    return html`<small id="detail"
+	}
+	_onSlotIconChange(event) {
+		this._iconSlotHasContent = event.target.assignedNodes({ flatten: true }).length > 0;
+	}
+	_renderFallbackIcon() {
+		return html`<uui-icon .svg="${this.fallbackIcon}"></uui-icon>`;
+	}
+	renderDetail() {
+		return html`<small id="detail"
         >${this.detail}<slot name="detail"></slot></small
       ><slot id="default"></slot>`;
-  }
-  render() {
-    return html`
-      ${this.href ? __privateMethod(this, _UUICardContentNodeElement_instances, renderLink_fn).call(this) : __privateMethod(this, _UUICardContentNodeElement_instances, renderButton_fn).call(this)}
-      <!-- Select border must be right after #open-part -->
-      <div id="select-border"></div>
-      ${this.selectable ? this.renderCheckbox() : nothing}
-      <slot name="tag"></slot>
-      <slot name="actions"></slot>
-    `;
-  }
-};
-_UUICardContentNodeElement_instances = new WeakSet();
-renderContent_fn = function() {
-  return html`
+	}
+	#renderContent() {
+		return html`
       <span id="content" class="uui-text">
         <span id="item">
+          ${this.hasChildren ? html`<uui-symbol-expand
+                id="has-children"
+                aria-hidden="true"></uui-symbol-expand>` : nothing}
           <span id="icon">
             <slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
             ${this._iconSlotHasContent === false ? this._renderFallbackIcon() : ""}
@@ -78,36 +63,44 @@ renderContent_fn = function() {
         ${this.renderDetail()}
       </span>
     `;
-};
-renderButton_fn = function() {
-  const tabIndex = !this.disabled ? this.selectOnly ? -1 : 0 : void 0;
-  return html`
+	}
+	#renderButton() {
+		return html`
       <button
         id="open-part"
-        tabindex=${ifDefined(tabIndex)}
+        tabindex=${ifDefined(!this.disabled ? this.selectOnly ? -1 : 0 : void 0)}
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}>
-        ${__privateMethod(this, _UUICardContentNodeElement_instances, renderContent_fn).call(this)}
+        ${this.#renderContent()}
       </button>
     `;
-};
-renderLink_fn = function() {
-  const tabIndex = !this.disabled ? this.selectOnly ? -1 : 0 : void 0;
-  const rel = this.target === "_blank" ? "noopener noreferrer" : void 0;
-  return html`
+	}
+	#renderLink() {
+		const tabIndex = !this.disabled ? this.selectOnly ? -1 : 0 : void 0;
+		const rel = this.target === "_blank" ? "noopener noreferrer" : void 0;
+		return html`
       <a
         id="open-part"
         tabindex=${ifDefined(tabIndex)}
         href=${ifDefined(!this.disabled ? this.href : void 0)}
         target=${ifDefined(this.target || void 0)}
         rel=${ifDefined(this.rel || rel)}>
-        ${__privateMethod(this, _UUICardContentNodeElement_instances, renderContent_fn).call(this)}
+        ${this.#renderContent()}
       </a>
     `;
-};
-_UUICardContentNodeElement.styles = [
-  ...UUICardElement.styles,
-  css`
+	}
+	render() {
+		return html`
+      ${this.href ? this.#renderLink() : this.#renderButton()}
+      <!-- Select border must be right after #open-part -->
+      <div id="select-border"></div>
+      ${this.selectable ? this.renderCheckbox() : nothing}
+      <slot name="tag"></slot>
+      <slot name="actions"></slot>
+    `;
+	}
+	static {
+		this.styles = [...UUICardElement.styles, css`
       :host {
         min-width: 250px;
         flex-direction: column;
@@ -184,7 +177,14 @@ _UUICardContentNodeElement.styles = [
 
       #icon {
         font-size: 1.2em;
-        margin-right: var(--uui-size-1);
+        margin-right: var(--uui-size-2);
+        transition: opacity 120ms;
+      }
+
+      :host([selectable]:hover) #icon,
+      :host([selectable]:focus-within) #icon,
+      :host([selectable][selected]) #icon {
+        opacity: 0;
       }
 
       :host([selectable]) #open-part {
@@ -214,19 +214,18 @@ _UUICardContentNodeElement.styles = [
         top: var(--uui-size-5);
         left: var(--uui-size-6);
       }
-    `
-];
-let UUICardContentNodeElement = _UUICardContentNodeElement;
-__decorateClass([
-  property({ type: String })
-], UUICardContentNodeElement.prototype, "name");
-__decorateClass([
-  property({ type: String })
-], UUICardContentNodeElement.prototype, "detail");
-__decorateClass([
-  state()
-], UUICardContentNodeElement.prototype, "_iconSlotHasContent");
-export {
-  UUICardContentNodeElement
+
+      #has-children {
+        position: absolute;
+        left: calc((var(--uui-size-4) * -1) - 1px);
+      }
+    `];
+	}
 };
-//# sourceMappingURL=card-content-node.element.js.map
+__decorate([property({ type: String })], UUICardContentNodeElement.prototype, "name", void 0);
+__decorate([property({ type: String })], UUICardContentNodeElement.prototype, "detail", void 0);
+__decorate([state()], UUICardContentNodeElement.prototype, "_iconSlotHasContent", void 0);
+//#endregion
+export { UUICardContentNodeElement };
+
+//# sourceMappingURL=card-content-node.element.js.map

package/dist/components/card-content-node/card-content-node.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-content-node.element.js","sources":["../../../src/components/card-content-node/card-content-node.element.ts"],"sourcesContent":["import { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../icon/icon.js';\n\n/**\n *  @element uui-card-content-node\n *  @description - Card component for displaying a content-node.\n *  @slot - slot for the default content area\n *  @slot icon - slot for the icon with support for `<uui-icon>` elements\n *  @slot tag - slot for the tag with support for `<uui-tag>` elements\n *  @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n */\nexport class UUICardContentNodeElement extends UUICardElement {\n  /**\n   * Node name\n   * @type {string}\n   * @attr name\n   * @default ''\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Node details\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  detail = '';\n\n  @state()\n  private _iconSlotHasContent = false;\n\n  protected fallbackIcon = `<svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.75\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    id=\"icon\">\n    <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" />\n    <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />\n  </svg>`;\n\n  private _onSlotIconChange(event: Event) {\n    this._iconSlotHasContent =\n      (event.target as HTMLSlotElement).assignedNodes({ flatten: true })\n        .length > 0;\n  }\n\n  private _renderFallbackIcon() {\n    return html`<uui-icon .svg=\"${this.fallbackIcon}\"></uui-icon>`;\n  }\n\n  protected renderDetail() {\n    return html`<small id=\"detail\"\n        >${this.detail}<slot name=\"detail\"></slot></small\n      ><slot id=\"default\"></slot>`;\n  }\n\n  #renderContent() {\n    return html`\n      <span id=\"content\" class=\"uui-text\">\n        <span id=\"item\">\n          <span id=\"icon\">\n            <slot name=\"icon\" @slotchange=${this._onSlotIconChange}></slot>\n            ${this._iconSlotHasContent === false\n              ? this._renderFallbackIcon()\n              : ''}\n          </span>\n          <div title=\"${this.name}\" id=\"name\">\n            ${this.name}<slot name=\"name\"></slot>\n          </div>\n        </span>\n        ${this.renderDetail()}\n      </span>\n    `;\n  }\n\n  #renderButton() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    return html`\n      <button\n        id=\"open-part\"\n        tabindex=${ifDefined(tabIndex)}\n        @click=${this.handleOpenClick}\n        @keydown=${this.handleOpenKeydown}>\n        ${this.#renderContent()}\n      </button>\n    `;\n  }\n\n  #renderLink() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;\n    return html`\n      <a\n        id=\"open-part\"\n        tabindex=${ifDefined(tabIndex)}\n        href=${ifDefined(!this.disabled ? this.href : undefined)}\n        target=${ifDefined(this.target || undefined)}\n        rel=${ifDefined(this.rel || rel)}>\n        ${this.#renderContent()}\n      </a>\n    `;\n  }\n\n  public render() {\n    return html`\n      ${this.href ? this.#renderLink() : this.#renderButton()}\n      <!-- Select border must be right after #open-part -->\n      <div id=\"select-border\"></div>\n      ${this.selectable ? this.renderCheckbox() : nothing}\n      <slot name=\"tag\"></slot>\n      <slot name=\"actions\"></slot>\n    `;\n  }\n\n  static override readonly styles = [\n    ...UUICardElement.styles,\n    css`\n      :host {\n        min-width: 250px;\n        flex-direction: column;\n        justify-content: space-between;\n      }\n\n      slot[name='tag'] {\n        position: absolute;\n        bottom: var(--uui-size-4);\n        right: var(--uui-size-4);\n        display: flex;\n        justify-content: right;\n      }\n\n      slot[name='actions'] {\n        position: absolute;\n        top: var(--uui-size-space-3);\n        right: var(--uui-size-space-3);\n        display: flex;\n        justify-content: right;\n\n        opacity: 0;\n        transition: opacity 120ms;\n      }\n      :host(:focus) slot[name='actions'],\n      :host(:focus-within) slot[name='actions'],\n      :host(:hover) slot[name='actions'] {\n        opacity: 1;\n      }\n\n      slot:not([name]) {\n        display: block;\n        margin: var(--uui-size-1);\n        margin-top: var(--uui-size-3);\n      }\n\n      slot:not([name])::slotted(*) {\n        font-size: var(--uui-type-small-size);\n        line-height: calc(2 * var(--uui-size-3));\n      }\n\n      #open-part {\n        display: flex;\n        position: relative;\n        align-items: center;\n        cursor: pointer;\n        flex-grow: 1;\n        padding: var(--uui-size-space-4) var(--uui-size-space-5);\n      }\n\n      #open-part #name {\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        overflow-wrap: anywhere;\n      }\n\n      #content {\n        align-self: stretch;\n        display: flex;\n        flex-direction: column;\n      }\n\n      #item {\n        position: relative;\n        display: flex;\n        align-self: stretch;\n        line-height: normal;\n        align-items: center;\n        margin-top: var(--uui-size-1);\n      }\n\n      #icon {\n        font-size: 1.2em;\n        margin-right: var(--uui-size-1);\n      }\n\n      :host([selectable]) #open-part {\n        padding: 0;\n        margin: var(--uui-size-space-4) var(--uui-size-space-5);\n      }\n\n      :host([disabled]) #name {\n        pointer-events: none;\n      }\n\n      :host(:not([disabled])) #open-part:hover #icon {\n        color: var(--uui-color-interactive-emphasis);\n      }\n      :host(:not([disabled])) #open-part:hover #name {\n        text-decoration: underline;\n        color: var(--uui-color-interactive-emphasis);\n      }\n      :host(:not([disabled])) #open-part:hover #detail {\n        color: var(--uui-color-interactive-emphasis);\n      }\n      :host(:not([disabled])) #open-part:hover #default {\n        color: var(--uui-color-interactive-emphasis);\n      }\n\n      #select-checkbox {\n        top: var(--uui-size-5);\n        left: var(--uui-size-6);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"card-content-node.element.js","names":["#renderContent","#renderLink","#renderButton"],"sources":["../../../src/components/card-content-node/card-content-node.element.ts"],"sourcesContent":["import { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../icon/icon.js';\nimport '../symbol-expand/symbol-expand.js';\n\n/**\n *  @element uui-card-content-node\n *  @description - Card component for displaying a content-node.\n *  @slot - slot for the default content area\n *  @slot icon - slot for the icon with support for `<uui-icon>` elements\n *  @slot tag - slot for the tag with support for `<uui-tag>` elements\n *  @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n */\nexport class UUICardContentNodeElement extends UUICardElement {\n  /**\n   * Node name\n   * @type {string}\n   * @attr name\n   * @default ''\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Node details\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  detail = '';\n\n  @state()\n  private _iconSlotHasContent = false;\n\n  protected fallbackIcon = `<svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.75\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    id=\"icon\">\n    <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" />\n    <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />\n  </svg>`;\n\n  private _onSlotIconChange(event: Event) {\n    this._iconSlotHasContent =\n      (event.target as HTMLSlotElement).assignedNodes({ flatten: true })\n        .length > 0;\n  }\n\n  private _renderFallbackIcon() {\n    return html`<uui-icon .svg=\"${this.fallbackIcon}\"></uui-icon>`;\n  }\n\n  protected renderDetail() {\n    return html`<small id=\"detail\"\n        >${this.detail}<slot name=\"detail\"></slot></small\n      ><slot id=\"default\"></slot>`;\n  }\n\n  #renderContent() {\n    return html`\n      <span id=\"content\" class=\"uui-text\">\n        <span id=\"item\">\n          ${this.hasChildren\n            ? html`<uui-symbol-expand\n                id=\"has-children\"\n                aria-hidden=\"true\"></uui-symbol-expand>`\n            : nothing}\n          <span id=\"icon\">\n            <slot name=\"icon\" @slotchange=${this._onSlotIconChange}></slot>\n            ${this._iconSlotHasContent === false\n              ? this._renderFallbackIcon()\n              : ''}\n          </span>\n          <div title=\"${this.name}\" id=\"name\">\n            ${this.name}<slot name=\"name\"></slot>\n          </div>\n        </span>\n        ${this.renderDetail()}\n      </span>\n    `;\n  }\n\n  #renderButton() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    return html`\n      <button\n        id=\"open-part\"\n        tabindex=${ifDefined(tabIndex)}\n        @click=${this.handleOpenClick}\n        @keydown=${this.handleOpenKeydown}>\n        ${this.#renderContent()}\n      </button>\n    `;\n  }\n\n  #renderLink() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;\n    return html`\n      <a\n        id=\"open-part\"\n        tabindex=${ifDefined(tabIndex)}\n        href=${ifDefined(!this.disabled ? this.href : undefined)}\n        target=${ifDefined(this.target || undefined)}\n        rel=${ifDefined(this.rel || rel)}>\n        ${this.#renderContent()}\n      </a>\n    `;\n  }\n\n  public render() {\n    return html`\n      ${this.href ? this.#renderLink() : this.#renderButton()}\n      <!-- Select border must be right after #open-part -->\n      <div id=\"select-border\"></div>\n      ${this.selectable ? this.renderCheckbox() : nothing}\n      <slot name=\"tag\"></slot>\n      <slot name=\"actions\"></slot>\n    `;\n  }\n\n  static override readonly styles = [\n    ...UUICardElement.styles,\n    css`\n      :host {\n        min-width: 250px;\n        flex-direction: column;\n        justify-content: space-between;\n      }\n\n      slot[name='tag'] {\n        position: absolute;\n        bottom: var(--uui-size-4);\n        right: var(--uui-size-4);\n        display: flex;\n        justify-content: right;\n      }\n\n      slot[name='actions'] {\n        position: absolute;\n        top: var(--uui-size-space-3);\n        right: var(--uui-size-space-3);\n        display: flex;\n        justify-content: right;\n\n        opacity: 0;\n        transition: opacity 120ms;\n      }\n      :host(:focus) slot[name='actions'],\n      :host(:focus-within) slot[name='actions'],\n      :host(:hover) slot[name='actions'] {\n        opacity: 1;\n      }\n\n      slot:not([name]) {\n        display: block;\n        margin: var(--uui-size-1);\n        margin-top: var(--uui-size-3);\n      }\n\n      slot:not([name])::slotted(*) {\n        font-size: var(--uui-type-small-size);\n        line-height: calc(2 * var(--uui-size-3));\n      }\n\n      #open-part {\n        display: flex;\n        position: relative;\n        align-items: center;\n        cursor: pointer;\n        flex-grow: 1;\n        padding: var(--uui-size-space-4) var(--uui-size-space-5);\n      }\n\n      #open-part #name {\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        overflow-wrap: anywhere;\n      }\n\n      #content {\n        align-self: stretch;\n        display: flex;\n        flex-direction: column;\n      }\n\n      #item {\n        position: relative;\n        display: flex;\n        align-self: stretch;\n        line-height: normal;\n        align-items: center;\n        margin-top: var(--uui-size-1);\n      }\n\n      #icon {\n        font-size: 1.2em;\n        margin-right: var(--uui-size-2);\n        transition: opacity 120ms;\n      }\n\n      :host([selectable]:hover) #icon,\n      :host([selectable]:focus-within) #icon,\n      :host([selectable][selected]) #icon {\n        opacity: 0;\n      }\n\n      :host([selectable]) #open-part {\n        padding: 0;\n        margin: var(--uui-size-space-4) var(--uui-size-space-5);\n      }\n\n      :host([disabled]) #name {\n        pointer-events: none;\n      }\n\n      :host(:not([disabled])) #open-part:hover #icon {\n        color: var(--uui-color-interactive-emphasis);\n      }\n      :host(:not([disabled])) #open-part:hover #name {\n        text-decoration: underline;\n        color: var(--uui-color-interactive-emphasis);\n      }\n      :host(:not([disabled])) #open-part:hover #detail {\n        color: var(--uui-color-interactive-emphasis);\n      }\n      :host(:not([disabled])) #open-part:hover #default {\n        color: var(--uui-color-interactive-emphasis);\n      }\n\n      #select-checkbox {\n        top: var(--uui-size-5);\n        left: var(--uui-size-6);\n      }\n\n      #has-children {\n        position: absolute;\n        left: calc((var(--uui-size-4) * -1) - 1px);\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,IAAa,4BAAb,cAA+C,eAAe;;;cAQrD;gBASE;6BAGqB;sBAEL;;;;;;;;;;;;;CAazB,kBAA0B,OAAc;EACtC,KAAK,sBACF,MAAM,OAA2B,cAAc,EAAE,SAAS,KAAK,CAAC,CAAC,CAC/D,SAAS;CAChB;CAEA,sBAA8B;EAC5B,OAAO,IAAI,mBAAmB,KAAK,aAAa;CAClD;CAEA,eAAyB;EACvB,OAAO,IAAI;WACJ,KAAK,OAAO;;CAErB;CAEA,iBAAiB;EACf,OAAO,IAAI;;;YAGH,KAAK,cACH,IAAI;;2DAGJ,QAAQ;;4CAEsB,KAAK,kBAAkB;cACrD,KAAK,wBAAwB,QAC3B,KAAK,oBAAoB,IACzB,GAAG;;wBAEK,KAAK,KAAK;cACpB,KAAK,KAAK;;;UAGd,KAAK,aAAa,EAAE;;;CAG5B;CAEA,gBAAgB;EAEd,OAAO,IAAI;;;mBAGI,UAJE,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK,KAAA,CAI9B,EAAE;iBACtB,KAAK,gBAAgB;mBACnB,KAAK,kBAAkB;UAChC,KAAKA,eAAe,EAAE;;;CAG9B;CAEA,cAAc;EACZ,MAAM,WAAW,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK,KAAA;EAC/D,MAAM,MAAM,KAAK,WAAW,WAAW,wBAAwB,KAAA;EAC/D,OAAO,IAAI;;;mBAGI,UAAU,QAAQ,EAAE;eACxB,UAAU,CAAC,KAAK,WAAW,KAAK,OAAO,KAAA,CAAS,EAAE;iBAChD,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;cACvC,UAAU,KAAK,OAAO,GAAG,EAAE;UAC/B,KAAKA,eAAe,EAAE;;;CAG9B;CAEA,SAAgB;EACd,OAAO,IAAI;QACP,KAAK,OAAO,KAAKC,YAAY,IAAI,KAAKC,cAAc,EAAE;;;QAGtD,KAAK,aAAa,KAAK,eAAe,IAAI,QAAQ;;;;CAIxD;;gBAEkC,CAChC,GAAG,eAAe,QAClB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwHL;;AACF;YAtOG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,0BAAA,WAAA,QAAA,KAAA,CAAA;YASzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,0BAAA,WAAA,UAAA,KAAA,CAAA;YAGzB,MAAM,CAAA,GAAA,0BAAA,WAAA,uBAAA,KAAA,CAAA"}

package/dist/components/card-content-node/card-content-node.js

@@ -1,8 +1,8 @@
 import { defineElement } from "../../internal/registration/index.js";
 import { UUICardContentNodeElement } from "./card-content-node.element.js";
+//#region src/components/card-content-node/card-content-node.ts
 defineElement("uui-card-content-node", UUICardContentNodeElement);
-export {
-  UUICardContentNodeElement,
-  UUICardContentNodeElement as default
-};
-//# sourceMappingURL=card-content-node.js.map
+//#endregion
+export { UUICardContentNodeElement };
+
+//# sourceMappingURL=card-content-node.js.map

package/dist/components/card-content-node/card-content-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-content-node.js","sources":["../../../src/components/card-content-node/card-content-node.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUICardContentNodeElement } from './card-content-node.element.js';\n\ndefineElement('uui-card-content-node', UUICardContentNodeElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-card-content-node': UUICardContentNodeElement;\n  }\n}\n\nexport * from './card-content-node.element.js';\nexport { UUICardContentNodeElement as default } from './card-content-node.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,yBAAyB,yBAAyB;"}
+{"version":3,"file":"card-content-node.js","names":[],"sources":["../../../src/components/card-content-node/card-content-node.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUICardContentNodeElement } from './card-content-node.element.js';\n\ndefineElement('uui-card-content-node', UUICardContentNodeElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-card-content-node': UUICardContentNodeElement;\n  }\n}\n\nexport * from './card-content-node.element.js';\n"],"mappings":";;;AAGA,cAAc,yBAAyB,yBAAyB"}

package/dist/components/card-media/card-media.d.ts

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './card-media.element.js';
-export { UUICardMediaElement as default } from './card-media.element.js';

package/dist/components/card-media/card-media.element.d.ts

@@ -1,12 +1,14 @@
 import { UUICardElement } from '../card/card.js';
 import '../symbol-folder/symbol-folder.js';
 import '../symbol-file/symbol-file.js';
+import '../symbol-expand/symbol-expand.js';
 /**
  *  @element uui-card-media
  *  @description - Card component for displaying a media item.
  *  @slot tag - slot for the tag with support for `<uui-tag>` elements
  *  @slot actions - slot for the actions with support for the `<uui-action-bar>` element
  *  @slot - slot for the default content area
+ *  @slot icon - slot for the icon with support for `<uui-icon>` elements
  */
 export declare class UUICardMediaElement extends UUICardElement {
     #private;
@@ -31,6 +33,8 @@ export declare class UUICardMediaElement extends UUICardElement {
      * @default ''
      */
     fileExt: string;
+    private _iconSlotHasContent;
+    private _iconSlotChanged;
     protected hasPreview: boolean;
     private queryPreviews;
     protected renderMedia(): import("lit-html").TemplateResult<1> | "";

package/dist/components/card-media/card-media.element.js

@@ -1,97 +1,95 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _UUICardMediaElement_instances, renderButton_fn, renderLink_fn, renderContent_fn;
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import "../symbol-expand/symbol-expand.js";
+import "../symbol-file/symbol-file.js";
+import "../symbol-folder/symbol-folder.js";
+import { UUICardElement } from "../card/card.element.js";
 import "../card/card.js";
-import { html, nothing, css } from "lit";
+import { css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import "../symbol-folder/symbol-folder.js";
-import "../symbol-file/symbol-file.js";
-import { UUICardElement } from "../card/card.element.js";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const _UUICardMediaElement = class _UUICardMediaElement extends UUICardElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _UUICardMediaElement_instances);
-    this.name = "";
-    this.fileExt = "";
-    this.hasPreview = false;
-  }
-  queryPreviews(e) {
-    this.hasPreview = e.composedPath()[0].assignedElements({
-      flatten: true
-    }).length > 0;
-  }
-  renderMedia() {
-    if (this.hasPreview === true) return "";
-    if (this.fileExt === "") {
-      return html`<uui-symbol-folder id="entity-symbol"></uui-symbol-folder>`;
-    }
-    return html`<uui-symbol-file
+//#region src/components/card-media/card-media.element.ts
+/**
+*  @element uui-card-media
+*  @description - Card component for displaying a media item.
+*  @slot tag - slot for the tag with support for `<uui-tag>` elements
+*  @slot actions - slot for the actions with support for the `<uui-action-bar>` element
+*  @slot - slot for the default content area
+*  @slot icon - slot for the icon with support for `<uui-icon>` elements
+*/
+var UUICardMediaElement = class extends UUICardElement {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "";
+		this.fileExt = "";
+		this._iconSlotHasContent = false;
+		this._iconSlotChanged = (e) => {
+			this._iconSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
+		};
+		this.hasPreview = false;
+	}
+	queryPreviews(e) {
+		this.hasPreview = e.composedPath()[0].assignedElements({ flatten: true }).length > 0;
+	}
+	renderMedia() {
+		if (this.hasPreview === true) return "";
+		if (this.fileExt === "") return html`<uui-symbol-folder id="entity-symbol"></uui-symbol-folder>`;
+		return html`<uui-symbol-file
       id="entity-symbol"
       type="${this.fileExt}"></uui-symbol-file>`;
-  }
-  render() {
-    return html` ${this.renderMedia()}
-      <slot @slotchange=${this.queryPreviews}></slot>
-      ${this.href ? __privateMethod(this, _UUICardMediaElement_instances, renderLink_fn).call(this) : __privateMethod(this, _UUICardMediaElement_instances, renderButton_fn).call(this)}
-      <!-- Select border must be right after .open-part -->
-      <div id="select-border"></div>
-      ${this.selectable ? this.renderCheckbox() : nothing}
-      <slot name="tag"></slot>
-      <slot name="actions"></slot>`;
-  }
-};
-_UUICardMediaElement_instances = new WeakSet();
-renderButton_fn = function() {
-  const tabIndex = !this.disabled ? this.selectOnly ? -1 : 0 : void 0;
-  return html`
+	}
+	#renderButton() {
+		return html`
       <button
         id="open-part"
-        tabindex=${ifDefined(tabIndex)}
+        tabindex=${ifDefined(!this.disabled ? this.selectOnly ? -1 : 0 : void 0)}
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}>
-        ${__privateMethod(this, _UUICardMediaElement_instances, renderContent_fn).call(this)}
+        ${this.#renderContent()}
       </button>
     `;
-};
-renderLink_fn = function() {
-  const tabIndex = !this.disabled ? this.selectOnly ? -1 : 0 : void 0;
-  const rel = this.target === "_blank" ? "noopener noreferrer" : void 0;
-  return html`
+	}
+	#renderLink() {
+		const tabIndex = !this.disabled ? this.selectOnly ? -1 : 0 : void 0;
+		const rel = this.target === "_blank" ? "noopener noreferrer" : void 0;
+		return html`
       <a
         id="open-part"
         tabindex=${ifDefined(tabIndex)}
         href=${ifDefined(!this.disabled ? this.href : void 0)}
         target=${ifDefined(this.target || void 0)}
         rel=${ifDefined(this.rel || rel)}>
-        ${__privateMethod(this, _UUICardMediaElement_instances, renderContent_fn).call(this)}
+        ${this.#renderContent()}
       </a>
     `;
-};
-renderContent_fn = function() {
-  return html`
+	}
+	#renderContent() {
+		return html`
       <div id="content" class="uui-text">
-        <span id="name" title="${this.name}">${this.name}</span>
+        <span id="name" title="${this.name}">
+          ${this.hasChildren ? html`<uui-symbol-expand aria-hidden="true"></uui-symbol-expand>` : nothing}
+          <slot
+            name="icon"
+            id="icon"
+            style=${this._iconSlotHasContent ? "" : "display: none;"}
+            @slotchange=${this._iconSlotChanged}></slot
+          ><span class="label">${this.name}</span>
+        </span>
         <small id="detail">${this.detail}<slot name="detail"></slot></small>
       </div>
     `;
-};
-_UUICardMediaElement.styles = [
-  ...UUICardElement.styles,
-  css`
+	}
+	render() {
+		return html` ${this.renderMedia()}
+      <slot @slotchange=${this.queryPreviews}></slot>
+      ${this.href ? this.#renderLink() : this.#renderButton()}
+      <!-- Select border must be right after .open-part -->
+      <div id="select-border"></div>
+      ${this.selectable ? this.renderCheckbox() : nothing}
+      <slot name="tag"></slot>
+      <slot name="actions"></slot>`;
+	}
+	static {
+		this.styles = [...UUICardElement.styles, css`
       #entity-symbol {
         align-self: center;
         width: 60%;
@@ -164,6 +162,12 @@ _UUICardMediaElement.styles = [
       }
 
       #open-part #name {
+        display: flex;
+        align-items: center;
+        gap: var(--uui-size-space-1);
+      }
+
+      #open-part #name .label {
         display: -webkit-box;
         -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;
@@ -201,6 +205,11 @@ _UUICardMediaElement.styles = [
         opacity: 0.96;
       }
 
+      #icon {
+        display: inline-flex;
+        margin-right: var(--uui-size-1);
+      }
+
       #detail {
         opacity: 0.6;
       }
@@ -230,6 +239,15 @@ _UUICardMediaElement.styles = [
         top: 0;
       }
 
+      :host([active]) {
+        background-color: var(--uui-color-surface);
+      }
+
+      :host([active]) #content::before {
+        background-color: var(--uui-color-current);
+        bottom: -1px;
+      }
+
       /*
       #info-icon {
         margin-right: var(--uui-size-2);
@@ -237,22 +255,18 @@ _UUICardMediaElement.styles = [
         height: var(--uui-size-8);
       }
       */
-    `
-];
-let UUICardMediaElement = _UUICardMediaElement;
-__decorateClass([
-  property({ type: String })
-], UUICardMediaElement.prototype, "name");
-__decorateClass([
-  property({ type: String })
-], UUICardMediaElement.prototype, "detail");
-__decorateClass([
-  property({ type: String, attribute: "file-ext" })
-], UUICardMediaElement.prototype, "fileExt");
-__decorateClass([
-  state()
-], UUICardMediaElement.prototype, "hasPreview");
-export {
-  UUICardMediaElement
+    `];
+	}
 };
-//# sourceMappingURL=card-media.element.js.map
+__decorate([property({ type: String })], UUICardMediaElement.prototype, "name", void 0);
+__decorate([property({ type: String })], UUICardMediaElement.prototype, "detail", void 0);
+__decorate([property({
+	type: String,
+	attribute: "file-ext"
+})], UUICardMediaElement.prototype, "fileExt", void 0);
+__decorate([state()], UUICardMediaElement.prototype, "_iconSlotHasContent", void 0);
+__decorate([state()], UUICardMediaElement.prototype, "hasPreview", void 0);
+//#endregion
+export { UUICardMediaElement };
+
+//# sourceMappingURL=card-media.element.js.map

package/dist/components/card-media/card-media.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-media.element.js","sources":["../../../src/components/card-media/card-media.element.ts"],"sourcesContent":["import { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../symbol-folder/symbol-folder.js';\nimport '../symbol-file/symbol-file.js';\n\n/**\n *  @element uui-card-media\n *  @description - Card component for displaying a media item.\n *  @slot tag - slot for the tag with support for `<uui-tag>` elements\n *  @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n *  @slot - slot for the default content area\n */\nexport class UUICardMediaElement extends UUICardElement {\n  /**\n   * Media name\n   * @type {string}\n   * @attr name\n   * @default ''\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Media detail\n   * @type {string}\n   * @attr detail\n   * @default ''\n   */\n  @property({ type: String })\n  detail?: string;\n\n  /**\n   * Media file extension, without \".\"\n   * @type {string}\n   * @attr file-ext\n   * @default ''\n   */\n  @property({ type: String, attribute: 'file-ext' })\n  fileExt = '';\n\n  @state()\n  protected hasPreview = false;\n\n  private queryPreviews(e: Event): void {\n    this.hasPreview =\n      (e.composedPath()[0] as HTMLSlotElement).assignedElements({\n        flatten: true,\n      }).length > 0;\n  }\n\n  protected renderMedia() {\n    if (this.hasPreview === true) return '';\n\n    if (this.fileExt === '') {\n      return html`<uui-symbol-folder id=\"entity-symbol\"></uui-symbol-folder>`;\n    }\n\n    return html`<uui-symbol-file\n      id=\"entity-symbol\"\n      type=\"${this.fileExt}\"></uui-symbol-file>`;\n  }\n\n  #renderButton() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    return html`\n      <button\n        id=\"open-part\"\n        tabindex=${ifDefined(tabIndex)}\n        @click=${this.handleOpenClick}\n        @keydown=${this.handleOpenKeydown}>\n        ${this.#renderContent()}\n      </button>\n    `;\n  }\n\n  #renderLink() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;\n    return html`\n      <a\n        id=\"open-part\"\n        tabindex=${ifDefined(tabIndex)}\n        href=${ifDefined(!this.disabled ? this.href : undefined)}\n        target=${ifDefined(this.target || undefined)}\n        rel=${ifDefined(this.rel || rel)}>\n        ${this.#renderContent()}\n      </a>\n    `;\n  }\n\n  #renderContent() {\n    return html`\n      <div id=\"content\" class=\"uui-text\">\n        <span id=\"name\" title=\"${this.name}\">${this.name}</span>\n        <small id=\"detail\">${this.detail}<slot name=\"detail\"></slot></small>\n      </div>\n    `;\n  }\n\n  public render() {\n    return html` ${this.renderMedia()}\n      <slot @slotchange=${this.queryPreviews}></slot>\n      ${this.href ? this.#renderLink() : this.#renderButton()}\n      <!-- Select border must be right after .open-part -->\n      <div id=\"select-border\"></div>\n      ${this.selectable ? this.renderCheckbox() : nothing}\n      <slot name=\"tag\"></slot>\n      <slot name=\"actions\"></slot>`;\n  }\n\n  static override readonly styles = [\n    ...UUICardElement.styles,\n    css`\n      #entity-symbol {\n        align-self: center;\n        width: 60%;\n        margin-bottom: var(--uui-size-layout-1);\n        padding: var(--uui-size-space-6);\n      }\n\n      slot:not([name]) {\n        display: block;\n        overflow: clip;\n        border-radius: calc(var(--uui-border-radius-2) - 1px);\n      }\n\n      slot[name='tag'] {\n        position: absolute;\n        bottom: var(--uui-size-2);\n        right: var(--uui-size-4);\n        display: flex;\n        justify-content: right;\n        z-index: 2;\n      }\n\n      slot[name='actions'] {\n        position: absolute;\n        top: var(--uui-size-space-3);\n        right: var(--uui-size-space-3);\n        display: flex;\n        justify-content: right;\n        z-index: 2;\n        opacity: 0;\n        transition: opacity 120ms;\n      }\n      :host(:focus) slot[name='actions'],\n      :host(:focus-within) slot[name='actions'],\n      :host(:hover) slot[name='actions'] {\n        opacity: 1;\n      }\n\n      slot:not([name])::slotted(*) {\n        align-self: center;\n        object-fit: cover;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n      }\n\n      #open-part {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n        margin-bottom: 0;\n        color: var(--uui-color-interactive);\n        border: none;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n      }\n\n      :host([disabled]) #open-part {\n        pointer-events: none;\n        color: var(--uui-color-contrast-disabled);\n      }\n\n      #open-part:hover {\n        color: var(--uui-color-interactive-emphasis);\n      }\n      #open-part:hover #name {\n        text-decoration: underline;\n      }\n\n      #open-part #name {\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        overflow-wrap: anywhere;\n      }\n\n      :host([image]:not([image=''])) #open-part {\n        transition: opacity 0.5s 0.5s;\n        opacity: 0;\n      }\n\n      #content {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        font-family: inherit;\n        box-sizing: border-box;\n        text-align: left;\n        word-break: break-word;\n        padding-top: var(--uui-size-space-3);\n      }\n\n      #content::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        z-index: -1;\n        border-top: 1px solid var(--uui-color-divider);\n        border-radius: 0 0 calc(var(--uui-border-radius-2) - 1px)\n          calc(var(--uui-border-radius-2) - 1px);\n        background-color: var(--uui-color-surface);\n        pointer-events: none;\n        opacity: 0.96;\n      }\n\n      #detail {\n        opacity: 0.6;\n      }\n\n      :host(\n          [image]:not([image='']):hover,\n          [image]:not([image='']):focus,\n          [image]:not([image='']):focus-within,\n          [selected][image]:not([image='']),\n          [error][image]:not([image=''])\n        )\n        #open-part {\n        opacity: 1;\n        transition-duration: 120ms;\n        transition-delay: 0s;\n      }\n\n      :host([selectable]) #open-part {\n        inset: var(--uui-size-space-3) var(--uui-size-space-4);\n      }\n      :host(:not([selectable])) #content {\n        padding: var(--uui-size-space-3) var(--uui-size-space-4);\n      }\n      :host([selectable]) #content::before {\n        inset: calc(var(--uui-size-space-3) * -1)\n          calc(var(--uui-size-space-4) * -1);\n        top: 0;\n      }\n\n      /*\n      #info-icon {\n        margin-right: var(--uui-size-2);\n        display: flex;\n        height: var(--uui-size-8);\n      }\n      */\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"card-media.element.js","names":["#renderContent","#renderLink","#renderButton"],"sources":["../../../src/components/card-media/card-media.element.ts"],"sourcesContent":["import { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../symbol-folder/symbol-folder.js';\nimport '../symbol-file/symbol-file.js';\nimport '../symbol-expand/symbol-expand.js';\n\n/**\n *  @element uui-card-media\n *  @description - Card component for displaying a media item.\n *  @slot tag - slot for the tag with support for `<uui-tag>` elements\n *  @slot actions - slot for the actions with support for the `<uui-action-bar>` element\n *  @slot - slot for the default content area\n *  @slot icon - slot for the icon with support for `<uui-icon>` elements\n */\nexport class UUICardMediaElement extends UUICardElement {\n  /**\n   * Media name\n   * @type {string}\n   * @attr name\n   * @default ''\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Media detail\n   * @type {string}\n   * @attr detail\n   * @default ''\n   */\n  @property({ type: String })\n  detail?: string;\n\n  /**\n   * Media file extension, without \".\"\n   * @type {string}\n   * @attr file-ext\n   * @default ''\n   */\n  @property({ type: String, attribute: 'file-ext' })\n  fileExt = '';\n\n  @state()\n  private _iconSlotHasContent = false;\n\n  private _iconSlotChanged = (e: Event): void => {\n    this._iconSlotHasContent =\n      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  @state()\n  protected hasPreview = false;\n\n  private queryPreviews(e: Event): void {\n    this.hasPreview =\n      (e.composedPath()[0] as HTMLSlotElement).assignedElements({\n        flatten: true,\n      }).length > 0;\n  }\n\n  protected renderMedia() {\n    if (this.hasPreview === true) return '';\n\n    if (this.fileExt === '') {\n      return html`<uui-symbol-folder id=\"entity-symbol\"></uui-symbol-folder>`;\n    }\n\n    return html`<uui-symbol-file\n      id=\"entity-symbol\"\n      type=\"${this.fileExt}\"></uui-symbol-file>`;\n  }\n\n  #renderButton() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    return html`\n      <button\n        id=\"open-part\"\n        tabindex=${ifDefined(tabIndex)}\n        @click=${this.handleOpenClick}\n        @keydown=${this.handleOpenKeydown}>\n        ${this.#renderContent()}\n      </button>\n    `;\n  }\n\n  #renderLink() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;\n    return html`\n      <a\n        id=\"open-part\"\n        tabindex=${ifDefined(tabIndex)}\n        href=${ifDefined(!this.disabled ? this.href : undefined)}\n        target=${ifDefined(this.target || undefined)}\n        rel=${ifDefined(this.rel || rel)}>\n        ${this.#renderContent()}\n      </a>\n    `;\n  }\n\n  #renderContent() {\n    return html`\n      <div id=\"content\" class=\"uui-text\">\n        <span id=\"name\" title=\"${this.name}\">\n          ${this.hasChildren\n            ? html`<uui-symbol-expand aria-hidden=\"true\"></uui-symbol-expand>`\n            : nothing}\n          <slot\n            name=\"icon\"\n            id=\"icon\"\n            style=${this._iconSlotHasContent ? '' : 'display: none;'}\n            @slotchange=${this._iconSlotChanged}></slot\n          ><span class=\"label\">${this.name}</span>\n        </span>\n        <small id=\"detail\">${this.detail}<slot name=\"detail\"></slot></small>\n      </div>\n    `;\n  }\n\n  public render() {\n    return html` ${this.renderMedia()}\n      <slot @slotchange=${this.queryPreviews}></slot>\n      ${this.href ? this.#renderLink() : this.#renderButton()}\n      <!-- Select border must be right after .open-part -->\n      <div id=\"select-border\"></div>\n      ${this.selectable ? this.renderCheckbox() : nothing}\n      <slot name=\"tag\"></slot>\n      <slot name=\"actions\"></slot>`;\n  }\n\n  static override readonly styles = [\n    ...UUICardElement.styles,\n    css`\n      #entity-symbol {\n        align-self: center;\n        width: 60%;\n        margin-bottom: var(--uui-size-layout-1);\n        padding: var(--uui-size-space-6);\n      }\n\n      slot:not([name]) {\n        display: block;\n        overflow: clip;\n        border-radius: calc(var(--uui-border-radius-2) - 1px);\n      }\n\n      slot[name='tag'] {\n        position: absolute;\n        bottom: var(--uui-size-2);\n        right: var(--uui-size-4);\n        display: flex;\n        justify-content: right;\n        z-index: 2;\n      }\n\n      slot[name='actions'] {\n        position: absolute;\n        top: var(--uui-size-space-3);\n        right: var(--uui-size-space-3);\n        display: flex;\n        justify-content: right;\n        z-index: 2;\n        opacity: 0;\n        transition: opacity 120ms;\n      }\n      :host(:focus) slot[name='actions'],\n      :host(:focus-within) slot[name='actions'],\n      :host(:hover) slot[name='actions'] {\n        opacity: 1;\n      }\n\n      slot:not([name])::slotted(*) {\n        align-self: center;\n        object-fit: cover;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n      }\n\n      #open-part {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n        margin-bottom: 0;\n        color: var(--uui-color-interactive);\n        border: none;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-end;\n      }\n\n      :host([disabled]) #open-part {\n        pointer-events: none;\n        color: var(--uui-color-contrast-disabled);\n      }\n\n      #open-part:hover {\n        color: var(--uui-color-interactive-emphasis);\n      }\n      #open-part:hover #name {\n        text-decoration: underline;\n      }\n\n      #open-part #name {\n        display: flex;\n        align-items: center;\n        gap: var(--uui-size-space-1);\n      }\n\n      #open-part #name .label {\n        display: -webkit-box;\n        -webkit-line-clamp: 1;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        overflow-wrap: anywhere;\n      }\n\n      :host([image]:not([image=''])) #open-part {\n        transition: opacity 0.5s 0.5s;\n        opacity: 0;\n      }\n\n      #content {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        font-family: inherit;\n        box-sizing: border-box;\n        text-align: left;\n        word-break: break-word;\n        padding-top: var(--uui-size-space-3);\n      }\n\n      #content::before {\n        content: '';\n        position: absolute;\n        inset: 0;\n        z-index: -1;\n        border-top: 1px solid var(--uui-color-divider);\n        border-radius: 0 0 calc(var(--uui-border-radius-2) - 1px)\n          calc(var(--uui-border-radius-2) - 1px);\n        background-color: var(--uui-color-surface);\n        pointer-events: none;\n        opacity: 0.96;\n      }\n\n      #icon {\n        display: inline-flex;\n        margin-right: var(--uui-size-1);\n      }\n\n      #detail {\n        opacity: 0.6;\n      }\n\n      :host(\n          [image]:not([image='']):hover,\n          [image]:not([image='']):focus,\n          [image]:not([image='']):focus-within,\n          [selected][image]:not([image='']),\n          [error][image]:not([image=''])\n        )\n        #open-part {\n        opacity: 1;\n        transition-duration: 120ms;\n        transition-delay: 0s;\n      }\n\n      :host([selectable]) #open-part {\n        inset: var(--uui-size-space-3) var(--uui-size-space-4);\n      }\n      :host(:not([selectable])) #content {\n        padding: var(--uui-size-space-3) var(--uui-size-space-4);\n      }\n      :host([selectable]) #content::before {\n        inset: calc(var(--uui-size-space-3) * -1)\n          calc(var(--uui-size-space-4) * -1);\n        top: 0;\n      }\n\n      :host([active]) {\n        background-color: var(--uui-color-surface);\n      }\n\n      :host([active]) #content::before {\n        background-color: var(--uui-color-current);\n        bottom: -1px;\n      }\n\n      /*\n      #info-icon {\n        margin-right: var(--uui-size-2);\n        display: flex;\n        height: var(--uui-size-8);\n      }\n      */\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,IAAa,sBAAb,cAAyC,eAAe;;;cAQ/C;iBAkBG;6BAGoB;2BAEF,MAAmB;GAC7C,KAAK,sBACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,SAAS;EAC5E;oBAGuB;;CAEvB,cAAsB,GAAgB;EACpC,KAAK,aACF,EAAE,aAAa,CAAC,CAAC,EAAE,CAAqB,iBAAiB,EACxD,SAAS,KACX,CAAC,CAAC,CAAC,SAAS;CAChB;CAEA,cAAwB;EACtB,IAAI,KAAK,eAAe,MAAM,OAAO;EAErC,IAAI,KAAK,YAAY,IACnB,OAAO,IAAI;EAGb,OAAO,IAAI;;cAED,KAAK,QAAQ;CACzB;CAEA,gBAAgB;EAEd,OAAO,IAAI;;;mBAGI,UAJE,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK,KAAA,CAI9B,EAAE;iBACtB,KAAK,gBAAgB;mBACnB,KAAK,kBAAkB;UAChC,KAAKA,eAAe,EAAE;;;CAG9B;CAEA,cAAc;EACZ,MAAM,WAAW,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK,KAAA;EAC/D,MAAM,MAAM,KAAK,WAAW,WAAW,wBAAwB,KAAA;EAC/D,OAAO,IAAI;;;mBAGI,UAAU,QAAQ,EAAE;eACxB,UAAU,CAAC,KAAK,WAAW,KAAK,OAAO,KAAA,CAAS,EAAE;iBAChD,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;cACvC,UAAU,KAAK,OAAO,GAAG,EAAE;UAC/B,KAAKA,eAAe,EAAE;;;CAG9B;CAEA,iBAAiB;EACf,OAAO,IAAI;;iCAEkB,KAAK,KAAK;YAC/B,KAAK,cACH,IAAI,+DACJ,QAAQ;;;;oBAIF,KAAK,sBAAsB,KAAK,iBAAiB;0BAC3C,KAAK,iBAAiB;iCACf,KAAK,KAAK;;6BAEd,KAAK,OAAO;;;CAGvC;CAEA,SAAgB;EACd,OAAO,IAAI,IAAI,KAAK,YAAY,EAAE;0BACZ,KAAK,cAAc;QACrC,KAAK,OAAO,KAAKC,YAAY,IAAI,KAAKC,cAAc,EAAE;;;QAGtD,KAAK,aAAa,KAAK,eAAe,IAAI,QAAQ;;;CAGxD;;gBAEkC,CAChC,GAAG,eAAe,QAClB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuKL;;AACF;YAvRG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,oBAAA,WAAA,QAAA,KAAA,CAAA;YASzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,oBAAA,WAAA,UAAA,KAAA,CAAA;YASzB,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAW,CAAC,CAAA,GAAA,oBAAA,WAAA,WAAA,KAAA,CAAA;YAGhD,MAAM,CAAA,GAAA,oBAAA,WAAA,uBAAA,KAAA,CAAA;YAQN,MAAM,CAAA,GAAA,oBAAA,WAAA,cAAA,KAAA,CAAA"}

package/dist/components/card-media/card-media.js

@@ -1,8 +1,8 @@
 import { defineElement } from "../../internal/registration/index.js";
 import { UUICardMediaElement } from "./card-media.element.js";
+//#region src/components/card-media/card-media.ts
 defineElement("uui-card-media", UUICardMediaElement);
-export {
-  UUICardMediaElement,
-  UUICardMediaElement as default
-};
-//# sourceMappingURL=card-media.js.map
+//#endregion
+export { UUICardMediaElement };
+
+//# sourceMappingURL=card-media.js.map

package/dist/components/card-media/card-media.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-media.js","sources":["../../../src/components/card-media/card-media.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUICardMediaElement } from './card-media.element.js';\n\ndefineElement('uui-card-media', UUICardMediaElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-card-media': UUICardMediaElement;\n  }\n}\n\nexport * from './card-media.element.js';\nexport { UUICardMediaElement as default } from './card-media.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,kBAAkB,mBAAmB;"}
+{"version":3,"file":"card-media.js","names":[],"sources":["../../../src/components/card-media/card-media.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUICardMediaElement } from './card-media.element.js';\n\ndefineElement('uui-card-media', UUICardMediaElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-card-media': UUICardMediaElement;\n  }\n}\n\nexport * from './card-media.element.js';\n"],"mappings":";;;AAGA,cAAc,kBAAkB,mBAAmB"}