@diwacopilot/components 1.1.0 → 1.2.0

package/dist/esm/diwa-textarea.entry.js

@@ -144,7 +144,7 @@ const DiwaTextarea = class {
         const taId = 'textarea';
         const descId = 'desc';
         const msgId = 'msg';
-        return (h(Host, { key: 'bc8c28e4261d600dcd7279fbf83f3c69598bede9', "data-theme": this.theme }, h("style", { key: '6424b2957223222e398afbd46110e7da11e074d0', innerHTML: getComponentCss(this.state, this.disabled, this.readOnly, this.resize, this.compact) }), h("div", { key: 'f99c09858acafd13e43389f0fdeef23352016658', class: "root" }, !this.hideLabel && this.label && (h("div", { key: '19062e869778b9f486c110a8a501fbdd77c7a629', class: "label-row" }, h("label", { key: '6b7e15fd5794920731f84abb408f4c73c212a03a', class: "label", htmlFor: taId }, this.label, this.required && h("span", { key: '2fce6e00c084737d175057e6d0fe291962152f9f', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: '20de835c3283696e786370a8b9e667ad14811f65', name: "label-after" }))), h("div", { key: '5ce3c0798d9085266c19623aec5c84809e8abe2f', class: "textarea-wrapper" }, h("textarea", { key: '76b21ac80b5f7609692af0dd78badc4bbdc1c8c2', class: "ta", id: taId, name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readOnly, rows: this.rows, maxLength: this.maxLength, minLength: this.minLength, "aria-label": this.hideLabel && this.label ? this.label : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.message ? msgId : this.description ? descId : undefined, onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur })), !this.message && this.description && (h("p", { key: '8b8914744e47cedda2ceeea9dc004cfb8712fa15', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: 'f3678d9d8eeb81e12bd98aac8186df07c7b17369', id: msgId, class: "message" }, this.message)))));
+        return (h(Host, { key: 'e05a6d6fddcf9b67e3450bddd47a817ead8a819d', "data-theme": this.theme }, h("style", { key: '7b439749933a1e71fdc90dbde478c2a13438ab9e', innerHTML: getComponentCss(this.state, this.disabled, this.readOnly, this.resize, this.compact) }), h("div", { key: '797b3ab869e20dd4d1aaa9f819c3ec7db2e5141a', class: "root" }, !this.hideLabel && this.label && (h("div", { key: 'c4e9ae80e3c1109e79ace701fe3511a5c228970a', class: "label-row" }, h("label", { key: '16d522f2b8d16179aecef5f8a9b2eefca39927e0', class: "label", htmlFor: taId }, this.label, this.required && h("span", { key: '2590e00516606e193a90eb90bf1259f783314b23', class: "required", "aria-hidden": "true" }, " *")), h("slot", { key: 'fdc720df4600d86bc4e3c4a914bc1c2ced36b44b', name: "label-after" }))), h("div", { key: 'd7116130ea846260e94e9d6600bbe48aa774fed6', class: "textarea-wrapper" }, h("textarea", { key: '786904c37ae83072d0946cdc8cd9c82674fd16fb', class: "ta", id: taId, name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readOnly, rows: this.rows, maxLength: this.maxLength, minLength: this.minLength, "aria-label": this.hideLabel && this.label ? this.label : undefined, "aria-invalid": this.state === 'error' ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.message ? msgId : this.description ? descId : undefined, onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur })), !this.message && this.description && (h("p", { key: '784e0e6b81f8725f5b4b8c802e53483912538bb2', id: descId, class: "description" }, this.description)), this.message && (h("p", { key: '4e922e262bceabe0ad91ff13850ec96a8db2cf2f', id: msgId, class: "message" }, this.message)))));
     }
     static get delegatesFocus() { return true; }
 };

package/dist/esm/diwa-toast-item.entry.js

@@ -111,7 +111,7 @@ const DiwaToastItem = class {
         };
     }
     render() {
-        return (h(Host, { key: '333dc3ff2ce58d508fb129b7d415c431ca1c7090', "data-theme": this.theme }, h("style", { key: '33587d5ee1d57a09e175b3c6563fe04d57986ec2', innerHTML: getComponentCss(this.state) }), h("div", { key: 'f613e6c5351afcf85eeee2423b9c67fb4691e543', class: "toast" }, h("span", { key: '6f2c5d046eef9c9c37ddb74e711e91a196fd89b6', class: "icon", "aria-hidden": "true", innerHTML: STATE_ICONS[this.state] }), h("span", { key: 'ed412934617f70359b612d6e220410be69f47575', class: "text" }, this.text), h("button", { key: 'a71b252002e9573792860b6b068ccbd71dfa210e', type: "button", class: "close", "aria-label": "Dismiss notification", onClick: this.handleClose, innerHTML: CLOSE_ICON }))));
+        return (h(Host, { key: 'ac3356dce41b1ac82ce382cde9124ca1cbd9c898', "data-theme": this.theme }, h("style", { key: '44040474045678ea79593ba6053397bd6b3630ae', innerHTML: getComponentCss(this.state) }), h("div", { key: '820679f0b38a44423bfda716b37713f0499a97c1', class: "toast" }, h("span", { key: 'b9a8da840cdd18267948cb651b1356ed822c36fd', class: "icon", "aria-hidden": "true", innerHTML: STATE_ICONS[this.state] }), h("span", { key: '628088dc4193bebb1f574eab30d9ea17f543f22e', class: "text" }, this.text), h("button", { key: '51bb1b6d997d2a1e990480ffbf34f0d1b1a0a278', type: "button", class: "close", "aria-label": "Dismiss notification", onClick: this.handleClose, innerHTML: CLOSE_ICON }))));
     }
     static get delegatesFocus() { return true; }
 };

package/dist/esm/diwa-toast.entry.js

