npm - @helixui/library - Versions diffs - 0.1.0 - Mend

@helixui/library 0.1.0

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

package/dist/shared/hx-avatar-DoHGMrj7.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-avatar-DoHGMrj7.js","sources":["../../src/components/hx-avatar/hx-avatar.styles.ts","../../src/components/hx-avatar/hx-avatar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAvatarStyles = css`\n :host {\n display: inline-block;\n }\n\n /* P2-5: Respect the HTML hidden attribute — custom elements with explicit display ignore it otherwise. */\n :host([hidden]) {\n display: none !important;\n }\n\n /* P0-2: Wrapper provides the positioning context for the badge slot, outside overflow: hidden. */\n .avatar-wrapper {\n position: relative;\n display: inline-flex;\n }\n\n .avatar {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n width: var(--hx-avatar-size);\n height: var(--hx-avatar-size);\n background-color: var(--hx-avatar-bg, var(--hx-color-primary-100));\n color: var(--hx-avatar-color, var(--hx-color-primary-700));\n border-radius: var(--hx-avatar-border-radius);\n flex-shrink: 0;\n }\n\n /* ─── Size Variants ─── */\n\n .avatar--xs {\n --hx-avatar-size: var(--hx-size-6, 1.5rem);\n --hx-avatar-font-size: var(--hx-font-size-2xs, 0.625rem);\n }\n\n .avatar--sm {\n --hx-avatar-size: var(--hx-size-8, 2rem);\n --hx-avatar-font-size: var(--hx-font-size-xs, 0.75rem);\n }\n\n .avatar--md {\n --hx-avatar-size: var(--hx-size-10, 2.5rem);\n --hx-avatar-font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n .avatar--lg {\n --hx-avatar-size: var(--hx-size-12, 3rem);\n --hx-avatar-font-size: var(--hx-font-size-base, 1rem);\n }\n\n .avatar--xl {\n --hx-avatar-size: var(--hx-size-16, 4rem);\n --hx-avatar-font-size: var(--hx-font-size-lg, 1.125rem);\n }\n\n /* ─── Shape Variants ─── */\n\n .avatar--circle {\n --hx-avatar-border-radius: 50%;\n }\n\n .avatar--square {\n --hx-avatar-border-radius: var(--hx-border-radius-md, 0.375rem);\n }\n\n /* ─── Image ─── */\n\n .avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n /* ─── Initials ─── */\n\n .avatar__initials {\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-avatar-font-size);\n font-weight: var(--hx-font-weight-semibold, 600);\n line-height: 1;\n text-transform: uppercase;\n letter-spacing: var(--hx-letter-spacing-wide, 0.025em);\n user-select: none;\n }\n\n /* ─── Fallback Icon ─── */\n\n .avatar__fallback-icon {\n width: 60%;\n height: 60%;\n color: var(--hx-avatar-color, var(--hx-color-primary-700));\n }\n\n /* ─── Badge Slot ─── */\n\n /* P0-2: Positioned relative to .avatar-wrapper — outside the overflow: hidden on .avatar. */\n .avatar__badge {\n position: absolute;\n bottom: 0;\n right: 0;\n }\n\n /* P2-2: Hide the badge wrapper when no slot content is present, preserving slotchange detection. */\n .avatar__badge--hidden {\n display: none;\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixAvatarStyles } from './hx-avatar.styles.js';\n\n/**\n * A user avatar component that displays an image, initials, or a fallback icon.\n * Supports a badge slot for status indicator overlays.\n *\n * @summary User avatar with image, initials, and fallback icon support for healthcare applications.\n *\n * @tag hx-avatar\n *\n * @slot - Default slot for custom avatar content. Overrides src and initials when slotted content is present.\n * @slot badge - Status indicator overlay, positioned at the bottom-right of the avatar container.\n *\n * @csspart avatar - The outer container element.\n * @csspart image - The img element shown when src is provided.\n * @csspart initials - The initials text span shown as a fallback.\n * @csspart fallback-icon - The SVG person silhouette shown when no src or initials are available.\n * @csspart badge - The badge slot container.\n *\n * @cssprop [--hx-avatar-size] - Computed width and height from the size variant.\n * @cssprop [--hx-avatar-border-radius] - Circle = 50%, Square = var(--hx-border-radius-md).\n * @cssprop [--hx-avatar-bg=var(--hx-color-primary-100)] - Background color of the avatar container.\n * @cssprop [--hx-avatar-color=var(--hx-color-primary-700)] - Text and icon color inside the avatar.\n * @cssprop [--hx-avatar-font-size] - Font size for the initials text, set per size variant.\n */\n@customElement('hx-avatar')\nexport class HelixAvatar extends LitElement {\n static override styles = [tokenStyles, helixAvatarStyles];\n\n /**\n * Image URL. When provided and successfully loaded, displays the image.\n * @attr src\n */\n @property({ type: String })\n src: string | undefined = undefined;\n\n /**\n * Accessible label for the image. Required when `src` is provided.\n * Used as the container's aria-label in image mode.\n * @attr alt\n */\n @property({ type: String })\n alt = '';\n\n /**\n * Human-readable accessible name for non-image states (initials, fallback icon).\n * In healthcare contexts, provide the full person name (e.g., \"Dr. Jane Doe\") rather than\n * relying on raw initials, which screen readers announce as individual letters.\n * When set, takes precedence over raw initials and the generic \"Avatar\" fallback.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Fallback initials text displayed when no image is available.\n * @attr initials\n */\n @property({ type: String })\n initials = '';\n\n /**\n * Size variant of the avatar.\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n /**\n * Shape variant of the avatar.\n * @attr shape\n */\n @property({ type: String, reflect: true })\n shape: 'circle' | 'square' = 'circle';\n\n /**\n * Tracks whether the image failed to load, triggering the fallback chain.\n */\n @state()\n private _imgError = false;\n\n /**\n * Tracks whether the default slot has assigned content.\n */\n @state()\n private _hasDefaultSlot = false;\n\n /**\n * Tracks whether the badge slot has assigned content.\n */\n @state()\n private _hasBadgeSlot = false;\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: PropertyValues): void {\n // P0-1: Reset image error state when src changes so a new valid src renders correctly.\n if (changedProperties.has('src')) {\n this._imgError = false;\n }\n\n // P1-2: Warn when src is provided without alt — silent accessibility failure in healthcare UIs.\n if (changedProperties.has('src') || changedProperties.has('alt')) {\n if (this.src && !this.alt) {\n console.warn(\n '[hx-avatar] Accessibility: \"alt\" attribute is required when \"src\" is provided. ' +\n 'Without alt text, screen readers announce a non-descriptive label. ' +\n 'Add alt=\"Full name or description\" to your hx-avatar element.',\n );\n }\n }\n\n // P2-1: Warn when invalid size or shape attribute values are used (e.g., from Twig templates).\n const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n if (changedProperties.has('size') && !validSizes.includes(this.size)) {\n console.warn(\n `[hx-avatar] Invalid hx-size=\"${String(this.size)}\". Valid values: xs, sm, md, lg, xl. Rendering with \"md\".`,\n );\n }\n const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n if (changedProperties.has('shape') && !validShapes.includes(this.shape)) {\n console.warn(\n `[hx-avatar] Invalid shape=\"${String(this.shape)}\". Valid values: circle, square. Rendering with \"circle\".`,\n );\n }\n }\n\n // ─── Slot Change Handling ───\n\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasDefaultSlot = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) return true;\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent ?? '').trim().length > 0;\n }\n return false;\n });\n }\n\n private _handleBadgeSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasBadgeSlot = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) return true;\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent ?? '').trim().length > 0;\n }\n return false;\n });\n }\n\n // ─── Image Error Handling ───\n\n private _handleImgError(): void {\n this._imgError = true;\n }\n\n // ─── Fallback Icon ───\n\n private _renderFallbackIcon() {\n return html`\n <svg\n part=\"fallback-icon\"\n class=\"avatar__fallback-icon\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n >\n <path\n d=\"M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z\"\n />\n </svg>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n const src = this.src;\n const showSlot = this._hasDefaultSlot;\n const showImage = !showSlot && !!src && !this._imgError;\n const showInitials = !showSlot && !showImage && !!this.initials.trim();\n const showFallback = !showSlot && !showImage && !showInitials;\n\n // P1-1 / P1-7: Use label property for human-readable accessible name in non-image states.\n const ariaLabel = showImage\n ? this.alt || this.label || 'Avatar'\n : showInitials\n ? this.label || this.initials\n : this.label || 'Avatar';\n\n // P2-1: Safe class fallback for invalid attribute values supplied via HTML/Twig.\n const validSizes: ReadonlyArray<string> = ['xs', 'sm', 'md', 'lg', 'xl'];\n const validShapes: ReadonlyArray<string> = ['circle', 'square'];\n const sizeClass = validSizes.includes(this.size) ? this.size : 'md';\n const shapeClass = validShapes.includes(this.shape) ? this.shape : 'circle';\n\n const classes = {\n avatar: true,\n [`avatar--${sizeClass}`]: true,\n [`avatar--${shapeClass}`]: true,\n };\n\n // P2-2: Badge wrapper is hidden (not removed) when empty so slotchange detection still works.\n const badgeClasses = {\n avatar__badge: true,\n 'avatar__badge--hidden': !this._hasBadgeSlot,\n };\n\n return html`\n <div class=\"avatar-wrapper\">\n <div\n part=\"avatar\"\n class=${classMap(classes)}\n role=${showSlot ? nothing : 'img'}\n aria-label=${showSlot ? nothing : ariaLabel}\n >\n <slot @slotchange=${this._handleSlotChange}></slot>\n ${showImage && src\n ? html`<img\n part=\"image\"\n class=\"avatar__image\"\n src=${src}\n alt=${this.alt}\n aria-hidden=\"true\"\n loading=\"lazy\"\n @error=${this._handleImgError}\n />`\n : nothing}\n ${showInitials\n ? html`<span part=\"initials\" class=\"avatar__initials\">${this.initials.trim()}</span>`\n : nothing}\n ${showFallback ? this._renderFallbackIcon() : nothing}\n </div>\n <span part=\"badge\" class=${classMap(badgeClasses)}>\n <slot name=\"badge\" @slotchange=${this._handleBadgeSlotChange}></slot>\n </span>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-avatar': HelixAvatar;\n }\n}\n"],"names":["helixAvatarStyles","css","HelixAvatar","LitElement","changedProperties","validSizes","validShapes","e","nodes","node","html","src","showSlot","showImage","showInitials","showFallback","ariaLabel","sizeClass","shapeClass","classes","badgeClasses","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-badge-BeCmOPr1.js ADDED Viewed

@@ -0,0 +1,255 @@
+import { css as g, LitElement as c, nothing as n, html as b } from "lit";
+import { property as o, state as p, customElement as x } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { t as v } from "./lit-Dpo7RLp4.js";
+const f = g`
+  :host {
+    display: inline-block;
+  }
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--hx-space-1, 0.25rem);
+    border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-badge-color, var(--hx-color-neutral-0, #ffffff));
+    font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));
+    font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));
+    line-height: var(--hx-line-height-tight, 1.25);
+    white-space: nowrap;
+    vertical-align: middle;
+    position: relative;
+  }
+  /* ─── Size Variants ─── */
+  .badge--sm {
+    font-size: var(--hx-badge-font-size, var(--hx-font-size-2xs, 0.625rem));
+    padding: var(--hx-badge-padding-y, var(--hx-space-0-5, 0.125rem))
+      var(--hx-badge-padding-x, var(--hx-space-1-5, 0.375rem));
+  }
+  .badge--md {
+    font-size: var(--hx-badge-font-size, var(--hx-font-size-xs, 0.75rem));
+    padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))
+      var(--hx-badge-padding-x, var(--hx-space-2, 0.5rem));
+  }
+  .badge--lg {
+    font-size: var(--hx-badge-font-size, var(--hx-font-size-sm, 0.875rem));
+    padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))
+      var(--hx-badge-padding-x, var(--hx-space-3, 0.75rem));
+  }
+  /* ─── Style Variants ─── */
+  .badge--primary {
+    --hx-badge-bg: var(--hx-color-primary-500, #2563eb);
+    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-pulse-color: var(--hx-color-primary-500, #2563eb);
+  }
+  .badge--secondary {
+    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));
+    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #374151));
+    --hx-badge-pulse-color: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));
+  }
+  .badge--success {
+    --hx-badge-bg: var(--hx-color-success-700, #15803d);
+    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-pulse-color: var(--hx-color-success-700, #15803d);
+  }
+  .badge--warning {
+    --hx-badge-bg: var(--hx-color-warning-500, #eab308);
+    --hx-badge-color: var(--hx-color-neutral-900, #1a1a1a);
+    --hx-badge-pulse-color: var(--hx-color-warning-500, #eab308);
+  }
+  .badge--error {
+    --hx-badge-bg: var(--hx-color-error-500, #dc2626);
+    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-pulse-color: var(--hx-color-error-500, #dc2626);
+  }
+  .badge--neutral {
+    --hx-badge-bg: var(--hx-color-neutral-200, #e5e7eb);
+    --hx-badge-color: var(--hx-color-neutral-700, #374151);
+    --hx-badge-pulse-color: var(--hx-color-neutral-200, #e5e7eb);
+  }
+  .badge--info {
+    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));
+    --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));
+    --hx-badge-pulse-color: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));
+  }
+  /* ─── Pill Mode ─── */
+  .badge--pill {
+    border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-full, 9999px));
+  }
+  /* ─── Dot Indicator (empty + pulse) ─── */
+  .badge--dot {
+    width: var(--hx-badge-dot-size, var(--hx-size-2, 0.5rem));
+    height: var(--hx-badge-dot-size, var(--hx-size-2, 0.5rem));
+    padding: 0;
+    border-radius: var(--hx-border-radius-full, 9999px);
+  }
+  /* ─── Pulse Animation ─── */
+  @keyframes wc-badge-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+  .badge--pulse {
+    animation: wc-badge-pulse var(--hx-badge-pulse-duration, var(--hx-duration-slow, 2s))
+      var(--hx-badge-pulse-easing, var(--hx-ease-in-out, ease-in-out)) infinite;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .badge--pulse {
+      animation: none;
+    }
+  }
+  /* ─── Remove Button ─── */
+  .badge__remove-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    padding: 0;
+    margin-inline-start: var(--hx-space-1, 0.25rem);
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+    border-radius: var(--hx-border-radius-sm, 0.125rem);
+    line-height: 0;
+  }
+  .badge__remove-button:hover {
+    opacity: 1;
+  }
+  .badge__remove-button:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);
+    outline-offset: var(--hx-focus-ring-offset, 1px);
+  }
+`;
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, a, s, i) => {
+  for (var l = i > 1 ? void 0 : i ? y(a, s) : a, d = t.length - 1, h; d >= 0; d--)
+    (h = t[d]) && (l = (i ? h(a, s, l) : h(l)) || l);
+  return i && l && m(a, s, l), l;
+};
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.size = "md", this.pill = !1, this.pulse = !1, this.removable = !1, this.count = void 0, this.max = 99, this.dotLabel = "", this.removeLabel = "Remove", this._hasSlotContent = !1;
+  }
+  // ─── Slot Change Handling ───
+  _handleSlotChange(t) {
+    const s = t.target.assignedNodes({ flatten: !0 });
+    this._hasSlotContent = s.some((i) => i.nodeType === Node.ELEMENT_NODE ? !0 : i.nodeType === Node.TEXT_NODE ? (i.textContent ?? "").trim().length > 0 : !1);
+  }
+  // ─── Event Handling ───
+  _handleRemove() {
+    this.dispatchEvent(
+      new CustomEvent("hx-remove", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  // ─── Count Display ───
+  get _countDisplay() {
+    return this.count === void 0 ? "" : this.count > this.max ? `${this.max}+` : String(this.count);
+  }
+  // ─── Render ───
+  render() {
+    const t = this.count !== void 0, a = !this._hasSlotContent && !t && this.pulse, s = {
+      badge: !0,
+      [`badge--${this.variant}`]: !0,
+      [`badge--${this.size}`]: !0,
+      "badge--pill": this.pill,
+      "badge--pulse": this.pulse,
+      "badge--dot": a
+    };
+    return b`
+      <span
+        part="badge"
+        class=${u(s)}
+        role=${a && this.dotLabel ? "img" : n}
+        aria-label=${a && this.dotLabel ? this.dotLabel : n}
+        aria-live=${t ? "polite" : n}
+      >
+        <slot name="prefix"></slot>
+        ${t ? this._countDisplay : b`<slot @slotchange=${this._handleSlotChange}></slot>`}
+        ${this.removable ? b`<button
+              part="remove-button"
+              class="badge__remove-button"
+              aria-label=${this.removeLabel}
+              @click=${this._handleRemove}
+            >
+              <svg viewBox="0 0 12 12" aria-hidden="true" width="10" height="10">
+                <path
+                  d="M2.22 2.22a.75.75 0 011.06 0L6 4.94l2.72-2.72a.75.75 0 011.06 1.06L7.06 6l2.72 2.72a.75.75 0 01-1.06 1.06L6 7.06 3.28 9.78a.75.75 0 01-1.06-1.06L4.94 6 2.22 3.28a.75.75 0 010-1.06z"
+                  fill="currentColor"
+                />
+              </svg>
+            </button>` : n}
+      </span>
+    `;
+  }
+};
+e.styles = [v, f];
+r([
+  o({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+r([
+  o({ type: String, reflect: !0 })
+], e.prototype, "size", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "pill", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "pulse", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "removable", 2);
+r([
+  o({ type: Number, reflect: !0 })
+], e.prototype, "count", 2);
+r([
+  o({ type: Number, reflect: !0 })
+], e.prototype, "max", 2);
+r([
+  o({ type: String, attribute: "dot-label" })
+], e.prototype, "dotLabel", 2);
+r([
+  o({ type: String, attribute: "remove-label" })
+], e.prototype, "removeLabel", 2);
+r([
+  p()
+], e.prototype, "_hasSlotContent", 2);
+e = r([
+  x("hx-badge")
+], e);
+export {
+  e as H
+};
+//# sourceMappingURL=hx-badge-BeCmOPr1.js.map

package/dist/shared/hx-badge-BeCmOPr1.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-badge-BeCmOPr1.js","sources":["../../src/components/hx-badge/hx-badge.styles.ts","../../src/components/hx-badge/hx-badge.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixBadgeStyles = css`\n :host {\n display: inline-block;\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--hx-space-1, 0.25rem);\n border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));\n background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #2563eb));\n color: var(--hx-badge-color, var(--hx-color-neutral-0, #ffffff));\n font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));\n font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));\n line-height: var(--hx-line-height-tight, 1.25);\n white-space: nowrap;\n vertical-align: middle;\n position: relative;\n }\n\n /* ─── Size Variants ─── */\n\n .badge--sm {\n font-size: var(--hx-badge-font-size, var(--hx-font-size-2xs, 0.625rem));\n padding: var(--hx-badge-padding-y, var(--hx-space-0-5, 0.125rem))\n var(--hx-badge-padding-x, var(--hx-space-1-5, 0.375rem));\n }\n\n .badge--md {\n font-size: var(--hx-badge-font-size, var(--hx-font-size-xs, 0.75rem));\n padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))\n var(--hx-badge-padding-x, var(--hx-space-2, 0.5rem));\n }\n\n .badge--lg {\n font-size: var(--hx-badge-font-size, var(--hx-font-size-sm, 0.875rem));\n padding: var(--hx-badge-padding-y, var(--hx-space-1, 0.25rem))\n var(--hx-badge-padding-x, var(--hx-space-3, 0.75rem));\n }\n\n /* ─── Style Variants ─── */\n\n .badge--primary {\n --hx-badge-bg: var(--hx-color-primary-500, #2563eb);\n --hx-badge-color: var(--hx-color-neutral-0, #ffffff);\n --hx-badge-pulse-color: var(--hx-color-primary-500, #2563eb);\n }\n\n .badge--secondary {\n --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));\n --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #374151));\n --hx-badge-pulse-color: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));\n }\n\n .badge--success {\n --hx-badge-bg: var(--hx-color-success-700, #15803d);\n --hx-badge-color: var(--hx-color-neutral-0, #ffffff);\n --hx-badge-pulse-color: var(--hx-color-success-700, #15803d);\n }\n\n .badge--warning {\n --hx-badge-bg: var(--hx-color-warning-500, #eab308);\n --hx-badge-color: var(--hx-color-neutral-900, #1a1a1a);\n --hx-badge-pulse-color: var(--hx-color-warning-500, #eab308);\n }\n\n .badge--error {\n --hx-badge-bg: var(--hx-color-error-500, #dc2626);\n --hx-badge-color: var(--hx-color-neutral-0, #ffffff);\n --hx-badge-pulse-color: var(--hx-color-error-500, #dc2626);\n }\n\n .badge--neutral {\n --hx-badge-bg: var(--hx-color-neutral-200, #e5e7eb);\n --hx-badge-color: var(--hx-color-neutral-700, #374151);\n --hx-badge-pulse-color: var(--hx-color-neutral-200, #e5e7eb);\n }\n\n .badge--info {\n --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));\n --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));\n --hx-badge-pulse-color: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));\n }\n\n /* ─── Pill Mode ─── */\n\n .badge--pill {\n border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-full, 9999px));\n }\n\n /* ─── Dot Indicator (empty + pulse) ─── */\n\n .badge--dot {\n width: var(--hx-badge-dot-size, var(--hx-size-2, 0.5rem));\n height: var(--hx-badge-dot-size, var(--hx-size-2, 0.5rem));\n padding: 0;\n border-radius: var(--hx-border-radius-full, 9999px);\n }\n\n /* ─── Pulse Animation ─── */\n\n @keyframes wc-badge-pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n }\n\n .badge--pulse {\n animation: wc-badge-pulse var(--hx-badge-pulse-duration, var(--hx-duration-slow, 2s))\n var(--hx-badge-pulse-easing, var(--hx-ease-in-out, ease-in-out)) infinite;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .badge--pulse {\n animation: none;\n }\n }\n\n /* ─── Remove Button ─── */\n\n .badge__remove-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n padding: 0;\n margin-inline-start: var(--hx-space-1, 0.25rem);\n cursor: pointer;\n color: inherit;\n opacity: 0.7;\n border-radius: var(--hx-border-radius-sm, 0.125rem);\n line-height: 0;\n }\n\n .badge__remove-button:hover {\n opacity: 1;\n }\n\n .badge__remove-button:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);\n outline-offset: var(--hx-focus-ring-offset, 1px);\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixBadgeStyles } from './hx-badge.styles.js';\n\n/**\n * A small status indicator for notifications, counts, and labels.\n *\n * @summary Presentational badge for status indicators, notification counts, and labels.\n *\n * @tag hx-badge\n *\n * @slot - Default slot for badge content (text, number). When empty with pulse enabled, renders as a dot indicator.\n * @slot prefix - Icon or content rendered before the badge text.\n *\n * @fires {CustomEvent<void>} hx-remove - Dispatched when the user clicks the remove button.\n *\n * @csspart badge - The badge element.\n * @csspart remove-button - The remove/dismiss button.\n *\n * @cssprop [--hx-badge-bg=var(--hx-color-primary-500)] - Badge background color. The primary override point.\n * @cssprop [--hx-badge-color=var(--hx-color-neutral-0)] - Badge text color. The primary override point.\n * @cssprop [--hx-badge-font-size] - Badge font size (set per size variant).\n * @cssprop [--hx-badge-font-weight=var(--hx-font-weight-semibold)] - Badge font weight.\n * @cssprop [--hx-badge-font-family=var(--hx-font-family-sans)] - Badge font family.\n * @cssprop [--hx-badge-border-radius=var(--hx-border-radius-md)] - Badge border radius.\n * @cssprop [--hx-badge-padding-x] - Badge horizontal padding (set per size variant).\n * @cssprop [--hx-badge-padding-y] - Badge vertical padding (set per size variant).\n * @cssprop [--hx-badge-pulse-color] - Pulse color matching variant background with reduced opacity.\n * @cssprop [--hx-badge-dot-size=var(--hx-size-2)] - Dot indicator size when rendered without content.\n * @cssprop [--hx-badge-secondary-bg=var(--hx-color-neutral-100)] - Background for the secondary variant.\n * @cssprop [--hx-badge-secondary-color=var(--hx-color-neutral-700)] - Text color for the secondary variant.\n * @cssprop [--hx-badge-info-bg=var(--hx-color-info-700)] - Background for the info variant.\n * @cssprop [--hx-badge-info-color=var(--hx-color-neutral-0)] - Text color for the info variant.\n */\n@customElement('hx-badge')\nexport class HelixBadge extends LitElement {\n static override styles = [tokenStyles, helixBadgeStyles];\n\n /**\n * Visual style variant of the badge.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral' | 'info' =\n 'primary';\n\n /**\n * Size of the badge.\n * @attr size\n */\n @property({ type: String, reflect: true })\n size: 'sm' | 'md' | 'lg' = 'md';\n\n /**\n * Whether the badge uses fully rounded (pill) styling.\n * @attr pill\n */\n @property({ type: Boolean, reflect: true })\n pill = false;\n\n /**\n * Whether the badge displays an animated pulse for attention.\n * @attr pulse\n */\n @property({ type: Boolean, reflect: true })\n pulse = false;\n\n /**\n * Whether the badge renders a dismiss button.\n * @attr removable\n */\n @property({ type: Boolean, reflect: true })\n removable = false;\n\n /**\n * Numeric count to display. When set, renders the count as badge content.\n * When count exceeds `max`, displays `${max}+` (e.g. `99+`).\n * @attr count\n */\n @property({ type: Number, reflect: true })\n count: number | undefined = undefined;\n\n /**\n * Maximum count value before truncation to `${max}+`. Defaults to 99.\n * @attr max\n */\n @property({ type: Number, reflect: true })\n max = 99;\n\n /**\n * Accessible label for the dot indicator mode (pulse + empty slot).\n * Required for WCAG 4.1.2 compliance when using the dot indicator pattern.\n * Example: `dot-label=\"3 new messages\"`.\n * @attr dot-label\n */\n @property({ type: String, attribute: 'dot-label' })\n dotLabel = '';\n\n /**\n * Accessible label for the remove button. Should describe what is being removed.\n * Defaults to \"Remove\". For better accessibility, include context: e.g. \"Remove Critical badge\".\n * @attr remove-label\n */\n @property({ type: String, attribute: 'remove-label' })\n removeLabel = 'Remove';\n\n /**\n * Tracks whether the default slot has assigned content.\n */\n @state()\n private _hasSlotContent = false;\n\n // ─── Slot Change Handling ───\n\n private _handleSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n const nodes = slot.assignedNodes({ flatten: true });\n // Check if any assigned node has non-whitespace content\n this._hasSlotContent = nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) return true;\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent ?? '').trim().length > 0;\n }\n return false;\n });\n }\n\n // ─── Event Handling ───\n\n private _handleRemove(): void {\n this.dispatchEvent(\n new CustomEvent('hx-remove', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // ─── Count Display ───\n\n private get _countDisplay(): string {\n if (this.count === undefined) return '';\n return this.count > this.max ? `${this.max}+` : String(this.count);\n }\n\n // ─── Render ───\n\n override render() {\n const hasCount = this.count !== undefined;\n const isDot = !this._hasSlotContent && !hasCount && this.pulse;\n\n const classes = {\n badge: true,\n [`badge--${this.variant}`]: true,\n [`badge--${this.size}`]: true,\n 'badge--pill': this.pill,\n 'badge--pulse': this.pulse,\n 'badge--dot': isDot,\n };\n\n return html`\n <span\n part=\"badge\"\n class=${classMap(classes)}\n role=${isDot && this.dotLabel ? 'img' : nothing}\n aria-label=${isDot && this.dotLabel ? this.dotLabel : nothing}\n aria-live=${hasCount ? 'polite' : nothing}\n >\n <slot name=\"prefix\"></slot>\n ${hasCount ? this._countDisplay : html`<slot @slotchange=${this._handleSlotChange}></slot>`}\n ${this.removable\n ? html`<button\n part=\"remove-button\"\n class=\"badge__remove-button\"\n aria-label=${this.removeLabel}\n @click=${this._handleRemove}\n >\n <svg viewBox=\"0 0 12 12\" aria-hidden=\"true\" width=\"10\" height=\"10\">\n <path\n d=\"M2.22 2.22a.75.75 0 011.06 0L6 4.94l2.72-2.72a.75.75 0 011.06 1.06L7.06 6l2.72 2.72a.75.75 0 01-1.06 1.06L6 7.06 3.28 9.78a.75.75 0 01-1.06-1.06L4.94 6 2.22 3.28a.75.75 0 010-1.06z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>`\n : nothing}\n </span>\n `;\n }\n}\n\nexport type WcBadge = HelixBadge;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-badge': HelixBadge;\n }\n}\n"],"names":["helixBadgeStyles","css","HelixBadge","LitElement","e","nodes","node","hasCount","isDot","classes","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-breadcrumb-item-BSBMWQHz.js ADDED Viewed

@@ -0,0 +1,309 @@
+import { css as m, LitElement as u, html as d, nothing as x } from "lit";
+import { property as l, customElement as b } from "lit/decorators.js";
+import { t as f } from "./lit-Dpo7RLp4.js";
+const _ = m`
+  :host {
+    display: block;
+    font-family: var(
+      --hx-breadcrumb-font-family,
+      var(--hx-font-family-sans, system-ui, sans-serif)
+    );
+    font-size: var(--hx-breadcrumb-font-size, var(--hx-font-size-sm, 0.875rem));
+  }
+  [part='nav'] {
+    /* nav landmark — no additional styling needed */
+  }
+  [part='list'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 0;
+  }
+  /* Hide middle items when collapsed via maxItems */
+  ::slotted([data-bc-hidden]) {
+    display: none;
+  }
+  /* Visually hide the separator slot — used only to read text content.
+   * display:none is intentional: the slot contains no interactive or focusable
+   * content. If a future change adds focusable elements to this slot, switch to
+   * visibility:hidden + position:absolute to preserve focus reachability. */
+  .separator-slot {
+    display: none;
+  }
+`;
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, h = (e, s, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? y(s, t) : s, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (r = (i ? n(s, t, r) : n(r)) || r);
+  return i && r && v(s, t, r), r;
+};
+let o = class extends u {
+  constructor() {
+    super(...arguments), this.separator = "/", this.label = "Breadcrumb", this.maxItems = 0, this.jsonLd = !1, this._ellipsisItem = null, this._jsonLdScript = null, this._boundEllipsisClick = () => {
+    }, this._boundEllipsisKeydown = () => {
+    }, this._managedCurrentItems = /* @__PURE__ */ new WeakSet(), this._jsonLdId = `hx-breadcrumb-ld-${++o._instanceCounter}`;
+  }
+  // ─── Item Helpers ───
+  /** Returns only real breadcrumb items, excluding the managed ellipsis element. */
+  _getBreadcrumbItems(e) {
+    return e.assignedElements({ flatten: !0 }).filter(
+      (s) => s.tagName.toLowerCase() === "hx-breadcrumb-item" && !s.classList.contains("hx-bc-ellipsis")
+    );
+  }
+  /**
+   * Applies aria/state attributes to the item list.
+   *
+   * Current-page detection: if any item has an explicit `current` attribute
+   * (e.g. set by a Drupal Twig template), that item is treated as the current
+   * page. Otherwise the last item is the current page (default behaviour).
+   *
+   * This separation allows Drupal to control current-page marking without
+   * relying on item order.
+   */
+  _applyItemAttributes(e) {
+    const s = e.some(
+      (t) => t.hasAttribute("current") && !this._managedCurrentItems.has(t)
+    );
+    e.forEach((t, i) => {
+      const r = t, a = i === e.length - 1;
+      a ? r.setAttribute("data-bc-last", "") : r.removeAttribute("data-bc-last"), s || (a ? (r.setAttribute("current", ""), this._managedCurrentItems.add(r)) : (r.removeAttribute("current"), this._managedCurrentItems.delete(r)));
+    });
+  }
+  // ─── Slot Handling ───
+  _handleSlotChange(e) {
+    const s = e.target, t = this._getBreadcrumbItems(s);
+    this.maxItems > 0 && t.length > this.maxItems ? this._applyCollapse(t) : this._removeCollapse(t), this._applyItemAttributes(t), this.jsonLd && this._updateJsonLd(t);
+  }
+  _handleSeparatorSlotChange(e) {
+    var i;
+    const t = e.target.assignedElements({ flatten: !0 });
+    if (t.length > 0) {
+      const r = ((i = t[0].textContent) == null ? void 0 : i.trim()) ?? "";
+      this.style.setProperty("--hx-breadcrumb-separator-content", JSON.stringify(r));
+    }
+  }
+  // ─── Collapse ───
+  _applyCollapse(e) {
+    if (e.forEach((t, i) => {
+      const r = t;
+      i === 0 || i === e.length - 1 ? r.removeAttribute("data-bc-hidden") : r.setAttribute("data-bc-hidden", "");
+    }), !this._ellipsisItem) {
+      const t = document.createElement("hx-breadcrumb-item");
+      t.classList.add("hx-bc-ellipsis");
+      const i = document.createElement("button");
+      i.type = "button", i.textContent = "…", i.setAttribute("aria-label", "Show all breadcrumb items"), t.appendChild(i), this._ellipsisItem = t;
+    }
+    const s = e[0];
+    s && this._ellipsisItem.previousElementSibling !== s && s.after(this._ellipsisItem);
+  }
+  _removeCollapse(e) {
+    var s;
+    e.forEach((t) => {
+      t.removeAttribute("data-bc-hidden");
+    }), (s = this._ellipsisItem) != null && s.isConnected && this._ellipsisItem.remove();
+  }
+  _handleEllipsisClick(e) {
+    var s, t;
+    (t = (s = e.target) == null ? void 0 : s.closest) != null && t.call(s, ".hx-bc-ellipsis") && this._expandBreadcrumb();
+  }
+  _handleEllipsisKeydown(e) {
+    var s, t;
+    (e.key === "Enter" || e.key === " ") && (t = (s = e.target) == null ? void 0 : s.closest) != null && t.call(s, ".hx-bc-ellipsis") && (e.preventDefault(), this._expandBreadcrumb());
+  }
+  /**
+   * Expands a collapsed breadcrumb by resetting maxItems to 0.
+   * Called by the ellipsis expand button (click or Enter/Space).
+   */
+  _expandBreadcrumb() {
+    this.maxItems = 0;
+  }
+  // ─── JSON-LD ───
+  /**
+   * JSON-LD ListItem entry with typed fields to avoid Record<string, unknown>.
+   */
+  _buildListItem(e, s) {
+    var a;
+    const t = e.getAttribute("href"), i = ((a = e.textContent) == null ? void 0 : a.trim()) ?? "", r = {
+      "@type": "ListItem",
+      position: s,
+      name: i
+    };
+    return t && (r.item = t), r;
+  }
+  _updateJsonLd(e) {
+    var t;
+    const s = {
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      itemListElement: e.map((i, r) => this._buildListItem(i, r + 1))
+    };
+    this._jsonLdScript || ((t = document.getElementById(this._jsonLdId)) == null || t.remove(), this._jsonLdScript = document.createElement("script"), this._jsonLdScript.type = "application/ld+json", this._jsonLdScript.id = this._jsonLdId, this._jsonLdScript.setAttribute("data-hx-breadcrumb", ""), document.head.appendChild(this._jsonLdScript)), this._jsonLdScript.textContent = JSON.stringify(s);
+  }
+  _removeJsonLd() {
+    var e;
+    (e = this._jsonLdScript) == null || e.remove(), this._jsonLdScript = null;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this._boundEllipsisClick = this._handleEllipsisClick.bind(this), this._boundEllipsisKeydown = this._handleEllipsisKeydown.bind(this), this.addEventListener("click", this._boundEllipsisClick), this.addEventListener("keydown", this._boundEllipsisKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this._boundEllipsisClick), this.removeEventListener("keydown", this._boundEllipsisKeydown), this._removeJsonLd();
+  }
+  updated(e) {
+    var s, t;
+    if (super.updated(e), e.has("separator") && this.style.setProperty("--hx-breadcrumb-separator-content", JSON.stringify(this.separator)), e.has("maxItems")) {
+      const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot:not([name])");
+      if (i) {
+        const r = this._getBreadcrumbItems(i);
+        this.maxItems > 0 && r.length > this.maxItems ? this._applyCollapse(r) : this._removeCollapse(r), this._applyItemAttributes(r);
+      }
+    }
+    if (e.has("jsonLd"))
+      if (this.jsonLd) {
+        const i = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot:not([name])");
+        i && this._updateJsonLd(this._getBreadcrumbItems(i));
+      } else
+        this._removeJsonLd();
+  }
+  // ─── Render ───
+  render() {
+    return d`
+      <nav part="nav" aria-label=${this.label}>
+        <ol part="list">
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </ol>
+      </nav>
+      <slot
+        name="separator"
+        class="separator-slot"
+        @slotchange=${this._handleSeparatorSlotChange}
+      ></slot>
+    `;
+  }
+};
+o.styles = [f, _];
+o._instanceCounter = 0;
+h([
+  l({ type: String })
+], o.prototype, "separator", 2);
+h([
+  l({ type: String })
+], o.prototype, "label", 2);
+h([
+  l({ type: Number, attribute: "max-items" })
+], o.prototype, "maxItems", 2);
+h([
+  l({ type: Boolean, attribute: "json-ld" })
+], o.prototype, "jsonLd", 2);
+o = h([
+  b("hx-breadcrumb")
+], o);
+const g = m`
+  :host {
+    display: inline-flex;
+    align-items: center;
+  }
+  [part='item'] {
+    display: contents;
+  }
+  [part='link'] {
+    color: var(--hx-breadcrumb-link-color, var(--hx-color-primary-600));
+    text-decoration: none;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    max-width: var(--hx-breadcrumb-item-max-width);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [part='link']:hover {
+    color: var(--hx-breadcrumb-link-hover-color, var(--hx-color-primary-700));
+    text-decoration: underline;
+  }
+  [part='link']:focus-visible {
+    outline: 2px solid var(--hx-focus-ring-color, var(--hx-color-primary-500));
+    outline-offset: 2px;
+    border-radius: var(--hx-border-radius-sm, 0.125rem);
+  }
+  [part='text'] {
+    color: var(--hx-breadcrumb-text-color, var(--hx-color-neutral-700));
+    font-family: inherit;
+    font-size: inherit;
+    max-width: var(--hx-breadcrumb-item-max-width);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .separator {
+    margin-inline: var(--hx-breadcrumb-separator-gap, var(--hx-space-1, 0.25rem));
+    color: var(--hx-breadcrumb-separator-color, var(--hx-color-neutral-400));
+    user-select: none;
+  }
+  .separator::before {
+    content: var(--hx-breadcrumb-separator-content, '/');
+  }
+  /* Normalize buttons slotted into breadcrumb items (e.g. the expand-ellipsis button). */
+  ::slotted(button) {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font: inherit;
+    color: inherit;
+    padding: 0;
+  }
+`;
+var L = Object.defineProperty, C = Object.getOwnPropertyDescriptor, p = (e, s, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? C(s, t) : s, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (r = (i ? n(s, t, r) : n(r)) || r);
+  return i && r && L(s, t, r), r;
+};
+let c = class extends u {
+  constructor() {
+    super(...arguments), this.href = void 0, this.dataBcLast = !1, this.current = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.closest("hx-breadcrumb") !== null ? this.setAttribute("role", "listitem") : this.removeAttribute("role");
+  }
+  render() {
+    return d`
+      <span part="item">
+        ${this.current ? d`<span part="text" aria-current="page"><slot></slot></span>` : this.href ? d`<a part="link" href=${this.href}><slot></slot></a>` : d`<span part="text"><slot></slot></span>`}
+      </span>
+      ${this.dataBcLast ? x : d`<span class="separator" part="separator" aria-hidden="true"></span>`}
+    `;
+  }
+};
+c.styles = [f, g];
+p([
+  l({ type: String, reflect: !0 })
+], c.prototype, "href", 2);
+p([
+  l({ type: Boolean, attribute: "data-bc-last", reflect: !0 })
+], c.prototype, "dataBcLast", 2);
+p([
+  l({ type: Boolean, reflect: !0 })
+], c.prototype, "current", 2);
+c = p([
+  b("hx-breadcrumb-item")
+], c);
+export {
+  o as H,
+  c as a
+};
+//# sourceMappingURL=hx-breadcrumb-item-BSBMWQHz.js.map