@esri/calcite-components 2.4.1-next.0 → 2.5.0-next.0

package/dist/components/calcite-rating.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.4.1-next.0
+ * v2.5.0-next.0
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
@@ -19,7 +19,7 @@ const StarIcon = ({ full, scale, partial }) => (h("calcite-icon", { class: parti
     icon: full ? "star-f" : "star",
     scale }));
 
-const ratingCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([read-only]) *,:host([disabled]) *,:host([read-only]) ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;align-items:center;inline-size:-moz-fit-content;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){block-size:1.5rem;--calcite-rating-spacing-unit:0.25rem}:host([scale=m]){block-size:2rem;--calcite-rating-spacing-unit:0.5rem}:host([scale=l]){block-size:2.75rem;--calcite-rating-spacing-unit:0.75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing-unit)}.wrapper{display:inline-block}.star{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-color-border-input)}.star:focus{outline:2px solid 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          )}.average,.fraction{color:var(--calcite-color-status-warning)}.hovered,.selected{color:var(--calcite-color-brand)}.fraction{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}calcite-chip{pointer-events:none;cursor:default}.number--average{font-weight:bold}.number--count{color:var(--calcite-color-text-2);font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing-unit)}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const ratingCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([read-only]) *,:host([disabled]) *,:host([read-only]) ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;align-items:center;inline-size:-moz-fit-content;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){block-size:1.5rem;--calcite-rating-spacing-unit:0.25rem}:host([scale=m]){block-size:2rem;--calcite-rating-spacing-unit:0.5rem}:host([scale=l]){block-size:2.75rem;--calcite-rating-spacing-unit:0.75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing-unit)}.wrapper{display:inline-block}.star{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-color-border-input)}.star:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, 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          )}.average,.fraction{color:var(--calcite-color-status-warning)}.hovered,.selected{color:var(--calcite-color-brand)}.fraction{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}calcite-chip{pointer-events:none;cursor:default}.number--average{font-weight:bold}.number--count{color:var(--calcite-color-text-2);font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing-unit)}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Rating = /*@__PURE__*/ proxyCustomElement(class Rating extends HTMLElement {
     constructor() {

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

@@ -1 +1 @@
-{"file":"calcite-rating.js","mappings":"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","names":[],"sources":["src/components/rating/functional/star.tsx","src/components/rating/rating.scss?tag=calcite-rating&encapsulation=shadow","src/components/rating/rating.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\n\nimport { StarIconProps } from \"../interfaces\";\n\nexport const StarIcon: FunctionalComponent<StarIconProps> = ({ full, scale, partial }) => (\n  <calcite-icon\n    {...{\n      class: partial ? undefined : \"icon\",\n      icon: full ? \"star-f\" : \"star\",\n      scale,\n    }}\n  />\n);\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-rating-spacing-unit: The amount of left and right margin spacing between each rating star.\n */\n\n:host {\n  @apply relative flex items-center;\n  inline-size: fit-content;\n}\n\n@include disabled();\n\n:host([scale=\"s\"]) {\n  @apply h-6;\n  --calcite-rating-spacing-unit: theme(\"spacing.1\");\n}\n\n:host([scale=\"m\"]) {\n  @apply h-8;\n  --calcite-rating-spacing-unit: theme(\"spacing.2\");\n}\n\n:host([scale=\"l\"]) {\n  @apply h-11;\n  --calcite-rating-spacing-unit: theme(\"spacing.3\");\n}\n\n:host([read-only]) {\n  @extend %non-interactive-host-contents;\n}\n\n.fieldset {\n  margin: 0;\n  display: flex;\n  border-width: 0;\n  padding: 0;\n  align-items: center;\n  gap: var(--calcite-rating-spacing-unit);\n}\n\n.wrapper {\n  display: inline-block;\n}\n\n.star {\n  @apply transition-default;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  color: theme(\"borderColor.color.input\");\n  &:focus {\n    @apply focus-outset;\n  }\n}\n\n.average,\n.fraction {\n  color: theme(\"colors.warning\");\n}\n\n.hovered,\n.selected {\n  color: theme(\"colors.brand\");\n}\n\n.fraction {\n  @apply transition-default;\n  position: absolute;\n  pointer-events: none;\n  inset-block-start: 0;\n  overflow: hidden;\n  inset-inline-start: 0;\n}\n\n// rating count\ncalcite-chip {\n  pointer-events: none;\n  cursor: default;\n}\n\n.number--average {\n  font-weight: bold;\n}\n\n.number--count {\n  color: var(--calcite-color-text-2);\n  font-style: italic;\n  &:not(:first-child) {\n    margin-inline-start: var(--calcite-rating-spacing-unit);\n  }\n}\n\n.visually-hidden {\n  @apply sr-only;\n}\n\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from \"../../utils/form\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLabel, disconnectLabel, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Scale } from \"../interfaces\";\nimport { RatingMessages } from \"./assets/rating/t9n\";\nimport { StarIcon } from \"./functional/star\";\nimport { Star } from \"./interfaces\";\nimport { focusFirstTabbable } from \"../../utils/dom\";\n\n@Component({\n  tag: \"calcite-rating\",\n  styleUrl: \"rating.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Rating\n  implements\n    LabelableComponent,\n    FormComponent,\n    InteractiveComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** Specifies a cumulative average from previous ratings to display. */\n  @Prop({ reflect: true }) average: number;\n\n  /** Specifies the number of previous ratings to display. */\n  @Prop({ reflect: true }) count: number;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\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   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: RatingMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<RatingMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\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's value can be read, but cannot be modified. */\n  @Prop({ reflect: true }) readOnly = false;\n\n  /**\n   * When `true`, the component must have a value in order for the form to submit.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. */\n  @Prop({ reflect: true }) showChip = false;\n\n  /** The component's value. */\n  @Prop({ reflect: true, mutable: true }) value = 0;\n\n  @Watch(\"value\")\n  handleValueUpdate(newValue: number): void {\n    this.hoverValue = newValue;\n    if (this.emit) {\n      this.calciteRatingChange.emit();\n    }\n\n    this.emit = false;\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the component's value changes.\n   */\n  @Event({ cancelable: false }) calciteRatingChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Static\n  //\n  //--------------------------------------------------------------------------\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: RatingMessages;\n\n  @State() hoverValue: number;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentWillRender(): void {\n    this.starsMap = Array.from({ length: this.max }, (_, i) => {\n      const value = i + 1;\n      const average = !this.hoverValue && this.average && !this.value && value <= this.average;\n      const checked = value === this.value;\n      const fraction = this.average && this.average + 1 - value;\n      const hovered = value <= this.hoverValue;\n      const id = `${this.guid}-${value}`;\n      const partial = !this.hoverValue && !this.value && !hovered && fraction > 0 && fraction < 1;\n      const selected = this.value >= value;\n      const tabIndex = this.getTabIndex(value);\n      return {\n        average,\n        checked,\n        fraction,\n        hovered,\n        id,\n        partial,\n        selected,\n        value,\n        tabIndex,\n      };\n    });\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleHostKeyDown}\n        onPointerOut={this.handleRatingPointerOut}\n        onPointerOver={this.handleRatingPointerOver}\n      >\n        <InteractiveContainer disabled={this.disabled}>\n          <span class=\"wrapper\">\n            <fieldset class=\"fieldset\" disabled={this.disabled}>\n              <legend class=\"visually-hidden\">{this.messages.rating}</legend>\n              {this.starsMap.map(\n                ({\n                  average,\n                  checked,\n                  fraction,\n                  hovered,\n                  id,\n                  partial,\n                  selected,\n                  value,\n                  tabIndex,\n                }) => {\n                  return (\n                    <label\n                      class={{\n                        star: true,\n                        selected,\n                        hovered,\n                        average,\n                        partial,\n                      }}\n                      data-value={value}\n                      htmlFor={id}\n                      onClick={this.handleLabelClick}\n                      onFocus={this.handleLabelFocus}\n                      onKeyDown={this.handleLabelKeyDown}\n                      onPointerDown={this.handleLabelPointerDown}\n                      onPointerOver={this.handleLabelPointerOver}\n                      tabIndex={tabIndex}\n                      // eslint-disable-next-line react/jsx-sort-props\n                      ref={this.setLabelEl}\n                    >\n                      <input\n                        checked={checked}\n                        class=\"visually-hidden\"\n                        disabled={this.disabled || this.readOnly}\n                        id={id}\n                        name={this.guid}\n                        onChange={this.handleInputChange}\n                        tabIndex={-1}\n                        type=\"radio\"\n                        value={value}\n                      />\n                      <StarIcon full={selected || average} scale={this.scale} />\n                      {partial && (\n                        <div class=\"fraction\" style={{ width: `${fraction * 100}%` }}>\n                          <StarIcon full partial scale={this.scale} />\n                        </div>\n                      )}\n                      <span class=\"visually-hidden\">\n                        {this.messages.stars.replace(\"{num}\", `${value}`)}\n                      </span>\n                    </label>\n                  );\n                },\n              )}\n\n              {(this.count || this.average) && this.showChip ? (\n                <calcite-chip scale={this.scale} value={this.count?.toString()}>\n                  {!!this.average && <span class=\"number--average\">{this.average.toString()}</span>}\n                  {!!this.count && <span class=\"number--count\">({this.count?.toString()})</span>}\n                </calcite-chip>\n              ) : null}\n            </fieldset>\n            <HiddenFormInputSlot component={this} />\n          </span>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onLabelClick(): void {\n    this.setFocus();\n  }\n\n  private handleRatingPointerOver = () => {\n    this.isKeyboardInteraction = false;\n  };\n\n  private handleRatingPointerOut = () => {\n    this.isKeyboardInteraction = true;\n    this.hoverValue = null;\n  };\n\n  private handleHostKeyDown = () => {\n    this.isKeyboardInteraction = true;\n  };\n\n  private handleLabelKeyDown = (event: KeyboardEvent) => {\n    const inputValue = this.getValueFromLabelEvent(event);\n    const key = event.key;\n    const numberKey = key == \" \" ? undefined : Number(key);\n\n    this.emit = true;\n    if (isNaN(numberKey)) {\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          this.value = !this.required && this.value === inputValue ? 0 : inputValue;\n          break;\n        case \"ArrowLeft\":\n          this.value = this.getPreviousRatingValue(inputValue);\n          this.updateFocus();\n          event.preventDefault();\n          break;\n        case \"ArrowRight\":\n          this.value = this.getNextRatingValue(inputValue);\n          this.updateFocus();\n          event.preventDefault();\n          break;\n        case \"Tab\":\n          this.hoverValue = null;\n        default:\n          break;\n      }\n    } else {\n      if (!this.required && numberKey >= 0 && numberKey <= this.max) {\n        this.value = numberKey;\n      } else if (this.required && numberKey > 0 && numberKey <= this.max) {\n        this.value = numberKey;\n      }\n      this.updateFocus();\n    }\n  };\n\n  private handleInputChange = (event: InputEvent) => {\n    if (this.isKeyboardInteraction === true) {\n      const inputVal = Number(event.target[\"value\"]);\n      this.hoverValue = inputVal;\n      this.value = inputVal;\n    }\n  };\n\n  private handleLabelPointerOver = (event: PointerEvent) => {\n    this.hoverValue = this.getValueFromLabelEvent(event);\n  };\n\n  private handleLabelPointerDown = (event: PointerEvent) => {\n    const target = event.currentTarget as HTMLLabelElement;\n    const inputValue = this.getValueFromLabelEvent(event);\n    this.hoverValue = inputValue;\n    this.emit = true;\n    this.value = !this.required && this.value === inputValue ? 0 : inputValue;\n    target.focus();\n  };\n\n  private handleLabelClick = (event: Event) => {\n    //preventing pointerdown event will supress any compatability mouse events except for click event.\n    event.preventDefault();\n  };\n\n  private handleLabelFocus = (event: FocusEvent) => {\n    const inputValue = this.getValueFromLabelEvent(event);\n    this.hoverValue = inputValue;\n  };\n\n  private updateFocus(): void {\n    this.hoverValue = this.value;\n    this.labelElements[this.value - 1].focus();\n  }\n\n  private getTabIndex(value: number): number {\n    if (this.readOnly || (this.value !== value && (this.value || value !== 1))) {\n      return -1;\n    }\n    return 0;\n  }\n\n  private setLabelEl = (el: HTMLLabelElement): void => {\n    this.labelElements.push(el);\n  };\n\n  private getValueFromLabelEvent(event: FocusEvent | PointerEvent | KeyboardEvent): number {\n    const target = event.currentTarget as HTMLLabelElement;\n    return Number(target.getAttribute(\"data-value\"));\n  }\n\n  getNextRatingValue(currentValue: number): number {\n    return currentValue === 5 ? 1 : currentValue + 1;\n  }\n\n  getPreviousRatingValue(currentValue: number): number {\n    return currentValue === 1 ? 5 : currentValue - 1;\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    focusFirstTabbable(this.el);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private State / Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteRatingElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultValue: Rating[\"value\"];\n\n  private emit = false;\n\n  private guid = `calcite-ratings-${guid()}`;\n\n  private isKeyboardInteraction = true;\n\n  private labelElements: HTMLLabelElement[] = [];\n\n  private max = 5;\n\n  private starsMap: Star[];\n}\n"],"version":3}
+{"file":"calcite-rating.js","mappings":"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","names":[],"sources":["src/components/rating/functional/star.tsx","src/components/rating/rating.scss?tag=calcite-rating&encapsulation=shadow","src/components/rating/rating.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\n\nimport { StarIconProps } from \"../interfaces\";\n\nexport const StarIcon: FunctionalComponent<StarIconProps> = ({ full, scale, partial }) => (\n  <calcite-icon\n    {...{\n      class: partial ? undefined : \"icon\",\n      icon: full ? \"star-f\" : \"star\",\n      scale,\n    }}\n  />\n);\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-rating-spacing-unit: The amount of left and right margin spacing between each rating star.\n */\n\n:host {\n  @apply relative flex items-center;\n  inline-size: fit-content;\n}\n\n@include disabled();\n\n:host([scale=\"s\"]) {\n  @apply h-6;\n  --calcite-rating-spacing-unit: theme(\"spacing.1\");\n}\n\n:host([scale=\"m\"]) {\n  @apply h-8;\n  --calcite-rating-spacing-unit: theme(\"spacing.2\");\n}\n\n:host([scale=\"l\"]) {\n  @apply h-11;\n  --calcite-rating-spacing-unit: theme(\"spacing.3\");\n}\n\n:host([read-only]) {\n  @extend %non-interactive-host-contents;\n}\n\n.fieldset {\n  margin: 0;\n  display: flex;\n  border-width: 0;\n  padding: 0;\n  align-items: center;\n  gap: var(--calcite-rating-spacing-unit);\n}\n\n.wrapper {\n  display: inline-block;\n}\n\n.star {\n  @apply transition-default;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n  color: theme(\"borderColor.color.input\");\n  &:focus {\n    @apply focus-outset;\n  }\n}\n\n.average,\n.fraction {\n  color: theme(\"colors.warning\");\n}\n\n.hovered,\n.selected {\n  color: theme(\"colors.brand\");\n}\n\n.fraction {\n  @apply transition-default;\n  position: absolute;\n  pointer-events: none;\n  inset-block-start: 0;\n  overflow: hidden;\n  inset-inline-start: 0;\n}\n\n// rating count\ncalcite-chip {\n  pointer-events: none;\n  cursor: default;\n}\n\n.number--average {\n  font-weight: bold;\n}\n\n.number--count {\n  color: var(--calcite-color-text-2);\n  font-style: italic;\n  &:not(:first-child) {\n    margin-inline-start: var(--calcite-rating-spacing-unit);\n  }\n}\n\n.visually-hidden {\n  @apply sr-only;\n}\n\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from \"@stencil/core\";\nimport { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from \"../../utils/form\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLabel, disconnectLabel, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Scale } from \"../interfaces\";\nimport { RatingMessages } from \"./assets/rating/t9n\";\nimport { StarIcon } from \"./functional/star\";\nimport { Star } from \"./interfaces\";\nimport { focusFirstTabbable } from \"../../utils/dom\";\n\n@Component({\n  tag: \"calcite-rating\",\n  styleUrl: \"rating.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Rating\n  implements\n    LabelableComponent,\n    FormComponent,\n    InteractiveComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** Specifies a cumulative average from previous ratings to display. */\n  @Prop({ reflect: true }) average: number;\n\n  /** Specifies the number of previous ratings to display. */\n  @Prop({ reflect: true }) count: number;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\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   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: RatingMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<RatingMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\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's value can be read, but cannot be modified. */\n  @Prop({ reflect: true }) readOnly = false;\n\n  /**\n   * When `true`, the component must have a value in order for the form to submit.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`. */\n  @Prop({ reflect: true }) showChip = false;\n\n  /** The component's value. */\n  @Prop({ reflect: true, mutable: true }) value = 0;\n\n  @Watch(\"value\")\n  handleValueUpdate(newValue: number): void {\n    this.hoverValue = newValue;\n    if (this.emit) {\n      this.calciteRatingChange.emit();\n    }\n\n    this.emit = false;\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the component's value changes.\n   */\n  @Event({ cancelable: false }) calciteRatingChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Static\n  //\n  //--------------------------------------------------------------------------\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: RatingMessages;\n\n  @State() hoverValue: number;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentWillRender(): void {\n    this.starsMap = Array.from({ length: this.max }, (_, i) => {\n      const value = i + 1;\n      const average = !this.hoverValue && this.average && !this.value && value <= this.average;\n      const checked = value === this.value;\n      const fraction = this.average && this.average + 1 - value;\n      const hovered = value <= this.hoverValue;\n      const id = `${this.guid}-${value}`;\n      const partial = !this.hoverValue && !this.value && !hovered && fraction > 0 && fraction < 1;\n      const selected = this.value >= value;\n      const tabIndex = this.getTabIndex(value);\n      return {\n        average,\n        checked,\n        fraction,\n        hovered,\n        id,\n        partial,\n        selected,\n        value,\n        tabIndex,\n      };\n    });\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleHostKeyDown}\n        onPointerOut={this.handleRatingPointerOut}\n        onPointerOver={this.handleRatingPointerOver}\n      >\n        <InteractiveContainer disabled={this.disabled}>\n          <span class=\"wrapper\">\n            <fieldset class=\"fieldset\" disabled={this.disabled}>\n              <legend class=\"visually-hidden\">{this.messages.rating}</legend>\n              {this.starsMap.map(\n                ({\n                  average,\n                  checked,\n                  fraction,\n                  hovered,\n                  id,\n                  partial,\n                  selected,\n                  value,\n                  tabIndex,\n                }) => {\n                  return (\n                    <label\n                      class={{\n                        star: true,\n                        selected,\n                        hovered,\n                        average,\n                        partial,\n                      }}\n                      data-value={value}\n                      htmlFor={id}\n                      onClick={this.handleLabelClick}\n                      onFocus={this.handleLabelFocus}\n                      onKeyDown={this.handleLabelKeyDown}\n                      onPointerDown={this.handleLabelPointerDown}\n                      onPointerOver={this.handleLabelPointerOver}\n                      tabIndex={tabIndex}\n                      // eslint-disable-next-line react/jsx-sort-props\n                      ref={this.setLabelEl}\n                    >\n                      <input\n                        checked={checked}\n                        class=\"visually-hidden\"\n                        disabled={this.disabled || this.readOnly}\n                        id={id}\n                        name={this.guid}\n                        onChange={this.handleInputChange}\n                        tabIndex={-1}\n                        type=\"radio\"\n                        value={value}\n                      />\n                      <StarIcon full={selected || average} scale={this.scale} />\n                      {partial && (\n                        <div class=\"fraction\" style={{ width: `${fraction * 100}%` }}>\n                          <StarIcon full partial scale={this.scale} />\n                        </div>\n                      )}\n                      <span class=\"visually-hidden\">\n                        {this.messages.stars.replace(\"{num}\", `${value}`)}\n                      </span>\n                    </label>\n                  );\n                },\n              )}\n\n              {(this.count || this.average) && this.showChip ? (\n                <calcite-chip scale={this.scale} value={this.count?.toString()}>\n                  {!!this.average && <span class=\"number--average\">{this.average.toString()}</span>}\n                  {!!this.count && <span class=\"number--count\">({this.count?.toString()})</span>}\n                </calcite-chip>\n              ) : null}\n            </fieldset>\n            <HiddenFormInputSlot component={this} />\n          </span>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onLabelClick(): void {\n    this.setFocus();\n  }\n\n  private handleRatingPointerOver = () => {\n    this.isKeyboardInteraction = false;\n  };\n\n  private handleRatingPointerOut = () => {\n    this.isKeyboardInteraction = true;\n    this.hoverValue = null;\n  };\n\n  private handleHostKeyDown = () => {\n    this.isKeyboardInteraction = true;\n  };\n\n  private handleLabelKeyDown = (event: KeyboardEvent) => {\n    const inputValue = this.getValueFromLabelEvent(event);\n    const key = event.key;\n    const numberKey = key == \" \" ? undefined : Number(key);\n\n    this.emit = true;\n    if (isNaN(numberKey)) {\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          this.value = !this.required && this.value === inputValue ? 0 : inputValue;\n          break;\n        case \"ArrowLeft\":\n          this.value = this.getPreviousRatingValue(inputValue);\n          this.updateFocus();\n          event.preventDefault();\n          break;\n        case \"ArrowRight\":\n          this.value = this.getNextRatingValue(inputValue);\n          this.updateFocus();\n          event.preventDefault();\n          break;\n        case \"Tab\":\n          this.hoverValue = null;\n        default:\n          break;\n      }\n    } else {\n      if (!this.required && numberKey >= 0 && numberKey <= this.max) {\n        this.value = numberKey;\n      } else if (this.required && numberKey > 0 && numberKey <= this.max) {\n        this.value = numberKey;\n      }\n      this.updateFocus();\n    }\n  };\n\n  private handleInputChange = (event: InputEvent) => {\n    if (this.isKeyboardInteraction === true) {\n      const inputVal = Number(event.target[\"value\"]);\n      this.hoverValue = inputVal;\n      this.value = inputVal;\n    }\n  };\n\n  private handleLabelPointerOver = (event: PointerEvent) => {\n    this.hoverValue = this.getValueFromLabelEvent(event);\n  };\n\n  private handleLabelPointerDown = (event: PointerEvent) => {\n    const target = event.currentTarget as HTMLLabelElement;\n    const inputValue = this.getValueFromLabelEvent(event);\n    this.hoverValue = inputValue;\n    this.emit = true;\n    this.value = !this.required && this.value === inputValue ? 0 : inputValue;\n    target.focus();\n  };\n\n  private handleLabelClick = (event: Event) => {\n    //preventing pointerdown event will supress any compatability mouse events except for click event.\n    event.preventDefault();\n  };\n\n  private handleLabelFocus = (event: FocusEvent) => {\n    const inputValue = this.getValueFromLabelEvent(event);\n    this.hoverValue = inputValue;\n  };\n\n  private updateFocus(): void {\n    this.hoverValue = this.value;\n    this.labelElements[this.value - 1].focus();\n  }\n\n  private getTabIndex(value: number): number {\n    if (this.readOnly || (this.value !== value && (this.value || value !== 1))) {\n      return -1;\n    }\n    return 0;\n  }\n\n  private setLabelEl = (el: HTMLLabelElement): void => {\n    this.labelElements.push(el);\n  };\n\n  private getValueFromLabelEvent(event: FocusEvent | PointerEvent | KeyboardEvent): number {\n    const target = event.currentTarget as HTMLLabelElement;\n    return Number(target.getAttribute(\"data-value\"));\n  }\n\n  getNextRatingValue(currentValue: number): number {\n    return currentValue === 5 ? 1 : currentValue + 1;\n  }\n\n  getPreviousRatingValue(currentValue: number): number {\n    return currentValue === 1 ? 5 : currentValue - 1;\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    focusFirstTabbable(this.el);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private State / Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteRatingElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultValue: Rating[\"value\"];\n\n  private emit = false;\n\n  private guid = `calcite-ratings-${guid()}`;\n\n  private isKeyboardInteraction = true;\n\n  private labelElements: HTMLLabelElement[] = [];\n\n  private max = 5;\n\n  private starsMap: Star[];\n}\n"],"version":3}

package/dist/components/calcite-scrim.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.4.1-next.0
+ * v2.5.0-next.0
  */
 import { S as Scrim, d as defineCustomElement$1 } from './scrim.js';
 

package/dist/components/calcite-segmented-control-item.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.4.1-next.0
+ * v2.5.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean } from './dom.js';
@@ -14,7 +14,7 @@ const CSS = {
     segmentedControlItemIcon: "segmented-control-item-icon",
 };
 
-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-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-hover, 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 SegmentedControlItem = /*@__PURE__*/ proxyCustomElement(class SegmentedControlItem extends HTMLElement {
     constructor() {

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,s9FAAs9F;;MCoBz+F,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,oBAAe,aAAa,CAAC,OAAO,CAAC,gBAAc,KAAK,EAAE,IAAI,EAAC,OAAO,IACzE,aACE,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,gBAAO,KAAK,CAAQ,EACpB,YAAM,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":";;;;;;;;;AAAO,MAAM,KAAK,GAAG;IACnB,KAAK,EAAE,OAAO;CACf,CAAC;AAEK,MAAM,GAAG,GAAG;IACjB,wBAAwB,EAAE,6BAA6B;CACxD;;ACND,MAAM,uBAAuB,GAAG,whGAAwhG;;MCoB3iG,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,oBAAe,aAAa,CAAC,OAAO,CAAC,gBAAc,KAAK,EAAE,IAAI,EAAC,OAAO,IACzE,aACE,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,gBAAO,KAAK,CAAQ,EACpB,YAAM,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}

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.4.1-next.0
+ * v2.5.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client/index.js';
 import { a as getElementDir } from './dom.js';

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.4.1-next.0
+ * v2.5.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { e as focusElement } from './dom.js';
@@ -22,7 +22,7 @@ const CSS = {
     wrapper: "wrapper",
 };
 
-const selectCss = ":host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}: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:flex;flex-direction:column}.wrapper{position:relative;display:flex;align-items:stretch;inline-size:var(--select-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-select-font-size:var(--calcite-font-size--2);--calcite-select-spacing-inline:0.5rem 2rem}:host([scale=s]) .wrapper{block-size:1.5rem}:host([scale=s]) .icon-container{padding-inline:0.5rem}:host([scale=m]){--calcite-select-font-size:var(--calcite-font-size--1);--calcite-select-spacing-inline:0.75rem 2.5rem}:host([scale=m]) .wrapper{block-size:2rem}:host([scale=m]) .icon-container{padding-inline:0.75rem}:host([scale=l]){--calcite-select-font-size:var(--calcite-font-size-0);--calcite-select-spacing-inline:1rem 3rem}:host([scale=l]) .wrapper{block-size:44px}:host([scale=l]) .icon-container{padding-inline:1rem}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}.select{margin:0px;box-sizing:border-box;inline-size:100%;cursor:pointer;appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);font-family:inherit;color:var(--calcite-color-text-2);outline-color:transparent;font-size:var(--calcite-select-font-size);padding-inline:var(--calcite-select-spacing-inline);border-inline-end-width:0px}.select:focus{outline:2px solid 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          )}.select:hover{background-color:var(--calcite-color-foreground-2)}select:disabled{border-color:var(--calcite-color-border-input);--tw-bg-opacity:1}.icon-container{pointer-events:none;position:absolute;inset-block:0px;display:flex;align-items:center;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:transparent;color:var(--calcite-color-text-2);inset-inline-end:0px;border-inline-width:0px 1px}:host([status=invalid]) select,:host([status=invalid]) .icon-container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) select:focus,:host([status=invalid]) .icon-container:focus{outline:2px solid var(--calcite-color-status-danger);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          )}.select:focus~.icon-container{border-color:transparent}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const selectCss = ":host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}: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:flex;flex-direction:column}.wrapper{position:relative;display:flex;align-items:stretch;inline-size:var(--select-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-select-font-size:var(--calcite-font-size--2);--calcite-select-spacing-inline:0.5rem 2rem}:host([scale=s]) .wrapper{block-size:1.5rem}:host([scale=s]) .icon-container{padding-inline:0.5rem}:host([scale=m]){--calcite-select-font-size:var(--calcite-font-size--1);--calcite-select-spacing-inline:0.75rem 2.5rem}:host([scale=m]) .wrapper{block-size:2rem}:host([scale=m]) .icon-container{padding-inline:0.75rem}:host([scale=l]){--calcite-select-font-size:var(--calcite-font-size-0);--calcite-select-spacing-inline:1rem 3rem}:host([scale=l]) .wrapper{block-size:44px}:host([scale=l]) .icon-container{padding-inline:1rem}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}.select{margin:0px;box-sizing:border-box;inline-size:100%;cursor:pointer;appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);font-family:inherit;color:var(--calcite-color-text-2);outline-color:transparent;font-size:var(--calcite-select-font-size);padding-inline:var(--calcite-select-spacing-inline);border-inline-end-width:0px}.select:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, 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          )}.select:hover{background-color:var(--calcite-color-foreground-2)}select:disabled{border-color:var(--calcite-color-border-input);--tw-bg-opacity:1}.icon-container{pointer-events:none;position:absolute;inset-block:0px;display:flex;align-items:center;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:transparent;color:var(--calcite-color-text-2);inset-inline-end:0px;border-inline-width:0px 1px}:host([status=invalid]) select,:host([status=invalid]) .icon-container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) select:focus,:host([status=invalid]) .icon-container:focus{outline:2px solid var(--calcite-color-status-danger);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          )}.select:focus~.icon-container{border-color:transparent}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.25rem}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 
 function isOption(optionOrGroup) {
     return optionOrGroup.tagName === "CALCITE-OPTION";

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\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  &:hover {\n    @apply bg-foreground-2;\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\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} 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 { CSS } from \"./resources\";\nimport { getIconScale } from \"../../utils/component\";\nimport { Validation } from \"../functional/Validation\";\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   * 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(\n      (optionOrGroup) => 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              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={this.storeSelectRef}\n            >\n              <slot />\n            </select>\n            {this.renderChevron()}\n            <HiddenFormInputSlot component={this} />\n          </div>\n          {this.validationMessage ? (\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\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  &:hover {\n    @apply bg-foreground-2;\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\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} 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 { CSS } from \"./resources\";\nimport { getIconScale } from \"../../utils/component\";\nimport { Validation } from \"../functional/Validation\";\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   * 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(\n      (optionOrGroup) => 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              // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n              ref={this.storeSelectRef}\n            >\n              <slot />\n            </select>\n            {this.renderChevron()}\n            <HiddenFormInputSlot component={this} />\n          </div>\n          {this.validationMessage ? (\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,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.4.1-next.0
+ * v2.5.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { C as ensureId, a as getElementDir, f as focusFirstTabbable } from './dom.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.4.1-next.0
+ * v2.5.0-next.0
  */
 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,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.4.1-next.0
+ * v2.5.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, forceUpdate } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.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.4.1-next.0
+ * v2.5.0-next.0
  */
 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-slider.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.4.1-next.0
