@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.23.1-preview.0",
+  "version": "5.24.0",
   "homepage": "https://vivid.vonage.com",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
@@ -55,7 +55,7 @@
     "prosemirror-state": "^1.4.4",
     "prosemirror-transform": "^1.12.0",
     "prosemirror-view": "^1.41.8",
-    "uuid": "^11.1.1",
+    "uuid": "^14.0.0",
     "vanilla-colorful": "^0.7.2",
     "video.js": "^8.23.7"
   },
@@ -66,6 +66,8 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20.19.40",
+    "@vitest/browser": "^4.1.8",
+    "@vitest/browser-playwright": "^4.1.8",
     "cem-plugin-async-function": "^0.0.5",
     "cem-plugin-jsdoc-example": "^0.0.9",
     "cem-plugin-jsdoc-function": "^0.0.5",
@@ -75,31 +77,36 @@
     "element-internals-polyfill": "^3.0.2",
     "eslint": "^10.3.0",
     "eslint-formatter-compact": "^9.0.1",
+    "eslint-plugin-barrel-files": "^3.0.1",
     "glob": "^13.0.6",
     "http-server": "^14.1.1",
     "playwright": "1.57.0",
     "sass": "^1.99.0",
+    "stylelint": "^16.26.1",
     "tsx": "^4.21.0",
     "typescript": "5.9.3",
     "vite": "^8.0.12",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.4.0",
-    "vitest": "^4.1.5",
+    "vitest": "^4.1.8",
     "vitest-axe": "^0.1.0",
     "vitest-fetch-mock": "^0.4.5",
     "wait-on": "^8.0.5",
+    "@repo/browser-tests": "1.0.0",
     "@repo/cem-analyzer-plugins": "1.0.0",
     "@repo/eslint-config": "1.0.0",
     "@repo/eslint-plugin-repo": "1.0.0",
+    "@repo/internal-test-utils": "1.0.0",
     "@repo/metadata-extractor": "1.0.0",
-    "@repo/shared": "1.0.0",
     "@repo/stylelint-config": "1.0.0",
+    "@repo/sass": "1.0.0",
     "@repo/styles": "1.0.0",
     "@repo/tokens": "1.0.0",
     "@repo/tools": "1.0.0",
-    "@repo/typescript-config": "1.0.0",
     "@repo/vite-config": "1.0.0",
     "@repo/vitest-config": "1.0.0",
+    "@repo/typescript-config": "1.0.0",
+    "@repo/vvd-jsx": "1.0.0",
     "@vonage/vivid-icons": "4.11.0"
   },
   "customElements": "custom-elements.json",
@@ -113,12 +120,14 @@
     "e2e:docker": "PW_TEST_CONNECT_WS_ENDPOINT=ws://localhost:3000/ playwright test",
     "e2e:docker:ui": "PW_TEST_CONNECT_WS_ENDPOINT=ws://localhost:3000/ playwright test --ui",
     "e2e:ui": "playwright test --ui",
-    "extract-metadata": "extract-metadata | pnpx prettier --stdin-filepath metadata.json > metadata.json",
+    "extract-metadata": "extract-metadata | pnpm prettier --stdin-filepath metadata.json > metadata.json",
     "lint": "eslint . --max-warnings=0",
     "lint:fix": "eslint . --max-warnings=0 --fix",
     "stylelint": "stylelint 'src/**/*.{css,scss}'",
     "stylelint:fix": "stylelint 'src/**/*.{css,scss}' --fix",
     "test": "vitest run",
+    "test:browser": "vitest run --config vitest.config.browser.ts --no-file-parallelism",
+    "test:browser:docker": "run-with-playwright-docker vitest run --config vitest.config.browser.ts --no-file-parallelism",
     "test:coverage": "vitest run --coverage && relativize-coverage .",
     "test:watch": "vitest --watch",
     "typecheck": "tsc --noEmit"

package/pagination/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition53.cjs");
+const require_definition = require("../unbundled/definition54.cjs");
 exports.VwcPaginationElement = require_definition.Pagination;
 exports.paginationDefinition = require_definition.paginationDefinition;
 exports.registerPagination = require_definition.registerPagination;

package/pagination/definition.js

@@ -1,2 +1,2 @@
-import { n as registerPagination, r as Pagination, t as paginationDefinition } from "../unbundled/definition53.js";
+import { n as registerPagination, r as Pagination, t as paginationDefinition } from "../unbundled/definition54.js";
 export { Pagination as VwcPaginationElement, paginationDefinition, registerPagination };

package/platform-switch/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition54.cjs");
+const require_definition = require("../unbundled/definition55.cjs");
 exports.VwcPlatformSwitchElement = require_definition.PlatformSwitch;
 exports.platformSwitchDefinition = require_definition.platformSwitchDefinition;
 exports.registerPlatformSwitch = require_definition.registerPlatformSwitch;

package/platform-switch/definition.js

@@ -1,2 +1,2 @@
-import { n as registerPlatformSwitch, r as PlatformSwitch, t as platformSwitchDefinition } from "../unbundled/definition54.js";
+import { n as registerPlatformSwitch, r as PlatformSwitch, t as platformSwitchDefinition } from "../unbundled/definition55.js";
 export { PlatformSwitch as VwcPlatformSwitchElement, platformSwitchDefinition, registerPlatformSwitch };

package/popover/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition55.cjs");
+const require_definition = require("../unbundled/definition56.cjs");
 exports.VwcPopoverElement = require_definition.Popover;
 exports.popoverDefinition = require_definition.popoverDefinition;
 exports.registerPopover = require_definition.registerPopover;

package/popover/definition.js

@@ -1,2 +1,2 @@
-import { n as registerPopover, r as Popover, t as popoverDefinition } from "../unbundled/definition55.js";
+import { n as registerPopover, r as Popover, t as popoverDefinition } from "../unbundled/definition56.js";
 export { Popover as VwcPopoverElement, popoverDefinition, registerPopover };

package/popover/index.cjs

