mates-design 0.1.0-beta.2

package/dist/Mates-design/src/lib/task-manager/task-manager.d.ts

@@ -0,0 +1,69 @@
+import { type TemplateResult } from "mates";
+import type { AtomType, Task, TaskActionType } from "mates";
+import type { AttrMap } from "mates";
+import "./task-manager.css";
+export interface TaskManagerOptions<TInput, TOutput> {
+    /** Reactive task queue from {@link taskAction} (mates). */
+    taskAction: TaskActionType<TInput, TOutput>;
+    /** Primary header label (e.g. “Uploading 3 files”). */
+    title?: string;
+    /** Secondary header line (counts, status hint). */
+    subtitle?: string;
+    /** Accessible label for the header bar (success + failed share of the queue). */
+    aggregateProgressLabel?: string;
+    /** Row title from task input. */
+    formatInput?: (input: TInput) => string;
+    /** Optional second line under the row title. */
+    formatDetail?: (task: Task<TInput, TOutput>) => string | undefined;
+    /** Passed to {@link TaskActionType.start} when resuming after pause. @default 1 */
+    sessionConcurrency?: number;
+    /** Leading visual per row; default is a file icon. */
+    renderTaskIcon?: (task: Task<TInput, TOutput>) => TemplateResult;
+    /**
+     * Fixed bottom-right panel (Google Drive / Mega-style).
+     * @default false
+     */
+    floating?: boolean;
+    /**
+     * When set, a chevron toggles list visibility (`true` = list shown).
+     * If omitted, the list is always visible and no chevron is shown.
+     */
+    bodyExpandedAtom?: AtomType<boolean>;
+    /**
+     * When set, a minimize control collapses the panel to a small dock chip;
+     * the chip expands on click. If omitted, minimize is not offered.
+     */
+    minimizedAtom?: AtomType<boolean>;
+    showSessionControls?: boolean;
+    /** Per-row cancel (calls `delete` + optional callback). @default true */
+    showRowCancel?: boolean;
+    /** @deprecated Use `showRowCancel`. */
+    showRemoveTask?: boolean;
+    /** Task list (still respects `bodyExpandedAtom` when set). @default true */
+    showList?: boolean;
+    /** @deprecated Use `showList`. */
+    showTaskList?: boolean;
+    onTaskCancel?: (task: Task<TInput, TOutput>) => void;
+    /**
+     * Header “clear all” icon. **Does not clear the queue** — call this so the host can
+     * show a confirm dialog; on confirm, run `taskAction.clearAndAdd([])` (or equivalent).
+     */
+    onClearAllRequest?: () => void;
+    onPause?: () => void;
+    /** Invoked after `start()` from the header (first run or resume). */
+    onResume?: () => void;
+    testId?: string;
+    attrs?: {
+        root?: AttrMap;
+    };
+}
+/**
+ * Drive / Mega-style task queue panel: aggregate progress, pause/resume,
+ * collapsible list, per-row ring + cancel, clear-all.
+ *
+ * Pass {@link bodyExpandedAtom} / {@link minimizedAtom} from your app for
+ * collapse and dock behaviour. Uses mates {@link TaskActionType} only — no
+ * duplicate queue state.
+ */
+export declare function TaskManager<TInput, TOutput>(opts: TaskManagerOptions<TInput, TOutput>): TemplateResult;
+//# sourceMappingURL=task-manager.d.ts.map

package/dist/Mates-design/src/lib/task-manager/task-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-manager.d.ts","sourceRoot":"","sources":["../../../../../src/lib/task-manager/task-manager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAQrC,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,kBAAkB,CAAC,MAAM,EAAE,OAAO;IACjD,2DAA2D;IAC3D,UAAU,EAAE,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5C,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,iCAAiC;IACjC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,gDAAgD;IAChD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,GAAG,SAAS,CAAC;IACnE,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sDAAsD;IACtD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,cAAc,CAAC;IACjE;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrC;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yEAAyE;IACzE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACrD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC5B;AAkJD;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,OAAO,EACzC,IAAI,EAAE,kBAAkB,CAAC,MAAM,EAAE,OAAO,CAAC,GACxC,cAAc,CAoQhB"}

