@vonage/vivid 5.0.0 → 5.2.0

package/bundled/definition2.cjs

@@ -0,0 +1,20 @@
+"use strict";const r=require("./vivid-element.cjs"),h=require("./definition12.cjs"),u=require("./_has.cjs"),b=require("./class-names.cjs"),d=require("./when.cjs"),w=":host{display:inline-block;vertical-align:sub}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-icon-warning-primary, var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-0{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-1{--_icon-block-size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";function x(n,o){switch(n){case 0:return function(){return o.apply(this,arguments)};case 1:return function(e){return o.apply(this,arguments)};case 2:return function(e,t){return o.apply(this,arguments)};case 3:return function(e,t,i){return o.apply(this,arguments)};case 4:return function(e,t,i,a){return o.apply(this,arguments)};case 5:return function(e,t,i,a,s){return o.apply(this,arguments)};case 6:return function(e,t,i,a,s,v){return o.apply(this,arguments)};case 7:return function(e,t,i,a,s,v,p){return o.apply(this,arguments)};case 8:return function(e,t,i,a,s,v,p,m){return o.apply(this,arguments)};case 9:return function(e,t,i,a,s,v,p,m,f){return o.apply(this,arguments)};case 10:return function(e,t,i,a,s,v,p,m,f,U){return o.apply(this,arguments)};default:throw new Error("First argument to _arity must be a non-negative integer no greater than ten")}}function k(n){return n}var C=u._curry1(k),L=u._curry2(function(o,e){var t={};return x(e.length,function(){var i=o.apply(this,arguments);return u._has(i,t)||(t[i]=e.apply(this,arguments)),t[i]})});const $="https://icon.resources.vonage.com",y="4.6.9",E={toView(n){return n===void 0?null:n.toString()},fromView(n){if(typeof n=="string"&&(n=parseFloat(n.toString())),typeof n=="number")return isNaN(n)||!isFinite(n)?void 0:n}},g=`<svg width="80%" height="80%" viewBox="0 0 64 64">
+    <g>
+        <g stroke-width="6" stroke-linecap="round" fill="none">
+            <path stroke="currentColor" d="M4,32 c0,15,12,28,28,28c8,0,16-4,21-9">
+            </path>
+            <path d="M60,32 C60,16,47.464,4,32,4S4,16,4,32">
+            </path>
+            <animateTransform values="0,32,32;360,32,32" attributeName="transform" type="rotate" repeatCount="indefinite" dur="750ms">
+            </animateTransform>
+        </g>
+    </g>
+</svg>`;var O=Object.defineProperty,D=Object.getOwnPropertyDescriptor,l=(n,o,e,t)=>{for(var i=t>1?void 0:t?D(o,e):o,a=n.length-1,s;a>=0;a--)(s=n[a])&&(i=(t?s(o,e,i):s(i))||i);return t&&i&&O(o,e,i),i};const I=500,S=2e3,z=(n,o)=>[$,`v${o}`,n].join("/"),T=({ok:n,headers:o})=>{if(!n||o.get("content-type")!=="image/svg+xml")throw new Error("Something went wrong")},N=n=>(T(n),n.text()),P=(n,o)=>fetch(z([n,"svg"].join("."),y),{signal:o}).then(N),R=L(C,(n,o)=>n.trim()?P(n,o):Promise.resolve(""));class c extends r.VividElement{constructor(){super(...arguments),this.iconLoaded=!1,this.#t=null}get iconUrl(){return this.name?z(`${this.name}.svg`,y):this._svg}#t;async nameChanged(){this.#t&&this.#t.abort(),this.#t=new AbortController,this._svg=void 0,this.iconLoaded=!1;let o=setTimeout(()=>{this._svg=g,o=setTimeout(()=>{this._svg===g&&(this._svg=void 0)},S)},I);await R(this.name?this.name:"",this.#t.signal).then(e=>{this._svg=e}).catch(()=>{this._svg=void 0}).finally(()=>{clearTimeout(o),this.iconLoaded=!0})}}l([r.attr],c.prototype,"connotation",2);l([r.attr({converter:E})],c.prototype,"size",2);l([r.observable],c.prototype,"_svg",2);l([r.observable],c.prototype,"iconLoaded",2);l([r.attr],c.prototype,"label",2);l([r.attr],c.prototype,"name",2);l([r.volatile],c.prototype,"iconUrl",1);const V=({connotation:n,size:o})=>b.classNames("control",[`connotation-${n}`,!!n],[`size-${o}`,typeof o=="number"]),A=n=>{const o=n.tagFor(h.VisuallyHidden),e=t=>!t.label||t.label.trim().length===0;return r.html`
+		<figure class="${V}" ?aria-hidden="${t=>e(t)}" ?aria-busy="${t=>!t.iconLoaded}">
+			<slot>
+				${d.when(t=>!t.iconLoaded,r.html`<img alt="${t=>t.name}" src="${t=>t.iconUrl}" />`)}
+				${d.when(t=>t.iconLoaded&&t._svg,t=>r.html`${t._svg}`)}
+			</slot>
+			<${o} class="label">${t=>t.label}</${o}>
+		</figure>
+	`},_=r.defineVividComponent("icon",c,A,[h.visuallyHiddenDefinition],{styles:w}),H=r.createRegisterFunction(_);exports.Icon=c;exports.iconDefinition=_;exports.registerIcon=H;

package/bundled/definition2.js

@@ -0,0 +1,180 @@
+import { V as f, a as v, o as y, v as b, h as m, c as w, d as x } from "./vivid-element.js";
+import { V as k, v as C } from "./definition12.js";
+import { a as L, b as $, _ as E } from "./_has.js";
+import { c as O } from "./class-names.js";
+import { w as d } from "./when.js";
+const S = ":host{display:inline-block;vertical-align:sub}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-icon-warning-primary, var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-0{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-1{--_icon-block-size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
+function T(o, n) {
+  switch (o) {
+    case 0:
+      return function() {
+        return n.apply(this, arguments);
+      };
+    case 1:
+      return function(a) {
+        return n.apply(this, arguments);
+      };
+    case 2:
+      return function(a, t) {
+        return n.apply(this, arguments);
+      };
+    case 3:
+      return function(a, t, r) {
+        return n.apply(this, arguments);
+      };
+    case 4:
+      return function(a, t, r, e) {
+        return n.apply(this, arguments);
+      };
+    case 5:
+      return function(a, t, r, e, i) {
+        return n.apply(this, arguments);
+      };
+    case 6:
+      return function(a, t, r, e, i, l) {
+        return n.apply(this, arguments);
+      };
+    case 7:
+      return function(a, t, r, e, i, l, p) {
+        return n.apply(this, arguments);
+      };
+    case 8:
+      return function(a, t, r, e, i, l, p, u) {
+        return n.apply(this, arguments);
+      };
+    case 9:
+      return function(a, t, r, e, i, l, p, u, _) {
+        return n.apply(this, arguments);
+      };
+    case 10:
+      return function(a, t, r, e, i, l, p, u, _, G) {
+        return n.apply(this, arguments);
+      };
+    default:
+      throw new Error("First argument to _arity must be a non-negative integer no greater than ten");
+  }
+}
+function D(o) {
+  return o;
+}
+var I = /* @__PURE__ */ L(D), V = /* @__PURE__ */ $(function(n, a) {
+  var t = {};
+  return T(a.length, function() {
+    var r = n.apply(this, arguments);
+    return E(r, t) || (t[r] = a.apply(this, arguments)), t[r];
+  });
+});
+const N = "https://icon.resources.vonage.com", h = "4.6.9", P = {
+  toView(o) {
+    return o === void 0 ? null : o.toString();
+  },
+  fromView(o) {
+    if (typeof o == "string" && (o = parseFloat(o.toString())), typeof o == "number")
+      return isNaN(o) || !isFinite(o) ? void 0 : o;
+  }
+}, g = `<svg width="80%" height="80%" viewBox="0 0 64 64">
+    <g>
+        <g stroke-width="6" stroke-linecap="round" fill="none">
+            <path stroke="currentColor" d="M4,32 c0,15,12,28,28,28c8,0,16-4,21-9">
+            </path>
+            <path d="M60,32 C60,16,47.464,4,32,4S4,16,4,32">
+            </path>
+            <animateTransform values="0,32,32;360,32,32" attributeName="transform" type="rotate" repeatCount="indefinite" dur="750ms">
+            </animateTransform>
+        </g>
+    </g>
+</svg>`;
+var R = Object.defineProperty, A = Object.getOwnPropertyDescriptor, c = (o, n, a, t) => {
+  for (var r = t > 1 ? void 0 : t ? A(n, a) : n, e = o.length - 1, i; e >= 0; e--)
+    (i = o[e]) && (r = (t ? i(n, a, r) : i(r)) || r);
+  return t && r && R(n, a, r), r;
+};
+const H = 500, U = 2e3, z = (o, n) => [N, `v${n}`, o].join("/"), F = ({ ok: o, headers: n }) => {
+  if (!o || n.get("content-type") !== "image/svg+xml")
+    throw new Error("Something went wrong");
+}, j = (o) => (F(o), o.text()), B = (o, n) => fetch(z([o, "svg"].join("."), h), {
+  signal: n
+}).then(j), M = V(
+  I,
+  (o, n) => o.trim() ? B(o, n) : Promise.resolve("")
+);
+class s extends f {
+  constructor() {
+    super(...arguments), this.iconLoaded = !1, this.#t = null;
+  }
+  get iconUrl() {
+    return this.name ? z(`${this.name}.svg`, h) : this._svg;
+  }
+  #t;
+  async nameChanged() {
+    this.#t && this.#t.abort(), this.#t = new AbortController(), this._svg = void 0, this.iconLoaded = !1;
+    let n = setTimeout(() => {
+      this._svg = g, n = setTimeout(() => {
+        this._svg === g && (this._svg = void 0);
+      }, U);
+    }, H);
+    await M(this.name ? this.name : "", this.#t.signal).then((a) => {
+      this._svg = a;
+    }).catch(() => {
+      this._svg = void 0;
+    }).finally(() => {
+      clearTimeout(n), this.iconLoaded = !0;
+    });
+  }
+}
+c([
+  v
+], s.prototype, "connotation", 2);
+c([
+  v({ converter: P })
+], s.prototype, "size", 2);
+c([
+  y
+], s.prototype, "_svg", 2);
+c([
+  y
+], s.prototype, "iconLoaded", 2);
+c([
+  v
+], s.prototype, "label", 2);
+c([
+  v
+], s.prototype, "name", 2);
+c([
+  b
+], s.prototype, "iconUrl", 1);
+const W = ({ connotation: o, size: n }) => O(
+  "control",
+  [`connotation-${o}`, !!o],
+  [`size-${n}`, typeof n == "number"]
+), Y = (o) => {
+  const n = o.tagFor(k), a = (t) => !t.label || t.label.trim().length === 0;
+  return m`
+		<figure class="${W}" ?aria-hidden="${(t) => a(t)}" ?aria-busy="${(t) => !t.iconLoaded}">
+			<slot>
+				${d(
+    (t) => !t.iconLoaded,
+    m`<img alt="${(t) => t.name}" src="${(t) => t.iconUrl}" />`
+  )}
+				${d(
+    (t) => t.iconLoaded && t._svg,
+    (t) => m`${t._svg}`
+  )}
+			</slot>
+			<${n} class="label">${(t) => t.label}</${n}>
+		</figure>
+	`;
+}, q = x(
+  "icon",
+  s,
+  Y,
+  [C],
+  {
+    styles: S
+  }
+), tt = w(q);
+export {
+  s as I,
+  q as i,
+  tt as r
+};

package/bundled/definition20.cjs

@@ -0,0 +1,20 @@
+"use strict";const b=require("./definition2.cjs"),e=require("./vivid-element.cjs"),s=require("./affix.cjs"),p=require("./host-semantics.cjs"),f=require("./localized.cjs"),u=require("./class-names.cjs"),m=":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}.close{position:absolute;display:flex;align-items:center;justify-content:center;border:none;border-radius:4px;background:transparent;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";var _=Object.defineProperty,c=(t,o,a,i)=>{for(var r=void 0,l=t.length-1,v;l>=0;l--)(v=t[l])&&(r=v(o,a,r)||r);return r&&_(o,a,r),r};class n extends p.HostSemantics(s.AffixIconWithTrailing(f.Localized(e.VividElement))){constructor(){super(...arguments),this.removable=!1,this.tabIndex="-1",this.active=!1}_handleCloseClick(o){o.stopImmediatePropagation(),this.$emit("close")}_onKeyDown(o){return!this.removable||o.key!=="Delete"?!0:(o.stopImmediatePropagation(),this.$emit("close"),!1)}}c([e.attr({mode:"boolean"})],n.prototype,"disabled");c([e.attr],n.prototype,"connotation");c([e.attr],n.prototype,"shape");c([e.attr],n.prototype,"label");c([e.attr({mode:"boolean"})],n.prototype,"removable");c([e.attr({mode:"fromView"})],n.prototype,"tabIndex");c([e.observable],n.prototype,"active");const x=({connotation:t,disabled:o,active:a,iconTrailing:i,shape:r,removable:l})=>u.classNames("base",[`connotation-${t}`,!!t&&!!a],[`shape-${r}`,!!r],["disabled",!!o],["selected",!!a],["icon-trailing",i],["removable",l]);function h(t){const o=s.affixIconTemplateFactory(t);return e.html`<button
+		aria-label="${a=>a.locale.tab.dismissButtonLabel}"
+		class="close"
+		id="close-btn"
+		@click="${(a,i)=>a._handleCloseClick(i.event)}"
+	>
+		${()=>o("close-line",s.IconWrapper.Span)}
+	</button>`}const y=t=>{const o=s.affixIconTemplateFactory(t);return e.html`
+		<template
+			slot="tab"
+			?active="${a=>a.active}"
+			${p.applyHostSemantics({role:"tab",ariaDisabled:a=>a.disabled,ariaSelected:a=>a.active})}
+			@keydown="${(a,i)=>a._onKeyDown(i.event)}"
+		>
+			<div class="${x}">
+				${a=>o(a.icon,s.IconWrapper.Slot)} ${a=>a.label}
+				${a=>a.removable?h(t):null}
+			</div>
+		</template>
+	`},d=e.defineVividComponent("tab",n,y,[b.iconDefinition],{styles:m}),g=e.createRegisterFunction(d);exports.Tab=n;exports.registerTab=g;exports.tabDefinition=d;

package/bundled/definition20.js

@@ -0,0 +1,106 @@
+import { i as b } from "./definition2.js";
+import { V as f, a as i, o as m, h as v, c as u, d as _ } from "./vivid-element.js";
+import { A as x, a as p, I as d } from "./affix.js";
+import { H as h, a as y } from "./host-semantics.js";
+import { L as g } from "./localized.js";
+import { c as w } from "./class-names.js";
+const k = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}.close{position:absolute;display:flex;align-items:center;justify-content:center;border:none;border-radius:4px;background:transparent;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";
+var $ = Object.defineProperty, n = (e, o, a, c) => {
+  for (var t = void 0, l = e.length - 1, s; l >= 0; l--)
+    (s = e[l]) && (t = s(o, a, t) || t);
+  return t && $(o, a, t), t;
+};
+class r extends h(
+  x(g(f))
+) {
+  constructor() {
+    super(...arguments), this.removable = !1, this.tabIndex = "-1", this.active = !1;
+  }
+  _handleCloseClick(o) {
+    o.stopImmediatePropagation(), this.$emit("close");
+  }
+  _onKeyDown(o) {
+    return !this.removable || o.key !== "Delete" ? !0 : (o.stopImmediatePropagation(), this.$emit("close"), !1);
+  }
+}
+n([
+  i({ mode: "boolean" })
+], r.prototype, "disabled");
+n([
+  i
+], r.prototype, "connotation");
+n([
+  i
+], r.prototype, "shape");
+n([
+  i
+], r.prototype, "label");
+n([
+  i({ mode: "boolean" })
+], r.prototype, "removable");
+n([
+  i({ mode: "fromView" })
+], r.prototype, "tabIndex");
+n([
+  m
+], r.prototype, "active");
+const I = ({
+  connotation: e,
+  disabled: o,
+  active: a,
+  iconTrailing: c,
+  shape: t,
+  removable: l
+}) => w(
+  "base",
+  [`connotation-${e}`, !!e && !!a],
+  [`shape-${t}`, !!t],
+  ["disabled", !!o],
+  ["selected", !!a],
+  ["icon-trailing", c],
+  ["removable", l]
+);
+function C(e) {
+  const o = p(e);
+  return v`<button
+		aria-label="${(a) => a.locale.tab.dismissButtonLabel}"
+		class="close"
+		id="close-btn"
+		@click="${(a, c) => a._handleCloseClick(c.event)}"
+	>
+		${() => o("close-line", d.Span)}
+	</button>`;
+}
+const T = (e) => {
+  const o = p(e);
+  return v`
+		<template
+			slot="tab"
+			?active="${(a) => a.active}"
+			${y({
+    role: "tab",
+    ariaDisabled: (a) => a.disabled,
+    ariaSelected: (a) => a.active
+  })}
+			@keydown="${(a, c) => a._onKeyDown(c.event)}"
+		>
+			<div class="${I}">
+				${(a) => o(a.icon, d.Slot)} ${(a) => a.label}
+				${(a) => a.removable ? C(e) : null}
+			</div>
+		</template>
+	`;
+}, z = _(
+  "tab",
+  r,
+  T,
+  [b],
+  {
+    styles: k
+  }
+), H = u(z);
+export {
+  r as T,
+  H as r,
+  z as t
+};

package/bundled/definition21.cjs

@@ -0,0 +1,5 @@
+"use strict";const e=require("./vivid-element.cjs"),t=require("./host-semantics.cjs");class a extends t.HostSemantics(e.VividElement){}const i=e.html`
+	<template slot="tabpanel" ${t.applyHostSemantics({role:"tabpanel"})}>
+		<slot></slot>
+	</template>
+`,n=e.defineVividComponent("tab-panel",a,i,[],{}),s=e.createRegisterFunction(n);exports.registerTabPanel=s;exports.tabPanelDefinition=n;

package/bundled/definition21.js

@@ -0,0 +1,19 @@
+import { V as t, h as a, c as e, d as s } from "./vivid-element.js";
+import { H as n, a as l } from "./host-semantics.js";
+class o extends n(t) {
+}
+const i = a`
+	<template slot="tabpanel" ${l({ role: "tabpanel" })}>
+		<slot></slot>
+	</template>
+`, m = s(
+  "tab-panel",
+  o,
+  i,
+  [],
+  {}
+), b = e(m);
+export {
+  b as r,
+  m as t
+};

package/bundled/definition22.cjs

@@ -0,0 +1,24 @@
+"use strict";const h=require("./definition2.cjs"),r=require("./vivid-element.cjs"),d=require("./affix.cjs"),u=require("./host-semantics.cjs"),x=require("./dom.cjs"),v=require("./slotted.cjs"),b=require("./children.cjs"),_=require("./class-names.cjs"),m=require("./when.cjs"),g=require("./ref.cjs"),y=":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-tree-item-accent-firm, var(--vvd-color-canvas-text))}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}@media (hover: hover){.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}}.items{display:flex;flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";var C=Object.defineProperty,n=(t,o,e,l)=>{for(var i=void 0,s=t.length-1,p;s>=0;s--)(p=t[s])&&(i=p(o,e,i)||i);return i&&C(o,e,i),i};function c(t){return x.isHTMLElement(t)&&(t.getAttribute("role")==="treeitem"||t instanceof a)}class a extends u.HostSemantics(d.AffixIcon(r.VividElement)){constructor(){super(...arguments),this.expanded=!1,this.selected=!1,this.disabled=!1,this.focusable=!1,this.isNestedItem=()=>c(this.parentElement),this.handleExpandCollapseButtonClick=o=>{!this.disabled&&!o.defaultPrevented&&(this.expanded=!this.expanded)},this.handleFocus=o=>{this.setAttribute("tabindex","0")},this.handleBlur=o=>{this.setAttribute("tabindex","-1")}}expandedChanged(){this.$fastController.isConnected&&this.$emit("expanded-change",this)}selectedChanged(){this.$fastController.isConnected&&this.$emit("selected-change",this)}itemsChanged(){this.$fastController.isConnected&&this.items.forEach(o=>{c(o)&&(o.nested=!0)})}static focusItem(o){o.focusable=!0,o.focus()}childItemLength(){return this.childItems.filter(e=>c(e)).length}}n([r.attr],a.prototype,"text");n([r.attr({mode:"boolean"})],a.prototype,"expanded");n([r.attr({mode:"boolean"})],a.prototype,"selected");n([r.attr({mode:"boolean"})],a.prototype,"disabled");n([r.observable],a.prototype,"focusable");n([r.observable],a.prototype,"childItems");n([r.observable],a.prototype,"items");n([r.observable],a.prototype,"nested");n([r.observable],a.prototype,"renderCollapsedChildren");const I=({disabled:t,selected:o})=>_.classNames("control",["disabled",t],["selected",!!o]),$=t=>{const o=t.tagFor(h.Icon);return r.html`
+	<div aria-hidden="true"
+		class="expandCollapseButton"
+		@click="${(e,l)=>e.handleExpandCollapseButtonClick(l.event)}"
+			${g.ref("expandCollapseButton")}
+	>
+		<${o} class="expandCollapseIcon" name="${e=>e.expanded?"chevron-down-line":"chevron-right-line"}"></${o}>
+	</div>`},w=t=>{const o=d.affixIconTemplateFactory(t);return r.html` <template
+		slot="${e=>e.isNestedItem()?"item":void 0}"
+		tabindex="-1"
+		${u.applyHostSemantics({role:"treeitem",ariaExpanded:e=>e.childItems&&e.childItems.length>0?e.expanded:void 0,ariaSelected:e=>e.selected,ariaDisabled:e=>e.disabled})}
+		@focusin="${(e,l)=>e.handleFocus(l.event)}"
+		@focusout="${(e,l)=>e.handleBlur(l.event)}"
+		${b.children({property:"childItems",filter:v.elements(t.tagFor(a))})}
+	>
+		<div class="${I}">
+			${m.when(e=>e.childItems&&e.childItems.length>0,$(t))}
+			${e=>o(e.icon,d.IconWrapper.Slot)}
+			${e=>e.text}
+		</div>
+		${m.when(e=>e.childItems&&e.childItems.length>0&&e.expanded,r.html` <div role="group" class="items">
+				<slot name="item" ${v.slotted("items")}></slot>
+			</div>`)}
+	</template>`},f=r.defineVividComponent("tree-item",a,w,[h.iconDefinition],{styles:y}),k=r.createRegisterFunction(f);exports.TreeItem=a;exports.isTreeItemElement=c;exports.registerTreeItem=k;exports.treeItemDefinition=f;

package/bundled/definition22.js

@@ -0,0 +1,151 @@
+import { I as f, i as h } from "./definition2.js";
+import { V as u, a as c, o as i, h as p, c as x, d as b } from "./vivid-element.js";
+import { b as _, a as g, I as y } from "./affix.js";
+import { H as C, a as I } from "./host-semantics.js";
+import { i as $ } from "./dom.js";
+import { e as w, s as k } from "./slotted.js";
+import { c as B } from "./children.js";
+import { c as T } from "./class-names.js";
+import { w as m } from "./when.js";
+import { r as E } from "./ref.js";
+const z = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-tree-item-accent-firm, var(--vvd-color-canvas-text))}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}:host(:focus-visible) .control{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}@media (hover: hover){.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}}.items{display:flex;flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
+var F = Object.defineProperty, r = (t, o, e, n) => {
+  for (var l = void 0, s = t.length - 1, v; s >= 0; s--)
+    (v = t[s]) && (l = v(o, e, l) || l);
+  return l && F(o, e, l), l;
+};
+function d(t) {
+  return $(t) && (t.getAttribute("role") === "treeitem" || t instanceof a);
+}
+class a extends C(_(u)) {
+  constructor() {
+    super(...arguments), this.expanded = !1, this.selected = !1, this.disabled = !1, this.focusable = !1, this.isNestedItem = () => d(this.parentElement), this.handleExpandCollapseButtonClick = (o) => {
+      !this.disabled && !o.defaultPrevented && (this.expanded = !this.expanded);
+    }, this.handleFocus = (o) => {
+      this.setAttribute("tabindex", "0");
+    }, this.handleBlur = (o) => {
+      this.setAttribute("tabindex", "-1");
+    };
+  }
+  expandedChanged() {
+    this.$fastController.isConnected && this.$emit("expanded-change", this);
+  }
+  selectedChanged() {
+    this.$fastController.isConnected && this.$emit("selected-change", this);
+  }
+  itemsChanged() {
+    this.$fastController.isConnected && this.items.forEach((o) => {
+      d(o) && (o.nested = !0);
+    });
+  }
+  /**
+   * Places document focus on a tree item
+   *
+   * @public
+   * @param el - the element to focus
+   */
+  static focusItem(o) {
+    o.focusable = !0, o.focus();
+  }
+  /**
+   * Gets number of children
+   *
+   * @internal
+   */
+  childItemLength() {
+    return this.childItems.filter(
+      (e) => d(e)
+    ).length;
+  }
+}
+r([
+  c
+], a.prototype, "text");
+r([
+  c({ mode: "boolean" })
+], a.prototype, "expanded");
+r([
+  c({
+    mode: "boolean"
+  })
+], a.prototype, "selected");
+r([
+  c({ mode: "boolean" })
+], a.prototype, "disabled");
+r([
+  i
+], a.prototype, "focusable");
+r([
+  i
+], a.prototype, "childItems");
+r([
+  i
+], a.prototype, "items");
+r([
+  i
+], a.prototype, "nested");
+r([
+  i
+], a.prototype, "renderCollapsedChildren");
+const A = ({ disabled: t, selected: o }) => T(
+  "control",
+  ["disabled", t],
+  ["selected", !!o]
+), H = (t) => {
+  const o = t.tagFor(f);
+  return p`
+	<div aria-hidden="true"
+		class="expandCollapseButton"
+		@click="${(e, n) => e.handleExpandCollapseButtonClick(n.event)}"
+			${E("expandCollapseButton")}
+	>
+		<${o} class="expandCollapseIcon" name="${(e) => e.expanded ? "chevron-down-line" : "chevron-right-line"}"></${o}>
+	</div>`;
+}, S = (t) => {
+  const o = g(t);
+  return p` <template
+		slot="${(e) => e.isNestedItem() ? "item" : void 0}"
+		tabindex="-1"
+		${I({
+    role: "treeitem",
+    ariaExpanded: (e) => e.childItems && e.childItems.length > 0 ? e.expanded : void 0,
+    ariaSelected: (e) => e.selected,
+    ariaDisabled: (e) => e.disabled
+  })}
+		@focusin="${(e, n) => e.handleFocus(n.event)}"
+		@focusout="${(e, n) => e.handleBlur(n.event)}"
+		${B({
+    property: "childItems",
+    filter: w(t.tagFor(a))
+  })}
+	>
+		<div class="${A}">
+			${m(
+    (e) => e.childItems && e.childItems.length > 0,
+    H(t)
+  )}
+			${(e) => o(e.icon, y.Slot)}
+			${(e) => e.text}
+		</div>
+		${m(
+    (e) => e.childItems && e.childItems.length > 0 && e.expanded,
+    p` <div role="group" class="items">
+				<slot name="item" ${k("items")}></slot>
+			</div>`
+  )}
+	</template>`;
+}, D = b(
+  "tree-item",
+  a,
+  S,
+  [h],
+  {
+    styles: z
+  }
+), G = x(D);
+export {
+  a as T,
+  d as i,
+  G as r,
+  D as t
+};