terminoir 0.5.1 → 0.6.0

package/README.md

@@ -157,6 +157,9 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
 | `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/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/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';

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';

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