@nqmcreative/ui 0.1.0 → 0.2.0

package/dist/core/table.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Sorting and selection for a data table. Both are pure functions over rows,
+ * so a style only has to decide what a header and a checked row look like.
+ */
+export type SortDirection = 'asc' | 'desc';
+export interface TableSort {
+    key: string;
+    direction: SortDirection;
+}
+/**
+ * Clicking a header cycles ascending → descending → unsorted, which is what
+ * lets a user get back to the server's original order.
+ */
+export declare function nextSort(current: TableSort | null, key: string): TableSort | null;
+/**
+ * Sorts a copy of `rows`. Numbers compare numerically, everything else through
+ * `localeCompare` with `numeric`, so `item 2` lands before `item 10`. Nullish
+ * values sink to the bottom either way round.
+ */
+export declare function sortRows<T extends Record<string, unknown>>(rows: T[], sort: TableSort | null): T[];
+/** Adds or removes one key, preserving the order the rest were chosen in. */
+export declare function toggleKey(selected: string[], key: string): string[];

package/dist/core/table.js

@@ -0,0 +1,41 @@
+/**
+ * Sorting and selection for a data table. Both are pure functions over rows,
+ * so a style only has to decide what a header and a checked row look like.
+ */
+/**
+ * Clicking a header cycles ascending → descending → unsorted, which is what
+ * lets a user get back to the server's original order.
+ */
+export function nextSort(current, key) {
+    if (current?.key !== key)
+        return { key, direction: 'asc' };
+    if (current.direction === 'asc')
+        return { key, direction: 'desc' };
+    return null;
+}
+/**
+ * Sorts a copy of `rows`. Numbers compare numerically, everything else through
+ * `localeCompare` with `numeric`, so `item 2` lands before `item 10`. Nullish
+ * values sink to the bottom either way round.
+ */
+export function sortRows(rows, sort) {
+    if (!sort)
+        return rows;
+    const { key, direction } = sort;
+    const factor = direction === 'asc' ? 1 : -1;
+    return [...rows].sort((a, b) => {
+        const x = a[key];
+        const y = b[key];
+        if (x == null)
+            return 1;
+        if (y == null)
+            return -1;
+        if (typeof x === 'number' && typeof y === 'number')
+            return (x - y) * factor;
+        return String(x).localeCompare(String(y), undefined, { numeric: true }) * factor;
+    });
+}
+/** Adds or removes one key, preserving the order the rest were chosen in. */
+export function toggleKey(selected, key) {
+    return selected.includes(key) ? selected.filter((k) => k !== key) : [...selected, key];
+}

package/dist/core/theme.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Light/dark preference, shared by every style.
+ *
+ * The classes written here are the ones each style's `theme.css` reads:
+ * `.dark` forces dark, `.light` forces light, and neither means "follow the
+ * OS". Nothing here knows what a theme looks like — only how it is chosen.
+ */
+export type Theme = 'light' | 'dark' | 'system';
+/** Writes the theme classes `theme.css` reads. Safe to call before mount. */
+export declare function applyTheme(theme: Theme): void;
+/** The stored choice, or `'system'` when the visitor has never picked one. */
+export declare function storedTheme(): Theme;
+/** Persists a choice, clearing the key when it goes back to `'system'`. */
+export declare function persistTheme(theme: Theme): void;
+/** Cycles light → dark → system, the order the one-button toggle uses. */
+export declare function nextTheme(theme: Theme): Theme;

package/dist/core/theme.svelte.js

