@odx/foundation 1.0.0-beta.90 → 1.0.0-beta.91

package/dist/components/card/card.d.ts

@@ -1,5 +1,5 @@
 import { CanBeDisabled, CustomElement } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-card': OdxCard;
@@ -7,6 +7,8 @@ declare global {
 }
 declare const OdxCard_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxCard extends OdxCard_base {
+    interactive: boolean;
+    protected updated(_changedProperties: PropertyValues): void;
     protected render(): TemplateResult;
 }
 export {};

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

@@ -19,5 +19,6 @@ export declare class OdxSelect extends ListboxFormControl<OptionControl> {
     showDropdown(): void;
     hideDropdown(): void;
     protected render(): TemplateResult;
+    protected updated(props: PropertyValues<this>): void;
 }
 //# sourceMappingURL=select.d.ts.map

package/dist/components.js

@@ -430,7 +430,7 @@ __decorateClass([
 ], _OdxAreaHeader.prototype, "size", 2);
 let OdxAreaHeader = _OdxAreaHeader;
 
-const styles$18 = ":host{--color-background: var(--odx-color-background-transparent-pressed);--color-foreground: inherit;--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3);display:flex;position:relative;flex:0 0 auto;flex-direction:column;place-content:center;place-items:center;transition:var(--odx-transition-default);transition-property:background-color,box-shadow;margin-block:var(--_spacing);border-radius:var(--_border-radius);background-color:var(--color-background);block-size:var(--_size);inline-size:var(--_size);overflow:clip;vertical-align:middle;color:var(--color-foreground);font-size:var(--_font-size);user-select:none}::slotted(img){position:absolute;inset:var(--odx-size-12);z-index:1;border-radius:var(--_border-radius);inline-size:calc(100% - var(--odx-size-25));pointer-events:none;object-fit:cover}::slotted(odx-icon){font-size:inherit}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host([variant=\"neutral\"]){--color-background: var(--odx-experience-color-secondary-rest)}:host([variant=\"primary\"]){--color-background: var(--odx-color-background-primary-rest);--color-foreground: var(--odx-color-foreground-inverse-static)}:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1);::slotted(img){inset:var(--odx-size-px);inline-size:calc(100% - var(--odx-size-12))}}:host([size=\"lg\"]){--_size: var(--odx-size-300);--_spacing: 0;--_font-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_size: var(--odx-size-400);--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}";
+const styles$18 = ":host{--color-background: var(--odx-color-background-transparent-pressed);--color-foreground: inherit;--_border-radius: var(--odx-border-radius-circle);--_size: var(--odx-size-225);--_font-size: var(--odx-typography-font-size-3);display:flex;position:relative;flex:0 0 auto;flex-direction:column;place-content:center;place-items:center;transition:var(--odx-transition-default);transition-property:background-color,box-shadow;border-radius:var(--_border-radius);background-color:var(--color-background);block-size:var(--_size);inline-size:var(--_size);overflow:clip;vertical-align:middle;color:var(--color-foreground);font-size:var(--_font-size);user-select:none}::slotted(img){position:absolute;inset:var(--odx-size-12);z-index:1;border-radius:var(--_border-radius);inline-size:calc(100% - var(--odx-size-25));pointer-events:none;object-fit:cover}::slotted(odx-icon){font-size:inherit}:host([shape=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host([variant=\"neutral\"]){--color-background: var(--odx-experience-color-secondary-rest)}:host([variant=\"primary\"]){--color-background: var(--odx-color-background-primary-rest);--color-foreground: var(--odx-color-foreground-inverse-static)}:host([size=\"sm\"]){--_size: var(--odx-size-150);--_font-size: var(--odx-typography-font-size-1);::slotted(img){inset:var(--odx-size-px);inline-size:calc(100% - var(--odx-size-12))}}:host([size=\"lg\"]){--_size: var(--odx-size-300);--_font-size: var(--odx-typography-font-size-5)}:host([size=\"xl\"]){--_size: var(--odx-size-400);--_font-size: var(--odx-typography-font-size-7)}";
 
 const AvatarShape = pick(Shape, ["CIRCLE", "RECTANGLE"]);
 const AvatarSize = pick(Size, ["SM", "MD", "LG", "XL"]);
@@ -664,24 +664,42 @@ __decorateClass([
 ], _OdxButtonGroup.prototype, "variant", 2);
 let OdxButtonGroup = _OdxButtonGroup;
 
