npm - @helixui/library - Versions diffs - 2.1.2-next.50 → 2.1.2-next.51 - Mend

@helixui/library 2.1.2-next.50 → 2.1.2-next.51

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

package/dist/shared/hx-card-BgXZXDuc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-card-BgXZXDuc.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-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-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-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-neutral-600, #495057));\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-neutral-200, #dee2e6));\n margin-top: auto;\n }\n`;\n","import { LitElement, 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 { 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 /* @internal /\n static override shadowRootOptions = {\n ...LitElement.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 /* @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 this._hasHeading = slot.assignedNodes({ flatten: true }).length > 0;\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 ) {\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 /* @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 @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","__decorateClass","property","state","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"hx-card-BgXZXDuc.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-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-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-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-neutral-600, #495057));\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-neutral-200, #dee2e6));\n margin-top: auto;\n }\n`;\n","import { LitElement, 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 { 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 /* @internal /\n static override shadowRootOptions = {\n ...LitElement.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 /* @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 this._hasHeading = slot.assignedNodes({ flatten: true }).length > 0;\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 ) {\n devWarn(\n 'hx-card',\n \"Interactive card (hx-href is set) is missing an accessible name. Set `hx-label` 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 @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","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-counter-CP42cSVK.js → hx-counter-B5NgKlw4.js} RENAMED Viewed

@@ -1,8 +1,9 @@
-import { css as d, LitElement as p, nothing as h, html as m } from "lit";
+import { css as m, LitElement as p, nothing as h, html as f } from "lit";
 import "./document-token-adoption-DuYNKd4k.js";
-import { property as s, state as c, customElement as f } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
-const y = d`
+import { property as s, state as c, customElement as _ } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { d } from "./dev-warn-YlwPHjtX.js";
+const g = m`
   :host {
     display: inline-block;
   }
@@ -54,43 +55,60 @@ const y = d`
     }
   }
 `;
