@carbon/web-components 2.52.0 → 2.53.0-rc.0

package/es-custom/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. 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//\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\n:host(#{$prefix}-multi-select) {\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  .#{$prefix}--form__helper-text {\n    grid-column: 2;\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(#{$prefix}-multi-select[warn]:not([disabled]):not([read-only])) {\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(#{$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"],"mappings":""}
+{"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\n:host(#{$prefix}-multi-select) {\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"],"mappings":""}

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

@@ -5,12 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 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
@@ -26,16 +25,16 @@ 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(`${prefix}--actionable-notification__action-button`);
+		this.shadowRoot.getElementById("button")?.classList.add(`cds-custom--actionable-notification__action-button`);
 		this.setAttribute("size", "sm");
 	}
 	static {
 		this.styles = actionable_notification_default;
 	}
 };
-CDSActionableNotificationButton = __decorate([carbonElement(`${prefix}-actionable-notification-button`)], CDSActionableNotificationButton);
+CDSActionableNotificationButton = __decorate([carbonElement(`cds-custom-actionable-notification-button`)], CDSActionableNotificationButton);
 var actionable_notification_button_default = CDSActionableNotificationButton;
-
 //#endregion
 export { actionable_notification_button_default as default };
+
 //# sourceMappingURL=actionable-notification-button.js.map

package/es-custom/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-custom-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,4CACM,wCAAwCA,eAAU;CACtD,OAAO,mBAAmB;AACxB,QAAM,OAAO,kBAAkB;AAE/B,OAAK,WAAY,eAAe,SAAS,EAAE,UAAU,IACnD,GAAG,OAAO,0CACX;AAED,OAAK,aAAa,QAAQ,KAAK;;;gBAGjBC;;;8CAZjBC,cAAc,GAAG,OAAO,iCAAiC;AAe1D,6CAAe"}
+{"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-custom-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;AACxB,QAAM,OAAO,kBAAkB;AAE/B,OAAK,WAAY,eAAe,SAAS,EAAE,UAAU,IACnD,8CACD;AAED,OAAK,aAAa,QAAQ,KAAK;;;gBAGjBC;;;8CAZjBC,cAAc,qCAA2C,CAAA,EAAA,gCAAA;AAe1D,IAAA,yCAAe"}

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

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix, selectorTabbable } from "../../globals/settings.js";
+import { selectorTabbable } from "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
-import { NOTIFICATION_KIND, NOTIFICATION_TYPE } from "./defs.js";
+import "./defs.js";
 import inline_notification_default from "./inline-notification.js";
 import actionable_notification_default$1 from "./actionable-notification.scss.js";
 import { html } from "lit";
@@ -22,7 +22,6 @@ import CheckmarkFilled20 from "@carbon/icons/es/checkmark--filled/20.js";
 import InformationFilled20 from "@carbon/icons/es/information--filled/20.js";
 import InformationSquareFilled20 from "@carbon/icons/es/information--square--filled/20.js";
 import WarningFilled20 from "@carbon/icons/es/warning--filled/20.js";
