@classic-homes/theme-svelte 1.5.1 → 1.7.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/AlertDialog.svelte

@@ -97,7 +97,7 @@
     />
     <AlertDialogPrimitive.Content
       class={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-black bg-background p-6 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',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100vw-2rem)] sm:max-w-lg max-h-[calc(100dvh-2rem)] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-black bg-background p-4 sm:p-6 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%]',
         className
       )}
     >

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
           )}
@@ -262,7 +262,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
         )}

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/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/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/OTPInput.svelte

@@ -224,7 +224,7 @@
     {/if}
 
     <div
-      class={cn('flex gap-2', className)}
+      class={cn('flex gap-1.5 sm:gap-2', className)}
       role="group"
       aria-label={label || 'One-time password input'}
       aria-describedby={describedBy}
@@ -244,7 +244,7 @@
           onpaste={handlePaste}
           onfocus={handleFocus}
           class={cn(
-            'h-12 w-12 text-center text-lg font-semibold rounded-md border border-input bg-background ring-offset-background transition-colors',
+            'h-10 w-10 text-base sm:h-12 sm:w-12 sm:text-lg text-center font-semibold rounded-md border border-input bg-background ring-offset-background transition-colors',
             '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'
@@ -275,7 +275,7 @@
   </div>
 {:else}
   <div
-    class={cn('flex gap-2', className)}
+    class={cn('flex gap-1.5 sm:gap-2', className)}
     role="group"
     aria-label="One-time password input"
     aria-describedby={describedBy}
@@ -295,7 +295,7 @@
         onpaste={handlePaste}
         onfocus={handleFocus}
         class={cn(
-          'h-12 w-12 text-center text-lg font-semibold rounded-md border border-input bg-background ring-offset-background transition-colors',
+          'h-10 w-10 text-base sm:h-12 sm:w-12 sm:text-lg text-center font-semibold rounded-md border border-input bg-background ring-offset-background transition-colors',
           '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'

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/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

@@ -50,6 +50,35 @@
   // Store references to tab button elements for direct focus management
   let tabRefs: Record<string, HTMLButtonElement | undefined> = $state({});
 
+  // Horizontal-scroll handling for tab lists wider than their container
+  let tabList: HTMLDivElement | undefined = $state();
+  let canScrollLeft = $state(false);
+  let canScrollRight = $state(false);
+
+  function updateScrollShadows() {
+    if (!tabList) return;
+    canScrollLeft = tabList.scrollLeft > 1;
+    canScrollRight = tabList.scrollLeft + tabList.clientWidth < tabList.scrollWidth - 1;
+  }
+
+  // Scroll only the tab list (never the page) so deep-linked tabs are visible
+  function scrollTabIntoView(el: HTMLButtonElement) {
+    if (!tabList) return;
+    const listRect = tabList.getBoundingClientRect();
+    const rect = el.getBoundingClientRect();
+    if (rect.left < listRect.left) {
+      tabList.scrollLeft += rect.left - listRect.left - 8;
+    } else if (rect.right > listRect.right) {
+      tabList.scrollLeft += rect.right - listRect.right + 8;
+    }
+  }
+
+  $effect(() => {
+    const el = tabRefs[value];
+    if (el) scrollTabIntoView(el);
+    updateScrollShadows();
+  });
+
   // Create a reactive object for context
   // Initialize with empty values - the effect will set them immediately
   const tabsState = $state({ activeTab: '', tabsId: '' });
@@ -108,34 +137,50 @@
 
 <div class={cn('w-full', className)}>
   <!-- Tab List -->
-  <div
-    role="tablist"
-    aria-label={label}
-    class="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground"
-  >
-    {#each tabs as tab, index (tab.id)}
-      <button
-        bind:this={tabRefs[tab.id]}
-        id={`${id}-tab-${tab.id}`}
-        role="tab"
-        type="button"
-        aria-selected={value === tab.id}
-        aria-controls={children && value === tab.id ? `${id}-panel-${tab.id}` : undefined}
-        tabindex={value === tab.id ? 0 : -1}
-        disabled={tab.disabled}
-        class={cn(
-          'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-          value === tab.id
-            ? 'bg-background text-foreground shadow-sm'
-            : 'hover:bg-background-hover hover:text-foreground',
-          tab.disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
-        )}
-        onclick={() => selectTab(tab.id)}
-        onkeydown={(e) => handleKeyDown(e, index)}
-      >
-        {tab.label}
-      </button>
-    {/each}
+  <div class="relative inline-flex max-w-full">
+    {#if canScrollLeft}
+      <div
+        class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 rounded-l-md bg-gradient-to-r from-muted to-transparent"
+        aria-hidden="true"
+      ></div>
+    {/if}
+    {#if canScrollRight}
+      <div
+        class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 rounded-r-md bg-gradient-to-l from-muted to-transparent"
+        aria-hidden="true"
+      ></div>
+    {/if}
+    <div
+      bind:this={tabList}
+      onscroll={updateScrollShadows}
+      role="tablist"
+      aria-label={label}
+      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
+          bind:this={tabRefs[tab.id]}
+          id={`${id}-tab-${tab.id}`}
+          role="tab"
+          type="button"
+          aria-selected={value === tab.id}
+          aria-controls={children && value === tab.id ? `${id}-panel-${tab.id}` : undefined}
+          tabindex={value === tab.id ? 0 : -1}
+          disabled={tab.disabled}
+          class={cn(
+            'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+            value === tab.id
+              ? 'bg-background text-foreground shadow-sm'
+              : 'hover:bg-background-hover hover:text-foreground',
+            tab.disabled && 'opacity-50 pointer-events-none cursor-not-allowed'
+          )}
+          onclick={() => selectTab(tab.id)}
+          onkeydown={(e) => handleKeyDown(e, index)}
+        >
+          {tab.label}
+        </button>
+      {/each}
+    </div>
   </div>
 
   <!-- Tab Panels Container -->

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/AuthLayout.svelte

@@ -80,7 +80,7 @@
 <AppShell>
   <div
     class={cn(
-      'flex h-screen flex-col items-center justify-center overflow-auto bg-content-bg px-4 py-8 sm:px-6 lg:px-8',
+      'flex min-h-[100dvh] flex-col items-center justify-center bg-content-bg px-4 py-8 sm:px-6 lg:px-8',
       showBackground && backgroundClasses[backgroundVariant],
       className
     )}

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}
@@ -299,7 +323,10 @@
     {/if}
 
     <!-- Main Content -->
-    <main id="main-content" class="flex-1 bg-content-bg {contentPaddingClass}">
+    <main
+      id="main-content"
+      class="min-w-0 flex-1 overflow-x-clip bg-content-bg {contentPaddingClass}"
+    >
       {@render children()}
     </main>
   </div>

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/components/notifications/NotificationBulkActions.svelte

@@ -51,10 +51,13 @@
 </script>
 
 <div
-  class={cn('flex items-center justify-between gap-4 rounded-lg border bg-muted/50 p-3', className)}
+  class={cn(
+    'flex flex-wrap items-center justify-between gap-x-4 gap-y-2 rounded-lg border bg-muted/50 p-3',
+    className
+  )}
 >
   <!-- Selection controls -->
-  <div class="flex items-center gap-3">
+  <div class="flex flex-wrap items-center gap-3">
     <Checkbox checked={allSelected} onCheckedChange={handleSelectAllChange}>
       {#snippet children()}
         <span class="text-sm">
@@ -80,7 +83,7 @@
 
   <!-- Bulk actions -->
   {#if hasSelection}
-    <div class="flex items-center gap-2">
+    <div class="flex flex-wrap items-center gap-2">
       {#if onMarkRead}
         <Button variant="outline" size="sm" onclick={onMarkRead}>
           {#snippet children()}

package/dist/lib/components/notifications/NotificationDialog.svelte

@@ -149,7 +149,7 @@
 
         <!-- Metadata -->
         <div class="border-t pt-4 mt-4">
-          <dl class="grid grid-cols-2 gap-4 text-sm">
+          <dl class="grid grid-cols-1 gap-4 text-sm sm:grid-cols-2">
             <div>
               <dt class="text-muted-foreground">Category</dt>
               <dd class="font-medium capitalize">{notification.category}</dd>

package/dist/lib/components/notifications/NotificationFilters.svelte

@@ -69,7 +69,7 @@
   role="tablist"
   aria-label="Filter notifications"
   class={cn(
-    'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+    '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',
     className
   )}
 >

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.1",
+  "version": "1.7.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",