@@ -0,0 +1,34 @@
+/**
+ * Light/dark preference, shared by every style.
+ *
+ * The classes written here are the ones each style's `theme.css` reads:
+ * `.dark` forces dark, `.light` forces light, and neither means "follow the
+ * OS". Nothing here knows what a theme looks like — only how it is chosen.
+ */
+const STORAGE_KEY = 'nqm-theme';
+/** Writes the theme classes `theme.css` reads. Safe to call before mount. */
+export function applyTheme(theme) {
+    const root = document.documentElement;
+    root.classList.toggle('dark', theme === 'dark');
+    root.classList.toggle('light', theme === 'light');
+}
+/** The stored choice, or `'system'` when the visitor has never picked one. */
+export function storedTheme() {
+    if (typeof localStorage === 'undefined')
+        return 'system';
+    const saved = localStorage.getItem(STORAGE_KEY);
+    return saved === 'light' || saved === 'dark' ? saved : 'system';
+}
+/** Persists a choice, clearing the key when it goes back to `'system'`. */
+export function persistTheme(theme) {
+    if (typeof localStorage === 'undefined')
+        return;
+    if (theme === 'system')
+        localStorage.removeItem(STORAGE_KEY);
+    else
+        localStorage.setItem(STORAGE_KEY, theme);
+}
+/** Cycles light → dark → system, the order the one-button toggle uses. */
+export function nextTheme(theme) {
+    return theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light';
+}

package/dist/core/trigger.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Wiring for a popup's trigger.
+ *
+ * Dropdown and Popover take the trigger as a snippet, so the real control is
+ * whatever the consumer passed — a Button, a link, an avatar. Rather than wrap
+ * it in another button (which would nest interactive elements and put the ARIA
+ * state on the wrong node), these attach to the element that is already there.
+ */
+export interface PopupTriggerOptions {
+    /** Flip the popup open/closed. */
+    toggle: () => void;
+    /** Open it — used by ArrowDown and by hover triggers. */
+    open: () => void;
+    /** Close it, after the grace period a hover trigger needs. */
+    close: () => void;
+    /** `'hover'` also responds to focus, for read-only content. */
+    on?: 'click' | 'hover';
+    /** Open on ArrowDown while closed — menu behaviour. */
+    arrowOpens?: boolean;
+    /** Whether the popup is currently open, read at event time. */
+    isOpen?: () => boolean;
+}
+/** Milliseconds a hover popup stays up after the pointer leaves. */
+export declare const HOVER_GRACE = 120;
+export declare function popupTrigger(node: HTMLElement, options: PopupTriggerOptions): {
+    update(next: PopupTriggerOptions): void;
+    destroy(): void;
+};
+/**
+ * Puts `aria-haspopup`/`aria-expanded` on the real control inside a trigger
+ * wrapper, so screen readers announce the state on the thing being pressed.
+ */
+export declare function describeTrigger(wrapper: HTMLElement | null, kind: 'menu' | 'dialog' | 'listbox', open: boolean): void;
+/** The menu items a roving-focus menu should walk, in DOM order. */
+export declare function menuItems(menu: HTMLElement | null): HTMLElement[];

package/dist/core/trigger.js

