@esri/calcite-components 1.7.0-next.1 → 1.7.0-next.10

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

@@ -1,27 +1,27 @@
 /*!
  * 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.1
+ * v1.7.0-next.10
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-142998d3.js');
-const floatingUi = require('./floating-ui-8799f01a.js');
-const focusTrapComponent = require('./focusTrapComponent-328576cf.js');
-const dom = require('./dom-7487acd7.js');
-const guid = require('./guid-bc4ef7e8.js');
-const openCloseComponent = require('./openCloseComponent-12d9e8d8.js');
-const Heading = require('./Heading-022a7a25.js');
-const locale = require('./locale-99d6b752.js');
-const t9n = require('./t9n-42d79fa0.js');
-const key = require('./key-dc499418.js');
-const loadable = require('./loadable-cb368fce.js');
-const observers = require('./observers-f62a2e0a.js');
-const FloatingArrow = require('./FloatingArrow-b5ca6077.js');
-require('./debounce-7d77cb87.js');
-require('./resources-932fa5dc.js');
+const index = require('./index-62e7a1ed.js');
+const floatingUi = require('./floating-ui-e3b6e217.js');
+const focusTrapComponent = require('./focusTrapComponent-aea4e631.js');
+const dom = require('./dom-ee5ca278.js');
+const guid = require('./guid-7fc7cda4.js');
+const openCloseComponent = require('./openCloseComponent-27ac60fc.js');
+const Heading = require('./Heading-6f9fbd67.js');
+const locale = require('./locale-1985d401.js');
+const t9n = require('./t9n-80f42485.js');
+const key = require('./key-d451a368.js');
+const loadable = require('./loadable-3bb56575.js');
+const observers = require('./observers-1c054b2b.js');
+const FloatingArrow = require('./FloatingArrow-2f265df4.js');
+require('./debounce-fd13f3e3.js');
+require('./resources-3a9a1d47.js');
 
 const CSS = {
   container: "container",
@@ -363,7 +363,7 @@ const Popover = class {
   renderCloseButton() {
     const { messages, closable } = this;
     return closable ? (index.h("div", { class: CSS.closeButtonContainer, key: CSS.closeButtonContainer }, index.h("calcite-action", { appearance: "transparent", class: CSS.closeButton, onClick: this.hide, scale: this.scale, text: messages.close,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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: (closeButtonEl) => (this.closeButtonEl = closeButtonEl) }, index.h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : this.scale })))) : null;
   }
   renderHeader() {
@@ -376,13 +376,13 @@ const Popover = class {
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
     const arrowNode = !pointerDisabled ? (index.h(FloatingArrow.FloatingArrow, { floatingLayout: floatingLayout, key: "floating-arrow",
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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: this.storeArrowEl })) : null;
     return (index.h(index.Host, { "aria-hidden": dom.toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, index.h("div", { class: {
         [floatingUi.FloatingCSS.animation]: true,
         [floatingUi.FloatingCSS.animationActive]: displayed,
       },
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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: this.setTransitionEl }, arrowNode, index.h("div", { class: {
         [CSS.hasHeader]: !!heading,
         [CSS.container]: true,

package/dist/cjs/calcite-progress.cjs.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.1
+ * v1.7.0-next.10
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-142998d3.js');
-const dom = require('./dom-7487acd7.js');
-const resources = require('./resources-932fa5dc.js');
-require('./guid-bc4ef7e8.js');
+const index = require('./index-62e7a1ed.js');
+const dom = require('./dom-ee5ca278.js');
+const resources = require('./resources-3a9a1d47.js');
+require('./guid-7fc7cda4.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/cjs/calcite-radio-button-group.cjs.entry.js

@@ -1,15 +1,15 @@
 /*!
  * 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.1
+ * v1.7.0-next.10
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-142998d3.js');
-const observers = require('./observers-f62a2e0a.js');
-const loadable = require('./loadable-cb368fce.js');
+const index = require('./index-62e7a1ed.js');
+const observers = require('./observers-1c054b2b.js');
+const loadable = require('./loadable-3bb56575.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/cjs/calcite-radio-button.cjs.entry.js

@@ -1,21 +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.1
+ * v1.7.0-next.10
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-142998d3.js');
-const array = require('./array-5848270e.js');
-const dom = require('./dom-7487acd7.js');
-const form = require('./form-509b1671.js');
-const guid = require('./guid-bc4ef7e8.js');
-const interactive = require('./interactive-3295de88.js');
-const label = require('./label-39f9c585.js');
-const loadable = require('./loadable-cb368fce.js');
-require('./resources-932fa5dc.js');
+const index = require('./index-62e7a1ed.js');
+const array = require('./array-1202902b.js');
+const dom = require('./dom-ee5ca278.js');
+const form = require('./form-45f1afe2.js');
+const guid = require('./guid-7fc7cda4.js');
+const interactive = require('./interactive-8b00018f.js');
+const label = require('./label-190c0cf9.js');
+const loadable = require('./loadable-3bb56575.js');
+require('./resources-3a9a1d47.js');
 
 const CSS = {
   container: "container",
@@ -295,7 +295,7 @@ const RadioButton = class {
   render() {
     const tabIndex = this.getTabIndex();
     return (index.h(index.Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown }, index.h("div", { "aria-checked": dom.toAriaBoolean(this.checked), "aria-label": label.getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, role: "radio", tabIndex: tabIndex,
-      // eslint-disable-next-line react/jsx-sort-props
+      // 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: this.setContainerEl }, index.h("div", { class: "radio" })), index.h(form.HiddenFormInputSlot, { component: this })));
   }
   get el() { return index.getElement(this); }

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

@@ -1,24 +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.1
+ * v1.7.0-next.10
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-142998d3.js');
-const form = require('./form-509b1671.js');
-const guid = require('./guid-bc4ef7e8.js');
-const interactive = require('./interactive-3295de88.js');
-const label = require('./label-39f9c585.js');
-const loadable = require('./loadable-cb368fce.js');
-const locale = require('./locale-99d6b752.js');
-const t9n = require('./t9n-42d79fa0.js');
-require('./dom-7487acd7.js');
-require('./resources-932fa5dc.js');
-require('./key-dc499418.js');
-require('./observers-f62a2e0a.js');
+const index = require('./index-62e7a1ed.js');
+const form = require('./form-45f1afe2.js');
+const guid = require('./guid-7fc7cda4.js');
+const interactive = require('./interactive-8b00018f.js');
+const label = require('./label-190c0cf9.js');
+const loadable = require('./loadable-3bb56575.js');
+const locale = require('./locale-1985d401.js');
+const t9n = require('./t9n-80f42485.js');
+const dom = require('./dom-ee5ca278.js');
+require('./key-d451a368.js');
+require('./observers-1c054b2b.js');
+require('./resources-3a9a1d47.js');
 
 const StarIcon = ({ full, scale, partial }) => (index.h("calcite-icon", { ...{
     class: partial ? undefined : "icon",
@@ -26,7 +26,7 @@ const StarIcon = ({ full, scale, partial }) => (index.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) {
@@ -38,29 +38,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;
@@ -68,20 +51,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 {
@@ -91,33 +74,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.guid()}`;
     this.isKeyboardInteraction = true;
+    this.labelElements = [];
     this.max = 5;
     this.average = undefined;
     this.count = undefined;
@@ -134,15 +126,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();
     }
@@ -166,39 +155,28 @@ const Rating = class {
   async componentWillLoad() {
     await t9n.setUpMessages(this);
     loadable.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,
       };
     });
   }
@@ -216,21 +194,16 @@ const Rating = class {
     interactive.updateHostInteraction(this);
   }
   render() {
-    return (index.h(index.Host, { onBlur: this.handleRatingFocusLeave, onFocus: this.handleRatingFocusIn, onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, index.h("span", { class: "wrapper" }, index.h("fieldset", { class: "fieldset", disabled: this.disabled }, index.h("legend", { class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, focused, fraction, hovered, id, idx, partial, selected, value, }) => {
+    return (index.h(index.Host, { onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, index.h("span", { class: "wrapper" }, index.h("fieldset", { class: "fieldset", disabled: this.disabled }, index.h("legend", { class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, fraction, hovered, id, partial, selected, value, tabIndex }) => {
       return (index.h("label", { class: {
           star: true,
-          focused,
           selected,
           hovered,
           average,
           partial,
-        }, htmlFor: id, onPointerDown: this.handleLabelPointerDown, onPointerOver: this.handleLabelPointerOver }, index.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,
+        }, "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: (el) => {
-          this.inputRefs[idx] = el;
-          return ((value === 1 || value === this.value) &&
-            (this.inputFocusRef = el));
-        } }), index.h(StarIcon, { full: selected || average, scale: this.scale }), partial && (index.h("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, index.h(StarIcon, { full: true, partial: true, scale: this.scale }))), index.h("span", { class: "visually-hidden" }, this.messages.stars.replace("{num}", `${value}`))));
+        ref: this.setLabelEl }, index.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 }), index.h(StarIcon, { full: selected || average, scale: this.scale }), partial && (index.h("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, index.h(StarIcon, { full: true, partial: true, scale: this.scale }))), index.h("span", { class: "visually-hidden" }, this.messages.stars.replace("{num}", `${value}`))));
     }), (this.count || this.average) && this.showChip ? (index.h("calcite-chip", { scale: this.scale, value: this.count?.toString() }, !!this.average && index.h("span", { class: "number--average" }, this.average.toString()), !!this.count && index.h("span", { class: "number--count" }, "(", this.count?.toString(), ")"))) : null), index.h(form.HiddenFormInputSlot, { component: this }))));
   }
   //--------------------------------------------------------------------------
@@ -241,6 +214,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
@@ -249,7 +242,7 @@ const Rating = class {
   /** Sets focus on the component. */
   async setFocus() {
     await loadable.componentFocusable(this);
-    this.inputFocusRef?.focus();
+    dom.focusFirstTabbable(this.el);
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return index.getElement(this); }

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

