@desktalk/ui 0.1.0-alpha.1

package/dist/dt-list-view.stories.d.ts

@@ -0,0 +1,49 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import './index';
+type ListViewStoryArgs = {
+    itemHeight: number | null;
+    dividers: boolean;
+    selectable: 'none' | 'single' | 'multi';
+    count: number;
+};
+declare function createListView(args: ListViewStoryArgs): HTMLElement;
+declare const meta: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        itemHeight: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        selectable: {
+            control: "inline-radio";
+            options: string[];
+        };
+        count: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+    args: {
+        itemHeight: number;
+        dividers: true;
+        selectable: "single";
+        count: number;
+    };
+    render: typeof createListView;
+};
+export default meta;
+type Story = StoryObj<ListViewStoryArgs>;
+export declare const Playground: Story;
+export declare const VariableHeight: Story;
+export declare const LargeDataset: Story;
+//# sourceMappingURL=dt-list-view.stories.d.ts.map

package/dist/dt-list-view.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-list-view.stories.d.ts","sourceRoot":"","sources":["../src/dt-list-view.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,SAAS,CAAC;AAEjB,KAAK,iBAAiB,GAAG;IACvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAeF,iBAAS,cAAc,CAAC,IAAI,EAAE,iBAAiB,GAAG,WAAW,CAkC5D;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuByB,CAAC;AAEpC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC"}

package/dist/dt-markdown-editor.d.ts

@@ -0,0 +1,54 @@
+export interface DtMarkdownEditorChangeDetail {
+    value: string;
+}
+/**
+ * `<dt-markdown-editor>` — full WYSIWYG markdown editor powered by Milkdown.
+ *
+ * The component lazy-loads Milkdown on first use, injects the required editor
+ * styles into its shadow root, and exposes a simple `value` property that reads
+ * and writes markdown.
+ *
+ * ## Attributes
+ * - `placeholder` — empty-state hint text
+ * - `readonly` — when present, disables editing
+ *
+ * ## Properties
+ * - `value` — JS-only markdown value for get/set access
+ * - `readonly` — boolean reflection of the `readonly` attribute
+ *
+ * ## Events
+ * - `dt-change` — debounced content updates with `{ value }`
+ * - `dt-focus` — fired when the editor gains focus
+ * - `dt-blur` — fired when the editor loses focus
+ */
+export declare class DtMarkdownEditor extends HTMLElement {
+    private readonly _runtimeStyle;
+    private readonly _surface;
+    private readonly _content;
+    private readonly _status;
+    private _runtime;
+    private _loadPromise;
+    private _editor;
+    private _pendingValue;
+    private _changeTimer;
+    private _setupToken;
+    private _suppressNextChange;
+    static get observedAttributes(): string[];
+    get placeholder(): string;
+    set placeholder(value: string);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get value(): string;
+    set value(value: string);
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private _ensureRuntime;
+    private _initializeEditor;
+    private _destroyEditor;
+    private _queueChange;
+    private _clearChangeTimer;
+    private _setStatus;
+}
+//# sourceMappingURL=dt-markdown-editor.d.ts.map

package/dist/dt-markdown-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-markdown-editor.d.ts","sourceRoot":"","sources":["../src/dt-markdown-editor.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;IAC/C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAmB;IACjD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAiB;IAC1C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAiB;IAC1C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiB;IACzC,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,YAAY,CAA2C;IAC/D,OAAO,CAAC,OAAO,CAAgD;IAC/D,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,YAAY,CAA8C;IAClE,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,mBAAmB,CAAS;IAEpC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,WAAW,CAAC,KAAK,EAAE,MAAM,EAE5B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,KAAK,IAAI,MAAM,CAMlB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAQtB;;IA+BD,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,IAAI,IAAI;IAM5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;YAW9B,cAAc;YAgBd,iBAAiB;YAyEjB,cAAc;IAc5B,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,UAAU;CASnB"}

