npm - @carbon/web-components - Versions diffs - 2.61.0 → 2.62.0-rc.0 - Mend

@carbon/web-components 2.61.0 → 2.62.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 (241) 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/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":""}
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-content {\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/textarea/textarea.scss.js CHANGED Viewed

@@ -7,7 +7,7 @@
 import { css } from "lit";
 //#region src/components/textarea/textarea.scss?lit
-var textarea_default = css([".cds--layer-one,:root{--cds-layer:var(--cds-layer-01,#f4f4f4);--cds-layer-active:var(--cds-layer-active-01,#c6c6c6);--cds-layer-background:var(--cds-layer-background-01,#fff);--cds-layer-hover:var(--cds-layer-hover-01,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01,#a8a8a8);--cds-field:var(--cds-field-01,#f4f4f4);--cds-field-hover:var(--cds-field-hover-01,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01,#c6c6c6);--cds-border-strong:var(--cds-border-strong-01,#8d8d8d);--cds-border-tile:var(--cds-border-tile-01,#c6c6c6)}.cds--layer-two{--cds-layer:var(--cds-layer-02,#fff);--cds-layer-active:var(--cds-layer-active-02,#c6c6c6);--cds-layer-background:var(--cds-layer-background-02,#f4f4f4);--cds-layer-hover:var(--cds-layer-hover-02,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02,#a8a8a8);--cds-field:var(--cds-field-02,#fff);--cds-field-hover:var(--cds-field-hover-02,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01,#c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02,#c6c6c6);--cds-border-strong:var(--cds-border-strong-02,#8d8d8d);--cds-border-tile:var(--cds-border-tile-02,#a8a8a8)}.cds--layer-three{--cds-layer:var(--cds-layer-03,#f4f4f4);--cds-layer-active:var(--cds-layer-active-03,#c6c6c6);--cds-layer-background:var(--cds-layer-background-03,#fff);--cds-layer-hover:var(--cds-layer-hover-03,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03,#a8a8a8);--cds-field:var(--cds-field-03,#f4f4f4);--cds-field-hover:var(--cds-field-hover-03,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03,#c6c6c6);--cds-border-strong:var(--cds-border-strong-03,#8d8d8d);--cds-border-tile:var(--cds-border-tile-03,#c6c6c6)}.cds--layer-one.cds--layer__with-background,.cds--layer-three.cds--layer__with-background,.cds--layer-two.cds--layer__with-background{background-color:var(--cds-layer-background)}@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds--fieldset *,.cds--fieldset :after,.cds--fieldset :before{box-sizing:inherit}.cds--form-item{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds--label strong{font-weight:600}.cds--label{font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);display:inline-block;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;margin-block-end:.5rem;vertical-align:baseline}.cds--label,.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label .cds--toggletip-label{font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333)}.cds--label--no-margin{margin-block-end:0}.cds--label+.cds--tooltip{position:relative;inset-block-start:.2rem;inset-inline-start:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;cursor:pointer;text-align:start;inline-size:100%;box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger :after,.cds--label+.cds--tooltip .cds--tooltip__trigger :before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger{display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{inset-block-start:.2rem;inset-inline-start:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:none}.cds--label.cds--skeleton:before{position:absolute;animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--label.cds--skeleton{background:CanvasText}.cds--label.cds--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds--label.cds--skeleton{block-size:.875rem;inline-size:4.6875rem}input[type=number],input[type=text].cds--number{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,.cds--combo-box--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--number[data-invalid] input[type=text]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,.cds--combo-box--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--number[data-invalid] input[type=text]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper--warn~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker--warning~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;font-weight:400;max-block-size:12.5rem}.cds--select--inline.cds--select--warning .cds--select-input--inline__wrapper~.cds--form-requirement,.cds--select-input--inline__wrapper[data-invalid]~.cds--form-requirement{display:inline-flex;overflow:visible;margin:0;inline-size:100%;margin-block-end:0;max-block-size:100%;padding-inline-start:.5rem}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input--inline__wrapper[data-invalid]~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:none}.cds--form--fluid .cds--form-requirement{padding:.5rem 2.5rem .5rem 1rem;margin:0}input:not(output,[data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds--form-requirement strong{font-weight:600}.cds--form-requirement{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);display:none;overflow:hidden;margin:.25rem 0 0;max-block-size:0;overflow-wrap:break-word;word-break:break-word}.cds--select--inline .cds--form__helper-text{margin-block-start:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;color:var(--cds-text-helper,#6f6f6f);inline-size:100%;margin-block-start:.25rem;opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled,fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--text-area{box-sizing:border-box;padding:0;border:0;margin:0;font-size:100%;vertical-align:baseline}.cds--text-area *,.cds--text-area :after,.cds--text-area :before{box-sizing:inherit}.cds--text-area{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px);outline:2px solid transparent;outline-offset:-2px;padding:.6875rem var(--cds-layout-density-padding-inline-local);border:none;background-color:var(--cds-field);block-size:100%;border-block-end:1px solid var(--cds-border-strong);color:var(--cds-text-primary,#161616);font-family:inherit;min-block-size:2.5rem;min-inline-size:10rem;resize:vertical;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--text-area:active,.cds--text-area:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--text-area:active,.cds--text-area:focus{outline-style:dotted}}.cds--text-area::-moz-placeholder{color:var(--cds-text-placeholder,rgba(22,22,22,.4));opacity:1;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px)}.cds--text-area::placeholder{color:var(--cds-text-placeholder,rgba(22,22,22,.4));opacity:1;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px)}.cds--text-area--light{background-color:var(--cds-field-02,#fff)}.cds--text-area__wrapper{--cds-layout-density-padding-inline-local:clamp(var(--cds-layout-density-padding-inline-min),var(--cds-layout-density-padding-inline,var(--cds-layout-density-padding-inline-normal)),var(--cds-layout-density-padding-inline-max));position:relative;display:flex;inline-size:100%;max-inline-size:100%}.cds--text-area__wrapper--cols{inline-size:auto}.cds--text-area__invalid-icon{position:absolute;fill:var(--cds-support-error,#da1e28);inset-block-start:.75rem;inset-inline-end:var(--cds-layout-density-padding-inline-local)}.cds--text-area__invalid-icon--warning{fill:var(--cds-support-warning,#f1c21b)}.cds--text-area__invalid-icon--warning path[fill]{fill:#000;opacity:1}.cds--text-area__counter-alert{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px}.cds--form-item:has(.cds--text-area__wrapper--cols){inline-size:-moz-fit-content;inline-size:fit-content}.cds--text-area:disabled{background-color:var(--cds-field);border-block-end:1px solid transparent;color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;outline:none;resize:none}.cds--text-area:disabled::-moz-placeholder{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--text-area:disabled::placeholder{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--text-area__wrapper--readonly .cds--text-area{background:transparent;border-block-end-color:var(--cds-border-subtle)}.cds--text-area__wrapper--decorator .cds--text-area__inner-wrapper--decorator>*,.cds--text-area__wrapper--slug .cds--ai-label,.cds--text-area__wrapper--slug .cds--slug{position:absolute;inset-block-start:.75rem;inset-inline-end:1rem}.cds--text-area__wrapper--decorator .cds--ai-label.cds--ai-label--revert,.cds--text-area__wrapper--slug .cds--ai-label.cds--ai-label--revert,.cds--text-area__wrapper--slug .cds--slug.cds--slug--revert{inset-block-start:.25rem;inset-inline-end:.5rem;transform:translate(0)}.cds--text-area__wrapper--decorator .cds--text-area:has(~.cds--text-area__inner-wrapper--decorator .cds--ai-label):not(:has(~.cds--text-area__inner-wrapper--decorator .cds--ai-label--revert)),.cds--text-area__wrapper--slug .cds--text-area:has(~.cds--ai-label):not(:has(~.cds--ai-label--revert)),.cds--text-area__wrapper--slug .cds--text-area:has(~.cds--slug):not(:has(~.cds--slug--revert)){background-image:linear-gradient(0deg,var(--cds-ai-aura-start-sm,rgba(69,137,255,.16)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%,transparent 100%);border-block-end-color:var(--cds-ai-border-strong,#4589ff)}.cds--text-area__wrapper--decorator .cds--text-area:has(~.cds--text-area__inner-wrapper--decorator>*),.cds--text-area__wrapper--slug .cds--text-area:has(~.cds--ai-label),.cds--text-area__wrapper--slug .cds--text-area:has(~.cds--slug){padding-inline-end:2.5rem}.cds--text-area--invalid:has(~.cds--ai-label),.cds--text-area--invalid:has(~.cds--slug),.cds--text-area--invalid:has(~.cds--text-area__inner-wrapper--decorator>*),.cds--text-area--warn:has(~.cds--ai-label),.cds--text-area--warn:has(~.cds--slug),.cds--text-area--warn:has(~.cds--text-area__inner-wrapper--decorator>*){padding-inline-end:4rem}.cds--text-area--invalid~.cds--ai-label,.cds--text-area--invalid~.cds--slug,.cds--text-area--invalid~.cds--text-area__inner-wrapper--decorator>*,.cds--text-area--warn~.cds--ai-label,.cds--text-area--warn~.cds--slug,.cds--text-area--warn~.cds--text-area__inner-wrapper--decorator>*{inset-inline-end:2.5rem}.cds--text-area--invalid~.cds--ai-label.cds--ai-label--revert,.cds--text-area--invalid~.cds--slug.cds--slug--revert,.cds--text-area--invalid~.cds--text-area__inner-wrapper--decorator>.cds--ai-label.cds--ai-label--revert,.cds--text-area--warn~.cds--ai-label.cds--ai-label--revert,.cds--text-area--warn~.cds--slug.cds--slug--revert,.cds--text-area--warn~.cds--text-area__inner-wrapper--decorator>.cds--ai-label.cds--ai-label--revert{inset-inline-end:2rem}.cds--text-area.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none}.cds--text-area.cds--skeleton:active,.cds--text-area.cds--skeleton:focus,.cds--text-area.cds--skeleton:hover{border:none;cursor:default;outline:none}.cds--text-area.cds--skeleton:before{position:absolute;animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--text-area.cds--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--text-area.cds--skeleton{background:CanvasText}.cds--text-area.cds--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds--text-area.cds--skeleton{block-size:6.25rem;inline-size:100%}.cds--text-area.cds--skeleton::-moz-placeholder{color:transparent}.cds--text-area.cds--skeleton::placeholder{color:transparent}.cds--text-area__label-wrapper{position:relative;display:flex;justify-content:space-between;inline-size:100%}:host(cds-textarea){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;outline:none}:host(cds-textarea) ::slotted(cds-ai-label),:host(cds-textarea) ::slotted(cds-slug){position:absolute;inset-block-start:.75rem;inset-inline-end:1rem}:host(cds-textarea) ::slotted(cds-ai-label[revert-active]),:host(cds-textarea) ::slotted(cds-slug[revert-active]){inset-block-start:.25rem;inset-inline-end:.5rem;transform:translate(0)}:host(cds-textarea) textarea:not([cols]),:host(cds-textarea) textarea[cols=\"0\"],:host(cds-textarea:not([cols])),:host(cds-textarea[cols=\"0\"]){inline-size:100%}:host(cds-textarea[invalid]) .cds--text-area__wrapper--decorator .cds--text-area,:host(cds-textarea[warn]) .cds--text-area__wrapper--decorator .cds--text-area{padding-inline-end:4rem}:host(cds-textarea[invalid]) ::slotted(cds-ai-label),:host(cds-textarea[invalid]) ::slotted(cds-slug),:host(cds-textarea[warn]) ::slotted(cds-ai-label),:host(cds-textarea[warn]) ::slotted(cds-slug){inset-inline-end:2.5rem}:host(cds-textarea[invalid]) ::slotted(cds-ai-label[revert-active]),:host(cds-textarea[invalid]) ::slotted(cds-slug[revert-active]),:host(cds-textarea[warn]) ::slotted(cds-ai-label[revert-active]),:host(cds-textarea[warn]) ::slotted(cds-slug[revert-active]){inset-inline-end:2rem}:host(cds-textarea[ai-label]) .cds--text-area__wrapper--decorator{background-image:linear-gradient(0deg,var(--cds-ai-aura-start-sm,rgba(69,137,255,.16)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%,transparent 100%);border-block-end-color:var(--cds-ai-border-strong,#4589ff)}.cds--text-area__wrapper--cols{display:inline-flex}"]);
+var textarea_default = css([".cds--layer-one,:root{--cds-layer:var(--cds-layer-01,#f4f4f4);--cds-layer-active:var(--cds-layer-active-01,#c6c6c6);--cds-layer-background:var(--cds-layer-background-01,#fff);--cds-layer-hover:var(--cds-layer-hover-01,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01,#a8a8a8);--cds-field:var(--cds-field-01,#f4f4f4);--cds-field-hover:var(--cds-field-hover-01,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01,#c6c6c6);--cds-border-strong:var(--cds-border-strong-01,#8d8d8d);--cds-border-tile:var(--cds-border-tile-01,#c6c6c6)}.cds--layer-two{--cds-layer:var(--cds-layer-02,#fff);--cds-layer-active:var(--cds-layer-active-02,#c6c6c6);--cds-layer-background:var(--cds-layer-background-02,#f4f4f4);--cds-layer-hover:var(--cds-layer-hover-02,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02,#a8a8a8);--cds-field:var(--cds-field-02,#fff);--cds-field-hover:var(--cds-field-hover-02,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01,#c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02,#c6c6c6);--cds-border-strong:var(--cds-border-strong-02,#8d8d8d);--cds-border-tile:var(--cds-border-tile-02,#a8a8a8)}.cds--layer-three{--cds-layer:var(--cds-layer-03,#f4f4f4);--cds-layer-active:var(--cds-layer-active-03,#c6c6c6);--cds-layer-background:var(--cds-layer-background-03,#fff);--cds-layer-hover:var(--cds-layer-hover-03,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03,#a8a8a8);--cds-field:var(--cds-field-03,#f4f4f4);--cds-field-hover:var(--cds-field-hover-03,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03,#c6c6c6);--cds-border-strong:var(--cds-border-strong-03,#8d8d8d);--cds-border-tile:var(--cds-border-tile-03,#c6c6c6)}.cds--layer-one.cds--layer__with-background,.cds--layer-three.cds--layer__with-background,.cds--layer-two.cds--layer__with-background{background-color:var(--cds-layer-background)}@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds--fieldset *,.cds--fieldset :after,.cds--fieldset :before{box-sizing:inherit}.cds--form-item{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds--label strong{font-weight:600}.cds--label{font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);display:inline-block;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;margin-block-end:.5rem;vertical-align:baseline}.cds--label,.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label .cds--toggletip-label{font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333)}.cds--label--no-margin{margin-block-end:0}.cds--label+.cds--tooltip{position:relative;inset-block-start:.2rem;inset-inline-start:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;cursor:pointer;text-align:start;inline-size:100%;box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger :after,.cds--label+.cds--tooltip .cds--tooltip__trigger :before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger{display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{inset-block-start:.2rem;inset-inline-start:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:none}.cds--label.cds--skeleton:before{position:absolute;animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--label.cds--skeleton{background:CanvasText}.cds--label.cds--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds--label.cds--skeleton{block-size:.875rem;inline-size:4.6875rem}input[type=number],input[type=text].cds--number{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,.cds--combo-box--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--number[data-invalid] input[type=text]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,.cds--combo-box--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--number[data-invalid] input[type=text]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper--warn~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker--warning~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;font-weight:400;max-block-size:12.5rem}.cds--select--inline.cds--select--warning .cds--select-input--inline__wrapper~.cds--form-requirement,.cds--select-input--inline__wrapper[data-invalid]~.cds--form-requirement{display:inline-flex;overflow:visible;margin:0;inline-size:100%;margin-block-end:0;max-block-size:100%;padding-inline-start:.5rem}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input--inline__wrapper[data-invalid]~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:none}.cds--form--fluid .cds--form-requirement{padding:.5rem 2.5rem .5rem 1rem;margin:0}input:not(output,[data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds--form-requirement strong{font-weight:600}.cds--form-requirement{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);display:none;overflow:hidden;margin:.25rem 0 0;max-block-size:0;overflow-wrap:break-word;word-break:break-word}.cds--select--inline .cds--form__helper-text{margin-block-start:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;color:var(--cds-text-helper,#6f6f6f);inline-size:100%;margin-block-start:.25rem;opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled,fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--text-area{box-sizing:border-box;padding:0;border:0;margin:0;font-size:100%;vertical-align:baseline}.cds--text-area *,.cds--text-area :after,.cds--text-area :before{box-sizing:inherit}.cds--text-area{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px);outline:2px solid transparent;outline-offset:-2px;padding:.6875rem var(--cds-layout-density-padding-inline-local);border:none;background-color:var(--cds-field);block-size:100%;border-block-end:1px solid var(--cds-border-strong);color:var(--cds-text-primary,#161616);font-family:inherit;min-block-size:2.5rem;min-inline-size:10rem;resize:vertical;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--text-area:active,.cds--text-area:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--text-area:active,.cds--text-area:focus{outline-style:dotted}}.cds--text-area::-moz-placeholder{color:var(--cds-text-placeholder,rgba(22,22,22,.4));opacity:1;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px)}.cds--text-area::placeholder{color:var(--cds-text-placeholder,rgba(22,22,22,.4));opacity:1;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px)}.cds--text-area--light{background-color:var(--cds-field-02,#fff)}.cds--text-area__wrapper{--cds-layout-density-padding-inline-local:clamp(var(--cds-layout-density-padding-inline-min),var(--cds-layout-density-padding-inline,var(--cds-layout-density-padding-inline-normal)),var(--cds-layout-density-padding-inline-max));position:relative;display:flex;inline-size:100%;max-inline-size:100%}.cds--text-area__wrapper--cols{inline-size:auto}.cds--text-area__invalid-icon{position:absolute;fill:var(--cds-support-error,#da1e28);inset-block-start:.75rem;inset-inline-end:var(--cds-layout-density-padding-inline-local)}.cds--text-area__invalid-icon--warning{fill:var(--cds-support-warning,#f1c21b)}.cds--text-area__invalid-icon--warning path[fill]{fill:#000;opacity:1}.cds--text-area__counter-alert{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px}.cds--form-item:has(.cds--text-area__wrapper--cols){inline-size:-moz-fit-content;inline-size:fit-content}.cds--text-area:disabled{background-color:var(--cds-field);border-block-end:1px solid transparent;color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;outline:none;resize:none}.cds--text-area:disabled::-moz-placeholder{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--text-area:disabled::placeholder{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--text-area__wrapper--readonly .cds--text-area{background:transparent;border-block-end-color:var(--cds-border-subtle)}.cds--text-area__wrapper--decorator .cds--text-area__inner-wrapper--decorator>*,.cds--text-area__wrapper--slug .cds--ai-label,.cds--text-area__wrapper--slug .cds--slug{position:absolute;inset-block-start:.75rem;inset-inline-end:1rem}.cds--text-area__wrapper--decorator .cds--ai-label.cds--ai-label--revert,.cds--text-area__wrapper--slug .cds--ai-label.cds--ai-label--revert,.cds--text-area__wrapper--slug .cds--slug.cds--slug--revert{inset-block-start:.25rem;inset-inline-end:.5rem;transform:translate(0)}.cds--text-area__wrapper--decorator .cds--text-area:has(~.cds--text-area__inner-wrapper--decorator .cds--ai-label):not(:has(~.cds--text-area__inner-wrapper--decorator .cds--ai-label--revert)),.cds--text-area__wrapper--slug .cds--text-area:has(~.cds--ai-label):not(:has(~.cds--ai-label--revert)),.cds--text-area__wrapper--slug .cds--text-area:has(~.cds--slug):not(:has(~.cds--slug--revert)){background-image:linear-gradient(0deg,var(--cds-ai-aura-start-sm,rgba(69,137,255,.16)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%,transparent 100%);border-block-end-color:var(--cds-ai-border-strong,#4589ff)}.cds--text-area__wrapper--decorator .cds--text-area:has(~.cds--text-area__inner-wrapper--decorator>*),.cds--text-area__wrapper--slug .cds--text-area:has(~.cds--ai-label),.cds--text-area__wrapper--slug .cds--text-area:has(~.cds--slug){padding-inline-end:2.5rem}.cds--text-area--invalid:has(~.cds--ai-label),.cds--text-area--invalid:has(~.cds--slug),.cds--text-area--invalid:has(~.cds--text-area__inner-wrapper--decorator>*),.cds--text-area--warn:has(~.cds--ai-label),.cds--text-area--warn:has(~.cds--slug),.cds--text-area--warn:has(~.cds--text-area__inner-wrapper--decorator>*){padding-inline-end:4rem}.cds--text-area--invalid~.cds--ai-label,.cds--text-area--invalid~.cds--slug,.cds--text-area--invalid~.cds--text-area__inner-wrapper--decorator>*,.cds--text-area--warn~.cds--ai-label,.cds--text-area--warn~.cds--slug,.cds--text-area--warn~.cds--text-area__inner-wrapper--decorator>*{inset-inline-end:2.5rem}.cds--text-area--invalid~.cds--ai-label.cds--ai-label--revert,.cds--text-area--invalid~.cds--slug.cds--slug--revert,.cds--text-area--invalid~.cds--text-area__inner-wrapper--decorator>.cds--ai-label.cds--ai-label--revert,.cds--text-area--warn~.cds--ai-label.cds--ai-label--revert,.cds--text-area--warn~.cds--slug.cds--slug--revert,.cds--text-area--warn~.cds--text-area__inner-wrapper--decorator>.cds--ai-label.cds--ai-label--revert{inset-inline-end:2rem}.cds--text-area.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none}.cds--text-area.cds--skeleton:active,.cds--text-area.cds--skeleton:focus,.cds--text-area.cds--skeleton:hover{border:none;cursor:default;outline:none}.cds--text-area.cds--skeleton:before{position:absolute;animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--text-area.cds--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--text-area.cds--skeleton{background:CanvasText}.cds--text-area.cds--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds--text-area.cds--skeleton{block-size:6.25rem;inline-size:100%}.cds--text-area.cds--skeleton::-moz-placeholder{color:transparent}.cds--text-area.cds--skeleton::placeholder{color:transparent}.cds--text-area__label-wrapper{position:relative;display:flex;justify-content:space-between;inline-size:100%}:host(cds-textarea){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;display:flex;flex-direction:column;outline:none}:host(cds-textarea) ::slotted(cds-ai-label),:host(cds-textarea) ::slotted(cds-slug){position:absolute;inset-block-start:.75rem;inset-inline-end:1rem}:host(cds-textarea) ::slotted(cds-ai-label[revert-active]),:host(cds-textarea) ::slotted(cds-slug[revert-active]){inset-block-start:.25rem;inset-inline-end:.5rem;transform:translate(0)}:host(cds-textarea) textarea:not([cols]),:host(cds-textarea) textarea[cols=\"0\"],:host(cds-textarea:not([cols])),:host(cds-textarea[cols=\"0\"]){inline-size:100%}:host(cds-textarea[invalid]) .cds--text-area__wrapper--decorator .cds--text-area,:host(cds-textarea[warn]) .cds--text-area__wrapper--decorator .cds--text-area{padding-inline-end:4rem}:host(cds-textarea[invalid]) ::slotted(cds-ai-label),:host(cds-textarea[invalid]) ::slotted(cds-slug),:host(cds-textarea[warn]) ::slotted(cds-ai-label),:host(cds-textarea[warn]) ::slotted(cds-slug){inset-inline-end:2.5rem}:host(cds-textarea[invalid]) ::slotted(cds-ai-label[revert-active]),:host(cds-textarea[invalid]) ::slotted(cds-slug[revert-active]),:host(cds-textarea[warn]) ::slotted(cds-ai-label[revert-active]),:host(cds-textarea[warn]) ::slotted(cds-slug[revert-active]){inset-inline-end:2rem}:host(cds-textarea[ai-label]) .cds--text-area__wrapper--decorator{background-image:linear-gradient(0deg,var(--cds-ai-aura-start-sm,rgba(69,137,255,.16)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%,transparent 100%);border-block-end-color:var(--cds-ai-border-strong,#4589ff)}.cds--text-area__wrapper{flex:1 1 auto}.cds--text-area__wrapper--cols{display:inline-flex}"]);
 //#endregion
 export { textarea_default as default };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.scss.js","names":[],"sources":["../../../src/components/textarea/textarea.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, 2025\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$css--plex: true !default;\n@use '@carbon/styles/scss/config' as ;\n@use '@carbon/styles/scss/utilities/layout' as ;\n@use '@carbon/styles/scss/spacing' as ;\n@use '@carbon/styles/scss/components/text-area/index';\n@use '@carbon/styles/scss/utilities/ai-gradient' as ;\n\n:host(#{$prefix}-textarea) {\n @include emit-layout-tokens();\n\n outline: none;\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n position: absolute;\n inset-block-start: $spacing-04;\n inset-inline-end: $spacing-05;\n }\n\n ::slotted(#{$prefix}-ai-label[revert-active]),\n ::slotted(#{$prefix}-slug[revert-active]) {\n inset-block-start: $spacing-02;\n inset-inline-end: $spacing-03;\n transform: translate(0);\n }\n}\n\n:host(#{$prefix}-textarea[cols='0']),\n:host(#{$prefix}-textarea:not([cols])),\n:host(#{$prefix}-textarea) textarea[cols='0'],\n:host(#{$prefix}-textarea) textarea:not([cols]) {\n inline-size: 100%;\n}\n\n:host(#{$prefix}-textarea[warn]),\n:host(#{$prefix}-textarea[invalid]) {\n .#{$prefix}--text-area__wrapper--decorator {\n .#{$prefix}--text-area {\n padding-inline-end: $spacing-10;\n }\n }\n\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n inset-inline-end: $spacing-08;\n }\n\n ::slotted(#{$prefix}-ai-label[revert-active]),\n ::slotted(#{$prefix}-slug[revert-active]) {\n inset-inline-end: $spacing-07;\n }\n}\n:host(#{$prefix}-textarea[ai-label])\n .#{$prefix}--text-area__wrapper--decorator {\n @include ai-gradient;\n}\n\n.#{$prefix}--text-area__wrapper--cols {\n display: inline-flex;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"textarea.scss.js","names":[],"sources":["../../../src/components/textarea/textarea.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, 2025\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$css--plex: true !default;\n@use '@carbon/styles/scss/config' as ;\n@use '@carbon/styles/scss/utilities/layout' as ;\n@use '@carbon/styles/scss/spacing' as ;\n@use '@carbon/styles/scss/components/text-area/index';\n@use '@carbon/styles/scss/utilities/ai-gradient' as ;\n\n:host(#{$prefix}-textarea) {\n @include emit-layout-tokens();\n\n display: flex;\n flex-direction: column;\n outline: none;\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n position: absolute;\n inset-block-start: $spacing-04;\n inset-inline-end: $spacing-05;\n }\n\n ::slotted(#{$prefix}-ai-label[revert-active]),\n ::slotted(#{$prefix}-slug[revert-active]) {\n inset-block-start: $spacing-02;\n inset-inline-end: $spacing-03;\n transform: translate(0);\n }\n}\n\n:host(#{$prefix}-textarea[cols='0']),\n:host(#{$prefix}-textarea:not([cols])),\n:host(#{$prefix}-textarea) textarea[cols='0'],\n:host(#{$prefix}-textarea) textarea:not([cols]) {\n inline-size: 100%;\n}\n\n:host(#{$prefix}-textarea[warn]),\n:host(#{$prefix}-textarea[invalid]) {\n .#{$prefix}--text-area__wrapper--decorator {\n .#{$prefix}--text-area {\n padding-inline-end: $spacing-10;\n }\n }\n\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n inset-inline-end: $spacing-08;\n }\n\n ::slotted(#{$prefix}-ai-label[revert-active]),\n ::slotted(#{$prefix}-slug[revert-active]) {\n inset-inline-end: $spacing-07;\n }\n}\n:host(#{$prefix}-textarea[ai-label])\n .#{$prefix}--text-area__wrapper--decorator {\n @include ai-gradient;\n}\n\n.#{$prefix}--text-area__wrapper {\n flex: 1 1 auto;\n}\n\n.#{$prefix}--text-area__wrapper--cols {\n display: inline-flex;\n}\n"],"mappings":""}

package/es/components/truncated-text/index.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2025, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './truncated-text';
+//# sourceMappingURL=index.d.ts.map

package/es/components/truncated-text/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/truncated-text/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,kBAAkB,CAAC"}

package/es/components/truncated-text/index.js ADDED Viewed

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import "./truncated-text.js";

package/es/components/truncated-text/truncated-text.d.ts ADDED Viewed

@@ -0,0 +1,77 @@
+/**
+ * Copyright IBM Corp. 2025, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+import '../tooltip/index';
+export declare const blockClass = "cds--truncated-text";
+declare const elementName = "cds-truncated-text";
+/**
+ * TruncatedText.
+ *
+ * @element cds-truncated-text
+ */
+export declare class CDSTruncatedText extends LitElement {
+    /**
+     * Specify how the tooltip should align with the content.
+     */
+    align: string;
+    /**
+     * Specify whether a auto align functionality should be applied
+     */
+    autoalign: boolean;
+    /**
+     * The label on the collapse button.
+     */
+    collapseLabel: string;
+    /**
+     * The label on expand button.
+     */
+    expandLabel: string;
+    /**
+     * Unique identifier for the element.
+     */
+    id: string;
+    /**
+     * The maximum number of lines to display before truncation.
+     * Defaults to `0` (no truncation applied). Note: the React counterpart
+     * defaults to `2` — consumers migrating from React should set this explicitly.
+     */
+    lines: number;
+    /**
+     * The method to display the full text when truncated. Options are "tooltip" or "expand". if not passed, the text would just be truncated with ellipsis.
+     */
+    type: 'tooltip' | 'expand';
+    /**
+     * The string value to be truncated.
+     */
+    value: string;
+    private _isOverflowing;
+    private _isExpanded;
+    private _maxHeight;
+    private _textElement;
+    private _lineHeight;
+    private _isLayered;
+    private _resizeObserver?;
+    static styles: any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private _updateMaxHeight;
+    private _setupResizeObserver;
+    private _updateOverflowStatus;
+    private _handleKeydown;
+    private _toggleExpansion;
+    private _renderToggleButton;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: CDSTruncatedText;
+    }
+}
+export default CDSTruncatedText;
+//# sourceMappingURL=truncated-text.d.ts.map

package/es/components/truncated-text/truncated-text.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"truncated-text.d.ts","sourceRoot":"","sources":["../../../src/components/truncated-text/truncated-text.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,kBAAkB,CAAC;AAK1B,eAAO,MAAM,UAAU,wBAAgC,CAAC;AACxD,QAAA,MAAM,WAAW,uBAA+B,CAAC;AAEjD;;;;GAIG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C;;OAEG;IAEH,KAAK,SAAS;IAEd;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,aAAa,SAAM;IAEnB;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,EAAE,SAAM;IAER;;;;OAIG;IAEH,KAAK,SAAK;IAEV;;OAEG;IAEH,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAa;IAEvC;;OAEG;IAEH,KAAK,SAAM;IAEF,OAAO,CAAC,cAAc,CAAkB;IACxC,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,UAAU,CAAkB;IAEZ,OAAO,CAAC,YAAY,CAAe;IACpE,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEzC,MAAM,CAAC,MAAM,MAAU;IAEvB,iBAAiB;IAMjB,oBAAoB;IAKpB,SAAS,CAAC,YAAY;IAQtB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO/C,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,gBAAgB;IAuBxB,OAAO,CAAC,mBAAmB;IAsB3B,MAAM;CA2CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,WAAW,CAAC,EAAE,gBAAgB,CAAC;KACjC;CACF;AAED,eAAe,gBAAgB,CAAC"}

package/es/components/truncated-text/truncated-text.js ADDED Viewed

@@ -0,0 +1,216 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import "../../globals/settings.js";
+import { carbonElement } from "../../globals/decorators/carbon-element.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import "../tooltip/index.js";
+import truncated_text_default$1 from "./truncated-text.scss.js";
+import { LitElement, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+//#region src/components/truncated-text/truncated-text.ts
+/**
+* Copyright IBM Corp. 2025, 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const componentName = "truncated-text";
+const blockClass = `cds--${componentName}`;
+const elementName = `cds-${componentName}`;
+let CDSTruncatedText = class CDSTruncatedText extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.align = "top";
+		this.autoalign = false;
+		this.collapseLabel = "";
+		this.expandLabel = "";
+		this.id = "";
+		this.lines = 0;
+		this.type = "tooltip";
+		this.value = "";
+		this._isOverflowing = false;
+		this._isExpanded = false;
+		this._maxHeight = "none";
+		this._lineHeight = 0;
+		this._isLayered = false;
+	}
+	static {
+		this.styles = truncated_text_default$1;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._isLayered = !!this.closest(`cds-layer`);
+		this.type = this.type || "tooltip";
+	}
+	disconnectedCallback() {
+		this._resizeObserver?.disconnect();
+		super.disconnectedCallback();
+	}
+	firstUpdated() {
+		requestAnimationFrame(() => {
+			const computedStyle = getComputedStyle(this._textElement);
+			this._lineHeight = parseFloat(computedStyle.lineHeight);
+			this._setupResizeObserver();
+		});
+	}
+	updated(changed) {
+		if (changed.has("lines") || changed.has("value")) {
+			this._updateOverflowStatus();
+			this._updateMaxHeight();
+		}
+	}
+	_updateMaxHeight() {
+		if (this.type !== "expand") return;
+		requestAnimationFrame(() => {
+			if (!this._textElement) return;
+			this._maxHeight = this.lines > 0 && !this._isExpanded ? `${this.lines * this._lineHeight}px` : `${this._textElement.scrollHeight}px`;
+		});
+	}
+	_setupResizeObserver() {
+		if (!this._textElement) return;
+		if (this._resizeObserver) this._resizeObserver.disconnect();
+		this._resizeObserver = new ResizeObserver(() => {
+			this._updateOverflowStatus();
+		});
+		this._resizeObserver.observe(this);
+	}
+	_updateOverflowStatus() {
+		if (!this._textElement || this.lines <= 0) return;
+		this._updateMaxHeight();
+		const { scrollHeight, clientHeight } = this._textElement;
+		const isOverflowing = scrollHeight > clientHeight + this._lineHeight / 2;
+		if (isOverflowing !== this._isOverflowing) this._isOverflowing = isOverflowing;
+	}
+	_handleKeydown(evt) {
+		const { key } = evt;
+		if (key === "Enter" || key === " ") this._toggleExpansion();
+	}
+	_toggleExpansion() {
+		this._isExpanded = !this._isExpanded;
+		this._updateMaxHeight();
+		this._textElement?.classList.add(`${blockClass}_transition`);
+		const onTransitionEnd = () => {
+			this._textElement?.querySelector("button")?.focus();
+			this._textElement?.removeEventListener("transitionend", onTransitionEnd);
+		};
+		this._textElement?.addEventListener("transitionend", onTransitionEnd);
+		/**
+		* currently you cannot animate line-clamping
+		* you can however animate max-height
+		* this removes the clamping and then quickly adds it so you can see the ellipsis
+		*/
+		if (this._isExpanded === false) {
+			this._textElement?.classList.add(`${blockClass}_content--closing`);
+			setTimeout(() => {
+				this._textElement?.classList.remove(`${blockClass}_content--closing`);
+			}, 100);
+		}
+	}
+	_renderToggleButton() {
+		const className = classMap({
+			[`${blockClass}_button-collapse`]: this._isExpanded,
+			[`${blockClass}_button-expand`]: !this._isExpanded,
+			[`${blockClass}_button-layered`]: this._isLayered,
+			[`${blockClass}_button-hide`]: !this._isOverflowing && !this._isExpanded
+		});
+		const label = this._isExpanded ? this.collapseLabel : this.expandLabel;
+		return html`
+      <span
+        aria-controls=${this.id}
+        aria-expanded=${this._isExpanded}
+        class=${className}
+        @click=${this._toggleExpansion}
+        @keydown=${this._handleKeydown}
+        role="button"
+        tabindex="0">
+        ${label}
+      </span>
+    `;
+	}
+	render() {
+		const contentClasses = classMap({
+			[`${blockClass}_content`]: true,
+			[`${blockClass}_content--expanded`]: this._isExpanded
+		});
+		const contentStyle = {
+			["--line-clamp"]: this._isExpanded ? "none" : this.lines,
+			["max-block-size"]: this.type === "expand" ? this._maxHeight : "none"
+		};
+		const valueBody = html`
+      <div
+        id=${this.id}
+        class=${contentClasses}
+        style=${styleMap(contentStyle)}>
+        ${this.value}
+      </div>
+    `;
+		if (this.type === "expand") return html`${valueBody} ${this._renderToggleButton()}`;
+		return this._isOverflowing ? html`
+          <cds-tooltip
+            align=${this.align}
+            ?autoalign=${this.autoalign}
+            enter-delay-ms="0"
+            leave-delay-ms="0">
+            <button
+              type="button"
+              class="${blockClass}_tooltip-trigger"
+              aria-label=${this.value}>
+              ${valueBody}
+            </button>
+            <cds-tooltip-content>${this.value}</cds-tooltip-content>
+          </cds-tooltip>
+        ` : valueBody;
+	}
+};
+__decorate([property({
+	reflect: true,
+	type: String
+})], CDSTruncatedText.prototype, "align", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSTruncatedText.prototype, "autoalign", void 0);
+__decorate([property({
+	attribute: "collapse-label",
+	type: String,
+	reflect: true
+})], CDSTruncatedText.prototype, "collapseLabel", void 0);
+__decorate([property({
+	attribute: "expand-label",
+	type: String,
+	reflect: true
+})], CDSTruncatedText.prototype, "expandLabel", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSTruncatedText.prototype, "id", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], CDSTruncatedText.prototype, "lines", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], CDSTruncatedText.prototype, "type", void 0);
+__decorate([property({
+	type: String,
+	attribute: "value",
+	reflect: true
+})], CDSTruncatedText.prototype, "value", void 0);
+__decorate([state()], CDSTruncatedText.prototype, "_isOverflowing", void 0);
+__decorate([state()], CDSTruncatedText.prototype, "_isExpanded", void 0);
+__decorate([state()], CDSTruncatedText.prototype, "_maxHeight", void 0);
+__decorate([query(`.${blockClass}_content`)], CDSTruncatedText.prototype, "_textElement", void 0);
+CDSTruncatedText = __decorate([carbonElement(elementName)], CDSTruncatedText);
+var truncated_text_default = CDSTruncatedText;
+//#endregion
+export { CDSTruncatedText, blockClass, truncated_text_default as default };
+//# sourceMappingURL=truncated-text.js.map

