@vonage/vivid 3.54.0 → 3.56.0

package/shared/definition25.js

@@ -11,7 +11,7 @@ import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:6px 12px;border-radius:8px;grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}\n";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:6px 12px;border-radius:8px;grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;
 
@@ -2174,14 +2174,14 @@ var __privateAdd = (obj, member, value) => {
 };
 var __privateSet = (obj, member, value, setter) => {
   __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  member.set(obj, value);
   return value;
 };
 var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _dropzone, _chooseFile, chooseFile_fn, _updateHiddenFileInput, updateHiddenFileInput_fn, _handleFilesChanged, handleFilesChanged_fn, _updateFormValue, updateFormValue_fn, _setValueToAFakePathLikeNativeInput, setValueToAFakePathLikeNativeInput_fn;
+var _dropzone, _chooseFile, chooseFile_fn, _updateHiddenFileInput, updateHiddenFileInput_fn, _handleFilesChanged, handleFilesChanged_fn, _updateFormValue, updateFormValue_fn, _setValueToAFakePathLikeNativeInput, setValueToAFakePathLikeNativeInput_fn, _formatNumbersInMessage, formatNumbersInMessage_fn;
 const isFormAssociatedTryingToSetFormValueToFakePath = (value) => typeof value === "string";
 let FilePicker = class extends FormAssociatedFilePicker {
   constructor() {
@@ -2191,6 +2191,7 @@ let FilePicker = class extends FormAssociatedFilePicker {
     __privateAdd(this, _handleFilesChanged);
     __privateAdd(this, _updateFormValue);
     __privateAdd(this, _setValueToAFakePathLikeNativeInput);
+    __privateAdd(this, _formatNumbersInMessage);
     __privateAdd(this, _dropzone, void 0);
     this.maxFileSize = 256;
     /**
@@ -2265,8 +2266,25 @@ let FilePicker = class extends FormAssociatedFilePicker {
 </div>`,
       dictInvalidFileType: this.locale.filePicker.invalidFileTypeError,
       dictMaxFilesExceeded: this.locale.filePicker.maxFilesExceededError,
-      dictFileTooBig: this.locale.filePicker.fileTooBigError
+      dictFileTooBig: this.locale.filePicker.fileTooBigError,
+      // Override the default implementation to localize the error messages
+      error: (file, message) => {
+        if (file.previewElement) {
+          file.previewElement.classList.add("dz-error");
+          if (typeof message !== "string" && message.error) {
+            message = message.error;
+          }
+          for (const node of file.previewElement.querySelectorAll(
+            "[data-dz-errormessage]"
+          )) {
+            node.textContent = __privateMethod(this, _formatNumbersInMessage, formatNumbersInMessage_fn).call(this, message);
+          }
+        }
+      }
     }));
+    __privateGet(this, _dropzone).filesize = (size) => {
+      return __privateMethod(this, _formatNumbersInMessage, formatNumbersInMessage_fn).call(this, $3ed269f2f0fb224b$export$2e2bcd8739ae039.prototype.filesize.call(__privateGet(this, _dropzone), size));
+    };
     __privateGet(this, _dropzone).on("addedfiles", (files) => {
       for (const file of files) {
         if (file.previewElement) {
@@ -2360,6 +2378,13 @@ _setValueToAFakePathLikeNativeInput = new WeakSet();
 setValueToAFakePathLikeNativeInput_fn = function() {
   this.value = this.files.length > 0 ? `C:\\fakepath\\${this.files[0].name}` : "";
 };
+_formatNumbersInMessage = new WeakSet();
+formatNumbersInMessage_fn = function(message) {
+  if (this.locale.common.useCommaAsDecimalSeparator) {
+    return message.replace(/(\d+)\.(\d+)/g, "$1,$2");
+  }
+  return message;
+};
 __decorateClass([
   attr({ attribute: "max-files" })
 ], FilePicker.prototype, "maxFiles", 2);

package/shared/definition26.cjs

@@ -4,16 +4,15 @@ const index = require('./index.cjs');
 const definition = require('./definition62.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}\n";
+const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -29,12 +28,12 @@ __decorateClass([
     attribute: "elevation-shadow",
     mode: "boolean"
   })
-], Header.prototype, "elevationShadow", 2);
+], Header.prototype, "elevationShadow");
 __decorateClass([
   index.attr({
     mode: "boolean"
   })
-], Header.prototype, "alternate", 2);
+], Header.prototype, "alternate");
 
 const getPartAlternate = ({ alternate }) => classNames.classNames(["vvd-theme-alternate", Boolean(alternate)]);
 const headerTemplate = (context) => {

package/shared/definition26.js

@@ -2,16 +2,15 @@ import { a as attr, F as FoundationElement, h as html, r as registerFactory } fr
 import { E as Elevation, e as elevationRegistries } from './definition62.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}\n";
+const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -27,12 +26,12 @@ __decorateClass([
     attribute: "elevation-shadow",
     mode: "boolean"
   })
-], Header.prototype, "elevationShadow", 2);
+], Header.prototype, "elevationShadow");
 __decorateClass([
   attr({
     mode: "boolean"
   })
-], Header.prototype, "alternate", 2);
+], Header.prototype, "alternate");
 
 const getPartAlternate = ({ alternate }) => classNames(["vvd-theme-alternate", Boolean(alternate)]);
 const headerTemplate = (context) => {

package/shared/definition27.cjs

@@ -5,7 +5,7 @@ const icon = require('./icon.cjs');
 const classNames = require('./class-names.cjs');
 const when = require('./when.cjs');
 
-const styles = ":host{display:inline-block;vertical-align:sub}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.size--5{--_icon-block-size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--4{--_icon-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--3{--_icon-block-size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--2{--_icon-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--1{--_icon-block-size:calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-0{--_icon-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-1{--_icon-block-size:calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-2{--_icon-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-3{--_icon-block-size:calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-4{--_icon-block-size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-5{--_icon-block-size:calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.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){--_icon-block-size: 1em}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}\n";
+const styles = ":host{display:inline-block;vertical-align:sub}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-0{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-1{--_icon-block-size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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){--_icon-block-size: 1em}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
 
 const getClasses = ({ connotation, size }) => classNames.classNames(
   "control",
@@ -13,7 +13,7 @@ const getClasses = ({ connotation, size }) => classNames.classNames(
   [`size-${size}`, typeof size === "number"]
 );
 const iconTemplate = () => index.html`
-	<figure class="${getClasses}">
+	<figure class="${getClasses}" ?aria-busy="${(x) => !x.iconLoaded}">
 		<slot>
 			${when.when(
   (x) => !x.iconLoaded,

package/shared/definition27.js

@@ -3,7 +3,7 @@ import { I as Icon } from './icon.js';
 import { c as classNames } from './class-names.js';
 import { w as when } from './when.js';
 
-const styles = ":host{display:inline-block;vertical-align:sub}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.size--5{--_icon-block-size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--4{--_icon-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--3{--_icon-block-size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--2{--_icon-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size--1{--_icon-block-size:calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-0{--_icon-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-1{--_icon-block-size:calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-2{--_icon-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-3{--_icon-block-size:calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-4{--_icon-block-size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.control.size-5{--_icon-block-size:calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.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){--_icon-block-size: 1em}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}\n";
+const styles = ":host{display:inline-block;vertical-align:sub}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-0{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-1{--_icon-block-size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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){--_icon-block-size: 1em}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
 
 const getClasses = ({ connotation, size }) => classNames(
   "control",
@@ -11,7 +11,7 @@ const getClasses = ({ connotation, size }) => classNames(
   [`size-${size}`, typeof size === "number"]
 );
 const iconTemplate = () => html`
-	<figure class="${getClasses}">
+	<figure class="${getClasses}" ?aria-busy="${(x) => !x.iconLoaded}">
 		<slot>
 			${when(
   (x) => !x.iconLoaded,

package/shared/definition28.cjs

@@ -4,13 +4,12 @@ const index = require('./index.cjs');
 const classNames = require('./class-names.cjs');
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -18,21 +17,21 @@ class Layout extends index.FoundationElement {
 }
 __decorateClass([
   index.attr
-], Layout.prototype, "gutters", 2);
+], Layout.prototype, "gutters");
 __decorateClass([
   index.attr({ attribute: "column-basis" })
-], Layout.prototype, "columnBasis", 2);
+], Layout.prototype, "columnBasis");
 __decorateClass([
   index.attr({ attribute: "column-spacing" })
-], Layout.prototype, "columnSpacing", 2);
+], Layout.prototype, "columnSpacing");
 __decorateClass([
   index.attr({ attribute: "row-spacing" })
-], Layout.prototype, "rowSpacing", 2);
+], Layout.prototype, "rowSpacing");
 __decorateClass([
   index.attr({ attribute: "auto-sizing" })
-], Layout.prototype, "autoSizing", 2);
+], Layout.prototype, "autoSizing");
 
-const styles = ".control{display:grid;grid-auto-rows:var(--layout-grid-template-rows, min-content)}.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(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.gutters-small{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-inline{margin:0 calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-block{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))) 0}.control.gutters-medium{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-inline{margin:0 calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-block{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.gutters-large{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-inline{margin:0 calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-block{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 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}\n";
+const styles = ".control{display:grid;grid-auto-rows:var(--layout-grid-template-rows, min-content)}.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(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-block{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-block{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-block{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-block{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.gutters-small{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-inline{margin:0 calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-block{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))) 0}.control.gutters-medium{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-inline{margin:0 calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-block{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.gutters-large{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-inline{margin:0 calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-block{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 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}";
 
 const getClasses = ({
   columnBasis,

package/shared/definition28.js

@@ -2,13 +2,12 @@ import { a as attr, F as FoundationElement, h as html, r as registerFactory } fr
 import { c as classNames } from './class-names.js';
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -16,21 +15,21 @@ class Layout extends FoundationElement {
 }
 __decorateClass([
   attr
-], Layout.prototype, "gutters", 2);
+], Layout.prototype, "gutters");
 __decorateClass([
   attr({ attribute: "column-basis" })
-], Layout.prototype, "columnBasis", 2);
+], Layout.prototype, "columnBasis");
 __decorateClass([
   attr({ attribute: "column-spacing" })
-], Layout.prototype, "columnSpacing", 2);
+], Layout.prototype, "columnSpacing");
 __decorateClass([
   attr({ attribute: "row-spacing" })
-], Layout.prototype, "rowSpacing", 2);
+], Layout.prototype, "rowSpacing");
 __decorateClass([
   attr({ attribute: "auto-sizing" })
-], Layout.prototype, "autoSizing", 2);
+], Layout.prototype, "autoSizing");
 
-const styles = ".control{display:grid;grid-auto-rows:var(--layout-grid-template-rows, min-content)}.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(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.column-spacing-small-block{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.column-spacing-large-block{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))))}.control.row-spacing-small-block{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.control.row-spacing-large-block{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.gutters-small{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-inline{margin:0 calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-block{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))) 0}.control.gutters-medium{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-inline{margin:0 calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-block{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.gutters-large{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-inline{margin:0 calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-block{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 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}\n";
+const styles = ".control{display:grid;grid-auto-rows:var(--layout-grid-template-rows, min-content)}.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(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.column-spacing-small-block{column-gap:var(--layout-column-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-medium-block{column-gap:var(--layout-column-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.column-spacing-large{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-inline{column-gap:var(--layout-column-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.column-spacing-large-block{column-gap:var(--layout-column-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-small{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) )}.control.row-spacing-small-block{row-gap:var(--layout-row-gap, calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) 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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-medium-block{row-gap:var(--layout-row-gap, calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.row-spacing-large{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-inline{row-gap:var(--layout-row-gap, 0 calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) )}.control.row-spacing-large-block{row-gap:var(--layout-row-gap, calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) 0)}.control.gutters-small{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-inline{margin:0 calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.control.gutters-small-block{margin:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))) 0}.control.gutters-medium{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-inline{margin:0 calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-medium-block{margin:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 0}.control.gutters-large{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-inline{margin:0 calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.control.gutters-large-block{margin:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))) 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}";
 
 const getClasses = ({
   columnBasis,

package/shared/definition29.cjs

@@ -402,7 +402,7 @@ let Menu$1 = class Menu extends index.FoundationElement {
                 item.setAttribute("tabindex", index === 0 ? "0" : "-1");
                 item.addEventListener("expanded-change", this.handleExpandedChanged);
                 item.addEventListener("focus", this.handleItemFocus);
-                if (item instanceof MenuItem$1) {
+                if (item instanceof MenuItem$1 || "startColumnCount" in item) {
                     item.startColumnCount = indent;
                 }
             });
@@ -570,12 +570,12 @@ index.__decorate([
     index.observable
 ], Menu$1.prototype, "items", void 0);
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}:host(:not([check-appearance],[aria-checked=true])) .action{color:var(--vvd-color-neutral-500)}.base.trailing .action,.base.has-meta .action{order:2}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-600)}.base.two-lines:not(.disabled).selected .text-secondary{color:var(--vvd-color-neutral-800)}\n";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
 
 var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -600,7 +600,7 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _triggerBehaviour, triggerBehaviour_get, _setupAnchor, setupAnchor_fn, _updateAnchor, updateAnchor_fn, _cleanupAnchor, cleanupAnchor_fn, _onAnchorClick, _updateClickOutsideListeners, _wasOpenBeforeClick, _onClickOutsideCapture, _onClickOutside;
+var _triggerBehaviour, triggerBehaviour_get, _setupAnchor, setupAnchor_fn, _updateAnchor, updateAnchor_fn, _cleanupAnchor, cleanupAnchor_fn, _onAnchorClick;
 exports.Menu = class Menu extends Menu$1 {
   constructor() {
     super();
@@ -622,23 +622,13 @@ exports.Menu = class Menu extends Menu$1 {
       const newValue = !this.open;
       index.DOM.queueUpdate(() => this.open = newValue);
     });
-    __privateAdd(this, _updateClickOutsideListeners, () => {
-      document.removeEventListener("click", __privateGet(this, _onClickOutsideCapture), true);
-      document.removeEventListener("click", __privateGet(this, _onClickOutside));
-      if (this.autoDismiss && this.isConnected) {
-        document.addEventListener("click", __privateGet(this, _onClickOutsideCapture), true);
-        document.addEventListener("click", __privateGet(this, _onClickOutside));
-      }
-    });
-    __privateAdd(this, _wasOpenBeforeClick, /* @__PURE__ */ new WeakMap());
-    __privateAdd(this, _onClickOutsideCapture, (e) => {
-      __privateGet(this, _wasOpenBeforeClick).set(e, this.open);
-    });
-    __privateAdd(this, _onClickOutside, (e) => {
-      if (!this.contains(e.target) && __privateGet(this, _wasOpenBeforeClick).get(e)) {
+    this._onFocusout = (e) => {
+      const focusTarget = e.relatedTarget;
+      const focusMovedAway = !this.contains(focusTarget) && !this._anchorEl?.contains(focusTarget);
+      if (this.autoDismiss && focusMovedAway) {
         this.open = false;
       }
-    });
+    };
     const handleFocusOut = this.handleFocusOut;
     this.handleFocusOut = (e) => {
       const privates2 = this;
@@ -656,25 +646,12 @@ exports.Menu = class Menu extends Menu$1 {
       return domChildren.call(this).filter((child) => !child.hasAttribute("slot"));
     };
   }
-  autoDismissChanged(oldValue) {
-    if (oldValue === void 0)
-      return;
-    __privateGet(this, _updateClickOutsideListeners).call(this);
-  }
   openChanged(_, newValue) {
     newValue ? this.$emit("open", void 0, { bubbles: false }) : this.$emit("close", void 0, { bubbles: false });
     if (this._anchorEl) {
       __privateMethod(this, _updateAnchor, updateAnchor_fn).call(this, this._anchorEl);
     }
   }
-  connectedCallback() {
-    super.connectedCallback();
-    __privateGet(this, _updateClickOutsideListeners).call(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    __privateGet(this, _updateClickOutsideListeners).call(this);
-  }
   /**
    * @internal
    */
@@ -702,6 +679,7 @@ triggerBehaviour_get = function() {
 _setupAnchor = new WeakSet();
 setupAnchor_fn = function(a) {
   a.addEventListener("click", __privateGet(this, _onAnchorClick), true);
+  a.addEventListener("focusout", this._onFocusout);
   a.setAttribute("aria-haspopup", "menu");
   __privateMethod(this, _updateAnchor, updateAnchor_fn).call(this, a);
 };
@@ -712,14 +690,11 @@ updateAnchor_fn = function(a) {
 _cleanupAnchor = new WeakSet();
 cleanupAnchor_fn = function(a) {
   a.removeEventListener("click", __privateGet(this, _onAnchorClick), true);
+  a.removeEventListener("focusout", this._onFocusout);
   a.removeAttribute("aria-hasPopup");
   a.removeAttribute("aria-expanded");
 };
 _onAnchorClick = new WeakMap();
-_updateClickOutsideListeners = new WeakMap();
-_wasOpenBeforeClick = new WeakMap();
-_onClickOutsideCapture = new WeakMap();
-_onClickOutside = new WeakMap();
 __decorateClass$1([
   index.attr({ attribute: "aria-label" })
 ], exports.Menu.prototype, "ariaLabel", 2);
@@ -746,13 +721,12 @@ exports.Menu = __decorateClass$1([
 ], exports.Menu);
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -802,28 +776,28 @@ class MenuItem extends MenuItem$1 {
 }
 __decorateClass([
   index.attr
-], MenuItem.prototype, "text", 2);
+], MenuItem.prototype, "text");
 __decorateClass([
   index.attr({ attribute: "text-secondary" })
-], MenuItem.prototype, "textSecondary", 2);
+], MenuItem.prototype, "textSecondary");
 __decorateClass([
   index.attr
-], MenuItem.prototype, "connotation", 2);
+], MenuItem.prototype, "connotation");
 __decorateClass([
   index.attr({ mode: "boolean", attribute: "check-trailing" })
-], MenuItem.prototype, "checkTrailing", 2);
+], MenuItem.prototype, "checkTrailing");
 __decorateClass([
   index.attr({ attribute: "check-appearance" })
-], MenuItem.prototype, "checkedAppearance", 2);
+], MenuItem.prototype, "checkedAppearance");
 __decorateClass([
   index.observable
-], MenuItem.prototype, "metaSlottedContent", 2);
+], MenuItem.prototype, "metaSlottedContent");
 __decorateClass([
   index.observable
-], MenuItem.prototype, "trailingMetaSlottedContent", 2);
+], MenuItem.prototype, "trailingMetaSlottedContent");
 __decorateClass([
   index.observable
-], MenuItem.prototype, "slottedSubmenu", 2);
+], MenuItem.prototype, "slottedSubmenu");
 applyMixins.applyMixins(MenuItem, affix.AffixIcon);
 
 const getIndicatorIcon = (x) => {