@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.1

package/dist/components/card-content-node/card-content-node.element.d.ts

@@ -0,0 +1,34 @@
+import { UUICardElement } from '../card/card.js';
+import '../icon/icon.js';
+/**
+ *  @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
+ */
+export declare class UUICardContentNodeElement extends UUICardElement {
+    #private;
+    /**
+     * Node name
+     * @type {string}
+     * @attr name
+     * @default ''
+     */
+    name: string;
+    /**
+     * Node details
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    detail: string;
+    private _iconSlotHasContent;
+    protected fallbackIcon: string;
+    private _onSlotIconChange;
+    private _renderFallbackIcon;
+    protected renderDetail(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,232 @@
+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 "../card/card.js";
+import { html, nothing, css } 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
+    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>`;
+  }
+  _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`
+      <span id="content" class="uui-text">
+        <span id="item">
+          <span id="icon">
+            <slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
+            ${this._iconSlotHasContent === false ? this._renderFallbackIcon() : ""}
+          </span>
+          <div title="${this.name}" id="name">
+            ${this.name}<slot name="name"></slot>
+          </div>
+        </span>
+        ${this.renderDetail()}
+      </span>
+    `;
+};
+renderButton_fn = function() {
+  const tabIndex = !this.disabled ? this.selectOnly ? -1 : 0 : void 0;
+  return html`
+      <button
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        ${__privateMethod(this, _UUICardContentNodeElement_instances, renderContent_fn).call(this)}
+      </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`
+      <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)}
+      </a>
+    `;
+};
+_UUICardContentNodeElement.styles = [
+  ...UUICardElement.styles,
+  css`
+      :host {
+        min-width: 250px;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+
+      slot[name='tag'] {
+        position: absolute;
+        bottom: var(--uui-size-4);
+        right: var(--uui-size-4);
+        display: flex;
+        justify-content: right;
+      }
+
+      slot[name='actions'] {
+        position: absolute;
+        top: var(--uui-size-4);
+        right: var(--uui-size-4);
+        display: flex;
+        justify-content: right;
+
+        opacity: 0;
+        transition: opacity 120ms;
+      }
+      :host(:focus) slot[name='actions'],
+      :host(:focus-within) slot[name='actions'],
+      :host(:hover) slot[name='actions'] {
+        opacity: 1;
+      }
+
+      slot:not([name]) {
+        display: block;
+        margin: var(--uui-size-1);
+        margin-top: var(--uui-size-3);
+      }
+
+      slot:not([name])::slotted(*) {
+        font-size: var(--uui-type-small-size);
+        line-height: calc(2 * var(--uui-size-3));
+      }
+
+      #open-part {
+        display: flex;
+        position: relative;
+        align-items: center;
+        cursor: pointer;
+        flex-grow: 1;
+        padding: var(--uui-size-space-4) var(--uui-size-space-5);
+      }
+
+      #open-part #name {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        overflow-wrap: anywhere;
+      }
+
+      #content {
+        align-self: stretch;
+        display: flex;
+        flex-direction: column;
+      }
+
+      #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;
+      }
+
+      :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);
+      }
+      :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);
+      }
+
+      #select-checkbox {
+        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
+};
+//# sourceMappingURL=card-content-node.element.js.map

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

@@ -0,0 +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-4);\n        right: var(--uui-size-4);\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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"}

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

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

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,8 @@
+import { UUICardMediaElement } from './card-media.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-card-media': UUICardMediaElement;
+    }
+}
+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

@@ -0,0 +1,39 @@
+import { UUICardElement } from '../card/card.js';
+import '../symbol-folder/symbol-folder.js';
+import '../symbol-file/symbol-file.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
+ */
+export declare class UUICardMediaElement extends UUICardElement {
+    #private;
+    /**
+     * Media name
+     * @type {string}
+     * @attr name
+     * @default ''
+     */
+    name: string;
+    /**
+     * Media detail
+     * @type {string}
+     * @attr detail
+     * @default ''
+     */
+    detail?: string;
+    /**
+     * Media file extension, without "."
+     * @type {string}
+     * @attr file-ext
+     * @default ''
+     */
+    fileExt: string;
+    protected hasPreview: boolean;
+    private queryPreviews;
+    protected renderMedia(): import("lit-html").TemplateResult<1> | "";
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,251 @@
+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 "../card/card.js";
+import { html, nothing, css } 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
+      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`
+      <button
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        ${__privateMethod(this, _UUICardMediaElement_instances, renderContent_fn).call(this)}
+      </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`
+      <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)}
+      </a>
+    `;
+};
+renderContent_fn = function() {
+  return html`
+      <div id="content" class="uui-text">
+        <span id="name" title="${this.name}">${this.name}</span>
+        <small id="detail">${this.detail}<slot name="detail"></slot></small>
+      </div>
+    `;
+};
+_UUICardMediaElement.styles = [
+  ...UUICardElement.styles,
+  css`
+      #entity-symbol {
+        align-self: center;
+        width: 60%;
+        margin-bottom: var(--uui-size-layout-1);
+        padding: var(--uui-size-space-6);
+      }
+
+      slot[name='tag'] {
+        position: absolute;
+        bottom: var(--uui-size-2);
+        right: var(--uui-size-4);
+        display: flex;
+        justify-content: right;
+        z-index: 2;
+      }
+
+      slot[name='actions'] {
+        position: absolute;
+        top: var(--uui-size-4);
+        right: var(--uui-size-4);
+        display: flex;
+        justify-content: right;
+        z-index: 2;
+        opacity: 0;
+        transition: opacity 120ms;
+      }
+      :host(:focus) slot[name='actions'],
+      :host(:focus-within) slot[name='actions'],
+      :host(:hover) slot[name='actions'] {
+        opacity: 1;
+      }
+
+      slot:not([name])::slotted(*) {
+        align-self: center;
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+      }
+
+      #open-part {
+        position: absolute;
+        z-index: 1;
+        inset: 0;
+        margin-bottom: 0;
+        color: var(--uui-color-interactive);
+        border: none;
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+      }
+
+      :host([disabled]) #open-part {
+        pointer-events: none;
+        color: var(--uui-color-contrast-disabled);
+      }
+
+      #open-part:hover {
+        color: var(--uui-color-interactive-emphasis);
+      }
+      #open-part:hover #name {
+        text-decoration: underline;
+      }
+
+      #open-part #name {
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        overflow-wrap: anywhere;
+      }
+
+      :host([image]:not([image=''])) #open-part {
+        transition: opacity 0.5s 0.5s;
+        opacity: 0;
+      }
+
+      #content {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        font-family: inherit;
+        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-2) var(--uui-border-radius-2);
+        background-color: var(--uui-color-surface);
+        pointer-events: none;
+        opacity: 0.96;
+      }
+
+      #detail {
+        opacity: 0.6;
+      }
+
+      :host(
+          [image]:not([image='']):hover,
+          [image]:not([image='']):focus,
+          [image]:not([image='']):focus-within,
+          [selected][image]:not([image='']),
+          [error][image]:not([image=''])
+        )
+        #open-part {
+        opacity: 1;
+        transition-duration: 120ms;
+        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);
+        display: flex;
+        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

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

@@ -0,0 +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[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-4);\n        right: var(--uui-size-4);\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 var(--uui-border-radius-2) var(--uui-border-radius-2);\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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"}

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

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

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,8 @@
+import { UUICardUserElement } from './card-user.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-card-user': UUICardUserElement;
+    }
+}
+export * from './card-user.element.js';
+export { UUICardUserElement as default } from './card-user.element.js';

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

@@ -0,0 +1,24 @@
+import { UUICardElement } from '../card/card.js';
+import '../avatar/avatar.js';
+/**
+ *  @element uui-card-user
+ *  @description - Card component for displaying a user node.
+ *  @slot - slot for the default content area
+ *  @slot tag - slot for the tag with support for `<uui-tag>` elements
+ *  @slot avatar - slot for the avatar with support for the `<uui-avatar>` element
+ *  @slot actions - slot for the actions with support for the `<uui-action-bar>` element
+ */
+export declare class UUICardUserElement extends UUICardElement {
+    #private;
+    /**
+     * User name
+     * @type {string}
+     * @attr name
+     * @default ''
+     */
+    name: string;
+    private _avatarSlotHasContent;
+    private readonly _avatarSlotChanged;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}