@umbraco-ui/uui 2.0.0 → 2.0.1

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

@@ -1,73 +1,171 @@
-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, _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";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.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, _clonedElements);
-    __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, _clonedElements, []);
-    __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`
+import { LitElement, css, html } from "lit";
+import { property, query, queryAssignedElements } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/components/responsive-container/responsive-container.element.ts
+/**
+* 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)
+*/
+var UUIResponsiveContainerElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.collapse = "end";
+		this.#childElements = [];
+		this.#hiddenElements = [];
+		this.#clonedElements = [];
+		this.#hiddenElementsMap = /* @__PURE__ */ new Map();
+		this.#visibilityBreakpoints = [];
+		this.#resizeObserver = new ResizeObserver(this.#onResize.bind(this));
+		this.#childResizeObservers = [];
+		this.#breakPointCalculationInProgress = false;
+		this.#isConnected = false;
+		this.#onItemClicked = (e) => {
+			const clickedElement = e.currentTarget;
+			const originalElement = this.#hiddenElementsMap.get(clickedElement);
+			if (originalElement) {
+				this._popoverContainerElement?.hidePopover();
+				originalElement.click();
+			}
+		};
+	}
+	#childElements;
+	#hiddenElements;
+	#clonedElements;
+	#hiddenElementsMap;
+	#visibilityBreakpoints;
+	#resizeObserver;
+	#childResizeObservers;
+	#breakPointCalculationInProgress;
+	#isConnected;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#isConnected = true;
+		this.#initialize();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#isConnected = false;
+		this.#resizeObserver.disconnect();
+		this.#cleanup();
+	}
+	async #initialize() {
+		await this.updateComplete;
+		if (!this.#isConnected) return;
+		this.#resizeObserver.observe(this);
+		requestAnimationFrame(() => {
+			if (!this.#isConnected) return;
+			this.#onSlotChange();
+		});
+	}
+	#onResize(entries) {
+		if (!this.#isConnected) return;
+		const newWidth = entries[0].contentBoxSize[0].inlineSize;
+		this.#updateCollapsibleItems(newWidth);
+	}
+	#onSlotChange() {
+		if (!this.#isConnected) return;
+		this.#cleanup();
+		this.#childElements = this._slottedNodes ? [...this._slottedNodes] : [];
+		this.#childElements.forEach((el) => {
+			const observer = new ResizeObserver(this.#calculateBreakPoints.bind(this));
+			observer.observe(el);
+			this.#childResizeObservers.push(observer);
+		});
+		this.#calculateBreakPoints();
+	}
+	#cleanup() {
+		this.#childResizeObservers.forEach((observer) => observer.disconnect());
+		this.#childResizeObservers = [];
+		this.#visibilityBreakpoints = [];
+		this.#clonedElements.forEach((el) => {
+			el.removeEventListener("click", this.#onItemClicked);
+		});
+		this.#clonedElements = [];
+		this.#hiddenElements = [];
+		this.#hiddenElementsMap.clear();
+	}
+	async #calculateBreakPoints() {
+		if (!this.#isConnected) return;
+		if (this.#breakPointCalculationInProgress) return;
+		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 < this.#childElements.length; i++) {
+			this.#childElements[i].style.display = "";
+			totalWidth += this.#childElements[i].offsetWidth;
+			this.#visibilityBreakpoints[i] = totalWidth;
+			totalWidth += gap;
+		}
+		const tolerance = 2;
+		this._mainElement.style.width = totalWidth - gap + tolerance + "px";
+		this.#updateCollapsibleItems(this.offsetWidth);
+		this.#breakPointCalculationInProgress = false;
+	}
+	#updateCollapsibleItems(containerWidth) {
+		const availableWidth = containerWidth - (this._moreButtonElement?.offsetWidth || 40);
+		this.#hiddenElements = [];
+		this.#clonedElements.forEach((el) => el.removeEventListener("click", this.#onItemClicked));
+		this.#clonedElements = [];
+		this._popoverContainerElement?.hidePopover();
+		this.#hiddenElementsMap.clear();
+		if (this.collapse === "end") this.#collapseFromEnd(containerWidth, availableWidth);
+		else this.#collapseFromStart(containerWidth, availableWidth);
+		if (this.#hiddenElements.length === 0) {
+			this._moreButtonElement.style.display = "none";
+			this._popoverContainerElement?.hidePopover();
+		} else this._moreButtonElement.style.display = "";
+		this.requestUpdate();
+	}
+	#hideElement(element) {
+		element.style.display = "none";
+		this.#hiddenElements.push(element);
+	}
+	#collapseFromEnd(containerWidth, availableWidth) {
+		const len = this.#visibilityBreakpoints.length;
+		for (let i = 0; i < len; i++) {
+			const breakpoint = this.#visibilityBreakpoints[i];
+			const element = this.#childElements[i];
+			if (breakpoint <= (i === len - 1 ? containerWidth : availableWidth)) element.style.display = "";
+			else this.#hideElement(element);
+		}
+	}
+	#collapseFromStart(containerWidth, availableWidth) {
+		const len = this.#visibilityBreakpoints.length;
+		const totalWidth = this.#visibilityBreakpoints[len - 1] || 0;
+		for (let i = 0; i < len; i++) {
+			const element = this.#childElements[i];
+			if (totalWidth - (i > 0 ? this.#visibilityBreakpoints[i - 1] : 0) <= ((i === 0 || this.#childElements[i - 1].style.display === "none") && this.#hiddenElements.length === 0 ? containerWidth : availableWidth)) element.style.display = "";
+			else this.#hideElement(element);
+		}
+	}
+	#onItemClicked;
+	#onPopoverToggle(e) {
+		if (e.newState === "open") this.#buildDropdownItems();
+	}
+	#buildDropdownItems() {
+		this.#clonedElements.forEach((el) => el.removeEventListener("click", this.#onItemClicked));
+		this.#clonedElements = [];
+		this.#hiddenElementsMap.clear();
+		for (const original of this.#hiddenElements) {
+			const clone = original.cloneNode(true);
+			clone.style.display = "";
+			clone.addEventListener("click", this.#onItemClicked);
+			this.#hiddenElementsMap.set(clone, original);
+			this.#clonedElements.push(clone);
+		}
+		this.requestUpdate();
+	}
+	render() {
+		const moreButton = html`
       <uui-button
         popovertarget="popover-container"
         style="display: none"
