@rozie-ui/dialog-svelte 0.0.0-stage → 0.2.4

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.
@@ -0,0 +1,37 @@
1
+ /*
2
+ * @rozie-ui/dialog — Bootstrap 5 bridge.
3
+ *
4
+ * Maps the dialog tokens onto Bootstrap's `--bs-*` CSS variables (Bootstrap
5
+ * 5.2+). Reading them live means the dialog follows `data-bs-theme="dark"` and
6
+ * any custom build automatically. Falls back to Bootstrap's default light
7
+ * palette when the vars are absent.
8
+ *
9
+ * import '@rozie-ui/dialog-svelte/themes/bootstrap.css';
10
+ *
11
+ * Bootstrap modals use a 0.5rem radius, a 1px border, and a 0.5-opacity black
12
+ * backdrop (`$modal-backdrop-bg` / `$modal-backdrop-opacity`).
13
+ *
14
+ * HOW IT MAPS. This bridge declares no public token: it re-declares the private wiring of
15
+ * each token it maps, with the design system's variable as the fallback
16
+ * (`--rdg-x: var(--rozie-dialog-x, <design-system variable>)`). The component reads every token
17
+ * public-first, so on all six targets:
18
+ * - a public `--rozie-dialog-*` token set on any ancestor (or on the component) wins;
19
+ * - otherwise the design system's variable applies, resolved AT the component (`.rozie-dialog`
20
+ * and the Lit host `rozie-dialog`), so a `.dark` / `data-bs-theme` wrapper narrower than
21
+ * <html> is followed;
22
+ * - a Lit component nested in another shadow root, which no document selector reaches,
23
+ * inherits the `:root` copy instead: there the design system's variables are read at
24
+ * the document root.
25
+ * This rule outranks base.css's `:where(:root)` wiring, so import order does not matter.
26
+ */
27
+ :root,
28
+ .rozie-dialog,
29
+ rozie-dialog {
30
+ --rdg-bg: var(--rozie-dialog-bg, var(--bs-body-bg, #fff));
31
+ --rdg-color: var(--rozie-dialog-color, var(--bs-body-color, #212529));
32
+ --rdg-border: var(--rozie-dialog-border, 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175)));
33
+ --rdg-radius: var(--rozie-dialog-radius, var(--bs-border-radius-lg, 0.5rem));
34
+
35
+ --rdg-backdrop-bg: var(--rozie-dialog-backdrop-bg, rgba(0, 0, 0, 0.5));
36
+ --rdg-shadow: var(--rozie-dialog-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
37
+ }
@@ -0,0 +1,37 @@
1
+ /*
2
+ * @rozie-ui/dialog — Material Design 3 bridge.
3
+ *
4
+ * Maps the dialog tokens onto the MD3 system color roles (`--md-sys-color-*`)
5
+ * emitted by material-web / @material/material-color-utilities theme builders.
6
+ * Falls back to the baseline M3 light palette when those vars are absent, so it
7
+ * renders correctly even without a generated theme.
8
+ *
9
+ * import '@rozie-ui/dialog-svelte/themes/material.css';
10
+ *
11
+ * M3 dialogs are heavily rounded (28dp), use the surface-container-high color,
12
+ * and a scrim at ~32% of the scrim color role.
13
+ *
14
+ * HOW IT MAPS. This bridge declares no public token: it re-declares the private wiring of
15
+ * each token it maps, with the design system's variable as the fallback
16
+ * (`--rdg-x: var(--rozie-dialog-x, <design-system variable>)`). The component reads every token
17
+ * public-first, so on all six targets:
18
+ * - a public `--rozie-dialog-*` token set on any ancestor (or on the component) wins;
19
+ * - otherwise the design system's variable applies, resolved AT the component (`.rozie-dialog`
20
+ * and the Lit host `rozie-dialog`), so a `.dark` / `data-bs-theme` wrapper narrower than
21
+ * <html> is followed;
22
+ * - a Lit component nested in another shadow root, which no document selector reaches,
23
+ * inherits the `:root` copy instead: there the design system's variables are read at
24
+ * the document root.
25
+ * This rule outranks base.css's `:where(:root)` wiring, so import order does not matter.
26
+ */
27
+ :root,
28
+ .rozie-dialog,
29
+ rozie-dialog {
30
+ --rdg-bg: var(--rozie-dialog-bg, var(--md-sys-color-surface-container-high, #ece6f0));
31
+ --rdg-color: var(--rozie-dialog-color, var(--md-sys-color-on-surface, #1d1b20));
32
+ --rdg-border: var(--rozie-dialog-border, none);
33
+ --rdg-radius: var(--rozie-dialog-radius, 1.75rem);
34
+
35
+ --rdg-backdrop-bg: var(--rozie-dialog-backdrop-bg, color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent));
36
+ --rdg-shadow: var(--rozie-dialog-shadow, 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.3));
37
+ }
@@ -0,0 +1,38 @@
1
+ /*
2
+ * @rozie-ui/dialog — shadcn/ui (Radix) bridge.
3
+ *
4
+ * Maps the dialog tokens onto the shadcn/ui CSS variables defined on `:root`
5
+ * / `.dark` (the classic HSL-channel convention: `--background: 0 0% 100%`
6
+ * consumed as `hsl(var(--background))`). Because it reads those vars live, the
7
+ * dialog automatically follows light/dark theme switches.
8
+ *
9
+ * import '@rozie-ui/dialog-svelte/themes/shadcn.css';
10
+ *
11
+ * If your shadcn setup predates the `hsl()`-wrapping convention (Tailwind v4 /
12
+ * oklch tokens emit pre-formed colors), drop the `hsl(...)` wrappers below.
13
+ *
14
+ * HOW IT MAPS. This bridge declares no public token: it re-declares the private wiring of
15
+ * each token it maps, with the design system's variable as the fallback
16
+ * (`--rdg-x: var(--rozie-dialog-x, <design-system variable>)`). The component reads every token
17
+ * public-first, so on all six targets:
18
+ * - a public `--rozie-dialog-*` token set on any ancestor (or on the component) wins;
19
+ * - otherwise the design system's variable applies, resolved AT the component (`.rozie-dialog`
20
+ * and the Lit host `rozie-dialog`), so a `.dark` / `data-bs-theme` wrapper narrower than
21
+ * <html> is followed;
22
+ * - a Lit component nested in another shadow root, which no document selector reaches,
23
+ * inherits the `:root` copy instead: there the design system's variables are read at
24
+ * the document root.
25
+ * This rule outranks base.css's `:where(:root)` wiring, so import order does not matter.
26
+ */
27
+ :root,
28
+ .rozie-dialog,
29
+ rozie-dialog {
30
+ --rdg-bg: var(--rozie-dialog-bg, hsl(var(--background, 0 0% 100%)));
31
+ --rdg-color: var(--rozie-dialog-color, hsl(var(--foreground, 222.2 84% 4.9%)));
32
+ --rdg-border: var(--rozie-dialog-border, 1px solid hsl(var(--border, 214.3 31.8% 91.4%)));
33
+ --rdg-radius: var(--rozie-dialog-radius, var(--radius, 0.5rem));
34
+
35
+ /* shadcn dialogs use a soft, low scrim */
36
+ --rdg-backdrop-bg: var(--rozie-dialog-backdrop-bg, hsl(var(--background, 0 0% 0%) / 0.8));
37
+ --rdg-shadow: var(--rozie-dialog-shadow, 0 10px 38px hsl(var(--foreground, 222.2 84% 4.9%) / 0.18));
38
+ }
package/package.json CHANGED
@@ -1,6 +1,73 @@
1
1
  {
2
2
  "name": "@rozie-ui/dialog-svelte",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
3
+ "version": "0.2.4",
4
+ "type": "module",
5
+ "private": false,
6
+ "license": "MIT",
7
+ "description": "Idiomatic Svelte headless WAI-ARIA modal dialog on the native <dialog> element (top-layer, ::backdrop scrim, focus trap, Esc-to-dismiss, scroll-lock) — one accessible Rozie source compiled to Svelte.",
8
+ "keywords": [
9
+ "rozie",
10
+ "rozie-ui",
11
+ "dialog",
12
+ "modal",
13
+ "popup",
14
+ "overlay",
15
+ "headless",
16
+ "accessibility",
17
+ "aria",
18
+ "component",
19
+ "svelte"
20
+ ],
21
+ "author": "One Learning Community (https://github.com/One-Learning-Community)",
22
+ "homepage": "https://github.com/One-Learning-Community/rozie.js#readme",
23
+ "repository": {
24
+ "type": "git",
25
+ "url": "git+https://github.com/One-Learning-Community/rozie.js.git",
26
+ "directory": "packages/ui/dialog/packages/svelte"
27
+ },
28
+ "bugs": {
29
+ "url": "https://github.com/One-Learning-Community/rozie.js/issues"
30
+ },
31
+ "exports": {
32
+ ".": {
33
+ "svelte": "./dist/Dialog.svelte",
34
+ "types": "./dist/Dialog.svelte.d.ts",
35
+ "default": "./dist/Dialog.svelte"
36
+ },
37
+ "./themes/*": "./src/themes/*",
38
+ "./source": {
39
+ "svelte": "./src/Dialog.svelte",
40
+ "default": "./src/Dialog.svelte"
41
+ }
42
+ },
43
+ "files": [
44
+ "dist",
45
+ "src",
46
+ "CHANGELOG.md"
47
+ ],
48
+ "dependencies": {
49
+ "@rozie/runtime-svelte": "^0.10.1"
50
+ },
51
+ "peerDependencies": {
52
+ "svelte": "^5"
53
+ },
54
+ "peerDependenciesMeta": {
55
+ "svelte": {
56
+ "optional": false
57
+ }
58
+ },
59
+ "publishConfig": {
60
+ "access": "public"
61
+ },
62
+ "devDependencies": {
63
+ "@sveltejs/package": "^2",
64
+ "@sveltejs/vite-plugin-svelte": "^5",
65
+ "svelte": "^5",
66
+ "svelte2tsx": "^0.7",
67
+ "typescript": "~5.6.0"
68
+ },
69
+ "scripts": {
70
+ "build": "svelte-package --input src --output dist",
71
+ "typecheck": "echo 'source+dist; svelte-check at repo level'"
72
+ }
6
73
  }
@@ -0,0 +1,320 @@
1
+ <script module lang="ts">
2
+ /** Why the dialog closed: a scrim click, the Escape key, or a programmatic `hide()`. */
3
+ export type DialogCloseReason = 'backdrop' | 'escape' | 'programmatic';
4
+ /** The `close` event payload. */
5
+ export interface DialogClosePayload {
6
+ reason: DialogCloseReason;
7
+ }
8
+ </script>
9
+ <script lang="ts">
10
+ import { applyListeners } from '@rozie/runtime-svelte';
11
+
12
+ import type { Snippet } from 'svelte';
13
+ import { onDestroy, onMount, untrack } from 'svelte';
14
+
15
+ interface Props extends Omit<import('svelte/elements').SvelteHTMLElements['dialog'], 'open' | 'disableBackdropClose' | 'disableEscapeClose' | 'disableScrollLock' | 'initialFocus' | 'ariaLabel' | 'ariaLabelledby' | 'children' | 'snippets' | 'onclose'> {
16
+ /**
17
+ * Whether the dialog is shown (two-way `r-model`). The sole `model: true` prop — two-way bind it (`r-model:open` / `v-model:open` / `bind:open` / `[(open)]`) and Dialog reconciles the native `<dialog>` to it via `showModal()` / `close()`. Every close path (backdrop, Escape, programmatic `hide()`) writes `open = false` and emits `close`.
18
+ * @example
19
+ * <Dialog bind:open={confirmOpen} ariaLabelledby="confirm-title" />
20
+ */
21
+ open?: boolean;
22
+ /**
23
+ * Opt **out** of backdrop-click-to-dismiss. By default a click on the scrim (the `<dialog>` element itself, outside the content panel) closes the dialog with `reason: 'backdrop'`; set this to require an explicit action.
24
+ */
25
+ disableBackdropClose?: boolean;
26
+ /**
27
+ * Opt **out** of Escape-to-dismiss. By default the native `cancel` event (Esc) closes with `reason: 'escape'`; the component `preventDefault()`s it so the close always flows through the `open` model. Set this to keep the dialog open on Escape (e.g. a required confirmation).
28
+ */
29
+ disableEscapeClose?: boolean;
30
+ /**
31
+ * Opt **out** of locking `<html>` scroll while the dialog is open. By default `document.documentElement` `overflow` is set to `hidden` for the duration the dialog is shown; set this to leave background scrolling enabled.
32
+ */
33
+ disableScrollLock?: boolean;
34
+ /**
35
+ * What to focus when the dialog opens: a CSS selector matched inside the dialog content, or an Element. By default the native `showModal()` choice applies: the first element with `autofocus`, otherwise the first focusable element. Use it to start on a specific field (e.g. `initialFocus="input[name=title]"`) without waiting for the dialog to mount. A selector that matches nothing, or an element that is not focusable, leaves the native choice in place.
36
+ * @example
37
+ * <Dialog bind:open={renameOpen} initialFocus="#label-name" />
38
+ */
39
+ initialFocus?: (string | Element) | null;
40
+ /**
41
+ * Accessible name for the dialog (`aria-label`) when there is no visible title to point at. Prefer `ariaLabelledby` when a visible heading exists.
42
+ */
43
+ ariaLabel?: (string) | null;
44
+ /**
45
+ * The `id` of the element that titles the dialog (`aria-labelledby`) — preferred over `ariaLabel` when a visible heading exists inside the dialog. On the Lit element the dialog lives in a shadow root while the heading is slotted light DOM, so the attribute alone cannot reach it; Dialog hands the browser the element directly (`ariaLabelledByElements`) where that is supported (Chrome/Edge 135+, Safari 16.4+) — elsewhere, use `ariaLabel` on Lit.
46
+ */
47
+ ariaLabelledby?: (string) | null;
48
+ children?: Snippet;
49
+ snippets?: Record<string, any>;
50
+ onclose?: (payload: DialogClosePayload) => void;
51
+ }
52
+
53
+ let {
54
+ open = $bindable(false),
55
+ disableBackdropClose = false,
56
+ disableEscapeClose = false,
57
+ disableScrollLock = false,
58
+ initialFocus = null,
59
+ ariaLabel = null,
60
+ ariaLabelledby = null,
61
+ children: __childrenProp,
62
+ snippets,
63
+ onclose,
64
+ ...__rozieAttrs
65
+ }: Props = $props();
66
+
67
+ const children = $derived(__childrenProp ?? snippets?.children);
68
+
69
+ let panelEl = $state<HTMLElement | undefined>(undefined);
70
+
71
+ import { applyScrollLock as applySharedScrollLock } from './internal/scrollLock';
72
+ // ---- native reconcile ---------------------------------------------------
73
+ // The <dialog> element, cached by sync() so $onUnmount can reach it without
74
+ // reading $refs during teardown.
75
+ let dialogEl: HTMLDialogElement | null = null;
76
+ // Whether THIS instance currently holds one count of the shared scroll lock.
77
+ let holdsLock = false;
78
+ // The element focused when the dialog opened, for the unmount-while-open
79
+ // focus return (a normal close gets the native return from close()).
80
+ let returnFocusTo: HTMLElement | null = null;
81
+ // Whether the press that is about to produce a `click` began INSIDE the panel.
82
+ // A press that starts on content (selecting text, a drag) and is released over
83
+ // the scrim yields a `click` whose target is the common ancestor, the <dialog>
84
+ // itself; without this it would be mistaken for a backdrop click.
85
+ let pressStartedInside = false;
86
+ // Lock/unlock <html> scroll for this instance. The actual lock/unlock is
87
+ // REF-COUNTED (./internal/scrollLock) across every Dialog instance sharing this
88
+ // leaf's module, because a naive per-instance toggle unlocks scrolling the
89
+ // moment ANY dialog closes, even while an OUTER dialog is still open. This
90
+ // wrapper releases only a count this instance took: a dialog that mounts closed
91
+ // (or closes twice) must not release a count another open dialog holds. The
92
+ // opt-out is read when locking only, so toggling it while open still releases.
93
+ const setScrollLock = (lock: any) => {
94
+ if (lock === holdsLock) return;
95
+ if (lock && disableScrollLock) return;
96
+ holdsLock = lock;
97
+ applySharedScrollLock(lock);
98
+ };
99
+ // The element that really has focus. `document.activeElement` stops at the
100
+ // outermost shadow host (on Lit the trigger lives inside a component's shadow
101
+ // root, so it reports that component), so walk each shadowRoot.activeElement.
102
+ const deepActiveElement = () => {
103
+ let active: any = typeof document === 'undefined' ? null : document.activeElement;
104
+ while (active && active.shadowRoot && active.shadowRoot.activeElement) active = active.shadowRoot.activeElement;
105
+ return active;
106
+ };
107
+ // Focus `initialFocus` after showModal() has made its native choice. A selector
108
+ // is matched inside the panel and, on Lit, inside the light-DOM content
109
+ // assigned to the panel's <slot> (which panel.querySelector cannot see).
110
+ const focusInitial = (panel: any) => {
111
+ const target: any = initialFocus;
112
+ if (!target) return;
113
+ let node: any = null;
114
+ if (typeof target === 'string') {
115
+ node = panel.querySelector(target);
116
+ const slot: any = node ? null : panel.querySelector('slot');
117
+ const assigned: any[] = slot && typeof slot.assignedElements === 'function' ? slot.assignedElements({
118
+ flatten: true
119
+ }) : [];
120
+ for (let i = 0; !node && i < assigned.length; i++) {
121
+ node = assigned[i].matches(target) ? assigned[i] : assigned[i].querySelector(target);
122
+ }
123
+ } else {
124
+ node = target;
125
+ }
126
+ if (node && typeof node.focus === 'function') node.focus();
127
+ };
128
+ // `aria-labelledby` is an IDREF, and an IDREF never crosses a shadow-root
129
+ // boundary. Where the <dialog> lives inside an element's shadow root (the Lit
130
+ // target) the heading it names is slotted LIGHT DOM, so the attribute resolves to
131
+ // nothing and the dialog has no accessible name. Element reflection can point
132
+ // across the boundary (to an element in an ancestor tree), so when the id is not
133
+ // reachable from the dialog's own root, hand the browser the element directly.
134
+ // A no-op outside a shadow root, and where the browser lacks the property.
135
+ const bridgeLabelledBy = (el: any) => {
136
+ const id = ariaLabelledby;
137
+ const root: any = el.getRootNode();
138
+ if (!id || !root || !root.host || typeof root.getElementById !== 'function') return;
139
+ if (root.getElementById(id) || !('ariaLabelledByElements' in el)) return;
140
+ const outer: any = root.host.getRootNode();
141
+ const heading = outer && typeof outer.getElementById === 'function' ? outer.getElementById(id) : null;
142
+ if (heading) el.ariaLabelledByElements = [heading];
143
+ };
144
+ // Reconcile the native <dialog> to the desired open state. Guarded on the
145
+ // native `el.open` flag (showModal throws if already open; close is a no-op when
146
+ // closed). Reads $refs in a post-mount callback (ROZ123-safe).
147
+ //
148
+ // The ref lives on the inner panel <div> (which the emitter types as
149
+ // HTMLDivElement), and we reach the <dialog> via `panel.parentElement` cast to
150
+ // HTMLDialogElement. This sidesteps an emitter gap: the per-target ref-type map
151
+ // has no `dialog` case, so a ref placed directly on <dialog> would be typed the
152
+ // generic HTMLElement (no `.open`/`.showModal()`/`.close()`), failing strict
153
+ // leaf typecheck. Fixing it here keeps the change source-only (no emitter edit).
154
+ const sync = (isOpen: any) => {
155
+ const panel = panelEl;
156
+ const el = (panel && panel.parentElement) as HTMLDialogElement | null;
157
+ if (!el) return;
158
+ dialogEl = el;
159
+ if (isOpen) {
160
+ if (!el.open) {
161
+ const active = deepActiveElement();
162
+ returnFocusTo = active instanceof HTMLElement ? active : null;
163
+ bridgeLabelledBy(el);
164
+ el.showModal();
165
+ focusInitial(panel);
166
+ }
167
+ setScrollLock(true);
168
+ } else {
169
+ if (el.open) el.close();
170
+ returnFocusTo = null;
171
+ setScrollLock(false);
172
+ }
173
+ };
174
+ // ---- close funnel (single $emit site) ----------------------------------
175
+ const closeWith = (reason: any) => {
176
+ open = false;
177
+ onclose?.({
178
+ reason
179
+ });
180
+ };
181
+ // ---- handlers ----------------------------------------------------------
182
+ // Native Esc fires `cancel` on the <dialog>. preventDefault so WE drive the
183
+ // close through the model (keeping `open` in sync); honor the opt-out.
184
+ const onCancel = (e: any) => {
185
+ if (e) e.preventDefault();
186
+ if (disableEscapeClose) return;
187
+ closeWith('escape');
188
+ };
189
+ // Remember whether a press began on the panel's content (anywhere but the
190
+ // <dialog> box itself), so the `click` that follows can tell a real scrim click
191
+ // from the end of a drag that merely finished over the scrim.
192
+ const onPointerDown = (e: any) => {
193
+ const panel = panelEl;
194
+ const el = panel && panel.parentElement;
195
+ pressStartedInside = !!(e && el && e.target !== el);
196
+ };
197
+ // A click whose target IS the <dialog> element (not its panel/children) is a
198
+ // backdrop click — the ::backdrop is part of the dialog box. We compare the
199
+ // real `e.target` (reliable even under Solid's event delegation) to the dialog
200
+ // element resolved via the panel ref's parent. A click whose press started
201
+ // inside the panel is not one (see `pressStartedInside`).
202
+ const onClick = (e: any) => {
203
+ const startedInside = pressStartedInside;
204
+ pressStartedInside = false;
205
+ if (disableBackdropClose || startedInside) return;
206
+ const panel = panelEl;
207
+ const el = panel && panel.parentElement;
208
+ if (e && el && e.target === el) closeWith('backdrop');
209
+ };
210
+ // The native `close` event: fired by `el.close()` from our own reconcile (by then
211
+ // the model is already false, and the dialog may even have been re-opened), but
212
+ // also by closes WE did not drive — a `<form method="dialog">` submit, a stray
213
+ // `dialog.close()`. For those the model is still true over a closed dialog and
214
+ // would stay stuck (writing `open = true` again changes nothing), so fold them
215
+ // into the close funnel. Not during teardown: $onUnmount closes the dialog
216
+ // itself after clearing `dialogEl`.
217
+ const onNativeClose = () => {
218
+ const el = dialogEl;
219
+ if (!el || el.open || !open) return;
220
+ closeWith('programmatic');
221
+ };
222
+
223
+ // ---- lifecycle ---------------------------------------------------------
224
+ // ---- imperative handle -------------------------------------------------
225
+ // show()/hide() — named to avoid the `open` model + `@close` event collisions.
226
+ // hide() on a dialog that is not open is a no-op: there is nothing to dismiss, so
227
+ // it must not emit a `close` for a dismissal that never happened.
228
+ export const show: () => void = () => {
229
+ open = true;
230
+ };
231
+ export const hide: () => void = () => {
232
+ if (!open) return;
233
+ closeWith('programmatic');
234
+ };
235
+
236
+ let __rozieWatchInitial_0 = true;
237
+ $effect(() => { const __watchVal = (() => open)(); untrack(() => { if (__rozieWatchInitial_0) { __rozieWatchInitial_0 = false; return; } ((isOpen: any) => {
238
+ sync(isOpen);
239
+ })(__watchVal); }); });
240
+
241
+ onMount(() => {
242
+ sync(open);
243
+ });
244
+ onDestroy(() => (() => {
245
+ setScrollLock(false);
246
+ pressStartedInside = false;
247
+ const el = dialogEl;
248
+ const back = returnFocusTo;
249
+ dialogEl = null;
250
+ returnFocusTo = null;
251
+ if (!el || !el.open) return;
252
+ if (el.isConnected) el.close();
253
+ if (!back) return;
254
+ setTimeout(() => {
255
+ // Lost: on <body>, or stranded on a shadow host whose root holds no focus
256
+ // and which is not focusable itself (the dialog's removed subtree was
257
+ // inside it).
258
+ const active = deepActiveElement();
259
+ const lost = !active || active === document.body || !!active.shadowRoot && active.tabIndex < 0;
260
+ if (back.isConnected && lost) back.focus();
261
+ }, 0);
262
+ })());
263
+ </script>
264
+
265
+ <dialog aria-label={ariaLabel} aria-labelledby={ariaLabelledby} {...__rozieAttrs} class={["rozie-dialog", (__rozieAttrs)?.class]} oncancel={($event) => { onCancel($event); }} onclose={($event) => { onNativeClose(); }} onpointerdown={($event) => { onPointerDown($event); }} onclick={($event) => { onClick($event); }} use:applyListeners={__rozieAttrs} data-rozie-s-2a679072><div class="rozie-dialog-panel" bind:this={panelEl} data-rozie-s-2a679072>{@render children?.()}</div></dialog>
266
+
267
+ <style>
268
+ :global {
269
+ @media (prefers-reduced-motion: no-preference) {
270
+ .rozie-dialog[data-rozie-s-2a679072] {
271
+ transition: opacity var(--rozie-dialog-transition, var(--rdg-transition, 0.15s ease)), transform var(--rozie-dialog-transition, var(--rdg-transition, 0.15s ease)), overlay 0.15s ease allow-discrete, display 0.15s ease allow-discrete;
272
+ opacity: 1;
273
+ transform: translateY(0) scale(1);
274
+ }
275
+ .rozie-dialog[data-rozie-s-2a679072]:not([open][data-rozie-s-2a679072]) {
276
+ opacity: 0;
277
+ transform: translateY(0.5rem) scale(0.98);
278
+ }
279
+ @starting-style {
280
+ .rozie-dialog[open][data-rozie-s-2a679072] {
281
+ opacity: 0;
282
+ transform: translateY(0.5rem) scale(0.98);
283
+ }
284
+ }
285
+ .rozie-dialog[data-rozie-s-2a679072]::backdrop {
286
+ transition: opacity var(--rozie-dialog-transition, var(--rdg-transition, 0.15s ease)), overlay 0.15s ease allow-discrete, display 0.15s ease allow-discrete;
287
+ opacity: 1;
288
+ }
289
+ .rozie-dialog[data-rozie-s-2a679072]:not([open][data-rozie-s-2a679072])::backdrop {
290
+ opacity: 0;
291
+ }
292
+ @starting-style {
293
+ .rozie-dialog[open][data-rozie-s-2a679072]::backdrop {
294
+ opacity: 0;
295
+ }
296
+ }
297
+ }
298
+ .rozie-dialog[data-rozie-s-2a679072] {
299
+ margin: auto; /* centers in the top layer */
300
+ padding: 0;
301
+ width: var(--rozie-dialog-width, var(--rdg-width, auto));
302
+ max-width: var(--rozie-dialog-max-width, var(--rdg-max-width, min(32rem, calc(100vw - 2rem))));
303
+ max-height: var(--rozie-dialog-max-height, var(--rdg-max-height, calc(100vh - 2rem)));
304
+ border: var(--rozie-dialog-border, var(--rdg-border, none));
305
+ border-radius: var(--rozie-dialog-radius, var(--rdg-radius, 0.75rem));
306
+ background: var(--rozie-dialog-bg, var(--rdg-bg, #fff));
307
+ color: var(--rozie-dialog-color, var(--rdg-color, inherit));
308
+ box-shadow: var(--rozie-dialog-shadow, var(--rdg-shadow, 0 10px 38px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.25)));
309
+ overflow: auto;
310
+ }
311
+ .rozie-dialog[data-rozie-s-2a679072]::backdrop {
312
+ background: var(--rozie-dialog-backdrop-bg, var(--rdg-backdrop-bg, rgba(0, 0, 0, 0.5)));
313
+ backdrop-filter: var(--rozie-dialog-backdrop-filter, var(--rdg-backdrop-filter, none));
314
+ }
315
+ .rozie-dialog-panel[data-rozie-s-2a679072] {
316
+ padding: var(--rozie-dialog-padding, var(--rdg-padding, 1.5rem));
317
+ font: var(--rozie-dialog-font, inherit);
318
+ }
319
+ }
320
+ </style>
@@ -0,0 +1,48 @@
1
+ // scrollLock.ts — a REF-COUNTED `<html>` scroll lock, shared by every `Dialog`
2
+ // instance compiled from this leaf's module (module-scope state — a plain
3
+ // per-instance toggle would unlock scrolling the moment ANY dialog closes,
4
+ // even while an OUTER dialog is still open — nested/stacked dialogs).
5
+ //
6
+ // The lock only actually applies on the 0 -> 1 transition and only actually
7
+ // releases on the 1 -> 0 transition. The ORIGINAL inline `overflow` value
8
+ // (captured on that first lock, not a hardcoded `''`) is restored when the
9
+ // count drops back to zero, so a page that already set its own inline
10
+ // `overflow` isn't clobbered by the second (or third...) dialog to close.
11
+ //
12
+ // Vendored (byte-identical) into every `@rozie-ui/dialog-*` leaf's
13
+ // `src/internal/` by `scripts/codegen.mjs`, unit-tested once here — the same
14
+ // "branchy, non-reactive helper -> src/internal" convention as the resizable
15
+ // family's `resizeMath.ts`.
16
+ let lockCount = 0;
17
+ let previousOverflow: string | null = null;
18
+
19
+ export function applyScrollLock(lock: boolean): void {
20
+ if (typeof document === 'undefined') return;
21
+ const root = document.documentElement;
22
+ if (!root) return;
23
+
24
+ if (lock) {
25
+ if (lockCount === 0) {
26
+ previousOverflow = root.style.overflow;
27
+ root.style.overflow = 'hidden';
28
+ }
29
+ lockCount += 1;
30
+ return;
31
+ }
32
+
33
+ // Guard against an unbalanced release (a lock() that was never applied,
34
+ // e.g. because `disableScrollLock` was toggled mid-flight) — never let the
35
+ // count go negative, which would require two extra locks to re-lock.
36
+ if (lockCount === 0) return;
37
+ lockCount -= 1;
38
+ if (lockCount === 0) {
39
+ root.style.overflow = previousOverflow ?? '';
40
+ previousOverflow = null;
41
+ }
42
+ }
43
+
44
+ /** Test-only: reset the module-level counter between test cases. */
45
+ export function _resetScrollLockForTests(): void {
46
+ lockCount = 0;
47
+ previousOverflow = null;
48
+ }
@@ -0,0 +1,58 @@
1
+ /*
2
+ * @rozie-ui/dialog — base token reference.
3
+ *
4
+ * Every COSMETIC value the dialog box + scrim render is a `--rozie-dialog-*`
5
+ * custom property. The component ships with inline `var(token, fallback)`
6
+ * defaults, so importing this file is OPTIONAL — it simply makes the full token
7
+ * surface explicit in one place so you can copy/override exactly what you need.
8
+ *
9
+ * The STRUCTURAL behaviour — top-layer rendering, the native `::backdrop`
10
+ * pseudo-element, UA centering, the focus trap, Esc-to-dismiss, and focus
11
+ * restoration — all come from the native `<dialog>` + `showModal()` and are NOT
12
+ * tokenized. Only the values below flow through tokens.
13
+ *
14
+ * Override any token at any ancestor scope (`:root`, `.dark`, a wrapper, or the
15
+ * `.rozie-dialog` element). See themes/shadcn.css, themes/material.css and
16
+ * themes/bootstrap.css for design-system bridges.
17
+ *
18
+ * WHERE THE DEFAULTS SIT. This file declares no public token that could shadow yours. Each
19
+ * default is the FALLBACK of a private wiring line on the document root, under `:where(:root)`
20
+ * (zero specificity): `--rdg-x: var(--rozie-dialog-x, <default>)`. The component reads every token
21
+ * public-first, `var(--rozie-dialog-x, var(--rdg-x, <inline default>))`, so a value set on ANY
22
+ * ancestor (`:root`, `.dark`, a wrapper) or on the component itself wins by plain inheritance,
23
+ * in any import order, on all six targets (Lit included: custom properties inherit into its
24
+ * shadow root). A value an element declares for itself always beats one it would inherit,
25
+ * which is why nothing on the way to the component may declare a public token.
26
+ * The lines that say `inherit` / `initial` stay plain declarations: at the root such a value
27
+ * is "unset", so the component's own fallback applies, and it never shadows an ancestor.
28
+ * A design-system bridge (themes/shadcn.css, material.css, bootstrap.css) re-declares only the
29
+ * wiring of the tokens it maps, with the design system's variable as the fallback, on the
30
+ * component (`.rozie-dialog` and the Lit host `rozie-dialog`) — so that variable is resolved AT the
31
+ * component and follows the nearest theme scope — and on `:root`, the copy a Lit component
32
+ * nested in another shadow root (out of reach of every document selector) inherits. The
33
+ * `--rdg-*` names are internal: not a stable API.
34
+ */
35
+ :where(:root) {
36
+ /* box geometry */
37
+ --rdg-width: var(--rozie-dialog-width, auto);
38
+ --rdg-max-width: var(--rozie-dialog-max-width, min(32rem, calc(100vw - 2rem)));
39
+ --rdg-max-height: var(--rozie-dialog-max-height, calc(100vh - 2rem));
40
+
41
+ /* box chrome */
42
+ --rdg-border: var(--rozie-dialog-border, none);
43
+ --rdg-radius: var(--rozie-dialog-radius, 0.75rem);
44
+ --rdg-bg: var(--rozie-dialog-bg, #fff);
45
+ --rozie-dialog-color: inherit;
46
+ --rdg-shadow: var(--rozie-dialog-shadow, 0 10px 38px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0, 0, 0, 0.25));
47
+
48
+ /* scrim (the native ::backdrop) */
49
+ --rdg-backdrop-bg: var(--rozie-dialog-backdrop-bg, rgba(0, 0, 0, 0.5));
50
+ --rdg-backdrop-filter: var(--rozie-dialog-backdrop-filter, none);
51
+
52
+ /* content panel */
53
+ --rdg-padding: var(--rozie-dialog-padding, 1.5rem);
54
+ --rozie-dialog-font: inherit;
55
+
56
+ /* enter/leave transition duration */
57
+ --rdg-transition: var(--rozie-dialog-transition, 0.15s ease);
58
+ }
@@ -0,0 +1,37 @@
1
+ /*
2
+ * @rozie-ui/dialog — Bootstrap 5 bridge.
3
+ *
4
+ * Maps the dialog tokens onto Bootstrap's `--bs-*` CSS variables (Bootstrap
5
+ * 5.2+). Reading them live means the dialog follows `data-bs-theme="dark"` and
6
+ * any custom build automatically. Falls back to Bootstrap's default light
7
+ * palette when the vars are absent.
8
+ *
9
+ * import '@rozie-ui/dialog-svelte/themes/bootstrap.css';
10
+ *
11
+ * Bootstrap modals use a 0.5rem radius, a 1px border, and a 0.5-opacity black
12
+ * backdrop (`$modal-backdrop-bg` / `$modal-backdrop-opacity`).
13
+ *
14
+ * HOW IT MAPS. This bridge declares no public token: it re-declares the private wiring of
15
+ * each token it maps, with the design system's variable as the fallback
16
+ * (`--rdg-x: var(--rozie-dialog-x, <design-system variable>)`). The component reads every token
17
+ * public-first, so on all six targets:
18
+ * - a public `--rozie-dialog-*` token set on any ancestor (or on the component) wins;
19
+ * - otherwise the design system's variable applies, resolved AT the component (`.rozie-dialog`
20
+ * and the Lit host `rozie-dialog`), so a `.dark` / `data-bs-theme` wrapper narrower than
21
+ * <html> is followed;
22
+ * - a Lit component nested in another shadow root, which no document selector reaches,
23
+ * inherits the `:root` copy instead: there the design system's variables are read at
24
+ * the document root.
25
+ * This rule outranks base.css's `:where(:root)` wiring, so import order does not matter.
26
+ */
27
+ :root,
28
+ .rozie-dialog,
29
+ rozie-dialog {
30
+ --rdg-bg: var(--rozie-dialog-bg, var(--bs-body-bg, #fff));
31
+ --rdg-color: var(--rozie-dialog-color, var(--bs-body-color, #212529));
32
+ --rdg-border: var(--rozie-dialog-border, 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175)));
33
+ --rdg-radius: var(--rozie-dialog-radius, var(--bs-border-radius-lg, 0.5rem));
34
+
35
+ --rdg-backdrop-bg: var(--rozie-dialog-backdrop-bg, rgba(0, 0, 0, 0.5));
36
+ --rdg-shadow: var(--rozie-dialog-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
37
+ }