@classic-homes/theme-svelte 1.0.1 → 1.1.2

package/dist/lib/components/Icon.svelte

@@ -39,6 +39,7 @@
     | 'archive'
     | 'power'
     | 'zap'
+    | 'sparkles'
     | 'pin'
     // Navigation
     | 'chevron-down'
@@ -496,6 +497,9 @@
     archive: { path: 'M21 8v13H3V8M1 3h22v5H1zM10 12h4' },
     power: { path: 'M18.36 6.64a9 9 0 1 1-12.73 0M12 2v10' },
     zap: { path: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z' },
+    sparkles: {
+      path: 'M12 3l-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3zM5 3v4M19 17v4M3 5h4M17 19h4',
+    },
     pin: {
       path: 'M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48',
     },

package/dist/lib/components/Icon.svelte.d.ts

@@ -2,7 +2,7 @@
  * Available icon names for the Icon component.
  * Organized by category for easier discovery.
  */
-export type IconName = 'close' | 'check' | 'plus' | 'minus' | 'edit' | 'trash' | 'info' | 'alert-circle' | 'alert-triangle' | 'search' | 'settings' | 'home' | 'loading' | 'send' | 'more' | 'more-horizontal' | 'grip' | 'history' | 'copy' | 'download' | 'upload' | 'refresh' | 'save' | 'print' | 'share' | 'cut' | 'paste' | 'undo' | 'redo' | 'archive' | 'power' | 'zap' | 'pin' | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'chevrons-down' | 'chevrons-up' | 'chevrons-left' | 'chevrons-right' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrow-down' | 'corner-up-left' | 'corner-up-right' | 'corner-down-left' | 'corner-down-right' | 'menu' | 'external-link' | 'expand' | 'collapse' | 'fullscreen' | 'minimize' | 'user' | 'users' | 'user-plus' | 'user-minus' | 'user-check' | 'user-x' | 'shield' | 'shield-check' | 'shield-off' | 'badge' | 'id-card' | 'message' | 'chat' | 'mail' | 'phone' | 'bell' | 'bell-off' | 'inbox' | 'at-sign' | 'hash' | 'rss' | 'send' | 'message-circle' | 'message-square' | 'file' | 'file-text' | 'file-code' | 'file-plus' | 'file-minus' | 'folder' | 'folder-open' | 'folder-plus' | 'folder-minus' | 'clipboard' | 'clipboard-check' | 'clipboard-list' | 'book' | 'book-open' | 'newspaper' | 'link' | 'image' | 'play' | 'pause' | 'stop' | 'skip-forward' | 'skip-back' | 'rewind' | 'fast-forward' | 'volume' | 'volume-1' | 'volume-2' | 'volume-x' | 'video' | 'video-off' | 'mic' | 'mic-off' | 'music' | 'camera' | 'camera-off' | 'shopping-cart' | 'shopping-bag' | 'credit-card' | 'dollar-sign' | 'percent' | 'tag' | 'tags' | 'package' | 'truck' | 'receipt' | 'wallet' | 'briefcase' | 'eye' | 'eye-off' | 'lock' | 'unlock' | 'key' | 'check-circle' | 'x-circle' | 'help-circle' | 'alert-octagon' | 'circle' | 'square' | 'triangle' | 'star' | 'star-half' | 'heart' | 'bookmark' | 'flag' | 'thumbs-up' | 'thumbs-down' | 'award' | 'trophy' | 'gift' | 'grid' | 'list' | 'columns' | 'sidebar' | 'layers' | 'layout' | 'move' | 'maximize' | 'filter' | 'sort' | 'sort-asc' | 'sort-desc' | 'bar-chart' | 'bar-chart-2' | 'line-chart' | 'pie-chart' | 'trending-up' | 'trending-down' | 'activity' | 'target' | 'calendar' | 'calendar-plus' | 'calendar-minus' | 'calendar-check' | 'clock' | 'timer' | 'hourglass' | 'alarm' | 'sun' | 'moon' | 'cloud' | 'cloud-rain' | 'cloud-snow' | 'wind' | 'thermometer' | 'droplet' | 'umbrella' | 'globe' | 'map' | 'map-pin' | 'navigation' | 'compass' | 'crosshair' | 'smartphone' | 'tablet' | 'laptop' | 'monitor' | 'tv' | 'printer' | 'wifi' | 'wifi-off' | 'bluetooth' | 'battery' | 'battery-charging' | 'cpu' | 'hard-drive' | 'server' | 'database' | 'cloud-upload' | 'cloud-download' | 'terminal' | 'code' | 'code-2' | 'bug' | 'git-branch' | 'git-commit' | 'git-merge' | 'git-pull-request' | 'box' | 'package' | 'lightbulb' | 'tool' | 'wrench' | 'scissors' | 'paperclip' | 'anchor' | 'aperture' | 'loader' | 'rotate-cw' | 'rotate-ccw' | 'log-in' | 'log-out' | 'slash' | 'percent' | 'hash';
+export type IconName = 'close' | 'check' | 'plus' | 'minus' | 'edit' | 'trash' | 'info' | 'alert-circle' | 'alert-triangle' | 'search' | 'settings' | 'home' | 'loading' | 'send' | 'more' | 'more-horizontal' | 'grip' | 'history' | 'copy' | 'download' | 'upload' | 'refresh' | 'save' | 'print' | 'share' | 'cut' | 'paste' | 'undo' | 'redo' | 'archive' | 'power' | 'zap' | 'sparkles' | 'pin' | 'chevron-down' | 'chevron-up' | 'chevron-left' | 'chevron-right' | 'chevrons-down' | 'chevrons-up' | 'chevrons-left' | 'chevrons-right' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'arrow-down' | 'corner-up-left' | 'corner-up-right' | 'corner-down-left' | 'corner-down-right' | 'menu' | 'external-link' | 'expand' | 'collapse' | 'fullscreen' | 'minimize' | 'user' | 'users' | 'user-plus' | 'user-minus' | 'user-check' | 'user-x' | 'shield' | 'shield-check' | 'shield-off' | 'badge' | 'id-card' | 'message' | 'chat' | 'mail' | 'phone' | 'bell' | 'bell-off' | 'inbox' | 'at-sign' | 'hash' | 'rss' | 'send' | 'message-circle' | 'message-square' | 'file' | 'file-text' | 'file-code' | 'file-plus' | 'file-minus' | 'folder' | 'folder-open' | 'folder-plus' | 'folder-minus' | 'clipboard' | 'clipboard-check' | 'clipboard-list' | 'book' | 'book-open' | 'newspaper' | 'link' | 'image' | 'play' | 'pause' | 'stop' | 'skip-forward' | 'skip-back' | 'rewind' | 'fast-forward' | 'volume' | 'volume-1' | 'volume-2' | 'volume-x' | 'video' | 'video-off' | 'mic' | 'mic-off' | 'music' | 'camera' | 'camera-off' | 'shopping-cart' | 'shopping-bag' | 'credit-card' | 'dollar-sign' | 'percent' | 'tag' | 'tags' | 'package' | 'truck' | 'receipt' | 'wallet' | 'briefcase' | 'eye' | 'eye-off' | 'lock' | 'unlock' | 'key' | 'check-circle' | 'x-circle' | 'help-circle' | 'alert-octagon' | 'circle' | 'square' | 'triangle' | 'star' | 'star-half' | 'heart' | 'bookmark' | 'flag' | 'thumbs-up' | 'thumbs-down' | 'award' | 'trophy' | 'gift' | 'grid' | 'list' | 'columns' | 'sidebar' | 'layers' | 'layout' | 'move' | 'maximize' | 'filter' | 'sort' | 'sort-asc' | 'sort-desc' | 'bar-chart' | 'bar-chart-2' | 'line-chart' | 'pie-chart' | 'trending-up' | 'trending-down' | 'activity' | 'target' | 'calendar' | 'calendar-plus' | 'calendar-minus' | 'calendar-check' | 'clock' | 'timer' | 'hourglass' | 'alarm' | 'sun' | 'moon' | 'cloud' | 'cloud-rain' | 'cloud-snow' | 'wind' | 'thermometer' | 'droplet' | 'umbrella' | 'globe' | 'map' | 'map-pin' | 'navigation' | 'compass' | 'crosshair' | 'smartphone' | 'tablet' | 'laptop' | 'monitor' | 'tv' | 'printer' | 'wifi' | 'wifi-off' | 'bluetooth' | 'battery' | 'battery-charging' | 'cpu' | 'hard-drive' | 'server' | 'database' | 'cloud-upload' | 'cloud-download' | 'terminal' | 'code' | 'code-2' | 'bug' | 'git-branch' | 'git-commit' | 'git-merge' | 'git-pull-request' | 'box' | 'package' | 'lightbulb' | 'tool' | 'wrench' | 'scissors' | 'paperclip' | 'anchor' | 'aperture' | 'loader' | 'rotate-cw' | 'rotate-ccw' | 'log-in' | 'log-out' | 'slash' | 'percent' | 'hash';
 interface Props {
     /** The name of the icon to display */
     name: IconName;

package/dist/lib/components/MultiSelect.svelte

@@ -235,58 +235,62 @@
           />
         </div>
 
-        <ComboboxPrimitive.Content
-          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"
-          sideOffset={-1}
-          collisionPadding={8}
-          avoidCollisions={true}
-        >
-          <div class="p-1 max-h-[300px] overflow-y-auto">
-            {#if loading}
-              <div class="flex items-center justify-center py-6">
-                <Spinner size="sm" />
-                <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
-              </div>
-            {:else if filteredOptions.length === 0}
-              <div class="py-6 text-center text-sm text-muted-foreground">
-                {emptyMessage}
-              </div>
-            {:else}
-              {#each filteredOptions as option}
-                {@const isSelected = value.includes(option.value)}
-                {@const isDisabledByMax = maxReached && !isSelected}
-                <ComboboxPrimitive.Item
-                  value={option.value}
-                  label={option.label}
-                  disabled={option.disabled || isDisabledByMax}
-                  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"
-                >
-                  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                    {#if isSelected}
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class="h-4 w-4"
-                      >
-                        <polyline points="20 6 9 17 4 12" />
-                      </svg>
-                    {:else}
-                      <span class="h-3.5 w-3.5 rounded-sm border border-primary"></span>
-                    {/if}
-                  </span>
-                  {option.label}
-                </ComboboxPrimitive.Item>
-              {/each}
-            {/if}
-          </div>
-        </ComboboxPrimitive.Content>
+        <!-- Portal to <body>: escapes transformed/overflow-hidden ancestors
+             (e.g. Dialog panels) that would clip the dropdown. -->
+        <ComboboxPrimitive.Portal>
+          <ComboboxPrimitive.Content
+            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"
+            sideOffset={-1}
+            collisionPadding={8}
+            avoidCollisions={true}
+          >
+            <div class="p-1 max-h-[300px] overflow-y-auto">
+              {#if loading}
+                <div class="flex items-center justify-center py-6">
+                  <Spinner size="sm" />
+                  <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
+                </div>
+              {:else if filteredOptions.length === 0}
+                <div class="py-6 text-center text-sm text-muted-foreground">
+                  {emptyMessage}
+                </div>
+              {:else}
+                {#each filteredOptions as option}
+                  {@const isSelected = value.includes(option.value)}
+                  {@const isDisabledByMax = maxReached && !isSelected}
+                  <ComboboxPrimitive.Item
+                    value={option.value}
+                    label={option.label}
+                    disabled={option.disabled || isDisabledByMax}
+                    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"
+                  >
+                    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                      {#if isSelected}
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="16"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          class="h-4 w-4"
+                        >
+                          <polyline points="20 6 9 17 4 12" />
+                        </svg>
+                      {:else}
+                        <span class="h-3.5 w-3.5 rounded-sm border border-primary"></span>
+                      {/if}
+                    </span>
+                    {option.label}
+                  </ComboboxPrimitive.Item>
+                {/each}
+              {/if}
+            </div>
+          </ComboboxPrimitive.Content>
+        </ComboboxPrimitive.Portal>
       </ComboboxPrimitive.Root>
     </div>
 
@@ -368,58 +372,62 @@
         />
       </div>
 
-      <ComboboxPrimitive.Content
-        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"
-        sideOffset={-1}
-        collisionPadding={8}
-        avoidCollisions={true}
-      >
-        <div class="p-1 max-h-[300px] overflow-y-auto">
-          {#if loading}
-            <div class="flex items-center justify-center py-6">
-              <Spinner size="sm" />
-              <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
-            </div>
-          {:else if filteredOptions.length === 0}
-            <div class="py-6 text-center text-sm text-muted-foreground">
-              {emptyMessage}
-            </div>
-          {:else}
-            {#each filteredOptions as option}
-              {@const isSelected = value.includes(option.value)}
-              {@const isDisabledByMax = maxReached && !isSelected}
-              <ComboboxPrimitive.Item
-                value={option.value}
-                label={option.label}
-                disabled={option.disabled || isDisabledByMax}
-                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"
-              >
-                <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                  {#if isSelected}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      class="h-4 w-4"
-                    >
-                      <polyline points="20 6 9 17 4 12" />
-                    </svg>
-                  {:else}
-                    <span class="h-3.5 w-3.5 rounded-sm border border-primary"></span>
-                  {/if}
-                </span>
-                {option.label}
-              </ComboboxPrimitive.Item>
-            {/each}
-          {/if}
-        </div>
-      </ComboboxPrimitive.Content>
+      <!-- Portal to <body>: escapes transformed/overflow-hidden ancestors
+           (e.g. Dialog panels) that would clip the dropdown. -->
+      <ComboboxPrimitive.Portal>
+        <ComboboxPrimitive.Content
+          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"
+          sideOffset={-1}
+          collisionPadding={8}
+          avoidCollisions={true}
+        >
+          <div class="p-1 max-h-[300px] overflow-y-auto">
+            {#if loading}
+              <div class="flex items-center justify-center py-6">
+                <Spinner size="sm" />
+                <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
+              </div>
+            {:else if filteredOptions.length === 0}
+              <div class="py-6 text-center text-sm text-muted-foreground">
+                {emptyMessage}
+              </div>
+            {:else}
+              {#each filteredOptions as option}
+                {@const isSelected = value.includes(option.value)}
+                {@const isDisabledByMax = maxReached && !isSelected}
+                <ComboboxPrimitive.Item
+                  value={option.value}
+                  label={option.label}
+                  disabled={option.disabled || isDisabledByMax}
+                  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"
+                >
+                  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                    {#if isSelected}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        class="h-4 w-4"
+                      >
+                        <polyline points="20 6 9 17 4 12" />
+                      </svg>
+                    {:else}
+                      <span class="h-3.5 w-3.5 rounded-sm border border-primary"></span>
+                    {/if}
+                  </span>
+                  {option.label}
+                </ComboboxPrimitive.Item>
+              {/each}
+            {/if}
+          </div>
+        </ComboboxPrimitive.Content>
+      </ComboboxPrimitive.Portal>
     </ComboboxPrimitive.Root>
   </div>
 {/if}

package/dist/lib/components/Select.svelte

@@ -198,29 +198,35 @@
 {/snippet}
 
 {#snippet selectContent()}
-  <SelectPrimitive.Content
-    class={contentClasses}
-    sideOffset={-1}
-    collisionPadding={8}
-    avoidCollisions={true}
-  >
-    <div class="p-1 max-h-[300px] overflow-y-auto">
-      {#each options as item}
-        {#if isGroup(item)}
-          <SelectPrimitive.Group>
-            <div class="py-1.5 pl-8 pr-2 text-sm font-semibold">
-              {item.label}
-            </div>
-            {#each item.options as option}
-              {@render selectItem(option)}
-            {/each}
-          </SelectPrimitive.Group>
-        {:else}
-          {@render selectItem(item)}
-        {/if}
-      {/each}
-    </div>
-  </SelectPrimitive.Content>
+  <!-- Portal to <body>: inside a Dialog the content would otherwise be clipped —
+       the dialog panel is transformed (translate centering), which makes it the
+       containing block for the floating content, and its overflow-hidden cuts
+       the dropdown off at the panel edge. -->
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      class={contentClasses}
+      sideOffset={-1}
+      collisionPadding={8}
+      avoidCollisions={true}
+    >
+      <div class="p-1 max-h-[300px] overflow-y-auto">
+        {#each options as item}
+          {#if isGroup(item)}
+            <SelectPrimitive.Group>
+              <div class="py-1.5 pl-8 pr-2 text-sm font-semibold">
+                {item.label}
+              </div>
+              {#each item.options as option}
+                {@render selectItem(option)}
+              {/each}
+            </SelectPrimitive.Group>
+          {:else}
+            {@render selectItem(item)}
+          {/if}
+        {/each}
+      </div>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
 {/snippet}
 
 {#snippet selectRoot(ariaLabel: string | undefined)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.0.1",
+  "version": "1.1.2",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",