@vonage/vivid 5.23.0 → 5.23.1

package/file-picker/index.cjs

@@ -1,5 +1,5 @@
-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/ref.cjs`),a=require(`../bundled/when.cjs`),o=require(`../bundled/decorate.cjs`),s=require(`../bundled/definition2.cjs`),c=require(`../bundled/form-element.cjs`),l=require(`../bundled/with-error-text.cjs`),u=require(`../bundled/with-contextual-help.cjs`),d=require(`../bundled/class-names.cjs`),f=require(`../bundled/delegates-aria.cjs`),p=require(`../bundled/form-associated.cjs`),m=require(`../bundled/definition6.cjs`),h=require(`../bundled/mixins.cjs`);var g=`.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}`;async function _(e){return e.items?.[0]?.webkitGetAsEntry==null?Array.from(e.files):await v(e.items)}async function v(e){let t=[];for(let n of e){let e=n.getAsFile();if(e)t.push(Promise.resolve([e]));else{let e=n.webkitGetAsEntry();e&&t.push(y(e,!1))}}return(await Promise.all(t)).flat()}var y=(e,t)=>{let n=e.isFile?(e=>new Promise((n,r)=>{e.file(e=>{t&&e.name.substring(0,1)===`.`?n([]):n([e])},r)}))(e):e.isDirectory?b(e):Promise.resolve([]);return n.catch(()=>null),n},b=async e=>new Promise((t,n)=>{let r=[],i=e.createReader(),a=()=>{i.readEntries(e=>{for(let t of e)r.push(y(t,!0));e.length?a():t(Promise.all(r).then(e=>e.flat()))},n)};a()});function x(e,t){if(!t)return!0;let n=t.split(`,`),r=e=>/\/\*$/.test(e),i=e=>e.replace(/\/.*$/,``);for(let t of n)if(t=t.trim(),t.charAt(0)===`.`){if(e.name.toLowerCase().endsWith(t.toLowerCase()))return!0}else if(r(t)){if(i(e.type)===i(t))return!0}else if(e.type===t)return!0;return!1}var S=class extends u.t(h.t(l.t(c.t(f.t(e.t(p.n(t.t))))))){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()},this.proxy=document.createElement(`input`),this.setFormValue=(e,t)=>{typeof e!=`string`&&super.setFormValue(e,t)},this._customValidationError=null,this.#r={handleChange:()=>{this._customValidationError=this.#i.observe(this,t.O.default)}},this._dragHover=!1,this._allFiles=[]}nameChanged(e,t){super.nameChanged(e,t),this.#e()}#e(){let e=this.files;if(!this.name)this.setFormValue(null);else{let t=new FormData;for(let n of e)t.append(this.name,n);this.setFormValue(t)}this.#t()}#t(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:``}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#n(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){this.proxy&&this.proxy.setCustomValidity(this._customValidationError??``),this.validate()}#r;#i;#a(){this.#i=t.k.binding(()=>this.#n(),this.#r,!0),this.#r.handleChange()}#o(){this.#i.dispose()}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#o()}_onDragEnter(){return this.disabled||(this._dragHover=!0),!0}_onDragOver(e){if(this.disabled||!e.dataTransfer)return!0;let t=e.dataTransfer.effectAllowed;return e.dataTransfer.dropEffect=t===`move`||t===`linkMove`?`move`:`copy`,!1}_onDragLeave(e){return this.disabled||e.currentTarget===e.target&&(this._dragHover=!1),!0}_onDrop(e){return this.disabled||(this._dragHover=!1,!e.dataTransfer)?!0:(_(e.dataTransfer).then(e=>this.#s(e)).catch(e=>{console.error(e)}),!1)}_onDragEnd(){return this.disabled||(this._dragHover=!1),!0}_onControlClick(){this.disabled||this._hiddenInput.click()}_onRemoveFileClick(e){this.disabled||(this._allFiles=this._allFiles.filter(t=>t!==e),this.$emit(`change`))}_allFilesChanged(){this.#e()}#s(e){let t=Array.from(e).filter(e=>!this._allFiles.some(t=>t.name===e.name&&t.size===e.size));this.singleFile&&t.length>0?this._allFiles=[t[t.length-1]]:this._allFiles=[...this._allFiles,...t],this.$emit(`change`)}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){let e=(e,t)=>this.maxFileSize&&e.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace(`{{filesize}}`,this._formatNumber(Math.round(e.size/1024/10.24)/100)).replace(`{{maxFilesize}}`,this._formatNumber(this.maxFileSize)):x(e,this.accept)?typeof this.maxFiles==`number`&&t>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace(`{{maxFiles}}`,String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[],n=0;for(let r of this._allFiles){let i={file:r,validationError:e(r,n)};t.push(i),i.validationError||n++}return t}get files(){return this._validatedFiles.filter(e=>!e.validationError).map(e=>e.file)}get rejectedFiles(){return this._validatedFiles.filter(e=>!!e.validationError).map(e=>e.file)}_onHiddenInputChange(e){this.#s(this._hiddenInput.files),this._hiddenInput.value=``,e.stopPropagation()}_formatNumber(e){let t=String(e);return this.locale.common.useCommaAsDecimalSeparator?t.replace(`.`,`,`):t}};o.t([t.m({attribute:`single-file`,mode:`boolean`})],S.prototype,`singleFile`,void 0),o.t([t.m({attribute:`max-files`,converter:t.h,mode:`fromView`})],S.prototype,`maxFiles`,void 0),o.t([t.m({mode:`fromView`,attribute:`max-file-size`})],S.prototype,`maxFileSize`,void 0),o.t([t.m],S.prototype,`accept`,void 0),o.t([t.m],S.prototype,`size`,void 0),o.t([t.m({attribute:`invalid-file-type-error`})],S.prototype,`invalidFileTypeError`,void 0),o.t([t.m({attribute:`max-files-exceeded-error`})],S.prototype,`maxFilesExceededError`,void 0),o.t([t.m({attribute:`file-too-big-error`})],S.prototype,`fileTooBigError`,void 0),o.t([t.A],S.prototype,`_customValidationError`,void 0),o.t([t.A],S.prototype,`_dragHover`,void 0),o.t([t.A],S.prototype,`_allFiles`,void 0),o.t([t.j],S.prototype,`_validatedFiles`,null);var C=1e3,w={tb:`TB`,gb:`GB`,mb:`MB`,kb:`KB`,b:`b`},T=(e,n)=>{let r=0,i=`b`;if(n>0){let e=[`tb`,`gb`,`mb`,`kb`,`b`];for(let t=0;t<e.length;t++){let a=e[t];if(n>=C**(4-t)/10){r=n/C**(4-t),i=a;break}}r=Math.round(10*r)/10}return t.p`<strong>${e._formatNumber(r)}</strong>
-		${w[i]}`},E=({size:e,_dragHover:t,disabled:n})=>d.t(`control`,[`size-${e}`,!!e],[`drag-hover`,t],[`disabled`,n]),D=t.u(`file-picker`,S,e=>{let o=e.tagFor(s.r),c=e.tagFor(m.i);return t.p`
+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/ref.cjs`),a=require(`../bundled/when.cjs`),o=require(`../bundled/decorate.cjs`),s=require(`../bundled/class-names.cjs`),c=require(`../bundled/definition3.cjs`),l=require(`../bundled/delegates-aria.cjs`),u=require(`../bundled/form-associated.cjs`),d=require(`../bundled/definition6.cjs`),f=require(`../bundled/mixins.cjs`),p=require(`../bundled/form-element.cjs`),m=require(`../bundled/with-contextual-help.cjs`),h=require(`../bundled/with-error-text.cjs`);var g=`.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}`;async function _(e){return e.items?.[0]?.webkitGetAsEntry==null?Array.from(e.files):await v(e.items)}async function v(e){let t=[];for(let n of e){let e=n.getAsFile();if(e)t.push(Promise.resolve([e]));else{let e=n.webkitGetAsEntry();e&&t.push(y(e,!1))}}return(await Promise.all(t)).flat()}var y=(e,t)=>{let n=e.isFile?(e=>new Promise((n,r)=>{e.file(e=>{t&&e.name.substring(0,1)===`.`?n([]):n([e])},r)}))(e):e.isDirectory?b(e):Promise.resolve([]);return n.catch(()=>null),n},b=async e=>new Promise((t,n)=>{let r=[],i=e.createReader(),a=()=>{i.readEntries(e=>{for(let t of e)r.push(y(t,!0));e.length?a():t(Promise.all(r).then(e=>e.flat()))},n)};a()});function x(e,t){if(!t)return!0;let n=t.split(`,`),r=e=>/\/\*$/.test(e),i=e=>e.replace(/\/.*$/,``);for(let t of n)if(t=t.trim(),t.charAt(0)===`.`){if(e.name.toLowerCase().endsWith(t.toLowerCase()))return!0}else if(r(t)){if(i(e.type)===i(t))return!0}else if(e.type===t)return!0;return!1}var S=class extends m.t(f.t(h.t(p.t(l.t(e.t(u.n(t.t))))))){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()},this.proxy=document.createElement(`input`),this.setFormValue=(e,t)=>{typeof e!=`string`&&super.setFormValue(e,t)},this._customValidationError=null,this.#r={handleChange:()=>{this._customValidationError=this.#i.observe(this,t.O.default)}},this._dragHover=!1,this._allFiles=[]}nameChanged(e,t){super.nameChanged(e,t),this.#e()}#e(){let e=this.files;if(!this.name)this.setFormValue(null);else{let t=new FormData;for(let n of e)t.append(this.name,n);this.setFormValue(t)}this.#t()}#t(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:``}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#n(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){this.proxy&&this.proxy.setCustomValidity(this._customValidationError??``),this.validate()}#r;#i;#a(){this.#i=t.k.binding(()=>this.#n(),this.#r,!0),this.#r.handleChange()}#o(){this.#i.dispose()}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#o()}_onDragEnter(){return this.disabled||(this._dragHover=!0),!0}_onDragOver(e){if(this.disabled||!e.dataTransfer)return!0;let t=e.dataTransfer.effectAllowed;return e.dataTransfer.dropEffect=t===`move`||t===`linkMove`?`move`:`copy`,!1}_onDragLeave(e){return this.disabled||e.currentTarget===e.target&&(this._dragHover=!1),!0}_onDrop(e){return this.disabled||(this._dragHover=!1,!e.dataTransfer)?!0:(_(e.dataTransfer).then(e=>this.#s(e)).catch(e=>{console.error(e)}),!1)}_onDragEnd(){return this.disabled||(this._dragHover=!1),!0}_onControlClick(){this.disabled||this._hiddenInput.click()}_onRemoveFileClick(e){this.disabled||(this._allFiles=this._allFiles.filter(t=>t!==e),this.$emit(`change`))}_allFilesChanged(){this.#e()}#s(e){let t=Array.from(e).filter(e=>!this._allFiles.some(t=>t.name===e.name&&t.size===e.size));this.singleFile&&t.length>0?this._allFiles=[t[t.length-1]]:this._allFiles=[...this._allFiles,...t],this.$emit(`change`)}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){let e=(e,t)=>this.maxFileSize&&e.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace(`{{filesize}}`,this._formatNumber(Math.round(e.size/1024/10.24)/100)).replace(`{{maxFilesize}}`,this._formatNumber(this.maxFileSize)):x(e,this.accept)?typeof this.maxFiles==`number`&&t>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace(`{{maxFiles}}`,String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[],n=0;for(let r of this._allFiles){let i={file:r,validationError:e(r,n)};t.push(i),i.validationError||n++}return t}get files(){return this._validatedFiles.filter(e=>!e.validationError).map(e=>e.file)}get rejectedFiles(){return this._validatedFiles.filter(e=>!!e.validationError).map(e=>e.file)}_onHiddenInputChange(e){this.#s(this._hiddenInput.files),this._hiddenInput.value=``,e.stopPropagation()}_formatNumber(e){let t=String(e);return this.locale.common.useCommaAsDecimalSeparator?t.replace(`.`,`,`):t}};o.t([t.m({attribute:`single-file`,mode:`boolean`})],S.prototype,`singleFile`,void 0),o.t([t.m({attribute:`max-files`,converter:t.h,mode:`fromView`})],S.prototype,`maxFiles`,void 0),o.t([t.m({mode:`fromView`,attribute:`max-file-size`})],S.prototype,`maxFileSize`,void 0),o.t([t.m],S.prototype,`accept`,void 0),o.t([t.m],S.prototype,`size`,void 0),o.t([t.m({attribute:`invalid-file-type-error`})],S.prototype,`invalidFileTypeError`,void 0),o.t([t.m({attribute:`max-files-exceeded-error`})],S.prototype,`maxFilesExceededError`,void 0),o.t([t.m({attribute:`file-too-big-error`})],S.prototype,`fileTooBigError`,void 0),o.t([t.A],S.prototype,`_customValidationError`,void 0),o.t([t.A],S.prototype,`_dragHover`,void 0),o.t([t.A],S.prototype,`_allFiles`,void 0),o.t([t.j],S.prototype,`_validatedFiles`,null);var C=1e3,w={tb:`TB`,gb:`GB`,mb:`MB`,kb:`KB`,b:`b`},T=(e,n)=>{let r=0,i=`b`;if(n>0){let e=[`tb`,`gb`,`mb`,`kb`,`b`];for(let t=0;t<e.length;t++){let a=e[t];if(n>=C**(4-t)/10){r=n/C**(4-t),i=a;break}}r=Math.round(10*r)/10}return t.p`<strong>${e._formatNumber(r)}</strong>
+		${w[i]}`},E=t.u(`file-picker`,S,e=>{let o=e.tagFor(c.r),u=e.tagFor(d.i);return t.p`
 		<div class="base">
 			<div class="label-wrapper" ?hidden=${e=>!e.label&&!e._hasContextualHelp}>
 				${a.t(e=>e.label,t.p`<label class="label">${e=>e.label}</label>`)}
