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

package/dist/components/calcite-navigation-user/customElement.d.ts

@@ -1,14 +1,23 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
-/**
- * @cssproperty [--calcite-navigation-accent-color] - When `active`, specifies the component's border color.
- * @cssproperty [--calcite-navigation-user-avatar-corner-radius] - Specifies the component's avatar corner radius.
- * @cssproperty [--calcite-navigation-user-avatar-color] - Specifies the component's avatar icon color.
- * @cssproperty [--calcite-navigation-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-navigation-user-full-name-text-color] - Specifies the component's `fullName` text color.
- * @cssproperty [--calcite-navigation-user-name-text-color] - Specifies the component's `username` text color.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** When `active`, specifies the component's border color. */
+  "--calcite-navigation-accent-color": "*";
+  /** Specifies the component's avatar corner radius. */
+  "--calcite-navigation-user-avatar-corner-radius": "*";
+  /** Specifies the component's avatar icon color. */
+  "--calcite-navigation-user-avatar-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-navigation-background-color": "*";
+  /** Specifies the component's `fullName` text color. */
+  "--calcite-navigation-user-full-name-text-color": "*";
+  /** Specifies the component's `username` text color. */
+  "--calcite-navigation-user-name-text-color": "*";
+}
+}
+
 export abstract class NavigationUser extends LitElement {
   /**
    * When `true`, the component is highlighted.
@@ -17,9 +26,9 @@ export abstract class NavigationUser extends LitElement {
    */
   accessor active: boolean;
   /** Specifies the full name of the user. */
-  accessor fullName: string;
+  accessor fullName: string | undefined;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, hides the `fullName` and `username` contents.
    *
@@ -27,11 +36,11 @@ export abstract class NavigationUser extends LitElement {
    */
   accessor textDisabled: boolean;
   /** Specifies the `src` to an image (remember to add a token if the user is private). */
-  accessor thumbnail: string;
+  accessor thumbnail: string | undefined;
   /** Specifies the unique id of the user. */
-  accessor userId: string;
+  accessor userId: string | undefined;
   /** Specifies the username of the user. */
-  accessor username: string;
+  accessor username: string | undefined;
   /**
    * Sets focus on the component.
    *

package/dist/components/calcite-navigation-user/customElement.js

@@ -3,19 +3,14 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-const CSS = {
-  button: "button",
-  fullName: "full-name",
-  standalone: "standalone",
-  textContainer: "text-container",
-  username: "username"
-};
-const styles = css`:host([scale=s]){--calcite-internal-navigation-user-padding-inline: var(--calcite-space-md);--calcite-internal-navigation-user-full-name-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-user-username-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-navigation-user-full-name-line-height: var(--calcite-space-lg);--calcite-internal-navigation-user-username-line-height: var(--calcite-space-lg)}:host([scale=m]){--calcite-internal-navigation-user-padding-inline: var(--calcite-space-lg);--calcite-internal-navigation-user-full-name-font-size: var(--calcite-font-size-relative-md);--calcite-internal-navigation-user-username-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-user-full-name-line-height: var(--calcite-space-xl);--calcite-internal-navigation-user-username-line-height: var(--calcite-space-lg)}:host([scale=l]){--calcite-internal-navigation-user-padding-inline: var(--calcite-space-xl);--calcite-internal-navigation-user-full-name-font-size: var(--calcite-font-size-relative-xl);--calcite-internal-navigation-user-username-font-size: var(--calcite-font-size-relative-lg);--calcite-internal-navigation-user-full-name-line-height: var(--calcite-space-2xl);--calcite-internal-navigation-user-username-line-height: var(--calcite-space-2xl)}:host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{margin:0;display:flex;cursor:pointer;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);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;font-family:inherit;border:none;padding-inline:0;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-user-background-color, var(--calcite-color-transparent)));border-block-end:2px solid var(--calcite-color-transparent)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;text-align:start;padding-inline:var(--calcite-internal-navigation-user-padding-inline)}calcite-avatar{--calcite-avatar-corner-radius: var(--calcite-navigation-user-avatar-corner-radius);--calcite-avatar-color: var(--calcite-navigation-user-avatar-color);padding-inline:var(--calcite-internal-navigation-user-padding-inline)}calcite-avatar~.text-container{padding-inline-start:0px}.full-name{margin-inline-start:0px;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-user-full-name-text-color, var(--calcite-color-text-1));font-size:var(--calcite-internal-navigation-user-full-name-font-size);padding-block-start:var(--calcite-space-2xs);line-height:var(--calcite-internal-navigation-user-full-name-line-height)}.standalone{padding-block-start:0}.username{font-size:var(--calcite-internal-navigation-user-username-font-size);color:var(--calcite-navigation-user-name-text-color, var(--calcite-color-text-2));line-height:var(--calcite-internal-navigation-user-username-line-height)}:host(:hover) .button,:host(:focus) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-2)}:host(:focus) .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(:active) .button{--calcite-internal-navigation-user-background-color: var(--calcite-color-foreground-3)}:host([active]) .button{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
+import { u as useFocusable } from "../../chunks/useFocusable.js";
+import { C as CSS } from "../../chunks/resources22.js";
+const styles = css`:host([scale=s]){--calcite-internal-navigation-user-padding-inline: var(--calcite-space-md);--calcite-internal-navigation-user-full-name-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-user-username-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-navigation-user-full-name-line-height: var(--calcite-space-lg);--calcite-internal-navigation-user-username-line-height: var(--calcite-space-lg)}:host([scale=m]){--calcite-internal-navigation-user-padding-inline: var(--calcite-space-lg);--calcite-internal-navigation-user-full-name-font-size: var(--calcite-font-size-relative-md);--calcite-internal-navigation-user-username-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-user-full-name-line-height: var(--calcite-space-xl);--calcite-internal-navigation-user-username-line-height: var(--calcite-space-lg)}:host([scale=l]){--calcite-internal-navigation-user-padding-inline: var(--calcite-space-xl);--calcite-internal-navigation-user-full-name-font-size: var(--calcite-font-size-relative-xl);--calcite-internal-navigation-user-username-font-size: var(--calcite-font-size-relative-lg);--calcite-internal-navigation-user-full-name-line-height: var(--calcite-space-2xl);--calcite-internal-navigation-user-username-line-height: var(--calcite-space-2xl)}:host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{margin:0;display:flex;cursor:pointer;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);outline-color:transparent;font-family:inherit;border:none;padding-inline:0;background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-user-background-color, var(--calcite-color-transparent)));border-block-end:2px solid var(--calcite-color-transparent)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;text-align:start;padding-inline:var(--calcite-internal-navigation-user-padding-inline)}calcite-avatar{--calcite-avatar-corner-radius: var(--calcite-navigation-user-avatar-corner-radius);--calcite-avatar-color: var(--calcite-navigation-user-avatar-color);padding-inline:var(--calcite-internal-navigation-user-padding-inline)}calcite-avatar~.text-container{padding-inline-start:0px}.full-name{margin-inline-start:0px;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-user-full-name-text-color, var(--calcite-color-text-1));font-size:var(--calcite-internal-navigation-user-full-name-font-size);padding-block-start:var(--calcite-space-2xs);line-height:var(--calcite-internal-navigation-user-full-name-line-height)}.standalone{padding-block-start:0}.username{font-size:var(--calcite-internal-navigation-user-username-font-size);color:var(--calcite-navigation-user-name-text-color, var(--calcite-color-text-2));line-height:var(--calcite-internal-navigation-user-username-line-height)}:host(:hover) .button,:host(:focus) .button{--calcite-internal-navigation-user-background-color: var( --calcite-theme-color-surface-3, var(--calcite-color-foreground-2) )}:host(:focus) .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(:active) .button{--calcite-internal-navigation-user-background-color: var( --calcite-theme-color-surface-4, var(--calcite-color-foreground-3) )}:host([active]) .button{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
 class NavigationUser extends LitElement {
   constructor() {
     super(...arguments);
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
+    this.active = false;
     this.textDisabled = false;
     this.scale = "m";
   }

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

@@ -1,7 +1,46 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Appearance, Kind, Scale, Width } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Appearance, Kind, Scale, Width } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** When `appearance="outline-fill"`, specifies the component's background color. */
+  "--calcite-notice-background-color": "*";
+  /** When `appearance="outline-fill"`, specifies the component's border color. */
+  "--calcite-notice-border-color": "*";
+  /** Specifies the component's border radius. */
+  "--calcite-notice-corner-radius": "*";
+  /** Specifies the background color of the component's close element. */
+  "--calcite-notice-close-background-color": "*";
+  /** Specifies the background color of the component's close element when hovered. */
+  "--calcite-notice-close-background-color-hover": "*";
+  /**
+   * Specifies the background color of the component's close element when hovered.
+   *
+   * @deprecated in v5.0.0, removal target v6.0.0 - Use `--calcite-notice-close-background-color-hover` instead.
+   */
+  "--calcite-notice-close-background-color-focus": "*";
+  /** Specifies the background color of the component's close element when active. */
+  "--calcite-notice-close-background-color-press": "*";
+  /** Specifies the icon color of the component's close element when hovered or active. */
+  "--calcite-notice-close-icon-color-hover": "*";
+  /** Specifies the icon color of the component's close element. */
+  "--calcite-notice-close-icon-color": "*";
+  /** Specifies the component's slotted `"title"` content text color. */
+  "--calcite-notice-title-text-color": "*";
+  /** Specifies the component's slotted `"message"` content text color. */
+  "--calcite-notice-content-text-color": "*";
+  /**
+   * Specifies the component's width.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0.
+   */
+  "--calcite-notice-width": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-notice-shadow": "*";
+}
+}
 
 /**
  * Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
@@ -9,19 +48,6 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * They are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not
  * to display a notice on page load and set the "active" attribute as needed to contextually provide inline messaging to users.
  *
- * @cssproperty [--calcite-notice-background-color] - When `appearance="outline-fill"`, specifies the component's background color.
- * @cssproperty [--calcite-notice-border-color] - When `appearance="outline-fill"`, specifies the component's border color.
- * @cssproperty [--calcite-notice-corner-radius] - Specifies the component's border radius.
- * @cssproperty [--calcite-notice-close-background-color] - Specifies the background color of the component's close element.
- * @cssproperty [--calcite-notice-close-background-color-hover] - Specifies the background color of the component's close element when hovered.
- * @cssproperty [--calcite-notice-close-background-color-focus] - [Deprecated] in v5.0.0, removal target v6.0.0 - Use `--calcite-notice-close-background-color-hover` instead. Specifies the background color of the component's close element when hovered.
- * @cssproperty [--calcite-notice-close-background-color-press] - Specifies the background color of the component's close element when active.
- * @cssproperty [--calcite-notice-close-icon-color-hover] - Specifies the icon color of the component's close element when hovered or active.
- * @cssproperty [--calcite-notice-close-icon-color] - Specifies the icon color of the component's close element.
- * @cssproperty [--calcite-notice-title-text-color] - Specifies the component's slotted `"title"` content text color.
- * @cssproperty [--calcite-notice-content-text-color] - Specifies the component's slotted `"message"` content text color.
- * @cssproperty [--calcite-notice-width] - [Deprecated] in v3.0.0, removal target v6.0.0 - Specifies the component's width.
- * @cssproperty [--calcite-notice-shadow] - Specifies the component's shadow.
  * @slot [title] - A slot for adding a title.
  * @slot [message] - A slot for adding a message.
  * @slot [link] - A slot for adding a `calcite-action` to take, such as: "undo", "try again", "link to page", etc.
@@ -41,7 +67,7 @@ export abstract class Notice extends LitElement {
    */
   accessor closable: boolean;
   /** When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
-  accessor icon: IconName | boolean;
+  accessor icon: IconName | boolean | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -54,8 +80,12 @@ export abstract class Notice extends LitElement {
    * @default "brand"
    */
   accessor kind: Extract<"brand" | "danger" | "info" | "success" | "warning" | "neutral", Kind>;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { close?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { close?: string | undefined; };
   /**
    * When `true`, the component is visible.
    *
@@ -69,7 +99,9 @@ export abstract class Notice extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
+   * Specifies the width of the component.
+   *
+   * [Deprecated] The `"half"` value is deprecated in v3.0.0, removal target v6.0.0 - use `"full"` instead.
    *
    * @default "auto"
    */

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

@@ -3,12 +3,12 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { b as setRequestedIcon, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
-import { K as KindIcons, a as KindIconsFilled } from "../../chunks/resources4.js";
+import { v as setRequestedIcon, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { K as KindIcons, a as KindIconsFilled } from "../../chunks/resources3.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.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 { u as useFocusable } from "../../chunks/useFocusable.js";
 const SLOTS = {
   title: "title",
   message: "message",
@@ -22,7 +22,7 @@ const CSS = {
   content: "notice-content",
   icon: "notice-icon"
 };
-const styles = css`:host([scale=s]){--calcite-notice-spacing-token-small: .5rem;--calcite-notice-spacing-token-large: .75rem}:host([scale=s]) .container slot[name=title]::slotted(*),:host([scale=s]) .container *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=s]) .container slot[name=message]::slotted(*),:host([scale=s]) .container *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=s]) ::slotted(calcite-link){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]){--calcite-notice-spacing-token-small: .75rem;--calcite-notice-spacing-token-large: 1rem}:host([scale=m]) .container slot[name=title]::slotted(*),:host([scale=m]) .container *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]) .container slot[name=message]::slotted(*),:host([scale=m]) .container *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]) ::slotted(calcite-link){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]){--calcite-notice-spacing-token-small: 1rem;--calcite-notice-spacing-token-large: 1.25rem}:host([scale=l]) .container slot[name=title]::slotted(*),:host([scale=l]) .container *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-lg);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) .container slot[name=message]::slotted(*),:host([scale=l]) .container *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) ::slotted(calcite-link){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) .notice-close{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=l]) .actions-end{margin-inline-end:var(--calcite-spacing-sm);gap:var(--calcite-spacing-sm)}:host([width=auto]){--calcite-notice-width: auto}:host([width=half]){--calcite-notice-width: 50%}:host([width=full]){--calcite-notice-width: 100%}:host{margin-inline:auto;display:none;max-inline-size:100%;align-items:center;inline-size:var(--calcite-notice-width)}.container{pointer-events:none;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;opacity:0;overflow:hidden;max-block-size:0;transition-property:opacity,max-block-size;transition-duration:var(--calcite-animation-timing);text-align:start;border-radius:var(--calcite-notice-corner-radius, var(--calcite-corner-radius-sm));box-shadow:var(--calcite-notice-shadow, var(--calcite-shadow-none))}:host{display:flex}:host([open]) .container{pointer-events:auto;max-block-size:100%;align-items:center;opacity:1;overflow:visible}@starting-style{:host([open]) .container{opacity:0;max-block-size:0}}:host([open][appearance=outline-fill]) .container{border:var(--calcite-border-width-sm) solid}.container slot[name=title]::slotted(*),.container *::slotted([slot=title]){margin:0;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-notice-title-text-color, var(--calcite-color-text-1))}.container slot[name=message]::slotted(*),.container *::slotted([slot=message]){margin:0;display:inline;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-notice-content-text-color, var(--calcite-color-text-2))}:host(:not([kind=neutral])[appearance=solid]) .container slot[name=title]::slotted(*),:host(:not([kind=neutral])[appearance=solid]) .container *::slotted([slot=title]){color:var(--calcite-notice-title-text-color, var(--calcite-color-text-inverse))}:host(:not([kind=neutral])[appearance=solid]) .container slot[name=message]::slotted(*),:host(:not([kind=neutral])[appearance=solid]) .container *::slotted([slot=message]){color:var(--calcite-notice-content-text-color, var(--calcite-color-text-inverse))}.notice-content{box-sizing:border-box;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;padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;display:flex;min-inline-size:0px;flex-direction:column;overflow-wrap:break-word;flex:1 1 0;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:0 var(--calcite-notice-spacing-token-large)}.notice-content:first-of-type:not(:only-child){padding-inline-start:var(--calcite-notice-spacing-token-large)}.notice-content:only-of-type{padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large)}.notice-icon{display:flex;align-items:center;box-sizing:border-box;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;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;padding-inline:var(--calcite-notice-spacing-token-small)}.notice-close{box-sizing:border-box;display:flex;cursor:pointer;align-items:center;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;flex:0 0 auto;margin-inline-end:var(--calcite-spacing-xs);--calcite-action-background-color: var(--calcite-notice-close-background-color);--calcite-action-background-color-hover: var( --calcite-notice-close-background-color-hover, var(--calcite-notice-close-background-color-focus) );--calcite-action-background-color-press: var(--calcite-notice-close-background-color-press);--calcite-action-text-color: var(--calcite-notice-close-icon-color, var(--calcite-color-text-3));--calcite-action-text-color-press: var(--calcite-notice-close-icon-color-hover)}.actions-end{display:flex;align-items:center;flex:0 0 auto;margin-inline-end:var(--calcite-spacing-xs);gap:var(--calcite-spacing-xs)}:host([kind=brand][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-brand) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-brand) 5%, var(--calcite-color-foreground-1)))}:host([kind=brand][appearance=outline-fill]) .notice-icon,:host([kind=brand][appearance=transparent]) .notice-icon{color:var(--calcite-color-brand)}:host([kind=info][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-status-info) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-status-info) 5%, var(--calcite-color-foreground-1)))}:host([kind=info][appearance=outline-fill]) .notice-icon,:host([kind=info][appearance=transparent]) .notice-icon{color:var(--calcite-color-status-info)}:host([kind=danger][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-status-danger) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-status-danger) 5%, var(--calcite-color-foreground-1)))}:host([kind=danger][appearance=outline-fill]) .notice-icon,:host([kind=danger][appearance=transparent]) .notice-icon{color:var(--calcite-color-status-danger)}:host([kind=success][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-status-success) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-status-success) 5%, var(--calcite-color-foreground-1)))}:host([kind=success][appearance=outline-fill]) .notice-icon,:host([kind=success][appearance=transparent]) .notice-icon{color:var(--calcite-color-status-success)}:host([kind=warning][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-status-warning) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-status-warning) 5%, var(--calcite-color-foreground-1)))}:host([kind=warning][appearance=outline-fill]) .notice-icon,:host([kind=warning][appearance=transparent]) .notice-icon{color:var(--calcite-color-status-warning)}:host([kind=neutral][appearance=outline-fill]) .container{border-color:var(--calcite-color-border-2);background-color:var(--calcite-notice-background-color, var(--calcite-color-foreground-1))}:host([kind=neutral]) .notice-icon{color:var(--calcite-color-text-3)}:host([appearance=transparent]) .container{background-color:transparent}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([scale=s]){--calcite-notice-spacing-token-small: .5rem;--calcite-notice-spacing-token-large: .75rem}:host([scale=s]) .container slot[name=title]::slotted(*),:host([scale=s]) .container *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=s]) .container slot[name=message]::slotted(*),:host([scale=s]) .container *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=s]) ::slotted(calcite-link){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]){--calcite-notice-spacing-token-small: .75rem;--calcite-notice-spacing-token-large: 1rem}:host([scale=m]) .container slot[name=title]::slotted(*),:host([scale=m]) .container *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]) .container slot[name=message]::slotted(*),:host([scale=m]) .container *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=m]) ::slotted(calcite-link){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]){--calcite-notice-spacing-token-small: 1rem;--calcite-notice-spacing-token-large: 1.25rem}:host([scale=l]) .container slot[name=title]::slotted(*),:host([scale=l]) .container *::slotted([slot=title]){font-size:var(--calcite-font-size-relative-lg);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) .container slot[name=message]::slotted(*),:host([scale=l]) .container *::slotted([slot=message]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) ::slotted(calcite-link){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) .notice-close{margin-inline-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([scale=l]) .actions-end{margin-inline-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm));gap:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([width=auto]){--calcite-notice-width: auto}:host([width=half]){--calcite-notice-width: 50%}:host([width=full]){--calcite-notice-width: 100%}:host{margin-inline:auto;display:none;max-inline-size:100%;align-items:center;inline-size:var(--calcite-notice-width)}.container{pointer-events:none;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;opacity:0;overflow:hidden;max-block-size:0;transition-property:opacity,max-block-size;transition-duration:var(--calcite-animation-timing);text-align:start;border-radius:var(--calcite-notice-corner-radius, var(--calcite-corner-radius-sm));box-shadow:var(--calcite-notice-shadow, var(--calcite-shadow-none))}:host{display:flex}:host([open]) .container{pointer-events:auto;max-block-size:100%;align-items:center;opacity:1;overflow:visible}@starting-style{:host([open]) .container{opacity:0;max-block-size:0}}:host([open][appearance=outline-fill]) .container{border:var(--calcite-border-width-sm) solid}.container slot[name=title]::slotted(*),.container *::slotted([slot=title]){margin:0;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-notice-title-text-color, var(--calcite-color-text-1))}.container slot[name=message]::slotted(*),.container *::slotted([slot=message]){margin:0;display:inline;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-notice-content-text-color, var(--calcite-color-text-2))}:host(:not([kind=neutral])[appearance=solid]) .container slot[name=title]::slotted(*),:host(:not([kind=neutral])[appearance=solid]) .container *::slotted([slot=title]){color:var(--calcite-notice-title-text-color, var(--calcite-color-text-inverse))}:host(:not([kind=neutral])[appearance=solid]) .container slot[name=message]::slotted(*),:host(:not([kind=neutral])[appearance=solid]) .container *::slotted([slot=message]){color:var(--calcite-notice-content-text-color, var(--calcite-color-text-inverse))}.notice-content{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;box-sizing:border-box;padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;display:flex;min-inline-size:0px;flex-direction:column;overflow-wrap:break-word;flex:1 1 0;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:0 var(--calcite-notice-spacing-token-large)}.notice-content:first-of-type:not(:only-child){padding-inline-start:var(--calcite-notice-spacing-token-large)}.notice-content:only-of-type{padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large)}.notice-icon{display:flex;align-items:center;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;box-sizing:border-box;padding-block:var(--calcite-notice-spacing-token-small);padding-inline:var(--calcite-notice-spacing-token-large);flex:0 0 auto;padding-inline:var(--calcite-notice-spacing-token-small)}.notice-close{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;box-sizing:border-box;display:flex;cursor:pointer;align-items:center;flex:0 0 auto;margin-inline-end:var(--calcite-theme-space-xs, var(--calcite-spacing-xs));--calcite-action-background-color: var(--calcite-notice-close-background-color);--calcite-action-background-color-hover: var( --calcite-notice-close-background-color-hover, var(--calcite-notice-close-background-color-focus) );--calcite-action-background-color-press: var(--calcite-notice-close-background-color-press);--calcite-action-text-color: var(--calcite-notice-close-icon-color, var(--calcite-color-text-3));--calcite-action-text-color-press: var(--calcite-notice-close-icon-color-hover)}.actions-end{display:flex;align-items:center;flex:0 0 auto;margin-inline-end:var(--calcite-theme-space-xs, var(--calcite-spacing-xs));gap:var(--calcite-theme-space-xs, var(--calcite-spacing-xs))}:host([kind=brand][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-brand) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-brand) 5%, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))))}:host([kind=brand][appearance=outline-fill]) .notice-icon,:host([kind=brand][appearance=transparent]) .notice-icon{color:var(--calcite-color-brand)}:host([kind=info][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-status-info) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-status-info) 5%, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))))}:host([kind=info][appearance=outline-fill]) .notice-icon,:host([kind=info][appearance=transparent]) .notice-icon{color:var(--calcite-color-status-info)}:host([kind=danger][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-status-danger) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-status-danger) 5%, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))))}:host([kind=danger][appearance=outline-fill]) .notice-icon,:host([kind=danger][appearance=transparent]) .notice-icon{color:var(--calcite-color-status-danger)}:host([kind=success][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-status-success) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-status-success) 5%, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))))}:host([kind=success][appearance=outline-fill]) .notice-icon,:host([kind=success][appearance=transparent]) .notice-icon{color:var(--calcite-color-status-success)}:host([kind=warning][appearance=outline-fill]) .container{border-color:var(--calcite-notice-border-color, rgb(from var(--calcite-color-status-warning) r g b/var(--calcite-opacity-half)));background-color:var(--calcite-notice-background-color, color-mix(in srgb, var(--calcite-color-status-warning) 5%, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1))))}:host([kind=warning][appearance=outline-fill]) .notice-icon,:host([kind=warning][appearance=transparent]) .notice-icon{color:var(--calcite-color-status-warning)}:host([kind=neutral][appearance=outline-fill]) .container{border-color:var(--calcite-color-border-2);background-color:var(--calcite-notice-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)))}:host([kind=neutral]) .notice-icon{color:var(--calcite-color-text-3)}:host([appearance=transparent]) .container{background-color:transparent}:host([hidden]){display:none}[hidden]{display:none}`;
 class Notice extends LitElement {
   constructor() {
     super(...arguments);
@@ -30,7 +30,7 @@ class Notice extends LitElement {
     this.transitionProp = "opacity";
     this.transitionRef = createRef();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.hasActionEnd = false;
     this.appearance = "outline-fill";
     this.closable = false;
@@ -45,7 +45,7 @@ class Notice extends LitElement {
     this.calciteNoticeOpen = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { hasActionEnd: [16, {}, { state: true }], appearance: [3, {}, { reflect: true }], closable: [7, {}, { reflect: true, type: Boolean }], icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], kind: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { hasActionEnd: [16, {}, { state: true }], appearance: [3, {}, { reflect: true }], closable: [7, {}, { reflect: true, type: Boolean }], icon: [3, { converter: stringOrBoolean }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], kind: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;

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

@@ -9,7 +9,7 @@ export abstract class Option extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, the component is selected.
    *

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

@@ -14,6 +14,7 @@ class Option extends LitElement {
       this.calciteInternalOptionChange.emit();
     });
     this.disabled = false;
+    this.selected = false;
     this.calciteInternalOptionChange = createEvent({ cancelable: false });
   }
   static {

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

@@ -1,16 +1,25 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { NumberingSystem } from "../../utils/locale.js";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's item color. */
+  "--calcite-pagination-color": "*";
+  /** Specifies the component's item color when hovered or selected. */
+  "--calcite-pagination-color-hover": "*";
+  /** Specifies the component's item bottom border color when hovered. */
+  "--calcite-pagination-color-border-hover": "*";
+  /** Specifies the component's item bottom border color when selected. */
+  "--calcite-pagination-color-border-active": "*";
+  /** Specifies the component's item background color when active. */
+  "--calcite-pagination-background-color": "*";
+  /** Specifies the component's chevron item background color when hovered. */
+  "--calcite-pagination-icon-color-background-hover": "*";
+}
+}
 
-/**
- * @cssproperty [--calcite-pagination-color] - Specifies the component's item color.
- * @cssproperty [--calcite-pagination-color-hover] - Specifies the component's item color when hovered or selected.
- * @cssproperty [--calcite-pagination-color-border-hover] - Specifies the component's item bottom border color when hovered.
- * @cssproperty [--calcite-pagination-color-border-active] - Specifies the component's item bottom border color when selected.
- * @cssproperty [--calcite-pagination-background-color] - Specifies the component's item background color when active.
- * @cssproperty [--calcite-pagination-icon-color-background-hover] - Specifies the component's chevron item background color when hovered.
- */
 export abstract class Pagination extends LitElement {
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
@@ -18,12 +27,16 @@ export abstract class Pagination extends LitElement {
    * @default false
    */
   accessor groupSeparator: 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: {
-      next?: string;
-      previous?: string;
-      first?: string;
-      last?: string;
+      next?: string | undefined;
+      previous?: string | undefined;
+      first?: string | undefined;
+      last?: string | undefined;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem | undefined;

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

@@ -8,7 +8,7 @@ import { c as createObserver } from "../../chunks/observers.js";
 import { b as breakpoints } from "../../chunks/responsive.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 { u as useFocusable } from "../../chunks/useFocusable.js";
 const CSS = {
   list: "list",
   listItem: "list-item",
@@ -25,7 +25,7 @@ const ICONS = {
   first: "chevron-start",
   last: "chevron-end"
 };
-const styles = css`:host{display:flex;writing-mode:horizontal-tb}.list{margin:0;display:flex;list-style-type:none;padding:0;column-gap:var(--calcite-spacing-base)}.list-item{margin:0;display:flex;padding:0}.hidden-item{display:none}:host([scale=s]) .chevron,:host([scale=s]) .page,:host([scale=s]) .ellipsis{block-size:1.5rem;padding-inline:.25rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);min-inline-size:1.5rem}:host([scale=m]) .chevron,:host([scale=m]) .page,:host([scale=m]) .ellipsis{block-size:2rem;padding-inline:.5rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);min-inline-size:2rem}:host([scale=l]) .chevron,:host([scale=l]) .page,:host([scale=l]) .ellipsis{block-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-inline-size:2.75rem}:host([scale=l]) .chevron{padding-inline:var(--calcite-space-sm-plus)}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:.75rem}:host button{outline-color:transparent}:host 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))))}.chevron,.page,.ellipsis{margin:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity: 0;background-color:transparent;padding:0;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);color:var(--calcite-pagination-color, var(--calcite-color-text-3))}.chevron,.page{cursor:pointer;border-block:2px solid transparent}.chevron:hover,.page:hover{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;color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.chevron:active,.page:active{color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.page:hover{border-block-end-color:var(--calcite-pagination-color-border-hover, var(--calcite-color-border-2))}.page:active{background-color:var(--calcite-pagination-background-color, var(--calcite-color-foreground-3))}.page.selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1));border-block-end-color:var(--calcite-pagination-color-border-active, var(--calcite-color-brand))}.page.selected:focus{border-block-end-width:var(--calcite-spacing-xxs);padding-block-start:var(--calcite-spacing-base)}.chevron:hover{background-color:var(--calcite-pagination-icon-color-background-hover, var(--calcite-color-foreground-2))}.chevron:active{background-color:var(--calcite-pagination-background-color, var(--calcite-color-foreground-3))}.chevron.disabled{pointer-events:none;background-color:transparent}.chevron.disabled>calcite-icon{opacity:var(--calcite-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:flex;writing-mode:horizontal-tb}.list{margin:0;display:flex;list-style-type:none;padding:0;column-gap:var(--calcite-theme-space-base, var(--calcite-spacing-base))}.list-item{margin:0;display:flex;padding:0}.hidden-item{display:none}:host([scale=s]) .chevron,:host([scale=s]) .page,:host([scale=s]) .ellipsis{block-size:1.5rem;padding-inline:.25rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);min-inline-size:1.5rem}:host([scale=m]) .chevron,:host([scale=m]) .page,:host([scale=m]) .ellipsis{block-size:2rem;padding-inline:.5rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);min-inline-size:2rem}:host([scale=l]) .chevron,:host([scale=l]) .page,:host([scale=l]) .ellipsis{block-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-inline-size:2.75rem}:host([scale=l]) .chevron{padding-inline:var(--calcite-space-sm-plus)}:host([scale=l]) .page,:host([scale=l]) .ellipsis{padding-inline:.75rem}:host button{outline-color:transparent}:host 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))))}.chevron,.page,.ellipsis{margin:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity: 0;background-color:transparent;padding:0;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);color:var(--calcite-pagination-color, var(--calcite-color-text-3))}.chevron,.page{cursor:pointer;border-block:2px solid transparent}.chevron:hover,.page:hover{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;color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.chevron:active,.page:active{color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1))}.page:hover{border-block-end-color:var(--calcite-pagination-color-border-hover, var(--calcite-color-border-2))}.page:active{background-color:var(--calcite-pagination-background-color, var(--calcite-theme-color-surface-4, var(--calcite-color-foreground-3)))}.page.selected{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-pagination-color-hover, var(--calcite-color-text-1));border-block-end-color:var(--calcite-pagination-color-border-active, var(--calcite-color-brand))}.page.selected:focus{border-block-end-width:var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs));padding-block-start:var(--calcite-theme-space-base, var(--calcite-spacing-base))}.chevron:hover{background-color:var(--calcite-pagination-icon-color-background-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)))}.chevron:active{background-color:var(--calcite-pagination-background-color, var(--calcite-theme-color-surface-4, var(--calcite-color-foreground-3)))}.chevron.disabled{pointer-events:none;background-color:transparent}.chevron.disabled>calcite-icon{opacity:var(--calcite-opacity-disabled)}:host([hidden]){display:none}[hidden]{display:none}`;
 const firstAndLastPageCount = 2;
 const ellipsisCount = 2;
 const maxItemBreakpoints = {
@@ -40,8 +40,8 @@ class Pagination extends LitElement {
     super(...arguments);
     this.resizeHandler = ({ contentRect: { width } }) => this.setMaxItemsToBreakpoint(width);
     this.resizeObserver = createObserver("resize", (entries) => entries.forEach(this.resizeHandler));
-    this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.messages = useT9n({ blocking: true });
+    this.focusSetter = useFocusable()(this);
     this.isXXSmall = false;
     this.lastStartItem = 1;
     this.maxItems = maxItemBreakpoints.xxsmall;
@@ -187,11 +187,11 @@ class Pagination extends LitElement {
   }
   handlePageClick(event) {
     const target = event.target;
-    this.startItem = parseInt(target.value);
+    this.startItem = parseInt(target.value, 10);
     this.emitUpdate();
   }
   renderEllipsis(type) {
-    return keyed(type, html`<span class=${safeClassMap(CSS.ellipsis)}>&hellip;</span>`);
+    return html`<li aria-hidden=true role=presentation>${keyed(type, html`<span class=${safeClassMap(CSS.ellipsis)}>&hellip;</span>`)}</li>`;
   }
   renderItems() {
     const { totalItems, pageSize, startItem, maxItems, totalPages, lastStartItem, isXXSmall } = this;

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

@@ -2,37 +2,79 @@
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { HeadingLevel } from "../functional/Heading.js";
 import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { CollapseDirection, Scale } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { CollapseDirection, Scale } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's corner radius. */
+  "--calcite-panel-corner-radius": "*";
+  /** Specifies the text color of the component's `heading`. */
+  "--calcite-panel-heading-text-color": "*";
+  /** Specifies the color of the component's icon. */
+  "--calcite-panel-icon-color": "*";
+  /** Specifies the text color of the component's `description`. */
+  "--calcite-panel-description-text-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-panel-border-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-panel-background-color": "*";
+  /** Specifies the padding of the component's `content-top` slot. */
+  "--calcite-panel-content-top-space": "*";
+  /** Specifies the padding of the component's `content-bottom` slot. */
+  "--calcite-panel-content-bottom-space": "*";
+  /** Specifies the padding of the component's `header-top` slot. */
+  "--calcite-panel-header-top-space": "*";
+  /** Specifies the background color of the component's header. */
+  "--calcite-panel-header-background-color": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. */
+  "--calcite-panel-header-action-background-color": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered. */
+  "--calcite-panel-header-action-background-color-hover": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed. */
+  "--calcite-panel-header-action-background-color-press": "*";
+  /** Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. */
+  "--calcite-panel-header-action-text-color": "*";
+  /** Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered. */
+  "--calcite-panel-header-action-text-color-press": "*";
+  /** Specifies the background color of the component's footer. */
+  "--calcite-panel-footer-background-color": "*";
+  /** Specifies the padding of the component's `unnamed (default)` slot. */
+  "--calcite-panel-space": "*";
+  /** Specifies the padding of the component's `header-content` slot. */
+  "--calcite-panel-header-content-space": "*";
+  /** Specifies the padding of the component's footer. */
+  "--calcite-panel-footer-space": "*";
+  /** Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s. */
+  "--calcite-popover-border-color": "*";
+  /**
+   * Specifies the padding of the component's content.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-space` instead.
+   */
+  "--calcite-panel-content-space": "*";
+  /**
+   * Specifies the padding of the component's footer.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-footer-space` instead.
+   */
+  "--calcite-panel-footer-padding": "*";
+  /**
+   * Specifies the component header's block end border.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-border-color` instead.
+   */
+  "--calcite-panel-header-border-block-end": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-panel-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-panel-heading-text-color] - Specifies the text color of the component's `heading`.
- * @cssproperty [--calcite-panel-icon-color] - Specifies the color of the component's icon.
- * @cssproperty [--calcite-panel-description-text-color] - Specifies the text color of the component's `description`.
- * @cssproperty [--calcite-panel-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-panel-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-panel-content-top-space] - Specifies the padding of the component's `content-top` slot.
- * @cssproperty [--calcite-panel-content-bottom-space] - Specifies the padding of the component's `content-bottom` slot.
- * @cssproperty [--calcite-panel-header-background-color] - Specifies the background color of the component's header.
- * @cssproperty [--calcite-panel-header-action-background-color] - Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
- * @cssproperty [--calcite-panel-header-action-background-color-hover] - Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered.
- * @cssproperty [--calcite-panel-header-action-background-color-press] - Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed.
- * @cssproperty [--calcite-panel-header-action-text-color] - Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
- * @cssproperty [--calcite-panel-header-action-text-color-press] - Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered.
- * @cssproperty [--calcite-panel-footer-background-color] - Specifies the background color of the component's footer.
- * @cssproperty [--calcite-panel-space] - Specifies the padding of the component's `unnamed (default)` slot.
- * @cssproperty [--calcite-panel-header-content-space] - Specifies the padding of the component's `header-content` slot.
- * @cssproperty [--calcite-panel-footer-space] - Specifies the padding of the component's footer.
- * @cssproperty [--calcite-popover-border-color] - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
- * @cssproperty [--calcite-panel-content-space] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-space` instead. Specifies the padding of the component's content.
- * @cssproperty [--calcite-panel-footer-padding] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer.
- * @cssproperty [--calcite-panel-header-border-block-end] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-border-color` instead. Specifies the component header's block end border.
  * @slot  - A slot for adding custom content.
  * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
  * @slot [alerts] - A slot for adding `calcite-alert`s to the component.
  * @slot [content-bottom] - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated).
  * @slot [content-top] - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).
+ * @slot [header-top] - A slot for adding custom content above the header actions and content.
  * @slot [header-actions-start] - A slot for adding actions or content to the start side of the header.
  * @slot [header-actions-end] - A slot for adding actions or content to the end side of the header.
  * @slot [header-content] - A slot for adding custom content to the header.
@@ -48,13 +90,13 @@ export abstract class Panel extends LitElement {
   /** Passes a function to run before the component closes. */
   accessor beforeClose: (() => Promise<void>) | undefined;
   /**
-   * When `true`, displays a close button in the component.
+   * When `true`, displays a close button in the trailing side of the component's header.
    *
    * @default false
    */
   accessor closable: boolean;
   /**
-   * When `true`, the component will be hidden.
+   * When `true`, hides the component.
    *
    * @default false
    */
@@ -103,7 +145,7 @@ export abstract class Panel extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
+  /** Specifies the component's fallback `menuPlacement` when its initial or specified `menuPlacement` has insufficient space available. */
   accessor menuFlipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, the action menu items in the `header-menu-actions` slot are open.
@@ -117,19 +159,23 @@ export abstract class Panel extends LitElement {
    * @default "bottom-end"
    */
   accessor menuPlacement: LogicalPlacement;
-  /** 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: {
-      close?: string;
-      options?: string;
-      collapse?: string;
-      expand?: string;
+      close?: string | undefined;
+      options?: string | undefined;
+      collapse?: string | undefined;
+      expand?: string | undefined;
   };
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
@@ -141,9 +187,7 @@ export abstract class Panel extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)