@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-divider/diwa-divider-styles.js

@@ -0,0 +1,34 @@
+export const getComponentCss = (orientation) => {
+    const isVertical = orientation === 'vertical';
+    return `
+
+  /* ── Host ─────────────────────────────────────────────────────────── */
+
+  :host {
+    display: ${isVertical ? 'inline-flex' : 'block'};
+    ${isVertical ? 'align-self: stretch;' : 'width: 100%;'}
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Rule ─────────────────────────────────────────────────────────── */
+
+  .root {
+    display: block;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background-color: var(--diwa-border);
+    ${isVertical
+        ? `width: var(--diwa-border-width-thin);
+    height: 100%;
+    min-height: 1em;`
+        : `width: 100%;
+    height: var(--diwa-border-width-thin);`}
+  }
+`;
+};
+//# sourceMappingURL=diwa-divider-styles.js.map

package/dist/collection/components/diwa-divider/diwa-divider-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-divider-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-divider/diwa-divider-styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,WAA+B,EAAU,EAAE;IACzE,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAC;IAE9C,OAAO;;;;;eAKM,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;MAC7C,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,cAAc;;;;;;;;;;;;;;;;MAgBpD,UAAU;QACV,CAAC,CAAC;;qBAEa;QACf,CAAC,CAAC;2CACmC;;CAE1C,CAAC;AACF,CAAC,CAAC","sourcesContent":["import type { DividerOrientation } from './types';\r\n\r\nexport const getComponentCss = (orientation: DividerOrientation): string => {\r\n  const isVertical = orientation === 'vertical';\r\n\r\n  return `\r\n\r\n  /* ── Host ─────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: ${isVertical ? 'inline-flex' : 'block'};\r\n    ${isVertical ? 'align-self: stretch;' : 'width: 100%;'}\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Rule ─────────────────────────────────────────────────────────── */\r\n\r\n  .root {\r\n    display: block;\r\n    margin: 0;\r\n    padding: 0;\r\n    border: none;\r\n    background-color: var(--diwa-border);\r\n    ${isVertical\r\n      ? `width: var(--diwa-border-width-thin);\r\n    height: 100%;\r\n    min-height: 1em;`\r\n      : `width: 100%;\r\n    height: var(--diwa-border-width-thin);`}\r\n  }\r\n`;\r\n};\r\n"]}

package/dist/collection/components/diwa-divider/diwa-divider.js

