@vonage/vivid 4.3.0 → 4.5.0

package/shared/definition4.js

@@ -1,17 +1,17 @@
-import { a as attr, F as FoundationElement, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
+import { F as FoundationElement, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
 import { a as buttonRegistries } from './definition11.js';
 import { E as Elevation, e as elevationRegistries } from './definition62.js';
 import { a as iconRegistries } from './definition27.js';
 import { C as Connotation } from './enums.js';
 import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import './index2.js';
+import { h as handleEscapeKeyAndStopPropogation } from './index2.js';
 import { L as Localized } from './localized.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { B as Button$1 } from './button.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
+const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -39,7 +39,9 @@ class Alert extends FoundationElement {
     this.timeoutms = 0;
     this.open = false;
     this.#closeOnEscape = (e) => {
-      if (this.removable && e.key === "Escape") this.open = false;
+      if (this.open && this.removable && handleEscapeKeyAndStopPropogation(e)) {
+        this.open = false;
+      }
     };
     this.#onTransitionEnd = () => {
       if (!this.open) {

package/shared/definition41.cjs

@@ -5,7 +5,7 @@ const radio = require('./radio.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.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(--_connotation-color-intermediate)}.base:where(.hover,: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(--_connotation-color-fierce)}.base:where(.checked,: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:where(.checked,:checked):where(.hover,: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:where(.disabled,: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:where(.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)}@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-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}";
+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(--_connotation-color-intermediate)}.base:where(.hover,: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(--_connotation-color-fierce)}.base:where(.checked,: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:where(.checked,:checked):where(.hover,: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:where(.disabled,: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:where(.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-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}";
 
 const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.classNames(
   "base",

package/shared/definition41.js

@@ -3,7 +3,7 @@ import { R as Radio } from './radio.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.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(--_connotation-color-intermediate)}.base:where(.hover,: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(--_connotation-color-fierce)}.base:where(.checked,: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:where(.checked,:checked):where(.hover,: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:where(.disabled,: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:where(.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)}@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-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}";
+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(--_connotation-color-intermediate)}.base:where(.hover,: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(--_connotation-color-fierce)}.base:where(.checked,: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:where(.checked,:checked):where(.hover,: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:where(.disabled,: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:where(.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-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}";
 
 const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames(
   "base",

package/shared/definition42.cjs

@@ -1,19 +1,19 @@
 'use strict';
 
 const index = require('./index.cjs');
+const definition = require('./definition63.cjs');
 const keyCodes = require('./key-codes2.cjs');
-require('./affix.cjs');
-const index$1 = require('./index2.cjs');
-const localized = require('./localized.cjs');
 const formAssociated = require('./form-associated.cjs');
 const slider_template = require('./slider.template.cjs');
-const applyMixins = require('./apply-mixins.cjs');
 const aria = require('./aria.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const localized = require('./localized.cjs');
+const formElements = require('./form-elements.cjs');
 const ref = require('./ref.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.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{--_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.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 .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-color:transparent;touch-action:none}:focus-visible .thumb-container,.thumb-container:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - 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))}.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)}.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:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - 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))}.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)}.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}";
 
 class _RangeSlider extends index.FoundationElement {
 }
@@ -61,7 +61,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _isInternalValueUpdate, _RangeSlider_instances, updateValues_fn, applyStep_fn, updateFormValue_fn, thumbs_get, thumbConstraints_get, _draggingThumb, updateThumbPositions_fn, thumbTrackEndOffset_fn, calculateValueFromMouseEvent_fn, roundToNearestStep_fn, registerThumbListeners_fn, unregisterThumbListeners_fn, _onThumbMousedown, _onThumbKeydown, registerDragHandlers_fn, unregisterDragListeners_fn, _onDragMove, _onDragEnd;
+var _isInternalValueUpdate, _RangeSlider_instances, updateValues_fn, applyStep_fn, updateFormValue_fn, thumbs_get, thumbConstraints_get, getThumbId_fn, getThumbIdFromEvent_fn, updateThumbPositions_fn, thumbTrackEndOffset_fn, calculateValueFromMouseEvent_fn, roundToNearestStep_fn, _isNonVisibleFocus, focusThumbNonVisibly_fn, registerThumbListeners_fn, unregisterThumbListeners_fn, _onThumbFocus, _onThumbBlur, _onMouseOver, _onMouseOut, _onThumbMousedown, _onThumbKeydown, registerDragHandlers_fn, unregisterDragListeners_fn, _onDragMove, _onDragEnd;
 const Direction = {
   Increment: 1,
   Decrement: -1
@@ -81,6 +81,7 @@ let RangeSlider = class extends FormAssociatedRangeSlider {
     this.ariaStartLabel = null;
     this.ariaEndLabel = null;
     this.markers = false;
+    this.pin = false;
     this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
     // --- Thumbs ---
     /**
@@ -95,10 +96,27 @@ let RangeSlider = class extends FormAssociatedRangeSlider {
      * @internal
      */
     this._endThumbEl = null;
-    __privateAdd(this, _draggingThumb, false);
+    this._draggingThumb = false;
+    this._visiblyFocusedThumb = null;
+    this._hoveredThumb = null;
     this._startThumbCss = "";
     this._endThumbCss = "";
     this._selectedRangeCss = "";
+    __privateAdd(this, _isNonVisibleFocus, false);
+    __privateAdd(this, _onThumbFocus, (e) => {
+      if (!__privateGet(this, _isNonVisibleFocus)) {
+        this._visiblyFocusedThumb = __privateMethod(this, _RangeSlider_instances, getThumbIdFromEvent_fn).call(this, e);
+      }
+    });
+    __privateAdd(this, _onThumbBlur, () => {
+      this._visiblyFocusedThumb = null;
+    });
+    __privateAdd(this, _onMouseOver, (e) => {
+      this._hoveredThumb = __privateMethod(this, _RangeSlider_instances, getThumbIdFromEvent_fn).call(this, e);
+    });
+    __privateAdd(this, _onMouseOut, () => {
+      this._hoveredThumb = null;
+    });
     __privateAdd(this, _onThumbMousedown, (event) => {
       if (this.disabled || event.defaultPrevented) {
         return;
@@ -107,12 +125,13 @@ let RangeSlider = class extends FormAssociatedRangeSlider {
       if (target === this._endThumbEl && this.startAsNumber === this.max && this.endAsNumber === this.max) {
         target = this._startThumbEl;
       }
-      target.focus();
-      __privateSet(this, _draggingThumb, target === this._startThumbEl ? "start" : "end");
+      __privateMethod(this, _RangeSlider_instances, focusThumbNonVisibly_fn).call(this, target);
+      this._draggingThumb = __privateMethod(this, _RangeSlider_instances, getThumbId_fn).call(this, target);
       __privateMethod(this, _RangeSlider_instances, registerDragHandlers_fn).call(this);
     });
     __privateAdd(this, _onThumbKeydown, (e) => {
-      const thumb = e.target === this._startThumbEl ? "start" : "end";
+      const thumb = __privateMethod(this, _RangeSlider_instances, getThumbIdFromEvent_fn).call(this, e);
+      this._visiblyFocusedThumb = thumb;
       if (e.key === keyCodes.keyHome) {
         e.preventDefault();
         __privateMethod(this, _RangeSlider_instances, updateValues_fn).call(this, { [thumb]: `${__privateGet(this, _RangeSlider_instances, thumbConstraints_get)[thumb].min}` });
@@ -135,17 +154,17 @@ let RangeSlider = class extends FormAssociatedRangeSlider {
       }
     });
     __privateAdd(this, _onDragMove, (e) => {
-      if (this.disabled || e.defaultPrevented || !__privateGet(this, _draggingThumb)) {
+      if (this.disabled || e.defaultPrevented || !this._draggingThumb) {
         return;
       }
       const sourceEvent = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e;
       const value = __privateMethod(this, _RangeSlider_instances, calculateValueFromMouseEvent_fn).call(this, sourceEvent);
       __privateMethod(this, _RangeSlider_instances, updateValues_fn).call(this, {
-        [__privateGet(this, _draggingThumb)]: `${__privateMethod(this, _RangeSlider_instances, roundToNearestStep_fn).call(this, __privateGet(this, _draggingThumb), value)}`
+        [this._draggingThumb]: `${__privateMethod(this, _RangeSlider_instances, roundToNearestStep_fn).call(this, this._draggingThumb, value)}`
       });
     });
     __privateAdd(this, _onDragEnd, () => {
-      __privateSet(this, _draggingThumb, false);
+      this._draggingThumb = false;
       __privateMethod(this, _RangeSlider_instances, unregisterDragListeners_fn).call(this);
     });
   }
@@ -250,6 +269,12 @@ let RangeSlider = class extends FormAssociatedRangeSlider {
     });
     super.formResetCallback();
   }
+  /**
+   * @internal
+   */
+  _isThumbPopupOpen(thumb) {
+    return this._visiblyFocusedThumb === thumb || this._hoveredThumb === thumb || this._draggingThumb === thumb;
+  }
   // --- Lifecycle ---
   connectedCallback() {
     super.connectedCallback();
@@ -269,7 +294,7 @@ let RangeSlider = class extends FormAssociatedRangeSlider {
    * @internal
    */
   _onMouseDown(e) {
-    if (this.disabled || __privateGet(this, _draggingThumb)) {
+    if (this.disabled || this._draggingThumb) {
       return;
     }
     const value = __privateMethod(this, _RangeSlider_instances, calculateValueFromMouseEvent_fn).call(this, e);
@@ -279,8 +304,8 @@ let RangeSlider = class extends FormAssociatedRangeSlider {
     __privateMethod(this, _RangeSlider_instances, updateValues_fn).call(this, {
       [thumb]: `${__privateMethod(this, _RangeSlider_instances, roundToNearestStep_fn).call(this, thumb, value)}`
     });
-    __privateSet(this, _draggingThumb, thumb);
-    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].focus();
+    this._draggingThumb = thumb;
+    __privateMethod(this, _RangeSlider_instances, focusThumbNonVisibly_fn).call(this, __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb]);
     __privateMethod(this, _RangeSlider_instances, registerDragHandlers_fn).call(this);
   }
 };
@@ -344,12 +369,17 @@ thumbConstraints_get = function() {
     end: { min: this.startAsNumber, max: this.max }
   };
 };
-_draggingThumb = new WeakMap();
+getThumbId_fn = function(thumb) {
+  return thumb === this._startThumbEl ? "start" : "end";
+};
+getThumbIdFromEvent_fn = function(e) {
+  return __privateMethod(this, _RangeSlider_instances, getThumbId_fn).call(this, e.target);
+};
 updateThumbPositions_fn = function() {
   const startOffsetPct = __privateMethod(this, _RangeSlider_instances, thumbTrackEndOffset_fn).call(this, this.startAsNumber);
   const endOffsetPct = __privateMethod(this, _RangeSlider_instances, thumbTrackEndOffset_fn).call(this, this.endAsNumber);
   const [dirProp, dimProp] = this.orientation === aria.Orientation.horizontal ? ["right", "width"] : ["bottom", "height"];
-  const transition = `transition: ${__privateGet(this, _draggingThumb) ? "none" : "all 0.2s ease"};`;
+  const transition = `transition: ${this._draggingThumb ? "none" : "all 0.2s ease"};`;
   this._startThumbCss = `${dirProp}: ${startOffsetPct}%; ${transition}`;
   this._endThumbCss = `${dirProp}: ${endOffsetPct}%; ${transition}`;
   this._selectedRangeCss = `${dirProp}: ${endOffsetPct}%; ${dimProp}: ${startOffsetPct - endOffsetPct}%; ${transition}`;
@@ -377,6 +407,12 @@ roundToNearestStep_fn = function(thumb, value) {
     roundToStepValue(value - this.min, this.step) + this.min
   );
 };
+_isNonVisibleFocus = new WeakMap();
+focusThumbNonVisibly_fn = function(thumb) {
+  __privateSet(this, _isNonVisibleFocus, true);
+  thumb.focus();
+  __privateSet(this, _isNonVisibleFocus, false);
+};
 // --- Event handling ---
 registerThumbListeners_fn = function() {
   for (const thumb of ["start", "end"]) {
@@ -391,6 +427,14 @@ registerThumbListeners_fn = function() {
       __privateGet(this, _onThumbMousedown),
       { passive: true }
     );
+    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].addEventListener("mouseover", __privateGet(this, _onMouseOver), {
+      passive: true
+    });
+    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].addEventListener("mouseout", __privateGet(this, _onMouseOut), {
+      passive: true
+    });
+    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].addEventListener("focus", __privateGet(this, _onThumbFocus));
+    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].addEventListener("blur", __privateGet(this, _onThumbBlur));
   }
 };
 unregisterThumbListeners_fn = function() {
@@ -404,8 +448,16 @@ unregisterThumbListeners_fn = function() {
       "touchstart",
       __privateGet(this, _onThumbMousedown)
     );
+    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].removeEventListener("mouseover", __privateGet(this, _onMouseOver));
+    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].removeEventListener("mouseout", __privateGet(this, _onMouseOut));
+    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].removeEventListener("focus", __privateGet(this, _onThumbFocus));
+    __privateGet(this, _RangeSlider_instances, thumbs_get)[thumb].removeEventListener("blur", __privateGet(this, _onThumbBlur));
   }
 };
+_onThumbFocus = new WeakMap();
+_onThumbBlur = new WeakMap();
+_onMouseOver = new WeakMap();
+_onMouseOut = new WeakMap();
 _onThumbMousedown = new WeakMap();
 _onThumbKeydown = new WeakMap();
 registerDragHandlers_fn = function() {
@@ -466,9 +518,21 @@ __decorateClass([
 __decorateClass([
   index.attr
 ], RangeSlider.prototype, "connotation", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], RangeSlider.prototype, "pin", 2);
 __decorateClass([
   index.observable
 ], RangeSlider.prototype, "valueTextFormatter", 2);
+__decorateClass([
+  index.observable
+], RangeSlider.prototype, "_draggingThumb", 2);
+__decorateClass([
+  index.observable
+], RangeSlider.prototype, "_visiblyFocusedThumb", 2);
+__decorateClass([
+  index.observable
+], RangeSlider.prototype, "_hoveredThumb", 2);
 __decorateClass([
   index.observable
 ], RangeSlider.prototype, "_startThumbCss", 2);
@@ -479,7 +543,7 @@ __decorateClass([
   index.observable
 ], RangeSlider.prototype, "_selectedRangeCss", 2);
 RangeSlider = __decorateClass([
-  index$1.formElements
+  formElements.formElements
 ], RangeSlider);
 applyMixins.applyMixins(RangeSlider, localized.Localized);
 
@@ -488,7 +552,12 @@ const getClasses = ({ disabled, connotation }) => classNames.classNames(
   ["disabled", Boolean(disabled)],
   [`connotation-${connotation}`, Boolean(connotation)]
 );
-const RangeSliderTemplate = () => {
+const getThumbClassesFor = (thumb) => ({ _visiblyFocusedThumb }) => classNames.classNames("thumb-container", [
+  "focus-visible",
+  _visiblyFocusedThumb === thumb
+]);
+const RangeSliderTemplate = (context) => {
+  const popupTag = context.tagFor(definition.Popup);
   return index.html` <template
 		@mousedown="${(x, c) => x._onMouseDown(c.event)}"
 	>
@@ -506,7 +575,7 @@ const RangeSliderTemplate = () => {
 				</div>
 				<div
 					${ref.ref("_startThumbEl")}
-					class="thumb-container"
+					class="${getThumbClassesFor("start")}"
 					style="${(x) => x._startThumbCss}"
 					role="slider"
 					tabindex="${(x) => x.disabled ? null : 0}"
@@ -518,9 +587,25 @@ const RangeSliderTemplate = () => {
 					aria-disabled="${(x) => x.disabled}"
 					aria-orientation="${(x) => x.orientation}"
 				></div>
+				${when.when(
+    (x) => x.pin,
+    index.html`<${popupTag}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${(x) => x._startThumbEl}"
+					:open=${(x) => x._isThumbPopupOpen("start")}
+					:placementStrategy=${(x) => x.orientation === aria.Orientation.horizontal ? definition.PlacementStrategy.AutoPlacementHorizontal : definition.PlacementStrategy.AutoPlacementVertical}
+					animation-frame
+					exportparts="vvd-theme-alternate"
+					aria-hidden="true"
+				>
+					<div class="tooltip">${(x) => x.valueTextFormatter(x.start)}</div>
+				</${popupTag}>`
+  )}
 				<div
 					${ref.ref("_endThumbEl")}
-					class="thumb-container"
+					class="${getThumbClassesFor("end")}"
 					style="${(x) => x._endThumbCss}"
 					role="slider"
 					tabindex="${(x) => x.disabled ? null : 0}"
@@ -532,6 +617,22 @@ const RangeSliderTemplate = () => {
 					aria-disabled="${(x) => x.disabled}"
 					aria-orientation="${(x) => x.orientation}"
 				></div>
+				${when.when(
+    (x) => x.pin,
+    index.html`<${popupTag}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${(x) => x._endThumbEl}"
+					:open=${(x) => x._isThumbPopupOpen("end")}
+					:placementStrategy=${(x) => x.orientation === aria.Orientation.horizontal ? definition.PlacementStrategy.AutoPlacementHorizontal : definition.PlacementStrategy.AutoPlacementVertical}
+					animation-frame
+					exportparts="vvd-theme-alternate"
+					aria-hidden="true"
+				>
+					<div class="tooltip">${(x) => x.valueTextFormatter(x.end)}</div>
+				</${popupTag}>`
+  )}
 			</div>
 		</div>
 	</template>`;
@@ -545,7 +646,10 @@ const rangeSliderDefinition = RangeSlider.compose({
     delegatesFocus: true
   }
 });
-const rangeSliderRegistries = [rangeSliderDefinition()];
+const rangeSliderRegistries = [
+  ...definition.popupRegistries,
+  rangeSliderDefinition()
+];
 const registerRangeSlider = index.registerFactory(rangeSliderRegistries);
 
 exports.rangeSliderDefinition = rangeSliderDefinition;