@vonage/vivid 3.39.0 → 3.41.0

package/shared/definition8.js

@@ -1,13 +1,16 @@
-import { a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition25.js';
-import { f as focusRegistries } from './definition56.js';
-import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
-import { t as textAnchorTemplate } from './text-anchor.template.js';
-import { I as Icon } from './icon.js';
+import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
+import { B as Button, a as buttonRegistries } from './definition11.js';
+import { a as iconRegistries } from './definition26.js';
+import { C as Connotation } from './enums.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import './index2.js';
+import { L as Localized } from './localized.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Tue, 17 Oct 2023 15:27:52 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base .separator {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 22 Nov 2023 16:09:43 GMT\n */\n:host {\n  display: block;\n}\n\n.control {\n  overflow: hidden;\n  max-height: 160px;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-banner-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-banner-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-banner-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-banner-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-banner-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-banner-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-warning {\n  /* @cssprop [--vvd-banner-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-banner-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text));\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n  /* @cssprop [--vvd-banner-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-banner-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas));\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control.removing {\n  max-height: 0;\n}\n\n.header {\n  display: flex;\n  min-height: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n  align-items: center;\n  font: var(--vvd-typography-base-bold);\n  inline-size: 100%;\n}\n.header .content {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  column-gap: 16px;\n  inline-size: 100%;\n  padding-inline: 16px;\n}\n.header .content slot[name=icon] {\n  flex-shrink: 0;\n  font-size: 20px;\n  line-height: 1;\n}\n.header .content .action-items {\n  flex-shrink: 0;\n}\n.header .dismiss-button {\n  flex-shrink: 0;\n  margin-inline-end: 8px;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -20,46 +23,127 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class BreadcrumbItem extends BreadcrumbItem$1 {
+const connotationIconMap = /* @__PURE__ */ new Map([
+  [Connotation.Information, "info-solid"],
+  [Connotation.Announcement, "megaphone-solid"],
+  [Connotation.Success, "check-circle-solid"],
+  [Connotation.Warning, "warning-solid"],
+  [Connotation.Alert, "error-solid"]
+]);
+const defaultConnotation = (connotation = Connotation.Information) => connotationIconMap.get(connotation);
+class Banner extends FoundationElement {
   constructor() {
-    super();
+    super(...arguments);
+    this.dismissButtonAriaLabel = null;
+    this.role = null;
+    this.removable = false;
+    this.#handleRemoveEnd = () => {
+      this.$emit("removed");
+      this.parentElement && this.parentElement.removeChild(this);
+    };
+    this.#closeOnKeyDown = (e) => {
+      if (e.key !== "Escape" || !this.removable) {
+        return;
+      }
+      this.remove();
+    };
   }
+  get conditionedIcon() {
+    return this.icon ?? defaultConnotation(this.connotation);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this.#closeOnKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this.#closeOnKeyDown);
+  }
+  remove() {
+    this.$emit("removing");
+    const banner = this.shadowRoot && this.shadowRoot.querySelector(".control");
+    if (banner) {
+      banner.classList.add("removing");
+      banner.addEventListener("transitionend", this.#handleRemoveEnd);
+    }
+  }
+  #handleRemoveEnd;
+  #closeOnKeyDown;
 }
+__decorateClass([
+  attr({ attribute: "dismiss-aria-label" })
+], Banner.prototype, "dismissButtonAriaLabel", 2);
 __decorateClass([
   attr
-], BreadcrumbItem.prototype, "text", 2);
+], Banner.prototype, "role", 2);
+__decorateClass([
+  attr({ attribute: "action-href" })
+], Banner.prototype, "actionHref", 2);
+__decorateClass([
+  attr({ attribute: "action-text" })
+], Banner.prototype, "actionText", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], Banner.prototype, "removable", 2);
+__decorateClass([
+  attr({ attribute: "aria-live" })
+], Banner.prototype, "ariaLive", 2);
+__decorateClass([
+  attr()
+], Banner.prototype, "text", 2);
+__decorateClass([
+  attr()
+], Banner.prototype, "connotation", 2);
+__decorateClass([
+  observable
+], Banner.prototype, "actionItemsSlottedContent", 2);
+applyMixins(Banner, AffixIcon);
+applyMixins(Banner, Localized);
 
