npm - @carbon/web-components - Versions diffs - 2.52.0 → 2.53.0 - Mend

@carbon/web-components 2.52.0 → 2.53.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 (1760) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.scss.js","names":[],"sources":["../../../src/components/tabs/tabs.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, 2026\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n@use '@carbon/styles/scss/config' as ;\n@use '@carbon/styles/scss/theme' as ;\n@use '@carbon/styles/scss/utilities' as ;\n@use '@carbon/styles/scss/breakpoint' as ;\n@use '@carbon/styles/scss/spacing' as ;\n@use '@carbon/styles/scss/motion' as ;\n@use '@carbon/styles/scss/type' as ;\n@use '@carbon/styles/scss/components/button/index' as ;\n@use '@carbon/styles/scss/components/tabs/index';\n@use '@carbon/styles/scss/components/tabs/vars' as ;\n@use '@carbon/styles/scss/utilities/button-reset';\n@use '@carbon/styles/scss/layout' as ;\n@use '@carbon/styles/scss/utilities/layout';\n@use '@carbon/styles/scss/utilities/convert';\n@use '@carbon/styles/scss/utilities/skeleton' as ;\n\n$inset-transition: inset 110ms motion(standard, productive);\n\n:host(#{$prefix}-tabs),\n:host(#{$prefix}-tabs-skeleton) {\n @extend .#{$prefix}--tabs;\n @include emit-layout-tokens();\n .#{$prefix}--tabs-nav-content-container {\n position: relative;\n overflow: scroll;\n flex: 1 1 0%;\n // for some reason, overflow: hidden shrinks the content\n block-size: $spacing-08;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n / Set to zero-specificity so it can be overridden by dynamic stylesheet /\n :where(.#{$prefix}--tabs-nav-content) {\n position: absolute;\n block-size: 100%;\n inset-inline-start: 0;\n transition: $inset-transition;\n }\n\n .#{$prefix}--tabs-nav {\n position: absolute;\n display: block;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n z-index: 1;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n background-color: var(--tabs-overflow-button-background, $background);\n }\n}\n\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}-tab),\n:host(#{$prefix}-tab-skeleton) {\n display: flex;\n background: transparent;\n inline-size: 100%;\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 overflow: hidden;\n\n align-items: center;\n padding: $spacing-04 $spacing-05 $spacing-03;\n border-block-end: $tab-underline-color;\n color: $text-secondary;\n inline-size: 100%;\n text-align: start;\n text-decoration: none;\n text-overflow: ellipsis;\n transition:\n border $duration-fast-01 motion(standard, productive),\n outline $duration-fast-01 motion(standard, productive);\n white-space: nowrap;\n\n &:focus,\n &:active {\n @include focus-outline('outline');\n }\n }\n\n outline: none;\n}\n\n:host(#{$prefix}-tab:not([type='contained'])) {\n margin-inline-end: convert.to-rem(1px);\n\n .#{$prefix}--tabs__nav-link {\n padding-block-end: calc(#{$spacing-03} + #{convert.to-rem(1px)});\n padding-block-start: calc(#{$spacing-04} - #{convert.to-rem(1px)});\n }\n}\n\n:host(#{$prefix}-tab:not([type='contained']):last-of-type) {\n margin-inline-end: 0;\n}\n\n:host(#{$prefix}-tab[selected]) {\n .#{$prefix}--tabs__nav-link {\n @include type-style('heading-compact-01');\n\n border-block-end: $spacing-01 solid $border-interactive;\n\n &,\n // Need to override Carbon core's non-selected focus color\n &:focus,\n &:active {\n color: $text-primary;\n }\n }\n\n display: flex;\n background-color: transparent;\n transition: color $duration-fast-01 motion(standard, productive);\n\n &:hover {\n background-color: transparent;\n }\n}\n\n:host(#{$prefix}-tab:hover) {\n background-color: transparent;\n box-shadow: 0 -1px 0 $background-hover;\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}-tabs[type='contained'])\n .#{$prefix}--tabs-nav-content-container {\n block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n background-color: $layer-accent-01;\n\n a.#{$prefix}--tabs__nav-link {\n padding: $spacing-03 $spacing-05;\n block-size: $spacing-09;\n // height - vertical padding\n line-height: calc(#{$spacing-09} - (#{$spacing-03} 2));\n }\n}\n\n:host(#{$prefix}-tab[type='contained']),\n:host(#{$prefix}-tab[type='contained']:hover) {\n a.#{$prefix}--tabs__nav-link {\n border-block-end: none;\n // Draws the border without affecting the inner-content\n box-shadow: rem(-1px) 0 0 0 $border-strong;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][hide-divider])\n a.#{$prefix}--tabs__nav-link {\n box-shadow: rem(-1px) 0 0 0 transparent;\n}\n\n// `[role]` is only for specificity.\n// We have `:not()` usage in the corresponding Carbon core style\n// which puts specificity of \"specific\" scenario though the style is for \"regular\" scenario\n:host(#{$prefix}-tab[disabled][role]),\n:host(#{$prefix}-tab[disabled][role]:hover) {\n background-color: transparent;\n box-shadow: none;\n cursor: not-allowed;\n outline: none;\n\n .#{$prefix}--tabs__nav-link {\n border-block-end: $tab-underline-color;\n color: $tab-text-disabled;\n outline: none;\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled][role])\n .#{$prefix}--tabs__nav-link {\n background-color: $button-disabled;\n border-block-end: none;\n color: $text-on-color-disabled;\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]),\n:host(#{$prefix}-tab[type='contained'][selected]:hover) {\n background-color: $layer-01;\n\n .#{$prefix}--tabs__nav-link {\n border-block-end: none;\n // Draws the border without affecting the inner-content\n box-shadow: inset 0 $spacing-01 0 0 $interactive;\n // height - vertical padding\n line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));\n }\n\n .#{$prefix}--tabs__nav-link:focus,\n .#{$prefix}--tabs__nav-link:active {\n box-shadow: none;\n }\n}\n\n:host(#{$prefix}-tab[type='contained']:hover) {\n background-color: $layer-accent-hover;\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"],"mappings":""}
1	+ {"version":3,"file":"tabs.scss.js","names":[],"sources":["../../../src/components/tabs/tabs.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, 2026\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n@use '@carbon/styles/scss/config' as ;\n@use '@carbon/styles/scss/theme' as ;\n@use '@carbon/styles/scss/utilities' as ;\n@use '@carbon/styles/scss/breakpoint' as ;\n@use '@carbon/styles/scss/spacing' as ;\n@use '@carbon/styles/scss/motion' as ;\n@use '@carbon/styles/scss/type' as ;\n@use '@carbon/styles/scss/components/button/index' as ;\n@use '@carbon/styles/scss/components/tabs/index';\n@use '@carbon/styles/scss/components/tabs/vars' as ;\n@use '@carbon/styles/scss/utilities/button-reset';\n@use '@carbon/styles/scss/layout' as ;\n@use '@carbon/styles/scss/utilities/layout';\n@use '@carbon/styles/scss/utilities/convert';\n@use '@carbon/styles/scss/utilities/skeleton' as ;\n\n$inset-transition: inset 110ms motion(standard, productive);\n\n:host(#{$prefix}-tabs),\n:host(#{$prefix}-tabs-skeleton) {\n @extend .#{$prefix}--tabs;\n @include emit-layout-tokens();\n .#{$prefix}--tabs-nav-content-container {\n position: relative;\n overflow: scroll;\n flex: 1 1 0%;\n // for some reason, overflow: hidden shrinks the content\n block-size: $spacing-08;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n / Set to zero-specificity so it can be overridden by dynamic stylesheet /\n :where(.#{$prefix}--tabs-nav-content) {\n position: absolute;\n block-size: 100%;\n inset-inline-start: 0;\n transition: $inset-transition;\n }\n\n .#{$prefix}--tabs-nav {\n position: absolute;\n display: block;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n z-index: 1;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n background-color: var(--tabs-overflow-button-background, $background);\n }\n}\n\n:host(#{$prefix}-tabs) {\n @include focus-outline('reset');\n\n .#{$prefix}--tabs-trigger svg {\n block-size: auto;\n inline-size: auto;\n }\n}\n\n:host(#{$prefix}-tabs:focus) {\n .#{$prefix}--tabs-trigger {\n @include focus-outline('outline');\n }\n}\n\n:host(#{$prefix}-tabs[icon-size='default'])\n .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default)\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n block-size: $spacing-08;\n}\n\n:host(#{$prefix}-tabs[icon-size='lg']) .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg)\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tabs[icon-size='default']),\n:host(#{$prefix}-tabs[icon-size='lg']),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg) {\n overflow: visible;\n\n .#{$prefix}--tab--list {\n overflow: visible;\n }\n}\n\n:host(#{$prefix}-tab),\n:host(#{$prefix}-tab-skeleton) {\n display: flex;\n background: transparent;\n inline-size: 100%;\n\n .#{$prefix}--tabs__nav-link {\n @include button-reset.reset($width: false);\n @include focus-outline('reset');\n @include type-style('body-compact-01');\n\n position: relative;\n overflow: hidden;\n\n align-items: center;\n padding: $spacing-04 $spacing-05 $spacing-03;\n border-block-end: $tab-underline-color;\n color: $text-secondary;\n inline-size: 100%;\n text-align: start;\n text-decoration: none;\n text-overflow: ellipsis;\n transition:\n border $duration-fast-01 motion(standard, productive),\n outline $duration-fast-01 motion(standard, productive);\n white-space: nowrap;\n\n &:focus,\n &:active {\n @include focus-outline('outline');\n }\n }\n\n outline: none;\n}\n\n:host(#{$prefix}-tab:not([type='contained'])) {\n margin-inline-end: convert.to-rem(1px);\n\n .#{$prefix}--tabs__nav-link {\n padding-block-end: calc(#{$spacing-03} + #{convert.to-rem(1px)});\n padding-block-start: calc(#{$spacing-04} - #{convert.to-rem(1px)});\n }\n}\n\n:host(#{$prefix}-tab:not([type='contained']):last-of-type) {\n margin-inline-end: 0;\n}\n\n:host(#{$prefix}-tab[badge-indicator][icon-only]:not([icon-size='lg']))\n #{$prefix}-badge-indicator,\n:host(\n #{$prefix}-tab[badge-indicator].#{$prefix}--tabs__nav-item--icon-only:not(\n .#{$prefix}--tabs__nav-item--icon-only__20\n )\n )\n #{$prefix}-badge-indicator {\n margin-block-start: $spacing-02;\n margin-inline-end: $spacing-02;\n}\n\n:host(#{$prefix}-tab[icon-only]),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only) {\n flex: 0 0 auto;\n block-size: $spacing-08;\n inline-size: $spacing-08;\n\n .#{$prefix}--tabs__nav-item-label-wrapper {\n display: flex;\n }\n\n #{$prefix}-tooltip {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n --#{$prefix}-tooltip-padding-block: #{convert.to-rem(2px)};\n --#{$prefix}-popover-caret-width: #{convert.to-rem(8px)};\n --#{$prefix}-popover-caret-height: #{convert.to-rem(4px)};\n --#{$prefix}-popover-offset: #{convert.to-rem(8px)};\n }\n\n #{$prefix}-tooltip::part(popover-container) {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n }\n\n .#{$prefix}--tabs__nav-link {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n block-size: 100%;\n inline-size: 100%;\n }\n\n ::slotted(svg) {\n display: block;\n fill: currentColor;\n }\n}\n\n:host(#{$prefix}-tab[icon-only]:not([type='contained'])),\n:host(\n #{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:not([type='contained'])\n ) {\n .#{$prefix}--tabs__nav-item-label-wrapper {\n position: relative;\n inset-block-start: convert.to-rem(1px);\n }\n}\n\n:host(#{$prefix}-tab[icon-only][icon-size='lg']),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only__20) {\n block-size: $spacing-09;\n inline-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[selected]) {\n .#{$prefix}--tabs__nav-link {\n @include type-style('heading-compact-01');\n\n border-block-end: $spacing-01 solid $border-interactive;\n\n &,\n // Need to override Carbon core's non-selected focus color\n &:focus,\n &:active {\n color: $text-primary;\n }\n }\n\n display: flex;\n background-color: transparent;\n transition: color $duration-fast-01 motion(standard, productive);\n\n &:hover {\n background-color: transparent;\n }\n}\n\n:host(#{$prefix}-tab:hover:not([selected])) {\n background-color: transparent;\n box-shadow: 0 -1px 0 $background-hover;\n\n a.#{$prefix}--tabs__nav-link {\n border-block-end: $tab-underline-color-hover;\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-tab[icon-only]:hover),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:hover) {\n box-shadow: none;\n}\n\n:host(#{$prefix}-tabs[type='contained'])\n .#{$prefix}--tabs-nav-content-container {\n block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n background-color: $layer-accent-01;\n\n a.#{$prefix}--tabs__nav-link {\n padding: $spacing-03 $spacing-05;\n block-size: $spacing-09;\n // height - vertical padding\n line-height: calc(#{$spacing-09} - (#{$spacing-03} 2));\n }\n}\n\n:host(#{$prefix}-tab[type='contained']),\n:host(#{$prefix}-tab[type='contained']:hover) {\n a.#{$prefix}--tabs__nav-link {\n border-block-end: none;\n // Draws the border without affecting the inner-content\n box-shadow: rem(-1px) 0 0 0 $border-strong;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][hide-divider])\n a.#{$prefix}--tabs__nav-link {\n box-shadow: rem(-1px) 0 0 0 transparent;\n}\n\n// `[role]` is only for specificity.\n// We have `:not()` usage in the corresponding Carbon core style\n// which puts specificity of \"specific\" scenario though the style is for \"regular\" scenario\n:host(#{$prefix}-tab[disabled][role]),\n:host(#{$prefix}-tab[disabled][role]:hover) {\n background-color: transparent;\n box-shadow: none;\n cursor: not-allowed;\n outline: none;\n\n .#{$prefix}--tabs__nav-link {\n border-block-end: $tab-underline-color;\n color: $tab-text-disabled;\n outline: none;\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled][role])\n .#{$prefix}--tabs__nav-link {\n background-color: $button-disabled;\n border-block-end: none;\n color: $text-on-color-disabled;\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]),\n:host(#{$prefix}-tab[type='contained'][selected]:hover) {\n background-color: $layer-01;\n\n .#{$prefix}--tabs__nav-link {\n border-block-end: none;\n // Draws the border without affecting the inner-content\n box-shadow: inset 0 $spacing-01 0 0 $interactive;\n // height - vertical padding\n line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));\n }\n\n .#{$prefix}--tabs__nav-link:focus,\n .#{$prefix}--tabs__nav-link:active {\n box-shadow: none;\n }\n}\n\n:host(#{$prefix}-tab[type='contained']:hover) {\n background-color: $layer-accent-hover;\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"],"mappings":""}

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

@@ -73,7 +73,7 @@ let TAG_TYPE = /* @__PURE__ */ function(TAG_TYPE) {
 	TAG_TYPE["WARM-GRAY"] = "warm-gray";
 	return TAG_TYPE;
 }({});
 //#endregion
 export { TAG_SIZE, TAG_TYPE };
 //# sourceMappingURL=defs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tag/defs.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2020, 2023\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/\n Tag size.\n /\nexport enum TAG_SIZE {\n /\n Large size.\n /\n LARGE = 'lg',\n\n /\n Medium size (default).\n /\n MEDIUM = 'md',\n\n /\n Small size.\n /\n SMALL = 'sm',\n}\n\nexport enum TAG_TYPE {\n /\n Red color.\n /\n RED = 'red',\n\n /\n Magenta color.\n /\n MAGENTA = 'magenta',\n\n /\n Purple color.\n /\n PURPLE = 'purple',\n\n /\n Blue color.\n /\n BLUE = 'blue',\n\n /\n Cyan color.\n /\n CYAN = 'cyan',\n\n /\n Teal color.\n /\n TEAL = 'teal',\n\n /\n Green color.\n /\n GREEN = 'green',\n\n /\n Gray color.\n /\n GRAY = 'gray',\n\n /\n Cool gray color.\n /\n 'COOL-GRAY' = 'cool-gray',\n\n /\n Warn gray color.\n */\n 'WARM-GRAY' = 'warm-gray',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,~~8CAAL~~;;;;AAIL;;;;AAKA;;;;AAKA~~;;;AAGF~~,IAAY,~~8CAAL~~;;;;AAIL;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAKA"}
1	+ {"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tag/defs.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 2020, 2023\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/\n Tag size.\n /\nexport enum TAG_SIZE {\n /\n Large size.\n /\n LARGE = 'lg',\n\n /\n Medium size (default).\n /\n MEDIUM = 'md',\n\n /\n Small size.\n /\n SMALL = 'sm',\n}\n\nexport enum TAG_TYPE {\n /\n Red color.\n /\n RED = 'red',\n\n /\n Magenta color.\n /\n MAGENTA = 'magenta',\n\n /\n Purple color.\n /\n PURPLE = 'purple',\n\n /\n Blue color.\n /\n BLUE = 'blue',\n\n /\n Cyan color.\n /\n CYAN = 'cyan',\n\n /\n Teal color.\n /\n TEAL = 'teal',\n\n /\n Green color.\n /\n GREEN = 'green',\n\n /\n Gray color.\n /\n GRAY = 'gray',\n\n /\n Cool gray color.\n /\n 'COOL-GRAY' = 'cool-gray',\n\n /\n Warn gray color.\n */\n 'WARM-GRAY' = 'warm-gray',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAUA,IAAY,WAAL,yBAAA,UAAA;;;;AAIL,UAAA,WAAA;;;;AAKA,UAAA,YAAA;;;;AAKA,UAAA,WAAA;;KACD;AAED,IAAY,WAAL,yBAAA,UAAA;;;;AAIL,UAAA,SAAA;;;;AAKA,UAAA,aAAA;;;;AAKA,UAAA,YAAA;;;;AAKA,UAAA,UAAA;;;;AAKA,UAAA,UAAA;;;;AAKA,UAAA,UAAA;;;;AAKA,UAAA,WAAA;;;;AAKA,UAAA,UAAA;;;;AAKA,UAAA,eAAA;;;;AAKA,UAAA,eAAA;;KACD"}

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import HostListener from "../../globals/decorators/host-listener.js";
@@ -19,7 +19,6 @@ import tag_default$1 from "./tag.js";
 import { html } from "lit";
 import { property, query } from "lit/decorators.js";
 import Close16 from "@carbon/icons/es/close/16.js";
 //#region src/components/tag/dismissible-tag.ts
 /**
 * Copyright IBM Corp. 2019, 2025
@@ -63,10 +62,10 @@ let CDSDismissibleTag = class CDSDismissibleTag extends HostListenerMixin(FocusM
 		this.disabled = false;
 		this.dismissTooltipAlignment = "bottom";
 		this.open = true;
-		this.size = TAG_SIZE.MEDIUM;
+		this.size = "md";
 		this.tagTitle = "";
 		this.text = "";
-		this.type = TAG_TYPE.GRAY;
+		this.type = "gray";
 	}
 	/**
 	* Finds the next focusable dismissible tag sibling
@@ -75,7 +74,7 @@ let CDSDismissibleTag = class CDSDismissibleTag extends HostListenerMixin(FocusM
 	_findNextFocusableTag() {
 		let nextElement = this.nextElementSibling;
 		while (nextElement) {
-			if (nextElement.tagName.toLowerCase() === `${prefix}-dismissible-tag` && !nextElement.hasAttribute("disabled") && nextElement.getAttribute("open") !== "false") return nextElement;
+			if (nextElement.tagName.toLowerCase() === `cds-dismissible-tag` && !nextElement.hasAttribute("disabled") && nextElement.getAttribute("open") !== "false") return nextElement;
 			nextElement = nextElement.nextElementSibling;
 		}
 		return null;
@@ -97,11 +96,11 @@ let CDSDismissibleTag = class CDSDismissibleTag extends HostListenerMixin(FocusM
 		const dismissLabel = `Dismiss "${text}"`;
 		const dismissActionLabel = dismissTooltipLabel || (hasEllipsisApplied ? dismissLabel : "Dismiss");
 		return html`
-      ${size !== TAG_SIZE.SMALL ? html`<slot name="icon" @slotchange="${handleIconSlotChange}"></slot>` : ""}
-      <div class="${prefix}--interactive--tag-children">
+      ${size !== "sm" ? html`<slot name="icon" @slotchange="${handleIconSlotChange}"></slot>` : ""}
+      <div class="${"cds"}--interactive--tag-children">
         <span
           title="${tagTitle ? tagTitle : text}"
-          class="${prefix}--tag__label">
+          class="${"cds"}--tag__label">
           ${text}
         </span>
         <slot name="decorator" @slotchange="${handleAILabelSlotChange}"></slot>
@@ -112,7 +111,7 @@ let CDSDismissibleTag = class CDSDismissibleTag extends HostListenerMixin(FocusM
             class="sb-tooltip-trigger"
             role="button"
             aria-labelledby="content"
-            class="${prefix}--tag__close-icon"
+            class="${"cds"}--tag__close-icon"
             ?disabled=${disabled}>
             ${iconLoader(Close16)}
           </button>
@@ -129,26 +128,26 @@ let CDSDismissibleTag = class CDSDismissibleTag extends HostListenerMixin(FocusM
 	* remove in v12
 	*/
 	static get slugItem() {
-		return `${prefix}-slug`;
+		return `cds-slug`;
 	}
 	/**
 	* A selector that will return the AI Label item.
 	*/
 	static get aiLabelItem() {
-		return `${prefix}-ai-label`;
+		return `cds-ai-label`;
 	}
 	/**
 	* The name of the custom event fired before this tag is being closed upon a user gesture.
 	* Cancellation of this event stops the user-initiated action of closing this tag.
 	*/
 	static get eventBeforeClose() {
-		return `${prefix}-dismissible-tag-beingclosed`;
+		return `cds-dismissible-tag-beingclosed`;
 	}
 	/**
 	* The name of the custom event fired after this tag is closed upon a user gesture.
 	*/
 	static get eventClose() {
-		return `${prefix}-dismissible-tag-closed`;
+		return `cds-dismissible-tag-closed`;
 	}
 	static {
 		this.styles = tag_default;
@@ -188,9 +187,9 @@ __decorate([property({
 	reflect: true
 })], CDSDismissibleTag.prototype, "text", void 0);
 __decorate([property({ reflect: true })], CDSDismissibleTag.prototype, "type", void 0);
-CDSDismissibleTag = __decorate([carbonElement(`${prefix}-dismissible-tag`)], CDSDismissibleTag);
+CDSDismissibleTag = __decorate([carbonElement(`cds-dismissible-tag`)], CDSDismissibleTag);
 var dismissible_tag_default = CDSDismissibleTag;
 //#endregion
 export { TAG_SIZE, TAG_TYPE, dismissible_tag_default as default };
 //# sourceMappingURL=dismissible-tag.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dismissible-tag.js","names":["CDSTag","styles","customElement"],"sources":["../../../src/components/tag/dismissible-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 } from 'lit';\nimport { property, query } 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 CDSTag from '../tag/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 Dismissible Tag.\n \n @element cds-dismissible-tag\n \n @fires cds-dismissible-tag-beingclosed - The custom event fired as the element is being closed\n * @fires cds-dismissible-tag-closed - The custom event fired after the element has been closed\n /\n@customElement(`${prefix}-dismissible-tag`)\nclass CDSDismissibleTag extends HostListenerMixin(FocusMixin(CDSTag)) {\n @query('button')\n protected _buttonNode!: HTMLButtonElement;\n\n /\n Finds the next focusable dismissible tag sibling\n * @returns {HTMLElement\|null} The next focusable dismissible tag or null\n /\n protected _findNextFocusableTag() {\n let nextElement = this.nextElementSibling;\n while (nextElement) {\n if (\n nextElement.tagName.toLowerCase() === `${prefix}-dismissible-tag` &&\n !nextElement.hasAttribute('disabled') &&\n (nextElement as HTMLElement).getAttribute('open') !== 'false'\n ) {\n return nextElement;\n }\n nextElement = nextElement.nextElementSibling;\n }\n return null;\n }\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 ? // remove reference of slug in v12\n (elem as HTMLElement).matches(\n (this.constructor as typeof CDSDismissibleTag).aiLabelItem\n ) \|\|\n // remove reference of slug in v12\n (elem as HTMLElement).matches(\n (this.constructor as typeof CDSDismissibleTag).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 `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 nextFocusableTag = this._findNextFocusableTag();\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 CDSDismissibleTag).eventBeforeClose,\n init\n )\n )\n ) {\n this.open = false;\n if (nextFocusableTag) {\n const nextCloseIcon = (nextFocusableTag as CDSDismissibleTag)\n ._buttonNode;\n if (nextCloseIcon) {\n nextCloseIcon.focus();\n }\n }\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSDismissibleTag).eventClose,\n init\n )\n );\n }\n }\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 tooltip alignment for the dismiss button\n /\n @property({\n type: String,\n attribute: 'dismiss-tooltip-alignment',\n reflect: true,\n })\n dismissTooltipAlignment = 'bottom';\n\n /\n Provide a custom tooltip label for the dismiss button\n /\n @property({ type: String, attribute: 'dismiss-tooltip-label', reflect: true })\n dismissTooltipLabel?: string;\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({ type: String, reflect: true })\n size = TAG_SIZE.MEDIUM;\n\n /\n Provide a custom `title` to be inserted in the tag.\n /\n @property({ type: String, attribute: 'tag-title', reflect: true })\n tagTitle = '';\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 render() {\n const {\n disabled,\n _handleAILabelSlotChange: handleAILabelSlotChange,\n _handleIconSlotChange: handleIconSlotChange,\n _hasEllipsisApplied: hasEllipsisApplied,\n size,\n tagTitle,\n text,\n dismissTooltipLabel,\n dismissTooltipAlignment,\n } = this;\n\n const dismissLabel = `Dismiss \"${text}\"`;\n const dismissActionLabel =\n dismissTooltipLabel \|\| (hasEllipsisApplied ? dismissLabel : 'Dismiss');\n\n return html`\n ${size !== TAG_SIZE.SMALL\n ? html`<slot name=\"icon\" @slotchange=\"${handleIconSlotChange}\"></slot>`\n : ''}\n <div class=\"${prefix}--interactive--tag-children\">\n <span\n title=\"${tagTitle ? tagTitle : text}\"\n class=\"${prefix}--tag__label\">\n ${text}\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 <cds-tooltip align=${dismissTooltipAlignment} enter-delay-ms=${0}>\n <button\n class=\"sb-tooltip-trigger\"\n role=\"button\"\n aria-labelledby=\"content\"\n class=\"${prefix}--tag__close-icon\"\n ?disabled=${disabled}>\n ${iconLoader(Close16)}\n </button>\n <cds-tooltip-content id=\"content\">\n ${dismissActionLabel}\n </cds-tooltip-content>\n </cds-tooltip>\n </div>\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}-dismissible-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}-dismissible-tag-closed`;\n }\n\n static styles = styles;\n}\n\nexport default CDSDismissibleTag;\n"],"mappings":"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"}
1	+ {"version":3,"file":"dismissible-tag.js","names":["CDSTag","styles","customElement"],"sources":["../../../src/components/tag/dismissible-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 } from 'lit';\nimport { property, query } 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 CDSTag from '../tag/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 Dismissible Tag.\n \n @element cds-dismissible-tag\n \n @fires cds-dismissible-tag-beingclosed - The custom event fired as the element is being closed\n * @fires cds-dismissible-tag-closed - The custom event fired after the element has been closed\n /\n@customElement(`${prefix}-dismissible-tag`)\nclass CDSDismissibleTag extends HostListenerMixin(FocusMixin(CDSTag)) {\n @query('button')\n protected _buttonNode!: HTMLButtonElement;\n\n /\n Finds the next focusable dismissible tag sibling\n * @returns {HTMLElement\|null} The next focusable dismissible tag or null\n /\n protected _findNextFocusableTag() {\n let nextElement = this.nextElementSibling;\n while (nextElement) {\n if (\n nextElement.tagName.toLowerCase() === `${prefix}-dismissible-tag` &&\n !nextElement.hasAttribute('disabled') &&\n (nextElement as HTMLElement).getAttribute('open') !== 'false'\n ) {\n return nextElement;\n }\n nextElement = nextElement.nextElementSibling;\n }\n return null;\n }\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 ? // remove reference of slug in v12\n (elem as HTMLElement).matches(\n (this.constructor as typeof CDSDismissibleTag).aiLabelItem\n ) \|\|\n // remove reference of slug in v12\n (elem as HTMLElement).matches(\n (this.constructor as typeof CDSDismissibleTag).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 `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 nextFocusableTag = this._findNextFocusableTag();\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 CDSDismissibleTag).eventBeforeClose,\n init\n )\n )\n ) {\n this.open = false;\n if (nextFocusableTag) {\n const nextCloseIcon = (nextFocusableTag as CDSDismissibleTag)\n ._buttonNode;\n if (nextCloseIcon) {\n nextCloseIcon.focus();\n }\n }\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSDismissibleTag).eventClose,\n init\n )\n );\n }\n }\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 tooltip alignment for the dismiss button\n /\n @property({\n type: String,\n attribute: 'dismiss-tooltip-alignment',\n reflect: true,\n })\n dismissTooltipAlignment = 'bottom';\n\n /\n Provide a custom tooltip label for the dismiss button\n /\n @property({ type: String, attribute: 'dismiss-tooltip-label', reflect: true })\n dismissTooltipLabel?: string;\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({ type: String, reflect: true })\n size = TAG_SIZE.MEDIUM;\n\n /\n Provide a custom `title` to be inserted in the tag.\n /\n @property({ type: String, attribute: 'tag-title', reflect: true })\n tagTitle = '';\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 render() {\n const {\n disabled,\n _handleAILabelSlotChange: handleAILabelSlotChange,\n _handleIconSlotChange: handleIconSlotChange,\n _hasEllipsisApplied: hasEllipsisApplied,\n size,\n tagTitle,\n text,\n dismissTooltipLabel,\n dismissTooltipAlignment,\n } = this;\n\n const dismissLabel = `Dismiss \"${text}\"`;\n const dismissActionLabel =\n dismissTooltipLabel \|\| (hasEllipsisApplied ? dismissLabel : 'Dismiss');\n\n return html`\n ${size !== TAG_SIZE.SMALL\n ? html`<slot name=\"icon\" @slotchange=\"${handleIconSlotChange}\"></slot>`\n : ''}\n <div class=\"${prefix}--interactive--tag-children\">\n <span\n title=\"${tagTitle ? tagTitle : text}\"\n class=\"${prefix}--tag__label\">\n ${text}\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 <cds-tooltip align=${dismissTooltipAlignment} enter-delay-ms=${0}>\n <button\n class=\"sb-tooltip-trigger\"\n role=\"button\"\n aria-labelledby=\"content\"\n class=\"${prefix}--tag__close-icon\"\n ?disabled=${disabled}>\n ${iconLoader(Close16)}\n </button>\n <cds-tooltip-content id=\"content\">\n ${dismissActionLabel}\n </cds-tooltip-content>\n </cds-tooltip>\n </div>\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}-dismissible-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}-dismissible-tag-closed`;\n }\n\n static styles = styles;\n}\n\nexport default CDSDismissibleTag;\n"],"mappings":"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"}

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
@@ -17,7 +17,6 @@ import tag_default from "./tag.scss.js";
 import "./tag.js";
 import { LitElement, html } from "lit";
 import { property, state } from "lit/decorators.js";
 //#region src/components/tag/operational-tag.ts
 /**
 * Copyright IBM Corp. 2019, 2025
@@ -59,16 +58,17 @@ let CDSOperationalTag = class CDSOperationalTag extends HostListenerMixin(FocusM
 		};
 		this.disabled = false;
 		this.selected = false;
-		this.size = TAG_SIZE.MEDIUM;
+		this.size = "md";
 		this.text = "";
-		this.type = TAG_TYPE.GRAY;
+		this.type = "gray";
 		this._hasEllipsisApplied = false;
 	}
 	async updated() {
 		await this.updateComplete;
-		const textContainer = this.shadowRoot?.querySelector(`${prefix}-tag`)?.shadowRoot?.querySelector(`.${prefix}--tag__label`);
+		const textContainer = this.shadowRoot?.querySelector(`cds-tag`)?.shadowRoot?.querySelector(`.cds--tag__label`);
 		if (!textContainer) return;
-		this._hasEllipsisApplied = textContainer.scrollWidth > textContainer.clientWidth;
+		const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;
+		this._hasEllipsisApplied = hasEllipsis;
 	}
 	render() {
 		const { disabled, selected, size, text, type, _hasEllipsisApplied: hasEllipsisApplied } = this;
@@ -109,13 +109,13 @@ let CDSOperationalTag = class CDSOperationalTag extends HostListenerMixin(FocusM
 	* The name of the custom event before this tag is selected.
 	*/
 	static get eventBeforeSelected() {
-		return `${prefix}-operational-tag-beingselected`;
+		return `cds-operational-tag-beingselected`;
 	}
 	/**
 	* The name of the custom event fired after this tag is selected.
 	*/
 	static get eventSelected() {
-		return `${prefix}-operational-tag-selected`;
+		return `cds-operational-tag-selected`;
 	}
 	static {
 		this.styles = tag_default;
@@ -141,9 +141,9 @@ __decorate([property({
 })], CDSOperationalTag.prototype, "text", void 0);
 __decorate([property({ reflect: true })], CDSOperationalTag.prototype, "type", void 0);
 __decorate([state()], CDSOperationalTag.prototype, "_hasEllipsisApplied", void 0);
-CDSOperationalTag = __decorate([carbonElement(`${prefix}-operational-tag`)], CDSOperationalTag);
+CDSOperationalTag = __decorate([carbonElement(`cds-operational-tag`)], CDSOperationalTag);
 var operational_tag_default = CDSOperationalTag;
 //#endregion
 export { TAG_SIZE, TAG_TYPE, operational_tag_default as default };
 //# sourceMappingURL=operational-tag.js.map

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,~~8BACM~~,0BAA0B,kBAAkB,WAAW,WAAW,CAAC,CAAC;;;wBAM7C,UAAU;AACnC,OAAI,KAAK,SACP,OAAM,iBAAiB;QAClB;IACL,MAAM,OAAO;KACX,SAAS;KACT,YAAY;KACZ,UAAU;KACV,QAAQ,EACN,aAAa,MAAM,QACpB;KACF;AACD,QACE,KAAK,cACH,IAAI,YACD,KAAK,YAAyC,qBAC/C,KACD,CACF,EACD;AACA,UAAK,WAAW,CAAC,KAAK;AACtB,UAAK,cACH,IAAI,YACD,KAAK,YAAyC,eAC/C,KACD,CACF;;;;uBAaiB,UAAsB;AAC5C,QAAK,cAAc,MAAM;;yBAMD,UAAyB;AACjD,OAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,MAAK,cAAc,MAAM;;kBAQlB;kBAMA~~;cAMJ,SAAS;cAMT;cAMA,SAAS;6BAMM~~;;CAEtB,MAAM,UAAU;AACd,QAAM,KAAK;EAEX,MAAM,gBAAgB,KAAK,YACvB,cAAc,~~GAAG~~,~~OAAO,MAAM,~~EAC9B,YAAY,cAAc,~~IAAI,OAAO,cAAc~~;AACvD,MAAI,CAAC,cAAe;~~AAIpB~~,~~OAAK~~,~~sBAFe~~,cAAc,cAAc,cAAc;;~~CAKhE~~,SAAS;EACP,MAAM,EACJ,UACA,UACA,MACA,MACA,MACA,qBAAqB,uBACnB;AAEJ,SAAO,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;;;;;;;;;;CAWjB,WAAW,sBAAsB;AAC/B,SAAO~~,GAAG,OAAO~~;;;;;~~CAMnB~~,WAAW,gBAAgB;AACzB,SAAO~~,GAAG,OAAO~~;;;~~gBAGHA~~;;;YA7Hf,aAAa,mBAAmB;YAOhC,aAAa,qBAAqB;YAYlC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC;YAMzC,SAAS,EAAE,SAAS,MAAM,CAAC;YAM3B,OAAO;gCA5FTC,cAAc,~~GAAG~~,~~OAAO~~,~~kBAAkB~~;AA2K3C,~~8BAAe~~"}
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,WAAW,CAAC,CAAC;;;wBAM7C,UAAU;AACnC,OAAI,KAAK,SACP,OAAM,iBAAiB;QAClB;IACL,MAAM,OAAO;KACX,SAAS;KACT,YAAY;KACZ,UAAU;KACV,QAAQ,EACN,aAAa,MAAM,QACpB;KACF;AACD,QACE,KAAK,cACH,IAAI,YACD,KAAK,YAAyC,qBAC/C,KACD,CACF,EACD;AACA,UAAK,WAAW,CAAC,KAAK;AACtB,UAAK,cACH,IAAI,YACD,KAAK,YAAyC,eAC/C,KACD,CACF;;;;uBAaiB,UAAsB;AAC5C,QAAK,cAAc,MAAM;;yBAMD,UAAyB;AACjD,OAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,MAAK,cAAc,MAAM;;kBAQlB;kBAMA;;cAYJ;;6BAYe;;CAEtB,MAAM,UAAU;AACd,QAAM,KAAK;EAEX,MAAM,gBAAgB,KAAK,YACvB,cAAc,UAAgB,EAC9B,YAAY,cAAc,mBAAyB;AACvD,MAAI,CAAC,cAAe;EAEpB,MAAM,cAAc,cAAc,cAAc,cAAc;AAE9D,OAAK,sBAAsB;;CAG7B,SAAS;EACP,MAAM,EACJ,UACA,UACA,MACA,MACA,MACA,qBAAqB,uBACnB;AAEJ,SAAO,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;;;;;;;;;;CAWjB,WAAW,sBAAsB;AAC/B,SAAO;;;;;CAMT,WAAW,gBAAgB;AACzB,SAAO;;;gBAGOA;;;YA7Hf,aAAa,mBAAmB,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;YAOhC,aAAa,qBAAqB,CAAA,EAAA,kBAAA,WAAA,kBAAA,KAAA,EAAA;YAYlC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAMzC,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAM3B,OAAO,CAAA,EAAA,kBAAA,WAAA,uBAAA,KAAA,EAAA;gCA5FTC,cAAc,sBAA4B,CAAA,EAAA,kBAAA;AA2K3C,IAAA,0BAAe"}

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

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import FocusMixin from "../../globals/mixins/focus.js";
 import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
@@ -17,7 +17,6 @@ import tag_default from "./tag.scss.js";
 import "./tag.js";
 import { LitElement, html } from "lit";
 import { property, state } from "lit/decorators.js";
 //#region src/components/tag/selectable-tag.ts
 /**
 * Copyright IBM Corp. 2019, 2025
@@ -59,15 +58,16 @@ let CDSSelectableTag = class CDSSelectableTag extends HostListenerMixin(FocusMix
 		};
 		this.disabled = false;
 		this.selected = false;
-		this.size = TAG_SIZE.MEDIUM;
+		this.size = "md";
 		this.text = "";
 		this._hasEllipsisApplied = false;
 	}
 	async updated() {
 		await this.updateComplete;
-		const textContainer = this.shadowRoot?.querySelector(`${prefix}-tag`)?.shadowRoot?.querySelector(`.${prefix}--tag__label`);
+		const textContainer = this.shadowRoot?.querySelector(`cds-tag`)?.shadowRoot?.querySelector(`.cds--tag__label`);
 		if (!textContainer) return;
-		this._hasEllipsisApplied = textContainer.scrollWidth > textContainer.clientWidth;
+		const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;
+		this._hasEllipsisApplied = hasEllipsis;
 	}
 	render() {
 		const { disabled, selected, size, text, _hasEllipsisApplied: hasEllipsisApplied } = this;
@@ -100,13 +100,13 @@ let CDSSelectableTag = class CDSSelectableTag extends HostListenerMixin(FocusMix
 	* The name of the custom event before this tag is selected.
 	*/
 	static get eventBeforeSelected() {
-		return `${prefix}-selectable-tag-beingselected`;
+		return `cds-selectable-tag-beingselected`;
 	}
 	/**
 	* The name of the custom event fired after this tag is selected.
 	*/
 	static get eventSelected() {
-		return `${prefix}-selectable-tag-selected`;
+		return `cds-selectable-tag-selected`;
 	}
 	static {
 		this.styles = tag_default;
@@ -131,9 +131,9 @@ __decorate([property({
 	reflect: true
 })], CDSSelectableTag.prototype, "text", void 0);
 __decorate([state()], CDSSelectableTag.prototype, "_hasEllipsisApplied", void 0);
-CDSSelectableTag = __decorate([carbonElement(`${prefix}-selectable-tag`)], CDSSelectableTag);
+CDSSelectableTag = __decorate([carbonElement(`cds-selectable-tag`)], CDSSelectableTag);
 var selectable_tag_default = CDSSelectableTag;
 //#endregion
 export { TAG_SIZE, TAG_TYPE, selectable_tag_default as default };
 //# sourceMappingURL=selectable-tag.js.map

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,~~6BACM~~,yBAAyB,kBAAkB,WAAW,WAAW,CAAC,CAAC;;;wBAK5C,UAAU;AACnC,OAAI,KAAK,SACP,OAAM,iBAAiB;QAClB;IACL,MAAM,OAAO;KACX,SAAS;KACT,YAAY;KACZ,UAAU;KACV,QAAQ,EACN,aAAa,MAAM,QACpB;KACF;AACD,QACE,KAAK,cACH,IAAI,YACD,KAAK,YAAwC,qBAC9C,KACD,CACF,EACD;AACA,UAAK,WAAW,CAAC,KAAK;AACtB,UAAK,cACH,IAAI,YACD,KAAK,YAAwC,eAC9C,KACD,CACF;;;;uBAaiB,UAAsB;AAC5C,QAAK,cAAc,MAAM;;yBAMD,UAAyB;AACjD,OAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,MAAK,cAAc,MAAM;;kBAQlB;kBAMA;~~cAMJ,SAAS;cAMT;~~6BAMyB;;CAEhC,MAAM,UAAU;AACd,QAAM,KAAK;EAEX,MAAM,gBAAgB,KAAK,YACvB,cAAc,~~GAAG~~,~~OAAO,MAAM,~~EAC9B,YAAY,cAAc,~~IAAI,OAAO,cAAc~~;AACvD,MAAI,CAAC,cAAe;~~AAIpB~~,~~OAAK~~,~~sBAFe~~,cAAc,cAAc,cAAc;;~~CAKhE~~,SAAS;EACP,MAAM,EACJ,UACA,UACA,MACA,MACA,qBAAqB,uBACnB;AAEJ,SAAO,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;;;;;;;;;;CAWjB,WAAW,sBAAsB;AAC/B,SAAO~~,GAAG,OAAO~~;;;;;~~CAMnB~~,WAAW,gBAAgB;AACzB,SAAO~~,GAAG,OAAO~~;;;~~gBAGHA~~;;;YA9Gf,aAAa,mBAAmB;YAOhC,aAAa,qBAAqB;YAYlC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC;YAMzC,OAAO;+BArFTC,cAAc,~~GAAG~~,~~OAAO~~,~~iBAAiB~~;AA2J1C,~~6BAAe~~"}
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,WAAW,CAAC,CAAC;;;wBAK5C,UAAU;AACnC,OAAI,KAAK,SACP,OAAM,iBAAiB;QAClB;IACL,MAAM,OAAO;KACX,SAAS;KACT,YAAY;KACZ,UAAU;KACV,QAAQ,EACN,aAAa,MAAM,QACpB;KACF;AACD,QACE,KAAK,cACH,IAAI,YACD,KAAK,YAAwC,qBAC9C,KACD,CACF,EACD;AACA,UAAK,WAAW,CAAC,KAAK;AACtB,UAAK,cACH,IAAI,YACD,KAAK,YAAwC,eAC9C,KACD,CACF;;;;uBAaiB,UAAsB;AAC5C,QAAK,cAAc,MAAM;;yBAMD,UAAyB;AACjD,OAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,MAAK,cAAc,MAAM;;kBAQlB;kBAMA;;cAYJ;6BAMyB;;CAEhC,MAAM,UAAU;AACd,QAAM,KAAK;EAEX,MAAM,gBAAgB,KAAK,YACvB,cAAc,UAAgB,EAC9B,YAAY,cAAc,mBAAyB;AACvD,MAAI,CAAC,cAAe;EAEpB,MAAM,cAAc,cAAc,cAAc,cAAc;AAE9D,OAAK,sBAAsB;;CAG7B,SAAS;EACP,MAAM,EACJ,UACA,UACA,MACA,MACA,qBAAqB,uBACnB;AAEJ,SAAO,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;;;;;;;;;;CAWjB,WAAW,sBAAsB;AAC/B,SAAO;;;;;CAMT,WAAW,gBAAgB;AACzB,SAAO;;;gBAGOA;;;YA9Gf,aAAa,mBAAmB,CAAA,EAAA,iBAAA,WAAA,gBAAA,KAAA,EAAA;YAOhC,aAAa,qBAAqB,CAAA,EAAA,iBAAA,WAAA,kBAAA,KAAA,EAAA;YAYlC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,YAAA,KAAA,EAAA;YAM1C,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,QAAA,KAAA,EAAA;YAMzC,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,iBAAA,WAAA,QAAA,KAAA,EAAA;YAMzC,OAAO,CAAA,EAAA,iBAAA,WAAA,uBAAA,KAAA,EAAA;+BArFTC,cAAc,qBAA2B,CAAA,EAAA,iBAAA;AA2J1C,IAAA,yBAAe"}

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

@@ -5,15 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
-import { TAG_SIZE } from "./defs.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "./defs.js";
 import tag_default from "./tag.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/components/tag/tag-skeleton.ts
 /**
 * Copyright IBM Corp. 2025
@@ -24,13 +23,13 @@ import { classMap } from "lit/directives/class-map.js";
 let CDSTagSkeleton = class CDSTagSkeleton extends LitElement {
 	constructor(..._args) {
 		super(..._args);
-		this.size = TAG_SIZE.SMALL;
+		this.size = "sm";
 	}
 	render() {
 		return html` <span class="${classMap({
-			[`${prefix}--tag`]: true,
-			[`${prefix}--skeleton`]: true,
-			[`${prefix}--layout--size-${this.size}`]: this.size
+			[`cds--tag`]: true,
+			[`cds--skeleton`]: true,
+			[`cds--layout--size-${this.size}`]: this.size
 		})}"></span> `;
 	}
 	static {
@@ -41,9 +40,9 @@ __decorate([property({
 	reflect: true,
 	type: String
 })], CDSTagSkeleton.prototype, "size", void 0);
-CDSTagSkeleton = __decorate([carbonElement(`${prefix}-tag-skeleton`)], CDSTagSkeleton);
+CDSTagSkeleton = __decorate([carbonElement(`cds-tag-skeleton`)], CDSTagSkeleton);
 var tag_skeleton_default = CDSTagSkeleton;
 //#endregion
 export { tag_skeleton_default as default };
 //# sourceMappingURL=tag-skeleton.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tag-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/tag/tag-skeleton.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport { TAG_SIZE } from './defs';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Skeleton of tag.\n \n @element cds-tag-skeleton\n /\n@customElement(`${prefix}-tag-skeleton`)\nexport default class CDSTagSkeleton extends LitElement {\n /\n Specify the size of the Tag. Currently supports either `sm`,\n * `md` (default) or `lg` sizes.\n */\n @property({ reflect: true, type: String })\n size = TAG_SIZE.SMALL;\n\n render() {\n const tagClasses = classMap({\n [`${prefix}--tag`]: true,\n [`${prefix}--skeleton`]: true,\n [`${prefix}--layout--size-${this.size}`]: this.size,\n });\n return html` <span class=\"${tagClasses}\"></span> `;\n }\n\n static styles = styles;\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;~~AAqBe,~~2BAAM~~,uBAAuB,WAAW~~;;;cAM9C~~,SAAS~~;;CAEhB,SAAS~~;AAMP,SAAO,IAAI,iBALQ,SAAS;IACzB,~~GAAG,OAAO,SAAS~~;IACnB,~~GAAG,OAAO,cAAc~~;IACxB,~~GAAG~~,~~OAAO,iBAAiB,~~KAAK,SAAS,KAAK;GAChD,CAAC,CACqC;;;gBAGzBA;;;YAZf,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC;6BAN3CC,cAAc,~~GAAG~~,~~OAAO~~,~~eAAe~~"}
1	+ {"version":3,"file":"tag-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/tag/tag-skeleton.ts"],"sourcesContent":["/*\n Copyright IBM Corp. 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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport { TAG_SIZE } from './defs';\nimport styles from './tag.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/\n Skeleton of tag.\n \n @element cds-tag-skeleton\n /\n@customElement(`${prefix}-tag-skeleton`)\nexport default class CDSTagSkeleton extends LitElement {\n /\n Specify the size of the Tag. Currently supports either `sm`,\n * `md` (default) or `lg` sizes.\n */\n @property({ reflect: true, type: String })\n size = TAG_SIZE.SMALL;\n\n render() {\n const tagClasses = classMap({\n [`${prefix}--tag`]: true,\n [`${prefix}--skeleton`]: true,\n [`${prefix}--layout--size-${this.size}`]: this.size,\n });\n return html` <span class=\"${tagClasses}\"></span> `;\n }\n\n static styles = styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBe,IAAA,iBAAA,MAAM,uBAAuB,WAAW;;;;;CAQrD,SAAS;AAMP,SAAO,IAAI,iBALQ,SAAS;IACzB,aAAmB;IACnB,kBAAwB;IACxB,qBAA2B,KAAK,SAAS,KAAK;GAChD,CAAC,CACqC;;;gBAGzBA;;;YAZf,SAAS;CAAE,SAAS;CAAM,MAAM;CAAQ,CAAC,CAAA,EAAA,eAAA,WAAA,QAAA,KAAA,EAAA;6BAN3CC,cAAc,mBAAyB,CAAA,EAAA,eAAA"}