@helixui/library 0.3.4 → 1.0.1

package/dist/shared/hx-button-group-CWjWv-wS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-button-group-CWjWv-wS.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-left: 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","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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 LitElement {\n  static override styles = [tokenStyles, helixButtonGroupStyles];\n\n  /**\n   * ElementInternals instance for ARIA role and label management via the Accessibility Object Model.\n   * @internal\n   */\n  private internals: ElementInternals;\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 via ElementInternals.\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  // ─── Constructor ───\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n    this.internals.role = 'group';\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: Map<PropertyKey, unknown>): 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      this.internals.ariaLabel = this.label || null;\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.style.setProperty('--hx-button-group-size', this.size);\n    if (this.label) {\n      this.internals.ariaLabel = this.label;\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","LitElement","value","changedProperties","html","classMap","tokenStyles","__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;;;;;;ACwB/B,IAAMC,IAAN,cAA+BC,EAAW;AAAA;AAAA,EAkD/C,cAAc;AACZ,UAAA,GAvBF,KAAQ,eAA0C,cAQlD,KAAA,OAA2B,MAU3B,KAAA,QAAgB,IAMd,KAAK,YAAY,KAAK,gBAAA,GACtB,KAAK,UAAU,OAAO;AAAA,EACxB;AAAA,EAxCA,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,EAmCS,QAAQC,GAAoD;AACnE,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,MAAM,KAC9B,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GAGxDA,EAAkB,IAAI,OAAO,MAC/B,KAAK,UAAU,YAAY,KAAK,SAAS;AAAA,EAE7C;AAAA,EAES,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,MAAM,YAAY,0BAA0B,KAAK,IAAI,GACtD,KAAK,UACP,KAAK,UAAU,YAAY,KAAK;AAAA,EAEpC;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;AA9FaL,EACK,SAAS,CAACM,GAAaR,CAAsB;AAazDS,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAb9BR,EAcP,WAAA,eAAA,CAAA;AAsBJO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GAnCpDR,EAoCX,WAAA,QAAA,CAAA;AAUAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7CfR,EA8CX,WAAA,SAAA,CAAA;AA9CWA,IAANO,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBT,CAAA;"}

package/dist/shared/{hx-card-DAkEfpJd.js → hx-card-B9j2SHyI.js}

@@ -1,10 +1,12 @@
-import { css as g, LitElement as p, nothing as l, html as v } from "lit";
-import { property as s, state as d, customElement as x } from "lit/decorators.js";
+import { css as x, LitElement as p, nothing as l, html as g } from "lit";
+import { property as d, state as s, customElement as v } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
 import { tokenStyles as m } from "@helixui/tokens/lit";
-const _ = g`
+const _ = x`
   :host {
     display: block;
+    color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));
+    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
   }
 
   .card {
@@ -82,7 +84,8 @@ const _ = g`
   }
 
   .card--interactive:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -161,10 +164,10 @@ const _ = g`
     margin-top: auto;
   }
 `;
-var b = Object.defineProperty, u = Object.getOwnPropertyDescriptor, t = (a, r, n, i) => {
-  for (var o = i > 1 ? void 0 : i ? u(r, n) : r, h = a.length - 1, c; h >= 0; h--)
-    (c = a[h]) && (o = (i ? c(r, n, o) : c(o)) || o);
-  return i && o && b(r, n, o), o;
+var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (a, r, h, i) => {
+  for (var o = i > 1 ? void 0 : i ? b(r, h) : r, n = a.length - 1, c; n >= 0; n--)
+    (c = a[n]) && (o = (i ? c(r, h, o) : c(o)) || o);
+  return i && o && u(r, h, o), o;
 };
 let e = class extends p {
   constructor() {
@@ -184,9 +187,10 @@ let e = class extends p {
   }
   _onActionsSlotChange(a) {
     const r = a.target;
-    this._hasActions = r.assignedNodes({ flatten: !0 }).length > 0, this._hasActions && this.hxHref && console.warn(
-      '[hx-card] Using hx-href (interactive card) together with the actions slot is an ARIA anti-pattern: interactive controls cannot be nested inside role="link". Use either hx-href or the actions slot, not both.'
-    );
+    this._hasActions = r.assignedNodes({ flatten: !0 }).length > 0, this._hasActions && this.hxHref;
+  }
+  updated(a) {
+    super.updated(a), (a.has("hxHref") || a.has("hxAriaLabel")) && this.hxHref && this.hxAriaLabel;
   }
   // ─── Event Handling ───
   _dispatchCardClick(a) {
@@ -212,7 +216,7 @@ let e = class extends p {
       [`card--${this.elevation}`]: !0,
       "card--interactive": a
     };
-    return v`
+    return g`
       <div
         part="card"
         class=${f(r)}
@@ -251,33 +255,33 @@ e.shadowRootOptions = {
 };
 e.styles = [m, _];
 t([
-  s({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
 t([
-  s({ type: String, reflect: !0 })
+  d({ type: String, reflect: !0 })
 ], e.prototype, "elevation", 2);
 t([
-  s({ type: String, attribute: "hx-href" })
+  d({ type: String, attribute: "hx-href" })
 ], e.prototype, "hxHref", 2);
 t([
-  s({ type: String, attribute: "hx-aria-label" })
+  d({ type: String, attribute: "hx-aria-label" })
 ], e.prototype, "hxAriaLabel", 2);
 t([
-  d()
+  s()
 ], e.prototype, "_hasImage", 2);
 t([
-  d()
+  s()
 ], e.prototype, "_hasHeading", 2);
 t([
-  d()
+  s()
 ], e.prototype, "_hasFooter", 2);
 t([
-  d()
+  s()
 ], e.prototype, "_hasActions", 2);
 e = t([
-  x("hx-card")
+  v("hx-card")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-card-DAkEfpJd.js.map
+//# sourceMappingURL=hx-card-B9j2SHyI.js.map

package/dist/shared/hx-card-B9j2SHyI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-card-B9j2SHyI.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, var(--hx-color-neutral-800, #212529));\n    background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #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-neutral-0, #ffffff));\n    color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));\n    border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));\n    overflow: hidden;\n    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-right: var(--hx-space-3, 0.75rem);\n    padding-left: var(--hx-space-3, 0.75rem);\n  }\n\n  .card--compact .card__footer {\n    padding-right: var(--hx-space-3, 0.75rem);\n    padding-bottom: var(--hx-space-3, 0.75rem);\n    padding-left: var(--hx-space-3, 0.75rem);\n  }\n\n  .card--compact .card__actions {\n    padding-right: var(--hx-space-3, 0.75rem);\n    padding-bottom: var(--hx-space-3, 0.75rem);\n    padding-left: 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-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-right: var(--hx-card-padding, var(--hx-space-6, 1.5rem));\n    padding-bottom: 0;\n    padding-left: 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-color-neutral-600, #495057);\n  }\n\n  .card__footer {\n    padding-top: 0;\n    padding-right: 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-left: 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-right: 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-left: 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-neutral-200, #dee2e6));\n    margin-top: auto;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCardStyles } from './hx-card.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\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 */\n@customElement('hx-card')\nexport class HelixCard extends LitElement {\n  /** Enable delegatesFocus so :focus on the host works when the inner card div has focus. */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static override styles = [tokenStyles, 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 hx-href to avoid conflicting with the native HTML href attribute.\n   * @attr hx-href\n   */\n  @property({ type: String, attribute: 'hx-href' })\n  hxHref: 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-aria-label\n   */\n  @property({ type: String, attribute: 'hx-aria-label' })\n  hxAriaLabel: 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  private _onImageSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasImage = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  private _onHeadingSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHeading = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\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  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.hxHref) {\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: Map<PropertyKey, unknown>): 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('hxHref') || changedProperties.has('hxAriaLabel')) &&\n      this.hxHref &&\n      !this.hxAriaLabel\n    ) {\n      devWarn(\n        'hx-card',\n        \"Interactive card (hx-href is set) is missing an accessible name. Set `hx-aria-label` to describe the card's destination or purpose (WCAG 4.1.2).\",\n      );\n    }\n  }\n\n  // ─── Event Handling ───\n\n  private _dispatchCardClick(originalEvent: MouseEvent | KeyboardEvent): void {\n    if (!this.hxHref) 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.hxHref, originalEvent },\n      }),\n    );\n  }\n\n  private _handleClick(e: MouseEvent): void {\n    this._dispatchCardClick(e);\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (!this.hxHref) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._dispatchCardClick(e);\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const isInteractive = !!this.hxHref;\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.hxAriaLabel ? this.hxAriaLabel : 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 class=\"card__heading\" part=\"heading\" ?hidden=${!this._hasHeading}>\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","HelixCard","LitElement","e","slot","changedProperties","originalEvent","isInteractive","classes","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-carousel-item-C2yBnM0r.js → hx-carousel-item-Be0bC-7o.js}

@@ -1,8 +1,8 @@
-import { css as g, html as a, LitElement as f, nothing as v } from "lit";
-import { property as l, state as c, customElement as _ } from "lit/decorators.js";
-import { classMap as y } from "lit/directives/class-map.js";
+import { css as g, html as l, LitElement as f, nothing as p } from "lit";
+import { property as n, state as c, customElement as _ } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
 import { tokenStyles as x } from "@helixui/tokens/lit";
-const m = g`
+const y = g`
   :host {
     display: block;
     position: relative;
@@ -39,6 +39,9 @@ const m = g`
     justify-content: center;
     width: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));
     height: var(--hx-carousel-nav-btn-size, var(--hx-size-10, 2.5rem));
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);
     border-radius: var(--hx-border-radius-full, 9999px);
     background: var(--hx-color-neutral-0, #fff);
@@ -58,7 +61,8 @@ const m = g`
   }
 
   .nav-btn:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -78,8 +82,11 @@ const m = g`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--hx-size-8, 2rem);