package/dist/Mates-design/src/lib/text/text.d.ts

@@ -0,0 +1,64 @@
+import { type TemplateResult } from "mates";
+import type { StyleMap, AttrMap } from "mates";
+import "./text.css";
+export type TextType = "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md" | "label-sm" | "code" | "overline" | "caption" | "blockquote" | "kbd" | "link" | "mark" | "del" | "ins" | "code-block" | "gradient" | "mono" | "lead" | "stat";
+export type TextColor = "default" | "muted" | "primary" | "inverse" | "error" | "success" | "warning" | "disabled" | "info" | "inherit" | "link";
+export type TextTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "label" | "code" | "kbd" | "pre";
+export interface TextOptions {
+    type?: TextType;
+    color?: TextColor;
+    /** Override the inferred HTML tag */
+    as?: TextTag;
+    truncate?: boolean;
+    /** Multi-line truncation via -webkit-line-clamp */
+    maxLines?: number;
+    /** Text alignment */
+    align?: "left" | "center" | "right";
+    /** Italic modifier */
+    italic?: boolean;
+    /** Underline modifier */
+    underline?: boolean;
+    /** Strikethrough modifier */
+    strikethrough?: boolean;
+    /** Bold override */
+    bold?: boolean;
+    /** Uppercase modifier */
+    uppercase?: boolean;
+    /** No-wrap modifier */
+    nowrap?: boolean;
+    /** When false, disables user selection */
+    selectable?: boolean;
+    /** Overrides default `data-testid="md-text"`. */
+    testId?: string;
+    styles?: {
+        root?: StyleMap;
+    };
+    attrs?: {
+        root?: AttrMap;
+    };
+}
+/**
+ * Text — renders typographic content with the appropriate semantic tag.
+ *
+ * @example
+ * Text("Welcome back", { type: "headline-md" })
+ * Text("Subtitle text", { type: "body-lg", color: "muted" })
+ * Text("console.log(x)", { type: "code" })
+ * Text("FEATURED", { type: "overline" })
+ * Text("Photo by Jane", { type: "caption" })
+ * Text("To be or not to be", { type: "blockquote" })
+ * Text("Ctrl+C", { type: "kbd" })
+ * Text("Click here", { type: "link" })
+ * Text("highlighted", { type: "mark" })
+ * Text("removed text", { type: "del" })
+ * Text("added text", { type: "ins" })
+ * Text("const x = 1;", { type: "code-block" })
+ * Text("Big Hero Title", { type: "gradient" })
+ * Text("monospace text", { type: "mono" })
+ * Text("Intro paragraph...", { type: "lead" })
+ * Text("1,234", { type: "stat" })
+ * Text("Long text...", { maxLines: 3 })
+ * Text("Centered", { align: "center" })
+ */
+export declare function Text(content: string | TemplateResult, opts?: TextOptions): TemplateResult;
+//# sourceMappingURL=text.d.ts.map

package/dist/Mates-design/src/lib/text/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../../src/lib/text/text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAChB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,aAAa,GACb,aAAa,GACb,aAAa,GACb,UAAU,GACV,UAAU,GACV,UAAU,GACV,SAAS,GACT,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,UAAU,GACV,SAAS,GACT,YAAY,GACZ,KAAK,GACL,MAAM,GACN,MAAM,GACN,KAAK,GACL,KAAK,GACL,YAAY,GACZ,UAAU,GACV,MAAM,GACN,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,MAAM,SAAS,GACjB,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,GACT,UAAU,GACV,MAAM,GACN,SAAS,GACT,MAAM,CAAC;AAEX,MAAM,MAAM,OAAO,GACf,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,GAAG,GACH,MAAM,GACN,KAAK,GACL,OAAO,GACP,MAAM,GACN,KAAK,GACL,KAAK,CAAC;AAkCV,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,qCAAqC;IACrC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,sBAAsB;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uBAAuB;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC;IAC7B,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,IAAI,CAClB,OAAO,EAAE,MAAM,GAAG,cAAc,EAChC,IAAI,GAAE,WAAgB,GACrB,cAAc,CA8HhB"}

