@diwacopilot/components 1.0.0 → 1.1.1

package/dist/cjs/diwa-checkbox.cjs.entry.js

@@ -41,7 +41,7 @@ const getComponentCss = (state, _disabled, compact, _hideLabel) => {
 
   .wrapper {
     display: inline-flex;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--diwa-space-3);
     cursor: pointer;
   }
@@ -57,8 +57,6 @@ const getComponentCss = (state, _disabled, compact, _hideLabel) => {
     flex-shrink: 0;
     width: ${boxSize};
     height: ${boxSize};
-    /* Center the box on the first line of label text (line-height: 1.5) */
-    margin-top: calc((1.5em - ${boxSize}) / 2);
   }
 
   /* ── Native checkbox ──────────────────────────────────────────────── */

package/dist/cjs/diwa-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"diwa-checkbox.entry.cjs.js","mappings":"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","names":["getCheckboxBoxCss","getFocusStyle","checkmarkSvg","getReducedMotionStyle","h","Host"],"sources":["src/components/diwa-checkbox/diwa-checkbox-styles.ts","src/components/diwa-checkbox/diwa-checkbox.tsx"],"sourcesContent":["import type { CheckboxState } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\nimport { checkmarkSvg, getCheckboxBoxCss } from '../../utils/checkbox-mark';\r\n\r\n/** White horizontal dash for indeterminate state on a 12×12 viewBox */\r\nconst 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\")`;\r\n\r\nexport const getComponentCss = (\r\n  state: CheckboxState,\r\n  _disabled: boolean,\r\n  compact: boolean,\r\n  _hideLabel: boolean,\r\n): string => {\r\n  const boxSize = compact ? '14px' : '20px';\r\n  const messageColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-text-secondary)';\r\n\r\n  return `\r\n\r\n  /* ── Host ─────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: inline-block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Root layout ──────────────────────────────────────────────────── */\r\n\r\n  .root {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--diwa-space-1);\r\n  }\r\n\r\n  /* ── Wrapper: checkbox + label side by side ───────────────────────── */\r\n\r\n  .wrapper {\r\n    display: inline-flex;\r\n    align-items: flex-start;\r\n    gap: var(--diwa-space-3);\r\n    cursor: pointer;\r\n  }\r\n\r\n  :host([disabled]) .wrapper {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ── Input container ──────────────────────────────────────────────── */\r\n\r\n  .input-container {\r\n    position: relative;\r\n    flex-shrink: 0;\r\n    width: ${boxSize};\r\n    height: ${boxSize};\r\n    /* Center the box on the first line of label text (line-height: 1.5) */\r\n    margin-top: calc((1.5em - ${boxSize}) / 2);\r\n  }\r\n\r\n  /* ── Native checkbox ──────────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"] {\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n\r\n    ${getCheckboxBoxCss()}\r\n  }\r\n\r\n  input[type=\"checkbox\"]:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ── Focus ring ───────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('input[type=\"checkbox\"]')}\r\n\r\n  /* ── Hover ────────────────────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"]:hover:not(:disabled) {\r\n    border-color: var(--diwa-accent);\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  /* ── Checked state ────────────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"]:checked {\r\n    background-color: var(--diwa-accent);\r\n    border-color: var(--diwa-accent);\r\n    background-image: ${checkmarkSvg};\r\n  }\r\n\r\n  input[type=\"checkbox\"]:checked:hover:not(:disabled) {\r\n    background-color: var(--diwa-accent-hover);\r\n    border-color: var(--diwa-accent-hover);\r\n  }\r\n\r\n  /* ── Indeterminate state ──────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"]:indeterminate {\r\n    background-color: var(--diwa-accent);\r\n    border-color: var(--diwa-accent);\r\n    background-image: ${indeterminateSvg};\r\n  }\r\n\r\n  input[type=\"checkbox\"]:indeterminate:hover:not(:disabled) {\r\n    background-color: var(--diwa-accent-hover);\r\n    border-color: var(--diwa-accent-hover);\r\n  }\r\n\r\n  /* ── Validation states ────────────────────────────────────────────── */\r\n\r\n  :host([state=\"error\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate) {\r\n    border-color: var(--diwa-notification-error);\r\n  }\r\n\r\n  :host([state=\"error\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate):hover:not(:disabled) {\r\n    border-color: var(--diwa-notification-error);\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  :host([state=\"success\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate) {\r\n    border-color: var(--diwa-notification-success);\r\n  }\r\n\r\n  :host([state=\"success\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate):hover:not(:disabled) {\r\n    border-color: var(--diwa-notification-success);\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  /* ── Disabled ─────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── Label ────────────────────────────────────────────────────────── */\r\n\r\n  .label {\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-regular);\r\n    line-height: 1.5;\r\n    color: var(--diwa-text-primary);\r\n    cursor: pointer;\r\n  }\r\n\r\n  :host([disabled]) .label {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* Visually-hidden label (still read by screen readers) */\r\n  .label--hidden {\r\n    border: 0;\r\n    clip: rect(0, 0, 0, 0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    white-space: nowrap;\r\n    width: 1px;\r\n  }\r\n\r\n  /* Required asterisk */\r\n  .required {\r\n    color: var(--diwa-notification-error);\r\n    margin-left: var(--diwa-space-0-5);\r\n  }\r\n\r\n  /* ── Message ──────────────────────────────────────────────────────── */\r\n\r\n  .message {\r\n    display: block;\r\n    font-size: var(--diwa-font-size-sm);\r\n    line-height: 1.4;\r\n    color: ${messageColor};\r\n    /* Indent to align under the label, not the checkbox */\r\n    padding-left: calc(${boxSize} + var(--diwa-space-3));\r\n  }\r\n\r\n  /* ── Reduced motion ───────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('input[type=\"checkbox\"]')}\r\n`;\r\n};\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\r\nimport type { CheckboxState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-checkbox-styles';\r\n\r\n/**\r\n * @component diwa-checkbox\r\n *\r\n * A fully accessible checkbox control with label, validation state,\r\n * and indeterminate support. Mirrors the PDS p-checkbox API.\r\n *\r\n * Semi-controlled: the `checked` prop is mutable — the component\r\n * updates it internally AND emits an `update` event. The consumer can\r\n * either listen to `update` to manage state externally, or use it\r\n * standalone without any event wiring.\r\n *\r\n * Accessibility:\r\n *   - Native `<input type=\"checkbox\">` inside Shadow DOM with delegatesFocus\r\n *   - `aria-checked=\"mixed\"` set automatically when `indeterminate` is true\r\n *   - `aria-describedby` wires the message element when state is error/success\r\n *   - `role` is implicit from native input — no extra ARIA needed\r\n *\r\n * Usage:\r\n *   <diwa-checkbox label=\"Accept terms\" checked={accepted}\r\n *     onupdate={e => setAccepted(e.detail.checked)} />\r\n *\r\n * Note (V1): The inner <input name> is inside Shadow DOM and is therefore\r\n *   not visible to ancestor <form> elements for native form submission.\r\n *   Use ElementInternals (V2) or submit via JavaScript instead.\r\n */\r\n@Component({\r\n  tag: 'diwa-checkbox',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaCheckbox {\r\n  @Element() host!: HTMLDiwaCheckboxElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override (`light` / `dark`). */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Visible label text rendered next to the checkbox. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Native name attribute (identifies the field in JS / form data). */\r\n  @Prop() name: string = '';\r\n\r\n  /** Value submitted/emitted when the checkbox is checked. */\r\n  @Prop() value: string = 'on';\r\n\r\n  /**\r\n   * Whether the checkbox is checked.\r\n   *\r\n   * Semi-controlled: mutates internally on user interaction and\r\n   * also emits an `update` event so the consumer can sync their state.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\r\n\r\n  /**\r\n   * Indeterminate state — renders a dash icon and sets `aria-checked=\"mixed\"`.\r\n   * Setting this to `true` takes visual precedence over `checked`.\r\n   * The consumer is responsible for clearing it once the user toggles.\r\n   */\r\n  @Prop({ reflect: true }) indeterminate: boolean = false;\r\n\r\n  /** Puts the checkbox in a disabled state. Blocks interaction. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Marks the field as required. Shows a visual asterisk in the label. */\r\n  @Prop() required: boolean = false;\r\n\r\n  /** Validation state: `'none'` (default), `'error'`, or `'success'`. */\r\n  @Prop({ reflect: true }) state: CheckboxState = 'none';\r\n\r\n  /** Helper / validation message shown below the checkbox. Only shown when state ≠ 'none'. */\r\n  @Prop() message: string = '';\r\n\r\n  /** Reduces the checkbox size from 20 px to 14 px for denser layouts. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /** Hides the label visually while keeping it accessible to screen readers. */\r\n  @Prop({ reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user toggles the checkbox.\r\n   * `event.detail.checked` is the new checked state.\r\n   *\r\n   * React consumers: use the lowercase `onupdate` prop:\r\n   * ```jsx\r\n   * <diwa-checkbox onupdate={e => setChecked(e.detail.checked)} />\r\n   * ```\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<{ checked: boolean; name: string; value: string }>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private state\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private checkboxEl?: HTMLInputElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Watchers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Keep the native input's non-reflected .indeterminate property in sync. */\r\n  @Watch('indeterminate')\r\n  watchIndeterminate(value: boolean) {\r\n    if (this.checkboxEl) {\r\n      this.checkboxEl.indeterminate = value;\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleChange = (e: Event): void => {\r\n    const input = e.target as HTMLInputElement;\r\n    this.checked = input.checked;\r\n    // Clear indeterminate on user interaction (standard browser behaviour)\r\n    if (this.indeterminate) {\r\n      this.host.removeAttribute('indeterminate');\r\n    }\r\n    this.update.emit({\r\n      checked: this.checked,\r\n      name: this.name,\r\n      value: this.value,\r\n    });\r\n  };\r\n\r\n  private setCheckboxRef = (el?: HTMLInputElement): void => {\r\n    this.checkboxEl = el;\r\n    if (el) {\r\n      el.indeterminate = this.indeterminate;\r\n    }\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const msgId = 'diwa-checkbox-msg';\r\n    const hasMessage = !!this.message && this.state !== 'none';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style\r\n          innerHTML={getComponentCss(\r\n            this.state,\r\n            this.disabled,\r\n            this.compact,\r\n            this.hideLabel,\r\n          )}\r\n        />\r\n\r\n        <div class=\"root\">\r\n          <div class=\"wrapper\">\r\n            <div class=\"input-container\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"cb\"\r\n                checked={this.checked}\r\n                disabled={this.disabled}\r\n                required={this.required}\r\n                name={this.name}\r\n                value={this.value}\r\n                aria-checked={this.indeterminate ? 'mixed' : undefined}\r\n                aria-describedby={hasMessage ? msgId : undefined}\r\n                onChange={this.handleChange}\r\n                ref={this.setCheckboxRef}\r\n              />\r\n            </div>\r\n\r\n            {this.label && (\r\n              <label\r\n                class={`label${this.hideLabel ? ' label--hidden' : ''}`}\r\n                htmlFor=\"cb\"\r\n              >\r\n                {this.label}\r\n                {this.required && (\r\n                  <span class=\"required\" aria-hidden=\"true\">\r\n                    {' '}*\r\n                  </span>\r\n                )}\r\n              </label>\r\n            )}\r\n          </div>\r\n\r\n          {hasMessage && (\r\n            <span id={msgId} class=\"message\">\r\n              {this.message}\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"diwa-checkbox.entry.cjs.js","mappings":";;;;;;;;AAIA;AACA,MAAM,gBAAgB,GAAG,gLAAgL,CAAC;AAEnM,MAAM,eAAe,GAAG,CAC7B,KAAoB,EACpB,SAAkB,EAClB,OAAgB,EAChB,UAAmB;IAEnB,MAAM,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C,MAAM,YAAY,GAChB,KAAK,KAAK,OAAO;UACb,gCAAgC;UAChC,KAAK,KAAK,SAAS;cACjB,kCAAkC;cAClC,4BAA4B,CAAC;IAErC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAwCI,OAAO;cACN,OAAO;;;;;;;;;;;;;;;;MAgBfA,8BAAiB,EAAE;;;;;;;;;IASrBC,oBAAa,CAAC,wBAAwB,CAAC;;;;;;;;;;;;;;wBAcnBC,yBAAY;;;;;;;;;;;;;wBAaZ,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aA0E3B,YAAY;;yBAEA,OAAO;;;;;IAK5BC,4BAAqB,CAAC,wBAAwB,CAAC;CAClD,CAAC;AACF,CAAC;;MCnKY,YAAY;IAJzB;;;;;;;QAY2B,UAAK,GAAU,MAAM,CAAC;;QAGvC,UAAK,GAAW,EAAE,CAAC;;QAGnB,SAAI,GAAW,EAAE,CAAC;;QAGlB,UAAK,GAAW,IAAI,CAAC;;;;;;;QAQW,YAAO,GAAY,KAAK,CAAC;;;;;;QAOxC,kBAAa,GAAY,KAAK,CAAC;;QAG/B,aAAQ,GAAY,KAAK,CAAC;;QAG3C,aAAQ,GAAY,KAAK,CAAC;;QAGT,UAAK,GAAkB,MAAM,CAAC;;QAG/C,YAAO,GAAW,EAAE,CAAC;;QAGJ,YAAO,GAAY,KAAK,CAAC;;QAGA,cAAS,GAAY,KAAK,CAAC;;;;QAwCrE,iBAAY,GAAG,CAAC,CAAQ;YAC9B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;;YAE7B,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;aAC5C;YACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAC;QAEM,mBAAc,GAAG,CAAC,EAAqB;YAC7C,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;YACrB,IAAI,EAAE,EAAE;gBACN,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;aACvC;SACF,CAAC;KA+DH;;;;;IA5FC,kBAAkB,CAAC,KAAc;QAC/B,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,aAAa,GAAG,KAAK,CAAC;SACvC;KACF;;;;IA+BD,MAAM;QACJ,MAAM,KAAK,GAAG,mBAAmB,CAAC;QAClC,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC;QAE3D,QACEC,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEACE,SAAS,EAAE,eAAe,CACxB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,OACS,CACf,GACD,EAEFA,kEAAK,KAAK,EAAC,MAAM,IACfA,kEAAK,KAAK,EAAC,SAAS,IAClBA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,oEACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAC,IAAI,EACP,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,kBACH,IAAI,CAAC,aAAa,GAAG,OAAO,GAAG,SAAS,sBACpC,UAAU,GAAG,KAAK,GAAG,SAAS,EAChD,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,GAAG,EAAE,IAAI,CAAC,cAAc,GACxB,CACE,EAEL,IAAI,CAAC,KAAK,KACTA,oEACE,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,gBAAgB,GAAG,EAAE,EAAE,EACvD,OAAO,EAAC,IAAI,IAEX,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,KACZA,mEAAM,KAAK,EAAC,UAAU,iBAAa,MAAM,IACtC,GAAG,MACC,CACR,CACK,CACT,CACG,EAEL,UAAU,KACTA,mEAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAC,SAAS,IAC7B,IAAI,CAAC,OAAO,CACR,CACR,CACG,CACD,EACP;KACH;;;;;;;;;;","names":["getCheckboxBoxCss","getFocusStyle","checkmarkSvg","getReducedMotionStyle","h","Host"],"sources":["src/components/diwa-checkbox/diwa-checkbox-styles.ts","src/components/diwa-checkbox/diwa-checkbox.tsx"],"sourcesContent":["import type { CheckboxState } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\nimport { checkmarkSvg, getCheckboxBoxCss } from '../../utils/checkbox-mark';\r\n\r\n/** White horizontal dash for indeterminate state on a 12×12 viewBox */\r\nconst 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\")`;\r\n\r\nexport const getComponentCss = (\r\n  state: CheckboxState,\r\n  _disabled: boolean,\r\n  compact: boolean,\r\n  _hideLabel: boolean,\r\n): string => {\r\n  const boxSize = compact ? '14px' : '20px';\r\n  const messageColor =\r\n    state === 'error'\r\n      ? 'var(--diwa-notification-error)'\r\n      : state === 'success'\r\n        ? 'var(--diwa-notification-success)'\r\n        : 'var(--diwa-text-secondary)';\r\n\r\n  return `\r\n\r\n  /* ── Host ─────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: inline-block;\r\n    font-family: var(--diwa-font-family-base);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Root layout ──────────────────────────────────────────────────── */\r\n\r\n  .root {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--diwa-space-1);\r\n  }\r\n\r\n  /* ── Wrapper: checkbox + label side by side ───────────────────────── */\r\n\r\n  .wrapper {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    cursor: pointer;\r\n  }\r\n\r\n  :host([disabled]) .wrapper {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ── Input container ──────────────────────────────────────────────── */\r\n\r\n  .input-container {\r\n    position: relative;\r\n    flex-shrink: 0;\r\n    width: ${boxSize};\r\n    height: ${boxSize};\r\n  }\r\n\r\n  /* ── Native checkbox ──────────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"] {\r\n    appearance: none;\r\n    -webkit-appearance: none;\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    cursor: pointer;\r\n\r\n    ${getCheckboxBoxCss()}\r\n  }\r\n\r\n  input[type=\"checkbox\"]:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* ── Focus ring ───────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('input[type=\"checkbox\"]')}\r\n\r\n  /* ── Hover ────────────────────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"]:hover:not(:disabled) {\r\n    border-color: var(--diwa-accent);\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  /* ── Checked state ────────────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"]:checked {\r\n    background-color: var(--diwa-accent);\r\n    border-color: var(--diwa-accent);\r\n    background-image: ${checkmarkSvg};\r\n  }\r\n\r\n  input[type=\"checkbox\"]:checked:hover:not(:disabled) {\r\n    background-color: var(--diwa-accent-hover);\r\n    border-color: var(--diwa-accent-hover);\r\n  }\r\n\r\n  /* ── Indeterminate state ──────────────────────────────────────────── */\r\n\r\n  input[type=\"checkbox\"]:indeterminate {\r\n    background-color: var(--diwa-accent);\r\n    border-color: var(--diwa-accent);\r\n    background-image: ${indeterminateSvg};\r\n  }\r\n\r\n  input[type=\"checkbox\"]:indeterminate:hover:not(:disabled) {\r\n    background-color: var(--diwa-accent-hover);\r\n    border-color: var(--diwa-accent-hover);\r\n  }\r\n\r\n  /* ── Validation states ────────────────────────────────────────────── */\r\n\r\n  :host([state=\"error\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate) {\r\n    border-color: var(--diwa-notification-error);\r\n  }\r\n\r\n  :host([state=\"error\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate):hover:not(:disabled) {\r\n    border-color: var(--diwa-notification-error);\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  :host([state=\"success\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate) {\r\n    border-color: var(--diwa-notification-success);\r\n  }\r\n\r\n  :host([state=\"success\"]) input[type=\"checkbox\"]:not(:checked):not(:indeterminate):hover:not(:disabled) {\r\n    border-color: var(--diwa-notification-success);\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  /* ── Disabled ─────────────────────────────────────────────────────── */\r\n\r\n  :host([disabled]) {\r\n    opacity: var(--diwa-opacity-disabled);\r\n    pointer-events: none;\r\n  }\r\n\r\n  /* ── Label ────────────────────────────────────────────────────────── */\r\n\r\n  .label {\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-regular);\r\n    line-height: 1.5;\r\n    color: var(--diwa-text-primary);\r\n    cursor: pointer;\r\n  }\r\n\r\n  :host([disabled]) .label {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  /* Visually-hidden label (still read by screen readers) */\r\n  .label--hidden {\r\n    border: 0;\r\n    clip: rect(0, 0, 0, 0);\r\n    height: 1px;\r\n    margin: -1px;\r\n    overflow: hidden;\r\n    padding: 0;\r\n    position: absolute;\r\n    white-space: nowrap;\r\n    width: 1px;\r\n  }\r\n\r\n  /* Required asterisk */\r\n  .required {\r\n    color: var(--diwa-notification-error);\r\n    margin-left: var(--diwa-space-0-5);\r\n  }\r\n\r\n  /* ── Message ──────────────────────────────────────────────────────── */\r\n\r\n  .message {\r\n    display: block;\r\n    font-size: var(--diwa-font-size-sm);\r\n    line-height: 1.4;\r\n    color: ${messageColor};\r\n    /* Indent to align under the label, not the checkbox */\r\n    padding-left: calc(${boxSize} + var(--diwa-space-3));\r\n  }\r\n\r\n  /* ── Reduced motion ───────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('input[type=\"checkbox\"]')}\r\n`;\r\n};\r\n","import { Component, Element, Event, type EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\r\nimport type { CheckboxState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-checkbox-styles';\r\n\r\n/**\r\n * @component diwa-checkbox\r\n *\r\n * A fully accessible checkbox control with label, validation state,\r\n * and indeterminate support. Mirrors the PDS p-checkbox API.\r\n *\r\n * Semi-controlled: the `checked` prop is mutable — the component\r\n * updates it internally AND emits an `update` event. The consumer can\r\n * either listen to `update` to manage state externally, or use it\r\n * standalone without any event wiring.\r\n *\r\n * Accessibility:\r\n *   - Native `<input type=\"checkbox\">` inside Shadow DOM with delegatesFocus\r\n *   - `aria-checked=\"mixed\"` set automatically when `indeterminate` is true\r\n *   - `aria-describedby` wires the message element when state is error/success\r\n *   - `role` is implicit from native input — no extra ARIA needed\r\n *\r\n * Usage:\r\n *   <diwa-checkbox label=\"Accept terms\" checked={accepted}\r\n *     onupdate={e => setAccepted(e.detail.checked)} />\r\n *\r\n * Note (V1): The inner <input name> is inside Shadow DOM and is therefore\r\n *   not visible to ancestor <form> elements for native form submission.\r\n *   Use ElementInternals (V2) or submit via JavaScript instead.\r\n */\r\n@Component({\r\n  tag: 'diwa-checkbox',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaCheckbox {\r\n  @Element() host!: HTMLDiwaCheckboxElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override (`light` / `dark`). */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Visible label text rendered next to the checkbox. */\r\n  @Prop() label: string = '';\r\n\r\n  /** Native name attribute (identifies the field in JS / form data). */\r\n  @Prop() name: string = '';\r\n\r\n  /** Value submitted/emitted when the checkbox is checked. */\r\n  @Prop() value: string = 'on';\r\n\r\n  /**\r\n   * Whether the checkbox is checked.\r\n   *\r\n   * Semi-controlled: mutates internally on user interaction and\r\n   * also emits an `update` event so the consumer can sync their state.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\r\n\r\n  /**\r\n   * Indeterminate state — renders a dash icon and sets `aria-checked=\"mixed\"`.\r\n   * Setting this to `true` takes visual precedence over `checked`.\r\n   * The consumer is responsible for clearing it once the user toggles.\r\n   */\r\n  @Prop({ reflect: true }) indeterminate: boolean = false;\r\n\r\n  /** Puts the checkbox in a disabled state. Blocks interaction. */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /** Marks the field as required. Shows a visual asterisk in the label. */\r\n  @Prop() required: boolean = false;\r\n\r\n  /** Validation state: `'none'` (default), `'error'`, or `'success'`. */\r\n  @Prop({ reflect: true }) state: CheckboxState = 'none';\r\n\r\n  /** Helper / validation message shown below the checkbox. Only shown when state ≠ 'none'. */\r\n  @Prop() message: string = '';\r\n\r\n  /** Reduces the checkbox size from 20 px to 14 px for denser layouts. */\r\n  @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n  /** Hides the label visually while keeping it accessible to screen readers. */\r\n  @Prop({ reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Events\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /**\r\n   * Emitted when the user toggles the checkbox.\r\n   * `event.detail.checked` is the new checked state.\r\n   *\r\n   * React consumers: use the lowercase `onupdate` prop:\r\n   * ```jsx\r\n   * <diwa-checkbox onupdate={e => setChecked(e.detail.checked)} />\r\n   * ```\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  update!: EventEmitter<{ checked: boolean; name: string; value: string }>;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private state\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private checkboxEl?: HTMLInputElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Watchers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Keep the native input's non-reflected .indeterminate property in sync. */\r\n  @Watch('indeterminate')\r\n  watchIndeterminate(value: boolean) {\r\n    if (this.checkboxEl) {\r\n      this.checkboxEl.indeterminate = value;\r\n    }\r\n  }\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Private helpers\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  private handleChange = (e: Event): void => {\r\n    const input = e.target as HTMLInputElement;\r\n    this.checked = input.checked;\r\n    // Clear indeterminate on user interaction (standard browser behaviour)\r\n    if (this.indeterminate) {\r\n      this.host.removeAttribute('indeterminate');\r\n    }\r\n    this.update.emit({\r\n      checked: this.checked,\r\n      name: this.name,\r\n      value: this.value,\r\n    });\r\n  };\r\n\r\n  private setCheckboxRef = (el?: HTMLInputElement): void => {\r\n    this.checkboxEl = el;\r\n    if (el) {\r\n      el.indeterminate = this.indeterminate;\r\n    }\r\n  };\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const msgId = 'diwa-checkbox-msg';\r\n    const hasMessage = !!this.message && this.state !== 'none';\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style\r\n          innerHTML={getComponentCss(\r\n            this.state,\r\n            this.disabled,\r\n            this.compact,\r\n            this.hideLabel,\r\n          )}\r\n        />\r\n\r\n        <div class=\"root\">\r\n          <div class=\"wrapper\">\r\n            <div class=\"input-container\">\r\n              <input\r\n                type=\"checkbox\"\r\n                id=\"cb\"\r\n                checked={this.checked}\r\n                disabled={this.disabled}\r\n                required={this.required}\r\n                name={this.name}\r\n                value={this.value}\r\n                aria-checked={this.indeterminate ? 'mixed' : undefined}\r\n                aria-describedby={hasMessage ? msgId : undefined}\r\n                onChange={this.handleChange}\r\n                ref={this.setCheckboxRef}\r\n              />\r\n            </div>\r\n\r\n            {this.label && (\r\n              <label\r\n                class={`label${this.hideLabel ? ' label--hidden' : ''}`}\r\n                htmlFor=\"cb\"\r\n              >\r\n                {this.label}\r\n                {this.required && (\r\n                  <span class=\"required\" aria-hidden=\"true\">\r\n                    {' '}*\r\n                  </span>\r\n                )}\r\n              </label>\r\n            )}\r\n          </div>\r\n\r\n          {hasMessage && (\r\n            <span id={msgId} class=\"message\">\r\n              {this.message}\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/diwa-components.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"diwa-flyout.cjs\",[[1,\"diwa-flyout\",{\"theme\":[513],\"open\":[1540],\"position\":[513],\"backdrop\":[1],\"heading\":[1]},[[8,\"keydown\",\"onKeyDown\"]],{\"open\":[\"onOpenChange\"]}]]],[\"diwa-inline-notification.cjs\",[[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.cjs\",[[17,\"diwa-accordion\",{\"theme\":[513],\"heading\":[1],\"headingTag\":[1,\"heading-tag\"],\"open\":[516],\"compact\":[516]}]]],[\"diwa-button.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[17,\"diwa-switch\",{\"checked\":[516],\"disabled\":[516],\"loading\":[516],\"alignLabel\":[1,\"align-label\"],\"compact\":[516],\"theme\":[513]}]]],[\"diwa-tag.cjs\",[[1,\"diwa-tag\",{\"variant\":[513],\"compact\":[516],\"icon\":[1],\"theme\":[513]}]]],[\"diwa-toast.cjs\",[[1,\"diwa-toast\",{\"theme\":[513],\"messages\":[32],\"addMessage\":[64]}]]],[\"diwa-badge.cjs\",[[1,\"diwa-badge\",{\"variant\":[513],\"size\":[513],\"label\":[1],\"theme\":[513]}]]],[\"diwa-checkbox.cjs\",[[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.cjs\",[[1,\"diwa-divider\",{\"theme\":[513],\"orientation\":[513]}]]],[\"diwa-input.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[17,\"diwa-popover\",{\"direction\":[1],\"description\":[1],\"theme\":[513],\"isOpen\":[32]},[[8,\"keydown\",\"handleGlobalKeydown\"],[9,\"pointerdown\",\"handleGlobalPointerDown\"]]]]],[\"diwa-radio-group.cjs\",[[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.cjs\",[[17,\"diwa-radio-group-item\",{\"theme\":[513],\"value\":[513],\"checked\":[1540],\"name\":[1537],\"disabled\":[516],\"compact\":[516]},null,{\"checked\":[\"handleCheckedChange\"]}]]],[\"diwa-scroller.cjs\",[[1,\"diwa-scroller\",{\"alignScrollIndicator\":[1,\"align-scroll-indicator\"],\"scrollbar\":[4],\"theme\":[513],\"hasOverflow\":[32],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"diwa-segmented-control.cjs\",[[1,\"diwa-segmented-control\",{\"theme\":[513],\"value\":[1537],\"disabled\":[516],\"compact\":[516]},[[0,\"diwa-segment-select\",\"handleItemSelect\"]]]]],[\"diwa-segmented-control-item.cjs\",[[17,\"diwa-segmented-control-item\",{\"theme\":[513],\"value\":[513],\"selected\":[1540],\"disabled\":[516],\"compact\":[516]}]]],[\"diwa-select.cjs\",[[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\"],\"value\":[\"onValueChange\"],\"isOpen\":[\"onIsOpenChange\"]}]]],[\"diwa-select-option.cjs\",[[17,\"diwa-select-option\",{\"value\":[513],\"disabled\":[516],\"selected\":[1540],\"highlighted\":[1540],\"theme\":[1025],\"setFocus\":[64]}]]],[\"diwa-stepper-horizontal.cjs\",[[1,\"diwa-stepper-horizontal\",{\"theme\":[513],\"activeStepIndex\":[1026,\"active-step-index\"]},null,{\"activeStepIndex\":[\"handleIndexChange\"]}]]],[\"diwa-stepper-horizontal-item.cjs\",[[1,\"diwa-stepper-horizontal-item\",{\"theme\":[513],\"label\":[1],\"sublabel\":[1],\"state\":[1537],\"stepNumber\":[1026,\"step-number\"],\"isLast\":[1028,\"is-last\"]}]]],[\"diwa-table.cjs\",[[1,\"diwa-table\",{\"theme\":[513],\"caption\":[1],\"compact\":[4],\"layout\":[1],\"bordered\":[4],\"striped\":[4]},[[0,\"diwaTableUpdate\",\"handleTableUpdate\"]]]]],[\"diwa-table-body.cjs\",[[1,\"diwa-table-body\",{\"theme\":[513]}]]],[\"diwa-table-cell.cjs\",[[1,\"diwa-table-cell\",{\"theme\":[513],\"multiline\":[4]}]]],[\"diwa-table-head.cjs\",[[1,\"diwa-table-head\",{\"theme\":[513]}]]],[\"diwa-table-head-cell.cjs\",[[1,\"diwa-table-head-cell\",{\"theme\":[513],\"sort\":[16],\"hideLabel\":[4,\"hide-label\"],\"multiline\":[4]}]]],[\"diwa-table-row.cjs\",[[1,\"diwa-table-row\",{\"theme\":[513]}]]],[\"diwa-tabs.cjs\",[[1,\"diwa-tabs\",{\"theme\":[513],\"activeTabIndex\":[1026,\"active-tab-index\"]},null,{\"activeTabIndex\":[\"handleIndexChange\"]}]]],[\"diwa-tabs-bar.cjs\",[[1,\"diwa-tabs-bar\",{\"theme\":[513],\"activeTabIndex\":[1026,\"active-tab-index\"]},[[0,\"click\",\"handleClick\"],[0,\"keydown\",\"handleKeydown\"]],{\"activeTabIndex\":[\"handleIndexChange\"]}]]],[\"diwa-tabs-item.cjs\",[[1,\"diwa-tabs-item\",{\"theme\":[513],\"label\":[1],\"active\":[1540]}]]],[\"diwa-tag-dismissible.cjs\",[[17,\"diwa-tag-dismissible\",{\"variant\":[513],\"compact\":[516],\"label\":[1],\"theme\":[513]}]]],[\"diwa-text.cjs\",[[1,\"diwa-text\",{\"theme\":[513],\"tag\":[513],\"size\":[513],\"weight\":[513],\"align\":[513],\"color\":[513],\"ellipsis\":[516]}]]],[\"diwa-text-list.cjs\",[[1,\"diwa-text-list\",{\"theme\":[513],\"type\":[513]}]]],[\"diwa-text-list-item.cjs\",[[1,\"diwa-text-list-item\",{\"theme\":[513]}]]],[\"diwa-textarea.cjs\",[[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.cjs\",[[1,\"diwa-spinner\",{\"size\":[513],\"theme\":[513],\"label\":[1]}]]],[\"diwa-toast-item.cjs\",[[17,\"diwa-toast-item\",{\"theme\":[513],\"text\":[1],\"state\":[513]}]]],[\"diwa-icon.cjs\",[[1,\"diwa-icon\",{\"name\":[1],\"size\":[2],\"color\":[1],\"label\":[1],\"theme\":[513]}]]],[\"diwa-button-pure.cjs\",[[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 index.bootstrapLazy(JSON.parse("[[\"diwa-flyout.cjs\",[[1,\"diwa-flyout\",{\"theme\":[513],\"open\":[1540],\"position\":[513],\"backdrop\":[1],\"heading\":[1]},[[8,\"keydown\",\"onKeyDown\"]],{\"open\":[\"onOpenChange\"]}]]],[\"diwa-inline-notification.cjs\",[[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.cjs\",[[17,\"diwa-accordion\",{\"theme\":[513],\"heading\":[1],\"headingTag\":[1,\"heading-tag\"],\"open\":[516],\"compact\":[516]}]]],[\"diwa-button.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[17,\"diwa-switch\",{\"checked\":[516],\"disabled\":[516],\"loading\":[516],\"alignLabel\":[1,\"align-label\"],\"compact\":[516],\"theme\":[513]}]]],[\"diwa-tag.cjs\",[[1,\"diwa-tag\",{\"variant\":[513],\"compact\":[516],\"icon\":[1],\"theme\":[513]}]]],[\"diwa-toast.cjs\",[[1,\"diwa-toast\",{\"theme\":[513],\"currentMsg\":[32],\"addMessage\":[64]}]]],[\"diwa-badge.cjs\",[[1,\"diwa-badge\",{\"variant\":[513],\"size\":[513],\"label\":[1],\"theme\":[513]}]]],[\"diwa-checkbox.cjs\",[[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.cjs\",[[1,\"diwa-divider\",{\"theme\":[513],\"orientation\":[513]}]]],[\"diwa-heading.cjs\",[[1,\"diwa-heading\",{\"theme\":[513],\"size\":[513],\"tag\":[513],\"weight\":[513],\"align\":[513],\"color\":[513],\"ellipsis\":[516]}]]],[\"diwa-input.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[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.cjs\",[[17,\"diwa-popover\",{\"direction\":[1],\"description\":[1],\"theme\":[513],\"isOpen\":[32]},[[8,\"keydown\",\"handleGlobalKeydown\"],[9,\"pointerdown\",\"handleGlobalPointerDown\"]]]]],[\"diwa-radio-group.cjs\",[[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.cjs\",[[17,\"diwa-radio-group-item\",{\"theme\":[513],\"value\":[513],\"checked\":[1540],\"name\":[1537],\"disabled\":[516],\"compact\":[516]},null,{\"checked\":[\"handleCheckedChange\"]}]]],[\"diwa-scroller.cjs\",[[1,\"diwa-scroller\",{\"alignScrollIndicator\":[1,\"align-scroll-indicator\"],\"scrollbar\":[4],\"theme\":[513],\"hasOverflow\":[32],\"canScrollLeft\":[32],\"canScrollRight\":[32]}]]],[\"diwa-segmented-control.cjs\",[[1,\"diwa-segmented-control\",{\"theme\":[513],\"value\":[1537],\"disabled\":[516],\"compact\":[516]},[[0,\"diwa-segment-select\",\"handleItemSelect\"]]]]],[\"diwa-segmented-control-item.cjs\",[[17,\"diwa-segmented-control-item\",{\"theme\":[513],\"value\":[513],\"selected\":[1540],\"disabled\":[516],\"compact\":[516]}]]],[\"diwa-select.cjs\",[[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.cjs\",[[17,\"diwa-select-option\",{\"value\":[513],\"disabled\":[516],\"selected\":[1540],\"highlighted\":[1540],\"theme\":[1025],\"compact\":[1540],\"setFocus\":[64]}]]],[\"diwa-stepper-horizontal.cjs\",[[1,\"diwa-stepper-horizontal\",{\"theme\":[513],\"activeStepIndex\":[1026,\"active-step-index\"]},null,{\"activeStepIndex\":[\"handleIndexChange\"]}]]],[\"diwa-stepper-horizontal-item.cjs\",[[1,\"diwa-stepper-horizontal-item\",{\"theme\":[513],\"label\":[1],\"sublabel\":[1],\"state\":[1537],\"stepNumber\":[1026,\"step-number\"],\"isLast\":[1028,\"is-last\"]}]]],[\"diwa-table.cjs\",[[1,\"diwa-table\",{\"theme\":[513],\"caption\":[1],\"compact\":[4],\"layout\":[1],\"bordered\":[4],\"striped\":[4]},[[0,\"diwaTableUpdate\",\"handleTableUpdate\"]]]]],[\"diwa-table-body.cjs\",[[1,\"diwa-table-body\",{\"theme\":[513]}]]],[\"diwa-table-cell.cjs\",[[1,\"diwa-table-cell\",{\"theme\":[513],\"multiline\":[4]}]]],[\"diwa-table-head.cjs\",[[1,\"diwa-table-head\",{\"theme\":[513]}]]],[\"diwa-table-head-cell.cjs\",[[1,\"diwa-table-head-cell\",{\"theme\":[513],\"sort\":[16],\"hideLabel\":[4,\"hide-label\"],\"multiline\":[4]}]]],[\"diwa-table-row.cjs\",[[1,\"diwa-table-row\",{\"theme\":[513]}]]],[\"diwa-tabs.cjs\",[[1,\"diwa-tabs\",{\"theme\":[513],\"activeTabIndex\":[1026,\"active-tab-index\"]},null,{\"activeTabIndex\":[\"handleIndexChange\"]}]]],[\"diwa-tabs-bar.cjs\",[[1,\"diwa-tabs-bar\",{\"theme\":[513],\"activeTabIndex\":[1026,\"active-tab-index\"]},[[0,\"click\",\"handleClick\"],[0,\"keydown\",\"handleKeydown\"]],{\"activeTabIndex\":[\"handleIndexChange\"]}]]],[\"diwa-tabs-item.cjs\",[[1,\"diwa-tabs-item\",{\"theme\":[513],\"label\":[1],\"active\":[1540]}]]],[\"diwa-tag-dismissible.cjs\",[[17,\"diwa-tag-dismissible\",{\"variant\":[513],\"compact\":[516],\"label\":[1],\"theme\":[513]}]]],[\"diwa-text.cjs\",[[1,\"diwa-text\",{\"theme\":[513],\"tag\":[513],\"size\":[513],\"weight\":[513],\"align\":[513],\"color\":[513],\"ellipsis\":[516]}]]],[\"diwa-text-list.cjs\",[[1,\"diwa-text-list\",{\"theme\":[513],\"type\":[513]}]]],[\"diwa-text-list-item.cjs\",[[1,\"diwa-text-list-item\",{\"theme\":[513]}]]],[\"diwa-textarea.cjs\",[[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.cjs\",[[1,\"diwa-spinner\",{\"size\":[513],\"theme\":[513],\"label\":[1]}]]],[\"diwa-toast-item.cjs\",[[17,\"diwa-toast-item\",{\"theme\":[513],\"text\":[1],\"state\":[513]}]]],[\"diwa-icon.cjs\",[[1,\"diwa-icon\",{\"name\":[1],\"size\":[2],\"color\":[1],\"label\":[1],\"theme\":[513]}]]],[\"diwa-button-pure.cjs\",[[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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/diwa-heading.cjs.entry.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+
+const FONT_SIZE = {
+    'display': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-4xl))',
+    'h1': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-3xl))',
+    'h2': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-2xl))',
+    'h3': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-xl))',
+    'h4': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-lg))',
+    'h5': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-base))',
+    'h6': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-sm))',
+    'inherit': 'var(--diwa-heading-font-size, inherit)',
+};
+const LETTER_SPACING = {
+    'display': 'var(--diwa-heading-letter-spacing, -0.03em)',
+    'h1': 'var(--diwa-heading-letter-spacing, -0.03em)',
+    'h2': 'var(--diwa-heading-letter-spacing, -0.015em)',
+    'h3': 'var(--diwa-heading-letter-spacing, -0.015em)',
+    'h4': 'var(--diwa-heading-letter-spacing, 0)',
+    'h5': 'var(--diwa-heading-letter-spacing, 0)',
+    'h6': 'var(--diwa-heading-letter-spacing, 0)',
+    'inherit': 'var(--diwa-heading-letter-spacing, inherit)',
+};
+const FONT_WEIGHT = {
+    semibold: 'var(--diwa-font-weight-semibold)',
+    bold: 'var(--diwa-font-weight-bold)',
+};
+const COLOR = {
+    primary: 'var(--diwa-heading-color, var(--diwa-text-primary))',
+    secondary: 'var(--diwa-heading-color, var(--diwa-text-secondary))',
+    inherit: 'var(--diwa-heading-color, inherit)',
+};
+const getComponentCss = (size, weight, align, color, ellipsis) => `
+
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .heading {
+    margin: 0;
+    padding: 0;
+    font-size: ${FONT_SIZE[size]};
+    font-weight: ${FONT_WEIGHT[weight]};
+    line-height: var(--diwa-heading-line-height, var(--diwa-line-height-tight));
+    letter-spacing: ${LETTER_SPACING[size]};
+    text-align: ${align};
+    color: ${COLOR[color]};
+    ${ellipsis ? 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;' : ''}
+  }
+`;
+
+const H_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
+const SIZE_TO_TAG = {
+    display: 'h1',
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    inherit: 'h2',
+};
+/**
+ * Resolves the HTML tag to render:
+ * 1. If any direct slotted child is an h1–h6 element → return 'div' (avoids invalid nesting).
+ * 2. If an explicit `tag` prop is provided → use it.
+ * 3. Otherwise → infer from the `size` prop.
+ */
+function getHeadingTag(host, size, tag) {
+    if (host && Array.from(host.children).some((el) => H_TAGS.has(el.tagName.toLowerCase()))) {
+        return 'div';
+    }
+    if (tag)
+        return tag;
+    return SIZE_TO_TAG[size];
+}
+
+const DiwaHeading = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // ──────────────────────────────────────────────────────────────
+        // Props
+        // ──────────────────────────────────────────────────────────────
+        /** Per-component theme override. */
+        this.theme = 'dark';
+        /**
+         * Visual size and inferred semantic heading level.
+         * Determines the rendered HTML tag when no explicit `tag` prop is given.
+         */
+        this.size = 'h2';
+        /** Font weight. */
+        this.weight = 'bold';
+        /** Horizontal alignment. `start` and `end` are RTL-aware. */
+        this.align = 'start';
+        /**
+         * Colour alias. Use `inherit` to pass through the surrounding colour unchanged —
+         * useful inside cards, hero sections, or other styled containers.
+         */
+        this.color = 'primary';
+        /**
+         * Clip overflow to a single line with a trailing ellipsis.
+         * The host element must have a defined width for this to take effect.
+         */
+        this.ellipsis = false;
+    }
+    // ──────────────────────────────────────────────────────────────
+    // Render
+    // ──────────────────────────────────────────────────────────────
+    render() {
+        const Tag = getHeadingTag(this.host, this.size, this.tag); // eslint-disable-line @typescript-eslint/no-explicit-any
+        return (index.h(index.Host, { key: 'af31da4a1b31e1a28f9de05da4c5517dbfb7fdbd', "data-theme": this.theme }, index.h("style", { key: 'c9616c82eae3dada3edcf5c89b7f9b88716bae55', innerHTML: getComponentCss(this.size, this.weight, this.align, this.color, this.ellipsis) }), index.h(Tag, { key: 'd265ccdd08cdbc29ba15043a67769b78e8cfe4cb', class: "heading" }, index.h("slot", { key: '7c7bfb3d32b839469bfba2ec02173d1f71f03812' }))));
+    }
+    get host() { return index.getElement(this); }
+};
+
+exports.diwa_heading = DiwaHeading;
+
+//# sourceMappingURL=diwa-heading.cjs.entry.js.map

