@ptbdynamic/plinth 0.0.0-stage → 0.2.0

package/packages/css/dist/textarea.css

@@ -0,0 +1,169 @@
+/*
+ * Textarea: several lines of text, with its label, an optional description and an error. With
+ * grow, it grows with its content.
+ *
+ * <div class="plinth-textarea">
+ *   <label class="plinth-textarea-label" for="reply">Reply</label>
+ *   <textarea class="plinth-textarea-input" id="reply" rows="3"
+ *     aria-describedby="reply-description reply-error" aria-invalid="true"></textarea>
+ *   <p class="plinth-textarea-description" id="reply-description">The customer sees it.</p>
+ *   <p class="plinth-textarea-error" id="reply-error">Write a reply first.</p>
+ * </div>
+ *
+ * The textarea needs an id: the label points at it with for, and the description's and error's
+ * ids are the textarea's id with -description and -error. The description and the error are
+ * optional; aria-describedby lists the description, then the error, and is left out when there is
+ * neither. rows is 3 by default.
+ *
+ * Attributes go to the textarea, not the root (name, placeholder, maxlength, required,
+ * wire:model, x-model, data-*, aria-*), so the app talks to the textarea; only a project's class
+ * is added to the root's.
+ *
+ * - grow: data-grow on the textarea, with its rows and maximum as custom properties:
+ *   <textarea class="plinth-textarea-input" id="reply" rows="3" data-grow
+ *     style="--plinth-textarea-rows: 3; --plinth-textarea-max-rows: 8"></textarea>
+ *   It starts at rows lines and grows with its content (field-sizing: content) up to max-rows
+ *   (8 by default), then scrolls. Where the browser has no field-sizing it keeps rows lines and
+ *   the person can resize it, as without grow.
+ * - data-label="hidden" on the root hides the label visually; screen readers still read it. Use it
+ *   only where the field's purpose is plain without it, such as a reply box under a thread.
+ *
+ * The text is 16px on a phone, so iOS doesn't zoom into the field, and 14px from 768px up.
+ *
+ * States:
+ * - error: aria-invalid="true" on the textarea and the error message under it; the edge turns
+ *   danger and thick, so it isn't only a colour, and the message says what to fix.
+ * - disabled: `disabled` on the textarea; the field is faded and can't be focused.
+ * - read-only: `readonly` on the textarea; it keeps its text and focus, without the field's fill
+ *   and with a dashed edge.
+ * - the focus ring on the textarea's :focus-visible.
+ */
+
+@layer plinth {
+  .plinth-textarea {
+    display: grid;
+    gap: var(--plinth-space-2);
+    min-inline-size: 0;
+    font-family: var(--plinth-font-family-body);
+  }
+
+  .plinth-textarea-label {
+    font-size: var(--plinth-font-size-sm);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text-muted);
+    overflow-wrap: anywhere;
+  }
+
+  /* Hidden from sight, still read by screen readers. */
+  .plinth-textarea[data-label='hidden'] .plinth-textarea-label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+
+  .plinth-textarea-input {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--plinth-touch-target);
+    padding-block: var(--plinth-space-2);
+    padding-inline: var(--plinth-space-3);
+    margin: 0;
+    font-family: inherit;
+    font-size: var(--plinth-font-size-field);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text);
+    resize: vertical;
+    background-color: var(--plinth-color-surface-sunken);
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border-strong);
+    border-radius: var(--plinth-radius-control);
+    transition: border-color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  .plinth-textarea-input::placeholder {
+    color: var(--plinth-color-text-subtle);
+    opacity: 1;
+  }
+
+  @media (hover: hover) {
+    .plinth-textarea-input:hover:not(:disabled, :read-only, [aria-invalid='true']) {
+      border-color: var(--plinth-color-text-subtle);
+    }
+  }
+
+  .plinth-textarea-input:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset);
+  }
+
+  .plinth-textarea-input[aria-invalid='true'] {
+    border-color: var(--plinth-color-danger);
+    border-width: var(--plinth-border-width-thick);
+  }
+
+  .plinth-textarea-input:disabled {
+    cursor: not-allowed;
+    resize: none;
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  /* Without the fill, and with a dashed edge, so it doesn't read as a field to type in. */
+  .plinth-textarea-input:read-only:not(:disabled) {
+    background-color: transparent;
+    border-style: dashed;
+  }
+
+  /*
+   * Grow: from rows lines to max-rows lines (in the textarea's own line height, with its padding
+   * and edge), then it scrolls.
+   */
+  @supports (field-sizing: content) {
+    .plinth-textarea-input[data-grow] {
+      field-sizing: content;
+      min-block-size: max(
+        var(--plinth-touch-target),
+        calc(
+          var(--plinth-textarea-rows, 3) * 1lh + 2 * var(--plinth-space-2) + 2 *
+            var(--plinth-border-width-thin)
+        )
+      );
+      max-block-size: calc(
+        var(--plinth-textarea-max-rows, 8) * 1lh + 2 * var(--plinth-space-2) + 2 *
+          var(--plinth-border-width-thin)
+      );
+      resize: none;
+    }
+  }
+
+  .plinth-textarea-description,
+  .plinth-textarea-error {
+    margin: 0;
+    font-size: var(--plinth-font-size-sm);
+    line-height: var(--plinth-font-leading-normal);
+    overflow-wrap: anywhere;
+  }
+
+  .plinth-textarea-description {
+    color: var(--plinth-color-text-muted);
+  }
+
+  .plinth-textarea-error {
+    color: var(--plinth-color-danger-text);
+  }
+
+  @media (min-width: 768px) {
+    .plinth-textarea-input {
+      font-size: var(--plinth-font-size-md);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .plinth-textarea-input:disabled {
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+}

package/packages/css/dist/tokens.css

@@ -0,0 +1,413 @@
+/* Built from packages/tokens/tokens/*.json. Do not edit by hand. */
+
+@layer plinth {
+  :root {
+    --plinth-ref-color-neutral-0: oklch(1 0 0);
+    --plinth-ref-color-neutral-50: oklch(0.985 0.002 260);
+    --plinth-ref-color-neutral-100: oklch(0.965 0.003 260);
+    --plinth-ref-color-neutral-150: oklch(0.945 0.004 260);
+    --plinth-ref-color-neutral-200: oklch(0.92 0.004 260);
+    --plinth-ref-color-neutral-300: oklch(0.82 0.005 260);
+    --plinth-ref-color-neutral-400: oklch(0.71 0.008 260);
+    --plinth-ref-color-neutral-500: oklch(0.54 0.01 260);
+    --plinth-ref-color-neutral-600: oklch(0.45 0.01 260);
+    --plinth-ref-color-neutral-700: oklch(0.37 0.01 260);
+    --plinth-ref-color-neutral-800: oklch(0.27 0.008 260);
+    --plinth-ref-color-neutral-850: oklch(0.235 0.007 260);
+    --plinth-ref-color-neutral-900: oklch(0.205 0.006 260);
+    --plinth-ref-color-neutral-950: oklch(0.18 0.005 260);
+    --plinth-ref-color-neutral-1000: oklch(0.145 0.004 260);
+    --plinth-ref-color-brand-50: #eff6ff;
+    --plinth-ref-color-brand-100: #dbeafe;
+    --plinth-ref-color-brand-200: #bfdbfe;
+    --plinth-ref-color-brand-300: #93c5fd;
+    --plinth-ref-color-brand-400: #60a5fa;
+    --plinth-ref-color-brand-500: #3b82f6;
+    --plinth-ref-color-brand-600: #2563eb;
+    --plinth-ref-color-brand-700: #1d4ed8;
+    --plinth-ref-color-brand-800: #1e40af;
+    --plinth-ref-color-brand-900: #1e3a8a;
+    --plinth-ref-color-brand-950: #172554;
+    --plinth-ref-color-green-50: #f0fdf4;
+    --plinth-ref-color-green-100: #dcfce7;
+    --plinth-ref-color-green-200: #bbf7d0;
+    --plinth-ref-color-green-400: #4ade80;
+    --plinth-ref-color-green-600: #16a34a;
+    --plinth-ref-color-green-700: #15803d;
+    --plinth-ref-color-green-800: #166534;
+    --plinth-ref-color-green-950: #052e16;
+    --plinth-ref-color-amber-50: #fffbeb;
+    --plinth-ref-color-amber-100: #fef3c7;
+    --plinth-ref-color-amber-200: #fde68a;
+    --plinth-ref-color-amber-400: #fbbf24;
+    --plinth-ref-color-amber-500: #f59e0b;
+    --plinth-ref-color-amber-700: #b45309;
+    --plinth-ref-color-amber-800: #92400e;
+    --plinth-ref-color-amber-950: #451a03;
+    --plinth-ref-color-red-50: #fef2f2;
+    --plinth-ref-color-red-100: #fee2e2;
+    --plinth-ref-color-red-200: #fecaca;
+    --plinth-ref-color-red-400: #f87171;
+    --plinth-ref-color-red-600: #dc2626;
+    --plinth-ref-color-red-700: #b91c1c;
+    --plinth-ref-color-red-800: #991b1b;
+    --plinth-ref-color-red-950: #450a0a;
+    --plinth-ref-color-black-alpha-10: #0000001a;
+    --plinth-ref-color-black-alpha-15: #00000026;
+    --plinth-ref-color-black-alpha-30: #0000004d;
+    --plinth-ref-color-black-alpha-50: #00000080;
+    --plinth-ref-color-black-alpha-60: #00000099;
+    --plinth-ref-color-black-alpha-70: #000000b3;
+    --plinth-ref-color-ink-alpha-6: oklch(0.18 0.005 260 / 0.06);
+    --plinth-ref-color-ink-alpha-10: oklch(0.18 0.005 260 / 0.1);
+    --plinth-ref-color-ink-alpha-20: oklch(0.18 0.005 260 / 0.2);
+    --plinth-ref-color-chalk-alpha-6: oklch(0.965 0.003 260 / 0.06);
+    --plinth-ref-color-chalk-alpha-10: oklch(0.965 0.003 260 / 0.1);
+    --plinth-ref-color-chalk-alpha-20: oklch(0.965 0.003 260 / 0.2);
+    --plinth-ref-color-white-alpha-12: #ffffff1f;
+    --plinth-ref-space-0: 0;
+    --plinth-ref-space-1: 0.25rem;
+    --plinth-ref-space-2: 0.5rem;
+    --plinth-ref-space-3: 0.75rem;
+    --plinth-ref-space-4: 1rem;
+    --plinth-ref-space-5: 1.25rem;
+    --plinth-ref-space-6: 1.5rem;
+    --plinth-ref-space-8: 2rem;
+    --plinth-ref-space-10: 2.5rem;
+    --plinth-ref-space-12: 3rem;
+    --plinth-ref-space-14: 3.5rem;
+    --plinth-ref-space-16: 4rem;
+    --plinth-ref-space-0-5: 0.125rem;
+    --plinth-ref-size-16: 1rem;
+    --plinth-ref-size-20: 1.25rem;
+    --plinth-ref-size-24: 1.5rem;
+    --plinth-ref-size-28: 1.75rem;
+    --plinth-ref-size-32: 2rem;
+    --plinth-ref-size-40: 2.5rem;
+    --plinth-ref-size-44: 2.75rem;
+    --plinth-ref-size-56: 3.5rem;
+    --plinth-ref-size-160: 10rem;
+    --plinth-ref-size-192: 12rem;
+    --plinth-ref-size-320: 20rem;
+    --plinth-ref-size-400: 25rem;
+    --plinth-ref-size-480: 30rem;
+    --plinth-ref-radius-0: 0;
+    --plinth-ref-radius-2: 0.125rem;
+    --plinth-ref-radius-4: 0.25rem;
+    --plinth-ref-radius-6: 0.375rem;
+    --plinth-ref-radius-8: 0.5rem;
+    --plinth-ref-radius-10: 0.625rem;
+    --plinth-ref-radius-12: 0.75rem;
+    --plinth-ref-radius-16: 1rem;
+    --plinth-ref-radius-full: 9999px;
+    --plinth-ref-border-width-1: 1px;
+    --plinth-ref-border-width-2: 2px;
+    --plinth-ref-border-width-3: 3px;
+    --plinth-ref-font-family-sans: 'Geist Variable', Geist, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --plinth-ref-font-family-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+    --plinth-ref-font-size-12: 0.75rem;
+    --plinth-ref-font-size-13: 0.8125rem;
+    --plinth-ref-font-size-14: 0.875rem;
+    --plinth-ref-font-size-15: 0.9375rem;
+    --plinth-ref-font-size-16: 1rem;
+    --plinth-ref-font-size-18: 1.125rem;
+    --plinth-ref-font-size-24: 1.5rem;
+    --plinth-ref-font-size-30: 1.875rem;
+    --plinth-ref-font-size-36: 2.25rem;
+    --plinth-ref-font-size-48: 3rem;
+    --plinth-ref-font-size-64: 4rem;
+    --plinth-ref-font-weight-400: 400;
+    --plinth-ref-font-weight-500: 500;
+    --plinth-ref-font-weight-600: 600;
+    --plinth-ref-font-weight-700: 700;
+    --plinth-ref-font-leading-105: 1.05;
+    --plinth-ref-font-leading-125: 1.25;
+    --plinth-ref-font-leading-150: 1.5;
+    --plinth-ref-font-tracking-0: 0;
+    --plinth-ref-font-tracking-neg-1: -0.01em;
+    --plinth-ref-font-tracking-neg-2: -0.02em;
+    --plinth-ref-font-tracking-neg-4: -0.04em;
+    --plinth-ref-duration-120: 120ms;
+    --plinth-ref-duration-200: 200ms;
+    --plinth-ref-duration-320: 320ms;
+    --plinth-ref-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --plinth-ref-easing-enter: cubic-bezier(0, 0, 0, 1);
+    --plinth-ref-easing-exit: cubic-bezier(0.3, 0, 1, 1);
+    --plinth-space-0: var(--plinth-ref-space-0);
+    --plinth-space-1: var(--plinth-ref-space-1);
+    --plinth-space-2: var(--plinth-ref-space-2);
+    --plinth-space-3: var(--plinth-ref-space-3);
+    --plinth-space-4: var(--plinth-ref-space-4);
+    --plinth-space-5: var(--plinth-ref-space-5);
+    --plinth-space-6: var(--plinth-ref-space-6);
+    --plinth-space-8: var(--plinth-ref-space-8);
+    --plinth-space-10: var(--plinth-ref-space-10);
+    --plinth-space-12: var(--plinth-ref-space-12);
+    --plinth-space-14: var(--plinth-ref-space-14);
+    --plinth-space-16: var(--plinth-ref-space-16);
+    --plinth-space-0-5: var(--plinth-ref-space-0-5);
+    --plinth-radius-control: var(--plinth-ref-radius-6);
+    --plinth-radius-container: var(--plinth-ref-radius-10);
+    --plinth-radius-pill: var(--plinth-ref-radius-full);
+    --plinth-border-width-thin: var(--plinth-ref-border-width-1);
+    --plinth-border-width-thick: var(--plinth-ref-border-width-2);
+    --plinth-opacity-disabled: 0.5;
+    --plinth-focus-ring-width: var(--plinth-ref-border-width-2);
+    --plinth-focus-ring-offset: 0;
+    --plinth-focus-ring-offset-filled: var(--plinth-ref-border-width-2);
+    --plinth-focus-ring-offset-inset: -2px;
+    --plinth-font-family-body: var(--plinth-ref-font-family-sans);
+    --plinth-font-family-mono: var(--plinth-ref-font-family-mono);
+    --plinth-font-size-xs: var(--plinth-ref-font-size-12);
+    --plinth-font-size-sm: var(--plinth-ref-font-size-13);
+    --plinth-font-size-md: var(--plinth-ref-font-size-14);
+    --plinth-font-size-lg: var(--plinth-ref-font-size-15);
+    --plinth-font-size-xl: var(--plinth-ref-font-size-18);
+    --plinth-font-size-2xl: var(--plinth-ref-font-size-24);
+    --plinth-font-size-3xl: var(--plinth-ref-font-size-30);
+    --plinth-font-size-4xl: var(--plinth-ref-font-size-36);
+    --plinth-font-size-5xl: var(--plinth-ref-font-size-48);
+    --plinth-font-size-6xl: var(--plinth-ref-font-size-64);
+    --plinth-font-size-field: var(--plinth-ref-font-size-16);
+    --plinth-font-weight-regular: var(--plinth-ref-font-weight-400);
+    --plinth-font-weight-medium: var(--plinth-ref-font-weight-500);
+    --plinth-font-weight-semibold: var(--plinth-ref-font-weight-600);
+    --plinth-font-weight-bold: var(--plinth-ref-font-weight-700);
+    --plinth-font-leading-display: var(--plinth-ref-font-leading-105);
+    --plinth-font-leading-tight: var(--plinth-ref-font-leading-125);
+    --plinth-font-leading-normal: var(--plinth-ref-font-leading-150);
+    --plinth-font-tracking-normal: var(--plinth-ref-font-tracking-0);
+    --plinth-font-tracking-snug: var(--plinth-ref-font-tracking-neg-1);
+    --plinth-font-tracking-tight: var(--plinth-ref-font-tracking-neg-2);
+    --plinth-font-tracking-tighter: var(--plinth-ref-font-tracking-neg-4);
+    --plinth-duration-fast: var(--plinth-ref-duration-120);
+    --plinth-duration-normal: var(--plinth-ref-duration-200);
+    --plinth-duration-slow: var(--plinth-ref-duration-320);
+    --plinth-easing-standard: var(--plinth-ref-easing-standard);
+    --plinth-easing-enter: var(--plinth-ref-easing-enter);
+    --plinth-easing-exit: var(--plinth-ref-easing-exit);
+    --plinth-control-sm: var(--plinth-ref-size-28);
+    --plinth-control-md: var(--plinth-ref-size-32);
+    --plinth-control-lg: var(--plinth-ref-size-40);
+    --plinth-touch-target: var(--plinth-ref-size-40);
+    --plinth-size-icon-sm: var(--plinth-ref-size-16);
+    --plinth-size-icon-md: var(--plinth-ref-size-20);
+    --plinth-size-icon-lg: var(--plinth-ref-size-24);
+    --plinth-size-row: var(--plinth-ref-size-44);
+    --plinth-size-avatar-sm: var(--plinth-ref-size-24);
+    --plinth-size-avatar-md: var(--plinth-ref-size-32);
+    --plinth-size-avatar-lg: var(--plinth-ref-size-40);
+    --plinth-size-avatar-xl: var(--plinth-ref-size-56);
+    --plinth-size-dialog: var(--plinth-ref-size-480);
+    --plinth-size-panel: var(--plinth-ref-size-400);
+    --plinth-size-peek: var(--plinth-ref-size-160);
+    --plinth-size-menu-min: var(--plinth-ref-size-192);
+    --plinth-size-menu-max: var(--plinth-ref-size-320);
+    --plinth-layer-base: 0;
+    --plinth-layer-sticky: 100;
+    --plinth-layer-overlay: 200;
+    --plinth-layer-sheet: 300;
+    --plinth-layer-toast: 400;
+    --plinth-breakpoint-md: 768px;
+    --plinth-breakpoint-lg: 1280px;
+    --plinth-page-header-height: var(--plinth-space-14);
+    --plinth-page-header-offset: var(--plinth-space-0);
+    --plinth-data-table-row-height: var(--plinth-size-row);
+    --plinth-list-row-height: var(--plinth-size-row);
+    --plinth-pill-height: var(--plinth-control-md);
+    --plinth-dialog-width: var(--plinth-size-dialog);
+    --plinth-sheet-side-width: var(--plinth-size-panel);
+    --plinth-drawer-peek-height: var(--plinth-size-peek);
+    --plinth-section-menu-height: var(--plinth-space-14);
+    --plinth-section-menu-item-height: var(--plinth-control-lg);
+    --plinth-menu-min-width: var(--plinth-size-menu-min);
+    --plinth-menu-max-width: var(--plinth-size-menu-max);
+    --plinth-text-field-trailing-size: var(--plinth-control-md);
+  }
+
+  :root,
+  [data-theme="light"] {
+    color-scheme: light;
+    --plinth-color-surface: var(--plinth-ref-color-neutral-50);
+    --plinth-color-surface-raised: var(--plinth-ref-color-neutral-0);
+    --plinth-color-surface-sunken: var(--plinth-ref-color-neutral-100);
+    --plinth-color-surface-hover: var(--plinth-ref-color-neutral-150);
+    --plinth-color-text: var(--plinth-ref-color-neutral-950);
+    --plinth-color-text-muted: var(--plinth-ref-color-neutral-600);
+    --plinth-color-text-subtle: var(--plinth-ref-color-neutral-500);
+    --plinth-color-border: var(--plinth-ref-color-ink-alpha-10);
+    --plinth-color-border-strong: var(--plinth-ref-color-ink-alpha-20);
+    --plinth-color-divider: var(--plinth-ref-color-ink-alpha-6);
+    --plinth-color-primary: var(--plinth-ref-color-neutral-950);
+    --plinth-color-primary-hover: var(--plinth-ref-color-neutral-800);
+    --plinth-color-primary-active: var(--plinth-ref-color-neutral-700);
+    --plinth-color-on-primary: var(--plinth-ref-color-neutral-0);
+    --plinth-color-primary-edge: var(--plinth-ref-color-white-alpha-12);
+    --plinth-color-accent: var(--plinth-ref-color-brand-600);
+    --plinth-color-accent-text: var(--plinth-ref-color-brand-700);
+    --plinth-color-on-accent: var(--plinth-ref-color-neutral-0);
+    --plinth-color-focus-ring: var(--plinth-ref-color-brand-600);
+    --plinth-color-overlay: var(--plinth-ref-color-black-alpha-50);
+    --plinth-color-info: var(--plinth-ref-color-brand-600);
+    --plinth-color-info-surface: var(--plinth-ref-color-brand-100);
+    --plinth-color-info-text: var(--plinth-ref-color-brand-800);
+    --plinth-color-success: var(--plinth-ref-color-green-600);
+    --plinth-color-success-surface: var(--plinth-ref-color-green-100);
+    --plinth-color-success-text: var(--plinth-ref-color-green-800);
+    --plinth-color-warning: var(--plinth-ref-color-amber-500);
+    --plinth-color-warning-surface: var(--plinth-ref-color-amber-100);
+    --plinth-color-warning-text: var(--plinth-ref-color-amber-800);
+    --plinth-color-danger: var(--plinth-ref-color-red-600);
+    --plinth-color-danger-surface: var(--plinth-ref-color-red-100);
+    --plinth-color-danger-text: var(--plinth-ref-color-red-800);
+    --plinth-color-accent-hover: var(--plinth-ref-color-brand-700);
+    --plinth-color-accent-active: var(--plinth-ref-color-brand-800);
+    --plinth-color-danger-solid: var(--plinth-ref-color-red-600);
+    --plinth-color-danger-solid-hover: var(--plinth-ref-color-red-700);
+    --plinth-color-danger-solid-active: var(--plinth-ref-color-red-800);
+    --plinth-color-on-danger: var(--plinth-ref-color-neutral-0);
+    --plinth-color-accent-subtle: var(--plinth-ref-color-brand-50);
+    --plinth-color-accent-subtle-hover: var(--plinth-ref-color-brand-100);
+    --plinth-color-accent-subtle-active: var(--plinth-ref-color-brand-200);
+    --plinth-elevation-1: 0 1px 2px 0 #0000001a;
+    --plinth-elevation-2: 0 4px 12px 0 #00000026;
+    --plinth-elevation-3: 0 12px 32px 0 #00000026;
+    --plinth-callout-neutral-surface: var(--plinth-color-surface-sunken);
+    --plinth-callout-neutral-border: var(--plinth-color-border);
+    --plinth-callout-info-surface: color-mix(in srgb, var(--plinth-color-info) 6%, transparent);
+    --plinth-callout-info-border: color-mix(in srgb, var(--plinth-color-info) 24%, transparent);
+    --plinth-callout-success-surface: color-mix(in srgb, var(--plinth-color-success) 6%, transparent);
+    --plinth-callout-success-border: color-mix(in srgb, var(--plinth-color-success) 24%, transparent);
+    --plinth-callout-warning-surface: color-mix(in srgb, var(--plinth-color-warning) 6%, transparent);
+    --plinth-callout-warning-border: color-mix(in srgb, var(--plinth-color-warning) 24%, transparent);
+    --plinth-callout-danger-surface: color-mix(in srgb, var(--plinth-color-danger) 6%, transparent);
+    --plinth-callout-danger-border: color-mix(in srgb, var(--plinth-color-danger) 24%, transparent);
+  }
+
+  [data-theme="dark"],
+  .dark {
+    color-scheme: dark;
+    --plinth-color-surface: var(--plinth-ref-color-neutral-950);
+    --plinth-color-surface-raised: var(--plinth-ref-color-neutral-900);
+    --plinth-color-surface-sunken: var(--plinth-ref-color-neutral-1000);
+    --plinth-color-surface-hover: var(--plinth-ref-color-neutral-850);
+    --plinth-color-text: var(--plinth-ref-color-neutral-100);
+    --plinth-color-text-muted: var(--plinth-ref-color-neutral-300);
+    --plinth-color-text-subtle: var(--plinth-ref-color-neutral-400);
+    --plinth-color-border: var(--plinth-ref-color-chalk-alpha-10);
+    --plinth-color-border-strong: var(--plinth-ref-color-chalk-alpha-20);
+    --plinth-color-divider: var(--plinth-ref-color-chalk-alpha-6);
+    --plinth-color-primary: var(--plinth-ref-color-neutral-100);
+    --plinth-color-primary-hover: var(--plinth-ref-color-neutral-200);
+    --plinth-color-primary-active: var(--plinth-ref-color-neutral-300);
+    --plinth-color-on-primary: var(--plinth-ref-color-neutral-950);
+    --plinth-color-primary-edge: var(--plinth-ref-color-black-alpha-10);
+    --plinth-color-accent: var(--plinth-ref-color-brand-600);
+    --plinth-color-accent-text: var(--plinth-ref-color-brand-300);
+    --plinth-color-on-accent: var(--plinth-ref-color-neutral-0);
+    --plinth-color-focus-ring: var(--plinth-ref-color-brand-300);
+    --plinth-color-overlay: var(--plinth-ref-color-black-alpha-70);
+    --plinth-color-info: var(--plinth-ref-color-brand-400);
+    --plinth-color-info-surface: var(--plinth-ref-color-brand-950);
+    --plinth-color-info-text: var(--plinth-ref-color-brand-200);
+    --plinth-color-success: var(--plinth-ref-color-green-400);
+    --plinth-color-success-surface: var(--plinth-ref-color-green-950);
+    --plinth-color-success-text: var(--plinth-ref-color-green-200);
+    --plinth-color-warning: var(--plinth-ref-color-amber-400);
+    --plinth-color-warning-surface: var(--plinth-ref-color-amber-950);
+    --plinth-color-warning-text: var(--plinth-ref-color-amber-200);
+    --plinth-color-danger: var(--plinth-ref-color-red-400);
+    --plinth-color-danger-surface: var(--plinth-ref-color-red-950);
+    --plinth-color-danger-text: var(--plinth-ref-color-red-200);
+    --plinth-color-accent-hover: var(--plinth-ref-color-brand-700);
+    --plinth-color-accent-active: var(--plinth-ref-color-brand-800);
+    --plinth-color-danger-solid: var(--plinth-ref-color-red-600);
+    --plinth-color-danger-solid-hover: var(--plinth-ref-color-red-700);
+    --plinth-color-danger-solid-active: var(--plinth-ref-color-red-800);
+    --plinth-color-on-danger: var(--plinth-ref-color-neutral-0);
+    --plinth-color-accent-subtle: var(--plinth-ref-color-brand-950);
+    --plinth-color-accent-subtle-hover: var(--plinth-ref-color-brand-900);
+    --plinth-color-accent-subtle-active: var(--plinth-ref-color-brand-800);
+    --plinth-elevation-1: 0 1px 2px 0 #0000004d;
+    --plinth-elevation-2: 0 4px 12px 0 #00000080;
+    --plinth-elevation-3: 0 12px 32px 0 #00000099;
+    --plinth-callout-neutral-surface: var(--plinth-color-surface-sunken);
+    --plinth-callout-neutral-border: var(--plinth-color-border);
+    --plinth-callout-info-surface: color-mix(in srgb, var(--plinth-color-info) 8%, transparent);
+    --plinth-callout-info-border: color-mix(in srgb, var(--plinth-color-info) 24%, transparent);
+    --plinth-callout-success-surface: color-mix(in srgb, var(--plinth-color-success) 8%, transparent);
+    --plinth-callout-success-border: color-mix(in srgb, var(--plinth-color-success) 24%, transparent);
+    --plinth-callout-warning-surface: color-mix(in srgb, var(--plinth-color-warning) 8%, transparent);
+    --plinth-callout-warning-border: color-mix(in srgb, var(--plinth-color-warning) 24%, transparent);
+    --plinth-callout-danger-surface: color-mix(in srgb, var(--plinth-color-danger) 8%, transparent);
+    --plinth-callout-danger-border: color-mix(in srgb, var(--plinth-color-danger) 24%, transparent);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"], .light) {
+      color-scheme: dark;
+      --plinth-color-surface: var(--plinth-ref-color-neutral-950);
+      --plinth-color-surface-raised: var(--plinth-ref-color-neutral-900);
+      --plinth-color-surface-sunken: var(--plinth-ref-color-neutral-1000);
+      --plinth-color-surface-hover: var(--plinth-ref-color-neutral-850);
+      --plinth-color-text: var(--plinth-ref-color-neutral-100);
+      --plinth-color-text-muted: var(--plinth-ref-color-neutral-300);
+      --plinth-color-text-subtle: var(--plinth-ref-color-neutral-400);
+      --plinth-color-border: var(--plinth-ref-color-chalk-alpha-10);
+      --plinth-color-border-strong: var(--plinth-ref-color-chalk-alpha-20);
+      --plinth-color-divider: var(--plinth-ref-color-chalk-alpha-6);
+      --plinth-color-primary: var(--plinth-ref-color-neutral-100);
+      --plinth-color-primary-hover: var(--plinth-ref-color-neutral-200);
+      --plinth-color-primary-active: var(--plinth-ref-color-neutral-300);
+      --plinth-color-on-primary: var(--plinth-ref-color-neutral-950);
+      --plinth-color-primary-edge: var(--plinth-ref-color-black-alpha-10);
+      --plinth-color-accent: var(--plinth-ref-color-brand-600);
+      --plinth-color-accent-text: var(--plinth-ref-color-brand-300);
+      --plinth-color-on-accent: var(--plinth-ref-color-neutral-0);
+      --plinth-color-focus-ring: var(--plinth-ref-color-brand-300);
+      --plinth-color-overlay: var(--plinth-ref-color-black-alpha-70);
+      --plinth-color-info: var(--plinth-ref-color-brand-400);
+      --plinth-color-info-surface: var(--plinth-ref-color-brand-950);
+      --plinth-color-info-text: var(--plinth-ref-color-brand-200);
+      --plinth-color-success: var(--plinth-ref-color-green-400);
+      --plinth-color-success-surface: var(--plinth-ref-color-green-950);
+      --plinth-color-success-text: var(--plinth-ref-color-green-200);
+      --plinth-color-warning: var(--plinth-ref-color-amber-400);
+      --plinth-color-warning-surface: var(--plinth-ref-color-amber-950);
+      --plinth-color-warning-text: var(--plinth-ref-color-amber-200);
+      --plinth-color-danger: var(--plinth-ref-color-red-400);
+      --plinth-color-danger-surface: var(--plinth-ref-color-red-950);
+      --plinth-color-danger-text: var(--plinth-ref-color-red-200);
+      --plinth-color-accent-hover: var(--plinth-ref-color-brand-700);
+      --plinth-color-accent-active: var(--plinth-ref-color-brand-800);
+      --plinth-color-danger-solid: var(--plinth-ref-color-red-600);
+      --plinth-color-danger-solid-hover: var(--plinth-ref-color-red-700);
+      --plinth-color-danger-solid-active: var(--plinth-ref-color-red-800);
+      --plinth-color-on-danger: var(--plinth-ref-color-neutral-0);
+      --plinth-color-accent-subtle: var(--plinth-ref-color-brand-950);
+      --plinth-color-accent-subtle-hover: var(--plinth-ref-color-brand-900);
+      --plinth-color-accent-subtle-active: var(--plinth-ref-color-brand-800);
+      --plinth-elevation-1: 0 1px 2px 0 #0000004d;
+      --plinth-elevation-2: 0 4px 12px 0 #00000080;
+      --plinth-elevation-3: 0 12px 32px 0 #00000099;
+      --plinth-callout-neutral-surface: var(--plinth-color-surface-sunken);
+      --plinth-callout-neutral-border: var(--plinth-color-border);
+      --plinth-callout-info-surface: color-mix(in srgb, var(--plinth-color-info) 8%, transparent);
+      --plinth-callout-info-border: color-mix(in srgb, var(--plinth-color-info) 24%, transparent);
+      --plinth-callout-success-surface: color-mix(in srgb, var(--plinth-color-success) 8%, transparent);
+      --plinth-callout-success-border: color-mix(in srgb, var(--plinth-color-success) 24%, transparent);
+      --plinth-callout-warning-surface: color-mix(in srgb, var(--plinth-color-warning) 8%, transparent);
+      --plinth-callout-warning-border: color-mix(in srgb, var(--plinth-color-warning) 24%, transparent);
+      --plinth-callout-danger-surface: color-mix(in srgb, var(--plinth-color-danger) 8%, transparent);
+      --plinth-callout-danger-border: color-mix(in srgb, var(--plinth-color-danger) 24%, transparent);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --plinth-duration-fast: 0ms;
+      --plinth-duration-normal: 0ms;
+      --plinth-duration-slow: 0ms;
+    }
+  }
+}

package/packages/react/dist/PlinthAvatar.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentProps } from 'react';
+import { type AvatarSize } from './avatar';
+import { type Tone } from './tones';
+interface AvatarOptions {
+    /** Whose avatar it is: the accessible name, and where initials come from. */
+    name?: string;
+    src?: string;
+    initials?: string;
+    size?: AvatarSize;
+    status?: Tone;
+    statusLabel?: string;
+    /** Hidden from screen readers, for an avatar next to the name it shows. */
+    decorative?: boolean;
+}
+export type PlinthAvatarProps = AvatarOptions & Omit<ComponentProps<'span'>, keyof AvatarOptions | 'children'>;
+export declare function PlinthAvatar({ name, src, initials, size, status, statusLabel, decorative, className, ...rest }: PlinthAvatarProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthBadge.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'react';
+import { type Tone } from './tones';
+export type PlinthBadgeProps = ComponentProps<'span'> & {
+    tone?: Tone;
+    dot?: boolean;
+};
+export declare function PlinthBadge({ tone, dot, className, children, ...rest }: PlinthBadgeProps): import("react").JSX.Element;

package/packages/react/dist/PlinthButton.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { type ButtonVariant, type InvokerCommandProps } from './button';
+import { type ControlSize } from './size';
+interface ButtonOptions {
+    variant?: ButtonVariant;
+    size?: ControlSize;
+    disabled?: boolean;
+    /** Working: a spinner in the leading icon's place, and the button reads as busy. */
+    busy?: boolean;
+    /** The leading icon (Vue's `icon` slot). */
+    icon?: ReactNode;
+    /** The trailing icon (Vue's `trailing` slot). */
+    trailing?: ReactNode;
+    /** Flips the leading icon in right-to-left text, for icons that point a direction. */
+    mirrorIcon?: boolean;
+    /** Flips the trailing icon in right-to-left text, for an arrow such as Next. */
+    mirrorTrailing?: boolean;
+}
+/**
+ * A `<button>`, or with an `href` a link that looks like one. The button takes `commandfor` and
+ * `command`; a link doesn't, since invoker commands are a button's.
+ */
+export type PlinthButtonProps = (ButtonOptions & InvokerCommandProps & Omit<ComponentProps<'button'>, keyof ButtonOptions | keyof InvokerCommandProps> & {
+    href?: undefined;
+}) | (ButtonOptions & Omit<ComponentProps<'a'>, keyof ButtonOptions> & {
+    href: string;
+});
+export declare function PlinthButton({ href, variant, size, disabled, busy, icon, trailing, mirrorIcon, mirrorTrailing, className, children, ...rest }: PlinthButtonProps): import("react").JSX.Element;
+export {};

package/packages/react/dist/PlinthCallout.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { type CalloutRole, type CalloutTone } from './callout';
+interface CalloutOptions {
+    tone?: CalloutTone;
+    /** `note` for a note in the page; `status` or `alert` for a message the app adds. */
+    role?: CalloutRole;
+    /** A short title above the text; it may hold a little markup. */
+    title?: ReactNode;
+    /** Buttons or links under the text (Vue's actions slot). */
+    actions?: ReactNode;
+    /** The project's own SVG in place of the tone's icon (Vue's icon slot). */
+    icon?: ReactNode;
+}
+export type PlinthCalloutProps = CalloutOptions & Omit<ComponentProps<'div'>, keyof CalloutOptions>;
+export declare function PlinthCallout({ tone, role, title, actions, icon, className, children, ...rest }: PlinthCalloutProps): import("react").JSX.Element;
+export {};