@classic-homes/theme-svelte 1.1.2 → 1.2.1

package/dist/__tests__/a11y/Tabs.a11y.test.js

@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'vitest-axe';
+import { createRawSnippet } from 'svelte';
 import Tabs from '../../lib/components/Tabs.svelte';
 describe('Tabs accessibility', () => {
     const defaultTabs = [
@@ -85,13 +86,31 @@ describe('Tabs accessibility', () => {
         await user.click(tabs[1]);
         expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
     });
-    it('should have aria-controls linking tab to panel', () => {
+    it('should omit aria-controls when no panel exists', () => {
+        // Without children there is no panel in the DOM; an aria-controls pointing
+        // at a missing element is an ARIA validity failure (axe: aria-valid-attr-value)
         render(Tabs, {
             props: { tabs: defaultTabs, label: 'Test tabs' },
         });
+        for (const tab of screen.getAllByRole('tab')) {
+            expect(tab).not.toHaveAttribute('aria-controls');
+        }
+    });
+    it('should have aria-controls referencing a real panel when children exist', () => {
+        const children = createRawSnippet(() => ({
+            render: () => '<div id="test-tabs-panel-tab1" role="tabpanel">Panel 1</div>',
+        }));
+        render(Tabs, {
+            props: { tabs: defaultTabs, value: 'tab1', id: 'test-tabs', label: 'Test tabs', children },
+        });
         const tabs = screen.getAllByRole('tab');
-        // Selected tab should have aria-controls
         const selectedTab = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true');
-        expect(selectedTab).toHaveAttribute('aria-controls');
+        expect(selectedTab).toHaveAttribute('aria-controls', 'test-tabs-panel-tab1');
+        // The reference must resolve to an element that exists
+        expect(document.getElementById('test-tabs-panel-tab1')).not.toBeNull();
+        // Unselected tabs have no panel mounted, so no aria-controls
+        for (const tab of tabs.filter((t) => t !== selectedTab)) {
+            expect(tab).not.toHaveAttribute('aria-controls');
+        }
     });
 });

package/dist/lib/components/Button.svelte

@@ -4,7 +4,7 @@
   import { tv, type VariantProps } from 'tailwind-variants';
 
   const buttonVariants = tv({
-    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground shadow hover:bg-primary-hover',

package/dist/lib/components/DataPanel.svelte

@@ -17,6 +17,7 @@
     DEFAULT_PANEL_STATE,
     DEFAULT_CONSTRAINTS,
     DEFAULT_CARD_CONFIG,
+    DEFAULT_TAB_WIDTH,
     CARD_HEADER_HEIGHT,
     CARD_EXPANDED_RATIO,
     CARD_MIN_WIDTH,
@@ -84,6 +85,17 @@
     constraints?: PanelConstraints;
     /** Card mode configuration */
     cardConfig?: CardConfig;
+    /**
+     * Length (px) of the collapsed tab along its edge. Fixed rather than
+     * content-sized; raise it for longer titles. Defaults to 220.
+     */
+    tabWidth?: number;
+    /**
+     * Distance (px) of the collapsed tab from its pinned edge. Use it to clear
+     * fixed app chrome — a sticky header, a toolbar — that would otherwise
+     * cover the tab. Defaults to 0.
+     */
+    tabInset?: number;
     /** Disable close button */
     disableClose?: boolean;
     /** Disable resize functionality */
@@ -127,6 +139,8 @@
     actions = [],
     constraints = {},
     cardConfig = {},
+    tabWidth = DEFAULT_TAB_WIDTH,
+    tabInset = 0,
     disableClose = false,
     disableResize = false,
     disableDrag = false,
@@ -1153,6 +1167,8 @@
       {subtitle}
       {edge}
       {disableClose}
+      {tabWidth}
+      {tabInset}
       onclick={handleTabClick}
       onClose={handleClose}
       offset={internalTabOffset}

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

@@ -33,6 +33,17 @@ interface Props {
     constraints?: PanelConstraints;
     /** Card mode configuration */
     cardConfig?: CardConfig;
+    /**
+     * Length (px) of the collapsed tab along its edge. Fixed rather than
+     * content-sized; raise it for longer titles. Defaults to 220.
+     */
+    tabWidth?: number;
+    /**
+     * Distance (px) of the collapsed tab from its pinned edge. Use it to clear
+     * fixed app chrome — a sticky header, a toolbar — that would otherwise
+     * cover the tab. Defaults to 0.
+     */
+    tabInset?: number;
     /** Disable close button */
     disableClose?: boolean;
     /** Disable resize functionality */

package/dist/lib/components/DataPanelTab.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
   import { cn } from '../utils.js';
   import type { PanelEdge } from '@classic-homes/data-panel-core';
-  import { constrainTabOffset } from '@classic-homes/data-panel-core';
+  import {
+    constrainTabOffset,
+    getTabTransform,
+    getTabBounds,
+    TAB_THICKNESS,
+    DEFAULT_TAB_WIDTH,
+  } from '@classic-homes/data-panel-core';
 
   interface Props {
     /** Tab label/title */
@@ -19,6 +25,18 @@
     offset?: number;
     /** Called with the new offset after the tab is dragged along its edge */
     onOffsetChange?: (offset: number) => void;
+    /**
+     * Length (px) of the tab along its edge. Fixed rather than content-sized so
+     * the tab's geometry is pure pixel math in every browser; raise it for
+     * longer labels. Defaults to 220.
+     */
+    tabWidth?: number;
+    /**
+     * Distance (px) from the pinned edge. Use it to clear fixed app chrome — a
+     * sticky header, a toolbar — that would otherwise cover the tab. Defaults
+     * to 0 (flush with the edge).
+     */
+    tabInset?: number;
     /** Additional class */
     class?: string;
   }
@@ -32,6 +50,8 @@
     disableClose = false,
     offset = 0,
     onOffsetChange,
+    tabWidth = DEFAULT_TAB_WIDTH,
+    tabInset = 0,
     class: className,
   }: Props = $props();
 
@@ -39,35 +59,32 @@
 
   const positionClasses = $derived<string>(
     {
-      // Side tabs are the whole chip rotated 90°, so they need a fixed thickness
-      // (h-14 → 56px) for a deterministic edge hug; see tabTransform below. Border
-      // classes are in the chip's pre-rotation frame: its bottom rotates to the
-      // attached (edge) side and its top corners to the viewport-facing corners,
-      // so both edges drop the bottom border and round the top.
-      left: 'left-0 top-1/2 h-14 rounded-t-lg border-b-0',
-      right: 'right-0 top-1/2 h-14 rounded-t-lg border-b-0',
-      top: 'top-0 left-1/2 rounded-b-lg border-t-0',
-      bottom: 'bottom-0 left-1/2 rounded-t-lg border-b-0',
+      // Border classes are in the chip's pre-rotation frame: its bottom rotates
+      // to the attached (edge) side and its top corners to the viewport-facing
+      // corners, so both side edges drop the bottom border and round the top.
+      // The anchored axis is set inline (see insetStyle) so tabInset can move it.
+      left: 'top-1/2 rounded-t-lg border-b-0',
+      right: 'top-1/2 rounded-t-lg border-b-0',
+      top: 'left-1/2 rounded-b-lg border-t-0',
+      bottom: 'left-1/2 rounded-t-lg border-b-0',
     }[edge]
   );
 
+  // Distance from the anchored edge. Pushes the tab clear of fixed app chrome
+  // (header, toolbar) that would otherwise cover it. The transform is relative
+  // to the tab's own box, so shifting the anchor leaves the geometry intact.
+  const insetStyle = $derived<string>(`${edge}: ${tabInset}px;`);
+
   const draggable = $derived(!!onOffsetChange);
 
-  let btn = $state<HTMLDivElement | null>(null);
   let dragOffset = $state<number | null>(null);
   const effectiveOffset = $derived(dragOffset ?? offset);
 
-  // Half the side-tab thickness (h-14 → 56px). Left/right tabs are the whole chip
-  // rotated 90°; we center the rotated footprint on the edge, then shift it back
-  // by half its thickness so the outer long edge sits flush.
-  const SIDE_HALF = 28;
-  const tabTransform = $derived<string>(
-    edge === 'left'
-      ? `translate(calc(-50% + ${SIDE_HALF}px), calc(-50% + ${effectiveOffset}px)) rotate(90deg)`
-      : edge === 'right'
-        ? `translate(calc(50% - ${SIDE_HALF}px), calc(-50% + ${effectiveOffset}px)) rotate(-90deg)`
-        : `translateX(calc(-50% + ${effectiveOffset}px))`
-  );
+  // Geometry is entirely pixel-based (see getTabTransform): the tab carries an
+  // explicit width so nothing has to resolve a percentage against a
+  // content-sized box while a rotation is composed onto it.
+  const tabTransform = $derived<string>(getTabTransform(edge, tabWidth, effectiveOffset));
+  const tabBounds = $derived(getTabBounds(edge, tabWidth));
 
   // Non-reactive drag bookkeeping.
   let drag = { startX: 0, startY: 0, startOffset: 0, moved: false, pointerId: -1 };
@@ -93,12 +110,10 @@
     if (drag.pointerId !== e.pointerId || !el.hasPointerCapture(e.pointerId)) return;
     const delta = isVertical ? e.clientY - drag.startY : e.clientX - drag.startX;
     if (Math.abs(delta) > 3) drag.moved = true;
-    const rect = btn?.getBoundingClientRect();
-    const tabSize = { width: rect?.width ?? 160, height: rect?.height ?? 48 };
     dragOffset = constrainTabOffset(
       drag.startOffset + delta,
       edge,
-      tabSize,
+      tabBounds,
       window.innerWidth,
       window.innerHeight
     );
@@ -148,27 +163,24 @@
 
   function clampOffset() {
     if (!onOffsetChange) return;
-    const rect = btn?.getBoundingClientRect();
-    if (!rect) return;
     const clamped = constrainTabOffset(
       offset,
       edge,
-      { width: rect.width, height: rect.height },
+      tabBounds,
       window.innerWidth,
       window.innerHeight
     );
     if (clamped !== offset) onOffsetChange(clamped);
   }
 
-  // Re-clamp the persisted offset to the current tab geometry. The tab's
-  // along-edge extent depends on its rendered size (and, for side edges, on the
-  // 90° rotation), so an offset saved under a different size/edge/viewport can
-  // land the tab off-screen. Runs on mount and whenever edge/offset/size change.
+  // Re-clamp the persisted offset to the current geometry: an offset saved under
+  // a different edge, tabWidth, or viewport can land the tab off-screen. The
+  // tab's bounds are known from its props, so this never measures the DOM.
   $effect(() => {
     // Track the reactive inputs so this re-runs when they change.
     void edge;
     void offset;
-    void btn;
+    void tabBounds;
     if (dragOffset !== null) return;
     clampOffset();
   });
@@ -187,14 +199,19 @@
      container carries the position/transform and the pointer-drag handlers. -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-  bind:this={btn}
   class={cn(
-    'fixed z-40 flex max-w-[220px] items-center gap-2 border border-border bg-background px-2.5 py-1.5 shadow-md focus-within:ring-2 focus-within:ring-ring',
+    // Same layer as the expanded panel: the tab is the only way to bring the
+    // panel back, so it must never sit under chrome the panel covers.
+    'fixed z-50 flex items-center gap-2 border border-border bg-background px-2.5 py-1.5 shadow-md focus-within:ring-2 focus-within:ring-ring',
     draggable && 'cursor-grab touch-none active:cursor-grabbing',
     positionClasses,
     className
   )}
-  style={`transform: ${tabTransform}`}
+  style={`${insetStyle} width: ${tabWidth}px; ${
+    /* Side tabs rotate, so they need a fixed thickness for a deterministic edge
+       hug; top/bottom stay content-height. */
+    isVertical ? `height: ${TAB_THICKNESS}px; ` : ''
+  }transform-origin: 0 0; transform: ${tabTransform};`}
   onpointerdown={handlePointerDown}
   onpointermove={draggable ? handlePointerMove : undefined}
   onpointerup={draggable ? handlePointerUp : undefined}

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

@@ -15,6 +15,18 @@ interface Props {
     offset?: number;
     /** Called with the new offset after the tab is dragged along its edge */
     onOffsetChange?: (offset: number) => void;
+    /**
+     * Length (px) of the tab along its edge. Fixed rather than content-sized so
+     * the tab's geometry is pure pixel math in every browser; raise it for
+     * longer labels. Defaults to 220.
+     */
+    tabWidth?: number;
+    /**
+     * Distance (px) from the pinned edge. Use it to clear fixed app chrome — a
+     * sticky header, a toolbar — that would otherwise cover the tab. Defaults
+     * to 0 (flush with the edge).
+     */
+    tabInset?: number;
     /** Additional class */
     class?: string;
 }

package/dist/lib/components/LogoMain.svelte

@@ -54,7 +54,7 @@
     dark: {
       logo: '#C50F22', // Brand red
       title: '#000000', // Black for light backgrounds
-      subtitle: '#7a7a7a', // Gray
+      subtitle: '#666666', // Gray - #7a7a7a was 4.29:1 on white (WCAG 1.4.3 fail)
     },
     light: {
       logo: '#ffffff',
@@ -64,7 +64,7 @@
     'mono-dark': {
       logo: '#002e3f', // Navy
       title: '#002e3f',
-      subtitle: '#7a7a7a',
+      subtitle: '#666666', // see dark variant note
     },
     'mono-light': {
       logo: '#ffffff',

package/dist/lib/components/Switch.svelte

@@ -31,6 +31,19 @@
     ...restProps
   }: Props = $props();
 
+  // Dev-mode a11y warning, matching Input/Select/Button: a Switch with no
+  // aria-label, aria-labelledby, or id (for an external <label for>) announces
+  // as a bare "switch" with no name.
+  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
+    $effect(() => {
+      if (!ariaLabel && !ariaLabelledby && !id) {
+        console.warn(
+          'Switch: provide aria-label, aria-labelledby, or an id paired with a <label for> so the switch has an accessible name.'
+        );
+      }
+    });
+  }
+
   // Handle checked state changes from user interaction
   // The primitive handles the actual state management via bind:checked
   function handleCheckedChange(newChecked: boolean) {

package/dist/lib/components/Tabs.svelte

@@ -19,7 +19,16 @@
     label: string;
     /** Additional classes for container */
     class?: string;
-    /** Tab panel content */
+    /**
+     * Tab panel content - compose with `TabPanel` so each panel gets the
+     * matching `role="tabpanel"` / id / aria-labelledby wiring.
+     *
+     * aria-controls is only emitted while a panel actually exists in the DOM
+     * (children provided + tab active): a reference to a missing element is an
+     * ARIA validity failure (axe: aria-valid-attr-value). Consumers rendering
+     * panels OUTSIDE this component should give them
+     * `id="{id}-panel-{tabId}"` + `aria-labelledby="{id}-tab-{tabId}"`.
+     */
     children?: Snippet;
     /** Callback when active tab changes */
     onValueChange?: (value: string) => void;
@@ -111,7 +120,7 @@
         role="tab"
         type="button"
         aria-selected={value === tab.id}
-        aria-controls={`${id}-panel-${tab.id}`}
+        aria-controls={children && value === tab.id ? `${id}-panel-${tab.id}` : undefined}
         tabindex={value === tab.id ? 0 : -1}
         disabled={tab.disabled}
         class={cn(

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

@@ -15,7 +15,16 @@ interface Props {
     label: string;
     /** Additional classes for container */
     class?: string;
-    /** Tab panel content */
+    /**
+     * Tab panel content - compose with `TabPanel` so each panel gets the
+     * matching `role="tabpanel"` / id / aria-labelledby wiring.
+     *
+     * aria-controls is only emitted while a panel actually exists in the DOM
+     * (children provided + tab active): a reference to a missing element is an
+     * ARIA validity failure (axe: aria-valid-attr-value). Consumers rendering
+     * panels OUTSIDE this component should give them
+     * `id="{id}-panel-{tabId}"` + `aria-labelledby="{id}-tab-{tabId}"`.
+     */
     children?: Snippet;
     /** Callback when active tab changes */
     onValueChange?: (value: string) => void;

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

@@ -85,8 +85,8 @@
       className
     )}
   >
-    <!-- Logo -->
-    <div class="mb-6 flex flex-col items-center">
+    <!-- Logo. <header> so it isn't content outside every landmark (axe: region) -->
+    <header class="mb-6 flex flex-col items-center">
       {#if logo}
         {@render logo()}
       {:else}
@@ -98,7 +98,7 @@
           environment={logoEnvironment}
         />
       {/if}
-    </div>
+    </header>
 
     <!-- Main Content Card -->
     <main

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

@@ -52,6 +52,14 @@
     footer?: Snippet;
     /** Additional classes for the container */
     class?: string;
+    /**
+     * Whether this layout owns the whole page (default). Set false when
+     * rendering inside an app layout that already provides the page chrome -
+     * e.g. a SvelteKit +error.svelte inside a layout with its own
+     * <main id="main-content"> - so AppShell and the main landmark aren't
+     * duplicated (axe: landmark-no-duplicate-main / landmark-main-is-top-level).
+     */
+    standalone?: boolean;
     /** Main content (custom error content, replaces default display) */
     children?: Snippet;
   }
@@ -72,6 +80,7 @@
     actions,
     footer,
     class: className,
+    standalone = true,
     children,
   }: Props = $props();
 
@@ -128,16 +137,19 @@
   }
 </script>
 
-<AppShell>
+{#snippet layoutBody()}
   <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 flex-col items-center justify-center overflow-auto bg-content-bg px-4 py-8 sm:px-6 lg:px-8',
+      standalone ? 'h-screen' : 'min-h-[60vh]',
       className
     )}
   >
-    <!-- Logo -->
+    <!-- Logo. <header> so the logo isn't content outside every landmark
+         (axe: region); nested under a host <main> it simply loses the banner
+         role, which is correct. -->
     {#if showLogo}
-      <div class="mb-6">
+      <header class="mb-6">
         {#if logo}
           {@render logo()}
         {:else}
@@ -145,11 +157,16 @@
             <LogoMain variant="horizontal" color="dark" size="md" />
           </a>
         {/if}
-      </div>
+      </header>
     {/if}
 
-    <!-- Main Content -->
-    <main id="main-content" class="w-full max-w-md text-center">
+    <!-- Main Content. A second main landmark is invalid when the host layout
+         already renders one, so embedded mode uses a plain div. -->
+    <svelte:element
+      this={standalone ? 'main' : 'div'}
+      id={standalone ? 'main-content' : undefined}
+      class="w-full max-w-md text-center"
+    >
       {#if children}
         {@render children()}
       {:else}
@@ -197,7 +214,7 @@
           </div>
         {/if}
       {/if}
-    </main>
+    </svelte:element>
 
     <!-- Footer -->
     {#if footer}
@@ -206,4 +223,12 @@
       </footer>
     {/if}
   </div>
-</AppShell>
+{/snippet}
+
+{#if standalone}
+  <AppShell>
+    {@render layoutBody()}
+  </AppShell>
+{:else}
+  {@render layoutBody()}
+{/if}

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

@@ -46,6 +46,14 @@ interface Props {
     footer?: Snippet;
     /** Additional classes for the container */
     class?: string;
+    /**
+     * Whether this layout owns the whole page (default). Set false when
+     * rendering inside an app layout that already provides the page chrome -
+     * e.g. a SvelteKit +error.svelte inside a layout with its own
+     * <main id="main-content"> - so AppShell and the main landmark aren't
+     * duplicated (axe: landmark-no-duplicate-main / landmark-main-is-top-level).
+     */
+    standalone?: boolean;
     /** Main content (custom error content, replaces default display) */
     children?: Snippet;
 }

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

@@ -65,9 +65,11 @@
           {#each links as section}
             <div>
               {#if section.title}
-                <h3 class={cn('text-lg font-bold mb-4', isDark ? 'text-white' : 'text-foreground')}>
+                <!-- h2, not h3: most pages reach the footer with only an h1 in
+                     scope, so h3 skipped a level (axe: heading-order) -->
+                <h2 class={cn('text-lg font-bold mb-4', isDark ? 'text-white' : 'text-foreground')}>
                   {section.title}
-                </h3>
+                </h2>
               {/if}
               <ul class="mt-4 space-y-2">
                 {#each section.items as item}
@@ -127,7 +129,8 @@
         <LogoMain variant="horizontal" color={isDark ? 'light' : 'dark'} size="sm" />
       {/if}
 
-      <p class={cn('text-center text-sm', isDark ? 'text-gray-400' : 'text-muted-foreground')}>
+      <!-- gray-300, not gray-400: #9ca3af is 3.22:1 on the gray-600 footer -->
+      <p class={cn('text-center text-sm', isDark ? 'text-gray-300' : 'text-muted-foreground')}>
         {displayCopyright}
       </p>
     </div>

package/package.json

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