package/es/components/truncated-text/truncated-text.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"truncated-text.js","names":["styles","customElement"],"sources":["../../../src/components/truncated-text/truncated-text.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport '../tooltip/index';\n\nimport styles from './truncated-text.scss?lit';\n\nconst componentName = 'truncated-text';\nexport const blockClass = `${prefix}--${componentName}`;\nconst elementName = `${prefix}-${componentName}`; // cds-truncated-text\n\n/**\n * TruncatedText.\n *\n * @element cds-truncated-text\n */\n@customElement(elementName)\nexport class CDSTruncatedText extends LitElement {\n /**\n * Specify how the tooltip should align with the content.\n */\n @property({ reflect: true, type: String })\n align = 'top';\n\n /**\n * Specify whether a auto align functionality should be applied\n */\n @property({ type: Boolean, reflect: true })\n autoalign = false;\n\n /**\n * The label on the collapse button.\n */\n @property({ attribute: 'collapse-label', type: String, reflect: true })\n collapseLabel = '';\n\n /**\n * The label on expand button.\n */\n @property({ attribute: 'expand-label', type: String, reflect: true })\n expandLabel = '';\n\n /**\n * Unique identifier for the element.\n */\n @property({ type: String, reflect: true })\n id = '';\n\n /**\n * The maximum number of lines to display before truncation.\n * Defaults to `0` (no truncation applied). Note: the React counterpart\n * defaults to `2` — consumers migrating from React should set this explicitly.\n */\n @property({ type: Number, reflect: true })\n lines = 0;\n\n /**\n * The method to display the full text when truncated. Options are \"tooltip\" or \"expand\". if not passed, the text would just be truncated with ellipsis.\n */\n @property({ type: String, reflect: true })\n type: 'tooltip' | 'expand' = 'tooltip';\n\n /**\n * The string value to be truncated.\n */\n @property({ type: String, attribute: 'value', reflect: true })\n value = '';\n\n @state() private _isOverflowing: boolean = false;\n @state() private _isExpanded: boolean = false;\n @state() private _maxHeight: string = 'none';\n\n @query(`.${blockClass}_content`) private _textElement!: HTMLElement;\n private _lineHeight: number = 0;\n private _isLayered: boolean = false;\n private _resizeObserver?: ResizeObserver;\n\n static styles = styles;\n\n connectedCallback() {\n super.connectedCallback();\n this._isLayered = !!this.closest(`${prefix}-layer`);\n this.type = this.type || 'tooltip';\n }\n\n disconnectedCallback() {\n this._resizeObserver?.disconnect();\n super.disconnectedCallback();\n }\n\n protected firstUpdated() {\n requestAnimationFrame(() => {\n const computedStyle = getComputedStyle(this._textElement);\n this._lineHeight = parseFloat(computedStyle.lineHeight);\n this._setupResizeObserver();\n });\n }\n\n protected updated(changed: Map<string, unknown>) {\n if (changed.has('lines') || changed.has('value')) {\n this._updateOverflowStatus();\n this._updateMaxHeight();\n }\n }\n\n private _updateMaxHeight() {\n if (this.type !== 'expand') {\n return;\n }\n requestAnimationFrame(() => {\n if (!this._textElement) {\n return;\n }\n this._maxHeight =\n this.lines > 0 && !this._isExpanded\n ? `${this.lines * this._lineHeight}px`\n : `${this._textElement.scrollHeight}px`;\n });\n }\n\n private _setupResizeObserver() {\n if (!this._textElement) {\n return;\n }\n\n if (this._resizeObserver) {\n this._resizeObserver.disconnect();\n }\n\n this._resizeObserver = new ResizeObserver(() => {\n this._updateOverflowStatus();\n });\n\n this._resizeObserver.observe(this);\n }\n\n private _updateOverflowStatus() {\n if (!this._textElement || this.lines <= 0) {\n return;\n }\n this._updateMaxHeight();\n const { scrollHeight, clientHeight } = this._textElement;\n const buffer = this._lineHeight / 2; // buffer of at least half of line height for a stable outcome\n\n const isOverflowing = scrollHeight > clientHeight + buffer;\n\n if (isOverflowing !== this._isOverflowing) {\n this._isOverflowing = isOverflowing;\n }\n }\n\n private _handleKeydown(evt: KeyboardEvent) {\n const { key } = evt;\n if (key === 'Enter' || key === ' ') {\n this._toggleExpansion();\n }\n }\n\n private _toggleExpansion() {\n this._isExpanded = !this._isExpanded;\n this._updateMaxHeight();\n this._textElement?.classList.add(`${blockClass}_transition`);\n const onTransitionEnd = () => {\n this._textElement?.querySelector('button')?.focus();\n this._textElement?.removeEventListener('transitionend', onTransitionEnd);\n };\n this._textElement?.addEventListener('transitionend', onTransitionEnd);\n\n /**\n * currently you cannot animate line-clamping\n * you can however animate max-height\n * this removes the clamping and then quickly adds it so you can see the ellipsis\n */\n if (this._isExpanded === false) {\n this._textElement?.classList.add(`${blockClass}_content--closing`);\n setTimeout(() => {\n this._textElement?.classList.remove(`${blockClass}_content--closing`);\n }, 100);\n }\n }\n\n private _renderToggleButton() {\n const className = classMap({\n [`${blockClass}_button-collapse`]: this._isExpanded,\n [`${blockClass}_button-expand`]: !this._isExpanded,\n [`${blockClass}_button-layered`]: this._isLayered,\n [`${blockClass}_button-hide`]: !this._isOverflowing && !this._isExpanded,\n });\n const label = this._isExpanded ? this.collapseLabel : this.expandLabel;\n return html`\n <span\n aria-controls=${this.id}\n aria-expanded=${this._isExpanded}\n class=${className}\n @click=${this._toggleExpansion}\n @keydown=${this._handleKeydown}\n role=\"button\"\n tabindex=\"0\">\n ${label}\n </span>\n `;\n }\n\n render() {\n const contentClasses = classMap({\n [`${blockClass}_content`]: true,\n [`${blockClass}_content--expanded`]: this._isExpanded,\n });\n\n const contentStyle = {\n ['--line-clamp']: this._isExpanded ? 'none' : this.lines,\n ['max-block-size']: this.type === 'expand' ? this._maxHeight : 'none',\n };\n\n const valueBody = html`\n <div\n id=${this.id}\n class=${contentClasses}\n style=${styleMap(contentStyle)}>\n ${this.value}\n </div>\n `;\n\n if (this.type === 'expand') {\n return html`${valueBody} ${this._renderToggleButton()}`;\n }\n\n // type === 'tooltip'\n return this._isOverflowing\n ? html`\n <cds-tooltip\n align=${this.align}\n ?autoalign=${this.autoalign}\n enter-delay-ms=\"0\"\n leave-delay-ms=\"0\">\n <button\n type=\"button\"\n class=\"${blockClass}_tooltip-trigger\"\n aria-label=${this.value}>\n ${valueBody}\n </button>\n <cds-tooltip-content>${this.value}</cds-tooltip-content>\n </cds-tooltip>\n `\n : valueBody;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [elementName]: CDSTruncatedText;\n }\n}\n\nexport default CDSTruncatedText;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,gBAAgB;AACtB,MAAa,aAAa,QAAc;AACxC,MAAM,cAAc,OAAa;AAQ1B,IAAA,mBAAA,MAAM,yBAAyB,WAAW;;;eAKvC;mBAMI;uBAMI;qBAMF;YAMT;eAQG;cAMqB;eAMrB;wBAEmC;qBACH;oBACF;qBAGR;oBACA;;;gBAGdA;;CAEhB,oBAAoB;EAClB,MAAM,kBAAkB;EACxB,KAAK,aAAa,CAAC,CAAC,KAAK,QAAQ,WAAiB;EAClD,KAAK,OAAO,KAAK,QAAQ;CAC3B;CAEA,uBAAuB;EACrB,KAAK,iBAAiB,WAAW;EACjC,MAAM,qBAAqB;CAC7B;CAEA,eAAyB;EACvB,4BAA4B;GAC1B,MAAM,gBAAgB,iBAAiB,KAAK,YAAY;GACxD,KAAK,cAAc,WAAW,cAAc,UAAU;GACtD,KAAK,qBAAqB;EAC5B,CAAC;CACH;CAEA,QAAkB,SAA+B;EAC/C,IAAI,QAAQ,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,GAAG;GAChD,KAAK,sBAAsB;GAC3B,KAAK,iBAAiB;EACxB;CACF;CAEA,mBAA2B;EACzB,IAAI,KAAK,SAAS,UAChB;EAEF,4BAA4B;GAC1B,IAAI,CAAC,KAAK,cACR;GAEF,KAAK,aACH,KAAK,QAAQ,KAAK,CAAC,KAAK,cACpB,GAAG,KAAK,QAAQ,KAAK,YAAY,MACjC,GAAG,KAAK,aAAa,aAAa;EAC1C,CAAC;CACH;CAEA,uBAA+B;EAC7B,IAAI,CAAC,KAAK,cACR;EAGF,IAAI,KAAK,iBACP,KAAK,gBAAgB,WAAW;EAGlC,KAAK,kBAAkB,IAAI,qBAAqB;GAC9C,KAAK,sBAAsB;EAC7B,CAAC;EAED,KAAK,gBAAgB,QAAQ,IAAI;CACnC;CAEA,wBAAgC;EAC9B,IAAI,CAAC,KAAK,gBAAgB,KAAK,SAAS,GACtC;EAEF,KAAK,iBAAiB;EACtB,MAAM,EAAE,cAAc,iBAAiB,KAAK;EAG5C,MAAM,gBAAgB,eAAe,eAFtB,KAAK,cAAc;EAIlC,IAAI,kBAAkB,KAAK,gBACzB,KAAK,iBAAiB;CAE1B;CAEA,eAAuB,KAAoB;EACzC,MAAM,EAAE,QAAQ;EAChB,IAAI,QAAQ,WAAW,QAAQ,KAC7B,KAAK,iBAAiB;CAE1B;CAEA,mBAA2B;EACzB,KAAK,cAAc,CAAC,KAAK;EACzB,KAAK,iBAAiB;EACtB,KAAK,cAAc,UAAU,IAAI,GAAG,WAAW,YAAY;EAC3D,MAAM,wBAAwB;GAC5B,KAAK,cAAc,cAAc,QAAQ,CAAC,EAAE,MAAM;GAClD,KAAK,cAAc,oBAAoB,iBAAiB,eAAe;EACzE;EACA,KAAK,cAAc,iBAAiB,iBAAiB,eAAe;;;;;;EAOpE,IAAI,KAAK,gBAAgB,OAAO;GAC9B,KAAK,cAAc,UAAU,IAAI,GAAG,WAAW,kBAAkB;GACjE,iBAAiB;IACf,KAAK,cAAc,UAAU,OAAO,GAAG,WAAW,kBAAkB;GACtE,GAAG,GAAG;EACR;CACF;CAEA,sBAA8B;EAC5B,MAAM,YAAY,SAAS;IACxB,GAAG,WAAW,oBAAoB,KAAK;IACvC,GAAG,WAAW,kBAAkB,CAAC,KAAK;IACtC,GAAG,WAAW,mBAAmB,KAAK;IACtC,GAAG,WAAW,gBAAgB,CAAC,KAAK,kBAAkB,CAAC,KAAK;EAC/D,CAAC;EACD,MAAM,QAAQ,KAAK,cAAc,KAAK,gBAAgB,KAAK;EAC3D,OAAO,IAAI;;wBAES,KAAK,GAAG;wBACR,KAAK,YAAY;gBACzB,UAAU;iBACT,KAAK,iBAAiB;mBACpB,KAAK,eAAe;;;UAG7B,MAAM;;;CAGd;CAEA,SAAS;EACP,MAAM,iBAAiB,SAAS;IAC7B,GAAG,WAAW,YAAY;IAC1B,GAAG,WAAW,sBAAsB,KAAK;EAC5C,CAAC;EAED,MAAM,eAAe;IAClB,iBAAiB,KAAK,cAAc,SAAS,KAAK;IAClD,mBAAmB,KAAK,SAAS,WAAW,KAAK,aAAa;EACjE;EAEA,MAAM,YAAY,IAAI;;aAEb,KAAK,GAAG;gBACL,eAAe;gBACf,SAAS,YAAY,EAAE;UAC7B,KAAK,MAAM;;;EAIjB,IAAI,KAAK,SAAS,UAChB,OAAO,IAAI,GAAG,UAAU,GAAG,KAAK,oBAAoB;EAItD,OAAO,KAAK,iBACR,IAAI;;oBAEQ,KAAK,MAAM;yBACN,KAAK,UAAU;;;;;uBAKjB,WAAW;2BACP,KAAK,MAAM;gBACtB,UAAU;;mCAES,KAAK,MAAM;;YAGtC;CACN;AACF;YAjOG,SAAS;CAAE,SAAS;CAAM,MAAM;AAAO,CAAC,CAAA,GAAA,iBAAA,WAAA,SAAA,KAAA,CAAA;YAMxC,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,aAAA,KAAA,CAAA;YAMzC,SAAS;CAAE,WAAW;CAAkB,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,iBAAA,KAAA,CAAA;YAMrE,SAAS;CAAE,WAAW;CAAgB,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,eAAA,KAAA,CAAA;YAMnE,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,MAAA,KAAA,CAAA;YAQxC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,SAAA,KAAA,CAAA;YAMxC,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,QAAA,KAAA,CAAA;YAMxC,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,SAAA,KAAA,CAAA;YAG5D,MAAM,CAAA,GAAA,iBAAA,WAAA,kBAAA,KAAA,CAAA;YACN,MAAM,CAAA,GAAA,iBAAA,WAAA,eAAA,KAAA,CAAA;YACN,MAAM,CAAA,GAAA,iBAAA,WAAA,cAAA,KAAA,CAAA;YAEN,MAAM,IAAI,WAAW,SAAS,CAAA,GAAA,iBAAA,WAAA,gBAAA,KAAA,CAAA;+BAxDhCC,cAAc,WAAW,CAAA,GAAA,gBAAA;AA8O1B,IAAA,yBAAe"}

