@vonage/vivid 5.24.0 → 5.27.0

package/bundled/definition25.cjs

@@ -1,7 +1,7 @@
-const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./decorate.cjs`),a=require(`./class-names.cjs`),o=require(`./definition3.cjs`),s=require(`./affix.cjs`);var c=`:host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}`,l=class extends s.n(e.t){constructor(...e){super(...e),this.headinglevel=2,this.expanded=!1,this.noIndicator=!1,this.clickHandler=()=>{this.expanded=!this.expanded,this.change()},this.change=()=>{this.$emit(`change`)}}};i.t([e.m({attribute:`heading-level`,mode:`fromView`,converter:e.h})],l.prototype,`headinglevel`,void 0),i.t([e.m],l.prototype,`appearance`,void 0),i.t([e.m({mode:`boolean`})],l.prototype,`expanded`,void 0),i.t([e.m],l.prototype,`id`,void 0),i.t([e.m],l.prototype,`heading`,void 0),i.t([e.m({attribute:`secondary-text`})],l.prototype,`secondaryText`,void 0),i.t([e.A],l.prototype,`_headingSlottedContent`,void 0),i.t([e.m({mode:`boolean`,attribute:`no-indicator`})],l.prototype,`noIndicator`,void 0),i.t([e.m],l.prototype,`meta`,void 0),i.t([e.A],l.prototype,`_metaSlottedContent`,void 0),i.t([e.m],l.prototype,`size`,void 0);var u=(i,o)=>{let c=s.a(i),l=e.p.partial(o);return e.p`
+const e=require("./vivid-element.cjs"),t=require("./slotted.cjs"),n=require("./ref.cjs"),r=require("./when.cjs"),i=require("./decorate.cjs"),a=require("./class-names.cjs"),o=require("./definition2.cjs"),s=require("./affix.cjs"),c=require("./component-enum.cjs");var l=`:host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}`,u=c.t([`ghost`,`filled`,`ghost-light`],`ghost`),d=class extends s.n(e.t){constructor(...e){super(...e),this.headinglevel=2,this.expanded=!1,this.noIndicator=!1,this.clickHandler=()=>{this.expanded=!this.expanded,this.change()},this.change=()=>{this.$emit(`change`)}}};i.t([e.m({attribute:`heading-level`,mode:`fromView`,converter:e.h})],d.prototype,`headinglevel`,void 0),i.t([e.m],d.prototype,`appearance`,void 0),i.t([e.m({mode:`boolean`})],d.prototype,`expanded`,void 0),i.t([e.m],d.prototype,`id`,void 0),i.t([e.m],d.prototype,`heading`,void 0),i.t([e.m({attribute:`secondary-text`})],d.prototype,`secondaryText`,void 0),i.t([e.n({deprecatedPropertyName:`secondaryText`,fromDeprecated:e=>e,toDeprecated:e=>e}),e.m({attribute:`text-secondary`})],d.prototype,`textSecondary`,void 0),i.t([e.A],d.prototype,`_headingSlottedContent`,void 0),i.t([e.m({mode:`boolean`,attribute:`no-indicator`})],d.prototype,`noIndicator`,void 0),i.t([e.m],d.prototype,`meta`,void 0),i.t([e.A],d.prototype,`_metaSlottedContent`,void 0),i.t([e.m],d.prototype,`size`,void 0);var f=(i,o)=>{let c=s.a(i),l=e.p.partial(o);return e.p`
 		<${l} class="heading-container">
 			<button
-				class="${e=>a.t(`heading-button`,[`appearance-${e.appearance}`,!!e.appearance],[`size-${e.size}`,!!e.size])}"
+				class="${e=>a.t(`heading-button`,`connotation-accent`,`appearance-${u.parse(e.appearance)}`,`with-idle`,`with-hover`,`with-active`,[`size-${e.size}`,!!e.size])}"
 				id="${e=>e.id}"
 				aria-expanded="${e=>e.expanded}"
 				aria-controls="${e=>e.id}-panel"
@@ -16,8 +16,8 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
 						<slot name="heading" ${t.t(`_headingSlottedContent`)}></slot>
 						${r.t(e=>e.heading&&!e._headingSlottedContent?.length,e.p`${e=>e.heading}`)}
 					</span>
-					${r.t(e=>!!e.secondaryText,e.p`<span class="heading-secondary"
-							>${e=>e.secondaryText}</span
+					${r.t(e=>!!e.textSecondary,e.p`<span class="heading-secondary"
+							>${e=>e.textSecondary}</span
 						>`)}
 				</span>
 
@@ -31,8 +31,8 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
 
 			</button>
 		</${l}>
-	`},d=e.u(`accordion-item`,l,t=>e.p`
-	${e=>u(t,`h${e.headinglevel}`)}
+	`},p=e.u(`accordion-item`,d,t=>e.p`
+	${e=>f(t,`h${e.headinglevel}`)}
 	<div
 		id="${e=>e.id}-panel"
 		aria-labelledby="${e=>e.id}"
@@ -41,4 +41,4 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
 	>
 		<slot></slot>
 	</div>
-`,[o.t],{styles:c}),f=e.d(d);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});
+`,[o.t],{styles:l}),m=e.d(p);Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});

