@vonage/vivid 5.24.0 → 5.27.0

package/bundled/definition6.js

@@ -1,131 +1,22 @@
-import { t as e } from "./localized.js";
-import { d as t, m as n, p as r, u as i } from "./vivid-element.js";
-import { t as a } from "./ref.js";
-import { t as o } from "./when.js";
-import { a as s } from "./enums.js";
-import { t as c } from "./decorate.js";
-import { t as l } from "./class-names.js";
-import { r as u, t as d } from "./definition3.js";
-import { a as f, i as p, n as m } from "./affix.js";
-import { r as h, t as g } from "./definition5.js";
-import { n as _ } from "./delegates-aria.js";
-import { t as v } from "./button.js";
-import { t as y } from "./linkable.js";
-//#region src/lib/button/button.ts
-var b = class extends m(e(y(v))) {
-	constructor() {
-		super(), this.stacked = !1, this.pending = !1, this.dropdownIndicator = !1, this.active = !1, this.pressed = !1, this.title = "";
-	}
-	clickHandler(e) {
-		/* v8 ignore else -- @preserve */
-		if (this.disabled || this.pending) {
-			e.preventDefault(), e.stopImmediatePropagation();
-			return;
-		}
-		return !0;
-	}
-};
-c([n({ converter: {
-	fromView: (e) => e || null,
-	toView: (e) => e || null
-} })], b.prototype, "title", void 0), c([n], b.prototype, "connotation", void 0), c([n], b.prototype, "shape", void 0), c([n], b.prototype, "appearance", void 0), c([n], b.prototype, "size", void 0), c([n({
-	mode: "boolean",
-	attribute: "stacked"
-})], b.prototype, "stacked", void 0), c([n({
-	mode: "boolean",
-	attribute: "pending"
-})], b.prototype, "pending", void 0), c([n({
-	mode: "boolean",
-	attribute: "dropdown-indicator"
-})], b.prototype, "dropdownIndicator", void 0), c([n({
-	mode: "boolean",
-	attribute: "active"
-})], b.prototype, "active", void 0), c([n({
-	mode: "boolean",
-	attribute: "pressed"
-})], b.prototype, "pressed", void 0), c([n], b.prototype, "label", void 0);
+import { d as e, m as t, p as n, t as r, u as i } from "./vivid-element.js";
+import { t as a } from "./decorate.js";
+import { t as o } from "./class-names.js";
+//#region src/lib/elevation/elevation.ts
+var s = class extends r {};
+a([t], s.prototype, "dp", void 0), a([t({
+	attribute: "no-shadow",
+	mode: "boolean"
+})], s.prototype, "noShadow", void 0), a([t({
+	attribute: "not-relative",
+	mode: "boolean"
+})], s.prototype, "notRelative", void 0);
 //#endregion
