@classic-homes/theme-svelte 1.5.0 → 1.6.0

package/dist/__tests__/sidebar-mobile.test.js

@@ -0,0 +1,73 @@
+/**
+ * Sidebar Mobile Semantics Tests
+ *
+ * Covers the mobile drawer rules: persisted desktop open-state must never
+ * open the drawer on a phone, drawer toggles never overwrite the desktop
+ * preference, and leaving mobile restores the desktop preference.
+ *
+ * Uses the shared singleton (module state), so each test re-initializes with
+ * a fresh appId to get an isolated localStorage namespace.
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { sidebarStore } from '../lib/stores/sidebar.svelte.js';
+let appCounter = 0;
+function freshAppId() {
+    return `test-mobile-${++appCounter}`;
+}
+describe('sidebar mobile semantics', () => {
+    beforeEach(() => {
+        localStorage.clear();
+        // Reset to a known desktop baseline.
+        sidebarStore.setMobile(false);
+        sidebarStore.open();
+    });
+    it('does not open the drawer from persisted state when initializing on mobile', () => {
+        const appId = freshAppId();
+        localStorage.setItem(`classic-theme-sidebar-${appId}-open`, 'true');
+        sidebarStore.setMobile(true);
+        sidebarStore.initialize(appId);
+        expect(sidebarStore.isOpen).toBe(false);
+    });
+    it('applies persisted open state when initializing on desktop', () => {
+        const appId = freshAppId();
+        localStorage.setItem(`classic-theme-sidebar-${appId}-open`, 'false');
+        sidebarStore.initialize(appId);
+        expect(sidebarStore.isOpen).toBe(false);
+    });
+    it('restores the persisted preference when leaving mobile, even if init ran while mobile', () => {
+        const appId = freshAppId();
+        localStorage.setItem(`classic-theme-sidebar-${appId}-open`, 'true');
+        sidebarStore.setMobile(true);
+        sidebarStore.initialize(appId);
+        expect(sidebarStore.isOpen).toBe(false);
+        sidebarStore.setMobile(false);
+        expect(sidebarStore.isOpen).toBe(true);
+    });
+    it('entering mobile closes the drawer and stashes the desktop state', () => {
+        sidebarStore.initialize(freshAppId());
+        sidebarStore.open();
+        sidebarStore.setMobile(true);
+        expect(sidebarStore.isOpen).toBe(false);
+        sidebarStore.setMobile(false);
+        expect(sidebarStore.isOpen).toBe(true);
+    });
+    it('mobile drawer toggles do not persist or overwrite the desktop preference', () => {
+        const appId = freshAppId();
+        sidebarStore.initialize(appId);
+        sidebarStore.open(); // persists 'true' as desktop preference
+        sidebarStore.setMobile(true);
+        sidebarStore.toggle(); // open drawer
+        sidebarStore.close(); // close drawer
+        expect(localStorage.getItem(`classic-theme-sidebar-${appId}-open`)).toBe('true');
+        sidebarStore.setMobile(false);
+        expect(sidebarStore.isOpen).toBe(true);
+    });
+    it('a collapse made on desktop survives a mobile round-trip', () => {
+        sidebarStore.initialize(freshAppId());
+        sidebarStore.close();
+        sidebarStore.setMobile(true);
+        sidebarStore.toggle(); // user opens the drawer
+        sidebarStore.setMobile(false);
+        expect(sidebarStore.isOpen).toBe(false);
+    });
+});

package/dist/lib/components/Checkbox.svelte

@@ -60,6 +60,7 @@
       aria-invalid={hasError ? 'true' : undefined}
       aria-describedby={hasError ? errorId : undefined}
       class={cn(
+        "after:absolute after:-inset-3 after:content-['']",
         'peer relative h-5 w-5 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground flex items-center justify-center mt-0.5',
         hasError ? 'border-destructive' : 'border-primary',
         className

package/dist/lib/components/Combobox.svelte

@@ -166,7 +166,7 @@
           onfocus={() => (open = true)}
           onclick={() => (open = true)}
           class={cn(
-            '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',
+            'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-base sm: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',
             error && 'border-destructive focus:ring-destructive',
             className
           )}
@@ -177,9 +177,108 @@
         />
       </div>
 
+      <!-- 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-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"
+          sideOffset={4}
+          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}
+                <ComboboxPrimitive.Item
+                  value={option.value}
+                  label={option.label}
+                  disabled={option.disabled}
+                  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"
+                >
+                  {#if option.value === value}
+                    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                      <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>
+                    </span>
+                  {/if}
+                  {option.label}
+                </ComboboxPrimitive.Item>
+              {/each}
+            {/if}
+          </div>
+        </ComboboxPrimitive.Content>
+      </ComboboxPrimitive.Portal>
+    </ComboboxPrimitive.Root>
+
+    {#if hint && !error}
+      <p id={hintId} class="text-sm text-muted-foreground">
+        {hint}
+      </p>
+    {/if}
+
+    {#if error}
+      <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
+        {error}
+      </p>
+    {/if}
+  </div>
+{:else}
+  <ComboboxPrimitive.Root
+    type="single"
+    {disabled}
+    {required}
+    {name}
+    bind:open
+    onOpenChange={handleOpenChange}
+    onValueChange={handleValueChange}
+    {value}
+  >
+    <div class="relative">
+      <ComboboxPrimitive.Input
+        id={componentId}
+        placeholder={selectedLabel || placeholder}
+        oninput={handleSearchInput}
+        onfocus={() => (open = true)}
+        onclick={() => (open = true)}
+        class={cn(
+          'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-base sm: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',
+          error && 'border-destructive focus:ring-destructive',
+          className
+        )}
+        role="combobox"
+        aria-expanded={open}
+        aria-invalid={error ? 'true' : undefined}
+        aria-describedby={describedBy}
+      />
+    </div>
+
+    <!-- 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}
+        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"
+        sideOffset={4}
         collisionPadding={8}
         avoidCollisions={true}
       >
@@ -225,98 +324,7 @@
           {/if}
         </div>
       </ComboboxPrimitive.Content>
-    </ComboboxPrimitive.Root>
-
-    {#if hint && !error}
-      <p id={hintId} class="text-sm text-muted-foreground">
-        {hint}
-      </p>
-    {/if}
-
-    {#if error}
-      <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
-        {error}
-      </p>
-    {/if}
-  </div>
-{:else}
-  <ComboboxPrimitive.Root
-    type="single"
-    {disabled}
-    {required}
-    {name}
-    bind:open
-    onOpenChange={handleOpenChange}
-    onValueChange={handleValueChange}
-    {value}
-  >
-    <div class="relative">
-      <ComboboxPrimitive.Input
-        id={componentId}
-        placeholder={selectedLabel || placeholder}
-        oninput={handleSearchInput}
-        onfocus={() => (open = true)}
-        onclick={() => (open = true)}
-        class={cn(
-          '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',
-          error && 'border-destructive focus:ring-destructive',
-          className
-        )}
-        role="combobox"
-        aria-expanded={open}
-        aria-invalid={error ? 'true' : undefined}
-        aria-describedby={describedBy}
-      />
-    </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}
-            <ComboboxPrimitive.Item
-              value={option.value}
-              label={option.label}
-              disabled={option.disabled}
-              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"
-            >
-              {#if option.value === value}
-                <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                  <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>
-                </span>
-              {/if}
-              {option.label}
-            </ComboboxPrimitive.Item>
-          {/each}
-        {/if}
-      </div>
-    </ComboboxPrimitive.Content>
+    </ComboboxPrimitive.Portal>
   </ComboboxPrimitive.Root>
 {/if}
 

package/dist/lib/components/DataTable.svelte

@@ -329,6 +329,13 @@
     table.toggleRowSelection(rowId);
   }
 
+  // Literal class strings so Tailwind's content scan generates them.
+  const hideBelowClasses = {
+    sm: 'hidden sm:table-cell',
+    md: 'hidden md:table-cell',
+    lg: 'hidden lg:table-cell',
+  } as const;
+
   // Check if row can be selected
   function canSelectRow(row: T): boolean {
     if (typeof enableRowSelection === 'function') {
@@ -364,6 +371,7 @@
             class={cn(
               'px-4 py-3 font-medium text-muted-foreground',
               getAlignClass(column.align),
+              column.hideBelow && hideBelowClasses[column.hideBelow],
               column.sortable && 'cursor-pointer select-none hover:bg-muted-hover'
             )}
             style={getColumnWidthStyle(column)}
@@ -408,7 +416,7 @@
               </td>
             {/if}
             {#each table.columns as column (column.id)}
-              <td class="px-4 py-3">
+              <td class={cn('px-4 py-3', column.hideBelow && hideBelowClasses[column.hideBelow])}>
                 <Skeleton class="h-4 w-3/4" />
               </td>
             {/each}
@@ -451,7 +459,13 @@
 
               {#each table.columns as column (column.id)}
                 {@const value = getColumnValue(row.original, column)}
-                <td class={cn('px-4 py-3', getAlignClass(column.align))}>
+                <td
+                  class={cn(
+                    'px-4 py-3',
+                    getAlignClass(column.align),
+                    column.hideBelow && hideBelowClasses[column.hideBelow]
+                  )}
+                >
                   {table.getFormattedCellValue(row.original, column)}
                 </td>
               {/each}

package/dist/lib/components/DateTimePicker.svelte

@@ -431,7 +431,7 @@
         onkeydown={handleInputKeyDown}
         {disabled}
         class={cn(
-          'flex h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 pr-10 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full items-center rounded-md border border-input bg-background px-3 py-2 pr-10 text-base sm:text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           !value && !isEditing && 'text-muted-foreground',
           displayError && 'border-destructive focus:ring-destructive',
           className
@@ -483,7 +483,7 @@
             <button
               type="button"
               onclick={prevMonth}
-              class="h-7 w-7 inline-flex items-center justify-center rounded-md bg-transparent hover:bg-accent hover:text-accent-foreground"
+              class="relative h-7 w-7 inline-flex items-center justify-center rounded-md bg-transparent hover:bg-accent hover:text-accent-foreground after:absolute after:-inset-2 after:content-['']"
               aria-label="Previous month"
             >
               <svg
@@ -507,7 +507,7 @@
             <button
               type="button"
               onclick={nextMonth}
-              class="h-7 w-7 inline-flex items-center justify-center rounded-md bg-transparent hover:bg-accent hover:text-accent-foreground"
+              class="relative h-7 w-7 inline-flex items-center justify-center rounded-md bg-transparent hover:bg-accent hover:text-accent-foreground after:absolute after:-inset-2 after:content-['']"
               aria-label="Next month"
             >
               <svg
@@ -571,7 +571,7 @@
                   bind:value={hour}
                   onchange={updateTime}
                   aria-label="Hour"
-                  class="h-8 rounded-md border border-input bg-background px-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  class="h-8 rounded-md border border-input bg-background px-2 text-base sm:text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                 >
                   {#each hourOptions as h}
                     <option value={timeFormat === '12h' ? h : h}>
@@ -584,7 +584,7 @@
                   bind:value={minute}
                   onchange={updateTime}
                   aria-label="Minute"
-                  class="h-8 rounded-md border border-input bg-background px-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  class="h-8 rounded-md border border-input bg-background px-2 text-base sm:text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                 >
                   {#each minuteOptions as m}
                     <option value={m}>{String(m).padStart(2, '0')}</option>
@@ -595,7 +595,7 @@
                     bind:value={period}
                     onchange={updateTime}
                     aria-label="AM or PM"
-                    class="h-8 rounded-md border border-input bg-background px-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                    class="h-8 rounded-md border border-input bg-background px-2 text-base sm:text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                   >
                     <option value="AM">AM</option>
                     <option value="PM">PM</option>

package/dist/lib/components/Dialog.svelte

@@ -30,12 +30,14 @@
     showClose?: boolean;
   }
 
+  // Every size is clamped to the viewport minus a 1rem gutter on phones; the
+  // named width only takes over from `sm:` up.
   const sizeClasses = {
-    sm: 'max-w-sm',
-    md: 'max-w-lg',
-    lg: 'max-w-xl',
-    xl: 'max-w-2xl',
-    '2xl': 'max-w-3xl',
+    sm: 'max-w-[calc(100vw-2rem)] sm:max-w-sm',
+    md: 'max-w-[calc(100vw-2rem)] sm:max-w-lg',
+    lg: 'max-w-[calc(100vw-2rem)] sm:max-w-xl',
+    xl: 'max-w-[calc(100vw-2rem)] sm:max-w-2xl',
+    '2xl': 'max-w-[calc(100vw-2rem)] sm:max-w-3xl',
     full: 'max-w-[calc(100vw-2rem)]',
   };
 
@@ -82,7 +84,7 @@
     />
     <DialogPrimitive.Content
       class={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg overflow-hidden',
+        'fixed left-[50%] top-[50%] z-50 flex max-h-[calc(100dvh-2rem)] w-full translate-x-[-50%] translate-y-[-50%] flex-col gap-4 border border-border bg-background shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg overflow-hidden',
         sizeClasses[size],
         className
       )}
@@ -142,8 +144,8 @@
         </div>
       {/if}
 
-      <!-- Content section -->
-      <div class="dialog-content px-6 py-2">
+      <!-- Content section: scrolls when max-h clamps; header and footer stay pinned -->
+      <div class="dialog-content min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-2">
         {@render children()}
       </div>
 

package/dist/lib/components/DropdownMenu.svelte

@@ -67,11 +67,11 @@
   <DropdownMenuPrimitive.Content
     {side}
     {align}
-    sideOffset={-1}
+    sideOffset={4}
     collisionPadding={8}
     avoidCollisions={true}
     class={cn(
-      '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',
+      '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',
       className
     )}
   >

package/dist/lib/components/HeaderSearch.svelte

@@ -259,7 +259,7 @@
             value={query}
             oninput={(e) => handleInput(e.currentTarget.value)}
             onkeydown={handleKeydown}
-            class="flex h-12 w-full bg-transparent px-3 py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+            class="flex h-12 w-full bg-transparent px-3 py-3 text-base sm:text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
             autocomplete="off"
             autocorrect="off"
             spellcheck="false"

package/dist/lib/components/Input.svelte

@@ -82,7 +82,7 @@
   aria-invalid={ariaInvalid}
   aria-required={required}
   class={cn(
-    'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base sm:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
     ariaInvalid === true || ariaInvalid === 'true'
       ? 'border-destructive focus-visible:ring-destructive'
       : '',

package/dist/lib/components/MultiSelect.svelte

@@ -239,8 +239,8 @@
              (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}
+            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"
+            sideOffset={4}
             collisionPadding={8}
             avoidCollisions={true}
           >
@@ -376,8 +376,8 @@
            (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}
+          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"
+          sideOffset={4}
           collisionPadding={8}
           avoidCollisions={true}
         >

package/dist/lib/components/NumberInput.svelte

@@ -191,7 +191,7 @@
         {name}
         id={componentId}
         class={cn(
-          'flex h-10 w-full bg-background px-3 py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full bg-background px-3 py-2 text-base sm:text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           showStepper ? 'border-y border-input' : 'border border-input rounded-md',
           error && 'border-destructive focus-visible:ring-destructive'
         )}
@@ -283,7 +283,7 @@
       {name}
       id={componentId}
       class={cn(
-        'flex h-10 w-full bg-background px-3 py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full bg-background px-3 py-2 text-base sm:text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
         showStepper ? 'border-y border-input' : 'border border-input rounded-md',
         error && 'border-destructive focus-visible:ring-destructive'
       )}

package/dist/lib/components/PasswordInput.svelte

@@ -69,7 +69,7 @@
     {id}
     {autocomplete}
     class={cn(
-      'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-base sm:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
       className
     )}
     oninput={handleInput}

package/dist/lib/components/RadioGroup.svelte

@@ -105,6 +105,7 @@
         disabled={option.disabled || disabled}
         id={`${componentName}-${option.value}`}
         class={cn(
+          "after:absolute after:-inset-3 after:content-['']",
           'relative aspect-square h-5 w-5 rounded-full border border-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 flex items-center justify-center',
           error && 'border-destructive'
         )}

package/dist/lib/components/Select.svelte

@@ -140,7 +140,7 @@
 
   // Common content classes
   const contentClasses =
-    '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';
+    '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';
 
   // Common item classes
   const itemClasses =
@@ -205,7 +205,7 @@
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       class={contentClasses}
-      sideOffset={-1}
+      sideOffset={4}
       collisionPadding={8}
       avoidCollisions={true}
     >

package/dist/lib/components/Switch.svelte

@@ -66,6 +66,7 @@
   aria-labelledby={ariaLabelledby}
   onCheckedChange={handleCheckedChange}
   class={cn(
+    "after:absolute after:-inset-y-2 after:inset-x-0 after:content-['']",
     'peer relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
     className
   )}

package/dist/lib/components/Tabs.svelte

@@ -111,7 +111,7 @@
   <div
     role="tablist"
     aria-label={label}
-    class="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground"
+    class="inline-flex h-10 max-w-full items-center justify-center overflow-x-auto rounded-md bg-muted p-1 text-muted-foreground [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
   >
     {#each tabs as tab, index (tab.id)}
       <button

package/dist/lib/components/Textarea.svelte

@@ -62,7 +62,7 @@
   aria-describedby={ariaDescribedby}
   aria-invalid={ariaInvalid}
   class={cn(
-    'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-gray-500 dark:placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y',
+    'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base sm:text-sm ring-offset-background placeholder:text-gray-500 dark:placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y',
     ariaInvalid === true || ariaInvalid === 'true'
       ? 'border-destructive focus-visible:ring-destructive'
       : '',

package/dist/lib/components/data-table/DataTableEditableCell.svelte

@@ -106,7 +106,7 @@
         oninput={(e: Event) => (editValue = (e.target as HTMLInputElement).value)}
         onkeydown={handleKeydown}
         onblur={handleBlur}
-        class="h-7 w-full rounded border border-input bg-background px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        class="h-7 w-full rounded border border-input bg-background px-2 text-base sm:text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
       />
     {:else}
       <span class="border-b border-dashed border-transparent hover:border-primary">

package/dist/lib/components/data-table/DataTablePagination.svelte

@@ -33,8 +33,8 @@
   }
 </script>
 
-<div class={cn('flex items-center justify-between px-2 py-4', className)}>
-  <div class="flex-1 text-sm text-muted-foreground">
+<div class={cn('flex flex-wrap items-center justify-between gap-3 px-2 py-4', className)}>
+  <div class="basis-full text-sm text-muted-foreground sm:basis-auto sm:flex-1">
     {#if showSelectedCount && table.selectedCount > 0}
       {table.selectedCount} of {table.totalRows} row(s) selected
     {:else}
@@ -42,7 +42,7 @@
     {/if}
   </div>
 
-  <div class="flex items-center gap-6 lg:gap-8">
+  <div class="flex flex-wrap items-center gap-x-4 gap-y-2 sm:gap-x-6 lg:gap-x-8">
     <!-- Page size selector -->
     <div class="flex items-center gap-2">
       <span class="text-sm text-muted-foreground">Rows per page</span>
@@ -67,7 +67,7 @@
       <Button
         variant="outline"
         size="icon"
-        class="h-8 w-8"
+        class="relative h-8 w-8 after:absolute after:-inset-1.5 after:content-['']"
         disabled={!table.canPreviousPage}
         onclick={() => table.firstPage()}
         aria-label="Go to first page"
@@ -87,7 +87,7 @@
       <Button
         variant="outline"
         size="icon"
-        class="h-8 w-8"
+        class="relative h-8 w-8 after:absolute after:-inset-1.5 after:content-['']"
         disabled={!table.canPreviousPage}
         onclick={() => table.previousPage()}
         aria-label="Go to previous page"
@@ -107,7 +107,7 @@
       <Button
         variant="outline"
         size="icon"
-        class="h-8 w-8"
+        class="relative h-8 w-8 after:absolute after:-inset-1.5 after:content-['']"
         disabled={!table.canNextPage}
         onclick={() => table.nextPage()}
         aria-label="Go to next page"
@@ -127,7 +127,7 @@
       <Button
         variant="outline"
         size="icon"
-        class="h-8 w-8"
+        class="relative h-8 w-8 after:absolute after:-inset-1.5 after:content-['']"
         disabled={!table.canNextPage}
         onclick={() => table.lastPage()}
         aria-label="Go to last page"

package/dist/lib/components/layout/AppShell.svelte

@@ -45,6 +45,8 @@
       | 'bottom-left'
       | 'top-center'
       | 'bottom-center';
+    /** Render the built-in ToastContainer (disable when the app mounts its own) */
+    showToastContainer?: boolean;
     /** Main content */
     children: Snippet;
   }
