@esri/calcite-components 2.13.0 → 2.14.0-next.1

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

@@ -1,23 +1,23 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.14.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03561b9a.js');
-const dom = require('./dom-401c47fa.js');
-const locale = require('./locale-783be19a.js');
-const t9n = require('./t9n-5f0809e3.js');
-const loadable = require('./loadable-1e343f4a.js');
-const interactive = require('./interactive-e27cd6e3.js');
-const key = require('./key-8032a9dc.js');
-require('./guid-7487a6a8.js');
-require('./resources-8d0a3a55.js');
-require('./observers-dc37fb24.js');
-require('./browser-b9024aa0.js');
+const index = require('./index-fa8af6d4.js');
+const dom = require('./dom-c64d16b4.js');
+const locale = require('./locale-c8a9eaf0.js');
+const t9n = require('./t9n-386452e2.js');
+const loadable = require('./loadable-3b4436ea.js');
+const interactive = require('./interactive-cad47537.js');
+const key = require('./key-cae77b35.js');
+require('./guid-fd15b830.js');
+require('./resources-d4d76af1.js');
+require('./observers-d4deb7de.js');
+require('./browser-39ff1e63.js');
 
 const CSS = {
     container: "container",
@@ -111,17 +111,8 @@ const Card = class {
                 this.calciteCardSelect.emit();
             }
         };
