@odx/foundation 1.0.0-beta.76 → 1.0.0-beta.78

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

@@ -10,10 +10,10 @@ export declare abstract class CheckboxGroupFormControl extends FormControl<strin
     value: string[];
     constructor();
     toFormValue(): FormData;
-    protected isIndeterminate(): boolean;
     protected isControl(element: unknown): element is CheckboxFormControl;
+    protected isControlChecked(control: CheckboxFormControl): boolean;
     protected updated(props: PropertyValues<this>): void;
-    protected updateCheckboxControls(updateFn: (control: CheckboxFormControl, index: number) => void): void;
+    protected updateControls(updateFn: (control: CheckboxFormControl, index: number) => void): void;
     protected updateValue(value: string[], dispatchEvent?: boolean): void;
 }
 //# sourceMappingURL=checkbox-group-form-control.d.ts.map

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

@@ -6,7 +6,7 @@ export declare class NumberFormControl extends FormControl<number> {
     step: number;
     value: number;
     getValueText(): string;
-    protected update(props: PropertyValues<this>): void;
+    protected willUpdate(props: PropertyValues<this>): void;
     toFormValue(): string;
 }
 //# sourceMappingURL=number-form-control.d.ts.map

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

@@ -15,7 +15,8 @@ export declare abstract class RadioGroupFormControl extends FormControl<string>
     getControls(): CheckboxFormControl[];
     connectedCallback(): void;
     protected isControl(element: unknown): element is CheckboxFormControl;
-    protected update(changes: PropertyValues<this>): void;
-    protected updateCheckboxControls(updateFn: (control: CheckboxFormControl, index: number) => void): Promise<void>;
+    protected isControlChecked(control: CheckboxFormControl): boolean;
+    protected willUpdate(changes: PropertyValues<this>): void;
+    protected updateControls(updateFn: (control: CheckboxFormControl, index: number) => void): void;
 }
 //# sourceMappingURL=radio-group-form-control.d.ts.map

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-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}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}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-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}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}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}}";
 
 function customElement(tagName, ...styles) {
   return (target) => {
@@ -291,10 +291,10 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
     return this.elements.filter((element) => element instanceof _CheckboxGroupFormControl);
   }
   get controls() {
-    return this.#findCheckboxControls((element) => !element.hasAttribute(GROUP_CONTROL_SELECTOR)).concat(this.childGroups.flatMap((group) => group.controls));
+    return this.#findControls((element) => !element.hasAttribute(GROUP_CONTROL_SELECTOR)).concat(this.childGroups.flatMap((group) => group.controls));
   }
   get groupControls() {
-    return this.#findCheckboxControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR));
+    return this.#findControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR));
   }
   toFormValue() {
     const formData = new FormData();
@@ -303,42 +303,42 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
     });
     return formData;
   }
-  isIndeterminate() {
-    return this.value.length > 0 && this.value.length < this.controls.length;
-  }
   isControl(element) {
     return element instanceof CheckboxFormControl;
   }
