npm - @helixui/library - Versions diffs - 2.1.2-next.52 → 2.1.2-next.53 - Mend

@helixui/library 2.1.2-next.52 → 2.1.2-next.53

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

package/dist/shared/hx-overflow-menu-BDl6QfUD.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-overflow-menu-BDl6QfUD.js","sources":["../../src/components/hx-overflow-menu/hx-overflow-menu.styles.ts","../../src/components/hx-overflow-menu/hx-overflow-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixOverflowMenuStyles = css`\n :host {\n display: inline-block;\n position: relative;\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.4);\n }\n\n /* ─── Trigger Button ─── */\n\n .trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: var(--hx-border-width-thin, 1px) solid transparent;\n border-radius: var(--hx-border-radius-md, 0.375rem);\n background-color: transparent;\n color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #4b5563));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast, 0.15s ease),\n color var(--hx-transition-fast, 0.15s ease);\n flex-shrink: 0;\n padding: 0;\n line-height: 1;\n }\n\n .trigger:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-overflow-menu-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-500))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .trigger:hover:not([disabled]) {\n background-color: var(--hx-color-neutral-100, #f3f4f6);\n }\n\n .trigger--open {\n background-color: var(--hx-color-neutral-100, #f3f4f6);\n }\n\n /* ─── Size Variants ─── */\n\n .trigger--sm {\n width: var(--hx-size-8, 2rem);\n height: var(--hx-size-8, 2rem);\n min-width: var(--hx-size-touch-target, 2.75rem);\n min-height: var(--hx-size-touch-target, 2.75rem);\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n .trigger--md {\n width: var(--hx-size-10, 2.5rem);\n height: var(--hx-size-10, 2.5rem);\n min-width: var(--hx-size-touch-target, 2.75rem);\n min-height: var(--hx-size-touch-target, 2.75rem);\n font-size: var(--hx-font-size-md, 1rem);\n }\n\n .trigger--lg {\n width: var(--hx-size-12, 3rem);\n height: var(--hx-size-12, 3rem);\n font-size: var(--hx-font-size-lg, 1.125rem);\n }\n\n /* ─── Panel ─── */\n\n .panel {\n position: fixed;\n z-index: var(--hx-overflow-menu-panel-z-index, 1000);\n min-width: var(--hx-overflow-menu-panel-min-width, 160px);\n background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #fff));\n border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e5e7eb));\n border-radius: var(\n --hx-overflow-menu-panel-border-radius,\n var(--hx-border-radius-md, 0.375rem)\n );\n box-shadow: var(\n --hx-overflow-menu-panel-shadow,\n 0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12))\n );\n padding: var(--hx-space-1, 0.25rem) 0;\n outline: none;\n }\n\n /* ─── Slot: menu items ─── */\n\n ::slotted([role='menuitem']),\n ::slotted([role='menuitemcheckbox']),\n ::slotted([role='menuitemradio']) {\n display: block;\n width: 100%;\n padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n background: none;\n border: none;\n text-align: start;\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-color-neutral-900, #111827);\n cursor: pointer;\n white-space: nowrap;\n box-sizing: border-box;\n }\n\n ::slotted([role='menuitem']:hover),\n ::slotted([role='menuitemcheckbox']:hover),\n ::slotted([role='menuitemradio']:hover) {\n background-color: var(--hx-color-neutral-50, #f9fafb);\n }\n\n ::slotted([role='menuitem']:focus-visible),\n ::slotted([role='menuitemcheckbox']:focus-visible),\n ::slotted([role='menuitemradio']:focus-visible) {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-overflow-menu-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-500))\n );\n outline-offset: 0;\n }\n\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .trigger {\n transition: none;\n }\n }\n\n /* ─── High Contrast Mode (forced-colors) ─── */\n\n @media (forced-colors: active) {\n .trigger {\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border: 2px solid ButtonText;\n }\n\n .trigger:focus-visible {\n outline: 3px solid Highlight;\n outline-offset: 2px;\n }\n\n .trigger[disabled] {\n color: GrayText;\n border-color: GrayText;\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: 1;\n }\n\n .panel {\n background-color: Canvas;\n border: 2px solid CanvasText;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { computePosition, flip, shift, offset } from '@floating-ui/dom';\nimport { createIdCounter } from '../../base/index.js';\nimport { helixOverflowMenuStyles } from './hx-overflow-menu.styles.js';\n\nconst _nextOverflowMenuId = createIdCounter('hx-overflow-menu');\n\n/**\n * An overflow menu (kebab/meatball menu) that reveals hidden actions via a\n * floating panel. Composed from a trigger button and a slotted menu panel.\n *\n * @summary \"...\" or kebab icon button that reveals hidden actions.\n *\n * @tag hx-overflow-menu\n *\n * @slot - Menu items (e.g. `<button role=\"menuitem\">` or `<hx-menu-item>` elements).\n *\n * @fires {CustomEvent<{value: string}>} hx-select - Dispatched when a menu item is selected.\n * @fires {CustomEvent<void>} hx-show - Dispatched when the panel opens.\n * @fires {CustomEvent<void>} hx-hide - Dispatched when the panel closes.\n *\n * @csspart button - The trigger icon button element.\n * @csspart trigger - Alias for button — the trigger icon button element.\n * @csspart panel - The floating menu panel container.\n * @csspart menu - Alias for panel — the floating menu panel container.\n *\n * @cssprop [--hx-overflow-menu-panel-bg=var(--hx-color-neutral-0,#fff)] - Panel background color.\n * @cssprop [--hx-overflow-menu-panel-border=1px solid var(--hx-color-neutral-200,#e5e7eb)] - Panel border.\n * @cssprop [--hx-overflow-menu-panel-border-radius=var(--hx-border-radius-md)] - Panel border radius.\n * @cssprop [--hx-overflow-menu-panel-shadow=0 4px 16px rgba(0,0,0,0.12)] - Panel box shadow.\n * @cssprop [--hx-overflow-menu-panel-min-width=160px] - Minimum panel width.\n * @cssprop [--hx-overflow-menu-panel-z-index=1000] - Panel z-index.\n * @cssprop [--hx-overflow-menu-button-color=var(--hx-color-neutral-600)] - Trigger icon color.\n *\n * @example\n * ```html\n * <hx-overflow-menu>\n * <button role=\"menuitem\">Edit</button>\n * <button role=\"menuitem\">Delete</button>\n * </hx-overflow-menu>\n * ```\n */\n@customElement('hx-overflow-menu')\nexport class HelixOverflowMenu extends LitElement {\n static override styles = [helixOverflowMenuStyles];\n\n /**\n * Preferred placement of the floating panel relative to the trigger.\n * @attr placement\n */\n @property({ type: String, reflect: true })\n placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'\n | 'right'\n | 'right-start'\n | 'right-end' = 'bottom-end';\n\n /**\n * Size of the trigger button.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether the trigger button is disabled.\n * @attr disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Icon orientation: vertical (kebab ⋮) or horizontal (meatball ···).\n * @attr icon\n */\n @property({ type: String, reflect: true })\n icon: 'vertical' | 'horizontal' = 'vertical';\n\n /**\n * Accessible label for the trigger button.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = 'More actions';\n\n /**\n * Accessible label for the menu panel. Reflected as `label-menu`.\n * @attr label-menu\n */\n @property({ type: String, reflect: true, attribute: 'label-menu' })\n labelMenu = 'Actions';\n\n /**\n * Tracks whether the overflow menu panel is currently open and visible.\n * @internal\n */\n @state() private _open = false;\n\n /**\n * Unique ID for the floating panel element, used to wire aria-controls on the trigger button.\n * @internal\n */\n private readonly _panelId = `${_nextOverflowMenuId()}-panel`;\n\n /** @internal */\n @query('[part~=\"button\"]') private _buttonEl!: HTMLButtonElement | null;\n\n /** @internal */\n @query('[part~=\"panel\"]') private _panelEl!: HTMLElement | null;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this._handleDocumentClick, true);\n this.addEventListener('keydown', this._handleKeydown);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._handleDocumentClick, true);\n this.removeEventListener('keydown', this._handleKeydown);\n }\n\n // ─── Open / Close ───\n\n /** @internal */\n private async _show(): Promise<void> {\n if (this._open || this.disabled) return;\n this._open = true;\n await this.updateComplete;\n await this._updatePosition();\n this._focusFirstItem();\n this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _hide(): void {\n if (!this._open) return;\n this._open = false;\n this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _toggle(): void {\n if (this._open) {\n this._hide();\n } else {\n void this._show();\n }\n }\n\n // ─── Positioning (Floating UI) ───\n\n /** @internal */\n private async _updatePosition(): Promise<void> {\n const trigger = this._buttonEl as HTMLElement | null;\n const panel = this._panelEl;\n if (!trigger || !panel) return;\n\n const { x, y } = await computePosition(trigger, panel, {\n placement: this.placement,\n strategy: 'fixed',\n middleware: [offset(4), flip(), shift({ padding: 8 })],\n });\n\n Object.assign(panel.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n }\n\n // ─── Focus management ───\n\n /** @internal */\n private _focusFirstItem(): void {\n const items = this._getMenuItems();\n items[0]?.focus();\n }\n\n /** @internal */\n private _getMenuItems(): HTMLElement[] {\n const slot = this.shadowRoot?.querySelector('slot') as HTMLSlotElement | null;\n return (\n (slot\n ?.assignedElements({ flatten: true })\n .filter(\n (el) =>\n el instanceof HTMLElement &&\n !el.hasAttribute('disabled') &&\n !(el as HTMLButtonElement).disabled &&\n (el.getAttribute('role') === 'menuitem' ||\n el.getAttribute('role') === 'menuitemcheckbox' ||\n el.getAttribute('role') === 'menuitemradio' ||\n el.tagName.toLowerCase().startsWith('hx-')),\n ) as HTMLElement[]) ?? []\n );\n }\n\n // ─── Event Handlers (arrow function class fields — stable reference, no bind needed) ───\n\n /** @internal */\n private readonly _handleTriggerClick = (e: MouseEvent): void => {\n e.stopPropagation();\n this._toggle();\n };\n\n /** @internal */\n private readonly _handleDocumentClick = (e: MouseEvent): void => {\n if (!this._open) return;\n const path = e.composedPath();\n if (!path.includes(this)) {\n this._hide();\n }\n };\n\n /** @internal */\n private readonly _handleKeydown = (e: KeyboardEvent): void => {\n if (!this._open) return;\n if (e.key === 'Escape') {\n e.stopPropagation();\n this._hide();\n this._buttonEl?.focus();\n return;\n }\n if (e.key === 'Tab') {\n this._hide();\n return;\n }\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n e.preventDefault();\n e.stopPropagation();\n const items = this._getMenuItems();\n if (items.length === 0) return;\n const focused = items.indexOf(document.activeElement as HTMLElement);\n let next: number;\n if (e.key === 'ArrowDown') {\n next = focused < 0 || focused >= items.length - 1 ? 0 : focused + 1;\n } else if (e.key === 'ArrowUp') {\n next = focused <= 0 ? items.length - 1 : focused - 1;\n } else if (e.key === 'Home') {\n next = 0;\n } else {\n next = items.length - 1;\n }\n items[next]?.focus();\n }\n };\n\n /** @internal */\n private readonly _handleSlotClick = (e: Event): void => {\n const target = e.target as HTMLElement;\n const menuItem = target.closest(\n '[role=\"menuitem\"], [role=\"menuitemcheckbox\"], [role=\"menuitemradio\"]',\n ) as HTMLElement | null;\n if (!menuItem) return;\n if (menuItem.hasAttribute('disabled') || (menuItem as HTMLButtonElement).disabled) return;\n const value = menuItem.getAttribute('data-value') ?? menuItem.textContent?.trim() ?? '';\n this.dispatchEvent(\n new CustomEvent<{ value: string }>('hx-select', {\n bubbles: true,\n composed: true,\n detail: { value },\n }),\n );\n this._hide();\n };\n\n // ─── SVG Icons ───\n\n /** @internal */\n private _renderIcon() {\n if (this.icon === 'horizontal') {\n return html`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <circle cx=\"5\" cy=\"12\" r=\"2\" />\n <circle cx=\"12\" cy=\"12\" r=\"2\" />\n <circle cx=\"19\" cy=\"12\" r=\"2\" />\n </svg>\n `;\n }\n return html`\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"1em\"\n height=\"1em\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <circle cx=\"12\" cy=\"5\" r=\"2\" />\n <circle cx=\"12\" cy=\"12\" r=\"2\" />\n <circle cx=\"12\" cy=\"19\" r=\"2\" />\n </svg>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const btnClasses = {\n trigger: true,\n [`trigger--${this.size}`]: true,\n 'trigger--open': this._open,\n };\n\n return html`\n <button\n part=\"button trigger\"\n class=${classMap(btnClasses)}\n type=\"button\"\n aria-label=${this.label}\n aria-haspopup=\"menu\"\n aria-expanded=${String(this._open)}\n aria-controls=${this._open ? this._panelId : nothing}\n ?disabled=${this.disabled}\n @click=${this._handleTriggerClick}\n >\n ${this._renderIcon()}\n </button>\n ${this._open\n ? html`\n <div\n id=${this._panelId}\n part=\"panel menu\"\n role=\"menu\"\n aria-label=${this.labelMenu}\n class=\"panel\"\n @click=${this._handleSlotClick}\n >\n <slot></slot>\n </div>\n `\n : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-overflow-menu': HelixOverflowMenu;\n }\n}\n"],"names":["helixOverflowMenuStyles","css","_nextOverflowMenuId","createIdCounter","HelixOverflowMenu","LitElement","_a","items","focused","next","_b","menuItem","value","trigger","panel","x","y","computePosition","offset","flip","shift","slot","el","html","btnClasses","classMap","nothing","__decorateClass","property","state","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-patient-banner-BKiN7nIE.js → hx-patient-banner-B4IjHeTx.js} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { css as c, LitElement as v, nothing as p, html as b } from "lit";
+import { css as f, LitElement as v, nothing as p, html as b } from "lit";
 import "./document-token-adoption-DuYNKd4k.js";
-import { property as a, state as f, query as h, customElement as u } from "lit/decorators.js";
-const _ = c`
+import { property as i, state as c, query as h, customElement as u } from "lit/decorators.js";
+const _ = f`
   :host {
     display: block;
     width: 100%;
@@ -140,11 +140,31 @@ const _ = c`
       animation: none !important;
     }
   }
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+  @media (forced-colors: active) {
+    .banner {
+      border-bottom-color: CanvasText;
+    }
+    :host([aria-invalid='true']) .banner {
+      border-bottom-color: LinkText;
+    }
+    :host([aria-invalid='true']) .banner::before {
+      background-color: LinkText;
+    }
+    .banner__photo-area {
+      border: 1px solid CanvasText;
+    }
+  }
 `;
-var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (e, l, n, o) => {
-  for (var r = o > 1 ? void 0 : o ? g(l, n) : l, s = e.length - 1, d; s >= 0; s--)
-    (d = e[s]) && (r = (o ? d(l, n, r) : d(r)) || r);
-  return o && r && m(l, n, r), r;
+var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (e, l, o, n) => {
+  for (var r = n > 1 ? void 0 : n ? g(l, o) : l, s = e.length - 1, d; s >= 0; s--)
+    (d = e[s]) && (r = (n ? d(l, o, r) : d(r)) || r);
+  return n && r && m(l, o, r), r;
 };
 let t = class extends v {
   constructor() {
@@ -161,8 +181,8 @@ let t = class extends v {
   _countPopulatedIdentifiers() {
     let e = 0;
     const l = [this._nameSlot, this._mrnSlot, this._dobSlot];
-    for (const n of l)
-      n && n.assignedNodes({ flatten: !0 }).length > 0 && e++;
+    for (const o of l)
+      o && o.assignedNodes({ flatten: !0 }).length > 0 && e++;
     return e;
   }
   _checkIdentifierRule() {
@@ -242,29 +262,29 @@ let t = class extends v {
   }
 };
 t.styles = [_];
-i([
-  a({ type: String, attribute: "patient-id" })
+a([
+  i({ type: String, attribute: "patient-id" })
 ], t.prototype, "patientId", 2);
-i([
-  a({ type: String, attribute: "label-patient" })
+a([
+  i({ type: String, attribute: "label-patient" })
 ], t.prototype, "labelPatient", 2);
-i([
-  a({ type: String, attribute: "label-name" })
+a([
+  i({ type: String, attribute: "label-name" })
 ], t.prototype, "labelName", 2);
-i([
-  a({ type: String, attribute: "label-mrn" })
+a([
+  i({ type: String, attribute: "label-mrn" })
 ], t.prototype, "labelMrn", 2);
-i([
-  a({ type: String, attribute: "label-dob" })
+a([
+  i({ type: String, attribute: "label-dob" })
 ], t.prototype, "labelDob", 2);
-i([
-  a({ type: String, attribute: "label-allergies" })
+a([
+  i({ type: String, attribute: "label-allergies" })
 ], t.prototype, "labelAllergies", 2);
-i([
-  a({ type: String, attribute: "label-code-status" })
+a([
+  i({ type: String, attribute: "label-code-status" })
 ], t.prototype, "labelCodeStatus", 2);
-i([
-  a({
+a([
+  i({
     attribute: "enforce-identifier-rule",
     reflect: !0,
     converter: {
@@ -273,25 +293,25 @@ i([
     }
   })
 ], t.prototype, "enforceIdentifierRule", 2);
-i([
-  f()
+a([
+  c()
 ], t.prototype, "_identifierCount", 2);
-i([
-  f()
+a([
+  c()
 ], t.prototype, "_isViolating", 2);
-i([
+a([
   h('slot[name="name"]')
 ], t.prototype, "_nameSlot", 2);
-i([
+a([
   h('slot[name="mrn"]')
 ], t.prototype, "_mrnSlot", 2);
-i([
+a([
   h('slot[name="dob"]')
 ], t.prototype, "_dobSlot", 2);
-t = i([
+t = a([
   u("hx-patient-banner")
 ], t);
 export {
   t as H
 };
-//# sourceMappingURL=hx-patient-banner-BKiN7nIE.js.map
+//# sourceMappingURL=hx-patient-banner-B4IjHeTx.js.map

package/dist/shared/hx-patient-banner-B4IjHeTx.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-patient-banner-B4IjHeTx.js","sources":["../../src/components/hx-patient-banner/hx-patient-banner.styles.ts","../../src/components/hx-patient-banner/hx-patient-banner.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPatientBannerStyles = css`\n :host {\n display: block;\n width: 100%;\n\n /* ─── Private token vars (3-tier cascade) ─── */\n --_bg: var(--hx-patient-banner-bg, var(--hx-color-neutral-50, #f9fafb));\n --_border-color: var(--hx-patient-banner-border-color, var(--hx-color-neutral-200, #e5e7eb));\n --_padding: var(\n --hx-patient-banner-padding,\n var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem)\n );\n --_gap: var(--hx-patient-banner-gap, var(--hx-space-4, 1rem));\n --_font-family: var(--hx-patient-banner-font-family, var(--hx-font-family-sans, sans-serif));\n --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-500, #6b7280));\n --_label-font-size: var(--hx-patient-banner-label-font-size, var(--hx-font-size-xs, 0.75rem));\n --_value-color: var(--hx-patient-banner-value-color, var(--hx-color-neutral-900, #111827));\n --_value-font-size: var(--hx-patient-banner-value-font-size, var(--hx-font-size-sm, 0.875rem));\n --_photo-size: var(--hx-patient-banner-photo-size, var(--hx-space-10, 2.5rem));\n --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #e5e7eb));\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* ─── Banner Container ─── */\n\n .banner {\n display: flex;\n align-items: center;\n gap: var(--_gap);\n padding: var(--_padding);\n background-color: var(--_bg);\n border-bottom: var(--hx-border-width-thin, 1px) solid var(--_border-color);\n font-family: var(--_font-family);\n width: 100%;\n position: relative;\n }\n\n /* ─── Photo Area ─── */\n\n .banner__photo-area {\n flex-shrink: 0;\n width: var(--_photo-size);\n height: var(--_photo-size);\n /* Minimum 44x44px touch target for interactive photo content. */\n min-width: 44px;\n min-height: 44px;\n border-radius: var(--hx-border-radius-full, 9999px);\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--_photo-bg);\n }\n\n /* ─── Fields Grid ─── */\n\n .banner__fields {\n display: flex;\n flex-wrap: wrap;\n gap: var(--_gap);\n flex: 1;\n min-width: 0;\n }\n\n /* ─── Individual Field ─── */\n\n .field {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n min-width: 0;\n }\n\n .field__label {\n font-size: var(--_label-font-size);\n color: var(--_label-color);\n font-weight: var(--hx-font-weight-medium, 500);\n line-height: var(--hx-line-height-tight, 1.25);\n white-space: nowrap;\n }\n\n .field__value {\n font-size: var(--_value-font-size);\n color: var(--_value-color);\n font-weight: var(--hx-font-weight-normal, 400);\n line-height: var(--hx-line-height-normal, 1.5);\n display: flex;\n align-items: center;\n gap: var(--hx-space-1, 0.25rem);\n }\n\n /* ─── Identifier Rule Violation ─── */\n /* Visual indicator when Joint Commission two-identifier rule is not met. */\n\n :host([aria-invalid='true']) .banner {\n border-bottom-color: var(--hx-color-error-400, #f87171);\n background-color: var(--hx-color-error-50, #fef2f2);\n /* Darken label color to maintain 4.5:1 contrast on error-50 background. */\n --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-700, #374151));\n }\n\n :host([aria-invalid='true']) .banner::before {\n content: '';\n display: block;\n position: absolute;\n inset-inline-start: 0;\n top: 0;\n bottom: 0;\n width: var(--hx-border-width-thick, 4px);\n background-color: var(--hx-color-error-500, #ef4444);\n border-radius: 0;\n }\n\n /* ─── Visually-hidden violation live region ─── */\n /* Announces identifier rule violations to screen readers without visible text. */\n\n .violation-message {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n\n /* ─── Motion reduction ─── */\n\n @media (prefers-reduced-motion: reduce) {\n * {\n transition: none !important;\n animation: none !important;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .banner {\n border-bottom-color: CanvasText;\n }\n\n :host([aria-invalid='true']) .banner {\n border-bottom-color: LinkText;\n }\n\n :host([aria-invalid='true']) .banner::before {\n background-color: LinkText;\n }\n\n .banner__photo-area {\n border: 1px solid CanvasText;\n }\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { helixPatientBannerStyles } from './hx-patient-banner.styles.js';\n\n/**\n * Patient identification banner implementing Joint Commission NPSG.01.01.01 two-identifier rule.\n * Renders as a landmark region containing named slots for patient identification fields.\n * Integrates with hx-phi-field for HIPAA-compliant display of masked identifiers.\n * Note: hx-phi-access events fired by slotted hx-phi-field elements bubble through this\n * component via composed: true — no re-dispatch is required.\n *\n * @summary Patient identification banner with two-identifier rule enforcement.\n *\n * @tag hx-patient-banner\n *\n * @slot photo - Optional patient photo slot.\n * @slot name - Patient name field content.\n * @slot mrn - Medical record number field content. Use hx-phi-field for HIPAA compliance.\n * @slot dob - Date of birth field content. Use hx-phi-field for HIPAA compliance.\n * @slot allergies - Allergy status/flag content.\n * @slot code-status - Code status content.\n *\n * @csspart banner - The outer banner container.\n * @csspart photo-area - The photo slot wrapper.\n * @csspart fields - The fields grid container.\n * @csspart field - An individual field container (applied to all field wrappers).\n * @csspart field-label - The field label element.\n * @csspart field-value - The field value slot wrapper.\n * @csspart violation-message - The visually-hidden identifier rule violation status message.\n *\n * @fires {CustomEvent<PatientIdentifierRuleViolationDetail>} hx-identifier-rule-violation - Fired when fewer than 2 identifier slots are populated and enforce-identifier-rule is true.\n *\n * @cssprop [--hx-patient-banner-bg=var(--hx-color-neutral-50,#f9fafb)] - Banner background color.\n * @cssprop [--hx-patient-banner-border-color=var(--hx-color-neutral-200,#e5e7eb)] - Banner border color.\n * @cssprop [--hx-patient-banner-padding=var(--hx-space-3,0.75rem) var(--hx-space-4,1rem)] - Banner padding.\n * @cssprop [--hx-patient-banner-gap=var(--hx-space-4,1rem)] - Gap between banner fields.\n * @cssprop [--hx-patient-banner-font-family=var(--hx-font-family-sans,sans-serif)] - Banner font family.\n * @cssprop [--hx-patient-banner-label-color=var(--hx-color-neutral-500,#6b7280)] - Field label color.\n * @cssprop [--hx-patient-banner-label-font-size=var(--hx-font-size-xs,0.75rem)] - Field label font size.\n * @cssprop [--hx-patient-banner-value-color=var(--hx-color-neutral-900,#111827)] - Field value color.\n * @cssprop [--hx-patient-banner-value-font-size=var(--hx-font-size-sm,0.875rem)] - Field value font size.\n * @cssprop [--hx-patient-banner-photo-size=var(--hx-space-10,2.5rem)] - Photo area size.\n * @cssprop [--hx-patient-banner-photo-bg=var(--hx-color-neutral-200,#e5e7eb)] - Photo area background color when empty.\n */\n@customElement('hx-patient-banner')\nexport class HelixPatientBanner extends LitElement {\n static override styles = [helixPatientBannerStyles];\n\n // ─── Public Properties ───\n\n /**\n * Optional patient ID used as context in identifier rule violation events.\n * @attr patient-id\n */\n @property({ type: String, attribute: 'patient-id' })\n patientId: string = '';\n\n /**\n * Accessible label for the banner landmark region.\n * @attr label-patient\n */\n @property({ type: String, attribute: 'label-patient' })\n labelPatient: string = 'Patient identification';\n\n /**\n * Visible label for the name field.\n * @attr label-name\n */\n @property({ type: String, attribute: 'label-name' })\n labelName: string = 'Patient name';\n\n /**\n * Visible label for the MRN field.\n * @attr label-mrn\n */\n @property({ type: String, attribute: 'label-mrn' })\n labelMrn: string = 'MRN';\n\n /**\n * Visible label for the date of birth field.\n * @attr label-dob\n */\n @property({ type: String, attribute: 'label-dob' })\n labelDob: string = 'Date of birth';\n\n /**\n * Visible label for the allergies field.\n * @attr label-allergies\n */\n @property({ type: String, attribute: 'label-allergies' })\n labelAllergies: string = 'Allergies';\n\n /**\n * Visible label for the code status field.\n * @attr label-code-status\n */\n @property({ type: String, attribute: 'label-code-status' })\n labelCodeStatus: string = 'Code status';\n\n /**\n * Whether to enforce the Joint Commission NPSG.01.01.01 two-identifier rule.\n * When true, fires hx-identifier-rule-violation if fewer than 2 identifier\n * slots (name, mrn, dob) are populated.\n * @attr enforce-identifier-rule\n */\n @property({\n attribute: 'enforce-identifier-rule',\n reflect: true,\n converter: {\n fromAttribute: (value: string | null) => value !== 'false',\n toAttribute: (value: boolean) => String(value),\n },\n })\n enforceIdentifierRule: boolean = true;\n\n // ─── Internal State ───\n\n /** @internal */\n @state() private _identifierCount: number = 0;\n\n /** @internal */\n @state() private _isViolating: boolean = false;\n\n // ─── Slot Queries ───\n\n /** @internal */\n @query('slot[name=\"name\"]') private _nameSlot!: HTMLSlotElement | null;\n\n /** @internal */\n @query('slot[name=\"mrn\"]') private _mrnSlot!: HTMLSlotElement | null;\n\n /** @internal */\n @query('slot[name=\"dob\"]') private _dobSlot!: HTMLSlotElement | null;\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'banner');\n this.setAttribute('aria-label', this.labelPatient);\n }\n\n protected override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('labelPatient')) {\n this.setAttribute('aria-label', this.labelPatient);\n }\n\n if (changedProperties.has('enforceIdentifierRule')) {\n this._checkIdentifierRule();\n }\n }\n\n // ─── Private Helpers ───\n\n private _countPopulatedIdentifiers(): number {\n let count = 0;\n\n const slots = [this._nameSlot, this._mrnSlot, this._dobSlot];\n for (const slot of slots) {\n if (slot && slot.assignedNodes({ flatten: true }).length > 0) {\n count++;\n }\n }\n\n return count;\n }\n\n private _checkIdentifierRule(): void {\n const count = this._countPopulatedIdentifiers();\n this._identifierCount = count;\n\n if (this.enforceIdentifierRule && count < 2) {\n this._isViolating = true;\n this.setAttribute('aria-invalid', 'true');\n this.dispatchEvent(\n new CustomEvent<PatientIdentifierRuleViolationDetail>('hx-identifier-rule-violation', {\n bubbles: true,\n composed: true,\n detail: {\n populatedIdentifiers: count,\n requiredIdentifiers: 2,\n patientId: this.patientId,\n },\n }),\n );\n } else {\n this._isViolating = false;\n this.removeAttribute('aria-invalid');\n }\n }\n\n // ─── Event Handlers ───\n\n private _handleSlotChange(): void {\n this._checkIdentifierRule();\n }\n\n // ─── Render ───\n\n override render() {\n const violationMessage = this._isViolating\n ? `Warning: patient identification incomplete. ${this._identifierCount} of 2 required identifiers present.`\n : nothing;\n\n return html`\n <div part=\"banner\" class=\"banner\">\n <div part=\"photo-area\" class=\"banner__photo-area\" aria-hidden=\"true\">\n <slot name=\"photo\"></slot>\n </div>\n\n <div part=\"fields\" class=\"banner__fields\">\n <div part=\"field\" class=\"field\">\n <span part=\"field-label\" class=\"field__label\">${this.labelName}</span>\n <div part=\"field-value\" class=\"field__value\">\n <slot name=\"name\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n\n <div part=\"field\" class=\"field\">\n <span part=\"field-label\" class=\"field__label\">${this.labelMrn}</span>\n <div part=\"field-value\" class=\"field__value\">\n <slot name=\"mrn\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n\n <div part=\"field\" class=\"field\">\n <span part=\"field-label\" class=\"field__label\">${this.labelDob}</span>\n <div part=\"field-value\" class=\"field__value\">\n <slot name=\"dob\" @slotchange=${this._handleSlotChange}></slot>\n </div>\n </div>\n\n <div part=\"field\" class=\"field\">\n <span part=\"field-label\" class=\"field__label\">${this.labelAllergies}</span>\n <div part=\"field-value\" class=\"field__value\">\n <slot name=\"allergies\"></slot>\n </div>\n </div>\n\n <div part=\"field\" class=\"field\">\n <span part=\"field-label\" class=\"field__label\">${this.labelCodeStatus}</span>\n <div part=\"field-value\" class=\"field__value\">\n <slot name=\"code-status\"></slot>\n </div>\n </div>\n </div>\n </div>\n\n ${violationMessage !== nothing\n ? html`<div\n part=\"violation-message\"\n class=\"violation-message\"\n role=\"alert\"\n aria-live=\"assertive\"\n >\n ${violationMessage}\n </div>`\n : nothing}\n `;\n }\n}\n\nexport interface PatientIdentifierRuleViolationDetail {\n populatedIdentifiers: number;\n requiredIdentifiers: number;\n patientId: string;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-patient-banner': HelixPatientBanner;\n }\n}\n"],"names":["helixPatientBannerStyles","css","HelixPatientBanner","LitElement","changedProperties","count","slots","slot","violationMessage","nothing","html","__decorateClass","property","value","state","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-popover-CydNuVkT.js → hx-popover-ZGRFgBbx.js} RENAMED Viewed

@@ -1,7 +1,8 @@
-import { css as k, LitElement as $, nothing as y, html as x } from "lit";
+import { css as k, LitElement as C, nothing as y, html as x } from "lit";
 import "./document-token-adoption-DuYNKd4k.js";
-import { property as d, state as C, customElement as P } from "lit/decorators.js";
-const D = k`
+import { property as d, state as $, customElement as P } from "lit/decorators.js";
+import { c as D } from "./id-counter-PTgF-zcG.js";
+const F = k`
   :host {
     /* P2-05: display:contents lets the trigger-wrapper control layout inline;
        position:relative was vestigial — body uses position:fixed via Floating UI */
@@ -62,15 +63,28 @@ const D = k`
       transition: none;
     }
   }
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+  @media (forced-colors: active) {
+    [part='body'] {
+      border-color: CanvasText;
+    }
+    [part='arrow'] {
+      border-color: CanvasText;
+    }
+  }
 `;
-var F = Object.defineProperty, L = Object.getOwnPropertyDescriptor, h = (e, t, r, o) => {
-  for (var i = o > 1 ? void 0 : o ? L(t, r) : t, n = e.length - 1, s; n >= 0; n--)
+var L = Object.defineProperty, M = Object.getOwnPropertyDescriptor, h = (e, t, r, o) => {
+  for (var i = o > 1 ? void 0 : o ? M(t, r) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (o ? s(t, r, i) : s(i)) || i);
-  return o && i && F(t, r, i), i;
+  return o && i && L(t, r, i), i;
 };
-let M = 0, a = class extends $ {
+const R = D("hx-popover");
+let a = class extends C {
   constructor() {
-    super(...arguments), this.open = !1, this.placement = "bottom", this.trigger = "click", this.distance = 8, this.skidding = 0, this.arrow = !1, this.label = "Popover", this._visible = !1, this._previousFocus = null, this._popoverId = `hx-popover-${++M}`, this._showTimer = null, this._hoverHideTimer = null, this._handleDocumentKeydown = (e) => {
+    super(...arguments), this.open = !1, this.placement = "bottom", this.trigger = "click", this.distance = 8, this.skidding = 0, this.arrow = !1, this.label = "Popover", this._visible = !1, this._previousFocus = null, this._popoverId = R(), this._showTimer = null, this._hoverHideTimer = null, this._handleDocumentKeydown = (e) => {
       var t, r, o;
       if (this._visible) {
         if (e.key === "Escape") {
@@ -189,7 +203,7 @@ let M = 0, a = class extends $ {
       left: `${w}px`,
       top: `${E}px`
     }), o && v.arrow) {
-      const u = v.arrow, _ = A.split("-")[0] ?? "bottom", S = {
+      const u = v.arrow, _ = A.split("-")[0] ?? "bottom", T = {
         top: "bottom",
         right: "left",
         bottom: "top",
@@ -200,10 +214,10 @@ let M = 0, a = class extends $ {
         top: u.y != null ? `${u.y}px` : "",
         right: "",
         bottom: "",
-        [S]: "-5px"
+        [T]: "-5px"
       });
-      const T = ["border-top", "border-right", "border-bottom", "border-left"];
-      for (const H of T)
+      const S = ["border-top", "border-right", "border-bottom", "border-left"];
+      for (const H of S)
         o.style.setProperty(H, "");
       const g = {
         bottom: ["border-bottom", "border-right"],
@@ -267,7 +281,7 @@ let M = 0, a = class extends $ {
     `;
   }
 };
-a.styles = [D];
+a.styles = [F];
 h([
   d({ type: Boolean, reflect: !0 })
 ], a.prototype, "open", 2);
@@ -290,7 +304,7 @@ h([
   d({ type: String, reflect: !0 })
 ], a.prototype, "label", 2);
 h([
-  C()
+  $()
 ], a.prototype, "_visible", 2);
 a = h([
   P("hx-popover")
@@ -298,4 +312,4 @@ a = h([
 export {
   a as H
 };
-//# sourceMappingURL=hx-popover-CydNuVkT.js.map
+//# sourceMappingURL=hx-popover-ZGRFgBbx.js.map

package/dist/shared/hx-popover-ZGRFgBbx.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-popover-ZGRFgBbx.js","sources":["../../src/components/hx-popover/hx-popover.styles.ts","../../src/components/hx-popover/hx-popover.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPopoverStyles = css`\n :host {\n /* P2-05: display:contents lets the trigger-wrapper control layout inline;\n position:relative was vestigial — body uses position:fixed via Floating UI */\n display: contents;\n }\n\n .trigger-wrapper {\n display: inline-block;\n }\n\n [part='body'] {\n position: fixed;\n z-index: var(--hx-popover-z-index, 9999);\n max-width: var(--hx-popover-max-width, 320px);\n padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));\n background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));\n color: var(--hx-popover-color, var(--hx-color-neutral-900, #111827));\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));\n line-height: var(--hx-line-height-normal, 1.5);\n border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));\n border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));\n box-shadow: var(\n --hx-popover-shadow,\n var(--hx-shadow-md, 0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12)))\n );\n visibility: hidden;\n opacity: 0;\n transition:\n opacity var(--hx-popover-transition-duration, 0.2s) ease,\n visibility var(--hx-popover-transition-duration, 0.2s) ease;\n word-wrap: break-word;\n }\n\n [part='body'].visible {\n visibility: visible;\n opacity: 1;\n }\n\n [part='body']:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n [part='arrow'] {\n position: absolute;\n width: var(--hx-popover-arrow-size, 10px);\n height: var(--hx-popover-arrow-size, 10px);\n background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));\n border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));\n transform: rotate(45deg);\n pointer-events: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [part='body'] {\n transition: none;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n [part='body'] {\n border-color: CanvasText;\n }\n\n [part='arrow'] {\n border-color: CanvasText;\n }\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { createIdCounter } from '../../base/index.js';\nimport { helixPopoverStyles } from './hx-popover.styles.js';\n\nconst _nextPopoverId = createIdCounter('hx-popover');\n\n/**\n * A popover that displays rich floating content attached to a trigger element.\n *\n * @summary Rich floating overlay attached to a trigger element.\n *\n * @tag hx-popover\n *\n * @slot anchor - The trigger element that opens the popover.\n * @slot - Default slot for popover body content.\n *\n * @csspart body - The popover body container element.\n * @csspart arrow - The arrow indicator element.\n *\n * @cssprop [--hx-popover-bg=var(--hx-color-neutral-0)] - Popover background color.\n * @cssprop [--hx-popover-color=var(--hx-color-neutral-900)] - Popover text color.\n * @cssprop [--hx-popover-font-size=var(--hx-font-size-sm)] - Popover font size.\n * @cssprop [--hx-popover-max-width=320px] - Maximum popover width.\n * @cssprop [--hx-popover-padding] - Popover padding.\n * @cssprop [--hx-popover-border-color=var(--hx-color-neutral-200)] - Popover border color.\n * @cssprop [--hx-popover-border-radius=var(--hx-border-radius-md)] - Popover border radius.\n * @cssprop [--hx-popover-shadow] - Popover box shadow.\n * @cssprop [--hx-popover-z-index=9999] - Popover z-index.\n * @cssprop [--hx-popover-transition-duration=0.2s] - Show/hide transition duration.\n * @cssprop [--hx-popover-arrow-size=10px] - Size of the arrow indicator.\n * @cssprop [--hx-popover-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color when the popover body receives focus.\n *\n * @fires {CustomEvent} hx-show - Emitted when the popover begins to show.\n * @fires {CustomEvent} hx-after-show - Emitted after the popover is fully visible.\n * @fires {CustomEvent} hx-hide - Emitted when the popover begins to hide.\n * @fires {CustomEvent} hx-after-hide - Emitted after the popover is fully hidden.\n *\n * @example\n * ```html\n * <hx-popover placement=\"bottom\" trigger=\"click\">\n * <button slot=\"anchor\">Open Popover</button>\n * <p>Rich popover content here.</p>\n * </hx-popover>\n * ```\n */\n\n@customElement('hx-popover')\nexport class HelixPopover extends LitElement {\n static override styles = [helixPopoverStyles];\n\n /**\n * Whether the popover is open.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * Preferred placement of the popover relative to the anchor.\n * @attr placement\n */\n @property({ type: String, reflect: true })\n placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end' = 'bottom';\n\n /**\n * How the popover is triggered.\n * @attr trigger\n */\n @property({ type: String, reflect: true })\n trigger: 'click' | 'hover' | 'focus' | 'manual' = 'click';\n\n /**\n * Distance in pixels between the popover and the anchor.\n * @attr distance\n */\n @property({ type: Number, reflect: true })\n distance = 8;\n\n /**\n * Alignment offset in pixels along the anchor.\n * @attr skidding\n */\n @property({ type: Number, reflect: true })\n skidding = 0;\n\n /**\n * Whether to show an arrow pointing to the anchor.\n * @attr arrow\n */\n @property({ type: Boolean, reflect: true })\n arrow = false;\n\n /**\n * Accessible label for the popover body (sets aria-label on the dialog).\n * @attr label\n */\n @property({ type: String, reflect: true })\n label = 'Popover';\n\n /**\n * Tracks whether the popover body is currently visible.\n * @internal\n */\n @state() private _visible = false;\n\n /**\n * The element that held focus before the popover opened, used to restore focus on close.\n * @internal\n */\n private _previousFocus: HTMLElement | null = null;\n\n /**\n * Unique ID assigned to the popover body element.\n * @internal\n */\n private readonly _popoverId = _nextPopoverId();\n\n /**\n * Timer ID for the deferred document click listener registration in _show().\n * Stored so it can be cancelled in disconnectedCallback to prevent leaks.\n * @internal\n */\n private _showTimer: ReturnType<typeof setTimeout> | null = null;\n\n /**\n * Timer ID for the hover-triggered hide delay.\n * WCAG 1.4.13: hoverable content must remain visible while the pointer is\n * over it. A 150 ms delay allows the pointer to move from the anchor into\n * the popover body without the content dismissing prematurely.\n * @internal\n */\n private _hoverHideTimer: ReturnType<typeof setTimeout> | null = null;\n\n // ─── Lifecycle ───\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this._showTimer !== null) {\n clearTimeout(this._showTimer);\n this._showTimer = null;\n }\n if (this._hoverHideTimer !== null) {\n clearTimeout(this._hoverHideTimer);\n this._hoverHideTimer = null;\n }\n document.removeEventListener('click', this._handleDocumentClick);\n document.removeEventListener('keydown', this._handleDocumentKeydown);\n }\n\n override firstUpdated(): void {\n // HIGH-02: set aria-haspopup=\"dialog\" once on the anchor so assistive technology\n // announces the control's popup type before it is ever opened.\n this._setAnchorAriaAttributes(false);\n // Sync initial open state\n if (this.open) {\n void this._show();\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('open')) {\n if (this.open) {\n void this._show();\n } else {\n void this._hide();\n }\n }\n }\n\n // ─── ARIA setup ───\n\n // HIGH-02: set aria-haspopup=\"dialog\" on firstUpdated and keep aria-expanded in sync\n /** @internal */\n private _setAnchorAriaAttributes(expanded: boolean): void {\n const anchorSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"anchor\"]',\n ) as HTMLSlotElement | null;\n if (!anchorSlot) return;\n const anchorEl = anchorSlot.assignedElements()[0] as HTMLElement | undefined;\n if (anchorEl) {\n anchorEl.setAttribute('aria-expanded', String(expanded));\n anchorEl.setAttribute('aria-haspopup', 'dialog');\n // aria-controls is omitted: the body lives in Shadow DOM and axe-core\n // cannot resolve cross-root IDREF values, which causes a critical violation.\n }\n }\n\n // ─── Focus helpers ───\n\n /** Return all keyboard-focusable elements inside the popover body's slotted content. */\n /** @internal */\n private _getFocusableElements(): HTMLElement[] {\n const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n if (!bodyEl) return [];\n\n // Gather focusable elements from the default slot's assigned nodes\n const defaultSlot = bodyEl.querySelector('slot:not([name])') as HTMLSlotElement | null;\n if (!defaultSlot) return [];\n\n const assigned = defaultSlot.assignedElements({ flatten: true });\n const focusableSelector =\n 'a[href], area[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), details > summary';\n\n const result: HTMLElement[] = [];\n for (const el of assigned) {\n if (el.matches(focusableSelector)) {\n result.push(el as HTMLElement);\n }\n const nested = el.querySelectorAll<HTMLElement>(focusableSelector);\n result.push(...nested);\n }\n return result;\n }\n\n // ─── Show/Hide ───\n\n /** @internal */\n private async _show(): Promise<void> {\n if (this._visible) return;\n // P0-02: save focus target before moving focus into dialog\n this._previousFocus = document.activeElement as HTMLElement | null;\n this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n this._visible = true;\n this.open = true;\n this._setAnchorAriaAttributes(true);\n // P1-03 / HIGH-01: single keydown listener handles both Escape and focus trap.\n // Registered synchronously before any await so it is in place before the first\n // await el.updateComplete in tests.\n document.addEventListener('keydown', this._handleDocumentKeydown);\n await this.updateComplete;\n // hx-after-show fires after Lit has rendered the visible state. Dispatching here\n // (before _updatePosition) ensures it fires in the same microtask as the test's\n // await-continuation, so tests can rely on a single await el.updateComplete.\n this.dispatchEvent(new CustomEvent<void>('hx-after-show', { bubbles: true, composed: true }));\n // WCAG 2.4.3: only move focus into the popover when it contains interactive\n // content. For non-interactive (informational) popovers, stealing focus from\n // the trigger is unexpected and disruptive for keyboard users.\n const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n if (bodyEl) {\n const hasInteractive = this._getFocusableElements().length > 0;\n if (hasInteractive) {\n bodyEl.focus();\n }\n }\n // P0-01: listen for outside clicks; deferred to avoid catching the opening click\n if (this._showTimer !== null) {\n clearTimeout(this._showTimer);\n }\n this._showTimer = setTimeout(() => {\n this._showTimer = null;\n document.addEventListener('click', this._handleDocumentClick);\n }, 0);\n await this._updatePosition();\n }\n\n // HIGH-03: _hideWithFocusRestore controls whether _previousFocus is restored.\n // Escape and programmatic close restore focus; click-outside does not.\n /** @internal */\n private async _hide(restoreFocus = true): Promise<void> {\n if (!this._visible) return;\n document.removeEventListener('click', this._handleDocumentClick);\n document.removeEventListener('keydown', this._handleDocumentKeydown);\n this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n this._visible = false;\n this.open = false;\n this._setAnchorAriaAttributes(false);\n // HIGH-03: only restore focus on Escape / programmatic close\n if (restoreFocus) {\n this._previousFocus?.focus();\n }\n this._previousFocus = null;\n await this.updateComplete;\n this.dispatchEvent(new CustomEvent<void>('hx-after-hide', { bubbles: true, composed: true }));\n }\n\n // ─── Positioning ───\n\n /** @internal */\n private async _updatePosition(): Promise<void> {\n const anchorSlot = this.shadowRoot?.querySelector(\n 'slot[name=\"anchor\"]',\n ) as HTMLSlotElement | null;\n if (!anchorSlot) return;\n const anchorEl = anchorSlot.assignedElements()[0] as HTMLElement | undefined;\n const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n const arrowEl = this.arrow\n ? (this.shadowRoot?.querySelector('[part=\"arrow\"]') as HTMLElement | null)\n : null;\n\n if (!anchorEl || !bodyEl) return;\n\n const { computePosition, flip, shift, offset, arrow } = await import('@floating-ui/dom');\n\n const middleware = [\n offset({ mainAxis: this.distance, crossAxis: this.skidding }),\n flip(),\n shift({ padding: 8 }),\n ];\n\n if (arrowEl) {\n middleware.push(arrow({ element: arrowEl }));\n }\n\n const { x, y, placement, middlewareData } = await computePosition(anchorEl, bodyEl, {\n placement: this.placement,\n strategy: 'fixed',\n middleware,\n });\n\n Object.assign(bodyEl.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n if (arrowEl && middlewareData.arrow) {\n const arrowData = middlewareData.arrow;\n const basePlacement = placement.split('-')[0] ?? 'bottom';\n const oppositeSide: Record<string, string> = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n };\n const staticSide = oppositeSide[basePlacement] ?? 'bottom';\n\n Object.assign(arrowEl.style, {\n left: arrowData.x != null ? `${arrowData.x}px` : '',\n top: arrowData.y != null ? `${arrowData.y}px` : '',\n right: '',\n bottom: '',\n [staticSide]: '-5px',\n });\n\n // P2-02: hide the two border sides facing the popover body so only\n // the outward-facing corner is visible (avoids the inner border line).\n // Reset all four sides first, then make the two inner-facing ones transparent.\n const borderSides = ['border-top', 'border-right', 'border-bottom', 'border-left'] as const;\n for (const side of borderSides) {\n arrowEl.style.setProperty(side, '');\n }\n // Maps base placement → the two sides that face inward toward the popover body\n const innerBorderMap: Record<string, readonly [string, string]> = {\n bottom: ['border-bottom', 'border-right'],\n top: ['border-top', 'border-left'],\n right: ['border-top', 'border-right'],\n left: ['border-bottom', 'border-left'],\n };\n const innerSides = innerBorderMap[basePlacement] ?? ['border-bottom', 'border-right'];\n arrowEl.style.setProperty(innerSides[0], '1px solid transparent');\n arrowEl.style.setProperty(innerSides[1], '1px solid transparent');\n }\n }\n\n // ─── Event Handlers ───\n\n // P1-03 / P0-01 / HIGH-01: single document-level keydown handler while popover is open.\n // Handles Escape (close) and Tab (focus trap) in one listener to reduce overhead.\n /**\n * Handles Escape to close the popover and Tab/Shift+Tab to trap focus within it.\n * @internal\n */\n private _handleDocumentKeydown = (e: KeyboardEvent): void => {\n if (!this._visible) return;\n\n if (e.key === 'Escape') {\n // HIGH-03: Escape always restores focus to the prior element\n void this._hide(true);\n return;\n }\n\n if (e.key === 'Tab') {\n // HIGH-01: trap Tab/Shift+Tab focus within the popover body\n const focusable = this._getFocusableElements();\n if (focusable.length === 0) return;\n\n const bodyEl = this.shadowRoot?.querySelector('[part=\"body\"]') as HTMLElement | null;\n const allFocusable = bodyEl ? [bodyEl, ...focusable] : focusable;\n if (allFocusable.length === 0) return;\n\n const first = allFocusable[0] as HTMLElement;\n const last = allFocusable[allFocusable.length - 1] as HTMLElement;\n\n if (e.shiftKey) {\n if (document.activeElement === first || this.shadowRoot?.activeElement === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n if (document.activeElement === last || this.shadowRoot?.activeElement === last) {\n e.preventDefault();\n first.focus();\n }\n }\n }\n };\n\n // P0-01: close when click target is outside this component\n /**\n * Closes the popover when a click occurs outside the component boundary.\n * @internal\n */\n private _handleDocumentClick = (e: Event): void => {\n // Shadow DOM retargets events from within to the host at document level,\n // so a click on the trigger wrapper appears as e.target === this.\n if (e.target !== this && !this.contains(e.target as Node)) {\n // HIGH-03: click-outside does NOT restore focus — let browser handle naturally\n void this._hide(false);\n }\n };\n\n /**\n * Toggles the popover open/closed when the anchor is clicked in click trigger mode.\n * @internal\n */\n private _handleAnchorClick = (): void => {\n if (this.trigger !== 'click') return;\n if (this._visible) {\n void this._hide(true);\n } else {\n void this._show();\n }\n };\n\n /**\n * Opens the popover when the anchor receives a mouseenter event in hover trigger mode.\n * @internal\n */\n private _handleAnchorMouseEnter = (): void => {\n if (this.trigger !== 'hover') return;\n void this._show();\n };\n\n /**\n * Closes the popover when the anchor receives a mouseleave event in hover trigger mode.\n * WCAG 1.4.13: applies a 150 ms delay so the pointer can move from anchor\n * into the popover body without the content dismissing prematurely.\n * @internal\n */\n private _handleAnchorMouseLeave = (): void => {\n if (this.trigger !== 'hover') return;\n this._scheduleHoverHide();\n };\n\n // CRITICAL-02: body hover handlers so moving the pointer from anchor into\n // the popover content does not trigger a hide.\n /** @internal */\n private _handleBodyMouseEnter = (): void => {\n // Cancel a pending hide that would have fired from the anchor's mouseleave.\n if (this.trigger !== 'hover') return;\n this._cancelHoverHide();\n };\n\n /** @internal */\n private _handleBodyMouseLeave = (): void => {\n if (this.trigger !== 'hover') return;\n this._scheduleHoverHide();\n };\n\n /**\n * Schedules a hide with a 150 ms delay for hover-triggered dismissal.\n * WCAG 1.4.13: the delay allows the pointer to travel between the anchor\n * and the popover body without the content disappearing.\n * @internal\n */\n private _scheduleHoverHide(): void {\n this._cancelHoverHide();\n this._hoverHideTimer = setTimeout(() => {\n this._hoverHideTimer = null;\n void this._hide(false);\n }, 150);\n }\n\n /**\n * Cancels any pending hover-triggered hide.\n * @internal\n */\n private _cancelHoverHide(): void {\n if (this._hoverHideTimer !== null) {\n clearTimeout(this._hoverHideTimer);\n this._hoverHideTimer = null;\n }\n }\n\n /** @internal */\n private _handleAnchorFocusIn = (): void => {\n // CRITICAL-02: keyboard users trigger hover-mode popovers via focusin\n if (this.trigger !== 'focus' && this.trigger !== 'hover') return;\n void this._show();\n };\n\n /** @internal */\n private _handleAnchorFocusOut = (e: FocusEvent): void => {\n // CRITICAL-02: for hover mode, only hide when focus leaves both the anchor\n // and the popover body (i.e. relatedTarget is outside the component).\n if (this.trigger !== 'focus' && this.trigger !== 'hover') return;\n const related = e.relatedTarget as Node | null;\n // If focus is moving into the shadow root (body element), keep popover open\n if (related && (this.contains(related) || this.shadowRoot?.contains(related))) return;\n void this._hide(true);\n };\n\n /** @internal */\n private _handleAnchorSlotChange(): void {\n this._setAnchorAriaAttributes(this._visible);\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <div\n class=\"trigger-wrapper\"\n @click=${this._handleAnchorClick}\n @mouseenter=${this._handleAnchorMouseEnter}\n @mouseleave=${this._handleAnchorMouseLeave}\n @focusin=${this._handleAnchorFocusIn}\n @focusout=${this._handleAnchorFocusOut}\n >\n <slot name=\"anchor\" @slotchange=${this._handleAnchorSlotChange}></slot>\n </div>\n <div\n part=\"body\"\n id=${this._popoverId}\n role=\"dialog\"\n aria-label=${this.label}\n aria-hidden=${!this._visible ? 'true' : nothing}\n tabindex=\"-1\"\n ?inert=${!this._visible}\n class=${this._visible ? 'visible' : ''}\n @mouseenter=${this._handleBodyMouseEnter}\n @mouseleave=${this._handleBodyMouseLeave}\n >\n <slot></slot>\n ${this.arrow ? html`<div part=\"arrow\"></div>` : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-popover': HelixPopover;\n }\n}\n"],"names":["helixPopoverStyles","css","_nextPopoverId","createIdCounter","HelixPopover","LitElement","focusable","bodyEl","_a","allFocusable","first","last","_b","_c","related","changedProperties","expanded","anchorSlot","anchorEl","defaultSlot","assigned","focusableSelector","result","el","nested","restoreFocus","arrowEl","computePosition","flip","shift","offset","arrow","middleware","x","y","placement","middlewareData","arrowData","basePlacement","staticSide","borderSides","side","innerSides","html","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-popup-DbzezTOd.js → hx-popup-Cc4qz89i.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { css as b, LitElement as v, nothing as x, html as d } from "lit";
+import { css as b, LitElement as v, nothing as x, html as f } from "lit";
 import "./document-token-adoption-DuYNKd4k.js";
 import { property as r, customElement as g } from "lit/decorators.js";
-import { autoUpdate as w, offset as _, autoPlacement as S, flip as A, shift as z, arrow as P, size as E, computePosition as U } from "@floating-ui/dom";
-const k = b`
+import { autoUpdate as w, offset as _, autoPlacement as S, flip as A, shift as z, arrow as P, size as E, computePosition as C } from "@floating-ui/dom";
+const U = b`
   :host {
     display: inline-block;
   }
@@ -33,11 +33,23 @@ const k = b`
       transition: none;
     }
   }
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+  @media (forced-colors: active) {
+    [part='popup'] {
+      border: 1px solid CanvasText;
+    }
+    [part='arrow'] {
+      border: 1px solid CanvasText;
+    }
+  }
 `;
-var C = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (t, o, e, i) => {
+var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (t, o, e, i) => {
   for (var n = i > 1 ? void 0 : i ? $(o, e) : o, p = t.length - 1, l; p >= 0; p--)
     (l = t[p]) && (n = (i ? l(o, e, n) : l(n)) || n);
-  return i && n && C(o, e, n), n;
+  return i && n && k(o, e, n), n;
 };
 let s = class extends v {
   constructor() {
@@ -82,10 +94,10 @@ let s = class extends v {
   }
   /** @internal */
   async _reposition() {
-    var u, f;
+    var u, d;
     const t = this._getAnchorElement(), o = (u = this.shadowRoot) == null ? void 0 : u.querySelector('[part="popup"]');
     if (!t || !o) return;
-    const e = this.arrow ? ((f = this.shadowRoot) == null ? void 0 : f.querySelector('[part="arrow"]')) ?? null : null, i = [
+    const e = this.arrow ? ((d = this.shadowRoot) == null ? void 0 : d.querySelector('[part="arrow"]')) ?? null : null, i = [
       _({ mainAxis: this.distance, crossAxis: this.skidding })
     ];
     this.placement === "auto" ? i.push(S()) : this.flip && i.push(
@@ -101,7 +113,7 @@ let s = class extends v {
     );
     const n = this.placement === "auto" ? "bottom" : this.placement;
     o.style.position = this.strategy;
-    const { x: p, y: l, placement: c, middlewareData: m } = await U(t, o, {
+    const { x: p, y: l, placement: c, middlewareData: m } = await C(t, o, {
       placement: n,
       strategy: this.strategy,
       middleware: i
@@ -139,16 +151,16 @@ let s = class extends v {
   }
   // ─── Render ───
   render() {
-    return d`
+    return f`
       <slot name="anchor" @slotchange=${this._handleAnchorSlotChange}></slot>
       <div part="popup" ?inert=${!this.active}>
         <slot></slot>
-        ${this.arrow ? d`<div part="arrow"></div>` : x}
+        ${this.arrow ? f`<div part="arrow"></div>` : x}
       </div>
     `;
   }
 };
-s.styles = [k];
+s.styles = [U];
 a([
   r({ attribute: "anchor" })
 ], s.prototype, "anchor", 2);
@@ -209,4 +221,4 @@ s = a([
 export {
   s as H
 };
-//# sourceMappingURL=hx-popup-DbzezTOd.js.map
+//# sourceMappingURL=hx-popup-Cc4qz89i.js.map

package/dist/shared/hx-popup-Cc4qz89i.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-popup-Cc4qz89i.js","sources":["../../src/components/hx-popup/hx-popup.styles.ts","../../src/components/hx-popup/hx-popup.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixPopupStyles = css`\n :host {\n display: inline-block;\n }\n\n [part='popup'] {\n position: fixed;\n z-index: var(--hx-popup-z-index, 9000);\n inset: 0 auto auto 0;\n box-sizing: border-box;\n transition: var(--hx-popup-transition, none);\n }\n\n :host(:not([active])) [part='popup'] {\n display: none;\n }\n\n [part='arrow'] {\n position: absolute;\n width: var(--hx-arrow-size, 8px);\n height: var(--hx-arrow-size, 8px);\n background: var(--hx-arrow-color, var(--hx-color-neutral-0, #ffffff));\n transform: rotate(45deg);\n pointer-events: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [part='popup'] {\n transition: none;\n }\n }\n\n /* ─── Forced Colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n [part='popup'] {\n border: 1px solid CanvasText;\n }\n\n [part='arrow'] {\n border: 1px solid CanvasText;\n }\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n computePosition,\n flip as flipMiddleware,\n shift as shiftMiddleware,\n offset as offsetMiddleware,\n arrow as arrowMiddleware,\n autoUpdate,\n size as sizeMiddleware,\n autoPlacement as autoPlacementMiddleware,\n} from '@floating-ui/dom';\nimport type { Placement, Middleware } from '@floating-ui/dom';\nimport { helixPopupStyles } from './hx-popup.styles.js';\n\ntype PopupPlacement =\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'\n | 'auto';\n\n// More precise type matching @floating-ui/dom's arrow middleware data structure\ntype ArrowData = { x?: number; y?: number; centerOffset: number };\n\n/**\n * A low-level positioning primitive that anchors a floating panel to a reference element.\n * This is the base that hx-tooltip, hx-dropdown, and hx-popover build upon.\n *\n * @summary Low-level popup positioning utility.\n *\n * @tag hx-popup\n *\n * @slot anchor - The reference element the popup is anchored to.\n * @slot - Default slot for popup content.\n *\n * @csspart popup - The popup container element.\n * @csspart arrow - The arrow indicator element (only present when `arrow` is true).\n *\n * @cssprop [--hx-popup-z-index=9000] - Z-index of the popup container.\n * @cssprop [--hx-popup-transition=none] - Transition applied to the popup element.\n * Consumers who need enter/exit animations can set this property AND override the\n * default `display: none` hide mechanism via `::part(popup)`. Example:\n * ```css\n * hx-popup { --hx-popup-transition: opacity 0.2s ease; }\n * hx-popup:not([active])::part(popup) { display: block; opacity: 0; pointer-events: none; }\n * hx-popup[active]::part(popup) { opacity: 1; }\n * ```\n * @cssprop [--hx-arrow-size=8px] - Size of the arrow element.\n * @cssprop [--hx-arrow-color=var(--hx-color-surface-overlay, #ffffff)] - Color of the arrow element.\n * @cssprop --hx-auto-size-available-width - Available width set by auto-size middleware (on :host).\n * @cssprop --hx-auto-size-available-height - Available height set by auto-size middleware (on :host).\n *\n * @fires {CustomEvent} hx-reposition - Emitted after the popup is repositioned.\n *\n * ## Accessibility Contract\n *\n * `hx-popup` is a **positioning utility**, not an interactive widget. It does not provide\n * ARIA semantics. Consumers are responsible for all accessibility:\n *\n * - **Popup role**: Add `role=\"tooltip\"`, `role=\"dialog\"`, `role=\"listbox\"`, etc. to the\n * slotted popup content depending on its purpose.\n * - **Trigger state**: The element that triggers the popup MUST set `aria-expanded=\"true/false\"`.\n * - **Association**: Use `aria-controls` on the trigger to reference the popup content element,\n * and `aria-labelledby` / `aria-describedby` as appropriate.\n * - **Focus management**: `hx-popup` does NOT trap focus. Consumers building dialogs or menus\n * MUST implement focus trapping and keyboard dismiss (Escape key) themselves.\n * - **Visibility**: The popup is hidden via `display: none` (CSS) and the `inert` attribute\n * when inactive. Both are reliable accessibility-tree hiding mechanisms.\n *\n * @example\n * ```html\n * \n * <hx-popup id=\"my-tooltip\" placement=\"bottom\" distance=\"8\">\n * <button\n * slot=\"anchor\"\n * aria-describedby=\"tooltip-content\"\n * aria-expanded=\"false\"\n * aria-controls=\"my-tooltip\"\n * >\n * Trigger\n * </button>\n * <div id=\"tooltip-content\" role=\"tooltip\">Tooltip text</div>\n * </hx-popup>\n * ```\n *\n * ## Drupal Integration\n *\n * `hx-popup` is a JS utility — Twig provides markup only. No Drupal behavior file is\n * required for basic usage, since the `anchor` slot and `active` attribute are sufficient.\n *\n * ```twig\n * {# Basic Twig usage — prefer anchor slot in server-rendered contexts #}\n * <hx-popup id=\"my-popup\" placement=\"bottom\" distance=\"8\">\n * <button\n * slot=\"anchor\"\n * aria-expanded=\"false\"\n * aria-controls=\"popup-content\"\n * >Open</button>\n * <div id=\"popup-content\" role=\"dialog\" aria-label=\"Popup content\">...</div>\n * </hx-popup>\n * ```\n *\n * ```js\n * // Drupal behavior for toggle interaction\n * Drupal.behaviors.helixPopup = {\n * attach(context) {\n * context.querySelectorAll('hx-popup').forEach((popup) => {\n * const trigger = popup.querySelector('[slot=\"anchor\"]');\n * if (!trigger) return;\n * trigger.addEventListener('click', () => {\n * popup.active = !popup.active;\n * trigger.setAttribute('aria-expanded', String(popup.active));\n * });\n * });\n * },\n * };\n * ```\n *\n * For Drupal-generated dynamic IDs, prefer the anchor **slot** over the `anchor` CSS selector\n * attribute, since slot-based anchoring does not require knowing the element's ID at render time.\n * If you must use the CSS selector form with dynamic IDs, pass the ID via a Twig variable:\n * ```twig\n * <hx-popup anchor=\"#{{ element['#id'] }}\" placement=\"bottom\">...</hx-popup>\n * ```\n */\n@customElement('hx-popup')\nexport class HelixPopup extends LitElement {\n static override styles = [helixPopupStyles];\n\n /** @internal */\n private _anchorSlotEl: Element | null = null;\n /** @internal */\n private _cleanupAutoUpdate: (() => void) | null = null;\n\n /**\n * The reference element to anchor the popup to.\n *\n * - **Attribute form** (`anchor=\"#selector\"`): Accepts a CSS selector string resolved via\n * `querySelector` from the component's root node. Use this in HTML/Twig markup.\n * - **Property form** (`el.anchor = element`): Accepts an `Element` reference directly.\n * Setting an Element via JS property does NOT reflect to the attribute.\n *\n * If not set, the element in the `anchor` slot is used.\n *\n * @attr anchor\n */\n @property({ attribute: 'anchor' })\n anchor: string | Element | null = null;\n\n /**\n * Preferred placement of the popup relative to the anchor.\n * @attr placement\n */\n @property({ type: String, reflect: true })\n placement:\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'\n | 'auto' = 'bottom';\n\n /**\n * Whether the popup is visible.\n * @attr active\n */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /**\n * Gap in pixels between the popup and the anchor element.\n * @attr distance\n */\n @property({ type: Number, reflect: true })\n distance = 0;\n\n /**\n * Offset in pixels along the anchor element's axis.\n * @attr skidding\n */\n @property({ type: Number, reflect: true })\n skidding = 0;\n\n /**\n * Whether to show an arrow pointing to the anchor element.\n * @attr arrow\n */\n @property({ type: Boolean, reflect: true })\n arrow = false;\n\n /**\n * Manual placement of the arrow along the popup edge.\n * When not set, floating-ui calculates the optimal position.\n * @attr arrow-placement\n */\n @property({ attribute: 'arrow-placement', reflect: true })\n arrowPlacement: 'start' | 'center' | 'end' | null = null;\n\n /**\n * Minimum padding in pixels from the popup edge to the arrow.\n * @attr arrow-padding\n */\n @property({ type: Number, attribute: 'arrow-padding' })\n arrowPadding = 10;\n\n /**\n * When true, flips the popup to the opposite side to avoid overflow.\n * @attr flip\n */\n @property({ type: Boolean, reflect: true })\n flip = false;\n\n /**\n * Fallback placements to try when flipping. Accepts a JSON array string.\n *\n * @example\n * ```html\n * \n * <hx-popup flip flip-fallback-placements='[\"top\",\"left\"]'>...</hx-popup>\n * ```\n *\n * @attr flip-fallback-placements\n */\n @property({\n attribute: 'flip-fallback-placements',\n converter: {\n fromAttribute(value: string | null): PopupPlacement[] {\n if (!value) return [];\n try {\n return JSON.parse(value) as PopupPlacement[];\n } catch {\n return [];\n }\n },\n toAttribute(value: PopupPlacement[]): string {\n return JSON.stringify(value);\n },\n },\n })\n flipFallbackPlacements: (\n | 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'\n | 'auto'\n )[] = [];\n\n /**\n * When true, shifts the popup along the axis to remain in the viewport.\n * @attr shift\n */\n @property({ type: Boolean, reflect: true })\n shift = false;\n\n /**\n * When true, resizes the popup to fit within the viewport.\n * Sets --hx-auto-size-available-width and --hx-auto-size-available-height CSS custom\n * properties on `:host` so they cascade into shadow DOM and are readable from light DOM.\n * @attr auto-size\n */\n @property({ type: Boolean, attribute: 'auto-size', reflect: true })\n autoSize = false;\n\n /**\n * Positioning strategy passed to floating-ui's `computePosition`.\n *\n * - `'fixed'` (default): works for most cases; positions relative to the viewport.\n * - `'absolute'`: use inside `overflow: hidden` / scroll containers where the popup is\n * positioned relative to the nearest positioned ancestor instead of the viewport.\n *\n * @attr strategy\n */\n @property({ reflect: true })\n strategy: 'fixed' | 'absolute' = 'fixed';\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (this.active) {\n void this.updateComplete.then(() => this._startAutoUpdate());\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._stopAutoUpdate();\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n super.updated(changedProperties);\n\n const activeChanged = changedProperties.has('active');\n const positioningChanged =\n changedProperties.has('placement') ||\n changedProperties.has('distance') ||\n changedProperties.has('skidding') ||\n changedProperties.has('arrow') ||\n changedProperties.has('arrowPadding') ||\n changedProperties.has('arrowPlacement') ||\n changedProperties.has('flip') ||\n changedProperties.has('flipFallbackPlacements') ||\n changedProperties.has('shift') ||\n changedProperties.has('autoSize') ||\n changedProperties.has('anchor') ||\n changedProperties.has('strategy');\n\n if (activeChanged) {\n if (this.active) {\n this._startAutoUpdate();\n } else {\n this._stopAutoUpdate();\n // Clean up autoSize custom properties when popup goes inactive\n if (this.autoSize) {\n this.style.removeProperty('--hx-auto-size-available-width');\n this.style.removeProperty('--hx-auto-size-available-height');\n }\n }\n } else if (positioningChanged && this.active) {\n void this._reposition();\n }\n\n // Remove stale autoSize properties when autoSize is disabled\n if (changedProperties.has('autoSize') && !this.autoSize) {\n this.style.removeProperty('--hx-auto-size-available-width');\n this.style.removeProperty('--hx-auto-size-available-height');\n }\n }\n\n // ─── Anchor Resolution ───\n\n /** @internal */\n private _getAnchorElement(): Element | null {\n if (this.anchor instanceof Element) {\n return this.anchor;\n }\n if (typeof this.anchor === 'string') {\n return (this.getRootNode() as Document | ShadowRoot).querySelector(this.anchor);\n }\n return this._anchorSlotEl;\n }\n\n /** @internal */\n private _handleAnchorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const assigned = slot.assignedElements();\n this._anchorSlotEl = assigned[0] ?? null;\n if (this.active) {\n void this._reposition();\n }\n }\n\n // ─── Positioning ───\n\n /** @internal */\n private _startAutoUpdate(): void {\n this._stopAutoUpdate();\n const anchorEl = this._getAnchorElement();\n const popupEl = this.shadowRoot?.querySelector<HTMLElement>('[part=\"popup\"]');\n if (!anchorEl || !popupEl) return;\n\n this._cleanupAutoUpdate = autoUpdate(anchorEl, popupEl, () => {\n void this._reposition();\n });\n }\n\n /** @internal */\n private _stopAutoUpdate(): void {\n this._cleanupAutoUpdate?.();\n this._cleanupAutoUpdate = null;\n }\n\n /** @internal */\n private async _reposition(): Promise<void> {\n const anchorEl = this._getAnchorElement();\n const popupEl = this.shadowRoot?.querySelector<HTMLElement>('[part=\"popup\"]');\n if (!anchorEl || !popupEl) return;\n\n const arrowEl = this.arrow\n ? (this.shadowRoot?.querySelector<HTMLElement>('[part=\"arrow\"]') ?? null)\n : null;\n\n const middleware: Middleware[] = [\n offsetMiddleware({ mainAxis: this.distance, crossAxis: this.skidding }),\n ];\n\n if (this.placement === 'auto') {\n middleware.push(autoPlacementMiddleware());\n } else if (this.flip) {\n middleware.push(\n flipMiddleware({\n fallbackPlacements: this.flipFallbackPlacements as Placement[],\n }),\n );\n }\n\n if (this.shift) {\n middleware.push(shiftMiddleware({ padding: 8 }));\n }\n\n if (arrowEl) {\n middleware.push(arrowMiddleware({ element: arrowEl, padding: this.arrowPadding }));\n }\n\n if (this.autoSize) {\n middleware.push(\n sizeMiddleware({\n apply: ({ availableWidth, availableHeight }) => {\n // Set on :host so the custom properties cascade into shadow DOM and\n // are accessible from light DOM consumers via CSS inheritance.\n this.style.setProperty('--hx-auto-size-available-width', `${availableWidth}px`);\n this.style.setProperty('--hx-auto-size-available-height', `${availableHeight}px`);\n },\n }),\n );\n }\n\n const effectivePlacement: Placement =\n this.placement === 'auto' ? 'bottom' : (this.placement as Placement);\n\n // Set position strategy before computing — inline style takes precedence over CSS\n popupEl.style.position = this.strategy;\n\n const { x, y, placement, middlewareData } = await computePosition(anchorEl, popupEl, {\n placement: effectivePlacement,\n strategy: this.strategy,\n middleware,\n });\n\n Object.assign(popupEl.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n if (arrowEl) {\n const arrowData = middlewareData.arrow as ArrowData | undefined;\n this._positionArrow(arrowEl, placement, arrowData);\n }\n\n this.dispatchEvent(new CustomEvent<void>('hx-reposition', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _positionArrow(\n arrowEl: HTMLElement,\n placement: Placement,\n arrowData: ArrowData | undefined,\n ): void {\n const basePlacement = placement.split('-')[0] as 'top' | 'right' | 'bottom' | 'left';\n const staticSides = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n } as const;\n const staticSide = staticSides[basePlacement];\n\n const arrowStyle: Record<string, string> = {\n left: '',\n top: '',\n right: '',\n bottom: '',\n };\n\n if (this.arrowPlacement === 'start' || this.arrowPlacement === 'end') {\n const isVertical = basePlacement === 'top' || basePlacement === 'bottom';\n if (isVertical) {\n arrowStyle[this.arrowPlacement === 'start' ? 'left' : 'right'] = `${this.arrowPadding}px`;\n } else {\n arrowStyle[this.arrowPlacement === 'start' ? 'top' : 'bottom'] = `${this.arrowPadding}px`;\n }\n } else {\n // 'center' or null: use floating-ui computed position\n if (arrowData?.x != null) arrowStyle.left = `${arrowData.x}px`;\n if (arrowData?.y != null) arrowStyle.top = `${arrowData.y}px`;\n }\n\n arrowStyle[staticSide] = '-4px';\n arrowEl.setAttribute('data-placement', basePlacement);\n Object.assign(arrowEl.style, arrowStyle);\n }\n\n // ─── Public API ───\n\n /**\n * Forces the popup to recalculate its position.\n */\n async reposition(): Promise<void> {\n await this._reposition();\n }\n\n // ─── Render ───\n\n override render() {\n return html`\n <slot name=\"anchor\" @slotchange=${this._handleAnchorSlotChange}></slot>\n <div part=\"popup\" ?inert=${!this.active}>\n <slot></slot>\n ${this.arrow ? html`<div part=\"arrow\"></div>` : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-popup': HelixPopup;\n }\n}\n"],"names":["helixPopupStyles","css","HelixPopup","LitElement","changedProperties","activeChanged","positioningChanged","e","assigned","anchorEl","popupEl","_a","autoUpdate","arrowEl","_b","middleware","offsetMiddleware","autoPlacementMiddleware","flipMiddleware","shiftMiddleware","arrowMiddleware","sizeMiddleware","availableWidth","availableHeight","effectivePlacement","x","y","placement","middlewareData","computePosition","arrowData","basePlacement","staticSide","arrowStyle","html","nothing","__decorateClass","property","value","customElement"],"mappings":"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"}