@odx/foundation 1.0.0-beta.2 → 1.0.0-beta.20

package/dist/styles.css

@@ -1 +1 @@
-@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:before,:after{box-sizing:border-box}[popover]{border:none;outline:none}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}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}#root,#__next{isolation:isolate;margin:0}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}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)}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@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-primary-rest) var(--odx-palette-transparent)}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--odx-color-foreground-base);background-color:var(--odx-color-background-cool);font-family:var(--odx-typography-font-family-base),"Noto Sans","Kanit",sans-serif;font-size:var(--odx-typography-font-size-base);line-height:var(--odx-typography-line-height-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]{border:none;outline:none}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}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}#root,#__next{isolation:isolate;margin:0}}@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{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}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)}odx-icon{--rotate: 0deg;transition:var(--odx-transition-default);transition-property:transform;transform:rotate(var(--rotate))}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}odx-list-item:has(:is(odx-button,odx-icon-button,odx-list-item::part(control)):not([aria-disabled=true]):active){--_color-background-pressed: var(--_color-background-hover)}odx-button:has(odx-icon:only-child),odx-button:has(odx-avatar){--_min-inline-size: 0}odx-accordion[control-position=start] odx-accordion-header::part(expand-control){--icon-rotation: -90deg;order:-1}odx-accordion[control-position=start] odx-accordion-header[expanded]::part(expand-control){--icon-rotation: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@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-primary-rest) var(--odx-palette-transparent)}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--odx-color-foreground-base);background-color:var(--odx-color-background-cool);font-family:var(--odx-typography-font-family-base),"Noto Sans","Kanit",sans-serif;font-size:var(--odx-typography-font-size-base);line-height:var(--odx-typography-line-height-base)}}

package/dist/vendor-dJxQG085.js

