@esri/calcite-components 5.2.0-next.1 → 5.2.0-next.100

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

@@ -1,20 +1,49 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { LogicalFlowPosition, Scale } from "../interfaces.js";
+import type { LogicalFlowPosition, Scale } from "../types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's accent color when `selected`. */
+  "--calcite-card-accent-color-selected": "*";
+  /** Specifies the component's background color. */
+  "--calcite-card-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-card-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-card-corner-radius": "*";
+  /** Specifies the component's selection element background color when hovered. */
+  "--calcite-card-selection-background-color-hover": "*";
+  /** Specifies the component's selection element background color when active. */
+  "--calcite-card-selection-background-color-press": "*";
+  /**
+   * Specifies the component's selection element background color.
+   *
+   * @deprecated in v2.13.0, removal target v6.0.0 - Use `--calcite-card-background-color` instead.
+   */
+  "--calcite-card-selection-background-color": "*";
+  /** Specifies the component's selection element color when hovered or focused. */
+  "--calcite-card-selection-color-hover": "*";
+  /** Specifies the component's selection element color. */
+  "--calcite-card-selection-color": "*";
+  /**
+   * Specifies the component's selection element icon color when hovered.
+   *
+   * @deprecated in v2.13.0, removal target v6.0.0 - Use `--calcite-card-selection-color-hover` instead.
+   */
+  "--calcite-card-selection-icon-color-hover": "*";
+  /**
+   * Specifies the component's selection element icon color when `selected`.
+   *
+   * @deprecated in v2.13.0, removal target v6.0.0 - Use `--calcite-card-accent-color-selected` instead.
+   */
+  "--calcite-card-selection-icon-color-selected": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-card-shadow": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-card-accent-color-selected] - Specifies the component's accent color when `selected`.
- * @cssproperty [--calcite-card-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-card-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-card-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-card-selection-background-color-hover] - Specifies the component's selection element background color when hovered.
- * @cssproperty [--calcite-card-selection-background-color-press] - Specifies the component's selection element background color when active.
- * @cssproperty [--calcite-card-selection-background-color] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-card-background-color` instead. Specifies the component's selection element background color.
- * @cssproperty [--calcite-card-selection-color-hover] - Specifies the component's selection element color when hovered or focused.
- * @cssproperty [--calcite-card-selection-color] - Specifies the component's selection element color.
- * @cssproperty [--calcite-card-selection-icon-color-hover] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-card-selection-color-hover` instead. Specifies the component's selection element icon color when hovered.
- * @cssproperty [--calcite-card-selection-icon-color-selected] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-card-accent-color-selected` instead. Specifies the component's selection element icon color when `selected`.
- * @cssproperty [--calcite-card-shadow] - Specifies the component's shadow.
  * @slot  - A slot for adding content.
  * @slot [thumbnail] - A slot for adding a thumbnail.
  * @slot [heading] - A slot for adding a heading.
@@ -37,10 +66,14 @@ export abstract class Card extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      select?: string;
-      loading?: string;
+      select?: string | undefined;
+      loading?: string | undefined;
   };
   /**
    * Specifies the size of the component. When contained in a parent `calcite-card-group`, inherits the parent's `scale` value, but can be overridden if needed.

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

@@ -7,40 +7,17 @@ import { g as getIconScale } from "../../chunks/component.js";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const CSS = {
-  container: "container",
-  contentWrapper: "content-wrapper",
-  header: "header",
-  footer: "footer",
-  checkboxWrapper: "checkbox-wrapper",
-  checkboxWrapperDeprecated: "checkbox-wrapper-deprecated",
-  thumbnailWrapper: "thumbnail-wrapper",
-  headerTextContainer: "header-text-container",
-  cardContent: "card-content",
-  hasSlottedContent: "has-slotted-content"
-};
-const SLOTS = {
-  thumbnail: "thumbnail",
-  heading: "heading",
-  description: "description",
-  footerStart: "footer-start",
-  footerEnd: "footer-end"
-};
-const ICONS = {
-  selected: "check-square-f",
-  unselected: "square",
-  selectedSingle: "circle-f",
-  unselectedSingle: "circle"
-};
-const styles = css`: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{display:block;max-inline-size:100%}:host([scale=s]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-sm);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-xs);--calcite-internal-card-header-text-container-padding-right: 0;--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-xs);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-xs);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-xs);--calcite-internal-card-slotted-content-padding: var(--calcite-space-sm);--calcite-internal-card-footer-padding-inline: var(--calcite-space-sm);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-base)}:host([scale=m]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-md);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-sm);--calcite-internal-card-header-text-container-padding-right: var(--calcite-space-base);--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-base);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-sm);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-sm);--calcite-internal-card-slotted-content-padding: var(--calcite-space-md);--calcite-internal-card-footer-padding-inline: var(--calcite-space-md);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-2xs)}:host([scale=l]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-lg);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-md);--calcite-internal-card-header-text-container-padding-right: var(--calcite-space-xs);--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-md);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-base);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-md);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-md);--calcite-internal-card-slotted-content-padding: var(--calcite-space-lg);--calcite-internal-card-footer-padding-inline: var(--calcite-space-lg);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-sm)}.content-wrapper{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border:var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));background-color:var(--calcite-card-background-color, var(--calcite-color-foreground-1));box-shadow:var(--calcite-card-shadow, var(--calcite-shadow-none));pointer-events:none}::slotted(*){pointer-events:auto}:host(:not([selectable])) .content-wrapper:not(.non-interactive){outline-color:transparent}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0;display:flex;align-items:center}.header{display:flex;flex-direction:row;align-items:flex-start}.header-text-container{display:flex;flex-direction:column;inline-size:100%;justify-content:center;padding-inline:var(--calcite-internal-card-header-text-container-padding-inline);padding-block:var(--calcite-internal-card-header-text-container-padding-block)}.header-text-container:not(:only-child){padding-inline-end:var(--calcite-internal-card-header-text-container-padding-right)}.footer{display:flex;margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:var(--calcite-internal-card-footer-padding-inline);padding-block-start:var(--calcite-space-2xs);padding-block-end:var(--calcite-space-md)}.card-content{block-size:auto;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}.has-slotted-content{padding:var(--calcite-internal-card-slotted-content-padding)}:host([selected]) .content-wrapper{border:1px solid var(--calcite-card-accent-color-selected, var(--calcite-color-brand))}:host([selectable]) .header{padding-inline-end:var(--calcite-spacing-xxxl)}slot[name=heading]::slotted(*),*::slotted([slot=heading]){color:var(--calcite-color-text-1);margin:0;font-weight:var(--calcite-font-weight-medium);line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-internal-card-heading-font-size)}slot[name=description]::slotted(*),*::slotted([slot=description]){color:var(--calcite-color-text-2);margin:0;font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-internal-card-description-font-size)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-start]::slotted(*),*::slotted([slot=footer-start]){align-self:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);margin-inline-end:auto}slot[name=footer-end]::slotted(*),*::slotted([slot=footer-end]){align-self:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}.checkbox-wrapper-deprecated{pointer-events:auto;position:absolute;inset-block-start:var(--calcite-spacing-sm);inset-inline-end:var(--calcite-spacing-sm);margin:0;padding:0;color:var(--calcite-card-selection-color, var(--calcite-color-text-3))}.checkbox-wrapper-deprecated:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper-deprecated:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper{outline-color:transparent;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-items:center;color:var(--calcite-card-selection-color, var(--calcite-color-text-3));padding:var(--calcite-internal-card-checkbox-wrapper-padding);margin:var(--calcite-internal-card-checkbox-wrapper-margin)}.checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper calcite-icon{pointer-events:none}:host([selected]) .checkbox-wrapper-deprecated,:host([selected]) .checkbox-wrapper{color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}.thumbnail-wrapper{display:flex}.content-wrapper.inline{flex-direction:row}.content-wrapper.inline>.container{inline-size:60%}.content-wrapper.inline>.thumbnail-wrapper{inline-size:40%;align-items:flex-start}.content-wrapper.inline slot[name=thumbnail]::slotted(img),.content-wrapper.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-start]::slotted(*),slot[name=footer-end]::slotted(*){display:flex;gap:var(--calcite-internal-card-footer-start-end-gap)}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+import { C as CSS, S as SLOTS, I as ICONS } from "../../chunks/resources8.js";
+import { t as toAriaBoolean } from "../../chunks/aria.js";
+const styles = css`: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{display:block;max-inline-size:100%}:host([scale=s]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-sm);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-xs);--calcite-internal-card-header-text-container-padding-right: 0;--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-xs);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-xs);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-xs);--calcite-internal-card-slotted-content-padding: var(--calcite-space-sm);--calcite-internal-card-footer-padding-inline: var(--calcite-space-sm);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-base)}:host([scale=m]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-md);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-sm);--calcite-internal-card-header-text-container-padding-right: var(--calcite-space-base);--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-base);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-sm);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-sm);--calcite-internal-card-slotted-content-padding: var(--calcite-space-md);--calcite-internal-card-footer-padding-inline: var(--calcite-space-md);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-2xs)}:host([scale=l]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-lg);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-md);--calcite-internal-card-header-text-container-padding-right: var(--calcite-space-xs);--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-md);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-base);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-md);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-md);--calcite-internal-card-slotted-content-padding: var(--calcite-space-lg);--calcite-internal-card-footer-padding-inline: var(--calcite-space-lg);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-sm)}.content-wrapper{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border:var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-card-corner-radius, var(--calcite-theme-corner-radius-none, var(--calcite-corner-radius-sharp)));background-color:var(--calcite-card-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)));box-shadow:var(--calcite-card-shadow, var(--calcite-shadow-none));pointer-events:none}::slotted(*){pointer-events:auto}:host(:not([selectable])) .content-wrapper:not(.non-interactive){outline-color:transparent}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0;display:flex;align-items:center}.header{display:flex;flex-direction:row;align-items:flex-start}.header-text-container{display:flex;flex-direction:column;inline-size:100%;justify-content:center;padding-inline:var(--calcite-internal-card-header-text-container-padding-inline);padding-block:var(--calcite-internal-card-header-text-container-padding-block)}.header-text-container:not(:only-child){padding-inline-end:var(--calcite-internal-card-header-text-container-padding-right)}.footer{display:flex;margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:var(--calcite-internal-card-footer-padding-inline);padding-block-start:var(--calcite-space-2xs);padding-block-end:var(--calcite-space-md)}.card-content{block-size:auto;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}.has-slotted-content{padding:var(--calcite-internal-card-slotted-content-padding)}:host([selected]) .content-wrapper{border:1px solid var(--calcite-card-accent-color-selected, var(--calcite-color-brand))}:host([selectable]) .header{padding-inline-end:var(--calcite-theme-space-3xl, var(--calcite-spacing-xxxl))}slot[name=heading]::slotted(*),*::slotted([slot=heading]){color:var(--calcite-color-text-1);margin:0;font-weight:var(--calcite-font-weight-medium);line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-internal-card-heading-font-size)}slot[name=description]::slotted(*),*::slotted([slot=description]){color:var(--calcite-color-text-2);margin:0;font-weight:var(--calcite-theme-font-weight-regular, var(--calcite-font-weight-normal));line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-internal-card-description-font-size)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-start]::slotted(*),*::slotted([slot=footer-start]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);align-self:center;margin-inline-end:auto}slot[name=footer-end]::slotted(*),*::slotted([slot=footer-end]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);align-self:center}.checkbox-wrapper-deprecated{position:absolute;pointer-events:auto;inset-block-start:var(--calcite-theme-space-sm, var(--calcite-spacing-sm));inset-inline-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm));margin:0;padding:0;color:var(--calcite-card-selection-color, var(--calcite-color-text-3))}.checkbox-wrapper-deprecated:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper-deprecated:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper{outline-color:transparent;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-items:center;color:var(--calcite-card-selection-color, var(--calcite-color-text-3));padding:var(--calcite-internal-card-checkbox-wrapper-padding);margin:var(--calcite-internal-card-checkbox-wrapper-margin)}.checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper calcite-icon{pointer-events:none}:host([selected]) .checkbox-wrapper-deprecated,:host([selected]) .checkbox-wrapper{color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}.thumbnail-wrapper{display:flex}.content-wrapper.inline{flex-direction:row}.content-wrapper.inline>.container{inline-size:60%}.content-wrapper.inline>.thumbnail-wrapper{align-items:flex-start;inline-size:40%}.content-wrapper.inline slot[name=thumbnail]::slotted(img),.content-wrapper.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-start]::slotted(*),slot[name=footer-end]::slotted(*){display:flex;gap:var(--calcite-internal-card-footer-start-end-gap)}: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 Card extends LitElement {
   constructor() {
     super(...arguments);
     this.containerRef = createRef();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.hasContent = false;
     this.hasDescription = false;
@@ -56,7 +33,6 @@ class Card extends LitElement {
     this.selectionMode = "none";
     this.thumbnailPosition = "block-start";
     this.calciteCardSelect = createEvent({ cancelable: false });
-    this.calciteInternalCardKeyEvent = createEvent({ cancelable: false });
   }
   static {
     this.properties = { hasContent: [16, {}, { state: true }], hasDescription: [16, {}, { state: true }], hasFooterEnd: [16, {}, { state: true }], hasFooterStart: [16, {}, { state: true }], hasHeading: [16, {}, { state: true }], hasThumbnail: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], scale: [3, {}, { reflect: true }], selectable: [7, {}, { reflect: true, type: Boolean }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, thumbnailPosition: [3, {}, { reflect: true }] };
@@ -90,16 +66,6 @@ class Card extends LitElement {
       if (isActivationKey(event.key) && this.selectionMode !== "none") {
         this.calciteCardSelect.emit();
         event.preventDefault();
-      } else {
-        switch (event.key) {
-          case "ArrowRight":
-          case "ArrowLeft":
-          case "Home":
-          case "End":
-            this.calciteInternalCardKeyEvent.emit(event);
-            event.preventDefault();
-            break;
-        }
       }
     }
   }
@@ -142,7 +108,7 @@ class Card extends LitElement {
     const thumbnailInline = this.thumbnailPosition.startsWith("inline");
     const thumbnailStart = this.thumbnailPosition.endsWith("start");
     const role = this.selectionMode === "multiple" ? "checkbox" : this.selectionMode !== "none" ? "radio" : void 0;
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.selectionMode !== "none" ? this.selected : void 0} .ariaLabel=${this.label} class=${safeClassMap({ [CSS.contentWrapper]: true, inline: thumbnailInline })} @click=${this.cardBodyClickHandler} @keydown=${this.keyDownHandler} .role=${role} .tabIndex=${!this.selectable || this.disabled ? 0 : -1} ${ref(this.containerRef)}>${this.loading ? html`<div aria-live=polite class="calcite-card-loader-container"><calcite-loader .label=${this.messages.loading}></calcite-loader></div>` : null}${thumbnailStart && this.renderThumbnail() || ""}<section .ariaBusy=${this.loading} class=${safeClassMap({ [CSS.container]: true })}>${this.renderHeader()}<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.selectionMode !== "none" ? this.selected : void 0} .ariaLabel=${this.label} class=${safeClassMap({ [CSS.contentWrapper]: true, inline: thumbnailInline })} @click=${this.cardBodyClickHandler} @keydown=${this.keyDownHandler} .role=${role} .tabIndex=${!this.selectable || this.disabled ? 0 : -1} ${ref(this.containerRef)}>${this.loading ? html`<div aria-live=polite class="calcite-card-loader-container"><calcite-loader .label=${this.messages.loading}></calcite-loader></div>` : null}${thumbnailStart && this.renderThumbnail() || ""}<section .ariaBusy=${toAriaBoolean(this.loading, void 0)} class=${safeClassMap({ [CSS.container]: true })}>${this.renderHeader()}<div class=${safeClassMap({
       [CSS.cardContent]: true,
       [CSS.hasSlottedContent]: this.hasContent
     })}><slot @slotchange=${this.handleDefaultSlotChange}></slot></div>${this.renderFooter()}</section>${!thumbnailStart && this.renderThumbnail() || ""}</div>` });

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