-//#region src/lib/button/button.scss?inline
-var x = ".chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{transition:transform .2s}}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host{--_vvd-button-accent-firm-wrapper:var(--vvd-button-accent-firm);--_vvd-button-cta-firm-wrapper:var(--vvd-button-cta-firm);--_vvd-button-success-firm-wrapper:var(--vvd-button-success-firm);--_vvd-button-alert-firm-wrapper:var(--vvd-button-alert-firm);--_vvd-button-announcement-firm-wrapper:var(--vvd-button-announcement-firm)}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm:var(--_vvd-button-accent-firm-wrapper,var(--vvd-button-accent-primary));--vvd-button-cta-firm:var(--_vvd-button-cta-firm-wrapper,var(--vvd-button-cta-primary));--vvd-button-success-firm:var(--_vvd-button-success-firm-wrapper,var(--vvd-button-success-primary));--vvd-button-alert-firm:var(--_vvd-button-alert-firm-wrapper,var(--vvd-button-alert-primary));--vvd-button-announcement-firm:var(--_vvd-button-announcement-firm-wrapper,var(--vvd-button-announcement-primary))}:host{display:inline-block}.control.connotation-cta{--_connotation-color-primary:var(--vvd-button-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-button-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-button-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-button-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-button-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-button-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-button-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce-primary:var(--vvd-button-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-dim:var(--vvd-button-cta-dim,var(--vvd-color-cta-200));--_connotation-color-pale:var(--vvd-button-cta-pale,var(--vvd-color-cta-300))}.control.connotation-success{--_connotation-color-primary:var(--vvd-button-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-button-success-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-success-primary-increment,var(--vvd-color-success-600));--_connotation-color-contrast:var(--vvd-button-success-contrast,var(--vvd-color-success-800));--_connotation-color-fierce:var(--vvd-button-success-fierce,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-button-success-firm,var(--vvd-color-success-600));--_connotation-color-soft:var(--vvd-button-success-soft,var(--vvd-color-success-100));--_connotation-color-faint:var(--vvd-button-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce-primary:var(--vvd-button-success-fierce-primary,var(--vvd-color-success-700));--_connotation-color-dim:var(--vvd-button-success-dim,var(--vvd-color-success-200));--_connotation-color-pale:var(--vvd-button-success-pale,var(--vvd-color-success-300))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-button-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-button-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-alert-primary-increment,var(--vvd-color-alert-600));--_connotation-color-contrast:var(--vvd-button-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-fierce:var(--vvd-button-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-button-alert-firm,var(--vvd-color-alert-600));--_connotation-color-soft:var(--vvd-button-alert-soft,var(--vvd-color-alert-100));--_connotation-color-faint:var(--vvd-button-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce-primary:var(--vvd-button-alert-fierce-primary,var(--vvd-color-alert-700));--_connotation-color-dim:var(--vvd-button-alert-dim,var(--vvd-color-alert-200));--_connotation-color-pale:var(--vvd-button-alert-pale,var(--vvd-color-alert-300))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-button-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-button-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-button-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-button-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-button-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-soft:var(--vvd-button-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-faint:var(--vvd-button-announcement-faint,var(--vvd-color-announcement-50));--_connotation-color-fierce-primary:var(--vvd-button-announcement-fierce-primary,var(--vvd-color-announcement-700));--_connotation-color-dim:var(--vvd-button-announcement-dim,var(--vvd-color-announcement-200));--_connotation-color-pale:var(--vvd-button-announcement-pale,var(--vvd-color-announcement-300))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-dim:var(--vvd-button-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-button-accent-pale,var(--vvd-color-neutral-300))}.control.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.control.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control,.control.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.appearance-outlined-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.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){.control: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}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.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-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}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-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:var(--vvd-color-neutral-300)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.control: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}}.control.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}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--vvd-color-neutral-300)}.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-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}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-outlined-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:var(--vvd-color-neutral-300)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.control.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}.control:disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled,.control:disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled.appearance-subtle,.control:disabled.appearance-subtle-light,.control.disabled.appearance-filled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control.disabled.appearance-outlined{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled,.control.disabled.appearance-ghost-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled.appearance-outlined-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-subtle,.control.disabled.appearance-subtle-light{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control: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}.control:active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)).appearance-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}.control:active:where(:not(.disabled,:disabled)).appearance-outlined-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:var(--vvd-color-neutral-300)}.control:active:where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.control: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}.control.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}.control.active:where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control.active:where(:not(.disabled,:disabled)).appearance-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}.control.active:where(:not(.disabled,:disabled)).appearance-outlined-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:var(--vvd-color-neutral-300)}.control.active:where(:not(.disabled,:disabled)).appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-pale);--_appearance-color-outline:transparent}.control.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}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;border-radius:var(--_button-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);justify-content:space-between;align-items:center;gap:var(--_button-icon-gap);vertical-align:middle;border:0;margin:0;text-decoration:none;display:inline-flex}.control .text{-webkit-line-clamp:var(--button-line-clamp,1);text-align:start;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:var(--button-cursor,pointer)}.control.disabled{cursor:not-allowed}.control{user-select:none}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:8px;--_button-chevron-size:12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius:8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius:4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius:24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius:16px}.control.shape-pill.stacked.size-normal{--_button-border-radius:20px}.control.shape-pill.icon-only{--_button-border-radius:50%}.control.stacked.size-super-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_button-block-size:calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_button-block-size:calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:6px;--_button-chevron-size:12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_button-block-size:calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_button-block-size:calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color:transparent}.control.appearance-filled:focus-visible{outline:none;position:relative}.control.appearance-filled:focus-visible:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):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))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{justify-content:center;align-items:center;gap:var(--_button-icon-gap);flex:1;display:flex;overflow:hidden}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment,flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment,flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}", S = (e) => {
-	let t = e.tagFor(u);
-	return r`<${t} class="chevron" aria-hidden="true" name="chevron-down-line"></${t}>`;
-};
+//#region src/lib/elevation/elevation.scss?inline
+var c = ":host,.control{display:contents}.control.dp-0{--_elevation-fill:var(--_vvd-tinted-color-surface-0dp,var(--vvd-color-surface-0dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-0dp,var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill:var(--_vvd-tinted-color-surface-4dp,var(--vvd-color-surface-4dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-4dp,var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill:var(--_vvd-tinted-color-surface-8dp,var(--vvd-color-surface-8dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-8dp,var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill:var(--_vvd-tinted-color-surface-12dp,var(--vvd-color-surface-12dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-12dp,var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill:var(--_vvd-tinted-color-surface-16dp,var(--vvd-color-surface-16dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-16dp,var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill:var(--_vvd-tinted-color-surface-24dp,var(--vvd-color-surface-24dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-24dp,var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill:var(--_vvd-tinted-color-surface-2dp,var(--vvd-color-surface-2dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-2dp,var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{z-index:-1;border-radius:inherit;background:var(--_elevation-fill);content:\"\";block-size:100%;filter:var(--_elevation-shadow);inline-size:100%;transition:background-color .15s linear,filter .15s linear;position:absolute;inset-block-start:0;inset-inline-start:0}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}", l = n` <div
+	class="${(e) => o("control", [`dp-${e.dp}`, !!e.dp], ["no-shadow", !!e.noShadow], ["not-relative", !!e.notRelative])}"
+	part="base"
+>
+	<slot></slot>
+</div>`, u = i("elevation", s, l, [], { styles: c }), d = e(u);
 //#endregion
