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

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

@@ -1,17 +1,17 @@
 /*!
  * 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.11
  */
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-12f96d86.js';
-import { g as getRoundRobinIndex } from './array-e7542aea.js';
-import { g as getElementDir, d as focusElement, t as toAriaBoolean } from './dom-257fb429.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-f849dd0a.js';
-import { g as guid } from './guid-4b604798.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-999431b3.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-6c5eadac.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-871af43e.js';
-import './resources-084474bf.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-b49f8c8f.js';
+import { g as getRoundRobinIndex } from './array-9b0e7e30.js';
+import { g as getElementDir, d as focusElement, t as toAriaBoolean } from './dom-3c1c1e5f.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-0f5c0cd1.js';
+import { g as guid } from './guid-fb10b804.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-ebd6da81.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-0abb33f9.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-a2697887.js';
+import './resources-437af614.js';
 
 const CSS = {
   container: "container",
@@ -291,7 +291,7 @@ const RadioButton = class {
   render() {
     const tabIndex = this.getTabIndex();
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-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 }, h("div", { class: "radio" })), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return getElement(this); }

package/dist/esm/calcite-rating.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.11
  */
-import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-12f96d86.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-f849dd0a.js';
-import { g as guid } from './guid-4b604798.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-999431b3.js';
-import { c as connectLabel, d as disconnectLabel } from './label-6c5eadac.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-871af43e.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-5cade090.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-fda07909.js';
-import './dom-257fb429.js';
-import './resources-084474bf.js';
-import './key-c4381172.js';
-import './observers-39183e56.js';
+import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-b49f8c8f.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-0f5c0cd1.js';
+import { g as guid } from './guid-fb10b804.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-ebd6da81.js';
+import { c as connectLabel, d as disconnectLabel } from './label-0abb33f9.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-a2697887.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-74b3ae87.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-cac6fb96.js';
+import { f as focusFirstTabbable } from './dom-3c1c1e5f.js';
+import './key-1c33098e.js';
+import './observers-2af41f0e.js';
+import './resources-437af614.js';
 
 const StarIcon = ({ full, scale, partial }) => (h("calcite-icon", { ...{
     class: partial ? undefined : "icon",
@@ -22,7 +22,7 @@ const StarIcon = ({ full, scale, partial }) => (h("calcite-icon", { ...{
     scale,
   } }));
 
-const ratingCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([read-only]) *,:host([disabled]) *,:host([read-only]) ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;align-items:center;inline-size:-moz-fit-content;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){block-size:1.5rem;--calcite-rating-spacing-unit:0.25rem}:host([scale=m]){block-size:2rem;--calcite-rating-spacing-unit:0.5rem}:host([scale=l]){block-size:2.75rem;--calcite-rating-spacing-unit:0.75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing-unit)}.wrapper{display:inline-block}.star{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-ui-border-input)}.focused{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.average,.fraction{color:var(--calcite-ui-warning)}.hovered,.selected{color:var(--calcite-ui-brand)}.fraction{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}calcite-chip{pointer-events:none;cursor:default}.number--average{font-weight:bold}.number--count{color:var(--calcite-ui-text-2);font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing-unit)}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const ratingCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([read-only]) *,:host([disabled]) *,:host([read-only]) ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;align-items:center;inline-size:-moz-fit-content;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){block-size:1.5rem;--calcite-rating-spacing-unit:0.25rem}:host([scale=m]){block-size:2rem;--calcite-rating-spacing-unit:0.5rem}:host([scale=l]){block-size:2.75rem;--calcite-rating-spacing-unit:0.75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing-unit)}.wrapper{display:inline-block}.star{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-ui-border-input)}.star:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.average,.fraction{color:var(--calcite-ui-warning)}.hovered,.selected{color:var(--calcite-ui-brand)}.fraction{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}calcite-chip{pointer-events:none;cursor:default}.number--average{font-weight:bold}.number--count{color:var(--calcite-ui-text-2);font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing-unit)}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Rating = class {
   constructor(hostRef) {
@@ -34,29 +34,12 @@ const Rating = class {
     this.handleRatingPointerOut = () => {
       this.isKeyboardInteraction = true;
       this.hoverValue = null;
-      this.focusValue = null;
-      this.hasFocus = false;
-    };
-    this.handleRatingFocusIn = () => {
-      const selectedInput = this.value > 0 ? this.value - 1 : 0;
-      const focusInput = this.inputRefs[selectedInput];
-      const focusValue = Number(focusInput.value);
-      focusInput.select();
-      this.focusValue = focusValue;
-      this.hoverValue = focusValue;
-      this.hasFocus = true;
-    };
-    this.handleRatingFocusLeave = () => {
-      this.focusValue = null;
-      this.hoverValue = null;
-      this.hasFocus = false;
     };
     this.handleHostKeyDown = () => {
       this.isKeyboardInteraction = true;
     };
-    this.handleInputKeyDown = (event) => {
-      const target = event.currentTarget;
-      const inputVal = Number(target.value);
+    this.handleLabelKeyDown = (event) => {
+      const inputValue = this.getValueFromLabelEvent(event);
       const key = event.key;
       const numberKey = key == " " ? undefined : Number(key);
       this.emit = true;
@@ -64,20 +47,20 @@ const Rating = class {
         switch (key) {
           case "Enter":
           case " ":
-            this.value = !this.required && this.value === inputVal ? 0 : inputVal;
+            this.value = !this.required && this.value === inputValue ? 0 : inputValue;
             break;
           case "ArrowLeft":
-            this.value = inputVal - 1;
+            this.value = this.getPreviousRatingValue(inputValue);
+            this.updateFocus();
+            event.preventDefault();
             break;
           case "ArrowRight":
-            this.value = inputVal + 1;
+            this.value = this.getNextRatingValue(inputValue);
+            this.updateFocus();
+            event.preventDefault();
             break;
           case "Tab":
-            if (this.hasFocus) {
-              this.hasFocus = false;
-              this.focusValue = null;
-              this.hoverValue = null;
-            }
+            this.hoverValue = null;
         }
       }
       else {
@@ -87,33 +70,42 @@ const Rating = class {
         else if (this.required && numberKey > 0 && numberKey <= this.max) {
           this.value = numberKey;
         }
+        this.updateFocus();
       }
     };
     this.handleInputChange = (event) => {
       if (this.isKeyboardInteraction === true) {
         const inputVal = Number(event.target["value"]);
-        this.focusValue = inputVal;
         this.hoverValue = inputVal;
         this.value = inputVal;
       }
     };
     this.handleLabelPointerOver = (event) => {
-      const target = event.currentTarget;
-      const newPointerValue = Number(target.firstChild["value"] || 0);
-      this.hoverValue = newPointerValue;
-      this.focusValue = null;
+      this.hoverValue = this.getValueFromLabelEvent(event);
     };
     this.handleLabelPointerDown = (event) => {
       const target = event.currentTarget;
-      const inputVal = Number(target.firstChild["value"] || 0);
-      this.focusValue = null;
-      this.hoverValue = null;
+      const inputValue = this.getValueFromLabelEvent(event);
+      this.hoverValue = inputValue;
       this.emit = true;
-      this.value = !this.required && this.value === inputVal ? 0 : inputVal;
+      this.value = !this.required && this.value === inputValue ? 0 : inputValue;
+      target.focus();
+    };
+    this.handleLabelClick = (event) => {
+      //preventing pointerdown event will supress any compatability mouse events except for click event.
+      event.preventDefault();
+    };
+    this.handleLabelFocus = (event) => {
+      const inputValue = this.getValueFromLabelEvent(event);
+      this.hoverValue = inputValue;
+    };
+    this.setLabelEl = (el) => {
+      this.labelElements.push(el);
     };
     this.emit = false;
     this.guid = `calcite-ratings-${guid()}`;
     this.isKeyboardInteraction = true;
+    this.labelElements = [];
     this.max = 5;
     this.average = undefined;
     this.count = undefined;
@@ -130,15 +122,12 @@ const Rating = class {
     this.effectiveLocale = "";
     this.defaultMessages = undefined;
     this.hoverValue = undefined;
-    this.focusValue = undefined;
-    this.hasFocus = undefined;
   }
   onMessagesChange() {
     /* wired up by t9n util */
   }
   handleValueUpdate(newValue) {
     this.hoverValue = newValue;
-    this.focusValue = newValue;
     if (this.emit) {
       this.calciteRatingChange.emit();
     }
@@ -162,39 +151,28 @@ const Rating = class {
   async componentWillLoad() {
     await setUpMessages(this);
     setUpLoadableComponent(this);
-    this.inputRefs = Array(this.max);
   }
   componentWillRender() {
     this.starsMap = Array.from({ length: this.max }, (_, i) => {
       const value = i + 1;
-      const average = !this.focusValue &&
-        !this.hoverValue &&
-        this.average &&
-        !this.value &&
-        value <= this.average;
+      const average = !this.hoverValue && this.average && !this.value && value <= this.average;
       const checked = value === this.value;
-      const focused = this.isKeyboardInteraction && this.hasFocus && this.focusValue === value;
       const fraction = this.average && this.average + 1 - value;
       const hovered = value <= this.hoverValue;
       const id = `${this.guid}-${value}`;
-      const partial = !this.focusValue &&
-        !this.hoverValue &&
-        !this.value &&
-        !hovered &&
-        fraction > 0 &&
-        fraction < 1;
+      const partial = !this.hoverValue && !this.value && !hovered && fraction > 0 && fraction < 1;
       const selected = this.value >= value;
+      const tabIndex = this.getTabIndex(value);
       return {
         average,
         checked,
-        focused,
         fraction,
         hovered,
         id,
-        idx: i,
         partial,
         selected,
         value,
+        tabIndex,
       };
     });
   }
@@ -212,21 +190,16 @@ const Rating = class {
     updateHostInteraction(this);
   }
   render() {
-    return (h(Host, { onBlur: this.handleRatingFocusLeave, onFocus: this.handleRatingFocusIn, onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, h("span", { class: "wrapper" }, h("fieldset", { class: "fieldset", disabled: this.disabled }, h("legend", { class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, focused, fraction, hovered, id, idx, partial, selected, value, }) => {
+    return (h(Host, { onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, h("span", { class: "wrapper" }, h("fieldset", { class: "fieldset", disabled: this.disabled }, h("legend", { class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, fraction, hovered, id, partial, selected, value, tabIndex }) => {
       return (h("label", { class: {
           star: true,
-          focused,
           selected,
           hovered,
           average,
           partial,
-        }, htmlFor: id, onPointerDown: this.handleLabelPointerDown, onPointerOver: this.handleLabelPointerOver }, h("input", { checked: checked, class: "visually-hidden", disabled: this.disabled || this.readOnly, id: id, name: this.guid, onChange: this.handleInputChange, onKeyDown: this.handleInputKeyDown, type: "radio", value: value,
+        }, "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));
-        } }), h(StarIcon, { full: selected || average, scale: this.scale }), partial && (h("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, h(StarIcon, { full: true, partial: true, scale: this.scale }))), h("span", { class: "visually-hidden" }, this.messages.stars.replace("{num}", `${value}`))));
+        ref: this.setLabelEl }, h("input", { checked: checked, class: "visually-hidden", disabled: this.disabled || this.readOnly, id: id, name: this.guid, onChange: this.handleInputChange, tabIndex: -1, type: "radio", value: value }), h(StarIcon, { full: selected || average, scale: this.scale }), partial && (h("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, h(StarIcon, { full: true, partial: true, scale: this.scale }))), h("span", { class: "visually-hidden" }, this.messages.stars.replace("{num}", `${value}`))));
     }), (this.count || this.average) && this.showChip ? (h("calcite-chip", { scale: this.scale, value: this.count?.toString() }, !!this.average && h("span", { class: "number--average" }, this.average.toString()), !!this.count && h("span", { class: "number--count" }, "(", this.count?.toString(), ")"))) : null), h(HiddenFormInputSlot, { component: this }))));
   }
   //--------------------------------------------------------------------------
@@ -237,6 +210,26 @@ const Rating = class {
   onLabelClick() {
     this.setFocus();
   }
+  updateFocus() {
+    this.hoverValue = this.value;
+    this.labelElements[this.value - 1].focus();
+  }
+  getTabIndex(value) {
+    if (this.readOnly || (this.value !== value && (this.value || value !== 1))) {
+      return -1;
+    }
+    return 0;
+  }
+  getValueFromLabelEvent(event) {
+    const target = event.currentTarget;
+    return Number(target.getAttribute("data-value"));
+  }
+  getNextRatingValue(currentValue) {
+    return currentValue === 5 ? 1 : currentValue + 1;
+  }
+  getPreviousRatingValue(currentValue) {
+    return currentValue === 1 ? 5 : currentValue - 1;
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -245,7 +238,7 @@ const Rating = class {
   /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
-    this.inputFocusRef?.focus();
+    focusFirstTabbable(this.el);
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }

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

@@ -1,16 +1,16 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.11
  */
-import { r as registerInstance, h, a as getElement } from './index-12f96d86.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-5cade090.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-fda07909.js';
-import { c as createObserver } from './observers-39183e56.js';
-import { x as slotChangeHasContent } from './dom-257fb429.js';
-import './key-c4381172.js';
-import './guid-4b604798.js';
-import './resources-084474bf.js';
+import { r as registerInstance, h, a as getElement } from './index-b49f8c8f.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-74b3ae87.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-cac6fb96.js';
+import { c as createObserver } from './observers-2af41f0e.js';
+import { x as slotChangeHasContent } from './dom-3c1c1e5f.js';
+import './key-1c33098e.js';
+import './guid-fb10b804.js';
+import './resources-437af614.js';
 
 const CSS = {
   scrim: "scrim",

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

@@ -1,16 +1,17 @@
 /*!
  * 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.11
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-12f96d86.js';
-import { g as getElementDir, z as getElementProp, t as toAriaBoolean } from './dom-257fb429.js';
-import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-f849dd0a.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-999431b3.js';
-import { c as connectLabel, d as disconnectLabel } from './label-6c5eadac.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-871af43e.js';
-import './guid-4b604798.js';
-import './resources-084474bf.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b49f8c8f.js';
+import { g as getElementDir, t as toAriaBoolean } from './dom-3c1c1e5f.js';
+import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-0f5c0cd1.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-ebd6da81.js';
+import { c as connectLabel, d as disconnectLabel } from './label-0abb33f9.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-a2697887.js';
+import { c as createObserver } from './observers-2af41f0e.js';
+import './guid-fb10b804.js';
+import './resources-437af614.js';
 
 const segmentedControlCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;background-color:var(--calcite-ui-foreground-1);inline-size:-moz-fit-content;inline-size:fit-content;outline:1px solid var(--calcite-ui-border-input);outline-offset:-1px}:host([appearance=outline]){background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([layout=vertical]){flex-direction:column;align-items:flex-start;align-self:flex-start}:host([width=full]){inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content}:host([width=full]) ::slotted(calcite-segmented-control-item){flex:1 1 auto}:host([width=full][layout=vertical]) ::slotted(calcite-segmented-control-item){justify-content:flex-start}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 
@@ -31,17 +32,21 @@ const SegmentedControl = class {
         this.selectItem(event.target, true);
       }
     };
+    this.mutationObserver = createObserver("mutation", () => this.setUpItems());
     this.appearance = "solid";
     this.disabled = false;
     this.form = undefined;
     this.required = false;
-    this.layout = "horizontal";
     this.name = undefined;
+    this.layout = "horizontal";
     this.scale = "m";
     this.value = null;
     this.selectedItem = undefined;
     this.width = "auto";
   }
+  handlePropsChange() {
+    this.handleItemPropChange();
+  }
   valueHandler(value) {
     const items = this.getItems();
     items.forEach((item) => (item.checked = item.value === value));
@@ -67,14 +72,7 @@ const SegmentedControl = class {
   //--------------------------------------------------------------------------
   componentWillLoad() {
     setUpLoadableComponent(this);
-    const items = this.getItems();
-    const lastChecked = items.filter((item) => item.checked).pop();
-    if (lastChecked) {
-      this.selectItem(lastChecked);
-    }
-    else if (items[0]) {
-      items[0].tabIndex = 0;
-    }
+    this.setUpItems();
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.value);
@@ -84,11 +82,14 @@ const SegmentedControl = class {
     connectInteractive(this);
     connectLabel(this);
     connectForm(this);
+    this.mutationObserver?.observe(this.el, { childList: true });
+    this.handleItemPropChange();
   }
   disconnectedCallback() {
     disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
+    this.mutationObserver?.unobserve(this.el);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -155,6 +156,14 @@ const SegmentedControl = class {
     await componentFocusable(this);
     (this.selectedItem || this.getItems()[0])?.focus();
   }
+  handleItemPropChange() {
+    const items = this.getItems();
+    items.forEach((item) => {
+      item.appearance = this.appearance;
+      item.layout = this.layout;
+      item.scale = this.scale;
+    });
+  }
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -190,8 +199,21 @@ const SegmentedControl = class {
       match.focus();
     }
   }
+  setUpItems() {
+    const items = this.getItems();
+    const lastChecked = items.filter((item) => item.checked).pop();
+    if (lastChecked) {
+      this.selectItem(lastChecked);
+    }
+    else if (items[0]) {
+      items[0].tabIndex = 0;
+    }
+  }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "appearance": ["handlePropsChange"],
+    "layout": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
     "value": ["valueHandler"],
     "selectedItem": ["handleSelectedItemChange"]
   }; }
@@ -216,15 +238,20 @@ const SegmentedControlItem = class {
     this.iconStart = undefined;
     this.iconEnd = undefined;
     this.value = undefined;
+    this.appearance = "solid";
+    this.layout = "horizontal";
+    this.scale = "m";
   }
   handleCheckedChange() {
     this.calciteInternalSegmentedControlItemChange.emit();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
   render() {
-    const { checked, value } = this;
-    const scale = getElementProp(this.el, "scale", "m");
-    const appearance = getElementProp(this.el, "appearance", "solid");
-    const layout = getElementProp(this.el, "layout", "horizontal");
+    const { appearance, checked, layout, scale, value } = this;
     const iconStartEl = this.iconStart ? (h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
     const iconEndEl = this.iconEnd ? (h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
     return (h(Host, { "aria-checked": toAriaBoolean(checked), "aria-label": value, role: "radio" }, h("label", { class: {