@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

package/dist/components/card/UUICardEvent.js

@@ -1,9 +1,11 @@
 import { UUIEvent } from "../../internal/events/UUIEvent.js";
-const _UUICardEvent = class _UUICardEvent extends UUIEvent {
+//#region src/components/card/UUICardEvent.ts
+var UUICardEvent = class extends UUIEvent {
+	static {
+		this.OPEN = "open";
+	}
 };
-_UUICardEvent.OPEN = "open";
-let UUICardEvent = _UUICardEvent;
-export {
-  UUICardEvent
-};
-//# sourceMappingURL=UUICardEvent.js.map
+//#endregion
+export { UUICardEvent };
+
+//# sourceMappingURL=UUICardEvent.js.map

package/dist/components/card/UUICardEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UUICardEvent.js","sources":["../../../src/components/card/UUICardEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUICardElement } from './card.element.js';\n\nexport class UUICardEvent extends UUIEvent<{}, UUICardElement> {\n  public static readonly OPEN = 'open';\n}\n"],"names":[],"mappings":";AAGO,MAAM,gBAAN,MAAM,sBAAqB,SAA6B;AAE/D;AADE,cAAuB,OAAO;AADzB,IAAM,eAAN;"}
+{"version":3,"file":"UUICardEvent.js","names":[],"sources":["../../../src/components/card/UUICardEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUICardElement } from './card.element.js';\n\nexport class UUICardEvent extends UUIEvent<{}, UUICardElement> {\n  public static readonly OPEN = 'open';\n}\n"],"mappings":";;AAGA,IAAa,eAAb,cAAkC,SAA6B;;cAC/B;;AAChC"}

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

@@ -6,4 +6,3 @@ declare global {
 }
 export * from './card.element.js';
 export * from './UUICardEvent.js';
-export { UUICardElement as default } from './card.element.js';

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

