@manzanohq/components 0.1.1 → 0.1.4

package/dist/components/tree-item/tree-item.component.js

@@ -0,0 +1,163 @@
+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;
+};
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./tree-item.styles.js";
+class MzTreeItem extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.expanded = false;
+    this.selected = false;
+    this.disabled = false;
+    this.lazy = false;
+    this.hasChildren = false;
+    this.loading = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "treeitem");
+    this.checkChildren();
+  }
+  checkChildren() {
+    this.hasChildren = this.querySelector("mz-tree-item") !== null || this.lazy;
+  }
+  handleSlotChange() {
+    this.checkChildren();
+  }
+  handleToggle(e) {
+    e.stopPropagation();
+    if (this.disabled) return;
+    if (this.expanded) {
+      this.expanded = false;
+      this.emit("mz-collapse");
+    } else {
+      if (this.lazy && !this.querySelector("mz-tree-item")) {
+        this.loading = true;
+      }
+      this.expanded = true;
+      this.emit("mz-expand");
+    }
+  }
+  handleSelect(e) {
+    e.stopPropagation();
+    if (this.disabled) return;
+    this.selected = !this.selected;
+    this.emit("mz-tree-item-select", {
+      detail: { item: this },
+      bubbles: true,
+      composed: true
+    });
+  }
+  handleKeyDown(e) {
+    if (this.disabled) return;
+    switch (e.key) {
+      case "ArrowRight":
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.hasChildren && !this.expanded) {
+          this.expanded = true;
+          this.emit("mz-expand");
+        }
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.expanded) {
+          this.expanded = false;
+          this.emit("mz-collapse");
+        }
+        break;
+      case "Enter":
+        e.preventDefault();
+        e.stopPropagation();
+        this.handleSelect(e);
+        break;
+      case " ":
+        e.preventDefault();
+        e.stopPropagation();
+        this.handleToggle(e);
+        break;
+    }
+  }
+  render() {
+    const expandIcon = html`
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="9 18 15 12 9 6"></polyline>
+      </svg>
+    `;
+    return html`
+      <div
+        class=${classMap({
+      "tree-item": true,
+      "tree-item--expanded": this.expanded,
+      "tree-item--selected": this.selected,
+      "tree-item--disabled": this.disabled,
+      "tree-item--has-children": this.hasChildren
+    })}
+      >
+        <div
+          class="tree-item__row"
+          part="row"
+          tabindex=${this.disabled ? -1 : 0}
+          aria-expanded=${this.hasChildren ? String(this.expanded) : nothing}
+          aria-selected=${this.selected}
+          aria-disabled=${this.disabled}
+          @click=${this.handleSelect}
+          @keydown=${this.handleKeyDown}
+        >
+          <span
+            class="tree-item__expand"
+            part="expand-icon"
+            @click=${this.handleToggle}
+          >
+            ${this.hasChildren ? html`
+                  ${this.loading ? html`<mz-spinner style="--mz-spinner-size: 14px; --mz-spinner-track-width: 2px;"></mz-spinner>` : html`<slot name="expand-icon">${expandIcon}</slot>`}
+                ` : nothing}
+          </span>
+          <span class="tree-item__icon" part="icon">
+            <slot name="icon"></slot>
+          </span>
+          <span class="tree-item__label" part="label">
+            <slot name="label"></slot>
+          </span>
+        </div>
+        <div class="tree-item__children" part="children" role="group">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+MzTreeItem.styles = styles;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzTreeItem.prototype, "expanded", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzTreeItem.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzTreeItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], MzTreeItem.prototype, "lazy", 2);
+__decorateClass([
+  state()
+], MzTreeItem.prototype, "hasChildren", 2);
+__decorateClass([
+  state()
+], MzTreeItem.prototype, "loading", 2);
+export {
+  MzTreeItem
+};
+//# sourceMappingURL=tree-item.component.js.map

package/dist/components/tree-item/tree-item.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/tree-item/tree-item.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './tree-item.styles.js';\n\n/**\n * @tag mz-tree-item\n * @summary A tree item that can be nested to create hierarchical structures.\n *\n * @slot - Nested `mz-tree-item` children.\n * @slot label - The item label content.\n * @slot expand-icon - Custom expand/collapse icon.\n * @slot icon - Item icon displayed before the label.\n *\n * @event mz-expand - Emitted when the item expands.\n * @event mz-collapse - Emitted when the item collapses.\n *\n * @csspart row - The clickable row area.\n * @csspart expand-icon - The expand/collapse icon wrapper.\n * @csspart icon - The item icon wrapper.\n * @csspart label - The label wrapper.\n * @csspart children - The children container.\n */\nexport class MzTreeItem extends ManzanoElement {\n  static styles = styles;\n\n  /** Whether children are visible. */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /** Whether this item is selected. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** Whether interaction is disabled. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Show a loading spinner when expanding (for lazy-loaded children). */\n  @property({ type: Boolean }) lazy = false;\n\n  @state() private hasChildren = false;\n  @state() private loading = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'treeitem');\n    this.checkChildren();\n  }\n\n  private checkChildren() {\n    this.hasChildren = this.querySelector('mz-tree-item') !== null || this.lazy;\n  }\n\n  private handleSlotChange() {\n    this.checkChildren();\n  }\n\n  private handleToggle(e: Event) {\n    e.stopPropagation();\n    if (this.disabled) return;\n\n    if (this.expanded) {\n      this.expanded = false;\n      this.emit('mz-collapse');\n    } else {\n      if (this.lazy && !this.querySelector('mz-tree-item')) {\n        this.loading = true;\n      }\n      this.expanded = true;\n      this.emit('mz-expand');\n    }\n  }\n\n  private handleSelect(e: Event) {\n    e.stopPropagation();\n    if (this.disabled) return;\n\n    this.selected = !this.selected;\n    this.emit('mz-tree-item-select', {\n      detail: { item: this },\n      bubbles: true,\n      composed: true\n    });\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (this.disabled) return;\n\n    switch (e.key) {\n      case 'ArrowRight':\n        e.preventDefault();\n        e.stopPropagation();\n        if (this.hasChildren && !this.expanded) {\n          this.expanded = true;\n          this.emit('mz-expand');\n        }\n        break;\n      case 'ArrowLeft':\n        e.preventDefault();\n        e.stopPropagation();\n        if (this.expanded) {\n          this.expanded = false;\n          this.emit('mz-collapse');\n        }\n        break;\n      case 'Enter':\n        e.preventDefault();\n        e.stopPropagation();\n        this.handleSelect(e);\n        break;\n      case ' ':\n        e.preventDefault();\n        e.stopPropagation();\n        this.handleToggle(e);\n        break;\n    }\n  }\n\n  render() {\n    const expandIcon = html`\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <polyline points=\"9 18 15 12 9 6\"></polyline>\n      </svg>\n    `;\n\n    return html`\n      <div\n        class=${classMap({\n          'tree-item': true,\n          'tree-item--expanded': this.expanded,\n          'tree-item--selected': this.selected,\n          'tree-item--disabled': this.disabled,\n          'tree-item--has-children': this.hasChildren\n        })}\n      >\n        <div\n          class=\"tree-item__row\"\n          part=\"row\"\n          tabindex=${this.disabled ? -1 : 0}\n          aria-expanded=${this.hasChildren ? String(this.expanded) : nothing}\n          aria-selected=${this.selected}\n          aria-disabled=${this.disabled}\n          @click=${this.handleSelect}\n          @keydown=${this.handleKeyDown}\n        >\n          <span\n            class=\"tree-item__expand\"\n            part=\"expand-icon\"\n            @click=${this.handleToggle}\n          >\n            ${this.hasChildren\n              ? html`\n                  ${this.loading\n                    ? html`<mz-spinner style=\"--mz-spinner-size: 14px; --mz-spinner-track-width: 2px;\"></mz-spinner>`\n                    : html`<slot name=\"expand-icon\">${expandIcon}</slot>`\n                  }\n                `\n              : nothing}\n          </span>\n          <span class=\"tree-item__icon\" part=\"icon\">\n            <slot name=\"icon\"></slot>\n          </span>\n          <span class=\"tree-item__label\" part=\"label\">\n            <slot name=\"label\"></slot>\n          </span>\n        </div>\n        <div class=\"tree-item__children\" part=\"children\" role=\"group\">\n          <slot @slotchange=${this.handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/tree-item/tree-item.d.ts

@@ -0,0 +1,8 @@
+import { MzTreeItem } from './tree-item.component.js';
+export * from './tree-item.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-tree-item': MzTreeItem;
+    }
+}
+//# sourceMappingURL=tree-item.d.ts.map

