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

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

@@ -1 +1 @@
-{"file":"calcite-button.entry.cjs.js","mappings":"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","names":["createObserver","submitForm","resetForm","forceUpdate","connectInteractive","connectLocalized","connectMessages","connectLabel","findAssociatedForm","disconnectInteractive","disconnectLabel","disconnectLocalized","disconnectMessages","setUpLoadableComponent","isBrowser","setUpMessages","setComponentLoaded","updateHostInteraction","h","getIconScale","InteractiveContainer","toAriaBoolean","getLabelText","componentFocusable","updateMessages"],"sources":["src/components/button/resources.ts","src/components/button/button.scss?tag=calcite-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["export const CSS = {\n  buttonLoader: \"calcite-button--loader\",\n  content: \"content\",\n  contentSlotted: \"content--slotted\",\n  icon: \"icon\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  loadingIn: \"loading-in\",\n  loadingOut: \"loading-out\",\n  iconStartEmpty: \"icon-start-empty\",\n  iconEndEmpty: \"icon-end-empty\",\n  buttonPadding: \"button-padding\",\n  buttonPaddingShrunk: \"button-padding--shrunk\",\n};\n",":host {\n  @apply inline-block w-auto align-middle;\n}\n\n// fab variants\n:host([round]) {\n  border-radius: 50px;\n  & a,\n  & button {\n    border-radius: 50px;\n  }\n}\n\n// focus styles\n:host button,\n:host a {\n  @apply focus-base;\n  &:focus {\n    @apply focus-outset;\n  }\n}\n// button base\n:host button,\n:host a {\n  --calcite-button-content-margin-internal: theme(\"margin.2\");\n  --calcite-button-padding-x-internal: 7px;\n  --calcite-button-padding-y-internal: 3px;\n  padding-block: var(--calcite-button-padding-y-internal);\n  padding-inline: var(--calcite-button-padding-x-internal);\n  @apply font-inherit\n    relative\n    box-border\n    flex\n    h-full\n    w-full\n    cursor-pointer\n    select-none\n    appearance-none\n    items-center\n    justify-center\n    rounded-none\n    border-none\n    text-center\n    font-normal\n    no-underline;\n  // include transition from focus\n  transition:\n    color var(--calcite-animation-timing) ease-in-out,\n    background-color var(--calcite-animation-timing) ease-in-out,\n    box-shadow var(--calcite-animation-timing) ease-in-out,\n    outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;\n  &:hover {\n    @apply no-underline;\n  }\n  & span {\n    @apply truncate;\n  }\n}\n\n.content {\n  margin-inline: var(--calcite-button-content-margin-internal);\n}\n\n.icon-start-empty {\n  .content {\n    margin-inline-start: unset;\n  }\n}\n.icon-end-empty {\n  .content {\n    margin-inline-end: unset;\n  }\n}\n\n:host([scale=\"m\"]) {\n  button,\n  a {\n    --calcite-button-content-margin-internal: theme(\"margin.3\");\n  }\n}\n:host([scale=\"l\"]) {\n  button,\n  a {\n    --calcite-button-content-margin-internal: theme(\"margin.4\");\n  }\n}\n\n// button width\n:host([width=\"auto\"]) {\n  @apply w-auto;\n}\n\n:host([width=\"half\"]) {\n  @apply w-2/4;\n}\n\n:host([width=\"full\"]) {\n  @apply w-full;\n}\n\n// alignment\n:host([alignment=\"center\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-center;\n  }\n}\n:host([alignment=\"start\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-start;\n  }\n}\n:host([alignment=\"end\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-end;\n  }\n}\n:host([alignment*=\"space-between\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-between;\n  }\n}\n:host([alignment=\"icon-start-space-between\"]:not([width=\"auto\"])) {\n  .icon--start {\n    margin-inline-end: auto;\n  }\n  a,\n  button {\n    text-align: unset;\n  }\n}\n:host([alignment=\"icon-end-space-between\"]:not([width=\"auto\"])) {\n  .icon--end {\n    margin-inline-start: auto;\n  }\n  a,\n  button {\n    text-align: unset;\n  }\n}\n\n// only two icons\n:host([alignment=\"center\"]) {\n  a:not(.content--slotted),\n  button:not(.content--slotted) {\n    .icon--start + .icon--end {\n      margin-inline-start: var(--calcite-button-content-margin-internal);\n    }\n  }\n}\n\n.icon {\n  @apply relative\n    m-0\n    inline-flex\n    font-normal;\n  line-height: inherit;\n}\n\n@include disabled();\n\n@keyframes loader-in {\n  0% {\n    inline-size: 0;\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  100% {\n    inline-size: 1em;\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes loader-out {\n  0% {\n    inline-size: 1em;\n    opacity: 1;\n    transform: scale(1);\n  }\n  100% {\n    inline-size: 0;\n    opacity: 0;\n    transform: scale(0.5);\n  }\n}\n\n.calcite-button--loader {\n  @apply flex;\n  calcite-loader {\n    @apply m-0;\n  }\n}\n\n:host([loading]) {\n  // center loading spinner when button has text\n  button.content--slotted,\n  a.content--slotted {\n    .calcite-button--loader calcite-loader {\n      margin-inline-end: var(--calcite-button-content-margin-internal);\n    }\n  }\n  // hide icons when loading with no text\n  button:not(.content--slotted),\n  a:not(.content--slotted) {\n    .icon--start,\n    .icon--end {\n      @apply hidden;\n    }\n  }\n}\n\n// button styles\n:host([appearance]) {\n  button,\n  a {\n    @apply border-color-transparent\n      border\n      border-solid;\n  }\n}\n\n:host([kind=\"brand\"]) {\n  button,\n  a {\n    @apply text-color-inverse bg-brand;\n    &:hover,\n    &:focus {\n      @apply bg-brand-hover;\n    }\n    &:active {\n      @apply bg-brand-press;\n    }\n    calcite-loader {\n      @apply text-color-inverse;\n    }\n  }\n}\n:host([kind=\"danger\"]) {\n  button,\n  a {\n    @apply text-color-inverse bg-danger;\n    &:hover,\n    &:focus {\n      @apply bg-danger-hover;\n    }\n    &:active {\n      @apply bg-danger-press;\n    }\n    calcite-loader {\n      @apply text-color-inverse;\n    }\n  }\n}\n:host([kind=\"neutral\"]) {\n  button,\n  a {\n    @apply text-color-1 bg-foreground-3;\n    &:hover,\n    &:focus {\n      @apply bg-foreground-2;\n    }\n    &:active {\n      @apply bg-foreground-1;\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([kind=\"inverse\"]) {\n  button,\n  a {\n    @apply text-color-inverse;\n    background-color: var(--calcite-color-inverse);\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-color-inverse-hover);\n    }\n    &:active {\n      background-color: var(--calcite-color-inverse-press);\n    }\n    calcite-loader {\n      @apply text-color-inverse;\n    }\n  }\n}\n// outline\n:host([appearance=\"outline-fill\"]) {\n  button,\n  a {\n    @apply bg-foreground-1 border border-solid;\n    box-shadow: inset 0 0 0 1px transparent;\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"brand\"]) {\n  button,\n  a {\n    @apply border-color-brand bg-foreground-1;\n    color: theme(\"colors.brand\");\n    &:hover {\n      @apply border-color-brand-hover;\n      color: theme(\"colors.brand-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n    }\n    &:focus {\n      @apply border-color-brand;\n      color: theme(\"colors.brand\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand);\n    }\n    &:active {\n      @apply border-color-brand-press;\n      color: theme(\"colors.brand-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.brand\");\n    }\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"danger\"]) {\n  button,\n  a {\n    @apply border-color-danger bg-foreground-1;\n    color: theme(\"colors.danger\");\n    &:hover {\n      @apply border-color-danger-hover;\n      color: theme(\"colors.danger-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);\n    }\n    &:focus {\n      @apply border-color-danger;\n      color: theme(\"colors.danger\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);\n    }\n    &:active {\n      @apply border-color-danger-press;\n      color: theme(\"colors.danger-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.danger\");\n    }\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"neutral\"]) {\n  button,\n  a {\n    @apply text-color-1 bg-foreground-1;\n    border-color: theme(\"borderColor.color.1\");\n    &:hover {\n      box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);\n    }\n    &:focus {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    &:active {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"inverse\"]) {\n  button,\n  a {\n    @apply text-color-1 bg-foreground-1;\n    border-color: var(--calcite-color-inverse);\n    &:hover {\n      border-color: var(--calcite-color-inverse-hover);\n      box-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);\n    }\n    &:focus {\n      border-color: var(--calcite-color-inverse);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse);\n    }\n    &:active {\n      border-color: var(--calcite-color-inverse-press);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([appearance=\"outline\"]) {\n  button,\n  a {\n    @apply border border-solid bg-transparent;\n    box-shadow: inset 0 0 0 1px transparent;\n  }\n}\n:host([appearance=\"outline\"][kind=\"brand\"]) {\n  button,\n  a {\n    @apply border-color-brand bg-transparent;\n    color: theme(\"colors.brand\");\n    &:hover {\n      @apply border-color-brand-hover;\n      color: theme(\"colors.brand-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n    }\n    &:focus {\n      @apply border-color-brand;\n      color: theme(\"colors.brand\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand);\n    }\n    &:active {\n      @apply border-color-brand-press;\n      color: theme(\"colors.brand-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.brand\");\n    }\n  }\n}\n:host([appearance=\"outline\"][kind=\"danger\"]) {\n  button,\n  a {\n    @apply border-color-danger bg-transparent;\n    color: theme(\"colors.danger\");\n    &:hover {\n      @apply border-color-danger-hover;\n      color: theme(\"colors.danger-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);\n    }\n    &:focus {\n      @apply border-color-danger;\n      color: theme(\"colors.danger\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);\n    }\n    &:active {\n      @apply border-color-danger-press;\n      color: theme(\"colors.danger-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.danger\");\n    }\n  }\n}\n:host([appearance=\"outline\"][kind=\"neutral\"]) {\n  button,\n  a {\n    @apply text-color-1  bg-transparent;\n    border-color: theme(\"borderColor.color.1\");\n    &:hover {\n      box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);\n    }\n    &:focus {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    &:active {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([appearance=\"outline\"][kind=\"inverse\"]) {\n  button,\n  a {\n    @apply text-color-1  bg-transparent;\n    border-color: var(--calcite-color-inverse);\n    &:hover {\n      border-color: var(--calcite-color-inverse-hover);\n      box-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);\n    }\n    &:focus {\n      border-color: var(--calcite-color-inverse);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse);\n    }\n    &:active {\n      border-color: var(--calcite-color-inverse-press);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n\n:host([appearance=\"outline-fill\"][split-child=\"primary\"]) button,\n:host([appearance=\"outline\"][split-child=\"primary\"]) button {\n  border-inline-end-width: 0;\n  border-inline-start-width: theme(\"borderWidth.DEFAULT\");\n}\n\n:host([appearance=\"outline-fill\"][split-child=\"secondary\"]) button,\n:host([appearance=\"outline\"][split-child=\"secondary\"]) button {\n  border-inline-start-width: 0;\n  border-inline-end-width: theme(\"borderWidth.DEFAULT\");\n}\n\n// transparent\n:host([appearance=\"transparent\"]:not(.enable-editing-button)) {\n  button,\n  a {\n    @apply bg-transparent;\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-color-transparent-hover);\n    }\n    &:active {\n      background-color: var(--calcite-color-transparent-press);\n    }\n  }\n}\n:host([appearance=\"transparent\"][kind=\"brand\"]) {\n  button,\n  a {\n    color: theme(\"colors.brand\");\n    &:hover {\n      color: theme(\"colors.brand-hover\");\n    }\n    &:focus {\n      color: theme(\"colors.brand\");\n    }\n    &:active {\n      color: theme(\"colors.brand-press\");\n    }\n    calcite-loader {\n      color: theme(\"colors.brand\");\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"danger\"]) {\n  button,\n  a {\n    color: theme(\"colors.danger\");\n    &:hover {\n      color: theme(\"colors.danger-hover\");\n    }\n    &:focus {\n      color: theme(\"colors.danger\");\n    }\n    &:active {\n      color: theme(\"colors.danger-press\");\n    }\n    calcite-loader {\n      color: theme(\"colors.danger\");\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"neutral\"]:not(.cancel-editing-button)) {\n  button,\n  a,\n  calcite-loader {\n    @apply text-color-1;\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"neutral\"].cancel-editing-button) {\n  button {\n    @apply text-color-3\n      border-t-color-input\n      border-b-color-input\n      border-t\n      border-b;\n    border-block-style: solid;\n\n    &:not(.content--slotted) {\n      --calcite-button-padding-y-internal: 0;\n    }\n\n    &:hover {\n      @apply text-color-1;\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"neutral\"].enable-editing-button) {\n  button {\n    @apply bg-transparent;\n  }\n}\n\n:host(.confirm-changes-button),\n:host(.cancel-editing-button),\n:host(.enable-editing-button) {\n  button {\n    &:focus {\n      outline-offset: -2px; // ensure focus outlines work in Safari\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"inverse\"]) {\n  button,\n  a,\n  calcite-loader {\n    @apply text-color-inverse;\n  }\n}\n\n// generate button scales (scenario: text exists)\n:host([scale=\"s\"]) button.content--slotted,\n:host([scale=\"s\"]) a.content--slotted {\n  @apply text-n2h;\n}\n\n// accommodate for transparent buttons not having borders\n:host([scale=\"s\"][appearance=\"transparent\"]) button.content--slotted,\n:host([scale=\"s\"][appearance=\"transparent\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: theme(\"padding.2\");\n}\n\n:host([scale=\"s\"]) button,\n:host([scale=\"s\"]) a {\n  --calcite-button-padding-y-internal: 3px;\n}\n\n:host([scale=\"m\"]) button.content--slotted,\n:host([scale=\"m\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: 11px;\n  @apply text-n1h;\n}\n\n:host([scale=\"m\"]) button,\n:host([scale=\"m\"]) a {\n  --calcite-button-padding-y-internal: 7px;\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"m\"][appearance=\"transparent\"]) button.content--slotted,\n:host([scale=\"m\"][appearance=\"transparent\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: theme(\"padding.3\");\n}\n\n:host([scale=\"l\"]) button.content--slotted,\n:host([scale=\"l\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: 15px;\n  @apply text-0h;\n}\n\n:host([scale=\"l\"]) {\n  .button-padding {\n    --calcite-button-padding-x-internal: theme(\"padding.4\");\n    --calcite-button-padding-y-internal: 11px;\n  }\n  //shrink the padding if an icon is present to preserve the height\n  .button-padding--shrunk {\n    --calcite-button-padding-y-internal: 9px;\n  }\n}\n\n// generate fab scales (scenario: 1 icon, ie., should be square)\n:host([scale=\"s\"]) button:not(.content--slotted),\n:host([scale=\"s\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding[0.5]\");\n  --calcite-button-padding-y-internal: 3px;\n  @apply text-0h w-6;\n  min-block-size: theme(\"height.6\");\n}\n\n:host([scale=\"m\"]) button:not(.content--slotted),\n:host([scale=\"m\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding[0.5]\");\n  --calcite-button-padding-y-internal: 7px;\n  @apply text-0h w-8;\n  min-block-size: theme(\"height.8\");\n}\n:host([scale=\"l\"]) button:not(.content--slotted),\n:host([scale=\"l\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding[0.5]\");\n  --calcite-button-padding-y-internal: 9px;\n  @apply text-0h w-11;\n  min-block-size: theme(\"height.11\");\n}\n\n:host(:is([scale=\"s\"], [scale=\"m\"], [scale=\"l\"])[width=\"full\"]) {\n  a,\n  button {\n    &:not(.content--slotted) {\n      inline-size: var(--calcite-container-size-content-fluid);\n    }\n  }\n}\n\n// accommodate for transparent buttons not having borders\n:host([scale=\"l\"][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"l\"][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-y-internal: theme(\"padding[2.5]\");\n}\n\n// generate fab scales (scenario: 2 icons, ie., should not be square)\n:host([scale=\"s\"][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=\"s\"][icon-start][icon-end]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: 23px;\n  @apply text-0h h-6;\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"s\"][icon-start][icon-end][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"s\"][icon-start][icon-end][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding.6\");\n}\n:host([scale=\"m\"][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=\"m\"][icon-start][icon-end]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding.8\");\n  @apply text-0h h-8;\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"m\"][icon-start][icon-end][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"m\"][icon-start][icon-end][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: 33px;\n}\n:host([scale=\"l\"][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=\"l\"][icon-start][icon-end]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: 43px;\n  @apply text-0h h-11;\n  // add space between when only 2 icons\n  .icon--start + .icon--end {\n    margin-inline-start: theme(\"margin.4\");\n  }\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"l\"][icon-start][icon-end][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"l\"][icon-start][icon-end][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding.11\");\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  forceUpdate,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { findAssociatedForm, FormOwner, resetForm, submitForm } from \"../../utils/form\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { 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 { Appearance, FlipContext, Kind, Scale, Width } from \"../interfaces\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { isBrowser } from \"../../utils/browser\";\nimport { ButtonMessages } from \"./assets/button/t9n\";\nimport { ButtonAlignment } from \"./interfaces\";\nimport { CSS } from \"./resources\";\n\n/** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */\n/** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */\n\n/** @slot - A slot for adding text. */\n@Component({\n  tag: \"calcite-button\",\n  styleUrl: \"button.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Button\n  implements\n    LabelableComponent,\n    InteractiveComponent,\n    FormOwner,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Global attributes\n  //\n  //--------------------------------------------------------------------------\n\n  @Watch(\"aria-expanded\")\n  handleGlobalAttributesChanged(): void {\n    forceUpdate(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** Specifies the alignment of the component's elements. */\n  @Prop({ reflect: true }) alignment: ButtonAlignment = \"center\";\n\n  /** Specifies the appearance style of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\n    \"outline\" | \"outline-fill\" | \"solid\" | \"transparent\",\n    Appearance\n  > = \"solid\";\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /** Specifies the kind of the component, which will apply to the border and background if applicable. */\n  @Prop({ reflect: true }) kind: Extract<\"brand\" | \"danger\" | \"inverse\" | \"neutral\", Kind> =\n    \"brand\";\n\n  /**  When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:\n   * Without a value, the browser will suggest a filename/extension\n   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download.\n   */\n  @Prop({ reflect: true }) download: string | boolean = false;\n\n  /**\n   * Specifies the URL of the linked resource, which can be set as an absolute or relative path.\n   */\n  @Prop({ reflect: true }) href: string;\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 and interaction is disabled.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Specifies the name of the component on form submission. */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Defines the relationship between the `href` value and the current document.\n   *\n   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  @Prop({ reflect: true }) rel: string;\n\n  /** When `true`, adds a round style to the component. */\n  @Prop({ reflect: true }) round = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies if the component is a child of a `calcite-split-button`. */\n  @Prop({ reflect: true }) splitChild: \"primary\" | \"secondary\" | false = false;\n\n  /**\n   * Specifies where to open the linked document defined in the `href` property.\n   *\n   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)\n   */\n  @Prop({ reflect: true }) target: string;\n\n  /**\n   * Specifies the default behavior of the component.\n   *\n   * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)\n   */\n  @Prop({ reflect: true }) type = \"button\";\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) width: Width = \"auto\";\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: ButtonMessages;\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<ButtonMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /** referred in t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async connectedCallback(): Promise<void> {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.setupTextContentObserver();\n    connectLabel(this);\n    this.formEl = findAssociatedForm(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.resizeObserver?.disconnect();\n    this.formEl = null;\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (isBrowser()) {\n      this.updateHasContent();\n      await setUpMessages(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    this.setTooltipText();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  render(): VNode {\n    const childElType = this.href ? \"a\" : \"button\";\n    const Tag = childElType;\n    const loaderNode = this.loading ? (\n      <div class={CSS.buttonLoader}>\n        <calcite-loader\n          class={this.loading ? CSS.loadingIn : CSS.loadingOut}\n          inline\n          label={this.messages.loading}\n          scale={this.scale === \"l\" ? \"m\" : \"s\"}\n        />\n      </div>\n    ) : null;\n    const noStartEndIcons = !this.iconStart && !this.iconEnd;\n\n    const iconStartEl = (\n      <calcite-icon\n        class={{ [CSS.icon]: true, [CSS.iconStart]: true }}\n        flipRtl={this.iconFlipRtl === \"start\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    const iconEndEl = (\n      <calcite-icon\n        class={{ [CSS.icon]: true, [CSS.iconEnd]: true }}\n        flipRtl={this.iconFlipRtl === \"end\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconEnd}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    const contentEl = (\n      <span class={CSS.content} ref={(el) => (this.contentEl = el)}>\n        <slot />\n      </span>\n    );\n\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        <Tag\n          aria-disabled={childElType === \"a\" ? toAriaBoolean(this.disabled || this.loading) : null}\n          aria-expanded={this.el.getAttribute(\"aria-expanded\")}\n          aria-label={!this.loading ? getLabelText(this) : this.messages.loading}\n          aria-live=\"polite\"\n          class={{\n            [CSS.buttonPadding]: noStartEndIcons,\n            [CSS.buttonPaddingShrunk]: !noStartEndIcons,\n            [CSS.contentSlotted]: this.hasContent,\n            [CSS.iconStartEmpty]: !this.iconStart,\n            [CSS.iconEndEmpty]: !this.iconEnd,\n          }}\n          disabled={childElType === \"button\" ? this.disabled || this.loading : null}\n          download={\n            childElType === \"a\" && (this.download === \"\" || this.download) ? this.download : null\n          }\n          href={childElType === \"a\" && this.href}\n          name={childElType === \"button\" && this.name}\n          onClick={this.handleClick}\n          ref={this.setChildEl}\n          rel={childElType === \"a\" && this.rel}\n          tabIndex={this.disabled ? -1 : null}\n          target={childElType === \"a\" && this.target}\n          title={this.tooltipText}\n          type={childElType === \"button\" && this.type}\n        >\n          {loaderNode}\n          {this.iconStart ? iconStartEl : null}\n          {this.hasContent ? contentEl : null}\n          {this.iconEnd ? iconEndEl : null}\n        </Tag>\n      </InteractiveContainer>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.childEl?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteButtonElement;\n\n  formEl: HTMLFormElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  /** watches for changing text content */\n  private mutationObserver = createObserver(\"mutation\", () => this.updateHasContent());\n\n  /** the rendered child element */\n  private childEl?: HTMLElement;\n\n  /** determine if there is slotted content for styling purposes */\n  @State() private hasContent = false;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ButtonMessages;\n\n  private updateHasContent() {\n    const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;\n    this.hasContent =\n      this.el.childNodes.length === 1 && this.el.childNodes[0]?.nodeName === \"#text\"\n        ? this.el.textContent?.trim().length > 0\n        : slottedContent;\n  }\n\n  private setupTextContentObserver() {\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  /** keeps track of the tooltipText */\n  @State() tooltipText: string;\n\n  /** keep track of the rendered contentEl */\n  private contentEl: HTMLSpanElement;\n\n  resizeObserver = createObserver(\"resize\", () => this.setTooltipText());\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onLabelClick(): void {\n    this.handleClick();\n    this.setFocus();\n  }\n\n  // act on a requested or nearby form based on type\n  private handleClick = (): void => {\n    const { type } = this;\n\n    if (this.href) {\n      return;\n    }\n\n    // this.type refers to type attribute, not child element type\n    if (type === \"submit\") {\n      submitForm(this);\n    } else if (type === \"reset\") {\n      resetForm(this);\n    }\n  };\n\n  private setTooltipText = (): void => {\n    const { contentEl } = this;\n    if (contentEl) {\n      this.tooltipText =\n        contentEl.offsetWidth < contentEl.scrollWidth ? this.el.innerText || null : null;\n    }\n  };\n\n  private setChildEl = (el: HTMLElement): void => {\n    this.childEl = el;\n\n    if (el) {\n      this.resizeObserver?.observe(el);\n    }\n  };\n}\n"],"version":3}
+{"file":"calcite-button.entry.cjs.js","mappings":"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","names":["createObserver","submitForm","resetForm","forceUpdate","connectLocalized","connectMessages","connectLabel","findAssociatedForm","disconnectLabel","disconnectLocalized","disconnectMessages","setUpLoadableComponent","isBrowser","setUpMessages","setComponentLoaded","updateHostInteraction","h","getIconScale","InteractiveContainer","toAriaBoolean","getLabelText","componentFocusable","updateMessages"],"sources":["src/components/button/resources.ts","src/components/button/button.scss?tag=calcite-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["export const CSS = {\n  buttonLoader: \"calcite-button--loader\",\n  content: \"content\",\n  contentSlotted: \"content--slotted\",\n  icon: \"icon\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  loadingIn: \"loading-in\",\n  loadingOut: \"loading-out\",\n  iconStartEmpty: \"icon-start-empty\",\n  iconEndEmpty: \"icon-end-empty\",\n  buttonPadding: \"button-padding\",\n  buttonPaddingShrunk: \"button-padding--shrunk\",\n};\n",":host {\n  @apply inline-block w-auto align-middle;\n}\n\n// fab variants\n:host([round]) {\n  border-radius: 50px;\n  & a,\n  & button {\n    border-radius: 50px;\n  }\n}\n\n// focus styles\n:host button,\n:host a {\n  @apply focus-base;\n  &:focus {\n    @apply focus-outset;\n  }\n}\n// button base\n:host button,\n:host a {\n  --calcite-button-content-margin-internal: theme(\"margin.2\");\n  --calcite-button-padding-x-internal: 7px;\n  --calcite-button-padding-y-internal: 3px;\n  padding-block: var(--calcite-button-padding-y-internal);\n  padding-inline: var(--calcite-button-padding-x-internal);\n  @apply font-inherit\n    relative\n    box-border\n    flex\n    h-full\n    w-full\n    cursor-pointer\n    select-none\n    appearance-none\n    items-center\n    justify-center\n    rounded-none\n    border-none\n    text-center\n    font-normal\n    no-underline;\n  // include transition from focus\n  transition:\n    color var(--calcite-animation-timing) ease-in-out,\n    background-color var(--calcite-animation-timing) ease-in-out,\n    box-shadow var(--calcite-animation-timing) ease-in-out,\n    outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;\n  &:hover {\n    @apply no-underline;\n  }\n  & span {\n    @apply truncate;\n  }\n}\n\n.content {\n  margin-inline: var(--calcite-button-content-margin-internal);\n}\n\n.icon-start-empty {\n  .content {\n    margin-inline-start: unset;\n  }\n}\n.icon-end-empty {\n  .content {\n    margin-inline-end: unset;\n  }\n}\n\n:host([scale=\"m\"]) {\n  button,\n  a {\n    --calcite-button-content-margin-internal: theme(\"margin.3\");\n  }\n}\n:host([scale=\"l\"]) {\n  button,\n  a {\n    --calcite-button-content-margin-internal: theme(\"margin.4\");\n  }\n}\n\n// button width\n:host([width=\"auto\"]) {\n  @apply w-auto;\n}\n\n:host([width=\"half\"]) {\n  @apply w-2/4;\n}\n\n:host([width=\"full\"]) {\n  @apply w-full;\n}\n\n// alignment\n:host([alignment=\"center\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-center;\n  }\n}\n:host([alignment=\"start\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-start;\n  }\n}\n:host([alignment=\"end\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-end;\n  }\n}\n:host([alignment*=\"space-between\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-between;\n  }\n}\n:host([alignment=\"icon-start-space-between\"]:not([width=\"auto\"])) {\n  .icon--start {\n    margin-inline-end: auto;\n  }\n  a,\n  button {\n    text-align: unset;\n  }\n}\n:host([alignment=\"icon-end-space-between\"]:not([width=\"auto\"])) {\n  .icon--end {\n    margin-inline-start: auto;\n  }\n  a,\n  button {\n    text-align: unset;\n  }\n}\n\n// only two icons\n:host([alignment=\"center\"]) {\n  a:not(.content--slotted),\n  button:not(.content--slotted) {\n    .icon--start + .icon--end {\n      margin-inline-start: var(--calcite-button-content-margin-internal);\n    }\n  }\n}\n\n.icon {\n  @apply relative\n    m-0\n    inline-flex\n    font-normal;\n  line-height: inherit;\n}\n\n@include disabled();\n\n@keyframes loader-in {\n  0% {\n    inline-size: 0;\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  100% {\n    inline-size: 1em;\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes loader-out {\n  0% {\n    inline-size: 1em;\n    opacity: 1;\n    transform: scale(1);\n  }\n  100% {\n    inline-size: 0;\n    opacity: 0;\n    transform: scale(0.5);\n  }\n}\n\n.calcite-button--loader {\n  @apply flex;\n  calcite-loader {\n    @apply m-0;\n  }\n}\n\n:host([loading]) {\n  // center loading spinner when button has text\n  button.content--slotted,\n  a.content--slotted {\n    .calcite-button--loader calcite-loader {\n      margin-inline-end: var(--calcite-button-content-margin-internal);\n    }\n  }\n  // hide icons when loading with no text\n  button:not(.content--slotted),\n  a:not(.content--slotted) {\n    .icon--start,\n    .icon--end {\n      @apply hidden;\n    }\n  }\n}\n\n// button styles\n:host([appearance]) {\n  button,\n  a {\n    @apply border-color-transparent\n      border\n      border-solid;\n  }\n}\n\n:host([kind=\"brand\"]) {\n  button,\n  a {\n    @apply text-color-inverse bg-brand;\n    &:hover,\n    &:focus {\n      @apply bg-brand-hover;\n    }\n    &:active {\n      @apply bg-brand-press;\n    }\n    calcite-loader {\n      @apply text-color-inverse;\n    }\n  }\n}\n:host([kind=\"danger\"]) {\n  button,\n  a {\n    @apply text-color-inverse bg-danger;\n    &:hover,\n    &:focus {\n      @apply bg-danger-hover;\n    }\n    &:active {\n      @apply bg-danger-press;\n    }\n    calcite-loader {\n      @apply text-color-inverse;\n    }\n  }\n}\n:host([kind=\"neutral\"]) {\n  button,\n  a {\n    @apply text-color-1 bg-foreground-3;\n    &:hover,\n    &:focus {\n      @apply bg-foreground-2;\n    }\n    &:active {\n      @apply bg-foreground-1;\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([kind=\"inverse\"]) {\n  button,\n  a {\n    @apply text-color-inverse;\n    background-color: var(--calcite-color-inverse);\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-color-inverse-hover);\n    }\n    &:active {\n      background-color: var(--calcite-color-inverse-press);\n    }\n    calcite-loader {\n      @apply text-color-inverse;\n    }\n  }\n}\n// outline\n:host([appearance=\"outline-fill\"]) {\n  button,\n  a {\n    @apply bg-foreground-1 border border-solid;\n    box-shadow: inset 0 0 0 1px transparent;\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"brand\"]) {\n  button,\n  a {\n    @apply border-color-brand bg-foreground-1;\n    color: theme(\"colors.brand\");\n    &:hover {\n      @apply border-color-brand-hover;\n      color: theme(\"colors.brand-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n    }\n    &:focus {\n      @apply border-color-brand;\n      color: theme(\"colors.brand\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand);\n    }\n    &:active {\n      @apply border-color-brand-press;\n      color: theme(\"colors.brand-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.brand\");\n    }\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"danger\"]) {\n  button,\n  a {\n    @apply border-color-danger bg-foreground-1;\n    color: theme(\"colors.danger\");\n    &:hover {\n      @apply border-color-danger-hover;\n      color: theme(\"colors.danger-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);\n    }\n    &:focus {\n      @apply border-color-danger;\n      color: theme(\"colors.danger\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);\n    }\n    &:active {\n      @apply border-color-danger-press;\n      color: theme(\"colors.danger-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.danger\");\n    }\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"neutral\"]) {\n  button,\n  a {\n    @apply text-color-1 bg-foreground-1;\n    border-color: theme(\"borderColor.color.1\");\n    &:hover {\n      box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);\n    }\n    &:focus {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    &:active {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"inverse\"]) {\n  button,\n  a {\n    @apply text-color-1 bg-foreground-1;\n    border-color: var(--calcite-color-inverse);\n    &:hover {\n      border-color: var(--calcite-color-inverse-hover);\n      box-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);\n    }\n    &:focus {\n      border-color: var(--calcite-color-inverse);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse);\n    }\n    &:active {\n      border-color: var(--calcite-color-inverse-press);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([appearance=\"outline\"]) {\n  button,\n  a {\n    @apply border border-solid bg-transparent;\n    box-shadow: inset 0 0 0 1px transparent;\n  }\n}\n:host([appearance=\"outline\"][kind=\"brand\"]) {\n  button,\n  a {\n    @apply border-color-brand bg-transparent;\n    color: theme(\"colors.brand\");\n    &:hover {\n      @apply border-color-brand-hover;\n      color: theme(\"colors.brand-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n    }\n    &:focus {\n      @apply border-color-brand;\n      color: theme(\"colors.brand\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand);\n    }\n    &:active {\n      @apply border-color-brand-press;\n      color: theme(\"colors.brand-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.brand\");\n    }\n  }\n}\n:host([appearance=\"outline\"][kind=\"danger\"]) {\n  button,\n  a {\n    @apply border-color-danger bg-transparent;\n    color: theme(\"colors.danger\");\n    &:hover {\n      @apply border-color-danger-hover;\n      color: theme(\"colors.danger-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);\n    }\n    &:focus {\n      @apply border-color-danger;\n      color: theme(\"colors.danger\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);\n    }\n    &:active {\n      @apply border-color-danger-press;\n      color: theme(\"colors.danger-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.danger\");\n    }\n  }\n}\n:host([appearance=\"outline\"][kind=\"neutral\"]) {\n  button,\n  a {\n    @apply text-color-1  bg-transparent;\n    border-color: theme(\"borderColor.color.1\");\n    &:hover {\n      box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);\n    }\n    &:focus {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    &:active {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([appearance=\"outline\"][kind=\"inverse\"]) {\n  button,\n  a {\n    @apply text-color-1  bg-transparent;\n    border-color: var(--calcite-color-inverse);\n    &:hover {\n      border-color: var(--calcite-color-inverse-hover);\n      box-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);\n    }\n    &:focus {\n      border-color: var(--calcite-color-inverse);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse);\n    }\n    &:active {\n      border-color: var(--calcite-color-inverse-press);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n\n:host([appearance=\"outline-fill\"][split-child=\"primary\"]) button,\n:host([appearance=\"outline\"][split-child=\"primary\"]) button {\n  border-inline-end-width: 0;\n  border-inline-start-width: theme(\"borderWidth.DEFAULT\");\n}\n\n:host([appearance=\"outline-fill\"][split-child=\"secondary\"]) button,\n:host([appearance=\"outline\"][split-child=\"secondary\"]) button {\n  border-inline-start-width: 0;\n  border-inline-end-width: theme(\"borderWidth.DEFAULT\");\n}\n\n// transparent\n:host([appearance=\"transparent\"]:not(.enable-editing-button)) {\n  button,\n  a {\n    @apply bg-transparent;\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-color-transparent-hover);\n    }\n    &:active {\n      background-color: var(--calcite-color-transparent-press);\n    }\n  }\n}\n:host([appearance=\"transparent\"][kind=\"brand\"]) {\n  button,\n  a {\n    color: theme(\"colors.brand\");\n    &:hover {\n      color: theme(\"colors.brand-hover\");\n    }\n    &:focus {\n      color: theme(\"colors.brand\");\n    }\n    &:active {\n      color: theme(\"colors.brand-press\");\n    }\n    calcite-loader {\n      color: theme(\"colors.brand\");\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"danger\"]) {\n  button,\n  a {\n    color: theme(\"colors.danger\");\n    &:hover {\n      color: theme(\"colors.danger-hover\");\n    }\n    &:focus {\n      color: theme(\"colors.danger\");\n    }\n    &:active {\n      color: theme(\"colors.danger-press\");\n    }\n    calcite-loader {\n      color: theme(\"colors.danger\");\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"neutral\"]:not(.cancel-editing-button)) {\n  button,\n  a,\n  calcite-loader {\n    @apply text-color-1;\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"neutral\"].cancel-editing-button) {\n  button {\n    @apply text-color-3\n      border-t-color-input\n      border-b-color-input\n      border-t\n      border-b;\n    border-block-style: solid;\n\n    &:not(.content--slotted) {\n      --calcite-button-padding-y-internal: 0;\n    }\n\n    &:hover {\n      @apply text-color-1;\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"neutral\"].enable-editing-button) {\n  button {\n    @apply bg-transparent;\n  }\n}\n\n:host(.confirm-changes-button),\n:host(.cancel-editing-button),\n:host(.enable-editing-button) {\n  button {\n    &:focus {\n      outline-offset: -2px; // ensure focus outlines work in Safari\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"inverse\"]) {\n  button,\n  a,\n  calcite-loader {\n    @apply text-color-inverse;\n  }\n}\n\n// generate button scales (scenario: text exists)\n:host([scale=\"s\"]) button.content--slotted,\n:host([scale=\"s\"]) a.content--slotted {\n  @apply text-n2h;\n}\n\n// accommodate for transparent buttons not having borders\n:host([scale=\"s\"][appearance=\"transparent\"]) button.content--slotted,\n:host([scale=\"s\"][appearance=\"transparent\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: theme(\"padding.2\");\n}\n\n:host([scale=\"s\"]) button,\n:host([scale=\"s\"]) a {\n  --calcite-button-padding-y-internal: 3px;\n}\n\n:host([scale=\"m\"]) button.content--slotted,\n:host([scale=\"m\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: 11px;\n  @apply text-n1h;\n}\n\n:host([scale=\"m\"]) button,\n:host([scale=\"m\"]) a {\n  --calcite-button-padding-y-internal: 7px;\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"m\"][appearance=\"transparent\"]) button.content--slotted,\n:host([scale=\"m\"][appearance=\"transparent\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: theme(\"padding.3\");\n}\n\n:host([scale=\"l\"]) button.content--slotted,\n:host([scale=\"l\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: 15px;\n  @apply text-0h;\n}\n\n:host([scale=\"l\"]) {\n  .button-padding {\n    --calcite-button-padding-x-internal: theme(\"padding.4\");\n    --calcite-button-padding-y-internal: 11px;\n  }\n  //shrink the padding if an icon is present to preserve the height\n  .button-padding--shrunk {\n    --calcite-button-padding-y-internal: 9px;\n  }\n}\n\n// generate fab scales (scenario: 1 icon, ie., should be square)\n:host([scale=\"s\"]) button:not(.content--slotted),\n:host([scale=\"s\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding[0.5]\");\n  --calcite-button-padding-y-internal: 3px;\n  @apply text-0h w-6;\n  min-block-size: theme(\"height.6\");\n}\n\n:host([scale=\"m\"]) button:not(.content--slotted),\n:host([scale=\"m\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding[0.5]\");\n  --calcite-button-padding-y-internal: 7px;\n  @apply text-0h w-8;\n  min-block-size: theme(\"height.8\");\n}\n:host([scale=\"l\"]) button:not(.content--slotted),\n:host([scale=\"l\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding[0.5]\");\n  --calcite-button-padding-y-internal: 9px;\n  @apply text-0h w-11;\n  min-block-size: theme(\"height.11\");\n}\n\n:host(:is([scale=\"s\"], [scale=\"m\"], [scale=\"l\"])[width=\"full\"]) {\n  a,\n  button {\n    &:not(.content--slotted) {\n      inline-size: var(--calcite-container-size-content-fluid);\n    }\n  }\n}\n\n// accommodate for transparent buttons not having borders\n:host([scale=\"l\"][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"l\"][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-y-internal: theme(\"padding[2.5]\");\n}\n\n// generate fab scales (scenario: 2 icons, ie., should not be square)\n:host([scale=\"s\"][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=\"s\"][icon-start][icon-end]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: 23px;\n  @apply text-0h h-6;\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"s\"][icon-start][icon-end][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"s\"][icon-start][icon-end][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding.6\");\n}\n:host([scale=\"m\"][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=\"m\"][icon-start][icon-end]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding.8\");\n  @apply text-0h h-8;\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"m\"][icon-start][icon-end][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"m\"][icon-start][icon-end][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: 33px;\n}\n:host([scale=\"l\"][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=\"l\"][icon-start][icon-end]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: 43px;\n  @apply text-0h h-11;\n  // add space between when only 2 icons\n  .icon--start + .icon--end {\n    margin-inline-start: theme(\"margin.4\");\n  }\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"l\"][icon-start][icon-end][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"l\"][icon-start][icon-end][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding.11\");\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  forceUpdate,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { findAssociatedForm, FormOwner, resetForm, submitForm } from \"../../utils/form\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { 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 { Appearance, FlipContext, Kind, Scale, Width } from \"../interfaces\";\nimport { toAriaBoolean } from \"../../utils/dom\";\nimport { IconNameOrString } from \"../icon/interfaces\";\nimport { isBrowser } from \"../../utils/browser\";\nimport { ButtonMessages } from \"./assets/button/t9n\";\nimport { ButtonAlignment } from \"./interfaces\";\nimport { CSS } from \"./resources\";\n\n/** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */\n/** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */\n\n/** @slot - A slot for adding text. */\n@Component({\n  tag: \"calcite-button\",\n  styleUrl: \"button.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Button\n  implements\n    LabelableComponent,\n    InteractiveComponent,\n    FormOwner,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Global attributes\n  //\n  //--------------------------------------------------------------------------\n\n  @Watch(\"aria-expanded\")\n  handleGlobalAttributesChanged(): void {\n    forceUpdate(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** Specifies the alignment of the component's elements. */\n  @Prop({ reflect: true }) alignment: ButtonAlignment = \"center\";\n\n  /** Specifies the appearance style of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\n    \"outline\" | \"outline-fill\" | \"solid\" | \"transparent\",\n    Appearance\n  > = \"solid\";\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /** Specifies the kind of the component, which will apply to the border and background if applicable. */\n  @Prop({ reflect: true }) kind: Extract<\"brand\" | \"danger\" | \"inverse\" | \"neutral\", Kind> =\n    \"brand\";\n\n  /**  When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:\n   * Without a value, the browser will suggest a filename/extension\n   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download.\n   */\n  @Prop({ reflect: true }) download: string | boolean = false;\n\n  /**\n   * Specifies the URL of the linked resource, which can be set as an absolute or relative path.\n   */\n  @Prop({ reflect: true }) href: string;\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 and interaction is disabled.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Specifies the name of the component on form submission. */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Defines the relationship between the `href` value and the current document.\n   *\n   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  @Prop({ reflect: true }) rel: string;\n\n  /** When `true`, adds a round style to the component. */\n  @Prop({ reflect: true }) round = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies if the component is a child of a `calcite-split-button`. */\n  @Prop({ reflect: true }) splitChild: \"primary\" | \"secondary\" | false = false;\n\n  /**\n   * Specifies where to open the linked document defined in the `href` property.\n   *\n   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)\n   */\n  @Prop({ reflect: true }) target: string;\n\n  /**\n   * Specifies the default behavior of the component.\n   *\n   * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)\n   */\n  @Prop({ reflect: true }) type = \"button\";\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) width: Width = \"auto\";\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: ButtonMessages;\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<ButtonMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /** referred in t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async connectedCallback(): Promise<void> {\n    connectLocalized(this);\n    connectMessages(this);\n    this.setupTextContentObserver();\n    connectLabel(this);\n    this.formEl = findAssociatedForm(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    disconnectLabel(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.resizeObserver?.disconnect();\n    this.formEl = null;\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (isBrowser()) {\n      this.updateHasContent();\n      await setUpMessages(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    this.setTooltipText();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  render(): VNode {\n    const childElType = this.href ? \"a\" : \"button\";\n    const Tag = childElType;\n    const loaderNode = this.loading ? (\n      <div class={CSS.buttonLoader}>\n        <calcite-loader\n          class={this.loading ? CSS.loadingIn : CSS.loadingOut}\n          inline\n          label={this.messages.loading}\n          scale={this.scale === \"l\" ? \"m\" : \"s\"}\n        />\n      </div>\n    ) : null;\n    const noStartEndIcons = !this.iconStart && !this.iconEnd;\n\n    const iconStartEl = (\n      <calcite-icon\n        class={{ [CSS.icon]: true, [CSS.iconStart]: true }}\n        flipRtl={this.iconFlipRtl === \"start\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    const iconEndEl = (\n      <calcite-icon\n        class={{ [CSS.icon]: true, [CSS.iconEnd]: true }}\n        flipRtl={this.iconFlipRtl === \"end\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconEnd}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    const contentEl = (\n      <span class={CSS.content} ref={(el) => (this.contentEl = el)}>\n        <slot />\n      </span>\n    );\n\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        <Tag\n          aria-disabled={childElType === \"a\" ? toAriaBoolean(this.disabled || this.loading) : null}\n          aria-expanded={this.el.getAttribute(\"aria-expanded\")}\n          aria-label={!this.loading ? getLabelText(this) : this.messages.loading}\n          aria-live=\"polite\"\n          class={{\n            [CSS.buttonPadding]: noStartEndIcons,\n            [CSS.buttonPaddingShrunk]: !noStartEndIcons,\n            [CSS.contentSlotted]: this.hasContent,\n            [CSS.iconStartEmpty]: !this.iconStart,\n            [CSS.iconEndEmpty]: !this.iconEnd,\n          }}\n          disabled={childElType === \"button\" ? this.disabled || this.loading : null}\n          download={\n            childElType === \"a\" && (this.download === \"\" || this.download) ? this.download : null\n          }\n          href={childElType === \"a\" && this.href}\n          name={childElType === \"button\" && this.name}\n          onClick={this.handleClick}\n          ref={this.setChildEl}\n          rel={childElType === \"a\" && this.rel}\n          tabIndex={this.disabled ? -1 : null}\n          target={childElType === \"a\" && this.target}\n          title={this.tooltipText}\n          type={childElType === \"button\" && this.type}\n        >\n          {loaderNode}\n          {this.iconStart ? iconStartEl : null}\n          {this.hasContent ? contentEl : null}\n          {this.iconEnd ? iconEndEl : null}\n        </Tag>\n      </InteractiveContainer>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.childEl?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteButtonElement;\n\n  formEl: HTMLFormElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  /** watches for changing text content */\n  private mutationObserver = createObserver(\"mutation\", () => this.updateHasContent());\n\n  /** the rendered child element */\n  private childEl?: HTMLElement;\n\n  /** determine if there is slotted content for styling purposes */\n  @State() private hasContent = false;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ButtonMessages;\n\n  private updateHasContent() {\n    const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;\n    this.hasContent =\n      this.el.childNodes.length === 1 && this.el.childNodes[0]?.nodeName === \"#text\"\n        ? this.el.textContent?.trim().length > 0\n        : slottedContent;\n  }\n\n  private setupTextContentObserver() {\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  /** keeps track of the tooltipText */\n  @State() tooltipText: string;\n\n  /** keep track of the rendered contentEl */\n  private contentEl: HTMLSpanElement;\n\n  resizeObserver = createObserver(\"resize\", () => this.setTooltipText());\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onLabelClick(): void {\n    this.handleClick();\n    this.setFocus();\n  }\n\n  // act on a requested or nearby form based on type\n  private handleClick = (): void => {\n    const { type } = this;\n\n    if (this.href) {\n      return;\n    }\n\n    // this.type refers to type attribute, not child element type\n    if (type === \"submit\") {\n      submitForm(this);\n    } else if (type === \"reset\") {\n      resetForm(this);\n    }\n  };\n\n  private setTooltipText = (): void => {\n    const { contentEl } = this;\n    if (contentEl) {\n      this.tooltipText =\n        contentEl.offsetWidth < contentEl.scrollWidth ? this.el.innerText || null : null;\n    }\n  };\n\n  private setChildEl = (el: HTMLElement): void => {\n    this.childEl = el;\n\n    if (el) {\n      this.resizeObserver?.observe(el);\n    }\n  };\n}\n"],"version":3}

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

@@ -1,21 +1,21 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/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 interactive = require('./interactive-9db98a91.js');
-const loadable = require('./loadable-8de43def.js');
-require('./guid-a0aaca44.js');
-require('./resources-8a5c46a3.js');
-require('./browser-89880371.js');
+const index = require('./index-4fe70fa3.js');
+const dom = require('./dom-1ff7fb61.js');
+const interactive = require('./interactive-6e051cdc.js');
+const loadable = require('./loadable-6f2dfe5f.js');
+require('./guid-47ff9796.js');
+require('./resources-d2d6a16a.js');
+require('./browser-192fd050.js');
 
-const cardGroupCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{--calcite-card-group-gap:var(--calcite-size-md);display:block}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-card-group-gap)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+const cardGroupCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}.container{display:flex;flex-wrap:wrap;gap:var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-size-md)))}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
 const CalciteCardGroupStyle0 = cardGroupCss;
 
 const CardGroup = class {
@@ -89,18 +89,12 @@ const CardGroup = class {
     //  Lifecycle
     //
     //--------------------------------------------------------------------------
-    connectedCallback() {
-        interactive.connectInteractive(this);
-    }
     componentDidRender() {
         interactive.updateHostInteraction(this);
     }
     componentDidLoad() {
         loadable.setComponentLoaded(this);
     }
-    disconnectedCallback() {
-        interactive.disconnectInteractive(this);
-    }
     async componentWillLoad() {
         loadable.setUpLoadableComponent(this);
     }
@@ -155,7 +149,7 @@ const CardGroup = class {
     //--------------------------------------------------------------------------
     render() {
         const role = this.selectionMode === "none" || this.selectionMode === "multiple" ? "group" : "radiogroup";
-        return (index.h(index.Host, { key: 'f7d72ac0d0c8b0cec9b1c5c048ed2a8ee304d9e2' }, index.h(interactive.InteractiveContainer, { key: 'b477bbced684168f1e68c1fe0d8511a689653995', disabled: this.disabled }, index.h("div", { key: 'ce0aa841b96ad23886e109203a14ac2b0e54b948', "aria-disabled": dom.toAriaBoolean(this.disabled), "aria-label": this.label, class: "container", role: role }, index.h("slot", { key: '338c12be0a5a675daf911aad6049aff6319d3064', onSlotchange: this.updateItemsOnSlotChange, ref: (el) => (this.slotRefEl = el) })))));
+        return (index.h(index.Host, { key: 'ba4ffbc827d09b09c6c042519a5f86ce3728d0fe' }, index.h(interactive.InteractiveContainer, { key: '59e07314b287f3703340b99b3ff877a058a59583', disabled: this.disabled }, index.h("div", { key: 'c203fa3c783553a2c8d32e0f8be607b7421674d9', "aria-disabled": dom.toAriaBoolean(this.disabled), "aria-label": this.label, class: "container", role: role }, index.h("slot", { key: 'd58a98005e7d4a45f4b657d260f6af0087cefbde', onSlotchange: this.updateItemsOnSlotChange, ref: (el) => (this.slotRefEl = el) })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"calcite-card-group.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;AAAA,MAAM,YAAY,GAAG,uhBAAuhB,CAAC;AAC7iB,+BAAe,YAAY;;MCqCd,SAAS;;;;;;;;;QA6CZ,UAAK,GAA6B,EAAE,CAAC;;;;;;QAkGrC,qCAAgC,GAAG;YACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACxC,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B,CAAC;QAEM,4BAAuB,GAAG,CAAC,KAAY;YAC7C,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAyB,CAAC,CAAC;YACzD,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B,CAAC;QAEM,uBAAkB,GAAG,CAAC,MAAuB;YACnD,IAAI,CAAC,KAAK,GAAG,MAAM;iBAChB,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iBACnC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,OAAO,CAAC,cAAc,CAAC,CAA6B,CAAC;SAC5E,CAAC;QAEM,wBAAmB,GAAG;YAC5B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE;gBACpB,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;aACvC,CAAC,CAAC;YAEH,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;SAC9B,CAAC;QAEM,qBAAgB,GAAG,CAAC,IAAa,EAAE,SAAkC;YAC3E,IAAI,SAAS,EAAE;gBACb,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE;oBACpB,MAAM,UAAU,GAAG,SAAS,KAAK,EAAE,CAAC;oBACpC,QAAQ,IAAI,CAAC,aAAa;wBACxB,KAAK,UAAU;4BACb,IAAI,UAAU,EAAE;gCACd,EAAE,CAAC,QAAQ,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC;6BAC5B;4BACD,MAAM;wBAER,KAAK,QAAQ;4BACX,EAAE,CAAC,QAAQ,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC,QAAQ,GAAG,KAAK,CAAC;4BAChD,MAAM;wBAER,KAAK,gBAAgB;4BACnB,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,UAAU,CAAC;4BAC3B,MAAM;qBACT;iBACF,CAAC,CAAC;aACJ;YAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,QAAQ,CAAC,CAAC;YAE5D,IAAI,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAC3D,IAAI,CAAC,sBAAsB,CAAC,IAAI,EAAE,CAAC;aACpC;SACF,CAAC;wBAlLkC,KAAK;;6BASrC,MAAM;6BAYyD,EAAE;;IATrE,qBAAqB;QACnB,IAAI,CAAC,gCAAgC,EAAE,CAAC;KACzC;;;;;;IAkCD,iBAAiB;QACfA,8BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,kBAAkB;QAChBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,gBAAgB;QACdC,2BAAkB,CAAC,IAAI,CAAC,CAAC;KAC1B;IAED,oBAAoB;QAClBC,iCAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,MAAM,iBAAiB;QACrBC,+BAAsB,CAAC,IAAI,CAAC,CAAC;KAC9B;;;;;;IAQD,mCAAmC,CAAC,KAAoB;QACtD,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YAC1C,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;YACjE,QAAQ,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;gBACzB,KAAK,YAAY;oBACfC,uBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,MAAgC,EAAE,MAAM,CAAC,CAAC;oBACtF,MAAM;gBACR,KAAK,WAAW;oBACdA,uBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,MAAgC,EAAE,UAAU,CAAC,CAAC;oBAC1F,MAAM;gBACR,KAAK,MAAM;oBACTA,uBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,MAAgC,EAAE,OAAO,CAAC,CAAC;oBACvF,MAAM;gBACR,KAAK,KAAK;oBACRA,uBAAmB,CAAC,gBAAgB,EAAE,KAAK,CAAC,MAAgC,EAAE,MAAM,CAAC,CAAC;oBACtF,MAAM;aACT;SACF;KACF;IAGD,yBAAyB,CAAC,KAAkB;QAC1C,IACE,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YACtC,CAAE,KAAK,CAAC,MAAiC,CAAC,UAAU,EACpD;YACA,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAAC,MAAgC,CAAC,CAAC;SACrE;KACF;;;;;;;;;IAYD,MAAM,QAAQ;QACZ,MAAMC,wBAAe,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClBC,gBAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SAC7B;KACF;;;;;;IAmED,MAAM;QACJ,MAAM,IAAI,GACR,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,IAAI,CAAC,aAAa,KAAK,UAAU,GAAG,OAAO,GAAG,YAAY,CAAC;QAE9F,QACEC,QAACC,UAAI,uDACHD,QAACE,gCAAoB,qDAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3CF,mFACiBG,iBAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAC/B,IAAI,CAAC,KAAK,EACtB,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,IAAI,IAEVH,mEACE,YAAY,EAAE,IAAI,CAAC,uBAAuB,EAC1C,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAqB,CAAC,GACrD,CACE,CACe,CAClB,EACP;KACH;;;;;;;;;;","names":["connectInteractive","updateHostInteraction","setComponentLoaded","disconnectInteractive","setUpLoadableComponent","focusElementInGroup","componentLoaded","focusElement","h","Host","InteractiveContainer","toAriaBoolean"],"sources":["src/components/card-group/card-group.scss?tag=calcite-card-group&encapsulation=shadow","src/components/card-group/card-group.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-card-group-gap: Specifies the gap between slotted components.\n */\n\n:host {\n  --calcite-card-group-gap: var(--calcite-size-md);\n  display: block;\n}\n\n.container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--calcite-card-group-gap);\n}\n\n@include disabled();\n@include base-component();\n","import {\n  Component,\n  h,\n  VNode,\n  Prop,\n  Element,\n  Listen,\n  EventEmitter,\n  Event,\n  Method,\n  Watch,\n  Host,\n} from \"@stencil/core\";\nimport { focusElement, focusElementInGroup, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { SelectionMode } from \"../interfaces\";\nimport {\n  LoadableComponent,\n  componentLoaded,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n/**\n * @slot - A slot for adding one or more `calcite-card`s.\n */\n\n@Component({\n  tag: \"calcite-card-group\",\n  styleUrl: \"card-group.scss\",\n  shadow: true,\n})\nexport class CardGroup implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Element\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCardGroupElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label!: string;\n\n  /** Specifies the selection mode of the component. */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"multiple\" | \"single\" | \"single-persist\" | \"none\",\n    SelectionMode\n  > = \"none\";\n\n  @Watch(\"selectionMode\")\n  onSelectionModeChange(): void {\n    this.udpateItemsOnSelectionModeChange();\n  }\n\n  /**\n   * Specifies the component's selected items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItems: HTMLCalciteCardElement[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  private items: HTMLCalciteCardElement[] = [];\n\n  private slotRefEl: HTMLSlotElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Emits when the component's selection changes and the `selectionMode` is not `none`. */\n  @Event({ cancelable: false }) calciteCardGroupSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectInteractive(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalCardKeyEvent\")\n  calciteInternalCardKeyEventListener(event: KeyboardEvent): void {\n    if (event.composedPath().includes(this.el)) {\n      const interactiveItems = this.items.filter((el) => !el.disabled);\n      switch (event.detail[\"key\"]) {\n        case \"ArrowRight\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"next\");\n          break;\n        case \"ArrowLeft\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"previous\");\n          break;\n        case \"Home\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"first\");\n          break;\n        case \"End\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"last\");\n          break;\n      }\n    }\n  }\n\n  @Listen(\"calciteCardSelect\")\n  calciteCardSelectListener(event: CustomEvent): void {\n    if (\n      event.composedPath().includes(this.el) &&\n      !(event.target as HTMLCalciteCardElement).selectable\n    ) {\n      this.setSelectedItems(true, event.target as HTMLCalciteCardElement);\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first focusable element.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentLoaded(this);\n    if (!this.disabled) {\n      focusElement(this.items[0]);\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private udpateItemsOnSelectionModeChange = (): void => {\n    this.updateSlottedItems(this.slotRefEl);\n    this.updateSelectedItems();\n  };\n\n  private updateItemsOnSlotChange = (event: Event): void => {\n    this.updateSlottedItems(event.target as HTMLSlotElement);\n    this.updateSelectedItems();\n  };\n\n  private updateSlottedItems = (target: HTMLSlotElement): void => {\n    this.items = target\n      .assignedElements({ flatten: true })\n      .filter((el) => el?.matches(\"calcite-card\")) as HTMLCalciteCardElement[];\n  };\n\n  private updateSelectedItems = (): void => {\n    this.items.forEach((el) => {\n      el.selectionMode = this.selectionMode;\n    });\n\n    this.setSelectedItems(false);\n  };\n\n  private setSelectedItems = (emit: boolean, elToMatch?: HTMLCalciteCardElement): void => {\n    if (elToMatch) {\n      this.items.forEach((el) => {\n        const matchingEl = elToMatch === el;\n        switch (this.selectionMode) {\n          case \"multiple\":\n            if (matchingEl) {\n              el.selected = !el.selected;\n            }\n            break;\n\n          case \"single\":\n            el.selected = matchingEl ? !el.selected : false;\n            break;\n\n          case \"single-persist\":\n            el.selected = !!matchingEl;\n            break;\n        }\n      });\n    }\n\n    this.selectedItems = this.items.filter((el) => el.selected);\n\n    if (emit && this.selectionMode !== \"none\" && !this.disabled) {\n      this.calciteCardGroupSelect.emit();\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const role =\n      this.selectionMode === \"none\" || this.selectionMode === \"multiple\" ? \"group\" : \"radiogroup\";\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-disabled={toAriaBoolean(this.disabled)}\n            aria-label={this.label}\n            class=\"container\"\n            role={role}\n          >\n            <slot\n              onSlotchange={this.updateItemsOnSlotChange}\n              ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}\n            />\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"calcite-card-group.entry.cjs.js","mappings":"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","names":["updateHostInteraction","setComponentLoaded","setUpLoadableComponent","focusElementInGroup","componentLoaded","focusElement","h","Host","InteractiveContainer","toAriaBoolean"],"sources":["src/components/card-group/card-group.scss?tag=calcite-card-group&encapsulation=shadow","src/components/card-group/card-group.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-card-group-gap: [Deprecated] Use --calcite-card-group-space. Specifies the gap between slotted components.\n * @prop --calcite-card-group-space: Specifies the space between slotted components.\n */\n\n:host {\n  @apply block;\n}\n\n.container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-size-md)));\n}\n\n@include base-component();\n@include disabled();\n","import {\n  Component,\n  h,\n  VNode,\n  Prop,\n  Element,\n  Listen,\n  EventEmitter,\n  Event,\n  Method,\n  Watch,\n  Host,\n} from \"@stencil/core\";\nimport { focusElement, focusElementInGroup, toAriaBoolean } from \"../../utils/dom\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { SelectionMode } from \"../interfaces\";\nimport {\n  LoadableComponent,\n  componentLoaded,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\n\n/**\n * @slot - A slot for adding one or more `calcite-card`s.\n */\n\n@Component({\n  tag: \"calcite-card-group\",\n  styleUrl: \"card-group.scss\",\n  shadow: true,\n})\nexport class CardGroup implements InteractiveComponent, LoadableComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Element\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteCardGroupElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Accessible name for the component. */\n  @Prop() label!: string;\n\n  /** Specifies the selection mode of the component. */\n  @Prop({ reflect: true }) selectionMode: Extract<\n    \"multiple\" | \"single\" | \"single-persist\" | \"none\",\n    SelectionMode\n  > = \"none\";\n\n  @Watch(\"selectionMode\")\n  onSelectionModeChange(): void {\n    this.udpateItemsOnSelectionModeChange();\n  }\n\n  /**\n   * Specifies the component's selected items.\n   *\n   * @readonly\n   */\n  @Prop({ mutable: true }) selectedItems: HTMLCalciteCardElement[] = [];\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  private items: HTMLCalciteCardElement[] = [];\n\n  private slotRefEl: HTMLSlotElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /** Emits when the component's selection changes and the `selectionMode` is not `none`. */\n  @Event({ cancelable: false }) calciteCardGroupSelect: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalCardKeyEvent\")\n  calciteInternalCardKeyEventListener(event: KeyboardEvent): void {\n    if (event.composedPath().includes(this.el)) {\n      const interactiveItems = this.items.filter((el) => !el.disabled);\n      switch (event.detail[\"key\"]) {\n        case \"ArrowRight\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"next\");\n          break;\n        case \"ArrowLeft\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"previous\");\n          break;\n        case \"Home\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"first\");\n          break;\n        case \"End\":\n          focusElementInGroup(interactiveItems, event.target as HTMLCalciteCardElement, \"last\");\n          break;\n      }\n    }\n  }\n\n  @Listen(\"calciteCardSelect\")\n  calciteCardSelectListener(event: CustomEvent): void {\n    if (\n      event.composedPath().includes(this.el) &&\n      !(event.target as HTMLCalciteCardElement).selectable\n    ) {\n      this.setSelectedItems(true, event.target as HTMLCalciteCardElement);\n    }\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * Sets focus on the component's first focusable element.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentLoaded(this);\n    if (!this.disabled) {\n      focusElement(this.items[0]);\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private udpateItemsOnSelectionModeChange = (): void => {\n    this.updateSlottedItems(this.slotRefEl);\n    this.updateSelectedItems();\n  };\n\n  private updateItemsOnSlotChange = (event: Event): void => {\n    this.updateSlottedItems(event.target as HTMLSlotElement);\n    this.updateSelectedItems();\n  };\n\n  private updateSlottedItems = (target: HTMLSlotElement): void => {\n    this.items = target\n      .assignedElements({ flatten: true })\n      .filter((el) => el?.matches(\"calcite-card\")) as HTMLCalciteCardElement[];\n  };\n\n  private updateSelectedItems = (): void => {\n    this.items.forEach((el) => {\n      el.selectionMode = this.selectionMode;\n    });\n\n    this.setSelectedItems(false);\n  };\n\n  private setSelectedItems = (emit: boolean, elToMatch?: HTMLCalciteCardElement): void => {\n    if (elToMatch) {\n      this.items.forEach((el) => {\n        const matchingEl = elToMatch === el;\n        switch (this.selectionMode) {\n          case \"multiple\":\n            if (matchingEl) {\n              el.selected = !el.selected;\n            }\n            break;\n\n          case \"single\":\n            el.selected = matchingEl ? !el.selected : false;\n            break;\n\n          case \"single-persist\":\n            el.selected = !!matchingEl;\n            break;\n        }\n      });\n    }\n\n    this.selectedItems = this.items.filter((el) => el.selected);\n\n    if (emit && this.selectionMode !== \"none\" && !this.disabled) {\n      this.calciteCardGroupSelect.emit();\n    }\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const role =\n      this.selectionMode === \"none\" || this.selectionMode === \"multiple\" ? \"group\" : \"radiogroup\";\n\n    return (\n      <Host>\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            aria-disabled={toAriaBoolean(this.disabled)}\n            aria-label={this.label}\n            class=\"container\"\n            role={role}\n          >\n            <slot\n              onSlotchange={this.updateItemsOnSlotChange}\n              ref={(el) => (this.slotRefEl = el as HTMLSlotElement)}\n            />\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,23 +1,23 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.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 locale = require('./locale-987403a2.js');
-const t9n = require('./t9n-0ac48eea.js');
-const loadable = require('./loadable-8de43def.js');
-const interactive = require('./interactive-9db98a91.js');
-const key = require('./key-5de2d409.js');
-require('./guid-a0aaca44.js');
-require('./resources-8a5c46a3.js');
-require('./observers-3a410d9c.js');
-require('./browser-89880371.js');
+const index = require('./index-4fe70fa3.js');
+const dom = require('./dom-1ff7fb61.js');
+const locale = require('./locale-38c1927e.js');
+const t9n = require('./t9n-ab4fd9b6.js');
+const loadable = require('./loadable-6f2dfe5f.js');
+const interactive = require('./interactive-6e051cdc.js');
+const key = require('./key-c3b3fd7e.js');
+require('./guid-47ff9796.js');
+require('./resources-d2d6a16a.js');
+require('./observers-498f2676.js');
+require('./browser-192fd050.js');
 
 const CSS = {
     container: "container",
@@ -49,7 +49,7 @@ const ICONS = {
     unselectedSingle: "circle",
 };
 
-const cardCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%;--calcite-card-corner-radius:var(--calcite-corner-radius-sharp);--calcite-card-background-color:var(--calcite-color-foreground-1);--calcite-card-border-color:var(--calcite-color-border-3);--calcite-card-shadow:var(--calcite-shadow-none);--calcite-card-accent-color-selected:var(--calcite-color-brand);--calcite-card-selection-background-color:transparent;--calcite-card-selection-background-color-hover:var(--calcite-color-transparent-hover);--calcite-card-selection-background-color-active:var(--calcite-color-transparent-press);--calcite-card-selection-background-color-selected:transparent;--calcite-card-selection-icon-color:var(--calcite-color-text-3);--calcite-card-selection-icon-color-hover:var(--calcite-color-text-2);--calcite-card-selection-icon-color-selected:var(--calcite-color-brand)}.content-wrapper{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border:var(--calcite-border-width-sm) solid var(--calcite-card-border-color);border-radius:var(--calcite-card-corner-radius);background-color:var(--calcite-card-background-color);box-shadow:var(--calcite-card-shadow);pointer-events:none}::slotted(*){pointer-events:auto}:host(:not([selectable])) .content-wrapper:not(.non-interactive){outline-color:transparent}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0px;display:flex;align-items:center}.header{display:flex;flex-direction:row;align-items:flex-start}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:var(--calcite-spacing-md);padding-block-start:var(--calcite-spacing-xxs);padding-block-end:var(--calcite-spacing-md)}.header-text-container{display:flex;inline-size:100%;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem}.header-text-container:not(:only-child){padding-inline-end:0.125rem}.footer{margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:0.75rem;padding-block:0.25rem 0.75rem}.card-content{block-size:auto;font-size:var(--calcite-font-size--2);line-height:1.375}.has-slotted-content{padding:0.75rem}:host([selected]) .content-wrapper{box-shadow:inset 0 -4px 0 0 var(--calcite-card-accent-color-selected)}:host([selectable]) .header{padding-inline-end:var(--calcite-spacing-xxxl)}slot[name=title]::slotted(*),*::slotted([slot=title]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=subtitle]::slotted(*),*::slotted([slot=subtitle]){margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}slot[name=heading]::slotted(*),*::slotted([slot=heading]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=description]::slotted(*),*::slotted([slot=description]){margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-start]::slotted(*),*::slotted([slot=footer-start]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375;margin-inline-end:auto}slot[name=footer-end]::slotted(*),*::slotted([slot=footer-end]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375}.checkbox-wrapper-deprecated{pointer-events:auto;position:absolute;inset-block-start:var(--calcite-spacing-sm);inset-inline-end:var(--calcite-spacing-sm);margin:0;padding:0}.checkbox-wrapper{pointer-events:auto;margin:0.5rem;cursor:pointer;padding:0.5rem;outline-color:transparent;background-color:var(--calcite-card-selection-background-color);display:flex;align-items:center;justify-items:center;--calcite-icon-color:var(--calcite-card-selection-icon-color)}.checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover);--calcite-icon-color:var(--calcite-card-selection-icon-color-hover)}.checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-active)}.checkbox-wrapper calcite-icon{pointer-events:none}:host([selected]) .checkbox-wrapper{--calcite-icon-color:var(--calcite-card-selection-icon-color-selected);background-color:var(--calcite-card-selection-background-color-selected)}:host([selected]) .checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover)}:host([selected]) .checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-active)}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-hover);--calcite-icon-color:var(--calcite-card-selection-icon-color-hover)}:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-active);--calcite-icon-color:var(--calcite-card-selection-icon-color-selected)}.thumbnail-wrapper{display:flex}.content-wrapper.inline{flex-direction:row}.content-wrapper.inline>.container{inline-size:60%}.content-wrapper.inline>.thumbnail-wrapper{inline-size:40%;align-items:flex-start}.content-wrapper.inline slot[name=thumbnail]::slotted(img),.content-wrapper.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-start]::slotted(*),slot[name=footer-end]::slotted(*){display:flex;gap:0.25rem}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
+const cardCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%}.content-wrapper{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border:var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));background-color:var(--calcite-card-background-color, var(--calcite-color-foreground-1));box-shadow:var(--calcite-card-shadow, var(--calcite-shadow-none));pointer-events:none}::slotted(*){pointer-events:auto}:host(:not([selectable])) .content-wrapper:not(.non-interactive){outline-color:transparent}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0px;display:flex;align-items:center}.header{display:flex;flex-direction:row;align-items:flex-start}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:var(--calcite-spacing-md);padding-block-start:var(--calcite-spacing-xxs);padding-block-end:var(--calcite-spacing-md)}.header-text-container{display:flex;inline-size:100%;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem}.header-text-container:not(:only-child){padding-inline-end:0.125rem}.footer{margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:0.75rem;padding-block:0.25rem 0.75rem}.card-content{block-size:auto;font-size:var(--calcite-font-size--2);line-height:1.375}.has-slotted-content{padding:0.75rem}:host([selected]) .content-wrapper{box-shadow:inset 0 -4px 0 0 var(--calcite-card-accent-color-selected, var(--calcite-color-brand))}:host([selectable]) .header{padding-inline-end:var(--calcite-spacing-xxxl)}slot[name=title]::slotted(*),*::slotted([slot=title]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=subtitle]::slotted(*),*::slotted([slot=subtitle]){margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}slot[name=heading]::slotted(*),*::slotted([slot=heading]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=description]::slotted(*),*::slotted([slot=description]){margin:0px;margin-block-start:0.125rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-start]::slotted(*),*::slotted([slot=footer-start]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375;margin-inline-end:auto}slot[name=footer-end]::slotted(*),*::slotted([slot=footer-end]){align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375}.checkbox-wrapper-deprecated{pointer-events:auto;position:absolute;inset-block-start:var(--calcite-spacing-sm);inset-inline-end:var(--calcite-spacing-sm);margin:0;padding:0;color:var(--calcite-card-selection-color, var(--calcite-color-text-3))}.checkbox-wrapper-deprecated:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper-deprecated:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper{pointer-events:auto;margin:0.5rem;cursor:pointer;padding:0.5rem;outline-color:transparent;display:flex;align-items:center;justify-items:center;color:var(--calcite-card-selection-color, var(--calcite-color-text-3))}.checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper calcite-icon{pointer-events:none}:host([selected]) .checkbox-wrapper-deprecated,:host([selected]) .checkbox-wrapper{color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}.thumbnail-wrapper{display:flex}.content-wrapper.inline{flex-direction:row}.content-wrapper.inline>.container{inline-size:60%}.content-wrapper.inline>.thumbnail-wrapper{inline-size:40%;align-items:flex-start}.content-wrapper.inline slot[name=thumbnail]::slotted(img),.content-wrapper.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-start]::slotted(*),slot[name=footer-end]::slotted(*){display:flex;gap:0.25rem}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}";
 const CalciteCardStyle0 = cardCss;
 
 const Card = class {
@@ -144,7 +144,6 @@ const Card = class {
     //
     // --------------------------------------------------------------------------
     connectedCallback() {
-        interactive.connectInteractive(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
     }
@@ -155,7 +154,6 @@ const Card = class {
         interactive.updateHostInteraction(this);
     }
     disconnectedCallback() {
-        interactive.disconnectInteractive(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
     }
@@ -207,10 +205,10 @@ const Card = class {
             : this.selectionMode !== "none"
                 ? "radio"
                 : undefined;
-        return (index.h(index.Host, { key: 'e33b76130cd91d3caa6662f1f58b79d238c708fb' }, index.h(interactive.InteractiveContainer, { key: '772da2a3a1274eb467d1febb915ffb97953beae7', disabled: this.disabled }, index.h("div", { key: 'b9fdbb51cfb07964479d0f723add39b8a2384f86', "aria-checked": this.selectionMode !== "none" ? dom.toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (index.h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, index.h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), index.h("section", { key: '51cfe132a589ec65b39544b4c1246545b0b864f2', "aria-busy": dom.toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.renderHeader(), index.h("div", { key: 'c256998e330a949d47a12b23127c68cba081854e', class: {
+        return (index.h(index.Host, { key: 'cc6fb557df0c34c078ff67adb1ae92be52e71293' }, index.h(interactive.InteractiveContainer, { key: '270320cb6e070661fea9bc509ba2c2a2a4f9ab72', disabled: this.disabled }, index.h("div", { key: 'd16bffb557e6aa57a957dc76e95e64575ea69db1', "aria-checked": this.selectionMode !== "none" ? dom.toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (index.h("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, index.h("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), index.h("section", { key: 'd9c348b0564a7233f07d6f6f149a5d697c0e5d49', "aria-busy": dom.toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.renderHeader(), index.h("div", { key: '8b263696e0fd40609fe7dd66b557afaa66ee25ee', class: {
                 [CSS.cardContent]: true,
                 [CSS.hasSlottedContent]: this.hasContent,
-            } }, index.h("slot", { key: '17fb9b0a9919f09a474d3c54818e770be9a85b77', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
+            } }, index.h("slot", { key: '49314c12404a66c681b93a8f3e7c56669b995498', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }

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

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