@odx/foundation 1.0.0-rc.3 → 1.0.0-rc.5

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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,20 @@
1
+ ## 1.0.0-rc.5
2
+
3
+ ### Major Changes
4
+
5
+ - Rename CSS utility classes `odx-text-primary|accent|...` to `odx-fg-*` to better reflect their purpose
6
+
7
+ ### Minor Changes
8
+
9
+ - Add `.odx-cloak` class to prevent FOUC (Flash of Unstyled Content) during initial load, use `odx-cloak` class on the root element of your application to enable it.
10
+ - Support `:visited` state for native links and anchors with `odx-link` class for better user experience
11
+
12
+ ## 1.0.0-rc.4
13
+
14
+ ### Bug Fixes
15
+
16
+ - Fix dark/light mode detection logic in `setTheme` function
17
+
1
18
  ## 1.0.0-rc.3
2
19
 
3
20
  ### Bug Fixes
package/README.md CHANGED
@@ -86,6 +86,16 @@ setTheme({
86
86
  });
87
87
  ```
88
88
 
89
+ ### Page Cloak
90
+
91
+ To prevent unstyled content from flashing during the initial load of your application, you can use the `.odx-cloak` CSS class.
92
+ This class will temporarily hide the content of the `.odx-root` element until custom elements are fully loaded.
93
+
94
+ ```html
95
+ <html class="odx-root odx-cloak">
96
+ </html>
97
+ ```
98
+
89
99
  ### Documentation
90
100
 
91
101
  For detailed documentation on how to use the `@odx/foundation` package, including examples and best practices, please visit our <a href="https://ca-odx-storybook-dev.yellowisland-7b13f2d7.westeurope.azurecontainerapps.io/" target="_blank" rel="noopener">storybook documentation</a>.
@@ -1,61 +1,61 @@
1
- import { Signal } from './signals.js';
1
+ import { Signal } from "./signals.js";
2
+
3
+ //#region src/lib/breakpoints.d.ts
2
4
  declare global {
3
- namespace ODX.Breakpoints {
4
- interface Config {
5
- sm: true;
6
- md: true;
7
- lg: true;
8
- xl: true;
9
- xxl: true;
10
- }
5
+ namespace ODX.Breakpoints {
6
+ interface Config {
7
+ sm: true;
8
+ md: true;
9
+ lg: true;
10
+ xl: true;
11
+ xxl: true;
11
12
  }
13
+ }
12
14
  }
13
- type FilteredKeys<T extends object> = {
14
- [K in keyof T as T[K] extends true ? K : never]: T[K];
15
- };
16
- export type BreakpointOperator = '<' | '<=' | '>=' | '>';
17
- export interface BreakpointConfig {
18
- name: keyof FilteredKeys<ODX.Breakpoints.Config>;
19
- min: number;
20
- max: number;
21
- customQuery?: string;
15
+ type FilteredKeys<T extends object> = { [K in keyof T as T[K] extends true ? K : never]: T[K] };
16
+ type BreakpointOperator = '<' | '<=' | '>=' | '>';
17
+ interface BreakpointConfig {
18
+ name: keyof FilteredKeys<ODX.Breakpoints.Config>;
19
+ min: number;
20
+ max: number;
21
+ customQuery?: string;
22
22
  }
23
- export interface Breakpoint extends BreakpointConfig {
24
- id: BreakpointConfig['name'] | `${BreakpointOperator}${BreakpointConfig['name']}`;
25
- query: string;
26
- operator?: BreakpointOperator;
23
+ interface Breakpoint extends BreakpointConfig {
24
+ id: BreakpointConfig['name'] | `${BreakpointOperator}${BreakpointConfig['name']}`;
25
+ query: string;
26
+ operator?: BreakpointOperator;
27
27
  }
28
- export declare const registeredBreakpoints: ReadonlyMap<Breakpoint['id'], Breakpoint>;
29
- export declare const breakpointAttribute = "odx-breakpoint";
30
- export declare const defaultBreakpoints: [{
31
- readonly name: "sm";
32
- readonly min: 0;
33
- readonly max: 479.98;
28
+ declare const registeredBreakpoints: ReadonlyMap<Breakpoint['id'], Breakpoint>;
29
+ declare const breakpointAttribute = "odx-breakpoint";
30
+ declare const defaultBreakpoints: [{
31
+ readonly name: "sm";
32
+ readonly min: 0;
33
+ readonly max: 479.98;
34
34
  }, {
35
- readonly name: "md";
36
- readonly min: 480;
37
- readonly max: 768.98;
35
+ readonly name: "md";
36
+ readonly min: 480;
37
+ readonly max: 768.98;
38
38
  }, {
39
- readonly name: "lg";
40
- readonly min: 769;
41
- readonly max: 990.98;
39
+ readonly name: "lg";
40
+ readonly min: 769;
41
+ readonly max: 990.98;
42
42
  }, {
43
- readonly name: "xl";
44
- readonly min: 991;
45
- readonly max: 1280.98;
43
+ readonly name: "xl";
44
+ readonly min: 991;
45
+ readonly max: 1280.98;
46
46
  }, {
47
- readonly name: "xxl";
48
- readonly min: 1352;
49
- readonly max: number;
47
+ readonly name: "xxl";
48
+ readonly min: 1352;
49
+ readonly max: number;
50
50
  }];
51
- export declare function buildBreakpoint(breakpoint: BreakpointConfig, operator?: BreakpointOperator): Breakpoint;
52
- export declare function expandBreakpoints(...breakpoints: BreakpointConfig[]): Breakpoint[];
53
- export declare function observeBreakpoint(id: Breakpoint['id'], initialValue?: boolean): Signal<Breakpoint & {
54
- matches: boolean;
51
+ declare function buildBreakpoint(breakpoint: BreakpointConfig, operator?: BreakpointOperator): Breakpoint;
52
+ declare function expandBreakpoints(...breakpoints: BreakpointConfig[]): Breakpoint[];
53
+ declare function observeBreakpoint(id: Breakpoint['id'], initialValue?: boolean): Signal<Breakpoint & {
54
+ matches: boolean;
55
55
  }>;
56
- export declare function setupBreakpoints(breakpointsConfig?: BreakpointConfig[]): () => void;
57
- export declare function createBreakpointUpdater(breakpoints: Breakpoint[], update?: (target: HTMLElement, change: Breakpoint & {
58
- matches: boolean;
56
+ declare function setupBreakpoints(breakpointsConfig?: BreakpointConfig[]): () => void;
57
+ declare function createBreakpointUpdater(breakpoints: Breakpoint[], update?: (target: HTMLElement, change: Breakpoint & {
58
+ matches: boolean;
59
59
  }) => void): () => void;
60
- export {};
61
- //# sourceMappingURL=breakpoints.d.ts.map
60
+ //#endregion
61
+ export { Breakpoint, BreakpointConfig, BreakpointOperator, breakpointAttribute, buildBreakpoint, createBreakpointUpdater, defaultBreakpoints, expandBreakpoints, observeBreakpoint, registeredBreakpoints, setupBreakpoints };
@@ -1,139 +1,158 @@
1
- import { signal, effect } from './signals.js';
2
- import { observeMedia } from './utils/shared-media-observer.js';
3
-
4
- const operators = ["<", "<=", ">=", ">"];
1
+ import { effect, signal } from "./signals.js";
2
+ import { observeMedia } from "./utils/shared-media-observer.js";
3
+ //#region src/lib/breakpoints.ts
4
+ const operators = [
5
+ "<",
6
+ "<=",
7
+ ">=",
8
+ ">"
9
+ ];
5
10
  const registeredBreakpoints = /* @__PURE__ */ new Map();
6
11
  const breakpointAttribute = "odx-breakpoint";
7
12
  const defaultBreakpoints = [
8
- { name: "sm", min: 0, max: 479.98 },
9
- { name: "md", min: 480, max: 768.98 },
10
- { name: "lg", min: 769, max: 990.98 },
11
- { name: "xl", min: 991, max: 1280.98 },
12
- { name: "xxl", min: 1352, max: Number.MAX_SAFE_INTEGER }
13
+ {
14
+ name: "sm",
15
+ min: 0,
16
+ max: 479.98
17
+ },
18
+ {
19
+ name: "md",
20
+ min: 480,
21
+ max: 768.98
22
+ },
23
+ {
24
+ name: "lg",
25
+ min: 769,
26
+ max: 990.98
27
+ },
28
+ {
29
+ name: "xl",
30
+ min: 991,
31
+ max: 1280.98
32
+ },
33
+ {
34
+ name: "xxl",
35
+ min: 1352,
36
+ max: Number.MAX_SAFE_INTEGER
37
+ }
13
38
  ];
14
39
  function buildBreakpoint(breakpoint, operator) {
15
- const id = operator ? `${operator}${breakpoint.name}` : breakpoint.name;
16
- let query = `(min-width: ${breakpoint.min}px) and (max-width: ${breakpoint.max}px)`;
17
- switch (operator) {
18
- case "<":
19
- query = `(max-width: ${breakpoint.min - 0.02}px)`;
20
- break;
21
- case "<=":
22
- query = `(max-width: ${breakpoint.max}px)`;
23
- break;
24
- case ">=":
25
- query = `(min-width: ${breakpoint.min}px)`;
26
- break;
27
- case ">":
28
- query = `(min-width: ${breakpoint.max + 0.02}px)`;
29
- break;
30
- }
31
- return { ...breakpoint, id, operator, query: [query, breakpoint.customQuery].filter(Boolean).join(" and ") };
40
+ const id = operator ? `${operator}${breakpoint.name}` : breakpoint.name;
41
+ let query = `(min-width: ${breakpoint.min}px) and (max-width: ${breakpoint.max}px)`;
42
+ switch (operator) {
43
+ case "<":
44
+ query = `(max-width: ${breakpoint.min - .02}px)`;
45
+ break;
46
+ case "<=":
47
+ query = `(max-width: ${breakpoint.max}px)`;
48
+ break;
49
+ case ">=":
50
+ query = `(min-width: ${breakpoint.min}px)`;
51
+ break;
52
+ case ">":
53
+ query = `(min-width: ${breakpoint.max + .02}px)`;
54
+ break;
55
+ }
56
+ return {
57
+ ...breakpoint,
58
+ id,
59
+ operator,
60
+ query: [query, breakpoint.customQuery].filter(Boolean).join(" and ")
61
+ };
32
62
  }
33
63
  function expandBreakpoints(...breakpoints) {
34
- return breakpoints.flatMap((breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator)));
64
+ return breakpoints.flatMap((breakpoint) => [void 0, ...operators].map((operator) => buildBreakpoint(breakpoint, operator)));
35
65
  }
36
66
  function observeBreakpoint(id, initialValue = false) {
37
- const breakpoint = registeredBreakpoints.get(id);
38
- let unobserveMedia;
39
- const state = signal(
40
- { ...breakpoint, matches: initialValue },
41
- {
42
- watched() {
43
- if (!breakpoint) return;
44
- unobserveMedia = observeMedia(breakpoint.query, ({ matches }) => {
45
- state.set({ ...breakpoint, matches });
46
- });
47
- },
48
- unwatched() {
49
- unobserveMedia?.();
50
- unobserveMedia = void 0;
51
- }
52
- }
53
- );
54
- return state;
67
+ const breakpoint = registeredBreakpoints.get(id);
68
+ let unobserveMedia;
69
+ const state = signal({
70
+ ...breakpoint,
71
+ matches: initialValue
72
+ }, {
73
+ watched() {
74
+ if (!breakpoint) return;
75
+ unobserveMedia = observeMedia(breakpoint.query, ({ matches }) => {
76
+ state.set({
77
+ ...breakpoint,
78
+ matches
79
+ });
80
+ });
81
+ },
82
+ unwatched() {
83
+ unobserveMedia?.();
84
+ unobserveMedia = void 0;
85
+ }
86
+ });
87
+ return state;
55
88
  }
56
89
  function setupBreakpoints(breakpointsConfig = []) {
57
- const breakpoints = expandBreakpoints(...defaultBreakpoints, ...breakpointsConfig);
58
- const directiveUpdater = createBreakpointUpdater(breakpoints);
59
- let mutationObserver;
60
- let unobserveBreakpoints = () => {
61
- };
62
- function initBreakpoints() {
63
- destroyBreakpoints();
64
- mutationObserver = new MutationObserver(directiveUpdater);
65
- mutationObserver.observe(document.documentElement, {
66
- attributes: true,
67
- subtree: true,
68
- childList: true,
69
- attributeFilter: [breakpointAttribute]
70
- });
71
- unobserveBreakpoints = effect(directiveUpdater);
72
- }
73
- function destroyBreakpoints() {
74
- unobserveBreakpoints();
75
- mutationObserver?.disconnect();
76
- globalThis.removeEventListener("DOMContentLoaded", initBreakpoints);
77
- }
78
- if (document.readyState === "loading") {
79
- globalThis.addEventListener("DOMContentLoaded", initBreakpoints, { once: true });
80
- } else {
81
- initBreakpoints();
82
- }
83
- return destroyBreakpoints;
90
+ const directiveUpdater = createBreakpointUpdater(expandBreakpoints(...defaultBreakpoints, ...breakpointsConfig));
91
+ let mutationObserver;
92
+ let unobserveBreakpoints = () => {};
93
+ function initBreakpoints() {
94
+ destroyBreakpoints();
95
+ mutationObserver = new MutationObserver(directiveUpdater);
96
+ mutationObserver.observe(document.documentElement, {
97
+ attributes: true,
98
+ subtree: true,
99
+ childList: true,
100
+ attributeFilter: [breakpointAttribute]
101
+ });
102
+ unobserveBreakpoints = effect(directiveUpdater);
103
+ }
104
+ function destroyBreakpoints() {
105
+ unobserveBreakpoints();
106
+ mutationObserver?.disconnect();
107
+ globalThis.removeEventListener("DOMContentLoaded", initBreakpoints);
108
+ }
109
+ if (document.readyState === "loading") globalThis.addEventListener("DOMContentLoaded", initBreakpoints, { once: true });
110
+ else initBreakpoints();
111
+ return destroyBreakpoints;
84
112
  }
85
113
  function updateHostElement(host, active) {
86
- const attributeName = "data-odx-breakpoint-slot";
87
- const classNames = host.getAttribute("odx-breakpoint-class");
88
- if (classNames) {
89
- for (const className of classNames.split(" ")) {
90
- host.classList.toggle(className, active);
91
- }
92
- return;
93
- }
94
- host.hidden = !active;
95
- let initialSlot = host.getAttribute(attributeName);
96
- if (initialSlot == null) {
97
- initialSlot = host.slot;
98
- host.setAttribute(attributeName, initialSlot);
99
- }
100
- if (active) {
101
- host.removeAttribute(attributeName);
102
- if (initialSlot === "") {
103
- host.removeAttribute("slot");
104
- return;
105
- }
106
- host.slot = "";
107
- host.slot = initialSlot;
108
- } else {
109
- host.slot = "_odx_breakpoint_hidden";
110
- }
114
+ const attributeName = "data-odx-breakpoint-slot";
115
+ const classNames = host.getAttribute("odx-breakpoint-class");
116
+ if (classNames) {
117
+ for (const className of classNames.split(" ")) host.classList.toggle(className, active);
118
+ return;
119
+ }
120
+ host.hidden = !active;
121
+ let initialSlot = host.getAttribute(attributeName);
122
+ if (initialSlot == null) {
123
+ initialSlot = host.slot;
124
+ host.setAttribute(attributeName, initialSlot);
125
+ }
126
+ if (active) {
127
+ host.removeAttribute(attributeName);
128
+ if (initialSlot === "") {
129
+ host.removeAttribute("slot");
130
+ return;
131
+ }
132
+ host.slot = "";
133
+ host.slot = initialSlot;
134
+ } else host.slot = "_odx_breakpoint_hidden";
111
135
  }
112
136
  function createBreakpointUpdater(breakpoints, update) {
113
- for (const breakpoint of breakpoints) {
114
- registeredBreakpoints.set(breakpoint.id, breakpoint);
115
- }
116
- const breakpointCache = /* @__PURE__ */ new WeakMap();
117
- const breakpointObservers = breakpoints.map((breakpoint) => observeBreakpoint(breakpoint.id, false));
118
- return () => {
119
- const elements = document.querySelectorAll(`[${breakpointAttribute}]`);
120
- const changes = breakpointObservers.reduce(
121
- (breakpoints2, breakpoint) => {
122
- breakpoints2[breakpoint.get().id] = breakpoint.get();
123
- return breakpoints2;
124
- },
125
- {}
126
- );
127
- let i = elements.length;
128
- while (i--) {
129
- const element = elements[i];
130
- const change = changes[element.getAttribute(breakpointAttribute) || ""];
131
- if (!change || change.matches === breakpointCache.get(element)) continue;
132
- breakpointCache.set(element, change.matches);
133
- updateHostElement(element, change.matches);
134
- update?.(element, change);
135
- }
136
- };
137
+ for (const breakpoint of breakpoints) registeredBreakpoints.set(breakpoint.id, breakpoint);
138
+ const breakpointCache = /* @__PURE__ */ new WeakMap();
139
+ const breakpointObservers = breakpoints.map((breakpoint) => observeBreakpoint(breakpoint.id, false));
140
+ return () => {
141
+ const elements = document.querySelectorAll(`[${breakpointAttribute}]`);
142
+ const changes = breakpointObservers.reduce((breakpoints, breakpoint) => {
143
+ breakpoints[breakpoint.get().id] = breakpoint.get();
144
+ return breakpoints;
145
+ }, {});
146
+ let i = elements.length;
147
+ while (i--) {
148
+ const element = elements[i];
149
+ const change = changes[element.getAttribute("odx-breakpoint") || ""];
150
+ if (!change || change.matches === breakpointCache.get(element)) continue;
151
+ breakpointCache.set(element, change.matches);
152
+ updateHostElement(element, change.matches);
153
+ update?.(element, change);
154
+ }
155
+ };
137
156
  }
138
-
157
+ //#endregion
139
158
  export { breakpointAttribute, buildBreakpoint, createBreakpointUpdater, defaultBreakpoints, expandBreakpoints, observeBreakpoint, registeredBreakpoints, setupBreakpoints };
@@ -1,58 +1,60 @@
1
- import { UnitIdentifier } from './models.js';
2
- export interface FormatOptions {
3
- dateTimeFormatOptions?: DateTimeFormatOptions;
4
- numberFormatOptions?: NumberFormatOptions;
5
- listFormatOptions?: ListFormatOptions;
6
- relativeTimeFormatOptions?: RelativeTimeFormatOptions;
1
+ import { UnitIdentifier } from "./models.js";
2
+
3
+ //#region src/lib/format.d.ts
4
+ interface FormatOptions {
5
+ dateTimeFormatOptions?: DateTimeFormatOptions;
6
+ numberFormatOptions?: NumberFormatOptions;
7
+ listFormatOptions?: ListFormatOptions;
8
+ relativeTimeFormatOptions?: RelativeTimeFormatOptions;
7
9
  }
8
10
  interface BaseFormatOptions {
9
- locale?: Intl.Locale | Intl.UnicodeBCP47LocaleIdentifier;
11
+ locale?: Intl.Locale | Intl.UnicodeBCP47LocaleIdentifier;
10
12
  }
11
- export interface DateTimeFormatOptions extends Omit<Intl.DateTimeFormatOptions, 'dateStyle'>, BaseFormatOptions {
12
- dateStyle?: 'iso8601' | Intl.DateTimeFormatOptions['dateStyle'];
13
+ interface DateTimeFormatOptions extends Omit<Intl.DateTimeFormatOptions, 'dateStyle'>, BaseFormatOptions {
14
+ dateStyle?: 'iso8601' | Intl.DateTimeFormatOptions['dateStyle'];
13
15
  }
14
- export declare function parseDate(value: number | string | Date): Date | null;
15
- export declare function formatDate(input: number | string | Date, options?: DateTimeFormatOptions): string;
16
- export interface NumberFormatOptions extends Intl.NumberFormatOptions, BaseFormatOptions {
17
- unit?: UnitIdentifier;
16
+ declare function parseDate(value: number | string | Date): Date | null;
17
+ declare function formatDate(input: number | string | Date, options?: DateTimeFormatOptions): string;
18
+ interface NumberFormatOptions extends Intl.NumberFormatOptions, BaseFormatOptions {
19
+ unit?: UnitIdentifier;
18
20
  }
19
- export declare function formatNumber(input: number | string, options?: NumberFormatOptions): string;
20
- export interface ListFormatOptions extends Intl.ListFormatOptions, BaseFormatOptions {
21
- }
22
- export declare function formatList(input: string[], options?: ListFormatOptions): string;
21
+ declare function formatNumber(input: number | string, options?: NumberFormatOptions): string;
22
+ interface ListFormatOptions extends Intl.ListFormatOptions, BaseFormatOptions {}
23
+ declare function formatList(input: string[], options?: ListFormatOptions): string;
23
24
  declare const TIME_UNIT_MAP: {
24
- readonly second: {
25
- readonly max: 59000;
26
- readonly value: 1000;
27
- };
28
- readonly minute: {
29
- readonly max: 2760000;
30
- readonly value: 60000;
31
- };
32
- readonly hour: {
33
- readonly max: 72000000;
34
- readonly value: 3600000;
35
- };
36
- readonly day: {
37
- readonly max: 518400000;
38
- readonly value: 86400000;
39
- };
40
- readonly week: {
41
- readonly max: 2419200000;
42
- readonly value: 604800000;
43
- };
44
- readonly month: {
45
- readonly max: 28512000000;
46
- readonly value: 2592000000;
47
- };
48
- readonly year: {
49
- readonly max: number;
50
- readonly value: 31536000000;
51
- };
25
+ readonly second: {
26
+ readonly max: 59000;
27
+ readonly value: 1000;
28
+ };
29
+ readonly minute: {
30
+ readonly max: 2760000;
31
+ readonly value: 60000;
32
+ };
33
+ readonly hour: {
34
+ readonly max: 72000000;
35
+ readonly value: 3600000;
36
+ };
37
+ readonly day: {
38
+ readonly max: 518400000;
39
+ readonly value: 86400000;
40
+ };
41
+ readonly week: {
42
+ readonly max: 2419200000;
43
+ readonly value: 604800000;
44
+ };
45
+ readonly month: {
46
+ readonly max: 28512000000;
47
+ readonly value: 2592000000;
48
+ };
49
+ readonly year: {
50
+ readonly max: number;
51
+ readonly value: 31536000000;
52
+ };
52
53
  };
53
- export interface RelativeTimeFormatOptions extends Intl.RelativeTimeFormatOptions, BaseFormatOptions {
54
- minUnit?: keyof typeof TIME_UNIT_MAP;
54
+ interface RelativeTimeFormatOptions extends Intl.RelativeTimeFormatOptions, BaseFormatOptions {
55
+ minUnit?: keyof typeof TIME_UNIT_MAP;
56
+ start?: number | string | Date;
55
57
  }
56
- export declare function formatRelativeTime(input: number | string | Date, options?: RelativeTimeFormatOptions): string;
57
- export {};
58
- //# sourceMappingURL=format.d.ts.map
58
+ declare function formatRelativeTime(input: number | string | Date, options?: RelativeTimeFormatOptions): string;
59
+ //#endregion
60
+ export { DateTimeFormatOptions, FormatOptions, ListFormatOptions, NumberFormatOptions, RelativeTimeFormatOptions, formatDate, formatList, formatNumber, formatRelativeTime, parseDate };