@ixfx/components 0.6.2 → 0.7.0

package/dist/titlebar.js

@@ -0,0 +1,324 @@
+import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import "./icon-CvnPanhA.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/titlebar/titlebar.ts
+let TitlebarElement = class TitlebarElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.title = ``;
+		this.iconName = ``;
+		this.orientation = `horizontal`;
+		this.variant = `titlebar`;
+		this.closable = false;
+		this.collapsible = false;
+		this.collapsed = false;
+		this.toggleInteraction = `implicit`;
+	}
+	_onToggleClick() {
+		if (!this.collapsible) return;
+		this.collapsed = !this.collapsed;
+		this.dispatchEvent(new CustomEvent(`toggle`, {
+			detail: { collapsed: this.collapsed },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_onCloseClick() {
+		this.dispatchEvent(new CustomEvent(`close`, {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_getCaretIcon() {
+		return `chevron-down`;
+	}
+	render() {
+		const caretIcon = this._getCaretIcon();
+		const isVertical = this.orientation === `vertical`;
+		const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;
+		const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;
+		const caretRotation = isVertical ? this.collapsed ? `` : `-90deg` : this.collapsed ? `-90deg` : ``;
+		return html`
+      <div
+        class="bar"
+        role="toolbar"
+        @click=${implicitToggle ? this._onToggleClick : nothing}
+      >
+        <div class="title-text-wrapper">
+          ${this.iconName ? html`<ixfx-icon class="title-icon" name=${this.iconName}></ixfx-icon>` : nothing}
+          <span class="title-text">${this.title}</span>
+        </div>
+
+        <div class="toolbar" @click=${(e) => e.stopPropagation()}>
+          <slot name="toolbar"></slot>
+          ${this.closable ? html`
+            <button
+              class="close-btn"
+              type="button"
+              aria-label="Close panel"
+              @click=${this._onCloseClick}
+            >
+              <ixfx-icon name="close"></ixfx-icon>
+            </button>
+          ` : nothing}
+          ${showCaret ? html`
+          <button
+            class="caret-btn"
+            type="button"
+            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
+            @click=${this._onToggleClick}
+          >
+            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>
+          </button>
+          ` : nothing}
+        </div>
+      </div>
+    `;
+	}
+	static {
+		this.styles = [themeFallbacks, css`
+    :host {
+      display: block;
+      box-sizing: border-box;
+    }
+
+    .bar {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--space-s) var(--space-m);
+      background: var(--surface-4);
+      color: var(--surface-3-text);
+      min-height: 2em;
+      height: 100%;
+      flex-shrink: 0;
+      box-sizing: border-box;
+    }
+
+    :host([orientation="vertical"]) .bar {
+      flex-direction: row;
+      min-width: 2em;
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+
+    .caret-btn,
+    .close-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      padding: var(--space-xs);
+      margin: 0;
+      cursor: pointer;
+      color: inherit;
+      border-radius: var(--radius-s);
+      transition: background var(--transition);
+      opacity: var(--prominence-idle-opacity);
+    }
+
+    .caret-btn:hover,
+    .close-btn:hover {
+      background: var(--surface-5);
+      opacity: var(--prominence-tickled-opacity);
+    }
+
+    .caret-btn:focus-visible,
+    .close-btn:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 1px;
+    }
+
+    ixfx-icon {
+      width: 1.25em;
+      height: 1.25em;
+      transition: transform var(--transition);
+    }
+
+    .title-icon {
+      flex-shrink: 0;
+    }
+
+    .title-text {
+      flex: 1;
+      padding-left: 1ch;
+      font-family: var(--font-family);
+      font-size: var(--text-m);
+      font-weight: var(--font-weight-bold, 600);
+      white-space: nowrap;
+      overflow: hidden;
+      align-self: center;
+      text-overflow: ellipsis;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    :host([collapsible][toggle-interaction="implicit"]) .bar {
+      cursor: pointer;
+    }
+
+    :host([orientation="vertical"]) .title-text {
+      writing-mode: vertical-rl;
+      padding-left: 0;
+      padding-bottom: 1ch;
+      text-orientation: mixed;
+      transform: rotate(180deg);
+    }
+
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: var(--space-xs);
+      margin-left: auto;
+    }
+
+    :host([orientation="vertical"]) .toolbar {
+      flex-direction: column;
+      margin-left: 0;
+      margin-top: auto;
+      writing-mode: horizontal-tb;
+    }
+
+    slot[name="toolbar"] {
+      display: contents;
+    }
+
+    ::slotted(slot[name="toolbar"]) {
+      display: contents;
+    }
+
+    .title-text-wrapper {
+      display: flex;
+      padding: 0 var(--space-s);
+    }
+
+    /* === Midline variant === */
+
+    :host([variant="midline"]) .bar {
+      background: transparent;
+      padding: var(--space-xs) var(--space-m);
+      min-height: unset;
+      position: relative;
+    }
+
+    :host([variant="midline"][orientation="vertical"]) .bar {
+      padding: var(--space-m) var(--space-xs);
+      min-width: unset;
+    }
+
+    :host([variant="midline"]) .title-text-wrapper {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      gap: var(--space-s);
+      background: var(--surface-3);
+    }
+
+    :host([variant="midline"]) .title-text {
+      font-weight: normal;
+      color: var(--surface-3-text);
+      padding: 0 0.5ch 0 0.5ch;
+      background: transparent;
+      box-shadow: none;
+      flex: unset;
+      width: auto;
+      white-space: nowrap;
+    }
+
+    :host([variant="midline"]) .title-icon {
+      background: transparent;
+      flex-shrink: 0;
+    }
+
+    :host([variant="midline"]) .caret-btn {
+      position: relative;
+      z-index: 1;
+      background: var(--surface-3);
+      opacity: 1;
+    }
+
+    :host([variant="midline"][orientation="vertical"]) .title-text {
+      transform: rotate(180deg);
+      padding: 0.5ch 0 0.5ch 0ch;
+    }
+
+    :host([variant="midline"]) .toolbar {
+      position: relative;
+      z-index: 2;
+      background: var(--surface-3);
+      margin-left: 0;
+    }
+
+    :host([variant="midline"][orientation="horizontal"]) .toolbar {
+      margin-left: auto;
+    }
+
+    /* Debossed line runs from after title-text to before toolbar */
+    :host([variant="midline"]) .bar::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 1px;
+      transform: translateY(-50%);
+      background: var(--surface-2);
+      box-shadow:
+        0 -1px 0 var(--surface-5),
+        0 1px 0 var(--surface-1);
+      z-index: 0;
+    }
+
+    /* For vertical midline, line runs vertically */
+    :host([variant="midline"][orientation="vertical"]) .bar::after {
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      right: unset;
+      width: 1px;
+      height: 100%;
+      transform: translateX(-50%);
+      box-shadow:
+        -1px 0 0 var(--surface-5),
+        1px 0 0 var(--surface-1);
+    }
+  `];
+	}
+};
+__decorate([property({ type: String })], TitlebarElement.prototype, "title", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], TitlebarElement.prototype, "iconName", void 0);
+__decorate([property({
+	type: String,
+	attribute: `orientation`,
+	reflect: true
+})], TitlebarElement.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	attribute: `variant`,
+	reflect: true
+})], TitlebarElement.prototype, "variant", void 0);
+__decorate([property({ type: Boolean })], TitlebarElement.prototype, "closable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TitlebarElement.prototype, "collapsible", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TitlebarElement.prototype, "collapsed", void 0);
+__decorate([property({
+	type: String,
+	attribute: `toggle-interaction`
+})], TitlebarElement.prototype, "toggleInteraction", void 0);
+TitlebarElement = __decorate([safeCustomElement(`ixfx-titlebar`)], TitlebarElement);
+//#endregion
+export { TitlebarElement };
+
+//# sourceMappingURL=titlebar.js.map

package/dist/titlebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"titlebar.js","names":["customElement"],"sources":["../src/titlebar/titlebar.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../icons/icon.js';\n\nexport type TitlebarOrientation = `horizontal` | `vertical`;\nexport type TitlebarVariant = `titlebar` | `midline`;\nexport type TitlebarToggleInteraction = `implicit` | `explicit` | `disabled`;\n\nexport interface TitlebarToggleDetail {\n  readonly collapsed: boolean;\n}\n\nexport type TitlebarToggleEvent = CustomEvent<TitlebarToggleDetail>;\nexport type TitlebarCloseEvent = CustomEvent<void>;\n\nexport interface TitlebarElementEventMap {\n  toggle: TitlebarToggleEvent;\n  close: TitlebarCloseEvent;\n}\n\n/**\n * Standalone titlebar chrome: title, icon, toolbar slot, close button and\n * optional collapse/expand caret. Extracted from `ixfx-panel`.\n *\n * Collapsing is opt-in via `collapsible`. When absent, no caret is shown and\n * `toggle-interaction` is inert. `close` is fired without removing the\n * element — the host decides what closing means.\n */\n@customElement(`ixfx-titlebar`)\nexport class TitlebarElement extends LitElement {\n  @property({ type: String }) title = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ type: String, attribute: `orientation`, reflect: true }) orientation: TitlebarOrientation = `horizontal`;\n  @property({ type: String, attribute: `variant`, reflect: true }) variant: TitlebarVariant = `titlebar`;\n  @property({ type: Boolean }) closable = false;\n  /** Show the collapse/expand caret and enable toggle behaviour. */\n  @property({ type: Boolean, reflect: true }) collapsible = false;\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: `toggle-interaction` }) toggleInteraction: TitlebarToggleInteraction = `implicit`;\n\n  private _onToggleClick() {\n    if (!this.collapsible)\n      return;\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(\n      new CustomEvent<TitlebarToggleDetail>(`toggle`, {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onCloseClick() {\n    this.dispatchEvent(\n      new CustomEvent<void>(`close`, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _getCaretIcon(): string {\n    return `chevron-down`;\n  }\n\n  protected override render() {\n    const caretIcon = this._getCaretIcon();\n    const isVertical = this.orientation === `vertical`;\n    const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;\n    const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;\n\n    const caretRotation = isVertical\n      ? (this.collapsed ? `` : `-90deg`)\n      : (this.collapsed ? `-90deg` : ``);\n\n    return html`\n      <div\n        class=\"bar\"\n        role=\"toolbar\"\n        @click=${implicitToggle ? this._onToggleClick : nothing}\n      >\n        <div class=\"title-text-wrapper\">\n          ${this.iconName ? html`<ixfx-icon class=\"title-icon\" name=${this.iconName}></ixfx-icon>` : nothing}\n          <span class=\"title-text\">${this.title}</span>\n        </div>\n\n        <div class=\"toolbar\" @click=${(e: Event) => e.stopPropagation()}>\n          <slot name=\"toolbar\"></slot>\n          ${this.closable\n            ? html`\n            <button\n              class=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close panel\"\n              @click=${this._onCloseClick}\n            >\n              <ixfx-icon name=\"close\"></ixfx-icon>\n            </button>\n          `\n            : nothing}\n          ${showCaret\n            ? html`\n          <button\n            class=\"caret-btn\"\n            type=\"button\"\n            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}\n            @click=${this._onToggleClick}\n          >\n            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>\n          </button>\n          `\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = [themeFallbacks, css`\n    :host {\n      display: block;\n      box-sizing: border-box;\n    }\n\n    .bar {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: var(--space-s) var(--space-m);\n      background: var(--surface-4);\n      color: var(--surface-3-text);\n      min-height: 2em;\n      height: 100%;\n      flex-shrink: 0;\n      box-sizing: border-box;\n    }\n\n    :host([orientation=\"vertical\"]) .bar {\n      flex-direction: row;\n      min-width: 2em;\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    .caret-btn,\n    .close-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background: none;\n      border: none;\n      padding: var(--space-xs);\n      margin: 0;\n      cursor: pointer;\n      color: inherit;\n      border-radius: var(--radius-s);\n      transition: background var(--transition);\n      opacity: var(--prominence-idle-opacity);\n    }\n\n    .caret-btn:hover,\n    .close-btn:hover {\n      background: var(--surface-5);\n      opacity: var(--prominence-tickled-opacity);\n    }\n\n    .caret-btn:focus-visible,\n    .close-btn:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 1px;\n    }\n\n    ixfx-icon {\n      width: 1.25em;\n      height: 1.25em;\n      transition: transform var(--transition);\n    }\n\n    .title-icon {\n      flex-shrink: 0;\n    }\n\n    .title-text {\n      flex: 1;\n      padding-left: 1ch;\n      font-family: var(--font-family);\n      font-size: var(--text-m);\n      font-weight: var(--font-weight-bold, 600);\n      white-space: nowrap;\n      overflow: hidden;\n      align-self: center;\n      text-overflow: ellipsis;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    :host([collapsible][toggle-interaction=\"implicit\"]) .bar {\n      cursor: pointer;\n    }\n\n    :host([orientation=\"vertical\"]) .title-text {\n      writing-mode: vertical-rl;\n      padding-left: 0;\n      padding-bottom: 1ch;\n      text-orientation: mixed;\n      transform: rotate(180deg);\n    }\n\n    .toolbar {\n      display: flex;\n      align-items: center;\n      gap: var(--space-xs);\n      margin-left: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .toolbar {\n      flex-direction: column;\n      margin-left: 0;\n      margin-top: auto;\n      writing-mode: horizontal-tb;\n    }\n\n    slot[name=\"toolbar\"] {\n      display: contents;\n    }\n\n    ::slotted(slot[name=\"toolbar\"]) {\n      display: contents;\n    }\n\n    .title-text-wrapper {\n      display: flex;\n      padding: 0 var(--space-s);\n    }\n\n    /* === Midline variant === */\n\n    :host([variant=\"midline\"]) .bar {\n      background: transparent;\n      padding: var(--space-xs) var(--space-m);\n      min-height: unset;\n      position: relative;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .bar {\n      padding: var(--space-m) var(--space-xs);\n      min-width: unset;\n    }\n\n    :host([variant=\"midline\"]) .title-text-wrapper {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      gap: var(--space-s);\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .title-text {\n      font-weight: normal;\n      color: var(--surface-3-text);\n      padding: 0 0.5ch 0 0.5ch;\n      background: transparent;\n      box-shadow: none;\n      flex: unset;\n      width: auto;\n      white-space: nowrap;\n    }\n\n    :host([variant=\"midline\"]) .title-icon {\n      background: transparent;\n      flex-shrink: 0;\n    }\n\n    :host([variant=\"midline\"]) .caret-btn {\n      position: relative;\n      z-index: 1;\n      background: var(--surface-3);\n      opacity: 1;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .title-text {\n      transform: rotate(180deg);\n      padding: 0.5ch 0 0.5ch 0ch;\n    }\n\n    :host([variant=\"midline\"]) .toolbar {\n      position: relative;\n      z-index: 2;\n      background: var(--surface-3);\n      margin-left: 0;\n    }\n\n    :host([variant=\"midline\"][orientation=\"horizontal\"]) .toolbar {\n      margin-left: auto;\n    }\n\n    /* Debossed line runs from after title-text to before toolbar */\n    :host([variant=\"midline\"]) .bar::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      height: 1px;\n      transform: translateY(-50%);\n      background: var(--surface-2);\n      box-shadow:\n        0 -1px 0 var(--surface-5),\n        0 1px 0 var(--surface-1);\n      z-index: 0;\n    }\n\n    /* For vertical midline, line runs vertically */\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .bar::after {\n      top: 0;\n      bottom: 0;\n      left: 50%;\n      right: unset;\n      width: 1px;\n      height: 100%;\n      transform: translateX(-50%);\n      box-shadow:\n        -1px 0 0 var(--surface-5),\n        1px 0 0 var(--surface-1);\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-titlebar': TitlebarElement;\n  }\n}\n\nexport interface TitlebarElement {\n  addEventListener: (<K extends keyof TitlebarElementEventMap>(\n    type: K,\n    listener: (this: TitlebarElement, event: TitlebarElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;AAgCO,IAAM,kBAAN,MAAM,wBAAwB,WAAW;;;EACV,KAAA,QAAA;EAC2B,KAAA,WAAA;EACyC,KAAA,cAAA;EACZ,KAAA,UAAA;EACpD,KAAA,WAAA;EAEkB,KAAA,cAAA;EACF,KAAA,YAAA;EACoD,KAAA,oBAAA;;CAE5G,iBAAyB;EACvB,IAAI,CAAC,KAAK,aACR;EACF,KAAK,YAAY,CAAC,KAAK;EACvB,KAAK,cACH,IAAI,YAAkC,UAAU;GAC9C,QAAQ,EAAE,WAAW,KAAK,UAAU;GACpC,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,gBAAwB;EACtB,KAAK,cACH,IAAI,YAAkB,SAAS;GAC7B,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,gBAAgC;EAC9B,OAAO;CACT;CAEA,SAA4B;EAC1B,MAAM,YAAY,KAAK,cAAc;EACrC,MAAM,aAAa,KAAK,gBAAgB;EACxC,MAAM,YAAY,KAAK,eAAe,KAAK,sBAAsB;EACjE,MAAM,iBAAiB,KAAK,eAAe,KAAK,sBAAsB;EAEtE,MAAM,gBAAgB,aACjB,KAAK,YAAY,KAAK,WACtB,KAAK,YAAY,WAAW;EAEjC,OAAO,IAAI;;;;iBAIE,iBAAiB,KAAK,iBAAiB,QAAQ;;;YAGpD,KAAK,WAAW,IAAI,sCAAsC,KAAK,SAAS,iBAAiB,QAAQ;qCACxE,KAAK,MAAM;;;uCAGT,MAAa,EAAE,gBAAgB,EAAE;;YAE5D,KAAK,WACH,IAAI;;;;;uBAKK,KAAK,cAAc;;;;cAK5B,QAAQ;YACV,YACE,IAAI;;;;yBAIO,KAAK,YAAY,iBAAiB,iBAAiB;qBACvD,KAAK,eAAe;;8BAEX,UAAU,sBAAsB,cAAc,SAAS,IAAI,gBAAgB,QAAQ;;cAGnG,QAAQ;;;;CAIpB;;EAEyB,KAAA,SAAA,CAAC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgN5C;;AACH;AAzSG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,gBAAA,WAAA,SAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AACjD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,eAAA,KAAA,CAAA;AAClE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAW,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,WAAA,KAAA,CAAA;AAC9D,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAE1B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,eAAA,KAAA,CAAA;AACzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,aAAA,KAAA,CAAA;AACzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAqB,CAAC,CAAA,GAAA,gBAAA,WAAA,qBAAA,KAAA,CAAA;AAV5DA,kBAAAA,WAAAA,CAAAA,kBAAc,eAAe,CAAA,GAAA,eAAA"}

package/dist/{tree-BO6BXI2b.js → tree-Ch4W8qXQ.js}

@@ -1,7 +1,8 @@
-import { t as TickledController } from "./tickled-controller-DkAU-0qL.js";
+import { t as TickledController } from "./tickled-controller-h9GmJ_bU.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
-import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
+import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import "./interaction-D5XdKzbR.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
@@ -1418,4 +1419,4 @@ var TreeController = class {
 //#endregion
 export { TreeDataModel as i, TreeListElement as n, TreeBaseElement as r, TreeController as t };
 
-//# sourceMappingURL=tree-BO6BXI2b.js.map
+//# sourceMappingURL=tree-Ch4W8qXQ.js.map