@diwacopilot/components 1.0.0

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

@@ -0,0 +1,238 @@
+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-54e5b3fb.js';
+import { d as defineCustomElement$2 } from './p-302af10d.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: '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 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

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

@@ -0,0 +1 @@
+{"file":"diwa-flyout.js","mappings":"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","names":["DiwaFlyout"],"sources":["src/components/diwa-flyout/diwa-flyout-styles.ts","src/components/diwa-flyout/diwa-flyout.tsx"],"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","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"],"version":3}

package/dist-custom-elements/diwa-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaIcon extends Components.DiwaIcon, HTMLElement {}
+export const DiwaIcon: {
+    prototype: DiwaIcon;
+    new (): DiwaIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,8 @@
+import { D as DiwaIcon$1, d as defineCustomElement$1 } from './p-302af10d.js';
+
+const DiwaIcon = DiwaIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DiwaIcon, defineCustomElement };
+
+//# sourceMappingURL=diwa-icon.js.map

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

@@ -0,0 +1 @@
+{"file":"diwa-icon.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist-custom-elements/diwa-inline-notification.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaInlineNotification extends Components.DiwaInlineNotification, HTMLElement {}
+export const DiwaInlineNotification: {
+    prototype: DiwaInlineNotification;
+    new (): DiwaInlineNotification;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,214 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
+import { d as defineCustomElement$3 } from './p-54e5b3fb.js';
+import { d as defineCustomElement$2 } from './p-302af10d.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: '9c5daaa90736893373306014a7a81ceff288038e', "data-theme": this.theme }, h("style", { key: '703bad80df2e60ab7348d4c769ac3ef68def40e8', innerHTML: getComponentCss(this.state) }), h("div", { key: '8bcc89834f5664f7bc0bcd856735ec4793346ea7', class: "root" }, h("div", { key: '252d48eb839a4bf50039607bf7740c520d0ac78f', class: "icon-wrap", "aria-hidden": "true" }, h("diwa-icon", { key: '968fbde38c713c9de87571d9470f48845c398dab', name: STATE_ICON[this.state], size: 16 })), h("div", { key: '5d7a97ac06d8eadb6e586d8460d9bcd593a80abb', class: "content", role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite' }, this.heading && h("span", { key: 'b3e0f71b3fd449585b262c4cd6eb05837cee7713', class: "heading" }, this.heading), h("p", { key: '91da63ee4efbbe5333f96ff80d548fe9546c4284', class: "description" }, this.description || h("slot", { key: '562c57c90e98b8623e9b64f751bfcc4f3ee7a08c' }))), showActions && (h("div", { key: '9e9b140ff5968750cbba94bc793fa9643bad75bb', class: "actions" }, this.actionLabel && (h("diwa-button-pure", { key: '12794cd50df008bba55ad71808c5392ef18344ed', icon: "arrow-right", size: "sm", loading: this.actionLoading, theme: this.theme, onClick: this.handleAction }, this.actionLabel)), this.dismissButton && (h("diwa-button-pure", { key: '23c15e5eb4fb8114fbb760f65d7e09652c45d862', 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

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

@@ -0,0 +1 @@
+{"file":"diwa-inline-notification.js","mappings":"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","names":["DiwaInlineNotification"],"sources":["src/components/diwa-inline-notification/diwa-inline-notification-styles.ts","src/components/diwa-inline-notification/diwa-inline-notification.tsx"],"sourcesContent":["/**\r\n * diwa-inline-notification-styles.ts\r\n * ====================================\r\n * CSS-in-JS styles for <diwa-inline-notification>.\r\n *\r\n * The notification is a static flex-row banner:\r\n *   [icon-wrap] [content: heading + description] [actions: action-btn + dismiss-btn]\r\n *\r\n * Background and border colours are driven entirely by the `state` prop.\r\n * All values are CSS custom properties so that the [data-theme=\"light\"]\r\n * overrides in app.css cascade into the Shadow DOM correctly.\r\n */\r\n\r\nimport type { InlineNotificationState } from './types';\r\n\r\ntype StateTokens = { bg: string; border: string; iconColor: string };\r\n\r\nconst STATE_TOKENS: Record<InlineNotificationState, StateTokens> = {\r\n  info: {\r\n    bg: 'var(--diwa-notification-info-soft)',\r\n    border: 'var(--diwa-color-info-300)',\r\n    iconColor: 'var(--diwa-notification-info)',\r\n  },\r\n  success: {\r\n    bg: 'var(--diwa-notification-success-soft)',\r\n    border: 'var(--diwa-color-success-100)',\r\n    iconColor: 'var(--diwa-notification-success)',\r\n  },\r\n  warning: {\r\n    bg: 'var(--diwa-notification-warning-soft)',\r\n    border: 'var(--diwa-color-warning-100)',\r\n    iconColor: 'var(--diwa-notification-warning)',\r\n  },\r\n  error: {\r\n    bg: 'var(--diwa-notification-error-soft)',\r\n    border: 'var(--diwa-color-danger-200)',\r\n    iconColor: 'var(--diwa-notification-error)',\r\n  },\r\n};\r\n\r\nexport const getComponentCss = (state: InlineNotificationState): string => {\r\n  const { bg, border, iconColor } = STATE_TOKENS[state];\r\n\r\n  return `\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    width: 100%;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Root wrapper — carries all visual styling ───────────────────── */\r\n\r\n  .root {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: var(--diwa-space-3);\r\n    padding: var(--diwa-space-5) var(--diwa-space-6);\r\n    border-radius: var(--diwa-radius-md);\r\n    border: var(--diwa-border-width-thin) solid ${border};\r\n    background: ${bg};\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n  }\r\n\r\n  /* ── Status icon ────────────────────────────────────────────────────── */\r\n\r\n  .icon-wrap {\r\n    flex-shrink: 0;\r\n    margin-top: var(--diwa-space-px);\r\n    color: ${iconColor};\r\n    line-height: 0;\r\n  }\r\n\r\n  /* ── Content ────────────────────────────────────────────────────────── */\r\n\r\n  .content {\r\n    flex: 1;\r\n    min-width: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--diwa-space-1);\r\n  }\r\n\r\n  .heading {\r\n    display: block;\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    color: var(--diwa-text-primary);\r\n    line-height: var(--diwa-line-height-tight);\r\n  }\r\n\r\n  .description {\r\n    margin: 0;\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: var(--diwa-text-secondary);\r\n    line-height: var(--diwa-line-height-normal);\r\n  }\r\n\r\n  /* ── Actions ────────────────────────────────────────────────────────── */\r\n\r\n  .actions {\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-2);\r\n    margin-top: var(--diwa-space-px);\r\n  }\r\n`;\r\n};\r\n","import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { InlineNotificationState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-inline-notification-styles';\r\n\r\nconst STATE_ICON: Record<InlineNotificationState, string> = {\r\n  info: 'info',\r\n  success: 'circle-check',\r\n  warning: 'triangle-alert',\r\n  error: 'circle-alert',\r\n};\r\n\r\n/**\r\n * @component diwa-inline-notification\r\n *\r\n * A static inline banner that communicates contextual feedback.\r\n * Supports four semantic states — info, success, warning, error — each with\r\n * a distinct colour treatment and Lucide status icon.\r\n *\r\n * Accessibility:\r\n *   - state=\"error\" uses role=\"alert\" (assertive live region)\r\n *   - All other states use role=\"status\" (polite live region)\r\n *   - The icon is aria-hidden — semantic meaning is carried by the text\r\n *   - The dismiss button has an accessible label via label + hideLabel\r\n *\r\n * Usage:\r\n *   <diwa-inline-notification\r\n *     state=\"success\"\r\n *     heading=\"Saved\"\r\n *     description=\"Your changes have been saved.\"\r\n *   />\r\n *\r\n * @slot default — Fallback description content when the description prop is empty.\r\n */\r\n@Component({\r\n  tag: 'diwa-inline-notification',\r\n  shadow: true,\r\n})\r\nexport class DiwaInlineNotification {\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   * Semantic state — governs colour treatment, icon, and ARIA live role.\r\n   * - `info`    — neutral informational  (role=\"status\", polite)\r\n   * - `success` — positive confirmation  (role=\"status\", polite)\r\n   * - `warning` — non-blocking caution   (role=\"status\", polite)\r\n   * - `error`   — critical or blocking   (role=\"alert\",  assertive)\r\n   */\r\n  @Prop({ reflect: true }) state: InlineNotificationState = 'info';\r\n\r\n  /** Bold heading text rendered above the description. */\r\n  @Prop() heading: string = '';\r\n\r\n  /**\r\n   * Description text.\r\n   * When empty, the default slot is rendered instead — allowing rich markup.\r\n   */\r\n  @Prop() description: string = '';\r\n\r\n  /**\r\n   * Whether to show the dismiss (×) button.\r\n   * When `false`, the notification can only be removed programmatically.\r\n   */\r\n  @Prop() dismissButton: boolean = true;\r\n\r\n  /**\r\n   * Optional label for a secondary action button rendered beside the dismiss button.\r\n   * When set, a diwa-button-pure with an arrow icon emits the `action` event on click.\r\n   */\r\n  @Prop() actionLabel?: string;\r\n\r\n  /**\r\n   * Shows a loading indicator on the action button and blocks its interaction.\r\n   * Has no effect when `actionLabel` is not set.\r\n   */\r\n  @Prop() actionLoading: boolean = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the dismiss (×) button is clicked.\r\n   * The consumer is responsible for removing or hiding the notification in response.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  dismiss!: EventEmitter<void>;\r\n\r\n  /**\r\n   * Emitted when the action button is clicked.\r\n   * Only fired when `actionLabel` is set and the button is not in a loading state.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  action!: EventEmitter<void>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Handlers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleDismiss = (): void => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  private handleAction = (): void => {\r\n    this.action.emit();\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const isAlert = this.state === 'error';\r\n    const showActions = this.dismissButton || Boolean(this.actionLabel);\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state)} />\r\n\r\n        <div class=\"root\">\r\n          {/* Status icon — decorative, hidden from assistive technology */}\r\n          <div class=\"icon-wrap\" aria-hidden=\"true\">\r\n            <diwa-icon name={STATE_ICON[this.state]} size={16} />\r\n          </div>\r\n\r\n          {/* Content — ARIA live region */}\r\n          <div\r\n            class=\"content\"\r\n            role={isAlert ? 'alert' : 'status'}\r\n            aria-live={isAlert ? 'assertive' : 'polite'}\r\n          >\r\n            {this.heading && <span class=\"heading\">{this.heading}</span>}\r\n            <p class=\"description\">{this.description || <slot />}</p>\r\n          </div>\r\n\r\n          {/* Actions row */}\r\n          {showActions && (\r\n            <div class=\"actions\">\r\n              {this.actionLabel && (\r\n                <diwa-button-pure\r\n                  icon=\"arrow-right\"\r\n                  size=\"sm\"\r\n                  loading={this.actionLoading}\r\n                  theme={this.theme}\r\n                  onClick={this.handleAction}\r\n                >\r\n                  {this.actionLabel}\r\n                </diwa-button-pure>\r\n              )}\r\n              {this.dismissButton && (\r\n                <diwa-button-pure\r\n                  icon=\"x\"\r\n                  label=\"Dismiss notification\"\r\n                  hideLabel={true}\r\n                  size=\"sm\"\r\n                  theme={this.theme}\r\n                  onClick={this.handleDismiss}\r\n                />\r\n              )}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-input-date.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface DiwaInputDate extends Components.DiwaInputDate, HTMLElement {}
+export const DiwaInputDate: {
+    prototype: DiwaInputDate;
+    new (): DiwaInputDate;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;