@@ -0,0 +1,138 @@
+function round(value, precision = 0) {
+    if (!Number.isInteger(precision)) {
+        throw new Error('Precision must be an integer.');
+    }
+    const multiplier = Math.pow(10, precision);
+    return Math.round(value * multiplier) / multiplier;
+}
+
+function minBy(items, getValue) {
+    let minElement = items[0];
+    let min = Infinity;
+    for (let i = 0; i < items.length; i++) {
+        const element = items[i];
+        const value = getValue(element);
+        if (value < min) {
+            min = value;
+            minElement = element;
+        }
+    }
+    return minElement;
+}
+
+function uniqBy(arr, mapper) {
+    const map = new Map();
+    for (let i = 0; i < arr.length; i++) {
+        const item = arr[i];
+        const key = mapper(item);
+        if (!map.has(key)) {
+            map.set(key, item);
+        }
+    }
+    return Array.from(map.values());
+}
+
+function o(i,e,t){return typeof i===e?()=>i:typeof i=="function"?i:t}class FocusGroupController{constructor(e,{hostDelegatesFocus:t,direction:n,elementEnterAction:s,elements:r,focusInIndex:h,isFocusableElement:c,listenerScope:l}={elements:()=>[]}){this._currentIndex=-1;this.prevIndex=-1;this._direction=()=>"both";this.directionLength=5;this.hostDelegatesFocus=false;this.elementEnterAction=e=>{};this._focused=false;this._focusInIndex=e=>0;this.isFocusableElement=e=>true;this._listenerScope=()=>this.host;this.offset=0;this.recentlyConnected=false;this.handleFocusin=e=>{if(!this.isEventWithinListenerScope(e))return;const t=e.composedPath();let n=-1;t.find(s=>(n=this.elements.indexOf(s),n!==-1)),this.prevIndex=this.currentIndex,this.currentIndex=n>-1?n:this.currentIndex,this.isRelatedTargetOrContainAnElement(e)&&this.hostContainsFocus();};this.handleClick=()=>{var n;const e=this.elements;if(!e.length)return;let t=e[this.currentIndex];this.currentIndex<0||((!t||!this.isFocusableElement(t))&&(this.setCurrentIndexCircularly(1),t=e[this.currentIndex]),t&&this.isFocusableElement(t)&&((n=e[this.prevIndex])==null||n.setAttribute("tabindex","-1"),t.setAttribute("tabindex","0")));};this.handleFocusout=e=>{this.isRelatedTargetOrContainAnElement(e)&&this.hostNoLongerContainsFocus();};this.handleKeydown=e=>{if(!this.acceptsEventKey(e.key)||e.defaultPrevented)return;let t=0;switch(this.prevIndex=this.currentIndex,e.key){case "ArrowRight":t+=1;break;case "ArrowDown":t+=this.direction==="grid"?this.directionLength:1;break;case "ArrowLeft":t-=1;break;case "ArrowUp":t-=this.direction==="grid"?this.directionLength:1;break;case "End":this.currentIndex=0,t-=1;break;case "Home":this.currentIndex=this.elements.length-1,t+=1;break}e.preventDefault(),this.direction==="grid"&&this.currentIndex+t<0?this.currentIndex=0:this.direction==="grid"&&this.currentIndex+t>this.elements.length-1?this.currentIndex=this.elements.length-1:this.setCurrentIndexCircularly(t),this.elementEnterAction(this.elements[this.currentIndex]),this.focus();};this.mutationObserver=new MutationObserver(()=>{this.handleItemMutation();}),this.hostDelegatesFocus=t||false,this.host=e,this.host.addController(this),this._elements=r,this.isFocusableElement=c||this.isFocusableElement,this._direction=o(n,"string",this._direction),this.elementEnterAction=s||this.elementEnterAction,this._focusInIndex=o(h,"number",this._focusInIndex),this._listenerScope=o(l,"object",this._listenerScope);}get currentIndex(){return this._currentIndex===-1&&(this._currentIndex=this.focusInIndex),this._currentIndex-this.offset}set currentIndex(e){this._currentIndex=e+this.offset;}get direction(){return this._direction()}get elements(){return this.cachedElements||(this.cachedElements=this._elements()),this.cachedElements}set focused(e){e!==this.focused&&(this._focused=e);}get focused(){return this._focused}get focusInElement(){return this.elements[this.focusInIndex]}get focusInIndex(){return this._focusInIndex(this.elements)}isEventWithinListenerScope(e){return this._listenerScope()===this.host?true:e.composedPath().includes(this._listenerScope())}handleItemMutation(){if(this._currentIndex==-1||this.elements.length<=this._elements().length)return;const e=this.elements[this.currentIndex];if(this.clearElementCache(),this.elements.includes(e))return;const t=this.currentIndex!==this.elements.length,n=t?1:-1;t&&this.setCurrentIndexCircularly(-1),this.setCurrentIndexCircularly(n),this.focus();}update({elements:e}={elements:()=>[]}){this.unmanage(),this._elements=e,this.clearElementCache(),this.manage();}reset(){var n;const e=this.elements;if(!e.length)return;this.setCurrentIndexCircularly(this.focusInIndex-this.currentIndex);let t=e[this.currentIndex];this.currentIndex<0||((!t||!this.isFocusableElement(t))&&(this.setCurrentIndexCircularly(1),t=e[this.currentIndex]),t&&this.isFocusableElement(t)&&((n=e[this.prevIndex])==null||n.setAttribute("tabindex","-1"),t.setAttribute("tabindex","0")));}focusOnItem(e,t){var n;if(e&&this.isFocusableElement(e)&&this.elements.indexOf(e)){const s=this.elements.indexOf(e)-this.currentIndex;this.setCurrentIndexCircularly(s),(n=this.elements[this.prevIndex])==null||n.setAttribute("tabindex","-1");}this.focus(t);}focus(e){var s;const t=this.elements;if(!t.length)return;let n=t[this.currentIndex];(!n||!this.isFocusableElement(n))&&(this.setCurrentIndexCircularly(1),n=t[this.currentIndex]),n&&this.isFocusableElement(n)&&((!this.hostDelegatesFocus||t[this.prevIndex]!==n)&&((s=t[this.prevIndex])==null||s.setAttribute("tabindex","-1")),n.tabIndex=0,n.focus(e),this.hostDelegatesFocus&&!this.focused&&this.hostContainsFocus());}clearElementCache(e=0){this.mutationObserver.disconnect(),delete this.cachedElements,this.offset=e,requestAnimationFrame(()=>{this.elements.forEach(t=>{this.mutationObserver.observe(t,{attributes:true});});});}setCurrentIndexCircularly(e){const{length:t}=this.elements;let n=t;this.prevIndex=this.currentIndex;let s=(t+this.currentIndex+e)%t;for(;n&&this.elements[s]&&!this.isFocusableElement(this.elements[s]);)s=(t+s+e)%t,n-=1;this.currentIndex=s;}hostContainsFocus(){this.host.addEventListener("focusout",this.handleFocusout),this.host.addEventListener("keydown",this.handleKeydown),this.focused=true;}hostNoLongerContainsFocus(){this.host.addEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.focused=false;}isRelatedTargetOrContainAnElement(e){const t=e.relatedTarget,n=this.elements.includes(t),s=this.elements.some(r=>r.contains(t));return !(n||s)}acceptsEventKey(e){if(e==="End"||e==="Home")return  true;switch(this.direction){case "horizontal":return e==="ArrowLeft"||e==="ArrowRight";case "vertical":return e==="ArrowUp"||e==="ArrowDown";case "both":case "grid":return e.startsWith("Arrow")}}manage(){this.addEventListeners();}unmanage(){this.removeEventListeners();}addEventListeners(){this.host.addEventListener("focusin",this.handleFocusin),this.host.addEventListener("click",this.handleClick);}removeEventListeners(){this.host.removeEventListener("focusin",this.handleFocusin),this.host.removeEventListener("focusout",this.handleFocusout),this.host.removeEventListener("keydown",this.handleKeydown),this.host.removeEventListener("click",this.handleClick);}hostConnected(){this.recentlyConnected=true,this.addEventListeners();}hostDisconnected(){this.mutationObserver.disconnect(),this.removeEventListeners();}hostUpdated(){this.recentlyConnected&&(this.recentlyConnected=false,this.elements.forEach(e=>{this.mutationObserver.observe(e,{attributes:true});}));}}
+
+class RovingTabindexController extends FocusGroupController{constructor(){super(...arguments);this.managed=true;this.manageIndexesAnimationFrame=0;}set focused(e){e!==this.focused&&(super.focused=e,this.manageTabindexes());}get focused(){return super.focused}clearElementCache(e=0){cancelAnimationFrame(this.manageIndexesAnimationFrame),super.clearElementCache(e),this.managed&&(this.manageIndexesAnimationFrame=requestAnimationFrame(()=>this.manageTabindexes()));}manageTabindexes(){this.focused&&!this.hostDelegatesFocus?this.updateTabindexes(()=>({tabIndex:-1})):this.updateTabindexes(e=>({removeTabIndex:e.contains(this.focusInElement)&&e!==this.focusInElement,tabIndex:e===this.focusInElement?0:-1}));}updateTabindexes(e){this.elements.forEach(a=>{const{tabIndex:n,removeTabIndex:s}=e(a);if(!s){this.focused?a!==this.elements[this.currentIndex]&&(a.tabIndex=n):a.tabIndex=n;return}const t=a;t.requestUpdate&&t.requestUpdate();});}manage(){this.managed=true,this.manageTabindexes(),super.manage();}unmanage(){this.managed=false,this.updateTabindexes(()=>({tabIndex:0})),super.unmanage();}hostUpdated(){super.hostUpdated(),this.host.hasUpdated||this.manageTabindexes();}}
+
+function debounce(func, debounceMs, { signal, edges } = {}) {
+    let pendingThis = undefined;
+    let pendingArgs = null;
+    const leading = edges != null && edges.includes('leading');
+    const trailing = edges == null || edges.includes('trailing');
+    const invoke = () => {
+        if (pendingArgs !== null) {
+            func.apply(pendingThis, pendingArgs);
+            pendingThis = undefined;
+            pendingArgs = null;
+        }
+    };
+    const onTimerEnd = () => {
+        if (trailing) {
+            invoke();
+        }
+        cancel();
+    };
+    let timeoutId = null;
+    const schedule = () => {
+        if (timeoutId != null) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = null;
+            onTimerEnd();
+        }, debounceMs);
+    };
+    const cancelTimer = () => {
+        if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+    };
+    const cancel = () => {
+        cancelTimer();
+        pendingThis = undefined;
+        pendingArgs = null;
+    };
+    const flush = () => {
+        cancelTimer();
+        invoke();
+    };
+    const debounced = function (...args) {
+        if (signal?.aborted) {
+            return;
+        }
+        pendingThis = this;
+        pendingArgs = args;
+        const isFirstCall = timeoutId == null;
+        schedule();
+        if (leading && isFirstCall) {
+            invoke();
+        }
+    };
+    debounced.schedule = schedule;
+    debounced.cancel = cancel;
+    debounced.flush = flush;
+    signal?.addEventListener('abort', cancel, { once: true });
+    return debounced;
+}
+
+function isPlainObject(value) {
+    if (!value || typeof value !== 'object') {
+        return false;
+    }
+    const proto = Object.getPrototypeOf(value);
+    const hasObjectPrototype = proto === null ||
+        proto === Object.prototype ||
+        Object.getPrototypeOf(proto) === null;
+    if (!hasObjectPrototype) {
+        return false;
+    }
+    return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+function flattenObject(object, { delimiter = '.' } = {}) {
+    return flattenObjectImpl(object, '', delimiter);
+}
+function flattenObjectImpl(object, prefix = '', delimiter = '.') {
+    const result = {};
+    const keys = Object.keys(object);
+    for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        const value = object[key];
+        const prefixedKey = prefix ? `${prefix}${delimiter}${key}` : key;
+        if (isPlainObject(value) && Object.keys(value).length > 0) {
+            Object.assign(result, flattenObjectImpl(value, prefixedKey, delimiter));
+            continue;
+        }
+        if (Array.isArray(value)) {
+            Object.assign(result, flattenObjectImpl(value, prefixedKey, delimiter));
+            continue;
+        }
+        result[prefixedKey] = value;
+    }
+    return result;
+}
+
+export { RovingTabindexController as R, debounce as d, flattenObject as f, minBy as m, round as r, uniqBy as u };

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.2",
+  "version": "1.0.0-beta.20",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -13,25 +13,25 @@
     "lint": "biome lint ."
   },
   "dependencies": {
-    "@lit-labs/preact-signals": "~1.0.3",
+    "@floating-ui/dom": "~1.6.13",
     "@lit/context": "~1.1.4",
+    "@lit-labs/preact-signals": "~1.0.3",
     "@odx/design-tokens": "^1.0.0-alpha.8",
+    "focus-trap": "~7.6.4",
     "lit": "~3.2.1"
   },
