terminoir 0.13.0 → 0.13.1

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 |

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/package.json

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