package/bundled/definition25.js

@@ -1,13 +1,18 @@
-import { A as e, d as t, h as n, m as r, p as i, t as a, u as o } from "./vivid-element.js";
-import { t as s } from "./slotted.js";
-import { t as c } from "./ref.js";
-import { t as l } from "./when.js";
-import { t as u } from "./decorate.js";
-import { t as d } from "./class-names.js";
-import { t as f } from "./definition3.js";
-import { a as p, i as m, n as h } from "./affix.js";
+import { A as e, d as t, h as n, m as r, n as i, p as a, t as o, u as s } from "./vivid-element.js";
+import { t as c } from "./slotted.js";
+import { t as l } from "./ref.js";
+import { t as u } from "./when.js";
+import { t as d } from "./decorate.js";
+import { t as f } from "./class-names.js";
+import { t as p } from "./definition2.js";
+import { a as m, i as h, n as g } from "./affix.js";
+import { t as _ } from "./component-enum.js";
 //#region src/lib/accordion-item/accordion-item.scss?inline
-var g = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}", _ = class extends h(a) {
+var v = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex-direction:column;flex:auto;gap:4px;min-inline-size:0;display:flex}.heading-primary{min-inline-size:0}.heading-secondary{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) .heading-secondary,.heading-button.size-condensed .heading-secondary{font:var(--vvd-typography-base)}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}", y = _([
+	"ghost",
+	"filled",
+	"ghost-light"
+], "ghost"), b = class extends g(o) {
 	constructor(...e) {
 		super(...e), this.headinglevel = 2, this.expanded = !1, this.noIndicator = !1, this.clickHandler = () => {
 			this.expanded = !this.expanded, this.change();
@@ -16,44 +21,48 @@ var g = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-ite
 		};
 	}
 };
-u([r({
+d([r({
 	attribute: "heading-level",
 	mode: "fromView",
 	converter: n
-})], _.prototype, "headinglevel", void 0), u([r], _.prototype, "appearance", void 0), u([r({ mode: "boolean" })], _.prototype, "expanded", void 0), u([r], _.prototype, "id", void 0), u([r], _.prototype, "heading", void 0), u([r({ attribute: "secondary-text" })], _.prototype, "secondaryText", void 0), u([e], _.prototype, "_headingSlottedContent", void 0), u([r({
+})], b.prototype, "headinglevel", void 0), d([r], b.prototype, "appearance", void 0), d([r({ mode: "boolean" })], b.prototype, "expanded", void 0), d([r], b.prototype, "id", void 0), d([r], b.prototype, "heading", void 0), d([r({ attribute: "secondary-text" })], b.prototype, "secondaryText", void 0), d([i({
+	deprecatedPropertyName: "secondaryText",
+	fromDeprecated: (e) => e,
+	toDeprecated: (e) => e
+}), r({ attribute: "text-secondary" })], b.prototype, "textSecondary", void 0), d([e], b.prototype, "_headingSlottedContent", void 0), d([r({
 	mode: "boolean",
 	attribute: "no-indicator"
-})], _.prototype, "noIndicator", void 0), u([r], _.prototype, "meta", void 0), u([e], _.prototype, "_metaSlottedContent", void 0), u([r], _.prototype, "size", void 0);
+})], b.prototype, "noIndicator", void 0), d([r], b.prototype, "meta", void 0), d([e], b.prototype, "_metaSlottedContent", void 0), d([r], b.prototype, "size", void 0);
 //#endregion
 //#region src/lib/accordion-item/accordion-item.template.ts
