@umbraco-ui/uui 2.0.0-alpha.1 → 2.0.0-rc.0

package/dist/components/responsive-container/responsive-container.element.js

@@ -6,7 +6,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _childElements, _hiddenElements, _hiddenElementsMap, _visibilityBreakpoints, _resizeObserver, _childResizeObservers, _breakPointCalculationInProgress, _isConnected, _UUIResponsiveContainerElement_instances, initialize_fn, onResize_fn, onSlotChange_fn, cleanup_fn, calculateBreakPoints_fn, updateCollapsibleItems_fn, hideElement_fn, collapseFromEnd_fn, collapseFromStart_fn, _onItemClicked;
+var _childElements, _hiddenElements, _clonedElements, _hiddenElementsMap, _visibilityBreakpoints, _resizeObserver, _childResizeObservers, _breakPointCalculationInProgress, _isConnected, _UUIResponsiveContainerElement_instances, initialize_fn, onResize_fn, onSlotChange_fn, cleanup_fn, calculateBreakPoints_fn, updateCollapsibleItems_fn, hideElement_fn, collapseFromEnd_fn, collapseFromStart_fn, _onItemClicked, onPopoverToggle_fn, buildDropdownItems_fn;
 import { LitElement, html, css } from "lit";
 import { query, property, queryAssignedElements } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
@@ -28,6 +28,7 @@ const _UUIResponsiveContainerElement = class _UUIResponsiveContainerElement exte
     __privateAdd(this, _UUIResponsiveContainerElement_instances);
     __privateAdd(this, _childElements);
     __privateAdd(this, _hiddenElements);
+    __privateAdd(this, _clonedElements);
     __privateAdd(this, _hiddenElementsMap);
     __privateAdd(this, _visibilityBreakpoints);
     __privateAdd(this, _resizeObserver);
@@ -38,6 +39,7 @@ const _UUIResponsiveContainerElement = class _UUIResponsiveContainerElement exte
     this.collapse = "end";
     __privateSet(this, _childElements, []);
     __privateSet(this, _hiddenElements, []);
+    __privateSet(this, _clonedElements, []);
     __privateSet(this, _hiddenElementsMap, /* @__PURE__ */ new Map());
     __privateSet(this, _visibilityBreakpoints, []);
     __privateSet(this, _resizeObserver, new ResizeObserver(__privateMethod(this, _UUIResponsiveContainerElement_instances, onResize_fn).bind(this)));
@@ -88,9 +90,10 @@ const _UUIResponsiveContainerElement = class _UUIResponsiveContainerElement exte
       <uui-popover-container
         id="popover-container"
         popover
+        @beforetoggle=${__privateMethod(this, _UUIResponsiveContainerElement_instances, onPopoverToggle_fn)}
         placement=${this.collapse === "start" ? "bottom-start" : "bottom-end"}>
         <div id="dropdown-container">
