npm - @carbon/web-components - Versions diffs - 2.56.0-rc.0 → 2.57.0-rc.0 - Mend

@carbon/web-components 2.56.0-rc.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.

Files changed (110) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.scss.js","names":[],"sources":["../../../src/components/dropdown/dropdown.scss?lit"],"sourcesContent":["//\n// Copyright IBM Corp. 2019, ~~2025~~\n//\n// This source code is licensed under the Apache-2.0 license found in the\n// LICENSE file in the root directory of this source tree.\n//\n\n$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as ;\n@use '@carbon/styles/scss/spacing' as ;\n@use '@carbon/styles/scss/theme' as ;\n@use '@carbon/styles/scss/utilities' as ;\n@use '@carbon/styles/scss/components/list-box/list-box' as ;\n@use '@carbon/styles/scss/components/dropdown' as ;\n@use '@carbon/styles/scss/components/form';\n@use '@carbon/styles/scss/components/checkbox';\n@use '@carbon/styles/scss/components/tag';\n@use '@carbon/styles/scss/utilities/ai-gradient' as ;\n@use '@carbon/styles/scss/utilities/convert' as convert;\n\n// https://github.com/carbon-design-system/carbon/issues/11408\n@include list-box;\n\n:host(#{$prefix}-dropdown) {\n outline: none;\n\n .#{$prefix}--list-box {\n box-sizing: border-box;\n }\n\n .#{$prefix}--list-box--expanded {\n border-block-end-color: $border-subtle;\n }\n\n .#{$prefix}--assistive-text {\n inset-block-start: -100%;\n // Hides screen reader cursor\n inset-inline-start: -100%;\n }\n\n .#{$prefix}--label[hidden] {\n display: none;\n }\n\n .#{$prefix}--list-box__menu {\n inset-block-start: 100%;\n margin-block-start: 1px;\n outline: none;\n }\n}\n\n:host(#{$prefix}-dropdown[ai-label]) .#{$prefix}--list-box__wrapper--decorator {\n @include ai-gradient;\n}\n\n:host(#{$prefix}-dropdown[invalid]:not([disabled]):not([read-only])) {\n .#{$prefix}--form__helper-text {\n color: $text-error !important; / stylelint-disable-line declaration-no-important */\n }\n}\n\n:host(#{$prefix}-dropdown[read-only]) {\n @extend .#{$prefix}--dropdown--readonly;\n\n .#{$prefix}--list-box {\n background-color: transparent;\n border-block-end-color: $border-subtle;\n }\n}\n\n:host(#{$prefix}-dropdown[ai-label][read-only]),\n:host(#{$prefix}-dropdown[ai-label][disabled]) {\n .#{$prefix}--list-box {\n border-block-end-color: $ai-border-strong;\n }\n\n .#{$prefix}--list-box__field {\n border-block-end: 1px solid $ai-border-strong;\n }\n\n ::slotted(#{$prefix}-ai-label)::before {\n display: none;\n }\n}\n\n:host(#{$prefix}-combo-box[direction='top']),\n:host(#{$prefix}-dropdown[direction='top']) {\n @extend .#{$prefix}--list-box--up;\n\n .#{$prefix}--list-box__menu {\n inset-block-start: auto;\n }\n}\n\n:host(#{$prefix}-dropdown[type='inline']) {\n @extend .#{$prefix}--list-box__wrapper--inline;\n\n grid-gap: 0 $spacing-03;\n\n .#{$prefix}--list-box__menu {\n margin-block-start: 0;\n }\n}\n\n:host(#{$prefix}-dropdown[type='inline']) {\n .#{$prefix}--list-box.#{$prefix}--list-box--inline\n .#{$prefix}--list-box__field {\n padding-block: 0;\n padding-inline-end: $spacing-09;\n padding-inline-start: $spacing-05;\n }\n}\n\n:host(\n #{$prefix}-dropdown[type='inline'][warn]:not([disabled]):not([read-only])\n ),\n:host(\n #{$prefix}-dropdown[type='inline'][invalid]:not([disabled]):not([read-only])\n ) {\n .#{$prefix}--list-box.#{$prefix}--list-box--inline\n .#{$prefix}--list-box__field {\n padding-inline-end: $spacing-10;\n }\n}\n\n:host(\n #{$prefix}-dropdown[type='inline'][warn]:not([disabled]):not([read-only])\n ),\n:host(\n #{$prefix}-dropdown[type='inline'][invalid]:not([disabled]):not([read-only])\n ) {\n grid-template: auto / auto min-content auto;\n\n .#{$prefix}--form__helper-text {\n grid-column: 3;\n }\n}\n\n:host(#{$prefix}-dropdown[ai-label][type='inline'])\n .#{$prefix}--list-box__expanded {\n border-block-end: 1px solid $ai-border-strong;\n}\n\n:host(#{$prefix}-dropdown[ai-label][type='inline']:not([invalid]):not([warn]))\n .#{$prefix}--list-box.#{$prefix}--list-box--inline\n .#{$prefix}--list-box__field {\n padding-inline-end: $spacing-10;\n}\n\n:host(#{$prefix}-dropdown[ai-label][type='inline']:not([invalid])),\n:host(#{$prefix}-dropdown[ai-label][type='inline'][read-only]),\n:host(#{$prefix}-dropdown[ai-label][type='inline'][disabled])\n .#{$prefix}--list-box__field {\n border-block-end: 1px solid $ai-border-strong;\n}\n\n:host(#{$prefix}-dropdown[ai-label][type='inline'][warn]),\n:host(#{$prefix}-dropdown[ai-label][type='inline'][invalid]) {\n .#{$prefix}--list-box.#{$prefix}--list-box--inline\n .#{$prefix}--list-box__field {\n padding-inline-end: $spacing-12;\n }\n}\n\n:host(#{$prefix}-dropdown[type='inline']) .#{$prefix}--list-box__menu-icon {\n inset-inline-end: $spacing-04;\n}\n\n:host(#{$prefix}-dropdown[warn]:not([disabled]):not([read-only])) {\n .#{$prefix}--form__helper-text {\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-dropdown[warn]),\n:host(#{$prefix}-dropdown[invalid]) {\n .#{$prefix}--form__helper-text {\n grid-column: 2;\n }\n\n .#{$prefix}--list-box__field {\n padding-inline-end: $spacing-10;\n }\n\n .#{$prefix}--list-box__invalid-icon,\n .#{$prefix}--list-box__invalid-icon--warning {\n inset-inline-end: $spacing-08;\n }\n}\n\n:host(#{$prefix}-dropdown-item) {\n @extend .#{$prefix}--list-box__menu-item;\n\n display: block;\n\n .#{$prefix}--list-box__menu-item__option {\n block-size: auto;\n }\n}\n\n:host(#{$prefix}-dropdown-item:first-of-type) {\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n }\n}\n\n:host(#{$prefix}-dropdown-item:not([disabled]):hover) {\n background-color: $layer-hover;\n}\n\n:host(#{$prefix}-dropdown-item[highlighted]) {\n @extend .#{$prefix}--list-box__menu-item--highlighted;\n}\n\n:host(#{$prefix}-dropdown-item[highlighted-next-sibling])\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n}\n\n:host(#{$prefix}-dropdown-item[hovered-next-sibling])\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n}\n\n:host(#{$prefix}-dropdown-item[disabled])\n .#{$prefix}--list-box__menu-item__option {\n color: $text-disabled;\n cursor: not-allowed;\n text-decoration: none;\n}\n\n:host(#{$prefix}-dropdown[disabled][warn]),\n:host(#{$prefix}-dropdown[disabled][invalid]) {\n .#{$prefix}--list-box__field {\n padding-inline-end: $spacing-10;\n }\n}\n\n:host(#{$prefix}-dropdown-item[disabled][highlighted-next-sibling]:hover)\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: $border-subtle;\n}\n\n:host(#{$prefix}-dropdown-item[disabled]:hover)\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: $border-subtle-01;\n}\n\n:host(#{$prefix}-dropdown-item[selected]) {\n @extend .#{$prefix}--list-box__menu-item--active;\n\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n color: $text-primary;\n }\n\n .#{$prefix}--list-box__menu-item__selected-icon {\n display: block;\n }\n}\n\n:host(#{$prefix}-dropdown-item[selected-next-sibling])\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n}\n\n:host(#{$prefix}-dropdown-item[disabled][selected-next-sibling]:hover)\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: $border-subtle;\n}\n\n:host(#{$prefix}-dropdown-item[selected][highlighted]) {\n @extend .#{$prefix}--list-box__menu-item--highlighted;\n}\n\n:host(#{$prefix}-dropdown-item[size='sm']) {\n block-size: $spacing-07;\n\n .#{$prefix}--list-box__menu-item__option {\n padding-block: rem(7px);\n }\n}\n\n:host(#{$prefix}-dropdown-item[size='lg']) {\n block-size: $spacing-09;\n\n .#{$prefix}--list-box__menu-item__option {\n padding-block: rem(15px);\n }\n}\n\n:host(#{$prefix}-dropdown-skeleton) {\n @extend .#{$prefix}--form-item;\n\n .#{$prefix}--skeleton {\n @include skeleton;\n }\n}\n// AILabel styles\n$divider-width: 1px;\n\n:host(#{$prefix}-dropdown[ai-label]) {\n @extend .#{$prefix}--list-box__wrapper--slug;\n\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: $spacing-08;\n }\n\n ::slotted(#{$prefix}-ai-label) {\n display: inline-flex;\n align-items: center;\n margin-inline-end: convert.to-rem(9px);\n }\n\n ::slotted(#{$prefix}-ai-label)::after {\n position: absolute;\n display: block;\n background-color: $border-subtle-01;\n block-size: $spacing-05;\n content: '';\n inline-size: convert.to-rem(1px);\n inset-block-start: convert.to-rem(1px);\n inset-inline-end: calc(-#{$spacing-03} - #{$divider-width});\n }\n\n ::slotted(#{$prefix}-ai-label:not([revert-active])),\n ::slotted(#{$prefix}-slug:not([revert-active])) {\n transform: translateY(-50%);\n }\n\n .#{$prefix}--list-box__invalid-icon,\n .#{$prefix}--list-box__invalid-icon--warning {\n inset-inline-end: convert.to-rem(81px);\n }\n}\n\n:host(#{$prefix}-dropdown[ai-label][warn]:not([disabled]):not([read-only])),\n:host(#{$prefix}-dropdown[ai-label][invalid]:not([disabled]):not([read-only])) {\n .#{$prefix}--list-box {\n .#{$prefix}--list-box__field {\n padding-inline-end: $spacing-12;\n }\n }\n\n ::slotted(#{$prefix}-ai-label)::before {\n position: absolute;\n display: block;\n background-color: $border-subtle-01;\n block-size: $spacing-05;\n content: '';\n inline-size: convert.to-rem(1px);\n inset-block-start: convert.to-rem(1px);\n inset-inline-start: calc(-#{$spacing-03} - #{$divider-width});\n }\n\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n inset-inline-end: $spacing-08;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"dropdown.scss.js","names":[],"sources":["../../../src/components/dropdown/dropdown.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$css--plex: true !default;\n\n@use '@carbon/styles/scss/config' as ;\n@use '@carbon/styles/scss/spacing' as ;\n@use '@carbon/styles/scss/theme' as ;\n@use '@carbon/styles/scss/utilities' as ;\n@use '@carbon/styles/scss/components/list-box/list-box' as ;\n@use '@carbon/styles/scss/components/dropdown' as ;\n@use '@carbon/styles/scss/components/form';\n@use '@carbon/styles/scss/components/checkbox';\n@use '@carbon/styles/scss/components/tag';\n@use '@carbon/styles/scss/utilities/ai-gradient' as ;\n@use '@carbon/styles/scss/utilities/convert' as convert;\n@use '@carbon/styles/scss/layout' as ;\n\n// https://github.com/carbon-design-system/carbon/issues/11408\n@include list-box;\n\n:host(#{$prefix}-dropdown) {\n @include emit-layout-tokens();\n\n outline: none;\n\n .#{$prefix}--list-box {\n box-sizing: border-box;\n }\n\n .#{$prefix}--list-box--expanded {\n border-block-end-color: $border-subtle;\n }\n\n .#{$prefix}--assistive-text {\n inset-block-start: -100%;\n // Hides screen reader cursor\n inset-inline-start: -100%;\n }\n\n .#{$prefix}--label[hidden] {\n display: none;\n }\n\n .#{$prefix}--list-box__menu {\n inset-block-start: 100%;\n margin-block-start: 1px;\n outline: none;\n }\n}\n\n:host(#{$prefix}-dropdown[ai-label]) .#{$prefix}--list-box__wrapper--decorator {\n @include ai-gradient;\n}\n\n:host(#{$prefix}-dropdown[invalid]:not([disabled]):not([read-only])) {\n .#{$prefix}--form__helper-text {\n color: $text-error !important; /* stylelint-disable-line declaration-no-important */\n }\n}\n\n:host(#{$prefix}-dropdown[read-only]) {\n @extend .#{$prefix}--dropdown--readonly;\n\n .#{$prefix}--list-box {\n background-color: transparent;\n border-block-end-color: $border-subtle;\n }\n}\n\n:host(#{$prefix}-dropdown[ai-label][read-only]),\n:host(#{$prefix}-dropdown[ai-label][disabled]) {\n .#{$prefix}--list-box {\n border-block-end-color: $ai-border-strong;\n }\n\n .#{$prefix}--list-box__field {\n border-block-end: 1px solid $ai-border-strong;\n }\n\n ::slotted(#{$prefix}-ai-label)::before {\n display: none;\n }\n}\n\n:host(#{$prefix}-combo-box[direction='top']),\n:host(#{$prefix}-dropdown[direction='top']) {\n @extend .#{$prefix}--list-box--up;\n\n .#{$prefix}--list-box__menu {\n inset-block-start: auto;\n }\n}\n\n:host(#{$prefix}-dropdown[type='inline']) {\n @extend .#{$prefix}--list-box__wrapper--inline;\n\n grid-gap: 0 $spacing-03;\n\n .#{$prefix}--list-box__menu {\n margin-block-start: 0;\n }\n}\n\n:host(#{$prefix}-dropdown[type='inline']) {\n .#{$prefix}--list-box.#{$prefix}--list-box--inline\n .#{$prefix}--list-box__field {\n padding-block: 0;\n padding-inline-end: $spacing-09;\n padding-inline-start: $spacing-05;\n }\n}\n\n:host(\n #{$prefix}-dropdown[type='inline'][warn]:not([disabled]):not([read-only])\n ),\n:host(\n #{$prefix}-dropdown[type='inline'][invalid]:not([disabled]):not([read-only])\n ) {\n .#{$prefix}--list-box.#{$prefix}--list-box--inline\n .#{$prefix}--list-box__field {\n padding-inline-end: $spacing-10;\n }\n}\n\n:host(\n #{$prefix}-dropdown[type='inline'][warn]:not([disabled]):not([read-only])\n ),\n:host(\n #{$prefix}-dropdown[type='inline'][invalid]:not([disabled]):not([read-only])\n ) {\n grid-template: auto / auto min-content auto;\n\n .#{$prefix}--form__helper-text {\n grid-column: 3;\n }\n}\n\n:host(#{$prefix}-dropdown[ai-label][type='inline'])\n .#{$prefix}--list-box__expanded {\n border-block-end: 1px solid $ai-border-strong;\n}\n\n:host(#{$prefix}-dropdown[ai-label][type='inline']:not([invalid]):not([warn]))\n .#{$prefix}--list-box.#{$prefix}--list-box--inline\n .#{$prefix}--list-box__field {\n padding-inline-end: $spacing-10;\n}\n\n:host(#{$prefix}-dropdown[ai-label][type='inline']:not([invalid])),\n:host(#{$prefix}-dropdown[ai-label][type='inline'][read-only]),\n:host(#{$prefix}-dropdown[ai-label][type='inline'][disabled])\n .#{$prefix}--list-box__field {\n border-block-end: 1px solid $ai-border-strong;\n}\n\n:host(#{$prefix}-dropdown[ai-label][type='inline'][warn]),\n:host(#{$prefix}-dropdown[ai-label][type='inline'][invalid]) {\n .#{$prefix}--list-box.#{$prefix}--list-box--inline\n .#{$prefix}--list-box__field {\n padding-inline-end: $spacing-12;\n }\n}\n\n:host(#{$prefix}-dropdown[type='inline']) .#{$prefix}--list-box__menu-icon {\n inset-inline-end: $spacing-04;\n}\n\n:host(#{$prefix}-dropdown[warn]:not([disabled]):not([read-only])) {\n .#{$prefix}--form__helper-text {\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-dropdown[warn]),\n:host(#{$prefix}-dropdown[invalid]) {\n .#{$prefix}--form__helper-text {\n grid-column: 2;\n }\n\n .#{$prefix}--list-box__field {\n padding-inline-end: $spacing-10;\n }\n\n .#{$prefix}--list-box__invalid-icon,\n .#{$prefix}--list-box__invalid-icon--warning {\n inset-inline-end: $spacing-08;\n }\n}\n\n:host(#{$prefix}-dropdown-item) {\n @extend .#{$prefix}--list-box__menu-item;\n\n display: block;\n\n .#{$prefix}--list-box__menu-item__option {\n block-size: auto;\n }\n}\n\n:host(#{$prefix}-dropdown-item:first-of-type) {\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n }\n}\n\n:host(#{$prefix}-dropdown-item:not([disabled]):hover) {\n background-color: $layer-hover;\n}\n\n:host(#{$prefix}-dropdown-item[highlighted]) {\n @extend .#{$prefix}--list-box__menu-item--highlighted;\n}\n\n:host(#{$prefix}-dropdown-item[highlighted-next-sibling])\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n}\n\n:host(#{$prefix}-dropdown-item[hovered-next-sibling])\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n}\n\n:host(#{$prefix}-dropdown-item[disabled])\n .#{$prefix}--list-box__menu-item__option {\n color: $text-disabled;\n cursor: not-allowed;\n text-decoration: none;\n}\n\n:host(#{$prefix}-dropdown[disabled][warn]),\n:host(#{$prefix}-dropdown[disabled][invalid]) {\n .#{$prefix}--list-box__field {\n padding-inline-end: $spacing-10;\n }\n}\n\n:host(#{$prefix}-dropdown-item[disabled][highlighted-next-sibling]:hover)\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: $border-subtle;\n}\n\n:host(#{$prefix}-dropdown-item[disabled]:hover)\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: $border-subtle-01;\n}\n\n:host(#{$prefix}-dropdown-item[selected]) {\n @extend .#{$prefix}--list-box__menu-item--active;\n\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n color: $text-primary;\n }\n\n .#{$prefix}--list-box__menu-item__selected-icon {\n display: block;\n }\n}\n\n:host(#{$prefix}-dropdown-item[selected-next-sibling])\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n}\n\n:host(#{$prefix}-dropdown-item[disabled][selected-next-sibling]:hover)\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: $border-subtle;\n}\n\n:host(#{$prefix}-dropdown-item[selected][highlighted]) {\n @extend .#{$prefix}--list-box__menu-item--highlighted;\n}\n\n:host(#{$prefix}-dropdown-item[size='sm']) {\n block-size: $spacing-07;\n\n .#{$prefix}--list-box__menu-item__option {\n padding-block: rem(7px);\n }\n}\n\n:host(#{$prefix}-dropdown-item[size='lg']) {\n block-size: $spacing-09;\n\n .#{$prefix}--list-box__menu-item__option {\n padding-block: rem(15px);\n }\n}\n\n:host(#{$prefix}-dropdown-skeleton) {\n @extend .#{$prefix}--form-item;\n\n .#{$prefix}--skeleton {\n @include skeleton;\n }\n}\n// AILabel styles\n$divider-width: 1px;\n\n:host(#{$prefix}-dropdown[ai-label]) {\n @extend .#{$prefix}--list-box__wrapper--slug;\n\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: $spacing-08;\n }\n\n ::slotted(#{$prefix}-ai-label) {\n display: inline-flex;\n align-items: center;\n margin-inline-end: convert.to-rem(9px);\n }\n\n ::slotted(#{$prefix}-ai-label)::after {\n position: absolute;\n display: block;\n background-color: $border-subtle-01;\n block-size: $spacing-05;\n content: '';\n inline-size: convert.to-rem(1px);\n inset-block-start: convert.to-rem(1px);\n inset-inline-end: calc(-#{$spacing-03} - #{$divider-width});\n }\n\n ::slotted(#{$prefix}-ai-label:not([revert-active])),\n ::slotted(#{$prefix}-slug:not([revert-active])) {\n transform: translateY(-50%);\n }\n\n .#{$prefix}--list-box__invalid-icon,\n .#{$prefix}--list-box__invalid-icon--warning {\n inset-inline-end: convert.to-rem(81px);\n }\n}\n\n:host(#{$prefix}-dropdown[ai-label][warn]:not([disabled]):not([read-only])),\n:host(#{$prefix}-dropdown[ai-label][invalid]:not([disabled]):not([read-only])) {\n .#{$prefix}--list-box {\n .#{$prefix}--list-box__field {\n padding-inline-end: $spacing-12;\n }\n }\n\n ::slotted(#{$prefix}-ai-label)::before {\n position: absolute;\n display: block;\n background-color: $border-subtle-01;\n block-size: $spacing-05;\n content: '';\n inline-size: convert.to-rem(1px);\n inset-block-start: convert.to-rem(1px);\n inset-inline-start: calc(-#{$spacing-03} - #{$divider-width});\n }\n\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n inset-inline-end: $spacing-08;\n }\n}\n\n@include emit-layout-tokens-to-shadow-host('#{$prefix}-dropdown');\n"],"mappings":""}