package/es/components/truncated-text/truncated-text.scss.js ADDED Viewed

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from "lit";
+//#region src/components/truncated-text/truncated-text.scss?lit
+var truncated_text_default = css(["@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;padding:0;border:0;margin:-1px;block-size:1px;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--truncated-text_button-collapse,.cds--truncated-text_button-expand{border:none;cursor:pointer;font:inherit;line-height:inherit}:host(cds-truncated-text){display:block;inline-size:100%}@media (prefers-reduced-motion:no-preference){:host(cds-truncated-text) .cds--truncated-text_transition{transition:max-height .11s cubic-bezier(.2,0,.38,.9)}}:host(cds-truncated-text) .cds--truncated-text_content{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp,0);text-overflow:clip;white-space:normal}:host(cds-truncated-text) .cds--truncated-text_content:focus-visible{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-truncated-text) .cds--truncated-text_content:focus-visible{outline-style:dotted}}:host(cds-truncated-text) .cds--truncated-text_content--closing{-webkit-line-clamp:none}:host(cds-truncated-text) cds-tooltip{display:inline-flex}:host(cds-truncated-text) .cds--truncated-text_tooltip-trigger{display:inline;padding:0;border:0;background:none;color:inherit;cursor:default;font:inherit;text-align:inherit}:host(cds-truncated-text) .cds--truncated-text_tooltip-trigger:focus-visible{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-truncated-text) .cds--truncated-text_tooltip-trigger:focus-visible{outline-style:dotted}}:host(cds-truncated-text) .cds--truncated-text_button-collapse:focus-visible,:host(cds-truncated-text) .cds--truncated-text_button-expand:focus-visible,:host(cds-truncated-text) button:focus-visible{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-truncated-text) .cds--truncated-text_button-collapse:focus-visible,:host(cds-truncated-text) .cds--truncated-text_button-expand:focus-visible,:host(cds-truncated-text) button:focus-visible{outline-style:dotted}}.cds--truncated-text_button-collapse,.cds--truncated-text_button-expand{padding:0 .125rem;color:var(--cds-link-primary,#0f62fe)}.cds--truncated-text_button-collapse.cds--truncated-text_button-hide,.cds--truncated-text_button-expand.cds--truncated-text_button-hide{display:none}.cds--truncated-text_button-expand.cds--truncated-text_button-layered{background-color:var(--cds-layer)}.cds--truncated-text_button-expand:dir(ltr):before{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--cds-background,#fff) 0)}.cds--truncated-text_button-expand.cds--truncated-text_button-layered:dir(ltr):before{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--cds-layer) 0)}.cds--truncated-text_button-expand:dir(rtl):before{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--cds-background,#fff) 0)}.cds--truncated-text_button-expand.cds--truncated-text_button-layered:dir(rtl):before{background:linear-gradient(270deg,hsla(0,0%,100%,0) 0,var(--cds-layer) 0)}.cds--truncated-text_button-collapse{background-color:transparent}"]);
+//#endregion
+export { truncated_text_default as default };
+//# sourceMappingURL=truncated-text.scss.js.map

