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

package/dist/components/ref-node-package/ref-node-package.element.d.ts

@@ -0,0 +1,27 @@
+import { UUIRefNodeElement } from '../ref-node/ref-node.js';
+/**
+ *  @element uui-ref-node-package
+ *  @fires {UUIRefEvent} open - fires when the ref title is clicked
+ *  @fires {UUIRefEvent} selected - fires when the ref is selected
+ *  @fires {UUIRefEvent} deselected - fires when the ref is deselected
+ *  @description - Component for displaying a reference to a Package node.
+ */
+export declare class UUIRefNodePackageElement extends UUIRefNodeElement {
+    protected fallbackIcon: string;
+    /**
+     * Package version
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    version: string;
+    /**
+     * Package author
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    author: string;
+    protected renderDetail(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/ref-node-package/ref-node-package.element.js

@@ -0,0 +1,48 @@
+import "../ref-node/ref-node.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { UUIRefNodeElement } from "../ref-node/ref-node.element.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _UUIRefNodePackageElement = class _UUIRefNodePackageElement extends UUIRefNodeElement {
+  constructor() {
+    super(...arguments);
+    this.fallbackIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M161.08 106.29l-70.073 40.452 165.498 95.545 70.076-40.453L161.08 106.29zm259.851 41.077L255.435 51.815l-63.578 36.709 165.499 95.542 63.575-36.699zm-150.11 122.19V459.43l164.966-95.238V174.32l-164.966 95.237zM75.082 364.191l164.959 95.234V268.32L75.082 173.09v191.101z"></path></svg>';
+    this.version = "";
+    this.author = "";
+  }
+  renderDetail() {
+    const details = [];
+    if (this.detail !== "") {
+      details.push(this.detail);
+    }
+    if (this.version !== "") {
+      details.push(this.version);
+    }
+    if (this.author !== "") {
+      details.push(this.author);
+    }
+    return html`<small id="detail"
+      >${details.join(" | ")}<slot name="detail"></slot
+    ></small>`;
+  }
+};
+_UUIRefNodePackageElement.styles = [...UUIRefNodeElement.styles];
+let UUIRefNodePackageElement = _UUIRefNodePackageElement;
+__decorateClass([
+  property({ type: String })
+], UUIRefNodePackageElement.prototype, "version");
+__decorateClass([
+  property({ type: String })
+], UUIRefNodePackageElement.prototype, "author");
+export {
+  UUIRefNodePackageElement
+};
+//# sourceMappingURL=ref-node-package.element.js.map

package/dist/components/ref-node-package/ref-node-package.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ref-node-package.element.js","sources":["../../../src/components/ref-node-package/ref-node-package.element.ts"],"sourcesContent":["import { UUIRefNodeElement } from '../ref-node/ref-node.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n *  @element uui-ref-node-package\n *  @fires {UUIRefEvent} open - fires when the ref title is clicked\n *  @fires {UUIRefEvent} selected - fires when the ref is selected\n *  @fires {UUIRefEvent} deselected - fires when the ref is deselected\n *  @description - Component for displaying a reference to a Package node.\n */\n\nexport class UUIRefNodePackageElement extends UUIRefNodeElement {\n  protected fallbackIcon =\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M161.08 106.29l-70.073 40.452 165.498 95.545 70.076-40.453L161.08 106.29zm259.851 41.077L255.435 51.815l-63.578 36.709 165.499 95.542 63.575-36.699zm-150.11 122.19V459.43l164.966-95.238V174.32l-164.966 95.237zM75.082 364.191l164.959 95.234V268.32L75.082 173.09v191.101z\"></path></svg>';\n\n  /**\n   * Package version\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  version = '';\n\n  /**\n   * Package author\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  author = '';\n\n  protected renderDetail() {\n    const details: string[] = [];\n    if (this.detail !== '') {\n      details.push(this.detail);\n    }\n    if (this.version !== '') {\n      details.push(this.version);\n    }\n    if (this.author !== '') {\n      details.push(this.author);\n    }\n    return html`<small id=\"detail\"\n      >${details.join(' | ')}<slot name=\"detail\"></slot\n    ></small>`;\n  }\n\n  static override readonly styles = [...UUIRefNodeElement.styles];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYO,MAAM,4BAAN,MAAM,kCAAiC,kBAAkB;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAU,eACR;AASF,SAAA,UAAU;AASV,SAAA,SAAS;AAAA,EAAA;AAAA,EAEC,eAAe;AACvB,UAAM,UAAoB,CAAA;AAC1B,QAAI,KAAK,WAAW,IAAI;AACtB,cAAQ,KAAK,KAAK,MAAM;AAAA,IAC1B;AACA,QAAI,KAAK,YAAY,IAAI;AACvB,cAAQ,KAAK,KAAK,OAAO;AAAA,IAC3B;AACA,QAAI,KAAK,WAAW,IAAI;AACtB,cAAQ,KAAK,KAAK,MAAM;AAAA,IAC1B;AACA,WAAO;AAAA,SACF,QAAQ,KAAK,KAAK,CAAC;AAAA;AAAA,EAE1B;AAGF;AADE,0BAAyB,SAAS,CAAC,GAAG,kBAAkB,MAAM;AAtCzD,IAAM,2BAAN;AAWL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVf,yBAWX,WAAA,SAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnBf,yBAoBX,WAAA,QAAA;"}

package/dist/components/ref-node-package/ref-node-package.js

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

package/dist/components/ref-node-package/ref-node-package.js.map

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

package/dist/components/ref-node-user/ref-node-user.d.ts

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

package/dist/components/ref-node-user/ref-node-user.element.d.ts

@@ -0,0 +1,20 @@
+import { UUIRefNodeElement } from '../ref-node/ref-node.js';
+/**
+ *  @element uui-ref-node-user
+ *  @fires {UUIRefEvent} open - fires when the ref title is clicked
+ *  @fires {UUIRefEvent} selected - fires when the ref is selected
+ *  @fires {UUIRefEvent} deselected - fires when the ref is deselected
+ *  @description - Component for displaying a reference to a user node.
+ */
+export declare class UUIRefNodeUserElement extends UUIRefNodeElement {
+    protected fallbackIcon: string;
+    /**
+     * Group name
+     * @type {string}
+     * @attr
+     * @default ''
+     */
+    groupName: string;
+    protected renderDetail(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/ref-node-user/ref-node-user.element.js

@@ -0,0 +1,41 @@
+import "../ref-node/ref-node.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { UUIRefNodeElement } from "../ref-node/ref-node.element.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _UUIRefNodeUserElement = class _UUIRefNodeUserElement extends UUIRefNodeElement {
+  constructor() {
+    super(...arguments);
+    this.fallbackIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M331.135 98.375c3.677 14.798 4.045 16.031 3.702 31.225-.138 5.855-3.5 32.936-2.586 41.242.751 6.851 2.46 7.395 5.162 13.041 4.705 9.824 3.13 23.376 1.325 33.282-.988 5.42-3.076 13.136-6.248 17.561-3.497 4.876-10.498 4.913-13.592 10.602-4.459 8.195-1.941 19.692-4.752 28.54-3.193 10.033-11.325 10.738-11.938 23.867 3.986.562 7.962 1.134 11.938 1.703 3.99 8.484 11.297 25.552 18.759 30.688 6.25 1.705 12.505 3.411 18.752 5.113 21.907 8.982 46.251 19.732 68.204 28.987 19.991 8.434 43.927 11.439 51.151 32.396 0 14.229 1.343 47.849.976 66.497H36.514c-.367-18.648.974-52.268.974-66.497 7.226-20.957 31.16-23.963 51.151-32.396 21.953-9.255 46.297-20.005 68.201-28.987 6.25-1.702 12.506-3.408 18.754-5.113 7.461-5.136 14.77-22.203 18.76-30.688l8.877-2.158c-2.017-11.206-8.954-12.078-11.845-20.01a91882.59 91882.59 0 00-3.408-35.806c.055.563-8.163-1.497-9.238-2.171-11.58-7.256-11.816-36.723-12.931-48.978-.508-5.603 7.283-10.193 5.118-20.465-12.69-60.138 5.486-88.282 34.229-97.614 19.95-8.083 57.198-23.074 91.941-1.703l8.621 7.991 13.952 2.405c7 4.041 11.465 17.446 11.465 17.446z"></path></svg>';
+    this.groupName = "";
+  }
+  renderDetail() {
+    const details = [];
+    if (this.detail !== "") {
+      details.push(this.detail);
+    }
+    if (this.groupName !== "") {
+      details.push(this.groupName);
+    }
+    return html`<small id="detail"
+      >${details.join(" | ")}<slot name="detail"></slot
+    ></small>`;
+  }
+};
+_UUIRefNodeUserElement.styles = [...UUIRefNodeElement.styles];
+let UUIRefNodeUserElement = _UUIRefNodeUserElement;
+__decorateClass([
+  property({ type: String, attribute: "group-name" })
+], UUIRefNodeUserElement.prototype, "groupName");
+export {
+  UUIRefNodeUserElement
+};
+//# sourceMappingURL=ref-node-user.element.js.map

package/dist/components/ref-node-user/ref-node-user.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ref-node-user.element.js","sources":["../../../src/components/ref-node-user/ref-node-user.element.ts"],"sourcesContent":["import { UUIRefNodeElement } from '../ref-node/ref-node.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n *  @element uui-ref-node-user\n *  @fires {UUIRefEvent} open - fires when the ref title is clicked\n *  @fires {UUIRefEvent} selected - fires when the ref is selected\n *  @fires {UUIRefEvent} deselected - fires when the ref is deselected\n *  @description - Component for displaying a reference to a user node.\n */\n\nexport class UUIRefNodeUserElement extends UUIRefNodeElement {\n  protected fallbackIcon =\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M331.135 98.375c3.677 14.798 4.045 16.031 3.702 31.225-.138 5.855-3.5 32.936-2.586 41.242.751 6.851 2.46 7.395 5.162 13.041 4.705 9.824 3.13 23.376 1.325 33.282-.988 5.42-3.076 13.136-6.248 17.561-3.497 4.876-10.498 4.913-13.592 10.602-4.459 8.195-1.941 19.692-4.752 28.54-3.193 10.033-11.325 10.738-11.938 23.867 3.986.562 7.962 1.134 11.938 1.703 3.99 8.484 11.297 25.552 18.759 30.688 6.25 1.705 12.505 3.411 18.752 5.113 21.907 8.982 46.251 19.732 68.204 28.987 19.991 8.434 43.927 11.439 51.151 32.396 0 14.229 1.343 47.849.976 66.497H36.514c-.367-18.648.974-52.268.974-66.497 7.226-20.957 31.16-23.963 51.151-32.396 21.953-9.255 46.297-20.005 68.201-28.987 6.25-1.702 12.506-3.408 18.754-5.113 7.461-5.136 14.77-22.203 18.76-30.688l8.877-2.158c-2.017-11.206-8.954-12.078-11.845-20.01a91882.59 91882.59 0 00-3.408-35.806c.055.563-8.163-1.497-9.238-2.171-11.58-7.256-11.816-36.723-12.931-48.978-.508-5.603 7.283-10.193 5.118-20.465-12.69-60.138 5.486-88.282 34.229-97.614 19.95-8.083 57.198-23.074 91.941-1.703l8.621 7.991 13.952 2.405c7 4.041 11.465 17.446 11.465 17.446z\"></path></svg>';\n\n  /**\n   * Group name\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String, attribute: 'group-name' })\n  groupName = '';\n\n  protected renderDetail() {\n    const details: string[] = [];\n    if (this.detail !== '') {\n      details.push(this.detail);\n    }\n    if (this.groupName !== '') {\n      details.push(this.groupName);\n    }\n    return html`<small id=\"detail\"\n      >${details.join(' | ')}<slot name=\"detail\"></slot\n    ></small>`;\n  }\n\n  static override readonly styles = [...UUIRefNodeElement.styles];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAYO,MAAM,yBAAN,MAAM,+BAA8B,kBAAkB;AAAA,EAAtD,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAU,eACR;AASF,SAAA,YAAY;AAAA,EAAA;AAAA,EAEF,eAAe;AACvB,UAAM,UAAoB,CAAA;AAC1B,QAAI,KAAK,WAAW,IAAI;AACtB,cAAQ,KAAK,KAAK,MAAM;AAAA,IAC1B;AACA,QAAI,KAAK,cAAc,IAAI;AACzB,cAAQ,KAAK,KAAK,SAAS;AAAA,IAC7B;AACA,WAAO;AAAA,SACF,QAAQ,KAAK,KAAK,CAAC;AAAA;AAAA,EAE1B;AAGF;AADE,uBAAyB,SAAS,CAAC,GAAG,kBAAkB,MAAM;AA1BzD,IAAM,wBAAN;AAWL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAVxC,sBAWX,WAAA,WAAA;"}

package/dist/components/ref-node-user/ref-node-user.js

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

package/dist/components/ref-node-user/ref-node-user.js.map

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

package/dist/components/responsive-container/responsive-container.d.ts

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

package/dist/components/responsive-container/responsive-container.element.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import '../button/button.js';
+import '../popover-container/popover-container.js';
+import '../symbol-more/symbol-more.js';
+/**
+ * A responsive container that collapses overflowing children into a dropdown.
+ *
+ * @element uui-responsive-container
+ * @slot - Default slot for child elements (buttons, etc.)
+ * @cssprop --uui-responsive-container-gap - Gap between items (default: 8px)
+ */
+export declare class UUIResponsiveContainerElement extends LitElement {
+    #private;
+    private readonly _moreButtonElement;
+    private readonly _popoverContainerElement;
+    private readonly _mainElement;
+    /**
+     * Controls which side items collapse from.
+     * - "end": Items collapse from the right, more button appears on right (default)
+     * - "start": Items collapse from the left, more button appears on left
+     * @attr collapse
+     * @default "end"
+     */
+    collapse: 'start' | 'end';
+    private readonly _slottedNodes?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,294 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+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;
+import { LitElement, html, css } from "lit";
+import { query, property, queryAssignedElements } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+import "../button/button.js";
+import "../popover-container/popover-container.js";
+import "../symbol-more/symbol-more.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 _UUIResponsiveContainerElement = class _UUIResponsiveContainerElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _UUIResponsiveContainerElement_instances);
+    __privateAdd(this, _childElements);
+    __privateAdd(this, _hiddenElements);
+    __privateAdd(this, _hiddenElementsMap);
+    __privateAdd(this, _visibilityBreakpoints);
+    __privateAdd(this, _resizeObserver);
+    __privateAdd(this, _childResizeObservers);
+    __privateAdd(this, _breakPointCalculationInProgress);
+    __privateAdd(this, _isConnected);
+    __privateAdd(this, _onItemClicked);
+    this.collapse = "end";
+    __privateSet(this, _childElements, []);
+    __privateSet(this, _hiddenElements, []);
+    __privateSet(this, _hiddenElementsMap, /* @__PURE__ */ new Map());
+    __privateSet(this, _visibilityBreakpoints, []);
+    __privateSet(this, _resizeObserver, new ResizeObserver(__privateMethod(this, _UUIResponsiveContainerElement_instances, onResize_fn).bind(this)));
+    __privateSet(this, _childResizeObservers, []);
+    __privateSet(this, _breakPointCalculationInProgress, false);
+    __privateSet(this, _isConnected, false);
+    __privateSet(this, _onItemClicked, (e) => {
+      const clickedElement = e.currentTarget;
+      const originalElement = __privateGet(this, _hiddenElementsMap).get(clickedElement);
+      if (originalElement) {
+        this._popoverContainerElement?.hidePopover();
+        originalElement.click();
+      }
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateSet(this, _isConnected, true);
+    __privateMethod(this, _UUIResponsiveContainerElement_instances, initialize_fn).call(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateSet(this, _isConnected, false);
+    __privateGet(this, _resizeObserver).disconnect();
+    __privateMethod(this, _UUIResponsiveContainerElement_instances, cleanup_fn).call(this);
+  }
+  render() {
+    const moreButton = html`
+      <uui-button
+        popovertarget="popover-container"
+        style="display: none"
+        id="more-button"
+        label="More"
+        compact>
+        <slot name="trigger-content">
+          <uui-symbol-more></uui-symbol-more>
+        </slot>
+      </uui-button>
+    `;
+    return html`
+      <div id="main">
+        ${this.collapse === "start" ? moreButton : ""}
+        <div id="items-container">
+          <slot @slotchange=${__privateMethod(this, _UUIResponsiveContainerElement_instances, onSlotChange_fn)}></slot>
+        </div>
+        ${this.collapse === "end" ? moreButton : ""}
+      </div>
+      <uui-popover-container
+        id="popover-container"
+        popover
+        placement=${this.collapse === "start" ? "bottom-start" : "bottom-end"}>
+        <div id="dropdown-container">
+          ${repeat(__privateGet(this, _hiddenElements), (el) => html`${el}`)}
+        </div>
+      </uui-popover-container>
+    `;
+  }
+};
+_childElements = new WeakMap();
+_hiddenElements = new WeakMap();
+_hiddenElementsMap = new WeakMap();
+_visibilityBreakpoints = new WeakMap();
+_resizeObserver = new WeakMap();
+_childResizeObservers = new WeakMap();
+_breakPointCalculationInProgress = new WeakMap();
+_isConnected = new WeakMap();
+_UUIResponsiveContainerElement_instances = new WeakSet();
+initialize_fn = async function() {
+  await this.updateComplete;
+  if (!__privateGet(this, _isConnected)) return;
+  __privateGet(this, _resizeObserver).observe(this._mainElement);
+  requestAnimationFrame(() => {
+    if (!__privateGet(this, _isConnected)) return;
+    __privateMethod(this, _UUIResponsiveContainerElement_instances, onSlotChange_fn).call(this);
+  });
+};
+// This runs when the container size changes
+onResize_fn = function(entries) {
+  if (!__privateGet(this, _isConnected)) return;
+  const newWidth = entries[0].contentBoxSize[0].inlineSize;
+  __privateMethod(this, _UUIResponsiveContainerElement_instances, updateCollapsibleItems_fn).call(this, newWidth);
+};
+// This runs when children are added/removed
+onSlotChange_fn = function() {
+  if (!__privateGet(this, _isConnected)) return;
+  __privateMethod(this, _UUIResponsiveContainerElement_instances, cleanup_fn).call(this);
+  __privateSet(this, _childElements, this._slottedNodes ? [...this._slottedNodes] : []);
+  __privateGet(this, _childElements).forEach((el) => {
+    const observer = new ResizeObserver(
+      __privateMethod(this, _UUIResponsiveContainerElement_instances, calculateBreakPoints_fn).bind(this)
+    );
+    observer.observe(el);
+    __privateGet(this, _childResizeObservers).push(observer);
+  });
+  __privateMethod(this, _UUIResponsiveContainerElement_instances, calculateBreakPoints_fn).call(this);
+};
+cleanup_fn = function() {
+  __privateGet(this, _childResizeObservers).forEach((observer) => observer.disconnect());
+  __privateSet(this, _childResizeObservers, []);
+  __privateSet(this, _visibilityBreakpoints, []);
+  __privateGet(this, _hiddenElements).forEach((el) => {
+    el.removeEventListener("click", __privateGet(this, _onItemClicked));
+  });
+  __privateSet(this, _hiddenElements, []);
+  __privateGet(this, _hiddenElementsMap).clear();
+};
+calculateBreakPoints_fn = async function() {
+  if (!__privateGet(this, _isConnected)) return;
+  if (__privateGet(this, _breakPointCalculationInProgress)) return;
+  __privateSet(this, _breakPointCalculationInProgress, true);
+  await this.updateComplete;
+  const gapCSSVar = Number.parseFloat(
+    getComputedStyle(this).getPropertyValue("--uui-responsive-container-gap")
+  );
+  const gap = Number.isNaN(gapCSSVar) ? 8 : gapCSSVar;
+  let totalWidth = 0;
+  for (let i = 0; i < __privateGet(this, _childElements).length; i++) {
+    __privateGet(this, _childElements)[i].style.display = "";
+    totalWidth += __privateGet(this, _childElements)[i].offsetWidth;
+    __privateGet(this, _visibilityBreakpoints)[i] = totalWidth;
+    totalWidth += gap;
+  }
+  const tolerance = 2;
+  this._mainElement.style.width = totalWidth - gap + tolerance + "px";
+  __privateMethod(this, _UUIResponsiveContainerElement_instances, updateCollapsibleItems_fn).call(this, this._mainElement.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, _hiddenElementsMap).clear();
+  if (this.collapse === "end") {
+    __privateMethod(this, _UUIResponsiveContainerElement_instances, collapseFromEnd_fn).call(this, containerWidth, availableWidth);
+  } else {
+    __privateMethod(this, _UUIResponsiveContainerElement_instances, collapseFromStart_fn).call(this, containerWidth, availableWidth);
+  }
+  if (__privateGet(this, _hiddenElements).length === 0) {
+    this._moreButtonElement.style.display = "none";
+    this._popoverContainerElement?.hidePopover();
+  } else {
+    this._moreButtonElement.style.display = "";
+  }
+  this.requestUpdate();
+};
+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);
+};
+collapseFromEnd_fn = function(containerWidth, availableWidth) {
+  const len = __privateGet(this, _visibilityBreakpoints).length;
+  for (let i = 0; i < len; i++) {
+    const breakpoint = __privateGet(this, _visibilityBreakpoints)[i];
+    const element = __privateGet(this, _childElements)[i];
+    const widthToCheck = i === len - 1 ? containerWidth : availableWidth;
+    if (breakpoint <= widthToCheck) {
+      element.style.display = "";
+    } else {
+      __privateMethod(this, _UUIResponsiveContainerElement_instances, hideElement_fn).call(this, element);
+    }
+  }
+};
+collapseFromStart_fn = function(containerWidth, availableWidth) {
+  const len = __privateGet(this, _visibilityBreakpoints).length;
+  const totalWidth = __privateGet(this, _visibilityBreakpoints)[len - 1] || 0;
+  for (let i = 0; i < len; i++) {
+    const element = __privateGet(this, _childElements)[i];
+    const widthFromEnd = totalWidth - (i > 0 ? __privateGet(this, _visibilityBreakpoints)[i - 1] : 0);
+    const isFirstPotentiallyVisible = i === 0 || __privateGet(this, _childElements)[i - 1].style.display === "none";
+    const widthToCheck = isFirstPotentiallyVisible && __privateGet(this, _hiddenElements).length === 0 ? containerWidth : availableWidth;
+    if (widthFromEnd <= widthToCheck) {
+      element.style.display = "";
+    } else {
+      __privateMethod(this, _UUIResponsiveContainerElement_instances, hideElement_fn).call(this, element);
+    }
+  }
+};
+_onItemClicked = new WeakMap();
+_UUIResponsiveContainerElement.styles = [
+  css`
+      :host {
+        display: flex;
+        min-width: 0;
+      }
+
+      #main {
+        display: flex;
+        overflow: hidden;
+        align-items: center;
+      }
+
+      #items-container {
+        display: flex;
+        gap: var(--uui-responsive-container-gap, var(--uui-size-3));
+        overflow: hidden;
+        align-items: center;
+      }
+
+      #more-button {
+        --uui-button-background-color: transparent;
+        --uui-button-background-color-hover: var(--uui-color-surface-alt);
+        flex-shrink: 0;
+      }
+
+      :host([collapse='end']) #more-button,
+      :host(:not([collapse])) #more-button {
+        margin-left: var(--uui-responsive-container-gap, var(--uui-size-3));
+      }
+
+      :host([collapse='start']) #more-button {
+        margin-right: var(--uui-responsive-container-gap, var(--uui-size-3));
+      }
+
+      #dropdown-container {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--uui-color-surface);
+        border-radius: var(--uui-border-radius);
+        box-shadow: var(--uui-shadow-depth-3);
+        overflow: hidden;
+        padding: var(--uui-size-space-2);
+        gap: var(--uui-size-space-1);
+      }
+    `
+];
+let UUIResponsiveContainerElement = _UUIResponsiveContainerElement;
+__decorateClass([
+  query("#more-button")
+], UUIResponsiveContainerElement.prototype, "_moreButtonElement");
+__decorateClass([
+  query("#popover-container")
+], UUIResponsiveContainerElement.prototype, "_popoverContainerElement");
+__decorateClass([
+  query("#main")
+], UUIResponsiveContainerElement.prototype, "_mainElement");
+__decorateClass([
+  property({ type: String, reflect: true })
+], UUIResponsiveContainerElement.prototype, "collapse");
+__decorateClass([
+  queryAssignedElements({ flatten: true })
+], UUIResponsiveContainerElement.prototype, "_slottedNodes");
+export {
+  UUIResponsiveContainerElement
+};
+//# sourceMappingURL=responsive-container.element.js.map

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

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

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

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

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

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

package/dist/components/scroll-container/scroll-container.d.ts

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

package/dist/components/scroll-container/scroll-container.element.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+/**
+ *  @element uui-scroll-container
+ *  @slot - for content
+ *  @attribute enforce-scroll - forces the scrollbar to appear
+ *  @description - Component for displaying a larger amount of .
+ *
+ */
+export declare class UUIScrollContainerElement extends LitElement {
+    /**
+     * @type {boolean}
+     * @attr forces the scrollbar to appear
+     */
+    enforceScroll: boolean;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}