npm - @helixui/library - Versions diffs - 3.0.0-next.65 → 3.1.0-next.66 - Mend

@helixui/library 3.0.0-next.65 → 3.1.0-next.66

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 (408) hide show

package/dist/shared/hx-button-group-BJOGWoMa.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-button-group-BJOGWoMa.js","sources":["../../src/components/hx-button-group/hx-button-group.styles.ts","../../src/components/hx-button-group/hx-button-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixButtonGroupStyles = css`\n :host {\n display: inline-flex;\n contain: layout style;\n }\n\n .group {\n display: inline-flex;\n align-items: stretch;\n }\n\n /* ─── Orientation Variants ─── /\n\n .group--horizontal {\n flex-direction: row;\n }\n\n .group--vertical {\n flex-direction: column;\n }\n\n / ─── No Double Borders: Horizontal ─── /\n\n .group--horizontal ::slotted(:not(:first-child)) {\n margin-inline-start: calc(-1 * var(--hx-border-width-thin, 1px));\n }\n\n /* ─── No Double Borders: Vertical ─── /\n\n .group--vertical ::slotted(:not(:first-child)) {\n margin-top: calc(-1 * var(--hx-border-width-thin, 1px));\n }\n\n /* ─── Border Radius: Horizontal — Single child keeps all corners ─── /\n\n .group--horizontal ::slotted(:only-child) {\n --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n / ─── Border Radius: Horizontal — First child keeps left corners ─── /\n\n .group--horizontal ::slotted(:first-child:not(:only-child)) {\n --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem) 0 0\n var(--hx-border-radius-md, 0.375rem);\n }\n\n / ─── Border Radius: Horizontal — Last child keeps right corners ─── /\n\n .group--horizontal ::slotted(:last-child:not(:only-child)) {\n --hx-button-border-radius: 0 var(--hx-border-radius-md, 0.375rem)\n var(--hx-border-radius-md, 0.375rem) 0;\n }\n\n / ─── Border Radius: Horizontal — Middle children have no radius ─── /\n\n .group--horizontal ::slotted(:not(:first-child):not(:last-child)) {\n --hx-button-border-radius: 0;\n }\n\n / ─── Border Radius: Vertical — Single child keeps all corners ─── /\n\n .group--vertical ::slotted(:only-child) {\n --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n / ─── Border Radius: Vertical — First child keeps top corners ─── /\n\n .group--vertical ::slotted(:first-child:not(:only-child)) {\n --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem)\n var(--hx-border-radius-md, 0.375rem) 0 0;\n }\n\n / ─── Border Radius: Vertical — Last child keeps bottom corners ─── /\n\n .group--vertical ::slotted(:last-child:not(:only-child)) {\n --hx-button-border-radius: 0 0 var(--hx-border-radius-md, 0.375rem)\n var(--hx-border-radius-md, 0.375rem);\n }\n\n / ─── Border Radius: Vertical — Middle children have no radius ─── /\n\n .group--vertical ::slotted(:not(:first-child):not(:last-child)) {\n --hx-button-border-radius: 0;\n }\n\n / ─── Z-index: Raise focused child above siblings to show full focus ring ─── /\n\n .group ::slotted(:focus-within) {\n z-index: 1;\n position: relative;\n }\n\n / ─── High Contrast Mode (forced-colors) ─── /\n\n @media (forced-colors: active) {\n /\n * In forced-colors mode, negative margins that collapse borders between grouped\n * buttons can obscure focus rings. Raise focused children so the Highlight\n * outline from hx-button's own forced-colors block is fully visible.\n /\n .group ::slotted(:focus-within) {\n z-index: 2;\n }\n }\n`;\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixButtonGroupStyles } from './hx-button-group.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/\n A container component that groups related hx-button elements into a cohesive\n * horizontal or vertical action set. Eliminates double borders between adjacent\n * buttons and squares off inner border-radius for a unified visual appearance.\n \n Accessibility: Always provide an accessible label via `aria-label` or\n * `aria-labelledby` so screen readers can announce the group purpose.\n \n @summary Groups hx-button elements into a horizontal or vertical action set with shared borders.\n \n @tag hx-button-group\n \n @slot - Default slot accepting hx-button children.\n \n @csspart group - The container div element wrapping all slotted buttons.\n \n @cssprop [--hx-button-group-size=md] - Size token forwarded to child buttons. Accepts 'sm', 'md', or 'lg'.\n /\n@customElement('hx-button-group')\nexport class HelixButtonGroup extends HelixElement {\n static override styles = [helixButtonGroupStyles];\n\n /\n Layout orientation of the button group.\n * @attr orientation\n /\n @property({ type: String, reflect: true })\n get orientation(): 'horizontal' \| 'vertical' {\n return this._orientation;\n }\n set orientation(value: string) {\n if (value !== 'horizontal' && value !== 'vertical') {\n devWarn('hx-button-group', `Invalid orientation \"${value}\", defaulting to \"horizontal\".`);\n value = 'horizontal';\n }\n this._orientation = value as 'horizontal' \| 'vertical';\n }\n /\n Backing store for the orientation property, holding the validated orientation value.\n * @internal\n /\n private _orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Size applied to the button group and cascaded to child buttons via\n * the --hx-button-group-size CSS custom property.\n * @attr hx-size\n /\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' \| 'md' \| 'lg' = 'md';\n\n /\n Accessible label for the button group. Sets aria-label on the host element.\n * Strongly recommended for WCAG 2.1 AA compliance — without it, screen\n * readers announce an unnamed \"group\". For Drupal/Twig compatibility, prefer\n * applying `aria-label` directly as an HTML attribute instead.\n * @attr label\n */\n @property({ type: String })\n label: string = '';\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('size')) {\n this.style.setProperty('--hx-button-group-size', this.size);\n }\n\n if (changedProperties.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'group');\n this.style.setProperty('--hx-button-group-size', this.size);\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n devWarn(\n 'hx-button-group',\n 'Missing accessible label. Provide a `label` attribute so screen readers can announce the group purpose (WCAG 4.1.2).',\n );\n }\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div\n part=\"group\"\n class=${classMap({\n group: true,\n 'group--horizontal': this.orientation === 'horizontal',\n 'group--vertical': this.orientation === 'vertical',\n })}\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-button-group': HelixButtonGroup;\n }\n}\n"],"names":["helixButtonGroupStyles","css","HelixButtonGroup","HelixElement","value","changedProperties","html","classMap","__decorateClass","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;~~ACyB~~/B,IAAMC,IAAN,cAA+BC,EAAa;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GAsBL,KAAQ,eAA0C,cAQlD,KAAA,OAA2B,MAU3B,KAAA,QAAgB;AAAA,EAAA;AAAA,EAhChB,IAAI,cAAyC;AAC3C,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,YAAYC,GAAe;AAC7B,IAAIA,MAAU,gBAAgBA,MAAU,eAEtCA,IAAQ,eAEV,KAAK,eAAeA;AAAA,EACtB;AAAA;AAAA,EA2BS,QAAQC,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,MAAM,KAC9B,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GAGxDA,EAAkB,IAAI,OAAO,MAC3B,KAAK,QACP,KAAK,aAAa,cAAc,KAAK,KAAK,IAE1C,KAAK,gBAAgB,YAAY;AAAA,EAGvC;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,aAAa,QAAQ,OAAO,GACjC,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GACtD,KAAK,SACP,KAAK,aAAa,cAAc,KAAK,KAAK;AAAA,EAO9C;AAAA;AAAA,EAIS,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,gBAGKC,EAAS;AAAA,MACf,OAAO;AAAA,MACP,qBAAqB,KAAK,gBAAgB;AAAA,MAC1C,mBAAmB,KAAK,gBAAgB;AAAA,IAAA,CACzC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR;AACF;AA1FaL,EACK,SAAS,CAACF,CAAsB;AAO5CQ,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BP,EAQP,WAAA,eAAA,CAAA;AAsBJM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GA7BpDP,EA8BX,WAAA,QAAA,CAAA;AAUAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvCfP,EAwCX,WAAA,SAAA,CAAA;AAxCWA,IAANM,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBR,CAAA;"}
1	+ {"version":3,"file":"hx-button-group-BJOGWoMa.js","sources":["../../src/components/hx-button-group/hx-button-group.styles.ts","../../src/components/hx-button-group/hx-button-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixButtonGroupStyles = css`\n :host {\n display: inline-flex;\n contain: layout style;\n }\n\n .group {\n display: inline-flex;\n align-items: stretch;\n }\n\n /* ─── Orientation Variants ─── /\n\n .group--horizontal {\n flex-direction: row;\n }\n\n .group--vertical {\n flex-direction: column;\n }\n\n / ─── No Double Borders: Horizontal ─── /\n\n .group--horizontal ::slotted(:not(:first-child)) {\n margin-inline-start: calc(-1 * var(--hx-border-width-thin, 1px));\n }\n\n /* ─── No Double Borders: Vertical ─── /\n\n .group--vertical ::slotted(:not(:first-child)) {\n margin-top: calc(-1 * var(--hx-border-width-thin, 1px));\n }\n\n /* ─── Border Radius: Horizontal — Single child keeps all corners ─── /\n\n .group--horizontal ::slotted(:only-child) {\n --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n / ─── Border Radius: Horizontal — First child keeps left corners ─── /\n\n .group--horizontal ::slotted(:first-child:not(:only-child)) {\n --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem) 0 0\n var(--hx-border-radius-md, 0.375rem);\n }\n\n / ─── Border Radius: Horizontal — Last child keeps right corners ─── /\n\n .group--horizontal ::slotted(:last-child:not(:only-child)) {\n --hx-button-border-radius: 0 var(--hx-border-radius-md, 0.375rem)\n var(--hx-border-radius-md, 0.375rem) 0;\n }\n\n / ─── Border Radius: Horizontal — Middle children have no radius ─── /\n\n .group--horizontal ::slotted(:not(:first-child):not(:last-child)) {\n --hx-button-border-radius: 0;\n }\n\n / ─── Border Radius: Vertical — Single child keeps all corners ─── /\n\n .group--vertical ::slotted(:only-child) {\n --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n / ─── Border Radius: Vertical — First child keeps top corners ─── /\n\n .group--vertical ::slotted(:first-child:not(:only-child)) {\n --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem)\n var(--hx-border-radius-md, 0.375rem) 0 0;\n }\n\n / ─── Border Radius: Vertical — Last child keeps bottom corners ─── /\n\n .group--vertical ::slotted(:last-child:not(:only-child)) {\n --hx-button-border-radius: 0 0 var(--hx-border-radius-md, 0.375rem)\n var(--hx-border-radius-md, 0.375rem);\n }\n\n / ─── Border Radius: Vertical — Middle children have no radius ─── /\n\n .group--vertical ::slotted(:not(:first-child):not(:last-child)) {\n --hx-button-border-radius: 0;\n }\n\n / ─── Z-index: Raise focused child above siblings to show full focus ring ─── /\n\n .group ::slotted(:focus-within) {\n z-index: 1;\n position: relative;\n }\n\n / ─── High Contrast Mode (forced-colors) ─── /\n\n @media (forced-colors: active) {\n /\n * In forced-colors mode, negative margins that collapse borders between grouped\n * buttons can obscure focus rings. Raise focused children so the Highlight\n * outline from hx-button's own forced-colors block is fully visible.\n /\n .group ::slotted(:focus-within) {\n z-index: 2;\n }\n }\n`;\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixButtonGroupStyles } from './hx-button-group.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/\n A container component that groups related hx-button elements into a cohesive\n * horizontal or vertical action set. Eliminates double borders between adjacent\n * buttons and squares off inner border-radius for a unified visual appearance.\n \n Accessibility: Always provide an accessible label via `aria-label` or\n * `aria-labelledby` so screen readers can announce the group purpose.\n \n @summary Groups hx-button elements into a horizontal or vertical action set with shared borders.\n \n @tag hx-button-group\n \n @slot - Default slot accepting hx-button children.\n \n @csspart group - The container div element wrapping all slotted buttons.\n \n @cssprop [--hx-button-group-size=md] - Size token forwarded to child buttons. Accepts 'sm', 'md', or 'lg'.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n /\n@customElement('hx-button-group')\nexport class HelixButtonGroup extends HelixElement {\n static override styles = [helixButtonGroupStyles];\n\n /\n Layout orientation of the button group.\n * @attr orientation\n /\n @property({ type: String, reflect: true })\n get orientation(): 'horizontal' \| 'vertical' {\n return this._orientation;\n }\n set orientation(value: string) {\n if (value !== 'horizontal' && value !== 'vertical') {\n devWarn('hx-button-group', `Invalid orientation \"${value}\", defaulting to \"horizontal\".`);\n value = 'horizontal';\n }\n this._orientation = value as 'horizontal' \| 'vertical';\n }\n /\n Backing store for the orientation property, holding the validated orientation value.\n * @internal\n /\n private _orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Size applied to the button group and cascaded to child buttons via\n * the --hx-button-group-size CSS custom property.\n * @attr hx-size\n /\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' \| 'md' \| 'lg' = 'md';\n\n /\n Accessible label for the button group. Sets aria-label on the host element.\n * Strongly recommended for WCAG 2.1 AA compliance — without it, screen\n * readers announce an unnamed \"group\". For Drupal/Twig compatibility, prefer\n * applying `aria-label` directly as an HTML attribute instead.\n * @attr label\n */\n @property({ type: String })\n label: string = '';\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('size')) {\n this.style.setProperty('--hx-button-group-size', this.size);\n }\n\n if (changedProperties.has('label')) {\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'group');\n this.style.setProperty('--hx-button-group-size', this.size);\n if (this.label) {\n this.setAttribute('aria-label', this.label);\n } else {\n devWarn(\n 'hx-button-group',\n 'Missing accessible label. Provide a `label` attribute so screen readers can announce the group purpose (WCAG 4.1.2).',\n );\n }\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div\n part=\"group\"\n class=${classMap({\n group: true,\n 'group--horizontal': this.orientation === 'horizontal',\n 'group--vertical': this.orientation === 'vertical',\n })}\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-button-group': HelixButtonGroup;\n }\n}\n"],"names":["helixButtonGroupStyles","css","HelixButtonGroup","HelixElement","value","changedProperties","html","classMap","__decorateClass","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC2B/B,IAAMC,IAAN,cAA+BC,EAAa;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GAsBL,KAAQ,eAA0C,cAQlD,KAAA,OAA2B,MAU3B,KAAA,QAAgB;AAAA,EAAA;AAAA,EAhChB,IAAI,cAAyC;AAC3C,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,YAAYC,GAAe;AAC7B,IAAIA,MAAU,gBAAgBA,MAAU,eAEtCA,IAAQ,eAEV,KAAK,eAAeA;AAAA,EACtB;AAAA;AAAA,EA2BS,QAAQC,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,MAAM,KAC9B,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GAGxDA,EAAkB,IAAI,OAAO,MAC3B,KAAK,QACP,KAAK,aAAa,cAAc,KAAK,KAAK,IAE1C,KAAK,gBAAgB,YAAY;AAAA,EAGvC;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,aAAa,QAAQ,OAAO,GACjC,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GACtD,KAAK,SACP,KAAK,aAAa,cAAc,KAAK,KAAK;AAAA,EAO9C;AAAA;AAAA,EAIS,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,gBAGKC,EAAS;AAAA,MACf,OAAO;AAAA,MACP,qBAAqB,KAAK,gBAAgB;AAAA,MAC1C,mBAAmB,KAAK,gBAAgB;AAAA,IAAA,CACzC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKR;AACF;AA1FaL,EACK,SAAS,CAACF,CAAsB;AAO5CQ,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BP,EAQP,WAAA,eAAA,CAAA;AAsBJM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GA7BpDP,EA8BX,WAAA,QAAA,CAAA;AAUAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvCfP,EAwCX,WAAA,SAAA,CAAA;AAxCWA,IAANM,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBR,CAAA;"}

package/dist/shared/{hx-card-ycveujjL.js → hx-card-Dy_FuLfS.js} RENAMED Viewed

@@ -7,17 +7,17 @@ const _ = g`
   :host {
     display: block;
     color: var(--hx-card-color, inherit);
-    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));
   }
   .card {
     display: flex;
     flex-direction: column;
     gap: var(--hx-card-gap, var(--hx-space-4, 1rem));
-    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-card-color, var(--hx-color-neutral-800, #1e293b));
+    background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));
+    color: var(--hx-card-color, var(--hx-color-text-strong, #1e293b));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-card-border-color, var(--hx-color-border-default, #e2e8f0));
     border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));
     overflow: hidden;
     font-family: var(--hx-card-font-family, var(--hx-font-family-sans, sans-serif));
@@ -143,7 +143,7 @@ const _ = g`
     flex: 1;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
-    color: var(--hx-card-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-card-color, var(--hx-color-text-secondary, #475569));
   }
   .card__footer {
@@ -161,7 +161,7 @@ const _ = g`
     padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-card-border-color, var(--hx-color-border-default, #e2e8f0));
     margin-top: auto;
   }
@@ -177,10 +177,10 @@ const _ = g`
     }
   }
 `;
-var b = Object.defineProperty, u = Object.getOwnPropertyDescriptor, i = (a, r, o, d) => {
-  for (var t = d > 1 ? void 0 : d ? u(r, o) : r, c = a.length - 1, l; c >= 0; c--)
-    (l = a[c]) && (t = (d ? l(r, o, t) : l(t)) || t);
-  return d && t && b(r, o, t), t;
+var b = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (a, r, i, d) => {
+  for (var t = d > 1 ? void 0 : d ? u(r, i) : r, c = a.length - 1, l; c >= 0; c--)
+    (l = a[c]) && (t = (d ? l(r, i, t) : l(t)) || t);
+  return d && t && b(r, i, t), t;
 };
 const y = m("hx-card");
 let e = class extends p {
@@ -194,8 +194,8 @@ let e = class extends p {
   }
   /** @internal */
   _onHeadingSlotChange(a) {
-    const o = a.target.assignedNodes({ flatten: !0 });
-    this._hasHeading = o.length > 0, this._headingText = o.map((d) => {
+    const i = a.target.assignedNodes({ flatten: !0 });
+    this._hasHeading = i.length > 0, this._headingText = i.map((d) => {
       var t;
       return ((t = d.textContent) == null ? void 0 : t.trim()) ?? "";
     }).join(" ").trim();
@@ -284,37 +284,37 @@ e.shadowRootOptions = {
   delegatesFocus: !0
 };
 e.styles = [_];
-i([
+o([
   h({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
-i([
+o([
   h({ type: String, reflect: !0 })
 ], e.prototype, "elevation", 2);
-i([
+o([
   h({ type: String, attribute: "hx-href" })
 ], e.prototype, "href", 2);
-i([
+o([
   h({ type: String, attribute: "hx-label" })
 ], e.prototype, "label", 2);
-i([
+o([
   s()
 ], e.prototype, "_hasImage", 2);
-i([
+o([
   s()
 ], e.prototype, "_hasHeading", 2);
-i([
+o([
   s()
 ], e.prototype, "_hasFooter", 2);
-i([
+o([
   s()
 ], e.prototype, "_hasActions", 2);
-i([
+o([
   s()
 ], e.prototype, "_headingText", 2);
-e = i([
+e = o([
   x("hx-card")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-card-ycveujjL.js.map
+//# sourceMappingURL=hx-card-Dy_FuLfS.js.map

package/dist/shared/hx-card-Dy_FuLfS.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-card-Dy_FuLfS.js","sources":["../../src/components/hx-card/hx-card.styles.ts","../../src/components/hx-card/hx-card.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCardStyles = css`\n :host {\n display: block;\n color: var(--hx-card-color, inherit);\n background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));\n }\n\n .card {\n display: flex;\n flex-direction: column;\n gap: var(--hx-card-gap, var(--hx-space-4, 1rem));\n background-color: var(--hx-card-bg, var(--hx-color-surface-default, #ffffff));\n color: var(--hx-card-color, var(--hx-color-text-strong, #1e293b));\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-card-border-color, var(--hx-color-border-default, #e2e8f0));\n border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));\n overflow: hidden;\n font-family: var(--hx-card-font-family, var(--hx-font-family-sans, sans-serif));\n transition:\n box-shadow var(--hx-transition-normal, 250ms ease),\n transform var(--hx-transition-normal, 250ms ease);\n }\n\n /* ─── Elevation Variants ─── */\n\n .card--flat {\n box-shadow: none;\n }\n\n .card--raised {\n box-shadow: var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));\n }\n\n .card--floating {\n box-shadow: var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1));\n }\n\n /* ─── Style Variants ─── */\n\n .card--default {\n /* Default styling — uses base styles */\n }\n\n .card--featured {\n border-color: var(--hx-color-primary-500, #2563eb);\n border-width: var(--hx-border-width-medium, 2px);\n }\n\n .card--compact .card__body {\n padding: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__heading {\n padding-top: var(--hx-space-3, 0.75rem);\n padding-inline-end: var(--hx-space-3, 0.75rem);\n padding-inline-start: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__footer {\n padding-inline-end: var(--hx-space-3, 0.75rem);\n padding-bottom: var(--hx-space-3, 0.75rem);\n padding-inline-start: var(--hx-space-3, 0.75rem);\n }\n\n .card--compact .card__actions {\n padding-inline-end: var(--hx-space-3, 0.75rem);\n padding-bottom: var(--hx-space-3, 0.75rem);\n padding-inline-start: var(--hx-space-3, 0.75rem);\n }\n\n /* ─── Interactive ─── */\n\n .card--interactive {\n cursor: pointer;\n }\n\n .card--interactive:hover {\n box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));\n transform: translateY(var(--hx-transform-lift-md, -2px));\n }\n\n .card--interactive:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .card--interactive:active {\n transform: translateY(0);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .card {\n transition: none;\n }\n\n .card--interactive:hover {\n transform: none;\n }\n\n .card--interactive:active {\n transform: none;\n }\n }\n\n /* ─── Hidden empty slot wrappers ─── */\n\n [hidden] {\n display: none !important;\n }\n\n /* ─── Sections ─── */\n\n .card__image {\n overflow: hidden;\n line-height: 0;\n }\n\n .card__image ::slotted(img) {\n width: 100%;\n aspect-ratio: var(--hx-card-image-aspect-ratio, 16 / 9);\n display: block;\n object-fit: cover;\n }\n\n .card__heading {\n padding-top: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-inline-end: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-bottom: 0;\n padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n font-size: var(--hx-font-size-xl, 1.25rem);\n font-weight: var(--hx-font-weight-semibold, 600);\n line-height: var(--hx-line-height-tight, 1.25);\n }\n\n .card__body {\n padding: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n flex: 1;\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n color: var(--hx-card-color, var(--hx-color-text-secondary, #475569));\n }\n\n .card__footer {\n padding-top: 0;\n padding-inline-end: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n }\n\n .card__actions {\n display: flex;\n gap: var(--hx-space-2, 0.5rem);\n padding-top: var(--hx-space-4, 1rem);\n padding-inline-end: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n border-top: var(--hx-border-width-thin, 1px) solid\n var(--hx-card-border-color, var(--hx-color-border-default, #e2e8f0));\n margin-top: auto;\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .card {\n border-color: CanvasText;\n }\n\n .card__actions {\n border-top-color: CanvasText;\n }\n }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixCardStyles } from './hx-card.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst _nextCardId = createIdCounter('hx-card');\n\n/**\n * A flexible card component for displaying grouped content.\n *\n * @summary Content container with image, heading, body, footer, and action slots.\n *\n * @tag hx-card\n *\n * @slot image - Optional image or media content at the top of the card.\n * @slot heading - The card heading/title content. Use a semantic heading element (h2, h3, etc.) for proper accessibility.\n * @slot - Default slot for the card body content.\n * @slot footer - Optional footer content below the body.\n * @slot actions - Optional action buttons, rendered with a top border separator. Do NOT use together with hx-href (interactive card + focusable actions is an ARIA anti-pattern).\n *\n * @fires {CustomEvent<{href: string, originalEvent: MouseEvent | KeyboardEvent}>} hx-click - Dispatched when an interactive card (with hx-href) is clicked.\n *\n * @csspart card - The outer card container element.\n * @csspart image - The image slot container.\n * @csspart heading - The heading slot container.\n * @csspart body - The body slot container.\n * @csspart footer - The footer slot container.\n * @csspart actions - The actions slot container.\n *\n * @cssprop [--hx-card-bg=var(--hx-color-neutral-0)] - Card background color.\n * @cssprop [--hx-card-color=var(--hx-color-neutral-800)] - Card text color.\n * @cssprop [--hx-card-border-color=var(--hx-color-neutral-200)] - Card border color.\n * @cssprop [--hx-card-border-radius=var(--hx-border-radius-lg)] - Card border radius.\n * @cssprop [--hx-card-padding=var(--hx-space-6)] - Internal padding for card sections.\n * @cssprop [--hx-card-gap=var(--hx-space-4)] - Gap between card sections.\n * @cssprop [--hx-card-image-aspect-ratio=16/9] - Aspect ratio for the image slot.\n * @cssprop [--hx-border-radius-lg] - CSS custom property.\n * @cssprop [--hx-border-width-medium] - Width.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-card-focus-ring-color=var(--hx-focus-ring-color)] - Color.\n * @cssprop [--hx-card-font-family=var(--hx-font-family-sans)] - Font family for card text content.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-font-size-xl] - Font size.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-shadow-lg] - Box shadow.\n * @cssprop [--hx-shadow-md] - Box shadow.\n * @cssprop [--hx-shadow-xl] - Box shadow.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-transform-lift-md] - Transform applied on hover to lift the card.\n * @cssprop [--hx-transition-normal] - Transition timing.\n */\n@customElement('hx-card')\nexport class HelixCard extends HelixElement {\n /** @internal */\n static override shadowRootOptions = {\n ...HelixElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n static override styles = [helixCardStyles];\n\n /**\n * Visual style variant of the card.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'featured' | 'compact' = 'default';\n\n /**\n * Elevation (shadow depth) of the card.\n * @attr elevation\n */\n @property({ type: String, reflect: true })\n elevation: 'flat' | 'raised' | 'floating' = 'flat';\n\n /**\n * Optional URL. When set, the card becomes interactive (clickable)\n * and navigates to this URL on click.\n * Uses the hx-href attribute to avoid conflicting with the native HTML href attribute.\n * @attr hx-href\n */\n @property({ type: String, attribute: 'hx-href' })\n href: string | undefined = undefined;\n\n /**\n * Accessible label for interactive cards. Use this to provide a meaningful\n * description of the card's purpose rather than exposing the raw URL.\n * Only applies when hx-href is set.\n * @attr hx-label\n */\n @property({ type: String, attribute: 'hx-label' })\n label: string | undefined = undefined;\n\n // ─── Slot Detection ───\n\n /**\n * Tracks whether any content is assigned to the image slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasImage = false;\n\n /**\n * Tracks whether any content is assigned to the heading slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasHeading = false;\n\n /**\n * Tracks whether any content is assigned to the footer slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasFooter = false;\n\n /**\n * Tracks whether any content is assigned to the actions slot, controlling slot container visibility.\n * @internal\n */\n @state() private _hasActions = false;\n\n /**\n * Text content extracted from the heading slot, used as a fallback accessible\n * name for interactive cards when no explicit `hx-label` is provided.\n * @internal\n */\n @state() private _headingText = '';\n\n /**\n * Unique identifier for this card instance, used in ARIA attributes.\n * @internal\n */\n private _cardId = _nextCardId();\n /**\n * Unique identifier for the heading element, used in aria-labelledby.\n * @internal\n */\n private _headingId = `${this._cardId}-heading`;\n\n /** @internal */\n private _onImageSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasImage = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n /** @internal */\n private _onHeadingSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasHeading = nodes.length > 0;\n this._headingText = nodes\n .map((n) => n.textContent?.trim() ?? '')\n .join(' ')\n .trim();\n }\n\n /** @internal */\n private _onFooterSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n /** @internal */\n private _onActionsSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasActions = slot.assignedNodes({ flatten: true }).length > 0;\n if (this._hasActions && this.href) {\n devWarn(\n 'hx-card',\n 'Using hx-href (interactive card) together with the actions slot is an ARIA anti-pattern: ' +\n 'interactive controls cannot be nested inside role=\"link\". ' +\n 'Use either hx-href or the actions slot, not both.',\n );\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n // WCAG 4.1.2: interactive cards (with hx-href) must have an accessible name\n if (\n (changedProperties.has('href') || changedProperties.has('label')) &&\n this.href &&\n !this.label &&\n !this._headingText\n ) {\n devWarn(\n 'hx-card',\n \"Interactive card (hx-href is set) is missing an accessible name. Set `hx-label` or provide heading slot content to describe the card's destination or purpose (WCAG 4.1.2).\",\n );\n }\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _dispatchCardClick(originalEvent: MouseEvent | KeyboardEvent): void {\n if (!this.href) return;\n\n /**\n * Dispatched when an interactive card is clicked.\n * Includes the target href in the detail.\n * @event hx-click\n */\n this.dispatchEvent(\n new CustomEvent<{ href: string; originalEvent: MouseEvent | KeyboardEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { href: this.href, originalEvent },\n }),\n );\n }\n\n /** @internal */\n private _handleClick(e: MouseEvent): void {\n this._dispatchCardClick(e);\n }\n\n /** @internal */\n private _handleKeyDown(e: KeyboardEvent): void {\n if (!this.href) return;\n\n // WCAG 2.1.1 / ARIA APG: role=\"link\" activates on Enter only.\n // Space is reserved for scrolling and must not activate links.\n if (e.key === 'Enter') {\n e.preventDefault();\n this._dispatchCardClick(e);\n }\n }\n\n // ─── Render ───\n\n override render() {\n const isInteractive = !!this.href;\n\n const classes = {\n card: true,\n [`card--${this.variant}`]: true,\n [`card--${this.elevation}`]: true,\n 'card--interactive': isInteractive,\n };\n\n return html`\n <div\n part=\"card\"\n class=${classMap(classes)}\n role=${isInteractive ? 'link' : nothing}\n tabindex=${isInteractive ? '0' : nothing}\n aria-label=${isInteractive && this.label ? this.label : nothing}\n aria-labelledby=${this._hasHeading && !this.label ? this._headingId : nothing}\n @click=${this._handleClick}\n @keydown=${this._handleKeyDown}\n >\n <div class=\"card__image\" part=\"image\" ?hidden=${!this._hasImage}>\n <slot name=\"image\" @slotchange=${this._onImageSlotChange}></slot>\n </div>\n\n <div\n class=\"card__heading\"\n part=\"heading\"\n id=${this._headingId}\n ?hidden=${!this._hasHeading}\n >\n <slot name=\"heading\" @slotchange=${this._onHeadingSlotChange}></slot>\n </div>\n\n <div class=\"card__body\" part=\"body\">\n <slot></slot>\n </div>\n\n <div class=\"card__footer\" part=\"footer\" ?hidden=${!this._hasFooter}>\n <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\n </div>\n\n <div class=\"card__actions\" part=\"actions\" ?hidden=${!this._hasActions}>\n <slot name=\"actions\" @slotchange=${this._onActionsSlotChange}></slot>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-card': HelixCard;\n }\n}\n"],"names":["helixCardStyles","css","_nextCardId","createIdCounter","HelixCard","HelixElement","e","slot","nodes","n","_a","changedProperties","originalEvent","isInteractive","classes","html","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-carousel-item-D_dCv61-.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-carousel-item-D_dCv61-.js","sources":["../../src/components/hx-carousel/hx-carousel.styles.ts","../../src/components/hx-carousel/hx-carousel.ts","../../src/components/hx-carousel/hx-carousel-item.styles.ts","../../src/components/hx-carousel/hx-carousel-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCarouselStyles = css`\n :host {\n display: block;\n position: relative;\n }\n\n /* ─── Base ─── /\n\n .base {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-3, 0.75rem);\n }\n\n :host([orientation='vertical']) .base {\n flex-direction: row;\n }\n\n / ─── Navigation ─── /\n\n .navigation {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n }\n\n :host([orientation='vertical']) .navigation {\n flex-direction: column;\n }\n\n .nav-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));\n height: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));\n / WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target /\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);\n border-radius: var(--hx-border-radius-full, 9999px);\n background: var(--hx-color-neutral-0, #ffffff);\n color: var(--hx-color-neutral-700, #334155);\n cursor: pointer;\n padding: 0;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease);\n flex-shrink: 0;\n }\n\n .nav-btn:hover:not([disabled]) {\n background: var(--hx-color-neutral-50, #f8fafc);\n border-color: var(--hx-color-neutral-400, #94a3b8);\n }\n\n .nav-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .nav-btn[disabled] {\n opacity: var(--hx-opacity-disabled, 0.5);\n cursor: not-allowed;\n }\n\n .nav-btn svg {\n width: 1.25em;\n height: 1.25em;\n }\n\n / ─── Play/Pause ─── /\n\n .play-pause-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n / WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target /\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n width: var(--hx-touch-target-min, 2.75rem);\n height: var(--hx-touch-target-min, 2.75rem);\n border: var(--hx-border-width-thin, 1px) solid transparent;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n background: transparent;\n color: var(--hx-color-neutral-500, #64748b);\n cursor: pointer;\n padding: 0;\n font-size: var(--hx-font-size-sm, 0.875rem);\n transition: background-color var(--hx-transition-fast, 150ms ease);\n flex-shrink: 0;\n }\n\n .play-pause-btn:hover {\n background: var(--hx-color-neutral-100, #f1f5f9);\n }\n\n .play-pause-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n / ─── Scroll Container ─── /\n\n .scroll-container-wrapper {\n flex: 1;\n overflow: hidden;\n }\n\n .slide-viewport {\n overflow: hidden;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n .track {\n display: flex;\n transition: transform var(--hx-transition-base, 0.3s ease);\n }\n\n :host([orientation='vertical']) .track {\n flex-direction: column;\n }\n\n / ─── Pagination ─── /\n\n .pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n flex-wrap: wrap;\n }\n\n :host([orientation='vertical']) .pagination {\n flex-direction: column;\n }\n\n .pagination-item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n / WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target /\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n padding: 0;\n border: none;\n cursor: pointer;\n background: transparent;\n border-radius: var(--hx-border-radius-full, 9999px);\n }\n\n .pagination-dot {\n display: block;\n width: var(--hx-carousel-pagination-dot-size, 0.5rem);\n height: var(--hx-carousel-pagination-dot-size, 0.5rem);\n border-radius: var(--hx-border-radius-full, 9999px);\n background: var(--hx-color-neutral-300, #cbd5e1);\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n transform var(--hx-transition-fast, 150ms ease);\n }\n\n .pagination-item[aria-current='true'] .pagination-dot,\n .pagination-item.is-active .pagination-dot {\n background: var(--hx-color-primary-600, #1d4ed8);\n transform: scale(1.25);\n }\n\n .pagination-item:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-full, 9999px);\n }\n\n / ─── Controls row ─── /\n\n .controls {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-3, 0.75rem);\n }\n\n / ─── Live Region ─── /\n\n .live-region {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n / ─── Reduced Motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .track,\n .nav-btn,\n .pagination-dot,\n .play-pause-btn {\n transition: none;\n }\n }\n\n / ─── Forced Colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n .nav-btn {\n border-color: ButtonText;\n color: ButtonText;\n }\n\n .play-pause-btn {\n border-color: ButtonText;\n color: ButtonText;\n }\n\n .pagination-dot {\n border: 1px solid CanvasText;\n }\n\n .pagination-item[aria-current='true'] .pagination-dot,\n .pagination-item.is-active .pagination-dot {\n background: Highlight;\n border-color: Highlight;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixCarouselStyles } from './hx-carousel.styles.js';\nimport type { HelixCarouselItem } from './hx-carousel-item.js';\n\n// ─── Module-level SVG icon constants ───\n\nconst _svgChevronLeft = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"15 18 9 12 15 6\"></polyline>\n</svg>`;\n\nconst _svgChevronUp = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"18 15 12 9 6 15\"></polyline>\n</svg>`;\n\nconst _svgChevronRight = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n</svg>`;\n\nconst _svgChevronDown = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n</svg>`;\n\nconst _svgPlay = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\"\n>\n <polygon points=\"5 3 19 12 5 21 5 3\"></polygon>\n</svg>`;\n\nconst _svgPause = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\"\n>\n <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"></rect>\n <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"></rect>\n</svg>`;\n\n/\n A scrollable carousel/slider for images or content slides.\n \n @summary Scrollable carousel with navigation, pagination, autoplay, and an accessible label.\n \n @tag hx-carousel\n \n @slot - `hx-carousel-item` elements (the slides).\n * @slot next-button - Custom next navigation button.\n * @slot previous-button - Custom previous navigation button.\n \n @fires {CustomEvent<{index: number, slide: HelixCarouselItem}>} hx-slide-change - Dispatched when the active slide changes.\n \n @csspart base - The outer wrapper element.\n * @csspart slide-viewport - The slide viewport/overflow container.\n * @csspart pagination - The pagination dot container.\n * @csspart pagination-item - Individual pagination dot button.\n * @csspart navigation - The previous/next button wrapper.\n * @csspart prev-button - The previous navigation button.\n * @csspart next-button - The next navigation button.\n * @csspart play-pause-btn - The autoplay play/pause toggle button.\n \n @cssprop [--hx-carousel-gap=0px] - Gap between slides.\n * @cssprop [--hx-carousel-slide-width=100%] - Width override for each slide.\n * @cssprop [--hx-carousel-nav-btn-size=2.5rem] - Size of previous/next navigation buttons.\n * @cssprop [--hx-carousel-pagination-dot-size=0.5rem] - Size of pagination dots.\n /\n@customElement('hx-carousel')\nexport class HelixCarousel extends HelixElement {\n static override styles = [helixCarouselStyles];\n\n /\n Accessible label identifying this carousel to assistive technology.\n * When multiple carousels appear on the same page, each must have a unique label.\n * @attr label\n /\n @property({ type: String, reflect: true })\n label = 'Carousel';\n\n /\n Whether the carousel wraps around from last to first slide and vice-versa.\n * @attr loop\n /\n @property({ type: Boolean, reflect: true })\n loop = false;\n\n /\n Whether the carousel auto-advances slides.\n * Automatically pauses on hover, focus, and when prefers-reduced-motion is active.\n * @attr autoplay\n /\n @property({ type: Boolean, reflect: true })\n autoplay = false;\n\n /\n Milliseconds between auto-advance transitions.\n * @attr autoplay-interval\n /\n @property({ type: Number, attribute: 'autoplay-interval' })\n autoplayInterval = 3000;\n\n /\n Number of slides visible at once.\n * @attr slides-per-page\n /\n @property({ type: Number, attribute: 'slides-per-page' })\n slidesPerPage = 1;\n\n /\n Number of slides to advance per navigation action.\n * @attr slides-per-move\n /\n @property({ type: Number, attribute: 'slides-per-move' })\n slidesPerMove = 1;\n\n /\n Scroll axis of the carousel.\n * @attr orientation\n /\n @property({ type: String, reflect: true })\n orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Whether click-drag scrolling is enabled.\n * @attr mouse-dragging\n /\n @property({ type: Boolean, attribute: 'mouse-dragging', reflect: true })\n mouseDragging = false;\n\n /\n Accessible label for the previous slide button.\n * @attr label-prev-slide\n /\n @property({ type: String, attribute: 'label-prev-slide' })\n labelPrevSlide = 'Previous slide';\n\n /\n Accessible label for the next slide button.\n * @attr label-next-slide\n /\n @property({ type: String, attribute: 'label-next-slide' })\n labelNextSlide = 'Next slide';\n\n /\n Accessible label for the autoplay pause button.\n * @attr label-pause-autoplay\n /\n @property({ type: String, attribute: 'label-pause-autoplay' })\n labelPauseAutoplay = 'Pause autoplay';\n\n /\n Accessible label for the autoplay play button.\n * @attr label-play-autoplay\n /\n @property({ type: String, attribute: 'label-play-autoplay' })\n labelPlayAutoplay = 'Play autoplay';\n\n /\n Generates the live-region text for a slide position.\n * @param index - 1-based slide index\n * @param total - total slide count\n /\n @property({ attribute: false })\n labelSlideOf: (index: number, total: number) => string = (index, total) =>\n `Slide ${index} of ${total}`;\n\n /\n Index of the currently visible slide.\n * @internal\n /\n @state() private _currentIndex = 0;\n /\n Array of carousel item elements assigned to the default slot.\n * @internal\n /\n @state() private _slides: HelixCarouselItem[] = [];\n /\n Whether the autoplay is currently active and advancing slides.\n * @internal\n /\n @state() private _isPlaying = false;\n /\n Text content for the ARIA live region announcing slide changes.\n * @internal\n /\n @state() private _liveText = '';\n /* @internal /\n @state() private _livePolite = true;\n\n /\n Reference to the active autoplay interval timer, or null when stopped.\n * @internal\n /\n private _autoplayTimer: ReturnType<typeof setInterval> \| null = null;\n /\n Whether the user has requested reduced motion via the OS media preference.\n * @internal\n /\n private _reducedMotion = false;\n /\n MediaQueryList instance for monitoring the prefers-reduced-motion media feature.\n * @internal\n /\n private _mql: MediaQueryList \| null = null;\n /\n Whether the carousel is currently being hovered, used to pause autoplay on hover.\n * @internal\n /\n private _isHovered = false;\n /\n Whether a descendant of the carousel currently has focus, used to pause autoplay on focus.\n * @internal\n /\n private _isFocused = false;\n\n // ─── Drag state ───\n /\n Pointer coordinate at the start of a mouse drag gesture.\n * @internal\n /\n private _dragStartCoord = 0;\n /\n Whether a mouse drag gesture is currently in progress.\n * @internal\n /\n private _isDragging = false;\n /\n Whether the pointer has moved beyond the drag threshold during the current drag gesture.\n * @internal\n /\n private _dragMoved = false;\n /\n Touch coordinate at the start of a touch swipe gesture.\n * @internal\n /\n private _touchStartCoord = 0;\n /\n Whether the touch has moved beyond the swipe threshold during the current touch gesture.\n * @internal\n /\n private _touchMoved = false;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n // Guard for SSR — window.matchMedia is unavailable server-side\n if (typeof window !== 'undefined') {\n this._mql = window.matchMedia('(prefers-reduced-motion: reduce)');\n this._reducedMotion = this._mql.matches;\n this._mql.addEventListener('change', this._handleMotionChange);\n }\n\n this.addEventListener('mouseenter', this._handleMouseEnter);\n this.addEventListener('mouseleave', this._handleMouseLeave);\n this.addEventListener('focusin', this._handleFocusIn);\n this.addEventListener('focusout', this._handleFocusOut);\n this.addEventListener('keydown', this._handleKeydown);\n // Touch events are registered directly on the scroll-container in the template\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._mql?.removeEventListener('change', this._handleMotionChange);\n this._stopAutoplay();\n this.removeEventListener('mouseenter', this._handleMouseEnter);\n this.removeEventListener('mouseleave', this._handleMouseLeave);\n this.removeEventListener('focusin', this._handleFocusIn);\n this.removeEventListener('focusout', this._handleFocusOut);\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n override firstUpdated(): void {\n this._syncSlides();\n if (this.autoplay && !this._reducedMotion) {\n this._startAutoplay();\n }\n }\n\n // ─── Slide Management ───\n\n /* @internal /\n private _syncSlides(): void {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (!slot) return;\n\n const items = slot\n .assignedElements({ flatten: true })\n .filter((el) => el.tagName.toLowerCase() === 'hx-carousel-item') as HelixCarouselItem[];\n\n this._slides = items;\n\n // Update aria labels on each item\n items.forEach((item, i) => {\n item.slideIndex = i;\n item.totalSlides = items.length;\n const slideWidth = `${100 / this.slidesPerPage}%`;\n (item as HTMLElement).style.setProperty('--_hx-carousel-slide-width', slideWidth);\n });\n\n // Clamp currentIndex if slides changed\n if (this._currentIndex >= items.length) {\n this._currentIndex = Math.max(0, items.length - 1);\n }\n }\n\n /* @internal /\n private _handleSlotChange(): void {\n this._syncSlides();\n }\n\n // ─── Navigation ───\n\n /\n Maximum valid slide index accounting for the number of slides visible per page.\n * @internal\n /\n private get _maxIndex(): number {\n return Math.max(0, this._slides.length - this.slidesPerPage);\n }\n\n goTo(index: number): void {\n if (this._slides.length === 0) return;\n\n let next = index;\n if (this.loop) {\n next = ((index % this._slides.length) + this._slides.length) % this._slides.length;\n } else {\n next = Math.max(0, Math.min(index, this._maxIndex));\n }\n\n if (next === this._currentIndex) return;\n\n this._currentIndex = next;\n this._liveText = this.labelSlideOf(next + 1, this._slides.length);\n const slide = this._slides[next];\n if (!slide) return;\n this.dispatchEvent(\n new CustomEvent<{ index: number; slide: HelixCarouselItem \| undefined }>('hx-slide-change', {\n bubbles: true,\n composed: true,\n detail: { index: next, slide },\n }),\n );\n }\n\n next(): void {\n const nextIndex = this._currentIndex + this.slidesPerMove;\n if (!this.loop && nextIndex > this._maxIndex) {\n return;\n }\n this._livePolite = true;\n this.goTo(nextIndex);\n }\n\n previous(): void {\n const prevIndex = this._currentIndex - this.slidesPerMove;\n if (!this.loop && prevIndex < 0) {\n return;\n }\n this._livePolite = true;\n this.goTo(prevIndex);\n }\n\n // ─── Autoplay ───\n\n /\n Callback invoked on each autoplay interval tick to advance to the next slide.\n * @internal\n /\n private _autoplayTick = (): void => {\n this._livePolite = false;\n if (this.loop) {\n this.goTo(this._currentIndex + this.slidesPerMove);\n } else if (this._currentIndex < this._maxIndex) {\n this.goTo(this._currentIndex + this.slidesPerMove);\n } else {\n this.goTo(0);\n }\n };\n\n /* @internal /\n private _startAutoplay(): void {\n if (this._autoplayTimer !== null) return;\n this._isPlaying = true;\n this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval);\n }\n\n /* @internal /\n private _stopAutoplay(): void {\n if (this._autoplayTimer !== null) {\n clearInterval(this._autoplayTimer);\n this._autoplayTimer = null;\n }\n this._isPlaying = false;\n }\n\n /* @internal /\n private _toggleAutoplay(): void {\n if (this._isPlaying) {\n this._stopAutoplay();\n } else if (!this._reducedMotion) {\n this._startAutoplay();\n }\n }\n\n /* @internal /\n private _pauseAutoplay(): void {\n if (!this._isPlaying \|\| this._autoplayTimer === null) return;\n clearInterval(this._autoplayTimer);\n this._autoplayTimer = null;\n }\n\n /* @internal /\n private _resumeAutoplay(): void {\n if (!this.autoplay \|\| !this._isPlaying \|\| this._reducedMotion) return;\n if (this._autoplayTimer !== null) return;\n this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval);\n }\n\n // ─── Event Handlers ───\n\n /\n Handles changes to the prefers-reduced-motion media query, stopping or resuming autoplay accordingly.\n * @internal\n /\n private _handleMotionChange = (e: MediaQueryListEvent): void => {\n this._reducedMotion = e.matches;\n if (this._reducedMotion) {\n this._stopAutoplay();\n } else if (this.autoplay && !this._isHovered && !this._isFocused) {\n this._startAutoplay();\n }\n };\n\n /\n Handles the mouseenter event to pause autoplay while the user hovers over the carousel.\n * @internal\n /\n private _handleMouseEnter = (): void => {\n this._isHovered = true;\n this._pauseAutoplay();\n };\n\n /\n Handles the mouseleave event to resume autoplay when the user stops hovering.\n * @internal\n /\n private _handleMouseLeave = (): void => {\n this._isHovered = false;\n if (!this._isFocused) {\n this._resumeAutoplay();\n }\n };\n\n /\n Handles the focusin event to pause autoplay while a descendant has focus.\n * @internal\n /\n private _handleFocusIn = (): void => {\n this._isFocused = true;\n this._pauseAutoplay();\n };\n\n /\n Handles the focusout event to resume autoplay when focus leaves the carousel.\n * @internal\n /\n private _handleFocusOut = (): void => {\n this._isFocused = false;\n if (!this._isHovered) {\n this._resumeAutoplay();\n }\n };\n\n /\n Handles keyboard navigation to move between slides using arrow, Home, and End keys.\n * @internal\n /\n private _handleKeydown = (e: KeyboardEvent): void => {\n if (this.orientation === 'horizontal') {\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n this.previous();\n } else if (e.key === 'ArrowRight') {\n e.preventDefault();\n this.next();\n }\n } else {\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n this.previous();\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n this.next();\n }\n }\n\n if (e.key === 'Home') {\n e.preventDefault();\n this.goTo(0);\n } else if (e.key === 'End') {\n e.preventDefault();\n this.goTo(this._slides.length - 1);\n }\n };\n\n // ─── Drag Handlers ───\n\n /* @internal /\n private _handleDragStart(e: MouseEvent): void {\n if (!this.mouseDragging) return;\n this._isDragging = true;\n this._dragMoved = false;\n this._dragStartCoord = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n (e.currentTarget as HTMLElement).style.cursor = 'grabbing';\n e.preventDefault();\n }\n\n /* @internal /\n private _handleDragMove(e: MouseEvent): void {\n if (!this._isDragging) return;\n const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n const diff = current - this._dragStartCoord;\n if (Math.abs(diff) > 5) {\n this._dragMoved = true;\n }\n }\n\n /* @internal /\n private _handleDragEnd(e: MouseEvent): void {\n if (!this._isDragging) return;\n const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n const diff = current - this._dragStartCoord;\n const threshold = 50;\n if (this._dragMoved) {\n if (diff > threshold) {\n this.previous();\n } else if (diff < -threshold) {\n this.next();\n }\n }\n this._isDragging = false;\n this._dragMoved = false;\n (e.currentTarget as HTMLElement).style.cursor = '';\n }\n\n // ─── Touch Handlers ───\n\n /* @internal /\n private _handleTouchStart(e: TouchEvent): void {\n if (!this.mouseDragging) return;\n const touch = e.touches[0];\n if (!touch) return;\n this._isDragging = true;\n this._touchMoved = false;\n this._touchStartCoord = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n }\n\n /* @internal /\n private _handleTouchMove(e: TouchEvent): void {\n if (!this._isDragging) return;\n const touch = e.touches[0];\n if (!touch) return;\n const current = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n const diff = current - this._touchStartCoord;\n if (Math.abs(diff) > 5) {\n this._touchMoved = true;\n }\n }\n\n /* @internal /\n private _handleTouchEnd(e: TouchEvent): void {\n if (!this._isDragging) return;\n const touch = e.changedTouches[0];\n if (!touch) return;\n const current = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n const diff = current - this._touchStartCoord;\n const threshold = 50;\n if (this._touchMoved) {\n if (diff > threshold) {\n this.previous();\n } else if (diff < -threshold) {\n this.next();\n }\n }\n this._isDragging = false;\n this._touchMoved = false;\n }\n\n /* @internal /\n private _goToManual(index: number): void {\n this._livePolite = true;\n this.goTo(index);\n }\n\n // ─── Computed ───\n\n /\n CSS transform value applied to the slide track to scroll to the current index.\n * @internal\n /\n private get _trackTransform(): string {\n const slideSize = 100 / this.slidesPerPage;\n const offset = this._currentIndex slideSize;\n return this.orientation === 'horizontal'\n ? `translateX(-${offset}%)`\n : `translateY(-${offset}%)`;\n }\n\n /*\n Whether the previous navigation button should be enabled.\n * @internal\n /\n private get _canGoPrev(): boolean {\n return this.loop \|\| this._currentIndex > 0;\n }\n\n /\n Whether the next navigation button should be enabled.\n * @internal\n /\n private get _canGoNext(): boolean {\n return this.loop \|\| this._currentIndex < this._maxIndex;\n }\n\n // ─── Render Helpers ───\n\n /* @internal /\n private _renderNavigation() {\n return html`\n <div class=\"navigation\" part=\"navigation\">\n <slot name=\"previous-button\">\n <button\n class=\"nav-btn\"\n part=\"prev-button\"\n type=\"button\"\n aria-label=${this.labelPrevSlide}\n ?disabled=${!this._canGoPrev}\n @click=${() => this.previous()}\n >\n ${this._renderPrevIcon()}\n </button>\n </slot>\n ${this.autoplay\n ? html`\n <button\n class=\"play-pause-btn\"\n part=\"play-pause-btn\"\n type=\"button\"\n aria-label=${this._isPlaying ? this.labelPauseAutoplay : this.labelPlayAutoplay}\n @click=${() => this._toggleAutoplay()}\n >\n ${this._isPlaying ? this._renderPauseIcon() : this._renderPlayIcon()}\n </button>\n `\n : nothing}\n <slot name=\"next-button\">\n <button\n class=\"nav-btn\"\n part=\"next-button\"\n type=\"button\"\n aria-label=${this.labelNextSlide}\n ?disabled=${!this._canGoNext}\n @click=${() => this.next()}\n >\n ${this._renderNextIcon()}\n </button>\n </slot>\n </div>\n `;\n }\n\n /* @internal /\n private _renderPagination() {\n const count = this._slides.length;\n if (count <= 1) return nothing;\n const dots = Array.from({ length: count }, (_, i) => i);\n return html`\n <div class=\"controls\">\n <div class=\"pagination\" part=\"pagination\">\n ${dots.map(\n (i) => html`\n <button\n class=${classMap({\n 'pagination-item': true,\n 'is-active': i === this._currentIndex,\n })}\n part=\"pagination-item\"\n type=\"button\"\n aria-label=${this.labelSlideOf(i + 1, count)}\n aria-current=${i === this._currentIndex ? 'true' : nothing}\n @click=${() => this._goToManual(i)}\n >\n <span class=\"pagination-dot\"></span>\n </button>\n `,\n )}\n </div>\n </div>\n `;\n }\n\n /* @internal /\n private _renderPrevIcon() {\n return this.orientation === 'horizontal' ? _svgChevronLeft : _svgChevronUp;\n }\n\n /* @internal /\n private _renderNextIcon() {\n return this.orientation === 'horizontal' ? _svgChevronRight : _svgChevronDown;\n }\n\n /* @internal /\n private _renderPlayIcon() {\n return _svgPlay;\n }\n\n /* @internal /\n private _renderPauseIcon() {\n return _svgPause;\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div\n class=\"base\"\n part=\"base\"\n role=\"region\"\n aria-label=${this.label}\n aria-roledescription=\"carousel\"\n >\n <div\n class=\"live-region\"\n role=\"status\"\n aria-live=${this._livePolite ? 'polite' : 'off'}\n aria-atomic=\"true\"\n >\n ${this._liveText}\n </div>\n ${this._renderNavigation()}\n <div class=\"scroll-container-wrapper\">\n <div\n class=\"slide-viewport\"\n part=\"slide-viewport\"\n aria-live=\"polite\"\n aria-atomic=\"false\"\n @mousedown=${this._handleDragStart}\n @mousemove=${this._handleDragMove}\n @mouseup=${this._handleDragEnd}\n @mouseleave=${this._handleDragEnd}\n @touchstart=${this._handleTouchStart}\n @touchmove=${this._handleTouchMove}\n @touchend=${this._handleTouchEnd}\n >\n <div class=\"track\" style=\"transform: ${this._trackTransform};\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n </div>\n ${this._renderPagination()}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-carousel': HelixCarousel;\n }\n}\n","import { css } from 'lit';\n\nexport const helixCarouselItemStyles = css`\n :host {\n display: block;\n flex-shrink: 0;\n width: var(--_hx-carousel-slide-width, 100%);\n box-sizing: border-box;\n }\n\n .slide-group {\n height: 100%;\n outline: none;\n }\n\n .slide-group:focus-visible {\n outline: var(--hx-focus-ring-width) solid var(--hx-focus-ring-color);\n outline-offset: var(--hx-focus-ring-offset);\n }\n\n / ─── High Contrast Mode (forced-colors) ─── /\n\n @media (forced-colors: active) {\n .slide-group:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixCarouselItemStyles } from './hx-carousel-item.styles.js';\n\n/\n A wrapper for individual carousel slides.\n \n @summary Individual slide wrapper for use inside hx-carousel.\n \n @tag hx-carousel-item\n \n @slot - Slide content.\n \n @csspart slide - The slide wrapper element.\n /\n@customElement('hx-carousel-item')\nexport class HelixCarouselItem extends HelixElement {\n static override styles = [helixCarouselItemStyles];\n\n /\n The 0-based index of this slide within the carousel. Set by hx-carousel.\n * @attr slide-index\n /\n @property({ type: Number, attribute: 'slide-index' })\n slideIndex = 0;\n\n /\n Total number of slides in the carousel. Set by hx-carousel.\n * @attr total-slides\n */\n @property({ type: Number, attribute: 'total-slides' })\n totalSlides = 0;\n\n override render() {\n const label = `Slide ${this.slideIndex + 1} of ${this.totalSlides}`;\n return html`\n <div class=\"slide-group\" part=\"slide\" role=\"group\" aria-label=${label} tabindex=\"-1\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-carousel-item': HelixCarouselItem;\n }\n}\n"],"names":["helixCarouselStyles","css","_svgChevronLeft","html","_svgChevronUp","_svgChevronRight","_svgChevronDown","_svgPlay","_svgPause","HelixCarousel","HelixElement","index","total","e","_a","slot","items","el","item","i","slideWidth","next","slide","nextIndex","prevIndex","diff","threshold","touch","slideSize","offset","nothing","count","dots","_","classMap","__decorateClass","property","state","customElement","helixCarouselItemStyles","HelixCarouselItem","label"],"mappings":";;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACQnC,MAAMC,IAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAalBC,IAAgBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAahBE,IAAmBF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAanBG,IAAkBH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAalBI,IAAWJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAWXK,IAAYL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCX,IAAMM,IAAN,cAA4BC,EAAa;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,QAAQ,YAOR,KAAA,OAAO,IAQP,KAAA,WAAW,IAOX,KAAA,mBAAmB,KAOnB,KAAA,gBAAgB,GAOhB,KAAA,gBAAgB,GAOhB,KAAA,cAAyC,cAOzC,KAAA,gBAAgB,IAOhB,KAAA,iBAAiB,kBAOjB,KAAA,iBAAiB,cAOjB,KAAA,qBAAqB,kBAOrB,KAAA,oBAAoB,iBAQpB,KAAA,eAAyD,CAACC,GAAOC,MAC/D,SAASD,CAAK,OAAOC,CAAK,IAMnB,KAAQ,gBAAgB,GAKxB,KAAQ,UAA+B,CAAA,GAKvC,KAAQ,aAAa,IAKrB,KAAQ,YAAY,IAEpB,KAAQ,cAAc,IAM/B,KAAQ,iBAAwD,MAKhE,KAAQ,iBAAiB,IAKzB,KAAQ,OAA8B,MAKtC,KAAQ,aAAa,IAKrB,KAAQ,aAAa,IAOrB,KAAQ,kBAAkB,GAK1B,KAAQ,cAAc,IAKtB,KAAQ,aAAa,IAKrB,KAAQ,mBAAmB,GAK3B,KAAQ,cAAc,IAmItB,KAAQ,gBAAgB,MAAY;AAClC,WAAK,cAAc,IACf,KAAK,OACP,KAAK,KAAK,KAAK,gBAAgB,KAAK,aAAa,IACxC,KAAK,gBAAgB,KAAK,YACnC,KAAK,KAAK,KAAK,gBAAgB,KAAK,aAAa,IAEjD,KAAK,KAAK,CAAC;AAAA,IAEf,GA+CA,KAAQ,sBAAsB,CAACC,MAAiC;AAC9D,WAAK,iBAAiBA,EAAE,SACpB,KAAK,iBACP,KAAK,cAAA,IACI,KAAK,YAAY,CAAC,KAAK,cAAc,CAAC,KAAK,cACpD,KAAK,eAAA;AAAA,IAET,GAMA,KAAQ,oBAAoB,MAAY;AACtC,WAAK,aAAa,IAClB,KAAK,eAAA;AAAA,IACP,GAMA,KAAQ,oBAAoB,MAAY;AACtC,WAAK,aAAa,IACb,KAAK,cACR,KAAK,gBAAA;AAAA,IAET,GAMA,KAAQ,iBAAiB,MAAY;AACnC,WAAK,aAAa,IAClB,KAAK,eAAA;AAAA,IACP,GAMA,KAAQ,kBAAkB,MAAY;AACpC,WAAK,aAAa,IACb,KAAK,cACR,KAAK,gBAAA;AAAA,IAET,GAMA,KAAQ,iBAAiB,CAACA,MAA2B;AACnD,MAAI,KAAK,gBAAgB,eACnBA,EAAE,QAAQ,eACZA,EAAE,eAAA,GACF,KAAK,SAAA,KACIA,EAAE,QAAQ,iBACnBA,EAAE,eAAA,GACF,KAAK,KAAA,KAGHA,EAAE,QAAQ,aACZA,EAAE,eAAA,GACF,KAAK,SAAA,KACIA,EAAE,QAAQ,gBACnBA,EAAE,eAAA,GACF,KAAK,KAAA,IAILA,EAAE,QAAQ,UACZA,EAAE,eAAA,GACF,KAAK,KAAK,CAAC,KACFA,EAAE,QAAQ,UACnBA,EAAE,eAAA,GACF,KAAK,KAAK,KAAK,QAAQ,SAAS,CAAC;AAAA,IAErC;AAAA,EAAA;AAAA;AAAA,EAtQS,oBAA0B;AACjC,UAAM,kBAAA,GAGF,OAAO,SAAW,QACpB,KAAK,OAAO,OAAO,WAAW,kCAAkC,GAChE,KAAK,iBAAiB,KAAK,KAAK,SAChC,KAAK,KAAK,iBAAiB,UAAU,KAAK,mBAAmB,IAG/D,KAAK,iBAAiB,cAAc,KAAK,iBAAiB,GAC1D,KAAK,iBAAiB,cAAc,KAAK,iBAAiB,GAC1D,KAAK,iBAAiB,WAAW,KAAK,cAAc,GACpD,KAAK,iBAAiB,YAAY,KAAK,eAAe,GACtD,KAAK,iBAAiB,WAAW,KAAK,cAAc;AAAA,EAEtD;AAAA,EAES,uBAA6B;;AACpC,UAAM,qBAAA,IACNC,IAAA,KAAK,SAAL,QAAAA,EAAW,oBAAoB,UAAU,KAAK,sBAC9C,KAAK,cAAA,GACL,KAAK,oBAAoB,cAAc,KAAK,iBAAiB,GAC7D,KAAK,oBAAoB,cAAc,KAAK,iBAAiB,GAC7D,KAAK,oBAAoB,WAAW,KAAK,cAAc,GACvD,KAAK,oBAAoB,YAAY,KAAK,eAAe,GACzD,KAAK,oBAAoB,WAAW,KAAK,cAAc;AAAA,EACzD;AAAA,EAES,eAAqB;AAC5B,SAAK,YAAA,GACD,KAAK,YAAY,CAAC,KAAK,kBACzB,KAAK,eAAA;AAAA,EAET;AAAA;AAAA;AAAA,EAKQ,cAAoB;;AAC1B,UAAMC,KAAOD,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAC7D,QAAI,CAACC,EAAM;AAEX,UAAMC,IAAQD,EACX,iBAAiB,EAAE,SAAS,GAAA,CAAM,EAClC,OAAO,CAACE,MAAOA,EAAG,QAAQ,YAAA,MAAkB,kBAAkB;AAEjE,SAAK,UAAUD,GAGfA,EAAM,QAAQ,CAACE,GAAMC,MAAM;AACzB,MAAAD,EAAK,aAAaC,GAClBD,EAAK,cAAcF,EAAM;AACzB,YAAMI,IAAa,GAAG,MAAM,KAAK,aAAa;AAC7C,MAAAF,EAAqB,MAAM,YAAY,8BAA8BE,CAAU;AAAA,IAClF,CAAC,GAGG,KAAK,iBAAiBJ,EAAM,WAC9B,KAAK,gBAAgB,KAAK,IAAI,GAAGA,EAAM,SAAS,CAAC;AAAA,EAErD;AAAA;AAAA,EAGQ,oBAA0B;AAChC,SAAK,YAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAY,YAAoB;AAC9B,WAAO,KAAK,IAAI,GAAG,KAAK,QAAQ,SAAS,KAAK,aAAa;AAAA,EAC7D;AAAA,EAEA,KAAKL,GAAqB;AACxB,QAAI,KAAK,QAAQ,WAAW,EAAG;AAE/B,QAAIU,IAAOV;AAOX,QANI,KAAK,OACPU,KAASV,IAAQ,KAAK,QAAQ,SAAU,KAAK,QAAQ,UAAU,KAAK,QAAQ,SAE5EU,IAAO,KAAK,IAAI,GAAG,KAAK,IAAIV,GAAO,KAAK,SAAS,CAAC,GAGhDU,MAAS,KAAK,cAAe;AAEjC,SAAK,gBAAgBA,GACrB,KAAK,YAAY,KAAK,aAAaA,IAAO,GAAG,KAAK,QAAQ,MAAM;AAChE,UAAMC,IAAQ,KAAK,QAAQD,CAAI;AAC/B,IAAKC,KACL,KAAK;AAAA,MACH,IAAI,YAAqE,mBAAmB;AAAA,QAC1F,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,OAAOD,GAAM,OAAAC,EAAA;AAAA,MAAM,CAC9B;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,OAAa;AACX,UAAMC,IAAY,KAAK,gBAAgB,KAAK;AAC5C,IAAI,CAAC,KAAK,QAAQA,IAAY,KAAK,cAGnC,KAAK,cAAc,IACnB,KAAK,KAAKA,CAAS;AAAA,EACrB;AAAA,EAEA,WAAiB;AACf,UAAMC,IAAY,KAAK,gBAAgB,KAAK;AAC5C,IAAI,CAAC,KAAK,QAAQA,IAAY,MAG9B,KAAK,cAAc,IACnB,KAAK,KAAKA,CAAS;AAAA,EACrB;AAAA;AAAA,EAoBQ,iBAAuB;AAC7B,IAAI,KAAK,mBAAmB,SAC5B,KAAK,aAAa,IAClB,KAAK,iBAAiB,YAAY,KAAK,eAAe,KAAK,gBAAgB;AAAA,EAC7E;AAAA;AAAA,EAGQ,gBAAsB;AAC5B,IAAI,KAAK,mBAAmB,SAC1B,cAAc,KAAK,cAAc,GACjC,KAAK,iBAAiB,OAExB,KAAK,aAAa;AAAA,EACpB;AAAA;AAAA,EAGQ,kBAAwB;AAC9B,IAAI,KAAK,aACP,KAAK,cAAA,IACK,KAAK,kBACf,KAAK,eAAA;AAAA,EAET;AAAA;AAAA,EAGQ,iBAAuB;AAC7B,IAAI,CAAC,KAAK,cAAc,KAAK,mBAAmB,SAChD,cAAc,KAAK,cAAc,GACjC,KAAK,iBAAiB;AAAA,EACxB;AAAA;AAAA,EAGQ,kBAAwB;AAC9B,IAAI,CAAC,KAAK,YAAY,CAAC,KAAK,cAAc,KAAK,kBAC3C,KAAK,mBAAmB,SAC5B,KAAK,iBAAiB,YAAY,KAAK,eAAe,KAAK,gBAAgB;AAAA,EAC7E;AAAA;AAAA;AAAA,EA4FQ,iBAAiBX,GAAqB;AAC5C,IAAK,KAAK,kBACV,KAAK,cAAc,IACnB,KAAK,aAAa,IAClB,KAAK,kBAAkB,KAAK,gBAAgB,eAAeA,EAAE,UAAUA,EAAE,SACxEA,EAAE,cAA8B,MAAM,SAAS,YAChDA,EAAE,eAAA;AAAA,EACJ;AAAA;AAAA,EAGQ,gBAAgBA,GAAqB;AAC3C,QAAI,CAAC,KAAK,YAAa;AAEvB,UAAMY,KADU,KAAK,gBAAgB,eAAeZ,EAAE,UAAUA,EAAE,WAC3C,KAAK;AAC5B,IAAI,KAAK,IAAIY,CAAI,IAAI,MACnB,KAAK,aAAa;AAAA,EAEtB;AAAA;AAAA,EAGQ,eAAeZ,GAAqB;AAC1C,QAAI,CAAC,KAAK,YAAa;AAEvB,UAAMY,KADU,KAAK,gBAAgB,eAAeZ,EAAE,UAAUA,EAAE,WAC3C,KAAK,iBACtBa,IAAY;AAClB,IAAI,KAAK,eACHD,IAAOC,IACT,KAAK,SAAA,IACID,IAAO,CAACC,KACjB,KAAK,KAAA,IAGT,KAAK,cAAc,IACnB,KAAK,aAAa,IACjBb,EAAE,cAA8B,MAAM,SAAS;AAAA,EAClD;AAAA;AAAA;AAAA,EAKQ,kBAAkBA,GAAqB;AAC7C,QAAI,CAAC,KAAK,cAAe;AACzB,UAAMc,IAAQd,EAAE,QAAQ,CAAC;AACzB,IAAKc,MACL,KAAK,cAAc,IACnB,KAAK,cAAc,IACnB,KAAK,mBAAmB,KAAK,gBAAgB,eAAeA,EAAM,UAAUA,EAAM;AAAA,EACpF;AAAA;AAAA,EAGQ,iBAAiBd,GAAqB;AAC5C,QAAI,CAAC,KAAK,YAAa;AACvB,UAAMc,IAAQd,EAAE,QAAQ,CAAC;AACzB,QAAI,CAACc,EAAO;AAEZ,UAAMF,KADU,KAAK,gBAAgB,eAAeE,EAAM,UAAUA,EAAM,WACnD,KAAK;AAC5B,IAAI,KAAK,IAAIF,CAAI,IAAI,MACnB,KAAK,cAAc;AAAA,EAEvB;AAAA;AAAA,EAGQ,gBAAgBZ,GAAqB;AAC3C,QAAI,CAAC,KAAK,YAAa;AACvB,UAAMc,IAAQd,EAAE,eAAe,CAAC;AAChC,QAAI,CAACc,EAAO;AAEZ,UAAMF,KADU,KAAK,gBAAgB,eAAeE,EAAM,UAAUA,EAAM,WACnD,KAAK,kBACtBD,IAAY;AAClB,IAAI,KAAK,gBACHD,IAAOC,IACT,KAAK,SAAA,IACID,IAAO,CAACC,KACjB,KAAK,KAAA,IAGT,KAAK,cAAc,IACnB,KAAK,cAAc;AAAA,EACrB;AAAA;AAAA,EAGQ,YAAYf,GAAqB;AACvC,SAAK,cAAc,IACnB,KAAK,KAAKA,CAAK;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAY,kBAA0B;AACpC,UAAMiB,IAAY,MAAM,KAAK,eACvBC,IAAS,KAAK,gBAAgBD;AACpC,WAAO,KAAK,gBAAgB,eACxB,eAAeC,CAAM,OACrB,eAAeA,CAAM;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAY,aAAsB;AAChC,WAAO,KAAK,QAAQ,KAAK,gBAAgB;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAY,aAAsB;AAChC,WAAO,KAAK,QAAQ,KAAK,gBAAgB,KAAK;AAAA,EAChD;AAAA;AAAA;AAAA,EAKQ,oBAAoB;AAC1B,WAAO1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOc,KAAK,cAAc;AAAA,wBACpB,CAAC,KAAK,UAAU;AAAA,qBACnB,MAAM,KAAK,SAAA,CAAU;AAAA;AAAA,cAE5B,KAAK,iBAAiB;AAAA;AAAA;AAAA,UAG1B,KAAK,WACHA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKiB,KAAK,aAAa,KAAK,qBAAqB,KAAK,iBAAiB;AAAA,yBACtE,MAAM,KAAK,gBAAA,CAAiB;AAAA;AAAA,kBAEnC,KAAK,aAAa,KAAK,qBAAqB,KAAK,iBAAiB;AAAA;AAAA,gBAGxE2B,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMM,KAAK,cAAc;AAAA,wBACpB,CAAC,KAAK,UAAU;AAAA,qBACnB,MAAM,KAAK,KAAA,CAAM;AAAA;AAAA,cAExB,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKlC;AAAA;AAAA,EAGQ,oBAAoB;AAC1B,UAAMC,IAAQ,KAAK,QAAQ;AAC3B,QAAIA,KAAS,EAAG,QAAOD;AACvB,UAAME,IAAO,MAAM,KAAK,EAAE,QAAQD,KAAS,CAACE,GAAGd,MAAMA,CAAC;AACtD,WAAOhB;AAAA;AAAA;AAAA,YAGC6B,EAAK;AAAA,MACL,CAAC,MAAM7B;AAAA;AAAA,wBAEK+B,EAAS;AAAA,QACf,mBAAmB;AAAA,QACnB,aAAa,MAAM,KAAK;AAAA,MAAA,CACzB,CAAC;AAAA;AAAA;AAAA,6BAGW,KAAK,aAAa,IAAI,GAAGH,CAAK,CAAC;AAAA,+BAC7B,MAAM,KAAK,gBAAgB,SAASD,CAAO;AAAA,yBACjD,MAAM,KAAK,YAAY,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA,CAKvC;AAAA;AAAA;AAAA;AAAA,EAIT;AAAA;AAAA,EAGQ,kBAAkB;AACxB,WAAO,KAAK,gBAAgB,eAAe5B,IAAkBE;AAAA,EAC/D;AAAA;AAAA,EAGQ,kBAAkB;AACxB,WAAO,KAAK,gBAAgB,eAAeC,IAAmBC;AAAA,EAChE;AAAA;AAAA,EAGQ,kBAAkB;AACxB,WAAOC;AAAA,EACT;AAAA;AAAA,EAGQ,mBAAmB;AACzB,WAAOC;AAAA,EACT;AAAA;AAAA,EAIS,SAAS;AAChB,WAAOL;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKU,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMT,KAAK,cAAc,WAAW,KAAK;AAAA;AAAA;AAAA,YAG7C,KAAK,SAAS;AAAA;AAAA,UAEhB,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAOT,KAAK,gBAAgB;AAAA,yBACrB,KAAK,eAAe;AAAA,uBACtB,KAAK,cAAc;AAAA,0BAChB,KAAK,cAAc;AAAA,0BACnB,KAAK,iBAAiB;AAAA,yBACvB,KAAK,gBAAgB;AAAA,wBACtB,KAAK,eAAe;AAAA;AAAA,mDAEO,KAAK,eAAe;AAAA,kCACrC,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,UAI9C,KAAK,mBAAmB;AAAA;AAAA;AAAA,EAGhC;AACF;AA3rBaM,EACK,SAAS,CAACT,CAAmB;AAQ7CmC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9B3B,EASX,WAAA,SAAA,CAAA;AAOA0B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAf/B3B,EAgBX,WAAA,QAAA,CAAA;AAQA0B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAvB/B3B,EAwBX,WAAA,YAAA,CAAA;AAOA0B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,qBAAqB;AAAA,GA9B/C3B,EA+BX,WAAA,oBAAA,CAAA;AAOA0B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB;AAAA,GArC7C3B,EAsCX,WAAA,iBAAA,CAAA;AAOA0B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB;AAAA,GA5C7C3B,EA6CX,WAAA,iBAAA,CAAA;AAOA0B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnD9B3B,EAoDX,WAAA,eAAA,CAAA;AAOA0B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,kBAAkB,SAAS,IAAM;AAAA,GA1D5D3B,EA2DX,WAAA,iBAAA,CAAA;AAOA0B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,oBAAoB;AAAA,GAjE9C3B,EAkEX,WAAA,kBAAA,CAAA;AAOA0B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,oBAAoB;AAAA,GAxE9C3B,EAyEX,WAAA,kBAAA,CAAA;AAOA0B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,wBAAwB;AAAA,GA/ElD3B,EAgFX,WAAA,sBAAA,CAAA;AAOA0B,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,uBAAuB;AAAA,GAtFjD3B,EAuFX,WAAA,qBAAA,CAAA;AAQA0B,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GA9FnB3B,EA+FX,WAAA,gBAAA,CAAA;AAOiB0B,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAtGI5B,EAsGM,WAAA,iBAAA,CAAA;AAKA0B,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA3GI5B,EA2GM,WAAA,WAAA,CAAA;AAKA0B,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAhHI5B,EAgHM,WAAA,cAAA,CAAA;AAKA0B,EAAA;AAAA,EAAhBE,EAAA;AAAM,GArHI5B,EAqHM,WAAA,aAAA,CAAA;AAEA0B,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAvHI5B,EAuHM,WAAA,eAAA,CAAA;AAvHNA,IAAN0B,EAAA;AAAA,EADNG,EAAc,aAAa;AAAA,GACf7B,CAAA;AC/GN,MAAM8B,IAA0BtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACgBhC,IAAMuC,IAAN,cAAgC9B,EAAa;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,aAAa,GAOb,KAAA,cAAc;AAAA,EAAA;AAAA,EAEL,SAAS;AAChB,UAAM+B,IAAQ,SAAS,KAAK,aAAa,CAAC,OAAO,KAAK,WAAW;AACjE,WAAOtC;AAAA,sEAC2DsC,CAAK;AAAA;AAAA;AAAA;AAAA,EAIzE;AACF;AAzBaD,EACK,SAAS,CAACD,CAAuB;AAOjDJ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GAPzCI,EAQX,WAAA,cAAA,CAAA;AAOAL,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB;AAAA,GAd1CI,EAeX,WAAA,eAAA,CAAA;AAfWA,IAANL,EAAA;AAAA,EADNG,EAAc,kBAAkB;AAAA,GACpBE,CAAA;"}
1	+ {"version":3,"file":"hx-carousel-item-D_dCv61-.js","sources":["../../src/components/hx-carousel/hx-carousel.styles.ts","../../src/components/hx-carousel/hx-carousel.ts","../../src/components/hx-carousel/hx-carousel-item.styles.ts","../../src/components/hx-carousel/hx-carousel-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCarouselStyles = css`\n :host {\n display: block;\n position: relative;\n }\n\n /* ─── Base ─── /\n\n .base {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-3, 0.75rem);\n }\n\n :host([orientation='vertical']) .base {\n flex-direction: row;\n }\n\n / ─── Navigation ─── /\n\n .navigation {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n }\n\n :host([orientation='vertical']) .navigation {\n flex-direction: column;\n }\n\n .nav-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));\n height: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));\n / WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target /\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);\n border-radius: var(--hx-border-radius-full, 9999px);\n background: var(--hx-color-neutral-0, #ffffff);\n color: var(--hx-color-neutral-700, #334155);\n cursor: pointer;\n padding: 0;\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n color var(--hx-transition-fast, 150ms ease),\n border-color var(--hx-transition-fast, 150ms ease);\n flex-shrink: 0;\n }\n\n .nav-btn:hover:not([disabled]) {\n background: var(--hx-color-neutral-50, #f8fafc);\n border-color: var(--hx-color-neutral-400, #94a3b8);\n }\n\n .nav-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .nav-btn[disabled] {\n opacity: var(--hx-opacity-disabled, 0.5);\n cursor: not-allowed;\n }\n\n .nav-btn svg {\n width: 1.25em;\n height: 1.25em;\n }\n\n / ─── Play/Pause ─── /\n\n .play-pause-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n / WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target /\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n width: var(--hx-touch-target-min, 2.75rem);\n height: var(--hx-touch-target-min, 2.75rem);\n border: var(--hx-border-width-thin, 1px) solid transparent;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n background: transparent;\n color: var(--hx-color-neutral-500, #64748b);\n cursor: pointer;\n padding: 0;\n font-size: var(--hx-font-size-sm, 0.875rem);\n transition: background-color var(--hx-transition-fast, 150ms ease);\n flex-shrink: 0;\n }\n\n .play-pause-btn:hover {\n background: var(--hx-color-neutral-100, #f1f5f9);\n }\n\n .play-pause-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n / ─── Scroll Container ─── /\n\n .scroll-container-wrapper {\n flex: 1;\n overflow: hidden;\n }\n\n .slide-viewport {\n overflow: hidden;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n .track {\n display: flex;\n transition: transform var(--hx-transition-base, 0.3s ease);\n }\n\n :host([orientation='vertical']) .track {\n flex-direction: column;\n }\n\n / ─── Pagination ─── /\n\n .pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-2, 0.5rem);\n flex-wrap: wrap;\n }\n\n :host([orientation='vertical']) .pagination {\n flex-direction: column;\n }\n\n .pagination-item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n / WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target /\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n padding: 0;\n border: none;\n cursor: pointer;\n background: transparent;\n border-radius: var(--hx-border-radius-full, 9999px);\n }\n\n .pagination-dot {\n display: block;\n width: var(--hx-carousel-pagination-dot-size, 0.5rem);\n height: var(--hx-carousel-pagination-dot-size, 0.5rem);\n border-radius: var(--hx-border-radius-full, 9999px);\n background: var(--hx-color-neutral-300, #cbd5e1);\n transition:\n background-color var(--hx-transition-fast, 150ms ease),\n transform var(--hx-transition-fast, 150ms ease);\n }\n\n .pagination-item[aria-current='true'] .pagination-dot,\n .pagination-item.is-active .pagination-dot {\n background: var(--hx-color-primary-600, #1d4ed8);\n transform: scale(1.25);\n }\n\n .pagination-item:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-full, 9999px);\n }\n\n / ─── Controls row ─── /\n\n .controls {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-3, 0.75rem);\n }\n\n / ─── Live Region ─── /\n\n .live-region {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n / ─── Reduced Motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .track,\n .nav-btn,\n .pagination-dot,\n .play-pause-btn {\n transition: none;\n }\n }\n\n / ─── Forced Colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n .nav-btn {\n border-color: ButtonText;\n color: ButtonText;\n }\n\n .play-pause-btn {\n border-color: ButtonText;\n color: ButtonText;\n }\n\n .pagination-dot {\n border: 1px solid CanvasText;\n }\n\n .pagination-item[aria-current='true'] .pagination-dot,\n .pagination-item.is-active .pagination-dot {\n background: Highlight;\n border-color: Highlight;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixCarouselStyles } from './hx-carousel.styles.js';\nimport type { HelixCarouselItem } from './hx-carousel-item.js';\n\n// ─── Module-level SVG icon constants ───\n\nconst _svgChevronLeft = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"15 18 9 12 15 6\"></polyline>\n</svg>`;\n\nconst _svgChevronUp = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"18 15 12 9 6 15\"></polyline>\n</svg>`;\n\nconst _svgChevronRight = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n</svg>`;\n\nconst _svgChevronDown = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n>\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n</svg>`;\n\nconst _svgPlay = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\"\n>\n <polygon points=\"5 3 19 12 5 21 5 3\"></polygon>\n</svg>`;\n\nconst _svgPause = html`<svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\"\n>\n <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\"></rect>\n <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\"></rect>\n</svg>`;\n\n/\n A scrollable carousel/slider for images or content slides.\n \n @summary Scrollable carousel with navigation, pagination, autoplay, and an accessible label.\n \n @tag hx-carousel\n \n @slot - `hx-carousel-item` elements (the slides).\n * @slot next-button - Custom next navigation button.\n * @slot previous-button - Custom previous navigation button.\n \n @fires {CustomEvent<{index: number, slide: HelixCarouselItem}>} hx-slide-change - Dispatched when the active slide changes.\n \n @csspart base - The outer wrapper element.\n * @csspart slide-viewport - The slide viewport/overflow container.\n * @csspart pagination - The pagination dot container.\n * @csspart pagination-item - Individual pagination dot button.\n * @csspart navigation - The previous/next button wrapper.\n * @csspart prev-button - The previous navigation button.\n * @csspart next-button - The next navigation button.\n * @csspart play-pause-btn - The autoplay play/pause toggle button.\n \n @cssprop [--hx-carousel-gap=0px] - Gap between slides.\n * @cssprop [--hx-carousel-slide-width=100%] - Width override for each slide.\n * @cssprop [--hx-carousel-nav-btn-size=2.5rem] - Size of previous/next navigation buttons.\n * @cssprop [--hx-carousel-pagination-dot-size=0.5rem] - Size of pagination dots.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-border-radius-full] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-color-neutral-400] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-carousel-focus-ring-color=var(--hx-focus-ring-color)] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-transition-base] - Transition timing.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-color-primary-600] - Color.\n /\n@customElement('hx-carousel')\nexport class HelixCarousel extends HelixElement {\n static override styles = [helixCarouselStyles];\n\n /\n Accessible label identifying this carousel to assistive technology.\n * When multiple carousels appear on the same page, each must have a unique label.\n * @attr label\n /\n @property({ type: String, reflect: true })\n label = 'Carousel';\n\n /\n Whether the carousel wraps around from last to first slide and vice-versa.\n * @attr loop\n /\n @property({ type: Boolean, reflect: true })\n loop = false;\n\n /\n Whether the carousel auto-advances slides.\n * Automatically pauses on hover, focus, and when prefers-reduced-motion is active.\n * @attr autoplay\n /\n @property({ type: Boolean, reflect: true })\n autoplay = false;\n\n /\n Milliseconds between auto-advance transitions.\n * @attr autoplay-interval\n /\n @property({ type: Number, attribute: 'autoplay-interval' })\n autoplayInterval = 3000;\n\n /\n Number of slides visible at once.\n * @attr slides-per-page\n /\n @property({ type: Number, attribute: 'slides-per-page' })\n slidesPerPage = 1;\n\n /\n Number of slides to advance per navigation action.\n * @attr slides-per-move\n /\n @property({ type: Number, attribute: 'slides-per-move' })\n slidesPerMove = 1;\n\n /\n Scroll axis of the carousel.\n * @attr orientation\n /\n @property({ type: String, reflect: true })\n orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Whether click-drag scrolling is enabled.\n * @attr mouse-dragging\n /\n @property({ type: Boolean, attribute: 'mouse-dragging', reflect: true })\n mouseDragging = false;\n\n /\n Accessible label for the previous slide button.\n * @attr label-prev-slide\n /\n @property({ type: String, attribute: 'label-prev-slide' })\n labelPrevSlide = 'Previous slide';\n\n /\n Accessible label for the next slide button.\n * @attr label-next-slide\n /\n @property({ type: String, attribute: 'label-next-slide' })\n labelNextSlide = 'Next slide';\n\n /\n Accessible label for the autoplay pause button.\n * @attr label-pause-autoplay\n /\n @property({ type: String, attribute: 'label-pause-autoplay' })\n labelPauseAutoplay = 'Pause autoplay';\n\n /\n Accessible label for the autoplay play button.\n * @attr label-play-autoplay\n /\n @property({ type: String, attribute: 'label-play-autoplay' })\n labelPlayAutoplay = 'Play autoplay';\n\n /\n Generates the live-region text for a slide position.\n * @param index - 1-based slide index\n * @param total - total slide count\n /\n @property({ attribute: false })\n labelSlideOf: (index: number, total: number) => string = (index, total) =>\n `Slide ${index} of ${total}`;\n\n /\n Index of the currently visible slide.\n * @internal\n /\n @state() private _currentIndex = 0;\n /\n Array of carousel item elements assigned to the default slot.\n * @internal\n /\n @state() private _slides: HelixCarouselItem[] = [];\n /\n Whether the autoplay is currently active and advancing slides.\n * @internal\n /\n @state() private _isPlaying = false;\n /\n Text content for the ARIA live region announcing slide changes.\n * @internal\n /\n @state() private _liveText = '';\n /* @internal /\n @state() private _livePolite = true;\n\n /\n Reference to the active autoplay interval timer, or null when stopped.\n * @internal\n /\n private _autoplayTimer: ReturnType<typeof setInterval> \| null = null;\n /\n Whether the user has requested reduced motion via the OS media preference.\n * @internal\n /\n private _reducedMotion = false;\n /\n MediaQueryList instance for monitoring the prefers-reduced-motion media feature.\n * @internal\n /\n private _mql: MediaQueryList \| null = null;\n /\n Whether the carousel is currently being hovered, used to pause autoplay on hover.\n * @internal\n /\n private _isHovered = false;\n /\n Whether a descendant of the carousel currently has focus, used to pause autoplay on focus.\n * @internal\n /\n private _isFocused = false;\n\n // ─── Drag state ───\n /\n Pointer coordinate at the start of a mouse drag gesture.\n * @internal\n /\n private _dragStartCoord = 0;\n /\n Whether a mouse drag gesture is currently in progress.\n * @internal\n /\n private _isDragging = false;\n /\n Whether the pointer has moved beyond the drag threshold during the current drag gesture.\n * @internal\n /\n private _dragMoved = false;\n /\n Touch coordinate at the start of a touch swipe gesture.\n * @internal\n /\n private _touchStartCoord = 0;\n /\n Whether the touch has moved beyond the swipe threshold during the current touch gesture.\n * @internal\n /\n private _touchMoved = false;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n\n // Guard for SSR — window.matchMedia is unavailable server-side\n if (typeof window !== 'undefined') {\n this._mql = window.matchMedia('(prefers-reduced-motion: reduce)');\n this._reducedMotion = this._mql.matches;\n this._mql.addEventListener('change', this._handleMotionChange);\n }\n\n this.addEventListener('mouseenter', this._handleMouseEnter);\n this.addEventListener('mouseleave', this._handleMouseLeave);\n this.addEventListener('focusin', this._handleFocusIn);\n this.addEventListener('focusout', this._handleFocusOut);\n this.addEventListener('keydown', this._handleKeydown);\n // Touch events are registered directly on the scroll-container in the template\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._mql?.removeEventListener('change', this._handleMotionChange);\n this._stopAutoplay();\n this.removeEventListener('mouseenter', this._handleMouseEnter);\n this.removeEventListener('mouseleave', this._handleMouseLeave);\n this.removeEventListener('focusin', this._handleFocusIn);\n this.removeEventListener('focusout', this._handleFocusOut);\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n override firstUpdated(): void {\n this._syncSlides();\n if (this.autoplay && !this._reducedMotion) {\n this._startAutoplay();\n }\n }\n\n // ─── Slide Management ───\n\n /* @internal /\n private _syncSlides(): void {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (!slot) return;\n\n const items = slot\n .assignedElements({ flatten: true })\n .filter((el) => el.tagName.toLowerCase() === 'hx-carousel-item') as HelixCarouselItem[];\n\n this._slides = items;\n\n // Update aria labels on each item\n items.forEach((item, i) => {\n item.slideIndex = i;\n item.totalSlides = items.length;\n const slideWidth = `${100 / this.slidesPerPage}%`;\n (item as HTMLElement).style.setProperty('--_hx-carousel-slide-width', slideWidth);\n });\n\n // Clamp currentIndex if slides changed\n if (this._currentIndex >= items.length) {\n this._currentIndex = Math.max(0, items.length - 1);\n }\n }\n\n /* @internal /\n private _handleSlotChange(): void {\n this._syncSlides();\n }\n\n // ─── Navigation ───\n\n /\n Maximum valid slide index accounting for the number of slides visible per page.\n * @internal\n /\n private get _maxIndex(): number {\n return Math.max(0, this._slides.length - this.slidesPerPage);\n }\n\n goTo(index: number): void {\n if (this._slides.length === 0) return;\n\n let next = index;\n if (this.loop) {\n next = ((index % this._slides.length) + this._slides.length) % this._slides.length;\n } else {\n next = Math.max(0, Math.min(index, this._maxIndex));\n }\n\n if (next === this._currentIndex) return;\n\n this._currentIndex = next;\n this._liveText = this.labelSlideOf(next + 1, this._slides.length);\n const slide = this._slides[next];\n if (!slide) return;\n this.dispatchEvent(\n new CustomEvent<{ index: number; slide: HelixCarouselItem \| undefined }>('hx-slide-change', {\n bubbles: true,\n composed: true,\n detail: { index: next, slide },\n }),\n );\n }\n\n next(): void {\n const nextIndex = this._currentIndex + this.slidesPerMove;\n if (!this.loop && nextIndex > this._maxIndex) {\n return;\n }\n this._livePolite = true;\n this.goTo(nextIndex);\n }\n\n previous(): void {\n const prevIndex = this._currentIndex - this.slidesPerMove;\n if (!this.loop && prevIndex < 0) {\n return;\n }\n this._livePolite = true;\n this.goTo(prevIndex);\n }\n\n // ─── Autoplay ───\n\n /\n Callback invoked on each autoplay interval tick to advance to the next slide.\n * @internal\n /\n private _autoplayTick = (): void => {\n this._livePolite = false;\n if (this.loop) {\n this.goTo(this._currentIndex + this.slidesPerMove);\n } else if (this._currentIndex < this._maxIndex) {\n this.goTo(this._currentIndex + this.slidesPerMove);\n } else {\n this.goTo(0);\n }\n };\n\n /* @internal /\n private _startAutoplay(): void {\n if (this._autoplayTimer !== null) return;\n this._isPlaying = true;\n this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval);\n }\n\n /* @internal /\n private _stopAutoplay(): void {\n if (this._autoplayTimer !== null) {\n clearInterval(this._autoplayTimer);\n this._autoplayTimer = null;\n }\n this._isPlaying = false;\n }\n\n /* @internal /\n private _toggleAutoplay(): void {\n if (this._isPlaying) {\n this._stopAutoplay();\n } else if (!this._reducedMotion) {\n this._startAutoplay();\n }\n }\n\n /* @internal /\n private _pauseAutoplay(): void {\n if (!this._isPlaying \|\| this._autoplayTimer === null) return;\n clearInterval(this._autoplayTimer);\n this._autoplayTimer = null;\n }\n\n /* @internal /\n private _resumeAutoplay(): void {\n if (!this.autoplay \|\| !this._isPlaying \|\| this._reducedMotion) return;\n if (this._autoplayTimer !== null) return;\n this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval);\n }\n\n // ─── Event Handlers ───\n\n /\n Handles changes to the prefers-reduced-motion media query, stopping or resuming autoplay accordingly.\n * @internal\n /\n private _handleMotionChange = (e: MediaQueryListEvent): void => {\n this._reducedMotion = e.matches;\n if (this._reducedMotion) {\n this._stopAutoplay();\n } else if (this.autoplay && !this._isHovered && !this._isFocused) {\n this._startAutoplay();\n }\n };\n\n /\n Handles the mouseenter event to pause autoplay while the user hovers over the carousel.\n * @internal\n /\n private _handleMouseEnter = (): void => {\n this._isHovered = true;\n this._pauseAutoplay();\n };\n\n /\n Handles the mouseleave event to resume autoplay when the user stops hovering.\n * @internal\n /\n private _handleMouseLeave = (): void => {\n this._isHovered = false;\n if (!this._isFocused) {\n this._resumeAutoplay();\n }\n };\n\n /\n Handles the focusin event to pause autoplay while a descendant has focus.\n * @internal\n /\n private _handleFocusIn = (): void => {\n this._isFocused = true;\n this._pauseAutoplay();\n };\n\n /\n Handles the focusout event to resume autoplay when focus leaves the carousel.\n * @internal\n /\n private _handleFocusOut = (): void => {\n this._isFocused = false;\n if (!this._isHovered) {\n this._resumeAutoplay();\n }\n };\n\n /\n Handles keyboard navigation to move between slides using arrow, Home, and End keys.\n * @internal\n /\n private _handleKeydown = (e: KeyboardEvent): void => {\n if (this.orientation === 'horizontal') {\n if (e.key === 'ArrowLeft') {\n e.preventDefault();\n this.previous();\n } else if (e.key === 'ArrowRight') {\n e.preventDefault();\n this.next();\n }\n } else {\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n this.previous();\n } else if (e.key === 'ArrowDown') {\n e.preventDefault();\n this.next();\n }\n }\n\n if (e.key === 'Home') {\n e.preventDefault();\n this.goTo(0);\n } else if (e.key === 'End') {\n e.preventDefault();\n this.goTo(this._slides.length - 1);\n }\n };\n\n // ─── Drag Handlers ───\n\n /* @internal /\n private _handleDragStart(e: MouseEvent): void {\n if (!this.mouseDragging) return;\n this._isDragging = true;\n this._dragMoved = false;\n this._dragStartCoord = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n (e.currentTarget as HTMLElement).style.cursor = 'grabbing';\n e.preventDefault();\n }\n\n /* @internal /\n private _handleDragMove(e: MouseEvent): void {\n if (!this._isDragging) return;\n const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n const diff = current - this._dragStartCoord;\n if (Math.abs(diff) > 5) {\n this._dragMoved = true;\n }\n }\n\n /* @internal /\n private _handleDragEnd(e: MouseEvent): void {\n if (!this._isDragging) return;\n const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n const diff = current - this._dragStartCoord;\n const threshold = 50;\n if (this._dragMoved) {\n if (diff > threshold) {\n this.previous();\n } else if (diff < -threshold) {\n this.next();\n }\n }\n this._isDragging = false;\n this._dragMoved = false;\n (e.currentTarget as HTMLElement).style.cursor = '';\n }\n\n // ─── Touch Handlers ───\n\n /* @internal /\n private _handleTouchStart(e: TouchEvent): void {\n if (!this.mouseDragging) return;\n const touch = e.touches[0];\n if (!touch) return;\n this._isDragging = true;\n this._touchMoved = false;\n this._touchStartCoord = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n }\n\n /* @internal /\n private _handleTouchMove(e: TouchEvent): void {\n if (!this._isDragging) return;\n const touch = e.touches[0];\n if (!touch) return;\n const current = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n const diff = current - this._touchStartCoord;\n if (Math.abs(diff) > 5) {\n this._touchMoved = true;\n }\n }\n\n /* @internal /\n private _handleTouchEnd(e: TouchEvent): void {\n if (!this._isDragging) return;\n const touch = e.changedTouches[0];\n if (!touch) return;\n const current = this.orientation === 'horizontal' ? touch.clientX : touch.clientY;\n const diff = current - this._touchStartCoord;\n const threshold = 50;\n if (this._touchMoved) {\n if (diff > threshold) {\n this.previous();\n } else if (diff < -threshold) {\n this.next();\n }\n }\n this._isDragging = false;\n this._touchMoved = false;\n }\n\n /* @internal /\n private _goToManual(index: number): void {\n this._livePolite = true;\n this.goTo(index);\n }\n\n // ─── Computed ───\n\n /\n CSS transform value applied to the slide track to scroll to the current index.\n * @internal\n /\n private get _trackTransform(): string {\n const slideSize = 100 / this.slidesPerPage;\n const offset = this._currentIndex slideSize;\n return this.orientation === 'horizontal'\n ? `translateX(-${offset}%)`\n : `translateY(-${offset}%)`;\n }\n\n /*\n Whether the previous navigation button should be enabled.\n * @internal\n /\n private get _canGoPrev(): boolean {\n return this.loop \|\| this._currentIndex > 0;\n }\n\n /\n Whether the next navigation button should be enabled.\n * @internal\n /\n private get _canGoNext(): boolean {\n return this.loop \|\| this._currentIndex < this._maxIndex;\n }\n\n // ─── Render Helpers ───\n\n /* @internal /\n private _renderNavigation() {\n return html`\n <div class=\"navigation\" part=\"navigation\">\n <slot name=\"previous-button\">\n <button\n class=\"nav-btn\"\n part=\"prev-button\"\n type=\"button\"\n aria-label=${this.labelPrevSlide}\n ?disabled=${!this._canGoPrev}\n @click=${() => this.previous()}\n >\n ${this._renderPrevIcon()}\n </button>\n </slot>\n ${this.autoplay\n ? html`\n <button\n class=\"play-pause-btn\"\n part=\"play-pause-btn\"\n type=\"button\"\n aria-label=${this._isPlaying ? this.labelPauseAutoplay : this.labelPlayAutoplay}\n @click=${() => this._toggleAutoplay()}\n >\n ${this._isPlaying ? this._renderPauseIcon() : this._renderPlayIcon()}\n </button>\n `\n : nothing}\n <slot name=\"next-button\">\n <button\n class=\"nav-btn\"\n part=\"next-button\"\n type=\"button\"\n aria-label=${this.labelNextSlide}\n ?disabled=${!this._canGoNext}\n @click=${() => this.next()}\n >\n ${this._renderNextIcon()}\n </button>\n </slot>\n </div>\n `;\n }\n\n /* @internal /\n private _renderPagination() {\n const count = this._slides.length;\n if (count <= 1) return nothing;\n const dots = Array.from({ length: count }, (_, i) => i);\n return html`\n <div class=\"controls\">\n <div class=\"pagination\" part=\"pagination\">\n ${dots.map(\n (i) => html`\n <button\n class=${classMap({\n 'pagination-item': true,\n 'is-active': i === this._currentIndex,\n })}\n part=\"pagination-item\"\n type=\"button\"\n aria-label=${this.labelSlideOf(i + 1, count)}\n aria-current=${i === this._currentIndex ? 'true' : nothing}\n @click=${() => this._goToManual(i)}\n >\n <span class=\"pagination-dot\"></span>\n </button>\n `,\n )}\n </div>\n </div>\n `;\n }\n\n /* @internal /\n private _renderPrevIcon() {\n return this.orientation === 'horizontal' ? _svgChevronLeft : _svgChevronUp;\n }\n\n /* @internal /\n private _renderNextIcon() {\n return this.orientation === 'horizontal' ? _svgChevronRight : _svgChevronDown;\n }\n\n /* @internal /\n private _renderPlayIcon() {\n return _svgPlay;\n }\n\n /* @internal /\n private _renderPauseIcon() {\n return _svgPause;\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div\n class=\"base\"\n part=\"base\"\n role=\"region\"\n aria-label=${this.label}\n aria-roledescription=\"carousel\"\n >\n <div\n class=\"live-region\"\n role=\"status\"\n aria-live=${this._livePolite ? 'polite' : 'off'}\n aria-atomic=\"true\"\n >\n ${this._liveText}\n </div>\n ${this._renderNavigation()}\n <div class=\"scroll-container-wrapper\">\n <div\n class=\"slide-viewport\"\n part=\"slide-viewport\"\n aria-live=\"polite\"\n aria-atomic=\"false\"\n @mousedown=${this._handleDragStart}\n @mousemove=${this._handleDragMove}\n @mouseup=${this._handleDragEnd}\n @mouseleave=${this._handleDragEnd}\n @touchstart=${this._handleTouchStart}\n @touchmove=${this._handleTouchMove}\n @touchend=${this._handleTouchEnd}\n >\n <div class=\"track\" style=\"transform: ${this._trackTransform};\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n </div>\n ${this._renderPagination()}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-carousel': HelixCarousel;\n }\n}\n","import { css } from 'lit';\n\nexport const helixCarouselItemStyles = css`\n :host {\n display: block;\n flex-shrink: 0;\n width: var(--_hx-carousel-slide-width, 100%);\n box-sizing: border-box;\n }\n\n .slide-group {\n height: 100%;\n outline: none;\n }\n\n .slide-group:focus-visible {\n outline: var(--hx-focus-ring-width) solid var(--hx-focus-ring-color);\n outline-offset: var(--hx-focus-ring-offset);\n }\n\n / ─── High Contrast Mode (forced-colors) ─── /\n\n @media (forced-colors: active) {\n .slide-group:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n }\n`;\n","import { html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixCarouselItemStyles } from './hx-carousel-item.styles.js';\n\n/\n A wrapper for individual carousel slides.\n \n @summary Individual slide wrapper for use inside hx-carousel.\n \n @tag hx-carousel-item\n \n @slot - Slide content.\n \n @csspart slide - The slide wrapper element.\n /\n@customElement('hx-carousel-item')\nexport class HelixCarouselItem extends HelixElement {\n static override styles = [helixCarouselItemStyles];\n\n /\n The 0-based index of this slide within the carousel. Set by hx-carousel.\n * @attr slide-index\n /\n @property({ type: Number, attribute: 'slide-index' })\n slideIndex = 0;\n\n /\n Total number of slides in the carousel. Set by hx-carousel.\n * @attr total-slides\n */\n @property({ type: Number, attribute: 'total-slides' })\n totalSlides = 0;\n\n override render() {\n const label = `Slide ${this.slideIndex + 1} of ${this.totalSlides}`;\n return html`\n <div class=\"slide-group\" part=\"slide\" role=\"group\" aria-label=${label} tabindex=\"-1\">\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-carousel-item': HelixCarouselItem;\n }\n}\n"],"names":["helixCarouselStyles","css","_svgChevronLeft","html","_svgChevronUp","_svgChevronRight","_svgChevronDown","_svgPlay","_svgPause","HelixCarousel","HelixElement","index","total","e","_a","slot","items","el","item","i","slideWidth","next","slide","nextIndex","prevIndex","diff","threshold","touch","slideSize","offset","nothing","count","dots","_","classMap","__decorateClass","property","state","customElement","helixCarouselItemStyles","HelixCarouselItem","label"],"mappings":";;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;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"}

package/dist/shared/{hx-checkbox-DkkoWoye.js → hx-checkbox-ZKjOF7_3.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { css as _, nothing as n, html as b } from "lit";
-import { property as i, query as p, state as k, customElement as u } from "lit/decorators.js";
-import { classMap as m } from "lit/directives/class-map.js";
+import { css as _, nothing as n, html as d } from "lit";
+import { property as i, query as p, state as k, customElement as m } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
 import { ifDefined as x } from "lit/directives/if-defined.js";
-import { live as d } from "lit/directives/live.js";
+import { live as b } from "lit/directives/live.js";
 import { F as v } from "./FormMixin-B8PXk5RQ.js";
 import { m as f } from "./aria-delegation-Doq6RRUy.js";
 import { c as g } from "./id-counter-DuX8vsui.js";
@@ -67,9 +67,9 @@ const z = _`
     width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
     height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));
     border: var(--hx-border-width-medium, 2px) solid
-      var(--hx-checkbox-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-checkbox-border-color, var(--hx-color-border-strong, #cbd5e1));
     border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));
-    background-color: var(--hx-checkbox-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-checkbox-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
       border-color var(--hx-transition-fast, 150ms ease),
@@ -139,7 +139,7 @@ const z = _`
     width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
     height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
     fill: none;
-    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-neutral-0, #ffffff));
+    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));
     stroke-width: 2.5;
     stroke-linecap: round;
     stroke-linejoin: round;
@@ -158,7 +158,7 @@ const z = _`
   .checkbox__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-checkbox-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-checkbox-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     user-select: none;
     -webkit-user-select: none;
@@ -173,7 +173,7 @@ const z = _`
   .checkbox__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-checkbox-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-checkbox-help-text-color, var(--hx-color-text-muted, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
     padding-inline-start: calc(
       var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)
@@ -394,15 +394,15 @@ let r = class extends f(v(y)) {
       "checkbox--md": this.size === "md",
       "checkbox--lg": this.size === "lg"
     }, a = [e ? this._errorId : null, this.helpText && !e ? this._helpTextId : null].filter(Boolean).join(" ") || void 0, h = this._effectiveLabel || void 0;
-    return b`
-      <div class=${m(o)}>
+    return d`
+      <div class=${u(o)}>
         <label part="control" class="checkbox__control" @click=${this._handleChange}>
           <input
             class="checkbox__input"
             type="checkbox"
             id=${this._id}
-            .checked=${d(this.checked)}
-            .indeterminate=${d(this.indeterminate)}
+            .checked=${b(this.checked)}
+            .indeterminate=${b(this.indeterminate)}
             ?disabled=${this.disabled}
             ?required=${this.required}
             name=${x(this.name || void 0)}
@@ -439,7 +439,7 @@ let r = class extends f(v(y)) {
           <span part="label" class="checkbox__label" id=${this._labelId}>
             <slot>${this.label}</slot>
-            ${this.required ? b`<span class="checkbox__required-marker" aria-hidden="true">*</span>` : n}
+            ${this.required ? d`<span class="checkbox__required-marker" aria-hidden="true">*</span>` : n}
           </span>
         </label>
@@ -461,7 +461,7 @@ let r = class extends f(v(y)) {
           </slot>
         </div>
-        ${this.helpText && !e ? b`
+        ${this.helpText && !e ? d`
               <div part="help-text" class="checkbox__help-text" id=${this._helpTextId}>
                 <slot name="help-text">${this.helpText}</slot>
               </div>
@@ -518,9 +518,9 @@ t([
   k()
 ], r.prototype, "_announcedError", 2);
 r = t([
-  u("hx-checkbox")
+  m("hx-checkbox")
 ], r);
 export {
   r as H
 };
-//# sourceMappingURL=hx-checkbox-DkkoWoye.js.map
+//# sourceMappingURL=hx-checkbox-ZKjOF7_3.js.map