-    height: var(--hx-size-8, 2rem);
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    width: var(--hx-touch-target-min, 2.75rem);
+    height: var(--hx-touch-target-min, 2.75rem);
     border: var(--hx-border-width-thin, 1px) solid transparent;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background: transparent;
@@ -96,7 +103,8 @@ const m = g`
   }
 
   .play-pause-btn:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -137,6 +145,11 @@ const m = g`
 
   .pagination-item {
     display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     padding: 0;
     border: none;
     cursor: pointer;
@@ -162,7 +175,8 @@ const m = g`
   }
 
   .pagination-item:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-carousel-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-full, 9999px);
   }
@@ -200,12 +214,12 @@ const m = g`
     }
   }
 `;
-var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? w(e, r) : e, h = t.length - 1, d; h >= 0; h--)
-    (d = t[h]) && (s = (i ? d(e, r, s) : d(s)) || s);
-  return i && s && b(e, r, s), s;
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (t, e, r, i) => {
+  for (var o = i > 1 ? void 0 : i ? w(e, r) : e, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (o = (i ? u(e, r, o) : u(o)) || o);
+  return i && o && b(e, r, o), o;
 };
-const P = a`<svg
+const P = l`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
@@ -216,7 +230,7 @@ const P = a`<svg
   aria-hidden="true"
 >
   <polyline points="15 18 9 12 15 6"></polyline>
