@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/file-picker/index.js

@@ -5,17 +5,17 @@ import { t as f } from "../bundled/slotted.js";
 import { t as p } from "../bundled/ref.js";
 import { t as m } from "../bundled/when.js";
 import { t as h } from "../bundled/decorate.js";
-import { r as g, t as _ } from "../bundled/definition2.js";
-import { t as v } from "../bundled/form-element.js";
-import { t as y } from "../bundled/with-error-text.js";
-import { t as b } from "../bundled/with-contextual-help.js";
-import { t as x } from "../bundled/class-names.js";
-import { n as S, t as C } from "../bundled/delegates-aria.js";
-import { n as w } from "../bundled/form-associated.js";
-import { i as T, t as E } from "../bundled/definition6.js";
-import { r as D, t as O } from "../bundled/mixins.js";
+import { t as g } from "../bundled/class-names.js";
+import { r as _, t as v } from "../bundled/definition3.js";
+import { n as y, t as b } from "../bundled/delegates-aria.js";
+import { n as x } from "../bundled/form-associated.js";
+import { i as S, t as C } from "../bundled/definition6.js";
+import { r as w, t as T } from "../bundled/mixins.js";
+import { t as E } from "../bundled/form-element.js";
+import { t as D } from "../bundled/with-contextual-help.js";
+import { t as O } from "../bundled/with-error-text.js";
 //#region src/lib/file-picker/file-picker.scss?inline