@@ -9,7 +9,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			<button
 				type="button"
 				${i.t(`control`)}
-				class="${E}"
+				class="${e=>s.t(`control`,[`size-${e.size}`,!!e.size],[`drag-hover`,e._dragHover],[`disabled`,e.disabled])}"
 				?disabled="${e=>e.disabled}"
 				@click="${e=>e._onControlClick()}"
 					@keydown="${()=>!1}"
@@ -18,7 +18,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 					@dragleave="${(e,t)=>e._onDragLeave(t.event)}"
 					@drop="${(e,t)=>e._onDrop(t.event)}"
 					@dragend="${e=>e._onDragEnd()}"
-					${f.n({ariaDescribedBy:e=>e._feedbackDescribedBy})}
+					${l.n({ariaDescribedBy:e=>e._feedbackDescribedBy})}
 				>
 					<${o}
 						class="upload-icon"
@@ -32,7 +32,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			</div>
 			<div class="preview-list">
 				${n.n(e=>e._validatedFiles,t.p`
-				<div class="${e=>d.t(`preview`,[`has-error`,!!e.validationError])}">
+				<div class="${e=>s.t(`preview`,[`has-error`,!!e.validationError])}">
 					<div class="details">
 						<div class="filename">${e=>e.file.name}</div>
 						<div class="size">${(e,t)=>T(t.parent,e.file.size)}</div>
@@ -41,11 +41,11 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 						<${o} name="info-line" size="-6"></${o}>
 						${e=>e.validationError}
 					</div>
-				<${c}
+				<${u}
 					class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
 					?disabled="${(e,t)=>t.parent.disabled}"
 					aria-label="${(e,t)=>t.parent.locale.filePicker.removeFileLabel}"
-					@click="${(e,t)=>t.parent._onRemoveFileClick(e.file)}"></${c}>
+					@click="${(e,t)=>t.parent._onRemoveFileClick(e.file)}"></${u}>
 				</div>`)}
 			</div>
 		</div>