@@ -1,27 +1,27 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/definition2.cjs`),s=require(`../bundled/class-names.cjs`),c=require(`../bundled/delegates-aria.cjs`),l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition7.cjs`),d=require(`../bundled/floating-ui.dom.cjs`);var f=`: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%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{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);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}`,p=class extends e.t(c.t(t.t)){constructor(...e){super(...e),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.#c=this.updatePosition()},this.#f=e=>{let 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.#s()}arrowChanged(){this.#s()}openChanged(e,t){if(!this._popoverEl)return;let n=this._popoverEl.matches(`:popover-open`);t&&!n?this._popoverEl.showPopover():!t&&n&&this._popoverEl.hidePopover(),this.#s()}anchorChanged(){this.#t()}_slottedAnchorChanged(){this.#t()}#e;#t(){if(!this._popoverEl)return;let e=this.anchor||this._slottedAnchor?.[0]||null;this.#e!==e&&(this.#e&&this.#r(this.#e),this.#e=e,this.#e&&this._popoverEl&&(this.#n(this.#e),this.#s()))}#n(e){e.setAttribute(`aria-haspopup`,`dialog`),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=this._popoverEl:e.addEventListener(`click`,this.#i)}#r(e){e.removeAttribute(`aria-haspopup`),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=null:e.removeEventListener(`click`,this.#i)}#i;get#a(){let e=[d.s(),d.a(),d.l(),d.o()],t=this.offset??0;return this.arrow&&this._arrowEl&&(t=12,e=[...e,d.t({element:this._arrowEl,padding:10})]),t>0&&e.unshift(d.c(t)),e}#o;#s(){this.#o?.(),this.open&&this.#e&&this._popoverEl&&(this.#o=d.r(this.#e,this._popoverEl,this.#l))}#c;#l;async updatePosition(){if(!this.open||!this.#e||!this._popoverEl)return;let e=await d.i(this.#e,this._popoverEl,{placement:this.placement,strategy:`fixed`,middleware:this.#a});this.open&&(this.#u(e),this.arrow&&this._arrowEl&&this.#d(e))}#u(e){let{x:t,y:n}=e;Object.assign(this._popoverEl.style,{left:`${t}px`,top:`${n}px`,visibility:e.middlewareData.hide?.referenceHidden?`hidden`:`visible`})}#d(e){if(!this._arrowEl)return;let{x:t,y:n}=e.middlewareData.arrow,r={left:`calc(100% - 4px)`,right:`-4px`,top:`calc(100% - 4px)`,bottom:`-4px`},i=e.placement.split(`-`)[0];Object.assign(this._arrowEl.style,{left:t?`${t}px`:r[i],top:n?`${n}px`:r[i]})}#f;connectedCallback(){super.connectedCallback(),this.#t(),this._popoverEl&&(this._popoverEl.addEventListener(`toggle`,this.#f),this.open&&!this._popoverEl.matches(`:popover-open`)&&(this._popoverEl.showPopover(),this.#s()))}disconnectedCallback(){super.disconnectedCallback(),this.#o?.(),this.#e&&=(this.#r(this.#e),null),this._popoverEl&&this._popoverEl.removeEventListener(`toggle`,this.#f)}show(){return this.open=!0,this.#c??Promise.resolve()}hide(){this.open=!1}toggle(){this.open=!this.open}};a.t([t.m({mode:`fromView`})],p.prototype,`placement`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`manual`,void 0),a.t([t.m({mode:`fromView`})],p.prototype,`layout`,void 0),a.t([t.m({attribute:`offset`,mode:`fromView`,converter:t.h})],p.prototype,`offset`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`alternate`,void 0),a.t([t.m({attribute:`dismiss-button-aria-label`})],p.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`arrow`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`open`,void 0),a.t([t.A],p.prototype,`anchor`,void 0),a.t([t.A],p.prototype,`_slottedAnchor`,void 0);var m=({open:e,manual:t,layout:n})=>s.t(`control`,[`open`,e],[`manual`,t],[`condensed`,n===`condensed`]),h=t.u(`popover`,p,e=>{let a=e.tagFor(u.r),s=e.tagFor(l.i),d=e.tagFor(o.r);return t.p`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/decorate.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/definition3.cjs`),c=require(`../bundled/delegates-aria.cjs`),l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition7.cjs`),d=require(`../bundled/floating-ui.dom.cjs`);var f=`: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%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{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);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}`,p=class extends e.t(c.t(t.t)){constructor(...e){super(...e),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.#c=this.updatePosition()},this.#f=e=>{let 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.#s()}arrowChanged(){this.#s()}openChanged(e,t){if(!this._popoverEl)return;let n=this._popoverEl.matches(`:popover-open`);t&&!n?this._popoverEl.showPopover():!t&&n&&this._popoverEl.hidePopover(),this.#s()}anchorChanged(){this.#t()}_slottedAnchorChanged(){this.#t()}#e;#t(){if(!this._popoverEl)return;let e=this.anchor||this._slottedAnchor?.[0]||null;this.#e!==e&&(this.#e&&this.#r(this.#e),this.#e=e,this.#e&&this._popoverEl&&(this.#n(this.#e),this.#s()))}#n(e){e.setAttribute(`aria-haspopup`,`dialog`),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=this._popoverEl:e.addEventListener(`click`,this.#i)}#r(e){e.removeAttribute(`aria-haspopup`),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=null:e.removeEventListener(`click`,this.#i)}#i;get#a(){let e=[d.s(),d.a(),d.l(),d.o()],t=this.offset??0;return this.arrow&&this._arrowEl&&(t=12,e=[...e,d.t({element:this._arrowEl,padding:10})]),t>0&&e.unshift(d.c(t)),e}#o;#s(){this.#o?.(),this.open&&this.#e&&this._popoverEl&&(this.#o=d.r(this.#e,this._popoverEl,this.#l))}#c;#l;async updatePosition(){if(!this.open||!this.#e||!this._popoverEl)return;let e=await d.i(this.#e,this._popoverEl,{placement:this.placement,strategy:`fixed`,middleware:this.#a});this.open&&(this.#u(e),this.arrow&&this._arrowEl&&this.#d(e))}#u(e){let{x:t,y:n}=e;Object.assign(this._popoverEl.style,{left:`${t}px`,top:`${n}px`,visibility:e.middlewareData.hide?.referenceHidden?`hidden`:`visible`})}#d(e){if(!this._arrowEl)return;let{x:t,y:n}=e.middlewareData.arrow,r={left:`calc(100% - 4px)`,right:`-4px`,top:`calc(100% - 4px)`,bottom:`-4px`},i=e.placement.split(`-`)[0];Object.assign(this._arrowEl.style,{left:t?`${t}px`:r[i],top:n?`${n}px`:r[i]})}#f;connectedCallback(){super.connectedCallback(),this.#t(),this._popoverEl&&(this._popoverEl.addEventListener(`toggle`,this.#f),this.open&&!this._popoverEl.matches(`:popover-open`)&&(this._popoverEl.showPopover(),this.#s()))}disconnectedCallback(){super.disconnectedCallback(),this.#o?.(),this.#e&&=(this.#r(this.#e),null),this._popoverEl&&this._popoverEl.removeEventListener(`toggle`,this.#f)}show(){return this.open=!0,this.#c??Promise.resolve()}hide(){this.open=!1}toggle(){this.open=!this.open}};a.t([t.m({mode:`fromView`})],p.prototype,`placement`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`manual`,void 0),a.t([t.m({mode:`fromView`})],p.prototype,`layout`,void 0),a.t([t.m({attribute:`offset`,mode:`fromView`,converter:t.h})],p.prototype,`offset`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`alternate`,void 0),a.t([t.m({attribute:`dismiss-button-aria-label`})],p.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`arrow`,void 0),a.t([t.m({mode:`boolean`})],p.prototype,`open`,void 0),a.t([t.A],p.prototype,`anchor`,void 0),a.t([t.A],p.prototype,`_slottedAnchor`,void 0);var m=t.u(`popover`,p,e=>{let a=e.tagFor(u.r),d=e.tagFor(l.i),f=e.tagFor(s.r);return t.p`
 		<slot name="anchor" ${n.t(`_slottedAnchor`)}></slot>
 		<${a}>
-			<div class="base" 
-				${r.t(`_popoverEl`)} 
+			<div class="base"
+				${r.t(`_popoverEl`)}
 				popover="${e=>e.manual?`manual`:`auto`}"
 				tabindex="-1"
 				autofocus
 				${c.n({role:`dialog`,ariaModal:`false`})}
 			>
-				<div class="${m}" 
+				<div class="${e=>o.t(`control`,[`open`,e.open],[`manual`,e.manual],[`condensed`,e.layout===`condensed`])}"
 					part="${e=>e.alternate?`vvd-theme-alternate`:``}">
 					<slot></slot>
 					<slot name="footer"></slot>
-					${i.t(e=>e.manual,t.p`<${s}
+					${i.t(e=>e.manual,t.p`<${d}
 							aria-label="${e=>e.dismissButtonAriaLabel||e.locale.popover.dismissButtonLabel}"
 							type="button"
 							size="condensed"
 							class="dismiss-button"
 							@click="${e=>e.hide()}">
-							<${d} name="close-line" slot="icon"></${d}>
-						</${s}>`)}
+							<${f} name="close-line" slot="icon"></${f}>
+						</${d}>`)}
 					${i.t(e=>e.arrow,t.p`<div class="arrow" ${r.t(`_arrowEl`)}></div>`)}
 				</div>
 			</div>
 		</${a}>
-	`},[l.t,o.t,u.t],{styles:f,shadowOptions:{delegatesFocus:!0}});t.d(h)();
+	`},[l.t,s.t,u.t],{styles:f,shadowOptions:{delegatesFocus:!0}});t.d(m)();

package/popover/index.js

@@ -4,14 +4,14 @@ import { t as c } from "../bundled/slotted.js";
 import { t as l } from "../bundled/ref.js";
 import { t as u } from "../bundled/when.js";
 import { t as d } from "../bundled/decorate.js";
-import { r as f, t as p } from "../bundled/definition2.js";
-import { t as m } from "../bundled/class-names.js";
+import { t as f } from "../bundled/class-names.js";
+import { r as p, t as m } from "../bundled/definition3.js";
 import { n as h, t as g } from "../bundled/delegates-aria.js";
 import { i as _, t as v } from "../bundled/definition6.js";
 import { r as y, t as b } from "../bundled/definition7.js";
 import { a as x, c as S, i as C, l as w, o as T, r as E, s as D, t as O } from "../bundled/floating-ui.dom.js";
 //#region src/lib/popover/popover.scss?inline
-var k = ":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%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{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);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}", A = class extends e(g(o)) {
+var k = ":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%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{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);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}", A = class extends e(g(o)) {
 	constructor(...e) {
 		super(...e), 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();
@@ -121,23 +121,19 @@ var k = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-
 		this.open = !this.open;
 	}
 };
+//#endregion
+//#region src/lib/popover/index.ts
 d([i({ mode: "fromView" })], A.prototype, "placement", void 0), d([i({ mode: "boolean" })], A.prototype, "manual", void 0), d([i({ mode: "fromView" })], A.prototype, "layout", void 0), d([i({
 	attribute: "offset",
 	mode: "fromView",
 	converter: r
-})], A.prototype, "offset", void 0), d([i({ mode: "boolean" })], A.prototype, "alternate", void 0), d([i({ attribute: "dismiss-button-aria-label" })], A.prototype, "dismissButtonAriaLabel", void 0), d([i({ mode: "boolean" })], A.prototype, "arrow", void 0), d([i({ mode: "boolean" })], A.prototype, "open", void 0), d([t], A.prototype, "anchor", void 0), d([t], A.prototype, "_slottedAnchor", void 0);
-//#endregion
-//#region src/lib/popover/popover.template.ts
-var j = ({ open: e, manual: t, layout: n }) => m("control", ["open", e], ["manual", t], ["condensed", n === "condensed"]);
-//#endregion
-//#region src/lib/popover/index.ts
-n(s("popover", A, (e) => {
-	let t = e.tagFor(y), n = e.tagFor(_), r = e.tagFor(f);
+})], A.prototype, "offset", void 0), d([i({ mode: "boolean" })], A.prototype, "alternate", void 0), d([i({ attribute: "dismiss-button-aria-label" })], A.prototype, "dismissButtonAriaLabel", void 0), d([i({ mode: "boolean" })], A.prototype, "arrow", void 0), d([i({ mode: "boolean" })], A.prototype, "open", void 0), d([t], A.prototype, "anchor", void 0), d([t], A.prototype, "_slottedAnchor", void 0), n(s("popover", A, (e) => {
+	let t = e.tagFor(y), n = e.tagFor(_), r = e.tagFor(p);
 	return a`
 		<slot name="anchor" ${c("_slottedAnchor")}></slot>
 		<${t}>
-			<div class="base" 
-				${l("_popoverEl")} 
+			<div class="base"
+				${l("_popoverEl")}
 				popover="${(e) => e.manual ? "manual" : "auto"}"
 				tabindex="-1"
 				autofocus
@@ -146,7 +142,7 @@ n(s("popover", A, (e) => {
 		ariaModal: "false"
 	})}
 			>
-				<div class="${j}" 
+				<div class="${(e) => f("control", ["open", e.open], ["manual", e.manual], ["condensed", e.layout === "condensed"])}"
 					part="${(e) => e.alternate ? "vvd-theme-alternate" : ""}">
 					<slot></slot>
 					<slot name="footer"></slot>
@@ -165,7 +161,7 @@ n(s("popover", A, (e) => {
 	`;
 }, [
 	v,
-	p,
+	m,
 	b
 ], {
 	styles: k,

package/popup/definition.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition10.cjs");
+const require_definition = require("../unbundled/definition9.cjs");
 exports.popupDefinition = require_definition.popupDefinition;
 exports.registerPopup = require_definition.registerPopup;

package/popup/definition.js

@@ -1,2 +1,2 @@
-import { n as registerPopup, t as popupDefinition } from "../unbundled/definition10.js";
+import { n as registerPopup, t as popupDefinition } from "../unbundled/definition9.js";
 export { popupDefinition, registerPopup };

package/progress/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition56.cjs");
+const require_definition = require("../unbundled/definition57.cjs");
 exports.VwcProgressElement = require_definition.Progress;
 exports.progressDefinition = require_definition.progressDefinition;
 exports.registerProgress = require_definition.registerProgress;

package/progress/definition.js

@@ -1,2 +1,2 @@
-import { n as registerProgress, r as Progress, t as progressDefinition } from "../unbundled/definition56.js";
+import { n as registerProgress, r as Progress, t as progressDefinition } from "../unbundled/definition57.js";
 export { Progress as VwcProgressElement, progressDefinition, registerProgress };

package/progress/index.cjs

@@ -1,17 +1,17 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/delegates-aria.cjs`),a=require(`../bundled/base-progress.cjs`);var o=`.base{outline:none;align-items:center;height:6px;margin:0}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary:var(--vvd-progress-cta-primary,var(--vvd-color-cta-500));--_connotation-color-soft:var(--vvd-progress-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary:var(--vvd-progress-alert-primary,var(--vvd-color-alert-500));--_connotation-color-soft:var(--vvd-progress-alert-soft,var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary:var(--vvd-progress-success-primary,var(--vvd-color-success-500));--_connotation-color-soft:var(--vvd-progress-success-soft,var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary:var(--vvd-progress-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-progress-accent-soft,var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-pacific{--_connotation-color-primary:linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{align-items:center;block-size:100%;inline-size:100%;display:flex;position:relative;overflow:hidden}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%;display:flex}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{inline-size:30%;animation:2s infinite indeterminate-1}.indicator-2{inline-size:60%;animation:2s infinite indeterminate-2}.indicator-1,.indicator-2{background-color:var(--vvd-color-neutral-100);opacity:0;block-size:100%;animation-timing-function:cubic-bezier(.4,0,.6,1);position:absolute}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{background-color:var(--_connotation-color-primary);animation-play-state:paused}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}`,s=class extends i.t(a.t){constructor(...e){super(...e),this.reverse=!1}};n.t([e.m()],s.prototype,`shape`,void 0),n.t([e.m()],s.prototype,`connotation`,void 0),n.t([e.m({mode:`boolean`})],s.prototype,`reverse`,void 0);var c=({connotation:e,shape:t,reverse:n,paused:i})=>r.t(`base`,[`connotation-${e}`,!!e],[`shape-${t}`,!!t],[`reverse`,n],[`paused`,i]);function l(){return e.p` <span
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/base-progress.cjs`),a=require(`../bundled/delegates-aria.cjs`);var o=`.base{outline:none;align-items:center;height:6px;margin:0}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary:var(--vvd-progress-cta-primary,var(--vvd-color-cta-500));--_connotation-color-soft:var(--vvd-progress-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary:var(--vvd-progress-alert-primary,var(--vvd-color-alert-500));--_connotation-color-soft:var(--vvd-progress-alert-soft,var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary:var(--vvd-progress-success-primary,var(--vvd-color-success-500));--_connotation-color-soft:var(--vvd-progress-success-soft,var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary:var(--vvd-progress-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-progress-accent-soft,var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-pacific{--_connotation-color-primary:linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{align-items:center;block-size:100%;inline-size:100%;display:flex;position:relative;overflow:hidden}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%;display:flex}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{inline-size:30%;animation:2s infinite indeterminate-1}.indicator-2{inline-size:60%;animation:2s infinite indeterminate-2}.indicator-1,.indicator-2{background-color:var(--vvd-color-neutral-100);opacity:0;block-size:100%;animation-timing-function:cubic-bezier(.4,0,.6,1);position:absolute}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{background-color:var(--_connotation-color-primary);animation-play-state:paused}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}`,s=class extends a.t(i.t){constructor(...e){super(...e),this.reverse=!1}};n.t([e.m()],s.prototype,`shape`,void 0),n.t([e.m()],s.prototype,`connotation`,void 0),n.t([e.m({mode:`boolean`})],s.prototype,`reverse`,void 0);function c(){return e.p` <span
 		class="determinate"
 		style="width: ${e=>e.percentComplete}%"
-	></span>`}function u(){return e.p` <span class="indeterminate" name="indeterminate">
+	></span>`}function l(){return e.p` <span class="indeterminate" name="indeterminate">
 		<span class="indicator-1"></span>
 		<span class="indicator-2"></span>
-	</span>`}var d=e.p`<template>
+	</span>`}var u=e.p`<template>
 	<div
-		class="${c}"
-		${i.n({role:`progressbar`,ariaValueNow:e=>e.value,ariaValueMin:e=>e.min,ariaValueMax:e=>e.max})}
+		class="${e=>r.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`shape-${e.shape}`,!!e.shape],[`reverse`,e.reverse],[`paused`,e.paused])}"
+		${a.n({role:`progressbar`,ariaValueNow:e=>e.value,ariaValueMin:e=>e.min,ariaValueMax:e=>e.max})}
 	>
 		<div class="progress">
-			${t.t(e=>typeof e.value==`number`,l())}
-			${t.t(e=>typeof e.value!=`number`,u())}
+			${t.t(e=>typeof e.value==`number`,c())}
+			${t.t(e=>typeof e.value!=`number`,l())}
 		</div>
 	</div>
-</template>`,f=e.u(`progress`,s,d,[],{styles:o});e.d(f)();
+</template>`,d=e.u(`progress`,s,u,[],{styles:o});e.d(d)();

package/progress/index.js

@@ -2,10 +2,10 @@ import { d as e, m as t, p as n, u as r } from "../bundled/vivid-element.js";
 import { t as i } from "../bundled/when.js";
 import { t as a } from "../bundled/decorate.js";
 import { t as o } from "../bundled/class-names.js";
-import { n as s, t as c } from "../bundled/delegates-aria.js";
-import { t as l } from "../bundled/base-progress.js";
+import { t as s } from "../bundled/base-progress.js";
+import { n as c, t as l } from "../bundled/delegates-aria.js";
 //#region src/lib/progress/progress.scss?inline
-var u = ".base{outline:none;align-items:center;height:6px;margin:0}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary:var(--vvd-progress-cta-primary,var(--vvd-color-cta-500));--_connotation-color-soft:var(--vvd-progress-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary:var(--vvd-progress-alert-primary,var(--vvd-color-alert-500));--_connotation-color-soft:var(--vvd-progress-alert-soft,var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary:var(--vvd-progress-success-primary,var(--vvd-color-success-500));--_connotation-color-soft:var(--vvd-progress-success-soft,var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary:var(--vvd-progress-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-progress-accent-soft,var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-pacific{--_connotation-color-primary:linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{align-items:center;block-size:100%;inline-size:100%;display:flex;position:relative;overflow:hidden}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%;display:flex}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{inline-size:30%;animation:2s infinite indeterminate-1}.indicator-2{inline-size:60%;animation:2s infinite indeterminate-2}.indicator-1,.indicator-2{background-color:var(--vvd-color-neutral-100);opacity:0;block-size:100%;animation-timing-function:cubic-bezier(.4,0,.6,1);position:absolute}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{background-color:var(--_connotation-color-primary);animation-play-state:paused}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}", d = class extends c(l) {
+var u = ".base{outline:none;align-items:center;height:6px;margin:0}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary:var(--vvd-progress-cta-primary,var(--vvd-color-cta-500));--_connotation-color-soft:var(--vvd-progress-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary:var(--vvd-progress-alert-primary,var(--vvd-color-alert-500));--_connotation-color-soft:var(--vvd-progress-alert-soft,var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary:var(--vvd-progress-success-primary,var(--vvd-color-success-500));--_connotation-color-soft:var(--vvd-progress-success-soft,var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary:var(--vvd-progress-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-progress-accent-soft,var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-pacific{--_connotation-color-primary:linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{align-items:center;block-size:100%;inline-size:100%;display:flex;position:relative;overflow:hidden}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%;display:flex}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{inline-size:30%;animation:2s infinite indeterminate-1}.indicator-2{inline-size:60%;animation:2s infinite indeterminate-2}.indicator-1,.indicator-2{background-color:var(--vvd-color-neutral-100);opacity:0;block-size:100%;animation-timing-function:cubic-bezier(.4,0,.6,1);position:absolute}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{background-color:var(--_connotation-color-primary);animation-play-state:paused}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}", d = class extends l(s) {
 	constructor(...e) {
 		super(...e), this.reverse = !1;
 	}
@@ -13,14 +13,13 @@ var u = ".base{outline:none;align-items:center;height:6px;margin:0}.base:not(.co
 a([t()], d.prototype, "shape", void 0), a([t()], d.prototype, "connotation", void 0), a([t({ mode: "boolean" })], d.prototype, "reverse", void 0);
 //#endregion
 //#region src/lib/progress/progress.template.ts
-var f = ({ connotation: e, shape: t, reverse: n, paused: r }) => o("base", [`connotation-${e}`, !!e], [`shape-${t}`, !!t], ["reverse", n], ["paused", r]);
-function p() {
+function f() {
 	return n` <span
 		class="determinate"
 		style="width: ${(e) => e.percentComplete}%"
 	></span>`;
 }
-function m() {
+function p() {
 	return n` <span class="indeterminate" name="indeterminate">
 		<span class="indicator-1"></span>
 		<span class="indicator-2"></span>
@@ -30,8 +29,8 @@ function m() {
 //#region src/lib/progress/index.ts
 e(r("progress", d, n`<template>
 	<div
-		class="${f}"
-		${s({
+		class="${(e) => o("base", [`connotation-${e.connotation}`, !!e.connotation], [`shape-${e.shape}`, !!e.shape], ["reverse", e.reverse], ["paused", e.paused])}"
+		${c({
 	role: "progressbar",
 	ariaValueNow: (e) => e.value,
 	ariaValueMin: (e) => e.min,
@@ -39,8 +38,8 @@ e(r("progress", d, n`<template>
 })}
 	>
 		<div class="progress">
-			${i((e) => typeof e.value == "number", p())}
-			${i((e) => typeof e.value != "number", m())}
+			${i((e) => typeof e.value == "number", f())}
+			${i((e) => typeof e.value != "number", p())}
 		</div>
 	</div>
 </template>`, [], { styles: u }))();

package/radio/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition57.cjs");
+const require_definition = require("../unbundled/definition58.cjs");
 exports.VwcRadioElement = require_definition.Radio;
 exports.radioDefinition = require_definition.radioDefinition;
 exports.registerRadio = require_definition.registerRadio;

package/radio/definition.js

@@ -1,2 +1,2 @@
-import { n as registerRadio, r as Radio, t as radioDefinition } from "../unbundled/definition57.js";
+import { n as registerRadio, r as Radio, t as radioDefinition } from "../unbundled/definition58.js";
 export { Radio as VwcRadioElement, radioDefinition, registerRadio };

package/radio-group/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition58.cjs");
+const require_definition = require("../unbundled/definition59.cjs");
 exports.VwcRadioGroupElement = require_definition.RadioGroup;
 exports.radioGroupDefinition = require_definition.radioGroupDefinition;
 exports.registerRadioGroup = require_definition.registerRadioGroup;

package/radio-group/definition.js

@@ -1,2 +1,2 @@
-import { n as registerRadioGroup, r as RadioGroup, t as radioGroupDefinition } from "../unbundled/definition58.js";
+import { n as registerRadioGroup, r as RadioGroup, t as radioGroupDefinition } from "../unbundled/definition59.js";
 export { RadioGroup as VwcRadioGroupElement, radioGroupDefinition, registerRadioGroup };

package/range-slider/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition59.cjs");
+const require_definition = require("../unbundled/definition60.cjs");
 exports.VwcRangeSliderElement = require_definition.RangeSlider;
 exports.rangeSliderDefinition = require_definition.rangeSliderDefinition;
 exports.registerRangeSlider = require_definition.registerRangeSlider;

package/range-slider/definition.js

@@ -1,2 +1,2 @@
-import { n as registerRangeSlider, r as RangeSlider, t as rangeSliderDefinition } from "../unbundled/definition59.js";
+import { n as registerRangeSlider, r as RangeSlider, t as rangeSliderDefinition } from "../unbundled/definition60.js";
 export { RangeSlider as VwcRangeSliderElement, rangeSliderDefinition, registerRangeSlider };

package/range-slider/index.cjs

@@ -1,16 +1,18 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/form-element.cjs`),o=require(`../bundled/aria.cjs`),s=require(`../bundled/class-names.cjs`),c=require(`../bundled/key-codes.cjs`),l=require(`../bundled/numbers.cjs`),u=require(`../bundled/form-associated.cjs`),d=require(`../bundled/definition8.cjs`),f=require(`../bundled/slider.template.cjs`);var p=`:host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary:var(--vvd-slider-cta-primary,var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-slider-accent-primary,var(--vvd-color-canvas-text))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:"";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);transition:opacity .2s ease-out;display:block;position:absolute}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:"";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control,:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start:auto;--_track-start-inset-block-start:auto}`,m={Increment:1,Decrement:-1},h=class extends e.t(a.t(u.n(t.t))){constructor(...e){super(...e),this.#e=!1,this.start=``,this.end=``,this.min=0,this.max=10,this.step=1,this.orientation=o.t.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.#f=!1,this.#g=e=>{this.#f||(this._visiblyFocusedThumb=this.#s(e)),this.#f=!1},this.#_=()=>{this._visiblyFocusedThumb=null},this.#v=()=>{document.hidden&&(this.shadowRoot.activeElement===this._startThumbEl||this.shadowRoot.activeElement===this._endThumbEl)&&(this.#f=!0)},this.#y=e=>{this._hoveredThumb=this.#s(e)},this.#b=()=>{this._hoveredThumb=null},this.#x=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.#p(t),this._draggingThumb=this.#o(t),this.#C()},this.#S=e=>{let t=this.#s(e);if(this._visiblyFocusedThumb=t,e.key===`Home`)e.preventDefault(),this.#t({[t]:`${this.#a[t].min}`});else if(e.key===`End`)e.preventDefault(),this.#t({[t]:`${this.#a[t].max}`});else{if(e.shiftKey)return;switch(e.key){case c.r:case c.t:e.preventDefault(),this.#n(t,m.Increment);break;case c.n:case c.i:e.preventDefault(),this.#n(t,m.Decrement);break}}},this.#T=e=>{if(this.disabled||e.defaultPrevented||!this._draggingThumb)return;let t=`TouchEvent`in window&&e instanceof TouchEvent?e.touches[0]:e,n=this.#u(t);this.#t({[this._draggingThumb]:`${this.#d(this._draggingThumb,n)}`})},this.#E=()=>{this._draggingThumb=!1,this.#w()}}#e;startChanged(){this.currentStart=this.start,this.#e||(this.dirtyValue=!0,this.#r()),this.$fastController.isConnected&&this.#c()}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.#e||(this.dirtyValue=!0,this.#r()),this.$fastController.isConnected&&this.#c()}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()}#t({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.#e=!0,e!==void 0&&(this.start=e),t!==void 0&&(this.end=t),this.#e=!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.#r())}#n(e,t){this.#t({[e]:this.#d(e,Number(this[e])+t*this.step).toString()})}orientationChanged(){this.$fastController.isConnected&&this.#c()}nameChanged(e,t){super.nameChanged(e,t),this.#r()}#r(){if(!this.name)this.setFormValue(null);else{let e=new FormData;e.append(this.name,this.start),e.append(this.name,this.end),this.setFormValue(e)}}formResetCallback(){this.#t({start:this.initialStart??this.min.toString(),end:this.initialEnd??this.max.toString()}),super.formResetCallback()}get#i(){return{start:this._startThumbEl,end:this._endThumbEl}}get#a(){return{start:{min:this.min,max:this.endAsNumber},end:{min:this.startAsNumber,max:this.max}}}#o(e){return e===this._startThumbEl?`start`:`end`}#s(e){return this.#o(e.target)}#c(){let e=this.#l(this.startAsNumber),t=this.#l(this.endAsNumber),[n,r]=this.orientation===o.t.horizontal?[`right`,`width`]:[`bottom`,`height`],i=`transition: ${this._draggingThumb?`none`:`all 0.2s ease`};`;this._startThumbCss=`${n}: ${e}%; ${i}`,this._endThumbCss=`${n}: ${t}%; ${i}`,this._selectedRangeCss=`${n}: ${t}%; ${r}: ${e-t}%; ${i}`}#l(e){return(1-f.r(this.min,this.max,e))*100}#u(e){let t=this._trackEl.getBoundingClientRect(),[n,r,i]=this.orientation===o.t.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 f.i(this.min,this.max,f.r(n,r,i))}#d(e,t){return l.n(this.#a[e].min,this.#a[e].max,f.o(t-this.min,this.step)+this.min)}#f;#p(e){this.#f=!0,e.focus(),this.#f=!1}_isThumbPopupOpen(e){return this._visiblyFocusedThumb===e||this._hoveredThumb===e||this._draggingThumb===e}connectedCallback(){super.connectedCallback(),this.#t({start:this.start||this.initialStart||this.min.toString(),end:this.end||this.initialEnd||this.max.toString()},!1),this.#m(),this.#c(),document.addEventListener(`visibilitychange`,this.#v)}disconnectedCallback(){super.disconnectedCallback(),this.#h(),this.#w(),document.removeEventListener(`visibilitychange`,this.#v)}#m(){for(let e of[`start`,`end`])this.#i[e].addEventListener(`keydown`,this.#S),this.#i[e].addEventListener(`mousedown`,this.#x,{passive:!0}),this.#i[e].addEventListener(`touchstart`,this.#x,{passive:!0}),this.#i[e].addEventListener(`mouseover`,this.#y,{passive:!0}),this.#i[e].addEventListener(`mouseout`,this.#b,{passive:!0}),this.#i[e].addEventListener(`focus`,this.#g),this.#i[e].addEventListener(`blur`,this.#_)}#h(){for(let e of[`start`,`end`])this.#i[e].removeEventListener(`keydown`,this.#S),this.#i[e].removeEventListener(`mousedown`,this.#x),this.#i[e].removeEventListener(`touchstart`,this.#x),this.#i[e].removeEventListener(`mouseover`,this.#y),this.#i[e].removeEventListener(`mouseout`,this.#b),this.#i[e].removeEventListener(`focus`,this.#g),this.#i[e].removeEventListener(`blur`,this.#_)}_onMouseDown(e){if(this.disabled||this._draggingThumb)return;let t=this.#u(e),n=Math.abs(t-Number(this.start)),r=Math.abs(t-Number(this.end)),i=n<r||n===r&&t<Number(this.start)?`start`:`end`;this.#t({[i]:`${this.#d(i,t)}`}),this._draggingThumb=i,this.#p(this.#i[i]),this.#C()}#g;#_;#v;#y;#b;#x;#S;#C(){window.addEventListener(`mousemove`,this.#T,{passive:!0}),window.addEventListener(`touchmove`,this.#T,{passive:!0}),window.addEventListener(`mouseup`,this.#E),window.addEventListener(`touchend`,this.#E),window.document.addEventListener(`mouseleave`,this.#E)}#w(){window.removeEventListener(`mouseup`,this.#E),window.document.removeEventListener(`mouseleave`,this.#E),window.removeEventListener(`mousemove`,this.#T),window.removeEventListener(`touchmove`,this.#T),window.removeEventListener(`touchend`,this.#E)}#T;#E};i.t([t.A],h.prototype,`start`,void 0),i.t([t.m({mode:`fromView`,attribute:`start`})],h.prototype,`initialStart`,void 0),i.t([t.m({attribute:`current-start`})],h.prototype,`currentStart`,void 0),i.t([t.A],h.prototype,`end`,void 0),i.t([t.m({mode:`fromView`,attribute:`end`})],h.prototype,`initialEnd`,void 0),i.t([t.m({attribute:`current-end`})],h.prototype,`currentEnd`,void 0),i.t([t.m({converter:t.h})],h.prototype,`min`,void 0),i.t([t.m({converter:t.h})],h.prototype,`max`,void 0),i.t([t.m({converter:f.a})],h.prototype,`step`,void 0),i.t([t.m],h.prototype,`orientation`,void 0),i.t([t.m({attribute:`aria-start-label`})],h.prototype,`ariaStartLabel`,void 0),i.t([t.m({attribute:`aria-end-label`})],h.prototype,`ariaEndLabel`,void 0),i.t([t.m({mode:`boolean`})],h.prototype,`markers`,void 0),i.t([t.m],h.prototype,`connotation`,void 0),i.t([t.m({mode:`boolean`})],h.prototype,`pin`,void 0),i.t([t.A],h.prototype,`valueTextFormatter`,void 0),i.t([t.A],h.prototype,`_draggingThumb`,void 0),i.t([t.A],h.prototype,`_visiblyFocusedThumb`,void 0),i.t([t.A],h.prototype,`_hoveredThumb`,void 0),i.t([t.A],h.prototype,`_startThumbCss`,void 0),i.t([t.A],h.prototype,`_endThumbCss`,void 0),i.t([t.A],h.prototype,`_selectedRangeCss`,void 0);var g=({disabled:e,connotation:t})=>s.t(`control`,[`disabled`,e],[`connotation-${t}`,!!t]),_=e=>({_visiblyFocusedThumb:t})=>s.t(`thumb-container`,[`focus-visible`,t===e]),v=t.u(`range-slider`,h,e=>{let i=e.tagFor(d.i);return t.p` <template
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/ref.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/aria.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/key-codes.cjs`),c=require(`../bundled/numbers.cjs`),l=require(`../bundled/form-associated.cjs`),u=require(`../bundled/definition8.cjs`),d=require(`../bundled/form-element.cjs`),f=require(`../bundled/slider.template.cjs`);var p=`:host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary:var(--vvd-slider-cta-primary,var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary:var(--vvd-slider-accent-primary,var(--vvd-color-canvas-text))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:"";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){.thumb-container:before{transition:opacity .2s ease-out}}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:"";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0}@media (prefers-reduced-motion:no-preference){:host([internal-part]) .thumb-container{transition:opacity .2s}}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control,:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start:auto;--_track-start-inset-block-start:auto}`,m={Increment:1,Decrement:-1},h=class extends e.t(d.t(l.n(t.t))){constructor(...e){super(...e),this.#e=!1,this.start=``,this.end=``,this.min=0,this.max=10,this.step=1,this.orientation=a.t.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.#f=!1,this.#g=e=>{this.#f||(this._visiblyFocusedThumb=this.#s(e)),this.#f=!1},this.#_=()=>{this._visiblyFocusedThumb=null},this.#v=()=>{document.hidden&&(this.shadowRoot.activeElement===this._startThumbEl||this.shadowRoot.activeElement===this._endThumbEl)&&(this.#f=!0)},this.#y=e=>{this._hoveredThumb=this.#s(e)},this.#b=()=>{this._hoveredThumb=null},this.#x=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.#p(t),this._draggingThumb=this.#o(t),this.#C()},this.#S=e=>{let t=this.#s(e);if(this._visiblyFocusedThumb=t,e.key===`Home`)e.preventDefault(),this.#t({[t]:`${this.#a[t].min}`});else if(e.key===`End`)e.preventDefault(),this.#t({[t]:`${this.#a[t].max}`});else{if(e.shiftKey)return;switch(e.key){case s.r:case s.t:e.preventDefault(),this.#n(t,m.Increment);break;case s.n:case s.i:e.preventDefault(),this.#n(t,m.Decrement);break}}},this.#T=e=>{if(this.disabled||e.defaultPrevented||!this._draggingThumb)return;let t=`TouchEvent`in window&&e instanceof TouchEvent?e.touches[0]:e,n=this.#u(t);this.#t({[this._draggingThumb]:`${this.#d(this._draggingThumb,n)}`})},this.#E=()=>{this._draggingThumb=!1,this.#w()}}#e;startChanged(){this.currentStart=this.start,this.#e||(this.dirtyValue=!0,this.#r()),this.$fastController.isConnected&&this.#c()}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.#e||(this.dirtyValue=!0,this.#r()),this.$fastController.isConnected&&this.#c()}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()}#t({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.#e=!0,e!==void 0&&(this.start=e),t!==void 0&&(this.end=t),this.#e=!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.#r())}#n(e,t){this.#t({[e]:this.#d(e,Number(this[e])+t*this.step).toString()})}orientationChanged(){this.$fastController.isConnected&&this.#c()}nameChanged(e,t){super.nameChanged(e,t),this.#r()}#r(){if(!this.name)this.setFormValue(null);else{let e=new FormData;e.append(this.name,this.start),e.append(this.name,this.end),this.setFormValue(e)}}formResetCallback(){this.#t({start:this.initialStart??this.min.toString(),end:this.initialEnd??this.max.toString()}),super.formResetCallback()}get#i(){return{start:this._startThumbEl,end:this._endThumbEl}}get#a(){return{start:{min:this.min,max:this.endAsNumber},end:{min:this.startAsNumber,max:this.max}}}#o(e){return e===this._startThumbEl?`start`:`end`}#s(e){return this.#o(e.target)}#c(){let e=this.#l(this.startAsNumber),t=this.#l(this.endAsNumber),[n,r]=this.orientation===a.t.horizontal?[`right`,`width`]:[`bottom`,`height`],i=`transition: ${this._draggingThumb?`none`:`all 0.2s ease`};`;this._startThumbCss=`${n}: ${e}%; ${i}`,this._endThumbCss=`${n}: ${t}%; ${i}`,this._selectedRangeCss=`${n}: ${t}%; ${r}: ${e-t}%; ${i}`}#l(e){return(1-f.r(this.min,this.max,e))*100}#u(e){let t=this._trackEl.getBoundingClientRect(),[n,r,i]=this.orientation===a.t.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 f.i(this.min,this.max,f.r(n,r,i))}#d(e,t){return c.n(this.#a[e].min,this.#a[e].max,f.o(t-this.min,this.step)+this.min)}#f;#p(e){this.#f=!0,e.focus(),this.#f=!1}_isThumbPopupOpen(e){return this._visiblyFocusedThumb===e||this._hoveredThumb===e||this._draggingThumb===e}connectedCallback(){super.connectedCallback(),this.#t({start:this.start||this.initialStart||this.min.toString(),end:this.end||this.initialEnd||this.max.toString()},!1),this.#m(),this.#c(),document.addEventListener(`visibilitychange`,this.#v)}disconnectedCallback(){super.disconnectedCallback(),this.#h(),this.#w(),document.removeEventListener(`visibilitychange`,this.#v)}#m(){for(let e of[`start`,`end`])this.#i[e].addEventListener(`keydown`,this.#S),this.#i[e].addEventListener(`mousedown`,this.#x,{passive:!0}),this.#i[e].addEventListener(`touchstart`,this.#x,{passive:!0}),this.#i[e].addEventListener(`mouseover`,this.#y,{passive:!0}),this.#i[e].addEventListener(`mouseout`,this.#b,{passive:!0}),this.#i[e].addEventListener(`focus`,this.#g),this.#i[e].addEventListener(`blur`,this.#_)}#h(){for(let e of[`start`,`end`])this.#i[e].removeEventListener(`keydown`,this.#S),this.#i[e].removeEventListener(`mousedown`,this.#x),this.#i[e].removeEventListener(`touchstart`,this.#x),this.#i[e].removeEventListener(`mouseover`,this.#y),this.#i[e].removeEventListener(`mouseout`,this.#b),this.#i[e].removeEventListener(`focus`,this.#g),this.#i[e].removeEventListener(`blur`,this.#_)}_onMouseDown(e){if(this.disabled||this._draggingThumb)return;let t=this.#u(e),n=Math.abs(t-Number(this.start)),r=Math.abs(t-Number(this.end)),i=n<r||n===r&&t<Number(this.start)?`start`:`end`;this.#t({[i]:`${this.#d(i,t)}`}),this._draggingThumb=i,this.#p(this.#i[i]),this.#C()}#g;#_;#v;#y;#b;#x;#S;#C(){window.addEventListener(`mousemove`,this.#T,{passive:!0}),window.addEventListener(`touchmove`,this.#T,{passive:!0}),window.addEventListener(`mouseup`,this.#E),window.addEventListener(`touchend`,this.#E),window.document.addEventListener(`mouseleave`,this.#E)}#w(){window.removeEventListener(`mouseup`,this.#E),window.document.removeEventListener(`mouseleave`,this.#E),window.removeEventListener(`mousemove`,this.#T),window.removeEventListener(`touchmove`,this.#T),window.removeEventListener(`touchend`,this.#E)}#T;#E};i.t([t.A],h.prototype,`start`,void 0),i.t([t.m({mode:`fromView`,attribute:`start`})],h.prototype,`initialStart`,void 0),i.t([t.m({attribute:`current-start`})],h.prototype,`currentStart`,void 0),i.t([t.A],h.prototype,`end`,void 0),i.t([t.m({mode:`fromView`,attribute:`end`})],h.prototype,`initialEnd`,void 0),i.t([t.m({attribute:`current-end`})],h.prototype,`currentEnd`,void 0),i.t([t.m({converter:t.h})],h.prototype,`min`,void 0),i.t([t.m({converter:t.h})],h.prototype,`max`,void 0),i.t([t.m({converter:f.a})],h.prototype,`step`,void 0),i.t([t.m],h.prototype,`orientation`,void 0),i.t([t.m({attribute:`aria-start-label`})],h.prototype,`ariaStartLabel`,void 0),i.t([t.m({attribute:`aria-end-label`})],h.prototype,`ariaEndLabel`,void 0),i.t([t.m({mode:`boolean`})],h.prototype,`markers`,void 0),i.t([t.m],h.prototype,`connotation`,void 0),i.t([t.m({mode:`boolean`})],h.prototype,`pin`,void 0),i.t([t.A],h.prototype,`valueTextFormatter`,void 0),i.t([t.A],h.prototype,`_draggingThumb`,void 0),i.t([t.A],h.prototype,`_visiblyFocusedThumb`,void 0),i.t([t.A],h.prototype,`_hoveredThumb`,void 0),i.t([t.A],h.prototype,`_startThumbCss`,void 0),i.t([t.A],h.prototype,`_endThumbCss`,void 0),i.t([t.A],h.prototype,`_selectedRangeCss`,void 0);var g=e=>({_visiblyFocusedThumb:t})=>o.t(`thumb-container`,[`focus-visible`,t===e]),_=t.u(`range-slider`,h,e=>{let i=e.tagFor(u.i);return t.p` <template
 		@mousedown="${(e,t)=>e._onMouseDown(t.event)}"
 	>
-		<div class="${g} ${e=>e.orientation}">
+		<div
+			class="${e=>o.t(`control`,[`disabled`,e.disabled],[`connotation-${e.connotation}`,!!e.connotation])} ${e=>e.orientation}"
+		>
 			<div class="positioning-region">
 				<div ${n.t(`_trackEl`)} class="track">
 					<div class="track-start" style="${e=>e._selectedRangeCss}"></div>
-					${r.t(e=>e.markers,t.p`${e=>f.n(e.orientation===o.t.horizontal,Math.floor((e.max-e.min)/e.step))}`)}
+					${r.t(e=>e.markers,t.p`${e=>f.n(e.orientation===a.t.horizontal,Math.floor((e.max-e.min)/e.step))}`)}
 				</div>
 				<div
 					id="start-thumb"
 					${n.t(`_startThumbEl`)}
-					class="${_(`start`)}"
+					class="${g(`start`)}"
 					style="${e=>e._startThumbCss}"
 					role="slider"
 					tabindex="${e=>e.disabled?null:0}"
@@ -28,7 +30,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 					alternate
 					:anchor="${e=>e._startThumbEl}"
 					:open=${e=>e._isThumbPopupOpen(`start`)}
-					:placementStrategy=${e=>e.orientation===o.t.horizontal?d.r.AutoPlacementHorizontal:d.r.AutoPlacementVertical}
+					:placementStrategy=${e=>e.orientation===a.t.horizontal?u.r.AutoPlacementHorizontal:u.r.AutoPlacementVertical}
 					animation-frame
 					exportparts="vvd-theme-alternate"
 					aria-hidden="true"
@@ -38,7 +40,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 				<div
 					id="end-thumb"
 					${n.t(`_endThumbEl`)}
-					class="${_(`end`)}"
+					class="${g(`end`)}"
 					style="${e=>e._endThumbCss}"
 					role="slider"
 					tabindex="${e=>e.disabled?null:0}"
@@ -56,7 +58,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 					alternate
 					:anchor="${e=>e._endThumbEl}"
 					:open=${e=>e._isThumbPopupOpen(`end`)}
-					:placementStrategy=${e=>e.orientation===o.t.horizontal?d.r.AutoPlacementHorizontal:d.r.AutoPlacementVertical}
+					:placementStrategy=${e=>e.orientation===a.t.horizontal?u.r.AutoPlacementHorizontal:u.r.AutoPlacementVertical}
 					animation-frame
 					exportparts="vvd-theme-alternate"
 					aria-hidden="true"
@@ -65,4 +67,4 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 				</${i}>`)}
 			</div>
 		</div>
-	</template>`},[d.t],{styles:p,shadowOptions:{delegatesFocus:!0}});t.d(v)();
+	</template>`},[u.t],{styles:p,shadowOptions:{delegatesFocus:!0}});t.d(_)();