-const styles$12 = ":host{--_card-padding: var(--odx-size-150);display:grid;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\";grid-template-columns:1fr auto;place-content:flex-start;border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1);padding:var(--_card-padding);max-width:100%;overflow:clip}.header,.title{display:flex;place-items:center;margin-block-end:var(--odx-size-50);min-block-size:var(--odx-size-225);overflow:hidden}.title{grid-area:title}.header{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end;margin-block-start:calc(-1 * var(--odx-size-50))}.image{position:relative;grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150)}.image:after{position:absolute;inset:0;transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-block-size:100%;max-inline-size:100%;pointer-events:none;object-fit:cover;aspect-ratio:16 / 9;user-select:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover) .image:after{opacity:1}";
+const styles$12 = ":host{--_card-padding: var(--odx-size-150);display:grid;grid-template-areas:\"image image\" \"avatar avatar\" \"header header-actions\" \"content content\" \"footer footer\";grid-template-columns:1fr auto;place-content:flex-start;transition:var(--odx-transition-reduced);transition-property:box-shadow,transform,border-color;outline:var(--odx-focus-ring-outline);border:var(--odx-border-width-thin) solid transparent;border-radius:var(--odx-border-radius-md);background-color:var(--odx-color-background-level-1);padding:var(--_card-padding);max-width:100%;overflow:clip}.header,.header-actions{display:flex;gap:var(--odx-size-50);place-items:center;margin-block-end:var(--odx-size-50)}.header{grid-area:header}.header-actions{grid-area:header-actions}.avatar{display:flex;grid-area:avatar;place-items:flex-end;margin-block-start:calc(-1 * var(--odx-size-50))}.image{position:relative;grid-area:image;margin:calc(-1 * (var(--_card-padding) + var(--odx-border-width-thin)))}.image:after{position:absolute;inset:0;transition:var(--odx-transition-default);opacity:0;background-color:var(--odx-color-background-transparent-hover);content:\"\";pointer-events:none;backdrop-filter:blur(var(--odx-elevation-blur))}.content{display:inline-block;grid-area:content}.footer{grid-area:footer}.image+*{margin-block-start:var(--odx-size-250)}.image+.avatar{block-size:0}.avatar+*{margin-block-start:var(--odx-size-50)}slot[name=header]::slotted(odx-avatar){align-self:flex-start}slot[name=image]::slotted(*){max-block-size:100%;inline-size:100%;pointer-events:none;object-fit:cover;aspect-ratio:16 / 9;user-select:none}slot[name=avatar]::slotted(*){margin:0}:host([interactive]){border-color:var(--odx-color-stroke-neutral-subtle);cursor:pointer;user-select:none}:host([interactive]:hover:not(:active)){transform:translateY(calc(-1 * var(--odx-size-12)));border-color:transparent;box-shadow:var(--odx-shadow-level-1);.image:after{opacity:1}}:host([interactive]:active){transform:translateY(0)}:host(:focus-visible){outline-color:var(--odx-color-stroke-focus-outer)}";
 
