@carbon/web-components 2.62.0 → 2.63.0

package/es/components/multi-select/multi-select.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.scss.js","names":[],"sources":["../../../src/components/multi-select/multi-select.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2026\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/components/list-box/list-box';\n@use '@carbon/styles/scss/components/multiselect/index';\n@use '@carbon/styles/scss/components/form';\n@use '@carbon/styles/scss/components/checkbox';\n@use '@carbon/styles/scss/components/tag';\n@use '@carbon/styles/scss/utilities/convert';\n@use '@carbon/styles/scss/layout' as *;\n\n:host(#{$prefix}-multi-select) {\n  @include emit-layout-tokens();\n\n  box-sizing: border-box;\n  outline: none;\n\n  .#{$prefix}--assistive-text {\n    inset-block-start: -100%;\n    // Hides screen reader cursor\n    inset-inline-start: -100%;\n  }\n\n  .#{$prefix}--label[hidden] {\n    display: none;\n  }\n\n  .#{$prefix}--list-box__menu {\n    inset-block-start: 100%;\n    margin-block-start: 1px;\n    outline: none;\n  }\n\n  .#{$prefix}--text-input {\n    border: none;\n    padding-inline-start: 0;\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .#{$prefix}--tag--disabled {\n    @extend .#{$prefix}--tag--disabled;\n\n    background-color: transparent;\n    color: $text-disabled;\n  }\n\n  .#{$prefix}--list-box__field:focus {\n    @extend .#{$prefix}--multi-select--filterable--input-focused;\n  }\n\n  /* stylelint-disable declaration-no-important */\n  .#{$prefix}--list-box__selection--multi::after {\n    display: none !important;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable]) {\n  .#{$prefix}--list-box__field:focus-within {\n    outline: $spacing-01 solid $focus;\n    outline-offset: -#{$spacing-01};\n  }\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-01;\n    }\n  }\n}\n:host(#{$prefix}-multi-select[filterable][has-value])\n  .#{$prefix}--list-box__field\n  ~ ::slotted(#{$prefix}-ai-label) {\n  inset-inline-end: calc($spacing-10 + 18px);\n}\n\n:host(#{$prefix}-multi-select[direction='top']) {\n  @extend .#{$prefix}--list-box--up;\n\n  .#{$prefix}--list-box__menu {\n    inset-block-start: auto;\n  }\n}\n\n:host(#{$prefix}-multi-select[invalid]:not([disabled]):not([read-only])) {\n  .#{$prefix}--form__helper-text {\n    color: $text-error;\n  }\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-10;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[type='inline']) {\n  @extend .#{$prefix}--list-box__wrapper--inline;\n\n  grid-gap: 0 $spacing-03;\n  .#{$prefix}--form__helper-text {\n    grid-column: 3;\n  }\n}\n\n:host(#{$prefix}-multi-select[type='inline'][warn])\n  .#{$prefix}--list-box__field {\n  padding-inline-end: rem(56px);\n}\n\n:host(#{$prefix}-multi-select-item) {\n  @extend .#{$prefix}--list-box__menu-item;\n\n  display: block;\n\n  #{$prefix}-checkbox::part(label) {\n    display: inline-block;\n    overflow: hidden;\n    inline-size: 100%;\n    padding-inline-start: rem(28px);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .#{$prefix}--list-box__menu-item__option {\n    box-sizing: border-box;\n\n    .#{$prefix}--checkbox-wrapper {\n      display: flex;\n      align-items: center;\n      block-size: 100%;\n      inline-size: 100%;\n    }\n\n    > .#{$prefix}--form-item {\n      flex-direction: row;\n    }\n  }\n  // make the checkbox element transparent to mouse events so it doesn't interfere\n  #{$prefix}-checkbox {\n    pointer-events: none;\n  }\n}\n\n:host(#{$prefix}-multi-select-item:hover) {\n  background-color: $layer-hover;\n}\n\n:host(#{$prefix}-multi-select-item[filtered]) {\n  display: none;\n}\n\n:host(#{$prefix}-multi-select-item[size='sm']) {\n  block-size: fit-content;\n  .#{$prefix}--list-box__menu-item__option {\n    block-size: $spacing-07;\n    padding-block: rem(7px);\n  }\n}\n\n:host(#{$prefix}-multi-select-item[size='lg']) {\n  block-size: fit-content;\n  .#{$prefix}--list-box__menu-item__option {\n    block-size: $spacing-09;\n    padding-block: rem(15px);\n  }\n}\n\n:host(#{$prefix}-multi-select-item[disabled]) {\n  cursor: not-allowed;\n  .#{$prefix}--list-box__menu-item__option {\n    color: $text-disabled;\n    text-decoration: none;\n  }\n}\n\n:host(#{$prefix}-multi-select-item[highlighted]) {\n  @extend .#{$prefix}--list-box__menu-item--highlighted;\n}\n\n:host(#{$prefix}-multi-select-item[selected]) {\n  @extend .#{$prefix}--list-box__menu-item--active;\n\n  .#{$prefix}--list-box__menu-item__option {\n    color: $text-primary;\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label]) {\n  @extend .#{$prefix}--list-box__wrapper--slug;\n\n  ::slotted(#{$prefix}-ai-label),\n  ::slotted(#{$prefix}-slug) {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-end: calc($spacing-08 + 9px);\n    margin-block-start: convert.to-rem(0.5px);\n  }\n\n  ::slotted(#{$prefix}-ai-label:not([revert-active])),\n  ::slotted(#{$prefix}-slug:not([revert-active])) {\n    transform: translateY(-50%);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][warn]),\n:host(#{$prefix}-multi-select[ai-label][invalid]) {\n  .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: convert.to-rem(81px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label]) ::slotted(#{$prefix}-ai-label)::after {\n  position: absolute;\n  display: block;\n  background-color: $border-subtle-01;\n  block-size: $spacing-05;\n  content: '';\n  inline-size: convert.to-rem(1px);\n  inset-block-start: 0;\n  inset-inline-end: convert.to-rem(-9px);\n}\n\n:host(#{$prefix}-multi-select[filterable][warn][has-value]),\n:host(#{$prefix}-multi-select[filterable][invalid][has-value]) {\n  .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(78px);\n  }\n\n  .#{$prefix}--list-box__selection#clear-button::before {\n    position: absolute;\n    display: block;\n    background-color: $border-subtle-01;\n    block-size: $spacing-05;\n    content: '';\n    inline-size: rem(1px);\n    inset-inline-end: rem(27px);\n  }\n}\n\n// pad space to account for text-input, placeholder and selections\n\n:host(#{$prefix}-multi-select[filterable])\n  .#{$prefix}--multi-select--selected\n  .#{$prefix}--list-box__field\n  .#{$prefix}--text-input {\n  padding-inline-end: rem(45px);\n}\n\n:host(#{$prefix}-multi-select[filterable][invalid][value='']) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-01;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][invalid]),\n:host(#{$prefix}-multi-select[filterable][warn]) {\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: 0;\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: $spacing-08;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][warn][value='']) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-05;\n    }\n  }\n}\n:host(#{$prefix}-multi-select[filterable][ai-label][value='']) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-03;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][ai-label][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(43px);\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: $spacing-10;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][invalid][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-08;\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: $spacing-10;\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: $spacing-11;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][warn][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(55px);\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: $spacing-09;\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: $spacing-11;\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(75px);\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][ai-label])\n  .#{$prefix}--multi-select--selected\n  .#{$prefix}--list-box__field\n  .#{$prefix}--text-input {\n  padding-inline-end: 0;\n}\n\n:host(#{$prefix}-multi-select[filterable][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-06;\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: rem(45px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][invalid]),\n:host(#{$prefix}-multi-select[ai-label][warn]) {\n  ::slotted(#{$prefix}-ai-label)::before {\n    position: absolute;\n    display: block;\n    background-color: $border-subtle-01;\n    block-size: $spacing-05;\n    content: '';\n    inline-size: convert.to-rem(1px);\n    inset-block-start: 0;\n    inset-inline-end: convert.to-rem(24px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][warn]),\n:host(#{$prefix}-multi-select[ai-label][invalid]),\n:host(#{$prefix}-multi-select[ai-label][warn][filterable]),\n:host(#{$prefix}-multi-select[ai-label][invalid][filterable]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-07;\n    }\n  }\n  .#{$prefix}--list-box__field .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(81px);\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: rem(70px);\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][ai-label][warn][has-value]),\n:host(#{$prefix}-multi-select[filterable][ai-label][invalid][has-value]) {\n  .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(114px);\n  }\n\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(75px);\n    }\n  }\n\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: rem(65px);\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(114px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][invalid]),\n:host(#{$prefix}-multi-select[ai-label][warn]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(100px);\n    }\n  }\n  .#{$prefix}--multi-select--selected .#{$prefix}--list-box__field {\n    padding-inline-end: rem(105px);\n  }\n}\n\n// When select all is turned on, the first item in the listbox\n// is always the \"Select all\" option and gets special border\n// treatment\n:host(#{$prefix}-multi-select-item[is-select-all]) {\n  .#{$prefix}--list-box__menu-item__option {\n    padding: 0.6875rem $spacing-05;\n    margin: 0;\n    border-block-end: 1px solid $border-subtle-01;\n  }\n}\n\n// When select all is turned on, the second item in the list\n// has special treatment to look correct against the \"Select all\"\n// border treatment, this second item (index=1) gets a `flush-top` attribute\n// so that we can remove its top border.\n:host(#{$prefix}-multi-select-item[flush-top])\n  .#{$prefix}--list-box__menu-item__option {\n  border-block-start: none;\n}\n\n// remove focus outline for when the label is out of focus\n:host(#{$prefix}-multi-select)\n  .#{$prefix}--list-box__field.no-focus-style:focus,\n:host(#{$prefix}-multi-select)\n  .#{$prefix}--list-box__field.no-focus-style:focus-within {\n  outline: none;\n}\n\n:host(#{$prefix}-multi-select[ai-label])\n  .#{$prefix}--list-box__wrapper--decorator {\n  @include ai-gradient;\n}\n\n:host(#{$prefix}-multi-select[item-clicked]),\n:host(#{$prefix}-multi-select[has-value]) {\n  .#{$prefix}--list-box__field,\n  .#{$prefix}--multi-select--invalid {\n    outline: 1px solid $focus !important;\n    outline-offset: -1px !important;\n  }\n}\n\n:host(\n    #{$prefix}-multi-select[warn]:not([invalid]):not([ai-label]):not(\n        [disabled]\n      ):not([read-only])\n  ) {\n  .#{$prefix}--form__helper-text {\n    color: $text-primary;\n  }\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-10;\n    }\n  }\n}\n\n:host(\n    #{$prefix}-multi-select[warn][invalid]:not([ai-label]):not([disabled]):not(\n        [read-only]\n      )\n  ) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-10;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[disabled]) {\n  .#{$prefix}--list-box__field,\n  .#{$prefix}--list-box__selection {\n    pointer-events: none;\n  }\n  .#{$prefix}--list-box__field:focus,\n  .#{$prefix}--list-box__selection:focus {\n    outline: none !important;\n  }\n}\n\n@include emit-layout-tokens-to-shadow-host('#{$prefix}-multi-select');\n"],"mappings":""}
+{"version":3,"file":"multi-select.scss.js","names":[],"sources":["../../../src/components/multi-select/multi-select.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, 2026\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/feature-flags' as flags;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/components/list-box/list-box';\n@use '@carbon/styles/scss/components/multiselect/index';\n@use '@carbon/styles/scss/components/form';\n@use '@carbon/styles/scss/components/checkbox';\n@use '@carbon/styles/scss/components/tag';\n@use '@carbon/styles/scss/utilities/convert';\n@use '@carbon/styles/scss/layout' as *;\n\n:host(#{$prefix}-multi-select) {\n  @include emit-layout-tokens();\n\n  box-sizing: border-box;\n  outline: none;\n\n  .#{$prefix}--assistive-text {\n    inset-block-start: -100%;\n    // Hides screen reader cursor\n    inset-inline-start: -100%;\n  }\n\n  .#{$prefix}--label[hidden] {\n    display: none;\n  }\n\n  .#{$prefix}--list-box__menu {\n    @if not flags.enabled('enable-v12-release') {\n      inset-block-start: 100%;\n      margin-block-start: 1px;\n    }\n\n    outline: none;\n  }\n\n  @if flags.enabled('enable-v12-release') {\n    .#{$prefix}--list-box__field {\n      block-size: calc(100% + 1px);\n    }\n  }\n\n  .#{$prefix}--text-input {\n    border: none;\n    padding-inline-start: 0;\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .#{$prefix}--tag--disabled {\n    @extend .#{$prefix}--tag--disabled;\n\n    background-color: transparent;\n    color: $text-disabled;\n  }\n\n  @if not flags.enabled('enable-v12-release') {\n    .#{$prefix}--list-box__field:focus {\n      @extend .#{$prefix}--multi-select--filterable--input-focused;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable]) {\n  @if not flags.enabled('enable-v12-release') {\n    .#{$prefix}--list-box__field:focus-within {\n      outline: $spacing-01 solid $focus;\n      outline-offset: -#{$spacing-01};\n    }\n  }\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-01;\n    }\n  }\n}\n@if flags.enabled('enable-v12-release') {\n  // Default: full outline on trigger, none when navigating items, thin\n  // when something is selected\n  :host(#{$prefix}-multi-select:not([filterable]):not([item-clicked])) {\n    .#{$prefix}--list-box:focus-within:not(\n        :has([aria-activedescendant]:not([aria-activedescendant='']))\n      ):not(\n        .#{$prefix}--list-box--expanded.#{$prefix}--multi-select--selected\n      ) {\n      @include focus-outline('outline');\n    }\n  }\n\n  :host(#{$prefix}-multi-select:not([filterable])) {\n    .#{$prefix}--list-box--expanded.#{$prefix}--multi-select--selected:focus-within {\n      @include focus-outline('outline');\n\n      outline-offset: rem(-1px);\n      outline-width: rem(1px);\n    }\n  }\n\n  // Filterable: full outline on trigger, thin whenever an option is\n  // active or anything is selected\n  :host(#{$prefix}-multi-select[filterable]) {\n    .#{$prefix}--list-box:focus-within {\n      @include focus-outline('outline');\n    }\n\n    .#{$prefix}--list-box:focus-within:has(\n        [aria-activedescendant]:not([aria-activedescendant=''])\n      ),\n    .#{$prefix}--list-box.#{$prefix}--multi-select--selected:focus-within {\n      outline-offset: rem(-1px);\n      outline-width: rem(1px);\n    }\n  }\n\n  :host(#{$prefix}-multi-select[filterable][item-clicked]) {\n    .#{$prefix}--list-box:focus-within {\n      outline-offset: rem(-1px);\n      outline-width: rem(1px);\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][has-value])\n  .#{$prefix}--list-box__field\n  ~ ::slotted(#{$prefix}-ai-label) {\n  inset-inline-end: calc($spacing-10 + 18px);\n}\n\n:host(#{$prefix}-multi-select[direction='top']) {\n  @extend .#{$prefix}--list-box--up;\n\n  .#{$prefix}--list-box__menu {\n    inset-block-start: auto;\n  }\n}\n\n:host(#{$prefix}-multi-select[invalid]:not([disabled]):not([read-only])) {\n  .#{$prefix}--form__helper-text {\n    color: $text-error;\n  }\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-10;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[type='inline']) {\n  @extend .#{$prefix}--list-box__wrapper--inline;\n\n  grid-gap: 0 $spacing-03;\n  .#{$prefix}--form__helper-text {\n    grid-column: 3;\n  }\n}\n\n:host(#{$prefix}-multi-select[type='inline'][warn])\n  .#{$prefix}--list-box__field {\n  padding-inline-end: rem(56px);\n}\n\n:host(#{$prefix}-multi-select-item) {\n  @extend .#{$prefix}--list-box__menu-item;\n\n  display: block;\n\n  #{$prefix}-checkbox::part(label) {\n    display: inline-block;\n    overflow: hidden;\n    inline-size: 100%;\n    padding-inline-start: rem(28px);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .#{$prefix}--list-box__menu-item__option {\n    box-sizing: border-box;\n\n    .#{$prefix}--checkbox-wrapper {\n      display: flex;\n      align-items: center;\n      block-size: 100%;\n      inline-size: 100%;\n    }\n\n    > .#{$prefix}--form-item {\n      flex-direction: row;\n    }\n  }\n  // make the checkbox element transparent to mouse events so it doesn't interfere\n  #{$prefix}-checkbox {\n    pointer-events: none;\n  }\n}\n\n:host(#{$prefix}-multi-select-item:hover) {\n  background-color: $layer-hover;\n}\n\n:host(#{$prefix}-multi-select-item[filtered]) {\n  display: none;\n}\n\n:host(#{$prefix}-multi-select-item[size='sm']) {\n  block-size: fit-content;\n  .#{$prefix}--list-box__menu-item__option {\n    block-size: $spacing-07;\n    padding-block: rem(7px);\n  }\n}\n\n:host(#{$prefix}-multi-select-item[size='lg']) {\n  block-size: fit-content;\n  .#{$prefix}--list-box__menu-item__option {\n    block-size: $spacing-09;\n    padding-block: rem(15px);\n  }\n}\n\n:host(#{$prefix}-multi-select-item[disabled]) {\n  cursor: not-allowed;\n  .#{$prefix}--list-box__menu-item__option {\n    color: $text-disabled;\n    text-decoration: none;\n  }\n}\n\n:host(#{$prefix}-multi-select-item[highlighted]) {\n  @extend .#{$prefix}--list-box__menu-item--highlighted;\n}\n\n:host(#{$prefix}-multi-select-item[selected]) {\n  @extend .#{$prefix}--list-box__menu-item--active;\n\n  .#{$prefix}--list-box__menu-item__option {\n    color: $text-primary;\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label]) {\n  @extend .#{$prefix}--list-box__wrapper--slug;\n\n  ::slotted(#{$prefix}-ai-label),\n  ::slotted(#{$prefix}-slug) {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-end: calc($spacing-08 + 9px);\n    margin-block-start: convert.to-rem(0.5px);\n  }\n\n  ::slotted(#{$prefix}-ai-label:not([revert-active])),\n  ::slotted(#{$prefix}-slug:not([revert-active])) {\n    transform: translateY(-50%);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][warn]),\n:host(#{$prefix}-multi-select[ai-label][invalid]) {\n  .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: convert.to-rem(81px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label]) ::slotted(#{$prefix}-ai-label)::after {\n  position: absolute;\n  display: block;\n  background-color: $border-subtle-01;\n  block-size: $spacing-05;\n  content: '';\n  inline-size: convert.to-rem(1px);\n  inset-block-start: 0;\n  inset-inline-end: convert.to-rem(-9px);\n}\n\n:host(#{$prefix}-multi-select[filterable][warn][has-value]),\n:host(#{$prefix}-multi-select[filterable][invalid][has-value]) {\n  .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(78px);\n  }\n\n  .#{$prefix}--list-box__selection#clear-button::before {\n    position: absolute;\n    display: block;\n    background-color: $border-subtle-01;\n    block-size: $spacing-05;\n    content: '';\n    inline-size: rem(1px);\n    inset-inline-end: rem(27px);\n  }\n}\n\n// pad space to account for text-input, placeholder and selections\n\n:host(#{$prefix}-multi-select[filterable])\n  .#{$prefix}--multi-select--selected\n  .#{$prefix}--list-box__field\n  .#{$prefix}--text-input {\n  padding-inline-end: rem(45px);\n}\n\n:host(#{$prefix}-multi-select[filterable][invalid][value='']) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-01;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][invalid]),\n:host(#{$prefix}-multi-select[filterable][warn]) {\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: 0;\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: $spacing-08;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][warn][value='']) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-05;\n    }\n  }\n}\n:host(#{$prefix}-multi-select[filterable][ai-label][value='']) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-03;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][ai-label][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(43px);\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: $spacing-10;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][invalid][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-08;\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: $spacing-10;\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: $spacing-11;\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][warn][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(55px);\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: $spacing-09;\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: $spacing-11;\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(75px);\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][ai-label])\n  .#{$prefix}--multi-select--selected\n  .#{$prefix}--list-box__field\n  .#{$prefix}--text-input {\n  padding-inline-end: 0;\n}\n\n:host(#{$prefix}-multi-select[filterable][has-value]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-06;\n    }\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: rem(45px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][invalid]),\n:host(#{$prefix}-multi-select[ai-label][warn]) {\n  ::slotted(#{$prefix}-ai-label)::before {\n    position: absolute;\n    display: block;\n    background-color: $border-subtle-01;\n    block-size: $spacing-05;\n    content: '';\n    inline-size: convert.to-rem(1px);\n    inset-block-start: 0;\n    inset-inline-end: convert.to-rem(24px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][warn]),\n:host(#{$prefix}-multi-select[ai-label][invalid]),\n:host(#{$prefix}-multi-select[ai-label][warn][filterable]),\n:host(#{$prefix}-multi-select[ai-label][invalid][filterable]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-07;\n    }\n  }\n  .#{$prefix}--list-box__field .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(81px);\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: rem(70px);\n  }\n}\n\n:host(#{$prefix}-multi-select[filterable][ai-label][warn][has-value]),\n:host(#{$prefix}-multi-select[filterable][ai-label][invalid][has-value]) {\n  .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(114px);\n  }\n\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(75px);\n    }\n  }\n\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--text-input {\n    padding-inline-end: rem(65px);\n  }\n  .#{$prefix}--multi-select--selected\n    .#{$prefix}--list-box__field\n    .#{$prefix}--list-box__invalid-icon {\n    inset-inline-end: rem(114px);\n  }\n}\n\n:host(#{$prefix}-multi-select[ai-label][invalid]),\n:host(#{$prefix}-multi-select[ai-label][warn]) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: rem(100px);\n    }\n  }\n  .#{$prefix}--multi-select--selected .#{$prefix}--list-box__field {\n    padding-inline-end: rem(105px);\n  }\n}\n\n@if flags.enabled('enable-v12-release') {\n  // When select all is turned on, the \"Select all\" option is separated from\n  // the rest of the options by a divider\n  :host(#{$prefix}-multi-select-item[is-select-all]) {\n    position: relative;\n\n    // spacing-02 margin * 2 + 1px divider\n    margin-block-end: calc(#{$spacing-02} * 2 + 1px);\n\n    .#{$prefix}--list-box__menu-divider {\n      position: absolute;\n      background-color: $border-subtle;\n      block-size: convert.to-rem(1px);\n      inset-block-start: calc(100% + #{$spacing-02});\n      inset-inline: -$spacing-02;\n    }\n  }\n} @else {\n  // When select all is turned on, the first item in the listbox\n  // is always the \"Select all\" option and gets special border\n  // treatment\n  :host(#{$prefix}-multi-select-item[is-select-all]) {\n    .#{$prefix}--list-box__menu-item__option {\n      padding: 0.6875rem $spacing-05;\n      margin: 0;\n      border-block-end: 1px solid $border-subtle-01;\n    }\n  }\n}\n\n// When select all is turned on, the second item in the list\n// has special treatment to look correct against the \"Select all\"\n// border treatment, this second item (index=1) gets a `flush-top` attribute\n// so that we can remove its top border.\n:host(#{$prefix}-multi-select-item[flush-top])\n  .#{$prefix}--list-box__menu-item__option {\n  border-block-start: none;\n}\n\n// remove focus outline for when the label is out of focus\n:host(#{$prefix}-multi-select)\n  .#{$prefix}--list-box__field.no-focus-style:focus,\n:host(#{$prefix}-multi-select)\n  .#{$prefix}--list-box__field.no-focus-style:focus-within {\n  outline: none;\n}\n\n:host(#{$prefix}-multi-select[ai-label])\n  .#{$prefix}--list-box__wrapper--decorator {\n  @include ai-gradient;\n\n  @if flags.enabled('enable-v12-release') {\n    // Reset the bottom-edge color override from @include ai-gradient so the\n    // border-box gradient layer controls all four sides uniformly.\n    background:\n      linear-gradient(\n          0deg,\n          $ai-aura-start-sm 0%,\n          15%,\n          $ai-aura-end 50%,\n          transparent 100%\n        )\n        padding-box,\n      linear-gradient($field, $field) padding-box,\n      // (ai-border-start → ai-border-end), mirroring the default v12 border gradient\n      linear-gradient(\n          to bottom,\n          $ai-border-start calc(100% - 4px),\n          $ai-border-strong 100%\n        )\n        border-box;\n    border-block-end-color: transparent;\n  }\n}\n\n@if not flags.enabled('enable-v12-release') {\n  :host(#{$prefix}-multi-select[item-clicked]),\n  :host(#{$prefix}-multi-select[has-value]) {\n    .#{$prefix}--list-box__field,\n    .#{$prefix}--multi-select--invalid {\n      /* stylelint-disable-next-line declaration-no-important */\n      outline: 1px solid $focus !important;\n      /* stylelint-disable-next-line declaration-no-important */\n      outline-offset: -1px !important;\n    }\n  }\n}\n\n:host(\n    #{$prefix}-multi-select[warn]:not([invalid]):not([ai-label]):not(\n        [disabled]\n      ):not([read-only])\n  ) {\n  .#{$prefix}--form__helper-text {\n    color: $text-primary;\n  }\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-10;\n    }\n  }\n}\n\n:host(\n    #{$prefix}-multi-select[warn][invalid]:not([ai-label]):not([disabled]):not(\n        [read-only]\n      )\n  ) {\n  .#{$prefix}--list-box {\n    .#{$prefix}--list-box__field {\n      padding-inline-end: $spacing-10;\n    }\n  }\n}\n\n:host(#{$prefix}-multi-select[disabled]) {\n  .#{$prefix}--list-box__field,\n  .#{$prefix}--list-box__selection {\n    pointer-events: none;\n  }\n  .#{$prefix}--list-box__field:focus,\n  .#{$prefix}--list-box__selection:focus {\n    /* stylelint-disable-next-line declaration-no-important */\n    outline: none !important;\n  }\n}\n\n@include emit-layout-tokens-to-shadow-host('#{$prefix}-multi-select');\n"],"mappings":""}

