@esri/calcite-components 5.2.0-next.9 → 5.2.0-next.91

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

@@ -5,7 +5,7 @@ import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
-import { z as intersects } from "../../chunks/dom.js";
+import { B as intersects } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const CSS = {
@@ -98,13 +98,13 @@ class Meter extends LitElement {
   }
   calculateValues() {
     const { min, max, low, high, value } = this;
-    const lowPercent = 100 * (low - min) / (max - min);
-    const highPercent = 100 * (high - min) / (max - min);
-    const currentPercent = 100 * (value - min) / (max - min);
-    if (!low || low < min || low > high || low > max) {
+    const lowPercent = low === void 0 ? NaN : 100 * (low - min) / (max - min);
+    const highPercent = high === void 0 ? NaN : 100 * (high - min) / (max - min);
+    const currentPercent = value === void 0 ? NaN : 100 * (value - min) / (max - min);
+    if (!low || low < min || high !== void 0 && low > high || low > max) {
       this.low = min;
     }
-    if (!high || high > max || high < low || high < min) {
+    if (!high || high > max || low !== void 0 && high < low || high < min) {
       this.high = max;
     }
     if (!value) {
@@ -140,10 +140,10 @@ class Meter extends LitElement {
     const { low, high, min, max, value } = this;
     const lowest = low ? low : min;
     const highest = high ? high : max;
-    const aboveLowest = value >= lowest;
-    const belowLowest = value < lowest;
-    const aboveHighest = value >= highest;
-    const belowHighest = value < highest;
+    const aboveLowest = value !== void 0 && value >= lowest;
+    const belowLowest = value !== void 0 && value < lowest;
+    const aboveHighest = value !== void 0 && value >= highest;
+    const belowHighest = value !== void 0 && value < highest;
     if (!value || !low && belowHighest || belowLowest) {
       return CSS.success;
     } else if (aboveLowest && belowHighest) {

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

@@ -1,12 +1,25 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the width of the component's content area. */
+  "--calcite-navigation-width": "*";
+  /**
+   * Specifies the background color of the component.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-navigation-background-color` instead.
+   */
+  "--calcite-navigation-background": "*";
+  /** Specifies the component's background color. */
+  "--calcite-navigation-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-navigation-border-color": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-navigation-width] - Specifies the width of the component's content area.
- * @cssproperty [--calcite-navigation-background] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-navigation-background-color` instead. Specifies the background color of the component.
- * @cssproperty [--calcite-navigation-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-navigation-border-color] - Specifies the component's border color.
  * @slot [logo] - A slot for adding a `calcite-logo` component to the primary navigation level.
  * @slot [user] - A slot for adding a `calcite-user` component to the primary navigation level.
  * @slot [progress] - A slot for adding a `calcite-progress` component to the primary navigation level.
@@ -19,7 +32,7 @@ import type { Scale } from "../interfaces.js";
  */
 export abstract class Navigation extends LitElement {
   /** When `navigationAction` is `true`, specifies an accessible label for the `calcite-action`. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, displays a `calcite-action` and emits a `calciteNavActionSelect` event on selection change.
    *

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

@@ -4,8 +4,11 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { i as isNavigationLogo } from "../../chunks/resources21.js";
+import { i as isNavigationUser } from "../../chunks/resources22.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { c as createObserver } from "../../chunks/observers.js";
+import { i as isTag } from "../../chunks/resources3.js";
 const CSS = {
   container: "container",
   containerContent: "container-content",
@@ -29,17 +32,27 @@ const SLOTS = {
 const ICONS = {
   hamburger: "hamburger"
 };
+const isNavigation = isTag("calcite-navigation");
 const styles = css`:host([hidden]){display:none}[hidden]{display:none}:host{display:block}:host([scale=s]){--calcite-internal-navigation-primary-height: 3rem;--calcite-internal-navigation-secondary-height: 2.25rem;--calcite-internal-navigation-tertiary-height: 2.25rem;--calcite-internal-navigation-navigation-action-margin-inline: 8px}:host([scale=m]){--calcite-internal-navigation-primary-height: 4rem;--calcite-internal-navigation-secondary-height: 3rem;--calcite-internal-navigation-tertiary-height: 3rem;--calcite-internal-navigation-navigation-action-margin-inline: var(--calcite-font-size-sm)}:host([scale=l]){--calcite-internal-navigation-primary-height: 4.75rem;--calcite-internal-navigation-secondary-height: 4rem;--calcite-internal-navigation-tertiary-height: 4rem;--calcite-internal-navigation-navigation-action-margin-inline: var(--calcite-font-size-md)}.container{display:flex;inline-size:100%;flex-direction:column;margin-block:0;margin-inline:auto;background-color:var(--calcite-navigation-background-color, var(--calcite-navigation-background, var(--calcite-color-foreground-1)))}.container.primary,.container.secondary,.container.tertiary{border-block-end:1px solid;border-block-end-color:var(--calcite-navigation-border-color, var(--calcite-color-border-3))}.user,.logo{display:flex}.hide{display:none}.primary{block-size:var(--calcite-internal-navigation-primary-height)}.secondary{block-size:var(--calcite-internal-navigation-secondary-height)}.tertiary{block-size:var(--calcite-internal-navigation-tertiary-height)}.container-content{margin-inline:auto;display:flex;block-size:100%;inline-size:100%;margin-block:0;inline-size:var(--calcite-navigation-width, 100%);max-inline-size:100%}.container-content.progress-bar{margin-block-start:.125rem}slot[name]{display:flex;flex-direction:row}slot[name=navigation-secondary]::slotted(calcite-navigation),slot[name=navigation-tertiary]::slotted(calcite-navigation){inline-size:100%}slot[name=content-start]::slotted(*),slot[name=content-center]::slotted(*),slot[name=content-end]::slotted(*){display:flex;flex-direction:row;align-items:center}slot[name=progress],slot[name=progress] calcite-progress{inset-block-start:0;inset-inline:0}slot[name=content-end]{margin-inline-start:auto}slot[name=content-start]{margin-inline-end:auto}slot[name=content-end],slot[name=logo]~slot[name=user],slot[name=user]:only-child{margin-inline-start:auto}slot[name=content-center]{margin-inline-start:auto;margin-inline-end:auto}slot[name=content-start]~slot[name=content-center]{margin-inline-start:0px}slot[name=content-start]~slot[name=content-end],slot[name=content-center]~slot[name=content-end],slot[name=content-center]~slot[name=user],slot[name=content-end]~slot[name=user]{margin:0}slot[name=navigation-action] calcite-action{align-self:center;margin-inline-start:var(--calcite-internal-navigation-navigation-action-margin-inline)}`;
 class Navigation extends LitElement {
   constructor() {
     super(...arguments);
     this.navigationActionRef = createRef();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.mutationObserver = createObserver("mutation", () => {
       this.updateNavigationLogo();
       this.updateNavigationUser();
       this.updateNestedNavigation();
     });
+    this.logoSlotHasElements = false;
+    this.navigationActionSlotHasElements = false;
+    this.primaryContentCenterSlotHasElements = false;
+    this.primaryContentEndSlotHasElements = false;
+    this.primaryContentStartSlotHasElements = false;
+    this.progressSlotHasElement = false;
+    this.secondarySlotHasElements = false;
+    this.tertiarySlotHasElements = false;
+    this.userSlotHasElements = false;
     this.navigationAction = false;
     this.scale = "m";
     this.calciteNavigationActionSelect = createEvent({ cancelable: false });
@@ -121,27 +134,27 @@ class Navigation extends LitElement {
   isPrimaryLevel() {
     return this.el.slot !== SLOTS.navSecondary && this.el.slot !== SLOTS.navTertiary;
   }
-  getOwnedNavigationElements(slotName, selector) {
+  getOwnedNavigationElements(slotName, predicate) {
     const slot = this.el.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
     if (!slot) {
       return [];
     }
-    return slot.assignedElements({ flatten: true }).filter((item) => item.matches(selector));
+    return slot.assignedElements({ flatten: true }).filter(predicate);
   }
   updateNavigationLogo() {
-    this.getOwnedNavigationElements(SLOTS.logo, "calcite-navigation-logo").forEach((item) => {
+    this.getOwnedNavigationElements(SLOTS.logo, isNavigationLogo).forEach((item) => {
       item.scale = this.scale;
     });
   }
   updateNavigationUser() {
-    this.getOwnedNavigationElements(SLOTS.user, "calcite-navigation-user").forEach((item) => {
+    this.getOwnedNavigationElements(SLOTS.user, isNavigationUser).forEach((item) => {
       item.scale = this.scale;
     });
   }
   updateNestedNavigation() {
     const nestedNavigation = [
-      ...this.getOwnedNavigationElements(SLOTS.navSecondary, "calcite-navigation"),
-      ...this.getOwnedNavigationElements(SLOTS.navTertiary, "calcite-navigation")
+      ...this.getOwnedNavigationElements(SLOTS.navSecondary, isNavigation),
+      ...this.getOwnedNavigationElements(SLOTS.navTertiary, isNavigation)
     ];
     nestedNavigation.forEach((item) => {
       if (item !== this.el) {

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

@@ -1,14 +1,21 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { HeadingLevel } from "../functional/Heading.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { IconName } from "../calcite-icon/types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** When `active`, specifies the component's border color. */
+  "--calcite-navigation-accent-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-navigation-background-color": "*";
+  /** Specifies the component's `heading` text color. */
+  "--calcite-navigation-logo-heading-text-color": "*";
+  /** Specifies the component's `description` text color. */
+  "--calcite-navigation-logo-text-color": "*";
+}
+}
 
-/**
- * @cssproperty [--calcite-navigation-accent-color] - When `active`, specifies the component's border color.
- * @cssproperty [--calcite-navigation-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-navigation-logo-heading-text-color] - Specifies the component's `heading` text color.
- * @cssproperty [--calcite-navigation-logo-text-color] - Specifies the component's `description` text color.
- */
 export abstract class NavigationLogo extends LitElement {
   /**
    * When `true`, the component is highlighted.
@@ -17,15 +24,15 @@ export abstract class NavigationLogo extends LitElement {
    */
   accessor active: boolean;
   /** Specifies a description for the component. Displays below the `heading`. */
-  accessor description: string;
+  accessor description: string | undefined;
   /** Specifies the component's heading text. */
-  accessor heading: string;
+  accessor heading: string | undefined;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /** Specifies the URL destination of the component, which can be set as an absolute or relative path. */
-  accessor href: string;
+  accessor href: string | undefined;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -33,21 +40,21 @@ export abstract class NavigationLogo extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * Defines the relationship between the `href` value and the current document.
    *
    * @see [MDN - rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
    */
-  accessor rel: string;
+  accessor rel: string | undefined;
   /**
    * Specifies where to open the linked document defined in the `href` property.
    *
    * @see [MDN - target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
    */
-  accessor target: string;
+  accessor target: string | undefined;
   /** Specifies the `src` to an image. */
-  accessor thumbnail: string;
+  accessor thumbnail: string | undefined;
   /**
    * Sets focus on the component.
    *

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

@@ -4,27 +4,19 @@ import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";
 import { LitElement, safeClassMap, nothing } from "@arcgis/lumina";
 import { H as Heading } from "../../chunks/Heading.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-const CSS = {
-  container: "container",
-  containerLink: "container--link",
-  textContainer: "text-container",
-  heading: "heading",
-  description: "description",
-  image: "image",
-  standalone: "standalone",
-  icon: "icon"
-};
-const styles = css`:host{display:inline-flex}:host([scale=s]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-md);--calcite-internal-navigation-logo-image-size: 1.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-1);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-lg);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-lg)}:host([scale=m]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-lg);--calcite-internal-navigation-logo-image-size: 1.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-md);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-relative-xl);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-xl);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-lg)}:host([scale=l]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-xl);--calcite-internal-navigation-logo-image-size: 2.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-xl);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-relative-2xl);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-lg);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-2xl);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-2xl)}.container{margin:0;display:flex;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1)));border-block-end:2px solid var(--calcite-color-transparent);transition-property:background-color;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.container--link{cursor:pointer;text-decoration-line:none;outline-color:transparent}:host(:focus) .container--link{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))))}.image{block-size:var(--calcite-internal-navigation-logo-image-size)}.image,.icon{margin:0;display:flex;color:var(--calcite-navigation-logo-text-color, var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, var(--calcite-ui-icon-color, inherit))));padding-inline:var(--calcite-internal-navigation-logo-padding-inline)}.image~.icon{padding-inline-start:0px}.image~.text-container,.icon~.text-container{padding-inline-start:0px}:host([href]:hover),:host([href]:focus){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-2)}:host([href]:active){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-3)}:host([active]) .container{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([active]),:host([href]:active){--calcite-internal-navigation-logo-text-color: var(--calcite-color-brand)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;padding-inline:var(--calcite-internal-navigation-logo-padding-inline)}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-logo-heading-text-color, var(--calcite-color-text-1));font-size:var(--calcite-internal-navigation-logo-heading-font-size);padding-block-start:var(--calcite-space-2xs);line-height:var(--calcite-internal-navigation-logo-heading-line-height)}.standalone{font-size:var(--calcite-internal-navigation-logo-heading-standalone-font-size);padding-block-start:0}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);color:var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2));font-size:var(--calcite-internal-navigation-logo-description-font-size);line-height:var(--calcite-internal-navigation-logo-description-line-height)}:host([hidden]){display:none}[hidden]{display:none}`;
+import { u as useFocusable } from "../../chunks/useFocusable.js";
+import { C as CSS } from "../../chunks/resources21.js";
+const styles = css`:host{display:inline-flex}:host([scale=s]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-md);--calcite-internal-navigation-logo-image-size: 1.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-1);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-lg);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-lg)}:host([scale=m]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-lg);--calcite-internal-navigation-logo-image-size: 1.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-md);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-relative-xl);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-base);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-xl);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-lg)}:host([scale=l]){--calcite-internal-navigation-logo-padding-inline: var(--calcite-space-xl);--calcite-internal-navigation-logo-image-size: 2.75rem;--calcite-internal-navigation-logo-heading-font-size: var(--calcite-font-size-relative-xl);--calcite-internal-navigation-logo-heading-standalone-font-size: var(--calcite-font-size-relative-2xl);--calcite-internal-navigation-logo-description-font-size: var(--calcite-font-size-relative-lg);--calcite-internal-navigation-logo-heading-line-height: var(--calcite-space-2xl);--calcite-internal-navigation-logo-description-line-height: var(--calcite-space-2xl)}.container{margin:0;display:flex;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);background-color:var(--calcite-navigation-background-color, var(--calcite-internal-navigation-logo-background-color, var(--calcite-color-foreground-1)));border-block-end:2px solid var(--calcite-color-transparent)}.container--link{cursor:pointer;text-decoration-line:none;outline-color:transparent}:host(:focus) .container--link{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))))}.image{block-size:var(--calcite-internal-navigation-logo-image-size)}.image,.icon{margin:0;display:flex;color:var(--calcite-navigation-logo-text-color, var(--calcite-icon-color, var(--calcite-internal-navigation-logo-text-color, var(--calcite-ui-icon-color, inherit))));padding-inline:var(--calcite-internal-navigation-logo-padding-inline)}.image~.icon{padding-inline-start:0px}.image~.text-container,.icon~.text-container{padding-inline-start:0px}:host([href]:hover),:host([href]:focus){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-2)}:host([href]:active){--calcite-internal-navigation-logo-background-color: var(--calcite-color-foreground-3)}:host([active]) .container{border-block-end-color:var(--calcite-navigation-accent-color, var(--calcite-color-brand))}:host([active]),:host([href]:active){--calcite-internal-navigation-logo-text-color: var(--calcite-color-brand)}.text-container{margin-block-start:.125rem;display:flex;flex-direction:column;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;padding-inline:var(--calcite-internal-navigation-logo-padding-inline)}.heading{margin-inline-start:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-navigation-logo-heading-text-color, var(--calcite-color-text-1));font-size:var(--calcite-internal-navigation-logo-heading-font-size);padding-block-start:var(--calcite-space-2xs);line-height:var(--calcite-internal-navigation-logo-heading-line-height)}.standalone{font-size:var(--calcite-internal-navigation-logo-heading-standalone-font-size);padding-block-start:0}.description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--calcite-color-text-2);color:var(--calcite-navigation-logo-text-color, var(--calcite-color-text-2));font-size:var(--calcite-internal-navigation-logo-description-font-size);line-height:var(--calcite-internal-navigation-logo-description-line-height)}:host([hidden]){display:none}[hidden]{display:none}`;
 class NavigationLogo extends LitElement {
   constructor() {
     super(...arguments);
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
+    this.active = false;
     this.iconFlipRtl = false;
     this.scale = "m";
   }
   static {
-    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], description: 1, heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], href: [3, {}, { reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, rel: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], thumbnail: 1, scale: [3, {}, { reflect: true }] };
+    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], description: 1, heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], href: [3, {}, { reflect: true }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, rel: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], thumbnail: 1, scale: [3, {}, { reflect: true }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };

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-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}`;
 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-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{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-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}`;
 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 {