@shibui-ui/ui 1.6.0 → 1.7.0

package/dist/index63.js

@@ -0,0 +1,317 @@
+import { unsafeCSS, css, LitElement } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import treeSelectCss from "./index311.js";
+import sharedTokens from "./index196.js";
+import { treeSelectTemplate } from "./index58.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibTreeSelect = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.nodes = [];
+    this.multi = false;
+    this.inline = false;
+    this.searchable = true;
+    this.open = false;
+    this.disabled = false;
+    this.placeholder = "Seleccionar…";
+    this.emptyText = "Sin resultados";
+    this._nodeStates = /* @__PURE__ */ new Map();
+    this._search = "";
+    this._parentMap = /* @__PURE__ */ new Map();
+  }
+  /* ── Ciclo de vida ── */
+  connectedCallback() {
+    super.connectedCallback();
+    this._boundDocumentClick = (e) => this._onDocumentClick(e);
+    document.addEventListener("click", this._boundDocumentClick, true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this._boundDocumentClick, true);
+  }
+  willUpdate(changed) {
+    if (changed.has("nodes")) {
+      this._initState();
+    }
+  }
+  /* ── Inicialización ── */
+  _initState() {
+    this._nodeStates = /* @__PURE__ */ new Map();
+    this._parentMap = /* @__PURE__ */ new Map();
+    this._walkNodes(this.nodes, null);
+  }
+  _walkNodes(nodes, parentId) {
+    nodes.forEach((node) => {
+      var _a;
+      this._nodeStates.set(node.id, { selected: false, indeterminate: false, expanded: false });
+      this._parentMap.set(node.id, parentId);
+      if ((_a = node.children) == null ? void 0 : _a.length) this._walkNodes(node.children, node.id);
+    });
+  }
+  /* ── Traversal ── */
+  _getAllNodes(nodes, acc = []) {
+    nodes.forEach((n) => {
+      var _a;
+      acc.push(n);
+      if ((_a = n.children) == null ? void 0 : _a.length) this._getAllNodes(n.children, acc);
+    });
+    return acc;
+  }
+  _getLeaves(nodes, acc = []) {
+    nodes.forEach((n) => {
+      var _a;
+      if (!((_a = n.children) == null ? void 0 : _a.length)) acc.push(n);
+      else this._getLeaves(n.children, acc);
+    });
+    return acc;
+  }
+  _getSelectedLeaves() {
+    return this._getLeaves(this.nodes).filter(
+      (n) => {
+        var _a;
+        return ((_a = this._nodeStates.get(n.id)) == null ? void 0 : _a.selected) === true;
+      }
+    );
+  }
+  /* ── Selección ── */
+  _selectDown(node, selected) {
+    var _a;
+    const st = this._nodeStates.get(node.id);
+    if (st) {
+      st.selected = selected;
+      st.indeterminate = false;
+    }
+    (_a = node.children) == null ? void 0 : _a.forEach((c) => this._selectDown(c, selected));
+  }
+  _recalcAll(nodes) {
+    nodes.forEach((n) => {
+      var _a;
+      if (!((_a = n.children) == null ? void 0 : _a.length)) return;
+      this._recalcAll(n.children);
+      const allSel = n.children.every(
+        (c) => {
+          var _a2, _b;
+          return ((_a2 = this._nodeStates.get(c.id)) == null ? void 0 : _a2.selected) === true && !((_b = this._nodeStates.get(c.id)) == null ? void 0 : _b.indeterminate);
+        }
+      );
+      const someSel = n.children.some(
+        (c) => {
+          var _a2, _b;
+          return ((_a2 = this._nodeStates.get(c.id)) == null ? void 0 : _a2.selected) === true || ((_b = this._nodeStates.get(c.id)) == null ? void 0 : _b.indeterminate) === true;
+        }
+      );
+      const st = this._nodeStates.get(n.id);
+      if (st) {
+        st.selected = allSel;
+        st.indeterminate = !allSel && someSel;
+      }
+    });
+  }
+  _handleSelect(node) {
+    var _a, _b;
+    if (this.disabled) return;
+    const hasKids = (((_a = node.children) == null ? void 0 : _a.length) ?? 0) > 0;
+    if (!this.multi) {
+      if (hasKids) {
+        this._handleToggle(node.id);
+        return;
+      }
+      this._getAllNodes(this.nodes).forEach((n) => {
+        const st2 = this._nodeStates.get(n.id);
+        if (st2) {
+          st2.selected = false;
+          st2.indeterminate = false;
+        }
+      });
+      const st = this._nodeStates.get(node.id);
+      if (st) st.selected = true;
+      this._nodeStates = new Map(this._nodeStates);
+      this.open = false;
+      this._emitChange();
+      return;
+    }
+    const newSelected = !((_b = this._nodeStates.get(node.id)) == null ? void 0 : _b.selected);
+    this._selectDown(node, newSelected);
+    this._recalcAll(this.nodes);
+    this._nodeStates = new Map(this._nodeStates);
+    this._emitChange();
+  }
+  _handleToggle(id) {
+    const st = this._nodeStates.get(id);
+    if (!st) return;
+    st.expanded = !st.expanded;
+    this._nodeStates = new Map(this._nodeStates);
+  }
+  _handleClear() {
+    this._nodeStates.forEach((st) => {
+      st.selected = false;
+      st.indeterminate = false;
+    });
+    this._nodeStates = new Map(this._nodeStates);
+    this._emitChange();
+  }
+  _handleConfirm() {
+    this.open = false;
+    const sel = this._getSelectedLeaves();
+    const detail = { selected: sel, ids: sel.map((n) => n.id) };
+    this.dispatchEvent(new CustomEvent("ui-lib-tree-confirm", {
+      detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _handleTagRemove(id) {
+    const node = this._getAllNodes(this.nodes).find((n) => n.id === id);
+    if (!node) return;
+    const st = this._nodeStates.get(id);
+    if (st) st.selected = false;
+    this._recalcAll(this.nodes);
+    this._nodeStates = new Map(this._nodeStates);
+    this._emitChange();
+  }
+  _emitChange() {
+    const sel = this._getSelectedLeaves();
+    const detail = { selected: sel, ids: sel.map((n) => n.id) };
+    this.dispatchEvent(new CustomEvent("ui-lib-tree-change", {
+      detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /* ── Dropdown ── */
+  _toggleOpen() {
+    if (this.disabled) return;
+    this.open = !this.open;
+    if (this.open) {
+      setTimeout(() => {
+        var _a;
+        (_a = this.renderRoot.querySelector(".ts-search")) == null ? void 0 : _a.focus();
+      }, 60);
+    }
+  }
+  _onDocumentClick(e) {
+    if (this.inline || !this.open) return;
+    if (!e.composedPath().includes(this)) this.open = false;
+  }
+  /* ── Valores derivados ── */
+  _getTriggerLabel() {
+    var _a;
+    if (!this.multi) {
+      const sel = this._getLeaves(this.nodes).find(
+        (n) => {
+          var _a2;
+          return ((_a2 = this._nodeStates.get(n.id)) == null ? void 0 : _a2.selected) === true;
+        }
+      );
+      return (sel == null ? void 0 : sel.label) ?? "";
+    }
+    const count = this._getSelectionCount();
+    if (count === 0) return "";
+    if (count === 1) return ((_a = this._getSelectedLeaves()[0]) == null ? void 0 : _a.label) ?? "";
+    return `${count} seleccionados`;
+  }
+  _getSelectionCount() {
+    return this._getSelectedLeaves().length;
+  }
+  _getFooterInfo() {
+    const count = this._getSelectionCount();
+    if (count === 0) return "0 seleccionados";
+    return `${count} seleccionado${count !== 1 ? "s" : ""}`;
+  }
+  _getTags() {
+    return this._getSelectedLeaves().slice(0, 8).map((n) => ({ id: n.id, label: n.label }));
+  }
+  /* ── API pública ── */
+  openPanel() {
+    if (!this.inline && !this.disabled) this.open = true;
+  }
+  closePanel() {
+    this.open = false;
+  }
+  clear() {
+    this._handleClear();
+  }
+  getSelected() {
+    return this._getSelectedLeaves();
+  }
+  /* ── Render ── */
+  render() {
+    const triggerLabel = this._getTriggerLabel();
+    return treeSelectTemplate({
+      nodes: this.nodes,
+      nodeStates: this._nodeStates,
+      multi: this.multi,
+      inline: this.inline,
+      searchable: this.searchable,
+      open: this.open,
+      disabled: this.disabled,
+      placeholder: this.placeholder,
+      emptyText: this.emptyText,
+      searchValue: this._search,
+      triggerLabel,
+      isPlaceholder: triggerLabel === "",
+      selectionCount: this._getSelectionCount(),
+      footerInfo: this._getFooterInfo(),
+      tags: this._getTags(),
+      onTriggerClick: () => this._toggleOpen(),
+      onSearch: (v) => {
+        this._search = v;
+      },
+      onClear: () => this._handleClear(),
+      onConfirm: () => this._handleConfirm(),
+      onTagRemove: (id) => this._handleTagRemove(id),
+      onToggle: (id) => this._handleToggle(id),
+      onSelect: (node) => this._handleSelect(node)
+    });
+  }
+};
+LibTreeSelect.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(treeSelectCss)}`
+];
+__decorateClass([
+  property({ type: Array })
+], LibTreeSelect.prototype, "nodes", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTreeSelect.prototype, "multi", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTreeSelect.prototype, "inline", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTreeSelect.prototype, "searchable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTreeSelect.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibTreeSelect.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String })
+], LibTreeSelect.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: String, attribute: "empty-text" })
+], LibTreeSelect.prototype, "emptyText", 2);
+__decorateClass([
+  state()
+], LibTreeSelect.prototype, "_nodeStates", 2);
+__decorateClass([
+  state()
+], LibTreeSelect.prototype, "_search", 2);
+LibTreeSelect = __decorateClass([
+  customElement("lib-tree-select")
+], LibTreeSelect);
+export {
+  LibTreeSelect
+};
+//# sourceMappingURL=index63.js.map

package/dist/index63.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index63.js","sources":["../src/components/molecules/tree-select/lib-tree-node.component.ts"],"sourcesContent":["import { LitElement, TemplateResult, css, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport treeSelectCss from './lib-tree-select.css?inline';\nimport sharedTokens from '../../../styles/shared/tokens.css?inline';\nimport type {\n  TreeNode,\n  TreeNodeState,\n  TreeSelectChangeDetail,\n  TreeSelectConfirmDetail,\n} from './lib-tree-node.types';\nimport { treeSelectTemplate } from './lib-tree-select.component.html';\n\n/**\n * @element lib-tree-select\n *\n * Selector jerárquico con soporte multi-nivel, propagación bidireccional\n * de selección, búsqueda y variantes dropdown / inline / single / multi.\n *\n * @prop {TreeNode[]} nodes         — Árbol de datos\n * @prop {boolean}   multi          — Selección múltiple (con checkboxes)\n * @prop {boolean}   inline         — Sin dropdown, árbol directo en layout\n * @prop {boolean}   searchable     — Mostrar barra de búsqueda\n * @prop {boolean}   open           — Estado del dropdown (reflected)\n * @prop {boolean}   disabled       — Deshabilitado (reflected)\n * @prop {string}    placeholder    — Texto cuando no hay selección\n * @prop {string}    empty-text     — Texto sin resultados de búsqueda\n *\n * @fires ui-lib-tree-change   — Cada vez que cambia la selección\n *                               Detail: { selected: TreeNode[], ids: string[] }\n * @fires ui-lib-tree-confirm  — Al pulsar \"Aplicar\" (solo multi dropdown)\n *                               Detail: { selected: TreeNode[], ids: string[] }\n */\n@customElement('lib-tree-select')\nexport class LibTreeSelect extends LitElement {\n  static override styles = [\n    css`${unsafeCSS(sharedTokens)}`,\n    css`${unsafeCSS(treeSelectCss)}`,\n  ];\n\n  /* ── Propiedades públicas ── */\n  @property({ type: Array })  nodes: TreeNode[] = [];\n  @property({ type: Boolean, reflect: true }) multi      = false;\n  @property({ type: Boolean, reflect: true }) inline     = false;\n  @property({ type: Boolean, reflect: true }) searchable = true;\n  @property({ type: Boolean, reflect: true }) open       = false;\n  @property({ type: Boolean, reflect: true }) disabled   = false;\n  @property({ type: String }) placeholder = 'Seleccionar…';\n  @property({ type: String, attribute: 'empty-text' }) emptyText = 'Sin resultados';\n\n  /* ── Estado interno ── */\n  @state() private _nodeStates: Map<string, TreeNodeState> = new Map();\n  @state() private _search = '';\n\n  private _parentMap: Map<string, string | null> = new Map();\n  private _boundDocumentClick!: (e: Event) => void;\n\n  /* ── Ciclo de vida ── */\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._boundDocumentClick = (e: Event): void => this._onDocumentClick(e);\n    document.addEventListener('click', this._boundDocumentClick, true);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._boundDocumentClick, true);\n  }\n\n  protected override willUpdate(changed: Map<PropertyKey, unknown>): void {\n    if (changed.has('nodes')) {\n      this._initState();\n    }\n  }\n\n  /* ── Inicialización ── */\n\n  private _initState(): void {\n    this._nodeStates = new Map();\n    this._parentMap  = new Map();\n    this._walkNodes(this.nodes, null);\n  }\n\n  private _walkNodes(nodes: TreeNode[], parentId: string | null): void {\n    nodes.forEach(node => {\n      this._nodeStates.set(node.id, { selected: false, indeterminate: false, expanded: false });\n      this._parentMap.set(node.id, parentId);\n      if (node.children?.length) this._walkNodes(node.children, node.id);\n    });\n  }\n\n  /* ── Traversal ── */\n\n  private _getAllNodes(nodes: TreeNode[], acc: TreeNode[] = []): TreeNode[] {\n    nodes.forEach(n => {\n      acc.push(n);\n      if (n.children?.length) this._getAllNodes(n.children, acc);\n    });\n    return acc;\n  }\n\n  private _getLeaves(nodes: TreeNode[], acc: TreeNode[] = []): TreeNode[] {\n    nodes.forEach(n => {\n      if (!n.children?.length) acc.push(n);\n      else this._getLeaves(n.children, acc);\n    });\n    return acc;\n  }\n\n  private _getSelectedLeaves(): TreeNode[] {\n    return this._getLeaves(this.nodes).filter(\n      n => this._nodeStates.get(n.id)?.selected === true\n    );\n  }\n\n  /* ── Selección ── */\n\n  private _selectDown(node: TreeNode, selected: boolean): void {\n    const st = this._nodeStates.get(node.id);\n    if (st) { st.selected = selected; st.indeterminate = false; }\n    node.children?.forEach(c => this._selectDown(c, selected));\n  }\n\n  private _recalcAll(nodes: TreeNode[]): void {\n    nodes.forEach(n => {\n      if (!n.children?.length) return;\n      this._recalcAll(n.children);\n      const allSel  = n.children.every(c =>\n        this._nodeStates.get(c.id)?.selected === true &&\n        !this._nodeStates.get(c.id)?.indeterminate\n      );\n      const someSel = n.children.some(c =>\n        this._nodeStates.get(c.id)?.selected === true ||\n        this._nodeStates.get(c.id)?.indeterminate === true\n      );\n      const st = this._nodeStates.get(n.id);\n      if (st) { st.selected = allSel; st.indeterminate = !allSel && someSel; }\n    });\n  }\n\n  private _handleSelect(node: TreeNode): void {\n    if (this.disabled) return;\n    const hasKids = (node.children?.length ?? 0) > 0;\n\n    if (!this.multi) {\n      // Single — los nodos padre solo expanden/colapsan, NUNCA seleccionan\n      if (hasKids) {\n        this._handleToggle(node.id);\n        return;\n      }\n      // Hoja → limpiar todo, seleccionar, cerrar dropdown\n      this._getAllNodes(this.nodes).forEach(n => {\n        const st = this._nodeStates.get(n.id);\n        if (st) { st.selected = false; st.indeterminate = false; }\n      });\n      const st = this._nodeStates.get(node.id);\n      if (st) st.selected = true;\n      this._nodeStates = new Map(this._nodeStates);\n      this.open = false;\n      this._emitChange();\n      return;\n    }\n\n    // Multi — toggle + propagación bidireccional (padres e hijos seleccionables)\n    const newSelected = !this._nodeStates.get(node.id)?.selected;\n    this._selectDown(node, newSelected);\n    this._recalcAll(this.nodes);\n    this._nodeStates = new Map(this._nodeStates);\n    this._emitChange();\n  }\n\n  private _handleToggle(id: string): void {\n    const st = this._nodeStates.get(id);\n    if (!st) return;\n    st.expanded = !st.expanded;\n    this._nodeStates = new Map(this._nodeStates);\n  }\n\n  private _handleClear(): void {\n    this._nodeStates.forEach(st => { st.selected = false; st.indeterminate = false; });\n    this._nodeStates = new Map(this._nodeStates);\n    this._emitChange();\n  }\n\n  private _handleConfirm(): void {\n    this.open = false;\n    const sel    = this._getSelectedLeaves();\n    const detail: TreeSelectConfirmDetail = { selected: sel, ids: sel.map(n => n.id) };\n    this.dispatchEvent(new CustomEvent<TreeSelectConfirmDetail>('ui-lib-tree-confirm', {\n      detail, bubbles: true, composed: true,\n    }));\n  }\n\n  private _handleTagRemove(id: string): void {\n    const node = this._getAllNodes(this.nodes).find(n => n.id === id);\n    if (!node) return;\n    const st = this._nodeStates.get(id);\n    if (st) st.selected = false;\n    this._recalcAll(this.nodes);\n    this._nodeStates = new Map(this._nodeStates);\n    this._emitChange();\n  }\n\n  private _emitChange(): void {\n    const sel    = this._getSelectedLeaves();\n    const detail: TreeSelectChangeDetail = { selected: sel, ids: sel.map(n => n.id) };\n    this.dispatchEvent(new CustomEvent<TreeSelectChangeDetail>('ui-lib-tree-change', {\n      detail, bubbles: true, composed: true,\n    }));\n  }\n\n  /* ── Dropdown ── */\n\n  private _toggleOpen(): void {\n    if (this.disabled) return;\n    this.open = !this.open;\n    if (this.open) {\n      setTimeout((): void => {\n        (this.renderRoot.querySelector('.ts-search') as HTMLInputElement | null)?.focus();\n      }, 60);\n    }\n  }\n\n  private _onDocumentClick(e: Event): void {\n    if (this.inline || !this.open) return;\n    if (!e.composedPath().includes(this)) this.open = false;\n  }\n\n  /* ── Valores derivados ── */\n\n  private _getTriggerLabel(): string {\n    if (!this.multi) {\n      const sel = this._getLeaves(this.nodes).find(\n        n => this._nodeStates.get(n.id)?.selected === true\n      );\n      return sel?.label ?? '';\n    }\n    const count = this._getSelectionCount();\n    if (count === 0) return '';\n    if (count === 1) return this._getSelectedLeaves()[0]?.label ?? '';\n    return `${count} seleccionados`;\n  }\n\n  private _getSelectionCount(): number {\n    return this._getSelectedLeaves().length;\n  }\n\n  private _getFooterInfo(): string {\n    const count = this._getSelectionCount();\n    if (count === 0) return '0 seleccionados';\n    return `${count} seleccionado${count !== 1 ? 's' : ''}`;\n  }\n\n  private _getTags(): Array<{ id: string; label: string }> {\n    return this._getSelectedLeaves().slice(0, 8).map(n => ({ id: n.id, label: n.label }));\n  }\n\n  /* ── API pública ── */\n\n  public openPanel():  void { if (!this.inline && !this.disabled) this.open = true; }\n  public closePanel(): void { this.open = false; }\n  public clear():      void { this._handleClear(); }\n  public getSelected(): TreeNode[] { return this._getSelectedLeaves(); }\n\n  /* ── Render ── */\n\n  protected override render(): TemplateResult {\n    const triggerLabel = this._getTriggerLabel();\n    return treeSelectTemplate({\n      nodes:          this.nodes,\n      nodeStates:     this._nodeStates,\n      multi:          this.multi,\n      inline:         this.inline,\n      searchable:     this.searchable,\n      open:           this.open,\n      disabled:       this.disabled,\n      placeholder:    this.placeholder,\n      emptyText:      this.emptyText,\n      searchValue:    this._search,\n      triggerLabel,\n      isPlaceholder:  triggerLabel === '',\n      selectionCount: this._getSelectionCount(),\n      footerInfo:     this._getFooterInfo(),\n      tags:           this._getTags(),\n      onTriggerClick: (): void => this._toggleOpen(),\n      onSearch:       (v: string): void => { this._search = v; },\n      onClear:        (): void => this._handleClear(),\n      onConfirm:      (): void => this._handleConfirm(),\n      onTagRemove:    (id: string): void => this._handleTagRemove(id),\n      onToggle:       (id: string): void => this._handleToggle(id),\n      onSelect:       (node: TreeNode): void => this._handleSelect(node),\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lib-tree-select': LibTreeSelect;\n  }\n}"],"names":["_a","st"],"mappings":"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"}

package/dist/index64.js

@@ -0,0 +1,312 @@
+import { unsafeCSS, css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import groupCss from "./index312.js";
+import sharedTokens from "./index196.js";
+import { buttonGroupTemplate, buttonSplitTemplate } from "./index313.js";
+import "./index23.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let LibButtonGroup = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.shape = "flat";
+    this.orientation = "horizontal";
+    this.block = false;
+    this.toggle = false;
+    this.multi = false;
+    this.dark = false;
+    this.kintsugi = false;
+    this.size = "";
+    this._handleToggleClick = (e) => {
+      const target = e.target.closest("lib-button");
+      if (!target || target.hasAttribute("disabled")) return;
+      if (this.multi) {
+        const isActive = target.hasAttribute("active");
+        if (isActive) {
+          target.removeAttribute("active");
+        } else {
+          target.setAttribute("active", "");
+        }
+      } else {
+        this._getButtons().forEach((btn) => {
+          btn.removeAttribute("active");
+        });
+        target.setAttribute("active", "");
+      }
+      this._emitChange();
+    };
+  }
+  /* ── Lifecycle ── */
+  render() {
+    return buttonGroupTemplate();
+  }
+  firstUpdated() {
+    var _a;
+    const slot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("slot");
+    if (slot) {
+      slot.addEventListener("slotchange", () => this._updateChildren());
+    }
+    this._updateChildren();
+    if (this.toggle) {
+      this.addEventListener("click", this._handleToggleClick);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.toggle) {
+      this.removeEventListener("click", this._handleToggleClick);
+    }
+  }
+  /* ── Children management ── */
+  _getButtons() {
+    return Array.from(this.querySelectorAll("lib-button"));
+  }
+  _updateChildren() {
+    const all = Array.from(this.children);
+    const btns = all.filter(
+      (el) => el.tagName.toLowerCase() === "lib-button"
+    );
+    btns.forEach((btn, i) => {
+      if (btns.length === 1) {
+        btn.removeAttribute("group-pos");
+      } else if (i === 0) {
+        btn.setAttribute("group-pos", "first");
+      } else if (i === btns.length - 1) {
+        btn.setAttribute("group-pos", "last");
+      } else {
+        btn.setAttribute("group-pos", "middle");
+      }
+      if (this.shape !== "flat") {
+        btn.setAttribute("group-shape", this.shape);
+      } else {
+        btn.removeAttribute("group-shape");
+      }
+      if (this.orientation === "vertical") {
+        btn.setAttribute("group-vertical", "");
+      } else {
+        btn.removeAttribute("group-vertical");
+      }
+      if (this.dark) {
+        btn.setAttribute("dark", "");
+      } else {
+        btn.removeAttribute("dark");
+      }
+      if (this.size) {
+        btn.setAttribute("size", this.size);
+      }
+      if (this.kintsugi && i > 0) {
+        btn.setAttribute("kintsugi", "");
+      } else {
+        btn.removeAttribute("kintsugi");
+      }
+    });
+  }
+  _emitChange() {
+    const btns = this._getButtons();
+    const active = [];
+    const activeIndex = [];
+    btns.forEach((btn, i) => {
+      var _a;
+      if (btn.hasAttribute("active")) {
+        activeIndex.push(i);
+        active.push(((_a = btn.textContent) == null ? void 0 : _a.trim()) ?? String(i));
+      }
+    });
+    this.dispatchEvent(new CustomEvent("ui-lib-group-change", {
+      detail: { active, activeIndex },
+      bubbles: true,
+      composed: true
+    }));
+  }
+};
+LibButtonGroup.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(groupCss)}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibButtonGroup.prototype, "shape", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibButtonGroup.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonGroup.prototype, "block", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonGroup.prototype, "toggle", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonGroup.prototype, "multi", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonGroup.prototype, "dark", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonGroup.prototype, "kintsugi", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibButtonGroup.prototype, "size", 2);
+LibButtonGroup = __decorateClass([
+  customElement("lib-button-group")
+], LibButtonGroup);
+let LibButtonSep = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.dark = false;
+  }
+  render() {
+    const color = this.dark ? "rgba(255,255,255,0.1)" : "var(--border-default)";
+    return html`<div style="width:1px;align-self:stretch;background:${color};flex-shrink:0;z-index:1;"></div>`;
+  }
+};
+LibButtonSep.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(groupCss)}`
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonSep.prototype, "dark", 2);
+LibButtonSep = __decorateClass([
+  customElement("lib-button-sep")
+], LibButtonSep);
+let LibButtonSplit = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "primary";
+    this.size = "md";
+    this.dark = false;
+    this.disabled = false;
+    this.label = "";
+    this.items = "";
+    this._open = false;
+    this._onDocClick = (e) => {
+      var _a;
+      if (!this._open) return;
+      if (!this.contains(e.target) && !(((_a = this.shadowRoot) == null ? void 0 : _a.contains(e.target)) ?? false)) {
+        this._open = false;
+        this.requestUpdate();
+      }
+    };
+    this._onKeyDown = (e) => {
+      if (e.key === "Escape" && this._open) {
+        this._open = false;
+        this.requestUpdate();
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this._onDocClick);
+    document.addEventListener("keydown", this._onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this._onDocClick);
+    document.removeEventListener("keydown", this._onKeyDown);
+  }
+  render() {
+    let parsedItems = [];
+    if (this.items) {
+      try {
+        parsedItems = JSON.parse(this.items);
+      } catch {
+      }
+    }
+    return buttonSplitTemplate({
+      label: this.label,
+      variant: this.variant,
+      size: this.size,
+      dark: this.dark,
+      disabled: this.disabled,
+      menuOpen: this._open,
+      items: parsedItems,
+      onMainClick: (e) => this._onMainClick(e),
+      onArrowClick: (e) => this._onArrowClick(e)
+    });
+  }
+  _onMainClick(e) {
+    this.dispatchEvent(new CustomEvent("ui-lib-split-action", {
+      detail: { originalEvent: e },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  _onArrowClick(e) {
+    e.stopPropagation();
+    this._open = !this._open;
+    this.requestUpdate();
+    if (this._open) {
+      setTimeout(() => {
+        var _a;
+        const menu = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".split-menu");
+        if (!menu) return;
+        menu.querySelectorAll(".split-menu-item").forEach((item) => {
+          item.addEventListener("click", (ev) => {
+            var _a2;
+            ev.stopPropagation();
+            this._open = false;
+            this.requestUpdate();
+            this.dispatchEvent(new CustomEvent("ui-lib-split-select", {
+              detail: {
+                value: item.dataset["value"] ?? "",
+                label: ((_a2 = item.textContent) == null ? void 0 : _a2.trim()) ?? ""
+              },
+              bubbles: true,
+              composed: true
+            }));
+          }, { once: true });
+        });
+        const slottedMenu = menu.querySelector('slot[name="menu"]');
+        if (slottedMenu) {
+          slottedMenu.assignedElements().forEach((el) => {
+            el.addEventListener("click", (ev) => {
+              ev.stopPropagation();
+              this._open = false;
+              this.requestUpdate();
+            }, { once: true });
+          });
+        }
+      }, 0);
+    }
+  }
+};
+LibButtonSplit.styles = [
+  css`${unsafeCSS(sharedTokens)}`,
+  css`${unsafeCSS(groupCss)}`
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibButtonSplit.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], LibButtonSplit.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonSplit.prototype, "dark", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LibButtonSplit.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String })
+], LibButtonSplit.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], LibButtonSplit.prototype, "items", 2);
+LibButtonSplit = __decorateClass([
+  customElement("lib-button-split")
+], LibButtonSplit);
+export {
+  LibButtonGroup,
+  LibButtonSep,
+  LibButtonSplit
+};
+//# sourceMappingURL=index64.js.map