@diwacopilot/components 1.0.0

package/dist/cjs/input-styles-bac68ebc.js

@@ -0,0 +1,224 @@
+'use strict';
+
+const styles = require('./styles-6342300d.js');
+
+/**
+ * Returns the shared Shadow DOM CSS for all diwa-input-* components.
+ *
+ * NOTE: Border and background live on .input-wrapper so start/end slot content
+ * shares the same bordered box as the native input. This also prevents Tailwind
+ * v4 preflight from stripping padding set directly on :host.
+ */
+const getInputCss = (state, _disabled, _readonly, compact, hasStart, hasEnd, hasSuffix) => {
+    const borderColor = state === 'error'
+        ? 'var(--diwa-notification-error)'
+        : state === 'success'
+            ? 'var(--diwa-notification-success)'
+            : 'var(--diwa-input-border)';
+    const messageColor = state === 'error'
+        ? 'var(--diwa-notification-error)'
+        : state === 'success'
+            ? 'var(--diwa-notification-success)'
+            : 'var(--diwa-text-secondary)';
+    const inputHeight = compact
+        ? 'var(--diwa-touch-target-min-size-compact, 32px)'
+        : 'var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px))';
+    const paddingLeft = hasStart ? '4px' : 'var(--diwa-input-padding-x, 12px)';
+    const paddingRight = (hasEnd || hasSuffix) ? '4px' : 'var(--diwa-input-padding-x, 12px)';
+    return `
+  /* ── Host ──────────────────────────────────────────────────────────── */
+
+  :host {
+    display: block;
+    font-family: var(--diwa-font-family-base);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Root layout ────────────────────────────────────────────────────── */
+
+  .root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--diwa-space-2);
+  }
+
+  /* ── Label row ──────────────────────────────────────────────────────── */
+
+  .label-row {
+    display: flex;
+    align-items: baseline;
+    gap: var(--diwa-space-1);
+  }
+
+  .label {
+    display: block;
+    font-size: var(--diwa-font-size-sm);
+    font-weight: var(--diwa-font-weight-semibold);
+    color: var(--diwa-text-secondary);
+    line-height: var(--diwa-line-height-normal);
+    cursor: default;
+  }
+
+  .required {
+    color: var(--diwa-notification-error);
+    font-weight: var(--diwa-font-weight-semibold);
+  }
+
+  /* ── Input wrapper (owns border + background) ───────────────────────── */
+
+  .input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: ${inputHeight};
+    background: var(--diwa-input-bg, var(--diwa-bg-input));
+    border: var(--diwa-border-width-thin) solid ${borderColor};
+    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));
+    box-sizing: border-box;
+    overflow: hidden;
+    transition: border-color var(--diwa-transition-fast), background var(--diwa-transition-fast), box-shadow var(--diwa-transition-fast);
+  }
+
+  ${styles.getHoverCapableStyle('.input-wrapper:not(:has(input:disabled)):not(:has(input[readonly]))', `border-color: ${state === 'none' ? 'var(--diwa-border-hover)' : borderColor};`)}
+
+  /* Focus — border and ring become visible on keyboard navigation */
+  .input-wrapper:focus-within {
+    border-color: var(--diwa-border-focus);
+    box-shadow: 0 0 0 var(--diwa-focus-ring-width) var(--diwa-border-focus);
+  }
+
+  /* Disabled */
+  .input-wrapper:has(input:disabled) {
+    opacity: var(--diwa-opacity-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Read-only */
+  .input-wrapper:has(input[readonly]) {
+    background: var(--diwa-bg-surface);
+    border-style: dashed;
+    cursor: default;
+  }
+
+  /* ── Start / End slot containers ────────────────────────────────────── */
+
+  .slot-start {
+    display: flex;
+    align-items: center;
+    padding-left: var(--diwa-input-padding-x, 12px);
+    color: var(--diwa-text-secondary);
+    flex-shrink: 0;
+  }
+
+  .slot-end {
+    display: flex;
+    align-items: center;
+    padding-right: var(--diwa-input-padding-x, 12px);
+    color: var(--diwa-text-secondary);
+    flex-shrink: 0;
+  }
+
+  /* ── Native input ───────────────────────────────────────────────────── */
+
+  input.input {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0 ${paddingRight} 0 ${paddingLeft};
+    background: transparent;
+    border: none;
+    box-sizing: border-box;
+    appearance: none;
+    -webkit-appearance: none;
+    outline: none;
+    margin: 0;
+    font-family: inherit;
+    font-size: var(--diwa-font-size-base);
+    color: var(--diwa-text-primary);
+    line-height: var(--diwa-line-height-normal);
+  }
+
+  input.input::placeholder {
+    color: var(--diwa-text-disabled);
+    opacity: 1;
+  }
+
+  /* Number — hide native spinners */
+  input.input[type="number"]::-webkit-inner-spin-button,
+  input.input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input.input[type="number"] { -moz-appearance: textfield; }
+
+  /* Search — hide browser-native clear button */
+  input.input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  /* Date / time — hide native picker icon in webkit */
+  input.input[type="date"]::-webkit-calendar-picker-indicator,
+  input.input[type="time"]::-webkit-calendar-picker-indicator,
+  input.input[type="month"]::-webkit-calendar-picker-indicator,
+  input.input[type="week"]::-webkit-calendar-picker-indicator {
+    opacity: 0.5;
+    cursor: pointer;
+  }
+
+  /* ── Suffix button (password toggle / search clear) ─────────────────── */
+
+  .suffix-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    height: 100%;
+    min-width: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-touch-target-min-size, 44px)'};
+    padding: 0 var(--diwa-space-3);
+    background: none;
+    border: none;
+    margin: 0;
+    cursor: pointer;
+    color: var(--diwa-text-secondary);
+    line-height: 0;
+    transition: color var(--diwa-transition-fast);
+  }
+
+  ${styles.getHoverCapableStyle('.suffix-btn', 'color: var(--diwa-text-primary);')}
+
+  .suffix-btn:focus-visible {
+    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);
+    outline-offset: -2px;
+  }
+
+  /* ── Description ────────────────────────────────────────────────── */
+
+  .description {
+    font-size: var(--diwa-font-size-sm);
+    color: var(--diwa-text-secondary);
+    margin: 0;
+    line-height: var(--diwa-line-height-normal);
+  }
+
+  /* ── Message (state-coloured) ───────────────────────────────────── */
+
+  .message {
+    font-size: var(--diwa-font-size-sm);
+    color: ${messageColor};
+    margin: 0;
+    line-height: var(--diwa-line-height-normal);
+  }
+
+  ${styles.getReducedMotionStyle('.input-wrapper', '.suffix-btn')}
+`;
+};
+
+exports.getInputCss = getInputCss;
+
+//# sourceMappingURL=input-styles-bac68ebc.js.map