@@ -45,6 +45,13 @@ export declare class UUICardElement extends UUICardElement_base {
      * @default undefined
      */
     rel?: string;
+    /**
+     * Set to true to indicate this item has children.
+     * @type {boolean}
+     * @attr has-children
+     * @default false
+     */
+    hasChildren: boolean;
     protected handleOpenClick(e: Event): void;
     protected handleOpenKeydown(e: KeyboardEvent): void;
     protected renderCheckbox(): import("lit-html").TemplateResult<1> | undefined;

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

@@ -1,44 +1,41 @@
-import { LitElement, html, css } from "lit";
-import { property } from "lit/decorators.js";
-import { UUICardEvent } from "./UUICardEvent.js";
-import "../checkbox/checkbox.js";
-import { SelectOnlyMixin } from "../../internal/mixins/SelectOnlyMixin.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { SelectableMixin } from "../../internal/mixins/SelectableMixin.js";
+import { SelectOnlyMixin } from "../../internal/mixins/SelectOnlyMixin.js";
 import { UUITextStyles } from "../../styles/uui-text.styles.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 _UUICardElement = class _UUICardElement extends SelectOnlyMixin(
-  SelectableMixin(LitElement)
-) {
-  constructor() {
-    super(...arguments);
-    this.disabled = false;
-    this.error = false;
-  }
-  // This is deprecated - use href instead
-  handleOpenClick(e) {
-    if (this.disabled) return;
-    e.stopPropagation();
-    this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
-  }
-  // This is deprecated - use href instead
-  handleOpenKeydown(e) {
-    if (this.disabled) return;
-    if (e.key !== "Enter") return;
-    e.preventDefault();
-    e.stopPropagation();
-    this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
-  }
-  renderCheckbox() {
-    if (!this.selectable) return;
-    return html`
+import "../checkbox/checkbox.js";
+import { UUICardEvent } from "./UUICardEvent.js";
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/card/card.element.ts
+/**
+*  Card is a Component that provides the basics for a Card component. This can be extended in code to match a certain need.
+*  @element uui-card
+*  @fires {UUICardEvent} open - fires when the card title is clicked.
+*  @description - Base card component to be extended by specific card elements.
+*  @slot - Default content.
+*/
+var UUICardElement = class extends SelectOnlyMixin(SelectableMixin(LitElement)) {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.error = false;
+		this.hasChildren = false;
+	}
+	handleOpenClick(e) {
+		if (this.disabled) return;
+		e.stopPropagation();
+		this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
+	}
+	handleOpenKeydown(e) {
+		if (this.disabled) return;
+		if (e.key !== "Enter") return;
+		e.preventDefault();
+		e.stopPropagation();
+		this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
+	}
+	renderCheckbox() {
+		if (!this.selectable) return;
+		return html`
       <uui-checkbox
         id="select-checkbox"
         label="select"
@@ -48,15 +45,15 @@ const _UUICardElement = class _UUICardElement extends SelectOnlyMixin(
         @change=${() => this.click()}>
       </uui-checkbox>
     `;
-  }
-  render() {
-    return html`<slot id="open-part"></slot>
-      <div id="select-border"></div>`;
-  }
-};
-_UUICardElement.styles = [
-  UUITextStyles,
-  css`
+	}
+	render() {
+		return html`
+      <slot id="open-part"></slot>
+      <div id="select-border"></div>
+    `;
+	}
+	static {
+		this.styles = [UUITextStyles, css`
       :host {
         position: relative;
         display: flex;
@@ -218,25 +215,31 @@ _UUICardElement.styles = [
       #select-checkbox[checked] {
         opacity: 1;
       }
-    `
-];
-let UUICardElement = _UUICardElement;
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "disabled" })
-], UUICardElement.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUICardElement.prototype, "error");
-__decorateClass([
-  property({ type: String })
-], UUICardElement.prototype, "href");
-__decorateClass([
-  property({ type: String })
-], UUICardElement.prototype, "target");
-__decorateClass([
-  property({ type: String })
-], UUICardElement.prototype, "rel");
-export {
-  UUICardElement
+
+      :host([active]) {
+        background-color: var(--uui-color-current);
+      }
+    `];
+	}
 };
-//# sourceMappingURL=card.element.js.map
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "disabled"
+})], UUICardElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUICardElement.prototype, "error", void 0);
+__decorate([property({ type: String })], UUICardElement.prototype, "href", void 0);
+__decorate([property({ type: String })], UUICardElement.prototype, "target", void 0);
+__decorate([property({ type: String })], UUICardElement.prototype, "rel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "has-children"
+})], UUICardElement.prototype, "hasChildren", void 0);
+//#endregion
+export { UUICardElement };
+
+//# sourceMappingURL=card.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.element.js","sources":["../../../src/components/card/card.element.ts"],"sourcesContent":["import {\n  SelectableMixin,\n  SelectOnlyMixin,\n} from '../../internal/mixins/index.js';\nimport { UUITextStyles } from '../../styles/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { UUICardEvent } from './UUICardEvent.js';\n\nimport '../checkbox/checkbox.js';\n\n/**\n *  Card is a Component that provides the basics for a Card component. This can be extended in code to match a certain need.\n *  @element uui-card\n *  @fires {UUICardEvent} open - fires when the card title is clicked.\n *  @description - Base card component to be extended by specific card elements.\n *  @slot - Default content.\n */\nexport class UUICardElement extends SelectOnlyMixin(\n  SelectableMixin(LitElement),\n) {\n  /**\n   * Set to true to prevent opening of this item.\n   * This does not prevent selection, selection is controlled by property 'selectable'\n   * @type {boolean}\n   * @attr disabled\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'disabled' })\n  disabled = false;\n\n  /**\n   * Set to true to highlight there is an error with this item.\n   * @type {boolean}\n   * @attr error\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  /**\n   * Set an href, this will turns the name of the card into an anchor tag.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public href?: string;\n\n  /**\n   * Set an anchor tag target, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * Set the rel attribute for an anchor tag, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public rel?: string;\n\n  // This is deprecated - use href instead\n  protected handleOpenClick(e: Event) {\n    if (this.disabled) return;\n\n    e.stopPropagation();\n    this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));\n  }\n  // This is deprecated - use href instead\n  protected handleOpenKeydown(e: KeyboardEvent) {\n    if (this.disabled) return;\n    if (e.key !== 'Enter') return;\n\n    e.preventDefault();\n    e.stopPropagation();\n    this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));\n  }\n\n  protected renderCheckbox() {\n    if (!this.selectable) return;\n    return html`\n      <uui-checkbox\n        id=\"select-checkbox\"\n        label=\"select\"\n        tabindex=\"-1\"\n        ?checked=${this.selected}\n        @click=${(e: MouseEvent) => e.stopPropagation()}\n        @change=${() => this.click()}>\n      </uui-checkbox>\n    `;\n  }\n\n  protected render() {\n    return html`<slot id=\"open-part\"></slot>\n      <div id=\"select-border\"></div>`;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      :host {\n        position: relative;\n        display: flex;\n        width: 100%;\n        justify-content: center;\n        box-sizing: border-box;\n        border: 1px solid var(--uui-color-border);\n        border-radius: var(--uui-border-radius-2);\n        min-height: var(--uui-layout-medium);\n        background-color: var(--uui-color-surface);\n        --uui-card-border-width: 3px;\n        transition: box-shadow 100ms ease-out;\n      }\n\n      :host([selectable]:focus-visible) {\n        outline-color: var(--uui-color-focus);\n        outline-width: var(--uui-card-border-width);\n        outline-style: solid;\n        outline-offset: var(--uui-card-border-width);\n      }\n\n      :host() * {\n        /* TODO: implement globally shared outline style */\n        outline-color: var(--uui-color-focus);\n      }\n\n      :host([error])::before {\n        content: '';\n        position: absolute;\n        pointer-events: none;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 1;\n        box-sizing: border-box;\n        border: var(--uui-card-border-width) solid var(--uui-color-invalid);\n        border-radius: var(--uui-border-radius-2);\n      }\n\n      button {\n        font-size: inherit;\n        font-family: inherit;\n        border: 0;\n        padding: 0;\n        margin: 0 0 1px 0;\n        background-color: transparent;\n        text-align: left;\n        color: var(--uui-color-text);\n      }\n\n      a {\n        text-decoration: none;\n        color: inherit;\n        line-height: initial;\n      }\n\n      button:focus,\n      a:focus {\n        outline-color: var(--uui-color-focus);\n        outline-width: var(--uui-card-border-width);\n        outline-style: solid;\n        outline-offset: var(--uui-card-border-width);\n        border-radius: var(--uui-border-radius-2);\n      }\n\n      :host([selectable]) {\n        cursor: pointer;\n      }\n      :host([selectable]) #select-border {\n        position: absolute;\n        z-index: 2;\n        top: -2px;\n        left: -2px;\n        right: -2px;\n        bottom: -2px;\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity 120ms;\n      }\n      :host([selectable]) #select-border::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border: 2px solid var(--uui-color-selected);\n        border-radius: calc(var(--uui-border-radius-2) + 2px);\n        box-shadow:\n          0 0 4px 0 var(--uui-color-selected),\n          inset 0 0 2px 0 var(--uui-color-selected);\n      }\n      :host([selected]) #select-border {\n        opacity: 1;\n      }\n      :host([selectable]:not([selected]):hover) #select-border {\n        opacity: 0.33;\n      }\n      :host([selectable][selected]:hover) #select-border {\n        opacity: 0.8;\n      }\n\n      :host([selectable]:not([selected])) #open-part:hover + #select-border {\n        opacity: 0;\n      }\n      :host([selectable][selected]) #open-part:hover + #select-border {\n        opacity: 1;\n      }\n\n      :host([selectable]:not([selected]):hover) #select-border::after {\n        animation: not-selected--hover 1.2s infinite;\n      }\n      @keyframes not-selected--hover {\n        0%,\n        100% {\n          opacity: 0.66;\n        }\n        50% {\n          opacity: 1;\n        }\n      }\n\n      :host([selectable][selected]:hover) #select-border::after {\n        animation: selected--hover 1.4s infinite;\n      }\n      @keyframes selected--hover {\n        0%,\n        100% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.66;\n        }\n      }\n      :host([selectable]) #open-part:hover + #select-border::after {\n        animation: none;\n      }\n\n      :host([select-only]) *,\n      :host([select-only]) ::slotted(*) {\n        pointer-events: none;\n      }\n\n      :host([disabled]) {\n        background: var(--uui-color-disabled);\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      #select-checkbox {\n        position: absolute;\n        top: var(--uui-size-4);\n        left: var(--uui-size-4);\n        opacity: 0;\n        transition: opacity 120ms;\n        z-index: 3;\n      }\n      :host(:focus) #select-checkbox,\n      :host(:focus-within) #select-checkbox,\n      :host(:hover) #select-checkbox,\n      #select-checkbox[checked] {\n        opacity: 1;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAmBO,MAAM,kBAAN,MAAM,wBAAuB;AAAA,EAClC,gBAAgB,UAAU;AAC5B,EAAE;AAAA,EAFK,cAAA;AAAA,UAAA,GAAA,SAAA;AAWL,SAAA,WAAW;AASX,SAAA,QAAQ;AAAA,EAAA;AAAA;AAAA,EA8BE,gBAAgB,GAAU;AAClC,QAAI,KAAK,SAAU;AAEnB,MAAE,gBAAA;AACF,SAAK,cAAc,IAAI,aAAa,aAAa,IAAI,CAAC;AAAA,EACxD;AAAA;AAAA,EAEU,kBAAkB,GAAkB;AAC5C,QAAI,KAAK,SAAU;AACnB,QAAI,EAAE,QAAQ,QAAS;AAEvB,MAAE,eAAA;AACF,MAAE,gBAAA;AACF,SAAK,cAAc,IAAI,aAAa,aAAa,IAAI,CAAC;AAAA,EACxD;AAAA,EAEU,iBAAiB;AACzB,QAAI,CAAC,KAAK,WAAY;AACtB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKQ,KAAK,QAAQ;AAAA,iBACf,CAAC,MAAkB,EAAE,gBAAA,CAAiB;AAAA,kBACrC,MAAM,KAAK,OAAO;AAAA;AAAA;AAAA,EAGlC;AAAA,EAEU,SAAS;AACjB,WAAO;AAAA;AAAA,EAET;AAwKF;AAtKE,gBAAyB,SAAS;AAAA,EAChC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAvFG,IAAM,iBAAN;AAWL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,YAAY;AAAA,GAVtD,eAWX,WAAA,UAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAnB/B,eAoBX,WAAA,OAAA;AASO,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5Bf,eA6BJ,WAAA,MAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArCf,eAsCJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9Cf,eA+CJ,WAAA,KAAA;"}
+{"version":3,"file":"card.element.js","names":[],"sources":["../../../src/components/card/card.element.ts"],"sourcesContent":["import {\n  SelectableMixin,\n  SelectOnlyMixin,\n} from '../../internal/mixins/index.js';\nimport { UUITextStyles } from '../../styles/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { UUICardEvent } from './UUICardEvent.js';\n\nimport '../checkbox/checkbox.js';\n\n/**\n *  Card is a Component that provides the basics for a Card component. This can be extended in code to match a certain need.\n *  @element uui-card\n *  @fires {UUICardEvent} open - fires when the card title is clicked.\n *  @description - Base card component to be extended by specific card elements.\n *  @slot - Default content.\n */\nexport class UUICardElement extends SelectOnlyMixin(\n  SelectableMixin(LitElement),\n) {\n  /**\n   * Set to true to prevent opening of this item.\n   * This does not prevent selection, selection is controlled by property 'selectable'\n   * @type {boolean}\n   * @attr disabled\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'disabled' })\n  disabled = false;\n\n  /**\n   * Set to true to highlight there is an error with this item.\n   * @type {boolean}\n   * @attr error\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  /**\n   * Set an href, this will turns the name of the card into an anchor tag.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public href?: string;\n\n  /**\n   * Set an anchor tag target, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * Set the rel attribute for an anchor tag, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public rel?: string;\n\n  /**\n   * Set to true to indicate this item has children.\n   * @type {boolean}\n   * @attr has-children\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'has-children' })\n  hasChildren = false;\n\n  // This is deprecated - use href instead\n  protected handleOpenClick(e: Event) {\n    if (this.disabled) return;\n\n    e.stopPropagation();\n    this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));\n  }\n  // This is deprecated - use href instead\n  protected handleOpenKeydown(e: KeyboardEvent) {\n    if (this.disabled) return;\n    if (e.key !== 'Enter') return;\n\n    e.preventDefault();\n    e.stopPropagation();\n    this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));\n  }\n\n  protected renderCheckbox() {\n    if (!this.selectable) return;\n    return html`\n      <uui-checkbox\n        id=\"select-checkbox\"\n        label=\"select\"\n        tabindex=\"-1\"\n        ?checked=${this.selected}\n        @click=${(e: MouseEvent) => e.stopPropagation()}\n        @change=${() => this.click()}>\n      </uui-checkbox>\n    `;\n  }\n\n  protected render() {\n    return html`\n      <slot id=\"open-part\"></slot>\n      <div id=\"select-border\"></div>\n    `;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      :host {\n        position: relative;\n        display: flex;\n        width: 100%;\n        justify-content: center;\n        box-sizing: border-box;\n        border: 1px solid var(--uui-color-border);\n        border-radius: var(--uui-border-radius-2);\n        min-height: var(--uui-layout-medium);\n        background-color: var(--uui-color-surface);\n        --uui-card-border-width: 3px;\n        transition: box-shadow 100ms ease-out;\n      }\n\n      :host([selectable]:focus-visible) {\n        outline-color: var(--uui-color-focus);\n        outline-width: var(--uui-card-border-width);\n        outline-style: solid;\n        outline-offset: var(--uui-card-border-width);\n      }\n\n      :host() * {\n        /* TODO: implement globally shared outline style */\n        outline-color: var(--uui-color-focus);\n      }\n\n      :host([error])::before {\n        content: '';\n        position: absolute;\n        pointer-events: none;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 1;\n        box-sizing: border-box;\n        border: var(--uui-card-border-width) solid var(--uui-color-invalid);\n        border-radius: var(--uui-border-radius-2);\n      }\n\n      button {\n        font-size: inherit;\n        font-family: inherit;\n        border: 0;\n        padding: 0;\n        margin: 0 0 1px 0;\n        background-color: transparent;\n        text-align: left;\n        color: var(--uui-color-text);\n      }\n\n      a {\n        text-decoration: none;\n        color: inherit;\n        line-height: initial;\n      }\n\n      button:focus,\n      a:focus {\n        outline-color: var(--uui-color-focus);\n        outline-width: var(--uui-card-border-width);\n        outline-style: solid;\n        outline-offset: var(--uui-card-border-width);\n        border-radius: var(--uui-border-radius-2);\n      }\n\n      :host([selectable]) {\n        cursor: pointer;\n      }\n      :host([selectable]) #select-border {\n        position: absolute;\n        z-index: 2;\n        top: -2px;\n        left: -2px;\n        right: -2px;\n        bottom: -2px;\n        pointer-events: none;\n        opacity: 0;\n        transition: opacity 120ms;\n      }\n      :host([selectable]) #select-border::after {\n        content: '';\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border: 2px solid var(--uui-color-selected);\n        border-radius: calc(var(--uui-border-radius-2) + 2px);\n        box-shadow:\n          0 0 4px 0 var(--uui-color-selected),\n          inset 0 0 2px 0 var(--uui-color-selected);\n      }\n      :host([selected]) #select-border {\n        opacity: 1;\n      }\n      :host([selectable]:not([selected]):hover) #select-border {\n        opacity: 0.33;\n      }\n      :host([selectable][selected]:hover) #select-border {\n        opacity: 0.8;\n      }\n\n      :host([selectable]:not([selected])) #open-part:hover + #select-border {\n        opacity: 0;\n      }\n      :host([selectable][selected]) #open-part:hover + #select-border {\n        opacity: 1;\n      }\n\n      :host([selectable]:not([selected]):hover) #select-border::after {\n        animation: not-selected--hover 1.2s infinite;\n      }\n      @keyframes not-selected--hover {\n        0%,\n        100% {\n          opacity: 0.66;\n        }\n        50% {\n          opacity: 1;\n        }\n      }\n\n      :host([selectable][selected]:hover) #select-border::after {\n        animation: selected--hover 1.4s infinite;\n      }\n      @keyframes selected--hover {\n        0%,\n        100% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0.66;\n        }\n      }\n      :host([selectable]) #open-part:hover + #select-border::after {\n        animation: none;\n      }\n\n      :host([select-only]) *,\n      :host([select-only]) ::slotted(*) {\n        pointer-events: none;\n      }\n\n      :host([disabled]) {\n        background: var(--uui-color-disabled);\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      #select-checkbox {\n        position: absolute;\n        top: var(--uui-size-4);\n        left: var(--uui-size-4);\n        opacity: 0;\n        transition: opacity 120ms;\n        z-index: 3;\n      }\n      :host(:focus) #select-checkbox,\n      :host(:focus-within) #select-checkbox,\n      :host(:hover) #select-checkbox,\n      #select-checkbox[checked] {\n        opacity: 1;\n      }\n\n      :host([active]) {\n        background-color: var(--uui-color-current);\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,IAAa,iBAAb,cAAoC,gBAClC,gBAAgB,UAAU,CAC5B,CAAC,CAAC;;;kBASW;eASH;qBAoCM;;CAGd,gBAA0B,GAAU;EAClC,IAAI,KAAK,UAAU;EAEnB,EAAE,gBAAgB;EAClB,KAAK,cAAc,IAAI,aAAa,aAAa,IAAI,CAAC;CACxD;CAEA,kBAA4B,GAAkB;EAC5C,IAAI,KAAK,UAAU;EACnB,IAAI,EAAE,QAAQ,SAAS;EAEvB,EAAE,eAAe;EACjB,EAAE,gBAAgB;EAClB,KAAK,cAAc,IAAI,aAAa,aAAa,IAAI,CAAC;CACxD;CAEA,iBAA2B;EACzB,IAAI,CAAC,KAAK,YAAY;EACtB,OAAO,IAAI;;;;;mBAKI,KAAK,SAAS;kBACf,MAAkB,EAAE,gBAAgB,EAAE;wBAChC,KAAK,MAAM,EAAE;;;CAGnC;CAEA,SAAmB;EACjB,OAAO,IAAI;;;;CAIb;;gBAEkC,CAChC,eACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuKL;;AACF;YAhQG,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAW,CAAC,CAAA,GAAA,eAAA,WAAA,YAAA,KAAA,CAAA;YAShE,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,SAAA,KAAA,CAAA;YASzC,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,QAAA,KAAA,CAAA;YASzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,UAAA,KAAA,CAAA;YASzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,OAAA,KAAA,CAAA;YASzB,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAe,CAAC,CAAA,GAAA,eAAA,WAAA,eAAA,KAAA,CAAA"}

package/dist/components/card/card.js

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

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

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

package/dist/components/card-block-type/card-block-type.d.ts

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

package/dist/components/card-block-type/card-block-type.element.js

@@ -1,67 +1,52 @@
-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 _UUICardBlockTypeElement_instances, renderButton_fn, renderLink_fn, renderMedia_fn, renderContent_fn;
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { UUICardElement } from "../card/card.element.js";
 import "../card/card.js";
-import { nothing, html, css } from "lit";
+import { css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { UUICardElement } from "../card/card.element.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const _UUICardBlockTypeElement = class _UUICardBlockTypeElement extends UUICardElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _UUICardBlockTypeElement_instances);
-    this.name = "";
-  }
-  get background() {
-    return void 0;
-  }
-  set background(value) {
-    this.style.backgroundColor = value ?? "";
-  }
-  render() {
-    return html`
-      ${__privateMethod(this, _UUICardBlockTypeElement_instances, renderMedia_fn).call(this)}
-      ${this.href ? __privateMethod(this, _UUICardBlockTypeElement_instances, renderLink_fn).call(this) : __privateMethod(this, _UUICardBlockTypeElement_instances, renderButton_fn).call(this)}
+//#region src/components/card-block-type/card-block-type.element.ts
+/**
+* @element uui-card-block-type
+* @slot - slot for the default content area
+* @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 UUICardBlockTypeElement = class extends UUICardElement {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "";
+	}
+	get background() {}
+	set background(value) {
+		this.style.backgroundColor = value ?? "";
+	}
+	render() {
+		return html`
+      ${this.#renderMedia()}
+      ${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>
     `;
-  }
-};
-_UUICardBlockTypeElement_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"
         class="uui-text"
-        tabindex=${ifDefined(tabIndex)}
+        tabindex=${ifDefined(!this.disabled ? this.selectOnly ? -1 : 0 : void 0)}
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}>
-        ${__privateMethod(this, _UUICardBlockTypeElement_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"
         class="uui-text"
@@ -69,26 +54,25 @@ renderLink_fn = function() {
         href=${ifDefined(!this.disabled ? this.href : void 0)}
         target=${ifDefined(this.target || void 0)}
         rel=${ifDefined(this.rel || rel)}>
-        ${__privateMethod(this, _UUICardBlockTypeElement_instances, renderContent_fn).call(this)}
+        ${this.#renderContent()}
       </a>
     `;
-};
-renderMedia_fn = function() {
-  return html`<div id="portrait">
+	}
+	#renderMedia() {
+		return html`<div id="portrait">
       <slot></slot>
     </div> `;
-};
-renderContent_fn = function() {
-  return html`
+	}
+	#renderContent() {
+		return html`
       <div id="content">
         <span title="${this.name}" id="name">${this.name}</span>
         <small title="${ifDefined(this.description)}">${this.description}<slot name="description"></slot></small>
       </div></div>
     `;
-};
-_UUICardBlockTypeElement.styles = [
-  ...UUICardElement.styles,
-  css`
+	}
+	static {
+		this.styles = [...UUICardElement.styles, css`
       :host {
         background-color: var(--uui-color-surface-alt);
       }
@@ -240,19 +224,16 @@ _UUICardBlockTypeElement.styles = [
           calc(var(--uui-size-space-4) * -1);
         top: 0;
       }
-    `
-];
-let UUICardBlockTypeElement = _UUICardBlockTypeElement;
-__decorateClass([
-  property({ type: String })
-], UUICardBlockTypeElement.prototype, "name", 2);
-__decorateClass([
-  property({ type: String })
-], UUICardBlockTypeElement.prototype, "description", 2);
-__decorateClass([
-  property({ type: String, attribute: "background" })
-], UUICardBlockTypeElement.prototype, "background", 1);
-export {
-  UUICardBlockTypeElement
+    `];
+	}
 };