+  isControlChecked(control) {
+    return this.value.includes(control.value);
+  }
   updated(props) {
     super.updated(props);
     if (props.has("value")) {
-      this.updateCheckboxControls((control) => {
-        control.checked = this.value.includes(control.value);
+      this.updateControls((control) => {
+        control.checked = this.isControlChecked(control);
       });
       for (const groupControl of this.groupControls) {
         if (groupControl instanceof CheckboxFormControl && "indeterminate" in groupControl) {
-          groupControl.indeterminate = this.isIndeterminate();
+          groupControl.indeterminate = this.value.length > 0 && this.value.length < this.controls.length;
           groupControl.checked = this.controls.length > 0 && this.value.length === this.controls.length;
         }
       }
     }
     if (props.has("name")) {
-      this.updateCheckboxControls((control) => {
+      this.updateControls((control) => {
         control.name = this.name;
       });
     }
     if (props.has("disabled")) {
-      this.updateCheckboxControls((control) => {
+      this.updateControls((control) => {
         control.disabled = this.disabled;
       });
     }
     if (props.has("readonly")) {
-      this.updateCheckboxControls((control) => {
+      this.updateControls((control) => {
         control.readonly = this.readonly;
       });
     }
   }
-  updateCheckboxControls(updateFn) {
+  updateControls(updateFn) {
     this.controls.forEach(updateFn);
   }
   updateValue(value, dispatchEvent) {
@@ -347,7 +347,7 @@ const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormCo
     this.emit("change");
   }
   #handleChangeEvent;
-  #findCheckboxControls(predicate) {
+  #findControls(predicate) {
     return this.elements.filter((element) => this.isControl(element) && predicate(element));
   }
 };
@@ -565,7 +565,7 @@ class ListboxFormControl extends FormControl {
   toggleOption(option, state) {
     if (!this.canSelect(option)) return;
     const newState = state ?? (this.required && !this.multiple || !option.selected);
-    if (this.disabled) return;
+    if (this.disabled || this.readonly) return;
     option.selected = newState;
     this.updateValue(option);
     if (newState) {
@@ -667,7 +667,7 @@ class NumberFormControl extends FormControl {
   getValueText() {
     return this.ariaValueText?.trim() ?? "";
   }
-  update(props) {
+  willUpdate(props) {
     if (props.has("value")) {
       this.internals.ariaValueNow = String(this.value);
       this.internals.ariaValueText = this.getValueText();
@@ -682,7 +682,7 @@ class NumberFormControl extends FormControl {
       this.step = Math.max(MIN_STEP_VALUE, this.step);
     }
     this.value = Math.max(this.min, Math.min(this.value, this.max));
-    super.update(props);
+    super.willUpdate(props);
   }
   toFormValue() {
     return String(this.value);
@@ -713,9 +713,13 @@ class RadioGroupFormControl extends FormControl {
       this.addEventListener("change", this.#handleChange, { capture: true });
       new RovingTabindexController(this, {
         direction: "both",
+        hostDelegatesFocus: true,
         elements: () => this.getControls(),
         elementEnterAction: (element) => element.click(),
-        focusInIndex: (elements) => elements.findIndex((element) => element.checked)
+        focusInIndex: (elements) => {
+          const selectedIndex = elements.findIndex((control) => this.isControlChecked(control));
+          return selectedIndex !== -1 ? selectedIndex : 0;
+        }
       });
     }
   }
@@ -735,25 +739,28 @@ class RadioGroupFormControl extends FormControl {
   isControl(element) {
     return element instanceof CheckboxFormControl;
   }
-  update(changes) {
+  isControlChecked(control) {
+    return this.value === control.value;
+  }
+  willUpdate(changes) {
     super.update(changes);
     if (changes.has("value")) {
-      this.updateCheckboxControls((control) => {
-        control.checked = this.value.includes(control.value);
+      this.updateControls((control) => {
+        control.checked = this.isControlChecked(control);
       });
     }
     if (changes.has("name")) {
-      this.updateCheckboxControls((control) => {
+      this.updateControls((control) => {
         control.name = this.name;
       });
     }
     if (changes.has("disabled")) {
-      this.updateCheckboxControls((control) => {
+      this.updateControls((control) => {
         control.disabled = this.disabled;
       });
     }
     if (changes.has("readonly")) {
-      this.updateCheckboxControls((control) => {
+      this.updateControls((control) => {
         control.readonly = this.readonly;
       });
     }
@@ -763,8 +770,7 @@ class RadioGroupFormControl extends FormControl {
       this.setValidity({ valueMissing: this.required && this.value.length === 0 }, firstControl);
     }
   }
-  async updateCheckboxControls(updateFn) {
-    await 0;
+  updateControls(updateFn) {
     this.getControls().forEach(updateFn);
   }
   #handleChange;

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-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}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}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)}}:root{--odx-color-background-neutral-rest: var(--odx-palette-white);--odx-color-background-neutral-subtle: var(--odx-palette-coolgray-00);--odx-color-background-neutral-hover: var(--odx-palette-coolgray-30);--odx-color-background-neutral-pressed: var(--odx-palette-coolgray-40);--odx-color-stroke-control-rest: var(--odx-color-stroke-primary-rest);--odx-color-stroke-control-hover: var(--odx-color-stroke-primary-rest);--odx-color-stroke-control-pressed: var(--odx-color-stroke-primary-rest);--odx-color-stroke-control-readonly: var(--odx-color-stroke-primary-rest);--odx-color-background-control-selected: var(--odx-color-background-primary-rest);--odx-color-background-control-selected-hover: var(--odx-color-background-primary-hover);--odx-color-background-control-selected-pressed: var(--odx-color-background-primary-pressed);--odx-color-background-control-readonly: var(--odx-color-background-disabled-rest);--odx-experience-color-secondary-rest: var(--odx-palette-coolgray-30);--odx-experience-color-secondary-hover: var(--odx-palette-coolgray-40);--odx-experience-color-secondary-pressed: var(--odx-palette-coolgray-50)}@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-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}odx-accordion[indicator-position=start]{odx-accordion-item::part(indicator){--rotate: -90deg;order:-1}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)}}:root{--odx-color-background-neutral-rest: var(--odx-palette-white);--odx-color-background-neutral-subtle: var(--odx-palette-coolgray-00);--odx-color-background-neutral-hover: var(--odx-palette-coolgray-30);--odx-color-background-neutral-pressed: var(--odx-palette-coolgray-40);--odx-color-stroke-control-rest: var(--odx-color-stroke-primary-rest);--odx-color-stroke-control-hover: var(--odx-color-stroke-primary-rest);--odx-color-stroke-control-pressed: var(--odx-color-stroke-primary-rest);--odx-color-stroke-control-readonly: var(--odx-color-stroke-primary-rest);--odx-color-background-control-selected: var(--odx-color-background-primary-rest);--odx-color-background-control-selected-hover: var(--odx-color-background-primary-hover);--odx-color-background-control-selected-pressed: var(--odx-color-background-primary-pressed);--odx-experience-color-secondary-rest: var(--odx-palette-coolgray-30);--odx-experience-color-secondary-hover: var(--odx-palette-coolgray-40);--odx-experience-color-secondary-pressed: var(--odx-palette-coolgray-50)}@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.76",
+  "version": "1.0.0-beta.78",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -19,7 +19,7 @@
     "lit": "3.3.0"
   },
   "peerDependencies": {
-    "@odx/design-tokens": "^1.0.0",
+    "@odx/design-tokens": "^1.0.2",
     "@odx/icons": "^4.0.0-rc.29"
   },
   "devDependencies": {