package/dist/cjs/input-styles-bac68ebc.js.map

@@ -0,0 +1 @@
+{"file":"input-styles-bac68ebc.js","mappings":";;;;AAGA;;;;;;;MAOa,WAAW,GAAG,CACzB,KAAsB,EACtB,SAAkB,EAClB,SAAkB,EAClB,OAAgB,EAChB,QAAiB,EACjB,MAAe,EACf,SAAkB;IAElB,MAAM,WAAW,GACf,KAAK,KAAK,OAAO;UACb,gCAAgC;UAChC,KAAK,KAAK,SAAS;cACjB,kCAAkC;cAClC,0BAA0B,CAAC;IAEnC,MAAM,YAAY,GAChB,KAAK,KAAK,OAAO;UACb,gCAAgC;UAChC,KAAK,KAAK,SAAS;cACjB,kCAAkC;cAClC,4BAA4B,CAAC;IAErC,MAAM,WAAW,GAAG,OAAO;UACvB,iDAAiD;UACjD,mEAAmE,CAAC;IACxE,MAAM,WAAW,GAAG,QAAQ,GAAG,KAAK,GAAG,mCAAmC,CAAC;IAC3E,MAAM,YAAY,GAAG,CAAC,MAAM,IAAI,SAAS,IAAI,KAAK,GAAG,mCAAmC,CAAC;IAEzF,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiDK,WAAW;;kDAEyB,WAAW;;;;;;;IAOzDA,2BAAoB,CACpB,qEAAqE,EACrE,iBAAiB,KAAK,KAAK,MAAM,GAAG,0BAA0B,GAAG,WAAW,GAAG,CAChF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8Cc,YAAY,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkD7B,OAAO,GAAG,iDAAiD,GAAG,yCAAyC;;;;;;;;;;;IAWpHA,2BAAoB,CAAC,aAAa,EAAE,kCAAkC,CAAC;;;;;;;;;;;;;;;;;;;;aAoB9D,YAAY;;;;;IAKrBC,4BAAqB,CAAC,gBAAgB,EAAE,aAAa,CAAC;CACzD,CAAC;AACF;;;;","names":["getHoverCapableStyle","getReducedMotionStyle"],"sources":["src/components/diwa-input/input-styles.ts"],"sourcesContent":["import type { InputFieldState } from './types';\nimport { getHoverCapableStyle, getReducedMotionStyle } from '../../utils/styles';\n\n/**\n * Returns the shared Shadow DOM CSS for all diwa-input-* components.\n *\n * NOTE: Border and background live on .input-wrapper so start/end slot content\n * shares the same bordered box as the native input. This also prevents Tailwind\n * v4 preflight from stripping padding set directly on :host.\n */\nexport const getInputCss = (\n  state: InputFieldState,\n  _disabled: boolean,\n  _readonly: boolean,\n  compact: boolean,\n  hasStart: boolean,\n  hasEnd: boolean,\n  hasSuffix: boolean,\n): string => {\n  const borderColor =\n    state === 'error'\n      ? 'var(--diwa-notification-error)'\n      : state === 'success'\n        ? 'var(--diwa-notification-success)'\n        : 'var(--diwa-input-border)';\n\n  const messageColor =\n    state === 'error'\n      ? 'var(--diwa-notification-error)'\n      : state === 'success'\n        ? 'var(--diwa-notification-success)'\n        : 'var(--diwa-text-secondary)';\n\n  const inputHeight = compact\n    ? 'var(--diwa-touch-target-min-size-compact, 32px)'\n    : 'var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px))';\n  const paddingLeft = hasStart ? '4px' : 'var(--diwa-input-padding-x, 12px)';\n  const paddingRight = (hasEnd || hasSuffix) ? '4px' : 'var(--diwa-input-padding-x, 12px)';\n\n  return `\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Root layout ────────────────────────────────────────────────────── */\n\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: var(--diwa-space-2);\n  }\n\n  /* ── Label row ──────────────────────────────────────────────────────── */\n\n  .label-row {\n    display: flex;\n    align-items: baseline;\n    gap: var(--diwa-space-1);\n  }\n\n  .label {\n    display: block;\n    font-size: var(--diwa-font-size-sm);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-secondary);\n    line-height: var(--diwa-line-height-normal);\n    cursor: default;\n  }\n\n  .required {\n    color: var(--diwa-notification-error);\n    font-weight: var(--diwa-font-weight-semibold);\n  }\n\n  /* ── Input wrapper (owns border + background) ───────────────────────── */\n\n  .input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: ${inputHeight};\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\n    border: var(--diwa-border-width-thin) solid ${borderColor};\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\n    box-sizing: border-box;\n    overflow: hidden;\n    transition: border-color var(--diwa-transition-fast), background var(--diwa-transition-fast), box-shadow var(--diwa-transition-fast);\n  }\n\n  ${getHoverCapableStyle(\n    '.input-wrapper:not(:has(input:disabled)):not(:has(input[readonly]))',\n    `border-color: ${state === 'none' ? 'var(--diwa-border-hover)' : borderColor};`,\n  )}\n\n  /* Focus — border and ring become visible on keyboard navigation */\n  .input-wrapper:focus-within {\n    border-color: var(--diwa-border-focus);\n    box-shadow: 0 0 0 var(--diwa-focus-ring-width) var(--diwa-border-focus);\n  }\n\n  /* Disabled */\n  .input-wrapper:has(input:disabled) {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* Read-only */\n  .input-wrapper:has(input[readonly]) {\n    background: var(--diwa-bg-surface);\n    border-style: dashed;\n    cursor: default;\n  }\n\n  /* ── Start / End slot containers ────────────────────────────────────── */\n\n  .slot-start {\n    display: flex;\n    align-items: center;\n    padding-left: var(--diwa-input-padding-x, 12px);\n    color: var(--diwa-text-secondary);\n    flex-shrink: 0;\n  }\n\n  .slot-end {\n    display: flex;\n    align-items: center;\n    padding-right: var(--diwa-input-padding-x, 12px);\n    color: var(--diwa-text-secondary);\n    flex-shrink: 0;\n  }\n\n  /* ── Native input ───────────────────────────────────────────────────── */\n\n  input.input {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\n    padding: 0 ${paddingRight} 0 ${paddingLeft};\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    appearance: none;\n    -webkit-appearance: none;\n    outline: none;\n    margin: 0;\n    font-family: inherit;\n    font-size: var(--diwa-font-size-base);\n    color: var(--diwa-text-primary);\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  input.input::placeholder {\n    color: var(--diwa-text-disabled);\n    opacity: 1;\n  }\n\n  /* Number — hide native spinners */\n  input.input[type=\"number\"]::-webkit-inner-spin-button,\n  input.input[type=\"number\"]::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  input.input[type=\"number\"] { -moz-appearance: textfield; }\n\n  /* Search — hide browser-native clear button */\n  input.input[type=\"search\"]::-webkit-search-cancel-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  /* Date / time — hide native picker icon in webkit */\n  input.input[type=\"date\"]::-webkit-calendar-picker-indicator,\n  input.input[type=\"time\"]::-webkit-calendar-picker-indicator,\n  input.input[type=\"month\"]::-webkit-calendar-picker-indicator,\n  input.input[type=\"week\"]::-webkit-calendar-picker-indicator {\n    opacity: 0.5;\n    cursor: pointer;\n  }\n\n  /* ── Suffix button (password toggle / search clear) ─────────────────── */\n\n  .suffix-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    height: 100%;\n    min-width: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-touch-target-min-size, 44px)'};\n    padding: 0 var(--diwa-space-3);\n    background: none;\n    border: none;\n    margin: 0;\n    cursor: pointer;\n    color: var(--diwa-text-secondary);\n    line-height: 0;\n    transition: color var(--diwa-transition-fast);\n  }\n\n  ${getHoverCapableStyle('.suffix-btn', 'color: var(--diwa-text-primary);')}\n\n  .suffix-btn:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: -2px;\n  }\n\n  /* ── Description ────────────────────────────────────────────────── */\n\n  .description {\n    font-size: var(--diwa-font-size-sm);\n    color: var(--diwa-text-secondary);\n    margin: 0;\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  /* ── Message (state-coloured) ───────────────────────────────────── */\n\n  .message {\n    font-size: var(--diwa-font-size-sm);\n    color: ${messageColor};\n    margin: 0;\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  ${getReducedMotionStyle('.input-wrapper', '.suffix-btn')}\n`;\n};\n"],"version":3}