@@ -79,176 +177,27 @@ const _UUIResponsiveContainerElement = class _UUIResponsiveContainerElement exte
         </slot>
       </uui-button>
     `;
-    return html`
+		return html`
       <div id="main">
         ${this.collapse === "start" ? moreButton : ""}
         <div id="items-container">
-          <slot @slotchange=${__privateMethod(this, _UUIResponsiveContainerElement_instances, onSlotChange_fn)}></slot>
+          <slot @slotchange=${this.#onSlotChange}></slot>
         </div>
         ${this.collapse === "end" ? moreButton : ""}
       </div>
       <uui-popover-container
         id="popover-container"
         popover
-        @beforetoggle=${__privateMethod(this, _UUIResponsiveContainerElement_instances, onPopoverToggle_fn)}
+        @beforetoggle=${this.#onPopoverToggle}
         placement=${this.collapse === "start" ? "bottom-start" : "bottom-end"}>
         <div id="dropdown-container">
-          ${repeat(__privateGet(this, _clonedElements), (el) => html`${el}`)}
+          ${repeat(this.#clonedElements, (el) => html`${el}`)}
         </div>
       </uui-popover-container>
     `;
-  }
-};
-_childElements = new WeakMap();
-_hiddenElements = new WeakMap();
-_clonedElements = 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);
-  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, _clonedElements).forEach((el) => {
-    el.removeEventListener("click", __privateGet(this, _onItemClicked));
-  });
-  __privateSet(this, _clonedElements, []);
-  __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.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;
-  __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);
-  } 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";
-  __privateGet(this, _hiddenElements).push(element);
-};
-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();
-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`
+	}
+	static {
+		this.styles = [css`
       :host {
         display: flex;
         min-width: 0;
@@ -292,25 +241,18 @@ _UUIResponsiveContainerElement.styles = [
         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
+__decorate([query("#more-button")], UUIResponsiveContainerElement.prototype, "_moreButtonElement", void 0);
+__decorate([query("#popover-container")], UUIResponsiveContainerElement.prototype, "_popoverContainerElement", void 0);
+__decorate([query("#main")], UUIResponsiveContainerElement.prototype, "_mainElement", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], UUIResponsiveContainerElement.prototype, "collapse", void 0);
+__decorate([queryAssignedElements({ flatten: true })], UUIResponsiveContainerElement.prototype, "_slottedNodes", void 0);
+//#endregion
+export { UUIResponsiveContainerElement };
+
+//# sourceMappingURL=responsive-container.element.js.map

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  #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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"}
+{"version":3,"file":"responsive-container.element.js","names":["#onResize","#hiddenElementsMap","#resizeObserver","#isConnected","#initialize","#cleanup","#onSlotChange","#updateCollapsibleItems","#childElements","#calculateBreakPoints","#childResizeObservers","#visibilityBreakpoints","#clonedElements","#onItemClicked","#hiddenElements","#breakPointCalculationInProgress","#collapseFromEnd","#collapseFromStart","#hideElement","#buildDropdownItems","#onPopoverToggle"],"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"],"mappings":"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"}

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

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

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

@@ -1 +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;"}
+{"version":3,"file":"responsive-container.js","names":[],"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';\n"],"mappings":";;;AAGA,cAAc,4BAA4B,6BAA6B"}

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

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './scroll-container.element.js';
-export { UUIScrollContainerElement as default } from './scroll-container.element.js';

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

@@ -1,31 +1,28 @@
-import { LitElement, html, css } from "lit";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.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 _UUIScrollContainerElement = class _UUIScrollContainerElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.enforceScroll = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.hasAttribute("tabindex")) {
-      this.setAttribute("tabindex", "0");
-    }
-  }
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-_UUIScrollContainerElement.styles = [
-  css`
+//#region src/components/scroll-container/scroll-container.element.ts
+/**
+*  @element uui-scroll-container
+*  @slot - for content
+*  @attribute enforce-scroll - forces the scrollbar to appear
+*  @description - Component for displaying a larger amount of .
+*
+*/
+var UUIScrollContainerElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.enforceScroll = false;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+	static {
+		this.styles = [css`
       :host {
         display: block;
         overflow-y: auto;
@@ -67,13 +64,15 @@ _UUIScrollContainerElement.styles = [
       :host(:focus-within)::-webkit-scrollbar-thumb {
         background-color: var(--uui-color-disabled-standalone);
       }
-    `
-];
-let UUIScrollContainerElement = _UUIScrollContainerElement;
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "enforce-scroll" })
-], UUIScrollContainerElement.prototype, "enforceScroll");
-export {
-  UUIScrollContainerElement
+    `];
+	}
 };
-//# sourceMappingURL=scroll-container.element.js.map
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "enforce-scroll"
+})], UUIScrollContainerElement.prototype, "enforceScroll", void 0);
+//#endregion
+export { UUIScrollContainerElement };
+
+//# sourceMappingURL=scroll-container.element.js.map