@carbon/web-components 2.57.0-rc.0 → 2.57.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.
- package/custom-elements.json +4 -4
- package/es/components/tabs/defs.d.ts +5 -1
- package/es/components/tabs/defs.d.ts.map +1 -1
- package/es/components/tabs/defs.js +4 -0
- package/es/components/tabs/defs.js.map +1 -1
- package/es/components/tabs/stories/tabs-wrapper.d.ts.map +1 -1
- package/es/components/tabs/stories/tabs-wrapper.js +2 -1
- package/es/components/tabs/stories/tabs-wrapper.js.map +1 -1
- package/es/components/tabs/tabs-vertical.d.ts.map +1 -1
- package/es/components/tabs/tabs-vertical.js +2 -0
- package/es/components/tabs/tabs-vertical.js.map +1 -1
- package/es/components/tabs/tabs.d.ts +8 -0
- package/es/components/tabs/tabs.d.ts.map +1 -1
- package/es/components/tabs/tabs.js +4 -2
- package/es/components/tabs/tabs.js.map +1 -1
- package/es/components/tabs/tabs.scss.js +1 -1
- package/es/components/tabs/tabs.scss.js.map +1 -1
- package/es-custom/components/tabs/defs.d.ts +5 -1
- package/es-custom/components/tabs/defs.d.ts.map +1 -1
- package/es-custom/components/tabs/defs.js +4 -0
- package/es-custom/components/tabs/defs.js.map +1 -1
- package/es-custom/components/tabs/stories/tabs-wrapper.d.ts.map +1 -1
- package/es-custom/components/tabs/stories/tabs-wrapper.js +2 -1
- package/es-custom/components/tabs/stories/tabs-wrapper.js.map +1 -1
- package/es-custom/components/tabs/tabs-vertical.d.ts.map +1 -1
- package/es-custom/components/tabs/tabs-vertical.js +2 -0
- package/es-custom/components/tabs/tabs-vertical.js.map +1 -1
- package/es-custom/components/tabs/tabs.d.ts +8 -0
- package/es-custom/components/tabs/tabs.d.ts.map +1 -1
- package/es-custom/components/tabs/tabs.js +4 -2
- package/es-custom/components/tabs/tabs.js.map +1 -1
- package/es-custom/components/tabs/tabs.scss.js +1 -1
- package/es-custom/components/tabs/tabs.scss.js.map +1 -1
- package/lib/components/tabs/defs.d.ts +5 -1
- package/lib/components/tabs/defs.d.ts.map +1 -1
- package/lib/components/tabs/defs.js +4 -0
- package/lib/components/tabs/defs.js.map +1 -1
- package/lib/components/tabs/stories/tabs-wrapper.d.ts.map +1 -1
- package/lib/components/tabs/tabs-vertical.d.ts.map +1 -1
- package/lib/components/tabs/tabs.d.ts +8 -0
- package/lib/components/tabs/tabs.d.ts.map +1 -1
- package/package.json +3 -3
- package/scss/components/tabs/tabs.scss +12 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.scss.js","names":[],"sources":["../../../src/components/tabs/tabs.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, 2026\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/type' as *;\n@use '@carbon/styles/scss/components/button/index' as *;\n@use '@carbon/styles/scss/components/tabs/index';\n@use '@carbon/styles/scss/components/tabs/vars' as *;\n@use '@carbon/styles/scss/utilities/button-reset';\n@use '@carbon/styles/scss/layout' as *;\n@use '@carbon/styles/scss/utilities/layout';\n@use '@carbon/styles/scss/utilities/convert';\n@use '@carbon/styles/scss/utilities/skeleton' as *;\n@use '@carbon/styles/scss/utilities/update_fields_on_layer' as *;\n\n$inset-transition: inset 110ms motion(standard, productive);\n\n:host(#{$prefix}-tabs),\n:host(#{$prefix}-tabs-skeleton) {\n @extend .#{$prefix}--tabs;\n @include emit-layout-tokens();\n\n .#{$prefix}--tabs-nav-content-container {\n position: relative;\n overflow: scroll;\n flex: 1 1 0%;\n // for some reason, overflow: hidden shrinks the content\n block-size: layout.size('height');\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n /* Set to zero-specificity so it can be overridden by dynamic stylesheet */\n :where(.#{$prefix}--tabs-nav-content) {\n position: absolute;\n block-size: 100%;\n inset-inline-start: 0;\n transition: $inset-transition;\n }\n\n .#{$prefix}--tabs-nav {\n position: absolute;\n display: block;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n z-index: 1;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n background-color: var(--tabs-overflow-button-background, $background);\n }\n\n .#{$prefix}--tab--overflow-nav-button--hidden {\n display: none;\n }\n}\n\n:host(#{$prefix}-tabs) {\n @include focus-outline('reset');\n\n .#{$prefix}--tabs-trigger svg {\n block-size: auto;\n inline-size: auto;\n }\n}\n\n:host(#{$prefix}-tabs:focus) {\n .#{$prefix}--tabs-trigger {\n @include focus-outline('outline');\n }\n}\n\n:host(#{$prefix}-tabs[size='sm']) {\n @extend .#{$prefix}--layout--size-sm;\n}\n\n:host(#{$prefix}-tabs[size='md']) {\n @extend .#{$prefix}--layout--size-md;\n}\n\n:host(#{$prefix}-tabs[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 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-custom--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-custom-tabs when slotted inside cds-custom-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-custom-tabs when inside cds-custom-tabs-vertical\n// These are applied via a CSS custom property / attribute set by the wrapper\n:host(#{$prefix}-tabs[vertical]) {\n .#{$prefix}--tabs-nav-content-container {\n block-size: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n }\n\n .#{$prefix}--tabs-nav-content {\n position: relative;\n block-size: 100%;\n }\n\n .#{$prefix}--tabs-nav {\n position: relative;\n }\n\n .#{$prefix}--tab--list {\n display: flex;\n flex-direction: column;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n display: none;\n }\n\n .#{$prefix}--tabs__nav-item-label {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-height: var(--cds-body-compact-01-line-height);\n text-overflow: ellipsis;\n white-space: normal;\n }\n}\n\n:host(#{$prefix}-tab[vertical]) {\n flex: none;\n background-color: $layer-01;\n block-size: $spacing-10;\n border-inline-end: 1px solid $border-subtle;\n box-shadow: inset 3px 0 0 0 $border-subtle;\n inline-size: 100%;\n\n .#{$prefix}--tabs__nav-item-label {\n display: -webkit-box;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-height: var(--cds-body-compact-01-line-height);\n text-overflow: ellipsis;\n white-space: normal;\n }\n}\n\n:host(#{$prefix}-tab[vertical][disabled]) {\n border-inline-end: 1px solid $border-subtle;\n box-shadow: inset 3px 0 0 0 $border-subtle;\n}\n\n:host(#{$prefix}-tab[vertical]:hover),\n:host(#{$prefix}-tab[vertical][disabled]:hover) {\n .#{$prefix}--tabs__nav-link {\n border-block-end: 1px solid $border-subtle;\n }\n}\n\n:host(#{$prefix}-tab[vertical][selected]) {\n border-inline: none;\n box-shadow: inset 3px 0 0 0 $border-interactive;\n}\n\n:host(#{$prefix}-tab[vertical]:not([selected]):not([disabled]):hover) {\n background-color: $layer-hover;\n box-shadow: inset 3px 0 0 0 $border-strong;\n}\n:host(#{$prefix}-tab) {\n .#{$prefix}--tabs__nav-link--dismissable {\n display: flex;\n align-items: flex-start;\n padding-inline-end: $spacing-08;\n }\n .#{$prefix}--tabs--dismissable.#{$prefix}--tabs--contained {\n padding-inline-end: calc($spacing-09 - 1px);\n }\n}\n:host(#{$prefix}-tab[type='contained']) {\n .#{$prefix}--tabs__nav-link.#{$prefix}--tabs__nav-link--dismissable {\n padding-inline-end: calc($spacing-09 - 1px);\n }\n}\n:host(#{$prefix}-tab) {\n .#{$prefix}--tabs__nav-item--close {\n position: relative;\n display: flex;\n align-items: center;\n inset-inline-start: calc(-#{$spacing-04} - 1px);\n margin-inline-start: calc(-#{$spacing-06} + 1px);\n\n &[disabled] {\n pointer-events: none;\n }\n }\n .#{$prefix}--tabs__nav-item--close--hidden {\n display: none;\n }\n .#{$prefix}--tabs__nav-item--close::part(button) {\n @include button-reset.reset();\n\n block-size: convert.to-rem(24px);\n inline-size: convert.to-rem(24px);\n padding-block: $spacing-02;\n padding-inline: $spacing-02;\n pointer-events: inherit;\n\n svg {\n block-size: convert.to-rem(16px);\n fill: $text-secondary;\n inline-size: convert.to-rem(16px);\n }\n\n svg:hover {\n fill: $icon-primary;\n }\n\n &:hover {\n background-color: $layer-hover;\n }\n\n &:focus,\n &:active {\n @include focus-outline('outline');\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"tabs.scss.js","names":[],"sources":["../../../src/components/tabs/tabs.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, 2026\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n@use '@carbon/styles/scss/config' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/utilities' as *;\n@use '@carbon/styles/scss/breakpoint' as *;\n@use '@carbon/styles/scss/spacing' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/type' as *;\n@use '@carbon/styles/scss/components/button/index' as *;\n@use '@carbon/styles/scss/components/tabs/index';\n@use '@carbon/styles/scss/components/tabs/vars' as *;\n@use '@carbon/styles/scss/utilities/button-reset';\n@use '@carbon/styles/scss/layout' as *;\n@use '@carbon/styles/scss/utilities/layout';\n@use '@carbon/styles/scss/utilities/convert';\n@use '@carbon/styles/scss/utilities/skeleton' as *;\n@use '@carbon/styles/scss/utilities/update_fields_on_layer' as *;\n\n$inset-transition: inset 110ms motion(standard, productive);\n\n:host(#{$prefix}-tabs),\n:host(#{$prefix}-tabs-skeleton) {\n @extend .#{$prefix}--tabs;\n @include emit-layout-tokens();\n\n .#{$prefix}--tabs-nav-content-container {\n position: relative;\n overflow: scroll;\n flex: 1 1 0%;\n // for some reason, overflow: hidden shrinks the content\n block-size: layout.size('height');\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n /* Set to zero-specificity so it can be overridden by dynamic stylesheet */\n :where(.#{$prefix}--tabs-nav-content) {\n position: absolute;\n block-size: 100%;\n inset-inline-start: 0;\n transition: $inset-transition;\n }\n\n .#{$prefix}--tabs-nav {\n position: absolute;\n display: block;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n z-index: 1;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n background-color: var(--tabs-overflow-button-background, $background);\n }\n\n .#{$prefix}--tab--overflow-nav-button--hidden {\n display: none;\n }\n}\n\n:host(#{$prefix}-tabs) {\n @include focus-outline('reset');\n\n .#{$prefix}--tabs-trigger svg {\n block-size: auto;\n inline-size: auto;\n }\n}\n\n:host(#{$prefix}-tabs:focus) {\n .#{$prefix}--tabs-trigger {\n @include focus-outline('outline');\n }\n}\n\n:host(#{$prefix}-tabs[size='sm']) {\n @extend .#{$prefix}--layout--size-sm;\n}\n\n:host(#{$prefix}-tabs[size='md']) {\n @extend .#{$prefix}--layout--size-md;\n}\n\n:host(#{$prefix}-tabs[type='contained'][size='lg']),\n:host(#{$prefix}-tabs[vertical][size='lg']) {\n @extend .#{$prefix}--layout--size-lg;\n}\n\n:host(#{$prefix}-tabs[icon-size='default'])\n .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default)\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n block-size: layout.size('height');\n}\n\n:host(#{$prefix}-tabs[icon-size='lg']) .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg)\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tabs[icon-size='default']),\n:host(#{$prefix}-tabs[icon-size='lg']),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg) {\n overflow: visible;\n\n .#{$prefix}--tab--list {\n overflow: visible;\n }\n}\n\n:host(#{$prefix}-tabs[type='contained']) {\n .#{$prefix}--tab--overflow-nav-button {\n background-color: $layer-accent;\n inline-size: $spacing-09;\n\n &:hover {\n background-color: $layer-accent-hover;\n }\n\n &:active {\n background-color: $layer-accent-active;\n }\n }\n}\n\n:host(#{$prefix}-tabs[type='contained'][has-secondary-labels])\n .#{$prefix}--tabs-nav-content-container {\n block-size: $spacing-10;\n}\n\n:host(#{$prefix}-tabs[type='contained'][has-secondary-labels]) #{$prefix}-tab {\n block-size: $spacing-10;\n}\n\n:host(#{$prefix}-tab[type='contained'][secondary-label]) {\n block-size: $spacing-10;\n\n a.#{$prefix}--tabs__nav-link {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0 $spacing-05;\n block-size: $spacing-10;\n line-height: normal;\n }\n\n .#{$prefix}--tabs__nav-item-label-wrapper {\n flex-direction: row;\n align-items: center;\n }\n\n .#{$prefix}--tabs__nav-item-label {\n line-height: var(--cds-body-compact-01-line-height);\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][secondary-label][selected]),\n:host(#{$prefix}-tab[type='contained'][secondary-label][selected]:hover) {\n a.#{$prefix}--tabs__nav-link {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0 $spacing-05;\n line-height: normal;\n }\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n .#{$prefix}--tabs__nav-item-secondary-label {\n @include type-style('label-01');\n\n display: block;\n overflow: hidden;\n color: $text-secondary;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]) {\n .#{$prefix}--tabs__nav-item-secondary-label {\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled]) {\n .#{$prefix}--tabs__nav-item-secondary-label {\n color: $text-on-color-disabled;\n }\n}\n\n:host(#{$prefix}-tabs[type='contained'][full-width]) {\n display: flex;\n inline-size: 100%;\n\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n flex: 1 1 0%;\n }\n\n .#{$prefix}--tabs-nav-content,\n .#{$prefix}--tabs-nav,\n .#{$prefix}--tab--list {\n inline-size: 100%;\n }\n\n .#{$prefix}--tab--list {\n display: flex;\n }\n}\n\n:host(#{$prefix}-tabs[type='contained'][full-width]) #{$prefix}-tab {\n flex: 1 1 0%;\n min-inline-size: 0;\n\n .#{$prefix}--tabs__nav-link {\n overflow: hidden;\n inline-size: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n:host(#{$prefix}-tab),\n:host(#{$prefix}-tab-skeleton) {\n @include layout.use('size', $default: 'md', $min: 'sm', $max: 'lg');\n\n display: flex;\n background: transparent;\n inline-size: 100%;\n\n .#{$prefix}--tabs__nav-item-label-wrapper {\n display: flex;\n align-items: inherit;\n gap: $spacing-03;\n }\n\n .#{$prefix}--tabs__nav-link {\n @include button-reset.reset($width: false);\n @include focus-outline('reset');\n @include type-style('body-compact-01');\n\n position: relative;\n overflow: hidden;\n\n align-items: center;\n padding: $spacing-04 $spacing-05 $spacing-03;\n border-block-end: $tab-underline-color;\n color: $text-secondary;\n inline-size: 100%;\n text-align: start;\n text-decoration: none;\n text-overflow: ellipsis;\n transition:\n border $duration-fast-01 motion(standard, productive),\n outline $duration-fast-01 motion(standard, productive);\n white-space: nowrap;\n\n &:focus,\n &:active {\n @include focus-outline('outline');\n }\n }\n\n outline: none;\n}\n\n:host(#{$prefix}-tab:not([type='contained']):not([vertical])) {\n margin-inline-end: convert.to-rem(1px);\n}\n:host(#{$prefix}-tab:not([type='contained'])) {\n .#{$prefix}--tabs__nav-link {\n display: flex;\n align-items: center;\n block-size: layout.size('height');\n padding-block: 0;\n }\n}\n\n:host(#{$prefix}-tab:not([type='contained']):not([vertical]):last-of-type) {\n margin-inline-end: 0;\n}\n:host(#{$prefix}-tab:not([type='contained']))\n + :host(#{$prefix}-tab:not([type='contained'])) {\n margin-inline-start: convert.to-rem(1px);\n}\n:host(#{$prefix}-tab[vertical]) {\n .#{$prefix}--tabs__nav-link {\n padding-block-end: $spacing-03;\n padding-block-start: $spacing-03;\n }\n}\n\n:host(#{$prefix}-tab[badge-indicator][icon-only]:not([icon-size='lg']))\n #{$prefix}-badge-indicator,\n:host(\n #{$prefix}-tab[badge-indicator].#{$prefix}--tabs__nav-item--icon-only:not(\n .#{$prefix}--tabs__nav-item--icon-only__20\n )\n )\n #{$prefix}-badge-indicator {\n margin-block-start: $spacing-02;\n margin-inline-end: $spacing-02;\n}\n\n:host(#{$prefix}-tab[icon-only]),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only) {\n flex: 0 0 auto;\n block-size: layout.size('height');\n inline-size: layout.size('height');\n\n .#{$prefix}--tabs__nav-item-label-wrapper {\n display: flex;\n }\n\n #{$prefix}-tooltip {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n --#{$prefix}-tooltip-padding-block: #{convert.to-rem(2px)};\n --#{$prefix}-popover-caret-width: #{convert.to-rem(8px)};\n --#{$prefix}-popover-caret-height: #{convert.to-rem(4px)};\n --#{$prefix}-popover-offset: #{convert.to-rem(8px)};\n }\n\n #{$prefix}-tooltip::part(popover-container) {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n }\n\n .#{$prefix}--tabs__nav-link {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n block-size: 100%;\n inline-size: 100%;\n }\n\n ::slotted(svg) {\n display: block;\n fill: currentColor;\n }\n}\n\n:host(#{$prefix}-tab[icon-only]:not([type='contained'])),\n:host(\n #{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:not([type='contained'])\n ) {\n .#{$prefix}--tabs__nav-item-label-wrapper {\n position: relative;\n inset-block-start: convert.to-rem(1px);\n }\n}\n\n:host(#{$prefix}-tab[icon-only][icon-size='lg']),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only__20) {\n block-size: $spacing-09;\n inline-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[selected]) {\n .#{$prefix}--tabs__nav-link {\n @include type-style('heading-compact-01');\n\n border-block-end: $spacing-01 solid $border-interactive;\n\n &,\n // Need to override Carbon core's non-selected focus color\n &:focus,\n &:active {\n color: $text-primary;\n }\n }\n\n display: flex;\n background-color: transparent;\n transition: color $duration-fast-01 motion(standard, productive);\n\n &:hover {\n background-color: transparent;\n }\n}\n\n:host(\n #{$prefix}-tab:not([type='contained']):hover:not([selected]):not(\n [disabled]\n ):not([vertical])\n ) {\n background-color: transparent;\n\n a.#{$prefix}--tabs__nav-link {\n border-block-end: $tab-underline-color-hover;\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-tab[icon-only]:hover),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:hover) {\n box-shadow: none;\n}\n\n:host(#{$prefix}-tabs[type='contained'])\n .#{$prefix}--tabs-nav-content-container {\n block-size: layout.size('height');\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n background-color: $layer-accent-01;\n\n a.#{$prefix}--tabs__nav-link {\n padding: $spacing-03 $spacing-05;\n block-size: layout.size('height');\n // height - vertical padding\n line-height: calc(#{layout.size('height')} - (#{$spacing-03} * 2));\n }\n}\n\n:host(#{$prefix}-tab[type='contained']),\n:host(#{$prefix}-tab[type='contained']:hover) {\n a.#{$prefix}--tabs__nav-link {\n border-block-end: none;\n // Draws the border without affecting the inner-content\n box-shadow: rem(-1px) 0 0 0 $border-strong;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][hide-divider])\n a.#{$prefix}--tabs__nav-link {\n box-shadow: rem(-1px) 0 0 0 transparent;\n}\n\n// `[role]` is only for specificity.\n// We have `:not()` usage in the corresponding Carbon core style\n// which puts specificity of \"specific\" scenario though the style is for \"regular\" scenario\n:host(#{$prefix}-tab[disabled][role]),\n:host(#{$prefix}-tab[disabled][role]:hover) {\n background-color: transparent;\n box-shadow: none;\n cursor: not-allowed;\n outline: none;\n\n .#{$prefix}--tabs__nav-link {\n border-block-end: $tab-underline-color;\n color: $tab-text-disabled;\n outline: none;\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled][role])\n .#{$prefix}--tabs__nav-link {\n background-color: $button-disabled;\n border-block-end: none;\n color: $text-on-color-disabled;\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]),\n:host(#{$prefix}-tab[type='contained'][selected]:hover) {\n background-color: $layer-01;\n\n .#{$prefix}--tabs__nav-link {\n border-block-end: none;\n // Draws the border without affecting the inner-content\n box-shadow: inset 0 $spacing-01 0 0 $interactive;\n // height - vertical padding\n line-height: calc(#{layout.size('height')} - (#{$spacing-03} * 2));\n }\n\n .#{$prefix}--tabs__nav-link:focus,\n .#{$prefix}--tabs__nav-link:active {\n box-shadow: none;\n }\n}\n\n:host(#{$prefix}-tab[type='contained']:hover) {\n background-color: $layer-accent-01;\n}\n:host(#{$prefix}-tab[type='contained']) {\n .#{$prefix}--tabs__nav-link:hover {\n background-color: $layer-accent-hover;\n }\n}\n\n// Disabled tab never gets selected, but we guard for manual addition of `selected` attribute\n:host(#{$prefix}-tab[disabled][selected]),\n:host(#{$prefix}-tab[disabled][selected]:hover),\n:host(#{$prefix}-tab[disabled][in-focus][selected]),\n:host(#{$prefix}-tab[disabled][in-focus][selected]:hover) {\n display: flex;\n background-color: transparent;\n box-shadow: none;\n\n @include focus-outline('reset');\n\n .#{$prefix}--tabs__nav-link {\n @include type-style('body-short-01');\n\n border-block-end: $tab-underline-color;\n\n color: $tab-text-disabled;\n\n &:focus,\n &:active {\n border-block-end-width: 3px;\n }\n }\n}\n\n:host(#{$prefix}-tabs-skeleton) .#{$prefix}--tabs-trigger {\n @include skeleton;\n\n inline-size: rem(100px);\n}\n\n:host(#{$prefix}-tab-skeleton) {\n margin-inline-start: $spacing-01;\n\n .#{$prefix}--tabs__nav-link {\n @include skeleton;\n\n display: flex;\n align-items: center;\n padding: 0 layout.density('padding-inline');\n background-color: transparent;\n block-size: 100%;\n border-block-end: 2px solid $skeleton-element;\n inline-size: 10rem;\n\n &::before {\n display: none;\n content: none;\n }\n }\n\n .#{$prefix}--tabs__nav-item {\n @include reset;\n\n position: relative;\n display: flex;\n flex: 1 0 auto;\n padding: 0;\n cursor: pointer;\n transition: background-color $duration-fast-01 motion(standard, productive);\n }\n\n span {\n @include skeleton;\n\n display: block;\n block-size: convert.to-rem(14px);\n inline-size: 100%;\n }\n}\n\n:host(#{$prefix}-tab-skeleton) {\n @extend .#{$prefix}--tabs__nav-item;\n}\n\n:host(#{$prefix}-tabs-skeleton) {\n @extend .#{$prefix}--tabs;\n @extend .#{$prefix}--skeleton;\n}\n\n:host(#{$prefix}-tabs-skeleton[contained]) {\n @extend .#{$prefix}--tabs--contained;\n}\n\n:host(#{$prefix}-tab-skeleton:first-of-type) {\n margin-inline-start: 0;\n}\n\n// Windows HCM fix\n:host(#{$prefix}-tab[selected]) .#{$prefix}--tabs__nav-link {\n @include high-contrast-mode {\n background-color: SelectedItem;\n }\n}\n\n:host(#{$prefix}-tab[vertical]) .#{$prefix}--tabs__nav-link {\n display: flex;\n align-items: center;\n block-size: 100%;\n border-block-end: 1px solid $border-subtle;\n}\n\n:host(#{$prefix}-tab[vertical][selected]) .#{$prefix}--tabs__nav-link {\n border-block-end: 1px solid $border-subtle;\n}\n\n:host(#{$prefix}-tab[vertical][disabled]) .#{$prefix}--tabs__nav-link {\n border-block-end: 1px solid $border-subtle;\n}\n\n//-----------------------------\n// Vertical Tabs Wrapper\n//-----------------------------\n\n:host(#{$prefix}-tabs-vertical) {\n @include emit-layout-tokens();\n @include layout.use('density', $default: 'normal');\n\n grid-column: span 2;\n max-block-size: none;\n\n &.#{$prefix}--css-grid {\n box-shadow: inset -1px 0 $border-subtle;\n }\n\n ::slotted(#{$prefix}-tabs) {\n grid-column: span 2;\n\n @include breakpoint(lg) {\n grid-column: span 4;\n }\n }\n\n // Shadow-DOM wrapper for the panel slot — styled directly (no ::slotted needed)\n .#{$prefix}-panel-container {\n @include update_fields_on_layer;\n\n background: $layer;\n grid-column: 3 / -1;\n overflow-y: auto;\n\n @include breakpoint(lg) {\n grid-column: 5 / -1;\n }\n }\n}\n\n// Slotted tab panel divs — match React's cds-custom--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-custom-tabs when slotted inside cds-custom-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-custom-tabs when inside cds-custom-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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,SAAS,cAAc;IAEvB;;OAEG;IACH,SAAS,cAAc;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;;CAKzC,CAAC;AAEF;;GAEG;AACH,oBAAY,cAAc;IACxB;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,KAAK,OAAO;CACb;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;
|
|
1
|
+
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,oBAAY,oBAAoB;IAC9B;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,SAAS,cAAc;IAEvB;;OAEG;IACH,SAAS,cAAc;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,6BAA6B;;;;;CAKzC,CAAC;AAEF;;GAEG;AACH,oBAAY,cAAc;IACxB;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,KAAK,OAAO;CACb;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,WAAW,OAAO;CACnB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tabs/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 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/**\n * The keyboard action categories for dropdown.\n */\nexport enum TABS_KEYBOARD_ACTION {\n /**\n * Not doing any action.\n */\n NONE = 'none',\n\n /**\n * Keyboard action to navigate back/forward.\n */\n NAVIGATING = 'navigating',\n\n /**\n * Keyboard action to Enter/Space.\n */\n ACTIVATING = 'activating',\n\n /**\n * Keyboard action to navigate to first tab using home key\n */\n HOME = 'home',\n\n /**\n * Keyboard action to navigate to last tab using end key\n */\n END = 'end',\n}\n\n/**\n * Tabs types.\n */\nexport enum TABS_TYPE {\n /**\n * Regular tabs.\n */\n REGULAR = '',\n\n /**\n * Container type.\n */\n CONTAINER = 'container',\n\n /**\n * Contained type.\n */\n CONTAINED = 'contained',\n}\n\n/**\n * Vertical navigation direction, associated with key symbols.\n */\nexport const VERTICAL_NAVIGATION_DIRECTION = {\n Up: -1,\n ArrowUp: -1,\n Down: 1,\n ArrowDown: 1,\n};\n\n/**\n * Tabs icon sizes.\n */\nexport enum TABS_ICON_SIZE {\n /**\n * Default icon size.\n */\n DEFAULT = 'default',\n\n /**\n * Large icon size.\n */\n LARGE = 'lg',\n}\n\n/**\n * Tabs size.\n */\nexport enum TABS_SIZE {\n /**\n * Small size.\n */\n SMALL = 'sm',\n\n /**\n * Medium size.\n */\n MEDIUM = 'md',\n\n /**\n * Large size.\n */\n LARGE = 'lg',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,IAAY,uBAAL,yBAAA,sBAAA;;;;AAIL,sBAAA,UAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,UAAA;;;;AAKA,sBAAA,SAAA;;KACD;;;;AAKD,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,aAAA;;;;AAKA,WAAA,eAAA;;;;AAKA,WAAA,eAAA;;KACD;;;;AAKD,MAAa,gCAAgC;CAC3C,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;CACZ;;;;AAKD,IAAY,iBAAL,yBAAA,gBAAA;;;;AAIL,gBAAA,aAAA;;;;AAKA,gBAAA,WAAA;;KACD;;;;AAKD,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,WAAA;;;;AAKA,WAAA,YAAA;;;;AAKA,WAAA,WAAA;;KACD"}
|
|
1
|
+
{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/tabs/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 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/**\n * The keyboard action categories for dropdown.\n */\nexport enum TABS_KEYBOARD_ACTION {\n /**\n * Not doing any action.\n */\n NONE = 'none',\n\n /**\n * Keyboard action to navigate back/forward.\n */\n NAVIGATING = 'navigating',\n\n /**\n * Keyboard action to Enter/Space.\n */\n ACTIVATING = 'activating',\n\n /**\n * Keyboard action to navigate to first tab using home key\n */\n HOME = 'home',\n\n /**\n * Keyboard action to navigate to last tab using end key\n */\n END = 'end',\n}\n\n/**\n * Tabs types.\n */\nexport enum TABS_TYPE {\n /**\n * Regular tabs.\n */\n REGULAR = '',\n\n /**\n * Container type.\n */\n CONTAINER = 'container',\n\n /**\n * Contained type.\n */\n CONTAINED = 'contained',\n}\n\n/**\n * Vertical navigation direction, associated with key symbols.\n */\nexport const VERTICAL_NAVIGATION_DIRECTION = {\n Up: -1,\n ArrowUp: -1,\n Down: 1,\n ArrowDown: 1,\n};\n\n/**\n * Tabs icon sizes.\n */\nexport enum TABS_ICON_SIZE {\n /**\n * Default icon size.\n */\n DEFAULT = 'default',\n\n /**\n * Large icon size.\n */\n LARGE = 'lg',\n}\n\n/**\n * Tabs size.\n */\nexport enum TABS_SIZE {\n /**\n * Small size.\n */\n SMALL = 'sm',\n\n /**\n * Medium size.\n */\n MEDIUM = 'md',\n\n /**\n * Large size.\n */\n LARGE = 'lg',\n\n /**\n * Extra large size.\n */\n EXTRA_LARGE = 'xl',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,IAAY,uBAAL,yBAAA,sBAAA;;;;AAIL,sBAAA,UAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,gBAAA;;;;AAKA,sBAAA,UAAA;;;;AAKA,sBAAA,SAAA;;KACD;;;;AAKD,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,aAAA;;;;AAKA,WAAA,eAAA;;;;AAKA,WAAA,eAAA;;KACD;;;;AAKD,MAAa,gCAAgC;CAC3C,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;CACZ;;;;AAKD,IAAY,iBAAL,yBAAA,gBAAA;;;;AAIL,gBAAA,aAAA;;;;AAKA,gBAAA,WAAA;;KACD;;;;AAKD,IAAY,YAAL,yBAAA,WAAA;;;;AAIL,WAAA,WAAA;;;;AAKA,WAAA,YAAA;;;;AAKA,WAAA,WAAA;;;;AAKA,WAAA,iBAAA;;KACD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/stories/tabs-wrapper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMpC,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IAEH,SAAS,UAAS;IAElB,OAAO,CAAC,YAAY,CAgBlB;IACF;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAqB;IAElC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAClB;;OAEG;IAEH,WAAW,UAAQ;IAEnB;;OAEG;IAEH,aAAa,SAAe;IAE5B;;OAEG;IAEH,aAAa,SAAK;IAElB;;OAEG;IAEH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,SAAS;IAIjB,MAAM;
|
|
1
|
+
{"version":3,"file":"tabs-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/stories/tabs-wrapper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAMpC,OAAO,cAAc,CAAC;AAEtB;;GAEG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IAEH,SAAS,UAAS;IAElB,OAAO,CAAC,YAAY,CAgBlB;IACF;;OAEG;IAEH,OAAO,CAAC,KAAK,CAAqB;IAElC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAClB;;OAEG;IAEH,WAAW,UAAQ;IAEnB;;OAEG;IAEH,aAAa,SAAe;IAE5B;;OAEG;IAEH,aAAa,SAAK;IAElB;;OAEG;IAEH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,SAAS;IAIjB,MAAM;IA+CN;;OAEG;IACH,gBAAgB;CAGjB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs-vertical.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-vertical.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAevC;;;;;;GAMG;AAEH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;IACrD;;OAEG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,OAAO,CAAC,eAAe,CAA+B;IAEtD,OAAO,CAAC,qBAAqB,
|
|
1
|
+
{"version":3,"file":"tabs-vertical.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-vertical.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAevC;;;;;;GAMG;AAEH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;IACrD;;OAEG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,OAAO,CAAC,eAAe,CAA+B;IAEtD,OAAO,CAAC,qBAAqB,CAoB3B;IAEF,YAAY;IAeZ,OAAO,CAAC,iBAAiB,KAAA;IAOzB,oBAAoB;IASpB,OAAO,CAAC,YAAY;IA2CpB,MAAM;IASN,MAAM,CAAC,MAAM,MAAU;CACxB"}
|
|
@@ -155,6 +155,14 @@ export default class CDSTabs extends CDSTabs_base {
|
|
|
155
155
|
* Whether the rendered Tab children should be dismissable.
|
|
156
156
|
*/
|
|
157
157
|
dismissable: any;
|
|
158
|
+
/**
|
|
159
|
+
* Specify the size of the tabs.
|
|
160
|
+
*
|
|
161
|
+
* Supports `sm` and `md` for line tabs.
|
|
162
|
+
* Supports `sm`, `md`, and `lg` for contained tabs.
|
|
163
|
+
* Supports `xl` only when `vertical` is set; otherwise `xl` falls back to `lg`.
|
|
164
|
+
*/
|
|
165
|
+
size: TABS_SIZE;
|
|
158
166
|
/**
|
|
159
167
|
* Specify the icon size used by icon-only tabs.
|
|
160
168
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAU3C,OAAO,kBAAkB,EAAE,EACzB,oBAAoB,EACrB,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EACL,6BAA6B,EAC7B,cAAc,EACd,oBAAoB,EACpB,SAAS,EACT,SAAS,EACV,MAAM,QAAQ,CAAC;AAChB,OAAO,MAAM,MAAM,OAAO,CAAC;AAI3B,OAAO,EACL,oBAAoB,EACpB,6BAA6B,EAC7B,cAAc,EACd,oBAAoB,EACpB,SAAS,EACT,SAAS,GACV,CAAC;;;;;;;;;;uBAjBC,CAAC;;;;;AAmBJ;;;;;;;;GAQG;AAEH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,YAAqC;IACxE;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAAC,CAAS;IAEtC;;OAEG;IAGH,OAAO,CAAC,aAAa,CAAK;IAE1B;;OAEG;IACH,OAAO,CAAC,UAAU,CAAK;IAEvB;;OAEG;IAGH,OAAO,CAAC,aAAa,CAAS;IAE9B;;OAEG;IACH,OAAO,CAAC,OAAO,CAAwB;IAEvC;;OAEG;IACH,OAAO,CAAC,YAAY,CAAM;IAE1B;;OAEG;IACH,OAAO,CAAC,eAAe;
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/web-components",
|
|
3
3
|
"description": "Web components for the Carbon Design System",
|
|
4
|
-
"version": "2.57.0
|
|
4
|
+
"version": "2.57.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "es/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"dependencies": {
|
|
68
68
|
"@carbon/icon-helpers": "10.47.0",
|
|
69
69
|
"@carbon/icons": "^11.82.0",
|
|
70
|
-
"@carbon/styles": "^1.109.0
|
|
70
|
+
"@carbon/styles": "^1.109.0",
|
|
71
71
|
"@carbon/utilities": "^0.17.0",
|
|
72
72
|
"@floating-ui/dom": "^1.6.3",
|
|
73
73
|
"@ibm/telemetry-js": "^1.10.2",
|
|
@@ -126,5 +126,5 @@
|
|
|
126
126
|
}
|
|
127
127
|
]
|
|
128
128
|
},
|
|
129
|
-
"gitHead": "
|
|
129
|
+
"gitHead": "a4c90a9dc15cc4f0e6a99b3c0001a7a25303b555"
|
|
130
130
|
}
|
|
@@ -91,7 +91,8 @@ $inset-transition: inset 110ms motion(standard, productive);
|
|
|
91
91
|
@extend .#{$prefix}--layout--size-md;
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
:host(#{$prefix}-tabs[size='lg'])
|
|
94
|
+
:host(#{$prefix}-tabs[type='contained'][size='lg']),
|
|
95
|
+
:host(#{$prefix}-tabs[vertical][size='lg']) {
|
|
95
96
|
@extend .#{$prefix}--layout--size-lg;
|
|
96
97
|
}
|
|
97
98
|
|
|
@@ -596,6 +597,7 @@ $inset-transition: inset 110ms motion(standard, productive);
|
|
|
596
597
|
:host(#{$prefix}-tab[vertical]) .#{$prefix}--tabs__nav-link {
|
|
597
598
|
display: flex;
|
|
598
599
|
align-items: center;
|
|
600
|
+
block-size: 100%;
|
|
599
601
|
border-block-end: 1px solid $border-subtle;
|
|
600
602
|
}
|
|
601
603
|
|
|
@@ -667,6 +669,9 @@ $inset-transition: inset 110ms motion(standard, productive);
|
|
|
667
669
|
// Internal styles for cds-tabs when inside cds-tabs-vertical
|
|
668
670
|
// These are applied via a CSS custom property / attribute set by the wrapper
|
|
669
671
|
:host(#{$prefix}-tabs[vertical]) {
|
|
672
|
+
// Default line-clamp for vertical tabs
|
|
673
|
+
--#{$prefix}-tabs-vertical-line-clamp: 2;
|
|
674
|
+
|
|
670
675
|
.#{$prefix}--tabs-nav-content-container {
|
|
671
676
|
block-size: 100%;
|
|
672
677
|
overflow-x: hidden;
|
|
@@ -690,22 +695,17 @@ $inset-transition: inset 110ms motion(standard, productive);
|
|
|
690
695
|
.#{$prefix}--tab--overflow-nav-button {
|
|
691
696
|
display: none;
|
|
692
697
|
}
|
|
698
|
+
}
|
|
693
699
|
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
-webkit-box-orient: vertical;
|
|
698
|
-
-webkit-line-clamp: 2;
|
|
699
|
-
line-height: var(--cds-body-compact-01-line-height);
|
|
700
|
-
text-overflow: ellipsis;
|
|
701
|
-
white-space: normal;
|
|
702
|
-
}
|
|
700
|
+
// Size-specific line-clamp overrides for vertical tabs
|
|
701
|
+
:host(#{$prefix}-tabs[size='sm'][vertical]) {
|
|
702
|
+
--#{$prefix}-tabs-vertical-line-clamp: 1;
|
|
703
703
|
}
|
|
704
704
|
|
|
705
705
|
:host(#{$prefix}-tab[vertical]) {
|
|
706
706
|
flex: none;
|
|
707
707
|
background-color: $layer-01;
|
|
708
|
-
block-size: $spacing-10;
|
|
708
|
+
block-size: var(--#{$prefix}-layout-size-height, $spacing-10);
|
|
709
709
|
border-inline-end: 1px solid $border-subtle;
|
|
710
710
|
box-shadow: inset 3px 0 0 0 $border-subtle;
|
|
711
711
|
inline-size: 100%;
|
|
@@ -714,7 +714,7 @@ $inset-transition: inset 110ms motion(standard, productive);
|
|
|
714
714
|
display: -webkit-box;
|
|
715
715
|
overflow: hidden;
|
|
716
716
|
-webkit-box-orient: vertical;
|
|
717
|
-
-webkit-line-clamp:
|
|
717
|
+
-webkit-line-clamp: var(--#{$prefix}-tabs-vertical-line-clamp);
|
|
718
718
|
line-height: var(--cds-body-compact-01-line-height);
|
|
719
719
|
text-overflow: ellipsis;
|
|
720
720
|
white-space: normal;
|