@odx/foundation 1.0.0-beta.237 → 1.0.0-beta.238

package/README.md

@@ -9,8 +9,7 @@ The `@odx/foundation` package is a core part of the ODX Design System, providing
 - **Components**: Reusable web components, including buttons, tables, headers, and more.
 - **i18n**: Internationalization utilities for building multilingual applications, with support for locale changes and translations.
 - **Global Styles**: Comprehensive global styles, including colors, spacing, and themes.
-
-### Prerequisites
+- **Browser Support**: <a href="https://web-platform-dx.github.io/web-features/supported-browsers/?targetYear=2024" target="_blank">Baseline 2024</a>
 
 ### Install
 

package/dist/breakpoints/main.d.ts

@@ -17,7 +17,6 @@ export declare const defaultBreakpoints: {
     };
 };
 export default function setupBreakpoints(breakpointsConfig?: BreakpointConfig[]): () => void;
-export * from './models.js';
-export * from './plugins.js';
+export type * from './models.js';
 export * from './utils.js';
 //# sourceMappingURL=main.d.ts.map

package/dist/breakpoints/models.d.ts

@@ -12,5 +12,4 @@ export type Breakpoint = BreakpointConfig & {
 export type BreakpointChange = Breakpoint & {
     matches: boolean;
 };
-export type BreakpointPlugin = (target: HTMLElement, change: BreakpointChange) => void;
 //# sourceMappingURL=models.d.ts.map

package/dist/breakpoints/utils.d.ts

@@ -1,10 +1,13 @@
 import { Signal } from '../signals/main.js';
 import { Breakpoint, BreakpointChange, BreakpointConfig, BreakpointOperator } from './models.js';
 export declare const breakpointDirective: import('../utils/main.js').StringAttributeDirective<"odx-breakpoint">;
+export declare const breakpointClassDirective: import('../utils/main.js').StringAttributeDirective<"odx-breakpoint-class">;
+export declare const breakpointActiveDirective: import('../utils/main.js').BooleanAttributeDirective<"odx-breakpoint-active">;
 export declare function buildBreakpoint(breakpoint: BreakpointConfig, operator?: BreakpointOperator): Breakpoint;
+export declare function generateBreakpointStyles(breakpoints: Breakpoint[]): string;
 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;
+export declare function createBreakpointDirectiveUpdater(breakpoints: Breakpoint[], update?: (target: HTMLElement, change: BreakpointChange) => void): () => void;
 //# sourceMappingURL=utils.d.ts.map

package/dist/breakpoints.js

@@ -1,21 +1,20 @@
-import { signal, effect } from '@odx/foundation/signals';
-import { stringAttributeDirective, observeMedia } from '@odx/foundation/utils';
-
-const BreakpointHideTargetPlugin = (target, change) => {
-  target.hidden = !change.matches;
-  target.inert = !change.matches;
-};
-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, change.matches);
-  }
-};
+import { effect } from '@preact/signals-core';
+import { signal } from '@odx/foundation/signals';
+import { stringAttributeDirective, booleanAttributeDirective, observeMedia } from '@odx/foundation/utils';
 
 const operators = ["<", "<=", ">=", ">"];
 const breakpointDirective = stringAttributeDirective("odx-breakpoint");
