@diwacopilot/components 1.1.1 → 1.2.1

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

@@ -1,315 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
-import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
-import { g as getCheckboxBoxCss, c as checkmarkSvg } from './p-332838f8.js';
-
-/** White horizontal dash for indeterminate state on a 12×12 viewBox */
-const indeterminateSvg = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.5' y='5.25' width='7' height='1.5' rx='0.75' fill='white'/%3E%3C/svg%3E")`;
-const getComponentCss = (state, _disabled, compact, _hideLabel) => {
-    const boxSize = compact ? '14px' : '20px';
-    const messageColor = state === 'error'
-        ? 'var(--diwa-notification-error)'
-        : state === 'success'
-            ? 'var(--diwa-notification-success)'
-            : 'var(--diwa-text-secondary)';
-    return `
-
-  /* ── Host ─────────────────────────────────────────────────────────── */
-
-  :host {
-    display: inline-block;
-    font-family: var(--diwa-font-family-base);
-    outline: none;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  /* ── Root layout ──────────────────────────────────────────────────── */
-
-  .root {
-    display: flex;
-    flex-direction: column;
-    gap: var(--diwa-space-1);
-  }
-
-  /* ── Wrapper: checkbox + label side by side ───────────────────────── */
-
-  .wrapper {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--diwa-space-3);
-    cursor: pointer;
-  }
-
-  :host([disabled]) .wrapper {
-    cursor: not-allowed;
-  }
-
-  /* ── Input container ──────────────────────────────────────────────── */
-
-  .input-container {
-    position: relative;
-    flex-shrink: 0;
-    width: ${boxSize};
-    height: ${boxSize};
-  }
-
-  /* ── Native checkbox ──────────────────────────────────────────────── */
-
-  input[type="checkbox"] {
-    appearance: none;
-    -webkit-appearance: none;
-    display: block;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    cursor: pointer;
-
-    ${getCheckboxBoxCss()}
-  }
-
-  input[type="checkbox"]:disabled {
-    cursor: not-allowed;
-  }
-
-  /* ── Focus ring ───────────────────────────────────────────────────── */
-
-  ${getFocusStyle('input[type="checkbox"]')}
-
-  /* ── Hover ────────────────────────────────────────────────────────── */
-
-  input[type="checkbox"]:hover:not(:disabled) {
-    border-color: var(--diwa-accent);
-    background-color: var(--diwa-bg-hover);
-  }
-
-  /* ── Checked state ────────────────────────────────────────────────── */
-
-  input[type="checkbox"]:checked {
-    background-color: var(--diwa-accent);
-    border-color: var(--diwa-accent);
-    background-image: ${checkmarkSvg};
-  }
-
-  input[type="checkbox"]:checked:hover:not(:disabled) {
-    background-color: var(--diwa-accent-hover);
-    border-color: var(--diwa-accent-hover);
-  }
-
-  /* ── Indeterminate state ──────────────────────────────────────────── */
-
-  input[type="checkbox"]:indeterminate {
-    background-color: var(--diwa-accent);
-    border-color: var(--diwa-accent);
-    background-image: ${indeterminateSvg};
-  }
-
-  input[type="checkbox"]:indeterminate:hover:not(:disabled) {
-    background-color: var(--diwa-accent-hover);
-    border-color: var(--diwa-accent-hover);
-  }
-
-  /* ── Validation states ────────────────────────────────────────────── */
-
-  :host([state="error"]) input[type="checkbox"]:not(:checked):not(:indeterminate) {
-    border-color: var(--diwa-notification-error);
-  }
-
-  :host([state="error"]) input[type="checkbox"]:not(:checked):not(:indeterminate):hover:not(:disabled) {
-    border-color: var(--diwa-notification-error);
-    background-color: var(--diwa-bg-hover);
-  }
-
-  :host([state="success"]) input[type="checkbox"]:not(:checked):not(:indeterminate) {
-    border-color: var(--diwa-notification-success);
-  }
-
-  :host([state="success"]) input[type="checkbox"]:not(:checked):not(:indeterminate):hover:not(:disabled) {
-    border-color: var(--diwa-notification-success);
-    background-color: var(--diwa-bg-hover);
-  }
-
-  /* ── Disabled ─────────────────────────────────────────────────────── */
-
-  :host([disabled]) {
-    opacity: var(--diwa-opacity-disabled);
-    pointer-events: none;
-  }
-
-  /* ── Label ────────────────────────────────────────────────────────── */
-
-  .label {
-    font-size: var(--diwa-font-size-base);
-    font-weight: var(--diwa-font-weight-regular);
-    line-height: 1.5;
-    color: var(--diwa-text-primary);
-    cursor: pointer;
-  }
-
-  :host([disabled]) .label {
-    cursor: not-allowed;
-  }
-
-  /* Visually-hidden label (still read by screen readers) */
-  .label--hidden {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  /* Required asterisk */
-  .required {
-    color: var(--diwa-notification-error);
-    margin-left: var(--diwa-space-0-5);
-  }
-
-  /* ── Message ──────────────────────────────────────────────────────── */
-
-  .message {
-    display: block;
-    font-size: var(--diwa-font-size-sm);
-    line-height: 1.4;
-    color: ${messageColor};
-    /* Indent to align under the label, not the checkbox */
-    padding-left: calc(${boxSize} + var(--diwa-space-3));
-  }
-
-  /* ── Reduced motion ───────────────────────────────────────────────── */
-
-  ${getReducedMotionStyle('input[type="checkbox"]')}
-`;
-};
-
-const DiwaCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class DiwaCheckbox extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.update = createEvent(this, "update", 1);
-        // ──────────────────────────────────────────────────────────────
-        // Props
-        // ──────────────────────────────────────────────────────────────
-        /** Per-component theme override (`light` / `dark`). */
-        this.theme = 'dark';
-        /** Visible label text rendered next to the checkbox. */
-        this.label = '';
-        /** Native name attribute (identifies the field in JS / form data). */
-        this.name = '';
-        /** Value submitted/emitted when the checkbox is checked. */
-        this.value = 'on';
-        /**
-         * Whether the checkbox is checked.
-         *
-         * Semi-controlled: mutates internally on user interaction and
-         * also emits an `update` event so the consumer can sync their state.
-         */
-        this.checked = false;
-        /**
-         * Indeterminate state — renders a dash icon and sets `aria-checked="mixed"`.
-         * Setting this to `true` takes visual precedence over `checked`.
-         * The consumer is responsible for clearing it once the user toggles.
-         */
-        this.indeterminate = false;
-        /** Puts the checkbox in a disabled state. Blocks interaction. */
-        this.disabled = false;
-        /** Marks the field as required. Shows a visual asterisk in the label. */
-        this.required = false;
-        /** Validation state: `'none'` (default), `'error'`, or `'success'`. */
-        this.state = 'none';
-        /** Helper / validation message shown below the checkbox. Only shown when state ≠ 'none'. */
-        this.message = '';
-        /** Reduces the checkbox size from 20 px to 14 px for denser layouts. */
-        this.compact = false;
-        /** Hides the label visually while keeping it accessible to screen readers. */
-        this.hideLabel = false;
-        // ──────────────────────────────────────────────────────────────
-        // Private helpers
-        // ──────────────────────────────────────────────────────────────
-        this.handleChange = (e) => {
-            const input = e.target;
-            this.checked = input.checked;
-            // Clear indeterminate on user interaction (standard browser behaviour)
-            if (this.indeterminate) {
-                this.host.removeAttribute('indeterminate');
-            }
-            this.update.emit({
-                checked: this.checked,
-                name: this.name,
-                value: this.value,
-            });
-        };
-        this.setCheckboxRef = (el) => {
-            this.checkboxEl = el;
-            if (el) {
-                el.indeterminate = this.indeterminate;
-            }
-        };
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Watchers
-    // ──────────────────────────────────────────────────────────────
-    /** Keep the native input's non-reflected .indeterminate property in sync. */
-    watchIndeterminate(value) {
-        if (this.checkboxEl) {
-            this.checkboxEl.indeterminate = value;
-        }
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Render
-    // ──────────────────────────────────────────────────────────────
-    render() {
-        const msgId = 'diwa-checkbox-msg';
-        const hasMessage = !!this.message && this.state !== 'none';
-        return (h(Host, { key: 'b60ee4bf0dc2eaa0d694a0ac739c5566d454f79c', "data-theme": this.theme }, h("style", { key: 'fd963d515b5fdca037224b97390978de46f2270a', innerHTML: getComponentCss(this.state, this.disabled, this.compact) }), h("div", { key: '367d56a1bb842175a37e542645189dce17a6e39a', class: "root" }, h("div", { key: '3e4b983191a2b57f5bf577b0da0fcabf3d99fef1', class: "wrapper" }, h("div", { key: '152025c208c44d6cc5dafc4c552e8a66c07e4a82', class: "input-container" }, h("input", { key: 'cbf1fd983bf14caf6ee7c6e5d99ff00a6db84eee', type: "checkbox", id: "cb", checked: this.checked, disabled: this.disabled, required: this.required, name: this.name, value: this.value, "aria-checked": this.indeterminate ? 'mixed' : undefined, "aria-describedby": hasMessage ? msgId : undefined, onChange: this.handleChange, ref: this.setCheckboxRef })), this.label && (h("label", { key: '149d0d96a058be632bc631dce0acdf10061857be', class: `label${this.hideLabel ? ' label--hidden' : ''}`, htmlFor: "cb" }, this.label, this.required && (h("span", { key: 'd05c35490b0539a9d2f2967e32d5866a600a95d2', class: "required", "aria-hidden": "true" }, ' ', "*"))))), hasMessage && (h("span", { key: '3dd6021761ad98aaacacff336dab64b1d5d531dd', id: msgId, class: "message" }, this.message)))));
-    }
-    static get delegatesFocus() { return true; }
-    get host() { return this; }
-    static get watchers() { return {
-        "indeterminate": ["watchIndeterminate"]
-    }; }
-}, [17, "diwa-checkbox", {
-        "theme": [513],
-        "label": [1],
-        "name": [1],
-        "value": [1],
-        "checked": [1540],
-        "indeterminate": [516],
-        "disabled": [516],
-        "required": [4],
-        "state": [513],
-        "message": [1],
-        "compact": [516],
-        "hideLabel": [516, "hide-label"]
-    }, undefined, {
-        "indeterminate": ["watchIndeterminate"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-checkbox"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-checkbox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaCheckbox$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const DiwaCheckbox = DiwaCheckbox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaCheckbox, defineCustomElement };
-
-//# sourceMappingURL=diwa-checkbox.js.map
+import{t as e,p as n,H as t,c as a,h as i,a as o}from"./index.js";import{b as r,a as c}from"./p-C8h0Vfqp.js";import{g as d,c as s}from"./p-Bxp9mYAq.js";const h=(e,n,t)=>{const a=t?"14px":"20px",i="error"===e?"var(--diwa-notification-error)":"success"===e?"var(--diwa-notification-success)":"var(--diwa-text-secondary)";return`\n\n  /* ── Host ─────────────────────────────────────────────────────────── */\n\n  :host {\n    display: inline-block;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Root layout ──────────────────────────────────────────────────── */\n\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: var(--diwa-space-1);\n  }\n\n  /* ── Wrapper: checkbox + label side by side ───────────────────────── */\n\n  .wrapper {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--diwa-space-3);\n    cursor: pointer;\n  }\n\n  :host([disabled]) .wrapper {\n    cursor: not-allowed;\n  }\n\n  /* ── Input container ──────────────────────────────────────────────── */\n\n  .input-container {\n    position: relative;\n    flex-shrink: 0;\n    width: ${a};\n    height: ${a};\n  }\n\n  /* ── Native checkbox ──────────────────────────────────────────────── */\n\n  input[type="checkbox"] {\n    appearance: none;\n    -webkit-appearance: none;\n    display: block;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    cursor: pointer;\n\n    ${d()}\n  }\n\n  input[type="checkbox"]:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ── Focus ring ───────────────────────────────────────────────────── */\n\n  ${r('input[type="checkbox"]')}\n\n  /* ── Hover ────────────────────────────────────────────────────────── */\n\n  input[type="checkbox"]:hover:not(:disabled) {\n    border-color: var(--diwa-accent);\n    background-color: var(--diwa-bg-hover);\n  }\n\n  /* ── Checked state ────────────────────────────────────────────────── */\n\n  input[type="checkbox"]:checked {\n    background-color: var(--diwa-accent);\n    border-color: var(--diwa-accent);\n    background-image: ${s};\n  }\n\n  input[type="checkbox"]:checked:hover:not(:disabled) {\n    background-color: var(--diwa-accent-hover);\n    border-color: var(--diwa-accent-hover);\n  }\n\n  /* ── Indeterminate state ──────────────────────────────────────────── */\n\n  input[type="checkbox"]:indeterminate {\n    background-color: var(--diwa-accent);\n    border-color: var(--diwa-accent);\n    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2.5' y='5.25' width='7' height='1.5' rx='0.75' fill='white'/%3E%3C/svg%3E");\n  }\n\n  input[type="checkbox"]:indeterminate:hover:not(:disabled) {\n    background-color: var(--diwa-accent-hover);\n    border-color: var(--diwa-accent-hover);\n  }\n\n  /* ── Validation states ────────────────────────────────────────────── */\n\n  :host([state="error"]) input[type="checkbox"]:not(:checked):not(:indeterminate) {\n    border-color: var(--diwa-notification-error);\n  }\n\n  :host([state="error"]) input[type="checkbox"]:not(:checked):not(:indeterminate):hover:not(:disabled) {\n    border-color: var(--diwa-notification-error);\n    background-color: var(--diwa-bg-hover);\n  }\n\n  :host([state="success"]) input[type="checkbox"]:not(:checked):not(:indeterminate) {\n    border-color: var(--diwa-notification-success);\n  }\n\n  :host([state="success"]) input[type="checkbox"]:not(:checked):not(:indeterminate):hover:not(:disabled) {\n    border-color: var(--diwa-notification-success);\n    background-color: var(--diwa-bg-hover);\n  }\n\n  /* ── Disabled ─────────────────────────────────────────────────────── */\n\n  :host([disabled]) {\n    opacity: var(--diwa-opacity-disabled);\n    pointer-events: none;\n  }\n\n  /* ── Label ────────────────────────────────────────────────────────── */\n\n  .label {\n    font-size: var(--diwa-font-size-base);\n    font-weight: var(--diwa-font-weight-regular);\n    line-height: 1.5;\n    color: var(--diwa-text-primary);\n    cursor: pointer;\n  }\n\n  :host([disabled]) .label {\n    cursor: not-allowed;\n  }\n\n  /* Visually-hidden label (still read by screen readers) */\n  .label--hidden {\n    border: 0;\n    clip: rect(0, 0, 0, 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  /* Required asterisk */\n  .required {\n    color: var(--diwa-notification-error);\n    margin-left: var(--diwa-space-0-5);\n  }\n\n  /* ── Message ──────────────────────────────────────────────────────── */\n\n  .message {\n    display: block;\n    font-size: var(--diwa-font-size-sm);\n    line-height: 1.4;\n    color: ${i};\n    /* Indent to align under the label, not the checkbox */\n    padding-left: calc(${a} + var(--diwa-space-3));\n  }\n\n  /* ── Reduced motion ───────────────────────────────────────────────── */\n\n  ${c('input[type="checkbox"]')}\n`},l=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.update=a(this,"update",1),this.theme="dark",this.label="",this.name="",this.value="on",this.checked=!1,this.indeterminate=!1,this.disabled=!1,this.required=!1,this.state="none",this.message="",this.compact=!1,this.hideLabel=!1,this.handleChange=e=>{this.checked=e.target.checked,this.indeterminate&&this.host.removeAttribute("indeterminate"),this.update.emit({checked:this.checked,name:this.name,value:this.value})},this.setCheckboxRef=e=>{this.checkboxEl=e,e&&(e.indeterminate=this.indeterminate)}}watchIndeterminate(e){this.checkboxEl&&(this.checkboxEl.indeterminate=e)}render(){const e="diwa-checkbox-msg",n=!!this.message&&"none"!==this.state;return i(o,{key:"4a275738fb178f5ca410adf8385d68a274cf8d93","data-theme":this.theme},i("style",{key:"13e8d7ac361c165947f5a2e25bb06ecb66440704",innerHTML:h(this.state,0,this.compact)}),i("div",{key:"f35a19d3d08107f69d16b3b6b488526849d2d87b",class:"root"},i("div",{key:"28d6619129ccc4aea2424abe2a9c423331772e5e",class:"wrapper"},i("div",{key:"bf5025023183026f918e5b704fe1d15cf796012e",class:"input-container"},i("input",{key:"6a2ddb4a178a42c5201e2e23a6b44f9d34b8d3c4",type:"checkbox",id:"cb",checked:this.checked,disabled:this.disabled,required:this.required,name:this.name,value:this.value,"aria-checked":this.indeterminate?"mixed":void 0,"aria-describedby":n?e:void 0,onChange:this.handleChange,ref:this.setCheckboxRef})),this.label&&i("label",{key:"fd1131c140a407f03372e926eef701d90ad6ead6",class:"label"+(this.hideLabel?" label--hidden":""),htmlFor:"cb"},this.label,this.required&&i("span",{key:"4aacf002203ea4338455d1bd8df93f892a3175a6",class:"required","aria-hidden":"true"}," ","*"))),n&&i("span",{key:"d99ead9fd47dd27adde24cf87d24bce86431aa40",id:e,class:"message"},this.message)))}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{indeterminate:[{watchIndeterminate:0}]}}},[17,"diwa-checkbox",{theme:[513],label:[1],name:[1],value:[1],checked:[1540],indeterminate:[516],disabled:[516],required:[4],state:[513],message:[1],compact:[516],hideLabel:[516,"hide-label"]},void 0,{indeterminate:[{watchIndeterminate:0}]}]);function b(){"undefined"!=typeof customElements&&["diwa-checkbox"].forEach((n=>{"diwa-checkbox"===n&&(customElements.get(e(n))||customElements.define(e(n),l))}))}b();const p=l,u=b;export{p as DiwaCheckbox,u as defineCustomElement}

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

