npm - @diwacopilot/components - Versions diffs - 1.1.1 → 1.2.1 - Mend

@diwacopilot/components 1.1.1 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (944) hide show

package/dist-custom-elements/p-DzqnTNg7.js ADDED Viewed

@@ -0,0 +1 @@

+ import{t as n,p as e,H as i,h as s,a as r}from"./index.js";import{a as t}from"./p-C8h0Vfqp.js";import{L as a}from"./p-C2RYv3Oc.js";var o;const d=(null!==(o=a)&&void 0!==o?o:[]).map((([n,e])=>`<${n} ${Object.entries(e).map((([n,e])=>`${n}="${e}"`)).join(" ")}/>`)).join(""),l=e(class extends i{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.size="md",this.theme="dark",this.label="Loading"}componentDidRender(){this.svgEl&&(this.svgEl.innerHTML=d)}render(){return s(r,{key:"5a130b11797c45cf6c3e9d1e1493f35cbef40ed6",role:"status","aria-label":this.label,"data-theme":this.theme},s("style",{key:"b1f1c14a660db1ec56afbf814c6bfc5b21e4cf24",innerHTML:`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n align-self: center;\n width: var(--diwa-spinner-size-md);\n height: var(--diwa-spinner-size-md);\n }\n\n :host([size="sm"]) {\n width: var(--diwa-spinner-size-sm);\n height: var(--diwa-spinner-size-sm);\n }\n\n :host([size="lg"]) {\n width: var(--diwa-spinner-size-lg);\n height: var(--diwa-spinner-size-lg);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n .glyph {\n display: block;\n width: 100%;\n height: 100%;\n color: var(--diwa-spinner-color, currentColor);\n animation: diwa-spinner-spin var(--diwa-spinner-duration) linear infinite;\n transform-origin: center;\n }\n\n @keyframes diwa-spinner-spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n ${t(".glyph")}\n`}),s("svg",{key:"3e30e5ce78a52ba9904f808641fda6b0a3f5131f",ref:n=>this.svgEl=n,class:"glyph","aria-hidden":"true",part:"ring",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"}))}},[1,"diwa-spinner",{size:[513],theme:[513],label:[1]}]);function h(){"undefined"!=typeof customElements&&["diwa-spinner"].forEach((e=>{"diwa-spinner"===e&&(customElements.get(n(e))||customElements.define(n(e),l))}))}h();export{l as D,h as d}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@diwacopilot/components",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "Diwa Design System - Framework-agnostic Web Components built with Stencil.js",
   "license": "MIT",
   "homepage": "https://diwacopilot.com",
@@ -58,7 +58,7 @@
     "generate": "stencil generate"
   },
   "dependencies": {
-    "@stencil/core": "~4.23.2",
+    "@stencil/core": "~4.43.3",
     "lucide": "^0.577.0"
   },
   "devDependencies": {
@@ -70,7 +70,7 @@
     "concurrently": "^9.2.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "jsdom": "^29.0.0",
+    "jsdom": "^29.0.1",
     "typescript": "^5.7.2",
     "vitest": "^4.1.0"
   },

package/dist/cjs/app-globals-3a1e7e63.js DELETED Viewed

@@ -1,7 +0,0 @@
-'use strict';
-const globalScripts = () => {};
-exports.globalScripts = globalScripts;
-//# sourceMappingURL=app-globals-3a1e7e63.js.map

package/dist/cjs/app-globals-3a1e7e63.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"app-globals-3a1e7e63.js","mappings":";;AAAY,MAAC,aAAa,GAAG,MAAM;;;;","names":[],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"version":3}

package/dist/cjs/checkbox-mark-06d56fe2.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"checkbox-mark-06d56fe2.js","mappings":";;AAAA;;;;;AAMA;MACa,YAAY,GAAG,mOAAmO;AAE/P;;;;;;MAMa,iBAAiB,GAAG,MAC/B;;;;;;;;;;;;;","names":[],"sources":["src/utils/checkbox-mark.ts"],"sourcesContent":["/**\r\n * Shared checkbox appearance helpers.\r\n * Used by diwa-checkbox and diwa-multi-select-option so both components\r\n * always render an identical checkbox box — single source of truth.\r\n */\r\n\r\n/** White checkmark: M2,6 L5,9 L10,3 on a 12×12 viewBox */\r\nexport const checkmarkSvg = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6 L5 9 L10 3' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E\")`;\r\n\r\n/**\r\n * Returns the CSS visual declarations for the checkbox box element.\r\n * Does NOT include a selector or braces — inject inside a rule body.\r\n * Does NOT include `width`, `height`, `flex-shrink`, or `margin-top`\r\n * — callers set those because they differ between components.\r\n */\r\nexport const getCheckboxBoxCss = (): string =>\r\n `border-radius: 3px;\r\n border: 1.5px solid var(--diwa-border);\r\n background-color: transparent;\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n background-size: 100%;\r\n box-sizing: border-box;\r\n transition: border-color var(--diwa-transition-fast),\r\n background-color var(--diwa-transition-fast);`;\r\n"],"version":3}

package/dist/cjs/diwa-accordion.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-accordion.entry.cjs.js","mappings":";;;;;;;AAAA;;;;;;;;;;;AAcO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAyDzCA,oBAAa,CAAC,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsFxBC,4BAAqB,CAAC,oBAAoB,EAAE,cAAc,EAAE,QAAQ,CAAC;CACxE;;ACzJD;AACA,IAAI,cAAc,GAAG,CAAC,CAAC;MA2BV,aAAa;IAJ1B;;;;;;QAWmB,QAAG,GAAG,kBAAkB,EAAE,cAAc,EAAE,CAAC;;;;;QASnC,UAAK,GAAU,MAAM,CAAC;;QAGvC,YAAO,GAAW,EAAE,CAAC;;QAGrB,eAAU,GAAwB,IAAI,CAAC;;;;;;;;QAStB,SAAI,GAAY,KAAK,CAAC;;QAGtB,YAAO,GAAY,KAAK,CAAC;;;;QAuB1C,iBAAY,GAAG;YACrB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SACxC,CAAC;KA4CH;IA/FC,IAAY,QAAQ,KAAK,OAAO,GAAG,IAAI,CAAC,GAAG,MAAM,CAAC,EAAE;IACpD,IAAY,OAAO,KAAM,OAAO,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC,EAAE;;;;IAwDtD,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,UAAyC,CAAC;QAClE,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,EAAE,CAAC;QAExC,QACEC,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EAEvCA,QAAC,UAAU,qDAAC,KAAK,EAAC,SAAS,IACzBA,qEACE,KAAK,EAAC,QAAQ,EACd,EAAE,EAAE,IAAI,CAAC,QAAQ,mBACF,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,mBACjB,IAAI,CAAC,OAAO,EAC3B,OAAO,EAAE,IAAI,CAAC,YAAY,IAE1BA,mEAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,OAAO,CAAQ,EAChDA,mEAAM,KAAK,EAAC,mBAAmB,IAC7BA,wEAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAE,QAAQ,GAAI,CAC5C,CACA,CACE,EAEbA,kEACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,QAAQ,qBACI,IAAI,CAAC,QAAQ,IAE9BA,kEAAK,KAAK,EAAC,OAAO,IAChBA,kEAAK,KAAK,EAAC,SAAS,IAClBA,oEAAQ,CACJ,CACF,CACF,CACD,EACP;KACH;;;;;;;","names":["getFocusStyle","getReducedMotionStyle","h","Host"],"sources":["src/components/diwa-accordion/diwa-accordion-styles.ts","src/components/diwa-accordion/diwa-accordion.tsx"],"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","import { Component, Element, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { AccordionHeadingTag } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-accordion-styles';\r\n\r\n/** Monotonically increasing counter to guarantee unique IDs per instance. */\r\nlet accordionCount = 0;\r\n\r\n/**\r\n * @component diwa-accordion\r\n *\r\n * A controlled, animated accordion panel. The consumer is responsible\r\n * for toggling the `open` prop in response to the `update` event —\r\n * the same controlled pattern used throughout PDS.\r\n *\r\n * Accessibility:\r\n * - Heading tag wraps the toggle button (ARIA Authoring Practices §3.1)\r\n * - Button has `aria-expanded` and `aria-controls` pointing to the panel\r\n * - Panel has `role=\"region\"` and `aria-labelledby` the button id\r\n * - `visibility: hidden` when closed keeps interactive slot content\r\n * out of the keyboard tab order\r\n *\r\n * Usage:\r\n * <diwa-accordion heading=\"What is this?\" open={false} onUpdate={e => open = e.detail.open}>\r\n * Content here.\r\n * </diwa-accordion>\r\n *\r\n * @slot default — Collapsible content rendered inside the panel.\r\n */\r\n@Component({\r\n tag: 'diwa-accordion',\r\n shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaAccordion {\r\n @Element() host!: HTMLDiwaAccordionElement;\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Instance identity\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n private readonly uid = `diwa-accordion-${++accordionCount}`;\r\n private get buttonId() { return `${this.uid}-btn`; }\r\n private get panelId() { return `${this.uid}-panel`; }\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 heading text rendered inside the toggle button. */\r\n @Prop() heading: string = '';\r\n\r\n /** Semantic heading level for the toggle button wrapper. */\r\n @Prop() headingTag: AccordionHeadingTag = 'h2';\r\n\r\n /**\r\n * Whether the accordion panel is currently open.\r\n *\r\n * This is a **controlled** prop: the component always reflects\r\n * its `open` state outward via the `update` event, but never\r\n * mutates the prop internally. The consumer must update it.\r\n */\r\n @Prop({ reflect: true }) open: boolean = false;\r\n\r\n /** Reduces padding and font size for denser UI contexts. */\r\n @Prop({ reflect: true }) compact: boolean = false;\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Events\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Emitted when the user clicks the header toggle button.\r\n *\r\n * `event.detail.open` is the **requested** next state.\r\n * The consumer must set the `open` prop accordingly:\r\n *\r\n * ```html\r\n * <diwa-accordion onUpdate={e => this.open = e.detail.open} />\r\n * ```\r\n */\r\n @Event({ bubbles: false, composed: false })\r\n update!: EventEmitter<{ open: boolean }>;\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Private helpers\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n private handleToggle = (): void => {\r\n this.update.emit({ open: !this.open });\r\n };\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Render\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n render() {\r\n const HeadingTag = this.headingTag as keyof HTMLElementTagNameMap;\r\n const iconSize = this.compact ? 16 : 20;\r\n\r\n return (\r\n <Host data-theme={this.theme}>\r\n <style innerHTML={getComponentCss()} />\r\n\r\n <HeadingTag class=\"heading\">\r\n <button\r\n class=\"header\"\r\n id={this.buttonId}\r\n aria-expanded={String(this.open)}\r\n aria-controls={this.panelId}\r\n onClick={this.handleToggle}\r\n >\r\n <span class=\"heading-text\">{this.heading}</span>\r\n <span class=\"chevron-container\">\r\n <diwa-icon name=\"chevron-down\" size={iconSize} />\r\n </span>\r\n </button>\r\n </HeadingTag>\r\n\r\n <div\r\n id={this.panelId}\r\n class=\"collapsible\"\r\n role=\"region\"\r\n aria-labelledby={this.buttonId}\r\n >\r\n <div class=\"inner\">\r\n <div class=\"content\">\r\n <slot />\r\n </div>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/diwa-badge.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-badge.entry.cjs.js","mappings":";;;;;;;AAEO,MAAM,eAAe,GAAG,MAAc;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BzCA,4BAAqB,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2ClC;;MCzCY,SAAS;IAJtB;;;;;;QAU2B,YAAO,GAAiB,SAAS,CAAC;;QAGlC,SAAI,GAAc,IAAI,CAAC;;QASvB,UAAK,GAAU,MAAM,CAAC;KAqBhD;;;;IAfC,MAAM;;QACJ,QACEC,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,EAAE,GAAI,EACvCA,mEACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,MAAM,gBACC,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,EACnC,IAAI,EAAE,IAAI,CAAC,KAAK,GAAG,QAAQ,GAAG,SAAS,IAEvCA,oEAAQ,CACH,CACF,EACP;KACH;;;;;","names":["getReducedMotionStyle","h","Host"],"sources":["src/components/diwa-badge/diwa-badge-styles.ts","src/components/diwa-badge/diwa-badge.tsx"],"sourcesContent":["import { getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (): string => `\r\n :host {\r\n display: inline-flex;\r\n align-items: center;\r\n font-family: var(--diwa-font-family-base);\r\n }\r\n\r\n :host([hidden]) {\r\n display: none;\r\n }\r\n\r\n .badge {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: var(--diwa-badge-padding-y, var(--diwa-space-0-5)) var(--diwa-badge-padding-x, var(--diwa-space-2));\r\n border-radius: var(--diwa-badge-radius, var(--diwa-radius-full));\r\n font-size: var(--diwa-badge-font-size, var(--diwa-font-size-md));\r\n font-weight: var(--diwa-badge-font-weight, var(--diwa-font-weight-medium));\r\n line-height: var(--diwa-line-height-tight);\r\n white-space: nowrap;\r\n background-color: var(--diwa-bg-hover);\r\n color: var(--diwa-text-secondary);\r\n transition: var(--diwa-transition-colors);\r\n }\r\n\r\n ${getReducedMotionStyle('.badge')}\r\n\r\n /* ── Size: sm ──────────────────────────────────────────────────────── */\r\n\r\n :host([size=\"sm\"]) .badge {\r\n padding: var(--diwa-badge-padding-y-sm, var(--diwa-space-px)) var(--diwa-badge-padding-x-sm, var(--diwa-space-1-5, 6px));\r\n font-size: var(--diwa-badge-font-size-sm, var(--diwa-font-size-xs));\r\n }\r\n\r\n /* ── Variant: neutral (default) ────────────────────────────────────── */\r\n\r\n :host([variant=\"neutral\"]) .badge {\r\n background-color: var(--diwa-bg-hover);\r\n color: var(--diwa-text-secondary);\r\n }\r\n\r\n /* ── Variant: accent ───────────────────────────────────────────────── */\r\n\r\n :host([variant=\"accent\"]) .badge {\r\n background-color: var(--diwa-accent-bg);\r\n color: var(--diwa-accent);\r\n }\r\n\r\n /* ── Variant: success ──────────────────────────────────────────────── */\r\n\r\n :host([variant=\"success\"]) .badge {\r\n background-color: var(--diwa-success-bg);\r\n color: var(--diwa-success-text);\r\n }\r\n\r\n /* ── Variant: warning ──────────────────────────────────────────────── */\r\n\r\n :host([variant=\"warning\"]) .badge {\r\n background-color: var(--diwa-warning-bg);\r\n color: var(--diwa-warning-text);\r\n }\r\n\r\n /* ── Variant: danger ───────────────────────────────────────────────── */\r\n\r\n :host([variant=\"danger\"]) .badge {\r\n background-color: var(--diwa-danger-bg);\r\n color: var(--diwa-danger-text);\r\n }\r\n`;\r\n","import { Component, Host, Prop, h } from \"@stencil/core\";\r\nimport type { BadgeSize, BadgeVariant } from \"./types\";\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-badge-styles';\r\n\r\n/**\r\n * @component diwa-badge\r\n *\r\n * A compact, pill-shaped label used to convey status, counts, or metadata.\r\n * Renders as an inline element with full Shadow DOM encapsulation.\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n * --diwa-badge-radius Border radius (defaults to --diwa-radius-full)\r\n * --diwa-badge-padding-x Horizontal padding for md size\r\n * --diwa-badge-padding-x-sm Horizontal padding for sm size\r\n * --diwa-badge-font-size Font size for md size\r\n * --diwa-badge-font-size-sm Font size for sm size\r\n * --diwa-badge-font-weight Font weight\r\n *\r\n * Usage:\r\n * <diwa-badge variant=\"success\">Active</diwa-badge>\r\n * <diwa-badge variant=\"danger\" size=\"sm\">3 errors</diwa-badge>\r\n * <diwa-badge variant=\"neutral\">Draft</diwa-badge>\r\n *\r\n * @slot default — Badge label content (text or mixed inline content)\r\n */\r\n@Component({\r\n tag: \"diwa-badge\",\r\n shadow: true,\r\n})\r\nexport class DiwaBadge {\r\n // ──────────────────────────────────────────────────────────────\r\n // Props\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n /** Semantic colour variant. Determines background and text colour. */\r\n @Prop({ reflect: true }) variant: BadgeVariant = \"neutral\";\r\n\r\n /** Size tier — controls height, padding, and font-size. */\r\n @Prop({ reflect: true }) size: BadgeSize = \"md\";\r\n\r\n /**\r\n * Accessible label. Use when slot content alone is insufficient\r\n * (e.g., a numeric count without surrounding context).\r\n */\r\n @Prop() label?: string;\r\n\r\n /** Per-component theme override. */\r\n @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Render\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n render() {\r\n return (\r\n <Host data-theme={this.theme}>\r\n <style innerHTML={getComponentCss()} />\r\n <span\r\n class=\"badge\"\r\n part=\"base\"\r\n aria-label={this.label ?? undefined}\r\n role={this.label ? \"status\" : undefined}\r\n >\r\n <slot />\r\n </span>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/diwa-button-pure.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-button-pure.entry.cjs.js","mappings":"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","names":["getFocusStyle","getReducedMotionStyle","h","Host"],"sources":["src/components/diwa-button-pure/diwa-button-pure-styles.ts","src/components/diwa-button-pure/diwa-button-pure-utils.ts","src/components/diwa-button-pure/diwa-button-pure.tsx"],"sourcesContent":["/**\r\n * diwa-button-pure-styles.ts\r\n * ===========================\r\n * CSS-in-JS styles for <diwa-button-pure>.\r\n *\r\n * A minimal, transparent button: icon + label only, no background or border.\r\n * Mirrors the PDS p-button-pure aesthetic.\r\n *\r\n * Layout rules:\r\n * alignLabel='end' (default) → icon label\r\n * alignLabel='start' → label icon (via flex-direction: row-reverse)\r\n * stretch=true → fills container width, gap between icon and label\r\n */\r\n\r\nimport type { ButtonPureSize, ButtonPureAlignLabel } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\nexport const getComponentCss = (\r\n _size: ButtonPureSize,\r\n _disabled: boolean,\r\n _loading: boolean,\r\n _underline: boolean,\r\n _active: boolean,\r\n _hideLabel: boolean,\r\n _alignLabel: ButtonPureAlignLabel,\r\n _stretch: boolean,\r\n): string => `\r\n\r\n /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n :host {\r\n display: inline-flex;\r\n position: relative;\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 /* Stretch: fill the parent's inline axis */\r\n :host([stretch]) {\r\n display: flex;\r\n width: 100%;\r\n }\r\n\r\n /* ── Root element (<button> or <a>) ─────────────────────────────────── */\r\n\r\n .root {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--diwa-space-2);\r\n flex-direction: row; /* overridden by alignLabel=start below */\r\n\r\n background: transparent;\r\n border: none;\r\n padding: var(--diwa-space-0-5) var(--diwa-space-1);\r\n margin: 0;\r\n cursor: pointer;\r\n\r\n font-family: inherit;\r\n font-size: var(--diwa-font-size-base);\r\n font-weight: var(--diwa-font-weight-regular);\r\n line-height: 1;\r\n color: var(--diwa-text-primary);\r\n text-decoration: none;\r\n white-space: nowrap;\r\n\r\n -webkit-appearance: none;\r\n appearance: none;\r\n -webkit-font-smoothing: antialiased;\r\n\r\n border-radius: var(--diwa-radius-sm);\r\n }\r\n\r\n /* Stretch: push icon and label to opposite edges */\r\n :host([stretch]) .root {\r\n width: 100%;\r\n justify-content: space-between;\r\n }\r\n\r\n /* ── Focus ring ─────────────────────────────────────────────────────── */\r\n\r\n ${getFocusStyle('.root')}\r\n\r\n /* ── Size ───────────────────────────────────────────────────────────── */\r\n\r\n :host([size=\"sm\"]) .root {\r\n font-size: var(--diwa-font-size-sm);\r\n }\r\n\r\n :host([size=\"lg\"]) .root {\r\n font-size: var(--diwa-font-size-lg);\r\n }\r\n\r\n /* ── Hover / Active ─────────────────────────────────────────────────── */\r\n\r\n .root:hover:not(:disabled) {\r\n background-color: var(--diwa-bg-hover);\r\n }\r\n\r\n /* ── Active state (CSS :active + [active] prop) ─────────────────────── */\r\n\r\n :host([active]) .root,\r\n .root:active:not(:disabled) {\r\n background-color: var(--diwa-bg-active);\r\n }\r\n\r\n /* ── Disabled ───────────────────────────────────────────────────────── */\r\n\r\n :host([disabled]) .root,\r\n .root:disabled {\r\n opacity: var(--diwa-opacity-disabled);\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n }\r\n\r\n /* ── Loading ────────────────────────────────────────────────────────── */\r\n\r\n :host([loading]) .root {\r\n cursor: wait;\r\n pointer-events: none;\r\n }\r\n\r\n /* ── alignLabel: start → label on left, icon on right ──────────────── */\r\n\r\n :host([align-label=\"start\"]) .root {\r\n flex-direction: row-reverse;\r\n }\r\n\r\n /* ── Underline label text ───────────────────────────────────────────── */\r\n\r\n :host([underline]) .label {\r\n text-decoration: underline;\r\n }\r\n\r\n /* ── Icon wrapper ───────────────────────────────────────────────────── */\r\n\r\n .icon {\r\n display: contents;\r\n flex-shrink: 0;\r\n line-height: 0;\r\n }\r\n\r\n /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\r\n\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 /* ── Spinner ────────────────────────────────────────────────────────── */\r\n\r\n .spinner {\r\n /* Size relative to current font-size so it scales with the button size tier */\r\n width: 1em;\r\n height: 1em;\r\n flex-shrink: 0;\r\n border: var(--diwa-border-width-base) solid currentColor;\r\n border-top-color: transparent;\r\n border-radius: 50%;\r\n animation: diwa-bp-spin var(--diwa-spinner-duration, 0.7s) linear infinite;\r\n }\r\n\r\n @keyframes diwa-bp-spin {\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n ${getReducedMotionStyle('.root', '.spinner')}\r\n`;\r\n","/**\r\n * diwa-button-pure-utils.ts\r\n * ==========================\r\n * ARIA helpers for <diwa-button-pure>.\r\n */\r\n\r\nexport interface ButtonPureAriaAttributes {\r\n 'aria-label'?: string;\r\n 'aria-busy'?: 'true';\r\n 'aria-disabled'?: 'true';\r\n}\r\n\r\nexport const getButtonPureAriaAttributes = (\r\n disabled: boolean,\r\n loading: boolean,\r\n label: string | undefined,\r\n isLink: boolean,\r\n): ButtonPureAriaAttributes => {\r\n const attrs: ButtonPureAriaAttributes = {};\r\n\r\n if (label) {\r\n attrs['aria-label'] = label;\r\n }\r\n\r\n if (loading) {\r\n attrs['aria-busy'] = 'true';\r\n }\r\n\r\n if (isLink && (disabled || loading)) {\r\n attrs['aria-disabled'] = 'true';\r\n }\r\n\r\n return attrs;\r\n};\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\nimport type { ButtonPureSize, ButtonPureAlignLabel, ButtonPureType } from \"./types\";\r\nimport type { Theme } from \"../../utils/styles\";\r\nimport { getComponentCss } from \"./diwa-button-pure-styles\";\r\nimport { getButtonPureAriaAttributes } from \"./diwa-button-pure-utils\";\r\n\r\n/**\r\n * @component diwa-button-pure\r\n *\r\n * A transparent, text+icon action button — no background or border.\r\n * Mirrors the PDS `p-button-pure` component.\r\n *\r\n * Default layout: [icon] [label] (alignLabel=\"end\")\r\n * Reversed layout: [label] [icon] (alignLabel=\"start\")\r\n * Stretched layout: [icon] ····· [label] (stretch + alignLabel=\"end\")\r\n *\r\n * Usage:\r\n * <diwa-button-pure>Read more</diwa-button-pure>\r\n * <diwa-button-pure icon=\"arrow-left\" align-label=\"start\">Back</diwa-button-pure>\r\n * <diwa-button-pure hide-label label=\"Close\" icon=\"x\" />\r\n *\r\n * @slot default — Button label text\r\n */\r\n@Component({\r\n tag: \"diwa-button-pure\",\r\n shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaButtonPure {\r\n @Element() host!: HTMLDiwaButtonPureElement;\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 /** Text size tier. Controls both font-size and icon size. */\r\n @Prop({ reflect: true }) size: ButtonPureSize = \"md\";\r\n\r\n /**\r\n * Lucide icon name in kebab-case (e.g. `\"arrow-right\"`, `\"star\"`), or `\"none\"`\r\n * to render with no icon. Defaults to `\"arrow-right\"` — matching PDS.\r\n */\r\n @Prop() icon: string = \"arrow-right\";\r\n\r\n /** Disabled state. Blocks all pointer and keyboard interaction. */\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n /**\r\n * Loading state. Replaces the icon with a spinner, blocks interaction,\r\n * and announces aria-busy to screen readers.\r\n */\r\n @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n /**\r\n * When `true`, the label slot is visually hidden (icon-only mode).\r\n * Always pair with the `label` prop for screen-reader accessible name.\r\n */\r\n @Prop({ reflect: true }) hideLabel: boolean = false;\r\n\r\n /** Forces the button into its active/pressed visual state. */\r\n @Prop({ reflect: true }) active: boolean = false;\r\n\r\n /** Adds an underline decoration to the label text. */\r\n @Prop({ reflect: true }) underline: boolean = false;\r\n\r\n /**\r\n * Controls which side the label appears on relative to the icon.\r\n * - `\"end\"` (default): [icon] [label]\r\n * - `\"start\"`: [label] [icon]\r\n */\r\n @Prop({ reflect: true }) alignLabel: ButtonPureAlignLabel = \"end\";\r\n\r\n /**\r\n * When `true`, the button stretches to fill its container and the space\r\n * between icon and label expands to fill remaining width.\r\n */\r\n @Prop({ reflect: true }) stretch: boolean = false;\r\n\r\n /** Native button type. Only applies when rendered as `<button>`. */\r\n @Prop() type: ButtonPureType = \"button\";\r\n\r\n /** Native button name — submitted with form data. */\r\n @Prop() name?: string;\r\n\r\n /** Native button value — submitted with form data. */\r\n @Prop() value?: string;\r\n\r\n /**\r\n * When set, renders as an `<a>` element (link semantics).\r\n * Pair with `target` for external links.\r\n */\r\n @Prop() href?: string;\r\n\r\n /** Link target — only meaningful when `href` is set. */\r\n @Prop() target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\r\n\r\n /**\r\n * Accessible label for icon-only buttons.\r\n * Required when `hideLabel` is `true`.\r\n */\r\n @Prop() label?: string;\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Private helpers\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n private get isInteractive(): boolean {\r\n return !this.disabled && !this.loading;\r\n }\r\n\r\n /** Icon pixel size scaled to the current size tier. */\r\n private get iconSize(): number {\r\n return this.size === \"sm\" ? 14 : this.size === \"lg\" ? 20 : 16;\r\n }\r\n\r\n private readonly handleClick = (e: MouseEvent): void => {\r\n if (!this.isInteractive) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n };\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Render\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n render() {\r\n const isLink = !!this.href;\r\n const Tag = isLink ? \"a\" : \"button\";\r\n\r\n const ariaAttrs = getButtonPureAriaAttributes(\r\n this.disabled,\r\n this.loading,\r\n this.label,\r\n isLink,\r\n );\r\n\r\n const commonProps = {\r\n class: \"root\",\r\n onClick: this.handleClick,\r\n ...ariaAttrs,\r\n };\r\n\r\n const buttonProps = isLink\r\n ? {\r\n href: this.href,\r\n target: this.target,\r\n rel: this.target === \"_blank\" ? \"noopener noreferrer\" : undefined,\r\n tabIndex: this.disabled || this.loading ? -1 : undefined,\r\n }\r\n : {\r\n type: this.type,\r\n name: this.name,\r\n value: this.value,\r\n disabled: this.disabled || this.loading,\r\n };\r\n\r\n const hasIcon = this.icon !== \"none\";\r\n\r\n return (\r\n <Host data-theme={this.theme}>\r\n <style\r\n innerHTML={getComponentCss(\r\n this.size,\r\n this.disabled,\r\n this.loading,\r\n this.underline,\r\n this.active,\r\n this.hideLabel,\r\n this.alignLabel,\r\n this.stretch,\r\n )}\r\n />\r\n\r\n <Tag {...commonProps} {...buttonProps} part=\"base\">\r\n {/* Spinner replaces the icon during loading */}\r\n {this.loading ? (\r\n <span class=\"spinner\" aria-hidden=\"true\" part=\"spinner\" />\r\n ) : (\r\n hasIcon && (\r\n <span class=\"icon\" aria-hidden=\"true\">\r\n <diwa-icon name={this.icon} size={this.iconSize} />\r\n </span>\r\n )\r\n )}\r\n\r\n {/* Label — visually hidden when hideLabel=true but kept for AT */}\r\n <span\r\n class={`label${this.hideLabel ? \" label--hidden\" : \"\"}`}\r\n part=\"label\"\r\n >\r\n <slot />\r\n </span>\r\n </Tag>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/diwa-button.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-button.entry.cjs.js","mappings":";;;;;;;AAAA;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;;AAQO,MAAM,eAAe,GAAG,CAC7B,QAAuB,EACvB,KAAiB,EACjB,SAAkB,EAClB,QAAiB,KACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuDTA,oBAAa,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgKvBC,4BAAqB,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC;CACxD;;AC3PD;;;;;;;;;;;AAyBA;;;;;;;;;;;;;;;;;AAiBO,MAAM,uBAAuB,GAAG,CACrC,QAAiB,EACjB,OAAgB,EAChB,KAAyB,EACzB,MAAe;IAEf,MAAM,KAAK,GAAyB,EAAE,CAAC;IAEvC,IAAI,KAAK,EAAE;QACT,KAAK,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC;KAC7B;IAED,IAAI,OAAO,EAAE;QACX,KAAK,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;KAC7B;;IAGD,IAAI,MAAM,KAAK,QAAQ,IAAI,OAAO,CAAC,EAAE;QACnC,KAAK,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC;KACjC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;;MCnBY,UAAU;IAfvB;;;;;;;;;;;;;QA8B2B,UAAK,GAAU,MAAM,CAAC;;QAGtB,YAAO,GAAkB,SAAS,CAAC;;QAGnC,SAAI,GAAe,IAAI,CAAC;;;;;QAMzC,SAAI,GAAe,QAAQ,CAAC;;;;;;QAOX,aAAQ,GAAY,KAAK,CAAC;;;;;;QAO1B,YAAO,GAAY,KAAK,CAAC;;;;;;;;;;;;;;QAoCzB,cAAS,GAAY,KAAK,CAAC;;;;;;;;;QAU5C,SAAI,GAAW,MAAM,CAAC;QActB,gBAAW,GAAG,CAAC,CAAa;YAClC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;gBACvB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;aACrB;;;SAGF,CAAC;KA0FH;;;;IAzGC,IAAY,aAAa;QACvB,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;KACxC;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC;KAC/D;;;;IAeD,MAAM;;;;;QAKJ,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC3B,MAAM,GAAG,GAAG,MAAM,GAAG,GAAG,GAAG,QAAQ,CAAC;;QAGpC,MAAM,SAAS,GAAG,uBAAuB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAE3F,MAAM,WAAW,mBACf,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,IAAI,CAAC,WAAW,IACtB,SAAS,CACb,CAAC;QAEF,MAAM,WAAW,GAAG,MAAM;cACtB;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS;;gBAEjE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,SAAS;aACzD;cACD;gBACE,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;aACxC,CAAC;QAEN;;;;;;;;;;;;;QAaEC,QAACC,UAAI,mEACS,IAAI,CAAC,KAAK,EACtB,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,mBAEjC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,IAIhED,oEAAO,SAAS,EAAE,eAAe,CAAqD,CAAC,GAAI,EAE3FA,QAAC,GAAG,qEACE,WAAW,EACX,WAAW,IACf,IAAI,EAAC,MAAM,2CAGV,IAAI,CAAC,OAAO,KACXA,mEAAM,KAAK,EAAC,SAAS,iBAAa,MAAM,EAAC,IAAI,EAAC,SAAS,GAAG,CAC3D,EAGDA,mEAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,YAAY,iBAAa,MAAM,IAC1D,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,IAAIA,wEAAW,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAI,EAC7FA,mEAAM,IAAI,EAAC,YAAY,GAAG,CACrB,EAGPA,mEAAM,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,gBAAgB,GAAG,EAAE,EAAE,EAAE,IAAI,EAAC,OAAO,IACzEA,oEAAQ,CACH,EAGPA,mEAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,iBAAa,MAAM,IACvDA,mEAAM,IAAI,EAAC,UAAU,GAAG,CACnB,CACH,CACD,EACP;KACH;;;;;;;","names":["getFocusStyle","getReducedMotionStyle","h","Host"],"sources":["src/components/diwa-button/diwa-button-styles.ts","src/components/diwa-button/diwa-button-utils.ts","src/components/diwa-button/diwa-button.tsx"],"sourcesContent":["/**\r\n * diwa-button-styles.ts\r\n * ======================\r\n * CSS-in-JS style function for <diwa-button>.\r\n *\r\n * Returns a complete, scoped CSS string injected into the component's Shadow DOM\r\n * via a <style innerHTML={...}> element in render(). This follows the shared\n * Diwa component styling architecture used across web components.\n *\r\n * All colour values use CSS custom properties (--diwa-*) — raw values are never\r\n * hardcoded. This means theming is entirely handled by the token cascade: when the\r\n * host element carries data-theme=\"light\", the [data-theme=\"light\"] overrides\r\n * defined in app.css cascade into the Shadow DOM via custom property inheritance.\r\n *\r\n * The function accepts the full prop surface for future conditional optimisation\r\n * (e.g. generating only variant- or size-specific CSS to reduce payload), but\r\n * currently outputs the complete ruleset regardless of prop values.\r\n */\r\n\r\nimport type { ButtonSize, ButtonVariant } from './types';\r\nimport { getFocusStyle, getReducedMotionStyle } from '../../utils/styles';\r\n\r\n/**\r\n * Generates scoped CSS for the <diwa-button> shadow tree.\r\n *\r\n * @param _variant — current ButtonVariant (reserved for conditional CSS)\r\n * @param _size — current ButtonSize (reserved for conditional CSS)\r\n * @param _disabled — disabled state (reserved for conditional CSS)\r\n * @param _loading — loading state (reserved for conditional CSS)\r\n */\r\nexport const getComponentCss = (\r\n _variant: ButtonVariant,\r\n _size: ButtonSize,\r\n _disabled: boolean,\r\n _loading: boolean,\r\n): string => `\r\n /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n :host {\r\n display: inline-flex;\r\n position: relative;\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 /* ── Inner element (the real <button> or <a> in Shadow DOM) ─────────── */\r\n\r\n .inner {\r\n /* Layout */\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: var(--diwa-space-2);\r\n\r\n /* Sizing defaults (md) */\r\n height: var(--diwa-button-height, 40px);\r\n padding: 0 var(--diwa-button-padding-x, 16px);\r\n box-sizing: border-box;\r\n width: 100%;\r\n\r\n /* Shape */\r\n border-radius: var(--diwa-button-radius, var(--diwa-radius-md));\r\n border: var(--diwa-border-width-thin) solid transparent;\r\n font-size: var(--diwa-font-size-base);\r\n font-weight: var(--diwa-button-font-weight, var(--diwa-font-weight-medium));\r\n font-family: inherit;\r\n line-height: 1;\r\n white-space: nowrap;\r\n text-decoration: none;\r\n\r\n /* Interaction */\r\n cursor: pointer;\r\n user-select: none;\r\n -webkit-font-smoothing: antialiased;\r\n position: relative;\r\n\r\n /* Motion */\r\n transition: var(--diwa-transition-colors), box-shadow var(--diwa-transition-fast);\r\n\r\n /* Reset native button styles */\r\n appearance: none;\r\n -webkit-appearance: none;\r\n }\r\n\r\n /* ── Focus ring ─────────────────────────────────────────────────────── */\r\n\r\n ${getFocusStyle('.inner')}\r\n\r\n /* ── Variant: primary ───────────────────────────────────────────────── */\r\n\r\n :host([variant=\"primary\"]) .inner {\r\n background-color: var(--diwa-button-bg, var(--diwa-accent));\r\n color: var(--diwa-button-color, var(--diwa-text-inverse));\r\n border-color: transparent;\r\n }\r\n\r\n :host([variant=\"primary\"]) .inner:hover:not(:disabled) {\r\n background-color: var(--diwa-button-bg-hover, var(--diwa-accent-hover));\r\n }\r\n\r\n :host([variant=\"primary\"]) .inner:active:not(:disabled) {\r\n background-color: var(--diwa-accent-active);\r\n transform: translateY(1px);\r\n }\r\n\r\n /* ── Variant: secondary ─────────────────────────────────────────────── */\r\n\r\n :host([variant=\"secondary\"]) .inner {\r\n background-color: transparent;\r\n color: var(--diwa-accent);\r\n border-color: var(--diwa-accent);\r\n }\r\n\r\n :host([variant=\"secondary\"]) .inner:hover:not(:disabled) {\r\n background-color: var(--diwa-accent-bg);\r\n border-color: var(--diwa-accent-hover);\r\n }\r\n\r\n :host([variant=\"secondary\"]) .inner:active:not(:disabled) {\r\n background-color: var(--diwa-accent-muted);\r\n transform: translateY(1px);\r\n }\r\n\r\n /* ── Variant: ghost ─────────────────────────────────────────────────── */\r\n\r\n :host([variant=\"ghost\"]) .inner {\r\n background-color: transparent;\r\n color: var(--diwa-text-secondary);\r\n border-color: transparent;\r\n }\r\n\r\n :host([variant=\"ghost\"]) .inner:hover:not(:disabled) {\r\n background-color: var(--diwa-bg-hover);\r\n color: var(--diwa-text-primary);\r\n }\r\n\r\n :host([variant=\"ghost\"]) .inner:active:not(:disabled) {\r\n background-color: var(--diwa-bg-active);\r\n transform: translateY(1px);\r\n }\r\n\r\n /* ── Variant: danger ────────────────────────────────────────────────── */\r\n\r\n :host([variant=\"danger\"]) .inner {\r\n background-color: var(--diwa-danger);\r\n color: var(--diwa-text-inverse);\r\n border-color: transparent;\r\n }\r\n\r\n :host([variant=\"danger\"]) .inner:hover:not(:disabled) {\r\n background-color: var(--diwa-danger-hover);\r\n }\r\n\r\n :host([variant=\"danger\"]) .inner:active:not(:disabled) {\r\n background-color: var(--diwa-danger-active);\r\n transform: translateY(1px);\r\n }\r\n\r\n /* ── Size: sm ───────────────────────────────────────────────────────── */\r\n\r\n :host([size=\"sm\"]) .inner {\r\n height: var(--diwa-button-height-sm, 32px);\r\n padding: 0 var(--diwa-button-padding-x-sm, 10px);\r\n font-size: var(--diwa-font-size-md);\r\n }\r\n\r\n /* ── Size: lg ───────────────────────────────────────────────────────── */\r\n\r\n :host([size=\"lg\"]) .inner {\r\n height: var(--diwa-button-height-lg, 44px);\r\n padding: 0 var(--diwa-space-10);\r\n font-size: var(--diwa-font-size-lg);\r\n }\r\n\r\n /* ── State: disabled ────────────────────────────────────────────────── */\r\n\r\n :host([disabled]) .inner,\r\n .inner:disabled {\r\n opacity: var(--diwa-opacity-disabled);\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n }\r\n\r\n /* ── State: loading ─────────────────────────────────────────────────── */\r\n\r\n :host([loading]) .inner {\r\n cursor: wait;\r\n pointer-events: none;\r\n }\r\n\r\n /* ── Spinner ────────────────────────────────────────────────────────── */\r\n\r\n .spinner {\r\n width: var(--diwa-spinner-size-sm);\r\n height: var(--diwa-spinner-size-sm);\r\n flex-shrink: 0;\r\n border: var(--diwa-border-width-base) solid currentColor;\r\n border-top-color: transparent;\r\n border-radius: 50%;\r\n animation: diwa-spin var(--diwa-spinner-duration, 0.7s) linear infinite;\r\n }\r\n\r\n @keyframes diwa-spin {\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n /* ── Icon slots ─────────────────────────────────────────────────────── */\r\n\r\n .icon-start,\r\n .icon-end {\r\n display: contents;\r\n flex-shrink: 0;\r\n line-height: 0;\r\n }\r\n\r\n /* ── Label: visually hidden (sr-only / icon-only mode) ──────────────── */\r\n\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 /* ── Icon-only mode ─────────────────────────────────────────────────── */\r\n\r\n :host([hide-label]) .inner {\r\n width: var(--diwa-button-height, 40px);\r\n padding: 0;\r\n }\r\n\r\n :host([hide-label][size=\"sm\"]) .inner {\r\n width: var(--diwa-button-height-sm, 32px);\r\n }\r\n\r\n :host([hide-label][size=\"lg\"]) .inner {\r\n width: var(--diwa-button-height-lg, 44px);\r\n }\r\n\r\n /* ── Reduced motion ─────────────────────────────────────────────────── */\r\n\r\n ${getReducedMotionStyle('.inner', '.label', '.spinner')}\r\n`;\r\n","/**\r\n * diwa-button-utils.ts\r\n * =====================\r\n * Utility types and helper functions for <diwa-button>.\r\n *\r\n * Mirrors the PDS pattern used in:\r\n * packages/components/src/components/button/button-utils.ts\r\n *\r\n * Separating ARIA logic into a dedicated utility file keeps the main component\r\n * lean and makes the accessibility mapping independently testable.\r\n */\r\n\r\n/**\r\n * ARIA attributes applied to the inner interactive element (<button> or <a>).\r\n * All keys are optional — only set when semantically appropriate.\r\n */\r\nexport interface ButtonAriaAttributes {\r\n /** Accessible text label — overrides slot content for AT. */\r\n 'aria-label'?: string;\r\n /** Signals that the button is performing an async operation. */\r\n 'aria-busy'?: 'true';\r\n /** Used on <a> elements (which have no native disabled attribute). */\r\n 'aria-disabled'?: 'true';\r\n}\r\n\r\n/**\r\n * Assembles ARIA attributes for the inner interactive element.\r\n *\r\n * Decision table:\r\n * - `aria-label` → set when `label` prop is provided (icon-only or supplemental name)\r\n * - `aria-busy` → set when `loading` is true (announces async activity to AT)\r\n * - `aria-disabled` → set when disabled **and** the element is an <a> (links have no\r\n * native disabled — we simulate it with aria + tabIndex=-1)\r\n *\r\n * For native <button>: disabled/loading are expressed via the `disabled` HTML attribute\r\n * (handled in the calling component's render), so `aria-disabled` is not needed there.\r\n *\r\n * @param disabled — whether the button interaction is blocked\r\n * @param loading — whether the button is performing an async operation\r\n * @param label — accessible label string (optional)\r\n * @param isLink — true when the component renders as <a> (href is provided)\r\n */\r\nexport const getButtonAriaAttributes = (\r\n disabled: boolean,\r\n loading: boolean,\r\n label: string | undefined,\r\n isLink: boolean,\r\n): ButtonAriaAttributes => {\r\n const attrs: ButtonAriaAttributes = {};\r\n\r\n if (label) {\r\n attrs['aria-label'] = label;\r\n }\r\n\r\n if (loading) {\r\n attrs['aria-busy'] = 'true';\r\n }\r\n\r\n // <a> elements have no native `disabled` attribute — express it via ARIA.\r\n if (isLink && (disabled || loading)) {\r\n attrs['aria-disabled'] = 'true';\r\n }\r\n\r\n return attrs;\r\n};\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\nimport type { ButtonSize, ButtonType, ButtonVariant } from \"./types\";\r\nimport type { Theme } from \"../../utils/styles\";\r\nimport { getComponentCss } from \"./diwa-button-styles\";\r\nimport { getButtonAriaAttributes } from \"./diwa-button-utils\";\r\n\r\n/**\r\n * @component diwa-button\r\n *\r\n * A fully encapsulated, accessible button primitive.\r\n * Renders as a native <button> (or <a> when `href` is supplied).\r\n *\r\n * Design token override API (set on :root or any ancestor):\r\n * --diwa-button-bg Background color (primary variant default)\r\n * --diwa-button-bg-hover Hover background\r\n * --diwa-button-color Foreground / text color\r\n * --diwa-button-radius Border radius\r\n * --diwa-button-height Height for md size\r\n * --diwa-button-height-sm Height for sm size\r\n * --diwa-button-height-lg Height for lg size\r\n * --diwa-button-padding-x Horizontal padding for md/lg\r\n * --diwa-button-padding-x-sm Horizontal padding for sm\r\n *\r\n * Usage:\r\n * <diwa-button variant=\"primary\">Get Started</diwa-button>\r\n * <diwa-button variant=\"secondary\" size=\"sm\" disabled>Cancel</diwa-button>\r\n * <diwa-button href=\"/dashboard\" target=\"_blank\">Open Panel</diwa-button>\r\n *\r\n * @slot default — Button label content (text, icons, or mixed)\r\n */\r\n@Component({\r\n tag: \"diwa-button\",\r\n /**\r\n * No styleUrl — styles are injected dynamically via getComponentCss().\r\n * This follows the PDS CSS-in-JS pattern, enabling per-component theming\r\n * and keeping style logic co-located with the component.\r\n *\r\n * shadow.delegatesFocus = true:\r\n * Forwards focus from the host element (<diwa-button>) to the first\r\n * focusable element inside the Shadow DOM (<button> or <a>).\r\n * This ensures keyboard navigation and :focus-visible work correctly\r\n * when host-app code calls .focus() on the custom element.\r\n */\r\n shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaButton {\r\n @Element() host!: HTMLDiwaButtonElement;\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Props — each @Prop generates a corresponding argType in Storybook\r\n // and an HTML attribute on the custom element.\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Per-component theme override.\r\n *\r\n * Setting this reflects data-theme onto the host element, causing the light/dark\r\n * token overrides in app.css to cascade into the Shadow DOM automatically.\r\n * Mirrors the `theme` prop on every PDS component.\r\n */\r\n @Prop({ reflect: true }) theme: Theme = \"dark\";\r\n\r\n /** Visual style variant. */\r\n @Prop({ reflect: true }) variant: ButtonVariant = \"primary\";\r\n\r\n /** Size tier — controls height and padding. */\r\n @Prop({ reflect: true }) size: ButtonSize = \"md\";\r\n\r\n /**\r\n * Native button type. Only applies when rendered as <button>\r\n * (i.e., no `href` prop is set).\r\n */\r\n @Prop() type: ButtonType = \"button\";\r\n\r\n /**\r\n * Disabled state. Blocks all pointer and keyboard interaction.\r\n * When rendered as <a>, sets aria-disabled instead of disabled\r\n * (the `disabled` attribute is not valid on anchor elements).\r\n */\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n /**\r\n * Loading state. Shows an inline spinner, disables the button,\r\n * and sets aria-busy=\"true\" to communicate async activity to\r\n * screen readers.\r\n */\r\n @Prop({ reflect: true }) loading: boolean = false;\r\n\r\n /**\r\n * When set, the button renders as an <a> element (link semantics).\r\n * Pair with `target` for external links.\r\n */\r\n @Prop() href?: string;\r\n\r\n /** Link target — only meaningful when `href` is set. */\r\n @Prop() target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\r\n\r\n /** Native button name — submitted with form data. */\r\n @Prop() name?: string;\r\n\r\n /** Native button value — submitted with form data. */\r\n @Prop() value?: string;\r\n\r\n /**\r\n * Accessible label. Use when the visible slot content is not\r\n * descriptive enough (e.g., icon-only buttons).\r\n */\r\n @Prop() label?: string;\r\n\r\n /**\r\n * When `true`, the default label slot is visually hidden so the button\r\n * renders as a compact square (icon-only mode). The slot text is kept in\r\n * the DOM for screen-reader accessible-name calculation.\r\n *\r\n * For best accessibility, always pair with the `label` prop **or** ensure\r\n * the default slot contains descriptive text, so the button has a name.\r\n *\r\n * Usage:\r\n * <diwa-button hide-label label=\"Save\">\r\n * <svg slot=\"icon-start\">…</svg>\r\n * </diwa-button>\r\n */\r\n @Prop({ reflect: true }) hideLabel: boolean = false;\r\n\r\n /**\r\n * Lucide icon name in kebab-case (e.g. `\"star\"`, `\"arrow-right\"`), or `'none'`\r\n * to show no icon. When set to any value other than `'none'`, renders a\r\n * `<diwa-icon>` in the leading (icon-start) position.\r\n *\r\n * The `icon-start` slot still works alongside this prop — the prop-rendered\r\n * icon comes first, followed by any slotted content.\r\n */\r\n @Prop() icon: string = 'none';\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Private helpers\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n private get isInteractive(): boolean {\r\n return !this.disabled && !this.loading;\r\n }\r\n\r\n private get iconSize(): number {\r\n return this.size === 'sm' ? 16 : this.size === 'lg' ? 24 : 20;\r\n }\r\n\r\n private handleClick = (e: MouseEvent): void => {\r\n if (!this.isInteractive) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n }\r\n // When interactive, allow the native click to retarget to the host element.\r\n // Framework wrappers expose it as onClick (React) / @click (Vue) / (click) (Angular).\r\n };\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Render\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n render() {\r\n /**\r\n * Render as <a> when href is provided (link semantics).\r\n * Render as <button> for all interactive / form scenarios.\r\n */\r\n const isLink = !!this.href;\r\n const Tag = isLink ? \"a\" : \"button\";\r\n\r\n // Consolidate all ARIA attributes via the utility — mirrors PDS getButtonAriaAttributes()\r\n const ariaAttrs = getButtonAriaAttributes(this.disabled, this.loading, this.label, isLink);\r\n\r\n const commonProps = {\r\n class: \"inner\",\r\n onClick: this.handleClick,\r\n ...ariaAttrs,\r\n };\r\n\r\n const buttonProps = isLink\r\n ? {\r\n href: this.href,\r\n target: this.target,\r\n rel: this.target === \"_blank\" ? \"noopener noreferrer\" : undefined,\r\n // Disabled links have no native mechanism — suppress tab stop too\r\n tabIndex: this.disabled || this.loading ? -1 : undefined,\r\n }\r\n : {\r\n type: this.type,\r\n name: this.name,\r\n value: this.value,\r\n disabled: this.disabled || this.loading,\r\n };\r\n\r\n return (\r\n /**\r\n * <Host> renders the outer custom element tag itself.\r\n *\r\n * data-theme is set from the `theme` prop so that the [data-theme=\"light\"]\r\n * CSS variable overrides in app.css cascade into this Shadow DOM tree via\r\n * custom property inheritance — no colour values are hardcoded here.\r\n *\r\n * Reflecting `variant` and `size` as attributes allows CSS consumers to\r\n * target the host from outside: diwa-button[variant=\"primary\"] { ... }\r\n *\r\n * The part=\"base\" exposes internals for ::part() in host-app stylesheets.\r\n */\r\n <Host\r\n data-theme={this.theme}\r\n role={isLink ? undefined : \"button\"}\r\n aria-disabled={\r\n (this.disabled || this.loading) && isLink ? \"true\" : undefined\r\n }\r\n >\r\n {/* CSS-in-JS styles — injected into Shadow DOM, scoped automatically */}\r\n <style innerHTML={getComponentCss(this.variant, this.size, this.disabled, this.loading)} />\r\n\r\n <Tag\r\n {...commonProps}\r\n {...buttonProps}\r\n part=\"base\" /* ::part(base) hook for consumers */\r\n >\r\n {/* Loading spinner — visually hidden from AT via aria-hidden */}\r\n {this.loading && (\r\n <span class=\"spinner\" aria-hidden=\"true\" part=\"spinner\" />\r\n )}\r\n\r\n {/* Leading icon slot — decorative; aria-hidden keeps AT focused on label */}\r\n <span class=\"icon-start\" part=\"icon-start\" aria-hidden=\"true\">\r\n {this.icon !== 'none' && !this.loading && <diwa-icon name={this.icon} size={this.iconSize} />}\r\n <slot name=\"icon-start\" />\r\n </span>\r\n\r\n {/* Slot — content projection. Text, icons, or mixed content. */}\r\n <span class={`label${this.hideLabel ? \" label--hidden\" : \"\"}`} part=\"label\">\r\n <slot />\r\n </span>\r\n\r\n {/* Trailing icon slot */}\r\n <span class=\"icon-end\" part=\"icon-end\" aria-hidden=\"true\">\r\n <slot name=\"icon-end\" />\r\n </span>\r\n </Tag>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@

- {"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: 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.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-components.cjs.js","mappings":";;;;;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,iNAAe,CAAC;AACrC,EAAE,MAAM,IAAI,GAAiE,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE,CAAC;AACxB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","globalScripts","bootstrapLazy"],"sources":["../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.23.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}

package/dist/cjs/diwa-divider.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-divider.entry.cjs.js","mappings":";;;;;;AAEO,MAAM,eAAe,GAAG,CAAC,WAA+B;IAC7D,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAC;IAE9C,OAAO;;;;;eAKM,UAAU,GAAG,aAAa,GAAG,OAAO;MAC7C,UAAU,GAAG,sBAAsB,GAAG,cAAc;;;;;;;;;;;;;;;;MAgBpD,UAAU;UACR;;qBAEa;UACb;2CACmC;;CAE1C,CAAC;AACF,CAAC;;MCJY,WAAW;IAJxB;;;;;;QAU2B,UAAK,GAAU,MAAM,CAAC;;;;;;;QAQtB,gBAAW,GAAuB,YAAY,CAAC;KAkBzE;;;;IAZC,MAAM;QACJ,QACEA,QAACC,UAAI,mEAAa,IAAI,CAAC,KAAK,IAC1BD,oEAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,GAAI,EACvDA,iEACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,WAAW,GAClC,CACG,EACP;KACH;;;;;","names":["h","Host"],"sources":["src/components/diwa-divider/diwa-divider-styles.ts","src/components/diwa-divider/diwa-divider.tsx"],"sourcesContent":["import type { DividerOrientation } from './types';\r\n\r\nexport const getComponentCss = (orientation: DividerOrientation): string => {\r\n const isVertical = orientation === 'vertical';\r\n\r\n return `\r\n\r\n /* ── Host ─────────────────────────────────────────────────────────── */\r\n\r\n :host {\r\n display: ${isVertical ? 'inline-flex' : 'block'};\r\n ${isVertical ? 'align-self: stretch;' : 'width: 100%;'}\r\n outline: none;\r\n }\r\n\r\n :host([hidden]) {\r\n display: none;\r\n }\r\n\r\n /* ── Rule ─────────────────────────────────────────────────────────── */\r\n\r\n .root {\r\n display: block;\r\n margin: 0;\r\n padding: 0;\r\n border: none;\r\n background-color: var(--diwa-border);\r\n ${isVertical\r\n ? `width: var(--diwa-border-width-thin);\r\n height: 100%;\r\n min-height: 1em;`\r\n : `width: 100%;\r\n height: var(--diwa-border-width-thin);`}\r\n }\r\n`;\r\n};\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\nimport type { DividerOrientation } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-divider-styles';\r\n\r\n/**\r\n * @component diwa-divider\r\n *\r\n * A purely presentational separator line. Renders a native `<hr>` element\r\n * styled via CSS-in-JS. Supports horizontal (default) and vertical orientations.\r\n *\r\n * Accessibility:\r\n * - Renders as `role=\"separator\"` (implicit from `<hr>`)\r\n * - `aria-orientation` is set automatically from the `orientation` prop\r\n * - Non-interactive — no focus, no keyboard handling\r\n *\r\n * Usage:\r\n * \r\n * <diwa-divider />\r\n *\r\n * \r\n * <div style=\"display:flex; height:40px\">\r\n * <span>Left</span>\r\n * <diwa-divider orientation=\"vertical\" />\r\n * <span>Right</span>\r\n * </div>\r\n */\r\n@Component({\r\n tag: 'diwa-divider',\r\n shadow: true,\r\n})\r\nexport class DiwaDivider {\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 /**\r\n * Orientation of the divider line.\r\n * - `'horizontal'` (default) — a full-width 1 px horizontal rule.\r\n * - `'vertical'` — a 1 px vertical rule that stretches to the parent's height.\r\n * The parent must be a flex or grid container with a defined height.\r\n */\r\n @Prop({ reflect: true }) orientation: DividerOrientation = 'horizontal';\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Render\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n render() {\r\n return (\r\n <Host data-theme={this.theme}>\r\n <style innerHTML={getComponentCss(this.orientation)} />\r\n <hr\r\n class=\"root\"\r\n role=\"separator\"\r\n aria-orientation={this.orientation}\r\n />\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/diwa-flyout.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"diwa-flyout.entry.cjs.js","mappings":"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","names":["getReducedMotionStyle","h","Host"],"sources":["src/components/diwa-flyout/diwa-flyout-styles.ts","src/components/diwa-flyout/diwa-flyout.tsx"],"sourcesContent":["/**\r\n * diwa-flyout-styles.ts\r\n * ======================\r\n * CSS-in-JS styles for <diwa-flyout>.\r\n *\r\n * The flyout is a fixed-position overlay consisting of:\r\n * - A semi-transparent backdrop that covers the viewport.\r\n * - A panel that slides in from the start (left) or end (right) edge.\r\n *\r\n * Both the backdrop and panel animate on open/close. Because all values are\r\n * passed as template literal expressions, the <style> tag is re-emitted on\r\n * every render — which happens whenever `open` or `position` changes.\r\n *\r\n * Visibility technique: `:host` uses `visibility: hidden` with a delayed\r\n * transition when closing so the panel is invisible after the slide-out\r\n * animation completes, while still being `visibility: visible` during the\r\n * opening animation so it animates in correctly.\r\n */\r\n\r\nimport { getReducedMotionStyle } from '../../utils/styles';\r\nimport type { FlyoutBackdrop, FlyoutPosition } from './types';\r\n\r\nexport const getComponentCss = (\r\n open: boolean,\r\n position: FlyoutPosition,\r\n backdrop: FlyoutBackdrop,\r\n): string => `\r\n\r\n /* ── Host ──────────────────────────────────────────────────────────── */\r\n\r\n :host {\r\n display: block;\r\n position: fixed;\r\n inset: 0;\r\n z-index: var(--diwa-z-overlay);\r\n pointer-events: ${open ? 'auto' : 'none'};\r\n visibility: ${open ? 'visible' : 'hidden'};\r\n transition: visibility 0s linear ${open ? '0s' : 'var(--diwa-motion-duration-moderate)'};\r\n }\r\n\r\n :host([hidden]) {\r\n display: none;\r\n }\r\n\r\n /* ── Backdrop ──────────────────────────────────────────────────────── */\r\n\r\n .backdrop {\r\n position: absolute;\r\n inset: 0;\r\n ${\r\n backdrop === 'blur'\r\n ? `\r\n background: var(--diwa-bg-frosted);\r\n backdrop-filter: blur(var(--diwa-blur-lg));\r\n -webkit-backdrop-filter: blur(var(--diwa-blur-lg));`\r\n : `\r\n background: var(--diwa-bg-shading);`\r\n }\r\n opacity: ${open ? '1' : '0'};\r\n transition: opacity var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-out);\r\n cursor: pointer;\r\n }\r\n\r\n /* ── Panel ─────────────────────────────────────────────────────────── */\r\n\r\n .panel {\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n ${position === 'start' ? 'left: 0;' : 'right: 0;'}\r\n width: var(--diwa-flyout-width, 480px);\r\n min-width: var(--diwa-flyout-min-width);\r\n max-width: 100vw;\r\n display: flex;\r\n flex-direction: column;\r\n background: var(--diwa-bg-surface);\r\n border-${position === 'start' ? 'right' : 'left'}: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n transform: translateX(${open ? '0' : position === 'start' ? '-100%' : '100%'});\r\n transition: transform var(--diwa-motion-duration-moderate) var(--diwa-motion-easing-base);\r\n overflow: hidden;\r\n outline: none;\r\n }\r\n\r\n /* ── Header ────────────────────────────────────────────────────────── */\r\n\r\n .header {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--diwa-space-3);\r\n padding: var(--diwa-space-5) var(--diwa-space-6);\r\n border-bottom: var(--diwa-border-width-thin) solid var(--diwa-border);\r\n }\r\n\r\n .heading-text {\r\n flex: 1;\r\n min-width: 0;\r\n font-family: var(--diwa-font-family-base);\r\n font-size: var(--diwa-font-size-xl);\r\n font-weight: var(--diwa-font-weight-semibold);\r\n color: var(--diwa-text-primary);\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n /* ── Scrollable content ────────────────────────────────────────────── */\r\n\r\n .content {\r\n flex: 1;\r\n overflow-y: auto;\r\n padding: var(--diwa-space-6);\r\n overscroll-behavior: contain;\r\n }\r\n\r\n /* ── Sticky footer ─────────────────────────────────────────────────── */\r\n\r\n .footer {\r\n flex-shrink: 0;\r\n padding: var(--diwa-space-4) var(--diwa-space-6);\r\n border-top: var(--diwa-border-width-thin) solid var(--diwa-border); {\r\n display: none;\r\n }\r\n\r\n ${getReducedMotionStyle('.panel', '.backdrop')}\r\n`;\r\n","import {\r\n Component,\r\n Event,\r\n type EventEmitter,\r\n Host,\r\n Listen,\r\n Prop,\r\n Watch,\r\n h,\r\n} from '@stencil/core';\r\nimport type { FlyoutBackdrop, FlyoutPosition } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-flyout-styles';\r\n\r\n/**\r\n * @component diwa-flyout\r\n *\r\n * A full-height overlay panel that slides in from the start or end edge of\r\n * the viewport. Follows the controlled component pattern — the consumer\r\n * manages `open` state in response to the `dismiss` event.\r\n *\r\n * Accessibility:\r\n * - Panel has `role=\"dialog\"` and `aria-modal=\"true\"`\r\n * - Clicking the backdrop, pressing Escape, or clicking the dismiss button\r\n * emits the `dismiss` event; the consumer sets `open={false}`\r\n * - Focus moves to the panel when opened and returns to the trigger element\r\n * when closed\r\n * - Body scroll is locked (`overflow: hidden`) while the flyout is open\r\n *\r\n * V1 limitations:\r\n * - No focus trap: Tab can navigate outside the panel. A full focus trap\r\n * will be added in V2.\r\n *\r\n * Usage:\r\n * <diwa-flyout heading=\"Settings\" open={isOpen} onDismiss={() => setIsOpen(false)}>\r\n * <p>Flyout body content.</p>\r\n * <div slot=\"footer\">\r\n * <diwa-button onClick={() => setIsOpen(false)}>Save</diwa-button>\r\n * </div>\r\n * </diwa-flyout>\r\n *\r\n * @slot default — Scrollable body content of the flyout.\r\n * @slot header — Extra content in the header row, inserted after the heading text.\r\n * @slot footer — Sticky footer content (e.g. action buttons). Auto-hides when empty.\r\n */\r\n@Component({\r\n tag: 'diwa-flyout',\r\n shadow: true,\r\n})\r\nexport class DiwaFlyout {\r\n private panelEl?: HTMLDivElement;\r\n private savedFocusEl: HTMLElement | null = null;\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 /**\r\n * Whether the flyout is currently open.\r\n *\r\n * Controlled prop — the consumer must set this to `false` in response to\r\n * the `dismiss` event (backdrop click, Escape key, or dismiss button).\r\n */\r\n @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n\r\n /** Which edge of the viewport the panel slides in from (`start` = left, `end` = right). */\r\n @Prop({ reflect: true }) position: FlyoutPosition = 'end';\r\n\r\n /**\r\n * Controls the visual style of the backdrop overlay.\r\n * `blur` — frosted glass (default; use when opened by user interaction).\r\n * `shading` — solid dark scrim (use for system-triggered flyouts).\r\n */\r\n @Prop() backdrop: FlyoutBackdrop = 'blur';\r\n\r\n /** Heading text displayed in the flyout header. */\r\n @Prop() heading: string = '';\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Events\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Emitted when the user requests the flyout to close (backdrop click,\r\n * Escape key press, or dismiss button click).\r\n *\r\n * The consumer must set `open={false}` in response:\r\n * ```html\r\n * <diwa-flyout onDismiss={() => this.open = false} />\r\n * ```\r\n * Not bubbles, not composed.\r\n */\r\n @Event({ bubbles: false, composed: false })\r\n dismiss!: EventEmitter<void>;\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Lifecycle\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n @Watch('open')\r\n onOpenChange(nextOpen: boolean): void {\r\n if (nextOpen) {\r\n document.body.style.overflow = 'hidden';\r\n this.savedFocusEl = document.activeElement as HTMLElement;\r\n requestAnimationFrame(() => {\r\n this.panelEl?.focus();\r\n });\r\n } else {\r\n document.body.style.overflow = '';\r\n this.savedFocusEl?.focus();\r\n this.savedFocusEl = null;\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n document.body.style.overflow = '';\r\n }\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Keyboard handling\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n /** Close on Escape key while the flyout is open. */\r\n @Listen('keydown', { target: 'window' })\r\n onKeyDown(e: KeyboardEvent): void {\r\n if (this.open && e.key === 'Escape') {\r\n e.preventDefault();\r\n this.dismiss.emit();\r\n }\r\n }\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Private helpers\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n private handleDismiss = (): void => {\r\n this.dismiss.emit();\r\n };\r\n\r\n // ──────────────────────────────────────────────────────────────\r\n // Render\r\n // ──────────────────────────────────────────────────────────────\r\n\r\n render() {\r\n return (\r\n <Host data-theme={this.theme}>\r\n <style>{getComponentCss(this.open, this.position, this.backdrop)}</style>\r\n\r\n {/* Backdrop — clicking it emits dismiss */}\r\n <div\r\n class=\"backdrop\"\r\n aria-hidden=\"true\"\r\n onClick={this.handleDismiss}\r\n />\r\n\r\n {/* Dialog panel */}\r\n <div\r\n class=\"panel\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n aria-label={this.heading || 'Flyout'}\r\n tabIndex={-1}\r\n ref={(el) => { this.panelEl = el as HTMLDivElement; }}\r\n >\r\n <div class=\"header\">\r\n <span class=\"heading-text\">{this.heading}</span>\r\n <slot name=\"header\" />\r\n <diwa-button-pure\r\n icon=\"x\"\r\n label=\"Close flyout\"\r\n size=\"sm\"\r\n hideLabel={true}\r\n onClick={this.handleDismiss}\r\n />\r\n </div>\r\n\r\n <div class=\"content\">\r\n <slot />\r\n </div>\r\n\r\n <div class=\"footer\">\r\n <slot name=\"footer\" />\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@

- {"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}