@classic-homes/theme-svelte 1.6.0 → 1.7.1

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

@@ -323,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/Header.svelte

@@ -178,7 +178,7 @@
   <div class={cn('h-16', strongBorder ? 'border-b-2 border-black' : 'border-b border-black')}>
     <div
       class={cn(
-        'flex h-full items-center justify-between px-2 sm:px-4 lg:px-4',
+        'flex h-full items-center justify-between gap-4 sm:gap-6 px-2 sm:px-4 lg:px-4',
         maxWidth !== 'none' && 'mx-auto',
         maxWidthClasses[maxWidth]
       )}

package/dist/lib/components/layout/sidebar/SidebarNavItem.svelte

@@ -190,8 +190,11 @@
     class={cn(
       'flex items-center justify-center p-1 rounded shrink-0',
       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1',
-      // Show on hover for regular items, always show in pinned section
-      isUnpin ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
+      // Show on hover for regular items, always show in pinned section.
+      // Touch devices never fire hover (hoverOnlyWhenSupported), so keep it visible there.
+      isUnpin
+        ? 'opacity-100'
+        : 'opacity-0 group-hover:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-60',
       // Light variant: white text when row is hovered (teal bg), red/primary text when active
       isLight && !item.active && 'text-muted-foreground group-hover:text-white hover:bg-white/20',
       isLight && item.active && 'text-primary hover:bg-primary/20',

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/package.json

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