@diwacopilot/components 1.0.0

package/dist/collection/components/diwa-pin-code/diwa-pin-code.js

@@ -0,0 +1,392 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-pin-code-styles";
+/**
+ * @controlled {"props": ["value"], "event": "update"}
+ */
+export class DiwaPinCode {
+    constructor() {
+        /** Visible label text. */
+        this.label = '';
+        /** Supplementary description below the label. */
+        this.description = '';
+        /** Validation state. */
+        this.state = 'none';
+        /** Feedback message. */
+        this.message = '';
+        /** Number of input boxes (1–6). */
+        this.length = 4;
+        /** Current value string. Length should match the length prop. */
+        this.value = '';
+        /** Input type — "number" restricts input to digits; "password" masks the value. */
+        this.type = 'number';
+        /** Whether the pin code is required. */
+        this.required = false;
+        /** Disables all input boxes. */
+        this.disabled = false;
+        /** Renders compact input boxes. */
+        this.compact = false;
+        /** Hides the visible label while preserving it as accessible name. */
+        this.hideLabel = false;
+        /** Adapts the color when used on a light or dark background. */
+        this.theme = 'dark';
+        this.handleInput = (e, index) => {
+            const input = e.target;
+            const char = input.value.slice(-1);
+            if (this.type === 'number' && char && !/^\d$/.test(char)) {
+                input.value = '';
+                return;
+            }
+            input.value = char;
+            if (char) {
+                const boxes = this.getBoxes();
+                if (index < boxes.length - 1) {
+                    boxes[index + 1].focus();
+                    boxes[index + 1].select();
+                }
+            }
+            this.emitUpdate();
+        };
+        this.handleKeyDown = (e, index) => {
+            const boxes = this.getBoxes();
+            const input = e.target;
+            if (e.key === 'Backspace' && !input.value && index > 0) {
+                boxes[index - 1].focus();
+                boxes[index - 1].select();
+            }
+            else if (e.key === 'ArrowLeft' && index > 0) {
+                boxes[index - 1].focus();
+            }
+            else if (e.key === 'ArrowRight' && index < boxes.length - 1) {
+                boxes[index + 1].focus();
+            }
+        };
+        this.handlePaste = (e) => {
+            var _a, _b;
+            e.preventDefault();
+            const text = (_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+            const digits = this.type === 'number' ? text.replace(/\D/g, '') : text;
+            const boxes = this.getBoxes();
+            digits.slice(0, this.length).split('').forEach((char, i) => {
+                if (boxes[i])
+                    boxes[i].value = char;
+            });
+            const lastFilled = Math.min(digits.length, this.length) - 1;
+            if (lastFilled >= 0) {
+                boxes[lastFilled].focus();
+                boxes[lastFilled].select();
+            }
+            this.emitUpdate();
+        };
+    }
+    getBoxes() {
+        var _a, _b;
+        return Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.box')) !== null && _b !== void 0 ? _b : []);
+    }
+    emitUpdate() {
+        const boxes = this.getBoxes();
+        const value = boxes.map((b) => b.value).join('');
+        const isComplete = value.length === this.length && !value.includes('');
+        this.update.emit({ value, isComplete });
+    }
+    render() {
+        const safeLength = Math.max(1, Math.min(6, this.length));
+        const valueChars = this.value.padEnd(safeLength, '').slice(0, safeLength);
+        const descId = 'desc';
+        const msgId = 'msg';
+        return (h(Host, { key: 'ce75d110bb3a2805f659bcb7134d5d634dcc70de', "data-theme": this.theme }, h("style", { key: 'e9c07d76495bdec903746bd91eda7837c9c295f1', innerHTML: getComponentCss(this.state, this.disabled, this.compact) }), h("div", { key: 'f592254bd71d2ee7f9146343c5da9313c7078478', class: "root" }, !this.hideLabel && this.label && (h("div", { key: 'cc40bfd72a5b9e338778de362fbe544748e0fc51', class: "label-row" }, h("span", { key: '18abb5940e763b390be780d465ac5c97daecc73e', class: "label" }, this.label, this.required && h("span", { key: '5d1fb8d02a8f774840338a52a3db1b8ca82b667b', class: "required", "aria-hidden": "true" }, " *")))), h("div", { key: 'b47022b7e3c7b04b13918c534b39ed67aea6855b', class: "boxes", role: "group", "aria-label": this.hideLabel && this.label ? this.label : undefined }, Array.from({ length: safeLength }).map((_, i) => {
+            var _a;
+            return (h("input", { key: i, class: "box", type: this.type === 'password' ? 'password' : 'text', inputMode: this.type === 'number' ? 'numeric' : 'text', maxLength: 1, value: (_a = valueChars[i]) !== null && _a !== void 0 ? _a : '', disabled: this.disabled, required: this.required && i === 0, "aria-label": `Digit ${i + 1} of ${safeLength}`, "aria-describedby": i === 0 ? (this.message ? msgId : this.description ? descId : undefined) : undefined, onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i), onPaste: i === 0 ? this.handlePaste : undefined, onFocus: (e) => e.target.select(), autocomplete: i === 0 ? 'one-time-code' : 'off' }));
+        })), !this.message && this.description && (h("p", { key: '81acb4b960a629cccf26db9cbab200acdbbd4079', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: 'fb3b87870b07324e635a8442c1e68959f23e3b4b', id: msgId, class: "message" }, this.message)))));
+    }
+    static get is() { return "diwa-pin-code"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label text."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Supplementary description below the label."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InputFieldState",
+                    "resolved": "\"error\" | \"none\" | \"success\"",
+                    "references": {
+                        "InputFieldState": {
+                            "location": "import",
+                            "path": "../diwa-input/types",
+                            "id": "src/components/diwa-input/types.ts::InputFieldState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation state."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "state",
+                "reflect": false,
+                "defaultValue": "'none'"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Feedback message."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "message",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "length": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of input boxes (1\u20136)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "length",
+                "reflect": false,
+                "defaultValue": "4"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value string. Length should match the length prop."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PinCodeType",
+                    "resolved": "\"number\" | \"password\"",
+                    "references": {
+                        "PinCodeType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-pin-code/types.ts::PinCodeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input type \u2014 \"number\" restricts input to digits; \"password\" masks the value."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'number'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the pin code is required."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables all input boxes."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders compact input boxes."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "compact",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the visible label while preserving it as accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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": "Adapts the color when used on a light or dark background."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "update",
+                "name": "update",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when any box value changes."
+                },
+                "complexType": {
+                    "original": "PinCodeUpdateEventDetail",
+                    "resolved": "PinCodeUpdateEventDetail",
+                    "references": {
+                        "PinCodeUpdateEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-pin-code/types.ts::PinCodeUpdateEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=diwa-pin-code.js.map

package/dist/collection/components/diwa-pin-code/diwa-pin-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-pin-code.js","sourceRoot":"","sources":["../../../src/components/diwa-pin-code/diwa-pin-code.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { InputFieldState } from '../diwa-input/types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { PinCodeType, PinCodeUpdateEventDetail } from './types';\r\nimport { getComponentCss } from './diwa-pin-code-styles';\r\n\r\n/**\r\n * @controlled {\"props\": [\"value\"], \"event\": \"update\"}\r\n */\r\n@Component({\r\n  tag: 'diwa-pin-code',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaPinCode {\r\n  @Element() host!: HTMLElement;\r\n\r\n  /** Visible label text. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Supplementary description below the label. */\r\n  @Prop() description: string = '';\r\n\r\n  /** Validation state. */\r\n  @Prop() state: InputFieldState = 'none';\r\n\r\n  /** Feedback message. */\r\n  @Prop() message: string = '';\r\n\r\n  /** Number of input boxes (1–6). */\r\n  @Prop() length: number = 4;\r\n\r\n  /** Current value string. Length should match the length prop. */\r\n  @Prop() value: string = '';\r\n\r\n  /** Input type — \"number\" restricts input to digits; \"password\" masks the value. */\r\n  @Prop() type: PinCodeType = 'number';\r\n\r\n  /** Whether the pin code is required. */\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n\r\n  /** Disables all input boxes. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Renders compact input boxes. */\r\n  @Prop() compact: boolean = false;\r\n\r\n  /** Hides the visible label while preserving it as accessible name. */\r\n  @Prop() hideLabel: boolean = false;\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Emitted when any box value changes. */\r\n  @Event({ bubbles: false, composed: false }) update!: EventEmitter<PinCodeUpdateEventDetail>;\r\n\r\n  private getBoxes(): HTMLInputElement[] {\r\n    return Array.from(this.host.shadowRoot?.querySelectorAll('.box') ?? []) as HTMLInputElement[];\r\n  }\r\n\r\n  private emitUpdate(): void {\r\n    const boxes = this.getBoxes();\r\n    const value = boxes.map((b) => b.value).join('');\r\n    const isComplete = value.length === this.length && !value.includes('');\r\n    this.update.emit({ value, isComplete });\r\n  }\r\n\r\n  private handleInput = (e: Event, index: number): void => {\r\n    const input = e.target as HTMLInputElement;\r\n    const char = input.value.slice(-1);\r\n\r\n    if (this.type === 'number' && char && !/^\\d$/.test(char)) {\r\n      input.value = '';\r\n      return;\r\n    }\r\n\r\n    input.value = char;\r\n\r\n    if (char) {\r\n      const boxes = this.getBoxes();\r\n      if (index < boxes.length - 1) {\r\n        boxes[index + 1].focus();\r\n        boxes[index + 1].select();\r\n      }\r\n    }\r\n\r\n    this.emitUpdate();\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent, index: number): void => {\r\n    const boxes = this.getBoxes();\r\n    const input = e.target as HTMLInputElement;\r\n\r\n    if (e.key === 'Backspace' && !input.value && index > 0) {\r\n      boxes[index - 1].focus();\r\n      boxes[index - 1].select();\r\n    } else if (e.key === 'ArrowLeft' && index > 0) {\r\n      boxes[index - 1].focus();\r\n    } else if (e.key === 'ArrowRight' && index < boxes.length - 1) {\r\n      boxes[index + 1].focus();\r\n    }\r\n  };\r\n\r\n  private handlePaste = (e: ClipboardEvent): void => {\r\n    e.preventDefault();\r\n    const text = e.clipboardData?.getData('text') ?? '';\r\n    const digits = this.type === 'number' ? text.replace(/\\D/g, '') : text;\r\n    const boxes = this.getBoxes();\r\n\r\n    digits.slice(0, this.length).split('').forEach((char, i) => {\r\n      if (boxes[i]) boxes[i].value = char;\r\n    });\r\n\r\n    const lastFilled = Math.min(digits.length, this.length) - 1;\r\n    if (lastFilled >= 0) {\r\n      boxes[lastFilled].focus();\r\n      boxes[lastFilled].select();\r\n    }\r\n\r\n    this.emitUpdate();\r\n  };\r\n\r\n  render() {\r\n    const safeLength = Math.max(1, Math.min(6, this.length));\r\n    const valueChars = this.value.padEnd(safeLength, '').slice(0, safeLength);\r\n    const descId = 'desc';\r\n    const msgId = 'msg';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state, this.disabled, this.compact)} />\r\n        <div class=\"root\">\r\n          {!this.hideLabel && this.label && (\r\n            <div class=\"label-row\">\r\n              <span class=\"label\">\r\n                {this.label}\r\n                {this.required && <span class=\"required\" aria-hidden=\"true\"> *</span>}\r\n              </span>\r\n            </div>\r\n          )}\r\n          <div\r\n            class=\"boxes\"\r\n            role=\"group\"\r\n            aria-label={this.hideLabel && this.label ? this.label : undefined}\r\n          >\r\n            {Array.from({ length: safeLength }).map((_, i) => (\r\n              <input\r\n                key={i}\r\n                class=\"box\"\r\n                type={this.type === 'password' ? 'password' : 'text'}\r\n                inputMode={this.type === 'number' ? 'numeric' : 'text'}\r\n                maxLength={1}\r\n                value={valueChars[i] ?? ''}\r\n                disabled={this.disabled}\r\n                required={this.required && i === 0}\r\n                aria-label={`Digit ${i + 1} of ${safeLength}`}\r\n                aria-describedby={i === 0 ? (this.message ? msgId : this.description ? descId : undefined) : undefined}\r\n                onInput={(e) => this.handleInput(e, i)}\r\n                onKeyDown={(e) => this.handleKeyDown(e, i)}\r\n                onPaste={i === 0 ? this.handlePaste : undefined}\r\n                onFocus={(e) => (e.target as HTMLInputElement).select()}\r\n                autocomplete={i === 0 ? 'one-time-code' : 'off'}\r\n              />\r\n            ))}\r\n          </div>\r\n          {!this.message && this.description && (\r\n            <p id={descId} class=\"description\">{this.description}</p>\r\n          )}\r\n          {this.message && (\r\n            <p id={msgId} class=\"message\">{this.message}</p>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/diwa-pin-code/types.js

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

package/dist/collection/components/diwa-pin-code/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-pin-code/types.ts"],"names":[],"mappings":"","sourcesContent":["export type PinCodeType = 'number' | 'password';\r\n\r\nexport interface PinCodeUpdateEventDetail {\r\n  value: string;\r\n  isComplete: boolean;\r\n}\r\n"]}

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

@@ -0,0 +1,61 @@
+import { getFocusStyle, getReducedMotionStyle } from "../../utils/styles";
+const PANEL_POSITION = {
+    top: 'bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);',
+    bottom: 'top: calc(100% + 6px); left: 50%; transform: translateX(-50%);',
+    start: 'right: calc(100% + 6px); top: 50%; transform: translateY(-50%);',
+    end: 'left: calc(100% + 6px); top: 50%; transform: translateY(-50%);',
+};
+export const getComponentCss = (isOpen, direction) => {
+    const panelPos = PANEL_POSITION[direction];
+    return `
+    :host {
+      display: inline-flex;
+      position: relative;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--diwa-popover-trigger-size);
+      height: var(--diwa-popover-trigger-size);
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: var(--diwa-radius-sm);
+      transition: color var(--diwa-transition-base);
+    }
+    .trigger:hover {
+      color: var(--diwa-text-primary);
+    }
+    ${getFocusStyle('.trigger')}
+    .panel {
+      display: ${isOpen ? 'block' : 'none'};
+      position: absolute;
+      ${panelPos}
+      z-index: 100;
+      min-width: var(--diwa-popover-panel-min-width);
+      max-width: var(--diwa-popover-panel-max-width);
+      padding: var(--diwa-space-5);
+      background: var(--diwa-bg-elevated);
+      border: var(--diwa-border-width-thin) solid var(--diwa-border);
+      border-radius: var(--diwa-radius-lg);
+      box-shadow: var(--diwa-shadow-lg);
+      font-family: var(--diwa-font-family-base);
+      font-size: var(--diwa-font-size-base);
+      color: var(--diwa-text-primary);
+      line-height: var(--diwa-line-height-normal);
+      white-space: normal;
+    }
+
+    .panel p,
+    .panel ::slotted(p) {
+      margin: 0;
+    }
+
+    ${getReducedMotionStyle('.trigger')}
+  `;
+};
+//# sourceMappingURL=diwa-popover-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-popover-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-popover/diwa-popover-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE1E,MAAM,cAAc,GAAqC;IACvD,GAAG,EAAE,mEAAmE;IACxE,MAAM,EAAE,gEAAgE;IACxE,KAAK,EAAE,iEAAiE;IACxE,GAAG,EAAE,gEAAgE;CACtE,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAe,EAAE,SAA2B,EAAU,EAAE;IACtF,MAAM,QAAQ,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;IAE3C,OAAO;;;;;;;;;;;;;;;;;;;;;;;MAuBH,aAAa,CAAC,UAAU,CAAC;;iBAEd,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;QAElC,QAAQ;;;;;;;;;;;;;;;;;;;;;MAqBV,qBAAqB,CAAC,UAAU,CAAC;GACpC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { PopoverDirection } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nconst PANEL_POSITION: Record<PopoverDirection, string> = {\r\n  top: 'bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);',\r\n  bottom: 'top: calc(100% + 6px); left: 50%; transform: translateX(-50%);',\r\n  start: 'right: calc(100% + 6px); top: 50%; transform: translateY(-50%);',\r\n  end: 'left: calc(100% + 6px); top: 50%; transform: translateY(-50%);',\r\n};\r\n\r\nexport const getComponentCss = (isOpen: boolean, direction: PopoverDirection): string => {\r\n  const panelPos = PANEL_POSITION[direction];\r\n\r\n  return `\r\n    :host {\r\n      display: inline-flex;\r\n      position: relative;\r\n    }\r\n    :host([hidden]) {\r\n      display: none;\r\n    }\r\n    .trigger {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: var(--diwa-popover-trigger-size);\r\n      height: var(--diwa-popover-trigger-size);\r\n      padding: 0;\r\n      background: none;\r\n      border: none;\r\n      border-radius: var(--diwa-radius-sm);\r\n      transition: color var(--diwa-transition-base);\r\n    }\r\n    .trigger:hover {\r\n      color: var(--diwa-text-primary);\r\n    }\r\n    ${getFocusStyle('.trigger')}\r\n    .panel {\r\n      display: ${isOpen ? 'block' : 'none'};\r\n      position: absolute;\r\n      ${panelPos}\r\n      z-index: 100;\r\n      min-width: var(--diwa-popover-panel-min-width);\r\n      max-width: var(--diwa-popover-panel-max-width);\r\n      padding: var(--diwa-space-5);\r\n      background: var(--diwa-bg-elevated);\r\n      border: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n      border-radius: var(--diwa-radius-lg);\r\n      box-shadow: var(--diwa-shadow-lg);\r\n      font-family: var(--diwa-font-family-base);\r\n      font-size: var(--diwa-font-size-base);\r\n      color: var(--diwa-text-primary);\r\n      line-height: var(--diwa-line-height-normal);\r\n      white-space: normal;\r\n    }\r\n\r\n    .panel p,\r\n    .panel ::slotted(p) {\r\n      margin: 0;\r\n    }\r\n\r\n    ${getReducedMotionStyle('.trigger')}\r\n  `;\r\n};\r\n"]}

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

@@ -0,0 +1,134 @@
+import { Host, h } from "@stencil/core";
+import { getComponentCss } from "./diwa-popover-styles";
+/**
+ * @slot default — Content displayed inside the popover panel.
+ * @slot button  — Custom trigger element that replaces the default info button.
+ */
+export class DiwaPopover {
+    constructor() {
+        /** Preferred direction the panel opens relative to the trigger. */
+        this.direction = 'bottom';
+        /** Adapts the color when used on a light or dark background. */
+        this.theme = 'dark';
+        this.isOpen = false;
+        this.toggle = () => {
+            this.isOpen = !this.isOpen;
+        };
+    }
+    handleGlobalKeydown(e) {
+        if (e.key === 'Escape' && this.isOpen) {
+            this.isOpen = false;
+        }
+    }
+    handleGlobalPointerDown(e) {
+        if (!this.isOpen) {
+            return;
+        }
+        if (!e.composedPath().includes(this.host)) {
+            this.isOpen = false;
+        }
+    }
+    render() {
+        return (h(Host, { key: '29f28c2151f2472cd116e14239de1aeeb9d046c5', "data-theme": this.theme }, h("style", { key: '35ba788b9f4c625e864a8aa6ca0b4b4366b13d30', innerHTML: getComponentCss(this.isOpen, this.direction) }), h("slot", { key: 'd253876442f93e392b63bd1345dd39ea72c56926', name: "button" }, h("button", { key: '756b2d3b46770bea764bb3e29de4421c20f58523', class: "trigger", type: "button", "aria-expanded": String(this.isOpen), "aria-haspopup": "true", onClick: this.toggle }, h("svg", { key: '79808b6b95b48df821d2f73a75c25acc91c93e25', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("circle", { key: 'f1ae6d761a15e38ea29d0a3fb41edde1022fd1af', cx: "12", cy: "12", r: "10" }), h("line", { key: '2d115de15f3558053fe928470262235a0740990f', x1: "12", y1: "8", x2: "12", y2: "12" }), h("line", { key: '5e59843ffa9c7eb1e7f536b4dbcefa83686fa19e', x1: "12", y1: "16", x2: "12.01", y2: "16" })))), h("div", { key: '58abbaa997097e8ba2b6394cdb7e4f34a516f027', class: "panel", role: "tooltip", "aria-hidden": String(!this.isOpen) }, this.description && h("p", { key: '7a2dcca65d61ad04e8bffc3b6af4dc5759f88449' }, this.description), h("slot", { key: '8dcc3f2f287fa5a194decb4d6585cd64e58a00ca' }))));
+    }
+    static get is() { return "diwa-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverDirection",
+                    "resolved": "\"bottom\" | \"end\" | \"start\" | \"top\"",
+                    "references": {
+                        "PopoverDirection": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/diwa-popover/types.ts::PopoverDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preferred direction the panel opens relative to the trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "'bottom'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Short description text rendered directly inside the panel (alternative to using the default slot)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": false
+            },
+            "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": "Adapts the color when used on a light or dark background."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": true,
+                "defaultValue": "'dark'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleGlobalKeydown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pointerdown",
+                "method": "handleGlobalPointerDown",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=diwa-popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-popover.js","sourceRoot":"","sources":["../../../src/components/diwa-popover/diwa-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGjF,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD;;;GAGG;AAKH,MAAM,OAAO,WAAW;IAJxB;QAOE,mEAAmE;QAC3D,cAAS,GAAqB,QAAQ,CAAC;QAK/C,gEAAgE;QACvC,UAAK,GAAU,MAAM,CAAC;QAE9B,WAAM,GAAY,KAAK,CAAC;QAoBjC,WAAM,GAAG,GAAS,EAAE;YAC1B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC7B,CAAC,CAAC;KA2CH;IA9DC,mBAAmB,CAAC,CAAgB;QAClC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACtC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAGD,uBAAuB,CAAC,CAAe;QACrC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC1C,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACtB,CAAC;IACH,CAAC;IAMD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK;YAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,GAAI;YAClE,6DAAM,IAAI,EAAC,QAAQ;gBACjB,+DACE,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,QAAQ,mBACE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,mBACpB,MAAM,EACpB,OAAO,EAAE,IAAI,CAAC,MAAM;oBAEpB,4DACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,qBACN,OAAO,iBACX,MAAM;wBAElB,+DAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG;wBACjC,6DAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,GAAG;wBACvC,6DAAM,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAC,IAAI,GAAG,CACvC,CACC,CACJ;YACP,4DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,SAAS,iBACD,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;gBAEhC,IAAI,CAAC,WAAW,IAAI,4DAAI,IAAI,CAAC,WAAW,CAAK;gBAC9C,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Listen, Prop, State, h } from '@stencil/core';\r\nimport type { Theme } from '../../utils/styles';\r\nimport type { PopoverDirection } from './types';\r\nimport { getComponentCss } from './diwa-popover-styles';\r\n\r\n/**\r\n * @slot default — Content displayed inside the popover panel.\r\n * @slot button  — Custom trigger element that replaces the default info button.\r\n */\r\n@Component({\r\n  tag: 'diwa-popover',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaPopover {\r\n  @Element() host!: HTMLDiwaPopoverElement;\r\n\r\n  /** Preferred direction the panel opens relative to the trigger. */\r\n  @Prop() direction: PopoverDirection = 'bottom';\r\n\r\n  /** Short description text rendered directly inside the panel (alternative to using the default slot). */\r\n  @Prop() description?: string;\r\n\r\n  /** Adapts the color when used on a light or dark background. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  @State() private isOpen: boolean = false;\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleGlobalKeydown(e: KeyboardEvent): void {\r\n    if (e.key === 'Escape' && this.isOpen) {\r\n      this.isOpen = false;\r\n    }\r\n  }\r\n\r\n  @Listen('pointerdown', { target: 'window' })\r\n  handleGlobalPointerDown(e: PointerEvent): void {\r\n    if (!this.isOpen) {\r\n      return;\r\n    }\r\n\r\n    if (!e.composedPath().includes(this.host)) {\r\n      this.isOpen = false;\r\n    }\r\n  }\r\n\r\n  private toggle = (): void => {\r\n    this.isOpen = !this.isOpen;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.isOpen, this.direction)} />\r\n        <slot name=\"button\">\r\n          <button\r\n            class=\"trigger\"\r\n            type=\"button\"\r\n            aria-expanded={String(this.isOpen)}\r\n            aria-haspopup=\"true\"\r\n            onClick={this.toggle}\r\n          >\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              width=\"16\"\r\n              height=\"16\"\r\n              viewBox=\"0 0 24 24\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n              stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\r\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\r\n            </svg>\r\n          </button>\r\n        </slot>\r\n        <div\r\n          class=\"panel\"\r\n          role=\"tooltip\"\r\n          aria-hidden={String(!this.isOpen)}\r\n        >\r\n          {this.description && <p>{this.description}</p>}\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/diwa-popover/types.ts"],"names":[],"mappings":"","sourcesContent":["export type PopoverDirection = 'top' | 'bottom' | 'start' | 'end';\r\n"]}