@@ -60,4 +60,4 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			tabindex="-1"
 			@change="${(e,t)=>e._onHiddenInputChange(t.event)}"
 		/>
-	`},[s.t,m.t,h.r],{styles:g,shadowOptions:{delegatesFocus:!0}});t.d(D)();
+	`},[c.t,d.t,f.r],{styles:g,shadowOptions:{delegatesFocus:!0}});t.d(E)();

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/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/index.cjs

@@ -1,9 +1,9 @@
-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}">
+        <div class="container" part="${e=>n.t([`vvd-theme-alternate`,e.alternate])}">
           <section class="header-content">
             <slot></slot>
           </section>
@@ -12,8 +12,8 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.c
           </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,23 +9,19 @@ 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}">
+        <div class="container" part="${(e) => o(["vvd-theme-alternate", e.alternate])}">
           <section class="header-content">
             <slot></slot>
           </section>

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

package/index.cjs

@@ -5,24 +5,24 @@ const require_definition$2 = require("./unbundled/definition3.cjs");
 const require_definition$3 = require("./unbundled/definition4.cjs");
 const require_definition$4 = require("./unbundled/definition5.cjs");
 const require_localized = require("./unbundled/localized.cjs");
-const require_definition$5 = require("./unbundled/definition7.cjs");
+const require_definition$5 = require("./unbundled/definition6.cjs");
 const require_enums = require("./unbundled/enums.cjs");
-const require_definition$6 = require("./unbundled/definition9.cjs");
-const require_definition$7 = require("./unbundled/definition11.cjs");
-const require_definition$8 = require("./unbundled/definition12.cjs");
-const require_definition$9 = require("./unbundled/definition13.cjs");
+const require_definition$6 = require("./unbundled/definition8.cjs");
+const require_definition$7 = require("./unbundled/definition10.cjs");
+const require_definition$8 = require("./unbundled/definition11.cjs");
+const require_definition$9 = require("./unbundled/definition12.cjs");
 const require_divider = require("./unbundled/divider.cjs");
-const require_definition$10 = require("./unbundled/definition14.cjs");
-const require_definition$11 = require("./unbundled/definition15.cjs");
-const require_definition$12 = require("./unbundled/definition16.cjs");
-const require_definition$13 = require("./unbundled/definition17.cjs");
-const require_definition$14 = require("./unbundled/definition18.cjs");
+const require_definition$10 = require("./unbundled/definition13.cjs");
+const require_definition$11 = require("./unbundled/definition14.cjs");
+const require_definition$12 = require("./unbundled/definition15.cjs");
+const require_definition$13 = require("./unbundled/definition16.cjs");
+const require_definition$14 = require("./unbundled/definition17.cjs");
 const require_breadcrumb_item = require("./unbundled/breadcrumb-item.cjs");
-const require_definition$15 = require("./unbundled/definition19.cjs");
-const require_definition$16 = require("./unbundled/definition20.cjs");
+const require_definition$15 = require("./unbundled/definition18.cjs");
+const require_definition$16 = require("./unbundled/definition19.cjs");
 const require_calendar_event = require("./unbundled/calendar-event.cjs");
-const require_definition$17 = require("./unbundled/definition21.cjs");
-const require_definition$18 = require("./unbundled/definition22.cjs");
+const require_definition$17 = require("./unbundled/definition20.cjs");
+const require_definition$18 = require("./unbundled/definition21.cjs");
 const require_definition$19 = require("./unbundled/definition23.cjs");
 const require_definition$20 = require("./unbundled/definition24.cjs");
 const require_definition$21 = require("./unbundled/definition25.cjs");
@@ -342,6 +342,7 @@ exports.registerTreeView = require_definition$75.registerTreeView;
 exports.registerVideoPlayer = require_definition$76.registerVideoPlayer;
 exports.richTextEditorDefinition = require_definition$56.richTextEditorDefinition;
 exports.richTextViewDefinition = require_definition$58.richTextViewDefinition;
+exports.searchableSelectDefinition = require_definition$59.searchableSelectDefinition;
 exports.selectDefinition = require_definition$57.selectDefinition;
 exports.selectableBoxDefinition = require_definition$60.selectableBoxDefinition;
 exports.setLocale = require_localized.setLocale;

package/index.js

