@classic-homes/theme-svelte 1.4.0 → 1.5.1

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.
@@ -177,9 +177,108 @@
177
177
  />
178
178
  </div>
179
179
 
180
+ <!-- Portal to <body>: escapes transformed/overflow-hidden ancestors
181
+ (e.g. Dialog panels) that would clip the dropdown. -->
182
+ <ComboboxPrimitive.Portal>
183
+ <ComboboxPrimitive.Content
184
+ class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
185
+ sideOffset={4}
186
+ collisionPadding={8}
187
+ avoidCollisions={true}
188
+ >
189
+ <div class="p-1 max-h-[300px] overflow-y-auto">
190
+ {#if loading}
191
+ <div class="flex items-center justify-center py-6">
192
+ <Spinner size="sm" />
193
+ <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
194
+ </div>
195
+ {:else if filteredOptions.length === 0}
196
+ <div class="py-6 text-center text-sm text-muted-foreground">
197
+ {emptyMessage}
198
+ </div>
199
+ {:else}
200
+ {#each filteredOptions as option}
201
+ <ComboboxPrimitive.Item
202
+ value={option.value}
203
+ label={option.label}
204
+ disabled={option.disabled}
205
+ class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
206
+ >
207
+ {#if option.value === value}
208
+ <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
209
+ <svg
210
+ xmlns="http://www.w3.org/2000/svg"
211
+ width="16"
212
+ height="16"
213
+ viewBox="0 0 24 24"
214
+ fill="none"
215
+ stroke="currentColor"
216
+ stroke-width="2"
217
+ stroke-linecap="round"
218
+ stroke-linejoin="round"
219
+ class="h-4 w-4"
220
+ >
221
+ <polyline points="20 6 9 17 4 12" />
222
+ </svg>
223
+ </span>
224
+ {/if}
225
+ {option.label}
226
+ </ComboboxPrimitive.Item>
227
+ {/each}
228
+ {/if}
229
+ </div>
230
+ </ComboboxPrimitive.Content>
231
+ </ComboboxPrimitive.Portal>
232
+ </ComboboxPrimitive.Root>
233
+
234
+ {#if hint && !error}
235
+ <p id={hintId} class="text-sm text-muted-foreground">
236
+ {hint}
237
+ </p>
238
+ {/if}
239
+
240
+ {#if error}
241
+ <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
242
+ {error}
243
+ </p>
244
+ {/if}
245
+ </div>
246
+ {:else}
247
+ <ComboboxPrimitive.Root
248
+ type="single"
249
+ {disabled}
250
+ {required}
251
+ {name}
252
+ bind:open
253
+ onOpenChange={handleOpenChange}
254
+ onValueChange={handleValueChange}
255
+ {value}
256
+ >
257
+ <div class="relative">
258
+ <ComboboxPrimitive.Input
259
+ id={componentId}
260
+ placeholder={selectedLabel || placeholder}
261
+ oninput={handleSearchInput}
262
+ onfocus={() => (open = true)}
263
+ onclick={() => (open = true)}
264
+ class={cn(
265
+ 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
266
+ error && 'border-destructive focus:ring-destructive',
267
+ className
268
+ )}
269
+ role="combobox"
270
+ aria-expanded={open}
271
+ aria-invalid={error ? 'true' : undefined}
272
+ aria-describedby={describedBy}
273
+ />
274
+ </div>
275
+
276
+ <!-- Portal to <body>: escapes transformed/overflow-hidden ancestors
277
+ (e.g. Dialog panels) that would clip the dropdown. -->
278
+ <ComboboxPrimitive.Portal>
180
279
  <ComboboxPrimitive.Content
181
- class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-black bg-popover text-popover-foreground shadow-md data-[side=bottom]:border-t-0 data-[side=bottom]:rounded-t-none data-[side=top]:border-b-0 data-[side=top]:rounded-b-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
182
- sideOffset={-1}
280
+ class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
281
+ sideOffset={4}
183
282
  collisionPadding={8}
184
283
  avoidCollisions={true}
185
284
  >
@@ -225,98 +324,7 @@
225
324
  {/if}
226
325
  </div>
227
326
  </ComboboxPrimitive.Content>
228
- </ComboboxPrimitive.Root>
229
-
230
- {#if hint && !error}
231
- <p id={hintId} class="text-sm text-muted-foreground">
232
- {hint}
233
- </p>
234
- {/if}
235
-
236
- {#if error}
237
- <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
238
- {error}
239
- </p>
240
- {/if}
241
- </div>
242
- {:else}
243
- <ComboboxPrimitive.Root
244
- type="single"
245
- {disabled}
246
- {required}
247
- {name}
248
- bind:open
249
- onOpenChange={handleOpenChange}
250
- onValueChange={handleValueChange}
251
- {value}
252
- >
253
- <div class="relative">
254
- <ComboboxPrimitive.Input
255
- id={componentId}
256
- placeholder={selectedLabel || placeholder}
257
- oninput={handleSearchInput}
258
- onfocus={() => (open = true)}
259
- onclick={() => (open = true)}
260
- class={cn(
261
- 'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
262
- error && 'border-destructive focus:ring-destructive',
263
- className
264
- )}
265
- role="combobox"
266
- aria-expanded={open}
267
- aria-invalid={error ? 'true' : undefined}
268
- aria-describedby={describedBy}
269
- />
270
- </div>
271
-
272
- <ComboboxPrimitive.Content
273
- class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-black bg-popover text-popover-foreground shadow-md data-[side=bottom]:border-t-0 data-[side=bottom]:rounded-t-none data-[side=top]:border-b-0 data-[side=top]:rounded-b-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
274
- sideOffset={-1}
275
- collisionPadding={8}
276
- avoidCollisions={true}
277
- >
278
- <div class="p-1 max-h-[300px] overflow-y-auto">
279
- {#if loading}
280
- <div class="flex items-center justify-center py-6">
281
- <Spinner size="sm" />
282
- <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
283
- </div>
284
- {:else if filteredOptions.length === 0}
285
- <div class="py-6 text-center text-sm text-muted-foreground">
286
- {emptyMessage}
287
- </div>
288
- {:else}
289
- {#each filteredOptions as option}
290
- <ComboboxPrimitive.Item
291
- value={option.value}
292
- label={option.label}
293
- disabled={option.disabled}
294
- class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
295
- >
296
- {#if option.value === value}
297
- <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
298
- <svg
299
- xmlns="http://www.w3.org/2000/svg"
300
- width="16"
301
- height="16"
302
- viewBox="0 0 24 24"
303
- fill="none"
304
- stroke="currentColor"
305
- stroke-width="2"
306
- stroke-linecap="round"
307
- stroke-linejoin="round"
308
- class="h-4 w-4"
309
- >
310
- <polyline points="20 6 9 17 4 12" />
311
- </svg>
312
- </span>
313
- {/if}
314
- {option.label}
315
- </ComboboxPrimitive.Item>
316
- {/each}
317
- {/if}
318
- </div>
319
- </ComboboxPrimitive.Content>
327
+ </ComboboxPrimitive.Portal>
320
328
  </ComboboxPrimitive.Root>
321
329
  {/if}
322
330
 
@@ -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 < 640);
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
@@ -67,11 +67,11 @@
67
67
  <DropdownMenuPrimitive.Content
68
68
  {side}
69
69
  {align}
70
- sideOffset={-1}
70
+ sideOffset={4}
71
71
  collisionPadding={8}
72
72
  avoidCollisions={true}
73
73
  class={cn(
74
- 'isolate z-50 min-w-[8rem] overflow-hidden rounded-md border border-black bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
74
+ 'isolate z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
75
75
  className
76
76
  )}
77
77
  >
@@ -239,8 +239,8 @@
239
239
  (e.g. Dialog panels) that would clip the dropdown. -->
240
240
  <ComboboxPrimitive.Portal>
241
241
  <ComboboxPrimitive.Content
242
- class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-black bg-popover text-popover-foreground shadow-md data-[side=bottom]:border-t-0 data-[side=bottom]:rounded-t-none data-[side=top]:border-b-0 data-[side=top]:rounded-b-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
243
- sideOffset={-1}
242
+ class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
243
+ sideOffset={4}
244
244
  collisionPadding={8}
245
245
  avoidCollisions={true}
246
246
  >
@@ -376,8 +376,8 @@
376
376
  (e.g. Dialog panels) that would clip the dropdown. -->
377
377
  <ComboboxPrimitive.Portal>
378
378
  <ComboboxPrimitive.Content
379
- class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-black bg-popover text-popover-foreground shadow-md data-[side=bottom]:border-t-0 data-[side=bottom]:rounded-t-none data-[side=top]:border-b-0 data-[side=top]:rounded-b-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
380
- sideOffset={-1}
379
+ class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
380
+ sideOffset={4}
381
381
  collisionPadding={8}
382
382
  avoidCollisions={true}
383
383
  >
@@ -140,7 +140,7 @@
140
140
 
141
141
  // Common content classes
142
142
  const contentClasses =
143
- 'isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-black bg-popover text-popover-foreground shadow-md data-[side=bottom]:border-t-0 data-[side=bottom]:rounded-t-none data-[side=top]:border-b-0 data-[side=top]:rounded-b-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2';
143
+ 'isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2';
144
144
 
145
145
  // Common item classes
146
146
  const itemClasses =
@@ -205,7 +205,7 @@
205
205
  <SelectPrimitive.Portal>
206
206
  <SelectPrimitive.Content
207
207
  class={contentClasses}
208
- sideOffset={-1}
208
+ sideOffset={4}
209
209
  collisionPadding={8}
210
210
  avoidCollisions={true}
211
211
  >
@@ -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
- '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',
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
- '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';
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@classic-homes/theme-svelte",
3
- "version": "1.4.0",
3
+ "version": "1.5.1",
4
4
  "description": "Svelte components for the Classic theme system",
5
5
  "type": "module",
6
6
  "svelte": "./dist/lib/index.js",