terminoir 0.18.2 → 0.19.0

package/README.md

@@ -124,7 +124,7 @@ Import from **`terminoir`**:
 | `Input`, `Textarea`, `Select`, `Checkbox`, `Switch` | `hideLabel` (screen-reader only), `hint`, `error`, `quiet` (borderless until hover/focus, for inline property editing); `Input` `width` for toolbar fields |
 | `Chip`, `Badge` | Status tones; `Chip` `color` dot, `onclick`, removable `onremove`, on/off toggle `pressed` (filters) |
 | `StatusChip` | On/off status: green dot + `activeLabel`, or muted `inactiveLabel` (defaults Connected / Not connected) |
-| `Card`, `CardGrid` | Accent tint, badge, chips, progress, meta, hover lift; `CardGrid columns={2\|3\|4}` fixes the column count on wide screens (one column on phones), also for `Panel`s |
+| `Card`, `CardGrid` | Accent tint, badge, chips, progress, meta, hover lift; `CardGrid columns={2\|3\|4}` caps the column count; columns stay at least `--terminoir-card-grid-min` (20rem) wide, so a narrow grid drops to fewer. Also for `Panel`s |
 | `Panel` | Glass panel surface |
 | `Dialog` | Modal with focus trap-ish behavior + Escape |
 | `Popover`, `Tooltip` | Lightweight overlays |
@@ -132,7 +132,7 @@ Import from **`terminoir`**:
 | `Drawer` | Side sheet with title, close button and optional footer |
 | `CommandPalette` | ⌘/Ctrl+K (`hotkey`), grouped rows with icons and hints; `bind:query` + `filter={false}` + `loading` for async search; `footer` snippet |
 | `Toaster` + `toast()` | Action / undo via `action: { label, onClick }` |
-| `Tabs`, `SegmentedControl` | Tab panels (unique ids per instance); compact radio-group toggle |
+| `Tabs`, `SegmentedControl` | Tab panels (unique ids per instance, arrow keys, optional `icon` per tab, `orientation="vertical"` for a side column that becomes a row on phones); compact radio-group toggle |
 | `AppShell` | `header` + `sidebar` snippets; mobile drawer; `fitViewport` (main scrolls, for canvases), `flush`, `headerMode="mobile"`; `toggleSidebar()` / `closeMobileDrawer()` via `bind:this` |
 | `AppShellNavLink` | `href?`, `active`, nav row with active highlight |
 | `SettingsPage`, `SettingsSection` | Settings layout — intro + stacked glass section cards |

package/css/cards.css

@@ -9,13 +9,18 @@
   width: 100%;
 }
 
-.terminoir-card-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.terminoir-card-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.terminoir-card-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-
-@media (max-width: 700px) {
-  .terminoir-card-grid[class*='terminoir-card-grid--cols-'] { grid-template-columns: minmax(0, 1fr); }
+.terminoir-card-grid[class*='terminoir-card-grid--cols-'] {
+  /* N columns at most, each at least --terminoir-card-grid-min wide: drops to fewer columns when the grid
+     itself is narrow (a side column, a laptop), not only on phones. */
+  --terminoir-card-grid-min: 20rem;
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(min(100%, max(var(--terminoir-card-grid-min), calc((100% - (var(--terminoir-card-grid-cols) - 1) * var(--space-4)) / var(--terminoir-card-grid-cols)))), 1fr)
+  );
 }