@@ -4,24 +4,24 @@ import { i as Accordion, n as accordionDefinition, r as registerAccordion, t as
 import { n as registerActionGroup, r as ActionGroup, t as actionGroupDefinition } from "./unbundled/definition4.js";
 import { n as registerProgressRing, r as ProgressRing, t as progressRingDefinition } from "./unbundled/definition5.js";
 import { r as setLocale } from "./unbundled/localized.js";
-import { i as Button, n as registerButton, t as buttonDefinition } from "./unbundled/definition7.js";
+import { i as Button, n as registerButton, t as buttonDefinition } from "./unbundled/definition6.js";
 import { a as IconDecoration, c as Position, d as Size, f as Sticky, i as ConnotationDecorative, l as Role, n as AriaLive, o as LayoutSize, r as Connotation, s as MediaSkipBy, t as Appearance, u as Shape } from "./unbundled/enums.js";
-import { n as registerAlert, r as Alert, t as alertDefinition } from "./unbundled/definition9.js";
-import { n as sliderDefinition, r as Slider, t as registerSlider } from "./unbundled/definition11.js";
-import { a as MenuItemRole, i as MenuItem, n as registerMenuItem, t as menuItemDefinition } from "./unbundled/definition12.js";
-import { n as registerMenu, r as Menu, t as menuDefinition } from "./unbundled/definition13.js";
+import { n as registerAlert, r as Alert, t as alertDefinition } from "./unbundled/definition8.js";
+import { n as sliderDefinition, r as Slider, t as registerSlider } from "./unbundled/definition10.js";
+import { a as MenuItemRole, i as MenuItem, n as registerMenuItem, t as menuItemDefinition } from "./unbundled/definition11.js";
+import { n as registerMenu, r as Menu, t as menuDefinition } from "./unbundled/definition12.js";
 import { t as Divider } from "./unbundled/divider.js";
-import { n as registerAudioPlayer, r as AudioPlayer, t as audioPlayerDefinition } from "./unbundled/definition14.js";
-import { n as registerAvatar, r as Avatar, t as avatarDefinition } from "./unbundled/definition15.js";
-import { n as registerBadge, r as Badge, t as badgeDefinition } from "./unbundled/definition16.js";
-import { n as registerBanner, r as Banner, t as bannerDefinition } from "./unbundled/definition17.js";
-import { n as registerBreadcrumbItem, t as breadcrumbItemDefinition } from "./unbundled/definition18.js";
+import { n as registerAudioPlayer, r as AudioPlayer, t as audioPlayerDefinition } from "./unbundled/definition13.js";
+import { n as registerAvatar, r as Avatar, t as avatarDefinition } from "./unbundled/definition14.js";
+import { n as registerBadge, r as Badge, t as badgeDefinition } from "./unbundled/definition15.js";
+import { n as registerBanner, r as Banner, t as bannerDefinition } from "./unbundled/definition16.js";
+import { n as registerBreadcrumbItem, t as breadcrumbItemDefinition } from "./unbundled/definition17.js";
 import { t as BreadcrumbItem } from "./unbundled/breadcrumb-item.js";
-import { n as registerBreadcrumb, r as Breadcrumb, t as breadcrumbDefinition } from "./unbundled/definition19.js";
-import { n as registerCalendarEvent, t as calendarEventDefinition } from "./unbundled/definition20.js";
+import { n as registerBreadcrumb, r as Breadcrumb, t as breadcrumbDefinition } from "./unbundled/definition18.js";
+import { n as registerCalendarEvent, t as calendarEventDefinition } from "./unbundled/definition19.js";
 import { t as CalendarEvent } from "./unbundled/calendar-event.js";
-import { n as registerCalendar, r as Calendar, t as calendarDefinition } from "./unbundled/definition21.js";
-import { n as registerCard, r as Card, t as cardDefinition } from "./unbundled/definition22.js";
+import { n as registerCalendar, r as Calendar, t as calendarDefinition } from "./unbundled/definition20.js";
+import { n as registerCard, r as Card, t as cardDefinition } from "./unbundled/definition21.js";
 import { n as registerCheckbox, r as Checkbox, t as checkboxDefinition } from "./unbundled/definition23.js";
 import { n as toggletipDefinition, r as Toggletip, t as registerToggletip } from "./unbundled/definition24.js";
 import { n as registerContextualHelp, r as ContextualHelp, t as contextualHelpDefinition } from "./unbundled/definition25.js";
@@ -63,7 +63,7 @@ import { n as registerRangeSlider, r as RangeSlider, t as rangeSliderDefinition
 import { A as RichTextEditor, C as RtePlaceholderFeature, D as RteConfig, E as RteBase, O as RteHtmlSerializer, S as RteHardBreakFeature, T as RteTextBlockPickerFeature, _ as RteStrikethroughFeature, a as RteKeyboardShortcutsFeature, b as RteBoldFeature, c as RteToolbarButtonFeature, d as RteInlineImageFeature, f as RteLinkFeature, g as RteMonospaceFeature, h as RteTextColorPickerFeature, i as RteSuggestFeature, k as RteHtmlParser, l as RteDropHandlerFeature, m as RteListFeature, n as richTextEditorDefinition, o as RteInputRuleFeature, p as RteAlignmentFeature, r as RteCharacterCountFeature, s as RteAtomFeature, t as registerRichTextEditor, u as RteFileHandlerFeature, v as RteUnderlineFeature, w as RteToolbarFeature, x as RteFontSizePickerFeature, y as RteItalicFeature } from "./unbundled/definition60.js";
 import { n as selectDefinition, r as Select, t as registerSelect } from "./unbundled/definition61.js";
 import { n as richTextViewDefinition, r as RichTextView, t as registerRichTextView } from "./unbundled/definition62.js";
-import { n as SearchableSelect, t as registerSearchableSelect } from "./unbundled/definition63.js";
+import { n as searchableSelectDefinition, r as SearchableSelect, t as registerSearchableSelect } from "./unbundled/definition63.js";
 import { n as selectableBoxDefinition, r as SelectableBox, t as registerSelectableBox } from "./unbundled/definition64.js";
 import { n as sideDrawerDefinition, r as SideDrawer, t as registerSideDrawer } from "./unbundled/definition65.js";
 import { n as simpleColorPickerDefinition, r as SimpleColorPicker, t as registerSimpleColorPicker } from "./unbundled/definition66.js";
@@ -81,4 +81,4 @@ import { n as timePickerDefinition, t as registerTimePicker } from "./unbundled/
 import { n as treeItemDefinition, r as TreeItem, t as registerTreeItem } from "./unbundled/definition78.js";
 import { n as treeViewDefinition, r as TreeView, t as registerTreeView } from "./unbundled/definition79.js";
 import { n as videoPlayerDefinition, r as VideoPlayer, t as registerVideoPlayer } from "./unbundled/definition80.js";
-export { AccordionExpandMode, Appearance, AriaLive, Connotation, ConnotationDecorative, IconDecoration, LayoutSize, MediaSkipBy, MenuItemRole, Position, Role, RteAlignmentFeature, RteAtomFeature, RteBase, RteBoldFeature, RteCharacterCountFeature, RteConfig, RteDropHandlerFeature, RteFileHandlerFeature, RteFontSizePickerFeature, RteHardBreakFeature, RteHtmlParser, RteHtmlSerializer, RteInlineImageFeature, RteInputRuleFeature, RteItalicFeature, RteKeyboardShortcutsFeature, RteLinkFeature, RteListFeature, RteMonospaceFeature, RtePlaceholderFeature, RteStrikethroughFeature, RteSuggestFeature, RteTextBlockPickerFeature, RteTextColorPickerFeature, RteToolbarButtonFeature, RteToolbarFeature, RteUnderlineFeature, Shape, Size, Sticky, TabsGutters, Accordion as VwcAccordionElement, AccordionItem as VwcAccordionItemElement, ActionGroup as VwcActionGroupElement, Alert as VwcAlertElement, AudioPlayer as VwcAudioPlayerElement, Avatar as VwcAvatarElement, Badge as VwcBadgeElement, Banner as VwcBannerElement, Breadcrumb as VwcBreadcrumbElement, BreadcrumbItem as VwcBreadcrumbItemElement, Button as VwcButtonElement, Calendar as VwcCalendarElement, CalendarEvent as VwcCalendarEventElement, Card as VwcCardElement, Checkbox as VwcCheckboxElement, ColorPicker as VwcColorPickerElement, Combobox as VwcComboboxElement, ContextualHelp as VwcContextualHelpElement, Country as VwcCountryElement, CountryGroup as VwcCountryGroupElement, DataGridCell as VwcDataGridCellElement, DataGrid as VwcDataGridElement, DataGridRow as VwcDataGridRowElement, DatePicker as VwcDatePickerElement, DateRangePicker as VwcDateRangePickerElement, DateTimePicker as VwcDateTimePickerElement, DialPad as VwcDialPadElement, Dialog as VwcDialogElement, Divider as VwcDividerElement, EmptyState as VwcEmptyStateElement, Fab as VwcFabElement, FilePicker as VwcFilePickerElement, Flag as VwcFlagElement, Header as VwcHeaderElement, Icon as VwcIconElement, KbdKey as VwcKbdKeyElement, KbdShortcut as VwcKbdShortcutElement, Layout as VwcLayoutElement, Menu as VwcMenuElement, MenuItem as VwcMenuItemElement, NavDisclosure as VwcNavDisclosureElement, Nav as VwcNavElement, NavItem as VwcNavItemElement, Note as VwcNoteElement, NumberField as VwcNumberFieldElement, ListboxOption as VwcOptionElement, Pagination as VwcPaginationElement, PlatformSwitch as VwcPlatformSwitchElement, Popover as VwcPopoverElement, Progress as VwcProgressElement, ProgressRing as VwcProgressRingElement, Radio as VwcRadioElement, RadioGroup as VwcRadioGroupElement, RangeSlider as VwcRangeSliderElement, RichTextEditor as VwcRichTextEditorElement, RichTextView as VwcRichTextViewElement, SearchableSelect as VwcSearchableSelectElement, Select as VwcSelectElement, SelectableBox as VwcSelectableBoxElement, SideDrawer as VwcSideDrawerElement, SimpleColorPicker as VwcSimpleColorPickerElement, Slider as VwcSliderElement, SplitButton as VwcSplitButtonElement, Status as VwcStatusElement, Switch as VwcSwitchElement, Tab as VwcTabElement, TabPanel as VwcTabPanelElement, TableBody as VwcTableBodyElement, TableCell as VwcTableCellElement, Table as VwcTableElement, TableHead as VwcTableHeadElement, TableHeaderCell as VwcTableHeaderCellElement, TableRow as VwcTableRowElement, TableSortingButton as VwcTableSortingButtonElement, Tabs as VwcTabsElement, Tag as VwcTagElement, TagGroup as VwcTagGroupElement, TextArea as VwcTextAreaElement, TextField as VwcTextFieldElement, TimePicker as VwcTimePickerElement, Toggletip as VwcToggletipElement, Tooltip as VwcTooltipElement, TreeItem as VwcTreeItemElement, TreeView as VwcTreeViewElement, VideoPlayer as VwcVideoPlayerElement, accordionDefinition, accordionItemDefinition, actionGroupDefinition, alertDefinition, audioPlayerDefinition, avatarDefinition, badgeDefinition, bannerDefinition, breadcrumbDefinition, breadcrumbItemDefinition, buttonDefinition, calendarDefinition, calendarEventDefinition, cardDefinition, checkboxDefinition, colorPickerDefinition, comboboxDefinition, contextualHelpDefinition, countryDefinition, countryGroupDefinition, dataGridCellDefinition, dataGridDefinition, dataGridRowDefinition, datePickerDefinition, dateRangePickerDefinition, dateTimePickerDefinition, dialPadDefinition, dialogDefinition, dividerDefinition, emptyStateDefinition, fabDefinition, filePickerDefinition, flagDefinition, headerDefinition, iconDefinition, kbdKeyDefinition, kbdShortcutDefinition, layoutDefinition, listboxOptionDefinition, menuDefinition, menuItemDefinition, navDefinition, navDisclosureDefinition, navItemDefinition, noteDefinition, numberFieldDefinition, paginationDefinition, platformSwitchDefinition, popoverDefinition, progressDefinition, progressRingDefinition, radioDefinition, radioGroupDefinition, rangeSliderDefinition, registerAccordion, registerAccordionItem, registerActionGroup, registerAlert, registerAudioPlayer, registerAvatar, registerBadge, registerBanner, registerBreadcrumb, registerBreadcrumbItem, registerButton, registerCalendar, registerCalendarEvent, registerCard, registerCheckbox, registerColorPicker, registerCombobox, registerContextualHelp, registerCountry, registerCountryGroup, registerDataGrid, registerDatePicker, registerDateRangePicker, registerDateTimePicker, registerDialPad, registerDialog, registerDivider, registerEmptyState, registerFab, registerFilePicker, registerFlag, registerHeader, registerIcon, registerKbdKey, registerKbdShortcut, registerLayout, registerMenu, registerMenuItem, registerNav, registerNavDisclosure, registerNavItem, registerNote, registerNumberField, registerOption, registerPagination, registerPlatformSwitch, registerPopover, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerRangeSlider, registerRichTextEditor, registerRichTextView, registerSearchableSelect, registerSelect, registerSelectableBox, registerSideDrawer, registerSimpleColorPicker, registerSlider, registerSplitButton, registerStatus, registerSwitch, registerTab, registerTabPanel, registerTable, registerTabs, registerTag, registerTagGroup, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView, registerVideoPlayer, richTextEditorDefinition, richTextViewDefinition, selectDefinition, selectableBoxDefinition, setLocale, sideDrawerDefinition, simpleColorPickerDefinition, sliderDefinition, splitButtonDefinition, statusDefinition, switchDefinition, tabDefinition, tabPanelDefinition, tableBodyDefinition, tableCellDefinition, tableDefinition, tableHeadDefinition, tableHeaderCellDefinition, tableRowDefinition, tableSortingButtonDefinition, tabsDefinition, tagDefinition, tagGroupDefinition, textAreaDefinition, textFieldDefinition, timePickerDefinition, toggletipDefinition, tooltipDefinition, treeItemDefinition, treeViewDefinition, videoPlayerDefinition };
+export { AccordionExpandMode, Appearance, AriaLive, Connotation, ConnotationDecorative, IconDecoration, LayoutSize, MediaSkipBy, MenuItemRole, Position, Role, RteAlignmentFeature, RteAtomFeature, RteBase, RteBoldFeature, RteCharacterCountFeature, RteConfig, RteDropHandlerFeature, RteFileHandlerFeature, RteFontSizePickerFeature, RteHardBreakFeature, RteHtmlParser, RteHtmlSerializer, RteInlineImageFeature, RteInputRuleFeature, RteItalicFeature, RteKeyboardShortcutsFeature, RteLinkFeature, RteListFeature, RteMonospaceFeature, RtePlaceholderFeature, RteStrikethroughFeature, RteSuggestFeature, RteTextBlockPickerFeature, RteTextColorPickerFeature, RteToolbarButtonFeature, RteToolbarFeature, RteUnderlineFeature, Shape, Size, Sticky, TabsGutters, Accordion as VwcAccordionElement, AccordionItem as VwcAccordionItemElement, ActionGroup as VwcActionGroupElement, Alert as VwcAlertElement, AudioPlayer as VwcAudioPlayerElement, Avatar as VwcAvatarElement, Badge as VwcBadgeElement, Banner as VwcBannerElement, Breadcrumb as VwcBreadcrumbElement, BreadcrumbItem as VwcBreadcrumbItemElement, Button as VwcButtonElement, Calendar as VwcCalendarElement, CalendarEvent as VwcCalendarEventElement, Card as VwcCardElement, Checkbox as VwcCheckboxElement, ColorPicker as VwcColorPickerElement, Combobox as VwcComboboxElement, ContextualHelp as VwcContextualHelpElement, Country as VwcCountryElement, CountryGroup as VwcCountryGroupElement, DataGridCell as VwcDataGridCellElement, DataGrid as VwcDataGridElement, DataGridRow as VwcDataGridRowElement, DatePicker as VwcDatePickerElement, DateRangePicker as VwcDateRangePickerElement, DateTimePicker as VwcDateTimePickerElement, DialPad as VwcDialPadElement, Dialog as VwcDialogElement, Divider as VwcDividerElement, EmptyState as VwcEmptyStateElement, Fab as VwcFabElement, FilePicker as VwcFilePickerElement, Flag as VwcFlagElement, Header as VwcHeaderElement, Icon as VwcIconElement, KbdKey as VwcKbdKeyElement, KbdShortcut as VwcKbdShortcutElement, Layout as VwcLayoutElement, Menu as VwcMenuElement, MenuItem as VwcMenuItemElement, NavDisclosure as VwcNavDisclosureElement, Nav as VwcNavElement, NavItem as VwcNavItemElement, Note as VwcNoteElement, NumberField as VwcNumberFieldElement, ListboxOption as VwcOptionElement, Pagination as VwcPaginationElement, PlatformSwitch as VwcPlatformSwitchElement, Popover as VwcPopoverElement, Progress as VwcProgressElement, ProgressRing as VwcProgressRingElement, Radio as VwcRadioElement, RadioGroup as VwcRadioGroupElement, RangeSlider as VwcRangeSliderElement, RichTextEditor as VwcRichTextEditorElement, RichTextView as VwcRichTextViewElement, SearchableSelect as VwcSearchableSelectElement, Select as VwcSelectElement, SelectableBox as VwcSelectableBoxElement, SideDrawer as VwcSideDrawerElement, SimpleColorPicker as VwcSimpleColorPickerElement, Slider as VwcSliderElement, SplitButton as VwcSplitButtonElement, Status as VwcStatusElement, Switch as VwcSwitchElement, Tab as VwcTabElement, TabPanel as VwcTabPanelElement, TableBody as VwcTableBodyElement, TableCell as VwcTableCellElement, Table as VwcTableElement, TableHead as VwcTableHeadElement, TableHeaderCell as VwcTableHeaderCellElement, TableRow as VwcTableRowElement, TableSortingButton as VwcTableSortingButtonElement, Tabs as VwcTabsElement, Tag as VwcTagElement, TagGroup as VwcTagGroupElement, TextArea as VwcTextAreaElement, TextField as VwcTextFieldElement, TimePicker as VwcTimePickerElement, Toggletip as VwcToggletipElement, Tooltip as VwcTooltipElement, TreeItem as VwcTreeItemElement, TreeView as VwcTreeViewElement, VideoPlayer as VwcVideoPlayerElement, accordionDefinition, accordionItemDefinition, actionGroupDefinition, alertDefinition, audioPlayerDefinition, avatarDefinition, badgeDefinition, bannerDefinition, breadcrumbDefinition, breadcrumbItemDefinition, buttonDefinition, calendarDefinition, calendarEventDefinition, cardDefinition, checkboxDefinition, colorPickerDefinition, comboboxDefinition, contextualHelpDefinition, countryDefinition, countryGroupDefinition, dataGridCellDefinition, dataGridDefinition, dataGridRowDefinition, datePickerDefinition, dateRangePickerDefinition, dateTimePickerDefinition, dialPadDefinition, dialogDefinition, dividerDefinition, emptyStateDefinition, fabDefinition, filePickerDefinition, flagDefinition, headerDefinition, iconDefinition, kbdKeyDefinition, kbdShortcutDefinition, layoutDefinition, listboxOptionDefinition, menuDefinition, menuItemDefinition, navDefinition, navDisclosureDefinition, navItemDefinition, noteDefinition, numberFieldDefinition, paginationDefinition, platformSwitchDefinition, popoverDefinition, progressDefinition, progressRingDefinition, radioDefinition, radioGroupDefinition, rangeSliderDefinition, registerAccordion, registerAccordionItem, registerActionGroup, registerAlert, registerAudioPlayer, registerAvatar, registerBadge, registerBanner, registerBreadcrumb, registerBreadcrumbItem, registerButton, registerCalendar, registerCalendarEvent, registerCard, registerCheckbox, registerColorPicker, registerCombobox, registerContextualHelp, registerCountry, registerCountryGroup, registerDataGrid, registerDatePicker, registerDateRangePicker, registerDateTimePicker, registerDialPad, registerDialog, registerDivider, registerEmptyState, registerFab, registerFilePicker, registerFlag, registerHeader, registerIcon, registerKbdKey, registerKbdShortcut, registerLayout, registerMenu, registerMenuItem, registerNav, registerNavDisclosure, registerNavItem, registerNote, registerNumberField, registerOption, registerPagination, registerPlatformSwitch, registerPopover, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerRangeSlider, registerRichTextEditor, registerRichTextView, registerSearchableSelect, registerSelect, registerSelectableBox, registerSideDrawer, registerSimpleColorPicker, registerSlider, registerSplitButton, registerStatus, registerSwitch, registerTab, registerTabPanel, registerTable, registerTabs, registerTag, registerTagGroup, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView, registerVideoPlayer, richTextEditorDefinition, richTextViewDefinition, searchableSelectDefinition, selectDefinition, selectableBoxDefinition, setLocale, sideDrawerDefinition, simpleColorPickerDefinition, sliderDefinition, splitButtonDefinition, statusDefinition, switchDefinition, tabDefinition, tabPanelDefinition, tableBodyDefinition, tableCellDefinition, tableDefinition, tableHeadDefinition, tableHeaderCellDefinition, tableRowDefinition, tableSortingButtonDefinition, tabsDefinition, tagDefinition, tagGroupDefinition, textAreaDefinition, textFieldDefinition, timePickerDefinition, toggletipDefinition, tooltipDefinition, treeItemDefinition, treeViewDefinition, videoPlayerDefinition };

package/kbd-key/index.cjs

@@ -1,5 +1,5 @@
-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/platform.cjs`);var a=`:host{vertical-align:middle;display:inline-block}.base{--_connotation-color-primary:var(--vvd-kbd-key-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-kbd-key-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-kbd-key-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-kbd-key-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-kbd-key-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-kbd-key-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-kbd-key-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-kbd-key-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_kbd-key-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed);font-size:calc(var(--_kbd-key-size) / 2);min-inline-size:var(--_kbd-key-size);padding-inline:calc(var(--_kbd-key-size) / 4);white-space:nowrap;border:0;justify-content:center;align-items:center;display:inline-flex}.base.appearance-dropshadow{--_kbd-key-shadow-size:calc(var(--_kbd-key-size) * .0415);background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-300), var(--_kbd-key-shadow-size) var(--_kbd-key-shadow-size) 0 0 var(--vvd-color-neutral-300);color:var(--vvd-color-canvas-text)}.base.size-super-condensed{--_kbd-key-size:16px;border-radius:3px;font-size:10px}.base.size-condensed{--_kbd-key-size:24px;border-radius:6px}.base:not(.size-super-condensed,.size-condensed,.size-expanded){--_kbd-key-size:32px;border-radius:6px}.base.size-expanded{--_kbd-key-size:40px;border-radius:8px}`,o=new Set(`Alt.Control.Shift.Enter.Tab.Space.Backspace.Escape.ArrowUp.ArrowDown.ArrowLeft.ArrowRight.End.Home.PageUp.PageDown.A.B.C.D.E.F.G.H.I.J.K.L.M.N.O.P.Q.R.S.T.U.V.W.X.Y.Z.0.1.2.3.4.5.6.7.8.9.Mod.Custom`.split(`.`)),s={Enter:`↵`,Tab:`⇥`,Space:`␣`,Backspace:`⌫`,Escape:`Esc`,Shift:`⇧`,Control:`Ctrl`,Alt:`Alt`,ArrowUp:`↑`,ArrowDown:`↓`,ArrowLeft:`←`,ArrowRight:`→`,End:`End`,Home:`Home`,PageUp:`PgUp`,PageDown:`PgDn`},c={Control:`⌃`,Alt:`⌥`},l={Enter:`Enter`,Tab:`Tab`,Space:`Space`,Backspace:`Backspace`,Shift:`Shift`,ArrowUp:`Up Arrow`,ArrowDown:`Down Arrow`,ArrowLeft:`Left Arrow`,ArrowRight:`Right Arrow`},u={Control:`Control`,Alt:`Option`},d=class extends e.t{get _isApple(){return this.keyboard===`apple`?!0:this.keyboard===`standard`?!1:i.t()}get _displayLabel(){return!this.name||this.name===`Custom`?``:o.has(this.name)?this.name===`Mod`?this._isApple?`⌘`:`Ctrl`:this._isApple&&this.name in c?c[this.name]:s[this.name]??this.name:(console.warn(`[kbd-key] Unsupported key name: "${this.name}". Nothing will be displayed.`),``)}get _ariaKeyLabel(){return!this.name||this.name===`Custom`?null:this.name===`Mod`?this._isApple?`Command`:null:this._isApple&&this.name in u?u[this.name]:l[this.name]??null}_getKeyshortcutsKey(){return this.keyshortcutsKey===void 0?this.name?this.name===`Custom`?this.textContent.trim()||null:this.name===`Mod`?this._isApple?`Meta`:`Control`:this.name:null:this.keyshortcutsKey||null}};n.t([e.m],d.prototype,`name`,void 0),n.t([e.m],d.prototype,`keyboard`,void 0),n.t([e.m],d.prototype,`appearance`,void 0),n.t([e.m],d.prototype,`size`,void 0),n.t([e.m({attribute:`keyshortcuts-key`})],d.prototype,`keyshortcutsKey`,void 0);var f=({appearance:e,size:t})=>r.t(`base`,[`appearance-${e}`,!!e],[`size-${t}`,!!t]),p=e.u(`kbd-key`,d,()=>e.p`<kbd
-		class="${f}"
+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/platform.cjs`);var a=`:host{vertical-align:middle;display:inline-block}.base{--_connotation-color-primary:var(--vvd-kbd-key-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-kbd-key-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-soft:var(--vvd-kbd-key-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-kbd-key-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-kbd-key-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-kbd-key-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-kbd-key-accent-dim,var(--vvd-color-neutral-200));--_connotation-color-pale:var(--vvd-kbd-key-accent-pale,var(--vvd-color-neutral-300));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_kbd-key-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed);font-size:calc(var(--_kbd-key-size) / 2);min-inline-size:var(--_kbd-key-size);padding-inline:calc(var(--_kbd-key-size) / 4);white-space:nowrap;border:0;justify-content:center;align-items:center;display:inline-flex}.base.appearance-dropshadow{--_kbd-key-shadow-size:calc(var(--_kbd-key-size) * .0415);background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 1px var(--vvd-color-neutral-300), var(--_kbd-key-shadow-size) var(--_kbd-key-shadow-size) 0 0 var(--vvd-color-neutral-300);color:var(--vvd-color-canvas-text)}.base.size-super-condensed{--_kbd-key-size:16px;border-radius:3px;font-size:10px}.base.size-condensed{--_kbd-key-size:24px;border-radius:6px}.base:not(.size-super-condensed,.size-condensed,.size-expanded){--_kbd-key-size:32px;border-radius:6px}.base.size-expanded{--_kbd-key-size:40px;border-radius:8px}`,o=new Set(`Alt.Control.Shift.Enter.Tab.Space.Backspace.Escape.ArrowUp.ArrowDown.ArrowLeft.ArrowRight.End.Home.PageUp.PageDown.A.B.C.D.E.F.G.H.I.J.K.L.M.N.O.P.Q.R.S.T.U.V.W.X.Y.Z.0.1.2.3.4.5.6.7.8.9.Mod.Custom`.split(`.`)),s={Enter:`↵`,Tab:`⇥`,Space:`␣`,Backspace:`⌫`,Escape:`Esc`,Shift:`⇧`,Control:`Ctrl`,Alt:`Alt`,ArrowUp:`↑`,ArrowDown:`↓`,ArrowLeft:`←`,ArrowRight:`→`,End:`End`,Home:`Home`,PageUp:`PgUp`,PageDown:`PgDn`},c={Control:`⌃`,Alt:`⌥`},l={Enter:`Enter`,Tab:`Tab`,Space:`Space`,Backspace:`Backspace`,Shift:`Shift`,ArrowUp:`Up Arrow`,ArrowDown:`Down Arrow`,ArrowLeft:`Left Arrow`,ArrowRight:`Right Arrow`},u={Control:`Control`,Alt:`Option`},d=class extends e.t{get _isApple(){return this.keyboard===`apple`?!0:this.keyboard===`standard`?!1:i.t()}get _displayLabel(){return!this.name||this.name===`Custom`?``:o.has(this.name)?this.name===`Mod`?this._isApple?`⌘`:`Ctrl`:this._isApple&&this.name in c?c[this.name]:s[this.name]??this.name:(console.warn(`[kbd-key] Unsupported key name: "${this.name}". Nothing will be displayed.`),``)}get _ariaKeyLabel(){return!this.name||this.name===`Custom`?null:this.name===`Mod`?this._isApple?`Command`:null:this._isApple&&this.name in u?u[this.name]:l[this.name]??null}_getKeyshortcutsKey(){return this.keyshortcutsKey===void 0?this.name?this.name===`Custom`?this.textContent.trim()||null:this.name===`Mod`?this._isApple?`Meta`:`Control`:this.name:null:this.keyshortcutsKey||null}};n.t([e.m],d.prototype,`name`,void 0),n.t([e.m],d.prototype,`keyboard`,void 0),n.t([e.m],d.prototype,`appearance`,void 0),n.t([e.m],d.prototype,`size`,void 0),n.t([e.m({attribute:`keyshortcuts-key`})],d.prototype,`keyshortcutsKey`,void 0);var f=e.u(`kbd-key`,d,()=>e.p`<kbd
+		class="${e=>r.t(`base`,[`appearance-${e.appearance}`,!!e.appearance],[`size-${e.size}`,!!e.size])}"
 		aria-label="${e=>e._ariaKeyLabel}"
 		>${t.t(e=>e.name===`Custom`,e.p`<slot></slot>`)}${t.t(e=>!!(e.name&&e.name!==`Custom`&&e._displayLabel),e.p`${e=>e._displayLabel}`)}</kbd
-	>`,[],{styles:a});e.d(p)();
+	>`,[],{styles:a});e.d(f)();

