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

package/dist/components/calcite-radio-button/customElement.d.ts

@@ -1,13 +1,20 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale, Status } from "../interfaces.js";
+import type { Scale, Status } from "../types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-radio-button-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-radio-button-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-radio-button-corner-radius": "*";
+  /** Specifies the component's size. */
+  "--calcite-radio-button-size": "*";
+}
+}
 
-/**
- * @cssproperty [--calcite-radio-button-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-radio-button-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-radio-button-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-radio-button-size] - Specifies the component's size.
- */
 export abstract class RadioButton extends LitElement {
   /**
    * When `true`, the component is checked.
@@ -25,7 +32,11 @@ export abstract class RadioButton extends LitElement {
   accessor form: string | undefined;
   /** Specifies the component's label text. */
   accessor labelText: string | undefined;
-  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   */
   accessor name: string | undefined;
   /**
    * When `true` and the component resides in a form,

package/dist/components/calcite-radio-button/customElement.js

@@ -5,23 +5,24 @@ import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { g as getRoundRobinIndex } from "../../chunks/array.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
 const CSS = {
   container: "container",
   radio: "radio"
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;cursor:pointer}:host .container{position:relative;outline:2px solid transparent;outline-offset:2px;display:flex}:host .radio{cursor:pointer;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;border-radius:var(--calcite-radio-button-corner-radius, var(--calcite-corner-radius-pill));background-color:var(--calcite-radio-button-background-color, var(--calcite-color-foreground-1));box-shadow:inset 0 0 0 var(--calcite-border-width-sm) var(--calcite-radio-button-border-color, var(--calcite-color-border-input))}:host([hovered]) .radio,:host(:not([checked])[focused]:not([disabled])) .radio{box-shadow:inset 0 0 0 var(--calcite-border-width-md) var(--calcite-radio-button-border-color, var(--calcite-color-brand-hover))}:host([hovered]) .radio:active,:host(:not([checked])[focused]:not([disabled])) .radio:active{box-shadow:inset 0 0 0 var(--calcite-border-width-md) var(--calcite-color-brand-press)}:host([focused]) .radio{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([disabled]) .radio{cursor:default;opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hovered][disabled]) .radio{box-shadow:inset 0 0 0 var(--calcite-border-width-sm) var(--calcite-radio-button-border-color, var(--calcite-color-border-input))}:host([scale=s]){--calcite-internal-radio-size: var(--calcite-radio-button-size, var(--calcite-size-fixed-md))}:host([scale=m]){--calcite-internal-radio-size: var(--calcite-radio-button-size, var(--calcite-size-fixed-md-plus))}:host([scale=l]){--calcite-internal-radio-size: var(--calcite-radio-button-size, var(--calcite-size-fixed-lg))}.radio{block-size:var(--calcite-internal-radio-size);inline-size:var(--calcite-internal-radio-size);size:var(--calcite-internal-radio-size)}:host([scale=s][checked]) .radio,:host([hovered][scale=s][checked][disabled]) .radio{box-shadow:inset 0 0 0 var(--calcite-border-width-lg) var(--calcite-radio-button-border-color, var(--calcite-color-brand))}:host([scale=s][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 var(--calcite-border-width-lg) var(--calcite-radio-button-border-color, var(--calcite-color-brand)),0 0 0 2px var(--calcite-radio-button-background-color, var(--calcite-color-foreground-1))}:host([scale=m][checked]) .radio,:host([hovered][scale=m][checked][disabled]) .radio{box-shadow:inset 0 0 0 5px var(--calcite-radio-button-border-color, var(--calcite-color-brand))}:host([scale=m][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 5px var(--calcite-radio-button-border-color, var(--calcite-color-brand)),0 0 0 2px var(--calcite-radio-button-background-color, var(--calcite-color-foreground-1))}:host([scale=l][checked]) .radio,:host([hovered][scale=l][checked][disabled]) .radio{box-shadow:inset 0 0 0 6px var(--calcite-radio-button-border-color, var(--calcite-color-brand))}:host([scale=l][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 6px var(--calcite-radio-button-border-color, var(--calcite-color-brand)),0 0 0 2px var(--calcite-radio-button-background-color, var(--calcite-color-foreground-1))}:host([status=invalid]:not([checked])){--calcite-radio-button-border-color: var(--calcite-color-status-danger)}:host([status=invalid]:not([checked]):focus) .radio{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}@media(forced-colors:active){:host([checked]) .radio:after,:host([checked][disabled]) .radio:after{content:"";inline-size:var(--calcite-internal-radio-size);block-size:var(--calcite-internal-radio-size);background-color:CanvasText;display:block}}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;cursor:pointer}:host .container{position:relative;outline:2px solid transparent;outline-offset:2px;display:flex}:host .radio{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;cursor:pointer;outline-color:transparent;border-radius:var(--calcite-radio-button-corner-radius, var(--calcite-corner-radius-pill));background-color:var(--calcite-radio-button-background-color, var(--calcite-color-foreground-1));box-shadow:inset 0 0 0 var(--calcite-border-width-sm) var(--calcite-radio-button-border-color, var(--calcite-color-border-input))}:host([hovered]) .radio,:host(:not([checked])[focused]:not([disabled])) .radio{box-shadow:inset 0 0 0 var(--calcite-border-width-md) var(--calcite-radio-button-border-color, var(--calcite-color-brand-hover))}:host([hovered]) .radio:active,:host(:not([checked])[focused]:not([disabled])) .radio:active{box-shadow:inset 0 0 0 var(--calcite-border-width-md) var(--calcite-color-brand-press)}:host([focused]) .radio{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([disabled]) .radio{cursor:default;opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hovered][disabled]) .radio{box-shadow:inset 0 0 0 var(--calcite-border-width-sm) var(--calcite-radio-button-border-color, var(--calcite-color-border-input))}:host([scale=s]){--calcite-internal-radio-size: var(--calcite-radio-button-size, var(--calcite-size-fixed-md))}:host([scale=m]){--calcite-internal-radio-size: var(--calcite-radio-button-size, var(--calcite-size-fixed-md-plus))}:host([scale=l]){--calcite-internal-radio-size: var(--calcite-radio-button-size, var(--calcite-size-fixed-lg))}.radio{block-size:var(--calcite-internal-radio-size);inline-size:var(--calcite-internal-radio-size);size:var(--calcite-internal-radio-size)}:host([scale=s][checked]) .radio,:host([hovered][scale=s][checked][disabled]) .radio{box-shadow:inset 0 0 0 var(--calcite-border-width-lg) var(--calcite-radio-button-border-color, var(--calcite-color-brand))}:host([scale=s][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 var(--calcite-border-width-lg) var(--calcite-radio-button-border-color, var(--calcite-color-brand)),0 0 0 2px var(--calcite-radio-button-background-color, var(--calcite-color-foreground-1))}:host([scale=m][checked]) .radio,:host([hovered][scale=m][checked][disabled]) .radio{box-shadow:inset 0 0 0 5px var(--calcite-radio-button-border-color, var(--calcite-color-brand))}:host([scale=m][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 5px var(--calcite-radio-button-border-color, var(--calcite-color-brand)),0 0 0 2px var(--calcite-radio-button-background-color, var(--calcite-color-foreground-1))}:host([scale=l][checked]) .radio,:host([hovered][scale=l][checked][disabled]) .radio{box-shadow:inset 0 0 0 6px var(--calcite-radio-button-border-color, var(--calcite-color-brand))}:host([scale=l][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 6px var(--calcite-radio-button-border-color, var(--calcite-color-brand)),0 0 0 2px var(--calcite-radio-button-background-color, var(--calcite-color-foreground-1))}:host([status=invalid]:not([checked])){--calcite-radio-button-border-color: var(--calcite-color-status-danger)}:host([status=invalid]:not([checked]):focus) .radio{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}@media(forced-colors:active){:host([checked]) .radio:after,:host([checked][disabled]) .radio:after{content:"";inline-size:var(--calcite-internal-radio-size);block-size:var(--calcite-internal-radio-size);background-color:CanvasText;display:block}}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}:host([hidden]){display:none}[hidden]{display:none}`;
 class RadioButton extends LitElement {
   constructor() {
     super();
     this.containerRef = createRef();
     this.direction = useDirection();
     this.formSupport = useForm({ inputType: "radio" })(this);
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.checked = false;
     this.disabled = false;
@@ -34,6 +35,7 @@ class RadioButton extends LitElement {
     this.calciteInternalRadioButtonCheckedChange = createEvent({ cancelable: false });
     this.calciteInternalRadioButtonFocus = createEvent({ cancelable: false });
     this.calciteRadioButtonChange = createEvent({ cancelable: false });
+    useLabel(this);
     this.listen("pointerenter", this.pointerEnterHandler);
     this.listen("pointerleave", this.pointerLeaveHandler);
     this.listen("click", this.clickHandler);
@@ -62,7 +64,6 @@ class RadioButton extends LitElement {
     if (this.name) {
       this.checkLastRadioButton();
     }
-    connectLabel(this);
     this.updateTabIndexOfOtherRadioButtonsInGroup();
     super.connectedCallback();
   }
@@ -84,7 +85,6 @@ class RadioButton extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    disconnectLabel(this);
     this.updateTabIndexOfOtherRadioButtonsInGroup();
   }
   checkedChanged(newChecked) {
@@ -214,6 +214,7 @@ class RadioButton extends LitElement {
         currentIndex = index;
         return true;
       }
+      return false;
     });
     switch (adjustedKey) {
       case "ArrowLeft":

package/dist/components/calcite-radio-button-group/customElement.d.ts

@@ -1,12 +1,19 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Layout, Scale, Status } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Layout, Scale, Status } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 import type { RadioButton } from "../calcite-radio-button/customElement.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the space between slotted components in the component. */
+  "--calcite-radio-button-group-gap": "*";
+  /** Specifies the margin spacing at the top of the `calcite-input-message`. */
+  "--calcite-radio-button-input-message-spacing": "*";
+}
+}
+
 /**
- * @cssproperty [--calcite-radio-button-group-gap] - Specifies the space between slotted components in the component.
- * @cssproperty [--calcite-radio-button-input-message-spacing] - Specifies the margin spacing at the top of the `calcite-input-message`.
  * @slot  - A slot for adding `calcite-radio-button`s.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  */