-//# sourceMappingURL=card-block-type.element.js.map
+__decorate([property({ type: String })], UUICardBlockTypeElement.prototype, "name", void 0);
+__decorate([property({ type: String })], UUICardBlockTypeElement.prototype, "description", void 0);
+__decorate([property({
+	type: String,
+	attribute: "background"
+})], UUICardBlockTypeElement.prototype, "background", null);
+//#endregion
+export { UUICardBlockTypeElement };
+
+//# sourceMappingURL=card-block-type.element.js.map

package/dist/components/card-block-type/card-block-type.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-block-type.element.js","sources":["../../../src/components/card-block-type/card-block-type.element.ts"],"sourcesContent":["import { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport type BlockTypeIcon = {\n  name?: string;\n  color?: string;\n};\n\n/**\n * @element uui-card-block-type\n * @slot - slot for the default content area\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 UUICardBlockTypeElement extends UUICardElement {\n  /**\n   * Block type name\n   * @type {string}\n   * @attr name\n   * @default ''\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Block type description\n   * @type {string}\n   * @attr description\n   * @default undefined\n   */\n  @property({ type: String })\n  description?: string;\n\n  @property({ type: String, attribute: 'background' })\n  public get background(): string | undefined {\n    return undefined;\n  }\n  public set background(value: string | undefined) {\n    this.style.backgroundColor = value ?? '';\n  }\n\n  render() {\n    return html`\n      ${this.#renderMedia()}\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  #renderButton() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    return html`\n      <button\n        id=\"open-part\"\n        class=\"uui-text\"\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        class=\"uui-text\"\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  #renderMedia() {\n    return html`<div id=\"portrait\">\n      <slot></slot>\n    </div> `;\n  }\n\n  #renderContent() {\n    return html`\n      <div id=\"content\">\n        <span title=\"${this.name}\" id=\"name\">${this.name}</span>\n        <small title=\"${ifDefined(this.description)}\">${this.description}<slot name=\"description\"></slot></small>\n      </div></div>\n    `;\n  }\n\n  static override readonly styles = [\n    ...UUICardElement.styles,\n    css`\n      :host {\n        background-color: var(--uui-color-surface-alt);\n      }\n\n      slot:not([name]) {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\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-4);\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      #portrait {\n        display: flex;\n        justify-content: center;\n        min-height: 150px;\n        max-height: 150px;\n        width: 100%;\n        margin-bottom: var(--uui-size-layout-2);\n      }\n\n      slot:not([name])::slotted(*) {\n        align-self: center;\n        object-fit: cover;\n        max-width: 100%;\n        max-height: 100%;\n        font-size: var(--uui-size-8);\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        background: var(--uui-color-disabled);\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      #open-part #name,\n      #open-part small {\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        width: 100%;\n        font-family: inherit;\n        font-size: var(--uui-type-small-size);\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      :host(:focus) slot[name='actions'],\n      :host(:focus-within) slot[name='actions'],\n      :host(:hover) slot[name='actions'] {\n        opacity: 1;\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}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"card-block-type.element.js","names":["#renderMedia","#renderLink","#renderButton","#renderContent"],"sources":["../../../src/components/card-block-type/card-block-type.element.ts"],"sourcesContent":["import { UUICardElement } from '../card/card.js';\nimport { css, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport type BlockTypeIcon = {\n  name?: string;\n  color?: string;\n};\n\n/**\n * @element uui-card-block-type\n * @slot - slot for the default content area\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 UUICardBlockTypeElement extends UUICardElement {\n  /**\n   * Block type name\n   * @type {string}\n   * @attr name\n   * @default ''\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Block type description\n   * @type {string}\n   * @attr description\n   * @default undefined\n   */\n  @property({ type: String })\n  description?: string;\n\n  @property({ type: String, attribute: 'background' })\n  public get background(): string | undefined {\n    return undefined;\n  }\n  public set background(value: string | undefined) {\n    this.style.backgroundColor = value ?? '';\n  }\n\n  render() {\n    return html`\n      ${this.#renderMedia()}\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  #renderButton() {\n    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;\n    return html`\n      <button\n        id=\"open-part\"\n        class=\"uui-text\"\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        class=\"uui-text\"\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  #renderMedia() {\n    return html`<div id=\"portrait\">\n      <slot></slot>\n    </div> `;\n  }\n\n  #renderContent() {\n    return html`\n      <div id=\"content\">\n        <span title=\"${this.name}\" id=\"name\">${this.name}</span>\n        <small title=\"${ifDefined(this.description)}\">${this.description}<slot name=\"description\"></slot></small>\n      </div></div>\n    `;\n  }\n\n  static override readonly styles = [\n    ...UUICardElement.styles,\n    css`\n      :host {\n        background-color: var(--uui-color-surface-alt);\n      }\n\n      slot:not([name]) {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\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-4);\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      #portrait {\n        display: flex;\n        justify-content: center;\n        min-height: 150px;\n        max-height: 150px;\n        width: 100%;\n        margin-bottom: var(--uui-size-layout-2);\n      }\n\n      slot:not([name])::slotted(*) {\n        align-self: center;\n        object-fit: cover;\n        max-width: 100%;\n        max-height: 100%;\n        font-size: var(--uui-size-8);\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        background: var(--uui-color-disabled);\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      #open-part #name,\n      #open-part small {\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        width: 100%;\n        font-family: inherit;\n        font-size: var(--uui-type-small-size);\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      :host(:focus) slot[name='actions'],\n      :host(:focus-within) slot[name='actions'],\n      :host(:hover) slot[name='actions'] {\n        opacity: 1;\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}\n"],"mappings":";;;;;;;;;;;;;AAgBA,IAAa,0BAAb,cAA6C,eAAe;;;cAQnD;;CAWP,IACW,aAAiC,CAE5C;CACA,IAAW,WAAW,OAA2B;EAC/C,KAAK,MAAM,kBAAkB,SAAS;CACxC;CAEA,SAAS;EACP,OAAO,IAAI;QACP,KAAKA,aAAa,EAAE;QACpB,KAAK,OAAO,KAAKC,YAAY,IAAI,KAAKC,cAAc,EAAE;;;QAGtD,KAAK,aAAa,KAAK,eAAe,IAAI,QAAQ;;;;CAIxD;CAEA,gBAAgB;EAEd,OAAO,IAAI;;;;mBAII,UALE,CAAC,KAAK,WAAY,KAAK,aAAa,KAAK,IAAK,KAAA,CAK9B,EAAE;iBACtB,KAAK,gBAAgB;mBACnB,KAAK,kBAAkB;UAChC,KAAKC,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;;;;mBAII,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,eAAe;EACb,OAAO,IAAI;;;CAGb;CAEA,iBAAiB;EACf,OAAO,IAAI;;uBAEQ,KAAK,KAAK,cAAc,KAAK,KAAK;wBACjC,UAAU,KAAK,WAAW,EAAE,IAAI,KAAK,YAAY;;;CAGvE;;gBAEkC,CAChC,GAAG,eAAe,QAClB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyJL;;AACF;YAzOG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,wBAAA,WAAA,QAAA,KAAA,CAAA;YASzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,wBAAA,WAAA,eAAA,KAAA,CAAA;YAGzB,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,wBAAA,WAAA,cAAA,IAAA"}

package/dist/components/card-block-type/card-block-type.js

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

package/dist/components/card-block-type/card-block-type.js.map

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

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

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

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

@@ -1,5 +1,6 @@
 import { UUICardElement } from '../card/card.js';
 import '../icon/icon.js';
+import '../symbol-expand/symbol-expand.js';
 /**
  *  @element uui-card-content-node
  *  @description - Card component for displaying a content-node.