@@ -53,6 +55,7 @@
     skipToId = 'main-content',
     skipToText = 'Skip to main content',
     toastPosition = 'bottom-right',
+    showToastContainer = true,
     children,
   }: Props = $props();
 </script>
@@ -70,7 +73,9 @@
   {@render children()}
 
   <!-- Toast Container -->
-  <ToastContainer position={toastPosition} />
+  {#if showToastContainer}
+    <ToastContainer position={toastPosition} />
+  {/if}
 </div>
 
 <style>

package/dist/lib/components/layout/AppShell.svelte.d.ts

@@ -36,6 +36,8 @@ interface Props {
     skipToText?: string;
     /** Toast container position */
     toastPosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    /** Render the built-in ToastContainer (disable when the app mounts its own) */
+    showToastContainer?: boolean;
     /** Main content */
     children: Snippet;
 }

package/dist/lib/components/layout/DashboardLayout.svelte

@@ -97,6 +97,8 @@
     contentPadding?: 'default' | 'compact' | 'none';
     /** App identifier for per-app sidebar preferences storage */
     appId?: string;
+    /** Render the AppShell's built-in ToastContainer (disable when the app mounts its own) */
+    showToastContainer?: boolean;
     /** Main content */
     children: Snippet;
   }
@@ -133,6 +135,7 @@
     mobileBreakpoint = 'lg',
     contentPadding = 'default',
     appId,
