@esri/calcite-components 1.4.0 → 1.4.1-next.1

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0
+ * v1.4.1-next.1
  */
 'use strict';
 
@@ -5969,7 +5969,7 @@ function createObserver(type, callback, options) {
 }
 
 const observed = new Set();
-let mutationObserver$1;
+let mutationObserver$2;
 const observerOptions = { childList: true };
 /**
  * Helper to set up a conditional slot component on connectedCallback.
@@ -5982,10 +5982,10 @@ const observerOptions = { childList: true };
  * ```
  */
 function connectConditionalSlotComponent(component) {
-  if (!mutationObserver$1) {
-    mutationObserver$1 = createObserver();
+  if (!mutationObserver$2) {
+    mutationObserver$2 = createObserver();
   }
-  mutationObserver$1.observe(component.el, observerOptions);
+  mutationObserver$2.observe(component.el, observerOptions);
 }
 /**
  * Helper to tear down a conditional slot component on disconnectedCallback.
@@ -6002,13 +6002,13 @@ function disconnectConditionalSlotComponent(component) {
   // we explicitly process queued mutations and disconnect and reconnect
   // the observer until MutationObserver gets an `unobserve` method
   // see https://github.com/whatwg/dom/issues/126
-  processMutations(mutationObserver$1.takeRecords());
-  mutationObserver$1.disconnect();
+  processMutations$1(mutationObserver$2.takeRecords());
+  mutationObserver$2.disconnect();
   for (const [element] of observed.entries()) {
-    mutationObserver$1.observe(element, observerOptions);
+    mutationObserver$2.observe(element, observerOptions);
   }
 }
-function processMutations(mutations) {
+function processMutations$1(mutations) {
   mutations.forEach(({ target }) => {
     forceUpdate$1(target);
   });
@@ -7569,7 +7569,7 @@ const connectedComponents = new Set();
 function connectLocalized(component) {
   updateEffectiveLocale(component);
   if (connectedComponents.size === 0) {
-    mutationObserver?.observe(document.documentElement, {
+    mutationObserver$1?.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ["lang"],
       subtree: true
@@ -7597,10 +7597,10 @@ function updateEffectiveLocale(component) {
 function disconnectLocalized(component) {
   connectedComponents.delete(component);
   if (connectedComponents.size === 0) {
-    mutationObserver.disconnect();
+    mutationObserver$1.disconnect();
   }
 }
-const mutationObserver = createObserver();
+const mutationObserver$1 = createObserver();
 /**
  * This util helps resolve a component's locale.
  * It will also fall back on the deprecated `locale` if a component implemented this previously.
@@ -7742,25 +7742,6 @@ function getDateTimeFormat(locale, options) {
   return format;
 }
 
-const componentLangToMessageBundleCache = {};
-async function getMessageBundle(lang, component) {
-  const key = `${component}_${lang}`;
-  if (componentLangToMessageBundleCache[key]) {
-    return componentLangToMessageBundleCache[key];
-  }
-  componentLangToMessageBundleCache[key] = fetch(getAssetPath(`./assets/${component}/t9n/messages_${lang}.json`))
-    .then((resp) => {
-    if (!resp.ok) {
-      throwMessageFetchError();
-    }
-    return resp.json();
-  })
-    .catch(() => throwMessageFetchError());
-  return componentLangToMessageBundleCache[key];
-}
-function throwMessageFetchError() {
-  throw new Error("could not fetch component message bundle");
-}
 function mergeMessages(component) {
   component.messages = {
     ...component.defaultMessages,
@@ -7769,18 +7750,16 @@ function mergeMessages(component) {
 }
 /**
  * This utility sets up the messages used by the component. It should be awaited in the `componentWillLoad` lifecycle hook.
- *
  * @param component
  */
 async function setUpMessages(component) {
-  component.defaultMessages = await fetchMessages(component, component.effectiveLocale);
+  component.defaultMessages = await fetchMessages();
   mergeMessages(component);
 }
 async function fetchMessages(component, lang) {
-  const { el } = component;
-  const tag = el.tagName.toLowerCase();
-  const componentName = tag.replace("calcite-", "");
-  return getMessageBundle(getSupportedLocale(lang, "t9n"), componentName);
+  {
+    return {};
+  }
 }
 /**
  * This utility must be set up for the component to update its default message bundle if the locale changes.
@@ -7789,12 +7768,11 @@ async function fetchMessages(component, lang) {
  *
  * 1. called from `LocalizedComponent`'s `onLocaleChange` method or
  * 2. called from a watcher configured to watch `LocalizedComponent`'s `effectiveLocale` prop
- *
  * @param component
  * @param lang
  */
 async function updateMessages(component, lang) {
-  component.defaultMessages = await fetchMessages(component, lang);
+  component.defaultMessages = await fetchMessages();
   mergeMessages(component);
 }
 /**
@@ -7803,7 +7781,6 @@ async function updateMessages(component, lang) {
  * It needs to be called in `connectedCallback`
  *
  * **Note**: this must be called after `LocalizedComponent`'s `connectLocalized` method.
- *
  * @param component
  */
 function connectMessages(component) {
@@ -7813,7 +7790,6 @@ function connectMessages(component) {
  * This utility tears down internals for messages support.
  *
  * It needs to be called in `disconnectedCallback`
- *
  * @param component
  */
 function disconnectMessages(component) {
@@ -7888,7 +7864,7 @@ class Action {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -9493,7 +9469,7 @@ class ActionBar {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -9639,7 +9615,7 @@ class ActionGroup {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -10080,7 +10056,7 @@ class ActionPad {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -10475,7 +10451,7 @@ class Alert {
     }
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   /** determine which alert is active */
   determineActiveAlert() {
@@ -10965,7 +10941,7 @@ class Block {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -11120,7 +11096,7 @@ class BlockSection {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -11733,7 +11709,7 @@ class Button {
     this.childEl?.focus();
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   updateHasContent() {
     const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;
@@ -11800,6 +11776,65 @@ class Button {
   }; }
 }
 
+const allowedGlobalAttributes = ["lang", "role"];
+const elementToComponentAndObserverOptionsMap = new Map();
+let mutationObserver;
+function updateGlobalAttributes(component, attributeFilter, reuseAttributes = false) {
+  const { el } = component;
+  const updatedAttributes = reuseAttributes ? component.globalAttributes : {};
+  attributeFilter
+    .filter((attr) => !!allowedGlobalAttributes.includes(attr) && !!el.hasAttribute(attr))
+    .forEach((attr) => {
+    const value = el.getAttribute(attr);
+    if (value !== null) {
+      updatedAttributes[attr] = value;
+    }
+  });
+  component.globalAttributes = updatedAttributes;
+}
+function processMutations(mutations) {
+  mutations.forEach(({ target }) => {
+    const [component, options] = elementToComponentAndObserverOptionsMap.get(target);
+    updateGlobalAttributes(component, options.attributeFilter);
+  });
+}
+/**
+ * Helper to set up listening for changes to global attributes.
+ *
+ * render(): VNode {
+ * return (<Host>
+ * <ul {...this.globalAttributes}></div>
+ * </Host>);
+ * }
+ * @param component
+ * @param attributeFilter
+ */
+function watchGlobalAttributes(component, attributeFilter) {
+  const { el } = component;
+  const observerOptions = { attributeFilter };
+  elementToComponentAndObserverOptionsMap.set(el, [component, observerOptions]);
+  updateGlobalAttributes(component, attributeFilter, true);
+  if (!mutationObserver) {
+    mutationObserver = createObserver();
+  }
+  mutationObserver.observe(el, observerOptions);
+}
+/**
+ * Helper remove listening for changes to inherited attributes.
+ * @param component
+ */
+function unwatchGlobalAttributes(component) {
+  elementToComponentAndObserverOptionsMap.delete(component.el);
+  // we explicitly process queued mutations and disconnect and reconnect
+  // the observer until MutationObserver gets an `unobserve` method
+  // see https://github.com/whatwg/dom/issues/126
+  processMutations(mutationObserver.takeRecords());
+  mutationObserver.disconnect();
+  for (const [element, [, observerOptions]] of elementToComponentAndObserverOptionsMap.entries()) {
+    mutationObserver.observe(element, observerOptions);
+  }
+}
+
 const menuCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-menu:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-menu{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-menu{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-menu{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-menu{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-menu{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-menu{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-menu{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-menu:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-menu:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-menu-h{display:none}/*!@:host*/.sc-calcite-menu-h{display:flex}/*!@ul*/ul.sc-calcite-menu{margin:0px;display:inline-flex;block-size:100%;align-items:center;padding:0px}/*!@:host([layout=vertical]) ul*/[layout=vertical].sc-calcite-menu-h ul.sc-calcite-menu{display:flex;inline-size:100%;flex-direction:column}";
 
 class CalciteMenu {
@@ -11819,9 +11854,11 @@ class CalciteMenu {
     this.layout = "horizontal";
     this.messageOverrides = undefined;
     this.messages = undefined;
-    this.role = "menubar";
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
+    this.globalAttributes = {
+      role: "menubar"
+    };
   }
   handleLayoutChange(value) {
     this.setMenuItemLayout(this.menuItems, value);
@@ -11830,7 +11867,7 @@ class CalciteMenu {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -11840,6 +11877,7 @@ class CalciteMenu {
   connectedCallback() {
     connectLocalized(this);
     connectMessages(this);
+    watchGlobalAttributes(this, ["role"]);
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
@@ -11851,6 +11889,7 @@ class CalciteMenu {
   disconnectedCallback() {
     disconnectLocalized(this);
     disconnectMessages(this);
+    unwatchGlobalAttributes(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -11927,7 +11966,7 @@ class CalciteMenu {
   setMenuItemLayout(items, layout) {
     items.forEach((item) => {
       item.layout = layout;
-      if (this.role === "menubar") {
+      if (this.globalAttributes.role === "menubar") {
         item.isTopLevelItem = true;
         item.topLevelMenuLayout = this.layout;
       }
@@ -11939,7 +11978,7 @@ class CalciteMenu {
   //
   // --------------------------------------------------------------------------
   render() {
-    return (hAsync(Host, null, hAsync("ul", { "aria-label": this.label, role: this.role }, hAsync("slot", { onSlotchange: this.handleMenuSlotChange }))));
+    return (hAsync(Host, null, hAsync("ul", { "aria-label": this.label, ...this.globalAttributes }, hAsync("slot", { onSlotchange: this.handleMenuSlotChange }))));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
@@ -11958,9 +11997,9 @@ class CalciteMenu {
       "layout": [513],
       "messageOverrides": [1040],
       "messages": [1040],
-      "role": [1],
       "defaultMessages": [32],
       "effectiveLocale": [32],
+      "globalAttributes": [32],
       "setFocus": [64]
     },
     "$listeners$": [[0, "calciteInternalMenuItemKeyEvent", "calciteInternalNavMenuItemKeyEvent"]],
@@ -11992,7 +12031,7 @@ const CSS$Y = {
 const menuItemCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-menu-item:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-menu-item{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-menu-item{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-menu-item{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-menu-item{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-menu-item{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-menu-item{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-menu-item{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-menu-item:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-menu-item:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-menu-item-h{display:none}/*!@:host*/.sc-calcite-menu-item-h{position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}/*!@:host .container, :host .item-content, :host .content*/.sc-calcite-menu-item-h .container.sc-calcite-menu-item,.sc-calcite-menu-item-h .item-content.sc-calcite-menu-item,.sc-calcite-menu-item-h .content.sc-calcite-menu-item{min-block-size:3rem}/*!@:host([layout=vertical])*/[layout=vertical].sc-calcite-menu-item-h{inline-size:100%}/*!@:host(:not([layout=vertical]))*/.sc-calcite-menu-item-h:not([layout=vertical]){block-size:100%}/*!@.container,\n.item-content*/.container.sc-calcite-menu-item,.item-content.sc-calcite-menu-item{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}/*!@.content*/.content.sc-calcite-menu-item{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);padding-inline:1rem;font-size:var(--calcite-font-size-0);color:var(--calcite-ui-text-2);outline:2px solid transparent;outline-offset:2px;text-decoration:none;border-block-end:0.125rem solid transparent;padding-block-start:0.125rem}/*!@.content:hover*/.content.sc-calcite-menu-item:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-2)}/*!@.content:focus*/.content.sc-calcite-menu-item:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-2);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.content:active*/.content.sc-calcite-menu-item:active{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}/*!@.content span*/.content.sc-calcite-menu-item span.sc-calcite-menu-item{display:inline-flex}/*!@.content.layout--vertical*/.content.layout--vertical.sc-calcite-menu-item{display:flex;inline-size:100%;justify-content:flex-start;padding-block:1rem;border-block-end:0;border-inline-end:0.25rem solid transparent}/*!@:host([active]) .content*/[active].sc-calcite-menu-item-h .content.sc-calcite-menu-item{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-brand)}/*!@:host([active]) .content .icon*/[active].sc-calcite-menu-item-h .content.sc-calcite-menu-item .icon.sc-calcite-menu-item{--calcite-ui-icon-color:var(--calcite-ui-brand)}/*!@.icon--start*/.icon--start.sc-calcite-menu-item{margin-inline-end:0.75rem}/*!@.icon--end*/.icon--end.sc-calcite-menu-item{margin-inline-start:0.75rem}/*!@.icon--dropdown*/.icon--dropdown.sc-calcite-menu-item{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-ui-text-3)}/*!@:host([layout=vertical]) .icon--dropdown*/[layout=vertical].sc-calcite-menu-item-h .icon--dropdown.sc-calcite-menu-item{inset-inline-start:0.25rem}/*!@.icon--breadcrumb*/.icon--breadcrumb.sc-calcite-menu-item{margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-ui-text-3)}/*!@:host([breadcrumb]) .content*/[breadcrumb].sc-calcite-menu-item-h .content.sc-calcite-menu-item{padding-inline-end:0.75rem}/*!@calcite-action*/calcite-action.sc-calcite-menu-item{position:relative;block-size:auto;border-inline-start:1px solid var(--calcite-ui-foreground-1)}/*!@calcite-action:after*/calcite-action.sc-calcite-menu-item:after{position:absolute;inset-inline-start:-1px;display:block;inline-size:1px;content:\"\";inset-block:0.75rem;background-color:var(--calcite-ui-border-3)}/*!@calcite-action:hover:after*/calcite-action.sc-calcite-menu-item:hover:after{block-size:100%;inset-block:0}/*!@.content:focus ~ calcite-action,\n.content:hover ~ calcite-action*/.content.sc-calcite-menu-item:focus~calcite-action.sc-calcite-menu-item,.content.sc-calcite-menu-item:hover~calcite-action.sc-calcite-menu-item{color:var(--calcite-ui-text-1);border-inline-start:1px solid var(--calcite-ui-border-3)}/*!@.container:hover .dropdown-action*/.container.sc-calcite-menu-item:hover .dropdown-action.sc-calcite-menu-item{background-color:var(--calcite-ui-foreground-2)}/*!@.dropdown-menu-items*/.dropdown-menu-items.sc-calcite-menu-item{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;border:1px solid var(--calcite-ui-border-3);background:var(--calcite-ui-foreground-1);inset-block-start:100%;z-index:var(--calcite-app-z-index-dropdown)}/*!@.dropdown-menu-items.open*/.dropdown-menu-items.open.sc-calcite-menu-item{display:block}/*!@.dropdown-menu-items.nested*/.dropdown-menu-items.nested.sc-calcite-menu-item{position:absolute;inset-block-start:-1px;transform:translateX(calc(100% - 2px))}/*!@.parent--vertical*/.parent--vertical.sc-calcite-menu-item{flex-direction:column}/*!@.dropdown--vertical.dropdown-menu-items*/.dropdown--vertical.dropdown-menu-items.sc-calcite-menu-item{position:relative;border-radius:0px;box-shadow:none;inset-block-start:0;transform:none}/*!@.dropdown--vertical.dropdown-menu-items:last-of-type*/.dropdown--vertical.dropdown-menu-items.sc-calcite-menu-item:last-of-type{border-inline:0}/*!@:host([slot=submenu-item]) .parent--vertical*/[slot=submenu-item].sc-calcite-menu-item-h .parent--vertical.sc-calcite-menu-item{padding-inline-start:1.75rem}/*!@.dropdown-menu-items.nested.calcite--rtl*/.dropdown-menu-items.nested.calcite--rtl.sc-calcite-menu-item{transform:translateX(calc(-100% + 2px))}/*!@.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl*/.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl.sc-calcite-menu-item{transform:none}/*!@.hover-href-icon*/.hover-href-icon.sc-calcite-menu-item{position:relative;inset-inline-end:0.25rem;margin-inline-start:auto;padding-inline-start:2rem;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}/*!@content:focus .hover-href-icon,\ncontent:hover .hover-href-icon*/content.sc-calcite-menu-item:focus .hover-href-icon.sc-calcite-menu-item,content.sc-calcite-menu-item:hover .hover-href-icon.sc-calcite-menu-item{inset-inline-end:-0.25rem;opacity:1}";
 
 /**
- * @slot submenu-item - A slot for adding `calcite-menu-item`s in submenu.
+ * @slot submenu-item - A slot for adding `calcite-menu-item`s in a submenu.
  */
 class CalciteMenuItem {
   constructor(hostRef) {
@@ -12096,7 +12135,7 @@ class CalciteMenuItem {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -12442,10 +12481,12 @@ class CalciteNavigation {
 const CSS$W = {
   container: "container",
   heading: "heading",
-  description: "description"
+  description: "description",
+  anchor: "anchor",
+  image: "image"
 };
 
-const navigationLogoCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-navigation-logo:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-navigation-logo{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-navigation-logo{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-navigation-logo{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-navigation-logo{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-navigation-logo{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-navigation-logo{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-navigation-logo{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-navigation-logo:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-navigation-logo:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-navigation-logo-h{display:none}/*!@:host*/.sc-calcite-navigation-logo-h{display:inline-flex;outline:2px solid transparent;outline-offset:2px}/*!@:host a*/.sc-calcite-navigation-logo-h a.sc-calcite-navigation-logo{margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;text-decoration-line:none;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}/*!@:host img*/.sc-calcite-navigation-logo-h img.sc-calcite-navigation-logo{margin:0px;display:flex;block-size:1.75rem}/*!@a:hover,\na:focus*/a.sc-calcite-navigation-logo:hover,a.sc-calcite-navigation-logo:focus{background-color:var(--calcite-ui-foreground-2)}/*!@a:focus*/a.sc-calcite-navigation-logo:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@a:active*/a.sc-calcite-navigation-logo:active{background-color:var(--calcite-ui-foreground-3)}/*!@img*/img.sc-calcite-navigation-logo{padding-inline:1rem}/*!@img ~ .container*/img.sc-calcite-navigation-logo~.container.sc-calcite-navigation-logo{padding-inline-start:0px}/*!@:host(:active) a*/.sc-calcite-navigation-logo-h:active a.sc-calcite-navigation-logo{color:var(--calcite-ui-text-1)}/*!@:host([active]) a*/[active].sc-calcite-navigation-logo-h a.sc-calcite-navigation-logo{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-brand);--calcite-ui-icon-color:var(--calcite-ui-brand)}/*!@.container*/.container.sc-calcite-navigation-logo{display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;padding-inline:1rem}/*!@.heading*/.heading.sc-calcite-navigation-logo{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);margin-block-start:2px}/*!@.description*/.description.sc-calcite-navigation-logo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}";
+const navigationLogoCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-navigation-logo:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-navigation-logo{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-navigation-logo{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-navigation-logo{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-navigation-logo{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-navigation-logo{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-navigation-logo{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-navigation-logo{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-navigation-logo:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-navigation-logo:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-navigation-logo-h{display:none}/*!@:host*/.sc-calcite-navigation-logo-h{display:inline-flex;outline:2px solid transparent;outline-offset:2px}/*!@.anchor*/.anchor.sc-calcite-navigation-logo{margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-size:var(--calcite-font-size-0);line-height:1.25rem;text-decoration-line:none;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}/*!@.anchor:hover,\n.anchor:focus*/.anchor.sc-calcite-navigation-logo:hover,.anchor.sc-calcite-navigation-logo:focus{background-color:var(--calcite-ui-foreground-2)}/*!@.anchor:focus*/.anchor.sc-calcite-navigation-logo:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.anchor:active*/.anchor.sc-calcite-navigation-logo:active{background-color:var(--calcite-ui-foreground-3)}/*!@.image*/.image.sc-calcite-navigation-logo{margin:0px;display:flex;block-size:1.75rem;padding-inline:1rem}/*!@.image ~ .container*/.image.sc-calcite-navigation-logo~.container.sc-calcite-navigation-logo{padding-inline-start:0px}/*!@:host(:active) .anchor*/.sc-calcite-navigation-logo-h:active .anchor.sc-calcite-navigation-logo{color:var(--calcite-ui-text-1)}/*!@:host([active]) .anchor*/[active].sc-calcite-navigation-logo-h .anchor.sc-calcite-navigation-logo{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-brand);--calcite-ui-icon-color:var(--calcite-ui-brand)}/*!@.container*/.container.sc-calcite-navigation-logo{margin-block-start:0.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:1rem;text-align:start}/*!@.heading*/.heading.sc-calcite-navigation-logo{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}/*!@.description*/.description.sc-calcite-navigation-logo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}";
 
 class CalciteNavigationLogo {
   constructor(hostRef) {
@@ -12489,7 +12530,7 @@ class CalciteNavigationLogo {
   // --------------------------------------------------------------------------
   render() {
     const { heading, description, thumbnail } = this;
-    return (hAsync(Host, null, hAsync("a", { href: this.href, rel: this.rel, target: this.target }, thumbnail && hAsync("img", { alt: this.label || "", src: thumbnail }), (heading || description) && (hAsync("div", { class: CSS$W.container }, heading && (hAsync("span", { "aria-label": this.heading, class: CSS$W.heading, key: CSS$W.heading }, heading)), description && (hAsync("span", { "aria-label": this.description, class: CSS$W.description, key: CSS$W.description }, description)))))));
+    return (hAsync(Host, null, hAsync("a", { class: CSS$W.anchor, href: this.href, rel: this.rel, target: this.target }, thumbnail && hAsync("img", { alt: this.label || "", class: CSS$W.image, src: thumbnail }), (heading || description) && (hAsync("div", { class: CSS$W.container }, heading && (hAsync("span", { "aria-label": this.heading, class: CSS$W.heading, key: CSS$W.heading }, heading)), description && (hAsync("span", { "aria-label": this.description, class: CSS$W.description, key: CSS$W.description }, description)))))));
   }
   static get delegatesFocus() { return true; }
   get el() { return getElement(this); }
@@ -12517,10 +12558,11 @@ class CalciteNavigationLogo {
 const CSS$V = {
   textContainer: "text-container",
   fullName: "full-name",
-  username: "username"
+  username: "username",
+  button: "button"
 };
 
-const navigationUserCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-navigation-user:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-navigation-user{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-navigation-user{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-navigation-user{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-navigation-user{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-navigation-user{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-navigation-user{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-navigation-user{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-navigation-user:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-navigation-user:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-navigation-user-h{display:none}/*!@:host*/.sc-calcite-navigation-user-h{display:inline-flex;outline:2px solid transparent;outline-offset:2px}/*!@:host button*/.sc-calcite-navigation-user-h button.sc-calcite-navigation-user{background-color:transparent;border:none;margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-family:var(--calcite-sans-family);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}/*!@:host(:hover) button,\n:host(:focus) button*/.sc-calcite-navigation-user-h:hover button.sc-calcite-navigation-user,.sc-calcite-navigation-user-h:focus button.sc-calcite-navigation-user{background-color:var(--calcite-ui-foreground-2)}/*!@:host(:focus) button*/.sc-calcite-navigation-user-h:focus button.sc-calcite-navigation-user{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@:host(:active) button*/.sc-calcite-navigation-user-h:active button.sc-calcite-navigation-user{background-color:var(--calcite-ui-foreground-3)}/*!@calcite-avatar*/calcite-avatar.sc-calcite-navigation-user{padding-inline:1rem}/*!@calcite-avatar ~ .text-container*/calcite-avatar.sc-calcite-navigation-user~.text-container.sc-calcite-navigation-user{padding-inline-start:0px}/*!@:host(:active) button*/.sc-calcite-navigation-user-h:active button.sc-calcite-navigation-user{color:var(--calcite-ui-text-1)}/*!@:host([active]) button*/[active].sc-calcite-navigation-user-h button.sc-calcite-navigation-user{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-brand);--calcite-ui-icon-color:var(--calcite-ui-brand)}/*!@.text-container*/.text-container.sc-calcite-navigation-user{display:flex;flex-direction:column;text-align:start;padding-inline:1rem}/*!@.full-name*/.full-name.sc-calcite-navigation-user{margin-inline-start:0px;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);margin-block-start:2px}/*!@.username*/.username.sc-calcite-navigation-user{color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}";
+const navigationUserCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-navigation-user:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-navigation-user{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-navigation-user{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-navigation-user{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-navigation-user{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-navigation-user{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-navigation-user{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-navigation-user{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-navigation-user:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-navigation-user:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-navigation-user-h{display:none}/*!@:host*/.sc-calcite-navigation-user-h{display:inline-flex;outline:2px solid transparent;outline-offset:2px}/*!@:host .button*/.sc-calcite-navigation-user-h .button.sc-calcite-navigation-user{background-color:transparent;border:none;margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size-0);line-height:1.25rem;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}/*!@:host(:hover) .button,\n:host(:focus) .button*/.sc-calcite-navigation-user-h:hover .button.sc-calcite-navigation-user,.sc-calcite-navigation-user-h:focus .button.sc-calcite-navigation-user{background-color:var(--calcite-ui-foreground-2)}/*!@:host(:focus) .button*/.sc-calcite-navigation-user-h:focus .button.sc-calcite-navigation-user{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@:host(:active) .button*/.sc-calcite-navigation-user-h:active .button.sc-calcite-navigation-user{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}/*!@calcite-avatar*/calcite-avatar.sc-calcite-navigation-user{padding-inline:1rem}/*!@calcite-avatar ~ .text-container*/calcite-avatar.sc-calcite-navigation-user~.text-container.sc-calcite-navigation-user{padding-inline-start:0px}/*!@:host([active]) .button*/[active].sc-calcite-navigation-user-h .button.sc-calcite-navigation-user{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-1);--calcite-ui-icon-color:var(--calcite-ui-brand)}/*!@.text-container*/.text-container.sc-calcite-navigation-user{margin-block-start:0.125rem;display:flex;flex-direction:column;padding-inline:1rem;text-align:start}/*!@.full-name*/.full-name.sc-calcite-navigation-user{margin-inline-start:0px;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}/*!@.username*/.username.sc-calcite-navigation-user{color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}";
 
 class CalciteNavigationUser {
   constructor(hostRef) {
@@ -12560,7 +12602,7 @@ class CalciteNavigationUser {
   //
   // --------------------------------------------------------------------------
   render() {
-    return (hAsync(Host, null, hAsync("button", { "aria-label": this.label }, hAsync("calcite-avatar", { "full-name": this.fullName, label: this.label, thumbnail: this.thumbnail, "user-id": this.userId, username: this.username }), (this.fullName || this.username) && !this.textDisabled && (hAsync("div", { class: CSS$V.textContainer }, this.fullName && (hAsync("span", { class: CSS$V.fullName, key: CSS$V.fullName }, this.fullName)), this.username && (hAsync("span", { class: CSS$V.username, key: CSS$V.username }, this.username)))))));
+    return (hAsync(Host, null, hAsync("button", { "aria-label": this.label, class: CSS$V.button }, hAsync("calcite-avatar", { "full-name": this.fullName, label: this.label, thumbnail: this.thumbnail, "user-id": this.userId, username: this.username }), (this.fullName || this.username) && !this.textDisabled && (hAsync("div", { class: CSS$V.textContainer }, this.fullName && (hAsync("span", { class: CSS$V.fullName, key: CSS$V.fullName }, this.fullName)), this.username && (hAsync("span", { class: CSS$V.username, key: CSS$V.username }, this.username)))))));
   }
   static get delegatesFocus() { return true; }
   get el() { return getElement(this); }
@@ -12672,7 +12714,7 @@ class Card {
     return (hAsync("div", { class: { "calcite-card-container": true, inline: thumbnailInline } }, this.loading ? (hAsync("div", { class: "calcite-card-loader-container" }, hAsync("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), hAsync("section", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS$U.container]: true } }, this.selectable ? this.renderCheckbox() : null, this.renderHeader(), hAsync("div", { class: "card-content" }, hAsync("slot", null)), this.renderFooter()), !thumbnailStart && this.renderThumbnail()));
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   selectCard() {
     this.selected = !this.selected;
@@ -12949,7 +12991,7 @@ class Chip {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -15693,7 +15735,7 @@ class ColorPicker {
           samplingX = 0;
         }
         else {
-          samplingX = bounds.width;
+          samplingX = bounds.width - 1;
         }
         if (clientY < bounds.y + bounds.height && clientY > bounds.y) {
           samplingY = clientY - bounds.y;
@@ -15925,7 +15967,7 @@ class ColorPicker {
     return this.color || this.previousColor || DEFAULT_COLOR$1;
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // using @Listen as a workaround for VDOM listener not firing
   handleChannelKeyUpOrDown(event) {
@@ -18995,7 +19037,7 @@ class Combobox {
     this.updateActiveItemIndex(-1);
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -20163,7 +20205,7 @@ class DatePicker {
     return (hAsync(Host, { onBlur: this.reset, onKeyDown: this.keyDownHandler }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   valueHandler(value) {
     if (Array.isArray(value)) {
@@ -21786,7 +21828,7 @@ class Filter {
     this.filter(value);
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -22134,7 +22176,7 @@ class FlowItem {
     setComponentLoaded(this);
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -22524,7 +22566,7 @@ class Handle {
     disconnectLocalized(this);
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -22842,7 +22884,7 @@ class InlineEditable {
     }
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -23325,7 +23367,7 @@ class Input {
     return this.childElType === "textarea";
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -25470,7 +25512,7 @@ class InputNumber {
     return this.clearable && this.value.length > 0;
   }
   effectiveLocaleWatcher(locale) {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
     numberStringFormatter.numberFormatOptions = {
       locale,
       numberingSystem: this.numberingSystem,
@@ -25906,7 +25948,7 @@ class InputText {
     return this.clearable && this.value.length > 0;
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -28541,7 +28583,7 @@ class ListItem {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   connectedCallback() {
     connectLocalized(this);
@@ -29099,7 +29141,7 @@ class Modal {
     }
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -29349,7 +29391,7 @@ class Notice {
     }
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
@@ -29547,7 +29589,7 @@ class Pagination {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   effectiveLocaleWatcher() {
     numberStringFormatter.numberFormatOptions = {
@@ -29884,7 +29926,7 @@ class Panel {
     this.resizeObserver?.disconnect();
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -30683,7 +30725,7 @@ class PickListItem {
     this.calciteInternalListItemValueChange.emit({ oldValue, newValue });
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -31084,7 +31126,7 @@ class Popover {
     this.reposition(true);
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -31824,7 +31866,7 @@ class Rating {
     this.emit = false;
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -31984,7 +32026,7 @@ class Scrim {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -32979,7 +33021,7 @@ class ShellPanel {
     this.updateAriaValues();
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -38577,7 +38619,7 @@ class TabTitle {
     this.controls = tabIds[titleIds.indexOf(this.el.id)] || null;
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   updateHasText() {
     this.hasText = this.el.textContent.trim().length > 0;
@@ -38936,7 +38978,7 @@ class TextArea {
     this.textAreaEl.select();
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -39894,7 +39936,7 @@ class TimePicker {
     return 0;
   }
   updateLocale() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
     this.hourCycle = getLocaleHourCycle(this.effectiveLocale, this.numberingSystem);
     this.setValue(this.value, false);
   }
@@ -40086,7 +40128,7 @@ class Tip {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -40276,7 +40318,7 @@ class TipManager {
     this.updateGroupTitle();
   }
   async effectiveLocaleChange() {
-    await updateMessages(this, this.effectiveLocale);
+    await updateMessages(this);
     this.updateGroupTitle();
   }
   // --------------------------------------------------------------------------
@@ -41570,7 +41612,7 @@ class ValueList {
     /* wired up by t9n util */
   }
   effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
+    updateMessages(this);
   }
   // --------------------------------------------------------------------------
   //