@@ -1,13 +1,22 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale, SelectionMode } from "../interfaces.js";
+import type { Scale, SelectionMode } from "../types.js";
 import type { Card } from "../calcite-card/customElement.js";
 
-/**
- * @cssproperty [--calcite-card-group-gap] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-card-group-space` instead. Specifies the gap between slotted elements.
- * @cssproperty [--calcite-card-group-space] - Specifies the space between slotted elements.
- * @slot  - A slot for adding one or more `calcite-card`s.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /**
+   * Specifies the gap between slotted elements.
+   *
+   * @deprecated in v2.13.0, removal target v6.0.0 - Use `--calcite-card-group-space` instead.
+   */
+  "--calcite-card-group-gap": "*";
+  /** Specifies the space between slotted elements. */
+  "--calcite-card-group-space": "*";
+}
+}
+
+/** @slot  - A slot for adding one or more `calcite-card`s. */
 export abstract class CardGroup extends LitElement {
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.

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

@@ -3,10 +3,11 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { f as focusElementInGroup } from "../../chunks/dom.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { e as focusElementInGroup } from "../../chunks/dom.js";
+import { i as isCard } from "../../chunks/resources8.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-const styles = css`: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{display:block}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-spacing-md)))}: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([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-theme-space-md, var(--calcite-spacing-md))))}: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 CSS = {
   container: "container"
 };
