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

package/dist/breakpoints/main.d.ts

@@ -1,13 +1,4 @@
-import { Breakpoint, BreakpointPlugin } from './models.js';
-declare global {
-    namespace ODX {
-        interface Breakpoints {
-            mobile: true;
-            tablet: true;
-            desktop: true;
-        }
-    }
-}
+import { BreakpointConfig } from './models.js';
 export declare const defaultBreakpoints: {
     readonly mobile: {
         readonly id: "mobile";
@@ -25,12 +16,8 @@ export declare const defaultBreakpoints: {
         readonly max: 1199.98;
     };
 };
-export interface BreakpointsConfig {
-    breakpoints: Breakpoint[];
-    plugins: BreakpointPlugin[];
-}
-export declare const BreakpointsConfig: (config?: Partial<BreakpointsConfig>) => BreakpointsConfig;
-export default function setupBreakpoints(config?: Partial<BreakpointsConfig>): () => void;
-export declare function getBreakpoints(): Breakpoint[];
-export { BreakpointClassNamePlugin, BreakpointHideTargetPlugin } from './plugins.js';
+export default function setupBreakpoints(breakpointsConfig?: BreakpointConfig[], root?: HTMLElement): () => void;
+export * from './models.js';
+export * from './plugins.js';
+export * from './utils.js';
 //# sourceMappingURL=main.d.ts.map

package/dist/breakpoints/models.d.ts

@@ -1,15 +1,16 @@
-export interface Breakpoint {
-    id: keyof ODX.Breakpoints;
+export interface BreakpointConfig {
+    id: string;
     min: number;
     max: number;
     customQuery?: string;
 }
-export type BreakpointEntry = Breakpoint & {
+export type BreakpointOperator = '<' | '<=' | '>=' | '>';
+export type Breakpoint = BreakpointConfig & {
     query: string;
     operator?: BreakpointOperator;
 };
-export type BreakpointOperator = '<' | '<=' | '>=' | '>';
-export type BreakpointPlugin = (target: HTMLElement, breakpoint: Breakpoint & {
+export type BreakpointChange = Breakpoint & {
     matches: boolean;
-}) => void;
+};
+export type BreakpointPlugin = (target: HTMLElement, change: BreakpointChange) => void;
 //# sourceMappingURL=models.d.ts.map

package/dist/breakpoints/utils.d.ts

@@ -1,10 +1,10 @@
 import { Signal } from '@preact/signals-core';
-import { Breakpoint, BreakpointEntry } from './models.js';
-export declare function observeBreakpoint(breakpoint: Breakpoint & {
-    query?: string;
-    operator?: BreakpointEntry['operator'];
-}, initialValue?: boolean): Signal<Breakpoint & {
+import { Breakpoint, BreakpointChange, BreakpointConfig, BreakpointOperator, BreakpointPlugin } 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 observeBreakpoint(breakpoint: Breakpoint, initialValue?: boolean): Signal<Breakpoint & {
     matches: boolean;
 }>;
-export declare function createMediaQuery({ min, max, customQuery }: Breakpoint, operator?: BreakpointEntry['operator']): string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/breakpoints.js

@@ -1,21 +1,57 @@
 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, breakpoint) => {
-  target.hidden = !breakpoint.matches;
-  target.inert = !breakpoint.matches;
+const BreakpointHideTargetPlugin = (target, change) => {
+  target.hidden = !change.matches;
+  target.inert = !change.matches;
 };
-const breakpointClassNameDirective = stringAttributeDirective("odx-breakpoint-class");
-const BreakpointClassNamePlugin = (target, breakpoint) => {
-  if (!breakpointClassNameDirective.applied(target)) return;
-  const classNames = breakpointClassNameDirective.value(target)?.split(" ") ?? [];
+const BreakpointClassNamePlugin = (target, change) => {
+  const classNames = target.getAttribute("odx-breakpoint-class")?.split(" ") ?? [];
+  if (classNames.length === 0) return;
+  BreakpointHideTargetPlugin(target, { ...change, matches: true });
   for (const className of classNames) {
-    target.classList.toggle(className, breakpoint.matches);
-    target.hidden = false;
-    target.inert = false;
+    target.classList.toggle(className, change.matches);
   }
 };
 
+const operators = ["<", "<=", ">=", ">"];
+const breakpointDirective = stringAttributeDirective("odx-breakpoint");
+function buildBreakpoint(breakpoint, operator) {
+  const id = operator ? `${operator}${breakpoint.id}` : breakpoint.id;
+  let query = `(min-width: ${breakpoint.min}px) and (max-width: ${breakpoint.max}px)`;
+  switch (operator) {
+    case "<":
+      query = `(max-width: ${breakpoint.min - 0.02}px)`;
+      break;
+    case "<=":
+      query = `(max-width: ${breakpoint.max}px)`;
+      break;
+    case ">=":
+      query = `(min-width: ${breakpoint.min}px)`;
+      break;
+    case ">":
+      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);
+      }
+    }
+  };
+}
+function expandBreakpoints(...breakpoints) {
+  const expandBreakpoints2 = breakpoints.flatMap(
+    (breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator))
+  );
+  return keyBy(expandBreakpoints2, (breakpoint) => breakpoint.id);
+}
 function observeBreakpoint(breakpoint, initialValue = false) {
   let unobserveMedia;
   return signal(
@@ -25,72 +61,45 @@ function observeBreakpoint(breakpoint, initialValue = false) {
         unobserveMedia?.();
       },
       watched() {
-        const query = breakpoint.query ?? createMediaQuery(breakpoint, breakpoint.operator);
-        unobserveMedia = observeMedia(query, ({ matches }) => {
+        unobserveMedia = observeMedia(breakpoint.query, ({ matches }) => {
           this.value = { ...breakpoint, matches };
         });
       }
     }
   );
 }
-function createMediaQuery({ min, max, customQuery }, operator) {
-  let mediaQuery = `(min-width: ${min}px) and (max-width: ${max}px)`;
-  switch (operator) {
-    case "<":
-      mediaQuery = `(max-width: ${min - 0.02}px)`;
-      break;
-    case "<=":
-      mediaQuery = `(max-width: ${max}px)`;
-      break;
-    case ">=":
-      mediaQuery = `(min-width: ${min}px)`;
-      break;
-    case ">":
-      mediaQuery = `(min-width: ${max + 0.02}px)`;
-      break;
+
+function unsubscribeAll(subscriptions) {
+  for (const unsubscribe of subscriptions) {
+    unsubscribe();
+    subscriptions.delete(unsubscribe);
   }
-  return [mediaQuery, customQuery].filter(Boolean).join(" and ");
 }
-
-const breakpointRegistry = /* @__PURE__ */ new Map();
 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 }
 };
-const BreakpointsConfig = (config) => ({
-  breakpoints: [...Object.values(defaultBreakpoints), ...config?.breakpoints ?? []],
-  plugins: [BreakpointHideTargetPlugin, BreakpointClassNamePlugin].concat(config?.plugins ?? [])
-});
-function setupBreakpoints(config = {}) {
-  const { plugins, breakpoints } = BreakpointsConfig(config);
-  for (const operator of [void 0, "<", "<=", ">=", ">"]) {
-    for (const breakpoint of breakpoints) {
-      const id = operator ? `${operator}${breakpoint.id}` : breakpoint.id;
-      breakpointRegistry.set(id, { ...breakpoint, id, operator, query: createMediaQuery(breakpoint, operator) });
+function setupBreakpoints(breakpointsConfig = [], root = document.documentElement) {
+  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 breakpointDirective = stringAttributeDirective("odx-breakpoint");
-  const subscriptions = Array.from(breakpointRegistry.values()).map((breakpoint) => {
-    const breakpointSelector = `[${breakpointDirective.attribute}^="${breakpoint.id}"]`;
-    return observeBreakpoint(breakpoint).subscribe((result) => {
-      const breakpointDirectives = Array.from(document.querySelectorAll(breakpointSelector));
-      if (!breakpointDirectives.length) return;
-      for (const host of breakpointDirectives) {
-        for (const plugin of plugins) {
-          plugin(host, result);
-        }
-      }
-    });
   });
+  observer.observe(root, { subtree: true, childList: true, attributes: true, attributeFilter: [breakpointDirective.attribute] });
   return () => {
-    for (const unsubscribe of subscriptions) {
-      unsubscribe();
-    }
+    unsubscribeAll(subscriptions);
+    observer.disconnect();
   };
 }
-function getBreakpoints() {
-  return Array.from(breakpointRegistry.values()).filter((breakpoint) => !breakpoint.operator);
-}
 
-export { BreakpointClassNamePlugin, BreakpointHideTargetPlugin, BreakpointsConfig, setupBreakpoints as default, defaultBreakpoints, getBreakpoints };
+export { BreakpointClassNamePlugin, BreakpointHideTargetPlugin, breakpointDirective, buildBreakpoint, createBreakpointHandler, setupBreakpoints as default, defaultBreakpoints, expandBreakpoints, observeBreakpoint };

package/dist/components.js

@@ -3,7 +3,7 @@ import { CustomElement, customElement, CanBeExpanded, InteractiveControlElement,
 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 { 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, g 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, t as throttle, r as round, i as debounce } from './vendor.js';
 import { when } from 'lit/directives/when.js';
 import { OdxIconElement } from '@odx/icons';
 import { IsLocalized } from '@odx/foundation/i18n';

package/dist/config/dark-mode.d.ts

@@ -0,0 +1,3 @@
+export declare function observeDarkModeChange(callback: (enabled: boolean) => void): () => void;
+export declare function isDarkModeEnabled(): boolean;
+//# sourceMappingURL=dark-mode.d.ts.map

package/dist/config/main.d.ts

@@ -0,0 +1,2 @@
+export * from './dark-mode.js';
+//# sourceMappingURL=main.d.ts.map

package/dist/config.js

@@ -0,0 +1,23 @@
+import { observeMedia } from '@odx/foundation/utils';
+import { signal } from '@preact/signals-core';
+
+let darkModeObserver;
+const darkModeEnabled = signal(false, {
+  watched() {
+    darkModeObserver ??= observeDarkModeChange((enabled) => {
+      this.value = enabled;
+    });
+  },
+  unwatched() {
+    darkModeObserver?.();
+    darkModeObserver = void 0;
+  }
+});
+function observeDarkModeChange(callback) {
+  return observeMedia("(prefers-color-scheme: dark)", ({ matches }) => callback(matches));
+}
+function isDarkModeEnabled() {
+  return darkModeEnabled.value;
+}
+
+export { isDarkModeEnabled, observeDarkModeChange };

package/dist/i18n.js

@@ -1,5 +1,5 @@
 import { signal, computed } from '@preact/signals-core';
-import { i as flattenObject, e } from './vendor.js';
+import { j 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/vendor.js

@@ -3,6 +3,29 @@ 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;
@@ -1965,4 +1988,4 @@ function round(value, precision = 0) {
     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, 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 };
+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 };

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.232",
+  "version": "1.0.0-beta.234",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -20,14 +20,14 @@
     "lit": "3.3.1"
   },
   "peerDependencies": {
-    "@odx/icons": "^4.0.0-rc.47",
+    "@odx/icons": "^4.0.0-rc.49",
     "@odx/design-tokens": "^2.2.0"
   },
   "devDependencies": {
     "@floating-ui/dom": "1.7.4",
     "@lit-labs/preact-signals": "1.0.3",
     "@lit-labs/rollup-plugin-minify-html-literals": "0.1.0",
-    "@odx/icons": "4.0.0-rc.47",
+    "@odx/icons": "4.0.0-rc.49",
     "@spectrum-web-components/reactive-controllers": "1.8.0",
     "es-toolkit": "1.40.0",
     "sass-embedded": "1.93.2",
@@ -35,8 +35,8 @@
     "@odx-internal/config-stylelint": "0.0.0",
     "@odx-internal/config-typescript": "0.0.0",
     "@odx-internal/config-vite": "0.0.0",
-    "@odx-internal/utils-storybook": "0.0.0",
-    "@odx/design-tokens": "2.2.0"
+    "@odx/design-tokens": "2.2.0",
+    "@odx-internal/utils-storybook": "0.0.0"
   },
   "sideEffects": [
     "dist/components-loader.js",
@@ -53,6 +53,11 @@
       "types": "./dist/breakpoints/main.d.ts"
     },
     "./breakpoints/*": null,
+    "./config": {
+      "import": "./dist/config.js",
+      "types": "./dist/config/main.d.ts"
+    },
+    "./config/*": null,
     "./components": {
       "import": "./dist/components.js",
       "types": "./dist/components/main.d.ts"