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

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

@@ -1,25 +1,26 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a299f336.js');
-const dom = require('./dom-a6b1b2d0.js');
-const interactive = require('./interactive-34d4b6bc.js');
-const loadable = require('./loadable-11abb55e.js');
-const observers = require('./observers-42ec2f3d.js');
-const resources$1 = require('./resources-3cf637d9.js');
-const Heading = require('./Heading-963c98c4.js');
-const resources = require('./resources-7c4f2264.js');
-const locale = require('./locale-e320d64c.js');
-const t9n = require('./t9n-9d761c44.js');
-require('./guid-537c824b.js');
-require('./resources-a528d8de.js');
-require('./key-31549e1f.js');
+const index = require('./index-f069ceeb.js');
+const dom = require('./dom-11f55de1.js');
+const interactive = require('./interactive-b0753ca2.js');
+const loadable = require('./loadable-e8d10de1.js');
+const observers = require('./observers-48bb741a.js');
+const resources$1 = require('./resources-9dda9976.js');
+const Heading = require('./Heading-6aecec3d.js');
+const resources = require('./resources-2e9005e3.js');
+const locale = require('./locale-7b1e0816.js');
+const t9n = require('./t9n-f1dd12d6.js');
+require('./guid-b02b4fb9.js');
+require('./resources-f4b8e837.js');
+require('./browser-c1005bdf.js');
+require('./key-077d0b58.js');
 
 const panelCss = ":host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3);--calcite-panel-footer-padding:0.5rem;--calcite-internal-panel-header-border-block-end:1px solid var(--calcite-ui-border-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.header{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}.heading{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:0.5rem}.container{margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-ui-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}.container[hidden]{display:none}.header{z-index:var(--calcite-app-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);border-block-end:var(--calcite-internal-panel-header-border-block-end)}.header-container{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}.header-container--border-end{border-block-end:1px solid var(--calcite-ui-border-3)}.action-bar-container{inline-size:100%}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}.header-content .heading,.header-content .description{display:block;overflow-wrap:break-word;padding:0px}.header-content .heading{margin-inline:0px;margin-block:0px 0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-medium)}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}.back-button{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}.header-actions--end{margin-inline-start:auto}.content-wrapper{display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;background-color:var(--calcite-ui-background)}.footer{display:flex;inline-size:100%;justify-content:space-evenly;background-color:var(--calcite-ui-foreground-1);flex:0 0 auto;padding:var(--calcite-panel-footer-padding);border-block-start:1px solid var(--calcite-ui-border-3)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-app-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}:host([hidden]){display:none}[hidden]{display:none}";
 

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