package/dist/Mates-design/src/lib/text/text.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text.test.d.ts.map

package/dist/Mates-design/src/lib/text/text.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.test.d.ts","sourceRoot":"","sources":["../../../../../src/lib/text/text.test.ts"],"names":[],"mappings":""}

package/dist/Mates-design/src/lib/text-field/text-field.d.ts

@@ -0,0 +1,70 @@
+import { type TemplateResult } from "mates";
+import type { StyleMap, AttrMap, OnEventMap } from "mates";
+import type { IconInput } from "../icon/icon";
+import "./text-field.css";
+export type TextFieldVariant = "outlined" | "filled";
+export type TextFieldSize = "sm" | "md" | "lg";
+export type TextFieldType = "text" | "email" | "password" | "number" | "search" | "tel" | "url";
+export interface TextFieldOptions {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    type?: TextFieldType;
+    variant?: TextFieldVariant;
+    size?: TextFieldSize;
+    leadingIcon?: IconInput;
+    trailingIcon?: IconInput;
+    /** Callback when trailing icon is clicked — renders it as an accessible <button> */
+    onTrailingClick?: (e: Event) => void;
+    /** Accessible label for the trailing icon button (required when onTrailingClick is set) */
+    trailingAriaLabel?: string;
+    /** Prefix text shown inside field (e.g. "$") */
+    prefix?: string;
+    /** Suffix text shown inside field (e.g. "kg") */
+    suffix?: string;
+    helperText?: string;
+    errorText?: string;
+    error?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    maxLength?: number;
+    /** Show character counter */
+    showCount?: boolean;
+    /**
+     * Explicit ID for the `<input>` element and its `<label>`.
+     * When omitted an auto-incremented `md-tf-N` ID is generated.
+     * **Always supply this prop in SSR** — the module-level counter does not
+     * reset between server requests, which can cause mismatched IDs on
+     * hydration. In unit tests, pass a fixed ID to prevent sequence bleed
+     * across test cases.
+     */
+    id?: string;
+    name?: string;
+    autocomplete?: string;
+    /** Overrides default `data-testid="md-text-field"`. */
+    testId?: string;
+    styles?: {
+        root?: StyleMap;
+        input?: StyleMap;
+    };
+    attrs?: {
+        root?: AttrMap;
+        input?: AttrMap;
+    };
+    on?: {
+        input?: (e: Event) => void;
+        change?: (e: Event) => void;
+        root?: OnEventMap;
+    };
+}
+/**
+ * TextField — single-line text input with floating label.
+ *
+ * @example
+ * TextField({ label: "Email", type: "email", leadingIcon: "mail" })
+ * TextField({ label: "Amount", prefix: "$", suffix: "USD", helperText: "Enter USD amount" })
+ * TextField({ label: "Name", value: name(), error: !!err(), errorText: err() })
+ */
+export declare function TextField(opts?: TextFieldOptions): TemplateResult;
+//# sourceMappingURL=text-field.d.ts.map

package/dist/Mates-design/src/lib/text-field/text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../../../../src/lib/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,QAAQ,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/C,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,KAAK,CAAC;AASV,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,oFAAoF;IACpF,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,2FAA2F;IAC3F,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,KAAK,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC;IAC/C,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC5C,EAAE,CAAC,EAAE;QACH,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;QAC3B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;QAC5B,IAAI,CAAC,EAAE,UAAU,CAAC;KACnB,CAAC;CACH;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,IAAI,GAAE,gBAAqB,GAAG,cAAc,CA0JrE"}

package/dist/Mates-design/src/lib/text-field/text-field.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=text-field.test.d.ts.map

package/dist/Mates-design/src/lib/text-field/text-field.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.test.d.ts","sourceRoot":"","sources":["../../../../../src/lib/text-field/text-field.test.ts"],"names":[],"mappings":""}