package/kbd-key/index.js

@@ -51,14 +51,10 @@ var l = ":host{vertical-align:middle;display:inline-block}.base{--_connotation-c
 		return this.keyshortcutsKey === void 0 ? this.name ? this.name === "Custom" ? this.textContent.trim() || null : this.name === "Mod" ? this._isApple ? "Meta" : "Control" : this.name : null : this.keyshortcutsKey || null;
 	}
 };
-o([t], h.prototype, "name", void 0), o([t], h.prototype, "keyboard", void 0), o([t], h.prototype, "appearance", void 0), o([t], h.prototype, "size", void 0), o([t({ attribute: "keyshortcuts-key" })], h.prototype, "keyshortcutsKey", void 0);
-//#endregion
-//#region src/lib/kbd-key/kbd-key.template.ts
-var g = ({ appearance: e, size: t }) => s("base", [`appearance-${e}`, !!e], [`size-${t}`, !!t]);
 //#endregion
 //#region src/lib/kbd-key/index.ts
-e(i("kbd-key", h, () => n`<kbd
-		class="${g}"
+o([t], h.prototype, "name", void 0), o([t], h.prototype, "keyboard", void 0), o([t], h.prototype, "appearance", void 0), o([t], h.prototype, "size", void 0), o([t({ attribute: "keyshortcuts-key" })], h.prototype, "keyshortcutsKey", void 0), e(i("kbd-key", h, () => n`<kbd
+		class="${(e) => s("base", [`appearance-${e.appearance}`, !!e.appearance], [`size-${e.size}`, !!e.size])}"
 		aria-label="${(e) => e._ariaKeyLabel}"
 		>${a((e) => e.name === "Custom", n`<slot></slot>`)}${a((e) => !!(e.name && e.name !== "Custom" && e._displayLabel), n`${(e) => e._displayLabel}`)}</kbd
 	>`, [], { styles: l }))();

package/layout/index.cjs

@@ -1,3 +1,5 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/class-names.cjs`);var r=class extends e.t{};t.t([e.m],r.prototype,`gutters`,void 0),t.t([e.m({attribute:`column-basis`})],r.prototype,`columnBasis`,void 0),t.t([e.m({attribute:`column-spacing`})],r.prototype,`columnSpacing`,void 0),t.t([e.m({attribute:`row-spacing`})],r.prototype,`rowSpacing`,void 0),t.t([e.m({attribute:`auto-sizing`})],r.prototype,`autoSizing`,void 0);var i=`.control{grid-auto-rows:var(--layout-grid-template-rows,min-content);display:grid}@media not all and (width>=600px){.control.column-basis-medium,.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(100%, 1fr)))}}@media (width>=600px){.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}}.control.column-spacing-small{column-gap:var(--layout-column-gap,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))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap,0 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))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap,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))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap,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))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap,0 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))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap,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))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.gutters-small{margin: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)))}.control.gutters-small-inline{margin:0 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)))}.control.gutters-small-block{margin: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))) 0}.control.gutters-medium{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0}.control.gutters-large{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0}.control.auto-sizing-fill{--_auto-sizing:auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing:auto-fit}`,a=e.p` <div class="${({columnBasis:e,gutters:t,columnSpacing:r,autoSizing:i,rowSpacing:a})=>n.t(`control`,[`column-basis-${e}`,!!e],[`gutters-${t}`,!!t],[`column-spacing-${r}`,!!r],[`row-spacing-${a||r}`,!!a||!!r],[`auto-sizing-${i}`,!!i])}">
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/class-names.cjs`);var r=class extends e.t{};t.t([e.m],r.prototype,`gutters`,void 0),t.t([e.m({attribute:`column-basis`})],r.prototype,`columnBasis`,void 0),t.t([e.m({attribute:`column-spacing`})],r.prototype,`columnSpacing`,void 0),t.t([e.m({attribute:`row-spacing`})],r.prototype,`rowSpacing`,void 0),t.t([e.m({attribute:`auto-sizing`})],r.prototype,`autoSizing`,void 0);var i=`.control{grid-auto-rows:var(--layout-grid-template-rows,min-content);display:grid}@media not all and (width>=600px){.control.column-basis-medium,.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(100%, 1fr)))}}@media (width>=600px){.control.column-basis-small{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(160px, 1fr)))}.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block),.control.column-basis-medium{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(320px, 1fr)))}.control.column-basis-large{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(380px, 1fr)))}.control.column-basis-block{grid-template-columns:var(--layout-grid-template-columns,repeat(var(--_auto-sizing), minmax(1fr, 1fr)))}}.control.column-spacing-small{column-gap:var(--layout-column-gap,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))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap,0 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))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap,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))) 0)}.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block),.control.column-spacing-medium{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap,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))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap,0 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))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap,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))) 0)}.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block),.control.row-spacing-medium{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap,0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap,calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0)}.control.gutters-small{margin: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)))}.control.gutters-small-inline{margin:0 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)))}.control.gutters-small-block{margin: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))) 0}.control.gutters-medium{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.gutters-medium-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) 0}.control.gutters-large{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-inline{margin:0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.gutters-large-block{margin:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) 0}.control.auto-sizing-fill{--_auto-sizing:auto-fill}.control:not(.auto-sizing-fill):not(.auto-sizing-fit),.control.auto-sizing-fit{--_auto-sizing:auto-fit}`,a=e.p` <div
+	class="${e=>n.t(`control`,[`column-basis-${e.columnBasis}`,!!e.columnBasis],[`gutters-${e.gutters}`,!!e.gutters],[`column-spacing-${e.columnSpacing}`,!!e.columnSpacing],[`row-spacing-${e.rowSpacing?e.rowSpacing:e.columnSpacing}`,!!e.rowSpacing||!!e.columnSpacing],[`auto-sizing-${e.autoSizing}`,!!e.autoSizing])}"
+>
 	<slot></slot>
 </div>`,o=e.u(`layout`,r,a,[],{styles:i});e.d(o)();