@vonage/vivid 5.19.0 → 5.20.0

package/number-field/index.js

@@ -1,8 +1,8 @@
 import { t as e } from "../bundled/localized.js";
-import { A as t, D as n, c as r, d as i, f as a, s as o, t as s, u as c } from "../bundled/vivid-element.js";
-import { t as l } from "../bundled/ref.js";
-import { t as u } from "../bundled/when.js";
-import { t as d } from "../bundled/slotted.js";
+import { A as t, M as n, d as r, h as i, m as a, p as o, t as s, u as c } from "../bundled/vivid-element.js";
+import { t as l } from "../bundled/slotted.js";
+import { t as u } from "../bundled/ref.js";
+import { t as d } from "../bundled/when.js";
 import { n as f, r as p } from "../bundled/definition.js";
 import { i as m } from "../bundled/enums.js";
 import { t as h } from "../bundled/decorate.js";
@@ -17,7 +17,7 @@ import { i as C, t as w } from "../bundled/key-codes.js";
 import { n as T, t as E } from "../bundled/delegates-aria.js";
 import { n as D } from "../bundled/form-associated.js";
 import { i as O, t as k } from "../bundled/definition6.js";
-import { a as A, t as j } from "../bundled/mixins.js";
+import { r as A, t as j } from "../bundled/mixins.js";
 import { t as M } from "../bundled/definition11.js";
 import { t as N } from "../bundled/definition19.js";
 import { t as P } from "../bundled/divider.js";
@@ -83,7 +83,7 @@ var R = (e) => {
 		L(this, I.down);
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.proxy.setAttribute("type", "number"), this.validate(), this._presentationValue = this.#e(this.value), this.autofocus && t.enqueue(() => {
+		super.connectedCallback(), this.proxy.setAttribute("type", "number"), this.validate(), this._presentationValue = this.#e(this.value), this.autofocus && n.enqueue(() => {
 			this.focus();
 		});
 	}
@@ -104,15 +104,15 @@ var R = (e) => {
 		return !0;
 	}
 };
