npm - @carbon/web-components - Versions diffs - 2.55.0-rc.0 → 2.56.0-rc.0 - Mend

@carbon/web-components 2.55.0-rc.0 → 2.56.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (146) hide show

package/es/components/tabs/tabs.scss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.scss.js","names":[],"sources":["../../../src/components/tabs/tabs.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@use '@carbon/styles/scss/config' as ;\n@use '@carbon/styles/scss/theme' as ;\n@use '@carbon/styles/scss/utilities' as ;\n@use '@carbon/styles/scss/breakpoint' as ;\n@use '@carbon/styles/scss/spacing' as ;\n@use '@carbon/styles/scss/motion' as ;\n@use '@carbon/styles/scss/type' as ;\n@use '@carbon/styles/scss/components/button/index' as ;\n@use '@carbon/styles/scss/components/tabs/index';\n@use '@carbon/styles/scss/components/tabs/vars' as ;\n@use '@carbon/styles/scss/utilities/button-reset';\n@use '@carbon/styles/scss/layout' as ;\n@use '@carbon/styles/scss/utilities/layout';\n@use '@carbon/styles/scss/utilities/convert';\n@use '@carbon/styles/scss/utilities/skeleton' as ;\n\n$inset-transition: inset 110ms motion(standard, productive);\n\n:host(#{$prefix}-tabs),\n:host(#{$prefix}-tabs-skeleton) {\n @extend .#{$prefix}--tabs;\n @include emit-layout-tokens();\n .#{$prefix}--tabs-nav-content-container {\n position: relative;\n overflow: scroll;\n flex: 1 1 0%;\n // for some reason, overflow: hidden shrinks the content\n block-size: $spacing-08;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n / Set to zero-specificity so it can be overridden by dynamic stylesheet /\n :where(.#{$prefix}--tabs-nav-content) {\n position: absolute;\n block-size: 100%;\n inset-inline-start: 0;\n transition: $inset-transition;\n }\n\n .#{$prefix}--tabs-nav {\n position: absolute;\n display: block;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n z-index: 1;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n background-color: var(--tabs-overflow-button-background, $background);\n }\n\n .#{$prefix}--tab--overflow-nav-button--hidden {\n display: none;\n }\n}\n\n:host(#{$prefix}-tabs) {\n @include focus-outline('reset');\n\n .#{$prefix}--tabs-trigger svg {\n block-size: auto;\n inline-size: auto;\n }\n}\n\n:host(#{$prefix}-tabs:focus) {\n .#{$prefix}--tabs-trigger {\n @include focus-outline('outline');\n }\n}\n\n:host(#{$prefix}-tabs[icon-size='default'])\n .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default)\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n block-size: $spacing-08;\n}\n\n:host(#{$prefix}-tabs[icon-size='lg']) .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg)\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tabs[icon-size='default']),\n:host(#{$prefix}-tabs[icon-size='lg']),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg) {\n overflow: visible;\n\n .#{$prefix}--tab--list {\n overflow: visible;\n }\n}\n\n:host(#{$prefix}-tabs[type='contained']) {\n .#{$prefix}--tab--overflow-nav-button {\n background-color: $layer-accent;\n inline-size: $spacing-09;\n\n &:hover {\n background-color: $layer-accent-hover;\n }\n\n &:active {\n background-color: $layer-accent-active;\n }\n }\n}\n\n:host(#{$prefix}-tabs[type='contained'][has-secondary-labels])\n .#{$prefix}--tabs-nav-content-container {\n block-size: $spacing-10;\n}\n\n:host(#{$prefix}-tabs[type='contained'][has-secondary-labels]) #{$prefix}-tab {\n block-size: $spacing-10;\n}\n\n:host(#{$prefix}-tab[type='contained'][secondary-label]) {\n block-size: $spacing-10;\n\n a.#{$prefix}--tabs__nav-link {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0 $spacing-05;\n block-size: $spacing-10;\n line-height: normal;\n }\n\n .#{$prefix}--tabs__nav-item-label-wrapper {\n flex-direction: row;\n align-items: center;\n }\n\n .#{$prefix}--tabs__nav-item-label {\n line-height: var(--cds-body-compact-01-line-height);\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][secondary-label][selected]),\n:host(#{$prefix}-tab[type='contained'][secondary-label][selected]:hover) {\n a.#{$prefix}--tabs__nav-link {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0 $spacing-05;\n line-height: normal;\n }\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n .#{$prefix}--tabs__nav-item-secondary-label {\n @include type-style('label-01');\n\n display: block;\n overflow: hidden;\n color: $text-secondary;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]) {\n .#{$prefix}--tabs__nav-item-secondary-label {\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled]) {\n .#{$prefix}--tabs__nav-item-secondary-label {\n color: $text-on-color-disabled;\n }\n}\n\n:host(#{$prefix}-tabs[type='contained'][full-width]) {\n display: flex;\n inline-size: 100%;\n\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n flex: 1 1 0%;\n }\n\n .#{$prefix}--tabs-nav-content,\n .#{$prefix}--tabs-nav,\n .#{$prefix}--tab--list {\n inline-size: 100%;\n }\n\n .#{$prefix}--tab--list {\n display: flex;\n }\n}\n\n:host(#{$prefix}-tabs[type='contained'][full-width]) #{$prefix}-tab {\n flex: 1 1 0%;\n min-inline-size: 0;\n\n .#{$prefix}--tabs__nav-link {\n overflow: hidden;\n inline-size: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n:host(#{$prefix}-tab),\n:host(#{$prefix}-tab-skeleton) {\n display: flex;\n background: transparent;\n inline-size: 100%;\n\n .#{$prefix}--tabs__nav-item-label-wrapper {\n display: flex;\n align-items: inherit;\n gap: $spacing-03;\n }\n\n .#{$prefix}--tabs__nav-link {\n @include button-reset.reset($width: false);\n @include focus-outline('reset');\n @include type-style('body-compact-01');\n\n position: relative;\n overflow: hidden;\n\n align-items: center;\n padding: $spacing-04 $spacing-05 $spacing-03;\n border-block-end: $tab-underline-color;\n color: $text-secondary;\n inline-size: 100%;\n text-align: start;\n text-decoration: none;\n text-overflow: ellipsis;\n transition:\n border $duration-fast-01 motion(standard, productive),\n outline $duration-fast-01 motion(standard, productive);\n white-space: nowrap;\n\n &:focus,\n &:active {\n @include focus-outline('outline');\n }\n }\n\n outline: none;\n}\n\n:host(#{$prefix}-tab:not([type='contained'])) {\n .#{$prefix}--tabs__nav-link {\n padding-block-end: calc(#{$spacing-03} + #{convert.to-rem(1px)});\n padding-block-start: calc(#{$spacing-04} - #{convert.to-rem(1px)});\n }\n}\n\n:host(#{$prefix}-tab:not([type='contained']))\n + :host(#{$prefix}-tab:not([type='contained'])) {\n margin-inline-start: convert.to-rem(1px);\n}\n\n:host(#{$prefix}-tab[badge-indicator][icon-only]:not([icon-size='lg']))\n #{$prefix}-badge-indicator,\n:host(\n #{$prefix}-tab[badge-indicator].#{$prefix}--tabs__nav-item--icon-only:not(\n .#{$prefix}--tabs__nav-item--icon-only__20\n )\n )\n #{$prefix}-badge-indicator {\n margin-block-start: $spacing-02;\n margin-inline-end: $spacing-02;\n}\n\n:host(#{$prefix}-tab[icon-only]),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only) {\n flex: 0 0 auto;\n block-size: $spacing-08;\n inline-size: $spacing-08;\n\n .#{$prefix}--tabs__nav-item-label-wrapper {\n display: flex;\n }\n\n #{$prefix}-tooltip {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n --#{$prefix}-tooltip-padding-block: #{convert.to-rem(2px)};\n --#{$prefix}-popover-caret-width: #{convert.to-rem(8px)};\n --#{$prefix}-popover-caret-height: #{convert.to-rem(4px)};\n --#{$prefix}-popover-offset: #{convert.to-rem(8px)};\n }\n\n #{$prefix}-tooltip::part(popover-container) {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n }\n\n .#{$prefix}--tabs__nav-link {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n block-size: 100%;\n inline-size: 100%;\n }\n\n ::slotted(svg) {\n display: block;\n fill: currentColor;\n }\n}\n\n:host(#{$prefix}-tab[icon-only]:not([type='contained'])),\n:host(\n #{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:not([type='contained'])\n ) {\n .#{$prefix}--tabs__nav-item-label-wrapper {\n position: relative;\n inset-block-start: convert.to-rem(1px);\n }\n}\n\n:host(#{$prefix}-tab[icon-only][icon-size='lg']),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only__20) {\n block-size: $spacing-09;\n inline-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[selected]) {\n .#{$prefix}--tabs__nav-link {\n @include type-style('heading-compact-01');\n\n border-block-end: $spacing-01 solid $border-interactive;\n\n &,\n // Need to override Carbon core's non-selected focus color\n &:focus,\n &:active {\n color: $text-primary;\n }\n }\n\n display: flex;\n background-color: transparent;\n transition: color $duration-fast-01 motion(standard, productive);\n\n &:hover {\n background-color: transparent;\n }\n}\n\n:host(#{$prefix}-tab:hover:not([selected])) {\n background-color: transparent;\n\n a.#{$prefix}--tabs__nav-link {\n border-block-end: $tab-underline-color-hover;\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-tab[icon-only]:hover),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:hover) {\n box-shadow: none;\n}\n\n:host(#{$prefix}-tabs[type='contained'])\n .#{$prefix}--tabs-nav-content-container {\n block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n background-color: $layer-accent-01;\n\n a.#{$prefix}--tabs__nav-link {\n padding: $spacing-03 $spacing-05;\n block-size: $spacing-09;\n // height - vertical padding\n line-height: calc(#{$spacing-09} - (#{$spacing-03} 2));\n }\n}\n\n:host(#{$prefix}-tab[type='contained']),\n:host(#{$prefix}-tab[type='contained']:hover) {\n a.#{$prefix}--tabs__nav-link {\n border-block-end: none;\n // Draws the border without affecting the inner-content\n box-shadow: rem(-1px) 0 0 0 $border-strong;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][hide-divider])\n a.#{$prefix}--tabs__nav-link {\n box-shadow: rem(-1px) 0 0 0 transparent;\n}\n\n// `[role]` is only for specificity.\n// We have `:not()` usage in the corresponding Carbon core style\n// which puts specificity of \"specific\" scenario though the style is for \"regular\" scenario\n:host(#{$prefix}-tab[disabled][role]),\n:host(#{$prefix}-tab[disabled][role]:hover) {\n background-color: transparent;\n box-shadow: none;\n cursor: not-allowed;\n outline: none;\n\n .#{$prefix}--tabs__nav-link {\n border-block-end: $tab-underline-color;\n color: $tab-text-disabled;\n outline: none;\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled][role])\n .#{$prefix}--tabs__nav-link {\n background-color: $button-disabled;\n border-block-end: none;\n color: $text-on-color-disabled;\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]),\n:host(#{$prefix}-tab[type='contained'][selected]:hover) {\n background-color: $layer-01;\n\n .#{$prefix}--tabs__nav-link {\n border-block-end: none;\n // Draws the border without affecting the inner-content\n box-shadow: inset 0 $spacing-01 0 0 $interactive;\n // height - vertical padding\n line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));\n }\n\n .#{$prefix}--tabs__nav-link:focus,\n .#{$prefix}--tabs__nav-link:active {\n box-shadow: none;\n }\n}\n\n:host(#{$prefix}-tab[type='contained']:hover) {\n background-color: $layer-accent-01;\n}\n:host(#{$prefix}-tab[type='contained']) {\n .#{$prefix}--tabs__nav-link:hover {\n background-color: $layer-accent-hover;\n }\n}\n\n// Disabled tab never gets selected, but we guard for manual addition of `selected` attribute\n:host(#{$prefix}-tab[disabled][selected]),\n:host(#{$prefix}-tab[disabled][selected]:hover),\n:host(#{$prefix}-tab[disabled][in-focus][selected]),\n:host(#{$prefix}-tab[disabled][in-focus][selected]:hover) {\n display: flex;\n background-color: transparent;\n box-shadow: none;\n\n @include focus-outline('reset');\n\n .#{$prefix}--tabs__nav-link {\n @include type-style('body-short-01');\n\n border-block-end: $tab-underline-color;\n\n color: $tab-text-disabled;\n\n &:focus,\n &:active {\n border-block-end-width: 3px;\n }\n }\n}\n\n:host(#{$prefix}-tabs-skeleton) .#{$prefix}--tabs-trigger {\n @include skeleton;\n\n inline-size: rem(100px);\n}\n\n:host(#{$prefix}-tab-skeleton) {\n margin-inline-start: $spacing-01;\n\n .#{$prefix}--tabs__nav-link {\n @include skeleton;\n\n display: flex;\n align-items: center;\n padding: 0 layout.density('padding-inline');\n background-color: transparent;\n block-size: 100%;\n border-block-end: 2px solid $skeleton-element;\n inline-size: 10rem;\n\n &::before {\n display: none;\n content: none;\n }\n }\n\n .#{$prefix}--tabs__nav-item {\n @include reset;\n\n position: relative;\n display: flex;\n flex: 1 0 auto;\n padding: 0;\n cursor: pointer;\n transition: background-color $duration-fast-01 motion(standard, productive);\n }\n\n span {\n @include skeleton;\n\n display: block;\n block-size: convert.to-rem(14px);\n inline-size: 100%;\n }\n}\n\n:host(#{$prefix}-tab-skeleton) {\n @extend .#{$prefix}--tabs__nav-item;\n}\n\n:host(#{$prefix}-tabs-skeleton) {\n @extend .#{$prefix}--tabs;\n @extend .#{$prefix}--skeleton;\n}\n\n:host(#{$prefix}-tabs-skeleton[contained]) {\n @extend .#{$prefix}--tabs--contained;\n}\n\n:host(#{$prefix}-tab-skeleton:first-of-type) {\n margin-inline-start: 0;\n}\n\n// Windows HCM fix\n:host(#{$prefix}-tab[selected]) .#{$prefix}--tabs__nav-link {\n @include high-contrast-mode {\n background-color: SelectedItem;\n }\n}\n\n:host(#{$prefix}-tab) {\n .#{$prefix}--tabs__nav-link--dismissable {\n display: flex;\n align-items: flex-start;\n padding-inline-end: $spacing-08;\n }\n .#{$prefix}--tabs--dismissable.#{$prefix}--tabs--contained {\n padding-inline-end: calc($spacing-09 - 1px);\n }\n}\n:host(#{$prefix}-tab[type='contained']) {\n .#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--dismissable {\n padding-inline-end: calc($spacing-09 - 1px);\n }\n}\n:host(#{$prefix}-tab) {\n .#{$prefix}--tabs__nav-item--close {\n position: relative;\n display: flex;\n align-items: center;\n inset-inline-start: calc(-#{$spacing-04} - 1px);\n margin-inline-start: calc(-#{$spacing-06} + 1px);\n\n &[disabled] {\n pointer-events: none;\n }\n }\n .#{$prefix}--tabs__nav-item--close--hidden {\n display: none;\n }\n .#{$prefix}--tabs__nav-item--close::part(button) {\n @include button-reset.reset();\n\n block-size: convert.to-rem(24px);\n inline-size: convert.to-rem(24px);\n padding-block: $spacing-02;\n padding-inline: $spacing-02;\n pointer-events: inherit;\n\n svg {\n block-size: convert.to-rem(16px);\n fill: $text-secondary;\n inline-size: convert.to-rem(16px);\n }\n\n svg:hover {\n fill: $icon-primary;\n }\n\n &:hover {\n background-color: $layer-hover;\n }\n\n &:focus,\n &:active {\n @include focus-outline('outline');\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"tabs.scss.js","names":[],"sources":["../../../src/components/tabs/tabs.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@use '@carbon/styles/scss/config' as ;\n@use '@carbon/styles/scss/theme' as ;\n@use '@carbon/styles/scss/utilities' as ;\n@use '@carbon/styles/scss/breakpoint' as ;\n@use '@carbon/styles/scss/spacing' as ;\n@use '@carbon/styles/scss/motion' as ;\n@use '@carbon/styles/scss/type' as ;\n@use '@carbon/styles/scss/components/button/index' as ;\n@use '@carbon/styles/scss/components/tabs/index';\n@use '@carbon/styles/scss/components/tabs/vars' as ;\n@use '@carbon/styles/scss/utilities/button-reset';\n@use '@carbon/styles/scss/layout' as ;\n@use '@carbon/styles/scss/utilities/layout';\n@use '@carbon/styles/scss/utilities/convert';\n@use '@carbon/styles/scss/utilities/skeleton' as ;\n@use '@carbon/styles/scss/utilities/update_fields_on_layer' as ;\n\n$inset-transition: inset 110ms motion(standard, productive);\n\n:host(#{$prefix}-tabs),\n:host(#{$prefix}-tabs-skeleton) {\n @extend .#{$prefix}--tabs;\n @include emit-layout-tokens();\n\n .#{$prefix}--tabs-nav-content-container {\n position: relative;\n overflow: scroll;\n flex: 1 1 0%;\n // for some reason, overflow: hidden shrinks the content\n block-size: $spacing-08;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n /* Set to zero-specificity so it can be overridden by dynamic stylesheet /\n :where(.#{$prefix}--tabs-nav-content) {\n position: absolute;\n block-size: 100%;\n inset-inline-start: 0;\n transition: $inset-transition;\n }\n\n .#{$prefix}--tabs-nav {\n position: absolute;\n display: block;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n z-index: 1;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n background-color: var(--tabs-overflow-button-background, $background);\n }\n\n .#{$prefix}--tab--overflow-nav-button--hidden {\n display: none;\n }\n}\n\n:host(#{$prefix}-tabs) {\n @include focus-outline('reset');\n\n .#{$prefix}--tabs-trigger svg {\n block-size: auto;\n inline-size: auto;\n }\n}\n\n:host(#{$prefix}-tabs:focus) {\n .#{$prefix}--tabs-trigger {\n @include focus-outline('outline');\n }\n}\n\n:host(#{$prefix}-tabs[icon-size='default'])\n .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default)\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n block-size: $spacing-08;\n}\n\n:host(#{$prefix}-tabs[icon-size='lg']) .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg)\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tabs[icon-size='default']),\n:host(#{$prefix}-tabs[icon-size='lg']),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg) {\n overflow: visible;\n\n .#{$prefix}--tab--list {\n overflow: visible;\n }\n}\n\n:host(#{$prefix}-tabs[type='contained']) {\n .#{$prefix}--tab--overflow-nav-button {\n background-color: $layer-accent;\n inline-size: $spacing-09;\n\n &:hover {\n background-color: $layer-accent-hover;\n }\n\n &:active {\n background-color: $layer-accent-active;\n }\n }\n}\n\n:host(#{$prefix}-tabs[type='contained'][has-secondary-labels])\n .#{$prefix}--tabs-nav-content-container {\n block-size: $spacing-10;\n}\n\n:host(#{$prefix}-tabs[type='contained'][has-secondary-labels]) #{$prefix}-tab {\n block-size: $spacing-10;\n}\n\n:host(#{$prefix}-tab[type='contained'][secondary-label]) {\n block-size: $spacing-10;\n\n a.#{$prefix}--tabs__nav-link {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0 $spacing-05;\n block-size: $spacing-10;\n line-height: normal;\n }\n\n .#{$prefix}--tabs__nav-item-label-wrapper {\n flex-direction: row;\n align-items: center;\n }\n\n .#{$prefix}--tabs__nav-item-label {\n line-height: var(--cds-body-compact-01-line-height);\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][secondary-label][selected]),\n:host(#{$prefix}-tab[type='contained'][secondary-label][selected]:hover) {\n a.#{$prefix}--tabs__nav-link {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0 $spacing-05;\n line-height: normal;\n }\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n .#{$prefix}--tabs__nav-item-secondary-label {\n @include type-style('label-01');\n\n display: block;\n overflow: hidden;\n color: $text-secondary;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]) {\n .#{$prefix}--tabs__nav-item-secondary-label {\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled]) {\n .#{$prefix}--tabs__nav-item-secondary-label {\n color: $text-on-color-disabled;\n }\n}\n\n:host(#{$prefix}-tabs[type='contained'][full-width]) {\n display: flex;\n inline-size: 100%;\n\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n flex: 1 1 0%;\n }\n\n .#{$prefix}--tabs-nav-content,\n .#{$prefix}--tabs-nav,\n .#{$prefix}--tab--list {\n inline-size: 100%;\n }\n\n .#{$prefix}--tab--list {\n display: flex;\n }\n}\n\n:host(#{$prefix}-tabs[type='contained'][full-width]) #{$prefix}-tab {\n flex: 1 1 0%;\n min-inline-size: 0;\n\n .#{$prefix}--tabs__nav-link {\n overflow: hidden;\n inline-size: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n:host(#{$prefix}-tab),\n:host(#{$prefix}-tab-skeleton) {\n display: flex;\n background: transparent;\n inline-size: 100%;\n\n .#{$prefix}--tabs__nav-item-label-wrapper {\n display: flex;\n align-items: inherit;\n gap: $spacing-03;\n }\n\n .#{$prefix}--tabs__nav-link {\n @include button-reset.reset($width: false);\n @include focus-outline('reset');\n @include type-style('body-compact-01');\n\n position: relative;\n overflow: hidden;\n\n align-items: center;\n padding: $spacing-04 $spacing-05 $spacing-03;\n border-block-end: $tab-underline-color;\n color: $text-secondary;\n inline-size: 100%;\n text-align: start;\n text-decoration: none;\n text-overflow: ellipsis;\n transition:\n border $duration-fast-01 motion(standard, productive),\n outline $duration-fast-01 motion(standard, productive);\n white-space: nowrap;\n\n &:focus,\n &:active {\n @include focus-outline('outline');\n }\n }\n\n outline: none;\n}\n\n:host(#{$prefix}-tab:not([type='contained']):not([vertical])) {\n margin-inline-end: convert.to-rem(1px);\n}\n:host(#{$prefix}-tab:not([type='contained'])) {\n .#{$prefix}--tabs__nav-link {\n padding-block-end: calc(#{$spacing-03} + #{convert.to-rem(1px)});\n padding-block-start: calc(#{$spacing-04} - #{convert.to-rem(1px)});\n }\n}\n\n:host(#{$prefix}-tab:not([type='contained']):not([vertical]):last-of-type) {\n margin-inline-end: 0;\n}\n:host(#{$prefix}-tab:not([type='contained']))\n + :host(#{$prefix}-tab:not([type='contained'])) {\n margin-inline-start: convert.to-rem(1px);\n}\n:host(#{$prefix}-tab[vertical]) {\n .#{$prefix}--tabs__nav-link {\n padding-block-end: $spacing-03;\n padding-block-start: $spacing-03;\n }\n}\n\n:host(#{$prefix}-tab[badge-indicator][icon-only]:not([icon-size='lg']))\n #{$prefix}-badge-indicator,\n:host(\n #{$prefix}-tab[badge-indicator].#{$prefix}--tabs__nav-item--icon-only:not(\n .#{$prefix}--tabs__nav-item--icon-only__20\n )\n )\n #{$prefix}-badge-indicator {\n margin-block-start: $spacing-02;\n margin-inline-end: $spacing-02;\n}\n\n:host(#{$prefix}-tab[icon-only]),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only) {\n flex: 0 0 auto;\n block-size: $spacing-08;\n inline-size: $spacing-08;\n\n .#{$prefix}--tabs__nav-item-label-wrapper {\n display: flex;\n }\n\n #{$prefix}-tooltip {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n --#{$prefix}-tooltip-padding-block: #{convert.to-rem(2px)};\n --#{$prefix}-popover-caret-width: #{convert.to-rem(8px)};\n --#{$prefix}-popover-caret-height: #{convert.to-rem(4px)};\n --#{$prefix}-popover-offset: #{convert.to-rem(8px)};\n }\n\n #{$prefix}-tooltip::part(popover-container) {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n }\n\n .#{$prefix}--tabs__nav-link {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n block-size: 100%;\n inline-size: 100%;\n }\n\n ::slotted(svg) {\n display: block;\n fill: currentColor;\n }\n}\n\n:host(#{$prefix}-tab[icon-only]:not([type='contained'])),\n:host(\n #{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:not([type='contained'])\n ) {\n .#{$prefix}--tabs__nav-item-label-wrapper {\n position: relative;\n inset-block-start: convert.to-rem(1px);\n }\n}\n\n:host(#{$prefix}-tab[icon-only][icon-size='lg']),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only__20) {\n block-size: $spacing-09;\n inline-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[selected]) {\n .#{$prefix}--tabs__nav-link {\n @include type-style('heading-compact-01');\n\n border-block-end: $spacing-01 solid $border-interactive;\n\n &,\n // Need to override Carbon core's non-selected focus color\n &:focus,\n &:active {\n color: $text-primary;\n }\n }\n\n display: flex;\n background-color: transparent;\n transition: color $duration-fast-01 motion(standard, productive);\n\n &:hover {\n background-color: transparent;\n }\n}\n\n:host(#{$prefix}-tab:hover:not([selected]):not([vertical])) {\n background-color: transparent;\n\n a.#{$prefix}--tabs__nav-link {\n border-block-end: $tab-underline-color-hover;\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-tab[icon-only]:hover),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:hover) {\n box-shadow: none;\n}\n\n:host(#{$prefix}-tabs[type='contained'])\n .#{$prefix}--tabs-nav-content-container {\n block-size: layout.size('height');\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n background-color: $layer-accent-01;\n\n a.#{$prefix}--tabs__nav-link {\n padding: $spacing-03 $spacing-05;\n block-size: layout.size('height');\n // height - vertical padding\n line-height: calc(#{layout.size('height')} - (#{$spacing-03} 2));\n }\n}\n\n:host(#{$prefix}-tab[type='contained']),\n:host(#{$prefix}-tab[type='contained']:hover) {\n a.#{$prefix}--tabs__nav-link {\n border-block-end: none;\n // Draws the border without affecting the inner-content\n box-shadow: rem(-1px) 0 0 0 $border-strong;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][hide-divider])\n a.#{$prefix}--tabs__nav-link {\n box-shadow: rem(-1px) 0 0 0 transparent;\n}\n\n// `[role]` is only for specificity.\n// We have `:not()` usage in the corresponding Carbon core style\n// which puts specificity of \"specific\" scenario though the style is for \"regular\" scenario\n:host(#{$prefix}-tab[disabled][role]),\n:host(#{$prefix}-tab[disabled][role]:hover) {\n background-color: transparent;\n box-shadow: none;\n cursor: not-allowed;\n outline: none;\n\n .#{$prefix}--tabs__nav-link {\n border-block-end: $tab-underline-color;\n color: $tab-text-disabled;\n outline: none;\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled][role])\n .#{$prefix}--tabs__nav-link {\n background-color: $button-disabled;\n border-block-end: none;\n color: $text-on-color-disabled;\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]),\n:host(#{$prefix}-tab[type='contained'][selected]:hover) {\n background-color: $layer-01;\n\n .#{$prefix}--tabs__nav-link {\n border-block-end: none;\n // Draws the border without affecting the inner-content\n box-shadow: inset 0 $spacing-01 0 0 $interactive;\n // height - vertical padding\n line-height: calc(#{layout.size('height')} - (#{$spacing-03} * 2));\n }\n\n .#{$prefix}--tabs__nav-link:focus,\n .#{$prefix}--tabs__nav-link:active {\n box-shadow: none;\n }\n}\n\n:host(#{$prefix}-tab[type='contained']:hover) {\n background-color: $layer-accent-01;\n}\n:host(#{$prefix}-tab[type='contained']) {\n .#{$prefix}--tabs__nav-link:hover {\n background-color: $layer-accent-hover;\n }\n}\n\n// Disabled tab never gets selected, but we guard for manual addition of `selected` attribute\n:host(#{$prefix}-tab[disabled][selected]),\n:host(#{$prefix}-tab[disabled][selected]:hover),\n:host(#{$prefix}-tab[disabled][in-focus][selected]),\n:host(#{$prefix}-tab[disabled][in-focus][selected]:hover) {\n display: flex;\n background-color: transparent;\n box-shadow: none;\n\n @include focus-outline('reset');\n\n .#{$prefix}--tabs__nav-link {\n @include type-style('body-short-01');\n\n border-block-end: $tab-underline-color;\n\n color: $tab-text-disabled;\n\n &:focus,\n &:active {\n border-block-end-width: 3px;\n }\n }\n}\n\n:host(#{$prefix}-tabs-skeleton) .#{$prefix}--tabs-trigger {\n @include skeleton;\n\n inline-size: rem(100px);\n}\n\n:host(#{$prefix}-tab-skeleton) {\n margin-inline-start: $spacing-01;\n\n .#{$prefix}--tabs__nav-link {\n @include skeleton;\n\n display: flex;\n align-items: center;\n padding: 0 layout.density('padding-inline');\n background-color: transparent;\n block-size: 100%;\n border-block-end: 2px solid $skeleton-element;\n inline-size: 10rem;\n\n &::before {\n display: none;\n content: none;\n }\n }\n\n .#{$prefix}--tabs__nav-item {\n @include reset;\n\n position: relative;\n display: flex;\n flex: 1 0 auto;\n padding: 0;\n cursor: pointer;\n transition: background-color $duration-fast-01 motion(standard, productive);\n }\n\n span {\n @include skeleton;\n\n display: block;\n block-size: convert.to-rem(14px);\n inline-size: 100%;\n }\n}\n\n:host(#{$prefix}-tab-skeleton) {\n @extend .#{$prefix}--tabs__nav-item;\n}\n\n:host(#{$prefix}-tabs-skeleton) {\n @extend .#{$prefix}--tabs;\n @extend .#{$prefix}--skeleton;\n}\n\n:host(#{$prefix}-tabs-skeleton[contained]) {\n @extend .#{$prefix}--tabs--contained;\n}\n\n:host(#{$prefix}-tab-skeleton:first-of-type) {\n margin-inline-start: 0;\n}\n\n// Windows HCM fix\n:host(#{$prefix}-tab[selected]) .#{$prefix}--tabs__nav-link {\n @include high-contrast-mode {\n background-color: SelectedItem;\n }\n}\n\n:host(#{$prefix}-tab[vertical]) .#{$prefix}--tabs__nav-link {\n display: flex;\n align-items: center;\n border-block-end: 1px solid $border-subtle;\n}\n\n:host(#{$prefix}-tab[vertical][selected]) .#{$prefix}--tabs__nav-link {\n border-block-end: 1px solid $border-subtle;\n}\n\n:host(#{$prefix}-tab[vertical][disabled]) .#{$prefix}--tabs__nav-link {\n border-block-end: 1px solid $border-subtle;\n}\n\n//-----------------------------\n// Vertical Tabs Wrapper\n//-----------------------------\n\n:host(#{$prefix}-tabs-vertical) {\n @include emit-layout-tokens();\n @include layout.use('density', $default: 'normal');\n\n grid-column: span 2;\n max-block-size: none;\n\n &.#{$prefix}--css-grid {\n box-shadow: inset -1px 0 $border-subtle;\n }\n\n ::slotted(#{$prefix}-tabs) {\n grid-column: span 2;\n\n @include breakpoint(lg) {\n grid-column: span 4;\n }\n }\n\n // Shadow-DOM wrapper for the panel slot — styled directly (no ::slotted needed)\n .#{$prefix}-panel-container {\n @include update_fields_on_layer;\n\n background: $layer;\n grid-column: 3 / -1;\n overflow-y: auto;\n\n @include breakpoint(lg) {\n grid-column: 5 / -1;\n }\n }\n}\n\n// Slotted tab panel divs — match React's cds--tab-content styles\n:host(#{$prefix}-tabs-vertical) ::slotted([role='tabpanel']) {\n // stylelint-disable-next-line declaration-no-important\n padding: layout.density('padding-inline') !important;\n outline: none;\n}\n\n:host(#{$prefix}-tabs-vertical)\n .panel-container\n ::slotted([role='tabpanel']:focus) {\n @include focus-outline('outline');\n}\n\n// cds-tabs when slotted inside cds-tabs-vertical (slot=\"tabs\")\n:host(#{$prefix}-tabs-vertical) ::slotted(#{$prefix}-tabs) {\n background: $layer;\n box-shadow: inset -1px 0 $border-subtle;\n max-block-size: none;\n}\n\n// Internal styles for cds-tabs when inside cds-tabs-vertical\n// These are applied via a CSS custom property / attribute set by the wrapper\n:host(#{$prefix}-tabs[vertical]) {\n .#{$prefix}--tabs-nav-content-container {\n block-size: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .#{$prefix}--tabs-nav-content {\n position: relative;\n block-size: 100%;\n }\n\n .#{$prefix}--tabs-nav {\n position: relative;\n }\n\n .#{$prefix}--tab--list {\n display: flex;\n flex-direction: column;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n display: none;\n }\n\n .#{$prefix}--tabs__nav-item-label {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-height: var(--cds-body-compact-01-line-height);\n text-overflow: ellipsis;\n white-space: normal;\n }\n}\n\n:host(#{$prefix}-tab[vertical]) {\n flex: none;\n background-color: $layer-01;\n block-size: $spacing-10;\n border-inline-end: 1px solid $border-subtle;\n box-shadow: inset 3px 0 0 0 $border-subtle;\n inline-size: 100%;\n\n .#{$prefix}--tabs__nav-item-label {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-height: var(--cds-body-compact-01-line-height);\n text-overflow: ellipsis;\n white-space: normal;\n }\n}\n\n:host(#{$prefix}-tab[vertical][disabled]) {\n border-inline-end: 1px solid $border-subtle;\n box-shadow: inset 3px 0 0 0 $border-subtle;\n}\n\n:host(#{$prefix}-tab[vertical]:hover),\n:host(#{$prefix}-tab[vertical][disabled]:hover) {\n .#{$prefix}--tabs__nav-link {\n border-block-end: 1px solid $border-subtle;\n }\n}\n\n:host(#{$prefix}-tab[vertical][selected]) {\n border-inline: none;\n box-shadow: inset 3px 0 0 0 $border-interactive;\n}\n\n:host(#{$prefix}-tab[vertical]:not([selected]):not([disabled]):hover) {\n background-color: $layer-hover;\n box-shadow: inset 3px 0 0 0 $border-strong;\n}\n:host(#{$prefix}-tab) {\n .#{$prefix}--tabs__nav-link--dismissable {\n display: flex;\n align-items: flex-start;\n padding-inline-end: $spacing-08;\n }\n .#{$prefix}--tabs--dismissable.#{$prefix}--tabs--contained {\n padding-inline-end: calc($spacing-09 - 1px);\n }\n}\n:host(#{$prefix}-tab[type='contained']) {\n .#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--dismissable {\n padding-inline-end: calc($spacing-09 - 1px);\n }\n}\n:host(#{$prefix}-tab) {\n .#{$prefix}--tabs__nav-item--close {\n position: relative;\n display: flex;\n align-items: center;\n inset-inline-start: calc(-#{$spacing-04} - 1px);\n margin-inline-start: calc(-#{$spacing-06} + 1px);\n\n &[disabled] {\n pointer-events: none;\n }\n }\n .#{$prefix}--tabs__nav-item--close--hidden {\n display: none;\n }\n .#{$prefix}--tabs__nav-item--close::part(button) {\n @include button-reset.reset();\n\n block-size: convert.to-rem(24px);\n inline-size: convert.to-rem(24px);\n padding-block: $spacing-02;\n padding-inline: $spacing-02;\n pointer-events: inherit;\n\n svg {\n block-size: convert.to-rem(16px);\n fill: $text-secondary;\n inline-size: convert.to-rem(16px);\n }\n\n svg:hover {\n fill: $icon-primary;\n }\n\n &:hover {\n background-color: $layer-hover;\n }\n\n &:focus,\n &:active {\n @include focus-outline('outline');\n }\n }\n}\n"],"mappings":""}

package/es-custom/components/button/button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,QAAQ,CAAC;AAMhB,OAAO,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,wBAAwB,EACxB,uBAAuB,GACxB,CAAC;;;;;;;;;;uBAJI,CAAC;;;;;;;AAMP;;;;;GAKG;AACH,cACM,SAAU,SAAQ,cAAyC;IAC/D;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,iBAAiB,KAAA;IAQzB,OAAO,CAAC,WAAW,CAEjB;IAEF;;OAEG;IAIH,OAAO,CAAC,eAAe,CAErB;IAEF;;;OAGG;IAIH,OAAO,CAAC,YAAY,CAElB;IAEF;;;OAGG;IAIH,OAAO,CAAC,eAAe,CAErB;IAEF;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,eAAe,MAAC;IAEhB;;OAEG;IAEH,iBAAiB,~~SAAY~~;~~IAE7B~~;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,EAAG,MAAM,CAAC;IAElB;;OAEG;IAEH,cAAc,UAAS;IAEvB;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,EAAG,MAAM,CAAC;IAElB;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,IAAI,cAAuB;IAE3B;;OAEG;IAEH,QAAQ,SAAY;IAEpB;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,GAAG,EAAG,MAAM,CAAC;IAEb;;OAEG;IAEH,IAAI,SAAQ;IAEZ;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,MAAM,EAAG,MAAM,CAAC;IAEhB;;;OAGG;IAEH,gBAAgB,2BAAmC;IAEnD;;;OAGG;IAEH,eAAe,0BAA+B;IAE9C;;;OAGG;IAEH,WAAW,EAAG,MAAM,CAAC;IAErB;;OAEG;IAEH,IAAI,cAAsB;IAE1B,MAAM;~~IAyJN~~,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,wBAAwB,EACxB,uBAAuB,EACxB,MAAM,QAAQ,CAAC;AAMhB,OAAO,EACL,WAAW,EACX,WAAW,EACX,WAAW,EACX,wBAAwB,EACxB,uBAAuB,GACxB,CAAC;;;;;;;;;;uBAJI,CAAC;;;;;;;AAMP;;;;;GAKG;AACH,cACM,SAAU,SAAQ,cAAyC;IAC/D;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAS;IAEzB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,iBAAiB,KAAA;IAQzB,OAAO,CAAC,WAAW,CAEjB;IAEF;;OAEG;IAIH,OAAO,CAAC,eAAe,CAErB;IAEF;;;OAGG;IAIH,OAAO,CAAC,YAAY,CAElB;IAEF;;;OAGG;IAIH,OAAO,CAAC,eAAe,CAErB;IAEF;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,eAAe,MAAC;IAEhB;;OAEG;IAEH,iBAAiB,SAAM;IAEvB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,EAAG,MAAM,CAAC;IAElB;;OAEG;IAEH,cAAc,UAAS;IAEvB;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,EAAG,MAAM,CAAC;IAElB;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,IAAI,cAAuB;IAE3B;;OAEG;IAEH,QAAQ,SAAY;IAEpB;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,GAAG,EAAG,MAAM,CAAC;IAEb;;OAEG;IAEH,IAAI,SAAQ;IAEZ;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,MAAM,EAAG,MAAM,CAAC;IAEhB;;;OAGG;IAEH,gBAAgB,2BAAmC;IAEnD;;;OAGG;IAEH,eAAe,0BAA+B;IAE9C;;;OAGG;IAEH,WAAW,EAAG,MAAM,CAAC;IAErB;;OAEG;IAEH,IAAI,cAAsB;IAE1B,MAAM;IA8JN,MAAM,CAAC,iBAAiB;;;;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,SAAS,CAAC"}

package/es-custom/components/button/button.js CHANGED Viewed

@@ -48,7 +48,7 @@ let CDSButton = class CDSButton extends HostListenerMixin(FocusMixin(LitElement)
 		};
 		this.autofocus = false;
 		this.batchAction = false;
-		this.dangerDescription = "danger";
+		this.dangerDescription = "";
 		this.disabled = false;
 		this.hasMainContent = false;
 		this.isExpressive = false;
@@ -108,7 +108,7 @@ let CDSButton = class CDSButton extends HostListenerMixin(FocusMixin(LitElement)
 			};
 		}
 		const classes = classMap(defaultClasses);