@@ -152,7 +152,7 @@ const DiwaToast = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b670220ae7a15fd466b439895fd36bb5e3107f38', role: "status", "aria-live": "polite", "aria-atomic": "false", "data-theme": this.theme }, h("style", { key: '621b6332123edfc2078ba87d184036746176aa93', innerHTML: getComponentCss() }), this.currentMsg && (h("diwa-toast-item", { key: this.currentMsg.id, text: this.currentMsg.text, state: (_a = this.currentMsg.state) !== null && _a !== void 0 ? _a : 'neutral', theme: this.theme, onDismiss: () => toastManager.dismiss() }))));
+        return (h(Host, { key: 'f082064e5989efc9f043e55ad71a56b80eb0d8e6', role: "status", "aria-live": "polite", "aria-atomic": "false", "data-theme": this.theme }, h("style", { key: '26ba9be7c067d1fb19a43a6081334c782809d91b', innerHTML: getComponentCss() }), this.currentMsg && (h("diwa-toast-item", { key: this.currentMsg.id, text: this.currentMsg.text, state: (_a = this.currentMsg.state) !== null && _a !== void 0 ? _a : 'neutral', theme: this.theme, onDismiss: () => toastManager.dismiss() }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy(JSON.parse("[[\"diwa-flyout\",[[1,\"diwa-flyout\",{\"theme\":[513],\"open\":[1540],\"position\":[513],\"backdrop\":[1],\"heading\":[1]},[[8,\"keydown\",\"onKeyDown\"]],{\"open\":[\"onOpenChange\"]}]]],[\"diwa-inline-notification\",[[1,\"diwa-inline-notification\",{\"theme\":[513],\"state\":[513],\"heading\":[1],\"description\":[1],\"dismissButton\":[4,\"dismiss-button\"],\"actionLabel\":[1,\"action-label\"],\"actionLoading\":[4,\"action-loading\"]}]]],[\"diwa-accordion\",[[17,\"diwa-accordion\",{\"theme\":[513],\"heading\":[1],\"headingTag\":[1,\"heading-tag\"],\"open\":[516],\"compact\":[516]}]]],[\"diwa-button\",[[17,\"diwa-button\",{\"theme\":[513],\"variant\":[513],\"size\":[513],\"type\":[1],\"disabled\":[516],\"loading\":[516],\"href\":[1],\"target\":[1],\"name\":[1],\"value\":[1],\"label\":[1],\"hideLabel\":[516,\"hide-label\"],\"icon\":[1]}]]],[\"diwa-input-password\",[[17,\"diwa-input-password\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"showToggle\":[4,\"show-toggle\"],\"_hasStart\":[32],\"_hasEnd\":[32],\"showPassword\":[32]}]]],[\"diwa-input-search\",[[17,\"diwa-input-search\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"showClearButton\":[4,\"show-clear-button\"],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-link\",[[17,\"diwa-link\",{\"theme\":[513],\"variant\":[513],\"href\":[1],\"target\":[1],\"download\":[1],\"rel\":[1],\"icon\":[1],\"hideLabel\":[516,\"hide-label\"],\"compact\":[516],\"label\":[1],\"disabled\":[516]}]]],[\"diwa-link-pure\",[[17,\"diwa-link-pure\",{\"theme\":[513],\"href\":[1],\"target\":[1],\"download\":[1],\"rel\":[1],\"icon\":[1],\"hideLabel\":[516,\"hide-label\"],\"active\":[516],\"underline\":[516],\"size\":[513],\"alignLabel\":[513,\"align-label\"],\"stretch\":[516],\"label\":[1]}]]],[\"diwa-switch\",[[17,\"diwa-switch\",{\"checked\":[516],\"disabled\":[516],\"loading\":[516],\"alignLabel\":[1,\"align-label\"],\"compact\":[516],\"theme\":[513]}]]],[\"diwa-tag\",[[1,\"diwa-tag\",{\"variant\":[513],\"compact\":[516],\"icon\":[1],\"theme\":[513]}]]],[\"diwa-toast\",[[1,\"diwa-toast\",{\"theme\":[513],\"currentMsg\":[32],\"addMessage\":[64]}]]],[\"diwa-badge\",[[1,\"diwa-badge\",{\"variant\":[513],\"size\":[513],\"label\":[1],\"theme\":[513]}]]],[\"diwa-checkbox\",[[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\"]},null,{\"indeterminate\":[\"watchIndeterminate\"]}]]],[\"diwa-divider\",[[1,\"diwa-divider\",{\"theme\":[513],\"orientation\":[513]}]]],[\"diwa-heading\",[[1,\"diwa-heading\",{\"theme\":[513],\"size\":[513],\"tag\":[513],\"weight\":[513],\"align\":[513],\"color\":[513],\"ellipsis\":[516]}]]],[\"diwa-input\",[[17,\"diwa-input\",{\"type\":[1],\"label\":[1],\"placeholder\":[1],\"value\":[1025],\"required\":[4],\"disabled\":[516],\"readonly\":[516],\"state\":[513],\"hint\":[1],\"autocomplete\":[1],\"name\":[1],\"inputId\":[1,\"input-id\"],\"theme\":[513]}]]],[\"diwa-input-date\",[[17,\"diwa-input-date\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[1],\"max\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-email\",[[17,\"diwa-input-email\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-month\",[[17,\"diwa-input-month\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[1],\"max\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-number\",[[17,\"diwa-input-number\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-tel\",[[17,\"diwa-input-tel\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-text\",[[17,\"diwa-input-text\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"maxLength\":[2,\"max-length\"],\"minLength\":[2,\"min-length\"],\"spellCheck\":[4,\"spell-check\"],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-time\",[[17,\"diwa-input-time\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[1],\"max\":[1],\"step\":[2],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-url\",[[17,\"diwa-input-url\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-week\",[[17,\"diwa-input-week\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[1],\"max\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-modal\",[[17,\"diwa-modal\",{\"theme\":[513],\"open\":[516],\"heading\":[1],\"dismissButton\":[4,\"dismiss-button\"],\"disableBackdropClick\":[4,\"disable-backdrop-click\"],\"backdrop\":[1],\"_hasFooter\":[32],\"_hasHeader\":[32]},[[8,\"keydown\",\"onKeyDown\"]],{\"open\":[\"onOpenChange\"]}]]],[\"diwa-multi-select\",[[17,\"diwa-multi-select\",{\"theme\":[513],\"label\":[1],\"description\":[1],\"name\":[1],\"value\":[1040],\"state\":[513],\"message\":[1],\"hideLabel\":[516,\"hide-label\"],\"disabled\":[516],\"required\":[4],\"compact\":[516],\"dropdownDirection\":[1,\"dropdown-direction\"],\"isOpen\":[32],\"filterText\":[32],\"hasFilterResults\":[32],\"dropdownClass\":[32],\"open\":[64],\"close\":[64]},[[0,\"diwaMultiSelectOptionUpdate\",\"onOptionUpdate\"],[0,\"slotchange\",\"onSlotChange\"]],{\"theme\":[\"onThemeChange\"],\"compact\":[\"onCompactChange\"],\"value\":[\"onValueChange\"],\"isOpen\":[\"onIsOpenChange\"]}]]],[\"diwa-multi-select-option\",[[17,\"diwa-multi-select-option\",{\"value\":[513],\"disabled\":[516],\"selected\":[1540],\"highlighted\":[1540],\"compact\":[1540],\"theme\":[1025],\"setFocus\":[64]},null,{\"selected\":[\"handlePropChange\"],\"highlighted\":[\"handlePropChange\"],\"disabled\":[\"handlePropChange\"]}]]],[\"diwa-pagination\",[[17,\"diwa-pagination\",{\"theme\":[513],\"totalItemsCount\":[2,\"total-items-count\"],\"itemsPerPage\":[2,\"items-per-page\"],\"activePage\":[1026,\"active-page\"],\"showLastPage\":[4,\"show-last-page\"],\"intl\":[16]}]]],[\"diwa-pin-code\",[[17,\"diwa-pin-code\",{\"label\":[1],\"description\":[1],\"state\":[1],\"message\":[1],\"length\":[2],\"value\":[1],\"type\":[1],\"required\":[516],\"disabled\":[516],\"compact\":[4],\"hideLabel\":[4,\"hide-label\"],\"theme\":[513]}]]],[\"diwa-popover\",[[17,\"diwa-popover\",{\"direction\":[1],\"description\":[1],\"theme\":[513],\"isOpen\":[32]},[[8,\"keydown\",\"handleGlobalKeydown\"],[9,\"pointerdown\",\"handleGlobalPointerDown\"]]]]],[\"diwa-radio-group\",[[1,\"diwa-radio-group\",{\"theme\":[513],\"label\":[1],\"description\":[1],\"value\":[1537],\"direction\":[513],\"required\":[4],\"disabled\":[516],\"state\":[513],\"message\":[1],\"compact\":[516],\"hideLabel\":[516,\"hide-label\"],\"name\":[1]},[[0,\"diwa-radio-select\",\"handleItemSelect\"]]]]],[\"diwa-radio-group-item\",[[17,\"diwa-radio-group-item\",{\"theme\":[513],\"value\":[513],\"checked\":[1540],\"name\":[1537],\"disabled\":[516],\"compact\":[516]},null,{\"checked\":[\"handleCheckedChange\"]}]]],[\"diwa-scroller\",[[1,\"diwa-scroller\",{\"alignScrollIndicator\":[1,\"align-scroll-indicator\"],\"scrollbar\":[4],\"theme\":[513],\"hasOverflow\":[32],\"canScrollLeft\":[32],\"canScrollRight\":[32]}]]],[\"diwa-segmented-control\",[[1,\"diwa-segmented-control\",{\"theme\":[513],\"value\":[1537],\"disabled\":[516],\"compact\":[516]},[[0,\"diwa-segment-select\",\"handleItemSelect\"]]]]],[\"diwa-segmented-control-item\",[[17,\"diwa-segmented-control-item\",{\"theme\":[513],\"value\":[513],\"selected\":[1540],\"disabled\":[516],\"compact\":[516]}]]],[\"diwa-select\",[[17,\"diwa-select\",{\"theme\":[513],\"label\":[1],\"description\":[1],\"name\":[1],\"value\":[1025],\"state\":[513],\"message\":[1],\"hideLabel\":[516,\"hide-label\"],\"disabled\":[516],\"required\":[4],\"compact\":[516],\"dropdownDirection\":[1,\"dropdown-direction\"],\"isOpen\":[32],\"hasFilterResults\":[32],\"dropdownClass\":[32],\"open\":[64],\"close\":[64]},[[0,\"diwaSelectOptionUpdate\",\"onOptionUpdate\"],[0,\"slotchange\",\"onSlotChange\"]],{\"theme\":[\"onThemeChange\"],\"compact\":[\"onCompactChange\"],\"value\":[\"onValueChange\"],\"isOpen\":[\"onIsOpenChange\"]}]]],[\"diwa-select-option\",[[17,\"diwa-select-option\",{\"value\":[513],\"disabled\":[516],\"selected\":[1540],\"highlighted\":[1540],\"theme\":[1025],\"compact\":[1540],\"setFocus\":[64]}]]],[\"diwa-stepper-horizontal\",[[1,\"diwa-stepper-horizontal\",{\"theme\":[513],\"activeStepIndex\":[1026,\"active-step-index\"]},null,{\"activeStepIndex\":[\"handleIndexChange\"]}]]],[\"diwa-stepper-horizontal-item\",[[1,\"diwa-stepper-horizontal-item\",{\"theme\":[513],\"label\":[1],\"sublabel\":[1],\"state\":[1537],\"stepNumber\":[1026,\"step-number\"],\"isLast\":[1028,\"is-last\"]}]]],[\"diwa-table\",[[1,\"diwa-table\",{\"theme\":[513],\"caption\":[1],\"compact\":[4],\"layout\":[1],\"bordered\":[4],\"striped\":[4]},[[0,\"diwaTableUpdate\",\"handleTableUpdate\"]]]]],[\"diwa-table-body\",[[1,\"diwa-table-body\",{\"theme\":[513]}]]],[\"diwa-table-cell\",[[1,\"diwa-table-cell\",{\"theme\":[513],\"multiline\":[4]}]]],[\"diwa-table-head\",[[1,\"diwa-table-head\",{\"theme\":[513]}]]],[\"diwa-table-head-cell\",[[1,\"diwa-table-head-cell\",{\"theme\":[513],\"sort\":[16],\"hideLabel\":[4,\"hide-label\"],\"multiline\":[4]}]]],[\"diwa-table-row\",[[1,\"diwa-table-row\",{\"theme\":[513]}]]],[\"diwa-tabs\",[[1,\"diwa-tabs\",{\"theme\":[513],\"activeTabIndex\":[1026,\"active-tab-index\"]},null,{\"activeTabIndex\":[\"handleIndexChange\"]}]]],[\"diwa-tabs-bar\",[[1,\"diwa-tabs-bar\",{\"theme\":[513],\"activeTabIndex\":[1026,\"active-tab-index\"]},[[0,\"click\",\"handleClick\"],[0,\"keydown\",\"handleKeydown\"]],{\"activeTabIndex\":[\"handleIndexChange\"]}]]],[\"diwa-tabs-item\",[[1,\"diwa-tabs-item\",{\"theme\":[513],\"label\":[1],\"active\":[1540]}]]],[\"diwa-tag-dismissible\",[[17,\"diwa-tag-dismissible\",{\"variant\":[513],\"compact\":[516],\"label\":[1],\"theme\":[513]}]]],[\"diwa-text\",[[1,\"diwa-text\",{\"theme\":[513],\"tag\":[513],\"size\":[513],\"weight\":[513],\"align\":[513],\"color\":[513],\"ellipsis\":[516]}]]],[\"diwa-text-list\",[[1,\"diwa-text-list\",{\"theme\":[513],\"type\":[513]}]]],[\"diwa-text-list-item\",[[1,\"diwa-text-list-item\",{\"theme\":[513]}]]],[\"diwa-textarea\",[[17,\"diwa-textarea\",{\"label\":[1],\"description\":[1],\"state\":[1],\"message\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"required\":[4],\"disabled\":[516],\"readOnly\":[516,\"read-only\"],\"maxLength\":[2,\"max-length\"],\"minLength\":[2,\"min-length\"],\"rows\":[2],\"resize\":[1],\"compact\":[4],\"hideLabel\":[4,\"hide-label\"],\"theme\":[513]}]]],[\"diwa-spinner\",[[1,\"diwa-spinner\",{\"size\":[513],\"theme\":[513],\"label\":[1]}]]],[\"diwa-toast-item\",[[17,\"diwa-toast-item\",{\"theme\":[513],\"text\":[1],\"state\":[513]}]]],[\"diwa-icon\",[[1,\"diwa-icon\",{\"name\":[1],\"size\":[2],\"color\":[1],\"label\":[1],\"theme\":[513]}]]],[\"diwa-button-pure\",[[17,\"diwa-button-pure\",{\"theme\":[513],\"size\":[513],\"icon\":[1],\"disabled\":[516],\"loading\":[516],\"hideLabel\":[516,\"hide-label\"],\"active\":[516],\"underline\":[516],\"alignLabel\":[513,\"align-label\"],\"stretch\":[516],\"type\":[1],\"name\":[1],\"value\":[1],\"href\":[1],\"target\":[1],\"label\":[1]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"diwa-flyout\",[[1,\"diwa-flyout\",{\"theme\":[513],\"open\":[1540],\"position\":[513],\"backdrop\":[1],\"heading\":[1]},[[8,\"keydown\",\"onKeyDown\"]],{\"open\":[\"onOpenChange\"]}]]],[\"diwa-inline-notification\",[[1,\"diwa-inline-notification\",{\"theme\":[513],\"state\":[513],\"heading\":[1],\"description\":[1],\"dismissButton\":[4,\"dismiss-button\"],\"actionLabel\":[1,\"action-label\"],\"actionLoading\":[4,\"action-loading\"]}]]],[\"diwa-accordion\",[[17,\"diwa-accordion\",{\"theme\":[513],\"heading\":[1],\"headingTag\":[1,\"heading-tag\"],\"open\":[516],\"compact\":[516]}]]],[\"diwa-button\",[[17,\"diwa-button\",{\"theme\":[513],\"variant\":[513],\"size\":[513],\"type\":[1],\"disabled\":[516],\"loading\":[516],\"href\":[1],\"target\":[1],\"name\":[1],\"value\":[1],\"label\":[1],\"hideLabel\":[516,\"hide-label\"],\"icon\":[1]}]]],[\"diwa-input-password\",[[17,\"diwa-input-password\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"showToggle\":[4,\"show-toggle\"],\"_hasStart\":[32],\"_hasEnd\":[32],\"showPassword\":[32]}]]],[\"diwa-input-search\",[[17,\"diwa-input-search\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"showClearButton\":[4,\"show-clear-button\"],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-link\",[[17,\"diwa-link\",{\"theme\":[513],\"variant\":[513],\"href\":[1],\"target\":[1],\"download\":[1],\"rel\":[1],\"icon\":[1],\"hideLabel\":[516,\"hide-label\"],\"compact\":[516],\"label\":[1],\"disabled\":[516]}]]],[\"diwa-link-pure\",[[17,\"diwa-link-pure\",{\"theme\":[513],\"href\":[1],\"target\":[1],\"download\":[1],\"rel\":[1],\"icon\":[1],\"hideLabel\":[516,\"hide-label\"],\"active\":[516],\"underline\":[516],\"size\":[513],\"alignLabel\":[513,\"align-label\"],\"stretch\":[516],\"label\":[1]}]]],[\"diwa-switch\",[[17,\"diwa-switch\",{\"checked\":[516],\"disabled\":[516],\"loading\":[516],\"alignLabel\":[1,\"align-label\"],\"compact\":[516],\"theme\":[513]}]]],[\"diwa-tag\",[[1,\"diwa-tag\",{\"variant\":[513],\"compact\":[516],\"icon\":[1],\"theme\":[513]}]]],[\"diwa-toast\",[[1,\"diwa-toast\",{\"theme\":[513],\"currentMsg\":[32],\"addMessage\":[64]}]]],[\"diwa-badge\",[[1,\"diwa-badge\",{\"variant\":[513],\"size\":[513],\"label\":[1],\"dot\":[516],\"theme\":[513]}]]],[\"diwa-checkbox\",[[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\"]},null,{\"indeterminate\":[\"watchIndeterminate\"]}]]],[\"diwa-divider\",[[1,\"diwa-divider\",{\"theme\":[513],\"orientation\":[513]}]]],[\"diwa-heading\",[[1,\"diwa-heading\",{\"theme\":[513],\"size\":[513],\"tag\":[513],\"weight\":[513],\"align\":[513],\"color\":[513],\"ellipsis\":[516]}]]],[\"diwa-input\",[[17,\"diwa-input\",{\"type\":[1],\"label\":[1],\"placeholder\":[1],\"value\":[1025],\"required\":[4],\"disabled\":[516],\"readonly\":[516],\"state\":[513],\"hint\":[1],\"autocomplete\":[1],\"name\":[1],\"inputId\":[1,\"input-id\"],\"theme\":[513]}]]],[\"diwa-input-date\",[[17,\"diwa-input-date\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[1],\"max\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-email\",[[17,\"diwa-input-email\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-month\",[[17,\"diwa-input-month\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[1],\"max\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-number\",[[17,\"diwa-input-number\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[2],\"max\":[2],\"step\":[2],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-tel\",[[17,\"diwa-input-tel\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-text\",[[17,\"diwa-input-text\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"maxLength\":[2,\"max-length\"],\"minLength\":[2,\"min-length\"],\"spellCheck\":[4,\"spell-check\"],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-time\",[[17,\"diwa-input-time\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[1],\"max\":[1],\"step\":[2],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-url\",[[17,\"diwa-input-url\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-input-week\",[[17,\"diwa-input-week\",{\"label\":[1],\"description\":[1],\"message\":[1],\"state\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"disabled\":[516],\"required\":[516],\"readonly\":[516],\"hideLabel\":[4,\"hide-label\"],\"compact\":[4],\"autoComplete\":[1,\"auto-complete\"],\"theme\":[1],\"min\":[1],\"max\":[1],\"_hasStart\":[32],\"_hasEnd\":[32]}]]],[\"diwa-modal\",[[17,\"diwa-modal\",{\"theme\":[513],\"open\":[516],\"heading\":[1],\"dismissButton\":[4,\"dismiss-button\"],\"disableBackdropClick\":[4,\"disable-backdrop-click\"],\"backdrop\":[1],\"_hasFooter\":[32],\"_hasHeader\":[32]},[[8,\"keydown\",\"onKeyDown\"]],{\"open\":[\"onOpenChange\"]}]]],[\"diwa-multi-select\",[[17,\"diwa-multi-select\",{\"theme\":[513],\"label\":[1],\"description\":[1],\"name\":[1],\"value\":[1040],\"state\":[513],\"message\":[1],\"hideLabel\":[516,\"hide-label\"],\"disabled\":[516],\"required\":[4],\"compact\":[516],\"dropdownDirection\":[1,\"dropdown-direction\"],\"isOpen\":[32],\"filterText\":[32],\"hasFilterResults\":[32],\"dropdownClass\":[32],\"open\":[64],\"close\":[64]},[[0,\"diwaMultiSelectOptionUpdate\",\"onOptionUpdate\"],[0,\"slotchange\",\"onSlotChange\"]],{\"theme\":[\"onThemeChange\"],\"compact\":[\"onCompactChange\"],\"value\":[\"onValueChange\"],\"isOpen\":[\"onIsOpenChange\"]}]]],[\"diwa-multi-select-option\",[[17,\"diwa-multi-select-option\",{\"value\":[513],\"disabled\":[516],\"selected\":[1540],\"highlighted\":[1540],\"compact\":[1540],\"theme\":[1025],\"setFocus\":[64]},null,{\"selected\":[\"handlePropChange\"],\"highlighted\":[\"handlePropChange\"],\"disabled\":[\"handlePropChange\"]}]]],[\"diwa-pagination\",[[17,\"diwa-pagination\",{\"theme\":[513],\"totalItemsCount\":[2,\"total-items-count\"],\"itemsPerPage\":[2,\"items-per-page\"],\"activePage\":[1026,\"active-page\"],\"showLastPage\":[4,\"show-last-page\"],\"intl\":[16]}]]],[\"diwa-pin-code\",[[17,\"diwa-pin-code\",{\"label\":[1],\"description\":[1],\"state\":[1],\"message\":[1],\"length\":[2],\"value\":[1],\"type\":[1],\"required\":[516],\"disabled\":[516],\"compact\":[4],\"hideLabel\":[4,\"hide-label\"],\"theme\":[513]}]]],[\"diwa-popover\",[[17,\"diwa-popover\",{\"direction\":[1],\"description\":[1],\"theme\":[513],\"isOpen\":[32]},[[8,\"keydown\",\"handleGlobalKeydown\"],[9,\"pointerdown\",\"handleGlobalPointerDown\"]]]]],[\"diwa-radio-group\",[[1,\"diwa-radio-group\",{\"theme\":[513],\"label\":[1],\"description\":[1],\"value\":[1537],\"direction\":[513],\"required\":[4],\"disabled\":[516],\"state\":[513],\"message\":[1],\"compact\":[516],\"hideLabel\":[516,\"hide-label\"],\"name\":[1]},[[0,\"diwa-radio-select\",\"handleItemSelect\"]]]]],[\"diwa-radio-group-item\",[[17,\"diwa-radio-group-item\",{\"theme\":[513],\"value\":[513],\"checked\":[1540],\"name\":[1537],\"disabled\":[516],\"compact\":[516]},null,{\"checked\":[\"handleCheckedChange\"]}]]],[\"diwa-scroller\",[[1,\"diwa-scroller\",{\"alignScrollIndicator\":[1,\"align-scroll-indicator\"],\"scrollbar\":[4],\"theme\":[513],\"hasOverflow\":[32],\"canScrollLeft\":[32],\"canScrollRight\":[32]}]]],[\"diwa-segmented-control\",[[1,\"diwa-segmented-control\",{\"theme\":[513],\"value\":[1537],\"disabled\":[516],\"compact\":[516]},[[0,\"diwa-segment-select\",\"handleItemSelect\"]]]]],[\"diwa-segmented-control-item\",[[17,\"diwa-segmented-control-item\",{\"theme\":[513],\"value\":[513],\"selected\":[1540],\"disabled\":[516],\"compact\":[516]}]]],[\"diwa-select\",[[17,\"diwa-select\",{\"theme\":[513],\"label\":[1],\"description\":[1],\"name\":[1],\"value\":[1025],\"state\":[513],\"message\":[1],\"hideLabel\":[516,\"hide-label\"],\"disabled\":[516],\"required\":[4],\"compact\":[516],\"dropdownDirection\":[1,\"dropdown-direction\"],\"isOpen\":[32],\"hasFilterResults\":[32],\"dropdownClass\":[32],\"open\":[64],\"close\":[64]},[[0,\"diwaSelectOptionUpdate\",\"onOptionUpdate\"],[0,\"slotchange\",\"onSlotChange\"]],{\"theme\":[\"onThemeChange\"],\"compact\":[\"onCompactChange\"],\"value\":[\"onValueChange\"],\"isOpen\":[\"onIsOpenChange\"]}]]],[\"diwa-select-option\",[[17,\"diwa-select-option\",{\"value\":[513],\"disabled\":[516],\"selected\":[1540],\"highlighted\":[1540],\"theme\":[1025],\"compact\":[1540],\"setFocus\":[64]}]]],[\"diwa-stepper-horizontal\",[[1,\"diwa-stepper-horizontal\",{\"theme\":[513],\"activeStepIndex\":[1026,\"active-step-index\"]},null,{\"activeStepIndex\":[\"handleIndexChange\"]}]]],[\"diwa-stepper-horizontal-item\",[[1,\"diwa-stepper-horizontal-item\",{\"theme\":[513],\"label\":[1],\"sublabel\":[1],\"state\":[1537],\"stepNumber\":[1026,\"step-number\"],\"isLast\":[1028,\"is-last\"]}]]],[\"diwa-table\",[[1,\"diwa-table\",{\"theme\":[513],\"caption\":[1],\"compact\":[4],\"layout\":[1],\"bordered\":[4],\"striped\":[4]},[[0,\"diwaTableUpdate\",\"handleTableUpdate\"]]]]],[\"diwa-table-body\",[[1,\"diwa-table-body\",{\"theme\":[513]}]]],[\"diwa-table-cell\",[[1,\"diwa-table-cell\",{\"theme\":[513],\"multiline\":[4]}]]],[\"diwa-table-head\",[[1,\"diwa-table-head\",{\"theme\":[513]}]]],[\"diwa-table-head-cell\",[[1,\"diwa-table-head-cell\",{\"theme\":[513],\"sort\":[16],\"hideLabel\":[4,\"hide-label\"],\"multiline\":[4]}]]],[\"diwa-table-row\",[[1,\"diwa-table-row\",{\"theme\":[513]}]]],[\"diwa-tabs\",[[1,\"diwa-tabs\",{\"theme\":[513],\"activeTabIndex\":[1026,\"active-tab-index\"]},null,{\"activeTabIndex\":[\"handleIndexChange\"]}]]],[\"diwa-tabs-bar\",[[1,\"diwa-tabs-bar\",{\"theme\":[513],\"activeTabIndex\":[1026,\"active-tab-index\"]},[[0,\"click\",\"handleClick\"],[0,\"keydown\",\"handleKeydown\"]],{\"activeTabIndex\":[\"handleIndexChange\"]}]]],[\"diwa-tabs-item\",[[1,\"diwa-tabs-item\",{\"theme\":[513],\"label\":[1],\"active\":[1540]}]]],[\"diwa-tag-dismissible\",[[17,\"diwa-tag-dismissible\",{\"variant\":[513],\"compact\":[516],\"label\":[1],\"theme\":[513]}]]],[\"diwa-text\",[[1,\"diwa-text\",{\"theme\":[513],\"tag\":[513],\"size\":[513],\"weight\":[513],\"align\":[513],\"color\":[513],\"ellipsis\":[516]}]]],[\"diwa-text-list\",[[1,\"diwa-text-list\",{\"theme\":[513],\"type\":[513]}]]],[\"diwa-text-list-item\",[[1,\"diwa-text-list-item\",{\"theme\":[513]}]]],[\"diwa-textarea\",[[17,\"diwa-textarea\",{\"label\":[1],\"description\":[1],\"state\":[1],\"message\":[1],\"name\":[1],\"value\":[1025],\"placeholder\":[1],\"required\":[4],\"disabled\":[516],\"readOnly\":[516,\"read-only\"],\"maxLength\":[2,\"max-length\"],\"minLength\":[2,\"min-length\"],\"rows\":[2],\"resize\":[1],\"compact\":[4],\"hideLabel\":[4,\"hide-label\"],\"theme\":[513]}]]],[\"diwa-spinner\",[[1,\"diwa-spinner\",{\"size\":[513],\"theme\":[513],\"label\":[1]}]]],[\"diwa-toast-item\",[[17,\"diwa-toast-item\",{\"theme\":[513],\"text\":[1],\"state\":[513]}]]],[\"diwa-icon\",[[1,\"diwa-icon\",{\"name\":[1],\"size\":[2],\"color\":[1],\"label\":[1],\"theme\":[513]}]]],[\"diwa-button-pure\",[[17,\"diwa-button-pure\",{\"theme\":[513],\"size\":[513],\"icon\":[1],\"disabled\":[516],\"loading\":[516],\"hideLabel\":[516,\"hide-label\"],\"active\":[516],\"underline\":[516],\"alignLabel\":[513,\"align-label\"],\"stretch\":[516],\"type\":[1],\"name\":[1],\"value\":[1],\"href\":[1],\"target\":[1],\"label\":[1]}]]]]"), options);
 };
 
 export { defineCustomElements };

package/dist/types/components/diwa-badge/diwa-badge.d.ts

@@ -3,11 +3,14 @@ import type { Theme } from '../../utils/styles';
 /**
  * @component diwa-badge
  *
- * A compact, pill-shaped label used to convey status, counts, or metadata.
- * Renders as an inline element with full Shadow DOM encapsulation.
+ * A compact, pill-shaped status indicator with an optional animated dot.
+ * Use for live status, counts, counts, and key callouts.
+ * Prefer DiwaTag for category labels and filters — Tag has square corners and a
+ * visible border; Badge is always fully rounded with a subtler, muted border.
  *
  * Design token override API (set on :root or any ancestor):
  *   --diwa-badge-radius          Border radius (defaults to --diwa-radius-full)
+ *   --diwa-badge-border-color    Override the auto-computed border colour
  *   --diwa-badge-padding-x       Horizontal padding for md size
  *   --diwa-badge-padding-x-sm    Horizontal padding for sm size
  *   --diwa-badge-font-size       Font size for md size
@@ -15,7 +18,7 @@ import type { Theme } from '../../utils/styles';
  *   --diwa-badge-font-weight     Font weight
  *
  * Usage:
- *   <diwa-badge variant="success">Active</diwa-badge>
+ *   <diwa-badge variant="success" dot>Live</diwa-badge>
  *   <diwa-badge variant="danger" size="sm">3 errors</diwa-badge>
  *   <diwa-badge variant="neutral">Draft</diwa-badge>
  *
@@ -31,6 +34,11 @@ export declare class DiwaBadge {
      * (e.g., a numeric count without surrounding context).
      */
     label?: string;
+    /**
+     * When true, renders a small animated pulsing dot before the slot content.
+     * Use to indicate live status or active processes.
+     */
+    dot: boolean;
     /** Per-component theme override. */
     theme: Theme;
     render(): any;

package/dist/types/components.d.ts

@@ -118,21 +118,28 @@ export namespace Components {
     }
     /**
      * @component diwa-badge
-     * A compact, pill-shaped label used to convey status, counts, or metadata.
-     * Renders as an inline element with full Shadow DOM encapsulation.
+     * A compact, pill-shaped status indicator with an optional animated dot.
+     * Use for live status, counts, counts, and key callouts.
+     * Prefer DiwaTag for category labels and filters — Tag has square corners and a
+     * visible border; Badge is always fully rounded with a subtler, muted border.
      * Design token override API (set on :root or any ancestor):
      * --diwa-badge-radius          Border radius (defaults to --diwa-radius-full)
+     * --diwa-badge-border-color    Override the auto-computed border colour
      * --diwa-badge-padding-x       Horizontal padding for md size
      * --diwa-badge-padding-x-sm    Horizontal padding for sm size
      * --diwa-badge-font-size       Font size for md size
      * --diwa-badge-font-size-sm    Font size for sm size
      * --diwa-badge-font-weight     Font weight
      * Usage:
-     * <diwa-badge variant="success">Active</diwa-badge>
+     * <diwa-badge variant="success" dot>Live</diwa-badge>
      * <diwa-badge variant="danger" size="sm">3 errors</diwa-badge>
      * <diwa-badge variant="neutral">Draft</diwa-badge>
      */
     interface DiwaBadge {
+        /**
+          * When true, renders a small animated pulsing dot before the slot content. Use to indicate live status or active processes.
+         */
+        "dot": boolean;
         /**
           * Accessible label. Use when slot content alone is insufficient (e.g., a numeric count without surrounding context).
          */
@@ -2155,17 +2162,20 @@ declare global {
     };
     /**
      * @component diwa-badge
-     * A compact, pill-shaped label used to convey status, counts, or metadata.
-     * Renders as an inline element with full Shadow DOM encapsulation.
+     * A compact, pill-shaped status indicator with an optional animated dot.
+     * Use for live status, counts, counts, and key callouts.
+     * Prefer DiwaTag for category labels and filters — Tag has square corners and a
+     * visible border; Badge is always fully rounded with a subtler, muted border.
      * Design token override API (set on :root or any ancestor):
      * --diwa-badge-radius          Border radius (defaults to --diwa-radius-full)
+     * --diwa-badge-border-color    Override the auto-computed border colour
      * --diwa-badge-padding-x       Horizontal padding for md size
      * --diwa-badge-padding-x-sm    Horizontal padding for sm size
      * --diwa-badge-font-size       Font size for md size
      * --diwa-badge-font-size-sm    Font size for sm size
      * --diwa-badge-font-weight     Font weight
      * Usage:
-     * <diwa-badge variant="success">Active</diwa-badge>
+     * <diwa-badge variant="success" dot>Live</diwa-badge>
      * <diwa-badge variant="danger" size="sm">3 errors</diwa-badge>
      * <diwa-badge variant="neutral">Draft</diwa-badge>
      */
@@ -3455,21 +3465,28 @@ declare namespace LocalJSX {
     }
     /**
      * @component diwa-badge
-     * A compact, pill-shaped label used to convey status, counts, or metadata.
-     * Renders as an inline element with full Shadow DOM encapsulation.
+     * A compact, pill-shaped status indicator with an optional animated dot.
+     * Use for live status, counts, counts, and key callouts.
+     * Prefer DiwaTag for category labels and filters — Tag has square corners and a
+     * visible border; Badge is always fully rounded with a subtler, muted border.
      * Design token override API (set on :root or any ancestor):
      * --diwa-badge-radius          Border radius (defaults to --diwa-radius-full)
+     * --diwa-badge-border-color    Override the auto-computed border colour
      * --diwa-badge-padding-x       Horizontal padding for md size
      * --diwa-badge-padding-x-sm    Horizontal padding for sm size
      * --diwa-badge-font-size       Font size for md size
      * --diwa-badge-font-size-sm    Font size for sm size
      * --diwa-badge-font-weight     Font weight
      * Usage:
-     * <diwa-badge variant="success">Active</diwa-badge>
+     * <diwa-badge variant="success" dot>Live</diwa-badge>
      * <diwa-badge variant="danger" size="sm">3 errors</diwa-badge>
      * <diwa-badge variant="neutral">Draft</diwa-badge>
      */
     interface DiwaBadge {
+        /**
+          * When true, renders a small animated pulsing dot before the slot content. Use to indicate live status or active processes.
+         */
+        "dot"?: boolean;
         /**
           * Accessible label. Use when slot content alone is insufficient (e.g., a numeric count without surrounding context).
          */
@@ -5546,17 +5563,20 @@ declare module "@stencil/core" {
             "diwa-accordion": LocalJSX.DiwaAccordion & JSXBase.HTMLAttributes<HTMLDiwaAccordionElement>;
             /**
              * @component diwa-badge
-             * A compact, pill-shaped label used to convey status, counts, or metadata.
-             * Renders as an inline element with full Shadow DOM encapsulation.
+             * A compact, pill-shaped status indicator with an optional animated dot.
+             * Use for live status, counts, counts, and key callouts.
+             * Prefer DiwaTag for category labels and filters — Tag has square corners and a
+             * visible border; Badge is always fully rounded with a subtler, muted border.
              * Design token override API (set on :root or any ancestor):
              * --diwa-badge-radius          Border radius (defaults to --diwa-radius-full)
+             * --diwa-badge-border-color    Override the auto-computed border colour
              * --diwa-badge-padding-x       Horizontal padding for md size
              * --diwa-badge-padding-x-sm    Horizontal padding for sm size
              * --diwa-badge-font-size       Font size for md size
              * --diwa-badge-font-size-sm    Font size for sm size
              * --diwa-badge-font-weight     Font weight
              * Usage:
-             * <diwa-badge variant="success">Active</diwa-badge>
+             * <diwa-badge variant="success" dot>Live</diwa-badge>
              * <diwa-badge variant="danger" size="sm">3 errors</diwa-badge>
              * <diwa-badge variant="neutral">Draft</diwa-badge>
              */

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

@@ -1,6 +1,6 @@
 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 { d as defineCustomElement$2 } from './p-8972ae69.js';
+import { d as defineCustomElement$2 } from './p-473ec48f.js';
 
 /**
  * diwa-accordion-styles.ts

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

@@ -2,6 +2,11 @@ import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
 import { a as getReducedMotionStyle } from './p-70bbb21a.js';
 
 const getComponentCss = () => `
+  @keyframes diwa-badge-pulse {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0.3; }
+  }
+
   :host {
     display: inline-flex;
     align-items: center;
@@ -15,9 +20,10 @@ const getComponentCss = () => `
   .badge {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
+    gap: var(--diwa-space-1-5, 6px);
     padding: var(--diwa-badge-padding-y, var(--diwa-space-0-5)) var(--diwa-badge-padding-x, var(--diwa-space-2));
     border-radius: var(--diwa-badge-radius, var(--diwa-radius-full));
+    border: var(--diwa-border-width-thin, 1px) solid var(--diwa-badge-border-color, var(--diwa-border));
     font-size: var(--diwa-badge-font-size, var(--diwa-font-size-md));
     font-weight: var(--diwa-badge-font-weight, var(--diwa-font-weight-medium));
     line-height: var(--diwa-line-height-tight);
@@ -27,7 +33,23 @@ const getComponentCss = () => `
     transition: var(--diwa-transition-colors);
   }
 
-  ${getReducedMotionStyle('.badge')}
+  /* ── Pulsing dot indicator ──────────────────────────────────────────── */
+
+  .dot {
+    display: none;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--_badge-dot-color, currentColor);
+    flex-shrink: 0;
+    animation: diwa-badge-pulse 2s ease-in-out infinite;
+  }
+
+  :host([dot]) .dot {
+    display: block;
+  }
+
+  ${getReducedMotionStyle('.badge', '.dot')}
 
   /* ── Size: sm ──────────────────────────────────────────────────────── */
 
@@ -36,9 +58,16 @@ const getComponentCss = () => `
     font-size: var(--diwa-badge-font-size-sm, var(--diwa-font-size-xs));
   }
 
+  :host([size="sm"]) .dot {
+    width: 5px;
+    height: 5px;
+  }
+
   /* ── Variant: neutral (default) ────────────────────────────────────── */
 
   :host([variant="neutral"]) .badge {
+    --diwa-badge-border-color: var(--diwa-border);
+    --_badge-dot-color: var(--diwa-text-muted);
     background-color: var(--diwa-bg-hover);
     color: var(--diwa-text-secondary);
   }
@@ -46,6 +75,8 @@ const getComponentCss = () => `
   /* ── Variant: accent ───────────────────────────────────────────────── */
 
   :host([variant="accent"]) .badge {
+    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-accent) 25%, transparent);
+    --_badge-dot-color: var(--diwa-accent);
     background-color: var(--diwa-accent-bg);
     color: var(--diwa-accent);
   }
@@ -53,6 +84,8 @@ const getComponentCss = () => `
   /* ── Variant: success ──────────────────────────────────────────────── */
 
   :host([variant="success"]) .badge {
+    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-success-text) 25%, transparent);
+    --_badge-dot-color: var(--diwa-success-text);
     background-color: var(--diwa-success-bg);
     color: var(--diwa-success-text);
   }
@@ -60,6 +93,8 @@ const getComponentCss = () => `
   /* ── Variant: warning ──────────────────────────────────────────────── */
 
   :host([variant="warning"]) .badge {
+    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-warning-text) 25%, transparent);
+    --_badge-dot-color: var(--diwa-warning-text);
     background-color: var(--diwa-warning-bg);
     color: var(--diwa-warning-text);
   }
@@ -67,6 +102,8 @@ const getComponentCss = () => `
   /* ── Variant: danger ───────────────────────────────────────────────── */
 
   :host([variant="danger"]) .badge {
+    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-danger-text) 25%, transparent);
+    --_badge-dot-color: var(--diwa-danger-text);
     background-color: var(--diwa-danger-bg);
     color: var(--diwa-danger-text);
   }
@@ -84,6 +121,11 @@ const DiwaBadge$1 = /*@__PURE__*/ proxyCustomElement(class DiwaBadge extends H {
         this.variant = "neutral";
         /** Size tier — controls height, padding, and font-size. */
         this.size = "md";
+        /**
+         * When true, renders a small animated pulsing dot before the slot content.
+         * Use to indicate live status or active processes.
+         */
+        this.dot = false;
         /** Per-component theme override. */
         this.theme = 'dark';
     }
@@ -92,12 +134,13 @@ const DiwaBadge$1 = /*@__PURE__*/ proxyCustomElement(class DiwaBadge extends H {
     // ──────────────────────────────────────────────────────────────
     render() {
         var _a;
-        return (h(Host, { key: 'be09c41cff3de54eba80f26b5029f245474cb676', "data-theme": this.theme }, h("style", { key: '29e9993f7082b99ba4dabc00564f9d9d6e571aa4', innerHTML: getComponentCss() }), h("span", { key: '0c22d4c0fa82693f3904a00587864366fe814b53', class: "badge", part: "base", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : undefined, role: this.label ? "status" : undefined }, h("slot", { key: '6b9f166ed7d9f071cc79df084df73c4893e83545' }))));
+        return (h(Host, { key: 'b305c163c262aee55c46a7d69ede81bda62ac56f', "data-theme": this.theme }, h("style", { key: '40a4c220bcf3847f8e894bf5f05896d1c4c21f17', innerHTML: getComponentCss() }), h("span", { key: 'c642e078977a843580ef50d3a4fb942601e84ad7', class: "badge", part: "base", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : undefined, role: this.label ? "status" : undefined }, this.dot && h("span", { key: '74ff1195c0aa5e28c16fafef5d11b79236e92ec6', class: "dot", "aria-hidden": "true" }), h("slot", { key: 'c429093035124e22ba2a03e98238407345c60d3b' }))));
     }
 }, [1, "diwa-badge", {
         "variant": [513],
         "size": [513],
         "label": [1],
+        "dot": [516],
         "theme": [513]
     }]);
 function defineCustomElement$1() {

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

@@ -1 +1 @@
-{"file":"diwa-badge.js","mappings":";;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BzC,qBAAqB,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ClC;;MCzCYA,WAAS;IAJtB;;;;;;;;QAU2B,YAAO,GAAiB,SAAS,CAAC;;QAGlC,SAAI,GAAc,IAAI,CAAC;;QASvB,UAAK,GAAU,MAAM,CAAC;KAqBhD;;;;IAfC,MAAM;;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,6DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,MAAM,gBACC,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,EACnC,IAAI,EAAE,IAAI,CAAC,KAAK,GAAG,QAAQ,GAAG,SAAS,IAEvC,8DAAQ,CACH,CACF,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaBadge"],"sources":["src/components/diwa-badge/diwa-badge-styles.ts","src/components/diwa-badge/diwa-badge.tsx"],"sourcesContent":["import { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  :host {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: var(--diwa-badge-padding-y, var(--diwa-space-0-5)) var(--diwa-badge-padding-x, var(--diwa-space-2));\r\n    border-radius: var(--diwa-badge-radius, var(--diwa-radius-full));\r\n    font-size: var(--diwa-badge-font-size, var(--diwa-font-size-md));\r\n    font-weight: var(--diwa-badge-font-weight, var(--diwa-font-weight-medium));\r\n    line-height: var(--diwa-line-height-tight);\r\n    white-space: nowrap;\r\n    background-color: var(--diwa-bg-hover);\r\n    color: var(--diwa-text-secondary);\r\n    transition: var(--diwa-transition-colors);\r\n  }\r\n\r\n  ${getReducedMotionStyle('.badge')}\r\n\r\n  /* ── Size: sm ──────────────────────────────────────────────────────── */\r\n\r\n  :host([size=\"sm\"]) .badge {\r\n    padding: var(--diwa-badge-padding-y-sm, var(--diwa-space-px)) var(--diwa-badge-padding-x-sm, var(--diwa-space-1-5, 6px));\r\n    font-size: var(--diwa-badge-font-size-sm, var(--diwa-font-size-xs));\r\n  }\r\n\r\n  /* ── Variant: neutral (default) ────────────────────────────────────── */\r\n\r\n  :host([variant=\"neutral\"]) .badge {\r\n    background-color: var(--diwa-bg-hover);\r\n    color: var(--diwa-text-secondary);\r\n  }\r\n\r\n  /* ── Variant: accent ───────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"accent\"]) .badge {\r\n    background-color: var(--diwa-accent-bg);\r\n    color: var(--diwa-accent);\r\n  }\r\n\r\n  /* ── Variant: success ──────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"success\"]) .badge {\r\n    background-color: var(--diwa-success-bg);\r\n    color: var(--diwa-success-text);\r\n  }\r\n\r\n  /* ── Variant: warning ──────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"warning\"]) .badge {\r\n    background-color: var(--diwa-warning-bg);\r\n    color: var(--diwa-warning-text);\r\n  }\r\n\r\n  /* ── Variant: danger ───────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"danger\"]) .badge {\r\n    background-color: var(--diwa-danger-bg);\r\n    color: var(--diwa-danger-text);\r\n  }\r\n`;\r\n","import { Component, Host, Prop, h } from \"@stencil/core\";\r\nimport type { BadgeSize, BadgeVariant } from \"./types\";\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-badge-styles';\r\n\r\n/**\r\n * @component diwa-badge\r\n *\r\n * A compact, pill-shaped label used to convey status, counts, or metadata.\r\n * Renders as an inline element with full Shadow DOM encapsulation.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-badge-radius          Border radius (defaults to --diwa-radius-full)\r\n *   --diwa-badge-padding-x       Horizontal padding for md size\r\n *   --diwa-badge-padding-x-sm    Horizontal padding for sm size\r\n *   --diwa-badge-font-size       Font size for md size\r\n *   --diwa-badge-font-size-sm    Font size for sm size\r\n *   --diwa-badge-font-weight     Font weight\r\n *\r\n * Usage:\r\n *   <diwa-badge variant=\"success\">Active</diwa-badge>\r\n *   <diwa-badge variant=\"danger\" size=\"sm\">3 errors</diwa-badge>\r\n *   <diwa-badge variant=\"neutral\">Draft</diwa-badge>\r\n *\r\n * @slot default — Badge label content (text or mixed inline content)\r\n */\r\n@Component({\r\n  tag: \"diwa-badge\",\r\n  shadow: true,\r\n})\r\nexport class DiwaBadge {\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Semantic colour variant. Determines background and text colour. */\r\n  @Prop({ reflect: true }) variant: BadgeVariant = \"neutral\";\r\n\r\n  /** Size tier — controls height, padding, and font-size. */\r\n  @Prop({ reflect: true }) size: BadgeSize = \"md\";\r\n\r\n  /**\r\n   * Accessible label. Use when slot content alone is insufficient\r\n   * (e.g., a numeric count without surrounding context).\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <span\r\n          class=\"badge\"\r\n          part=\"base\"\r\n          aria-label={this.label ?? undefined}\r\n          role={this.label ? \"status\" : undefined}\r\n        >\r\n          <slot />\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"diwa-badge.js","mappings":";;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgDzC,qBAAqB,CAAC,QAAQ,EAAE,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D1C;;MC3EYA,WAAS;IAJtB;;;;;;;;QAU2B,YAAO,GAAiB,SAAS,CAAC;;QAGlC,SAAI,GAAc,IAAI,CAAC;;;;;QAYvB,QAAG,GAAY,KAAK,CAAC;;QAGrB,UAAK,GAAU,MAAM,CAAC;KAsBhD;;;;IAhBC,MAAM;;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvC,6DACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,MAAM,gBACC,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,EACnC,IAAI,EAAE,IAAI,CAAC,KAAK,GAAG,QAAQ,GAAG,SAAS,IAEtC,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,KAAK,iBAAa,MAAM,GAAG,EACpD,8DAAQ,CACH,CACF,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DiwaBadge"],"sources":["src/components/diwa-badge/diwa-badge-styles.ts","src/components/diwa-badge/diwa-badge.tsx"],"sourcesContent":["import { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n  @keyframes diwa-badge-pulse {\r\n    0%, 100% { opacity: 1; }\r\n    50%       { opacity: 0.3; }\r\n  }\r\n\r\n  :host {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    font-family: var(--diwa-font-family-base);\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-1-5, 6px);\r\n    padding: var(--diwa-badge-padding-y, var(--diwa-space-0-5)) var(--diwa-badge-padding-x, var(--diwa-space-2));\r\n    border-radius: var(--diwa-badge-radius, var(--diwa-radius-full));\r\n    border: var(--diwa-border-width-thin, 1px) solid var(--diwa-badge-border-color, var(--diwa-border));\r\n    font-size: var(--diwa-badge-font-size, var(--diwa-font-size-md));\r\n    font-weight: var(--diwa-badge-font-weight, var(--diwa-font-weight-medium));\r\n    line-height: var(--diwa-line-height-tight);\r\n    white-space: nowrap;\r\n    background-color: var(--diwa-bg-hover);\r\n    color: var(--diwa-text-secondary);\r\n    transition: var(--diwa-transition-colors);\r\n  }\r\n\r\n  /* ── Pulsing dot indicator ──────────────────────────────────────────── */\r\n\r\n  .dot {\r\n    display: none;\r\n    width: 6px;\r\n    height: 6px;\r\n    border-radius: 50%;\r\n    background-color: var(--_badge-dot-color, currentColor);\r\n    flex-shrink: 0;\r\n    animation: diwa-badge-pulse 2s ease-in-out infinite;\r\n  }\r\n\r\n  :host([dot]) .dot {\r\n    display: block;\r\n  }\r\n\r\n  ${getReducedMotionStyle('.badge', '.dot')}\r\n\r\n  /* ── Size: sm ──────────────────────────────────────────────────────── */\r\n\r\n  :host([size=\"sm\"]) .badge {\r\n    padding: var(--diwa-badge-padding-y-sm, var(--diwa-space-px)) var(--diwa-badge-padding-x-sm, var(--diwa-space-1-5, 6px));\r\n    font-size: var(--diwa-badge-font-size-sm, var(--diwa-font-size-xs));\r\n  }\r\n\r\n  :host([size=\"sm\"]) .dot {\r\n    width: 5px;\r\n    height: 5px;\r\n  }\r\n\r\n  /* ── Variant: neutral (default) ────────────────────────────────────── */\r\n\r\n  :host([variant=\"neutral\"]) .badge {\r\n    --diwa-badge-border-color: var(--diwa-border);\r\n    --_badge-dot-color: var(--diwa-text-muted);\r\n    background-color: var(--diwa-bg-hover);\r\n    color: var(--diwa-text-secondary);\r\n  }\r\n\r\n  /* ── Variant: accent ───────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"accent\"]) .badge {\r\n    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-accent) 25%, transparent);\r\n    --_badge-dot-color: var(--diwa-accent);\r\n    background-color: var(--diwa-accent-bg);\r\n    color: var(--diwa-accent);\r\n  }\r\n\r\n  /* ── Variant: success ──────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"success\"]) .badge {\r\n    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-success-text) 25%, transparent);\r\n    --_badge-dot-color: var(--diwa-success-text);\r\n    background-color: var(--diwa-success-bg);\r\n    color: var(--diwa-success-text);\r\n  }\r\n\r\n  /* ── Variant: warning ──────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"warning\"]) .badge {\r\n    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-warning-text) 25%, transparent);\r\n    --_badge-dot-color: var(--diwa-warning-text);\r\n    background-color: var(--diwa-warning-bg);\r\n    color: var(--diwa-warning-text);\r\n  }\r\n\r\n  /* ── Variant: danger ───────────────────────────────────────────────── */\r\n\r\n  :host([variant=\"danger\"]) .badge {\r\n    --diwa-badge-border-color: color-mix(in srgb, var(--diwa-danger-text) 25%, transparent);\r\n    --_badge-dot-color: var(--diwa-danger-text);\r\n    background-color: var(--diwa-danger-bg);\r\n    color: var(--diwa-danger-text);\r\n  }\r\n`;\r\n","import { Component, Host, Prop, h } from \"@stencil/core\";\r\nimport type { BadgeSize, BadgeVariant } from \"./types\";\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-badge-styles';\r\n\r\n/**\r\n * @component diwa-badge\r\n *\r\n * A compact, pill-shaped status indicator with an optional animated dot.\r\n * Use for live status, counts, counts, and key callouts.\r\n * Prefer DiwaTag for category labels and filters — Tag has square corners and a\r\n * visible border; Badge is always fully rounded with a subtler, muted border.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n *   --diwa-badge-radius          Border radius (defaults to --diwa-radius-full)\r\n *   --diwa-badge-border-color    Override the auto-computed border colour\r\n *   --diwa-badge-padding-x       Horizontal padding for md size\r\n *   --diwa-badge-padding-x-sm    Horizontal padding for sm size\r\n *   --diwa-badge-font-size       Font size for md size\r\n *   --diwa-badge-font-size-sm    Font size for sm size\r\n *   --diwa-badge-font-weight     Font weight\r\n *\r\n * Usage:\r\n *   <diwa-badge variant=\"success\" dot>Live</diwa-badge>\r\n *   <diwa-badge variant=\"danger\" size=\"sm\">3 errors</diwa-badge>\r\n *   <diwa-badge variant=\"neutral\">Draft</diwa-badge>\r\n *\r\n * @slot default — Badge label content (text or mixed inline content)\r\n */\r\n@Component({\r\n  tag: \"diwa-badge\",\r\n  shadow: true,\r\n})\r\nexport class DiwaBadge {\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Semantic colour variant. Determines background and text colour. */\r\n  @Prop({ reflect: true }) variant: BadgeVariant = \"neutral\";\r\n\r\n  /** Size tier — controls height, padding, and font-size. */\r\n  @Prop({ reflect: true }) size: BadgeSize = \"md\";\r\n\r\n  /**\r\n   * Accessible label. Use when slot content alone is insufficient\r\n   * (e.g., a numeric count without surrounding context).\r\n   */\r\n  @Prop() label?: string;\r\n\r\n  /**\r\n   * When true, renders a small animated pulsing dot before the slot content.\r\n   * Use to indicate live status or active processes.\r\n   */\r\n  @Prop({ reflect: true }) dot: boolean = false;\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss()} />\r\n        <span\r\n          class=\"badge\"\r\n          part=\"base\"\r\n          aria-label={this.label ?? undefined}\r\n          role={this.label ? \"status\" : undefined}\r\n        >\r\n          {this.dot && <span class=\"dot\" aria-hidden=\"true\" />}\r\n          <slot />\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist-custom-elements/diwa-button-pure.js

@@ -1,4 +1,4 @@
-import { D as DiwaButtonPure$1, d as defineCustomElement$1 } from './p-105f3f97.js';
+import { D as DiwaButtonPure$1, d as defineCustomElement$1 } from './p-236fbbdd.js';
 
 const DiwaButtonPure = DiwaButtonPure$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-5eacc7d0.js';
 import { g as getFocusStyle, a as getReducedMotionStyle } from './p-70bbb21a.js';
-import { d as defineCustomElement$2 } from './p-8972ae69.js';
+import { d as defineCustomElement$2 } from './p-473ec48f.js';
 
 /**
  * diwa-button-styles.ts
@@ -408,7 +408,7 @@ const DiwaButton$1 = /*@__PURE__*/ proxyCustomElement(class DiwaButton extends H
          *
          * The part="base" exposes internals for ::part() in host-app stylesheets.
          */
-        h(Host, { key: '9182fd6e2a9ccce76a67596d99c5ef080dbdc219', "data-theme": this.theme, role: isLink ? undefined : "button", "aria-disabled": (this.disabled || this.loading) && isLink ? "true" : undefined }, h("style", { key: '349d3b828df53f57b23192854929f921a479146a', innerHTML: getComponentCss() }), h(Tag, Object.assign({ key: 'ffc8b04d99d508c5de77d07757ab362c57420132' }, commonProps, buttonProps, { part: "base" /* ::part(base) hook for consumers */ }), this.loading && (h("span", { key: '226b226efdd671e9494b6db3c83d09e609a08ae6', class: "spinner", "aria-hidden": "true", part: "spinner" })), h("span", { key: '571b34bc8dd3e712bb0702d35283c99c57dee34e', class: "icon-start", part: "icon-start", "aria-hidden": "true" }, this.icon !== 'none' && !this.loading && h("diwa-icon", { key: 'b4304efd1423d517b5aee0a079b6f17993700398', name: this.icon, size: this.iconSize }), h("slot", { key: '1262b1411d2e2faadbabdf6a05cdfa6863b4f53d', name: "icon-start" })), h("span", { key: '6da505ff94ceb539c2f5c063b0aa364ef62c0923', class: `label${this.hideLabel ? " label--hidden" : ""}`, part: "label" }, h("slot", { key: '055841a5c87793d21d7f2f02ce895326889fa887' })), h("span", { key: 'd6f33edb88b49bde1ca50968e3a4f6ac45b2ae77', class: "icon-end", part: "icon-end", "aria-hidden": "true" }, h("slot", { key: '6239635e5cbbfed9a064095b66fb77a466d77aa8', name: "icon-end" })))));
+        h(Host, { key: '40eee896f96707aa7e552ecb4a1dd9329dae5ec4', "data-theme": this.theme, role: isLink ? undefined : "button", "aria-disabled": (this.disabled || this.loading) && isLink ? "true" : undefined }, h("style", { key: 'd41a20f5d58d5408efeec81ea452d1bf4c160cbe', innerHTML: getComponentCss() }), h(Tag, Object.assign({ key: 'e4cb9b0f3b1d581803cee8a82ca9d838c48dd5f2' }, commonProps, buttonProps, { part: "base" /* ::part(base) hook for consumers */ }), this.loading && (h("span", { key: 'd57fe6c27bd115e73f136003e9cb3c3de494020e', class: "spinner", "aria-hidden": "true", part: "spinner" })), h("span", { key: 'bfdcd738e1b4541bae233a7be5804d1ba4fc02df', class: "icon-start", part: "icon-start", "aria-hidden": "true" }, this.icon !== 'none' && !this.loading && h("diwa-icon", { key: '674cf3892909a537d376dfb17bc4e14e6e5343ff', name: this.icon, size: this.iconSize }), h("slot", { key: '8bf7e06b4eab2814dccec4996a38f7fce76dedf9', name: "icon-start" })), h("span", { key: 'efa94bbd8858dba301646d8f072dac475cf16fc5', class: `label${this.hideLabel ? " label--hidden" : ""}`, part: "label" }, h("slot", { key: 'c296751f944fae738500ada889f0e057f6919e1f' })), h("span", { key: 'd057b75d8cf65aafc87d0b3996e0a024fff3e4f0', class: "icon-end", part: "icon-end", "aria-hidden": "true" }, h("slot", { key: 'b329bec720506f3b322c244cbf31139a57514a03', name: "icon-end" })))));
     }
     static get delegatesFocus() { return true; }
     get host() { return this; }

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

@@ -269,7 +269,7 @@ const DiwaCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class DiwaCheckbox exten
     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)))));