@@ -0,0 +1,77 @@
+/**
+ * Wiring for a popup's trigger.
+ *
+ * Dropdown and Popover take the trigger as a snippet, so the real control is
+ * whatever the consumer passed — a Button, a link, an avatar. Rather than wrap
+ * it in another button (which would nest interactive elements and put the ARIA
+ * state on the wrong node), these attach to the element that is already there.
+ */
+/** Milliseconds a hover popup stays up after the pointer leaves. */
+export const HOVER_GRACE = 120;
+export function popupTrigger(node, options) {
+    let opts = options;
+    let timer;
+    const onClick = () => opts.toggle();
+    const onShow = () => {
+        clearTimeout(timer);
+        opts.open();
+    };
+    const onHide = () => {
+        timer = setTimeout(() => opts.close(), HOVER_GRACE);
+    };
+    const onKeydown = (event) => {
+        if (!opts.arrowOpens || event.key !== 'ArrowDown')
+            return;
+        if (opts.isOpen?.())
+            return;
+        event.preventDefault();
+        opts.open();
+    };
+    const bind = () => {
+        if (opts.on === 'hover') {
+            node.addEventListener('pointerenter', onShow);
+            node.addEventListener('pointerleave', onHide);
+            node.addEventListener('focusin', onShow);
+            node.addEventListener('focusout', onHide);
+        }
+        else {
+            node.addEventListener('click', onClick);
+            node.addEventListener('keydown', onKeydown);
+        }
+    };
+    const unbind = () => {
+        node.removeEventListener('click', onClick);
+        node.removeEventListener('keydown', onKeydown);
+        node.removeEventListener('pointerenter', onShow);
+        node.removeEventListener('pointerleave', onHide);
+        node.removeEventListener('focusin', onShow);
+        node.removeEventListener('focusout', onHide);
+    };
+    bind();
+    return {
+        update(next) {
+            unbind();
+            opts = next;
+            bind();
+        },
+        destroy() {
+            clearTimeout(timer);
+            unbind();
+        }
+    };
+}
+/**
+ * Puts `aria-haspopup`/`aria-expanded` on the real control inside a trigger
+ * wrapper, so screen readers announce the state on the thing being pressed.
+ */
+export function describeTrigger(wrapper, kind, open) {
+    const control = wrapper?.querySelector('button, a, [role="button"]');
+    if (!control)
+        return;
+    control.setAttribute('aria-haspopup', kind);
+    control.setAttribute('aria-expanded', String(open));
+}
+/** The menu items a roving-focus menu should walk, in DOM order. */
+export function menuItems(menu) {
+    return menu ? [...menu.querySelectorAll('[role="menuitem"]:not([disabled])')] : [];
+}

package/dist/index.d.ts

@@ -1,105 +1,13 @@
 /**
- * @nqmcreative/ui — public entry point.
- * Tokens live in `theme.css`; shared tone maps live in `tones.ts`.
+ * `@nqmcreative/ui` has no root export, on purpose.
+ *
+ * Every component belongs to a style, and a style is a deliberate choice — so
+ * it has to be named at the import:
+ *
+ *   import { Button } from '@nqmcreative/ui/matte';
+ *   import { Button } from '@nqmcreative/ui/paper';
+ *
+ * A default here would let people pick one by accident and never find out.
+ * Shared behaviour lives at `@nqmcreative/ui/core`.
  */
