@esri/calcite-components 2.2.0-next.0 → 2.2.0-next.2

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

@@ -1,21 +1,21 @@
 /*!
  * 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.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const loadable = require('./loadable-488230d3.js');
-const form = require('./form-a4b759d2.js');
-const locale = require('./locale-f3c5ce8e.js');
-const dom = require('./dom-afcc4f08.js');
-const observers = require('./observers-20febba7.js');
-require('./key-f65f1f51.js');
-require('./guid-9272df1b.js');
-require('./resources-aeedfe4f.js');
+const index = require('./index-c3a85d17.js');
+const loadable = require('./loadable-3315b101.js');
+const form = require('./form-ef534f10.js');
+const locale = require('./locale-cb432455.js');
+const dom = require('./dom-526ae93a.js');
+const observers = require('./observers-63095bd4.js');
+require('./key-c7167eca.js');
+require('./guid-2999da4b.js');
+require('./resources-2f0b38c2.js');
 
 const CSS = {
     container: "container",
@@ -33,7 +33,7 @@ const CSS = {
     danger: "fill-danger",
 };
 
-const meterCss = ":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([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host{display:flex;--calcite-meter-space-internal:0.125rem;--calcite-meter-height-internal:1rem;--calcite-meter-font-size-internal:var(--calcite-font-size--1)}:host([scale=s]){--calcite-meter-height-internal:0.75rem;--calcite-meter-font-size-internal:var(--calcite-font-size--2)}:host([scale=l]){--calcite-meter-height-internal:1.5rem;--calcite-meter-font-size-internal:var(--calcite-font-size-0)}.container{position:relative;margin:0px;display:flex;inline-size:100%;align-items:center;block-size:var(--calcite-meter-height-internal);background-color:var(--calcite-color-foreground-2);border:1px solid var(--calcite-color-border-3);border-radius:var(--calcite-meter-height-internal)}.solid{border:1px solid var(--calcite-color-foreground-3);background-color:var(--calcite-color-foreground-3)}.outline{background-color:transparent}.value-visible{margin-block-start:1.5rem}.steps-visible{margin-block-end:1.5rem}.step-line{position:absolute;inset-block:0px;display:block;inline-size:var(--calcite-meter-space-internal);background-color:var(--calcite-color-border-3)}.label{position:absolute;font-size:var(--calcite-meter-font-size-internal)}.label-hidden{visibility:hidden;opacity:0}.label-value{inset-block-end:calc(100% + 0.5em);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1)}.label-range{color:var(--calcite-color-text-3);inset-block-start:calc(100% + 0.5em)}.unit-label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3)}.label-value .unit-label{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2)}.fill{position:absolute;z-index:var(--calcite-z-index);display:block;background-color:var(--calcite-color-brand);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-inline-start:var(--calcite-meter-space-internal);inset-block:var(--calcite-meter-space-internal);border-radius:var(--calcite-meter-height-internal);max-inline-size:calc(100% - var(--calcite-meter-space-internal) * 2);min-inline-size:calc(var(--calcite-meter-height-internal) - var(--calcite-meter-space-internal) * 2);transition-property:inline-size, background-color, box-shadow}.fill-danger{background-color:var(--calcite-color-status-danger)}.fill-success{background-color:var(--calcite-color-status-success)}.fill-warning{background-color:var(--calcite-color-status-warning)}.solid .fill{inset-block:0;inset-inline-start:0;max-inline-size:100%;min-inline-size:calc(var(--calcite-meter-height-internal));box-shadow:0 0 0 1px var(--calcite-color-brand)}.solid .fill-danger{box-shadow:0 0 0 1px var(--calcite-color-status-danger)}.solid .fill-success{box-shadow:0 0 0 1px var(--calcite-color-status-success)}.solid .fill-warning{box-shadow:0 0 0 1px var(--calcite-color-status-warning)}";
+const meterCss = ":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([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host{display:flex;--calcite-meter-space-internal:0.125rem;--calcite-meter-height-internal:1rem;--calcite-meter-font-size-internal:var(--calcite-font-size--1)}:host([scale=s]){--calcite-meter-height-internal:0.75rem;--calcite-meter-font-size-internal:var(--calcite-font-size--2)}:host([scale=l]){--calcite-meter-height-internal:1.5rem;--calcite-meter-font-size-internal:var(--calcite-font-size-0)}.container{position:relative;margin:0px;display:flex;inline-size:100%;align-items:center;block-size:var(--calcite-meter-height-internal);background-color:var(--calcite-color-foreground-2);border:1px solid var(--calcite-color-border-3);border-radius:var(--calcite-meter-height-internal)}.solid{border:1px solid var(--calcite-color-foreground-3);background-color:var(--calcite-color-foreground-3)}.outline{background-color:transparent}.value-visible{margin-block-start:1.5rem}.steps-visible{margin-block-end:1.5rem}.step-line{position:absolute;inset-block:0px;display:block;inline-size:var(--calcite-meter-space-internal);background-color:var(--calcite-color-border-3)}.label{position:absolute;font-size:var(--calcite-meter-font-size-internal)}.label-hidden{visibility:hidden;opacity:0}.label-value{inset-block-end:calc(100% + 0.5em);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-1)}.label-range{color:var(--calcite-color-text-3);inset-block-start:calc(100% + 0.5em)}.unit-label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-3)}.label-value .unit-label{font-weight:var(--calcite-font-weight-bold);color:var(--calcite-color-text-2)}.fill{position:absolute;z-index:var(--calcite-z-index);display:block;background-color:var(--calcite-color-brand);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-inline-start:var(--calcite-meter-space-internal);inset-block:var(--calcite-meter-space-internal);border-radius:var(--calcite-meter-height-internal);max-inline-size:calc(100% - var(--calcite-meter-space-internal) * 2);min-inline-size:calc(var(--calcite-meter-height-internal) - var(--calcite-meter-space-internal) * 2);transition-property:inline-size, background-color, box-shadow}.fill-danger{background-color:var(--calcite-color-status-danger)}.fill-success{background-color:var(--calcite-color-status-success)}.fill-warning{background-color:var(--calcite-color-status-warning)}.solid .fill{inset-block:0;inset-inline-start:0;max-inline-size:100%;min-inline-size:calc(var(--calcite-meter-height-internal));box-shadow:0 0 0 1px var(--calcite-color-brand)}.solid .fill-danger{box-shadow:0 0 0 1px var(--calcite-color-status-danger)}.solid .fill-success{box-shadow:0 0 0 1px var(--calcite-color-status-success)}.solid .fill-warning{box-shadow:0 0 0 1px var(--calcite-color-status-warning)}";
 
 const Meter = class {
     constructor(hostRef) {

package/dist/cjs/calcite-meter.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-meter.entry.cjs.js","mappings":"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","names":["createObserver","locale","getSupportedLocale","numberStringFormatter","setUpLoadableComponent","afterConnectDefaultValueSet","setComponentLoaded","connectLocalized","connectForm","disconnectLocalized","disconnectForm","intersects","h","Host"],"sources":["src/components/meter/resources.ts","src/components/meter/meter.scss?tag=calcite-meter&encapsulation=shadow","src/components/meter/meter.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  fill: \"fill\",\n  stepLine: \"step-line\",\n  label: \"label\",\n  labelHidden: \"label-hidden\",\n  labelRange: \"label-range\",\n  labelValue: \"label-value\",\n  unitLabel: \"unit-label\",\n  stepsVisible: \"steps-visible\",\n  valueVisible: \"value-visible\",\n  success: \"fill-success\",\n  warning: \"fill-warning\",\n  danger: \"fill-danger\",\n};\n","@include base-component();\n@include disabled();\n\n:host {\n  @apply flex;\n  --calcite-meter-space-internal: theme(\"spacing[0.5]\");\n  --calcite-meter-height-internal: theme(\"spacing.4\");\n  --calcite-meter-font-size-internal: var(--calcite-font-size--1);\n}\n\n:host([scale=\"s\"]) {\n  --calcite-meter-height-internal: theme(\"spacing.3\");\n  --calcite-meter-font-size-internal: var(--calcite-font-size--2);\n}\n\n:host([scale=\"l\"]) {\n  --calcite-meter-height-internal: theme(\"spacing.6\");\n  --calcite-meter-font-size-internal: var(--calcite-font-size-0);\n}\n\n.container {\n  @apply flex relative items-center w-full m-0;\n  block-size: var(--calcite-meter-height-internal);\n  background-color: var(--calcite-color-foreground-2);\n  border: 1px solid var(--calcite-color-border-3);\n  border-radius: var(--calcite-meter-height-internal);\n}\n\n.solid {\n  border: 1px solid var(--calcite-color-foreground-3);\n  background-color: var(--calcite-color-foreground-3);\n}\n\n.outline {\n  @apply bg-transparent;\n}\n\n.value-visible {\n  margin-block-start: theme(\"spacing.6\");\n}\n\n.steps-visible {\n  margin-block-end: theme(\"spacing.6\");\n}\n\n.step-line {\n  @apply block absolute inset-y-0;\n  inline-size: var(--calcite-meter-space-internal);\n  background-color: var(--calcite-color-border-3);\n}\n\n.label {\n  @apply absolute;\n  font-size: var(--calcite-meter-font-size-internal);\n}\n\n.label-hidden {\n  @apply invisible opacity-0;\n}\n\n.label-value {\n  inset-block-end: calc(100% + 0.5em);\n  font-weight: var(--calcite-font-weight-bold);\n  color: var(--calcite-color-text-1);\n}\n\n.label-range {\n  @apply text-color-3;\n  inset-block-start: calc(100% + 0.5em);\n}\n\n.unit-label {\n  @apply text-color-3 font-medium;\n}\n\n.label-value .unit-label {\n  @apply text-color-2 font-bold;\n}\n\n.fill {\n  @apply block absolute duration-150 ease-in-out bg-brand z-default;\n  inset-inline-start: var(--calcite-meter-space-internal);\n  inset-block: var(--calcite-meter-space-internal);\n  border-radius: var(--calcite-meter-height-internal);\n  max-inline-size: calc(100% - (var(--calcite-meter-space-internal) * 2));\n  min-inline-size: calc(var(--calcite-meter-height-internal) - (var(--calcite-meter-space-internal) * 2));\n  transition-property: inline-size, background-color, box-shadow;\n}\n\n.fill-danger {\n  background-color: var(--calcite-color-status-danger);\n}\n\n.fill-success {\n  background-color: var(--calcite-color-status-success);\n}\n\n.fill-warning {\n  background-color: var(--calcite-color-status-warning);\n}\n\n.solid .fill {\n  inset-block: 0;\n  inset-inline-start: 0;\n  max-inline-size: 100%;\n  min-inline-size: calc(var(--calcite-meter-height-internal));\n  box-shadow: 0 0 0 1px var(--calcite-color-brand);\n}\n\n.solid .fill-danger {\n  box-shadow: 0 0 0 1px var(--calcite-color-status-danger);\n}\n\n.solid .fill-success {\n  box-shadow: 0 0 0 1px var(--calcite-color-status-success);\n}\n\n.solid .fill-warning {\n  box-shadow: 0 0 0 1px var(--calcite-color-status-warning);\n}\n","import { Component, Element, h, Host, Prop, State, VNode, Watch } from \"@stencil/core\";\nimport { Appearance, Scale } from \"../interfaces\";\nimport { CSS } from \"./resources\";\n\nimport {\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\nimport {\n  afterConnectDefaultValueSet,\n  connectForm,\n  disconnectForm,\n  FormComponent,\n} from \"../../utils/form\";\n\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  getSupportedLocale,\n  LocalizedComponent,\n  NumberingSystem,\n  numberStringFormatter,\n  SupportedLocale,\n} from \"../../utils/locale\";\nimport { intersects } from \"../../utils/dom\";\nimport { createObserver } from \"../../utils/observers\";\nimport { MeterLabelType } from \"./interfaces\";\n\n@Component({\n  tag: \"calcite-meter\",\n  styleUrl: \"meter.scss\",\n  shadow: true,\n})\nexport class Meter implements FormComponent, LoadableComponent, LocalizedComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** Specifies the appearance style of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance> =\n    \"outline-fill\";\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies the component's display, where `\"single\"` displays a single color and `\"range\"` displays a range of colors based on provided `low`, `high`, `min` or `max` values. */\n  @Prop({ reflect: true }) fillType: \"single\" | \"range\" = \"range\";\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  /** When `true`, number values are displayed with a group separator corresponding to the language and country format. */\n  @Prop({ reflect: true }) groupSeparator = false;\n\n  /** Specifies a high value.  When `fillType` is `\"range\"`, displays a different color when above the specified threshold.  */\n  @Prop({ reflect: true, mutable: true }) high: number;\n\n  /**  Accessible name for the component. */\n  @Prop() label!: string;\n\n  /** Specifies a low value.  When `fillType` is `\"range\"`, displays a different color when above the specified threshold.  */\n  @Prop({ reflect: true, mutable: true }) low: number;\n\n  /** Specifies the highest allowed value of the component. */\n  @Prop({ reflect: true }) max = 100;\n\n  /** Specifies the lowest allowed value of the component. */\n  @Prop({ reflect: true }) min = 0;\n\n  @Watch(\"min\")\n  @Watch(\"max\")\n  @Watch(\"low\")\n  @Watch(\"high\")\n  @Watch(\"value\")\n  handleRangeChange(): void {\n    this.calculateValues();\n    this.updateLabels();\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  /** Specifies the Unicode numeral system used by the component for localization. */\n  @Prop() numberingSystem: NumberingSystem;\n\n  /** When `true`, displays the values of `high`, `low`, `min`, and `max`. */\n  @Prop({ reflect: true }) rangeLabels = false;\n\n  /** When either `rangeLabels` is `true`, specifies the format of displayed labels. */\n  @Prop({ reflect: true }) rangeLabelType: MeterLabelType = \"percent\";\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** When `labelType` is `\"units\"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or  `min` values. */\n  @Prop() unitLabel = \"\";\n\n  /** Specifies the current value of the component. */\n  @Prop({ mutable: true }) value: number;\n\n  /** When `true`, displays the current value. */\n  @Prop({ reflect: true }) valueLabel = false;\n\n  /** When either `valueLabel` is `true`, specifies the format of displayed label. */\n  @Prop({ reflect: true }) valueLabelType: MeterLabelType = \"percent\";\n\n  @Watch(\"rangeLabels\")\n  @Watch(\"rangeLabelType\")\n  @Watch(\"unitLabel\")\n  @Watch(\"valueLabel\")\n  @Watch(\"valueLabelType\")\n  handleLabelChange(): void {\n    this.updateLabels();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    this.calculateValues();\n    afterConnectDefaultValueSet(this, this.value);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    this.updateLabels();\n  }\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectForm(this);\n    this.resizeObserver?.observe(this.el);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectForm(this);\n    this.resizeObserver?.disconnect();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteMeterElement;\n\n  defaultValue: Meter[\"value\"];\n\n  formEl: HTMLFormElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  private highLabelEl: HTMLDivElement;\n\n  private labelFlipMax = 0.8;\n\n  private labelFlipProximity = 0.15;\n\n  private lowLabelEl: HTMLDivElement;\n\n  private maxLabelEl: HTMLDivElement;\n\n  private maxPercent = 100;\n\n  private meterContainerEl: HTMLDivElement;\n\n  private minLabelEl: HTMLDivElement;\n\n  private minPercent = 0;\n\n  private percentFormatting: {\n    formatter: Intl.NumberFormat;\n    locale: SupportedLocale;\n  };\n\n  private resizeObserver = createObserver(\"resize\", () => this.resizeHandler());\n\n  private valueLabelEl: HTMLDivElement;\n\n  @State() currentPercent: number;\n\n  @State() effectiveLocale: string;\n\n  @State() highActive: boolean;\n\n  @State() highPercent: number;\n\n  @State() lowActive: boolean;\n\n  @State() lowPercent: number;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private resizeHandler(): void {\n    this.updateLabels();\n  }\n\n  private updateLabels(): void {\n    if (this.valueLabelEl) {\n      this.determineValueLabelPosition();\n    }\n    if (this.rangeLabels) {\n      this.determineVisibleLabels();\n    }\n  }\n\n  private calculateValues(): void {\n    const { min, max, low, high, value } = this;\n    const lowPercent = (100 * (low - min)) / (max - min);\n    const highPercent = (100 * (high - min)) / (max - min);\n    const currentPercent = (100 * (value - min)) / (max - min);\n\n    if (!low || low < min || low > high || low > max) {\n      this.low = min;\n    }\n    if (!high || high > max || high < low || high < min) {\n      this.high = max;\n    }\n    if (!value) {\n      this.value = min;\n    }\n\n    this.lowPercent = lowPercent;\n    this.highPercent = highPercent;\n    this.currentPercent = value ? currentPercent : 0;\n    this.lowActive = !!low && low > min && (!value || low > value) && (!high || low < high);\n    this.highActive =\n      !!high && min <= high && high < max && (!value || high > value) && (!low || high > low);\n  }\n\n  private formatLabel = (value: number, labelType: MeterLabelType): string => {\n    if (labelType === \"percent\") {\n      if (!this.percentFormatting) {\n        const locale = getSupportedLocale(this.effectiveLocale);\n        const formatter = new Intl.NumberFormat(locale, {\n          useGrouping: this.groupSeparator,\n          style: \"percent\",\n        });\n        this.percentFormatting = { formatter, locale };\n      }\n      return this.percentFormatting.formatter.format(value);\n    } else {\n      numberStringFormatter.numberFormatOptions = {\n        locale: this.effectiveLocale,\n        numberingSystem: this.numberingSystem,\n        useGrouping: this.groupSeparator,\n      };\n      return numberStringFormatter.localize(value.toString());\n    }\n  };\n\n  private getMeterKindCssClass(): string {\n    const { low, high, min, max, value } = this;\n    const lowest = low ? low : min;\n    const highest = high ? high : max;\n    const aboveLowest = value >= lowest;\n    const belowLowest = value < lowest;\n    const aboveHighest = value >= highest;\n    const belowHighest = value < highest;\n\n    if (!value || (!low && belowHighest) || belowLowest) {\n      return CSS.success;\n    } else if (aboveLowest && belowHighest) {\n      return CSS.warning;\n    } else if (aboveHighest) {\n      return CSS.danger;\n    } else {\n      return CSS.success;\n    }\n  }\n\n  private intersects(el1: HTMLDivElement, el2: HTMLDivElement): boolean {\n    return el1 && el2 && intersects(el1.getBoundingClientRect(), el2.getBoundingClientRect());\n  }\n\n  private determineVisibleLabels(): void {\n    const { minLabelEl, lowLabelEl, highLabelEl, maxLabelEl } = this;\n    const highMaxOverlap = this.intersects(highLabelEl, maxLabelEl);\n    const lowHighOverlap = this.intersects(lowLabelEl, highLabelEl);\n    const lowMaxOverlap = this.intersects(lowLabelEl, maxLabelEl);\n    const minHighOverlap = this.intersects(minLabelEl, highLabelEl);\n    const minLowOverlap = this.intersects(minLabelEl, lowLabelEl);\n    const minMaxOverlap = this.intersects(minLabelEl, maxLabelEl);\n    const hiddenClass = CSS.labelHidden;\n\n    if (lowLabelEl) {\n      if (minLowOverlap || lowMaxOverlap || lowHighOverlap) {\n        lowLabelEl.classList.add(hiddenClass);\n      } else {\n        lowLabelEl.classList.remove(hiddenClass);\n      }\n    }\n\n    if (highLabelEl) {\n      if (minHighOverlap || lowMaxOverlap || highMaxOverlap) {\n        highLabelEl.classList.add(hiddenClass);\n      } else {\n        highLabelEl.classList.remove(hiddenClass);\n      }\n    }\n\n    if (minLabelEl && maxLabelEl) {\n      if (minMaxOverlap) {\n        maxLabelEl.classList.add(hiddenClass);\n      } else {\n        maxLabelEl.classList.remove(hiddenClass);\n      }\n    }\n  }\n\n  private determineValueLabelPosition(): void {\n    const { valueLabelEl, meterContainerEl, currentPercent } = this;\n    const valuePosition = currentPercent > 100 ? 100 : currentPercent > 0 ? currentPercent : 0;\n    const valueLabelWidth = valueLabelEl.getBoundingClientRect().width;\n    const containerWidth = meterContainerEl.getBoundingClientRect().width;\n    const labelWidthPercent = (100 * (valueLabelWidth - 0)) / (containerWidth - 0);\n\n    if (valuePosition + labelWidthPercent >= 100) {\n      valueLabelEl.style.insetInlineEnd = \"0%\";\n      valueLabelEl.style.removeProperty(\"inset-inline-start\");\n    } else {\n      valueLabelEl.style.insetInlineStart = `${valuePosition}% `;\n      valueLabelEl.style.removeProperty(\"inset-inline-end\");\n    }\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderMeterFill(): VNode {\n    const { currentPercent, fillType } = this;\n    const kindClass = this.getMeterKindCssClass();\n    return (\n      <div\n        class={{ [CSS.fill]: true, [kindClass]: fillType !== \"single\" }}\n        style={{ width: `${currentPercent}%` }}\n      />\n    );\n  }\n\n  renderRangeLine(position: number): VNode {\n    const style = { insetInlineStart: `${position}%` };\n    return <div class={CSS.stepLine} style={style} />;\n  }\n\n  renderValueLabel(): VNode {\n    const { currentPercent, valueLabelType, unitLabel, value } = this;\n    const label = this.formatLabel(\n      valueLabelType === \"percent\" ? currentPercent / 100 : value || 0,\n      valueLabelType\n    );\n    return (\n      <div\n        class={{ [CSS.label]: true, [CSS.labelValue]: true }}\n        key=\"low-label-line\"\n        // eslint-disable-next-line react/jsx-sort-props\n        ref={(el) => (this.valueLabelEl = el)}\n      >\n        {label}\n        {unitLabel && valueLabelType !== \"percent\" && (\n          <span class={CSS.unitLabel}>&nbsp;{unitLabel}</span>\n        )}\n      </div>\n    );\n  }\n\n  renderMinLabel(): VNode {\n    const { rangeLabelType, min, minPercent, unitLabel } = this;\n    const style = { insetInlineStart: `${minPercent}%` };\n    const labelMin = this.formatLabel(\n      rangeLabelType === \"percent\" ? minPercent : min,\n      rangeLabelType\n    );\n    return (\n      <div\n        class={{ [CSS.label]: true, [CSS.labelRange]: true }}\n        key=\"min-label-line\"\n        style={style}\n        // eslint-disable-next-line react/jsx-sort-props\n        ref={(el) => (this.minLabelEl = el)}\n      >\n        {labelMin}\n        {unitLabel && rangeLabelType !== \"percent\" && (\n          <span class={CSS.unitLabel}>&nbsp;{unitLabel}</span>\n        )}\n      </div>\n    );\n  }\n\n  renderLowLabel(): VNode {\n    const { rangeLabelType, low, lowPercent, highPercent, labelFlipProximity } = this;\n    const label = low\n      ? this.formatLabel(rangeLabelType === \"percent\" ? lowPercent / 100 : low, rangeLabelType)\n      : \"\";\n    const styleDefault = { insetInlineStart: `${lowPercent}%` };\n    const styleFlipped = { insetInlineEnd: `${100 - lowPercent}%` };\n    const style =\n      (highPercent - lowPercent) / 100 < labelFlipProximity ? styleFlipped : styleDefault;\n    return (\n      <div\n        class={{ [CSS.label]: true, [CSS.labelRange]: true }}\n        key=\"low-label-line\"\n        style={style}\n        // eslint-disable-next-line react/jsx-sort-props\n        ref={(el) => (this.lowLabelEl = el)}\n      >\n        {label}\n      </div>\n    );\n  }\n\n  renderHighLabel(): VNode {\n    const { rangeLabelType, high, highPercent, labelFlipMax } = this;\n    const label = high\n      ? this.formatLabel(rangeLabelType === \"percent\" ? highPercent / 100 : high, rangeLabelType)\n      : \"\";\n    const styleDefault = { insetInlineStart: `${highPercent}%` };\n    const styleFlipped = { insetInlineEnd: `${100 - highPercent}%` };\n    const style = highPercent / 100 >= labelFlipMax ? styleFlipped : styleDefault;\n    return (\n      <div\n        class={{ [CSS.label]: true, [CSS.labelRange]: true }}\n        key=\"high-label-line\"\n        style={style}\n        // eslint-disable-next-line react/jsx-sort-props\n        ref={(el) => (this.highLabelEl = el as HTMLDivElement)}\n      >\n        {label}\n      </div>\n    );\n  }\n\n  renderMaxLabel(): VNode {\n    const { rangeLabelType, max, maxPercent } = this;\n    const style = { insetInlineEnd: `${100 - maxPercent}%` };\n    const labelMax = this.formatLabel(\n      rangeLabelType === \"percent\" ? maxPercent / 100 : max,\n      rangeLabelType\n    );\n    return (\n      <div\n        class={{ [CSS.label]: true, [CSS.labelRange]: true }}\n        key=\"max-label-line\"\n        style={style}\n        // eslint-disable-next-line react/jsx-sort-props\n        ref={(el) => (this.maxLabelEl = el as HTMLDivElement)}\n      >\n        {labelMax}\n      </div>\n    );\n  }\n\n  render(): VNode {\n    const {\n      appearance,\n      currentPercent,\n      highActive,\n      highPercent,\n      label,\n      lowActive,\n      lowPercent,\n      max,\n      maxPercent,\n      min,\n      minPercent,\n      rangeLabels,\n      rangeLabelType,\n      unitLabel,\n      value,\n      valueLabel,\n      valueLabelType,\n    } = this;\n    const textPercentLabelWithPercent = this.formatLabel(currentPercent / 100, \"percent\");\n    const textUnitLabel = `${value} ${unitLabel}`;\n    const valueText =\n      valueLabelType === \"percent\"\n        ? textPercentLabelWithPercent\n        : unitLabel\n        ? textUnitLabel\n        : undefined;\n    return (\n      <Host>\n        <div\n          aria-label={label}\n          aria-valuemax={rangeLabelType === \"percent\" ? maxPercent : max}\n          aria-valuemin={rangeLabelType === \"percent\" ? minPercent : min}\n          aria-valuenow={valueLabelType === \"percent\" ? currentPercent : value}\n          aria-valuetext={valueText}\n          class={{\n            [CSS.container]: true,\n            [CSS.stepsVisible]: rangeLabels,\n            [CSS.valueVisible]: valueLabel,\n            [appearance]: appearance !== \"outline-fill\",\n          }}\n          role=\"meter\"\n          // eslint-disable-next-line react/jsx-sort-props\n          ref={(el) => (this.meterContainerEl = el as HTMLDivElement)}\n        >\n          {this.renderMeterFill()}\n          {valueLabel && this.renderValueLabel()}\n          {lowActive && this.renderRangeLine(lowPercent)}\n          {highActive && this.renderRangeLine(highPercent)}\n          {rangeLabels && this.renderMinLabel()}\n          {rangeLabels && lowActive && this.renderLowLabel()}\n          {rangeLabels && highActive && this.renderHighLabel()}\n          {rangeLabels && this.renderMaxLabel()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-meter.entry.cjs.js","mappings":"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","names":["createObserver","locale","getSupportedLocale","numberStringFormatter","setUpLoadableComponent","afterConnectDefaultValueSet","setComponentLoaded","connectLocalized","connectForm","disconnectLocalized","disconnectForm","intersects","h","Host"],"sources":["src/components/meter/resources.ts","src/components/meter/meter.scss?tag=calcite-meter&encapsulation=shadow","src/components/meter/meter.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  fill: \"fill\",\n  stepLine: \"step-line\",\n  label: \"label\",\n  labelHidden: \"label-hidden\",\n  labelRange: \"label-range\",\n  labelValue: \"label-value\",\n  unitLabel: \"unit-label\",\n  stepsVisible: \"steps-visible\",\n  valueVisible: \"value-visible\",\n  success: \"fill-success\",\n  warning: \"fill-warning\",\n  danger: \"fill-danger\",\n};\n","@include base-component();\n@include disabled();\n\n:host {\n  @apply flex;\n  --calcite-meter-space-internal: theme(\"spacing[0.5]\");\n  --calcite-meter-height-internal: theme(\"spacing.4\");\n  --calcite-meter-font-size-internal: var(--calcite-font-size--1);\n}\n\n:host([scale=\"s\"]) {\n  --calcite-meter-height-internal: theme(\"spacing.3\");\n  --calcite-meter-font-size-internal: var(--calcite-font-size--2);\n}\n\n:host([scale=\"l\"]) {\n  --calcite-meter-height-internal: theme(\"spacing.6\");\n  --calcite-meter-font-size-internal: var(--calcite-font-size-0);\n}\n\n.container {\n  @apply flex relative items-center w-full m-0;\n  block-size: var(--calcite-meter-height-internal);\n  background-color: var(--calcite-color-foreground-2);\n  border: 1px solid var(--calcite-color-border-3);\n  border-radius: var(--calcite-meter-height-internal);\n}\n\n.solid {\n  border: 1px solid var(--calcite-color-foreground-3);\n  background-color: var(--calcite-color-foreground-3);\n}\n\n.outline {\n  @apply bg-transparent;\n}\n\n.value-visible {\n  margin-block-start: theme(\"spacing.6\");\n}\n\n.steps-visible {\n  margin-block-end: theme(\"spacing.6\");\n}\n\n.step-line {\n  @apply block absolute inset-y-0;\n  inline-size: var(--calcite-meter-space-internal);\n  background-color: var(--calcite-color-border-3);\n}\n\n.label {\n  @apply absolute;\n  font-size: var(--calcite-meter-font-size-internal);\n}\n\n.label-hidden {\n  @apply invisible opacity-0;\n}\n\n.label-value {\n  inset-block-end: calc(100% + 0.5em);\n  font-weight: var(--calcite-font-weight-bold);\n  color: var(--calcite-color-text-1);\n}\n\n.label-range {\n  @apply text-color-3;\n  inset-block-start: calc(100% + 0.5em);\n}\n\n.unit-label {\n  @apply text-color-3 font-medium;\n}\n\n.label-value .unit-label {\n  @apply text-color-2 font-bold;\n}\n\n.fill {\n  @apply block absolute duration-150 ease-in-out bg-brand z-default;\n  inset-inline-start: var(--calcite-meter-space-internal);\n  inset-block: var(--calcite-meter-space-internal);\n  border-radius: var(--calcite-meter-height-internal);\n  max-inline-size: calc(100% - (var(--calcite-meter-space-internal) * 2));\n  min-inline-size: calc(var(--calcite-meter-height-internal) - (var(--calcite-meter-space-internal) * 2));\n  transition-property: inline-size, background-color, box-shadow;\n}\n\n.fill-danger {\n  background-color: var(--calcite-color-status-danger);\n}\n\n.fill-success {\n  background-color: var(--calcite-color-status-success);\n}\n\n.fill-warning {\n  background-color: var(--calcite-color-status-warning);\n}\n\n.solid .fill {\n  inset-block: 0;\n  inset-inline-start: 0;\n  max-inline-size: 100%;\n  min-inline-size: calc(var(--calcite-meter-height-internal));\n  box-shadow: 0 0 0 1px var(--calcite-color-brand);\n}\n\n.solid .fill-danger {\n  box-shadow: 0 0 0 1px var(--calcite-color-status-danger);\n}\n\n.solid .fill-success {\n  box-shadow: 0 0 0 1px var(--calcite-color-status-success);\n}\n\n.solid .fill-warning {\n  box-shadow: 0 0 0 1px var(--calcite-color-status-warning);\n}\n","import { Component, Element, h, Host, Prop, State, VNode, Watch } from \"@stencil/core\";\nimport { Appearance, Scale } from \"../interfaces\";\nimport { CSS } from \"./resources\";\n\nimport {\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\nimport {\n  afterConnectDefaultValueSet,\n  connectForm,\n  disconnectForm,\n  FormComponent,\n} from \"../../utils/form\";\n\nimport {\n  connectLocalized,\n  disconnectLocalized,\n  getSupportedLocale,\n  LocalizedComponent,\n  NumberingSystem,\n  numberStringFormatter,\n  SupportedLocale,\n} from \"../../utils/locale\";\nimport { intersects } from \"../../utils/dom\";\nimport { createObserver } from \"../../utils/observers\";\nimport { MeterLabelType } from \"./interfaces\";\n\n@Component({\n  tag: \"calcite-meter\",\n  styleUrl: \"meter.scss\",\n  shadow: true,\n})\nexport class Meter implements FormComponent, LoadableComponent, LocalizedComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** Specifies the appearance style of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance> =\n    \"outline-fill\";\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies the component's display, where `\"single\"` displays a single color and `\"range\"` displays a range of colors based on provided `low`, `high`, `min` or `max` values. */\n  @Prop({ reflect: true }) fillType: \"single\" | \"range\" = \"range\";\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  /** When `true`, number values are displayed with a group separator corresponding to the language and country format. */\n  @Prop({ reflect: true }) groupSeparator = false;\n\n  /** Specifies a high value.  When `fillType` is `\"range\"`, displays a different color when above the specified threshold.  */\n  @Prop({ reflect: true, mutable: true }) high: number;\n\n  /**  Accessible name for the component. */\n  @Prop() label!: string;\n\n  /** Specifies a low value.  When `fillType` is `\"range\"`, displays a different color when above the specified threshold.  */\n  @Prop({ reflect: true, mutable: true }) low: number;\n\n  /** Specifies the highest allowed value of the component. */\n  @Prop({ reflect: true }) max = 100;\n\n  /** Specifies the lowest allowed value of the component. */\n  @Prop({ reflect: true }) min = 0;\n\n  @Watch(\"min\")\n  @Watch(\"max\")\n  @Watch(\"low\")\n  @Watch(\"high\")\n  @Watch(\"value\")\n  handleRangeChange(): void {\n    this.calculateValues();\n    this.updateLabels();\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  /** Specifies the Unicode numeral system used by the component for localization. */\n  @Prop() numberingSystem: NumberingSystem;\n\n  /** When `true`, displays the values of `high`, `low`, `min`, and `max`. */\n  @Prop({ reflect: true }) rangeLabels = false;\n\n  /** When either `rangeLabels` is `true`, specifies the format of displayed labels. */\n  @Prop({ reflect: true }) rangeLabelType: MeterLabelType = \"percent\";\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** When `labelType` is `\"units\"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or  `min` values. */\n  @Prop() unitLabel = \"\";\n\n  /** Specifies the current value of the component. */\n  @Prop({ mutable: true }) value: number;\n\n  /** When `true`, displays the current value. */\n  @Prop({ reflect: true }) valueLabel = false;\n\n  /** When either `valueLabel` is `true`, specifies the format of displayed label. */\n  @Prop({ reflect: true }) valueLabelType: MeterLabelType = \"percent\";\n\n  @Watch(\"rangeLabels\")\n  @Watch(\"rangeLabelType\")\n  @Watch(\"unitLabel\")\n  @Watch(\"valueLabel\")\n  @Watch(\"valueLabelType\")\n  handleLabelChange(): void {\n    this.updateLabels();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    this.calculateValues();\n    afterConnectDefaultValueSet(this, this.value);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    this.updateLabels();\n  }\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectForm(this);\n    this.resizeObserver?.observe(this.el);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectForm(this);\n    this.resizeObserver?.disconnect();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteMeterElement;\n\n  defaultValue: Meter[\"value\"];\n\n  formEl: HTMLFormElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  private highLabelEl: HTMLDivElement;\n\n  private labelFlipMax = 0.8;\n\n  private labelFlipProximity = 0.15;\n\n  private lowLabelEl: HTMLDivElement;\n\n  private maxLabelEl: HTMLDivElement;\n\n  private maxPercent = 100;\n\n  private meterContainerEl: HTMLDivElement;\n\n  private minLabelEl: HTMLDivElement;\n\n  private minPercent = 0;\n\n  private percentFormatting: {\n    formatter: Intl.NumberFormat;\n    locale: SupportedLocale;\n  };\n\n  private resizeObserver = createObserver(\"resize\", () => this.resizeHandler());\n\n  private valueLabelEl: HTMLDivElement;\n\n  @State() currentPercent: number;\n\n  @State() effectiveLocale: string;\n\n  @State() highActive: boolean;\n\n  @State() highPercent: number;\n\n  @State() lowActive: boolean;\n\n  @State() lowPercent: number;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private resizeHandler(): void {\n    this.updateLabels();\n  }\n\n  private updateLabels(): void {\n    if (this.valueLabelEl) {\n      this.determineValueLabelPosition();\n    }\n    if (this.rangeLabels) {\n      this.determineVisibleLabels();\n    }\n  }\n\n  private calculateValues(): void {\n    const { min, max, low, high, value } = this;\n    const lowPercent = (100 * (low - min)) / (max - min);\n    const highPercent = (100 * (high - min)) / (max - min);\n    const currentPercent = (100 * (value - min)) / (max - min);\n\n    if (!low || low < min || low > high || low > max) {\n      this.low = min;\n    }\n    if (!high || high > max || high < low || high < min) {\n      this.high = max;\n    }\n    if (!value) {\n      this.value = min;\n    }\n\n    this.lowPercent = lowPercent;\n    this.highPercent = highPercent;\n    this.currentPercent = value ? currentPercent : 0;\n    this.lowActive = !!low && low > min && (!value || low > value) && (!high || low < high);\n    this.highActive =\n      !!high && min <= high && high < max && (!value || high > value) && (!low || high > low);\n  }\n\n  private formatLabel = (value: number, labelType: MeterLabelType): string => {\n    if (labelType === \"percent\") {\n      if (!this.percentFormatting) {\n        const locale = getSupportedLocale(this.effectiveLocale);\n        const formatter = new Intl.NumberFormat(locale, {\n          useGrouping: this.groupSeparator,\n          style: \"percent\",\n        });\n        this.percentFormatting = { formatter, locale };\n      }\n      return this.percentFormatting.formatter.format(value);\n    } else {\n      numberStringFormatter.numberFormatOptions = {\n        locale: this.effectiveLocale,\n        numberingSystem: this.numberingSystem,\n        useGrouping: this.groupSeparator,\n      };\n      return numberStringFormatter.localize(value.toString());\n    }\n  };\n\n  private getMeterKindCssClass(): string {\n    const { low, high, min, max, value } = this;\n    const lowest = low ? low : min;\n    const highest = high ? high : max;\n    const aboveLowest = value >= lowest;\n    const belowLowest = value < lowest;\n    const aboveHighest = value >= highest;\n    const belowHighest = value < highest;\n\n    if (!value || (!low && belowHighest) || belowLowest) {\n      return CSS.success;\n    } else if (aboveLowest && belowHighest) {\n      return CSS.warning;\n    } else if (aboveHighest) {\n      return CSS.danger;\n    } else {\n      return CSS.success;\n    }\n  }\n\n  private intersects(el1: HTMLDivElement, el2: HTMLDivElement): boolean {\n    return el1 && el2 && intersects(el1.getBoundingClientRect(), el2.getBoundingClientRect());\n  }\n\n  private determineVisibleLabels(): void {\n    const { minLabelEl, lowLabelEl, highLabelEl, maxLabelEl } = this;\n    const highMaxOverlap = this.intersects(highLabelEl, maxLabelEl);\n    const lowHighOverlap = this.intersects(lowLabelEl, highLabelEl);\n    const lowMaxOverlap = this.intersects(lowLabelEl, maxLabelEl);\n    const minHighOverlap = this.intersects(minLabelEl, highLabelEl);\n    const minLowOverlap = this.intersects(minLabelEl, lowLabelEl);\n    const minMaxOverlap = this.intersects(minLabelEl, maxLabelEl);\n    const hiddenClass = CSS.labelHidden;\n\n    if (lowLabelEl) {\n      if (minLowOverlap || lowMaxOverlap || lowHighOverlap) {\n        lowLabelEl.classList.add(hiddenClass);\n      } else {\n        lowLabelEl.classList.remove(hiddenClass);\n      }\n    }\n\n    if (highLabelEl) {\n      if (minHighOverlap || lowMaxOverlap || highMaxOverlap) {\n        highLabelEl.classList.add(hiddenClass);\n      } else {\n        highLabelEl.classList.remove(hiddenClass);\n      }\n    }\n\n    if (minLabelEl && maxLabelEl) {\n      if (minMaxOverlap) {\n        maxLabelEl.classList.add(hiddenClass);\n      } else {\n        maxLabelEl.classList.remove(hiddenClass);\n      }\n    }\n  }\n\n  private determineValueLabelPosition(): void {\n    const { valueLabelEl, meterContainerEl, currentPercent } = this;\n    const valuePosition = currentPercent > 100 ? 100 : currentPercent > 0 ? currentPercent : 0;\n    const valueLabelWidth = valueLabelEl.getBoundingClientRect().width;\n    const containerWidth = meterContainerEl.getBoundingClientRect().width;\n    const labelWidthPercent = (100 * (valueLabelWidth - 0)) / (containerWidth - 0);\n\n    if (valuePosition + labelWidthPercent >= 100) {\n      valueLabelEl.style.insetInlineEnd = \"0%\";\n      valueLabelEl.style.removeProperty(\"inset-inline-start\");\n    } else {\n      valueLabelEl.style.insetInlineStart = `${valuePosition}% `;\n      valueLabelEl.style.removeProperty(\"inset-inline-end\");\n    }\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderMeterFill(): VNode {\n    const { currentPercent, fillType } = this;\n    const kindClass = this.getMeterKindCssClass();\n    return (\n      <div\n        class={{ [CSS.fill]: true, [kindClass]: fillType !== \"single\" }}\n        style={{ width: `${currentPercent}%` }}\n      />\n    );\n  }\n\n  renderRangeLine(position: number): VNode {\n    const style = { insetInlineStart: `${position}%` };\n    return <div class={CSS.stepLine} style={style} />;\n  }\n\n  renderValueLabel(): VNode {\n    const { currentPercent, valueLabelType, unitLabel, value } = this;\n    const label = this.formatLabel(\n      valueLabelType === \"percent\" ? currentPercent / 100 : value || 0,\n      valueLabelType\n    );\n    return (\n      <div\n        class={{ [CSS.label]: true, [CSS.labelValue]: true }}\n        key=\"low-label-line\"\n        // eslint-disable-next-line react/jsx-sort-props\n        ref={(el) => (this.valueLabelEl = el)}\n      >\n        {label}\n        {unitLabel && valueLabelType !== \"percent\" && (\n          <span class={CSS.unitLabel}>&nbsp;{unitLabel}</span>\n        )}\n      </div>\n    );\n  }\n\n  renderMinLabel(): VNode {\n    const { rangeLabelType, min, minPercent, unitLabel } = this;\n    const style = { insetInlineStart: `${minPercent}%` };\n    const labelMin = this.formatLabel(\n      rangeLabelType === \"percent\" ? minPercent : min,\n      rangeLabelType\n    );\n    return (\n      <div\n        class={{ [CSS.label]: true, [CSS.labelRange]: true }}\n        key=\"min-label-line\"\n        style={style}\n        // eslint-disable-next-line react/jsx-sort-props\n        ref={(el) => (this.minLabelEl = el)}\n      >\n        {labelMin}\n        {unitLabel && rangeLabelType !== \"percent\" && (\n          <span class={CSS.unitLabel}>&nbsp;{unitLabel}</span>\n        )}\n      </div>\n    );\n  }\n\n  renderLowLabel(): VNode {\n    const { rangeLabelType, low, lowPercent, highPercent, labelFlipProximity } = this;\n    const label = low\n      ? this.formatLabel(rangeLabelType === \"percent\" ? lowPercent / 100 : low, rangeLabelType)\n      : \"\";\n    const styleDefault = { insetInlineStart: `${lowPercent}%` };\n    const styleFlipped = { insetInlineEnd: `${100 - lowPercent}%` };\n    const style =\n      (highPercent - lowPercent) / 100 < labelFlipProximity ? styleFlipped : styleDefault;\n    return (\n      <div\n        class={{ [CSS.label]: true, [CSS.labelRange]: true }}\n        key=\"low-label-line\"\n        style={style}\n        // eslint-disable-next-line react/jsx-sort-props\n        ref={(el) => (this.lowLabelEl = el)}\n      >\n        {label}\n      </div>\n    );\n  }\n\n  renderHighLabel(): VNode {\n    const { rangeLabelType, high, highPercent, labelFlipMax } = this;\n    const label = high\n      ? this.formatLabel(rangeLabelType === \"percent\" ? highPercent / 100 : high, rangeLabelType)\n      : \"\";\n    const styleDefault = { insetInlineStart: `${highPercent}%` };\n    const styleFlipped = { insetInlineEnd: `${100 - highPercent}%` };\n    const style = highPercent / 100 >= labelFlipMax ? styleFlipped : styleDefault;\n    return (\n      <div\n        class={{ [CSS.label]: true, [CSS.labelRange]: true }}\n        key=\"high-label-line\"\n        style={style}\n        // eslint-disable-next-line react/jsx-sort-props\n        ref={(el) => (this.highLabelEl = el as HTMLDivElement)}\n      >\n        {label}\n      </div>\n    );\n  }\n\n  renderMaxLabel(): VNode {\n    const { rangeLabelType, max, maxPercent } = this;\n    const style = { insetInlineEnd: `${100 - maxPercent}%` };\n    const labelMax = this.formatLabel(\n      rangeLabelType === \"percent\" ? maxPercent / 100 : max,\n      rangeLabelType\n    );\n    return (\n      <div\n        class={{ [CSS.label]: true, [CSS.labelRange]: true }}\n        key=\"max-label-line\"\n        style={style}\n        // eslint-disable-next-line react/jsx-sort-props\n        ref={(el) => (this.maxLabelEl = el as HTMLDivElement)}\n      >\n        {labelMax}\n      </div>\n    );\n  }\n\n  render(): VNode {\n    const {\n      appearance,\n      currentPercent,\n      highActive,\n      highPercent,\n      label,\n      lowActive,\n      lowPercent,\n      max,\n      maxPercent,\n      min,\n      minPercent,\n      rangeLabels,\n      rangeLabelType,\n      unitLabel,\n      value,\n      valueLabel,\n      valueLabelType,\n    } = this;\n    const textPercentLabelWithPercent = this.formatLabel(currentPercent / 100, \"percent\");\n    const textUnitLabel = `${value} ${unitLabel}`;\n    const valueText =\n      valueLabelType === \"percent\"\n        ? textPercentLabelWithPercent\n        : unitLabel\n        ? textUnitLabel\n        : undefined;\n    return (\n      <Host>\n        <div\n          aria-label={label}\n          aria-valuemax={rangeLabelType === \"percent\" ? maxPercent : max}\n          aria-valuemin={rangeLabelType === \"percent\" ? minPercent : min}\n          aria-valuenow={valueLabelType === \"percent\" ? currentPercent : value}\n          aria-valuetext={valueText}\n          class={{\n            [CSS.container]: true,\n            [CSS.stepsVisible]: rangeLabels,\n            [CSS.valueVisible]: valueLabel,\n            [appearance]: appearance !== \"outline-fill\",\n          }}\n          role=\"meter\"\n          // eslint-disable-next-line react/jsx-sort-props\n          ref={(el) => (this.meterContainerEl = el as HTMLDivElement)}\n        >\n          {this.renderMeterFill()}\n          {valueLabel && this.renderValueLabel()}\n          {lowActive && this.renderRangeLine(lowPercent)}\n          {highActive && this.renderRangeLine(highPercent)}\n          {rangeLabels && this.renderMinLabel()}\n          {rangeLabels && lowActive && this.renderLowLabel()}\n          {rangeLabels && highActive && this.renderHighLabel()}\n          {rangeLabels && this.renderMaxLabel()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,25 +1,25 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const conditionalSlot = require('./conditionalSlot-a6a1ea4e.js');
-const dom = require('./dom-afcc4f08.js');
-const focusTrapComponent = require('./focusTrapComponent-aca73790.js');
-const loadable = require('./loadable-488230d3.js');
-const observers = require('./observers-20febba7.js');
-const openCloseComponent = require('./openCloseComponent-a24661c6.js');
-const locale = require('./locale-f3c5ce8e.js');
-const t9n = require('./t9n-7ada50fb.js');
-const component = require('./component-f4c2ecd4.js');
-require('./guid-9272df1b.js');
-require('./resources-aeedfe4f.js');
-require('./key-f65f1f51.js');
+const index = require('./index-c3a85d17.js');
+const conditionalSlot = require('./conditionalSlot-d6481e20.js');
+const dom = require('./dom-526ae93a.js');
+const focusTrapComponent = require('./focusTrapComponent-3f2ebaaa.js');
+const loadable = require('./loadable-3315b101.js');
+const observers = require('./observers-63095bd4.js');
+const openCloseComponent = require('./openCloseComponent-38872c79.js');
+const locale = require('./locale-cb432455.js');
+const t9n = require('./t9n-f6dc9b37.js');
+const component = require('./component-8b8d846d.js');
+require('./guid-2999da4b.js');
+require('./resources-2f0b38c2.js');
+require('./key-c7167eca.js');
 
 const CSS = {
     modal: "modal",

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

@@ -1,17 +1,17 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const dom = require('./dom-afcc4f08.js');
-const loadable = require('./loadable-488230d3.js');
-require('./guid-9272df1b.js');
-require('./resources-aeedfe4f.js');
+const index = require('./index-c3a85d17.js');
+const dom = require('./dom-526ae93a.js');
+const loadable = require('./loadable-3315b101.js');
+require('./guid-2999da4b.js');
+require('./resources-2f0b38c2.js');
 
 const CSS$2 = {
     container: "container",

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

@@ -1,25 +1,25 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const conditionalSlot = require('./conditionalSlot-a6a1ea4e.js');
-const dom = require('./dom-afcc4f08.js');
-const loadable = require('./loadable-488230d3.js');
-const locale = require('./locale-f3c5ce8e.js');
-const t9n = require('./t9n-7ada50fb.js');
-const resources = require('./resources-94aecf21.js');
-const openCloseComponent = require('./openCloseComponent-a24661c6.js');
-const component = require('./component-f4c2ecd4.js');
-require('./observers-20febba7.js');
-require('./guid-9272df1b.js');
-require('./resources-aeedfe4f.js');
-require('./key-f65f1f51.js');
+const index = require('./index-c3a85d17.js');
+const conditionalSlot = require('./conditionalSlot-d6481e20.js');
+const dom = require('./dom-526ae93a.js');
+const loadable = require('./loadable-3315b101.js');
+const locale = require('./locale-cb432455.js');
+const t9n = require('./t9n-f6dc9b37.js');
+const resources = require('./resources-3e941f1a.js');
+const openCloseComponent = require('./openCloseComponent-38872c79.js');
+const component = require('./component-8b8d846d.js');
+require('./observers-63095bd4.js');
+require('./guid-2999da4b.js');
+require('./resources-2f0b38c2.js');
+require('./key-c7167eca.js');
 
 const SLOTS = {
     title: "title",

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

@@ -1,24 +1,24 @@
 /*!
  * 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.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const observers = require('./observers-20febba7.js');
-const dom = require('./dom-afcc4f08.js');
-const form = require('./form-a4b759d2.js');
-const interactive = require('./interactive-04057cf9.js');
-const label = require('./label-bc01a1b7.js');
-const loadable = require('./loadable-488230d3.js');
-const component = require('./component-f4c2ecd4.js');
-const Validation = require('./Validation-6d62ae6d.js');
-require('./guid-9272df1b.js');
-require('./resources-aeedfe4f.js');
-require('./browser-843700f4.js');
+const index = require('./index-c3a85d17.js');
+const observers = require('./observers-63095bd4.js');
+const dom = require('./dom-526ae93a.js');
+const form = require('./form-ef534f10.js');
+const interactive = require('./interactive-77fbebed.js');
+const label = require('./label-cadbadfd.js');
+const loadable = require('./loadable-3315b101.js');
+const component = require('./component-8b8d846d.js');
+const Validation = require('./Validation-56f7f6dd.js');
+require('./guid-2999da4b.js');
+require('./resources-2f0b38c2.js');
+require('./browser-767f345c.js');
 
 const optionCss = ":host{display:block}:host([hidden]){display:none}[hidden]{display:none}";
 
@@ -127,7 +127,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}: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{padding-block-start:0.5rem;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}::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-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{padding-block-start:0.5rem;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}::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";
@@ -311,9 +311,10 @@ const Select = class {
         return (index.h("div", { class: CSS.iconContainer }, index.h("calcite-icon", { class: CSS.icon, icon: "chevron-down", scale: component.getIconScale(this.scale) })));
     }
     render() {
-        return (index.h(index.Host, null, index.h("div", { class: CSS.wrapper }, index.h("select", { "aria-label": label.getLabelText(this), class: CSS.select, disabled: this.disabled, onChange: this.handleInternalSelectChange,
+        const { disabled } = this;
+        return (index.h(index.Host, null, index.h(interactive.InteractiveContainer, { disabled: disabled }, index.h("div", { class: CSS.wrapper }, index.h("select", { "aria-label": label.getLabelText(this), class: CSS.select, disabled: disabled, onChange: this.handleInternalSelectChange,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.storeSelectRef }, index.h("slot", null)), this.renderChevron(), index.h(form.HiddenFormInputSlot, { component: this })), this.validationMessage ? (index.h(Validation.Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
+            ref: this.storeSelectRef }, index.h("slot", null)), this.renderChevron(), index.h(form.HiddenFormInputSlot, { component: this })), this.validationMessage ? (index.h(Validation.Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/calcite-option_3.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-option.calcite-option-group.calcite-select.entry.cjs.js","mappings":"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","names":["createObserver","h","Fragment","connectInteractive","connectLabel","connectForm","disconnectInteractive","disconnectLabel","disconnectForm","setUpLoadableComponent","setComponentLoaded","afterConnectDefaultValueSet","updateHostInteraction","componentFocusable","focusElement","getIconScale","Host","getLabelText","HiddenFormInputSlot","Validation"],"sources":["src/components/option/option.scss?tag=calcite-option&encapsulation=shadow","src/components/option/option.tsx","src/components/option-group/option-group.scss?tag=calcite-option-group&encapsulation=shadow","src/components/option-group/option-group.tsx","src/components/select/resources.ts","src/components/select/select.scss?tag=calcite-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":[":host {\n  @apply block;\n}\n\n@include base-component();\n","import { Component, Element, Event, EventEmitter, h, Prop, VNode, Watch } from \"@stencil/core\";\nimport { createObserver } from \"../../utils/observers\";\n\n@Component({\n  tag: \"calcite-option\",\n  styleUrl: \"option.scss\",\n  shadow: true,\n})\nexport class Option {\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({\n    reflect: true,\n  })\n  disabled = false;\n\n  /**\n   * Accessible name for the component.\n   */\n  @Prop({ mutable: true })\n  label: string;\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({\n    reflect: true,\n  })\n  selected: boolean;\n\n  /**\n   * The component's value.\n   */\n  @Prop({ mutable: true })\n  value: any;\n\n  @Watch(\"disabled\")\n  @Watch(\"label\")\n  @Watch(\"selected\")\n  @Watch(\"value\")\n  protected handlePropChange(_newValue: any, _oldValue: any, propName: string): void {\n    if (propName === \"label\" || propName === \"value\") {\n      this.ensureTextContentDependentProps();\n    }\n\n    this.calciteInternalOptionChange.emit();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Variables\n  //\n  //--------------------------------------------------------------------------\n\n  @Element()\n  private el: HTMLCalciteOptionElement;\n\n  private internallySetLabel: string;\n\n  private internallySetValue: any;\n\n  private mutationObserver: MutationObserver = createObserver(\"mutation\", () => {\n    this.ensureTextContentDependentProps();\n    this.calciteInternalOptionChange.emit();\n  });\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  private calciteInternalOptionChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private ensureTextContentDependentProps(): void {\n    const {\n      el: { textContent },\n      internallySetLabel,\n      internallySetValue,\n      label,\n      value,\n    } = this;\n\n    if (!label || label === internallySetLabel) {\n      this.label = textContent;\n      this.internallySetLabel = textContent;\n    }\n\n    if (\n      value == null /* intentional loose equals to handle both undefined & null */ ||\n      value === internallySetValue\n    ) {\n      this.value = textContent;\n      this.internallySetValue = textContent;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.ensureTextContentDependentProps();\n    this.mutationObserver?.observe(this.el, {\n      attributeFilter: [\"label\", \"value\"],\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    return <slot>{this.label}</slot>;\n  }\n}\n",":host {\n  @apply block;\n}\n\n@include base-component();\n","import { Component, Event, EventEmitter, Fragment, h, Prop, VNode, Watch } from \"@stencil/core\";\n\n/**\n * @slot - A slot for adding `calcite-option`s.\n */\n@Component({\n  tag: \"calcite-option-group\",\n  styleUrl: \"option-group.scss\",\n  shadow: true,\n})\nexport class OptionGroup {\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({\n    reflect: true,\n  })\n  disabled = false;\n\n  /**\n   * Accessible name for the component.\n   */\n  @Prop()\n  label!: string;\n\n  @Watch(\"disabled\")\n  @Watch(\"label\")\n  protected handlePropChange(): void {\n    this.calciteInternalOptionGroupChange.emit();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  private calciteInternalOptionGroupChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Fragment>\n        <div>{this.label}</div>\n        <slot />\n      </Fragment>\n    );\n  }\n}\n","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 items 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  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() 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  /**\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  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** The component's `selectedOption` value. */\n  @Prop({ mutable: true }) value: string = null;\n\n  @Watch(\"value\")\n  valueHandler(value: string): void {\n    const items = this.el.querySelectorAll(\"calcite-option\");\n    items.forEach((item) => (item.selected = item.value === value));\n  }\n\n  /**\n   * The component's selected option `HTMLElement`.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedOption: HTMLCalciteOptionElement;\n\n  @Watch(\"selectedOption\")\n  selectedOptionHandler(selectedOption: HTMLCalciteOptionElement): void {\n    this.value = selectedOption?.value;\n  }\n\n  /**\n   * Specifies the width of the component.\n   */\n  @Prop({ reflect: true }) width: Width = \"auto\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteSelectElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultValue: Select[\"value\"];\n\n  private componentToNativeEl = new Map<OptionOrGroup, NativeOptionOrGroup>();\n\n  private mutationObserver = createObserver(\"mutation\", () => this.populateInternalSelect());\n\n  private selectEl: HTMLSelectElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    const { el } = this;\n\n    this.mutationObserver?.observe(el, {\n      subtree: true,\n      childList: true,\n    });\n\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    afterConnectDefaultValueSet(this, this.selectedOption?.value ?? \"\");\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    focusElement(this.selectEl);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the `selectedOption` changes.\n   */\n  @Event({ cancelable: false }) calciteSelectChange: EventEmitter<void>;\n\n  private handleInternalSelectChange = (): void => {\n    const selected = this.selectEl.selectedOptions[0];\n    this.selectFromNativeOption(selected);\n    requestAnimationFrame(() => this.emitChangeEvent());\n  };\n\n  @Listen(\"calciteInternalOptionChange\")\n  @Listen(\"calciteInternalOptionGroupChange\")\n  protected handleOptionOrGroupChange(event: CustomEvent): void {\n    event.stopPropagation();\n\n    const optionOrGroup = event.target as OptionOrGroup;\n    const nativeEl = this.componentToNativeEl.get(optionOrGroup);\n\n    if (!nativeEl) {\n      return;\n    }\n\n    this.updateNativeElement(optionOrGroup, nativeEl);\n\n    if (isOption(optionOrGroup) && optionOrGroup.selected) {\n      this.deselectAllExcept(optionOrGroup);\n      this.selectedOption = optionOrGroup;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onLabelClick(): void {\n    this.setFocus();\n  }\n\n  private updateNativeElement(\n    optionOrGroup: OptionOrGroup,\n    nativeOptionOrGroup: NativeOptionOrGroup\n  ): void {\n    nativeOptionOrGroup.disabled = optionOrGroup.disabled;\n    nativeOptionOrGroup.label = optionOrGroup.label;\n\n    if (isOption(optionOrGroup)) {\n      const option = nativeOptionOrGroup as HTMLOptionElement;\n      option.selected = optionOrGroup.selected;\n      option.value = optionOrGroup.value;\n\n      // need to set innerText for mobile\n      // see https://stackoverflow.com/questions/35021620/ios-safari-not-showing-all-options-for-select-menu/41749701\n      option.innerText = optionOrGroup.label;\n    }\n  }\n\n  private populateInternalSelect = (): void => {\n    const optionsAndGroups = Array.from(\n      this.el.children as HTMLCollectionOf<OptionOrGroup | HTMLSlotElement>\n    ).filter(\n      (child) => child.tagName === \"CALCITE-OPTION\" || child.tagName === \"CALCITE-OPTION-GROUP\"\n    ) as OptionOrGroup[];\n\n    this.clearInternalSelect();\n\n    optionsAndGroups.forEach((optionOrGroup) =>\n      this.selectEl?.append(this.toNativeElement(optionOrGroup))\n    );\n  };\n\n  private clearInternalSelect(): void {\n    this.componentToNativeEl.forEach((value) => value.remove());\n    this.componentToNativeEl.clear();\n  }\n\n  private storeSelectRef = (node: HTMLSelectElement): void => {\n    this.selectEl = node;\n    this.populateInternalSelect();\n\n    const selected = this.selectEl.selectedOptions[0];\n    this.selectFromNativeOption(selected);\n  };\n\n  private selectFromNativeOption(nativeOption: HTMLOptionElement): void {\n    if (!nativeOption) {\n      return;\n    }\n\n    let futureSelected: HTMLCalciteOptionElement;\n\n    this.componentToNativeEl.forEach((nativeOptionOrGroup, optionOrGroup) => {\n      if (isOption(optionOrGroup) && nativeOptionOrGroup === nativeOption) {\n        optionOrGroup.selected = true;\n        futureSelected = optionOrGroup;\n        this.deselectAllExcept(optionOrGroup as HTMLCalciteOptionElement);\n      }\n    });\n\n    if (futureSelected) {\n      this.selectedOption = futureSelected;\n    }\n  }\n\n  private toNativeElement(\n    optionOrGroup: HTMLCalciteOptionElement | HTMLCalciteOptionGroupElement\n  ): NativeOptionOrGroup {\n    if (isOption(optionOrGroup)) {\n      const option = document.createElement(\"option\");\n      this.updateNativeElement(optionOrGroup, option);\n      this.componentToNativeEl.set(optionOrGroup, option);\n\n      return option;\n    }\n\n    if (isOptionGroup(optionOrGroup)) {\n      const group = document.createElement(\"optgroup\");\n      this.updateNativeElement(optionOrGroup, group);\n\n      Array.from(optionOrGroup.children as HTMLCollectionOf<HTMLCalciteOptionElement>).forEach(\n        (option) => {\n          const nativeOption = this.toNativeElement(option);\n          group.append(nativeOption);\n          this.componentToNativeEl.set(optionOrGroup, nativeOption);\n        }\n      );\n\n      this.componentToNativeEl.set(optionOrGroup, group);\n\n      return group;\n    }\n\n    throw new Error(\"unsupported element child provided\");\n  }\n\n  private deselectAllExcept(except: HTMLCalciteOptionElement): void {\n    this.el.querySelectorAll<HTMLCalciteOptionElement>(\"calcite-option\").forEach((option) => {\n      if (option === except) {\n        return;\n      }\n\n      option.selected = false;\n    });\n  }\n\n  private emitChangeEvent = (): void => {\n    this.calciteSelectChange.emit();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderChevron(): VNode {\n    return (\n      <div class={CSS.iconContainer}>\n        <calcite-icon class={CSS.icon} icon=\"chevron-down\" scale={getIconScale(this.scale)} />\n      </div>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <Host>\n        <div class={CSS.wrapper}>\n          <select\n            aria-label={getLabelText(this)}\n            class={CSS.select}\n            disabled={this.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      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-option.calcite-option-group.calcite-select.entry.cjs.js","mappings":"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","names":["createObserver","h","Fragment","connectInteractive","connectLabel","connectForm","disconnectInteractive","disconnectLabel","disconnectForm","setUpLoadableComponent","setComponentLoaded","afterConnectDefaultValueSet","updateHostInteraction","componentFocusable","focusElement","getIconScale","Host","InteractiveContainer","getLabelText","HiddenFormInputSlot","Validation"],"sources":["src/components/option/option.scss?tag=calcite-option&encapsulation=shadow","src/components/option/option.tsx","src/components/option-group/option-group.scss?tag=calcite-option-group&encapsulation=shadow","src/components/option-group/option-group.tsx","src/components/select/resources.ts","src/components/select/select.scss?tag=calcite-select&encapsulation=shadow","src/components/select/select.tsx"],"sourcesContent":[":host {\n  @apply block;\n}\n\n@include base-component();\n","import { Component, Element, Event, EventEmitter, h, Prop, VNode, Watch } from \"@stencil/core\";\nimport { createObserver } from \"../../utils/observers\";\n\n@Component({\n  tag: \"calcite-option\",\n  styleUrl: \"option.scss\",\n  shadow: true,\n})\nexport class Option {\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({\n    reflect: true,\n  })\n  disabled = false;\n\n  /**\n   * Accessible name for the component.\n   */\n  @Prop({ mutable: true })\n  label: string;\n\n  /**\n   * When `true`, the component is selected.\n   */\n  @Prop({\n    reflect: true,\n  })\n  selected: boolean;\n\n  /**\n   * The component's value.\n   */\n  @Prop({ mutable: true })\n  value: any;\n\n  @Watch(\"disabled\")\n  @Watch(\"label\")\n  @Watch(\"selected\")\n  @Watch(\"value\")\n  protected handlePropChange(_newValue: any, _oldValue: any, propName: string): void {\n    if (propName === \"label\" || propName === \"value\") {\n      this.ensureTextContentDependentProps();\n    }\n\n    this.calciteInternalOptionChange.emit();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Variables\n  //\n  //--------------------------------------------------------------------------\n\n  @Element()\n  private el: HTMLCalciteOptionElement;\n\n  private internallySetLabel: string;\n\n  private internallySetValue: any;\n\n  private mutationObserver: MutationObserver = createObserver(\"mutation\", () => {\n    this.ensureTextContentDependentProps();\n    this.calciteInternalOptionChange.emit();\n  });\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  private calciteInternalOptionChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private ensureTextContentDependentProps(): void {\n    const {\n      el: { textContent },\n      internallySetLabel,\n      internallySetValue,\n      label,\n      value,\n    } = this;\n\n    if (!label || label === internallySetLabel) {\n      this.label = textContent;\n      this.internallySetLabel = textContent;\n    }\n\n    if (\n      value == null /* intentional loose equals to handle both undefined & null */ ||\n      value === internallySetValue\n    ) {\n      this.value = textContent;\n      this.internallySetValue = textContent;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.ensureTextContentDependentProps();\n    this.mutationObserver?.observe(this.el, {\n      attributeFilter: [\"label\", \"value\"],\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    return <slot>{this.label}</slot>;\n  }\n}\n",":host {\n  @apply block;\n}\n\n@include base-component();\n","import { Component, Event, EventEmitter, Fragment, h, Prop, VNode, Watch } from \"@stencil/core\";\n\n/**\n * @slot - A slot for adding `calcite-option`s.\n */\n@Component({\n  tag: \"calcite-option-group\",\n  styleUrl: \"option-group.scss\",\n  shadow: true,\n})\nexport class OptionGroup {\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({\n    reflect: true,\n  })\n  disabled = false;\n\n  /**\n   * Accessible name for the component.\n   */\n  @Prop()\n  label!: string;\n\n  @Watch(\"disabled\")\n  @Watch(\"label\")\n  protected handlePropChange(): void {\n    this.calciteInternalOptionGroupChange.emit();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  private calciteInternalOptionGroupChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Fragment>\n        <div>{this.label}</div>\n        <slot />\n      </Fragment>\n    );\n  }\n}\n","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 items 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() 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  /**\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  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  /** The component's `selectedOption` value. */\n  @Prop({ mutable: true }) value: string = null;\n\n  @Watch(\"value\")\n  valueHandler(value: string): void {\n    const items = this.el.querySelectorAll(\"calcite-option\");\n    items.forEach((item) => (item.selected = item.value === value));\n  }\n\n  /**\n   * The component's selected option `HTMLElement`.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedOption: HTMLCalciteOptionElement;\n\n  @Watch(\"selectedOption\")\n  selectedOptionHandler(selectedOption: HTMLCalciteOptionElement): void {\n    this.value = selectedOption?.value;\n  }\n\n  /**\n   * Specifies the width of the component.\n   */\n  @Prop({ reflect: true }) width: Width = \"auto\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteSelectElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultValue: Select[\"value\"];\n\n  private componentToNativeEl = new Map<OptionOrGroup, NativeOptionOrGroup>();\n\n  private mutationObserver = createObserver(\"mutation\", () => this.populateInternalSelect());\n\n  private selectEl: HTMLSelectElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    const { el } = this;\n\n    this.mutationObserver?.observe(el, {\n      subtree: true,\n      childList: true,\n    });\n\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    afterConnectDefaultValueSet(this, this.selectedOption?.value ?? \"\");\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    focusElement(this.selectEl);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the `selectedOption` changes.\n   */\n  @Event({ cancelable: false }) calciteSelectChange: EventEmitter<void>;\n\n  private handleInternalSelectChange = (): void => {\n    const selected = this.selectEl.selectedOptions[0];\n    this.selectFromNativeOption(selected);\n    requestAnimationFrame(() => this.emitChangeEvent());\n  };\n\n  @Listen(\"calciteInternalOptionChange\")\n  @Listen(\"calciteInternalOptionGroupChange\")\n  protected handleOptionOrGroupChange(event: CustomEvent): void {\n    event.stopPropagation();\n\n    const optionOrGroup = event.target as OptionOrGroup;\n    const nativeEl = this.componentToNativeEl.get(optionOrGroup);\n\n    if (!nativeEl) {\n      return;\n    }\n\n    this.updateNativeElement(optionOrGroup, nativeEl);\n\n    if (isOption(optionOrGroup) && optionOrGroup.selected) {\n      this.deselectAllExcept(optionOrGroup);\n      this.selectedOption = optionOrGroup;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onLabelClick(): void {\n    this.setFocus();\n  }\n\n  private updateNativeElement(\n    optionOrGroup: OptionOrGroup,\n    nativeOptionOrGroup: NativeOptionOrGroup\n  ): void {\n    nativeOptionOrGroup.disabled = optionOrGroup.disabled;\n    nativeOptionOrGroup.label = optionOrGroup.label;\n\n    if (isOption(optionOrGroup)) {\n      const option = nativeOptionOrGroup as HTMLOptionElement;\n      option.selected = optionOrGroup.selected;\n      option.value = optionOrGroup.value;\n\n      // need to set innerText for mobile\n      // see https://stackoverflow.com/questions/35021620/ios-safari-not-showing-all-options-for-select-menu/41749701\n      option.innerText = optionOrGroup.label;\n    }\n  }\n\n  private populateInternalSelect = (): void => {\n    const optionsAndGroups = Array.from(\n      this.el.children as HTMLCollectionOf<OptionOrGroup | HTMLSlotElement>\n    ).filter(\n      (child) => child.tagName === \"CALCITE-OPTION\" || child.tagName === \"CALCITE-OPTION-GROUP\"\n    ) as OptionOrGroup[];\n\n    this.clearInternalSelect();\n\n    optionsAndGroups.forEach((optionOrGroup) =>\n      this.selectEl?.append(this.toNativeElement(optionOrGroup))\n    );\n  };\n\n  private clearInternalSelect(): void {\n    this.componentToNativeEl.forEach((value) => value.remove());\n    this.componentToNativeEl.clear();\n  }\n\n  private storeSelectRef = (node: HTMLSelectElement): void => {\n    this.selectEl = node;\n    this.populateInternalSelect();\n\n    const selected = this.selectEl.selectedOptions[0];\n    this.selectFromNativeOption(selected);\n  };\n\n  private selectFromNativeOption(nativeOption: HTMLOptionElement): void {\n    if (!nativeOption) {\n      return;\n    }\n\n    let futureSelected: HTMLCalciteOptionElement;\n\n    this.componentToNativeEl.forEach((nativeOptionOrGroup, optionOrGroup) => {\n      if (isOption(optionOrGroup) && nativeOptionOrGroup === nativeOption) {\n        optionOrGroup.selected = true;\n        futureSelected = optionOrGroup;\n        this.deselectAllExcept(optionOrGroup as HTMLCalciteOptionElement);\n      }\n    });\n\n    if (futureSelected) {\n      this.selectedOption = futureSelected;\n    }\n  }\n\n  private toNativeElement(\n    optionOrGroup: HTMLCalciteOptionElement | HTMLCalciteOptionGroupElement\n  ): NativeOptionOrGroup {\n    if (isOption(optionOrGroup)) {\n      const option = document.createElement(\"option\");\n      this.updateNativeElement(optionOrGroup, option);\n      this.componentToNativeEl.set(optionOrGroup, option);\n\n      return option;\n    }\n\n    if (isOptionGroup(optionOrGroup)) {\n      const group = document.createElement(\"optgroup\");\n      this.updateNativeElement(optionOrGroup, group);\n\n      Array.from(optionOrGroup.children as HTMLCollectionOf<HTMLCalciteOptionElement>).forEach(\n        (option) => {\n          const nativeOption = this.toNativeElement(option);\n          group.append(nativeOption);\n          this.componentToNativeEl.set(optionOrGroup, nativeOption);\n        }\n      );\n\n      this.componentToNativeEl.set(optionOrGroup, group);\n\n      return group;\n    }\n\n    throw new Error(\"unsupported element child provided\");\n  }\n\n  private deselectAllExcept(except: HTMLCalciteOptionElement): void {\n    this.el.querySelectorAll<HTMLCalciteOptionElement>(\"calcite-option\").forEach((option) => {\n      if (option === except) {\n        return;\n      }\n\n      option.selected = false;\n    });\n  }\n\n  private emitChangeEvent = (): void => {\n    this.calciteSelectChange.emit();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  renderChevron(): VNode {\n    return (\n      <div class={CSS.iconContainer}>\n        <calcite-icon class={CSS.icon} icon=\"chevron-down\" scale={getIconScale(this.scale)} />\n      </div>\n    );\n  }\n\n  render(): VNode {\n    const { disabled } = this;\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <div class={CSS.wrapper}>\n            <select\n              aria-label={getLabelText(this)}\n              class={CSS.select}\n              disabled={disabled}\n              onChange={this.handleInternalSelectChange}\n              // 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/cjs/calcite-pagination.cjs.entry.js

@@ -1,22 +1,22 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.2.0-next.0
+ * v2.2.0-next.2
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-96b85efe.js');
-const loadable = require('./loadable-488230d3.js');
-const locale = require('./locale-f3c5ce8e.js');
-const t9n = require('./t9n-7ada50fb.js');
-const observers = require('./observers-20febba7.js');
-const component = require('./component-f4c2ecd4.js');
-require('./dom-afcc4f08.js');
-require('./guid-9272df1b.js');
-require('./resources-aeedfe4f.js');
-require('./key-f65f1f51.js');
+const index = require('./index-c3a85d17.js');
+const loadable = require('./loadable-3315b101.js');
+const locale = require('./locale-cb432455.js');
+const t9n = require('./t9n-f6dc9b37.js');
+const observers = require('./observers-63095bd4.js');
+const component = require('./component-8b8d846d.js');
+require('./dom-526ae93a.js');
+require('./guid-2999da4b.js');
+require('./resources-2f0b38c2.js');
+require('./key-c7167eca.js');
 
 const CSS = {
     page: "page",
@@ -34,7 +34,7 @@ const ICONS = {
 
 /**
  * Do not edit directly
- * Generated on Tue, 19 Dec 2023 17:47:34 GMT
+ * Generated on Wed, 20 Dec 2023 18:35:17 GMT
  */
 const calciteContainerSizeWidthXxs = {"min":"0","max":"320px"}; // Small handheld devices and mini-windows
 const calciteContainerSizeWidthXs = {"min":"321px","max":"476px"}; // Handheld devices