package/dist/dt-markdown-editor.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import './index';
+import './milkdown-entry';
+type MarkdownEditorStoryArgs = {
+    placeholder: string;
+    readonly: boolean;
+};
+declare function createMarkdownEditorStory(args: MarkdownEditorStoryArgs): HTMLElement;
+declare const meta: {
+    title: string;
+    tags: string[];
+    args: {
+        placeholder: string;
+        readonly: false;
+    };
+    render: typeof createMarkdownEditorStory;
+};
+export default meta;
+type Story = StoryObj<MarkdownEditorStoryArgs>;
+export declare const Playground: Story;
+export declare const Readonly: Story;
+//# sourceMappingURL=dt-markdown-editor.stories.d.ts.map

package/dist/dt-markdown-editor.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-markdown-editor.stories.d.ts","sourceRoot":"","sources":["../src/dt-markdown-editor.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,SAAS,CAAC;AACjB,OAAO,kBAAkB,CAAC;AAE1B,KAAK,uBAAuB,GAAG;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,iBAAS,yBAAyB,CAAC,IAAI,EAAE,uBAAuB,GAAG,WAAW,CA+B7E;AAED,QAAA,MAAM,IAAI;;;;;;;;CAQ+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,uBAAuB,CAAC,CAAC;AAE/C,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAC"}

package/dist/dt-markdown.d.ts

@@ -0,0 +1,47 @@
+export interface DtMarkdownLinkClickDetail {
+    href: string;
+}
+/**
+ * `<dt-markdown>` — themed markdown renderer for LiveApps.
+ *
+ * Markdown can be provided either inline between the tags or through the JS-only
+ * `content` property. When `streaming` is present the component appends a live
+ * caret and performs lightweight fence balancing for incomplete code blocks.
+ *
+ * ## Attributes
+ * - `streaming` — when present, shows a blinking caret for in-progress content
+ * - `unsafe-html` — when present, allows raw HTML in the markdown source
+ *
+ * ## Properties
+ * - `content` — JS-only markdown source; overrides inline light-DOM text
+ * - `streaming` — boolean reflection of the `streaming` attribute
+ *
+ * ## Events
+ * - `dt-link-click` — fired with `{ href }` when a rendered link is activated
+ */
+export declare class DtMarkdown extends HTMLElement {
+    private readonly _body;
+    private readonly _caret;
+    private _contentOverride;
+    private _runtime;
+    private _loadPromise;
+    private _observer;
+    private _renderFrame;
+    static get observedAttributes(): string[];
+    get content(): string;
+    set content(value: string);
+    get streaming(): boolean;
+    set streaming(value: boolean);
+    get unsafeHtml(): boolean;
+    set unsafeHtml(value: boolean);
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private _onLinkClick;
+    private _readInlineMarkdown;
+    private _scheduleRender;
+    private _ensureRuntime;
+    private _render;
+}
+//# sourceMappingURL=dt-markdown.d.ts.map

package/dist/dt-markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-markdown.d.ts","sourceRoot":"","sources":["../src/dt-markdown.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,MAAM,CAAC;CACd;AAwCD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,UAAW,SAAQ,WAAW;IACzC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAiB;IACvC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAkB;IACzC,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,QAAQ,CAAgC;IAChD,OAAO,CAAC,YAAY,CAAyC;IAC7D,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,YAAY,CAAK;IAEzB,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAGxB;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAE5B;;IAsBD,iBAAiB,IAAI,IAAI;IAmBzB,oBAAoB,IAAI,IAAI;IAS5B,wBAAwB,IAAI,IAAI;IAIhC,OAAO,CAAC,YAAY,CAiBlB;IAEF,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,eAAe;YAWT,cAAc;YAed,OAAO;CAatB"}

