terminoir 0.18.2 → 0.20.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 |
@@ -148,7 +148,7 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
 
 | Component | Notes |
 |-----------|--------|
-| `Page`, `PageHeader`, `Section` | Readable page column (`narrow`/`default`/`wide`/`full`, `fill` for canvases); title + meta + actions; titled section with actions |
+| `Page`, `PageHeader`, `Section` | Readable page column (`narrow`/`default`/`wide`/`full`, `fill` for canvases, `fullHeight` to fill the stage height with padding); title + meta + actions; titled section with actions |
 | `PanelHeader` | Heading inside a `Panel`: `logo` (the image unframed; initials in a round avatar until `src`), `icon` or `leading` mark, title, description, `actions` (stacks under on phones) |
 | `Stack`, `Inline`, `Spacer`, `Centered` | Vertical / horizontal layout with `--space-*` gaps (`Inline fill` splits evenly, `collapse` stacks on phones); fill space; full-viewport centred column |
 | `Text`, `Prose`, `Disclosure` | Tone/size/weight text; long-form typography; collapsible details |
@@ -163,7 +163,7 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
 | `TitleInput`, `FileButton`, `RadioCards` | Borderless heading input; button that opens a file picker; card-style radio group |
 | `OptionsEditor` | Notion-style option list for select/status values: drag to reorder, click a name to rename, colour and delete from each row's menu, type to add; `ChipSelect` takes `oncreate` to add one from its search |
 | `EditableText` | A name you click to rename in place (Enter or click away saves, Escape cancels); `PageHeader`, `ListItem` and `PropertyRow` take `onrename` for the same |
-| `CalendarGrid` | Week (scrolling hours) and month grids; `CalendarEvent` with `muted`/`color`; helpers `calendarRange`, `shiftCalendar`, `eventsOn` |
+| `CalendarGrid` | Week (scrolling hours) and month grids; `fill` grows to the remaining height (e.g. in a `fullHeight` Page); `CalendarEvent` with `muted`/`color`; helpers `calendarRange`, `shiftCalendar`, `eventsOn` |
 | `CanvasStage`, `DocumentViewer` | Full-bleed canvas host with floating overlay and side panel; paged viewer with toolbar and highlight marks |
 | `AccentSwatches` | `bind:value` accent hex from `ACCENT_PALETTE` |
 | `GroupedList`, `SegmentBar` | Items in labelled groups with a colour dot and count, "Show n more" past `limit`, `collapsed` groups behind a toggle (e.g. finished items); a thin bar of proportional coloured segments |

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/CalendarGrid.svelte

@@ -21,6 +21,7 @@
     anchor,
     events,
     onEventClick,
+    fill = false,
     class: className = '',
   }: {
     mode?: CalendarMode;
@@ -28,6 +29,8 @@
     anchor: Date;
     events: CalendarEvent[];
     onEventClick?: (event: CalendarEvent) => void;
+    /** Grow to the remaining height of a flex column (e.g. a `fullHeight` Page) instead of a fixed height. */
+    fill?: boolean;
     class?: string;
   } = $props();
 
@@ -69,7 +72,7 @@
 {/snippet}
 
 {#if mode === 'week'}
-  <div class={cn('terminoir-cal terminoir-cal--week', className)}>
+  <div class={cn('terminoir-cal terminoir-cal--week', fill && 'terminoir-cal--fill', className)}>
     <div class="terminoir-cal__week-head">
       <div></div>
       {#each weekDays as day (day.getTime())}
@@ -109,7 +112,7 @@
     </div>
   </div>
 {:else}
-  <div class={cn('terminoir-cal terminoir-cal--month', className)}>
+  <div class={cn('terminoir-cal terminoir-cal--month', fill && 'terminoir-cal--fill', className)}>
     {#each weekDays as day (day.getTime())}
       <div class="terminoir-cal__dow">{day.toLocaleDateString(undefined, { weekday: 'short' })}</div>
     {/each}
@@ -217,6 +220,10 @@
   }
   .terminoir-cal__event:disabled { cursor: default; }
   .terminoir-cal__event--muted { opacity: 0.6; background: transparent; }
+  /* Fill: take the parent's free height; week hours scroll inside, month rows stretch. */
+  .terminoir-cal--fill { flex: 1 1 0; }
+  .terminoir-cal--week.terminoir-cal--fill { height: auto; }
+  .terminoir-cal--month.terminoir-cal--fill { grid-template-rows: auto; grid-auto-rows: 1fr; }
   .terminoir-cal__time { color: var(--muted-foreground); flex-shrink: 0; }
   .terminoir-cal__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
   .terminoir-cal--month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

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

@@ -5,6 +5,8 @@ type $$ComponentProps = {
     anchor: Date;
     events: CalendarEvent[];
     onEventClick?: (event: CalendarEvent) => void;
+    /** Grow to the remaining height of a flex column (e.g. a `fullHeight` Page) instead of a fixed height. */
+    fill?: boolean;
     class?: string;
 };
 declare const CalendarGrid: import("svelte").Component<$$ComponentProps, {}, "">;

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/Page.svelte

@@ -5,6 +5,7 @@
   let {
     width = 'default',
     fill = false,
+    fullHeight = false,
     class: className = '',
     children,
     ...rest
@@ -13,12 +14,14 @@
     width?: 'narrow' | 'default' | 'wide' | 'full';
     /** Edge-to-edge and full height with no padding, for canvases (graphs, viewers, calendars). */
     fill?: boolean;
+    /** At least the stage's height (keeps padding), so a growing child such as `CalendarGrid fill` takes the rest. */
+    fullHeight?: boolean;
     class?: string;
     children?: Snippet;
   } & Record<string, unknown> = $props();
 </script>
 
-<div class={cn('terminoir-page', `terminoir-page--${width}`, fill && 'terminoir-page--fill', className)} {...rest}>
+<div class={cn('terminoir-page', `terminoir-page--${width}`, fill && 'terminoir-page--fill', fullHeight && 'terminoir-page--full-height', className)} {...rest}>
   {@render children?.()}
 </div>
 
@@ -37,6 +40,7 @@
   .terminoir-page--default { max-width: 56rem; }
   .terminoir-page--wide { max-width: 80rem; }
   .terminoir-page--full { max-width: none; }
+  .terminoir-page--full-height { min-height: 100%; }
   .terminoir-page--fill {
     max-width: none;
     height: 100%;

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

@@ -4,6 +4,8 @@ type $$ComponentProps = {
     width?: 'narrow' | 'default' | 'wide' | 'full';
     /** Edge-to-edge and full height with no padding, for canvases (graphs, viewers, calendars). */
     fill?: boolean;
+    /** At least the stage's height (keeps padding), so a growing child such as `CalendarGrid fill` takes the rest. */
+    fullHeight?: boolean;
     class?: string;
     children?: Snippet;
 } & Record<string, unknown>;

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.20.0",
   "description": "Terminoir — Liquid Glass design tokens and Svelte 5 UI components.",
   "license": "Apache-2.0",
   "type": "module",