-const getClasses = (_) => classNames("base");
-const BreadcrumbItemTemplate = (context, definition) => {
-  const iconTag = context.tagFor(Icon);
+const getClasses = (_) => classNames(
+  "control",
+  [`connotation-${_.connotation}`, !!_.connotation]
+);
+function renderDismissButton(buttonTag) {
   return html`
-	<div role="listitem" class="${getClasses}">
-		${when(
-    (x) => x.text && !x.href,
-    html`${(x) => x.text}`
-  )}
-
-		${when(
-    (x) => x.text && x.href && x.href.length > 0,
-    html`${textAnchorTemplate(context)}`
-  )}
+	  <${buttonTag}
+	  		aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.banner.dismissButtonLabel}"
+			part="vvd-theme-alternate"
+			size="condensed"
+			class="dismiss-button"
+			icon="close-line"
+			@click="${(x) => x.remove()}">
+	  </${buttonTag}>`;
+}
+const BannerTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const buttonTag = context.tagFor(Button);
+  return html`
+	  <div class="${getClasses}" 
+	  tabindex="${(x) => x.removable || x.actionItemsSlottedContent && x.actionItemsSlottedContent.length ? "0" : null}">
+		  <header class="header">
+					<div class="content">
+            ${(x) => affixIconTemplate(x.conditionedIcon, IconWrapper.Slot)}
+						<div class="banner-message"
+						 role="${(x) => x.role ? x.role : "status"}"
+						 aria-live="${(x) => x.ariaLive ? x.ariaLive : "polite"}">
+									${(x) => x.text}
+            </div>
+						<slot class="action-items" ${slotted("actionItemsSlottedContent")} name="action-items"></slot>
+					</div>
 
-		${when(
-    (x) => x.separator,
-    html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
-  )}
-	</div>`;
+			  ${when((x) => x.removable, renderDismissButton(buttonTag))}
+		  </header>
+	  </div>
+	`;
 };
 
-const breadcrumbItemDefinition = BreadcrumbItem.compose({
-  baseName: "breadcrumb-item",
-  template: BreadcrumbItemTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const bannerDefinition = Banner.compose({
+  baseName: "banner",
+  template: BannerTemplate,
+  styles
 });
-const breadcrumbItemRegistries = [breadcrumbItemDefinition(), ...iconRegistries, ...focusRegistries];
-const registerBreadcrumbItem = registerFactory(breadcrumbItemRegistries);
+const bannerRegistries = [bannerDefinition(), ...iconRegistries, ...buttonRegistries];
+const registerBanner = registerFactory(bannerRegistries);
 
-export { breadcrumbItemRegistries as a, breadcrumbItemDefinition as b, registerBreadcrumbItem as r };
+export { bannerRegistries as a, bannerDefinition as b, registerBanner as r };

package/shared/definition9.js

@@ -1,98 +1,65 @@
-import { F as FoundationElement, _ as __decorate, o as observable, h as html, r as registerFactory } from './index.js';
-import { s as slotted, e as elements } from './slotted.js';
+import { a as attr, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition26.js';
+import { f as focusRegistries } from './definition58.js';
 import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
+import { t as textAnchorTemplate } from './text-anchor.template.js';
+import { I as Icon } from './icon.js';
+import { w as when } from './when.js';
+import { c as classNames } from './class-names.js';
 
-/**
- * A Breadcrumb Custom HTML Element.
- * @slot - The default slot for the breadcrumb items
- * @csspart list - The element wrapping the slotted items
- *
- * @public
- */
-let Breadcrumb$1 = class Breadcrumb extends FoundationElement {
-    slottedBreadcrumbItemsChanged() {
-        if (this.$fastController.isConnected) {
-            if (this.slottedBreadcrumbItems === undefined ||
-                this.slottedBreadcrumbItems.length === 0) {
-                return;
-            }
-            const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];
-            this.slottedBreadcrumbItems.forEach((item) => {
-                const itemIsLastNode = item === lastNode;
-                this.setItemSeparator(item, itemIsLastNode);
-                this.setAriaCurrent(item, itemIsLastNode);
-            });
-        }
-    }
-    setItemSeparator(item, isLastNode) {
-        if (item instanceof BreadcrumbItem$1) {
-            item.separator = !isLastNode;
-        }
-    }
-    /**
-     * Finds href on childnodes in the light DOM or shadow DOM.
-     * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
-     */
-    findChildWithHref(node) {
-        var _a, _b;
-        if (node.childElementCount > 0) {
-            return node.querySelector("a[href]");
-        }
-        else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {
-            return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("a[href]");
-        }
-        else
-            return null;
-    }
-    /**
-     *  Sets ARIA Current for the current node
-     * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
-     * otherwise apply aria-current to the host element, with an href
-     */
-    setAriaCurrent(item, isLastNode) {
-        const childNodeWithHref = this.findChildWithHref(item);
-        if (childNodeWithHref === null &&
-            item.hasAttribute("href") &&
-            item instanceof BreadcrumbItem$1) {
-            isLastNode
-                ? item.setAttribute("aria-current", "page")
-                : item.removeAttribute("aria-current");
-        }
-        else if (childNodeWithHref !== null) {
-            isLastNode
-                ? childNodeWithHref.setAttribute("aria-current", "page")
-                : childNodeWithHref.removeAttribute("aria-current");
-        }
-    }
+const styles = "/**\n * Do not edit directly\n * Generated on Wed, 22 Nov 2023 16:09:43 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base .separator {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+
+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;
+  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)
+    __defProp(target, key, result);
+  return result;
 };
-__decorate([
-    observable
-], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
+class BreadcrumbItem extends BreadcrumbItem$1 {
+  constructor() {
+    super();
+  }
+}
+__decorateClass([
+  attr
+], BreadcrumbItem.prototype, "text", 2);
 
-const breadcrumbTemplate = () => html`
-	<nav aria-label="breadcrumbs" class="base">
-    <div role="list" class="list">
-      <slot
-        ${slotted({
-  property: "slottedBreadcrumbItems",
-  filter: elements()
-})}
-      ></slot>
-    </div>
-	</nav>
-`;
+const getClasses = (_) => classNames("base");
+const BreadcrumbItemTemplate = (context, definition) => {
+  const iconTag = context.tagFor(Icon);
+  return html`
+	<div role="listitem" class="${getClasses}">
+		${when(
+    (x) => x.text && !x.href,
+    html`${(x) => x.text}`
+  )}
 
-const styles = ".list {\n  display: flex;\n}";
+		${when(
+    (x) => x.text && x.href && x.href.length > 0,
+    html`${textAnchorTemplate(context)}`
+  )}
 
-class Breadcrumb extends Breadcrumb$1 {
-}
+		${when(
+    (x) => x.separator,
+    html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
+  )}
+	</div>`;
+};
 
-const breadcrumbDefinition = Breadcrumb.compose({
-  baseName: "breadcrumb",
-  template: breadcrumbTemplate,
-  styles
+const breadcrumbItemDefinition = BreadcrumbItem.compose({
+  baseName: "breadcrumb-item",
+  template: BreadcrumbItemTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
-const breadcrumbRegistries = [breadcrumbDefinition()];
-const registerBreadcrumb = registerFactory(breadcrumbRegistries);
+const breadcrumbItemRegistries = [breadcrumbItemDefinition(), ...iconRegistries, ...focusRegistries];
+const registerBreadcrumbItem = registerFactory(breadcrumbItemRegistries);
 
-export { breadcrumbRegistries as a, breadcrumbDefinition as b, registerBreadcrumb as r };
+export { breadcrumbItemRegistries as a, breadcrumbItemDefinition as b, registerBreadcrumbItem as r };

package/shared/enums.js

@@ -0,0 +1,72 @@
+var Connotation = /* @__PURE__ */ ((Connotation2) => {
+  Connotation2["Accent"] = "accent";
+  Connotation2["CTA"] = "cta";
+  Connotation2["Success"] = "success";
+  Connotation2["Alert"] = "alert";
+  Connotation2["Warning"] = "warning";
+  Connotation2["Information"] = "information";
+  Connotation2["Announcement"] = "announcement";
+  return Connotation2;
+})(Connotation || {});
+var ConnotationDecorative = /* @__PURE__ */ ((ConnotationDecorative2) => {
+  ConnotationDecorative2["Pacific"] = "pacific";
+  return ConnotationDecorative2;
+})(ConnotationDecorative || {});
+var Shape = /* @__PURE__ */ ((Shape2) => {
+  Shape2["Rounded"] = "rounded";
+  Shape2["Pill"] = "pill";
+  Shape2["Circled"] = "circled";
+  Shape2["Sharp"] = "sharp";
+  return Shape2;
+})(Shape || {});
+var Appearance = /* @__PURE__ */ ((Appearance2) => {
+  Appearance2["Filled"] = "filled";
+  Appearance2["Outlined"] = "outlined";
+  Appearance2["Duotone"] = "duotone";
+  Appearance2["Fieldset"] = "fieldset";
+  Appearance2["Subtle"] = "subtle";
+  Appearance2["Ghost"] = "ghost";
+  Appearance2["Listitem"] = "listitem";
+  Appearance2["Elevated"] = "elevated";
+  return Appearance2;
+})(Appearance || {});
+var Size = /* @__PURE__ */ ((Size2) => {
+  Size2["UltraCondensed"] = "ultra-condensed";
+  Size2["SuperCondensed"] = "super-condensed";
+  Size2["ExtraCondensed"] = "extra-condensed";
+  Size2["SemiCondensed"] = "semi-condensed";
+  Size2["Condensed"] = "condensed";
+  Size2["Normal"] = "normal";
+  Size2["SemiExpanded"] = "semi-expanded";
+  Size2["Expanded"] = "expanded";
+  Size2["ExtraExpanded"] = "extra-expanded";
+  Size2["SuperExpanded"] = "super-expanded";
+  Size2["UltraExpanded"] = "ultra-expanded";
+  return Size2;
+})(Size || {});
+var LayoutSize = /* @__PURE__ */ ((LayoutSize2) => {
+  LayoutSize2["Small"] = "small";
+  LayoutSize2["Medium"] = "medium";
+  LayoutSize2["Large"] = "large";
+  return LayoutSize2;
+})(LayoutSize || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["Top"] = "TOP";
+  Position2["Bottom"] = "BOTTOM";
+  Position2["Start"] = "START";
+  Position2["Center"] = "CENTER";
+  Position2["End"] = "END";
+  return Position2;
+})(Position || {});
+var Role = /* @__PURE__ */ ((Role2) => {
+  Role2["Status"] = "status";
+  Role2["Alert"] = "alert";
+  return Role2;
+})(Role || {});
+var AriaLive = /* @__PURE__ */ ((AriaLive2) => {
+  AriaLive2["Polite"] = "polite";
+  AriaLive2["Assertive"] = "assertive";
+  return AriaLive2;
+})(AriaLive || {});
+
+export { Appearance as A, Connotation as C, LayoutSize as L, Position as P, Role as R, Shape as S, ConnotationDecorative as a, Size as b, AriaLive as c };

package/shared/icon.js

@@ -143,7 +143,7 @@ _curry2(function memoizeWith(mFn, fn) {
 const memoizeWith$1 = memoizeWith;
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.4.0";
+const ICONS_VERSION = "4.5.1";
 
 const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
     <g>
@@ -231,4 +231,4 @@ __decorateClass([
   volatile
 ], Icon.prototype, "iconUrl", 1);
 
-export { Icon as I };
+export { Icon as I, memoizeWith$1 as m };

package/shared/index2.js

@@ -3,7 +3,7 @@ import { a as attr, o as observable, h as html } from './index.js';
 import { w as when } from './when.js';
 import enUS from '../locales/en-US.js';
 
-const messageStyles = "/**\n * Do not edit directly\n * Generated on Tue, 17 Oct 2023 15:27:52 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
+const messageStyles = "/**\n * Do not edit directly\n * Generated on Wed, 22 Nov 2023 16:09:43 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
 
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
@@ -38,6 +38,33 @@ __decorateClass$1([
   })
 ], FormElementCharCount.prototype, "charCount", 2);
 function formElements(constructor) {
+  let currentPrototype = constructor.prototype;
+  while (currentPrototype) {
+    const parentPrototype = Object.getPrototypeOf(currentPrototype);
+    if (currentPrototype.validate && !parentPrototype.validate) {
+      currentPrototype.validate = function(anchor) {
+        if (this.proxy instanceof HTMLElement) {
+          const isValid = this.proxy.validity.valid;
+          const controlIsInvalidDueToMinOrMaxLength = this.control && this.control.validity && !this.control.validity.valid && (this.control.validity.tooShort || this.control.validity.tooLong);
+          if (isValid && controlIsInvalidDueToMinOrMaxLength) {
+            this.setValidity(
+              this.control.validity,
+              this.control.validationMessage,
+              anchor
+            );
+          } else {
+            this.setValidity(
+              this.proxy.validity,
+              this.proxy.validationMessage,
+              anchor
+            );
+          }
+        }
+      };
+      break;
+    }
+    currentPrototype = parentPrototype;
+  }
   class Decorated extends constructor {
     constructor(...args) {
       super(...args);

package/shared/key-codes.js

@@ -97,4 +97,4 @@ const ArrowKeys = {
     ArrowUp: keyArrowUp,
 };
 
-export { ArrowKeys as A, keySpace as a, keyEnd as b, keyHome as c, keyArrowDown as d, keyArrowUp as e, keyEscape as f, keyTab as g, keyArrowRight as h, keyArrowLeft as i, keyPageDown as j, keyEnter as k, keyPageUp as l, keyFunction2 as m };
+export { ArrowKeys as A, keySpace as a, keyEscape as b, keyTab as c, keyEnd as d, keyArrowUp as e, keyArrowDown as f, keyHome as g, keyArrowRight as h, keyArrowLeft as i, keyPageDown as j, keyEnter as k, keyPageUp as l, keyFunction2 as m };

package/shared/key-codes2.js

@@ -0,0 +1,9 @@
+/**
+ * String values for use with KeyboardEvent.key
+ */
+const keyArrowLeft = "ArrowLeft";
+const keyArrowRight = "ArrowRight";
+const keyEnter = "Enter";
+const keySpace = " ";
+
+export { keyArrowRight as a, keyEnter as b, keySpace as c, keyArrowLeft as k };

package/shared/listbox.js

@@ -1,8 +1,9 @@
+import { k as keyArrowLeft, a as keyArrowRight } from './key-codes2.js';
 import { F as FoundationElement, O as Observable, _ as __decorate, a as attr, o as observable, D as DOM, n as nullableNumberConverter } from './index.js';
-import { i as isListboxOption } from './definition34.js';
+import { i as isListboxOption } from './definition35.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { a as keySpace, f as keyEscape, k as keyEnter, g as keyTab, b as keyEnd, e as keyArrowUp, d as keyArrowDown, c as keyHome } from './key-codes.js';
+import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';
 import { u as uniqueId } from './strings.js';
 import { i as inRange } from './numbers.js';
 
@@ -989,12 +990,6 @@ __decorate([
     attr({ converter: nullableNumberConverter })
 ], ListboxElement.prototype, "size", void 0);
 
-/**
- * String values for use with KeyboardEvent.key
- */
-const keyArrowLeft = "ArrowLeft";
-const keyArrowRight = "ArrowRight";
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/localization/Locale.d.ts

@@ -1,6 +1,18 @@
 import type { DatePickerLocale } from '../date-picker/locale';
 import type { FilePickerLocale } from '../../lib/file-picker/locale';
+import type { AudioPlayerLocale } from '../../lib/audio-player/locale';
+import type { AlertLocale } from '../../lib/alert/locale';
+import type { DialogLocale } from '../../lib/dialog/locale';
+import type { BannerLocale } from '../../lib/banner/locale';
+import type { NumberFieldLocale } from '../../lib/number-field/locale';
+import type { SplitButtonLocale } from '../../lib/split-button/locale';
 export interface Locale {
     datePicker: DatePickerLocale;
     filePicker: FilePickerLocale;
+    audioPlayer: AudioPlayerLocale;
+    alert: AlertLocale;
+    dialog: DialogLocale;
+    banner: BannerLocale;
+    numberField: NumberFieldLocale;
+    splitButton: SplitButtonLocale;
 }

package/shared/patterns/form-elements/form-elements.d.ts

@@ -33,10 +33,10 @@ export declare function formElements<T extends {
         [x: string]: any;
         label?: string | undefined;
         errorValidationMessage: string;
-        "__#2@#forceErrorDisplay": boolean;
-        "__#2@#hasBeenTouched": boolean;
+        "__#1@#forceErrorDisplay": boolean;
+        "__#1@#hasBeenTouched": boolean;
         connectedCallback(): void;
-        "__#2@#handleInvalidEvent": () => void;
+        "__#1@#handleInvalidEvent": () => void;
         disconnectedCallback(): void;
         formResetCallback(): void;
         validate: () => void;
@@ -50,10 +50,10 @@ export declare function errorText<T extends {
     new (...args: any[]): {
         [x: string]: any;
         errorText?: string | undefined;
-        "__#3@#blockValidateCalls": boolean;
+        "__#2@#blockValidateCalls": boolean;
         errorTextChanged(_: string, newErrorText: string | undefined): void;
-        "__#3@#forceCustomError"(errorMessage: string): void;
-        "__#3@#clearCustomErrorAndRevalidate"(): void;
+        "__#2@#forceCustomError"(errorMessage: string): void;
+        "__#2@#clearCustomErrorAndRevalidate"(): void;
     };
 } & T;
 export {};