@vonage/vivid 5.15.0 → 5.16.0

package/bundled/definition3.js

@@ -1,196 +1,184 @@
-import { I as k, i as w } from "./definition2.js";
-import { P as $, p as I } from "./definition16.js";
-import { a as t, h as l, c as C, d as B } from "./vivid-element.js";
-import { V as T } from "./button.js";
-import { A as L, a as F, I as P } from "./affix.js";
-import { L as j } from "./localized.js";
-import { L as D } from "./linkable.js";
-import { a as d } from "./enums.js";
-import { d as N } from "./delegates-aria.js";
-import { w as v } from "./when.js";
-import { r as S } from "./ref.js";
-import { c as m } from "./class-names.js";
-var V = Object.defineProperty, c = (n, o, a, p) => {
-  for (var r = void 0, i = n.length - 1, s; i >= 0; i--)
-    (s = n[i]) && (r = s(o, a, r) || r);
-  return r && V(o, a, r), r;
-};
-class e extends L(
-  j(D(T))
-) {
-  constructor() {
-    super(), this.stacked = !1, this.pending = !1, this.dropdownIndicator = !1, this.active = !1, this.title = "";
-  }
-  /**
-   * Handles click events.
-   * Prevents interaction when disabled or pending.
-   */
-  clickHandler(o) {
-    /* v8 ignore else -- @preserve */
-    if (this.disabled || this.pending) {
-      o.preventDefault(), o.stopImmediatePropagation();
-      return;
-    }
-  }
-}
-c([
-  t({
-    converter: {
-      fromView: (n) => n || null,
-      toView: (n) => n || null
-    }
-  })
-], e.prototype, "title");
-c([
-  t
-], e.prototype, "connotation");
-c([
-  t
-], e.prototype, "shape");
-c([
-  t
-], e.prototype, "appearance");
-c([
-  t
-], e.prototype, "size");
-c([
-  t({
-    mode: "boolean",
-    attribute: "stacked"
-  })
-], e.prototype, "stacked");
-c([
-  t({
-    mode: "boolean",
-    attribute: "pending"
-  })
-], e.prototype, "pending");
-c([
-  t({
-    mode: "boolean",
-    attribute: "dropdown-indicator"
-  })
-], e.prototype, "dropdownIndicator");
-c([
-  t({
-    mode: "boolean",
-    attribute: "active"
-  })
-], e.prototype, "active");
-c([
-  t
-], e.prototype, "label");
-const A = '.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);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))}.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))}.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))}.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))}.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))}.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)}@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-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: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{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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-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: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-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{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:space-between;border:0 none;border-radius:var(--_button-border-radius);margin:0;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);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%;text-align:start}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:var(--button-cursor, pointer)}.control.disabled{cursor:not-allowed}@supports (user-select: none){.control{user-select:none}}.control:not(.stacked).size-super-condensed{--_button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;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*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;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*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_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*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_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*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_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{position:relative;outline:none}.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));position:absolute;display:block;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));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]{display:flex;order:1}.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{display:flex;overflow:hidden;flex:1;align-items:center;justify-content:center;gap:var(--_button-icon-gap)}.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{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}', O = (n) => {
-  const o = n.tagFor(k);
-  return l`<${o} class="chevron" aria-hidden="true" name="chevron-down-line"></${o}>`;
-}, _ = ({
-  connotation: n,
-  appearance: o,
-  shape: a,
-  iconTrailing: p,
-  icon: r,
-  label: i,
-  disabled: s,
-  pending: u,
-  stacked: b,
-  size: f,
-  iconSlottedContent: x,
-  ariaExpanded: h,
-  active: g,
-  dropdownIndicator: z
-}) => m(
-  "control",
-  [`connotation-${n}`, !!n],
-  [`appearance-${o}`, !!o],
-  ["disabled", s || u],
-  [`shape-${a}`, !!a],
-  [`size-${f}`, !!f],
-  [
-    "icon-only",
-    !i && !!(r || x?.length) && !z
-  ],
-  ["icon-trailing", p],
-  ["stacked", !!b],
-  ["active", h === "true" || g]
-);
-function E(n, o, a, p = d.Normal) {
-  if (a && p != d.SuperCondensed) {
-    const r = n.tagFor($), i = {
-      [d.Condensed]: "-6",
-      [d.Normal]: "-5",
-      [d.Expanded]: "-4"
-    };
-    return l`<span class="${(u) => {
-      const b = u.querySelector('[slot="icon"]');
-      return m("icon", "pending", [
-        "pending-no-icon",
-        !(o || b)
-      ]);
-    }}" aria-hidden="true"><${r} size="${i[p]}"></${r}></span>`;
-  } else
-    return F(n)(o, P.Slot);
-}
-const R = (n) => ["submit", "button", "reset"].indexOf(n) > -1 ? n : "submit", y = (n) => {
-  const o = O(n);
-  return l`<span class="content">
-			${(a) => E(n, a.icon, a.pending, a.size)}
-			${v(
-    (a) => a.label,
-    l`<span class="text" aria-hidden="true">${(a) => a.label}</span>`
-  )}
-			<span class="sr-only"
-				>${(a) => a.pending ? a.locale.button.pendingLabel : a.ariaLabel ?? a.label}</span
-			>
-		</span>
-		${v((a) => a.dropdownIndicator, o)}`;
-};
-function H(n) {
-  return l` <button
-		class="${_}"
-		?autofocus="${(o) => o.autofocus}"
-		form="${(o) => o.formId}"
-		formaction="${(o) => o.formaction}"
-		formenctype="${(o) => o.formenctype}"
-		formmethod="${(o) => o.formmethod}"
-		formnovalidate="${(o) => o.formnovalidate}"
-		formtarget="${(o) => o.formtarget}"
-		name="${(o) => o.name}"
-		type="${(o) => R(o.type)}"
-		value="${(o) => o.value}"
-		title="${(o) => o.title}"
-		${N({
-    ariaLabel: null,
-    ariaDisabled: (o) => o.disabled || o.pending
-  })}
-		${S("control")}
-		@click="${(o, a) => o.clickHandler(a.event)}"
-	>
-		${y(n)}
-	</button>`;
-}
-function W(n) {
-  return l`${(o) => o._renderLinkElement(y(n), _, {
-    ariaLabel: null
-  })}`;
-}
-const q = (n) => l` <template>
-		${v((o) => !o.href, l`${H(n)}`)}
-		${v((o) => o.href, W(n))}
-	</template>`, G = B(
-  "button",
-  e,
-  q,
-  [w, I],
-  {
-    styles: A,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), eo = C(G);
-export {
-  e as B,
-  G as b,
-  O as c,
-  eo as r
+import { t as e } from "./localized.js";
+import { E as t, T as n, l as r, o as i, s as a, t as o, u as s } from "./vivid-element.js";
+import { t as c } from "./decorate.js";
+import { t as l } from "./aria.js";
+import { i as u, n as d, r as f, t as p } from "./key-codes.js";
+import { n as m } from "./numbers.js";
+import { t as h } from "./delegates-aria.js";
+import { n as g } from "./form-associated.js";
+import { t as _ } from "./definition8.js";
+import { a as v, i as y, o as b, r as x, t as S } from "./slider.template.js";
+//#region ../../node_modules/.pnpm/@microsoft+fast-web-utilities@6.0.0/node_modules/@microsoft/fast-web-utilities/dist/localization.js
+var C;
+(function(e) {
+	e.ltr = "ltr", e.rtl = "rtl";
+})(C ||= {});
+//#endregion
+//#region src/lib/slider/slider.scss?inline
+var w = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary:var(--vvd-slider-cta-primary,var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-slider-accent-primary,var(--vvd-color-canvas-text))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.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));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);transition:opacity .2s ease-out;display:block;position:absolute}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}", T = (e) => {
+	let t = e.closest("[dir]");
+	return t !== null && t.dir === "rtl" ? C.rtl : C.ltr;
+}, E = { singleValue: "single-value" }, D = class extends e(h(g(o))) {
+	constructor(...e) {
+		super(...e), this.proxy = document.createElement("input"), this.direction = C.ltr, this.isDragging = !1, this.trackWidth = 0, this.trackMinWidth = 0, this.trackHeight = 0, this.trackLeft = 0, this.trackMinHeight = 0, this.valueTextFormatter = (e) => parseFloat(e).toLocaleString(this.locale.lang), this.min = 0, this.max = 10, this.step = 1, this.orientation = l.horizontal, this.mode = E.singleValue, this.keypressHandler = (e) => {
+			if (this._focusVisible = !0, !this.readOnly) if (e.key === "Home") e.preventDefault(), this.value = `${this.min}`;
+			else if (e.key === "End") e.preventDefault(), this.value = `${this.max}`;
+			else {
+				if (e.shiftKey) return;
+				switch (e.key) {
+					case f:
+					case u:
+						e.preventDefault(), this.increment();
+						break;
+					case d:
+					case p:
+						e.preventDefault(), this.decrement();
+						break;
+				}
+			}
+		}, this.setupTrackConstraints = () => {
+			let e = this.track.getBoundingClientRect();
+			this.trackWidth = this.track.clientWidth, this.trackMinWidth = this.track.clientLeft, this.trackHeight = e.bottom, this.trackMinHeight = e.top, this.trackLeft = this.getBoundingClientRect().left, this.trackWidth === 0 && (this.trackWidth = 1);
+		}, this.setupListeners = (e = !1) => {
+			let t = e ? "removeEventListener" : "addEventListener";
+			this[t]("keydown", this.keypressHandler), this[t]("mousedown", this.handleMouseDown), this.thumb[t]("mousedown", this.handleThumbMouseDown, { passive: !0 }), this.thumb[t]("touchstart", this.handleThumbMouseDown, { passive: !0 }), e && (this.handleMouseDown(null), this.handleThumbMouseDown(null));
+		}, this.initialValue = "", this.handleThumbMouseDown = (e) => {
+			if (e) {
+				if (this.readOnly || this.disabled || e.defaultPrevented) return;
+				this.#r = !0, e.target.focus(), this.#r = !1;
+			}
+			let t = e === null ? "removeEventListener" : "addEventListener";
+			window[t]("mouseup", this.handleWindowMouseUp), window[t]("mousemove", this.handleMouseMove, { passive: !0 }), window[t]("touchmove", this.handleMouseMove, { passive: !0 }), window[t]("touchend", this.handleWindowMouseUp), this.isDragging = e !== null;
+		}, this.handleMouseMove = (e) => {
+			if (this.readOnly || this.disabled || e.defaultPrevented) return;
+			let t = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e, n = this.#t(t);
+			this.value = `${this.#n(n)}`;
+		}, this.handleWindowMouseUp = (e) => {
+			this.stopDragging();
+		}, this.stopDragging = () => {
+			this.isDragging = !1, this.handleMouseDown(null), this.handleThumbMouseDown(null);
+		}, this.handleMouseDown = (e) => {
+			let t = e === null ? "removeEventListener" : "addEventListener";
+			if ((e === null || !this.disabled && !this.readOnly) && (window[t]("mouseup", this.handleWindowMouseUp), window.document[t]("mouseleave", this.handleWindowMouseUp), window[t]("mousemove", this.handleMouseMove), e)) {
+				e.preventDefault(), this.setupTrackConstraints(), this.#r = !0, e.target.focus(), this.#r = !1;
+				let t = this.#t(e);
+				this.value = `${this.#n(t)}`, this.isDragging = !0;
+			}
+		}, this.markers = !1, this.pin = !1, this._focusVisible = !1, this._hoveringOnThumb = !1, this._onFocusIn = () => {
+			this.#r || (this._focusVisible = !0);
+		}, this._onFocusOut = () => {
+			this._focusVisible = !1;
+		};
+	}
+	readOnlyChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly);
+	}
+	get valueAsNumber() {
+		return parseFloat(this.value);
+	}
+	set valueAsNumber(e) {
+		this.value = e.toString();
+	}
+	valueChanged(e, t) {
+		if (super.valueChanged(e, t), this.$fastController.isConnected) {
+			let e = parseFloat(t), n = this.#n(e).toString();
+			if (n !== t) {
+				this.value = n;
+				return;
+			}
+			this.setThumbPositionForOrientation(this.direction), this.$emit("change");
+		}
+	}
+	minChanged() {
+		this.proxy instanceof HTMLInputElement && (this.proxy.min = `${this.min}`), this.validate();
+	}
+	maxChanged() {
+		this.proxy instanceof HTMLInputElement && (this.proxy.max = `${this.max}`), this.validate();
+	}
+	stepChanged() {
+		this.proxy instanceof HTMLInputElement && (this.proxy.step = `${this.step}`), this.updateStepMultiplier(), this.validate();
+	}
+	orientationChanged() {
+		this.$fastController.isConnected && this.setThumbPositionForOrientation(this.direction);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.proxy.setAttribute("type", "range"), this.direction = T(this), this.updateStepMultiplier(), this.setupTrackConstraints(), this.setupListeners(), this.setupDefaultValue(), this.setThumbPositionForOrientation(this.direction), this.#i();
+	}
+	disconnectedCallback() {
+		this.setupListeners(!0), this.#a();
+	}
+	increment() {
+		let e = this.direction !== C.rtl && this.orientation !== l.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
+		this.value = this.#n(e).toString();
+	}
+	decrement() {
+		let e = this.direction !== C.rtl && this.orientation !== l.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
+		this.value = this.#n(e).toString();
+	}
+	setThumbPositionForOrientation(e) {
+		let t = this.#e(this.valueAsNumber);
+		this.orientation === l.horizontal ? this.position = this.isDragging ? `right: ${t}%; transition: none;` : `right: ${t}%; transition: right 0.2s ease;` : this.position = this.isDragging ? `bottom: ${t}%; transition: none;` : `bottom: ${t}%; transition: bottom 0.2s ease;`;
+	}
+	#e(e) {
+		return (1 - x(this.min, this.max, e)) * 100;
+	}
+	updateStepMultiplier() {
+		let e = this.step + "";
+		this.stepMultiplier = 10 ** (this.step % 1 ? e.length - e.indexOf(".") - 1 : 0);
+	}
+	get midpoint() {
+		return `${this.#n((this.max + this.min) / 2)}`;
+	}
+	setupDefaultValue() {
+		/* v8 ignore else -- @preserve */
+		if (typeof this.value == "string") if (this.value.length === 0) this.initialValue = this.midpoint;
+		else {
+			let e = parseFloat(this.value);
+			!Number.isNaN(e) && (e < this.min || e > this.max) && (this.value = this.midpoint);
+		}
+	}
+	#t(e) {
+		let t = this.track.getBoundingClientRect(), [n, r, i] = this.orientation === l.horizontal ? [
+			this.track.clientLeft,
+			this.track.clientWidth,
+			e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
+		] : [
+			t.top,
+			t.bottom,
+			e.pageY - document.documentElement.scrollTop
+		];
+		return y(this.min, this.max, x(n, r, i));
+	}
+	#n(e) {
+		return m(this.min, this.max, b(e - this.min, this.step) + this.min);
+	}
+	get _isThumbPopupOpen() {
+		return this._focusVisible || this._hoveringOnThumb || this.isDragging;
+	}
+	#r = !1;
+	#i() {
+		this.thumb.addEventListener("mouseover", this.#o, { passive: !0 }), this.thumb.addEventListener("mouseout", this.#s, { passive: !0 });
+	}
+	#a() {
+		this.thumb.removeEventListener("mouseover", this.#o), this.thumb.removeEventListener("mouseout", this.#s);
+	}
+	#o = () => {
+		this._hoveringOnThumb = !0;
+	};
+	#s = () => {
+		this._hoveringOnThumb = !1;
+	};
 };