@@ -1,20 +1,20 @@
 /*!
  * 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.1
+ * v1.7.0-next.10
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-142998d3.js');
-const locale = require('./locale-99d6b752.js');
-const t9n = require('./t9n-42d79fa0.js');
-const observers = require('./observers-f62a2e0a.js');
-const dom = require('./dom-7487acd7.js');
-require('./key-dc499418.js');
-require('./guid-bc4ef7e8.js');
-require('./resources-932fa5dc.js');
+const index = require('./index-62e7a1ed.js');
+const locale = require('./locale-1985d401.js');
+const t9n = require('./t9n-80f42485.js');
+const observers = require('./observers-1c054b2b.js');
+const dom = require('./dom-ee5ca278.js');
+require('./key-d451a368.js');
+require('./guid-7fc7cda4.js');
+require('./resources-3a9a1d47.js');
 
 const CSS = {
   scrim: "scrim",

package/dist/cjs/calcite-segmented-control_2.cjs.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.1
+ * v1.7.0-next.10
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-142998d3.js');
-const dom = require('./dom-7487acd7.js');
-const form = require('./form-509b1671.js');
-const interactive = require('./interactive-3295de88.js');
-const label = require('./label-39f9c585.js');
-const loadable = require('./loadable-cb368fce.js');
-require('./guid-bc4ef7e8.js');
-require('./resources-932fa5dc.js');
+const index = require('./index-62e7a1ed.js');
+const dom = require('./dom-ee5ca278.js');
+const form = require('./form-45f1afe2.js');
+const interactive = require('./interactive-8b00018f.js');
+const label = require('./label-190c0cf9.js');
+const loadable = require('./loadable-3bb56575.js');
+const observers = require('./observers-1c054b2b.js');
+require('./guid-7fc7cda4.js');
+require('./resources-3a9a1d47.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}";
 
@@ -35,17 +36,21 @@ const SegmentedControl = class {
         this.selectItem(event.target, true);
       }
     };
+    this.mutationObserver = observers.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));
@@ -71,14 +76,7 @@ const SegmentedControl = class {
   //--------------------------------------------------------------------------
   componentWillLoad() {
     loadable.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() {
     form.afterConnectDefaultValueSet(this, this.value);
@@ -88,11 +86,14 @@ const SegmentedControl = class {
     interactive.connectInteractive(this);
     label.connectLabel(this);
     form.connectForm(this);
+    this.mutationObserver?.observe(this.el, { childList: true });
+    this.handleItemPropChange();
   }
   disconnectedCallback() {
     interactive.disconnectInteractive(this);
     label.disconnectLabel(this);
     form.disconnectForm(this);
+    this.mutationObserver?.unobserve(this.el);
   }
   componentDidRender() {
     interactive.updateHostInteraction(this);
@@ -159,6 +160,14 @@ const SegmentedControl = class {
     await loadable.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
@@ -194,8 +203,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 index.getElement(this); }
   static get watchers() { return {
+    "appearance": ["handlePropsChange"],
+    "layout": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
     "value": ["valueHandler"],
     "selectedItem": ["handleSelectedItemChange"]
   }; }
@@ -220,15 +242,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 = dom.getElementProp(this.el, "scale", "m");
-    const appearance = dom.getElementProp(this.el, "appearance", "solid");
-    const layout = dom.getElementProp(this.el, "layout", "horizontal");
+    const { appearance, checked, layout, scale, value } = this;
     const iconStartEl = this.iconStart ? (index.h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
     const iconEndEl = this.iconEnd ? (index.h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
     return (index.h(index.Host, { "aria-checked": dom.toAriaBoolean(checked), "aria-label": value, role: "radio" }, index.h("label", { class: {