-class OdxCard extends CanBeDisabled(CustomElement) {
+const _OdxCard = class _OdxCard extends CanBeDisabled(CustomElement) {
+  constructor() {
+    super(...arguments);
+    this.interactive = false;
+  }
   static {
-    customElement("odx-card", styles$12)(OdxCard);
+    customElement("odx-card", styles$12)(_OdxCard);
+  }
+  updated(_changedProperties) {
+    super.updated(_changedProperties);
+    if (this.disabled) return;
+    if (this.interactive) {
+      this.tabIndex = 0;
+    } else {
+      this.removeAttribute("tabindex");
+    }
   }
   render() {
     return html`
-      ${optionalSlot(this, "header")}
+      ${optionalSlot(this, "header-actions")}
       ${optionalSlot(this, "image")}
       ${optionalSlot(this, "avatar")}
-      ${optionalSlot(this, "title")}
-      <div part="content">
+      ${optionalSlot(this, "header")}
+      <div class="content">
         <slot></slot>
       </div>
+      ${optionalSlot(this, "footer")}
     `;
   }
-}
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], _OdxCard.prototype, "interactive", 2);
+let OdxCard = _OdxCard;
 
 const styles$11 = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-background-control-rest);--_indicator-color-stroke: var(--odx-color-stroke-control-subtle);--_indicator-color-foreground: transparent;--_label-color-foreground: inherit;display:inline-flex;margin-block:var(--odx-size-37);border-radius:var(--odx-border-radius-controls);cursor:pointer;padding:var(--_indicator-space);user-select:none}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;flex-shrink:0;place-content:center;place-items:center;transition-property:background-color,border-color;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-radius:var(--odx-border-radius-controls);border-color:var(--_indicator-color-stroke);background-color:var(--_indicator-color-background);block-size:var(--_indicator-size);inline-size:var(--_indicator-size);color:var(--_indicator-color-foreground)}.label{display:inline-block}.content{transition-property:color;margin-block:calc(-1 * var(--_indicator-space));color:var(--_label-color-foreground)}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-stroke-control-hover);--_indicator-color-background: var(--odx-color-background-control-hover)}:host(:focus-visible) .indicator{outline-color:var(--odx-color-stroke-focus-outer)}:host(:is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-control-selected);--_indicator-color-foreground: var(--odx-color-foreground-inverse-static);--_indicator-color-stroke: var(--odx-color-stroke-control-selected)}:host(:is([checked],[indeterminate]):not(:is([readonly],[disabled])):hover){--_indicator-color-background: var(--odx-color-background-control-selected-hover)}:host([disabled]:not([readonly])){--_indicator-color-background: var(--odx-color-background-disabled-rest);--_indicator-color-stroke: var(--odx-color-background-disabled-rest);--_label-color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed}:host([disabled]:not([readonly]):is([checked],[indeterminate])){--_indicator-color-background: var(--odx-color-background-disabled-selected);--_indicator-color-foreground: var(--odx-color-foreground-disabled-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([readonly]){--_indicator-color-background: var(--odx-color-background-control-readonly);--_indicator-color-stroke: var(--odx-color-stroke-control-readonly);cursor:default}:host([readonly][checked]){--_indicator-color-foreground: var(--odx-color-foreground-rest)}";
 
@@ -1144,7 +1162,7 @@ const _OdxDropdown = class _OdxDropdown extends PopoverHost {
   }
   mountPopover(referenceElement) {
     super.mountPopover(referenceElement);
-    if (this.disabled || !referenceElement) return;
+    if (!referenceElement) return;
     this.#updateAriaAttributes(referenceElement, this.id);
     referenceElement.addEventListener("click", this.#handleClick);
     referenceElement.addEventListener("keydown", this.#handleKeyboardEvent);
@@ -2745,7 +2763,7 @@ __decorateClass([
 ], _OdxNavigationItem.prototype, "selected", 2);
 let OdxNavigationItem = _OdxNavigationItem;
 
-const styles$y = ":host{--_color-background: var(--odx-color-background-transparent);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-size-75);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color;border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding:var(--odx-size-37) var(--odx-size-75);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}.label{margin-inline-end:auto}:host(:hover){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]),:host(:active){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected)}:host([selected]:hover){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;pointer-events:none}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]),:host([selected]:active){--_color-background: var(--odx-color-background-transparent-selected-hover)}";
+const styles$y = ":host{--_color-background: var(--odx-color-background-transparent-rest);--_color-foreground: inherit;display:inline-flex;gap:var(--odx-size-75);place-items:center;transition:var(--odx-transition-reduced);transition-property:background-color,color;border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);cursor:pointer;padding:var(--odx-size-37) var(--odx-size-75);color:var(--_color-foreground);user-select:none}odx-checkbox{margin:0}.label{margin-inline-end:auto}:host(:hover:not([readonly])){--_color-background: var(--odx-color-background-transparent-hover)}:host([odx-active]:not([readonly])),:host(:active:not([readonly])){--_color-background: var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background: var(--odx-color-background-transparent-selected)}:host([selected]:hover:not([readonly])){--_color-background: var(--odx-color-background-transparent-selected-hover)}:host([disabled]){--_color-background: var(--odx-color-background-disabled-rest);--_color-foreground: var(--odx-color-foreground-disabled-rest);cursor:not-allowed;pointer-events:none}:host([readonly]){cursor:default}:host([selected][disabled]){--_color-background: var(--odx-color-background-disabled-selected);--_color-foreground: var(--odx-color-foreground-disabled-selected)}:host([selected][odx-active]:not([readonly])),:host([selected]:active:not([readonly])){--_color-background: var(--odx-color-background-transparent-selected-hover)}";
 
 class OdxOption extends OptionControl {
   static {
@@ -3226,7 +3244,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;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)}}@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() {
@@ -3234,14 +3252,15 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
     this.maxVisibleSelectedOptions = 2;
     this.#handleSlotChange = () => {
       super.handleSlotChange();
-      for (const option of this.options) {
+      this.updateOptions((option) => {
         option.type = this.multiple ? "checkbox" : null;
-      }
+      });
     };
     this.#handleBlur = () => {
       this.hideDropdown();
     };
     this.#handleToggleAll = (event) => {
+      if (this.disabled || this.readonly) return;
       event.stopPropagation();
       event.preventDefault();
       this.value = this.value.length === this.options.length ? [] : this.options.map((option) => option.value);
@@ -3283,6 +3302,7 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
   }
   render() {
     const allSelected = this.value.length === this.options.length;
+    const dropdownDisabled = this.disabled || this.readonly && this.selectedOptions.length === 0;
     return html`
       <div class="base" tabindex="0" aria-haspopup="listbox">
         <div class="value" odxPreventTextOverflow>
@@ -3298,17 +3318,25 @@ const _OdxSelect = class _OdxSelect extends ListboxFormControl {
     )}
         <odx-icon class="indicator" name="core::chevron-down"></odx-icon>
       </div>
-      <odx-dropdown part="dropdown" role="listbox" tabindex="-1" ?disabled=${this.disabled || this.readonly} match-reference-width>
+      <odx-dropdown part="dropdown" role="listbox" ?disabled=${dropdownDisabled} match-reference-width>
         ${when(
-      this.multiple,
+      !dropdownDisabled && this.multiple,
       () => html`
-            <odx-option type="checkbox" @click=${this.#handleToggleAll} ?selected=${allSelected} aria-hidden="true">Toggle all</odx-option>
+            <odx-option type="checkbox" @click=${this.#handleToggleAll} ?readonly=${this.readonly} ?selected=${allSelected} aria-hidden="true">Toggle all</odx-option>
           `
     )}
         <slot @slotchange=${this.#handleSlotChange}></slot>
       </odx-dropdown>
     `;
   }
+  updated(props) {
+    super.updated(props);
+    if (props.has("readonly")) {
+      this.updateOptions((option) => {
+        option.readonly = this.readonly;
+      });
+    }
+  }
   #isClearable() {
     return !(this.disabled || this.readonly || this.required) && this.selectedOptions.length > 0;
   }

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

@@ -20,6 +20,6 @@ export declare abstract class ListboxFormControl<Option extends OptionControl> e
     protected handleSlotChange(): void;
     protected updateValue(option?: Option): void;
     protected willUpdate(props: PropertyValues<this>): void;
-    protected updateSelection(): void;
+    protected updateOptions(updateFn: (option: Option) => void): void;
 }
 //# sourceMappingURL=listbox-form-control.d.ts.map

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

@@ -10,6 +10,7 @@ export declare abstract class OptionControl extends OptionControl_base implement
     get label(): string;
     value: string;
     selected: boolean;
+    readonly: boolean;
     type?: 'checkbox' | null;
     canActivate(): boolean;
     canSelect(): boolean;

package/dist/main.js

@@ -467,6 +467,7 @@ class OptionControl extends CanBeDisabled(CustomElement) {
     this.role = null;
     this.value = "";
     this.selected = false;
+    this.readonly = false;
   }
   #label;
   set label(value) {
@@ -479,7 +480,7 @@ class OptionControl extends CanBeDisabled(CustomElement) {
     return !(this.disabled || this.hidden);
   }
   canSelect() {
-    return this.canActivate();
+    return this.canActivate() && !this.readonly;
   }
   isActive() {
     return this.hasAttribute("odx-active") && !this.canActivate();
@@ -512,6 +513,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true, useDefault: true })
 ], OptionControl.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, useDefault: true })