package/dist/Mates-design/src/lib/text-menu/text-menu.d.ts

@@ -0,0 +1,40 @@
+import { type TemplateResult } from "mates";
+import type { PopupOptions, PopupPlacement, StyleMap, AttrMap } from "mates";
+import type { PopupListOptions } from "../popup-list/popup-list";
+import "./text-menu.css";
+export type TextMenuSize = "sm" | "md" | "lg";
+export interface TextMenuOptions {
+    /** The visible trigger label text */
+    label: string;
+    /** PopupList options — items, groups, onSelect, checkType, etc. */
+    list: PopupListOptions;
+    /**
+     * Visual size of the trigger label.
+     * Maps to: sm=text-xs, md=text-sm (default), lg=text-base
+     */
+    size?: TextMenuSize;
+    /**
+     * Popup positioning. Default: "bottom-start".
+     * Accept mates PopupPlacement string or full PopupOptions object.
+     */
+    popup?: PopupPlacement | PopupOptions;
+    /** Extra CSS class on the root element */
+    class?: string;
+    /** Overrides default data-testid="md-text-menu" */
+    testId?: string;
+    styles?: {
+        root?: StyleMap;
+    };
+    attrs?: {
+        root?: AttrMap;
+    };
+}
+/**
+ * TextMenu — a typographic dropdown trigger (plain text + chevron) that opens
+ * a {@link PopupList} floating panel. No button chrome, no border, no background.
+ *
+ * After `onSelect`, the anchor receives a synthetic click so `popup()` toggles
+ * closed (mates does not expose a public `close()` on the panel).
+ */
+export declare function TextMenu(opts: TextMenuOptions): TemplateResult;
+//# sourceMappingURL=text-menu.d.ts.map

package/dist/Mates-design/src/lib/text-menu/text-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-menu.d.ts","sourceRoot":"","sources":["../../../../../src/lib/text-menu/text-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,OAAO,iBAAiB,CAAC;AAIzB,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,GAAG,YAAY,CAAC;IACtC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC;IAC7B,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC5B;AAkBD;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,eAAe,GAAG,cAAc,CAqH9D"}

package/dist/Mates-design/src/lib/textarea/textarea.d.ts

@@ -0,0 +1,46 @@
+import { type TemplateResult } from "mates";
+import type { StyleMap, AttrMap, OnEventMap } from "mates";
+import "./textarea.css";
+export type TextareaVariant = "outlined" | "filled";
+export interface TextareaOptions {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    variant?: TextareaVariant;
+    rows?: number;
+    /** Grow to fit content automatically */
+    autoResize?: boolean;
+    helperText?: string;
+    errorText?: string;
+    error?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    maxLength?: number;
+    showCount?: boolean;
+    id?: string;
+    name?: string;
+    /** Overrides default `data-testid="md-textarea"`. */
+    testId?: string;
+    styles?: {
+        root?: StyleMap;
+        input?: StyleMap;
+    };
+    attrs?: {
+        root?: AttrMap;
+        input?: AttrMap;
+    };
+    on?: {
+        input?: (e: Event) => void;
+        change?: (e: Event) => void;
+        root?: OnEventMap;
+    };
+}
+/**
+ * Textarea — multi-line text input with floating label.
+ *
+ * @example
+ * Textarea({ label: "Message", rows: 4, helperText: "Max 500 chars", maxLength: 500, showCount: true })
+ */
+export declare function Textarea(opts?: TextareaOptions): TemplateResult;
+//# sourceMappingURL=textarea.d.ts.map

package/dist/Mates-design/src/lib/textarea/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../../../src/lib/textarea/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,gBAAgB,CAAC;AAExB,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,CAAC;AAIpD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,KAAK,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC;IAC/C,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC5C,EAAE,CAAC,EAAE;QACH,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;QAC3B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;QAC5B,IAAI,CAAC,EAAE,UAAU,CAAC;KACnB,CAAC;CACH;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,IAAI,GAAE,eAAoB,GAAG,cAAc,CAiHnE"}