+.terminoir-card-grid--cols-2 { --terminoir-card-grid-cols: 2; }
+.terminoir-card-grid--cols-3 { --terminoir-card-grid-cols: 3; }
+.terminoir-card-grid--cols-4 { --terminoir-card-grid-cols: 4; }
 
 .terminoir-card {
   position: relative;

package/dist/components/CardGrid.svelte

@@ -9,7 +9,8 @@
     ...rest
   }: {
     /**
-     * Fixed column count on wide screens (one column on phones), e.g. 2 for a pair of settings panels.
+     * At most this many columns, e.g. 2 for a pair of settings panels. Columns stay at least
+     * `--terminoir-card-grid-min` (20rem) wide, so a narrow grid (a phone, beside a side column) shows fewer.
      * Omit to fit as many 280px columns as the width allows.
      */
     columns?: 2 | 3 | 4;

package/dist/components/CardGrid.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     /**
-     * Fixed column count on wide screens (one column on phones), e.g. 2 for a pair of settings panels.
+     * At most this many columns, e.g. 2 for a pair of settings panels. Columns stay at least
+     * `--terminoir-card-grid-min` (20rem) wide, so a narrow grid (a phone, beside a side column) shows fewer.
      * Omit to fit as many 280px columns as the width allows.
      */
     columns?: 2 | 3 | 4;

package/dist/components/Tabs.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../utils/cn.js';
+  import NavIcon from './NavIcon.svelte';
 
   let {
     tabs = [],
     value = $bindable(''),
+    orientation = 'horizontal',
     class: className = '',
     children,
   }: {
-    tabs: Array<{ id: string; label: string }>;
+    /** `icon` is a Font Awesome name, as for `NavIcon`. */
+    tabs: Array<{ id: string; label: string; icon?: string }>;
     value?: string;
+    /** `vertical`: the tabs stack in a column beside the panel (a settings sidebar); a scrolling row on phones. */
+    orientation?: 'horizontal' | 'vertical';
     class?: string;
     children?: Snippet;
   } = $props();
@@ -19,10 +24,27 @@
   $effect.pre(() => {
     if (!value && tabs[0]) value = tabs[0].id;
   });
+
+  const PREVIOUS = new Set(['ArrowLeft', 'ArrowUp']);
+  const NEXT = new Set(['ArrowRight', 'ArrowDown']);
+
+  /** Arrow keys move between tabs (either axis, so it works for both orientations), Home/End jump to the ends. */
+  function onkeydown(event: KeyboardEvent) {
+    const index = tabs.findIndex((tab) => tab.id === value);
+    let next = -1;
+    if (PREVIOUS.has(event.key)) next = (index - 1 + tabs.length) % tabs.length;
+    else if (NEXT.has(event.key)) next = (index + 1) % tabs.length;
+    else if (event.key === 'Home') next = 0;
+    else if (event.key === 'End') next = tabs.length - 1;
+    if (next < 0) return;
+    event.preventDefault();
+    value = tabs[next].id;
+    (event.currentTarget as HTMLElement).querySelector<HTMLElement>(`#${CSS.escape(`${uid}-tab-${value}`)}`)?.focus();
+  }
 </script>
 
-<div class={cn('terminoir-tabs', className)}>
-  <div role="tablist" aria-orientation="horizontal" class="terminoir-tabs__list glass-chrome">
+<div class={cn('terminoir-tabs', orientation === 'vertical' && 'terminoir-tabs--vertical', className)}>
+  <div role="tablist" aria-orientation={orientation} class="terminoir-tabs__list glass-chrome" tabindex="-1" {onkeydown}>
     {#each tabs as tab (tab.id)}
       <button
         type="button"
@@ -30,9 +52,11 @@
         id={`${uid}-tab-${tab.id}`}
         aria-selected={value === tab.id}
         aria-controls={`${uid}-panel-${tab.id}`}
+        tabindex={value === tab.id ? 0 : -1}
         class="terminoir-tabs__trigger terminoir-focusable"
         onclick={() => (value = tab.id)}
       >
+        {#if tab.icon}<NavIcon name={tab.icon} />{/if}
         {tab.label}
       </button>
     {/each}
@@ -65,6 +89,9 @@
   }
 
   .terminoir-tabs__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
     flex-shrink: 0;
     white-space: nowrap;
     border: 0;
@@ -85,4 +112,34 @@
   .terminoir-tabs__panel {
     padding-top: var(--space-3);
   }
+
+  /* Vertical: a column of tabs beside the panel, kept in view while the panel scrolls. */
+  @media (min-width: 701px) {
+    .terminoir-tabs--vertical {
+      display: grid;
+      grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
+      gap: var(--space-5);
+      align-items: start;
+    }
+    .terminoir-tabs--vertical > .terminoir-tabs__list {
+      display: flex;
+      flex-direction: column;
+      position: sticky;
+      top: var(--space-3);
+      overflow: visible;
+    }
+    .terminoir-tabs--vertical .terminoir-tabs__trigger {
+      width: 100%;
+      text-align: left;
+    }
+    .terminoir-tabs--vertical .terminoir-tabs__trigger[aria-selected='true'] {
+      background: color-mix(in srgb, var(--primary) 14%, transparent);
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, var(--border));
+    }
+    .terminoir-tabs--vertical > .terminoir-tabs__panel {
+      grid-column: 2;
+      grid-row: 1;
+      padding-top: 0;
+    }
+  }
 </style>

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

@@ -1,10 +1,14 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
+    /** `icon` is a Font Awesome name, as for `NavIcon`. */
     tabs: Array<{
         id: string;
         label: string;
+        icon?: string;
     }>;
     value?: string;
+    /** `vertical`: the tabs stack in a column beside the panel (a settings sidebar); a scrolling row on phones. */
+    orientation?: 'horizontal' | 'vertical';
     class?: string;
     children?: Snippet;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminoir",
-  "version": "0.18.2",
+  "version": "0.19.0",
   "description": "Terminoir — Liquid Glass design tokens and Svelte 5 UI components.",
   "license": "Apache-2.0",
   "type": "module",