-		const isDanger = kind?.includes("danger");
+		const hasDangerDescription = kind?.includes("danger") && Boolean(dangerDescription);
 		if (href) return disabled ? html`
             <p id="button" part="button" class="${classes}">
               <slot @slotchange="${handleSlotChange}"></slot>
@@ -178,8 +178,10 @@ let CDSButton = class CDSButton extends HostListenerMixin(FocusMixin(LitElement)
             tabindex="${tabIndex}"
             type="${ifDefined(type)}"
             aria-label="${ifDefined(tooltipText)}"
-            aria-describedby="badge-indicator">
-            ${isDanger ? html`<span class="${"cds-custom"}--visually-hidden"
+            aria-describedby="${ifDefined(hasDangerDescription ? "danger-description" : void 0)}">
+            ${hasDangerDescription ? html`<span
+                  id="danger-description"
+                  class="${"cds-custom"}--visually-hidden"
                   >${dangerDescription}</span
                 >` : ``}
             <slot @slotchange="${handleSlotChange}"></slot>

package/es-custom/components/button/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","names":["styles","customElement"],"sources":["../../../src/components/button/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 { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport {\n BUTTON_KIND,\n BUTTON_TYPE,\n BUTTON_SIZE,\n BUTTON_TOOLTIP_ALIGNMENT,\n BUTTON_TOOLTIP_POSITION,\n} from './defs';\nimport styles from './button.scss?lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport {\n BUTTON_KIND,\n BUTTON_TYPE,\n BUTTON_SIZE,\n BUTTON_TOOLTIP_ALIGNMENT,\n BUTTON_TOOLTIP_POSITION,\n};\n\n/\n Button.\n \n @element cds-custom-button\n * @csspart button The button.\n /\n@customElement(`${prefix}-button`)\nclass CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {\n /\n `true` if there is an icon.\n /\n private _hasIcon = false;\n\n /\n Handles `slotchange` event.\n /\n private _handleSlotChange({ target }: Event) {\n const { name } = target as HTMLSlotElement;\n const hasContent = (target as HTMLSlotElement).assignedNodes().some(\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n (node) => node.nodeType !== Node.TEXT_NODE \|\| node!.textContent!.trim()\n );\n this[name === 'icon' ? '_hasIcon' : 'hasMainContent'] = hasContent;\n this.requestUpdate();\n }\n\n @HostListener('click', { capture: true })\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore\n private _handleDisabledClick(event: Event) {\n const { disabled } = this;\n if (disabled) {\n event.stopPropagation();\n }\n }\n\n private _checkBadgeWarning() {\n const hasBadgeIndicator = this.querySelector(`${prefix}-badge-indicator`);\n if (\n hasBadgeIndicator &&\n (this.kind !== BUTTON_KIND.GHOST \|\| this.size !== BUTTON_SIZE.LARGE)\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n `The badge indicator must be used with kind='ghost' and size='lg'`\n );\n }\n }\n updated(changedProperties) {\n super.updated?.(changedProperties);\n this._checkBadgeWarning();\n }\n\n @HostListener('mouseover')\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 _handleOver = () => {\n this.openTooltip = true;\n };\n\n /\n Handles `keydown` event on this element.\n /\n @HostListener('mouseout')\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 _handleHoverOut = async () => {\n this.openTooltip = false;\n };\n\n /\n Handles `keydown` event on this element.\n * Space & enter will toggle state, Escape will only close.\n /\n @HostListener('focus')\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 _handleFocus = async () => {\n this.openTooltip = true;\n };\n\n /\n Handles `keydown` event on this element.\n * Space & enter will toggle state, Escape will only close.\n /\n @HostListener('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 _handleFocusout = async () => {\n this.openTooltip = false;\n };\n\n /\n `true` if the button should have input focus when the page loads.\n /\n @property({ type: Boolean, reflect: true })\n autofocus = false;\n\n /\n `true` if the button is being used within a data table batch action toolbar\n /\n @property({ type: Boolean, reflect: true, attribute: 'batch-action' })\n batchAction = false;\n\n /\n Specify an optional className to be added to your Button\n /\n @property({ type: String, reflect: true, attribute: 'button-class-name' })\n buttonClassName;\n\n /\n Specify the message read by screen readers for the danger button variants\n /\n @property({ type: String, reflect: true, attribute: 'danger-description' })\n dangerDescription = 'danger';\n\n /\n Specify whether the Button should be disabled, or not\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n The default file name, used if this button is rendered as `<a>`.\n /\n @property({ type: String, reflect: true })\n download!: string;\n\n /\n `true` if there is a non-icon content.\n /\n @property({ reflect: true, attribute: 'has-main-content', type: Boolean })\n hasMainContent = false;\n\n /\n Optionally specify an href for your Button to become an `<a>` element\n /\n @property({ type: String, reflect: true })\n href!: string;\n\n /\n The language of what `href` points to, if this button is rendered as `<a>`.\n /\n @property({ type: String, reflect: true })\n hreflang!: string;\n\n /\n Specify whether the Button is expressive, or not.\n /\n @property({ type: Boolean, reflect: true })\n isExpressive = false;\n\n /\n Specify whether the Button is currently selected. Only applies to the icon only Ghost variant.\n /\n @property({ type: Boolean, reflect: true })\n isSelected = false;\n\n /\n Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost`\n /\n @property({ type: String, reflect: true })\n kind = BUTTON_KIND.PRIMARY;\n\n /\n The a11y role for `<a>`.\n /\n @property({ type: String, attribute: 'link-role' })\n linkRole = 'button';\n\n /\n Boolean to determine if tooltip is open.\n /\n @property({ type: Boolean })\n openTooltip = false;\n\n /\n URLs to ping, if this button is rendered as `<a>`.\n /\n @property({ type: String, reflect: true })\n ping!: string;\n\n /\n Optionally specify a `rel` when using an `<a>` element.\n /\n @property({ type: String, reflect: true })\n rel!: string;\n\n /\n Specify the size of the button, from the following list of sizes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`\n /\n @property({ type: String, reflect: true })\n size = 'lg';\n\n /\n Optional prop to specify the tabIndex of the Button\n /\n @property({ type: Number, attribute: 'tab-index', reflect: true })\n tabIndex = 0;\n\n /\n Optionally specify a `target` when using an `<a>` element.\n /\n @property({ type: String, reflect: true })\n target!: string;\n\n /\n Specify the alignment of the tooltip to the icon-only button.\n * Can be one of: start, center, or end.\n /\n @property({ type: String, reflect: true, attribute: 'tooltip-alignment' })\n tooltipAlignment = BUTTON_TOOLTIP_ALIGNMENT.CENTER;\n\n /\n Specify the direction of the tooltip for icon-only buttons.\n * Can be either top, right, bottom, or left.\n /\n @property({ type: String, reflect: true, attribute: 'tooltip-position' })\n tooltipPosition = BUTTON_TOOLTIP_POSITION.TOP;\n\n /\n If rendering an `icon-only` button through `slot=\"icon\"`, Specify the text to be rendered in the tooltip. If using\n * `cds-custom-badge-indicator` with no count prop then the text should include describing there is a new notification.\n /\n @property({ type: String, reflect: true, attribute: 'tooltip-text' })\n tooltipText!: string;\n\n /\n Optional prop to specify the type of the Button.\n */\n @property({ type: String, reflect: true })\n type = BUTTON_TYPE.BUTTON;\n\n render() {\n const {\n autofocus,\n buttonClassName,\n dangerDescription,\n disabled,\n download,\n href,\n hreflang,\n kind,\n isExpressive,\n isSelected,\n linkRole,\n openTooltip,\n ping,\n rel,\n size,\n tabIndex,\n target,\n tooltipAlignment,\n tooltipPosition,\n tooltipText,\n type,\n _hasIcon: hasIcon,\n hasMainContent,\n _handleSlotChange: handleSlotChange,\n } = this;\n\n let defaultClasses = {\n [`${prefix}--btn`]: true,\n [`${prefix}--btn--${kind}`]: kind,\n [`${prefix}--btn--danger--tertiary`]:\n kind === BUTTON_KIND.DANGER_TERTIARY,\n [`${prefix}--btn--danger--ghost`]: kind === BUTTON_KIND.DANGER_GHOST,\n [`${prefix}--btn--disabled`]: disabled,\n [`${prefix}--btn--icon-only`]: hasIcon && !hasMainContent,\n [`${prefix}--btn--${size}`]: size,\n [`${prefix}--layout--size-${size}`]: size,\n [`${prefix}-ce--btn--has-icon`]: hasIcon,\n [`${prefix}--btn--expressive`]: isExpressive,\n [`${prefix}--btn--selected`]: isSelected && kind === 'ghost',\n };\n\n if (buttonClassName) {\n const outputObject = {};\n buttonClassName?.split(' ').forEach((element) => {\n outputObject[element] = true;\n });\n defaultClasses = { ...defaultClasses, ...outputObject };\n }\n const classes = classMap(defaultClasses);\n\n const isDanger = kind?.includes('danger');\n\n if (href) {\n return disabled\n ? html`\n <p id=\"button\" part=\"button\" class=\"${classes}\">\n <slot @slotchange=\"${handleSlotChange}\"></slot>\n <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n </p>\n `\n : html`\n <a\n id=\"button\"\n part=\"button\"\n role=\"${ifDefined(linkRole)}\"\n class=\"${classes}\"\n download=\"${ifDefined(download)}\"\n href=\"${ifDefined(href)}\"\n hreflang=\"${ifDefined(hreflang)}\"\n ping=\"${ifDefined(ping)}\"\n rel=\"${ifDefined(rel)}\"\n target=\"${ifDefined(target)}\"\n type=\"${ifDefined(type)}\"\n tabindex=\"${tabIndex}\"\n aria-describedby=\"badge-indicator\">\n <slot @slotchange=\"${handleSlotChange}\"></slot>\n <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n </a>\n ${html`<slot id=\"badge-indicator\" name=\"badge-indicator\"></slot>` ??\n !disabled}\n `;\n }\n\n const alignmentClass =\n tooltipAlignment &&\n (tooltipPosition === BUTTON_TOOLTIP_POSITION.TOP \|\|\n tooltipPosition === BUTTON_TOOLTIP_POSITION.BOTTOM)\n ? `-${tooltipAlignment}`\n : '';\n\n const tooltipClasses = classMap({\n [`${prefix}--popover-container`]: true,\n [`${prefix}--popover--caret`]: true,\n [`${prefix}--popover--high-contrast`]: true,\n [`${prefix}--tooltip`]: true,\n [`${prefix}--icon-tooltip`]: hasIcon,\n [`${prefix}--popover--open`]: openTooltip,\n [`${prefix}--popover--${tooltipPosition}${alignmentClass}`]: tooltipText,\n });\n\n return tooltipText && !disabled\n ? html`\n <span class=\"${tooltipClasses}\">\n <button\n id=\"button\"\n part=\"button\"\n class=\"${classes}\"\n ?autofocus=\"${autofocus}\"\n ?disabled=\"${disabled}\"\n tabindex=\"${tabIndex}\"\n type=\"${ifDefined(type)}\"\n aria-label=\"${ifDefined(tooltipText)}\"\n aria-describedby=\"badge-indicator\">\n <slot @slotchange=\"${handleSlotChange}\"></slot>\n <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n </button>\n <span class=\"${prefix}--popover\">\n <span\n class=\"${prefix}--popover-content ${prefix}--tooltip-content\">\n ${tooltipText}\n </span>\n <span class=\"${prefix}--popover-caret\"></span>\n </span>\n ${html`<slot id=\"badge-indicator\" name=\"badge-indicator\"></slot>` ??\n !disabled}\n </span>\n `\n : html`\n <button\n id=\"button\"\n part=\"button\"\n class=\"${classes}\"\n ?autofocus=\"${autofocus}\"\n ?disabled=\"${disabled}\"\n tabindex=\"${tabIndex}\"\n type=\"${ifDefined(type)}\"\n aria-label=\"${ifDefined(tooltipText)}\"\n aria-describedby=\"badge-indicator\">\n ${isDanger\n ? html`<span class=\"${prefix}--visually-hidden\"\n >${dangerDescription}</span\n >`\n : ``}\n <slot @slotchange=\"${handleSlotChange}\"></slot>\n <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n </button>\n ${html`<slot id=\"badge-indicator\" name=\"badge-indicator\"></slot>` ??\n !disabled}\n `;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSButton;\n"],"mappings":"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"}
1	+ {"version":3,"file":"button.js","names":["styles","customElement"],"sources":["../../../src/components/button/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 { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport {\n BUTTON_KIND,\n BUTTON_TYPE,\n BUTTON_SIZE,\n BUTTON_TOOLTIP_ALIGNMENT,\n BUTTON_TOOLTIP_POSITION,\n} from './defs';\nimport styles from './button.scss?lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport {\n BUTTON_KIND,\n BUTTON_TYPE,\n BUTTON_SIZE,\n BUTTON_TOOLTIP_ALIGNMENT,\n BUTTON_TOOLTIP_POSITION,\n};\n\n/\n Button.\n \n @element cds-custom-button\n * @csspart button The button.\n /\n@customElement(`${prefix}-button`)\nclass CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {\n /\n `true` if there is an icon.\n /\n private _hasIcon = false;\n\n /\n Handles `slotchange` event.\n /\n private _handleSlotChange({ target }: Event) {\n const { name } = target as HTMLSlotElement;\n const hasContent = (target as HTMLSlotElement).assignedNodes().some(\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n (node) => node.nodeType !== Node.TEXT_NODE \|\| node!.textContent!.trim()\n );\n this[name === 'icon' ? '_hasIcon' : 'hasMainContent'] = hasContent;\n this.requestUpdate();\n }\n\n @HostListener('click', { capture: true })\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore\n private _handleDisabledClick(event: Event) {\n const { disabled } = this;\n if (disabled) {\n event.stopPropagation();\n }\n }\n\n private _checkBadgeWarning() {\n const hasBadgeIndicator = this.querySelector(`${prefix}-badge-indicator`);\n if (\n hasBadgeIndicator &&\n (this.kind !== BUTTON_KIND.GHOST \|\| this.size !== BUTTON_SIZE.LARGE)\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n `The badge indicator must be used with kind='ghost' and size='lg'`\n );\n }\n }\n updated(changedProperties) {\n super.updated?.(changedProperties);\n this._checkBadgeWarning();\n }\n\n @HostListener('mouseover')\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 _handleOver = () => {\n this.openTooltip = true;\n };\n\n /\n Handles `keydown` event on this element.\n /\n @HostListener('mouseout')\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 _handleHoverOut = async () => {\n this.openTooltip = false;\n };\n\n /\n Handles `keydown` event on this element.\n * Space & enter will toggle state, Escape will only close.\n /\n @HostListener('focus')\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 _handleFocus = async () => {\n this.openTooltip = true;\n };\n\n /\n Handles `keydown` event on this element.\n * Space & enter will toggle state, Escape will only close.\n /\n @HostListener('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 _handleFocusout = async () => {\n this.openTooltip = false;\n };\n\n /\n `true` if the button should have input focus when the page loads.\n /\n @property({ type: Boolean, reflect: true })\n autofocus = false;\n\n /\n `true` if the button is being used within a data table batch action toolbar\n /\n @property({ type: Boolean, reflect: true, attribute: 'batch-action' })\n batchAction = false;\n\n /\n Specify an optional className to be added to your Button\n /\n @property({ type: String, reflect: true, attribute: 'button-class-name' })\n buttonClassName;\n\n /\n Specify the message read by screen readers for the danger button variants\n /\n @property({ type: String, reflect: true, attribute: 'danger-description' })\n dangerDescription = '';\n\n /\n Specify whether the Button should be disabled, or not\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n The default file name, used if this button is rendered as `<a>`.\n /\n @property({ type: String, reflect: true })\n download!: string;\n\n /\n `true` if there is a non-icon content.\n /\n @property({ reflect: true, attribute: 'has-main-content', type: Boolean })\n hasMainContent = false;\n\n /\n Optionally specify an href for your Button to become an `<a>` element\n /\n @property({ type: String, reflect: true })\n href!: string;\n\n /\n The language of what `href` points to, if this button is rendered as `<a>`.\n /\n @property({ type: String, reflect: true })\n hreflang!: string;\n\n /\n Specify whether the Button is expressive, or not.\n /\n @property({ type: Boolean, reflect: true })\n isExpressive = false;\n\n /\n Specify whether the Button is currently selected. Only applies to the icon only Ghost variant.\n /\n @property({ type: Boolean, reflect: true })\n isSelected = false;\n\n /\n Specify the kind of Button you want to create. `primary`, `secondary`,`tertiary`, `ghost`, `danger`, `danger-tertiary`, `danger-ghost`\n /\n @property({ type: String, reflect: true })\n kind = BUTTON_KIND.PRIMARY;\n\n /\n The a11y role for `<a>`.\n /\n @property({ type: String, attribute: 'link-role' })\n linkRole = 'button';\n\n /\n Boolean to determine if tooltip is open.\n /\n @property({ type: Boolean })\n openTooltip = false;\n\n /\n URLs to ping, if this button is rendered as `<a>`.\n /\n @property({ type: String, reflect: true })\n ping!: string;\n\n /\n Optionally specify a `rel` when using an `<a>` element.\n /\n @property({ type: String, reflect: true })\n rel!: string;\n\n /\n Specify the size of the button, from the following list of sizes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`\n /\n @property({ type: String, reflect: true })\n size = 'lg';\n\n /\n Optional prop to specify the tabIndex of the Button\n /\n @property({ type: Number, attribute: 'tab-index', reflect: true })\n tabIndex = 0;\n\n /\n Optionally specify a `target` when using an `<a>` element.\n /\n @property({ type: String, reflect: true })\n target!: string;\n\n /\n Specify the alignment of the tooltip to the icon-only button.\n * Can be one of: start, center, or end.\n /\n @property({ type: String, reflect: true, attribute: 'tooltip-alignment' })\n tooltipAlignment = BUTTON_TOOLTIP_ALIGNMENT.CENTER;\n\n /\n Specify the direction of the tooltip for icon-only buttons.\n * Can be either top, right, bottom, or left.\n /\n @property({ type: String, reflect: true, attribute: 'tooltip-position' })\n tooltipPosition = BUTTON_TOOLTIP_POSITION.TOP;\n\n /\n If rendering an `icon-only` button through `slot=\"icon\"`, Specify the text to be rendered in the tooltip. If using\n * `cds-custom-badge-indicator` with no count prop then the text should include describing there is a new notification.\n /\n @property({ type: String, reflect: true, attribute: 'tooltip-text' })\n tooltipText!: string;\n\n /\n Optional prop to specify the type of the Button.\n */\n @property({ type: String, reflect: true })\n type = BUTTON_TYPE.BUTTON;\n\n render() {\n const {\n autofocus,\n buttonClassName,\n dangerDescription,\n disabled,\n download,\n href,\n hreflang,\n kind,\n isExpressive,\n isSelected,\n linkRole,\n openTooltip,\n ping,\n rel,\n size,\n tabIndex,\n target,\n tooltipAlignment,\n tooltipPosition,\n tooltipText,\n type,\n _hasIcon: hasIcon,\n hasMainContent,\n _handleSlotChange: handleSlotChange,\n } = this;\n\n let defaultClasses = {\n [`${prefix}--btn`]: true,\n [`${prefix}--btn--${kind}`]: kind,\n [`${prefix}--btn--danger--tertiary`]:\n kind === BUTTON_KIND.DANGER_TERTIARY,\n [`${prefix}--btn--danger--ghost`]: kind === BUTTON_KIND.DANGER_GHOST,\n [`${prefix}--btn--disabled`]: disabled,\n [`${prefix}--btn--icon-only`]: hasIcon && !hasMainContent,\n [`${prefix}--btn--${size}`]: size,\n [`${prefix}--layout--size-${size}`]: size,\n [`${prefix}-ce--btn--has-icon`]: hasIcon,\n [`${prefix}--btn--expressive`]: isExpressive,\n [`${prefix}--btn--selected`]: isSelected && kind === 'ghost',\n };\n\n if (buttonClassName) {\n const outputObject = {};\n buttonClassName?.split(' ').forEach((element) => {\n outputObject[element] = true;\n });\n defaultClasses = { ...defaultClasses, ...outputObject };\n }\n const classes = classMap(defaultClasses);\n\n const isDanger = kind?.includes('danger');\n const hasDangerDescription = isDanger && Boolean(dangerDescription);\n\n if (href) {\n return disabled\n ? html`\n <p id=\"button\" part=\"button\" class=\"${classes}\">\n <slot @slotchange=\"${handleSlotChange}\"></slot>\n <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n </p>\n `\n : html`\n <a\n id=\"button\"\n part=\"button\"\n role=\"${ifDefined(linkRole)}\"\n class=\"${classes}\"\n download=\"${ifDefined(download)}\"\n href=\"${ifDefined(href)}\"\n hreflang=\"${ifDefined(hreflang)}\"\n ping=\"${ifDefined(ping)}\"\n rel=\"${ifDefined(rel)}\"\n target=\"${ifDefined(target)}\"\n type=\"${ifDefined(type)}\"\n tabindex=\"${tabIndex}\"\n aria-describedby=\"badge-indicator\">\n <slot @slotchange=\"${handleSlotChange}\"></slot>\n <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n </a>\n ${html`<slot id=\"badge-indicator\" name=\"badge-indicator\"></slot>` ??\n !disabled}\n `;\n }\n\n const alignmentClass =\n tooltipAlignment &&\n (tooltipPosition === BUTTON_TOOLTIP_POSITION.TOP \|\|\n tooltipPosition === BUTTON_TOOLTIP_POSITION.BOTTOM)\n ? `-${tooltipAlignment}`\n : '';\n\n const tooltipClasses = classMap({\n [`${prefix}--popover-container`]: true,\n [`${prefix}--popover--caret`]: true,\n [`${prefix}--popover--high-contrast`]: true,\n [`${prefix}--tooltip`]: true,\n [`${prefix}--icon-tooltip`]: hasIcon,\n [`${prefix}--popover--open`]: openTooltip,\n [`${prefix}--popover--${tooltipPosition}${alignmentClass}`]: tooltipText,\n });\n\n return tooltipText && !disabled\n ? html`\n <span class=\"${tooltipClasses}\">\n <button\n id=\"button\"\n part=\"button\"\n class=\"${classes}\"\n ?autofocus=\"${autofocus}\"\n ?disabled=\"${disabled}\"\n tabindex=\"${tabIndex}\"\n type=\"${ifDefined(type)}\"\n aria-label=\"${ifDefined(tooltipText)}\"\n aria-describedby=\"badge-indicator\">\n <slot @slotchange=\"${handleSlotChange}\"></slot>\n <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n </button>\n <span class=\"${prefix}--popover\">\n <span\n class=\"${prefix}--popover-content ${prefix}--tooltip-content\">\n ${tooltipText}\n </span>\n <span class=\"${prefix}--popover-caret\"></span>\n </span>\n ${html`<slot id=\"badge-indicator\" name=\"badge-indicator\"></slot>` ??\n !disabled}\n </span>\n `\n : html`\n <button\n id=\"button\"\n part=\"button\"\n class=\"${classes}\"\n ?autofocus=\"${autofocus}\"\n ?disabled=\"${disabled}\"\n tabindex=\"${tabIndex}\"\n type=\"${ifDefined(type)}\"\n aria-label=\"${ifDefined(tooltipText)}\"\n aria-describedby=\"${ifDefined(\n hasDangerDescription ? 'danger-description' : undefined\n )}\">\n ${hasDangerDescription\n ? html`<span\n id=\"danger-description\"\n class=\"${prefix}--visually-hidden\"\n >${dangerDescription}</span\n >`\n : ``}\n <slot @slotchange=\"${handleSlotChange}\"></slot>\n <slot name=\"icon\" @slotchange=\"${handleSlotChange}\"></slot>\n </button>\n ${html`<slot id=\"badge-indicator\" name=\"badge-indicator\"></slot>` ??\n !disabled}\n `;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSButton;\n"],"mappings":"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"}