-var k = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}:host([disabled]){cursor:not-allowed}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-block-size:52px;inline-size:100%;padding:16px;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.control{transition:all .3s}}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;display:flex}@media (prefers-reduced-motion:no-preference){.control .upload-text{transition:all .3s}}.control.disabled{border-color:var(--vvd-color-neutral-300);background-color:var(--vvd-color-neutral-100);box-shadow:none;color:var(--vvd-color-neutral-300);pointer-events:none;transform:none}.control.disabled .upload-text{color:var(--vvd-color-neutral-300)}@media (hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{color:var(--vvd-color-cta-600);pointer-events:none}@media (prefers-reduced-motion:no-preference){.upload-icon{transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}}@media (hover:hover){.control:hover .upload-icon{color:var(--vvd-color-cta-700);animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{color:var(--vvd-color-neutral-800);animation:none;transform:scale(1.15)}.control.disabled .upload-icon{color:var(--vvd-color-neutral-300);animation:none}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--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}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}";
+var k = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}:host([disabled]){cursor:not-allowed}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-block-size:52px;inline-size:100%;padding:16px;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.control{transition:all .3s}}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;display:flex}@media (prefers-reduced-motion:no-preference){.control .upload-text{transition:all .3s}}.control.disabled{border-color:var(--vvd-color-neutral-300);background-color:var(--vvd-color-neutral-100);box-shadow:none;color:var(--vvd-color-neutral-300);pointer-events:none;transform:none}.control.disabled .upload-text{color:var(--vvd-color-neutral-300)}@media (hover:hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{color:var(--vvd-color-cta-600);pointer-events:none}@media (prefers-reduced-motion:no-preference){.upload-icon{transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}}@media (hover:hover){.control:hover .upload-icon{color:var(--vvd-color-cta-700);animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{color:var(--vvd-color-neutral-800);animation:none;transform:scale(1.15)}.control.disabled .upload-icon{color:var(--vvd-color-neutral-300);animation:none}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--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}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}";
 //#endregion
 //#region src/lib/file-picker/data-transfer.ts
 async function A(e) {
@@ -63,7 +63,7 @@ function P(e, t) {
 }
 //#endregion
 //#region src/lib/file-picker/file-picker.ts
-var F = class extends b(O(y(v(C(e(w(l))))))) {
+var F = class extends D(T(O(E(b(e(x(l))))))) {
 	constructor(...e) {
 		super(...e), this.singleFile = !1, this.maxFiles = null, this.maxFileSize = 256, this.valueChanged = (e, t) => {
 			super.valueChanged(e, t), t === "" && this.files.length && this.removeAllFiles();
@@ -216,11 +216,11 @@ var I = 1e3, L = {
 	}
 	return c`<strong>${e._formatNumber(n)}</strong>
 		${L[r]}`;
-}, z = ({ size: e, _dragHover: t, disabled: n }) => x("control", [`size-${e}`, !!e], ["drag-hover", t], ["disabled", n]);
+};
 //#endregion
 //#region src/lib/file-picker/index.ts
 r(u("file-picker", F, (e) => {
-	let t = e.tagFor(g), n = e.tagFor(T);
+	let t = e.tagFor(_), n = e.tagFor(S);
 	return c`
 		<div class="base">
 			<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp}>
@@ -231,7 +231,7 @@ r(u("file-picker", F, (e) => {
 			<button
 				type="button"
 				${p("control")}
-				class="${z}"
+				class="${(e) => g("control", [`size-${e.size}`, !!e.size], ["drag-hover", e._dragHover], ["disabled", e.disabled])}"
 				?disabled="${(e) => e.disabled}"
 				@click="${(e) => e._onControlClick()}"
 					@keydown="${() => !1}"
@@ -240,7 +240,7 @@ r(u("file-picker", F, (e) => {
 					@dragleave="${(e, t) => e._onDragLeave(t.event)}"
 					@drop="${(e, t) => e._onDrop(t.event)}"
 					@dragend="${(e) => e._onDragEnd()}"
-					${S({ ariaDescribedBy: (e) => e._feedbackDescribedBy })}
+					${y({ ariaDescribedBy: (e) => e._feedbackDescribedBy })}
 				>
 					<${t}
 						class="upload-icon"
@@ -254,7 +254,7 @@ r(u("file-picker", F, (e) => {
 			</div>
 			<div class="preview-list">
 				${d((e) => e._validatedFiles, c`
-				<div class="${(e) => x("preview", ["has-error", !!e.validationError])}">
+				<div class="${(e) => g("preview", ["has-error", !!e.validationError])}">
 					<div class="details">
 						<div class="filename">${(e) => e.file.name}</div>
 						<div class="size">${(e, t) => R(t.parent, e.file.size)}</div>
@@ -284,9 +284,9 @@ r(u("file-picker", F, (e) => {
 		/>
 	`;
 }, [
-	_,
-	E,
-	D
+	v,
+	C,
+	w
 ], {
 	styles: k,
 	shadowOptions: { delegatesFocus: !0 }

package/flag/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition33.cjs");
+const require_definition = require("../unbundled/definition34.cjs");
 exports.VwcFlagElement = require_definition.Flag;
 exports.flagDefinition = require_definition.flagDefinition;
 exports.registerFlag = require_definition.registerFlag;

package/flag/definition.js

@@ -1,2 +1,2 @@
-import { n as registerFlag, r as Flag, t as flagDefinition } from "../unbundled/definition33.js";
+import { n as registerFlag, r as Flag, t as flagDefinition } from "../unbundled/definition34.js";
 export { Flag as VwcFlagElement, flagDefinition, registerFlag };

package/flag/index.cjs

@@ -1,10 +1,10 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/definition.cjs`),r=require(`../bundled/numberConverter.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/class-names.cjs`),o=require(`../bundled/utils.cjs`);var s=`:host{vertical-align:sub;display:inline-block}.control.size--6{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_flag-block-size:1em}.control{margin:unset;block-size:var(--_flag-block-size);color:currentColor;contain:strict;inline-size:var(--_flag-block-size);display:flex}svg{block-size:inherit;inline-size:inherit;margin:auto}`,c=500,l=2e3,u=class extends e.t{constructor(...e){super(...e),this.flagLoaded=!1,this.#e=0,this.#t=null}#e;#t;async codeChanged(){let e=++this.#e;this.#t&&this.#t.abort(),this.#t=new AbortController;let t=o.t(this.code);if(!t){this._svg=``,this.flagLoaded=!0;return}this._svg=void 0,this.flagLoaded=!1;let n=setTimeout(()=>{this.#e===e&&(this._svg=r.r,n=setTimeout(()=>{this.#e===e&&this._svg===r.r&&(this._svg=void 0)},l))},c);try{let n=await r.n(t,this.#t.signal);this.#e===e&&(this._svg=n)}catch{this.#e===e&&(this._svg=void 0)}finally{this.#e===e&&(clearTimeout(n),this.flagLoaded=!0)}}};i.t([e.m],u.prototype,`code`,void 0),i.t([e.m],u.prototype,`label`,void 0),i.t([e.m({converter:r.t})],u.prototype,`size`,void 0),i.t([e.A],u.prototype,`_svg`,void 0),i.t([e.A],u.prototype,`flagLoaded`,void 0);var d=({size:e})=>a.t(`control`,[`size-${e}`,typeof e==`number`]),f=e.u(`flag`,u,r=>{let i=r.tagFor(n.r),a=e=>!e.label||e.label.trim().length===0;return e.p`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/definition.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/numberConverter.cjs`),o=require(`../bundled/utils.cjs`);var s=`:host{vertical-align:sub;display:inline-block}.control.size--6{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_flag-block-size:1em}.control{margin:unset;block-size:var(--_flag-block-size);color:currentColor;contain:strict;inline-size:var(--_flag-block-size);display:flex}svg{block-size:inherit;inline-size:inherit;margin:auto}`,c=500,l=2e3,u=class extends e.t{constructor(...e){super(...e),this.flagLoaded=!1,this.#e=0,this.#t=null}#e;#t;async codeChanged(){let e=++this.#e;this.#t&&this.#t.abort(),this.#t=new AbortController;let t=o.t(this.code);if(!t){this._svg=``,this.flagLoaded=!0;return}this._svg=void 0,this.flagLoaded=!1;let n=setTimeout(()=>{this.#e===e&&(this._svg=a.r,n=setTimeout(()=>{this.#e===e&&this._svg===a.r&&(this._svg=void 0)},l))},c);try{let n=await a.n(t,this.#t.signal);this.#e===e&&(this._svg=n)}catch{this.#e===e&&(this._svg=void 0)}finally{this.#e===e&&(clearTimeout(n),this.flagLoaded=!0)}}};r.t([e.m],u.prototype,`code`,void 0),r.t([e.m],u.prototype,`label`,void 0),r.t([e.m({converter:a.t})],u.prototype,`size`,void 0),r.t([e.A],u.prototype,`_svg`,void 0),r.t([e.A],u.prototype,`flagLoaded`,void 0);var d=e.u(`flag`,u,r=>{let a=r.tagFor(n.r),o=e=>!e.label||e.label.trim().length===0;return e.p`
 		<figure
-			class="${d}"
-			?aria-hidden="${e=>a(e)}"
+			class="${e=>i.t(`control`,[`size-${e.size}`,typeof e.size==`number`])}"
+			?aria-hidden="${e=>o(e)}"
 			?aria-busy="${e=>!e?.flagLoaded}"
 		>
 			${t.t(e=>e?.flagLoaded&&e?._svg,t=>e.p`${e.p.partial(t._svg)}`)}
-			<${i} class="label">${e=>e?.label}</${i}>
+			<${a} class="label">${e=>e?.label}</${a}>
 		</figure>
-	`},[n.n],{styles:s});e.d(f)();
+	`},[n.n],{styles:s});e.d(d)();

package/flag/index.js

@@ -1,9 +1,9 @@
 import { A as e, d as t, m as n, p as r, t as i, u as a } from "../bundled/vivid-element.js";
 import { t as o } from "../bundled/when.js";
 import { n as s, r as c } from "../bundled/definition.js";
-import { n as l, r as u, t as d } from "../bundled/numberConverter.js";
-import { t as f } from "../bundled/decorate.js";
-import { t as p } from "../bundled/class-names.js";
+import { t as l } from "../bundled/decorate.js";
+import { t as u } from "../bundled/class-names.js";
+import { n as d, r as f, t as p } from "../bundled/numberConverter.js";
 import { t as m } from "../bundled/utils.js";
 //#region src/lib/flag/flag.scss?inline
 var h = ":host{vertical-align:sub;display:inline-block}.control.size--6{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_flag-block-size:1em}.control{margin:unset;block-size:var(--_flag-block-size);color:currentColor;contain:strict;inline-size:var(--_flag-block-size);display:flex}svg{block-size:inherit;inline-size:inherit;margin:auto}", g = 500, _ = 2e3, v = class extends i {
@@ -23,13 +23,13 @@ var h = ":host{vertical-align:sub;display:inline-block}.control.size--6{--_flag-
 		this._svg = void 0, this.flagLoaded = !1;
 		let n = setTimeout(() => {
 			/* v8 ignore else -- @preserve */
-			this.#e === e && (this._svg = u, n = setTimeout(() => {
+			this.#e === e && (this._svg = f, n = setTimeout(() => {
 				/* v8 ignore else -- @preserve */
-				this.#e === e && this._svg === u && (this._svg = void 0);
+				this.#e === e && this._svg === f && (this._svg = void 0);
 			}, _));
 		}, g);
 		try {
-			let n = await l(t, this.#t.signal);
+			let n = await d(t, this.#t.signal);
 			/* v8 ignore else -- @preserve */
 			this.#e === e && (this._svg = n);
 		} catch {
@@ -39,17 +39,13 @@ var h = ":host{vertical-align:sub;display:inline-block}.control.size--6{--_flag-
 		}
 	}
 };
-f([n], v.prototype, "code", void 0), f([n], v.prototype, "label", void 0), f([n({ converter: d })], v.prototype, "size", void 0), f([e], v.prototype, "_svg", void 0), f([e], v.prototype, "flagLoaded", void 0);
-//#endregion
-//#region src/lib/flag/flag.template.ts
-var y = ({ size: e }) => p("control", [`size-${e}`, typeof e == "number"]);
 //#endregion
 //#region src/lib/flag/index.ts
-t(a("flag", v, (e) => {
+l([n], v.prototype, "code", void 0), l([n], v.prototype, "label", void 0), l([n({ converter: p })], v.prototype, "size", void 0), l([e], v.prototype, "_svg", void 0), l([e], v.prototype, "flagLoaded", void 0), t(a("flag", v, (e) => {
 	let t = e.tagFor(c), n = (e) => !e.label || e.label.trim().length === 0;
 	return r`
 		<figure
-			class="${y}"
+			class="${(e) => u("control", [`size-${e.size}`, typeof e.size == "number"])}"
 			?aria-hidden="${(e) => n(e)}"
 			?aria-busy="${(e) => !e?.flagLoaded}"
 		>

package/header/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition44.cjs");
+const require_definition = require("../unbundled/definition45.cjs");
 exports.VwcHeaderElement = require_definition.Header;
 exports.headerDefinition = require_definition.headerDefinition;
 exports.registerHeader = require_definition.registerHeader;

package/header/definition.js

@@ -1,2 +1,2 @@
-import { n as registerHeader, r as Header, t as headerDefinition } from "../unbundled/definition44.js";
+import { n as registerHeader, r as Header, t as headerDefinition } from "../unbundled/definition45.js";
 export { Header as VwcHeaderElement, headerDefinition, registerHeader };

package/header/index.cjs

@@ -1,19 +1,19 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/delegates-aria.cjs`),i=require(`../bundled/definition7.cjs`);var a=`.base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{align-items:center;column-gap:4px;display:inline-flex}.container{box-sizing:border-box;background-color:var(--header-bg-color,var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);justify-content:space-between;column-gap:12px;padding-block:8px;padding-inline:16px;display:flex}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}`,o=class extends r.t(e.t){constructor(...e){super(...e),this.elevationShadow=!1,this.alternate=!1}};t.t([e.m({attribute:`elevation-shadow`,mode:`boolean`})],o.prototype,`elevationShadow`,void 0),t.t([e.m({mode:`boolean`})],o.prototype,`alternate`,void 0);var s=({alternate:e})=>n.t([`vvd-theme-alternate`,e]),c=e.u(`header`,o,t=>{let n=t.tagFor(i.r);return e.p`
-    <${n} dp="4" ?no-shadow=${e=>!e.elevationShadow}>
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/delegates-aria.cjs`),i=require(`../bundled/definition7.cjs`);var a=`.base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{align-items:center;column-gap:4px;display:inline-flex}.container{box-sizing:border-box;background-color:var(--header-bg-color,var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);justify-content:space-between;column-gap:12px;padding-block:8px;padding-inline:16px;display:flex}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}`,o=class extends r.t(e.t){constructor(...e){super(...e),this.elevationShadow=!1,this.alternate=!1}};t.t([e.m({attribute:`elevation-shadow`,mode:`boolean`})],o.prototype,`elevationShadow`,void 0),t.t([e.m({mode:`boolean`})],o.prototype,`alternate`,void 0);var s=e.u(`header`,o,t=>{let a=t.tagFor(i.r);return e.p`
+    <${a} dp="4" ?no-shadow=${e=>!e.elevationShadow}>
       <header class="base" part="base" ${r.n()}>
         <!-- a container is needed to distinguish the surface background color of the
         element from its shadow when applying elevation with alternate -->
-        <div class="container" part="${s}">
-          <section class="header-content">
+        <div class="container" part="${e=>n.t(`container`,[`vvd-theme-alternate`,e.alternate])}">
+          <section class="header-content" part="main">
             <slot></slot>
           </section>
-          <section class="header-content">
+          <section class="header-content" part="action-items">
             <slot name="action-items"></slot>
           </section>
         </div>
       </header>
-    </${n}>
+    </${a}>
     <div class="app-content">
       <slot name="app-content"></slot>
     </div>
-	`},[i.t],{styles:a});e.d(c)();
+	`},[i.t],{styles:a});e.d(s)();

package/header/index.js

@@ -9,27 +9,23 @@ var d = ".base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vv
 		super(...e), this.elevationShadow = !1, this.alternate = !1;
 	}
 };
+//#endregion
+//#region src/lib/header/index.ts
 a([t({
 	attribute: "elevation-shadow",
 	mode: "boolean"
-})], f.prototype, "elevationShadow", void 0), a([t({ mode: "boolean" })], f.prototype, "alternate", void 0);
-//#endregion
-//#region src/lib/header/header.template.ts
-var p = ({ alternate: e }) => o(["vvd-theme-alternate", e]);
-//#endregion
-//#region src/lib/header/index.ts
-e(i("header", f, (e) => {
+})], f.prototype, "elevationShadow", void 0), a([t({ mode: "boolean" })], f.prototype, "alternate", void 0), e(i("header", f, (e) => {
 	let t = e.tagFor(l);
 	return n`
     <${t} dp="4" ?no-shadow=${(e) => !e.elevationShadow}>
       <header class="base" part="base" ${s()}>
         <!-- a container is needed to distinguish the surface background color of the
         element from its shadow when applying elevation with alternate -->
-        <div class="container" part="${p}">
-          <section class="header-content">
+        <div class="container" part="${(e) => o("container", ["vvd-theme-alternate", e.alternate])}">
+          <section class="header-content" part="main">
             <slot></slot>
           </section>
-          <section class="header-content">
+          <section class="header-content" part="action-items">
             <slot name="action-items"></slot>
           </section>
         </div>

package/icon/index.cjs

@@ -1 +1 @@
-require(`../bundled/definition2.cjs`).n();
+require(`../bundled/definition3.cjs`).n();

package/icon/index.js

@@ -1,4 +1,4 @@
-import { n as e } from "../bundled/definition2.js";
+import { n as e } from "../bundled/definition3.js";
 //#region src/lib/icon/index.ts
 e();
 //#endregion