package/dist/Mates-design/src/lib/textarea/textarea.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=textarea.test.d.ts.map

package/dist/Mates-design/src/lib/textarea/textarea.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.test.d.ts","sourceRoot":"","sources":["../../../../../src/lib/textarea/textarea.test.ts"],"names":[],"mappings":""}

package/dist/Mates-design/src/lib/theme/theme.d.ts

@@ -0,0 +1,86 @@
+import { themeAtom } from "mates";
+import type { ThemeAtomType, ThemeValue } from "mates";
+export type { ThemeAtomType, ThemeValue };
+export { themeAtom };
+/**
+ * Bootstraps the mates-design theme system.
+ *
+ * - Initialises the `themeAtom` singleton (reads `localStorage["mates-theme"]`
+ *   or falls back to the OS `prefers-color-scheme`).
+ * - Optionally forces a specific theme on first call.
+ * - Returns the shared `ThemeAtomType` so you can call `.toggle()`,
+ *   `.setToDark()`, `.setToLight()`, `.setToAuto()`, or read `.resolved`.
+ *
+ * Safe to call multiple times — the atom is a singleton; subsequent calls are
+ * no-ops (except when an explicit `initial` value is passed, which sets it).
+ *
+ * @param initial  Optional starting theme. When provided, overrides any stored
+ *                 preference on this call. Subsequent `initTheme()` calls with
+ *                 no argument will not override again.
+ *
+ * @example
+ * // In your app entry point (e.g. main.ts):
+ * import { initTheme } from "mates-design";
+ * const theme = initTheme();
+ * theme.toggle(); // flip between light/dark
+ *
+ * @example
+ * // Force dark on first load:
+ * import { initTheme } from "mates-design";
+ * initTheme("dark");
+ */
+export declare function initTheme(initial?: ThemeValue): ThemeAtomType;
+/**
+ * Returns the shared `ThemeAtomType` singleton.
+ *
+ * Identical to calling `themeAtom()` directly — this is a named alias that
+ * reads more naturally inside component or view functions.
+ *
+ * The returned atom is reactive: reading `theme()` or `theme.resolved` inside
+ * a mates reactive context will subscribe the enclosing computation to theme
+ * changes, causing it to re-run when the user switches themes.
+ *
+ * @example
+ * import { useTheme } from "mates-design";
+ *
+ * function ThemeToggleButton() {
+ *   const theme = useTheme();
+ *   return Button(theme.resolved === "dark" ? "Light mode" : "Dark mode", {
+ *     variant: "ghost",
+ *     icon: theme.resolved === "dark" ? "light_mode" : "dark_mode",
+ *     on: { root: { click: () => theme.toggle() } },
+ *   });
+ * }
+ */
+export declare function useTheme(): ThemeAtomType;
+/**
+ * Returns the current *resolved* theme — always `"light"` or `"dark"`,
+ * never `"auto"`.
+ *
+ * Reads the `themeAtom` singleton. Call this inside a reactive context
+ * (e.g. inside a mates `computed()` or a component render function) to
+ * automatically subscribe to theme changes.
+ *
+ * @example
+ * import { currentTheme } from "mates-design";
+ *
+ * // Inside a reactive render:
+ * const logoSrc = currentTheme() === "dark"
+ *   ? "/logo-white.svg"
+ *   : "/logo-dark.svg";
+ */
+export declare function currentTheme(): "light" | "dark";
+/**
+ * Returns `true` when the current resolved theme is `"dark"`.
+ *
+ * Convenience boolean helper — equivalent to `currentTheme() === "dark"`.
+ * Reactive when called inside a mates reactive context.
+ */
+export declare function isDarkTheme(): boolean;
+/**
+ * Returns `true` when the current resolved theme is `"light"`.
+ *
+ * Reactive when called inside a mates reactive context.
+ */
+export declare function isLightTheme(): boolean;
+//# sourceMappingURL=theme.d.ts.map