@@ -25,10 +32,16 @@ export abstract class RadioButtonGroup extends LitElement {
    * @default "horizontal"
    */
   accessor layout: Extract<"horizontal" | "vertical", Layout>;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { required?: string; };
   /**
-   * Specifies the name of the component. Required to pass the component's `value` on form submission.
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { required?: string | undefined; };
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
    *
    * @required
    */

package/dist/components/calcite-radio-button-group/customElement.js

@@ -6,7 +6,7 @@ import { c as createObserver } from "../../chunks/observers.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { c as clearValidationMessage, d as displayValidationMessage } from "../../chunks/useForm.js";
 const CSS = {
   itemWrapper: "item-wrapper"
@@ -20,9 +20,10 @@ class RadioButtonGroup extends LitElement {
     super();
     this.messages = useT9n();
     this.mutationObserver = createObserver("mutation", () => this.passPropsToRadioButtons());
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
+    this._disabled = false;
+    this.disabledWasSet = false;
     this.radioButtons = [];
-    this.disabled = false;
     this.layout = "horizontal";
     this.required = false;
     this.scale = "m";
@@ -38,17 +39,25 @@ class RadioButtonGroup extends LitElement {
     });
   }
   static {
-    this.properties = { radioButtons: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], labelText: 1, layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectedItem: [0, {}, { attribute: false }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1 };
+    this.properties = { radioButtons: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], labelText: 1, layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectedItem: [0, {}, { attribute: false }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1 };
   }
   static {
     this.styles = styles;
   }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(value) {
+    this._disabled = value;
+    this.disabledWasSet = true;
+  }
   async setFocus(options) {
-    return this.focusSetter(() => this.selectedItem && !this.selectedItem.disabled ? this.selectedItem : this.getFocusableRadioButton(), options);
+    return this.focusSetter(() => {
+      return this.selectedItem && !this.selectedItem.disabled ? this.selectedItem : this.getFocusableRadioButton();
+    }, options);
   }
   connectedCallback() {
     super.connectedCallback();
-    this.passPropsToRadioButtons();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
   willUpdate(changes) {
@@ -74,17 +83,15 @@ class RadioButtonGroup extends LitElement {
   passPropsToRadioButtons() {
     this.radioButtons = Array.from(this.el.querySelectorAll("calcite-radio-button"));
     this.selectedItem = Array.from(this.radioButtons).reverse().find((radioButton) => radioButton.checked) ?? null;
-    if (this.radioButtons.length > 0) {
-      this.radioButtons.forEach((radioButton) => {
-        if (this.hasUpdated) {
-          radioButton.disabled = this.disabled || radioButton.disabled;
-        }
-        radioButton.name = this.name;
-        radioButton.required = this.required;
-        radioButton.scale = this.scale;
-        radioButton.status = this.status;
-      });
-    }
+    this.radioButtons.forEach((radioButton) => {
+      if (this.disabledWasSet) {
+        radioButton.disabled = this.disabled;
+      }
+      radioButton.name = this.name;
+      radioButton.required = this.required;
+      radioButton.scale = this.scale;
+      radioButton.status = this.status;
+    });
   }
   getFocusableRadioButton() {
     return this.radioButtons.find((radiobutton) => !radiobutton.disabled);

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

@@ -1,18 +1,28 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale, Status } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Scale, Status } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
-/**
- * @cssproperty [--calcite-rating-spacing] - Specifies the amount of left and right margin spacing between each item.
- * @cssproperty [--calcite-rating-color-hover] - Specifies the component's item color when hovered.
- * @cssproperty [--calcite-rating-color-press] - Specifies the component's item color when active.
- * @cssproperty [--calcite-rating-color] - Specifies the component's item color.
- * @cssproperty [--calcite-rating-average-color] - When `average` is set, specifies the component's item color.
- * @cssproperty [--calcite-rating-average-text-color] - When `average` is set, specifies the component's `average` text color.
- * @cssproperty [--calcite-rating-count-text-color] - Specifies the component's text color for `count`.
- * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the amount of left and right margin spacing between each item. */
+  "--calcite-rating-spacing": "*";
+  /** Specifies the component's item color when hovered. */
+  "--calcite-rating-color-hover": "*";
+  /** Specifies the component's item color when active. */
+  "--calcite-rating-color-press": "*";
+  /** Specifies the component's item color. */
+  "--calcite-rating-color": "*";
+  /** When `average` is set, specifies the component's item color. */
+  "--calcite-rating-average-color": "*";
+  /** When `average` is set, specifies the component's `average` text color. */
+  "--calcite-rating-average-text-color": "*";
+  /** Specifies the component's text color for `count`. */
+  "--calcite-rating-count-text-color": "*";
+}
+}
+
+/** @slot [label-content] - A slot for rendering content next to the component's `labelText`. */
 export abstract class Rating extends LitElement {
   /** Specifies a cumulative average from previous ratings to display. */
   accessor average: number | undefined;
@@ -28,13 +38,21 @@ export abstract class Rating extends LitElement {
   accessor form: string | undefined;
   /** Specifies the component's label text. */
   accessor labelText: string | undefined;
-  /** 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: {
-      rating?: string;
-      required?: string;
-      stars?: string;
+      rating?: string | undefined;
+      required?: string | undefined;
+      stars?: string | undefined;
   };
-  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   */
   accessor name: string | undefined;
   /**
    * When `true`, the component's value can be read, but cannot be modified.

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

@@ -4,11 +4,12 @@ import { live } from "lit/directives/live.js";
 import { html, css } from "lit";
 import { safeClassMap, LitElement, createEvent, stringOrBoolean, nothing, safeStyleMap } from "@arcgis/lumina";
 import { g as guid } from "../../chunks/guid.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
 const StarIcon = ({ full, scale, partial }) => html`<calcite-icon class=${safeClassMap(partial ? void 0 : "icon")} .icon=${full ? "star-f" : "star"} .scale=${scale}></calcite-icon>`;
@@ -26,7 +27,7 @@ const IDS = {
   validationMessage: "validationMessage",
   host: (id) => `${idPrefix}-${id}`
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([read-only]) *,:host([disabled]) *,:host([read-only]) ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;align-items:center;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){min-block-size:var(--calcite-space-2xl);--calcite-internal-rating-spacing: .25rem}:host([scale=m]){min-block-size:var(--calcite-space-3xl);--calcite-internal-rating-spacing: .5rem}:host([scale=l]){min-block-size:var(--calcite-space-4xl);--calcite-internal-rating-spacing: .75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing))}.wrapper{display:inline-block}.star{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;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-rating-color, var(--calcite-color-border-input))}.star:hover{color:var(--calcite-rating-color-hover, var(--calcite-color-brand-hover))}.star:active{color:var(--calcite-rating-color-press, var(--calcite-color-brand-press))}.star:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.average,.fraction{color:var(--calcite-rating-average-color, var(--calcite-color-status-warning))}.hovered,.selected{color:var(--calcite-rating-color, var(--calcite-color-brand))}.fraction{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;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}calcite-chip{pointer-events:none;cursor:default}.number--average{font-weight:700;color:var(--calcite-rating-average-text-color)}.number--count{color:var(--calcite-rating-count-text-color, var(--calcite-color-text-2));font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing))}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([read-only]) *,:host([disabled]) *,:host([read-only]) ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;align-items:center;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){min-block-size:var(--calcite-space-2xl);--calcite-internal-rating-spacing: .25rem}:host([scale=m]){min-block-size:var(--calcite-space-3xl);--calcite-internal-rating-spacing: .5rem}:host([scale=l]){min-block-size:var(--calcite-space-4xl);--calcite-internal-rating-spacing: .75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing))}.wrapper{display:inline-block}.star{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;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-rating-color, var(--calcite-color-border-input))}.star:hover{color:var(--calcite-rating-color-hover, var(--calcite-color-brand-hover))}.star:active{color:var(--calcite-rating-color-press, var(--calcite-color-brand-press))}.star:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.average,.fraction{color:var(--calcite-rating-average-color, var(--calcite-color-status-warning))}.hovered,.selected{color:var(--calcite-rating-color, var(--calcite-color-brand))}.fraction{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;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}calcite-chip{pointer-events:none;cursor:default}.number--average{font-weight:700;color:var(--calcite-rating-average-text-color)}.number--count{color:var(--calcite-rating-count-text-color, var(--calcite-color-text-2));font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing, var(--calcite-internal-rating-spacing))}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}:host([hidden]){display:none}[hidden]{display:none}`;
 class Rating extends LitElement {
   constructor() {
     super();
@@ -43,7 +44,7 @@ class Rating extends LitElement {
     this.max = 5;
     this._value = 0;
     this.messages = useT9n({ blocking: true });
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.readOnly = false;
@@ -52,12 +53,13 @@ class Rating extends LitElement {
     this.showChip = false;
     this.status = "idle";
     this.calciteRatingChange = createEvent({ cancelable: false });
+    useLabel(this);
     this.listen("keydown", this.handleHostKeyDown);
     this.listen("pointerout", this.handleRatingPointerOut);
     this.listen("pointerover", this.handleRatingPointerOver);
   }
   static {
-    this.properties = { hoverValue: [16, {}, { state: true }], average: [11, {}, { reflect: true, type: Number }], count: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], showChip: [7, {}, { reflect: true, type: Boolean }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: [11, {}, { reflect: true, type: Number }] };
+    this.properties = { hoverValue: [16, {}, { state: true }], average: [11, {}, { reflect: true, type: Number }], count: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], labelText: 1, messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], showChip: [7, {}, { reflect: true, type: Boolean }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: [11, {}, { reflect: true, type: Number }] };
   }
   static {
     this.formAssociated = true;
@@ -80,10 +82,6 @@ class Rating extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.el, options);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    connectLabel(this);
-  }
   async load() {
     this.requestUpdate("value");
   }
@@ -118,10 +116,6 @@ class Rating extends LitElement {
   loaded() {
     this.labelElements = Array.from(this.renderRoot.querySelectorAll("label"));
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    disconnectLabel(this);
-  }
   handleValueUpdate(newValue) {
     this.hoverValue = newValue;
     if (this.emit) {

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

@@ -1,10 +1,14 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
-/**
- * @cssproperty [--calcite-scrim-background] - Specifies the component's background color.
- * @slot  - A slot for adding custom content, primarily loading information.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-scrim-background": "*";
+}
+}
+
+/** @slot  - A slot for adding custom content, primarily loading information. */
 export abstract class Scrim extends LitElement {
   /**
    * When `true`, a busy indicator is displayed.
@@ -12,6 +16,10 @@ export abstract class Scrim extends LitElement {
    * @default false
    */
   accessor loading: boolean;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { loading?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { loading?: string | undefined; };
 }

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

@@ -4,7 +4,7 @@ import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { m as slotChangeHasContent } from "../../chunks/dom.js";
+import { r as slotChangeHasContent } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const CSS = {
   scrim: "scrim",

package/dist/components/calcite-segmented-control/customElement.d.ts

@@ -1,11 +1,19 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Appearance, Layout, Scale, Status, Width } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Appearance, Layout, Scale, Status, Width } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 import type { SegmentedControlItem } from "../calcite-segmented-control-item/customElement.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border color. */
+  "--calcite-segmented-control-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-segmented-control-corner-radius": "*";
+}
+}
+
 /**
- * @cssproperty [--calcite-segmented-control-border-color] - Specifies the component's border color.
  * @slot  - A slot for adding `calcite-segmented-control-item`s.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  */
@@ -13,6 +21,7 @@ export abstract class SegmentedControl extends LitElement {
   /**
    * Specifies the appearance style of the component.
    *
+   * @deprecated in v5.2.0, removal target v6.0.0 - use the `selectionAppearance` property coming in v6.0.0.
    * @default "solid"
    */
   accessor appearance: Extract<"outline" | "outline-fill" | "solid", Appearance>;
@@ -23,19 +32,27 @@ export abstract class SegmentedControl extends LitElement {
    */
   accessor disabled: boolean;
   /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
-  accessor form: string;
+  accessor form: string | undefined;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * Defines the layout of the component.
    *
    * @default "horizontal"
    */
   accessor layout: Extract<"horizontal" | "vertical", Layout>;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { required?: string; };
-  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { required?: string | undefined; };
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   */
+  accessor name: string | undefined;
   /**
    * When `true` and the component resides in a form,
    * the component must have a value in order for the form to submit.
@@ -58,9 +75,9 @@ export abstract class SegmentedControl extends LitElement {
    */
   accessor status: Status;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *
@@ -70,7 +87,9 @@ export abstract class SegmentedControl extends LitElement {
   /** The component's `selectedItem` value. */
   accessor value: string;
   /**
-   * 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"
    */