package/dist/dt-markdown.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import './index';
+import './marked-entry';
+type MarkdownStoryArgs = {
+    streaming: boolean;
+    unsafeHtml: boolean;
+};
+declare function createMarkdownStory(args: MarkdownStoryArgs): HTMLElement;
+declare const meta: {
+    title: string;
+    tags: string[];
+    args: {
+        streaming: false;
+        unsafeHtml: false;
+    };
+    render: typeof createMarkdownStory;
+};
+export default meta;
+type Story = StoryObj<MarkdownStoryArgs>;
+export declare const Playground: Story;
+export declare const Streaming: Story;
+//# sourceMappingURL=dt-markdown.stories.d.ts.map

package/dist/dt-markdown.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-markdown.stories.d.ts","sourceRoot":"","sources":["../src/dt-markdown.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,SAAS,CAAC;AACjB,OAAO,gBAAgB,CAAC;AAExB,KAAK,iBAAiB,GAAG;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AA2CF,iBAAS,mBAAmB,CAAC,IAAI,EAAE,iBAAiB,GAAG,WAAW,CA4BjE;AAED,QAAA,MAAM,IAAI;;;;;;;;CAQyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC"}

package/dist/dt-select.d.ts

@@ -0,0 +1,71 @@
+/** Shape of an option passed via the `options` property. */
+export interface DtSelectOption {
+    value: string;
+    label: string;
+}
+export type DtSelectAlign = 'left' | 'right';
+/**
+ * `<dt-select>` — framework-agnostic select/dropdown web component.
+ *
+ * Uses Shadow DOM for the trigger button and appends the dropdown menu to
+ * `document.body` so it can escape overflow/clip ancestors.
+ *
+ * ## Attributes
+ * - `value`       — the currently selected option value
+ * - `placeholder` — text shown when no value is selected (default "Select...")
+ * - `disabled`    — when present, interaction is suppressed
+ * - `align`       — horizontal alignment of the popup relative to the trigger:
+ *                   "left" (default) or "right"
+ *
+ * ## Properties
+ * - `options`     — `Array<{ value: string; label: string }>` set via JS
+ *
+ * ## Events
+ * - `dt-change`   — fired when the user selects an option; `detail.value` is
+ *                   the selected value
+ *
+ * ## Usage
+ * ```html
+ * <dt-select placeholder="Choose session" value="s1" align="right"></dt-select>
+ * <script>
+ *   const sel = document.querySelector('dt-select');
+ *   sel.options = [
+ *     { value: 's1', label: 'Session 1' },
+ *     { value: 's2', label: 'Session 2' },
+ *   ];
+ *   sel.addEventListener('dt-change', (e) => console.log(e.detail.value));
+ * </script>
+ * ```
+ */
+export declare class DtSelect extends HTMLElement {
+    private _menu;
+    private _trigger;
+    private _options;
+    private _open;
+    private _menuId;
+    static get observedAttributes(): string[];
+    get value(): string;
+    set value(val: string);
+    get placeholder(): string;
+    set placeholder(val: string);
+    get disabled(): boolean;
+    set disabled(val: boolean);
+    get align(): DtSelectAlign;
+    set align(val: DtSelectAlign);
+    get options(): DtSelectOption[];
+    set options(val: DtSelectOption[]);
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private _updateLabel;
+    private _onTriggerClick;
+    private _openMenu;
+    private _close;
+    private _onOutsideClick;
+    private _onKeyDown;
+    private _renderMenuItems;
+    private _selectValue;
+    private _position;
+}
+//# sourceMappingURL=dt-select.d.ts.map