package/dist/Mates-design/src/lib/theme/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../src/lib/theme/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEvD,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC;AAG1C,OAAO,EAAE,SAAS,EAAE,CAAC;AAoBrB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,SAAS,CAAC,OAAO,CAAC,EAAE,UAAU,GAAG,aAAa,CAQ7D;AAmBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,IAAI,aAAa,CAExC;AAWD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,IAAI,OAAO,GAAG,MAAM,CAE/C;AAID;;;;;GAKG;AACH,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,IAAI,OAAO,CAEtC"}

package/dist/Mates-design/src/lib/time-picker/time-picker.d.ts

@@ -0,0 +1,33 @@
+import { type TemplateResult } from "mates";
+import "./time-picker.css";
+export interface TimeValue {
+    hour: number;
+    minute: number;
+}
+export interface TimePickerOptions {
+    value?: TimeValue | null;
+    placeholder?: string;
+    label?: string;
+    helper?: string;
+    error?: boolean;
+    disabled?: boolean;
+    /** Minute dropdown step (1–30). Default 5. */
+    minuteStep?: number;
+    /** BCP 47 locale for AM/PM labels and default trigger format. Omit for runtime default. */
+    locale?: string;
+    /** Format the trigger label. */
+    format?: (v: TimeValue) => string;
+    onChange?: (v: TimeValue | null) => void;
+    id?: string;
+}
+/** Localised day-period strings for the period `<select>` (e.g. "AM"/"PM", "a. m."/"p. m.", …). */
+export declare function localizedDayPeriodLabels(locale?: string): {
+    am: string;
+    pm: string;
+};
+/**
+ * TimePicker — AM/PM, 1–12 hour, then minute dropdowns. Values are still 24h in `TimeValue`.
+ * When `value` is null, the panel preselects the current local time (`getHours` / `getMinutes`).
+ */
+export declare function TimePicker(opts?: TimePickerOptions): TemplateResult;
+//# sourceMappingURL=time-picker.d.ts.map

package/dist/Mates-design/src/lib/time-picker/time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../../../src/lib/time-picker/time-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gCAAgC;IAChC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,MAAM,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAiBD,mGAAmG;AACnG,wBAAgB,wBAAwB,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ,CAcA;AAgFD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,IAAI,GAAE,iBAAsB,GAAG,cAAc,CAoLvE"}

package/dist/Mates-design/src/lib/timeline/timeline.d.ts

@@ -0,0 +1,65 @@
+import { type TemplateResult } from "mates";
+import type { StyleMap, AttrMap } from "mates";
+import type { IconInput } from "../icon/icon";
+import "./timeline.css";
+export type TimelineMode = "left" | "right" | "alternate";
+export type TimelineItemColor = "primary" | "success" | "error" | "warning" | "neutral";
+export type TimelineVariant = "default" | "outlined";
+export interface TimelineItem {
+    /** Primary content displayed alongside the dot. */
+    content: string | TemplateResult;
+    /** Optional label shown on the opposite side in alternate mode, or above content in left/right. */
+    label?: string | TemplateResult;
+    /** Optional timestamp displayed beneath content. */
+    timestamp?: string;
+    /** Dot color. Default `"primary"`. */
+    color?: TimelineItemColor;
+    /** Custom icon for the dot. When omitted a simple circle dot is rendered. */
+    icon?: IconInput;
+}
+export interface TimelineOptions {
+    /** The timeline items to render. */
+    items: TimelineItem[];
+    /** Placement of the dot relative to content. Default `"left"` (dot on the left). */
+    mode?: TimelineMode;
+    /** Render items in reverse order. Default `false`. */
+    reverse?: boolean;
+    /**
+     * Show a "pending" ghost item at the tail of the timeline.
+     * - `true`  → spinner dot with no content.
+     * - `string` / `TemplateResult` → rendered as the pending item's content.
+     */
+    pending?: boolean | string | TemplateResult;
+    /** Visual style for dots. `"default"` = filled, `"outlined"` = hollow ring. Default `"default"`. */
+    variant?: TimelineVariant;
+    /** Overrides default `data-testid="md-timeline"`. */
+    testId?: string;
+    styles?: {
+        root?: StyleMap;
+    };
+    attrs?: {
+        root?: AttrMap;
+    };
+}
+/**
+ * Timeline — vertical event list with connecting lines and colored dots.
+ *
+ * @example
+ * Timeline({
+ *   items: [
+ *     { content: "Created account", timestamp: "2024-01-01", color: "success", icon: "check_circle" },
+ *     { content: "Submitted application", timestamp: "2024-01-15" },
+ *     { content: "Under review", timestamp: "2024-02-01", color: "warning" },
+ *   ],
+ *   mode: "left",
+ * })
+ *
+ * @example
+ * Timeline({
+ *   items: myItems,
+ *   mode: "alternate",
+ *   pending: "Processing…",
+ * })
+ */
+export declare function Timeline(opts: TimelineOptions): TemplateResult;
+//# sourceMappingURL=timeline.d.ts.map