-//#region src/lib/button/button.template.ts
-function C(e, t) {
-	let n = e ?? "ghost";
-	if (t) {
-		if (n === "ghost") return "subtle";
-		if (n === "ghost-light") return "subtle-light";
-		if (n === "outlined") return "filled";
-	}
-	return n;
-}
-var w = (e) => l("control", [`connotation-${e.connotation}`, !!e.connotation], `appearance-${C(e.appearance, e.pressed)}`, ["disabled", e.disabled || e.pending], [`shape-${e.shape}`, !!e.shape], [`size-${e.size}`, !!e.size], ["icon-only", !e.label && !!(e.icon || e.iconSlottedContent?.length) && !e.dropdownIndicator], ["icon-trailing", e.iconTrailing], ["stacked", e.stacked], ["active", e.ariaExpanded === "true" || e.active]);
-function T(e, t, n, i = s.Normal) {
-	if (n && i != s.SuperCondensed) {
-		let n = e.tagFor(h);
-		return r`<span class="${(e) => {
-			let n = e.querySelector("[slot=\"icon\"]");
-			return l("icon", "pending", ["pending-no-icon", !(t || n)]);
-		}}" aria-hidden="true"><${n} size="${{
-			[s.Condensed]: "-6",
-			[s.Normal]: "-5",
-			[s.Expanded]: "-4"
-		}[i]}"></${n}></span>`;
-	} else return f(e)(t, p.Slot);
-}
-var E = (e) => [
-	"submit",
-	"button",
-	"reset"
-].indexOf(e) > -1 ? e : "submit", D = (e) => {
-	let t = S(e);
-	return r`<span class="content">
-			${(t) => T(e, t.icon, t.pending, t.size)}
-			${o((e) => e.label, r`<span class="text" aria-hidden="true">${(e) => e.label}</span>`)}
-			<span class="sr-only"
-				>${(e) => e.pending ? e.locale.button.pendingLabel : e.ariaLabel ?? e.label}</span
-			>
-		</span>
-		${o((e) => e.dropdownIndicator, t)}`;
-};
-function O(e) {
-	return r` <button
-		class="${w}"
-		?autofocus="${(e) => e.autofocus}"
-		form="${(e) => e.formId}"
-		formaction="${(e) => e.formaction}"
-		formenctype="${(e) => e.formenctype}"
-		formmethod="${(e) => e.formmethod}"
-		formnovalidate="${(e) => e.formnovalidate}"
-		formtarget="${(e) => e.formtarget}"
-		name="${(e) => e.name}"
-		type="${(e) => E(e.type)}"
-		value="${(e) => e.value}"
-		title="${(e) => e.title}"
-		${_({
-		ariaLabel: null,
-		ariaDisabled: (e) => e.disabled || e.pending,
-		ariaPressed: (e) => e.pressed ? "true" : e.ariaPressed ?? null
-	})}
-		${a("control")}
-		@click="${(e, t) => e.clickHandler(t.event)}"
-	>
-		${D(e)}
-	</button>`;
-}
-function k(e) {
-	return r`${(t) => t._renderLinkElement(D(e), w, { ariaLabel: null })}`;
-}
-//#endregion
-//#region src/lib/button/definition.ts
-var A = i("button", b, (e) => r` <template>
-		${o((e) => !e.href, r`${O(e)}`)}
-		${o((e) => e.href, k(e))}
-	</template>`, [d, g], {
-	styles: x,
-	shadowOptions: { delegatesFocus: !0 }
-}), j = t(A);
-//#endregion
-export { b as i, j as n, S as r, A as t };
+export { d as n, s as r, u as t };

package/bundled/definition7.cjs