@@ -0,0 +1,105 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-divider-styles";
+/**
+ * @component diwa-divider
+ *
+ * A purely presentational separator line. Renders a native `<hr>` element
+ * styled via CSS-in-JS. Supports horizontal (default) and vertical orientations.
+ *
+ * Accessibility:
+ *   - Renders as `role="separator"` (implicit from `<hr>`)
+ *   - `aria-orientation` is set automatically from the `orientation` prop
+ *   - Non-interactive — no focus, no keyboard handling
+ *
+ * Usage:
+ *   <!-- Horizontal (default) -->
+ *   <diwa-divider />
+ *
+ *   <!-- Vertical — requires a flex or grid parent with a defined height -->
+ *   <div style="display:flex; height:40px">
+ *     <span>Left</span>
+ *     <diwa-divider orientation="vertical" />
+ *     <span>Right</span>
+ *   </div>
+ */
+export class DiwaDivider {
+    constructor() {
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Per-component theme override (`light` / `dark`). */
+        this.theme = 'dark';
+        /**
+         * Orientation of the divider line.
+         * - `'horizontal'` (default) — a full-width 1 px horizontal rule.
+         * - `'vertical'` — a 1 px vertical rule that stretches to the parent's height.
+         *   The parent must be a flex or grid container with a defined height.
+         */
+        this.orientation = 'horizontal';
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        return (h(Host, { key: 'e143d66dbac5d538a79e9bd2cef6da4292839a4d', "data-theme": this.theme }, h("style", { key: '00e13388782156d60927e639215b3a361c231541', innerHTML: getComponentCss(this.orientation) }), h("hr", { key: '5653fa0a68365da009e6e0b2b5a41a2cfb4702f9', class: "root", role: "separator", "aria-orientation": this.orientation })));
+    }
+    static get is() { return "diwa-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override (`light` / `dark`)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DividerOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "DividerOrientation": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-divider/types.ts::DividerOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation of the divider line.\r\n- `'horizontal'` (default) \u2014 a full-width 1 px horizontal rule.\r\n- `'vertical'` \u2014 a 1 px vertical rule that stretches to the parent's height.\r\n  The parent must be a flex or grid container with a defined height."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "orientation",
+                "reflect": true,
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=diwa-divider.js.map

package/dist/collection/components/diwa-divider/diwa-divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-divider.js","sourceRoot":"","sources":["../../../src/components/diwa-divider/diwa-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGzD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAKH,MAAM,OAAO,WAAW;IAJxB;QAKE,iEAAiE;QACjE,QAAQ;QACR,iEAAiE;QAEjE,uDAAuD;QAC9B,UAAK,GAAU,MAAM,CAAC;QAE/C;;;;;WAKG;QACsB,gBAAW,GAAuB,YAAY,CAAC;KAkBzE;IAhBC,iEAAiE;IACjE,SAAS;IACT,iEAAiE;IAEjE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK;YAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,GAAI;YACvD,2DACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,WAAW,GAClC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { DividerOrientation } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-divider-styles';\r\n\r\n/**\r\n * @component diwa-divider\r\n *\r\n * A purely presentational separator line. Renders a native `<hr>` element\r\n * styled via CSS-in-JS. Supports horizontal (default) and vertical orientations.\r\n *\r\n * Accessibility:\r\n *   - Renders as `role=\"separator\"` (implicit from `<hr>`)\r\n *   - `aria-orientation` is set automatically from the `orientation` prop\r\n *   - Non-interactive — no focus, no keyboard handling\r\n *\r\n * Usage:\r\n *   <!-- Horizontal (default) -->\r\n *   <diwa-divider />\r\n *\r\n *   <!-- Vertical — requires a flex or grid parent with a defined height -->\r\n *   <div style=\"display:flex; height:40px\">\r\n *     <span>Left</span>\r\n *     <diwa-divider orientation=\"vertical\" />\r\n *     <span>Right</span>\r\n *   </div>\r\n */\r\n@Component({\r\n  tag: 'diwa-divider',\r\n  shadow: true,\r\n})\r\nexport class DiwaDivider {\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override (`light` / `dark`). */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Orientation of the divider line.\r\n   * - `'horizontal'` (default) — a full-width 1 px horizontal rule.\r\n   * - `'vertical'` — a 1 px vertical rule that stretches to the parent's height.\r\n   *   The parent must be a flex or grid container with a defined height.\r\n   */\r\n  @Prop({ reflect: true }) orientation: DividerOrientation = 'horizontal';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.orientation)} />\r\n        <hr\r\n          class=\"root\"\r\n          role=\"separator\"\r\n          aria-orientation={this.orientation}\r\n        />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/diwa-divider/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/diwa-divider/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-divider/types.ts"],"names":[],"mappings":"AAAA;;GAEG","sourcesContent":["/**\r\n * diwa-divider — Public TypeScript types\r\n */\r\n\r\nexport type DividerOrientation = 'horizontal' | 'vertical';\r\n"]}

package/dist/collection/components/diwa-flyout/diwa-flyout-styles.js