package/dist/components/tree-item/tree-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.d.ts","sourceRoot":"","sources":["../../../src/components/tree-item/tree-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,cAAc,0BAA0B,CAAC;AAIzC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/components/tree-item/tree-item.js

@@ -0,0 +1,4 @@
+import { MzTreeItem } from "./tree-item.component.js";
+export * from "./tree-item.component.js";
+MzTreeItem.define("mz-tree-item");
+//# sourceMappingURL=tree-item.js.map

package/dist/components/tree-item/tree-item.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/tree-item/tree-item.ts"],
+  "sourcesContent": ["import { MzTreeItem } from './tree-item.component.js';\n\nexport * from './tree-item.component.js';\n\nMzTreeItem.define('mz-tree-item');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-tree-item': MzTreeItem;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,cAAc;AAEd,WAAW,OAAO,cAAc;",
+  "names": []
+}

package/dist/components/tree-item/tree-item.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=tree-item.styles.d.ts.map

package/dist/components/tree-item/tree-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tree-item/tree-item.styles.ts"],"names":[],"mappings":";AAGA,wBAsGE"}

package/dist/components/tree-item/tree-item.styles.js

@@ -0,0 +1,109 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var tree_item_styles_default = css`
+  ${componentStyles}
+
+  :host {
+    display: block;
+  }
+
+  .tree-item__row {
+    display: flex;
+    align-items: center;
+    gap: var(--mz-space-2xs);
+    padding: var(--mz-space-2xs) var(--mz-space-xs);
+    border-radius: var(--mz-radius-sm);
+    cursor: pointer;
+    font-size: var(--mz-font-size-sm);
+    color: var(--mz-color-text);
+    outline: none;
+    transition: background-color 100ms ease;
+    user-select: none;
+  }
+
+  .tree-item__row:hover {
+    background: var(--mz-color-surface-raised);
+  }
+
+  .tree-item__row:focus-visible {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);
+  }
+
+  .tree-item--selected > .tree-item__row {
+    background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface));
+    color: var(--mz-color-primary);
+  }
+
+  .tree-item--disabled > .tree-item__row {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tree-item__expand {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    color: var(--mz-color-text-disabled);
+    transition: transform 200ms ease;
+    border-radius: var(--mz-radius-sm);
+  }
+
+  .tree-item__expand:hover {
+    background: color-mix(in srgb, var(--mz-color-text) 8%, var(--mz-color-surface));
+  }
+
+  .tree-item--expanded > .tree-item__row > .tree-item__expand {
+    transform: rotate(90deg);
+  }
+
+  /* Reserve space for expand icon on leaf nodes so text lines up */
+  .tree-item:not(.tree-item--has-children) .tree-item__expand {
+    visibility: hidden;
+  }
+
+  .tree-item__icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .tree-item__label {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .tree-item__children {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 200ms ease;
+    padding-left: var(--mz-space-md);
+    position: relative;
+  }
+
+  .tree-item--expanded > .tree-item__children {
+    grid-template-rows: 1fr;
+  }
+
+  .tree-item__children > ::slotted(*) {
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  /* Tree connector line */
+  .tree-item--expanded > .tree-item__children::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: calc(var(--mz-space-xs) + 0.625rem);
+    bottom: var(--mz-space-xs);
+    width: 1px;
+    background: var(--mz-color-border);
+  }
+`;
+export {
+  tree_item_styles_default as default
+};
+//# sourceMappingURL=tree-item.styles.js.map

