@odx/foundation 1.0.0-beta.234 → 1.0.0-beta.236

package/dist/breakpoints/main.d.ts

@@ -16,7 +16,7 @@ export declare const defaultBreakpoints: {
         readonly max: 1199.98;
     };
 };
-export default function setupBreakpoints(breakpointsConfig?: BreakpointConfig[], root?: HTMLElement): () => void;
+export default function setupBreakpoints(breakpointsConfig?: BreakpointConfig[]): () => void;
 export * from './models.js';
 export * from './plugins.js';
 export * from './utils.js';

package/dist/breakpoints/utils.d.ts

@@ -1,10 +1,10 @@
 import { Signal } from '@preact/signals-core';
-import { Breakpoint, BreakpointChange, BreakpointConfig, BreakpointOperator, BreakpointPlugin } from './models.js';
+import { Breakpoint, BreakpointChange, BreakpointConfig, BreakpointOperator } from './models.js';
 export declare const breakpointDirective: import('../utils/main.js').StringAttributeDirective<"odx-breakpoint">;
 export declare function buildBreakpoint(breakpoint: BreakpointConfig, operator?: BreakpointOperator): Breakpoint;
-export declare function createBreakpointHandler(plugins: BreakpointPlugin[], targets: HTMLElement[]): (change: BreakpointChange) => void;
-export declare function expandBreakpoints(...breakpoints: BreakpointConfig[]): Record<string, Breakpoint>;
+export declare function expandBreakpoints(...breakpoints: BreakpointConfig[]): Breakpoint[];
 export declare function observeBreakpoint(breakpoint: Breakpoint, initialValue?: boolean): Signal<Breakpoint & {
     matches: boolean;
 }>;
+export declare function createBreakpointDirectiveUpdater(breakpoints: Breakpoint[], update: (target: HTMLElement, change: BreakpointChange) => void): () => void;
 //# sourceMappingURL=utils.d.ts.map

package/dist/breakpoints.js

@@ -1,6 +1,5 @@
+import { signal, effect } from '@preact/signals-core';
 import { stringAttributeDirective, observeMedia } from '@odx/foundation/utils';
-import { signal } from '@preact/signals-core';
-import { k as keyBy, g as groupBy } from './vendor.js';
 
 const BreakpointHideTargetPlugin = (target, change) => {
   target.hidden = !change.matches;
@@ -34,23 +33,10 @@ function buildBreakpoint(breakpoint, operator) {
       query = `(min-width: ${breakpoint.max + 0.02}px)`;
       break;
   }
-  query = [query, breakpoint.customQuery].filter(Boolean).join(" and ");
-  return { ...breakpoint, id, operator, query };
-}
-function createBreakpointHandler(plugins, targets) {
-  return (change) => {
-    for (const plugin of plugins) {
-      for (const target of targets) {
-        plugin(target, change);
-      }
-    }
-  };
+  return { ...breakpoint, id, operator, query: [query, breakpoint.customQuery].filter(Boolean).join(" and ") };
 }
 function expandBreakpoints(...breakpoints) {
-  const expandBreakpoints2 = breakpoints.flatMap(
-    (breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator))
-  );
-  return keyBy(expandBreakpoints2, (breakpoint) => breakpoint.id);
+  return breakpoints.flatMap((breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator)));
 }
 function observeBreakpoint(breakpoint, initialValue = false) {
   let unobserveMedia;
@@ -68,38 +54,61 @@ function observeBreakpoint(breakpoint, initialValue = false) {
     }
   );
 }
