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

package/dist/components/switch.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { e as focusElement, t as toAriaBoolean } from './dom.js';
@@ -11,7 +11,13 @@ import { i as isActivationKey } from './key.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label2.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 
-const switchCss = ":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([scale=s]) .container{block-size:0.75rem}:host([scale=s]) .track{block-size:0.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:0.5rem;inline-size:0.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:0.75rem;inline-size:0.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-2);vertical-align:top;outline-color:transparent}:host(:focus) .track{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.handle{pointer-events:none;position:absolute;display:block;border-radius:9999px;border-width:2px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-block-start:-1px;inset-inline:-1px auto}:host(:hover) .handle,:host(:focus) .handle{border-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([checked]) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]) .handle{border-color:var(--calcite-color-brand);inset-inline:auto -1px}:host([checked]:hover) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]:hover) .handle{border-color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}::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 CSS = {
+    container: "container",
+    track: "track",
+    handle: "handle",
+};
+
+const switchCss = ":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([scale=s]) .container{block-size:0.75rem}:host([scale=s]) .track{block-size:0.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:0.5rem;inline-size:0.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:0.75rem;inline-size:0.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{outline-width:0px}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-2);background-color:var(--calcite-color-foreground-2);vertical-align:top;outline-color:transparent}:host(:focus) .track{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.handle{pointer-events:none;position:absolute;display:block;border-radius:9999px;border-width:2px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-block-start:-1px;inset-inline:-1px auto}.container:hover .handle,:host(:focus) .handle{border-color:var(--calcite-color-brand);box-shadow:inset 0 0 0 1px var(--calcite-color-brand)}:host([checked]) .track{border-color:var(--calcite-color-brand-hover);background-color:var(--calcite-color-brand)}:host([checked]) .handle{border-color:var(--calcite-color-brand);inset-inline:auto -1px}:host([checked]) .container:hover .handle{border-color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}::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 CalciteSwitchStyle0 = switchCss;
 
 const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends HTMLElement {
@@ -101,7 +107,7 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends HTMLElement
     //
     // --------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '3844964b46482e9b6e902c07eccf97264970f3de', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'c0028a5587e7d346ba4d0d7a214f649606f85e17', disabled: this.disabled }, h("div", { key: '2dbb854db5b5783abad9bcb620185093af3cd80e', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "container", ref: this.setSwitchEl, role: "switch", tabIndex: 0 }, h("div", { key: '0a8a5d9acf8c55011bd028b3ff911d5c488429b1', class: "track" }, h("div", { key: '2aa4584c4391ab587d58389657cf04e71a47d065', class: "handle" })), h(HiddenFormInputSlot, { key: 'f065afccc09efadb5759812ecb68be0b71e4ccda', component: this })))));
+        return (h(Host, { key: 'c20adcd3fc9cae797400858f98e67107b03fa9e0', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '4ed4d6a1279a878e9a77ab98df8e4ef28a3de63c', disabled: this.disabled }, h("div", { key: '96197c87a50be23dc97c96bac701585301d2f307', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: CSS.container, ref: this.setSwitchEl, role: "switch", tabIndex: 0 }, h("div", { key: 'e11b7ba961982ab310253460fb39ece47e37c012', class: CSS.track }, h("div", { key: '42652b1d4cad4ebebb095935530d962225d8dac3', class: CSS.handle })), h(HiddenFormInputSlot, { key: 'f0bc123cdde232a4aa6ee08056c43f65c804b05d', component: this })))));
     }
     get el() { return this; }
     static get style() { return CalciteSwitchStyle0; }

package/dist/components/switch.js.map

