@esri/calcite-components 1.7.0-next.2 → 1.7.0-next.21

package/dist/esm/calcite-pick-list_3.entry.js

@@ -1,23 +1,24 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
-import { r as registerInstance, c as createEvent, h, a as getElement, F as Fragment } from './index-4c8dc570.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-aa38fd27.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-76dd29b3.js';
-import { c as createObserver } from './observers-0611100c.js';
-import { m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, c as getItemData, k as keyDownHandler, i as initialize, f as initializeObserver, l as cleanUpObserver, j as handleInitialFilter, r as removeItem, o as calciteListItemChangeHandler, p as calciteInternalListItemValueChangeHandler, n as calciteListFocusOutHandler, q as setUpItems, t as setFocus, I as ICON_TYPES, L as List, u as SLOTS, v as CSS, w as ICONS, C as CSS$1, S as SLOTS$1 } from './resources-7428e3fc.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-bee7f08e.js';
-import { h as getSlotted, t as toAriaBoolean } from './dom-c70e4c69.js';
-import { H as Heading, c as constrainHeadingLevel } from './Heading-a5cabffa.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-b9b2f130.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-3fd6411d.js';
-import './array-8599f924.js';
-import './debounce-e73108b0.js';
-import './guid-503fe646.js';
-import './resources-ee705ba9.js';
-import './key-4cc3e77c.js';
+import { r as registerInstance, c as createEvent, h, a as getElement, F as Fragment } from './index-871aa909.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-6ba1e887.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-5c45a3f7.js';
+import { c as createObserver } from './observers-3edf63eb.js';
+import { m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, c as getItemData, k as keyDownHandler, i as initialize, f as initializeObserver, l as cleanUpObserver, j as handleInitialFilter, r as removeItem, o as calciteListItemChangeHandler, p as calciteInternalListItemValueChangeHandler, n as calciteListFocusOutHandler, q as setUpItems, t as setFocus, I as ICON_TYPES, L as List, u as SLOTS, v as CSS, w as ICONS, C as CSS$1, S as SLOTS$1 } from './resources-ddafe2a5.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-6741e530.js';
+import { h as getSlotted, t as toAriaBoolean } from './dom-73f38fd2.js';
+import { H as Heading, c as constrainHeadingLevel } from './Heading-93b1e7f2.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-7ed1373b.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-e1e6bb16.js';
+import './browser-b5ea92bc.js';
+import './array-550e46d3.js';
+import './debounce-abae3138.js';
+import './guid-ec636fe3.js';
+import './resources-d95e2c66.js';
+import './key-0646f194.js';
 
 const pickListCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;flex-grow:1;flex-direction:column;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}:host *{box-sizing:border-box}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([filter-enabled]) header{margin-block-end:0.25rem;display:flex;align-items:stretch;justify-content:flex-end;background-color:var(--calcite-ui-foreground-1);--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([filter-enabled]) header.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index)}calcite-filter{margin-block-end:0px}:host([loading][disabled]){min-block-size:2rem}:host([hidden]){display:none}[hidden]{display:none}";
 

package/dist/esm/calcite-popover.entry.js

