@classic-homes/theme-svelte 1.4.0 → 1.5.0
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.
|
@@ -115,6 +115,12 @@
|
|
|
115
115
|
snapThreshold?: number;
|
|
116
116
|
/** Distance in pixels to drag before detaching from pinned mode (0 to disable) */
|
|
117
117
|
detachThreshold?: number;
|
|
118
|
+
/**
|
|
119
|
+
* Viewport width (px) below which the panel uses mobile behaviors
|
|
120
|
+
* (card scrim, focus trap, card drag). Default 640. Pass 768 for apps
|
|
121
|
+
* that switch layouts at md.
|
|
122
|
+
*/
|
|
123
|
+
mobileBreakpoint?: number;
|
|
118
124
|
/** Custom header content (replaces title/subtitle) */
|
|
119
125
|
header?: Snippet;
|
|
120
126
|
/** Custom header actions */
|
|
@@ -154,6 +160,7 @@
|
|
|
154
160
|
persistKey,
|
|
155
161
|
snapThreshold = 20,
|
|
156
162
|
detachThreshold = 40,
|
|
163
|
+
mobileBreakpoint = 640,
|
|
157
164
|
header,
|
|
158
165
|
headerActions,
|
|
159
166
|
footer,
|
|
@@ -242,7 +249,7 @@
|
|
|
242
249
|
let viewportHeight = $state(typeof window !== 'undefined' ? window.innerHeight : 768);
|
|
243
250
|
|
|
244
251
|
// Detect mobile
|
|
245
|
-
let isMobile = $derived(viewportWidth <
|
|
252
|
+
let isMobile = $derived(viewportWidth < mobileBreakpoint);
|
|
246
253
|
|
|
247
254
|
// Derived state - use props if provided, otherwise internal state
|
|
248
255
|
const mode = $derived(propMode ?? internalMode);
|
|
@@ -64,6 +64,12 @@ interface Props {
|
|
|
64
64
|
snapThreshold?: number;
|
|
65
65
|
/** Distance in pixels to drag before detaching from pinned mode (0 to disable) */
|
|
66
66
|
detachThreshold?: number;
|
|
67
|
+
/**
|
|
68
|
+
* Viewport width (px) below which the panel uses mobile behaviors
|
|
69
|
+
* (card scrim, focus trap, card drag). Default 640. Pass 768 for apps
|
|
70
|
+
* that switch layouts at md.
|
|
71
|
+
*/
|
|
72
|
+
mobileBreakpoint?: number;
|
|
67
73
|
/** Custom header content (replaces title/subtitle) */
|
|
68
74
|
header?: Snippet;
|
|
69
75
|
/** Custom header actions */
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
{/if}
|
|
118
118
|
{#if showClose}
|
|
119
119
|
<DialogPrimitive.Close
|
|
120
|
-
class="flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none"
|
|
120
|
+
class="flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none relative after:absolute after:-inset-1 after:content-['']"
|
|
121
121
|
aria-label="Close dialog"
|
|
122
122
|
>
|
|
123
123
|
<svg
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
root: 'relative flex w-full touch-none select-none items-center',
|
|
11
11
|
range: 'absolute h-full bg-primary rounded-full',
|
|
12
12
|
thumb:
|
|
13
|
-
|
|
13
|
+
"block rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 relative after:absolute after:left-1/2 after:top-1/2 after:h-11 after:w-11 after:-translate-x-1/2 after:-translate-y-1/2 after:rounded-full after:content-['']",
|
|
14
14
|
},
|
|
15
15
|
variants: {
|
|
16
16
|
size: {
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
const positionLabel = $derived(`${index + 1} of ${items.length}`);
|
|
88
88
|
|
|
89
89
|
const buttonClass =
|
|
90
|
-
|
|
90
|
+
"inline-flex h-10 w-10 items-center justify-center rounded-full border border-border bg-background/90 text-foreground shadow-sm outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-40 relative after:absolute after:-inset-0.5 after:rounded-full after:content-['']";
|
|
91
91
|
|
|
92
92
|
function goTo(next: number, smooth = true) {
|
|
93
93
|
if (items.length === 0) return;
|