mates-design 0.1.0-beta.2

package/dist/Mates-design/src/lib/qr-code/qr-code.d.ts

@@ -0,0 +1,74 @@
+import { type TemplateResult } from "mates";
+import type { StyleMap, AttrMap, OnEventMap } from "mates";
+import "./qr-code.css";
+export type QRCodeErrorLevel = "L" | "M" | "Q" | "H";
+export type QRCodeStatus = "active" | "expired" | "loading" | "scanned";
+export interface QRCodeOptions {
+    /** The data string to encode into a QR code. */
+    value: string;
+    /** Pixel size of the QR code. Default 160. */
+    size?: number;
+    /** Module (dot) color. Default "var(--md-color-text)". */
+    color?: string;
+    /** Background color. Default "transparent". */
+    bgColor?: string;
+    /** Show a border card around the QR code. Default true. */
+    bordered?: boolean;
+    /** Error correction level. Default "M". */
+    errorLevel?: QRCodeErrorLevel;
+    /** URL of a center icon overlay image. */
+    icon?: string;
+    /** Center icon size in px. Default size * 0.25. */
+    iconSize?: number;
+    /** Status of the QR code. Default "active". */
+    status?: QRCodeStatus;
+    /** Callback when refresh is clicked (expired state). */
+    onRefresh?: () => void;
+    /** Overrides default `data-testid="md-qr-code"`. */
+    testId?: string;
+    styles?: {
+        root?: StyleMap;
+    };
+    attrs?: {
+        root?: AttrMap;
+    };
+    on?: {
+        root?: OnEventMap;
+    };
+}
+interface QRModules {
+    modules: boolean[][];
+    size: number;
+}
+/** Generate a QR code boolean matrix from a string. */
+export declare function generateQRMatrix(data: string, errorLevel?: QRCodeErrorLevel): QRModules;
+/**
+ * QRCode — generates and displays a QR code from a string value.
+ *
+ * Renders as inline SVG with `<rect>` elements for each module. Supports
+ * center icon overlay, loading / expired / scanned states, and theming.
+ *
+ * @example
+ * QRCode({ value: "https://example.com" })
+ *
+ * @example
+ * QRCode({
+ *   value: "https://example.com/verify",
+ *   size: 200,
+ *   color: "#1677ff",
+ *   bordered: true,
+ *   icon: "https://example.com/logo.png",
+ *   errorLevel: "H",
+ * })
+ *
+ * @example
+ * // Expired state with refresh
+ * QRCode({
+ *   value: token,
+ *   status: "expired",
+ *   onRefresh: () => fetchNewToken(),
+ * })
+ */
+export declare function QRCode(opts: QRCodeOptions): TemplateResult;
+export {};
+//# sourceMappingURL=qr-code.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.d.ts","sourceRoot":"","sources":["../../../../../src/lib/qr-code/qr-code.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;AAK3D,OAAO,eAAe,CAAC;AAIvB,MAAM,MAAM,gBAAgB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,aAAa;IAC5B,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oDAAoD;IACpD,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;IAC3B,EAAE,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,UAAU,CAAA;KAAE,CAAC;CAC5B;AAidD,UAAU,SAAS;IACjB,OAAO,EAAE,OAAO,EAAE,EAAE,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;CACd;AA2bD,uDAAuD;AACvD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,EACZ,UAAU,GAAE,gBAAsB,GACjC,SAAS,CAsCX;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,aAAa,GAAG,cAAc,CAyM1D"}

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

@@ -0,0 +1,37 @@
+import { type TemplateResult } from "mates";
+import type { StyleMap, AttrMap, OnEventMap } from "mates";
+import "./radio.css";
+export type RadioSize = "sm" | "md" | "lg";
+export interface RadioOptions {
+    label?: string | TemplateResult;
+    checked?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    size?: RadioSize;
+    id?: string;
+    name?: string;
+    value?: string;
+    /** Overrides default `data-testid="md-radio"`. */
+    testId?: string;
+    styles?: {
+        root?: StyleMap;
+        label?: StyleMap;
+    };
+    attrs?: {
+        root?: AttrMap;
+        input?: AttrMap;
+    };
+    on?: {
+        change?: (e: Event) => void;
+        root?: OnEventMap;
+    };
+}
+/**
+ * Radio — styled radio button. Use the same `name` to group.
+ *
+ * @example
+ * Radio({ label: "Option A", name: "size", value: "a", checked: selected() === "a",
+ *   on: { change: () => setSelected("a") } })
+ */
+export declare function Radio(opts?: RadioOptions): TemplateResult;
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../../../src/lib/radio/radio.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,aAAa,CAAC;AAErB,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,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;QAAE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,UAAU,CAAA;KAAE,CAAC;CACzD;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,IAAI,GAAE,YAAiB,GAAG,cAAc,CA6D7D"}

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

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

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

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