@@ -1,6 +1,14 @@
-const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./class-names.cjs`);var r=class extends e.t{};t.t([e.m],r.prototype,`dp`,void 0),t.t([e.m({attribute:`no-shadow`,mode:`boolean`})],r.prototype,`noShadow`,void 0),t.t([e.m({attribute:`not-relative`,mode:`boolean`})],r.prototype,`notRelative`,void 0);var i=`:host,.control{display:contents}.control.dp-0{--_elevation-fill:var(--_vvd-tinted-color-surface-0dp,var(--vvd-color-surface-0dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-0dp,var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill:var(--_vvd-tinted-color-surface-4dp,var(--vvd-color-surface-4dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-4dp,var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill:var(--_vvd-tinted-color-surface-8dp,var(--vvd-color-surface-8dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-8dp,var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill:var(--_vvd-tinted-color-surface-12dp,var(--vvd-color-surface-12dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-12dp,var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill:var(--_vvd-tinted-color-surface-16dp,var(--vvd-color-surface-16dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-16dp,var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill:var(--_vvd-tinted-color-surface-24dp,var(--vvd-color-surface-24dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-24dp,var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill:var(--_vvd-tinted-color-surface-2dp,var(--vvd-color-surface-2dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-2dp,var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{z-index:-1;border-radius:inherit;background:var(--_elevation-fill);content:"";block-size:100%;filter:var(--_elevation-shadow);inline-size:100%;transition:background-color .15s linear,filter .15s linear;position:absolute;inset-block-start:0;inset-inline-start:0}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}`,a=e.p` <div
-	class="${e=>n.t(`control`,[`dp-${e.dp}`,!!e.dp],[`no-shadow`,!!e.noShadow],[`not-relative`,!!e.notRelative])}"
-	part="base"
->
-	<slot></slot>
-</div>`,o=e.u(`elevation`,r,a,[],{styles:i}),s=e.d(o);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return o}});
+const e=require("./vivid-element.cjs"),t=require("./ref.cjs"),n=require("./when.cjs"),r=require("./decorate.cjs"),i=require("./class-names.cjs"),a=require("./definition5.cjs"),o=require("./definition6.cjs"),s=require("./floating-ui.dom.cjs");var c={Flip:`flip`,AutoPlacementHorizontal:`auto-placement-horizontal`,AutoPlacementVertical:`auto-placement-vertical`},l={[c.Flip]:s.a(),[c.AutoPlacementHorizontal]:s.n({allowedPlacements:[`bottom`,`top`,`bottom-start`,`bottom-end`,`top-start`,`top-end`]}),[c.AutoPlacementVertical]:s.n({allowedPlacements:[`left`,`right`,`left-start`,`left-end`,`right-start`,`right-end`]})},u=class extends e.t{constructor(...e){super(...e),this.open=!1,this.dismissible=!1,this.arrow=!1,this.alternate=!1,this.placementStrategy=c.Flip,this.animationFrame=!1,this.shiftCrossAxis=!1,this.strategy=`fixed`,this.offset=null,this.#a=()=>(this.#i=this.updatePosition(),this.#i)}get#e(){let e=[s.s(),l[this.placementStrategy],s.l({crossAxis:this.shiftCrossAxis}),s.o(),s.u({apply({availableWidth:e,availableHeight:t,elements:n}){Object.assign(n.floating.style,{maxWidth:`${e}px`,maxHeight:`${t}px`})}})],t=this.offset??0;return this.arrow&&(t+=12,e=[...e,s.t({element:this.arrowEl,padding:10})]),t>0&&e.unshift(s.c(t)),e}#t;openChanged(e,t){this.#r(),this.#n(),this.$emit(t?`vwc-popup:open`:`vwc-popup:close`)}animationFrameChanged(){this.#n()}shiftCrossAxisChanged(){this.#n()}anchorChanged(){this.#n()}strategyChanged(){this.#r()}connectedCallback(){super.connectedCallback(),this.#r(),this.#n()}disconnectedCallback(){super.disconnectedCallback(),this.#n()}#n(){this.#t?.(),this.isConnected&&(this.open&&this.controlEl&&this.controlEl.classList.add(`open`),this.anchorEl&&this.open&&this.popupEl&&(this.#t=s.r(this.anchorEl,this.popupEl,()=>void this.#a(),{animationFrame:this.animationFrame})))}#r(){this.popupEl&&this.strategy===`fixed`&&(this.open?this.popupEl.showPopover():this.popupEl.hidePopover())}#i;#a;async updatePosition(){if(!this.open||!this.anchorEl)return;let e=await s.i(this.anchorEl,this.popupEl,{placement:this.placement,strategy:this.strategy,middleware:this.#e});this.#o(e),this.arrow&&this.#s(e)}#o(e){let{x:t,y:n}=e,{referenceHidden:r}=e.middlewareData.hide;Object.assign(this.popupEl.style,{left:`${t}px`,top:`${n}px`,visibility:r?`hidden`:`visible`})}#s(e){let{x:t,y:n}=e.middlewareData.arrow,r={left:`calc(100% - 4px)`,right:`-4px`,top:`calc(100% - 4px)`,bottom:`-4px`},i=e.placement.split(`-`)[0];Object.assign(this.arrowEl.style,{left:t?`${t}px`:r[i],top:n?`${n}px`:r[i]})}get anchorEl(){return this.anchor??null}show(){return this.open=!0,this.#i??Promise.resolve()}hide(){this.open=!1}};r.t([e.m({mode:`boolean`})],u.prototype,`open`,void 0),r.t([e.m({mode:`boolean`})],u.prototype,`dismissible`,void 0),r.t([e.m({mode:`boolean`})],u.prototype,`arrow`,void 0),r.t([e.m({mode:`boolean`})],u.prototype,`alternate`,void 0),r.t([e.m({mode:`fromView`})],u.prototype,`placement`,void 0),r.t([e.m({mode:`boolean`,attribute:`animation-frame`})],u.prototype,`animationFrame`,void 0),r.t([e.m({mode:`boolean`,attribute:`shift-cross-axis`})],u.prototype,`shiftCrossAxis`,void 0),r.t([e.m({mode:`fromView`})],u.prototype,`strategy`,void 0),r.t([e.m({attribute:`offset`,converter:e.h})],u.prototype,`offset`,void 0),r.t([e.A],u.prototype,`anchor`,void 0);var d=`: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}`;function f(e){return e.strategy&&e.strategy===`fixed`?`manual`:null}var p=e.u(`popup`,u,r=>{let s=r.tagFor(o.r),c=r.tagFor(a.i);return e.p`
+  <${s}>
+		<div popover="${f}" class="popup-wrapper ${e=>e.strategy}" ${t.t(`popupEl`)} part="popup-base">
+			<div ${t.t(`controlEl`)} class="${e=>i.t(`control`,[`open`,e.open],[`dismissible`,e.dismissible],[`alternate`,e.alternate])}" aria-hidden="${e=>e.open?`false`:`true`}"
+				part="${e=>e.alternate?`vvd-theme-alternate`:``}">
+				<div class="popup-content">
+					<slot></slot>
+					${n.t(e=>e.dismissible,e.p`<${c} size="condensed" @click="${e=>e.open=!1}"
+						class="dismissible-button" icon="close-small-solid" shape="pill"></${c}>`)}
+				</div>
+				${n.t(e=>e.arrow,e.p`<div class="arrow" ${t.t(`arrowEl`)}></div>`)}
+			</div>
+    </div>
+  </${s}>`},[o.t,a.t],{styles:d}),m=e.d(p);Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});

package/bundled/definition7.js

@@ -1,22 +1,161 @@
-import { d as e, m as t, p as n, t as r, u as i } from "./vivid-element.js";
-import { t as a } from "./decorate.js";
-import { t as o } from "./class-names.js";
-//#region src/lib/elevation/elevation.ts
-var s = class extends r {};
-a([t], s.prototype, "dp", void 0), a([t({
-	attribute: "no-shadow",
-	mode: "boolean"
-})], s.prototype, "noShadow", void 0), a([t({
-	attribute: "not-relative",
-	mode: "boolean"
-})], s.prototype, "notRelative", void 0);
+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 "./ref.js";
+import { t as c } from "./when.js";
+import { t as l } from "./decorate.js";
+import { t as u } from "./class-names.js";
+import { i as d, t as f } from "./definition5.js";
+import { r as p, t as m } from "./definition6.js";
+import { a as h, c as g, i as _, l as v, n as y, o as b, r as x, s as S, t as C, u as w } from "./floating-ui.dom.js";
+//#region src/lib/popup/popup.ts
+var T = {
+	Flip: "flip",
+	AutoPlacementHorizontal: "auto-placement-horizontal",
+	AutoPlacementVertical: "auto-placement-vertical"
+}, E = {
+	[T.Flip]: h(),
+	[T.AutoPlacementHorizontal]: y({ allowedPlacements: [
+		"bottom",
+		"top",
+		"bottom-start",
+		"bottom-end",
+		"top-start",
+		"top-end"
+	] }),
+	[T.AutoPlacementVertical]: y({ allowedPlacements: [
+		"left",
+		"right",
+		"left-start",
+		"left-end",
+		"right-start",
+		"right-end"
+	] })
+}, D = class extends a {
+	constructor(...e) {
+		super(...e), this.open = !1, this.dismissible = !1, this.arrow = !1, this.alternate = !1, this.placementStrategy = T.Flip, this.animationFrame = !1, this.shiftCrossAxis = !1, this.strategy = "fixed", this.offset = null, this.#a = () => (this.#i = this.updatePosition(), this.#i);
+	}
+	get #e() {
+		let e = [
+			S(),
+			E[this.placementStrategy],
+			v({ crossAxis: this.shiftCrossAxis }),
+			b(),
+			w({ apply({ availableWidth: e, availableHeight: t, elements: n }) {
+				Object.assign(n.floating.style, {
+					maxWidth: `${e}px`,
+					maxHeight: `${t}px`
+				});
+			} })
+		], t = this.offset ?? 0;
+		return this.arrow && (t += 12, e = [...e, C({
+			element: this.arrowEl,
+			padding: 10
+		})]), t > 0 && e.unshift(g(t)), e;
+	}
+	#t;
+	openChanged(e, t) {
+		this.#r(), this.#n(), this.$emit(t ? "vwc-popup:open" : "vwc-popup:close");
+	}
+	animationFrameChanged() {
+		this.#n();
+	}
+	shiftCrossAxisChanged() {
+		this.#n();
+	}
+	anchorChanged() {
+		this.#n();
+	}
+	strategyChanged() {
+		this.#r();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#r(), this.#n();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#n();
+	}
+	#n() {
+		this.#t?.(), this.isConnected && (this.open && this.controlEl && this.controlEl.classList.add("open"), this.anchorEl && this.open && this.popupEl && (this.#t = x(this.anchorEl, this.popupEl, () => void this.#a(), { animationFrame: this.animationFrame })));
+	}
+	#r() {
+		this.popupEl && this.strategy === "fixed" && (this.open ? this.popupEl.showPopover() : this.popupEl.hidePopover());
+	}
+	#i;
+	#a;
+	async updatePosition() {
+		if (!this.open || !this.anchorEl) return;
+		let e = await _(this.anchorEl, this.popupEl, {
+			placement: this.placement,
+			strategy: this.strategy,
+			middleware: this.#e
+		});
+		this.#o(e), this.arrow && this.#s(e);
+	}
+	#o(e) {
+		let { x: t, y: n } = e, { referenceHidden: r } = e.middlewareData.hide;
+		Object.assign(this.popupEl.style, {
+			left: `${t}px`,
+			top: `${n}px`,
+			visibility: r ? "hidden" : "visible"
+		});
+	}
+	#s(e) {
+		let { x: t, y: n } = e.middlewareData.arrow, r = {
+			left: "calc(100% - 4px)",
+			right: "-4px",
+			top: "calc(100% - 4px)",
+			bottom: "-4px"
+		}, i = e.placement.split("-")[0];
+		Object.assign(this.arrowEl.style, {
+			left: t ? `${t}px` : r[i],
+			top: n ? `${n}px` : r[i]
+		});
+	}
+	get anchorEl() {
+		return this.anchor ?? null;
+	}
+	show() {
+		return this.open = !0, this.#i ?? Promise.resolve();
+	}
+	hide() {
+		this.open = !1;
+	}
+};
+l([r({ mode: "boolean" })], D.prototype, "open", void 0), l([r({ mode: "boolean" })], D.prototype, "dismissible", void 0), l([r({ mode: "boolean" })], D.prototype, "arrow", void 0), l([r({ mode: "boolean" })], D.prototype, "alternate", void 0), l([r({ mode: "fromView" })], D.prototype, "placement", void 0), l([r({
+	mode: "boolean",
+	attribute: "animation-frame"
+})], D.prototype, "animationFrame", void 0), l([r({
+	mode: "boolean",
+	attribute: "shift-cross-axis"
+})], D.prototype, "shiftCrossAxis", void 0), l([r({ mode: "fromView" })], D.prototype, "strategy", void 0), l([r({
+	attribute: "offset",
+	converter: n
+})], D.prototype, "offset", void 0), l([e], D.prototype, "anchor", void 0);
 //#endregion
-//#region src/lib/elevation/definition.ts
-var c = i("elevation", s, n` <div
-	class="${(e) => o("control", [`dp-${e.dp}`, !!e.dp], ["no-shadow", !!e.noShadow], ["not-relative", !!e.notRelative])}"
-	part="base"
->
-	<slot></slot>
-</div>`, [], { styles: ":host,.control{display:contents}.control.dp-0{--_elevation-fill:var(--_vvd-tinted-color-surface-0dp,var(--vvd-color-surface-0dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-0dp,var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill:var(--_vvd-tinted-color-surface-4dp,var(--vvd-color-surface-4dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-4dp,var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill:var(--_vvd-tinted-color-surface-8dp,var(--vvd-color-surface-8dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-8dp,var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill:var(--_vvd-tinted-color-surface-12dp,var(--vvd-color-surface-12dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-12dp,var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill:var(--_vvd-tinted-color-surface-16dp,var(--vvd-color-surface-16dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-16dp,var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill:var(--_vvd-tinted-color-surface-24dp,var(--vvd-color-surface-24dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-24dp,var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill:var(--_vvd-tinted-color-surface-2dp,var(--vvd-color-surface-2dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-2dp,var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{z-index:-1;border-radius:inherit;background:var(--_elevation-fill);content:\"\";block-size:100%;filter:var(--_elevation-shadow);inline-size:100%;transition:background-color .15s linear,filter .15s linear;position:absolute;inset-block-start:0;inset-inline-start:0}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}" }), l = e(c);
+//#region src/lib/popup/popup.scss?inline
+var O = ":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
-export { l as n, s as r, c as t };
+//#region src/lib/popup/popup.template.ts
+function k(e) {
+	return e.strategy && e.strategy === "fixed" ? "manual" : null;
+}
+//#endregion
+//#region src/lib/popup/definition.ts
+var A = o("popup", D, (e) => {
+	let t = e.tagFor(p), n = e.tagFor(d);
+	return i`
+  <${t}>
+		<div popover="${k}" class="popup-wrapper ${(e) => e.strategy}" ${s("popupEl")} part="popup-base">
+			<div ${s("controlEl")} class="${(e) => u("control", ["open", e.open], ["dismissible", e.dismissible], ["alternate", e.alternate])}" aria-hidden="${(e) => e.open ? "false" : "true"}"
+				part="${(e) => e.alternate ? "vvd-theme-alternate" : ""}">
+				<div class="popup-content">
+					<slot></slot>
+					${c((e) => e.dismissible, i`<${n} size="condensed" @click="${(e) => e.open = !1}"
+						class="dismissible-button" icon="close-small-solid" shape="pill"></${n}>`)}
+				</div>
+				${c((e) => e.arrow, i`<div class="arrow" ${s("arrowEl")}></div>`)}
+			</div>
+    </div>
+  </${t}>`;
+}, [m, f], { styles: O }), j = t(A);
+//#endregion
+export { D as i, j as n, T as r, A as t };

package/bundled/definition8.cjs

@@ -1,14 +1,22 @@
-const e=require(`./vivid-element.cjs`),t=require(`./ref.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./class-names.cjs`),a=require(`./definition6.cjs`),o=require(`./definition7.cjs`),s=require(`./floating-ui.dom.cjs`);var c={Flip:`flip`,AutoPlacementHorizontal:`auto-placement-horizontal`,AutoPlacementVertical:`auto-placement-vertical`},l={[c.Flip]:s.a(),[c.AutoPlacementHorizontal]:s.n({allowedPlacements:[`bottom`,`top`,`bottom-start`,`bottom-end`,`top-start`,`top-end`]}),[c.AutoPlacementVertical]:s.n({allowedPlacements:[`left`,`right`,`left-start`,`left-end`,`right-start`,`right-end`]})},u=class extends e.t{constructor(...e){super(...e),this.open=!1,this.dismissible=!1,this.arrow=!1,this.alternate=!1,this.placementStrategy=c.Flip,this.animationFrame=!1,this.shiftCrossAxis=!1,this.strategy=`fixed`,this.offset=null,this.#a=()=>(this.#i=this.updatePosition(),this.#i)}get#e(){let e=[s.s(),l[this.placementStrategy],s.l({crossAxis:this.shiftCrossAxis}),s.o(),s.u({apply({availableWidth:e,availableHeight:t,elements:n}){Object.assign(n.floating.style,{maxWidth:`${e}px`,maxHeight:`${t}px`})}})],t=this.offset??0;return this.arrow&&(t+=12,e=[...e,s.t({element:this.arrowEl,padding:10})]),t>0&&e.unshift(s.c(t)),e}#t;openChanged(e,t){this.#r(),this.#n(),this.$emit(t?`vwc-popup:open`:`vwc-popup:close`)}animationFrameChanged(){this.#n()}shiftCrossAxisChanged(){this.#n()}anchorChanged(){this.#n()}strategyChanged(){this.#r()}connectedCallback(){super.connectedCallback(),this.#r(),this.#n()}disconnectedCallback(){super.disconnectedCallback(),this.#n()}#n(){this.#t?.(),this.isConnected&&(this.open&&this.controlEl&&this.controlEl.classList.add(`open`),this.anchorEl&&this.open&&this.popupEl&&(this.#t=s.r(this.anchorEl,this.popupEl,()=>void this.#a(),{animationFrame:this.animationFrame})))}#r(){this.popupEl&&this.strategy===`fixed`&&(this.open?this.popupEl.showPopover():this.popupEl.hidePopover())}#i;#a;async updatePosition(){if(!this.open||!this.anchorEl)return;let e=await s.i(this.anchorEl,this.popupEl,{placement:this.placement,strategy:this.strategy,middleware:this.#e});this.#o(e),this.arrow&&this.#s(e)}#o(e){let{x:t,y:n}=e,{referenceHidden:r}=e.middlewareData.hide;Object.assign(this.popupEl.style,{left:`${t}px`,top:`${n}px`,visibility:r?`hidden`:`visible`})}#s(e){let{x:t,y:n}=e.middlewareData.arrow,r={left:`calc(100% - 4px)`,right:`-4px`,top:`calc(100% - 4px)`,bottom:`-4px`},i=e.placement.split(`-`)[0];Object.assign(this.arrowEl.style,{left:t?`${t}px`:r[i],top:n?`${n}px`:r[i]})}get anchorEl(){return this.anchor??null}show(){return this.open=!0,this.#i??Promise.resolve()}hide(){this.open=!1}};r.t([e.m({mode:`boolean`})],u.prototype,`open`,void 0),r.t([e.m({mode:`boolean`})],u.prototype,`dismissible`,void 0),r.t([e.m({mode:`boolean`})],u.prototype,`arrow`,void 0),r.t([e.m({mode:`boolean`})],u.prototype,`alternate`,void 0),r.t([e.m({mode:`fromView`})],u.prototype,`placement`,void 0),r.t([e.m({mode:`boolean`,attribute:`animation-frame`})],u.prototype,`animationFrame`,void 0),r.t([e.m({mode:`boolean`,attribute:`shift-cross-axis`})],u.prototype,`shiftCrossAxis`,void 0),r.t([e.m({mode:`fromView`})],u.prototype,`strategy`,void 0),r.t([e.m({attribute:`offset`,converter:e.h})],u.prototype,`offset`,void 0),r.t([e.A],u.prototype,`anchor`,void 0);var d=`: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}`;function f(e){return e.strategy&&e.strategy===`fixed`?`manual`:null}var p=e.u(`popup`,u,r=>{let s=r.tagFor(o.r),c=r.tagFor(a.i);return e.p`
-  <${s}>
-		<div popover="${f}" class="popup-wrapper ${e=>e.strategy}" ${t.t(`popupEl`)} part="popup-base">
-			<div ${t.t(`controlEl`)} class="${e=>i.t(`control`,[`open`,e.open],[`dismissible`,e.dismissible],[`alternate`,e.alternate])}" aria-hidden="${e=>e.open?`false`:`true`}"
-				part="${e=>e.alternate?`vvd-theme-alternate`:``}">
-				<div class="popup-content">
-					<slot></slot>
-					${n.t(e=>e.dismissible,e.p`<${c} size="condensed" @click="${e=>e.open=!1}"
-						class="dismissible-button" icon="close-small-solid" shape="pill"></${c}>`)}
-				</div>
-				${n.t(e=>e.arrow,e.p`<div class="arrow" ${t.t(`arrowEl`)}></div>`)}
-			</div>
-    </div>
-  </${s}>`},[o.t,a.t],{styles:d}),m=e.d(p);Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return p}});
+const e=require("./vivid-element.cjs"),t=require("./slotted.cjs"),n=require("./when.cjs"),r=require("./decorate.cjs"),i=require("./class-names.cjs"),a=require("./definition7.cjs"),o=require("./anchored.cjs"),s=require("./kbd-shortcut.cjs"),c=require("./render-in-light-dom.cjs"),l=require("./dialog.cjs");var u=`:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}`,d=class extends s.t(o.t(e.t)){constructor(...e){super(...e),this.open=!1,this._descriptionId=`vwc-tooltip-desc-${c.n()}`,this._descriptionSecondaryId=`vwc-tooltip-desc-secondary-${c.n()}`,this._defaultSlotContent=[],this.#i=()=>{this.open=!0},this.#a=()=>{this.open=!1},this.#s=e=>{e.key===`Escape`&&this.#a()}}_defaultSlotContentChanged(){for(let e of this._defaultSlotContent)e.id||=`vwc-tooltip-content-${c.n()}`;this._anchorEl&&this.#t(this._anchorEl)}_kbdAriaShortcutsValueChanged(){this._anchorEl&&e.P.setAttribute(this._anchorEl,`aria-keyshortcuts`,this._kbdAriaShortcutsValue)}connectedCallback(){super.connectedCallback(),this.#o()}disconnectedCallback(){super.disconnectedCallback(),this.#o()}_anchorElChanged(e,t){e&&this.#r(e),t&&this.#n(t)}#e(){return[this._descriptionId,this._descriptionSecondaryId,...this._defaultSlotContent.map(e=>e.id).filter(Boolean)]}#t(e){let t=e.getAttribute(`aria-describedby`)??e.ariaDescribedBy??``,n=new Set(this.#e()),r=t.split(` `).filter(e=>e&&!n.has(e));e.setAttribute(`aria-describedby`,[...r,...this.#e()].join(` `))}#n(t){t.addEventListener(`mouseover`,this.#i),t.addEventListener(`mouseout`,this.#a),t.addEventListener(`focusin`,this.#i),t.addEventListener(`focusout`,this.#a),this.#t(t),e.P.setAttribute(t,`aria-keyshortcuts`,this._kbdAriaShortcutsValue)}#r(t){t.removeEventListener(`mouseover`,this.#i),t.removeEventListener(`mouseout`,this.#a),t.removeEventListener(`focusin`,this.#i),t.removeEventListener(`focusout`,this.#a);let n=t.getAttribute(`aria-describedby`)??t.ariaDescribedBy??``,r=new Set(this.#e()),i=n.split(` `).filter(e=>e&&!r.has(e)),a=i.length?i.join(` `):null;t.hasAttribute(`aria-describedby`)?e.P.setAttribute(t,`aria-describedby`,a):t.ariaDescribedBy=a,t.removeAttribute(`aria-keyshortcuts`)}#i;#a;#o(){document.removeEventListener(`keydown`,this.#s),this.open&&this.isConnected&&document.addEventListener(`keydown`,this.#s)}#s;openChanged(e){e!==void 0&&this.#o()}};r.t([e.m],d.prototype,`text`,void 0),r.t([e.m({attribute:`text-secondary`})],d.prototype,`textSecondary`,void 0),r.t([e.m({mode:`fromView`})],d.prototype,`placement`,void 0),r.t([e.m({mode:`boolean`})],d.prototype,`open`,void 0),r.t([e.A],d.prototype,`_defaultSlotContent`,void 0);var f=e.u(`tooltip`,d,r=>{let s=r.tagFor(a.i),u=o.n();return e.p`
+${u}
+${c.t(e.p`<span slot="_description" id="${e=>e._descriptionId}">${e=>e.text}</span><span slot="_description-secondary" id="${e=>e._descriptionSecondaryId}">${e=>e.textSecondary}</span>`)}
+<${s} class="${e=>i.t(`control`,[`open`,e.open])}" arrow alternate
+	:placement=${e=>e.placement}
+	:anchor="${e=>e._anchorEl}"
+	:open="${e=>e.open}"
+	@keydown="${(e,t)=>{e.open&&l.t(t.event)&&(e.open=!1)}}"
+  exportparts="vvd-theme-alternate">
+  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
+		<span class="text"><slot name="_description"></slot></span>
+		${n.t(e=>e.textSecondary,e.p`<span class="text-secondary"
+				><slot name="_description-secondary"></slot
+			></span>`)}
+		<slot
+			${t.t({property:`_defaultSlotContent`,filter:t.r()})}
+		></slot>
+		<slot name="kbd-shortcut"
+			${t.t({property:`_kbdShortcutSlotted`,filter:t.r()})}
+		></slot>
+  </div>
+</${s}>`},[a.t],{styles:u}),p=e.d(f);Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});