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

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

@@ -1 +1 @@
-{"file":"calcite-action.entry.cjs.js","mappings":"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","names":["createObserver","forceUpdate","guid","updateMessages","connectInteractive","connectLocalized","connectMessages","setUpLoadableComponent","isBrowser","setUpMessages","setComponentLoaded","disconnectInteractive","disconnectLocalized","disconnectMessages","updateHostInteraction","componentFocusable","h","getIconScale","Host","InteractiveContainer","toAriaBoolean"],"sources":["src/components/action/resources.ts","src/components/action/action.scss?tag=calcite-action&encapsulation=shadow","src/components/action/action.tsx"],"sourcesContent":["export const CSS = {\n  button: \"button\",\n  buttonTextVisible: \"button--text-visible\",\n  buttonCompact: \"button--compact\",\n  indicatorText: \"indicator-text\",\n  iconContainer: \"icon-container\",\n  slotContainer: \"slot-container\",\n  slotContainerHidden: \"slot-container--hidden\",\n  textContainer: \"text-container\",\n  textContainerVisible: \"text-container--visible\",\n  indicatorWithIcon: \"indicator-with-icon\",\n  indicatorWithoutIcon: \"indicator-without-icon\",\n};\n\nexport const SLOTS = {\n  tooltip: \"tooltip\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-indicator-color: Specifies the component's indicator color.\n * @prop --calcite-action-background-color: Specifies the component's  background color.\n * @prop --calcite-action-background-color-hover: Specifies the component's background color when hovered or focused.\n * @prop --calcite-action-background-color-pressed: Specifies the component's background color when active.\n * @prop --calcite-action-text-color: Specifies the text color of the component.\n * @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered.\n */\n\n:host {\n  @extend %component-host;\n  @apply flex bg-transparent;\n}\n\n@mixin action-indicator() {\n  position: relative;\n  &::after {\n    content: \"\";\n    @apply absolute\n      h-2\n      w-2\n      rounded-full;\n    inset-block-end: calc(-0.275rem);\n    inset-inline-end: calc(-0.275rem);\n    background-color: var(--calcite-action-indicator-color, theme(\"colors.brand\"));\n  }\n}\n\n.button {\n  @apply focus-base\n    text-n2h\n    relative\n    m-0\n    flex\n    w-auto\n    cursor-pointer\n    items-center\n    justify-start\n    border-none\n    font-medium\n    font-sans;\n\n  background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));\n  color: var(--calcite-action-text-color, var(--calcite-color-text-3));\n  text-align: unset;\n  flex: 1 0 auto;\n\n  &:hover,\n  &:focus {\n    background-color: var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));\n    color: var(--calcite-action-text-color-pressed, var(--calcite-color-text-1));\n  }\n\n  &:focus {\n    @apply focus-inset;\n  }\n\n  &:active {\n    background-color: var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3));\n  }\n}\n\n.icon-container {\n  @apply pointer-events-none\n    m-0\n    flex\n    items-center\n    justify-center;\n  min-inline-size: theme(\"spacing.4\");\n  min-block-size: theme(\"spacing.6\");\n}\n\n.text-container {\n  @apply m-0\n    w-0\n    truncate\n    leading-6\n    opacity-0\n    transition-opacity\n    duration-150\n    ease-in-out;\n\n  transition-property: margin;\n  transition-property: inline-size;\n}\n\n.text-container--visible {\n  @apply w-auto flex-auto opacity-100;\n}\n\n:host([active]) {\n  .button {\n    &,\n    &:hover,\n    &:focus {\n      color: var(--calcite-action-text-color-pressed, var(--calcite-color-text-1));\n      background-color: var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3));\n    }\n\n    &:active {\n      background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));\n    }\n  }\n}\n\n:host([loading]) {\n  .button {\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));\n    }\n  }\n\n  .text-container {\n    @apply opacity-disabled;\n  }\n\n  calcite-loader[inline] {\n    margin-inline-end: theme(\"spacing.0\");\n  }\n}\n\n:host([appearance=\"transparent\"]) {\n  .button {\n    @apply bg-transparent\n      transition-shadow\n      duration-150\n      ease-in-out;\n\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-color-transparent-hover);\n    }\n\n    &:active {\n      background-color: var(--calcite-color-transparent-press);\n    }\n  }\n}\n\n:host([data-active]) .button {\n  @apply focus-inset;\n}\n\n:host([scale=\"s\"]) {\n  .button {\n    @apply text-n2h px-2 py-1 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.2\");\n  }\n}\n\n:host([scale=\"m\"]) {\n  .button {\n    @apply text-n1h px-4 py-3 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.3\");\n  }\n}\n\n:host([scale=\"l\"]) {\n  .button {\n    @apply text-0h p-5 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.4\");\n  }\n}\n\n:host([alignment=\"center\"]) .button {\n  @apply justify-center;\n}\n\n:host([alignment=\"end\"]) .button {\n  @apply justify-end;\n}\n\n:host([alignment=\"center\"]),\n:host([alignment=\"end\"]) {\n  .button .text-container--visible {\n    @apply flex-initial;\n  }\n}\n\n/* [Deprecated]  Compact */\n:host([scale=\"s\"][compact]) .button,\n:host([scale=\"m\"][compact]) .button,\n:host([scale=\"l\"][compact]) .button {\n  @apply px-0;\n}\n\n.slot-container {\n  @apply flex;\n}\n\n.slot-container--hidden {\n  @apply hidden;\n}\n\n.button--text-visible {\n  @apply w-full;\n}\n\n.indicator-with-icon {\n  @include action-indicator();\n}\n\n.indicator-without-icon {\n  @apply w-4 mx-1;\n  @include action-indicator();\n}\n\n.indicator-text {\n  @apply sr-only;\n}\n\n@include base-component();\n@include disabled {\n  .button,\n  .button:hover,\n  .button:focus {\n    @apply opacity-disabled bg-foreground-1 cursor-default;\n  }\n\n  &:host([active]) {\n    .button,\n    .button:hover,\n    .button:focus {\n      @apply opacity-disabled bg-foreground-3;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  forceUpdate,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport { getIconScale } from \"../../utils/component\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Alignment, Appearance, Scale } from \"../interfaces\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { isBrowser } from \"../../utils/browser\";\nimport { ActionMessages } from \"./assets/action/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a `calcite-icon`.\n * @slot tooltip - [Deprecated] Use the `calcite-tooltip` component instead.\n */\n@Component({\n  tag: \"calcite-action\",\n  styleUrl: \"action.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Action\n  implements InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is highlighted.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  /**\n   * Specifies the horizontal alignment of button elements with text content.\n   */\n  @Prop({ reflect: true }) alignment: Alignment;\n\n  /** Specifies the appearance of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\"solid\" | \"transparent\", Appearance> = \"solid\";\n\n  /**\n   * When `true`, the side padding of the component is reduced.\n   *\n   * @deprecated No longer necessary.\n   */\n  @Prop({ reflect: true }) compact = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies an icon to display. */\n  @Prop() icon: IconNameOrString;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * When `true`, displays a visual indicator.\n   */\n  @Prop({ reflect: true }) indicator = false;\n\n  /**\n   * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.\n   */\n  @Prop() label: string;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies text that accompanies the icon.\n   */\n  @Prop() text!: string;\n\n  /**\n   * Indicates whether the text is displayed.\n   */\n  @Prop({ reflect: true }) textEnabled = 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: ActionMessages;\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<ActionMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteActionElement;\n\n  buttonEl: HTMLButtonElement;\n\n  mutationObserver = createObserver(\"mutation\", () => forceUpdate(this));\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionMessages;\n\n  guid = `calcite-action-${guid()}`;\n\n  indicatorId = `${this.guid}-indicator`;\n\n  buttonId = `${this.guid}-button`;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (isBrowser()) {\n      await setUpMessages(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.buttonEl?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderTextContainer(): VNode {\n    const { text, textEnabled } = this;\n\n    const textContainerClasses = {\n      [CSS.textContainer]: true,\n      [CSS.textContainerVisible]: textEnabled,\n    };\n\n    return text ? (\n      <div class={textContainerClasses} key=\"text-container\">\n        {text}\n      </div>\n    ) : null;\n  }\n\n  renderIndicatorText(): VNode {\n    const { indicator, messages, indicatorId, buttonId } = this;\n    return (\n      <div\n        aria-labelledby={buttonId}\n        aria-live=\"polite\"\n        class={CSS.indicatorText}\n        id={indicatorId}\n        role=\"region\"\n      >\n        {indicator ? messages.indicator : null}\n      </div>\n    );\n  }\n\n  renderIconContainer(): VNode {\n    const { loading, icon, scale, el, iconFlipRtl, indicator } = this;\n    const loaderScale = scale === \"l\" ? \"l\" : \"m\";\n    const calciteLoaderNode = loading ? (\n      <calcite-loader inline label={this.messages.loading} scale={loaderScale} />\n    ) : null;\n    const calciteIconNode = icon ? (\n      <calcite-icon\n        class={{ [CSS.indicatorWithIcon]: indicator }}\n        flipRtl={iconFlipRtl}\n        icon={icon}\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const iconNode = calciteLoaderNode || calciteIconNode;\n    const hasIconToDisplay = iconNode || el.children?.length;\n\n    const slotContainerNode = (\n      <div\n        class={{\n          [CSS.slotContainer]: true,\n          [CSS.slotContainerHidden]: loading,\n        }}\n      >\n        <slot />\n      </div>\n    );\n\n    return hasIconToDisplay ? (\n      <div aria-hidden=\"true\" class={CSS.iconContainer} key=\"icon-container\">\n        {iconNode}\n        {slotContainerNode}\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      active,\n      compact,\n      disabled,\n      icon,\n      loading,\n      textEnabled,\n      label,\n      text,\n      indicator,\n      indicatorId,\n      buttonId,\n      messages,\n    } = this;\n    const labelFallback = label || text;\n    const ariaLabel = labelFallback\n      ? `${labelFallback}${indicator ? ` (${messages.indicator})` : \"\"}`\n      : \"\";\n\n    const buttonClasses = {\n      [CSS.button]: true,\n      [CSS.buttonTextVisible]: textEnabled,\n      [CSS.buttonCompact]: compact,\n    };\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <button\n            aria-busy={toAriaBoolean(loading)}\n            aria-controls={indicator ? indicatorId : null}\n            aria-disabled={toAriaBoolean(disabled)}\n            aria-label={ariaLabel}\n            aria-pressed={toAriaBoolean(active)}\n            class={buttonClasses}\n            disabled={disabled}\n            id={buttonId}\n            ref={(buttonEl): HTMLButtonElement => (this.buttonEl = buttonEl)}\n          >\n            {this.renderIconContainer()}\n            {this.renderTextContainer()}\n            {!icon && indicator && <div class={CSS.indicatorWithoutIcon} key=\"indicator-no-icon\" />}\n          </button>\n          <slot name={SLOTS.tooltip} onSlotchange={this.handleTooltipSlotChange} />\n          {this.renderIndicatorText()}\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleTooltipSlotChange = (event: Event): void => {\n    const tooltips = (event.target as HTMLSlotElement)\n      .assignedElements({\n        flatten: true,\n      })\n      .filter((el) => el?.matches(\"calcite-tooltip\")) as HTMLCalciteTooltipElement[];\n\n    const tooltip = tooltips[0];\n\n    if (tooltip) {\n      tooltip.referenceElement = this.buttonEl;\n    }\n  };\n}\n"],"version":3}
+{"file":"calcite-action.entry.cjs.js","mappings":"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","names":["createObserver","forceUpdate","guid","updateMessages","connectLocalized","connectMessages","setUpLoadableComponent","isBrowser","setUpMessages","setComponentLoaded","disconnectLocalized","disconnectMessages","updateHostInteraction","componentFocusable","h","getIconScale","Host","InteractiveContainer","toAriaBoolean"],"sources":["src/components/action/resources.ts","src/components/action/action.scss?tag=calcite-action&encapsulation=shadow","src/components/action/action.tsx"],"sourcesContent":["export const CSS = {\n  button: \"button\",\n  buttonTextVisible: \"button--text-visible\",\n  buttonCompact: \"button--compact\",\n  indicatorText: \"indicator-text\",\n  iconContainer: \"icon-container\",\n  slotContainer: \"slot-container\",\n  slotContainerHidden: \"slot-container--hidden\",\n  textContainer: \"text-container\",\n  textContainerVisible: \"text-container--visible\",\n  indicatorWithIcon: \"indicator-with-icon\",\n  indicatorWithoutIcon: \"indicator-without-icon\",\n};\n\nexport const SLOTS = {\n  tooltip: \"tooltip\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-indicator-color: Specifies the component's indicator color.\n * @prop --calcite-action-background-color: Specifies the component's  background color.\n * @prop --calcite-action-background-color-hover: Specifies the component's background color when hovered or focused.\n * @prop --calcite-action-background-color-pressed: Specifies the component's background color when active.\n * @prop --calcite-action-text-color: Specifies the text color of the component.\n * @prop --calcite-action-text-color-pressed: Specifies the component's text color when hovered.\n */\n\n:host {\n  @extend %component-host;\n  @apply flex bg-transparent;\n}\n\n@mixin action-indicator() {\n  position: relative;\n  &::after {\n    content: \"\";\n    @apply absolute\n      h-2\n      w-2\n      rounded-full;\n    inset-block-end: calc(-0.275rem);\n    inset-inline-end: calc(-0.275rem);\n    background-color: var(--calcite-action-indicator-color, theme(\"colors.brand\"));\n  }\n}\n\n.button {\n  @apply focus-base\n    text-n2h\n    relative\n    m-0\n    flex\n    w-auto\n    cursor-pointer\n    items-center\n    justify-start\n    border-none\n    font-medium\n    font-sans;\n\n  background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));\n  color: var(--calcite-action-text-color, var(--calcite-color-text-3));\n  text-align: unset;\n  flex: 1 0 auto;\n\n  &:hover,\n  &:focus {\n    background-color: var(--calcite-action-background-color-hover, var(--calcite-color-foreground-2));\n    color: var(--calcite-action-text-color-pressed, var(--calcite-color-text-1));\n  }\n\n  &:focus {\n    @apply focus-inset;\n  }\n\n  &:active {\n    background-color: var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3));\n  }\n}\n\n.icon-container {\n  @apply pointer-events-none\n    m-0\n    flex\n    items-center\n    justify-center;\n  min-inline-size: theme(\"spacing.4\");\n  min-block-size: theme(\"spacing.6\");\n}\n\n.text-container {\n  @apply m-0\n    w-0\n    truncate\n    leading-6\n    opacity-0\n    transition-opacity\n    duration-150\n    ease-in-out;\n\n  transition-property: margin;\n  transition-property: inline-size;\n}\n\n.text-container--visible {\n  @apply w-auto flex-auto opacity-100;\n}\n\n:host([active]) {\n  .button {\n    &,\n    &:hover,\n    &:focus {\n      color: var(--calcite-action-text-color-pressed, var(--calcite-color-text-1));\n      background-color: var(--calcite-action-background-color-pressed, var(--calcite-color-foreground-3));\n    }\n\n    &:active {\n      background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));\n    }\n  }\n}\n\n:host([loading]) {\n  .button {\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-action-background-color, var(--calcite-color-foreground-1));\n    }\n  }\n\n  .text-container {\n    @apply opacity-disabled;\n  }\n\n  calcite-loader[inline] {\n    margin-inline-end: theme(\"spacing.0\");\n  }\n}\n\n:host([appearance=\"transparent\"]) {\n  .button {\n    @apply bg-transparent\n      transition-shadow\n      duration-150\n      ease-in-out;\n\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-color-transparent-hover);\n    }\n\n    &:active {\n      background-color: var(--calcite-color-transparent-press);\n    }\n  }\n}\n\n:host([data-active]) .button {\n  @apply focus-inset;\n}\n\n:host([scale=\"s\"]) {\n  .button {\n    @apply text-n2h px-2 py-1 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.2\");\n  }\n}\n\n:host([scale=\"m\"]) {\n  .button {\n    @apply text-n1h px-4 py-3 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.3\");\n  }\n}\n\n:host([scale=\"l\"]) {\n  .button {\n    @apply text-0h p-5 font-normal;\n  }\n  .button--text-visible .icon-container {\n    margin-inline-end: theme(\"spacing.4\");\n  }\n}\n\n:host([alignment=\"center\"]) .button {\n  @apply justify-center;\n}\n\n:host([alignment=\"end\"]) .button {\n  @apply justify-end;\n}\n\n:host([alignment=\"center\"]),\n:host([alignment=\"end\"]) {\n  .button .text-container--visible {\n    @apply flex-initial;\n  }\n}\n\n/* [Deprecated]  Compact */\n:host([scale=\"s\"][compact]) .button,\n:host([scale=\"m\"][compact]) .button,\n:host([scale=\"l\"][compact]) .button {\n  @apply px-0;\n}\n\n.slot-container {\n  @apply flex;\n}\n\n.slot-container--hidden {\n  @apply hidden;\n}\n\n.button--text-visible {\n  @apply w-full;\n}\n\n.indicator-with-icon {\n  @include action-indicator();\n}\n\n.indicator-without-icon {\n  @apply w-4 mx-1;\n  @include action-indicator();\n}\n\n.indicator-text {\n  @apply sr-only;\n}\n\n@include base-component();\n@include disabled {\n  .button,\n  .button:hover,\n  .button:focus {\n    @apply opacity-disabled bg-foreground-1 cursor-default;\n  }\n\n  &:host([active]) {\n    .button,\n    .button:hover,\n    .button:focus {\n      @apply opacity-disabled bg-foreground-3;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  forceUpdate,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport { getIconScale } from \"../../utils/component\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Alignment, Appearance, Scale } from \"../interfaces\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { isBrowser } from \"../../utils/browser\";\nimport { ActionMessages } from \"./assets/action/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a `calcite-icon`.\n * @slot tooltip - [Deprecated] Use the `calcite-tooltip` component instead.\n */\n@Component({\n  tag: \"calcite-action\",\n  styleUrl: \"action.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Action\n  implements InteractiveComponent, LocalizedComponent, T9nComponent, LoadableComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is highlighted.\n   */\n  @Prop({ reflect: true }) active = false;\n\n  /**\n   * Specifies the horizontal alignment of button elements with text content.\n   */\n  @Prop({ reflect: true }) alignment: Alignment;\n\n  /** Specifies the appearance of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\"solid\" | \"transparent\", Appearance> = \"solid\";\n\n  /**\n   * When `true`, the side padding of the component is reduced.\n   *\n   * @deprecated No longer necessary.\n   */\n  @Prop({ reflect: true }) compact = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies an icon to display. */\n  @Prop() icon: IconNameOrString;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /**\n   * When `true`, displays a visual indicator.\n   */\n  @Prop({ reflect: true }) indicator = false;\n\n  /**\n   * Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop.\n   */\n  @Prop() label: string;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * Specifies the size of the component.\n   */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies text that accompanies the icon.\n   */\n  @Prop() text!: string;\n\n  /**\n   * Indicates whether the text is displayed.\n   */\n  @Prop({ reflect: true }) textEnabled = 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: ActionMessages;\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<ActionMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteActionElement;\n\n  buttonEl: HTMLButtonElement;\n\n  mutationObserver = createObserver(\"mutation\", () => forceUpdate(this));\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionMessages;\n\n  guid = `calcite-action-${guid()}`;\n\n  indicatorId = `${this.guid}-indicator`;\n\n  buttonId = `${this.guid}-button`;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (isBrowser()) {\n      await setUpMessages(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.buttonEl?.focus();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderTextContainer(): VNode {\n    const { text, textEnabled } = this;\n\n    const textContainerClasses = {\n      [CSS.textContainer]: true,\n      [CSS.textContainerVisible]: textEnabled,\n    };\n\n    return text ? (\n      <div class={textContainerClasses} key=\"text-container\">\n        {text}\n      </div>\n    ) : null;\n  }\n\n  renderIndicatorText(): VNode {\n    const { indicator, messages, indicatorId, buttonId } = this;\n    return (\n      <div\n        aria-labelledby={buttonId}\n        aria-live=\"polite\"\n        class={CSS.indicatorText}\n        id={indicatorId}\n        role=\"region\"\n      >\n        {indicator ? messages.indicator : null}\n      </div>\n    );\n  }\n\n  renderIconContainer(): VNode {\n    const { loading, icon, scale, el, iconFlipRtl, indicator } = this;\n    const loaderScale = scale === \"l\" ? \"l\" : \"m\";\n    const calciteLoaderNode = loading ? (\n      <calcite-loader inline label={this.messages.loading} scale={loaderScale} />\n    ) : null;\n    const calciteIconNode = icon ? (\n      <calcite-icon\n        class={{ [CSS.indicatorWithIcon]: indicator }}\n        flipRtl={iconFlipRtl}\n        icon={icon}\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const iconNode = calciteLoaderNode || calciteIconNode;\n    const hasIconToDisplay = iconNode || el.children?.length;\n\n    const slotContainerNode = (\n      <div\n        class={{\n          [CSS.slotContainer]: true,\n          [CSS.slotContainerHidden]: loading,\n        }}\n      >\n        <slot />\n      </div>\n    );\n\n    return hasIconToDisplay ? (\n      <div aria-hidden=\"true\" class={CSS.iconContainer} key=\"icon-container\">\n        {iconNode}\n        {slotContainerNode}\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const {\n      active,\n      compact,\n      disabled,\n      icon,\n      loading,\n      textEnabled,\n      label,\n      text,\n      indicator,\n      indicatorId,\n      buttonId,\n      messages,\n    } = this;\n    const labelFallback = label || text;\n    const ariaLabel = labelFallback\n      ? `${labelFallback}${indicator ? ` (${messages.indicator})` : \"\"}`\n      : \"\";\n\n    const buttonClasses = {\n      [CSS.button]: true,\n      [CSS.buttonTextVisible]: textEnabled,\n      [CSS.buttonCompact]: compact,\n    };\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={disabled}>\n          <button\n            aria-busy={toAriaBoolean(loading)}\n            aria-controls={indicator ? indicatorId : null}\n            aria-disabled={toAriaBoolean(disabled)}\n            aria-label={ariaLabel}\n            aria-pressed={toAriaBoolean(active)}\n            class={buttonClasses}\n            disabled={disabled}\n            id={buttonId}\n            ref={(buttonEl): HTMLButtonElement => (this.buttonEl = buttonEl)}\n          >\n            {this.renderIconContainer()}\n            {this.renderTextContainer()}\n            {!icon && indicator && <div class={CSS.indicatorWithoutIcon} key=\"indicator-no-icon\" />}\n          </button>\n          <slot name={SLOTS.tooltip} onSlotchange={this.handleTooltipSlotChange} />\n          {this.renderIndicatorText()}\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleTooltipSlotChange = (event: Event): void => {\n    const tooltips = (event.target as HTMLSlotElement)\n      .assignedElements({\n        flatten: true,\n      })\n      .filter((el) => el?.matches(\"calcite-tooltip\")) as HTMLCalciteTooltipElement[];\n\n    const tooltip = tooltips[0];\n\n    if (tooltip) {\n      tooltip.referenceElement = this.buttonEl;\n    }\n  };\n}\n"],"version":3}