package/dist/dt-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-select.d.ts","sourceRoot":"","sources":["../src/dt-select.ts"],"names":[],"mappings":"AAUA,4DAA4D;AAC5D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAaD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBAAa,QAAS,SAAQ,WAAW;IAEvC,OAAO,CAAC,KAAK,CAA+B;IAC5C,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,QAAQ,CAAwB;IACxC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,OAAO,CAAM;IAGrB,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAID,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAEpB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,WAAW,CAAC,GAAG,EAAE,MAAM,EAE1B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,GAAG,EAAE,OAAO,EAMxB;IAED,IAAI,KAAK,IAAI,aAAa,CAIzB;IACD,IAAI,KAAK,CAAC,GAAG,EAAE,aAAa,EAE3B;IAID,IAAI,OAAO,IAAI,cAAc,EAAE,CAE9B;IACD,IAAI,OAAO,CAAC,GAAG,EAAE,cAAc,EAAE,EAMhC;;IAkCD,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAiB5C,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe,CAOrB;IAEF,OAAO,CAAC,SAAS;IA4BjB,OAAO,CAAC,MAAM;IAkBd,OAAO,CAAC,eAAe,CAKrB;IAEF,OAAO,CAAC,UAAU,CAKhB;IAIF,OAAO,CAAC,gBAAgB;IA6BxB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,SAAS;CAiClB"}

package/dist/dt-select.stories.d.ts

@@ -0,0 +1,41 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import './index';
+import type { DtSelectOption } from './dt-select';
+type SelectStoryArgs = {
+    align: 'left' | 'right';
+    disabled: boolean;
+    placeholder: string;
+    value: string;
+    options: DtSelectOption[];
+    onChange: (value: string) => void;
+};
+declare function createSelect(args: SelectStoryArgs): HTMLElement;
+declare const meta: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        align: {
+            control: "inline-radio";
+            options: string[];
+        };
+        onChange: {
+            action: string;
+        };
+    };
+    args: {
+        align: "left";
+        disabled: false;
+        placeholder: string;
+        value: string;
+        options: {
+            value: string;
+            label: string;
+        }[];
+    };
+    render: typeof createSelect;
+};
+export default meta;
+type Story = StoryObj<SelectStoryArgs>;
+export declare const Playground: Story;
+export declare const RightAligned: Story;
+//# sourceMappingURL=dt-select.stories.d.ts.map

package/dist/dt-select.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-select.stories.d.ts","sourceRoot":"","sources":["../src/dt-select.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,iBAAS,YAAY,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,CAwCxD;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;CAyBuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEvC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAC"}

package/dist/dt-stack.d.ts

@@ -0,0 +1,51 @@
+type StackDirection = 'column' | 'row';
+type StackGap = '0' | '4' | '8' | '12' | '16' | '20' | '24' | '32';
+type StackAlign = 'start' | 'center' | 'end' | 'stretch';
+/**
+ * `<dt-stack>` — framework-agnostic flexbox stack web component.
+ *
+ * Provides vertical or horizontal flexbox layout with responsive behavior.
+ * Row stacks automatically wrap to column on narrow views.
+ *
+ * ## Attributes
+ * - `direction` — stack direction: `column` (default) or `row`
+ * - `gap` — spacing between items: 0, 4, 8, 12, 16, 20, 24, 32 (default: 16)
+ * - `align` — cross-axis alignment: `start`, `center`, `end`, `stretch` (default: stretch)
+ *
+ * ## Usage
+ * ```html
+ * <!-- Vertical stack (default) -->
+ * <dt-stack>
+ *   <dt-card>Item 1</dt-card>
+ *   <dt-card>Item 2</dt-card>
+ *   <dt-card>Item 3</dt-card>
+ * </dt-stack>
+ *
+ * <!-- Horizontal row (wraps to column on narrow views) -->
+ * <dt-stack direction="row" gap="24">
+ *   <dt-button>Save</dt-button>
+ *   <dt-button variant="secondary">Cancel</dt-button>
+ * </dt-stack>
+ *
+ * <!-- Centered horizontal row -->
+ * <dt-stack direction="row" align="center" gap="8">
+ *   <dt-badge variant="success">Active</dt-badge>
+ *   <span>System running</span>
+ * </dt-stack>
+ * ```
+ */
+export declare class DtStack extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    get direction(): StackDirection;
+    set direction(val: StackDirection);
+    get gap(): StackGap;
+    set gap(val: StackGap);
+    get align(): StackAlign;
+    set align(val: StackAlign);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    constructor();
+}
+export {};
+//# sourceMappingURL=dt-stack.d.ts.map