+    showToastContainer = true,
     children,
   }: Props = $props();
 
@@ -156,8 +159,27 @@
       : navigation
   );
 
-  // Reactive media query for mobile detection
-  let isMobile = $state(false);
+  // Reactive media query for mobile detection. Initialized synchronously so
+  // the first client paint doesn't flash the desktop layout (256px content
+  // margin + full-width sidebar) before an effect corrects it. Deliberately
+  // reads the initial `mobileBreakpoint` — later changes are handled by the
+  // matchMedia effect below.
+  // svelte-ignore state_referenced_locally
+  const initialIsMobile =
+    typeof window !== 'undefined' &&
+    window.matchMedia(`(max-width: ${breakpointPixels[mobileBreakpoint]}px)`).matches;
+  let isMobile = $state(initialIsMobile);
+  if (typeof window !== 'undefined') {
+    sidebarStore.setMobile(initialIsMobile);
+  }
+
+  // Suppress the margin transition until after the first paint so any
+  // hydration correction snaps instead of visibly sliding.
+  let mounted = $state(false);
+
+  $effect(() => {
+    mounted = true;
+  });
 
   $effect(() => {
     if (typeof window !== 'undefined') {
@@ -224,7 +246,7 @@
   );
 </script>
 
-<AppShell>
+<AppShell {showToastContainer}>
   <!-- Sidebar -->
   <Sidebar
     navigation={effectiveNavigation}
@@ -256,7 +278,9 @@
 
   <!-- Main Content Area -->
   <div
-    class="flex flex-1 flex-col transition-[margin] duration-300 motion-reduce:transition-none"
+    class="flex flex-1 flex-col {mounted
+      ? 'transition-[margin] duration-300 motion-reduce:transition-none'
+      : ''}"
     style="margin-left: {sidebarWidth}px;"
   >
     {#if showHeader}

package/dist/lib/components/layout/DashboardLayout.svelte.d.ts

@@ -77,6 +77,8 @@ interface Props {
     contentPadding?: 'default' | 'compact' | 'none';
     /** App identifier for per-app sidebar preferences storage */
     appId?: string;
+    /** Render the AppShell's built-in ToastContainer (disable when the app mounts its own) */
+    showToastContainer?: boolean;
     /** Main content */
     children: Snippet;
 }

package/dist/lib/components/layout/Header.svelte

@@ -183,14 +183,15 @@
         maxWidthClasses[maxWidth]
       )}
     >