package/dist/cjs/calcite-alert.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.12.0
+ * v2.13.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdc628de.js');
-const dom = require('./dom-cdce16d7.js');
-const component = require('./component-c5bbc3ae.js');
-const loadable = require('./loadable-8de43def.js');
-const locale = require('./locale-987403a2.js');
-const openCloseComponent = require('./openCloseComponent-8d689ca4.js');
-const t9n = require('./t9n-0ac48eea.js');
-const resources = require('./resources-88de7c68.js');
-require('./guid-a0aaca44.js');
-require('./resources-8a5c46a3.js');
-require('./browser-89880371.js');
-require('./key-5de2d409.js');
-require('./observers-3a410d9c.js');
+const index = require('./index-4fe70fa3.js');
+const dom = require('./dom-1ff7fb61.js');
+const component = require('./component-96607c76.js');
+const loadable = require('./loadable-6f2dfe5f.js');
+const locale = require('./locale-38c1927e.js');
+const openCloseComponent = require('./openCloseComponent-9a39b00a.js');
+const t9n = require('./t9n-ab4fd9b6.js');
+const resources = require('./resources-2042deb0.js');
+require('./guid-47ff9796.js');
+require('./resources-d2d6a16a.js');
+require('./browser-192fd050.js');
+require('./key-c3b3fd7e.js');
+require('./observers-498f2676.js');
 
 const DURATIONS = {
     slow: 14000,

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

@@ -1,17 +1,17 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.0
+ * v2.13.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdc628de.js');
-const dom = require('./dom-cdce16d7.js');
-const utils = require('./utils-88a54038.js');
-require('./guid-a0aaca44.js');
-require('./resources-8a5c46a3.js');
+const index = require('./index-4fe70fa3.js');
+const dom = require('./dom-1ff7fb61.js');
+const utils = require('./utils-71f155f2.js');
+require('./guid-47ff9796.js');
+require('./resources-d2d6a16a.js');
 
 const CSS = {
     thumbnail: "thumbnail",

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

@@ -1,26 +1,26 @@
 /*!
  * 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.12.0
+ * v2.13.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdc628de.js');
-const conditionalSlot = require('./conditionalSlot-4e316663.js');
-const dom = require('./dom-cdce16d7.js');
-const interactive = require('./interactive-9db98a91.js');
-const locale = require('./locale-987403a2.js');
-const t9n = require('./t9n-0ac48eea.js');
-const Heading = require('./Heading-de722eac.js');
-const loadable = require('./loadable-8de43def.js');
-const openCloseComponent = require('./openCloseComponent-8d689ca4.js');
-const key = require('./key-5de2d409.js');
-require('./observers-3a410d9c.js');
-require('./browser-89880371.js');
-require('./guid-a0aaca44.js');
-require('./resources-8a5c46a3.js');
+const index = require('./index-4fe70fa3.js');
+const conditionalSlot = require('./conditionalSlot-f4fb0efd.js');
+const dom = require('./dom-1ff7fb61.js');
+const interactive = require('./interactive-6e051cdc.js');
+const locale = require('./locale-38c1927e.js');
+const t9n = require('./t9n-ab4fd9b6.js');
+const Heading = require('./Heading-c3582328.js');
+const loadable = require('./loadable-6f2dfe5f.js');
+const openCloseComponent = require('./openCloseComponent-9a39b00a.js');
+const key = require('./key-c3b3fd7e.js');
+require('./observers-498f2676.js');
+require('./browser-192fd050.js');
+require('./guid-47ff9796.js');
+require('./resources-d2d6a16a.js');
 
 const IDS$1 = {
     content: "content",
@@ -153,13 +153,11 @@ const Block = class {
     // --------------------------------------------------------------------------
     connectedCallback() {
         conditionalSlot.connectConditionalSlotComponent(this);
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
         this.transitionEl = this.el;
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
         conditionalSlot.disconnectConditionalSlotComponent(this);
@@ -223,14 +221,14 @@ const Block = class {
     render() {
         const { collapsible, el, loading, open, heading, messages, description } = this;
         const toggleLabel = open ? messages.collapse : messages.expand;
-        const headerContent = (index.h("header", { key: '91deb640f5a591cd70dbb6328cdc588a40b600d5', class: { [CSS$1.header]: true, [CSS$1.headerHasText]: !!(heading || description) }, id: IDS$1.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
+        const headerContent = (index.h("header", { key: '85a369767af7638d2f3c6771472a8030cc0ce339', class: { [CSS$1.header]: true, [CSS$1.headerHasText]: !!(heading || description) }, id: IDS$1.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
         const hasControl = !!dom.getSlotted(el, SLOTS.control);
         const hasMenuActions = !!dom.getSlotted(el, SLOTS.headerMenuActions);
         const collapseIcon = open ? ICONS$1.opened : ICONS$1.closed;
-        const headerNode = (index.h("div", { key: 'ebba82b4e065978eaa9ed1e59f05ad80843cc9ab', class: CSS$1.headerContainer }, this.dragHandle ? index.h("calcite-handle", { label: heading }) : null, collapsible ? (index.h("button", { "aria-controls": IDS$1.content, "aria-describedby": IDS$1.header, "aria-expanded": collapsible ? dom.toAriaBoolean(open) : null, class: CSS$1.toggle, id: IDS$1.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, index.h("div", { class: CSS$1.iconEndContainer }, this.renderIcon("end"), index.h("calcite-icon", { class: CSS$1.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (index.h("div", null, headerContent, index.h("div", { class: CSS$1.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (index.h("div", { "aria-labelledby": IDS$1.header, class: CSS$1.controlContainer }, index.h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (index.h("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, index.h("slot", { name: SLOTS.headerMenuActions }))) : null, this.renderActionsEnd()));
-        return (index.h(index.Host, { key: 'b5c12059b36785bf45ce61e7309a35278b928088' }, index.h(interactive.InteractiveContainer, { key: '90a5013ca2e30dadbd76c146700a53391f3aea62', disabled: this.disabled }, index.h("article", { key: '825f15336afb992c7ea8c718b5ffad7c4bf2507e', "aria-busy": dom.toAriaBoolean(loading), class: {
+        const headerNode = (index.h("div", { key: '53d635b3073079b2fe2e88760537fd284d2f3d55', class: CSS$1.headerContainer }, this.dragHandle ? index.h("calcite-handle", { label: heading }) : null, collapsible ? (index.h("button", { "aria-controls": IDS$1.content, "aria-describedby": IDS$1.header, "aria-expanded": collapsible ? dom.toAriaBoolean(open) : null, class: CSS$1.toggle, id: IDS$1.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, index.h("div", { class: CSS$1.iconEndContainer }, this.renderIcon("end"), index.h("calcite-icon", { class: CSS$1.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (index.h("div", null, headerContent, index.h("div", { class: CSS$1.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (index.h("div", { "aria-labelledby": IDS$1.header, class: CSS$1.controlContainer }, index.h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (index.h("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, index.h("slot", { name: SLOTS.headerMenuActions }))) : null, this.renderActionsEnd()));
+        return (index.h(index.Host, { key: 'e7488bae0cd129ce5f3e9094b710fab20c453bf1' }, index.h(interactive.InteractiveContainer, { key: 'a5bb56f7b6febdfbf562a691d4577dd3ca255f18', disabled: this.disabled }, index.h("article", { key: '619214b6ba4dd400aece22715af70d5157f70b60', "aria-busy": dom.toAriaBoolean(loading), class: {
                 [CSS$1.container]: true,
-            } }, headerNode, index.h("section", { key: '4f690563d78615b68a225456aaae593af6adb826', "aria-labelledby": IDS$1.toggle, class: CSS$1.content, hidden: !open, id: IDS$1.content }, this.renderScrim())))));
+            } }, headerNode, index.h("section", { key: '4cb1b995cfc4888b9d03920e10659ee2eb4e7529', "aria-labelledby": IDS$1.toggle, class: CSS$1.content, hidden: !open, id: IDS$1.content }, this.renderScrim())))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

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

@@ -1 +1 @@
-{"file":"calcite-block.calcite-block-section.entry.cjs.js","mappings":"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","names":["IDS","CSS","ICONS","slotChangeHasAssignedElement","onToggleOpenCloseComponent","componentFocusable","focusFirstTabbable","updateMessages","connectConditionalSlotComponent","connectInteractive","connectLocalized","connectMessages","disconnectInteractive","disconnectLocalized","disconnectMessages","disconnectConditionalSlotComponent","setUpMessages","setUpLoadableComponent","setComponentLoaded","updateHostInteraction","h","getSlotted","Heading","toAriaBoolean","Host","InteractiveContainer","isActivationKey"],"sources":["src/components/block/resources.ts","src/components/block/block.scss?tag=calcite-block&encapsulation=shadow","src/components/block/block.tsx","src/components/block-section/resources.ts","src/components/block-section/block-section.scss?tag=calcite-block-section&encapsulation=shadow","src/components/block-section/block-section.tsx"],"sourcesContent":["export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n  header: \"header\",\n};\n\nexport const CSS = {\n  actionsEnd: \"actions-end\",\n  button: \"button\",\n  container: \"container\",\n  content: \"content\",\n  contentStart: \"content-start\",\n  controlContainer: \"control-container\",\n  description: \"description\",\n  header: \"header\",\n  headerContainer: \"header-container\",\n  headerHasText: \"header--has-text\",\n  heading: \"heading\",\n  icon: \"icon\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  iconEndContainer: \"icon-end-container\",\n  invalid: \"invalid\",\n  statusIcon: \"status-icon\",\n  summary: \"summary\",\n  title: \"title\",\n  toggle: \"toggle\",\n  toggleIcon: \"toggle-icon\",\n  valid: \"valid\",\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  contentStart: \"content-start\",\n  control: \"control\",\n  headerMenuActions: \"header-menu-actions\",\n  icon: \"icon\",\n};\n\nexport const ICONS = {\n  opened: \"chevron-up\",\n  closed: \"chevron-down\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\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-block-padding: Specifies the padding of the block `default` slot.\n */\n\n:host {\n  @extend %component-host;\n  @extend %component-spacing;\n  @apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0\n    flex-col border-0 border-b border-solid p-0;\n  flex-basis: auto;\n  transition-duration: var(--calcite-animation-timing);\n}\n\n@include disabled();\n\n@import \"../../assets/styles/animation\";\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply justify-start;\n}\n\n.header--has-text {\n  padding: var(--calcite-spacing-md);\n}\n\n.header,\n.toggle {\n  grid-area: header;\n}\n\n.header-container {\n  @apply grid items-stretch;\n  grid-template: auto / auto 1fr auto auto;\n  grid-template-areas: \"handle header control menu actions-end\";\n  grid-column: header-start / actions-end;\n  grid-row: 1 / 2;\n}\n\n.content-start,\n.icon,\n.icon--start,\n.icon--end {\n  margin-inline-end: var(--calcite-spacing-md);\n}\n\n.icon {\n  & calcite-loader {\n    margin-inline-end: var(--calcite-spacing-xxxs);\n  }\n}\n\n.icon--start,\n.icon--end {\n  @apply text-color-3;\n}\n\n.actions-end {\n  grid-area: actions-end;\n}\n\n.toggle {\n  @apply font-sans\n    focus-base\n    m-0\n    flex\n    cursor-pointer\n    flex-nowrap\n    items-center\n    justify-between\n    border-none\n    p-0;\n\n  text-align: initial;\n  background-color: transparent;\n\n  &:hover {\n    @apply bg-foreground-2;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\ncalcite-loader[inline] {\n  grid-area: control;\n  @apply self-center;\n}\n\ncalcite-handle {\n  grid-area: handle;\n}\n\n.title {\n  @apply m-0;\n}\n\n.header .title .heading {\n  @apply text-n1\n    text-color-2\n    word-break\n    transition-color\n    p-0\n    font-medium\n    leading-tight\n    duration-150\n    ease-in-out;\n}\n\n.description {\n  @apply text-n2-wrap\n    text-color-3\n    word-break\n    mt-0.5\n    p-0;\n}\n\n.icon {\n  @apply flex;\n}\n\n.status-icon.valid {\n  color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n  color: theme(\"colors.danger\");\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.icon-end-container {\n  @apply flex items-center;\n\n  margin-inline-start: auto;\n}\n\n.toggle-icon {\n  @apply text-color-3\n  transition-color\n  self-center\n  justify-self-end\n  duration-150\n  ease-in-out;\n\n  margin-inline-end: var(--calcite-spacing-md);\n}\n\n.toggle:hover .toggle-icon {\n  @apply text-color-1;\n}\n\n.container {\n  @apply flex flex-col h-full relative;\n}\n\n.content {\n  @apply animate-in flex-1 relative min-h-0;\n  padding-block: var(--calcite-block-padding, var(--calcite-spacing-sm));\n  padding-inline: var(--calcite-block-padding, var(--calcite-spacing-md));\n}\n\n.content-start {\n  @apply text-color-3 flex items-center;\n}\n\n.control-container {\n  @apply m-0 flex;\n  grid-area: control;\n}\n\ncalcite-action-menu {\n  grid-area: menu;\n}\n\n.actions-end {\n  @apply flex items-stretch;\n}\n\n:host([open]) {\n  @apply my-2;\n\n  .header .title .heading {\n    @apply text-color-1;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  focusFirstTabbable,\n  getSlotted,\n  toAriaBoolean,\n  slotChangeHasAssignedElement,\n} from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { Status, Position } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { FlipContext } from \"../interfaces\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { CSS, ICONS, IDS, SLOTS } from \"./resources\";\nimport { BlockMessages } from \"./assets/block/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.\n * @slot icon - [Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead.\n * @slot content-start - A slot for adding non-actionable elements before content of the component.\n * @slot control - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n */\n@Component({\n  tag: \"calcite-block\",\n  styleUrl: \"block.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Block\n  implements\n    ConditionalSlotComponent,\n    InteractiveComponent,\n    LocalizedComponent,\n    T9nComponent,\n    LoadableComponent,\n    OpenCloseComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When `true`, displays a drag handle in the header.\n   */\n  @Prop({ reflect: true }) dragHandle = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: IconNameOrString;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: IconNameOrString;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, expands the component and its contents.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n  }\n\n  /**\n   * Displays a status-related indicator icon.\n   *\n   * @deprecated Use `icon-start` instead.\n   */\n  @Prop({ reflect: true }) status: Status;\n\n  /**\n   * A description for the component, which displays below the heading.\n   */\n  @Prop() description: string;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: BlockMessages;\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<BlockMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first tabbable element.\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  onBeforeOpen(): void {\n    this.calciteBlockBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.calciteBlockOpen.emit();\n  }\n\n  onBeforeClose(): void {\n    this.calciteBlockBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.calciteBlockClose.emit();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteBlockElement;\n\n  @State() defaultMessages: BlockMessages;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() hasContentStart = false;\n\n  @State() hasEndActions = false;\n\n  openTransitionProp = \"margin-top\";\n\n  transitionEl: HTMLElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n\n    this.transitionEl = this.el;\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n\n    if (this.open) {\n      onToggleOpenCloseComponent(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockClose: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockOpen: EventEmitter<void>;\n\n  /**\n   * Fires when the component's header is clicked.\n   *\n   * @deprecated Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead.\n   */\n  @Event({ cancelable: false }) calciteBlockToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onHeaderClick = (): void => {\n    this.open = !this.open;\n    this.calciteBlockToggle.emit();\n  };\n\n  private actionsEndSlotChangeHandler = (event: Event): void => {\n    this.hasEndActions = slotChangeHasAssignedElement(event);\n  };\n\n  private handleContentStartSlotChange = (event: Event): void => {\n    this.hasContentStart = slotChangeHasAssignedElement(event);\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderScrim(): VNode[] {\n    const { loading } = this;\n    const defaultSlot = <slot />;\n\n    return [loading ? <calcite-scrim loading={loading} /> : null, defaultSlot];\n  }\n\n  private renderLoaderStatusIcon(): VNode[] {\n    const { loading, messages, status } = this;\n\n    const hasSlottedIcon = !!getSlotted(this.el, SLOTS.icon);\n\n    return loading ? (\n      <div class={CSS.icon} key=\"loader\">\n        <calcite-loader inline label={messages.loading} />\n      </div>\n    ) : status ? (\n      <div class={CSS.icon} key=\"status-icon\">\n        <calcite-icon\n          class={{\n            [CSS.statusIcon]: true,\n            [CSS.valid]: status == \"valid\",\n            [CSS.invalid]: status == \"invalid\",\n          }}\n          icon={ICONS[status]}\n          scale=\"s\"\n        />\n      </div>\n    ) : hasSlottedIcon ? (\n      <div class={CSS.icon} key=\"icon-slot\">\n        <slot key=\"icon-slot\" name={SLOTS.icon} />\n      </div>\n    ) : null;\n  }\n\n  private renderActionsEnd(): VNode {\n    return (\n      <div class={CSS.actionsEnd}>\n        <slot name={SLOTS.actionsEnd} onSlotchange={this.actionsEndSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  private renderContentStart(): VNode {\n    const { hasContentStart } = this;\n    return (\n      <div class={CSS.contentStart} hidden={!hasContentStart}>\n        <slot name={SLOTS.contentStart} onSlotchange={this.handleContentStartSlotChange} />\n      </div>\n    );\n  }\n\n  renderTitle(): VNode {\n    const { heading, headingLevel, description } = this;\n    return heading || description ? (\n      <div class={CSS.title}>\n        <Heading class={CSS.heading} level={headingLevel}>\n          {heading}\n        </Heading>\n        {description ? <div class={CSS.description}>{description}</div> : null}\n      </div>\n    ) : null;\n  }\n\n  private renderIcon(position: Extract<\"start\" | \"end\", Position>): VNode {\n    const { iconFlipRtl } = this;\n\n    const flipRtl =\n      iconFlipRtl === \"both\" || position === \"start\"\n        ? iconFlipRtl === \"start\"\n        : iconFlipRtl === \"end\";\n\n    const iconValue = position === \"start\" ? this.iconStart : this.iconEnd;\n    const iconClass = position === \"start\" ? CSS.iconStart : CSS.iconEnd;\n\n    if (!iconValue) {\n      return undefined;\n    }\n\n    /** Icon scale is not variable as the component does not have a scale property */\n    return (\n      <calcite-icon\n        class={iconClass}\n        flipRtl={flipRtl}\n        icon={iconValue}\n        key={iconValue}\n        scale=\"s\"\n      />\n    );\n  }\n\n  render(): VNode {\n    const { collapsible, el, loading, open, heading, messages, description } = this;\n\n    const toggleLabel = open ? messages.collapse : messages.expand;\n\n    const headerContent = (\n      <header\n        class={{ [CSS.header]: true, [CSS.headerHasText]: !!(heading || description) }}\n        id={IDS.header}\n      >\n        {this.renderIcon(\"start\")}\n        {this.renderContentStart()}\n        {this.renderLoaderStatusIcon()}\n        {this.renderTitle()}\n      </header>\n    );\n\n    const hasControl = !!getSlotted(el, SLOTS.control);\n    const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);\n    const collapseIcon = open ? ICONS.opened : ICONS.closed;\n\n    const headerNode = (\n      <div class={CSS.headerContainer}>\n        {this.dragHandle ? <calcite-handle label={heading} /> : null}\n        {collapsible ? (\n          <button\n            aria-controls={IDS.content}\n            aria-describedby={IDS.header}\n            aria-expanded={collapsible ? toAriaBoolean(open) : null}\n            class={CSS.toggle}\n            id={IDS.toggle}\n            onClick={this.onHeaderClick}\n            title={toggleLabel}\n          >\n            {headerContent}\n            <div class={CSS.iconEndContainer}>\n              {this.renderIcon(\"end\")}\n              <calcite-icon class={CSS.toggleIcon} icon={collapseIcon} scale=\"s\" />\n            </div>\n          </button>\n        ) : this.iconEnd ? (\n          <div>\n            {headerContent}\n            <div class={CSS.iconEndContainer}>{this.renderIcon(\"end\")}</div>\n          </div>\n        ) : (\n          headerContent\n        )}\n        {hasControl ? (\n          <div aria-labelledby={IDS.header} class={CSS.controlContainer}>\n            <slot name={SLOTS.control} />\n          </div>\n        ) : null}\n        {hasMenuActions ? (\n          <calcite-action-menu\n            label={messages.options}\n            overlayPositioning={this.overlayPositioning}\n          >\n            <slot name={SLOTS.headerMenuActions} />\n          </calcite-action-menu>\n        ) : null}\n        {this.renderActionsEnd()}\n      </div>\n    );\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <article\n            aria-busy={toAriaBoolean(loading)}\n            class={{\n              [CSS.container]: true,\n            }}\n          >\n            {headerNode}\n            <section\n              aria-labelledby={IDS.toggle}\n              class={CSS.content}\n              hidden={!open}\n              id={IDS.content}\n            >\n              {this.renderScrim()}\n            </section>\n          </article>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n","export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n};\n\nexport const CSS = {\n  chevronIcon: \"chevron-icon\",\n  content: \"content\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  invalid: \"invalid\",\n  sectionHeader: \"section-header\",\n  sectionHeaderText: \"section-header__text\",\n  statusIcon: \"status-icon\",\n  switch: \"switch\",\n  toggle: \"toggle\",\n  toggleSwitch: \"toggle--switch\",\n  toggleContainer: \"toggle-container\",\n  toggleSwitchContent: \"toggle--switch__content\",\n  toggleSwitchText: \"toggle--switch__text\",\n  valid: \"valid\",\n};\n\nexport const ICONS = {\n  menuOpen: \"chevron-up\",\n  menuClosed: \"chevron-down\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\n} as const;\n",":host {\n  @apply bg-foreground-1 text-n1 box-border block;\n\n  color: var(--calcite-color-text-2);\n}\n\n:host([open]) {\n  @apply border-b-color-3\n    border-0\n    border-b\n    border-solid;\n\n  .toggle {\n    color: var(--calcite-color-text-1);\n\n    &:hover {\n      color: var(--calcite-color-text-1);\n    }\n  }\n\n  .chevron-icon {\n    color: var(--calcite-color-text-3);\n\n    &:hover {\n      color: var(--calcite-color-text-1);\n    }\n  }\n}\n\n:host(:last-child) {\n  @apply border-b-0;\n}\n\n.toggle {\n  @apply font-sans w-full border-0 bg-transparent;\n\n  gap: var(--calcite-spacing-md);\n  color: var(--calcite-color-text-2);\n  font-weight: var(--calcite-font-weight-normal);\n\n  &:hover {\n    color: var(--calcite-color-text-1);\n  }\n}\n\n.toggle--switch,\n.section-header {\n  @apply text-n1\n    focus-base\n    mx-0\n    my-1\n    flex\n    cursor-pointer\n    select-none\n    items-center\n    px-0\n    py-2;\n\n  &:focus {\n    @apply focus-outset;\n  }\n  &:hover {\n    color: var(--calcite-color-text-1);\n  }\n}\n\n.section-header__text {\n  @apply my-0\n    flex-auto;\n\n  text-align: initial;\n  word-wrap: anywhere;\n}\n\n.toggle-container {\n  @apply flex items-center relative bg-transparent;\n  word-break: break-word;\n\n  .toggle--switch__content {\n    @apply flex flex-auto items-center;\n  }\n\n  .icon--end,\n  .icon--start,\n  .chevron-icon {\n    @apply flex items-center;\n\n    color: var(--calcite-color-text-3);\n\n    &:hover {\n      color: var(--calcite-color-text-1);\n    }\n  }\n}\n\n.status-icon {\n  @apply flex items-center;\n}\n\n.status-icon.valid {\n  color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n  color: theme(\"colors.danger\");\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { focusFirstTabbable, toAriaBoolean } from \"../../utils/dom\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { FlipContext, Status } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { BlockSectionMessages } from \"./assets/block-section/t9n\";\nimport { BlockSectionToggleDisplay } from \"./interfaces\";\nimport { CSS, ICONS, IDS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-block-section\",\n  styleUrl: \"block-section.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class BlockSection implements LocalizedComponent, T9nComponent, LoadableComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: IconNameOrString;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: IconNameOrString;\n\n  /**\n   * When `true`, expands the component and its contents.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /**\n   * Displays a status-related indicator icon.\n   *\n   * @deprecated Use `icon-start` instead.\n   */\n  @Prop({ reflect: true }) status: Status;\n\n  /**\n   * The component header text.\n   */\n  @Prop() text: string;\n\n  /**\n   * Specifies how the component's toggle is displayed, where:\n   *\n   * `\"button\"` sets the toggle to a selectable header, and\n   *\n   * `\"switch\"` sets the toggle to a switch.\n   */\n  @Prop({ reflect: true }) toggleDisplay: BlockSectionToggleDisplay = \"button\";\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: BlockSectionMessages;\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<BlockSectionMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first tabbable element.\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteBlockSectionElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: BlockSectionMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the header has been clicked.\n   */\n  @Event({ cancelable: false }) calciteBlockSectionToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleHeaderKeyDown = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      this.toggleSection();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  toggleSection = (): void => {\n    this.open = !this.open;\n    this.calciteBlockSectionToggle.emit();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n  renderStatusIcon(): VNode[] {\n    const { status } = this;\n    const statusIcon = ICONS[status] ?? false;\n    const statusIconClasses = {\n      [CSS.statusIcon]: true,\n      [CSS.valid]: status == \"valid\",\n      [CSS.invalid]: status == \"invalid\",\n    };\n\n    return statusIcon ? (\n      <calcite-icon class={statusIconClasses} icon={statusIcon} scale=\"s\" />\n    ) : null;\n  }\n\n  renderIcon(icon: string): VNode {\n    const { iconFlipRtl } = this;\n\n    if (icon === undefined) {\n      return null;\n    }\n\n    const flipRtlStart = iconFlipRtl === \"both\" || iconFlipRtl === \"start\";\n    const flipRtlEnd = iconFlipRtl === \"both\" || iconFlipRtl === \"end\";\n\n    const isIconStart = icon === this.iconStart;\n\n    /** Icon scale is not variable as the component does not have a scale property */\n    return (\n      <calcite-icon\n        class={isIconStart ? CSS.iconStart : CSS.iconEnd}\n        flipRtl={isIconStart ? flipRtlStart : flipRtlEnd}\n        icon={isIconStart ? this.iconStart : this.iconEnd}\n        key={isIconStart ? this.iconStart : this.iconEnd}\n        scale=\"s\"\n      />\n    );\n  }\n\n  render(): VNode {\n    const { messages, open, text, toggleDisplay } = this;\n    const arrowIcon = open ? ICONS.menuOpen : ICONS.menuClosed;\n\n    const toggleLabel = open ? messages.collapse : messages.expand;\n\n    const headerNode =\n      toggleDisplay === \"switch\" ? (\n        <div\n          class={{\n            [CSS.toggleContainer]: true,\n          }}\n        >\n          <div\n            aria-controls={IDS.content}\n            aria-expanded={toAriaBoolean(open)}\n            class={{\n              [CSS.toggle]: true,\n              [CSS.toggleSwitch]: true,\n            }}\n            id={IDS.toggle}\n            onClick={this.toggleSection}\n            onKeyDown={this.handleHeaderKeyDown}\n            role=\"button\"\n            tabIndex={0}\n            title={toggleLabel}\n          >\n            {this.renderIcon(this.iconStart)}\n            <div class={CSS.toggleSwitchContent}>\n              <span class={CSS.toggleSwitchText}>{text}</span>\n            </div>\n\n            {this.renderIcon(this.iconEnd)}\n            {this.renderStatusIcon()}\n            <calcite-switch checked={open} class={CSS.switch} inert label={toggleLabel} scale=\"s\" />\n          </div>\n        </div>\n      ) : (\n        <div\n          class={{\n            [CSS.toggleContainer]: true,\n          }}\n        >\n          <button\n            aria-controls={IDS.content}\n            aria-expanded={toAriaBoolean(open)}\n            class={{\n              [CSS.sectionHeader]: true,\n              [CSS.toggle]: true,\n            }}\n            id={IDS.toggle}\n            onClick={this.toggleSection}\n          >\n            {this.renderIcon(this.iconStart)}\n            <span class={CSS.sectionHeaderText}>{text}</span>\n            {this.renderIcon(this.iconEnd)}\n            {this.renderStatusIcon()}\n            <calcite-icon class={CSS.chevronIcon} icon={arrowIcon} scale=\"s\" />\n          </button>\n        </div>\n      );\n\n    return (\n      <Host>\n        {headerNode}\n        <section aria-labelledby={IDS.toggle} class={CSS.content} hidden={!open} id={IDS.content}>\n          <slot />\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-block.calcite-block-section.entry.cjs.js","mappings":"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","names":["IDS","CSS","ICONS","slotChangeHasAssignedElement","onToggleOpenCloseComponent","componentFocusable","focusFirstTabbable","updateMessages","connectConditionalSlotComponent","connectLocalized","connectMessages","disconnectLocalized","disconnectMessages","disconnectConditionalSlotComponent","setUpMessages","setUpLoadableComponent","setComponentLoaded","updateHostInteraction","h","getSlotted","Heading","toAriaBoolean","Host","InteractiveContainer","isActivationKey"],"sources":["src/components/block/resources.ts","src/components/block/block.scss?tag=calcite-block&encapsulation=shadow","src/components/block/block.tsx","src/components/block-section/resources.ts","src/components/block-section/block-section.scss?tag=calcite-block-section&encapsulation=shadow","src/components/block-section/block-section.tsx"],"sourcesContent":["export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n  header: \"header\",\n};\n\nexport const CSS = {\n  actionsEnd: \"actions-end\",\n  button: \"button\",\n  container: \"container\",\n  content: \"content\",\n  contentStart: \"content-start\",\n  controlContainer: \"control-container\",\n  description: \"description\",\n  header: \"header\",\n  headerContainer: \"header-container\",\n  headerHasText: \"header--has-text\",\n  heading: \"heading\",\n  icon: \"icon\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  iconEndContainer: \"icon-end-container\",\n  invalid: \"invalid\",\n  statusIcon: \"status-icon\",\n  summary: \"summary\",\n  title: \"title\",\n  toggle: \"toggle\",\n  toggleIcon: \"toggle-icon\",\n  valid: \"valid\",\n};\n\nexport const SLOTS = {\n  actionsEnd: \"actions-end\",\n  contentStart: \"content-start\",\n  control: \"control\",\n  headerMenuActions: \"header-menu-actions\",\n  icon: \"icon\",\n};\n\nexport const ICONS = {\n  opened: \"chevron-up\",\n  closed: \"chevron-down\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\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-block-padding: Specifies the padding of the block `default` slot.\n */\n\n:host {\n  @extend %component-host;\n  @extend %component-spacing;\n  @apply transition-margin ease-cubic border-color-3 flex flex-shrink-0 flex-grow-0\n    flex-col border-0 border-b border-solid p-0;\n  flex-basis: auto;\n  transition-duration: var(--calcite-animation-timing);\n}\n\n@include disabled();\n\n@import \"../../assets/styles/animation\";\n@import \"../../assets/styles/header\";\n\n.header {\n  @apply justify-start;\n}\n\n.header--has-text {\n  padding: var(--calcite-spacing-md);\n}\n\n.header,\n.toggle {\n  grid-area: header;\n}\n\n.header-container {\n  @apply grid items-stretch;\n  grid-template: auto / auto 1fr auto auto;\n  grid-template-areas: \"handle header control menu actions-end\";\n  grid-column: header-start / actions-end;\n  grid-row: 1 / 2;\n}\n\n.content-start,\n.icon,\n.icon--start,\n.icon--end {\n  margin-inline-end: var(--calcite-spacing-md);\n}\n\n.icon {\n  & calcite-loader {\n    margin-inline-end: var(--calcite-spacing-xxxs);\n  }\n}\n\n.icon--start,\n.icon--end {\n  @apply text-color-3;\n}\n\n.actions-end {\n  grid-area: actions-end;\n}\n\n.toggle {\n  @apply font-sans\n    focus-base\n    m-0\n    flex\n    cursor-pointer\n    flex-nowrap\n    items-center\n    justify-between\n    border-none\n    p-0;\n\n  text-align: initial;\n  background-color: transparent;\n\n  &:hover {\n    @apply bg-foreground-2;\n  }\n  &:focus {\n    @apply focus-inset;\n  }\n}\n\ncalcite-loader[inline] {\n  grid-area: control;\n  @apply self-center;\n}\n\ncalcite-handle {\n  grid-area: handle;\n}\n\n.title {\n  @apply m-0;\n}\n\n.header .title .heading {\n  @apply text-n1\n    text-color-2\n    word-break\n    transition-color\n    p-0\n    font-medium\n    leading-tight\n    duration-150\n    ease-in-out;\n}\n\n.description {\n  @apply text-n2-wrap\n    text-color-3\n    word-break\n    mt-0.5\n    p-0;\n}\n\n.icon {\n  @apply flex;\n}\n\n.status-icon.valid {\n  color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n  color: theme(\"colors.danger\");\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.icon-end-container {\n  @apply flex items-center;\n\n  margin-inline-start: auto;\n}\n\n.toggle-icon {\n  @apply text-color-3\n  transition-color\n  self-center\n  justify-self-end\n  duration-150\n  ease-in-out;\n\n  margin-inline-end: var(--calcite-spacing-md);\n}\n\n.toggle:hover .toggle-icon {\n  @apply text-color-1;\n}\n\n.container {\n  @apply flex flex-col h-full relative;\n}\n\n.content {\n  @apply animate-in flex-1 relative min-h-0;\n  padding-block: var(--calcite-block-padding, var(--calcite-spacing-sm));\n  padding-inline: var(--calcite-block-padding, var(--calcite-spacing-md));\n}\n\n.content-start {\n  @apply text-color-3 flex items-center;\n}\n\n.control-container {\n  @apply m-0 flex;\n  grid-area: control;\n}\n\ncalcite-action-menu {\n  grid-area: menu;\n}\n\n.actions-end {\n  @apply flex items-stretch;\n}\n\n:host([open]) {\n  @apply my-2;\n\n  .header .title .heading {\n    @apply text-color-1;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  focusFirstTabbable,\n  getSlotted,\n  toAriaBoolean,\n  slotChangeHasAssignedElement,\n} from \"../../utils/dom\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Heading, HeadingLevel } from \"../functional/Heading\";\nimport { Status, Position } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { onToggleOpenCloseComponent, OpenCloseComponent } from \"../../utils/openCloseComponent\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { FlipContext } from \"../interfaces\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { CSS, ICONS, IDS, SLOTS } from \"./resources\";\nimport { BlockMessages } from \"./assets/block/t9n\";\n\n/**\n * @slot - A slot for adding custom content.\n * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.\n * @slot icon - [Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead.\n * @slot content-start - A slot for adding non-actionable elements before content of the component.\n * @slot control - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead.\n * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.\n */\n@Component({\n  tag: \"calcite-block\",\n  styleUrl: \"block.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Block\n  implements\n    ConditionalSlotComponent,\n    InteractiveComponent,\n    LocalizedComponent,\n    T9nComponent,\n    LoadableComponent,\n    OpenCloseComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is collapsible.\n   */\n  @Prop({ reflect: true }) collapsible = false;\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When `true`, displays a drag handle in the header.\n   */\n  @Prop({ reflect: true }) dragHandle = false;\n\n  /**\n   * The component header text.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.\n   */\n  @Prop({ reflect: true }) headingLevel: HeadingLevel;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: IconNameOrString;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: IconNameOrString;\n\n  /**\n   * When `true`, a busy indicator is displayed.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /**\n   * When `true`, expands the component and its contents.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  @Watch(\"open\")\n  openHandler(): void {\n    onToggleOpenCloseComponent(this);\n  }\n\n  /**\n   * Displays a status-related indicator icon.\n   *\n   * @deprecated Use `icon-start` instead.\n   */\n  @Prop({ reflect: true }) status: Status;\n\n  /**\n   * A description for the component, which displays below the heading.\n   */\n  @Prop() description: string;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: BlockMessages;\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<BlockMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  /**\n   * Determines the type of positioning to use for the overlaid content.\n   *\n   * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n   *\n   * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n   *\n   */\n  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first tabbable element.\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  onBeforeOpen(): void {\n    this.calciteBlockBeforeOpen.emit();\n  }\n\n  onOpen(): void {\n    this.calciteBlockOpen.emit();\n  }\n\n  onBeforeClose(): void {\n    this.calciteBlockBeforeClose.emit();\n  }\n\n  onClose(): void {\n    this.calciteBlockClose.emit();\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteBlockElement;\n\n  @State() defaultMessages: BlockMessages;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() hasContentStart = false;\n\n  @State() hasEndActions = false;\n\n  openTransitionProp = \"margin-top\";\n\n  transitionEl: HTMLElement;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n    connectLocalized(this);\n    connectMessages(this);\n\n    this.transitionEl = this.el;\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n\n    if (this.open) {\n      onToggleOpenCloseComponent(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /** Fires when the component is requested to be closed and before the closing transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeClose: EventEmitter<void>;\n\n  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */\n  @Event({ cancelable: false }) calciteBlockBeforeOpen: EventEmitter<void>;\n\n  /** Fires when the component is closed and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockClose: EventEmitter<void>;\n\n  /** Fires when the component is open and animation is complete. */\n  @Event({ cancelable: false }) calciteBlockOpen: EventEmitter<void>;\n\n  /**\n   * Fires when the component's header is clicked.\n   *\n   * @deprecated Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead.\n   */\n  @Event({ cancelable: false }) calciteBlockToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  onHeaderClick = (): void => {\n    this.open = !this.open;\n    this.calciteBlockToggle.emit();\n  };\n\n  private actionsEndSlotChangeHandler = (event: Event): void => {\n    this.hasEndActions = slotChangeHasAssignedElement(event);\n  };\n\n  private handleContentStartSlotChange = (event: Event): void => {\n    this.hasContentStart = slotChangeHasAssignedElement(event);\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderScrim(): VNode[] {\n    const { loading } = this;\n    const defaultSlot = <slot />;\n\n    return [loading ? <calcite-scrim loading={loading} /> : null, defaultSlot];\n  }\n\n  private renderLoaderStatusIcon(): VNode[] {\n    const { loading, messages, status } = this;\n\n    const hasSlottedIcon = !!getSlotted(this.el, SLOTS.icon);\n\n    return loading ? (\n      <div class={CSS.icon} key=\"loader\">\n        <calcite-loader inline label={messages.loading} />\n      </div>\n    ) : status ? (\n      <div class={CSS.icon} key=\"status-icon\">\n        <calcite-icon\n          class={{\n            [CSS.statusIcon]: true,\n            [CSS.valid]: status == \"valid\",\n            [CSS.invalid]: status == \"invalid\",\n          }}\n          icon={ICONS[status]}\n          scale=\"s\"\n        />\n      </div>\n    ) : hasSlottedIcon ? (\n      <div class={CSS.icon} key=\"icon-slot\">\n        <slot key=\"icon-slot\" name={SLOTS.icon} />\n      </div>\n    ) : null;\n  }\n\n  private renderActionsEnd(): VNode {\n    return (\n      <div class={CSS.actionsEnd}>\n        <slot name={SLOTS.actionsEnd} onSlotchange={this.actionsEndSlotChangeHandler} />\n      </div>\n    );\n  }\n\n  private renderContentStart(): VNode {\n    const { hasContentStart } = this;\n    return (\n      <div class={CSS.contentStart} hidden={!hasContentStart}>\n        <slot name={SLOTS.contentStart} onSlotchange={this.handleContentStartSlotChange} />\n      </div>\n    );\n  }\n\n  renderTitle(): VNode {\n    const { heading, headingLevel, description } = this;\n    return heading || description ? (\n      <div class={CSS.title}>\n        <Heading class={CSS.heading} level={headingLevel}>\n          {heading}\n        </Heading>\n        {description ? <div class={CSS.description}>{description}</div> : null}\n      </div>\n    ) : null;\n  }\n\n  private renderIcon(position: Extract<\"start\" | \"end\", Position>): VNode {\n    const { iconFlipRtl } = this;\n\n    const flipRtl =\n      iconFlipRtl === \"both\" || position === \"start\"\n        ? iconFlipRtl === \"start\"\n        : iconFlipRtl === \"end\";\n\n    const iconValue = position === \"start\" ? this.iconStart : this.iconEnd;\n    const iconClass = position === \"start\" ? CSS.iconStart : CSS.iconEnd;\n\n    if (!iconValue) {\n      return undefined;\n    }\n\n    /** Icon scale is not variable as the component does not have a scale property */\n    return (\n      <calcite-icon\n        class={iconClass}\n        flipRtl={flipRtl}\n        icon={iconValue}\n        key={iconValue}\n        scale=\"s\"\n      />\n    );\n  }\n\n  render(): VNode {\n    const { collapsible, el, loading, open, heading, messages, description } = this;\n\n    const toggleLabel = open ? messages.collapse : messages.expand;\n\n    const headerContent = (\n      <header\n        class={{ [CSS.header]: true, [CSS.headerHasText]: !!(heading || description) }}\n        id={IDS.header}\n      >\n        {this.renderIcon(\"start\")}\n        {this.renderContentStart()}\n        {this.renderLoaderStatusIcon()}\n        {this.renderTitle()}\n      </header>\n    );\n\n    const hasControl = !!getSlotted(el, SLOTS.control);\n    const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);\n    const collapseIcon = open ? ICONS.opened : ICONS.closed;\n\n    const headerNode = (\n      <div class={CSS.headerContainer}>\n        {this.dragHandle ? <calcite-handle label={heading} /> : null}\n        {collapsible ? (\n          <button\n            aria-controls={IDS.content}\n            aria-describedby={IDS.header}\n            aria-expanded={collapsible ? toAriaBoolean(open) : null}\n            class={CSS.toggle}\n            id={IDS.toggle}\n            onClick={this.onHeaderClick}\n            title={toggleLabel}\n          >\n            {headerContent}\n            <div class={CSS.iconEndContainer}>\n              {this.renderIcon(\"end\")}\n              <calcite-icon class={CSS.toggleIcon} icon={collapseIcon} scale=\"s\" />\n            </div>\n          </button>\n        ) : this.iconEnd ? (\n          <div>\n            {headerContent}\n            <div class={CSS.iconEndContainer}>{this.renderIcon(\"end\")}</div>\n          </div>\n        ) : (\n          headerContent\n        )}\n        {hasControl ? (\n          <div aria-labelledby={IDS.header} class={CSS.controlContainer}>\n            <slot name={SLOTS.control} />\n          </div>\n        ) : null}\n        {hasMenuActions ? (\n          <calcite-action-menu\n            label={messages.options}\n            overlayPositioning={this.overlayPositioning}\n          >\n            <slot name={SLOTS.headerMenuActions} />\n          </calcite-action-menu>\n        ) : null}\n        {this.renderActionsEnd()}\n      </div>\n    );\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <article\n            aria-busy={toAriaBoolean(loading)}\n            class={{\n              [CSS.container]: true,\n            }}\n          >\n            {headerNode}\n            <section\n              aria-labelledby={IDS.toggle}\n              class={CSS.content}\n              hidden={!open}\n              id={IDS.content}\n            >\n              {this.renderScrim()}\n            </section>\n          </article>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n","export const IDS = {\n  content: \"content\",\n  toggle: \"toggle\",\n};\n\nexport const CSS = {\n  chevronIcon: \"chevron-icon\",\n  content: \"content\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  invalid: \"invalid\",\n  sectionHeader: \"section-header\",\n  sectionHeaderText: \"section-header__text\",\n  statusIcon: \"status-icon\",\n  switch: \"switch\",\n  toggle: \"toggle\",\n  toggleSwitch: \"toggle--switch\",\n  toggleContainer: \"toggle-container\",\n  toggleSwitchContent: \"toggle--switch__content\",\n  toggleSwitchText: \"toggle--switch__text\",\n  valid: \"valid\",\n};\n\nexport const ICONS = {\n  menuOpen: \"chevron-up\",\n  menuClosed: \"chevron-down\",\n  valid: \"check-circle\",\n  invalid: \"exclamation-mark-triangle\",\n} as const;\n",":host {\n  @apply bg-foreground-1 text-n1 box-border block;\n\n  color: var(--calcite-color-text-2);\n}\n\n:host([open]) {\n  @apply border-b-color-3\n    border-0\n    border-b\n    border-solid;\n\n  .toggle {\n    color: var(--calcite-color-text-1);\n\n    &:hover {\n      color: var(--calcite-color-text-1);\n    }\n  }\n\n  .chevron-icon {\n    color: var(--calcite-color-text-3);\n\n    &:hover {\n      color: var(--calcite-color-text-1);\n    }\n  }\n}\n\n:host(:last-child) {\n  @apply border-b-0;\n}\n\n.toggle {\n  @apply font-sans w-full border-0 bg-transparent;\n\n  gap: var(--calcite-spacing-md);\n  color: var(--calcite-color-text-2);\n  font-weight: var(--calcite-font-weight-normal);\n\n  &:hover {\n    color: var(--calcite-color-text-1);\n  }\n}\n\n.toggle--switch,\n.section-header {\n  @apply text-n1\n    focus-base\n    mx-0\n    my-1\n    flex\n    cursor-pointer\n    select-none\n    items-center\n    px-0\n    py-2;\n\n  &:focus {\n    @apply focus-outset;\n  }\n  &:hover {\n    color: var(--calcite-color-text-1);\n  }\n}\n\n.section-header__text {\n  @apply my-0\n    flex-auto;\n\n  text-align: initial;\n  word-wrap: anywhere;\n}\n\n.toggle-container {\n  @apply flex items-center relative bg-transparent;\n  word-break: break-word;\n\n  .toggle--switch__content {\n    @apply flex flex-auto items-center;\n  }\n\n  .icon--end,\n  .icon--start,\n  .chevron-icon {\n    @apply flex items-center;\n\n    color: var(--calcite-color-text-3);\n\n    &:hover {\n      color: var(--calcite-color-text-1);\n    }\n  }\n}\n\n.status-icon {\n  @apply flex items-center;\n}\n\n.status-icon.valid {\n  color: theme(\"colors.success\");\n}\n\n.status-icon.invalid {\n  color: theme(\"colors.danger\");\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { focusFirstTabbable, toAriaBoolean } from \"../../utils/dom\";\nimport { isActivationKey } from \"../../utils/key\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { FlipContext, Status } from \"../interfaces\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { BlockSectionMessages } from \"./assets/block-section/t9n\";\nimport { BlockSectionToggleDisplay } from \"./interfaces\";\nimport { CSS, ICONS, IDS } from \"./resources\";\n\n/**\n * @slot - A slot for adding custom content.\n */\n@Component({\n  tag: \"calcite-block-section\",\n  styleUrl: \"block-section.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class BlockSection implements LocalizedComponent, T9nComponent, LoadableComponent {\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: IconNameOrString;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: IconNameOrString;\n\n  /**\n   * When `true`, expands the component and its contents.\n   */\n  @Prop({ reflect: true, mutable: true }) open = false;\n\n  /**\n   * Displays a status-related indicator icon.\n   *\n   * @deprecated Use `icon-start` instead.\n   */\n  @Prop({ reflect: true }) status: Status;\n\n  /**\n   * The component header text.\n   */\n  @Prop() text: string;\n\n  /**\n   * Specifies how the component's toggle is displayed, where:\n   *\n   * `\"button\"` sets the toggle to a selectable header, and\n   *\n   * `\"switch\"` sets the toggle to a switch.\n   */\n  @Prop({ reflect: true }) toggleDisplay: BlockSectionToggleDisplay = \"button\";\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: BlockSectionMessages;\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<BlockSectionMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first tabbable element.\n   *\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    focusFirstTabbable(this.el);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteBlockSectionElement;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: BlockSectionMessages;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Fires when the header has been clicked.\n   */\n  @Event({ cancelable: false }) calciteBlockSectionToggle: EventEmitter<void>;\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  handleHeaderKeyDown = (event: KeyboardEvent): void => {\n    if (isActivationKey(event.key)) {\n      this.toggleSection();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  };\n\n  toggleSection = (): void => {\n    this.open = !this.open;\n    this.calciteBlockSectionToggle.emit();\n  };\n\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    setUpLoadableComponent(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n  renderStatusIcon(): VNode[] {\n    const { status } = this;\n    const statusIcon = ICONS[status] ?? false;\n    const statusIconClasses = {\n      [CSS.statusIcon]: true,\n      [CSS.valid]: status == \"valid\",\n      [CSS.invalid]: status == \"invalid\",\n    };\n\n    return statusIcon ? (\n      <calcite-icon class={statusIconClasses} icon={statusIcon} scale=\"s\" />\n    ) : null;\n  }\n\n  renderIcon(icon: string): VNode {\n    const { iconFlipRtl } = this;\n\n    if (icon === undefined) {\n      return null;\n    }\n\n    const flipRtlStart = iconFlipRtl === \"both\" || iconFlipRtl === \"start\";\n    const flipRtlEnd = iconFlipRtl === \"both\" || iconFlipRtl === \"end\";\n\n    const isIconStart = icon === this.iconStart;\n\n    /** Icon scale is not variable as the component does not have a scale property */\n    return (\n      <calcite-icon\n        class={isIconStart ? CSS.iconStart : CSS.iconEnd}\n        flipRtl={isIconStart ? flipRtlStart : flipRtlEnd}\n        icon={isIconStart ? this.iconStart : this.iconEnd}\n        key={isIconStart ? this.iconStart : this.iconEnd}\n        scale=\"s\"\n      />\n    );\n  }\n\n  render(): VNode {\n    const { messages, open, text, toggleDisplay } = this;\n    const arrowIcon = open ? ICONS.menuOpen : ICONS.menuClosed;\n\n    const toggleLabel = open ? messages.collapse : messages.expand;\n\n    const headerNode =\n      toggleDisplay === \"switch\" ? (\n        <div\n          class={{\n            [CSS.toggleContainer]: true,\n          }}\n        >\n          <div\n            aria-controls={IDS.content}\n            aria-expanded={toAriaBoolean(open)}\n            class={{\n              [CSS.toggle]: true,\n              [CSS.toggleSwitch]: true,\n            }}\n            id={IDS.toggle}\n            onClick={this.toggleSection}\n            onKeyDown={this.handleHeaderKeyDown}\n            role=\"button\"\n            tabIndex={0}\n            title={toggleLabel}\n          >\n            {this.renderIcon(this.iconStart)}\n            <div class={CSS.toggleSwitchContent}>\n              <span class={CSS.toggleSwitchText}>{text}</span>\n            </div>\n\n            {this.renderIcon(this.iconEnd)}\n            {this.renderStatusIcon()}\n            <calcite-switch checked={open} class={CSS.switch} inert label={toggleLabel} scale=\"s\" />\n          </div>\n        </div>\n      ) : (\n        <div\n          class={{\n            [CSS.toggleContainer]: true,\n          }}\n        >\n          <button\n            aria-controls={IDS.content}\n            aria-expanded={toAriaBoolean(open)}\n            class={{\n              [CSS.sectionHeader]: true,\n              [CSS.toggle]: true,\n            }}\n            id={IDS.toggle}\n            onClick={this.toggleSection}\n          >\n            {this.renderIcon(this.iconStart)}\n            <span class={CSS.sectionHeaderText}>{text}</span>\n            {this.renderIcon(this.iconEnd)}\n            {this.renderStatusIcon()}\n            <calcite-icon class={CSS.chevronIcon} icon={arrowIcon} scale=\"s\" />\n          </button>\n        </div>\n      );\n\n    return (\n      <Host>\n        {headerNode}\n        <section aria-labelledby={IDS.toggle} class={CSS.content} hidden={!open} id={IDS.content}>\n          <slot />\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,26 +1,26 @@
 /*!
  * 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.12.0
+ * v2.13.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fdc628de.js');
-const form = require('./form-1b8877c5.js');
-const interactive = require('./interactive-9db98a91.js');
-const label = require('./label-37a32e86.js');
-const loadable = require('./loadable-8de43def.js');
-const locale = require('./locale-987403a2.js');
-const observers = require('./observers-3a410d9c.js');
-const component = require('./component-c5bbc3ae.js');
-const t9n = require('./t9n-0ac48eea.js');
-const dom = require('./dom-cdce16d7.js');
-const browser = require('./browser-89880371.js');
-require('./key-5de2d409.js');
-require('./guid-a0aaca44.js');
-require('./resources-8a5c46a3.js');
+const index = require('./index-4fe70fa3.js');
+const form = require('./form-f86aab9b.js');
+const interactive = require('./interactive-6e051cdc.js');
+const label = require('./label-66e041c4.js');
+const loadable = require('./loadable-6f2dfe5f.js');
+const locale = require('./locale-38c1927e.js');
+const observers = require('./observers-498f2676.js');
+const component = require('./component-96607c76.js');
+const t9n = require('./t9n-ab4fd9b6.js');
+const dom = require('./dom-1ff7fb61.js');
+const browser = require('./browser-192fd050.js');
+require('./key-c3b3fd7e.js');
+require('./guid-47ff9796.js');
+require('./resources-d2d6a16a.js');
 
 const CSS = {
     buttonLoader: "calcite-button--loader",
@@ -117,7 +117,6 @@ const Button = class {
     //
     //--------------------------------------------------------------------------
     async connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
         this.setupTextContentObserver();
@@ -126,7 +125,6 @@ const Button = class {
     }
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
-        interactive.disconnectInteractive(this);
         label.disconnectLabel(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
@@ -152,10 +150,10 @@ const Button = class {
         const Tag = childElType;
         const loaderNode = this.loading ? (index.h("div", { class: CSS.buttonLoader }, index.h("calcite-loader", { class: this.loading ? CSS.loadingIn : CSS.loadingOut, inline: true, label: this.messages.loading, scale: this.scale === "l" ? "m" : "s" }))) : null;
         const noStartEndIcons = !this.iconStart && !this.iconEnd;
-        const iconStartEl = (index.h("calcite-icon", { key: '4d22fe0db49aa06f71162b2ef64d4011b1b818d8', class: { [CSS.icon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: component.getIconScale(this.scale) }));
-        const iconEndEl = (index.h("calcite-icon", { key: '95c15bea3179d091058d225e80477956fcb27e63', class: { [CSS.icon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: component.getIconScale(this.scale) }));
-        const contentEl = (index.h("span", { key: '6399f9291ba542a304a2813cda9ad21de0a19c36', class: CSS.content, ref: (el) => (this.contentEl = el) }, index.h("slot", { key: '818ff928ab9c8d722763ec6c1fdbf6b0d60ef210' })));
-        return (index.h(interactive.InteractiveContainer, { key: 'a6799ecea681f5e1929237fd26f91cc6895ae291', disabled: this.disabled }, index.h(Tag, { key: '042f056a472a091f4728127d079089dbb262d572', "aria-disabled": childElType === "a" ? dom.toAriaBoolean(this.disabled || this.loading) : null, "aria-expanded": this.el.getAttribute("aria-expanded"), "aria-label": !this.loading ? label.getLabelText(this) : this.messages.loading, "aria-live": "polite", class: {
+        const iconStartEl = (index.h("calcite-icon", { key: '28bcdb04d4f0918cffdc42f9fe99c6aec734923e', class: { [CSS.icon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: component.getIconScale(this.scale) }));
+        const iconEndEl = (index.h("calcite-icon", { key: '8ce8d2a568f30f405ec3bad699a486de65e1601d', class: { [CSS.icon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: component.getIconScale(this.scale) }));
+        const contentEl = (index.h("span", { key: '7321be35d6f5b8ce6e82ab961796a662aba6336d', class: CSS.content, ref: (el) => (this.contentEl = el) }, index.h("slot", { key: '01d16270c78bb679d6115b0252a3604a18226d4a' })));
+        return (index.h(interactive.InteractiveContainer, { key: 'bb07ba2e81b944e850100cdd21c09bab89005d92', disabled: this.disabled }, index.h(Tag, { key: '995cb928fa0570f41559dde091a6bd792f5d3400', "aria-disabled": childElType === "a" ? dom.toAriaBoolean(this.disabled || this.loading) : null, "aria-expanded": this.el.getAttribute("aria-expanded"), "aria-label": !this.loading ? label.getLabelText(this) : this.messages.loading, "aria-live": "polite", class: {
                 [CSS.buttonPadding]: noStartEndIcons,
                 [CSS.buttonPaddingShrunk]: !noStartEndIcons,
                 [CSS.contentSlotted]: this.hasContent,