package/dist/dt-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-stack.d.ts","sourceRoot":"","sources":["../src/dt-stack.ts"],"names":[],"mappings":"AAIA,KAAK,cAAc,GAAG,QAAQ,GAAG,KAAK,CAAC;AACvC,KAAK,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnE,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAUzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBAAa,OAAQ,SAAQ,WAAW;;IAEtC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAGD,IAAI,SAAS,IAAI,cAAc,CAE9B;IAED,IAAI,SAAS,CAAC,GAAG,EAAE,cAAc,EAEhC;IAED,IAAI,GAAG,IAAI,QAAQ,CAclB;IAED,IAAI,GAAG,CAAC,GAAG,EAAE,QAAQ,EAEpB;IAED,IAAI,KAAK,IAAI,UAAU,CAMtB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,UAAU,EAExB;IAID,iBAAiB;IAIjB,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;;CA2B7C"}

package/dist/dt-stack.stories.d.ts

@@ -0,0 +1,48 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import './index';
+type StackStoryArgs = {
+    direction: 'column' | 'row';
+    gap: string;
+    align: 'start' | 'center' | 'end' | 'stretch';
+    itemCount: number;
+};
+declare function createStack(args: StackStoryArgs): HTMLElement;
+declare const meta: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        direction: {
+            control: "inline-radio";
+            options: string[];
+        };
+        gap: {
+            control: "select";
+            options: string[];
+        };
+        align: {
+            control: "inline-radio";
+            options: string[];
+        };
+        itemCount: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+    args: {
+        direction: "column";
+        gap: string;
+        align: "stretch";
+        itemCount: number;
+    };
+    render: typeof createStack;
+};
+export default meta;
+type Story = StoryObj<StackStoryArgs>;
+export declare const Playground: Story;
+export declare const HorizontalRow: Story;
+export declare const HorizontalCentered: Story;
+//# sourceMappingURL=dt-stack.stories.d.ts.map

package/dist/dt-stack.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-stack.stories.d.ts","sourceRoot":"","sources":["../src/dt-stack.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,SAAS,CAAC;AAEjB,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,iBAAS,WAAW,CAAC,IAAI,EAAE,cAAc,GAAG,WAAW,CA+BtD;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAEtC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC"}

package/dist/dt-stat.d.ts

@@ -0,0 +1,61 @@
+type StatSize = 'sm' | 'md' | 'lg';
+type StatVariant = 'default' | 'outlined' | 'filled';
+/**
+ * `<dt-stat>` — framework-agnostic statistic/metric display web component.
+ *
+ * Displays a metric/KPI with label, value, and optional description.
+ * Designed for dashboards and system monitors.
+ *
+ * ## Attributes
+ * - `label` — the metric label (e.g., "CPU Usage", "Memory")
+ * - `value` — the metric value (e.g., "42%", "8.2 GB")
+ * - `description` — optional descriptive text
+ * - `size` — size variant: `sm`, `md` (default), `lg`
+ * - `variant` — visual style: `default`, `outlined`, `filled`
+ * - `trend` — optional trend indicator: `up`, `down`, `neutral` (shows +/− symbol)
+ * - `trend-value` — value to display with trend (e.g., "+5%")
+ *
+ * ## Usage
+ * ```html
+ * <dt-stat label="CPU Usage" value="42%"></dt-stat>
+ *
+ * <dt-stat label="Memory" value="8.2 GB" description="of 16 GB used"></dt-stat>
+ *
+ * <dt-stat label="Uptime" value="99.9%" size="lg" variant="filled"></dt-stat>
+ *
+ * <dt-stat
+ *   label="Traffic"
+ *   value="12.5k"
+ *   description="visitors today"
+ *   trend="up"
+ *   trend-value="+18%"
+ * ></dt-stat>
+ * ```
+ */
+export declare class DtStat extends HTMLElement {
+    static get observedAttributes(): string[];
+    private _container;
+    private _labelEl;
+    private _valueEl;
+    private _descEl;
+    private _trendEl;
+    get label(): string | null;
+    set label(val: string | null);
+    get value(): string | null;
+    set value(val: string | null);
+    get description(): string | null;
+    set description(val: string | null);
+    get size(): StatSize;
+    set size(val: StatSize);
+    get variant(): StatVariant;
+    set variant(val: StatVariant);
+    get trend(): 'up' | 'down' | 'neutral' | null;
+    set trend(val: 'up' | 'down' | 'neutral' | null);
+    get trendValue(): string | null;
+    set trendValue(val: string | null);
+    constructor();
+    attributeChangedCallback(name: string, _oldVal: string | null, _newVal: string | null): void;
+    private _render;
+}
+export {};
+//# sourceMappingURL=dt-stat.d.ts.map