@@ -1 +1 @@
-{"file":"switch.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,q9FAAq9F,CAAC;AACx+F,4BAAe,SAAS;;MCuCX,MAAM;;;;;;QAiFjB,mBAAc,GAAG,CAAC,KAAoB;YACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAChD,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;SACF,CAAC;QAcM,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,MAAM,EAAE,CAAC;SACf,CAAC;QAEM,gBAAW,GAAG,CAAC,EAAkB;YACvC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB,CAAC;wBApGkC,KAAK;;;;qBAqBD,GAAG;uBAGO,KAAK;;;;;;;;;IA+BvD,MAAM,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAE/B,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC7B;;;;;;IAQD,mBAAmB,CAAC,KAAuB;QACzC,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;KACzB;IASD,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,MAAM,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;IAEO,MAAM;QACZ,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;KACjC;;;;;;IA+BD,iBAAiB;QACf,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,WAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAED,iBAAiB;QACf,sBAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClB,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC5B,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAQD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,IAC9D,EAAC,oBAAoB,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3C,4EACgB,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,gBAC7B,YAAY,CAAC,IAAI,CAAC,EAC9B,KAAK,EAAC,WAAW,EACjB,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,IAEX,4DAAK,KAAK,EAAC,OAAO,IAChB,4DAAK,KAAK,EAAC,QAAQ,GAAG,CAClB,EACN,EAAC,mBAAmB,qDAAC,SAAS,EAAE,IAAI,GAAI,CACpC,CACe,CAClB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/switch/switch.scss?tag=calcite-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["// sizes\n:host([scale=\"s\"]) {\n  .container {\n    @apply h-3;\n  }\n  .track {\n    @apply h-3 w-6;\n  }\n  .handle {\n    @apply h-2 w-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  .container {\n    @apply h-4;\n  }\n  .track {\n    @apply h-4 w-8;\n  }\n  .handle {\n    @apply h-3 w-3;\n  }\n}\n\n:host([scale=\"l\"]) {\n  .container {\n    @apply h-6;\n  }\n  .track {\n    @apply h-6 w-12;\n  }\n  .handle {\n    @apply h-5 w-5;\n  }\n}\n\n:host {\n  @apply relative\n    inline-block\n    w-auto\n    cursor-pointer\n    select-none\n    align-middle;\n  tap-highlight-color: transparent;\n}\n\n@include disabled();\n\n.container {\n  @apply outline-0;\n}\n\n.track {\n  @apply bg-foreground-2\n    border-color-2\n    pointer-events-none\n    relative\n    box-border\n    inline-block\n    rounded-full\n    border\n    border-solid\n    align-top\n    focus-base;\n}\n\n:host(:focus) .track {\n  @apply focus-outset;\n}\n\n.handle {\n  @apply bg-foreground-1\n    border-color-input\n    pointer-events-none\n    absolute\n    block\n    rounded-full\n    border-2\n    border-solid\n    transition-all\n    duration-150\n    ease-in-out;\n  inset-block-start: -1px;\n  inset-inline: -1px theme(\"inset.auto\");\n}\n\n:host(:hover),\n:host(:focus) {\n  .handle {\n    @apply border-color-brand;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n  }\n}\n\n:host([checked]) {\n  .track {\n    @apply bg-brand border-color-brand-hover;\n  }\n  .handle {\n    @apply border-color-brand;\n    inset-inline: theme(\"inset.auto\") -1px;\n  }\n}\n\n:host([checked]:hover) {\n  .track {\n    @apply bg-brand border-color-brand-hover;\n  }\n  .handle {\n    @apply border-color-brand-hover;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n  }\n}\n\n@media (forced-colors: active) {\n  :host([checked]) {\n    .track {\n      background-color: canvasText;\n    }\n  }\n}\n\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { focusElement, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n} from \"../../utils/form\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale } from \"../interfaces\";\n\n@Component({\n  tag: \"calcite-switch\",\n  styleUrl: \"switch.scss\",\n  shadow: true,\n})\nexport class Switch\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\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 size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteSwitchElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  switchEl: HTMLDivElement;\n\n  formEl: HTMLFormElement;\n\n  defaultValue: Switch[\"checked\"];\n\n  defaultChecked: boolean;\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.switchEl);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (!this.disabled && isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  onLabelClick(): void {\n    if (!this.disabled) {\n      this.toggle();\n      this.setFocus();\n    }\n  }\n\n  private toggle(): void {\n    this.checked = !this.checked;\n    this.calciteSwitchChange.emit();\n  }\n\n  private clickHandler = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.toggle();\n  };\n\n  private setSwitchEl = (el: HTMLDivElement): void => {\n    this.switchEl = el;\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the `checked` value has changed.\n   */\n  @Event({ cancelable: false }) calciteSwitchChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={toAriaBoolean(this.checked)}\n            aria-label={getLabelText(this)}\n            class=\"container\"\n            ref={this.setSwitchEl}\n            role=\"switch\"\n            tabIndex={0}\n          >\n            <div class=\"track\">\n              <div class=\"handle\" />\n            </div>\n            <HiddenFormInputSlot component={this} />\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"switch.js","mappings":";;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACjB;;ACJD,MAAM,SAAS,GAAG,22FAA22F,CAAC;AAC93F,4BAAe,SAAS;;MCwCX,MAAM;;;;;;QAiFjB,mBAAc,GAAG,CAAC,KAAoB;YACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAChD,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;SACF,CAAC;QAcM,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,MAAM,EAAE,CAAC;SACf,CAAC;QAEM,gBAAW,GAAG,CAAC,EAAkB;YACvC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB,CAAC;wBApGkC,KAAK;;;;qBAqBD,GAAG;uBAGO,KAAK;;;;;;;;;IA+BvD,MAAM,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAE/B,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC7B;;;;;;IAQD,mBAAmB,CAAC,KAAuB;QACzC,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;KACzB;IASD,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,MAAM,EAAE,CAAC;YACd,IAAI,CAAC,QAAQ,EAAE,CAAC;SACjB;KACF;IAEO,MAAM;QACZ,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;KACjC;;;;;;IA+BD,iBAAiB;QACf,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,WAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAED,iBAAiB;QACf,sBAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClB,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC5B,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,cAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAQD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,IAC9D,EAAC,oBAAoB,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3C,4EACgB,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,gBAC7B,YAAY,CAAC,IAAI,CAAC,EAC9B,KAAK,EAAE,GAAG,CAAC,SAAS,EACpB,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,IAEX,4DAAK,KAAK,EAAE,GAAG,CAAC,KAAK,IACnB,4DAAK,KAAK,EAAE,GAAG,CAAC,MAAM,GAAI,CACtB,EACN,EAAC,mBAAmB,qDAAC,SAAS,EAAE,IAAI,GAAI,CACpC,CACe,CAClB,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/switch/resources.ts","src/components/switch/switch.scss?tag=calcite-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  track: \"track\",\n  handle: \"handle\",\n};\n","// sizes\n:host([scale=\"s\"]) {\n  .container {\n    @apply h-3;\n  }\n  .track {\n    @apply h-3 w-6;\n  }\n  .handle {\n    @apply h-2 w-2;\n  }\n}\n\n:host([scale=\"m\"]) {\n  .container {\n    @apply h-4;\n  }\n  .track {\n    @apply h-4 w-8;\n  }\n  .handle {\n    @apply h-3 w-3;\n  }\n}\n\n:host([scale=\"l\"]) {\n  .container {\n    @apply h-6;\n  }\n  .track {\n    @apply h-6 w-12;\n  }\n  .handle {\n    @apply h-5 w-5;\n  }\n}\n\n:host {\n  @apply relative\n    inline-block\n    w-auto\n    cursor-pointer\n    select-none\n    align-middle;\n  tap-highlight-color: transparent;\n}\n\n@include disabled();\n\n.container {\n  @apply outline-0;\n}\n\n.track {\n  @apply bg-foreground-2\n    border-color-2\n    pointer-events-none\n    relative\n    box-border\n    inline-block\n    rounded-full\n    border\n    border-solid\n    align-top\n    focus-base;\n}\n\n:host(:focus) .track {\n  @apply focus-outset;\n}\n\n.handle {\n  @apply bg-foreground-1\n    border-color-input\n    pointer-events-none\n    absolute\n    block\n    rounded-full\n    border-2\n    border-solid\n    transition-all\n    duration-150\n    ease-in-out;\n  inset-block-start: -1px;\n  inset-inline: -1px theme(\"inset.auto\");\n}\n\n.container:hover,\n:host(:focus) {\n  .handle {\n    @apply border-color-brand;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n  }\n}\n\n:host([checked]) {\n  .track {\n    @apply bg-brand border-color-brand-hover;\n  }\n  .handle {\n    @apply border-color-brand;\n    inset-inline: theme(\"inset.auto\") -1px;\n  }\n\n  .container:hover {\n    .handle {\n      @apply border-color-brand-hover;\n      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n    }\n  }\n}\n\n@media (forced-colors: active) {\n  :host([checked]) {\n    .track {\n      background-color: canvasText;\n    }\n  }\n}\n\n@include hidden-form-input();\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport { focusElement, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n} from \"../../utils/form\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { Scale } from \"../interfaces\";\nimport { CSS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-switch\",\n  styleUrl: \"switch.scss\",\n  shadow: true,\n})\nexport class Switch\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\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 size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteSwitchElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  switchEl: HTMLDivElement;\n\n  formEl: HTMLFormElement;\n\n  defaultValue: Switch[\"checked\"];\n\n  defaultChecked: boolean;\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.switchEl);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (!this.disabled && isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  onLabelClick(): void {\n    if (!this.disabled) {\n      this.toggle();\n      this.setFocus();\n    }\n  }\n\n  private toggle(): void {\n    this.checked = !this.checked;\n    this.calciteSwitchChange.emit();\n  }\n\n  private clickHandler = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.toggle();\n  };\n\n  private setSwitchEl = (el: HTMLDivElement): void => {\n    this.switchEl = el;\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the `checked` value has changed.\n   */\n  @Event({ cancelable: false }) calciteSwitchChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    return (\n      <Host onClick={this.clickHandler} onKeyDown={this.keyDownHandler}>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={toAriaBoolean(this.checked)}\n            aria-label={getLabelText(this)}\n            class={CSS.container}\n            ref={this.setSwitchEl}\n            role=\"switch\"\n            tabIndex={0}\n          >\n            <div class={CSS.track}>\n              <div class={CSS.handle} />\n            </div>\n            <HiddenFormInputSlot component={this} />\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/t9n.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { Build, getAssetPath } from '@stencil/core/internal/client/index.js';
 import { g as getSupportedLocale } from './locale.js';
@@ -31,6 +31,9 @@ function mergeMessages(component) {
         ...component.messageOverrides,
     };
 }