@@ -1,27 +1,28 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a299f336.js');
-const interactive = require('./interactive-34d4b6bc.js');
-const loadable = require('./loadable-11abb55e.js');
-const observers = require('./observers-42ec2f3d.js');
-const resources = require('./resources-4459275a.js');
-const conditionalSlot = require('./conditionalSlot-b7752012.js');
-const dom = require('./dom-a6b1b2d0.js');
-const Heading = require('./Heading-963c98c4.js');
-const locale = require('./locale-e320d64c.js');
-const t9n = require('./t9n-9d761c44.js');
-require('./array-3c15d225.js');
-require('./debounce-2d82837f.js');
-require('./guid-537c824b.js');
-require('./resources-a528d8de.js');
-require('./key-31549e1f.js');
+const index = require('./index-f069ceeb.js');
+const interactive = require('./interactive-b0753ca2.js');
+const loadable = require('./loadable-e8d10de1.js');
+const observers = require('./observers-48bb741a.js');
+const resources = require('./resources-64efd93a.js');
+const conditionalSlot = require('./conditionalSlot-6113a82c.js');
+const dom = require('./dom-11f55de1.js');
+const Heading = require('./Heading-6aecec3d.js');
+const locale = require('./locale-7b1e0816.js');
+const t9n = require('./t9n-f1dd12d6.js');
+require('./browser-c1005bdf.js');
+require('./array-77207e24.js');
+require('./debounce-f0968b7d.js');
+require('./guid-b02b4fb9.js');
+require('./resources-f4b8e837.js');
+require('./key-077d0b58.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/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.2
+ * v1.7.0-next.21
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a299f336.js');
-const floatingUi = require('./floating-ui-73ac6149.js');
-const focusTrapComponent = require('./focusTrapComponent-a93f67fa.js');
-const dom = require('./dom-a6b1b2d0.js');
-const guid = require('./guid-537c824b.js');
-const openCloseComponent = require('./openCloseComponent-b662151a.js');
-const Heading = require('./Heading-963c98c4.js');
-const locale = require('./locale-e320d64c.js');
-const t9n = require('./t9n-9d761c44.js');
-const key = require('./key-31549e1f.js');
-const loadable = require('./loadable-11abb55e.js');
-const observers = require('./observers-42ec2f3d.js');
-const FloatingArrow = require('./FloatingArrow-7f0d275b.js');
-require('./debounce-2d82837f.js');
-require('./resources-a528d8de.js');
+const index = require('./index-f069ceeb.js');
+const floatingUi = require('./floating-ui-cf60cff9.js');
+const focusTrapComponent = require('./focusTrapComponent-4898ae0f.js');
+const dom = require('./dom-11f55de1.js');
+const guid = require('./guid-b02b4fb9.js');
+const openCloseComponent = require('./openCloseComponent-ac67c1d3.js');
+const Heading = require('./Heading-6aecec3d.js');
+const locale = require('./locale-7b1e0816.js');
+const t9n = require('./t9n-f1dd12d6.js');
+const key = require('./key-077d0b58.js');
+const loadable = require('./loadable-e8d10de1.js');
+const observers = require('./observers-48bb741a.js');
+const FloatingArrow = require('./FloatingArrow-2640bcdb.js');
+require('./debounce-f0968b7d.js');
+require('./resources-f4b8e837.js');
 
 const CSS = {
   container: "container",

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.2
+ * v1.7.0-next.21
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a299f336.js');
-const dom = require('./dom-a6b1b2d0.js');
-const resources = require('./resources-a528d8de.js');
-require('./guid-537c824b.js');
+const index = require('./index-f069ceeb.js');
+const dom = require('./dom-11f55de1.js');
+const resources = require('./resources-f4b8e837.js');
+require('./guid-b02b4fb9.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.2
+ * v1.7.0-next.21
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a299f336.js');
-const observers = require('./observers-42ec2f3d.js');
-const loadable = require('./loadable-11abb55e.js');
+const index = require('./index-f069ceeb.js');
+const observers = require('./observers-48bb741a.js');
+const loadable = require('./loadable-e8d10de1.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,22 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a299f336.js');
-const array = require('./array-3c15d225.js');
-const dom = require('./dom-a6b1b2d0.js');
-const form = require('./form-efb81018.js');
-const guid = require('./guid-537c824b.js');
-const interactive = require('./interactive-34d4b6bc.js');
-const label = require('./label-822b0770.js');
-const loadable = require('./loadable-11abb55e.js');
-require('./resources-a528d8de.js');
+const index = require('./index-f069ceeb.js');
+const array = require('./array-77207e24.js');
+const dom = require('./dom-11f55de1.js');
+const form = require('./form-b4605d58.js');
+const guid = require('./guid-b02b4fb9.js');
+const interactive = require('./interactive-b0753ca2.js');
+const label = require('./label-b5a50c64.js');
+const loadable = require('./loadable-e8d10de1.js');
+require('./resources-f4b8e837.js');
+require('./browser-c1005bdf.js');
 
 const CSS = {
   container: "container",

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

@@ -1,24 +1,25 @@
 /*!
  * 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
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a299f336.js');
-const form = require('./form-efb81018.js');
-const guid = require('./guid-537c824b.js');
-const interactive = require('./interactive-34d4b6bc.js');
-const label = require('./label-822b0770.js');
-const loadable = require('./loadable-11abb55e.js');
-const locale = require('./locale-e320d64c.js');
-const t9n = require('./t9n-9d761c44.js');
-require('./dom-a6b1b2d0.js');
-require('./resources-a528d8de.js');
-require('./key-31549e1f.js');
-require('./observers-42ec2f3d.js');
+const index = require('./index-f069ceeb.js');
+const form = require('./form-b4605d58.js');
+const guid = require('./guid-b02b4fb9.js');
+const interactive = require('./interactive-b0753ca2.js');
+const label = require('./label-b5a50c64.js');
+const loadable = require('./loadable-e8d10de1.js');
+const locale = require('./locale-7b1e0816.js');
+const t9n = require('./t9n-f1dd12d6.js');
+const dom = require('./dom-11f55de1.js');
+require('./browser-c1005bdf.js');
+require('./key-077d0b58.js');
+require('./observers-48bb741a.js');
+require('./resources-f4b8e837.js');
 
 const StarIcon = ({ full, scale, partial }) => (index.h("calcite-icon", { ...{
     class: partial ? undefined : "icon",
@@ -26,7 +27,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 +39,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 +52,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 +75,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 +127,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 +156,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 +195,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,
-        // 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));
-        } }), 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}`))));
+        }, "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 }, 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 +215,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 +243,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.2
+ * v1.7.0-next.21
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-a299f336.js');
-const locale = require('./locale-e320d64c.js');
-const t9n = require('./t9n-9d761c44.js');
-const observers = require('./observers-42ec2f3d.js');
-const dom = require('./dom-a6b1b2d0.js');
-require('./key-31549e1f.js');
-require('./guid-537c824b.js');
-require('./resources-a528d8de.js');
+const index = require('./index-f069ceeb.js');
+const locale = require('./locale-7b1e0816.js');
+const t9n = require('./t9n-f1dd12d6.js');
+const observers = require('./observers-48bb741a.js');
+const dom = require('./dom-11f55de1.js');
+require('./key-077d0b58.js');
+require('./guid-b02b4fb9.js');
+require('./resources-f4b8e837.js');
 
 const CSS = {
   scrim: "scrim",