package/es/components/truncated-text/truncated-text.scss.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"truncated-text.scss.js","names":[],"sources":["../../../src/components/truncated-text/truncated-text.scss?lit"],"sourcesContent":["/*\n* Copyright IBM Corp. 2025, 2026\n*\n* This source code is licensed under the Apache-2.0 license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/theme';\n@use '@carbon/styles/scss/motion' as *;\n\n$block-class: #{$prefix}--truncated-text;\n\n// Common reset button style\n%reset-button {\n border: none;\n cursor: pointer;\n font: inherit;\n line-height: inherit;\n}\n\n// Mixin for directional gradients\n@mixin gradient-bg($direction, $color) {\n background: linear-gradient($direction, rgba(255, 255, 255, 0) 0%, $color 0%);\n}\n\n:host(#{$prefix}-truncated-text) {\n display: block;\n inline-size: 100%;\n\n .#{$block-class}_transition {\n @media (prefers-reduced-motion: no-preference) {\n transition: max-height $duration-fast-02 motion(standard, productive);\n }\n }\n\n .#{$block-class}_content {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--line-clamp, 0);\n text-overflow: clip;\n white-space: normal;\n\n &:focus-visible {\n @include focus-outline('outline');\n }\n }\n\n .#{$block-class}_content--closing {\n -webkit-line-clamp: none;\n }\n\n #{$prefix}-tooltip {\n display: inline-flex;\n }\n\n .#{$block-class}_tooltip-trigger {\n display: inline;\n padding: 0;\n border: 0;\n background: none;\n color: inherit;\n cursor: default;\n font: inherit;\n text-align: inherit;\n\n &:focus-visible {\n @include focus-outline('outline');\n }\n }\n\n button:focus-visible,\n .#{$block-class}_button-expand:focus-visible,\n .#{$block-class}_button-collapse:focus-visible {\n @include focus-outline('outline');\n }\n}\n\n.#{$block-class}_button-expand,\n.#{$block-class}_button-collapse {\n @extend %reset-button;\n\n padding: 0 $spacing-01;\n color: theme.$link-primary;\n\n &.#{$block-class}_button-hide {\n display: none;\n }\n}\n\n.#{$block-class}_button-expand {\n &.#{$block-class}_button-layered {\n background-color: theme.$layer;\n }\n\n // Gradient LTR\n &:dir(ltr)::before {\n @include gradient-bg(90deg, theme.$background);\n }\n\n &.#{$block-class}_button-layered:dir(ltr)::before {\n @include gradient-bg(90deg, theme.$layer);\n }\n\n // Gradient RTL\n &:dir(rtl)::before {\n @include gradient-bg(270deg, theme.$background);\n }\n\n &.#{$block-class}_button-layered:dir(rtl)::before {\n @include gradient-bg(270deg, theme.$layer);\n }\n}\n\n.#{$block-class}_button-collapse {\n background-color: transparent;\n}\n"],"mappings":""}

