terminoir 0.5.1 → 0.7.0

package/README.md

@@ -152,11 +152,16 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
 | `NavSection` | Sidebar section with title and action |
 | `DataTable` | Columns, `cell` snippet, clickable rows, `hideOnMobile`, empty state |
 | `List`, `ListItem`, `DescriptionList`, `FormRow` | Rows with leading/trailing slots; key–value pairs; label-left form rows |
-| `SearchPicker` | Debounced async combobox (`search(q)`), keyboard navigation |
+| `SearchPicker` | Debounced async combobox (`search(q)`), keyboard navigation; grows to fill a row after chips |
+| `PropertyRow` | Compact icon + label row for inline-edited values (record properties); hover highlights the row |
+| `ChipSelect`, `DateField` | Value shown as a coloured `Chip` that opens a grouped option list (`ChipSelectOption`, `ChipSelectGroup`); date shown as "Today" / "Tomorrow" / weekday / "Nov 12" (`dayLabel`), `deadline` tints past and today, opens the native picker, Backspace clears |
 | `TitleInput`, `FileButton`, `RadioCards` | Borderless heading input; button that opens a file picker; card-style radio group |
 | `CalendarGrid` | Week (scrolling hours) and month grids; `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 |
+
+`labelColor(name)` resolves palette names (`green`, `gray`…, see `LABEL_PALETTE`) or passes CSS colours through; `Chip`, `GroupedList` and `SegmentBar` share it.
 
 ### Utilities (typed, tree-shakeable)
 

package/dist/components/Chip.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { cn } from '../utils/cn.js';
+  import { labelColor } from '../utils/palette.js';
 
   type ChipTone = 'default' | 'overdue' | 'today' | 'done';
 
@@ -26,8 +27,7 @@
     children?: import('svelte').Snippet;
   } & Record<string, unknown> = $props();
 
-  const PALETTE = new Set(['grey', 'gray', 'blue', 'green', 'red', 'yellow', 'orange', 'purple', 'pink', 'teal']);
-  const dot = $derived(color ? (PALETTE.has(color) ? `var(--chip-${color === 'gray' ? 'grey' : color})` : color) : undefined);
+  const dot = $derived(labelColor(color));
 </script>
 
 <span
@@ -53,15 +53,6 @@
 
 <style>
   .terminoir-chip {
-    --chip-grey: #8b8f98;
-    --chip-blue: #5b8def;
-    --chip-green: #3fae6a;
-    --chip-red: #e5534b;
-    --chip-yellow: #d4a72c;
-    --chip-orange: #e0823d;
-    --chip-purple: #9b6bdf;
-    --chip-pink: #d9669f;
-    --chip-teal: #2fa7a0;
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;

package/dist/components/ChipSelect.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import type { ChipSelectGroup, ChipSelectOption } from '../utils/componentTypes.js';
+  import { moveIndex } from '../utils/listNav.js';
+  import Chip from './Chip.svelte';
+  import NavIcon from './NavIcon.svelte';
+
+  let {
+    label,
+    value = '',
+    options,
+    groups = [],
+    placeholder = 'Empty',
+    clearable = true,
+    onchange,
+    class: className = '',
+  }: {
+    /** Accessible name, e.g. the property name. */
+    label: string;
+    /** Selected option id; empty string for none. */
+    value?: string;
+    options: ChipSelectOption[];
+    /** Headings, in order, for options with a `group`; ungrouped options come first. */
+    groups?: ChipSelectGroup[];
+    placeholder?: string;
+    /** Offer a "Clear" entry when something is selected. */
+    clearable?: boolean;
+    onchange: (value: string) => void;
+    class?: string;
+  } = $props();
+
+  const uid = $props.id();
+  const CLEAR = { id: '', label: 'Clear' } satisfies ChipSelectOption;
+
+  let open = $state(false);
+  let active = $state(-1);
+  let root: HTMLDivElement | undefined = $state();
+  let trigger: HTMLButtonElement | undefined = $state();
+  let list: HTMLUListElement | undefined = $state();
+
+  const selected = $derived(options.find((o) => o.id === value));
+  const sections = $derived([
+    { id: '', label: '', options: options.filter((o) => !o.group || !groups.some((g) => g.id === o.group)) },
+    ...groups.map((g) => ({ ...g, options: options.filter((o) => o.group === g.id) })),
+  ].filter((section) => section.options.length));
+  const choices = $derived([...sections.flatMap((s) => s.options), ...(clearable && selected ? [CLEAR] : [])]);
+
+  async function show() {
+    open = true;
+    active = Math.max(0, choices.findIndex((o) => o.id === value));
+    await tick();
+    list?.focus();
+  }
+
+  function hide() {
+    open = false;
+    trigger?.focus();
+  }
+
+  function choose(option: ChipSelectOption | undefined) {
+    if (!option) return;
+    if (option.id !== value) onchange(option.id);
+    hide();
+  }
+
+  function onTriggerKeydown(event: KeyboardEvent) {
+    if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+    event.preventDefault();
+    void show();
+  }
+
+  function onListKeydown(event: KeyboardEvent) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      active = moveIndex(active, event.key === 'ArrowDown' ? 1 : -1, choices.length);
+    } else if (event.key === 'Enter' || event.key === ' ') {
+      choose(choices[active]);
+    } else if (event.key === 'Escape') {
+      hide();
+    } else if (event.key === 'Tab') {
+      open = false;
+      return;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  $effect(() => {
+    if (!open) return;
+    const onPointer = (event: PointerEvent) => {
+      if (root && !root.contains(event.target as Node)) open = false;
+    };
+    document.addEventListener('pointerdown', onPointer);
+    return () => document.removeEventListener('pointerdown', onPointer);
+  });
+</script>
+
+{#snippet item(option: ChipSelectOption)}
+  {@const index = choices.indexOf(option)}
+  <!-- Listbox pattern: focus stays on the list, which handles arrow keys and Enter. -->
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <li
+    id={`${uid}-opt-${index}`}
+    role="option"
+    aria-selected={option.id === value}
+    class="terminoir-chip-select__option"
+    class:terminoir-chip-select__option--active={index === active}
+    onpointermove={() => (active = index)}
+    onclick={() => choose(option)}
+  >
+    {#if option === CLEAR}
+      <span class="terminoir-chip-select__clear"><NavIcon name="xmark" /> {CLEAR.label}</span>
+    {:else}
+      <Chip color={option.color ?? 'grey'}>{option.label}</Chip>
+      {#if option.id === value}<NavIcon name="check" class="terminoir-chip-select__check" />{/if}
+    {/if}
+  </li>
+{/snippet}
+
+<div bind:this={root} class={cn('terminoir-chip-select', className)}>
+  <button
+    bind:this={trigger}
+    type="button"
+    class="terminoir-chip-select__trigger terminoir-focusable"
+    aria-haspopup="listbox"
+    aria-expanded={open}
+    aria-label={`${label}: ${selected?.label ?? placeholder}`}
+    onclick={() => (open ? hide() : void show())}
+    onkeydown={onTriggerKeydown}
+  >
+    {#if selected}
+      <Chip color={selected.color ?? 'grey'}>{selected.label}</Chip>
+    {:else}
+      <span class="terminoir-chip-select__placeholder">{placeholder}</span>
+    {/if}
+  </button>
+  {#if open}
+    <ul
+      bind:this={list}
+      class="terminoir-chip-select__list glass-popover terminoir-focusable"
+      role="listbox"
+      aria-label={label}
+      aria-activedescendant={active >= 0 ? `${uid}-opt-${active}` : undefined}
+      tabindex="-1"
+      onkeydown={onListKeydown}
+    >
+      {#each sections as section (section.id)}
+        {#if section.label}<li role="presentation" class="terminoir-chip-select__heading">{section.label}</li>{/if}
+        {#each section.options as option (option.id)}{@render item(option)}{/each}
+      {/each}
+      {#if clearable && selected}{@render item(CLEAR)}{/if}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .terminoir-chip-select {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+  }
+  .terminoir-chip-select__trigger {
+    display: inline-flex;
+    align-items: center;
+    width: max-content;
+    max-width: 100%;
+    min-height: 1.85rem;
+    padding: 0.15rem 0.35rem;
+    border: 0;
+    border-radius: var(--radius-control);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  .terminoir-chip-select__trigger:hover {
+    background: color-mix(in srgb, var(--foreground) 6%, transparent);
+  }
+  .terminoir-chip-select__placeholder {
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+    opacity: 0.7;
+  }
+  .terminoir-chip-select__list {
+    position: absolute;
+    top: calc(100% + var(--space-1));
+    left: 0;
+    z-index: 40;
+    min-width: 12rem;
+    max-height: 18rem;
+    overflow-y: auto;
+    margin: 0;
+    padding: var(--space-1);
+    list-style: none;
+  }
+  .terminoir-chip-select__heading {
+    padding: 0.5rem 0.6rem 0.25rem;
+    font-size: 0.6875rem;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+  }
+  .terminoir-chip-select__option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: 0.35rem 0.5rem;
+    border-radius: calc(var(--radius-control) - 0.2rem);
+    cursor: pointer;
+  }
+  .terminoir-chip-select__option--active {
+    background: color-mix(in srgb, var(--foreground) 8%, transparent);
+  }
+  .terminoir-chip-select__option :global(.terminoir-chip-select__check) {
+    font-size: 0.75rem;
+    color: var(--muted-foreground);
+  }
+  .terminoir-chip-select__clear {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: 0.8125rem;
+    color: var(--muted-foreground);
+  }
+</style>

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

@@ -0,0 +1,18 @@
+import type { ChipSelectGroup, ChipSelectOption } from '../utils/componentTypes.js';
+type $$ComponentProps = {
+    /** Accessible name, e.g. the property name. */
+    label: string;
+    /** Selected option id; empty string for none. */
+    value?: string;
+    options: ChipSelectOption[];
+    /** Headings, in order, for options with a `group`; ungrouped options come first. */
+    groups?: ChipSelectGroup[];
+    placeholder?: string;
+    /** Offer a "Clear" entry when something is selected. */
+    clearable?: boolean;
+    onchange: (value: string) => void;
+    class?: string;
+};
+declare const ChipSelect: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChipSelect = ReturnType<typeof ChipSelect>;
+export default ChipSelect;

package/dist/components/DateField.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+  import { dayLabel, dayUrgency, parseYmd } from '../utils/dayLabel.js';
+  import Chip from './Chip.svelte';
+
+  let {
+    label,
+    value = '',
+    deadline = false,
+    placeholder = 'Empty',
+    onchange,
+    class: className = '',
+  }: {
+    /** Accessible name, e.g. the property name. */
+    label: string;
+    /** `YYYY-MM-DD`, or empty for no date. */
+    value?: string;
+    /** Colour past dates as overdue and today as due today. */
+    deadline?: boolean;
+    placeholder?: string;
+    /** Called with `YYYY-MM-DD`, or an empty string when cleared. */
+    onchange: (value: string) => void;
+    class?: string;
+  } = $props();
+
+  let picker: HTMLInputElement | undefined = $state();
+
+  const date = $derived(parseYmd(value));
+  const tone = $derived.by(() => {
+    if (!deadline || !date) return 'default';
+    const urgency = dayUrgency(date);
+    return urgency === 'past' ? 'overdue' : urgency === 'today' ? 'today' : 'default';
+  });
+  const fullDate = $derived(date?.toLocaleDateString(undefined, { dateStyle: 'full' }) ?? '');
+
+  function openPicker() {
+    if (!picker) return;
+    try {
+      picker.showPicker();
+    } catch {
+      picker.focus();
+    }
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    if ((event.key === 'Backspace' || event.key === 'Delete') && value) {
+      event.preventDefault();
+      onchange('');
+    }
+  }
+</script>
+
+<span class={cn('terminoir-date-field', className)}>
+  <button
+    type="button"
+    class="terminoir-date-field__trigger terminoir-focusable"
+    aria-label={`${label}: ${fullDate || placeholder}`}
+    title={fullDate || undefined}
+    onclick={openPicker}
+    onkeydown={onKeydown}
+  >
+    {#if date}
+      <Chip {tone}>{dayLabel(date)}</Chip>
+    {:else}
+      <span class="terminoir-date-field__placeholder">{placeholder}</span>
+    {/if}
+  </button>
+  {#if date}
+    <button type="button" class="terminoir-date-field__clear terminoir-focusable" aria-label={`Clear ${label}`} onclick={() => onchange('')}>×</button>
+  {/if}
+  <input
+    bind:this={picker}
+    class="terminoir-date-field__picker"
+    type="date"
+    tabindex="-1"
+    aria-hidden="true"
+    {value}
+    onchange={(event) => onchange(event.currentTarget.value)}
+  />
+</span>
+
+<style>
+  .terminoir-date-field {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+  }
+  .terminoir-date-field__trigger {
+    display: inline-flex;
+    align-items: center;
+    width: max-content;
+    min-height: 1.85rem;
+    padding: 0.15rem 0.35rem;
+    border: 0;
+    border-radius: var(--radius-control);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  .terminoir-date-field__trigger:hover {
+    background: color-mix(in srgb, var(--foreground) 6%, transparent);
+  }
+  .terminoir-date-field__placeholder {
+    font-size: 0.875rem;
+    color: var(--muted-foreground);
+    opacity: 0.7;
+  }
+  .terminoir-date-field__clear {
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--muted-foreground);
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 120ms ease;
+  }
+  .terminoir-date-field:hover .terminoir-date-field__clear,
+  .terminoir-date-field__clear:focus-visible {
+    opacity: 1;
+  }
+  .terminoir-date-field__clear:hover {
+    color: var(--foreground);
+    background: color-mix(in srgb, var(--foreground) 10%, transparent);
+  }
+  /* Kept rendered (not display:none) so showPicker() can anchor the native picker under the trigger. */
+  .terminoir-date-field__picker {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    /** Accessible name, e.g. the property name. */
+    label: string;
+    /** `YYYY-MM-DD`, or empty for no date. */
+    value?: string;
+    /** Colour past dates as overdue and today as due today. */
+    deadline?: boolean;
+    placeholder?: string;
+    /** Called with `YYYY-MM-DD`, or an empty string when cleared. */
+    onchange: (value: string) => void;
+    class?: string;
+};
+declare const DateField: import("svelte").Component<$$ComponentProps, {}, "">;
+type DateField = ReturnType<typeof DateField>;
+export default DateField;

package/dist/components/GroupedList.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+  import { labelColor } from '../utils/palette.js';
+  import Disclosure from './Disclosure.svelte';
+  import List from './List.svelte';
+  import ListItem from './ListItem.svelte';
+
+  export type GroupedListItem = {
+    id: string;
+    title: string;
+    /** Short text on the right, e.g. a date. */
+    meta?: string;
+    metaTone?: 'muted' | 'danger' | 'warning';
+  };
+
+  export type GroupedListGroup = {
+    key: string;
+    label: string;
+    /** Palette name or CSS colour for the heading dot. */
+    color?: string | null;
+    /** Folded behind a "Label (n)" toggle, e.g. finished items. */
+    collapsed?: boolean;
+    items: GroupedListItem[];
+  };
+
+  let {
+    groups,
+    label,
+    limit = 6,
+    onselect,
+    class: className = '',
+  }: {
+    /** Shown in order; empty groups are skipped. One group with an empty label renders as a plain list. */
+    groups: GroupedListGroup[];
+    /** Accessible name for the lists. */
+    label: string;
+    /** Rows per open group before a "Show n more" button. */
+    limit?: number;
+    onselect?: (id: string) => void;
+    class?: string;
+  } = $props();
+
+  let expanded = $state<Record<string, boolean>>({});
+
+  const visible = $derived(groups.filter((g) => g.items.length > 0));
+  const open = $derived(visible.filter((g) => !g.collapsed));
+  const folded = $derived(visible.filter((g) => g.collapsed));
+
+  function rows(group: GroupedListGroup): GroupedListItem[] {
+    return expanded[group.key] || group.items.length <= limit + 1 ? group.items : group.items.slice(0, limit);
+  }
+</script>
+
+{#snippet items(group: GroupedListGroup, all: boolean)}
+  <List label={group.label ? `${label}: ${group.label}` : label} bordered={false}>
+    {#each all ? group.items : rows(group) as item (item.id)}
+      <ListItem title={item.title} onclick={onselect ? () => onselect(item.id) : undefined}>
+        {#snippet trailing()}
+          {#if item.meta}
+            <span class={cn('terminoir-grouped-list__meta', item.metaTone && `terminoir-grouped-list__meta--${item.metaTone}`)}>{item.meta}</span>
+          {/if}
+        {/snippet}
+      </ListItem>
+    {/each}
+  </List>
+  {#if !all && rows(group).length < group.items.length}
+    <button type="button" class="terminoir-grouped-list__more terminoir-focusable" onclick={() => (expanded[group.key] = true)}>
+      Show {group.items.length - rows(group).length} more
+    </button>
+  {/if}
+{/snippet}
+
+<div class={cn('terminoir-grouped-list', className)}>
+  {#each open as group (group.key)}
+    <div class="terminoir-grouped-list__group">
+      {#if group.label}
+        <div class="terminoir-grouped-list__heading">
+          {#if labelColor(group.color)}<span class="terminoir-grouped-list__dot" style:background={labelColor(group.color)} aria-hidden="true"></span>{/if}
+          <span>{group.label}</span>
+          <span class="terminoir-grouped-list__count">{group.items.length}</span>
+        </div>
+      {/if}
+      {@render items(group, false)}
+    </div>
+  {/each}
+  {#each folded as group (group.key)}
+    <Disclosure summary={`${group.label} (${group.items.length})`}>
+      {@render items(group, true)}
+    </Disclosure>
+  {/each}
+</div>
+
+<style>
+  .terminoir-grouped-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    min-width: 0;
+  }
+  .terminoir-grouped-list__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+  .terminoir-grouped-list__heading {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: var(--muted-foreground);
+  }
+  .terminoir-grouped-list__dot {
+    width: 0.45rem;
+    height: 0.45rem;
+    border-radius: 999px;
+    flex-shrink: 0;
+  }
+  .terminoir-grouped-list__count {
+    font-variant-numeric: tabular-nums;
+    opacity: 0.75;
+  }
+  .terminoir-grouped-list__group :global(.terminoir-list-item__row) {
+    min-height: 2.25rem;
+    padding: 0.3rem 0.5rem;
+    border-radius: var(--radius-control);
+  }
+  .terminoir-grouped-list__meta {
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--muted-foreground);
+    white-space: nowrap;
+  }
+  .terminoir-grouped-list__meta--danger { color: var(--destructive); }
+  .terminoir-grouped-list__meta--warning { color: var(--status-today); }
+  .terminoir-grouped-list__more {
+    align-self: flex-start;
+    border: 0;
+    background: transparent;
+    color: var(--muted-foreground);
+    font: inherit;
+    font-size: 0.8125rem;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    border-radius: var(--radius-control);
+  }
+  .terminoir-grouped-list__more:hover { color: var(--foreground); }
+</style>

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

@@ -0,0 +1,29 @@
+export type GroupedListItem = {
+    id: string;
+    title: string;
+    /** Short text on the right, e.g. a date. */
+    meta?: string;
+    metaTone?: 'muted' | 'danger' | 'warning';
+};
+export type GroupedListGroup = {
+    key: string;
+    label: string;
+    /** Palette name or CSS colour for the heading dot. */
+    color?: string | null;
+    /** Folded behind a "Label (n)" toggle, e.g. finished items. */
+    collapsed?: boolean;
+    items: GroupedListItem[];
+};
+type $$ComponentProps = {
+    /** Shown in order; empty groups are skipped. One group with an empty label renders as a plain list. */
+    groups: GroupedListGroup[];
+    /** Accessible name for the lists. */
+    label: string;
+    /** Rows per open group before a "Show n more" button. */
+    limit?: number;
+    onselect?: (id: string) => void;
+    class?: string;
+};
+declare const GroupedList: import("svelte").Component<$$ComponentProps, {}, "">;
+type GroupedList = ReturnType<typeof GroupedList>;
+export default GroupedList;

package/dist/components/PropertyRow.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import NavIcon from './NavIcon.svelte';
+
+  let {
+    label,
+    icon,
+    class: className = '',
+    children,
+  }: {
+    label: string;
+    /** NavIcon name hinting at the value's kind, e.g. `calendar`. */
+    icon?: string;
+    class?: string;
+    /** One value control, rendered with its own label hidden. */
+    children?: Snippet;
+  } = $props();
+</script>
+
+<div class={cn('terminoir-property-row', className)}>
+  <span class="terminoir-property-row__label" title={label}>
+    {#if icon}<NavIcon name={icon} />{/if}
+    <span class="terminoir-property-row__text">{label}</span>
+  </span>
+  <div class="terminoir-property-row__value">{@render children?.()}</div>
+</div>
+
+<style>
+  .terminoir-property-row {
+    display: grid;
+    grid-template-columns: minmax(6.5rem, 9.5rem) minmax(0, 1fr);
+    align-items: center;
+    gap: var(--space-3);
+    min-height: 2.25rem;
+    padding-inline: var(--space-2);
+    margin-inline: calc(-1 * var(--space-2));
+    border-radius: var(--radius-control);
+    transition: background 120ms ease;
+  }
+  .terminoir-property-row:hover,
+  .terminoir-property-row:focus-within {
+    background: color-mix(in srgb, var(--foreground) 4%, transparent);
+  }
+  .terminoir-property-row__label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+    font-size: 0.8125rem;
+    color: var(--muted-foreground);
+  }
+  .terminoir-property-row__label :global(i) {
+    width: 1rem;
+    flex-shrink: 0;
+    text-align: center;
+    font-size: 0.75rem;
+    opacity: 0.75;
+  }
+  .terminoir-property-row__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .terminoir-property-row__value {
+    min-width: 0;
+  }
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label: string;
+    /** NavIcon name hinting at the value's kind, e.g. `calendar`. */
+    icon?: string;
+    class?: string;
+    /** One value control, rendered with its own label hidden. */
+    children?: Snippet;
+};
+declare const PropertyRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type PropertyRow = ReturnType<typeof PropertyRow>;
+export default PropertyRow;

package/dist/components/SearchPicker.svelte

@@ -136,6 +136,8 @@
 </div>
 
 <style>
+  /* In a row (e.g. after selected chips) the search box takes the remaining width. */
+  .terminoir-picker { flex: 1 1 8rem; min-width: 8rem; }
   .terminoir-picker__anchor { position: relative; }
   .terminoir-picker__list {
     position: absolute;

package/dist/components/SegmentBar.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+  import { labelColor } from '../utils/palette.js';
+
+  export type Segment = { label: string; count: number; color?: string | null };
+
+  let {
+    segments,
+    label,
+    class: className = '',
+  }: {
+    /** In order; zero counts are skipped. Colours are palette names or CSS colours. */
+    segments: Segment[];
+    /** Accessible name, e.g. "Status of 30 linked tasks". */
+    label: string;
+    class?: string;
+  } = $props();
+
+  const total = $derived(segments.reduce((sum, s) => sum + Math.max(0, s.count), 0));
+  const shown = $derived(segments.filter((s) => s.count > 0));
+  const summary = $derived(shown.map((s) => `${s.label} ${s.count}`).join(', '));
+</script>
+
+{#if total > 0}
+  <div class={cn('terminoir-segment-bar', className)} role="img" aria-label={`${label}: ${summary}`}>
+    {#each shown as segment (segment.label)}
+      <span
+        class="terminoir-segment-bar__part"
+        style:flex-grow={segment.count}
+        style:background={labelColor(segment.color) ?? 'color-mix(in srgb, var(--foreground) 22%, transparent)'}
+        title={`${segment.label}: ${segment.count}`}
+      ></span>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  .terminoir-segment-bar {
+    display: flex;
+    gap: 2px;
+    width: 100%;
+    height: 0.375rem;
+    border-radius: 999px;
+    overflow: hidden;
+  }
+  .terminoir-segment-bar__part {
+    flex-basis: 0;
+    min-width: 0.375rem;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+export type Segment = {
+    label: string;
+    count: number;
+    color?: string | null;
+};
+type $$ComponentProps = {
+    /** In order; zero counts are skipped. Colours are palette names or CSS colours. */
+    segments: Segment[];
+    /** Accessible name, e.g. "Status of 30 linked tasks". */
+    label: string;
+    class?: string;
+};
+declare const SegmentBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type SegmentBar = ReturnType<typeof SegmentBar>;
+export default SegmentBar;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { cn } from './utils/cn.js';
 export { ACCENT_PALETTE, accentFromString, type AccentColor } from './utils/accent.js';
+export { LABEL_PALETTE, labelColor, type LabelColor } from './utils/palette.js';
 export { ICON_PICKER_OPTIONS, NAV_ICON_NAMES, iconClassName, type IconPickerId } from './utils/icons.js';
 export { readStorage, writeStorage, namespacedKey } from './utils/storage.js';
 export { FONT_REGISTRY, FONT_PICKER_UI_OPTIONS, UI_FONT_OPTIONS, CODE_FONT_OPTIONS, applyFontPreferences, loadFontPreferences, persistFontPreferences, getFontOption, type FontOption, type FontPreferences, type FontCategory, } from './utils/fonts.js';
@@ -45,6 +46,10 @@ export { default as Stack } from './components/Stack.svelte';
 export { default as Inline } from './components/Inline.svelte';
 export { default as Text } from './components/Text.svelte';
 export { default as Disclosure } from './components/Disclosure.svelte';
+export { default as GroupedList } from './components/GroupedList.svelte';
+export type { GroupedListGroup, GroupedListItem } from './components/GroupedList.svelte';
+export { default as SegmentBar } from './components/SegmentBar.svelte';
+export type { Segment } from './components/SegmentBar.svelte';
 export { default as NavSection } from './components/NavSection.svelte';
 export { default as Spacer } from './components/Spacer.svelte';
 export { default as Centered } from './components/Centered.svelte';
@@ -60,6 +65,11 @@ export { default as ListItem } from './components/ListItem.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export type { DescriptionItem } from './utils/componentTypes.js';
 export { default as FormRow } from './components/FormRow.svelte';
+export { default as PropertyRow } from './components/PropertyRow.svelte';
+export { default as ChipSelect } from './components/ChipSelect.svelte';
+export type { ChipSelectGroup, ChipSelectOption } from './utils/componentTypes.js';
+export { default as DateField } from './components/DateField.svelte';
+export { dayLabel, dayUrgency, parseYmd, type DayUrgency } from './utils/dayLabel.js';
 export { default as SearchPicker } from './components/SearchPicker.svelte';
 export { default as FileButton } from './components/FileButton.svelte';
 export { default as TitleInput } from './components/TitleInput.svelte';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { cn } from './utils/cn.js';
 export { ACCENT_PALETTE, accentFromString } from './utils/accent.js';
+export { LABEL_PALETTE, labelColor } from './utils/palette.js';
 export { ICON_PICKER_OPTIONS, NAV_ICON_NAMES, iconClassName } from './utils/icons.js';
 export { readStorage, writeStorage, namespacedKey } from './utils/storage.js';
 export { FONT_REGISTRY, FONT_PICKER_UI_OPTIONS, UI_FONT_OPTIONS, CODE_FONT_OPTIONS, applyFontPreferences, loadFontPreferences, persistFontPreferences, getFontOption, } from './utils/fonts.js';
@@ -44,6 +45,8 @@ export { default as Stack } from './components/Stack.svelte';
 export { default as Inline } from './components/Inline.svelte';
 export { default as Text } from './components/Text.svelte';
 export { default as Disclosure } from './components/Disclosure.svelte';
+export { default as GroupedList } from './components/GroupedList.svelte';
+export { default as SegmentBar } from './components/SegmentBar.svelte';
 export { default as NavSection } from './components/NavSection.svelte';
 export { default as Spacer } from './components/Spacer.svelte';
 export { default as Centered } from './components/Centered.svelte';
@@ -57,7 +60,11 @@ export { default as List } from './components/List.svelte';
 export { default as ListItem } from './components/ListItem.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export { default as FormRow } from './components/FormRow.svelte';
+export { default as PropertyRow } from './components/PropertyRow.svelte';
 // Inputs
+export { default as ChipSelect } from './components/ChipSelect.svelte';
+export { default as DateField } from './components/DateField.svelte';
+export { dayLabel, dayUrgency, parseYmd } from './utils/dayLabel.js';
 export { default as SearchPicker } from './components/SearchPicker.svelte';
 export { default as FileButton } from './components/FileButton.svelte';
 export { default as TitleInput } from './components/TitleInput.svelte';

package/dist/utils/componentTypes.d.ts

@@ -15,6 +15,18 @@ export type PickerOption = {
     icon?: string;
     iconColor?: string;
 };
+export type ChipSelectOption = {
+    id: string;
+    label: string;
+    /** Dot colour (palette name or CSS colour); grey when unset. */
+    color?: string;
+    /** Id of the `ChipSelectGroup` heading it sits under. */
+    group?: string;
+};
+export type ChipSelectGroup = {
+    id: string;
+    label: string;
+};
 export type RadioCardOption = {
     value: string;
     label: string;

package/dist/utils/dayLabel.d.ts

@@ -0,0 +1,7 @@
+/** How far a day is from today, for colouring deadlines. */
+export type DayUrgency = 'past' | 'today' | 'future';
+/** Local-midnight Date for `YYYY-MM-DD`, or null when the text is not a calendar date. */
+export declare function parseYmd(ymd: string): Date | null;
+/** "Today", "Tomorrow", "Yesterday", a weekday within the next week, else "Nov 12" (plus the year when it differs). */
+export declare function dayLabel(date: Date, today?: Date): string;
+export declare function dayUrgency(date: Date, today?: Date): DayUrgency;

package/dist/utils/dayLabel.js

@@ -0,0 +1,35 @@
+import { addDays, sameDay, startOfDay } from './calendar.js';
+const DAYS_SHOWN_AS_WEEKDAY = 6;
+const YMD = /^(\d{4})-(\d{2})-(\d{2})$/;
+/** Local-midnight Date for `YYYY-MM-DD`, or null when the text is not a calendar date. */
+export function parseYmd(ymd) {
+    const match = YMD.exec(ymd.trim());
+    if (!match)
+        return null;
+    const [, year, month, day] = match.map(Number);
+    const date = new Date(year, month - 1, day);
+    return date.getMonth() === month - 1 && date.getDate() === day ? date : null;
+}
+/** "Today", "Tomorrow", "Yesterday", a weekday within the next week, else "Nov 12" (plus the year when it differs). */
+export function dayLabel(date, today = new Date()) {
+    const day = startOfDay(date);
+    const now = startOfDay(today);
+    if (sameDay(day, now))
+        return 'Today';
+    if (sameDay(day, addDays(now, 1)))
+        return 'Tomorrow';
+    if (sameDay(day, addDays(now, -1)))
+        return 'Yesterday';
+    if (day > now && day <= addDays(now, DAYS_SHOWN_AS_WEEKDAY)) {
+        return day.toLocaleDateString(undefined, { weekday: 'long' });
+    }
+    const withYear = day.getFullYear() !== now.getFullYear();
+    return day.toLocaleDateString(undefined, { month: 'short', day: 'numeric', ...(withYear && { year: 'numeric' }) });
+}
+export function dayUrgency(date, today = new Date()) {
+    const day = startOfDay(date);
+    const now = startOfDay(today);
+    if (sameDay(day, now))
+        return 'today';
+    return day < now ? 'past' : 'future';
+}

package/dist/utils/palette.d.ts

@@ -0,0 +1,15 @@
+/** Named colours for user-chosen labels (select options, tags). Shared by Chip, GroupedList, SegmentBar. */
+export declare const LABEL_PALETTE: {
+    readonly grey: "#8b8f98";
+    readonly blue: "#5b8def";
+    readonly green: "#3fae6a";
+    readonly red: "#e5534b";
+    readonly yellow: "#d4a72c";
+    readonly orange: "#e0823d";
+    readonly purple: "#9b6bdf";
+    readonly pink: "#d9669f";
+    readonly teal: "#2fa7a0";
+};
+export type LabelColor = keyof typeof LABEL_PALETTE;
+/** CSS colour for a palette name (`gray` = `grey`) or any CSS colour; undefined stays undefined. */
+export declare function labelColor(color: string | null | undefined): string | undefined;

package/dist/utils/palette.js

@@ -0,0 +1,19 @@
+/** Named colours for user-chosen labels (select options, tags). Shared by Chip, GroupedList, SegmentBar. */
+export const LABEL_PALETTE = {
+    grey: '#8b8f98',
+    blue: '#5b8def',
+    green: '#3fae6a',
+    red: '#e5534b',
+    yellow: '#d4a72c',
+    orange: '#e0823d',
+    purple: '#9b6bdf',
+    pink: '#d9669f',
+    teal: '#2fa7a0',
+};
+/** CSS colour for a palette name (`gray` = `grey`) or any CSS colour; undefined stays undefined. */
+export function labelColor(color) {
+    if (!color)
+        return undefined;
+    const name = color === 'gray' ? 'grey' : color;
+    return name in LABEL_PALETTE ? LABEL_PALETTE[name] : color;
+}

package/package.json

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