terminoir 0.13.0 → 0.14.0

package/README.md

@@ -122,7 +122,7 @@ Import from **`terminoir`**:
 |-----------|--------|
 | `Button`, `IconButton` | Variants: primary, secondary, ghost, destructive, outline · sizes sm/md/lg · `Button href` renders a link |
 | `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` |
+| `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 |
 | `Panel` | Glass panel surface |
@@ -136,7 +136,7 @@ Import from **`terminoir`**:
 | `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 |
-| `EmptyState`, `Skeleton`, `Avatar`, `Kbd` | Presentation |
+| `EmptyState`, `Skeleton`, `Avatar`, `Kbd` | Presentation; `EmptyState framed={false}` inside a Panel or card |
 | `FontPicker` | UI + code font lists, lazy `@fontsource`, persisted per `appId` |
 | `NavIcon` | `name`, optional `color` — Font Awesome 6 (`fa-*` or plain ids like `inbox`); host app loads FA CSS |
 | `IconField` | `bind:value` icon id picker (`ICON_PICKER_OPTIONS`); `compact` opens the grid in a popover |

package/css/glass.css

@@ -157,7 +157,7 @@
 .glass-panel {
   background: var(--glass-panel-bg);
   border-radius: var(--radius-glass);
-  padding: var(--space-5);
+  padding: var(--space-4);
 }
 
 .glass-popover {

package/css/shell.css

@@ -4,12 +4,12 @@
  */
 
 .terminoir-shell {
-  --terminoir-sidebar-width: 260px;
+  --terminoir-sidebar-width: 236px;
   --terminoir-sidebar-min: 180px;
   --terminoir-sidebar-max: 420px;
   --terminoir-shell-duration: var(--duration-normal);
   display: grid;
-  grid-template-columns: var(--terminoir-sidebar-width, 260px) minmax(0, 1fr);
+  grid-template-columns: var(--terminoir-sidebar-width, 236px) minmax(0, 1fr);
   min-height: 100dvh;
   transition: grid-template-columns var(--terminoir-shell-duration) var(--ease-out-soft);
 }
@@ -34,12 +34,12 @@
 }
 
 .terminoir-shell__sidebar-inner {
-  width: var(--terminoir-sidebar-width, 260px);
+  width: var(--terminoir-sidebar-width, 236px);
   height: 100%;
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
-  padding: var(--space-4);
+  padding: var(--space-3);
   gap: var(--space-2);
 }
 
@@ -48,7 +48,7 @@
   align-items: center;
   gap: var(--space-2);
   width: 100%;
-  padding: 0.5rem 0.65rem;
+  padding: 0.35rem 0.6rem;
   border: 1px solid transparent;
   border-radius: var(--radius-control);
   background: transparent;

package/dist/components/AppShell.svelte

@@ -6,7 +6,7 @@
 
   let {
     appId = 'app',
-    defaultWidth = 260,
+    defaultWidth = 236,
     minWidth = 180,
     maxWidth = 420,
     fitViewport = false,

package/dist/components/Chip.svelte

@@ -10,6 +10,7 @@
     onremove,
     removeLabel = 'Remove',
     onclick,
+    pressed,
     class: className = '',
     children,
     ...rest
@@ -23,6 +24,8 @@
     removeLabel?: string;
     /** Makes the chip text a button (e.g. open the linked item). */
     onclick?: (event: MouseEvent) => void;
+    /** Makes the chip an on/off toggle (with `onclick`), e.g. a filter. Off chips are muted with a hollow dot. */
+    pressed?: boolean;
     class?: string;
     children?: import('svelte').Snippet;
   } & Record<string, unknown> = $props();
@@ -36,13 +39,19 @@
     tone === 'overdue' && 'terminoir-card__chip--overdue',
     tone === 'today' && 'terminoir-card__chip--today',
     tone === 'done' && 'terminoir-card__chip--done',
+    pressed === false && 'terminoir-chip--off',
     className,
   )}
   {...rest}
 >
