terminoir 0.4.0 → 0.5.0

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

@@ -0,0 +1,12 @@
+import { type CalendarEvent, type CalendarMode } from '../utils/calendar.js';
+type $$ComponentProps = {
+    mode?: CalendarMode;
+    /** Any date inside the week or month to show. */
+    anchor: Date;
+    events: CalendarEvent[];
+    onEventClick?: (event: CalendarEvent) => void;
+    class?: string;
+};
+declare const CalendarGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type CalendarGrid = ReturnType<typeof CalendarGrid>;
+export default CalendarGrid;

package/dist/components/CanvasStage.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    stage = $bindable(),
+    host = $bindable(),
+    label,
+    class: className = '',
+    overlay,
+    panel,
+    children,
+  }: {
+    /** The full-size stage element (observe it for size changes). */
+    stage?: HTMLDivElement;
+    /** Empty full-size element for a canvas library to mount into. */
+    host?: HTMLDivElement;
+    /** Accessible description of the canvas. */
+    label: string;
+    class?: string;
+    /** Small floating card, top right (filters, legend, counts). */
+    overlay?: Snippet;
+    /** Detail panel on the right; a bottom sheet on phones. */
+    panel?: Snippet;
+    /** Content drawn over the canvas instead of a library (e.g. an error). */
+    children?: Snippet;
+  } = $props();
+</script>
+
+<div bind:this={stage} class={cn('terminoir-canvas-stage', className)}>
+  <div bind:this={host} class="terminoir-canvas-stage__host" role="img" aria-label={label}></div>
+  {@render children?.()}
+  {#if overlay}
+    <div class="terminoir-canvas-stage__overlay glass-popover">{@render overlay()}</div>
+  {/if}
+  {#if panel}
+    <aside class="terminoir-canvas-stage__panel glass-popover">{@render panel()}</aside>
+  {/if}
+</div>
+
+<style>
+  .terminoir-canvas-stage {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 20rem;
+    overflow: hidden;
+    background: var(--background);
+  }
+  .terminoir-canvas-stage__host { position: absolute; inset: 0; }
+  .terminoir-canvas-stage__host :global(canvas) { display: block; }
+  .terminoir-canvas-stage__overlay,
+  .terminoir-canvas-stage__panel {
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-4);
+  }
+  .terminoir-canvas-stage__overlay {
+    top: var(--space-3);
+    right: var(--space-3);
+    width: min(17rem, calc(100% - 2 * var(--space-3)));
+  }
+  .terminoir-canvas-stage__panel {
+    top: var(--space-3);
+    right: var(--space-3);
+    bottom: var(--space-3);
+    width: min(22rem, calc(100% - 2 * var(--space-3)));
+    overflow-y: auto;
+  }
+  @media (max-width: 700px) {
+    .terminoir-canvas-stage__panel {
+      top: auto;
+      left: var(--space-3);
+      width: auto;
+      max-height: 55%;
+    }
+  }
+</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** The full-size stage element (observe it for size changes). */
+    stage?: HTMLDivElement;
+    /** Empty full-size element for a canvas library to mount into. */
+    host?: HTMLDivElement;
+    /** Accessible description of the canvas. */
+    label: string;
+    class?: string;
+    /** Small floating card, top right (filters, legend, counts). */
+    overlay?: Snippet;
+    /** Detail panel on the right; a bottom sheet on phones. */
+    panel?: Snippet;
+    /** Content drawn over the canvas instead of a library (e.g. an error). */
+    children?: Snippet;
+};
+declare const CanvasStage: import("svelte").Component<$$ComponentProps, {}, "stage" | "host">;
+type CanvasStage = ReturnType<typeof CanvasStage>;
+export default CanvasStage;