-var v = (e, t) => {
-	let n = p(e), r = i.partial(t);
-	return i`
+var x = (e, t) => {
+	let n = m(e), r = a.partial(t);
+	return a`
 		<${r} class="heading-container">
 			<button
-				class="${(e) => d("heading-button", [`appearance-${e.appearance}`, !!e.appearance], [`size-${e.size}`, !!e.size])}"
+				class="${(e) => f("heading-button", "connotation-accent", `appearance-${y.parse(e.appearance)}`, "with-idle", "with-hover", "with-active", [`size-${e.size}`, !!e.size])}"
 				id="${(e) => e.id}"
 				aria-expanded="${(e) => e.expanded}"
 				aria-controls="${(e) => e.id}-panel"
 				@click="${(e) => e.clickHandler()}"
-				${c("expandbutton")}
+				${l("expandbutton")}
 			>
 
-				${(e) => e.iconTrailing ? null : n(e.icon, m.Slot)}
+				${(e) => e.iconTrailing ? null : n(e.icon, h.Slot)}
 
 				<span class="heading-content">
 					<span class="heading-primary">
-						<slot name="heading" ${s("_headingSlottedContent")}></slot>
-						${l((e) => e.heading && !e._headingSlottedContent?.length, i`${(e) => e.heading}`)}
+						<slot name="heading" ${c("_headingSlottedContent")}></slot>
+						${u((e) => e.heading && !e._headingSlottedContent?.length, a`${(e) => e.heading}`)}
 					</span>
-					${l((e) => !!e.secondaryText, i`<span class="heading-secondary"
-							>${(e) => e.secondaryText}</span
+					${u((e) => !!e.textSecondary, a`<span class="heading-secondary"
+							>${(e) => e.textSecondary}</span
 						>`)}
 				</span>
 
 				<span class="meta">
-					<slot name="meta" ${s("_metaSlottedContent")}></slot>
-					${l((e) => e.meta && !e._metaSlottedContent?.length, i`${(e) => e.meta}`)}
+					<slot name="meta" ${c("_metaSlottedContent")}></slot>
+					${u((e) => e.meta && !e._metaSlottedContent?.length, a`${(e) => e.meta}`)}
 				</span>
 
 				${(e) => e.icon && e.iconTrailing ? n(e.icon) : null}
@@ -62,8 +71,8 @@ var v = (e, t) => {
 			</button>
 		</${r}>
 	`;
-}, y = o("accordion-item", _, (e) => i`
-	${(t) => v(e, `h${t.headinglevel}`)}
+}, S = s("accordion-item", b, (e) => a`
+	${(t) => x(e, `h${t.headinglevel}`)}
 	<div
 		id="${(e) => e.id}-panel"
 		aria-labelledby="${(e) => e.id}"
@@ -72,6 +81,6 @@ var v = (e, t) => {
 	>
 		<slot></slot>
 	</div>
-`, [f], { styles: g }), b = t(y);
+`, [p], { styles: v }), C = t(S);
 //#endregion
-export { b as n, _ as r, y as t };
+export { C as n, b as r, S as t };

package/bundled/definition3.cjs

@@ -1,13 +1,26 @@
-const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./decorate.cjs`),r=require(`./class-names.cjs`),i=require(`./numberConverter.cjs`);var a=`:host{vertical-align:sub;display:inline-block}.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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.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{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}`,o=500,s=2e3,c=class extends e.t{constructor(...e){super(...e),this.iconLoaded=!1,this.#e=0,this.#t=null}#e;#t;async nameChanged(){let e=++this.#e;this.#t&&this.#t.abort(),this.#t=new AbortController,this._svg=void 0,this.iconLoaded=!1;let t=setTimeout(()=>{this.#e===e&&(this._svg=i.r,t=setTimeout(()=>{this.#e===e&&this._svg===i.r&&(this._svg=void 0)},s))},o);try{let t=await i.n(this.name,this.#t.signal);this.#e===e&&(this._svg=t)}catch{this.#e===e&&(this._svg=void 0)}finally{this.#e===e&&(clearTimeout(t),this.iconLoaded=!0)}}};n.t([e.m],c.prototype,`connotation`,void 0),n.t([e.m({converter:i.t})],c.prototype,`size`,void 0),n.t([e.A],c.prototype,`_svg`,void 0),n.t([e.A],c.prototype,`iconLoaded`,void 0),n.t([e.m],c.prototype,`label`,void 0),n.t([e.m],c.prototype,`name`,void 0);var l=e.u(`icon`,c,()=>{let n=e=>!e.label||e.label.trim().length===0;return e.p`
-		<span
-			class="${e=>r.t(`control`,[`connotation-${e.connotation}`,!!e.connotation],[`size-${e.size}`,typeof e.size==`number`])}"
-			role="${e=>n(e)?null:`img`}"
-			?aria-hidden="${e=>n(e)}"
-			aria-label="${e=>e.label||null}"
-			?aria-busy="${e=>!e?.iconLoaded}"
+const e=require("./vivid-element.cjs"),t=require("./slotted.cjs"),n=require("./children.cjs"),r=require("./ref.cjs"),i=require("./when.cjs"),a=require("./decorate.cjs"),o=require("./class-names.cjs"),s=require("./dom.cjs"),c=require("./definition2.cjs"),l=require("./icon.cjs"),u=require("./affix.cjs"),d=require("./host-semantics.cjs");var f=`:host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{box-sizing:border-box;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);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;word-break:break-word;user-select:none;border-radius:8px;align-items:center;gap:12px;padding-inline:16px;text-decoration:none;display:inline-flex;position:relative}.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(--focus-stroke-color,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{border-radius:8px;align-items:center;font-size:20px;display:flex}.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{flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px;display:flex}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}`;function p(e){return s.t(e)&&(e.getAttribute(`role`)===`treeitem`||e instanceof m)}var m=class extends d.t(u.t(e.t)){constructor(...e){super(...e),this.expanded=!1,this.selected=!1,this.disabled=!1,this.focusable=!1,this.isNestedItem=()=>p(this.parentElement),this.handleExpandCollapseButtonClick=e=>{!this.disabled&&!e.defaultPrevented&&(this.expanded=!this.expanded)},this.handleFocus=e=>{this.setAttribute(`tabindex`,`0`)},this.handleBlur=e=>{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(e=>{p(e)&&(e.nested=!0)})}static focusItem(e){e.focusable=!0,e.focus()}childItemLength(){return this.childItems.filter(e=>p(e)).length}};a.t([e.m],m.prototype,`text`,void 0),a.t([e.m({mode:`boolean`})],m.prototype,`expanded`,void 0),a.t([e.m({mode:`boolean`})],m.prototype,`selected`,void 0),a.t([e.m({mode:`boolean`})],m.prototype,`disabled`,void 0),a.t([e.A],m.prototype,`focusable`,void 0),a.t([e.A],m.prototype,`childItems`,void 0),a.t([e.A],m.prototype,`items`,void 0),a.t([e.A],m.prototype,`nested`,void 0),a.t([e.A],m.prototype,`renderCollapsedChildren`,void 0);var h=t=>{let n=t.tagFor(l.t);return e.p`
+	<div aria-hidden="true"
+		class="expandCollapseButton"
+		@click="${(e,t)=>e.handleExpandCollapseButtonClick(t.event)}"
+			${r.t(`expandCollapseButton`)}
+	>
+		<${n} class="expandCollapseIcon" name="${e=>e.expanded?`chevron-down-line`:`chevron-right-line`}"></${n}>
+	</div>`},g=e.u(`tree-item`,m,r=>{let a=u.a(r),s=r.tagFor(m,!0);return e.p` <template
+		slot="${e=>e.isNestedItem()?`item`:void 0}"
+		tabindex="-1"
+		${d.n({role:`treeitem`,ariaExpanded:e=>e.childItems&&e.childItems.length>0?e.expanded:void 0,ariaSelected:e=>e.selected,ariaDisabled:e=>e.disabled})}
+		@focusin="${(e,t)=>e.handleFocus(t.event)}"
+		@focusout="${(e,t)=>e.handleBlur(t.event)}"
+		${n.t({property:`childItems`,filter:t.r(s)})}
+	>
+		<div
+			class="${e=>o.t(`control`,`connotation-accent`,`appearance-ghost`,`with-idle`,`with-disabled`,`with-hover`,`with-active`,`with-selected`,`with-selectedAndHover`,[`disabled`,e.disabled],[`selected`,e.selected])}"
 		>
-			<slot aria-hidden="true">
-				${t.t(e=>e?.iconLoaded&&e?._svg,t=>e.p`${e.p.partial(t._svg)}`)}
-			</slot>
-		</span>
-	`},[],{styles:a}),u=e.d(l);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return l}});
+			${i.t(e=>e.childItems&&e.childItems.length>0,h(r))}
+			${e=>a(e.icon,u.i.Slot)}
+			${e=>e.text}
+		</div>
+		${i.t(e=>e.childItems&&e.childItems.length>0&&e.expanded,e.p` <div role="group" class="items">
+				<slot name="item" ${t.t(`items`)}></slot>
+			</div>`)}
+	</template>`},[c.t],{styles:f}),_=e.d(g);Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return _}});

package/bundled/definition3.js

@@ -1,54 +1,93 @@
 import { A as e, d as t, m as n, p as r, t as i, u as a } from "./vivid-element.js";
-import { t as o } from "./when.js";
-import { t as s } from "./decorate.js";
-import { t as c } from "./class-names.js";
-import { n as l, r as u, t as d } from "./numberConverter.js";
-//#region src/lib/icon/icon.scss?inline
-var f = ":host{vertical-align:sub;display:inline-block}.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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.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{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}", p = 500, m = 2e3, h = class extends i {
+import { r as o, t as s } from "./slotted.js";
+import { t as c } from "./children.js";
+import { t as l } from "./ref.js";
+import { t as u } from "./when.js";
+import { t as d } from "./decorate.js";
+import { t as f } from "./class-names.js";
+import { t as p } from "./dom.js";
+import { t as m } from "./definition2.js";
+import { t as h } from "./icon.js";
+import { a as g, i as _, t as v } from "./affix.js";
+import { n as y, t as b } from "./host-semantics.js";
+//#region src/lib/tree-item/tree-item.scss?inline
+var x = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{box-sizing:border-box;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);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;word-break:break-word;user-select:none;border-radius:8px;align-items:center;gap:12px;padding-inline:16px;text-decoration:none;display:inline-flex;position:relative}.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(--focus-stroke-color,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{border-radius:8px;align-items:center;font-size:20px;display:flex}.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{flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px;display:flex}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
+//#endregion
+//#region src/lib/tree-item/tree-item.ts
+function S(e) {
+	return p(e) && (e.getAttribute("role") === "treeitem" || e instanceof C);
+}
+var C = class extends b(v(i)) {
 	constructor(...e) {
-		super(...e), this.iconLoaded = !1, this.#e = 0, this.#t = null;
+		super(...e), this.expanded = !1, this.selected = !1, this.disabled = !1, this.focusable = !1, this.isNestedItem = () => S(this.parentElement), this.handleExpandCollapseButtonClick = (e) => {
+			!this.disabled && !e.defaultPrevented && (this.expanded = !this.expanded);
+		}, this.handleFocus = (e) => {
+			this.setAttribute("tabindex", "0");
+		}, this.handleBlur = (e) => {
+			this.setAttribute("tabindex", "-1");
+		};
 	}
-	#e;
-	#t;
-	async nameChanged() {
-		let e = ++this.#e;
-		this.#t && this.#t.abort(), this.#t = new AbortController(), this._svg = void 0, this.iconLoaded = !1;
-		let t = setTimeout(() => {
-			/* v8 ignore else -- @preserve */
-			this.#e === e && (this._svg = u, t = setTimeout(() => {
-				/* v8 ignore else -- @preserve */
-				this.#e === e && this._svg === u && (this._svg = void 0);
-			}, m));
-		}, p);
-		try {
-			let t = await l(this.name, this.#t.signal);
+	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((e) => {
 			/* v8 ignore else -- @preserve */
-			this.#e === e && (this._svg = t);
-		} catch {
-			this.#e === e && (this._svg = void 0);
-		} finally {
-			this.#e === e && (clearTimeout(t), this.iconLoaded = !0);
-		}
+			S(e) && (e.nested = !0);
+		});
+	}
+	static focusItem(e) {
+		e.focusable = !0, e.focus();
+	}
+	childItemLength() {
+		return this.childItems.filter((e) => S(e)).length;
 	}
 };
-s([n], h.prototype, "connotation", void 0), s([n({ converter: d })], h.prototype, "size", void 0), s([e], h.prototype, "_svg", void 0), s([e], h.prototype, "iconLoaded", void 0), s([n], h.prototype, "label", void 0), s([n], h.prototype, "name", void 0);
+d([n], C.prototype, "text", void 0), d([n({ mode: "boolean" })], C.prototype, "expanded", void 0), d([n({ mode: "boolean" })], C.prototype, "selected", void 0), d([n({ mode: "boolean" })], C.prototype, "disabled", void 0), d([e], C.prototype, "focusable", void 0), d([e], C.prototype, "childItems", void 0), d([e], C.prototype, "items", void 0), d([e], C.prototype, "nested", void 0), d([e], C.prototype, "renderCollapsedChildren", void 0);
 //#endregion
-//#region src/lib/icon/definition.ts
-var g = a("icon", h, () => {
-	let e = (e) => !e.label || e.label.trim().length === 0;
+//#region src/lib/tree-item/tree-item.template.ts
+var w = (e) => {
+	let t = e.tagFor(h);
 	return r`
-		<span
-			class="${(e) => c("control", [`connotation-${e.connotation}`, !!e.connotation], [`size-${e.size}`, typeof e.size == "number"])}"
-			role="${(t) => e(t) ? null : "img"}"
-			?aria-hidden="${(t) => e(t)}"
-			aria-label="${(e) => e.label || null}"
-			?aria-busy="${(e) => !e?.iconLoaded}"
+	<div aria-hidden="true"
+		class="expandCollapseButton"
+		@click="${(e, t) => e.handleExpandCollapseButtonClick(t.event)}"
+			${l("expandCollapseButton")}
+	>
+		<${t} class="expandCollapseIcon" name="${(e) => e.expanded ? "chevron-down-line" : "chevron-right-line"}"></${t}>
+	</div>`;
+}, T = a("tree-item", C, (e) => {
+	let t = g(e), n = e.tagFor(C, !0);
+	return r` <template
+		slot="${(e) => e.isNestedItem() ? "item" : void 0}"
+		tabindex="-1"
+		${y({
+		role: "treeitem",
+		ariaExpanded: (e) => e.childItems && e.childItems.length > 0 ? e.expanded : void 0,
+		ariaSelected: (e) => e.selected,
+		ariaDisabled: (e) => e.disabled
+	})}
+		@focusin="${(e, t) => e.handleFocus(t.event)}"
+		@focusout="${(e, t) => e.handleBlur(t.event)}"
+		${c({
+		property: "childItems",
+		filter: o(n)
+	})}
+	>
+		<div
+			class="${(e) => f("control", "connotation-accent", "appearance-ghost", "with-idle", "with-disabled", "with-hover", "with-active", "with-selected", "with-selectedAndHover", ["disabled", e.disabled], ["selected", e.selected])}"
 		>
-			<slot aria-hidden="true">
-				${o((e) => e?.iconLoaded && e?._svg, (e) => r`${r.partial(e._svg)}`)}
-			</slot>
-		</span>
-	`;
-}, [], { styles: f }), _ = t(g);
+			${u((e) => e.childItems && e.childItems.length > 0, w(e))}
+			${(e) => t(e.icon, _.Slot)}
+			${(e) => e.text}
+		</div>
+		${u((e) => e.childItems && e.childItems.length > 0 && e.expanded, r` <div role="group" class="items">
+				<slot name="item" ${s("items")}></slot>
+			</div>`)}
+	</template>`;
+}, [m], { styles: x }), E = t(T);
 //#endregion
