@ind-ds/core 0.1.0

package/dist/collection/components/atoms/checkbox/checkbox.css

@@ -0,0 +1,92 @@
+:host {
+  display: inline-flex;
+  font-family: var(--ind-font-family-sans);
+  font-size: var(--ind-font-size-base, 12px);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  --_size: 16px;
+}
+
+:host([size="sm"]) { --_size: 12px; }
+:host([size="md"]) { --_size: 16px; }
+:host([size="lg"]) { --_size: 20px; }
+
+.wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ind-spacing-3, 6px);
+  cursor: pointer;
+  user-select: none;
+}
+
+.box {
+  position: relative;
+  display: inline-block;
+  width: var(--_size);
+  height: var(--_size);
+  flex-shrink: 0;
+}
+
+.native {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+
+.mark {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: var(--ind-surface-sunken, light-dark(#ffffff, #000000));
+  border: 1px solid var(--ind-surface-border-default, #2a3340);
+  border-radius: var(--ind-radius-sm, 2px);
+  transition:
+    background var(--ind-motion-duration-fast, 120ms),
+    border-color var(--ind-motion-duration-fast, 120ms);
+}
+
+.mark::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  display: block;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 70%;
+  opacity: 0;
+  transition: opacity var(--ind-motion-duration-fast, 120ms);
+}
+
+:host([checked]) .mark,
+:host([indeterminate]) .mark {
+  background: var(--ind-button-primary-bg, #2563eb);
+  border-color: var(--ind-button-primary-border, #60a5fa);
+}
+
+:host([checked]) .mark::after {
+  opacity: 1;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.5 3.5L13 5'/></svg>");
+}
+
+:host([indeterminate]) .mark::after {
+  opacity: 1;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' d='M3 8h10'/></svg>");
+}
+
+.native:focus-visible + .mark {
+  outline: 2px solid var(--ind-surface-focus-ring, #22d3ee);
+  outline-offset: 2px;
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+}
+:host([disabled]) .wrap {
+  cursor: not-allowed;
+}
+
+.label {
+  line-height: 1.2;
+}

package/dist/collection/components/atoms/checkbox/checkbox.js

@@ -0,0 +1,214 @@
+import { h, Host, } from "@stencil/core";
+export class IndCheckbox {
+    host;
+    checked = false;
+    indeterminate = false;
+    disabled = false;
+    size = 'md';
+    label;
+    name;
+    value;
+    indChange;
+    componentDidLoad() {
+        this.syncIndeterminate();
+    }
+    syncIndeterminate() {
+        const input = this.host.shadowRoot?.querySelector('input');
+        if (input)
+            input.indeterminate = this.indeterminate;
+    }
+    onChange = (e) => {
+        const next = e.target.checked;
+        this.checked = next;
+        this.indChange.emit(next);
+    };
+    render() {
+        const ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';
+        return (h(Host, { key: 'd4b48a80703ea584c4db306d26fcaebd990f9d87' }, h("label", { key: 'd101498325e34b2d4ce87189aaf82930f81fd831', class: "wrap", part: "wrap" }, h("span", { key: '8363b37e0c6a9a082dbab4e0bb26b09506cb4b00', class: "box", part: "box" }, h("input", { key: '2c2a0d2e10c70a97aa2c983941f14bd3c6bc30dd', type: "checkbox", class: "native", part: "native", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, "aria-checked": ariaChecked, onChange: this.onChange }), h("span", { key: '41f5ba40d9c2e27e899366e9de111d3aa4a3817c', class: "mark", part: "mark", "aria-hidden": "true" })), this.label && h("span", { key: 'c9955a662691ac94a2be379edc332f550f09b53e', class: "label", part: "label" }, this.label))));
+    }
+    static get is() { return "ind-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "CheckboxSize": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/checkbox/checkbox.tsx",
+                            "id": "src/components/atoms/checkbox/checkbox.tsx::CheckboxSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indChange",
+                "name": "indChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "indeterminate",
+                "methodName": "syncIndeterminate"
+            }];
+    }
+}
+//# sourceMappingURL=checkbox.js.map

package/dist/collection/components/atoms/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/atoms/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,KAAK,EAEL,OAAO,EACP,KAAK,EACL,CAAC,EACD,IAAI,GACL,MAAM,eAAe,CAAC;AASvB,MAAM,OAAO,WAAW;IACX,IAAI,CAAe;IAEU,OAAO,GAAY,KAAK,CAAC;IACxC,aAAa,GAAY,KAAK,CAAC;IAC/B,QAAQ,GAAY,KAAK,CAAC;IAC1B,IAAI,GAAiB,IAAI,CAAC;IAC3C,KAAK,CAAU;IACf,IAAI,CAAU;IACd,KAAK,CAAU;IAEd,SAAS,CAAyB;IAE3C,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAGD,iBAAiB;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAC3D,IAAI,KAAK;YAAE,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;IACtD,CAAC;IAEO,QAAQ,GAAG,CAAC,CAAQ,EAAE,EAAE;QAC9B,MAAM,IAAI,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC;QACpD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACnF,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;gBAC7B,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK;oBAC1B,8DACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB;oBACF,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,GAAG,CAC/C;gBACN,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC7D,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\n\nexport type CheckboxSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n})\nexport class IndCheckbox {\n  @Element() host!: HTMLElement;\n\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) size: CheckboxSize = 'md';\n  @Prop() label?: string;\n  @Prop() name?: string;\n  @Prop() value?: string;\n\n  @Event() indChange!: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    this.syncIndeterminate();\n  }\n\n  @Watch('indeterminate')\n  syncIndeterminate() {\n    const input = this.host.shadowRoot?.querySelector('input');\n    if (input) input.indeterminate = this.indeterminate;\n  }\n\n  private onChange = (e: Event) => {\n    const next = (e.target as HTMLInputElement).checked;\n    this.checked = next;\n    this.indChange.emit(next);\n  };\n\n  render() {\n    const ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';\n    return (\n      <Host>\n        <label class=\"wrap\" part=\"wrap\">\n          <span class=\"box\" part=\"box\">\n            <input\n              type=\"checkbox\"\n              class=\"native\"\n              part=\"native\"\n              checked={this.checked}\n              disabled={this.disabled}\n              name={this.name}\n              value={this.value}\n              aria-checked={ariaChecked}\n              onChange={this.onChange}\n            />\n            <span class=\"mark\" part=\"mark\" aria-hidden=\"true\" />\n          </span>\n          {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/atoms/dialog/dialog.css

@@ -0,0 +1,85 @@
+:host {
+  display: contents;
+}
+
+.dialog {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow: visible;
+}
+
+.dialog::backdrop {
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(2px);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  background: var(--ind-surface-raised, light-dark(#ffffff, #1a2129));
+  border: 1px solid var(--ind-surface-border-default, #2a3340);
+  border-radius: var(--ind-radius-md, 3px);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  font-family: var(--ind-font-family-sans);
+  font-size: var(--ind-font-size-base, 12px);
+  max-height: 90vh;
+  overflow: hidden;
+}
+
+:host([size="sm"]) .content { width: 320px; }
+:host([size="md"]) .content { width: 480px; }
+:host([size="lg"]) .content { width: 720px; }
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ind-spacing-4, 8px);
+  padding: var(--ind-spacing-5, 12px) var(--ind-spacing-6, 16px);
+  border-bottom: 1px solid var(--ind-surface-border-subtle);
+}
+
+.heading {
+  font-size: var(--ind-font-size-lg, 14px);
+  font-weight: var(--ind-font-weight-semibold, 600);
+  margin: 0;
+}
+
+.close {
+  background: transparent;
+  border: none;
+  color: inherit;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 2px 8px;
+  border-radius: var(--ind-radius-sm, 2px);
+}
+.close:hover { background: var(--ind-surface-panel); }
+.close:focus-visible {
+  outline: 2px solid var(--ind-surface-focus-ring, #22d3ee);
+  outline-offset: 2px;
+}
+
+.body {
+  flex: 1;
+  overflow: auto;
+  padding: var(--ind-spacing-6, 16px);
+  line-height: var(--ind-font-line-height-normal, 1.4);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ind-spacing-3, 6px);
+  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-6, 16px);
+  border-top: 1px solid var(--ind-surface-border-subtle);
+}
+
+.footer.is-empty {
+  display: none;
+}

package/dist/collection/components/atoms/dialog/dialog.js

@@ -0,0 +1,265 @@
+import { h, Host, } from "@stencil/core";
+export class IndDialog {
+    host;
+    /** Open state. Two-way reflectable. */
+    open = false;
+    /** Heading rendered in the header bar. Becomes the accessible name. */
+    heading;
+    /** Size of the dialog content. */
+    size = 'md';
+    /** Close when the operator clicks outside the dialog content. */
+    closeOnBackdrop = true;
+    hasFooter = false;
+    indOpen;
+    /** Fires when the dialog closes — for any reason (ESC, backdrop, close button, .close()). */
+    indClose;
+    componentDidLoad() {
+        this.syncOpen();
+        this.watchFooter();
+    }
+    onOpenChange() {
+        this.syncOpen();
+    }
+    syncOpen() {
+        const dlg = this.host.shadowRoot?.querySelector('dialog');
+        if (!dlg)
+            return;
+        if (this.open && !dlg.open) {
+            dlg.showModal();
+            this.indOpen.emit();
+        }
+        else if (!this.open && dlg.open) {
+            dlg.close();
+        }
+    }
+    watchFooter() {
+        const slot = this.host.shadowRoot?.querySelector('slot[name="footer"]');
+        if (!slot)
+            return;
+        const update = () => {
+            this.hasFooter = slot.assignedNodes({ flatten: true }).some((n) => {
+                if (n.nodeType === Node.ELEMENT_NODE)
+                    return true;
+                return n.nodeType === Node.TEXT_NODE && (n.textContent ?? '').trim().length > 0;
+            });
+        };
+        update();
+        slot.addEventListener('slotchange', update);
+    }
+    /** Programmatically open. */
+    async show() {
+        this.open = true;
+    }
+    /** Programmatically close. */
+    async close() {
+        this.open = false;
+    }
+    onNativeClose = () => {
+        if (this.open) {
+            this.open = false;
+            this.indClose.emit();
+        }
+    };
+    onClick = (e) => {
+        if (!this.closeOnBackdrop)
+            return;
+        // The native <dialog> covers the whole viewport when open via showModal(),
+        // but its bounding box is the content. Clicks outside that box are on the backdrop.
+        const dlg = e.currentTarget;
+        if (e.target !== dlg)
+            return; // ignore clicks bubbling from inside .content
+        const r = dlg.getBoundingClientRect();
+        const inside = e.clientX >= r.left && e.clientX <= r.right &&
+            e.clientY >= r.top && e.clientY <= r.bottom;
+        if (!inside)
+            this.close();
+    };
+    render() {
+        return (h(Host, { key: '2fc6c8608a86b696f04a42989f9fa89e90c815ca' }, h("dialog", { key: '2ace88391803eeacc9ab918906db7ff01f96af05', class: "dialog", part: "dialog", "aria-label": this.heading, onClose: this.onNativeClose, onClick: this.onClick }, h("div", { key: '01d6bcd48e243524bf657559407e58ec70995752', class: "content", part: "content" }, this.heading && (h("header", { key: '930017b49c0ea7056eb5ec71efd30090bf5d2ef1', class: "header", part: "header" }, h("h2", { key: 'be329505ab6c8d2ae4b94ea399c1426c9bb2ca23', class: "heading", part: "heading" }, this.heading), h("button", { key: '6943d296514bb4035bc44f292fd9a3be42b96bd7', type: "button", class: "close", part: "close", "aria-label": "Close", onClick: () => this.close() }, "\u00D7"))), h("div", { key: '79277205e3a87957a9f4885a80ff2d88ff250615', class: "body", part: "body" }, h("slot", { key: 'c1bf7607910c5d5dff0bdaa14f9285be09aecbce' })), h("footer", { key: '102f2ea37b063d77f4874c619e134abad87161c9', class: { footer: true, 'is-empty': !this.hasFooter }, part: "footer" }, h("slot", { key: 'd6068ca633c113c5a9bf6bd87e793a96928ae95e', name: "footer" }))))));
+    }
+    static get is() { return "ind-dialog"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dialog.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dialog.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Open state. Two-way reflectable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading rendered in the header bar. Becomes the accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DialogSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "DialogSize": {
+                            "location": "local",
+                            "path": "C:/www/ind-ds/packages/core/src/components/atoms/dialog/dialog.tsx",
+                            "id": "src/components/atoms/dialog/dialog.tsx::DialogSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the dialog content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "closeOnBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close when the operator clicks outside the dialog content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-backdrop",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFooter": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indOpen",
+                "name": "indOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "indClose",
+                "name": "indClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the dialog closes \u2014 for any reason (ESC, backdrop, close button, .close())."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically open.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically close.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=dialog.js.map

package/dist/collection/components/atoms/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../src/components/atoms/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Method,\n  Event,\n  EventEmitter,\n  Element,\n  State,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\n\nexport type DialogSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ind-dialog',\n  styleUrl: 'dialog.css',\n  shadow: true,\n})\nexport class IndDialog {\n  @Element() host!: HTMLElement;\n\n  /** Open state. Two-way reflectable. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  /** Heading rendered in the header bar. Becomes the accessible name. */\n  @Prop() heading?: string;\n  /** Size of the dialog content. */\n  @Prop({ reflect: true }) size: DialogSize = 'md';\n  /** Close when the operator clicks outside the dialog content. */\n  @Prop() closeOnBackdrop: boolean = true;\n\n  @State() private hasFooter: boolean = false;\n\n  @Event() indOpen!: EventEmitter<void>;\n  /** Fires when the dialog closes — for any reason (ESC, backdrop, close button, .close()). */\n  @Event() indClose!: EventEmitter<void>;\n\n  componentDidLoad() {\n    this.syncOpen();\n    this.watchFooter();\n  }\n\n  @Watch('open')\n  onOpenChange() {\n    this.syncOpen();\n  }\n\n  private syncOpen() {\n    const dlg = this.host.shadowRoot?.querySelector('dialog');\n    if (!dlg) return;\n    if (this.open && !dlg.open) {\n      dlg.showModal();\n      this.indOpen.emit();\n    } else if (!this.open && dlg.open) {\n      dlg.close();\n    }\n  }\n\n  private watchFooter() {\n    const slot = this.host.shadowRoot?.querySelector('slot[name=\"footer\"]') as HTMLSlotElement | null;\n    if (!slot) return;\n    const update = () => {\n      this.hasFooter = slot.assignedNodes({ flatten: true }).some((n) => {\n        if (n.nodeType === Node.ELEMENT_NODE) return true;\n        return n.nodeType === Node.TEXT_NODE && (n.textContent ?? '').trim().length > 0;\n      });\n    };\n    update();\n    slot.addEventListener('slotchange', update);\n  }\n\n  /** Programmatically open. */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /** Programmatically close. */\n  @Method()\n  async close(): Promise<void> {\n    this.open = false;\n  }\n\n  private onNativeClose = () => {\n    if (this.open) {\n      this.open = false;\n      this.indClose.emit();\n    }\n  };\n\n  private onClick = (e: MouseEvent) => {\n    if (!this.closeOnBackdrop) return;\n    // The native <dialog> covers the whole viewport when open via showModal(),\n    // but its bounding box is the content. Clicks outside that box are on the backdrop.\n    const dlg = e.currentTarget as HTMLDialogElement;\n    if (e.target !== dlg) return; // ignore clicks bubbling from inside .content\n    const r = dlg.getBoundingClientRect();\n    const inside =\n      e.clientX >= r.left && e.clientX <= r.right &&\n      e.clientY >= r.top  && e.clientY <= r.bottom;\n    if (!inside) this.close();\n  };\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          class=\"dialog\"\n          part=\"dialog\"\n          aria-label={this.heading}\n          onClose={this.onNativeClose}\n          onClick={this.onClick}\n        >\n          <div class=\"content\" part=\"content\">\n            {this.heading && (\n              <header class=\"header\" part=\"header\">\n                <h2 class=\"heading\" part=\"heading\">{this.heading}</h2>\n                <button\n                  type=\"button\"\n                  class=\"close\"\n                  part=\"close\"\n                  aria-label=\"Close\"\n                  onClick={() => this.close()}\n                >×</button>\n              </header>\n            )}\n            <div class=\"body\" part=\"body\">\n              <slot />\n            </div>\n            <footer class={{ footer: true, 'is-empty': !this.hasFooter }} part=\"footer\">\n              <slot name=\"footer\" />\n            </footer>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"]}