@@ -1,85 +1 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
-
-const getComponentCss = (orientation) => {
-    const isVertical = orientation === 'vertical';
-    return `
-
-  /* ── Host ─────────────────────────────────────────────────────────── */
-
-  :host {
-    display: ${isVertical ? 'inline-flex' : 'block'};
-    ${isVertical ? 'align-self: stretch;' : 'width: 100%;'}
-    outline: none;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  /* ── Rule ─────────────────────────────────────────────────────────── */
-
-  .root {
-    display: block;
-    margin: 0;
-    padding: 0;
-    border: none;
-    background-color: var(--diwa-border);
-    ${isVertical
-        ? `width: var(--diwa-border-width-thin);
-    height: 100%;
-    min-height: 1em;`
-        : `width: 100%;
-    height: var(--diwa-border-width-thin);`}
-  }
-`;
-};
-
-const DiwaDivider$1 = /*@__PURE__*/ proxyCustomElement(class DiwaDivider extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        // ──────────────────────────────────────────────────────────────
-        // Props
-        // ──────────────────────────────────────────────────────────────
-        /** Per-component theme override (`light` / `dark`). */
-        this.theme = 'dark';
-        /**
-         * Orientation of the divider line.
-         * - `'horizontal'` (default) — a full-width 1 px horizontal rule.
-         * - `'vertical'` — a 1 px vertical rule that stretches to the parent's height.
-         *   The parent must be a flex or grid container with a defined height.
-         */
-        this.orientation = 'horizontal';
-    }
-    // ──────────────────────────────────────────────────────────────
-    // Render
-    // ──────────────────────────────────────────────────────────────
-    render() {
-        return (h(Host, { key: 'e143d66dbac5d538a79e9bd2cef6da4292839a4d', "data-theme": this.theme }, h("style", { key: '00e13388782156d60927e639215b3a361c231541', innerHTML: getComponentCss(this.orientation) }), h("hr", { key: '5653fa0a68365da009e6e0b2b5a41a2cfb4702f9', class: "root", role: "separator", "aria-orientation": this.orientation })));
-    }
-}, [1, "diwa-divider", {
-        "theme": [513],
-        "orientation": [513]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["diwa-divider"];
-    components.forEach(tagName => { switch (tagName) {
-        case "diwa-divider":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DiwaDivider$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const DiwaDivider = DiwaDivider$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DiwaDivider, defineCustomElement };
-
-//# sourceMappingURL=diwa-divider.js.map
+import{t as n,p as e,H as t,h as i,a as d}from"./index.js";const r=n=>{const e="vertical"===n;return`\n\n  /* ── Host ─────────────────────────────────────────────────────────── */\n\n  :host {\n    display: ${e?"inline-flex":"block"};\n    ${e?"align-self: stretch;":"width: 100%;"}\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Rule ─────────────────────────────────────────────────────────── */\n\n  .root {\n    display: block;\n    margin: 0;\n    padding: 0;\n    border: none;\n    background-color: var(--diwa-border);\n    ${e?"width: var(--diwa-border-width-thin);\n    height: 100%;\n    min-height: 1em;":"width: 100%;\n    height: var(--diwa-border-width-thin);"}\n  }\n`},o=e(class extends t{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.theme="dark",this.orientation="horizontal"}render(){return i(d,{key:"ff0589655d6b5e847b3600fd6ba6cf0dd3b247ac","data-theme":this.theme},i("style",{key:"38a30ff84f63f0825702480f686b49ec8d743d27",innerHTML:r(this.orientation)}),i("hr",{key:"17df4c81b9b79b33f794a2f5ea111107b66ae7ce",class:"root",role:"separator","aria-orientation":this.orientation}))}},[1,"diwa-divider",{theme:[513],orientation:[513]}]);function a(){"undefined"!=typeof customElements&&["diwa-divider"].forEach((e=>{"diwa-divider"===e&&(customElements.get(n(e))||customElements.define(n(e),o))}))}a();const s=o,h=a;export{s as DiwaDivider,h as defineCustomElement}