package/dist/cjs/loader-circle-938f782b.js

@@ -0,0 +1,14 @@
+'use strict';
+
+/**
+ * @license lucide v0.577.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const LoaderCircle = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }]];
+
+exports.LoaderCircle = LoaderCircle;
+
+//# sourceMappingURL=loader-circle-938f782b.js.map

package/dist/cjs/loader-circle-938f782b.js.map

@@ -0,0 +1 @@
+{"file":"loader-circle-938f782b.js","mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACK,MAAC,YAAY,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,6BAA6B,EAAE,CAAC;;;;","names":[],"sources":["../node_modules/lucide/dist/esm/icons/loader-circle.js"],"sourcesContent":["/**\n * @license lucide v0.577.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nconst LoaderCircle = [[\"path\", { d: \"M21 12a9 9 0 1 1-6.219-8.56\" }]];\n\nexport { LoaderCircle as default };\n//# sourceMappingURL=loader-circle.js.map\n"],"version":3}

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-d665fd57.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  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);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;
+
+//# sourceMappingURL=loader.cjs.js.map

package/dist/cjs/loader.cjs.js.map

@@ -0,0 +1 @@
+{"file":"loader.cjs.js","mappings":";;;;;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS,CAAC;AACtD,EAAE,MAAMA,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D;;;;;","names":["globalScripts","bootstrapLazy"],"sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"version":3}

package/dist/cjs/styles-6342300d.js

@@ -0,0 +1,77 @@
+'use strict';
+
+/**
+ * src/utils/styles.ts
+ * ===================
+ * Shared CSS-in-JS utilities reused across all Diwa web components.
+ *
+ * Mirrors the PDS shared style-building helper pattern found in:
+ *   packages/components/src/styles/
+ *
+ * Every exported function returns a CSS string fragment.
+ * Compose them inside a component's getComponentCss() function.
+ */
+/**
+ * Returns standard focus-visible ring CSS for the given inner selector.
+ *
+ * Used inside Shadow DOM <style> tags where :host selectors are scoped.
+ * Provides both the :host(:focus-visible) path (keyboard delegation via
+ * shadow.delegatesFocus) and the direct :focus-visible path on the element.
+ *
+ * WCAG 2.4.7 (AA) — all interactive elements must have a visible focus indicator.
+ * WCAG 2.4.11 (AA 2.2) — focus must be at least 2px with ≥3:1 contrast ratio.
+ *
+ * @param selector — CSS selector for the inner interactive element (e.g. '.inner')
+ */
+const getFocusStyle = (selector) => `
+  :host(:focus-visible) ${selector},
+  ${selector}:focus-visible {
+    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);
+    outline-offset: var(--diwa-focus-ring-offset);
+  }
+
+  ${selector}:focus:not(:focus-visible) {
+    outline: none;
+  }
+`;
+/**
+ * Returns a hover rule that only applies on pointer-capable devices.
+ *
+ * Prevents hover-only visuals from leaking onto touch-only devices where
+ * :hover can get "stuck" after tap.
+ */
+const getHoverCapableStyle = (selector, declarations) => `
+  @media (hover: hover) and (pointer: fine) {
+    ${selector}:hover {
+      ${declarations}
+    }
+  }
+`;
+/**
+ * Returns a @media (prefers-reduced-motion) override block for the given selectors.
+ *
+ * WCAG 2.3.3 (AAA) / WCAG 2.2.2 (AA): each animated component must include its
+ * own reduced-motion block because the global reset in app.css cannot cross the
+ * Shadow DOM boundary.
+ *
+ * @param selectors — one or more CSS selectors whose transitions/animations should
+ *                    be suppressed when the user requests reduced motion.
+ */
+const getReducedMotionStyle = (...selectors) => {
+    const selList = selectors.join(', ');
+    return `
+  @media (prefers-reduced-motion: reduce) {
+    ${selList} {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+`;
+};
+
+exports.getFocusStyle = getFocusStyle;
+exports.getHoverCapableStyle = getHoverCapableStyle;
+exports.getReducedMotionStyle = getReducedMotionStyle;
+
+//# sourceMappingURL=styles-6342300d.js.map

