@vonage/vivid 5.20.1 → 5.22.0

package/tabs/index.js

@@ -9,7 +9,7 @@ import { r as _ } from "../bundled/aria-binding-directive.js";
 import { n as v, r as y } from "../bundled/definition13.js";
 import { n as b } from "../bundled/definition14.js";
 //#region src/lib/tabs/tabs.scss?inline
-var x = ":host{display:block}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-firm:var(--vvd-tabs-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm:var(--vvd-tabs-accent-firm,var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter:8px;--_tabs-active-indicator-stroke-width:2px;box-sizing:border-box;display:grid}.base.orientation-vertical{block-size:inherit;grid-template-rows:1fr;grid-template-columns:auto 1fr;overflow:hidden}.base:not(.orientation-vertical){block-size:var(--tabs-block-size,auto);grid-template-rows:auto 1fr;grid-template-columns:1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{isolation:isolate;position:relative;overflow:hidden}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{content:\"\";opacity:0;inline-size:10px;transition:opacity .1s;position:absolute;inset-block:0}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-start:0}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-end:0}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{box-shadow:1px 0 0 0 var(--vvd-color-neutral-300);flex-direction:column}.base.orientation-horizontal .tabs{border-bottom:1px solid var(--vvd-color-neutral-300);flex-direction:row}.tablist{box-sizing:border-box;color:var(--_appearance-color-text);display:grid;position:relative;overflow:hidden}.base.layout-stretch .tablist{--_tab-justify-content:center;--_tabs-tablist-column:1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column:auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-rows:auto;grid-template-columns:auto 1fr;block-size:fit-content;min-block-size:100%;inline-size:100%}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter);grid-template-rows:auto auto;grid-auto-flow:column}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base:not(.orientation-vertical) .tablist-wrapper{align-self:end;inline-size:100%;overflow:auto hidden}.base.orientation-vertical .tablist-wrapper{block-size:100%;overflow:hidden auto}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{margin-inline:var(--_tabs-tablist-gutter);align-items:center}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;overflow-y:auto}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base.gutters-small .tabpanel{padding:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{block-size:80%;inline-size:var(--_tabs-active-indicator-stroke-width);border-radius:2px;grid-area:1/1;align-self:center}.base:not(.orientation-vertical) .active-indicator{z-index:1;block-size:var(--_tabs-active-indicator-stroke-width);inline-size:calc(var(--_tabs-active-tab-inline-size));border-radius:2px;grid-area:2/1;position:absolute;inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out,inline-size .2s ease-out}", S = "--_tabs-active-tab-inline-size", C = {
+var x = ":host{display:block}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-firm:var(--vvd-tabs-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm:var(--vvd-tabs-accent-firm,var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter:8px;--_tabs-active-indicator-stroke-width:2px;box-sizing:border-box;display:grid}.base.orientation-vertical{block-size:inherit;grid-template-rows:1fr;grid-template-columns:auto 1fr;overflow:hidden}.base:not(.orientation-vertical){block-size:var(--tabs-block-size,auto);grid-template-rows:auto 1fr;grid-template-columns:1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{isolation:isolate;position:relative;overflow:hidden}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{content:\"\";opacity:0;inline-size:10px;transition:opacity .1s;position:absolute;inset-block:0}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-start:0}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);opacity:.2;inset-inline-end:0}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{box-shadow:1px 0 0 0 var(--vvd-color-neutral-300);flex-direction:column}.base.orientation-horizontal .tabs{border-bottom:1px solid var(--vvd-color-neutral-300);flex-direction:row}.tablist{box-sizing:border-box;color:var(--_appearance-color-text);display:grid;position:relative;overflow:hidden}.base.layout-stretch .tablist{--_tab-justify-content:center;--_tabs-tablist-column:1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column:auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-rows:auto;grid-template-columns:auto 1fr;block-size:fit-content;min-block-size:100%;inline-size:100%}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter);grid-template-rows:auto auto;grid-auto-flow:column}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base:not(.orientation-vertical) .tablist-wrapper{align-self:end;inline-size:100%;overflow:auto hidden}.base.orientation-vertical .tablist-wrapper{block-size:100%;overflow:hidden auto}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{margin-inline:var(--_tabs-tablist-gutter);align-items:center}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin;overflow-y:auto}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base.gutters-small .tabpanel{padding:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{block-size:80%;inline-size:var(--_tabs-active-indicator-stroke-width);border-radius:2px;grid-area:1/1;align-self:center}.base:not(.orientation-vertical) .active-indicator{z-index:1;block-size:var(--_tabs-active-indicator-stroke-width);inline-size:calc(var(--_tabs-active-tab-inline-size));border-radius:2px;grid-area:2/1;position:absolute;inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out,inline-size .2s ease-out}@media (prefers-reduced-motion:reduce){.activeIndicatorTransition{transition-duration:.01ms}}", S = "--_tabs-active-tab-inline-size", C = {
 	vertical: "vertical",
 	horizontal: "horizontal"
 }, w = (e) => e === C.horizontal ? C.vertical : C.horizontal, T = (e) => e === C.horizontal ? "gridColumn" : "gridRow", E = (e) => e === C.horizontal ? "translateX" : "translateY", D = (e) => e === C.horizontal ? "offsetLeft" : "offsetTop", O = (e) => e.getAttribute("aria-disabled") !== "true" && !e.disabled && !e.hasAttribute("hidden"), k = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), A = class extends a {
@@ -105,7 +105,7 @@ var x = ":host{display:block}.base{--_appearance-color-text:var(--_connotation-c
 		let i = n[D(this.orientation)];
 		n.style[T(this.orientation)] = "";
 		let a = i - r, o = n.style.transform, s = `${E(this.orientation)}(${a}px)`;
-		e ? (n.classList.add("activeIndicatorTransition"), o !== s && (this.#c = !0)) : this.#l(), n.style.transform = s, n.style.setProperty(S, this.tabs[t].getBoundingClientRect().width + "px");
+		e ? (n.classList.add("activeIndicatorTransition"), o !== s && (this.#c = !0)) : this.#l(), n.style.transform = s, n.style.setProperty(S, `${this.tabs[t].getBoundingClientRect().width}px`);
 	}
 	connotationChanged() {
 		this._registerTabsChange();
@@ -143,7 +143,7 @@ l([r], A.prototype, "orientation", void 0), l([e], A.prototype, "tabs", void 0),
 })], A.prototype, "scrollablePanel", void 0), l([r({ attribute: "tabs-layout" })], A.prototype, "tabsLayout", void 0), l([e], A.prototype, "_actionItemsSlottedContent", void 0), l([r({ mode: "boolean" })], A.prototype, "activeindicator", void 0);
 //#endregion
 //#region src/lib/tabs/tabs.template.ts
-var j = ({ connotation: e, orientation: t, gutters: n, scrollablePanel: r, tabsLayout: i, _actionItemsSlottedContent: a }) => u("base", `layout-${i ?? "align-start"}`, [`connotation-${e}`, !!e], [`orientation-${t}`, !!t], `gutters-${n ?? "small"}`, ["scroll", !!r], ["has-action-items", !!a.length]);
+var j = ({ connotation: e, orientation: t, gutters: n, scrollablePanel: r, tabsLayout: i, _actionItemsSlottedContent: a }) => u("base", `layout-${i ?? "align-start"}`, [`connotation-${e}`, !!e], [`orientation-${t}`, !!t], `gutters-${n ?? "small"}`, ["scroll", r], ["has-action-items", !!a.length]);
 function M(e, t) {
 	return t.scrollWidth <= t.clientWidth ? (e.classList.toggle("start-scroll", !1), e.classList.toggle("end-scroll", !1), !0) : !1;
 }

package/tag/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/definition2.cjs`),a=require(`../bundled/affix.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/delegates-aria.cjs`);var c=class extends e.t(s.t(a.t(t.t))){constructor(...e){super(...e),this.removable=!1,this.disabled=!1,this.selectable=!1,this.selected=!1,this.#e=()=>{!this.selectable||this.disabled||(this.selected=!this.selected,this.$emit(`selected-change`))}}remove(){!this.removable||this.selectable||(this.$emit(`removed`),this.parentElement&&this.parentElement.removeChild(this))}#e;handleKeydown(e){return(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.#e()),(e.key===`Delete`||e.key===`Backspace`)&&(e.preventDefault(),this.remove()),!0}handleClick(){this.#e()}};r.t([t.m],c.prototype,`connotation`,void 0),r.t([t.m],c.prototype,`shape`,void 0),r.t([t.m],c.prototype,`appearance`,void 0),r.t([t.m],c.prototype,`label`,void 0),r.t([t.m({mode:`boolean`})],c.prototype,`removable`,void 0),r.t([t.m({mode:`boolean`})],c.prototype,`disabled`,void 0),r.t([t.m({mode:`boolean`})],c.prototype,`selectable`,void 0),r.t([t.m({mode:`boolean`})],c.prototype,`selected`,void 0);var l=`.base.connotation-cta{--_connotation-color-primary:var(--vvd-tag-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-tag-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-tag-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-pale:var(--vvd-tag-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-tag-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-tag-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-tag-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tag-cta-faint,var(--vvd-color-cta-50));--_connotation-color-dim:var(--vvd-tag-cta-dim,var(--vvd-color-cta-200))}.base.connotation-success{--_connotation-color-primary:var(--vvd-tag-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-tag-success-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-success-soft,var(--vvd-color-success-100));--_connotation-color-contrast:var(--vvd-tag-success-contrast,var(--vvd-color-success-800));--_connotation-color-pale:var(--vvd-tag-success-pale,var(--vvd-color-success-300));--_connotation-color-fierce:var(--vvd-tag-success-fierce,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-tag-success-firm,var(--vvd-color-success-600));--_connotation-color-firm-all:var(--vvd-tag-success-firm-all,var(--vvd-color-success-600));--_connotation-color-faint:var(--vvd-tag-success-faint,var(--vvd-color-success-50));--_connotation-color-dim:var(--vvd-tag-success-dim,var(--vvd-color-success-200))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-tag-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-tag-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-alert-soft,var(--vvd-color-alert-100));--_connotation-color-contrast:var(--vvd-tag-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-pale:var(--vvd-tag-alert-pale,var(--vvd-color-alert-300));--_connotation-color-fierce:var(--vvd-tag-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-tag-alert-firm,var(--vvd-color-alert-600));--_connotation-color-firm-all:var(--vvd-tag-alert-firm-all,var(--vvd-color-alert-600));--_connotation-color-faint:var(--vvd-tag-alert-faint,var(--vvd-color-alert-50));--_connotation-color-dim:var(--vvd-tag-alert-dim,var(--vvd-color-alert-200))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-tag-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-tag-warning-primary-text,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-tag-warning-soft,var(--vvd-color-warning-100));--_connotation-color-contrast:var(--vvd-tag-warning-contrast,var(--vvd-color-warning-800));--_connotation-color-pale:var(--vvd-tag-warning-pale,var(--vvd-color-warning-300));--_connotation-color-fierce:var(--vvd-tag-warning-fierce,var(--vvd-color-warning-700));--_connotation-color-firm:var(--vvd-tag-warning-firm,var(--vvd-color-warning-600));--_connotation-color-firm-all:var(--vvd-tag-warning-firm-all,var(--vvd-color-warning-600));--_connotation-color-faint:var(--vvd-tag-warning-faint,var(--vvd-color-warning-50));--_connotation-color-dim:var(--vvd-tag-warning-dim,var(--vvd-color-warning-200))}.base.connotation-information{--_connotation-color-primary:var(--vvd-tag-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-tag-information-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-information-soft,var(--vvd-color-information-100));--_connotation-color-contrast:var(--vvd-tag-information-contrast,var(--vvd-color-information-800));--_connotation-color-pale:var(--vvd-tag-information-pale,var(--vvd-color-information-300));--_connotation-color-fierce:var(--vvd-tag-information-fierce,var(--vvd-color-information-700));--_connotation-color-firm:var(--vvd-tag-information-firm,var(--vvd-color-information-600));--_connotation-color-firm-all:var(--vvd-tag-information-firm-all,var(--vvd-color-information-600));--_connotation-color-faint:var(--vvd-tag-information-faint,var(--vvd-color-information-50));--_connotation-color-dim:var(--vvd-tag-information-dim,var(--vvd-color-information-200))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-tag-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-tag-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-contrast:var(--vvd-tag-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-pale:var(--vvd-tag-announcement-pale,var(--vvd-color-announcement-300));--_connotation-color-fierce:var(--vvd-tag-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-tag-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-firm-all:var(--vvd-tag-announcement-firm-all,var(--vvd-color-announcement-600));--_connotation-color-faint:var(--vvd-tag-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-dim:var(--vvd-tag-announcement-dim,var(--vvd-color-announcement-200))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary:var(--vvd-tag-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-tag-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-tag-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-pale:var(--vvd-tag-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-tag-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-tag-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-tag-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-tag-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-tag-accent-dim,var(--vvd-color-neutral-200))}.base{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-pale)}.base:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.base.active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-pale)}.base.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base:disabled.appearance-duotone{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base:disabled.appearance-subtle-light,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base.disabled.appearance-duotone{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base.disabled.appearance-subtle-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.selected:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}.base.selected:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--vvd-color-canvas);--_appearance-color-fill:var(--_connotation-color-firm);--_appearance-color-outline:transparent}.base{--tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);vertical-align:middle;border:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:inline-flex;position:relative}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color:transparent;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))}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;border:none;align-items:center;padding:4px;display:flex;position:relative;inset-inline-start:-4px}.dismiss-button:focus-visible{--focus-stroke-gap-color:transparent;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))}`,u=({connotation:e,appearance:t,shape:n,disabled:r,selectable:i,removable:a,selected:s})=>o.t(`base`,[`disabled`,r],[`selectable`,i],[`selected`,i&&s],[`removable`,a&&!i],[`connotation-${e}`,!!e],[`appearance-${t}`,!!t],[`shape-${n}`,!!n]);function d(e){return t.p`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/when.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/definition2.cjs`),a=require(`../bundled/affix.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/delegates-aria.cjs`);var c=class extends e.t(s.t(a.t(t.t))){constructor(...e){super(...e),this.removable=!1,this.disabled=!1,this.selectable=!1,this.selected=!1,this.#e=()=>{!this.selectable||this.disabled||(this.selected=!this.selected,this.$emit(`selected-change`))}}remove(){!this.removable||this.selectable||(this.$emit(`removed`),this.parentElement?.removeChild(this))}#e;handleKeydown(e){return(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.#e()),(e.key===`Delete`||e.key===`Backspace`)&&(e.preventDefault(),this.remove()),!0}handleClick(){this.#e()}};r.t([t.m],c.prototype,`connotation`,void 0),r.t([t.m],c.prototype,`shape`,void 0),r.t([t.m],c.prototype,`appearance`,void 0),r.t([t.m],c.prototype,`label`,void 0),r.t([t.m({mode:`boolean`})],c.prototype,`removable`,void 0),r.t([t.m({mode:`boolean`})],c.prototype,`disabled`,void 0),r.t([t.m({mode:`boolean`})],c.prototype,`selectable`,void 0),r.t([t.m({mode:`boolean`})],c.prototype,`selected`,void 0);var l=`.base.connotation-cta{--_connotation-color-primary:var(--vvd-tag-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-tag-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-tag-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-pale:var(--vvd-tag-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-tag-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-tag-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-tag-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tag-cta-faint,var(--vvd-color-cta-50));--_connotation-color-dim:var(--vvd-tag-cta-dim,var(--vvd-color-cta-200))}.base.connotation-success{--_connotation-color-primary:var(--vvd-tag-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-tag-success-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-success-soft,var(--vvd-color-success-100));--_connotation-color-contrast:var(--vvd-tag-success-contrast,var(--vvd-color-success-800));--_connotation-color-pale:var(--vvd-tag-success-pale,var(--vvd-color-success-300));--_connotation-color-fierce:var(--vvd-tag-success-fierce,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-tag-success-firm,var(--vvd-color-success-600));--_connotation-color-firm-all:var(--vvd-tag-success-firm-all,var(--vvd-color-success-600));--_connotation-color-faint:var(--vvd-tag-success-faint,var(--vvd-color-success-50));--_connotation-color-dim:var(--vvd-tag-success-dim,var(--vvd-color-success-200))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-tag-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-tag-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-alert-soft,var(--vvd-color-alert-100));--_connotation-color-contrast:var(--vvd-tag-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-pale:var(--vvd-tag-alert-pale,var(--vvd-color-alert-300));--_connotation-color-fierce:var(--vvd-tag-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-tag-alert-firm,var(--vvd-color-alert-600));--_connotation-color-firm-all:var(--vvd-tag-alert-firm-all,var(--vvd-color-alert-600));--_connotation-color-faint:var(--vvd-tag-alert-faint,var(--vvd-color-alert-50));--_connotation-color-dim:var(--vvd-tag-alert-dim,var(--vvd-color-alert-200))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-tag-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-tag-warning-primary-text,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-tag-warning-soft,var(--vvd-color-warning-100));--_connotation-color-contrast:var(--vvd-tag-warning-contrast,var(--vvd-color-warning-800));--_connotation-color-pale:var(--vvd-tag-warning-pale,var(--vvd-color-warning-300));--_connotation-color-fierce:var(--vvd-tag-warning-fierce,var(--vvd-color-warning-700));--_connotation-color-firm:var(--vvd-tag-warning-firm,var(--vvd-color-warning-600));--_connotation-color-firm-all:var(--vvd-tag-warning-firm-all,var(--vvd-color-warning-600));--_connotation-color-faint:var(--vvd-tag-warning-faint,var(--vvd-color-warning-50));--_connotation-color-dim:var(--vvd-tag-warning-dim,var(--vvd-color-warning-200))}.base.connotation-information{--_connotation-color-primary:var(--vvd-tag-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-tag-information-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-information-soft,var(--vvd-color-information-100));--_connotation-color-contrast:var(--vvd-tag-information-contrast,var(--vvd-color-information-800));--_connotation-color-pale:var(--vvd-tag-information-pale,var(--vvd-color-information-300));--_connotation-color-fierce:var(--vvd-tag-information-fierce,var(--vvd-color-information-700));--_connotation-color-firm:var(--vvd-tag-information-firm,var(--vvd-color-information-600));--_connotation-color-firm-all:var(--vvd-tag-information-firm-all,var(--vvd-color-information-600));--_connotation-color-faint:var(--vvd-tag-information-faint,var(--vvd-color-information-50));--_connotation-color-dim:var(--vvd-tag-information-dim,var(--vvd-color-information-200))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-tag-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-tag-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-contrast:var(--vvd-tag-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-pale:var(--vvd-tag-announcement-pale,var(--vvd-color-announcement-300));--_connotation-color-fierce:var(--vvd-tag-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-tag-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-firm-all:var(--vvd-tag-announcement-firm-all,var(--vvd-color-announcement-600));--_connotation-color-faint:var(--vvd-tag-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-dim:var(--vvd-tag-announcement-dim,var(--vvd-color-announcement-200))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary:var(--vvd-tag-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-tag-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-tag-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-tag-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-pale:var(--vvd-tag-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-tag-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-tag-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-tag-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-tag-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-tag-accent-dim,var(--vvd-color-neutral-200))}.base{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-pale)}.base:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.base.active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-pale)}.base.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline:transparent}.base:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base:disabled.appearance-duotone{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base:disabled.appearance-subtle-light,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base.disabled.appearance-duotone{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base.disabled.appearance-subtle-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.selected:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}.base.selected:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text:var(--vvd-color-canvas);--_appearance-color-fill:var(--_connotation-color-firm);--_appearance-color-outline:transparent}.base{--tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);vertical-align:middle;border:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:inline-flex;position:relative}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color:transparent;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))}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;border:none;align-items:center;padding:4px;display:flex;position:relative;inset-inline-start:-4px}.dismiss-button:focus-visible{--focus-stroke-gap-color:transparent;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))}`,u=({connotation:e,appearance:t,shape:n,disabled:r,selectable:i,removable:a,selected:s})=>o.t(`base`,[`disabled`,r],[`selectable`,i],[`selected`,i&&s],[`removable`,a&&!i],[`connotation-${e}`,!!e],[`appearance-${t}`,!!t],[`shape-${n}`,!!n]);function d(e){return t.p`
 	<button
 		class="dismiss-button"
 		aria-label="${e=>e.locale.tag.remove(e.label)}"