-
-function unsubscribeAll(subscriptions) {
-  for (const unsubscribe of subscriptions) {
-    unsubscribe();
-    subscriptions.delete(unsubscribe);
-  }
+function createBreakpointDirectiveUpdater(breakpoints, update) {
+  const breakpointObservers = breakpoints.map((breakpoint) => observeBreakpoint(breakpoint));
+  return () => {
+    const results = breakpointObservers.reduce(
+      (breakpoints2, { value }) => {
+        breakpoints2[value.id] = value;
+        return breakpoints2;
+      },
+      {}
+    );
+    const directives = document.querySelectorAll(breakpointDirective.selector);
+    let i = directives.length;
+    while (i--) {
+      const directive = directives[i];
+      const result = results[breakpointDirective.value(directive) ?? ""];
+      if (!result) continue;
+      update(directive, result);
+    }
+  };
 }
+
 const defaultBreakpoints = {
   mobile: { id: "mobile", min: 0, max: 575.98 },
   tablet: { id: "tablet", min: 576, max: 991.98 },
   desktop: { id: "desktop", min: 992, max: 1199.98 }
 };
-function setupBreakpoints(breakpointsConfig = [], root = document.documentElement) {
+function setupBreakpoints(breakpointsConfig = []) {
   const breakpoints = expandBreakpoints(...Object.values(defaultBreakpoints), ...breakpointsConfig);
   const plugins = [BreakpointHideTargetPlugin, BreakpointClassNamePlugin];
-  const subscriptions = /* @__PURE__ */ new Set();
-  const observer = new MutationObserver((mutations) => {
-    if (mutations.length === 0) return;
-    const breakpointDirectives = Array.from(document.querySelectorAll(breakpointDirective.selector));
-    unsubscribeAll(subscriptions);
-    const breakpointTargets = groupBy(breakpointDirectives, (host) => breakpointDirective.value(host) ?? "");
-    for (const [breakpointId, targets] of Object.entries(breakpointTargets)) {
-      const breakpoint = breakpoints[breakpointId];
-      if (!breakpoint) continue;
-      subscriptions.add(observeBreakpoint(breakpoint).subscribe(createBreakpointHandler(plugins, targets)));
+  const directiveUpdater = createBreakpointDirectiveUpdater(breakpoints, (target, change) => {
+    for (const plugin of plugins) {
+      plugin(target, change);
     }
   });
-  observer.observe(root, { subtree: true, childList: true, attributes: true, attributeFilter: [breakpointDirective.attribute] });
-  return () => {
-    unsubscribeAll(subscriptions);
-    observer.disconnect();
+  let mutationObserver;
+  let unobserveBreakpoints = () => {
   };
+  function initBreakpoints() {
+    destroyBreakpoints();
+    mutationObserver = new MutationObserver(directiveUpdater);
+    unobserveBreakpoints = effect(directiveUpdater);
+    mutationObserver.observe(document.documentElement, {
+      attributes: true,
+      subtree: true,
+      childList: true,
+      attributeFilter: [breakpointDirective.attribute]
+    });
+  }
+  function destroyBreakpoints() {
+    unobserveBreakpoints();
+    mutationObserver?.disconnect();
+    globalThis.removeEventListener("DOMContentLoaded", initBreakpoints);
+  }
+  globalThis.addEventListener("DOMContentLoaded", initBreakpoints);
+  return destroyBreakpoints;
 }
 
-export { BreakpointClassNamePlugin, BreakpointHideTargetPlugin, breakpointDirective, buildBreakpoint, createBreakpointHandler, setupBreakpoints as default, defaultBreakpoints, expandBreakpoints, observeBreakpoint };
+export { BreakpointClassNamePlugin, BreakpointHideTargetPlugin, breakpointDirective, buildBreakpoint, createBreakpointDirectiveUpdater, setupBreakpoints as default, defaultBreakpoints, expandBreakpoints, observeBreakpoint };

package/dist/components.js

@@ -1,9 +1,9 @@
 import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
 import { CustomElement, customElement, CanBeExpanded, InteractiveControlElement, Alignment, ControlSize, ExpandableItemManager, Size, Variant, LinkControlElement, activeDirective, CanBeDisabled, Placement, OptionControl, ControlElement, OptionType, FormAssociated, ActiveDescendantsController, Shape, CheckboxControl, CheckboxControlGroup, DialogElement, WithPresets, RadioGroupControl, CanBeCollapsed, ListboxControl, IsDraggable, NumberFormControl, dragActiveDirective, DragController } from '@odx/foundation';
-import { getUniqueId, toAriaBooleanAttribute, getAssignedElements, booleanAttributeDirective, optionalAttr, interactionResponse, getElementFromEvent, observeElementResize, unobserveElementResize, toPx, enableMotion, findClosestDocument, commandDirective, addGlobalEventListener, waitForAnimations, removeGlobalEventListener, getKeyInfo, clickedOutside, setFocusable, optionalSlot, parseDate, supportsHover, forwardEvent, isToggleOpen } from '@odx/foundation/utils';
+import { getUniqueId, toAriaBooleanAttribute, getAssignedElements, booleanAttributeDirective, optionalAttr, interactionResponse, getElementFromEvent, observeElementResize, unobserveElementResize, toPx, enableMotion, findClosestDocument, commandDirective, addGlobalEventListener, waitForAnimations, removeGlobalEventListener, getKeyInfo, clickedOutside, setFocusable, optionalSlot, parseDate, supportsHover, forwardEvent } from '@odx/foundation/utils';
 import { html, isServer, unsafeCSS, css, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import { p as pick, R as RovingTabindexController, e, c as computePosition, o as offset, s as shift, f as flip, a as size, b as arrow, h as hide, d as autoUpdate, t as throttle, r as round, i as debounce } from './vendor.js';
+import { p as pick, R as RovingTabindexController, e, c as computePosition, o as offset, s as shift, f as flip, a as size, b as arrow, h as hide, d as autoUpdate, r as round, g as debounce } from './vendor.js';
 import { when } from 'lit/directives/when.js';
 import { OdxIconElement } from '@odx/icons';
 import { IsLocalized } from '@odx/foundation/i18n';
@@ -948,7 +948,9 @@ const _PopoverHost = class _PopoverHost extends CanBeDisabled(CustomElement) {
     this.#handleReferenceKeydown = (event) => {
       const shouldHide = this.hasOpenPopover(this.referenceElement) && getKeyInfo(event).escape;
       if (event.defaultPrevented || !shouldHide) return;
+      event.preventDefault();
       event.stopPropagation();
+      this.hidePopover();
     };
     if (!isServer) {
       this.addEventListener("toggle", this.#handleToggle);
@@ -1015,10 +1017,7 @@ const _PopoverHost = class _PopoverHost extends CanBeDisabled(CustomElement) {
     this.#positionUpdater = autoUpdate(
       this.referenceElement,
       this,
-      throttle(
-        () => this.referenceElement && computePopoverPlacement(this.referenceElement, this, this.popoverPlacementOptions),
-        1e3 / this.fpsLimit
-      )
+      () => this.referenceElement && computePopoverPlacement(this.referenceElement, this, this.popoverPlacementOptions)
     );
   }
   hidePopover() {
@@ -1264,7 +1263,7 @@ __decorateClass([
 ], _OdxHighlight.prototype, "variant", 2);
 let OdxHighlight = _OdxHighlight;
 
-const styles$15 = "@layer base{:host{content-visibility:auto}odx-checkbox{padding:0}.label{flex:auto}.indicator{--size:var(--odx-control-addon-size-sm);margin-inline:var(--odx-spacing-12)}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}@layer state{:host([readonly]){pointer-events:none}:host([odx-active]:not([readonly])){--_color-background:var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-background-pressed:var(--odx-color-background-transparent-selected-hover)}:host([selected][odx-active]:not([readonly])){--_color-background:var(--odx-color-background-transparent-selected-hover)}}";
+const styles$15 = "@layer base{:host{content-visibility:auto;contain:size}odx-checkbox{padding:0}.label{flex:auto}.indicator{--size:var(--odx-control-addon-size-sm);margin-inline:var(--odx-spacing-12)}:host(:focus-visible){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}@layer state{:host([readonly]){pointer-events:none}:host([odx-active]:not([readonly])){--_color-background:var(--odx-color-background-transparent-pressed)}:host([selected]){--_color-background:var(--odx-color-background-transparent-selected);--_color-background-hover:var(--odx-color-background-transparent-selected-hover);--_color-background-pressed:var(--odx-color-background-transparent-selected-hover)}:host([selected][odx-active]:not([readonly])){--_color-background:var(--odx-color-background-transparent-selected-hover)}}";
 
 class OdxOption extends OptionControl(ControlElement) {
   static {
@@ -1293,7 +1292,7 @@ const _OdxAutocomplete = class _OdxAutocomplete extends FormAssociated(CustomEle
     this.activeDescendants = new ActiveDescendantsController(this, {
       getItems: () => this.options,
       onChange: (_, option, firstChange) => {
-        option?.scrollIntoView();
+        option?.scrollIntoView({ block: "nearest", behavior: "instant" });
         if (!option || firstChange || option.selected) return;
         option?.activate();
       }
@@ -3642,11 +3641,7 @@ const _OdxSelect = class _OdxSelect extends ListboxControl {
       this.requestUpdate("value");
     };
     this.#handleDropdownToggle = (event) => {
-      this.dropdownOpen = isToggleOpen(event);
-      if (!isToggleOpen(event)) return;
-      const [selectedOption] = this.getSelectedOptions();
-      if (!selectedOption) return;
-      selectedOption.scrollIntoView({ behavior: "instant" });
+      this.dropdownOpen = event.newState === "open";
     };
     this.#handleBlur = () => {
       this.dropdown.hidePopover();

package/dist/i18n.js

@@ -1,5 +1,5 @@
 import { signal, computed } from '@preact/signals-core';
-import { j as flattenObject, e } from './vendor.js';
+import { i as flattenObject, e } from './vendor.js';
 import { parseDate } from '@odx/foundation/utils';
 import { _ as __decorateClass } from './_virtual_class-decorator-runtime.js';
 import 'lit/html.js';

package/dist/main.js

@@ -589,7 +589,9 @@ class ListboxControl extends FormAssociated(
     this.activeDescendants = new ActiveDescendantsController(this, {
       getItems: () => this.getOptions(),
       onChange: (_, option) => {
-        const canAutoSelect = this.autoSelect && !this.multiple && option && !option.selected && this.canSelect(option);
+        if (!option) return;
+        const canAutoSelect = this.autoSelect && !this.multiple && !option.selected && this.canSelect(option);
+        option.scrollIntoView({ block: "nearest", behavior: "instant" });
         if (!canAutoSelect) return;
         this.toggleOption(option, true);
       }

package/dist/utils/dom-events.d.ts

@@ -29,7 +29,6 @@ export declare function createCustomEvent<Payload = never, const T extends strin
     dispatch(target: HTMLElement, eventInit?: CustomEventInit<Payload>): boolean;
 };
 export declare function createToggleEvent(oldState: boolean, newState: boolean, eventInit?: EventInit): ToggleEvent;
-export declare function isToggleOpen(event: ToggleEvent): boolean;
 export declare function clickedOutside(event: Event, element?: Element | null, allowSelf?: boolean): boolean;
 export declare function forwardEvent(target: HTMLElement, eventInit?: EventInit): EventListener;
 export declare function getElementFromEvent<T = HTMLElement>(event: Event, filterFn: (node: HTMLElement) => boolean): T | undefined;

package/dist/utils.js

@@ -139,9 +139,6 @@ function createToggleEvent(oldState, newState, eventInit) {
     newState: newState ? "open" : "closed"
   });
 }
-function isToggleOpen(event) {
-  return event.newState === "open";
-}
 function clickedOutside(event, element, allowSelf = false) {
   if (!element?.isConnected) return true;
   return !getElementFromEvent(event, (node) => node === element) && (allowSelf || event.target !== element);
@@ -352,4 +349,4 @@ function resetUniqueId(key) {
   }
 }
 
-export { InvokerCommandEvent, addGlobalEventListener, booleanAttributeDirective, clickedOutside, commandDirective, createCustomEvent, createToggleEvent, disableMotion, enableMotion, findClosestDocument, forwardEvent, getAssignedElements, getElementFromEvent, getKeyInfo, getUniqueId, interactionResponse, isToggleOpen, observeElementResize, observeMedia, optionalAttr, optionalSlot, parseDate, querySlotSelector, removeGlobalEventListener, resetUniqueId, setFocusable, stringAttributeDirective, supportsHover, toAriaBooleanAttribute, toPx, unobserveElementResize, unobserveMedia, waitForAnimations };
+export { InvokerCommandEvent, addGlobalEventListener, booleanAttributeDirective, clickedOutside, commandDirective, createCustomEvent, createToggleEvent, disableMotion, enableMotion, findClosestDocument, forwardEvent, getAssignedElements, getElementFromEvent, getKeyInfo, getUniqueId, interactionResponse, observeElementResize, observeMedia, optionalAttr, optionalSlot, parseDate, querySlotSelector, removeGlobalEventListener, resetUniqueId, setFocusable, stringAttributeDirective, supportsHover, toAriaBooleanAttribute, toPx, unobserveElementResize, unobserveMedia, waitForAnimations };

package/dist/vendor.js

@@ -3,29 +3,6 @@ import 'lit/html.js';
 import { directive } from 'lit/directive.js';
 import { AsyncDirective } from 'lit/async-directive.js';
 
-function groupBy(arr, getKeyFromItem) {
-    const result = {};
-    for (let i = 0; i < arr.length; i++) {
-        const item = arr[i];
-        const key = getKeyFromItem(item);
-        if (!Object.hasOwn(result, key)) {
-            result[key] = [];
-        }
-        result[key].push(item);
-    }
-    return result;
-}
-
-function keyBy(arr, getKeyFromItem) {
-    const result = {};
-    for (let i = 0; i < arr.length; i++) {
-        const item = arr[i];
-        const key = getKeyFromItem(item);
-        result[key] = item;
-    }
-    return result;
-}
-
 function minBy(items, getValue) {
     if (items.length === 0) {
         return undefined;
@@ -1899,6 +1876,14 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
+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 debounce(func, debounceMs, { signal, edges } = {}) {
     let pendingThis = undefined;
     let pendingArgs = null;
@@ -1980,12 +1965,4 @@ function throttle(func, throttleMs, { signal, edges = ['leading', 'trailing'] }
     return throttled;
 }
 
-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;
-}
-
-export { RovingTabindexController as R, size as a, arrow as b, computePosition as c, autoUpdate as d, e, flip as f, groupBy as g, hide as h, debounce as i, flattenObject as j, keyBy as k, minBy as m, offset as o, pick as p, round as r, shift as s, throttle as t, uniqBy as u };
+export { RovingTabindexController as R, size as a, arrow as b, computePosition as c, autoUpdate as d, e, flip as f, debounce as g, hide as h, flattenObject as i, minBy as m, offset as o, pick as p, round as r, shift as s, throttle as t, uniqBy as u };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@odx/foundation",
   "displayName": "ODX Design System Foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "1.0.0-beta.234",
+  "version": "1.0.0-beta.236",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -28,15 +28,15 @@
     "@lit-labs/preact-signals": "1.0.3",
     "@lit-labs/rollup-plugin-minify-html-literals": "0.1.0",
     "@odx/icons": "4.0.0-rc.49",
-    "@spectrum-web-components/reactive-controllers": "1.8.0",
+    "@spectrum-web-components/reactive-controllers": "1.9.0",
     "es-toolkit": "1.40.0",
     "sass-embedded": "1.93.2",
     "stylelint": "16.25.0",
     "@odx-internal/config-stylelint": "0.0.0",
     "@odx-internal/config-typescript": "0.0.0",
     "@odx-internal/config-vite": "0.0.0",
-    "@odx/design-tokens": "2.2.0",
-    "@odx-internal/utils-storybook": "0.0.0"
+    "@odx-internal/utils-storybook": "0.0.0",
+    "@odx/design-tokens": "2.2.0"
   },
   "sideEffects": [
     "dist/components-loader.js",