package/dist/cjs/styles-6342300d.js.map

@@ -0,0 +1 @@
+{"file":"styles-6342300d.js","mappings":";;AAAA;;;;;;;;;;;AAeA;;;;;;;;;;;;MAYa,aAAa,GAAG,CAAC,QAAgB,KAAa;0BACjC,QAAQ;IAC9B,QAAQ;;;;;IAKR,QAAQ;;;EAGV;AAEF;;;;;;MAMa,oBAAoB,GAAG,CAAC,QAAgB,EAAE,YAAoB,KAAa;;MAElF,QAAQ;QACN,YAAY;;;EAGlB;AAEF;;;;;;;;;;MAUa,qBAAqB,GAAG,CAAC,GAAG,SAAmB;IAC1D,MAAM,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO;;MAEH,OAAO;;;;;;CAMZ,CAAC;AACF;;;;;;","names":[],"sources":["src/utils/styles.ts"],"sourcesContent":["/**\r\n * src/utils/styles.ts\r\n * ===================\r\n * Shared CSS-in-JS utilities reused across all Diwa web components.\r\n *\r\n * Mirrors the PDS shared style-building helper pattern found in:\r\n *   packages/components/src/styles/\r\n *\r\n * Every exported function returns a CSS string fragment.\r\n * Compose them inside a component's getComponentCss() function.\r\n */\r\n\r\n/** Theme identifiers — match the [data-theme] values used in app.css. */\r\nexport type Theme = 'light' | 'dark';\r\n\r\n/**\r\n * Returns standard focus-visible ring CSS for the given inner selector.\r\n *\r\n * Used inside Shadow DOM <style> tags where :host selectors are scoped.\r\n * Provides both the :host(:focus-visible) path (keyboard delegation via\r\n * shadow.delegatesFocus) and the direct :focus-visible path on the element.\r\n *\r\n * WCAG 2.4.7 (AA) — all interactive elements must have a visible focus indicator.\r\n * WCAG 2.4.11 (AA 2.2) — focus must be at least 2px with ≥3:1 contrast ratio.\r\n *\r\n * @param selector — CSS selector for the inner interactive element (e.g. '.inner')\r\n */\r\nexport const getFocusStyle = (selector: string): string => `\n  :host(:focus-visible) ${selector},\n  ${selector}:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: var(--diwa-focus-ring-offset);\n  }\n\n  ${selector}:focus:not(:focus-visible) {\n    outline: none;\n  }\n`;\n\n/**\n * Returns a hover rule that only applies on pointer-capable devices.\n *\n * Prevents hover-only visuals from leaking onto touch-only devices where\n * :hover can get \"stuck\" after tap.\n */\nexport const getHoverCapableStyle = (selector: string, declarations: string): string => `\n  @media (hover: hover) and (pointer: fine) {\n    ${selector}:hover {\n      ${declarations}\n    }\n  }\n`;\n\r\n/**\r\n * Returns a @media (prefers-reduced-motion) override block for the given selectors.\r\n *\r\n * WCAG 2.3.3 (AAA) / WCAG 2.2.2 (AA): each animated component must include its\r\n * own reduced-motion block because the global reset in app.css cannot cross the\r\n * Shadow DOM boundary.\r\n *\r\n * @param selectors — one or more CSS selectors whose transitions/animations should\r\n *                    be suppressed when the user requests reduced motion.\r\n */\r\nexport const getReducedMotionStyle = (...selectors: string[]): string => {\r\n  const selList = selectors.join(', ');\r\n  return `\r\n  @media (prefers-reduced-motion: reduce) {\r\n    ${selList} {\r\n      animation-duration: 0.01ms !important;\r\n      animation-iteration-count: 1 !important;\r\n      transition-duration: 0.01ms !important;\r\n    }\r\n  }\r\n`;\r\n};\r\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,68 @@
+{
+  "entries": [
+    "components/diwa-accordion/diwa-accordion.js",
+    "components/diwa-badge/diwa-badge.js",
+    "components/diwa-button/diwa-button.js",
+    "components/diwa-button-pure/diwa-button-pure.js",
+    "components/diwa-checkbox/diwa-checkbox.js",
+    "components/diwa-divider/diwa-divider.js",
+    "components/diwa-flyout/diwa-flyout.js",
+    "components/diwa-icon/diwa-icon.js",
+    "components/diwa-inline-notification/diwa-inline-notification.js",
+    "components/diwa-input/diwa-input.js",
+    "components/diwa-input-date/diwa-input-date.js",
+    "components/diwa-input-email/diwa-input-email.js",
+    "components/diwa-input-month/diwa-input-month.js",
+    "components/diwa-input-number/diwa-input-number.js",
+    "components/diwa-input-password/diwa-input-password.js",
+    "components/diwa-input-search/diwa-input-search.js",
+    "components/diwa-input-tel/diwa-input-tel.js",
+    "components/diwa-input-text/diwa-input-text.js",
+    "components/diwa-input-time/diwa-input-time.js",
+    "components/diwa-input-url/diwa-input-url.js",
+    "components/diwa-input-week/diwa-input-week.js",
+    "components/diwa-link/diwa-link.js",
+    "components/diwa-link-pure/diwa-link-pure.js",
+    "components/diwa-modal/diwa-modal.js",
+    "components/diwa-multi-select/diwa-multi-select.js",
+    "components/diwa-multi-select-option/diwa-multi-select-option.js",
+    "components/diwa-pagination/diwa-pagination.js",
+    "components/diwa-pin-code/diwa-pin-code.js",
+    "components/diwa-popover/diwa-popover.js",
+    "components/diwa-radio-group/diwa-radio-group.js",
+    "components/diwa-radio-group-item/diwa-radio-group-item.js",
+    "components/diwa-scroller/diwa-scroller.js",
+    "components/diwa-segmented-control/diwa-segmented-control.js",
+    "components/diwa-segmented-control-item/diwa-segmented-control-item.js",
+    "components/diwa-select/diwa-select.js",
+    "components/diwa-select-option/diwa-select-option.js",
+    "components/diwa-spinner/diwa-spinner.js",
+    "components/diwa-stepper-horizontal/diwa-stepper-horizontal.js",
+    "components/diwa-stepper-horizontal-item/diwa-stepper-horizontal-item.js",
+    "components/diwa-switch/diwa-switch.js",
+    "components/diwa-table/diwa-table.js",
+    "components/diwa-table-body/diwa-table-body.js",
+    "components/diwa-table-cell/diwa-table-cell.js",
+    "components/diwa-table-head/diwa-table-head.js",
+    "components/diwa-table-head-cell/diwa-table-head-cell.js",
+    "components/diwa-table-row/diwa-table-row.js",
+    "components/diwa-tabs/diwa-tabs.js",
+    "components/diwa-tabs-bar/diwa-tabs-bar.js",
+    "components/diwa-tabs-item/diwa-tabs-item.js",
+    "components/diwa-tag/diwa-tag.js",
+    "components/diwa-tag-dismissible/diwa-tag-dismissible.js",
+    "components/diwa-text/diwa-text.js",
+    "components/diwa-text-list/diwa-text-list.js",
+    "components/diwa-text-list-item/diwa-text-list-item.js",
+    "components/diwa-textarea/diwa-textarea.js",
+    "components/diwa-toast/diwa-toast.js",
+    "components/diwa-toast-item/diwa-toast-item.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.23.2",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,158 @@
+/**
+ * diwa-accordion-styles.ts
+ * =========================
+ * CSS-in-JS styles for <diwa-accordion>.
+ *
+ * Animation technique: CSS `grid-template-rows: 0fr ↔ 1fr` — smoothly
+ * collapses/expands the content without requiring fixed heights.
+ *
+ * The inner wrapper uses `visibility: hidden` when closed so keyboard focus
+ * cannot reach interactive content inside a collapsed panel.
+ */
+import { getFocusStyle, getReducedMotionStyle } from "../../utils/styles";
+export const getComponentCss = () => `
+
+  /* ── Host ──────────────────────────────────────────────────────────── */
+
+  :host {
+    display: block;
+    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);
+    outline: none;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Heading wrapper (h2…h6) ─────────────────────────────────────── */
+
+  .heading {
+    margin: 0;
+    padding: 0;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  /* ── Toggle button ───────────────────────────────────────────────── */
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--diwa-space-9);
+    width: 100%;
+    background: transparent;
+    border: none;
+    padding: var(--diwa-space-4) var(--diwa-space-2);
+    margin: 0;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--diwa-font-size-lg, 16px);
+    font-weight: var(--diwa-font-weight-semibold);
+    line-height: 1.3;
+    color: var(--diwa-text-primary);
+    text-align: start;
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-font-smoothing: antialiased;
+    outline: none;
+    border-radius: var(--diwa-radius-sm);
+  }
+
+  :host([compact]) .header {
+    padding: var(--diwa-space-0-5) var(--diwa-space-1);
+    font-size: var(--diwa-font-size-base);
+    font-weight: var(--diwa-font-weight-medium);
+  }
+
+  /* ── Focus ring ─────────────────────────────────────────────────── */
+
+  ${getFocusStyle('.header')}
+
+  /* ── Hover / active ─────────────────────────────────────────────── */
+
+  .header:hover {
+    background-color: var(--diwa-bg-hover);
+  }
+
+  .header:active {
+    background-color: var(--diwa-bg-active);
+  }
+
+  /* Heading text sits above ::before */
+  .heading-text {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ── Chevron container ──────────────────────────────────────────── */
+
+  /* Wrap the icon so we can apply the rotation transform to a real DOM
+     element rather than to the shadow host of diwa-icon itself. */
+  .chevron-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+    transition: transform var(--diwa-transition-slow, 0.25s ease);
+  }
+
+  :host([open]) .chevron-container {
+    transform: rotate(180deg);
+  }
+
+  /* ── Collapsible panel ──────────────────────────────────────────── */
+
+  /* grid trick: 0fr collapses the row to zero height without display:none,
+     so CSS transitions can animate smoothly between 0fr and 1fr. */
+  .collapsible {
+    display: grid;
+    grid-template-rows: 0fr;
+    visibility: hidden;
+    transition:
+      grid-template-rows var(--diwa-transition-slow, 0.25s ease),
+      visibility 0s linear var(--diwa-transition-slow, 0.25s);
+  }
+
+  :host([open]) .collapsible {
+    grid-template-rows: 1fr;
+    visibility: inherit;
+    transition:
+      grid-template-rows var(--diwa-transition-slow, 0.25s ease),
+      visibility 0s;
+  }
+
+  /* Inner must have overflow: hidden and min-height: 0 for the grid trick.
+     Negative margin/padding ensures focus rings from slotted content are
+     fully visible (matching PDS accordion inner div treatment). */
+  .inner {
+    overflow: hidden;
+    min-height: 0;
+    padding: var(--diwa-space-1);
+    margin: calc(-1 * var(--diwa-space-1));
+  }
+
+  /* Switch to overflow: visible when panel is open so slotted content
+     like dropdowns and select menus are not clipped. Use an animation
+     to keep overflow hidden for the duration of the closing transition. */
+  :host([open]) .inner {
+    overflow: visible;
+  }
+
+  .content {
+    padding-bottom: var(--diwa-space-9);
+    padding-inline: var(--diwa-space-2);
+  }
+
+  :host([compact]) .content {
+    padding-bottom: var(--diwa-space-5);
+    padding-inline: var(--diwa-space-1);
+  }
+
+  /* ── Reduced motion ─────────────────────────────────────────────── */
+
+  ${getReducedMotionStyle('.chevron-container', '.collapsible', '.inner')}
+`;
+//# sourceMappingURL=diwa-accordion-styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diwa-accordion-styles.js","sourceRoot":"","sources":["../../../src/components/diwa-accordion/diwa-accordion-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE1E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAyDzC,aAAa,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsFxB,qBAAqB,CAAC,oBAAoB,EAAE,cAAc,EAAE,QAAQ,CAAC;CACxE,CAAC","sourcesContent":["/**\r\n * diwa-accordion-styles.ts\r\n * =========================\r\n * CSS-in-JS styles for <diwa-accordion>.\r\n *\r\n * Animation technique: CSS `grid-template-rows: 0fr ↔ 1fr` — smoothly\r\n * collapses/expands the content without requiring fixed heights.\r\n *\r\n * The inner wrapper uses `visibility: hidden` when closed so keyboard focus\r\n * cannot reach interactive content inside a collapsed panel.\r\n */\r\n\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n\r\n  /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n  :host {\r\n    display: block;\r\n    border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n    outline: none;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  /* ── Heading wrapper (h2…h6) ─────────────────────────────────────── */\r\n\r\n  .heading {\r\n    margin: 0;\r\n    padding: 0;\r\n    font-size: inherit;\r\n    font-weight: inherit;\r\n  }\r\n\r\n  /* ── Toggle button ───────────────────────────────────────────────── */\r\n\r\n  .header {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: var(--diwa-space-9);\r\n    width: 100%;\r\n    background: transparent;\r\n    border: none;\r\n    padding: var(--diwa-space-4) var(--diwa-space-2);\r\n    margin: 0;\r\n    cursor: pointer;\r\n    font-family: inherit;\r\n    font-size: var(--diwa-font-size-lg, 16px);\r\n    font-weight: var(--diwa-font-weight-semibold);\r\n    line-height: 1.3;\r\n    color: var(--diwa-text-primary);\r\n    text-align: start;\r\n    -webkit-appearance: none;\r\n    appearance: none;\r\n    -webkit-font-smoothing: antialiased;\r\n    outline: none;\r\n    border-radius: var(--diwa-radius-sm);\r\n  }\r\n\r\n  :host([compact]) .header {\r\n    padding: var(--diwa-space-0-5) var(--diwa-space-1);\r\n    font-size: var(--diwa-font-size-base);\r\n    font-weight: var(--diwa-font-weight-medium);\r\n  }\r\n\r\n  /* ── Focus ring ─────────────────────────────────────────────────── */\r\n\r\n  ${getFocusStyle('.header')}\r\n\r\n  /* ── Hover / active ─────────────────────────────────────────────── */\r\n\r\n  .header:hover {\r\n    background-color: var(--diwa-bg-hover);\r\n  }\r\n\r\n  .header:active {\r\n    background-color: var(--diwa-bg-active);\r\n  }\r\n\r\n  /* Heading text sits above ::before */\r\n  .heading-text {\r\n    position: relative;\r\n    flex: 1;\r\n    min-width: 0;\r\n  }\r\n\r\n  /* ── Chevron container ──────────────────────────────────────────── */\r\n\r\n  /* Wrap the icon so we can apply the rotation transform to a real DOM\r\n     element rather than to the shadow host of diwa-icon itself. */\r\n  .chevron-container {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    position: relative;\r\n    transition: transform var(--diwa-transition-slow, 0.25s ease);\r\n  }\r\n\r\n  :host([open]) .chevron-container {\r\n    transform: rotate(180deg);\r\n  }\r\n\r\n  /* ── Collapsible panel ──────────────────────────────────────────── */\r\n\r\n  /* grid trick: 0fr collapses the row to zero height without display:none,\r\n     so CSS transitions can animate smoothly between 0fr and 1fr. */\r\n  .collapsible {\r\n    display: grid;\r\n    grid-template-rows: 0fr;\r\n    visibility: hidden;\r\n    transition:\r\n      grid-template-rows var(--diwa-transition-slow, 0.25s ease),\r\n      visibility 0s linear var(--diwa-transition-slow, 0.25s);\r\n  }\r\n\r\n  :host([open]) .collapsible {\r\n    grid-template-rows: 1fr;\r\n    visibility: inherit;\r\n    transition:\r\n      grid-template-rows var(--diwa-transition-slow, 0.25s ease),\r\n      visibility 0s;\r\n  }\r\n\r\n  /* Inner must have overflow: hidden and min-height: 0 for the grid trick.\r\n     Negative margin/padding ensures focus rings from slotted content are\r\n     fully visible (matching PDS accordion inner div treatment). */\r\n  .inner {\r\n    overflow: hidden;\r\n    min-height: 0;\r\n    padding: var(--diwa-space-1);\r\n    margin: calc(-1 * var(--diwa-space-1));\r\n  }\r\n\r\n  /* Switch to overflow: visible when panel is open so slotted content\r\n     like dropdowns and select menus are not clipped. Use an animation\r\n     to keep overflow hidden for the duration of the closing transition. */\r\n  :host([open]) .inner {\r\n    overflow: visible;\r\n  }\r\n\r\n  .content {\r\n    padding-bottom: var(--diwa-space-9);\r\n    padding-inline: var(--diwa-space-2);\r\n  }\r\n\r\n  :host([compact]) .content {\r\n    padding-bottom: var(--diwa-space-5);\r\n    padding-inline: var(--diwa-space-1);\r\n  }\r\n\r\n  /* ── Reduced motion ─────────────────────────────────────────────── */\r\n\r\n  ${getReducedMotionStyle('.chevron-container', '.collapsible', '.inner')}\r\n`;\r\n"]}