+  "peerDependencies": {
+    "@odx/icons": "^4.0.0-rc.15"
+  },
   "devDependencies": {
-    "@floating-ui/dom": "1.6.13",
     "@odx/typescript-config": "*",
     "@spectrum-web-components/reactive-controllers": "1.4.0",
     "es-toolkit": "1.34.1",
-    "focus-trap": "7.6.4",
     "ts-lit-plugin": "2.0.2",
-    "vite": "6.2.3",
+    "vite": "6.2.5",
     "vite-plugin-checker": "0.9.1",
     "vite-plugin-dts": "4.5.3"
   },
-  "peerDependencies": {
-    "@odx/icons": "^4.0.0-rc.15"
-  },
   "sideEffects": ["dist/loader.js", "*.css"],
   "exports": {
     ".": {

package/dist/lib/decorators/request-update-on-aria-change.d.ts

@@ -1,4 +0,0 @@
-import { ReactiveElement } from 'lit';
-import { ARIAProperty } from '../utils/a11y.js';
-export declare function requestUpdateOnAriaChange(ariaProperties: ARIAProperty[]): (ctor: typeof ReactiveElement) => void;
-//# sourceMappingURL=request-update-on-aria-change.d.ts.map

package/dist/lib/directives/optional-attr.d.ts

@@ -1,2 +0,0 @@
-export declare const optionalAttr: <T>(value: T) => NonNullable<T>;
-//# sourceMappingURL=optional-attr.d.ts.map

package/dist/lib/directives/optional-slot.d.ts

@@ -1,3 +0,0 @@
-import { ReactiveElement, TemplateResult, nothing } from 'lit';
-export declare function optionalSlot(host: ReactiveElement, slotName: string): TemplateResult | typeof nothing;
-//# sourceMappingURL=optional-slot.d.ts.map

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

@@ -1,16 +0,0 @@
-import { PropertyValueMap } from 'lit';
-import { CustomElement } from '../custom-element.js';
-import { CanBeDisabled } from '../mixins/can-be-disabled.js';
-declare const OptionControl_base: import('../main.js').Constructor<CanBeDisabled> & typeof CustomElement;
-export declare abstract class OptionControl extends OptionControl_base {
-    role: 'option' | 'gridcell' | 'row' | 'tab' | null;
-    selected: boolean;
-    value: string;
-    getTextLabel(): string;
-    setActive(): void;
-    setInactive(): void;
-    connectedCallback(): void;
-    protected willUpdate(changes: PropertyValueMap<this>): void;
-}
-export {};
-//# sourceMappingURL=option-control.d.ts.map

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

@@ -1,19 +0,0 @@
-import { PropertyValues } from 'lit';
-import { CustomElement } from '../custom-element.js';
-import { OptionControl } from './option-control.js';
-declare const SelectFormControl_base: import('../main.js').Constructor<import('../mixins/form-control.js').IsFormControl<string | string[]>> & typeof CustomElement;
-export declare abstract class SelectFormControl<Option extends OptionControl = OptionControl> extends SelectFormControl_base {
-    #private;
-    protected abstract options: Option[];
-    multiple: boolean;
-    value: string[] | string;
-    get selectedOptions(): MapIterator<Option>;
-    constructor();
-    toggle(option: OptionControl, state?: boolean, emitEvent?: boolean): void;
-    protected updateValue(option: OptionControl): void;
-    protected willUpdate(changes: PropertyValues<this>): void;
-    protected updateSelection(): Promise<void>;
-    protected handleKeyboardEvent: (event: KeyboardEvent) => void;
-}
-export {};
-//# sourceMappingURL=select-form-control.d.ts.map

package/dist/lib/utils/object.d.ts

@@ -1,2 +0,0 @@
-export declare function createOptions<T extends object>(defaultOptions: T): (options?: Partial<T> | null) => T;
-//# sourceMappingURL=object.d.ts.map