@helixui/library 0.1.0

package/dist/shared/hx-split-panel-C9Sy7XVW.js

@@ -0,0 +1,351 @@
+import { css as c, LitElement as u, nothing as d, html as h } from "lit";
+import { property as r, customElement as v } from "lit/decorators.js";
+import { t as f } from "./lit-Dpo7RLp4.js";
+const b = c`
+  :host {
+    display: flex;
+    --_divider-size: var(--hx-split-panel-divider-size, 4px);
+    --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-neutral-200));
+    --_divider-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));
+    overflow: hidden;
+  }
+
+  :host([orientation='horizontal']) {
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+
+  .panel {
+    overflow: auto;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .panel--start {
+    flex-shrink: 0;
+  }
+
+  .panel--end {
+    flex: 1;
+  }
+
+  :host([orientation='horizontal']) .panel--start {
+    height: 100%;
+  }
+
+  :host([orientation='vertical']) .panel--start {
+    width: 100%;
+  }
+
+  /* ─── Divider Track (flex child wrapper) ─── */
+
+  .divider-track {
+    flex-shrink: 0;
+    position: relative;
+    overflow: visible;
+    display: flex;
+    align-items: stretch;
+  }
+
+  :host([orientation='horizontal']) .divider-track {
+    width: var(--_divider-size);
+    height: 100%;
+  }
+
+  :host([orientation='vertical']) .divider-track {
+    width: 100%;
+    height: var(--_divider-size);
+  }
+
+  /* ─── Divider (separator role — no interactive children) ─── */
+
+  .divider {
+    flex: 1;
+    background-color: var(--_divider-color);
+    cursor: col-resize;
+    transition: background-color 0.15s ease;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-select: none;
+    outline: none;
+  }
+
+  :host([orientation='horizontal']) .divider {
+    cursor: col-resize;
+  }
+
+  :host([orientation='vertical']) .divider {
+    cursor: row-resize;
+  }
+
+  .divider:hover,
+  .divider:focus-visible {
+    background-color: var(--_divider-hover-color);
+  }
+
+  .divider:focus-visible {
+    outline: 2px solid var(--_divider-hover-color);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px color-mix(in srgb, var(--_divider-hover-color) 30%, transparent);
+  }
+
+  :host([disabled]) .divider {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  :host([disabled]) .divider:hover,
+  :host([disabled]) .divider:focus-visible {
+    background-color: var(--_divider-color);
+    outline: none;
+    box-shadow: none;
+  }
+
+  /* ─── Collapse Controls (siblings of separator, not children) ─── */
+
+  .collapse-controls {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    z-index: 2;
+    pointer-events: auto;
+  }
+
+  :host([orientation='vertical']) .collapse-controls {
+    flex-direction: row;
+  }
+
+  .collapse-btn {
+    background: var(--_divider-hover-color);
+    border: 2px solid white;
+    color: white;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 8px;
+    padding: 0;
+    line-height: 1;
+    flex-shrink: 0;
+  }
+
+  .collapse-btn:hover {
+    filter: brightness(1.1);
+  }
+
+  .collapse-btn:focus-visible {
+    outline: 2px solid white;
+    outline-offset: 2px;
+  }
+`;
+var _ = Object.defineProperty, m = Object.getOwnPropertyDescriptor, o = (t, i, n, l) => {
+  for (var s = l > 1 ? void 0 : l ? m(i, n) : i, a = t.length - 1, p; a >= 0; a--)
+    (p = t[a]) && (s = (l ? p(i, n, s) : p(s)) || s);
+  return l && s && _(i, n, s), s;
+};
+let e = class extends u {
+  constructor() {
+    super(...arguments), this.position = 50, this.orientation = "horizontal", this.min = 0, this.max = 100, this.snap = [], this.disabled = !1, this.collapsible = !1, this.collapsed = null, this._dragging = !1, this._dragStart = 0, this._positionAtDragStart = 0, this._positionBeforeCollapse = 50, this._onPointerDown = (t) => {
+      if (this.disabled) return;
+      t.currentTarget.setPointerCapture(t.pointerId), this._dragging = !0, this._dragStart = this.orientation === "horizontal" ? t.clientX : t.clientY, this._positionAtDragStart = this.position, t.preventDefault();
+    }, this._onPointerMove = (t) => {
+      if (!this._dragging) return;
+      const n = (this.orientation === "horizontal" ? t.clientX : t.clientY) - this._dragStart, l = this._getHostSize();
+      if (l === 0) return;
+      const s = n / l * 100;
+      this._setPosition(this._positionAtDragStart + s);
+    }, this._onPointerUp = () => {
+      this._dragging = !1;
+    }, this._onKeyDown = (t) => {
+      if (!this.disabled)
+        switch (t.key) {
+          case "ArrowLeft":
+          case "ArrowUp":
+            t.preventDefault(), this._setPosition(this.position - 1);
+            break;
+          case "ArrowRight":
+          case "ArrowDown":
+            t.preventDefault(), this._setPosition(this.position + 1);
+            break;
+          case "PageUp":
+            t.preventDefault(), this._setPosition(this.position + 10);
+            break;
+          case "PageDown":
+            t.preventDefault(), this._setPosition(this.position - 10);
+            break;
+          case "Home":
+            t.preventDefault(), this._setPosition(this.min);
+            break;
+          case "End":
+            t.preventDefault(), this._setPosition(this.max);
+            break;
+        }
+    }, this._collapseStart = () => {
+      this.collapsed = "start";
+    }, this._collapseEnd = () => {
+      this.collapsed = "end";
+    }, this._expand = () => {
+      this.collapsed = null;
+    };
+  }
+  _clamp(t) {
+    return Math.min(this.max, Math.max(this.min, t));
+  }
+  _snapToPoint(t) {
+    if (!this.snap.length) return t;
+    const i = 5;
+    for (const n of this.snap)
+      if (Math.abs(t - n) <= i) return n;
+    return t;
+  }
+  _setPosition(t) {
+    const i = this._clamp(this._snapToPoint(t));
+    i !== this.position && (this.position = i, this.dispatchEvent(
+      new CustomEvent("hx-reposition", {
+        detail: { position: this.position },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _getHostSize() {
+    return this.orientation === "horizontal" ? this.offsetWidth : this.offsetHeight;
+  }
+  updated(t) {
+    if (super.updated(t), !t.has("collapsed")) return;
+    const i = t.get("collapsed");
+    this.collapsed === "start" ? (i == null && (this._positionBeforeCollapse = this.position), this._setPosition(this.min)) : this.collapsed === "end" ? (i == null && (this._positionBeforeCollapse = this.position), this._setPosition(this.max)) : this.collapsed === null && i !== null && i !== void 0 && this._setPosition(this._positionBeforeCollapse);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.positionInPixels !== void 0 && requestAnimationFrame(() => {
+      if (this.positionInPixels !== void 0) {
+        const t = this._getHostSize();
+        t > 0 && this._setPosition(this.positionInPixels / t * 100);
+      }
+    });
+  }
+  _startPanelStyle() {
+    return this.orientation === "horizontal" ? `width: ${this.position}%;` : `height: ${this.position}%;`;
+  }
+  render() {
+    return h`
+      <div part="start" class="panel panel--start" style=${this._startPanelStyle()}>
+        <slot name="start"></slot>
+      </div>
+      <div class="divider-track">
+        <div
+          part="divider"
+          class="divider"
+          role="separator"
+          aria-label="Resize panels"
+          aria-orientation=${this.orientation === "horizontal" ? "vertical" : "horizontal"}
+          aria-valuenow=${this.position}
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-disabled=${this.disabled ? "true" : d}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @pointerdown=${this._onPointerDown}
+          @pointermove=${this._onPointerMove}
+          @pointerup=${this._onPointerUp}
+          @keydown=${this._onKeyDown}
+        ></div>
+        ${this.collapsible ? this.collapsed ? h`<div class="collapse-controls">
+                <button
+                  type="button"
+                  class="collapse-btn"
+                  aria-label=${`Expand ${this.collapsed} panel`}
+                  @click=${this._expand}
+                >
+                  ${this.collapsed === "start" ? "▶" : "◀"}
+                </button>
+              </div>` : h`<div class="collapse-controls">
+                <button
+                  type="button"
+                  class="collapse-btn"
+                  aria-label="Collapse start panel"
+                  @click=${this._collapseStart}
+                >
+                  ◀
+                </button>
+                <button
+                  type="button"
+                  class="collapse-btn"
+                  aria-label="Collapse end panel"
+                  @click=${this._collapseEnd}
+                >
+                  ▶
+                </button>
+              </div>` : d}
+      </div>
+      <div part="end" class="panel panel--end">
+        <slot name="end"></slot>
+      </div>
+    `;
+  }
+};
+e.styles = [f, b];
+o([
+  r({ type: Number, reflect: !0 })
+], e.prototype, "position", 2);
+o([
+  r({ type: Number, attribute: "position-in-pixels" })
+], e.prototype, "positionInPixels", 2);
+o([
+  r({ type: String, reflect: !0 })
+], e.prototype, "orientation", 2);
+o([
+  r({ type: Number, reflect: !0 })
+], e.prototype, "min", 2);
+o([
+  r({ type: Number, reflect: !0 })
+], e.prototype, "max", 2);
+o([
+  r({
+    attribute: "snap",
+    converter: {
+      fromAttribute(t) {
+        if (!t) return [];
+        try {
+          const i = JSON.parse(t);
+          return Array.isArray(i) ? i.map(Number) : [];
+        } catch {
+          return t.split(",").map((i) => Number(i.trim())).filter((i) => !isNaN(i));
+        }
+      },
+      toAttribute(t) {
+        return JSON.stringify(t);
+      }
+    }
+  })
+], e.prototype, "snap", 2);
+o([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+o([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "collapsible", 2);
+o([
+  r({ type: String, reflect: !0 })
+], e.prototype, "collapsed", 2);
+e = o([
+  v("hx-split-panel")
+], e);
+export {
+  e as H
+};
+//# sourceMappingURL=hx-split-panel-C9Sy7XVW.js.map

package/dist/shared/hx-split-panel-C9Sy7XVW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-split-panel-C9Sy7XVW.js","sources":["../../src/components/hx-split-panel/hx-split-panel.styles.ts","../../src/components/hx-split-panel/hx-split-panel.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSplitPanelStyles = css`\n  :host {\n    display: flex;\n    --_divider-size: var(--hx-split-panel-divider-size, 4px);\n    --_divider-color: var(--hx-split-panel-divider-color, var(--hx-color-neutral-200));\n    --_divider-hover-color: var(--hx-split-panel-divider-hover-color, var(--hx-color-primary-500));\n    overflow: hidden;\n  }\n\n  :host([orientation='horizontal']) {\n    flex-direction: row;\n    width: 100%;\n    height: 100%;\n  }\n\n  :host([orientation='vertical']) {\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n  }\n\n  .panel {\n    overflow: auto;\n    min-width: 0;\n    min-height: 0;\n  }\n\n  .panel--start {\n    flex-shrink: 0;\n  }\n\n  .panel--end {\n    flex: 1;\n  }\n\n  :host([orientation='horizontal']) .panel--start {\n    height: 100%;\n  }\n\n  :host([orientation='vertical']) .panel--start {\n    width: 100%;\n  }\n\n  /* ─── Divider Track (flex child wrapper) ─── */\n\n  .divider-track {\n    flex-shrink: 0;\n    position: relative;\n    overflow: visible;\n    display: flex;\n    align-items: stretch;\n  }\n\n  :host([orientation='horizontal']) .divider-track {\n    width: var(--_divider-size);\n    height: 100%;\n  }\n\n  :host([orientation='vertical']) .divider-track {\n    width: 100%;\n    height: var(--_divider-size);\n  }\n\n  /* ─── Divider (separator role — no interactive children) ─── */\n\n  .divider {\n    flex: 1;\n    background-color: var(--_divider-color);\n    cursor: col-resize;\n    transition: background-color 0.15s ease;\n    touch-action: none;\n    user-select: none;\n    -webkit-user-select: none;\n    outline: none;\n  }\n\n  :host([orientation='horizontal']) .divider {\n    cursor: col-resize;\n  }\n\n  :host([orientation='vertical']) .divider {\n    cursor: row-resize;\n  }\n\n  .divider:hover,\n  .divider:focus-visible {\n    background-color: var(--_divider-hover-color);\n  }\n\n  .divider:focus-visible {\n    outline: 2px solid var(--_divider-hover-color);\n    outline-offset: 2px;\n    box-shadow: 0 0 0 4px color-mix(in srgb, var(--_divider-hover-color) 30%, transparent);\n  }\n\n  :host([disabled]) .divider {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  :host([disabled]) .divider:hover,\n  :host([disabled]) .divider:focus-visible {\n    background-color: var(--_divider-color);\n    outline: none;\n    box-shadow: none;\n  }\n\n  /* ─── Collapse Controls (siblings of separator, not children) ─── */\n\n  .collapse-controls {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    z-index: 2;\n    pointer-events: auto;\n  }\n\n  :host([orientation='vertical']) .collapse-controls {\n    flex-direction: row;\n  }\n\n  .collapse-btn {\n    background: var(--_divider-hover-color);\n    border: 2px solid white;\n    color: white;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 8px;\n    padding: 0;\n    line-height: 1;\n    flex-shrink: 0;\n  }\n\n  .collapse-btn:hover {\n    filter: brightness(1.1);\n  }\n\n  .collapse-btn:focus-visible {\n    outline: 2px solid white;\n    outline-offset: 2px;\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSplitPanelStyles } from './hx-split-panel.styles.js';\n\n/**\n * A resizable two-pane layout with a draggable divider.\n *\n * @summary Resizable split panel with start and end panes.\n *\n * @tag hx-split-panel\n *\n * @slot start - The first (start) panel content.\n * @slot end - The second (end) panel content.\n *\n * @csspart start - The start panel container.\n * @csspart divider - The draggable divider element.\n * @csspart end - The end panel container.\n *\n * @fires hx-reposition - Fired when the divider is moved. Detail: `{ position: number }`.\n *\n * @cssprop [--hx-split-panel-divider-size=4px] - Width (horizontal) or height (vertical) of the divider.\n * @cssprop [--hx-split-panel-divider-color=var(--hx-color-neutral-200)] - Default divider color.\n * @cssprop [--hx-split-panel-divider-hover-color=var(--hx-color-primary-500)] - Divider color on hover/focus.\n *\n * @example Drupal Twig usage:\n * ```twig\n * <hx-split-panel\n *   position=\"50\"\n *   orientation=\"horizontal\"\n *   min=\"10\"\n *   max=\"90\"\n *   collapsible\n * >\n *   <div slot=\"start\">{{ start_content }}</div>\n *   <div slot=\"end\">{{ end_content }}</div>\n * </hx-split-panel>\n *\n * Attribute-settable: position, position-in-pixels, orientation, disabled, min, max, collapsible, collapsed\n * JS-only (complex types): snap (use .snap=${[25, 50, 75]} in Lit templates,\n *   or snap=\"[25,50,75]\" as JSON string in Twig)\n * ```\n */\n@customElement('hx-split-panel')\nexport class HelixSplitPanel extends LitElement {\n  static override styles = [tokenStyles, helixSplitPanelStyles];\n\n  /**\n   * Position of the divider as a percentage (0–100) of the start panel.\n   * @attr position\n   */\n  @property({ type: Number, reflect: true })\n  position = 50;\n\n  /**\n   * Position of the divider in pixels (alternative to `position`).\n   * When set, takes precedence over `position` until the host is measured.\n   * @attr position-in-pixels\n   */\n  @property({ type: Number, attribute: 'position-in-pixels' })\n  positionInPixels: number | undefined;\n\n  /**\n   * Orientation of the split.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Minimum position as a percentage (0–100). Prevents full collapse of start panel.\n   * @attr min\n   */\n  @property({ type: Number, reflect: true })\n  min = 0;\n\n  /**\n   * Maximum position as a percentage (0–100). Prevents full expansion of start panel.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * Snap points as an array of percentages. The divider snaps to the\n   * nearest point within a 5% threshold.\n   * Accepts JSON array string in HTML: snap=\"[25, 50, 75]\"\n   * @attr snap\n   */\n  @property({\n    attribute: 'snap',\n    converter: {\n      fromAttribute(value: string | null): number[] {\n        if (!value) return [];\n        try {\n          const parsed = JSON.parse(value) as unknown;\n          if (Array.isArray(parsed)) return (parsed as unknown[]).map(Number);\n          return [];\n        } catch {\n          return value\n            .split(',')\n            .map((s) => Number(s.trim()))\n            .filter((n) => !isNaN(n));\n        }\n      },\n      toAttribute(value: number[]): string {\n        return JSON.stringify(value);\n      },\n    },\n  })\n  snap: number[] = [];\n\n  /**\n   * When true, the divider cannot be dragged.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * When true, collapse/expand buttons appear on the divider.\n   * @attr collapsible\n   */\n  @property({ type: Boolean, reflect: true })\n  collapsible = false;\n\n  /**\n   * Which panel is collapsed: 'start', 'end', or null (not collapsed).\n   * @attr collapsed\n   */\n  @property({ type: String, reflect: true })\n  collapsed: 'start' | 'end' | null = null;\n\n  private _dragging = false;\n  private _dragStart = 0;\n  private _positionAtDragStart = 0;\n  private _positionBeforeCollapse = 50;\n\n  private _clamp(value: number): number {\n    return Math.min(this.max, Math.max(this.min, value));\n  }\n\n  private _snapToPoint(value: number): number {\n    if (!this.snap.length) return value;\n    const threshold = 5;\n    for (const point of this.snap) {\n      if (Math.abs(value - point) <= threshold) return point;\n    }\n    return value;\n  }\n\n  private _setPosition(percent: number): void {\n    const clamped = this._clamp(this._snapToPoint(percent));\n    if (clamped === this.position) return;\n    this.position = clamped;\n    this.dispatchEvent(\n      new CustomEvent<{ position: number }>('hx-reposition', {\n        detail: { position: this.position },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _getHostSize(): number {\n    if (this.orientation === 'horizontal') {\n      return this.offsetWidth;\n    }\n    return this.offsetHeight;\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    if (this.disabled) return;\n    const divider = e.currentTarget as HTMLElement;\n    divider.setPointerCapture(e.pointerId);\n    this._dragging = true;\n    this._dragStart = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n    this._positionAtDragStart = this.position;\n    e.preventDefault();\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this._dragging) return;\n    const current = this.orientation === 'horizontal' ? e.clientX : e.clientY;\n    const delta = current - this._dragStart;\n    const hostSize = this._getHostSize();\n    if (hostSize === 0) return;\n    const deltaPercent = (delta / hostSize) * 100;\n    this._setPosition(this._positionAtDragStart + deltaPercent);\n  };\n\n  private _onPointerUp = (): void => {\n    this._dragging = false;\n  };\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (this.disabled) return;\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        e.preventDefault();\n        this._setPosition(this.position - 1);\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        e.preventDefault();\n        this._setPosition(this.position + 1);\n        break;\n      case 'PageUp':\n        e.preventDefault();\n        this._setPosition(this.position + 10);\n        break;\n      case 'PageDown':\n        e.preventDefault();\n        this._setPosition(this.position - 10);\n        break;\n      case 'Home':\n        e.preventDefault();\n        this._setPosition(this.min);\n        break;\n      case 'End':\n        e.preventDefault();\n        this._setPosition(this.max);\n        break;\n    }\n  };\n\n  private _collapseStart = (): void => {\n    this.collapsed = 'start';\n  };\n\n  private _collapseEnd = (): void => {\n    this.collapsed = 'end';\n  };\n\n  private _expand = (): void => {\n    this.collapsed = null;\n  };\n\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    if (!changedProperties.has('collapsed')) return;\n\n    const prev = changedProperties.get('collapsed');\n\n    if (this.collapsed === 'start') {\n      // Save restore point when transitioning from non-collapsed state (or initial render)\n      if (prev === null || prev === undefined) this._positionBeforeCollapse = this.position;\n      this._setPosition(this.min);\n    } else if (this.collapsed === 'end') {\n      if (prev === null || prev === undefined) this._positionBeforeCollapse = this.position;\n      this._setPosition(this.max);\n    } else if (this.collapsed === null && prev !== null && prev !== undefined) {\n      // Only expand when transitioning from an explicitly collapsed state (not first render)\n      this._setPosition(this._positionBeforeCollapse);\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.positionInPixels !== undefined) {\n      // Convert pixel position to percentage after first paint\n      requestAnimationFrame(() => {\n        if (this.positionInPixels !== undefined) {\n          const hostSize = this._getHostSize();\n          if (hostSize > 0) {\n            this._setPosition((this.positionInPixels / hostSize) * 100);\n          }\n        }\n      });\n    }\n  }\n\n  private _startPanelStyle(): string {\n    if (this.orientation === 'horizontal') {\n      return `width: ${this.position}%;`;\n    }\n    return `height: ${this.position}%;`;\n  }\n\n  override render() {\n    return html`\n      <div part=\"start\" class=\"panel panel--start\" style=${this._startPanelStyle()}>\n        <slot name=\"start\"></slot>\n      </div>\n      <div class=\"divider-track\">\n        <div\n          part=\"divider\"\n          class=\"divider\"\n          role=\"separator\"\n          aria-label=\"Resize panels\"\n          aria-orientation=${this.orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n          aria-valuenow=${this.position}\n          aria-valuemin=${this.min}\n          aria-valuemax=${this.max}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          tabindex=${this.disabled ? '-1' : '0'}\n          @pointerdown=${this._onPointerDown}\n          @pointermove=${this._onPointerMove}\n          @pointerup=${this._onPointerUp}\n          @keydown=${this._onKeyDown}\n        ></div>\n        ${this.collapsible\n          ? this.collapsed\n            ? html`<div class=\"collapse-controls\">\n                <button\n                  type=\"button\"\n                  class=\"collapse-btn\"\n                  aria-label=${`Expand ${this.collapsed} panel`}\n                  @click=${this._expand}\n                >\n                  ${this.collapsed === 'start' ? '▶' : '◀'}\n                </button>\n              </div>`\n            : html`<div class=\"collapse-controls\">\n                <button\n                  type=\"button\"\n                  class=\"collapse-btn\"\n                  aria-label=\"Collapse start panel\"\n                  @click=${this._collapseStart}\n                >\n                  ◀\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"collapse-btn\"\n                  aria-label=\"Collapse end panel\"\n                  @click=${this._collapseEnd}\n                >\n                  ▶\n                </button>\n              </div>`\n          : nothing}\n      </div>\n      <div part=\"end\" class=\"panel panel--end\">\n        <slot name=\"end\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-split-panel': HelixSplitPanel;\n  }\n}\n"],"names":["helixSplitPanelStyles","css","HelixSplitPanel","LitElement","e","delta","hostSize","deltaPercent","value","threshold","point","percent","clamped","changedProperties","prev","html","nothing","tokenStyles","__decorateClass","property","parsed","s","n","customElement"],"mappings":"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"}

package/dist/shared/hx-stack-B_wODjQX.js

@@ -0,0 +1,154 @@
+import { css as c, LitElement as h, html as f } from "lit";
+import { property as a, customElement as g } from "lit/decorators.js";
+import { t as y } from "./lit-Dpo7RLp4.js";
+const u = c`
+  :host {
+    display: block;
+  }
+
+  :host([inline]) {
+    display: inline-block;
+  }
+
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-spacing-md, 1rem);
+  }
+
+  /* ─── Direction ─── */
+
+  :host([direction='horizontal']) [part='base'] {
+    flex-direction: row;
+  }
+
+  :host([direction='vertical']) [part='base'] {
+    flex-direction: column;
+  }
+
+  /* ─── Wrap ─── */
+
+  :host([wrap]) [part='base'] {
+    flex-wrap: wrap;
+  }
+
+  /* ─── Alignment ─── */
+
+  :host([align='start']) [part='base'] {
+    align-items: flex-start;
+  }
+
+  :host([align='center']) [part='base'] {
+    align-items: center;
+  }
+
+  :host([align='end']) [part='base'] {
+    align-items: flex-end;
+  }
+
+  :host([align='stretch']) [part='base'] {
+    align-items: stretch;
+  }
+
+  :host([align='baseline']) [part='base'] {
+    align-items: baseline;
+  }
+
+  /* ─── Justify ─── */
+
+  :host([justify='start']) [part='base'] {
+    justify-content: flex-start;
+  }
+
+  :host([justify='center']) [part='base'] {
+    justify-content: center;
+  }
+
+  :host([justify='end']) [part='base'] {
+    justify-content: flex-end;
+  }
+
+  :host([justify='between']) [part='base'] {
+    justify-content: space-between;
+  }
+
+  :host([justify='around']) [part='base'] {
+    justify-content: space-around;
+  }
+
+  :host([justify='evenly']) [part='base'] {
+    justify-content: space-evenly;
+  }
+
+  /* ─── Gap ─── */
+
+  :host([gap='none']) [part='base'] {
+    gap: 0;
+  }
+
+  :host([gap='xs']) [part='base'] {
+    gap: var(--hx-spacing-xs, 0.25rem);
+  }
+
+  :host([gap='sm']) [part='base'] {
+    gap: var(--hx-spacing-sm, 0.5rem);
+  }
+
+  :host([gap='md']) [part='base'] {
+    gap: var(--hx-spacing-md, 1rem);
+  }
+
+  :host([gap='lg']) [part='base'] {
+    gap: var(--hx-spacing-lg, 1.5rem);
+  }
+
+  :host([gap='xl']) [part='base'] {
+    gap: var(--hx-spacing-xl, 2rem);
+  }
+`;
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (l, r, n, i) => {
+  for (var e = i > 1 ? void 0 : i ? m(r, n) : r, p = l.length - 1, o; p >= 0; p--)
+    (o = l[p]) && (e = (i ? o(r, n, e) : o(e)) || e);
+  return i && e && b(r, n, e), e;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.direction = "vertical", this.gap = "md", this.align = "stretch", this.justify = "start", this.wrap = !1, this.inline = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "presentation");
+  }
+  render() {
+    return f`
+      <div part="base">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+t.styles = [y, u];
+s([
+  a({ type: String, reflect: !0 })
+], t.prototype, "direction", 2);
+s([
+  a({ type: String, reflect: !0 })
+], t.prototype, "gap", 2);
+s([
+  a({ type: String, reflect: !0 })
+], t.prototype, "align", 2);
+s([
+  a({ type: String, reflect: !0 })
+], t.prototype, "justify", 2);
+s([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "wrap", 2);
+s([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "inline", 2);
+t = s([
+  g("hx-stack")
+], t);
+export {
+  t as H
+};
+//# sourceMappingURL=hx-stack-B_wODjQX.js.map

package/dist/shared/hx-stack-B_wODjQX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-stack-B_wODjQX.js","sources":["../../src/components/hx-stack/hx-stack.styles.ts","../../src/components/hx-stack/hx-stack.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStackStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([inline]) {\n    display: inline-block;\n  }\n\n  [part='base'] {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-spacing-md, 1rem);\n  }\n\n  /* ─── Direction ─── */\n\n  :host([direction='horizontal']) [part='base'] {\n    flex-direction: row;\n  }\n\n  :host([direction='vertical']) [part='base'] {\n    flex-direction: column;\n  }\n\n  /* ─── Wrap ─── */\n\n  :host([wrap]) [part='base'] {\n    flex-wrap: wrap;\n  }\n\n  /* ─── Alignment ─── */\n\n  :host([align='start']) [part='base'] {\n    align-items: flex-start;\n  }\n\n  :host([align='center']) [part='base'] {\n    align-items: center;\n  }\n\n  :host([align='end']) [part='base'] {\n    align-items: flex-end;\n  }\n\n  :host([align='stretch']) [part='base'] {\n    align-items: stretch;\n  }\n\n  :host([align='baseline']) [part='base'] {\n    align-items: baseline;\n  }\n\n  /* ─── Justify ─── */\n\n  :host([justify='start']) [part='base'] {\n    justify-content: flex-start;\n  }\n\n  :host([justify='center']) [part='base'] {\n    justify-content: center;\n  }\n\n  :host([justify='end']) [part='base'] {\n    justify-content: flex-end;\n  }\n\n  :host([justify='between']) [part='base'] {\n    justify-content: space-between;\n  }\n\n  :host([justify='around']) [part='base'] {\n    justify-content: space-around;\n  }\n\n  :host([justify='evenly']) [part='base'] {\n    justify-content: space-evenly;\n  }\n\n  /* ─── Gap ─── */\n\n  :host([gap='none']) [part='base'] {\n    gap: 0;\n  }\n\n  :host([gap='xs']) [part='base'] {\n    gap: var(--hx-spacing-xs, 0.25rem);\n  }\n\n  :host([gap='sm']) [part='base'] {\n    gap: var(--hx-spacing-sm, 0.5rem);\n  }\n\n  :host([gap='md']) [part='base'] {\n    gap: var(--hx-spacing-md, 1rem);\n  }\n\n  :host([gap='lg']) [part='base'] {\n    gap: var(--hx-spacing-lg, 1.5rem);\n  }\n\n  :host([gap='xl']) [part='base'] {\n    gap: var(--hx-spacing-xl, 2rem);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixStackStyles } from './hx-stack.styles.js';\n\n/**\n * A flexbox layout wrapper for consistent vertical/horizontal spacing between children.\n *\n * @summary Flexbox stack layout utility for arranging children with consistent spacing.\n *\n * @tag hx-stack\n *\n * @slot - Default slot for any child content.\n *\n * @csspart base - The inner flex container.\n */\n@customElement('hx-stack')\nexport class HelixStack extends LitElement {\n  static override styles = [tokenStyles, helixStackStyles];\n\n  /**\n   * Direction of the stack layout.\n   * @attr direction\n   */\n  @property({ type: String, reflect: true })\n  direction: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Gap between children using design tokens.\n   * @attr gap\n   */\n  @property({ type: String, reflect: true })\n  gap: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n  /**\n   * Align-items value for cross-axis alignment.\n   * @attr align\n   */\n  @property({ type: String, reflect: true })\n  align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch';\n\n  /**\n   * Justify-content value for main-axis distribution.\n   * @attr justify\n   */\n  @property({ type: String, reflect: true })\n  justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' = 'start';\n\n  /**\n   * When true, children wrap onto multiple lines.\n   * @attr wrap\n   */\n  @property({ type: Boolean, reflect: true })\n  wrap = false;\n\n  /**\n   * When true, the component renders as `display: inline-flex`.\n   * @attr inline\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'presentation');\n    }\n  }\n\n  override render() {\n    return html`\n      <div part=\"base\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-stack': HelixStack;\n  }\n}\n"],"names":["helixStackStyles","css","HelixStack","LitElement","html","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACezB,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,YAAuC,YAOvC,KAAA,MAAiD,MAOjD,KAAA,QAA6D,WAO7D,KAAA,UAAwE,SAOxE,KAAA,OAAO,IAOP,KAAA,SAAS;AAAA,EAAA;AAAA,EAEA,oBAA0B;AACjC,UAAM,kBAAA,GACD,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,cAAc;AAAA,EAE5C;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AA3DaF,EACK,SAAS,CAACG,GAAaL,CAAgB;AAOvDM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BL,EAQX,WAAA,aAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BL,EAeX,WAAA,OAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArB9BL,EAsBX,WAAA,SAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5B9BL,EA6BX,WAAA,WAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnC/BL,EAoCX,WAAA,QAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1C/BL,EA2CX,WAAA,UAAA,CAAA;AA3CWA,IAANI,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZN,CAAA;"}