+function noop() {
+    // intentionally empty
+}
 /**
  * This utility sets up the messages used by the component. It should be awaited in the `componentWillLoad` lifecycle hook.
  *
@@ -84,7 +87,8 @@ function connectMessages(component) {
  * @param component
  */
 function disconnectMessages(component) {
-    component.onMessagesChange = undefined;
+    // we set this to noop to for watchers triggered when components are disconnected
+    component.onMessagesChange = noop;
 }
 function defaultOnMessagesChange() {
     mergeMessages(this);

package/dist/components/t9n.js.map

@@ -1 +1 @@
-{"file":"t9n.js","mappings":";;;;;;;;AAKO,MAAM,iCAAiC,GAA2C,EAAE,CAAC;AAE5F,eAAe,gBAAgB,CAAC,IAAY,EAAE,SAAiB;IAC7D,MAAM,GAAG,GAAG,GAAG,SAAS,IAAI,IAAI,EAAE,CAAC;IAEnC,IAAI,iCAAiC,CAAC,GAAG,CAAC,EAAE;QAC1C,OAAO,iCAAiC,CAAC,GAAG,CAAC,CAAC;KAC/C;IAED,iCAAiC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,YAAY,SAAS,iBAAiB,IAAI,OAAO,CAAC,CAAC;SAC5G,IAAI,CAAC,CAAC,IAAI;QACT,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YACZ,sBAAsB,EAAE,CAAC;SAC1B;QACD,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;KACpB,CAAC;SACD,KAAK,CAAC,MAAM,sBAAsB,EAAE,CAAC,CAAC;IAEzC,OAAO,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAChD,CAAC;AAED,SAAS,sBAAsB;IAC7B,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;AAC9D,CAAC;AAED,SAAS,aAAa,CAAC,SAAuB;IAC5C,SAAS,CAAC,QAAQ,GAAG;QACnB,GAAG,SAAS,CAAC,eAAe;QAC5B,GAAG,SAAS,CAAC,gBAAgB;KAC9B,CAAC;AACJ,CAAC;AAED;;;;;AAKO,eAAe,aAAa,CAAC,SAAuB;IACzD,SAAS,CAAC,eAAe,GAAG,MAAM,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IACtF,aAAa,CAAC,SAAS,CAAC,CAAC;AAC3B,CAAC;AAED,eAAe,aAAa,CAAC,SAAuB,EAAE,IAAY;IAChE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;QACpB,OAAO,EAAE,CAAC;KACX;IAED,MAAM,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC;IACzB,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;IACrC,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAElD,OAAO,gBAAgB,CAAC,kBAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,aAAa,CAAC,CAAC;AAC1E,CAAC;AAED;;;;;;;;;;;AAWO,eAAe,cAAc,CAAC,SAAuB,EAAE,IAAY;IACxE,SAAS,CAAC,eAAe,GAAG,MAAM,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IACjE,aAAa,CAAC,SAAS,CAAC,CAAC;AAC3B,CAAC;AAED;;;;;;;;;SASgB,eAAe,CAAC,SAAuB;IACrD,SAAS,CAAC,gBAAgB,GAAG,uBAAuB,CAAC;AACvD,CAAC;AAED;;;;;;;SAOgB,kBAAkB,CAAC,SAAuB;IACxD,SAAS,CAAC,gBAAgB,GAAG,SAAS,CAAC;AACzC,CAAC;AA6CD,SAAS,uBAAuB;IAC9B,aAAa,CAAC,IAAI,CAAC,CAAC;AACtB;;;;","names":[],"sources":["src/utils/t9n.ts"],"sourcesContent":["import { Build, getAssetPath } from \"@stencil/core\";\nimport { getSupportedLocale, LocalizedComponent } from \"./locale\";\n\nexport type MessageBundle = Record<string, string>;\n\nexport const componentLangToMessageBundleCache: Record<string, Promise<MessageBundle>> = {};\n\nasync function getMessageBundle(lang: string, component: string): Promise<MessageBundle> {\n  const key = `${component}_${lang}`;\n\n  if (componentLangToMessageBundleCache[key]) {\n    return componentLangToMessageBundleCache[key];\n  }\n\n  componentLangToMessageBundleCache[key] = fetch(getAssetPath(`./assets/${component}/t9n/messages_${lang}.json`))\n    .then((resp) => {\n      if (!resp.ok) {\n        throwMessageFetchError();\n      }\n      return resp.json();\n    })\n    .catch(() => throwMessageFetchError());\n\n  return componentLangToMessageBundleCache[key];\n}\n\nfunction throwMessageFetchError(): never {\n  throw new Error(\"could not fetch component message bundle\");\n}\n\nfunction mergeMessages(component: T9nComponent): void {\n  component.messages = {\n    ...component.defaultMessages,\n    ...component.messageOverrides,\n  };\n}\n\n/**\n * This utility sets up the messages used by the component. It should be awaited in the `componentWillLoad` lifecycle hook.\n *\n * @param component\n */\nexport async function setUpMessages(component: T9nComponent): Promise<void> {\n  component.defaultMessages = await fetchMessages(component, component.effectiveLocale);\n  mergeMessages(component);\n}\n\nasync function fetchMessages(component: T9nComponent, lang: string): Promise<MessageBundle> {\n  if (!Build.isBrowser) {\n    return {};\n  }\n\n  const { el } = component;\n  const tag = el.tagName.toLowerCase();\n  const componentName = tag.replace(\"calcite-\", \"\");\n\n  return getMessageBundle(getSupportedLocale(lang, \"t9n\"), componentName);\n}\n\n/**\n * This utility must be set up for the component to update its default message bundle if the locale changes.\n *\n * It can be set up in **either** of the following ways:\n *\n * 1. called from `LocalizedComponent`'s `onLocaleChange` method or\n * 2. called from a watcher configured to watch `LocalizedComponent`'s `effectiveLocale` prop\n *\n * @param component\n * @param lang\n */\nexport async function updateMessages(component: T9nComponent, lang: string): Promise<void> {\n  component.defaultMessages = await fetchMessages(component, lang);\n  mergeMessages(component);\n}\n\n/**\n * This utility sets up internals for messages support.\n *\n * It needs to be called in `connectedCallback`\n *\n * **Note**: this must be called after `LocalizedComponent`'s `connectLocalized` method.\n *\n * @param component\n */\nexport function connectMessages(component: T9nComponent): void {\n  component.onMessagesChange = defaultOnMessagesChange;\n}\n\n/**\n * This utility tears down internals for messages support.\n *\n * It needs to be called in `disconnectedCallback`\n *\n * @param component\n */\nexport function disconnectMessages(component: T9nComponent): void {\n  component.onMessagesChange = undefined;\n}\n\n/**\n * This interface enables components to support built-in translation strings.\n *\n * **Notes**:\n *\n * This requires `LocalizedComponent` to be implemented.\n * To avoid unnecessary lookups, composite components should set `lang` on internal t9n components.\n */\nexport interface T9nComponent extends LocalizedComponent {\n  el: HTMLElement;\n\n  /**\n   * This property holds all messages used by the component's rendering.\n   *\n   * This prop should use the `@Prop` decorator. It uses `@Prop` decorator for testing purpose only.\n   */\n  messages: MessageBundle;\n\n  /**\n   * This property holds the component's default messages.\n   */\n  defaultMessages: MessageBundle;\n\n  /**\n   * This property holds all user message overrides.\n   *\n   * This prop should use the `@Prop` decorator.\n   */\n  messageOverrides: Partial<MessageBundle>;\n\n  /**\n   * This private method ensures messages are kept in sync.\n   *\n   * This method should be empty and configured to watch for changes on  `messageOverrides` property.\n   *\n   * @Watch(\"messageOverrides\")\n   * onMessagesChange(): void {\n   *  \\/* wired up by t9n util *\\/\n   * }\n   */\n  onMessagesChange(): void;\n}\n\nfunction defaultOnMessagesChange(this: T9nComponent): void {\n  mergeMessages(this);\n}\n"],"version":3}
+{"file":"t9n.js","mappings":";;;;;;;;AAKO,MAAM,iCAAiC,GAA2C,EAAE,CAAC;AAE5F,eAAe,gBAAgB,CAAC,IAAY,EAAE,SAAiB;IAC7D,MAAM,GAAG,GAAG,GAAG,SAAS,IAAI,IAAI,EAAE,CAAC;IAEnC,IAAI,iCAAiC,CAAC,GAAG,CAAC,EAAE;QAC1C,OAAO,iCAAiC,CAAC,GAAG,CAAC,CAAC;KAC/C;IAED,iCAAiC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,YAAY,SAAS,iBAAiB,IAAI,OAAO,CAAC,CAAC;SAC5G,IAAI,CAAC,CAAC,IAAI;QACT,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE;YACZ,sBAAsB,EAAE,CAAC;SAC1B;QACD,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;KACpB,CAAC;SACD,KAAK,CAAC,MAAM,sBAAsB,EAAE,CAAC,CAAC;IAEzC,OAAO,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAChD,CAAC;AAED,SAAS,sBAAsB;IAC7B,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;AAC9D,CAAC;AAED,SAAS,aAAa,CAAC,SAAuB;IAC5C,SAAS,CAAC,QAAQ,GAAG;QACnB,GAAG,SAAS,CAAC,eAAe;QAC5B,GAAG,SAAS,CAAC,gBAAgB;KAC9B,CAAC;AACJ,CAAC;AAED,SAAS,IAAI;;AAEb,CAAC;AAED;;;;;AAKO,eAAe,aAAa,CAAC,SAAuB;IACzD,SAAS,CAAC,eAAe,GAAG,MAAM,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IACtF,aAAa,CAAC,SAAS,CAAC,CAAC;AAC3B,CAAC;AAED,eAAe,aAAa,CAAC,SAAuB,EAAE,IAAY;IAChE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;QACpB,OAAO,EAAE,CAAC;KACX;IAED,MAAM,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC;IACzB,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;IACrC,MAAM,aAAa,GAAG,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAElD,OAAO,gBAAgB,CAAC,kBAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,aAAa,CAAC,CAAC;AAC1E,CAAC;AAED;;;;;;;;;;;AAWO,eAAe,cAAc,CAAC,SAAuB,EAAE,IAAY;IACxE,SAAS,CAAC,eAAe,GAAG,MAAM,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IACjE,aAAa,CAAC,SAAS,CAAC,CAAC;AAC3B,CAAC;AAED;;;;;;;;;SASgB,eAAe,CAAC,SAAuB;IACrD,SAAS,CAAC,gBAAgB,GAAG,uBAAuB,CAAC;AACvD,CAAC;AAED;;;;;;;SAOgB,kBAAkB,CAAC,SAAuB;;IAExD,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC;AACpC,CAAC;AA6CD,SAAS,uBAAuB;IAC9B,aAAa,CAAC,IAAI,CAAC,CAAC;AACtB;;;;","names":[],"sources":["src/utils/t9n.ts"],"sourcesContent":["import { Build, getAssetPath } from \"@stencil/core\";\nimport { getSupportedLocale, LocalizedComponent } from \"./locale\";\n\nexport type MessageBundle = Record<string, string>;\n\nexport const componentLangToMessageBundleCache: Record<string, Promise<MessageBundle>> = {};\n\nasync function getMessageBundle(lang: string, component: string): Promise<MessageBundle> {\n  const key = `${component}_${lang}`;\n\n  if (componentLangToMessageBundleCache[key]) {\n    return componentLangToMessageBundleCache[key];\n  }\n\n  componentLangToMessageBundleCache[key] = fetch(getAssetPath(`./assets/${component}/t9n/messages_${lang}.json`))\n    .then((resp) => {\n      if (!resp.ok) {\n        throwMessageFetchError();\n      }\n      return resp.json();\n    })\n    .catch(() => throwMessageFetchError());\n\n  return componentLangToMessageBundleCache[key];\n}\n\nfunction throwMessageFetchError(): never {\n  throw new Error(\"could not fetch component message bundle\");\n}\n\nfunction mergeMessages(component: T9nComponent): void {\n  component.messages = {\n    ...component.defaultMessages,\n    ...component.messageOverrides,\n  };\n}\n\nfunction noop(): void {\n  // intentionally empty\n}\n\n/**\n * This utility sets up the messages used by the component. It should be awaited in the `componentWillLoad` lifecycle hook.\n *\n * @param component\n */\nexport async function setUpMessages(component: T9nComponent): Promise<void> {\n  component.defaultMessages = await fetchMessages(component, component.effectiveLocale);\n  mergeMessages(component);\n}\n\nasync function fetchMessages(component: T9nComponent, lang: string): Promise<MessageBundle> {\n  if (!Build.isBrowser) {\n    return {};\n  }\n\n  const { el } = component;\n  const tag = el.tagName.toLowerCase();\n  const componentName = tag.replace(\"calcite-\", \"\");\n\n  return getMessageBundle(getSupportedLocale(lang, \"t9n\"), componentName);\n}\n\n/**\n * This utility must be set up for the component to update its default message bundle if the locale changes.\n *\n * It can be set up in **either** of the following ways:\n *\n * 1. called from `LocalizedComponent`'s `onLocaleChange` method or\n * 2. called from a watcher configured to watch `LocalizedComponent`'s `effectiveLocale` prop\n *\n * @param component\n * @param lang\n */\nexport async function updateMessages(component: T9nComponent, lang: string): Promise<void> {\n  component.defaultMessages = await fetchMessages(component, lang);\n  mergeMessages(component);\n}\n\n/**\n * This utility sets up internals for messages support.\n *\n * It needs to be called in `connectedCallback`\n *\n * **Note**: this must be called after `LocalizedComponent`'s `connectLocalized` method.\n *\n * @param component\n */\nexport function connectMessages(component: T9nComponent): void {\n  component.onMessagesChange = defaultOnMessagesChange;\n}\n\n/**\n * This utility tears down internals for messages support.\n *\n * It needs to be called in `disconnectedCallback`\n *\n * @param component\n */\nexport function disconnectMessages(component: T9nComponent): void {\n  // we set this to noop to for watchers triggered when components are disconnected\n  component.onMessagesChange = noop;\n}\n\n/**\n * This interface enables components to support built-in translation strings.\n *\n * **Notes**:\n *\n * This requires `LocalizedComponent` to be implemented.\n * To avoid unnecessary lookups, composite components should set `lang` on internal t9n components.\n */\nexport interface T9nComponent extends LocalizedComponent {\n  el: HTMLElement;\n\n  /**\n   * This property holds all messages used by the component's rendering.\n   *\n   * This prop should use the `@Prop` decorator. It uses `@Prop` decorator for testing purpose only.\n   */\n  messages: MessageBundle;\n\n  /**\n   * This property holds the component's default messages.\n   */\n  defaultMessages: MessageBundle;\n\n  /**\n   * This property holds all user message overrides.\n   *\n   * This prop should use the `@Prop` decorator.\n   */\n  messageOverrides: Partial<MessageBundle>;\n\n  /**\n   * This private method ensures messages are kept in sync.\n   *\n   * This method should be empty and configured to watch for changes on  `messageOverrides` property.\n   *\n   * @Watch(\"messageOverrides\")\n   * onMessagesChange(): void {\n   *  \\/* wired up by t9n util *\\/\n   * }\n   */\n  onMessagesChange(): void;\n}\n\nfunction defaultOnMessagesChange(this: T9nComponent): void {\n  mergeMessages(this);\n}\n"],"version":3}

package/dist/components/tab-nav.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, readTask, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as calciteSize24, a as calciteSize32, b as calciteSize44 } from './core.js';
-import { v as focusElementInGroup, a as getElementDir, y as filterDirectChildren } from './dom.js';
+import { v as focusElementInGroup, a as getElementDir, z as filterDirectChildren } from './dom.js';
 import { c as createObserver } from './observers.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';