-h([c({
+h([a({
 	attribute: "readonly",
 	mode: "boolean"
-})], H.prototype, "readOnly", void 0), h([c({ mode: "boolean" })], H.prototype, "autofocus", void 0), h([c], H.prototype, "placeholder", void 0), h([c], H.prototype, "list", void 0), h([c({ converter: i })], H.prototype, "maxlength", void 0), h([c({ converter: i })], H.prototype, "minlength", void 0), h([c({ converter: i })], H.prototype, "size", void 0), h([c()], H.prototype, "scale", void 0), h([c({ converter: i })], H.prototype, "step", void 0), h([c({ converter: i })], H.prototype, "max", void 0), h([c({ converter: i })], H.prototype, "min", void 0), h([n], H.prototype, "defaultSlottedNodes", void 0), h([n], H.prototype, "_presentationValue", void 0), h([n], H.prototype, "_updatedValueAnnouncement", void 0), h([c({ attribute: "increment-button-aria-label" })], H.prototype, "incrementButtonAriaLabel", void 0), h([c({ attribute: "decrement-button-aria-label" })], H.prototype, "decrementButtonAriaLabel", void 0), h([c], H.prototype, "appearance", void 0), h([c], H.prototype, "shape", void 0), h([c], H.prototype, "autoComplete", void 0);
+})], H.prototype, "readOnly", void 0), h([a({ mode: "boolean" })], H.prototype, "autofocus", void 0), h([a], H.prototype, "placeholder", void 0), h([a], H.prototype, "list", void 0), h([a({ converter: i })], H.prototype, "maxlength", void 0), h([a({ converter: i })], H.prototype, "minlength", void 0), h([a({ converter: i })], H.prototype, "size", void 0), h([a()], H.prototype, "scale", void 0), h([a({ converter: i })], H.prototype, "step", void 0), h([a({ converter: i })], H.prototype, "max", void 0), h([a({ converter: i })], H.prototype, "min", void 0), h([t], H.prototype, "defaultSlottedNodes", void 0), h([t], H.prototype, "_presentationValue", void 0), h([t], H.prototype, "_updatedValueAnnouncement", void 0), h([a({ attribute: "increment-button-aria-label" })], H.prototype, "incrementButtonAriaLabel", void 0), h([a({ attribute: "decrement-button-aria-label" })], H.prototype, "decrementButtonAriaLabel", void 0), h([a], H.prototype, "appearance", void 0), h([a], H.prototype, "shape", void 0), h([a], H.prototype, "autoComplete", void 0);
 //#endregion
 //#region src/lib/number-field/number-field.template.ts
 var U = ({ errorValidationMessage: e, disabled: t, value: n, readOnly: r, placeholder: i, appearance: a, shape: o, label: s, successText: c, scale: l }) => S(["error", !!e], ["disabled", t], ["has-value", !!n], ["readonly", r], ["placeholder", !!i], [`appearance-${a}`, !!a], [`shape-${o}`, !!o], ["no-label", !s], ["success", !!c], [`size-${l}`, !!l]);
 function W() {
-	return a` <label for="control" class="label">
+	return o` <label for="control" class="label">
 		${(e) => e.label}
 	</label>`;
 }
@@ -124,7 +124,7 @@ function K(e) {
 }
 function q(e) {
 	let t = e.tagFor(O), n = e.tagFor(P);
-	return a`
+	return o`
 		<div class="control-buttons" ?inert="${(e) => e.disabled || e.readOnly}">
 			<${t} id="subtract" icon="minus-line"
 				?disabled="${(e) => e.disabled || e.readOnly}"
@@ -148,13 +148,13 @@ function q(e) {
 }
 //#endregion
 //#region src/lib/number-field/index.ts
-r(o("number-field", H, (e) => {
+r(c("number-field", H, (e) => {
 	let t = e.tagFor(p);
-	return a`
+	return o`
 		<div class="base ${U}">
 			<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp}>
-				${u((e) => e.label, W())}
-				<slot name="contextual-help" ${d("_contextualHelpSlottedContent")}></slot>
+				${d((e) => e.label, W())}
+				<slot name="contextual-help" ${l("_contextualHelpSlottedContent")}></slot>
 			</div>
 			<div class="fieldset">
 				<div class="wrapper">
@@ -178,9 +178,8 @@ r(o("number-field", H, (e) => {
 						?spellcheck="${(e) => e.spellcheck}"
 						:value="${(e) => e._presentationValue}"
 						type="text"
-						aria-describedby="${(e) => e._feedbackDescribedBy}"
-						${T()}
-						${l("control")}
+						${T({ ariaDescribedBy: (e) => e._feedbackDescribedBy })}
+						${u("control")}
 					/>
 				</div>
 				${() => q(e)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.19.0",
+  "version": "5.20.0",
   "homepage": "https://vivid.vonage.com",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
@@ -40,7 +40,7 @@
   "module": "./index.js",
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@microsoft/fast-element": "2.8.3",
+    "@microsoft/fast-element": "^2.10.4",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "date-fns": "^4.1.0",
     "dompurify": "^3.4.2",
@@ -88,16 +88,16 @@
     "wait-on": "^8.0.5",
     "@repo/cem-analyzer-plugins": "1.0.0",
     "@repo/eslint-config": "1.0.0",
-    "@repo/eslint-plugin-repo": "1.0.0",
-    "@repo/metadata-extractor": "1.0.0",
     "@repo/shared": "1.0.0",
-    "@repo/styles": "1.0.0",
+    "@repo/eslint-plugin-repo": "1.0.0",
     "@repo/stylelint-config": "1.0.0",
     "@repo/tokens": "1.0.0",
-    "@repo/typescript-config": "1.0.0",
-    "@vonage/vivid-icons": "4.10.0",
+    "@repo/styles": "1.0.0",
+    "@repo/metadata-extractor": "1.0.0",
     "@repo/tools": "1.0.0",
-    "@repo/vitest-config": "1.0.0"
+    "@repo/typescript-config": "1.0.0",
+    "@repo/vitest-config": "1.0.0",
+    "@vonage/vivid-icons": "4.10.0"
   },
   "customElements": "custom-elements.json",
   "scripts": {

package/pagination/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition52.cjs");
+const require_definition = require("../unbundled/definition53.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/definition52.js";
+import { n as registerPagination, r as Pagination, t as paginationDefinition } from "../unbundled/definition53.js";
 export { Pagination as VwcPaginationElement, paginationDefinition, registerPagination };

package/pagination/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/slotted.cjs`),o=require(`../bundled/children.cjs`),s=require(`../bundled/enums.cjs`),c=require(`../bundled/decorate.cjs`),l=require(`../bundled/class-names.cjs`),u=require(`../bundled/definition6.cjs`);var d=`.control{justify-content:space-between;display:inline-flex}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{column-gap:4px;display:flex}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.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{text-align:center;align-self: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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.dots.size-condensed{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.dots.size-normal{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}`,f=7,p={fromView:e=>parseInt(e,10),toView:e=>e.toString()},m=class extends e.t(t.t){get pagesList(){return Array(this.total<f?this.total:f).fill(0).map((e,t,n)=>{if(t===0)return 1;if(t===n.length-1)return this.total;if(this.selectedIndex!==void 0&&this.total>f){if(this.selectedIndex<4&&t===f-2)return`...`;if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<f-2)return this.selectedIndex+(t-2);if(t===1||t===f-2)return`...`}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return`...`}}return t+1})}constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener(`tabpressed`,e=>{let{value:t,shiftKey:n}=e.detail,r=this.paginationButtons.findIndex(e=>Number(e.label)===t),i=n?-1:1,a=r+i;if(a<0)return this.prevButton.focus();if(a>this.paginationButtons.length-1)return this.nextButton.focus();this.paginationButtons&&this.paginationButtons[r+i].focus()})}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(e=>{e.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)})}};c.t([t.u],m.prototype,`size`,void 0),c.t([t.u],m.prototype,`shape`,void 0),c.t([t.D],m.prototype,`paginationButtons`,void 0),c.t([t.D],m.prototype,`prevButton`,void 0),c.t([t.D],m.prototype,`nextButton`,void 0),c.t([t.u({attribute:`nav-icons`,mode:`boolean`})],m.prototype,`navIcons`,void 0),c.t([t.O],m.prototype,`pagesList`,null),c.t([t.u({mode:`reflect`,converter:p})],m.prototype,`total`,void 0),c.t([t.u({mode:`reflect`,converter:p,attribute:`selected-index`})],m.prototype,`selectedIndex`,void 0);var h=[s.a.SuperCondensed,s.a.Condensed,s.a.Normal],g=[s.i.Rounded,s.i.Pill],_=(e,{parent:t})=>t.selectedIndex=Number(e)-1,v=(e,{event:t,parent:n})=>{(t.key===` `||t.key===`Enter`)&&_(e,{parent:n}),t.key===`Tab`&&t.target.dispatchEvent(new CustomEvent(`tabpressed`,{detail:{value:e,shiftKey:t.shiftKey},bubbles:!0,composed:!0}))},y=e=>l.t(`control`);function b(e,{parent:t}){return t.selectedIndex===Number(e)-1?`filled`:`ghost`}var x=e=>t.f` ${i.t(e=>e!==`...`,t.f`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/children.cjs`),a=require(`../bundled/ref.cjs`),o=require(`../bundled/when.cjs`),s=require(`../bundled/enums.cjs`),c=require(`../bundled/decorate.cjs`),l=require(`../bundled/class-names.cjs`),u=require(`../bundled/definition6.cjs`);var d=`.control{justify-content:space-between;display:inline-flex}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{column-gap:4px;display:flex}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.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{text-align:center;align-self: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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.dots.size-condensed{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.dots.size-normal{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}`,f=7,p={fromView:e=>parseInt(e,10),toView:e=>e.toString()},m=class extends e.t(t.t){get pagesList(){return Array(this.total<f?this.total:f).fill(0).map((e,t,n)=>{if(t===0)return 1;if(t===n.length-1)return this.total;if(this.selectedIndex!==void 0&&this.total>f){if(this.selectedIndex<4&&t===f-2)return`...`;if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<f-2)return this.selectedIndex+(t-2);if(t===1||t===f-2)return`...`}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return`...`}}return t+1})}constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener(`tabpressed`,e=>{let{value:t,shiftKey:n}=e.detail,r=this.paginationButtons.findIndex(e=>Number(e.label)===t),i=n?-1:1,a=r+i;if(a<0)return this.prevButton.focus();if(a>this.paginationButtons.length-1)return this.nextButton.focus();this.paginationButtons&&this.paginationButtons[r+i].focus()})}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(e=>{e.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)})}};c.t([t.m],m.prototype,`size`,void 0),c.t([t.m],m.prototype,`shape`,void 0),c.t([t.A],m.prototype,`paginationButtons`,void 0),c.t([t.A],m.prototype,`prevButton`,void 0),c.t([t.A],m.prototype,`nextButton`,void 0),c.t([t.m({attribute:`nav-icons`,mode:`boolean`})],m.prototype,`navIcons`,void 0),c.t([t.j],m.prototype,`pagesList`,null),c.t([t.m({mode:`reflect`,converter:p})],m.prototype,`total`,void 0),c.t([t.m({mode:`reflect`,converter:p,attribute:`selected-index`})],m.prototype,`selectedIndex`,void 0);var h=[s.a.SuperCondensed,s.a.Condensed,s.a.Normal],g=[s.i.Rounded,s.i.Pill],_=(e,{parent:t})=>t.selectedIndex=Number(e)-1,v=(e,{event:t,parent:n})=>{(t.key===` `||t.key===`Enter`)&&_(e,{parent:n}),t.key===`Tab`&&t.target.dispatchEvent(new CustomEvent(`tabpressed`,{detail:{value:e,shiftKey:t.shiftKey},bubbles:!0,composed:!0}))},y=e=>l.t(`control`);function b(e,{parent:t}){return t.selectedIndex===Number(e)-1?`filled`:`ghost`}var x=e=>t.p` ${o.t(e=>e!==`...`,t.p`
 		<${e} class="vwc-pagination-button"
 			label="${e=>e}"
 			appearance="${b}"
@@ -12,14 +12,14 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			@keydown="${v}">
 		</${e}>
 	`)}
-	${i.t(e=>e===`...`,t.f` <div
+	${o.t(e=>e===`...`,t.p` <div
 			class="dots size-${(e,{parent:t})=>S(t)}"
 			aria-hidden="true"
 		>
 			...
-		</div>`)}`,S=e=>!e.size||!h.includes(e.size)?s.a.SuperCondensed:e.size,C=e=>!e.shape||!g.includes(e.shape)?s.i.Rounded:e.shape,w=e=>`calc(var(--base-size) + ${String(e).length-1}ch)`,T=t.s(`pagination`,m,e=>{let i=e.tagFor(u.i),s=e.tagFor(u.i,!0),c=x(i);return t.f`
+		</div>`)}`,S=e=>!e.size||!h.includes(e.size)?s.a.SuperCondensed:e.size,C=e=>!e.shape||!g.includes(e.shape)?s.i.Rounded:e.shape,w=e=>`calc(var(--base-size) + ${String(e).length-1}ch)`,T=t.u(`pagination`,m,e=>{let o=e.tagFor(u.i),s=e.tagFor(u.i,!0),c=x(o);return t.p`
 	<div class="${y}">
-		<${i} class="prev-button" ${r.t(`prevButton`)}
+		<${o} class="prev-button" ${a.t(`prevButton`)}
 			label="${e=>e.navIcons?null:`Previous`}"
 			icon="${e=>e.navIcons?`chevron-left-line`:null}"
 			size="${S}"
@@ -27,11 +27,11 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			?disabled="${e=>e.total===0||e.selectedIndex===0}"
 			@click="${e=>e.selectedIndex!==void 0&&e.selectedIndex--}"
 			aria-label="${e=>e.locale.pagination.previousPageLabel}"
-		></${i}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${o.t({property:`paginationButtons`,filter:a.r(s)})}>
+		></${o}>
+		<div id="buttons-wrapper" class="buttons-wrapper" ${i.t({property:`paginationButtons`,filter:r.r(s)})}>
 			${n.n(e=>e.pagesList,c,{positioning:!0})}
 		</div>
-		<${i} class="next-button" ${r.t(`nextButton`)}
+		<${o} class="next-button" ${a.t(`nextButton`)}
 			label="${e=>e.navIcons?null:`Next`}"
 			icon="${e=>e.navIcons?`chevron-right-line`:null}"
 			size="${S}"
@@ -39,5 +39,5 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			?disabled="${e=>e.total===0||e.selectedIndex===e.total-1}"
 			@click="${e=>e.selectedIndex!==void 0&&e.selectedIndex++}"
 			aria-label="${e=>e.locale.pagination.nextPageLabel}"
-		></${i}>
-</div>`},[u.t],{styles:d});t.c(T)();
+		></${o}>
+</div>`},[u.t],{styles:d});t.d(T)();

package/pagination/index.js

@@ -1,10 +1,10 @@
 import { t as e } from "../bundled/localized.js";
-import { D as t, O as n, c as r, f as i, s as a, t as o, u as s } from "../bundled/vivid-element.js";
+import { A as t, d as n, j as r, m as i, p as a, t as o, u as s } from "../bundled/vivid-element.js";
 import { n as c } from "../bundled/repeat.js";
-import { t as l } from "../bundled/ref.js";
-import { t as u } from "../bundled/when.js";
-import { r as d } from "../bundled/slotted.js";
-import { t as f } from "../bundled/children.js";
+import { r as l } from "../bundled/slotted.js";
+import { t as u } from "../bundled/children.js";
+import { t as d } from "../bundled/ref.js";
+import { t as f } from "../bundled/when.js";
 import { a as p, i as m } from "../bundled/enums.js";
 import { t as h } from "../bundled/decorate.js";
 import { t as g } from "../bundled/class-names.js";
@@ -70,13 +70,13 @@ var y = ".control{justify-content:space-between;display:inline-flex}.control:not
 		});
 	}
 };
