@esri/calcite-components 2.9.0-next.2 → 2.9.0-next.20

package/dist/components/calcite-segmented-control-item.js

@@ -1,20 +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.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { t as toAriaBoolean } from './dom.js';
+import { r as slotChangeHasContent, t as toAriaBoolean } from './dom.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
 const SLOTS = {
     input: "input",
 };
 const CSS = {
-    segmentedControlItemIcon: "segmented-control-item-icon",
+    label: "label",
+    labelScale: (scale) => `label--scale-${scale}`,
+    labelHorizontal: "label--horizontal",
+    labelOutline: "label--outline",
+    labelOutlineFill: "label--outline-fill",
+    icon: "icon",
+    iconSolo: "icon--solo",
 };
 
-const segmentedControlItemCss = ":host{display:flex;cursor:pointer;align-self:stretch;font-weight:var(--calcite-font-weight-normal);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out, border-color var(--calcite-animation-timing) ease-in-out}:host label{pointer-events:none;margin:0.125rem;box-sizing:border-box;display:flex;flex:1 1 0%;align-items:center;color:var(--calcite-color-text-3);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out, border-color var(--calcite-internal-animation-timing-fast) ease-in-out, color var(--calcite-internal-animation-timing-fast) ease-in-out}.label--horizontal{justify-content:center}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:-1px}.label--scale-s{padding-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-block:0.125rem}.label--scale-m{padding-inline:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-block:0.375rem}.label--scale-l{padding-inline:1rem;padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host(:hover) label{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host(:active) label{background-color:var(--calcite-color-foreground-3)}:host([checked]) label{cursor:default;border-color:var(--calcite-color-brand);background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{border-color:var(--calcite-color-brand);background-color:var(--calcite-color-foreground-1);box-shadow:inset 0 0 0 1px var(--calcite-color-brand);color:var(--calcite-color-brand)}:host([checked]) .label--outline{background-color:transparent}::slotted(input){display:none}@media (forced-colors: active){:host([checked]) label{background-color:highlight}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{outline:2px solid transparent;outline-offset:2px}:host([checked]) label:not([class~=label--outline]) .segmented-control-item-icon{color:highlightText}}.segmented-control-item-icon{position:relative;margin:0px;display:inline-flex;line-height:inherit}:host([icon-start]) .label--scale-s .segmented-control-item-icon{margin-inline-end:0.5rem}:host([icon-end]) .label--scale-s .segmented-control-item-icon{margin-inline-start:0.5rem}:host([icon-start]) .label--scale-m .segmented-control-item-icon{margin-inline-end:0.75rem}:host([icon-end]) .label--scale-m .segmented-control-item-icon{margin-inline-start:0.75rem}:host([icon-start]) .label--scale-l .segmented-control-item-icon{margin-inline-end:1rem}:host([icon-end]) .label--scale-l .segmented-control-item-icon{margin-inline-start:1rem}:host([hidden]){display:none}[hidden]{display:none}";
+const segmentedControlItemCss = ":host{display:flex;cursor:pointer;align-self:stretch;font-weight:var(--calcite-font-weight-normal);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out, border-color var(--calcite-animation-timing) ease-in-out}:host label{pointer-events:none;margin:0.125rem;box-sizing:border-box;display:flex;flex:1 1 0%;align-items:center;color:var(--calcite-color-text-3);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out, border-color var(--calcite-internal-animation-timing-fast) ease-in-out, color var(--calcite-internal-animation-timing-fast) ease-in-out}.label--horizontal{justify-content:center}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:-1px}.label--scale-s{padding-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-block:0.125rem}.label--scale-m{padding-inline:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-block:0.375rem}.label--scale-l{padding-inline:1rem;padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host(:hover) label{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host(:active) label{background-color:var(--calcite-color-foreground-3)}:host([checked]) label{cursor:default;border-color:var(--calcite-color-brand);background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{border-color:var(--calcite-color-brand);background-color:var(--calcite-color-foreground-1);box-shadow:inset 0 0 0 1px var(--calcite-color-brand);color:var(--calcite-color-brand)}:host([checked]) .label--outline{background-color:transparent}::slotted(input){display:none}@media (forced-colors: active){:host([checked]) label{background-color:highlight}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{outline:2px solid transparent;outline-offset:2px}:host([checked]) label:not([class~=label--outline]) .icon{color:highlightText}}.icon{position:relative;margin:0px;display:inline-flex;line-height:inherit;margin-inline-start:var(--calcite-internal-segmented-control-icon-margin-start);margin-inline-end:var(--calcite-internal-segmented-control-icon-margin-end)}:host([icon-start]) .label--scale-s{--calcite-internal-segmented-control-icon-margin-end:0.5rem}:host([icon-end]) .label--scale-s{--calcite-internal-segmented-control-icon-margin-start:0.5rem}:host([icon-start]) .label--scale-m{--calcite-internal-segmented-control-icon-margin-end:0.75rem}:host([icon-end]) .label--scale-m{--calcite-internal-segmented-control-icon-margin-start:0.75rem}:host([icon-start]) .label--scale-l{--calcite-internal-segmented-control-icon-margin-end:1rem}:host([icon-end]) .label--scale-l{--calcite-internal-segmented-control-icon-margin-start:1rem}.label .icon--solo{--calcite-internal-segmented-control-icon-margin-start:0;--calcite-internal-segmented-control-icon-margin-end:0}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteSegmentedControlItemStyle0 = segmentedControlItemCss;
 
 const SegmentedControlItem = /*@__PURE__*/ proxyCustomElement(class SegmentedControlItem extends HTMLElement {
@@ -23,6 +29,14 @@ const SegmentedControlItem = /*@__PURE__*/ proxyCustomElement(class SegmentedCon
         this.__registerHost();
         this.__attachShadow();
         this.calciteInternalSegmentedControlItemChange = createEvent(this, "calciteInternalSegmentedControlItemChange", 6);
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
+        this.handleSlotChange = (event) => {
+            this.hasSlottedContent = slotChangeHasContent(event);
+        };
         this.checked = false;
         this.iconFlipRtl = false;
         this.iconStart = undefined;
@@ -31,6 +45,7 @@ const SegmentedControlItem = /*@__PURE__*/ proxyCustomElement(class SegmentedCon
         this.appearance = "solid";
         this.layout = "horizontal";
         this.scale = "m";
+        this.hasSlottedContent = false;
     }
     handleCheckedChange() {
         this.calciteInternalSegmentedControlItemChange.emit();
@@ -40,18 +55,35 @@ const SegmentedControlItem = /*@__PURE__*/ proxyCustomElement(class SegmentedCon
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
+    renderIcon(icon, solo = false) {
+        return icon ? (h("calcite-icon", { class: {
+                [CSS.icon]: true,
+                [CSS.iconSolo]: solo,
+            }, flipRtl: this.iconFlipRtl, icon: icon, scale: "s" })) : null;
+    }
     render() {
         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, { key: 'b20e8835703f9dcd6d96a58ca47efe9e57f1ebc7', "aria-checked": toAriaBoolean(checked), "aria-label": value, role: "radio" }, h("label", { key: '850c35eb51158b2e3674587163bb77f4b30e554f', class: {
-                "label--scale-s": scale === "s",
-                "label--scale-m": scale === "m",
-                "label--scale-l": scale === "l",
-                "label--horizontal": layout === "horizontal",
-                "label--outline": appearance === "outline",
-                "label--outline-fill": appearance === "outline-fill",
-            } }, this.iconStart ? iconStartEl : null, h("slot", { key: '2f41ec01fab8c3e54e16d74b98f8d50d4e69018f' }, value), h("slot", { key: 'f969ea4b8fbcc0ab01052f5ffd103149540de08f', name: SLOTS.input }), this.iconEnd ? iconEndEl : null)));
+        return (h(Host, { key: 'cccfab9b2bafbd943d4130299f9e2c1bff945a94', "aria-checked": toAriaBoolean(checked), "aria-label": value, role: "radio" }, h("label", { key: 'f406eac31751d139fb4b51ba42dbe907d6560a7a', class: {
+                [CSS.label]: true,
+                [CSS.labelScale(scale)]: true,
+                [CSS.labelHorizontal]: layout === "horizontal",
+                [CSS.labelOutline]: appearance === "outline",
+                [CSS.labelOutlineFill]: appearance === "outline-fill",
+            } }, this.renderContent())));
+    }
+    renderContent() {
+        const { hasSlottedContent, iconEnd, iconStart } = this;
+        const effectiveIcon = iconStart || iconEnd;
+        const canRenderIconOnly = !hasSlottedContent && effectiveIcon;
+        if (canRenderIconOnly) {
+            return [this.renderIcon(effectiveIcon, true), h("slot", { onSlotchange: this.handleSlotChange })];
+        }
+        return [
+            this.renderIcon(iconStart),
+            h("slot", { onSlotchange: this.handleSlotChange }),
+            h("slot", { name: SLOTS.input }),
+            this.renderIcon(iconEnd),
+        ];
     }
     get el() { return this; }
     static get watchers() { return {
@@ -66,7 +98,8 @@ const SegmentedControlItem = /*@__PURE__*/ proxyCustomElement(class SegmentedCon
         "value": [1032],
         "appearance": [1],
         "layout": [1],
-        "scale": [1]
+        "scale": [1],
+        "hasSlottedContent": [32]
     }, undefined, {
         "checked": ["handleCheckedChange"]
     }]);

package/dist/components/calcite-segmented-control-item.js.map

@@ -1 +1 @@
-{"file":"calcite-segmented-control-item.js","mappings":";;;;;;;;;AAAO,MAAM,KAAK,GAAG;IACnB,KAAK,EAAE,OAAO;CACf,CAAC;AAEK,MAAM,GAAG,GAAG;IACjB,wBAAwB,EAAE,6BAA6B;CACxD;;ACND,MAAM,uBAAuB,GAAG,q/FAAq/F,CAAC;AACthG,0CAAe,uBAAuB;;MCmBzB,oBAAoB;;;;;;uBASmB,KAAK;2BAQhB,KAAK;;;;0BAoBoC,OAAO;sBAO9D,YAAY;qBAOd,GAAG;;IAvChB,mBAAmB;QAC3B,IAAI,CAAC,yCAAyC,CAAC,IAAI,EAAE,CAAC;KACvD;;;;;;IA6CD,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE3D,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,IAChC,oBACE,KAAK,EAAE,GAAG,CAAC,wBAAwB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,GAAG,EAAC,YAAY,EAChB,KAAK,EAAC,GAAG,GACT,IACA,IAAI,CAAC;QAET,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,IAC5B,oBACE,KAAK,EAAE,GAAG,CAAC,wBAAwB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,GAAG,EAAC,UAAU,EACd,KAAK,EAAC,GAAG,GACT,IACA,IAAI,CAAC;QAET,QACE,EAAC,IAAI,qEAAe,aAAa,CAAC,OAAO,CAAC,gBAAc,KAAK,EAAE,IAAI,EAAC,OAAO,IACzE,8DACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,KAAK,KAAK,GAAG;gBAC/B,gBAAgB,EAAE,KAAK,KAAK,GAAG;gBAC/B,gBAAgB,EAAE,KAAK,KAAK,GAAG;gBAC/B,mBAAmB,EAAE,MAAM,KAAK,YAAY;gBAC5C,gBAAgB,EAAE,UAAU,KAAK,SAAS;gBAC1C,qBAAqB,EAAE,UAAU,KAAK,cAAc;aACrD,IAEA,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,IAAI,EACpC,+DAAO,KAAK,CAAQ,EACpB,6DAAM,IAAI,EAAE,KAAK,CAAC,KAAK,GAAI,EAC1B,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,IAAI,CAC1B,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/segmented-control-item/resources.ts","src/components/segmented-control-item/segmented-control-item.scss?tag=calcite-segmented-control-item&encapsulation=shadow","src/components/segmented-control-item/segmented-control-item.tsx"],"sourcesContent":["export const SLOTS = {\n  input: \"input\",\n};\n\nexport const CSS = {\n  segmentedControlItemIcon: \"segmented-control-item-icon\",\n};\n",":host {\n  @apply flex\n    cursor-pointer\n    self-stretch\n    font-normal;\n  transition:\n    background-color var(--calcite-internal-animation-timing-fast) ease-in-out,\n    border-color var(--calcite-animation-timing) ease-in-out;\n}\n\n:host label {\n  @apply text-color-3\n    pointer-events-none\n    m-0.5\n    box-border\n    flex\n    flex-1\n    items-center;\n  transition:\n    background-color var(--calcite-internal-animation-timing-fast) ease-in-out,\n    border-color var(--calcite-internal-animation-timing-fast) ease-in-out,\n    color var(--calcite-internal-animation-timing-fast) ease-in-out;\n}\n\n.label--horizontal {\n  @apply justify-center;\n}\n\n// focus styles\n:host {\n  @apply focus-base;\n}\n:host(:focus) {\n  @apply focus-inset;\n  outline-offset: -1px;\n}\n\n.label--scale-s {\n  @apply text-n2h px-2;\n  padding-block: 0.125rem;\n}\n\n.label--scale-m {\n  @apply text-n1h px-3;\n  padding-block: 0.375rem;\n}\n\n.label--scale-l {\n  @apply text-0h px-4 py-2.5;\n}\n\n:host(:hover) label {\n  @apply bg-foreground-2 text-color-1;\n}\n\n:host(:active) label {\n  @apply bg-foreground-3;\n}\n\n:host([checked]) label {\n  @apply bg-brand border-color-brand cursor-default text-color-inverse;\n}\n\n:host([checked]) .label--outline,\n:host([checked]) .label--outline-fill {\n  @apply bg-foreground-1 border-color-brand;\n  box-shadow: inset 0 0 0 1px theme(\"backgroundColor.brand\");\n  color: theme(\"backgroundColor.brand\");\n}\n\n:host([checked]) .label--outline {\n  @apply bg-transparent;\n}\n\n::slotted(input) {\n  @apply hidden;\n}\n\n@media (forced-colors: active) {\n  :host([checked]) label {\n    background-color: highlight;\n  }\n  :host([checked]) .label--outline,\n  :host([checked]) .label--outline-fill {\n    @apply outline-none;\n  }\n  :host([checked]) label:not([class~=\"label--outline\"]) .segmented-control-item-icon {\n    color: highlightText;\n  }\n}\n\n// icon\n.segmented-control-item-icon {\n  @apply relative\n    m-0\n    inline-flex;\n  line-height: inherit;\n}\n\n:host([icon-start]) .label--scale-s .segmented-control-item-icon {\n  margin-inline-end: theme(\"margin.2\");\n}\n\n:host([icon-end]) .label--scale-s .segmented-control-item-icon {\n  margin-inline-start: theme(\"margin.2\");\n}\n\n:host([icon-start]) .label--scale-m .segmented-control-item-icon {\n  margin-inline-end: theme(\"margin.3\");\n}\n\n:host([icon-end]) .label--scale-m .segmented-control-item-icon {\n  margin-inline-start: theme(\"margin.3\");\n}\n\n:host([icon-start]) .label--scale-l .segmented-control-item-icon {\n  margin-inline-end: theme(\"margin.4\");\n}\n:host([icon-end]) .label--scale-l .segmented-control-item-icon {\n  margin-inline-start: theme(\"margin.4\");\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport { Appearance, Layout, Scale } from \"../interfaces\";\nimport { CSS, SLOTS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-segmented-control-item\",\n  styleUrl: \"segmented-control-item.scss\",\n  shadow: true,\n})\nexport class SegmentedControlItem {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by form module\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  @Watch(\"checked\")\n  protected handleCheckedChange(): void {\n    this.calciteInternalSegmentedControlItemChange.emit();\n  }\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /**\n   * The component's value.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by form module\n  @Prop({ mutable: true })\n  value: any | null;\n\n  /**\n   * Specifies the appearance style of the component inherited from parent `calcite-segmented-control`, defaults to `solid`.\n   *\n   * @internal\n   */\n  @Prop() appearance: Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance> = \"solid\";\n\n  /**\n   * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`.\n   *\n   * @internal\n   */\n  @Prop() layout: Layout = \"horizontal\";\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-segmented-control`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale = \"m\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const { appearance, checked, layout, scale, value } = this;\n\n    const iconStartEl = this.iconStart ? (\n      <calcite-icon\n        class={CSS.segmentedControlItemIcon}\n        flipRtl={this.iconFlipRtl}\n        icon={this.iconStart}\n        key=\"icon-start\"\n        scale=\"s\"\n      />\n    ) : null;\n\n    const iconEndEl = this.iconEnd ? (\n      <calcite-icon\n        class={CSS.segmentedControlItemIcon}\n        flipRtl={this.iconFlipRtl}\n        icon={this.iconEnd}\n        key=\"icon-end\"\n        scale=\"s\"\n      />\n    ) : null;\n\n    return (\n      <Host aria-checked={toAriaBoolean(checked)} aria-label={value} role=\"radio\">\n        <label\n          class={{\n            \"label--scale-s\": scale === \"s\",\n            \"label--scale-m\": scale === \"m\",\n            \"label--scale-l\": scale === \"l\",\n            \"label--horizontal\": layout === \"horizontal\",\n            \"label--outline\": appearance === \"outline\",\n            \"label--outline-fill\": appearance === \"outline-fill\",\n          }}\n        >\n          {this.iconStart ? iconStartEl : null}\n          <slot>{value}</slot>\n          <slot name={SLOTS.input} />\n          {this.iconEnd ? iconEndEl : null}\n        </label>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteSegmentedControlItemElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the item has been selected.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalSegmentedControlItemChange: EventEmitter<void>;\n}\n"],"version":3}
+{"file":"calcite-segmented-control-item.js","mappings":";;;;;;;;;AAEO,MAAM,KAAK,GAAG;IACnB,KAAK,EAAE,OAAO;CACf,CAAC;AAEK,MAAM,GAAG,GAAG;IACjB,KAAK,EAAE,OAAO;IACd,UAAU,EAAE,CAAC,KAAY,KAAK,gBAAgB,KAAK,EAAW;IAC9D,eAAe,EAAE,mBAAmB;IACpC,YAAY,EAAE,gBAAgB;IAC9B,gBAAgB,EAAE,qBAAqB;IACvC,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,YAAY;CACvB;;ACdD,MAAM,uBAAuB,GAAG,0wGAA0wG,CAAC;AAC3yG,0CAAe,uBAAuB;;MCoBzB,oBAAoB;;;;;;;;;;;QAmHvB,qBAAgB,GAAG,CAAC,KAAY;YACtC,IAAI,CAAC,iBAAiB,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;SACtD,CAAC;uBA5GgD,KAAK;2BAQhB,KAAK;;;;0BAmBoC,OAAO;sBAO9D,YAAY;qBAOd,GAAG;iCA6EG,KAAK;;IAnHxB,mBAAmB;QAC3B,IAAI,CAAC,yCAAyC,CAAC,IAAI,EAAE,CAAC;KACvD;;;;;;IA4CO,UAAU,CAAC,IAAY,EAAE,OAAgB,KAAK;QACpD,OAAO,IAAI,IACT,oBACE,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI;gBAChB,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI;aACrB,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,GAAG,GACT,IACA,IAAI,CAAC;KACV;IAED,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE3D,QACE,EAAC,IAAI,qEAAe,aAAa,CAAC,OAAO,CAAC,gBAAc,KAAK,EAAE,IAAI,EAAC,OAAO,IACzE,8DACE,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI;gBACjB,CAAC,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,IAAI;gBAC7B,CAAC,GAAG,CAAC,eAAe,GAAG,MAAM,KAAK,YAAY;gBAC9C,CAAC,GAAG,CAAC,YAAY,GAAG,UAAU,KAAK,SAAS;gBAC5C,CAAC,GAAG,CAAC,gBAAgB,GAAG,UAAU,KAAK,cAAc;aACtD,IAEA,IAAI,CAAC,aAAa,EAAE,CACf,CACH,EACP;KACH;IAEO,aAAa;QACnB,MAAM,EAAE,iBAAiB,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QACvD,MAAM,aAAa,GAAG,SAAS,IAAI,OAAO,CAAC;QAC3C,MAAM,iBAAiB,GAAG,CAAC,iBAAiB,IAAI,aAAa,CAAC;QAE9D,IAAI,iBAAiB,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,IAAI,CAAC,EAAE,YAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAAC,CAAC;SAC9F;QAED,OAAO;YACL,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;YAC1B,YAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI;YAC7C,YAAM,IAAI,EAAE,KAAK,CAAC,KAAK,GAAI;YAC3B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;SACzB,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/segmented-control-item/resources.ts","src/components/segmented-control-item/segmented-control-item.scss?tag=calcite-segmented-control-item&encapsulation=shadow","src/components/segmented-control-item/segmented-control-item.tsx"],"sourcesContent":["import { Scale } from \"../interfaces\";\n\nexport const SLOTS = {\n  input: \"input\",\n};\n\nexport const CSS = {\n  label: \"label\",\n  labelScale: (scale: Scale) => `label--scale-${scale}` as const,\n  labelHorizontal: \"label--horizontal\",\n  labelOutline: \"label--outline\",\n  labelOutlineFill: \"label--outline-fill\",\n  icon: \"icon\",\n  iconSolo: \"icon--solo\",\n};\n",":host {\n  @apply flex\n    cursor-pointer\n    self-stretch\n    font-normal;\n  transition:\n    background-color var(--calcite-internal-animation-timing-fast) ease-in-out,\n    border-color var(--calcite-animation-timing) ease-in-out;\n}\n\n:host label {\n  @apply text-color-3\n    pointer-events-none\n    m-0.5\n    box-border\n    flex\n    flex-1\n    items-center;\n  transition:\n    background-color var(--calcite-internal-animation-timing-fast) ease-in-out,\n    border-color var(--calcite-internal-animation-timing-fast) ease-in-out,\n    color var(--calcite-internal-animation-timing-fast) ease-in-out;\n}\n\n.label--horizontal {\n  @apply justify-center;\n}\n\n// focus styles\n:host {\n  @apply focus-base;\n}\n:host(:focus) {\n  @apply focus-inset;\n  outline-offset: -1px;\n}\n\n.label--scale-s {\n  @apply text-n2h px-2;\n  padding-block: 0.125rem;\n}\n\n.label--scale-m {\n  @apply text-n1h px-3;\n  padding-block: 0.375rem;\n}\n\n.label--scale-l {\n  @apply text-0h px-4 py-2.5;\n}\n\n:host(:hover) label {\n  @apply bg-foreground-2 text-color-1;\n}\n\n:host(:active) label {\n  @apply bg-foreground-3;\n}\n\n:host([checked]) label {\n  @apply bg-brand border-color-brand cursor-default text-color-inverse;\n}\n\n:host([checked]) .label--outline,\n:host([checked]) .label--outline-fill {\n  @apply bg-foreground-1 border-color-brand;\n  box-shadow: inset 0 0 0 1px theme(\"backgroundColor.brand\");\n  color: theme(\"backgroundColor.brand\");\n}\n\n:host([checked]) .label--outline {\n  @apply bg-transparent;\n}\n\n::slotted(input) {\n  @apply hidden;\n}\n\n@media (forced-colors: active) {\n  :host([checked]) label {\n    background-color: highlight;\n  }\n  :host([checked]) .label--outline,\n  :host([checked]) .label--outline-fill {\n    @apply outline-none;\n  }\n  :host([checked]) label:not([class~=\"label--outline\"]) .icon {\n    color: highlightText;\n  }\n}\n\n.icon {\n  @apply relative\n    m-0\n    inline-flex;\n  line-height: inherit;\n\n  margin-inline-start: var(--calcite-internal-segmented-control-icon-margin-start);\n  margin-inline-end: var(--calcite-internal-segmented-control-icon-margin-end);\n}\n\n:host([icon-start]) .label--scale-s {\n  --calcite-internal-segmented-control-icon-margin-end: theme(\"margin.2\");\n}\n\n:host([icon-end]) .label--scale-s {\n  --calcite-internal-segmented-control-icon-margin-start: theme(\"margin.2\");\n}\n\n:host([icon-start]) .label--scale-m {\n  --calcite-internal-segmented-control-icon-margin-end: theme(\"margin.3\");\n}\n\n:host([icon-end]) .label--scale-m {\n  --calcite-internal-segmented-control-icon-margin-start: theme(\"margin.3\");\n}\n\n:host([icon-start]) .label--scale-l {\n  --calcite-internal-segmented-control-icon-margin-end: theme(\"margin.4\");\n}\n\n:host([icon-end]) .label--scale-l {\n  --calcite-internal-segmented-control-icon-margin-start: theme(\"margin.4\");\n}\n\n.label .icon--solo {\n  --calcite-internal-segmented-control-icon-margin-start: 0;\n  --calcite-internal-segmented-control-icon-margin-end: 0;\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { slotChangeHasContent, toAriaBoolean } from \"../../utils/dom\";\nimport { Appearance, Layout, Scale } from \"../interfaces\";\nimport { CSS, SLOTS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-segmented-control-item\",\n  styleUrl: \"segmented-control-item.scss\",\n  shadow: true,\n})\nexport class SegmentedControlItem {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by form module\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  @Watch(\"checked\")\n  protected handleCheckedChange(): void {\n    this.calciteInternalSegmentedControlItemChange.emit();\n  }\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /**\n   * The component's value.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by form module\n  @Prop({ mutable: true }) value: any | null;\n\n  /**\n   * Specifies the appearance style of the component inherited from parent `calcite-segmented-control`, defaults to `solid`.\n   *\n   * @internal\n   */\n  @Prop() appearance: Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance> = \"solid\";\n\n  /**\n   * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`.\n   *\n   * @internal\n   */\n  @Prop() layout: Layout = \"horizontal\";\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-segmented-control`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale = \"m\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  private renderIcon(icon: string, solo: boolean = false): VNode {\n    return icon ? (\n      <calcite-icon\n        class={{\n          [CSS.icon]: true,\n          [CSS.iconSolo]: solo,\n        }}\n        flipRtl={this.iconFlipRtl}\n        icon={icon}\n        scale=\"s\"\n      />\n    ) : null;\n  }\n\n  render(): VNode {\n    const { appearance, checked, layout, scale, value } = this;\n\n    return (\n      <Host aria-checked={toAriaBoolean(checked)} aria-label={value} role=\"radio\">\n        <label\n          class={{\n            [CSS.label]: true,\n            [CSS.labelScale(scale)]: true,\n            [CSS.labelHorizontal]: layout === \"horizontal\",\n            [CSS.labelOutline]: appearance === \"outline\",\n            [CSS.labelOutlineFill]: appearance === \"outline-fill\",\n          }}\n        >\n          {this.renderContent()}\n        </label>\n      </Host>\n    );\n  }\n\n  private renderContent(): VNode | VNode[] {\n    const { hasSlottedContent, iconEnd, iconStart } = this;\n    const effectiveIcon = iconStart || iconEnd;\n    const canRenderIconOnly = !hasSlottedContent && effectiveIcon;\n\n    if (canRenderIconOnly) {\n      return [this.renderIcon(effectiveIcon, true), <slot onSlotchange={this.handleSlotChange} />];\n    }\n\n    return [\n      this.renderIcon(iconStart),\n      <slot onSlotchange={this.handleSlotChange} />,\n      <slot name={SLOTS.input} />,\n      this.renderIcon(iconEnd),\n    ];\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private handleSlotChange = (event: Event): void => {\n    this.hasSlottedContent = slotChangeHasContent(event);\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteSegmentedControlItemElement;\n\n  @State() hasSlottedContent = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the item has been selected.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalSegmentedControlItemChange: EventEmitter<void>;\n}\n"],"version":3}

package/dist/components/calcite-segmented-control.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { a as getElementDir } from './dom.js';
@@ -119,7 +119,7 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
         updateHostInteraction(this);
     }
     render() {
-        return (h(Host, { key: '1241947631795e70e18ad5f923ecaab81d75eae9', onClick: this.handleClick, role: "radiogroup" }, h("div", { key: '1e1172df2df7a6ecd307f2e927e4bc766b8a1418', class: CSS.itemWrapper }, h(InteractiveContainer, { key: '874fc408bafb73b99748769ec5d361848b1b1fff', disabled: this.disabled }, h("slot", { key: '629d9b015a690804e8548e4b50dde9ad4c3fa9b7' }), h(HiddenFormInputSlot, { key: '3fedcebb6e1fe5a8d5ef426d301f510e7c1fc4f3', component: this }))), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
+        return (h(Host, { key: '50faa0d049d2f0bcae98d8736280e995fc176b0f', onClick: this.handleClick, role: "radiogroup" }, h("div", { key: '070e333887507f0b1ceaee80f670ad858322a217', class: CSS.itemWrapper }, h(InteractiveContainer, { key: '580f183a1e8e53e09067806abd5b0bfde52a4f3b', disabled: this.disabled }, h("slot", { key: '8f02a31ad01304b3fbd970a1801721102607d280' }), h(HiddenFormInputSlot, { key: '5e4a2dea48865c02308ada4acfd1e89972e5a78b', component: this }))), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
     }
     handleSelected(event) {
         event.preventDefault();

package/dist/components/calcite-select.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { e as focusElement } from './dom.js';
@@ -85,8 +85,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.width = "auto";
     }
     valueHandler(value) {
-        const items = this.el.querySelectorAll("calcite-option");
-        items.forEach((item) => (item.selected = item.value === value));
+        this.updateItemsFromValue(value);
     }
     selectedOptionHandler(selectedOption) {
         this.value = selectedOption?.value;
@@ -114,6 +113,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     }
     componentWillLoad() {
         setUpLoadableComponent(this);
+        if (typeof this.value === "string") {
+            this.updateItemsFromValue(this.value);
+        }
     }
     componentDidLoad() {
         setComponentLoaded(this);
@@ -153,6 +155,11 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     onLabelClick() {
         this.setFocus();
     }
+    updateItemsFromValue(value) {
+        this.el
+            .querySelectorAll("calcite-option")
+            .forEach((item) => (item.selected = item.value === value));
+    }
     updateNativeElement(optionOrGroup, nativeOptionOrGroup) {
         nativeOptionOrGroup.disabled = optionOrGroup.disabled;
         nativeOptionOrGroup.label = optionOrGroup.label;
@@ -223,7 +230,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     }
     render() {
         const { disabled } = this;
-        return (h(Host, { key: '86822f587da89633e725f5fe6426f588f367b266' }, h(InteractiveContainer, { key: '93d728f3ee9cee364d439d7af2eda096a93bee10', disabled: disabled }, h("div", { key: 'e399054306a1f62b920ffbd0276fcb2da35950ad', class: CSS.wrapper }, h("select", { key: '08c94423618b06c1b56798440eaa862a5dc7895c', "aria-label": getLabelText(this), class: CSS.select, disabled: disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef }, h("slot", { key: '69a37437746520312d107451d0a1b6e622c622bc' })), this.renderChevron(), h(HiddenFormInputSlot, { key: 'ec18bb685b3b25fc88c758001399454ea924cd09', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        return (h(Host, { key: '7ad7273616547303b16b4acb5a0a7e74e6b70103' }, h(InteractiveContainer, { key: 'd4f38f4ee1836e7d2ef63b0ee6eb94e00ca363a5', disabled: disabled }, h("div", { key: '8e07dfd9a1ae6a76336229c6111999c1722af48a', class: CSS.wrapper }, h("select", { key: 'bb09bb53c0a6fdfd1cf81fcc901e470e4822be1d', "aria-label": getLabelText(this), class: CSS.select, disabled: disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef }, h("slot", { key: '3efcacc3bdb058e36d10c86bb87da89a1fd93994' })), this.renderChevron(), h(HiddenFormInputSlot, { key: '02af04d02f83b3542c46601f08a45cac63b3eecd', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/calcite-select.js.map

@@ -1 +1 @@
-{"file":"calcite-select.js","mappings":"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","names":[],"sources":["src/components/select/resources.ts","src/components/select/select.scss?tag=calcite-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["export const CSS = {\n  icon: \"icon\",\n  iconContainer: \"icon-container\",\n  select: \"select\",\n  wrapper: \"wrapper\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-select-font-size: The font size of `calcite-option`s in the component.\n * @prop --calcite-select-spacing: The padding around the selected option text.\n */\n\n:host {\n  @extend %component-spacing;\n  @apply flex flex-col;\n}\n\n.wrapper {\n  @apply relative flex items-stretch;\n  inline-size: var(--select-width);\n\n  &:focus-within,\n  &:active,\n  &:hover {\n    .icon {\n      color: var(--calcite-color-text-1);\n    }\n  }\n}\n\n@include disabled();\n\n:host([scale=\"s\"]) {\n  --calcite-select-font-size: theme(\"fontSize.n2h\");\n  --calcite-select-spacing-inline: theme(\"spacing.2\") theme(\"spacing.8\");\n\n  .wrapper {\n    @apply h-6;\n  }\n\n  .icon-container {\n    @apply px-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-select-font-size: theme(\"fontSize.n1h\");\n  --calcite-select-spacing-inline: theme(\"spacing.3\") theme(\"spacing.10\");\n\n  .wrapper {\n    @apply h-8;\n  }\n\n  .icon-container {\n    @apply px-3;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-select-font-size: theme(\"fontSize.0h\");\n  --calcite-select-spacing-inline: theme(\"spacing.4\") theme(\"spacing.12\");\n\n  .wrapper {\n    block-size: 44px;\n  }\n\n  .icon-container {\n    @apply px-4;\n  }\n}\n\n:host([width=\"auto\"]) {\n  @apply w-auto;\n}\n\n:host([width=\"half\"]) {\n  @apply w-1/2;\n}\n\n:host([width=\"full\"]) {\n  @apply w-full;\n}\n\n.select {\n  @apply bg-foreground-1 border-color-input text-color-2 font-inherit focus-base m-0 box-border w-full cursor-pointer appearance-none truncate rounded-none border border-solid;\n  font-size: var(--calcite-select-font-size);\n  padding-inline: var(--calcite-select-spacing-inline);\n  border-inline-end-width: theme(\"borderWidth.0\");\n\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\n// override user agent stylesheet disabled styling\nselect:disabled {\n  @apply border-color-input bg-opacity-100;\n}\n\n.icon-container {\n  @apply border-color-input text-color-2 pointer-events-none absolute inset-y-0 flex items-center border-0 border-solid bg-transparent;\n  inset-inline-end: theme(\"inset.0\");\n  border-inline-width: theme(\"borderWidth.0\") theme(\"borderWidth.DEFAULT\");\n\n  .icon {\n    color: var(--calcite-color-text-3);\n  }\n}\n\n:host([status=\"invalid\"]) {\n  select,\n  .icon-container {\n    @apply border-color-danger;\n  }\n\n  select:focus,\n  .icon-container:focus {\n    @apply focus-inset-danger;\n  }\n}\n\n.select:focus ~ .icon-container {\n  @apply border-color-transparent;\n}\n\n@include form-validation-message();\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { focusElement } from \"../../utils/dom\";\nimport {\n  afterConnectDefaultValueSet,\n  connectForm,\n  disconnectForm,\n  FormComponent,\n  HiddenFormInputSlot,\n  MutableValidityState,\n} from \"../../utils/form\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLabel, disconnectLabel, LabelableComponent, getLabelText } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { createObserver } from \"../../utils/observers\";\nimport { Scale, Status, Width } from \"../interfaces\";\nimport { getIconScale } from \"../../utils/component\";\nimport { Validation } from \"../functional/Validation\";\nimport { CSS } from \"./resources\";\n\ntype OptionOrGroup = HTMLCalciteOptionElement | HTMLCalciteOptionGroupElement;\ntype NativeOptionOrGroup = HTMLOptionElement | HTMLOptGroupElement;\n\nfunction isOption(optionOrGroup: OptionOrGroup): optionOrGroup is HTMLCalciteOptionElement {\n  return optionOrGroup.tagName === \"CALCITE-OPTION\";\n}\n\nfunction isOptionGroup(\n  optionOrGroup: OptionOrGroup,\n): optionOrGroup is HTMLCalciteOptionGroupElement {\n  return optionOrGroup.tagName === \"CALCITE-OPTION-GROUP\";\n}\n\n/**\n * @slot - A slot for adding `calcite-option`s.\n */\n@Component({\n  tag: \"calcite-select\",\n  styleUrl: \"select.scss\",\n  shadow: true,\n})\nexport class Select\n  implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true }) form: string;\n\n  /**\n   * Accessible name for the component.\n   *\n   */\n  @Prop() label!: string;\n\n  /** Specifies the validation message to display under the component. */\n  @Prop() validationMessage: string;\n\n  /** Specifies the validation icon to display under the component. */\n  @Prop({ reflect: true }) validationIcon: string | boolean;\n\n  /**\n   * The current validation state of the component.\n   *\n   * @readonly\n   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated in form util when syncing hidden input\n  @Prop({ mutable: true }) validity: MutableValidityState = {\n    valid: false,\n    badInput: false,\n    customError: false,\n    patternMismatch: false,\n    rangeOverflow: false,\n    rangeUnderflow: false,\n    stepMismatch: false,\n    tooLong: false,\n    tooShort: false,\n    typeMismatch: false,\n    valueMissing: false,\n  };\n\n  /**\n   * Specifies the name of the component.\n   *\n   * Required to pass the component's `value` on form submission.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /** When `true`, the component must have a value in order for the form to submit. */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** The component's `selectedOption` value. */\n  @Prop({ mutable: true }) value: string = null;\n\n  @Watch(\"value\")\n  valueHandler(value: string): void {\n    const items = this.el.querySelectorAll(\"calcite-option\");\n    items.forEach((item) => (item.selected = item.value === value));\n  }\n\n  /**\n   * The component's selected option `HTMLElement`.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedOption: HTMLCalciteOptionElement;\n\n  @Watch(\"selectedOption\")\n  selectedOptionHandler(selectedOption: HTMLCalciteOptionElement): void {\n    this.value = selectedOption?.value;\n  }\n\n  /**\n   * Specifies the width of the component.\n   */\n  @Prop({ reflect: true }) width: Width = \"auto\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteSelectElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultValue: Select[\"value\"];\n\n  private componentToNativeEl = new Map<OptionOrGroup, NativeOptionOrGroup>();\n\n  private mutationObserver = createObserver(\"mutation\", () => this.populateInternalSelect());\n\n  private selectEl: HTMLSelectElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    const { el } = this;\n\n    this.mutationObserver?.observe(el, {\n      subtree: true,\n      childList: true,\n    });\n\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    afterConnectDefaultValueSet(this, this.selectedOption?.value ?? \"\");\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    focusElement(this.selectEl);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the `selectedOption` changes.\n   */\n  @Event({ cancelable: false }) calciteSelectChange: EventEmitter<void>;\n\n  private handleInternalSelectChange = (): void => {\n    const selected = this.selectEl.selectedOptions[0];\n    this.selectFromNativeOption(selected);\n    requestAnimationFrame(() => this.emitChangeEvent());\n  };\n\n  @Listen(\"calciteInternalOptionChange\")\n  @Listen(\"calciteInternalOptionGroupChange\")\n  protected handleOptionOrGroupChange(event: CustomEvent): void {\n    event.stopPropagation();\n\n    const optionOrGroup = event.target as OptionOrGroup;\n    const nativeEl = this.componentToNativeEl.get(optionOrGroup);\n\n    if (!nativeEl) {\n      return;\n    }\n\n    this.updateNativeElement(optionOrGroup, nativeEl);\n\n    if (isOption(optionOrGroup) && optionOrGroup.selected) {\n      this.deselectAllExcept(optionOrGroup);\n      this.selectedOption = optionOrGroup;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onLabelClick(): void {\n    this.setFocus();\n  }\n\n  private updateNativeElement(\n    optionOrGroup: OptionOrGroup,\n    nativeOptionOrGroup: NativeOptionOrGroup,\n  ): void {\n    nativeOptionOrGroup.disabled = optionOrGroup.disabled;\n    nativeOptionOrGroup.label = optionOrGroup.label;\n\n    if (isOption(optionOrGroup)) {\n      const option = nativeOptionOrGroup as HTMLOptionElement;\n      option.selected = optionOrGroup.selected;\n      option.value = optionOrGroup.value;\n\n      // need to set innerText for mobile\n      // see https://stackoverflow.com/questions/35021620/ios-safari-not-showing-all-options-for-select-menu/41749701\n      option.innerText = optionOrGroup.label;\n    }\n  }\n\n  private populateInternalSelect = (): void => {\n    const optionsAndGroups = Array.from(\n      this.el.children as HTMLCollectionOf<OptionOrGroup | HTMLSlotElement>,\n    ).filter(\n      (child) => child.tagName === \"CALCITE-OPTION\" || child.tagName === \"CALCITE-OPTION-GROUP\",\n    ) as OptionOrGroup[];\n\n    this.clearInternalSelect();\n\n    optionsAndGroups.forEach((optionOrGroup) =>\n      this.selectEl?.append(this.toNativeElement(optionOrGroup)),\n    );\n  };\n\n  private clearInternalSelect(): void {\n    this.componentToNativeEl.forEach((value) => value.remove());\n    this.componentToNativeEl.clear();\n  }\n\n  private storeSelectRef = (node: HTMLSelectElement): void => {\n    this.selectEl = node;\n    this.populateInternalSelect();\n\n    const selected = this.selectEl.selectedOptions[0];\n    this.selectFromNativeOption(selected);\n  };\n\n  private selectFromNativeOption(nativeOption: HTMLOptionElement): void {\n    if (!nativeOption) {\n      return;\n    }\n\n    let futureSelected: HTMLCalciteOptionElement;\n\n    this.componentToNativeEl.forEach((nativeOptionOrGroup, optionOrGroup) => {\n      if (isOption(optionOrGroup) && nativeOptionOrGroup === nativeOption) {\n        optionOrGroup.selected = true;\n        futureSelected = optionOrGroup;\n        this.deselectAllExcept(optionOrGroup as HTMLCalciteOptionElement);\n      }\n    });\n\n    if (futureSelected) {\n      this.selectedOption = futureSelected;\n    }\n  }\n\n  private toNativeElement(\n    optionOrGroup: HTMLCalciteOptionElement | HTMLCalciteOptionGroupElement,\n  ): NativeOptionOrGroup {\n    if (isOption(optionOrGroup)) {\n      const option = document.createElement(\"option\");\n      this.updateNativeElement(optionOrGroup, option);\n      this.componentToNativeEl.set(optionOrGroup, option);\n\n      return option;\n    }\n\n    if (isOptionGroup(optionOrGroup)) {\n      const group = document.createElement(\"optgroup\");\n      this.updateNativeElement(optionOrGroup, group);\n\n      Array.from(optionOrGroup.children as HTMLCollectionOf<HTMLCalciteOptionElement>).forEach(\n        (option) => {\n          const nativeOption = this.toNativeElement(option);\n          group.append(nativeOption);\n          this.componentToNativeEl.set(optionOrGroup, nativeOption);\n        },\n      );\n\n      this.componentToNativeEl.set(optionOrGroup, group);\n\n      return group;\n    }\n\n    throw new Error(\"unsupported element child provided\");\n  }\n\n  private deselectAllExcept(except: HTMLCalciteOptionElement): void {\n    this.el.querySelectorAll<HTMLCalciteOptionElement>(\"calcite-option\").forEach((option) => {\n      if (option === except) {\n        return;\n      }\n\n      option.selected = false;\n    });\n  }\n\n  private emitChangeEvent = (): void => {\n    this.calciteSelectChange.emit();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderChevron(): VNode {\n    return (\n      <div class={CSS.iconContainer}>\n        <calcite-icon class={CSS.icon} icon=\"chevron-down\" scale={getIconScale(this.scale)} />\n      </div>\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <div class={CSS.wrapper}>\n            <select\n              aria-label={getLabelText(this)}\n              class={CSS.select}\n              disabled={disabled}\n              onChange={this.handleInternalSelectChange}\n              ref={this.storeSelectRef}\n            >\n              <slot />\n            </select>\n            {this.renderChevron()}\n            <HiddenFormInputSlot component={this} />\n          </div>\n          {this.validationMessage && this.status === \"invalid\" ? (\n            <Validation\n              icon={this.validationIcon}\n              message={this.validationMessage}\n              scale={this.scale}\n              status={this.status}\n            />\n          ) : null}\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-select.js","mappings":"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","names":[],"sources":["src/components/select/resources.ts","src/components/select/select.scss?tag=calcite-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":["export const CSS = {\n  icon: \"icon\",\n  iconContainer: \"icon-container\",\n  select: \"select\",\n  wrapper: \"wrapper\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-select-font-size: The font size of `calcite-option`s in the component.\n * @prop --calcite-select-spacing: The padding around the selected option text.\n */\n\n:host {\n  @extend %component-spacing;\n  @apply flex flex-col;\n}\n\n.wrapper {\n  @apply relative flex items-stretch;\n  inline-size: var(--select-width);\n\n  &:focus-within,\n  &:active,\n  &:hover {\n    .icon {\n      color: var(--calcite-color-text-1);\n    }\n  }\n}\n\n@include disabled();\n\n:host([scale=\"s\"]) {\n  --calcite-select-font-size: theme(\"fontSize.n2h\");\n  --calcite-select-spacing-inline: theme(\"spacing.2\") theme(\"spacing.8\");\n\n  .wrapper {\n    @apply h-6;\n  }\n\n  .icon-container {\n    @apply px-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  --calcite-select-font-size: theme(\"fontSize.n1h\");\n  --calcite-select-spacing-inline: theme(\"spacing.3\") theme(\"spacing.10\");\n\n  .wrapper {\n    @apply h-8;\n  }\n\n  .icon-container {\n    @apply px-3;\n  }\n}\n\n:host([scale=\"l\"]) {\n  --calcite-select-font-size: theme(\"fontSize.0h\");\n  --calcite-select-spacing-inline: theme(\"spacing.4\") theme(\"spacing.12\");\n\n  .wrapper {\n    block-size: 44px;\n  }\n\n  .icon-container {\n    @apply px-4;\n  }\n}\n\n:host([width=\"auto\"]) {\n  @apply w-auto;\n}\n\n:host([width=\"half\"]) {\n  @apply w-1/2;\n}\n\n:host([width=\"full\"]) {\n  @apply w-full;\n}\n\n.select {\n  @apply bg-foreground-1 border-color-input text-color-2 font-inherit focus-base m-0 box-border w-full cursor-pointer appearance-none truncate rounded-none border border-solid;\n  font-size: var(--calcite-select-font-size);\n  padding-inline: var(--calcite-select-spacing-inline);\n  border-inline-end-width: theme(\"borderWidth.0\");\n\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\n// override user agent stylesheet disabled styling\nselect:disabled {\n  @apply border-color-input bg-opacity-100;\n}\n\n.icon-container {\n  @apply border-color-input text-color-2 pointer-events-none absolute inset-y-0 flex items-center border-0 border-solid bg-transparent;\n  inset-inline-end: theme(\"inset.0\");\n  border-inline-width: theme(\"borderWidth.0\") theme(\"borderWidth.DEFAULT\");\n\n  .icon {\n    color: var(--calcite-color-text-3);\n  }\n}\n\n:host([status=\"invalid\"]) {\n  select,\n  .icon-container {\n    @apply border-color-danger;\n  }\n\n  select:focus,\n  .icon-container:focus {\n    @apply focus-inset-danger;\n  }\n}\n\n.select:focus ~ .icon-container {\n  @apply border-color-transparent;\n}\n\n@include form-validation-message();\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { focusElement } from \"../../utils/dom\";\nimport {\n  afterConnectDefaultValueSet,\n  connectForm,\n  disconnectForm,\n  FormComponent,\n  HiddenFormInputSlot,\n  MutableValidityState,\n} from \"../../utils/form\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { createObserver } from \"../../utils/observers\";\nimport { Scale, Status, Width } from \"../interfaces\";\nimport { getIconScale } from \"../../utils/component\";\nimport { Validation } from \"../functional/Validation\";\nimport { CSS } from \"./resources\";\n\ntype OptionOrGroup = HTMLCalciteOptionElement | HTMLCalciteOptionGroupElement;\ntype NativeOptionOrGroup = HTMLOptionElement | HTMLOptGroupElement;\n\nfunction isOption(optionOrGroup: OptionOrGroup): optionOrGroup is HTMLCalciteOptionElement {\n  return optionOrGroup.tagName === \"CALCITE-OPTION\";\n}\n\nfunction isOptionGroup(\n  optionOrGroup: OptionOrGroup,\n): optionOrGroup is HTMLCalciteOptionGroupElement {\n  return optionOrGroup.tagName === \"CALCITE-OPTION-GROUP\";\n}\n\n/**\n * @slot - A slot for adding `calcite-option`s.\n */\n@Component({\n  tag: \"calcite-select\",\n  styleUrl: \"select.scss\",\n  shadow: true,\n})\nexport class Select\n  implements LabelableComponent, FormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true }) form: string;\n\n  /**\n   * Accessible name for the component.\n   *\n   */\n  @Prop() label!: string;\n\n  /** Specifies the validation message to display under the component. */\n  @Prop() validationMessage: string;\n\n  /** Specifies the validation icon to display under the component. */\n  @Prop({ reflect: true }) validationIcon: string | boolean;\n\n  /**\n   * The current validation state of the component.\n   *\n   * @readonly\n   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated in form util when syncing hidden input\n  @Prop({ mutable: true }) validity: MutableValidityState = {\n    valid: false,\n    badInput: false,\n    customError: false,\n    patternMismatch: false,\n    rangeOverflow: false,\n    rangeUnderflow: false,\n    stepMismatch: false,\n    tooLong: false,\n    tooShort: false,\n    typeMismatch: false,\n    valueMissing: false,\n  };\n\n  /**\n   * Specifies the name of the component.\n   *\n   * Required to pass the component's `value` on form submission.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /** When `true`, the component must have a value in order for the form to submit. */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** The component's `selectedOption` value. */\n  @Prop({ mutable: true }) value: string = null;\n\n  @Watch(\"value\")\n  valueHandler(value: string): void {\n    this.updateItemsFromValue(value);\n  }\n\n  /**\n   * The component's selected option `HTMLElement`.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedOption: HTMLCalciteOptionElement;\n\n  @Watch(\"selectedOption\")\n  selectedOptionHandler(selectedOption: HTMLCalciteOptionElement): void {\n    this.value = selectedOption?.value;\n  }\n\n  /**\n   * Specifies the width of the component.\n   */\n  @Prop({ reflect: true }) width: Width = \"auto\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteSelectElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultValue: Select[\"value\"];\n\n  private componentToNativeEl = new Map<OptionOrGroup, NativeOptionOrGroup>();\n\n  private mutationObserver = createObserver(\"mutation\", () => this.populateInternalSelect());\n\n  private selectEl: HTMLSelectElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    const { el } = this;\n\n    this.mutationObserver?.observe(el, {\n      subtree: true,\n      childList: true,\n    });\n\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n\n    if (typeof this.value === \"string\") {\n      this.updateItemsFromValue(this.value);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    afterConnectDefaultValueSet(this, this.selectedOption?.value ?? \"\");\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    focusElement(this.selectEl);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the `selectedOption` changes.\n   */\n  @Event({ cancelable: false }) calciteSelectChange: EventEmitter<void>;\n\n  private handleInternalSelectChange = (): void => {\n    const selected = this.selectEl.selectedOptions[0];\n    this.selectFromNativeOption(selected);\n    requestAnimationFrame(() => this.emitChangeEvent());\n  };\n\n  @Listen(\"calciteInternalOptionChange\")\n  @Listen(\"calciteInternalOptionGroupChange\")\n  protected handleOptionOrGroupChange(event: CustomEvent): void {\n    event.stopPropagation();\n\n    const optionOrGroup = event.target as OptionOrGroup;\n    const nativeEl = this.componentToNativeEl.get(optionOrGroup);\n\n    if (!nativeEl) {\n      return;\n    }\n\n    this.updateNativeElement(optionOrGroup, nativeEl);\n\n    if (isOption(optionOrGroup) && optionOrGroup.selected) {\n      this.deselectAllExcept(optionOrGroup);\n      this.selectedOption = optionOrGroup;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onLabelClick(): void {\n    this.setFocus();\n  }\n\n  private updateItemsFromValue(value: string): void {\n    this.el\n      .querySelectorAll(\"calcite-option\")\n      .forEach((item) => (item.selected = item.value === value));\n  }\n\n  private updateNativeElement(\n    optionOrGroup: OptionOrGroup,\n    nativeOptionOrGroup: NativeOptionOrGroup,\n  ): void {\n    nativeOptionOrGroup.disabled = optionOrGroup.disabled;\n    nativeOptionOrGroup.label = optionOrGroup.label;\n\n    if (isOption(optionOrGroup)) {\n      const option = nativeOptionOrGroup as HTMLOptionElement;\n      option.selected = optionOrGroup.selected;\n      option.value = optionOrGroup.value;\n\n      // need to set innerText for mobile\n      // see https://stackoverflow.com/questions/35021620/ios-safari-not-showing-all-options-for-select-menu/41749701\n      option.innerText = optionOrGroup.label;\n    }\n  }\n\n  private populateInternalSelect = (): void => {\n    const optionsAndGroups = Array.from(\n      this.el.children as HTMLCollectionOf<OptionOrGroup | HTMLSlotElement>,\n    ).filter(\n      (child) => child.tagName === \"CALCITE-OPTION\" || child.tagName === \"CALCITE-OPTION-GROUP\",\n    ) as OptionOrGroup[];\n\n    this.clearInternalSelect();\n\n    optionsAndGroups.forEach((optionOrGroup) =>\n      this.selectEl?.append(this.toNativeElement(optionOrGroup)),\n    );\n  };\n\n  private clearInternalSelect(): void {\n    this.componentToNativeEl.forEach((value) => value.remove());\n    this.componentToNativeEl.clear();\n  }\n\n  private storeSelectRef = (node: HTMLSelectElement): void => {\n    this.selectEl = node;\n    this.populateInternalSelect();\n\n    const selected = this.selectEl.selectedOptions[0];\n    this.selectFromNativeOption(selected);\n  };\n\n  private selectFromNativeOption(nativeOption: HTMLOptionElement): void {\n    if (!nativeOption) {\n      return;\n    }\n\n    let futureSelected: HTMLCalciteOptionElement;\n\n    this.componentToNativeEl.forEach((nativeOptionOrGroup, optionOrGroup) => {\n      if (isOption(optionOrGroup) && nativeOptionOrGroup === nativeOption) {\n        optionOrGroup.selected = true;\n        futureSelected = optionOrGroup;\n        this.deselectAllExcept(optionOrGroup as HTMLCalciteOptionElement);\n      }\n    });\n\n    if (futureSelected) {\n      this.selectedOption = futureSelected;\n    }\n  }\n\n  private toNativeElement(\n    optionOrGroup: HTMLCalciteOptionElement | HTMLCalciteOptionGroupElement,\n  ): NativeOptionOrGroup {\n    if (isOption(optionOrGroup)) {\n      const option = document.createElement(\"option\");\n      this.updateNativeElement(optionOrGroup, option);\n      this.componentToNativeEl.set(optionOrGroup, option);\n\n      return option;\n    }\n\n    if (isOptionGroup(optionOrGroup)) {\n      const group = document.createElement(\"optgroup\");\n      this.updateNativeElement(optionOrGroup, group);\n\n      Array.from(optionOrGroup.children as HTMLCollectionOf<HTMLCalciteOptionElement>).forEach(\n        (option) => {\n          const nativeOption = this.toNativeElement(option);\n          group.append(nativeOption);\n          this.componentToNativeEl.set(optionOrGroup, nativeOption);\n        },\n      );\n\n      this.componentToNativeEl.set(optionOrGroup, group);\n\n      return group;\n    }\n\n    throw new Error(\"unsupported element child provided\");\n  }\n\n  private deselectAllExcept(except: HTMLCalciteOptionElement): void {\n    this.el.querySelectorAll<HTMLCalciteOptionElement>(\"calcite-option\").forEach((option) => {\n      if (option === except) {\n        return;\n      }\n\n      option.selected = false;\n    });\n  }\n\n  private emitChangeEvent = (): void => {\n    this.calciteSelectChange.emit();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderChevron(): VNode {\n    return (\n      <div class={CSS.iconContainer}>\n        <calcite-icon class={CSS.icon} icon=\"chevron-down\" scale={getIconScale(this.scale)} />\n      </div>\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <div class={CSS.wrapper}>\n            <select\n              aria-label={getLabelText(this)}\n              class={CSS.select}\n              disabled={disabled}\n              onChange={this.handleInternalSelectChange}\n              ref={this.storeSelectRef}\n            >\n              <slot />\n            </select>\n            {this.renderChevron()}\n            <HiddenFormInputSlot component={this} />\n          </div>\n          {this.validationMessage && this.status === \"invalid\" ? (\n            <Validation\n              icon={this.validationIcon}\n              message={this.validationMessage}\n              scale={this.scale}\n              status={this.status}\n            />\n          ) : null}\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/calcite-sheet.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { D as ensureId, a as getElementDir, f as focusFirstTabbable } from './dom.js';
+import { E as ensureId, a as getElementDir, f as focusFirstTabbable } from './dom.js';
 import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as createObserver } from './observers.js';

package/dist/components/calcite-shell-center-row.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-shell-panel.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, forceUpdate } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
-import { a as getElementDir, w as isPrimaryPointerButton, s as slotChangeGetAssignedElements, d as slotChangeHasAssignedElement } from './dom.js';
+import { a as getElementDir, x as isPrimaryPointerButton, s as slotChangeGetAssignedElements, d as slotChangeHasAssignedElement } from './dom.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { c as clamp } from './math.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';

package/dist/components/calcite-shell.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -153,7 +153,7 @@ const Shell = /*@__PURE__*/ proxyCustomElement(class Shell extends HTMLElement {
         return (h("div", { class: CSS.positionedSlotWrapper }, this.renderAlerts(), this.renderModals(), this.renderSheets()));
     }
     render() {
-        return (h(Fragment, { key: 'e56d4b175f9dee4381ac550b921dfc2f686e0aff' }, this.renderHeader(), this.renderMain(), this.renderFooter(), this.renderPositionedSlots()));
+        return (h(Fragment, { key: 'dec1862d2e9bfd53e523ad05089d443decbc8b4e' }, this.renderHeader(), this.renderMain(), this.renderFooter(), this.renderPositionedSlots()));
     }
     get el() { return this; }
     static get style() { return CalciteShellStyle0; }

package/dist/components/calcite-shell.js.map

@@ -1 +1 @@
-{"file":"calcite-shell.js","mappings":"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","names":[],"sources":["src/components/shell/resources.ts","src/components/shell/shell.scss?tag=calcite-shell&encapsulation=shadow","src/components/shell/shell.tsx"],"sourcesContent":["export const CSS = {\n  main: \"main\",\n  content: \"content\",\n  contentBehind: \"content--behind\",\n  contentNonInteractive: \"content--non-interactive\",\n  footer: \"footer\",\n  positionedSlotWrapper: \"positioned-slot-wrapper\",\n  container: \"container\",\n  contentBehindCenterContent: \"center-content\",\n};\n\nexport const SLOTS = {\n  centerRow: \"center-row\",\n  panelStart: \"panel-start\",\n  panelEnd: \"panel-end\",\n  panelTop: \"panel-top\",\n  panelBottom: \"panel-bottom\",\n  header: \"header\",\n  footer: \"footer\",\n  alerts: \"alerts\",\n  sheets: \"sheets\",\n  modals: \"modals\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-shell-tip-spacing: The left and right spacing of the `calcite-tip-manager` when slotted in the component.\n */\n\n:host {\n  @extend %component-host;\n  @apply absolute\n    inset-0\n    flex\n    h-full\n    w-full\n    flex-col\n    overflow-hidden;\n  --calcite-shell-tip-spacing: 26vw;\n}\n\n.main {\n  @apply relative\n    flex\n    h-full\n    w-full\n    flex-auto\n    flex-row\n    justify-between\n    overflow-hidden;\n}\n\n.content,\n.content--non-interactive {\n  @apply flex\n    h-full\n    w-full\n    flex-col\n    flex-nowrap;\n}\n\n.content {\n  @apply overflow-auto;\n}\n\n.content ::slotted(calcite-shell-center-row),\n.content ::slotted(calcite-panel),\n.content ::slotted(calcite-flow) {\n  @apply flex-auto self-stretch;\n  max-block-size: unset;\n}\n\n.content--behind {\n  @apply absolute\n    inset-0\n    border-0;\n  z-index: calc(theme(\"zIndex.default\") - 1);\n  display: initial;\n}\n\n.content--non-interactive {\n  @apply pointer-events-none;\n}\n\n::slotted(calcite-shell-center-row) {\n  inline-size: unset;\n}\n\n::slotted(.header .heading) {\n  @apply text-n2-wrap font-normal;\n}\n\nslot[name=\"panel-end\"]::slotted(calcite-shell-panel) {\n  margin-inline-start: auto;\n}\n\n::slotted(calcite-panel),\n::slotted(calcite-flow) {\n  @apply border-color-3\n  border\n  border-l-0\n  border-r-0\n  border-solid;\n}\n\nslot[name=\"center-row\"]::slotted(calcite-shell-center-row:not([detached])),\nslot[name=\"panel-top\"]::slotted(calcite-shell-center-row:not([detached])),\nslot[name=\"panel-bottom\"]::slotted(calcite-shell-center-row:not([detached])) {\n  @apply border-color-3 border-l border-r;\n}\n\n.center-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  block-size: 100%;\n  inline-size: 100%;\n  min-inline-size: 0;\n}\n\n::slotted(calcite-shell-center-row) {\n  flex: none;\n  align-self: stretch;\n}\n\n::slotted(calcite-tip-manager) {\n  @apply shadow-2\n  animate-in-up\n  absolute\n  box-border\n  rounded\n  z-toast;\n  inset-block-end: theme(\"spacing.2\");\n  inset-inline: var(--calcite-shell-tip-spacing);\n}\n\nslot[name=\"center-row\"]::slotted(calcite-shell-center-row),\nslot[name=\"panel-bottom\"]::slotted(calcite-shell-center-row) {\n  margin-block-start: auto;\n}\n\nslot[name=\"panel-top\"]::slotted(calcite-shell-center-row) {\n  margin-block-end: auto;\n}\n\n// positioning logic for expected slotted components\n.position-wrapper {\n  position: absolute;\n  pointer-events: none;\n  inset: 0;\n}\n\n@include base-component();\n","import { Component, Element, Fragment, h, Listen, Prop, State, VNode } from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { slotChangeGetAssignedElements, slotChangeHasAssignedElement } from \"../../utils/dom\";\nimport { CSS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map.\n * @slot header - A slot for adding header content. This content will be positioned at the top of the component.\n * @slot footer - A slot for adding footer content. This content will be positioned at the bottom of the component.\n * @slot panel-start - A slot for adding the starting `calcite-shell-panel`.\n * @slot panel-end - A slot for adding the ending `calcite-shell-panel`.\n * @slot panel-top - A slot for adding the top `calcite-shell-center-row`.\n * @slot panel-bottom - A slot for adding the bottom `calcite-shell-center-row`.\n * @slot center-row - [Deprecated] Use the `\"panel-bottom\"` slot instead. A slot for adding the bottom `calcite-shell-center-row`.\n * @slot modals - A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the shell.\n * @slot alerts - A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the shell.\n * @slot sheets - A slot for adding `calcite-sheet` components. When placed in this slot, the sheet position will be constrained to the extent of the shell.\n */\n\n@Component({\n  tag: \"calcite-shell\",\n  styleUrl: \"shell.scss\",\n  shadow: true,\n})\nexport class Shell implements ConditionalSlotComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Positions the center content behind any `calcite-shell-panel`s.\n   */\n  @Prop({ reflect: true }) contentBehind = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalShellPanelResizeStart\")\n  handleCalciteInternalShellPanelResizeStart(event: CustomEvent<void>): void {\n    this.panelIsResizing = true;\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalShellPanelResizeEnd\")\n  handleCalciteInternalShellPanelResizeEnd(event: CustomEvent<void>): void {\n    this.panelIsResizing = false;\n    event.stopPropagation();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteShellElement;\n\n  @State() hasHeader = false;\n\n  @State() hasFooter = false;\n\n  @State() hasAlerts = false;\n\n  @State() hasModals = false;\n\n  @State() hasSheets = false;\n\n  @State() panelIsResizing = false;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleHeaderSlotChange = (event: Event): void => {\n    this.hasHeader = !!slotChangeHasAssignedElement(event);\n  };\n\n  handleFooterSlotChange = (event: Event): void => {\n    this.hasFooter = !!slotChangeHasAssignedElement(event);\n  };\n\n  handleAlertsSlotChange = (event: Event): void => {\n    this.hasAlerts = !!slotChangeHasAssignedElement(event);\n    slotChangeGetAssignedElements(event)?.map((el) => {\n      if (el.nodeName === \"CALCITE-ALERT\") {\n        (el as HTMLCalciteAlertElement).slottedInShell = true;\n      }\n    });\n  };\n\n  handleSheetsSlotChange = (event: Event): void => {\n    this.hasSheets = !!slotChangeHasAssignedElement(event);\n    slotChangeGetAssignedElements(event)?.map((el) => {\n      if (el.nodeName === \"CALCITE-SHEET\") {\n        (el as HTMLCalciteSheetElement).slottedInShell = true;\n      }\n    });\n  };\n\n  handleModalsSlotChange = (event: Event): void => {\n    this.hasModals = !!slotChangeHasAssignedElement(event);\n    slotChangeGetAssignedElements(event)?.map((el) => {\n      if (el.nodeName === \"CALCITE-MODAL\") {\n        (el as HTMLCalciteModalElement).slottedInShell = true;\n      }\n    });\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderHeader(): VNode {\n    return (\n      <div hidden={!this.hasHeader}>\n        <slot key=\"header\" name={SLOTS.header} onSlotchange={this.handleHeaderSlotChange} />\n      </div>\n    );\n  }\n\n  renderFooter(): VNode {\n    return (\n      <div class={CSS.footer} hidden={!this.hasFooter} key=\"footer\">\n        <slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange} />\n      </div>\n    );\n  }\n\n  renderAlerts(): VNode {\n    return (\n      <div hidden={!this.hasAlerts}>\n        <slot key=\"alerts\" name={SLOTS.alerts} onSlotchange={this.handleAlertsSlotChange} />\n      </div>\n    );\n  }\n\n  renderSheets(): VNode {\n    return (\n      <div hidden={!this.hasSheets}>\n        <slot key=\"sheets\" name={SLOTS.sheets} onSlotchange={this.handleSheetsSlotChange} />\n      </div>\n    );\n  }\n\n  renderModals(): VNode {\n    return (\n      <div hidden={!this.hasModals}>\n        <slot key=\"modals\" name={SLOTS.modals} onSlotchange={this.handleModalsSlotChange} />\n      </div>\n    );\n  }\n\n  renderContent(): VNode[] {\n    const { panelIsResizing } = this;\n    const defaultSlotNode: VNode = <slot key=\"default-slot\" />;\n    const defaultSlotContainerNode = panelIsResizing ? (\n      <div class={CSS.contentNonInteractive}>{defaultSlotNode}</div>\n    ) : (\n      defaultSlotNode\n    );\n    const deprecatedCenterRowSlotNode: VNode = (\n      <slot key=\"center-row-slot\" name={SLOTS.centerRow} />\n    );\n    const panelBottomSlotNode: VNode = <slot key=\"panel-bottom-slot\" name={SLOTS.panelBottom} />;\n    const panelTopSlotNode: VNode = <slot key=\"panel-top-slot\" name={SLOTS.panelTop} />;\n\n    const contentContainerKey = \"content-container\";\n\n    const content = this.contentBehind\n      ? [\n          <div\n            class={{\n              [CSS.content]: true,\n              [CSS.contentBehind]: true,\n            }}\n            key={contentContainerKey}\n          >\n            {defaultSlotContainerNode}\n          </div>,\n          <div class={CSS.contentBehindCenterContent}>\n            {panelTopSlotNode}\n            {panelBottomSlotNode}\n            {deprecatedCenterRowSlotNode}\n          </div>,\n        ]\n      : [\n          <div class={CSS.content} key={contentContainerKey}>\n            {panelTopSlotNode}\n            {defaultSlotContainerNode}\n            {panelBottomSlotNode}\n            {deprecatedCenterRowSlotNode}\n          </div>,\n        ];\n\n    return content;\n  }\n\n  renderMain(): VNode {\n    return (\n      <div class={CSS.main}>\n        <slot name={SLOTS.panelStart} />\n        {this.renderContent()}\n        <slot name={SLOTS.panelEnd} />\n      </div>\n    );\n  }\n\n  renderPositionedSlots(): VNode {\n    return (\n      <div class={CSS.positionedSlotWrapper}>\n        {this.renderAlerts()}\n        {this.renderModals()}\n        {this.renderSheets()}\n      </div>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <Fragment>\n        {this.renderHeader()}\n        {this.renderMain()}\n        {this.renderFooter()}\n        {this.renderPositionedSlots()}\n      </Fragment>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-shell.js","mappings":"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","names":[],"sources":["src/components/shell/resources.ts","src/components/shell/shell.scss?tag=calcite-shell&encapsulation=shadow","src/components/shell/shell.tsx"],"sourcesContent":["export const CSS = {\n  main: \"main\",\n  content: \"content\",\n  contentBehind: \"content--behind\",\n  contentNonInteractive: \"content--non-interactive\",\n  footer: \"footer\",\n  positionedSlotWrapper: \"positioned-slot-wrapper\",\n  container: \"container\",\n  contentBehindCenterContent: \"center-content\",\n};\n\nexport const SLOTS = {\n  centerRow: \"center-row\",\n  panelStart: \"panel-start\",\n  panelEnd: \"panel-end\",\n  panelTop: \"panel-top\",\n  panelBottom: \"panel-bottom\",\n  header: \"header\",\n  footer: \"footer\",\n  alerts: \"alerts\",\n  sheets: \"sheets\",\n  modals: \"modals\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-shell-tip-spacing: The left and right spacing of the `calcite-tip-manager` when slotted in the component.\n */\n\n:host {\n  @extend %component-host;\n  @apply absolute\n    inset-0\n    flex\n    h-full\n    w-full\n    flex-col\n    overflow-hidden;\n  --calcite-shell-tip-spacing: 26vw;\n}\n\n.main {\n  @apply relative\n    flex\n    h-full\n    w-full\n    flex-auto\n    flex-row\n    justify-between\n    overflow-hidden;\n}\n\n.content,\n.content--non-interactive {\n  @apply flex\n    h-full\n    w-full\n    flex-col\n    flex-nowrap;\n}\n\n.content {\n  @apply overflow-auto;\n}\n\n.content ::slotted(calcite-shell-center-row),\n.content ::slotted(calcite-panel),\n.content ::slotted(calcite-flow) {\n  @apply flex-auto self-stretch;\n  max-block-size: unset;\n}\n\n.content--behind {\n  @apply absolute\n    inset-0\n    border-0;\n  z-index: calc(theme(\"zIndex.default\") - 1);\n  display: initial;\n}\n\n.content--non-interactive {\n  @apply pointer-events-none;\n}\n\n::slotted(calcite-shell-center-row) {\n  inline-size: unset;\n}\n\n::slotted(.header .heading) {\n  @apply text-n2-wrap font-normal;\n}\n\nslot[name=\"panel-end\"]::slotted(calcite-shell-panel) {\n  margin-inline-start: auto;\n}\n\n::slotted(calcite-panel),\n::slotted(calcite-flow) {\n  @apply border-color-3\n  border\n  border-l-0\n  border-r-0\n  border-solid;\n}\n\nslot[name=\"center-row\"]::slotted(calcite-shell-center-row:not([detached])),\nslot[name=\"panel-top\"]::slotted(calcite-shell-center-row:not([detached])),\nslot[name=\"panel-bottom\"]::slotted(calcite-shell-center-row:not([detached])) {\n  @apply border-color-3 border-l border-r;\n}\n\n.center-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  block-size: 100%;\n  inline-size: 100%;\n  min-inline-size: 0;\n}\n\n::slotted(calcite-shell-center-row) {\n  flex: none;\n  align-self: stretch;\n}\n\n::slotted(calcite-tip-manager) {\n  @apply shadow-2\n  animate-in-up\n  absolute\n  box-border\n  rounded\n  z-toast;\n  inset-block-end: theme(\"spacing.2\");\n  inset-inline: var(--calcite-shell-tip-spacing);\n}\n\nslot[name=\"center-row\"]::slotted(calcite-shell-center-row),\nslot[name=\"panel-bottom\"]::slotted(calcite-shell-center-row) {\n  margin-block-start: auto;\n}\n\nslot[name=\"panel-top\"]::slotted(calcite-shell-center-row) {\n  margin-block-end: auto;\n}\n\n// positioning logic for expected slotted components\n.position-wrapper {\n  position: absolute;\n  pointer-events: none;\n  inset: 0;\n}\n\n@include base-component();\n","import { Component, Element, Fragment, h, Listen, Prop, State, VNode } from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport { slotChangeGetAssignedElements, slotChangeHasAssignedElement } from \"../../utils/dom\";\nimport { CSS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map.\n * @slot header - A slot for adding header content. This content will be positioned at the top of the component.\n * @slot footer - A slot for adding footer content. This content will be positioned at the bottom of the component.\n * @slot panel-start - A slot for adding the starting `calcite-shell-panel`.\n * @slot panel-end - A slot for adding the ending `calcite-shell-panel`.\n * @slot panel-top - A slot for adding the top `calcite-shell-panel`.\n * @slot panel-bottom - A slot for adding the bottom `calcite-shell-panel`.\n * @slot center-row - [Deprecated] Use the `\"panel-bottom\"` slot instead. A slot for adding the bottom `calcite-shell-center-row`.\n * @slot modals - A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the `calcite-shell`.\n * @slot alerts - A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the `calcite-shell`.\n * @slot sheets - A slot for adding `calcite-sheet` components. When placed in this slot, the sheet position will be constrained to the extent of the `calcite-shell`.\n */\n\n@Component({\n  tag: \"calcite-shell\",\n  styleUrl: \"shell.scss\",\n  shadow: true,\n})\nexport class Shell implements ConditionalSlotComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Positions the center content behind any `calcite-shell-panel`s.\n   */\n  @Prop({ reflect: true }) contentBehind = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalShellPanelResizeStart\")\n  handleCalciteInternalShellPanelResizeStart(event: CustomEvent<void>): void {\n    this.panelIsResizing = true;\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalShellPanelResizeEnd\")\n  handleCalciteInternalShellPanelResizeEnd(event: CustomEvent<void>): void {\n    this.panelIsResizing = false;\n    event.stopPropagation();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteShellElement;\n\n  @State() hasHeader = false;\n\n  @State() hasFooter = false;\n\n  @State() hasAlerts = false;\n\n  @State() hasModals = false;\n\n  @State() hasSheets = false;\n\n  @State() panelIsResizing = false;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleHeaderSlotChange = (event: Event): void => {\n    this.hasHeader = !!slotChangeHasAssignedElement(event);\n  };\n\n  handleFooterSlotChange = (event: Event): void => {\n    this.hasFooter = !!slotChangeHasAssignedElement(event);\n  };\n\n  handleAlertsSlotChange = (event: Event): void => {\n    this.hasAlerts = !!slotChangeHasAssignedElement(event);\n    slotChangeGetAssignedElements(event)?.map((el) => {\n      if (el.nodeName === \"CALCITE-ALERT\") {\n        (el as HTMLCalciteAlertElement).slottedInShell = true;\n      }\n    });\n  };\n\n  handleSheetsSlotChange = (event: Event): void => {\n    this.hasSheets = !!slotChangeHasAssignedElement(event);\n    slotChangeGetAssignedElements(event)?.map((el) => {\n      if (el.nodeName === \"CALCITE-SHEET\") {\n        (el as HTMLCalciteSheetElement).slottedInShell = true;\n      }\n    });\n  };\n\n  handleModalsSlotChange = (event: Event): void => {\n    this.hasModals = !!slotChangeHasAssignedElement(event);\n    slotChangeGetAssignedElements(event)?.map((el) => {\n      if (el.nodeName === \"CALCITE-MODAL\") {\n        (el as HTMLCalciteModalElement).slottedInShell = true;\n      }\n    });\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderHeader(): VNode {\n    return (\n      <div hidden={!this.hasHeader}>\n        <slot key=\"header\" name={SLOTS.header} onSlotchange={this.handleHeaderSlotChange} />\n      </div>\n    );\n  }\n\n  renderFooter(): VNode {\n    return (\n      <div class={CSS.footer} hidden={!this.hasFooter} key=\"footer\">\n        <slot name={SLOTS.footer} onSlotchange={this.handleFooterSlotChange} />\n      </div>\n    );\n  }\n\n  renderAlerts(): VNode {\n    return (\n      <div hidden={!this.hasAlerts}>\n        <slot key=\"alerts\" name={SLOTS.alerts} onSlotchange={this.handleAlertsSlotChange} />\n      </div>\n    );\n  }\n\n  renderSheets(): VNode {\n    return (\n      <div hidden={!this.hasSheets}>\n        <slot key=\"sheets\" name={SLOTS.sheets} onSlotchange={this.handleSheetsSlotChange} />\n      </div>\n    );\n  }\n\n  renderModals(): VNode {\n    return (\n      <div hidden={!this.hasModals}>\n        <slot key=\"modals\" name={SLOTS.modals} onSlotchange={this.handleModalsSlotChange} />\n      </div>\n    );\n  }\n\n  renderContent(): VNode[] {\n    const { panelIsResizing } = this;\n    const defaultSlotNode: VNode = <slot key=\"default-slot\" />;\n    const defaultSlotContainerNode = panelIsResizing ? (\n      <div class={CSS.contentNonInteractive}>{defaultSlotNode}</div>\n    ) : (\n      defaultSlotNode\n    );\n    const deprecatedCenterRowSlotNode: VNode = (\n      <slot key=\"center-row-slot\" name={SLOTS.centerRow} />\n    );\n    const panelBottomSlotNode: VNode = <slot key=\"panel-bottom-slot\" name={SLOTS.panelBottom} />;\n    const panelTopSlotNode: VNode = <slot key=\"panel-top-slot\" name={SLOTS.panelTop} />;\n\n    const contentContainerKey = \"content-container\";\n\n    const content = this.contentBehind\n      ? [\n          <div\n            class={{\n              [CSS.content]: true,\n              [CSS.contentBehind]: true,\n            }}\n            key={contentContainerKey}\n          >\n            {defaultSlotContainerNode}\n          </div>,\n          <div class={CSS.contentBehindCenterContent}>\n            {panelTopSlotNode}\n            {panelBottomSlotNode}\n            {deprecatedCenterRowSlotNode}\n          </div>,\n        ]\n      : [\n          <div class={CSS.content} key={contentContainerKey}>\n            {panelTopSlotNode}\n            {defaultSlotContainerNode}\n            {panelBottomSlotNode}\n            {deprecatedCenterRowSlotNode}\n          </div>,\n        ];\n\n    return content;\n  }\n\n  renderMain(): VNode {\n    return (\n      <div class={CSS.main}>\n        <slot name={SLOTS.panelStart} />\n        {this.renderContent()}\n        <slot name={SLOTS.panelEnd} />\n      </div>\n    );\n  }\n\n  renderPositionedSlots(): VNode {\n    return (\n      <div class={CSS.positionedSlotWrapper}>\n        {this.renderAlerts()}\n        {this.renderModals()}\n        {this.renderSheets()}\n      </div>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <Fragment>\n        {this.renderHeader()}\n        {this.renderMain()}\n        {this.renderFooter()}\n        {this.renderPositionedSlots()}\n      </Fragment>\n    );\n  }\n}\n"],"version":3}

package/dist/components/calcite-slider.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';
-import { w as isPrimaryPointerButton, C as intersects } from './dom.js';
+import { x as isPrimaryPointerButton, D as intersects } from './dom.js';
 import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';
 import { i as isActivationKey } from './key.js';

package/dist/components/calcite-sortable-list.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive.js';

package/dist/components/calcite-split-button.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
@@ -20,7 +20,7 @@ const CSS = {
     widthFull: "width-full",
 };
 
-const splitButtonCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}:host:host([kind=brand]){--calcite-split-button-background:var(--calcite-color-brand);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host:host([kind=danger]){--calcite-split-button-background:var(--calcite-color-status-danger);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host:host([kind=neutral]){--calcite-split-button-background:var(--calcite-color-foreground-3);--calcite-split-button-divider:var(--calcite-color-text-1)}:host:host([kind=inverse]){--calcite-split-button-background:var(--calcite-color-inverse);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host([appearance=transparent]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-color-text-1);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-color-foreground-1);--calcite-split-button-background:transparent}:host([appearance=outline]){--calcite-split-button-background:transparent}:host([appearance=outline-fill]){--calcite-split-button-background:var(--calcite-color-foreground-1)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand)}:host([appearance=outline]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger)}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-color-border-1);--calcite-split-button-background:var(--calcite-color-border-1)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-color-inverse)}.container{display:flex;align-items:stretch}.container>calcite-dropdown>calcite-button{block-size:100%;vertical-align:top}.divider-container{display:flex;inline-size:1px;align-items:stretch;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-split-button-background)}.divider{margin-block:0.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]) .divider-container,:host([appearance=outline]) .divider-container{border-block:1px solid var(--calcite-split-button-divider)}:host([appearance=outline-fill]):hover .divider-container,:host([appearance=outline]):hover .divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:hover) .divider-container,:host([appearance=outline]:hover) .divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:focus-within):host([kind=brand]),:host([appearance=outline]:focus-within):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand-press)}:host([appearance=outline-fill]:focus-within):host([kind=danger]),:host([appearance=outline]:focus-within):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger-press)}:host([appearance=outline-fill]:focus-within) .divider-container,:host([appearance=outline]:focus-within) .divider-container{background-color:var(--calcite-split-button-divider)}:host([disabled]) .divider-container{opacity:var(--calcite-opacity-disabled)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const splitButtonCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}:host([kind=brand]){--calcite-split-button-background:var(--calcite-color-brand);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host([kind=danger]){--calcite-split-button-background:var(--calcite-color-status-danger);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host([kind=neutral]){--calcite-split-button-background:var(--calcite-color-foreground-3);--calcite-split-button-divider:var(--calcite-color-text-1)}:host([kind=inverse]){--calcite-split-button-background:var(--calcite-color-inverse);--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host([appearance=transparent]){--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand)}:host([appearance=transparent]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger)}:host([appearance=transparent]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-color-text-1)}:host([appearance=transparent]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-color-foreground-1)}:host([appearance=outline]),:host([appearance=outline-fill]){--calcite-split-button-background:transparent}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand)}:host([appearance=outline]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger)}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-color-border-1)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-color-inverse)}.container{display:flex;align-items:stretch}.container>calcite-dropdown>calcite-button{block-size:100%;vertical-align:top}.divider-container{display:flex;inline-size:1px;align-items:stretch;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-split-button-background)}.divider{margin-block:0.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]) .divider-container,:host([appearance=outline]) .divider-container{border-block:1px solid var(--calcite-split-button-divider)}:host([appearance=outline-fill]):hover .divider-container,:host([appearance=outline]):hover .divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:hover) .divider-container,:host([appearance=outline]:hover) .divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:focus-within):host([kind=brand]),:host([appearance=outline]:focus-within):host([kind=brand]){--calcite-split-button-divider:var(--calcite-color-brand-press)}:host([appearance=outline-fill]:focus-within):host([kind=danger]),:host([appearance=outline]:focus-within):host([kind=danger]){--calcite-split-button-divider:var(--calcite-color-status-danger-press)}:host([appearance=outline-fill]:focus-within) .divider-container,:host([appearance=outline]:focus-within) .divider-container{background-color:var(--calcite-split-button-divider)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteSplitButtonStyle0 = splitButtonCss;
 
 const SplitButton = /*@__PURE__*/ proxyCustomElement(class SplitButton extends HTMLElement {