+c([r({
+	attribute: "readonly",
+	mode: "boolean"
+})], D.prototype, "readOnly", void 0), c([n], D.prototype, "direction", void 0), c([n], D.prototype, "isDragging", void 0), c([n], D.prototype, "position", void 0), c([n], D.prototype, "trackWidth", void 0), c([n], D.prototype, "trackMinWidth", void 0), c([n], D.prototype, "trackHeight", void 0), c([n], D.prototype, "trackLeft", void 0), c([n], D.prototype, "trackMinHeight", void 0), c([n], D.prototype, "valueTextFormatter", void 0), c([r({ converter: s })], D.prototype, "min", void 0), c([r({ converter: s })], D.prototype, "max", void 0), c([r({ converter: v })], D.prototype, "step", void 0), c([r], D.prototype, "orientation", void 0), c([r], D.prototype, "mode", void 0), c([r({ mode: "boolean" })], D.prototype, "markers", void 0), c([r({ mode: "boolean" })], D.prototype, "pin", void 0), c([r], D.prototype, "connotation", void 0), c([n], D.prototype, "_focusVisible", void 0), c([n], D.prototype, "_hoveringOnThumb", void 0), c([t], D.prototype, "_isThumbPopupOpen", null);
+//#endregion
+//#region src/lib/slider/definition.ts
+var O = i("slider", D, S, [_], {
+	styles: w,
+	shadowOptions: { delegatesFocus: !0 }
+}), k = a(O);
+//#endregion
+export { O as n, D as r, k as t };