-        this.cardSelectKeyDownDeprecated = (event) => {
-            switch (event.key) {
-                case " ":
-                case "Enter":
-                    this.selectCardDeprecated();
-                    event.preventDefault();
-                    break;
-            }
-        };
-        this.selectCardDeprecated = () => {
-            this.selected = !this.selected;
+        this.selectCardDeprecated = (event) => {
+            this.selected = event.target.checked;
             this.calciteCardSelect.emit();
         };
         this.cardSelectClick = (event) => {
@@ -193,7 +184,7 @@ const Card = class {
         t9n.updateMessages(this, this.effectiveLocale);
     }
     renderCheckboxDeprecated() {
-        return (index.h("calcite-label", { class: CSS.checkboxWrapperDeprecated }, index.h("calcite-checkbox", { checked: this.selected, label: this.messages.select, onClick: this.selectCardDeprecated, onKeyDown: this.cardSelectKeyDownDeprecated })));
+        return (index.h("calcite-label", { class: CSS.checkboxWrapperDeprecated }, index.h("calcite-checkbox", { checked: this.selected, label: this.messages.select, onCalciteCheckboxChange: this.selectCardDeprecated })));
     }
     renderThumbnail() {
         return (index.h("section", { class: CSS.thumbnailWrapper, hidden: !this.hasThumbnail }, index.h("slot", { name: SLOTS.thumbnail, onSlotchange: this.handleThumbnailSlotChange })));
@@ -226,10 +217,10 @@ const Card = class {
             : this.selectionMode !== "none"
                 ? "radio"
                 : undefined;
-        return (index.h(index.Host, { key: 'dbb99f5c06440d5f7100f89bfef1febbd8d01f3e' }, index.h(interactive.InteractiveContainer, { key: '6fef7f69921c33bab4c66d34c0691821c837cc82', disabled: this.disabled }, index.h("div", { key: 'bcd3a1fecbfc39a15102099db8e6943b0e2207c5', "aria-checked": this.selectionMode !== "none" ? dom.toAriaBoolean(this.selected) : undefined, "aria-label": this.label, class: { [CSS.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (index.h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, index.h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), index.h("section", { key: '81c5383f8b09ce6372fd94a0e3c9e91c502a18bc', "aria-busy": dom.toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.renderHeader(), index.h("div", { key: '12d9564007bc07a3e0643ec0b097cab856968e02', class: {
+        return (index.h(index.Host, { key: '87f09077ac14f21c68b0622e6ec04059b4f31ee6' }, index.h(interactive.InteractiveContainer, { key: 'adae1696723655c1b52db8911e94f7692086bd76', disabled: this.disabled }, index.h("div", { key: '1c382c24e9dee5e4fb7e0f17b382fc28318a21af', "aria-checked": this.selectionMode !== "none" ? dom.toAriaBoolean(this.selected) : undefined, "aria-label": this.label, class: { [CSS.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (index.h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, index.h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), index.h("section", { key: '90228d2726aaa15ffd504ea6e7126f2113b5f07e', "aria-busy": dom.toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.renderHeader(), index.h("div", { key: 'cf627496c49db2f6c50cb52cfcf529f6896ffa5e', class: {
                 [CSS.cardContent]: true,
                 [CSS.hasSlottedContent]: this.hasContent,
-            } }, index.h("slot", { key: '1c500b0005123c768bfb77eecb62a0166c5e178f', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
+            } }, index.h("slot", { key: '9694c13ddcd1293fcd2c987845f6717bfabaa62d', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

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

@@ -1 +1 @@
-{"file":"calcite-card.entry.cjs.js","mappings":"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","names":["slotChangeHasAssignedElement","isActivationKey","componentFocusable","connectLocalized","connectMessages","setComponentLoaded","updateHostInteraction","disconnectLocalized","disconnectMessages","setUpLoadableComponent","setUpMessages","updateMessages","h","Host","InteractiveContainer","toAriaBoolean"],"sources":["src/components/card/resources.ts","src/components/card/card.scss?tag=calcite-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  contentWrapper: \"content-wrapper\",\n  header: \"header\",\n  footer: \"footer\",\n  heading: \"heading\",\n  description: \"description\",\n  checkboxWrapper: \"checkbox-wrapper\",\n  checkboxWrapperDeprecated: \"checkbox-wrapper-deprecated\",\n  thumbnailWrapper: \"thumbnail-wrapper\",\n  headerTextContainer: \"header-text-container\",\n  cardContent: \"card-content\",\n  hasSlottedContent: \"has-slotted-content\",\n};\n\nexport const SLOTS = {\n  thumbnail: \"thumbnail\",\n  heading: \"heading\",\n  description: \"description\",\n  footerStart: \"footer-start\",\n  footerEnd: \"footer-end\",\n  title: \"title\",\n  subtitle: \"subtitle\",\n};\n\nexport const ICONS = {\n  selected: \"check-square-f\",\n  unselected: \"square\",\n  selectedSingle: \"circle-f\",\n  unselectedSingle: \"circle\",\n} as const;\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-card-accent-color-selected: Specifies the component's accent color when `selected`.\n * @prop --calcite-card-background-color: Specifies the component's background color.\n * @prop --calcite-card-border-color: Specifies the component's border color.\n * @prop --calcite-card-corner-radius: Specifies the component's corner radius.\n * @prop --calcite-card-selection-background-color-active: [Deprecated] Use `--calcite-card-selection-background-color-press`. Specifies the component's selection element background color when active.\n * @prop --calcite-card-selection-background-color-hover: Specifies the component's selection element background color when hovered.\n * @prop --calcite-card-selection-background-color-press: Specifies the component's selection element background color when active.\n * @prop --calcite-card-selection-background-color-selected: [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element icon color when `selected`.\n * @prop --calcite-card-selection-background-color: [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color.\n * @prop --calcite-card-selection-color-hover: Specifies the component's selection element color when hovered or focused.\n * @prop --calcite-card-selection-color: Specifies the component's selection element color.\n * @prop --calcite-card-selection-icon-color-hover: [Deprecated] Use `--calcite-card-selection-color-hover`. Specifies the component's selection element icon color when hovered.\n * @prop --calcite-card-selection-icon-color-selected: [Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`.\n * @prop --calcite-card-selection-icon-color: [Deprecated] Use `--calcite-card-selection-color`. Specifies the component's selection element icon color.\n * @prop --calcite-card-shadow: Specifies the component's shadow.\n *\n */\n\n:host {\n  @apply block max-w-full;\n}\n\n.content-wrapper {\n  @apply relative\n    flex\n    h-full\n    flex-col\n    justify-between\n    overflow-hidden;\n  border: var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));\n  border-radius: var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));\n  background-color: var(--calcite-card-background-color, var(--calcite-color-foreground-1));\n  box-shadow: var(--calcite-card-shadow, var(--calcite-shadow-none));\n  pointer-events: none;\n}\n\n::slotted(*) {\n  @apply pointer-events-auto;\n}\n\n:host(:not([selectable])) {\n  .content-wrapper {\n    &:not(.non-interactive) {\n      @apply focus-base;\n    }\n    &:not(.non-interactive):focus {\n      @apply focus-outset;\n    }\n  }\n}\n\n.container {\n  @apply relative flex flex-auto flex-col;\n}\n\n:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container) {\n  @apply pointer-events-none;\n  opacity: $calcite-opacity-0;\n}\n\n:host([loading]) .calcite-card-loader-container {\n  @apply absolute inset-0 flex items-center;\n}\n\n.header {\n  @apply flex flex-row items-start;\n}\n\n.footer {\n  @apply flex mt-auto flex-row content-between justify-between;\n  padding-inline: var(--calcite-spacing-md);\n  padding-block-start: var(--calcite-spacing-xxs);\n  padding-block-end: var(--calcite-spacing-md);\n}\n\n.header-text-container {\n  @apply flex flex-col px-3 py-2 w-full justify-center;\n  &:not(:only-child) {\n    @apply pr-0.5;\n  }\n}\n\n.footer {\n  @apply mt-auto flex-row content-between\n    justify-between\n    px-3\n    pt-1\n    pb-3;\n}\n\n.card-content {\n  @apply h-auto text-n2-wrap;\n}\n\n.has-slotted-content {\n  @apply p-3;\n}\n\n:host([selected]) .content-wrapper {\n  box-shadow: inset 0 -4px 0 0 var(--calcite-card-accent-color-selected, var(--calcite-color-brand));\n}\n\n:host([selectable]) .header {\n  padding-inline-end: var(--calcite-spacing-xxxl);\n}\n\n@include slotted(\"title\", \"*\") {\n  @apply text-color-1\n    text-n1-wrap\n    m-0\n    font-medium;\n}\n\n@include slotted(\"subtitle\", \"*\") {\n  @apply text-color-2\n    text-n2-wrap\n    m-0 mt-0.5\n    font-normal;\n}\n\n@include slotted(\"heading\", \"*\") {\n  @apply text-color-1\n    text-n1-wrap\n    m-0\n    font-medium;\n}\n\n@include slotted(\"description\", \"*\") {\n  @apply text-color-2\n    text-n2-wrap\n    m-0 mt-0.5\n    font-normal;\n}\n\n@include slotted(\"thumbnail\", \"img\") {\n  @apply min-w-full max-w-full;\n}\n\n@include slotted(\"footer-start\", \"*\") {\n  @apply text-n2-wrap self-center;\n  margin-inline-end: auto;\n}\n\n@include slotted(\"footer-end\", \"*\") {\n  @apply text-n2-wrap self-center;\n}\n\n// deprecated\n.checkbox-wrapper-deprecated {\n  @apply absolute pointer-events-auto;\n  inset-block-start: var(--calcite-spacing-sm);\n  inset-inline-end: var(--calcite-spacing-sm);\n  margin: 0;\n  padding: 0;\n  color: var(--calcite-card-selection-color, var(--calcite-color-text-3));\n\n  &:hover {\n    background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));\n    color: var(\n      --calcite-card-selection-color-hover,\n      var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2))\n    );\n  }\n  &:active {\n    background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));\n  }\n}\n\n.checkbox-wrapper {\n  @apply m-2 p-2 focus-base cursor-pointer pointer-events-auto;\n  display: flex;\n  align-items: center;\n  justify-items: center;\n  color: var(--calcite-card-selection-color, var(--calcite-color-text-3));\n\n  &:hover {\n    background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));\n    color: var(\n      --calcite-card-selection-color-hover,\n      var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2))\n    );\n  }\n  &:active {\n    background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));\n  }\n  & calcite-icon {\n    pointer-events: none;\n  }\n}\n\n:host([selected]) {\n  .checkbox-wrapper-deprecated,\n  .checkbox-wrapper {\n    color: var(\n      --calcite-card-accent-color-selected,\n      var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand))\n    );\n  }\n}\n\n:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus {\n  .checkbox-wrapper-deprecated,\n  .checkbox-wrapper {\n    background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));\n    color: var(\n      --calcite-card-selection-color-hover,\n      var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2))\n    );\n  }\n}\n\n:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus {\n  .checkbox-wrapper-deprecated,\n  .checkbox-wrapper {\n    background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));\n    color: var(\n      --calcite-card-accent-color-selected,\n      var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand))\n    );\n  }\n}\n/* end deprecated */\n\n.thumbnail-wrapper {\n  @apply flex;\n}\n\n.content-wrapper.inline {\n  @apply flex-row;\n\n  & > .container {\n    @apply w-3/5;\n  }\n  & > .thumbnail-wrapper {\n    @apply items-start w-2/5;\n  }\n\n  @include slotted(\"thumbnail\", \"img\") {\n    @apply w-full;\n  }\n}\n\nslot[name=\"footer-start\"]::slotted(*),\nslot[name=\"footer-end\"]::slotted(*) {\n  @apply flex gap-1;\n}\n\n@include base-component();\n@include disabled();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { slotChangeHasAssignedElement, toAriaBoolean } from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { LogicalFlowPosition, SelectionMode } from \"../interfaces\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\nimport { CardMessages } from \"./assets/card/t9n\";\n\n/**\n * @slot - A slot for adding content.\n * @slot title - [Deprecated] use `heading` instead. A slot for adding a heading.\n * @slot subtitle - [Deprecated] use `description` instead. A slot for adding a description.\n * @slot thumbnail - A slot for adding a thumbnail.\n * @slot heading - A slot for adding a heading.\n * @slot description - A slot for adding a description.\n * @slot footer-start - A slot for adding a leading footer.\n * @slot footer-end - A slot for adding a trailing footer.\n */\n\n@Component({\n  tag: \"calcite-card\",\n  styleUrl: \"card.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Card\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**  When `true`, a busy indicator is displayed. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Sets the placement of the thumbnail defined in the `thumbnail` slot. */\n  @Prop({ reflect: true }) thumbnailPosition: LogicalFlowPosition = \"block-start\";\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * When `true`, the component is selectable.\n   *\n   * @deprecated use `selectionMode` property on a parent `calcite-card-group` instead.\n   */\n  @Prop({ reflect: true }) selectable = false;\n\n  /** When `true`, the component is selected.  */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: CardMessages;\n\n  /**\n   * This internal property, managed by a containing `calcite-card-group`, is\n   * conditionally set based on the `selectionMode` of the parent\n   *\n   * @internal\n   */\n  @Prop() selectionMode: Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode> =\n    \"none\";\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<CardMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. */\n  @Event({ cancelable: false }) calciteCardSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCardKeyEvent: EventEmitter<KeyboardEvent>;\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    if (!this.disabled) {\n      this.containerEl?.focus();\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCardElement;\n\n  @State() effectiveLocale: string;\n\n  @State() hasThumbnail = false;\n\n  @State() hasHeading = false;\n\n  @State() hasDescription = false;\n\n  @State() hasSubtitle = false;\n\n  @State() hasTitle = false;\n\n  @State() hasFooterStart = false;\n\n  @State() hasFooterEnd = false;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: CardMessages;\n\n  @State() private hasContent = false;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private handleThumbnailSlotChange = (event: Event): void => {\n    this.hasThumbnail = slotChangeHasAssignedElement(event);\n  };\n\n  private handleHeadingSlotChange = (event: Event): void => {\n    this.hasHeading = slotChangeHasAssignedElement(event);\n  };\n\n  private handleDescriptionSlotChange = (event: Event): void => {\n    this.hasDescription = slotChangeHasAssignedElement(event);\n  };\n\n  private handleTitleSlotChange = (event: Event): void => {\n    this.hasTitle = slotChangeHasAssignedElement(event);\n  };\n\n  private handleSubtitleSlotChange = (event: Event): void => {\n    this.hasSubtitle = slotChangeHasAssignedElement(event);\n  };\n\n  private handleFooterStartSlotChange = (event: Event): void => {\n    this.hasFooterStart = slotChangeHasAssignedElement(event);\n  };\n\n  private handleFooterEndSlotChange = (event: Event): void => {\n    this.hasFooterEnd = slotChangeHasAssignedElement(event);\n  };\n\n  private handleDefaultSlotChange = (event: Event): void => {\n    this.hasContent = slotChangeHasAssignedElement(event);\n  };\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.target === this.containerEl && !this.selectable && !this.disabled) {\n      if (isActivationKey(event.key) && this.selectionMode !== \"none\") {\n        this.calciteCardSelect.emit();\n        event.preventDefault();\n      } else {\n        switch (event.key) {\n          case \"ArrowRight\":\n          case \"ArrowLeft\":\n          case \"Home\":\n          case \"End\":\n            this.calciteInternalCardKeyEvent.emit(event);\n            event.preventDefault();\n            break;\n        }\n      }\n    }\n  };\n\n  private cardBodyClickHandler = (event: MouseEvent): void => {\n    const isFromScreenReader = event.target === this.containerEl;\n    if (isFromScreenReader && !this.selectable && !this.disabled && this.selectionMode !== \"none\") {\n      this.calciteCardSelect.emit();\n    }\n  };\n\n  private renderCheckboxDeprecated(): VNode {\n    return (\n      <calcite-label class={CSS.checkboxWrapperDeprecated}>\n        <calcite-checkbox\n          checked={this.selected}\n          label={this.messages.select}\n          onClick={this.selectCardDeprecated}\n          onKeyDown={this.cardSelectKeyDownDeprecated}\n        />\n      </calcite-label>\n    );\n  }\n\n  private cardSelectKeyDownDeprecated = (event: KeyboardEvent): void => {\n    switch (event.key) {\n      case \" \":\n      case \"Enter\":\n        this.selectCardDeprecated();\n        event.preventDefault();\n        break;\n    }\n  };\n\n  private selectCardDeprecated = (): void => {\n    this.selected = !this.selected;\n    this.calciteCardSelect.emit();\n  };\n\n  private cardSelectClick = (event): void => {\n    if (!this.disabled) {\n      event.preventDefault();\n      this.calciteCardSelect.emit();\n      this.setFocus();\n    }\n  };\n\n  private renderThumbnail(): VNode {\n    return (\n      <section class={CSS.thumbnailWrapper} hidden={!this.hasThumbnail}>\n        <slot name={SLOTS.thumbnail} onSlotchange={this.handleThumbnailSlotChange} />\n      </section>\n    );\n  }\n\n  private renderSelectionIcon(): VNode {\n    const icon: IconNameOrString =\n      this.selectionMode === \"multiple\" && this.selected\n        ? ICONS.selected\n        : this.selectionMode === \"multiple\"\n          ? ICONS.unselected\n          : this.selected\n            ? ICONS.selectedSingle\n            : ICONS.unselectedSingle;\n\n    return (\n      <div class={CSS.checkboxWrapper} onPointerDown={this.cardSelectClick} tabIndex={-1}>\n        <calcite-icon icon={icon} scale=\"s\" />\n      </div>\n    );\n  }\n\n  private renderHeader(): VNode {\n    const hasHeader = this.hasHeading || this.hasDescription;\n    const hasDeprecatedHeader = this.hasSubtitle || this.hasTitle;\n    const showHeader = hasHeader || hasDeprecatedHeader;\n\n    return (\n      <header class={CSS.header} hidden={!showHeader}>\n        {this.selectable ? this.renderCheckboxDeprecated() : null}\n        <div class={CSS.headerTextContainer}>\n          <slot name={SLOTS.heading} onSlotchange={this.handleHeadingSlotChange} />\n          <slot name={SLOTS.description} onSlotchange={this.handleDescriptionSlotChange} />\n          <slot name={SLOTS.title} onSlotchange={this.handleTitleSlotChange} />\n          <slot name={SLOTS.subtitle} onSlotchange={this.handleSubtitleSlotChange} />\n        </div>\n        {this.selectionMode !== \"none\" && this.renderSelectionIcon()}\n      </header>\n    );\n  }\n\n  private renderFooter(): VNode {\n    const hasFooter = this.hasFooterStart || this.hasFooterEnd;\n    return (\n      <footer class={CSS.footer} hidden={!hasFooter}>\n        <slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />\n        <slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />\n      </footer>\n    );\n  }\n\n  render(): VNode {\n    const thumbnailInline = this.thumbnailPosition.startsWith(\"inline\");\n    const thumbnailStart = this.thumbnailPosition.endsWith(\"start\");\n    const role =\n      this.selectionMode === \"multiple\"\n        ? \"checkbox\"\n        : this.selectionMode !== \"none\"\n          ? \"radio\"\n          : undefined;\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={this.selectionMode !== \"none\" ? toAriaBoolean(this.selected) : undefined}\n            aria-label={this.label}\n            class={{ [CSS.contentWrapper]: true, inline: thumbnailInline }}\n            onClick={this.cardBodyClickHandler}\n            onKeyDown={this.keyDownHandler}\n            ref={(el) => (this.containerEl = el)}\n            role={role}\n            tabIndex={!this.selectable || this.disabled ? 0 : -1}\n          >\n            {this.loading ? (\n              <div aria-live=\"polite\" class=\"calcite-card-loader-container\">\n                <calcite-loader label={this.messages.loading} />\n              </div>\n            ) : null}\n            {thumbnailStart && this.renderThumbnail()}\n            <section aria-busy={toAriaBoolean(this.loading)} class={{ [CSS.container]: true }}>\n              {this.renderHeader()}\n              <div\n                class={{\n                  [CSS.cardContent]: true,\n                  [CSS.hasSlottedContent]: this.hasContent,\n                }}\n              >\n                <slot onSlotchange={this.handleDefaultSlotChange} />\n              </div>\n              {this.renderFooter()}\n            </section>\n            {!thumbnailStart && this.renderThumbnail()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-card.entry.cjs.js","mappings":"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","names":["slotChangeHasAssignedElement","isActivationKey","componentFocusable","connectLocalized","connectMessages","setComponentLoaded","updateHostInteraction","disconnectLocalized","disconnectMessages","setUpLoadableComponent","setUpMessages","updateMessages","h","Host","InteractiveContainer","toAriaBoolean"],"sources":["src/components/card/resources.ts","src/components/card/card.scss?tag=calcite-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["export const CSS = {\n  container: \"container\",\n  contentWrapper: \"content-wrapper\",\n  header: \"header\",\n  footer: \"footer\",\n  heading: \"heading\",\n  description: \"description\",\n  checkboxWrapper: \"checkbox-wrapper\",\n  checkboxWrapperDeprecated: \"checkbox-wrapper-deprecated\",\n  thumbnailWrapper: \"thumbnail-wrapper\",\n  headerTextContainer: \"header-text-container\",\n  cardContent: \"card-content\",\n  hasSlottedContent: \"has-slotted-content\",\n};\n\nexport const SLOTS = {\n  thumbnail: \"thumbnail\",\n  heading: \"heading\",\n  description: \"description\",\n  footerStart: \"footer-start\",\n  footerEnd: \"footer-end\",\n  title: \"title\",\n  subtitle: \"subtitle\",\n};\n\nexport const ICONS = {\n  selected: \"check-square-f\",\n  unselected: \"square\",\n  selectedSingle: \"circle-f\",\n  unselectedSingle: \"circle\",\n} as const;\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-card-accent-color-selected: Specifies the component's accent color when `selected`.\n * @prop --calcite-card-background-color: Specifies the component's background color.\n * @prop --calcite-card-border-color: Specifies the component's border color.\n * @prop --calcite-card-corner-radius: Specifies the component's corner radius.\n * @prop --calcite-card-selection-background-color-active: [Deprecated] Use `--calcite-card-selection-background-color-press`. Specifies the component's selection element background color when active.\n * @prop --calcite-card-selection-background-color-hover: Specifies the component's selection element background color when hovered.\n * @prop --calcite-card-selection-background-color-press: Specifies the component's selection element background color when active.\n * @prop --calcite-card-selection-background-color-selected: [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element icon color when `selected`.\n * @prop --calcite-card-selection-background-color: [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color.\n * @prop --calcite-card-selection-color-hover: Specifies the component's selection element color when hovered or focused.\n * @prop --calcite-card-selection-color: Specifies the component's selection element color.\n * @prop --calcite-card-selection-icon-color-hover: [Deprecated] Use `--calcite-card-selection-color-hover`. Specifies the component's selection element icon color when hovered.\n * @prop --calcite-card-selection-icon-color-selected: [Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`.\n * @prop --calcite-card-selection-icon-color: [Deprecated] Use `--calcite-card-selection-color`. Specifies the component's selection element icon color.\n * @prop --calcite-card-shadow: Specifies the component's shadow.\n *\n */\n\n:host {\n  @apply block max-w-full;\n}\n\n.content-wrapper {\n  @apply relative\n    flex\n    h-full\n    flex-col\n    justify-between\n    overflow-hidden;\n  border: var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));\n  border-radius: var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));\n  background-color: var(--calcite-card-background-color, var(--calcite-color-foreground-1));\n  box-shadow: var(--calcite-card-shadow, var(--calcite-shadow-none));\n  pointer-events: none;\n}\n\n::slotted(*) {\n  @apply pointer-events-auto;\n}\n\n:host(:not([selectable])) {\n  .content-wrapper {\n    &:not(.non-interactive) {\n      @apply focus-base;\n    }\n    &:not(.non-interactive):focus {\n      @apply focus-outset;\n    }\n  }\n}\n\n.container {\n  @apply relative flex flex-auto flex-col;\n}\n\n:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container) {\n  @apply pointer-events-none;\n  opacity: $calcite-opacity-0;\n}\n\n:host([loading]) .calcite-card-loader-container {\n  @apply absolute inset-0 flex items-center;\n}\n\n.header {\n  @apply flex flex-row items-start;\n}\n\n.footer {\n  @apply flex mt-auto flex-row content-between justify-between;\n  padding-inline: var(--calcite-spacing-md);\n  padding-block-start: var(--calcite-spacing-xxs);\n  padding-block-end: var(--calcite-spacing-md);\n}\n\n.header-text-container {\n  @apply flex flex-col px-3 py-2 w-full justify-center;\n  &:not(:only-child) {\n    @apply pr-0.5;\n  }\n}\n\n.footer {\n  @apply mt-auto flex-row content-between\n    justify-between\n    px-3\n    pt-1\n    pb-3;\n}\n\n.card-content {\n  @apply h-auto text-n2-wrap;\n}\n\n.has-slotted-content {\n  @apply p-3;\n}\n\n:host([selected]) .content-wrapper {\n  box-shadow: inset 0 -4px 0 0 var(--calcite-card-accent-color-selected, var(--calcite-color-brand));\n}\n\n:host([selectable]) .header {\n  padding-inline-end: var(--calcite-spacing-xxxl);\n}\n\n@include slotted(\"title\", \"*\") {\n  @apply text-color-1\n    text-n1-wrap\n    m-0\n    font-medium;\n}\n\n@include slotted(\"subtitle\", \"*\") {\n  @apply text-color-2\n    text-n2-wrap\n    m-0 mt-0.5\n    font-normal;\n}\n\n@include slotted(\"heading\", \"*\") {\n  @apply text-color-1\n    text-n1-wrap\n    m-0\n    font-medium;\n}\n\n@include slotted(\"description\", \"*\") {\n  @apply text-color-2\n    text-n2-wrap\n    m-0 mt-0.5\n    font-normal;\n}\n\n@include slotted(\"thumbnail\", \"img\") {\n  @apply min-w-full max-w-full;\n}\n\n@include slotted(\"footer-start\", \"*\") {\n  @apply text-n2-wrap self-center;\n  margin-inline-end: auto;\n}\n\n@include slotted(\"footer-end\", \"*\") {\n  @apply text-n2-wrap self-center;\n}\n\n// deprecated\n.checkbox-wrapper-deprecated {\n  @apply absolute pointer-events-auto;\n  inset-block-start: var(--calcite-spacing-sm);\n  inset-inline-end: var(--calcite-spacing-sm);\n  margin: 0;\n  padding: 0;\n  color: var(--calcite-card-selection-color, var(--calcite-color-text-3));\n\n  &:hover {\n    background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));\n    color: var(\n      --calcite-card-selection-color-hover,\n      var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2))\n    );\n  }\n  &:active {\n    background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));\n  }\n}\n\n.checkbox-wrapper {\n  @apply m-2 p-2 focus-base cursor-pointer pointer-events-auto;\n  display: flex;\n  align-items: center;\n  justify-items: center;\n  color: var(--calcite-card-selection-color, var(--calcite-color-text-3));\n\n  &:hover {\n    background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));\n    color: var(\n      --calcite-card-selection-color-hover,\n      var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2))\n    );\n  }\n  &:active {\n    background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));\n  }\n  & calcite-icon {\n    pointer-events: none;\n  }\n}\n\n:host([selected]) {\n  .checkbox-wrapper-deprecated,\n  .checkbox-wrapper {\n    color: var(\n      --calcite-card-accent-color-selected,\n      var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand))\n    );\n  }\n}\n\n:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus {\n  .checkbox-wrapper-deprecated,\n  .checkbox-wrapper {\n    background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));\n    color: var(\n      --calcite-card-selection-color-hover,\n      var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2))\n    );\n  }\n}\n\n:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus {\n  .checkbox-wrapper-deprecated,\n  .checkbox-wrapper {\n    background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));\n    color: var(\n      --calcite-card-accent-color-selected,\n      var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand))\n    );\n  }\n}\n/* end deprecated */\n\n.thumbnail-wrapper {\n  @apply flex;\n}\n\n.content-wrapper.inline {\n  @apply flex-row;\n\n  & > .container {\n    @apply w-3/5;\n  }\n  & > .thumbnail-wrapper {\n    @apply items-start w-2/5;\n  }\n\n  @include slotted(\"thumbnail\", \"img\") {\n    @apply w-full;\n  }\n}\n\nslot[name=\"footer-start\"]::slotted(*),\nslot[name=\"footer-end\"]::slotted(*) {\n  @apply flex gap-1;\n}\n\n@include base-component();\n@include disabled();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { slotChangeHasAssignedElement, toAriaBoolean } from \"../../utils/dom\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { LogicalFlowPosition, SelectionMode } from \"../interfaces\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport type { CalciteCheckboxCustomEvent } from \"../../components\";\nimport { CSS, ICONS, SLOTS } from \"./resources\";\nimport { CardMessages } from \"./assets/card/t9n\";\n\n/**\n * @slot - A slot for adding content.\n * @slot title - [Deprecated] use `heading` instead. A slot for adding a heading.\n * @slot subtitle - [Deprecated] use `description` instead. A slot for adding a description.\n * @slot thumbnail - A slot for adding a thumbnail.\n * @slot heading - A slot for adding a heading.\n * @slot description - A slot for adding a description.\n * @slot footer-start - A slot for adding a leading footer.\n * @slot footer-end - A slot for adding a trailing footer.\n */\n\n@Component({\n  tag: \"calcite-card\",\n  styleUrl: \"card.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Card\n  implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**  When `true`, a busy indicator is displayed. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Sets the placement of the thumbnail defined in the `thumbnail` slot. */\n  @Prop({ reflect: true }) thumbnailPosition: LogicalFlowPosition = \"block-start\";\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /**\n   * When `true`, the component is selectable.\n   *\n   * @deprecated use `selectionMode` property on a parent `calcite-card-group` instead.\n   */\n  @Prop({ reflect: true }) selectable = false;\n\n  /** When `true`, the component is selected.  */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: CardMessages;\n\n  /**\n   * This internal property, managed by a containing `calcite-card-group`, is\n   * conditionally set based on the `selectionMode` of the parent\n   *\n   * @internal\n   */\n  @Prop() selectionMode: Extract<\"multiple\" | \"single\" | \"single-persist\" | \"none\", SelectionMode> =\n    \"none\";\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<CardMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. */\n  @Event({ cancelable: false }) calciteCardSelect: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCardKeyEvent: EventEmitter<KeyboardEvent>;\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    if (!this.disabled) {\n      this.containerEl?.focus();\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCardElement;\n\n  @State() effectiveLocale: string;\n\n  @State() hasThumbnail = false;\n\n  @State() hasHeading = false;\n\n  @State() hasDescription = false;\n\n  @State() hasSubtitle = false;\n\n  @State() hasTitle = false;\n\n  @State() hasFooterStart = false;\n\n  @State() hasFooterEnd = false;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: CardMessages;\n\n  @State() private hasContent = false;\n\n  private containerEl: HTMLDivElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private handleThumbnailSlotChange = (event: Event): void => {\n    this.hasThumbnail = slotChangeHasAssignedElement(event);\n  };\n\n  private handleHeadingSlotChange = (event: Event): void => {\n    this.hasHeading = slotChangeHasAssignedElement(event);\n  };\n\n  private handleDescriptionSlotChange = (event: Event): void => {\n    this.hasDescription = slotChangeHasAssignedElement(event);\n  };\n\n  private handleTitleSlotChange = (event: Event): void => {\n    this.hasTitle = slotChangeHasAssignedElement(event);\n  };\n\n  private handleSubtitleSlotChange = (event: Event): void => {\n    this.hasSubtitle = slotChangeHasAssignedElement(event);\n  };\n\n  private handleFooterStartSlotChange = (event: Event): void => {\n    this.hasFooterStart = slotChangeHasAssignedElement(event);\n  };\n\n  private handleFooterEndSlotChange = (event: Event): void => {\n    this.hasFooterEnd = slotChangeHasAssignedElement(event);\n  };\n\n  private handleDefaultSlotChange = (event: Event): void => {\n    this.hasContent = slotChangeHasAssignedElement(event);\n  };\n\n  private keyDownHandler = (event: KeyboardEvent): void => {\n    if (event.target === this.containerEl && !this.selectable && !this.disabled) {\n      if (isActivationKey(event.key) && this.selectionMode !== \"none\") {\n        this.calciteCardSelect.emit();\n        event.preventDefault();\n      } else {\n        switch (event.key) {\n          case \"ArrowRight\":\n          case \"ArrowLeft\":\n          case \"Home\":\n          case \"End\":\n            this.calciteInternalCardKeyEvent.emit(event);\n            event.preventDefault();\n            break;\n        }\n      }\n    }\n  };\n\n  private cardBodyClickHandler = (event: MouseEvent): void => {\n    const isFromScreenReader = event.target === this.containerEl;\n    if (isFromScreenReader && !this.selectable && !this.disabled && this.selectionMode !== \"none\") {\n      this.calciteCardSelect.emit();\n    }\n  };\n\n  private renderCheckboxDeprecated(): VNode {\n    return (\n      <calcite-label class={CSS.checkboxWrapperDeprecated}>\n        <calcite-checkbox\n          checked={this.selected}\n          label={this.messages.select}\n          onCalciteCheckboxChange={this.selectCardDeprecated}\n        />\n      </calcite-label>\n    );\n  }\n\n  private selectCardDeprecated = (event: CalciteCheckboxCustomEvent<void>): void => {\n    this.selected = event.target.checked;\n    this.calciteCardSelect.emit();\n  };\n\n  private cardSelectClick = (event): void => {\n    if (!this.disabled) {\n      event.preventDefault();\n      this.calciteCardSelect.emit();\n      this.setFocus();\n    }\n  };\n\n  private renderThumbnail(): VNode {\n    return (\n      <section class={CSS.thumbnailWrapper} hidden={!this.hasThumbnail}>\n        <slot name={SLOTS.thumbnail} onSlotchange={this.handleThumbnailSlotChange} />\n      </section>\n    );\n  }\n\n  private renderSelectionIcon(): VNode {\n    const icon: IconNameOrString =\n      this.selectionMode === \"multiple\" && this.selected\n        ? ICONS.selected\n        : this.selectionMode === \"multiple\"\n          ? ICONS.unselected\n          : this.selected\n            ? ICONS.selectedSingle\n            : ICONS.unselectedSingle;\n\n    return (\n      <div class={CSS.checkboxWrapper} onPointerDown={this.cardSelectClick} tabIndex={-1}>\n        <calcite-icon icon={icon} scale=\"s\" />\n      </div>\n    );\n  }\n\n  private renderHeader(): VNode {\n    const hasHeader = this.hasHeading || this.hasDescription;\n    const hasDeprecatedHeader = this.hasSubtitle || this.hasTitle;\n    const showHeader = hasHeader || hasDeprecatedHeader;\n\n    return (\n      <header class={CSS.header} hidden={!showHeader}>\n        {this.selectable ? this.renderCheckboxDeprecated() : null}\n        <div class={CSS.headerTextContainer}>\n          <slot name={SLOTS.heading} onSlotchange={this.handleHeadingSlotChange} />\n          <slot name={SLOTS.description} onSlotchange={this.handleDescriptionSlotChange} />\n          <slot name={SLOTS.title} onSlotchange={this.handleTitleSlotChange} />\n          <slot name={SLOTS.subtitle} onSlotchange={this.handleSubtitleSlotChange} />\n        </div>\n        {this.selectionMode !== \"none\" && this.renderSelectionIcon()}\n      </header>\n    );\n  }\n\n  private renderFooter(): VNode {\n    const hasFooter = this.hasFooterStart || this.hasFooterEnd;\n    return (\n      <footer class={CSS.footer} hidden={!hasFooter}>\n        <slot name={SLOTS.footerStart} onSlotchange={this.handleFooterStartSlotChange} />\n        <slot name={SLOTS.footerEnd} onSlotchange={this.handleFooterEndSlotChange} />\n      </footer>\n    );\n  }\n\n  render(): VNode {\n    const thumbnailInline = this.thumbnailPosition.startsWith(\"inline\");\n    const thumbnailStart = this.thumbnailPosition.endsWith(\"start\");\n    const role =\n      this.selectionMode === \"multiple\"\n        ? \"checkbox\"\n        : this.selectionMode !== \"none\"\n          ? \"radio\"\n          : undefined;\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-checked={this.selectionMode !== \"none\" ? toAriaBoolean(this.selected) : undefined}\n            aria-label={this.label}\n            class={{ [CSS.contentWrapper]: true, inline: thumbnailInline }}\n            onClick={this.cardBodyClickHandler}\n            onKeyDown={this.keyDownHandler}\n            ref={(el) => (this.containerEl = el)}\n            role={role}\n            tabIndex={!this.selectable || this.disabled ? 0 : -1}\n          >\n            {this.loading ? (\n              <div aria-live=\"polite\" class=\"calcite-card-loader-container\">\n                <calcite-loader label={this.messages.loading} />\n              </div>\n            ) : null}\n            {thumbnailStart && this.renderThumbnail()}\n            <section aria-busy={toAriaBoolean(this.loading)} class={{ [CSS.container]: true }}>\n              {this.renderHeader()}\n              <div\n                class={{\n                  [CSS.cardContent]: true,\n                  [CSS.hasSlottedContent]: this.hasContent,\n                }}\n              >\n                <slot onSlotchange={this.handleDefaultSlotChange} />\n              </div>\n              {this.renderFooter()}\n            </section>\n            {!thumbnailStart && this.renderThumbnail()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/calcite-carousel_2.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/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.14.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03561b9a.js');
-const dom = require('./dom-401c47fa.js');
-const locale = require('./locale-783be19a.js');
-const guid = require('./guid-7487a6a8.js');
-const interactive = require('./interactive-e27cd6e3.js');
-const loadable = require('./loadable-1e343f4a.js');
-const t9n = require('./t9n-5f0809e3.js');
-const observers = require('./observers-dc37fb24.js');
-const responsive = require('./responsive-29c39256.js');
-const array = require('./array-7ffc3586.js');
-require('./resources-8d0a3a55.js');
-require('./key-8032a9dc.js');
-require('./browser-b9024aa0.js');
+const index = require('./index-fa8af6d4.js');
+const dom = require('./dom-c64d16b4.js');
+const locale = require('./locale-c8a9eaf0.js');
+const guid = require('./guid-fd15b830.js');
+const interactive = require('./interactive-cad47537.js');
+const loadable = require('./loadable-3b4436ea.js');
+const t9n = require('./t9n-386452e2.js');
+const observers = require('./observers-d4deb7de.js');
+const responsive = require('./responsive-f50a34ac.js');
+const array = require('./array-c050eaed.js');
+require('./resources-d4d76af1.js');
+require('./key-cae77b35.js');
+require('./browser-39ff1e63.js');
 
 const DURATION = 6000;
 const CSS$1 = {
@@ -492,17 +492,17 @@ const Carousel = class {
     }
     render() {
         const { direction } = this;
-        return (index.h(index.Host, { key: 'c41171a3b16c6aad1b37f4631a2d123acaca752d' }, index.h(interactive.InteractiveContainer, { key: '03c90c14f2b3f948c0e349bede237d29ed292c7f', disabled: this.disabled }, index.h("div", { key: 'df9af99e67d3b9c61dd6ccac74e82237e8eb17c4', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
+        return (index.h(index.Host, { key: 'c63aafb2f9441499aa1fd9cfe56e475963458bda' }, index.h(interactive.InteractiveContainer, { key: 'ea032cbff9c25640cd13a790155932f79cbf5f1c', disabled: this.disabled }, index.h("div", { key: 'c91f62a6103749c5b0c2de23c473ea56b9fcab0e', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
                 [CSS$1.container]: true,
                 [CSS$1.containerOverlaid]: this.controlOverlay,
                 [CSS$1.containerEdged]: this.arrowType === "edge",
-            }, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.containerKeyDownHandler, onMouseEnter: this.handleMouseIn, onMouseLeave: this.handleMouseOut, ref: this.storeContainerRef, role: "group", tabIndex: 0 }, index.h("section", { key: '7c274a35b9186ba9bb04fd8124be6893eee46e5f', class: {
+            }, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.containerKeyDownHandler, onMouseEnter: this.handleMouseIn, onMouseLeave: this.handleMouseOut, ref: this.storeContainerRef, role: "group", tabIndex: 0 }, index.h("section", { key: '20ab72ef93a5cf2799ea393a42b75a188740e8ab', class: {
                 [CSS$1.itemContainer]: true,
                 [CSS$1.itemContainerForward]: direction === "forward",
                 [CSS$1.itemContainerBackward]: direction === "backward",
             }, id: this.containerId,
             // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
-            ref: this.storeItemContainerRef }, index.h("slot", { key: '0f2497545f4cf4a311ab871bcaf5ff16fe677c77', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
+            ref: this.storeItemContainerRef }, index.h("slot", { key: '2142f6432573e3b192ccbc9549e91b18a2ed704a', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -540,7 +540,7 @@ const CarouselItem = class {
     // --------------------------------------------------------------------------
     render() {
         const id = this.el.id || this.guid;
-        return (index.h(index.Host, { key: '5606df99edd6007701f391f095c88270eed4ccf1', id: id }, index.h("div", { key: '7147a10dbb3fa9292da09207709bfa5e7e857bf9', "aria-label": this.label, class: { [CSS.container]: true, [CSS.selected]: this.selected }, role: "tabpanel" }, index.h("slot", { key: '8b6876c8fc55afd1cac458b97063f66dff2cd9e2' }))));
+        return (index.h(index.Host, { key: 'e8eb5f2d26a828d13ff1489ee0a697f5bd64ef01', id: id }, index.h("div", { key: 'bcb63cfba9e7cd113624562cafc5e1c2c16e130f', "aria-label": this.label, class: { [CSS.container]: true, [CSS.selected]: this.selected }, role: "tabpanel" }, index.h("slot", { key: 'db2cf2b191fa3893d7c95ff4f9e025244d198185' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,23 +1,23 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.14.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03561b9a.js');
-const dom = require('./dom-401c47fa.js');
-const form = require('./form-26bde25c.js');
-const guid = require('./guid-7487a6a8.js');
-const interactive = require('./interactive-e27cd6e3.js');
-const key = require('./key-8032a9dc.js');
-const label = require('./label-4cec1587.js');
-const loadable = require('./loadable-1e343f4a.js');
-const resources = require('./resources-8d0a3a55.js');
-require('./component-25eaec79.js');
-require('./browser-b9024aa0.js');
+const index = require('./index-fa8af6d4.js');
+const dom = require('./dom-c64d16b4.js');
+const form = require('./form-9fffc18b.js');
+const guid = require('./guid-fd15b830.js');
+const interactive = require('./interactive-cad47537.js');
+const key = require('./key-cae77b35.js');
+const label = require('./label-818df254.js');
+const loadable = require('./loadable-3b4436ea.js');
+const resources = require('./resources-d4d76af1.js');
+require('./component-7ca6ac5e.js');
+require('./browser-39ff1e63.js');
 
 const CSS = {
     toggle: "toggle",
@@ -51,9 +51,6 @@ const Checkbox = class {
             }
         };
         this.clickHandler = () => {
-            if (this.disabled) {
-                return;
-            }
             this.toggle();
         };
         //--------------------------------------------------------------------------
@@ -144,10 +141,10 @@ const Checkbox = class {
     // --------------------------------------------------------------------------
     render() {
         const rtl = dom.getElementDir(this.el) === "rtl";
-        return (index.h(index.Host, { key: '146f32544b1a2d6d3c0292462edb979699e4b75a', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: 'd5897a38a203d29967ec1f1e618a7b37d60d9b95', disabled: this.disabled }, index.h("div", { key: '17739f11d7e6368788941434ff8ef6f5d6291cd9', "aria-checked": dom.toAriaBoolean(this.checked), "aria-label": label.getLabelText(this), class: {
+        return (index.h(index.Host, { key: '8132e3ba7c26f38fa0a3e31a2ba275acd8d47813', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: '151a86be798b986626d928fb0b9910b30dc80790', disabled: this.disabled }, index.h("div", { key: '90e18e1affa841724284c6e7a6ef423118eb1efc', "aria-checked": dom.toAriaBoolean(this.checked), "aria-label": label.getLabelText(this), class: {
                 [CSS.toggle]: true,
                 [resources.CSS_UTILITY.rtl]: rtl,
-            }, onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 }, index.h("svg", { key: '99df5e78e296d086a6782983a929bd149c3c4e39', "aria-hidden": "true", class: CSS.check, viewBox: "0 0 16 16" }, index.h("path", { key: '57458a12cf5feeada4c57dfc51c5b62f1e73d49b', d: this.getPath() })), index.h("slot", { key: 'ad29699957eb1d3f041549d7057b4842d3396b3c' })), index.h(form.HiddenFormInputSlot, { key: '1b2a325739b08d7f21d4abee49fe27f632f78183', component: this }))));
+            }, onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 }, index.h("svg", { key: 'ea7ca8d86f0f4fe930c45f2bc114edd752c2ddf1', "aria-hidden": "true", class: CSS.check, viewBox: "0 0 16 16" }, index.h("path", { key: '4107ca07aed6fa10b79f5c01d109657aea98251b', d: this.getPath() })), index.h("slot", { key: 'fb09f570a74b4adfdd2cd0da84a366fffe89848a' })), index.h(form.HiddenFormInputSlot, { key: '97d395d0ac0d87f0027bddc2ce3da0a892c12f61', component: this }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"calcite-checkbox.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,WAAW;CACnB;;ACHD,MAAM,WAAW,GAAG,+2GAA+2G,CAAC;AACp4G,8BAAe,WAAW;;MCyCb,QAAQ;;;;;;QAgGV,gBAAW,GAAG,0DAA0D,CAAC;QAEzE,sBAAiB,GAAG,cAAc,CAAC;QAoC5C,YAAO,GAAG,MACR,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QAErF,WAAM,GAAG;YACP,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;gBAC7B,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;gBAC3B,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC;aACnC;SACF,CAAC;QAEF,mBAAc,GAAG,CAAC,KAAoB;YACpC,IAAIA,mBAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBAC9B,IAAI,CAAC,MAAM,EAAE,CAAC;gBACd,KAAK,CAAC,cAAc,EAAE,CAAC;aACxB;SACF,CAAC;QAEF,iBAAY,GAAG;YACb,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,MAAM,EAAE,CAAC;SACf,CAAC;;;;;;QA+BF,iBAAY,GAAG;YACb,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC9C,CAAC;QAEF,kBAAa,GAAG;YACd,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC9C,CAAC;QAEF,iBAAY,GAAG;YACb,IAAI,CAAC,MAAM,EAAE,CAAC;SACf,CAAC;uBA9LgD,KAAK;wBAGnB,KAAK;;;uBAqBN,KAAK;6BASgB,KAAK;;;wBAazB,KAAK;qBAGD,GAAG;sBAGD,MAAM;wBASU;YACxD,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,KAAK;YACf,WAAW,EAAE,KAAK;YAClB,eAAe,EAAE,KAAK;YACtB,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,KAAK;YACrB,YAAY,EAAE,KAAK;YACnB,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,KAAK;YACf,YAAY,EAAE,KAAK;YACnB,YAAY,EAAE,KAAK;SACpB;;;;;;;;;IAmCD,MAAM,QAAQ;QACZ,MAAMC,2BAAkB,CAAC,IAAI,CAAC,CAAC;QAE/B,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;KACxB;;;;;;IAQD,mBAAmB,CAAC,KAAuB;QACzC,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;KACzB;;;;;;IA4ED,iBAAiB;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,oBAAoBC,SAAI,EAAE,EAAE,CAAC;QACvDC,kBAAY,CAAC,IAAI,CAAC,CAAC;QACnBC,gBAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAED,oBAAoB;QAClBC,qBAAe,CAAC,IAAI,CAAC,CAAC;QACtBC,mBAAc,CAAC,IAAI,CAAC,CAAC;KACtB;IAED,iBAAiB;QACfC,+BAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,gBAAgB;QACdC,2BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,kBAAkB;QAChBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;;;;;;IAQD,MAAM;QACJ,MAAM,GAAG,GAAGC,iBAAa,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,KAAK,CAAC;QAE7C,QACEC,QAACC,UAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,IAC9DD,QAACE,gCAAoB,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3CF,kFACgBG,iBAAa,CAAC,IAAI,CAAC,OAAO,CAAC,gBAC7BC,kBAAY,CAAC,IAAI,CAAC,EAC9B,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,MAAM,GAAG,IAAI;gBAClB,CAACC,qBAAW,CAAC,GAAG,GAAG,GAAG;aACvB,EACD,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,GAAG,EAAE,CAAC,QAAQ,MAAM,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,EAC7C,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,CAAC,IAEvCL,iFAAiB,MAAM,EAAC,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,OAAO,EAAC,WAAW,IAC3DA,mEAAM,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI,CACvB,EACNA,oEAAQ,CACJ,EACNA,QAACM,wBAAmB,qDAAC,SAAS,EAAE,IAAI,GAAI,CACnB,CAClB,EACP;KACH;;;;;;;","names":["isActivationKey","componentFocusable","guid","connectLabel","connectForm","disconnectLabel","disconnectForm","setUpLoadableComponent","setComponentLoaded","updateHostInteraction","getElementDir","h","Host","InteractiveContainer","toAriaBoolean","getLabelText","CSS_UTILITY","HiddenFormInputSlot"],"sources":["src/components/checkbox/resources.ts","src/components/checkbox/checkbox.scss?tag=calcite-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["export const CSS = {\n  toggle: \"toggle\",\n  check: \"check-svg\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-checkbox-size: Specifies the component's height and width.\n * @prop --calcite-checkbox-border-color: Specifies the component's color.\n * @prop --calcite-checkbox-border-color-hover: Specifies the component's color when hovered.\n * @prop --calcite-checkbox-icon-color: Specifies the component's font color.\n */\n\n:host([scale=\"s\"]) {\n  .check-svg,\n  .toggle {\n    inline-size: var(--calcite-checkbox-size, theme(\"spacing.3\"));\n    block-size: var(--calcite-checkbox-size, theme(\"spacing.3\"));\n  }\n}\n:host([scale=\"m\"]) {\n  .check-svg,\n  .toggle {\n    inline-size: var(--calcite-checkbox-size, theme(\"fontSize.n1\"));\n    block-size: var(--calcite-checkbox-size, theme(\"fontSize.n1\"));\n  }\n}\n:host([scale=\"l\"]) {\n  .check-svg,\n  .toggle {\n    inline-size: var(--calcite-checkbox-size, theme(\"spacing.4\"));\n    block-size: var(--calcite-checkbox-size, theme(\"spacing.4\"));\n  }\n}\n\n:host {\n  @apply relative\n    inline-flex\n    cursor-pointer\n    select-none;\n  -webkit-tap-highlight-color: transparent;\n\n  .check-svg {\n    @apply bg-foreground-1\n      pointer-events-none\n      box-border\n      block\n      overflow-hidden\n      fill-current\n      stroke-current\n      stroke-1\n      transition-default;\n    box-shadow: inset 0 0 0 1px var(--calcite-checkbox-border-color, var(--calcite-color-border-input));\n    color: var(--calcite-checkbox-icon-color, theme(\"backgroundColor.background\"));\n  }\n}\n\n:host([status=\"invalid\"]:not([checked])) {\n  .check-svg {\n    box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);\n  }\n  .toggle:focus {\n    @apply focus-outset-danger;\n  }\n}\n\n:host([checked]),\n:host([indeterminate]) {\n  .check-svg {\n    @apply bg-brand;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n  }\n}\n:host([hovered]) .toggle,\n:host .toggle:hover {\n  .check-svg {\n    box-shadow: inset 0 0 0 2px var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand));\n  }\n}\n\n.toggle {\n  @apply focus-base relative;\n\n  &:active,\n  &:focus,\n  &:focus-visible {\n    @apply focus-outset;\n  }\n\n  &::after,\n  &::before {\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    min-block-size: theme(\"width.6\");\n    min-inline-size: theme(\"width.6\");\n    position: absolute;\n  }\n}\n\n.toggle:not(.calcite--rtl) {\n  &::after {\n    content: \"\";\n    transform: translateX(-50%) translateY(-50%);\n  }\n}\n\n.toggle.calcite--rtl {\n  &::before {\n    content: \"\";\n    transform: translateX(50%) translateY(-50%);\n  }\n}\n\n@include disabled();\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 { getElementDir, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n  MutableValidityState,\n} from \"../../utils/form\";\nimport { guid } from \"../../utils/guid\";\nimport {\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, Status } from \"../interfaces\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport { CSS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-checkbox\",\n  styleUrl: \"checkbox.scss\",\n  shadow: true,\n})\nexport class Checkbox\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true }) form: string;\n\n  /**\n   * The `id` attribute of the component. When omitted, a globally unique identifier is used.\n   *\n   * @deprecated No longer necessary.\n   */\n  @Prop({ reflect: true, mutable: true }) guid: string;\n\n  /**\n   * The hovered state of the checkbox.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) hovered = false;\n\n  /**\n   * When `true`, the component is initially indeterminate, which is independent from its `checked` value.\n   *\n   * The state is visual only, and can look different across browsers.\n   *\n   * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate = false;\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  /** When `true`, the component must have a value in order for the form to submit. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies the size of the component. */\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  /**\n   * The current validation state of the component.\n   *\n   * @readonly\n   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated in form util when syncing hidden input\n  @Prop({ mutable: true }) validity: MutableValidityState = {\n    valid: false,\n    badInput: false,\n    customError: false,\n    patternMismatch: false,\n    rangeOverflow: false,\n    rangeUnderflow: false,\n    stepMismatch: false,\n    tooLong: false,\n    tooShort: false,\n    typeMismatch: false,\n    valueMissing: false,\n  };\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCheckboxElement;\n\n  readonly checkedPath = \"M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z\";\n\n  readonly indeterminatePath = \"M13 8v1H3V8z\";\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultChecked: boolean;\n\n  defaultValue: Checkbox[\"checked\"];\n\n  toggleEl: HTMLDivElement;\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    this.toggleEl?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  getPath = (): string =>\n    this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : \"\";\n\n  toggle = (): void => {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.setFocus();\n      this.indeterminate = false;\n      this.calciteCheckboxChange.emit();\n    }\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  clickHandler = (): void => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the component is blurred.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxBlur: EventEmitter<boolean>;\n\n  /** Fires when the component's `checked` status changes. */\n  @Event({ cancelable: false }) calciteCheckboxChange: EventEmitter<void>;\n\n  /**\n   * Fires when the component is focused.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxFocus: EventEmitter<boolean>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  onToggleBlur = (): void => {\n    this.calciteInternalCheckboxBlur.emit(false);\n  };\n\n  onToggleFocus = (): void => {\n    this.calciteInternalCheckboxFocus.emit(true);\n  };\n\n  onLabelClick = (): void => {\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.guid = this.el.id || `calcite-checkbox-${guid()}`;\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const rtl = getElementDir(this.el) === \"rtl\";\n\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={{\n              [CSS.toggle]: true,\n              [CSS_UTILITY.rtl]: rtl,\n            }}\n            onBlur={this.onToggleBlur}\n            onFocus={this.onToggleFocus}\n            ref={(toggleEl) => (this.toggleEl = toggleEl)}\n            role=\"checkbox\"\n            tabIndex={this.disabled ? undefined : 0}\n          >\n            <svg aria-hidden=\"true\" class={CSS.check} viewBox=\"0 0 16 16\">\n              <path d={this.getPath()} />\n            </svg>\n            <slot />\n          </div>\n          <HiddenFormInputSlot component={this} />\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-checkbox.entry.cjs.js","mappings":"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","names":["isActivationKey","componentFocusable","guid","connectLabel","connectForm","disconnectLabel","disconnectForm","setUpLoadableComponent","setComponentLoaded","updateHostInteraction","getElementDir","h","Host","InteractiveContainer","toAriaBoolean","getLabelText","CSS_UTILITY","HiddenFormInputSlot"],"sources":["src/components/checkbox/resources.ts","src/components/checkbox/checkbox.scss?tag=calcite-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["export const CSS = {\n  toggle: \"toggle\",\n  check: \"check-svg\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-checkbox-size: Specifies the component's height and width.\n * @prop --calcite-checkbox-border-color: Specifies the component's color.\n * @prop --calcite-checkbox-border-color-hover: Specifies the component's color when hovered.\n * @prop --calcite-checkbox-icon-color: Specifies the component's font color.\n */\n\n:host([scale=\"s\"]) {\n  .check-svg,\n  .toggle {\n    inline-size: var(--calcite-checkbox-size, theme(\"spacing.3\"));\n    block-size: var(--calcite-checkbox-size, theme(\"spacing.3\"));\n  }\n}\n:host([scale=\"m\"]) {\n  .check-svg,\n  .toggle {\n    inline-size: var(--calcite-checkbox-size, theme(\"fontSize.n1\"));\n    block-size: var(--calcite-checkbox-size, theme(\"fontSize.n1\"));\n  }\n}\n:host([scale=\"l\"]) {\n  .check-svg,\n  .toggle {\n    inline-size: var(--calcite-checkbox-size, theme(\"spacing.4\"));\n    block-size: var(--calcite-checkbox-size, theme(\"spacing.4\"));\n  }\n}\n\n:host {\n  @apply relative\n    inline-flex\n    cursor-pointer\n    select-none;\n  -webkit-tap-highlight-color: transparent;\n\n  .check-svg {\n    @apply bg-foreground-1\n      pointer-events-none\n      box-border\n      block\n      overflow-hidden\n      fill-current\n      stroke-current\n      stroke-1\n      transition-default;\n    box-shadow: inset 0 0 0 1px var(--calcite-checkbox-border-color, var(--calcite-color-border-input));\n    color: var(--calcite-checkbox-icon-color, theme(\"backgroundColor.background\"));\n  }\n}\n\n:host([status=\"invalid\"]:not([checked])) {\n  .check-svg {\n    box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);\n  }\n  .toggle:focus {\n    @apply focus-outset-danger;\n  }\n}\n\n:host([checked]),\n:host([indeterminate]) {\n  .check-svg {\n    @apply bg-brand;\n    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);\n  }\n}\n:host([hovered]) .toggle,\n:host .toggle:hover {\n  .check-svg {\n    box-shadow: inset 0 0 0 2px var(--calcite-checkbox-border-color-hover, var(--calcite-color-brand));\n  }\n}\n\n.toggle {\n  @apply focus-base relative;\n\n  &:active,\n  &:focus,\n  &:focus-visible {\n    @apply focus-outset;\n  }\n\n  &::after,\n  &::before {\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    min-block-size: theme(\"width.6\");\n    min-inline-size: theme(\"width.6\");\n    position: absolute;\n  }\n}\n\n.toggle:not(.calcite--rtl) {\n  &::after {\n    content: \"\";\n    transform: translateX(-50%) translateY(-50%);\n  }\n}\n\n.toggle.calcite--rtl {\n  &::before {\n    content: \"\";\n    transform: translateX(50%) translateY(-50%);\n  }\n}\n\n@include disabled();\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 { getElementDir, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  CheckableFormComponent,\n  connectForm,\n  disconnectForm,\n  HiddenFormInputSlot,\n  MutableValidityState,\n} from \"../../utils/form\";\nimport { guid } from \"../../utils/guid\";\nimport {\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, Status } from \"../interfaces\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport { CSS } from \"./resources\";\n\n@Component({\n  tag: \"calcite-checkbox\",\n  styleUrl: \"checkbox.scss\",\n  shadow: true,\n})\nexport class Checkbox\n  implements LabelableComponent, CheckableFormComponent, InteractiveComponent, LoadableComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is checked. */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true }) form: string;\n\n  /**\n   * The `id` attribute of the component. When omitted, a globally unique identifier is used.\n   *\n   * @deprecated No longer necessary.\n   */\n  @Prop({ reflect: true, mutable: true }) guid: string;\n\n  /**\n   * The hovered state of the checkbox.\n   *\n   * @internal\n   */\n  @Prop({ reflect: true }) hovered = false;\n\n  /**\n   * When `true`, the component is initially indeterminate, which is independent from its `checked` value.\n   *\n   * The state is visual only, and can look different across browsers.\n   *\n   * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)\n   */\n  @Prop({ reflect: true, mutable: true }) indeterminate = false;\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  /** When `true`, the component must have a value in order for the form to submit. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Specifies the size of the component. */\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  /**\n   * The current validation state of the component.\n   *\n   * @readonly\n   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated in form util when syncing hidden input\n  @Prop({ mutable: true }) validity: MutableValidityState = {\n    valid: false,\n    badInput: false,\n    customError: false,\n    patternMismatch: false,\n    rangeOverflow: false,\n    rangeUnderflow: false,\n    stepMismatch: false,\n    tooLong: false,\n    tooShort: false,\n    typeMismatch: false,\n    valueMissing: false,\n  };\n\n  /** The component's value. */\n  @Prop() value: any;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCheckboxElement;\n\n  readonly checkedPath = \"M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z\";\n\n  readonly indeterminatePath = \"M13 8v1H3V8z\";\n\n  labelEl: HTMLCalciteLabelElement;\n\n  formEl: HTMLFormElement;\n\n  defaultChecked: boolean;\n\n  defaultValue: Checkbox[\"checked\"];\n\n  toggleEl: HTMLDivElement;\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    this.toggleEl?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  syncHiddenFormInput(input: HTMLInputElement): void {\n    input.type = \"checkbox\";\n  }\n\n  getPath = (): string =>\n    this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : \"\";\n\n  toggle = (): void => {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.setFocus();\n      this.indeterminate = false;\n      this.calciteCheckboxChange.emit();\n    }\n  };\n\n  keyDownHandler = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      this.toggle();\n      event.preventDefault();\n    }\n  };\n\n  clickHandler = (): void => {\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when the component is blurred.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxBlur: EventEmitter<boolean>;\n\n  /** Fires when the component's `checked` status changes. */\n  @Event({ cancelable: false }) calciteCheckboxChange: EventEmitter<void>;\n\n  /**\n   * Fires when the component is focused.\n   *\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalCheckboxFocus: EventEmitter<boolean>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  onToggleBlur = (): void => {\n    this.calciteInternalCheckboxBlur.emit(false);\n  };\n\n  onToggleFocus = (): void => {\n    this.calciteInternalCheckboxFocus.emit(true);\n  };\n\n  onLabelClick = (): void => {\n    this.toggle();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.guid = this.el.id || `calcite-checkbox-${guid()}`;\n    connectLabel(this);\n    connectForm(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n\n  componentWillLoad(): void {\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  render(): VNode {\n    const rtl = getElementDir(this.el) === \"rtl\";\n\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={{\n              [CSS.toggle]: true,\n              [CSS_UTILITY.rtl]: rtl,\n            }}\n            onBlur={this.onToggleBlur}\n            onFocus={this.onToggleFocus}\n            ref={(toggleEl) => (this.toggleEl = toggleEl)}\n            role=\"checkbox\"\n            tabIndex={this.disabled ? undefined : 0}\n          >\n            <svg aria-hidden=\"true\" class={CSS.check} viewBox=\"0 0 16 16\">\n              <path d={this.getPath()} />\n            </svg>\n            <slot />\n          </div>\n          <HiddenFormInputSlot component={this} />\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/calcite-chip-group.cjs.entry.js

@@ -1,19 +1,19 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.14.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03561b9a.js');
-const dom = require('./dom-401c47fa.js');
-const interactive = require('./interactive-e27cd6e3.js');
-const loadable = require('./loadable-1e343f4a.js');
-require('./guid-7487a6a8.js');
-require('./resources-8d0a3a55.js');
-require('./browser-b9024aa0.js');
+const index = require('./index-fa8af6d4.js');
+const dom = require('./dom-c64d16b4.js');
+const interactive = require('./interactive-cad47537.js');
+const loadable = require('./loadable-3b4436ea.js');
+require('./guid-fd15b830.js');
+require('./resources-d4d76af1.js');
+require('./browser-39ff1e63.js');
 
 const chipGroupCss = ":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}.container{display:flex;inline-size:100%;flex-wrap:wrap;gap:0.5rem}::slotted(calcite-chip){flex:none}:host([scale=s]) .container{gap:0.25rem}:host([scale=l]) .container{gap:0.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteChipGroupStyle0 = chipGroupCss;
@@ -180,7 +180,7 @@ const ChipGroup = class {
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
         const { disabled } = this;
-        return (index.h(interactive.InteractiveContainer, { key: '0db5548f1c2854898191b4d6eb8140cae2faf3d8', disabled: disabled }, index.h("div", { key: '60fc92fea20478ee6fde23d807f17f7f472c1f5a', "aria-label": this.label, class: "container", role: role }, index.h("slot", { key: 'd43fcf04af0063cd4d00f46e6dd61347eafccb3b', onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) }))));
+        return (index.h(interactive.InteractiveContainer, { key: '0eff5094196c81d49299c8798bead2fa9ad58ae4', disabled: disabled }, index.h("div", { key: '99082a44e4321b23afd5ef0d05ffbda4ea81ff9b', "aria-label": this.label, class: "container", role: role }, index.h("slot", { key: 'f2735e6b7becd61933ce2b0ecbe2b1ace8a010b9', onSlotchange: this.updateItems, ref: (el) => (this.slotRefEl = el) }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/calcite-chip.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/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.14.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03561b9a.js');
-const dom = require('./dom-401c47fa.js');
-const loadable = require('./loadable-1e343f4a.js');
-const t9n = require('./t9n-5f0809e3.js');
-const interactive = require('./interactive-e27cd6e3.js');
-const locale = require('./locale-783be19a.js');
-const key = require('./key-8032a9dc.js');
-const component = require('./component-25eaec79.js');
-const browser = require('./browser-b9024aa0.js');
-require('./guid-7487a6a8.js');
-require('./resources-8d0a3a55.js');
-require('./observers-dc37fb24.js');
+const index = require('./index-fa8af6d4.js');
+const dom = require('./dom-c64d16b4.js');
+const loadable = require('./loadable-3b4436ea.js');
+const t9n = require('./t9n-386452e2.js');
+const interactive = require('./interactive-cad47537.js');
+const locale = require('./locale-c8a9eaf0.js');
+const key = require('./key-cae77b35.js');
+const component = require('./component-7ca6ac5e.js');
+const browser = require('./browser-39ff1e63.js');
+require('./guid-fd15b830.js');
+require('./resources-d4d76af1.js');
+require('./observers-d4deb7de.js');
 
 const CSS = {
     title: "title",
@@ -243,7 +243,7 @@ const Chip = class {
                 : this.interactive
                     ? "button"
                     : undefined;
-        return (index.h(index.Host, { key: '7feca8bad37627baabfc4abd25cf135e1e9f196b' }, index.h(interactive.InteractiveContainer, { key: 'af2360b4b768ae8c643d52f4bdb9f5d282504114', disabled: disabled }, index.h("div", { key: '8d905c4ab20d271a211282b95ebcb2d305d76cb7', "aria-checked": this.selectionMode !== "none" && this.interactive
+        return (index.h(index.Host, { key: '57dff539b14a488e6360c9ed400492cfafc64b34' }, index.h(interactive.InteractiveContainer, { key: '6f78566970ef9a504ac066f7a7c241d7f219c47d', disabled: disabled }, index.h("div", { key: '4ff8dfe906798fb500da3bd029e622e904dc38ce', "aria-checked": this.selectionMode !== "none" && this.interactive
                 ? dom.toAriaBoolean(this.selected)
                 : undefined, "aria-label": this.label, class: {
                 [CSS.container]: true,
@@ -260,7 +260,7 @@ const Chip = class {
                     (!this.icon || !this.hasImage) &&
                     (this.selectionMode === "none" ||
                         (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)),
-            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), index.h("span", { key: 'dab6eae3f8330b85ffac4c7fe1b2fcbb53327196', class: CSS.title }, index.h("slot", { key: '72ba5bd0c7a97c30f766da119f419261aab24acb', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
+            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), index.h("span", { key: 'dfe4a920a7995d18306d04450801347bc71d79ac', class: CSS.title }, index.h("slot", { key: 'cec18ec8e90df1405e58859ed24c2d0a4b4901f8', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }