@vonage/vivid 5.4.0 → 5.6.0

package/package.json

@@ -1,9 +1,22 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.4.0",
+  "version": "5.6.0",
+  "homepage": "https://vivid.deno.dev",
+  "bugs": {
+    "url": "https://github.com/Vonage/vivid-3/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vonage/vivid-3",
+    "directory": "libs/components"
+  },
+  "license": "Apache-2.0",
+  "sideEffects": [
+    "./*/index.js",
+    "./*/index.cjs",
+    "*.css"
+  ],
   "type": "module",
-  "module": "./index.js",
-  "main": "./index.cjs",
   "exports": {
     ".": {
       "types": "./index.d.ts",
@@ -22,91 +35,92 @@
     },
     "./*.css": "./*.css"
   },
-  "sideEffects": [
-    "./*/index.js",
-    "./*/index.cjs",
-    "*.css"
-  ],
-  "customElements": "custom-elements.json",
-  "homepage": "https://vivid.deno.dev",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/vonage/vivid-3",
-    "directory": "libs/components"
-  },
-  "bugs": {
-    "url": "https://github.com/Vonage/vivid-3/issues"
-  },
-  "license": "Apache-2.0",
-  "scripts": {
-    "prebuild": "cem analyze --config ./cem.config.mjs",
-    "build": "vite build && vite build -c ./vite.config.bundled.ts",
-    "postbuild": "api-extractor run -c ./dist/api-extractor.json && tsx scripts/copyPackageJson.ts",
-    "dev": "WATCH_MODE=true vite build -w -c ./vite.config.ts",
-    "dev:bundled": "WATCH_MODE=true vite build -w -c ./vite.config.bundled.ts",
-    "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:watch": "vitest --watch",
-    "test:coverage": "vitest run --coverage",
-    "e2e": "playwright test",
-    "e2e:ui": "playwright test --ui",
-    "e2e:docker": "PW_TEST_CONNECT_WS_ENDPOINT=ws://0.0.0.0:3000/ playwright test",
-    "e2e:docker:ui": "PW_TEST_CONNECT_WS_ENDPOINT=ws://0.0.0.0:3000/ playwright test --ui",
-    "typecheck": "tsc --noEmit"
-  },
+  "main": "./index.cjs",
+  "module": "./index.js",
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
-    "@microsoft/fast-element": "^2.7.0",
+    "@microsoft/fast-element": "^2.8.3",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "date-fns": "^3.0.0",
-    "vanilla-colorful": "^0.7.2",
+    "dompurify": "^3.3.0",
     "prosemirror-commands": "^1.7.1",
+    "prosemirror-dropcursor": "^1.8.2",
+    "prosemirror-gapcursor": "^1.3.2",
+    "prosemirror-history": "^1.4.1",
     "prosemirror-keymap": "^1.2.3",
     "prosemirror-model": "^1.25.4",
     "prosemirror-schema-basic": "^1.2.3",
     "prosemirror-state": "^1.4.4",
+    "prosemirror-transform": "^1.10.5",
     "prosemirror-view": "^1.40.1",
     "ramda": "^0.32.0",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.0",
+    "vanilla-colorful": "^0.7.2"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.52.9",
+    "@custom-elements-manifest/analyzer": "^0.5.7",
+    "@microsoft/api-extractor": "^7.55.0",
     "@microsoft/eslint-config-fast-dna": "^2.1.0",
-    "@playwright/test": "1.48.2",
-    "@repo/cem-analyzer-plugins": "*",
-    "@repo/consts": "*",
-    "@repo/eslint-config": "*",
-    "@repo/eslint-plugin-repo": "*",
-    "@repo/shared": "*",
-    "@repo/stylelint-config": "*",
-    "@repo/styles": "*",
-    "@repo/typescript-config": "*",
-    "@repo/vitest-config": "*",
-    "video.js": "^8.23.3",
-    "@testing-library/dom": "^8.18.1",
+    "@playwright/test": "1.57.0",
+    "@testing-library/dom": "^8.20.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "18.19.130",
+    "@types/jsdom": "^21.1.7",
+    "@types/markdown-it": "^13.0.9",
+    "@types/node": "^20.19.25",
+    "@types/ramda": "^0.30.2",
     "@types/uuid": "^10.0.0",
-    "@vonage/vivid-figma-tokens": "github:vonage/vivid-figma-tokens#v1.4.0",
     "cem-plugin-async-function": "^0.0.5",
     "cem-plugin-jsdoc-example": "^0.0.9",
     "cem-plugin-jsdoc-function": "^0.0.5",
     "cem-plugin-readonly": "^0.0.5",
+    "concurrently": "^9.2.1",
     "dialog-polyfill": "^0.5.6",
     "element-internals-polyfill": "^1.3.13",
-    "esbuild": "0.23.0",
-    "jsdom": "^23.0.0",
+    "http-server": "^14.1.1",
+    "jsdom": "^23.2.0",
     "markdown-it": "^13.0.2",
-    "playwright": "1.48.2",
-    "sass": "^1.89.2",
+    "playwright": "1.57.0",
+    "sass": "^1.94.2",
+    "tsx": "^4.20.6",
+    "typescript": "5.9.3",
+    "video.js": "^8.23.4",
+    "vite": "^5.4.18",
+    "vite-plugin-dts": "~2.3.0",
     "vite-plugin-static-copy": "^1.0.6",
-    "vitest": "^2.1.8",
+    "vitest": "^3.2.4",
     "vitest-axe": "^0.1.0",
     "vitest-fetch-mock": "^0.4.5",
     "wait-on": "^8.0.5",
-    "concurrently": "^9.2.0"
+    "@repo/cem-analyzer-plugins": "1.0.0",
+    "@repo/consts": "1.0.0",
+    "@repo/eslint-config": "1.0.0",
+    "@repo/eslint-plugin-repo": "1.0.0",
+    "@repo/shared": "1.0.0",
+    "@repo/stylelint-config": "1.0.0",
+    "@repo/styles": "1.0.0",
+    "@repo/tools": "1.0.0",
+    "@repo/tokens": "1.0.0",
+    "@repo/typescript-config": "1.0.0",
+    "@repo/vitest-config": "1.0.0"
+  },
+  "customElements": "custom-elements.json",
+  "scripts": {
+    "prebuild": "cem analyze --config ./cem.config.mjs",
+    "build": "vite build && vite build -c ./vite.config.bundled.ts",
+    "postbuild": "api-extractor run -c ./dist/api-extractor.json && move-manifest-to-dist .",
+    "dev": "WATCH_MODE=true vite build -w -c ./vite.config.ts",
+    "dev:bundled": "WATCH_MODE=true vite build -w -c ./vite.config.bundled.ts",
+    "e2e": "playwright test",
+    "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",
+    "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:coverage": "vitest run --coverage",
+    "test:watch": "vitest --watch",
+    "typecheck": "tsc --noEmit"
   }
 }

package/pagination/definition.cjs

@@ -61,10 +61,12 @@ class Pagination extends localized.Localized(vividElement.VividElement) {
         if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
           if (i > 1 && i < MAX_DIGITS_AND_PLACEHOLDERS - 2)
             return this.selectedIndex + (i - 2);
+          /* v8 ignore else -- @preserve */
           if (i === 1 || i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return "...";
         }
         if (this.selectedIndex > this.total - 5) {
           if (i > 1) return this.total - (6 - i);
+          /* v8 ignore else -- @preserve */
           if (i === 1) return "...";
         }
       }

package/pagination/definition.js

@@ -57,10 +57,12 @@ class Pagination extends Localized(VividElement) {
         if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
           if (i > 1 && i < MAX_DIGITS_AND_PLACEHOLDERS - 2)
             return this.selectedIndex + (i - 2);
+          /* v8 ignore else -- @preserve */
           if (i === 1 || i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return "...";
         }
         if (this.selectedIndex > this.total - 5) {
           if (i > 1) return this.total - (6 - i);
+          /* v8 ignore else -- @preserve */
           if (i === 1) return "...";
         }
       }

package/pagination/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const h=require("../bundled/definition3.cjs"),s=require("../bundled/vivid-element.cjs"),m=require("../bundled/localized.cjs"),l=require("../bundled/enums.cjs"),g=require("../bundled/ref.cjs"),I=require("../bundled/children.cjs"),z=require("../bundled/repeat.cjs"),y=require("../bundled/slotted.cjs"),b=require("../bundled/when.cjs"),w=require("../bundled/class-names.cjs"),S=".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";var B=Object.defineProperty,_=Object.getOwnPropertyDescriptor,r=(i,e,t,o)=>{for(var n=o>1?void 0:o?_(e,t):e,c=i.length-1,d;c>=0;c--)(d=i[c])&&(n=(o?d(e,t,n):d(n))||n);return o&&n&&B(e,t,n),n};const p=7,f={fromView:i=>parseInt(i,10),toView:i=>i.toString()};class a extends m.Localized(s.VividElement){constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener("tabpressed",e=>{const{value:t,shiftKey:o}=e.detail,n=this.paginationButtons.findIndex($=>Number($.label)===t),c=o?-1:1,d=n+c;if(d<0)return this.prevButton.focus();if(d>this.paginationButtons.length-1)return this.nextButton.focus();this.paginationButtons&&this.paginationButtons[n+c].focus()})}get pagesList(){return new Array(this.total<p?this.total:p).fill(0).map((e,t,o)=>{if(t===0)return 1;if(t===o.length-1)return this.total;if(this.selectedIndex!==void 0&&this.total>p){if(this.selectedIndex<4&&t===p-2)return"...";if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<p-2)return this.selectedIndex+(t-2);if(t===1||t===p-2)return"..."}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return"..."}}return t+1})}totalChanged(e,t){if(t<0){this.total=0;return}this.#t()}selectedIndexChanged(e,t){e!==void 0&&(this.$emit("pagination-change",{selectedIndex:t,total:this.total,oldIndex:e}),this.#t())}paginationButtonsChanged(e,t){t.forEach(o=>{o.shadowRoot.querySelector("button").setAttribute("part","button")})}get#e(){return Math.max(0,Math.min(this.selectedIndex??0,this.total-1))}#t(){this.selectedIndex!==this.#e&&window.queueMicrotask(()=>{this.selectedIndex!==this.#e&&(this.selectedIndex=this.#e)})}}r([s.attr],a.prototype,"size",2);r([s.attr],a.prototype,"shape",2);r([s.observable],a.prototype,"paginationButtons",2);r([s.observable],a.prototype,"prevButton",2);r([s.observable],a.prototype,"nextButton",2);r([s.attr({attribute:"nav-icons",mode:"boolean"})],a.prototype,"navIcons",2);r([s.volatile],a.prototype,"pagesList",1);r([s.attr({mode:"reflect",converter:f})],a.prototype,"total",2);r([s.attr({mode:"reflect",converter:f,attribute:"selected-index"})],a.prototype,"selectedIndex",2);const P=[l.Size.SuperCondensed,l.Size.Condensed,l.Size.Normal],L=[l.Shape.Rounded,l.Shape.Pill],x=(i,{parent:e})=>e.selectedIndex=Number(i)-1,E=(i,{event:e,parent:t})=>{(e.key===" "||e.key==="Enter")&&x(i,{parent:t}),e.key==="Tab"&&e.target.dispatchEvent(new CustomEvent("tabpressed",{detail:{value:i,shiftKey:e.shiftKey},bubbles:!0,composed:!0}))},q=i=>w.classNames("control");function C(i,{parent:e}){return e.selectedIndex===Number(i)-1?"filled":"ghost"}const D=i=>s.html` ${b.when(e=>e!=="...",s.html`
+"use strict";const h=require("../bundled/definition3.cjs"),s=require("../bundled/vivid-element.cjs"),m=require("../bundled/localized.cjs"),l=require("../bundled/enums.cjs"),g=require("../bundled/ref.cjs"),I=require("../bundled/children.cjs"),z=require("../bundled/repeat.cjs"),y=require("../bundled/slotted.cjs"),b=require("../bundled/when.cjs"),w=require("../bundled/class-names.cjs"),S=".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";var B=Object.defineProperty,_=Object.getOwnPropertyDescriptor,r=(i,e,t,o)=>{for(var n=o>1?void 0:o?_(e,t):e,c=i.length-1,d;c>=0;c--)(d=i[c])&&(n=(o?d(e,t,n):d(n))||n);return o&&n&&B(e,t,n),n};const p=7,f={fromView:i=>parseInt(i,10),toView:i=>i.toString()};class a extends m.Localized(s.VividElement){constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener("tabpressed",e=>{const{value:t,shiftKey:o}=e.detail,n=this.paginationButtons.findIndex($=>Number($.label)===t),c=o?-1:1,d=n+c;if(d<0)return this.prevButton.focus();if(d>this.paginationButtons.length-1)return this.nextButton.focus();this.paginationButtons&&this.paginationButtons[n+c].focus()})}get pagesList(){return new Array(this.total<p?this.total:p).fill(0).map((e,t,o)=>{if(t===0)return 1;if(t===o.length-1)return this.total;if(this.selectedIndex!==void 0&&this.total>p){if(this.selectedIndex<4&&t===p-2)return"...";if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<p-2)return this.selectedIndex+(t-2);/* v8 ignore else -- @preserve */if(t===1||t===p-2)return"..."}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);/* v8 ignore else -- @preserve */if(t===1)return"..."}}return t+1})}totalChanged(e,t){if(t<0){this.total=0;return}this.#t()}selectedIndexChanged(e,t){e!==void 0&&(this.$emit("pagination-change",{selectedIndex:t,total:this.total,oldIndex:e}),this.#t())}paginationButtonsChanged(e,t){t.forEach(o=>{o.shadowRoot.querySelector("button").setAttribute("part","button")})}get#e(){return Math.max(0,Math.min(this.selectedIndex??0,this.total-1))}#t(){this.selectedIndex!==this.#e&&window.queueMicrotask(()=>{this.selectedIndex!==this.#e&&(this.selectedIndex=this.#e)})}}r([s.attr],a.prototype,"size",2);r([s.attr],a.prototype,"shape",2);r([s.observable],a.prototype,"paginationButtons",2);r([s.observable],a.prototype,"prevButton",2);r([s.observable],a.prototype,"nextButton",2);r([s.attr({attribute:"nav-icons",mode:"boolean"})],a.prototype,"navIcons",2);r([s.volatile],a.prototype,"pagesList",1);r([s.attr({mode:"reflect",converter:f})],a.prototype,"total",2);r([s.attr({mode:"reflect",converter:f,attribute:"selected-index"})],a.prototype,"selectedIndex",2);const P=[l.Size.SuperCondensed,l.Size.Condensed,l.Size.Normal],L=[l.Shape.Rounded,l.Shape.Pill],x=(i,{parent:e})=>e.selectedIndex=Number(i)-1,E=(i,{event:e,parent:t})=>{(e.key===" "||e.key==="Enter")&&x(i,{parent:t}),e.key==="Tab"&&e.target.dispatchEvent(new CustomEvent("tabpressed",{detail:{value:i,shiftKey:e.shiftKey},bubbles:!0,composed:!0}))},q=i=>w.classNames("control");function C(i,{parent:e}){return e.selectedIndex===Number(i)-1?"filled":"ghost"}const D=i=>s.html` ${b.when(e=>e!=="...",s.html`
 		<${i} class="vwc-pagination-button"
 			label="${e=>e}"
 			appearance="${C}"

package/pagination/index.js

@@ -43,10 +43,12 @@ class a extends P(w) {
         if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
           if (t > 1 && t < d - 2)
             return this.selectedIndex + (t - 2);
+          /* v8 ignore else -- @preserve */
           if (t === 1 || t === d - 2) return "...";
         }
         if (this.selectedIndex > this.total - 5) {
           if (t > 1) return this.total - (6 - t);
+          /* v8 ignore else -- @preserve */
           if (t === 1) return "...";
         }
       }