-export { _ as n, h as r, g as t };
+export { S as i, T as n, C as r, E as t };

package/bundled/definition4.cjs

@@ -1,26 +1,30 @@
-const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./children.cjs`),r=require(`./ref.cjs`),i=require(`./when.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./dom.cjs`),c=require(`./definition3.cjs`),l=require(`./affix.cjs`),u=require(`./host-semantics.cjs`);var d=`: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,.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)),.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));box-sizing:border-box;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);hyphens:auto;inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));vertical-align:middle;word-break:break-word;user-select:none;border-radius:8px;align-items:center;gap:12px;padding-inline:16px;text-decoration:none;display:inline-flex;position:relative}.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(--focus-stroke-color,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{border-radius:8px;align-items:center;font-size:20px;display:flex}.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{flex-direction:column;gap:4px;margin-block-start:4px;padding-inline-start:48px;display:flex}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}`;function f(e){return s.t(e)&&(e.getAttribute(`role`)===`treeitem`||e instanceof p)}var p=class extends u.t(l.t(e.t)){constructor(...e){super(...e),this.expanded=!1,this.selected=!1,this.disabled=!1,this.focusable=!1,this.isNestedItem=()=>f(this.parentElement),this.handleExpandCollapseButtonClick=e=>{!this.disabled&&!e.defaultPrevented&&(this.expanded=!this.expanded)},this.handleFocus=e=>{this.setAttribute(`tabindex`,`0`)},this.handleBlur=e=>{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(e=>{f(e)&&(e.nested=!0)})}static focusItem(e){e.focusable=!0,e.focus()}childItemLength(){return this.childItems.filter(e=>f(e)).length}};a.t([e.m],p.prototype,`text`,void 0),a.t([e.m({mode:`boolean`})],p.prototype,`expanded`,void 0),a.t([e.m({mode:`boolean`})],p.prototype,`selected`,void 0),a.t([e.m({mode:`boolean`})],p.prototype,`disabled`,void 0),a.t([e.A],p.prototype,`focusable`,void 0),a.t([e.A],p.prototype,`childItems`,void 0),a.t([e.A],p.prototype,`items`,void 0),a.t([e.A],p.prototype,`nested`,void 0),a.t([e.A],p.prototype,`renderCollapsedChildren`,void 0);var m=t=>{let n=t.tagFor(c.r);return e.p`
-	<div aria-hidden="true"
-		class="expandCollapseButton"
-		@click="${(e,t)=>e.handleExpandCollapseButtonClick(t.event)}"
-			${r.t(`expandCollapseButton`)}
+const e=require("./vivid-element.cjs"),t=require("./when.cjs"),n=require("./decorate.cjs"),r=require("./class-names.cjs"),i=require("./base-progress.cjs"),a=require("./delegates-aria.cjs"),o=require("./component-enum.cjs");var s=`:host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}`,c=o.t([`accent`,`success`,`alert`,`cta`],`accent`),l=class extends a.t(i.t){};n.t([e.m],l.prototype,`connotation`,void 0),n.t([e.m],l.prototype,`size`,void 0);var u=44,d=e.p`<template>
+	<div
+		class="${e=>e.paused?`paused`:``} ${e=>r.t(`base`,[`disabled`,e.paused],`connotation-${c.parse(e.connotation)}`,`appearance-ghost`,`with-idle`,`with-disabled`,[`size-${e.size}`,!!e.size])}"
+		${a.n({role:`progressbar`,ariaValueNow:e=>e.value,ariaValueMin:e=>e.min,ariaValueMax:e=>e.max})}
 	>
-		<${n} class="expandCollapseIcon" name="${e=>e.expanded?`chevron-down-line`:`chevron-right-line`}"></${n}>
-	</div>`},h=e.u(`tree-item`,p,r=>{let a=l.a(r),s=r.tagFor(p,!0);return e.p` <template
-		slot="${e=>e.isNestedItem()?`item`:void 0}"
-		tabindex="-1"
-		${u.n({role:`treeitem`,ariaExpanded:e=>e.childItems&&e.childItems.length>0?e.expanded:void 0,ariaSelected:e=>e.selected,ariaDisabled:e=>e.disabled})}
-		@focusin="${(e,t)=>e.handleFocus(t.event)}"
-		@focusout="${(e,t)=>e.handleBlur(t.event)}"
-		${n.t({property:`childItems`,filter:t.r(s)})}
-	>
-		<div
-			class="${e=>o.t(`control`,[`disabled`,e.disabled],[`selected`,e.selected])}"
-		>
-			${i.t(e=>e.childItems&&e.childItems.length>0,m(r))}
-			${e=>a(e.icon,l.i.Slot)}
-			${e=>e.text}
-		</div>
-		${i.t(e=>e.childItems&&e.childItems.length>0&&e.expanded,e.p` <div role="group" class="items">
-				<slot name="item" ${t.t(`items`)}></slot>
-			</div>`)}
-	</template>`},[c.t],{styles:d}),g=e.d(h);Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return g}});
+		${t.t(e=>typeof e.value==`number`,e.p`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="determinate"
+						style="stroke-dasharray: ${e=>u*e.percentComplete/100}px ${u}px"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`)}
+		${t.t(e=>typeof e.value!=`number`,e.p`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="indeterminate-indicator-1"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`)}
+	</div>
+</template>`,f=e.u(`progress-ring`,l,d,[],{styles:s}),p=e.d(f);Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return f}});