-export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText } from './tones.js';
-export type { Tone } from './tones.js';
-export { anchored } from './actions/anchor.js';
-export type { Placement, AnchorOptions } from './actions/anchor.js';
-export { clickOutside, focusTrap, focusable, navigateList, portal } from './actions/dismissable.js';
-export type { ClickOutsideOptions, FocusTrapOptions } from './actions/dismissable.js';
-export { toast } from './toast.svelte.js';
-export type { Toast, ToastOptions, ToastAction } from './toast.svelte.js';
-export { locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore } from './locale.svelte.js';
-export type { Locale } from './locale.svelte.js';
-export { default as LocaleProvider } from './components/LocaleProvider.svelte';
-export { default as Button } from './components/Button.svelte';
-export type { ButtonVariant, ButtonSize } from './components/Button.svelte';
-export { default as Link } from './components/Link.svelte';
-export { default as Input } from './components/Input.svelte';
-export type { InputSize } from './components/Input.svelte';
-export { default as Textarea } from './components/Textarea.svelte';
-export { default as Select } from './components/Select.svelte';
-export type { SelectOption } from './components/Select.svelte';
-export { default as Checkbox } from './components/Checkbox.svelte';
-export { default as Radio } from './components/Radio.svelte';
-export { default as Switch } from './components/Switch.svelte';
-export type { SwitchSize } from './components/Switch.svelte';
-export { default as Field } from './components/Field.svelte';
-export { default as Label } from './components/Label.svelte';
-export { default as PasswordInput } from './components/PasswordInput.svelte';
-export { default as NumberInput } from './components/NumberInput.svelte';
-export { default as Slider } from './components/Slider.svelte';
-export { default as RadioGroup } from './components/RadioGroup.svelte';
-export type { RadioOption } from './components/RadioGroup.svelte';
-export { default as CheckboxGroup } from './components/CheckboxGroup.svelte';
-export type { CheckboxOption } from './components/CheckboxGroup.svelte';
-export { default as SegmentedControl } from './components/SegmentedControl.svelte';
-export type { SegmentOption, SegmentedSize } from './components/SegmentedControl.svelte';
-export { default as InputGroup } from './components/InputGroup.svelte';
-export { default as Combobox } from './components/Combobox.svelte';
-export type { ComboboxOption } from './components/Combobox.svelte';
-export { default as MultiSelect } from './components/MultiSelect.svelte';
-export type { MultiSelectOption } from './components/MultiSelect.svelte';
-export { default as DatePicker } from './components/DatePicker.svelte';
-export { default as Calendar } from './components/Calendar.svelte';
-export { toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from './date.js';
-export type { DateFormat } from './date.js';
-export { default as Dropzone } from './components/Dropzone.svelte';
-export type { RejectedFile } from './components/Dropzone.svelte';
-export { default as Badge } from './components/Badge.svelte';
-export type { BadgeTone, BadgeVariant, BadgeSize } from './components/Badge.svelte';
-export { default as Avatar } from './components/Avatar.svelte';
-export type { AvatarSize } from './components/Avatar.svelte';
-export { default as AvatarGroup } from './components/AvatarGroup.svelte';
-export { default as Card } from './components/Card.svelte';
-export type { CardVariant } from './components/Card.svelte';
-export { default as Stat } from './components/Stat.svelte';
-export type { StatTrend } from './components/Stat.svelte';
-export { default as Table } from './components/Table.svelte';
-export type { TableColumn, TableSort, SortDirection } from './components/Table.svelte';
-export { default as Kbd } from './components/Kbd.svelte';
-export { default as Alert } from './components/Alert.svelte';
-export type { AlertVariant } from './components/Alert.svelte';
-export { default as Progress } from './components/Progress.svelte';
-export type { ProgressSize } from './components/Progress.svelte';
-export { default as Spinner } from './components/Spinner.svelte';
-export type { SpinnerSize } from './components/Spinner.svelte';
-export { default as Skeleton } from './components/Skeleton.svelte';
-export type { SkeletonVariant } from './components/Skeleton.svelte';
-export { default as EmptyState } from './components/EmptyState.svelte';
-export { default as Toaster } from './components/Toaster.svelte';
-export type { ToasterPosition } from './components/Toaster.svelte';
-export { default as Divider } from './components/Divider.svelte';
-export type { DividerOrientation } from './components/Divider.svelte';
-export { default as Tabs } from './components/Tabs.svelte';
-export type { TabItem, TabsVariant } from './components/Tabs.svelte';
-export { default as Accordion } from './components/Accordion.svelte';
-export { default as AccordionItem } from './components/AccordionItem.svelte';
-export { default as Breadcrumb } from './components/Breadcrumb.svelte';
-export type { BreadcrumbItem } from './components/Breadcrumb.svelte';
-export { default as Pagination } from './components/Pagination.svelte';
-export { default as Steps } from './components/Steps.svelte';
-export type { StepItem } from './components/Steps.svelte';
-export { default as Navbar } from './components/Navbar.svelte';
-export type { NavItem } from './components/Navbar.svelte';
-export { default as Sidebar } from './components/Sidebar.svelte';
-export type { SidebarItem, SidebarSection } from './components/Sidebar.svelte';
-export { default as Footer } from './components/Footer.svelte';
-export type { FooterColumn, FooterLink } from './components/Footer.svelte';
-export { default as Modal } from './components/Modal.svelte';
-export type { ModalSize } from './components/Modal.svelte';
-export { default as Drawer } from './components/Drawer.svelte';
-export type { DrawerSide, DrawerSize } from './components/Drawer.svelte';
-export { default as ConfirmDialog } from './components/ConfirmDialog.svelte';
-export { default as CommandPalette } from './components/CommandPalette.svelte';
-export type { CommandItem } from './components/CommandPalette.svelte';
-export { default as ContextMenu } from './components/ContextMenu.svelte';
-export { default as Dropdown } from './components/Dropdown.svelte';
-export { default as MenuItem } from './components/MenuItem.svelte';
-export { default as MenuSeparator } from './components/MenuSeparator.svelte';
-export { default as Popover } from './components/Popover.svelte';
-export { default as ThemeToggle, applyTheme, storedTheme } from './components/ThemeToggle.svelte';
-export type { Theme } from './components/ThemeToggle.svelte';
-export { default as Tooltip } from './components/Tooltip.svelte';
-export type { TooltipPlacement } from './components/Tooltip.svelte';
+export {};

package/dist/index.js

@@ -1,77 +1,13 @@
 /**
- * @nqmcreative/ui — public entry point.
- * Tokens live in `theme.css`; shared tone maps live in `tones.ts`.
+ * `@nqmcreative/ui` has no root export, on purpose.
+ *
+ * Every component belongs to a style, and a style is a deliberate choice — so
+ * it has to be named at the import:
+ *
+ *   import { Button } from '@nqmcreative/ui/matte';
+ *   import { Button } from '@nqmcreative/ui/paper';
+ *
+ * A default here would let people pick one by accident and never find out.
+ * Shared behaviour lives at `@nqmcreative/ui/core`.
  */
-/* --- tokens --- */
-export { TONES, focusRing, peerFocusRing, toneBorder, toneBorderLeft, toneBorderSoft, toneFill, toneFocusBorder, toneFocusWithinBorder, toneHoverBorder, toneHoverText, tonePeerChecked, tonePeerFocus, toneRing, toneSoft, toneSoftHover, toneSolid, toneSolidHover, toneSurface, toneText } from './tones.js';
-/* --- behaviour (actions + stores) --- */
-export { anchored } from './actions/anchor.js';
-export { clickOutside, focusTrap, focusable, navigateList, portal } from './actions/dismissable.js';
-export { toast } from './toast.svelte.js';
-/* --- locale --- */
-export { locale, setLocale, provideLocale, useLocale, enUS, idID, LocaleStore } from './locale.svelte.js';
-export { default as LocaleProvider } from './components/LocaleProvider.svelte';
-/* --- actions --- */
-export { default as Button } from './components/Button.svelte';
-export { default as Link } from './components/Link.svelte';
-/* --- forms --- */
-export { default as Input } from './components/Input.svelte';
-export { default as Textarea } from './components/Textarea.svelte';
-export { default as Select } from './components/Select.svelte';
-export { default as Checkbox } from './components/Checkbox.svelte';
-export { default as Radio } from './components/Radio.svelte';
-export { default as Switch } from './components/Switch.svelte';
-export { default as Field } from './components/Field.svelte';
-export { default as Label } from './components/Label.svelte';
-export { default as PasswordInput } from './components/PasswordInput.svelte';
-export { default as NumberInput } from './components/NumberInput.svelte';
-export { default as Slider } from './components/Slider.svelte';
-export { default as RadioGroup } from './components/RadioGroup.svelte';
-export { default as CheckboxGroup } from './components/CheckboxGroup.svelte';
-export { default as SegmentedControl } from './components/SegmentedControl.svelte';
-export { default as InputGroup } from './components/InputGroup.svelte';
-export { default as Combobox } from './components/Combobox.svelte';
-export { default as MultiSelect } from './components/MultiSelect.svelte';
-export { default as DatePicker } from './components/DatePicker.svelte';
-export { default as Calendar } from './components/Calendar.svelte';
-export { toISO, fromISO, today, isSameDay, addDays, addMonths, monthGrid, weekdayNames, monthLabel, isOutOfRange, formatISO, parseFormatted } from './date.js';
-export { default as Dropzone } from './components/Dropzone.svelte';
-/* --- data display --- */
-export { default as Badge } from './components/Badge.svelte';
-export { default as Avatar } from './components/Avatar.svelte';
-export { default as AvatarGroup } from './components/AvatarGroup.svelte';
-export { default as Card } from './components/Card.svelte';
-export { default as Stat } from './components/Stat.svelte';
-export { default as Table } from './components/Table.svelte';
-export { default as Kbd } from './components/Kbd.svelte';
-/* --- feedback --- */
-export { default as Alert } from './components/Alert.svelte';
-export { default as Progress } from './components/Progress.svelte';
-export { default as Spinner } from './components/Spinner.svelte';
-export { default as Skeleton } from './components/Skeleton.svelte';
-export { default as EmptyState } from './components/EmptyState.svelte';
-export { default as Toaster } from './components/Toaster.svelte';
-/* --- layout & navigation --- */
-export { default as Divider } from './components/Divider.svelte';
-export { default as Tabs } from './components/Tabs.svelte';
-export { default as Accordion } from './components/Accordion.svelte';
-export { default as AccordionItem } from './components/AccordionItem.svelte';
-export { default as Breadcrumb } from './components/Breadcrumb.svelte';
-export { default as Pagination } from './components/Pagination.svelte';
-export { default as Steps } from './components/Steps.svelte';
-/* --- app shell --- */
-export { default as Navbar } from './components/Navbar.svelte';
-export { default as Sidebar } from './components/Sidebar.svelte';
-export { default as Footer } from './components/Footer.svelte';
-/* --- overlay --- */
-export { default as Modal } from './components/Modal.svelte';
-export { default as Drawer } from './components/Drawer.svelte';
-export { default as ConfirmDialog } from './components/ConfirmDialog.svelte';
-export { default as CommandPalette } from './components/CommandPalette.svelte';
-export { default as ContextMenu } from './components/ContextMenu.svelte';
-export { default as Dropdown } from './components/Dropdown.svelte';
-export { default as MenuItem } from './components/MenuItem.svelte';
-export { default as MenuSeparator } from './components/MenuSeparator.svelte';
-export { default as Popover } from './components/Popover.svelte';
-export { default as ThemeToggle, applyTheme, storedTheme } from './components/ThemeToggle.svelte';
-export { default as Tooltip } from './components/Tooltip.svelte';
+export {};

package/dist/{components → styles/matte}/AccordionItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneText, type Tone } from '../tones.js';
+	import { toneText, type Tone } from '../../core/tones.js';
 
 	interface Props extends HTMLAttributes<HTMLDetailsElement> {
 		title: string;

package/dist/{components → styles/matte}/AccordionItem.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 interface Props extends HTMLAttributes<HTMLDetailsElement> {
     title: string;
     open?: boolean;

package/dist/{components → styles/matte}/Alert.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneBorder, toneBorderSoft, toneSurface, toneText, type Tone } from '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
+	import {
+		toneBorder,
+		toneBorderSoft,
+		toneSurface,
+		toneText,
+		type Tone
+	} from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
 
 	export type AlertVariant = 'soft' | 'outline' | 'accent';
 

package/dist/{components → styles/matte}/Alert.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export type AlertVariant = 'soft' | 'outline' | 'accent';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     tone?: Tone;

package/dist/{components → styles/matte}/Avatar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneSoft, type Tone } from '../tones.js';
+	import { toneSoft, type Tone } from '../../core/tones.js';
 
 	export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 

