@vonage/vivid 5.3.0 → 5.4.0

package/dialog/definition.cjs

@@ -4,7 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const icon_definition = require('../icon/definition.cjs');
 const button_definition = require('../unbundled/definition.cjs');
-const elevation_definition = require('../unbundled/definition5.cjs');
+const elevation_definition = require('../unbundled/definition6.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
 const index = require('../unbundled/index.cjs');
@@ -12,7 +12,7 @@ const delegatesAria = require('../unbundled/delegates-aria.cjs');
 const localized = require('../unbundled/localized.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
-const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
+const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:none;max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-block-size:fit-content;min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/dialog/definition.js

@@ -1,6 +1,6 @@
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
 import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
-import { E as Elevation, e as elevationDefinition } from '../unbundled/definition5.js';
+import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, observable, when, slotted, html } from '@microsoft/fast-element';
 import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
@@ -8,7 +8,7 @@ import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-ar
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 
-const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
+const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:none;max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-block-size:fit-content;min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/dialog/index.cjs

@@ -1,17 +1,17 @@
-"use strict";const h=require("../bundled/definition2.cjs"),p=require("../bundled/definition3.cjs"),u=require("../bundled/definition4.cjs"),t=require("../bundled/vivid-element.cjs"),v=require("../bundled/index.cjs"),m=require("../bundled/delegates-aria.cjs"),y=require("../bundled/localized.cjs"),d=require("../bundled/when.cjs"),c=require("../bundled/slotted.cjs"),x=require("../bundled/class-names.cjs"),w='.base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:"";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}';var k=Object.defineProperty,l=(i,o,s,r)=>{for(var e=void 0,n=i.length-1,b;n>=0;n--)(b=i[n])&&(e=b(o,s,e)||e);return e&&k(o,s,e),e};class a extends y.Localized(m.DelegatesAria(t.VividElement)){constructor(){super(...arguments),this.open=!1,this.fullWidthBody=!1,this.dismissButtonAriaLabel=null,this.noLightDismiss=!1,this.noDismissOnEsc=!1,this.noDismissButton=!1,this.nonDismissible=!1,this.modal=!1,this.scrollableBody=!1,this._openedAsModal=!1,this.#i=o=>{if(o.target!==this.#e||!this.#t("light-dismiss"))return;const s=this.#e.getBoundingClientRect();s.top<=o.clientY&&o.clientY<=s.top+s.height&&s.left<=o.clientX&&o.clientX<=s.left+s.width||this._handleCloseRequest()},this.#a=o=>{o.target.method==="dialog"&&(this.open=!1)}}modalChanged(o,s){this.open&&(this._openedAsModal=s,this.$fastController.isConnected&&(this.#s(),this.#l()))}set returnValue(o){this.#e&&(this.#e.returnValue=o)}get returnValue(){return this.#e?.returnValue}#o;get#e(){return this.#o||(this.#o=this.shadowRoot.querySelector("dialog")),this.#o}openChanged(o,s){o!==void 0&&(s?(this._openedAsModal=this._openedAsModal||this.modal,this.$fastController.isConnected&&this.#l(),this.$emit("open",void 0,{bubbles:!1})):(this._openedAsModal=!1,this.$fastController.isConnected&&this.#s(),this.$emit("close",this.returnValue,{bubbles:!1})))}get _showDismissButton(){return this.#t("dismiss-button")}#t(o){if(this.nonDismissible)return!1;switch(o){case"escape":return!this.noDismissOnEsc;case"dismiss-button":return!this.noDismissButton;case"light-dismiss":return!this.noLightDismiss}}#i;#a;_onKeyDown(o){return v.handleEscapeKeyAndStopPropogation(o)&&this._openedAsModal?(this.#t("escape")&&this._handleCloseRequest(),!1):!0}_handleCloseRequest(){this.$emit("cancel",void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}close(){this.open=!1}show(){if(this._openedAsModal&&!this.modal)throw new DOMException("Failed to execute 'show' on 'Dialog': The dialog is already open as a modal dialog, and therefore cannot be opened as a non-modal dialog.","InvalidStateError");this.open=!0}showModal(){if(this.open&&!this._openedAsModal)throw new DOMException("Failed to execute 'showModal' on 'Dialog': The dialog is already open as a non-modal dialog, and therefore cannot be opened as a modal dialog.","InvalidStateError");this._openedAsModal=!0,this.open=!0}#s(){this.#e.close()}#l(){this._openedAsModal?this.#e.showModal():this.#e.show()}connectedCallback(){super.connectedCallback(),this.open&&this.#l(),this.#e.addEventListener("mousedown",this.#i),this.#e.addEventListener("submit",this.#a)}disconnectedCallback(){super.disconnectedCallback(),this.open&&this.#s(),this.#e.removeEventListener("mousedown",this.#i),this.#e.removeEventListener("submit",this.#a)}}l([t.attr({mode:"boolean"})],a.prototype,"open");l([t.attr],a.prototype,"icon");l([t.attr({attribute:"icon-placement"})],a.prototype,"iconPlacement");l([t.attr],a.prototype,"subtitle");l([t.attr],a.prototype,"headline");l([t.attr({attribute:"full-width-body",mode:"boolean"})],a.prototype,"fullWidthBody");l([t.attr({attribute:"dismiss-button-aria-label"})],a.prototype,"dismissButtonAriaLabel");l([t.attr({attribute:"no-light-dismiss",mode:"boolean"})],a.prototype,"noLightDismiss");l([t.attr({attribute:"no-dismiss-on-esc",mode:"boolean"})],a.prototype,"noDismissOnEsc");l([t.attr({attribute:"no-dismiss-button",mode:"boolean"})],a.prototype,"noDismissButton");l([t.attr({attribute:"non-dismissible",mode:"boolean"})],a.prototype,"nonDismissible");l([t.attr({mode:"boolean"})],a.prototype,"modal");l([t.attr({mode:"boolean",attribute:"scrollable-body"})],a.prototype,"scrollableBody");l([t.observable],a.prototype,"_openedAsModal");l([t.observable],a.prototype,"bodySlottedContent");l([t.observable],a.prototype,"footerSlottedContent");l([t.observable],a.prototype,"actionItemsSlottedContent");const $=({iconPlacement:i,bodySlottedContent:o,footerSlottedContent:s,actionItemsSlottedContent:r,_openedAsModal:e,scrollableBody:n})=>x.classNames("base",[`icon-placement-${i}`,!!i],["hide-body",!o?.length],["hide-footer",!(s?.length||r?.length)],["modal",e],["scrollable-body",!!n]);function D(i){return t.html`
+"use strict";const h=require("../bundled/definition2.cjs"),p=require("../bundled/definition3.cjs"),u=require("../bundled/definition4.cjs"),t=require("../bundled/vivid-element.cjs"),v=require("../bundled/index.cjs"),m=require("../bundled/delegates-aria.cjs"),y=require("../bundled/localized.cjs"),d=require("../bundled/when.cjs"),c=require("../bundled/slotted.cjs"),x=require("../bundled/class-names.cjs"),w='.base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:none;max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-block-size:fit-content;min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:"";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}';var k=Object.defineProperty,l=(i,o,s,r)=>{for(var e=void 0,n=i.length-1,b;n>=0;n--)(b=i[n])&&(e=b(o,s,e)||e);return e&&k(o,s,e),e};class a extends y.Localized(m.DelegatesAria(t.VividElement)){constructor(){super(...arguments),this.open=!1,this.fullWidthBody=!1,this.dismissButtonAriaLabel=null,this.noLightDismiss=!1,this.noDismissOnEsc=!1,this.noDismissButton=!1,this.nonDismissible=!1,this.modal=!1,this.scrollableBody=!1,this._openedAsModal=!1,this.#i=o=>{if(o.target!==this.#e||!this.#t("light-dismiss"))return;const s=this.#e.getBoundingClientRect();s.top<=o.clientY&&o.clientY<=s.top+s.height&&s.left<=o.clientX&&o.clientX<=s.left+s.width||this._handleCloseRequest()},this.#a=o=>{o.target.method==="dialog"&&(this.open=!1)}}modalChanged(o,s){this.open&&(this._openedAsModal=s,this.$fastController.isConnected&&(this.#s(),this.#l()))}set returnValue(o){this.#e&&(this.#e.returnValue=o)}get returnValue(){return this.#e?.returnValue}#o;get#e(){return this.#o||(this.#o=this.shadowRoot.querySelector("dialog")),this.#o}openChanged(o,s){o!==void 0&&(s?(this._openedAsModal=this._openedAsModal||this.modal,this.$fastController.isConnected&&this.#l(),this.$emit("open",void 0,{bubbles:!1})):(this._openedAsModal=!1,this.$fastController.isConnected&&this.#s(),this.$emit("close",this.returnValue,{bubbles:!1})))}get _showDismissButton(){return this.#t("dismiss-button")}#t(o){if(this.nonDismissible)return!1;switch(o){case"escape":return!this.noDismissOnEsc;case"dismiss-button":return!this.noDismissButton;case"light-dismiss":return!this.noLightDismiss}}#i;#a;_onKeyDown(o){return v.handleEscapeKeyAndStopPropogation(o)&&this._openedAsModal?(this.#t("escape")&&this._handleCloseRequest(),!1):!0}_handleCloseRequest(){this.$emit("cancel",void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}close(){this.open=!1}show(){if(this._openedAsModal&&!this.modal)throw new DOMException("Failed to execute 'show' on 'Dialog': The dialog is already open as a modal dialog, and therefore cannot be opened as a non-modal dialog.","InvalidStateError");this.open=!0}showModal(){if(this.open&&!this._openedAsModal)throw new DOMException("Failed to execute 'showModal' on 'Dialog': The dialog is already open as a non-modal dialog, and therefore cannot be opened as a modal dialog.","InvalidStateError");this._openedAsModal=!0,this.open=!0}#s(){this.#e.close()}#l(){this._openedAsModal?this.#e.showModal():this.#e.show()}connectedCallback(){super.connectedCallback(),this.open&&this.#l(),this.#e.addEventListener("mousedown",this.#i),this.#e.addEventListener("submit",this.#a)}disconnectedCallback(){super.disconnectedCallback(),this.open&&this.#s(),this.#e.removeEventListener("mousedown",this.#i),this.#e.removeEventListener("submit",this.#a)}}l([t.attr({mode:"boolean"})],a.prototype,"open");l([t.attr],a.prototype,"icon");l([t.attr({attribute:"icon-placement"})],a.prototype,"iconPlacement");l([t.attr],a.prototype,"subtitle");l([t.attr],a.prototype,"headline");l([t.attr({attribute:"full-width-body",mode:"boolean"})],a.prototype,"fullWidthBody");l([t.attr({attribute:"dismiss-button-aria-label"})],a.prototype,"dismissButtonAriaLabel");l([t.attr({attribute:"no-light-dismiss",mode:"boolean"})],a.prototype,"noLightDismiss");l([t.attr({attribute:"no-dismiss-on-esc",mode:"boolean"})],a.prototype,"noDismissOnEsc");l([t.attr({attribute:"no-dismiss-button",mode:"boolean"})],a.prototype,"noDismissButton");l([t.attr({attribute:"non-dismissible",mode:"boolean"})],a.prototype,"nonDismissible");l([t.attr({mode:"boolean"})],a.prototype,"modal");l([t.attr({mode:"boolean",attribute:"scrollable-body"})],a.prototype,"scrollableBody");l([t.observable],a.prototype,"_openedAsModal");l([t.observable],a.prototype,"bodySlottedContent");l([t.observable],a.prototype,"footerSlottedContent");l([t.observable],a.prototype,"actionItemsSlottedContent");const $=({iconPlacement:i,bodySlottedContent:o,footerSlottedContent:s,actionItemsSlottedContent:r,_openedAsModal:e,scrollableBody:n})=>x.classNames("base",[`icon-placement-${i}`,!!i],["hide-body",!o?.length],["hide-footer",!(s?.length||r?.length)],["modal",e],["scrollable-body",!!n]);function D(i){return t.html`
 		<${i} class="icon" name="${o=>o.icon}"></${i}>
 	`}function g(){return t.html`
 		<h2 class="headline" id="dialog-headline">${i=>i.headline}</h2>
-	`}function f(){return t.html` <h3 class="subtitle">${i=>i.subtitle}</h3> `}function C(){return t.html`
+	`}function f(){return t.html` <h3 class="subtitle">${i=>i.subtitle}</h3> `}function z(){return t.html`
 		<div class="header-text">${g()} ${f()}</div>
-	`}function _(i){return t.html`
+	`}function C(i){return t.html`
 	<${i}
 		aria-label="${o=>o.dismissButtonAriaLabel||o.locale.dialog.dismissButtonLabel}"
 		size="condensed"
 		class="dismiss-button"
 		icon="close-line"
 		@click="${o=>o._handleCloseRequest()}"
-	></${i}>`}const z=i=>{const o=i.tagFor(u.Elevation),s=i.tagFor(h.Icon),r=i.tagFor(p.Button);return t.html`
+	></${i}>`}const _=i=>{const o=i.tagFor(u.Elevation),s=i.tagFor(h.Icon),r=i.tagFor(p.Button);return t.html`
 	<${o} dp="8" not-relative>
 		<dialog class="${$}"
 				@keydown="${(e,n)=>e._onKeyDown(n.event)}"
@@ -25,10 +25,10 @@
 							<slot name="graphic">
 								${d.when(e=>e.icon,D(s))}
 							</slot>
-							${d.when(e=>e.headline&&e.subtitle,C())}
+							${d.when(e=>e.headline&&e.subtitle,z())}
 							${d.when(e=>e.headline&&!e.subtitle,g())}
 							${d.when(e=>e.subtitle&&!e.headline,f())}
-							${d.when(e=>e._showDismissButton,_(r))}
+							${d.when(e=>e._showDismissButton,C(r))}
 					</div>
 					<div class="body ${e=>e.fullWidthBody?"full-width":""}" >
 						<slot name="body" ${c.slotted("bodySlottedContent")}></slot>
@@ -44,4 +44,4 @@
 				</div>
 			</slot>
 		</dialog>
-	</${o}>`},A=t.defineVividComponent("dialog",a,z,[h.iconDefinition,p.buttonDefinition,u.elevationDefinition],{styles:w}),B=t.createRegisterFunction(A);B();
+	</${o}>`},A=t.defineVividComponent("dialog",a,_,[h.iconDefinition,p.buttonDefinition,u.elevationDefinition],{styles:w}),B=t.createRegisterFunction(A);B();

package/dialog/index.js

@@ -2,19 +2,19 @@ import { I as f, i as g } from "../bundled/definition2.js";
 import { B as v, b as y } from "../bundled/definition3.js";
 import { E as x, e as w } from "../bundled/definition4.js";
 import { V as k, a as l, o as b, h as r, c as D, d as $ } from "../bundled/vivid-element.js";
-import { h as C } from "../bundled/index.js";
-import { D as _, d as z } from "../bundled/delegates-aria.js";
+import { h as z } from "../bundled/index.js";
+import { D as C, d as _ } from "../bundled/delegates-aria.js";
 import { L as B } from "../bundled/localized.js";
 import { w as c } from "../bundled/when.js";
 import { s as h } from "../bundled/slotted.js";
 import { c as A } from "../bundled/class-names.js";
-const M = '.base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:"";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}';
+const M = '.base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:none;max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-block-size:fit-content;min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) )}.base:not(.modal){z-index:var(--dialog-z-index, 1);inset-block:var(--dialog-inset-block, auto);inset-inline:var(--dialog-inset-inline, 0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:"";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{overflow:hidden auto;max-block-size:var(--dialog-body-max-block-size, 300px);--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.scrollable-body .body{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{margin:0;font:var(--vvd-typography-heading-4)}.subtitle{margin:0;font:var(--vvd-typography-base)}slot[name=main]{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}slot[name=main]{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}';
 var E = Object.defineProperty, s = (t, o, a, d) => {
   for (var e = void 0, n = t.length - 1, p; n >= 0; n--)
     (p = t[n]) && (e = p(o, a, e) || e);
   return e && E(o, a, e), e;
 };
-class i extends B(_(k)) {
+class i extends B(C(k)) {
   constructor() {
     super(...arguments), this.open = !1, this.fullWidthBody = !1, this.dismissButtonAriaLabel = null, this.noLightDismiss = !1, this.noDismissOnEsc = !1, this.noDismissButton = !1, this.nonDismissible = !1, this.modal = !1, this.scrollableBody = !1, this._openedAsModal = !1, this.#i = (o) => {
       if (o.target !== this.#e || !this.#t("light-dismiss"))
@@ -70,7 +70,7 @@ class i extends B(_(k)) {
    * @internal
    */
   _onKeyDown(o) {
-    return C(o) && this._openedAsModal ? (this.#t("escape") && this._handleCloseRequest(), !1) : !0;
+    return z(o) && this._openedAsModal ? (this.#t("escape") && this._handleCloseRequest(), !1) : !0;
   }
   /**
    * @internal
@@ -217,7 +217,7 @@ const F = (t) => {
 		<dialog class="${L}"
 				@keydown="${(e, n) => e._onKeyDown(n.event)}"
 				@cancel="${(e, n) => n.event.preventDefault()}"
-				${z({
+				${_({
     ariaModal: (e) => String(e._openedAsModal)
   })}
 				aria-labelledby="${(e) => e.headline ? "dialog-headline" : null}"

package/elevation/definition.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 require('../unbundled/vivid-element.cjs');
-const elevation_definition = require('../unbundled/definition5.cjs');
+const elevation_definition = require('../unbundled/definition6.cjs');
 
 
 

package/elevation/definition.js

@@ -1,2 +1,2 @@
 import '../unbundled/vivid-element.js';
-export { e as elevationDefinition, r as registerElevation } from '../unbundled/definition5.js';
+export { e as elevationDefinition, r as registerElevation } from '../unbundled/definition6.js';

package/fab/definition.js

@@ -1,7 +1,7 @@
 import { iconDefinition } from '../icon/definition.js';
 import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, ref, html } from '@microsoft/fast-element';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
 import { V as VividFoundationButton } from '../unbundled/button.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { d as delegateAria } from '../unbundled/delegates-aria.js';

package/header/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const elevation_definition = require('../unbundled/definition5.cjs');
+const elevation_definition = require('../unbundled/definition6.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
 const delegatesAria = require('../unbundled/delegates-aria.cjs');

package/header/definition.js

@@ -1,4 +1,4 @@
-import { E as Elevation, e as elevationDefinition } from '../unbundled/definition5.js';
+import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, html } from '@microsoft/fast-element';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';

package/index.cjs

@@ -44,8 +44,7 @@ const navItem_definition = require('./nav-item/definition.cjs');
 const nav_definition = require('./nav/definition.cjs');
 const note_definition = require('./note/definition.cjs');
 const numberField_definition = require('./number-field/definition.cjs');
-const option_definition = require('./option/definition.cjs');
-const option = require('./unbundled/option.cjs');
+const option_definition = require('./unbundled/definition3.cjs');
 const pagination_definition = require('./pagination/definition.cjs');
 const progressRing_definition = require('./progress-ring/definition.cjs');
 const progress_definition = require('./progress/definition.cjs');
@@ -72,7 +71,7 @@ const timePicker_definition = require('./time-picker/definition.cjs');
 const timeSelectionPicker_template = require('./unbundled/time-selection-picker.template.cjs');
 const toggletip_definition = require('./toggletip/definition.cjs');
 const tooltip_definition = require('./tooltip/definition.cjs');
-const treeItem_definition = require('./unbundled/definition3.cjs');
+const treeItem_definition = require('./unbundled/definition4.cjs');
 const treeView_definition = require('./tree-view/definition.cjs');
 const videoPlayer_definition = require('./video-player/definition.cjs');
 
@@ -208,9 +207,9 @@ exports.registerNote = note_definition.registerNote;
 exports.VwcNumberFieldElement = numberField_definition.VwcNumberFieldElement;
 exports.numberFieldDefinition = numberField_definition.numberFieldDefinition;
 exports.registerNumberField = numberField_definition.registerNumberField;
+exports.VwcOptionElement = option_definition.ListboxOption;
 exports.listboxOptionDefinition = option_definition.listboxOptionDefinition;
 exports.registerOption = option_definition.registerOption;
-exports.VwcOptionElement = option.ListboxOption;
 exports.VwcPaginationElement = pagination_definition.VwcPaginationElement;
 exports.paginationDefinition = pagination_definition.paginationDefinition;
 exports.registerPagination = pagination_definition.registerPagination;

package/index.js

@@ -40,8 +40,7 @@ export { VwcNavItemElement, navItemDefinition, registerNavItem } from './nav-ite
 export { VwcNavElement, navDefinition, registerNav } from './nav/definition.js';
 export { VwcNoteElement, noteDefinition, registerNote } from './note/definition.js';
 export { VwcNumberFieldElement, numberFieldDefinition, registerNumberField } from './number-field/definition.js';
-export { listboxOptionDefinition, registerOption } from './option/definition.js';
-export { L as VwcOptionElement } from './unbundled/option.js';
+export { L as VwcOptionElement, l as listboxOptionDefinition, r as registerOption } from './unbundled/definition3.js';
 export { VwcPaginationElement, paginationDefinition, registerPagination } from './pagination/definition.js';
 export { VwcProgressRingElement, progressRingDefinition, registerProgressRing } from './progress-ring/definition.js';
 export { VwcProgressElement, progressDefinition, registerProgress } from './progress/definition.js';
@@ -68,6 +67,6 @@ export { registerTimePicker, timePickerDefinition } from './time-picker/definiti
 export { T as VwcTimePickerElement } from './unbundled/time-selection-picker.template.js';
 export { VwcToggletipElement, registerToggletip, toggletipDefinition } from './toggletip/definition.js';
 export { VwcTooltipElement, registerTooltip, tooltipDefinition } from './tooltip/definition.js';
-export { T as VwcTreeItemElement, r as registerTreeItem, t as treeItemDefinition } from './unbundled/definition3.js';
+export { T as VwcTreeItemElement, r as registerTreeItem, t as treeItemDefinition } from './unbundled/definition4.js';
 export { VwcTreeViewElement, registerTreeView, treeViewDefinition } from './tree-view/definition.js';
 export { VwcVideoPlayerElement, registerVideoPlayer, videoPlayerDefinition } from './video-player/definition.js';

package/lib/accordion/accordion.d.ts

@@ -3,7 +3,7 @@ export declare const AccordionExpandMode: {
     readonly single: "single";
     readonly multi: "multi";
 };
-export type AccordionExpandMode = typeof AccordionExpandMode[keyof typeof AccordionExpandMode];
+export type AccordionExpandMode = (typeof AccordionExpandMode)[keyof typeof AccordionExpandMode];
 export declare class Accordion extends VividElement {
     expandmode: AccordionExpandMode;
     activeid: string | null;

package/lib/accordion/definition.d.ts

@@ -3,6 +3,6 @@ export declare const AccordionExpandMode: {
     readonly single: "single";
     readonly multi: "multi";
 };
-export type AccordionExpandMode = typeof AccordionExpandMode[keyof typeof AccordionExpandMode];
+export type AccordionExpandMode = (typeof AccordionExpandMode)[keyof typeof AccordionExpandMode];
 export declare const registerAccordion: (prefix?: string) => void;
 export { Accordion as VwcAccordionElement };

package/lib/audio-player/audio-player.d.ts

@@ -8,7 +8,7 @@ export declare const SKIP_DIRECTIONS: {
     FORWARD: number;
     BACKWARD: number;
 };
-export type SKIP_DIRECTIONS_TYPE = typeof SKIP_DIRECTIONS[keyof typeof SKIP_DIRECTIONS];
+export type SKIP_DIRECTIONS_TYPE = (typeof SKIP_DIRECTIONS)[keyof typeof SKIP_DIRECTIONS];
 export declare function formatTime(time: number): string;
 declare const AudioPlayer_base: {
     new (...args: any[]): {

package/lib/combobox/combobox.d.ts

@@ -2830,5 +2830,6 @@ export declare class Combobox extends Combobox_base {
     placeholder: string;
     connectedCallback(): void;
     filterOptions(): void;
+    _isDefaultSelected(option: ListboxOption): boolean;
 }
 export {};

package/lib/combobox/combobox.options.d.ts

@@ -4,4 +4,4 @@ export declare const ComboboxAutocomplete: {
     readonly both: "both";
     readonly none: "none";
 };
-export type ComboboxAutocomplete = typeof ComboboxAutocomplete[keyof typeof ComboboxAutocomplete];
+export type ComboboxAutocomplete = (typeof ComboboxAutocomplete)[keyof typeof ComboboxAutocomplete];

package/lib/divider/divider.d.ts

@@ -7,7 +7,7 @@ export declare const DividerRole: {
     readonly separator: "separator";
     readonly presentation: "presentation";
 };
-type DividerRole = typeof DividerRole[keyof typeof DividerRole];
+type DividerRole = (typeof DividerRole)[keyof typeof DividerRole];
 declare const Divider_base: {
     new (...args: any[]): {
         _vividAriaBehaviour: "host";

package/lib/menu-item/menu-item-role.d.ts

@@ -4,4 +4,4 @@ export declare const MenuItemRole: {
     readonly menuitemradio: "menuitemradio";
     readonly presentation: "presentation";
 };
-export type MenuItemRole = typeof MenuItemRole[keyof typeof MenuItemRole];
+export type MenuItemRole = (typeof MenuItemRole)[keyof typeof MenuItemRole];

package/lib/popup/popup.d.ts

@@ -5,7 +5,7 @@ export declare const PlacementStrategy: {
     readonly AutoPlacementHorizontal: "auto-placement-horizontal";
     readonly AutoPlacementVertical: "auto-placement-vertical";
 };
-type PlacementStrategyId = typeof PlacementStrategy[keyof typeof PlacementStrategy];
+type PlacementStrategyId = (typeof PlacementStrategy)[keyof typeof PlacementStrategy];
 export declare class Popup extends VividElement {
     #private;
     popupEl: HTMLElement;

package/lib/searchable-select/locale.d.ts

@@ -3,6 +3,10 @@ export interface SearchableSelectLocale {
     noOptionsMessage: string;
     noMatchesMessage: string;
     loadingOptionsMessage: string;
+    selectAllLabel: string;
+    deselectAllLabel: string;
+    selectedAllMessage: string;
+    deselectedAllMessage: string;
     removeTagButtonLabel: (label: string) => string;
     optionSelectedMessage: (name: string) => string;
     optionDeselectedMessage: (name: string) => string;

package/lib/searchable-select/searchable-select.d.ts

@@ -3581,6 +3581,9 @@ export declare class SearchableSelect extends SearchableSelect_base {
     loading: boolean;
     clearable: boolean;
     maxSelected: number | null;
+    enableSelectAll: boolean;
+    selectAllText: string | undefined;
+    deselectAllText: string | undefined;
     setFormValue: (value: File | string | FormData | null, state?: File | string | FormData | null) => void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/lib/select/select.d.ts

@@ -1,4 +1,5 @@
 import type { Appearance, Shape, Size } from '../enums';
+import type { ListboxOption } from '../option/option';
 import { Listbox } from '../../shared/foundation/listbox/listbox';
 import type { ExtractFromEnum } from '../../shared/utils/enums';
 export type SelectAppearance = ExtractFromEnum<Appearance, Appearance.Fieldset | Appearance.Ghost>;
@@ -3198,7 +3199,8 @@ export declare class Select extends Select_base {
     fixedDropdown: boolean;
     placeholder: string | undefined;
     get displayValue(): string;
-    setDefaultSelectedOption(): void;
+    _newDefaultSelectedIndex(prev: ListboxOption[], next: ListboxOption[], currentSelectIndex: number): number | null;
+    _isDefaultSelected(option: ListboxOption): boolean;
     formResetCallback(): void;
 }
 export {};

package/lib/slider/slider.d.ts

@@ -5,7 +5,7 @@ export type SliderConnotation = Connotation.Accent | Connotation.CTA;
 export declare const SliderMode: {
     readonly singleValue: "single-value";
 };
-export type SliderMode = typeof SliderMode[keyof typeof SliderMode];
+export type SliderMode = (typeof SliderMode)[keyof typeof SliderMode];
 declare const Slider_base: {
     new (...args: any[]): {
         readonly locale: import("../../shared/localization/Locale").Locale;

package/lib/tabs/tabs.d.ts

@@ -7,12 +7,12 @@ export declare const TabsGutters: {
     readonly None: "none";
     readonly Small: "small";
 };
-export type TabsGutters = typeof TabsGutters[keyof typeof TabsGutters];
+export type TabsGutters = (typeof TabsGutters)[keyof typeof TabsGutters];
 export declare const TabsOrientation: {
     readonly vertical: "vertical";
     readonly horizontal: "horizontal";
 };
-export type TabsOrientation = typeof TabsOrientation[keyof typeof TabsOrientation];
+export type TabsOrientation = (typeof TabsOrientation)[keyof typeof TabsOrientation];
 export declare class Tabs extends VividElement {
     #private;
     orientation: TabsOrientation;

package/lib/text-area/text-area.d.ts

@@ -7,7 +7,7 @@ export declare const TextAreaResize: {
     readonly horizontal: "horizontal";
     readonly vertical: "vertical";
 };
-export type TextAreaResize = typeof TextAreaResize[keyof typeof TextAreaResize];
+export type TextAreaResize = (typeof TextAreaResize)[keyof typeof TextAreaResize];
 declare const TextArea_base: {
     new (...args: any[]): {
         _contextualHelpSlottedContent?: HTMLElement[] | undefined;

package/lib/text-field/text-field.d.ts

@@ -12,7 +12,7 @@ export declare const TextFieldType: {
     readonly text: "text";
     readonly url: "url";
 };
-export type TextFieldType = typeof TextFieldType[keyof typeof TextFieldType];
+export type TextFieldType = (typeof TextFieldType)[keyof typeof TextFieldType];
 declare const TextField_base: {
     new (...args: any[]): {
         _contextualHelpSlottedContent?: HTMLElement[] | undefined;

package/locales/de-DE.cjs

@@ -379,6 +379,10 @@ const deDE = {
     clearButtonLabel: "Auswahl löschen",
     noOptionsMessage: "Keine Optionen",
     noMatchesMessage: "Keine Optionen gefunden",
+    selectAllLabel: "Alles auswählen",
+    deselectAllLabel: "Auswahl aufheben",
+    selectedAllMessage: "Alle Optionen ausgewählt",
+    deselectedAllMessage: "Alle Optionen abgewählt",
     loadingOptionsMessage: "Laden...",
     removeTagButtonLabel: (
       /* istanbul ignore next */

package/locales/de-DE.js

@@ -377,6 +377,10 @@ const deDE = {
     clearButtonLabel: "Auswahl löschen",
     noOptionsMessage: "Keine Optionen",
     noMatchesMessage: "Keine Optionen gefunden",
+    selectAllLabel: "Alles auswählen",
+    deselectAllLabel: "Auswahl aufheben",
+    selectedAllMessage: "Alle Optionen ausgewählt",
+    deselectedAllMessage: "Alle Optionen abgewählt",
     loadingOptionsMessage: "Laden...",
     removeTagButtonLabel: (
       /* istanbul ignore next */

package/locales/en-GB.cjs

@@ -211,6 +211,10 @@ const enGB = {
     clearButtonLabel: "Clear selection",
     noOptionsMessage: "No options",
     noMatchesMessage: "No options found",
+    selectAllLabel: "Select All",
+    deselectAllLabel: "Deselect All",
+    selectedAllMessage: "All options selected",
+    deselectedAllMessage: "All options deselected",
     loadingOptionsMessage: "Loading...",
     removeTagButtonLabel: (
       /* istanbul ignore next */

package/locales/en-GB.js

@@ -209,6 +209,10 @@ const enGB = {
     clearButtonLabel: "Clear selection",
     noOptionsMessage: "No options",
     noMatchesMessage: "No options found",
+    selectAllLabel: "Select All",
+    deselectAllLabel: "Deselect All",
+    selectedAllMessage: "All options selected",
+    deselectedAllMessage: "All options deselected",
     loadingOptionsMessage: "Loading...",
     removeTagButtonLabel: (
       /* istanbul ignore next */

package/locales/en-US.cjs

@@ -379,6 +379,10 @@ const enUS = {
     clearButtonLabel: "Clear selection",
     noOptionsMessage: "No options",
     noMatchesMessage: "No options found",
+    selectAllLabel: "Select All",
+    deselectAllLabel: "Deselect All",
+    selectedAllMessage: "All options selected",
+    deselectedAllMessage: "All options deselected",
     loadingOptionsMessage: "Loading...",
     removeTagButtonLabel: (
       /* istanbul ignore next */

package/locales/en-US.js

@@ -377,6 +377,10 @@ const enUS = {
     clearButtonLabel: "Clear selection",
     noOptionsMessage: "No options",
     noMatchesMessage: "No options found",
+    selectAllLabel: "Select All",
+    deselectAllLabel: "Deselect All",
+    selectedAllMessage: "All options selected",
+    deselectedAllMessage: "All options deselected",
     loadingOptionsMessage: "Loading...",
     removeTagButtonLabel: (
       /* istanbul ignore next */

package/locales/ja-JP.cjs

@@ -378,7 +378,11 @@ const jaJP = {
     clearButtonLabel: "選択をクリア",
     noOptionsMessage: "オプションがありません",
     noMatchesMessage: "オプションが見つかりません",
+    selectAllLabel: "すべて選択",
+    deselectAllLabel: "すべて選択解除",
     loadingOptionsMessage: "読み込み中...",
+    selectedAllMessage: "すべてのオプションが選択されました",
+    deselectedAllMessage: "すべてのオプションの選択を解除",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label}を削除`

package/locales/ja-JP.js

@@ -376,7 +376,11 @@ const jaJP = {
     clearButtonLabel: "選択をクリア",
     noOptionsMessage: "オプションがありません",
     noMatchesMessage: "オプションが見つかりません",
+    selectAllLabel: "すべて選択",
+    deselectAllLabel: "すべて選択解除",
     loadingOptionsMessage: "読み込み中...",
+    selectedAllMessage: "すべてのオプションが選択されました",
+    deselectedAllMessage: "すべてのオプションの選択を解除",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label}を削除`

package/locales/zh-CN.cjs

@@ -380,7 +380,11 @@ const zhCN = {
     clearButtonLabel: "清除选择",
     noOptionsMessage: "没有选项",
     noMatchesMessage: "未找到选项",
+    selectAllLabel: "选择全部",
+    deselectAllLabel: "取消全选",
     loadingOptionsMessage: "加载中...",
+    selectedAllMessage: "已选择所有选项",
+    deselectedAllMessage: "取消选择所有选项",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label} 删除`

package/locales/zh-CN.js

@@ -378,7 +378,11 @@ const zhCN = {
     clearButtonLabel: "清除选择",
     noOptionsMessage: "没有选项",
     noMatchesMessage: "未找到选项",
+    selectAllLabel: "选择全部",
+    deselectAllLabel: "取消全选",
     loadingOptionsMessage: "加载中...",
+    selectedAllMessage: "已选择所有选项",
+    deselectedAllMessage: "取消选择所有选项",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label} 删除`