terminoir 0.6.0 → 0.7.0

package/README.md

@@ -152,7 +152,9 @@ 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 |

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/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/index.d.ts

@@ -65,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

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

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