@diwacopilot/components 1.2.0 → 1.2.2

package/dist-custom-elements/diwa-flyout.js

@@ -1,238 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
-import { a as getReducedMotionStyle } from './p-70bbb21a.js';
-import { d as defineCustomElement$3 } from './p-236fbbdd.js';
-import { d as defineCustomElement$2 } from './p-473ec48f.js';
-
-/**
- * diwa-flyout-styles.ts
- * ======================
- * CSS-in-JS styles for <diwa-flyout>.
- *
- * The flyout is a fixed-position overlay consisting of:
- *   - A semi-transparent backdrop that covers the viewport.
- *   - A panel that slides in from the start (left) or end (right) edge.
- *
- * Both the backdrop and panel animate on open/close. Because all values are
- * passed as template literal expressions, the <style> tag is re-emitted on
- * every render — which happens whenever `open` or `position` changes.
- *
- * Visibility technique: `:host` uses `visibility: hidden` with a delayed
- * transition when closing so the panel is invisible after the slide-out
- * animation completes, while still being `visibility: visible` during the
- * opening animation so it animates in correctly.
- */
-const getComponentCss = (open, position, backdrop) => `
-
-  /* ── Host ──────────────────────────────────────────────────────────── */
-
-  :host {
-    display: block;
-    position: fixed;
-    inset: 0;
-    z-index: var(--diwa-z-overlay);
-    pointer-events: ${open ? 'auto' : 'none'};
-    visibility: ${open ? 'visible' : 'hidden'};
-    transition: visibility 0s linear ${open ? '0s' : 'var(--diwa-motion-duration-moderate)'};
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  /* ── Backdrop ──────────────────────────────────────────────────────── */
-
-  .backdrop {
-    position: absolute;
-    inset: 0;
-    ${backdrop === 'blur'
-    ? `
-    background: var(--diwa-bg-frosted);
-    backdrop-filter: blur(var(--diwa-blur-lg));
-    -webkit-backdrop-filter: blur(var(--diwa-blur-lg));`
-    : `
-    background: var(--diwa-bg-shading);`}
-    opacity: ${open ? '1' : '0'};
-    transition: opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);
-    cursor: pointer;
-  }
-
-  /* ── Panel ─────────────────────────────────────────────────────────── */
-
-  .panel {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    ${position === 'start' ? 'left: 0;' : 'right: 0;'}
-    width: var(--diwa-flyout-width, 480px);
-    min-width: var(--diwa-flyout-min-width);
-    max-width: 100vw;
-    display: flex;
-    flex-direction: column;
-    background: var(--diwa-bg-surface);
-    border-${position === 'start' ? 'right' : 'left'}: var(--diwa-border-width-thin) solid var(--diwa-border);
-    transform: translateX(${open ? '0' : position === 'start' ? '-100%' : '100%'});
-    transition: transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-base);
-    overflow: hidden;
-    outline: none;
-  }
-
-  /* ── Header ────────────────────────────────────────────────────────── */
-
-  .header {
-    display: flex;
-    align-items: center;
-    gap: var(--diwa-space-3);
-    padding: var(--diwa-space-5) var(--diwa-space-6);
-    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);
-  }
-
-  .heading-text {
-    flex: 1;
-    min-width: 0;
-    font-family: var(--diwa-font-family-base);
-    font-size: var(--diwa-font-size-xl);
-    font-weight: var(--diwa-font-weight-semibold);
-    color: var(--diwa-text-primary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  /* ── Scrollable content ────────────────────────────────────────────── */
-
-  .content {
-    flex: 1;
-    overflow-y: auto;
-    padding: var(--diwa-space-6);
-    overscroll-behavior: contain;
-  }
-
-  /* ── Sticky footer ─────────────────────────────────────────────────── */
-
-  .footer {
-    flex-shrink: 0;
-    padding: var(--diwa-space-4) var(--diwa-space-6);
-    border-top: var(--diwa-border-width-thin) solid var(--diwa-border); {
-    display: none;
-  }
-
-  ${getReducedMotionStyle('.panel', '.backdrop')}
-`;
-
-const DiwaFlyout$1 = /*@__PURE__*/ proxyCustomElement(class DiwaFlyout extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.dismiss = createEvent(this, "dismiss", 1);
-        this.savedFocusEl = null;
-        // ──────────────────────────────────────────────────────────────
-        // Props
-        // ──────────────────────────────────────────────────────────────
-        /** Per-component theme override (`light` / `dark`). */
-        this.theme = 'dark';
-        /**
-         * Whether the flyout is currently open.
-         *
-         * Controlled prop — the consumer must set this to `false` in response to
-         * the `dismiss` event (backdrop click, Escape key, or dismiss button).
-         */
-        this.open = false;
-        /** Which edge of the viewport the panel slides in from (`start` = left, `end` = right). */
-        this.position = 'end';
-        /**
-         * Controls the visual style of the backdrop overlay.
-         * `blur`    — frosted glass (default; use when opened by user interaction).
-         * `shading` — solid dark scrim (use for system-triggered flyouts).
-         */
-        this.backdrop = 'blur';
-        /** Heading text displayed in the flyout header. */
-        this.heading = '';
-        // ──────────────────────────────────────────────────────────────
-        // Private helpers
-        // ──────────────────────────────────────────────────────────────
-        this.handleDismiss = () => {
-            this.dismiss.emit();
-        };
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Lifecycle
-    // ──────────────────────────────────────────────────────────────
-    onOpenChange(nextOpen) {
-        var _a;
-        if (nextOpen) {
-            document.body.style.overflow = 'hidden';
-            this.savedFocusEl = document.activeElement;
-            requestAnimationFrame(() => {
-                var _a;
-                (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.focus();
-            });
-        }
-        else {
-            document.body.style.overflow = '';
-            (_a = this.savedFocusEl) === null || _a === void 0 ? void 0 : _a.focus();
-            this.savedFocusEl = null;
-        }
-    }
-    disconnectedCallback() {
-        document.body.style.overflow = '';
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Keyboard handling
-    // ──────────────────────────────────────────────────────────────
-    /** Close on Escape key while the flyout is open. */
-    onKeyDown(e) {
-        if (this.open && e.key === 'Escape') {
-            e.preventDefault();
-            this.dismiss.emit();
-        }
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Render
-    // ──────────────────────────────────────────────────────────────
-    render() {
-        return (h(Host, { key: '067e67fe0994d726754e6553d92a03b71981b218', "data-theme": this.theme }, h("style", { key: '2697a0d6d7f205b12cf0e16df31a5302cc7792a9' }, getComponentCss(this.open, this.position, this.backdrop)), h("div", { key: 'fbd2f50b7ffcf9329d59cdf0097ab620d689d42b', class: "backdrop", "aria-hidden": "true", onClick: this.handleDismiss }), h("div", { key: 'efc5f3d46f43b92ea438ceb8f290650851373060', class: "panel", role: "dialog", "aria-modal": "true", "aria-label": this.heading || 'Flyout', tabIndex: -1, ref: (el) => { this.panelEl = el; } }, h("div", { key: '2870307396623b837ba1a3dbac79c0fa6dfc60ea', class: "header" }, h("span", { key: '7b331d1bbe9852cfab2f432f5549cb9b683e63b4', class: "heading-text" }, this.heading), h("slot", { key: '5f4893f77513909bfecf12efe55d9ccfe9777a68', name: "header" }), h("diwa-button-pure", { key: '603aedc73fe95dd50e331f1e85cc005c143a2362', icon: "x", label: "Close flyout", size: "sm", hideLabel: true, onClick: this.handleDismiss })), h("div", { key: '01ece4db2102e3b76287194021b7da059ed4cb7f', class: "content" }, h("slot", { key: '43f4639680b69de1285beab4584caa21ef71cfb7' })), h("div", { key: '22c72dbb2f0c2f71d699e6ef027c6b13cf3ce6dc', class: "footer" }, h("slot", { key: '6ee08ebb96caa923054e6b4298f419e44e4b003f', name: "footer" })))));
-    }
-    static get watchers() { return {
-        "open": ["onOpenChange"]
-    }; }
-}, [1, "diwa-flyout", {
-        "theme": [513],
-        "open": [1540],
-        "position": [513],
-        "backdrop": [1],
-        "heading": [1]
-    }, [[8, "keydown", "onKeyDown"]], {
-        "open": ["onOpenChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-flyout", "diwa-button-pure", "diwa-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-flyout":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaFlyout$1);
-            }
-            break;
-        case "diwa-button-pure":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "diwa-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const DiwaFlyout = DiwaFlyout$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaFlyout, defineCustomElement };
-
-//# sourceMappingURL=diwa-flyout.js.map
+import{t as n,p as e,H as a,c as i,h as t,a as o}from"./index.js";import{a as d}from"./p-C8h0Vfqp.js";import{d as r}from"./p-C3hNpgqg.js";import{d as s}from"./p-DOo0FY37.js";const l=e(class extends a{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.dismiss=i(this,"dismiss",1),this.savedFocusEl=null,this.theme="dark",this.open=!1,this.position="end",this.backdrop="blur",this.heading="",this.handleDismiss=()=>{this.dismiss.emit()}}onOpenChange(n){var e;n?(document.body.style.overflow="hidden",this.savedFocusEl=document.activeElement,requestAnimationFrame((()=>{var n;null===(n=this.panelEl)||void 0===n||n.focus()}))):(document.body.style.overflow="",null===(e=this.savedFocusEl)||void 0===e||e.focus(),this.savedFocusEl=null)}disconnectedCallback(){document.body.style.overflow=""}onKeyDown(n){this.open&&"Escape"===n.key&&(n.preventDefault(),this.dismiss.emit())}render(){return t(o,{key:"067e67fe0994d726754e6553d92a03b71981b218","data-theme":this.theme},t("style",{key:"2697a0d6d7f205b12cf0e16df31a5302cc7792a9"},((n,e)=>`\n\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    position: fixed;\n    inset: 0;\n    z-index: var(--diwa-z-overlay);\n    pointer-events: ${n?"auto":"none"};\n    visibility: ${n?"visible":"hidden"};\n    transition: visibility 0s linear ${n?"0s":"var(--diwa-motion-duration-moderate)"};\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Backdrop ──────────────────────────────────────────────────────── */\n\n  .backdrop {\n    position: absolute;\n    inset: 0;\n    ${"blur"===this.backdrop?"\n    background: var(--diwa-bg-frosted);\n    backdrop-filter: blur(var(--diwa-blur-lg));\n    -webkit-backdrop-filter: blur(var(--diwa-blur-lg));":"\n    background: var(--diwa-bg-shading);"}\n    opacity: ${n?"1":"0"};\n    transition: opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\n    cursor: pointer;\n  }\n\n  /* ── Panel ─────────────────────────────────────────────────────────── */\n\n  .panel {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    ${"start"===e?"left: 0;":"right: 0;"}\n    width: var(--diwa-flyout-width, 480px);\n    min-width: var(--diwa-flyout-min-width);\n    max-width: 100vw;\n    display: flex;\n    flex-direction: column;\n    background: var(--diwa-bg-surface);\n    border-${"start"===e?"right":"left"}: var(--diwa-border-width-thin) solid var(--diwa-border);\n    transform: translateX(${n?"0":"start"===e?"-100%":"100%"});\n    transition: transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-base);\n    overflow: hidden;\n    outline: none;\n  }\n\n  /* ── Header ────────────────────────────────────────────────────────── */\n\n  .header {\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-3);\n    padding: var(--diwa-space-5) var(--diwa-space-6);\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\n  }\n\n  .heading-text {\n    flex: 1;\n    min-width: 0;\n    font-family: var(--diwa-font-family-base);\n    font-size: var(--diwa-font-size-xl);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* ── Scrollable content ────────────────────────────────────────────── */\n\n  .content {\n    flex: 1;\n    overflow-y: auto;\n    padding: var(--diwa-space-6);\n    overscroll-behavior: contain;\n  }\n\n  /* ── Sticky footer ─────────────────────────────────────────────────── */\n\n  .footer {\n    flex-shrink: 0;\n    padding: var(--diwa-space-4) var(--diwa-space-6);\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border); {\n    display: none;\n  }\n\n  ${d(".panel",".backdrop")}\n`)(this.open,this.position)),t("div",{key:"fbd2f50b7ffcf9329d59cdf0097ab620d689d42b",class:"backdrop","aria-hidden":"true",onClick:this.handleDismiss}),t("div",{key:"efc5f3d46f43b92ea438ceb8f290650851373060",class:"panel",role:"dialog","aria-modal":"true","aria-label":this.heading||"Flyout",tabIndex:-1,ref:n=>{this.panelEl=n}},t("div",{key:"2870307396623b837ba1a3dbac79c0fa6dfc60ea",class:"header"},t("span",{key:"7b331d1bbe9852cfab2f432f5549cb9b683e63b4",class:"heading-text"},this.heading),t("slot",{key:"5f4893f77513909bfecf12efe55d9ccfe9777a68",name:"header"}),t("diwa-button-pure",{key:"603aedc73fe95dd50e331f1e85cc005c143a2362",icon:"x",label:"Close flyout",size:"sm",hideLabel:!0,onClick:this.handleDismiss})),t("div",{key:"01ece4db2102e3b76287194021b7da059ed4cb7f",class:"content"},t("slot",{key:"43f4639680b69de1285beab4584caa21ef71cfb7"})),t("div",{key:"22c72dbb2f0c2f71d699e6ef027c6b13cf3ce6dc",class:"footer"},t("slot",{key:"6ee08ebb96caa923054e6b4298f419e44e4b003f",name:"footer"}))))}static get watchers(){return{open:[{onOpenChange:0}]}}},[257,"diwa-flyout",{theme:[513],open:[1540],position:[513],backdrop:[1],heading:[1]},[[8,"keydown","onKeyDown"]],{open:[{onOpenChange:0}]}]);function c(){"undefined"!=typeof customElements&&["diwa-flyout","diwa-button-pure","diwa-icon"].forEach((e=>{switch(e){case"diwa-flyout":customElements.get(n(e))||customElements.define(n(e),l);break;case"diwa-button-pure":customElements.get(n(e))||r();break;case"diwa-icon":customElements.get(n(e))||s()}}))}c();const b=l,f=c;export{b as DiwaFlyout,f as defineCustomElement}

package/dist-custom-elements/diwa-heading.js

@@ -1,149 +1 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
-
-const FONT_SIZE = {
-    'display': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-4xl))',
-    'h1': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-3xl))',
-    'h2': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-2xl))',
-    'h3': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-xl))',
-    'h4': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-lg))',
-    'h5': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-base))',
-    'h6': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-sm))',
-    'inherit': 'var(--diwa-heading-font-size, inherit)',
-};
-const LETTER_SPACING = {
-    'display': 'var(--diwa-heading-letter-spacing, -0.03em)',
-    'h1': 'var(--diwa-heading-letter-spacing, -0.03em)',
-    'h2': 'var(--diwa-heading-letter-spacing, -0.015em)',
-    'h3': 'var(--diwa-heading-letter-spacing, -0.015em)',
-    'h4': 'var(--diwa-heading-letter-spacing, 0)',
-    'h5': 'var(--diwa-heading-letter-spacing, 0)',
-    'h6': 'var(--diwa-heading-letter-spacing, 0)',
-    'inherit': 'var(--diwa-heading-letter-spacing, inherit)',
-};
-const FONT_WEIGHT = {
-    semibold: 'var(--diwa-font-weight-semibold)',
-    bold: 'var(--diwa-font-weight-bold)',
-};
-const COLOR = {
-    primary: 'var(--diwa-heading-color, var(--diwa-text-primary))',
-    secondary: 'var(--diwa-heading-color, var(--diwa-text-secondary))',
-    inherit: 'var(--diwa-heading-color, inherit)',
-};
-const getComponentCss = (size, weight, align, color, ellipsis) => `
-
-  :host {
-    display: block;
-    font-family: var(--diwa-font-family-base);
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  .heading {
-    margin: 0;
-    padding: 0;
-    font-size: ${FONT_SIZE[size]};
-    font-weight: ${FONT_WEIGHT[weight]};
-    line-height: var(--diwa-heading-line-height, var(--diwa-line-height-tight));
-    letter-spacing: ${LETTER_SPACING[size]};
-    text-align: ${align};
-    color: ${COLOR[color]};
-    ${ellipsis ? 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;' : ''}
-  }
-`;
-
-const H_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
-const SIZE_TO_TAG = {
-    display: 'h1',
-    h1: 'h1',
-    h2: 'h2',
-    h3: 'h3',
-    h4: 'h4',
-    h5: 'h5',
-    h6: 'h6',
-    inherit: 'h2',
-};
-/**
- * Resolves the HTML tag to render:
- * 1. If any direct slotted child is an h1–h6 element → return 'div' (avoids invalid nesting).
- * 2. If an explicit `tag` prop is provided → use it.
- * 3. Otherwise → infer from the `size` prop.
- */
-function getHeadingTag(host, size, tag) {
-    if (host && Array.from(host.children).some((el) => H_TAGS.has(el.tagName.toLowerCase()))) {
-        return 'div';
-    }
-    if (tag)
-        return tag;
-    return SIZE_TO_TAG[size];
-}
-
-const DiwaHeading$1 = /*@__PURE__*/ proxyCustomElement(class DiwaHeading extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        // ──────────────────────────────────────────────────────────────
-        // Props
-        // ──────────────────────────────────────────────────────────────
-        /** Per-component theme override. */
-        this.theme = 'dark';
-        /**
-         * Visual size and inferred semantic heading level.
-         * Determines the rendered HTML tag when no explicit `tag` prop is given.
-         */
-        this.size = 'h2';
-        /** Font weight. */
-        this.weight = 'bold';
-        /** Horizontal alignment. `start` and `end` are RTL-aware. */
-        this.align = 'start';
-        /**
-         * Colour alias. Use `inherit` to pass through the surrounding colour unchanged —
-         * useful inside cards, hero sections, or other styled containers.
-         */
-        this.color = 'primary';
-        /**
-         * Clip overflow to a single line with a trailing ellipsis.
-         * The host element must have a defined width for this to take effect.
-         */
-        this.ellipsis = false;
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Render
-    // ──────────────────────────────────────────────────────────────
-    render() {
-        const Tag = getHeadingTag(this.host, this.size, this.tag); // eslint-disable-line @typescript-eslint/no-explicit-any
-        return (h(Host, { key: 'da76af7c3fbfbc20a58c3210145fb99c47474b01', "data-theme": this.theme }, h("style", { key: '3002fa6831effb8f00414fc6a2bc3729578251d3', innerHTML: getComponentCss(this.size, this.weight, this.align, this.color, this.ellipsis) }), h(Tag, { key: 'acc07263f7150f3d34383eeea09d093bf833a506', class: "heading" }, h("slot", { key: '95678b56667d381fabb3e34f9b70ca4fe7faaaa2' }))));
-    }
-    get host() { return this; }
-}, [1, "diwa-heading", {
-        "theme": [513],
-        "size": [513],
-        "tag": [513],
-        "weight": [513],
-        "align": [513],
-        "color": [513],
-        "ellipsis": [516]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-heading"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-heading":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaHeading$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const DiwaHeading = DiwaHeading$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaHeading, defineCustomElement };
-
-//# sourceMappingURL=diwa-heading.js.map
+import{t as i,p as a,H as e,h as n,a as t}from"./index.js";const h={display:"var(--diwa-heading-font-size, var(--diwa-font-size-fluid-4xl))",h1:"var(--diwa-heading-font-size, var(--diwa-font-size-fluid-3xl))",h2:"var(--diwa-heading-font-size, var(--diwa-font-size-fluid-2xl))",h3:"var(--diwa-heading-font-size, var(--diwa-font-size-fluid-xl))",h4:"var(--diwa-heading-font-size, var(--diwa-font-size-fluid-lg))",h5:"var(--diwa-heading-font-size, var(--diwa-font-size-fluid-base))",h6:"var(--diwa-heading-font-size, var(--diwa-font-size-fluid-sm))",inherit:"var(--diwa-heading-font-size, inherit)"},d={display:"var(--diwa-heading-letter-spacing, -0.03em)",h1:"var(--diwa-heading-letter-spacing, -0.03em)",h2:"var(--diwa-heading-letter-spacing, -0.015em)",h3:"var(--diwa-heading-letter-spacing, -0.015em)",h4:"var(--diwa-heading-letter-spacing, 0)",h5:"var(--diwa-heading-letter-spacing, 0)",h6:"var(--diwa-heading-letter-spacing, 0)",inherit:"var(--diwa-heading-letter-spacing, inherit)"},s={semibold:"var(--diwa-font-weight-semibold)",bold:"var(--diwa-font-weight-bold)"},r={primary:"var(--diwa-heading-color, var(--diwa-text-primary))",secondary:"var(--diwa-heading-color, var(--diwa-text-secondary))",inherit:"var(--diwa-heading-color, inherit)"},o=(i,a,e,n,t)=>`\n\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .heading {\n    margin: 0;\n    padding: 0;\n    font-size: ${h[i]};\n    font-weight: ${s[a]};\n    line-height: var(--diwa-heading-line-height, var(--diwa-line-height-tight));\n    letter-spacing: ${d[i]};\n    text-align: ${e};\n    color: ${r[n]};\n    ${t?"overflow: hidden; text-overflow: ellipsis; white-space: nowrap;":""}\n  }\n`,l=new Set(["h1","h2","h3","h4","h5","h6"]),f={display:"h1",h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",inherit:"h2"},g=a(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.theme="dark",this.size="h2",this.weight="bold",this.align="start",this.color="primary",this.ellipsis=!1}render(){const i=function(i,a,e){return i&&Array.from(i.children).some((i=>l.has(i.tagName.toLowerCase())))?"div":e||f[a]}(this.host,this.size,this.tag);return n(t,{key:"da76af7c3fbfbc20a58c3210145fb99c47474b01","data-theme":this.theme},n("style",{key:"3002fa6831effb8f00414fc6a2bc3729578251d3",innerHTML:o(this.size,this.weight,this.align,this.color,this.ellipsis)}),n(i,{key:"acc07263f7150f3d34383eeea09d093bf833a506",class:"heading"},n("slot",{key:"95678b56667d381fabb3e34f9b70ca4fe7faaaa2"})))}get host(){return this}},[257,"diwa-heading",{theme:[513],size:[513],tag:[513],weight:[513],align:[513],color:[513],ellipsis:[516]}]);function w(){"undefined"!=typeof customElements&&["diwa-heading"].forEach((a=>{"diwa-heading"===a&&(customElements.get(i(a))||customElements.define(i(a),g))}))}w();const c=g,v=w;export{c as DiwaHeading,v as defineCustomElement}

package/dist-custom-elements/diwa-icon.js

@@ -1,8 +1 @@
-import { D as DiwaIcon$1, d as defineCustomElement$1 } from './p-473ec48f.js';
-
-const DiwaIcon = DiwaIcon$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaIcon, defineCustomElement };
-
-//# sourceMappingURL=diwa-icon.js.map
+import{D as o,d as s}from"./p-DOo0FY37.js";const p=o,r=s;export{p as DiwaIcon,r as defineCustomElement}

package/dist-custom-elements/diwa-inline-notification.js

@@ -1,214 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
-import { d as defineCustomElement$3 } from './p-236fbbdd.js';
-import { d as defineCustomElement$2 } from './p-473ec48f.js';
-
-/**
- * diwa-inline-notification-styles.ts
- * ====================================
- * CSS-in-JS styles for <diwa-inline-notification>.
- *
- * The notification is a static flex-row banner:
- *   [icon-wrap] [content: heading + description] [actions: action-btn + dismiss-btn]
- *
- * Background and border colours are driven entirely by the `state` prop.
- * All values are CSS custom properties so that the [data-theme="light"]
- * overrides in app.css cascade into the Shadow DOM correctly.
- */
-const STATE_TOKENS = {
-    info: {
-        bg: 'var(--diwa-notification-info-soft)',
-        border: 'var(--diwa-color-info-300)',
-        iconColor: 'var(--diwa-notification-info)',
-    },
-    success: {
-        bg: 'var(--diwa-notification-success-soft)',
-        border: 'var(--diwa-color-success-100)',
-        iconColor: 'var(--diwa-notification-success)',
-    },
-    warning: {
-        bg: 'var(--diwa-notification-warning-soft)',
-        border: 'var(--diwa-color-warning-100)',
-        iconColor: 'var(--diwa-notification-warning)',
-    },
-    error: {
-        bg: 'var(--diwa-notification-error-soft)',
-        border: 'var(--diwa-color-danger-200)',
-        iconColor: 'var(--diwa-notification-error)',
-    },
-};
-const getComponentCss = (state) => {
-    const { bg, border, iconColor } = STATE_TOKENS[state];
-    return `
-  /* ── Host ──────────────────────────────────────────────────────────── */
-
-  :host {
-    display: block;
-    width: 100%;
-    font-family: var(--diwa-font-family-base);
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  /* ── Root wrapper — carries all visual styling ───────────────────── */
-
-  .root {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--diwa-space-3);
-    padding: var(--diwa-space-5) var(--diwa-space-6);
-    border-radius: var(--diwa-radius-md);
-    border: var(--diwa-border-width-thin) solid ${border};
-    background: ${bg};
-    box-sizing: border-box;
-    width: 100%;
-  }
-
-  /* ── Status icon ────────────────────────────────────────────────────── */
-
-  .icon-wrap {
-    flex-shrink: 0;
-    margin-top: var(--diwa-space-px);
-    color: ${iconColor};
-    line-height: 0;
-  }
-
-  /* ── Content ────────────────────────────────────────────────────────── */
-
-  .content {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--diwa-space-1);
-  }
-
-  .heading {
-    display: block;
-    font-size: var(--diwa-font-size-base);
-    font-weight: var(--diwa-font-weight-semibold);
-    color: var(--diwa-text-primary);
-    line-height: var(--diwa-line-height-tight);
-  }
-
-  .description {
-    margin: 0;
-    font-size: var(--diwa-font-size-sm);
-    color: var(--diwa-text-secondary);
-    line-height: var(--diwa-line-height-normal);
-  }
-
-  /* ── Actions ────────────────────────────────────────────────────────── */
-
-  .actions {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    gap: var(--diwa-space-2);
-    margin-top: var(--diwa-space-px);
-  }
-`;
-};
-
-const STATE_ICON = {
-    info: 'info',
-    success: 'circle-check',
-    warning: 'triangle-alert',
-    error: 'circle-alert',
-};
-const DiwaInlineNotification$1 = /*@__PURE__*/ proxyCustomElement(class DiwaInlineNotification extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.dismiss = createEvent(this, "dismiss", 1);
-        this.action = createEvent(this, "action", 1);
-        // ──────────────────────────────────────────────────────────────
-        // Props
-        // ──────────────────────────────────────────────────────────────
-        /** Per-component theme override (`light` / `dark`). */
-        this.theme = 'dark';
-        /**
-         * Semantic state — governs colour treatment, icon, and ARIA live role.
-         * - `info`    — neutral informational  (role="status", polite)
-         * - `success` — positive confirmation  (role="status", polite)
-         * - `warning` — non-blocking caution   (role="status", polite)
-         * - `error`   — critical or blocking   (role="alert",  assertive)
-         */
-        this.state = 'info';
-        /** Bold heading text rendered above the description. */
-        this.heading = '';
-        /**
-         * Description text.
-         * When empty, the default slot is rendered instead — allowing rich markup.
-         */
-        this.description = '';
-        /**
-         * Whether to show the dismiss (×) button.
-         * When `false`, the notification can only be removed programmatically.
-         */
-        this.dismissButton = true;
-        /**
-         * Shows a loading indicator on the action button and blocks its interaction.
-         * Has no effect when `actionLabel` is not set.
-         */
-        this.actionLoading = false;
-        // ──────────────────────────────────────────────────────────────
-        // Handlers
-        // ──────────────────────────────────────────────────────────────
-        this.handleDismiss = () => {
-            this.dismiss.emit();
-        };
-        this.handleAction = () => {
-            this.action.emit();
-        };
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Render
-    // ──────────────────────────────────────────────────────────────
-    render() {
-        const isAlert = this.state === 'error';
-        const showActions = this.dismissButton || Boolean(this.actionLabel);
-        return (h(Host, { key: 'ffbc48506e71547e9f670fada7b45ebbe0bbd9d2', "data-theme": this.theme }, h("style", { key: '4ccbe4e0e6b325dedc6263ea80481cecd39cac26', innerHTML: getComponentCss(this.state) }), h("div", { key: 'e304af7c978c4da1240c31e0468b2ec3895c7c3d', class: "root" }, h("div", { key: '1aea476763f19125e6ae889065014d0c24936025', class: "icon-wrap", "aria-hidden": "true" }, h("diwa-icon", { key: '3260c5b0aa23d6b995af704be6177a05ef85baa8', name: STATE_ICON[this.state], size: 16 })), h("div", { key: '79e994cb29375faede44260d9d77bee71a5e6e83', class: "content", role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite' }, this.heading && h("span", { key: '2d4964d50c797e7cf16480de07160a910374b0eb', class: "heading" }, this.heading), h("p", { key: 'e226d8728b99240e6e65b98eca4d87e369a50094', class: "description" }, this.description || h("slot", { key: '662f76be60914522329dd61a807133bcda44fa9f' }))), showActions && (h("div", { key: '20beaa3f3fc15584953092caa3f2a7176faf42d8', class: "actions" }, this.actionLabel && (h("diwa-button-pure", { key: '4631e465e1919bdb709473c7a0f8946c72882151', icon: "arrow-right", size: "sm", loading: this.actionLoading, theme: this.theme, onClick: this.handleAction }, this.actionLabel)), this.dismissButton && (h("diwa-button-pure", { key: '244273af8b94b76093e2f0065df740ea53bcdd33', icon: "x", label: "Dismiss notification", hideLabel: true, size: "sm", theme: this.theme, onClick: this.handleDismiss })))))));
-    }
-}, [1, "diwa-inline-notification", {
-        "theme": [513],
-        "state": [513],
-        "heading": [1],
-        "description": [1],
-        "dismissButton": [4, "dismiss-button"],
-        "actionLabel": [1, "action-label"],
-        "actionLoading": [4, "action-loading"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-inline-notification", "diwa-button-pure", "diwa-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-inline-notification":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaInlineNotification$1);
-            }
-            break;
-        case "diwa-button-pure":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "diwa-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const DiwaInlineNotification = DiwaInlineNotification$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaInlineNotification, defineCustomElement };
-
-//# sourceMappingURL=diwa-inline-notification.js.map
+import{t as i,p as n,H as a,c as e,h as t,a as o}from"./index.js";import{d as s}from"./p-C3hNpgqg.js";import{d as r}from"./p-DOo0FY37.js";const c={info:{bg:"var(--diwa-notification-info-soft)",border:"var(--diwa-color-info-300)",iconColor:"var(--diwa-notification-info)"},success:{bg:"var(--diwa-notification-success-soft)",border:"var(--diwa-color-success-100)",iconColor:"var(--diwa-notification-success)"},warning:{bg:"var(--diwa-notification-warning-soft)",border:"var(--diwa-color-warning-100)",iconColor:"var(--diwa-notification-warning)"},error:{bg:"var(--diwa-notification-error-soft)",border:"var(--diwa-color-danger-200)",iconColor:"var(--diwa-notification-error)"}},d=i=>{const{bg:n,border:a,iconColor:e}=c[i];return`\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    width: 100%;\n    font-family: var(--diwa-font-family-base);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Root wrapper — carries all visual styling ───────────────────── */\n\n  .root {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--diwa-space-3);\n    padding: var(--diwa-space-5) var(--diwa-space-6);\n    border-radius: var(--diwa-radius-md);\n    border: var(--diwa-border-width-thin) solid ${a};\n    background: ${n};\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  /* ── Status icon ────────────────────────────────────────────────────── */\n\n  .icon-wrap {\n    flex-shrink: 0;\n    margin-top: var(--diwa-space-px);\n    color: ${e};\n    line-height: 0;\n  }\n\n  /* ── Content ────────────────────────────────────────────────────────── */\n\n  .content {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--diwa-space-1);\n  }\n\n  .heading {\n    display: block;\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-primary);\n    line-height: var(--diwa-line-height-tight);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--diwa-font-size-sm);\n    color: var(--diwa-text-secondary);\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  /* ── Actions ────────────────────────────────────────────────────────── */\n\n  .actions {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    gap: var(--diwa-space-2);\n    margin-top: var(--diwa-space-px);\n  }\n`},l={info:"info",success:"circle-check",warning:"triangle-alert",error:"circle-alert"},f=n(class extends a{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.dismiss=e(this,"dismiss",1),this.action=e(this,"action",1),this.theme="dark",this.state="info",this.heading="",this.description="",this.dismissButton=!0,this.actionLoading=!1,this.handleDismiss=()=>{this.dismiss.emit()},this.handleAction=()=>{this.action.emit()}}render(){const i="error"===this.state,n=this.dismissButton||!!this.actionLabel;return t(o,{key:"ffbc48506e71547e9f670fada7b45ebbe0bbd9d2","data-theme":this.theme},t("style",{key:"4ccbe4e0e6b325dedc6263ea80481cecd39cac26",innerHTML:d(this.state)}),t("div",{key:"e304af7c978c4da1240c31e0468b2ec3895c7c3d",class:"root"},t("div",{key:"1aea476763f19125e6ae889065014d0c24936025",class:"icon-wrap","aria-hidden":"true"},t("diwa-icon",{key:"3260c5b0aa23d6b995af704be6177a05ef85baa8",name:l[this.state],size:16})),t("div",{key:"79e994cb29375faede44260d9d77bee71a5e6e83",class:"content",role:i?"alert":"status","aria-live":i?"assertive":"polite"},this.heading&&t("span",{key:"2d4964d50c797e7cf16480de07160a910374b0eb",class:"heading"},this.heading),t("p",{key:"e226d8728b99240e6e65b98eca4d87e369a50094",class:"description"},this.description||t("slot",{key:"662f76be60914522329dd61a807133bcda44fa9f"}))),n&&t("div",{key:"20beaa3f3fc15584953092caa3f2a7176faf42d8",class:"actions"},this.actionLabel&&t("diwa-button-pure",{key:"4631e465e1919bdb709473c7a0f8946c72882151",icon:"arrow-right",size:"sm",loading:this.actionLoading,theme:this.theme,onClick:this.handleAction},this.actionLabel),this.dismissButton&&t("diwa-button-pure",{key:"244273af8b94b76093e2f0065df740ea53bcdd33",icon:"x",label:"Dismiss notification",hideLabel:!0,size:"sm",theme:this.theme,onClick:this.handleDismiss}))))}},[257,"diwa-inline-notification",{theme:[513],state:[513],heading:[1],description:[1],dismissButton:[4,"dismiss-button"],actionLabel:[1,"action-label"],actionLoading:[4,"action-loading"]}]);function h(){"undefined"!=typeof customElements&&["diwa-inline-notification","diwa-button-pure","diwa-icon"].forEach((n=>{switch(n){case"diwa-inline-notification":customElements.get(i(n))||customElements.define(i(n),f);break;case"diwa-button-pure":customElements.get(i(n))||s();break;case"diwa-icon":customElements.get(i(n))||r()}}))}h();const b=f,w=h;export{b as DiwaInlineNotification,w as defineCustomElement}