npm - @carbon/web-components - Versions diffs - 2.58.1 → 2.59.0-rc.0 - Mend

@carbon/web-components 2.58.1 → 2.59.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 (537) 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@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: layout.size('height');\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[size='sm']) {\n @extend .#{$prefix}--layout--size-sm;\n}\n\n:host(#{$prefix}-tabs[size='md']) {\n @extend .#{$prefix}--layout--size-md;\n}\n\n:host(#{$prefix}-tabs[type='contained'][size='lg']),\n:host(#{$prefix}-tabs[vertical][size='lg']) {\n @extend .#{$prefix}--layout--size-lg;\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: layout.size('height');\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 @include layout.use('size', $default: 'md', $min: 'sm', $max: 'lg');\n\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 display: flex;\n align-items: center;\n block-size: layout.size('height');\n padding-block: 0;\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: layout.size('height');\n inline-size: layout.size('height');\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(\n #{$prefix}-tab:not([type='contained']):hover:not([selected]):not(\n [disabled]\n ):not([vertical])\n ) {\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 block-size: 100%;\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 // Default line-clamp for vertical tabs\n --#{$prefix}-tabs-vertical-line-clamp: 2;\n\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\n// Size-specific line-clamp overrides for vertical tabs\n:host(#{$prefix}-tabs[size='sm'][vertical]) {\n --#{$prefix}-tabs-vertical-line-clamp: 1;\n}\n\n:host(#{$prefix}-tab[vertical]) {\n flex: none;\n background-color: $layer-01;\n block-size: var(--#{$prefix}-layout-size-height, $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: var(--#{$prefix}-tabs-vertical-line-clamp);\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":""}
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/utilities/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@include emit-layout-context-classes();\n@include emit-layout-context-classes('density');\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: layout.size('height');\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[size='sm']) {\n @extend .#{$prefix}--layout--size-sm;\n}\n\n:host(#{$prefix}-tabs[size='md']) {\n @extend .#{$prefix}--layout--size-md;\n}\n\n:host(#{$prefix}-tabs[type='contained'][size='lg']),\n:host(#{$prefix}-tabs[vertical][size='lg']) {\n @extend .#{$prefix}--layout--size-lg;\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: layout.size('height');\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 @include layout.use('size', $default: 'md', $min: 'sm', $max: 'lg');\n\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 display: flex;\n align-items: center;\n block-size: layout.size('height');\n padding-block: 0;\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: layout.size('height');\n inline-size: layout.size('height');\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(\n #{$prefix}-tab:not([type='contained']):hover:not([selected]):not(\n [disabled]\n ):not([vertical])\n ) {\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 block-size: 100%;\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 // Default line-clamp for vertical tabs\n --#{$prefix}-tabs-vertical-line-clamp: 2;\n\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\n// Size-specific line-clamp overrides for vertical tabs\n:host(#{$prefix}-tabs[size='sm'][vertical]) {\n --#{$prefix}-tabs-vertical-line-clamp: 1;\n}\n\n:host(#{$prefix}-tab[vertical]) {\n flex: none;\n background-color: $layer-01;\n block-size: var(--#{$prefix}-layout-size-height, $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: var(--#{$prefix}-tabs-vertical-line-clamp);\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/components/tag/operational-tag.d.ts CHANGED Viewed

@@ -6,7 +6,6 @@
  */
 import { LitElement } from 'lit';
 import { TAG_SIZE, TAG_TYPE } from './defs';
-import './tag';
 import '../tooltip/index';
 export { TAG_SIZE, TAG_TYPE };
 declare const CDSOperationalTag_base: {
@@ -34,6 +33,7 @@ declare const CDSOperationalTag_base: {
  * @fires cds-operational-tag-selected - The custom event fired after the element has been selected
  */
 declare class CDSOperationalTag extends CDSOperationalTag_base {
+    private _tag;
     /**
      * Custom events to be triggered
      *

package/es/components/tag/operational-tag.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"operational-tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/operational-tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;~~AAC5C~~,OAAO,~~OAAO,CAAC;AACf,OAAO,~~kBAAkB,CAAC;AAI1B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;~~uBAOuD~~,~~CAAA~~;;;;;;;~~AALrF~~;;;;;;;GAOG;AACH,cACM,iBAAkB,SAAQ,sBAAyC;~~IACvE~~;;;;OAIG;IACH,SAAS,CAAC,aAAa,GAAI,UAAK,UA6B9B;IAEF;;;;OAIG;IAIH,OAAO,CAAC,YAAY,CAElB;IAKF,OAAO,CAAC,cAAc,CAIpB;IAEF;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,WAAmB;IAEvB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,IAAI,WAAiB;IAErB;;OAEG;IAEH,mBAAmB,UAAS;IAEtB,OAAO;~~IAab~~,MAAM;IA8CN;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"operational-tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/operational-tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE5C,OAAO,kBAAkB,CAAC;AAI1B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;uBAOmC,CAAC;;;;;;;AALlE;;;;;;;GAOG;AACH,cACM,iBAAkB,SAAQ,sBAAyC;IAEvE,OAAO,CAAC,IAAI,CAAU;IAEtB;;;;OAIG;IACH,SAAS,CAAC,aAAa,GAAI,UAAK,UA6B9B;IAEF;;;;OAIG;IAIH,OAAO,CAAC,YAAY,CAElB;IAKF,OAAO,CAAC,cAAc,CAIpB;IAEF;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,WAAmB;IAEvB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,IAAI,WAAiB;IAErB;;OAEG;IAEH,mBAAmB,UAAS;IAEtB,OAAO;IAWb,MAAM;IA8CN;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC"}

package/es/components/tag/operational-tag.js CHANGED Viewed

@@ -14,9 +14,8 @@ import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import "../tooltip/index.js";
 import { TAG_SIZE, TAG_TYPE } from "./defs.js";
 import tag_default from "./tag.scss.js";
-import "./tag.js";
 import { LitElement, html } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
 //#region src/components/tag/operational-tag.ts
 /**
 * Copyright IBM Corp. 2019, 2025
@@ -65,7 +64,7 @@ let CDSOperationalTag = class CDSOperationalTag extends HostListenerMixin(FocusM
 	}
 	async updated() {
 		await this.updateComplete;
-		const textContainer = this.shadowRoot?.querySelector(`cds-tag`)?.shadowRoot?.querySelector(`.cds--tag__label`);
+		const textContainer = this._tag?._textContainer;
 		if (!textContainer) return;
 		const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;
 		this._hasEllipsisApplied = hasEllipsis;
@@ -121,6 +120,7 @@ let CDSOperationalTag = class CDSOperationalTag extends HostListenerMixin(FocusM
 		this.styles = tag_default;
 	}
 };
+__decorate([query(`cds-tag`)], CDSOperationalTag.prototype, "_tag", void 0);
 __decorate([HostListener("shadowRoot:click")], CDSOperationalTag.prototype, "_handleClick", void 0);
 __decorate([HostListener("shadowRoot:keydown")], CDSOperationalTag.prototype, "_handleKeyDown", void 0);
 __decorate([property({

package/es/components/tag/operational-tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"operational-tag.js","names":["styles","customElement"],"sources":["../../../src/components/tag/operational-tag.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 /\n\nimport { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport './tag';\nimport '../tooltip/index';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/\n Operational tag.\n \n @element cds-operational-tag\n \n @fires cds-operational-tag-beforeselected - The custom event fired as the element is being selected\n * @fires cds-operational-tag-selected - The custom event fired after the element has been selected\n /\n@customElement(`${prefix}-operational-tag`)\nclass CDSOperationalTag extends HostListenerMixin(FocusMixin(LitElement)) {\n /\n Custom events to be triggered\n \n @param event Event object\n /\n protected triggerEvents = (event) => {\n if (this.disabled) {\n event.stopPropagation();\n } else {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy: event.target,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSOperationalTag).eventBeforeSelected,\n init\n )\n )\n ) {\n this.selected = !this.selected;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSOperationalTag).eventSelected,\n init\n )\n );\n }\n }\n };\n\n /\n Handles `click` event on this element.\n \n @param event The event.\n /\n @HostListener('shadowRoot:click')\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 _handleClick = (event: MouseEvent) => {\n this.triggerEvents(event);\n };\n\n @HostListener('shadowRoot: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 = (event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n this.triggerEvents(event);\n }\n };\n\n /\n `true` if the tag should be disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Specify the state of the selectable tag.\n /\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /\n The size of the tag.\n /\n @property({ type: String, reflect: true })\n size = TAG_SIZE.MEDIUM;\n\n /\n Provide text to be rendered inside of a the tag.\n /\n @property({ type: String, reflect: true })\n text = '';\n\n /\n The type of the tag.\n /\n @property({ reflect: true })\n type = TAG_TYPE.GRAY;\n\n /\n true if the tag text has ellipsis applied\n /\n @state()\n _hasEllipsisApplied = false;\n\n async updated() {\n await this.updateComplete;\n\n const textContainer = this.~~shadowRoot\n~~ ?.~~querySelector(`${prefix}-tag`)\n ?.shadowRoot?.querySelector(`.${prefix}--tag__label`)~~;\n if (!textContainer) return;\n\n const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;\n\n this._hasEllipsisApplied = hasEllipsis;\n }\n\n render() {\n const {\n disabled,\n selected,\n size,\n text,\n type,\n _hasEllipsisApplied: hasEllipsisApplied,\n } = this;\n\n return html` ${hasEllipsisApplied\n ? html` <cds-tooltip\n align=\"bottom\"\n keyboard-only\n closeOnActivation\n leave-delay-ms=${0}>\n <cds-tag\n part=\"tag\"\n ?aria-pressed=\"${selected}\"\n size=\"${size}\"\n ?disabled=\"${disabled}\"\n type=\"${type}\">\n <slot name=\"icon\" slot=\"icon\"></slot>\n ${text}\n <slot name=\"decorator\" slot=\"decorator\"></slot>\n <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n <slot name=\"slug\" slot=\"slug\"></slot>\n </cds-tag>\n <cds-tooltip-content id=\"content\"> ${text} </cds-tooltip-content>\n </cds-tooltip>`\n : html`\n <cds-tag\n part=\"tag\"\n ?aria-pressed=\"${selected}\"\n size=\"${size}\"\n ?disabled=\"${disabled}\"\n type=\"${type}\">\n <slot name=\"icon\" slot=\"icon\"></slot>\n ${text}\n <slot name=\"decorator\" slot=\"decorator\"></slot>\n <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n <slot name=\"slug\" slot=\"slug\"></slot>\n </cds-tag>\n `}`;\n }\n\n /\n The name of the custom event before this tag is selected.\n /\n static get eventBeforeSelected() {\n return `${prefix}-operational-tag-beingselected`;\n }\n\n /\n The name of the custom event fired after this tag is selected.\n */\n static get eventSelected() {\n return `${prefix}-operational-tag-selected`;\n }\n\n static styles = styles;\n}\n\nexport default CDSOperationalTag;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA6BA,IAAA,oBAAA,MACM,0BAA0B,kBAAkB,WAAW,UAAU,CAAC,CAAC,CAAC;;;~~wBAM7C~~,UAAU;GACnC,IAAI,KAAK,UACP,MAAM,gBAAgB;QACjB;IACL,MAAM,OAAO;KACX,SAAS;KACT,YAAY;KACZ,UAAU;KACV,QAAQ,EACN,aAAa,MAAM,OACrB;IACF;IACA,IACE,KAAK,cACH,IAAI,YACD,KAAK,YAAyC,qBAC/C,IACF,CACF,GACA;KACA,KAAK,WAAW,CAAC,KAAK;KACtB,KAAK,cACH,IAAI,YACD,KAAK,YAAyC,eAC/C,IACF,CACF;IACF;GACF;EACF;uBAUwB,UAAsB;GAC5C,KAAK,cAAc,KAAK;EAC1B;yBAK0B,UAAyB;GACjD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC,KAAK,cAAc,KAAK;EAE5B;kBAMW;kBAMA;;cAYJ;;6BAYe;;CAEtB,MAAM,UAAU;EACd,MAAM,KAAK;EAEX,MAAM,gBAAgB,KAAK,~~YACvB,cAAc,SAAe,CAAC,EAC9B,YAAY,cAAc,kBAAwB~~;~~EACtD~~,IAAI,CAAC,eAAe;EAEpB,MAAM,cAAc,cAAc,cAAc,cAAc;EAE9D,KAAK,sBAAsB;CAC7B;CAEA,SAAS;EACP,MAAM,EACJ,UACA,UACA,MACA,MACA,MACA,qBAAqB,uBACnB;EAEJ,OAAO,IAAI,IAAI,qBACX,IAAI;;;;2BAIe,EAAE;;;6BAGA,SAAS;oBAClB,KAAK;yBACA,SAAS;oBACd,KAAK;;cAEX,KAAK;;;;;+CAK4B,KAAK;0BAE5C,IAAI;;;6BAGiB,SAAS;oBAClB,KAAK;yBACA,SAAS;oBACd,KAAK;;cAEX,KAAK;;;;;;CAMjB;;;;CAKA,WAAW,sBAAsB;EAC/B,OAAO;CACT;;;;CAKA,WAAW,gBAAgB;EACzB,OAAO;CACT;;gBAEgBA;;AAClB;~~YA9HG~~,aAAa,kBAAkB,CAAA,GAAA,kBAAA,WAAA,gBAAA,KAAA,CAAA;YAO/B,aAAa,oBAAoB,CAAA,GAAA,kBAAA,WAAA,kBAAA,KAAA,CAAA;YAYjC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;YAM1B,MAAM,CAAA,GAAA,kBAAA,WAAA,uBAAA,KAAA,CAAA;~~gCA5FRC~~,cAAc,qBAA2B,CAAA,GAAA,iBAAA;~~AA2K1C~~,IAAA,0BAAe"}
1	+ {"version":3,"file":"operational-tag.js","names":["styles","customElement"],"sources":["../../../src/components/tag/operational-tag.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 /\n\nimport { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport CDSTag from './tag';\nimport '../tooltip/index';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/\n Operational tag.\n \n @element cds-operational-tag\n \n @fires cds-operational-tag-beforeselected - The custom event fired as the element is being selected\n * @fires cds-operational-tag-selected - The custom event fired after the element has been selected\n /\n@customElement(`${prefix}-operational-tag`)\nclass CDSOperationalTag extends HostListenerMixin(FocusMixin(LitElement)) {\n @query(`${prefix}-tag`)\n private _tag!: CDSTag;\n\n /\n Custom events to be triggered\n \n @param event Event object\n /\n protected triggerEvents = (event) => {\n if (this.disabled) {\n event.stopPropagation();\n } else {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy: event.target,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSOperationalTag).eventBeforeSelected,\n init\n )\n )\n ) {\n this.selected = !this.selected;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSOperationalTag).eventSelected,\n init\n )\n );\n }\n }\n };\n\n /\n Handles `click` event on this element.\n \n @param event The event.\n /\n @HostListener('shadowRoot:click')\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 _handleClick = (event: MouseEvent) => {\n this.triggerEvents(event);\n };\n\n @HostListener('shadowRoot: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 = (event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n this.triggerEvents(event);\n }\n };\n\n /\n `true` if the tag should be disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Specify the state of the selectable tag.\n /\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /\n The size of the tag.\n /\n @property({ type: String, reflect: true })\n size = TAG_SIZE.MEDIUM;\n\n /\n Provide text to be rendered inside of a the tag.\n /\n @property({ type: String, reflect: true })\n text = '';\n\n /\n The type of the tag.\n /\n @property({ reflect: true })\n type = TAG_TYPE.GRAY;\n\n /\n true if the tag text has ellipsis applied\n /\n @state()\n _hasEllipsisApplied = false;\n\n async updated() {\n await this.updateComplete;\n\n const textContainer = this._tag?._textContainer;\n if (!textContainer) return;\n\n const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;\n\n this._hasEllipsisApplied = hasEllipsis;\n }\n\n render() {\n const {\n disabled,\n selected,\n size,\n text,\n type,\n _hasEllipsisApplied: hasEllipsisApplied,\n } = this;\n\n return html` ${hasEllipsisApplied\n ? html` <cds-tooltip\n align=\"bottom\"\n keyboard-only\n closeOnActivation\n leave-delay-ms=${0}>\n <cds-tag\n part=\"tag\"\n ?aria-pressed=\"${selected}\"\n size=\"${size}\"\n ?disabled=\"${disabled}\"\n type=\"${type}\">\n <slot name=\"icon\" slot=\"icon\"></slot>\n ${text}\n <slot name=\"decorator\" slot=\"decorator\"></slot>\n <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n <slot name=\"slug\" slot=\"slug\"></slot>\n </cds-tag>\n <cds-tooltip-content id=\"content\"> ${text} </cds-tooltip-content>\n </cds-tooltip>`\n : html`\n <cds-tag\n part=\"tag\"\n ?aria-pressed=\"${selected}\"\n size=\"${size}\"\n ?disabled=\"${disabled}\"\n type=\"${type}\">\n <slot name=\"icon\" slot=\"icon\"></slot>\n ${text}\n <slot name=\"decorator\" slot=\"decorator\"></slot>\n <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n <slot name=\"slug\" slot=\"slug\"></slot>\n </cds-tag>\n `}`;\n }\n\n /\n The name of the custom event before this tag is selected.\n /\n static get eventBeforeSelected() {\n return `${prefix}-operational-tag-beingselected`;\n }\n\n /\n The name of the custom event fired after this tag is selected.\n */\n static get eventSelected() {\n return `${prefix}-operational-tag-selected`;\n }\n\n static styles = styles;\n}\n\nexport default CDSOperationalTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,oBAAA,MACM,0BAA0B,kBAAkB,WAAW,UAAU,CAAC,CAAC,CAAC;;;wBAS7C,UAAU;GACnC,IAAI,KAAK,UACP,MAAM,gBAAgB;QACjB;IACL,MAAM,OAAO;KACX,SAAS;KACT,YAAY;KACZ,UAAU;KACV,QAAQ,EACN,aAAa,MAAM,OACrB;IACF;IACA,IACE,KAAK,cACH,IAAI,YACD,KAAK,YAAyC,qBAC/C,IACF,CACF,GACA;KACA,KAAK,WAAW,CAAC,KAAK;KACtB,KAAK,cACH,IAAI,YACD,KAAK,YAAyC,eAC/C,IACF,CACF;IACF;GACF;EACF;uBAUwB,UAAsB;GAC5C,KAAK,cAAc,KAAK;EAC1B;yBAK0B,UAAyB;GACjD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC,KAAK,cAAc,KAAK;EAE5B;kBAMW;kBAMA;;cAYJ;;6BAYe;;CAEtB,MAAM,UAAU;EACd,MAAM,KAAK;EAEX,MAAM,gBAAgB,KAAK,MAAM;EACjC,IAAI,CAAC,eAAe;EAEpB,MAAM,cAAc,cAAc,cAAc,cAAc;EAE9D,KAAK,sBAAsB;CAC7B;CAEA,SAAS;EACP,MAAM,EACJ,UACA,UACA,MACA,MACA,MACA,qBAAqB,uBACnB;EAEJ,OAAO,IAAI,IAAI,qBACX,IAAI;;;;2BAIe,EAAE;;;6BAGA,SAAS;oBAClB,KAAK;yBACA,SAAS;oBACd,KAAK;;cAEX,KAAK;;;;;+CAK4B,KAAK;0BAE5C,IAAI;;;6BAGiB,SAAS;oBAClB,KAAK;yBACA,SAAS;oBACd,KAAK;;cAEX,KAAK;;;;;;CAMjB;;;;CAKA,WAAW,sBAAsB;EAC/B,OAAO;CACT;;;;CAKA,WAAW,gBAAgB;EACzB,OAAO;CACT;;gBAEgBA;;AAClB;YAxKG,MAAM,SAAe,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;YA4CrB,aAAa,kBAAkB,CAAA,GAAA,kBAAA,WAAA,gBAAA,KAAA,CAAA;YAO/B,aAAa,oBAAoB,CAAA,GAAA,kBAAA,WAAA,kBAAA,KAAA,CAAA;YAYjC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;YAM1B,MAAM,CAAA,GAAA,kBAAA,WAAA,uBAAA,KAAA,CAAA;gCA/FRC,cAAc,qBAA2B,CAAA,GAAA,iBAAA;AA4K1C,IAAA,0BAAe"}

package/es/components/tag/selectable-tag.d.ts CHANGED Viewed

@@ -6,7 +6,6 @@
  */
 import { LitElement } from 'lit';
 import { TAG_SIZE, TAG_TYPE } from './defs';
-import './tag';
 import '../tooltip/index';
 export { TAG_SIZE, TAG_TYPE };
 declare const CDSSelectableTag_base: {
@@ -34,6 +33,7 @@ declare const CDSSelectableTag_base: {
  * @fires cds-selectable-tag-selected - The custom event fired after the element has been selected
  */
 declare class CDSSelectableTag extends CDSSelectableTag_base {
+    private _tag;
     /**
      * Custom events to be triggered
      * @param event Event object

package/es/components/tag/selectable-tag.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"selectable-tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/selectable-tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;~~AAC5C~~,OAAO,~~OAAO,CAAC;AACf,OAAO,~~kBAAkB,CAAC;AAI1B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;~~uBAOyD~~,~~CAAA~~;;;;;;;~~AALvF~~;;;;;;;GAOG;AACH,cACM,gBAAiB,SAAQ,qBAAyC;~~IACtE~~;;;OAGG;IACH,SAAS,CAAC,aAAa,GAAI,UAAK,UA6B9B;IAEF;;;;OAIG;IAIH,OAAO,CAAC,YAAY,CAElB;IAKF,OAAO,CAAC,cAAc,CAIpB;IAEF;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,WAAmB;IAEvB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,SAAS,CAAC,mBAAmB,UAAS;IAEhC,OAAO;~~IAab~~,MAAM;IAqCN;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"selectable-tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/selectable-tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE5C,OAAO,kBAAkB,CAAC;AAI1B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;uBAOqC,CAAC;;;;;;;AALpE;;;;;;;GAOG;AACH,cACM,gBAAiB,SAAQ,qBAAyC;IAEtE,OAAO,CAAC,IAAI,CAAU;IAEtB;;;OAGG;IACH,SAAS,CAAC,aAAa,GAAI,UAAK,UA6B9B;IAEF;;;;OAIG;IAIH,OAAO,CAAC,YAAY,CAElB;IAKF,OAAO,CAAC,cAAc,CAIpB;IAEF;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,WAAmB;IAEvB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,SAAS,CAAC,mBAAmB,UAAS;IAEhC,OAAO;IAWb,MAAM;IAqCN;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,aAAa,WAEvB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC"}

package/es/components/tag/selectable-tag.js CHANGED Viewed

@@ -14,9 +14,8 @@ import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import "../tooltip/index.js";
 import { TAG_SIZE, TAG_TYPE } from "./defs.js";
 import tag_default from "./tag.scss.js";
-import "./tag.js";
 import { LitElement, html } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
 //#region src/components/tag/selectable-tag.ts
 /**
 * Copyright IBM Corp. 2019, 2025
@@ -64,7 +63,7 @@ let CDSSelectableTag = class CDSSelectableTag extends HostListenerMixin(FocusMix
 	}
 	async updated() {
 		await this.updateComplete;
-		const textContainer = this.shadowRoot?.querySelector(`cds-tag`)?.shadowRoot?.querySelector(`.cds--tag__label`);
+		const textContainer = this._tag?._textContainer;
 		if (!textContainer) return;
 		const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;
 		this._hasEllipsisApplied = hasEllipsis;
@@ -112,6 +111,7 @@ let CDSSelectableTag = class CDSSelectableTag extends HostListenerMixin(FocusMix
 		this.styles = tag_default;
 	}
 };
+__decorate([query(`cds-tag`)], CDSSelectableTag.prototype, "_tag", void 0);
 __decorate([HostListener("shadowRoot:click")], CDSSelectableTag.prototype, "_handleClick", void 0);
 __decorate([HostListener("shadowRoot:keydown")], CDSSelectableTag.prototype, "_handleKeyDown", void 0);
 __decorate([property({

package/es/components/tag/selectable-tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"selectable-tag.js","names":["styles","customElement"],"sources":["../../../src/components/tag/selectable-tag.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 /\n\nimport { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport './tag';\nimport '../tooltip/index';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/\n Selectable tag.\n \n @element cds-selectable-tag\n \n @fires cds-selectable-tag-beforeselected - The custom event fired as the element is being selected\n * @fires cds-selectable-tag-selected - The custom event fired after the element has been selected\n /\n@customElement(`${prefix}-selectable-tag`)\nclass CDSSelectableTag extends HostListenerMixin(FocusMixin(LitElement)) {\n /\n Custom events to be triggered\n * @param event Event object\n /\n protected triggerEvents = (event) => {\n if (this.disabled) {\n event.stopPropagation();\n } else {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy: event.target,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSelectableTag).eventBeforeSelected,\n init\n )\n )\n ) {\n this.selected = !this.selected;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSelectableTag).eventSelected,\n init\n )\n );\n }\n }\n };\n\n /\n Handles `click` event on this element.\n \n @param event The event.\n /\n @HostListener('shadowRoot:click')\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 _handleClick = (event: MouseEvent) => {\n this.triggerEvents(event);\n };\n\n @HostListener('shadowRoot: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 = (event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n this.triggerEvents(event);\n }\n };\n\n /\n `true` if the tag should be disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Specify the state of the selectable tag.\n /\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /\n The size of the tag.\n /\n @property({ type: String, reflect: true })\n size = TAG_SIZE.MEDIUM;\n\n /\n Provide text to be rendered inside of a the tag.\n /\n @property({ type: String, reflect: true })\n text = '';\n\n /\n true if the tag text has ellipsis applied\n /\n @state()\n protected _hasEllipsisApplied = false;\n\n async updated() {\n await this.updateComplete;\n\n const textContainer = this.~~shadowRoot\n~~ ?.~~querySelector(`${prefix}-tag`)\n ?.shadowRoot?.querySelector(`.${prefix}--tag__label`)~~;\n if (!textContainer) return;\n\n const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;\n\n this._hasEllipsisApplied = hasEllipsis;\n }\n\n render() {\n const {\n disabled,\n selected,\n size,\n text,\n _hasEllipsisApplied: hasEllipsisApplied,\n } = this;\n\n return html` ${hasEllipsisApplied\n ? html` <cds-tooltip align=\"bottom\" keyboard-only leave-delay-ms=${0}>\n <cds-tag\n ?aria-pressed=\"${selected}\"\n size=\"${size}\"\n ?disabled=\"${disabled}\">\n <slot name=\"icon\" slot=\"icon\"></slot>\n ${text}\n <slot name=\"decorator\" slot=\"decorator\"></slot>\n <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n <slot name=\"slug\" slot=\"slug\"></slot>\n </cds-tag>\n <cds-tooltip-content id=\"content\"> ${text} </cds-tooltip-content>\n </cds-tooltip>`\n : html`\n <cds-tag\n ?aria-pressed=\"${selected}\"\n size=\"${size}\"\n ?disabled=\"${disabled}\">\n <slot name=\"icon\" slot=\"icon\"></slot>\n ${text}\n <slot name=\"decorator\" slot=\"decorator\"></slot>\n <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n <slot name=\"slug\" slot=\"slug\"></slot>\n </cds-tag>\n `}`;\n }\n\n /\n The name of the custom event before this tag is selected.\n /\n static get eventBeforeSelected() {\n return `${prefix}-selectable-tag-beingselected`;\n }\n\n /\n The name of the custom event fired after this tag is selected.\n */\n static get eventSelected() {\n return `${prefix}-selectable-tag-selected`;\n }\n\n static styles = styles;\n}\n\nexport default CDSSelectableTag;\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA6BA,IAAA,mBAAA,MACM,yBAAyB,kBAAkB,WAAW,UAAU,CAAC,CAAC,CAAC;;;~~wBAK5C~~,UAAU;GACnC,IAAI,KAAK,UACP,MAAM,gBAAgB;QACjB;IACL,MAAM,OAAO;KACX,SAAS;KACT,YAAY;KACZ,UAAU;KACV,QAAQ,EACN,aAAa,MAAM,OACrB;IACF;IACA,IACE,KAAK,cACH,IAAI,YACD,KAAK,YAAwC,qBAC9C,IACF,CACF,GACA;KACA,KAAK,WAAW,CAAC,KAAK;KACtB,KAAK,cACH,IAAI,YACD,KAAK,YAAwC,eAC9C,IACF,CACF;IACF;GACF;EACF;uBAUwB,UAAsB;GAC5C,KAAK,cAAc,KAAK;EAC1B;yBAK0B,UAAyB;GACjD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC,KAAK,cAAc,KAAK;EAE5B;kBAMW;kBAMA;;cAYJ;6BAMyB;;CAEhC,MAAM,UAAU;EACd,MAAM,KAAK;EAEX,MAAM,gBAAgB,KAAK,~~YACvB,cAAc,SAAe,CAAC,EAC9B,YAAY,cAAc,kBAAwB~~;~~EACtD~~,IAAI,CAAC,eAAe;EAEpB,MAAM,cAAc,cAAc,cAAc,cAAc;EAE9D,KAAK,sBAAsB;CAC7B;CAEA,SAAS;EACP,MAAM,EACJ,UACA,UACA,MACA,MACA,qBAAqB,uBACnB;EAEJ,OAAO,IAAI,IAAI,qBACX,IAAI,6DAA6D,EAAE;;6BAE9C,SAAS;oBAClB,KAAK;yBACA,SAAS;;cAEpB,KAAK;;;;;+CAK4B,KAAK;0BAE5C,IAAI;;6BAEiB,SAAS;oBAClB,KAAK;yBACA,SAAS;;cAEpB,KAAK;;;;;;CAMjB;;;;CAKA,WAAW,sBAAsB;EAC/B,OAAO;CACT;;;;CAKA,WAAW,gBAAgB;EACzB,OAAO;CACT;;gBAEgBA;;AAClB;~~YA/GG~~,aAAa,kBAAkB,CAAA,GAAA,iBAAA,WAAA,gBAAA,KAAA,CAAA;YAO/B,aAAa,oBAAoB,CAAA,GAAA,iBAAA,WAAA,kBAAA,KAAA,CAAA;YAYjC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,MAAM,CAAA,GAAA,iBAAA,WAAA,uBAAA,KAAA,CAAA;+~~BArFRC~~,cAAc,oBAA0B,CAAA,GAAA,gBAAA;~~AA2JzC~~,IAAA,yBAAe"}
1	+ {"version":3,"file":"selectable-tag.js","names":["styles","customElement"],"sources":["../../../src/components/tag/selectable-tag.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 /\n\nimport { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport CDSTag from './tag';\nimport '../tooltip/index';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/\n Selectable tag.\n \n @element cds-selectable-tag\n \n @fires cds-selectable-tag-beforeselected - The custom event fired as the element is being selected\n * @fires cds-selectable-tag-selected - The custom event fired after the element has been selected\n /\n@customElement(`${prefix}-selectable-tag`)\nclass CDSSelectableTag extends HostListenerMixin(FocusMixin(LitElement)) {\n @query(`${prefix}-tag`)\n private _tag!: CDSTag;\n\n /\n Custom events to be triggered\n * @param event Event object\n /\n protected triggerEvents = (event) => {\n if (this.disabled) {\n event.stopPropagation();\n } else {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy: event.target,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSelectableTag).eventBeforeSelected,\n init\n )\n )\n ) {\n this.selected = !this.selected;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSSelectableTag).eventSelected,\n init\n )\n );\n }\n }\n };\n\n /\n Handles `click` event on this element.\n \n @param event The event.\n /\n @HostListener('shadowRoot:click')\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 _handleClick = (event: MouseEvent) => {\n this.triggerEvents(event);\n };\n\n @HostListener('shadowRoot: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 = (event: KeyboardEvent) => {\n if (event.key === 'Enter' \|\| event.key === ' ') {\n this.triggerEvents(event);\n }\n };\n\n /\n `true` if the tag should be disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Specify the state of the selectable tag.\n /\n @property({ type: Boolean, reflect: true })\n selected = false;\n\n /\n The size of the tag.\n /\n @property({ type: String, reflect: true })\n size = TAG_SIZE.MEDIUM;\n\n /\n Provide text to be rendered inside of a the tag.\n /\n @property({ type: String, reflect: true })\n text = '';\n\n /\n true if the tag text has ellipsis applied\n /\n @state()\n protected _hasEllipsisApplied = false;\n\n async updated() {\n await this.updateComplete;\n\n const textContainer = this._tag?._textContainer;\n if (!textContainer) return;\n\n const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;\n\n this._hasEllipsisApplied = hasEllipsis;\n }\n\n render() {\n const {\n disabled,\n selected,\n size,\n text,\n _hasEllipsisApplied: hasEllipsisApplied,\n } = this;\n\n return html` ${hasEllipsisApplied\n ? html` <cds-tooltip align=\"bottom\" keyboard-only leave-delay-ms=${0}>\n <cds-tag\n ?aria-pressed=\"${selected}\"\n size=\"${size}\"\n ?disabled=\"${disabled}\">\n <slot name=\"icon\" slot=\"icon\"></slot>\n ${text}\n <slot name=\"decorator\" slot=\"decorator\"></slot>\n <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n <slot name=\"slug\" slot=\"slug\"></slot>\n </cds-tag>\n <cds-tooltip-content id=\"content\"> ${text} </cds-tooltip-content>\n </cds-tooltip>`\n : html`\n <cds-tag\n ?aria-pressed=\"${selected}\"\n size=\"${size}\"\n ?disabled=\"${disabled}\">\n <slot name=\"icon\" slot=\"icon\"></slot>\n ${text}\n <slot name=\"decorator\" slot=\"decorator\"></slot>\n <slot name=\"ai-label\" slot=\"ai-label\"></slot>\n <slot name=\"slug\" slot=\"slug\"></slot>\n </cds-tag>\n `}`;\n }\n\n /\n The name of the custom event before this tag is selected.\n /\n static get eventBeforeSelected() {\n return `${prefix}-selectable-tag-beingselected`;\n }\n\n /\n The name of the custom event fired after this tag is selected.\n */\n static get eventSelected() {\n return `${prefix}-selectable-tag-selected`;\n }\n\n static styles = styles;\n}\n\nexport default CDSSelectableTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,mBAAA,MACM,yBAAyB,kBAAkB,WAAW,UAAU,CAAC,CAAC,CAAC;;;wBAQ5C,UAAU;GACnC,IAAI,KAAK,UACP,MAAM,gBAAgB;QACjB;IACL,MAAM,OAAO;KACX,SAAS;KACT,YAAY;KACZ,UAAU;KACV,QAAQ,EACN,aAAa,MAAM,OACrB;IACF;IACA,IACE,KAAK,cACH,IAAI,YACD,KAAK,YAAwC,qBAC9C,IACF,CACF,GACA;KACA,KAAK,WAAW,CAAC,KAAK;KACtB,KAAK,cACH,IAAI,YACD,KAAK,YAAwC,eAC9C,IACF,CACF;IACF;GACF;EACF;uBAUwB,UAAsB;GAC5C,KAAK,cAAc,KAAK;EAC1B;yBAK0B,UAAyB;GACjD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC,KAAK,cAAc,KAAK;EAE5B;kBAMW;kBAMA;;cAYJ;6BAMyB;;CAEhC,MAAM,UAAU;EACd,MAAM,KAAK;EAEX,MAAM,gBAAgB,KAAK,MAAM;EACjC,IAAI,CAAC,eAAe;EAEpB,MAAM,cAAc,cAAc,cAAc,cAAc;EAE9D,KAAK,sBAAsB;CAC7B;CAEA,SAAS;EACP,MAAM,EACJ,UACA,UACA,MACA,MACA,qBAAqB,uBACnB;EAEJ,OAAO,IAAI,IAAI,qBACX,IAAI,6DAA6D,EAAE;;6BAE9C,SAAS;oBAClB,KAAK;yBACA,SAAS;;cAEpB,KAAK;;;;;+CAK4B,KAAK;0BAE5C,IAAI;;6BAEiB,SAAS;oBAClB,KAAK;yBACA,SAAS;;cAEpB,KAAK;;;;;;CAMjB;;;;CAKA,WAAW,sBAAsB;EAC/B,OAAO;CACT;;;;CAKA,WAAW,gBAAgB;EACzB,OAAO;CACT;;gBAEgBA;;AAClB;YAxJG,MAAM,SAAe,CAAA,GAAA,iBAAA,WAAA,QAAA,KAAA,CAAA;YA2CrB,aAAa,kBAAkB,CAAA,GAAA,iBAAA,WAAA,gBAAA,KAAA,CAAA;YAO/B,aAAa,oBAAoB,CAAA,GAAA,iBAAA,WAAA,kBAAA,KAAA,CAAA;YAYjC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,MAAM,CAAA,GAAA,iBAAA,WAAA,uBAAA,KAAA,CAAA;+BAxFRC,cAAc,oBAA0B,CAAA,GAAA,gBAAA;AA4JzC,IAAA,yBAAe"}

package/es/components/tag/tag.d.ts CHANGED Viewed

@@ -31,6 +31,7 @@ declare const CDSTag_base: {
  */
 declare class CDSTag extends CDSTag_base {
     protected _buttonNode: HTMLButtonElement;
+    _textContainer: HTMLElement;
     /**
      * Handles `slotchange` event.
      */

package/es/components/tag/tag.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAI5C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;uBAKG,CAAC;;;;;;;AAHlC;;;;;GAKG;AACH,cACM,MAAO,SAAQ,WAAyC;IAE5D,SAAS,CAAC,WAAW,EAAG,iBAAiB,CAAC;~~IAE1C~~;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAsBpD;;OAEG;IACH,SAAS,CAAC,qBAAqB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAOjD;;;;OAIG;IAIH,SAAS,CAAC,YAAY,GAAI,OAAO,UAAU,UAgCzC;IAEF;;;;OAIG;IAEH,KAAK,SAAkB;IAEvB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,IAAI,UAAQ;IAEZ;;OAEG;IAEH,IAAI,WAAmB;IAEvB;;OAEG;IAEH,IAAI,WAAiB;IAErB;;OAEG;IAEH,mBAAmB,UAAS;IAE5B,OAAO;~~IAuBP~~,MAAM;IA8BN;;;;OAIG;IACH,MAAM,KAAK,QAAQ,WAElB;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAI5C,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;uBAKG,CAAC;;;;;;;AAHlC;;;;;GAKG;AACH,cACM,MAAO,SAAQ,WAAyC;IAE5D,SAAS,CAAC,WAAW,EAAG,iBAAiB,CAAC;IAG1C,cAAc,EAAG,WAAW,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAsBpD;;OAEG;IACH,SAAS,CAAC,qBAAqB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAOjD;;;;OAIG;IAIH,SAAS,CAAC,YAAY,GAAI,OAAO,UAAU,UAgCzC;IAEF;;;;OAIG;IAEH,KAAK,SAAkB;IAEvB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAEH,IAAI,UAAQ;IAEZ;;OAEG;IAEH,IAAI,WAAmB;IAEvB;;OAEG;IAEH,IAAI,WAAiB;IAErB;;OAEG;IAEH,mBAAmB,UAAS;IAE5B,OAAO;IAoBP,MAAM;IA8BN;;;;OAIG;IACH,MAAM,KAAK,QAAQ,WAElB;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;;OAGG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,MAAM,CAAC"}

package/es/components/tag/tag.js CHANGED Viewed

@@ -80,9 +80,8 @@ let CDSTag = class CDSTag extends HostListenerMixin(FocusMixin(LitElement)) {
 		this.requestUpdate();
 	}
 	updated() {
-		const textContainer = this.shadowRoot?.querySelector(`.cds--tag__label`);
-		if (!textContainer || this._hasEllipsisApplied === true) return;
-		this._hasEllipsisApplied = textContainer.scrollWidth > textContainer.clientWidth;
+		if (!this._textContainer || this._hasEllipsisApplied === true) return;
+		this._hasEllipsisApplied = this._textContainer.scrollWidth > this._textContainer.clientWidth;
 		const root = this.getRootNode();
 		if (root instanceof ShadowRoot) {
 			const parent = root.host.tagName.toLowerCase();
@@ -141,6 +140,7 @@ let CDSTag = class CDSTag extends HostListenerMixin(FocusMixin(LitElement)) {
 	}
 };
 __decorate([query("button")], CDSTag.prototype, "_buttonNode", void 0);
+__decorate([query(`.cds--tag__label`)], CDSTag.prototype, "_textContainer", void 0);
 __decorate([HostListener("shadowRoot:click")], CDSTag.prototype, "_handleClick", void 0);
 __decorate([property({ type: String })], CDSTag.prototype, "title", void 0);
 __decorate([property({

package/es/components/tag/tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag.js","names":["styles","customElement"],"sources":["../../../src/components/tag/tag.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 { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/\n Tag.\n * @element cds-tag\n * @fires cds-tag-beingclosed - The custom event fired as the element is being closed\n * @fires cds-tag-closed - The custom event fired after the element has been closed\n /\n@customElement(`${prefix}-tag`)\nclass CDSTag extends HostListenerMixin(FocusMixin(LitElement)) {\n @query('button')\n protected _buttonNode!: HTMLButtonElement;\n\n /\n Handles `slotchange` event.\n /\n protected _handleAILabelSlotChange({ target }: Event) {\n const hasContent = (target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTag).aiLabelItem\n ) \|\|\n // remove reference of slug in v12\n (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTag).slugItem\n )\n : false\n );\n if (hasContent.length > 0) {\n (hasContent[0] as HTMLElement).setAttribute('tag', `${this.type}`);\n (hasContent[0] as HTMLElement).setAttribute('size', 'sm');\n (hasContent[0] as HTMLElement).setAttribute('kind', 'inline');\n }\n this.requestUpdate();\n }\n\n /\n Handles `slotchange` event.\n /\n protected _handleIconSlotChange({ target }: Event) {\n const hasIcon = (target as HTMLSlotElement).assignedNodes();\n\n this.hasCustomIcon = hasIcon.length > 0;\n this.requestUpdate();\n }\n\n /\n Handles `click` event on this element.\n \n @param event The event.\n /\n @HostListener('shadowRoot:click')\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 protected _handleClick = (event: MouseEvent) => {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n if (event.composedPath().indexOf(this._buttonNode!) >= 0) {\n if (this.disabled) {\n event.stopPropagation();\n } else if (this.open) {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy: event.target,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTag).eventBeforeClose,\n init\n )\n )\n ) {\n this.open = false;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTag).eventClose,\n init\n )\n );\n }\n }\n }\n };\n\n /\n Text to show on filter tag \"clear\" buttons. Corresponds to the attribute with the same name\n \n @deprecated The `title` property has been deprecated and will be removed in the next major version. Use cds-dismissible-tag instead.\n /\n @property({ type: String })\n title = 'Clear filter';\n\n /\n `true` if the tag should be disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Determine if is a filter/chip\n \n @deprecated The `filter` property has been deprecated and will be removed in the next major version. Use cds-dismissible-tag instead.\n /\n @property({ type: Boolean, reflect: true })\n filter = false;\n\n /\n `true` if there is a custom icon.\n /\n @property({ type: Boolean, attribute: 'has-custom-icon', reflect: true })\n hasCustomIcon = false;\n\n /\n `true` if the tag should be open.\n /\n @property({ type: Boolean, reflect: true })\n open = true;\n\n /\n The size of the tag.\n /\n @property({ reflect: true })\n size = TAG_SIZE.MEDIUM;\n\n /\n The type of the tag.\n /\n @property({ reflect: true })\n type = TAG_TYPE.GRAY;\n\n /\n true if the tag text has ellipsis applied\n /\n @state()\n _hasEllipsisApplied = false;\n\n updated() {\n ~~const textContainer = this.shadowRoot?.querySelector(\n `.${prefix}--tag__label`\n );\n~~ if (!~~textContainer~~ \|\| this._hasEllipsisApplied === true) return;\n\n this._hasEllipsisApplied =\n ~~textContainer~~.scrollWidth > ~~textContainer~~.clientWidth;\n\n const root = this.getRootNode();\n // Check if the root is a shadow root and get its host\n if (root instanceof ShadowRoot) {\n const parent = root.host.tagName.toLowerCase();\n if (\n parent === `${prefix}-selectable-tag` \|\|\n parent === `${prefix}-operational-tag`\n ) {\n this.setAttribute('role', 'button');\n this.tabIndex = this.disabled ? -1 : 0;\n }\n }\n }\n\n render() {\n const {\n disabled,\n filter,\n _handleAILabelSlotChange: handleAILabelSlotChange,\n _handleIconSlotChange: handleIconSlotChange,\n size,\n title,\n } = this;\n\n return html`\n ${size !== TAG_SIZE.SMALL\n ? html`<slot name=\"icon\" @slotchange=\"${handleIconSlotChange}\"></slot>`\n : ''}\n <span class=\"${prefix}--tag__label\">\n <slot></slot>\n </span>\n <slot name=\"decorator\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n <slot name=\"ai-label\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n ${filter\n ? html`\n <button class=\"${prefix}--tag__close-icon\" ?disabled=${disabled}>\n ${iconLoader(Close16, { 'aria-label': title })}\n </button>\n `\n : ``}\n `;\n }\n\n /\n A selector that will return the slug item.\n \n remove in v12\n /\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n /\n A selector that will return the AI Label item.\n /\n static get aiLabelItem() {\n return `${prefix}-ai-label`;\n }\n\n /\n The name of the custom event fired before this tag is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this tag.\n /\n static get eventBeforeClose() {\n return `${prefix}-tag-beingclosed`;\n }\n\n /\n The name of the custom event fired after this tag is closed upon a user gesture.\n */\n static get eventClose() {\n return `${prefix}-tag-closed`;\n }\n\n static styles = styles;\n}\n\nexport default CDSTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,IAAA,SAAA,MACM,eAAe,kBAAkB,WAAW,UAAU,CAAC,CAAC,CAAC;;;~~uBA+CnC~~,UAAsB;GAE9C,IAAI,MAAM,aAAa,CAAC,CAAC,QAAQ,KAAK,WAAY,KAAK;QACjD,KAAK,UACP,MAAM,gBAAgB;SACjB,IAAI,KAAK,MAAM;KACpB,MAAM,OAAO;MACX,SAAS;MACT,YAAY;MACZ,UAAU;MACV,QAAQ,EACN,aAAa,MAAM,OACrB;KACF;KACA,IACE,KAAK,cACH,IAAI,YACD,KAAK,YAA8B,kBACpC,IACF,CACF,GACA;MACA,KAAK,OAAO;MACZ,KAAK,cACH,IAAI,YACD,KAAK,YAA8B,YACpC,IACF,CACF;KACF;IACF;;EAEJ;eAQQ;kBAMG;gBAQF;uBAMO;cAMT;;;6BAkBe;;;;;CA5HtB,yBAAmC,EAAE,UAAiB;EACpD,MAAM,aAAc,OACjB,cAAc,CAAC,CACf,QAAQ,SACN,KAAqB,YAAY,KAAA,IAC7B,KAAqB,QACnB,KAAK,YAA8B,WACtC,KAEC,KAAqB,QACnB,KAAK,YAA8B,QACtC,IACA,KACN;EACF,IAAI,WAAW,SAAS,GAAG;GACzB,WAAY,EAAE,CAAiB,aAAa,OAAO,GAAG,KAAK,MAAM;GACjE,WAAY,EAAE,CAAiB,aAAa,QAAQ,IAAI;GACxD,WAAY,EAAE,CAAiB,aAAa,QAAQ,QAAQ;EAC9D;EACA,KAAK,cAAc;CACrB;;;;CAKA,sBAAgC,EAAE,UAAiB;EACjD,MAAM,UAAW,OAA2B,cAAc;EAE1D,KAAK,gBAAgB,QAAQ,SAAS;EACtC,KAAK,cAAc;CACrB;CAgGA,UAAU;EACR,~~MAAM~~,~~gBAAgB~~,KAAK,~~YAAY~~,~~cACrC,kBACF;EACA,IAAI,CAAC,iBAAiB,~~KAAK,wBAAwB,MAAM;~~EAEzD~~,KAAK,sBACH,~~cAAc~~,cAAc,~~cAAc~~;~~EAE5C~~,MAAM,OAAO,KAAK,YAAY;EAE9B,IAAI,gBAAgB,YAAY;GAC9B,MAAM,SAAS,KAAK,KAAK,QAAQ,YAAY;GAC7C,IACE,WAAW,wBACX,WAAW,uBACX;IACA,KAAK,aAAa,QAAQ,QAAQ;IAClC,KAAK,WAAW,KAAK,WAAW,KAAK;GACvC;EACF;CACF;CAEA,SAAS;EACP,MAAM,EACJ,UACA,QACA,0BAA0B,yBAC1B,uBAAuB,sBACvB,MACA,UACE;EAEJ,OAAO,IAAI;QACP,SAAA,OACE,IAAI,kCAAkC,qBAAqB,aAC3D,GAAG;2BACe;;;4CAGgB,wBAAwB;2CACzB,wBAAwB;uCAC5B,wBAAwB;QACvD,SACE,IAAI;mCACsB,+BAA+B,SAAS;gBAC5D,WAAW,SAAS,EAAE,cAAc,MAAM,CAAC,EAAE;;cAGnD,GAAG;;CAEX;;;;;;CAOA,WAAW,WAAW;EACpB,OAAO;CACT;;;;CAKA,WAAW,cAAc;EACvB,OAAO;CACT;;;;;CAMA,WAAW,mBAAmB;EAC5B,OAAO;CACT;;;;CAKA,WAAW,aAAa;EACtB,OAAO;CACT;;gBAEgBA;;AAClB;YAzNG,MAAM,QAAQ,CAAA,GAAA,OAAA,WAAA,eAAA,KAAA,CAAA;~~YA2Cd~~,aAAa,kBAAkB,CAAA,GAAA,OAAA,WAAA,gBAAA,KAAA,CAAA;YA0C/B,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,OAAA,WAAA,SAAA,KAAA,CAAA;YAMzB,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,OAAA,WAAA,YAAA,KAAA,CAAA;YAQzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,OAAA,WAAA,UAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,WAAW;CAAmB,SAAS;AAAK,CAAC,CAAA,GAAA,OAAA,WAAA,iBAAA,KAAA,CAAA;YAMvE,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,OAAA,WAAA,QAAA,KAAA,CAAA;YAMzC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,OAAA,WAAA,QAAA,KAAA,CAAA;YAM1B,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,OAAA,WAAA,QAAA,KAAA,CAAA;YAM1B,MAAM,CAAA,GAAA,OAAA,WAAA,uBAAA,KAAA,CAAA;~~qBAnIRC~~,cAAc,SAAe,CAAA,GAAA,MAAA;AA6N9B,IAAA,cAAe"}
1	+ {"version":3,"file":"tag.js","names":["styles","customElement"],"sources":["../../../src/components/tag/tag.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 { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TAG_SIZE, TAG_TYPE } from './defs';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TAG_SIZE, TAG_TYPE };\n\n/\n Tag.\n * @element cds-tag\n * @fires cds-tag-beingclosed - The custom event fired as the element is being closed\n * @fires cds-tag-closed - The custom event fired after the element has been closed\n /\n@customElement(`${prefix}-tag`)\nclass CDSTag extends HostListenerMixin(FocusMixin(LitElement)) {\n @query('button')\n protected _buttonNode!: HTMLButtonElement;\n\n @query(`.${prefix}--tag__label`)\n _textContainer!: HTMLElement;\n\n /\n Handles `slotchange` event.\n /\n protected _handleAILabelSlotChange({ target }: Event) {\n const hasContent = (target as HTMLSlotElement)\n .assignedNodes()\n .filter((elem) =>\n (elem as HTMLElement).matches !== undefined\n ? (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTag).aiLabelItem\n ) \|\|\n // remove reference of slug in v12\n (elem as HTMLElement).matches(\n (this.constructor as typeof CDSTag).slugItem\n )\n : false\n );\n if (hasContent.length > 0) {\n (hasContent[0] as HTMLElement).setAttribute('tag', `${this.type}`);\n (hasContent[0] as HTMLElement).setAttribute('size', 'sm');\n (hasContent[0] as HTMLElement).setAttribute('kind', 'inline');\n }\n this.requestUpdate();\n }\n\n /\n Handles `slotchange` event.\n /\n protected _handleIconSlotChange({ target }: Event) {\n const hasIcon = (target as HTMLSlotElement).assignedNodes();\n\n this.hasCustomIcon = hasIcon.length > 0;\n this.requestUpdate();\n }\n\n /\n Handles `click` event on this element.\n \n @param event The event.\n /\n @HostListener('shadowRoot:click')\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 protected _handleClick = (event: MouseEvent) => {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n if (event.composedPath().indexOf(this._buttonNode!) >= 0) {\n if (this.disabled) {\n event.stopPropagation();\n } else if (this.open) {\n const init = {\n bubbles: true,\n cancelable: true,\n composed: true,\n detail: {\n triggeredBy: event.target,\n },\n };\n if (\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTag).eventBeforeClose,\n init\n )\n )\n ) {\n this.open = false;\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSTag).eventClose,\n init\n )\n );\n }\n }\n }\n };\n\n /\n Text to show on filter tag \"clear\" buttons. Corresponds to the attribute with the same name\n \n @deprecated The `title` property has been deprecated and will be removed in the next major version. Use cds-dismissible-tag instead.\n /\n @property({ type: String })\n title = 'Clear filter';\n\n /\n `true` if the tag should be disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Determine if is a filter/chip\n \n @deprecated The `filter` property has been deprecated and will be removed in the next major version. Use cds-dismissible-tag instead.\n /\n @property({ type: Boolean, reflect: true })\n filter = false;\n\n /\n `true` if there is a custom icon.\n /\n @property({ type: Boolean, attribute: 'has-custom-icon', reflect: true })\n hasCustomIcon = false;\n\n /\n `true` if the tag should be open.\n /\n @property({ type: Boolean, reflect: true })\n open = true;\n\n /\n The size of the tag.\n /\n @property({ reflect: true })\n size = TAG_SIZE.MEDIUM;\n\n /\n The type of the tag.\n /\n @property({ reflect: true })\n type = TAG_TYPE.GRAY;\n\n /\n true if the tag text has ellipsis applied\n /\n @state()\n _hasEllipsisApplied = false;\n\n updated() {\n if (!this._textContainer \|\| this._hasEllipsisApplied === true) return;\n\n this._hasEllipsisApplied =\n this._textContainer.scrollWidth > this._textContainer.clientWidth;\n\n const root = this.getRootNode();\n // Check if the root is a shadow root and get its host\n if (root instanceof ShadowRoot) {\n const parent = root.host.tagName.toLowerCase();\n if (\n parent === `${prefix}-selectable-tag` \|\|\n parent === `${prefix}-operational-tag`\n ) {\n this.setAttribute('role', 'button');\n this.tabIndex = this.disabled ? -1 : 0;\n }\n }\n }\n\n render() {\n const {\n disabled,\n filter,\n _handleAILabelSlotChange: handleAILabelSlotChange,\n _handleIconSlotChange: handleIconSlotChange,\n size,\n title,\n } = this;\n\n return html`\n ${size !== TAG_SIZE.SMALL\n ? html`<slot name=\"icon\" @slotchange=\"${handleIconSlotChange}\"></slot>`\n : ''}\n <span class=\"${prefix}--tag__label\">\n <slot></slot>\n </span>\n <slot name=\"decorator\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n <slot name=\"ai-label\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n <slot name=\"slug\" @slotchange=\"${handleAILabelSlotChange}\"></slot>\n ${filter\n ? html`\n <button class=\"${prefix}--tag__close-icon\" ?disabled=${disabled}>\n ${iconLoader(Close16, { 'aria-label': title })}\n </button>\n `\n : ``}\n `;\n }\n\n /\n A selector that will return the slug item.\n \n remove in v12\n /\n static get slugItem() {\n return `${prefix}-slug`;\n }\n\n /\n A selector that will return the AI Label item.\n /\n static get aiLabelItem() {\n return `${prefix}-ai-label`;\n }\n\n /\n The name of the custom event fired before this tag is being closed upon a user gesture.\n * Cancellation of this event stops the user-initiated action of closing this tag.\n /\n static get eventBeforeClose() {\n return `${prefix}-tag-beingclosed`;\n }\n\n /\n The name of the custom event fired after this tag is closed upon a user gesture.\n */\n static get eventClose() {\n return `${prefix}-tag-closed`;\n }\n\n static styles = styles;\n}\n\nexport default CDSTag;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,IAAA,SAAA,MACM,eAAe,kBAAkB,WAAW,UAAU,CAAC,CAAC,CAAC;;;uBAkDnC,UAAsB;GAE9C,IAAI,MAAM,aAAa,CAAC,CAAC,QAAQ,KAAK,WAAY,KAAK;QACjD,KAAK,UACP,MAAM,gBAAgB;SACjB,IAAI,KAAK,MAAM;KACpB,MAAM,OAAO;MACX,SAAS;MACT,YAAY;MACZ,UAAU;MACV,QAAQ,EACN,aAAa,MAAM,OACrB;KACF;KACA,IACE,KAAK,cACH,IAAI,YACD,KAAK,YAA8B,kBACpC,IACF,CACF,GACA;MACA,KAAK,OAAO;MACZ,KAAK,cACH,IAAI,YACD,KAAK,YAA8B,YACpC,IACF,CACF;KACF;IACF;;EAEJ;eAQQ;kBAMG;gBAQF;uBAMO;cAMT;;;6BAkBe;;;;;CA5HtB,yBAAmC,EAAE,UAAiB;EACpD,MAAM,aAAc,OACjB,cAAc,CAAC,CACf,QAAQ,SACN,KAAqB,YAAY,KAAA,IAC7B,KAAqB,QACnB,KAAK,YAA8B,WACtC,KAEC,KAAqB,QACnB,KAAK,YAA8B,QACtC,IACA,KACN;EACF,IAAI,WAAW,SAAS,GAAG;GACzB,WAAY,EAAE,CAAiB,aAAa,OAAO,GAAG,KAAK,MAAM;GACjE,WAAY,EAAE,CAAiB,aAAa,QAAQ,IAAI;GACxD,WAAY,EAAE,CAAiB,aAAa,QAAQ,QAAQ;EAC9D;EACA,KAAK,cAAc;CACrB;;;;CAKA,sBAAgC,EAAE,UAAiB;EACjD,MAAM,UAAW,OAA2B,cAAc;EAE1D,KAAK,gBAAgB,QAAQ,SAAS;EACtC,KAAK,cAAc;CACrB;CAgGA,UAAU;EACR,IAAI,CAAC,KAAK,kBAAkB,KAAK,wBAAwB,MAAM;EAE/D,KAAK,sBACH,KAAK,eAAe,cAAc,KAAK,eAAe;EAExD,MAAM,OAAO,KAAK,YAAY;EAE9B,IAAI,gBAAgB,YAAY;GAC9B,MAAM,SAAS,KAAK,KAAK,QAAQ,YAAY;GAC7C,IACE,WAAW,wBACX,WAAW,uBACX;IACA,KAAK,aAAa,QAAQ,QAAQ;IAClC,KAAK,WAAW,KAAK,WAAW,KAAK;GACvC;EACF;CACF;CAEA,SAAS;EACP,MAAM,EACJ,UACA,QACA,0BAA0B,yBAC1B,uBAAuB,sBACvB,MACA,UACE;EAEJ,OAAO,IAAI;QACP,SAAA,OACE,IAAI,kCAAkC,qBAAqB,aAC3D,GAAG;2BACe;;;4CAGgB,wBAAwB;2CACzB,wBAAwB;uCAC5B,wBAAwB;QACvD,SACE,IAAI;mCACsB,+BAA+B,SAAS;gBAC5D,WAAW,SAAS,EAAE,cAAc,MAAM,CAAC,EAAE;;cAGnD,GAAG;;CAEX;;;;;;CAOA,WAAW,WAAW;EACpB,OAAO;CACT;;;;CAKA,WAAW,cAAc;EACvB,OAAO;CACT;;;;;CAMA,WAAW,mBAAmB;EAC5B,OAAO;CACT;;;;CAKA,WAAW,aAAa;EACtB,OAAO;CACT;;gBAEgBA;;AAClB;YAzNG,MAAM,QAAQ,CAAA,GAAA,OAAA,WAAA,eAAA,KAAA,CAAA;YAGd,MAAM,kBAAwB,CAAA,GAAA,OAAA,WAAA,kBAAA,KAAA,CAAA;YA2C9B,aAAa,kBAAkB,CAAA,GAAA,OAAA,WAAA,gBAAA,KAAA,CAAA;YA0C/B,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,OAAA,WAAA,SAAA,KAAA,CAAA;YAMzB,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,OAAA,WAAA,YAAA,KAAA,CAAA;YAQzC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,OAAA,WAAA,UAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,MAAM;CAAS,WAAW;CAAmB,SAAS;AAAK,CAAC,CAAA,GAAA,OAAA,WAAA,iBAAA,KAAA,CAAA;YAMvE,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,OAAA,WAAA,QAAA,KAAA,CAAA;YAMzC,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,OAAA,WAAA,QAAA,KAAA,CAAA;YAM1B,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,OAAA,WAAA,QAAA,KAAA,CAAA;YAM1B,MAAM,CAAA,GAAA,OAAA,WAAA,uBAAA,KAAA,CAAA;qBAtIRC,cAAc,SAAe,CAAA,GAAA,MAAA;AA6N9B,IAAA,cAAe"}