@esri/solutions-components 0.6.15 → 0.6.16

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

@@ -8,19 +8,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const dom = require('./dom-456f9f13.js');
-const interactive = require('./interactive-48299817.js');
-const loadable = require('./loadable-13605f73.js');
-const observers = require('./observers-9912f013.js');
-const resources$1 = require('./resources-10d29626.js');
-const Heading = require('./Heading-0da2a025.js');
-const resources = require('./resources-24b6eee0.js');
-const locale = require('./locale-79c3d30e.js');
-const t9n = require('./t9n-58d20225.js');
-const conditionalSlot = require('./conditionalSlot-f10611d3.js');
-require('./guid-d1123d5e.js');
-require('./resources-993f6faf.js');
-require('./key-8de93212.js');
+const dom = require('./dom-8d00cc3f.js');
+const interactive = require('./interactive-7837b73d.js');
+const loadable = require('./loadable-5d36908d.js');
+const observers = require('./observers-62ea89bc.js');
+const resources$1 = require('./resources-29c246e2.js');
+const Heading = require('./Heading-c02158c2.js');
+const resources = require('./resources-36b8ab24.js');
+const locale = require('./locale-6479f239.js');
+const t9n = require('./t9n-a3d7ce48.js');
+const conditionalSlot = require('./conditionalSlot-c989690a.js');
+require('./guid-c351776c.js');
+require('./resources-2278b321.js');
+require('./browser-596d8e1e.js');
+require('./key-07312a4b.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;-moz-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}";
 
@@ -211,7 +212,7 @@ const Panel = class {
     const { close, hasEndActions, messages, closable, hasMenuItems } = this;
     const text = messages.close;
     const closableNode = closable ? (index.h("calcite-action", { "aria-label": text, "data-test": "close", icon: resources.ICONS.close, onClick: close, text: text, title: text,
-      // 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.setCloseRef })) : null;
     const slotNode = (index.h("slot", { name: resources.SLOTS.headerActionsEnd, onSlotchange: this.handleHeaderActionsEndSlotChange }));
     const showContainer = hasEndActions || closableNode || hasMenuItems;
@@ -240,7 +241,7 @@ const Panel = class {
   }
   renderContent() {
     return (index.h("div", { class: resources.CSS.contentWrapper, onScroll: this.panelScrollHandler,
-      // 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.setPanelScrollEl }, index.h("slot", null), this.renderFab()));
   }
   renderFab() {
@@ -249,7 +250,7 @@ const Panel = class {
   render() {
     const { loading, panelKeyDownHandler, closed, closable } = this;
     const panelNode = (index.h("article", { "aria-busy": dom.toAriaBoolean(loading), class: resources.CSS.container, hidden: closed, onKeyDown: panelKeyDownHandler, tabIndex: closable ? 0 : -1,
-      // 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.setContainerRef }, this.renderHeaderNode(), this.renderContent(), this.renderFooterNode()));
     return (index.h(index.Fragment, null, loading ? index.h("calcite-scrim", { loading: loading }) : null, panelNode));
   }
@@ -265,7 +266,7 @@ Panel.style = panelCss;
 /*!
  * 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.6.1
+ * v1.8.0
  */
 const CSS = {
   main: "main",
@@ -285,6 +286,7 @@ const SLOTS = {
   header: "header",
   footer: "footer",
   alerts: "alerts",
+  sheets: "sheets",
   modals: "modals",
 };
 
@@ -313,6 +315,15 @@ const Shell = class {
         }
       });
     };
+    this.handleSheetsSlotChange = (event) => {
+      var _a;
+      this.hasSheets = !!dom.slotChangeHasAssignedElement(event);
+      (_a = dom.slotChangeGetAssignedElements(event)) === null || _a === void 0 ? void 0 : _a.map((el) => {
+        if (el.nodeName === "CALCITE-SHEET") {
+          el.slottedInShell = true;
+        }
+      });
+    };
     this.handleModalsSlotChange = (event) => {
       var _a;
       this.hasModals = !!dom.slotChangeHasAssignedElement(event);
@@ -327,6 +338,7 @@ const Shell = class {
     this.hasFooter = false;
     this.hasAlerts = false;
     this.hasModals = false;
+    this.hasSheets = false;
   }
   // --------------------------------------------------------------------------
   //
@@ -353,6 +365,9 @@ const Shell = class {
   renderAlerts() {
     return (index.h("div", { hidden: !this.hasAlerts }, index.h("slot", { key: "alerts", name: SLOTS.alerts, onSlotchange: this.handleAlertsSlotChange })));
   }
+  renderSheets() {
+    return (index.h("div", { hidden: !this.hasSheets }, index.h("slot", { key: "sheets", name: SLOTS.sheets, onSlotchange: this.handleSheetsSlotChange })));
+  }
   renderModals() {
     return (index.h("div", { hidden: !this.hasModals }, index.h("slot", { key: "modals", name: SLOTS.modals, onSlotchange: this.handleModalsSlotChange })));
   }
@@ -379,7 +394,7 @@ const Shell = class {
     return (index.h("div", { class: CSS.main }, index.h("slot", { name: SLOTS.panelStart }), this.renderContent(), index.h("slot", { name: SLOTS.panelEnd })));
   }
   renderPositionedSlots() {
-    return (index.h("div", { class: CSS.positionedSlotWrapper }, this.renderAlerts(), this.renderModals()));
+    return (index.h("div", { class: CSS.positionedSlotWrapper }, this.renderAlerts(), this.renderModals(), this.renderSheets()));
   }
   render() {
     return (index.h(index.Fragment, null, this.renderHeader(), this.renderMain(), this.renderFooter(), this.renderPositionedSlots()));

package/dist/cjs/calcite-pick-list-group.cjs.entry.js

@@ -8,13 +8,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const conditionalSlot = require('./conditionalSlot-f10611d3.js');
-const dom = require('./dom-456f9f13.js');
-const Heading = require('./Heading-0da2a025.js');
-const resources = require('./resources-2b51cf4c.js');
-require('./observers-9912f013.js');
-require('./guid-d1123d5e.js');
-require('./resources-993f6faf.js');
+const conditionalSlot = require('./conditionalSlot-c989690a.js');
+const dom = require('./dom-8d00cc3f.js');
+const Heading = require('./Heading-c02158c2.js');
+const resources = require('./resources-56cd0ba8.js');
+require('./observers-62ea89bc.js');
+require('./guid-c351776c.js');
+require('./resources-2278b321.js');
 
 const pickListGroupCss = ":host{margin-block-end:0.25rem;box-sizing:border-box;display:block;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2)}:host *{box-sizing:border-box}:host(:last-child){margin-block-end:0px}.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}.heading{margin-block:0.5rem;margin-inline:1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-size:var(--calcite-font-size--1);line-height:1.375;color:var(--calcite-ui-text-3)}.container--indented{margin-inline-start:1.5rem}:host([hidden]){display:none}[hidden]{display:none}";
 

package/dist/cjs/calcite-pick-list-item.cjs.entry.js

@@ -8,18 +8,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const conditionalSlot = require('./conditionalSlot-f10611d3.js');
-const dom = require('./dom-456f9f13.js');
-const interactive = require('./interactive-48299817.js');
-const loadable = require('./loadable-13605f73.js');
-const locale = require('./locale-79c3d30e.js');
-const t9n = require('./t9n-58d20225.js');
-const resources = require('./resources-8f4e8ba8.js');
-const resources$1 = require('./resources-030a27ed.js');
-require('./observers-9912f013.js');
-require('./guid-d1123d5e.js');
-require('./resources-993f6faf.js');
-require('./key-8de93212.js');
+const conditionalSlot = require('./conditionalSlot-c989690a.js');
+const dom = require('./dom-8d00cc3f.js');
+const interactive = require('./interactive-7837b73d.js');
+const loadable = require('./loadable-5d36908d.js');
+const locale = require('./locale-6479f239.js');
+const t9n = require('./t9n-a3d7ce48.js');
+const resources = require('./resources-d000455c.js');
+const resources$1 = require('./resources-dc8e5f07.js');
+require('./observers-62ea89bc.js');
+require('./guid-c351776c.js');
+require('./resources-2278b321.js');
+require('./browser-596d8e1e.js');
+require('./key-07312a4b.js');
 
 const pickListItemCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{margin:0px;margin-block-end:1px;box-sizing:border-box;display:flex;align-items:stretch;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-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);transition:background-color var(--calcite-animation-timing);animation:calcite-fade-in var(--calcite-animation-timing)}:host *{box-sizing:border-box}.label{display:flex;flex:1 1 auto;cursor:pointer;align-items:center;background-color:transparent;outline-color:transparent}.label: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          )}.label:hover{background-color:var(--calcite-ui-foreground-2)}:host([non-interactive]:hover){background-color:var(--calcite-ui-foreground-1)}:host([non-interactive]) .label,:host([non-interactive]) .icon{pointer-events:none}.icon{margin-block:0px;display:flex;cursor:pointer;align-items:center;padding:0.25rem;color:var(--calcite-ui-brand);flex:0 0 auto;line-height:0}.icon:hover{background-color:var(--calcite-ui-foreground-2)}.icon-dot{display:flex;inline-size:1.5rem;align-items:center;padding:0.5rem}.icon-dot:before{opacity:0;content:\"•\"}.icon calcite-icon{opacity:0}:host([selected]) .icon-dot:before,:host([selected]) .icon calcite-icon{transition:opacity var(--calcite-animation-timing);opacity:1}.text-container{pointer-events:none;display:flex;flex-direction:column;flex-wrap:nowrap;overflow:hidden;padding-block:0.5rem;padding-inline:0.75rem;font-size:var(--calcite-font-size--2);line-height:1.375;word-wrap:break-word;word-break:break-word}.title{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-1)}.description{margin-block-start:0.125rem;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}.actions{margin:0px;display:flex;flex:0 1 auto;align-items:stretch;justify-content:flex-end}.actions--start~.label{padding-inline-start:0.25rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
 
@@ -175,7 +176,7 @@ const PickListItem = class {
   render() {
     const { description, label } = this;
     return (index.h(index.Fragment, null, this.renderIcon(), this.renderActionsStart(), index.h("label", { "aria-label": label, class: resources$1.CSS.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0,
-      // 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: (focusEl) => (this.focusEl = focusEl) }, index.h("div", { "aria-checked": dom.toAriaBoolean(this.selected), class: resources$1.CSS.textContainer, role: "menuitemcheckbox" }, index.h("span", { class: resources$1.CSS.title }, label), description ? index.h("span", { class: resources$1.CSS.description }, description) : null)), this.renderActionsEnd()));
   }
   static get assetsDirs() { return ["assets"]; }

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

@@ -8,16 +8,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const interactive = require('./interactive-48299817.js');
-const loadable = require('./loadable-13605f73.js');
-const observers = require('./observers-9912f013.js');
-const resources = require('./resources-8f4e8ba8.js');
-const sharedListRender = require('./shared-list-render-e5821654.js');
-require('./array-2db3fd4a.js');
-require('./dom-456f9f13.js');
-require('./guid-d1123d5e.js');
-require('./resources-993f6faf.js');
-require('./resources-2b51cf4c.js');
+const interactive = require('./interactive-7837b73d.js');
+const loadable = require('./loadable-5d36908d.js');
+const observers = require('./observers-62ea89bc.js');
+const resources = require('./resources-d000455c.js');
+const sharedListRender = require('./shared-list-render-a5fb8233.js');
+require('./browser-596d8e1e.js');
+require('./array-a3f9baa5.js');
+require('./dom-8d00cc3f.js');
+require('./guid-c351776c.js');
+require('./resources-2278b321.js');
+require('./resources-56cd0ba8.js');
 require('./debounce-30afab47.js');
 
 const pickListCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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-radio-button-group.cjs.entry.js

@@ -8,8 +8,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const observers = require('./observers-9912f013.js');
-const loadable = require('./loadable-13605f73.js');
+const observers = require('./observers-62ea89bc.js');
+const loadable = require('./loadable-5d36908d.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

@@ -8,19 +8,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const array = require('./array-2db3fd4a.js');
-const dom = require('./dom-456f9f13.js');
-const form = require('./form-28bc6597.js');
-const guid = require('./guid-d1123d5e.js');
-const interactive = require('./interactive-48299817.js');
-const label = require('./label-166e2d81.js');
-const loadable = require('./loadable-13605f73.js');
-require('./resources-993f6faf.js');
+const array = require('./array-a3f9baa5.js');
+const dom = require('./dom-8d00cc3f.js');
+const form = require('./form-44895e53.js');
+const guid = require('./guid-c351776c.js');
+const interactive = require('./interactive-7837b73d.js');
+const label = require('./label-39887629.js');
+const loadable = require('./loadable-5d36908d.js');
+require('./resources-2278b321.js');
+require('./browser-596d8e1e.js');
 
 /*!
  * 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.6.1
+ * v1.8.0
  */
 const CSS = {
   container: "container",
@@ -300,7 +301,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

@@ -8,22 +8,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const form = require('./form-28bc6597.js');
-const guid = require('./guid-d1123d5e.js');
-const interactive = require('./interactive-48299817.js');
-const label = require('./label-166e2d81.js');
-const loadable = require('./loadable-13605f73.js');
-const locale = require('./locale-79c3d30e.js');
-const t9n = require('./t9n-58d20225.js');
-require('./dom-456f9f13.js');
-require('./resources-993f6faf.js');
-require('./key-8de93212.js');
-require('./observers-9912f013.js');
+const form = require('./form-44895e53.js');
+const guid = require('./guid-c351776c.js');
+const interactive = require('./interactive-7837b73d.js');
+const label = require('./label-39887629.js');
+const loadable = require('./loadable-5d36908d.js');
+const locale = require('./locale-6479f239.js');
+const t9n = require('./t9n-a3d7ce48.js');
+const dom = require('./dom-8d00cc3f.js');
+require('./browser-596d8e1e.js');
+require('./key-07312a4b.js');
+require('./observers-62ea89bc.js');
+require('./resources-2278b321.js');
 
 /*!
  * 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.6.1
+ * v1.8.0
  */
 const StarIcon = ({ full, scale, partial }) => (index.h("calcite-icon", { ...{
     class: partial ? undefined : "icon",
@@ -31,7 +32,7 @@ const StarIcon = ({ full, scale, partial }) => (index.h("calcite-icon", { ...{
     scale,
   } }));
 
-const ratingCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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;-moz-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) {
@@ -43,29 +44,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;
@@ -73,20 +57,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 {
@@ -96,33 +80,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;
@@ -139,15 +132,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();
     }
@@ -171,39 +161,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,
       };
     });
   }
@@ -222,21 +201,16 @@ const Rating = class {
   }
   render() {
     var _a, _b;
-    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: (_a = this.count) === null || _a === void 0 ? void 0 : _a.toString() }, !!this.average && index.h("span", { class: "number--average" }, this.average.toString()), !!this.count && index.h("span", { class: "number--count" }, "(", (_b = this.count) === null || _b === void 0 ? void 0 : _b.toString(), ")"))) : null), index.h(form.HiddenFormInputSlot, { component: this }))));
   }
   //--------------------------------------------------------------------------
@@ -247,6 +221,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
@@ -254,9 +248,8 @@ const Rating = class {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await loadable.componentFocusable(this);
-    (_a = this.inputFocusRef) === null || _a === void 0 ? void 0 : _a.focus();
+    dom.focusFirstTabbable(this.el);
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return index.getElement(this); }

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

@@ -8,18 +8,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
-const locale = require('./locale-79c3d30e.js');
-const t9n = require('./t9n-58d20225.js');
-const observers = require('./observers-9912f013.js');
-const dom = require('./dom-456f9f13.js');
-require('./key-8de93212.js');
-require('./guid-d1123d5e.js');
-require('./resources-993f6faf.js');
+const locale = require('./locale-6479f239.js');
+const t9n = require('./t9n-a3d7ce48.js');
+const observers = require('./observers-62ea89bc.js');
+const dom = require('./dom-8d00cc3f.js');
+require('./key-07312a4b.js');
+require('./guid-c351776c.js');
+require('./resources-2278b321.js');
 
 /*!
  * 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.6.1
+ * v1.8.0
  */
 const CSS = {
   scrim: "scrim",