@odx/foundation 1.0.0-rc.10 → 1.0.0-rc.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +41 -23
  2. package/dist/lib/models.d.ts +1 -1
  3. package/dist/lib/signals.d.ts +4 -4
  4. package/dist/lib/signals.js +4 -4
  5. package/dist/lib/theming.d.ts +2 -1
  6. package/dist/lib/theming.js +13 -4
  7. package/dist/lib/utils/shared-media-observer.js +1 -1
  8. package/package.json +9 -6
package/CHANGELOG.md CHANGED
@@ -1,3 +1,21 @@
1
+ ## 1.0.0-rc.12
2
+
3
+ ### Patch Changes
4
+
5
+ - Increase version range of `@odx/design-tokens` peer dependency to `^4.0.0 || ^5.0.0` to support latest version of design tokens package
6
+
7
+ ## 1.0.0-rc.11
8
+
9
+ ### Minor Changes
10
+
11
+ - Add `change` callback to `attachDarkModeToggle` options to notify when dark mode toggle is clicked
12
+
13
+ ### Patch Changes
14
+
15
+ - Fix setTheme function not removing dark mode when `mode` is set to `light`
16
+ - Clean up event listeners in `attachDarkModeToggle` cleanup function
17
+ - Prevent dark mode toggle if click event on attached host is prevented by another event listener
18
+
1
19
  ## 1.0.0-rc.10
2
20
 
3
21
  ### Patch Changes
@@ -13,7 +31,7 @@
13
31
 
14
32
  ## 1.0.0-rc.8
15
33
 
16
- ### Bug Fixes
34
+ ### Patch Changes
17
35
 
18
36
  - Remove scroll lock gutter when scrollbar is not present to prevent unnecessary layout shift
19
37
 
@@ -32,7 +50,7 @@
32
50
  - `odx.base` to `odx-base`
33
51
  - `odx.overrides` to `odx-overrides`
34
52
 
35
- ### Bug Fixes
53
+ ### Patch Changes
36
54
 
37
55
  - Remove debug info from rolldown build output
38
56
  - Fix `.odx-cloak` if applied to `:root` element not working correctly
@@ -51,26 +69,26 @@
51
69
 
52
70
  ## 1.0.0-rc.4
53
71
 
54
- ### Bug Fixes
72
+ ### Patch Changes
55
73
 
56
74
  - Fix dark/light mode detection logic in `setTheme` function
57
75
 
58
76
  ## 1.0.0-rc.3
59
77
 
60
- ### Bug Fixes
78
+ ### Patch Changes
61
79
 
62
80
  - Add `package.json` package exports for better tooling support
63
81
 
64
82
  ## 1.0.0-rc.2
65
83
 
66
- ### Bug Fixes
84
+ ### Patch Changes
67
85
 
68
86
  - Fix default text alignment of title elements
69
87
 
70
88
 
71
89
  ## 1.0.0-rc.1
72
90
 
73
- ### Bug Fixes
91
+ ### Patch Changes
74
92
 
75
93
  - Fix `html.odx-root` selector not applying reset styles to `<body>` element
76
94
  - Fix `toggleDarkMode` function never enabling light mode due to incorrect mode detection logic
@@ -116,7 +134,7 @@ With custom label:
116
134
  </odx-accordion-item>