-h([s], S.prototype, "size", void 0), h([s], S.prototype, "shape", void 0), h([t], S.prototype, "paginationButtons", void 0), h([t], S.prototype, "prevButton", void 0), h([t], S.prototype, "nextButton", void 0), h([s({
+h([i], S.prototype, "size", void 0), h([i], S.prototype, "shape", void 0), h([t], S.prototype, "paginationButtons", void 0), h([t], S.prototype, "prevButton", void 0), h([t], S.prototype, "nextButton", void 0), h([i({
 	attribute: "nav-icons",
 	mode: "boolean"
-})], S.prototype, "navIcons", void 0), h([n], S.prototype, "pagesList", null), h([s({
+})], S.prototype, "navIcons", void 0), h([r], S.prototype, "pagesList", null), h([i({
 	mode: "reflect",
 	converter: x
-})], S.prototype, "total", void 0), h([s({
+})], S.prototype, "total", void 0), h([i({
 	mode: "reflect",
 	converter: x,
 	attribute: "selected-index"
@@ -100,7 +100,7 @@ var C = [
 function O(e, { parent: t }) {
 	return t.selectedIndex === Number(e) - 1 ? "filled" : "ghost";
 }
-var k = (e) => i` ${u((e) => e !== "...", i`
+var k = (e) => a` ${f((e) => e !== "...", a`
 		<${e} class="vwc-pagination-button"
 			label="${(e) => e}"
 			appearance="${O}"
@@ -114,7 +114,7 @@ var k = (e) => i` ${u((e) => e !== "...", i`
 			@keydown="${E}">
 		</${e}>
 	`)}
-	${u((e) => e === "...", i` <div
+	${f((e) => e === "...", a` <div
 			class="dots size-${(e, { parent: t }) => A(t)}"
 			aria-hidden="true"
 		>
@@ -122,11 +122,11 @@ var k = (e) => i` ${u((e) => e !== "...", i`
 		</div>`)}`, A = (e) => !e.size || !C.includes(e.size) ? p.SuperCondensed : e.size, j = (e) => !e.shape || !w.includes(e.shape) ? m.Rounded : e.shape, M = (e) => `calc(var(--base-size) + ${String(e).length - 1}ch)`;
 //#endregion
 //#region src/lib/pagination/index.ts
-r(a("pagination", S, (e) => {
+n(s("pagination", S, (e) => {
 	let t = e.tagFor(_), n = e.tagFor(_, !0), r = k(t);
-	return i`
+	return a`
 	<div class="${D}">
-		<${t} class="prev-button" ${l("prevButton")}
+		<${t} class="prev-button" ${d("prevButton")}
 			label="${(e) => e.navIcons ? null : "Previous"}"
 			icon="${(e) => e.navIcons ? "chevron-left-line" : null}"
 			size="${A}"
@@ -135,13 +135,13 @@ r(a("pagination", S, (e) => {
 			@click="${(e) => e.selectedIndex !== void 0 && e.selectedIndex--}"
 			aria-label="${(e) => e.locale.pagination.previousPageLabel}"
 		></${t}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${f({
+		<div id="buttons-wrapper" class="buttons-wrapper" ${u({
 		property: "paginationButtons",
-		filter: d(n)
+		filter: l(n)
 	})}>
 			${c((e) => e.pagesList, r, { positioning: !0 })}
 		</div>
-		<${t} class="next-button" ${l("nextButton")}
+		<${t} class="next-button" ${d("nextButton")}
 			label="${(e) => e.navIcons ? null : "Next"}"
 			icon="${(e) => e.navIcons ? "chevron-right-line" : null}"
 			size="${A}"

package/platform-switch/definition.cjs

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

package/platform-switch/definition.js

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

package/platform-switch/index.cjs

@@ -0,0 +1 @@
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/slotted.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/platform.cjs`);var i=`:host{display:contents}`,a=class extends e.t{slottedContentChanged(){this.#e()}#e(){let e=this.slottedContent.filter(e=>e instanceof HTMLElement),t=!1;for(let n of e){if(t){n.hidden=!0;continue}this.#t(n)?(n.hidden=!1,t=!0):n.hidden=!0}}#t(e){let t=r.t()?`apple`:`standard`,n=e.dataset.keyboard;return n===void 0?!0:n===t}};n.t([e.A],a.prototype,`slottedContent`,void 0);var o=e.u(`platform-switch`,a,()=>e.p`<slot ${t.t(`slottedContent`)}></slot>`,[],{styles:i});e.d(o)();

package/platform-switch/index.js

@@ -0,0 +1,28 @@
+import { A as e, d as t, p as n, t as r, u as i } from "../bundled/vivid-element.js";
+import { t as a } from "../bundled/slotted.js";
+import { t as o } from "../bundled/decorate.js";
+import { t as s } from "../bundled/platform.js";
+//#region src/lib/platform-switch/platform-switch.scss?inline
+var c = ":host{display:contents}", l = class extends r {
+	slottedContentChanged() {
+		this.#e();
+	}
+	#e() {
+		let e = this.slottedContent.filter((e) => e instanceof HTMLElement), t = !1;
+		for (let n of e) {
+			if (t) {
+				n.hidden = !0;
+				continue;
+			}
+			this.#t(n) ? (n.hidden = !1, t = !0) : n.hidden = !0;
+		}
+	}
+	#t(e) {
+		let t = s() ? "apple" : "standard", n = e.dataset.keyboard;
+		return n === void 0 ? !0 : n === t;
+	}
+};
+//#endregion
+//#region src/lib/platform-switch/index.ts
+o([e], l.prototype, "slottedContent", void 0), t(i("platform-switch", l, () => n`<slot ${a("slottedContent")}></slot>`, [], { styles: c }))();
+//#endregion

package/popover/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/definition55.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/definition53.js";
+import { n as registerPopover, r as Popover, t as popoverDefinition } from "../unbundled/definition55.js";
 export { Popover as VwcPopoverElement, popoverDefinition, registerPopover };

package/popover/index.cjs

@@ -1,8 +1,8 @@
-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/slotted.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.u({mode:`fromView`})],p.prototype,`placement`,void 0),a.t([t.u({mode:`boolean`})],p.prototype,`manual`,void 0),a.t([t.u({mode:`fromView`})],p.prototype,`layout`,void 0),a.t([t.u({attribute:`offset`,mode:`fromView`,converter:t.d})],p.prototype,`offset`,void 0),a.t([t.u({mode:`boolean`})],p.prototype,`alternate`,void 0),a.t([t.u({attribute:`dismiss-button-aria-label`})],p.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.u({mode:`boolean`})],p.prototype,`arrow`,void 0),a.t([t.u({mode:`boolean`})],p.prototype,`open`,void 0),a.t([t.D],p.prototype,`anchor`,void 0),a.t([t.D],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.s(`popover`,p,e=>{let a=e.tagFor(u.r),s=e.tagFor(l.i),d=e.tagFor(o.r);return t.f`
-		<slot name="anchor" ${i.t(`_slottedAnchor`)}></slot>
+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`
+		<slot name="anchor" ${n.t(`_slottedAnchor`)}></slot>
 		<${a}>
 			<div class="base" 
-				${n.t(`_popoverEl`)} 
+				${r.t(`_popoverEl`)} 
 				popover="${e=>e.manual?`manual`:`auto`}"
 				tabindex="-1"
 				autofocus
@@ -12,7 +12,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 					part="${e=>e.alternate?`vvd-theme-alternate`:``}">
 					<slot></slot>
 					<slot name="footer"></slot>
-					${r.t(e=>e.manual,t.f`<${s}
+					${i.t(e=>e.manual,t.p`<${s}
 							aria-label="${e=>e.dismissButtonAriaLabel||e.locale.popover.dismissButtonLabel}"
 							type="button"
 							size="condensed"
@@ -20,8 +20,8 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 							@click="${e=>e.hide()}">
 							<${d} name="close-line" slot="icon"></${d}>
 						</${s}>`)}
-					${r.t(e=>e.arrow,t.f`<div class="arrow" ${n.t(`_arrowEl`)}></div>`)}
+					${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.c(h)();
+	`},[l.t,o.t,u.t],{styles:f,shadowOptions:{delegatesFocus:!0}});t.d(h)();

package/popover/index.js

@@ -1,8 +1,8 @@
 import { t as e } from "../bundled/localized.js";
-import { D as t, c as n, d as r, f as i, s as a, t as o, u as s } from "../bundled/vivid-element.js";
-import { t as c } from "../bundled/ref.js";
-import { t as l } from "../bundled/when.js";
-import { t as u } from "../bundled/slotted.js";
+import { A as t, d as n, h as r, m as i, p as a, t as o, u as s } from "../bundled/vivid-element.js";
+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";
@@ -121,23 +121,23 @@ var k = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-
 		this.open = !this.open;
 	}
 };
-d([s({ mode: "fromView" })], A.prototype, "placement", void 0), d([s({ mode: "boolean" })], A.prototype, "manual", void 0), d([s({ mode: "fromView" })], A.prototype, "layout", void 0), d([s({
+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([s({ mode: "boolean" })], A.prototype, "alternate", void 0), d([s({ attribute: "dismiss-button-aria-label" })], A.prototype, "dismissButtonAriaLabel", void 0), d([s({ mode: "boolean" })], A.prototype, "arrow", void 0), d([s({ mode: "boolean" })], A.prototype, "open", void 0), d([t], A.prototype, "anchor", void 0), d([t], A.prototype, "_slottedAnchor", void 0);
+})], 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(a("popover", A, (e) => {
+n(s("popover", A, (e) => {
 	let t = e.tagFor(y), n = e.tagFor(_), r = e.tagFor(f);
-	return i`
-		<slot name="anchor" ${u("_slottedAnchor")}></slot>
+	return a`
+		<slot name="anchor" ${c("_slottedAnchor")}></slot>
 		<${t}>
 			<div class="base" 
-				${c("_popoverEl")} 
+				${l("_popoverEl")} 
 				popover="${(e) => e.manual ? "manual" : "auto"}"
 				tabindex="-1"
 				autofocus
@@ -150,7 +150,7 @@ n(a("popover", A, (e) => {
 					part="${(e) => e.alternate ? "vvd-theme-alternate" : ""}">
 					<slot></slot>
 					<slot name="footer"></slot>
-					${l((e) => e.manual, i`<${n}
+					${u((e) => e.manual, a`<${n}
 							aria-label="${(e) => e.dismissButtonAriaLabel || e.locale.popover.dismissButtonLabel}"
 							type="button"
 							size="condensed"
@@ -158,7 +158,7 @@ n(a("popover", A, (e) => {
 							@click="${(e) => e.hide()}">
 							<${r} name="close-line" slot="icon"></${r}>
 						</${n}>`)}
-					${l((e) => e.arrow, i`<div class="arrow" ${c("_arrowEl")}></div>`)}
+					${u((e) => e.arrow, a`<div class="arrow" ${l("_arrowEl")}></div>`)}
 				</div>
 			</div>
 		</${t}>

package/progress/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/definition56.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/definition54.js";
+import { n as registerProgress, r as Progress, t as progressDefinition } from "../unbundled/definition56.js";
 export { Progress as VwcProgressElement, progressDefinition, registerProgress };

package/progress/index.cjs

@@ -1,10 +1,10 @@
-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.u()],s.prototype,`shape`,void 0),n.t([e.u()],s.prototype,`connotation`,void 0),n.t([e.u({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.f` <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/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
 		class="determinate"
 		style="width: ${e=>e.percentComplete}%"
-	></span>`}function u(){return e.f` <span class="indeterminate" name="indeterminate">
+	></span>`}function u(){return e.p` <span class="indeterminate" name="indeterminate">
 		<span class="indicator-1"></span>
 		<span class="indicator-2"></span>
-	</span>`}var d=e.f`<template>
+	</span>`}var d=e.p`<template>
 	<div
 		class="${c}"
 		${i.n({role:`progressbar`,ariaValueNow:e=>e.value,ariaValueMin:e=>e.min,ariaValueMax:e=>e.max})}
@@ -14,4 +14,4 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`)
 			${t.t(e=>typeof e.value!=`number`,u())}
 		</div>
 	</div>
-</template>`,f=e.s(`progress`,s,d,[],{styles:o});e.c(f)();
+</template>`,f=e.u(`progress`,s,d,[],{styles:o});e.d(f)();

package/progress/index.js

@@ -1,4 +1,4 @@
-import { c as e, f as t, s as n, u as r } from "../bundled/vivid-element.js";
+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";
@@ -10,25 +10,25 @@ var u = ".base{outline:none;align-items:center;height:6px;margin:0}.base:not(.co
 		super(...e), this.reverse = !1;
 	}
 };
-a([r()], d.prototype, "shape", void 0), a([r()], d.prototype, "connotation", void 0), a([r({ mode: "boolean" })], d.prototype, "reverse", void 0);
+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() {
-	return t` <span
+	return n` <span
 		class="determinate"
 		style="width: ${(e) => e.percentComplete}%"
 	></span>`;
 }
 function m() {
-	return t` <span class="indeterminate" name="indeterminate">
+	return n` <span class="indeterminate" name="indeterminate">
 		<span class="indicator-1"></span>
 		<span class="indicator-2"></span>
 	</span>`;
 }
 //#endregion
 //#region src/lib/progress/index.ts
-e(n("progress", d, t`<template>
+e(r("progress", d, n`<template>
 	<div
 		class="${f}"
 		${s({

package/progress-ring/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition6.cjs");
+const require_definition = require("../unbundled/definition5.cjs");
 exports.VwcProgressRingElement = require_definition.ProgressRing;
 exports.progressRingDefinition = require_definition.progressRingDefinition;
 exports.registerProgressRing = require_definition.registerProgressRing;

package/progress-ring/definition.js

@@ -1,2 +1,2 @@
-import { n as registerProgressRing, r as ProgressRing, t as progressRingDefinition } from "../unbundled/definition6.js";
+import { n as registerProgressRing, r as ProgressRing, t as progressRingDefinition } from "../unbundled/definition5.js";
 export { ProgressRing as VwcProgressRingElement, progressRingDefinition, registerProgressRing };

package/radio/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/definition57.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/definition55.js";
+import { n as registerRadio, r as Radio, t as radioDefinition } from "../unbundled/definition57.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/definition56.cjs");
+const require_definition = require("../unbundled/definition58.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/definition56.js";
+import { n as registerRadioGroup, r as RadioGroup, t as radioGroupDefinition } from "../unbundled/definition58.js";
 export { RadioGroup as VwcRadioGroupElement, radioGroupDefinition, registerRadioGroup };