package/dist/Mates-design/src/lib/range-slider/range-slider.d.ts

@@ -0,0 +1,37 @@
+import { type TemplateResult } from "mates";
+import type { AttrMap } from "mates";
+import "./range-slider.css";
+export interface RangeSliderOptions {
+    /** [low, high] tuple. Both values must be within [min, max]. */
+    value?: [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    /** Show floating value labels above each thumb */
+    showValues?: boolean;
+    /** Format a thumb value for display */
+    format?: (v: number) => string;
+    label?: string;
+    /** Called on every input event — receives the new [lo, hi] tuple. */
+    onChange?: (value: [number, number]) => void;
+    id?: string;
+    name?: string;
+    /**
+     * When true, Tab / Shift+Tab cycle only between the two handles (does not move
+     * to the next field). Press Escape to blur a handle, then Tab continues normally.
+     */
+    trapFocus?: boolean;
+    /** Overrides default `data-testid="md-range-slider"`. */
+    testId?: string;
+    attrs?: {
+        root?: AttrMap;
+    };
+}
+/**
+ * RangeSlider — two-thumb range. Pointer interaction is handled on the track
+ * (closest thumb is chosen) so both handles work; native inputs stay for
+ * keyboard access and form names.
+ */
+export declare function RangeSlider(opts?: RangeSliderOptions): TemplateResult;
+//# sourceMappingURL=range-slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"range-slider.d.ts","sourceRoot":"","sources":["../../../../../src/lib/range-slider/range-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,oBAAoB,CAAC;AAI5B,MAAM,WAAW,kBAAkB;IACjC,gEAAgE;IAChE,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC5B;AAiED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,GAAE,kBAAuB,GAAG,cAAc,CA2LzE"}

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

@@ -0,0 +1,45 @@
+import { type TemplateResult } from "mates";
+import type { StyleMap, AttrMap } from "mates";
+import "./rating.css";
+export type RatingSize = "sm" | "md" | "lg";
+export interface RatingOptions {
+    /** Current rating; clamped to `[min, max]`. Use `0` with `min: 0` for unrated. */
+    value: number;
+    /** @default 5 */
+    max?: number;
+    /** @default 0 */
+    min?: number;
+    readOnly?: boolean;
+    disabled?: boolean;
+    /** @default false — click left/right half of a star when true */
+    half?: boolean;
+    /**
+     * When `min` is `0`, clicking the star that matches the current value again clears to `min`.
+     */
+    clearable?: boolean;
+    onChange?: (value: number) => void;
+    size?: RatingSize;
+    /** Renders a hidden input for native form posts. */
+    name?: string;
+    id?: string;
+    /** Overrides the default accessible name. */
+    ariaLabel?: string;
+    /** Show numeric value after stars. */
+    showValue?: boolean;
+    /** Decimals when `showValue` is true. @default 1 */
+    valuePrecision?: number;
+    /** Overrides default `data-testid="md-rating"`. */
+    testId?: string;
+    styles?: {
+        root?: StyleMap;
+    };
+    attrs?: {
+        root?: AttrMap;
+    };
+}
+/**
+ * Star rating — controlled value, optional half stars, read-only / disabled modes.
+ * Interactive root uses `role="slider"` with arrow keys (step 1 or 0.5).
+ */
+export declare function Rating(opts: RatingOptions): TemplateResult;
+//# sourceMappingURL=rating.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../../../../src/lib/rating/rating.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,aAAa;IAC5B,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iBAAiB;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,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;AA2CD;;;GAGG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,aAAa,GAAG,cAAc,CAuJ1D"}

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

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

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

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

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

@@ -0,0 +1,37 @@
+import { type TemplateResult } from "mates";
+import type { StyleMap, AttrMap } from "mates";
+import type { IconInput } from "../icon/icon";
+import "./result.css";
+export type ResultStatus = "success" | "error" | "info" | "warning" | "404" | "403" | "500";
+export interface ResultOptions {
+    status?: ResultStatus;
+    title?: string;
+    subtitle?: string | TemplateResult;
+    /** Override the default status icon. Only applies to icon-based statuses (success/error/info/warning). */
+    icon?: IconInput;
+    /** Action buttons area rendered below the subtitle. */
+    extra?: TemplateResult;
+    /** Additional content rendered at the bottom. */
+    children?: TemplateResult;
+    /** Overrides default `data-testid="md-result"`. */
+    testId?: string;
+    styles?: {
+        root?: StyleMap;
+        icon?: StyleMap;
+        title?: StyleMap;
+        subtitle?: StyleMap;
+        extra?: StyleMap;
+    };
+    attrs?: {
+        root?: AttrMap;
+    };
+}
+/**
+ * Result — operation result page for success, error, info, warning, or HTTP error codes.
+ *
+ * @example
+ * Result({ status: "success", title: "Payment Complete", subtitle: "Order #1234 has been placed." })
+ * Result({ status: "404", title: "Page Not Found", subtitle: "Sorry, the page you visited does not exist.", extra: html`...` })
+ */
+export declare function Result(opts?: ResultOptions): TemplateResult;
+//# sourceMappingURL=result.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"result.d.ts","sourceRoot":"","sources":["../../../../../src/lib/result/result.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;AAE9C,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAmB5F,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAI,YAAY,CAAC;IACxB,KAAK,CAAC,EAAK,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IACnC,0GAA0G;IAC1G,IAAI,CAAC,EAAM,SAAS,CAAC;IACrB,uDAAuD;IACvD,KAAK,CAAC,EAAK,cAAc,CAAC;IAC1B,iDAAiD;IACjD,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,mDAAmD;IACnD,MAAM,CAAC,EAAI,MAAM,CAAC;IAClB,MAAM,CAAC,EAAI;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;QAAC,KAAK,CAAC,EAAE,QAAQ,CAAC;QAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC;QAAC,KAAK,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC;IACzG,KAAK,CAAC,EAAK;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC/B;AAED;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,IAAI,GAAE,aAAkB,GAAG,cAAc,CAsE/D"}

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

@@ -0,0 +1,16 @@
+import type { TemplateResult } from "mates";
+import type { TextFieldOptions } from "../text-field/text-field";
+export interface SearchFieldOptions extends Omit<TextFieldOptions, "type" | "leadingIcon" | "onTrailingClick" | "trailingAriaLabel"> {
+    /** Shown when `value` is non-empty; clears the field */
+    onClear?: () => void;
+    clearLabel?: string;
+}
+/**
+ * Search-styled text field (leading search icon, optional clear control).
+ *
+ * The `<input>` receives `type="search"` and `role="searchbox"`.
+ * When `onClear` is provided and the value is non-empty a clear button
+ * is rendered as an accessible `<button>` with `aria-label`.
+ */
+export declare function SearchField(opts?: SearchFieldOptions): TemplateResult;
+//# sourceMappingURL=search-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../../../src/lib/search-field/search-field.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,gBAAgB,EAChB,MAAM,GAAG,aAAa,GAAG,iBAAiB,GAAG,mBAAmB,CACjE;IACC,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,IAAI,GAAE,kBAAuB,GAAG,cAAc,CA8BzE"}

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

@@ -0,0 +1,78 @@
+import { type TemplateResult } from "mates";
+import type { StyleMap, AttrMap, OnEventMap } from "mates";
+import type { IconInput } from "../icon/icon";
+import "./segmented.css";
+export type SegmentedSize = "sm" | "md" | "lg";
+export interface SegmentedOption {
+    value: string;
+    label?: string | TemplateResult;
+    icon?: IconInput;
+    disabled?: boolean;
+}
+export interface SegmentedOptions {
+    /** The option definitions to render. */
+    options?: SegmentedOption[];
+    /** Currently selected value. */
+    value?: string;
+    /** Called when the user selects a different option. */
+    onChange?: (value: string) => void;
+    /** When `true`, the control stretches to fill its container width. */
+    block?: boolean;
+    /** Visual size variant. Default `"md"`. */
+    size?: SegmentedSize;
+    /** Disable the entire control. */
+    disabled?: boolean;
+    /** Accessible label for the `role="radiogroup"` container. */
+    ariaLabel?: string;
+    /** Overrides default `data-testid="md-segmented"`. */
+    testId?: string;
+    styles?: {
+        root?: StyleMap;
+    };
+    attrs?: {
+        root?: AttrMap;
+    };
+    on?: {
+        root?: OnEventMap;
+    };
+}
+/**
+ * Segmented — iOS-style segmented control with a sliding pill indicator that
+ * animates between options.
+ *
+ * The component renders a rounded track with individual option buttons. The
+ * currently selected option has an elevated "pill" background that slides
+ * smoothly when the selection changes. The sliding indicator position and
+ * width are computed in CSS via a custom property (`--md-seg-index`) set on
+ * the root, combined with percentage-based `left` / `width` calculations
+ * driven by the total option count (`--md-seg-count`).
+ *
+ * @example
+ * const view = atom("daily");
+ *
+ * Segmented({
+ *   options: [
+ *     { value: "daily",   label: "Daily" },
+ *     { value: "weekly",  label: "Weekly" },
+ *     { value: "monthly", label: "Monthly" },
+ *   ],
+ *   value:    view(),
+ *   onChange: (v) => view.set(v),
+ * })
+ *
+ * @example
+ * // With icons, block mode, small size
+ * Segmented({
+ *   options: [
+ *     { value: "list", label: "List",  icon: "view_list" },
+ *     { value: "grid", label: "Grid",  icon: "grid_view" },
+ *     { value: "map",  label: "Map",   icon: "map", disabled: true },
+ *   ],
+ *   value:    "list",
+ *   onChange: (v) => {},
+ *   block:   true,
+ *   size:    "sm",
+ * })
+ */
+export declare function Segmented(opts?: SegmentedOptions): TemplateResult;
+//# sourceMappingURL=segmented.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.d.ts","sourceRoot":"","sources":["../../../../../src/lib/segmented/segmented.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,iBAAiB,CAAC;AAIzB,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,wCAAwC;IACxC,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sEAAsE;IACtE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,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;IAC3B,EAAE,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,UAAU,CAAA;KAAE,CAAC;CAC5B;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,SAAS,CAAC,IAAI,GAAE,gBAAqB,GAAG,cAAc,CAuJrE"}

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

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

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

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

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

@@ -0,0 +1,72 @@
+import { type TemplateResult } from "mates";
+import type { StyleMap, AttrMap, OnEventMap, AtomType, FormAtom } from "mates";
+import type { PopupListItemData } from "../popup-list-item/popup-list-item";
+import "./select.css";
+export type SelectVariant = "outlined" | "filled";
+export type SelectSize = "sm" | "md" | "lg";
+export type { PopupListItemData as SelectItem };
+export interface SelectOptions {
+    items: PopupListItemData[];
+    /** Controlled selection — array of selected item IDs. */
+    selected?: string[];
+    placeholder?: string;
+    /** Static label rendered above the trigger. */
+    label?: string;
+    variant?: SelectVariant;
+    size?: SelectSize;
+    /** Allow multiple selections (renders checkboxes, keeps popup open). */
+    multiple?: boolean;
+    disabled?: boolean;
+    /** Error message shown below the trigger. */
+    error?: string;
+    /** Helper text shown below the trigger (ignored when error is set). */
+    helper?: string;
+    /** Min-width of the popup panel. Defaults to "12.5rem". */
+    minWidth?: string;
+    /** Max-height of the scrollable list. Defaults to "17.5rem". */
+    maxHeight?: string;
+    /** Message shown when items array is empty. */
+    emptyText?: string;
+    /** Show skeleton loading rows. */
+    loading?: boolean;
+    /** Skeleton row count while loading. Defaults to 5. */
+    skeletonCount?: number;
+    /**
+     * Called whenever the selection changes.
+     * Receives the full new `ids` array and the matching item objects.
+     */
+    onChange?: (ids: string[], items: PopupListItemData[]) => void;
+    /**
+     * Atom that holds selected items as full objects. Eliminates manual
+     * selected/onChange wiring. FormAtom also surfaces validation errors.
+     */
+    bind?: AtomType<PopupListItemData[]> | FormAtom<PopupListItemData[]>;
+    /** Overrides default `data-testid="md-select"`. */
+    testId?: string;
+    attrs?: {
+        root?: AttrMap;
+    };
+    styles?: {
+        root?: StyleMap;
+    };
+    on?: {
+        root?: OnEventMap;
+    };
+}
+/**
+ * Select — fully controlled dropdown.
+ *
+ * @example
+ * // In a closure component outer scope:
+ * const sel = atom<string[]>([]);
+ *
+ * // In the render function:
+ * ${Select({
+ *   items: [{ id: "a", label: "Alpha" }, { id: "b", label: "Beta" }],
+ *   selected: sel(),
+ *   label: "Pick one",
+ *   onChange: (ids) => sel.set(ids),
+ * })}
+ */
+export declare function Select(opts: SelectOptions): TemplateResult;
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../../../src/lib/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAY/E,OAAO,KAAK,EACV,iBAAiB,EAElB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,cAAc,CAAC;AAItB,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,QAAQ,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,YAAY,EAAE,iBAAiB,IAAI,UAAU,EAAE,CAAC;AAEhD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,IAAI,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,iBAAiB,EAAE,CAAC,GAAG,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;IACrE,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC3B,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC;IAC7B,EAAE,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,UAAU,CAAA;KAAE,CAAC;CAC5B;AAOD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,aAAa,GAAG,cAAc,CAyQ1D"}

package/dist/Mates-design/src/lib/shorts-reel/shorts-reel.d.ts

@@ -0,0 +1,27 @@
+import { type TemplateResult } from "mates";
+import type { AttrMap } from "mates";
+import "./shorts-reel.css";
+export interface ShortsReelItem {
+    id: string;
+    /** Poster or image slide */
+    posterUrl?: string;
+    /** Video source (optional); if omitted, poster is shown full-bleed */
+    videoUrl?: string;
+    /** Bottom overlay caption */
+    title?: string;
+    description?: string;
+}
+export interface ShortsReelOptions {
+    items: ShortsReelItem[];
+    /** Muted autoplay for inline video (browser-dependent) */
+    videoMuted?: boolean;
+    testId?: string;
+    attrs?: {
+        root?: AttrMap;
+    };
+}
+/**
+ * Vertical full-viewport slides (shorts-style). Touch scroll + keyboard arrows / Page Up/Down.
+ */
+export declare function ShortsReel(opts: ShortsReelOptions): TemplateResult;
+//# sourceMappingURL=shorts-reel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shorts-reel.d.ts","sourceRoot":"","sources":["../../../../../src/lib/shorts-reel/shorts-reel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC5B;AAsCD;;GAEG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,iBAAiB,GAAG,cAAc,CA4ElE"}

package/dist/Mates-design/src/lib/site-banner/site-banner.d.ts

@@ -0,0 +1,17 @@
+import { type TemplateResult } from "mates";
+import type { AttrMap } from "mates";
+import "./site-banner.css";
+export interface SiteBannerOptions {
+    /** Main message (string or rich template) */
+    message: string | TemplateResult;
+    /** Optional link or button slot */
+    action?: TemplateResult;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    testId?: string;
+    attrs?: {
+        root?: AttrMap;
+    };
+}
+export declare function SiteBanner(opts: SiteBannerOptions): TemplateResult;
+//# sourceMappingURL=site-banner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"site-banner.d.ts","sourceRoot":"","sources":["../../../../../src/lib/site-banner/site-banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,iBAAiB;IAChC,6CAA6C;IAC7C,OAAO,EAAE,MAAM,GAAG,cAAc,CAAC;IACjC,mCAAmC;IACnC,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;CAC5B;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,iBAAiB,GAAG,cAAc,CAmClE"}

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

@@ -0,0 +1,21 @@
+import { type TemplateResult } from "mates";
+import type { StyleMap, AttrMap } from "mates";
+import "./skeleton.css";
+export type SkeletonVariant = "text" | "rect" | "circle";
+export interface SkeletonOptions {
+    variant?: SkeletonVariant;
+    width?: string;
+    height?: string;
+    /** Number of text-line skeletons to stack */
+    lines?: number;
+    /** Overrides default `data-testid` (shape-specific). */
+    testId?: string;
+    attrs?: {
+        root?: AttrMap;
+    };
+    styles?: {
+        root?: StyleMap;
+    };
+}
+export declare function Skeleton(opts?: SkeletonOptions): TemplateResult;
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../../src/lib/skeleton/skeleton.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,gBAAgB,CAAC;AAExB,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEzD,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,KAAK,CAAC,EAAI,MAAM,CAAC;IACjB,MAAM,CAAC,EAAG,MAAM,CAAC;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAI,MAAM,CAAC;IACjB,wDAAwD;IACxD,MAAM,CAAC,EAAG,MAAM,CAAC;IACjB,KAAK,CAAC,EAAI;QAAE,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAC7B,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC;CAC9B;AAED,wBAAgB,QAAQ,CAAC,IAAI,GAAE,eAAoB,GAAG,cAAc,CAqEnE"}

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { type TemplateResult } from "mates";
+import type { StyleMap, AttrMap, OnEventMap } from "mates";
+import "./slider.css";
+export interface SliderOptions {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    /** Show current value as a floating label above thumb */
+    showValue?: boolean;
+    /** Format the displayed value */
+    format?: (v: number) => string;
+    label?: string;
+    id?: string;
+    name?: string;
+    /** Overrides default `data-testid="md-slider"`. */
+    testId?: string;
+    styles?: {
+        root?: StyleMap;
+    };
+    attrs?: {
+        root?: AttrMap;
+        input?: AttrMap;
+    };
+    on?: {
+        input?: (e: Event) => void;
+        change?: (e: Event) => void;
+        root?: OnEventMap;
+    };
+}
+/**
+ * Slider — range input with styled track and animated thumb.
+ *
+ * @example
+ * Slider({ value: 40, min: 0, max: 100 })
+ * Slider({ value: vol(), showValue: true, format: v => `${v}%`, on: { input: e => setVol(+e.target.value) } })
+ */
+export declare function Slider(opts?: SliderOptions): TemplateResult;
+//# sourceMappingURL=slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../../../src/lib/slider/slider.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,cAAc,CAAC;AAEtB,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAQ,MAAM,CAAC;IACrB,GAAG,CAAC,EAAU,MAAM,CAAC;IACrB,GAAG,CAAC,EAAU,MAAM,CAAC;IACrB,IAAI,CAAC,EAAS,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAK,OAAO,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAI,OAAO,CAAC;IACtB,iCAAiC;IACjC,MAAM,CAAC,EAAO,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,KAAK,CAAC,EAAQ,MAAM,CAAC;IACrB,EAAE,CAAC,EAAW,MAAM,CAAC;IACrB,IAAI,CAAC,EAAS,MAAM,CAAC;IACrB,mDAAmD;IACnD,MAAM,CAAC,EAAO,MAAM,CAAC;IACrB,MAAM,CAAC,EAAO;QAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAC;IAClC,KAAK,CAAC,EAAQ;QAAE,IAAI,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAClD,EAAE,CAAC,EAAW;QAAE,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;QAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,UAAU,CAAA;KAAE,CAAC;CAC9F;AAED;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,IAAI,GAAE,aAAkB,GAAG,cAAc,CAqE/D"}

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { type TemplateResult } from "mates";
+import type { StyleMap, AttrMap } from "mates";
+import "./snackbar.css";
+export type SnackbarVariant = "default" | "success" | "error" | "warning";
+export type SnackbarPosition = "bottom-center" | "bottom-start" | "bottom-end" | "top-center" | "top-start" | "top-end";
+export interface SnackbarOptions {
+    /** Main message. */
+    message: string | TemplateResult;
+    variant?: SnackbarVariant;
+    position?: SnackbarPosition;
+    /** Optional action (e.g. Undo). */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Show dismiss control; calls `onDismiss` when used. */
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    /** `role="alert"` for errors; default `status` for others. */
+    politeness?: "polite" | "assertive";
+    /** Overrides default `data-testid="md-snackbar"`. */
+    testId?: string;
+    styles?: {
+        root?: StyleMap;
+    };
+    attrs?: {
+        root?: AttrMap;
+    };
+}
+/**
+ * Fixed snackbar surface — control visibility by rendering only when `open` in your app,
+ * or conditionally omit the component. Pair with your own queue if needed.
+ */
+export declare function Snackbar(opts: SnackbarOptions): TemplateResult;
+//# sourceMappingURL=snackbar.d.ts.map