@@ -1,23 +1,23 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-4c8dc570.js';
-import { f as filterComputedPlacements, c as connectFloatingUI, b as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui-d789b576.js';
-import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent-5d9c8243.js';
-import { i as isPrimaryPointerButton, t as toAriaBoolean, f as focusFirstTabbable, q as queryElementRoots } from './dom-c70e4c69.js';
-import { g as guid } from './guid-503fe646.js';
-import { o as onToggleOpenCloseComponent } from './openCloseComponent-ebbb5cb5.js';
-import { H as Heading } from './Heading-a5cabffa.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-b9b2f130.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-3fd6411d.js';
-import { i as isActivationKey } from './key-4cc3e77c.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-76dd29b3.js';
-import { c as createObserver } from './observers-0611100c.js';
-import { F as FloatingArrow } from './FloatingArrow-aaa77fde.js';
-import './debounce-e73108b0.js';
-import './resources-ee705ba9.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-871aa909.js';
+import { f as filterComputedPlacements, c as connectFloatingUI, b as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui-567d4710.js';
+import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent-fde6dc21.js';
+import { i as isPrimaryPointerButton, t as toAriaBoolean, f as focusFirstTabbable, q as queryElementRoots } from './dom-73f38fd2.js';
+import { g as guid } from './guid-ec636fe3.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-a427eef3.js';
+import { H as Heading } from './Heading-93b1e7f2.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-7ed1373b.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-e1e6bb16.js';
+import { i as isActivationKey } from './key-0646f194.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-5c45a3f7.js';
+import { c as createObserver } from './observers-3edf63eb.js';
+import { F as FloatingArrow } from './FloatingArrow-60f775a1.js';
+import './debounce-abae3138.js';
+import './resources-d95e2c66.js';
 
 const CSS = {
   container: "container",

package/dist/esm/calcite-progress.entry.js

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
-import { r as registerInstance, h, a as getElement } from './index-4c8dc570.js';
-import { g as getElementDir } from './dom-c70e4c69.js';
-import { C as CSS_UTILITY } from './resources-ee705ba9.js';
-import './guid-503fe646.js';
+import { r as registerInstance, h, a as getElement } from './index-871aa909.js';
+import { g as getElementDir } from './dom-73f38fd2.js';
+import { C as CSS_UTILITY } from './resources-d95e2c66.js';
+import './guid-ec636fe3.js';
 
 const progressCss = ":host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px}.track{z-index:var(--calcite-app-z-index);inline-size:100%;overflow:hidden;background:var(--calcite-ui-border-3)}.bar{z-index:var(--calcite-app-z-index);background-color:var(--calcite-ui-brand)}@media (forced-colors: active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{inline-size:20%;animation:looping-progress-bar-ani calc(var(--calcite-internal-animation-timing-medium) / var(--calcite-internal-duration-factor) * 11 / var(--calcite-internal-duration-factor)) linear infinite}.indeterminate.calcite--rtl{animation-name:looping-progress-bar-ani-rtl}.reversed{animation-direction:reverse}.text{padding-inline:0px;padding-block:1rem 0px;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2)}@keyframes looping-progress-bar-ani{0%{transform:translate3d(-100%, 0, 0)}50%{inline-size:40%}100%{transform:translate3d(600%, 0, 0)}}@keyframes looping-progress-bar-ani-rtl{0%{transform:translate3d(100%, 0, 0)}50%{inline-size:40%}100%{transform:translate3d(-600%, 0, 0)}}:host([hidden]){display:none}[hidden]{display:none}";
 

package/dist/esm/calcite-radio-button-group.entry.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-4c8dc570.js';
-import { c as createObserver } from './observers-0611100c.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-76dd29b3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-871aa909.js';
+import { c as createObserver } from './observers-3edf63eb.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-5c45a3f7.js';
 
 const radioButtonGroupCss = ":host{display:flex;max-inline-size:100vw}:host([layout=horizontal]){flex-direction:row;flex-wrap:wrap}:host([layout=horizontal][scale=s]){gap:1rem}:host([layout=horizontal][scale=m]){gap:1.25rem}:host([layout=horizontal][scale=l]){gap:1.5rem}:host([layout=vertical]){flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}";
 

package/dist/esm/calcite-radio-button.entry.js

@@ -1,17 +1,18 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-4c8dc570.js';
-import { g as getRoundRobinIndex } from './array-8599f924.js';
-import { g as getElementDir, d as focusElement, t as toAriaBoolean } from './dom-c70e4c69.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-59a488e0.js';
-import { g as guid } from './guid-503fe646.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-aa38fd27.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-389bf8aa.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-76dd29b3.js';
-import './resources-ee705ba9.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-871aa909.js';
+import { g as getRoundRobinIndex } from './array-550e46d3.js';
+import { g as getElementDir, d as focusElement, t as toAriaBoolean } from './dom-73f38fd2.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-a7df218f.js';
+import { g as guid } from './guid-ec636fe3.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-6ba1e887.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-30fd68f0.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-5c45a3f7.js';
+import './resources-d95e2c66.js';
+import './browser-b5ea92bc.js';
 
 const CSS = {
   container: "container",

package/dist/esm/calcite-rating.entry.js

@@ -1,20 +1,21 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
-import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-4c8dc570.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-59a488e0.js';
-import { g as guid } from './guid-503fe646.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-aa38fd27.js';
-import { c as connectLabel, d as disconnectLabel } from './label-389bf8aa.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-76dd29b3.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-b9b2f130.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-3fd6411d.js';
-import './dom-c70e4c69.js';
-import './resources-ee705ba9.js';
-import './key-4cc3e77c.js';
-import './observers-0611100c.js';
+import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-871aa909.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-a7df218f.js';
+import { g as guid } from './guid-ec636fe3.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-6ba1e887.js';
+import { c as connectLabel, d as disconnectLabel } from './label-30fd68f0.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-5c45a3f7.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-7ed1373b.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-e1e6bb16.js';
+import { f as focusFirstTabbable } from './dom-73f38fd2.js';
+import './browser-b5ea92bc.js';
+import './key-0646f194.js';
+import './observers-3edf63eb.js';
+import './resources-d95e2c66.js';
 
 const StarIcon = ({ full, scale, partial }) => (h("calcite-icon", { ...{
     class: partial ? undefined : "icon",
@@ -22,7 +23,7 @@ const StarIcon = ({ full, scale, partial }) => (h("calcite-icon", { ...{
     scale,
   } }));
 
-const ratingCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-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:-moz-fit-content;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){block-size:1.5rem;--calcite-rating-spacing-unit:0.25rem}:host([scale=m]){block-size:2rem;--calcite-rating-spacing-unit:0.5rem}:host([scale=l]){block-size:2.75rem;--calcite-rating-spacing-unit:0.75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing-unit)}.wrapper{display:inline-block}.star{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-ui-border-input)}.focused{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.average,.fraction{color:var(--calcite-ui-warning)}.hovered,.selected{color:var(--calcite-ui-brand)}.fraction{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;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:bold}.number--count{color:var(--calcite-ui-text-2);font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing-unit)}.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}::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 ratingCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-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:-moz-fit-content;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){block-size:1.5rem;--calcite-rating-spacing-unit:0.25rem}:host([scale=m]){block-size:2rem;--calcite-rating-spacing-unit:0.5rem}:host([scale=l]){block-size:2.75rem;--calcite-rating-spacing-unit:0.75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing-unit)}.wrapper{display:inline-block}.star{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-ui-border-input)}.star:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.average,.fraction{color:var(--calcite-ui-warning)}.hovered,.selected{color:var(--calcite-ui-brand)}.fraction{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;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:bold}.number--count{color:var(--calcite-ui-text-2);font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing-unit)}.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}::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 Rating = class {
   constructor(hostRef) {
@@ -34,29 +35,12 @@ const Rating = class {
     this.handleRatingPointerOut = () => {
       this.isKeyboardInteraction = true;
       this.hoverValue = null;
-      this.focusValue = null;
-      this.hasFocus = false;
-    };
-    this.handleRatingFocusIn = () => {
-      const selectedInput = this.value > 0 ? this.value - 1 : 0;
-      const focusInput = this.inputRefs[selectedInput];
-      const focusValue = Number(focusInput.value);
-      focusInput.select();
-      this.focusValue = focusValue;
-      this.hoverValue = focusValue;
-      this.hasFocus = true;
-    };
-    this.handleRatingFocusLeave = () => {
-      this.focusValue = null;
-      this.hoverValue = null;
-      this.hasFocus = false;
     };
     this.handleHostKeyDown = () => {
       this.isKeyboardInteraction = true;
     };
-    this.handleInputKeyDown = (event) => {
-      const target = event.currentTarget;
-      const inputVal = Number(target.value);
+    this.handleLabelKeyDown = (event) => {
+      const inputValue = this.getValueFromLabelEvent(event);
       const key = event.key;
       const numberKey = key == " " ? undefined : Number(key);
       this.emit = true;
@@ -64,20 +48,20 @@ const Rating = class {
         switch (key) {
           case "Enter":
           case " ":
-            this.value = !this.required && this.value === inputVal ? 0 : inputVal;
+            this.value = !this.required && this.value === inputValue ? 0 : inputValue;
             break;
           case "ArrowLeft":
-            this.value = inputVal - 1;
+            this.value = this.getPreviousRatingValue(inputValue);
+            this.updateFocus();
+            event.preventDefault();
             break;
           case "ArrowRight":
-            this.value = inputVal + 1;
+            this.value = this.getNextRatingValue(inputValue);
+            this.updateFocus();
+            event.preventDefault();
             break;
           case "Tab":
-            if (this.hasFocus) {
-              this.hasFocus = false;
-              this.focusValue = null;
-              this.hoverValue = null;
-            }
+            this.hoverValue = null;
         }
       }
       else {
@@ -87,33 +71,42 @@ const Rating = class {
         else if (this.required && numberKey > 0 && numberKey <= this.max) {
           this.value = numberKey;
         }
+        this.updateFocus();
       }
     };
     this.handleInputChange = (event) => {
       if (this.isKeyboardInteraction === true) {
         const inputVal = Number(event.target["value"]);
-        this.focusValue = inputVal;
         this.hoverValue = inputVal;
         this.value = inputVal;
       }
     };
     this.handleLabelPointerOver = (event) => {
-      const target = event.currentTarget;
-      const newPointerValue = Number(target.firstChild["value"] || 0);
-      this.hoverValue = newPointerValue;
-      this.focusValue = null;
+      this.hoverValue = this.getValueFromLabelEvent(event);
     };
     this.handleLabelPointerDown = (event) => {
       const target = event.currentTarget;
-      const inputVal = Number(target.firstChild["value"] || 0);
-      this.focusValue = null;
-      this.hoverValue = null;
+      const inputValue = this.getValueFromLabelEvent(event);
+      this.hoverValue = inputValue;
       this.emit = true;
-      this.value = !this.required && this.value === inputVal ? 0 : inputVal;
+      this.value = !this.required && this.value === inputValue ? 0 : inputValue;
+      target.focus();
+    };
+    this.handleLabelClick = (event) => {
+      //preventing pointerdown event will supress any compatability mouse events except for click event.
+      event.preventDefault();
+    };
+    this.handleLabelFocus = (event) => {
+      const inputValue = this.getValueFromLabelEvent(event);
+      this.hoverValue = inputValue;
+    };
+    this.setLabelEl = (el) => {
+      this.labelElements.push(el);
     };
     this.emit = false;
     this.guid = `calcite-ratings-${guid()}`;
     this.isKeyboardInteraction = true;
+    this.labelElements = [];
     this.max = 5;
     this.average = undefined;
     this.count = undefined;
@@ -130,15 +123,12 @@ const Rating = class {
     this.effectiveLocale = "";
     this.defaultMessages = undefined;
     this.hoverValue = undefined;
-    this.focusValue = undefined;
-    this.hasFocus = undefined;
   }
   onMessagesChange() {
     /* wired up by t9n util */
   }
   handleValueUpdate(newValue) {
     this.hoverValue = newValue;
-    this.focusValue = newValue;
     if (this.emit) {
       this.calciteRatingChange.emit();
     }
@@ -162,39 +152,28 @@ const Rating = class {
   async componentWillLoad() {
     await setUpMessages(this);
     setUpLoadableComponent(this);
-    this.inputRefs = Array(this.max);
   }
   componentWillRender() {
     this.starsMap = Array.from({ length: this.max }, (_, i) => {
       const value = i + 1;
-      const average = !this.focusValue &&
-        !this.hoverValue &&
-        this.average &&
-        !this.value &&
-        value <= this.average;
+      const average = !this.hoverValue && this.average && !this.value && value <= this.average;
       const checked = value === this.value;
-      const focused = this.isKeyboardInteraction && this.hasFocus && this.focusValue === value;
       const fraction = this.average && this.average + 1 - value;
       const hovered = value <= this.hoverValue;
       const id = `${this.guid}-${value}`;
-      const partial = !this.focusValue &&
-        !this.hoverValue &&
-        !this.value &&
-        !hovered &&
-        fraction > 0 &&
-        fraction < 1;
+      const partial = !this.hoverValue && !this.value && !hovered && fraction > 0 && fraction < 1;
       const selected = this.value >= value;
+      const tabIndex = this.getTabIndex(value);
       return {
         average,
         checked,
-        focused,
         fraction,
         hovered,
         id,
-        idx: i,
         partial,
         selected,
         value,
+        tabIndex,
       };
     });
   }
@@ -212,21 +191,16 @@ const Rating = class {
     updateHostInteraction(this);
   }
   render() {
-    return (h(Host, { onBlur: this.handleRatingFocusLeave, onFocus: this.handleRatingFocusIn, onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, h("span", { class: "wrapper" }, h("fieldset", { class: "fieldset", disabled: this.disabled }, h("legend", { class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, focused, fraction, hovered, id, idx, partial, selected, value, }) => {
+    return (h(Host, { onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, h("span", { class: "wrapper" }, h("fieldset", { class: "fieldset", disabled: this.disabled }, h("legend", { class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, fraction, hovered, id, partial, selected, value, tabIndex }) => {
       return (h("label", { class: {
           star: true,
-          focused,
           selected,
           hovered,
           average,
           partial,
-        }, htmlFor: id, onPointerDown: this.handleLabelPointerDown, onPointerOver: this.handleLabelPointerOver }, h("input", { checked: checked, class: "visually-hidden", disabled: this.disabled || this.readOnly, id: id, name: this.guid, onChange: this.handleInputChange, onKeyDown: this.handleInputKeyDown, type: "radio", value: value,
-        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-        ref: (el) => {
-          this.inputRefs[idx] = el;
-          return ((value === 1 || value === this.value) &&
-            (this.inputFocusRef = el));
-        } }), h(StarIcon, { full: selected || average, scale: this.scale }), partial && (h("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, h(StarIcon, { full: true, partial: true, scale: this.scale }))), h("span", { class: "visually-hidden" }, this.messages.stars.replace("{num}", `${value}`))));
+        }, "data-value": value, htmlFor: id, onClick: this.handleLabelClick, onFocus: this.handleLabelFocus, onKeyDown: this.handleLabelKeyDown, onPointerDown: this.handleLabelPointerDown, onPointerOver: this.handleLabelPointerOver, tabIndex: tabIndex,
+        // eslint-disable-next-line react/jsx-sort-props
+        ref: this.setLabelEl }, h("input", { checked: checked, class: "visually-hidden", disabled: this.disabled || this.readOnly, id: id, name: this.guid, onChange: this.handleInputChange, tabIndex: -1, type: "radio", value: value }), h(StarIcon, { full: selected || average, scale: this.scale }), partial && (h("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, h(StarIcon, { full: true, partial: true, scale: this.scale }))), h("span", { class: "visually-hidden" }, this.messages.stars.replace("{num}", `${value}`))));
     }), (this.count || this.average) && this.showChip ? (h("calcite-chip", { scale: this.scale, value: this.count?.toString() }, !!this.average && h("span", { class: "number--average" }, this.average.toString()), !!this.count && h("span", { class: "number--count" }, "(", this.count?.toString(), ")"))) : null), h(HiddenFormInputSlot, { component: this }))));
   }
   //--------------------------------------------------------------------------
@@ -237,6 +211,26 @@ const Rating = class {
   onLabelClick() {
     this.setFocus();
   }
+  updateFocus() {
+    this.hoverValue = this.value;
+    this.labelElements[this.value - 1].focus();
+  }
+  getTabIndex(value) {
+    if (this.readOnly || (this.value !== value && (this.value || value !== 1))) {
+      return -1;
+    }
+    return 0;
+  }
+  getValueFromLabelEvent(event) {
+    const target = event.currentTarget;
+    return Number(target.getAttribute("data-value"));
+  }
+  getNextRatingValue(currentValue) {
+    return currentValue === 5 ? 1 : currentValue + 1;
+  }
+  getPreviousRatingValue(currentValue) {
+    return currentValue === 1 ? 5 : currentValue - 1;
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -245,7 +239,7 @@ const Rating = class {
   /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
-    this.inputFocusRef?.focus();
+    focusFirstTabbable(this.el);
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }

package/dist/esm/calcite-scrim.entry.js

@@ -1,16 +1,16 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
-import { r as registerInstance, h, a as getElement } from './index-4c8dc570.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-b9b2f130.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-3fd6411d.js';
-import { c as createObserver } from './observers-0611100c.js';
-import { x as slotChangeHasContent } from './dom-c70e4c69.js';
-import './key-4cc3e77c.js';
-import './guid-503fe646.js';
-import './resources-ee705ba9.js';
+import { r as registerInstance, h, a as getElement } from './index-871aa909.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-7ed1373b.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-e1e6bb16.js';
+import { c as createObserver } from './observers-3edf63eb.js';
+import { x as slotChangeHasContent } from './dom-73f38fd2.js';
+import './key-0646f194.js';
+import './guid-ec636fe3.js';
+import './resources-d95e2c66.js';
 
 const CSS = {
   scrim: "scrim",

package/dist/esm/calcite-segmented-control_2.entry.js

@@ -1,16 +1,18 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.2
+ * v1.7.0-next.21
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-4c8dc570.js';
-import { g as getElementDir, z as getElementProp, t as toAriaBoolean } from './dom-c70e4c69.js';
-import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-59a488e0.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-aa38fd27.js';
-import { c as connectLabel, d as disconnectLabel } from './label-389bf8aa.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-76dd29b3.js';
-import './guid-503fe646.js';
-import './resources-ee705ba9.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-871aa909.js';
+import { g as getElementDir, t as toAriaBoolean } from './dom-73f38fd2.js';
+import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-a7df218f.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-6ba1e887.js';
+import { c as connectLabel, d as disconnectLabel } from './label-30fd68f0.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-5c45a3f7.js';
+import { c as createObserver } from './observers-3edf63eb.js';
+import './guid-ec636fe3.js';
+import './resources-d95e2c66.js';
+import './browser-b5ea92bc.js';
 
 const segmentedControlCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;background-color:var(--calcite-ui-foreground-1);inline-size:-moz-fit-content;inline-size:fit-content;outline:1px solid var(--calcite-ui-border-input);outline-offset:-1px}:host([appearance=outline]){background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([layout=vertical]){flex-direction:column;align-items:flex-start;align-self:flex-start}:host([width=full]){inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content}:host([width=full]) ::slotted(calcite-segmented-control-item){flex:1 1 auto}:host([width=full][layout=vertical]) ::slotted(calcite-segmented-control-item){justify-content:flex-start}::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}";
 
@@ -31,17 +33,21 @@ const SegmentedControl = class {
         this.selectItem(event.target, true);
       }
     };
+    this.mutationObserver = createObserver("mutation", () => this.setUpItems());
     this.appearance = "solid";
     this.disabled = false;
     this.form = undefined;
     this.required = false;
-    this.layout = "horizontal";
     this.name = undefined;
+    this.layout = "horizontal";
     this.scale = "m";
     this.value = null;
     this.selectedItem = undefined;
     this.width = "auto";
   }
+  handlePropsChange() {
+    this.handleItemPropChange();
+  }
   valueHandler(value) {
     const items = this.getItems();
     items.forEach((item) => (item.checked = item.value === value));
@@ -67,14 +73,7 @@ const SegmentedControl = class {
   //--------------------------------------------------------------------------
   componentWillLoad() {
     setUpLoadableComponent(this);
-    const items = this.getItems();
-    const lastChecked = items.filter((item) => item.checked).pop();
-    if (lastChecked) {
-      this.selectItem(lastChecked);
-    }
-    else if (items[0]) {
-      items[0].tabIndex = 0;
-    }
+    this.setUpItems();
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.value);
@@ -84,11 +83,14 @@ const SegmentedControl = class {
     connectInteractive(this);
     connectLabel(this);
     connectForm(this);
+    this.mutationObserver?.observe(this.el, { childList: true });
+    this.handleItemPropChange();
   }
   disconnectedCallback() {
     disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
+    this.mutationObserver?.unobserve(this.el);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -155,6 +157,14 @@ const SegmentedControl = class {
     await componentFocusable(this);
     (this.selectedItem || this.getItems()[0])?.focus();
   }
+  handleItemPropChange() {
+    const items = this.getItems();
+    items.forEach((item) => {
+      item.appearance = this.appearance;
+      item.layout = this.layout;
+      item.scale = this.scale;
+    });
+  }
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -190,8 +200,21 @@ const SegmentedControl = class {
       match.focus();
     }
   }
+  setUpItems() {
+    const items = this.getItems();
+    const lastChecked = items.filter((item) => item.checked).pop();
+    if (lastChecked) {
+      this.selectItem(lastChecked);
+    }
+    else if (items[0]) {
+      items[0].tabIndex = 0;
+    }
+  }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "appearance": ["handlePropsChange"],
+    "layout": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
     "value": ["valueHandler"],
     "selectedItem": ["handleSelectedItemChange"]
   }; }
@@ -216,15 +239,20 @@ const SegmentedControlItem = class {
     this.iconStart = undefined;
     this.iconEnd = undefined;
     this.value = undefined;
+    this.appearance = "solid";
+    this.layout = "horizontal";
+    this.scale = "m";
   }
   handleCheckedChange() {
     this.calciteInternalSegmentedControlItemChange.emit();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
   render() {
-    const { checked, value } = this;
-    const scale = getElementProp(this.el, "scale", "m");
-    const appearance = getElementProp(this.el, "appearance", "solid");
-    const layout = getElementProp(this.el, "layout", "horizontal");
+    const { appearance, checked, layout, scale, value } = this;
     const iconStartEl = this.iconStart ? (h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
     const iconEndEl = this.iconEnd ? (h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
     return (h(Host, { "aria-checked": toAriaBoolean(checked), "aria-label": value, role: "radio" }, h("label", { class: {