package/dist/components/tree-item/tree-item.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/tree-item/tree-item.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default css`\n  ${componentStyles}\n\n  :host {\n    display: block;\n  }\n\n  .tree-item__row {\n    display: flex;\n    align-items: center;\n    gap: var(--mz-space-2xs);\n    padding: var(--mz-space-2xs) var(--mz-space-xs);\n    border-radius: var(--mz-radius-sm);\n    cursor: pointer;\n    font-size: var(--mz-font-size-sm);\n    color: var(--mz-color-text);\n    outline: none;\n    transition: background-color 100ms ease;\n    user-select: none;\n  }\n\n  .tree-item__row:hover {\n    background: var(--mz-color-surface-raised);\n  }\n\n  .tree-item__row:focus-visible {\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);\n  }\n\n  .tree-item--selected > .tree-item__row {\n    background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface));\n    color: var(--mz-color-primary);\n  }\n\n  .tree-item--disabled > .tree-item__row {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .tree-item__expand {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    flex-shrink: 0;\n    color: var(--mz-color-text-disabled);\n    transition: transform 200ms ease;\n    border-radius: var(--mz-radius-sm);\n  }\n\n  .tree-item__expand:hover {\n    background: color-mix(in srgb, var(--mz-color-text) 8%, var(--mz-color-surface));\n  }\n\n  .tree-item--expanded > .tree-item__row > .tree-item__expand {\n    transform: rotate(90deg);\n  }\n\n  /* Reserve space for expand icon on leaf nodes so text lines up */\n  .tree-item:not(.tree-item--has-children) .tree-item__expand {\n    visibility: hidden;\n  }\n\n  .tree-item__icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .tree-item__label {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .tree-item__children {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows 200ms ease;\n    padding-left: var(--mz-space-md);\n    position: relative;\n  }\n\n  .tree-item--expanded > .tree-item__children {\n    grid-template-rows: 1fr;\n  }\n\n  .tree-item__children > ::slotted(*) {\n    overflow: hidden;\n    min-height: 0;\n  }\n\n  /* Tree connector line */\n  .tree-item--expanded > .tree-item__children::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: calc(var(--mz-space-xs) + 0.625rem);\n    bottom: var(--mz-space-xs);\n    width: 1px;\n    background: var(--mz-color-border);\n  }\n`;\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,2BAAQ;AAAA,IACX,eAAe;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;",
+  "names": []
+}