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

@helixui/library 3.0.0 → 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-icon-button-CqXH5Wwb.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-icon-button-CqXH5Wwb.js","sources":["../../src/components/hx-icon-button/hx-icon-button.styles.ts","../../src/components/hx-icon-button/hx-icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconButtonStyles = css`\n :host {\n display: inline-block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled);\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);\n border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));\n background-color: var(--hx-icon-button-bg);\n color: var(--hx-icon-button-color, var(--hx-color-primary-500));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast),\n color var(--hx-transition-fast),\n border-color var(--hx-transition-fast),\n box-shadow var(--hx-transition-fast);\n text-decoration: none;\n user-select: none;\n -webkit-user-select: none;\n flex-shrink: 0;\n }\n\n .button:focus-visible {\n outline: var(--hx-focus-ring-width) solid\n var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: var(--hx-focus-ring-offset);\n }\n\n .button:active {\n filter: brightness(var(--hx-filter-brightness-active, 0.8));\n }\n\n /* ─── Size Variants ─── */\n\n /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target for all sizes.\n min-width/min-height override the explicit size tokens when they fall below\n the 2.75rem (44px) threshold, preserving the visual icon size via font-size. */\n\n .button--sm {\n padding: var(--hx-space-1);\n width: var(--hx-icon-button-size, var(--hx-size-8));\n height: var(--hx-icon-button-size, var(--hx-size-8));\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n font-size: var(--hx-font-size-sm);\n }\n\n .button--md {\n padding: var(--hx-space-2);\n width: var(--hx-icon-button-size, var(--hx-size-10));\n height: var(--hx-icon-button-size, var(--hx-size-10));\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n font-size: var(--hx-font-size-md);\n }\n\n .button--lg {\n padding: var(--hx-space-3);\n width: var(--hx-icon-button-size, var(--hx-size-12));\n height: var(--hx-icon-button-size, var(--hx-size-12));\n min-width: var(--hx-touch-target-min, 2.75rem);\n min-height: var(--hx-touch-target-min, 2.75rem);\n font-size: var(--hx-font-size-lg);\n }\n\n /* ─── Style Variants ─── */\n\n .button--primary {\n --hx-icon-button-bg: var(--hx-color-primary-500);\n --hx-icon-button-color: var(--hx-color-text-on-primary);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--primary:hover {\n --hx-icon-button-bg: var(--hx-color-primary-600);\n }\n\n .button--secondary {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-primary-500);\n --hx-icon-button-border-color: var(--hx-color-primary-500);\n }\n\n .button--secondary:hover {\n --hx-icon-button-bg: var(--hx-color-primary-50);\n }\n\n .button--tertiary {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-text-strong);\n --hx-icon-button-border-color: var(--hx-color-border-strong);\n }\n\n .button--tertiary:hover {\n --hx-icon-button-bg: var(--hx-color-surface-sunken);\n }\n\n .button--danger {\n --hx-icon-button-bg: var(--hx-color-error-500);\n --hx-icon-button-color: var(--hx-color-text-on-error);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--danger:hover {\n --hx-icon-button-bg: var(--hx-color-error-600);\n }\n\n .button--ghost {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-primary-500);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-icon-button-bg: var(--hx-color-surface-raised);\n }\n\n /* ─── Icon Container ─── */\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1em;\n height: 1em;\n line-height: 1;\n pointer-events: none;\n }\n\n /* ─── Disabled ─── */\n\n .button[disabled] {\n cursor: not-allowed;\n /* P1-02 fix: opacity is set only on :host([disabled]) above to prevent\n multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. */\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .button {\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border: 2px solid ButtonText;\n }\n\n .button:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .button[disabled] {\n background-color: ButtonFace;\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixIconButtonStyles } from './hx-icon-button.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * An icon-only button component for compact, accessible actions.\n * Renders a square button or anchor element containing a single icon.\n * The `label` property is required and provides the accessible name\n * via `aria-label` and a native tooltip via the `title` attribute.\n *\n * @summary Icon-only action button with full accessibility support.\n *\n * @tag hx-icon-button\n *\n * @slot - Icon element to display (hx-icon, svg, or img).\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when the button is clicked (not disabled).\n *\n * @csspart button - The native button or anchor element.\n * @csspart icon - The icon container span wrapping the default slot.\n *\n * @cssprop [--hx-icon-button-bg=transparent] - Button background color.\n * @cssprop [--hx-icon-button-color=var(--hx-color-primary-500)] - Icon color.\n * @cssprop [--hx-icon-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-icon-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-icon-button-size] - Explicit width and height override for the button.\n * @cssprop [--hx-icon-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-filter-brightness-active] - CSS filter.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-primary-600] - Color.\n * @cssprop [--hx-color-primary-50] - Color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-error-600] - Color.\n */\n@customElement('hx-icon-button')\nexport class HelixIconButton extends HelixElement {\n static override styles = [helixIconButtonStyles];\n\n /**\n * Accessible name for the button. Required. Rendered as `aria-label` and\n * `title` on the underlying element. The component renders nothing when absent,\n * and a console warning is emitted to alert developers during authoring.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Visual style variant of the button.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' = 'ghost';\n\n /**\n * Size of the button.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * The type attribute for the underlying button element.\n * Has no effect when `href` is set.\n * @attr type\n */\n @property({ type: String })\n type: 'button' | 'submit' | 'reset' = 'button';\n\n /**\n * Whether the button is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * When set, renders an `<a>` element instead of a `<button>`.\n * @attr href\n */\n @property({ type: String })\n href: string | undefined = undefined;\n\n /**\n * Name submitted with form data. Only applicable when rendering as a button.\n * @attr name\n */\n @property({ type: String })\n name: string | undefined = undefined;\n\n /**\n * Value submitted with form data. Only applicable when rendering as a button.\n * @attr value\n */\n @property({ type: String })\n value: string | undefined = undefined;\n\n // ─── Form Association ───\n\n /** Marks this element as form-associated for ElementInternals support. @internal */\n static override formAssociated = true;\n\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n // ─── Event Handling ───\n\n /** @internal */\n private _handleClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n /**\n * Dispatched when the button is clicked.\n * @event hx-click\n */\n this.dispatchEvent(\n new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n }),\n );\n\n // Handle form submission/reset if form-associated and not in href/link mode\n if (!this.href) {\n if (this.type === 'submit' && this._internals.form) {\n this._internals.form.requestSubmit();\n } else if (this.type === 'reset' && this._internals.form) {\n this._internals.form.reset();\n }\n }\n }\n\n // ─── Render Helpers ───\n\n /** @internal */\n private _normalizedLabel(): string {\n return this.label.trim();\n }\n\n /** @internal */\n private _classes() {\n return {\n button: true,\n [`button--${this.variant}`]: true,\n [`button--${this.size}`]: true,\n };\n }\n\n /** @internal */\n private _iconSlot() {\n return html`<span part=\"icon\" class=\"icon\"><slot></slot></span>`;\n }\n\n // ─── Render ───\n\n override render() {\n const normalizedLabel = this._normalizedLabel();\n if (!normalizedLabel) {\n devWarn(\n 'hx-icon-button',\n 'The `label` property is required for accessibility. Render suppressed.',\n );\n return nothing;\n }\n\n if (this.href !== undefined) {\n // P1-03 fix: disabled anchor must set tabindex=\"-1\" explicitly — an <a>\n // without href is non-focusable by default in most browsers, but this is\n // browser-dependent. Explicit tabindex=\"-1\" guarantees keyboard exclusion\n // across all conforming browsers.\n // P1-07 note: aria-disabled IS required on the anchor branch because\n // <a> elements have no native disabled attribute; aria-disabled is the\n // only AT signal available.\n return html`\n <a\n part=\"button\"\n class=${classMap(this._classes())}\n href=${ifDefined(this.disabled ? undefined : this.href)}\n aria-label=${normalizedLabel}\n title=${normalizedLabel}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : nothing}\n @click=${this._handleClick}\n >\n ${this._iconSlot()}\n </a>\n `;\n }\n\n // P1-07 fix: aria-disabled is redundant on a natively disabled <button>.\n // The native disabled attribute already exposes aria-disabled=\"true\"\n // implicitly in the accessibility tree. Duplicate explicit aria-disabled\n // creates ambiguity about design intent. Keep only native ?disabled.\n return html`\n <button\n part=\"button\"\n class=${classMap(this._classes())}\n ?disabled=${this.disabled}\n type=${this.type}\n aria-label=${normalizedLabel}\n title=${normalizedLabel}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n @click=${this._handleClick}\n >\n ${this._iconSlot()}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-icon-button': HelixIconButton;\n }\n interface HTMLElementEventMap {\n 'hx-click': CustomEvent<{ originalEvent: MouseEvent }>;\n }\n}\n"],"names":["helixIconButtonStyles","css","HelixIconButton","HelixElement","disabled","e","html","normalizedLabel","classMap","ifDefined","nothing","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/hx-image-2gt14zZd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-image-2gt14zZd.js","sources":["../../src/components/hx-image/hx-image.styles.ts","../../src/components/hx-image/hx-image.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixImageStyles = css`\n :host {\n display: block;\n }\n\n .image__container {\n position: relative;\n display: block;\n overflow: hidden;\n margin: 0;\n padding: 0;\n aspect-ratio: var(--_ratio, var(--hx-image-aspect-ratio));\n border-radius: var(--_radius, var(--hx-image-border-radius, 0));\n }\n\n .image__container--error {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--hx-image-fallback-min-height, 3rem);\n background-color: var(--hx-color-neutral-100, #f1f5f9);\n color: var(--hx-color-neutral-500, #64748b);\n }\n\n .image__img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: var(--_fit, var(--hx-image-object-fit, cover));\n }\n\n .image__caption {\n display: none;\n padding: var(--hx-image-caption-padding, 0.5rem 0 0);\n color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #475569));\n font-size: var(--hx-image-caption-font-size, 0.875rem);\n }\n\n .image__caption--visible {\n display: block;\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n .image__container--error {\n border: 1px solid GrayText;\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 { styleMap } from 'lit/directives/style-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixImageStyles } from './hx-image.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/\n An accessible image wrapper with lazy loading, fallback support, aspect ratio control,\n * responsive image (srcset/sizes) support, and optional caption.\n \n @summary Accessible image wrapper with lazy loading, fallback, srcset, and aspect ratio control.\n \n @tag hx-image\n \n @slot fallback - Custom content shown when the image fails to load and no fallback-src is set.\n * @slot caption - Optional caption content rendered in a figcaption element below the image.\n \n @csspart base - The inner img element.\n * @csspart caption - The figcaption element (visible only when caption content is present).\n \n @cssprop [--hx-image-object-fit] - Controls how the image fills its container. Maps to object-fit.\n * @cssprop [--hx-image-border-radius] - Border radius of the image. Overridden by the `rounded` prop.\n * @cssprop [--hx-image-aspect-ratio] - Aspect ratio of the image container. Overridden by the `ratio` prop.\n * @cssprop [--hx-image-caption-color] - Text color for the caption.\n * @cssprop [--hx-image-caption-font-size] - Font size for the caption.\n * @cssprop [--hx-image-caption-padding] - Padding for the caption.\n * @cssprop [--hx-image-fallback-min-height] - Minimum height of the error/fallback container.\n \n @fires hx-load - Dispatched when the image has successfully loaded.\n * @fires hx-error - Dispatched when the image fails to load (including after fallback-src also fails).\n /\n@customElement('hx-image')\nexport class HelixImage extends HelixElement {\n static override styles = [helixImageStyles];\n\n /\n The URL of the image to display.\n * @attr src\n /\n @property({ type: String, reflect: true })\n src = '';\n\n /\n Accessible text description of the image.\n * Required for informative images. Use the `decorative` prop for decorative images\n * instead of setting this to an empty string — explicit decorative intent is preferred.\n * @attr alt\n /\n @property({ type: String, reflect: true })\n alt: string \| undefined = undefined;\n\n /\n Marks the image as decorative (hidden from screen readers).\n * Use this instead of `alt=\"\"` to make decorative intent explicit in markup.\n * When set, the inner img receives `alt=\"\"` and `role=\"presentation\"`.\n * @attr decorative\n /\n @property({ type: Boolean, reflect: true })\n decorative = false;\n\n /\n Width of the image element.\n * @attr width\n /\n @property({ reflect: true })\n width: number \| string \| undefined = undefined;\n\n /\n Height of the image element.\n * @attr height\n /\n @property({ reflect: true })\n height: number \| string \| undefined = undefined;\n\n /\n Loading strategy for the image.\n * @attr loading\n /\n @property({ type: String, reflect: true })\n loading: 'lazy' \| 'eager' = 'lazy';\n\n /\n How the image should be resized to fit its container.\n * Maps to CSS object-fit.\n * @attr fit\n /\n @property({ type: String, reflect: true })\n fit: 'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down' \| undefined = undefined;\n\n /\n CSS aspect-ratio value (e.g. \"16/9\", \"1\", \"4/3\").\n * When set, the container maintains this ratio.\n * @attr ratio\n /\n @property({ type: String, reflect: true })\n ratio: string \| undefined = undefined;\n\n /\n Border radius for the image.\n * Boolean attribute (or `true`) applies the theme's medium radius token.\n * A string value is used directly as a CSS border-radius value (e.g. \"1rem\", \"50%\").\n \n Note: When set as an HTML attribute (`<hx-image rounded>`), Lit receives the value as\n * an empty string (`''`). When set programmatically (`el.rounded = true`), it receives\n * a boolean. Both forms apply the theme radius token.\n \n @attr rounded\n /\n @property({ type: String, reflect: true })\n rounded: boolean \| string \| undefined = undefined;\n\n /\n Fallback image URL shown when the primary src fails to load.\n * @attr fallback-src\n /\n @property({ type: String, attribute: 'fallback-src', reflect: true })\n fallbackSrc: string \| undefined = undefined;\n\n /\n A comma-separated list of image candidates for responsive images.\n * Passed directly to the inner img's srcset attribute.\n * Enables Drupal responsive image styles and browser-native image selection.\n * @attr srcset\n /\n @property({ type: String, reflect: true })\n srcset: string \| undefined = undefined;\n\n /\n Media conditions indicating which image size to use alongside srcset.\n * Works in conjunction with the `srcset` attribute.\n * @attr sizes\n /\n @property({ type: String, reflect: true })\n sizes: string \| undefined = undefined;\n\n /* @internal /\n @state()\n private _error = false;\n\n /* @internal /\n @state()\n private _usedFallbackSrc = false;\n\n /* @internal /\n @state()\n private _hasCaptionSlot = false;\n\n /* @internal /\n private _handleLoad(): void {\n this.dispatchEvent(new CustomEvent<void>('hx-load', { bubbles: true, composed: true }));\n }\n\n /* @internal /\n private _handleError(): void {\n if (!this._error && this.fallbackSrc && !this._usedFallbackSrc) {\n // Try the fallback-src before showing the fallback slot\n this._usedFallbackSrc = true;\n return;\n }\n this._error = true;\n this.dispatchEvent(new CustomEvent<void>('hx-error', { bubbles: true, composed: true }));\n }\n\n /* @internal /\n private _onCaptionSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasCaptionSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n /* @internal /\n private _computeBorderRadius(): string \| undefined {\n if (this.rounded === true \|\| this.rounded === '' \|\| this.rounded === 'true') {\n return 'var(--hx-border-radius-md, 0.375rem)';\n }\n if (typeof this.rounded === 'string' && this.rounded.length > 0 && this.rounded !== 'false') {\n return this.rounded;\n }\n return undefined;\n }\n\n /* @internal */\n private _currentSrc(): string {\n if (this._usedFallbackSrc && this.fallbackSrc) {\n return this.fallbackSrc;\n }\n return this.src;\n }\n\n override render() {\n if (!this.decorative && !this.alt) {\n devWarn(\n 'hx-image',\n 'Informative images require an `alt` attribute for accessibility (WCAG 1.1.1). ' +\n 'Provide a descriptive `alt` value, or set the `decorative` attribute if the image is decorative.',\n );\n }\n const isDecorative = this.decorative \|\| this.alt === '';\n const altText = isDecorative ? '' : (this.alt ?? '');\n const borderRadius = this._computeBorderRadius();\n const showCaption = this._hasCaptionSlot;\n\n const containerStyles = {\n ...(this.ratio ? { '--_ratio': this.ratio } : {}),\n ...(this.fit ? { '--_fit': this.fit } : {}),\n ...(borderRadius ? { '--_radius': borderRadius } : {}),\n ...(this.width != null\n ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }\n : {}),\n ...(this.height != null\n ? { height: typeof this.height === 'number' ? `${this.height}px` : this.height }\n : {}),\n };\n\n if (this._error) {\n return html`\n <figure\n class=\"image__container image__container--error\"\n style=${styleMap(containerStyles)}\n role=\"alert\"\n >\n <slot name=\"fallback\"></slot>\n </figure>\n `;\n }\n\n return html`\n <figure class=\"image__container\" style=${styleMap(containerStyles)}>\n <img\n part=\"base\"\n class=\"image__img\"\n src=${this._currentSrc() \|\| nothing}\n alt=${altText}\n role=${isDecorative ? 'presentation' : nothing}\n loading=${this.loading}\n width=${this.width != null ? this.width : nothing}\n height=${this.height != null ? this.height : nothing}\n srcset=${this.srcset ?? nothing}\n sizes=${this.sizes ?? nothing}\n @load=${this._handleLoad}\n @error=${this._handleError}\n />\n <figcaption\n part=\"caption\"\n class=${classMap({ image__caption: true, 'image__caption--visible': showCaption })}\n >\n <slot name=\"caption\" @slotchange=${this._onCaptionSlotChange}></slot>\n </figcaption>\n </figure>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-image': HelixImage;\n }\n}\n"],"names":["helixImageStyles","css","HelixImage","HelixElement","e","slot","isDecorative","altText","borderRadius","showCaption","containerStyles","html","styleMap","nothing","classMap","__decorateClass","property","state","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACiCzB,IAAMC,IAAN,cAAyBC,EAAa;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,MAAM,IASN,KAAA,MAA0B,QAS1B,KAAA,aAAa,IAOb,KAAA,QAAqC,QAOrC,KAAA,SAAsC,QAOtC,KAAA,UAA4B,QAQ5B,KAAA,MAAwE,QAQxE,KAAA,QAA4B,QAc5B,KAAA,UAAwC,QAOxC,KAAA,cAAkC,QASlC,KAAA,SAA6B,QAQ7B,KAAA,QAA4B,QAI5B,KAAQ,SAAS,IAIjB,KAAQ,mBAAmB,IAI3B,KAAQ,kBAAkB;AAAA,EAAA;AAAA;AAAA,EAGlB,cAAoB;AAC1B,SAAK,cAAc,IAAI,YAAkB,WAAW,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA;AAAA,EAGQ,eAAqB;AAC3B,QAAI,CAAC,KAAK,UAAU,KAAK,eAAe,CAAC,KAAK,kBAAkB;AAE9D,WAAK,mBAAmB;AACxB;AAAA,IACF;AACA,SAAK,SAAS,IACd,KAAK,cAAc,IAAI,YAAkB,YAAY,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACzF;AAAA;AAAA,EAGQ,qBAAqBC,GAAgB;AAC3C,UAAMC,IAAOD,EAAE;AACf,SAAK,kBAAkBC,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACxE;AAAA;AAAA,EAGQ,uBAA2C;AACjD,QAAI,KAAK,YAAY,MAAQ,KAAK,YAAY,MAAM,KAAK,YAAY;AACnE,aAAO;AAET,QAAI,OAAO,KAAK,WAAY,YAAY,KAAK,QAAQ,SAAS,KAAK,KAAK,YAAY;AAClF,aAAO,KAAK;AAAA,EAGhB;AAAA;AAAA,EAGQ,cAAsB;AAC5B,WAAI,KAAK,oBAAoB,KAAK,cACzB,KAAK,cAEP,KAAK;AAAA,EACd;AAAA,EAES,SAAS;AAChB,IAAI,CAAC,KAAK,cAAe,KAAK;AAO9B,UAAMC,IAAe,KAAK,cAAc,KAAK,QAAQ,IAC/CC,IAAUD,IAAe,KAAM,KAAK,OAAO,IAC3CE,IAAe,KAAK,qBAAA,GACpBC,IAAc,KAAK,iBAEnBC,IAAkB;AAAA,MACtB,GAAI,KAAK,QAAQ,EAAE,YAAY,KAAK,MAAA,IAAU,CAAA;AAAA,MAC9C,GAAI,KAAK,MAAM,EAAE,UAAU,KAAK,IAAA,IAAQ,CAAA;AAAA,MACxC,GAAIF,IAAe,EAAE,aAAaA,EAAA,IAAiB,CAAA;AAAA,MACnD,GAAI,KAAK,SAAS,OACd,EAAE,OAAO,OAAO,KAAK,SAAU,WAAW,GAAG,KAAK,KAAK,OAAO,KAAK,MAAA,IACnE,CAAA;AAAA,MACJ,GAAI,KAAK,UAAU,OACf,EAAE,QAAQ,OAAO,KAAK,UAAW,WAAW,GAAG,KAAK,MAAM,OAAO,KAAK,WACtE,CAAA;AAAA,IAAC;AAGP,WAAI,KAAK,SACAG;AAAA;AAAA;AAAA,kBAGKC,EAASF,CAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,UAQhCC;AAAA,+CACoCC,EAASF,CAAe,CAAC;AAAA;AAAA;AAAA;AAAA,gBAIxD,KAAK,YAAA,KAAiBG,CAAO;AAAA,gBAC7BN,CAAO;AAAA,iBACND,IAAe,iBAAiBO,CAAO;AAAA,oBACpC,KAAK,OAAO;AAAA,kBACd,KAAK,SAAS,OAAO,KAAK,QAAQA,CAAO;AAAA,mBACxC,KAAK,UAAU,OAAO,KAAK,SAASA,CAAO;AAAA,mBAC3C,KAAK,UAAUA,CAAO;AAAA,kBACvB,KAAK,SAASA,CAAO;AAAA,kBACrB,KAAK,WAAW;AAAA,mBACf,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,kBAIlBC,EAAS,EAAE,gBAAgB,IAAM,2BAA2BL,EAAA,CAAa,CAAC;AAAA;AAAA,6CAE/C,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AA1NaP,EACK,SAAS,CAACF,CAAgB;AAO1Ce,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9Bd,EAQX,WAAA,OAAA,CAAA;AASAa,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhB9Bd,EAiBX,WAAA,OAAA,CAAA;AASAa,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzB/Bd,EA0BX,WAAA,cAAA,CAAA;AAOAa,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAhChBd,EAiCX,WAAA,SAAA,CAAA;AAOAa,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAvChBd,EAwCX,WAAA,UAAA,CAAA;AAOAa,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9C9Bd,EA+CX,WAAA,WAAA,CAAA;AAQAa,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAtD9Bd,EAuDX,WAAA,OAAA,CAAA;AAQAa,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9D9Bd,EA+DX,WAAA,SAAA,CAAA;AAcAa,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5E9Bd,EA6EX,WAAA,WAAA,CAAA;AAOAa,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,SAAS,IAAM;AAAA,GAnFzDd,EAoFX,WAAA,eAAA,CAAA;AASAa,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5F9Bd,EA6FX,WAAA,UAAA,CAAA;AAQAa,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GApG9Bd,EAqGX,WAAA,SAAA,CAAA;AAIQa,EAAA;AAAA,EADPE,EAAA;AAAM,GAxGIf,EAyGH,WAAA,UAAA,CAAA;AAIAa,EAAA;AAAA,EADPE,EAAA;AAAM,GA5GIf,EA6GH,WAAA,oBAAA,CAAA;AAIAa,EAAA;AAAA,EADPE,EAAA;AAAM,GAhHIf,EAiHH,WAAA,mBAAA,CAAA;AAjHGA,IAANa,EAAA;AAAA,EADNG,EAAc,UAAU;AAAA,GACZhB,CAAA;"}
1	+ {"version":3,"file":"hx-image-2gt14zZd.js","sources":["../../src/components/hx-image/hx-image.styles.ts","../../src/components/hx-image/hx-image.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixImageStyles = css`\n :host {\n display: block;\n }\n\n .image__container {\n position: relative;\n display: block;\n overflow: hidden;\n margin: 0;\n padding: 0;\n aspect-ratio: var(--_ratio, var(--hx-image-aspect-ratio));\n border-radius: var(--_radius, var(--hx-image-border-radius, 0));\n }\n\n .image__container--error {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--hx-image-fallback-min-height, 3rem);\n background-color: var(--hx-color-neutral-100, #f1f5f9);\n color: var(--hx-color-neutral-500, #64748b);\n }\n\n .image__img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: var(--_fit, var(--hx-image-object-fit, cover));\n }\n\n .image__caption {\n display: none;\n padding: var(--hx-image-caption-padding, 0.5rem 0 0);\n color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #475569));\n font-size: var(--hx-image-caption-font-size, 0.875rem);\n }\n\n .image__caption--visible {\n display: block;\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── /\n\n @media (forced-colors: active) {\n .image__container--error {\n border: 1px solid GrayText;\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 { styleMap } from 'lit/directives/style-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixImageStyles } from './hx-image.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/\n An accessible image wrapper with lazy loading, fallback support, aspect ratio control,\n * responsive image (srcset/sizes) support, and optional caption.\n \n @summary Accessible image wrapper with lazy loading, fallback, srcset, and aspect ratio control.\n \n @tag hx-image\n \n @slot fallback - Custom content shown when the image fails to load and no fallback-src is set.\n * @slot caption - Optional caption content rendered in a figcaption element below the image.\n \n @csspart base - The inner img element.\n * @csspart caption - The figcaption element (visible only when caption content is present).\n \n @cssprop [--hx-image-object-fit] - Controls how the image fills its container. Maps to object-fit.\n * @cssprop [--hx-image-border-radius] - Border radius of the image. Overridden by the `rounded` prop.\n * @cssprop [--hx-image-aspect-ratio] - Aspect ratio of the image container. Overridden by the `ratio` prop.\n * @cssprop [--hx-image-caption-color] - Text color for the caption.\n * @cssprop [--hx-image-caption-font-size] - Font size for the caption.\n * @cssprop [--hx-image-caption-padding] - Padding for the caption.\n * @cssprop [--hx-image-fallback-min-height] - Minimum height of the error/fallback container.\n \n @fires hx-load - Dispatched when the image has successfully loaded.\n * @fires hx-error - Dispatched when the image fails to load (including after fallback-src also fails).\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n /\n@customElement('hx-image')\nexport class HelixImage extends HelixElement {\n static override styles = [helixImageStyles];\n\n /\n The URL of the image to display.\n * @attr src\n /\n @property({ type: String, reflect: true })\n src = '';\n\n /\n Accessible text description of the image.\n * Required for informative images. Use the `decorative` prop for decorative images\n * instead of setting this to an empty string — explicit decorative intent is preferred.\n * @attr alt\n /\n @property({ type: String, reflect: true })\n alt: string \| undefined = undefined;\n\n /\n Marks the image as decorative (hidden from screen readers).\n * Use this instead of `alt=\"\"` to make decorative intent explicit in markup.\n * When set, the inner img receives `alt=\"\"` and `role=\"presentation\"`.\n * @attr decorative\n /\n @property({ type: Boolean, reflect: true })\n decorative = false;\n\n /\n Width of the image element.\n * @attr width\n /\n @property({ reflect: true })\n width: number \| string \| undefined = undefined;\n\n /\n Height of the image element.\n * @attr height\n /\n @property({ reflect: true })\n height: number \| string \| undefined = undefined;\n\n /\n Loading strategy for the image.\n * @attr loading\n /\n @property({ type: String, reflect: true })\n loading: 'lazy' \| 'eager' = 'lazy';\n\n /\n How the image should be resized to fit its container.\n * Maps to CSS object-fit.\n * @attr fit\n /\n @property({ type: String, reflect: true })\n fit: 'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down' \| undefined = undefined;\n\n /\n CSS aspect-ratio value (e.g. \"16/9\", \"1\", \"4/3\").\n * When set, the container maintains this ratio.\n * @attr ratio\n /\n @property({ type: String, reflect: true })\n ratio: string \| undefined = undefined;\n\n /\n Border radius for the image.\n * Boolean attribute (or `true`) applies the theme's medium radius token.\n * A string value is used directly as a CSS border-radius value (e.g. \"1rem\", \"50%\").\n \n Note: When set as an HTML attribute (`<hx-image rounded>`), Lit receives the value as\n * an empty string (`''`). When set programmatically (`el.rounded = true`), it receives\n * a boolean. Both forms apply the theme radius token.\n \n @attr rounded\n /\n @property({ type: String, reflect: true })\n rounded: boolean \| string \| undefined = undefined;\n\n /\n Fallback image URL shown when the primary src fails to load.\n * @attr fallback-src\n /\n @property({ type: String, attribute: 'fallback-src', reflect: true })\n fallbackSrc: string \| undefined = undefined;\n\n /\n A comma-separated list of image candidates for responsive images.\n * Passed directly to the inner img's srcset attribute.\n * Enables Drupal responsive image styles and browser-native image selection.\n * @attr srcset\n /\n @property({ type: String, reflect: true })\n srcset: string \| undefined = undefined;\n\n /\n Media conditions indicating which image size to use alongside srcset.\n * Works in conjunction with the `srcset` attribute.\n * @attr sizes\n /\n @property({ type: String, reflect: true })\n sizes: string \| undefined = undefined;\n\n /* @internal /\n @state()\n private _error = false;\n\n /* @internal /\n @state()\n private _usedFallbackSrc = false;\n\n /* @internal /\n @state()\n private _hasCaptionSlot = false;\n\n /* @internal /\n private _handleLoad(): void {\n this.dispatchEvent(new CustomEvent<void>('hx-load', { bubbles: true, composed: true }));\n }\n\n /* @internal /\n private _handleError(): void {\n if (!this._error && this.fallbackSrc && !this._usedFallbackSrc) {\n // Try the fallback-src before showing the fallback slot\n this._usedFallbackSrc = true;\n return;\n }\n this._error = true;\n this.dispatchEvent(new CustomEvent<void>('hx-error', { bubbles: true, composed: true }));\n }\n\n /* @internal /\n private _onCaptionSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasCaptionSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n /* @internal /\n private _computeBorderRadius(): string \| undefined {\n if (this.rounded === true \|\| this.rounded === '' \|\| this.rounded === 'true') {\n return 'var(--hx-border-radius-md, 0.375rem)';\n }\n if (typeof this.rounded === 'string' && this.rounded.length > 0 && this.rounded !== 'false') {\n return this.rounded;\n }\n return undefined;\n }\n\n /* @internal */\n private _currentSrc(): string {\n if (this._usedFallbackSrc && this.fallbackSrc) {\n return this.fallbackSrc;\n }\n return this.src;\n }\n\n override render() {\n if (!this.decorative && !this.alt) {\n devWarn(\n 'hx-image',\n 'Informative images require an `alt` attribute for accessibility (WCAG 1.1.1). ' +\n 'Provide a descriptive `alt` value, or set the `decorative` attribute if the image is decorative.',\n );\n }\n const isDecorative = this.decorative \|\| this.alt === '';\n const altText = isDecorative ? '' : (this.alt ?? '');\n const borderRadius = this._computeBorderRadius();\n const showCaption = this._hasCaptionSlot;\n\n const containerStyles = {\n ...(this.ratio ? { '--_ratio': this.ratio } : {}),\n ...(this.fit ? { '--_fit': this.fit } : {}),\n ...(borderRadius ? { '--_radius': borderRadius } : {}),\n ...(this.width != null\n ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }\n : {}),\n ...(this.height != null\n ? { height: typeof this.height === 'number' ? `${this.height}px` : this.height }\n : {}),\n };\n\n if (this._error) {\n return html`\n <figure\n class=\"image__container image__container--error\"\n style=${styleMap(containerStyles)}\n role=\"alert\"\n >\n <slot name=\"fallback\"></slot>\n </figure>\n `;\n }\n\n return html`\n <figure class=\"image__container\" style=${styleMap(containerStyles)}>\n <img\n part=\"base\"\n class=\"image__img\"\n src=${this._currentSrc() \|\| nothing}\n alt=${altText}\n role=${isDecorative ? 'presentation' : nothing}\n loading=${this.loading}\n width=${this.width != null ? this.width : nothing}\n height=${this.height != null ? this.height : nothing}\n srcset=${this.srcset ?? nothing}\n sizes=${this.sizes ?? nothing}\n @load=${this._handleLoad}\n @error=${this._handleError}\n />\n <figcaption\n part=\"caption\"\n class=${classMap({ image__caption: true, 'image__caption--visible': showCaption })}\n >\n <slot name=\"caption\" @slotchange=${this._onCaptionSlotChange}></slot>\n </figcaption>\n </figure>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-image': HelixImage;\n }\n}\n"],"names":["helixImageStyles","css","HelixImage","HelixElement","e","slot","isDecorative","altText","borderRadius","showCaption","containerStyles","html","styleMap","nothing","classMap","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-link-BESrWK8M.js → hx-link-Bem4Gn68.js} RENAMED Viewed

@@ -3,7 +3,7 @@ import { property as i, customElement as u } from "lit/decorators.js";
 import { classMap as p } from "lit/directives/class-map.js";
 import { ifDefined as a } from "lit/directives/if-defined.js";
 import { H as k } from "./helix-element-BNEYeiys.js";
-const m = x`
+const y = x`
   :host {
     display: inline;
   }
@@ -53,7 +53,7 @@ const m = x`
   /* --- Variant: subtle --- */
   .link--subtle {
-    color: var(--hx-link-color-subtle, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-link-color-subtle, var(--hx-color-text-secondary, #475569));
     text-decoration: none;
   }
@@ -75,7 +75,7 @@ const m = x`
   /* --- Disabled --- */
   .link--disabled {
-    color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));
+    color: var(--hx-link-color-disabled, var(--hx-color-text-disabled, #94a3b8));
     text-decoration: none;
     cursor: not-allowed;
   }
@@ -127,10 +127,10 @@ const m = x`
     border: 0;
   }
 `;
-var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (e, n, s, l) => {
-  for (var o = l > 1 ? void 0 : l ? b(n, s) : n, d = e.length - 1, c; d >= 0; d--)
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, t = (e, n, s, l) => {
+  for (var o = l > 1 ? void 0 : l ? m(n, s) : n, d = e.length - 1, c; d >= 0; d--)
     (c = e[d]) && (o = (l ? c(n, s, o) : c(o)) || o);
-  return l && o && y(n, s, o), o;
+  return l && o && b(n, s, o), o;
 };
 let r = class extends k {
   constructor() {
@@ -215,7 +215,7 @@ let r = class extends k {
     `;
   }
 };
-r.styles = [m];
+r.styles = [y];
 t([
   i({ type: String })
 ], r.prototype, "href", 2);
@@ -240,4 +240,4 @@ r = t([
 export {
   r as H
 };
-//# sourceMappingURL=hx-link-BESrWK8M.js.map
+//# sourceMappingURL=hx-link-Bem4Gn68.js.map

package/dist/shared/hx-link-Bem4Gn68.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-link-Bem4Gn68.js","sources":["../../src/components/hx-link/hx-link.styles.ts","../../src/components/hx-link/hx-link.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixLinkStyles = css`\n :host {\n display: inline;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n /* --- Base Link --- */\n\n .link {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n color: var(--hx-link-color, var(--hx-color-primary-500, #2563eb));\n font-family: var(--hx-link-font-family, var(--hx-font-family-sans, inherit));\n font-size: inherit;\n line-height: inherit;\n text-decoration: var(--hx-link-text-decoration, underline);\n text-underline-offset: var(--hx-link-underline-offset, 2px);\n cursor: pointer;\n outline: 0;\n transition:\n color var(--hx-transition-fast, 150ms ease),\n text-decoration-color var(--hx-transition-fast, 150ms ease);\n }\n\n .link:hover {\n color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));\n text-decoration: var(--hx-link-text-decoration-hover, underline);\n }\n\n .link:active {\n color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e3a8a));\n }\n\n .link:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-link-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n /* --- Variant: subtle --- */\n\n .link--subtle {\n color: var(--hx-link-color-subtle, var(--hx-color-text-secondary, #475569));\n text-decoration: none;\n }\n\n .link--subtle:hover {\n color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));\n text-decoration: underline;\n }\n\n /* --- Variant: danger --- */\n\n .link--danger {\n color: var(--hx-link-color-danger, var(--hx-color-error-text, #b91c1c));\n }\n\n .link--danger:hover {\n color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #991b1b));\n }\n\n /* --- Disabled --- */\n\n .link--disabled {\n color: var(--hx-link-color-disabled, var(--hx-color-text-disabled, #94a3b8));\n text-decoration: none;\n cursor: not-allowed;\n }\n\n /* --- External link icon --- */\n\n .link__external-icon {\n display: inline-flex;\n width: 0.75em;\n height: 0.75em;\n flex-shrink: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .link {\n transition: none;\n }\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .link {\n forced-color-adjust: none;\n color: LinkText;\n }\n\n .link:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .link--disabled {\n color: GrayText;\n }\n }\n\n /* --- Visually hidden (sr-only) --- */\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n }\n`;\n","import { html, nothing, svg } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixLinkStyles } from './hx-link.styles.js';\n\n/**\n * Variant options for the link component.\n */\nexport type LinkVariant = 'default' | 'subtle' | 'danger';\n\n/**\n * A semantic hyperlink component with accessibility-first design.\n * Renders a native `<a>` element for enabled state and a `<span>` for\n * disabled state with full keyboard and screen reader support.\n *\n * @summary Accessible hyperlink with external-link detection, disabled state,\n * and download support.\n *\n * @tag hx-link\n *\n * @slot - Default slot for link label text or content.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n * the link is clicked and is not disabled.\n *\n * @csspart link - The inner anchor or span element.\n * @csspart external-icon - The external link icon SVG (when target=\"_blank\").\n *\n * @cssprop [--hx-link-color=var(--hx-color-primary-500)] - Default link color.\n * @cssprop [--hx-link-color-hover=var(--hx-color-primary-700)] - Hover color.\n * @cssprop [--hx-link-color-active=var(--hx-color-primary-800)] - Active color.\n * @cssprop [--hx-link-color-disabled=var(--hx-color-neutral-400)] - Disabled color.\n * @cssprop [--hx-link-color-subtle=var(--hx-color-neutral-600)] - Subtle variant color.\n * @cssprop [--hx-link-color-danger=var(--hx-color-error-text)] - Danger variant color.\n * @cssprop [--hx-link-color-danger-hover=var(--hx-color-error-700)] - Danger variant hover color.\n * @cssprop [--hx-link-font-family=var(--hx-font-family-sans)] - Link font family.\n * @cssprop [--hx-link-text-decoration=underline] - Link text decoration.\n * @cssprop [--hx-link-text-decoration-hover=underline] - Hover text decoration.\n * @cssprop [--hx-link-underline-offset=2px] - Text underline offset.\n * @cssprop [--hx-link-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n *\n * @note The `:visited` pseudo-class does not work inside Shadow DOM due to\n * browser privacy restrictions. This is a known platform limitation.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-primary-700] - Color.\n * @cssprop [--hx-color-primary-800] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-color-error-700] - Color.\n * @cssprop [--hx-color-neutral-400] - Color.\n */\n@customElement('hx-link')\nexport class HelixLink extends HelixElement {\n static override styles = [helixLinkStyles];\n\n /**\n * The URL the link points to.\n * @attr href\n */\n @property({ type: String })\n href: string | undefined = undefined;\n\n /**\n * Where to display the linked URL (_self, _blank, etc.).\n * When set to \"_blank\", automatically adds rel=\"noopener noreferrer\"\n * and shows an external-link indicator.\n * @attr target\n */\n @property({ type: String })\n target: string | undefined = undefined;\n\n /**\n * Visual style variant of the link.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'default' | 'subtle' | 'danger' = 'default';\n\n /**\n * Whether the link is disabled. Renders a span instead of an anchor.\n * The disabled span is keyboard-focusable (tabindex=\"0\") and announces\n * as a disabled link to screen readers.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Prompts the user to download the linked URL. When set to a string,\n * the value is used as the suggested filename.\n * @attr download\n */\n @property({ type: String })\n download: string | undefined = undefined;\n\n /**\n * Relationship between the current document and the linked URL.\n * Automatically set to \"noopener noreferrer\" when target=\"_blank\".\n * @attr rel\n */\n @property({ type: String })\n rel: string | undefined = undefined;\n\n // --- Event Handling ---\n\n /** @internal Blocks Enter and Space activation on disabled span. */\n private _handleDisabledKeydown(e: KeyboardEvent): void {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n }\n }\n\n /** @internal */\n private _handleClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n this.dispatchEvent(\n new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n bubbles: true,\n composed: true,\n detail: { originalEvent: e },\n }),\n );\n }\n\n // --- Render Helpers ---\n\n /** @internal */\n private _computeRel(): string | undefined {\n if (this.rel) return this.rel;\n if (this.target === '_blank') return 'noopener noreferrer';\n return undefined;\n }\n\n /** @internal */\n private _renderExternalIcon() {\n if (this.target !== '_blank') return nothing;\n\n return html`\n <svg\n class=\"link__external-icon\"\n part=\"external-icon\"\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n ${svg`<path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" /><polyline points=\"15 3 21 3 21 9\" /><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />`}\n </svg>\n <span class=\"sr-only\">(opens in new tab)</span>\n `;\n }\n\n // --- Render ---\n\n override render() {\n const classes = {\n link: true,\n [`link--${this.variant}`]: this.variant !== 'default',\n 'link--disabled': this.disabled,\n };\n\n if (this.disabled) {\n return html`\n <span\n part=\"link\"\n class=${classMap(classes)}\n role=\"link\"\n aria-disabled=\"true\"\n tabindex=\"0\"\n @click=${this._handleClick}\n @keydown=${this._handleDisabledKeydown}\n >\n <slot></slot>\n </span>\n `;\n }\n\n return html`\n <a\n part=\"link\"\n class=${classMap(classes)}\n href=${ifDefined(this.href)}\n target=${ifDefined(this.target)}\n rel=${ifDefined(this._computeRel())}\n download=${ifDefined(this.download)}\n @click=${this._handleClick}\n >\n <slot></slot>\n ${this._renderExternalIcon()}\n </a>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-link': HelixLink;\n }\n}\n"],"names":["helixLinkStyles","css","HelixLink","HelixElement","nothing","html","svg","classes","classMap","ifDefined","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/hx-list-_9qVv02L.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-list-_9qVv02L.js","sources":["../../src/components/hx-list/hx-list.styles.ts","../../src/components/hx-list/hx-list-item.styles.ts","../../src/components/hx-list/hx-list-item.ts","../../src/components/hx-list/hx-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixListStyles = css`\n :host {\n display: block;\n }\n\n .list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--hx-list-gap, 0);\n }\n\n /* ─── Variant: bulleted ─── /\n\n .list--bulleted {\n padding-inline-start: var(--hx-space-6, 1.5rem);\n list-style: disc;\n }\n\n / ─── Variant: numbered ─── /\n\n .list--numbered {\n padding-inline-start: var(--hx-space-6, 1.5rem);\n list-style: decimal;\n }\n\n / ─── Variant: interactive ─── /\n\n .list--interactive {\n list-style: none;\n padding: 0;\n }\n\n / ─── Variant: description ─── /\n\n .list--description {\n padding: 0;\n list-style: none;\n }\n\n / ─── Dividers ─── /\n\n :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n }\n\n / ─── High Contrast Mode (forced-colors) ─── /\n\n @media (forced-colors: active) {\n / Divider borders are already using a border property, which forced-colors respects.\n Ensure the system color is used for divider borders. /\n :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n border-bottom-color: CanvasText;\n }\n }\n`;\n","import { css } from 'lit';\n\nexport const helixListItemStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n / ─── Base list item ─── /\n\n .list-item {\n display: flex;\n align-items: center;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-list-item-padding, var(--hx-space-3, 0.75rem));\n color: var(--hx-list-item-color, var(--hx-color-neutral-900, #0f172a));\n font-family: var(--hx-list-item-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n cursor: default;\n box-sizing: border-box;\n width: 100%;\n }\n\n / ─── Interactive items — use :host([interactive]) instead of deprecated :host-context() ─── /\n\n :host([interactive]) .list-item {\n cursor: pointer;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n background-color: var(--hx-list-item-bg-hover, var(--hx-color-neutral-50, #f8fafc));\n }\n\n :host([interactive]):focus-visible .list-item {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-600, #1d4ed8));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n / ─── Selected state ─── /\n\n .list-item--selected {\n background-color: var(--hx-list-item-bg-selected, var(--hx-color-primary-50, #eff6ff));\n color: var(--hx-list-item-color-selected, var(--hx-color-primary-700, #1e40af));\n }\n\n / ─── Disabled state ─── /\n\n .list-item--disabled {\n cursor: not-allowed;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n / ─── Link mode ─── /\n\n .list-item__link {\n display: flex;\n align-items: center;\n gap: var(--hx-space-3, 0.75rem);\n width: 100%;\n text-decoration: none;\n color: inherit;\n }\n\n .list-item__link:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-600, #1d4ed8));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n / ─── Slots ─── /\n\n .list-item__prefix,\n .list-item__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .list-item__body {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .list-item__label {\n display: block;\n }\n\n .list-item__description {\n display: block;\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-list-item-description-color, var(--hx-color-neutral-500, #64748b));\n margin-top: var(--hx-space-1, 0.25rem);\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host([interactive]) .list-item {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast / forced-colors mode) ─── /\n\n @media (forced-colors: active) {\n / Selected state: replace background-color with a visible border using system Highlight color /\n :host([interactive]) .list-item--selected {\n background-color: transparent;\n border: 2px solid Highlight;\n color: HighlightText;\n forced-color-adjust: none;\n }\n\n / Hover state: use an outline instead of background-color /\n :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n background-color: transparent;\n outline: 1px solid Highlight;\n outline-offset: -1px;\n }\n\n / Disabled state: use system GrayText color /\n :host([interactive][disabled]) .list-item,\n :host([interactive]) .list-item--disabled {\n color: GrayText;\n }\n\n / Focus ring: ensure visibility in forced-colors mode /\n :host([interactive]):focus-visible .list-item {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n forced-color-adjust: none;\n }\n }\n`;\n","import { html, nothing, 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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixListItemStyles } from './hx-list-item.styles.js';\n\n/\n A rich list item for use inside `hx-list`.\n \n @summary Individual list item with optional prefix, suffix, description, link, and disabled/selected states.\n \n @tag hx-list-item\n \n @slot - Default slot for the item label text.\n * @slot prefix - Icon, avatar, or content rendered before the label.\n * @slot suffix - Icon, badge, or text rendered after the label.\n * @slot description - Secondary descriptive text rendered below the label.\n \n @fires {CustomEvent<{item: HelixListItem, value: string \| undefined}>} hx-list-item-click -\n * Dispatched when the item is clicked and not disabled.\n \n @csspart base - The root item element (li, dt, dd, or wrapper).\n * @csspart prefix - The prefix slot container.\n * @csspart label - The label slot container.\n * @csspart description - The description slot container.\n * @csspart suffix - The suffix slot container.\n \n @cssprop [--hx-list-item-padding=var(--hx-space-3)] - Item padding.\n * @cssprop [--hx-list-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-list-item-bg-hover=var(--hx-color-neutral-50)] - Item hover background.\n * @cssprop [--hx-list-item-bg-selected=var(--hx-color-primary-50)] - Selected item background.\n * @cssprop [--hx-list-item-color-selected=var(--hx-color-primary-700)] - Selected item text color.\n * @cssprop [--hx-list-item-description-color=var(--hx-color-neutral-500)] - Description text color.\n /\n@customElement('hx-list-item')\nexport class HelixListItem extends HelixElement {\n static override styles = [helixListItemStyles];\n\n /\n Whether the item is disabled. Prevents interaction.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Whether the item is selected (used in interactive mode).\n * @attr selected\n /\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /\n When set, renders the item as a link (only in non-interactive variants).\n * @attr href\n /\n @property({ type: String })\n href: string \| undefined = undefined;\n\n /\n The value associated with this item (used with hx-select).\n * @attr value\n /\n @property({ type: String })\n value: string \| undefined = undefined;\n\n /\n Set by the parent hx-list to indicate this item is part of an interactive listbox.\n * Controls CSS styling and ARIA role via host attributes.\n * @attr interactive\n /\n @property({ type: Boolean, reflect: true })\n interactive = false;\n\n /\n Item type for description list variant. Use 'term' for <dt> and 'definition' for <dd>.\n * @attr type\n /\n @property({ type: String, reflect: true })\n type: 'default' \| 'term' \| 'definition' = 'default';\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (\n changedProps.has('interactive') \|\|\n changedProps.has('selected') \|\|\n changedProps.has('disabled')\n ) {\n this._syncHostAria();\n }\n }\n\n /\n Syncs ARIA attributes to the host element when in interactive (listbox option) mode.\n * This ensures correct ARIA ownership: ul[role=listbox] > hx-list-item[role=option].\n /\n /* @internal /\n private _syncHostAria(): void {\n if (this.interactive) {\n this.setAttribute('role', 'option');\n this.setAttribute('aria-selected', String(this.selected));\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n if (!this.disabled) {\n this.setAttribute('tabindex', '0');\n } else {\n this.removeAttribute('tabindex');\n }\n } else {\n this.removeAttribute('role');\n this.removeAttribute('aria-selected');\n this.removeAttribute('aria-disabled');\n this.removeAttribute('tabindex');\n }\n }\n\n /* @internal /\n private _dispatchListItemClick(): void {\n this.dispatchEvent(\n new CustomEvent<{ item: HelixListItem; value: string \| undefined }>('hx-list-item-click', {\n bubbles: true,\n composed: true,\n detail: { item: this, value: this.value },\n }),\n );\n }\n\n /* @internal /\n private _handleClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n this._dispatchListItemClick();\n }\n\n /* @internal /\n private _renderContent() {\n return html`\n <span part=\"prefix\" class=\"list-item__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span class=\"list-item__body\">\n <span part=\"label\" class=\"list-item__label\">\n <slot></slot>\n </span>\n <span part=\"description\" class=\"list-item__description\">\n <slot name=\"description\"></slot>\n </span>\n </span>\n <span part=\"suffix\" class=\"list-item__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n `;\n }\n\n override render() {\n // Description list: render as <dt> (term) or <dd> (definition)\n if (this.type === 'term') {\n return html`\n <dt\n part=\"base\"\n class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n ${this._renderContent()}\n </dt>\n `;\n }\n\n if (this.type === 'definition') {\n return html`\n <dd\n part=\"base\"\n class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n ${this._renderContent()}\n </dd>\n `;\n }\n\n // Interactive mode: role is on the host element (ARIA ownership across shadow DOM).\n // Internal <li> uses role=\"presentation\" so AT sees: listbox > option (host).\n if (this.interactive) {\n // In interactive mode, links are not rendered as <a> to avoid\n // invalid ARIA: focusable content inside role=\"option\" is prohibited.\n return html`\n <li\n part=\"base\"\n role=\"presentation\"\n class=${classMap({\n 'list-item': true,\n 'list-item--selected': this.selected,\n 'list-item--disabled': this.disabled,\n })}\n @click=${this._handleClick}\n @keydown=${this._handleKeydown}\n >\n ${this._renderContent()}\n </li>\n `;\n }\n\n // Non-interactive with href: render as link\n if (this.href !== undefined && !this.disabled) {\n return html`\n <li\n part=\"base\"\n class=\"list-item\"\n role=\"listitem\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n <a class=\"list-item__link\" href=${ifDefined(this.href)} @click=${this._handleClick}>\n ${this._renderContent()}\n </a>\n </li>\n `;\n }\n\n // Default non-interactive\n return html`\n <li\n part=\"base\"\n class=${classMap({\n 'list-item': true,\n 'list-item--selected': this.selected,\n 'list-item--disabled': this.disabled,\n })}\n role=\"listitem\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n @click=${this._handleClick}\n @keydown=${this._handleKeydown}\n >\n ${this._renderContent()}\n </li>\n `;\n }\n\n /* @internal /\n private _handleKeydown(e: KeyboardEvent): void {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n if (!this.disabled) {\n this._dispatchListItemClick();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-list-item': HelixListItem;\n }\n}\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixListStyles } from './hx-list.styles.js';\nimport { HelixListItem } from './hx-list-item.js'; // real import for instanceof check and property access\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/\n A styled list container supporting plain, bulleted, numbered, description, and interactive variants.\n \n @summary Container for list items with optional dividers and interactive selection.\n \n @tag hx-list\n \n @slot - Default slot for `hx-list-item` elements.\n \n @fires {CustomEvent<{item: HelixListItem, value: string \| undefined}>} hx-select - Dispatched\n * when an item is clicked in interactive mode.\n \n @csspart base - The root list element.\n \n @cssprop [--hx-list-gap=0] - Gap between list items.\n * @cssprop [--hx-list-divider-color=var(--hx-color-neutral-200)] - Divider line color.\n /\n@customElement('hx-list')\nexport class HelixList extends HelixElement {\n static override styles = [helixListStyles];\n\n /\n Visual variant of the list.\n * @attr variant\n /\n @property({ type: String, reflect: true })\n variant: 'plain' \| 'bulleted' \| 'numbered' \| 'description' \| 'interactive' = 'plain';\n\n /\n Whether to show dividers between list items.\n * @attr divided\n /\n @property({ type: Boolean, reflect: true })\n divided = false;\n\n /\n Accessible label for the list. Required when variant is \"interactive\" (listbox role).\n * @attr label\n /\n @property({ type: String })\n label: string \| undefined = undefined;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (changedProps.has('variant')) {\n this._updateItemStates();\n }\n if (this.variant === 'interactive' && !this.label) {\n devWarn(\n 'hx-list',\n 'The \"label\" attribute is required when variant is \"interactive\". ' +\n 'Add a label to provide an accessible name for the listbox (WCAG 2.1 SC 4.1.2).',\n );\n }\n }\n\n /\n Sets the `interactive` property on all child hx-list-item elements\n * so they can style and behave correctly without `:host-context()`.\n /\n /* @internal /\n private _updateItemStates(): void {\n const isInteractive = this.variant === 'interactive';\n const items = this.querySelectorAll('hx-list-item');\n for (const item of items) {\n (item as HelixListItem).interactive = isInteractive;\n }\n }\n\n /* @internal /\n private _handleSlotChange(): void {\n this._updateItemStates();\n }\n\n /* @internal /\n private readonly _handleKeydown = (e: KeyboardEvent): void => {\n if (this.variant !== 'interactive') return;\n\n const items = Array.from(this.querySelectorAll<HelixListItem>('hx-list-item:not([disabled])'));\n if (items.length === 0) return;\n\n const focused = this.querySelector<HelixListItem>('hx-list-item:focus');\n const currentIndex = focused ? items.indexOf(focused) : -1;\n\n let nextIndex = currentIndex;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'ArrowUp':\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n break;\n case 'Home':\n e.preventDefault();\n nextIndex = 0;\n break;\n case 'End':\n e.preventDefault();\n nextIndex = items.length - 1;\n break;\n default:\n return;\n }\n\n items[nextIndex]?.focus();\n };\n\n /* @internal */\n private _handleItemClick(e: Event): void {\n if (this.variant !== 'interactive') return;\n\n if (!(e.target instanceof HelixListItem)) return;\n const item = e.target;\n if (item.disabled) return;\n\n this.dispatchEvent(\n new CustomEvent<{ item: HelixListItem; value: string \| undefined }>('hx-select', {\n bubbles: true,\n composed: true,\n detail: { item, value: item.value },\n }),\n );\n }\n\n override render() {\n const isInteractive = this.variant === 'interactive';\n const isNumbered = this.variant === 'numbered';\n const isDescription = this.variant === 'description';\n\n const slot = html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n\n if (isDescription) {\n return html`\n <dl\n part=\"base\"\n class=\"list list--${this.variant}\"\n aria-label=${ifDefined(this.label)}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </dl>\n `;\n }\n\n if (isNumbered) {\n return html`\n <div\n part=\"base\"\n role=\"list\"\n class=\"list list--${this.variant}\"\n aria-label=${ifDefined(this.label)}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </div>\n `;\n }\n\n return html`\n <div\n part=\"base\"\n class=\"list list--${this.variant}\"\n role=${isInteractive ? 'listbox' : 'list'}\n aria-label=${isInteractive ? this.label \|\| nothing : ifDefined(this.label)}\n aria-multiselectable=${isInteractive ? 'false' : nothing}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-list': HelixList;\n }\n}\n"],"names":["helixListStyles","css","helixListItemStyles","HelixListItem","HelixElement","changedProps","e","html","classMap","nothing","ifDefined","__decorateClass","property","customElement","HelixList","items","focused","currentIndex","nextIndex","_a","isInteractive","item","isNumbered","isDescription","slot"],"mappings":"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"}
1	+ {"version":3,"file":"hx-list-_9qVv02L.js","sources":["../../src/components/hx-list/hx-list.styles.ts","../../src/components/hx-list/hx-list-item.styles.ts","../../src/components/hx-list/hx-list-item.ts","../../src/components/hx-list/hx-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixListStyles = css`\n :host {\n display: block;\n }\n\n .list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--hx-list-gap, 0);\n }\n\n /* ─── Variant: bulleted ─── /\n\n .list--bulleted {\n padding-inline-start: var(--hx-space-6, 1.5rem);\n list-style: disc;\n }\n\n / ─── Variant: numbered ─── /\n\n .list--numbered {\n padding-inline-start: var(--hx-space-6, 1.5rem);\n list-style: decimal;\n }\n\n / ─── Variant: interactive ─── /\n\n .list--interactive {\n list-style: none;\n padding: 0;\n }\n\n / ─── Variant: description ─── /\n\n .list--description {\n padding: 0;\n list-style: none;\n }\n\n / ─── Dividers ─── /\n\n :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n border-bottom: var(--hx-border-width-thin, 1px) solid\n var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n }\n\n / ─── High Contrast Mode (forced-colors) ─── /\n\n @media (forced-colors: active) {\n / Divider borders are already using a border property, which forced-colors respects.\n Ensure the system color is used for divider borders. /\n :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {\n border-bottom-color: CanvasText;\n }\n }\n`;\n","import { css } from 'lit';\n\nexport const helixListItemStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n / ─── Base list item ─── /\n\n .list-item {\n display: flex;\n align-items: center;\n gap: var(--hx-space-3, 0.75rem);\n padding: var(--hx-list-item-padding, var(--hx-space-3, 0.75rem));\n color: var(--hx-list-item-color, var(--hx-color-neutral-900, #0f172a));\n font-family: var(--hx-list-item-font-family, var(--hx-font-family-sans, sans-serif));\n font-size: var(--hx-font-size-md, 1rem);\n line-height: var(--hx-line-height-normal, 1.5);\n cursor: default;\n box-sizing: border-box;\n width: 100%;\n }\n\n / ─── Interactive items — use :host([interactive]) instead of deprecated :host-context() ─── /\n\n :host([interactive]) .list-item {\n cursor: pointer;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n transition: background-color var(--hx-transition-fast, 150ms ease);\n }\n\n :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n background-color: var(--hx-list-item-bg-hover, var(--hx-color-neutral-50, #f8fafc));\n }\n\n :host([interactive]):focus-visible .list-item {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-600, #1d4ed8));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n / ─── Selected state ─── /\n\n .list-item--selected {\n background-color: var(--hx-list-item-bg-selected, var(--hx-color-primary-50, #eff6ff));\n color: var(--hx-list-item-color-selected, var(--hx-color-primary-700, #1e40af));\n }\n\n / ─── Disabled state ─── /\n\n .list-item--disabled {\n cursor: not-allowed;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n\n / ─── Link mode ─── /\n\n .list-item__link {\n display: flex;\n align-items: center;\n gap: var(--hx-space-3, 0.75rem);\n width: 100%;\n text-decoration: none;\n color: inherit;\n }\n\n .list-item__link:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-600, #1d4ed8));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n }\n\n / ─── Slots ─── /\n\n .list-item__prefix,\n .list-item__suffix {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .list-item__body {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .list-item__label {\n display: block;\n }\n\n .list-item__description {\n display: block;\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-list-item-description-color, var(--hx-color-neutral-500, #64748b));\n margin-top: var(--hx-space-1, 0.25rem);\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host([interactive]) .list-item {\n transition: none;\n }\n }\n\n / ─── Forced colors (Windows High Contrast / forced-colors mode) ─── /\n\n @media (forced-colors: active) {\n / Selected state: replace background-color with a visible border using system Highlight color /\n :host([interactive]) .list-item--selected {\n background-color: transparent;\n border: 2px solid Highlight;\n color: HighlightText;\n forced-color-adjust: none;\n }\n\n / Hover state: use an outline instead of background-color /\n :host([interactive]) .list-item:hover:not(.list-item--disabled) {\n background-color: transparent;\n outline: 1px solid Highlight;\n outline-offset: -1px;\n }\n\n / Disabled state: use system GrayText color /\n :host([interactive][disabled]) .list-item,\n :host([interactive]) .list-item--disabled {\n color: GrayText;\n }\n\n / Focus ring: ensure visibility in forced-colors mode /\n :host([interactive]):focus-visible .list-item {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n forced-color-adjust: none;\n }\n }\n`;\n","import { html, nothing, 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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixListItemStyles } from './hx-list-item.styles.js';\n\n/\n A rich list item for use inside `hx-list`.\n \n @summary Individual list item with optional prefix, suffix, description, link, and disabled/selected states.\n \n @tag hx-list-item\n \n @slot - Default slot for the item label text.\n * @slot prefix - Icon, avatar, or content rendered before the label.\n * @slot suffix - Icon, badge, or text rendered after the label.\n * @slot description - Secondary descriptive text rendered below the label.\n \n @fires {CustomEvent<{item: HelixListItem, value: string \| undefined}>} hx-list-item-click -\n * Dispatched when the item is clicked and not disabled.\n \n @csspart base - The root item element (li, dt, dd, or wrapper).\n * @csspart prefix - The prefix slot container.\n * @csspart label - The label slot container.\n * @csspart description - The description slot container.\n * @csspart suffix - The suffix slot container.\n \n @cssprop [--hx-list-item-padding=var(--hx-space-3)] - Item padding.\n * @cssprop [--hx-list-item-color=var(--hx-color-neutral-900)] - Item text color.\n * @cssprop [--hx-list-item-bg-hover=var(--hx-color-neutral-50)] - Item hover background.\n * @cssprop [--hx-list-item-bg-selected=var(--hx-color-primary-50)] - Selected item background.\n * @cssprop [--hx-list-item-color-selected=var(--hx-color-primary-700)] - Selected item text color.\n * @cssprop [--hx-list-item-description-color=var(--hx-color-neutral-500)] - Description text color.\n /\n@customElement('hx-list-item')\nexport class HelixListItem extends HelixElement {\n static override styles = [helixListItemStyles];\n\n /\n Whether the item is disabled. Prevents interaction.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Whether the item is selected (used in interactive mode).\n * @attr selected\n /\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /\n When set, renders the item as a link (only in non-interactive variants).\n * @attr href\n /\n @property({ type: String })\n href: string \| undefined = undefined;\n\n /\n The value associated with this item (used with hx-select).\n * @attr value\n /\n @property({ type: String })\n value: string \| undefined = undefined;\n\n /\n Set by the parent hx-list to indicate this item is part of an interactive listbox.\n * Controls CSS styling and ARIA role via host attributes.\n * @attr interactive\n /\n @property({ type: Boolean, reflect: true })\n interactive = false;\n\n /\n Item type for description list variant. Use 'term' for <dt> and 'definition' for <dd>.\n * @attr type\n /\n @property({ type: String, reflect: true })\n type: 'default' \| 'term' \| 'definition' = 'default';\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (\n changedProps.has('interactive') \|\|\n changedProps.has('selected') \|\|\n changedProps.has('disabled')\n ) {\n this._syncHostAria();\n }\n }\n\n /\n Syncs ARIA attributes to the host element when in interactive (listbox option) mode.\n * This ensures correct ARIA ownership: ul[role=listbox] > hx-list-item[role=option].\n /\n /* @internal /\n private _syncHostAria(): void {\n if (this.interactive) {\n this.setAttribute('role', 'option');\n this.setAttribute('aria-selected', String(this.selected));\n if (this.disabled) {\n this.setAttribute('aria-disabled', 'true');\n } else {\n this.removeAttribute('aria-disabled');\n }\n if (!this.disabled) {\n this.setAttribute('tabindex', '0');\n } else {\n this.removeAttribute('tabindex');\n }\n } else {\n this.removeAttribute('role');\n this.removeAttribute('aria-selected');\n this.removeAttribute('aria-disabled');\n this.removeAttribute('tabindex');\n }\n }\n\n /* @internal /\n private _dispatchListItemClick(): void {\n this.dispatchEvent(\n new CustomEvent<{ item: HelixListItem; value: string \| undefined }>('hx-list-item-click', {\n bubbles: true,\n composed: true,\n detail: { item: this, value: this.value },\n }),\n );\n }\n\n /* @internal /\n private _handleClick(e: MouseEvent): void {\n if (this.disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n\n this._dispatchListItemClick();\n }\n\n /* @internal /\n private _renderContent() {\n return html`\n <span part=\"prefix\" class=\"list-item__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n <span class=\"list-item__body\">\n <span part=\"label\" class=\"list-item__label\">\n <slot></slot>\n </span>\n <span part=\"description\" class=\"list-item__description\">\n <slot name=\"description\"></slot>\n </span>\n </span>\n <span part=\"suffix\" class=\"list-item__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n `;\n }\n\n override render() {\n // Description list: render as <dt> (term) or <dd> (definition)\n if (this.type === 'term') {\n return html`\n <dt\n part=\"base\"\n class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n ${this._renderContent()}\n </dt>\n `;\n }\n\n if (this.type === 'definition') {\n return html`\n <dd\n part=\"base\"\n class=${classMap({ 'list-item': true, 'list-item--disabled': this.disabled })}\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n ${this._renderContent()}\n </dd>\n `;\n }\n\n // Interactive mode: role is on the host element (ARIA ownership across shadow DOM).\n // Internal <li> uses role=\"presentation\" so AT sees: listbox > option (host).\n if (this.interactive) {\n // In interactive mode, links are not rendered as <a> to avoid\n // invalid ARIA: focusable content inside role=\"option\" is prohibited.\n return html`\n <li\n part=\"base\"\n role=\"presentation\"\n class=${classMap({\n 'list-item': true,\n 'list-item--selected': this.selected,\n 'list-item--disabled': this.disabled,\n })}\n @click=${this._handleClick}\n @keydown=${this._handleKeydown}\n >\n ${this._renderContent()}\n </li>\n `;\n }\n\n // Non-interactive with href: render as link\n if (this.href !== undefined && !this.disabled) {\n return html`\n <li\n part=\"base\"\n class=\"list-item\"\n role=\"listitem\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n >\n <a class=\"list-item__link\" href=${ifDefined(this.href)} @click=${this._handleClick}>\n ${this._renderContent()}\n </a>\n </li>\n `;\n }\n\n // Default non-interactive\n return html`\n <li\n part=\"base\"\n class=${classMap({\n 'list-item': true,\n 'list-item--selected': this.selected,\n 'list-item--disabled': this.disabled,\n })}\n role=\"listitem\"\n aria-disabled=${this.disabled ? 'true' : nothing}\n @click=${this._handleClick}\n @keydown=${this._handleKeydown}\n >\n ${this._renderContent()}\n </li>\n `;\n }\n\n /* @internal /\n private _handleKeydown(e: KeyboardEvent): void {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n if (!this.disabled) {\n this._dispatchListItemClick();\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-list-item': HelixListItem;\n }\n}\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixListStyles } from './hx-list.styles.js';\nimport { HelixListItem } from './hx-list-item.js'; // real import for instanceof check and property access\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/\n A styled list container supporting plain, bulleted, numbered, description, and interactive variants.\n \n @summary Container for list items with optional dividers and interactive selection.\n \n @tag hx-list\n \n @slot - Default slot for `hx-list-item` elements.\n \n @fires {CustomEvent<{item: HelixListItem, value: string \| undefined}>} hx-select - Dispatched\n * when an item is clicked in interactive mode.\n \n @csspart base - The root list element.\n \n @cssprop [--hx-list-gap=0] - Gap between list items.\n * @cssprop [--hx-list-divider-color=var(--hx-color-neutral-200)] - Divider line color.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-200] - Color.\n /\n@customElement('hx-list')\nexport class HelixList extends HelixElement {\n static override styles = [helixListStyles];\n\n /\n Visual variant of the list.\n * @attr variant\n /\n @property({ type: String, reflect: true })\n variant: 'plain' \| 'bulleted' \| 'numbered' \| 'description' \| 'interactive' = 'plain';\n\n /\n Whether to show dividers between list items.\n * @attr divided\n /\n @property({ type: Boolean, reflect: true })\n divided = false;\n\n /\n Accessible label for the list. Required when variant is \"interactive\" (listbox role).\n * @attr label\n /\n @property({ type: String })\n label: string \| undefined = undefined;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n override updated(changedProps: PropertyValues<this>): void {\n super.updated(changedProps);\n if (changedProps.has('variant')) {\n this._updateItemStates();\n }\n if (this.variant === 'interactive' && !this.label) {\n devWarn(\n 'hx-list',\n 'The \"label\" attribute is required when variant is \"interactive\". ' +\n 'Add a label to provide an accessible name for the listbox (WCAG 2.1 SC 4.1.2).',\n );\n }\n }\n\n /\n Sets the `interactive` property on all child hx-list-item elements\n * so they can style and behave correctly without `:host-context()`.\n /\n /* @internal /\n private _updateItemStates(): void {\n const isInteractive = this.variant === 'interactive';\n const items = this.querySelectorAll('hx-list-item');\n for (const item of items) {\n (item as HelixListItem).interactive = isInteractive;\n }\n }\n\n /* @internal /\n private _handleSlotChange(): void {\n this._updateItemStates();\n }\n\n /* @internal /\n private readonly _handleKeydown = (e: KeyboardEvent): void => {\n if (this.variant !== 'interactive') return;\n\n const items = Array.from(this.querySelectorAll<HelixListItem>('hx-list-item:not([disabled])'));\n if (items.length === 0) return;\n\n const focused = this.querySelector<HelixListItem>('hx-list-item:focus');\n const currentIndex = focused ? items.indexOf(focused) : -1;\n\n let nextIndex = currentIndex;\n\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'ArrowUp':\n e.preventDefault();\n nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n break;\n case 'Home':\n e.preventDefault();\n nextIndex = 0;\n break;\n case 'End':\n e.preventDefault();\n nextIndex = items.length - 1;\n break;\n default:\n return;\n }\n\n items[nextIndex]?.focus();\n };\n\n /* @internal */\n private _handleItemClick(e: Event): void {\n if (this.variant !== 'interactive') return;\n\n if (!(e.target instanceof HelixListItem)) return;\n const item = e.target;\n if (item.disabled) return;\n\n this.dispatchEvent(\n new CustomEvent<{ item: HelixListItem; value: string \| undefined }>('hx-select', {\n bubbles: true,\n composed: true,\n detail: { item, value: item.value },\n }),\n );\n }\n\n override render() {\n const isInteractive = this.variant === 'interactive';\n const isNumbered = this.variant === 'numbered';\n const isDescription = this.variant === 'description';\n\n const slot = html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n\n if (isDescription) {\n return html`\n <dl\n part=\"base\"\n class=\"list list--${this.variant}\"\n aria-label=${ifDefined(this.label)}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </dl>\n `;\n }\n\n if (isNumbered) {\n return html`\n <div\n part=\"base\"\n role=\"list\"\n class=\"list list--${this.variant}\"\n aria-label=${ifDefined(this.label)}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </div>\n `;\n }\n\n return html`\n <div\n part=\"base\"\n class=\"list list--${this.variant}\"\n role=${isInteractive ? 'listbox' : 'list'}\n aria-label=${isInteractive ? this.label \|\| nothing : ifDefined(this.label)}\n aria-multiselectable=${isInteractive ? 'false' : nothing}\n @hx-list-item-click=${this._handleItemClick}\n >\n ${slot}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-list': HelixList;\n }\n}\n"],"names":["helixListStyles","css","helixListItemStyles","HelixListItem","HelixElement","changedProps","e","html","classMap","nothing","ifDefined","__decorateClass","property","customElement","HelixList","items","focused","currentIndex","nextIndex","_a","isInteractive","item","isNumbered","isDescription","slot"],"mappings":"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"}

package/dist/shared/{hx-menu-divider-Ck-9Os1t.js → hx-menu-divider-DsHWyPHy.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { css as p, html as u, nothing as h } from "lit";
-import { property as c, customElement as f, state as x, query as b } from "lit/decorators.js";
+import { property as c, customElement as f, state as x, query as _ } from "lit/decorators.js";
 import { d as g } from "./dev-warn-YlwPHjtX.js";
 import { H as v } from "./helix-element-BNEYeiys.js";
 import { classMap as y } from "lit/directives/class-map.js";
@@ -12,9 +12,9 @@ const k = p`
     display: flex;
     flex-direction: column;
     padding: var(--hx-space-1, 0.25rem);
-    background: var(--hx-menu-bg, var(--hx-color-neutral-0, #ffffff));
+    background: var(--hx-menu-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-menu-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-menu-border-color, var(--hx-color-border-default, #e2e8f0));
     border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-menu-shadow,
@@ -35,10 +35,10 @@ const k = p`
     }
   }
 `;
-var w = Object.defineProperty, I = Object.getOwnPropertyDescriptor, _ = (e, t, n, s) => {
-  for (var i = s > 1 ? void 0 : s ? I(t, n) : t, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (i = (s ? a(t, n, i) : a(i)) || i);
-  return s && i && w(t, n, i), i;
+var w = Object.defineProperty, I = Object.getOwnPropertyDescriptor, b = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? I(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (i = (n ? a(t, s, i) : a(i)) || i);
+  return n && i && w(t, s, i), i;
 };
 let d = class extends v {
   constructor() {
@@ -57,8 +57,8 @@ let d = class extends v {
   /** @internal */
   _syncRovingTabIndex() {
     const e = this._getItems(), t = this._focusedIndex >= 0 ? this._focusedIndex : 0;
-    e.forEach((n, s) => {
-      n.setRovingTabIndex(s === t ? 0 : -1);
+    e.forEach((s, n) => {
+      s.setRovingTabIndex(n === t ? 0 : -1);
     });
   }
   /** Focus the first menu item. */
@@ -76,14 +76,14 @@ let d = class extends v {
     const t = this._getItems();
     if (t.length === 0) return;
     this._focusedIndex = Math.max(0, Math.min(e, t.length - 1)), this._syncRovingTabIndex();
-    const n = t[this._focusedIndex];
-    n !== void 0 && n.focus();
+    const s = t[this._focusedIndex];
+    s !== void 0 && s.focus();
   }
   /** @internal */
   _updateFocusedIndex() {
-    var s;
-    const e = this._getItems(), t = ((s = this.shadowRoot) == null ? void 0 : s.activeElement) ?? document.activeElement, n = e.findIndex((i) => i.matches(":focus-within") || i === t);
-    n !== -1 && (this._focusedIndex = n);
+    var n;
+    const e = this._getItems(), t = ((n = this.shadowRoot) == null ? void 0 : n.activeElement) ?? document.activeElement, s = e.findIndex((i) => i.matches(":focus-within") || i === t);
+    s !== -1 && (this._focusedIndex = s);
   }
   /** @internal */
   _handleKeyDown(e) {
@@ -116,27 +116,27 @@ let d = class extends v {
     this._typeaheadTimer !== null && clearTimeout(this._typeaheadTimer), this._typeaheadBuffer += e.toLowerCase(), this._typeaheadTimer = setTimeout(() => {
       this._typeaheadBuffer = "", this._typeaheadTimer = null;
     }, 500);
-    const n = t.findIndex((s) => {
+    const s = t.findIndex((n) => {
       var r;
-      return s.disabled || s.hasAttribute("disabled") ? !1 : (((r = s.textContent) == null ? void 0 : r.trim().toLowerCase()) ?? "").startsWith(this._typeaheadBuffer);
+      return n.disabled || n.hasAttribute("disabled") ? !1 : (((r = n.textContent) == null ? void 0 : r.trim().toLowerCase()) ?? "").startsWith(this._typeaheadBuffer);
     });
-    n !== -1 && this._focusItem(n);
+    s !== -1 && this._focusItem(s);
   }
   /** @internal */
   _handleSlotChange(e) {
     const t = e.target;
     if (!(t instanceof HTMLSlotElement)) return;
-    const n = /* @__PURE__ */ new Set(["hx-menu-item", "hx-menu-divider"]), s = t.assignedElements().filter((i) => !n.has(i.tagName.toLowerCase()));
-    s.length > 0 && g(
+    const s = /* @__PURE__ */ new Set(["hx-menu-item", "hx-menu-divider"]), n = t.assignedElements().filter((i) => !s.has(i.tagName.toLowerCase()));
+    n.length > 0 && g(
       "hx-menu",
-      `Default slot expects <hx-menu-item> or <hx-menu-divider> elements. Found unexpected: ${s.map((i) => `<${i.tagName.toLowerCase()}>`).join(", ")}`
+      `Default slot expects <hx-menu-item> or <hx-menu-divider> elements. Found unexpected: ${n.map((i) => `<${i.tagName.toLowerCase()}>`).join(", ")}`
     ), this._syncRovingTabIndex();
   }
   /** @internal */
   _handleItemSelect(e) {
     if (!(e instanceof CustomEvent)) return;
-    const t = e.detail, n = this._getItems();
-    this._focusedIndex = n.indexOf(t.item), this.dispatchEvent(
+    const t = e.detail, s = this._getItems();
+    this._focusedIndex = s.indexOf(t.item), this.dispatchEvent(
       new CustomEvent("hx-select", {
         bubbles: !0,
         composed: !0,
@@ -166,10 +166,10 @@ let d = class extends v {
   }
 };
 d.styles = [k];
-_([
+b([
   c({ type: String, reflect: !0 })
 ], d.prototype, "label", 2);
-d = _([
+d = b([
   f("hx-menu")
 ], d);
 const C = p`
@@ -190,7 +190,7 @@ const C = p`
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
-    color: var(--hx-menu-item-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-menu-item-color, var(--hx-color-text-primary, #0f172a));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: var(--hx-menu-item-font-family, var(--hx-font-family-sans, sans-serif));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -205,7 +205,7 @@ const C = p`
   .menu-item:hover,
   .menu-item:focus-visible {
-    background-color: var(--hx-menu-item-hover-bg, var(--hx-color-neutral-100, #f1f5f9));
+    background-color: var(--hx-menu-item-hover-bg, var(--hx-color-surface-sunken, #f1f5f9));
   }
   .menu-item:focus-visible {
@@ -299,10 +299,10 @@ const C = p`
     }
   }
 `;
-var S = Object.defineProperty, T = Object.getOwnPropertyDescriptor, l = (e, t, n, s) => {
-  for (var i = s > 1 ? void 0 : s ? T(t, n) : t, r = e.length - 1, a; r >= 0; r--)
-    (a = e[r]) && (i = (s ? a(t, n, i) : a(i)) || i);
-  return s && i && S(t, n, i), i;
+var S = Object.defineProperty, T = Object.getOwnPropertyDescriptor, l = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? T(t, s) : t, r = e.length - 1, a; r >= 0; r--)
+    (a = e[r]) && (i = (n ? a(t, s, i) : a(i)) || i);
+  return n && i && S(t, s, i), i;
 };
 let o = class extends v {
   constructor() {
@@ -445,14 +445,14 @@ let o = class extends v {
     }
   }
   render() {
-    const e = this._getRole(), t = this.type === "checkbox" || this.type === "radio", n = {
+    const e = this._getRole(), t = this.type === "checkbox" || this.type === "radio", s = {
       "menu-item": !0,
       "menu-item--checked": this.checked
     };
     return u`
       <div
         part="base"
-        class=${y(n)}
+        class=${y(s)}
         role=${e}
         tabindex=${this.disabled ? "-1" : String(this._rovingTabIndex)}
         aria-disabled=${this.disabled ? "true" : h}
@@ -506,7 +506,7 @@ l([
   x()
 ], o.prototype, "_submenuOpen", 2);
 l([
-  b(".menu-item")
+  _(".menu-item")
 ], o.prototype, "_menuItemEl", 2);
 o = l([
   f("hx-menu-item")
@@ -518,7 +518,7 @@ const E = p`
   .menu-divider {
     height: var(--hx-border-width-thin, 1px);
-    background-color: var(--hx-menu-divider-color, var(--hx-color-neutral-200, #e2e8f0));
+    background-color: var(--hx-menu-divider-color, var(--hx-color-border-default, #e2e8f0));
     margin: var(--hx-space-1, 0.25rem) calc(-1 * var(--hx-space-1, 0.25rem));
   }
@@ -530,8 +530,8 @@ const E = p`
     }
   }
 `;
-var $ = Object.getOwnPropertyDescriptor, D = (e, t, n, s) => {
-  for (var i = s > 1 ? void 0 : s ? $(t, n) : t, r = e.length - 1, a; r >= 0; r--)
+var $ = Object.getOwnPropertyDescriptor, D = (e, t, s, n) => {
+  for (var i = n > 1 ? void 0 : n ? $(t, s) : t, r = e.length - 1, a; r >= 0; r--)
     (a = e[r]) && (i = a(i) || i);
   return i;
 };
@@ -554,4 +554,4 @@ export {
   m as a,
   o as b
 };
-//# sourceMappingURL=hx-menu-divider-Ck-9Os1t.js.map
+//# sourceMappingURL=hx-menu-divider-DsHWyPHy.js.map