package/dist/components/Centered.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+
+  let {
+    width = '24rem',
+    class: className = '',
+    children,
+  }: {
+    /** Max width of the centred column. */
+    width?: string;
+    class?: string;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<!-- Full-viewport centred column: sign-in, loading and error screens. -->
+<div class={cn('terminoir-centered', className)}>
+  <div class="terminoir-centered__column" style:max-width={width}>{@render children?.()}</div>
+</div>
+
+<style>
+  .terminoir-centered {
+    min-height: 100dvh;
+    display: grid;
+    place-items: center;
+    padding: var(--space-6) var(--space-4);
+    box-sizing: border-box;
+  }
+  .terminoir-centered__column {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Max width of the centred column. */
+    width?: string;
+    class?: string;
+    children?: Snippet;
+};
+declare const Centered: import("svelte").Component<$$ComponentProps, {}, "">;
+type Centered = ReturnType<typeof Centered>;
+export default Centered;

package/dist/components/Checkbox.svelte

@@ -3,30 +3,82 @@
 
   let {
     label,
+    hideLabel = false,
+    hint,
     checked = $bindable(false),
+    strikeWhenChecked = false,
     disabled = false,
     class: className = '',
     id,
     ...rest
   }: {
     label: string;
+    /** Keep the label for screen readers only. */
+    hideLabel?: boolean;
+    hint?: string;
     checked?: boolean;
+    /** Strike through the label when checked (task lists). */
+    strikeWhenChecked?: boolean;
     disabled?: boolean;
     class?: string;
     id?: string;
   } & Record<string, unknown> = $props();
 
-  const inputId = $derived(id ?? `terminoir-checkbox-${Math.random().toString(36).slice(2, 8)}`);
+  const fallbackId = $props.id();
+  const inputId = $derived(id ?? fallbackId);
 </script>
 
-<label class={cn('terminoir-field', className)} style="flex-direction: row; align-items: center;">
-  <input
-    id={inputId}
-    type="checkbox"
-    class="terminoir-focusable"
-    bind:checked
-    {disabled}
-    {...rest}
-  />
-  <span class="terminoir-field__label">{label}</span>
-</label>
+<div class={cn('terminoir-checkbox', className)}>
+  <label class="terminoir-checkbox__row" for={inputId}>
+    <input
+      id={inputId}
+      type="checkbox"
+      class="terminoir-checkbox__input terminoir-focusable"
+      bind:checked
+      {disabled}
+      {...rest}
+    />
+    <span
+      class={cn(
+        'terminoir-checkbox__label',
+        hideLabel && 'terminoir-sr-only',
+        strikeWhenChecked && checked && 'terminoir-checkbox__label--done',
+      )}
+    >
+      {label}
+    </span>
+  </label>
+  {#if hint}<p class="terminoir-field__hint terminoir-checkbox__hint">{hint}</p>{/if}
+</div>
+
+<style>
+  .terminoir-checkbox {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+  .terminoir-checkbox__row {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--space-2);
+    cursor: pointer;
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+  .terminoir-checkbox__input {
+    margin: 0.15rem 0 0;
+    accent-color: var(--primary);
+    flex-shrink: 0;
+  }
+  .terminoir-checkbox__label {
+    color: var(--foreground);
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .terminoir-checkbox__label--done {
+    color: var(--muted-foreground);
+    text-decoration: line-through;
+  }
+  .terminoir-checkbox__hint { padding-left: 1.5rem; }
+</style>

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

@@ -1,6 +1,11 @@
 type $$ComponentProps = {
     label: string;
+    /** Keep the label for screen readers only. */
+    hideLabel?: boolean;
+    hint?: string;
     checked?: boolean;
+    /** Strike through the label when checked (task lists). */
+    strikeWhenChecked?: boolean;
     disabled?: boolean;
     class?: string;
     id?: string;

package/dist/components/Chip.svelte

@@ -5,19 +5,34 @@
 
   let {
     tone = 'default',
+    color,
+    onremove,
+    removeLabel = 'Remove',
+    onclick,
     class: className = '',
     children,
     ...rest
   }: {
     tone?: ChipTone;
+    /** Dot colour before the text (palette name or CSS colour), e.g. a select option colour. */
+    color?: string;
+    /** Shows a × button; called when it is pressed. */
+    onremove?: () => void;
+    /** Accessible name of the × button, e.g. "Remove Rosa". */
+    removeLabel?: string;
+    /** Makes the chip text a button (e.g. open the linked item). */
+    onclick?: (event: MouseEvent) => void;
     class?: string;
     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);
 </script>
 
 <span
   class={cn(
-    'terminoir-card__chip glass-chip',
+    'terminoir-card__chip terminoir-chip',
     tone === 'overdue' && 'terminoir-card__chip--overdue',
     tone === 'today' && 'terminoir-card__chip--today',
     tone === 'done' && 'terminoir-card__chip--done',
@@ -25,5 +40,78 @@
   )}
   {...rest}
 >
-  {@render children?.()}
+  {#if dot}<span class="terminoir-chip__dot" style:background={dot} aria-hidden="true"></span>{/if}
+  {#if onclick}
+    <button type="button" class="terminoir-chip__label terminoir-focusable" {onclick}>{@render children?.()}</button>
+  {:else}
+    <span class="terminoir-chip__label">{@render children?.()}</span>
+  {/if}
+  {#if onremove}
+    <button type="button" class="terminoir-chip__remove terminoir-focusable" aria-label={removeLabel} onclick={onremove}>×</button>
+  {/if}
 </span>
+
+<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;
+    max-width: 100%;
+    min-width: 0;
+    line-height: 1.35;
+  }
+  .terminoir-chip:not(.terminoir-card__chip--overdue):not(.terminoir-card__chip--today):not(.terminoir-card__chip--done) {
+    background: color-mix(in srgb, var(--foreground) 7%, transparent);
+    border-color: color-mix(in srgb, var(--foreground) 10%, transparent);
+  }
+  .terminoir-chip__dot {
+    width: 0.45rem;
+    height: 0.45rem;
+    border-radius: 999px;
+    flex-shrink: 0;
+  }
+  .terminoir-chip__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  button.terminoir-chip__label {
+    border: 0;
+    padding: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  button.terminoir-chip__label:hover { text-decoration: underline; }
+  .terminoir-chip__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    margin-right: -0.2rem;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--muted-foreground);
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+  }
+  .terminoir-chip__remove:hover {
+    color: var(--foreground);
+    background: color-mix(in srgb, var(--foreground) 12%, transparent);
+  }
+</style>

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

@@ -1,6 +1,14 @@
 type ChipTone = 'default' | 'overdue' | 'today' | 'done';
 type $$ComponentProps = {
     tone?: ChipTone;
+    /** Dot colour before the text (palette name or CSS colour), e.g. a select option colour. */
+    color?: string;
+    /** Shows a × button; called when it is pressed. */
+    onremove?: () => void;
+    /** Accessible name of the × button, e.g. "Remove Rosa". */
+    removeLabel?: string;
+    /** Makes the chip text a button (e.g. open the linked item). */
+    onclick?: (event: MouseEvent) => void;
     class?: string;
     children?: import('svelte').Snippet;
 } & Record<string, unknown>;