-      <div class="flex items-center gap-4">
+      <div class="flex min-w-0 flex-1 items-center gap-4">
         <!-- Mobile Menu Button -->
         {#if showMenuButton}
           <button
             class={cn(
-              'rounded-md p-2 hover:bg-accent hover:text-accent-foreground',
+              'shrink-0 rounded-md p-2 hover:bg-accent hover:text-accent-foreground',
               bp.menuButtonHide
             )}
+            data-sidebar-trigger
             onclick={() => onMenuClick?.()}
             aria-label={menuOpen ? 'Close menu' : 'Open menu'}
             aria-expanded={menuOpen}
@@ -246,7 +247,7 @@
 
         <!-- Page Title -->
         {#if title}
-          <h2 class="text-lg font-semibold">{title}</h2>
+          <h2 class="min-w-0 truncate text-lg font-semibold">{title}</h2>
         {/if}
 
         <!-- Start Content -->
@@ -264,7 +265,7 @@
 
       <!-- End Section (search + custom end content) -->
       {#if search?.enabled || end}
-        <div class="flex items-center gap-4">
+        <div class="flex shrink-0 items-center gap-4">
           {#if search?.enabled}
             <HeaderSearch {...search} />
           {/if}

package/dist/lib/components/layout/Sidebar.svelte

@@ -398,6 +398,37 @@
   // Navigation element reference for arrow key handling
   let navElement = $state<HTMLElement | null>(null);
 
+  // Root element reference for the mobile focus trap
+  let asideElement = $state<HTMLElement | null>(null);
+
+  // Focus trap for the open mobile drawer: Tab cycles within the drawer,
+  // Escape closes it and returns focus to the header menu button.
+  function handleDrawerKeydown(event: KeyboardEvent) {
+    if (!isMobile || !mobileOpen) return;
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      onClose?.();
+      document.querySelector<HTMLElement>('[data-sidebar-trigger]')?.focus();
+      return;
+    }
+
+    if (event.key !== 'Tab' || !asideElement) return;
+    const focusable = asideElement.querySelectorAll<HTMLElement>(
+      'a[href]:not([disabled]), button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }
+
   // Handle arrow key navigation within the sidebar
   function handleNavKeydown(event: KeyboardEvent) {
     if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
@@ -427,19 +458,15 @@
   }
 </script>
 
-<!-- Mobile Overlay: z-40 positions below sidebar (z-50) but above main content -->
+<!-- Mobile Overlay: z-40 positions below sidebar (z-50) but above main content.
+     Not focusable: the drawer traps focus and handles Escape itself. -->
 {#if isMobile && mobileOpen}
-  <div
-    class="fixed inset-0 z-40 bg-black/50 lg:hidden"
-    onclick={() => onClose?.()}
-    onkeydown={(e) => e.key === 'Escape' && onClose?.()}
-    role="button"
-    tabindex="0"
-    aria-label="Close sidebar"
-  ></div>
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+  <div class="fixed inset-0 z-40 bg-black/50" onclick={() => onClose?.()} aria-hidden="true"></div>
 {/if}
 
 <!-- Sidebar: z-50 positions above overlay and content, below modals (z-100+) -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <aside
   class={cn(
     'fixed left-0 top-0 z-[var(--z-sidebar,50)] flex h-full flex-col transition-[width,transform] duration-300 motion-reduce:transition-none touch-pan-y',
@@ -463,6 +490,9 @@
     return styles.join('; ');
   })()}
   aria-label="Main navigation"
+  bind:this={asideElement}
+  inert={isMobile && !mobileOpen}
+  onkeydown={handleDrawerKeydown}
   ontouchstart={handleTouchStart}
   ontouchmove={handleTouchMove}
   ontouchend={handleTouchEnd}

package/dist/lib/stores/sidebar.svelte.js

@@ -16,7 +16,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _SidebarStore_instances, _SidebarStore_initialized, _SidebarStore_loadedFromStorage, _SidebarStore_loadedExpansionFromStorage, _SidebarStore_loadedPinnedFromStorage, _SidebarStore_onPinnedChange, _SidebarStore_appId, _SidebarStore_getStorageKey, _SidebarStore_persist, _SidebarStore_persistExpansion, _SidebarStore_persistPinned;
+var _SidebarStore_instances, _SidebarStore_initialized, _SidebarStore_loadedFromStorage, _SidebarStore_loadedExpansionFromStorage, _SidebarStore_loadedPinnedFromStorage, _SidebarStore_onPinnedChange, _SidebarStore_appId, _SidebarStore_desktopOpen, _SidebarStore_getStorageKey, _SidebarStore_persist, _SidebarStore_persistExpansion, _SidebarStore_persistPinned, _SidebarStore_persistDesktopState;
 import { matchesAccess } from '../utils/nav-access.js';
 const STORAGE_PREFIX = 'classic-theme-sidebar';
 class SidebarStore {
@@ -33,6 +33,10 @@ class SidebarStore {
         _SidebarStore_loadedPinnedFromStorage.set(this, false);
         _SidebarStore_onPinnedChange.set(this, void 0);
         _SidebarStore_appId.set(this, void 0);
+        // Desktop open/closed preference, kept separate from `isOpen` so that the
+        // mobile drawer (which must always start closed and never persists) can't
+        // clobber it. Restored when leaving mobile mode.
+        _SidebarStore_desktopOpen.set(this, null);
     }
     /**
      * Whether the store has been initialized
@@ -77,10 +81,14 @@ class SidebarStore {
         __classPrivateFieldSet(this, _SidebarStore_loadedExpansionFromStorage, false, "f");
         __classPrivateFieldSet(this, _SidebarStore_loadedPinnedFromStorage, false, "f");
         try {
-            // Load sidebar open state
+            // Load sidebar open state. On mobile only the desktop preference is
+            // recorded — the drawer must never open on first paint.
             const stored = localStorage.getItem(__classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_getStorageKey).call(this, 'open'));
             if (stored !== null) {
-                this.isOpen = stored === 'true';
+                __classPrivateFieldSet(this, _SidebarStore_desktopOpen, stored === 'true', "f");
+                if (!this.isMobile) {
+                    this.isOpen = __classPrivateFieldGet(this, _SidebarStore_desktopOpen, "f");
+                }
                 __classPrivateFieldSet(this, _SidebarStore_loadedFromStorage, true, "f");
             }
             // Load expanded sections
@@ -117,31 +125,38 @@ class SidebarStore {
      */
     toggle() {
         this.isOpen = !this.isOpen;
-        __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persist).call(this);
+        __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persistDesktopState).call(this);
     }
     /**
      * Open the sidebar
      */
     open() {
         this.isOpen = true;
-        __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persist).call(this);
+        __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persistDesktopState).call(this);
     }
     /**
      * Close the sidebar
      */
     close() {
         this.isOpen = false;
-        __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persist).call(this);
+        __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persistDesktopState).call(this);
     }
     /**
      * Set mobile mode
      */
     setMobile(isMobile) {
+        if (this.isMobile === isMobile)
+            return;
         this.isMobile = isMobile;
-        // Auto-close sidebar on mobile (don't persist mobile state)
         if (isMobile) {
+            // Entering mobile: stash the desktop preference and close the drawer.
+            __classPrivateFieldSet(this, _SidebarStore_desktopOpen, this.isOpen, "f");
             this.isOpen = false;
         }
+        else {
+            // Leaving mobile: restore the desktop preference (default open).
+            this.isOpen = __classPrivateFieldGet(this, _SidebarStore_desktopOpen, "f") ?? true;
+        }
     }
     /**
      * Toggle section expansion state
@@ -316,7 +331,7 @@ class SidebarStore {
         };
     }
 }
-_SidebarStore_initialized = new WeakMap(), _SidebarStore_loadedFromStorage = new WeakMap(), _SidebarStore_loadedExpansionFromStorage = new WeakMap(), _SidebarStore_loadedPinnedFromStorage = new WeakMap(), _SidebarStore_onPinnedChange = new WeakMap(), _SidebarStore_appId = new WeakMap(), _SidebarStore_instances = new WeakSet(), _SidebarStore_getStorageKey = function _SidebarStore_getStorageKey(suffix) {
+_SidebarStore_initialized = new WeakMap(), _SidebarStore_loadedFromStorage = new WeakMap(), _SidebarStore_loadedExpansionFromStorage = new WeakMap(), _SidebarStore_loadedPinnedFromStorage = new WeakMap(), _SidebarStore_onPinnedChange = new WeakMap(), _SidebarStore_appId = new WeakMap(), _SidebarStore_desktopOpen = new WeakMap(), _SidebarStore_instances = new WeakSet(), _SidebarStore_getStorageKey = function _SidebarStore_getStorageKey(suffix) {
     return __classPrivateFieldGet(this, _SidebarStore_appId, "f")
         ? `${STORAGE_PREFIX}-${__classPrivateFieldGet(this, _SidebarStore_appId, "f")}-${suffix}`
         : `${STORAGE_PREFIX}-${suffix}`;
@@ -350,5 +365,10 @@ _SidebarStore_initialized = new WeakMap(), _SidebarStore_loadedFromStorage = new
     }
     // Notify external callback for server persistence
     __classPrivateFieldGet(this, _SidebarStore_onPinnedChange, "f")?.call(this, [...this.pinnedItems]);
+}, _SidebarStore_persistDesktopState = function _SidebarStore_persistDesktopState() {
+    if (this.isMobile)
+        return;
+    __classPrivateFieldSet(this, _SidebarStore_desktopOpen, this.isOpen, "f");
+    __classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_persist).call(this);
 };
 export const sidebarStore = new SidebarStore();

package/dist/lib/types/components.d.ts

@@ -91,6 +91,12 @@ export interface DataTableColumn<T = object> {
     width?: string;
     /** Text alignment */
     align?: 'left' | 'center' | 'right';
+    /**
+     * Hide this column below the given Tailwind breakpoint (CSS-only, SSR-safe).
+     * Applies to the header and default-rendered cells; custom row snippets must
+     * mirror the guard themselves so cell counts stay in sync.
+     */
+    hideBelow?: 'sm' | 'md' | 'lg';
     /** Custom cell render function returning string */
     format?: (value: unknown, row: T) => string;
     /** Filter function type or custom filter function */

package/package.json

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