package/dist/components/tab-title.js

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

package/dist/components/tab.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
-import { x as nodeListToArray } from './dom.js';
+import { y as nodeListToArray } from './dom.js';
 import { g as guid } from './guid.js';
 
 const CSS = {

package/dist/components/table-cell.js

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

package/dist/components/table-header.js

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

package/dist/components/tabs.js

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

package/dist/components/th.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/throttle.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { d as debounce, i as isObject } from './debounce.js';
 

package/dist/components/time-picker.js

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

package/dist/components/tr.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/uk.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/utils.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 const hexChar = /^[0-9A-F]$/i;
 const shorthandHex = /^#[0-9A-F]{3}$/i;

package/dist/components/utils2.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { Build } from '@stencil/core/internal/client/index.js';
-import { x as nodeListToArray } from './dom.js';
+import { y as nodeListToArray } from './dom.js';
 
 const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";

package/dist/components/utils3.js

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

package/dist/components/vi.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/zh-cn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/zh-hk.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/zh-tw.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.9.0-next.2
+ * v2.9.0-next.20
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/esm/ExpandToggle-bc8742ff.js

@@ -0,0 +1,100 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.9.0-next.20
+ */
+import { f as forceUpdate, h } from './index-6356d89d.js';
+import { g as getElementDir } from './dom-ca168555.js';
+import { S as SLOTS$1 } from './resources-bb5e0a3c.js';
+import { S as SLOTS } from './resources-3eddbc13.js';
+
+const overflowActionsDebounceInMs = 150;
+const groupBufferPx = 2;
+const getAverage = (arr) => arr.reduce((p, c) => p + c, 0) / arr.length;
+const geActionDimensions = (actions) => {
+    const actionsNotSlotted = actions.filter((action) => action.slot !== SLOTS$1.menuActions);
+    const actionLen = actionsNotSlotted?.length;
+    return {
+        actionWidth: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientWidth || 0)) : 0,
+        actionHeight: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientHeight || 0)) : 0,
+    };
+};
+const getMaxActionCount = ({ width, actionWidth, layout, height, actionHeight, groupCount, }) => {
+    const maxContainerPx = layout === "horizontal" ? width : height;
+    const avgItemPx = layout === "horizontal" ? actionWidth : actionHeight;
+    return Math.floor((maxContainerPx - groupCount * groupBufferPx) / avgItemPx);
+};
+const getOverflowCount = ({ layout, actionCount, actionWidth, width, actionHeight, height, groupCount, }) => {
+    return Math.max(actionCount - getMaxActionCount({ width, actionWidth, layout, height, actionHeight, groupCount }), 0);
+};
+const queryActions = (el) => {
+    return Array.from(el.querySelectorAll("calcite-action")).filter((action) => action.closest("calcite-action-menu") ? action.slot === SLOTS.trigger : true);
+};
+const overflowActions = ({ actionGroups, expanded, overflowCount, }) => {
+    let needToSlotCount = overflowCount;
+    actionGroups.reverse().forEach((group) => {
+        let slottedWithinGroupCount = 0;
+        const groupActions = queryActions(group).reverse();
+        groupActions.forEach((groupAction) => {
+            if (groupAction.slot === SLOTS$1.menuActions) {
+                groupAction.removeAttribute("slot");
+                groupAction.textEnabled = expanded;
+            }
+        });
+        if (needToSlotCount > 0) {
+            groupActions.some((groupAction) => {
+                const unslottedActions = groupActions.filter((action) => !action.slot);
+                if (unslottedActions.length > 1 && groupActions.length > 2 && !groupAction.closest("calcite-action-menu")) {
+                    groupAction.textEnabled = true;
+                    groupAction.setAttribute("slot", SLOTS$1.menuActions);
+                    slottedWithinGroupCount++;
+                    if (slottedWithinGroupCount > 1) {
+                        needToSlotCount--;
+                    }
+                }
+                return needToSlotCount < 1;
+            });
+        }
+        forceUpdate(group);
+    });
+};
+
+const ICONS = {
+    chevronsLeft: "chevrons-left",
+    chevronsRight: "chevrons-right",
+};
+function getCalcitePosition(position, el) {
+    return position || el.closest("calcite-shell-panel")?.position || "start";
+}
+function toggleChildActionText({ el, expanded, }) {
+    queryActions(el)
+        .filter((el) => el.slot !== SLOTS$1.menuActions)
+        .forEach((action) => (action.textEnabled = expanded));
+    el.querySelectorAll("calcite-action-group, calcite-action-menu").forEach((el) => (el.expanded = expanded));
+}
+const setTooltipReference = ({ tooltip, referenceElement, expanded, ref, }) => {
+    if (tooltip) {
+        tooltip.referenceElement = !expanded && referenceElement ? referenceElement : null;
+    }
+    if (ref) {
+        ref(referenceElement);
+    }
+    return referenceElement;
+};
+const ExpandToggle = ({ expanded, expandText, collapseText, toggle, el, position, tooltip, ref, scale, }) => {
+    const rtl = getElementDir(el) === "rtl";
+    const text = expanded ? collapseText : expandText;
+    const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
+    if (rtl) {
+        icons.reverse();
+    }
+    const end = getCalcitePosition(position, el) === "end";
+    const expandIcon = end ? icons[1] : icons[0];
+    const collapseIcon = end ? icons[0] : icons[1];
+    const actionNode = (h("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: text, textEnabled: expanded, title: !expanded && !tooltip ? text : null }));
+    return actionNode;
+};
+
+export { ExpandToggle as E, overflowActions as a, getOverflowCount as b, geActionDimensions as g, overflowActionsDebounceInMs as o, queryActions as q, toggleChildActionText as t };
+
+//# sourceMappingURL=ExpandToggle-bc8742ff.js.map

package/dist/esm/ExpandToggle-bc8742ff.js.map

@@ -0,0 +1 @@
+{"file":"ExpandToggle-bc8742ff.js","mappings":"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","names":["ACTION_GROUP_SLOTS","ACTION_MENU_SLOTS"],"sources":["src/components/action-bar/utils.ts","src/components/functional/ExpandToggle.tsx"],"sourcesContent":["import { forceUpdate } from \"@stencil/core\";\nimport { SLOTS as ACTION_GROUP_SLOTS } from \"../action-group/resources\";\nimport { SLOTS as ACTION_MENU_SLOTS } from \"../action-menu/resources\";\nimport { Layout } from \"../interfaces\";\n\nexport const overflowActionsDebounceInMs = 150;\nconst groupBufferPx = 2;\n\nconst getAverage = (arr: number[]) => arr.reduce((p, c) => p + c, 0) / arr.length;\n\nexport const geActionDimensions = (\n  actions: HTMLCalciteActionElement[],\n): { actionWidth: number; actionHeight: number } => {\n  const actionsNotSlotted = actions.filter((action) => action.slot !== ACTION_GROUP_SLOTS.menuActions);\n  const actionLen = actionsNotSlotted?.length;\n  return {\n    actionWidth: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientWidth || 0)) : 0,\n    actionHeight: actionLen ? getAverage(actionsNotSlotted.map((action) => action.clientHeight || 0)) : 0,\n  };\n};\n\nconst getMaxActionCount = ({\n  width,\n  actionWidth,\n  layout,\n  height,\n  actionHeight,\n  groupCount,\n}: {\n  layout: Extract<\"horizontal\" | \"vertical\", Layout>;\n  height: number;\n  actionWidth: number;\n  width: number;\n  actionHeight: number;\n  groupCount: number;\n}): number => {\n  const maxContainerPx = layout === \"horizontal\" ? width : height;\n  const avgItemPx = layout === \"horizontal\" ? actionWidth : actionHeight;\n  return Math.floor((maxContainerPx - groupCount * groupBufferPx) / avgItemPx);\n};\n\nexport const getOverflowCount = ({\n  layout,\n  actionCount,\n  actionWidth,\n  width,\n  actionHeight,\n  height,\n  groupCount,\n}: {\n  layout: Extract<\"horizontal\" | \"vertical\", Layout>;\n  actionCount: number;\n  actionWidth: number;\n  width: number;\n  actionHeight: number;\n  height: number;\n  groupCount: number;\n}): number => {\n  return Math.max(actionCount - getMaxActionCount({ width, actionWidth, layout, height, actionHeight, groupCount }), 0);\n};\n\nexport const queryActions = (el: HTMLElement): HTMLCalciteActionElement[] => {\n  return Array.from(el.querySelectorAll(\"calcite-action\")).filter((action) =>\n    action.closest(\"calcite-action-menu\") ? action.slot === ACTION_MENU_SLOTS.trigger : true,\n  );\n};\n\nexport const overflowActions = ({\n  actionGroups,\n  expanded,\n  overflowCount,\n}: {\n  actionGroups: HTMLCalciteActionGroupElement[];\n  expanded: boolean;\n  overflowCount: number;\n}): void => {\n  let needToSlotCount = overflowCount;\n  actionGroups.reverse().forEach((group) => {\n    let slottedWithinGroupCount = 0;\n\n    const groupActions = queryActions(group).reverse();\n\n    groupActions.forEach((groupAction) => {\n      if (groupAction.slot === ACTION_GROUP_SLOTS.menuActions) {\n        groupAction.removeAttribute(\"slot\");\n        groupAction.textEnabled = expanded;\n      }\n    });\n\n    if (needToSlotCount > 0) {\n      groupActions.some((groupAction) => {\n        const unslottedActions = groupActions.filter((action) => !action.slot);\n\n        if (unslottedActions.length > 1 && groupActions.length > 2 && !groupAction.closest(\"calcite-action-menu\")) {\n          groupAction.textEnabled = true;\n          groupAction.setAttribute(\"slot\", ACTION_GROUP_SLOTS.menuActions);\n          slottedWithinGroupCount++;\n\n          if (slottedWithinGroupCount > 1) {\n            needToSlotCount--;\n          }\n        }\n\n        return needToSlotCount < 1;\n      });\n    }\n\n    forceUpdate(group);\n  });\n};\n","import { FunctionalComponent, h } from \"@stencil/core\";\nimport { getElementDir } from \"../../utils/dom\";\nimport { queryActions } from \"../action-bar/utils\";\nimport { SLOTS as ACTION_GROUP_SLOTS } from \"../action-group/resources\";\nimport { Position, Scale } from \"../interfaces\";\n\ninterface ExpandToggleProps {\n  expanded: boolean;\n  expandText: string;\n  collapseText: string;\n  el: HTMLElement;\n  position: Position;\n  tooltip?: HTMLCalciteTooltipElement;\n  toggle: () => void;\n  ref?: (el: HTMLElement) => void;\n  scale?: Scale;\n}\n\nconst ICONS = {\n  chevronsLeft: \"chevrons-left\",\n  chevronsRight: \"chevrons-right\",\n};\n\nfunction getCalcitePosition(position: Position, el: HTMLElement): Position {\n  return position || el.closest(\"calcite-shell-panel\")?.position || \"start\";\n}\n\nexport function toggleChildActionText({\n  el,\n  expanded,\n}: {\n  el: HTMLElement;\n  expanded: boolean;\n}): void {\n  queryActions(el)\n    .filter((el) => el.slot !== ACTION_GROUP_SLOTS.menuActions)\n    .forEach((action) => (action.textEnabled = expanded));\n  el.querySelectorAll(\"calcite-action-group, calcite-action-menu\").forEach(\n    (el: HTMLCalciteActionMenuElement | HTMLCalciteActionGroupElement) => (el.expanded = expanded),\n  );\n}\n\nconst setTooltipReference = ({\n  tooltip,\n  referenceElement,\n  expanded,\n  ref,\n}: {\n  tooltip: HTMLCalciteTooltipElement;\n  referenceElement: HTMLCalciteActionElement;\n  expanded: boolean;\n  ref?: (el: HTMLElement) => void;\n}): HTMLCalciteActionElement => {\n  if (tooltip) {\n    tooltip.referenceElement = !expanded && referenceElement ? referenceElement : null;\n  }\n\n  if (ref) {\n    ref(referenceElement);\n  }\n\n  return referenceElement;\n};\n\nexport const ExpandToggle: FunctionalComponent<ExpandToggleProps> = ({\n  expanded,\n  expandText,\n  collapseText,\n  toggle,\n  el,\n  position,\n  tooltip,\n  ref,\n  scale,\n}) => {\n  const rtl = getElementDir(el) === \"rtl\";\n\n  const text = expanded ? collapseText : expandText;\n  const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];\n\n  if (rtl) {\n    icons.reverse();\n  }\n\n  const end = getCalcitePosition(position, el) === \"end\";\n  const expandIcon = end ? icons[1] : icons[0];\n  const collapseIcon = end ? icons[0] : icons[1];\n\n  const actionNode = (\n    <calcite-action\n      icon={expanded ? expandIcon : collapseIcon}\n      onClick={toggle}\n      ref={(referenceElement): HTMLCalciteActionElement =>\n        setTooltipReference({ tooltip, referenceElement, expanded, ref })\n      }\n      scale={scale}\n      text={text}\n      textEnabled={expanded}\n      title={!expanded && !tooltip ? text : null}\n    />\n  );\n\n  return actionNode;\n};\n"],"version":3}

package/dist/esm/FloatingArrow-b309f787.js

@@ -0,0 +1,45 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.9.0-next.20
+ */
+import { h } from './index-6356d89d.js';
+
+const CSS = {
+    arrow: "calcite-floating-ui-arrow",
+    arrowStroke: "calcite-floating-ui-arrow__stroke",
+};
+const DEFAULTS = {
+    width: 12,
+    height: 6,
+    strokeWidth: 1,
+};
+/**
+ * Renders a SVG element to be used as a floating-ui arrow.
+ *
+ * This functional component should be rendered inside a `FloatingUIComponent` when it needs an arrow element.
+ *
+ * @param floatingLayout.floatingLayout
+ * @param floatingLayout – The effective floating layout to render the arrow vertically or horizontally. Possible values: `vertical` or `horizontal`.
+ *
+ * See [floating-ui](https://github.com/Esri/calcite-design-system/blob/main/src/utils/floating-ui.ts)
+ * @param floatingLayout.key
+ * @param floatingLayout.ref
+ */
+const FloatingArrow = ({ floatingLayout, key, ref, }) => {
+    const { width, height, strokeWidth } = DEFAULTS;
+    const svgX = width / 2;
+    const isVertical = floatingLayout === "vertical";
+    const dValue = "M0,0" +
+        ` H${width}` +
+        ` L${width - svgX},${height}` +
+        ` Q${svgX},${height} ${svgX},${height}` +
+        " Z";
+    return (h("svg", { "aria-hidden": "true", class: CSS.arrow, height: width, key: key, ref: ref, viewBox: `0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`, width: width + (isVertical ? strokeWidth : 0) },
+        strokeWidth > 0 && (h("path", { class: CSS.arrowStroke, d: dValue, fill: "none", "stroke-width": strokeWidth + 1 })),
+        h("path", { d: dValue, stroke: "none" })));
+};
+
+export { FloatingArrow as F };
+
+//# sourceMappingURL=FloatingArrow-b309f787.js.map

package/dist/esm/FloatingArrow-b309f787.js.map

@@ -0,0 +1 @@
+{"file":"FloatingArrow-b309f787.js","mappings":";;;;;;;AAQA,MAAM,GAAG,GAAG;IACV,KAAK,EAAE,2BAA2B;IAClC,WAAW,EAAE,mCAAmC;CACjD,CAAC;AAEF,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,CAAC;IACT,WAAW,EAAE,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;MAYa,aAAa,GAA4C,CAAC,EACrE,cAAc,EACd,GAAG,EACH,GAAG,GACJ;IACC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,CAAC;IAChD,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;IACvB,MAAM,UAAU,GAAG,cAAc,KAAK,UAAU,CAAC;IAEjD,MAAM,MAAM,GACV,MAAM;QACN,KAAK,KAAK,EAAE;QACZ,KAAK,KAAK,GAAG,IAAI,IAAI,MAAM,EAAE;QAC7B,KAAK,IAAI,IAAI,MAAM,IAAI,IAAI,IAAI,MAAM,EAAE;QACvC,IAAI,CAAC;IAEP,QACE,0BACc,MAAM,EAClB,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,MAAM,EAAE,KAAK,EACb,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,KAAK,IAAI,KAAK,IAAI,CAAC,UAAU,GAAG,WAAW,GAAG,CAAC,CAAC,EAAE,EAClE,KAAK,EAAE,KAAK,IAAI,UAAU,GAAG,WAAW,GAAG,CAAC,CAAC;QAE5C,WAAW,GAAG,CAAC,KACd,YACE,KAAK,EAAE,GAAG,CAAC,WAAW,EACtB,CAAC,EAAE,MAAM,EACT,IAAI,EAAC,MAAM,kBAEG,WAAW,GAAG,CAAC,GAC7B,CACH;QAGD,YAAM,CAAC,EAAE,MAAM,EAAE,MAAM,EAAC,MAAM,GAAG,CAC7B,EACN;AACJ;;;;","names":[],"sources":["src/components/functional/FloatingArrow.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\nimport { JSXAttributes } from \"@stencil/core/internal\";\nimport { FloatingLayout } from \"../../utils/floating-ui\";\n\ninterface FloatingArrowProps extends JSXAttributes {\n  floatingLayout: FloatingLayout;\n}\n\nconst CSS = {\n  arrow: \"calcite-floating-ui-arrow\",\n  arrowStroke: \"calcite-floating-ui-arrow__stroke\",\n};\n\nconst DEFAULTS = {\n  width: 12,\n  height: 6,\n  strokeWidth: 1,\n};\n\n/**\n * Renders a SVG element to be used as a floating-ui arrow.\n *\n * This functional component should be rendered inside a `FloatingUIComponent` when it needs an arrow element.\n *\n * @param floatingLayout.floatingLayout\n * @param floatingLayout – The effective floating layout to render the arrow vertically or horizontally. Possible values: `vertical` or `horizontal`.\n *\n * See [floating-ui](https://github.com/Esri/calcite-design-system/blob/main/src/utils/floating-ui.ts)\n * @param floatingLayout.key\n * @param floatingLayout.ref\n */\nexport const FloatingArrow: FunctionalComponent<FloatingArrowProps> = ({\n  floatingLayout,\n  key,\n  ref,\n}) => {\n  const { width, height, strokeWidth } = DEFAULTS;\n  const svgX = width / 2;\n  const isVertical = floatingLayout === \"vertical\";\n\n  const dValue =\n    \"M0,0\" +\n    ` H${width}` +\n    ` L${width - svgX},${height}` +\n    ` Q${svgX},${height} ${svgX},${height}` +\n    \" Z\";\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      class={CSS.arrow}\n      height={width}\n      key={key}\n      ref={ref}\n      viewBox={`0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`}\n      width={width + (isVertical ? strokeWidth : 0)}\n    >\n      {strokeWidth > 0 && (\n        <path\n          class={CSS.arrowStroke}\n          d={dValue}\n          fill=\"none\"\n          // Account for the stroke on the fill path rendered below.\n          stroke-width={strokeWidth + 1}\n        />\n      )}\n      {/* In Firefox, for left/right placements there's a ~0.5px gap where the\n  border can show through. Adding a stroke on the fill removes it. */}\n      <path d={dValue} stroke=\"none\" />\n    </svg>\n  );\n};\n"],"version":3}

package/dist/esm/Heading-6a28ad35.js

@@ -0,0 +1,19 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.9.0-next.20
+ */
+import { h } from './index-6356d89d.js';
+
+function constrainHeadingLevel(level) {
+    return Math.min(Math.max(Math.ceil(level), 1), 6);
+}
+const Heading = (props, children) => {
+    const HeadingTag = props.level ? `h${props.level}` : "div";
+    delete props.level;
+    return h(HeadingTag, { ...props }, children);
+};
+
+export { Heading as H, constrainHeadingLevel as c };
+
+//# sourceMappingURL=Heading-6a28ad35.js.map

package/dist/esm/Heading-6a28ad35.js.map

@@ -0,0 +1 @@
+{"file":"Heading-6a28ad35.js","mappings":";;;;;;;SASgB,qBAAqB,CAAC,KAAa;IACjD,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAiB,CAAC;AACpE,CAAC;MAEY,OAAO,GAAsC,CAAC,KAAK,EAAE,QAAQ;IACxE,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,KAAK,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC;IAE3D,OAAO,KAAK,CAAC,KAAK,CAAC;IAEnB,OAAO,EAAC,UAAU,OAAK,KAAK,IAAG,QAAQ,CAAc,CAAC;AACxD;;;;","names":[],"sources":["src/components/functional/Heading.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\nimport { JSXBase } from \"@stencil/core/internal\";\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface HeadingProps extends JSXBase.HTMLAttributes {\n  level?: HeadingLevel;\n}\n\nexport function constrainHeadingLevel(level: number): HeadingLevel {\n  return Math.min(Math.max(Math.ceil(level), 1), 6) as HeadingLevel;\n}\n\nexport const Heading: FunctionalComponent<HeadingProps> = (props, children) => {\n  const HeadingTag = props.level ? `h${props.level}` : \"div\";\n\n  delete props.level;\n\n  return <HeadingTag {...props}>{children}</HeadingTag>;\n};\n"],"version":3}

package/dist/esm/Validation-1f714881.js

@@ -0,0 +1,16 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.9.0-next.20
+ */
+import { h } from './index-6356d89d.js';
+
+const CSS = {
+    validationContainer: "validation-container",
+};
+const Validation = ({ scale, status, icon, message, }) => (h("div", { class: CSS.validationContainer },
+    h("calcite-input-message", { icon: icon, scale: scale, status: status }, message)));
+
+export { Validation as V };
+
+//# sourceMappingURL=Validation-1f714881.js.map

package/dist/esm/Validation-1f714881.js.map

@@ -0,0 +1 @@
+{"file":"Validation-1f714881.js","mappings":";;;;;;;AAWO,MAAM,GAAG,GAAG;IACjB,mBAAmB,EAAE,sBAAsB;CAC5C,CAAC;MAEW,UAAU,GAAyC,CAAC,EAC/D,KAAK,EACL,MAAM,EACN,IAAI,EACJ,OAAO,GACR,MACC,WAAK,KAAK,EAAE,GAAG,CAAC,mBAAmB;IACjC,6BAAuB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,IAC5D,OAAO,CACc,CACpB;;;;","names":[],"sources":["src/components/functional/Validation.tsx"],"sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\nimport { JSXBase } from \"@stencil/core/internal\";\nimport { Scale, Status } from \"../interfaces\";\n\ninterface ValidationProps extends JSXBase.HTMLAttributes {\n  scale: Scale;\n  status: Status;\n  icon?: string | boolean;\n  message: string;\n}\n\nexport const CSS = {\n  validationContainer: \"validation-container\",\n};\n\nexport const Validation: FunctionalComponent<ValidationProps> = ({\n  scale,\n  status,\n  icon,\n  message,\n}) => (\n  <div class={CSS.validationContainer}>\n    <calcite-input-message icon={icon} scale={scale} status={status}>\n      {message}\n    </calcite-input-message>\n  </div>\n);\n"],"version":3}