@@ -15,14 +16,14 @@ class CardGroup extends LitElement {
     super();
     this.items = [];
     this.slotRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.scale = "m";
     this.selectedItems = [];
     this.selectionMode = "none";
     this.calciteCardGroupSelect = createEvent({ cancelable: false });
-    this.listen("calciteInternalCardKeyEvent", this.calciteInternalCardKeyEventListener);
+    this.listen("keydown", this.keyDownHandler);
     this.listen("calciteCardSelect", this.calciteCardSelectListener);
   }
   static {
@@ -45,23 +46,32 @@ class CardGroup extends LitElement {
   loaded() {
     this.updateSelectedItems();
   }
-  calciteInternalCardKeyEventListener(event) {
-    if (event.composedPath().includes(this.el)) {
-      const interactiveItems = this.items.filter((el) => !el.disabled);
-      switch (event.detail["key"]) {
-        case "ArrowRight":
-          focusElementInGroup(interactiveItems, event.target, "next", true, false);
-          break;
-        case "ArrowLeft":
-          focusElementInGroup(interactiveItems, event.target, "previous", true, false);
-          break;
-        case "Home":
-          focusElementInGroup(interactiveItems, event.target, "first", true, false);
-          break;
-        case "End":
-          focusElementInGroup(interactiveItems, event.target, "last", true, false);
-          break;
-      }
+  keyDownHandler(event) {
+    if (event.defaultPrevented || this.disabled || !event.composedPath().includes(this.el)) {
+      return;
+    }
+    const card = this.items.find((item) => item === event.target);
+    if (!card || card.disabled || card.selectable) {
+      return;
+    }
+    const interactiveItems = this.items.filter((el) => !el.disabled);
+    switch (event.key) {
+      case "ArrowRight":
+        focusElementInGroup(interactiveItems, card, "next", true, false);
+        event.preventDefault();
+        break;
+      case "ArrowLeft":
+        focusElementInGroup(interactiveItems, card, "previous", true, false);
+        event.preventDefault();
+        break;
+      case "Home":
+        focusElementInGroup(interactiveItems, card, "first", true, false);
+        event.preventDefault();
+        break;
+      case "End":
+        focusElementInGroup(interactiveItems, card, "last", true, false);
+        event.preventDefault();
+        break;
     }
   }
   calciteCardSelectListener(event) {
@@ -79,7 +89,7 @@ class CardGroup extends LitElement {
     this.updateItemsScale();
   }
   updateSlottedItems(target) {
-    this.items = target?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-card")) || [];
+    this.items = target?.assignedElements({ flatten: true }).filter(isCard) || [];
   }
   updateItemsScale() {
     this.items.forEach((el) => {

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

@@ -1,22 +1,36 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { CarouselItem } from "../calcite-carousel-item/customElement.js";
-import type { ArrowType, AutoplayType, PaginationPosition } from "./interfaces.js";
+import type { ArrowType, AutoplayType, PaginationPosition } from "./types.js";
 
-/**
- * @cssproperty [--calcite-carousel-pagination-background-color] - Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls.
- * @cssproperty [--calcite-carousel-pagination-background-color-hover] - Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls when hovered.
- * @cssproperty [--calcite-carousel-pagination-background-color-press] - Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls when pressed.
- * @cssproperty [--calcite-carousel-pagination-background-color-selected] - Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls when selected.
- * @cssproperty [--calcite-carousel-pagination-icon-color] - Specifies the icon color of the component's pagination items and autoplay controls.
- * @cssproperty [--calcite-carousel-pagination-icon-color-hover] - Specifies the icon color of the component's pagination items when hovered or pressed.
- * @cssproperty [--calcite-carousel-pagination-icon-color-selected] - Specifies the icon color of the component's pagination items when selected.
- * @cssproperty [--calcite-carousel-control-icon-color] - Specifies the icon color of the component's navigation arrow controls.
- * @cssproperty [--calcite-carousel-control-icon-color-hover] - Specifies the icon color of the component's navigation arrow controls when hovered or pressed.
- * @cssproperty [--calcite-carousel-autoplay-progress-background-color] - Specifies the background color of the component's autoplay progress when `autoplay` is specified.
- * @cssproperty [--calcite-carousel-autoplay-progress-fill-color] - Specifies the fill color of the component's autoplay progress when `autoplay` is specified.
- * @slot  - A slot for adding `calcite-carousel-item`s.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls. */
+  "--calcite-carousel-pagination-background-color": "*";
+  /** Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls when hovered. */
+  "--calcite-carousel-pagination-background-color-hover": "*";
+  /** Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls when pressed. */
+  "--calcite-carousel-pagination-background-color-press": "*";
+  /** Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls when selected. */
+  "--calcite-carousel-pagination-background-color-selected": "*";
+  /** Specifies the icon color of the component's pagination items and autoplay controls. */
+  "--calcite-carousel-pagination-icon-color": "*";
+  /** Specifies the icon color of the component's pagination items when hovered or pressed. */
+  "--calcite-carousel-pagination-icon-color-hover": "*";
+  /** Specifies the icon color of the component's pagination items when selected. */
+  "--calcite-carousel-pagination-icon-color-selected": "*";
+  /** Specifies the icon color of the component's navigation arrow controls. */
+  "--calcite-carousel-control-icon-color": "*";
+  /** Specifies the icon color of the component's navigation arrow controls when hovered or pressed. */
+  "--calcite-carousel-control-icon-color-hover": "*";
+  /** Specifies the background color of the component's autoplay progress when `autoplay` is specified. */
+  "--calcite-carousel-autoplay-progress-background-color": "*";
+  /** Specifies the fill color of the component's autoplay progress when `autoplay` is specified. */
+  "--calcite-carousel-autoplay-progress-fill-color": "*";
+}
+}
+
+/** @slot  - A slot for adding `calcite-carousel-item`s. */
 export abstract class Carousel extends LitElement {
   /**
    * Specifies how and if the "previous" and "next" arrows are displayed.
@@ -54,15 +68,19 @@ export abstract class Carousel extends LitElement {
    * @required
    */
   accessor label: string;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      previous?: string;
-      next?: string;
-      play?: string;
-      pause?: string;
-      carousel?: string;
-      carouselItemProgress?: string;
-      paginationStatus?: string;
+      previous?: string | undefined;
+      next?: string | undefined;
+      play?: string | undefined;
+      pause?: string | undefined;
+      carousel?: string | undefined;
+      carouselItemProgress?: string | undefined;
+      paginationStatus?: string | undefined;
   };
   /**
    * When `true`, the component's pagination controls are hidden.

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

@@ -1,19 +1,20 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { repeat } from "lit/directives/repeat.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { w as whenAnimationDone, a as slotChangeGetAssignedElements, f as focusElementInGroup } from "../../chunks/dom.js";
+import { x as whenAnimationDone, b as slotChangeGetAssignedElements, e as focusElementInGroup } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { b as breakpoints } from "../../chunks/responsive.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { g as getRoundRobinIndex } from "../../chunks/array.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { s as styles$1 } from "../../chunks/screen-reader.js";
 const DURATION = 6e3;
 const CSS = {
   container: "container",
@@ -22,8 +23,8 @@ const CSS = {
   itemContainer: "item-container",
   itemContainerForward: "item-container--forward",
   itemContainerBackward: "item-container--backward",
+  controlsArea: "controls-area",
   pagination: "pagination",
-  paginationAriaLive: "pagination-aria-live",
   paginationItems: "pagination-items",
   paginationItem: "pagination-item",
   paginationItemIndividual: "pagination-item--individual",
@@ -54,7 +55,7 @@ const idPrefix = "calcite-carousel-container";
 const IDS = {
   host: (id) => `${idPrefix}-${id}`
 };
-const styles = css`: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{display:flex;inline-size:100%;--calcite-internal-carousel-pagination-space: 1.5rem;--calcite-internal-carousel-pagination-space-wide: 3.5rem;--calcite-internal-carousel-pagination-background-color: var( --calcite-carousel-pagination-background-color, transparent );--calcite-internal-carousel-pagination-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, transparent );--calcite-internal-carousel-pagination-background-color-press: var( --calcite-carousel-pagination-background-color-press, transparent );--calcite-internal-carousel-pagination-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, transparent );--calcite-internal-carousel-pagination-overlay-background-color: var( --calcite-carousel-pagination-background-color, var(--calcite-color-foreground-1) );--calcite-internal-carousel-pagination-overlay-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, var(--calcite-color-foreground-2) );--calcite-internal-carousel-pagination-overlay-background-color-active: var( --calcite-carousel-pagination-background-color-press, var(--calcite-color-foreground-2) );--calcite-internal-carousel-pagination-overlay-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, var(--calcite-color-foreground-1) );--calcite-internal-carousel-pagination-icon-color-hover: var( --calcite-carousel-pagination-icon-color-hover, var(--calcite-color-text-1) );--calcite-internal-carousel-pagination-icon-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-border-1) );--calcite-internal-carousel-pagination-icon-color-selected: var( --calcite-carousel-pagination-icon-color-selected, var(--calcite-color-brand) );--calcite-internal-carousel-control-icon-color-hover: var( --calcite-carousel-control-icon-color-hover, var(--calcite-internal-carousel-pagination-icon-color-hover) );--calcite-internal-carousel-control-icon-color: var( --calcite-carousel-control-icon-color, var(--calcite-carousel-pagination-icon-color, var(--calcite-color-text-3)) );--calcite-internal-carousel-autoplay-progress-background-color: var( --calcite-carousel-autoplay-progress-background-color, var(--calcite-color-border-3) );--calcite-internal-carousel-autoplay-progress-fill-color: var( --calcite-carousel-autoplay-progress-fill-color, var(--calcite-color-brand) );--calcite-internal-carousel-autoplay-control-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-text-3) )}.container{position:relative;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);color:var(--calcite-color-text-2);outline-color:transparent}.container: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))))}.container--edged:not(.container--overlaid){padding-inline:var(--calcite-internal-carousel-pagination-space-wide);inline-size:calc(100% - var(--calcite-internal-carousel-pagination-space-wide) * 2)}.item-container{display:flex;flex:1 1 auto;align-items:flex-start;justify-content:center;overflow:auto;padding:.25rem;animation-name:none;animation-duration:var(--calcite-animation-timing)}.container--overlaid .item-container{padding:0}.item-container--forward{animation-name:item-forward}.item-container--backward{animation-name:item-backward}calcite-carousel-item:not([selected]){opacity:0}.pagination-aria-live{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}.pagination{margin:.75rem;display:flex;flex-direction:row;align-items:center;justify-content:center;inline-size:auto}.pagination-items{display:flex;flex-direction:row;align-items:center}.container--overlaid .pagination{position:absolute}.pagination-item.page-next,.pagination-item.page-previous{color:var(--calcite-internal-carousel-control-icon-color);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color)}.pagination-item.page-next:hover,.pagination-item.page-previous:hover{color:var(--calcite-internal-carousel-control-icon-color-hover);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color-hover)}.container--edged .page-next,.container--edged .page-previous{block-size:3rem;inline-size:3rem;position:absolute;inset-block-start:50%;transform:translateY(-50%)}.container--edged .page-next{inset-inline-end:0}.container--edged .page-previous{inset-inline-start:0}.container--overlaid .pagination{inset-block-start:unset;inset-block-end:0;inset-inline:0}:host([pagination-position=top]) .container--overlaid .pagination{inset-block-start:0;inset-block-end:unset}.pagination-item.autoplay-control{position:relative;color:var(--calcite-internal-carousel-autoplay-control-color);--calcite-progress-fill-color: var(--calcite-internal-carousel-autoplay-progress-fill-color);--calcite-progress-background-color: var(--calcite-internal-carousel-autoplay-progress-background-color)}.autoplay-control:focus .autoplay-progress{inset-block-end:4px;inset-inline:2px;inline-size:calc(100% - 4px)}.autoplay-progress{position:absolute;inset-block-end:2px;inset-inline:0;inline-size:100%}.pagination-item{margin:0;block-size:2rem;inline-size:2rem;cursor:pointer;align-items:center;border-style:none;background-color:transparent;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;background-color:var(--calcite-internal-carousel-pagination-background-color);color:var(--calcite-internal-carousel-pagination-icon-color)}.pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-background-color-hover);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-background-color-press);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))))}.pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-background-color-press);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item calcite-icon{color:inherit;pointer-events:none}.pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}.pagination-item--individual{pointer-events:none;inline-size:0px;padding:0;opacity:0;visibility:hidden;transition:var(--calcite-animation-timing) ease-in-out inline-size,var(--calcite-animation-timing) ease-in-out padding,var(--calcite-animation-timing) ease-in-out opacity}.pagination-item--individual.pagination-item--visible{pointer-events:auto;inline-size:2rem;opacity:1;visibility:visible}.pagination-item--range-edge calcite-icon{scale:.75;transition:var(--calcite-animation-timing) ease-in-out scale}.container--overlaid .pagination-item{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color)}.container--overlaid .pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-hover)}.container--overlaid .pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}@keyframes item-forward{0%{transform:translate3d(100px,0,0)}to{transform:translateZ(0)}}@keyframes item-backward{0%{transform:translate3d(-100px,0,0)}to{transform:translateZ(0)}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`: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{display:flex;inline-size:100%;--calcite-internal-carousel-pagination-space: 1.5rem;--calcite-internal-carousel-pagination-space-wide: 3.5rem;--calcite-internal-carousel-pagination-background-color: var( --calcite-carousel-pagination-background-color, transparent );--calcite-internal-carousel-pagination-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, transparent );--calcite-internal-carousel-pagination-background-color-press: var( --calcite-carousel-pagination-background-color-press, transparent );--calcite-internal-carousel-pagination-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, transparent );--calcite-internal-carousel-pagination-overlay-background-color: var( --calcite-carousel-pagination-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)) );--calcite-internal-carousel-pagination-overlay-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)) );--calcite-internal-carousel-pagination-overlay-background-color-active: var( --calcite-carousel-pagination-background-color-press, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)) );--calcite-internal-carousel-pagination-overlay-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)) );--calcite-internal-carousel-pagination-icon-color-hover: var( --calcite-carousel-pagination-icon-color-hover, var(--calcite-color-text-1) );--calcite-internal-carousel-pagination-icon-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-border-1) );--calcite-internal-carousel-pagination-icon-color-selected: var( --calcite-carousel-pagination-icon-color-selected, var(--calcite-color-brand) );--calcite-internal-carousel-control-icon-color-hover: var( --calcite-carousel-control-icon-color-hover, var(--calcite-internal-carousel-pagination-icon-color-hover) );--calcite-internal-carousel-control-icon-color: var( --calcite-carousel-control-icon-color, var(--calcite-carousel-pagination-icon-color, var(--calcite-color-text-3)) );--calcite-internal-carousel-autoplay-progress-background-color: var( --calcite-carousel-autoplay-progress-background-color, var(--calcite-color-border-3) );--calcite-internal-carousel-autoplay-progress-fill-color: var( --calcite-carousel-autoplay-progress-fill-color, var(--calcite-color-brand) );--calcite-internal-carousel-autoplay-control-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-text-3) )}.container{outline-color:transparent;position:relative;display:flex;flex-direction:column;overflow:hidden;color:var(--calcite-color-text-2);inline-size:100%;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}.container:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}.container--edged:not(.container--overlaid){padding-inline:var(--calcite-internal-carousel-pagination-space-wide);inline-size:calc(100% - var(--calcite-internal-carousel-pagination-space-wide) * 2)}.item-container{display:flex;align-items:flex-start;justify-content:center;overflow:auto;flex:1 1 auto;padding:var(--calcite-space-2xs);animation-name:none;animation-duration:var(--calcite-animation-timing)}.container--overlaid .item-container{padding:0}.item-container--forward{animation-name:item-forward}.item-container--backward{animation-name:item-backward}calcite-carousel-item:not([selected]){opacity:0}.controls-area{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:var(--calcite-space-md);inline-size:auto}.pagination{display:flex;flex-direction:row;align-items:center;justify-content:center}.pagination-items{display:flex;flex-direction:row;align-items:center}.container--overlaid .controls-area{position:absolute}.pagination-item.page-next,.pagination-item.page-previous{color:var(--calcite-internal-carousel-control-icon-color);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color)}.pagination-item.page-next:hover,.pagination-item.page-previous:hover{color:var(--calcite-internal-carousel-control-icon-color-hover);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color-hover)}.container--edged .page-next,.container--edged .page-previous{block-size:var(--calcite-size-xl);inline-size:var(--calcite-size-xl);position:absolute;inset-block-start:50%;transform:translateY(-50%)}.container--edged .page-next{inset-inline-end:0}.container--edged .page-previous{inset-inline-start:0}.container--overlaid .controls-area{inset-block-start:unset;inset-block-end:0;inset-inline:0}:host([pagination-position=top]) .container--overlaid .controls-area{inset-block-start:0;inset-block-end:unset}.pagination-item.autoplay-control{position:relative;color:var(--calcite-internal-carousel-autoplay-control-color);--calcite-progress-fill-color: var(--calcite-internal-carousel-autoplay-progress-fill-color);--calcite-progress-background-color: var(--calcite-internal-carousel-autoplay-progress-background-color)}.autoplay-control:focus .autoplay-progress{inset-block-end:4px;inset-inline:2px;inline-size:calc(100% - 4px)}.autoplay-progress{position:absolute;inset-block-end:2px;inset-inline:0;inline-size:100%}.pagination-item{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;outline-color:transparent;margin:0;block-size:var(--calcite-space-3xl);inline-size:var(--calcite-space-3xl);cursor:pointer;align-items:center;border-style:none;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;background-color:var(--calcite-internal-carousel-pagination-background-color);color:var(--calcite-internal-carousel-pagination-icon-color)}.pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-background-color-hover);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-background-color-press);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}.pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-background-color-press);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item calcite-icon{color:inherit;pointer-events:none}.pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}.pagination-item--individual{inline-size:0;padding:0;opacity:0;pointer-events:none;visibility:hidden;transition:var(--calcite-animation-timing) ease-in-out inline-size,var(--calcite-animation-timing) ease-in-out padding,var(--calcite-animation-timing) ease-in-out opacity}.pagination-item--individual.pagination-item--visible{inline-size:var(--calcite-space-3xl);opacity:1;pointer-events:auto;visibility:visible}.pagination-item--range-edge calcite-icon{scale:.75;transition:var(--calcite-animation-timing) ease-in-out scale}.container--overlaid .pagination-item{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color)}.container--overlaid .pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-hover)}.container--overlaid .pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}@keyframes item-forward{0%{transform:translate3d(100px,0,0)}to{transform:translateZ(0)}}@keyframes item-backward{0%{transform:translate3d(-100px,0,0)}to{transform:translateZ(0)}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class Carousel extends LitElement {
   constructor() {
     super(...arguments);
@@ -87,8 +88,8 @@ class Carousel extends LitElement {
         this.slideDurationRemaining = time;
       }
     };
-    this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.messages = useT9n({ blocking: true });
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.itemDirection = "standby";
     this.hasMultiple = false;
@@ -118,7 +119,7 @@ class Carousel extends LitElement {
     this.properties = { itemDirection: [16, {}, { state: true }], hasMultiple: [16, {}, { state: true }], items: [16, {}, { state: true }], maxItems: [16, {}, { state: true }], playing: [16, {}, { state: true }], selectedIndex: [16, {}, { state: true }], slideDurationRemaining: [16, {}, { state: true }], suspendedDueToFocus: [16, {}, { state: true }], suspendedDueToHover: [16, {}, { state: true }], suspendedSlideDurationRemaining: [16, {}, { state: true }], userPreventsSuspend: [16, {}, { state: true }], arrowType: [3, {}, { reflect: true }], autoplay: [3, {}, { reflect: true }], autoplayDuration: [11, {}, { type: Number, reflect: true }], controlOverlay: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, messageOverrides: [0, {}, { attribute: false }], paginationDisabled: [5, {}, { type: Boolean }], paginationPosition: [3, {}, { reflect: true }], paused: [5, {}, { type: Boolean }], selectedItem: [0, {}, { attribute: false }] };
   }
   static {
-    this.styles = styles;
+    this.styles = [styles, styles$1];
   }
   async play() {
     if (this.playing || !this.hasMultiple || this.autoplay !== "" && this.autoplay !== true && this.autoplay !== "paused") {
@@ -246,9 +247,6 @@ class Carousel extends LitElement {
   }
   handleSlotChange(event) {
     const items = slotChangeGetAssignedElements(event);
-    if (items.length < 1) {
-      return;
-    }
     const activeItemIndex = items.findIndex((item) => item.selected);
     const requestedSelectedIndex = activeItemIndex > -1 ? activeItemIndex : 0;
     this.items = items;
@@ -287,7 +285,7 @@ class Carousel extends LitElement {
   }
   handleItemSelection(event) {
     const item = event.currentTarget;
-    const requestedPosition = parseInt(item.dataset.index);
+    const requestedPosition = parseInt(item.dataset.index, 10);
     if (requestedPosition === this.selectedIndex) {
       return;
     }
@@ -420,15 +418,19 @@ class Carousel extends LitElement {
       [CSS.autoplayControl]: true
     })} @click=${this.toggleRotation} title=${text ?? nothing}><calcite-icon .icon=${this.playing ? ICONS.pause : ICONS.play} scale=s></calcite-icon>${this.playing && html`<calcite-progress class=${safeClassMap(CSS.autoplayProgress)} .label=${this.messages.carouselItemProgress} .value=${formattedValue}></calcite-progress>` || ""}</button>`;
   }
-  renderPaginationArea() {
+  renderControlsArea() {
+    const showRotationControl = (this.playing || this.autoplay === "" || this.autoplay === true || this.autoplay === "paused") && this.hasMultiple;
+    const showInlineArrows = this.arrowType === "inline" && this.hasMultiple;
+    if (this.paginationDisabled && !showRotationControl && !showInlineArrows) {
+      return;
+    }
     return html`<div class=${safeClassMap({
-      [CSS.pagination]: true,
-      [CSS.containerOverlaid]: this.controlOverlay
-    })} @keydown=${this.tabListKeyDownHandler} ${ref(this.tabListRef)}>${(this.playing || this.autoplay === "" || this.autoplay === true || this.autoplay === "paused") && this.hasMultiple && this.renderRotationControl() || ""}${this.arrowType === "inline" && this.hasMultiple && this.renderArrow("previous") || ""}${this.paginationDisabled ? this.renderPaginationAriaLive() : this.renderPaginationItems()}${this.arrowType === "inline" && this.hasMultiple && this.renderArrow("next") || ""}</div>`;
+      [CSS.controlsArea]: true
+    })}>${showRotationControl && this.renderRotationControl() || ""}${showInlineArrows && this.renderArrow("previous") || ""}${!this.paginationDisabled && html`<div class=${safeClassMap(CSS.pagination)}>${this.renderPaginationItems()}</div>` || ""}${showInlineArrows && this.renderArrow("next") || ""}</div>`;
   }
   renderPaginationItems() {
     const { selectedIndex, maxItems, items, label, handleItemSelection } = this;
-    return html`<div .ariaLabel=${label} class=${safeClassMap(CSS.paginationItems)} role=tablist>${repeat(items, (item) => item.id, (item, index) => {
+    return html`<div .ariaLabel=${label} class=${safeClassMap(CSS.paginationItems)} @keydown=${this.tabListKeyDownHandler} role=tablist ${ref(this.tabListRef)}>${repeat(items, (item) => item.id, (item, index) => {
       const itemCount = items.length;
       const match = index === selectedIndex;
       const first = index === 0;
@@ -462,7 +464,7 @@ class Carousel extends LitElement {
     numberStringFormatter.numberFormatOptions = {
       locale: effectiveLocale
     };
-    return html`<div aria-live=off class=${safeClassMap(CSS.paginationAriaLive)} role=status>${messages.paginationStatus.replace("{current}", numberStringFormatter.localize(`${selectedIndex + 1}`)).replace("{total}", numberStringFormatter.localize(`${items.length}`))}</div>`;
+    return html`<div aria-live=off class=${safeClassMap(CSS_UTILITY.screenReaderText)} role=status>${messages.paginationStatus.replace("{current}", numberStringFormatter.localize(`${selectedIndex + 1}`)).replace("{total}", numberStringFormatter.localize(`${items.length}`))}</div>`;
   }
   renderArrow(itemDirection) {
     const isPrev = itemDirection === "previous";
@@ -474,18 +476,26 @@ class Carousel extends LitElement {
     return html`<button aria-controls=${this.containerId ?? nothing} class=${safeClassMap({ [CSS.paginationItem]: true, [css2]: true })} data-item-direction=${itemDirection ?? nothing} @click=${this.handleArrowClick} title=${title ?? nothing}><calcite-icon .flipRtl=${dir === "rtl"} .icon=${icon} .scale=${scale}></calcite-icon></button>`;
   }
   render() {
-    const { itemDirection, paginationPosition } = this;
-    const paginationArea = this.renderPaginationArea();
+    const { arrowType, hasMultiple, itemDirection, items, paginationDisabled, paginationPosition } = this;
+    const controlsArea = items.length > 0 ? this.renderControlsArea() : void 0;
+    const paginationStatus = paginationDisabled && items.length > 0 ? this.renderPaginationAriaLive() : void 0;
     const itemContainer = html`<section class=${safeClassMap({
       [CSS.itemContainer]: true,
       [CSS.itemContainerForward]: itemDirection === "forward",
       [CSS.itemContainerBackward]: itemDirection === "backward"
     })} id=${this.containerId ?? nothing} ${ref(this.itemContainerRef)}><slot @slotchange=${this.handleSlotChange}></slot></section>`;
+    const content = [itemContainer, controlsArea, paginationStatus];
+    if (paginationPosition === "top") {
+      content.reverse();
+    }
+    if (arrowType === "edge" && hasMultiple) {
+      content.push(this.renderArrow("previous"), this.renderArrow("next"));
+    }
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaLabel=${this.label} .ariaLive=${this.playing ? "off" : "polite"} .ariaRoleDescription=${this.messages.carousel} class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerOverlaid]: this.controlOverlay,
-      [CSS.containerEdged]: this.arrowType === "edge"
-    })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut} @keydown=${this.containerKeyDownHandler} @mouseenter=${this.handleMouseIn} @mouseleave=${this.handleMouseOut} role=group tabindex=0 ${ref(this.containerRef)}>${paginationPosition === "top" ? paginationArea : itemContainer}${paginationPosition === "top" ? itemContainer : paginationArea}${this.arrowType === "edge" && this.hasMultiple && this.renderArrow("previous") || ""}${this.arrowType === "edge" && this.hasMultiple && this.renderArrow("next") || ""}</div>` });
+      [CSS.containerEdged]: arrowType === "edge"
+    })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut} @keydown=${this.containerKeyDownHandler} @mouseenter=${this.handleMouseIn} @mouseleave=${this.handleMouseOut} role=group tabindex=0 ${ref(this.containerRef)}>${content}</div>` });
   }
 }
 customElement("calcite-carousel", Carousel);