-  {#if dot}<span class="terminoir-chip__dot" style:background={dot} aria-hidden="true"></span>{/if}
+  {#if dot}<span
+      class="terminoir-chip__dot"
+      style:background={pressed === false ? 'transparent' : dot}
+      style:box-shadow={pressed === false ? `inset 0 0 0 1.5px ${dot}` : undefined}
+      aria-hidden="true"
+    ></span>{/if}
   {#if onclick}
-    <button type="button" class="terminoir-chip__label terminoir-focusable" {onclick}>{@render children?.()}</button>
+    <button type="button" class="terminoir-chip__label terminoir-focusable" aria-pressed={pressed} {onclick}>{@render children?.()}</button>
   {:else}
     <span class="terminoir-chip__label">{@render children?.()}</span>
   {/if}
@@ -85,6 +94,16 @@
     cursor: pointer;
   }
   button.terminoir-chip__label:hover { text-decoration: underline; }
+  button.terminoir-chip__label[aria-pressed]:hover { text-decoration: none; }
+  .terminoir-chip:has(button[aria-pressed]):hover {
+    border-color: color-mix(in srgb, var(--foreground) 28%, transparent);
+  }
+  .terminoir-chip--off { color: var(--muted-foreground); }
+  .terminoir-chip--off:not(.terminoir-card__chip--overdue):not(.terminoir-card__chip--today):not(.terminoir-card__chip--done) {
+    background: transparent;
+    border-style: dashed;
+  }
+
   .terminoir-chip__remove {
     display: inline-flex;
     align-items: center;

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

@@ -9,6 +9,8 @@ type $$ComponentProps = {
     removeLabel?: string;
     /** Makes the chip text a button (e.g. open the linked item). */
     onclick?: (event: MouseEvent) => void;
+    /** Makes the chip an on/off toggle (with `onclick`), e.g. a filter. Off chips are muted with a hollow dot. */
+    pressed?: boolean;
     class?: string;
     children?: import('svelte').Snippet;
 } & Record<string, unknown>;

package/dist/components/DataTable.svelte

@@ -97,7 +97,7 @@
   th {
     position: sticky;
     top: 0;
-    padding: 0.55rem 0.85rem;
+    padding: 0.35rem 0.75rem;
     text-align: left;
     font-size: 0.6875rem;
     font-weight: 600;
@@ -109,7 +109,7 @@
     white-space: nowrap;
   }
   td {
-    padding: 0.55rem 0.85rem;
+    padding: 0.35rem 0.75rem;
     border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
     vertical-align: middle;
     max-width: 0;

package/dist/components/EmptyState.svelte

@@ -5,17 +5,20 @@
   let {
     title,
     description,
+    framed = true,
     class: className = '',
     children,
   }: {
     title: string;
     description?: string;
+    /** Glass panel around it. Set false inside a Panel or card, so the frames don't nest. */
+    framed?: boolean;
     class?: string;
     children?: Snippet;
   } = $props();
 </script>
 
-<div class={cn('terminoir-empty glass-panel', className)} role="status">
+<div class={cn('terminoir-empty', framed ? 'glass-panel' : 'terminoir-empty--bare', className)} role="status">
   <h2 class="terminoir-empty__title">{title}</h2>
   {#if description}<p class="terminoir-empty__desc">{description}</p>{/if}
   {@render children?.()}
@@ -23,17 +26,21 @@
 
 <style>
   .terminoir-empty {
-    padding: var(--space-8);
+    padding: var(--space-5) var(--space-4);
     text-align: center;
   }
 
+  .terminoir-empty--bare {
+    padding: var(--space-3) var(--space-2);
+  }
+
   .terminoir-empty__title {
     margin: 0 0 var(--space-2);
     font-size: 1.125rem;
   }
 
   .terminoir-empty__desc {
-    margin: 0 0 var(--space-4);
+    margin: 0;
     color: var(--muted-foreground);
   }
 </style>

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

@@ -2,6 +2,8 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     title: string;
     description?: string;
+    /** Glass panel around it. Set false inside a Panel or card, so the frames don't nest. */
+    framed?: boolean;
     class?: string;
     children?: Snippet;
 };

package/dist/components/ListItem.svelte

@@ -66,8 +66,8 @@
     align-items: center;
     gap: var(--space-3);
     width: 100%;
-    min-height: 2.75rem;
-    padding: 0.5rem 0.85rem;
+    min-height: 2.25rem;
+    padding: 0.35rem 0.75rem;
     box-sizing: border-box;
   }
   .terminoir-list-item__button {
@@ -113,7 +113,7 @@
     white-space: nowrap;
   }
   .terminoir-list-item__details {
-    padding: var(--space-1) 0.85rem var(--space-4) calc(0.85rem + 1.25rem + var(--space-3));
+    padding: var(--space-1) 0.75rem var(--space-3) calc(0.75rem + 1.25rem + var(--space-3));
   }
   .terminoir-list-item__trailing {
     display: inline-flex;

package/dist/components/Page.svelte

@@ -26,10 +26,10 @@
   .terminoir-page {
     display: flex;
     flex-direction: column;
-    gap: var(--space-6);
+    gap: var(--space-4);
     width: 100%;
     margin-inline: auto;
-    padding: var(--space-6) var(--space-6) var(--space-10);
+    padding: var(--space-4) var(--space-5) var(--space-8);
     box-sizing: border-box;
     min-width: 0;
   }
@@ -46,8 +46,8 @@
   }
   @media (max-width: 700px) {
     .terminoir-page:not(.terminoir-page--fill) {
-      padding: var(--space-4) var(--space-4) var(--space-8);
-      gap: var(--space-5);
+      padding: var(--space-3) var(--space-3) var(--space-6);
+      gap: var(--space-4);
     }
   }
 </style>

package/dist/components/Tabs.svelte

@@ -77,6 +77,6 @@
   }
 
   .terminoir-tabs__panel {
-    padding-top: var(--space-4);
+    padding-top: var(--space-3);
   }
 </style>

package/package.json

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