-          ${repeat(__privateGet(this, _hiddenElements), (el) => html`${el}`)}
+          ${repeat(__privateGet(this, _clonedElements), (el) => html`${el}`)}
         </div>
       </uui-popover-container>
     `;
@@ -98,6 +101,7 @@ const _UUIResponsiveContainerElement = class _UUIResponsiveContainerElement exte
 };
 _childElements = new WeakMap();
 _hiddenElements = new WeakMap();
+_clonedElements = new WeakMap();
 _hiddenElementsMap = new WeakMap();
 _visibilityBreakpoints = new WeakMap();
 _resizeObserver = new WeakMap();
@@ -108,7 +112,7 @@ _UUIResponsiveContainerElement_instances = new WeakSet();
 initialize_fn = async function() {
   await this.updateComplete;
   if (!__privateGet(this, _isConnected)) return;
-  __privateGet(this, _resizeObserver).observe(this._mainElement);
+  __privateGet(this, _resizeObserver).observe(this);
   requestAnimationFrame(() => {
     if (!__privateGet(this, _isConnected)) return;
     __privateMethod(this, _UUIResponsiveContainerElement_instances, onSlotChange_fn).call(this);
@@ -138,9 +142,10 @@ cleanup_fn = function() {
   __privateGet(this, _childResizeObservers).forEach((observer) => observer.disconnect());
   __privateSet(this, _childResizeObservers, []);
   __privateSet(this, _visibilityBreakpoints, []);
-  __privateGet(this, _hiddenElements).forEach((el) => {
+  __privateGet(this, _clonedElements).forEach((el) => {
     el.removeEventListener("click", __privateGet(this, _onItemClicked));
   });
+  __privateSet(this, _clonedElements, []);
   __privateSet(this, _hiddenElements, []);
   __privateGet(this, _hiddenElementsMap).clear();
 };
@@ -162,17 +167,19 @@ calculateBreakPoints_fn = async function() {
   }
   const tolerance = 2;
   this._mainElement.style.width = totalWidth - gap + tolerance + "px";
-  __privateMethod(this, _UUIResponsiveContainerElement_instances, updateCollapsibleItems_fn).call(this, this._mainElement.offsetWidth);
+  __privateMethod(this, _UUIResponsiveContainerElement_instances, updateCollapsibleItems_fn).call(this, this.offsetWidth);
   __privateSet(this, _breakPointCalculationInProgress, false);
 };
 // The main logic that shows/hides items
 updateCollapsibleItems_fn = function(containerWidth) {
   const moreButtonWidth = this._moreButtonElement?.offsetWidth || 40;
   const availableWidth = containerWidth - moreButtonWidth;
-  __privateGet(this, _hiddenElements).forEach((el) => {
-    el.removeEventListener("click", __privateGet(this, _onItemClicked));
-  });
   __privateSet(this, _hiddenElements, []);
+  __privateGet(this, _clonedElements).forEach(
+    (el) => el.removeEventListener("click", __privateGet(this, _onItemClicked))
+  );
+  __privateSet(this, _clonedElements, []);
+  this._popoverContainerElement?.hidePopover();
   __privateGet(this, _hiddenElementsMap).clear();
   if (this.collapse === "end") {
     __privateMethod(this, _UUIResponsiveContainerElement_instances, collapseFromEnd_fn).call(this, containerWidth, availableWidth);
@@ -189,12 +196,7 @@ updateCollapsibleItems_fn = function(containerWidth) {
 };
 hideElement_fn = function(element) {
   element.style.display = "none";
-  const clone = element.cloneNode(true);
-  clone.style.display = "";
-  clone.addEventListener("click", __privateGet(this, _onItemClicked));
-  __privateGet(this, _hiddenElementsMap).set(clone, element);
-  __privateGet(this, _hiddenElementsMap).set(element, clone);
-  __privateGet(this, _hiddenElements).push(clone);
+  __privateGet(this, _hiddenElements).push(element);
 };
 collapseFromEnd_fn = function(containerWidth, availableWidth) {
   const len = __privateGet(this, _visibilityBreakpoints).length;
@@ -225,6 +227,26 @@ collapseFromStart_fn = function(containerWidth, availableWidth) {
   }
 };
 _onItemClicked = new WeakMap();
+onPopoverToggle_fn = function(e) {
+  if (e.newState === "open") {
+    __privateMethod(this, _UUIResponsiveContainerElement_instances, buildDropdownItems_fn).call(this);
+  }
+};
+buildDropdownItems_fn = function() {
+  __privateGet(this, _clonedElements).forEach(
+    (el) => el.removeEventListener("click", __privateGet(this, _onItemClicked))
+  );
+  __privateSet(this, _clonedElements, []);
+  __privateGet(this, _hiddenElementsMap).clear();
+  for (const original of __privateGet(this, _hiddenElements)) {
+    const clone = original.cloneNode(true);
+    clone.style.display = "";
+    clone.addEventListener("click", __privateGet(this, _onItemClicked));
+    __privateGet(this, _hiddenElementsMap).set(clone, original);
+    __privateGet(this, _clonedElements).push(clone);
+  }
+  this.requestUpdate();
+};
 _UUIResponsiveContainerElement.styles = [
   css`
       :host {

package/dist/components/responsive-container/responsive-container.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-container.element.js","sources":["../../../src/components/responsive-container/responsive-container.element.ts"],"sourcesContent":["import type { UUIButtonElement } from '../button/button.js';\nimport type { UUIPopoverContainerElement } from '../popover-container/popover-container.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport '../button/button.js';\nimport '../popover-container/popover-container.js';\nimport '../symbol-more/symbol-more.js';\n\n/**\n * A responsive container that collapses overflowing children into a dropdown.\n *\n * @element uui-responsive-container\n * @slot - Default slot for child elements (buttons, etc.)\n * @cssprop --uui-responsive-container-gap - Gap between items (default: 8px)\n */\nexport class UUIResponsiveContainerElement extends LitElement {\n  // These help us find elements inside the component\n  @query('#more-button')\n  private readonly _moreButtonElement!: UUIButtonElement;\n\n  @query('#popover-container')\n  private readonly _popoverContainerElement!: UUIPopoverContainerElement;\n\n  @query('#main')\n  private readonly _mainElement!: HTMLElement;\n\n  /**\n   * Controls which side items collapse from.\n   * - \"end\": Items collapse from the right, more button appears on right (default)\n   * - \"start\": Items collapse from the left, more button appears on left\n   * @attr collapse\n   * @default \"end\"\n   */\n  @property({ type: String, reflect: true })\n  collapse: 'start' | 'end' = 'end';\n\n  // This gets all elements put inside the slot\n  @queryAssignedElements({ flatten: true })\n  private readonly _slottedNodes?: HTMLElement[];\n\n  // These store the component's internal state\n  #childElements: HTMLElement[] = []; // All child elements\n  #hiddenElements: HTMLElement[] = []; // Elements in the dropdown\n  readonly #hiddenElementsMap: Map<HTMLElement, HTMLElement> = new Map();\n  #visibilityBreakpoints: number[] = []; // Width thresholds for each item\n\n  // ResizeObserver watches for size changes\n  readonly #resizeObserver = new ResizeObserver(this.#onResize.bind(this));\n  #childResizeObservers: ResizeObserver[] = [];\n  #breakPointCalculationInProgress = false;\n\n  #isConnected = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.#isConnected = true;\n    this.#initialize();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#isConnected = false;\n    this.#resizeObserver.disconnect();\n    this.#cleanup();\n  }\n\n  async #initialize() {\n    await this.updateComplete;\n    if (!this.#isConnected) return;\n    this.#resizeObserver.observe(this._mainElement);\n\n    requestAnimationFrame(() => {\n      if (!this.#isConnected) return;\n      this.#onSlotChange();\n    });\n  }\n\n  // This runs when the container size changes\n  #onResize(entries: ResizeObserverEntry[]) {\n    if (!this.#isConnected) return;\n    const newWidth = entries[0].contentBoxSize[0].inlineSize;\n    this.#updateCollapsibleItems(newWidth);\n  }\n\n  // This runs when children are added/removed\n  #onSlotChange() {\n    if (!this.#isConnected) return;\n\n    this.#cleanup();\n    this.#childElements = this._slottedNodes ? [...this._slottedNodes] : [];\n\n    this.#childElements.forEach(el => {\n      const observer = new ResizeObserver(\n        this.#calculateBreakPoints.bind(this),\n      );\n      observer.observe(el);\n      this.#childResizeObservers.push(observer);\n    });\n\n    this.#calculateBreakPoints();\n  }\n\n  #cleanup() {\n    this.#childResizeObservers.forEach(observer => observer.disconnect());\n    this.#childResizeObservers = [];\n    this.#visibilityBreakpoints = [];\n\n    // Clean up hidden elements\n    this.#hiddenElements.forEach(el => {\n      el.removeEventListener('click', this.#onItemClicked);\n    });\n    this.#hiddenElements = [];\n    this.#hiddenElementsMap.clear();\n  }\n\n  // Calculate at what widths items should hide\n  async #calculateBreakPoints() {\n    if (!this.#isConnected) return;\n    if (this.#breakPointCalculationInProgress) return;\n\n    this.#breakPointCalculationInProgress = true;\n\n    await this.updateComplete;\n\n    // Get the gap from CSS or use default\n    const gapCSSVar = Number.parseFloat(\n      getComputedStyle(this).getPropertyValue('--uui-responsive-container-gap'),\n    );\n    const gap = Number.isNaN(gapCSSVar) ? 8 : gapCSSVar;\n\n    let totalWidth = 0;\n\n    // Calculate cumulative width for each item\n    for (let i = 0; i < this.#childElements.length; i++) {\n      this.#childElements[i].style.display = '';\n      totalWidth += this.#childElements[i].offsetWidth;\n      this.#visibilityBreakpoints[i] = totalWidth;\n      totalWidth += gap;\n    }\n\n    // Set the container width\n    const tolerance = 2;\n    this._mainElement.style.width = totalWidth - gap + tolerance + 'px';\n\n    this.#updateCollapsibleItems(this._mainElement.offsetWidth);\n    this.#breakPointCalculationInProgress = false;\n  }\n\n  // The main logic that shows/hides items\n  #updateCollapsibleItems(containerWidth: number) {\n    const moreButtonWidth = this._moreButtonElement?.offsetWidth || 40;\n    const availableWidth = containerWidth - moreButtonWidth;\n\n    // Clear previous hidden items\n    this.#hiddenElements.forEach(el => {\n      el.removeEventListener('click', this.#onItemClicked);\n    });\n    this.#hiddenElements = [];\n    this.#hiddenElementsMap.clear();\n\n    if (this.collapse === 'end') {\n      this.#collapseFromEnd(containerWidth, availableWidth);\n    } else {\n      this.#collapseFromStart(containerWidth, availableWidth);\n    }\n\n    // Show/hide the \"more\" button\n    if (this.#hiddenElements.length === 0) {\n      this._moreButtonElement.style.display = 'none';\n      this._popoverContainerElement?.hidePopover();\n    } else {\n      this._moreButtonElement.style.display = '';\n    }\n\n    this.requestUpdate();\n  }\n\n  #hideElement(element: HTMLElement) {\n    element.style.display = 'none';\n    const clone = element.cloneNode(true) as HTMLElement;\n    clone.style.display = '';\n    clone.addEventListener('click', this.#onItemClicked);\n\n    // Link clone ↔ original (bidirectional)\n    this.#hiddenElementsMap.set(clone, element);\n    this.#hiddenElementsMap.set(element, clone);\n    this.#hiddenElements.push(clone);\n  }\n\n  #collapseFromEnd(containerWidth: number, availableWidth: number) {\n    const len = this.#visibilityBreakpoints.length;\n\n    for (let i = 0; i < len; i++) {\n      const breakpoint = this.#visibilityBreakpoints[i];\n      const element = this.#childElements[i];\n\n      // Last item: use full width (no more button needed if all fit)\n      const widthToCheck = i === len - 1 ? containerWidth : availableWidth;\n\n      if (breakpoint <= widthToCheck) {\n        element.style.display = '';\n      } else {\n        this.#hideElement(element);\n      }\n    }\n  }\n\n  #collapseFromStart(containerWidth: number, availableWidth: number) {\n    const len = this.#visibilityBreakpoints.length;\n    const totalWidth = this.#visibilityBreakpoints[len - 1] || 0;\n\n    for (let i = 0; i < len; i++) {\n      const element = this.#childElements[i];\n      // Width from this item to the end\n      const widthFromEnd =\n        totalWidth - (i > 0 ? this.#visibilityBreakpoints[i - 1] : 0);\n\n      // First visible item: use full width (no more button needed if all fit)\n      const isFirstPotentiallyVisible =\n        i === 0 || this.#childElements[i - 1].style.display === 'none';\n      const widthToCheck =\n        isFirstPotentiallyVisible && this.#hiddenElements.length === 0\n          ? containerWidth\n          : availableWidth;\n\n      if (widthFromEnd <= widthToCheck) {\n        element.style.display = '';\n      } else {\n        this.#hideElement(element);\n      }\n    }\n  }\n\n  readonly #onItemClicked = (e: MouseEvent) => {\n    const clickedElement = e.currentTarget as HTMLElement;\n\n    // Find the original element linked to this clone\n    const originalElement = this.#hiddenElementsMap.get(clickedElement);\n\n    if (originalElement) {\n      // Close the dropdown\n      this._popoverContainerElement?.hidePopover();\n\n      // Trigger click on the ORIGINAL element so its event handlers fire\n      originalElement.click();\n    }\n  };\n\n  render() {\n    const moreButton = html`\n      <uui-button\n        popovertarget=\"popover-container\"\n        style=\"display: none\"\n        id=\"more-button\"\n        label=\"More\"\n        compact>\n        <slot name=\"trigger-content\">\n          <uui-symbol-more></uui-symbol-more>\n        </slot>\n      </uui-button>\n    `;\n\n    return html`\n      <div id=\"main\">\n        ${this.collapse === 'start' ? moreButton : ''}\n        <div id=\"items-container\">\n          <slot @slotchange=${this.#onSlotChange}></slot>\n        </div>\n        ${this.collapse === 'end' ? moreButton : ''}\n      </div>\n      <uui-popover-container\n        id=\"popover-container\"\n        popover\n        placement=${this.collapse === 'start' ? 'bottom-start' : 'bottom-end'}>\n        <div id=\"dropdown-container\">\n          ${repeat(this.#hiddenElements, el => html`${el}`)}\n        </div>\n      </uui-popover-container>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: flex;\n        min-width: 0;\n      }\n\n      #main {\n        display: flex;\n        overflow: hidden;\n        align-items: center;\n      }\n\n      #items-container {\n        display: flex;\n        gap: var(--uui-responsive-container-gap, var(--uui-size-3));\n        overflow: hidden;\n        align-items: center;\n      }\n\n      #more-button {\n        --uui-button-background-color: transparent;\n        --uui-button-background-color-hover: var(--uui-color-surface-alt);\n        flex-shrink: 0;\n      }\n\n      :host([collapse='end']) #more-button,\n      :host(:not([collapse])) #more-button {\n        margin-left: var(--uui-responsive-container-gap, var(--uui-size-3));\n      }\n\n      :host([collapse='start']) #more-button {\n        margin-right: var(--uui-responsive-container-gap, var(--uui-size-3));\n      }\n\n      #dropdown-container {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--uui-color-surface);\n        border-radius: var(--uui-border-radius);\n        box-shadow: var(--uui-shadow-depth-3);\n        overflow: hidden;\n        padding: var(--uui-size-space-2);\n        gap: var(--uui-size-space-1);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"responsive-container.element.js","sources":["../../../src/components/responsive-container/responsive-container.element.ts"],"sourcesContent":["import type { UUIButtonElement } from '../button/button.js';\nimport type { UUIPopoverContainerElement } from '../popover-container/popover-container.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport '../button/button.js';\nimport '../popover-container/popover-container.js';\nimport '../symbol-more/symbol-more.js';\n\n/**\n * A responsive container that collapses overflowing children into a dropdown.\n *\n * @element uui-responsive-container\n * @slot - Default slot for child elements (buttons, etc.)\n * @cssprop --uui-responsive-container-gap - Gap between items (default: 8px)\n */\nexport class UUIResponsiveContainerElement extends LitElement {\n  // These help us find elements inside the component\n  @query('#more-button')\n  private readonly _moreButtonElement!: UUIButtonElement;\n\n  @query('#popover-container')\n  private readonly _popoverContainerElement!: UUIPopoverContainerElement;\n\n  @query('#main')\n  private readonly _mainElement!: HTMLElement;\n\n  /**\n   * Controls which side items collapse from.\n   * - \"end\": Items collapse from the right, more button appears on right (default)\n   * - \"start\": Items collapse from the left, more button appears on left\n   * @attr collapse\n   * @default \"end\"\n   */\n  @property({ type: String, reflect: true })\n  collapse: 'start' | 'end' = 'end';\n\n  // This gets all elements put inside the slot\n  @queryAssignedElements({ flatten: true })\n  private readonly _slottedNodes?: HTMLElement[];\n\n  // These store the component's internal state\n  #childElements: HTMLElement[] = []; // All child elements\n  #hiddenElements: HTMLElement[] = []; // Elements in the dropdown\n  #clonedElements: HTMLElement[] = []; // Clones of hidden elements for the dropdown\n  readonly #hiddenElementsMap: Map<HTMLElement, HTMLElement> = new Map();\n  #visibilityBreakpoints: number[] = []; // Width thresholds for each item\n\n  // ResizeObserver watches for size changes\n  readonly #resizeObserver = new ResizeObserver(this.#onResize.bind(this));\n  #childResizeObservers: ResizeObserver[] = [];\n  #breakPointCalculationInProgress = false;\n\n  #isConnected = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.#isConnected = true;\n    this.#initialize();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#isConnected = false;\n    this.#resizeObserver.disconnect();\n    this.#cleanup();\n  }\n\n  async #initialize() {\n    await this.updateComplete;\n    if (!this.#isConnected) return;\n    this.#resizeObserver.observe(this);\n\n    requestAnimationFrame(() => {\n      if (!this.#isConnected) return;\n      this.#onSlotChange();\n    });\n  }\n\n  // This runs when the container size changes\n  #onResize(entries: ResizeObserverEntry[]) {\n    if (!this.#isConnected) return;\n    const newWidth = entries[0].contentBoxSize[0].inlineSize;\n    this.#updateCollapsibleItems(newWidth);\n  }\n\n  // This runs when children are added/removed\n  #onSlotChange() {\n    if (!this.#isConnected) return;\n\n    this.#cleanup();\n    this.#childElements = this._slottedNodes ? [...this._slottedNodes] : [];\n\n    this.#childElements.forEach(el => {\n      const observer = new ResizeObserver(\n        this.#calculateBreakPoints.bind(this),\n      );\n      observer.observe(el);\n      this.#childResizeObservers.push(observer);\n    });\n\n    this.#calculateBreakPoints();\n  }\n\n  #cleanup() {\n    this.#childResizeObservers.forEach(observer => observer.disconnect());\n    this.#childResizeObservers = [];\n    this.#visibilityBreakpoints = [];\n\n    // Clean up hidden elements\n    this.#clonedElements.forEach(el => {\n      el.removeEventListener('click', this.#onItemClicked);\n    });\n    this.#clonedElements = [];\n    this.#hiddenElements = [];\n    this.#hiddenElementsMap.clear();\n  }\n\n  // Calculate at what widths items should hide\n  async #calculateBreakPoints() {\n    if (!this.#isConnected) return;\n    if (this.#breakPointCalculationInProgress) return;\n\n    this.#breakPointCalculationInProgress = true;\n\n    await this.updateComplete;\n\n    // Get the gap from CSS or use default\n    const gapCSSVar = Number.parseFloat(\n      getComputedStyle(this).getPropertyValue('--uui-responsive-container-gap'),\n    );\n    const gap = Number.isNaN(gapCSSVar) ? 8 : gapCSSVar;\n\n    let totalWidth = 0;\n\n    // Calculate cumulative width for each item\n    for (let i = 0; i < this.#childElements.length; i++) {\n      this.#childElements[i].style.display = '';\n      totalWidth += this.#childElements[i].offsetWidth;\n      this.#visibilityBreakpoints[i] = totalWidth;\n      totalWidth += gap;\n    }\n\n    // Set the container width\n    const tolerance = 2;\n    this._mainElement.style.width = totalWidth - gap + tolerance + 'px';\n\n    this.#updateCollapsibleItems(this.offsetWidth);\n    this.#breakPointCalculationInProgress = false;\n  }\n\n  // The main logic that shows/hides items\n  #updateCollapsibleItems(containerWidth: number) {\n    const moreButtonWidth = this._moreButtonElement?.offsetWidth || 40;\n    const availableWidth = containerWidth - moreButtonWidth;\n\n    // Clear previous hidden items\n    this.#hiddenElements = [];\n    this.#clonedElements.forEach(el =>\n      el.removeEventListener('click', this.#onItemClicked),\n    );\n    this.#clonedElements = [];\n    this._popoverContainerElement?.hidePopover();\n    this.#hiddenElementsMap.clear();\n\n    if (this.collapse === 'end') {\n      this.#collapseFromEnd(containerWidth, availableWidth);\n    } else {\n      this.#collapseFromStart(containerWidth, availableWidth);\n    }\n\n    // Show/hide the \"more\" button\n    if (this.#hiddenElements.length === 0) {\n      this._moreButtonElement.style.display = 'none';\n      this._popoverContainerElement?.hidePopover();\n    } else {\n      this._moreButtonElement.style.display = '';\n    }\n\n    this.requestUpdate();\n  }\n\n  #hideElement(element: HTMLElement) {\n    element.style.display = 'none';\n    this.#hiddenElements.push(element);\n  }\n\n  #collapseFromEnd(containerWidth: number, availableWidth: number) {\n    const len = this.#visibilityBreakpoints.length;\n\n    for (let i = 0; i < len; i++) {\n      const breakpoint = this.#visibilityBreakpoints[i];\n      const element = this.#childElements[i];\n\n      // Last item: use full width (no more button needed if all fit)\n      const widthToCheck = i === len - 1 ? containerWidth : availableWidth;\n\n      if (breakpoint <= widthToCheck) {\n        element.style.display = '';\n      } else {\n        this.#hideElement(element);\n      }\n    }\n  }\n\n  #collapseFromStart(containerWidth: number, availableWidth: number) {\n    const len = this.#visibilityBreakpoints.length;\n    const totalWidth = this.#visibilityBreakpoints[len - 1] || 0;\n\n    for (let i = 0; i < len; i++) {\n      const element = this.#childElements[i];\n      // Width from this item to the end\n      const widthFromEnd =\n        totalWidth - (i > 0 ? this.#visibilityBreakpoints[i - 1] : 0);\n\n      // First visible item: use full width (no more button needed if all fit)\n      const isFirstPotentiallyVisible =\n        i === 0 || this.#childElements[i - 1].style.display === 'none';\n      const widthToCheck =\n        isFirstPotentiallyVisible && this.#hiddenElements.length === 0\n          ? containerWidth\n          : availableWidth;\n\n      if (widthFromEnd <= widthToCheck) {\n        element.style.display = '';\n      } else {\n        this.#hideElement(element);\n      }\n    }\n  }\n\n  readonly #onItemClicked = (e: MouseEvent) => {\n    const clickedElement = e.currentTarget as HTMLElement;\n\n    // Find the original element linked to this clone\n    const originalElement = this.#hiddenElementsMap.get(clickedElement);\n\n    if (originalElement) {\n      // Close the dropdown\n      this._popoverContainerElement?.hidePopover();\n\n      // Trigger click on the ORIGINAL element so its event handlers fire\n      originalElement.click();\n    }\n  };\n\n  #onPopoverToggle(e: ToggleEvent) {\n    if (e.newState === 'open') {\n      this.#buildDropdownItems();\n    }\n  }\n\n  #buildDropdownItems() {\n    // Clear old clones\n    this.#clonedElements.forEach(el =>\n      el.removeEventListener('click', this.#onItemClicked),\n    );\n    this.#clonedElements = [];\n    this.#hiddenElementsMap.clear();\n\n    for (const original of this.#hiddenElements) {\n      const clone = original.cloneNode(true) as HTMLElement;\n      clone.style.display = '';\n      clone.addEventListener('click', this.#onItemClicked);\n      this.#hiddenElementsMap.set(clone, original);\n      this.#clonedElements.push(clone);\n    }\n    this.requestUpdate();\n  }\n\n  render() {\n    const moreButton = html`\n      <uui-button\n        popovertarget=\"popover-container\"\n        style=\"display: none\"\n        id=\"more-button\"\n        label=\"More\"\n        compact>\n        <slot name=\"trigger-content\">\n          <uui-symbol-more></uui-symbol-more>\n        </slot>\n      </uui-button>\n    `;\n\n    return html`\n      <div id=\"main\">\n        ${this.collapse === 'start' ? moreButton : ''}\n        <div id=\"items-container\">\n          <slot @slotchange=${this.#onSlotChange}></slot>\n        </div>\n        ${this.collapse === 'end' ? moreButton : ''}\n      </div>\n      <uui-popover-container\n        id=\"popover-container\"\n        popover\n        @beforetoggle=${this.#onPopoverToggle}\n        placement=${this.collapse === 'start' ? 'bottom-start' : 'bottom-end'}>\n        <div id=\"dropdown-container\">\n          ${repeat(this.#clonedElements, el => html`${el}`)}\n        </div>\n      </uui-popover-container>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: flex;\n        min-width: 0;\n      }\n\n      #main {\n        display: flex;\n        overflow: hidden;\n        align-items: center;\n      }\n\n      #items-container {\n        display: flex;\n        gap: var(--uui-responsive-container-gap, var(--uui-size-3));\n        overflow: hidden;\n        align-items: center;\n      }\n\n      #more-button {\n        --uui-button-background-color: transparent;\n        --uui-button-background-color-hover: var(--uui-color-surface-alt);\n        flex-shrink: 0;\n      }\n\n      :host([collapse='end']) #more-button,\n      :host(:not([collapse])) #more-button {\n        margin-left: var(--uui-responsive-container-gap, var(--uui-size-3));\n      }\n\n      :host([collapse='start']) #more-button {\n        margin-right: var(--uui-responsive-container-gap, var(--uui-size-3));\n      }\n\n      #dropdown-container {\n        display: flex;\n        flex-direction: column;\n        background-color: var(--uui-color-surface);\n        border-radius: var(--uui-border-radius);\n        box-shadow: var(--uui-shadow-depth-3);\n        overflow: hidden;\n        padding: var(--uui-size-space-2);\n        gap: var(--uui-size-space-1);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/scroll-container/scroll-container.element.js

@@ -32,7 +32,7 @@ _UUIScrollContainerElement.styles = [
         overflow-y: overlay;
         scrollbar-width: thin;
         scrollbar-color: transparent transparent;
-        transition: scrollbar-color 120ms 640ms;
+        transition: scrollbar-color 480ms 480ms ease-in;
       }
 
       :host([enforce-scroll]) {
@@ -42,8 +42,8 @@ _UUIScrollContainerElement.styles = [
       :host(:hover),
       :host(:focus),
       :host(:focus-within) {
-        scrollbar-color: var(--uui-color-disabled-contrast) transparent;
-        transition: scrollbar-color 60ms;
+        scrollbar-color: var(--uui-color-disabled-standalone) transparent;
+        transition: scrollbar-color 120ms ease-out;
       }
 
       :host::-webkit-scrollbar {
@@ -65,7 +65,7 @@ _UUIScrollContainerElement.styles = [
       :host(:hover)::-webkit-scrollbar-thumb,
       :host(:focus)::-webkit-scrollbar-thumb,
       :host(:focus-within)::-webkit-scrollbar-thumb {
-        background-color: var(--uui-color-disabled-contrast);
+        background-color: var(--uui-color-disabled-standalone);
       }
     `
 ];

package/dist/components/scroll-container/scroll-container.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-container.element.js","sources":["../../../src/components/scroll-container/scroll-container.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n *  @element uui-scroll-container\n *  @slot - for content\n *  @attribute enforce-scroll - forces the scrollbar to appear\n *  @description - Component for displaying a larger amount of .\n *\n */\nexport class UUIScrollContainerElement extends LitElement {\n  /**\n   * @type {boolean}\n   * @attr forces the scrollbar to appear\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'enforce-scroll' })\n  enforceScroll = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('tabindex')) {\n      this.setAttribute('tabindex', '0');\n    }\n  }\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: block;\n        overflow-y: auto;\n        overflow-y: overlay;\n        scrollbar-width: thin;\n        scrollbar-color: transparent transparent;\n        transition: scrollbar-color 120ms 640ms;\n      }\n\n      :host([enforce-scroll]) {\n        overflow-y: scroll;\n      }\n      :host([enforce-scroll]),\n      :host(:hover),\n      :host(:focus),\n      :host(:focus-within) {\n        scrollbar-color: var(--uui-color-disabled-contrast) transparent;\n        transition: scrollbar-color 60ms;\n      }\n\n      :host::-webkit-scrollbar {\n        width: 6px;\n        height: 6px;\n      }\n\n      :host::-webkit-scrollbar-track {\n        background: transparent;\n        border-radius: 3px;\n      }\n\n      :host::-webkit-scrollbar-thumb {\n        background-color: transparent;\n        border-radius: 3px;\n      }\n\n      :host([enforce-scroll])::-webkit-scrollbar-thumb,\n      :host(:hover)::-webkit-scrollbar-thumb,\n      :host(:focus)::-webkit-scrollbar-thumb,\n      :host(:focus-within)::-webkit-scrollbar-thumb {\n        background-color: var(--uui-color-disabled-contrast);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAUO,MAAM,6BAAN,MAAM,mCAAkC,WAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA;AAML,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAEhB,oBAAoB;AAClB,UAAM,kBAAA;AACN,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAClC,WAAK,aAAa,YAAY,GAAG;AAAA,IACnC;AAAA,EACF;AAAA,EACA,SAAS;AACP,WAAO;AAAA,EACT;AA+CF;AA7CE,2BAAyB,SAAS;AAAA,EAChC;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;AAnBG,IAAM,4BAAN;AAML,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,kBAAkB;AAAA,GAL5D,0BAMX,WAAA,eAAA;"}
+{"version":3,"file":"scroll-container.element.js","sources":["../../../src/components/scroll-container/scroll-container.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n *  @element uui-scroll-container\n *  @slot - for content\n *  @attribute enforce-scroll - forces the scrollbar to appear\n *  @description - Component for displaying a larger amount of .\n *\n */\nexport class UUIScrollContainerElement extends LitElement {\n  /**\n   * @type {boolean}\n   * @attr forces the scrollbar to appear\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'enforce-scroll' })\n  enforceScroll = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('tabindex')) {\n      this.setAttribute('tabindex', '0');\n    }\n  }\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: block;\n        overflow-y: auto;\n        overflow-y: overlay;\n        scrollbar-width: thin;\n        scrollbar-color: transparent transparent;\n        transition: scrollbar-color 480ms 480ms ease-in;\n      }\n\n      :host([enforce-scroll]) {\n        overflow-y: scroll;\n      }\n      :host([enforce-scroll]),\n      :host(:hover),\n      :host(:focus),\n      :host(:focus-within) {\n        scrollbar-color: var(--uui-color-disabled-standalone) transparent;\n        transition: scrollbar-color 120ms ease-out;\n      }\n\n      :host::-webkit-scrollbar {\n        width: 6px;\n        height: 6px;\n      }\n\n      :host::-webkit-scrollbar-track {\n        background: transparent;\n        border-radius: 3px;\n      }\n\n      :host::-webkit-scrollbar-thumb {\n        background-color: transparent;\n        border-radius: 3px;\n      }\n\n      :host([enforce-scroll])::-webkit-scrollbar-thumb,\n      :host(:hover)::-webkit-scrollbar-thumb,\n      :host(:focus)::-webkit-scrollbar-thumb,\n      :host(:focus-within)::-webkit-scrollbar-thumb {\n        background-color: var(--uui-color-disabled-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAUO,MAAM,6BAAN,MAAM,mCAAkC,WAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA;AAML,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAEhB,oBAAoB;AAClB,UAAM,kBAAA;AACN,QAAI,CAAC,KAAK,aAAa,UAAU,GAAG;AAClC,WAAK,aAAa,YAAY,GAAG;AAAA,IACnC;AAAA,EACF;AAAA,EACA,SAAS;AACP,WAAO;AAAA,EACT;AA+CF;AA7CE,2BAAyB,SAAS;AAAA,EAChC;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;AAnBG,IAAM,4BAAN;AAML,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,kBAAkB;AAAA,GAL5D,0BAMX,WAAA,eAAA;"}

package/dist/components/symbol-expand/symbol-expand.element.js

@@ -38,7 +38,7 @@ _UUISymbolExpandElement.styles = [
       svg {
         transform: rotate(-90deg);
         transform-origin: 50% 50%;
-        transition: transform 100ms cubic-bezier(0.1, 0, 0.9, 1);
+        transition: transform 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
         width: 100%;
         height: 100%;
       }

package/dist/components/symbol-expand/symbol-expand.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"symbol-expand.element.js","sources":["../../../src/components/symbol-expand/symbol-expand.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n *  A symbol indicating whether related composition is expanded or collapsed\n *  @element uui-symbol-expand\n */\nexport class UUISymbolExpandElement extends LitElement {\n  /**\n   * Set this boolean to true for a open/expanded look.\n   * @type {boolean}\n   * @default false\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  render() {\n    return html`<svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\">\n      <path d=\"m4 9 8 8 8-8\"></path>\n    </svg>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n        width: 12px;\n        vertical-align: middle;\n      }\n\n      svg {\n        transform: rotate(-90deg);\n        transform-origin: 50% 50%;\n        transition: transform 100ms cubic-bezier(0.1, 0, 0.9, 1);\n        width: 100%;\n        height: 100%;\n      }\n\n      :host([open]) svg {\n        transform: rotate(0deg);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAOO,MAAM,0BAAN,MAAM,gCAA+B,WAAW;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAO,OAAO;AAAA,EAAA;AAAA,EAEd,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUT;AAuBF;AArBE,wBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAxBG,IAAM,yBAAN;AAQE,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAP/B,uBAQJ,WAAA,MAAA;"}
+{"version":3,"file":"symbol-expand.element.js","sources":["../../../src/components/symbol-expand/symbol-expand.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n *  A symbol indicating whether related composition is expanded or collapsed\n *  @element uui-symbol-expand\n */\nexport class UUISymbolExpandElement extends LitElement {\n  /**\n   * Set this boolean to true for a open/expanded look.\n   * @type {boolean}\n   * @default false\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  public open = false;\n\n  render() {\n    return html`<svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"3\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\">\n      <path d=\"m4 9 8 8 8-8\"></path>\n    </svg>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n        width: 12px;\n        vertical-align: middle;\n      }\n\n      svg {\n        transform: rotate(-90deg);\n        transform-origin: 50% 50%;\n        transition: transform 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        width: 100%;\n        height: 100%;\n      }\n\n      :host([open]) svg {\n        transform: rotate(0deg);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAOO,MAAM,0BAAN,MAAM,gCAA+B,WAAW;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAO,OAAO;AAAA,EAAA;AAAA,EAEd,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUT;AAuBF;AArBE,wBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAxBG,IAAM,yBAAN;AAQE,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAP/B,uBAQJ,WAAA,MAAA;"}

package/dist/components/symbol-file-thumbnail/symbol-file-thumbnail.element.js

@@ -8,8 +8,40 @@ var _UUISymbolFileThumbnailElement_instances, onImageError_fn;
 import { LitElement, html, css } from "lit";
 import { property, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
-import "../icon/icon.js";
+import "../icon-registry-essential/svgs/iconAdd.js";
+import "../icon-registry-essential/svgs/iconAlert.js";
+import "../icon-registry-essential/svgs/iconAttachment.js";
+import "../icon-registry-essential/svgs/iconCalendar.js";
+import "../icon-registry-essential/svgs/iconCheck.js";
+import "../icon-registry-essential/svgs/iconClipboard.js";
+import "../icon-registry-essential/svgs/iconCode.js";
+import "../icon-registry-essential/svgs/iconColorPicker.js";
+import "../icon-registry-essential/svgs/iconCopy.js";
+import "../icon-registry-essential/svgs/iconDelete.js";
+import "../icon-registry-essential/svgs/iconDocument.js";
+import "../icon-registry-essential/svgs/iconDownload.js";
+import "../icon-registry-essential/svgs/iconDrag.js";
+import "../icon-registry-essential/svgs/iconEdit.js";
+import "../icon-registry-essential/svgs/iconFavorite.js";
+import "../icon-registry-essential/svgs/iconFolder.js";
+import "../icon-registry-essential/svgs/iconForbidden.js";
+import "../icon-registry-essential/svgs/iconInfo.js";
+import "../icon-registry-essential/svgs/iconLink.js";
+import "../icon-registry-essential/svgs/iconLock.js";
+import "../icon-registry-essential/svgs/iconPause.js";
 import { iconPicture } from "../icon-registry-essential/svgs/iconPicture.js";
+import "../icon-registry-essential/svgs/iconPlay.js";
+import "../icon-registry-essential/svgs/iconRemove.js";
+import "../icon-registry-essential/svgs/iconSearch.js";
+import "../icon-registry-essential/svgs/iconSee.js";
+import "../icon-registry-essential/svgs/iconSettings.js";
+import "../icon-registry-essential/svgs/iconSubtract.js";
+import "../icon-registry-essential/svgs/iconSync.js";
+import "../icon-registry-essential/svgs/iconUnlock.js";
+import "../icon-registry-essential/svgs/iconUnsee.js";
+import "../icon-registry-essential/svgs/iconWand.js";
+import "../icon-registry-essential/svgs/iconWrong.js";
+import "../icon/icon.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -36,6 +68,7 @@ const _UUISymbolFileThumbnailElement = class _UUISymbolFileThumbnailElement exte
     return when(
       this.src && !this._imageError,
       () => html`<img
+          decoding="async"
           src=${this.src}
           alt=${this.alt}
           @error=${__privateMethod(this, _UUISymbolFileThumbnailElement_instances, onImageError_fn)} />`,

package/dist/components/symbol-file-thumbnail/symbol-file-thumbnail.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"symbol-file-thumbnail.element.js","sources":["../../../src/components/symbol-file-thumbnail/symbol-file-thumbnail.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { iconPicture } from '../icon-registry-essential/svgs/index.js';\n\nimport '../icon/icon.js';\n\n/**\n * @element uui-symbol-file-thumbnail\n * @description - Symbol to display a thumbnail.\n */\nexport class UUISymbolFileThumbnailElement extends LitElement {\n  /**\n   * Source of the thumbnail.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  src: string = '';\n\n  /**\n   * Alt of the thumbnail.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  alt: string = '';\n\n  @state()\n  private _imageError = false;\n\n  protected override willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('src')) {\n      this._imageError = false;\n    }\n  }\n\n  render() {\n    return when(\n      this.src && !this._imageError,\n      () =>\n        html`<img\n          src=${this.src}\n          alt=${this.alt}\n          @error=${this.#onImageError} />`,\n      () =>\n        html`<uui-icon\n          name=\"picture\"\n          .fallback=${iconPicture.strings[0]}></uui-icon>`,\n    );\n  }\n\n  #onImageError() {\n    this._imageError = true;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: block;\n        width: 100%;\n        height: 100%;\n      }\n\n      img {\n        object-fit: contain;\n        height: 100%;\n        width: 100%;\n      }\n\n      uui-icon {\n        width: 100%;\n        height: 100%;\n        max-width: 100%;\n        display: flex;\n        max-height: 100%;\n        justify-content: center;\n        color: var(--uui-color-surface);\n        background: var(--uui-color-surface-alt);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,iCAAN,MAAM,uCAAsC,WAAW;AAAA,EAAvD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAQL,SAAA,MAAc;AASd,SAAA,MAAc;AAGd,SAAQ,cAAc;AAAA,EAAA;AAAA,EAEH,WAAW,SAA+B;AAC3D,QAAI,QAAQ,IAAI,KAAK,GAAG;AACtB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,MACL,KAAK,OAAO,CAAC,KAAK;AAAA,MAClB,MACE;AAAA,gBACQ,KAAK,GAAG;AAAA,gBACR,KAAK,GAAG;AAAA,mBACL,sBAAK,0DAAa;AAAA,MAC/B,MACE;AAAA;AAAA,sBAEc,YAAY,QAAQ,CAAC,CAAC;AAAA,IAAA;AAAA,EAE1C;AAgCF;AAzEO;AA2CL,kBAAA,WAAgB;AACd,OAAK,cAAc;AACrB;AAEA,+BAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAhDG,IAAM,gCAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,8BAQX,WAAA,KAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,8BAiBX,WAAA,KAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAnBI,8BAoBH,WAAA,aAAA;"}
+{"version":3,"file":"symbol-file-thumbnail.element.js","sources":["../../../src/components/symbol-file-thumbnail/symbol-file-thumbnail.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\n\nimport { iconPicture } from '../icon-registry-essential/svgs/index.js';\n\nimport '../icon/icon.js';\n\n/**\n * @element uui-symbol-file-thumbnail\n * @description - Symbol to display a thumbnail.\n */\nexport class UUISymbolFileThumbnailElement extends LitElement {\n  /**\n   * Source of the thumbnail.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  src: string = '';\n\n  /**\n   * Alt of the thumbnail.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  alt: string = '';\n\n  @state()\n  private _imageError = false;\n\n  protected override willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('src')) {\n      this._imageError = false;\n    }\n  }\n\n  render() {\n    return when(\n      this.src && !this._imageError,\n      () =>\n        html`<img\n          decoding=\"async\"\n          src=${this.src}\n          alt=${this.alt}\n          @error=${this.#onImageError} />`,\n      () =>\n        html`<uui-icon\n          name=\"picture\"\n          .fallback=${iconPicture.strings[0]}></uui-icon>`,\n    );\n  }\n\n  #onImageError() {\n    this._imageError = true;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: block;\n        width: 100%;\n        height: 100%;\n      }\n\n      img {\n        object-fit: contain;\n        height: 100%;\n        width: 100%;\n      }\n\n      uui-icon {\n        width: 100%;\n        height: 100%;\n        max-width: 100%;\n        display: flex;\n        max-height: 100%;\n        justify-content: center;\n        color: var(--uui-color-surface);\n        background: var(--uui-color-surface-alt);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,iCAAN,MAAM,uCAAsC,WAAW;AAAA,EAAvD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAQL,SAAA,MAAc;AASd,SAAA,MAAc;AAGd,SAAQ,cAAc;AAAA,EAAA;AAAA,EAEH,WAAW,SAA+B;AAC3D,QAAI,QAAQ,IAAI,KAAK,GAAG;AACtB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,MACL,KAAK,OAAO,CAAC,KAAK;AAAA,MAClB,MACE;AAAA;AAAA,gBAEQ,KAAK,GAAG;AAAA,gBACR,KAAK,GAAG;AAAA,mBACL,sBAAK,0DAAa;AAAA,MAC/B,MACE;AAAA;AAAA,sBAEc,YAAY,QAAQ,CAAC,CAAC;AAAA,IAAA;AAAA,EAE1C;AAgCF;AA1EO;AA4CL,kBAAA,WAAgB;AACd,OAAK,cAAc;AACrB;AAEA,+BAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAjDG,IAAM,gCAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPf,8BAQX,WAAA,KAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBf,8BAiBX,WAAA,KAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GAnBI,8BAoBH,WAAA,aAAA;"}

package/dist/components/table/table-head.element.js

@@ -11,8 +11,12 @@ const _UUITableHeadElement = class _UUITableHeadElement extends LitElement {
 _UUITableHeadElement.styles = [
   css`
       :host {
+        position: sticky;
         display: table-header-group;
         font-weight: bold;
+        top: 0;
+        z-index: 1;
+        background-color: var(--uui-color-surface, #fff);
       }
     `
 ];

package/dist/components/table/table-head.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-head.element.js","sources":["../../../src/components/table/table-head.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/**\n *  Table head element. Holds the styles for table head. Parent to uui-table-head-cell.\n *  @element uui-table-head\n *  @slot - slot for uui-table-head-cell elements.\n */\nexport class UUITableHeadElement extends LitElement {\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'row');\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: table-header-group;\n        font-weight: bold;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,uBAAN,MAAM,6BAA4B,WAAW;AAAA,EAClD,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAUF;AARE,qBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAXG,IAAM,sBAAN;"}
+{"version":3,"file":"table-head.element.js","sources":["../../../src/components/table/table-head.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/**\n *  Table head element. Holds the styles for table head. Parent to uui-table-head-cell.\n *  @element uui-table-head\n *  @slot - slot for uui-table-head-cell elements.\n */\nexport class UUITableHeadElement extends LitElement {\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'row');\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: sticky;\n        display: table-header-group;\n        font-weight: bold;\n        top: 0;\n        z-index: 1;\n        background-color: var(--uui-color-surface, #fff);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,uBAAN,MAAM,6BAA4B,WAAW;AAAA,EAClD,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAcF;AAZE,qBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAXG,IAAM,sBAAN;"}

package/dist/components/table/table.element.js

@@ -14,9 +14,13 @@ _UUITableElement.styles = [
       :host {
         display: table;
         width: 100%;
-        border-radius: var(--uui-border-radius);
         background-color: var(--uui-color-surface);
         cursor: default;
+
+        border-radius: var(--uui-border-radius-3);
+        border-width: var(--uui-box-border-width, 1px);
+        border-style: solid;
+        border-color: var(--uui-color-divider-standalone);
       }
     `
 ];

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

@@ -1 +1 @@
-{"version":3,"file":"table.element.js","sources":["../../../src/components/table/table.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/**\n *  Recreation of native table and it's child elements. `<uui-table>` is a parent element to `<uui-table-head>` `<and uui-table-row>`. To make it fully accessible remember to add aria-label and aria-describedby.\n *  @element uui-table\n *  @slot - slot for `<uui-table-head>` and `<uui-table-row>` elements. Make a table out of them.\n */\nexport class UUITableElement extends LitElement {\n  /* consider select-only attribute on this level? */\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: table;\n        width: 100%;\n        border-radius: var(--uui-border-radius);\n        background-color: var(--uui-color-surface);\n        cursor: default;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,mBAAN,MAAM,yBAAwB,WAAW;AAAA;AAAA,EAG9C,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,OAAO;AAAA,EACnC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAaF;AAXE,iBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAbG,IAAM,kBAAN;"}
+{"version":3,"file":"table.element.js","sources":["../../../src/components/table/table.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/**\n *  Recreation of native table and it's child elements. `<uui-table>` is a parent element to `<uui-table-head>` `<and uui-table-row>`. To make it fully accessible remember to add aria-label and aria-describedby.\n *  @element uui-table\n *  @slot - slot for `<uui-table-head>` and `<uui-table-row>` elements. Make a table out of them.\n */\nexport class UUITableElement extends LitElement {\n  /* consider select-only attribute on this level? */\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'table');\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: table;\n        width: 100%;\n        background-color: var(--uui-color-surface);\n        cursor: default;\n\n        border-radius: var(--uui-border-radius-3);\n        border-width: var(--uui-box-border-width, 1px);\n        border-style: solid;\n        border-color: var(--uui-color-divider-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,mBAAN,MAAM,yBAAwB,WAAW;AAAA;AAAA,EAG9C,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,aAAa,QAAQ,OAAO;AAAA,EACnC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAiBF;AAfE,iBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAbG,IAAM,kBAAN;"}

package/dist/components/tag/tag.element.js

@@ -70,17 +70,18 @@ _UUITagElement.styles = [
       :host {
         background-color: var(--uui-color-surface);
         color: var(--color-standalone);
-        border-color: transparent;
       }
       :host([look='primary']) {
         background-color: var(--color);
         color: var(--color-contrast);
-        border-color: transparent;
       }
       :host([look='secondary']) {
         background-color: var(--uui-color-surface-alt);
         color: var(--color-standalone);
-        border-color: transparent;
+        border-color: var(
+          --uui-tag-border-color,
+          var(--uui-color-divider-standalone)
+        );
       }
       :host([look='outline']) {
         background-color: transparent;

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

@@ -1 +1 @@
-{"version":3,"file":"tag.element.js","sources":["../../../src/components/tag/tag.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type {\n  UUIInterfaceColor,\n  UUIInterfaceLook,\n} from '../../internal/types/index.js';\n\n/**\n *\n *  @element uui-tag\n *  @description Tag component from Umbraco UI components library. Comes in one shape, but different looks and sizes\n *  @slot - slot for tag contents\n *  @cssprop --uui-tag-font-size - overwrite the default font-size for the tag.\n *  @cssprop --uui-tag-padding - overwrite the default padding size for the tag.\n *  @cssprop --uui-tag-border-radius - overwrite the default border-radius for the tag.\n *  @cssprop --uui-tag-border-color - overwrite the default border color for the tag.\n */\n\nexport class UUITagElement extends LitElement {\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"positive\" | \"warning\" | \"danger\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = 'default';\n\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  look: UUIInterfaceLook = 'primary';\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-block;\n        font-size: var(--uui-tag-font-size, var(--uui-type-small-size));\n        font-weight: 700;\n        line-height: 1;\n        padding: var(\n          --uui-tag-padding,\n          var(--uui-size-space-1) calc(var(--uui-size-space-1) + 0.5em)\n        );\n        user-select: none;\n        border-radius: var(--uui-tag-border-radius, var(--uui-size-4));\n        border: 1px solid var(--uui-tag-border-color, transparent);\n      }\n\n      slot {\n        display: block;\n        align-content: center;\n        margin: 2px;\n      }\n\n      :host {\n        --color: var(--uui-color-default);\n        --color-standalone: var(--uui-color-default-standalone);\n        --color-contrast: var(--uui-color-default-contrast);\n      }\n      :host([color='positive']) {\n        --color: var(--uui-color-positive);\n        --color-standalone: var(--uui-color-positive-standalone);\n        --color-contrast: var(--uui-color-positive-contrast);\n      }\n      :host([color='warning']) {\n        --color: var(--uui-color-warning);\n        --color-standalone: var(--uui-color-warning-standalone);\n        --color-contrast: var(--uui-color-warning-contrast);\n      }\n      :host([color='danger']) {\n        --color: var(--uui-color-danger);\n        --color-standalone: var(--uui-color-danger-standalone);\n        --color-contrast: var(--uui-color-danger-contrast);\n      }\n      :host([color='invalid']) {\n        --color: var(--uui-color-invalid);\n        --color-standalone: var(--uui-color-invalid-standalone);\n        --color-contrast: var(--uui-color-invalid-contrast);\n      }\n\n      :host {\n        background-color: var(--uui-color-surface);\n        color: var(--color-standalone);\n        border-color: transparent;\n      }\n      :host([look='primary']) {\n        background-color: var(--color);\n        color: var(--color-contrast);\n        border-color: transparent;\n      }\n      :host([look='secondary']) {\n        background-color: var(--uui-color-surface-alt);\n        color: var(--color-standalone);\n        border-color: transparent;\n      }\n      :host([look='outline']) {\n        background-color: transparent;\n        color: var(--color-standalone);\n        border-color: var(--color-standalone);\n      }\n      :host([look='placeholder']) {\n        border-style: dashed;\n        background-color: transparent;\n        color: var(--color-standalone);\n        border-color: var(--uui-color-border-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAkBO,MAAM,iBAAN,MAAM,uBAAsB,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAA2B;AAS3B,SAAA,OAAyB;AAAA,EAAA;AAAA,EAEzB,SAAS;AACP,WAAO;AAAA,EACT;AA8EF;AA5EE,eAAyB,SAAS;AAAA,EAChC;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;AAxBG,IAAM,gBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAPhB,cAQX,WAAA,OAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAhBhB,cAiBX,WAAA,MAAA;"}
+{"version":3,"file":"tag.element.js","sources":["../../../src/components/tag/tag.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type {\n  UUIInterfaceColor,\n  UUIInterfaceLook,\n} from '../../internal/types/index.js';\n\n/**\n *\n *  @element uui-tag\n *  @description Tag component from Umbraco UI components library. Comes in one shape, but different looks and sizes\n *  @slot - slot for tag contents\n *  @cssprop --uui-tag-font-size - overwrite the default font-size for the tag.\n *  @cssprop --uui-tag-padding - overwrite the default padding size for the tag.\n *  @cssprop --uui-tag-border-radius - overwrite the default border-radius for the tag.\n *  @cssprop --uui-tag-border-color - overwrite the default border color for the tag.\n */\n\nexport class UUITagElement extends LitElement {\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"positive\" | \"warning\" | \"danger\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = 'default';\n\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  look: UUIInterfaceLook = 'primary';\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-block;\n        font-size: var(--uui-tag-font-size, var(--uui-type-small-size));\n        font-weight: 700;\n        line-height: 1;\n        padding: var(\n          --uui-tag-padding,\n          var(--uui-size-space-1) calc(var(--uui-size-space-1) + 0.5em)\n        );\n        user-select: none;\n        border-radius: var(--uui-tag-border-radius, var(--uui-size-4));\n        border: 1px solid var(--uui-tag-border-color, transparent);\n      }\n\n      slot {\n        display: block;\n        align-content: center;\n        margin: 2px;\n      }\n\n      :host {\n        --color: var(--uui-color-default);\n        --color-standalone: var(--uui-color-default-standalone);\n        --color-contrast: var(--uui-color-default-contrast);\n      }\n      :host([color='positive']) {\n        --color: var(--uui-color-positive);\n        --color-standalone: var(--uui-color-positive-standalone);\n        --color-contrast: var(--uui-color-positive-contrast);\n      }\n      :host([color='warning']) {\n        --color: var(--uui-color-warning);\n        --color-standalone: var(--uui-color-warning-standalone);\n        --color-contrast: var(--uui-color-warning-contrast);\n      }\n      :host([color='danger']) {\n        --color: var(--uui-color-danger);\n        --color-standalone: var(--uui-color-danger-standalone);\n        --color-contrast: var(--uui-color-danger-contrast);\n      }\n      :host([color='invalid']) {\n        --color: var(--uui-color-invalid);\n        --color-standalone: var(--uui-color-invalid-standalone);\n        --color-contrast: var(--uui-color-invalid-contrast);\n      }\n\n      :host {\n        background-color: var(--uui-color-surface);\n        color: var(--color-standalone);\n      }\n      :host([look='primary']) {\n        background-color: var(--color);\n        color: var(--color-contrast);\n      }\n      :host([look='secondary']) {\n        background-color: var(--uui-color-surface-alt);\n        color: var(--color-standalone);\n        border-color: var(\n          --uui-tag-border-color,\n          var(--uui-color-divider-standalone)\n        );\n      }\n      :host([look='outline']) {\n        background-color: transparent;\n        color: var(--color-standalone);\n        border-color: var(--color-standalone);\n      }\n      :host([look='placeholder']) {\n        border-style: dashed;\n        background-color: transparent;\n        color: var(--color-standalone);\n        border-color: var(--uui-color-border-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAkBO,MAAM,iBAAN,MAAM,uBAAsB,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAA2B;AAS3B,SAAA,OAAyB;AAAA,EAAA;AAAA,EAEzB,SAAS;AACP,WAAO;AAAA,EACT;AA+EF;AA7EE,eAAyB,SAAS;AAAA,EAChC;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;AAxBG,IAAM,gBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAPhB,cAQX,WAAA,OAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAhBhB,cAiBX,WAAA,MAAA;"}

package/dist/components/toast-notification/toast-notification.element.js

@@ -1,10 +1,42 @@
+import "../icon-registry-essential/svgs/iconAdd.js";
+import "../icon-registry-essential/svgs/iconAlert.js";
+import "../icon-registry-essential/svgs/iconAttachment.js";
+import "../icon-registry-essential/svgs/iconCalendar.js";
+import "../icon-registry-essential/svgs/iconCheck.js";
+import "../icon-registry-essential/svgs/iconClipboard.js";
+import "../icon-registry-essential/svgs/iconCode.js";
+import "../icon-registry-essential/svgs/iconColorPicker.js";
+import "../icon-registry-essential/svgs/iconCopy.js";
+import "../icon-registry-essential/svgs/iconDelete.js";
+import "../icon-registry-essential/svgs/iconDocument.js";
+import "../icon-registry-essential/svgs/iconDownload.js";
+import "../icon-registry-essential/svgs/iconDrag.js";
+import "../icon-registry-essential/svgs/iconEdit.js";
+import "../icon-registry-essential/svgs/iconFavorite.js";
+import "../icon-registry-essential/svgs/iconFolder.js";
+import "../icon-registry-essential/svgs/iconForbidden.js";
+import "../icon-registry-essential/svgs/iconInfo.js";
+import "../icon-registry-essential/svgs/iconLink.js";
+import "../icon-registry-essential/svgs/iconLock.js";
+import "../icon-registry-essential/svgs/iconPause.js";
+import "../icon-registry-essential/svgs/iconPicture.js";
+import "../icon-registry-essential/svgs/iconPlay.js";
+import { iconRemove } from "../icon-registry-essential/svgs/iconRemove.js";
+import "../icon-registry-essential/svgs/iconSearch.js";
+import "../icon-registry-essential/svgs/iconSee.js";
+import "../icon-registry-essential/svgs/iconSettings.js";
+import "../icon-registry-essential/svgs/iconSubtract.js";
+import "../icon-registry-essential/svgs/iconSync.js";
+import "../icon-registry-essential/svgs/iconUnlock.js";
+import "../icon-registry-essential/svgs/iconUnsee.js";
+import "../icon-registry-essential/svgs/iconWand.js";
+import "../icon-registry-essential/svgs/iconWrong.js";
 import { LitElement, html, css } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { UUIToastNotificationEvent } from "./UUIToastNotificationEvent.js";
 import "../button/button.js";
 import "../icon/icon.js";
 import { UUITimer } from "../../internal/utils/Timer.js";
-import { iconRemove } from "../icon-registry-essential/svgs/iconRemove.js";
 import { UUITextStyles } from "../../styles/uui-text.styles.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -230,7 +262,7 @@ _UUIToastNotificationElement.styles = [
         display: block;
 
         box-sizing: border-box;
-        box-shadow: var(--uui-shadow-depth-1);
+        box-shadow: var(--uui-shadow-depth-3);
         background-color: var(--uui-color-surface);
         padding: var(--uui-size-layout-1);
         padding-right: var(--uui-size-layout-1);

package/dist/components/toast-notification/toast-notification.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast-notification.element.js","sources":["../../../src/components/toast-notification/toast-notification.element.ts"],"sourcesContent":["import { UUITimer } from '../../internal/utils/index.js';\nimport { UUITextStyles } from '../../styles/index.js';\nimport { iconRemove } from '../icon-registry-essential/svgs/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport { UUIToastNotificationEvent } from './UUIToastNotificationEvent.js';\nimport type { UUIInterfaceColor } from '../../internal/index.js';\n\nimport '../button/button.js';\nimport '../icon/icon.js';\n\n/**\n *  @element uui-toast-notification\n *  @fires {UUIToastNotificationEvent} opening - fires when the toast is starting to open\n *  @fires {UUIToastNotificationEvent} opened - fires when the toast is open after the open-animation\n *  @fires {UUIToastNotificationEvent} closing - fires when the toast is starting to close\n *  @fires {UUIToastNotificationEvent} closed - fires when the toast is closed\n *  @description - Component for displaying a toast notification, preferably used in toast-notification-container.\n *  @slot - slot for dialog layout/content\n */\nexport class UUIToastNotificationElement extends LitElement {\n  /**\n   * Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.\n   * @type {UUIInterfaceColor}\n   * @attr\n   * @default \"\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = '';\n\n  private _autoClose: number | null = null;\n  /**\n   * Set an auto-close timer.\n   * @type number\n   * @attr\n   * @default null\n   */\n  @property({ type: Number })\n  public get autoClose(): number | null {\n    return this._autoClose;\n  }\n  public set autoClose(value: number | null) {\n    this._autoClose = value;\n    if (value === null) {\n      this._timer?.destroy();\n      this._timer = null;\n    } else {\n      if (this._timer === null) {\n        this._timer = new UUITimer(this._onOpenTimerComplete, value);\n      } else {\n        this._timer.setDuration(value);\n      }\n      if (\n        this._pauseTimer === false &&\n        this.isOpen === true &&\n        this._animate === false\n      ) {\n        this._timer.start();\n      }\n    }\n  }\n\n  /**\n   * Pause the auto close timer.\n   */\n  public pauseAutoClose() {\n    this._pauseTimer = true;\n    if (this._timer !== null) {\n      this._timer.pause();\n    }\n  }\n  /**\n   * Resume the auto close timer.\n   */\n  public resumeAutoClose() {\n    this._pauseTimer = false;\n    if (\n      this._timer !== null &&\n      this.isOpen === true &&\n      this._animate === false\n    ) {\n      this._timer.restart();\n    }\n  }\n\n  private readonly _onOpenTimerComplete = () => {\n    if (this._open) {\n      this.open = false;\n    }\n  };\n\n  @query('#toast')\n  private readonly _toastEl!: HTMLElement;\n  private _timer: UUITimer | null = null;\n  private _pauseTimer: boolean = false;\n\n  protected isOpen = false;\n  private _open = false;\n\n  @state()\n  private _animate = false;\n  private _animationTimeout?: number;\n\n  /**\n   * define if this toast should open or close.\n   * @type boolean\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public get open() {\n    return this._open;\n  }\n  public set open(value: boolean) {\n    if (value === true) {\n      this._makeOpen();\n    } else {\n      this._makeClose();\n    }\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('keyup', (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        this.open = false;\n      }\n    });\n  }\n\n  private _getAnimationDuration(): number {\n    return (\n      Number.parseInt(\n        getComputedStyle(this).getPropertyValue(\n          '--uui-toast-notification-animation-duration',\n        ),\n        10,\n      ) || 480\n    );\n  }\n\n  private _requestAnimationUpdate = 0;\n  private _makeOpen() {\n    if (this._open === true) {\n      return;\n    }\n    this._open = true;\n    this.updateComplete.then(() => {\n      if (this._open !== true) {\n        return;\n      }\n      cancelAnimationFrame(this._requestAnimationUpdate);\n      this._requestAnimationUpdate = requestAnimationFrame(() => {\n        clearTimeout(this._animationTimeout as number);\n        this.isOpen = true;\n        this.setAttribute('is-open', '');\n\n        this.style.height = this._toastEl.getBoundingClientRect().height + 'px';\n        this._animate = true;\n\n        this.dispatchEvent(\n          new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENING),\n        );\n\n        this._animationTimeout = globalThis.setTimeout(() => {\n          if (this.isOpen === true) {\n            this.style.height = 'auto';\n            this._animate = false;\n            if (this._pauseTimer === false) {\n              this._timer?.start();\n            }\n\n            this.dispatchEvent(\n              new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENED),\n            );\n          }\n        }, this._getAnimationDuration());\n      });\n    });\n  }\n  private _makeClose() {\n    if (this._open === false) {\n      return;\n    }\n\n    const event = new UUIToastNotificationEvent(\n      UUIToastNotificationEvent.CLOSING,\n      { cancelable: true },\n    );\n    this.dispatchEvent(event);\n\n    if (event.defaultPrevented === true) {\n      return;\n    }\n\n    this._open = false;\n    this._timer?.pause();\n    cancelAnimationFrame(this._requestAnimationUpdate); // do cancel though isOpen wasn't set jet.\n    if (this.isOpen === true) {\n      this._requestAnimationUpdate = requestAnimationFrame(() => {\n        clearTimeout(this._animationTimeout as number);\n        this.isOpen = false;\n        this.removeAttribute('is-open');\n\n        this.style.height = this._toastEl.getBoundingClientRect().height + 'px';\n        this._animate = true;\n\n        requestAnimationFrame(() => {\n          // Dont overwrite the height instantly, but instead wait one frame to ensure animate is set before setting the goal of the animation.\n          this.style.height = '0';\n        });\n\n        this._animationTimeout = globalThis.setTimeout(() => {\n          if (this.isOpen === false) {\n            this._animate = false;\n\n            this.dispatchEvent(\n              new UUIToastNotificationEvent(UUIToastNotificationEvent.CLOSED),\n            );\n            this.remove();\n          }\n        }, this._getAnimationDuration());\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <div id=\"toast\" class=${this._animate ? 'animate' : ''}>\n        <div>\n          <div id=\"close\">\n            <uui-button\n              .label=${'close'}\n              .color=${this.color}\n              .look=${this.color ? 'primary' : 'default'}\n              @click=${() => (this.open = false)}>\n              <uui-icon\n                name=\"remove\"\n                .fallback=${iconRemove.strings[0]}></uui-icon>\n            </uui-button>\n          </div>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      :host {\n        --uui-toast-notification-margin: var(--uui-size-space-2);\n\n        position: relative;\n        display: block;\n        width: 100%;\n        max-width: 400px;\n        margin: 0 var(--uui-toast-notification-margin);\n        box-sizing: border-box;\n\n        height: 0;\n        pointer-events: none;\n\n        transition: height\n          var(--uui-toast-notification-animation-duration, 480ms) ease-in-out;\n      }\n      :host([is-open]) {\n        pointer-events: all;\n        transition-timing-function: cubic-bezier(\n          0.19,\n          1,\n          0.22,\n          1\n        ); /* easeOutExpo */\n      }\n\n      #toast {\n        position: relative;\n        display: block;\n        padding: calc(var(--uui-toast-notification-margin) * 0.5) 0;\n        width: 100%;\n        max-width: 400px;\n      }\n      #toast.animate {\n        position: absolute;\n      }\n\n      #toast > div {\n        position: relative;\n        display: block;\n\n        box-sizing: border-box;\n        box-shadow: var(--uui-shadow-depth-1);\n        background-color: var(--uui-color-surface);\n        padding: var(--uui-size-layout-1);\n        padding-right: var(--uui-size-layout-1);\n        padding-left: var(--uui-size-layout-3);\n        border-radius: var(--uui-border-radius-3);\n\n        opacity: 0;\n        transition: opacity\n          var(--uui-toast-notification-animation-duration, 480ms);\n      }\n      :host([is-open]) #toast > div {\n        opacity: 1;\n      }\n\n      #close {\n        float: right;\n        margin-top: -6px;\n        margin-left: var(--uui-size-space-1);\n        margin-bottom: -4px;\n      }\n\n      #close > uui-button {\n        --uui-button-border-radius: 50px 50px 50px 50px;\n        --uui-button-padding-left-factor: 1.5;\n        --uui-button-padding-right-factor: 1.5;\n      }\n\n      :host #toast > div {\n        background-color: var(--uui-color-surface);\n        color: var(--uui-color-text);\n        border-color: var(--uui-color-surface);\n      }\n      :host([color='default']) #toast > div {\n        background-color: var(--uui-color-default);\n        color: var(--uui-color-default-contrast);\n        border-color: var(--uui-color-default-standalone);\n      }\n      :host([color='positive']) #toast > div {\n        background-color: var(--uui-color-positive);\n        color: var(--uui-color-positive-contrast);\n        border-color: var(--uui-color-positive-standalone);\n      }\n      :host([color='warning']) #toast > div {\n        background-color: var(--uui-color-warning);\n        color: var(--uui-color-warning-contrast);\n        border-color: var(--uui-color-warning-standalone);\n      }\n      :host([color='danger']) #toast > div {\n        background-color: var(--uui-color-danger);\n        color: var(--uui-color-danger-contrast);\n        border-color: var(--uui-color-danger-standalone);\n      }\n      :host([color='invalid']) #toast > div {\n        background-color: var(--uui-color-invalid);\n        color: var(--uui-color-invalid-contrast);\n        border-color: var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"toast-notification.element.js","sources":["../../../src/components/toast-notification/toast-notification.element.ts"],"sourcesContent":["import { UUITimer } from '../../internal/utils/index.js';\nimport { UUITextStyles } from '../../styles/index.js';\nimport { iconRemove } from '../icon-registry-essential/svgs/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport { UUIToastNotificationEvent } from './UUIToastNotificationEvent.js';\nimport type { UUIInterfaceColor } from '../../internal/index.js';\n\nimport '../button/button.js';\nimport '../icon/icon.js';\n\n/**\n *  @element uui-toast-notification\n *  @fires {UUIToastNotificationEvent} opening - fires when the toast is starting to open\n *  @fires {UUIToastNotificationEvent} opened - fires when the toast is open after the open-animation\n *  @fires {UUIToastNotificationEvent} closing - fires when the toast is starting to close\n *  @fires {UUIToastNotificationEvent} closed - fires when the toast is closed\n *  @description - Component for displaying a toast notification, preferably used in toast-notification-container.\n *  @slot - slot for dialog layout/content\n */\nexport class UUIToastNotificationElement extends LitElement {\n  /**\n   * Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.\n   * @type {UUIInterfaceColor}\n   * @attr\n   * @default \"\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = '';\n\n  private _autoClose: number | null = null;\n  /**\n   * Set an auto-close timer.\n   * @type number\n   * @attr\n   * @default null\n   */\n  @property({ type: Number })\n  public get autoClose(): number | null {\n    return this._autoClose;\n  }\n  public set autoClose(value: number | null) {\n    this._autoClose = value;\n    if (value === null) {\n      this._timer?.destroy();\n      this._timer = null;\n    } else {\n      if (this._timer === null) {\n        this._timer = new UUITimer(this._onOpenTimerComplete, value);\n      } else {\n        this._timer.setDuration(value);\n      }\n      if (\n        this._pauseTimer === false &&\n        this.isOpen === true &&\n        this._animate === false\n      ) {\n        this._timer.start();\n      }\n    }\n  }\n\n  /**\n   * Pause the auto close timer.\n   */\n  public pauseAutoClose() {\n    this._pauseTimer = true;\n    if (this._timer !== null) {\n      this._timer.pause();\n    }\n  }\n  /**\n   * Resume the auto close timer.\n   */\n  public resumeAutoClose() {\n    this._pauseTimer = false;\n    if (\n      this._timer !== null &&\n      this.isOpen === true &&\n      this._animate === false\n    ) {\n      this._timer.restart();\n    }\n  }\n\n  private readonly _onOpenTimerComplete = () => {\n    if (this._open) {\n      this.open = false;\n    }\n  };\n\n  @query('#toast')\n  private readonly _toastEl!: HTMLElement;\n  private _timer: UUITimer | null = null;\n  private _pauseTimer: boolean = false;\n\n  protected isOpen = false;\n  private _open = false;\n\n  @state()\n  private _animate = false;\n  private _animationTimeout?: number;\n\n  /**\n   * define if this toast should open or close.\n   * @type boolean\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public get open() {\n    return this._open;\n  }\n  public set open(value: boolean) {\n    if (value === true) {\n      this._makeOpen();\n    } else {\n      this._makeClose();\n    }\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('keyup', (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        this.open = false;\n      }\n    });\n  }\n\n  private _getAnimationDuration(): number {\n    return (\n      Number.parseInt(\n        getComputedStyle(this).getPropertyValue(\n          '--uui-toast-notification-animation-duration',\n        ),\n        10,\n      ) || 480\n    );\n  }\n\n  private _requestAnimationUpdate = 0;\n  private _makeOpen() {\n    if (this._open === true) {\n      return;\n    }\n    this._open = true;\n    this.updateComplete.then(() => {\n      if (this._open !== true) {\n        return;\n      }\n      cancelAnimationFrame(this._requestAnimationUpdate);\n      this._requestAnimationUpdate = requestAnimationFrame(() => {\n        clearTimeout(this._animationTimeout as number);\n        this.isOpen = true;\n        this.setAttribute('is-open', '');\n\n        this.style.height = this._toastEl.getBoundingClientRect().height + 'px';\n        this._animate = true;\n\n        this.dispatchEvent(\n          new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENING),\n        );\n\n        this._animationTimeout = globalThis.setTimeout(() => {\n          if (this.isOpen === true) {\n            this.style.height = 'auto';\n            this._animate = false;\n            if (this._pauseTimer === false) {\n              this._timer?.start();\n            }\n\n            this.dispatchEvent(\n              new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENED),\n            );\n          }\n        }, this._getAnimationDuration());\n      });\n    });\n  }\n  private _makeClose() {\n    if (this._open === false) {\n      return;\n    }\n\n    const event = new UUIToastNotificationEvent(\n      UUIToastNotificationEvent.CLOSING,\n      { cancelable: true },\n    );\n    this.dispatchEvent(event);\n\n    if (event.defaultPrevented === true) {\n      return;\n    }\n\n    this._open = false;\n    this._timer?.pause();\n    cancelAnimationFrame(this._requestAnimationUpdate); // do cancel though isOpen wasn't set jet.\n    if (this.isOpen === true) {\n      this._requestAnimationUpdate = requestAnimationFrame(() => {\n        clearTimeout(this._animationTimeout as number);\n        this.isOpen = false;\n        this.removeAttribute('is-open');\n\n        this.style.height = this._toastEl.getBoundingClientRect().height + 'px';\n        this._animate = true;\n\n        requestAnimationFrame(() => {\n          // Dont overwrite the height instantly, but instead wait one frame to ensure animate is set before setting the goal of the animation.\n          this.style.height = '0';\n        });\n\n        this._animationTimeout = globalThis.setTimeout(() => {\n          if (this.isOpen === false) {\n            this._animate = false;\n\n            this.dispatchEvent(\n              new UUIToastNotificationEvent(UUIToastNotificationEvent.CLOSED),\n            );\n            this.remove();\n          }\n        }, this._getAnimationDuration());\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <div id=\"toast\" class=${this._animate ? 'animate' : ''}>\n        <div>\n          <div id=\"close\">\n            <uui-button\n              .label=${'close'}\n              .color=${this.color}\n              .look=${this.color ? 'primary' : 'default'}\n              @click=${() => (this.open = false)}>\n              <uui-icon\n                name=\"remove\"\n                .fallback=${iconRemove.strings[0]}></uui-icon>\n            </uui-button>\n          </div>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      :host {\n        --uui-toast-notification-margin: var(--uui-size-space-2);\n\n        position: relative;\n        display: block;\n        width: 100%;\n        max-width: 400px;\n        margin: 0 var(--uui-toast-notification-margin);\n        box-sizing: border-box;\n\n        height: 0;\n        pointer-events: none;\n\n        transition: height\n          var(--uui-toast-notification-animation-duration, 480ms) ease-in-out;\n      }\n      :host([is-open]) {\n        pointer-events: all;\n        transition-timing-function: cubic-bezier(\n          0.19,\n          1,\n          0.22,\n          1\n        ); /* easeOutExpo */\n      }\n\n      #toast {\n        position: relative;\n        display: block;\n        padding: calc(var(--uui-toast-notification-margin) * 0.5) 0;\n        width: 100%;\n        max-width: 400px;\n      }\n      #toast.animate {\n        position: absolute;\n      }\n\n      #toast > div {\n        position: relative;\n        display: block;\n\n        box-sizing: border-box;\n        box-shadow: var(--uui-shadow-depth-3);\n        background-color: var(--uui-color-surface);\n        padding: var(--uui-size-layout-1);\n        padding-right: var(--uui-size-layout-1);\n        padding-left: var(--uui-size-layout-3);\n        border-radius: var(--uui-border-radius-3);\n\n        opacity: 0;\n        transition: opacity\n          var(--uui-toast-notification-animation-duration, 480ms);\n      }\n      :host([is-open]) #toast > div {\n        opacity: 1;\n      }\n\n      #close {\n        float: right;\n        margin-top: -6px;\n        margin-left: var(--uui-size-space-1);\n        margin-bottom: -4px;\n      }\n\n      #close > uui-button {\n        --uui-button-border-radius: 50px 50px 50px 50px;\n        --uui-button-padding-left-factor: 1.5;\n        --uui-button-padding-right-factor: 1.5;\n      }\n\n      :host #toast > div {\n        background-color: var(--uui-color-surface);\n        color: var(--uui-color-text);\n        border-color: var(--uui-color-surface);\n      }\n      :host([color='default']) #toast > div {\n        background-color: var(--uui-color-default);\n        color: var(--uui-color-default-contrast);\n        border-color: var(--uui-color-default-standalone);\n      }\n      :host([color='positive']) #toast > div {\n        background-color: var(--uui-color-positive);\n        color: var(--uui-color-positive-contrast);\n        border-color: var(--uui-color-positive-standalone);\n      }\n      :host([color='warning']) #toast > div {\n        background-color: var(--uui-color-warning);\n        color: var(--uui-color-warning-contrast);\n        border-color: var(--uui-color-warning-standalone);\n      }\n      :host([color='danger']) #toast > div {\n        background-color: var(--uui-color-danger);\n        color: var(--uui-color-danger-contrast);\n        border-color: var(--uui-color-danger-standalone);\n      }\n      :host([color='invalid']) #toast > div {\n        background-color: var(--uui-color-invalid);\n        color: var(--uui-color-invalid-contrast);\n        border-color: var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}