package/dist/{components → styles/matte}/Avatar.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
     src?: string;

package/dist/{components → styles/matte}/Badge.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneBorderSoft, toneFill, toneSoft, toneSolid, toneText, type Tone } from '../tones.js';
+	import {
+		toneBorderSoft,
+		toneFill,
+		toneSoft,
+		toneSolid,
+		toneText,
+		type Tone
+	} from '../../core/tones.js';
 
-	/** @deprecated use `Tone` — kept so existing `tone="brand" | "neutral"` still type-checks. */
-	export type BadgeTone = Tone;
 	export type BadgeVariant = 'soft' | 'solid' | 'outline';
 	export type BadgeSize = 'sm' | 'md';
 

package/dist/{components → styles/matte}/Badge.svelte.d.ts

@@ -1,8 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
-/** @deprecated use `Tone` — kept so existing `tone="brand" | "neutral"` still type-checks. */
-export type BadgeTone = Tone;
+import { type Tone } from '../../core/tones.js';
 export type BadgeVariant = 'soft' | 'solid' | 'outline';
 export type BadgeSize = 'sm' | 'md';
 interface Props extends HTMLAttributes<HTMLSpanElement> {

package/dist/{components → styles/matte}/Breadcrumb.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { toneHoverText, type Tone } from '../tones.js';
-	import { useLocale } from '../locale.svelte.js';
+	import { toneHoverText, type Tone } from '../../core/tones.js';
+	import { useLocale } from '../../core/locale.svelte.js';
 
 	export interface BreadcrumbItem {
 		label: string;

package/dist/{components → styles/matte}/Breadcrumb.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export interface BreadcrumbItem {
     label: string;
     href?: string;

package/dist/{components → styles/matte}/Button.svelte

@@ -12,7 +12,7 @@
 		toneSolidHover,
 		toneText,
 		type Tone
-	} from '../tones.js';
+	} from '../../core/tones.js';
 
 	export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link' | 'primary';
 	export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';

package/dist/{components → styles/matte}/Button.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
-import { type Tone } from '../tones.js';
+import { type Tone } from '../../core/tones.js';
 export type ButtonVariant = 'solid' | 'soft' | 'outline' | 'ghost' | 'link' | 'primary';
 export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
 interface Props extends HTMLButtonAttributes {

package/dist/styles/matte/CTASection.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneBorderSoft, toneSolid, toneSurface, type Tone } from '../../core/tones.js';
+
+	export type CTAVariant = 'tinted' | 'solid' | 'outline';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		title: string;
+		description?: string;
+		tone?: Tone;
+		variant?: CTAVariant;
+		/** Side by side on wide screens instead of stacked and centred. */
+		inline?: boolean;
+		/** The buttons. */
+		actions?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		title,
+		description,
+		tone = 'brand',
+		variant = 'tinted',
+		inline = false,
+		actions,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+
+	const variants = $derived({
+		tinted: `${toneSurface[tone]} border ${toneBorderSoft[tone]}`,
+		solid: toneSolid[tone],
+		outline: `bg-bg border ${toneBorderSoft[tone]}`
+	});
+
+	const onSolid = $derived(variant === 'solid');
+</script>
+
+<section class="w-full px-6 py-16 {className}" {...rest}>
+	<div
+		class="mx-auto flex w-full max-w-6xl gap-8 p-10 sm:p-14 {variants[variant]}
+			{inline
+			? 'flex-col lg:flex-row lg:items-center lg:justify-between'
+			: 'flex-col items-center text-center'}"
+	>
+		<div class="flex min-w-0 flex-col gap-3 {inline ? '' : 'items-center'}">
+			<h2
+				class="max-w-2xl font-heading text-3xl font-medium tracking-tight text-balance {onSolid
+					? 'text-text-inverse'
+					: 'text-text'}"
+			>
+				{title}
+			</h2>
+			{#if description}
+				<p
+					class="max-w-xl font-sans leading-relaxed text-pretty {onSolid
+						? 'text-text-inverse/80'
+						: 'text-text-secondary'}"
+				>
+					{description}
+				</p>
+			{/if}
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+
+		{#if actions}
+			<div class="flex shrink-0 flex-wrap items-center gap-3 {inline ? '' : 'justify-center'}">
+				{@render actions()}
+			</div>
+		{/if}
+	</div>
+</section>