@classic-homes/theme-svelte 1.2.1 → 1.2.3

package/dist/lib/components/DataPanel.svelte

@@ -96,6 +96,12 @@
      * cover the tab. Defaults to 0.
      */
     tabInset?: number;
+    /**
+     * Thickness (px) of the collapsed tab — how far it protrudes into the page
+     * from its edge. The 56px default fits a title + subtitle; a single-line
+     * tab reads better around 36-40.
+     */
+    tabThickness?: number;
     /** Disable close button */
     disableClose?: boolean;
     /** Disable resize functionality */
@@ -141,6 +147,7 @@
     cardConfig = {},
     tabWidth = DEFAULT_TAB_WIDTH,
     tabInset = 0,
+    tabThickness = undefined,
     disableClose = false,
     disableResize = false,
     disableDrag = false,
@@ -1169,6 +1176,7 @@
       {disableClose}
       {tabWidth}
       {tabInset}
+      {tabThickness}
       onclick={handleTabClick}
       onClose={handleClose}
       offset={internalTabOffset}

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

@@ -44,6 +44,12 @@ interface Props {
      * cover the tab. Defaults to 0.
      */
     tabInset?: number;
+    /**
+     * Thickness (px) of the collapsed tab — how far it protrudes into the page
+     * from its edge. The 56px default fits a title + subtitle; a single-line
+     * tab reads better around 36-40.
+     */
+    tabThickness?: number;
     /** Disable close button */
     disableClose?: boolean;
     /** Disable resize functionality */

package/dist/lib/components/DataPanelTab.svelte

@@ -37,6 +37,13 @@
      * to 0 (flush with the edge).
      */
     tabInset?: number;
+    /**
+     * Thickness (px) of the tab — how far it protrudes into the page from its
+     * edge. The 56px default fits a title + subtitle; a single-line tab reads
+     * better around 36-40. Only applies to side tabs; top/bottom tabs stay
+     * content-height.
+     */
+    tabThickness?: number;
     /** Additional class */
     class?: string;
   }
@@ -52,6 +59,7 @@
     onOffsetChange,
     tabWidth = DEFAULT_TAB_WIDTH,
     tabInset = 0,
+    tabThickness = TAB_THICKNESS,
     class: className,
   }: Props = $props();
 
@@ -83,8 +91,10 @@
   // 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));
+  const tabTransform = $derived<string>(
+    getTabTransform(edge, tabWidth, effectiveOffset, tabThickness)
+  );
+  const tabBounds = $derived(getTabBounds(edge, tabWidth, tabThickness));
 
   // Non-reactive drag bookkeeping.
   let drag = { startX: 0, startY: 0, startOffset: 0, moved: false, pointerId: -1 };
@@ -210,7 +220,7 @@
   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; ` : ''
+    isVertical ? `height: ${tabThickness}px; ` : ''
   }transform-origin: 0 0; transform: ${tabTransform};`}
   onpointerdown={handlePointerDown}
   onpointermove={draggable ? handlePointerMove : undefined}
@@ -220,14 +230,34 @@
   <button
     type="button"
     aria-label={`Expand ${title} panel`}
-    class="flex min-w-0 flex-1 flex-col text-left leading-tight hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    class="flex min-w-0 flex-1 items-center gap-1.5 text-left leading-tight hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
     onclick={draggable ? undefined : onclick}
     onkeydown={handleExpandKeyDown}
   >
-    <span class="truncate text-sm font-semibold">{title}</span>
-    {#if subtitle}
-      <span class="truncate text-xs text-muted-foreground">{subtitle}</span>
-    {/if}
+    <!-- Expand chevron, pointing into the page (the direction the panel opens).
+         The chip rotates with its edge, so the pre-rotation "up" chevron lands
+         correctly on side edges; only a top tab needs flipping. -->
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      class={cn('shrink-0 text-muted-foreground', edge === 'top' && 'rotate-180')}
+    >
+      <path d="m18 15-6-6-6 6" />
+    </svg>
+    <span class="flex min-w-0 flex-col">
+      <span class="truncate text-sm font-semibold">{title}</span>
+      {#if subtitle}
+        <span class="truncate text-xs text-muted-foreground">{subtitle}</span>
+      {/if}
+    </span>
   </button>
 
   {#if !disableClose && onClose}

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

@@ -27,6 +27,13 @@ interface Props {
      * to 0 (flush with the edge).
      */
     tabInset?: number;
+    /**
+     * Thickness (px) of the tab — how far it protrudes into the page from its
+     * edge. The 56px default fits a title + subtitle; a single-line tab reads
+     * better around 36-40. Only applies to side tabs; top/bottom tabs stay
+     * content-height.
+     */
+    tabThickness?: number;
     /** Additional class */
     class?: string;
 }

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

@@ -176,7 +176,9 @@
             {@render illustration()}
           </div>
         {:else if statusCode}
-          <div class="mb-6">
+          <!-- Decorative watermark: the title carries the status; at 30%
+               opacity this can never meet text contrast, so hide it from AT -->
+          <div class="mb-6" aria-hidden="true">
             <span class="text-8xl font-bold text-muted-foreground/30 sm:text-9xl">
               {statusCode}
             </span>

package/package.json

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