+ * v2.5.0-next.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';
@@ -45,7 +45,7 @@ const CSS = {
 };
 const maxTickElementThreshold = 250;
 
-const sliderCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:1rem;--calcite-slider-handle-extension-height:0.65rem;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{outline:2px solid 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          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+const sliderCss = "@charset \"UTF-8\";:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}.scale--s{--calcite-slider-handle-size:0.625rem;--calcite-slider-handle-extension-height:0.4rem;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:0.875rem;--calcite-slider-handle-extension-height:0.5rem;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:1rem;--calcite-slider-handle-extension-height:0.65rem;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;overflow-wrap:normal;word-break:normal;padding-inline:calc(var(--calcite-slider-handle-size) * 0.5);padding-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-block:calc(var(--calcite-slider-handle-size) * 0.5);margin-inline:0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  );touch-action:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-color-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.375rem}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.5rem}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-0.55rem}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-inline-size:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:flex;cursor:pointer;flex-direction:column;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;inset-block:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;inline-size:1em}.thumb .handle__label.hyphen--wrap{display:flex}.thumb .handle{box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;block-size:var(--calcite-slider-handle-size);inline-size:var(--calcite-slider-handle-size);box-shadow:0 0 0 2px var(--calcite-color-text-3) inset;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{inline-size:0.125rem;block-size:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-color-text-3)}.thumb:hover .handle{box-shadow:0 0 0 3px var(--calcite-color-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-color-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, 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          )}.thumb:focus .handle-extension{background-color:var(--calcite-color-brand)}.thumb.thumb--minValue{transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-0.125rem}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.4375rem}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-1.875rem}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-2rem}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-block-start:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-block-end:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-2.075rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-2.75rem}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-3.0625rem}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-color-brand);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-color-brand)}.track{position:relative;block-size:0.125rem;border-radius:0px;background-color:var(--calcite-color-border-2);transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;inset-block-start:0px;block-size:0.125rem;background-color:var(--calcite-color-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;inline-size:100%;content:\"\";inset-block-start:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);block-size:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}@media (forced-colors: active){.thumb{outline-width:0;outline-offset:0}.handle{outline:2px solid transparent;outline-offset:2px}.thumb:focus .handle,.thumb .handle-extension,.thumb:hover .handle-extension,.thumb:focus .handle-extension,.thumb:active .handle-extension{background-color:canvasText}.track{background-color:canvasText}.track__range{background-color:highlight}}.tick{position:absolute;block-size:0.25rem;inline-size:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-color-border-input);border-color:var(--calcite-color-foreground-1);inset-block-start:-2px;pointer-events:none;margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-color-brand)}.tick__label{pointer-events:none;margin-block-start:0.875rem;display:flex;justify-content:center}.tick__label--min{transition:opacity var(--calcite-animation-timing)}.tick__label--max{transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-3)}.graph{color:var(--calcite-color-foreground-3);block-size:48px}:host([label-ticks][ticks]) .container{padding-block-end:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-block-end:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-block-end:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-block-start:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-block-end:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-block-start:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-block-end:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 
 function isRange(value) {
     return Array.isArray(value);