-var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (e, i, o, r) => {
-  for (var a = r > 1 ? void 0 : r ? g(i, o) : i, l = e.length - 1, u; l >= 0; l--)
-    (u = e[l]) && (a = (r ? u(i, o, a) : u(a)) || a);
-  return r && a && v(i, o, a), a;
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (e, t, r, o) => {
+  for (var a = o > 1 ? void 0 : o ? x(t, r) : t, l = e.length - 1, u; l >= 0; l--)
+    (u = e[l]) && (a = (o ? u(t, r, a) : u(a)) || a);
+  return o && a && y(t, r, a), a;
 };
-let t = class extends p {
+let i = class extends p {
   constructor() {
-    super(...arguments), this.value = 0, this.duration = 1e3, this.easing = "ease-out", this.format = "integer", this.prefix = "", this.suffix = "", this.size = "md", this.label = "", this._displayValue = 0, this._announcedValue = "", this._animationId = null, this._startTime = null, this._startValue = 0, this._prefersReducedMotion = !1, this._motionMql = null, this._handleMotionChange = (e) => {
-      this._prefersReducedMotion = e.matches, this._prefersReducedMotion && (this._cancelAnimation(), this._displayValue = this.value);
+    super(...arguments), this.value = 0, this.duration = 1e3, this.easing = "ease-out", this.format = "integer", this.prefix = "", this.suffix = "", this.size = "md", this.label = "", this._displayValue = 0, this._announcedValue = "", this._animationId = null, this._startTime = null, this._startValue = 0, this._prefersReducedMotion = !1, this._motionMql = null, this._resolvedEasing = "ease-out", this._handleMotionChange = (e) => {
+      this._prefersReducedMotion = e.matches, this._prefersReducedMotion && (this._cancelAnimation(), this._displayValue = this.value, this._announcedValue = this._buildAnnouncement(), this.requestUpdate());
     };
   }
   // ─── Lifecycle ───
   connectedCallback() {
     super.connectedCallback();
     const e = this.getAttribute("size");
-    if (e !== null && !this.hasAttribute("hx-size") && (this.size = e), typeof window > "u") {
+    if (e !== null && !this.hasAttribute("hx-size") && (this.size = e), (this.label || "").trim(), typeof window > "u") {
       this._displayValue = this.value;
       return;
     }
-    const i = window.matchMedia("(prefers-reduced-motion: reduce)");
-    this._motionMql = i, this._prefersReducedMotion = i.matches, i.addEventListener("change", this._handleMotionChange), this._prefersReducedMotion ? (this._displayValue = this.value, this._announcedValue = this._formatValue()) : this._startAnimation();
+    const t = window.matchMedia("(prefers-reduced-motion: reduce)");
+    this._motionMql = t, this._prefersReducedMotion = t.matches, t.addEventListener("change", this._handleMotionChange), this._prefersReducedMotion ? (this._displayValue = this.value, this._announcedValue = this._buildAnnouncement()) : this._startAnimation();
   }
   disconnectedCallback() {
     var e;
     super.disconnectedCallback(), this._cancelAnimation(), (e = this._motionMql) == null || e.removeEventListener("change", this._handleMotionChange), this._motionMql = null;
   }
   updated(e) {
-    super.updated(e), e.has("value") && e.get("value") !== void 0 && (this._prefersReducedMotion ? (this._displayValue = this.value, this._announcedValue = this._formatValue()) : (this._startValue = this._displayValue, this._startTime = null, this._startAnimation()));
+    super.updated(e), e.has("value") && e.get("value") !== void 0 && (this._prefersReducedMotion ? (this._displayValue = this.value, this._announcedValue = this._buildAnnouncement()) : (this._startValue = this._displayValue, this._startTime = null, this._startAnimation()));
   }
   // ─── Animation ───
   /** @internal */
   _cancelAnimation() {
     this._animationId !== null && (cancelAnimationFrame(this._animationId), this._animationId = null);
   }
+  /**
+   * Validates `this.easing` once per animation start and stores the result in
+   * `_resolvedEasing`. This prevents devWarn from firing on every rAF tick for
+   * an invalid easing value — the warning is emitted at most once per call.
+   * @internal
+   */
+  _normalizeEasing() {
+    [
+      "linear",
+      "ease-in",
+      "ease-out",
+      "ease-in-out"
+    ].includes(this.easing) ? this._resolvedEasing = this.easing : (d(
+      "hx-counter",
+      `Unrecognized easing value "${this.easing}". Falling back to "linear". Valid values: ease-in, ease-out, ease-in-out, linear.`
+    ), this._resolvedEasing = "linear");
+  }
   /** @internal */
   _applyEasing(e) {
-    switch (this.easing) {
+    switch (this._resolvedEasing) {
       case "linear":
         return e;
       case "ease-in":
@@ -103,13 +121,15 @@ let t = class extends p {
   }
   /** @internal */
   _startAnimation() {
-    this._cancelAnimation();
-    const e = (i) => {
-      this._startTime === null && (this._startTime = i);
-      const o = i - this._startTime, r = Math.min(o / this.duration, 1), a = this._applyEasing(r);
-      this._displayValue = this._startValue + (this.value - this._startValue) * a, r < 1 ? this._animationId = requestAnimationFrame(e) : (this._displayValue = this.value, this._animationId = null, this._announcedValue = this._formatValue());
+    this._cancelAnimation(), this._normalizeEasing();
+    let e;
+    this.duration <= 0 ? (d("hx-counter", `duration must be > 0 (received ${this.duration}). Clamping to 1ms.`), e = 1) : e = this.duration;
+    const t = (r) => {
+      this._startTime === null && (this._startTime = r);
+      const o = r - this._startTime, a = Math.min(o / e, 1), l = this._applyEasing(a);
+      this._displayValue = this._startValue + (this.value - this._startValue) * l, a < 1 ? this._animationId = requestAnimationFrame(t) : (this._displayValue = this.value, this._animationId = null, this._announcedValue = this._buildAnnouncement());
     };
-    this._animationId = requestAnimationFrame(e);
+    this._animationId = requestAnimationFrame(t);
   }
   // ─── Formatting ───
   /** @internal */
@@ -117,17 +137,32 @@ let t = class extends p {
     const e = this.format === "integer" ? Math.round(this._displayValue) : parseFloat(this._displayValue.toFixed(2));
     return `${this.prefix}${e.toLocaleString()}${this.suffix}`;
   }
+  /**
+   * Builds the string announced to screen readers at animation end.
+   * Includes label context when present so users hear "Total patients: 1,284"
+   * rather than a bare number with no semantic context.
+   * @internal
+   */
+  _buildAnnouncement() {
+    const e = (this.label || "").trim();
+    if (!e)
+      return "";
+    const t = this._formatValue();
+    return `${e}: ${t}`;
+  }
   // ─── Render ───
   render() {
     const e = {
       counter: !0,
       [`counter--${this.size}`]: !0
-    };
-    return m`
+    }, t = (this.label || "").trim();
+    return f`
       <span
         part="counter"
-        class=${_(e)}
-        aria-label=${this.label ? `${this.label}: ${this._formatValue()}` : h}
+        role="status"
+        aria-live="off"
+        class=${v(e)}
+        aria-label=${t ? `${t}: ${this._formatValue()}` : h}
       >
         ${this._formatValue()}
       </span>
@@ -145,41 +180,41 @@ let t = class extends p {
     `;
   }
 };
-t.styles = [y];
+i.styles = [g];
 n([
   s({ type: Number })
-], t.prototype, "value", 2);
+], i.prototype, "value", 2);
 n([
   s({ type: Number })
-], t.prototype, "duration", 2);
+], i.prototype, "duration", 2);
 n([
   s({ type: String })
-], t.prototype, "easing", 2);
+], i.prototype, "easing", 2);
 n([
   s({ type: String })
-], t.prototype, "format", 2);
+], i.prototype, "format", 2);
 n([
   s({ type: String })
-], t.prototype, "prefix", 2);
+], i.prototype, "prefix", 2);
 n([
   s({ type: String })
-], t.prototype, "suffix", 2);
+], i.prototype, "suffix", 2);
 n([
   s({ type: String, reflect: !0, attribute: "hx-size" })
-], t.prototype, "size", 2);
+], i.prototype, "size", 2);
 n([
   s({ type: String })
-], t.prototype, "label", 2);
+], i.prototype, "label", 2);
 n([
   c()
-], t.prototype, "_displayValue", 2);
+], i.prototype, "_displayValue", 2);
 n([
   c()
-], t.prototype, "_announcedValue", 2);
-t = n([
-  f("hx-counter")
-], t);
+], i.prototype, "_announcedValue", 2);
+i = n([
+  _("hx-counter")
+], i);
 export {
-  t as H
+  i as H
 };
-//# sourceMappingURL=hx-counter-CP42cSVK.js.map
+//# sourceMappingURL=hx-counter-B5NgKlw4.js.map

package/dist/shared/hx-counter-B5NgKlw4.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-counter-B5NgKlw4.js","sources":["../../src/components/hx-counter/hx-counter.styles.ts","../../src/components/hx-counter/hx-counter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCounterStyles = css`\n :host {\n display: inline-block;\n }\n\n .counter {\n display: inline-flex;\n align-items: baseline;\n font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));\n color: var(--hx-counter-color, var(--hx-color-neutral-900, #111827));\n line-height: var(--hx-line-height-tight, 1.25);\n font-variant-numeric: tabular-nums;\n }\n\n /* ─── Size Variants ─── */\n\n .counter--sm {\n font-size: var(--hx-counter-font-size-sm, var(--hx-font-size-xl, 1.25rem));\n }\n\n .counter--md {\n font-size: var(--hx-counter-font-size-md, var(--hx-font-size-3xl, 1.875rem));\n }\n\n .counter--lg {\n font-size: var(--hx-counter-font-size-lg, var(--hx-font-size-5xl, 3rem));\n }\n\n /* ─── Screen-reader only (visually hidden live region) ─── */\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\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 .counter {\n /* Animation is handled in JS — reduced-motion consumers\n will see the final value immediately via the component logic */\n }\n }\n`;\n","import { LitElement, 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 { helixCounterStyles } from './hx-counter.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nexport type CounterSize = 'sm' | 'md' | 'lg';\nexport type CounterEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';\nexport type CounterFormat = 'integer' | 'decimal';\n\n/**\n * Animated number counter that counts from 0 (or the previous value) to the\n * target value using requestAnimationFrame. Respects prefers-reduced-motion.\n *\n * @summary Displays an animated numeric counter that transitions to a target value.\n *\n * @tag hx-counter\n *\n * @csspart counter - The outer counter element.\n *\n * @cssprop [--hx-counter-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-counter-font-weight=var(--hx-font-weight-bold)] - Font weight.\n * @cssprop [--hx-counter-color=var(--hx-color-neutral-900)] - Counter text color.\n * @cssprop [--hx-counter-font-size-sm=var(--hx-font-size-xl)] - Font size at sm.\n * @cssprop [--hx-counter-font-size-md=var(--hx-font-size-3xl)] - Font size at md.\n * @cssprop [--hx-counter-font-size-lg=var(--hx-font-size-5xl)] - Font size at lg.\n */\n@customElement('hx-counter')\nexport class HelixCounter extends LitElement {\n static override styles = [helixCounterStyles];\n\n /**\n * The target numeric value to count to.\n * @attr value\n */\n @property({ type: Number })\n value = 0;\n\n /**\n * Animation duration in milliseconds.\n * @attr duration\n */\n @property({ type: Number })\n duration = 1000;\n\n /**\n * Easing function applied to the animation progress.\n * @attr easing\n */\n @property({ type: String })\n easing: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' = 'ease-out';\n\n /**\n * Number format. 'integer' rounds to the nearest whole number;\n * 'decimal' shows two decimal places.\n * @attr format\n */\n @property({ type: String })\n format: 'integer' | 'decimal' = 'integer';\n\n /**\n * String prepended to the formatted value (e.g., '$').\n * @attr prefix\n */\n @property({ type: String })\n prefix = '';\n\n /**\n * String appended to the formatted value (e.g., '%').\n * @attr suffix\n */\n @property({ type: String })\n suffix = '';\n\n /**\n * Size variant controlling font size.\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 describing the counter's context (e.g. \"Total patients\", \"Active alerts\").\n * WCAG 4.1.2: a numeric value alone is meaningless without context for screen readers.\n * When provided, the value is applied as aria-label on the counter element.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n // ─── Internal State ───\n\n /** @internal */\n @state() private _displayValue = 0;\n\n /**\n * The final value announced to screen readers once animation completes.\n * Updated only at animation end so AT users hear the result, not every frame.\n * @internal\n */\n @state() private _announcedValue = '';\n\n /** @internal */\n private _animationId: number | null = null;\n /** @internal */\n private _startTime: number | null = null;\n /** @internal */\n private _startValue = 0;\n /** @internal */\n private _prefersReducedMotion = false;\n /** @internal */\n private _motionMql: MediaQueryList | null = null;\n /**\n * Normalized easing value after validation. Set once per animation start\n * to avoid repeated devWarn calls on every requestAnimationFrame tick.\n * @internal\n */\n private _resolvedEasing: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' = 'ease-out';\n /** @internal */\n private readonly _handleMotionChange = (e: MediaQueryListEvent): void => {\n this._prefersReducedMotion = e.matches;\n if (this._prefersReducedMotion) {\n this._cancelAnimation();\n this._displayValue = this.value;\n this._announcedValue = this._buildAnnouncement();\n this.requestUpdate();\n }\n };\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n // is not set, map the value and emit a deprecation warning.\n const legacySize = this.getAttribute('size');\n if (legacySize !== null && !this.hasAttribute('hx-size')) {\n devWarn('hx-counter', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n this.size = legacySize as CounterSize;\n }\n\n // WCAG 4.1.2: a numeric value without context is meaningless to screen readers.\n // Normalize: whitespace-only labels are treated as empty.\n if (!(this.label || '').trim()) {\n devWarn(\n 'hx-counter',\n 'hx-counter requires a label for screen reader accessibility (WCAG 4.1.2). Provide the `label` attribute.',\n );\n }\n\n // Guard for SSR — window.matchMedia and requestAnimationFrame are unavailable server-side\n if (typeof window === 'undefined') {\n this._displayValue = this.value;\n return;\n }\n\n const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n this._motionMql = mq;\n this._prefersReducedMotion = mq.matches;\n mq.addEventListener('change', this._handleMotionChange);\n\n if (this._prefersReducedMotion) {\n this._displayValue = this.value;\n this._announcedValue = this._buildAnnouncement();\n } else {\n this._startAnimation();\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._cancelAnimation();\n this._motionMql?.removeEventListener('change', this._handleMotionChange);\n this._motionMql = null;\n }\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (changedProps.has('value') && changedProps.get('value') !== undefined) {\n if (this._prefersReducedMotion) {\n this._displayValue = this.value;\n this._announcedValue = this._buildAnnouncement();\n } else {\n this._startValue = this._displayValue;\n this._startTime = null;\n this._startAnimation();\n }\n }\n }\n\n // ─── Animation ───\n\n /** @internal */\n private _cancelAnimation(): void {\n if (this._animationId !== null) {\n cancelAnimationFrame(this._animationId);\n this._animationId = null;\n }\n }\n\n /**\n * Validates `this.easing` once per animation start and stores the result in\n * `_resolvedEasing`. This prevents devWarn from firing on every rAF tick for\n * an invalid easing value — the warning is emitted at most once per call.\n * @internal\n */\n private _normalizeEasing(): void {\n const validEasings: Array<'linear' | 'ease-in' | 'ease-out' | 'ease-in-out'> = [\n 'linear',\n 'ease-in',\n 'ease-out',\n 'ease-in-out',\n ];\n if (validEasings.includes(this.easing)) {\n this._resolvedEasing = this.easing;\n } else {\n devWarn(\n 'hx-counter',\n `Unrecognized easing value \"${this.easing as string}\". Falling back to \"linear\". Valid values: ease-in, ease-out, ease-in-out, linear.`,\n );\n this._resolvedEasing = 'linear';\n }\n }\n\n /** @internal */\n private _applyEasing(t: number): number {\n switch (this._resolvedEasing) {\n case 'linear':\n return t;\n case 'ease-in':\n return t * t;\n case 'ease-out':\n return t * (2 - t);\n case 'ease-in-out':\n return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n }\n }\n\n /** @internal */\n private _startAnimation(): void {\n this._cancelAnimation();\n this._normalizeEasing();\n\n let effectiveDuration: number;\n if (this.duration <= 0) {\n devWarn('hx-counter', `duration must be > 0 (received ${this.duration}). Clamping to 1ms.`);\n effectiveDuration = 1;\n } else {\n effectiveDuration = this.duration;\n }\n\n const step = (timestamp: number): void => {\n if (this._startTime === null) {\n this._startTime = timestamp;\n }\n\n const elapsed = timestamp - this._startTime;\n const rawProgress = Math.min(elapsed / effectiveDuration, 1);\n const easedProgress = this._applyEasing(rawProgress);\n\n this._displayValue = this._startValue + (this.value - this._startValue) * easedProgress;\n\n if (rawProgress < 1) {\n this._animationId = requestAnimationFrame(step);\n } else {\n this._displayValue = this.value;\n this._animationId = null;\n // WCAG 4.1.2: announce the final value only once, at animation end.\n // _announcedValue feeds the off-screen live region so screen readers\n // hear a single announcement rather than one per animation frame.\n this._announcedValue = this._buildAnnouncement();\n }\n };\n\n this._animationId = requestAnimationFrame(step);\n }\n\n // ─── Formatting ───\n\n /** @internal */\n private _formatValue(): string {\n const num =\n this.format === 'integer'\n ? Math.round(this._displayValue)\n : parseFloat(this._displayValue.toFixed(2));\n\n return `${this.prefix}${num.toLocaleString()}${this.suffix}`;\n }\n\n /**\n * Builds the string announced to screen readers at animation end.\n * Includes label context when present so users hear \"Total patients: 1,284\"\n * rather than a bare number with no semantic context.\n * @internal\n */\n private _buildAnnouncement(): string {\n const normalizedLabel = (this.label || '').trim();\n if (!normalizedLabel) {\n // No label means the number lacks context — return empty to prevent\n // announcing a context-free number to screen readers.\n return '';\n }\n const formatted = this._formatValue();\n return `${normalizedLabel}: ${formatted}`;\n }\n\n // ─── Render ───\n\n override render() {\n const classes = {\n counter: true,\n [`counter--${this.size}`]: true,\n };\n\n const trimmedLabel = (this.label || '').trim();\n\n return html`\n <span\n part=\"counter\"\n role=\"status\"\n aria-live=\"off\"\n class=${classMap(classes)}\n aria-label=${trimmedLabel ? `${trimmedLabel}: ${this._formatValue()}` : nothing}\n >\n ${this._formatValue()}\n </span>\n \n <span\n class=\"sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n aria-hidden=${this._announcedValue ? nothing : 'true'}\n >${this._announcedValue}</span\n >\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-counter': HelixCounter;\n }\n}\n"],"names":["helixCounterStyles","css","HelixCounter","LitElement","legacySize","mq","_a","changedProps","devWarn","t","effectiveDuration","step","timestamp","elapsed","rawProgress","easedProgress","num","normalizedLabel","formatted","classes","trimmedLabel","html","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}