package/bundled/definition4.cjs

@@ -1,6 +1,39 @@
-"use strict";const e=require("./vivid-element.cjs"),i=require("./class-names.cjs");var c=Object.defineProperty,n=(o,r,d,h)=>{for(var t=void 0,v=o.length-1,l;v>=0;v--)(l=o[v])&&(t=l(r,d,t)||t);return t&&c(r,d,t),t};class a extends e.VividElement{}n([e.attr],a.prototype,"dp");n([e.attr({attribute:"no-shadow",mode:"boolean"})],a.prototype,"noShadow");n([e.attr({attribute:"not-relative",mode:"boolean"})],a.prototype,"notRelative");const p=':host{display:contents}.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{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:"";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}',f=({dp:o,noShadow:r,notRelative:d})=>i.classNames("control",[`dp-${o}`,!!o],["no-shadow",!!r],["not-relative",!!d]),u=e.html` <div
-	class="${f}"
-	part="base"
->
-	<slot></slot>
-</div>`,s=e.defineVividComponent("elevation",a,u,[],{styles:p}),_=e.createRegisterFunction(s);exports.Elevation=a;exports.elevationDefinition=s;exports.registerElevation=_;
+const e=require(`./vivid-element.cjs`),t=require(`./ref.cjs`),n=require(`./when.cjs`),r=require(`./slotted.cjs`),i=require(`./definition2.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./affix.cjs`);var c=`:host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}`,l=class extends s.n(e.t){constructor(...e){super(...e),this.headinglevel=2,this.expanded=!1,this.noIndicator=!1,this.clickHandler=()=>{this.expanded=!this.expanded,this.change()},this.change=()=>{this.$emit(`change`)}}};a.t([e.l({attribute:`heading-level`,mode:`fromView`,converter:e.u})],l.prototype,`headinglevel`,void 0),a.t([e.l],l.prototype,`appearance`,void 0),a.t([e.l({mode:`boolean`})],l.prototype,`expanded`,void 0),a.t([e.l],l.prototype,`id`,void 0),a.t([e.l],l.prototype,`heading`,void 0),a.t([e.T],l.prototype,`_headingSlottedContent`,void 0),a.t([e.l({mode:`boolean`,attribute:`no-indicator`})],l.prototype,`noIndicator`,void 0),a.t([e.l],l.prototype,`meta`,void 0),a.t([e.T],l.prototype,`_metaSlottedContent`,void 0),a.t([e.l],l.prototype,`size`,void 0);var u=({appearance:e,size:t})=>o.t(`heading-button`,[`appearance-${e}`,!!e],[`size-${t}`,!!t]),d=(i,a)=>{let o=s.a(i),c=e.d.partial(a);return e.d`
+		<${c} class="heading-container">
+			<button
+				class="${u}"
+				id="${e=>e.id}"
+				aria-expanded="${e=>e.expanded}"
+				aria-controls="${e=>e.id}-panel"
+				@click="${e=>e.clickHandler()}"
+				${t.t(`expandbutton`)}
+			>
+
+				${e=>e.iconTrailing?null:o(e.icon,s.i.Slot)}
+
+				<span class="heading-content">
+					<slot name="heading" ${r.t(`_headingSlottedContent`)}></slot>
+					${n.t(e=>e.heading&&!e._headingSlottedContent?.length,e.d`${e=>e.heading}`)}
+				</span>
+
+				<span class="meta">
+					<slot name="meta" ${r.t(`_metaSlottedContent`)}></slot>
+					${n.t(e=>e.meta&&!e._metaSlottedContent?.length,e.d`${e=>e.meta}`)}
+				</span>
+
+				${e=>e.icon&&e.iconTrailing?o(e.icon):null}
+				${e=>!(e.icon&&e.iconTrailing)&&!e.noIndicator?o(e.expanded?`chevron-up-line`:`chevron-down-line`):null}
+
+			</button>
+		</${c}>
+	`},f=e.o(`accordion-item`,l,t=>e.d`
+	${e=>d(t,`h`+e.headinglevel)}
+	<div
+		id="${e=>e.id}-panel"
+		aria-labelledby="${e=>e.id}"
+		role="region"
+		class="region ${e=>e.icon&&!e.iconTrailing?`padded`:``} ${e=>e.size?`size-${e.size}`:``}"
+	>
+		<slot></slot>
+	</div>
+`,[i.t],{styles:c}),p=e.s(f);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});