package/dist/Mates-design/src/lib/timeline/timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../../src/lib/timeline/timeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,gBAAgB,CAAC;AAIxB,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,CAAC;AAC1D,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,CAAC;AACd,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AAErD,MAAM,WAAW,YAAY;IAC3B,mDAAmD;IACnD,OAAO,EAAE,MAAM,GAAG,cAAc,CAAC;IACjC,mGAAmG;IACnG,KAAK,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAChC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,6EAA6E;IAC7E,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,oFAAoF;IACpF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,cAAc,CAAC;IAC5C,oGAAoG;IACpG,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC;IAC7B,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC5B;AAoJD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,eAAe,GAAG,cAAc,CAoD9D"}

package/dist/Mates-design/src/lib/tooltip/tooltip.d.ts

@@ -0,0 +1,35 @@
+import { type TemplateResult } from "mates";
+import { tooltip as matesTooltip } from "mates";
+import type { StyleMap, AttrMap, TipContent, TipStyle } from "mates";
+import "./tooltip.css";
+export type TooltipDisplay = "inline-flex" | "inline-block" | "block";
+export interface TooltipOptions {
+    /** Tooltip body (string or lit-html). */
+    content: TipContent;
+    /** Focusable/hoverable trigger content. */
+    trigger: TemplateResult;
+    /**
+     * Style overrides forwarded to mates `tooltip()` (delay, maxWidth, padding, …).
+     * Defaults use rem and design tokens.
+     */
+    tip?: TipStyle;
+    /** Extra class on the anchor wrapper. */
+    class?: string;
+    display?: TooltipDisplay;
+    /** Overrides default `data-testid="md-tooltip-anchor"`. */
+    testId?: string;
+    styles?: {
+        root?: StyleMap;
+    };
+    attrs?: {
+        root?: AttrMap;
+    };
+}
+/**
+ * Wraps a trigger with a hover/focus tooltip (mates `tooltip()` directive).
+ * Positions above/below the anchor automatically; escapes `overflow:hidden`.
+ */
+export declare function Tooltip(opts: TooltipOptions): TemplateResult;
+/** Re-export mates directive for attaching tooltips to existing elements. */
+export { matesTooltip as tooltipDirective };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/Mates-design/src/lib/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/lib/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAe,OAAO,IAAI,YAAY,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,cAAc,GAAG,OAAO,CAAC;AAEtE,MAAM,WAAW,cAAc;IAC7B,yCAAyC;IACzC,OAAO,EAAE,UAAU,CAAC;IACpB,2CAA2C;IAC3C,OAAO,EAAE,cAAc,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC;IAC7B,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC5B;AAQD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,cAAc,CA+D5D;AAED,6EAA6E;AAC7E,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAE,CAAC"}

package/dist/Mates-design/src/lib/tooltip/tooltip.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tooltip.test.d.ts.map

package/dist/Mates-design/src/lib/tooltip/tooltip.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.test.d.ts","sourceRoot":"","sources":["../../../../../src/lib/tooltip/tooltip.test.ts"],"names":[],"mappings":""}