+], OptionControl.prototype, "readonly", 2);
 __decorateClass([
   property()
 ], OptionControl.prototype, "type", 2);
@@ -612,7 +616,10 @@ class ListboxFormControl extends FormControl {
   willUpdate(props) {
     super.willUpdate(props);
     if (props.has("value")) {
-      this.updateSelection();
+      this.updateOptions((option) => {
+        if (!option.canSelect()) return;
+        option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
+      });
     }
     if (props.has("multiple")) {
       this.#handleMultipleChange();
@@ -622,11 +629,9 @@ class ListboxFormControl extends FormControl {
       this.setValidity({ valueMissing: this.required && this.value.length === 0 }, this.selectedOptions[0]);
     }
   }
-  updateSelection() {
-    if (this.disabled || this.options.length === 0) return;
+  updateOptions(updateFn) {
     for (const option of this.options ?? []) {
-      if (option.disabled) continue;
-      option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
+      updateFn(option);
     }
   }
   #handleOptionSelection(option) {
@@ -635,9 +640,9 @@ class ListboxFormControl extends FormControl {
   }
   #handleMultipleChange() {
     const optionType = this.multiple ? "checkbox" : null;
-    for (const option of this.options) {
+    this.updateOptions((option) => {
       option.type = optionType;
-    }
+    });
     if (!this.multiple && this.selectedOptions[0]) {
       this.updateValue(this.selectedOptions[0]);
     }

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.90",
+  "version": "1.0.0-beta.91",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",