@@ -0,0 +1,117 @@
+/**
+ * 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.
+ */
+import { getReducedMotionStyle } from "../../utils/styles";
+export 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')}
+`;
+//# sourceMappingURL=diwa-flyout-styles.js.map

package/dist/collection/components/diwa-flyout/diwa-flyout-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-flyout-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-flyout/diwa-flyout-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAG3D,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,IAAa,EACb,QAAwB,EACxB,QAAwB,EAChB,EAAE,CAAC;;;;;;;;;sBASS,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;kBAC1B,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;uCACN,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,sCAAsC;;;;;;;;;;;;MAarF,QAAQ,KAAK,MAAM;IACjB,CAAC,CAAC;;;wDAG8C;IAChD,CAAC,CAAC;wCAEN;eACW,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;;;;;;;;;;;MAWzB,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW;;;;;;;aAOxC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;4BACxB,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA8C5E,qBAAqB,CAAC,QAAQ,EAAE,WAAW,CAAC;CAC/C,CAAC","sourcesContent":["/**\r\n * diwa-flyout-styles.ts\r\n * ======================\r\n * CSS-in-JS styles for <diwa-flyout>.\r\n *\r\n * The flyout is a fixed-position overlay consisting of:\r\n *   - A semi-transparent backdrop that covers the viewport.\r\n *   - A panel that slides in from the start (left) or end (right) edge.\r\n *\r\n * Both the backdrop and panel animate on open/close. Because all values are\r\n * passed as template literal expressions, the <style> tag is re-emitted on\r\n * every render — which happens whenever `open` or `position` changes.\r\n *\r\n * Visibility technique: `:host` uses `visibility: hidden` with a delayed\r\n * transition when closing so the panel is invisible after the slide-out\r\n * animation completes, while still being `visibility: visible` during the\r\n * opening animation so it animates in correctly.\r\n */\r\n\r\nimport { getReducedMotionStyle } from '../../utils/styles';\r\nimport type { FlyoutBackdrop, FlyoutPosition } from './types';\r\n\r\nexport const getComponentCss = (\r\n  open: boolean,\r\n  position: FlyoutPosition,\r\n  backdrop: FlyoutBackdrop,\r\n): string => `\r\n\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    position: fixed;\r\n    inset: 0;\r\n    z-index: var(--diwa-z-overlay);\r\n    pointer-events: ${open ? 'auto' : 'none'};\r\n    visibility: ${open ? 'visible' : 'hidden'};\r\n    transition: visibility 0s linear ${open ? '0s' : 'var(--diwa-motion-duration-moderate)'};\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Backdrop ──────────────────────────────────────────────────────── */\r\n\r\n  .backdrop {\r\n    position: absolute;\r\n    inset: 0;\r\n    ${\r\n      backdrop === 'blur'\r\n        ? `\r\n    background: var(--diwa-bg-frosted);\r\n    backdrop-filter: blur(var(--diwa-blur-lg));\r\n    -webkit-backdrop-filter: blur(var(--diwa-blur-lg));`\r\n        : `\r\n    background: var(--diwa-bg-shading);`\r\n    }\r\n    opacity: ${open ? '1' : '0'};\r\n    transition: opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\r\n    cursor: pointer;\r\n  }\r\n\r\n  /* ── Panel ─────────────────────────────────────────────────────────── */\r\n\r\n  .panel {\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    ${position === 'start' ? 'left: 0;' : 'right: 0;'}\r\n    width: var(--diwa-flyout-width, 480px);\r\n    min-width: var(--diwa-flyout-min-width);\r\n    max-width: 100vw;\r\n    display: flex;\r\n    flex-direction: column;\r\n    background: var(--diwa-bg-surface);\r\n    border-${position === 'start' ? 'right' : 'left'}: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    transform: translateX(${open ? '0' : position === 'start' ? '-100%' : '100%'});\r\n    transition: transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-base);\r\n    overflow: hidden;\r\n    outline: none;\r\n  }\r\n\r\n  /* ── Header ────────────────────────────────────────────────────────── */\r\n\r\n  .header {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-5) var(--diwa-space-6);\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n  }\r\n\r\n  .heading-text {\r\n    flex: 1;\r\n    min-width: 0;\r\n    font-family: var(--diwa-font-family-base);\r\n    font-size: var(--diwa-font-size-xl);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    color: var(--diwa-text-primary);\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n  }\r\n\r\n  /* ── Scrollable content ────────────────────────────────────────────── */\r\n\r\n  .content {\r\n    flex: 1;\r\n    overflow-y: auto;\r\n    padding: var(--diwa-space-6);\r\n    overscroll-behavior: contain;\r\n  }\r\n\r\n  /* ── Sticky footer ─────────────────────────────────────────────────── */\r\n\r\n  .footer {\r\n    flex-shrink: 0;\r\n    padding: var(--diwa-space-4) var(--diwa-space-6);\r\n    border-top: var(--diwa-border-width-thin) solid var(--diwa-border); {\r\n    display: none;\r\n  }\r\n\r\n  ${getReducedMotionStyle('.panel', '.backdrop')}\r\n`;\r\n"]}

package/dist/collection/components/diwa-flyout/diwa-flyout.js

@@ -0,0 +1,262 @@
+import { Host, h, } from "@stencil/core";
+import { getComponentCss } from "./diwa-flyout-styles";
+/**
+ * @component diwa-flyout
+ *
+ * A full-height overlay panel that slides in from the start or end edge of
+ * the viewport. Follows the controlled component pattern — the consumer
+ * manages `open` state in response to the `dismiss` event.
+ *
+ * Accessibility:
+ *   - Panel has `role="dialog"` and `aria-modal="true"`
+ *   - Clicking the backdrop, pressing Escape, or clicking the dismiss button
+ *     emits the `dismiss` event; the consumer sets `open={false}`
+ *   - Focus moves to the panel when opened and returns to the trigger element
+ *     when closed
+ *   - Body scroll is locked (`overflow: hidden`) while the flyout is open
+ *
+ * V1 limitations:
+ *   - No focus trap: Tab can navigate outside the panel. A full focus trap
+ *     will be added in V2.
+ *
+ * Usage:
+ *   <diwa-flyout heading="Settings" open={isOpen} onDismiss={() => setIsOpen(false)}>
+ *     <p>Flyout body content.</p>
+ *     <div slot="footer">
+ *       <diwa-button onClick={() => setIsOpen(false)}>Save</diwa-button>
+ *     </div>
+ *   </diwa-flyout>
+ *
+ * @slot default — Scrollable body content of the flyout.
+ * @slot header  — Extra content in the header row, inserted after the heading text.
+ * @slot footer  — Sticky footer content (e.g. action buttons). Auto-hides when empty.
+ */
+export class DiwaFlyout {
+    constructor() {
+        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: '52d5fe7be0dfea4a62bc7a4a7637b2f9edbe141d', "data-theme": this.theme }, h("style", { key: '024c161908d6c2954d8f6a3a07b24f07c2d8e43c' }, getComponentCss(this.open, this.position, this.backdrop)), h("div", { key: 'f76c3d2f71725d8d2b3d29a2cbbacc5b2c9da3d2', class: "backdrop", "aria-hidden": "true", onClick: this.handleDismiss }), h("div", { key: '6365781507ae83c8bc9d4f5233f9cdf464d8e9ca', class: "panel", role: "dialog", "aria-modal": "true", "aria-label": this.heading || 'Flyout', tabIndex: -1, ref: (el) => { this.panelEl = el; } }, h("div", { key: 'b8dbb339620ebc2fab8dde5ee70fd5eaca614464', class: "header" }, h("span", { key: 'e7de07e86b1ca0ca6072f47ab6da4b4eb5b4a7d3', class: "heading-text" }, this.heading), h("slot", { key: 'b688288e6f4a4fd910845eb2c14a6ba705e81eee', name: "header" }), h("diwa-button-pure", { key: '8924888f63033a7c285f63b589834ef4e301aa74', icon: "x", label: "Close flyout", size: "sm", hideLabel: true, onClick: this.handleDismiss })), h("div", { key: '1bf9756c8d8cb88f58e1b960c3d5ee22500828ba', class: "content" }, h("slot", { key: '292d34bfc03446b3f751f39df50c3655bd46a0e6' })), h("div", { key: '51270f6fed520df8a4101027a1f9023118b9f46e', class: "footer" }, h("slot", { key: 'f6684ace2a9f0ec82d5b1face5de06bede92c84b', name: "footer" })))));
+    }
+    static get is() { return "diwa-flyout"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Theme",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {
+                        "Theme": {
+                            "location": "import",
+                            "path": "../../utils/styles",
+                            "id": "src/utils/styles.ts::Theme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Per-component theme override (`light` / `dark`)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the flyout is currently open.\r\n\r\nControlled prop \u2014 the consumer must set this to `false` in response to\r\nthe `dismiss` event (backdrop click, Escape key, or dismiss button)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FlyoutPosition",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {
+                        "FlyoutPosition": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-flyout/types.ts::FlyoutPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which edge of the viewport the panel slides in from (`start` = left, `end` = right)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "position",
+                "reflect": true,
+                "defaultValue": "'end'"
+            },
+            "backdrop": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FlyoutBackdrop",
+                    "resolved": "\"blur\" | \"shading\"",
+                    "references": {
+                        "FlyoutBackdrop": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-flyout/types.ts::FlyoutBackdrop"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the visual style of the backdrop overlay.\r\n`blur`    \u2014 frosted glass (default; use when opened by user interaction).\r\n`shading` \u2014 solid dark scrim (use for system-triggered flyouts)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "backdrop",
+                "reflect": false,
+                "defaultValue": "'blur'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading text displayed in the flyout header."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "heading",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dismiss",
+                "name": "dismiss",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user requests the flyout to close (backdrop click,\r\nEscape key press, or dismiss button click).\r\n\r\nThe consumer must set `open={false}` in response:\r\n```html\r\n<diwa-flyout onDismiss={() => this.open = false} />\r\n```\r\nNot bubbles, not composed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=diwa-flyout.js.map

package/dist/collection/components/diwa-flyout/diwa-flyout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-flyout.js","sourceRoot":"","sources":["../../../src/components/diwa-flyout/diwa-flyout.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Component,\r\n  Event,\r\n  type EventEmitter,\r\n  Host,\r\n  Listen,\r\n  Prop,\r\n  Watch,\r\n  h,\r\n} from '@stencil/core';\r\nimport type { FlyoutBackdrop, FlyoutPosition } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-flyout-styles';\r\n\r\n/**\r\n * @component diwa-flyout\r\n *\r\n * A full-height overlay panel that slides in from the start or end edge of\r\n * the viewport. Follows the controlled component pattern — the consumer\r\n * manages `open` state in response to the `dismiss` event.\r\n *\r\n * Accessibility:\r\n *   - Panel has `role=\"dialog\"` and `aria-modal=\"true\"`\r\n *   - Clicking the backdrop, pressing Escape, or clicking the dismiss button\r\n *     emits the `dismiss` event; the consumer sets `open={false}`\r\n *   - Focus moves to the panel when opened and returns to the trigger element\r\n *     when closed\r\n *   - Body scroll is locked (`overflow: hidden`) while the flyout is open\r\n *\r\n * V1 limitations:\r\n *   - No focus trap: Tab can navigate outside the panel. A full focus trap\r\n *     will be added in V2.\r\n *\r\n * Usage:\r\n *   <diwa-flyout heading=\"Settings\" open={isOpen} onDismiss={() => setIsOpen(false)}>\r\n *     <p>Flyout body content.</p>\r\n *     <div slot=\"footer\">\r\n *       <diwa-button onClick={() => setIsOpen(false)}>Save</diwa-button>\r\n *     </div>\r\n *   </diwa-flyout>\r\n *\r\n * @slot default — Scrollable body content of the flyout.\r\n * @slot header  — Extra content in the header row, inserted after the heading text.\r\n * @slot footer  — Sticky footer content (e.g. action buttons). Auto-hides when empty.\r\n */\r\n@Component({\r\n  tag: 'diwa-flyout',\r\n  shadow: true,\r\n})\r\nexport class DiwaFlyout {\r\n  private panelEl?: HTMLDivElement;\r\n  private savedFocusEl: HTMLElement | null = null;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override (`light` / `dark`). */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Whether the flyout is currently open.\r\n   *\r\n   * Controlled prop — the consumer must set this to `false` in response to\r\n   * the `dismiss` event (backdrop click, Escape key, or dismiss button).\r\n   */\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n\r\n  /** Which edge of the viewport the panel slides in from (`start` = left, `end` = right). */\r\n  @Prop({ reflect: true }) position: FlyoutPosition = 'end';\r\n\r\n  /**\r\n   * Controls the visual style of the backdrop overlay.\r\n   * `blur`    — frosted glass (default; use when opened by user interaction).\r\n   * `shading` — solid dark scrim (use for system-triggered flyouts).\r\n   */\r\n  @Prop() backdrop: FlyoutBackdrop = 'blur';\r\n\r\n  /** Heading text displayed in the flyout header. */\r\n  @Prop() heading: string = '';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user requests the flyout to close (backdrop click,\r\n   * Escape key press, or dismiss button click).\r\n   *\r\n   * The consumer must set `open={false}` in response:\r\n   * ```html\r\n   * <diwa-flyout onDismiss={() => this.open = false} />\r\n   * ```\r\n   * Not bubbles, not composed.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  dismiss!: EventEmitter<void>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Lifecycle\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  @Watch('open')\r\n  onOpenChange(nextOpen: boolean): void {\r\n    if (nextOpen) {\r\n      document.body.style.overflow = 'hidden';\r\n      this.savedFocusEl = document.activeElement as HTMLElement;\r\n      requestAnimationFrame(() => {\r\n        this.panelEl?.focus();\r\n      });\r\n    } else {\r\n      document.body.style.overflow = '';\r\n      this.savedFocusEl?.focus();\r\n      this.savedFocusEl = null;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    document.body.style.overflow = '';\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Keyboard handling\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Close on Escape key while the flyout is open. */\r\n  @Listen('keydown', { target: 'window' })\r\n  onKeyDown(e: KeyboardEvent): void {\r\n    if (this.open && e.key === 'Escape') {\r\n      e.preventDefault();\r\n      this.dismiss.emit();\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleDismiss = (): void => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style>{getComponentCss(this.open, this.position, this.backdrop)}</style>\r\n\r\n        {/* Backdrop — clicking it emits dismiss */}\r\n        <div\r\n          class=\"backdrop\"\r\n          aria-hidden=\"true\"\r\n          onClick={this.handleDismiss}\r\n        />\r\n\r\n        {/* Dialog panel */}\r\n        <div\r\n          class=\"panel\"\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-label={this.heading || 'Flyout'}\r\n          tabIndex={-1}\r\n          ref={(el) => { this.panelEl = el as HTMLDivElement; }}\r\n        >\r\n          <div class=\"header\">\r\n            <span class=\"heading-text\">{this.heading}</span>\r\n            <slot name=\"header\" />\r\n            <diwa-button-pure\r\n              icon=\"x\"\r\n              label=\"Close flyout\"\r\n              size=\"sm\"\r\n              hideLabel={true}\r\n              onClick={this.handleDismiss}\r\n            />\r\n          </div>\r\n\r\n          <div class=\"content\">\r\n            <slot />\r\n          </div>\r\n\r\n          <div class=\"footer\">\r\n            <slot name=\"footer\" />\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/diwa-flyout/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/collection/components/diwa-flyout/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-flyout/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\r\n * diwa-flyout — Public TypeScript types\r\n * ======================================\r\n * Exported so framework wrapper packages and consumers can share these types.\r\n */\r\n\r\n/** Which edge of the viewport the panel slides in from. */\r\nexport type FlyoutPosition = 'start' | 'end';\r\n\r\n/**\r\n * Controls the visual style of the backdrop overlay behind the flyout.\r\n *\r\n * `blur`    — frosted glass via backdrop-filter (default).\r\n *             Use when the flyout is opened by direct user interaction.\r\n *\r\n * `shading` — solid dark scrim via --diwa-bg-shading.\r\n *             Use for system-triggered flyouts.\r\n */\r\nexport type FlyoutBackdrop = 'blur' | 'shading';\r\n"]}

package/dist/collection/components/diwa-icon/diwa-icon-styles.js

@@ -0,0 +1,13 @@
+export const getComponentCss = () => `
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+`;
+//# sourceMappingURL=diwa-icon-styles.js.map

package/dist/collection/components/diwa-icon/diwa-icon-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-icon-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-icon/diwa-icon-styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;CAW5C,CAAC","sourcesContent":["export const getComponentCss = (): string => `\r\n  :host {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    line-height: 0;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n`;\r\n"]}