+const breakpointClassDirective = stringAttributeDirective("odx-breakpoint-class");
+const breakpointActiveDirective = booleanAttributeDirective({
+  name: "odx-breakpoint-active",
+  onUpdate: (directive, value) => {
+    if (!breakpointClassDirective.applied(directive)) return;
+    const classNames = breakpointClassDirective.value(directive)?.split(" ") ?? [];
+    for (const className of classNames) {
+      directive.classList.toggle(className, value);
+    }
+  }
+});
 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)`;
@@ -35,6 +34,11 @@ function buildBreakpoint(breakpoint, operator) {
   }
   return { ...breakpoint, id, operator, query: [query, breakpoint.customQuery].filter(Boolean).join(" and ") };
 }
+function generateBreakpointStyles(breakpoints) {
+  const selectors = breakpoints.map((breakpoint) => `[${breakpointDirective.attribute}="${breakpoint.id}"]`);
+  const excludedSelectors = [breakpointActiveDirective.selector, breakpointClassDirective.selector].map((selector) => `:not(${selector})`);
+  return `:where(${selectors.join(", ")})${excludedSelectors.join("")} { display: none !important; }`;
+}
 function expandBreakpoints(...breakpoints) {
   return breakpoints.flatMap((breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator)));
 }
@@ -70,7 +74,8 @@ function createBreakpointDirectiveUpdater(breakpoints, update) {
       const directive = directives[i];
       const result = results[breakpointDirective.value(directive) ?? ""];
       if (!result) continue;
-      update(directive, result);
+      breakpointActiveDirective.toggle(directive, result.matches);
+      update?.(directive, result);
     }
   };
 }
@@ -82,17 +87,17 @@ const defaultBreakpoints = {
 };
 function setupBreakpoints(breakpointsConfig = []) {
   const breakpoints = expandBreakpoints(...Object.values(defaultBreakpoints), ...breakpointsConfig);
-  const plugins = [BreakpointHideTargetPlugin, BreakpointClassNamePlugin];
-  const directiveUpdater = createBreakpointDirectiveUpdater(breakpoints, (target, change) => {
-    for (const plugin of plugins) {
-      plugin(target, change);
-    }
-  });
+  const directiveUpdater = createBreakpointDirectiveUpdater(breakpoints);
   let mutationObserver;
   let unobserveBreakpoints = () => {
   };
+  let stylesElement;
   function initBreakpoints() {
     destroyBreakpoints();
+    stylesElement ??= document.createElement("style");
+    stylesElement.id = "odx-breakpoint-styles";
+    stylesElement.textContent = generateBreakpointStyles(breakpoints);
+    document.head.appendChild(stylesElement);
     mutationObserver = new MutationObserver(directiveUpdater);
     unobserveBreakpoints = effect(directiveUpdater);
     mutationObserver.observe(document.documentElement, {
@@ -103,6 +108,7 @@ function setupBreakpoints(breakpointsConfig = []) {
     });
   }
   function destroyBreakpoints() {
+    stylesElement && document.head.removeChild(stylesElement);
     unobserveBreakpoints();
     mutationObserver?.disconnect();
     globalThis.removeEventListener("DOMContentLoaded", initBreakpoints);
@@ -111,4 +117,4 @@ function setupBreakpoints(breakpointsConfig = []) {
   return destroyBreakpoints;
 }
 
-export { BreakpointClassNamePlugin, BreakpointHideTargetPlugin, breakpointDirective, buildBreakpoint, createBreakpointDirectiveUpdater, setupBreakpoints as default, defaultBreakpoints, expandBreakpoints, observeBreakpoint };
+export { breakpointActiveDirective, breakpointClassDirective, breakpointDirective, buildBreakpoint, createBreakpointDirectiveUpdater, setupBreakpoints as default, defaultBreakpoints, expandBreakpoints, generateBreakpointStyles, observeBreakpoint };

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.237",
+  "version": "1.0.0-beta.238",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -22,7 +22,7 @@
   },
   "peerDependencies": {
     "@odx/icons": "^4.0.0-rc.49",
-    "@odx/design-tokens": "^2.2.0"
+    "@odx/design-tokens": "^2.3.0"
   },
   "devDependencies": {
     "@floating-ui/dom": "1.7.4",
@@ -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.3.0",
+    "@odx-internal/utils-storybook": "0.0.0"
   },
   "sideEffects": [
     "dist/components-loader.js",

package/dist/breakpoints/plugins.d.ts

@@ -1,4 +0,0 @@
-import { BreakpointPlugin } from './models.js';
-export declare const BreakpointHideTargetPlugin: BreakpointPlugin;
-export declare const BreakpointClassNamePlugin: BreakpointPlugin;
-//# sourceMappingURL=plugins.d.ts.map