@classic-homes/theme-svelte 1.30.1 → 1.31.0

package/dist/lib/components/ActionHeader.svelte

@@ -34,6 +34,7 @@
   import { cn } from '../utils.js';
   import Button from './Button.svelte';
   import Icon from './Icon.svelte';
+  import BackButton from './BackButton.svelte';
   import DropdownMenu, { type DropdownMenuItem } from './DropdownMenu.svelte';
 
   interface Props {
@@ -45,9 +46,9 @@
     caption?: string;
     /** Heading level for the title (default 1) */
     headingLevel?: 1 | 2 | 3;
-    /** Renders a back (arrow) button linking here */
+    /** Renders a labelled back link above the title, linking here */
     backHref?: string;
-    /** What the back button returns to, e.g. "Signs" → aria-label "Back to Signs" */
+    /** What the back link returns to, e.g. "signs" → "Back to signs" */
     backLabel?: string;
     /** Header actions; see `ActionHeaderAction.priority` for how they collapse */
     actions?: ActionHeaderAction[];
@@ -59,7 +60,7 @@
     collapseAt?: 'auto' | 'sm' | 'md' | 'lg' | 'never';
     /** Accessible name of the overflow menu trigger */
     moreLabel?: string;
-    /** Leading visual after the back button (e.g. a record thumbnail) */
+    /** Leading visual beside the title (e.g. a record thumbnail) */
     media?: Snippet;
     /** Inline content right after the title (keep it small, e.g. one badge) */
     titleSuffix?: Snippet;
@@ -131,7 +132,6 @@
   const narrowMenu = $derived(toMenu([...secondary, ...overflow]));
 
   const headingTag = $derived(`h${headingLevel}`);
-  const hasLead = $derived(Boolean(backHref || media));
   const hasActions = $derived(primary.length > 0 || secondary.length > 0 || overflow.length > 0);
 
   /** Mirrors Button's `outline` variant at `size="sm"` */
@@ -160,22 +160,17 @@
   {...restProps}
 >
   <div class="ah-grid">
-    {#if hasLead}
+    {#if backHref}
+      <!-- Text, not a bare arrow: an icon-only back button gets mistaken for
+           (and confused with) the sidebar collapse toggle beside it. -->
+      <div class="ah-back">
+        <BackButton href={backHref} label={backLabel} class="-ms-2" />
+      </div>
+    {/if}
+
+    {#if media}
       <div class="ah-lead">
-        {#if backHref}
-          <Button
-            variant="ghost"
-            size="icon"
-            href={backHref}
-            class="h-9 w-9 shrink-0"
-            aria-label={backLabel ? `Back to ${backLabel}` : 'Back'}
-          >
-            <Icon name="arrow-left" size={18} aria-hidden="true" />
-          </Button>
-        {/if}
-        {#if media}
-          <div class="shrink-0">{@render media()}</div>
-        {/if}
+        <div class="shrink-0">{@render media()}</div>
       </div>
     {/if}
 
@@ -288,6 +283,7 @@
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto auto;
     grid-template-areas:
+      'back back back back'
       'lead heading actions actions'
       'lead sub sub sub'
       'lead caption caption caption'
@@ -309,6 +305,12 @@
     --ah-title-leading: 1.5rem;
   }
 
+  .ah-back {
+    grid-area: back;
+    min-width: 0;
+    margin-bottom: 0.25rem;
+  }
+
   .ah-lead {
     grid-area: lead;
     align-self: start;
@@ -448,6 +450,7 @@
       --ah-subtitle-size: 1rem;
       --ah-subtitle-leading: 1.5rem;
       grid-template-areas:
+        'back back back back'
         'lead heading actions tools'
         'lead sub actions tools'
         'lead badges badges badges';
@@ -456,6 +459,7 @@
     /* With a caption the actions sit on the title row and the caption under them */
     [data-has-caption] .ah-grid {
       grid-template-areas:
+        'back back back back'
         'lead heading actions tools'
         'lead sub caption tools'
         'lead badges badges badges';

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

@@ -35,9 +35,9 @@ interface Props {
     caption?: string;
     /** Heading level for the title (default 1) */
     headingLevel?: 1 | 2 | 3;
-    /** Renders a back (arrow) button linking here */
+    /** Renders a labelled back link above the title, linking here */
     backHref?: string;
-    /** What the back button returns to, e.g. "Signs" → aria-label "Back to Signs" */
+    /** What the back link returns to, e.g. "signs" → "Back to signs" */
     backLabel?: string;
     /** Header actions; see `ActionHeaderAction.priority` for how they collapse */
     actions?: ActionHeaderAction[];
@@ -49,7 +49,7 @@ interface Props {
     collapseAt?: 'auto' | 'sm' | 'md' | 'lg' | 'never';
     /** Accessible name of the overflow menu trigger */
     moreLabel?: string;
-    /** Leading visual after the back button (e.g. a record thumbnail) */
+    /** Leading visual beside the title (e.g. a record thumbnail) */
     media?: Snippet;
     /** Inline content right after the title (keep it small, e.g. one badge) */
     titleSuffix?: Snippet;

package/dist/lib/components/BackButton.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  /**
+   * BackButton - a labelled "← Back to {label}" link (or button with `onclick`).
+   *
+   * The visible text is the point: an icon-only arrow gets confused with other
+   * chevron controls (e.g. the sidebar toggle). The label truncates rather
+   * than wraps, and the full text stays as the tooltip.
+   *
+   * @example
+   * ```svelte
+   * <BackButton href="/marketing/signs" label="signs" />
+   * <BackButton onclick={close} label="all links" />
+   * ```
+   */
+  import { cn } from '../utils.js';
+  import Icon from './Icon.svelte';
+
+  interface Props {
+    /** Where Back goes; renders a link */
+    href?: string;
+    /** Click handler; renders a button when there is no `href` */
+    onclick?: (event: MouseEvent) => void;
+    /** What Back returns to, e.g. "signs" → "Back to signs" (omit for plain "Back") */
+    label?: string;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let { href, onclick, label, class: className, ...restProps }: Props = $props();
+
+  const text = $derived(label ? `Back to ${label}` : 'Back');
+
+  const classes = $derived(
+    cn(
+      'inline-flex h-8 max-w-full items-center gap-1.5 rounded-md px-2 text-sm font-medium text-muted-foreground',
+      'ring-offset-background hover:bg-muted-hover hover:text-foreground',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className
+    )
+  );
+</script>
+
+{#if href}
+  <a {href} class={classes} title={text} data-back-button {onclick} {...restProps}>
+    <Icon name="arrow-left" size={16} class="shrink-0" />
+    <span class="truncate">{text}</span>
+  </a>
+{:else}
+  <button type="button" class={classes} title={text} data-back-button {onclick} {...restProps}>
+    <Icon name="arrow-left" size={16} class="shrink-0" />
+    <span class="truncate">{text}</span>
+  </button>
+{/if}

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

@@ -0,0 +1,13 @@
+interface Props {
+    /** Where Back goes; renders a link */
+    href?: string;
+    /** Click handler; renders a button when there is no `href` */
+    onclick?: (event: MouseEvent) => void;
+    /** What Back returns to, e.g. "signs" → "Back to signs" (omit for plain "Back") */
+    label?: string;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const BackButton: import("svelte").Component<Props, {}, "">;
+type BackButton = ReturnType<typeof BackButton>;
+export default BackButton;

package/dist/lib/components/Icon.svelte

@@ -169,6 +169,8 @@
     | 'list'
     | 'columns'
     | 'sidebar'
+    | 'panel-left-close'
+    | 'panel-left-open'
     | 'layers'
     | 'layout'
     | 'move'
@@ -735,6 +737,12 @@
     sidebar: {
       path: 'M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM9 3v18',
     },
+    'panel-left-close': {
+      path: 'M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM9 3v18M16 15l-3-3 3-3',
+    },
+    'panel-left-open': {
+      path: 'M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM9 3v18M14 9l3 3-3 3',
+    },
     layers: { path: 'M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' },
     layout: {
       path: 'M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM3 9h18M9 21V9',

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

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

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

@@ -55,6 +55,7 @@
   import type { HeaderSearchConfig } from '../../types/layout.js';
   import { cn } from '../../utils.js';
   import HeaderSearch from '../HeaderSearch.svelte';
+  import Icon from '../Icon.svelte';
 
   type Breakpoint = 'sm' | 'md' | 'lg';
 
@@ -220,7 +221,9 @@
           </button>
         {/if}
 
-        <!-- Collapse/Expand Button (Desktop sidebar toggle) -->
+        <!-- Collapse/Expand Button (Desktop sidebar toggle). A panel icon, not a
+             chevron: a left-pointing arrow next to the page title reads as "Back".
+             The divider after it groups it with the sidebar rather than the page. -->
         {#if showCollapseButton}
           <button
             class={cn(
@@ -231,22 +234,15 @@
             )}
             onclick={() => onCollapseClick?.()}
             aria-label={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+            title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
             aria-expanded={!sidebarCollapsed}
           >
-            <svg
-              class={cn('h-5 w-5 transition-transform', sidebarCollapsed && 'rotate-180')}
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
-              />
-            </svg>
+            <Icon name={sidebarCollapsed ? 'panel-left-open' : 'panel-left-close'} size={20} />
           </button>
+          <span
+            class={cn('-ml-2 h-6 w-px shrink-0 bg-foreground/20', bp.collapseButtonShow)}
+            aria-hidden="true"
+          ></span>
         {/if}
 
         <!-- Page Title -->

package/dist/lib/index.d.ts

@@ -81,6 +81,7 @@ export { default as AvatarFallback } from './components/AvatarFallback.svelte';
 export { default as Section } from './components/Section.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as ActionHeader, type ActionHeaderAction } from './components/ActionHeader.svelte';
+export { default as BackButton } from './components/BackButton.svelte';
 export { default as AppShell } from './components/layout/AppShell.svelte';
 export { default as DashboardLayout } from './components/layout/DashboardLayout.svelte';
 export { default as PublicLayout } from './components/layout/PublicLayout.svelte';

package/dist/lib/index.js

@@ -106,6 +106,7 @@ export { default as AvatarFallback } from './components/AvatarFallback.svelte';
 export { default as Section } from './components/Section.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as ActionHeader } from './components/ActionHeader.svelte';
+export { default as BackButton } from './components/BackButton.svelte';
 // Layout Components
 export { default as AppShell } from './components/layout/AppShell.svelte';
 export { default as DashboardLayout } from './components/layout/DashboardLayout.svelte';

package/package.json

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