117
135
  ```
118
136
 
119
- ### Bug Fixes
137
+ ### Patch Changes
120
138
 
121
139
  - Fix `aria-expanded` attribute not updating correctly on `odx-accordion-item` component
122
140
  - Fix nested `odx-accordion` not collapsing when parent item is collapsed
@@ -144,7 +162,7 @@ With custom label:
144
162
 
145
163
  - Add `confirmation` variant to `odx-button`, `odx-icon-button`, and `odx-action-button` and `odx-inline-message` components
146
164
 
147
- ### Bug Fixes
165
+ ### Patch Changes
148
166
 
149
167
  - Hide labels when `odx-rail-navigation` is collapsed
150
168
  - Use correct background color for content of `odx-dropdown` and `odx-menu` components
@@ -168,7 +186,7 @@ With custom label:
168
186
  - Add `prefix` and `suffix` slots to horizontal `odx-tab-bar` component to allow adding elements before/after the tab items
169
187
  - Add `top` placement option to `odx-drawer` component
170
188
 
171
- ### Bug Fixes
189
+ ### Patch Changes
172
190
 
173
191
  - Fix `odx-scroll-container` focus outline
174
192
  - Fix disabled background for `danger-ghost` variant of `odx-button` component
@@ -189,7 +207,7 @@ With custom label:
189
207
  - Remove obsolete backdrop element from `odx-loading-overlay`
190
208
  - Add padding to `odx-loading-spinner` to align spinner size with icon sizes
191
209
 
192
- ### Bug Fixes
210
+ ### Patch Changes
193
211
 
194
212
  - Align `odx-accordion-item` indicator size with design spec for size `lg`
195
213
  - Align `odx-avatar` with design spec
@@ -198,7 +216,7 @@ With custom label:
198
216
 
199
217
  ## 1.0.0-beta.271
200
218
 
201
- ### Bug Fixes
219
+ ### Patch Changes
202
220
 
203
221
  - Fix `odx-area-header` base slot positioning and overflow issues
204
222
  - Fix `odx-loading-overlay` not hiding correctly when `loading` is set to `false`
@@ -236,7 +254,7 @@ With custom label:
236
254
  - Add `--safe-space` CSS custom property to `odx-area-header` to control minimum space taken by base slot
237
255
  - Improve `odx-slider-handle` accessibility and UI feedback during drag interaction
238
256
 
239
- ### Bug Fixes
257
+ ### Patch Changes
240
258
 
241
259
  - Update design token library
242
260
  - Fix area header prefix/suffix alignment issue
@@ -268,7 +286,7 @@ With custom label:
268
286
  - Add `touch-disabled` to `odx-tooltip` to disable it on touch devices
269
287
 
270
288
 
271
- ### Bug Fixes
289
+ ### Patch Changes
272
290
 
273
291
  - Fix `odx-rail-navigation` transition animation when expanding/collapsing
274
292
  - Fix cursor styles for `odx-checkbox`, `odx-radio-button`, and `odx-switch` when disabled
@@ -278,7 +296,7 @@ With custom label:
278
296
 
279
297
  ## 1.0.0-beta.268
280
298
 
281
- ### Bug Fixes
299
+ ### Patch Changes
282
300
 
283
301
  - Only apply `:hover` styles on non-touch devices to prevent sticky hover states
284
302
 
@@ -289,7 +307,7 @@ With custom label:
289
307
 
290
308
  - Remove HTML `part` attribute if not needed to reduce shadow DOM complexity
291
309
 
292
- ### Bug Fixes
310
+ ### Patch Changes
293
311
 
294
312
  - Disable native touch interaction feedback on elements which have an `:active` state
295
313
  - Fix nested control spacing issue
@@ -322,7 +340,7 @@ With custom label:
322
340
  - Add `bottom` placement option to `odx-drawer`
323
341
 
324
342
 
325
- ### Bug Fixes
343
+ ### Patch Changes
326
344
 
327
345
  - Fix `odx-card` outer spacing
328
346
  - Fix modal styles
@@ -333,7 +351,7 @@ With custom label:
333
351
 
334
352
  - Add `debounce` property to `odx-input` and `odx-search-bar` components to control input event debouncing
335
353
 
336
- ### Bug Fixes
354
+ ### Patch Changes
337
355
 
338
356
  - Disable `:hover` styles on touch devices to prevent sticky hover states
339
357
  - Dedupe mixins to prevent multiple instances of the same mixin being applied
@@ -344,14 +362,14 @@ With custom label:
344
362
 
345
363
  ## 1.0.0-beta.264
346
364
 
347
- ### Bug Fixes
365
+ ### Patch Changes
348
366
 
349
367
  - Fix `odx-input-number` not emitting change event with updated value
350
368
 
351
369
 
352
370
  ## 1.0.0-beta.263
353
371
 
354
- ### Bug Fixes
372
+ ### Patch Changes
355
373
 
356
374
  - Fix `odx-input` resize issue
357
375
  - Fix `odx-input-number` not updating value to boundaries on step up/down
@@ -365,7 +383,7 @@ With custom label:
365
383
 
366
384
  - Update selected options label for multi selection in `odx-select` component to match design spec
367
385
 
368
- ### Bug Fixes
386
+ ### Patch Changes
369
387
 
370
388
  - Fix modal dismiss event firing on text selection by accident
371
389
  - Fix `odx-input` value not updating correctly
@@ -373,7 +391,7 @@ With custom label:
373
391
 
374
392
  ## 1.0.0-beta.261
375
393
 
376
- ### Bug Fixes
394
+ ### Patch Changes
377
395
 
378
396
  - Fix `odx-input` type attribute not updating correctly
379
397
 
@@ -393,7 +411,7 @@ With custom label:
393
411
  - Add auto sizing behavior for input controls
394
412
  - Remove CSS parts from `odx-loading-overlay` component
395
413
 
396
- ### Bug Fixes
414
+ ### Patch Changes
397
415
 
398
416
  - Fix positioning of clear action in `odx-input` and `odx-select` components
399
417
  - Move `[loading]` styles into button control to prevent leakage to other components
@@ -408,7 +426,7 @@ With custom label:
408
426
  - Bump `@odx/icons` dependency to `^4.2.0`
409
427
  - Use `font-size` property instead of `--size` custom property for icon sizing
410
428
 
411
- ### Bug Fixes
429
+ ### Patch Changes
412
430
 
413
431
  - Fix checkbox control updated hook not calling parent hook
414
432
  - Ensure context API is always used in a root context
package/dist/lib/models.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  type UnitIdentifier = SingleUnitIdentifier | `${SingleUnitIdentifier}-per-${SingleUnitIdentifier}` | (string & {});
2
2
  type SingleUnitIdentifier = 'acre' | 'bit' | 'byte' | 'celsius' | 'centimeter' | 'day' | 'degree' | 'fahrenheit' | 'fluid-ounce' | 'foot' | 'gallon' | 'gigabit' | 'gigabyte' | 'gram' | 'hectare' | 'hour' | 'inch' | 'kilobit' | 'kilobyte' | 'kilogram' | 'kilometer' | 'liter' | 'megabit' | 'megabyte' | 'meter' | 'microsecond' | 'mile' | 'mile-scandinavian' | 'milliliter' | 'millimeter' | 'millisecond' | 'minute' | 'month' | 'nanosecond' | 'ounce' | 'percent' | 'petabyte' | 'pound' | 'second' | 'stone' | 'terabit' | 'terabyte' | 'week' | 'yard' | 'year';
3
- export { UnitIdentifier };
3
+ export { SingleUnitIdentifier, UnitIdentifier };
package/dist/lib/signals.d.ts CHANGED
@@ -7,14 +7,14 @@ type SignalOptions<T> = Signal.Options<T> & {
7
7
  unwatched?(): void;
8
8
  };
9
9
  type ReadonlySignal<T> = Signal.Computed<T>;
10
+ declare function computed<T>(computeFn: () => T, options?: SignalOptions<T>): ReadonlySignal<T>;
10
11
  declare function signal<T>(value: T, options?: SignalOptions<T>): Signal$1<T>;
12
+ declare global {
13
+ var __ODX_SHARED_SIGNALS__: Record<string, unknown>;
14
+ }
11
15
  /**
12
16
  * Creates or retrieves a shared signal stored on the global object. This is useful for signals that need to be shared across multiple modules without explicitly passing them around, such as localization settings or translation records.
13
17
  */
14
18
  declare function sharedSignal<T>(key: string, ...args: Parameters<typeof signal<T>>): ReturnType<typeof signal<T>>;
15
- declare function computed<T>(computeFn: () => T, options?: SignalOptions<T>): ReadonlySignal<T>;
16
19
  declare function effect(callback: (() => void) | (() => () => void)): () => void;
17
- declare global {
18
- var __ODX_SHARED_SIGNALS__: Record<string, unknown>;
19
- }
20
20
  export { ReadonlySignal, Signal$1 as Signal, SignalOptions, computed, effect, sharedSignal, signal };
package/dist/lib/signals.js CHANGED
@@ -7,6 +7,9 @@ function transformOptions(options) {
7
7
  [Signal.subtle.unwatched]: options.unwatched
8
8
  };
9
9
  }
10
+ function computed(computeFn, options) {
11
+ return new Signal.Computed(computeFn, transformOptions(options));
12
+ }
10
13
  function signal(value, options) {
11
14
  const state = new Signal.State(value, transformOptions(options));
12
15
  state.update = (updateFn) => state.set(updateFn(state.get()));
@@ -16,12 +19,10 @@ function signal(value, options) {
16
19
  * Creates or retrieves a shared signal stored on the global object. This is useful for signals that need to be shared across multiple modules without explicitly passing them around, such as localization settings or translation records.
17
20
  */
18
21
  function sharedSignal(key, ...args) {
22
+ globalThis.__ODX_SHARED_SIGNALS__ ||= {};
19
23
  if (!(key in globalThis.__ODX_SHARED_SIGNALS__)) globalThis.__ODX_SHARED_SIGNALS__[key] = signal(...args);
20
24
  return globalThis.__ODX_SHARED_SIGNALS__[key];
21
25
  }
22
- function computed(computeFn, options) {
23
- return new Signal.Computed(computeFn, transformOptions(options));
24
- }
25
26
  let needsEnqueue = true;
26
27
  const watcher = new Signal.subtle.Watcher(() => {
27
28
  if (!needsEnqueue) return;
@@ -46,5 +47,4 @@ function effect(callback) {
46
47
  cleanup = void 0;
47
48
  };
48
49
  }
49
- globalThis.__ODX_SHARED_SIGNALS__ ||= {};
50
50
  export { computed, effect, sharedSignal, signal };
package/dist/lib/theming.d.ts CHANGED
@@ -2,13 +2,14 @@ import { ThemeConfig } from "@odx/design-tokens";
2
2
  declare global {
3
3
  var __ODX_THEME_ROOT__: HTMLElement;
4
4
  }
5
- declare const userPrefersDarkMode: boolean;
6
5
  declare const darkModeIcon = "core::night-mode";
7
6
  declare const lightModeIcon = "core::brightness";
7
+ declare const userPrefersDarkMode: boolean;
8
8
  declare function setTheme$1(config: ThemeConfig, root?: HTMLElement): void;
9
9
  declare function isDarkModeEnabled(): boolean;
10
10
  declare function toggleDarkMode(enabled?: boolean | 'auto', root?: HTMLElement): void;
11
11
  interface AttachDarkModeToggleOptions<T extends HTMLElement> {
12
+ change?(darkModeEnabled: boolean): void;
12
13
  update?(host: T, darkModeEnabled: boolean, icon: string): void;
13
14
  root?: HTMLElement;
14
15
  }
package/dist/lib/theming.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { effect, sharedSignal } from "./signals.js";
2
2
  import { darkModeClass, lightModeClass, setTheme } from "@odx/design-tokens";
3
- const { matches: userPrefersDarkMode = false } = globalThis.matchMedia?.("(prefers-color-scheme: dark)") ?? {};
4
3
  const darkModeIcon = "core::night-mode";
5
4
  const lightModeIcon = "core::brightness";
5
+ const { matches: userPrefersDarkMode = false } = globalThis.matchMedia?.("(prefers-color-scheme: dark)") ?? {};
6
6
  globalThis.__ODX_THEME_ROOT__ ??= document.documentElement;
7
7
  const hasDarkModeClass = globalThis.__ODX_THEME_ROOT__.classList.contains(darkModeClass);
8
8
  const hasLightModeClass = globalThis.__ODX_THEME_ROOT__.classList.contains(lightModeClass);
@@ -11,7 +11,7 @@ function setTheme$1(config, root = globalThis.__ODX_THEME_ROOT__) {
11
11
  setTheme(config, root);
12
12
  if (!config.mode) return;
13
13
  if (config.mode === "auto") darkModeEnabled.set(userPrefersDarkMode);
14
- else darkModeEnabled.set(config.mode === "dark" ? true : !isDarkModeEnabled());
14
+ else darkModeEnabled.set(config.mode === "dark");
15
15
  }
16
16
  function isDarkModeEnabled() {
17
17
  return darkModeEnabled.get();
@@ -21,12 +21,21 @@ function toggleDarkMode(enabled, root = globalThis.__ODX_THEME_ROOT__) {
21
21
  setTheme$1({ mode: enabled === "auto" ? enabled : enabled ? "dark" : "light" }, root);
22
22
  }
23
23
  function attachDarkModeToggle(host, options = {}) {
24
- host.addEventListener("click", () => toggleDarkMode(void 0, options.root));
25
- return effect(() => {
24
+ const abortController = new AbortController();
25
+ const cleanup = effect(() => {
26
26
  const darkModeEnabled = isDarkModeEnabled();
27
27
  const icon = darkModeEnabled ? lightModeIcon : darkModeIcon;
28
28
  host.setAttribute("icon", icon);
29
29
  options.update?.(host, darkModeEnabled, icon);
30
30
  });
31
+ host.addEventListener("click", (event) => {
32
+ if (event.defaultPrevented) return;
33
+ toggleDarkMode(void 0, options.root);
34
+ options.change?.(isDarkModeEnabled());
35
+ }, { signal: abortController.signal });
36
+ return () => {
37
+ abortController.abort();
38
+ cleanup();
39
+ };
31
40
  }
32
41
  export { attachDarkModeToggle, darkModeIcon, isDarkModeEnabled, lightModeIcon, setTheme$1 as setTheme, toggleDarkMode, userPrefersDarkMode };
package/dist/lib/utils/shared-media-observer.js CHANGED
@@ -36,4 +36,4 @@ function unobserveMedia(query, listener) {
36
36
  mediaQueryList.removeEventListener("change", handleMediaChange);
37
37
  mediaQueryRegistry.delete(query);
38
38
  }
39
- export { observeMedia };
39
+ export { observeMedia, unobserveMedia };
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@odx/foundation",
3
3
  "displayName": "ODX Design System Foundation",
4
4
  "description": "The design foundation of the ODX Design System, providing base styles and utilities",
5
- "version": "1.0.0-rc.10",
5
+ "version": "1.0.0-rc.12",
6
6
  "author": "Drägerwerk AG & Co.KGaA",
7
7
  "license": "SEE LICENSE IN LICENSE",
8
8
  "homepage": "https://odx.draeger.com",
@@ -17,13 +17,13 @@
17
17
  "signal-polyfill": "0.2.2"
18
18
  },
19
19
  "peerDependencies": {
20
- "@odx/design-tokens": "^4.0.0"
20
+ "@odx/design-tokens": "^4.0.0 || ^5.0.0"
21
21
  },
22
22
  "devDependencies": {
23
- "@tsdown/css": "0.22.2",
23
+ "@tsdown/css": "0.22.3",
24
24
  "lit": "3.3.3",
25
- "stylelint": "17.13.0",
26
- "tsdown": "0.22.2",
25
+ "stylelint": "17.14.0",
26
+ "tsdown": "0.22.3",
27
27
  "@odx-internal/config-stylelint": "0.0.0",
28
28
  "@odx-internal/utils-storybook": "0.0.0"
29
29
  },
@@ -49,11 +49,14 @@
49
49
  "access": "public",
50
50
  "tag": "latest"
51
51
  },
52
+ "stylelint": {
53
+ "extends": "@odx-internal/config-stylelint"
54
+ },
52
55
  "scripts": {
53
56
  "build": "tsdown",
54
57
  "dev": "tsdown --log-level error --no-clean --watch",
55
58
  "dev:tsc": "tsc --build tsconfig.lib.json --noEmit --watch",
56
59
  "lint": "biome lint src",
57
- "lint:styles": "stylelint '**/*.css' --config @odx-internal/config-stylelint"
60
+ "lint:styles": "stylelint '**/*.css'"
58
61
  }
59
62
  }