package/es/globals/internal/icon-loader-utils.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -7,7 +7,7 @@
 export interface CarbonIconElement {
     elem: string;
     attrs: Record<string, string | number>;
-    content: (CarbonIconElement | string)[];
+    content?: (CarbonIconElement | string)[];
 }
 export interface CarbonIconDescriptor {
     elem: string;

package/es/globals/internal/icon-loader-utils.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icon-loader-utils.d.ts","sourceRoot":"","sources":["../../../src/globals/internal/icon-loader-utils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACvC,OAAO,EAAE,CAAC,iBAAiB,GAAG,MAAM,CAAC,EAAE,CAAC;~~CACzC~~;AAGD,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACvC,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAED,MAAM,MAAM,UAAU,GAAG,oBAAoB,GAAG,gBAAgB,CAAC;AASjE;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE,UAAU,EACtB,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAM,UA+B7D;AAiBD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,UAAU,IAC/C,aAAY,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAM,4HAIrE"}
1	+ {"version":3,"file":"icon-loader-utils.d.ts","sourceRoot":"","sources":["../../../src/globals/internal/icon-loader-utils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,iBAAiB,GAAG,MAAM,CAAC,EAAE,CAAC;CAC1C;AAGD,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACvC,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAGD,MAAM,WAAW,gBAAgB;IAC/B,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAED,MAAM,MAAM,UAAU,GAAG,oBAAoB,GAAG,gBAAgB,CAAC;AASjE;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE,UAAU,EACtB,UAAU,GAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAM,UA+B7D;AAiBD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,UAAU,IAC/C,aAAY,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAM,4HAIrE"}