+        return (h(Host, { key: '4a275738fb178f5ca410adf8385d68a274cf8d93', "data-theme": this.theme }, h("style", { key: '13e8d7ac361c165947f5a2e25bb06ecb66440704', innerHTML: getComponentCss(this.state, this.disabled, this.compact) }), h("div", { key: 'f35a19d3d08107f69d16b3b6b488526849d2d87b', class: "root" }, h("div", { key: '28d6619129ccc4aea2424abe2a9c423331772e5e', class: "wrapper" }, h("div", { key: 'bf5025023183026f918e5b704fe1d15cf796012e', class: "input-container" }, h("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' : undefined, "aria-describedby": hasMessage ? msgId : undefined, onChange: this.handleChange, ref: this.setCheckboxRef })), this.label && (h("label", { key: 'fd1131c140a407f03372e926eef701d90ad6ead6', class: `label${this.hideLabel ? ' label--hidden' : ''}`, htmlFor: "cb" }, this.label, this.required && (h("span", { key: '4aacf002203ea4338455d1bd8df93f892a3175a6', class: "required", "aria-hidden": "true" }, ' ', "*"))))), hasMessage && (h("span", { key: 'd99ead9fd47dd27adde24cf87d24bce86431aa40', id: msgId, class: "message" }, this.message)))));
     }
     static get delegatesFocus() { return true; }
     get host() { return this; }

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

@@ -56,7 +56,7 @@ const DiwaDivider$1 = /*@__PURE__*/ proxyCustomElement(class DiwaDivider extends
     // 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 })));
+        return (h(Host, { key: 'ff0589655d6b5e847b3600fd6ba6cf0dd3b247ac', "data-theme": this.theme }, h("style", { key: '38a30ff84f63f0825702480f686b49ec8d743d27', innerHTML: getComponentCss(this.orientation) }), h("hr", { key: '17df4c81b9b79b33f794a2f5ea111107b66ae7ce', class: "root", role: "separator", "aria-orientation": this.orientation })));
     }
 }, [1, "diwa-divider", {
         "theme": [513],

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
 import { a as getReducedMotionStyle } from './p-70bbb21a.js';
-import { d as defineCustomElement$3 } from './p-105f3f97.js';
-import { d as defineCustomElement$2 } from './p-8972ae69.js';
+import { d as defineCustomElement$3 } from './p-236fbbdd.js';
+import { d as defineCustomElement$2 } from './p-473ec48f.js';
 
 /**
  * diwa-flyout-styles.ts
@@ -191,7 +191,7 @@ const DiwaFlyout$1 = /*@__PURE__*/ proxyCustomElement(class DiwaFlyout extends H
     // Render
     // ──────────────────────────────────────────────────────────────
     render() {
-        return (h(Host, { key: '52d5fe7be0dfea4a62bc7a4a7637b2f9edbe141d', "data-theme": this.theme }, h("style", { key: '024c161908d6c2954d8f6a3a07b24f07c2d8e43c' }, getComponentCss(this.open, this.position, this.backdrop)), h("div", { key: 'f76c3d2f71725d8d2b3d29a2cbbacc5b2c9da3d2', class: "backdrop", "aria-hidden": "true", onClick: this.handleDismiss }), h("div", { key: '6365781507ae83c8bc9d4f5233f9cdf464d8e9ca', class: "panel", role: "dialog", "aria-modal": "true", "aria-label": this.heading || 'Flyout', tabIndex: -1, ref: (el) => { this.panelEl = el; } }, h("div", { key: 'b8dbb339620ebc2fab8dde5ee70fd5eaca614464', class: "header" }, h("span", { key: 'e7de07e86b1ca0ca6072f47ab6da4b4eb5b4a7d3', class: "heading-text" }, this.heading), h("slot", { key: 'b688288e6f4a4fd910845eb2c14a6ba705e81eee', name: "header" }), h("diwa-button-pure", { key: '8924888f63033a7c285f63b589834ef4e301aa74', icon: "x", label: "Close flyout", size: "sm", hideLabel: true, onClick: this.handleDismiss })), h("div", { key: '1bf9756c8d8cb88f58e1b960c3d5ee22500828ba', class: "content" }, h("slot", { key: '292d34bfc03446b3f751f39df50c3655bd46a0e6' })), h("div", { key: '51270f6fed520df8a4101027a1f9023118b9f46e', class: "footer" }, h("slot", { key: 'f6684ace2a9f0ec82d5b1face5de06bede92c84b', name: "footer" })))));
+        return (h(Host, { key: '067e67fe0994d726754e6553d92a03b71981b218', "data-theme": this.theme }, h("style", { key: '2697a0d6d7f205b12cf0e16df31a5302cc7792a9' }, getComponentCss(this.open, this.position, this.backdrop)), h("div", { key: 'fbd2f50b7ffcf9329d59cdf0097ab620d689d42b', class: "backdrop", "aria-hidden": "true", onClick: this.handleDismiss }), h("div", { key: 'efc5f3d46f43b92ea438ceb8f290650851373060', class: "panel", role: "dialog", "aria-modal": "true", "aria-label": this.heading || 'Flyout', tabIndex: -1, ref: (el) => { this.panelEl = el; } }, h("div", { key: '2870307396623b837ba1a3dbac79c0fa6dfc60ea', class: "header" }, h("span", { key: '7b331d1bbe9852cfab2f432f5549cb9b683e63b4', class: "heading-text" }, this.heading), h("slot", { key: '5f4893f77513909bfecf12efe55d9ccfe9777a68', name: "header" }), h("diwa-button-pure", { key: '603aedc73fe95dd50e331f1e85cc005c143a2362', icon: "x", label: "Close flyout", size: "sm", hideLabel: true, onClick: this.handleDismiss })), h("div", { key: '01ece4db2102e3b76287194021b7da059ed4cb7f', class: "content" }, h("slot", { key: '43f4639680b69de1285beab4584caa21ef71cfb7' })), h("div", { key: '22c72dbb2f0c2f71d699e6ef027c6b13cf3ce6dc', class: "footer" }, h("slot", { key: '6ee08ebb96caa923054e6b4298f419e44e4b003f', name: "footer" })))));
     }
     static get watchers() { return {
         "open": ["onOpenChange"]

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

@@ -114,7 +114,7 @@ const DiwaHeading$1 = /*@__PURE__*/ proxyCustomElement(class DiwaHeading extends
     // ──────────────────────────────────────────────────────────────
     render() {
         const Tag = getHeadingTag(this.host, this.size, this.tag); // eslint-disable-line @typescript-eslint/no-explicit-any
-        return (h(Host, { key: 'af31da4a1b31e1a28f9de05da4c5517dbfb7fdbd', "data-theme": this.theme }, h("style", { key: 'c9616c82eae3dada3edcf5c89b7f9b88716bae55', innerHTML: getComponentCss(this.size, this.weight, this.align, this.color, this.ellipsis) }), h(Tag, { key: 'd265ccdd08cdbc29ba15043a67769b78e8cfe4cb', class: "heading" }, h("slot", { key: '7c7bfb3d32b839469bfba2ec02173d1f71f03812' }))));
+        return (h(Host, { key: 'da76af7c3fbfbc20a58c3210145fb99c47474b01', "data-theme": this.theme }, h("style", { key: '3002fa6831effb8f00414fc6a2bc3729578251d3', innerHTML: getComponentCss(this.size, this.weight, this.align, this.color, this.ellipsis) }), h(Tag, { key: 'acc07263f7150f3d34383eeea09d093bf833a506', class: "heading" }, h("slot", { key: '95678b56667d381fabb3e34f9b70ca4fe7faaaa2' }))));
     }
     get host() { return this; }
 }, [1, "diwa-heading", {

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

@@ -1,4 +1,4 @@
-import { D as DiwaIcon$1, d as defineCustomElement$1 } from './p-8972ae69.js';
+import { D as DiwaIcon$1, d as defineCustomElement$1 } from './p-473ec48f.js';
 
 const DiwaIcon = DiwaIcon$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5eacc7d0.js';
-import { d as defineCustomElement$3 } from './p-105f3f97.js';
-import { d as defineCustomElement$2 } from './p-8972ae69.js';
+import { d as defineCustomElement$3 } from './p-236fbbdd.js';
+import { d as defineCustomElement$2 } from './p-473ec48f.js';
 
 /**
  * diwa-inline-notification-styles.ts
@@ -170,7 +170,7 @@ const DiwaInlineNotification$1 = /*@__PURE__*/ proxyCustomElement(class DiwaInli
     render() {
         const isAlert = this.state === 'error';
         const showActions = this.dismissButton || Boolean(this.actionLabel);
-        return (h(Host, { key: 'd3fd1076a2da3ada9262e57c2a9d1f6263862abb', "data-theme": this.theme }, h("style", { key: '10e025b7ecf829f51199f3bd951ca848e313d0a2', innerHTML: getComponentCss(this.state) }), h("div", { key: 'f6292b570bd9cb1f767d94c569a1f71b7ece1bd9', class: "root" }, h("div", { key: '38faa9cf097f080a61b3beacd04fbe8f5ddcc657', class: "icon-wrap", "aria-hidden": "true" }, h("diwa-icon", { key: '0e9cc0a5d557911ca1f90d40665d8d679f852e52', name: STATE_ICON[this.state], size: 16 })), h("div", { key: '1bfbfda28d6ee3014c0c57b054976cd244c82f0a', class: "content", role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite' }, this.heading && h("span", { key: '5ed7a8a15c3b50ee05334d2a9b6b62637808f9a8', class: "heading" }, this.heading), h("p", { key: 'e8af6b4bfec6fdaedec723b77b5fb8ce49eb11ce', class: "description" }, this.description || h("slot", { key: '1a55704e1b0c522ca25cbeda757f65a6d57af8d7' }))), showActions && (h("div", { key: 'd054dc9a6e584a9be0f54c3f1eabc8600f73f23e', class: "actions" }, this.actionLabel && (h("diwa-button-pure", { key: 'd9a057dcdacb531f70417912c0e0be7f47ca451c', icon: "arrow-right", size: "sm", loading: this.actionLoading, theme: this.theme, onClick: this.handleAction }, this.actionLabel)), this.dismissButton && (h("diwa-button-pure", { key: '892cb38a5f28fd95115fac50db97c45881eab7ae', icon: "x", label: "Dismiss notification", hideLabel: true, size: "sm", theme: this.theme, onClick: this.handleDismiss })))))));
+        return (h(Host, { key: 'ffbc48506e71547e9f670fada7b45ebbe0bbd9d2', "data-theme": this.theme }, h("style", { key: '4ccbe4e0e6b325dedc6263ea80481cecd39cac26', innerHTML: getComponentCss(this.state) }), h("div", { key: 'e304af7c978c4da1240c31e0468b2ec3895c7c3d', class: "root" }, h("div", { key: '1aea476763f19125e6ae889065014d0c24936025', class: "icon-wrap", "aria-hidden": "true" }, h("diwa-icon", { key: '3260c5b0aa23d6b995af704be6177a05ef85baa8', name: STATE_ICON[this.state], size: 16 })), h("div", { key: '79e994cb29375faede44260d9d77bee71a5e6e83', class: "content", role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite' }, this.heading && h("span", { key: '2d4964d50c797e7cf16480de07160a910374b0eb', class: "heading" }, this.heading), h("p", { key: 'e226d8728b99240e6e65b98eca4d87e369a50094', class: "description" }, this.description || h("slot", { key: '662f76be60914522329dd61a807133bcda44fa9f' }))), showActions && (h("div", { key: '20beaa3f3fc15584953092caa3f2a7176faf42d8', class: "actions" }, this.actionLabel && (h("diwa-button-pure", { key: '4631e465e1919bdb709473c7a0f8946c72882151', icon: "arrow-right", size: "sm", loading: this.actionLoading, theme: this.theme, onClick: this.handleAction }, this.actionLabel)), this.dismissButton && (h("diwa-button-pure", { key: '244273af8b94b76093e2f0065df740ea53bcdd33', icon: "x", label: "Dismiss notification", hideLabel: true, size: "sm", theme: this.theme, onClick: this.handleDismiss })))))));
     }
 }, [1, "diwa-inline-notification", {
         "theme": [513],