@odx/foundation 1.0.0-beta.62 → 1.0.0-beta.63

package/dist/components/dropdown/dropdown.d.ts

@@ -19,12 +19,8 @@ export declare class OdxDropdown extends PopoverHost {
     placement: DropdownPlacement;
     get options(): PopoverPlacementOptions;
     connectedCallback(): void;
-    mountPopover(referenceElement?: HTMLElement | null): void;
+    mountPopover(referenceElement: HTMLElement | null): void;
     unmountPopover(referenceElement: HTMLElement): void;
-    onBeforePopoverShow(): void;
-    onPopoverShow(): void;
-    onBeforePopoverHide(): void;
-    onPopoverHide(): void;
     protected render(): TemplateResult;
     protected willUpdate(props: PropertyValues<this>): void;
 }

package/dist/components/inline-message/inline-message.d.ts

@@ -19,7 +19,7 @@ export declare const InlineMessageVariant: Pick<{
 export declare class OdxInlineMessage extends CustomElement {
     closable: boolean;
     emphasized: boolean;
-    icon?: OdxIconName;
+    icon?: OdxIconName | null;
     variant: InlineMessageVariant;
     show(): void;
     hide(): Promise<void>;

package/dist/components/menu/menu.d.ts

@@ -10,7 +10,7 @@ export declare class OdxMenu extends PopoverHost {
     #private;
     getItems(): OdxMenuItem[];
     connectedCallback(): void;
-    mountPopover(referenceElement?: HTMLElement): void;
+    mountPopover(referenceElement: HTMLElement | null): void;
     unmountPopover(referenceElement: HTMLElement): void;
     onBeforePopoverShow(): void;
     onPopoverShow(): void;

package/dist/components/popover/popover-host.d.ts

@@ -11,7 +11,7 @@ export declare class PopoverHost extends PopoverHost_base {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    mountPopover(referenceElement?: HTMLElement | null): void;
+    mountPopover(referenceElement: HTMLElement | null): void;
     unmountPopover(_referenceElement: HTMLElement): void;
     isPopoverOpen(): boolean;
     showPopover(): void;

package/dist/components/status/status.d.ts

@@ -14,7 +14,7 @@ export declare const StatusVariant: Pick<{
     readonly WARNING: "warning";
     readonly DANGER: "danger";
     readonly GHOST: "ghost";
-}, "NEUTRAL" | "ACCENT" | "SUCCESS" | "WARNING" | "DANGER">;
+}, "NEUTRAL" | "PRIMARY" | "SUCCESS" | "WARNING" | "DANGER">;
 export declare class OdxStatus extends CustomElement {
     pulse: boolean;
     variant: StatusVariant;

package/dist/components/tooltip/tooltip.d.ts

@@ -31,7 +31,7 @@ export declare class OdxTooltip extends PopoverHost {
     connectedCallback(): void;
     onPopoverShow(): void;
     onBeforePopoverHide(): void;
-    mountPopover(referenceElement?: HTMLElement | null): void;
+    mountPopover(referenceElement: HTMLElement | null): void;
     unmountPopover(referenceElement: HTMLElement): void;
     protected render(): TemplateResult;
     protected willUpdate(props: PropertyValues<this>): void;

package/dist/components.js

@@ -116,6 +116,16 @@ const _OdxButton = class _OdxButton extends InteractiveElement {
     this.type = "button";
     this.size = ButtonSize.MD;
     this.variant = ButtonVariant.NEUTRAL;
+    this.#handleClick = (_event) => {
+      if (this.type === "submit") {
+        this.#internals.form?.requestSubmit();
+        return;
+      }
+      if (this.type === "reset") {
+        this.#internals.form?.reset();
+        return;
+      }
+    };
     if (!isServer) {
       this.addEventListener("click", this.#handleClick);
     }
@@ -138,16 +148,7 @@ const _OdxButton = class _OdxButton extends InteractiveElement {
       <slot name="badge"></slot>
     `;
   }
-  #handleClick(_event) {
-    if (this.type === "submit") {
-      this.#internals.form?.requestSubmit();
-      return;
-    }
-    if (this.type === "reset") {
-      this.#internals.form?.reset();
-      return;
-    }
-  }
+  #handleClick;
 };
 __decorateClass([
   property({ reflect: true, attribute: "align-badge" })
@@ -576,7 +577,14 @@ const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
   }
   render() {
     if (Array.isArray(this.items)) {
-      return this.#renderItems(this.items);
+      const items = this.items.filter((...args) => this.#isItemVisible(...args));
+      return repeat(
+        items,
+        (item) => item.href,
+        ({ label, href }) => html`
+          <odx-breadcrumbs-item><odx-link href=${href}>${label}</odx-link></odx-breadcrumbs-item>
+        `
+      );
     }
     return html`<slot @slotchange=${this.#updateContext}></slot>`;
   }
@@ -589,17 +597,6 @@ const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
   #isItemVisible(_, index, items) {
     return index === 0 || index > items.length - this.max;
   }
-  #renderItems(items) {
-    return html`
-      ${repeat(
-      items.filter(this.#isItemVisible.bind(this)),
-      (item) => item.href,
-      ({ label, href }) => html`
-          <odx-breadcrumbs-item><odx-link href=${href}>${label}</odx-link></odx-breadcrumbs-item>
-        `
-    )}
-    `;
-  }
   #updateContext() {
     for (const [index, item] of this.itemElements.entries()) {
       item.hidden = !this.#isItemVisible(item, index, this.itemElements);
@@ -966,11 +963,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
     if (this.referenceElement && this.referenceElement !== referenceElement) {
       this.unmountPopover(this.referenceElement);
     }
-    if (!referenceElement) {
-      this.referenceElement = null;
-      return;
-    }
-    this.referenceElement = referenceElement;
+    this.referenceElement = referenceElement ?? null;
   }
   unmountPopover(_referenceElement) {
     this.hidePopover();
@@ -1008,7 +1001,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
     return isOpen;
   }
   #findReferenceElement(anchor) {
-    return findClosestDocument(this)?.getElementById(anchor);
+    return findClosestDocument(this)?.getElementById(anchor) ?? null;
   }
   #connectObserver() {
     this.#disconnectObserver();
@@ -1078,26 +1071,12 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
     this.#updateAriaAttributes(referenceElement, this.id);
     referenceElement.addEventListener("click", this.#handleClick);
     referenceElement.addEventListener("keydown", this.#handleKeyboardEvent);
-    this.emit("mount", { detail: { referenceElement } });
   }
   unmountPopover(referenceElement) {
     super.unmountPopover(referenceElement);
     this.#updateAriaAttributes(referenceElement, null);
     referenceElement.removeEventListener("click", this.#handleClick);
     referenceElement.removeEventListener("keydown", this.#handleKeyboardEvent);
-    this.emit("unmount", { detail: { referenceElement } });
-  }
-  onBeforePopoverShow() {
-    this.emit("before-show");
-  }
-  onPopoverShow() {
-    this.emit("show");
-  }
-  onBeforePopoverHide() {
-    this.emit("before-hide");
-  }
-  onPopoverHide() {
-    this.emit("hide");
   }
   render() {
     return html`
@@ -1108,7 +1087,7 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
   }
   willUpdate(props) {
     super.willUpdate(props);
-    if (props.has("id")) {
+    if (props.has("id") && this.referenceElement) {
       this.#updateAriaAttributes(this.referenceElement, this.id);
     }
     if (props.has("disabled")) {
@@ -1121,9 +1100,9 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
   }
   #updateAriaAttributes(referenceElement, id) {
     if (id) {
-      referenceElement?.setAttribute("aria-describedby", id);
+      referenceElement.setAttribute("aria-describedby", id);
     } else {
-      referenceElement?.removeAttribute("aria-describedby");
+      referenceElement.removeAttribute("aria-describedby");
     }
   }
   #handleClick;
@@ -1840,7 +1819,7 @@ const _OdxInlineMessage = class _OdxInlineMessage extends CustomElement {
     this.emit("after-close", { cancelable: false });
   }
   render() {
-    const resolvedIcon = this.icon || (this.variant ? iconMap[this.variant] : null);
+    const resolvedIcon = this.icon === void 0 ? this.variant ? iconMap[this.variant] : null : this.icon;
     return html`
       ${when(resolvedIcon, (icon) => html`<odx-icon class="icon" name=${icon}></odx-icon>`)}
       <div class="base">
@@ -2541,13 +2520,10 @@ const _OdxModal = class _OdxModal extends CustomElement {
     this.#showRequested = true;
     const canShow = await this.canShow?.(this) ?? true;
     if (!canShow) return;
-    this.emit("before-show", { composed: false });
     await this.beforeShow?.(this);
     this.dialog.showModal();
-    this.emit("show", { composed: false });
     await waitForAnimations(this.dialog, true);
     await this.afterShow?.(this);
-    this.emit("after-show", { composed: false });
     this.open = true;
     this.#showRequested = false;
   }
@@ -2556,12 +2532,10 @@ const _OdxModal = class _OdxModal extends CustomElement {
     this.#closeRequested = true;
     const canClose = await this.canClose?.(this) ?? true;
     if (!canClose) return;
-    this.emit("before-hide", { composed: false });
     await this.beforeClose?.(this);
     this.dialog.close(returnValue);
     await waitForAnimations(this.dialog, true);
     await this.afterClose?.(this);
-    this.emit("after-hide", { composed: false });
     this.open = false;
     this.#closeRequested = false;
   }
@@ -3756,9 +3730,9 @@ __decorateClass([
 ], _OdxStack.prototype, "wrap", 2);
 let OdxStack = _OdxStack;
 
-const styles$e = ":host{display:inline-block;cursor:default}[part=base]{border-radius:var(--odx-border-radius-circle);padding-block:0;padding-inline:var(--odx-size-37) var(--odx-size-50);block-size:var(--odx-size-150);color:inherit;font-weight:var(--odx-typography-font-weight-medium)}";
+const styles$e = ":host{display:inline-flex;gap:var(--odx-size-37);align-items:center;border-radius:var(--odx-border-radius-circle);background-color:var(--odx-color-background-level-1);cursor:default;padding-inline:var(--odx-size-37) var(--odx-size-50);block-size:var(--odx-size-150);font-weight:var(--odx-typography-font-weight-medium)}:host([variant=\"primary\"]){background-color:var(--odx-color-background-primary-muted)}:host([variant=\"danger\"]){background-color:var(--odx-color-background-danger-muted);color:var(--odx-color-foreground-danger-rest)}:host([variant=\"warning\"]){background-color:var(--odx-color-background-warning-muted)}:host([variant=\"success\"]){background-color:var(--odx-color-background-success-muted)}";
 
-const StatusVariant = pick(Variant, ["NEUTRAL", "ACCENT", "SUCCESS", "WARNING", "DANGER"]);
+const StatusVariant = pick(Variant, ["NEUTRAL", "PRIMARY", "SUCCESS", "WARNING", "DANGER"]);
 const _OdxStatus = class _OdxStatus extends CustomElement {
   constructor() {
     super(...arguments);
@@ -3770,14 +3744,8 @@ const _OdxStatus = class _OdxStatus extends CustomElement {
   }
   render() {
     return html`
-      <odx-inline-message class="odx-stack odx-stack-horizontal odx-align-center" part="base" variant=${optionalAttr(this.variant)} .icon=${null}>
-        <odx-stack horizontal gap="xs" align="center">
-          <odx-badge compact ?pulse=${this.pulse} variant=${optionalAttr(this.variant)}></odx-badge>
-          <odx-text class="content" size="sm" emphasized odxPreventTextOverflow>
-            <slot></slot>
-          </odx-text>
-        </odx-stack>
-      </odx-inline-message>
+      <odx-badge compact ?pulse=${this.pulse} variant=${optionalAttr(this.variant)}></odx-badge>
+      <slot></slot>
     `;
   }
 };
@@ -3789,7 +3757,7 @@ __decorateClass([
 ], _OdxStatus.prototype, "variant", 2);
 let OdxStatus = _OdxStatus;
 
-const styles$d = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_track-color-background: var(--odx-color-background-control-rest);--_track-size: var(--odx-size-50);--_track-color-stroke: var(--odx-color-stroke-control-rest);--_thumb-color-background: var(--_track-color-background);--_thumb-color-stroke: var(--_track-color-stroke);--_thumb-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_thumb-position: 0;--_label-color-foreground: var(--odx-color-foreground-rest);display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);cursor:pointer;user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;position:relative;place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color,translate;block-size:var(--odx-size-150)}.track,.thumb{transition:inherit;border:var(--odx-border-width-thin) solid var(--_thumb-color-stroke);border-radius:var(--odx-border-radius-circle)}.track{background-color:var(--_track-color-background);block-size:var(--_track-size);inline-size:var(--odx-size-225)}.thumb{display:flex;position:absolute;inset-inline-start:0;place-content:center;place-items:center;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);box-shadow:var(--odx-shadow-level-0);background-color:var(--_thumb-color-background);block-size:var(--_thumb-size);inline-size:var(--_thumb-size);color:var(--_indicator-color-foreground);translate:var(--_thumb-position) 0}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly])):hover){--_track-color-stroke: var(--odx-color-stroke-control-hover);--_thumb-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .thumb{outline-color:var(--odx-color-stroke-focus-outer)}:host([checked]){--_track-color-background: var(--odx-color-background-control-selected);--_track-color-stroke: var(--odx-color-stroke-control-selected);--_thumb-position: calc(var(--odx-size-225) - 100%)}:host([checked]:not(:is([disabled],[readonly])):hover){--_track-color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]){--_track-color-background: var(--odx-color-background-disabled-rest);--_track-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;.thumb{box-shadow:none}}:host([disabled][checked]){--_track-color-background: var(--odx-color-background-disabled-selected)}:host([readonly]){cursor:default}}";
+const styles$d = "@layer base{:host{--_indicator-space: var(--odx-size-12);--_track-color-background: var(--odx-color-background-control-rest);--_track-size: var(--odx-size-50);--_track-color-stroke: var(--odx-color-stroke-control-rest);--_thumb-color-background: var(--_track-color-background);--_thumb-color-stroke: var(--_track-color-stroke);--_thumb-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_thumb-position: 0;--_label-color-foreground: var(--odx-color-foreground-rest);display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);cursor:pointer;user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;position:relative;place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color,outline-color,translate;block-size:var(--odx-size-150)}.track,.thumb{transition:inherit;border:var(--odx-border-width-thin) solid var(--_thumb-color-stroke);border-radius:var(--odx-border-radius-circle)}.track{background-color:var(--_track-color-background);block-size:var(--_track-size);inline-size:var(--odx-size-225)}.thumb{display:flex;position:absolute;inset-inline-start:0;place-content:center;place-items:center;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);box-shadow:var(--odx-shadow-level-0);background-color:var(--_thumb-color-background);block-size:var(--_thumb-size);inline-size:var(--_thumb-size);color:var(--_indicator-color-foreground);translate:var(--_thumb-position) 0}.label{display:inline-block;cursor:inherit}.content{transition-property:color;padding-inline-end:var(--odx-size-25);color:var(--_label-color-foreground)}}@layer state{:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:not(:is([checked],[disabled],[readonly])):hover){--_track-color-stroke: var(--odx-color-stroke-control-hover);--_thumb-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .thumb{outline-color:var(--odx-color-stroke-focus-outer)}:host([checked]){--_track-color-background: var(--odx-color-background-control-selected);--_track-color-stroke: var(--odx-color-stroke-control-selected);--_thumb-color-background: var(--_track-color-background);--_thumb-position: calc(var(--odx-size-225) - 100%)}:host([checked]:not(:is([disabled],[readonly])):hover){--_track-color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]){--_track-color-background: var(--odx-color-background-disabled-rest);--_track-color-stroke: var(--odx-color-disabled-stroke);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;.thumb{box-shadow:none}}:host([disabled][checked]){--_track-color-background: var(--odx-color-background-disabled-selected)}:host([readonly]){cursor:default}}";
 
 class OdxSwitch extends CheckboxFormControl {
   static {
@@ -3826,6 +3794,13 @@ const _OdxTableCheckboxCell = class _OdxTableCheckboxCell extends CanBeDisabled(
     super(...arguments);
     this.checked = false;
     this.indeterminate = false;
+    this.#handleChange = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.checked = event.target.checked;
+      this.indeterminate = false;
+      this.emit("change");
+    };
   }
   static {
     customElement("odx-table-checkbox-cell", styles$b)(_OdxTableCheckboxCell);
@@ -3840,13 +3815,7 @@ const _OdxTableCheckboxCell = class _OdxTableCheckboxCell extends CanBeDisabled(
   render() {
     return html`<odx-checkbox class="checkbox" ?checked=${this.checked} ?disabled=${this.disabled} ?indeterminate=${this.indeterminate} @change=${this.#handleChange}></odx-checkbox>`;
   }
-  #handleChange(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.checked = event.target.checked;
-    this.indeterminate = false;
-    this.emit("change");
-  }
+  #handleChange;
 };
 __decorateClass([
   query(".checkbox")
@@ -3909,6 +3878,9 @@ const _OdxTableRow = class _OdxTableRow extends CanBeDisabled(CustomElement) {
       if (!event.defaultPrevented) return;
       this.selected = !this.selected;
     };
+    this.#handleSlotchange = ({ target }) => {
+      this.selectable = target.assignedElements().some((element) => element.localName === OdxTableCheckboxCell.tagName);
+    };
   }
   static {
     customElement("odx-table-row", styles$9)(_OdxTableRow);
@@ -3951,12 +3923,7 @@ const _OdxTableRow = class _OdxTableRow extends CanBeDisabled(CustomElement) {
   }
   #handleClick;
   #handleChange;
-  #handleSlotchange({ target }) {
-    this.selectable = target.assignedElements().some(this.#isCheckboxCell);
-  }
-  #isCheckboxCell(element) {
-    return element.localName === OdxTableCheckboxCell.tagName;
-  }
+  #handleSlotchange;
 };
 __decorateClass([
   queryAssignedElements({ selector: OdxTableCheckboxCell.tagName, flatten: true })
@@ -4269,14 +4236,25 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
     super.mountPopover(referenceElement);
     if (!referenceElement) return;
     this.#updateAriaAttributes(referenceElement, this.id);
-    this.#addKeyboardListeners(referenceElement);
-    this.#addMouseListeners(referenceElement);
+    if (this.manual) return;
+    this.addEventListener("mouseleave", this.#handleMouseEvents);
+    referenceElement.addEventListener("mouseenter", this.#handleMouseEvents);
+    referenceElement.addEventListener("mouseleave", this.#handleReferenceMouseLeave);
+    referenceElement.addEventListener("keyup", this.#handleKeyboardFocus);
+    referenceElement.addEventListener("keydown", this.#handleKeyboardFocus);
+    referenceElement.addEventListener("keyup", this.#handleKeyboardFocus);
+    referenceElement.addEventListener("keydown", this.#handleKeyboardFocus);
   }
   unmountPopover(referenceElement) {
     super.unmountPopover(referenceElement);
     this.#updateAriaAttributes(referenceElement, null);
-    this.#removeKeyboardListeners(referenceElement);
-    this.#removeMouseListeners(referenceElement);
+    referenceElement.removeEventListener("keyup", this.#handleKeyboardFocus);
+    referenceElement.removeEventListener("keydown", this.#handleKeyboardFocus);
+    this.removeEventListener("mouseleave", this.#handleMouseEvents);
+    referenceElement.removeEventListener("mouseenter", this.#handleMouseEvents);
+    referenceElement.removeEventListener("mouseleave", this.#handleReferenceMouseLeave);
+    referenceElement.removeEventListener("keyup", this.#handleKeyboardFocus);
+    referenceElement.removeEventListener("keydown", this.#handleKeyboardFocus);
   }
   render() {
     return html`
@@ -4294,35 +4272,11 @@ const _OdxTooltip = class _OdxTooltip extends PopoverHost {
       this.togglePopover(this.show);
     }
   }
-  #addKeyboardListeners(referenceElement) {
-    if (this.manual) return;
-    referenceElement.addEventListener("keyup", this.#handleKeyboardFocus);
-    referenceElement.addEventListener("keydown", this.#handleKeyboardFocus);
-  }
-  #removeKeyboardListeners(referenceElement) {
-    referenceElement.removeEventListener("keyup", this.#handleKeyboardFocus);
-    referenceElement.removeEventListener("keydown", this.#handleKeyboardFocus);
-  }
-  #addMouseListeners(referenceElement) {
-    if (this.manual) return;
-    this.addEventListener("mouseleave", this.#handleMouseEvents);
-    referenceElement.addEventListener("mouseenter", this.#handleMouseEvents);
-    referenceElement.addEventListener("mouseleave", this.#handleReferenceMouseLeave);
-    referenceElement.addEventListener("keyup", this.#handleKeyboardFocus);
-    referenceElement.addEventListener("keydown", this.#handleKeyboardFocus);
-  }
-  #removeMouseListeners(referenceElement) {
-    this.removeEventListener("mouseleave", this.#handleMouseEvents);
-    referenceElement.removeEventListener("mouseenter", this.#handleMouseEvents);
-    referenceElement.removeEventListener("mouseleave", this.#handleReferenceMouseLeave);
-    referenceElement.removeEventListener("keyup", this.#handleKeyboardFocus);
-    referenceElement.removeEventListener("keydown", this.#handleKeyboardFocus);
-  }
   #updateAriaAttributes(referenceElement, id) {
     if (id) {
-      referenceElement?.setAttribute("aria-describedby", id);
+      referenceElement.setAttribute("aria-describedby", id);
     } else {
-      referenceElement?.removeAttribute("aria-describedby");
+      referenceElement.removeAttribute("aria-describedby");
     }
   }
   #handleReferenceMouseLeave;

package/dist/main.js

@@ -3,7 +3,7 @@ import { unsafeCSS, LitElement, html, isServer, nothing } from 'lit';
 import { property, queryAssignedElements, query } from 'lit/decorators.js';
 import { u as uniqBy, r as round, R as RovingTabindexController, m as minBy, c as computePosition, a as autoUpdate, t as throttle, o as offset, s as shift, f as flip, b as size, d as arrow, h as hide } from './vendor.js';
 
-const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas,svg{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
+const customElementStyles = "@layer reset,base,variant,state;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas,svg{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}odx-spinbox>input[type=number]{appearance:textfield;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{appearance:none;margin:0}}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
 
 function customElement(tagName, ...styles) {
   return (target) => {

package/dist/styles.css

@@ -1 +1 @@
-@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas,svg{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer base{h1,h2,h3,h4,h5,h6{display:block;line-height:var(--_line-height);font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}}@layer base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-background-brand) var(--odx-palette-transparent)}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}
+@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{outline:none;border:none}img,picture,video,canvas,svg{display:block;margin:0;max-width:100%}input,button,textarea,select{margin:0;font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}}@layer base{odx-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{odx-icon{transition:var(--odx-transition-default);transition-property:transform}[odxPreventTextOverflow]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child),[odx-button]:has(odx-avatar:only-child){--_min-inline-size: 0}[indicator-position=start] odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}[indicator-position=start] odx-accordion-item[expanded]::part(indicator){--rotate: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}odx-spinbox>input[type=number]{appearance:textfield;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{appearance:none;margin:0}}}@layer base{h1,h2,h3,h4,h5,h6{display:block;line-height:var(--_line-height);font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}}@layer base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-background-brand) var(--odx-palette-transparent)}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.62",
+  "version": "1.0.0-beta.63",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -14,6 +14,13 @@
     "custom-elements.json"
   ],
   "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev:tsc": "tsc --build --noEmit --watch",
+    "dev": "vite build --watch --mode=development",
+    "lint": "biome lint lib i18n styles components",
+    "generate:manifest": "cem analyze"
+  },
   "dependencies": {
     "@preact/signals-core": "1.8.0",
     "lit": "3.3.0"
@@ -28,6 +35,8 @@
     "@lit-labs/preact-signals": "1.0.3",
     "@lit/context": "1.1.5",
     "@odx/icons": "4.0.0-rc.29",
+    "@odx/storybook-utils": "workspace:*",
+    "@odx/typescript-config": "workspace:*",
     "@spectrum-web-components/reactive-controllers": "1.6.0",
     "@wc-toolkit/cem-inheritance": "1.0.4",
     "@wc-toolkit/cem-validator": "1.0.3",
@@ -40,9 +49,7 @@
     "ts-lit-plugin": "2.0.2",
     "vite": "6.3.5",
     "vite-plugin-dts": "4.5.3",
-    "vite-plugin-no-bundle": "4.0.0",
-    "@odx/storybook-utils": "0.0.0",
-    "@odx/typescript-config": "0.0.0"
+    "vite-plugin-no-bundle": "4.0.0"
   },
   "sideEffects": [
     "dist/i18n.js",
@@ -74,12 +81,5 @@
   "publishConfig": {
     "access": "public",
     "tag": "latest"
-  },
-  "scripts": {
-    "build": "vite build",
-    "dev:tsc": "tsc --build --noEmit --watch",
-    "dev": "vite build --watch --mode=development",
-    "lint": "biome lint lib i18n styles components",
-    "generate:manifest": "cem analyze"
   }
-}
+}