@carbon/web-components 2.56.0 → 2.57.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.
- package/custom-elements.json +94 -16
- package/es/components/breadcrumb/breadcrumb.scss.js +1 -1
- package/es/components/checkbox/checkbox.d.ts +2 -2
- package/es/components/checkbox/checkbox.js.map +1 -1
- package/es/components/combo-box/combo-box.scss.js +1 -1
- package/es/components/combo-box/combo-box.scss.js.map +1 -1
- package/es/components/combo-button/combo-button.js +1 -1
- package/es/components/data-table/data-table.scss.js +1 -1
- package/es/components/dropdown/defs.d.ts +5 -1
- package/es/components/dropdown/defs.d.ts.map +1 -1
- package/es/components/dropdown/defs.js +4 -0
- package/es/components/dropdown/defs.js.map +1 -1
- package/es/components/dropdown/dropdown.d.ts.map +1 -1
- package/es/components/dropdown/dropdown.js +3 -0
- package/es/components/dropdown/dropdown.js.map +1 -1
- package/es/components/dropdown/dropdown.scss.js +1 -1
- package/es/components/dropdown/dropdown.scss.js.map +1 -1
- package/es/components/fluid-combo-box/fluid-combo-box.scss.js +1 -1
- package/es/components/fluid-dropdown/fluid-dropdown.scss.js +1 -1
- package/es/components/fluid-multi-select/fluid-multi-select.scss.js +1 -1
- package/es/components/link/link.scss.js +1 -1
- package/es/components/menu/menu-item.js +1 -1
- package/es/components/menu-button/menu-button.js +2 -2
- package/es/components/multi-select/multi-select.d.ts.map +1 -1
- package/es/components/multi-select/multi-select.js +10 -11
- package/es/components/multi-select/multi-select.js.map +1 -1
- package/es/components/multi-select/multi-select.scss.js +1 -1
- package/es/components/multi-select/multi-select.scss.js.map +1 -1
- package/es/components/overflow-menu/overflow-menu.d.ts +70 -0
- package/es/components/overflow-menu/overflow-menu.d.ts.map +1 -1
- package/es/components/overflow-menu/overflow-menu.js +256 -17
- package/es/components/overflow-menu/overflow-menu.js.map +1 -1
- package/es/components/pagination-nav/pagination-nav.js +1 -1
- package/es/components/tabs/tabs.d.ts +0 -4
- package/es/components/tabs/tabs.d.ts.map +1 -1
- package/es/components/tabs/tabs.js +0 -1
- 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/components/tile/clickable-tile.js +1 -1
- package/es/components/tile/tile.scss.js +1 -1
- package/es/globals/controllers/floating-controller.d.ts +3 -2
- package/es/globals/controllers/floating-controller.d.ts.map +1 -1
- package/es/globals/controllers/floating-controller.js +5 -3
- package/es/globals/controllers/floating-controller.js.map +1 -1
- package/es-custom/components/breadcrumb/breadcrumb.scss.js +1 -1
- package/es-custom/components/checkbox/checkbox.d.ts +2 -2
- package/es-custom/components/checkbox/checkbox.js.map +1 -1
- package/es-custom/components/combo-box/combo-box.scss.js +1 -1
- package/es-custom/components/combo-box/combo-box.scss.js.map +1 -1
- package/es-custom/components/combo-button/combo-button.js +1 -1
- package/es-custom/components/data-table/data-table.scss.js +1 -1
- package/es-custom/components/dropdown/defs.d.ts +5 -1
- package/es-custom/components/dropdown/defs.d.ts.map +1 -1
- package/es-custom/components/dropdown/defs.js +4 -0
- package/es-custom/components/dropdown/defs.js.map +1 -1
- package/es-custom/components/dropdown/dropdown.d.ts.map +1 -1
- package/es-custom/components/dropdown/dropdown.js +3 -0
- package/es-custom/components/dropdown/dropdown.js.map +1 -1
- package/es-custom/components/dropdown/dropdown.scss.js +1 -1
- package/es-custom/components/dropdown/dropdown.scss.js.map +1 -1
- package/es-custom/components/fluid-combo-box/fluid-combo-box.scss.js +1 -1
- package/es-custom/components/fluid-dropdown/fluid-dropdown.scss.js +1 -1
- package/es-custom/components/fluid-multi-select/fluid-multi-select.scss.js +1 -1
- package/es-custom/components/link/link.scss.js +1 -1
- package/es-custom/components/menu/menu-item.js +1 -1
- package/es-custom/components/menu-button/menu-button.js +2 -2
- package/es-custom/components/multi-select/multi-select.d.ts.map +1 -1
- package/es-custom/components/multi-select/multi-select.js +10 -11
- package/es-custom/components/multi-select/multi-select.js.map +1 -1
- package/es-custom/components/multi-select/multi-select.scss.js +1 -1
- package/es-custom/components/multi-select/multi-select.scss.js.map +1 -1
- package/es-custom/components/overflow-menu/overflow-menu.d.ts +70 -0
- package/es-custom/components/overflow-menu/overflow-menu.d.ts.map +1 -1
- package/es-custom/components/overflow-menu/overflow-menu.js +256 -17
- package/es-custom/components/overflow-menu/overflow-menu.js.map +1 -1
- package/es-custom/components/pagination-nav/pagination-nav.js +1 -1
- package/es-custom/components/tabs/tabs.d.ts +0 -4
- package/es-custom/components/tabs/tabs.d.ts.map +1 -1
- package/es-custom/components/tabs/tabs.js +0 -1
- 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/es-custom/components/tile/clickable-tile.js +1 -1
- package/es-custom/components/tile/tile.scss.js +1 -1
- package/es-custom/globals/controllers/floating-controller.d.ts +3 -2
- package/es-custom/globals/controllers/floating-controller.d.ts.map +1 -1
- package/es-custom/globals/controllers/floating-controller.js +5 -3
- package/es-custom/globals/controllers/floating-controller.js.map +1 -1
- package/lib/components/checkbox/checkbox.d.ts +2 -2
- package/lib/components/dropdown/defs.d.ts +5 -1
- package/lib/components/dropdown/defs.d.ts.map +1 -1
- package/lib/components/dropdown/defs.js +4 -0
- package/lib/components/dropdown/defs.js.map +1 -1
- package/lib/components/dropdown/dropdown.d.ts.map +1 -1
- package/lib/components/multi-select/multi-select.d.ts.map +1 -1
- package/lib/components/overflow-menu/overflow-menu.d.ts +70 -0
- package/lib/components/overflow-menu/overflow-menu.d.ts.map +1 -1
- package/lib/components/tabs/tabs.d.ts +0 -4
- package/lib/components/tabs/tabs.d.ts.map +1 -1
- package/lib/globals/controllers/floating-controller.d.ts +3 -2
- package/lib/globals/controllers/floating-controller.d.ts.map +1 -1
- package/lib/globals/controllers/floating-controller.js +5 -3
- package/lib/globals/controllers/floating-controller.js.map +1 -1
- package/package.json +3 -3
- package/scss/components/combo-box/combo-box.scss +3 -1
- package/scss/components/dropdown/dropdown.scss +6 -1
- package/scss/components/multi-select/multi-select.scss +5 -0
- package/scss/components/tabs/tabs.scss +27 -7
- package/telemetry.yml +1 -0
|
@@ -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: $spacing-08;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n }\n\n /* Set to zero-specificity so it can be overridden by dynamic stylesheet */\n :where(.#{$prefix}--tabs-nav-content) {\n position: absolute;\n block-size: 100%;\n inset-inline-start: 0;\n transition: $inset-transition;\n }\n\n .#{$prefix}--tabs-nav {\n position: absolute;\n display: block;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n z-index: 1;\n }\n\n .#{$prefix}--tab--overflow-nav-button {\n background-color: var(--tabs-overflow-button-background, $background);\n }\n\n .#{$prefix}--tab--overflow-nav-button--hidden {\n display: none;\n }\n}\n\n:host(#{$prefix}-tabs) {\n @include focus-outline('reset');\n\n .#{$prefix}--tabs-trigger svg {\n block-size: auto;\n inline-size: auto;\n }\n}\n\n:host(#{$prefix}-tabs:focus) {\n .#{$prefix}--tabs-trigger {\n @include focus-outline('outline');\n }\n}\n\n:host(#{$prefix}-tabs[icon-size='default'])\n .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default)\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n block-size: $spacing-08;\n}\n\n:host(#{$prefix}-tabs[icon-size='lg']) .#{$prefix}--tabs-nav-content-container,\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg)\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n block-size: $spacing-09;\n}\n\n:host(#{$prefix}-tabs[icon-size='default']),\n:host(#{$prefix}-tabs[icon-size='lg']),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--default),\n:host(#{$prefix}-tabs.#{$prefix}--tabs__icon--lg) {\n overflow: visible;\n\n .#{$prefix}--tab--list {\n overflow: visible;\n }\n}\n\n:host(#{$prefix}-tabs[type='contained']) {\n .#{$prefix}--tab--overflow-nav-button {\n background-color: $layer-accent;\n inline-size: $spacing-09;\n\n &:hover {\n background-color: $layer-accent-hover;\n }\n\n &:active {\n background-color: $layer-accent-active;\n }\n }\n}\n\n:host(#{$prefix}-tabs[type='contained'][has-secondary-labels])\n .#{$prefix}--tabs-nav-content-container {\n block-size: $spacing-10;\n}\n\n:host(#{$prefix}-tabs[type='contained'][has-secondary-labels]) #{$prefix}-tab {\n block-size: $spacing-10;\n}\n\n:host(#{$prefix}-tab[type='contained'][secondary-label]) {\n block-size: $spacing-10;\n\n a.#{$prefix}--tabs__nav-link {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0 $spacing-05;\n block-size: $spacing-10;\n line-height: normal;\n }\n\n .#{$prefix}--tabs__nav-item-label-wrapper {\n flex-direction: row;\n align-items: center;\n }\n\n .#{$prefix}--tabs__nav-item-label {\n line-height: var(--cds-body-compact-01-line-height);\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][secondary-label][selected]),\n:host(#{$prefix}-tab[type='contained'][secondary-label][selected]:hover) {\n a.#{$prefix}--tabs__nav-link {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0 $spacing-05;\n line-height: normal;\n }\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n .#{$prefix}--tabs__nav-item-secondary-label {\n @include type-style('label-01');\n\n display: block;\n overflow: hidden;\n color: $text-secondary;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]) {\n .#{$prefix}--tabs__nav-item-secondary-label {\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled]) {\n .#{$prefix}--tabs__nav-item-secondary-label {\n color: $text-on-color-disabled;\n }\n}\n\n:host(#{$prefix}-tabs[type='contained'][full-width]) {\n display: flex;\n inline-size: 100%;\n\n .#{$prefix}--tabs-nav-content-container {\n overflow: visible;\n flex: 1 1 0%;\n }\n\n .#{$prefix}--tabs-nav-content,\n .#{$prefix}--tabs-nav,\n .#{$prefix}--tab--list {\n inline-size: 100%;\n }\n\n .#{$prefix}--tab--list {\n display: flex;\n }\n}\n\n:host(#{$prefix}-tabs[type='contained'][full-width]) #{$prefix}-tab {\n flex: 1 1 0%;\n min-inline-size: 0;\n\n .#{$prefix}--tabs__nav-link {\n overflow: hidden;\n inline-size: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\n:host(#{$prefix}-tab),\n:host(#{$prefix}-tab-skeleton) {\n display: flex;\n background: transparent;\n inline-size: 100%;\n\n .#{$prefix}--tabs__nav-item-label-wrapper {\n display: flex;\n align-items: inherit;\n gap: $spacing-03;\n }\n\n .#{$prefix}--tabs__nav-link {\n @include button-reset.reset($width: false);\n @include focus-outline('reset');\n @include type-style('body-compact-01');\n\n position: relative;\n overflow: hidden;\n\n align-items: center;\n padding: $spacing-04 $spacing-05 $spacing-03;\n border-block-end: $tab-underline-color;\n color: $text-secondary;\n inline-size: 100%;\n text-align: start;\n text-decoration: none;\n text-overflow: ellipsis;\n transition:\n border $duration-fast-01 motion(standard, productive),\n outline $duration-fast-01 motion(standard, productive);\n white-space: nowrap;\n\n &:focus,\n &:active {\n @include focus-outline('outline');\n }\n }\n\n outline: none;\n}\n\n:host(#{$prefix}-tab:not([type='contained']):not([vertical])) {\n margin-inline-end: convert.to-rem(1px);\n}\n:host(#{$prefix}-tab:not([type='contained'])) {\n .#{$prefix}--tabs__nav-link {\n padding-block-end: calc(#{$spacing-03} + #{convert.to-rem(1px)});\n padding-block-start: calc(#{$spacing-04} - #{convert.to-rem(1px)});\n }\n}\n\n:host(#{$prefix}-tab:not([type='contained']):not([vertical]):last-of-type) {\n margin-inline-end: 0;\n}\n:host(#{$prefix}-tab:not([type='contained']))\n + :host(#{$prefix}-tab:not([type='contained'])) {\n margin-inline-start: convert.to-rem(1px);\n}\n:host(#{$prefix}-tab[vertical]) {\n .#{$prefix}--tabs__nav-link {\n padding-block-end: $spacing-03;\n padding-block-start: $spacing-03;\n }\n}\n\n:host(#{$prefix}-tab[badge-indicator][icon-only]:not([icon-size='lg']))\n #{$prefix}-badge-indicator,\n:host(\n #{$prefix}-tab[badge-indicator].#{$prefix}--tabs__nav-item--icon-only:not(\n .#{$prefix}--tabs__nav-item--icon-only__20\n )\n )\n #{$prefix}-badge-indicator {\n margin-block-start: $spacing-02;\n margin-inline-end: $spacing-02;\n}\n\n:host(#{$prefix}-tab[icon-only]),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only) {\n flex: 0 0 auto;\n block-size: $spacing-08;\n inline-size: $spacing-08;\n\n .#{$prefix}--tabs__nav-item-label-wrapper {\n display: flex;\n }\n\n #{$prefix}-tooltip {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n --#{$prefix}-tooltip-padding-block: #{convert.to-rem(2px)};\n --#{$prefix}-popover-caret-width: #{convert.to-rem(8px)};\n --#{$prefix}-popover-caret-height: #{convert.to-rem(4px)};\n --#{$prefix}-popover-offset: #{convert.to-rem(8px)};\n }\n\n #{$prefix}-tooltip::part(popover-container) {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n }\n\n .#{$prefix}--tabs__nav-link {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n block-size: 100%;\n inline-size: 100%;\n }\n\n ::slotted(svg) {\n display: block;\n fill: currentColor;\n }\n}\n\n:host(#{$prefix}-tab[icon-only]:not([type='contained'])),\n:host(\n #{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:not([type='contained'])\n ) {\n .#{$prefix}--tabs__nav-item-label-wrapper {\n position: relative;\n inset-block-start: convert.to-rem(1px);\n }\n}\n\n:host(#{$prefix}-tab[icon-only][icon-size='lg']),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only__20) {\n block-size: $spacing-09;\n inline-size: $spacing-09;\n}\n\n:host(#{$prefix}-tab[selected]) {\n .#{$prefix}--tabs__nav-link {\n @include type-style('heading-compact-01');\n\n border-block-end: $spacing-01 solid $border-interactive;\n\n &,\n // Need to override Carbon core's non-selected focus color\n &:focus,\n &:active {\n color: $text-primary;\n }\n }\n\n display: flex;\n background-color: transparent;\n transition: color $duration-fast-01 motion(standard, productive);\n\n &:hover {\n background-color: transparent;\n }\n}\n\n:host(#{$prefix}-tab:hover:not([selected]):not([vertical])) {\n background-color: transparent;\n\n a.#{$prefix}--tabs__nav-link {\n border-block-end: $tab-underline-color-hover;\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-tab[icon-only]:hover),\n:host(#{$prefix}-tab.#{$prefix}--tabs__nav-item--icon-only:hover) {\n box-shadow: none;\n}\n\n:host(#{$prefix}-tabs[type='contained'])\n .#{$prefix}--tabs-nav-content-container {\n block-size: layout.size('height');\n}\n\n:host(#{$prefix}-tab[type='contained']) {\n background-color: $layer-accent-01;\n\n a.#{$prefix}--tabs__nav-link {\n padding: $spacing-03 $spacing-05;\n block-size: layout.size('height');\n // height - vertical padding\n line-height: calc(#{layout.size('height')} - (#{$spacing-03} * 2));\n }\n}\n\n:host(#{$prefix}-tab[type='contained']),\n:host(#{$prefix}-tab[type='contained']:hover) {\n a.#{$prefix}--tabs__nav-link {\n border-block-end: none;\n // Draws the border without affecting the inner-content\n box-shadow: rem(-1px) 0 0 0 $border-strong;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][hide-divider])\n a.#{$prefix}--tabs__nav-link {\n box-shadow: rem(-1px) 0 0 0 transparent;\n}\n\n// `[role]` is only for specificity.\n// We have `:not()` usage in the corresponding Carbon core style\n// which puts specificity of \"specific\" scenario though the style is for \"regular\" scenario\n:host(#{$prefix}-tab[disabled][role]),\n:host(#{$prefix}-tab[disabled][role]:hover) {\n background-color: transparent;\n box-shadow: none;\n cursor: not-allowed;\n outline: none;\n\n .#{$prefix}--tabs__nav-link {\n border-block-end: $tab-underline-color;\n color: $tab-text-disabled;\n outline: none;\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-tab[type='contained'][disabled][role])\n .#{$prefix}--tabs__nav-link {\n background-color: $button-disabled;\n border-block-end: none;\n color: $text-on-color-disabled;\n}\n\n:host(#{$prefix}-tab[type='contained'][selected]),\n:host(#{$prefix}-tab[type='contained'][selected]:hover) {\n background-color: $layer-01;\n\n .#{$prefix}--tabs__nav-link {\n border-block-end: none;\n // Draws the border without affecting the inner-content\n box-shadow: inset 0 $spacing-01 0 0 $interactive;\n // height - vertical padding\n line-height: calc(#{layout.size('height')} - (#{$spacing-03} * 2));\n }\n\n .#{$prefix}--tabs__nav-link:focus,\n .#{$prefix}--tabs__nav-link:active {\n box-shadow: none;\n }\n}\n\n:host(#{$prefix}-tab[type='contained']:hover) {\n background-color: $layer-accent-01;\n}\n:host(#{$prefix}-tab[type='contained']) {\n .#{$prefix}--tabs__nav-link:hover {\n background-color: $layer-accent-hover;\n }\n}\n\n// Disabled tab never gets selected, but we guard for manual addition of `selected` attribute\n:host(#{$prefix}-tab[disabled][selected]),\n:host(#{$prefix}-tab[disabled][selected]:hover),\n:host(#{$prefix}-tab[disabled][in-focus][selected]),\n:host(#{$prefix}-tab[disabled][in-focus][selected]:hover) {\n display: flex;\n background-color: transparent;\n box-shadow: none;\n\n @include focus-outline('reset');\n\n .#{$prefix}--tabs__nav-link {\n @include type-style('body-short-01');\n\n border-block-end: $tab-underline-color;\n\n color: $tab-text-disabled;\n\n &:focus,\n &:active {\n border-block-end-width: 3px;\n }\n }\n}\n\n:host(#{$prefix}-tabs-skeleton) .#{$prefix}--tabs-trigger {\n @include skeleton;\n\n inline-size: rem(100px);\n}\n\n:host(#{$prefix}-tab-skeleton) {\n margin-inline-start: $spacing-01;\n\n .#{$prefix}--tabs__nav-link {\n @include skeleton;\n\n display: flex;\n align-items: center;\n padding: 0 layout.density('padding-inline');\n background-color: transparent;\n block-size: 100%;\n border-block-end: 2px solid $skeleton-element;\n inline-size: 10rem;\n\n &::before {\n display: none;\n content: none;\n }\n }\n\n .#{$prefix}--tabs__nav-item {\n @include reset;\n\n position: relative;\n display: flex;\n flex: 1 0 auto;\n padding: 0;\n cursor: pointer;\n transition: background-color $duration-fast-01 motion(standard, productive);\n }\n\n span {\n @include skeleton;\n\n display: block;\n block-size: convert.to-rem(14px);\n inline-size: 100%;\n }\n}\n\n:host(#{$prefix}-tab-skeleton) {\n @extend .#{$prefix}--tabs__nav-item;\n}\n\n:host(#{$prefix}-tabs-skeleton) {\n @extend .#{$prefix}--tabs;\n @extend .#{$prefix}--skeleton;\n}\n\n:host(#{$prefix}-tabs-skeleton[contained]) {\n @extend .#{$prefix}--tabs--contained;\n}\n\n:host(#{$prefix}-tab-skeleton:first-of-type) {\n margin-inline-start: 0;\n}\n\n// Windows HCM fix\n:host(#{$prefix}-tab[selected]) .#{$prefix}--tabs__nav-link {\n @include high-contrast-mode {\n background-color: SelectedItem;\n }\n}\n\n:host(#{$prefix}-tab[vertical]) .#{$prefix}--tabs__nav-link {\n display: flex;\n align-items: center;\n border-block-end: 1px solid $border-subtle;\n}\n\n:host(#{$prefix}-tab[vertical][selected]) .#{$prefix}--tabs__nav-link {\n border-block-end: 1px solid $border-subtle;\n}\n\n:host(#{$prefix}-tab[vertical][disabled]) .#{$prefix}--tabs__nav-link {\n border-block-end: 1px solid $border-subtle;\n}\n\n//-----------------------------\n// Vertical Tabs Wrapper\n//-----------------------------\n\n:host(#{$prefix}-tabs-vertical) {\n @include emit-layout-tokens();\n @include layout.use('density', $default: 'normal');\n\n grid-column: span 2;\n max-block-size: none;\n\n &.#{$prefix}--css-grid {\n box-shadow: inset -1px 0 $border-subtle;\n }\n\n ::slotted(#{$prefix}-tabs) {\n grid-column: span 2;\n\n @include breakpoint(lg) {\n grid-column: span 4;\n }\n }\n\n // Shadow-DOM wrapper for the panel slot — styled directly (no ::slotted needed)\n .#{$prefix}-panel-container {\n @include update_fields_on_layer;\n\n background: $layer;\n grid-column: 3 / -1;\n overflow-y: auto;\n\n @include breakpoint(lg) {\n grid-column: 5 / -1;\n }\n }\n}\n\n// Slotted tab panel divs — match React's cds-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[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":""}
|
|
@@ -10,9 +10,9 @@ import { carbonElement } from "../../globals/decorators/carbon-element.js";
|
|
|
10
10
|
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
|
|
11
11
|
import iconLoader from "../../globals/internal/icon-loader.js";
|
|
12
12
|
import link_default from "../link/link.js";
|
|
13
|
+
import { isFeatureFlagEnabled } from "../feature-flags/index.js";
|
|
13
14
|
import "../../globals/shared-enums.js";
|
|
14
15
|
import tile_default from "./tile.scss.js";
|
|
15
|
-
import { isFeatureFlagEnabled } from "../feature-flags/index.js";
|
|
16
16
|
import { html } from "lit";
|
|
17
17
|
import { property } from "lit/decorators.js";
|
|
18
18
|
import { classMap } from "lit/directives/class-map.js";
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
|
|
8
8
|
import { css } from "lit";
|
|
9
9
|
//#region src/components/tile/tile.scss?lit
|
|
10
|
-
var tile_default = css([".cds-custom--link,:host(cds-custom-tile) ::slotted(.cds-custom--link){box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds-custom--link *,.cds-custom--link :after,.cds-custom--link :before,:host(cds-custom-tile) ::slotted(.cds-custom--link) *,:host(cds-custom-tile) ::slotted(.cds-custom--link) :after,:host(cds-custom-tile) ::slotted(.cds-custom--link) :before{box-sizing:inherit}.cds-custom--link,:host(cds-custom-tile) ::slotted(.cds-custom--link){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:inline;color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe));outline:none;text-decoration:none;transition:color 70ms cubic-bezier(.2,0,.38,.9)}.cds-custom--link:hover,:host(cds-custom-tile) :hover::slotted(.cds-custom--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce));text-decoration:underline}.cds-custom--link:active:not(.cds-custom--link--disabled),.cds-custom--link:active:visited,.cds-custom--link:active:visited:hover,:host(cds-custom-tile) :active:not(.cds-custom--link--disabled)::slotted(.cds-custom--link),:host(cds-custom-tile) :active:visited::slotted(.cds-custom--link){outline:1px solid var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds-custom--link:active:not(.cds-custom--link--disabled),.cds-custom--link:active:visited,.cds-custom--link:active:visited:hover,:host(cds-custom-tile) :active:not(.cds-custom--link--disabled)::slotted(.cds-custom--link),:host(cds-custom-tile) :active:visited::slotted(.cds-custom--link){outline-style:dotted}}.cds-custom--link:active:not(.cds-custom--link--disabled),.cds-custom--link:active:visited,.cds-custom--link:active:visited:hover,:host(cds-custom-tile) :active:not(.cds-custom--link--disabled)::slotted(.cds-custom--link),:host(cds-custom-tile) :active:visited::slotted(.cds-custom--link){color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe));outline-color:var(--cds-link-focus-text-color,var(--cds-focus,#0f62fe));text-decoration:underline}.cds-custom--link:focus:not(.cds-custom--link--disabled),:host(cds-custom-tile) :focus:not(.cds-custom--link--disabled)::slotted(.cds-custom--link){outline:1px solid var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds-custom--link:focus:not(.cds-custom--link--disabled),:host(cds-custom-tile) :focus:not(.cds-custom--link--disabled)::slotted(.cds-custom--link){outline-style:dotted}}.cds-custom--link:focus:not(.cds-custom--link--disabled),:host(cds-custom-tile) :focus:not(.cds-custom--link--disabled)::slotted(.cds-custom--link){outline-color:var(--cds-link-focus-text-color,var(--cds-focus,#0f62fe));text-decoration:underline}.cds-custom--link:visited,:host(cds-custom-tile) :visited::slotted(.cds-custom--link){color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe))}.cds-custom--link:visited:hover,:host(cds-custom-tile) :visited:hover::slotted(.cds-custom--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce))}.cds-custom--link--disabled,.cds-custom--link--disabled:hover{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds-custom--link--disabled *,.cds-custom--link--disabled :after,.cds-custom--link--disabled :before,.cds-custom--link--disabled:hover *,.cds-custom--link--disabled:hover :after,.cds-custom--link--disabled:hover :before{box-sizing:inherit}.cds-custom--link--disabled,.cds-custom--link--disabled:hover{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);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;font-weight:400;text-decoration:none}.cds-custom--link.cds-custom--link--visited,.cds-custom--link.cds-custom--link--visited:visited,:host(cds-custom-tile) .cds-custom--link--visited::slotted(.cds-custom--link){color:var(--cds-link-visited-text-color,var(--cds-link-visited,#8a3ffc))}.cds-custom--link.cds-custom--link--visited:hover,.cds-custom--link.cds-custom--link--visited:visited:hover,:host(cds-custom-tile) .cds-custom--link--visited:hover::slotted(.cds-custom--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce))}.cds-custom--link.cds-custom--link--inline,:host(cds-custom-tile) .cds-custom--link--inline::slotted(.cds-custom--link){display:inline;text-decoration:underline}.cds-custom--link--disabled.cds-custom--link--inline{text-decoration:underline}.cds-custom--link--sm,.cds-custom--link--sm.cds-custom--link--disabled:hover{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)}.cds-custom--link--lg,.cds-custom--link--lg.cds-custom--link--disabled:hover{font-size:var(--cds-body-compact-02-font-size,1rem);font-weight:var(--cds-body-compact-02-font-weight,400);line-height:var(--cds-body-compact-02-line-height,1.375);letter-spacing:var(--cds-body-compact-02-letter-spacing,0)}.cds-custom--link__icon{display:inline-flex;align-items:center;block-size:1lh;line-height:inherit;margin-inline-start:.5rem;vertical-align:text-bottom}.cds-custom--link--lg .cds-custom--link__icon>svg{block-size:1.25rem;inline-size:1.25rem}.cds-custom--link--lg .cds-custom--link__icon{block-size:1.25rem}.cds-custom--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-custom--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-custom--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-custom--layer-one.cds-custom--layer__with-background,.cds-custom--layer-three.cds-custom--layer__with-background,.cds-custom--layer-two.cds-custom--layer__with-background{background-color:var(--cds-layer-background)}.cds-custom--assistive-text,.cds-custom--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-custom--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--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}.cds-custom--tile-group html,:host(cds-custom-tile-group) html{font-size:100%}.cds-custom--tile-group body,:host(cds-custom-tile-group) 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-custom--tile-group code,:host(cds-custom-tile-group) code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds-custom--tile-group strong,:host(cds-custom-tile-group) strong{font-weight:600}.cds-custom--tile,:host(cds-custom-expandable-tile),:host(cds-custom-tile){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);--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:block;padding:var(--cds-layout-density-padding-inline-local);background-color:var(--cds-layer);min-block-size:4rem;min-inline-size:8rem;outline:2px solid transparent;outline-offset:-2px}.cds-custom--tile:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--tile:focus{outline-style:dotted}}.cds-custom--tile--light,:host(cds-custom-expandable-tile[color-scheme=light]),:host(cds-custom-tile[color-scheme=light]){background-color:var(--cds-layer-02,#fff)}.cds-custom--tile--clickable,.cds-custom--tile--selectable,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds-custom--tile--clickable *,.cds-custom--tile--clickable :after,.cds-custom--tile--clickable :before,.cds-custom--tile--selectable *,.cds-custom--tile--selectable :after,.cds-custom--tile--selectable :before,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable *,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable :after,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable :before{box-sizing:inherit}.cds-custom--tile--clickable,.cds-custom--tile--selectable,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable{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);padding:var(--cds-layout-density-padding-inline-local);cursor:pointer;transition:.15s cubic-bezier(.2,0,.38,.9)}.cds-custom--tile--clickable:hover,.cds-custom--tile--selectable:hover{background:var(--cds-layer-hover)}.cds-custom--tile--clickable,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable{color:var(--cds-text-primary,#161616);text-decoration:none}.cds-custom--tile--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--tile--clickable:focus{outline-style:dotted}}.cds-custom--tile--clickable:focus{text-decoration:none}.cds-custom--tile--clickable:focus .cds-custom--tile__checkmark,.cds-custom--tile--clickable:hover .cds-custom--tile__checkmark{opacity:1}.cds-custom--tile--expandable::-moz-focus-inner{border:0}.cds-custom--tile--clickable:active,.cds-custom--tile--clickable:hover,.cds-custom--tile--clickable:visited,.cds-custom--tile--clickable:visited:hover{color:var(--cds-text-primary,#161616);text-decoration:none}.cds-custom--tile--clickable.cds-custom--link--disabled,.cds-custom--tile--clickable:hover.cds-custom--link--disabled{display:block;padding:var(--cds-layout-density-padding-inline-local);background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds-custom--tile--clickable .cds-custom--tile--icon,.cds-custom--tile--clickable.cds-custom--link--disabled .cds-custom--tile--disabled-icon,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable ::slotted([slot=icon]){position:absolute;block-size:1.25rem;inline-size:1.25rem;inset-block-end:.75rem;inset-inline-end:.75rem}.cds-custom--tile--clickable .cds-custom--tile--icon,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable ::slotted([slot=icon]){fill:var(--cds-icon-interactive,#0f62fe)}.cds-custom--tile--clickable.cds-custom--link--disabled .cds-custom--tile--disabled-icon{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds-custom--tile--clickable.cds-custom--link--disabled .cds-custom--tile--icon,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable.cds-custom--link--disabled ::slotted([slot=icon]){display:none}.cds-custom--tile--selectable{border:1px solid transparent;padding-inline-end:calc(var(--cds-layout-density-padding-inline-local)*2 + 1rem)}.cds-custom--tile__checkmark{position:absolute;border:none;background:transparent;block-size:1rem;inset-block-start:var(--cds-layout-density-padding-inline-local);inset-inline-end:var(--cds-layout-density-padding-inline-local);transition:.11s cubic-bezier(.2,0,.38,.9);opacity:0}.cds-custom--tile__checkmark svg{border-radius:50%;fill:var(--cds-icon-secondary,#525252)}.cds-custom--tile__checkmark:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--tile__checkmark:focus{outline-style:dotted}}.cds-custom--tile__checkmark--persistent{opacity:1}.cds-custom--tile__chevron,:host(cds-custom-selectable-tile) .cds-custom--tile__chevron{position:absolute;display:flex;align-items:center;justify-content:center;block-size:calc(var(--cds-layout-density-padding-inline-local)*2 + 1rem);inline-size:calc(var(--cds-layout-density-padding-inline-local)*2 + 1rem);inset-block-end:0;inset-inline-end:0}.cds-custom--tile__chevron svg,:host(cds-custom-selectable-tile) .cds-custom--tile__chevron svg{fill:var(--cds-icon-primary,#161616);transform-origin:center;transition:.11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds-custom--tile__chevron svg,:host(cds-custom-selectable-tile) .cds-custom--tile__chevron svg{transition:none}}.cds-custom--tile__chevron--interactive{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-custom--tile__chevron--interactive *,.cds-custom--tile__chevron--interactive :after,.cds-custom--tile__chevron--interactive :before{box-sizing:inherit}.cds-custom--tile__chevron--interactive::-moz-focus-inner{border:0}.cds-custom--tile__chevron--interactive{position:absolute;display:flex;align-items:center;justify-content:center;block-size:calc(var(--cds-layout-density-padding-inline-local)*2 + 1rem);inline-size:calc(var(--cds-layout-density-padding-inline-local)*2 + 1rem);inset-block-end:0;inset-inline-end:0}.cds-custom--tile__chevron--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}.cds-custom--tile__chevron--interactive:hover{background-color:var(--cds-layer-hover);cursor:pointer}.cds-custom--tile--expandable,:host(cds-custom-expandable-tile){position:relative;overflow:hidden;border:0;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;inline-size:100%;text-align:start;transition:max-height .15s cubic-bezier(.2,0,.38,.9);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)}.cds-custom--tile--expandable:hover{background:var(--cds-layer-hover)}.cds-custom--tile--expandable.cds-custom--tile--expandable--interactive{border:none;cursor:default;transition:max-height .15s cubic-bezier(.2,0,.38,.9)}.cds-custom--tile--expandable.cds-custom--tile--expandable--interactive:hover{background-color:var(--cds-layer)}.cds-custom--tile--expandable.cds-custom--tile--expandable--interactive:focus{outline:none}.cds-custom--tile--expandable--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--tile--expandable--interactive:focus{outline-style:dotted}}.cds-custom--tile-content__below-the-fold,:host(cds-custom-expandable-tile) ::slotted(cds-custom-tile-below-the-fold-content){display:block;opacity:0;transition:opacity .11s cubic-bezier(.2,0,.38,.9),visibility .11s cubic-bezier(.2,0,.38,.9);visibility:hidden}.cds-custom--tile--is-expanded,:host(cds-custom-expandable-tile[expanded]){overflow:visible;transition:max-height .11s cubic-bezier(.2,0,.38,.9)}.cds-custom--tile--is-expanded .cds-custom--tile__chevron svg,:host(cds-custom-expandable-tile[expanded]) .cds-custom--tile__chevron svg{transform:rotate(180deg)}.cds-custom--tile--is-expanded .cds-custom--tile-content__below-the-fold,:host(cds-custom-expandable-tile) .cds-custom--tile--is-expanded ::slotted(cds-custom-tile-below-the-fold-content),:host(cds-custom-expandable-tile[expanded]) .cds-custom--tile-content__below-the-fold,:host(cds-custom-expandable-tile[expanded]):host(cds-custom-expandable-tile) ::slotted(cds-custom-tile-below-the-fold-content){opacity:1;transition:opacity .11s cubic-bezier(.2,0,.38,.9),visibility .11s cubic-bezier(.2,0,.38,.9);visibility:inherit}@supports (hanging-punctuation:first) and (font:-apple-system-body) and (-webkit-appearance:none){.cds-custom--tile--is-expanded .cds-custom--tile-content__below-the-fold,:host(cds-custom-expandable-tile) .cds-custom--tile--is-expanded ::slotted(cds-custom-tile-below-the-fold-content),:host(cds-custom-expandable-tile[expanded]) .cds-custom--tile-content__below-the-fold,:host(cds-custom-expandable-tile[expanded]):host(cds-custom-expandable-tile) ::slotted(cds-custom-tile-below-the-fold-content){overflow-y:auto}}.cds-custom--tile--is-selected{border:1px solid var(--cds-layer-selected-inverse,#161616)}.cds-custom--tile--is-selected .cds-custom--tile__checkmark{opacity:1}.cds-custom--tile--is-selected .cds-custom--tile__checkmark svg{fill:var(--cds-icon-primary,#161616)}.cds-custom--tile-content{block-size:100%;inline-size:100%}.cds-custom--tile-input{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-custom--tile-input:focus+.cds-custom--tile,.cds-custom--tile-input:focus+:host(cds-custom-expandable-tile),.cds-custom--tile-input:focus+:host(cds-custom-tile){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--tile-input:focus+.cds-custom--tile,.cds-custom--tile-input:focus+:host(cds-custom-expandable-tile),.cds-custom--tile-input:focus+:host(cds-custom-tile){outline-style:dotted}}.cds-custom--tile--disabled.cds-custom--tile--selectable{background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds-custom--tile--disabled.cds-custom--tile--selectable.cds-custom--tile--light{background-color:var(--cds-layer-02,#fff)}.cds-custom--tile--disabled.cds-custom--tile--is-selected{border-color:var(--cds-border-disabled,#c6c6c6)}.cds-custom--tile--disabled .cds-custom--tile__checkmark svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds-custom--tile--clickable .cds-custom--tile--ai-label-icon,.cds-custom--tile--expandable>div>.cds-custom--ai-label,.cds-custom--tile--expandable>div>.cds-custom--slug,.cds-custom--tile--expandable>div>.cds-custom--tile--inner-decorator>*,.cds-custom--tile>.cds-custom--ai-label,.cds-custom--tile>.cds-custom--slug,.cds-custom--tile>.cds-custom--tile--inner-decorator>*,:host(cds-custom-expandable-tile)>.cds-custom--ai-label,:host(cds-custom-expandable-tile)>.cds-custom--slug,:host(cds-custom-expandable-tile)>.cds-custom--tile--inner-decorator>*,:host(cds-custom-expandable-tile)>div>.cds-custom--ai-label,:host(cds-custom-expandable-tile)>div>.cds-custom--slug,:host(cds-custom-expandable-tile)>div>.cds-custom--tile--inner-decorator>*,:host(cds-custom-tile)>.cds-custom--ai-label,:host(cds-custom-tile)>.cds-custom--slug,:host(cds-custom-tile)>.cds-custom--tile--inner-decorator>*{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}.cds-custom--tile.cds-custom--tile--selectable>.cds-custom--ai-label,.cds-custom--tile.cds-custom--tile--selectable>.cds-custom--slug,.cds-custom--tile.cds-custom--tile--selectable>.cds-custom--tile--inner-decorator>*{inset-inline-end:2.5rem}.cds-custom--tile.cds-custom--tile--selectable.cds-custom--tile--radio>.cds-custom--ai-label,.cds-custom--tile.cds-custom--tile--selectable.cds-custom--tile--radio>.cds-custom--slug,.cds-custom--tile.cds-custom--tile--selectable.cds-custom--tile--radio>.cds-custom--tile--inner-decorator>*{inset-inline-end:1rem;transition:inset-inline-end .11s cubic-bezier(.2,0,.38,.9);inset-inline-end:2.5rem}.cds-custom--tile.cds-custom--tile--selectable.cds-custom--tile--radio.cds-custom--tile--is-selected>.cds-custom--ai-label,.cds-custom--tile.cds-custom--tile--selectable.cds-custom--tile--radio.cds-custom--tile--is-selected>.cds-custom--slug,.cds-custom--tile.cds-custom--tile--selectable.cds-custom--tile--radio.cds-custom--tile--is-selected>.cds-custom--tile--inner-decorator>*{inset-inline-end:2.5rem}.cds-custom--tile.cds-custom--tile--clickable>.cds-custom--ai-label,.cds-custom--tile.cds-custom--tile--clickable>.cds-custom--slug,.cds-custom--tile.cds-custom--tile--clickable>.cds-custom--tile--inner-decorator>*{pointer-events:none}.cds-custom--tile--decorator:has(.cds-custom--ai-label).cds-custom--tile,.cds-custom--tile--decorator:has(.cds-custom--tile--ai-label-icon).cds-custom--tile,.cds-custom--tile--slug.cds-custom--tile{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box;border:1px solid transparent;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 8px 0 var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds-custom--tile--decorator:has(.cds-custom--ai-label).cds-custom--tile--expandable:hover,.cds-custom--tile--slug.cds-custom--tile--expandable:hover{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box}.cds-custom--tile--decorator.cds-custom--tile--clickable:before,.cds-custom--tile--decorator.cds-custom--tile--selectable:after,.cds-custom--tile--decorator.cds-custom--tile--selectable:before,.cds-custom--tile--slug.cds-custom--tile--clickable:before,.cds-custom--tile--slug.cds-custom--tile--selectable:after,.cds-custom--tile--slug.cds-custom--tile--selectable:before{position:absolute;display:block;block-size:100%;content:\"\";inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:0;transition:opacity .11s cubic-bezier(.2,0,.38,.9)}.cds-custom--tile--decorator:has(.cds-custom--ai-label).cds-custom--tile--clickable:before,.cds-custom--tile--decorator:has(.cds-custom--ai-label).cds-custom--tile--selectable:before,.cds-custom--tile--decorator:has(.cds-custom--tile--ai-label-icon).cds-custom--tile--clickable:before,.cds-custom--tile--slug.cds-custom--tile--clickable:before,.cds-custom--tile--slug.cds-custom--tile--selectable:before{background:linear-gradient(to top,var(--cds-ai-aura-hover-start,rgba(69,137,255,.32)) 0,15%,var(--cds-ai-aura-hover-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 10px 2px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds-custom--tile--decorator.cds-custom--tile--clickable:hover:before,.cds-custom--tile--decorator.cds-custom--tile--selectable:hover:before,.cds-custom--tile--slug.cds-custom--tile--clickable:hover:before,.cds-custom--tile--slug.cds-custom--tile--selectable:hover:before{opacity:1}.cds-custom--tile--decorator.cds-custom--tile--clickable:focus,.cds-custom--tile--decorator.cds-custom--tile--selectable:focus,.cds-custom--tile--slug.cds-custom--tile--clickable:focus,.cds-custom--tile--slug.cds-custom--tile--selectable:focus,.cds-custom--tile-input:focus+.cds-custom--tile--decorator.cds-custom--tile,.cds-custom--tile-input:focus+.cds-custom--tile--slug.cds-custom--tile{outline-offset:-1px}.cds-custom--tile--decorator:has(.cds-custom--tile--inner-decorator .cds-custom--ai-label).cds-custom--tile--selectable:after,.cds-custom--tile--slug.cds-custom--tile--selectable:after{background:linear-gradient(to top,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-border-inverse,#161616),var(--cds-border-inverse,#161616)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 8px 0 var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds-custom--tile--decorator.cds-custom--tile--selectable:hover:after,.cds-custom--tile--slug.cds-custom--tile--selectable:hover:after{opacity:0}.cds-custom--tile--decorator.cds-custom--tile--is-selected:after,.cds-custom--tile--slug.cds-custom--tile--is-selected:after{opacity:1}.cds-custom--tile--decorator:has(.cds-custom--tile--inner-decorator).cds-custom--tile--is-selected,.cds-custom--tile--slug.cds-custom--tile--is-selected{border-color:var(--cds-border-inverse,#161616)}.cds-custom--tile--decorator.cds-custom--tile--clickable .cds-custom--tile-content,.cds-custom--tile--decorator.cds-custom--tile--selectable .cds-custom--tile-content,.cds-custom--tile--slug.cds-custom--tile--clickable .cds-custom--tile-content,.cds-custom--tile--slug.cds-custom--tile--selectable .cds-custom--tile-content{position:relative;cursor:pointer}.cds-custom--tile--decorator.cds-custom--tile--clickable .cds-custom--tile-content,.cds-custom--tile--decorator.cds-custom--tile--is-selected .cds-custom--tile--inner-decorator>*,.cds-custom--tile--decorator.cds-custom--tile--selectable .cds-custom--tile-content,.cds-custom--tile--decorator.cds-custom--tile--selectable>.cds-custom--tile__checkmark,.cds-custom--tile--slug.cds-custom--tile--clickable .cds-custom--tile-content,.cds-custom--tile--slug.cds-custom--tile--is-selected .cds-custom--ai-label,.cds-custom--tile--slug.cds-custom--tile--is-selected .cds-custom--slug,.cds-custom--tile--slug.cds-custom--tile--selectable .cds-custom--tile-content,.cds-custom--tile--slug.cds-custom--tile--selectable>.cds-custom--tile__checkmark{z-index:1}.cds-custom--tile--decorator.cds-custom--tile--selectable .cds-custom--tile--inner-decorator>:has(>.cds-custom--popover--open),.cds-custom--tile--slug.cds-custom--tile--selectable .cds-custom--ai-label:has(>.cds-custom--popover--open),.cds-custom--tile--slug.cds-custom--tile--selectable .cds-custom--slug:has(>.cds-custom--popover--open){z-index:2}.cds-custom--tile--decorator.cds-custom--tile--selectable>.cds-custom--tile--inner-decorator>*,.cds-custom--tile--decorator.cds-custom--tile--selectable>.cds-custom--tile__checkmark,.cds-custom--tile--slug.cds-custom--tile--selectable>.cds-custom--ai-label,.cds-custom--tile--slug.cds-custom--tile--selectable>.cds-custom--slug,.cds-custom--tile--slug.cds-custom--tile--selectable>.cds-custom--tile__checkmark{z-index:1}.cds-custom--tile--expandable:has(.cds-custom--ai-label>.cds-custom--popover--open),.cds-custom--tile--expandable:has(.cds-custom--slug>.cds-custom--popover--open),.cds-custom--tile--expandable:has(.cds-custom--tile--inner-decorator>*>.cds-custom--popover--open),:has(.cds-custom--ai-label>.cds-custom--popover--open):host(cds-custom-expandable-tile),:has(.cds-custom--slug>.cds-custom--popover--open):host(cds-custom-expandable-tile),:has(.cds-custom--tile--inner-decorator>*>.cds-custom--popover--open):host(cds-custom-expandable-tile){overflow:visible}.cds-custom--tile--clickable .cds-custom--tile--ai-label-icon rect{stroke:var(--cds-icon-primary,#161616)}.cds-custom--tile--clickable .cds-custom--tile--ai-label-icon path{fill:var(--cds-icon-primary,#161616)}.cds-custom--tile--decorator-rounded,.cds-custom--tile--decorator-rounded.cds-custom--tile--clickable:before,.cds-custom--tile--decorator-rounded.cds-custom--tile--selectable:after,.cds-custom--tile--decorator-rounded.cds-custom--tile--selectable:before,.cds-custom--tile--slug-rounded,.cds-custom--tile--slug-rounded.cds-custom--tile--clickable:before,.cds-custom--tile--slug-rounded.cds-custom--tile--selectable:after,.cds-custom--tile--slug-rounded.cds-custom--tile--selectable:before,:host(cds-custom-clickable-tile[ai-label][has-rounded-corners]),:host(cds-custom-expandable-tile[ai-label][has-rounded-corners]),:host(cds-custom-radio-tile[ai-label][has-rounded-corners]),:host(cds-custom-selectable-tile[ai-label][has-rounded-corners]),:host(cds-custom-tile[ai-label][has-rounded-corners]){border-radius:.5rem}.cds-custom--tile--decorator-rounded .cds-custom--tile__chevron,.cds-custom--tile--slug-rounded .cds-custom--tile__chevron,:host(cds-custom-clickable-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-expandable-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-radio-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-selectable-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron{border-end-end-radius:.5rem}@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--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-custom--fieldset{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds-custom--fieldset *,.cds-custom--fieldset :after,.cds-custom--fieldset :before{box-sizing:inherit}.cds-custom--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-custom--label html{font-size:100%}.cds-custom--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-custom--label code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds-custom--label strong{font-weight:600}.cds-custom--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-custom--label,.cds-custom--label .cds-custom--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds-custom--label .cds-custom--toggletip-label{font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333)}.cds-custom--label--no-margin{margin-block-end:0}.cds-custom--label+.cds-custom--tooltip{position:relative;inset-block-start:.2rem;inset-inline-start:.5rem}.cds-custom--label+.cds-custom--tooltip .cds-custom--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-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger *,.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger :after,.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger :before{box-sizing:inherit}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger::-moz-focus-inner{border:0}.cds-custom--label+.cds-custom--tooltip .cds-custom--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-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds-custom--label+.cds-custom--toggletip{inset-block-start:.2rem;inset-inline-start:.5rem}.cds-custom--label.cds-custom--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none}.cds-custom--label.cds-custom--skeleton:active,.cds-custom--label.cds-custom--skeleton:focus,.cds-custom--label.cds-custom--skeleton:hover{border:none;cursor:default;outline:none}.cds-custom--label.cds-custom--skeleton:before{position:absolute;animation:cds-custom--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-custom--label.cds-custom--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--label.cds-custom--skeleton{background:CanvasText}.cds-custom--label.cds-custom--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds-custom--label.cds-custom--skeleton{block-size:.875rem;inline-size:4.6875rem}input[type=number],input[type=text].cds-custom--number{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif}.cds-custom--combo-box[data-invalid]:not(.cds-custom--multi-select--selected) .cds-custom--text-input:not(:focus),.cds-custom--list-box[data-invalid]:not(.cds-custom--multi-select--invalid--focused,.cds-custom--combo-box--invalid--focused),.cds-custom--number[data-invalid] input[type=number]:not(:focus),.cds-custom--number[data-invalid] input[type=text]:not(:focus),.cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input:not(:focus),.cds-custom--text-area__wrapper[data-invalid]>.cds-custom--text-area--invalid:not(:focus),.cds-custom--text-input__field-wrapper[data-invalid]>.cds-custom--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-custom--combo-box[data-invalid]:not(.cds-custom--multi-select--selected) .cds-custom--text-input:not(:focus),.cds-custom--list-box[data-invalid]:not(.cds-custom--multi-select--invalid--focused,.cds-custom--combo-box--invalid--focused),.cds-custom--number[data-invalid] input[type=number]:not(:focus),.cds-custom--number[data-invalid] input[type=text]:not(:focus),.cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input:not(:focus),.cds-custom--text-area__wrapper[data-invalid]>.cds-custom--text-area--invalid:not(:focus),.cds-custom--text-input__field-wrapper[data-invalid]>.cds-custom--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds-custom--date-picker-input__wrapper--invalid~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper--warn~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper~.cds-custom--form-requirement,.cds-custom--list-box--warning~.cds-custom--form-requirement,.cds-custom--list-box[data-invalid]~.cds-custom--form-requirement,.cds-custom--number[data-invalid] .cds-custom--number__input-wrapper~.cds-custom--form-requirement,.cds-custom--number__input-wrapper--warning~.cds-custom--form-requirement,.cds-custom--select--warning .cds-custom--select-input__wrapper~.cds-custom--form-requirement,.cds-custom--select-input__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-area__wrapper--warn~.cds-custom--form-requirement,.cds-custom--text-area__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper--warning>.cds-custom--text-input~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper--warning~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--time-picker--invalid~.cds-custom--form-requirement,.cds-custom--time-picker--warning~.cds-custom--form-requirement,.cds-custom--time-picker[data-invalid]~.cds-custom--form-requirement,input[data-invalid]~.cds-custom--form-requirement{display:block;overflow:visible;font-weight:400;max-block-size:12.5rem}.cds-custom--select--inline.cds-custom--select--warning .cds-custom--select-input--inline__wrapper~.cds-custom--form-requirement,.cds-custom--select-input--inline__wrapper[data-invalid]~.cds-custom--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-custom--date-picker-input__wrapper--invalid~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper~.cds-custom--form-requirement,.cds-custom--list-box[data-invalid]~.cds-custom--form-requirement,.cds-custom--number[data-invalid] .cds-custom--number__input-wrapper~.cds-custom--form-requirement,.cds-custom--select-input--inline__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--select-input__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-area__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--time-picker--invalid~.cds-custom--form-requirement,.cds-custom--time-picker[data-invalid]~.cds-custom--form-requirement,input[data-invalid]~.cds-custom--form-requirement{color:var(--cds-text-error,#da1e28)}.cds-custom--form--fluid .cds-custom--text-input__field-wrapper--warning,.cds-custom--form--fluid .cds-custom--text-input__field-wrapper[data-invalid]{display:block}.cds-custom--form--fluid input[data-invalid]{outline:none}.cds-custom--form--fluid .cds-custom--form-requirement{padding:.5rem 2.5rem .5rem 1rem;margin:0}input:not(output,[data-invalid]):-moz-ui-invalid{box-shadow:none}.cds-custom--form-requirement html{font-size:100%}.cds-custom--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-custom--form-requirement code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds-custom--form-requirement strong{font-weight:600}.cds-custom--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-custom--select--inline .cds-custom--form__helper-text{margin-block-start:0}.cds-custom--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-custom--form__helper-text--disabled,.cds-custom--label--disabled,fieldset[disabled] .cds-custom--form__helper-text,fieldset[disabled] .cds-custom--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}:host(cds-custom-tile){--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}:host(cds-custom-tile-group){background:transparent}:host(cds-custom-tile-group) fieldset{border:none}:host(cds-custom-clickable-tile){--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:grid;outline:none}:host(cds-custom-clickable-tile) .cds-custom--link--disabled{display:block;padding:density(\"padding-inline\");background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}:host(cds-custom-clickable-tile) .cds-custom--tile,:host(cds-custom-clickable-tile) :host(cds-custom-expandable-tile),:host(cds-custom-clickable-tile) :host(cds-custom-tile){padding:1rem;outline:.125rem solid transparent}:host(cds-custom-clickable-tile) .cds-custom--tile--clickable{display:block;transition:.15s cubic-bezier(.2,0,.38,.9)}:host(cds-custom-clickable-tile) .cds-custom--tile--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-custom-clickable-tile) .cds-custom--tile--clickable:focus{outline-style:dotted}}:host(cds-custom-clickable-tile) .cds-custom--link__icon{display:block}:host(cds-custom-clickable-tile) ::slotted([slot=ai-label]),:host(cds-custom-clickable-tile) ::slotted([slot=slug]){pointer-events:none}:host(cds-custom-radio-tile){--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;position:relative;display:block;margin-block-end:.5rem;outline:none}:host(cds-custom-radio-tile) .cds-custom--tile,:host(cds-custom-radio-tile) :host(cds-custom-expandable-tile),:host(cds-custom-radio-tile) :host(cds-custom-tile){block-size:100%}:host(cds-custom-selectable-tile){--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;position:relative;display:block;outline:none}:host(cds-custom-selectable-tile) .cds-custom--tile,:host(cds-custom-selectable-tile) :host(cds-custom-expandable-tile),:host(cds-custom-selectable-tile) :host(cds-custom-tile){block-size:100%}:host(cds-custom-radio-tile) .cds-custom--tile-input:checked~.cds-custom--tile--selectable .cds-custom--tile__checkmark,:host(cds-custom-selectable-tile) .cds-custom--tile-input:checked~.cds-custom--tile--selectable .cds-custom--tile__checkmark{opacity:1}:host(cds-custom-radio-tile[enable-v12-tile-radio-icons]) .cds-custom--tile__checkmark{opacity:1}:host(cds-custom-radio-tile[enable-v12-tile-radio-icons]) ::slotted([slot=ai-label]){inset-inline-end:2.5rem}:host(cds-custom-clickable-tile) ::slotted(*),:host(cds-custom-radio-tile) ::slotted(:not([slot])),:host(cds-custom-selectable-tile) ::slotted(:not([slot])){position:relative;z-index:1;cursor:pointer}:host(cds-custom-expandable-tile){--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}:host(cds-custom-expandable-tile) ::slotted(cds-custom-tile-above-the-fold-content){display:block}:host(cds-custom-expandable-tile) .cds-custom-ce--expandable-tile--below-the-fold-content{max-block-size:0;transition:max-height .11s cubic-bezier(.2,0,.38,.9)}:host(cds-custom-expandable-tile[expanded]) ::slotted(cds-custom-tile-below-the-fold-content){opacity:1;transition:.11s cubic-bezier(.2,0,.38,.9);visibility:visible}:host(cds-custom-expandable-tile[with-interactive]){cursor:default;transition:max-height .15s cubic-bezier(.2,0,.38,.9)}:host(cds-custom-expandable-tile[with-interactive]):hover{background-color:var(--cds-layer)}:host(cds-custom-expandable-tile[with-interactive]):focus{outline:none}:host(cds-custom-expandable-tile:not([with-interactive]):focus-within){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-custom-expandable-tile:not([with-interactive]):focus-within){outline-style:dotted}}:host(cds-custom-expandable-tile:not([with-interactive])) .cds-custom--tile__chevron{border:none;background:none;cursor:pointer;outline:none}:host(cds-custom-clickable-tile[ai-label]) .cds-custom--tile,:host(cds-custom-clickable-tile[ai-label]) :host(cds-custom-expandable-tile),:host(cds-custom-clickable-tile[ai-label]) :host(cds-custom-tile),:host(cds-custom-expandable-tile[ai-label]),:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile,:host(cds-custom-radio-tile[ai-label]) :host(cds-custom-expandable-tile),:host(cds-custom-radio-tile[ai-label]) :host(cds-custom-tile),:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile,:host(cds-custom-selectable-tile[ai-label]) :host(cds-custom-expandable-tile),:host(cds-custom-selectable-tile[ai-label]) :host(cds-custom-tile),:host(cds-custom-tile[ai-label]){background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box;border:1px solid transparent;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 24px 40px -24px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}:host(cds-custom-clickable-tile) ::slotted([slot=ai-label]),:host(cds-custom-clickable-tile) ::slotted([slot=decorator]),:host(cds-custom-clickable-tile) ::slotted([slot=slug]),:host(cds-custom-expandable-tile) ::slotted([slot=ai-label]),:host(cds-custom-expandable-tile) ::slotted([slot=decorator]),:host(cds-custom-expandable-tile) ::slotted([slot=slug]),:host(cds-custom-radio-tile) ::slotted([slot=ai-label]),:host(cds-custom-radio-tile) ::slotted([slot=decorator]),:host(cds-custom-radio-tile) ::slotted([slot=slug]),:host(cds-custom-selectable-tile) ::slotted([slot=ai-label]),:host(cds-custom-selectable-tile) ::slotted([slot=decorator]),:host(cds-custom-selectable-tile) ::slotted([slot=slug]),:host(cds-custom-tile) ::slotted([slot=ai-label]),:host(cds-custom-tile) ::slotted([slot=decorator]),:host(cds-custom-tile) ::slotted([slot=slug]){position:absolute;inset-block-start:1rem;inset-inline-end:1rem}:host(cds-custom-radio-tile[selected]) ::slotted([slot=ai-label]),:host(cds-custom-radio-tile[selected]) ::slotted([slot=decorator]),:host(cds-custom-selectable-tile) ::slotted([slot=ai-label]),:host(cds-custom-selectable-tile) ::slotted([slot=decorator]),:host(cds-custom-selectable-tile) ::slotted([slot=slug]){inset-inline-end:2.5rem;transition:inset-inline-end .11s cubic-bezier(.2,0,.38,.9)}:host(cds-custom-expandable-tile[ai-label]):hover{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box}:host(cds-custom-clickable-tile[ai-label]) .cds-custom--tile:before,:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile:after,:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile:before,:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile:after,:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile:before{position:absolute;display:block;block-size:100%;content:\"\";inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:0;transition:opacity .11s cubic-bezier(.2,0,.38,.9)}:host(cds-custom-clickable-tile[ai-label]) .cds-custom--tile:before,:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile:before,:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile:before{background:linear-gradient(to top,var(--cds-ai-aura-hover-start,rgba(69,137,255,.32)) 0,15%,var(--cds-ai-aura-hover-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1))}:host(cds-custom-clickable-tile[ai-label]) .cds-custom--tile:hover:before,:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile:hover:before,:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile:hover:before{opacity:1}:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile--is-selected,:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile--is-selected{border:1px solid var(--cds-layer-selected-inverse,#161616)}:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile--is-selected .cds-custom--tile__checkmark,:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile--is-selected .cds-custom--tile__checkmark{z-index:1}:host(cds-custom-radio-tile[ai-label]),:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile--is-selected:after{background:linear-gradient(to top,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-border-inverse,#161616),var(--cds-border-inverse,#161616)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1))}:host(cds-custom-expandable-tile[ai-label]){overflow:visible}:host(cds-custom-clickable-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-expandable-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-radio-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-selectable-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron{border-end-end-radius:.5rem}:host(cds-custom-clickable-tile[enable-tile-contrast]) .cds-custom--tile--clickable{box-sizing:border-box;border:1px solid var(--cds-border-tile)}:host(cds-custom-clickable-tile[enable-tile-contrast]) .cds-custom--link--disabled{box-sizing:border-box;border:1px solid var(--cds-border-disabled,#c6c6c6)}:host(cds-custom-selectable-tile[enable-tile-contrast]) .cds-custom--tile--selectable{border:1px solid var(--cds-border-tile)}:host(cds-custom-selectable-tile[enable-tile-contrast]) .cds-custom--tile--is-selected{border:1px solid var(--cds-layer-selected-inverse,#161616)}:host(cds-custom-selectable-tile[enable-tile-contrast]) .cds-custom--tile--disabled{border:1px solid var(--cds-border-disabled,#c6c6c6)}:host(cds-custom-expandable-tile[enable-tile-contrast]) .cds-custom--tile__chevron--interactive{border:1px solid var(--cds-border-disabled,#c6c6c6)}:host(cds-custom-expandable-tile[enable-tile-contrast]:not([with-interactive])){border:1px solid var(--cds-border-tile)}:host(cds-custom-radio-tile[enable-tile-contrast]) .cds-custom--tile--selectable{box-sizing:border-box;border:1px solid var(--cds-border-tile)}:host(cds-custom-radio-tile[enable-tile-contrast]) .cds-custom--tile--is-selected{box-sizing:border-box;border:1px solid var(--cds-layer-selected-inverse,#161616)}:host(cds-custom-radio-tile[enable-tile-contrast]) .cds-custom--tile--disabled{box-sizing:border-box;border:1px solid var(--cds-border-disabled,#c6c6c6)}"]);
|
|
10
|
+
var tile_default = css([".cds-custom--link,:host(cds-custom-tile) ::slotted(.cds-custom--link){box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds-custom--link *,.cds-custom--link :after,.cds-custom--link :before,:host(cds-custom-tile) ::slotted(.cds-custom--link) *,:host(cds-custom-tile) ::slotted(.cds-custom--link) :after,:host(cds-custom-tile) ::slotted(.cds-custom--link) :before{box-sizing:inherit}.cds-custom--link,:host(cds-custom-tile) ::slotted(.cds-custom--link){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:inline-flex;color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe));outline:none;text-decoration:none;transition:color 70ms cubic-bezier(.2,0,.38,.9)}.cds-custom--link:hover,:host(cds-custom-tile) :hover::slotted(.cds-custom--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce));text-decoration:underline}.cds-custom--link:active:not(.cds-custom--link--disabled),.cds-custom--link:active:visited,.cds-custom--link:active:visited:hover,:host(cds-custom-tile) :active:not(.cds-custom--link--disabled)::slotted(.cds-custom--link),:host(cds-custom-tile) :active:visited::slotted(.cds-custom--link){outline:1px solid var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds-custom--link:active:not(.cds-custom--link--disabled),.cds-custom--link:active:visited,.cds-custom--link:active:visited:hover,:host(cds-custom-tile) :active:not(.cds-custom--link--disabled)::slotted(.cds-custom--link),:host(cds-custom-tile) :active:visited::slotted(.cds-custom--link){outline-style:dotted}}.cds-custom--link:active:not(.cds-custom--link--disabled),.cds-custom--link:active:visited,.cds-custom--link:active:visited:hover,:host(cds-custom-tile) :active:not(.cds-custom--link--disabled)::slotted(.cds-custom--link),:host(cds-custom-tile) :active:visited::slotted(.cds-custom--link){color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe));outline-color:var(--cds-link-focus-text-color,var(--cds-focus,#0f62fe));text-decoration:underline}.cds-custom--link:focus:not(.cds-custom--link--disabled),:host(cds-custom-tile) :focus:not(.cds-custom--link--disabled)::slotted(.cds-custom--link){outline:1px solid var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds-custom--link:focus:not(.cds-custom--link--disabled),:host(cds-custom-tile) :focus:not(.cds-custom--link--disabled)::slotted(.cds-custom--link){outline-style:dotted}}.cds-custom--link:focus:not(.cds-custom--link--disabled),:host(cds-custom-tile) :focus:not(.cds-custom--link--disabled)::slotted(.cds-custom--link){outline-color:var(--cds-link-focus-text-color,var(--cds-focus,#0f62fe));text-decoration:underline}.cds-custom--link:visited,:host(cds-custom-tile) :visited::slotted(.cds-custom--link){color:var(--cds-link-text-color,var(--cds-link-primary,#0f62fe))}.cds-custom--link:visited:hover,:host(cds-custom-tile) :visited:hover::slotted(.cds-custom--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce))}.cds-custom--link--disabled,.cds-custom--link--disabled:hover{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds-custom--link--disabled *,.cds-custom--link--disabled :after,.cds-custom--link--disabled :before,.cds-custom--link--disabled:hover *,.cds-custom--link--disabled:hover :after,.cds-custom--link--disabled:hover :before{box-sizing:inherit}.cds-custom--link--disabled,.cds-custom--link--disabled:hover{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);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;font-weight:400;text-decoration:none}.cds-custom--link.cds-custom--link--visited,.cds-custom--link.cds-custom--link--visited:visited,:host(cds-custom-tile) .cds-custom--link--visited::slotted(.cds-custom--link){color:var(--cds-link-visited-text-color,var(--cds-link-visited,#8a3ffc))}.cds-custom--link.cds-custom--link--visited:hover,.cds-custom--link.cds-custom--link--visited:visited:hover,:host(cds-custom-tile) .cds-custom--link--visited:hover::slotted(.cds-custom--link){color:var(--cds-link-hover-text-color,var(--cds-link-primary-hover,#0043ce))}.cds-custom--link.cds-custom--link--inline,:host(cds-custom-tile) .cds-custom--link--inline::slotted(.cds-custom--link){display:inline;text-decoration:underline}.cds-custom--link--disabled.cds-custom--link--inline{text-decoration:underline}.cds-custom--link--sm,.cds-custom--link--sm.cds-custom--link--disabled:hover{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)}.cds-custom--link--lg,.cds-custom--link--lg.cds-custom--link--disabled:hover{font-size:var(--cds-body-compact-02-font-size,1rem);font-weight:var(--cds-body-compact-02-font-weight,400);line-height:var(--cds-body-compact-02-line-height,1.375);letter-spacing:var(--cds-body-compact-02-letter-spacing,0)}.cds-custom--link--icon{display:inline-block}.cds-custom--link__icon{display:inline-flex;align-items:center;block-size:1lh;line-height:inherit;margin-inline-start:.5rem;vertical-align:text-bottom}.cds-custom--link--lg .cds-custom--link__icon>svg{block-size:1.25rem;inline-size:1.25rem}.cds-custom--link--lg .cds-custom--link__icon{block-size:1.25rem}.cds-custom--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-custom--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-custom--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-custom--layer-one.cds-custom--layer__with-background,.cds-custom--layer-three.cds-custom--layer__with-background,.cds-custom--layer-two.cds-custom--layer__with-background{background-color:var(--cds-layer-background)}.cds-custom--assistive-text,.cds-custom--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-custom--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds-custom--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds-custom--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds-custom--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds-custom--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds-custom--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds-custom--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds-custom--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds-custom--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds-custom--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds-custom--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds-custom--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds-custom--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds-custom--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds-custom--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds-custom--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds-custom--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds-custom--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds-custom--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--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}.cds-custom--tile-group html,:host(cds-custom-tile-group) html{font-size:100%}.cds-custom--tile-group body,:host(cds-custom-tile-group) 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-custom--tile-group code,:host(cds-custom-tile-group) code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds-custom--tile-group strong,:host(cds-custom-tile-group) strong{font-weight:600}.cds-custom--tile,:host(cds-custom-expandable-tile),:host(cds-custom-tile){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);--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:block;padding:var(--cds-layout-density-padding-inline-local);background-color:var(--cds-layer);min-block-size:4rem;min-inline-size:8rem;outline:2px solid transparent;outline-offset:-2px}.cds-custom--tile:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--tile:focus{outline-style:dotted}}.cds-custom--tile--light,:host(cds-custom-expandable-tile[color-scheme=light]),:host(cds-custom-tile[color-scheme=light]){background-color:var(--cds-layer-02,#fff)}.cds-custom--tile--clickable,.cds-custom--tile--selectable,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds-custom--tile--clickable *,.cds-custom--tile--clickable :after,.cds-custom--tile--clickable :before,.cds-custom--tile--selectable *,.cds-custom--tile--selectable :after,.cds-custom--tile--selectable :before,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable *,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable :after,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable :before{box-sizing:inherit}.cds-custom--tile--clickable,.cds-custom--tile--selectable,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable{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);padding:var(--cds-layout-density-padding-inline-local);cursor:pointer;transition:.15s cubic-bezier(.2,0,.38,.9)}.cds-custom--tile--clickable:hover,.cds-custom--tile--selectable:hover{background:var(--cds-layer-hover)}.cds-custom--tile--clickable,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable{color:var(--cds-text-primary,#161616);text-decoration:none}.cds-custom--tile--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--tile--clickable:focus{outline-style:dotted}}.cds-custom--tile--clickable:focus{text-decoration:none}.cds-custom--tile--clickable:focus .cds-custom--tile__checkmark,.cds-custom--tile--clickable:hover .cds-custom--tile__checkmark{opacity:1}.cds-custom--tile--expandable::-moz-focus-inner{border:0}.cds-custom--tile--clickable:active,.cds-custom--tile--clickable:hover,.cds-custom--tile--clickable:visited,.cds-custom--tile--clickable:visited:hover{color:var(--cds-text-primary,#161616);text-decoration:none}.cds-custom--tile--clickable.cds-custom--link--disabled,.cds-custom--tile--clickable:hover.cds-custom--link--disabled{display:block;padding:var(--cds-layout-density-padding-inline-local);background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds-custom--tile--clickable .cds-custom--tile--icon,.cds-custom--tile--clickable.cds-custom--link--disabled .cds-custom--tile--disabled-icon,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable ::slotted([slot=icon]){position:absolute;block-size:1.25rem;inline-size:1.25rem;inset-block-end:.75rem;inset-inline-end:.75rem}.cds-custom--tile--clickable .cds-custom--tile--icon,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable ::slotted([slot=icon]){fill:var(--cds-icon-interactive,#0f62fe)}.cds-custom--tile--clickable.cds-custom--link--disabled .cds-custom--tile--disabled-icon{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds-custom--tile--clickable.cds-custom--link--disabled .cds-custom--tile--icon,:host(cds-custom-clickable-tile) .cds-custom--tile--clickable.cds-custom--link--disabled ::slotted([slot=icon]){display:none}.cds-custom--tile--selectable{border:1px solid transparent;padding-inline-end:calc(var(--cds-layout-density-padding-inline-local)*2 + 1rem)}.cds-custom--tile__checkmark{position:absolute;border:none;background:transparent;block-size:1rem;inset-block-start:var(--cds-layout-density-padding-inline-local);inset-inline-end:var(--cds-layout-density-padding-inline-local);transition:.11s cubic-bezier(.2,0,.38,.9);opacity:0}.cds-custom--tile__checkmark svg{border-radius:50%;fill:var(--cds-icon-secondary,#525252)}.cds-custom--tile__checkmark:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--tile__checkmark:focus{outline-style:dotted}}.cds-custom--tile__checkmark--persistent{opacity:1}.cds-custom--tile__chevron,:host(cds-custom-selectable-tile) .cds-custom--tile__chevron{position:absolute;display:flex;align-items:center;justify-content:center;block-size:calc(var(--cds-layout-density-padding-inline-local)*2 + 1rem);inline-size:calc(var(--cds-layout-density-padding-inline-local)*2 + 1rem);inset-block-end:0;inset-inline-end:0}.cds-custom--tile__chevron svg,:host(cds-custom-selectable-tile) .cds-custom--tile__chevron svg{fill:var(--cds-icon-primary,#161616);transform-origin:center;transition:.11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds-custom--tile__chevron svg,:host(cds-custom-selectable-tile) .cds-custom--tile__chevron svg{transition:none}}.cds-custom--tile__chevron--interactive{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-custom--tile__chevron--interactive *,.cds-custom--tile__chevron--interactive :after,.cds-custom--tile__chevron--interactive :before{box-sizing:inherit}.cds-custom--tile__chevron--interactive::-moz-focus-inner{border:0}.cds-custom--tile__chevron--interactive{position:absolute;display:flex;align-items:center;justify-content:center;block-size:calc(var(--cds-layout-density-padding-inline-local)*2 + 1rem);inline-size:calc(var(--cds-layout-density-padding-inline-local)*2 + 1rem);inset-block-end:0;inset-inline-end:0}.cds-custom--tile__chevron--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}.cds-custom--tile__chevron--interactive:hover{background-color:var(--cds-layer-hover);cursor:pointer}.cds-custom--tile--expandable,:host(cds-custom-expandable-tile){position:relative;overflow:hidden;border:0;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;inline-size:100%;text-align:start;transition:max-height .15s cubic-bezier(.2,0,.38,.9);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)}.cds-custom--tile--expandable:hover{background:var(--cds-layer-hover)}.cds-custom--tile--expandable.cds-custom--tile--expandable--interactive{border:none;cursor:default;transition:max-height .15s cubic-bezier(.2,0,.38,.9)}.cds-custom--tile--expandable.cds-custom--tile--expandable--interactive:hover{background-color:var(--cds-layer)}.cds-custom--tile--expandable.cds-custom--tile--expandable--interactive:focus{outline:none}.cds-custom--tile--expandable--interactive:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--tile--expandable--interactive:focus{outline-style:dotted}}.cds-custom--tile-content__below-the-fold,:host(cds-custom-expandable-tile) ::slotted(cds-custom-tile-below-the-fold-content){display:block;opacity:0;transition:opacity .11s cubic-bezier(.2,0,.38,.9),visibility .11s cubic-bezier(.2,0,.38,.9);visibility:hidden}.cds-custom--tile--is-expanded,:host(cds-custom-expandable-tile[expanded]){overflow:visible;transition:max-height .11s cubic-bezier(.2,0,.38,.9)}.cds-custom--tile--is-expanded .cds-custom--tile__chevron svg,:host(cds-custom-expandable-tile[expanded]) .cds-custom--tile__chevron svg{transform:rotate(180deg)}.cds-custom--tile--is-expanded .cds-custom--tile-content__below-the-fold,:host(cds-custom-expandable-tile) .cds-custom--tile--is-expanded ::slotted(cds-custom-tile-below-the-fold-content),:host(cds-custom-expandable-tile[expanded]) .cds-custom--tile-content__below-the-fold,:host(cds-custom-expandable-tile[expanded]):host(cds-custom-expandable-tile) ::slotted(cds-custom-tile-below-the-fold-content){opacity:1;transition:opacity .11s cubic-bezier(.2,0,.38,.9),visibility .11s cubic-bezier(.2,0,.38,.9);visibility:inherit}@supports (hanging-punctuation:first) and (font:-apple-system-body) and (-webkit-appearance:none){.cds-custom--tile--is-expanded .cds-custom--tile-content__below-the-fold,:host(cds-custom-expandable-tile) .cds-custom--tile--is-expanded ::slotted(cds-custom-tile-below-the-fold-content),:host(cds-custom-expandable-tile[expanded]) .cds-custom--tile-content__below-the-fold,:host(cds-custom-expandable-tile[expanded]):host(cds-custom-expandable-tile) ::slotted(cds-custom-tile-below-the-fold-content){overflow-y:auto}}.cds-custom--tile--is-selected{border:1px solid var(--cds-layer-selected-inverse,#161616)}.cds-custom--tile--is-selected .cds-custom--tile__checkmark{opacity:1}.cds-custom--tile--is-selected .cds-custom--tile__checkmark svg{fill:var(--cds-icon-primary,#161616)}.cds-custom--tile-content{block-size:100%;inline-size:100%}.cds-custom--tile-input{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-custom--tile-input:focus+.cds-custom--tile,.cds-custom--tile-input:focus+:host(cds-custom-expandable-tile),.cds-custom--tile-input:focus+:host(cds-custom-tile){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds-custom--tile-input:focus+.cds-custom--tile,.cds-custom--tile-input:focus+:host(cds-custom-expandable-tile),.cds-custom--tile-input:focus+:host(cds-custom-tile){outline-style:dotted}}.cds-custom--tile--disabled.cds-custom--tile--selectable{background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds-custom--tile--disabled.cds-custom--tile--selectable.cds-custom--tile--light{background-color:var(--cds-layer-02,#fff)}.cds-custom--tile--disabled.cds-custom--tile--is-selected{border-color:var(--cds-border-disabled,#c6c6c6)}.cds-custom--tile--disabled .cds-custom--tile__checkmark svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds-custom--tile--clickable .cds-custom--tile--ai-label-icon,.cds-custom--tile--expandable>div>.cds-custom--ai-label,.cds-custom--tile--expandable>div>.cds-custom--slug,.cds-custom--tile--expandable>div>.cds-custom--tile--inner-decorator>*,.cds-custom--tile>.cds-custom--ai-label,.cds-custom--tile>.cds-custom--slug,.cds-custom--tile>.cds-custom--tile--inner-decorator>*,:host(cds-custom-expandable-tile)>.cds-custom--ai-label,:host(cds-custom-expandable-tile)>.cds-custom--slug,:host(cds-custom-expandable-tile)>.cds-custom--tile--inner-decorator>*,:host(cds-custom-expandable-tile)>div>.cds-custom--ai-label,:host(cds-custom-expandable-tile)>div>.cds-custom--slug,:host(cds-custom-expandable-tile)>div>.cds-custom--tile--inner-decorator>*,:host(cds-custom-tile)>.cds-custom--ai-label,:host(cds-custom-tile)>.cds-custom--slug,:host(cds-custom-tile)>.cds-custom--tile--inner-decorator>*{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}.cds-custom--tile.cds-custom--tile--selectable>.cds-custom--ai-label,.cds-custom--tile.cds-custom--tile--selectable>.cds-custom--slug,.cds-custom--tile.cds-custom--tile--selectable>.cds-custom--tile--inner-decorator>*{inset-inline-end:2.5rem}.cds-custom--tile.cds-custom--tile--selectable.cds-custom--tile--radio>.cds-custom--ai-label,.cds-custom--tile.cds-custom--tile--selectable.cds-custom--tile--radio>.cds-custom--slug,.cds-custom--tile.cds-custom--tile--selectable.cds-custom--tile--radio>.cds-custom--tile--inner-decorator>*{inset-inline-end:1rem;transition:inset-inline-end .11s cubic-bezier(.2,0,.38,.9);inset-inline-end:2.5rem}.cds-custom--tile.cds-custom--tile--selectable.cds-custom--tile--radio.cds-custom--tile--is-selected>.cds-custom--ai-label,.cds-custom--tile.cds-custom--tile--selectable.cds-custom--tile--radio.cds-custom--tile--is-selected>.cds-custom--slug,.cds-custom--tile.cds-custom--tile--selectable.cds-custom--tile--radio.cds-custom--tile--is-selected>.cds-custom--tile--inner-decorator>*{inset-inline-end:2.5rem}.cds-custom--tile.cds-custom--tile--clickable>.cds-custom--ai-label,.cds-custom--tile.cds-custom--tile--clickable>.cds-custom--slug,.cds-custom--tile.cds-custom--tile--clickable>.cds-custom--tile--inner-decorator>*{pointer-events:none}.cds-custom--tile--decorator:has(.cds-custom--ai-label).cds-custom--tile,.cds-custom--tile--decorator:has(.cds-custom--tile--ai-label-icon).cds-custom--tile,.cds-custom--tile--slug.cds-custom--tile{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box;border:1px solid transparent;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 8px 0 var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds-custom--tile--decorator:has(.cds-custom--ai-label).cds-custom--tile--expandable:hover,.cds-custom--tile--slug.cds-custom--tile--expandable:hover{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box}.cds-custom--tile--decorator.cds-custom--tile--clickable:before,.cds-custom--tile--decorator.cds-custom--tile--selectable:after,.cds-custom--tile--decorator.cds-custom--tile--selectable:before,.cds-custom--tile--slug.cds-custom--tile--clickable:before,.cds-custom--tile--slug.cds-custom--tile--selectable:after,.cds-custom--tile--slug.cds-custom--tile--selectable:before{position:absolute;display:block;block-size:100%;content:\"\";inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:0;transition:opacity .11s cubic-bezier(.2,0,.38,.9)}.cds-custom--tile--decorator:has(.cds-custom--ai-label).cds-custom--tile--clickable:before,.cds-custom--tile--decorator:has(.cds-custom--ai-label).cds-custom--tile--selectable:before,.cds-custom--tile--decorator:has(.cds-custom--tile--ai-label-icon).cds-custom--tile--clickable:before,.cds-custom--tile--slug.cds-custom--tile--clickable:before,.cds-custom--tile--slug.cds-custom--tile--selectable:before{background:linear-gradient(to top,var(--cds-ai-aura-hover-start,rgba(69,137,255,.32)) 0,15%,var(--cds-ai-aura-hover-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 10px 2px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds-custom--tile--decorator.cds-custom--tile--clickable:hover:before,.cds-custom--tile--decorator.cds-custom--tile--selectable:hover:before,.cds-custom--tile--slug.cds-custom--tile--clickable:hover:before,.cds-custom--tile--slug.cds-custom--tile--selectable:hover:before{opacity:1}.cds-custom--tile--decorator.cds-custom--tile--clickable:focus,.cds-custom--tile--decorator.cds-custom--tile--selectable:focus,.cds-custom--tile--slug.cds-custom--tile--clickable:focus,.cds-custom--tile--slug.cds-custom--tile--selectable:focus,.cds-custom--tile-input:focus+.cds-custom--tile--decorator.cds-custom--tile,.cds-custom--tile-input:focus+.cds-custom--tile--slug.cds-custom--tile{outline-offset:-1px}.cds-custom--tile--decorator:has(.cds-custom--tile--inner-decorator .cds-custom--ai-label).cds-custom--tile--selectable:after,.cds-custom--tile--slug.cds-custom--tile--selectable:after{background:linear-gradient(to top,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-border-inverse,#161616),var(--cds-border-inverse,#161616)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 4px 8px 0 var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}.cds-custom--tile--decorator.cds-custom--tile--selectable:hover:after,.cds-custom--tile--slug.cds-custom--tile--selectable:hover:after{opacity:0}.cds-custom--tile--decorator.cds-custom--tile--is-selected:after,.cds-custom--tile--slug.cds-custom--tile--is-selected:after{opacity:1}.cds-custom--tile--decorator:has(.cds-custom--tile--inner-decorator).cds-custom--tile--is-selected,.cds-custom--tile--slug.cds-custom--tile--is-selected{border-color:var(--cds-border-inverse,#161616)}.cds-custom--tile--decorator.cds-custom--tile--clickable .cds-custom--tile-content,.cds-custom--tile--decorator.cds-custom--tile--selectable .cds-custom--tile-content,.cds-custom--tile--slug.cds-custom--tile--clickable .cds-custom--tile-content,.cds-custom--tile--slug.cds-custom--tile--selectable .cds-custom--tile-content{position:relative;cursor:pointer}.cds-custom--tile--decorator.cds-custom--tile--clickable .cds-custom--tile-content,.cds-custom--tile--decorator.cds-custom--tile--is-selected .cds-custom--tile--inner-decorator>*,.cds-custom--tile--decorator.cds-custom--tile--selectable .cds-custom--tile-content,.cds-custom--tile--decorator.cds-custom--tile--selectable>.cds-custom--tile__checkmark,.cds-custom--tile--slug.cds-custom--tile--clickable .cds-custom--tile-content,.cds-custom--tile--slug.cds-custom--tile--is-selected .cds-custom--ai-label,.cds-custom--tile--slug.cds-custom--tile--is-selected .cds-custom--slug,.cds-custom--tile--slug.cds-custom--tile--selectable .cds-custom--tile-content,.cds-custom--tile--slug.cds-custom--tile--selectable>.cds-custom--tile__checkmark{z-index:1}.cds-custom--tile--decorator.cds-custom--tile--selectable .cds-custom--tile--inner-decorator>:has(>.cds-custom--popover--open),.cds-custom--tile--slug.cds-custom--tile--selectable .cds-custom--ai-label:has(>.cds-custom--popover--open),.cds-custom--tile--slug.cds-custom--tile--selectable .cds-custom--slug:has(>.cds-custom--popover--open){z-index:2}.cds-custom--tile--decorator.cds-custom--tile--selectable>.cds-custom--tile--inner-decorator>*,.cds-custom--tile--decorator.cds-custom--tile--selectable>.cds-custom--tile__checkmark,.cds-custom--tile--slug.cds-custom--tile--selectable>.cds-custom--ai-label,.cds-custom--tile--slug.cds-custom--tile--selectable>.cds-custom--slug,.cds-custom--tile--slug.cds-custom--tile--selectable>.cds-custom--tile__checkmark{z-index:1}.cds-custom--tile--expandable:has(.cds-custom--ai-label>.cds-custom--popover--open),.cds-custom--tile--expandable:has(.cds-custom--slug>.cds-custom--popover--open),.cds-custom--tile--expandable:has(.cds-custom--tile--inner-decorator>*>.cds-custom--popover--open),:has(.cds-custom--ai-label>.cds-custom--popover--open):host(cds-custom-expandable-tile),:has(.cds-custom--slug>.cds-custom--popover--open):host(cds-custom-expandable-tile),:has(.cds-custom--tile--inner-decorator>*>.cds-custom--popover--open):host(cds-custom-expandable-tile){overflow:visible}.cds-custom--tile--clickable .cds-custom--tile--ai-label-icon rect{stroke:var(--cds-icon-primary,#161616)}.cds-custom--tile--clickable .cds-custom--tile--ai-label-icon path{fill:var(--cds-icon-primary,#161616)}.cds-custom--tile--decorator-rounded,.cds-custom--tile--decorator-rounded.cds-custom--tile--clickable:before,.cds-custom--tile--decorator-rounded.cds-custom--tile--selectable:after,.cds-custom--tile--decorator-rounded.cds-custom--tile--selectable:before,.cds-custom--tile--slug-rounded,.cds-custom--tile--slug-rounded.cds-custom--tile--clickable:before,.cds-custom--tile--slug-rounded.cds-custom--tile--selectable:after,.cds-custom--tile--slug-rounded.cds-custom--tile--selectable:before,:host(cds-custom-clickable-tile[ai-label][has-rounded-corners]),:host(cds-custom-expandable-tile[ai-label][has-rounded-corners]),:host(cds-custom-radio-tile[ai-label][has-rounded-corners]),:host(cds-custom-selectable-tile[ai-label][has-rounded-corners]),:host(cds-custom-tile[ai-label][has-rounded-corners]){border-radius:.5rem}.cds-custom--tile--decorator-rounded .cds-custom--tile__chevron,.cds-custom--tile--slug-rounded .cds-custom--tile__chevron,:host(cds-custom-clickable-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-expandable-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-radio-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-selectable-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron{border-end-end-radius:.5rem}@keyframes cds-custom--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds-custom--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds-custom--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-custom--fieldset{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline}.cds-custom--fieldset *,.cds-custom--fieldset :after,.cds-custom--fieldset :before{box-sizing:inherit}.cds-custom--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-custom--label html{font-size:100%}.cds-custom--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-custom--label code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds-custom--label strong{font-weight:600}.cds-custom--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-custom--label,.cds-custom--label .cds-custom--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds-custom--label .cds-custom--toggletip-label{font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333)}.cds-custom--label--no-margin{margin-block-end:0}.cds-custom--label+.cds-custom--tooltip{position:relative;inset-block-start:.2rem;inset-inline-start:.5rem}.cds-custom--label+.cds-custom--tooltip .cds-custom--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-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger *,.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger :after,.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger :before{box-sizing:inherit}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger::-moz-focus-inner{border:0}.cds-custom--label+.cds-custom--tooltip .cds-custom--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-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds-custom--label+.cds-custom--tooltip .cds-custom--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds-custom--label+.cds-custom--toggletip{inset-block-start:.2rem;inset-inline-start:.5rem}.cds-custom--label.cds-custom--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none}.cds-custom--label.cds-custom--skeleton:active,.cds-custom--label.cds-custom--skeleton:focus,.cds-custom--label.cds-custom--skeleton:hover{border:none;cursor:default;outline:none}.cds-custom--label.cds-custom--skeleton:before{position:absolute;animation:cds-custom--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-custom--label.cds-custom--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds-custom--label.cds-custom--skeleton{background:CanvasText}.cds-custom--label.cds-custom--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds-custom--label.cds-custom--skeleton{block-size:.875rem;inline-size:4.6875rem}input[type=number],input[type=text].cds-custom--number{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif}.cds-custom--combo-box[data-invalid]:not(.cds-custom--multi-select--selected) .cds-custom--text-input:not(:focus),.cds-custom--list-box[data-invalid]:not(.cds-custom--multi-select--invalid--focused,.cds-custom--combo-box--invalid--focused),.cds-custom--number[data-invalid] input[type=number]:not(:focus),.cds-custom--number[data-invalid] input[type=text]:not(:focus),.cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input:not(:focus),.cds-custom--text-area__wrapper[data-invalid]>.cds-custom--text-area--invalid:not(:focus),.cds-custom--text-input__field-wrapper[data-invalid]>.cds-custom--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-custom--combo-box[data-invalid]:not(.cds-custom--multi-select--selected) .cds-custom--text-input:not(:focus),.cds-custom--list-box[data-invalid]:not(.cds-custom--multi-select--invalid--focused,.cds-custom--combo-box--invalid--focused),.cds-custom--number[data-invalid] input[type=number]:not(:focus),.cds-custom--number[data-invalid] input[type=text]:not(:focus),.cds-custom--select-input__wrapper[data-invalid] .cds-custom--select-input:not(:focus),.cds-custom--text-area__wrapper[data-invalid]>.cds-custom--text-area--invalid:not(:focus),.cds-custom--text-input__field-wrapper[data-invalid]>.cds-custom--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds-custom--date-picker-input__wrapper--invalid~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper--warn~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper~.cds-custom--form-requirement,.cds-custom--list-box--warning~.cds-custom--form-requirement,.cds-custom--list-box[data-invalid]~.cds-custom--form-requirement,.cds-custom--number[data-invalid] .cds-custom--number__input-wrapper~.cds-custom--form-requirement,.cds-custom--number__input-wrapper--warning~.cds-custom--form-requirement,.cds-custom--select--warning .cds-custom--select-input__wrapper~.cds-custom--form-requirement,.cds-custom--select-input__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-area__wrapper--warn~.cds-custom--form-requirement,.cds-custom--text-area__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper--warning>.cds-custom--text-input~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper--warning~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--time-picker--invalid~.cds-custom--form-requirement,.cds-custom--time-picker--warning~.cds-custom--form-requirement,.cds-custom--time-picker[data-invalid]~.cds-custom--form-requirement,input[data-invalid]~.cds-custom--form-requirement{display:block;overflow:visible;font-weight:400;max-block-size:12.5rem}.cds-custom--select--inline.cds-custom--select--warning .cds-custom--select-input--inline__wrapper~.cds-custom--form-requirement,.cds-custom--select-input--inline__wrapper[data-invalid]~.cds-custom--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-custom--date-picker-input__wrapper--invalid~.cds-custom--form-requirement,.cds-custom--date-picker-input__wrapper~.cds-custom--form-requirement,.cds-custom--list-box[data-invalid]~.cds-custom--form-requirement,.cds-custom--number[data-invalid] .cds-custom--number__input-wrapper~.cds-custom--form-requirement,.cds-custom--select-input--inline__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--select-input__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-area__wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--text-input__field-wrapper[data-invalid]~.cds-custom--form-requirement,.cds-custom--time-picker--invalid~.cds-custom--form-requirement,.cds-custom--time-picker[data-invalid]~.cds-custom--form-requirement,input[data-invalid]~.cds-custom--form-requirement{color:var(--cds-text-error,#da1e28)}.cds-custom--form--fluid .cds-custom--text-input__field-wrapper--warning,.cds-custom--form--fluid .cds-custom--text-input__field-wrapper[data-invalid]{display:block}.cds-custom--form--fluid input[data-invalid]{outline:none}.cds-custom--form--fluid .cds-custom--form-requirement{padding:.5rem 2.5rem .5rem 1rem;margin:0}input:not(output,[data-invalid]):-moz-ui-invalid{box-shadow:none}.cds-custom--form-requirement html{font-size:100%}.cds-custom--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-custom--form-requirement code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds-custom--form-requirement strong{font-weight:600}.cds-custom--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-custom--select--inline .cds-custom--form__helper-text{margin-block-start:0}.cds-custom--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-custom--form__helper-text--disabled,.cds-custom--label--disabled,fieldset[disabled] .cds-custom--form__helper-text,fieldset[disabled] .cds-custom--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}:host(cds-custom-tile){--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}:host(cds-custom-tile-group){background:transparent}:host(cds-custom-tile-group) fieldset{border:none}:host(cds-custom-clickable-tile){--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:grid;outline:none}:host(cds-custom-clickable-tile) .cds-custom--link--disabled{display:block;padding:density(\"padding-inline\");background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}:host(cds-custom-clickable-tile) .cds-custom--tile,:host(cds-custom-clickable-tile) :host(cds-custom-expandable-tile),:host(cds-custom-clickable-tile) :host(cds-custom-tile){padding:1rem;outline:.125rem solid transparent}:host(cds-custom-clickable-tile) .cds-custom--tile--clickable{display:block;transition:.15s cubic-bezier(.2,0,.38,.9)}:host(cds-custom-clickable-tile) .cds-custom--tile--clickable:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-custom-clickable-tile) .cds-custom--tile--clickable:focus{outline-style:dotted}}:host(cds-custom-clickable-tile) .cds-custom--link__icon{display:block}:host(cds-custom-clickable-tile) ::slotted([slot=ai-label]),:host(cds-custom-clickable-tile) ::slotted([slot=slug]){pointer-events:none}:host(cds-custom-radio-tile){--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;position:relative;display:block;margin-block-end:.5rem;outline:none}:host(cds-custom-radio-tile) .cds-custom--tile,:host(cds-custom-radio-tile) :host(cds-custom-expandable-tile),:host(cds-custom-radio-tile) :host(cds-custom-tile){block-size:100%}:host(cds-custom-selectable-tile){--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;position:relative;display:block;outline:none}:host(cds-custom-selectable-tile) .cds-custom--tile,:host(cds-custom-selectable-tile) :host(cds-custom-expandable-tile),:host(cds-custom-selectable-tile) :host(cds-custom-tile){block-size:100%}:host(cds-custom-radio-tile) .cds-custom--tile-input:checked~.cds-custom--tile--selectable .cds-custom--tile__checkmark,:host(cds-custom-selectable-tile) .cds-custom--tile-input:checked~.cds-custom--tile--selectable .cds-custom--tile__checkmark{opacity:1}:host(cds-custom-radio-tile[enable-v12-tile-radio-icons]) .cds-custom--tile__checkmark{opacity:1}:host(cds-custom-radio-tile[enable-v12-tile-radio-icons]) ::slotted([slot=ai-label]){inset-inline-end:2.5rem}:host(cds-custom-clickable-tile) ::slotted(*),:host(cds-custom-radio-tile) ::slotted(:not([slot])),:host(cds-custom-selectable-tile) ::slotted(:not([slot])){position:relative;z-index:1;cursor:pointer}:host(cds-custom-expandable-tile){--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}:host(cds-custom-expandable-tile) ::slotted(cds-custom-tile-above-the-fold-content){display:block}:host(cds-custom-expandable-tile) .cds-custom-ce--expandable-tile--below-the-fold-content{max-block-size:0;transition:max-height .11s cubic-bezier(.2,0,.38,.9)}:host(cds-custom-expandable-tile[expanded]) ::slotted(cds-custom-tile-below-the-fold-content){opacity:1;transition:.11s cubic-bezier(.2,0,.38,.9);visibility:visible}:host(cds-custom-expandable-tile[with-interactive]){cursor:default;transition:max-height .15s cubic-bezier(.2,0,.38,.9)}:host(cds-custom-expandable-tile[with-interactive]):hover{background-color:var(--cds-layer)}:host(cds-custom-expandable-tile[with-interactive]):focus{outline:none}:host(cds-custom-expandable-tile:not([with-interactive]):focus-within){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){:host(cds-custom-expandable-tile:not([with-interactive]):focus-within){outline-style:dotted}}:host(cds-custom-expandable-tile:not([with-interactive])) .cds-custom--tile__chevron{border:none;background:none;cursor:pointer;outline:none}:host(cds-custom-clickable-tile[ai-label]) .cds-custom--tile,:host(cds-custom-clickable-tile[ai-label]) :host(cds-custom-expandable-tile),:host(cds-custom-clickable-tile[ai-label]) :host(cds-custom-tile),:host(cds-custom-expandable-tile[ai-label]),:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile,:host(cds-custom-radio-tile[ai-label]) :host(cds-custom-expandable-tile),:host(cds-custom-radio-tile[ai-label]) :host(cds-custom-tile),:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile,:host(cds-custom-selectable-tile[ai-label]) :host(cds-custom-expandable-tile),:host(cds-custom-selectable-tile[ai-label]) :host(cds-custom-tile),:host(cds-custom-tile[ai-label]){background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box;border:1px solid transparent;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1)),0 24px 40px -24px var(--cds-ai-drop-shadow,rgba(15,98,254,.1))}:host(cds-custom-clickable-tile) ::slotted([slot=ai-label]),:host(cds-custom-clickable-tile) ::slotted([slot=decorator]),:host(cds-custom-clickable-tile) ::slotted([slot=slug]),:host(cds-custom-expandable-tile) ::slotted([slot=ai-label]),:host(cds-custom-expandable-tile) ::slotted([slot=decorator]),:host(cds-custom-expandable-tile) ::slotted([slot=slug]),:host(cds-custom-radio-tile) ::slotted([slot=ai-label]),:host(cds-custom-radio-tile) ::slotted([slot=decorator]),:host(cds-custom-radio-tile) ::slotted([slot=slug]),:host(cds-custom-selectable-tile) ::slotted([slot=ai-label]),:host(cds-custom-selectable-tile) ::slotted([slot=decorator]),:host(cds-custom-selectable-tile) ::slotted([slot=slug]),:host(cds-custom-tile) ::slotted([slot=ai-label]),:host(cds-custom-tile) ::slotted([slot=decorator]),:host(cds-custom-tile) ::slotted([slot=slug]){position:absolute;inset-block-start:1rem;inset-inline-end:1rem}:host(cds-custom-radio-tile[selected]) ::slotted([slot=ai-label]),:host(cds-custom-radio-tile[selected]) ::slotted([slot=decorator]),:host(cds-custom-selectable-tile) ::slotted([slot=ai-label]),:host(cds-custom-selectable-tile) ::slotted([slot=decorator]),:host(cds-custom-selectable-tile) ::slotted([slot=slug]){inset-inline-end:2.5rem;transition:inset-inline-end .11s cubic-bezier(.2,0,.38,.9)}:host(cds-custom-expandable-tile[ai-label]):hover{background:linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)) 0,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-layer,var(--cds-ai-popover-background,#fff)),var(--cds-layer,var(--cds-ai-popover-background,#fff))) border-box}:host(cds-custom-clickable-tile[ai-label]) .cds-custom--tile:before,:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile:after,:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile:before,:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile:after,:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile:before{position:absolute;display:block;block-size:100%;content:\"\";inline-size:100%;inset-block-start:0;inset-inline-start:0;opacity:0;transition:opacity .11s cubic-bezier(.2,0,.38,.9)}:host(cds-custom-clickable-tile[ai-label]) .cds-custom--tile:before,:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile:before,:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile:before{background:linear-gradient(to top,var(--cds-ai-aura-hover-start,rgba(69,137,255,.32)) 0,15%,var(--cds-ai-aura-hover-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) padding-box,linear-gradient(to bottom,var(--cds-ai-border-start,rgba(166,200,255,.64)),var(--cds-ai-border-end,#78a9ff)) border-box,linear-gradient(to top,var(--cds-ai-aura-hover-background,#edf5ff),var(--cds-ai-aura-hover-background,#edf5ff)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1))}:host(cds-custom-clickable-tile[ai-label]) .cds-custom--tile:hover:before,:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile:hover:before,:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile:hover:before{opacity:1}:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile--is-selected,:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile--is-selected{border:1px solid var(--cds-layer-selected-inverse,#161616)}:host(cds-custom-radio-tile[ai-label]) .cds-custom--tile--is-selected .cds-custom--tile__checkmark,:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile--is-selected .cds-custom--tile__checkmark{z-index:1}:host(cds-custom-radio-tile[ai-label]),:host(cds-custom-selectable-tile[ai-label]) .cds-custom--tile--is-selected:after{background:linear-gradient(to top,var(--cds-ai-aura-start,rgba(69,137,255,.1)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%) padding-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) padding-box,linear-gradient(to bottom,var(--cds-border-inverse,#161616),var(--cds-border-inverse,#161616)) border-box,linear-gradient(to top,var(--cds-layer),var(--cds-layer)) border-box;box-shadow:inset 0 -80px 70px -65px var(--cds-ai-inner-shadow,rgba(69,137,255,.1))}:host(cds-custom-expandable-tile[ai-label]){overflow:visible}:host(cds-custom-clickable-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-expandable-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-radio-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-selectable-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron,:host(cds-custom-tile[ai-label][has-rounded-corners]) .cds-custom--tile__chevron{border-end-end-radius:.5rem}:host(cds-custom-clickable-tile[enable-tile-contrast]) .cds-custom--tile--clickable{box-sizing:border-box;border:1px solid var(--cds-border-tile)}:host(cds-custom-clickable-tile[enable-tile-contrast]) .cds-custom--link--disabled{box-sizing:border-box;border:1px solid var(--cds-border-disabled,#c6c6c6)}:host(cds-custom-selectable-tile[enable-tile-contrast]) .cds-custom--tile--selectable{border:1px solid var(--cds-border-tile)}:host(cds-custom-selectable-tile[enable-tile-contrast]) .cds-custom--tile--is-selected{border:1px solid var(--cds-layer-selected-inverse,#161616)}:host(cds-custom-selectable-tile[enable-tile-contrast]) .cds-custom--tile--disabled{border:1px solid var(--cds-border-disabled,#c6c6c6)}:host(cds-custom-expandable-tile[enable-tile-contrast]) .cds-custom--tile__chevron--interactive{border:1px solid var(--cds-border-disabled,#c6c6c6)}:host(cds-custom-expandable-tile[enable-tile-contrast]:not([with-interactive])){border:1px solid var(--cds-border-tile)}:host(cds-custom-radio-tile[enable-tile-contrast]) .cds-custom--tile--selectable{box-sizing:border-box;border:1px solid var(--cds-border-tile)}:host(cds-custom-radio-tile[enable-tile-contrast]) .cds-custom--tile--is-selected{box-sizing:border-box;border:1px solid var(--cds-layer-selected-inverse,#161616)}:host(cds-custom-radio-tile[enable-tile-contrast]) .cds-custom--tile--disabled{box-sizing:border-box;border:1px solid var(--cds-border-disabled,#c6c6c6)}"]);
|
|
11
11
|
//#endregion
|
|
12
12
|
export { tile_default as default };
|
|
13
13
|
|
|
@@ -5,18 +5,19 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import { ReactiveController, ReactiveElement } from 'lit';
|
|
8
|
-
import { type Boundary } from '@floating-ui/dom';
|
|
8
|
+
import { flip, type Boundary } from '@floating-ui/dom';
|
|
9
9
|
type FloatingControllerOptions = {
|
|
10
10
|
target: HTMLElement;
|
|
11
11
|
trigger: HTMLElement;
|
|
12
12
|
alignment: string;
|
|
13
13
|
arrowElement?: HTMLElement | undefined;
|
|
14
|
-
flipArguments?:
|
|
14
|
+
flipArguments?: Parameters<typeof flip>[0];
|
|
15
15
|
caret?: boolean;
|
|
16
16
|
styleElement?: HTMLElement;
|
|
17
17
|
matchWidth?: boolean;
|
|
18
18
|
open: boolean;
|
|
19
19
|
alignmentAxisOffset?: number;
|
|
20
|
+
mainAxisOffset?: number;
|
|
20
21
|
autoAlignBoundary?: Boundary;
|
|
21
22
|
isTabTip?: boolean;
|
|
22
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"floating-controller.d.ts","sourceRoot":"","sources":["../../../src/globals/controllers/floating-controller.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,
|
|
1
|
+
{"version":3,"file":"floating-controller.d.ts","sourceRoot":"","sources":["../../../src/globals/controllers/floating-controller.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAEL,IAAI,EAOJ,KAAK,QAAQ,EACd,MAAM,kBAAkB,CAAC;AAE1B,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAElB,YAAY,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,aAAa,CAAC,EAAE,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,QAAQ,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,YAAW,kBAAkB;IACnE;;OAEG;IACH,OAAO,CAAC,IAAI,CAAkB;IAC9B;;OAEG;IACH,OAAO,CAAC,OAAO,CAA6B;IAC5C;;OAEG;IACH,OAAO,CAAC,OAAO,CAAC,CAAa;IAE7B;;;OAGG;gBACS,IAAI,EAAE,eAAe;IAK3B,YAAY,CAAC,OAAO,GAAE,yBAAwC;IAOpE,eAAe,QAAO,IAAI,CAExB;IAEI,gBAAgB;IA6LtB,WAAW,IAAI,IAAI;IAOnB,gBAAgB,IAAI,IAAI;CAIzB"}
|
|
@@ -25,10 +25,11 @@ var FloatingController = class {
|
|
|
25
25
|
async setPlacement(options = this.options) {
|
|
26
26
|
this.options = options;
|
|
27
27
|
const { trigger, target } = options;
|
|
28
|
+
this.cleanup?.();
|
|
28
29
|
this.cleanup = autoUpdate(trigger, target, this.updatePlacement);
|
|
29
30
|
}
|
|
30
31
|
async computePlacement() {
|
|
31
|
-
const { arrowElement, alignment, caret, trigger, target, styleElement, matchWidth, open, alignmentAxisOffset, autoAlignBoundary, isTabTip } = this.options;
|
|
32
|
+
const { arrowElement, alignment, caret, trigger, target, styleElement, matchWidth, open, alignmentAxisOffset, mainAxisOffset, autoAlignBoundary, isTabTip, flipArguments } = this.options;
|
|
32
33
|
const isListBox = target?.role === "listbox";
|
|
33
34
|
const isMenu = target?.localName === "cds-custom-menu";
|
|
34
35
|
const element = styleElement ?? target;
|
|
@@ -72,7 +73,7 @@ var FloatingController = class {
|
|
|
72
73
|
const middleware = [
|
|
73
74
|
offset(!isTabTip ? {
|
|
74
75
|
alignmentAxis: alignmentAxisOffset,
|
|
75
|
-
mainAxis: caret ? offsetPx : 4
|
|
76
|
+
mainAxis: mainAxisOffset ?? (caret ? offsetPx : 4)
|
|
76
77
|
} : 0),
|
|
77
78
|
flip({
|
|
78
79
|
fallbackPlacements: isTabTip ? shimmedAlign.includes("bottom") ? [
|
|
@@ -114,7 +115,8 @@ var FloatingController = class {
|
|
|
114
115
|
],
|
|
115
116
|
fallbackStrategy: "initialPlacement",
|
|
116
117
|
fallbackAxisSideDirection: "start",
|
|
117
|
-
boundary: autoAlignBoundary
|
|
118
|
+
boundary: autoAlignBoundary,
|
|
119
|
+
...flipArguments
|
|
118
120
|
}),
|
|
119
121
|
...matchWidth && (shimmedAlign === "bottom" || shimmedAlign === "top") ? [size({ apply({ rects, elements }) {
|
|
120
122
|
elements.floating.style.width = `${rects.reference.width}px`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"floating-controller.js","names":[],"sources":["../../../src/globals/controllers/floating-controller.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2024, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ReactiveController, ReactiveElement } from 'lit';\nimport {\n computePosition,\n flip,\n size,\n offset,\n arrow,\n autoUpdate,\n hide,\n Placement,\n type Boundary,\n} from '@floating-ui/dom';\n\ntype FloatingControllerOptions = {\n target: HTMLElement;\n trigger: HTMLElement;\n alignment: string;\n\n arrowElement?: HTMLElement | undefined;\n flipArguments?: object;\n caret?: boolean;\n\n styleElement?: HTMLElement;\n matchWidth?: boolean;\n open: boolean;\n alignmentAxisOffset?: number;\n autoAlignBoundary?: Boundary;\n isTabTip?: boolean;\n};\n\n/**\n * Controller for positioning the menu using Floating UI.\n */\nexport default class FloatingController implements ReactiveController {\n /**\n * Host component\n */\n private host: ReactiveElement;\n /**\n * Floating-ui options to pass to `computePlacement()`\n */\n private options!: FloatingControllerOptions;\n /**\n * cleanup function to stop auto updates\n */\n private cleanup?: () => void;\n\n /**\n * register with host component\n * @param host host component\n */\n constructor(host: ReactiveElement) {\n this.host = host;\n host.addController(this);\n }\n\n async setPlacement(options: FloatingControllerOptions = this.options) {\n this.options = options;\n const { trigger, target } = options;\n this.cleanup = autoUpdate(trigger, target, this.updatePlacement);\n }\n\n updatePlacement = (): void => {\n this.computePlacement();\n };\n\n async computePlacement() {\n const {\n arrowElement,\n alignment,\n caret,\n trigger,\n target,\n styleElement,\n matchWidth,\n open,\n alignmentAxisOffset,\n autoAlignBoundary,\n isTabTip,\n } = this.options;\n\n const isListBox = target?.role === 'listbox';\n const isMenu = target?.localName === 'cds-custom-menu';\n\n const element = styleElement ?? target;\n\n if (!element) return;\n\n let shimmedAlign;\n switch (alignment) {\n case 'top-left':\n shimmedAlign = 'top-start';\n break;\n case 'top-right':\n shimmedAlign = 'top-end';\n break;\n case 'bottom-left':\n shimmedAlign = 'bottom-start';\n break;\n case 'bottom-right':\n shimmedAlign = 'bottom-end';\n break;\n case 'left-bottom':\n shimmedAlign = 'left-end';\n break;\n case 'left-top':\n shimmedAlign = 'left-start';\n break;\n case 'right-bottom':\n shimmedAlign = 'right-end';\n break;\n case 'right-top':\n shimmedAlign = 'right-start';\n break;\n default:\n shimmedAlign = alignment;\n break;\n }\n const cs = getComputedStyle(element);\n const toPx = (val: string) => {\n const raw = parseFloat(val);\n return val.trim().endsWith('rem') ? raw * 16 : raw;\n };\n const offsetPx = !isTabTip\n ? (toPx(cs.getPropertyValue('--cds-popover-offset').trim()) ?? 10)\n : 0;\n\n const middleware = [\n offset(\n !isTabTip\n ? {\n alignmentAxis: alignmentAxisOffset,\n // Use 4px spacing when no caret, otherwise use the caret offset\n mainAxis: caret ? offsetPx : 4,\n }\n : 0\n ),\n flip({\n fallbackPlacements: isTabTip\n ? shimmedAlign.includes('bottom')\n ? ['bottom-start', 'bottom-end', 'top-start', 'top-end']\n : ['top-start', 'top-end', 'bottom-start', 'bottom-end']\n : isListBox || isMenu\n ? ['top', 'bottom']\n : shimmedAlign.includes('bottom')\n ? [\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'right',\n 'right-start',\n 'right-end',\n 'left',\n 'left-start',\n 'left-end',\n 'top',\n 'top-start',\n 'top-end',\n ]\n : [\n 'top',\n 'top-start',\n 'top-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n ],\n\n fallbackStrategy: 'initialPlacement',\n fallbackAxisSideDirection: 'start',\n boundary: autoAlignBoundary,\n }),\n ...(matchWidth && (shimmedAlign === 'bottom' || shimmedAlign === 'top')\n ? [\n size({\n apply({ rects, elements }) {\n elements.floating.style.width = `${rects.reference.width}px`;\n },\n }),\n ]\n : [\n size({\n apply({ elements }) {\n elements.floating.style.removeProperty('width');\n },\n }),\n ]),\n\n ...(caret && arrowElement\n ? [arrow({ element: arrowElement, padding: 15 })]\n : []),\n\n ...[hide()],\n ];\n\n if (open) {\n const { x, y, placement, middlewareData, strategy } =\n await computePosition(trigger, element, {\n strategy: 'fixed',\n middleware,\n placement: shimmedAlign as Placement,\n });\n\n element.setAttribute('align', placement);\n\n element.style.left = `${x}px`;\n element.style.top = `${y}px`;\n element.style.position = `${strategy}`;\n\n element.style.visibility = middlewareData.hide?.referenceHidden\n ? 'hidden'\n : 'visible';\n\n if (arrowElement) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n const staticSide: any = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[placement.split('-')[0]];\n\n arrowElement.style.left = arrowX != null ? `${arrowX}px` : '';\n arrowElement.style.top = arrowY != null ? `${arrowY}px` : '';\n arrowElement.style.right = '';\n arrowElement.style.bottom = '';\n arrowElement.style[staticSide] = `${-arrowElement.offsetWidth / 2}px`;\n }\n\n // adding specific case here where the style of the caret/arrow\n // is dependent on the placement\n // TODO: remove reference to slug in v12\n if (\n this.host.tagName === 'CDS-AI-LABEL' ||\n this.host.tagName === 'CDS-SLUG'\n ) {\n this.host?.setAttribute('alignment', placement);\n }\n }\n }\n\n hostUpdated(): void {\n if (!this.host.hasAttribute('open')) {\n this.cleanup?.();\n this.cleanup = undefined;\n }\n }\n\n hostDisconnected(): void {\n this.cleanup?.();\n this.cleanup = undefined;\n }\n}\n"],"mappings":";;;;;;;;;;;;AAwCA,IAAqB,qBAArB,MAAsE;;;;;CAkBpE,YAAY,MAAuB;+BAWL;AAC5B,QAAK,kBAAkB;;AAXvB,OAAK,OAAO;AACZ,OAAK,cAAc,KAAK;;CAG1B,MAAM,aAAa,UAAqC,KAAK,SAAS;AACpE,OAAK,UAAU;EACf,MAAM,EAAE,SAAS,WAAW;AAC5B,OAAK,UAAU,WAAW,SAAS,QAAQ,KAAK,gBAAgB;;CAOlE,MAAM,mBAAmB;EACvB,MAAM,EACJ,cACA,WACA,OACA,SACA,QACA,cACA,YACA,MACA,qBACA,mBACA,aACE,KAAK;EAET,MAAM,YAAY,QAAQ,SAAS;EACnC,MAAM,SAAS,QAAQ,cAAc;EAErC,MAAM,UAAU,gBAAgB;AAEhC,MAAI,CAAC,QAAS;EAEd,IAAI;AACJ,UAAQ,WAAR;GACE,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF;AACE,mBAAe;AACf;;EAEJ,MAAM,KAAK,iBAAiB,QAAQ;EACpC,MAAM,QAAQ,QAAgB;GAC5B,MAAM,MAAM,WAAW,IAAI;AAC3B,UAAO,IAAI,MAAM,CAAC,SAAS,MAAM,GAAG,MAAM,KAAK;;EAEjD,MAAM,WAAW,CAAC,WACb,KAAK,GAAG,iBAAiB,uBAAuB,CAAC,MAAM,CAAC,IAAI,KAC7D;EAEJ,MAAM,aAAa;GACjB,OACE,CAAC,WACG;IACE,eAAe;IAEf,UAAU,QAAQ,WAAW;IAC9B,GACD,EACL;GACD,KAAK;IACH,oBAAoB,WAChB,aAAa,SAAS,SAAS,GAC7B;KAAC;KAAgB;KAAc;KAAa;KAAU,GACtD;KAAC;KAAa;KAAW;KAAgB;KAAa,GACxD,aAAa,SACX,CAAC,OAAO,SAAS,GACjB,aAAa,SAAS,SAAS,GAC7B;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD,GACD;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD;IAET,kBAAkB;IAClB,2BAA2B;IAC3B,UAAU;IACX,CAAC;GACF,GAAI,eAAe,iBAAiB,YAAY,iBAAiB,SAC7D,CACE,KAAK,EACH,MAAM,EAAE,OAAO,YAAY;AACzB,aAAS,SAAS,MAAM,QAAQ,GAAG,MAAM,UAAU,MAAM;MAE5D,CAAC,CACH,GACD,CACE,KAAK,EACH,MAAM,EAAE,YAAY;AAClB,aAAS,SAAS,MAAM,eAAe,QAAQ;MAElD,CAAC,CACH;GAEL,GAAI,SAAS,eACT,CAAC,MAAM;IAAE,SAAS;IAAc,SAAS;IAAI,CAAC,CAAC,GAC/C,EAAE;GAEN,GAAG,CAAC,MAAM,CAAC;GACZ;AAED,MAAI,MAAM;GACR,MAAM,EAAE,GAAG,GAAG,WAAW,gBAAgB,aACvC,MAAM,gBAAgB,SAAS,SAAS;IACtC,UAAU;IACV;IACA,WAAW;IACZ,CAAC;AAEJ,WAAQ,aAAa,SAAS,UAAU;AAExC,WAAQ,MAAM,OAAO,GAAG,EAAE;AAC1B,WAAQ,MAAM,MAAM,GAAG,EAAE;AACzB,WAAQ,MAAM,WAAW,GAAG;AAE5B,WAAQ,MAAM,aAAa,eAAe,MAAM,kBAC5C,WACA;AAEJ,OAAI,cAAc;IAGhB,MAAM,EAAE,GAAG,QAAQ,GAAG,WAAW,eAAe;IAGhD,MAAM,aAAkB;KACtB,KAAK;KACL,OAAO;KACP,QAAQ;KACR,MAAM;KACP,CAAC,UAAU,MAAM,IAAI,CAAC;AAEvB,iBAAa,MAAM,OAAO,UAAU,OAAO,GAAG,OAAO,MAAM;AAC3D,iBAAa,MAAM,MAAM,UAAU,OAAO,GAAG,OAAO,MAAM;AAC1D,iBAAa,MAAM,QAAQ;AAC3B,iBAAa,MAAM,SAAS;AAC5B,iBAAa,MAAM,cAAc,GAAG,CAAC,aAAa,cAAc,EAAE;;AAMpE,OACE,KAAK,KAAK,YAAY,kBACtB,KAAK,KAAK,YAAY,WAEtB,MAAK,MAAM,aAAa,aAAa,UAAU;;;CAKrD,cAAoB;AAClB,MAAI,CAAC,KAAK,KAAK,aAAa,OAAO,EAAE;AACnC,QAAK,WAAW;AAChB,QAAK,UAAU,KAAA;;;CAInB,mBAAyB;AACvB,OAAK,WAAW;AAChB,OAAK,UAAU,KAAA"}
|
|
1
|
+
{"version":3,"file":"floating-controller.js","names":[],"sources":["../../../src/globals/controllers/floating-controller.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2024, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ReactiveController, ReactiveElement } from 'lit';\nimport {\n computePosition,\n flip,\n size,\n offset,\n arrow,\n autoUpdate,\n hide,\n Placement,\n type Boundary,\n} from '@floating-ui/dom';\n\ntype FloatingControllerOptions = {\n target: HTMLElement;\n trigger: HTMLElement;\n alignment: string;\n\n arrowElement?: HTMLElement | undefined;\n flipArguments?: Parameters<typeof flip>[0];\n caret?: boolean;\n\n styleElement?: HTMLElement;\n matchWidth?: boolean;\n open: boolean;\n alignmentAxisOffset?: number;\n mainAxisOffset?: number;\n autoAlignBoundary?: Boundary;\n isTabTip?: boolean;\n};\n\n/**\n * Controller for positioning the menu using Floating UI.\n */\nexport default class FloatingController implements ReactiveController {\n /**\n * Host component\n */\n private host: ReactiveElement;\n /**\n * Floating-ui options to pass to `computePlacement()`\n */\n private options!: FloatingControllerOptions;\n /**\n * cleanup function to stop auto updates\n */\n private cleanup?: () => void;\n\n /**\n * register with host component\n * @param host host component\n */\n constructor(host: ReactiveElement) {\n this.host = host;\n host.addController(this);\n }\n\n async setPlacement(options: FloatingControllerOptions = this.options) {\n this.options = options;\n const { trigger, target } = options;\n this.cleanup?.();\n this.cleanup = autoUpdate(trigger, target, this.updatePlacement);\n }\n\n updatePlacement = (): void => {\n this.computePlacement();\n };\n\n async computePlacement() {\n const {\n arrowElement,\n alignment,\n caret,\n trigger,\n target,\n styleElement,\n matchWidth,\n open,\n alignmentAxisOffset,\n mainAxisOffset,\n autoAlignBoundary,\n isTabTip,\n flipArguments,\n } = this.options;\n\n const isListBox = target?.role === 'listbox';\n const isMenu = target?.localName === 'cds-custom-menu';\n\n const element = styleElement ?? target;\n\n if (!element) return;\n\n let shimmedAlign;\n switch (alignment) {\n case 'top-left':\n shimmedAlign = 'top-start';\n break;\n case 'top-right':\n shimmedAlign = 'top-end';\n break;\n case 'bottom-left':\n shimmedAlign = 'bottom-start';\n break;\n case 'bottom-right':\n shimmedAlign = 'bottom-end';\n break;\n case 'left-bottom':\n shimmedAlign = 'left-end';\n break;\n case 'left-top':\n shimmedAlign = 'left-start';\n break;\n case 'right-bottom':\n shimmedAlign = 'right-end';\n break;\n case 'right-top':\n shimmedAlign = 'right-start';\n break;\n default:\n shimmedAlign = alignment;\n break;\n }\n const cs = getComputedStyle(element);\n const toPx = (val: string) => {\n const raw = parseFloat(val);\n return val.trim().endsWith('rem') ? raw * 16 : raw;\n };\n const offsetPx = !isTabTip\n ? (toPx(cs.getPropertyValue('--cds-popover-offset').trim()) ?? 10)\n : 0;\n\n const middleware = [\n offset(\n !isTabTip\n ? {\n alignmentAxis: alignmentAxisOffset,\n // Allow callers to override default trigger-to-surface spacing.\n // Fallback remains 4px for non-caret overlays.\n mainAxis: mainAxisOffset ?? (caret ? offsetPx : 4),\n }\n : 0\n ),\n flip({\n fallbackPlacements: isTabTip\n ? shimmedAlign.includes('bottom')\n ? ['bottom-start', 'bottom-end', 'top-start', 'top-end']\n : ['top-start', 'top-end', 'bottom-start', 'bottom-end']\n : isListBox || isMenu\n ? ['top', 'bottom']\n : shimmedAlign.includes('bottom')\n ? [\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'right',\n 'right-start',\n 'right-end',\n 'left',\n 'left-start',\n 'left-end',\n 'top',\n 'top-start',\n 'top-end',\n ]\n : [\n 'top',\n 'top-start',\n 'top-end',\n 'left',\n 'left-start',\n 'left-end',\n 'right',\n 'right-start',\n 'right-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n ],\n\n fallbackStrategy: 'initialPlacement',\n fallbackAxisSideDirection: 'start',\n boundary: autoAlignBoundary,\n ...flipArguments,\n }),\n ...(matchWidth && (shimmedAlign === 'bottom' || shimmedAlign === 'top')\n ? [\n size({\n apply({ rects, elements }) {\n elements.floating.style.width = `${rects.reference.width}px`;\n },\n }),\n ]\n : [\n size({\n apply({ elements }) {\n elements.floating.style.removeProperty('width');\n },\n }),\n ]),\n\n ...(caret && arrowElement\n ? [arrow({ element: arrowElement, padding: 15 })]\n : []),\n\n ...[hide()],\n ];\n\n if (open) {\n const { x, y, placement, middlewareData, strategy } =\n await computePosition(trigger, element, {\n strategy: 'fixed',\n middleware,\n placement: shimmedAlign as Placement,\n });\n\n element.setAttribute('align', placement);\n\n element.style.left = `${x}px`;\n element.style.top = `${y}px`;\n element.style.position = `${strategy}`;\n\n element.style.visibility = middlewareData.hide?.referenceHidden\n ? 'hidden'\n : 'visible';\n\n if (arrowElement) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n // @ts-ignore\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n const staticSide: any = {\n top: 'bottom',\n right: 'left',\n bottom: 'top',\n left: 'right',\n }[placement.split('-')[0]];\n\n arrowElement.style.left = arrowX != null ? `${arrowX}px` : '';\n arrowElement.style.top = arrowY != null ? `${arrowY}px` : '';\n arrowElement.style.right = '';\n arrowElement.style.bottom = '';\n arrowElement.style[staticSide] = `${-arrowElement.offsetWidth / 2}px`;\n }\n\n // adding specific case here where the style of the caret/arrow\n // is dependent on the placement\n // TODO: remove reference to slug in v12\n if (\n this.host.tagName === 'CDS-AI-LABEL' ||\n this.host.tagName === 'CDS-SLUG'\n ) {\n this.host?.setAttribute('alignment', placement);\n }\n }\n }\n\n hostUpdated(): void {\n if (!this.host.hasAttribute('open')) {\n this.cleanup?.();\n this.cleanup = undefined;\n }\n }\n\n hostDisconnected(): void {\n this.cleanup?.();\n this.cleanup = undefined;\n }\n}\n"],"mappings":";;;;;;;;;;;;AAyCA,IAAqB,qBAArB,MAAsE;;;;;CAkBpE,YAAY,MAAuB;+BAYL;AAC5B,QAAK,kBAAkB;;AAZvB,OAAK,OAAO;AACZ,OAAK,cAAc,KAAK;;CAG1B,MAAM,aAAa,UAAqC,KAAK,SAAS;AACpE,OAAK,UAAU;EACf,MAAM,EAAE,SAAS,WAAW;AAC5B,OAAK,WAAW;AAChB,OAAK,UAAU,WAAW,SAAS,QAAQ,KAAK,gBAAgB;;CAOlE,MAAM,mBAAmB;EACvB,MAAM,EACJ,cACA,WACA,OACA,SACA,QACA,cACA,YACA,MACA,qBACA,gBACA,mBACA,UACA,kBACE,KAAK;EAET,MAAM,YAAY,QAAQ,SAAS;EACnC,MAAM,SAAS,QAAQ,cAAc;EAErC,MAAM,UAAU,gBAAgB;AAEhC,MAAI,CAAC,QAAS;EAEd,IAAI;AACJ,UAAQ,WAAR;GACE,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF,KAAK;AACH,mBAAe;AACf;GACF;AACE,mBAAe;AACf;;EAEJ,MAAM,KAAK,iBAAiB,QAAQ;EACpC,MAAM,QAAQ,QAAgB;GAC5B,MAAM,MAAM,WAAW,IAAI;AAC3B,UAAO,IAAI,MAAM,CAAC,SAAS,MAAM,GAAG,MAAM,KAAK;;EAEjD,MAAM,WAAW,CAAC,WACb,KAAK,GAAG,iBAAiB,uBAAuB,CAAC,MAAM,CAAC,IAAI,KAC7D;EAEJ,MAAM,aAAa;GACjB,OACE,CAAC,WACG;IACE,eAAe;IAGf,UAAU,mBAAmB,QAAQ,WAAW;IACjD,GACD,EACL;GACD,KAAK;IACH,oBAAoB,WAChB,aAAa,SAAS,SAAS,GAC7B;KAAC;KAAgB;KAAc;KAAa;KAAU,GACtD;KAAC;KAAa;KAAW;KAAgB;KAAa,GACxD,aAAa,SACX,CAAC,OAAO,SAAS,GACjB,aAAa,SAAS,SAAS,GAC7B;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD,GACD;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD;IAET,kBAAkB;IAClB,2BAA2B;IAC3B,UAAU;IACV,GAAG;IACJ,CAAC;GACF,GAAI,eAAe,iBAAiB,YAAY,iBAAiB,SAC7D,CACE,KAAK,EACH,MAAM,EAAE,OAAO,YAAY;AACzB,aAAS,SAAS,MAAM,QAAQ,GAAG,MAAM,UAAU,MAAM;MAE5D,CAAC,CACH,GACD,CACE,KAAK,EACH,MAAM,EAAE,YAAY;AAClB,aAAS,SAAS,MAAM,eAAe,QAAQ;MAElD,CAAC,CACH;GAEL,GAAI,SAAS,eACT,CAAC,MAAM;IAAE,SAAS;IAAc,SAAS;IAAI,CAAC,CAAC,GAC/C,EAAE;GAEN,GAAG,CAAC,MAAM,CAAC;GACZ;AAED,MAAI,MAAM;GACR,MAAM,EAAE,GAAG,GAAG,WAAW,gBAAgB,aACvC,MAAM,gBAAgB,SAAS,SAAS;IACtC,UAAU;IACV;IACA,WAAW;IACZ,CAAC;AAEJ,WAAQ,aAAa,SAAS,UAAU;AAExC,WAAQ,MAAM,OAAO,GAAG,EAAE;AAC1B,WAAQ,MAAM,MAAM,GAAG,EAAE;AACzB,WAAQ,MAAM,WAAW,GAAG;AAE5B,WAAQ,MAAM,aAAa,eAAe,MAAM,kBAC5C,WACA;AAEJ,OAAI,cAAc;IAGhB,MAAM,EAAE,GAAG,QAAQ,GAAG,WAAW,eAAe;IAGhD,MAAM,aAAkB;KACtB,KAAK;KACL,OAAO;KACP,QAAQ;KACR,MAAM;KACP,CAAC,UAAU,MAAM,IAAI,CAAC;AAEvB,iBAAa,MAAM,OAAO,UAAU,OAAO,GAAG,OAAO,MAAM;AAC3D,iBAAa,MAAM,MAAM,UAAU,OAAO,GAAG,OAAO,MAAM;AAC1D,iBAAa,MAAM,QAAQ;AAC3B,iBAAa,MAAM,SAAS;AAC5B,iBAAa,MAAM,cAAc,GAAG,CAAC,aAAa,cAAc,EAAE;;AAMpE,OACE,KAAK,KAAK,YAAY,kBACtB,KAAK,KAAK,YAAY,WAEtB,MAAK,MAAM,aAAa,aAAa,UAAU;;;CAKrD,cAAoB;AAClB,MAAI,CAAC,KAAK,KAAK,aAAa,OAAO,EAAE;AACnC,QAAK,WAAW;AAChB,QAAK,UAAU,KAAA;;;CAInB,mBAAyB;AACvB,OAAK,WAAW;AAChB,OAAK,UAAU,KAAA"}
|
|
@@ -95,11 +95,11 @@ declare class CDSCheckbox extends CDSCheckbox_base {
|
|
|
95
95
|
*/
|
|
96
96
|
value: string;
|
|
97
97
|
/**
|
|
98
|
-
* Specify whether the Checkbox is in a
|
|
98
|
+
* Specify whether the Checkbox is in a warning state.
|
|
99
99
|
*/
|
|
100
100
|
warn: boolean;
|
|
101
101
|
/**
|
|
102
|
-
* Provide the text
|
|
102
|
+
* Provide the text displayed when the Checkbox is in a warning state.
|
|
103
103
|
*/
|
|
104
104
|
warnText: boolean;
|
|
105
105
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright IBM Corp. 2020,
|
|
2
|
+
* Copyright IBM Corp. 2020, 2026
|
|
3
3
|
*
|
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
@@ -39,6 +39,10 @@ export declare enum DROPDOWN_KEYBOARD_ACTION {
|
|
|
39
39
|
* Dropdown size.
|
|
40
40
|
*/
|
|
41
41
|
export declare enum DROPDOWN_SIZE {
|
|
42
|
+
/**
|
|
43
|
+
* Extra small size.
|
|
44
|
+
*/
|
|
45
|
+
EXTRA_SMALL = "xs",
|
|
42
46
|
/**
|
|
43
47
|
* Small size.
|
|
44
48
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,yBAAyB,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEhG;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;CAKhC,CAAC;AAEF;;GAEG;AACH,oBAAY,wBAAwB;IAClC;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,UAAU,eAAe;CAC1B;AAED;;GAEG;AACH,oBAAY,aAAa;IACvB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;CACb;AAED;;GAEG;AACH,oBAAY,aAAa;IACvB;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,MAAM,WAAW;CAClB;AAED;;GAEG;AACH,oBAAY,kBAAkB;IAC5B;;OAEG;IACH,GAAG,QAAQ;IAEX;;OAEG;IACH,MAAM,WAAW;CAClB"}
|
|
1
|
+
{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/defs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,yBAAyB,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEhG;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;CAKhC,CAAC;AAEF;;GAEG;AACH,oBAAY,wBAAwB;IAClC;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,UAAU,eAAe;IAEzB;;OAEG;IACH,UAAU,eAAe;CAC1B;AAED;;GAEG;AACH,oBAAY,aAAa;IACvB;;OAEG;IACH,WAAW,OAAO;IAElB;;OAEG;IACH,KAAK,OAAO;IAEZ;;OAEG;IACH,MAAM,OAAO;IAEb;;OAEG;IACH,KAAK,OAAO;CACb;AAED;;GAEG;AACH,oBAAY,aAAa;IACvB;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,MAAM,WAAW;CAClB;AAED;;GAEG;AACH,oBAAY,kBAAkB;IAC5B;;OAEG;IACH,GAAG,QAAQ;IAEX;;OAEG;IACH,MAAM,WAAW;CAClB"}
|
|
@@ -43,6 +43,10 @@ let DROPDOWN_KEYBOARD_ACTION = /* @__PURE__ */ function(DROPDOWN_KEYBOARD_ACTION
|
|
|
43
43
|
* Dropdown size.
|
|
44
44
|
*/
|
|
45
45
|
let DROPDOWN_SIZE = /* @__PURE__ */ function(DROPDOWN_SIZE) {
|
|
46
|
+
/**
|
|
47
|
+
* Extra small size.
|
|
48
|
+
*/
|
|
49
|
+
DROPDOWN_SIZE["EXTRA_SMALL"] = "xs";
|
|
46
50
|
/**
|
|
47
51
|
* Small size.
|
|
48
52
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/dropdown/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020,
|
|
1
|
+
{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/dropdown/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\nexport { FORM_ELEMENT_COLOR_SCHEME as DROPDOWN_COLOR_SCHEME } from '../../globals/shared-enums';\n\n/**\n * Navigation direction, associated with key symbols.\n */\nexport const NAVIGATION_DIRECTION = {\n Up: -1,\n ArrowUp: -1,\n Down: 1,\n ArrowDown: 1,\n};\n\n/**\n * The keyboard action categories for dropdown.\n */\nexport enum DROPDOWN_KEYBOARD_ACTION {\n /**\n * Not doing any action.\n */\n NONE = 'none',\n\n /**\n * Keyboard action to close menu.\n */\n CLOSING = 'closing',\n\n /**\n * Keyboard action to navigate back/forward.\n */\n NAVIGATING = 'navigating',\n\n /**\n * Keyboard action to open/close menu on the trigger button or select/deselect a menu item.\n */\n TRIGGERING = 'triggering',\n}\n\n/**\n * Dropdown size.\n */\nexport enum DROPDOWN_SIZE {\n /**\n * Extra small size.\n */\n EXTRA_SMALL = 'xs',\n\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/**\n * Dropdown types.\n */\nexport enum DROPDOWN_TYPE {\n /**\n * Default type.\n */\n DEFAULT = '',\n\n /**\n * Inline type.\n */\n INLINE = 'inline',\n}\n\n/**\n * Dropdown direction.\n */\nexport enum DROPDOWN_DIRECTION {\n /**\n * Top.\n */\n TOP = 'top',\n\n /**\n * Bottom.\n */\n BOTTOM = 'bottom',\n}\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAa,uBAAuB;CAClC,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;CACZ;;;;AAKD,IAAY,2BAAL,yBAAA,0BAAA;;;;AAIL,0BAAA,UAAA;;;;AAKA,0BAAA,aAAA;;;;AAKA,0BAAA,gBAAA;;;;AAKA,0BAAA,gBAAA;;KACD;;;;AAKD,IAAY,gBAAL,yBAAA,eAAA;;;;AAIL,eAAA,iBAAA;;;;AAKA,eAAA,WAAA;;;;AAKA,eAAA,YAAA;;;;AAKA,eAAA,WAAA;;KACD;;;;AAKD,IAAY,gBAAL,yBAAA,eAAA;;;;AAIL,eAAA,aAAA;;;;AAKA,eAAA,YAAA;;KACD;;;;AAKD,IAAY,qBAAL,yBAAA,oBAAA;;;;AAIL,oBAAA,SAAA;;;;AAKA,oBAAA,YAAA;;KACD"}
|