package/es/components/notification/actionable-notification-button.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/components/notification/actionable-notification-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actionable-notification-button.d.ts","sourceRoot":"","sources":["../../../src/components/notification/actionable-notification-button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAIzC;;;;GAIG;AACH,cACM,+BAAgC,SAAQ,SAAS;IACrD,MAAM,CAAC,iBAAiB,KAAA;IAUxB,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,+BAA+B,CAAC"}
+{"version":3,"file":"actionable-notification-button.d.ts","sourceRoot":"","sources":["../../../src/components/notification/actionable-notification-button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAIzC;;;;GAIG;AACH,cACM,+BAAgC,SAAQ,SAAS;IACrD,MAAM,CAAC,iBAAiB,KAAA;IASxB,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,+BAA+B,CAAC"}

package/es/components/notification/actionable-notification-button.js

@@ -12,7 +12,7 @@ import button_default from "../button/button.js";
 import actionable_notification_default from "./actionable-notification.scss.js";
 //#region src/components/notification/actionable-notification-button.ts
 /**
-* Copyright IBM Corp. 2019, 2024
+* Copyright IBM Corp. 2019, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -25,7 +25,7 @@ import actionable_notification_default from "./actionable-notification.scss.js";
 let CDSActionableNotificationButton = class CDSActionableNotificationButton extends button_default {
 	update(changedProperties) {
 		super.update(changedProperties);
-		this.shadowRoot.getElementById("button")?.classList.add(`cds--actionable-notification__action-button`);
+		this.shadowRoot?.getElementById("button")?.classList.add(`cds--actionable-notification__action-button`);
 		this.setAttribute("size", "sm");
 	}
 	static {

package/es/components/notification/actionable-notification-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"actionable-notification-button.js","names":["CDSButton","styles","customElement"],"sources":["../../../src/components/notification/actionable-notification-button.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { prefix } from '../../globals/settings';\nimport CDSButton from '../button/button';\nimport styles from './actionable-notification.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Actionable notification action button.\n *\n * @element cds-actionable-notification-button\n */\n@customElement(`${prefix}-actionable-notification-button`)\nclass CDSActionableNotificationButton extends CDSButton {\n  update(changedProperties) {\n    super.update(changedProperties);\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n    this.shadowRoot!.getElementById('button')?.classList.add(\n      `${prefix}--actionable-notification__action-button`\n    );\n\n    this.setAttribute('size', 'sm');\n  }\n\n  static styles = styles;\n}\n\nexport default CDSActionableNotificationButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,kCAAA,MACM,wCAAwCA,eAAU;CACtD,OAAO,mBAAmB;EACxB,MAAM,OAAO,iBAAiB;EAE9B,KAAK,WAAY,eAAe,QAAQ,CAAC,EAAE,UAAU,IACnD,6CACF;EAEA,KAAK,aAAa,QAAQ,IAAI;CAChC;;gBAEgBC;;AAClB;8CAbCC,cAAc,oCAA0C,CAAA,GAAA,+BAAA;AAezD,IAAA,yCAAe"}
+{"version":3,"file":"actionable-notification-button.js","names":["CDSButton","styles","customElement"],"sources":["../../../src/components/notification/actionable-notification-button.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { prefix } from '../../globals/settings';\nimport CDSButton from '../button/button';\nimport styles from './actionable-notification.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Actionable notification action button.\n *\n * @element cds-actionable-notification-button\n */\n@customElement(`${prefix}-actionable-notification-button`)\nclass CDSActionableNotificationButton extends CDSButton {\n  update(changedProperties) {\n    super.update(changedProperties);\n    this.shadowRoot\n      ?.getElementById('button')\n      ?.classList.add(`${prefix}--actionable-notification__action-button`);\n\n    this.setAttribute('size', 'sm');\n  }\n\n  static styles = styles;\n}\n\nexport default CDSActionableNotificationButton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiBA,IAAA,kCAAA,MACM,wCAAwCA,eAAU;CACtD,OAAO,mBAAmB;EACxB,MAAM,OAAO,iBAAiB;EAC9B,KAAK,YACD,eAAe,QAAQ,CAAC,EACxB,UAAU,IAAI,6CAAmD;EAErE,KAAK,aAAa,QAAQ,IAAI;CAChC;;gBAEgBC;;AAClB;8CAZCC,cAAc,oCAA0C,CAAA,GAAA,+BAAA;AAczD,IAAA,yCAAe"}

package/es/components/notification/actionable-notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actionable-notification.d.ts","sourceRoot":"","sources":["../../../src/components/notification/actionable-notification.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,QAAQ,CAAC;AAC9D,OAAO,qBAAqB,MAAM,uBAAuB,CAAC;AAM1D;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAC;;;;;;;;;;uBAlBoD,CAAC;;;;;AAkEvD;;;;;;;;;;GAUG;AACH,cACM,yBAA0B,SAAQ,8BAEvC;IACC,SAAS,CAAC,KAAK,oBAAgC;IAE/C;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,iBAAiB,SAAM;IAEvB;;OAEG;IAEH,aAAa,UAAQ;IAErB;;OAEG;IAEH,QAAQ,UAAQ;IAEhB;;OAEG;IAEH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAqB;IAE7C;;;OAGG;IAIH,OAAO,CAAC,cAAc,CAKpB;IAKF,OAAO,CAAC,WAAW,CAqEjB;IAEF,iBAAiB;IAOjB,SAAS,CAAC,WAAW;IAWrB,SAAS,CAAC,WAAW;IAqBrB;;OAEG;IAEH,OAAO,SAAM;IAEb,OAAO,CAAC,iBAAiB,KAAA;IAoCzB,MAAM;IAqBN;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,MAAM;IAMrB;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"actionable-notification.d.ts","sourceRoot":"","sources":["../../../src/components/notification/actionable-notification.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,iBAAiB,EAAqB,MAAM,QAAQ,CAAC;AAC9D,OAAO,qBAAqB,MAAM,uBAAuB,CAAC;AAM1D;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAC;;;;;;;;;;uBAlBoD,CAAC;;;;;AAgEvD;;;;;;;;;;GAUG;AACH,cACM,yBAA0B,SAAQ,8BAEvC;IACC,SAAS,CAAC,KAAK,oBAAgC;IAE/C;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,iBAAiB,SAAM;IAEvB;;OAEG;IAEH,aAAa,UAAQ;IAErB;;OAEG;IAEH,QAAQ,UAAQ;IAEhB;;OAEG;IAEH,OAAO,CAAC,kBAAkB,CAAqB;IAE/C;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAqB;IAE7C;;;OAGG;IAIH,OAAO,CAAC,cAAc,CAKpB;IAKF,OAAO,CAAC,WAAW,CAsEjB;IAEF,iBAAiB;IAOjB,SAAS,CAAC,WAAW;IAWrB,SAAS,CAAC,WAAW;IAqBrB;;OAEG;IAEH,OAAO,SAAM;IAEb,OAAO,CAAC,iBAAiB,KAAA;IAoCzB,MAAM;IAqBN;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,MAAM;IAMrB;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,yBAAyB,CAAC"}

package/es/components/notification/actionable-notification.js

@@ -24,7 +24,7 @@ import InformationSquareFilled20 from "@carbon/icons/es/information--square--fil
 import WarningFilled20 from "@carbon/icons/es/warning--filled/20.js";
 //#region src/components/notification/actionable-notification.ts
 /**
-* Copyright IBM Corp. 2019, 2025
+* Copyright IBM Corp. 2019, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -98,14 +98,14 @@ let CDSActionableNotification = class CDSActionableNotification extends HostList
 			const { selectorTabbable: selectorTabbableForActionableNotification } = this.constructor;
 			if (open && this.getAttribute("role") === "alertdialog" && relatedTarget && !(relatedTarget instanceof _CDSActionableNotification) && oldContains && !currentContains) {
 				const comparisonResult = target.compareDocumentPosition(relatedTarget);
-				const shadowElems = this.shadowRoot.querySelectorAll(selectorTabbableForActionableNotification);
+				const shadowElems = this.shadowRoot?.querySelectorAll(selectorTabbableForActionableNotification);
 				const lightElems = this.querySelectorAll(selectorTabbableForActionableNotification);
 				if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {
 					await this.constructor._delay();
-					if (!tryFocusElems(shadowElems, true) && !tryFocusElems(lightElems, true) && relatedTarget !== this) this.focus();
+					if ((!shadowElems || !tryFocusElems(shadowElems, true)) && !tryFocusElems(lightElems, true) && relatedTarget !== this) this.focus();
 				} else if (relatedTarget === endSentinelNode || comparisonResult & FOLLOWING) {
 					await this.constructor._delay();
-					if (!tryFocusElems(lightElems) && !tryFocusElems(shadowElems)) this.focus();
+					if (!tryFocusElems(lightElems) && (!shadowElems || !tryFocusElems(shadowElems))) this.focus();
 				}
 			}
 		};

package/es/components/notification/actionable-notification.js.map

@@ -1 +1 @@
-{"version":3,"file":"actionable-notification.js","names":["CDSInlineNotification","styles","customElement"],"sources":["../../../src/components/notification/actionable-notification.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { html } from 'lit';\nimport CheckmarkFilled20 from '@carbon/icons/es/checkmark--filled/20.js';\nimport InformationFilled20 from '@carbon/icons/es/information--filled/20.js';\nimport InformationSquareFilled20 from '@carbon/icons/es/information--square--filled/20.js';\nimport WarningFilled20 from '@carbon/icons/es/warning--filled/20.js';\nimport WarningAltFilled20 from '@carbon/icons/es/warning--alt--filled/20.js';\nimport ErrorFilled20 from '@carbon/icons/es/error--filled/20.js';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix, selectorTabbable } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { NOTIFICATION_TYPE, NOTIFICATION_KIND } from './defs';\nimport CDSInlineNotification from './inline-notification';\nimport styles from './actionable-notification.scss?lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSButton from '../button/button';\n\n/**\n * The default icons, keyed by notification kind.\n */\nexport const iconsForKinds = {\n  [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,\n  [NOTIFICATION_KIND.INFO]: InformationFilled20,\n  [NOTIFICATION_KIND.INFO_SQUARE]: InformationSquareFilled20,\n  [NOTIFICATION_KIND.WARNING]: WarningFilled20,\n  [NOTIFICATION_KIND.WARNING_ALT]: WarningAltFilled20,\n  [NOTIFICATION_KIND.ERROR]: ErrorFilled20,\n};\n\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse = false) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      const active = elem.ownerDocument!.activeElement;\n      if (\n        active === elem ||\n        active?.contains(elem) ||\n        active?.shadowRoot?.contains(elem)\n      ) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      const active = elem.ownerDocument!.activeElement;\n      if (\n        active === elem ||\n        active?.contains(elem) ||\n        active?.shadowRoot?.contains(elem)\n      ) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * Actionable notification.\n *\n * @element cds-actionable-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires cds-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires cds-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-actionable-notification`)\nclass CDSActionableNotification extends HostListenerMixin(\n  CDSInlineNotification\n) {\n  protected _type = NOTIFICATION_TYPE.ACTIONABLE;\n\n  /**\n   * Inline notification type.\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /**\n   * Pass in the action button label that will be rendered within the ActionableNotification.\n   */\n  @property({ type: String, reflect: true, attribute: 'action-button-label' })\n  actionButtonLabel = '';\n\n  /**\n   * Specify if pressing the escape key should close notifications\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'close-on-escape' })\n  closeOnEscape = true;\n\n  /**\n   * Specify if focus should be moved to the component when the notification contains actions\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'has-focus' })\n  hasFocus = true;\n\n  /**\n   * Node to track focus going outside of actionable notification content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of actionable notification content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Handles `keydown` event on this event.\n   * Escape will close the notification if `closeOnEscape` is true\n   */\n  @HostListener('keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeyDown = async (event: KeyboardEvent) => {\n    const { key } = event;\n    if (this.closeOnEscape && key === 'Escape') {\n      this.open = false;\n    }\n  };\n\n  @HostListener('shadowRoot:focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    const {\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n    const oldContains =\n      target !== this &&\n      (this.contains(target as Node) ||\n        (this.shadowRoot?.contains(target as Node) &&\n          target !== (startSentinelNode as Node) &&\n          target !== (endSentinelNode as Node)));\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (startSentinelNode as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This notification is open\n    // * Notification role attribute is set to 'alertdialog'\n    // * The viewport still has focus\n    // * Notification body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForActionableNotification } = this\n      .constructor as typeof CDSActionableNotification;\n    if (\n      open &&\n      this.getAttribute('role') === 'alertdialog' &&\n      relatedTarget &&\n      !(relatedTarget instanceof CDSActionableNotification) &&\n      oldContains &&\n      !currentContains\n    ) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n      // tabbable elements in Shadow root\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      const shadowElems = this.shadowRoot!.querySelectorAll(\n        selectorTabbableForActionableNotification\n      );\n      // tabbable elements in light DOM\n      const lightElems = this.querySelectorAll(\n        selectorTabbableForActionableNotification\n      );\n\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof CDSActionableNotification)._delay();\n        if (\n          !tryFocusElems(shadowElems as NodeListOf<HTMLElement>, true) &&\n          !tryFocusElems(lightElems as NodeListOf<HTMLElement>, true) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      } else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof CDSActionableNotification)._delay();\n        if (\n          !tryFocusElems(lightElems as NodeListOf<HTMLElement>) &&\n          !tryFocusElems(shadowElems as NodeListOf<HTMLElement>)\n        ) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'alertdialog');\n    }\n    super.connectedCallback();\n  }\n\n  protected _renderIcon() {\n    const { statusIconDescription, kind, inline } = this;\n    const IconComponent = iconsForKinds[kind];\n    return !IconComponent\n      ? undefined\n      : iconLoader(IconComponent, {\n          class: `${prefix}--${inline ? 'inline' : 'toast'}-notification__icon`,\n          'aria-label': statusIconDescription,\n        });\n  }\n\n  protected _renderText() {\n    const { caption, subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__text-wrapper\">\n        <div class=\"${prefix}--${type}-notification__content\">\n          <div class=\"${prefix}--${type}-notification__title\">\n            ${title}<slot name=\"title\"></slot>\n          </div>\n          <div class=\"${prefix}--${type}-notification__subtitle\">\n            ${subtitle}<slot name=\"subtitle\"></slot>\n          </div>\n          ${caption &&\n          html`<div class=\"${prefix}--${type}-notification__caption\">\n            ${caption}<slot name=\"caption\"></slot>\n          </div>`}\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The caption.\n   */\n  @property()\n  caption = '';\n\n  updated(changedProperties) {\n    super.updated(changedProperties);\n    const button = this.querySelector(\n      (this.constructor as typeof CDSActionableNotification)\n        .selectorActionButton\n    );\n    if (changedProperties.has('inline')) {\n      button?.setAttribute('kind', this.inline ? 'ghost' : 'tertiary');\n    }\n    if (changedProperties.has('lowContrast')) {\n      if (this.lowContrast) {\n        button?.setAttribute('low-contrast', 'true');\n      } else {\n        button?.removeAttribute('low-contrast');\n      }\n    }\n    if (changedProperties.has('hideCloseButton')) {\n      if (this.hideCloseButton) {\n        button?.setAttribute('hide-close-button', 'true');\n      } else {\n        button?.removeAttribute('hide-close-button');\n      }\n    }\n    if (changedProperties.has('hasFocus')) {\n      if (this.hasFocus) {\n        if (button) {\n          (button as CDSButton).updateComplete.then(() => {\n            (button as HTMLElement).focus();\n          });\n        } else {\n          this.focus();\n        }\n      }\n    }\n  }\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      <a\n        id=\"start-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderIcon()} ${this._renderText()}\n      </div>\n      <slot name=\"action\"></slot>\n      ${this._renderButton()}\n      <a\n        id=\"end-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n    `;\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * A selector that will return the action button element\n   */\n  static get selectorActionButton() {\n    return `${prefix}-actionable-notification-button`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSActionableNotification;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,gBAAgB;cACE;WACH;kBACO;cACJ;kBACI;YACN;AAC7B;AAEA,MAAM,YACJ,KAAK,8BAA8B,KAAK;AAE1C,MAAM,YACJ,KAAK,8BAA8B,KAAK;;;;;;;;AAS1C,SAAS,cAAc,OAAgC,UAAU,OAAO;CACtE,IAAI,CAAC,SACH,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,EAAE,GAAG;EACrC,MAAM,OAAO,MAAM;EACnB,KAAK,MAAM;EAEX,MAAM,SAAS,KAAK,cAAe;EACnC,IACE,WAAW,QACX,QAAQ,SAAS,IAAI,KACrB,QAAQ,YAAY,SAAS,IAAI,GAEjC,OAAO;CAEX;MAEA,KAAK,IAAI,IAAI,MAAM,SAAS,GAAG,KAAK,GAAG,EAAE,GAAG;EAC1C,MAAM,OAAO,MAAM;EACnB,KAAK,MAAM;EAEX,MAAM,SAAS,KAAK,cAAe;EACnC,IACE,WAAW,QACX,QAAQ,SAAS,IAAI,KACrB,QAAQ,YAAY,SAAS,IAAI,GAEjC,OAAO;CAEX;CAEF,OAAO;AACT;;;;;;;;;;;;AAaA,IAAA,4BAAA,MACM,kCAAkC,kBACtCA,2BACF,CAAC,CAAC;;;;;;;gBAOS;2BAMW;uBAMJ;kBAML;wBAqBc,OAAO,UAAyB;GACvD,MAAM,EAAE,QAAQ;GAChB,IAAI,KAAK,iBAAiB,QAAQ,UAChC,KAAK,OAAO;EAEhB;qBAKsB,OAAO,EAAE,QAAQ,oBAAgC;GACrE,MAAM,EACJ,MACA,oBAAoB,mBACpB,kBAAkB,oBAChB;GACJ,MAAM,cACJ,WAAW,SACV,KAAK,SAAS,MAAc,KAC1B,KAAK,YAAY,SAAS,MAAc,KACvC,WAAY,qBACZ,WAAY;GAClB,MAAM,kBACJ,kBAAkB,SACjB,KAAK,SAAS,aAAqB,KACjC,KAAK,YAAY,SAAS,aAAqB,KAC9C,kBAAmB,qBACnB,kBAAmB;GAOzB,MAAM,EAAE,kBAAkB,8CAA8C,KACrE;GACH,IACE,QACA,KAAK,aAAa,MAAM,MAAM,iBAC9B,iBACA,EAAE,yBAAA,+BACF,eACA,CAAC,iBACD;IACA,MAAM,mBAAoB,OAAgB,wBACxC,aACF;IAGA,MAAM,cAAc,KAAK,WAAY,iBACnC,yCACF;IAEA,MAAM,aAAa,KAAK,iBACtB,yCACF;IAEA,IAAI,kBAAkB,qBAAqB,mBAAmB,WAAW;KACvE,MAAO,KAAK,YAAiD,OAAO;KACpE,IACE,CAAC,cAAc,aAAwC,IAAI,KAC3D,CAAC,cAAc,YAAuC,IAAI,KAC1D,kBAAkB,MAElB,KAAK,MAAM;IAEf,OAAO,IACL,kBAAkB,mBAClB,mBAAmB,WACnB;KACA,MAAO,KAAK,YAAiD,OAAO;KACpE,IACE,CAAC,cAAc,UAAqC,KACpD,CAAC,cAAc,WAAsC,GAErD,KAAK,MAAM;IAEf;GACF;EACF;iBA6CU;;CA3CV,oBAAoB;EAClB,IAAI,CAAC,KAAK,aAAa,MAAM,GAC3B,KAAK,aAAa,QAAQ,aAAa;EAEzC,MAAM,kBAAkB;CAC1B;CAEA,cAAwB;EACtB,MAAM,EAAE,uBAAuB,MAAM,WAAW;EAChD,MAAM,gBAAgB,cAAc;EACpC,OAAO,CAAC,gBACJ,KAAA,IACA,WAAW,eAAe;GACxB,OAAO,QAAc,SAAS,WAAW,QAAQ;GACjD,cAAc;EAChB,CAAC;CACP;CAEA,cAAwB;EACtB,MAAM,EAAE,SAAS,UAAU,OAAO,OAAO,SAAS;EAClD,OAAO,IAAI;0BACY,IAAI,KAAK;4BACP,IAAI,KAAK;8BACP,IAAI,KAAK;cAC1B,MAAM;;8BAEW,IAAI,KAAK;cAC1B,SAAS;;YAEX,WACF,IAAI,eAAA,MAAsB,IAAI,KAAK;cAC/B,QAAQ;kBACJ;;;;;CAKhB;CAQA,QAAQ,mBAAmB;EACzB,MAAM,QAAQ,iBAAiB;EAC/B,MAAM,SAAS,KAAK,cACjB,KAAK,YACH,oBACL;EACA,IAAI,kBAAkB,IAAI,QAAQ,GAChC,QAAQ,aAAa,QAAQ,KAAK,SAAS,UAAU,UAAU;EAEjE,IAAI,kBAAkB,IAAI,aAAa,GACrC,IAAI,KAAK,aACP,QAAQ,aAAa,gBAAgB,MAAM;OAE3C,QAAQ,gBAAgB,cAAc;EAG1C,IAAI,kBAAkB,IAAI,iBAAiB,GACzC,IAAI,KAAK,iBACP,QAAQ,aAAa,qBAAqB,MAAM;OAEhD,QAAQ,gBAAgB,mBAAmB;EAG/C,IAAI,kBAAkB,IAAI,UAAU;OAC9B,KAAK,UACP,IAAI,QACF,OAAsB,eAAe,WAAW;IAC9C,OAAwB,MAAM;GAChC,CAAC;QAED,KAAK,MAAM;EAAA;CAInB;CAEA,SAAS;EACP,MAAM,EAAE,OAAO,SAAS;EACxB,OAAO,IAAI;;;uBAGS;;;0BAGG,IAAI,KAAK;UAC1B,KAAK,YAAY,EAAE,GAAG,KAAK,YAAY,EAAE;;;QAG3C,KAAK,cAAc,EAAE;;;uBAGL;;;;CAItB;;;;;CAMA,OAAe,OAAO,KAAK,GAAG;EAC5B,OAAO,IAAI,SAAS,YAAY;GAC9B,WAAW,SAAS,EAAE;EACxB,CAAC;CACH;;;;CAKA,WAAW,mBAAmB;EAC5B,OAAO;CACT;;;;CAKA,WAAW,uBAAuB;EAChC,OAAO;CACT;;gBAEgBC;;AAClB;YAxPG,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,0BAAA,WAAA,UAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAsB,CAAC,CAAA,GAAA,0BAAA,WAAA,qBAAA,KAAA,CAAA;YAM1E,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAkB,CAAC,CAAA,GAAA,0BAAA,WAAA,iBAAA,KAAA,CAAA;YAMvE,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAY,CAAC,CAAA,GAAA,0BAAA,WAAA,YAAA,KAAA,CAAA;YAMjE,MAAM,iBAAiB,CAAA,GAAA,0BAAA,WAAA,sBAAA,KAAA,CAAA;YAMvB,MAAM,eAAe,CAAA,GAAA,0BAAA,WAAA,oBAAA,KAAA,CAAA;YAOrB,aAAa,SAAS,CAAA,GAAA,0BAAA,WAAA,kBAAA,KAAA,CAAA;YAUtB,aAAa,qBAAqB,CAAA,GAAA,0BAAA,WAAA,eAAA,KAAA,CAAA;YAoHlC,SAAS,CAAA,GAAA,0BAAA,WAAA,WAAA,KAAA,CAAA;qEA5KXC,cAAc,6BAAmC,CAAA,GAAA,yBAAA;AAmQlD,IAAA,kCAAe"}
+{"version":3,"file":"actionable-notification.js","names":["CDSInlineNotification","styles","customElement"],"sources":["../../../src/components/notification/actionable-notification.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { html } from 'lit';\nimport CheckmarkFilled20 from '@carbon/icons/es/checkmark--filled/20.js';\nimport InformationFilled20 from '@carbon/icons/es/information--filled/20.js';\nimport InformationSquareFilled20 from '@carbon/icons/es/information--square--filled/20.js';\nimport WarningFilled20 from '@carbon/icons/es/warning--filled/20.js';\nimport WarningAltFilled20 from '@carbon/icons/es/warning--alt--filled/20.js';\nimport ErrorFilled20 from '@carbon/icons/es/error--filled/20.js';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix, selectorTabbable } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { NOTIFICATION_TYPE, NOTIFICATION_KIND } from './defs';\nimport CDSInlineNotification from './inline-notification';\nimport styles from './actionable-notification.scss?lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSButton from '../button/button';\n\n/**\n * The default icons, keyed by notification kind.\n */\nexport const iconsForKinds = {\n  [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,\n  [NOTIFICATION_KIND.INFO]: InformationFilled20,\n  [NOTIFICATION_KIND.INFO_SQUARE]: InformationSquareFilled20,\n  [NOTIFICATION_KIND.WARNING]: WarningFilled20,\n  [NOTIFICATION_KIND.WARNING_ALT]: WarningAltFilled20,\n  [NOTIFICATION_KIND.ERROR]: ErrorFilled20,\n};\n\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse = false) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      const active = elem.ownerDocument.activeElement;\n      if (\n        active === elem ||\n        active?.contains(elem) ||\n        active?.shadowRoot?.contains(elem)\n      ) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      const active = elem.ownerDocument.activeElement;\n      if (\n        active === elem ||\n        active?.contains(elem) ||\n        active?.shadowRoot?.contains(elem)\n      ) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * Actionable notification.\n *\n * @element cds-actionable-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires cds-notification-beingclosed\n *   The custom event fired before this notification is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this notification.\n * @fires cds-notification-closed - The custom event fired after this notification is closed upon a user gesture.\n */\n@customElement(`${prefix}-actionable-notification`)\nclass CDSActionableNotification extends HostListenerMixin(\n  CDSInlineNotification\n) {\n  protected _type = NOTIFICATION_TYPE.ACTIONABLE;\n\n  /**\n   * Inline notification type.\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /**\n   * Pass in the action button label that will be rendered within the ActionableNotification.\n   */\n  @property({ type: String, reflect: true, attribute: 'action-button-label' })\n  actionButtonLabel = '';\n\n  /**\n   * Specify if pressing the escape key should close notifications\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'close-on-escape' })\n  closeOnEscape = true;\n\n  /**\n   * Specify if focus should be moved to the component when the notification contains actions\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'has-focus' })\n  hasFocus = true;\n\n  /**\n   * Node to track focus going outside of actionable notification content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of actionable notification content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Handles `keydown` event on this event.\n   * Escape will close the notification if `closeOnEscape` is true\n   */\n  @HostListener('keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeyDown = async (event: KeyboardEvent) => {\n    const { key } = event;\n    if (this.closeOnEscape && key === 'Escape') {\n      this.open = false;\n    }\n  };\n\n  @HostListener('shadowRoot:focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    const {\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n    const oldContains =\n      target !== this &&\n      (this.contains(target as Node) ||\n        (this.shadowRoot?.contains(target as Node) &&\n          target !== (startSentinelNode as Node) &&\n          target !== (endSentinelNode as Node)));\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (startSentinelNode as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This notification is open\n    // * Notification role attribute is set to 'alertdialog'\n    // * The viewport still has focus\n    // * Notification body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForActionableNotification } = this\n      .constructor as typeof CDSActionableNotification;\n    if (\n      open &&\n      this.getAttribute('role') === 'alertdialog' &&\n      relatedTarget &&\n      !(relatedTarget instanceof CDSActionableNotification) &&\n      oldContains &&\n      !currentContains\n    ) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n      // tabbable elements in Shadow root\n      const shadowElems = this.shadowRoot?.querySelectorAll(\n        selectorTabbableForActionableNotification\n      );\n      // tabbable elements in light DOM\n      const lightElems = this.querySelectorAll(\n        selectorTabbableForActionableNotification\n      );\n\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof CDSActionableNotification)._delay();\n        if (\n          (!shadowElems ||\n            !tryFocusElems(shadowElems as NodeListOf<HTMLElement>, true)) &&\n          !tryFocusElems(lightElems as NodeListOf<HTMLElement>, true) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      } else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof CDSActionableNotification)._delay();\n        if (\n          !tryFocusElems(lightElems as NodeListOf<HTMLElement>) &&\n          (!shadowElems ||\n            !tryFocusElems(shadowElems as NodeListOf<HTMLElement>))\n        ) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'alertdialog');\n    }\n    super.connectedCallback();\n  }\n\n  protected _renderIcon() {\n    const { statusIconDescription, kind, inline } = this;\n    const IconComponent = iconsForKinds[kind];\n    return !IconComponent\n      ? undefined\n      : iconLoader(IconComponent, {\n          class: `${prefix}--${inline ? 'inline' : 'toast'}-notification__icon`,\n          'aria-label': statusIconDescription,\n        });\n  }\n\n  protected _renderText() {\n    const { caption, subtitle, title, _type: type } = this;\n    return html`\n      <div class=\"${prefix}--${type}-notification__text-wrapper\">\n        <div class=\"${prefix}--${type}-notification__content\">\n          <div class=\"${prefix}--${type}-notification__title\">\n            ${title}<slot name=\"title\"></slot>\n          </div>\n          <div class=\"${prefix}--${type}-notification__subtitle\">\n            ${subtitle}<slot name=\"subtitle\"></slot>\n          </div>\n          ${caption &&\n          html`<div class=\"${prefix}--${type}-notification__caption\">\n            ${caption}<slot name=\"caption\"></slot>\n          </div>`}\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The caption.\n   */\n  @property()\n  caption = '';\n\n  updated(changedProperties) {\n    super.updated(changedProperties);\n    const button = this.querySelector(\n      (this.constructor as typeof CDSActionableNotification)\n        .selectorActionButton\n    );\n    if (changedProperties.has('inline')) {\n      button?.setAttribute('kind', this.inline ? 'ghost' : 'tertiary');\n    }\n    if (changedProperties.has('lowContrast')) {\n      if (this.lowContrast) {\n        button?.setAttribute('low-contrast', 'true');\n      } else {\n        button?.removeAttribute('low-contrast');\n      }\n    }\n    if (changedProperties.has('hideCloseButton')) {\n      if (this.hideCloseButton) {\n        button?.setAttribute('hide-close-button', 'true');\n      } else {\n        button?.removeAttribute('hide-close-button');\n      }\n    }\n    if (changedProperties.has('hasFocus')) {\n      if (this.hasFocus) {\n        if (button) {\n          (button as CDSButton).updateComplete.then(() => {\n            (button as HTMLElement).focus();\n          });\n        } else {\n          this.focus();\n        }\n      }\n    }\n  }\n\n  render() {\n    const { _type: type } = this;\n    return html`\n      <a\n        id=\"start-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n      <div class=\"${prefix}--${type}-notification__details\">\n        ${this._renderIcon()} ${this._renderText()}\n      </div>\n      <slot name=\"action\"></slot>\n      ${this._renderButton()}\n      <a\n        id=\"end-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n    `;\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * A selector that will return the action button element\n   */\n  static get selectorActionButton() {\n    return `${prefix}-actionable-notification-button`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSActionableNotification;\n"],"mappings":"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"}