-</svg>`, k = a`<svg
+</svg>`, k = l`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
@@ -227,7 +241,7 @@ const P = a`<svg
   aria-hidden="true"
 >
   <polyline points="18 15 12 9 6 15"></polyline>
-</svg>`, I = a`<svg
+</svg>`, I = l`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
@@ -238,7 +252,7 @@ const P = a`<svg
   aria-hidden="true"
 >
   <polyline points="9 18 15 12 9 6"></polyline>
-</svg>`, M = a`<svg
+</svg>`, M = l`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
@@ -249,7 +263,7 @@ const P = a`<svg
   aria-hidden="true"
 >
   <polyline points="6 9 12 15 18 9"></polyline>
-</svg>`, $ = a`<svg
+</svg>`, S = l`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="currentColor"
@@ -258,7 +272,7 @@ const P = a`<svg
   height="1em"
 >
   <polygon points="5 3 19 12 5 21 5 3"></polygon>
-</svg>`, T = a`<svg
+</svg>`, $ = l`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="currentColor"
@@ -269,10 +283,10 @@ const P = a`<svg
   <rect x="6" y="4" width="4" height="16"></rect>
   <rect x="14" y="4" width="4" height="16"></rect>
 </svg>`;
-let o = class extends f {
+let s = class extends f {
   constructor() {
-    super(...arguments), this.label = "Carousel", this.loop = !1, this.autoplay = !1, this.autoplayInterval = 3e3, this.slidesPerPage = 1, this.slidesPerMove = 1, this.orientation = "horizontal", this.mouseDragging = !1, this._currentIndex = 0, this._slides = [], this._isPlaying = !1, this._liveText = "", this._autoplayTimer = null, this._reducedMotion = !1, this._mql = null, this._isHovered = !1, this._isFocused = !1, this._dragStartCoord = 0, this._isDragging = !1, this._dragMoved = !1, this._touchStartCoord = 0, this._touchMoved = !1, this._autoplayTick = () => {
-      this.loop ? this.goTo(this._currentIndex + this.slidesPerMove) : this._currentIndex < this._maxIndex ? this.goTo(this._currentIndex + this.slidesPerMove) : this.goTo(0);
+    super(...arguments), this.label = "Carousel", this.loop = !1, this.autoplay = !1, this.autoplayInterval = 3e3, this.slidesPerPage = 1, this.slidesPerMove = 1, this.orientation = "horizontal", this.mouseDragging = !1, this.labelPrevSlide = "Previous slide", this.labelNextSlide = "Next slide", this.labelPauseAutoplay = "Pause autoplay", this.labelPlayAutoplay = "Play autoplay", this._currentIndex = 0, this._slides = [], this._isPlaying = !1, this._liveText = "", this._livePolite = !0, this._autoplayTimer = null, this._reducedMotion = !1, this._mql = null, this._isHovered = !1, this._isFocused = !1, this._dragStartCoord = 0, this._isDragging = !1, this._dragMoved = !1, this._touchStartCoord = 0, this._touchMoved = !1, this._autoplayTick = () => {
+      this._livePolite = !1, this.loop ? this.goTo(this._currentIndex + this.slidesPerMove) : this._currentIndex < this._maxIndex ? this.goTo(this._currentIndex + this.slidesPerMove) : this.goTo(0);
     }, this._handleMotionChange = (t) => {
       this._reducedMotion = t.matches, this._reducedMotion ? this._stopAutoplay() : this.autoplay && !this._isHovered && !this._isFocused && this._startAutoplay();
     }, this._handleMouseEnter = () => {
@@ -304,8 +318,8 @@ let o = class extends f {
     const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot:not([name])");
     if (!t) return;
     const e = t.assignedElements({ flatten: !0 }).filter((i) => i.tagName.toLowerCase() === "hx-carousel-item");
-    this._slides = e, e.forEach((i, s) => {
-      i.slideIndex = s, i.totalSlides = e.length;
+    this._slides = e, e.forEach((i, o) => {
+      i.slideIndex = o, i.totalSlides = e.length;
       const h = `${100 / this.slidesPerPage}%`;
       i.style.setProperty("--_hx-carousel-slide-width", h);
     }), this._currentIndex >= e.length && (this._currentIndex = Math.max(0, e.length - 1));
@@ -314,6 +328,10 @@ let o = class extends f {
     this._syncSlides();
   }
   // ─── Navigation ───
+  /**
+   * Maximum valid slide index accounting for the number of slides visible per page.
+   * @internal
+   */
   get _maxIndex() {
     return Math.max(0, this._slides.length - this.slidesPerPage);
   }
@@ -330,11 +348,11 @@ let o = class extends f {
   }
   next() {
     const t = this._currentIndex + this.slidesPerMove;
-    !this.loop && t > this._maxIndex || this.goTo(t);
+    !this.loop && t > this._maxIndex || (this._livePolite = !0, this.goTo(t));
   }
   previous() {
     const t = this._currentIndex - this.slidesPerMove;
-    !this.loop && t < 0 || this.goTo(t);
+    !this.loop && t < 0 || (this._livePolite = !0, this.goTo(t));
   }
   _startAutoplay() {
     this._autoplayTimer === null && (this._isPlaying = !0, this._autoplayTimer = setInterval(this._autoplayTick, this.autoplayInterval));
@@ -382,53 +400,68 @@ let o = class extends f {
     if (!this._isDragging) return;
     const e = t.changedTouches[0];
     if (!e) return;
-    const i = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this._touchStartCoord, s = 50;
-    this._touchMoved && (i > s ? this.previous() : i < -s && this.next()), this._isDragging = !1, this._touchMoved = !1;
+    const i = (this.orientation === "horizontal" ? e.clientX : e.clientY) - this._touchStartCoord, o = 50;
+    this._touchMoved && (i > o ? this.previous() : i < -o && this.next()), this._isDragging = !1, this._touchMoved = !1;
+  }
+  _goToManual(t) {
+    this._livePolite = !0, this.goTo(t);
   }
   // ─── Computed ───
+  /**
+   * CSS transform value applied to the slide track to scroll to the current index.
+   * @internal
+   */
   get _trackTransform() {
     const t = 100 / this.slidesPerPage, e = this._currentIndex * t;
     return this.orientation === "horizontal" ? `translateX(-${e}%)` : `translateY(-${e}%)`;
   }
+  /**
+   * Whether the previous navigation button should be enabled.
+   * @internal
+   */
   get _canGoPrev() {
     return this.loop || this._currentIndex > 0;
   }
+  /**
+   * Whether the next navigation button should be enabled.
+   * @internal
+   */
   get _canGoNext() {
     return this.loop || this._currentIndex < this._maxIndex;
   }
   // ─── Render Helpers ───
   _renderNavigation() {
-    return a`
+    return l`
       <div class="navigation" part="navigation">
         <slot name="previous-button">
           <button
             class="nav-btn"
             part="prev-btn"
             type="button"
-            aria-label="Previous slide"
+            aria-label=${this.labelPrevSlide}
             ?disabled=${!this._canGoPrev}
             @click=${() => this.previous()}
           >
             ${this._renderPrevIcon()}
           </button>
         </slot>
-        ${this.autoplay ? a`
+        ${this.autoplay ? l`
               <button
                 class="play-pause-btn"
                 part="play-pause-btn"
                 type="button"
-                aria-label=${this._isPlaying ? "Pause autoplay" : "Play autoplay"}
+                aria-label=${this._isPlaying ? this.labelPauseAutoplay : this.labelPlayAutoplay}
                 @click=${() => this._toggleAutoplay()}
               >
                 ${this._isPlaying ? this._renderPauseIcon() : this._renderPlayIcon()}
               </button>
-            ` : v}
+            ` : p}
         <slot name="next-button">
           <button
             class="nav-btn"
             part="next-btn"
             type="button"
-            aria-label="Next slide"
+            aria-label=${this.labelNextSlide}
             ?disabled=${!this._canGoNext}
             @click=${() => this.next()}
           >
@@ -440,23 +473,23 @@ let o = class extends f {
   }
   _renderPagination() {
     const t = this._slides.length;
-    if (t <= 1) return v;
+    if (t <= 1) return p;
     const e = Array.from({ length: t }, (r, i) => i);
-    return a`
+    return l`
       <div class="controls">
         <div class="pagination" part="pagination">
           ${e.map(
-      (r) => a`
+      (r) => l`
               <button
-                class=${y({
+                class=${m({
         "pagination-item": !0,
         "is-active": r === this._currentIndex
       })}
                 part="pagination-item"
                 type="button"
                 aria-label="Slide ${r + 1} of ${t}"
-                aria-current=${r === this._currentIndex ? "true" : "false"}
-                @click=${() => this.goTo(r)}
+                aria-current=${r === this._currentIndex ? "true" : p}
+                @click=${() => this._goToManual(r)}
               >
                 <span class="pagination-dot"></span>
               </button>
@@ -473,23 +506,27 @@ let o = class extends f {
     return this.orientation === "horizontal" ? I : M;
   }
   _renderPlayIcon() {
-    return $;
+    return S;
   }
   _renderPauseIcon() {
-    return T;
+    return $;
   }
   // ─── Render ───
   render() {
-    return a`
+    return l`
       <div
         class="base"
         part="base"
         role="region"
         aria-label=${this.label}
         aria-roledescription="carousel"
-        tabindex="0"
       >
-        <div class="live-region" role="status" aria-live="polite" aria-atomic="true">
+        <div
+          class="live-region"
+          role="status"
+          aria-live=${this._livePolite ? "polite" : "off"}
+          aria-atomic="true"
+        >
           ${this._liveText}
         </div>
         ${this._renderNavigation()}
@@ -515,65 +552,80 @@ let o = class extends f {
     `;
   }
 };
-o.styles = [x, m];
-n([
-  l({ type: String, reflect: !0 })
-], o.prototype, "label", 2);
-n([
-  l({ type: Boolean, reflect: !0 })
-], o.prototype, "loop", 2);
-n([
-  l({ type: Boolean, reflect: !0 })
-], o.prototype, "autoplay", 2);
-n([
-  l({ type: Number, attribute: "autoplay-interval" })
-], o.prototype, "autoplayInterval", 2);
-n([
-  l({ type: Number, attribute: "slides-per-page" })
-], o.prototype, "slidesPerPage", 2);
-n([
-  l({ type: Number, attribute: "slides-per-move" })
-], o.prototype, "slidesPerMove", 2);
-n([
-  l({ type: String, reflect: !0 })
-], o.prototype, "orientation", 2);
-n([
-  l({ type: Boolean, attribute: "mouse-dragging", reflect: !0 })
-], o.prototype, "mouseDragging", 2);
-n([
+s.styles = [x, y];
+a([
+  n({ type: String, reflect: !0 })
+], s.prototype, "label", 2);
+a([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "loop", 2);
+a([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "autoplay", 2);
+a([
+  n({ type: Number, attribute: "autoplay-interval" })
+], s.prototype, "autoplayInterval", 2);
+a([
+  n({ type: Number, attribute: "slides-per-page" })
+], s.prototype, "slidesPerPage", 2);
+a([
+  n({ type: Number, attribute: "slides-per-move" })
+], s.prototype, "slidesPerMove", 2);
+a([
+  n({ type: String, reflect: !0 })
+], s.prototype, "orientation", 2);
+a([
+  n({ type: Boolean, attribute: "mouse-dragging", reflect: !0 })
+], s.prototype, "mouseDragging", 2);
+a([
+  n({ type: String, attribute: "label-prev-slide" })
+], s.prototype, "labelPrevSlide", 2);
+a([
+  n({ type: String, attribute: "label-next-slide" })
+], s.prototype, "labelNextSlide", 2);
+a([
+  n({ type: String, attribute: "label-pause-autoplay" })
+], s.prototype, "labelPauseAutoplay", 2);
+a([
+  n({ type: String, attribute: "label-play-autoplay" })
+], s.prototype, "labelPlayAutoplay", 2);
+a([
+  c()
+], s.prototype, "_currentIndex", 2);
+a([
   c()
-], o.prototype, "_currentIndex", 2);
-n([
+], s.prototype, "_slides", 2);
+a([
   c()
-], o.prototype, "_slides", 2);
-n([
+], s.prototype, "_isPlaying", 2);
+a([
   c()
-], o.prototype, "_isPlaying", 2);
-n([
+], s.prototype, "_liveText", 2);
+a([
   c()
-], o.prototype, "_liveText", 2);
-o = n([
+], s.prototype, "_livePolite", 2);
+s = a([
   _("hx-carousel")
-], o);
-var C = Object.defineProperty, D = Object.getOwnPropertyDescriptor, p = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? D(e, r) : e, h = t.length - 1, d; h >= 0; h--)
-    (d = t[h]) && (s = (i ? d(e, r, s) : d(s)) || s);
-  return i && s && C(e, r, s), s;
+], s);
+var C = Object.defineProperty, T = Object.getOwnPropertyDescriptor, v = (t, e, r, i) => {
+  for (var o = i > 1 ? void 0 : i ? T(e, r) : e, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (o = (i ? u(e, r, o) : u(o)) || o);
+  return i && o && C(e, r, o), o;
 };
-let u = class extends f {
+let d = class extends f {
   constructor() {
     super(...arguments), this.slideIndex = 0, this.totalSlides = 0;
   }
   render() {
     const t = `Slide ${this.slideIndex + 1} of ${this.totalSlides}`;
-    return a`
+    return l`
       <div class="slide-group" role="group" aria-label=${t} tabindex="-1">
         <slot></slot>
       </div>
     `;
   }
 };
-u.styles = [
+d.styles = [
   x,
   g`
       :host {
@@ -601,17 +653,17 @@ u.styles = [
       }
     `
 ];
-p([
-  l({ type: Number, attribute: "slide-index" })
-], u.prototype, "slideIndex", 2);
-p([
-  l({ type: Number, attribute: "total-slides" })
-], u.prototype, "totalSlides", 2);
-u = p([
+v([
+  n({ type: Number, attribute: "slide-index" })
+], d.prototype, "slideIndex", 2);
+v([
+  n({ type: Number, attribute: "total-slides" })
+], d.prototype, "totalSlides", 2);
+d = v([
   _("hx-carousel-item")
-], u);
+], d);
 export {
-  o as H,
-  u as a
+  s as H,
+  d as a
 };
-//# sourceMappingURL=hx-carousel-item-C2yBnM0r.js.map
+//# sourceMappingURL=hx-carousel-item-Be0bC-7o.js.map