package/progress-ring/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition15.cjs");e.registerProgressRing();
+"use strict";const e=require("../bundled/definition16.cjs");e.registerProgressRing();

package/progress-ring/index.js

@@ -1,2 +1,2 @@
-import { r } from "../bundled/definition15.js";
+import { r } from "../bundled/definition16.js";
 r();

package/radio/definition.cjs

@@ -85,6 +85,7 @@ class Radio extends withErrorText.WithErrorText(
    * @internal
    */
   readOnlyChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
     }
@@ -94,6 +95,7 @@ class Radio extends withErrorText.WithErrorText(
    */
   defaultCheckedChanged() {
     if (this.$fastController.isConnected && !this.dirtyChecked) {
+      /* v8 ignore else -- @preserve */
       if (!this.isInsideRadioGroup()) {
         this.checked = this.defaultChecked;
         this.dirtyChecked = false;
@@ -115,11 +117,13 @@ class Radio extends withErrorText.WithErrorText(
     super.connectedCallback();
     fastElement.Updates.enqueue(this.validate);
     if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
+      /* v8 ignore else -- @preserve */
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
       }
     }
     if (this.defaultChecked) {
+      /* v8 ignore else -- @preserve */
       if (!this.dirtyChecked) {
         if (!this.isInsideRadioGroup()) {
           this.checked = this.defaultChecked;

package/radio/definition.js

@@ -81,6 +81,7 @@ class Radio extends WithErrorText(
    * @internal
    */
   readOnlyChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
     }
@@ -90,6 +91,7 @@ class Radio extends WithErrorText(
    */
   defaultCheckedChanged() {
     if (this.$fastController.isConnected && !this.dirtyChecked) {
+      /* v8 ignore else -- @preserve */
       if (!this.isInsideRadioGroup()) {
         this.checked = this.defaultChecked;
         this.dirtyChecked = false;
@@ -111,11 +113,13 @@ class Radio extends WithErrorText(
     super.connectedCallback();
     Updates.enqueue(this.validate);
     if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
+      /* v8 ignore else -- @preserve */
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
       }
     }
     if (this.defaultChecked) {
+      /* v8 ignore else -- @preserve */
       if (!this.dirtyChecked) {
         if (!this.isInsideRadioGroup()) {
           this.checked = this.defaultChecked;

package/radio/index.cjs

@@ -1 +1 @@
-"use strict";const i=require("../bundled/definition17.cjs");i.registerRadio();
+"use strict";const i=require("../bundled/definition18.cjs");i.registerRadio();

package/radio/index.js

@@ -1,2 +1,2 @@
-import { r } from "../bundled/definition17.js";
+import { r } from "../bundled/definition18.js";
 r();

package/radio-group/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("../bundled/vivid-element.cjs"),c=require("../bundled/definition17.cjs"),f=require("../bundled/mixins.cjs"),n=require("../bundled/key-codes.cjs"),g=require("../bundled/aria.cjs"),p=require("../bundled/delegates-aria.cjs"),b=require("../bundled/when.cjs"),u=require("../bundled/slotted.cjs"),v=".base{display:flex;flex-direction:column;gap:8px;--_low-ink-color: var(--vvd-color-neutral-600)}.positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}fieldset{display:block;padding:0;border:none;margin:0}legend{padding:0;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px}";var y=Object.defineProperty,s=(d,t,e,i)=>{for(var o=void 0,l=d.length-1,h;l>=0;l--)(h=d[l])&&(o=h(t,e,o)||o);return o&&y(t,e,o),o};class a extends f.WithFeedback(r.VividElement){constructor(){super(...arguments),this.errorValidationMessage="",this.orientation=g.Orientation.horizontal,this.slottedRadioButtons=[],this.radioErrorHandler=t=>{const e=t.target;this.errorValidationMessage=e.errorValidationMessage||""},this.radioChangeHandler=t=>{const e=t.target;e.checked&&(this.slottedRadioButtons?.forEach(i=>{i!==e&&(i.checked=!1)}),this.value=e.value,this.#e(e)),t.stopPropagation()},this.moveToRadioByIndex=(t,e)=>{const i=t[e];!this.isInsideToolbar&&!i.readOnly&&(i.checked=!0),i.focus()},this.moveRightOffGroup=()=>{this.nextElementSibling?.focus()},this.moveLeftOffGroup=()=>{this.previousElementSibling?.focus()},this.moveRight=t=>{const e=t.target,i=this.#t;let o=0;if(o=i.indexOf(e)+1,o===i.length&&this.isInsideToolbar&&t.key===n.keyArrowRight){this.moveRightOffGroup();return}o===i.length&&(o=0),this.moveToRadioByIndex(i,o)},this.moveLeft=t=>{const e=t.target,i=this.#t;let o=i.indexOf(e)-1;if(this.isInsideToolbar&&t.key===n.keyArrowLeft&&o<0){this.moveLeftOffGroup();return}o=o<0?i.length-1:o,this.moveToRadioByIndex(i,o)},this.keydownHandler=t=>{switch(t.key){case n.keyEnter:this.checkFocusedRadio(t.target);break;case n.keyArrowRight:case n.keyArrowDown:this.moveRight(t);break;case n.keyArrowLeft:case n.keyArrowUp:this.moveLeft(t);break;default:return!0}}}requiredChanged(){this.slottedRadioButtons?.forEach(t=>{this.required?t.required=!0:t.required=!1})}readOnlyChanged(){this.slottedRadioButtons?.forEach(t=>{this.readOnly?t.readOnly=!0:t.readOnly=!1})}disabledChanged(){this.slottedRadioButtons?.forEach(t=>{this.disabled?t.disabled=!0:t.disabled=!1})}nameChanged(){this.slottedRadioButtons?.forEach(t=>{t.setAttribute("name",this.name)})}valueChanged(){this.slottedRadioButtons?.forEach(t=>{t.value===this.value&&(t.checked=!0)}),this.$emit("change")}handleSlotChange(){this.errorText&&this.slottedRadioButtons?.forEach(t=>{t.errorText=this.errorText})}errorTextChanged(t,e){e?this.errorValidationMessage=e:this.errorValidationMessage=""}get#t(){return this.slottedRadioButtons?.filter(t=>!t.disabled)}slottedRadioButtonsChanged(){this.slottedRadioButtons&&this.slottedRadioButtons.length>0&&this.setupRadioButtons()}get isInsideToolbar(){return!!this.closest('[role="toolbar"]')}connectedCallback(){super.connectedCallback(),this.setupRadioButtons()}disconnectedCallback(){this.slottedRadioButtons?.forEach(t=>{t.removeEventListener("change",this.radioChangeHandler),t.removeEventListener("invalid",this.radioErrorHandler)})}setupRadioButtons(){let t=!1;for(const e of this.slottedRadioButtons)this.name!==void 0&&e.setAttribute("name",this.name),this.disabled&&(e.disabled=!0),this.readOnly&&(e.readOnly=!0),this.required&&(e.required=!0),this.value&&this.value===e.value?(e.checked=!0,this.#e(e),t=!0):e.checked=!1,e.addEventListener("change",this.radioChangeHandler),e.addEventListener("invalid",this.radioErrorHandler);if(this.value===void 0&&this.slottedRadioButtons?.length>0){const e=this.slottedRadioButtons?.filter(i=>i.hasAttribute("checked"));if(e.length>0&&!t){const i=e[e.length-1];i.checked=!0,this.#e(i)}else this.#e(this.slottedRadioButtons[0])}}focusInHandler(t){this.#e(t.target)}#e(t){t.setAttribute("tabindex","0");for(const e of this.slottedRadioButtons)e!==t&&e.setAttribute("tabindex","-1")}checkFocusedRadio(t){t.readOnly||(t.checked=!0)}}s([r.attr],a.prototype,"label");s([r.attr({attribute:"required",mode:"boolean"})],a.prototype,"required");s([r.attr({attribute:"readonly",mode:"boolean"})],a.prototype,"readOnly");s([r.attr({attribute:"disabled",mode:"boolean"})],a.prototype,"disabled");s([r.attr],a.prototype,"name");s([r.attr],a.prototype,"value");s([r.observable],a.prototype,"errorValidationMessage");s([r.attr({attribute:"error-text"})],a.prototype,"errorText");s([r.attr],a.prototype,"orientation");s([r.observable],a.prototype,"slottedRadioButtons");const R=d=>{const t=d.tagFor(c.Radio,!0);return r.html`
+"use strict";const r=require("../bundled/vivid-element.cjs"),c=require("../bundled/definition18.cjs"),f=require("../bundled/mixins.cjs"),n=require("../bundled/key-codes.cjs"),g=require("../bundled/aria.cjs"),p=require("../bundled/delegates-aria.cjs"),b=require("../bundled/when.cjs"),u=require("../bundled/slotted.cjs"),v=".base{display:flex;flex-direction:column;gap:8px;--_low-ink-color: var(--vvd-color-neutral-600)}.positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}fieldset{display:block;padding:0;border:none;margin:0}legend{padding:0;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px}";var y=Object.defineProperty,s=(d,t,e,i)=>{for(var o=void 0,l=d.length-1,h;l>=0;l--)(h=d[l])&&(o=h(t,e,o)||o);return o&&y(t,e,o),o};class a extends f.WithFeedback(r.VividElement){constructor(){super(...arguments),this.errorValidationMessage="",this.orientation=g.Orientation.horizontal,this.slottedRadioButtons=[],this.radioErrorHandler=t=>{const e=t.target;this.errorValidationMessage=e.errorValidationMessage||""},this.radioChangeHandler=t=>{const e=t.target;e.checked&&(this.slottedRadioButtons?.forEach(i=>{i!==e&&(i.checked=!1)}),this.value=e.value,this.#e(e)),t.stopPropagation()},this.moveToRadioByIndex=(t,e)=>{const i=t[e];!this.isInsideToolbar&&!i.readOnly&&(i.checked=!0),i.focus()},this.moveRightOffGroup=()=>{this.nextElementSibling?.focus()},this.moveLeftOffGroup=()=>{this.previousElementSibling?.focus()},this.moveRight=t=>{const e=t.target,i=this.#t;let o=0;if(o=i.indexOf(e)+1,o===i.length&&this.isInsideToolbar&&t.key===n.keyArrowRight){this.moveRightOffGroup();return}o===i.length&&(o=0),this.moveToRadioByIndex(i,o)},this.moveLeft=t=>{const e=t.target,i=this.#t;let o=i.indexOf(e)-1;if(this.isInsideToolbar&&t.key===n.keyArrowLeft&&o<0){this.moveLeftOffGroup();return}o=o<0?i.length-1:o,this.moveToRadioByIndex(i,o)},this.keydownHandler=t=>{switch(t.key){case n.keyEnter:this.checkFocusedRadio(t.target);break;case n.keyArrowRight:case n.keyArrowDown:this.moveRight(t);break;case n.keyArrowLeft:case n.keyArrowUp:this.moveLeft(t);break;default:return!0}}}requiredChanged(){this.slottedRadioButtons?.forEach(t=>{this.required?t.required=!0:t.required=!1})}readOnlyChanged(){this.slottedRadioButtons?.forEach(t=>{this.readOnly?t.readOnly=!0:t.readOnly=!1})}disabledChanged(){this.slottedRadioButtons?.forEach(t=>{this.disabled?t.disabled=!0:t.disabled=!1})}nameChanged(){this.slottedRadioButtons?.forEach(t=>{t.setAttribute("name",this.name)})}valueChanged(){this.slottedRadioButtons?.forEach(t=>{t.value===this.value&&(t.checked=!0)}),this.$emit("change")}handleSlotChange(){this.errorText&&this.slottedRadioButtons?.forEach(t=>{t.errorText=this.errorText})}errorTextChanged(t,e){e?this.errorValidationMessage=e:this.errorValidationMessage=""}get#t(){return this.slottedRadioButtons?.filter(t=>!t.disabled)}slottedRadioButtonsChanged(){this.slottedRadioButtons&&this.slottedRadioButtons.length>0&&this.setupRadioButtons()}get isInsideToolbar(){return!!this.closest('[role="toolbar"]')}connectedCallback(){super.connectedCallback(),this.setupRadioButtons()}disconnectedCallback(){this.slottedRadioButtons?.forEach(t=>{t.removeEventListener("change",this.radioChangeHandler),t.removeEventListener("invalid",this.radioErrorHandler)})}setupRadioButtons(){let t=!1;for(const e of this.slottedRadioButtons)this.name!==void 0&&e.setAttribute("name",this.name),this.disabled&&(e.disabled=!0),this.readOnly&&(e.readOnly=!0),this.required&&(e.required=!0),this.value&&this.value===e.value?(e.checked=!0,this.#e(e),t=!0):e.checked=!1,e.addEventListener("change",this.radioChangeHandler),e.addEventListener("invalid",this.radioErrorHandler);if(this.value===void 0&&this.slottedRadioButtons?.length>0){const e=this.slottedRadioButtons?.filter(i=>i.hasAttribute("checked"));if(e.length>0&&!t){const i=e[e.length-1];i.checked=!0,this.#e(i)}else this.#e(this.slottedRadioButtons[0])}}focusInHandler(t){this.#e(t.target)}#e(t){t.setAttribute("tabindex","0");for(const e of this.slottedRadioButtons)e!==t&&e.setAttribute("tabindex","-1")}checkFocusedRadio(t){t.readOnly||(t.checked=!0)}}s([r.attr],a.prototype,"label");s([r.attr({attribute:"required",mode:"boolean"})],a.prototype,"required");s([r.attr({attribute:"readonly",mode:"boolean"})],a.prototype,"readOnly");s([r.attr({attribute:"disabled",mode:"boolean"})],a.prototype,"disabled");s([r.attr],a.prototype,"name");s([r.attr],a.prototype,"value");s([r.observable],a.prototype,"errorValidationMessage");s([r.attr({attribute:"error-text"})],a.prototype,"errorText");s([r.attr],a.prototype,"orientation");s([r.observable],a.prototype,"slottedRadioButtons");const R=d=>{const t=d.tagFor(c.Radio,!0);return r.html`
 		<template
 			@keydown="${(e,i)=>e.keydownHandler(i.event)}"
 			@focusin="${(e,i)=>e.focusInHandler(i.event)}"

package/radio-group/index.js

@@ -1,5 +1,5 @@
 import { V as p, a as r, o as f, h, c as b, d as v } from "../bundled/vivid-element.js";
-import { R as m, a as y } from "../bundled/definition17.js";
+import { R as m, a as y } from "../bundled/definition18.js";
 import { W as R, f as k } from "../bundled/mixins.js";
 import { g as u, h as c, c as B, b as x, f as O } from "../bundled/key-codes.js";
 import { O as g } from "../bundled/aria.js";

package/range-slider/definition.cjs

@@ -105,7 +105,8 @@ class RangeSlider extends localized.Localized(
       } else if (e.key === fastWebUtilities.keyEnd) {
         e.preventDefault();
         this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].max}` });
-      } else if (!e.shiftKey) {
+      } else {
+        if (e.shiftKey) return;
         switch (e.key) {
           case keyCodes.keyArrowRight:
           case fastWebUtilities.keyArrowDown:

package/range-slider/definition.js

@@ -101,7 +101,8 @@ class RangeSlider extends Localized(
       } else if (e.key === keyEnd) {
         e.preventDefault();
         this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].max}` });
-      } else if (!e.shiftKey) {
+      } else {
+        if (e.shiftKey) return;
         switch (e.key) {
           case keyArrowRight:
           case keyArrowDown:

package/range-slider/index.cjs

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

package/range-slider/index.js

@@ -43,7 +43,8 @@ class i extends R(
         e.preventDefault(), this.#e({ [t]: `${this.#n[t].min}` });
       else if (e.key === w)
         e.preventDefault(), this.#e({ [t]: `${this.#n[t].max}` });
-      else if (!e.shiftKey)
+      else {
+        if (e.shiftKey) return;
         switch (e.key) {
           case S:
           case F:
@@ -54,6 +55,7 @@ class i extends R(
             e.preventDefault(), this.#g(t, g.Decrement);
             break;
         }
+      }
     }, this.#o = (e) => {
       if (this.disabled || e.defaultPrevented || !this._draggingThumb)
         return;