package/dist/cjs/diwa-heading.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"diwa-heading.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/diwa-heading/diwa-heading-styles.ts","src/components/diwa-heading/diwa-heading-utils.ts","src/components/diwa-heading/diwa-heading.tsx"],"sourcesContent":["import type { HeadingAlign, HeadingColor, HeadingSize, HeadingWeight } from './types';\r\n\r\nconst FONT_SIZE: Record<HeadingSize, string> = {\r\n  'display': 'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-4xl))',\r\n  'h1':      'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-3xl))',\r\n  'h2':      'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-2xl))',\r\n  'h3':      'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-xl))',\r\n  'h4':      'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-lg))',\r\n  'h5':      'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-base))',\r\n  'h6':      'var(--diwa-heading-font-size, var(--diwa-font-size-fluid-sm))',\r\n  'inherit': 'var(--diwa-heading-font-size, inherit)',\r\n};\r\n\r\nconst LETTER_SPACING: Record<HeadingSize, string> = {\r\n  'display': 'var(--diwa-heading-letter-spacing, -0.03em)',\r\n  'h1':      'var(--diwa-heading-letter-spacing, -0.03em)',\r\n  'h2':      'var(--diwa-heading-letter-spacing, -0.015em)',\r\n  'h3':      'var(--diwa-heading-letter-spacing, -0.015em)',\r\n  'h4':      'var(--diwa-heading-letter-spacing, 0)',\r\n  'h5':      'var(--diwa-heading-letter-spacing, 0)',\r\n  'h6':      'var(--diwa-heading-letter-spacing, 0)',\r\n  'inherit': 'var(--diwa-heading-letter-spacing, inherit)',\r\n};\r\n\r\nconst FONT_WEIGHT: Record<HeadingWeight, string> = {\r\n  semibold: 'var(--diwa-font-weight-semibold)',\r\n  bold:     'var(--diwa-font-weight-bold)',\r\n};\r\n\r\nconst COLOR: Record<HeadingColor, string> = {\r\n  primary:   'var(--diwa-heading-color, var(--diwa-text-primary))',\r\n  secondary: 'var(--diwa-heading-color, var(--diwa-text-secondary))',\r\n  inherit:   'var(--diwa-heading-color, inherit)',\r\n};\r\n\r\nexport const getComponentCss = (\r\n  size: HeadingSize,\r\n  weight: HeadingWeight,\r\n  align: HeadingAlign,\r\n  color: HeadingColor,\r\n  ellipsis: boolean,\r\n): string => `\r\n\r\n  :host {\r\n    display: block;\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  .heading {\r\n    margin: 0;\r\n    padding: 0;\r\n    font-size: ${FONT_SIZE[size]};\r\n    font-weight: ${FONT_WEIGHT[weight]};\r\n    line-height: var(--diwa-heading-line-height, var(--diwa-line-height-tight));\r\n    letter-spacing: ${LETTER_SPACING[size]};\r\n    text-align: ${align};\r\n    color: ${COLOR[color]};\r\n    ${ellipsis ? 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;' : ''}\r\n  }\r\n`;\r\n","import type { HeadingSize, HeadingTag } from './types';\r\n\r\nconst H_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);\r\n\r\nexport const SIZE_TO_TAG: Record<HeadingSize, HeadingTag> = {\r\n  display: 'h1',\r\n  h1:      'h1',\r\n  h2:      'h2',\r\n  h3:      'h3',\r\n  h4:      'h4',\r\n  h5:      'h5',\r\n  h6:      'h6',\r\n  inherit: 'h2',\r\n};\r\n\r\n/**\r\n * Resolves the HTML tag to render:\r\n * 1. If any direct slotted child is an h1–h6 element → return 'div' (avoids invalid nesting).\r\n * 2. If an explicit `tag` prop is provided → use it.\r\n * 3. Otherwise → infer from the `size` prop.\r\n */\r\nexport function getHeadingTag(\r\n  host: HTMLElement | null,\r\n  size: HeadingSize,\r\n  tag: HeadingTag | undefined,\r\n): HeadingTag {\r\n  if (host && Array.from(host.children).some((el) => H_TAGS.has(el.tagName.toLowerCase()))) {\r\n    return 'div';\r\n  }\r\n  if (tag) return tag;\r\n  return SIZE_TO_TAG[size];\r\n}\r\n","import { Component, Element, Host, Prop, h } from '@stencil/core';\r\nimport type { HeadingAlign, HeadingColor, HeadingSize, HeadingTag, HeadingWeight } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-heading-styles';\r\nimport { getHeadingTag } from './diwa-heading-utils';\r\n\r\n/**\r\n * @component diwa-heading\r\n *\r\n * A responsive heading renderer that maps a visual size scale onto the\r\n * correct semantic HTML heading element. Font sizes use fluid type tokens\r\n * that scale between viewport sizes.\r\n *\r\n * Usage:\r\n *   <diwa-heading size=\"h1\">Page title</diwa-heading>\r\n *   <diwa-heading size=\"display\" color=\"secondary\">Hero headline</diwa-heading>\r\n *   <diwa-heading size=\"h3\" tag=\"h2\">Visual h3, semantic h2</diwa-heading>\r\n *\r\n * @slot default — Heading text content. Inline elements are allowed; block elements are not.\r\n */\r\n@Component({\r\n  tag: 'diwa-heading',\r\n  shadow: true,\r\n})\r\nexport class DiwaHeading {\r\n  @Element() private host!: HTMLElement;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Props\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /**\r\n   * Visual size and inferred semantic heading level.\r\n   * Determines the rendered HTML tag when no explicit `tag` prop is given.\r\n   */\r\n  @Prop({ reflect: true }) size: HeadingSize = 'h2';\r\n\r\n  /**\r\n   * Override the rendered HTML tag.\r\n   * Use when the visual size must differ from the semantic level —\r\n   * e.g. a visually-large `h3` inside a section that already has an `h2`.\r\n   * If omitted, the tag is inferred from `size`.\r\n   */\r\n  @Prop({ reflect: true }) tag?: HeadingTag;\r\n\r\n  /** Font weight. */\r\n  @Prop({ reflect: true }) weight: HeadingWeight = 'bold';\r\n\r\n  /** Horizontal alignment. `start` and `end` are RTL-aware. */\r\n  @Prop({ reflect: true }) align: HeadingAlign = 'start';\r\n\r\n  /**\r\n   * Colour alias. Use `inherit` to pass through the surrounding colour unchanged —\r\n   * useful inside cards, hero sections, or other styled containers.\r\n   */\r\n  @Prop({ reflect: true }) color: HeadingColor = 'primary';\r\n\r\n  /**\r\n   * Clip overflow to a single line with a trailing ellipsis.\r\n   * The host element must have a defined width for this to take effect.\r\n   */\r\n  @Prop({ reflect: true }) ellipsis: boolean = false;\r\n\r\n  // ──────────────────────────────────────────────────────────────\r\n  // Render\r\n  // ──────────────────────────────────────────────────────────────\r\n\r\n  render() {\r\n    const Tag = getHeadingTag(this.host, this.size, this.tag) as any; // eslint-disable-line @typescript-eslint/no-explicit-any\r\n\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.size, this.weight, this.align, this.color, this.ellipsis)} />\r\n        <Tag class=\"heading\">\r\n          <slot />\r\n        </Tag>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/diwa-icon.cjs.entry.js

@@ -29185,7 +29185,7 @@ const DiwaIcon = class {
     render() {
         var _a;
         const isDecorative = !this.label;
-        return (index.h(index.Host, { key: '616cc38ba4654506996acdc1dbadf5b1d767b6da', "data-theme": this.theme }, index.h("style", { key: 'd10c3998dcf95485c8bf01d3e126c36d6b4a4dae', innerHTML: getComponentCss() }), index.h("svg", { key: 'd2b6d315a20a0f740b663a644ac13350c9ef67c9', ref: (el) => (this.svgEl = el), xmlns: "http://www.w3.org/2000/svg", width: this.size, height: this.size, viewBox: "0 0 24 24", fill: "none", stroke: this.color, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": isDecorative ? 'true' : undefined, role: isDecorative ? undefined : 'img', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : undefined })));
+        return (index.h(index.Host, { key: '480e247dd569c171693a4f1e7e2f10ebf9c86f95', "data-theme": this.theme }, index.h("style", { key: '9596aed7c1183970dd2b5848d93097511119a41b', innerHTML: getComponentCss() }), index.h("svg", { key: '02f276d6dd076d812ab6d2d8f2c790c9fe06023f', ref: (el) => (this.svgEl = el), xmlns: "http://www.w3.org/2000/svg", width: this.size, height: this.size, viewBox: "0 0 24 24", fill: "none", stroke: this.color, "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": isDecorative ? 'true' : undefined, role: isDecorative ? undefined : 'img', "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : undefined })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/diwa-inline-notification.cjs.entry.js

@@ -170,7 +170,7 @@ const DiwaInlineNotification = class {
     render() {
         const isAlert = this.state === 'error';
         const showActions = this.dismissButton || Boolean(this.actionLabel);
-        return (index.h(index.Host, { key: '9c5daaa90736893373306014a7a81ceff288038e', "data-theme": this.theme }, index.h("style", { key: '703bad80df2e60ab7348d4c769ac3ef68def40e8', innerHTML: getComponentCss(this.state) }), index.h("div", { key: '8bcc89834f5664f7bc0bcd856735ec4793346ea7', class: "root" }, index.h("div", { key: '252d48eb839a4bf50039607bf7740c520d0ac78f', class: "icon-wrap", "aria-hidden": "true" }, index.h("diwa-icon", { key: '968fbde38c713c9de87571d9470f48845c398dab', name: STATE_ICON[this.state], size: 16 })), index.h("div", { key: '5d7a97ac06d8eadb6e586d8460d9bcd593a80abb', class: "content", role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite' }, this.heading && index.h("span", { key: 'b3e0f71b3fd449585b262c4cd6eb05837cee7713', class: "heading" }, this.heading), index.h("p", { key: '91da63ee4efbbe5333f96ff80d548fe9546c4284', class: "description" }, this.description || index.h("slot", { key: '562c57c90e98b8623e9b64f751bfcc4f3ee7a08c' }))), showActions && (index.h("div", { key: '9e9b140ff5968750cbba94bc793fa9643bad75bb', class: "actions" }, this.actionLabel && (index.h("diwa-button-pure", { key: '12794cd50df008bba55ad71808c5392ef18344ed', icon: "arrow-right", size: "sm", loading: this.actionLoading, theme: this.theme, onClick: this.handleAction }, this.actionLabel)), this.dismissButton && (index.h("diwa-button-pure", { key: '23c15e5eb4fb8114fbb760f65d7e09652c45d862', icon: "x", label: "Dismiss notification", hideLabel: true, size: "sm", theme: this.theme, onClick: this.handleDismiss })))))));
+        return (index.h(index.Host, { key: 'd3fd1076a2da3ada9262e57c2a9d1f6263862abb', "data-theme": this.theme }, index.h("style", { key: '10e025b7ecf829f51199f3bd951ca848e313d0a2', innerHTML: getComponentCss(this.state) }), index.h("div", { key: 'f6292b570bd9cb1f767d94c569a1f71b7ece1bd9', class: "root" }, index.h("div", { key: '38faa9cf097f080a61b3beacd04fbe8f5ddcc657', class: "icon-wrap", "aria-hidden": "true" }, index.h("diwa-icon", { key: '0e9cc0a5d557911ca1f90d40665d8d679f852e52', name: STATE_ICON[this.state], size: 16 })), index.h("div", { key: '1bfbfda28d6ee3014c0c57b054976cd244c82f0a', class: "content", role: isAlert ? 'alert' : 'status', "aria-live": isAlert ? 'assertive' : 'polite' }, this.heading && index.h("span", { key: '5ed7a8a15c3b50ee05334d2a9b6b62637808f9a8', class: "heading" }, this.heading), index.h("p", { key: 'e8af6b4bfec6fdaedec723b77b5fb8ce49eb11ce', class: "description" }, this.description || index.h("slot", { key: '1a55704e1b0c522ca25cbeda757f65a6d57af8d7' }))), showActions && (index.h("div", { key: 'd054dc9a6e584a9be0f54c3f1eabc8600f73f23e', class: "actions" }, this.actionLabel && (index.h("diwa-button-pure", { key: 'd9a057dcdacb531f70417912c0e0be7f47ca451c', icon: "arrow-right", size: "sm", loading: this.actionLoading, theme: this.theme, onClick: this.handleAction }, this.actionLabel)), this.dismissButton && (index.h("diwa-button-pure", { key: '892cb38a5f28fd95115fac50db97c45881eab7ae', icon: "x", label: "Dismiss notification", hideLabel: true, size: "sm", theme: this.theme, onClick: this.handleDismiss })))))));
     }
 };
 

package/dist/cjs/diwa-input-date.cjs.entry.js

@@ -47,7 +47,7 @@ const DiwaInputDate = class {
         const inputId = 'input';
         const descId = 'desc';
         const msgId = 'msg';
-        return (index.h(index.Host, { key: '5f4369927da0d74c2564b4b147dc4964820cd2dd', "data-theme": this.theme }, index.h("style", { key: '5662055af38b2245350dd16e72ad01cfc88f7884', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), index.h("div", { key: 'eebc09dc97886920cee9ff5680c49697cd1d7637', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: 'd6b3d2a4d2338132b9c8fc86b6a4de5aba65605c', class: "label-row" }, index.h("label", { key: 'f9f3cd718b6c43ce95f4d3b0ad691ba817955552', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: 'bd542448712be17c8c67725b5cc9346944a1b11b', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: '24a53071abaaa6ac6a377eecc10b26a9422ad5b0', name: "label-after" }))), index.h("div", { key: '4aed4bb669fc3f4a13fec05e2845961672f56d73', class: "input-wrapper" }, this._hasStart && index.h("div", { key: '32ef1a846195d61b5001deabc0a63fec5e1b4252', class: "slot-start" }, index.h("slot", { key: 'aeab0a7ac116d58b9256b78097a3e8ba2ef4df7e', name: "start" })), index.h("input", { key: 'd638d2a0b495e12d3b74e4868302c03733d5a505', id: inputId, class: "input", type: "date", name: this.name || undefined, value: this.value, disabled: this.disabled, required: this.required, readOnly: this.readonly, min: this.min, max: this.max, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: 'b528ac2bdd016d563f8786111907850543da776e', class: "slot-end" }, index.h("slot", { key: '9ec29e9ac4340f47c34201156b70ad0cf2f8b35f', name: "end" }))), !this.message && this.description && (index.h("p", { key: '404219ce20aa844461ca10964d23d63cfe21a5fb', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: '8c59dabacdfc8f553bc2308549fe9a51fb9ef224', id: msgId, class: "message" }, this.message)))));
+        return (index.h(index.Host, { key: 'b58c9b32c94117b172cfa28f7b156650b70087f7', "data-theme": this.theme }, index.h("style", { key: 'ddf17006665bc7eaa8a1f4310d0a1cc240b5e2a2', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), index.h("div", { key: '05d5d42c977eb975d9d66c6f2849553cf3030c84', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: '988b49a445bb8352b772312a71f09ad8a74ac085', class: "label-row" }, index.h("label", { key: 'b377a77badf65a2a3690aa71cc6e0dc02fece8f8', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: '194a617bc1959c34b9624e5863bf63e1b57e1bd6', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: '6a8b5dab9bd2c53f912612142a2429a481e9ca0c', name: "label-after" }))), index.h("div", { key: '87d8863bbd02048faffbd83fd0326a160d834eb5', class: "input-wrapper" }, this._hasStart && index.h("div", { key: 'f1f09a5f3f3db887ee379e1e8dc736422e677c62', class: "slot-start" }, index.h("slot", { key: '99b41cac365685c4387cb24e4c5ba082eb3c9891', name: "start" })), index.h("input", { key: '7009d405ffd077b44b7f05f1c92364bf6eb3e199', id: inputId, class: "input", type: "date", name: this.name || undefined, value: this.value, disabled: this.disabled, required: this.required, readOnly: this.readonly, min: this.min, max: this.max, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: 'f525f4eb53efefbfe224f27162372f7bddcde580', class: "slot-end" }, index.h("slot", { key: 'c4b75e8f245b62142b27ada1f6109a201ee95297', name: "end" }))), !this.message && this.description && (index.h("p", { key: 'c45c7d9b10e31b7234b5d275f118dd07b5f9717a', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: '6f45b19c1e16797f063f5c8bb404dc2c4469f9f3', id: msgId, class: "message" }, this.message)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/diwa-input-email.cjs.entry.js

@@ -47,7 +47,7 @@ const DiwaInputEmail = class {
         const inputId = 'input';
         const descId = 'desc';
         const msgId = 'msg';
-        return (index.h(index.Host, { key: '1a6687d10bd153eec0539353d3268e3dc2290b32', "data-theme": this.theme }, index.h("style", { key: '09469b584447016ad849afb25e925f057330e863', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), index.h("div", { key: 'ba00b4ecf8ab9afb5d7a57d503383eab8d2edf98', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: '22389218bba90ee2fff6ab51d9d45bb5801e6173', class: "label-row" }, index.h("label", { key: '06e1d34f6c601df85b58165e7fb21e09ca12bcca', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: '5588e28c407f8635ebcce2e1279b6be6c539263e', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: 'f7643dca94c7b4091fbd2133181612745cc84ef6', name: "label-after" }))), index.h("div", { key: '135ba5099bab6c8221ee7b5e873aa3f12bdcc7c7', class: "input-wrapper" }, this._hasStart && index.h("div", { key: '63f1226e41d09fec87678bbd68ec19139b20f221', class: "slot-start" }, index.h("slot", { key: '98740dc661a2dcbc15124abf589a230200259c55', name: "start" })), index.h("input", { key: '1dce2b09f9bbb77b1f308879a9c905362938e48b', id: inputId, class: "input", type: "email", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: '4e651437e42eaf82bdcba017fe4d744e4697c911', class: "slot-end" }, index.h("slot", { key: 'f999ab791c914938a73b589ca53d28ff9b357734', name: "end" }))), !this.message && this.description && (index.h("p", { key: 'c19e97d4d817f4c215005a2981bcb1d2860a0904', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: '050b53ccb7310f186e4d1e767d1ff20efd5e7064', id: msgId, class: "message" }, this.message)))));
+        return (index.h(index.Host, { key: 'fe6b98e36a4b0b265b95905d07869380f2f93238', "data-theme": this.theme }, index.h("style", { key: 'bf23ff17067bd162be41f98177e2e5d3994f58e2', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), index.h("div", { key: '2a5c524be6036fd7b6807fee457a9f6295c4f233', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: 'b58789f7e967ced3eeb1c11726eebc44c7448db5', class: "label-row" }, index.h("label", { key: '6ca47d2e8b70467c21ca44078ee39c45f0149dbe', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: 'a252801b4c737c48e7d2df739a8a73c866300367', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: 'fb24755551508bf08bf0e34d5c030b7166110b9e', name: "label-after" }))), index.h("div", { key: 'ded4182c2a8b9f47c0ab10641a56afc91780dc38', class: "input-wrapper" }, this._hasStart && index.h("div", { key: '5d846bc94e2dd8d5569719978c4dae898555333a', class: "slot-start" }, index.h("slot", { key: '9b3fdf26e6628094ee146da8b993a85574b89c5d', name: "start" })), index.h("input", { key: '97999d1bf2b0c100d1c410392a2d540752b1f213', id: inputId, class: "input", type: "email", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: 'f5fa380e3c4507f1b3cc91af17ab74b2386e00ca', class: "slot-end" }, index.h("slot", { key: '578a2546ca081577e4f5e0e1da2a55a60f67231c', name: "end" }))), !this.message && this.description && (index.h("p", { key: 'e14e3534270d8190fd155f5aa32fe03a66d32e8b', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: '1da9633d6d23a8ef442d2094864c64b48ec0640a', id: msgId, class: "message" }, this.message)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/diwa-input-month.cjs.entry.js

@@ -47,7 +47,7 @@ const DiwaInputMonth = class {
         const inputId = 'input';
         const descId = 'desc';
         const msgId = 'msg';
-        return (index.h(index.Host, { key: 'e7b42335a448f264e605a22e8c973a4703027711', "data-theme": this.theme }, index.h("style", { key: '97a4f13c5867744270eced8aa13b209f9139f582', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), index.h("div", { key: '4d20197cbf918b7be8cf1b67e5f0fdc3e338f2f4', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: '0e79bf6e67eab3600a3a1e5d3f2d7a73a83abdc9', class: "label-row" }, index.h("label", { key: '7adcf80c3a0e61c1ba0634308657fef73054e7ea', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: 'd8cf7249d82461d2fd51f000737a4f0ebd15afc4', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: '738298b5cd67496e40173687a02432191754ebd6', name: "label-after" }))), index.h("div", { key: '0fb96733077c26851196e46220a80af39b8dd757', class: "input-wrapper" }, this._hasStart && index.h("div", { key: 'f13788a2afa4855aa772db164ee436aa0356f0cf', class: "slot-start" }, index.h("slot", { key: '06a5012bd82608a9b6ff4d84d89a8b1a8dadc2d3', name: "start" })), index.h("input", { key: '1bebc847823145ec56aa3a540a3e55463990fd6d', id: inputId, class: "input", type: "month", name: this.name || undefined, value: this.value, disabled: this.disabled, required: this.required, readOnly: this.readonly, min: this.min, max: this.max, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: '7fad070fcca5acd9dc849e3f1549708c49ad85f9', class: "slot-end" }, index.h("slot", { key: '58f0310c841b893f7b9679ec0ee0c702150e6476', name: "end" }))), !this.message && this.description && (index.h("p", { key: '6889e36e3f5f1e859f2c2be2fee4aa4766b9898c', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: 'bfb61253f688d25ede2e488306cf6d61ed8cc8e9', id: msgId, class: "message" }, this.message)))));
+        return (index.h(index.Host, { key: '87caa7dc1d48df433e2eae88019ded3183eeae63', "data-theme": this.theme }, index.h("style", { key: '41b65a4a5d365c0c186430ebe4b2a25e2cc1ac2d', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), index.h("div", { key: 'b5c0cecd3d6baa09b8553589d5262a63daf15901', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: 'd26fb0176e47d86e1fbb5584938a4ab3da1e0015', class: "label-row" }, index.h("label", { key: '07434e386cd23734fd7fa089ad743286a3177b23', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: '9c7c2102c465f0c353a33d2a05d4b563b3cdc822', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: 'cc9958974d0d5cd2481ffa23d9d7f81be370a613', name: "label-after" }))), index.h("div", { key: '3d6deb18bd746934c33361bb07c9a41abe84448c', class: "input-wrapper" }, this._hasStart && index.h("div", { key: '0d1e81e2efaa8e7fda4c42b69e354dc2afc966fa', class: "slot-start" }, index.h("slot", { key: '8188e74066295e173f74ab954d23762fb44aa14a', name: "start" })), index.h("input", { key: 'c140191e01f343ef9c1762df0772c2e33d878546', id: inputId, class: "input", type: "month", name: this.name || undefined, value: this.value, disabled: this.disabled, required: this.required, readOnly: this.readonly, min: this.min, max: this.max, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: '9d2967ebaf8c1da5921707860be1c437f993c71a', class: "slot-end" }, index.h("slot", { key: '80144029ad42a1bd0c7af25ea6c03ff49df012a4', name: "end" }))), !this.message && this.description && (index.h("p", { key: 'c538c3c320c02157796d8ab1c89747a1d6537a1a', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: '4b5c1074231824d3d7ab6ddcf67db4b673b4d6d5', id: msgId, class: "message" }, this.message)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/diwa-input-number.cjs.entry.js

@@ -47,7 +47,7 @@ const DiwaInputNumber = class {
         const inputId = 'input';
         const descId = 'desc';
         const msgId = 'msg';
-        return (index.h(index.Host, { key: '09f9b5cf859ef7c03ef84256357c2ff08ee49e0d', "data-theme": this.theme }, index.h("style", { key: '3bbe107a46f9b4e98a58fb93e71f3d80225188bc', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), index.h("div", { key: '0809b3f8e6540f2bca95ab41682cbdd1bf087718', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: '93e3454fda5faef279f540d8ff4179e08c7fd1f1', class: "label-row" }, index.h("label", { key: '171ab7d14f740ef31bff359cb51ad25d54b183ce', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: '707c033e74161a76254cdfe9c798a78772d22833', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: '5eb701dd4c2d30d80cb11b07c07b1f9d48333ab6', name: "label-after" }))), index.h("div", { key: 'adc124185bbcbe37f0f1ff56a3b0fa8d0d725e07', class: "input-wrapper" }, this._hasStart && index.h("div", { key: 'a2ee97d7ce58f3f3f16dd0dab5cd6695573160fc', class: "slot-start" }, index.h("slot", { key: 'fe16cba2f95ce86de6721fff8a61236b618e8485', name: "start" })), index.h("input", { key: 'a1f15b79921da77f172033d34a91daf6548722ee', id: inputId, class: "input", type: "number", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, min: this.min !== undefined ? String(this.min) : undefined, max: this.max !== undefined ? String(this.max) : undefined, step: this.step !== undefined ? String(this.step) : undefined, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: 'e2772476adc180f91281a784200f9e4b53038a0c', class: "slot-end" }, index.h("slot", { key: '11cb85cf049deab38a7fec5a7841c082391b2009', name: "end" }))), !this.message && this.description && (index.h("p", { key: '6c64debb7f04fa9da7483854c04888842267898b', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: '8f34cc860cac36c591ab7e3cf4e89722cb907da7', id: msgId, class: "message" }, this.message)))));
+        return (index.h(index.Host, { key: '19e42e576c408fccc4adf6d6c562f305c33c0f54', "data-theme": this.theme }, index.h("style", { key: '0732bc072bfa2ceb467098ee5777929a8178f2a4', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), index.h("div", { key: '24c6834582af6bd6717f1e5931afe0899b3ff398', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: 'd9a04935b7d99b3c81655efde37126e3f17ba615', class: "label-row" }, index.h("label", { key: '11d4a082d8f25f30976fcdbaa310593db060ef60', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: '73c50d8ac6143b1a72c746a148500b4d4dbbd830', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: '5ae5ce0b1135513eed6d844b6fbf8d16b65f788d', name: "label-after" }))), index.h("div", { key: 'b8cdb8629b40393cb8aa02ab17fc976e479758f4', class: "input-wrapper" }, this._hasStart && index.h("div", { key: 'df9cf6f07812effcfcc97741fc4fca57ea43056f', class: "slot-start" }, index.h("slot", { key: 'fccc715b95285edd67ebb38fd9fa961aa3d32bee', name: "start" })), index.h("input", { key: '04cc78d6e0d5cfcbc4a9df3cabb7a6c38de1c925', id: inputId, class: "input", type: "number", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, min: this.min !== undefined ? String(this.min) : undefined, max: this.max !== undefined ? String(this.max) : undefined, step: this.step !== undefined ? String(this.step) : undefined, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: 'c811312d3d2df960399275a019b939700ceb736e', class: "slot-end" }, index.h("slot", { key: '1dca8bdb7a062db994c126b03f7b6d715719bf66', name: "end" }))), !this.message && this.description && (index.h("p", { key: '0291a639f01c74f5f0d761494d27abd47a19b5ee', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: '6956f7c63e1631a898b79040652fa42b746b06bc', id: msgId, class: "message" }, this.message)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/diwa-input-password.cjs.entry.js

@@ -55,7 +55,7 @@ const DiwaInputPassword = class {
         const descId = 'desc';
         const msgId = 'msg';
         const hasSuffix = this.showToggle && !this.disabled;
-        return (index.h(index.Host, { key: 'a7d1c2c451e9eb743f2cc211cf644409620b0e3e', "data-theme": this.theme }, index.h("style", { key: 'c1cde1b42b4ebb897bb1d2a3e9f7ff29b8a3a669', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, hasSuffix) }), index.h("div", { key: 'ec516af67a3fb9e8b070a5a4d3ef7611fdd09fd9', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: 'fa07e74dca79660dc1f300f72008fad7b71ee5da', class: "label-row" }, index.h("label", { key: 'a60036096fd791a62ca1b8ebddd91e22baacae9b', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: '199100c093d8d8e7ec5ee49adf063ec8929160e4', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: 'ca35bdaf076776a53dabd36b4ab4f8203982da43', name: "label-after" }))), index.h("div", { key: '8e7a21233a3b41e04cdc23ce66f2899fee409707', class: "input-wrapper" }, this._hasStart && index.h("div", { key: 'e7b2175413d06a766612db4eba899f172fb4e0cc', class: "slot-start" }, index.h("slot", { key: '0fe18213e7cdebe3e77857050ace2d5b7e2fa1c9', name: "start" })), index.h("input", { key: '33503e876400fba6914fa39e9dab5272db655144', id: inputId, class: "input", type: this.showPassword ? 'text' : 'password', name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: '796c7a85e6ac142d76dbb4789b774f67c9ce457f', class: "slot-end" }, index.h("slot", { key: '11802f147f1b820ef6bf50d25e551503fa9a6685', name: "end" })), hasSuffix && (index.h("button", { key: '526415a8043733850a39415f653f74e282db83b8', class: "suffix-btn", type: "button", "aria-label": this.showPassword ? 'Hide password' : 'Show password', onClick: this.handleToggle }, index.h("diwa-icon", { key: 'b2b40c55f74d7917aa69656ce1447d2ca4d455bf', name: this.showPassword ? 'eye-off' : 'eye', size: 16 })))), !this.message && this.description && (index.h("p", { key: '2f2a7c3da7c326077fadc8faa9d9f5d41d89fa25', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: '5fd706ae0de4235b60493438b5be67caa2aae317', id: msgId, class: "message" }, this.message)))));
+        return (index.h(index.Host, { key: '1f3e93f2d809fb77b119144a2c1f2aec81980710', "data-theme": this.theme }, index.h("style", { key: '1b626031fac8f9583dc0485f4ab3f19dec92e5ae', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, hasSuffix) }), index.h("div", { key: '7db9589d668114b06ce68645a234271b77e94058', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: 'f1ced10f68fdcf68bf0062f48d7e017235802fa8', class: "label-row" }, index.h("label", { key: '17dc6fa483714a0246db7a63f8cc54146bdb4734', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: '2a2cc957a2d4a3fa8d84b80ad108e3f33e68ecfb', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: '181b756b7e92ce5529535de03b5cbeabf295ee85', name: "label-after" }))), index.h("div", { key: '43392e28aeb68ddfbbd9935ff3ba4c8c5f9765bd', class: "input-wrapper" }, this._hasStart && index.h("div", { key: '06a510b797a4a2e1b734abe2a216d4889a41ef7d', class: "slot-start" }, index.h("slot", { key: '335b50a0534bc16cf065f9dc911d6bf42982084c', name: "start" })), index.h("input", { key: '2101848e2c172b6022811d687a39f02bf51d1d40', id: inputId, class: "input", type: this.showPassword ? 'text' : 'password', name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: '7c35cc80e0af6becbd4144cb4c88fc9a117e8ad0', class: "slot-end" }, index.h("slot", { key: '5614a7892ac04ff1b30e9f11075fde469a9848ec', name: "end" })), hasSuffix && (index.h("button", { key: 'c7ce34f499054cf4d2d43776375b61f1d28067b8', class: "suffix-btn", type: "button", "aria-label": this.showPassword ? 'Hide password' : 'Show password', onClick: this.handleToggle }, index.h("diwa-icon", { key: 'ab12ef74e3d02ffafd88613687ba64a1df5afae3', name: this.showPassword ? 'eye-off' : 'eye', size: 16 })))), !this.message && this.description && (index.h("p", { key: 'bc23cdc9fac4d84dc90d7ba9626b799147e11b09', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: '8c0921edfa0ce1bc53bb419aeea71bd1a0ad2f5c', id: msgId, class: "message" }, this.message)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/diwa-input-search.cjs.entry.js

@@ -55,7 +55,7 @@ const DiwaInputSearch = class {
         const descId = 'desc';
         const msgId = 'msg';
         const hasSuffix = this.showClearButton && !!this.value && !this.disabled && !this.readonly;
-        return (index.h(index.Host, { key: '3f49df473469b199d44e240572e09bb9e159cfd3', "data-theme": this.theme }, index.h("style", { key: '3dd2dcf3d7291af66789afc82d5d5deb6c56a27c', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, hasSuffix) }), index.h("div", { key: '388430466029a911917ef8f61697e72abd46239c', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: '3b6a12eca69a7efe4a3701f78c8e9892edd752f2', class: "label-row" }, index.h("label", { key: '66bac4991da6ba5a758717d3b84bb1ab234b4cd9', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: '30275a5cbe643516887f55b377ae8b0e0a9d6387', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: '548dc2886eb1d0dfe6987ddf5ce5227aec30b90c', name: "label-after" }))), index.h("div", { key: '6f746707baccfa7c3668c26e53d40af2c6ffd6b3', class: "input-wrapper" }, this._hasStart && index.h("div", { key: '675fcd21531dbd7bc91c1580ce41ffe3542cbd07', class: "slot-start" }, index.h("slot", { key: '913ed407b729f851f719c5bf7e299eeffbb2bf4c', name: "start" })), index.h("input", { key: 'b751aedd290db42d8d297b2e58d355b8fb0a5032', id: inputId, class: "input", type: "search", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: 'eafa27ed273229c774e1c6e1bd92ba14a499418c', class: "slot-end" }, index.h("slot", { key: '910843c5913cb508fdb66c0aa171e4b1e05be583', name: "end" })), hasSuffix && (index.h("button", { key: '676246830cf3a5701d6820082af813cd55b76d61', class: "suffix-btn", type: "button", "aria-label": "Clear search", onClick: this.handleClear }, index.h("diwa-icon", { key: 'a03bd3b761dec94a4659f55780cabf47b5be9084', name: "x", size: 14 })))), !this.message && this.description && (index.h("p", { key: '57c2a7184df72cd5fc09ccb9e504638cbec520ed', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: 'a224ae6925af433f90a21dc811b8376ccb4fa176', id: msgId, class: "message" }, this.message)))));
+        return (index.h(index.Host, { key: 'b65d113dbeb2638837ca4fa6c4bec72ebeab4ff0', "data-theme": this.theme }, index.h("style", { key: '129f1cbd4beedf7211437bd14b1acd46e7d9a07a', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, hasSuffix) }), index.h("div", { key: 'dfaf9ba95461904f90ac2405a80df7cad84da7bf', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: '35022593c675040e22f54c21421df9b5a4c3eca8', class: "label-row" }, index.h("label", { key: 'a9dbe7b00d5d90c04cc547ffe9b83824fec16f3c', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: 'edc28498c69dff1486689de5e3e8bfe66345e11b', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: 'cac59ac1300060cb567d5e4bb98a2b7b1a61c434', name: "label-after" }))), index.h("div", { key: 'b930d3fab86f0b6d692068ce075f362049c8b984', class: "input-wrapper" }, this._hasStart && index.h("div", { key: '8634d5be0e887ec36f4c381e2f2bf9ff521f66af', class: "slot-start" }, index.h("slot", { key: '57e992af5d19a2a756d0bd14e420ece4ab0c9d01', name: "start" })), index.h("input", { key: 'c9d27434efc3ddfbdbc148ff794fd09594f1e2f8', id: inputId, class: "input", type: "search", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: 'b9e6ee6d85989e1dab8e2945229138a3477ecbfc', class: "slot-end" }, index.h("slot", { key: '126dbbf8756d52d288e36d9e1aad217421bea948', name: "end" })), hasSuffix && (index.h("button", { key: '0731f87f0acb9deafd9aa0ddb31ce8bfc801af99', class: "suffix-btn", type: "button", "aria-label": "Clear search", onClick: this.handleClear }, index.h("diwa-icon", { key: 'fd701ce699cb87a06ad6ed310cbc40bb3f9428c2', name: "x", size: 14 })))), !this.message && this.description && (index.h("p", { key: '2a90135b0a79bf9ecb81da78751aaad0ffd858fe', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: 'b4094e0ce16272e1a607a50e982d157b5ff15a5c', id: msgId, class: "message" }, this.message)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/diwa-input-tel.cjs.entry.js

@@ -47,7 +47,7 @@ const DiwaInputTel = class {
         const inputId = 'input';
         const descId = 'desc';
         const msgId = 'msg';
-        return (index.h(index.Host, { key: '6f16e8825a3a5ecddc50dfa71bd11037b514857c', "data-theme": this.theme }, index.h("style", { key: '869dd68dffed172a7609f208be8cf84b14d17ef0', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), index.h("div", { key: '826553cb48211b80781177f28f546f0750e303c1', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: 'd765135a6a2461b994f64cc9e64a21d7aa2beea6', class: "label-row" }, index.h("label", { key: '31c39abad9f2e512002a741775ef6edd92d63977', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: 'e70488cf88dbadda577411125bcd691c4f0eb5db', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: '8ee60e427526819d1f8be6d7ed61a1b26bfb65ec', name: "label-after" }))), index.h("div", { key: '1a28e5b5937aca1cb3c9e6470279e4072a62bbe0', class: "input-wrapper" }, this._hasStart && index.h("div", { key: '1e96aa02a0b11281b5c328fdc28ceba4c255cbf5', class: "slot-start" }, index.h("slot", { key: '28c564f01dac221e5d72ea17c88602ed9a05e199', name: "start" })), index.h("input", { key: 'b2eaeb80c1d83ef7d4d5e624f332272e5ed607ee', id: inputId, class: "input", type: "tel", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: 'efa69195e0c480335deb33e87e45edf4482b2cb4', class: "slot-end" }, index.h("slot", { key: 'c045de93902aa491f82b722e5b8b6a9c2a1e5552', name: "end" }))), !this.message && this.description && (index.h("p", { key: '284cd05849b2d42d0ce3069037c4907061bf6744', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: '8bedd2ca829061a05d561e9e5c5c99700fee09f2', id: msgId, class: "message" }, this.message)))));
+        return (index.h(index.Host, { key: '26d545b79408534571bc132cff4b12c909ebbffb', "data-theme": this.theme }, index.h("style", { key: 'ad5d90132a33837d497b4a60bba14e513b8f630d', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), index.h("div", { key: '8f510db7d2ac3aa0f43af87b7babd69687b5e46a', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: 'f65dbd4df192a273f0ab32b010bca5d6529cc64c', class: "label-row" }, index.h("label", { key: '0bdf4d2c7ac59dcaf7f6b66869e8047d7cab8744', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: '9f3c5b3b19d6509ba29f220a956520f784620989', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: '968456bb71ba9ac89803e23a51bff5105bb5cad1', name: "label-after" }))), index.h("div", { key: 'eb1d4b8956a3afde698d17db95e0966f0261b765', class: "input-wrapper" }, this._hasStart && index.h("div", { key: 'e6c3117431675a497807bf917a3d769e829d4c7b', class: "slot-start" }, index.h("slot", { key: 'd1a0719fe085425dfaf7f4f1a26dd851f134e122', name: "start" })), index.h("input", { key: '8885efc0af2811ae2708a1a5e8f434bb73b97475', id: inputId, class: "input", type: "tel", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: 'a06f2530ac6d1bac2e8898d722098ac42e59c0d8', class: "slot-end" }, index.h("slot", { key: 'df77a3f05ca4226f55c0314f245b7bd970f13439', name: "end" }))), !this.message && this.description && (index.h("p", { key: '48d9f35dd7016c0f724c25b7be1af70179f195f2', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: '4669c5c314f673d4059ab3e2b3445d7cd6f4ed0e', id: msgId, class: "message" }, this.message)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/diwa-input-text.cjs.entry.js

@@ -49,7 +49,7 @@ const DiwaInputText = class {
         const inputId = 'input';
         const descId = 'desc';
         const msgId = 'msg';
-        return (index.h(index.Host, { key: 'a33af1297d334f3a9acec8403154c96492657c91', "data-theme": this.theme }, index.h("style", { key: '37551d1e5512119fab5536d698a80af76825cbf2', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), index.h("div", { key: 'c1bc70168334b6f24fdcfab73d09db078577ae25', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: '2e8b3a309d7f61e5d7c199d3f6a68e9976972bcc', class: "label-row" }, index.h("label", { key: 'b0a4b4ca66113bfb3792873c5a4080ccc6c465a0', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: '1c964830bf67b8a3d940bdb9bad233e6d679160b', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: 'c50d80d0a9cd2f4bc3436b1fb5ba12a2b1c31c5f', name: "label-after" }))), index.h("div", { key: '9a8a3023abb52332d74330dbfd7c93fdc4ad40f3', class: "input-wrapper" }, this._hasStart && index.h("div", { key: 'ff085b2b283e1774e6cb71b21afc0b4647f4377d', class: "slot-start" }, index.h("slot", { key: '7cb492fc970f8a8f773872daecd97e5d6362e986', name: "start" })), index.h("input", { key: '944a49cd9b5277e32440044015ea60863ee197fe', id: inputId, class: "input", type: "text", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, maxLength: this.maxLength, minLength: this.minLength, spellcheck: this.spellCheck, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: '7f753a201a2bc3dcf0b687f4edd038e4d54572f3', class: "slot-end" }, index.h("slot", { key: 'f81ad5cf908f710f7dba08bf3c0b0d7afbf33c9b', name: "end" }))), !this.message && this.description && (index.h("p", { key: '19763f04411a10c5d4cb6565f01655b21982e919', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: 'dee92d6fb1e56760e29d9cf18f2e4ded55065192', id: msgId, class: "message" }, this.message)))));
+        return (index.h(index.Host, { key: '57db8e249f4257429c5073437fed9af9ce5847da', "data-theme": this.theme }, index.h("style", { key: 'cc4b8ae0ac2f2422e63c5047177b5ceaa0cbee12', innerHTML: inputStyles.getInputCss(this.state, this.disabled, this.readonly, this.compact, this._hasStart, this._hasEnd, false) }), index.h("div", { key: '5fa3a0b0b0e3e3722e6e6c277a4030f87c860887', class: "root" }, !this.hideLabel && this.label && (index.h("div", { key: 'a9788aef44d038dd81e984d0d2f367b9bc271c4b', class: "label-row" }, index.h("label", { key: 'b89f5752b5b5c83bd0c7d3bf50da1153175ed184', class: "label", htmlFor: inputId }, this.label, this.required && index.h("span", { key: '0a68539ab69334a622c1e855f5652ffec4586858', class: "required", "aria-hidden": "true" }, " *")), index.h("slot", { key: '257b7b9a1a5006aed1fa50361aa377b729d23fb0', name: "label-after" }))), index.h("div", { key: '10f19d4c4aa0d537b78f01e77a85b4012eaaea78', class: "input-wrapper" }, this._hasStart && index.h("div", { key: 'f101b6841ef93c65bd3b75df0961da5a27ee5216', class: "slot-start" }, index.h("slot", { key: 'cd026e6eb3aeff153159bf095341d9cdee7496f4', name: "start" })), index.h("input", { key: 'fa6eff05efb74a50e2cfc96680ab2527ec2342c3', id: inputId, class: "input", type: "text", name: this.name || undefined, value: this.value, placeholder: this.placeholder || undefined, disabled: this.disabled, required: this.required, readOnly: this.readonly, maxLength: this.maxLength, minLength: this.minLength, spellcheck: this.spellCheck, autocomplete: this.autoComplete, "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, onFocus: this.handleFocus }), this._hasEnd && index.h("div", { key: 'dbd131e34115c3c0417f580fb6780c40ed7c8502', class: "slot-end" }, index.h("slot", { key: 'd3a97fdf8238adc46748b9ab5b3d17ee3a1c7ff4', name: "end" }))), !this.message && this.description && (index.h("p", { key: '2d746575c4b1d84402ac6f68d5ba27769b0fdc3c', id: descId, class: "description" }, this.description)), this.message && (index.h("p", { key: '0fbfd46577a7dbb26138646e1b9360e396694986', id: msgId, class: "message" }, this.message)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }