@odx/foundation 1.0.0-beta.97 → 1.0.0-beta.99

package/dist/components/breadcrumbs/breadcrumbs.d.ts

@@ -12,7 +12,6 @@ declare global {
 export declare class OdxBreadcrumbs extends CustomElement {
     #private;
     private itemElements;
-    private renderedItemElements;
     max: number;
     items?: BreadcrumbsItem[] | null;
     protected firstUpdated(props: PropertyValues<this>): void;

package/dist/components/combobox/autocomplete.d.ts

@@ -17,7 +17,7 @@ export declare class OdxAutocomplete extends FormControl {
     searchFn: (option: OptionControl, query?: string) => boolean;
     get control(): HTMLInputElement | undefined;
     get controlValue(): string;
-    firstUpdated(props: PropertyValues<this>): void;
+    protected firstUpdated(props: PropertyValues<this>): void;
     protected render(): TemplateResult;
 }
 //# sourceMappingURL=autocomplete.d.ts.map

package/dist/components/input/input.d.ts

@@ -18,7 +18,6 @@ export declare class OdxInput extends FormControl<string> {
     step?: number;
     type: HTMLInputElement['type'];
     value: string;
-    clear(): void;
     stepUp(): void;
     stepDown(): void;
     protected willUpdate(props: PropertyValues<this>): void;

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

@@ -6,6 +6,7 @@ export declare abstract class PopoverHost extends PopoverHost_base {
     #private;
     static readonly styles: import('lit').CSSResult;
     protected popoverElement: OdxPopover;
+    open: boolean;
     set referenceElement(value: HTMLElement | null);
     get referenceElement(): HTMLElement | null;
     placement: Placement;
@@ -17,7 +18,7 @@ export declare abstract class PopoverHost extends PopoverHost_base {
     hasMountedPopover(element: HTMLElement): boolean;
     mountPopover(referenceElement: HTMLElement | null): void;
     unmountPopover(_referenceElement: HTMLElement): void;
-    isPopoverOpen(): boolean;
+    hasOpenPopover(referenceElement: HTMLElement | null): boolean;
     showPopover(): Promise<void>;
     hidePopover(): void;
     togglePopover(state?: boolean): boolean;

package/dist/components/select/select.d.ts

@@ -13,11 +13,13 @@ export declare class OdxSelect extends ListboxFormControl<OptionControl> {
     protected readonly dropdown: OdxDropdown;
     maxVisibleSelectedOptions: number;
     constructor();
-    connectedCallback(): void;
-    firstUpdated(props: PropertyValues<this>): void;
+    clear(): void;
     isDropdownOpen(): boolean;
     showDropdown(): void;
     hideDropdown(): void;
+    connectedCallback(): void;
+    firstUpdated(props: PropertyValues<this>): void;
+    protected canSelect(option: OptionControl): boolean;
     protected render(): TemplateResult;
     protected updated(props: PropertyValues<this>): void;
 }

package/dist/components/spinbox/spinbox.d.ts

@@ -12,6 +12,7 @@ export declare class OdxSpinbox extends FormControl<string> {
     selectedIndex: number;
     value: string;
     constructor();
+    clear(): void;
     protected willUpdate(props: PropertyValues<this>): void;
     protected updated(props: PropertyValues<this>): void;
     previous(): void;

package/dist/components.js

@@ -1,13 +1,12 @@
 import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
 import { CustomElement, ExpandableItemManager, customElement, CanBeExpanded, InteractiveElement, getUniqueId, toAriaBooleanAttribute, Size, Variant, optionalAttr, InteractiveLink, getElementFromEvent, Shape, CanBeDisabled, optionalSlot, CheckboxFormControl, CheckboxGroupFormControl, SharedResizeObserver, findClosestDocument, Placement, waitForAnimations, PopoverPlacementOptions, computePopoverPlacement, getKeyInfo, FormControl, ActiveDescendantsController, getAssignedElement, parseDate, forwardEvent, OptionControl, toPx, RadioGroupFormControl, ListboxFormControl, IsDraggable, NumberFormControl, IS_DRAG_ACTIVE_ATTRIBUTE, DragController } from '@odx/foundation';
-import { queryAssignedElements, property, query, state, queryAll } from 'lit/decorators.js';
+import { queryAssignedElements, property, query, state } from 'lit/decorators.js';
 import { html, isServer, unsafeCSS, css, nothing } from 'lit';
 import { p as pick, e, a as autoUpdate, t as throttle, R as RovingTabindexController, r as round, g as debounce, n, i as c, j as e$1 } from './vendor.js';
 import { when } from 'lit/directives/when.js';
 import { IsLocalized, setTranslation } from '@odx/foundation/i18n';
 import { signal, computed } from '@preact/signals-core';
 import 'lit/html.js';
-import { repeat } from 'lit/directives/repeat.js';
 
 const styles$1g = ":host{display:block}:host(:not([compact])) ::slotted(odx-accordion-item){margin-block:var(--odx-spacing-37)}";
 
@@ -400,11 +399,7 @@ const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement)
   render() {
     const anchors = this.#anchorObserver?.anchors.value ?? [];
     const visibleAnchors = this.#anchorObserver?.visibleAnchors.value;
-    return repeat(
-      anchors,
-      (anchor) => anchor.id,
-      (anchor) => this.renderAnchorLink(anchor, visibleAnchors?.[0] === anchor)
-    );
+    return html`${anchors.map((anchor) => this.renderAnchorLink(anchor, visibleAnchors?.[0] === anchor))}`;
   }
   updated(props) {
     if (props.has("container")) {
@@ -602,13 +597,7 @@ const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
   render() {
     if (Array.isArray(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`${items.map(({ label, href }) => html`<odx-breadcrumbs-item><odx-link href=${href}>${label}</odx-link></odx-breadcrumbs-item>`)}`;
     }
     return html`<slot @slotchange=${this.#updateContext}></slot>`;
   }
@@ -625,7 +614,9 @@ const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
     for (const [index, item] of this.itemElements.entries()) {
       item.hidden = !this.#isItemVisible(item, index, this.itemElements);
     }
-    for (const [, item] of Array.from(this.renderedItemElements).entries()) {
+    const renderedItemElements = this.shadowRoot?.querySelectorAll(OdxBreadcrumbsItem.tagName) ?? [];
+    if (renderedItemElements.length === 0) return;
+    for (const item of Array.from(renderedItemElements)) {
       item.requestUpdate();
     }
   }
@@ -633,9 +624,6 @@ const _OdxBreadcrumbs = class _OdxBreadcrumbs extends CustomElement {
 __decorateClass([
   queryAssignedElements({ selector: OdxBreadcrumbsItem.tagName, flatten: true })
 ], _OdxBreadcrumbs.prototype, "itemElements", 2);
-__decorateClass([
-  queryAll(OdxBreadcrumbsItem.tagName)
-], _OdxBreadcrumbs.prototype, "renderedItemElements", 2);
 __decorateClass([
   property({ type: Number })
 ], _OdxBreadcrumbs.prototype, "max", 2);
@@ -976,7 +964,7 @@ __decorateClass([
 ], _OdxCircularProgressBar.prototype, "size", 2);
 let OdxCircularProgressBar = _OdxCircularProgressBar;
 
-const styles$Z = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-background-level-2);--_popover-color-foreground: var(--odx-color-foreground-rest);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-size-75);--_popover-arrow-size: var(--odx-size-50);--_popover-arrow-offset: calc(var(--_popover-offset) - var(--_popover-arrow-size) / 2);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));top:var(--_popover-position-y);left:var(--_popover-position-x);transform:translate3d(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y),0);transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;opacity:0;margin:0;background-color:transparent;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size)}:host(:not(:popover-open)){display:none}:host(:popover-open){display:flex;transform:translate(0);opacity:1;@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset));padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset);--_popover-arrow-offset-y: calc(var(--_popover-offset) - 6px);padding-block:var(--_popover-offset) var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0;--_popover-arrow-offset-x: calc(var(--_popover-offset) - var(--_arrow-size) / 2);--_popover-arrow-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){right:var(--_popover-offset)}}}";
+const styles$Z = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-background-level-2);--_popover-color-foreground: var(--odx-color-foreground-rest);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-size-75);--_popover-arrow-size: var(--odx-size-50);--_popover-arrow-offset: calc(var(--_popover-offset) - var(--_popover-arrow-size) / 2);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));top:var(--_popover-position-y);left:var(--_popover-position-x);transform:translate3d(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y),0);transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;opacity:0;margin:0;background-color:transparent;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size)}:host(:not(:popover-open)){display:none}:host(:popover-open){display:flex;transform:translate(0);opacity:1;@starting-style{transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));opacity:0}}odx-popover::part(arrow){transform:rotate(45deg)}}@layer state{:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset);padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){bottom:var(--_popover-arrow-offset)}}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){left:var(--_popover-arrow-offset)}}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset));--_popover-arrow-offset-y: calc(var(--_popover-offset) - 6px);padding-block:var(--_popover-offset) var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding));odx-popover::part(arrow){top:var(--_popover-arrow-offset)}}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0;--_popover-arrow-offset-x: calc(var(--_popover-offset) - var(--_arrow-size) / 2);--_popover-arrow-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding));odx-popover::part(arrow){right:var(--_popover-offset)}}}";
 
 const popoverTargetAttribute = "odx-popovertarget";
 class PopoverObserver {
@@ -1015,10 +1003,12 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
     super();
     this.#currentReferenceElement = null;
     this.#openPopovers = /* @__PURE__ */ new WeakSet();
+    this.open = false;
     this.placement = Placement.BOTTOM;
     this.fpsLimit = 60;
     this.#handleToggle = async (event) => {
-      if (this.isPopoverOpen()) {
+      this.open = !!this.referenceElement && event.newState === "open";
+      if (this.hasOpenPopover(this.referenceElement)) {
         await this.onBeforePopoverShow?.();
         await waitForAnimations(this);
         await this.onPopoverShow?.();
@@ -1028,7 +1018,7 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
         await this.onPopoverHide?.();
       }
       if (!this.referenceElement) return;
-      if (event.newState === "open") {
+      if (this.open) {
         this.#openPopovers.add(this.referenceElement);
       } else {
         this.#openPopovers.delete(this.referenceElement);
@@ -1077,16 +1067,15 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
   unmountPopover(_referenceElement) {
     this.referenceElement = null;
   }
-  isPopoverOpen() {
-    return !!this.referenceElement && this.#openPopovers.has(this.referenceElement);
+  hasOpenPopover(referenceElement) {
+    return !!referenceElement && this.#openPopovers.has(referenceElement);
   }
   async showPopover() {
     if (!this.referenceElement || this.disabled || this.canPopoverShow?.() === false) return;
     await 0;
+    this.#positionUpdater?.();
     computePopoverPlacement(this.referenceElement, this, this.options);
     super.showPopover();
-    this.#openPopovers.add(this.referenceElement);
-    this.#positionUpdater?.();
     this.#positionUpdater = autoUpdate(
       this.referenceElement,
       this,
@@ -1094,16 +1083,13 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
     );
   }
   hidePopover() {
-    if (!this.isPopoverOpen() || this.canPopoverHide?.() === false) return;
-    this.#positionUpdater?.();
+    if (!this.open || this.canPopoverHide?.() === false) return;
     super.hidePopover();
-    if (this.referenceElement) {
-      this.#openPopovers.delete(this.referenceElement);
-    }
+    this.#positionUpdater?.();
     this.#positionUpdater = void 0;
   }
   togglePopover(state) {
-    const isOpen = state ?? !this.isPopoverOpen();
+    const isOpen = state ?? !this.hasOpenPopover(this.referenceElement);
     if (isOpen) {
       this.showPopover();
     } else {
@@ -1118,9 +1104,9 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
   }
   willUpdate(props) {
     super.willUpdate(props);
-    if (props.has("referenceElement") && this.referenceElement !== props.get("referenceElement")) {
+    if (props.has("referenceElement")) {
       const previousReferenceElement = props.get("referenceElement");
-      if (previousReferenceElement) {
+      if (previousReferenceElement && this.referenceElement !== previousReferenceElement) {
         this.#openPopovers.delete(previousReferenceElement);
       }
     }
@@ -1139,6 +1125,9 @@ class PopoverHost extends CanBeDisabled(CustomElement) {
 __decorateClass([
   query("odx-popover", true)
 ], PopoverHost.prototype, "popoverElement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, useDefault: true })
+], PopoverHost.prototype, "open", 2);
 __decorateClass([
   property({ attribute: false })
 ], PopoverHost.prototype, "referenceElement", 1);
@@ -1157,17 +1146,19 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
     super(...arguments);
     this.matchReferenceWidth = false;
     this.placement = DropdownPlacement.BOTTOM;
-    this.#handleClick = (event) => {
-      if (event?.defaultPrevented) return;
+    this.#handleInteraction = (event) => {
+      if (event.defaultPrevented) return;
       this.updateReferenceElementFromEvent(event);
       this.togglePopover();
     };
     this.#handleKeyboardEvent = (event) => {
       const key = getKeyInfo(event);
-      if (!key.enter || event.defaultPrevented) return;
-      if (!this.isPopoverOpen()) {
+      if (!(key.enter || key.space) || event.defaultPrevented) return;
+      if (!this.open) {
+        event.preventDefault();
         event.stopImmediatePropagation();
       }
+      this.updateReferenceElementFromEvent(event);
       this.showPopover();
     };
   }
@@ -1188,14 +1179,14 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
     super.mountPopover(referenceElement);
     if (!referenceElement) return;
     this.#updateAriaAttributes(referenceElement, this.id);
-    referenceElement.addEventListener("click", this.#handleClick);
+    referenceElement.addEventListener("click", this.#handleInteraction);
     referenceElement.addEventListener("keydown", this.#handleKeyboardEvent);
   }
   unmountPopover(referenceElement) {
     super.unmountPopover(referenceElement);
     if (!referenceElement) return;
     this.#updateAriaAttributes(referenceElement, null);
-    referenceElement.removeEventListener("click", this.#handleClick);
+    referenceElement.removeEventListener("click", this.#handleInteraction);
     referenceElement.removeEventListener("keydown", this.#handleKeyboardEvent);
   }
   render() {
@@ -1219,7 +1210,7 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
       referenceElement.removeAttribute(ariaAttribute);
     }
   }
-  #handleClick;
+  #handleInteraction;
   #handleKeyboardEvent;
 };
 __decorateClass([
@@ -1346,7 +1337,7 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
       this.dropdown.hidePopover();
     };
     this.#handleControlClear = () => {
-      if (!this.dropdown.isPopoverOpen()) return;
+      if (!this.dropdown.open) return;
       this.#handleControlValueChange(void 0);
     };
     this.#handleControlInput = () => {
@@ -1355,7 +1346,7 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormControl {
       } else if (this.controlValue.length === 0) {
         this.dropdown.hidePopover();
       }
-      if (!this.dropdown.isPopoverOpen()) return;
+      if (!this.dropdown.open) return;
       this.#handleControlValueChange(this.controlValue);
     };
     this.#handleControlKeyboardEvent = (event) => {
@@ -1970,23 +1961,25 @@ const _OdxInput = class _OdxInput extends FormControl {
     this.placeholder = "";
     this.type = "text";
     this.value = "";
+    this.#handleClear = (event) => {
+      if (!this.#isClearable()) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.emit("clear")) return;
+      this.clear();
+    };
     this.#handleInput = (event) => {
       this.value = event.target.value;
     };
     this.#handleKeyDown = (event) => {
-      if (!getKeyInfo(event).escape) return;
-      event.preventDefault();
-      this.clear();
+      const key = getKeyInfo(event);
+      if (!key.escape) return;
+      this.#handleClear(event);
     };
   }
   static {
     customElement("odx-input", styles$M)(_OdxInput);
   }
-  clear() {
-    if (!this.#isClearable() || this.emit("clear")) return;
-    this.value = "";
-    this.focus();
-  }
   stepUp() {
     if (!this.nativeInput) return;
     this.nativeInput.stepUp();
@@ -2039,7 +2032,7 @@ const _OdxInput = class _OdxInput extends FormControl {
             ${this.renderControl("increment", "core::plus", () => this.stepUp(), this.disabled || !canStepUp)}
           </odx-button-group>
         `,
-      () => when(!(this.disabled || this.readonly) && this.clearable, () => this.renderControl("clear", "core::cancel", () => this.clear(), this.disabled))
+      () => when(this.#isClearable(), () => this.renderControl("clear", "core::cancel", this.#handleClear, this.disabled))
     )}
       <slot name="suffix"></slot>
     `;
@@ -2054,6 +2047,7 @@ const _OdxInput = class _OdxInput extends FormControl {
   #isClearable() {
     return this.clearable && !this.disabled && !this.readonly && !this.required && !!this.value;
   }
+  #handleClear;
   #handleInput;
   #handleKeyDown;
 };
@@ -2584,7 +2578,7 @@ class OdxMenu extends PopoverHost {
   };
   #handleKeyDown = (event) => {
     const key = getKeyInfo(event);
-    if (!(this.isPopoverOpen() && (key.tab || key.backTab))) return;
+    if (!(this.open && (key.tab || key.backTab))) return;
     event?.preventDefault();
     event.stopPropagation();
     this.hidePopover();
@@ -2627,7 +2621,7 @@ __decorateClass([
 ], _OdxMenuItem.prototype, "icon", 2);
 let OdxMenuItem = _OdxMenuItem;
 
-const styles$A = "@layer base{:host{--max-inline-size: 640px;--margin-block-start: var(--odx-size-450);--_modal-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_modal-transition-offset-x: 0;--_modal-transition-offset-y: calc(-1 * var(--_modal-offset));--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-default);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,outline;margin-block-start:var(--margin-block-start);border:0;border-radius:var(--odx-border-radius-ml);box-shadow:var(--odx-shadow-level-2);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0}.dismiss-action{margin-inline-start:auto}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}.base[open]{transform:translate(0);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-size-100))}}}";
+const styles$A = "@layer base{:host{--max-inline-size: 640px;--_modal-outer-padding: var(--odx-breakpoint-spacing-150);display:contents;transition-property:display}:host,.base,.base::backdrop{transition:var(--odx-transition-slow);transition-behavior:allow-discrete}.base,.base::backdrop{opacity:0}.base{transform:translateY(var(--odx-size-100));transition-property:opacity,display,overlay,transform,box-shadow;border:0;border-radius:var(--odx-border-radius-ml);background:transparent;padding:0;inline-size:min(var(--max-inline-size),100% - 2 * var(--_modal-outer-padding));overflow:unset;color:var(--odx-color-foreground-rest);&::backdrop{transition-property:opacity;background-color:var(--odx-color-backdrop);backdrop-filter:blur(var(--odx-elevation-blur))}}.inner{display:flex;flex-direction:column;border-radius:inherit;background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-50) var(--odx-breakpoint-spacing-150);max-block-size:calc(100dvh - 2 * var(--_modal-outer-padding))}.header,.footer{min-block-size:var(--odx-size-300)}.content{padding:var(--odx-size-75) 0;overflow:auto}.dismiss-action{margin-inline-start:auto}}@layer state{:host(:not([open])){display:none}.base:focus-visible{outline-color:var(--odx-color-stroke-focus-outer)}.base[open]{transform:translate(0);box-shadow:var(--odx-shadow-level-2);&,&::backdrop{opacity:1;@starting-style{opacity:0}}@starting-style{transform:translateY(var(--odx-size-100))}}}";
 
 const ModalLayout = { MODAL: "modal", SIDESHEET: "sidesheet" };
 (async () => {
@@ -3268,7 +3262,7 @@ __decorateClass([
 ], _OdxSearchBar.prototype, "readonly", 2);
 let OdxSearchBar = _OdxSearchBar;
 
-const styles$o = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;inline-size:100%;max-inline-size:320px;overflow:hidden;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid transparent;border-bottom-color:var(--_color-stroke);background-color:var(--_color-background);padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:focus-visible{outline:var(--odx-focus-ring-outline);outline-color:var(--odx-color-stroke-focus-outer)}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-typography-font-size-6)}[part~=dropdown]{--max-block-size: 320px}odx-chip{--_border-radius: var(--odx-border-radius-controls)}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}:host([disabled]:not([readonly])){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed;slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default;odx-chip{--_color-background: var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}}";
+const styles$o = "@layer base{:host{--_color-background: var(--odx-color-background-control-rest);--_color-foreground: var(--odx-color-foreground-rest);--_color-stroke: var(--odx-color-stroke-control-rest);--_control-size: var(--odx-size-225);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-50);display:block;border-radius:var(--odx-border-radius-controls);cursor:pointer;inline-size:100%;max-inline-size:320px;overflow:hidden;color:var(--_color-foreground)}.base{display:flex;gap:var(--_padding-block);align-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,border-color;border:var(--odx-border-width-thin) solid transparent;border-bottom-color:var(--_color-stroke);background-color:var(--_color-background);padding-inline:var(--_padding-inline);block-size:var(--_control-size);min-width:200px;overflow:hidden;text-align:start;user-select:none;&:focus-visible{outline:var(--odx-focus-ring-outline);outline-color:var(--odx-color-stroke-focus-outer)}}.value{margin-inline-end:auto;font-weight:var(--odx-typography-font-weight-medium)}.indicator{font-size:var(--odx-typography-font-size-6)}[part~=dropdown]{--max-block-size: 320px}odx-chip{--_border-radius: var(--odx-border-radius-controls)}slot[name=placeholder]{color:var(--odx-color-foreground-rest-subtle);font-weight:var(--odx-typography-font-weight-normal)}:host:has(odx-dropdown[open]){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}}@layer state{:host(:hover){--_color-background: var(--odx-color-background-control-hover);--_color-stroke: var(--odx-color-stroke-control-hover)}:host([multiple]):has(odx-chip) .base{padding-inline-start:var(--_padding-block)}:host([disabled]:not([readonly])){--_color-foreground: var(--odx-color-foreground-disabled-rest);--_color-background: var(--odx-color-background-disabled-rest);--_color-stroke: var(--odx-color-stroke-disabled-rest);cursor:not-allowed;slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background: var(--odx-color-background-control-readonly);--_color-stroke: var(--odx-color-stroke-control-readonly);cursor:default;odx-chip{--_color-background: var(--odx-color-foreground-disabled-rest)}.indicator{color:var(--odx-color-foreground-rest-subtle)}}}";
 
 const _OdxSelect = class _OdxSelect extends ListboxFormControl {
   constructor() {
@@ -3290,13 +3284,13 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
       this.value = this.value.length === this.options.length ? [] : this.options.map((option) => option.value);
     };
     this.#handleClear = (event) => {
-      event.stopPropagation();
       event.preventDefault();
-      if (!this.#isClearable() || this.emit("clear")) return;
-      this.updateValue(void 0);
+      event.stopPropagation();
+      if (this.emit("clear")) return;
+      this.clear();
     };
     this.#handleSelect = () => {
-      if (this.autoSelect && !this.isDropdownOpen() || this.multiple) return;
+      if (this.autoSelect || this.multiple) return;
       this.hideDropdown();
     };
     if (!isServer) {
@@ -3307,16 +3301,11 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
   static {
     customElement("odx-select", styles$o)(_OdxSelect);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.role = "combobox";
-  }
-  firstUpdated(props) {
-    super.firstUpdated(props);
-    this.dropdown.mountPopover(this.shadowRoot?.querySelector(".base") ?? null);
+  clear() {
+    this.value = this.multiple ? [] : "";
   }
   isDropdownOpen() {
-    return this.dropdown?.isPopoverOpen();
+    return this.dropdown.open;
   }
   showDropdown() {
     this.dropdown.showPopover();
@@ -3324,6 +3313,17 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
   hideDropdown() {
     this.dropdown.hidePopover();
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.role = "combobox";
+  }
+  firstUpdated(props) {
+    super.firstUpdated(props);
+    this.dropdown.mountPopover(this.shadowRoot?.querySelector(".base") ?? null);
+  }
+  canSelect(option) {
+    return (this.autoSelect || this.dropdown.open) && super.canSelect(option);
+  }
   render() {
     const allSelected = this.value.length === this.options.length;
     const dropdownDisabled = this.disabled || this.readonly && (!this.multiple || this.selectedOptions.length === 0);
@@ -3706,7 +3706,7 @@ const _OdxSliderMarks = class _OdxSliderMarks extends CustomElement {
     const markCount = Math.floor(this.context.range / step);
     const marks = new Array(markCount).fill(null).map((_, index) => step * index + this.context.min);
     return html`
-      ${repeat(marks, (value) => this.renderMark(value))}
+      ${marks.map((value) => this.renderMark(value))}
       ${this.renderMark(this.context.max, true)}
     `;
   }
@@ -3791,6 +3791,9 @@ const _OdxSpinbox = class _OdxSpinbox extends FormControl {
       delegatesFocus: false
     };
   }
+  clear() {
+    this.value = "";
+  }
   willUpdate(props) {
     super.willUpdate(props);
     if (props.has("selectedIndex")) {

package/dist/lib/control/checkbox-form-control.d.ts

@@ -8,6 +8,7 @@ export declare abstract class CheckboxFormControl extends FormControl<string> {
     value: string;
     constructor();
     toFormValue(): string | File | FormData | null;
+    clear(): void;
     toggle(state?: boolean, emitEvent?: boolean): void;
     connectedCallback(): void;
     updateAriaAttributes(): void;

package/dist/lib/control/checkbox-group-form-control.d.ts

@@ -10,11 +10,12 @@ export declare abstract class CheckboxGroupFormControl extends FormControl<strin
     get groupControl(): CheckboxFormControl | null;
     value: string[];
     constructor();
-    protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
+    clear(): void;
     toFormValue(): FormData;
     protected isControl(element: unknown): element is CheckboxFormControl;
     protected isGroupControl(element: unknown): element is CheckboxFormControl;
     protected isControlChecked(control: CheckboxFormControl): boolean;
+    protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
     protected updated(props: PropertyValues<this>): void;
     protected updateControls(updateFn: (control: CheckboxFormControl, index: number) => void): void;
     protected updateValue(value: string[], dispatchEvent?: boolean): void;

package/dist/lib/control/form-control.d.ts

@@ -2,7 +2,7 @@ import { PropertyValues } from 'lit';
 import { CustomElement } from '../custom-element.js';
 import { CanBeDisabled } from '../mixins/can-be-disabled.js';
 declare const FormControl_base: import('../main.js').Constructor<CanBeDisabled> & typeof CustomElement;
-export declare class FormControl<V extends string | number | string[] = string> extends FormControl_base {
+export declare abstract class FormControl<V extends string | number | string[] = string> extends FormControl_base {
     /** @internal */
     static readonly formAssociated = true;
     /** @internal */
@@ -23,6 +23,7 @@ export declare class FormControl<V extends string | number | string[] = string>
     checkValidity(): boolean;
     setValidity(flags?: ValidityStateFlags, target?: HTMLElement): void;
     reportValidity(): void;
+    clear(): void;
     protected willUpdate(props: PropertyValues<this>): void;
 }
 export {};

package/dist/lib/control/listbox-form-control.d.ts

@@ -16,6 +16,7 @@ export declare abstract class ListboxFormControl<Option extends OptionControl> e
     protected canAutoSelect(option: Option): boolean;
     protected canSelect(option: Option): boolean;
     toggleOption(option: Option, state?: boolean): void;
+    clear(): void;
     connectedCallback(): void;
     protected handleSlotChange(): void;
     protected updateValue(option?: Option): void;

package/dist/lib/control/number-form-control.d.ts

@@ -5,6 +5,7 @@ export declare class NumberFormControl extends FormControl<number> {
     max: number;
     step: number;
     value: number;
+    clear(): void;
     getValueText(): string;
     protected willUpdate(props: PropertyValues<this>): void;
     toFormValue(): string;

package/dist/main.js

@@ -177,6 +177,9 @@ class FormControl extends CanBeDisabled(CustomElement) {
   reportValidity() {
     this.internals.reportValidity();
   }
+  clear() {
+    this.value = "";
+  }
   willUpdate(props) {
     super.willUpdate(props);
     if (props.has("required")) {
@@ -238,6 +241,9 @@ class CheckboxFormControl extends FormControl {
     }
     return this.checked ? "on" : null;
   }
+  clear() {
+    this.checked = false;
+  }
   toggle(state, emitEvent = false) {
     const currentState = this.checked;
     const newState = state ?? !currentState;
@@ -302,9 +308,8 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
   get groupControl() {
     return this.#findControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR))[0] ?? null;
   }
-  async firstUpdated(_changedProperties) {
-    await 0;
-    this.value = this.controls.filter((control) => control.checked).map((control) => control.value);
+  clear() {
+    this.value = [];
   }
   toFormValue() {
     const formData = new FormData();
@@ -322,6 +327,10 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
   isControlChecked(control) {
     return this.value.includes(control.value);
   }
+  async firstUpdated(_changedProperties) {
+    await 0;
+    this.value = this.controls.filter((control) => control.checked).map((control) => control.value);
+  }
   updated(props) {
     super.updated(props);
     if (props.has("value")) {
@@ -341,11 +350,17 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
       });
     }
     if (props.has("disabled")) {
+      if (this.groupControl) {
+        this.groupControl.disabled = this.disabled;
+      }
       this.updateControls((control) => {
         control.disabled = this.disabled;
       });
     }
     if (props.has("readonly")) {
+      if (this.groupControl) {
+        this.groupControl.readonly = this.disabled;
+      }
       this.updateControls((control) => {
         control.readonly = this.readonly;
       });
@@ -525,9 +540,9 @@ class ListboxFormControl extends FormControl {
     super();
     this.activeDescendants = new ActiveDescendantsController(this, {
       getItems: () => this.options,
-      onChange: (_, option, firstChange) => {
+      onChange: (_, option) => {
         option?.scrollIntoView();
-        if (!(option && this.canAutoSelect(option)) || firstChange || option.selected) return;
+        if (!(option && this.canAutoSelect(option)) || option.selected) return;
         this.toggleOption(option, true);
       }
     });
@@ -589,6 +604,9 @@ class ListboxFormControl extends FormControl {
       option.scrollIntoView();
     }
   }
+  clear() {
+    this.value = this.multiple ? [] : "";
+  }
   connectedCallback() {
     super.connectedCallback();
     this.role ||= "listbox";
@@ -674,6 +692,9 @@ class NumberFormControl extends FormControl {
     this.step = 1;
     this.value = 0;
   }
+  clear() {
+    this.value = 0;
+  }
   getValueText() {
     return this.ariaValueText?.trim() ?? "";
   }

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.97",
+  "version": "1.0.0-beta.99",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -40,8 +40,8 @@
     "ts-lit-plugin": "2.0.2",
     "vite": "6.3.5",
     "vite-plugin-dts": "4.5.4",
-    "@odx/storybook-utils": "0.0.0",
-    "@odx/typescript-config": "0.0.0"
+    "@odx/typescript-config": "0.0.0",
+    "@odx/storybook-utils": "0.0.0"
   },
   "sideEffects": [
     "dist/i18n.js",