@esri/calcite-components 5.1.0-next.9 → 5.1.1-next.0

package/dist/chunks/utils.js

@@ -305,16 +305,16 @@ export {
   hexToRGB as h,
   isValidHex as i,
   CSS as j,
-  toNonAlphaMode as k,
-  HUE_LIMIT_CONSTRAINED as l,
-  normalizeAlpha as m,
+  HUE_LIMIT_CONSTRAINED as k,
+  normalizeAlpha as l,
+  alphaToOpacity as m,
   normalizeHex as n,
   opacityToAlpha as o,
   parseMode as p,
-  alphaToOpacity as q,
-  SCOPE_SIZE as r,
+  SCOPE_SIZE as q,
+  toAlphaMode as r,
   isLonghandHex as s,
-  toAlphaMode as t,
+  toNonAlphaMode as t,
   isShorthandHex as u,
   rgbToHex as v,
   hexChar as w

package/dist/chunks/utils3.js

@@ -53,8 +53,23 @@ function applyLocaleOverride(locale) {
 function getValueAsDateRange(value) {
   return value.map((v, index) => dateFromISO(v, index === 1));
 }
+function getSource(changes, stringProp, dateProp) {
+  const stringPropChanged = changes.has(stringProp);
+  const datePropChanged = changes.has(dateProp);
+  if (stringPropChanged && !datePropChanged) {
+    return stringProp;
+  }
+  if (datePropChanged && !stringPropChanged) {
+    return dateProp;
+  }
+  return null;
+}
+function getMinMaxSource(changes, type) {
+  return type === "min" ? getSource(changes, "min", "minAsDate") : getSource(changes, "max", "maxAsDate");
+}
 export {
-  applyLocaleOverride as a,
-  getLocaleData as b,
-  getValueAsDateRange as g
+  getValueAsDateRange as a,
+  applyLocaleOverride as b,
+  getLocaleData as c,
+  getMinMaxSource as g
 };

package/dist/components/calcite-accordion-item/customElement.d.ts

@@ -10,8 +10,8 @@ import type { HeadingLevel } from "../functional/Heading.js";
  * @cssproperty [--calcite-accordion-text-color] - Specifies the component's text color.
  * @cssproperty [--calcite-accordion-text-color-hover] - Specifies the component's main text color on hover.
  * @cssproperty [--calcite-accordion-text-color-press] - Specifies the component's main text color when pressed.
- * @cssproperty [--calcite-accordion-item-background-color] - [Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color.
- * @cssproperty [--calcite-accordion-item-border-color] - [Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color.
+ * @cssproperty [--calcite-accordion-item-background-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-background-color` instead. Specifies the component's background color.
+ * @cssproperty [--calcite-accordion-item-border-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-border-color` instead. Specifies the component's border color.
  * @cssproperty [--calcite-accordion-item-content-space] - Specifies the component's padding.
  * @cssproperty [--calcite-accordion-item-end-icon-color] - Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
  * @cssproperty [--calcite-accordion-item-expand-icon-color] - Specifies the component's expand icon color.
@@ -19,10 +19,10 @@ import type { HeadingLevel } from "../functional/Heading.js";
  * @cssproperty [--calcite-accordion-item-header-background-color-hover] - Specifies the component's `heading` background color when hovered.
  * @cssproperty [--calcite-accordion-item-header-background-color-press] - Specifies the component's `heading` background color when pressed.
  * @cssproperty [--calcite-accordion-item-heading-text-color] - Specifies the component's `heading` text color.
- * @cssproperty [--calcite-accordion-item-icon-color] - [Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color.
+ * @cssproperty [--calcite-accordion-item-icon-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-icon-color` instead. Specifies the component's default icon color.
  * @cssproperty [--calcite-accordion-item-start-icon-color] - Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
- * @cssproperty [--calcite-accordion-item-text-color] - [Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color.
- * @cssproperty [--calcite-accordion-item-text-color-hover] - [Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover.
+ * @cssproperty [--calcite-accordion-item-text-color] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color` instead. Specifies the component's text color.
+ * @cssproperty [--calcite-accordion-item-text-color-hover] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-accordion-text-color-hover` instead. Specifies the component's text color on hover.
  * @slot  - A slot for adding custom content, including nested `calcite-accordion-item`s.
  * @slot [actions-end] - A slot for adding `calcite-action`s or content to the end side of the component's header.
  * @slot [actions-start] - A slot for adding `calcite-action`s or content to the start side of the component's header.
@@ -57,7 +57,7 @@ export abstract class AccordionItem extends LitElement {
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component's content area is collapsed. */

package/dist/components/calcite-action/customElement.d.ts

@@ -6,16 +6,16 @@ import type { IconName } from "../calcite-icon/interfaces.js";
 /**
  * @cssproperty [--calcite-action-background-color-hover] - Specifies the component's background color when hovered.
  * @cssproperty [--calcite-action-background-color-press] - Specifies the component's background color when active.
- * @cssproperty [--calcite-action-background-color-pressed] - [Deprecated] Use --calcite-action-background-color-press. Specifies the component's background color when active.
+ * @cssproperty [--calcite-action-background-color-pressed] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-background-color-press` instead. Specifies the component's background color when active.
  * @cssproperty [--calcite-action-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-action-corner-radius-end-end] - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end end.
- * @cssproperty [--calcite-action-corner-radius-end-start] - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius end start.
- * @cssproperty [--calcite-action-corner-radius-start-end] - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start end.
- * @cssproperty [--calcite-action-corner-radius-start-start] - [Deprecated] Use --calcite-action-corner-radius. Specifies the component's corner radius start start.
+ * @cssproperty [--calcite-action-corner-radius-end-end] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius end end.
+ * @cssproperty [--calcite-action-corner-radius-end-start] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius end start.
+ * @cssproperty [--calcite-action-corner-radius-start-end] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius start end.
+ * @cssproperty [--calcite-action-corner-radius-start-start] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-corner-radius` instead. Specifies the component's corner radius start start.
  * @cssproperty [--calcite-action-corner-radius] - Specifies the component's corner radius.
  * @cssproperty [--calcite-action-indicator-color] - Specifies the component's indicator color.
  * @cssproperty [--calcite-action-text-color-press] - Specifies the component's text color when pressed or hovered.
- * @cssproperty [--calcite-action-text-color-pressed] - [Deprecated] Use --calcite-action-text-color-press. Specifies the component's text color when hovered.
+ * @cssproperty [--calcite-action-text-color-pressed] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-action-text-color-press` instead. Specifies the component's text color when hovered.
  * @cssproperty [--calcite-action-text-color] - Specifies the component's text color.
  * @slot  - A slot for adding non-interactive content, such as a `calcite-icon`.
  */
@@ -27,7 +27,7 @@ export abstract class Action extends LitElement {
    */
   accessor active: boolean;
   /** Specifies the horizontal alignment of button elements with text content. */
-  accessor alignment: Alignment;
+  accessor alignment: Alignment | undefined;
   /**
    * Specifies the appearance of the component.
    *
@@ -55,9 +55,9 @@ export abstract class Action extends LitElement {
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string;
+  accessor form: string | undefined;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -71,7 +71,7 @@ export abstract class Action extends LitElement {
    */
   accessor indicator: boolean;
   /** Specifies an accessible label for the component. If no label is provided, the label inherits what's provided for the `text` prop. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, a busy indicator is displayed.
    *
@@ -84,6 +84,12 @@ export abstract class Action extends LitElement {
       indicator?: string;
       indicatorLabel?: string;
   };
+  /**
+   * When `true`, the component is not automatically overflowed into a menu by a parent `calcite-action-bar`.
+   *
+   * @default false
+   */
+  accessor overflowDisabled: boolean;
   /**
    * Specifies the size of the component.
    *
@@ -99,6 +105,8 @@ export abstract class Action extends LitElement {
   /**
    * When `true`, displays `text` adjacent to the `icon`.
    *
+   * When `true` and the component is used as a child of `calcite-action-bar`, the text will be shown initially regardless of the parent components `expanded` state.
+   *
    * @default false
    */
   accessor textEnabled: boolean;
@@ -106,14 +114,14 @@ export abstract class Action extends LitElement {
    * Specifies the default behavior of the component.
    *
    * @default "button"
-   * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
+   * @see [MDN - type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)
    */
   accessor type: HTMLButtonElement["type"];
   /**
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
 }

package/dist/components/calcite-action/customElement.js

@@ -9,10 +9,10 @@ import { c as createObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { f as findAssociatedForm, s as submitForm, r as resetForm } from "../../chunks/form.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useFormTrigger } from "../../chunks/useFormTrigger.js";
 import { I as IDS, C as CSS } from "../../chunks/resources.js";
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-internal-action-font-size: var(--calcite-font-size--2);--calcite-internal-action-height: var(--calcite-size-sm);--calcite-internal-action-line-height: 1rem;--calcite-internal-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-font-size: var(--calcite-font-size--1);--calcite-internal-action-height: var(--calcite-size-md);--calcite-internal-action-line-height: 1rem;--calcite-internal-action-spacing: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-font-size: var(--calcite-font-size-0);--calcite-internal-action-height: var(--calcite-size-lg);--calcite-internal-action-line-height: 1.25rem;--calcite-internal-action-spacing: var(--calcite-spacing-sm-plus)}:host{display:flex;cursor:pointer;background-color:transparent;--calcite-internal-action-text-color: var(--calcite-color-text-3);border-radius:var(--calcite-action-corner-radius, var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius-xs)))}.interaction-container{border-radius:inherit}:host([width=full]){flex:1 0 auto}:host([width=full]) .button{justify-content:center}:host([width=full]) .button .text-container--visible{flex:none}:host([drag-handle]){cursor:move;--calcite-internal-action-text-color: var(--calcite-color-border-input);--calcite-internal-action-padding-inline: var(--calcite-spacing-xxs)}.button{position:relative;margin:0;display:flex;inline-size:auto;align-items:center;justify-content:flex-start;border-style:none;outline-color:transparent;background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));border-radius:inherit;color:var(--calcite-action-text-color, var(--calcite-internal-action-text-color));cursor:inherit;flex:1 0 auto;font-family:inherit;font-size:var(--calcite-internal-action-font-size);font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-internal-action-line-height);min-block-size:var(--calcite-internal-action-height);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-internal-action-spacing));padding-inline:var(--calcite-internal-action-padding-inline, var(--calcite-internal-action-spacing));text-align:start}.button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}.button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}.button--text-visible{gap:var(--calcite-internal-action-spacing);inline-size:100%}.icon-container{pointer-events:none;margin:0;display:flex;align-items:center;justify-content:center}.text-container{margin:0;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition-property:opacity;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:inline-size}.text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([active]) .button{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-3));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}:host([active]) .button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-3))}:host([active]) .button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) calcite-loader[inline]{margin-inline-end:0px}:host([appearance=transparent]):host([active]) .button{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-transparent-press)))}:host([appearance=transparent]) .button{transition-property:box-shadow;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);background-color:var(--calcite-action-background-color, var(--calcite-color-transparent))}:host([appearance=transparent]) .button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-transparent-hover))}:host([appearance=transparent]) .button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-transparent-press)))}:host([selection-appearance=highlight]):host([active]) .button{background-color:var(--calcite-color-surface-highlight);color:var(--calcite-color-text-highlight)}:host([active-descendant]) .button{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.indicator-with-icon{position:relative}.indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-without-icon{margin-inline:.25rem;inline-size:1rem;position:relative}.indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}:host([scale=s]) .indicator-with-icon{position:relative}:host([scale=s]) .indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.125rem;inset-inline-end:-.125rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand));block-size:.375rem;inline-size:.375rem}:host([scale=s]) .indicator-without-icon{position:relative}:host([scale=s]) .indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.175rem;inset-inline-end:-.175rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand));block-size:.375rem;inline-size:.375rem}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-internal-action-font-size: var(--calcite-font-size--2);--calcite-internal-action-min-height: var(--calcite-size-sm);--calcite-internal-action-line-height: 1rem;--calcite-internal-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-font-size: var(--calcite-font-size--1);--calcite-internal-action-min-height: var(--calcite-size-md);--calcite-internal-action-line-height: 1rem;--calcite-internal-action-spacing: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-font-size: var(--calcite-font-size-0);--calcite-internal-action-min-height: var(--calcite-size-lg);--calcite-internal-action-line-height: 1.25rem;--calcite-internal-action-spacing: var(--calcite-spacing-sm-plus)}:host{display:flex;cursor:pointer;background-color:transparent;--calcite-internal-action-text-color: var(--calcite-color-text-3);border-radius:var(--calcite-action-corner-radius, var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius-xs)) var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius-xs)))}.interaction-container{border-radius:inherit}:host([width=full]){flex:1 0 auto}:host([width=full]) .button{justify-content:center}:host([width=full]) .button .text-container--visible{flex:none}:host([drag-handle]){cursor:move;--calcite-internal-action-text-color: var(--calcite-color-border-input);--calcite-internal-action-padding-inline: var(--calcite-spacing-xxs)}.button{position:relative;margin:0;display:flex;inline-size:auto;align-items:center;justify-content:flex-start;border-style:none;outline-color:transparent;box-sizing:border-box;background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));border-radius:inherit;color:var(--calcite-action-text-color, var(--calcite-internal-action-text-color));cursor:inherit;flex:1 0 auto;font-family:inherit;font-size:var(--calcite-internal-action-font-size);font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-internal-action-line-height);min-block-size:var(--calcite-internal-action-height, var(--calcite-internal-action-min-height));max-block-size:var(--calcite-internal-action-height, none);padding-block:var(--calcite-internal-action-padding-block, var(--calcite-internal-action-spacing));padding-inline:var(--calcite-internal-action-padding-inline, var(--calcite-internal-action-spacing));text-align:start}.button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}.button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}.button--text-visible{gap:var(--calcite-internal-action-spacing);inline-size:100%}.icon-container{pointer-events:none;margin:0;display:flex;align-items:center;justify-content:center}.text-container{margin:0;inline-size:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition-property:opacity;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:inline-size}.text-container--visible{inline-size:auto;flex:1 1 auto;opacity:1}:host([active]) .button{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-3));color:var(--calcite-action-text-color-press, var(--calcite-action-text-color-pressed, var(--calcite-color-text-1)))}:host([active]) .button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-foreground-3))}:host([active]) .button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3)))}:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}:host([loading]) calcite-loader[inline]{margin-inline-end:0px}:host([appearance=transparent]):host([active]) .button{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-transparent-press)))}:host([appearance=transparent]) .button{transition-property:box-shadow;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1);background-color:var(--calcite-action-background-color, var(--calcite-color-transparent))}:host([appearance=transparent]) .button:hover{background-color:var(--calcite-action-background-color-hover, var(--calcite-color-transparent-hover))}:host([appearance=transparent]) .button:active{background-color:var(--calcite-action-background-color-press, var(--calcite-action-background-color-pressed, var(--calcite-color-transparent-press)))}:host([selection-appearance=highlight]):host([active]) .button{background-color:var(--calcite-color-surface-highlight);color:var(--calcite-color-text-highlight)}:host([active-descendant]) .button{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([alignment=center]) .button{justify-content:center}:host([alignment=end]) .button{justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-inline:0px}.slot-container{display:flex}.slot-container--hidden{display:none}.indicator-with-icon{position:relative}.indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}.indicator-without-icon{margin-inline:.25rem;inline-size:1rem;position:relative}.indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.275rem;inset-inline-end:-.275rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand))}:host([scale=s]) .indicator-with-icon{position:relative}:host([scale=s]) .indicator-with-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.125rem;inset-inline-end:-.125rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand));block-size:.375rem;inline-size:.375rem}:host([scale=s]) .indicator-without-icon{position:relative}:host([scale=s]) .indicator-without-icon:after{content:"";position:absolute;block-size:.5rem;inline-size:.5rem;border-radius:9999px;inset-block-end:-.175rem;inset-inline-end:-.175rem;background-color:var(--calcite-action-indicator-color, var(--calcite-color-brand));block-size:.375rem;inline-size:.375rem}.indicator-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class Action extends LitElement {
   constructor() {
     super(...arguments);
@@ -24,6 +24,7 @@ class Action extends LitElement {
     this.focusSetter = useSetFocus()(this);
     this.indicatorRef = createRef();
     this.interactiveContainer = useInteractive(this);
+    this.formTrigger = useFormTrigger()(this);
     this.active = false;
     this.activeDescendant = false;
     this.appearance = "transparent";
@@ -33,13 +34,17 @@ class Action extends LitElement {
     this.iconFlipRtl = false;
     this.indicator = false;
     this.loading = false;
+    this.overflowDisabled = false;
     this.scale = "m";
     this.width = "auto";
     this.textEnabled = false;
     this.type = "button";
   }
   static {
-    this.properties = { aria: [0, {}, { attribute: false }], active: [7, {}, { reflect: true, type: Boolean }], activeDescendant: [7, {}, { reflect: true, type: Boolean }], alignment: [3, {}, { reflect: true }], appearance: [3, {}, { reflect: true }], compact: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], indicator: [7, {}, { reflect: true, type: Boolean }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], scale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }], text: 1, textEnabled: [7, {}, { reflect: true, type: Boolean }], type: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
+    this.properties = { aria: [0, {}, { attribute: false }], active: [7, {}, { reflect: true, type: Boolean }], activeDescendant: [7, {}, { reflect: true, type: Boolean }], alignment: [3, {}, { reflect: true }], appearance: [3, {}, { reflect: true }], compact: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], indicator: [7, {}, { reflect: true, type: Boolean }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], overflowDisabled: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }], text: 1, textEnabled: [7, {}, { reflect: true, type: Boolean }], type: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
+  }
+  static {
+    this.formAssociated = true;
   }
   static {
     this.styles = styles;
@@ -49,22 +54,12 @@ class Action extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.formEl = findAssociatedForm(this);
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.formEl = null;
     this.mutationObserver?.disconnect();
   }
-  handleClick() {
-    const { type } = this;
-    if (type === "submit") {
-      submitForm(this);
-    } else if (type === "reset") {
-      resetForm(this);
-    }
-  }
   renderTextContainer() {
     const { text, textEnabled } = this;
     const textContainerClasses = {
@@ -106,9 +101,9 @@ class Action extends LitElement {
       ...internalControlsElements
     ];
     if (this.dragHandle) {
-      return html`<span .ariaBusy=${loading} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabel=${ariaLabel} .ariaLabelledByElements=${this.aria?.labelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} id=${buttonId ?? nothing} role=button tabindex=${(this.disabled ? null : 0) ?? nothing} ${ref(this.buttonRef)}>${buttonContent}</span>`;
+      return html`<span .ariaBusy=${loading} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabel=${ariaLabel} .ariaLabelledByElements=${this.aria?.labelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} id=${buttonId ?? nothing} role=button tabindex=${(this.disabled ? void 0 : 0) ?? nothing} ${ref(this.buttonRef)}>${buttonContent}</span>`;
     }
-    return html`<button .ariaBusy=${loading} .ariaChecked=${this.aria?.checked} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabel=${ariaLabel} .ariaLabelledByElements=${this.aria?.labelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} .disabled=${disabled} id=${buttonId ?? nothing} @click=${this.handleClick} .role=${this.aria?.role} ${ref(this.buttonRef)}>${buttonContent}</button>`;
+    return html`<button .ariaBusy=${loading} .ariaChecked=${this.aria?.checked} .ariaControlsElements=${ariaControlsElements} .ariaDescribedByElements=${this.aria?.describedByElements} .ariaExpanded=${this.aria?.expanded} .ariaHasPopup=${this.aria?.hasPopup} .ariaLabel=${ariaLabel} .ariaLabelledByElements=${this.aria?.labelledByElements} .ariaOwnsElements=${this.aria?.ownsElements} .ariaPressed=${this.aria?.pressed} class=${safeClassMap(buttonClasses)} .disabled=${disabled} id=${buttonId ?? nothing} .role=${this.aria?.role} type=${this.type ?? nothing} ${ref(this.buttonRef)}>${buttonContent}</button>`;
   }
   render() {
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.renderButton()}${this.renderIndicatorText()}` });

package/dist/components/calcite-action-bar/customElement.d.ts

@@ -16,9 +16,9 @@ import type { OverlayPositioning } from "../../utils/floating-ui.js";
  */
 export abstract class ActionBar extends LitElement {
   /** Specifies an accessible name for the last `calcite-action-group`. */
-  accessor actionsEndGroupLabel: string;
+  accessor actionsEndGroupLabel: string | undefined;
   /** Specifies an accessible name for the first `calcite-action-group`. */
-  accessor actionsStartGroupLabel: string;
+  accessor actionsStartGroupLabel: string | undefined;
   /**
    * When `true`, the expand-toggling behavior is disabled.
    *
@@ -81,7 +81,7 @@ export abstract class ActionBar extends LitElement {
    *
    * When `expanded` is `true`, the chevron direction is reversed.
    */
-  accessor position: Extract<"start" | "end", Position>;
+  accessor position: Extract<"start" | "end", Position> | undefined;
   /**
    * Specifies the size of the expand `calcite-action`.
    *
@@ -98,7 +98,7 @@ export abstract class ActionBar extends LitElement {
    * Sets focus on the component's first focusable element.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component's content area is collapsed. */

package/dist/components/calcite-action-bar/customElement.js

@@ -48,18 +48,19 @@ const SLOTS = {
   actionsStart: "actions-start",
   expandTooltip: "expand-tooltip"
 };
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-bar-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-sm));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-space-sm-plus));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm-plus)}:host{display:inline-flex;align-self:stretch;background:transparent;--calcite-internal-action-group-dividing-border-margin: calc(var(--calcite-spacing-base) + 1px)}.container{display:inline-flex;flex:1 1 auto;flex-direction:column;background-color:var(--calcite-action-bar-background-color, var(--calcite-color-foreground-1));gap:var(--calcite-internal-action-bar-gap);padding:var(--calcite-internal-action-bar-padding)}@keyframes in{0%{opacity:0}to{opacity:1}}:host([floating]) .container{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;overflow:hidden;border-radius:var(--calcite-action-bar-corner-radius, var(--calcite-corner-radius-round));--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--calcite-action-bar-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow))}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]):host([overflow-actions-disabled]) .container{overflow-y:auto}:host([layout=vertical]):host([expanded]) .container{max-inline-size:var(--calcite-action-bar-expanded-max-width, auto)}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm);border-image:linear-gradient(to right,transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;padding-block-end:var(--calcite-internal-action-bar-padding)}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]):host([overflow-actions-disabled]) .container{overflow-x:auto}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=horizontal]) ::slotted(calcite-action-group:not(:last-of-type)){border-image:linear-gradient(transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;border-inline-end-width:var(--calcite-border-width-sm);padding-inline-end:var(--calcite-internal-action-bar-padding)}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-bar-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-sm));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-space-sm-plus));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm-plus)}:host{display:inline-flex;align-self:stretch;background:transparent;--calcite-internal-action-group-dividing-border-margin: calc(var(--calcite-spacing-base) + 1px)}.container{display:inline-flex;flex:1 1 auto;flex-direction:column;background-color:var(--calcite-action-bar-background-color, var(--calcite-color-foreground-1));gap:var(--calcite-internal-action-bar-gap);padding:var(--calcite-internal-action-bar-padding)}@keyframes in{0%{opacity:0}to{opacity:1}}:host([floating]) .container{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;overflow:hidden;border-radius:var(--calcite-action-bar-corner-radius, var(--calcite-corner-radius-round));box-shadow:var(--calcite-action-bar-shadow, var(--calcite-shadow-md))}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]):host([overflow-actions-disabled]) .container{overflow-y:auto}:host([layout=vertical]):host([expanded]) .container{max-inline-size:var(--calcite-action-bar-expanded-max-width, auto)}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm);border-image:linear-gradient(to right,transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;padding-block-end:var(--calcite-internal-action-bar-padding)}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]):host([overflow-actions-disabled]) .container{overflow-x:auto}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=horizontal]) ::slotted(calcite-action-group:not(:last-of-type)){border-image:linear-gradient(transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;border-inline-end-width:var(--calcite-border-width-sm);padding-inline-end:var(--calcite-internal-action-bar-padding)}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}`;
 class ActionBar extends LitElement {
   constructor() {
     super();
     this.actions = [];
     this.containerRef = createRef();
     this.direction = useDirection();
+    this.actionGroups = [];
     this.mutationObserver = createObserver("mutation", () => this.mutationObserverHandler());
     this.cancelable = useCancelable()(this);
     this.resize = debounce(({ width, height }) => {
       const { expanded, expandDisabled, layout, overflowActionsDisabled, expandPosition } = this;
-      if (overflowActionsDisabled || layout === "vertical" && !height || layout === "horizontal" && !width) {
+      if (overflowActionsDisabled || layout === "vertical" && !height || layout === "horizontal" && !width || !this.containerRef.value) {
         return;
       }
       this.updateGroups();
@@ -108,7 +109,7 @@ class ActionBar extends LitElement {
       this.expanded = !this.expanded;
       this.calciteActionBarToggle.emit();
     };
-    this.messages = useT9n();
+    this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.setExpandToggleEl = (el) => {
       this.expandToggleEl = el;
@@ -260,7 +261,7 @@ class ActionBar extends LitElement {
     this.queryAndStoreActions();
     const actions = this.actions.filter((action) => !action.disabled);
     const current = document.activeElement;
-    if (!isAction(current)) {
+    if (!isAction(current) || !actions.includes(current)) {
       return;
     }
     switch (event.key) {
@@ -289,7 +290,12 @@ class ActionBar extends LitElement {
   }
   setActionTabIndexes(active) {
     this.actions.forEach((action) => {
-      action.tabIndex = !action.disabled && action === active ? 0 : -1;
+      const tabIndex = !action.disabled && action === active ? 0 : -1;
+      if (tabIndex === 0) {
+        action.removeAttribute("tabindex");
+      } else {
+        action.tabIndex = tabIndex;
+      }
     });
   }
   renderExpandTooltipSlot() {
@@ -297,7 +303,7 @@ class ActionBar extends LitElement {
   }
   renderExpandToggle() {
     const { el, expanded, toggleExpand, messages, position, scale } = this;
-    return ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, direction: this.direction, el, expandLabel: messages.expandLabel, expandText: messages.expand, expanded, position, ref: this.setExpandToggleEl, scale, toggle: toggleExpand, tooltip: this.expandTooltip });
+    return ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, direction: this.direction, el, expanded, expandLabel: messages.expandLabel, expandText: messages.expand, position, ref: this.setExpandToggleEl, scale, toggle: toggleExpand, tooltip: this.expandTooltip });
   }
   renderActionsGroup(position) {
     const { expandDisabled, scale, layout, overlayPositioning, expandPosition } = this;

package/dist/components/calcite-action-group/customElement.d.ts

@@ -16,7 +16,7 @@ import type { Columns } from "./interfaces.js";
  */
 export abstract class ActionGroup extends LitElement {
   /** Specifies the number of columns. */
-  accessor columns: Columns;
+  accessor columns: Columns | undefined;
   /**
    * When `true`, expands the component and its contents.
    *
@@ -24,7 +24,7 @@ export abstract class ActionGroup extends LitElement {
    */
   accessor expanded: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * Indicates the layout of the component.
    *
@@ -33,7 +33,7 @@ export abstract class ActionGroup extends LitElement {
    */
   accessor layout: Extract<"horizontal" | "vertical" | "grid", Layout>;
   /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
-  accessor menuFlipPlacements: FlipPlacement[];
+  accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, the `calcite-action-menu` is open.
    *
@@ -41,9 +41,15 @@ export abstract class ActionGroup extends LitElement {
    */
   accessor menuOpen: boolean;
   /** Specifies the position of the action menu. */
-  accessor menuPlacement: LogicalPlacement;
+  accessor menuPlacement: LogicalPlacement | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: { more?: string; };
+  /**
+   * When `true`, the component's actions will not be overflowed into a menu by a parent `calcite-action-bar`.
+   *
+   * @default false
+   */
+  accessor overflowActionsDisabled: boolean;
   /**
    * Specifies the type of positioning to use for overlaid content, where:
    *
@@ -82,14 +88,14 @@ export abstract class ActionGroup extends LitElement {
    * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
-   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /**
    * Sets focus on the component's first focusable element.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires after an action's active state changes. */

package/dist/components/calcite-action-group/customElement.js

@@ -29,6 +29,7 @@ class ActionGroup extends LitElement {
     this.layout = "vertical";
     this.menuOpen = false;
     this.overlayPositioning = "absolute";
+    this.overflowActionsDisabled = false;
     this.scale = "m";
     this.selectionMode = "none";
     this.topLayerDisabled = false;
@@ -39,7 +40,7 @@ class ActionGroup extends LitElement {
     this.listen("click", this.handleActionClick);
   }
   static {
-    this.properties = { hasMenuActions: [16, {}, { state: true }], columns: [11, {}, { type: Number, reflect: true }], expanded: [7, {}, { reflect: true, type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], selectedActions: [0, {}, { attribute: false }] };
+    this.properties = { hasMenuActions: [16, {}, { state: true }], columns: [11, {}, { type: Number, reflect: true }], expanded: [7, {}, { reflect: true, type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], selectedActions: [0, {}, { attribute: false }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };

package/dist/components/calcite-action-menu/customElement.d.ts

@@ -64,14 +64,14 @@ export abstract class ActionMenu extends LitElement {
    * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
-   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /**
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component's content area is collapsed. */

package/dist/components/calcite-action-pad/customElement.d.ts

@@ -13,7 +13,7 @@ import type { OverlayPositioning } from "../../utils/floating-ui.js";
  */
 export abstract class ActionPad extends LitElement {
   /** Specifies the accessible label for the last `calcite-action-group`. */
-  accessor actionsEndGroupLabel: string;
+  accessor actionsEndGroupLabel: string | undefined;
   /**
    * When `true`, the expand-toggling behavior is disabled.
    *
@@ -50,7 +50,7 @@ export abstract class ActionPad extends LitElement {
    */
   accessor overlayPositioning: OverlayPositioning;
   /** Specifies the position of the component depending on the element's `dir` property. */
-  accessor position: Extract<"start" | "end", Position>;
+  accessor position: Extract<"start" | "end", Position> | undefined;
   /**
    * Specifies the size of the expand `calcite-action`.
    *
@@ -67,7 +67,7 @@ export abstract class ActionPad extends LitElement {
    * Sets focus on the component's first focusable element.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component's content area is collapsed. */

package/dist/components/calcite-action-pad/customElement.js

@@ -17,7 +17,7 @@ const CSS = {
 const SLOTS = {
   expandTooltip: "expand-tooltip"
 };
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-pad-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-spacing-sm));--calcite-internal-action-pad-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-space-sm-plus));--calcite-internal-action-pad-padding: var(--calcite-spacing-sm-plus)}:host{display:block}@keyframes in{0%{opacity:0}to{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-action-pad-corner-radius, .125rem);background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width, auto)}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:1px;padding-block-end:var(--calcite-internal-action-pad-padding)}.container{display:inline-flex;flex-direction:column;overflow:hidden;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);border-radius:calc(var(--calcite-action-pad-corner-radius, .125rem) * 2);background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));gap:var(--calcite-internal-action-pad-gap);padding:var(--calcite-internal-action-pad-padding)}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:1px;padding-inline-end:var(--calcite-internal-action-pad-padding)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-pad-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-spacing-sm));--calcite-internal-action-pad-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-space-sm-plus));--calcite-internal-action-pad-padding: var(--calcite-spacing-sm-plus)}:host{display:block}@keyframes in{0%{opacity:0}to{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-action-pad-corner-radius, .125rem);background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width, auto)}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:1px;padding-block-end:var(--calcite-internal-action-pad-padding)}.container{display:inline-flex;flex-direction:column;overflow:hidden;box-shadow:var(--calcite-shadow-md);border-radius:calc(var(--calcite-action-pad-corner-radius, .125rem) * 2);background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));gap:var(--calcite-internal-action-pad-gap);padding:var(--calcite-internal-action-pad-padding)}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:1px;padding-inline-end:var(--calcite-internal-action-pad-padding)}:host([hidden]){display:none}[hidden]{display:none}`;
 class ActionPad extends LitElement {
   constructor() {
     super();
@@ -28,7 +28,7 @@ class ActionPad extends LitElement {
       this.expanded = !this.expanded;
       this.calciteActionPadToggle.emit();
     };
-    this.messages = useT9n();
+    this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.expandDisabled = false;
     this.expanded = false;
@@ -120,7 +120,7 @@ class ActionPad extends LitElement {
     this.queryAndStoreActions();
     const actions = this.actions.filter((action) => !action.disabled);
     const current = document.activeElement;
-    if (!isAction(current)) {
+    if (!isAction(current) || !actions.includes(current)) {
       return;
     }
     switch (event.key) {
@@ -152,9 +152,14 @@ class ActionPad extends LitElement {
       action.selectionAppearance = this.selectionAppearance;
     });
   }
-  updateTabIndexOfItems(target) {
-    this.actions.forEach((item) => {
-      item.tabIndex = target !== item ? -1 : 0;
+  updateTabIndexOfItems(active) {
+    this.actions.forEach((action) => {
+      const tabIndex = !action.disabled && action === active ? 0 : -1;
+      if (tabIndex === 0) {
+        action.removeAttribute("tabindex");
+      } else {
+        action.tabIndex = tabIndex;
+      }
     });
   }
   queryAndStoreActions() {
@@ -167,7 +172,7 @@ class ActionPad extends LitElement {
   }
   renderBottomActionGroup() {
     const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout, actionsEndGroupLabel, overlayPositioning } = this;
-    const expandToggleNode = !expandDisabled ? ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, direction: this.direction, el, expandLabel: messages.expandLabel, expandText: messages.expand, expanded, position, scale, toggle: toggleExpand, tooltip: this.expandTooltip }) : null;
+    const expandToggleNode = !expandDisabled ? ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, direction: this.direction, el, expanded, expandLabel: messages.expandLabel, expandText: messages.expand, position, scale, toggle: toggleExpand, tooltip: this.expandTooltip }) : null;
     return expandToggleNode ? html`<calcite-action-group class=${safeClassMap(CSS.actionGroupEnd)} .label=${actionsEndGroupLabel} .layout=${layout} .overlayPositioning=${overlayPositioning} .scale=${scale}><slot name=${SLOTS.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${expandToggleNode}</calcite-action-group>` : null;
   }
   render() {

package/dist/components/calcite-alert/customElement.d.ts

@@ -90,14 +90,14 @@ export abstract class Alert extends LitElement {
    * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
-   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /**
    * Sets focus on the component's "close" button, the first focusable item.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component is requested to be closed and before the closing transition begins. */