package/dist/dt-stat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-stat.d.ts","sourceRoot":"","sources":["../src/dt-stat.ts"],"names":[],"mappings":"AAIA,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnC,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBAAa,MAAO,SAAQ,WAAW;IAErC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAGD,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,OAAO,CAAkB;IACjC,OAAO,CAAC,QAAQ,CAAkB;IAGlC,IAAI,KAAK,IAAI,MAAM,GAAG,IAAI,CAEzB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAM3B;IAED,IAAI,KAAK,IAAI,MAAM,GAAG,IAAI,CAEzB;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAM3B;IAED,IAAI,WAAW,IAAI,MAAM,GAAG,IAAI,CAE/B;IAED,IAAI,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAMjC;IAED,IAAI,IAAI,IAAI,QAAQ,CAInB;IAED,IAAI,IAAI,CAAC,GAAG,EAAE,QAAQ,EAErB;IAED,IAAI,OAAO,IAAI,WAAW,CAIzB;IAED,IAAI,OAAO,CAAC,GAAG,EAAE,WAAW,EAE3B;IAED,IAAI,KAAK,IAAI,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAI5C;IAED,IAAI,KAAK,CAAC,GAAG,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAM9C;IAED,IAAI,UAAU,IAAI,MAAM,GAAG,IAAI,CAE9B;IAED,IAAI,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAMhC;;IAsCD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAc5F,OAAO,CAAC,OAAO;CA2BhB"}

package/dist/dt-stat.stories.d.ts

@@ -0,0 +1,47 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import './index';
+type StatStoryArgs = {
+    label: string;
+    value: string;
+    description: string;
+    size: 'sm' | 'md' | 'lg';
+    variant: 'default' | 'outlined' | 'filled';
+    trend: 'up' | 'down' | 'neutral' | null;
+    trendValue: string;
+};
+declare function createStat(args: StatStoryArgs): HTMLElement;
+declare const meta: {
+    title: string;
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "inline-radio";
+            options: string[];
+        };
+        variant: {
+            control: "inline-radio";
+            options: string[];
+        };
+        trend: {
+            control: "select";
+            options: (string | null)[];
+        };
+    };
+    args: {
+        label: string;
+        value: string;
+        description: string;
+        size: "md";
+        variant: "default";
+        trend: null;
+        trendValue: string;
+    };
+    render: typeof createStat;
+};
+export default meta;
+type Story = StoryObj<StatStoryArgs>;
+export declare const Playground: Story;
+export declare const WithTrend: Story;
+export declare const LargeVariant: Story;
+export declare const SizeComparison: Story;
+//# sourceMappingURL=dt-stat.stories.d.ts.map

package/dist/dt-stat.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dt-stat.stories.d.ts","sourceRoot":"","sources":["../src/dt-stat.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,SAAS,CAAC;AAEjB,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC3C,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACxC,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,WAAW,CAoBpD;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAErC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAC;AAEpC,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAkB5B,CAAC"}