package/tag/index.js

@@ -14,7 +14,7 @@ var g = class extends e(h(f(i))) {
 		};
 	}
 	remove() {
-		!this.removable || this.selectable || (this.$emit("removed"), this.parentElement && this.parentElement.removeChild(this));
+		!this.removable || this.selectable || (this.$emit("removed"), this.parentElement?.removeChild(this));
 	}
 	#e;
 	handleKeydown(e) {

package/tree-view/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/dom.cjs`),o=require(`../bundled/key-codes.cjs`),s=require(`../bundled/definition4.cjs`),c=require(`../bundled/host-semantics.cjs`);var l=`.control{flex-direction:column;gap:4px;display:flex;position:relative}`;function u(e,t){return a.t(e)?Array.from(e.querySelectorAll(t)).filter(e=>{if(e.parentElement instanceof s.r){if(e.parentElement.expanded)return!0}else return!0;return!1}):[]}var d=class extends c.t(e.t){constructor(...e){super(...e),this.currentFocused=null,this.handleFocus=e=>{if(this.slottedTreeItems.length>0){if(e.target===this){this.currentFocused!==null&&s.r.focusItem(this.currentFocused);return}this.contains(e.target)&&(this.setAttribute(`tabindex`,`-1`),this.currentFocused=e.target)}},this.handleBlur=e=>{e.target instanceof HTMLElement&&(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute(`tabindex`,`0`)},this.handleKeyDown=e=>{if(this.slottedTreeItems.length<1)return!0;if(!e.defaultPrevented){let t=this.getVisibleNodes();switch(e.key){case o.s:t.length&&s.r.focusItem(t[0]);return;case`End`:t.length&&s.r.focusItem(t[t.length-1]);return;case o.n:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof s.r&&t.childItemLength()>0&&t.expanded?t.expanded=!1:t instanceof s.r&&t.parentElement instanceof s.r&&s.r.focusItem(t.parentElement)}return!1;case o.r:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof s.r&&t.childItemLength()>0&&!t.expanded?t.expanded=!0:t instanceof s.r&&t.childItemLength()>0&&this.focusNextNode(1,e.target)}return;case o.t:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(1,e.target);return;case o.i:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(-1,e.target);return;case o.a:this.handleClick(e);return}}return!0},this.handleSelectedChange=e=>{if(!e.defaultPrevented){if(!(e.target instanceof Element)||!s.i(e.target))return!0;let t=e.target;t.selected?(this.currentSelected&&this.currentSelected!==t&&(this.currentSelected.selected=!1),this.currentSelected=t):!t.selected&&this.currentSelected===t&&(this.currentSelected=null);return}},this.setItems=()=>{let e=this.treeView.querySelector(`[selected]`);this.currentSelected=e,(this.currentFocused===null||!this.contains(this.currentFocused))&&(this.currentFocused=this.getValidFocusableItem()),this.nested=this.checkForNestedItems(),this.getVisibleNodes().forEach(e=>{s.i(e)&&(e.nested=this.nested)})},this.isFocusableElement=e=>s.i(e),this.isSelectedElement=e=>e.selected}slottedTreeItemsChanged(){this.$fastController.isConnected&&this.setItems()}connectedCallback(){super.connectedCallback(),this.setAttribute(`tabindex`,`0`),e.M.enqueue(()=>{this.setItems()})}handleClick(e){if(!e.defaultPrevented){if(!(e.target instanceof Element)||!s.i(e.target))return!0;let t=e.target;t.disabled||(t.selected=!t.selected);return}}focusNextNode(e,t){let n=this.getVisibleNodes();if(n){let r=n[n.indexOf(t)+e];a.t(r)&&s.r.focusItem(r)}}getValidFocusableItem(){let e=this.getVisibleNodes(),t=e.findIndex(this.isSelectedElement);return t===-1&&(t=e.findIndex(this.isFocusableElement)),t===-1?null:e[t]}checkForNestedItems(){return this.slottedTreeItems.some(e=>s.i(e)&&e.querySelector(`[data-vvd-component='tree-item']`))}getVisibleNodes(){return u(this,`[data-vvd-component='tree-item']`)}};r.t([e.m({attribute:`render-collapsed-nodes`})],d.prototype,`renderCollapsedNodes`,void 0),r.t([e.A],d.prototype,`currentSelected`,void 0),r.t([e.A],d.prototype,`slottedTreeItems`,void 0);var f=e.p` <template
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/dom.cjs`),o=require(`../bundled/key-codes.cjs`),s=require(`../bundled/definition4.cjs`),c=require(`../bundled/host-semantics.cjs`);var l=`.control{flex-direction:column;gap:4px;display:flex;position:relative}`;function u(e,t){return a.t(e)?Array.from(e.querySelectorAll(t)).filter(e=>{if(e.parentElement instanceof s.r){if(e.parentElement.expanded)return!0}else return!0;return!1}):[]}var d=class extends c.t(e.t){constructor(...e){super(...e),this.currentFocused=null,this.handleFocus=e=>{if(this.slottedTreeItems.length>0){if(e.target===this){this.currentFocused!==null&&s.r.focusItem(this.currentFocused);return}this.contains(e.target)&&(this.setAttribute(`tabindex`,`-1`),this.currentFocused=e.target)}},this.handleBlur=e=>{e.target instanceof HTMLElement&&(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute(`tabindex`,`0`)},this.handleKeyDown=e=>{if(this.slottedTreeItems.length<1)return!0;if(!e.defaultPrevented){let t=this.getVisibleNodes();switch(e.key){case o.s:t.length&&s.r.focusItem(t[0]);return;case`End`:t.length&&s.r.focusItem(t[t.length-1]);return;case o.n:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof s.r&&t.childItemLength()>0&&t.expanded?t.expanded=!1:t instanceof s.r&&t.parentElement instanceof s.r&&s.r.focusItem(t.parentElement)}return!1;case o.r:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof s.r&&t.childItemLength()>0&&!t.expanded?t.expanded=!0:t instanceof s.r&&t.childItemLength()>0&&this.focusNextNode(1,e.target)}return;case o.t:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(1,e.target);return;case o.i:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(-1,e.target);return;case o.a:this.handleClick(e);return}}return!0},this.handleSelectedChange=e=>{if(!e.defaultPrevented){if(!(e.target instanceof Element)||!s.i(e.target))return!0;let t=e.target;t.selected?(this.currentSelected&&this.currentSelected!==t&&(this.currentSelected.selected=!1),this.currentSelected=t):!t.selected&&this.currentSelected===t&&(this.currentSelected=null)}},this.setItems=()=>{let e=this.treeView.querySelector(`[selected]`);this.currentSelected=e,(this.currentFocused===null||!this.contains(this.currentFocused))&&(this.currentFocused=this.getValidFocusableItem()),this.nested=this.checkForNestedItems(),this.getVisibleNodes().forEach(e=>{s.i(e)&&(e.nested=this.nested)})},this.isFocusableElement=e=>s.i(e),this.isSelectedElement=e=>e.selected}slottedTreeItemsChanged(){this.$fastController.isConnected&&this.setItems()}connectedCallback(){super.connectedCallback(),this.setAttribute(`tabindex`,`0`),e.M.enqueue(()=>{this.setItems()})}handleClick(e){if(!e.defaultPrevented){if(!(e.target instanceof Element)||!s.i(e.target))return!0;let t=e.target;t.disabled||(t.selected=!t.selected)}}focusNextNode(e,t){let n=this.getVisibleNodes();if(n){let r=n[n.indexOf(t)+e];a.t(r)&&s.r.focusItem(r)}}getValidFocusableItem(){let e=this.getVisibleNodes(),t=e.findIndex(this.isSelectedElement);return t===-1&&(t=e.findIndex(this.isFocusableElement)),t===-1?null:e[t]}checkForNestedItems(){return this.slottedTreeItems.some(e=>s.i(e)&&e.querySelector(`[data-vvd-component='tree-item']`))}getVisibleNodes(){return u(this,`[data-vvd-component='tree-item']`)}};r.t([e.m({attribute:`render-collapsed-nodes`})],d.prototype,`renderCollapsedNodes`,void 0),r.t([e.A],d.prototype,`currentSelected`,void 0),r.t([e.A],d.prototype,`slottedTreeItems`,void 0);var f=e.p` <template
 	${n.t(`treeView`)}
 	${c.n({role:`tree`})}
 	@keydown="${(e,t)=>e.handleKeyDown(t.event)}"

package/tree-view/index.js

@@ -84,7 +84,6 @@ var T = class extends S(a) {
 				let t = e.target;
 				/* v8 ignore else -- @preserve */
 				t.selected ? (this.currentSelected && this.currentSelected !== t && (this.currentSelected.selected = !1), this.currentSelected = t) : !t.selected && this.currentSelected === t && (this.currentSelected = null);
-				return;
 			}
 		}, this.setItems = () => {
 			let e = this.treeView.querySelector("[selected]");
@@ -107,7 +106,6 @@ var T = class extends S(a) {
 			if (!(e.target instanceof Element) || !v(e.target)) return !0;
 			let t = e.target;
 			t.disabled || (t.selected = !t.selected);
-			return;
 		}
 	}
 	focusNextNode(e, t) {

package/unbundled/affix.cjs

@@ -59,14 +59,14 @@ var affixIconTemplateFactory = (context) => {
 				${(0, _microsoft_fast_element.slotted)("iconSlottedContent")}
 			></slot>`;
 		if (!icon && slottedState) return null;
-		const iconTemplate = _microsoft_fast_element.html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
+		const iconTemplate = _microsoft_fast_element.html`<${iconTag} :name="${() => icon}" :label="${() => announcement.label || void 0}"></${iconTag}>`;
 		const wrapperTag = _microsoft_fast_element.html.partial(slottedState ? "span" : "slot");
 		return _microsoft_fast_element.html`<${wrapperTag}
 					class="${() => slottedState ? "icon" : void 0}"
 					:name="${() => slottedState ? void 0 : "icon"}"
-					aria-hidden="${() => announcement?.label ? false : ariaHidden}"
-					:role="${() => announcement?.announceOnUpdate ? "status" : void 0}"
-					:ariaLive="${() => announcement?.announceOnUpdate ? "polite" : void 0}"
+					aria-hidden="${() => announcement.label ? false : ariaHidden}"
+					:role="${() => announcement.announceOnUpdate ? "status" : void 0}"
+					:ariaLive="${() => announcement.announceOnUpdate ? "polite" : void 0}"
 			  >
 					${iconTemplate}
 			  </${wrapperTag}>`;

package/unbundled/affix.js

@@ -58,14 +58,14 @@ var affixIconTemplateFactory = (context) => {
 				${slotted("iconSlottedContent")}
 			></slot>`;
 		if (!icon && slottedState) return null;
-		const iconTemplate = html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
+		const iconTemplate = html`<${iconTag} :name="${() => icon}" :label="${() => announcement.label || void 0}"></${iconTag}>`;
 		const wrapperTag = html.partial(slottedState ? "span" : "slot");
 		return html`<${wrapperTag}
 					class="${() => slottedState ? "icon" : void 0}"
 					:name="${() => slottedState ? void 0 : "icon"}"
-					aria-hidden="${() => announcement?.label ? false : ariaHidden}"
-					:role="${() => announcement?.announceOnUpdate ? "status" : void 0}"
-					:ariaLive="${() => announcement?.announceOnUpdate ? "polite" : void 0}"
+					aria-hidden="${() => announcement.label ? false : ariaHidden}"
+					:role="${() => announcement.announceOnUpdate ? "status" : void 0}"
+					:ariaLive="${() => announcement.announceOnUpdate ? "polite" : void 0}"
 			  >
 					${iconTemplate}
 			  </${wrapperTag}>`;

package/unbundled/base-color-picker.cjs

@@ -211,15 +211,15 @@ var BaseColorPicker = (Base) => {
 		*/
 		_renderColorSwatch(iconTag, tooltipTag) {
 			return _microsoft_fast_element.html`
-				<${tooltipTag} placement="top" 
-					text="${(x) => x.label ?? x.value}" 
+				<${tooltipTag} placement="top"
+					text="${(x) => x.label ?? x.value}"
 					exportparts="vvd-theme-alternate">
 					<button
 						slot="anchor"
 						class="swatch ${(x, c) => (0, _microsoft_fast_web_utilities.classNames)(c.parent.value === x.value ? "selected" : "", c.parent._applyContrastClass(x.value) ? "contrast" : "")}"
 						role="gridcell"
 						style="--swatch-color: ${(x) => x.value};"
-						tabindex="${(x, c) => c.index === 0 ? "0" : "-1"}"
+						tabindex="${(_x, c) => c.index === 0 ? "0" : "-1"}"
 						aria-label="${(x, c) => c.parent.locale.baseColorPicker.colorSwatchLabel(x.value, x.label, c.parent.value === x.value)}"
 						@click="${(x, c) => c.parent._handleSwatchSelection(x.value)}"
 						@keydown="${(x, c) => c.parent._handleCellKeydown(c.event, x.value, c.index)}"

package/unbundled/base-color-picker.js

@@ -210,15 +210,15 @@ var BaseColorPicker = (Base) => {
 		*/
 		_renderColorSwatch(iconTag, tooltipTag) {
 			return html`
-				<${tooltipTag} placement="top" 
-					text="${(x) => x.label ?? x.value}" 
+				<${tooltipTag} placement="top"
+					text="${(x) => x.label ?? x.value}"
 					exportparts="vvd-theme-alternate">
 					<button
 						slot="anchor"
 						class="swatch ${(x, c) => classNames(c.parent.value === x.value ? "selected" : "", c.parent._applyContrastClass(x.value) ? "contrast" : "")}"
 						role="gridcell"
 						style="--swatch-color: ${(x) => x.value};"
-						tabindex="${(x, c) => c.index === 0 ? "0" : "-1"}"
+						tabindex="${(_x, c) => c.index === 0 ? "0" : "-1"}"
 						aria-label="${(x, c) => c.parent.locale.baseColorPicker.colorSwatchLabel(x.value, x.label, c.parent.value === x.value)}"
 						@click="${(x, c) => c.parent._handleSwatchSelection(x.value)}"
 						@keydown="${(x, c) => c.parent._handleCellKeydown(c.event, x.value, c.index)}"

package/unbundled/button.cjs

@@ -34,7 +34,7 @@ var VividFoundationButton = class extends require_delegates_aria.DelegatesAria(r
 		this.handleUnsupportedDelegatesFocus = () => {
 			/* v8 ignore else -- @preserve */
 			if (this.$fastController.definition.shadowOptions) {
-				if (window.ShadowRoot && !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) Object.defineProperty(this, "focus", {
+				if (window.ShadowRoot && !Object.prototype.hasOwnProperty.call(window.ShadowRoot.prototype, "delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) Object.defineProperty(this, "focus", {
 					value: () => {
 						this.control.focus();
 					},
@@ -66,10 +66,10 @@ var VividFoundationButton = class extends require_delegates_aria.DelegatesAria(r
 	typeChanged(previous, next) {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.type = this.type;
-		next === "submit" && this.addEventListener("click", this.handleSubmission);
-		previous === "submit" && this.removeEventListener("click", this.handleSubmission);
-		next === "reset" && this.addEventListener("click", this.handleFormReset);
-		previous === "reset" && this.removeEventListener("click", this.handleFormReset);
+		if (next === "submit") this.addEventListener("click", this.handleSubmission);
+		if (previous === "submit") this.removeEventListener("click", this.handleSubmission);
+		if (next === "reset") this.addEventListener("click", this.handleFormReset);
+		if (previous === "reset") this.removeEventListener("click", this.handleFormReset);
 	}
 	/** {@inheritDoc (FormAssociated:interface).validate} */
 	validate() {

package/unbundled/button.js

@@ -33,7 +33,7 @@ var VividFoundationButton = class extends DelegatesAria(FormAssociated(VividElem
 		this.handleUnsupportedDelegatesFocus = () => {
 			/* v8 ignore else -- @preserve */
 			if (this.$fastController.definition.shadowOptions) {
-				if (window.ShadowRoot && !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) Object.defineProperty(this, "focus", {
+				if (window.ShadowRoot && !Object.prototype.hasOwnProperty.call(window.ShadowRoot.prototype, "delegatesFocus") && this.$fastController.definition.shadowOptions.delegatesFocus) Object.defineProperty(this, "focus", {
 					value: () => {
 						this.control.focus();
 					},
@@ -65,10 +65,10 @@ var VividFoundationButton = class extends DelegatesAria(FormAssociated(VividElem
 	typeChanged(previous, next) {
 		/* v8 ignore if -- @preserve */
 		if (this.proxy instanceof HTMLInputElement) this.proxy.type = this.type;
-		next === "submit" && this.addEventListener("click", this.handleSubmission);
-		previous === "submit" && this.removeEventListener("click", this.handleSubmission);
-		next === "reset" && this.addEventListener("click", this.handleFormReset);
-		previous === "reset" && this.removeEventListener("click", this.handleFormReset);
+		if (next === "submit") this.addEventListener("click", this.handleSubmission);
+		if (previous === "submit") this.removeEventListener("click", this.handleSubmission);
+		if (next === "reset") this.addEventListener("click", this.handleFormReset);
+		if (previous === "reset") this.removeEventListener("click", this.handleFormReset);
 	}
 	/** {@inheritDoc (FormAssociated:interface).validate} */
 	validate() {

package/unbundled/chunk.cjs

@@ -5,6 +5,15 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
 var __copyProps = (to, from, except, desc) => {
 	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
 		key = keys[i];
@@ -20,6 +29,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
+Object.defineProperty(exports, "__exportAll", {
+	enumerable: true,
+	get: function() {
+		return __exportAll;
+	}
+});
 Object.defineProperty(exports, "__toESM", {
 	enumerable: true,
 	get: function() {

package/unbundled/chunk.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/unbundled/definition10.cjs

@@ -44,6 +44,7 @@ var Popup = class extends require_vivid_element.VividElement {
 		this.alternate = false;
 		this.placementStrategy = PlacementStrategy.Flip;
 		this.animationFrame = false;
+		this.shiftCrossAxis = false;
 		this.strategy = "fixed";
 		this.offset = null;
 		this.#autoUpdateCallback = () => {
@@ -55,14 +56,14 @@ var Popup = class extends require_vivid_element.VividElement {
 		let middleware = [
 			(0, _floating_ui_dom.inline)(),
 			placementStrategyMiddlewares[this.placementStrategy],
+			(0, _floating_ui_dom.shift)({ crossAxis: this.shiftCrossAxis }),
 			(0, _floating_ui_dom.hide)(),
 			(0, _floating_ui_dom.size)({ apply({ availableWidth, availableHeight, elements }) {
 				Object.assign(elements.floating.style, {
 					maxWidth: `${availableWidth}px`,
 					maxHeight: `${availableHeight}px`
 				});
-			} }),
-			(0, _floating_ui_dom.shift)()
+			} })
 		];
 		let offsetValue = this.offset ?? 0;
 		if (this.arrow) {
@@ -90,6 +91,12 @@ var Popup = class extends require_vivid_element.VividElement {
 	/**
 	* @internal
 	*/
+	shiftCrossAxisChanged() {
+		this.#updateAutoUpdate();
+	}
+	/**
+	* @internal
+	*/
 	anchorChanged() {
 		this.#updateAutoUpdate();
 	}
@@ -112,7 +119,7 @@ var Popup = class extends require_vivid_element.VividElement {
 		this.#cleanup?.();
 		if (!this.isConnected) return;
 		if (this.open && this.controlEl) this.controlEl.classList.add("open");
-		if (this.anchorEl && this.open && this.popupEl) this.#cleanup = (0, _floating_ui_dom.autoUpdate)(this.anchorEl, this.popupEl, this.#autoUpdateCallback, { animationFrame: this.animationFrame });
+		if (this.anchorEl && this.open && this.popupEl) this.#cleanup = (0, _floating_ui_dom.autoUpdate)(this.anchorEl, this.popupEl, () => void this.#autoUpdateCallback(), { animationFrame: this.animationFrame });
 	}
 	#togglePopover() {
 		if (this.popupEl && this.strategy === "fixed") if (this.open) this.popupEl.showPopover();
@@ -182,6 +189,10 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 	mode: "boolean",
 	attribute: "animation-frame"
 })], Popup.prototype, "animationFrame", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	mode: "boolean",
+	attribute: "shift-cross-axis"
+})], Popup.prototype, "shiftCrossAxis", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView" })], Popup.prototype, "strategy", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
 	attribute: "offset",
@@ -193,7 +204,7 @@ require_decorate.__decorate([_microsoft_fast_element.observable], Popup.prototyp
 var popup_default = ":host{display:var(--_popup-display,inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popup-wrapper{z-index:var(--_popup-z-index,10);border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;overflow:visible}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{color:var(--vvd-color-canvas-text);display:grid}.dismissible .popup-content{grid-template-columns:1fr auto;align-content:start}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
 //#endregion
 //#region src/lib/popup/popup.template.ts
-var getClasses = ({ open, dismissible, alternate }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", Boolean(open)], ["dismissible", Boolean(dismissible)], ["alternate", Boolean(alternate)]);
+var getClasses = ({ open, dismissible, alternate }) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", open], ["dismissible", dismissible], ["alternate", alternate]);
 function handlePopover(x) {
 	return x.strategy && x.strategy === "fixed" ? "manual" : null;
 }

package/unbundled/definition10.js

@@ -43,6 +43,7 @@ var Popup = class extends VividElement {
 		this.alternate = false;
 		this.placementStrategy = PlacementStrategy.Flip;
 		this.animationFrame = false;
+		this.shiftCrossAxis = false;
 		this.strategy = "fixed";
 		this.offset = null;
 		this.#autoUpdateCallback = () => {
@@ -54,14 +55,14 @@ var Popup = class extends VividElement {
 		let middleware = [
 			inline(),
 			placementStrategyMiddlewares[this.placementStrategy],
+			shift({ crossAxis: this.shiftCrossAxis }),
 			hide(),
 			size({ apply({ availableWidth, availableHeight, elements }) {
 				Object.assign(elements.floating.style, {
 					maxWidth: `${availableWidth}px`,
 					maxHeight: `${availableHeight}px`
 				});
-			} }),
-			shift()
+			} })
 		];
 		let offsetValue = this.offset ?? 0;
 		if (this.arrow) {
@@ -89,6 +90,12 @@ var Popup = class extends VividElement {
 	/**
 	* @internal
 	*/
+	shiftCrossAxisChanged() {
+		this.#updateAutoUpdate();
+	}
+	/**
+	* @internal
+	*/
 	anchorChanged() {
 		this.#updateAutoUpdate();
 	}
@@ -111,7 +118,7 @@ var Popup = class extends VividElement {
 		this.#cleanup?.();
 		if (!this.isConnected) return;
 		if (this.open && this.controlEl) this.controlEl.classList.add("open");
-		if (this.anchorEl && this.open && this.popupEl) this.#cleanup = autoUpdate(this.anchorEl, this.popupEl, this.#autoUpdateCallback, { animationFrame: this.animationFrame });
+		if (this.anchorEl && this.open && this.popupEl) this.#cleanup = autoUpdate(this.anchorEl, this.popupEl, () => void this.#autoUpdateCallback(), { animationFrame: this.animationFrame });
 	}
 	#togglePopover() {
 		if (this.popupEl && this.strategy === "fixed") if (this.open) this.popupEl.showPopover();
@@ -181,6 +188,10 @@ __decorate([attr({
 	mode: "boolean",
 	attribute: "animation-frame"
 })], Popup.prototype, "animationFrame", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "shift-cross-axis"
+})], Popup.prototype, "shiftCrossAxis", void 0);
 __decorate([attr({ mode: "fromView" })], Popup.prototype, "strategy", void 0);
 __decorate([attr({
 	attribute: "offset",
@@ -192,7 +203,7 @@ __decorate([observable], Popup.prototype, "anchor", void 0);
 var popup_default = ":host{display:var(--_popup-display,inline)}.control{border-radius:inherit;background:var(--vvd-color-surface-4dp);contain:layout}.control:not(.open){display:none}.popup-wrapper{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.popup-wrapper ::-webkit-scrollbar{width:4px}.popup-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.popup-wrapper ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.popup-wrapper{z-index:var(--_popup-z-index,10);border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;overflow:visible}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{color:var(--vvd-color-canvas-text);display:grid}.dismissible .popup-content{grid-template-columns:1fr auto;align-content:start}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}";
 //#endregion
 //#region src/lib/popup/popup.template.ts
-var getClasses = ({ open, dismissible, alternate }) => classNames("control", ["open", Boolean(open)], ["dismissible", Boolean(dismissible)], ["alternate", Boolean(alternate)]);
+var getClasses = ({ open, dismissible, alternate }) => classNames("control", ["open", open], ["dismissible", dismissible], ["alternate", alternate]);
 function handlePopover(x) {
 	return x.strategy && x.strategy === "fixed" ? "manual" : null;
 }

package/unbundled/definition11.cjs

@@ -266,7 +266,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 	* @public
 	*/
 	increment() {
-		const newVal = this.direction !== _microsoft_fast_web_utilities.Direction.rtl && this.orientation !== _microsoft_fast_web_utilities.Orientation.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
+		const newVal = this.direction !== _microsoft_fast_web_utilities.Direction.rtl && this.orientation !== _microsoft_fast_web_utilities.Orientation.vertical ? Number(this.value) + this.step : Number(this.value) - this.step;
 		this.value = this.#roundToNearestStep(newVal).toString();
 	}
 	/**
@@ -275,7 +275,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 	* @public
 	*/
 	decrement() {
-		const newVal = this.direction !== _microsoft_fast_web_utilities.Direction.rtl && this.orientation !== _microsoft_fast_web_utilities.Orientation.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
+		const newVal = this.direction !== _microsoft_fast_web_utilities.Direction.rtl && this.orientation !== _microsoft_fast_web_utilities.Orientation.vertical ? Number(this.value) - this.step : Number(this.value) + this.step;
 		this.value = this.#roundToNearestStep(newVal).toString();
 	}
 	/**
@@ -297,7 +297,7 @@ var Slider = class extends require_localized.Localized(require_delegates_aria.De
 	* are not whole numbers
 	*/
 	updateStepMultiplier() {
-		const stepString = this.step + "";
+		const stepString = String(this.step);
 		const decimalPlacesOfStep = this.step % 1 ? stepString.length - stepString.indexOf(".") - 1 : 0;
 		this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
 	}

package/unbundled/definition11.js

@@ -265,7 +265,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 	* @public
 	*/
 	increment() {
-		const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
+		const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) + this.step : Number(this.value) - this.step;
 		this.value = this.#roundToNearestStep(newVal).toString();
 	}
 	/**
@@ -274,7 +274,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 	* @public
 	*/
 	decrement() {
-		const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
+		const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical ? Number(this.value) - this.step : Number(this.value) + this.step;
 		this.value = this.#roundToNearestStep(newVal).toString();
 	}
 	/**
@@ -296,7 +296,7 @@ var Slider = class extends Localized(DelegatesAria(FormAssociated(VividElement))
 	* are not whole numbers
 	*/
 	updateStepMultiplier() {
-		const stepString = this.step + "";
+		const stepString = String(this.step);
 		const decimalPlacesOfStep = this.step % 1 ? stepString.length - stepString.indexOf(".") - 1 : 0;
 		this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
 	}

package/unbundled/definition12.cjs

@@ -227,7 +227,7 @@ var getIndicatorIcon = (x) => {
 	if (x.checkedAppearance === "tick-only") return x.checked ? "check-line" : "";
 	return `${x.controlType === "checkbox" ? "checkbox" : "radio"}-${x.checked ? "checked" : "unchecked"}-2-line`;
 };
-var getClasses = ({ connotation, disabled, checked, controlType, text, textSecondary, icon, metaSlottedContent, checkTrailing }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["disabled", Boolean(disabled)], ["selected", Boolean(controlType && checked)], ["trailing", Boolean(controlType && (checkTrailing || Boolean(icon)))], ["item-checkbox", controlType === "checkbox"], ["item-radio", controlType === "radio"], ["two-lines", Boolean(text?.length) && Boolean(textSecondary?.length)], ["has-meta", Boolean(metaSlottedContent?.length)]);
+var getClasses = ({ connotation, disabled, checked, controlType, text, textSecondary, icon, metaSlottedContent, checkTrailing }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["disabled", disabled], ["selected", Boolean(controlType && checked)], ["trailing", Boolean(controlType && (checkTrailing || Boolean(icon)))], ["item-checkbox", controlType === "checkbox"], ["item-radio", controlType === "radio"], ["two-lines", Boolean(text?.length) && Boolean(textSecondary?.length)], ["has-meta", Boolean(metaSlottedContent?.length)]);
 function checkIndicator(context) {
 	const iconTag = context.tagFor(require_definition.Icon);
 	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => Boolean(x.controlType), _microsoft_fast_element.html`<span class="action"><${iconTag} class="icon" name="${(x) => getIndicatorIcon(x)}"></${iconTag}></span>`)}`;

package/unbundled/definition12.js

@@ -226,7 +226,7 @@ var getIndicatorIcon = (x) => {
 	if (x.checkedAppearance === "tick-only") return x.checked ? "check-line" : "";
 	return `${x.controlType === "checkbox" ? "checkbox" : "radio"}-${x.checked ? "checked" : "unchecked"}-2-line`;
 };
-var getClasses = ({ connotation, disabled, checked, controlType, text, textSecondary, icon, metaSlottedContent, checkTrailing }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], ["disabled", Boolean(disabled)], ["selected", Boolean(controlType && checked)], ["trailing", Boolean(controlType && (checkTrailing || Boolean(icon)))], ["item-checkbox", controlType === "checkbox"], ["item-radio", controlType === "radio"], ["two-lines", Boolean(text?.length) && Boolean(textSecondary?.length)], ["has-meta", Boolean(metaSlottedContent?.length)]);
+var getClasses = ({ connotation, disabled, checked, controlType, text, textSecondary, icon, metaSlottedContent, checkTrailing }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], ["disabled", disabled], ["selected", Boolean(controlType && checked)], ["trailing", Boolean(controlType && (checkTrailing || Boolean(icon)))], ["item-checkbox", controlType === "checkbox"], ["item-radio", controlType === "radio"], ["two-lines", Boolean(text?.length) && Boolean(textSecondary?.length)], ["has-meta", Boolean(metaSlottedContent?.length)]);
 function checkIndicator(context) {
 	const iconTag = context.tagFor(Icon);
 	return html`${when((x) => Boolean(x.controlType), html`<span class="action"><${iconTag} class="icon" name="${(x) => getIndicatorIcon(x)}"></${iconTag}></span>`)}`;

package/unbundled/definition13.cjs

@@ -54,7 +54,7 @@ var Menu = class extends require_anchored.Anchored(require_delegates_aria.Delega
 		};
 		this.handleExpandedChanged = (e) => {
 			const changedItem = e.target;
-			if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) this.expandedItem = null;
+			if (this.expandedItem !== null && changedItem === this.expandedItem && !changedItem.expanded) this.expandedItem = null;
 			if (changedItem.expanded) this.expandedItem = changedItem;
 		};
 		this.removeItemListeners = () => {
@@ -179,7 +179,7 @@ var Menu = class extends require_anchored.Anchored(require_delegates_aria.Delega
 	}
 	openChanged(_, newValue) {
 		if (newValue) this._popupEl?.show().then(() => this.focus());
-		newValue ? this.$emit("open", void 0, { bubbles: false }) : this.$emit("close", void 0, { bubbles: false });
+		this.$emit(newValue ? "open" : "close", void 0, { bubbles: false });
 		if (this._anchorEl) this.#updateAnchor(this._anchorEl);
 	}
 	/**

package/unbundled/definition13.js

@@ -53,7 +53,7 @@ var Menu = class extends Anchored(DelegatesAria(VividElement)) {
 		};
 		this.handleExpandedChanged = (e) => {
 			const changedItem = e.target;
-			if (this.expandedItem !== null && changedItem === this.expandedItem && changedItem.expanded === false) this.expandedItem = null;
+			if (this.expandedItem !== null && changedItem === this.expandedItem && !changedItem.expanded) this.expandedItem = null;
 			if (changedItem.expanded) this.expandedItem = changedItem;
 		};
 		this.removeItemListeners = () => {
@@ -178,7 +178,7 @@ var Menu = class extends Anchored(DelegatesAria(VividElement)) {
 	}
 	openChanged(_, newValue) {
 		if (newValue) this._popupEl?.show().then(() => this.focus());
-		newValue ? this.$emit("open", void 0, { bubbles: false }) : this.$emit("close", void 0, { bubbles: false });
+		this.$emit(newValue ? "open" : "close", void 0, { bubbles: false });
 		if (this._anchorEl) this.#updateAnchor(this._anchorEl);
 	}
 	/**