@vonage/vivid 5.14.0 → 5.15.1

package/popover/definition.js

@@ -6,7 +6,7 @@ import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-ar
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
-import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
+import { B as Button, b as buttonDefinition } from '../unbundled/definition2.js';
 
 const styles = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:fixed;overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg, transparent)}.control{display:flex;flex-direction:column;padding:var(--popover-padding, 24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap, 24px)}.control:not(.open){display:none}.control.condensed{--popover-padding: 12px;--popover-gap: 12px}.control.manual{padding-block-start:40px}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";
 
@@ -127,7 +127,6 @@ class Popover extends Localized(DelegatesAria(VividElement)) {
    */
   get #middleware() {
     let middleware = [inline(), flip(), shift(), hide()];
-    /* v8 ignore next -- @preserve */
     let offsetValue = this.offset ?? 0;
     if (this.arrow && this._arrowEl) {
       offsetValue = 12;
@@ -136,7 +135,6 @@ class Popover extends Localized(DelegatesAria(VividElement)) {
         arrow({ element: this._arrowEl, padding: 10 })
       ];
     }
-    /* v8 ignore else -- @preserve */
     if (offsetValue > 0) {
       middleware.unshift(offset(offsetValue));
     }
@@ -170,7 +168,6 @@ class Popover extends Localized(DelegatesAria(VividElement)) {
    * @public
    */
   async updatePosition() {
-    /* v8 ignore if -- @preserve */
     if (!this.open || !this.#currentAnchor || !this._popoverEl) return;
     const positionData = await computePosition(
       this.#currentAnchor,
@@ -181,7 +178,6 @@ class Popover extends Localized(DelegatesAria(VividElement)) {
         middleware: this.#middleware
       }
     );
-    /* v8 ignore if -- @preserve */
     if (!this.open) return;
     this.#assignPopoverPosition(positionData);
     if (this.arrow && this._arrowEl) {
@@ -203,7 +199,6 @@ class Popover extends Localized(DelegatesAria(VividElement)) {
    * @internal
    */
   #assignArrowPosition(data) {
-    /* v8 ignore if -- @preserve */
     if (!this._arrowEl) return;
     const { x: arrowX, y: arrowY } = data.middlewareData.arrow;
     const styles = {
@@ -222,7 +217,6 @@ class Popover extends Localized(DelegatesAria(VividElement)) {
   connectedCallback() {
     super.connectedCallback();
     this.#updateAnchor();
-    /* v8 ignore else -- @preserve */
     if (this._popoverEl) {
       this._popoverEl.addEventListener("toggle", this.#handleNativeToggle);
       if (this.open && !this._popoverEl.matches(":popover-open")) {
@@ -238,7 +232,6 @@ class Popover extends Localized(DelegatesAria(VividElement)) {
       this.#unbindTrigger(this.#currentAnchor);
       this.#currentAnchor = null;
     }
-    /* v8 ignore else -- @preserve */
     if (this._popoverEl) {
       this._popoverEl.removeEventListener("toggle", this.#handleNativeToggle);
     }

package/popover/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const u=require("../bundled/definition4.cjs"),i=require("../bundled/vivid-element.cjs"),l=require("../bundled/floating-ui.dom.cjs"),v=require("../bundled/delegates-aria.cjs"),m=require("../bundled/localized.cjs"),b=require("../bundled/definition2.cjs"),f=require("../bundled/definition3.cjs"),g=require("../bundled/slotted.cjs"),d=require("../bundled/ref.cjs"),h=require("../bundled/when.cjs"),w=require("../bundled/class-names.cjs"),E=":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:fixed;overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg, transparent)}.control{display:flex;flex-direction:column;padding:var(--popover-padding, 24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap, 24px)}.control:not(.open){display:none}.control.condensed{--popover-padding: 12px;--popover-gap: 12px}.control.manual{padding-block-start:40px}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";var _=Object.defineProperty,a=(n,e,t,r)=>{for(var o=void 0,p=n.length-1,c;p>=0;p--)(c=n[p])&&(o=c(e,t,o)||o);return o&&_(e,t,o),o};class s extends m.Localized(v.DelegatesAria(i.VividElement)){constructor(){super(...arguments),this.placement="bottom",this.manual=!1,this.layout="default",this.offset=8,this.alternate=!1,this.dismissButtonAriaLabel=null,this.arrow=!1,this.open=!1,this.#e=null,this.#i=()=>{this._popoverEl.togglePopover()},this.#l=()=>{this.#n=this.updatePosition()},this.#s=e=>{const t=e.newState?e.newState==="open":this._popoverEl.matches(":popover-open");this.open!==t&&(this.open=t),this.$emit(t?"open":"close",void 0,{bubbles:!1})}}placementChanged(){this.#t()}arrowChanged(){this.#t()}openChanged(e,t){if(!this._popoverEl)return;const r=this._popoverEl.matches(":popover-open");t&&!r?this._popoverEl.showPopover():!t&&r&&this._popoverEl.hidePopover(),this.#t()}anchorChanged(){this.#o()}_slottedAnchorChanged(){this.#o()}#e;#o(){if(!this._popoverEl)return;const e=this.anchor||this._slottedAnchor?.[0]||null;this.#e!==e&&(this.#e&&this.#a(this.#e),this.#e=e,this.#e&&this._popoverEl&&(this.#p(this.#e),this.#t()))}#p(e){e.setAttribute("aria-haspopup","dialog"),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=this._popoverEl:e.addEventListener("click",this.#i)}#a(e){e.removeAttribute("aria-haspopup"),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=null:e.removeEventListener("click",this.#i)}#i;get#c(){let e=[l.inline(),l.flip(),l.shift(),l.hide()];/* v8 ignore next -- @preserve */let t=this.offset??0;this.arrow&&this._arrowEl&&(t=12,e=[...e,l.arrow({element:this._arrowEl,padding:10})]);/* v8 ignore else -- @preserve */return t>0&&e.unshift(l.offset(t)),e}#r;#t(){this.#r?.(),this.open&&this.#e&&this._popoverEl&&(this.#r=l.autoUpdate(this.#e,this._popoverEl,this.#l))}#n;#l;async updatePosition(){/* v8 ignore if -- @preserve */if(!this.open||!this.#e||!this._popoverEl)return;const e=await l.computePosition(this.#e,this._popoverEl,{placement:this.placement,strategy:"fixed",middleware:this.#c});/* v8 ignore if -- @preserve */this.open&&(this.#d(e),this.arrow&&this._arrowEl&&this.#h(e))}#d(e){const{x:t,y:r}=e;Object.assign(this._popoverEl.style,{left:`${t}px`,top:`${r}px`,visibility:e.middlewareData.hide?.referenceHidden?"hidden":"visible"})}#h(e){/* v8 ignore if -- @preserve */if(!this._arrowEl)return;const{x:t,y:r}=e.middlewareData.arrow,o={left:"calc(100% - 4px)",right:"-4px",top:"calc(100% - 4px)",bottom:"-4px"},p=e.placement.split("-")[0];Object.assign(this._arrowEl.style,{left:t?`${t}px`:o[p],top:r?`${r}px`:o[p]})}#s;connectedCallback(){super.connectedCallback(),this.#o();/* v8 ignore else -- @preserve */this._popoverEl&&(this._popoverEl.addEventListener("toggle",this.#s),this.open&&!this._popoverEl.matches(":popover-open")&&(this._popoverEl.showPopover(),this.#t()))}disconnectedCallback(){super.disconnectedCallback(),this.#r?.(),this.#e&&(this.#a(this.#e),this.#e=null);/* v8 ignore else -- @preserve */this._popoverEl&&this._popoverEl.removeEventListener("toggle",this.#s)}show(){return this.open=!0,this.#n??Promise.resolve()}hide(){this.open=!1}toggle(){this.open=!this.open}}a([i.attr({mode:"fromView"})],s.prototype,"placement");a([i.attr({mode:"boolean"})],s.prototype,"manual");a([i.attr({mode:"fromView"})],s.prototype,"layout");a([i.attr({attribute:"offset",mode:"fromView",converter:i.nullableNumberConverter})],s.prototype,"offset");a([i.attr({mode:"boolean"})],s.prototype,"alternate");a([i.attr({attribute:"dismiss-button-aria-label"})],s.prototype,"dismissButtonAriaLabel");a([i.attr({mode:"boolean"})],s.prototype,"arrow");a([i.attr({mode:"boolean"})],s.prototype,"open");a([i.observable],s.prototype,"anchor");a([i.observable],s.prototype,"_slottedAnchor");const x=({open:n,manual:e,layout:t})=>w.classNames("control",["open",!!n],["manual",!!e],["condensed",t==="condensed"]),k=n=>{const e=n.tagFor(u.Elevation),t=n.tagFor(f.Button),r=n.tagFor(b.Icon);return i.html`
+"use strict";const u=require("../bundled/definition4.cjs"),i=require("../bundled/vivid-element.cjs"),l=require("../bundled/floating-ui.dom.cjs"),v=require("../bundled/delegates-aria.cjs"),m=require("../bundled/localized.cjs"),b=require("../bundled/definition2.cjs"),f=require("../bundled/definition3.cjs"),g=require("../bundled/slotted.cjs"),d=require("../bundled/ref.cjs"),h=require("../bundled/when.cjs"),w=require("../bundled/class-names.cjs"),E=":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:fixed;overflow:visible;padding:0;border:none;border-radius:8px;margin:0;inline-size:max-content;min-inline-size:fit-content}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg, transparent)}.control{display:flex;flex-direction:column;padding:var(--popover-padding, 24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap, 24px)}.control:not(.open){display:none}.control.condensed{--popover-padding: 12px;--popover-gap: 12px}.control.manual{padding-block-start:40px}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}";var _=Object.defineProperty,a=(n,e,t,r)=>{for(var o=void 0,p=n.length-1,c;p>=0;p--)(c=n[p])&&(o=c(e,t,o)||o);return o&&_(e,t,o),o};class s extends m.Localized(v.DelegatesAria(i.VividElement)){constructor(){super(...arguments),this.placement="bottom",this.manual=!1,this.layout="default",this.offset=8,this.alternate=!1,this.dismissButtonAriaLabel=null,this.arrow=!1,this.open=!1,this.#e=null,this.#i=()=>{this._popoverEl.togglePopover()},this.#l=()=>{this.#n=this.updatePosition()},this.#s=e=>{const t=e.newState?e.newState==="open":this._popoverEl.matches(":popover-open");this.open!==t&&(this.open=t),this.$emit(t?"open":"close",void 0,{bubbles:!1})}}placementChanged(){this.#t()}arrowChanged(){this.#t()}openChanged(e,t){if(!this._popoverEl)return;const r=this._popoverEl.matches(":popover-open");t&&!r?this._popoverEl.showPopover():!t&&r&&this._popoverEl.hidePopover(),this.#t()}anchorChanged(){this.#o()}_slottedAnchorChanged(){this.#o()}#e;#o(){if(!this._popoverEl)return;const e=this.anchor||this._slottedAnchor?.[0]||null;this.#e!==e&&(this.#e&&this.#a(this.#e),this.#e=e,this.#e&&this._popoverEl&&(this.#p(this.#e),this.#t()))}#p(e){e.setAttribute("aria-haspopup","dialog"),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=this._popoverEl:e.addEventListener("click",this.#i)}#a(e){e.removeAttribute("aria-haspopup"),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=null:e.removeEventListener("click",this.#i)}#i;get#c(){let e=[l.inline(),l.flip(),l.shift(),l.hide()],t=this.offset??0;return this.arrow&&this._arrowEl&&(t=12,e=[...e,l.arrow({element:this._arrowEl,padding:10})]),t>0&&e.unshift(l.offset(t)),e}#r;#t(){this.#r?.(),this.open&&this.#e&&this._popoverEl&&(this.#r=l.autoUpdate(this.#e,this._popoverEl,this.#l))}#n;#l;async updatePosition(){if(!this.open||!this.#e||!this._popoverEl)return;const e=await l.computePosition(this.#e,this._popoverEl,{placement:this.placement,strategy:"fixed",middleware:this.#c});this.open&&(this.#d(e),this.arrow&&this._arrowEl&&this.#h(e))}#d(e){const{x:t,y:r}=e;Object.assign(this._popoverEl.style,{left:`${t}px`,top:`${r}px`,visibility:e.middlewareData.hide?.referenceHidden?"hidden":"visible"})}#h(e){if(!this._arrowEl)return;const{x:t,y:r}=e.middlewareData.arrow,o={left:"calc(100% - 4px)",right:"-4px",top:"calc(100% - 4px)",bottom:"-4px"},p=e.placement.split("-")[0];Object.assign(this._arrowEl.style,{left:t?`${t}px`:o[p],top:r?`${r}px`:o[p]})}#s;connectedCallback(){super.connectedCallback(),this.#o(),this._popoverEl&&(this._popoverEl.addEventListener("toggle",this.#s),this.open&&!this._popoverEl.matches(":popover-open")&&(this._popoverEl.showPopover(),this.#t()))}disconnectedCallback(){super.disconnectedCallback(),this.#r?.(),this.#e&&(this.#a(this.#e),this.#e=null),this._popoverEl&&this._popoverEl.removeEventListener("toggle",this.#s)}show(){return this.open=!0,this.#n??Promise.resolve()}hide(){this.open=!1}toggle(){this.open=!this.open}}a([i.attr({mode:"fromView"})],s.prototype,"placement");a([i.attr({mode:"boolean"})],s.prototype,"manual");a([i.attr({mode:"fromView"})],s.prototype,"layout");a([i.attr({attribute:"offset",mode:"fromView",converter:i.nullableNumberConverter})],s.prototype,"offset");a([i.attr({mode:"boolean"})],s.prototype,"alternate");a([i.attr({attribute:"dismiss-button-aria-label"})],s.prototype,"dismissButtonAriaLabel");a([i.attr({mode:"boolean"})],s.prototype,"arrow");a([i.attr({mode:"boolean"})],s.prototype,"open");a([i.observable],s.prototype,"anchor");a([i.observable],s.prototype,"_slottedAnchor");const x=({open:n,manual:e,layout:t})=>w.classNames("control",["open",!!n],["manual",!!e],["condensed",t==="condensed"]),k=n=>{const e=n.tagFor(u.Elevation),t=n.tagFor(f.Button),r=n.tagFor(b.Icon);return i.html`
 		<slot name="anchor" ${g.slotted("_slottedAnchor")}></slot>
 		<${e}>
 			<div class="base" 

package/popover/index.js

@@ -1,6 +1,6 @@
 import { E as m, e as u } from "../bundled/definition4.js";
 import { V as b, a as n, n as f, o as v, h as p, c as g, d as w } from "../bundled/vivid-element.js";
-import { i as E, f as _, b as x, h as k, c as y, o as $, d as A, e as P } from "../bundled/floating-ui.dom.js";
+import { i as E, f as _, a as x, h as k, b as y, o as $, c as A, d as P } from "../bundled/floating-ui.dom.js";
 import { D as C, d as L } from "../bundled/delegates-aria.js";
 import { L as T } from "../bundled/localized.js";
 import { I as B, i as D } from "../bundled/definition2.js";
@@ -70,15 +70,11 @@ class i extends T(C(b)) {
    * @internal
    */
   get #c() {
-    let o = [E(), _(), x(), k()];
-    /* v8 ignore next -- @preserve */
-    let e = this.offset ?? 0;
-    this.arrow && this._arrowEl && (e = 12, o = [
+    let o = [E(), _(), x(), k()], e = this.offset ?? 0;
+    return this.arrow && this._arrowEl && (e = 12, o = [
       ...o,
       y({ element: this._arrowEl, padding: 10 })
-    ]);
-    /* v8 ignore else -- @preserve */
-    return e > 0 && o.unshift($(e)), o;
+    ]), e > 0 && o.unshift($(e)), o;
   }
   /**
    * @internal
@@ -105,7 +101,6 @@ class i extends T(C(b)) {
    * @public
    */
   async updatePosition() {
-    /* v8 ignore if -- @preserve */
     if (!this.open || !this.#o || !this._popoverEl) return;
     const o = await P(
       this.#o,
@@ -116,7 +111,6 @@ class i extends T(C(b)) {
         middleware: this.#c
       }
     );
-    /* v8 ignore if -- @preserve */
     this.open && (this.#d(o), this.arrow && this._arrowEl && this.#h(o));
   }
   /**
@@ -134,7 +128,6 @@ class i extends T(C(b)) {
    * @internal
    */
   #h(o) {
-    /* v8 ignore if -- @preserve */
     if (!this._arrowEl) return;
     const { x: e, y: s } = o.middlewareData.arrow, t = {
       left: "calc(100% - 4px)",
@@ -149,14 +142,10 @@ class i extends T(C(b)) {
   }
   #r;
   connectedCallback() {
-    super.connectedCallback(), this.#t();
-    /* v8 ignore else -- @preserve */
-    this._popoverEl && (this._popoverEl.addEventListener("toggle", this.#r), this.open && !this._popoverEl.matches(":popover-open") && (this._popoverEl.showPopover(), this.#e()));
+    super.connectedCallback(), this.#t(), this._popoverEl && (this._popoverEl.addEventListener("toggle", this.#r), this.open && !this._popoverEl.matches(":popover-open") && (this._popoverEl.showPopover(), this.#e()));
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.#i?.(), this.#o && (this.#a(this.#o), this.#o = null);
-    /* v8 ignore else -- @preserve */
-    this._popoverEl && this._popoverEl.removeEventListener("toggle", this.#r);
+    super.disconnectedCallback(), this.#i?.(), this.#o && (this.#a(this.#o), this.#o = null), this._popoverEl && this._popoverEl.removeEventListener("toggle", this.#r);
   }
   // --- Methods ---
   show() {

package/popup/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-require('../unbundled/definition.cjs');
+require('../unbundled/definition2.cjs');
 require('../unbundled/definition6.cjs');
 require('../unbundled/vivid-element.cjs');
 const popup_definition = require('../unbundled/definition5.cjs');

package/popup/definition.js

@@ -1,4 +1,4 @@
-import '../unbundled/definition.js';
+import '../unbundled/definition2.js';
 import '../unbundled/definition6.js';
 import '../unbundled/vivid-element.js';
 export { p as popupDefinition, r as registerPopup } from '../unbundled/definition5.js';

package/radio/definition.cjs

@@ -9,7 +9,7 @@ const formAssociated = require('../unbundled/form-associated.cjs');
 const withErrorText = require('../unbundled/with-error-text.cjs');
 const formElement = require('../unbundled/form-element.cjs');
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{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%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media(hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media(hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{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%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -85,7 +85,6 @@ class Radio extends withErrorText.WithErrorText(
    * @internal
    */
   readOnlyChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
     }
@@ -95,7 +94,6 @@ class Radio extends withErrorText.WithErrorText(
    */
   defaultCheckedChanged() {
     if (this.$fastController.isConnected && !this.dirtyChecked) {
-      /* v8 ignore else -- @preserve */
       if (!this.isInsideRadioGroup()) {
         this.checked = this.defaultChecked;
         this.dirtyChecked = false;
@@ -117,13 +115,11 @@ class Radio extends withErrorText.WithErrorText(
     super.connectedCallback();
     fastElement.Updates.enqueue(this.validate);
     if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
-      /* v8 ignore else -- @preserve */
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
       }
     }
     if (this.defaultChecked) {
-      /* v8 ignore else -- @preserve */
       if (!this.dirtyChecked) {
         if (!this.isInsideRadioGroup()) {
           this.checked = this.defaultChecked;

package/radio/definition.js

@@ -5,7 +5,7 @@ import { C as CheckableFormAssociated } from '../unbundled/form-associated.js';
 import { W as WithErrorText } from '../unbundled/with-error-text.js';
 import { F as FormElement } from '../unbundled/form-element.js';
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{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%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media(hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media(hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{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%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -81,7 +81,6 @@ class Radio extends WithErrorText(
    * @internal
    */
   readOnlyChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
     }
@@ -91,7 +90,6 @@ class Radio extends WithErrorText(
    */
   defaultCheckedChanged() {
     if (this.$fastController.isConnected && !this.dirtyChecked) {
-      /* v8 ignore else -- @preserve */
       if (!this.isInsideRadioGroup()) {
         this.checked = this.defaultChecked;
         this.dirtyChecked = false;
@@ -113,13 +111,11 @@ class Radio extends WithErrorText(
     super.connectedCallback();
     Updates.enqueue(this.validate);
     if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
-      /* v8 ignore else -- @preserve */
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
       }
     }
     if (this.defaultChecked) {
-      /* v8 ignore else -- @preserve */
       if (!this.dirtyChecked) {
         if (!this.isInsideRadioGroup()) {
           this.checked = this.defaultChecked;

package/radio-group/definition.js

@@ -1,9 +1,9 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { VwcRadioElement as Radio, radioDefinition } from '../radio/definition.js';
 import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
-import { attr, observable, when, slotted, html, elements } from '@microsoft/fast-element';
+import { attr, observable, when, html, slotted, elements } from '@microsoft/fast-element';
 import { Orientation, keyArrowUp, keyArrowDown, keyEnter } from '@microsoft/fast-web-utilities';
-import { k as keyArrowRight, a as keyArrowLeft } from '../unbundled/key-codes.js';
+import { a as keyArrowRight, k as keyArrowLeft } from '../unbundled/key-codes.js';
 import { d as delegateAria } from '../unbundled/delegates-aria.js';
 
 const styles = ".base{display:flex;flex-direction:column;gap:8px;--_low-ink-color: var(--vvd-color-neutral-600)}.positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}fieldset{display:block;padding:0;border:none;margin:0}legend{padding:0;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px}";

package/range-slider/definition.cjs

@@ -12,7 +12,7 @@ const slider_template = require('../unbundled/slider.template.cjs');
 const localized = require('../unbundled/localized.cjs');
 const formElement = require('../unbundled/form-element.cjs');
 
-const styles = ":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}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;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));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;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{position:absolute;block-size:100%;inline-size:6px;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{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.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:translate(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{position:absolute;display:block;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 0s}.thumb-container:after{position:absolute;display:block;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)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover: hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
+const styles = ":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}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;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));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;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{position:absolute;block-size:100%;inline-size:6px;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{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.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:translate(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{position:absolute;display:block;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 0s}.thumb-container:after{position:absolute;display:block;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)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media(hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/range-slider/definition.js

@@ -2,13 +2,13 @@ import { P as Popup, a as PlacementStrategy, p as popupDefinition } from '../unb
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { observable, attr, nullableNumberConverter, ref, when, html } from '@microsoft/fast-element';
 import { Orientation, keyHome, keyEnd, keyArrowUp, keyArrowDown, limit, classNames } from '@microsoft/fast-web-utilities';
-import { a as keyArrowLeft, k as keyArrowRight } from '../unbundled/key-codes.js';
+import { k as keyArrowLeft, a as keyArrowRight } from '../unbundled/key-codes.js';
 import { F as FormAssociated } from '../unbundled/form-associated.js';
 import { i as inverseLerp, l as lerp, r as roundToStepValue, d as defaultToOneConverter, g as getMarkersTemplate } from '../unbundled/slider.template.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { F as FormElement } from '../unbundled/form-element.js';
 
-const styles = ":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}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;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));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;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{position:absolute;block-size:100%;inline-size:6px;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{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.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:translate(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{position:absolute;display:block;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 0s}.thumb-container:after{position:absolute;display:block;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)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover: hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
+const styles = ":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}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;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));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;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{position:absolute;block-size:100%;inline-size:6px;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{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.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:translate(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{position:absolute;display:block;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 0s}.thumb-container:after{position:absolute;display:block;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)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media(hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/range-slider/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const h=require("../bundled/definition9.cjs"),i=require("../bundled/vivid-element.cjs"),c=require("../bundled/key-codes.cjs"),_=require("../bundled/form-associated.cjs"),u=require("../bundled/slider.template.cjs"),f=require("../bundled/localized.cjs"),y=require("../bundled/form-element.cjs"),d=require("../bundled/aria.cjs"),T=require("../bundled/numbers.cjs"),m=require("../bundled/ref.cjs"),b=require("../bundled/when.cjs"),k=require("../bundled/class-names.cjs"),z=':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}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;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));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;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{position:absolute;block-size:100%;inline-size:6px;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{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.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:translate(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{position:absolute;display:block;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 0s}.thumb-container:after{position:absolute;display:block;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)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover: hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}';var $=Object.defineProperty,a=(l,e,t,n)=>{for(var s=void 0,o=l.length-1,v;o>=0;o--)(v=l[o])&&(s=v(e,t,s)||s);return s&&$(e,t,s),s};const p={Increment:1,Decrement:-1};class r extends f.Localized(y.FormElement(_.FormAssociated(i.VividElement))){constructor(){super(...arguments),this.#r=!1,this.start="",this.end="",this.min=0,this.max=10,this.step=1,this.orientation=d.Orientation.horizontal,this.ariaStartLabel=null,this.ariaEndLabel=null,this.markers=!1,this.pin=!1,this.valueTextFormatter=e=>parseFloat(e).toLocaleString(this.locale.lang),this.proxy=document.createElement("input"),this._trackEl=null,this._startThumbEl=null,this._endThumbEl=null,this._draggingThumb=!1,this._visiblyFocusedThumb=null,this._hoveredThumb=null,this._startThumbCss="",this._endThumbCss="",this._selectedRangeCss="",this.#c=!1,this.#d=e=>{this.#c||(this._visiblyFocusedThumb=this.#h(e))},this.#m=()=>{this._visiblyFocusedThumb=null},this.#b=e=>{this._hoveredThumb=this.#h(e)},this.#v=()=>{this._hoveredThumb=null},this.#a=e=>{if(this.disabled||e.defaultPrevented)return;let t=e.target;t===this._endThumbEl&&this.startAsNumber===this.max&&this.endAsNumber===this.max&&(t=this._startThumbEl),this.#y(t),this._draggingThumb=this.#k(t),this.#T()},this.#p=e=>{const t=this.#h(e);if(this._visiblyFocusedThumb=t,e.key===c.keyHome)e.preventDefault(),this.#e({[t]:`${this.#s[t].min}`});else if(e.key===c.keyEnd)e.preventDefault(),this.#e({[t]:`${this.#s[t].max}`});else{if(e.shiftKey)return;switch(e.key){case c.keyArrowRight:case c.keyArrowDown:e.preventDefault(),this.#g(t,p.Increment);break;case c.keyArrowLeft:case c.keyArrowUp:e.preventDefault(),this.#g(t,p.Decrement);break}}},this.#n=e=>{if(this.disabled||e.defaultPrevented||!this._draggingThumb)return;const t="TouchEvent"in window&&e instanceof TouchEvent?e.touches[0]:e,n=this.#f(t);this.#e({[this._draggingThumb]:`${this.#u(this._draggingThumb,n)}`})},this.#i=()=>{this._draggingThumb=!1,this.#z()}}#r;startChanged(){this.currentStart=this.start,this.#r||(this.dirtyValue=!0,this.#o()),this.$fastController.isConnected&&this.#l()}initialStartChanged(e,t){t&&!this.dirtyValue&&(this.start=t,this.dirtyValue=!1)}currentStartChanged(){this.start=this.currentStart}get startAsNumber(){return parseFloat(this.start)}set startAsNumber(e){this.start=e.toString()}endChanged(){this.currentEnd=this.end,this.#r||(this.dirtyValue=!0,this.#o()),this.$fastController.isConnected&&this.#l()}initialEndChanged(e,t){t&&!this.dirtyValue&&(this.end=t,this.dirtyValue=!1)}currentEndChanged(){this.end=this.currentEnd}get endAsNumber(){return parseFloat(this.end)}set endAsNumber(e){this.end=e.toString()}#e({start:e,end:t},n=!0){e===this.start&&(e=void 0),t===this.end&&(t=void 0),!(e===void 0&&t===void 0)&&(this.#r=!0,e!==void 0&&(this.start=e),t!==void 0&&(this.end=t),this.#r=!1,n&&(e!==void 0&&this.$emit("input:start"),t!==void 0&&this.$emit("input:end"),this.$emit("input"),this.$emit("change"),this.dirtyValue=!0),this.#o())}#g(e,t){this.#e({[e]:this.#u(e,Number(this[e])+t*this.step).toString()})}orientationChanged(){this.$fastController.isConnected&&this.#l()}nameChanged(e,t){super.nameChanged(e,t),this.#o()}#o(){if(!this.name)this.setFormValue(null);else{const e=new FormData;e.append(this.name,this.start),e.append(this.name,this.end),this.setFormValue(e)}}formResetCallback(){this.#e({start:this.initialStart??this.min.toString(),end:this.initialEnd??this.max.toString()}),super.formResetCallback()}get#t(){return{start:this._startThumbEl,end:this._endThumbEl}}get#s(){return{start:{min:this.min,max:this.endAsNumber},end:{min:this.startAsNumber,max:this.max}}}#k(e){return e===this._startThumbEl?"start":"end"}#h(e){return this.#k(e.target)}#l(){const e=this.#_(this.startAsNumber),t=this.#_(this.endAsNumber),[n,s]=this.orientation===d.Orientation.horizontal?["right","width"]:["bottom","height"],o=`transition: ${this._draggingThumb?"none":"all 0.2s ease"};`;this._startThumbCss=`${n}: ${e}%; ${o}`,this._endThumbCss=`${n}: ${t}%; ${o}`,this._selectedRangeCss=`${n}: ${t}%; ${s}: ${e-t}%; ${o}`}#_(e){return(1-u.inverseLerp(this.min,this.max,e))*100}#f(e){const t=this._trackEl.getBoundingClientRect(),[n,s,o]=this.orientation===d.Orientation.horizontal?[this._trackEl.clientLeft,this._trackEl.clientWidth,e.pageX-document.documentElement.scrollLeft-this.getBoundingClientRect().left]:[t.top,t.bottom,e.pageY-document.documentElement.scrollTop];return u.lerp(this.min,this.max,u.inverseLerp(n,s,o))}#u(e,t){return T.limit(this.#s[e].min,this.#s[e].max,u.roundToStepValue(t-this.min,this.step)+this.min)}#c;#y(e){this.#c=!0,e.focus(),this.#c=!1}_isThumbPopupOpen(e){return this._visiblyFocusedThumb===e||this._hoveredThumb===e||this._draggingThumb===e}connectedCallback(){super.connectedCallback(),this.#e({start:this.start||this.initialStart||this.min.toString(),end:this.end||this.initialEnd||this.max.toString()},!1),this.#$(),this.#l()}disconnectedCallback(){super.disconnectedCallback(),this.#E(),this.#z()}#$(){for(const e of["start","end"])this.#t[e].addEventListener("keydown",this.#p),this.#t[e].addEventListener("mousedown",this.#a,{passive:!0}),this.#t[e].addEventListener("touchstart",this.#a,{passive:!0}),this.#t[e].addEventListener("mouseover",this.#b,{passive:!0}),this.#t[e].addEventListener("mouseout",this.#v,{passive:!0}),this.#t[e].addEventListener("focus",this.#d),this.#t[e].addEventListener("blur",this.#m)}#E(){for(const e of["start","end"])this.#t[e].removeEventListener("keydown",this.#p),this.#t[e].removeEventListener("mousedown",this.#a),this.#t[e].removeEventListener("touchstart",this.#a),this.#t[e].removeEventListener("mouseover",this.#b),this.#t[e].removeEventListener("mouseout",this.#v),this.#t[e].removeEventListener("focus",this.#d),this.#t[e].removeEventListener("blur",this.#m)}_onMouseDown(e){if(this.disabled||this._draggingThumb)return;const t=this.#f(e),n=Math.abs(t-Number(this.start)),s=Math.abs(t-Number(this.end)),o=n<s||n===s&&t<Number(this.start)?"start":"end";this.#e({[o]:`${this.#u(o,t)}`}),this._draggingThumb=o,this.#y(this.#t[o]),this.#T()}#d;#m;#b;#v;#a;#p;#T(){window.addEventListener("mousemove",this.#n,{passive:!0}),window.addEventListener("touchmove",this.#n,{passive:!0}),window.addEventListener("mouseup",this.#i),window.addEventListener("touchend",this.#i),window.document.addEventListener("mouseleave",this.#i)}#z(){window.removeEventListener("mouseup",this.#i),window.document.removeEventListener("mouseleave",this.#i),window.removeEventListener("mousemove",this.#n),window.removeEventListener("touchmove",this.#n),window.removeEventListener("touchend",this.#i)}#n;#i}a([i.observable],r.prototype,"start");a([i.attr({mode:"fromView",attribute:"start"})],r.prototype,"initialStart");a([i.attr({attribute:"current-start"})],r.prototype,"currentStart");a([i.observable],r.prototype,"end");a([i.attr({mode:"fromView",attribute:"end"})],r.prototype,"initialEnd");a([i.attr({attribute:"current-end"})],r.prototype,"currentEnd");a([i.attr({converter:i.nullableNumberConverter})],r.prototype,"min");a([i.attr({converter:i.nullableNumberConverter})],r.prototype,"max");a([i.attr({converter:u.defaultToOneConverter})],r.prototype,"step");a([i.attr],r.prototype,"orientation");a([i.attr({attribute:"aria-start-label"})],r.prototype,"ariaStartLabel");a([i.attr({attribute:"aria-end-label"})],r.prototype,"ariaEndLabel");a([i.attr({mode:"boolean"})],r.prototype,"markers");a([i.attr],r.prototype,"connotation");a([i.attr({mode:"boolean"})],r.prototype,"pin");a([i.observable],r.prototype,"valueTextFormatter");a([i.observable],r.prototype,"_draggingThumb");a([i.observable],r.prototype,"_visiblyFocusedThumb");a([i.observable],r.prototype,"_hoveredThumb");a([i.observable],r.prototype,"_startThumbCss");a([i.observable],r.prototype,"_endThumbCss");a([i.observable],r.prototype,"_selectedRangeCss");const E=({disabled:l,connotation:e})=>k.classNames("control",["disabled",!!l],[`connotation-${e}`,!!e]),g=l=>({_visiblyFocusedThumb:e})=>k.classNames("thumb-container",["focus-visible",e===l]),w=l=>{const e=l.tagFor(h.Popup);return i.html` <template
+"use strict";const h=require("../bundled/definition9.cjs"),i=require("../bundled/vivid-element.cjs"),c=require("../bundled/key-codes.cjs"),_=require("../bundled/form-associated.cjs"),u=require("../bundled/slider.template.cjs"),f=require("../bundled/localized.cjs"),y=require("../bundled/form-element.cjs"),d=require("../bundled/aria.cjs"),T=require("../bundled/numbers.cjs"),m=require("../bundled/ref.cjs"),b=require("../bundled/when.cjs"),k=require("../bundled/class-names.cjs"),z=':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}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;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));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;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{position:absolute;block-size:100%;inline-size:6px;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{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.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:translate(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{position:absolute;display:block;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 0s}.thumb-container:after{position:absolute;display:block;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)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media(hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}';var $=Object.defineProperty,a=(l,e,t,n)=>{for(var s=void 0,o=l.length-1,v;o>=0;o--)(v=l[o])&&(s=v(e,t,s)||s);return s&&$(e,t,s),s};const p={Increment:1,Decrement:-1};class r extends f.Localized(y.FormElement(_.FormAssociated(i.VividElement))){constructor(){super(...arguments),this.#r=!1,this.start="",this.end="",this.min=0,this.max=10,this.step=1,this.orientation=d.Orientation.horizontal,this.ariaStartLabel=null,this.ariaEndLabel=null,this.markers=!1,this.pin=!1,this.valueTextFormatter=e=>parseFloat(e).toLocaleString(this.locale.lang),this.proxy=document.createElement("input"),this._trackEl=null,this._startThumbEl=null,this._endThumbEl=null,this._draggingThumb=!1,this._visiblyFocusedThumb=null,this._hoveredThumb=null,this._startThumbCss="",this._endThumbCss="",this._selectedRangeCss="",this.#c=!1,this.#d=e=>{this.#c||(this._visiblyFocusedThumb=this.#h(e))},this.#m=()=>{this._visiblyFocusedThumb=null},this.#b=e=>{this._hoveredThumb=this.#h(e)},this.#v=()=>{this._hoveredThumb=null},this.#a=e=>{if(this.disabled||e.defaultPrevented)return;let t=e.target;t===this._endThumbEl&&this.startAsNumber===this.max&&this.endAsNumber===this.max&&(t=this._startThumbEl),this.#y(t),this._draggingThumb=this.#k(t),this.#T()},this.#p=e=>{const t=this.#h(e);if(this._visiblyFocusedThumb=t,e.key===c.keyHome)e.preventDefault(),this.#e({[t]:`${this.#s[t].min}`});else if(e.key===c.keyEnd)e.preventDefault(),this.#e({[t]:`${this.#s[t].max}`});else{if(e.shiftKey)return;switch(e.key){case c.keyArrowRight:case c.keyArrowDown:e.preventDefault(),this.#g(t,p.Increment);break;case c.keyArrowLeft:case c.keyArrowUp:e.preventDefault(),this.#g(t,p.Decrement);break}}},this.#n=e=>{if(this.disabled||e.defaultPrevented||!this._draggingThumb)return;const t="TouchEvent"in window&&e instanceof TouchEvent?e.touches[0]:e,n=this.#f(t);this.#e({[this._draggingThumb]:`${this.#u(this._draggingThumb,n)}`})},this.#i=()=>{this._draggingThumb=!1,this.#z()}}#r;startChanged(){this.currentStart=this.start,this.#r||(this.dirtyValue=!0,this.#o()),this.$fastController.isConnected&&this.#l()}initialStartChanged(e,t){t&&!this.dirtyValue&&(this.start=t,this.dirtyValue=!1)}currentStartChanged(){this.start=this.currentStart}get startAsNumber(){return parseFloat(this.start)}set startAsNumber(e){this.start=e.toString()}endChanged(){this.currentEnd=this.end,this.#r||(this.dirtyValue=!0,this.#o()),this.$fastController.isConnected&&this.#l()}initialEndChanged(e,t){t&&!this.dirtyValue&&(this.end=t,this.dirtyValue=!1)}currentEndChanged(){this.end=this.currentEnd}get endAsNumber(){return parseFloat(this.end)}set endAsNumber(e){this.end=e.toString()}#e({start:e,end:t},n=!0){e===this.start&&(e=void 0),t===this.end&&(t=void 0),!(e===void 0&&t===void 0)&&(this.#r=!0,e!==void 0&&(this.start=e),t!==void 0&&(this.end=t),this.#r=!1,n&&(e!==void 0&&this.$emit("input:start"),t!==void 0&&this.$emit("input:end"),this.$emit("input"),this.$emit("change"),this.dirtyValue=!0),this.#o())}#g(e,t){this.#e({[e]:this.#u(e,Number(this[e])+t*this.step).toString()})}orientationChanged(){this.$fastController.isConnected&&this.#l()}nameChanged(e,t){super.nameChanged(e,t),this.#o()}#o(){if(!this.name)this.setFormValue(null);else{const e=new FormData;e.append(this.name,this.start),e.append(this.name,this.end),this.setFormValue(e)}}formResetCallback(){this.#e({start:this.initialStart??this.min.toString(),end:this.initialEnd??this.max.toString()}),super.formResetCallback()}get#t(){return{start:this._startThumbEl,end:this._endThumbEl}}get#s(){return{start:{min:this.min,max:this.endAsNumber},end:{min:this.startAsNumber,max:this.max}}}#k(e){return e===this._startThumbEl?"start":"end"}#h(e){return this.#k(e.target)}#l(){const e=this.#_(this.startAsNumber),t=this.#_(this.endAsNumber),[n,s]=this.orientation===d.Orientation.horizontal?["right","width"]:["bottom","height"],o=`transition: ${this._draggingThumb?"none":"all 0.2s ease"};`;this._startThumbCss=`${n}: ${e}%; ${o}`,this._endThumbCss=`${n}: ${t}%; ${o}`,this._selectedRangeCss=`${n}: ${t}%; ${s}: ${e-t}%; ${o}`}#_(e){return(1-u.inverseLerp(this.min,this.max,e))*100}#f(e){const t=this._trackEl.getBoundingClientRect(),[n,s,o]=this.orientation===d.Orientation.horizontal?[this._trackEl.clientLeft,this._trackEl.clientWidth,e.pageX-document.documentElement.scrollLeft-this.getBoundingClientRect().left]:[t.top,t.bottom,e.pageY-document.documentElement.scrollTop];return u.lerp(this.min,this.max,u.inverseLerp(n,s,o))}#u(e,t){return T.limit(this.#s[e].min,this.#s[e].max,u.roundToStepValue(t-this.min,this.step)+this.min)}#c;#y(e){this.#c=!0,e.focus(),this.#c=!1}_isThumbPopupOpen(e){return this._visiblyFocusedThumb===e||this._hoveredThumb===e||this._draggingThumb===e}connectedCallback(){super.connectedCallback(),this.#e({start:this.start||this.initialStart||this.min.toString(),end:this.end||this.initialEnd||this.max.toString()},!1),this.#$(),this.#l()}disconnectedCallback(){super.disconnectedCallback(),this.#E(),this.#z()}#$(){for(const e of["start","end"])this.#t[e].addEventListener("keydown",this.#p),this.#t[e].addEventListener("mousedown",this.#a,{passive:!0}),this.#t[e].addEventListener("touchstart",this.#a,{passive:!0}),this.#t[e].addEventListener("mouseover",this.#b,{passive:!0}),this.#t[e].addEventListener("mouseout",this.#v,{passive:!0}),this.#t[e].addEventListener("focus",this.#d),this.#t[e].addEventListener("blur",this.#m)}#E(){for(const e of["start","end"])this.#t[e].removeEventListener("keydown",this.#p),this.#t[e].removeEventListener("mousedown",this.#a),this.#t[e].removeEventListener("touchstart",this.#a),this.#t[e].removeEventListener("mouseover",this.#b),this.#t[e].removeEventListener("mouseout",this.#v),this.#t[e].removeEventListener("focus",this.#d),this.#t[e].removeEventListener("blur",this.#m)}_onMouseDown(e){if(this.disabled||this._draggingThumb)return;const t=this.#f(e),n=Math.abs(t-Number(this.start)),s=Math.abs(t-Number(this.end)),o=n<s||n===s&&t<Number(this.start)?"start":"end";this.#e({[o]:`${this.#u(o,t)}`}),this._draggingThumb=o,this.#y(this.#t[o]),this.#T()}#d;#m;#b;#v;#a;#p;#T(){window.addEventListener("mousemove",this.#n,{passive:!0}),window.addEventListener("touchmove",this.#n,{passive:!0}),window.addEventListener("mouseup",this.#i),window.addEventListener("touchend",this.#i),window.document.addEventListener("mouseleave",this.#i)}#z(){window.removeEventListener("mouseup",this.#i),window.document.removeEventListener("mouseleave",this.#i),window.removeEventListener("mousemove",this.#n),window.removeEventListener("touchmove",this.#n),window.removeEventListener("touchend",this.#i)}#n;#i}a([i.observable],r.prototype,"start");a([i.attr({mode:"fromView",attribute:"start"})],r.prototype,"initialStart");a([i.attr({attribute:"current-start"})],r.prototype,"currentStart");a([i.observable],r.prototype,"end");a([i.attr({mode:"fromView",attribute:"end"})],r.prototype,"initialEnd");a([i.attr({attribute:"current-end"})],r.prototype,"currentEnd");a([i.attr({converter:i.nullableNumberConverter})],r.prototype,"min");a([i.attr({converter:i.nullableNumberConverter})],r.prototype,"max");a([i.attr({converter:u.defaultToOneConverter})],r.prototype,"step");a([i.attr],r.prototype,"orientation");a([i.attr({attribute:"aria-start-label"})],r.prototype,"ariaStartLabel");a([i.attr({attribute:"aria-end-label"})],r.prototype,"ariaEndLabel");a([i.attr({mode:"boolean"})],r.prototype,"markers");a([i.attr],r.prototype,"connotation");a([i.attr({mode:"boolean"})],r.prototype,"pin");a([i.observable],r.prototype,"valueTextFormatter");a([i.observable],r.prototype,"_draggingThumb");a([i.observable],r.prototype,"_visiblyFocusedThumb");a([i.observable],r.prototype,"_hoveredThumb");a([i.observable],r.prototype,"_startThumbCss");a([i.observable],r.prototype,"_endThumbCss");a([i.observable],r.prototype,"_selectedRangeCss");const E=({disabled:l,connotation:e})=>k.classNames("control",["disabled",!!l],[`connotation-${e}`,!!e]),g=l=>({_visiblyFocusedThumb:e})=>k.classNames("thumb-container",["focus-visible",e===l]),w=l=>{const e=l.tagFor(h.Popup);return i.html` <template
 		@mousedown="${(t,n)=>t._onMouseDown(n.event)}"
 	>
 		<div class="${E} ${t=>t.orientation}">

package/range-slider/index.js

@@ -10,7 +10,7 @@ import { l as M } from "../bundled/numbers.js";
 import { r as m } from "../bundled/ref.js";
 import { w as b } from "../bundled/when.js";
 import { c as _ } from "../bundled/class-names.js";
-const B = ':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}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;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));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;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{position:absolute;block-size:100%;inline-size:6px;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{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.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:translate(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{position:absolute;display:block;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 0s}.thumb-container:after{position:absolute;display:block;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)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover: hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}';
+const B = ':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}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;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));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;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{position:absolute;block-size:100%;inline-size:6px;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{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.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:translate(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{position:absolute;display:block;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 0s}.thumb-container:after{position:absolute;display:block;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)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media(hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}';
 var I = Object.defineProperty, r = (l, e, t, a) => {
   for (var s = void 0, o = l.length - 1, p; o >= 0; o--)
     (p = l[o]) && (s = p(e, t, s) || s);