-
 //#region src/components/notification/actionable-notification.ts
 /**
 * Copyright IBM Corp. 2019, 2025
@@ -35,12 +34,12 @@ var _CDSActionableNotification;
 * The default icons, keyed by notification kind.
 */
 const iconsForKinds = {
-	[NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,
-	[NOTIFICATION_KIND.INFO]: InformationFilled20,
-	[NOTIFICATION_KIND.INFO_SQUARE]: InformationSquareFilled20,
-	[NOTIFICATION_KIND.WARNING]: WarningFilled20,
-	[NOTIFICATION_KIND.WARNING_ALT]: WarningAltFilled20,
-	[NOTIFICATION_KIND.ERROR]: ErrorFilled20
+	["success"]: CheckmarkFilled20,
+	["info"]: InformationFilled20,
+	["info-square"]: InformationSquareFilled20,
+	["warning"]: WarningFilled20,
+	["warning-alt"]: WarningAltFilled20,
+	["error"]: ErrorFilled20
 };
 const PRECEDING = Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
 const FOLLOWING = Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
@@ -83,7 +82,7 @@ let CDSActionableNotification = class CDSActionableNotification extends HostList
 	}
 	constructor(..._args) {
 		super(..._args);
-		this._type = NOTIFICATION_TYPE.ACTIONABLE;
+		this._type = "actionable";
 		this.inline = false;
 		this.actionButtonLabel = "";
 		this.closeOnEscape = true;
@@ -119,20 +118,20 @@ let CDSActionableNotification = class CDSActionableNotification extends HostList
 	_renderIcon() {
 		const { kind, inline } = this;
 		const IconComponent = iconsForKinds[kind];
-		return !IconComponent ? void 0 : iconLoader(IconComponent, { class: `${prefix}--${inline ? "inline" : "toast"}-notification__icon` });
+		return !IconComponent ? void 0 : iconLoader(IconComponent, { class: `cds-custom--${inline ? "inline" : "toast"}-notification__icon` });
 	}
 	_renderText() {
 		const { caption, subtitle, title, _type: type } = this;
 		return html`
-      <div class="${prefix}--${type}-notification__text-wrapper">
-        <div class="${prefix}--${type}-notification__content">
-          <div class="${prefix}--${type}-notification__title">
+      <div class="${"cds-custom"}--${type}-notification__text-wrapper">
+        <div class="${"cds-custom"}--${type}-notification__content">
+          <div class="${"cds-custom"}--${type}-notification__title">
             ${title}<slot name="title"></slot>
           </div>
-          <div class="${prefix}--${type}-notification__subtitle">
+          <div class="${"cds-custom"}--${type}-notification__subtitle">
             ${subtitle}<slot name="subtitle"></slot>
           </div>
-          ${caption && html`<div class="${prefix}--${type}-notification__caption">
+          ${caption && html`<div class="${"cds-custom"}--${type}-notification__caption">
             ${caption}<slot name="caption"></slot>
           </div>`}
           <slot></slot>
@@ -160,17 +159,17 @@ let CDSActionableNotification = class CDSActionableNotification extends HostList
 		return html`
       <a
         id="start-sentinel"
-        class="${prefix}--visually-hidden"
+        class="${"cds-custom"}--visually-hidden"
         href="javascript:void 0"
         role="navigation"></a>
-      <div class="${prefix}--${type}-notification__details">
+      <div class="${"cds-custom"}--${type}-notification__details">
         ${this._renderIcon()} ${this._renderText()}
       </div>
       <slot name="action"></slot>
       ${this._renderButton()}
       <a
         id="end-sentinel"
-        class="${prefix}--visually-hidden"
+        class="${"cds-custom"}--visually-hidden"
         href="javascript:void 0"
         role="navigation"></a>
     `;
@@ -194,7 +193,7 @@ let CDSActionableNotification = class CDSActionableNotification extends HostList
 	* A selector that will return the action button element
 	*/
 	static get selectorActionButton() {
-		return `${prefix}-actionable-notification-button`;
+		return `cds-custom-actionable-notification-button`;
 	}
 	static {
 		this.styles = actionable_notification_default$1;
@@ -224,9 +223,9 @@ __decorate([query("#end-sentinel")], CDSActionableNotification.prototype, "_endS
 __decorate([HostListener("keydown")], CDSActionableNotification.prototype, "_handleKeyDown", void 0);
 __decorate([HostListener("shadowRoot:focusout")], CDSActionableNotification.prototype, "_handleBlur", void 0);
 __decorate([property()], CDSActionableNotification.prototype, "caption", void 0);
-CDSActionableNotification = _CDSActionableNotification = __decorate([carbonElement(`${prefix}-actionable-notification`)], CDSActionableNotification);
+CDSActionableNotification = _CDSActionableNotification = __decorate([carbonElement(`cds-custom-actionable-notification`)], CDSActionableNotification);
 var actionable_notification_default = CDSActionableNotification;
-
 //#endregion
 export { actionable_notification_default as default, iconsForKinds };
+
 //# sourceMappingURL=actionable-notification.js.map

package/es-custom/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-custom-actionable-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires cds-custom-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-custom-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 { 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        });\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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"}
+{"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-custom-actionable-notification\n * @slot subtitle - The subtitle.\n * @slot title - The title.\n * @fires cds-custom-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-custom-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 { 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        });\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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"}