npm - @carbon/web-components - Versions diffs - 2.58.1 → 2.59.0-rc.0 - Mend

@carbon/web-components 2.58.1 → 2.59.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 (537) hide show

package/es-custom/components/fluid-combo-box/fluid-combo-box.scss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fluid-combo-box.scss.js","names":[],"sources":["../../../src/components/fluid-combo-box/fluid-combo-box.scss?lit"],"sourcesContent":["/*\n Copyright IBM Corp. 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@use '@carbon/styles/scss/config' as ;\n@use '@carbon/styles/scss/components/fluid-combo-box/index';\n@use '@carbon/styles/scss/components/combo-box' as ;\n@use '@carbon/styles/scss/components/list-box' as ;\n@use '@carbon/styles/scss/layout' as ;\n@use '@carbon/styles/scss/spacing' as ;\n@use '@carbon/styles/scss/theme' as ;\n@use '@carbon/styles/scss/type' as ;\n@use '@carbon/styles/scss/utilities/skeleton' as ;\n@use '@carbon/styles/scss/utilities' as ;\n@use '@carbon/styles/scss/colors';\n@use '@carbon/styles/scss/utilities/convert' as *;\n\n:host(#{$prefix}-fluid-combo-box) {\n @extend .#{$prefix}--list-box__wrapper;\n @extend .#{$prefix}--list-box__wrapper--fluid;\n\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 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 .#{$prefix}--list-box--disabled {\n border-block-end-color: transparent;\n pointer-events: none;\n }\n\n .#{$prefix}--list-box__menu-item__selected-icon {\n inset-block-start: to-rem(20px);\n }\n\n .#{$prefix}--list-box__divider {\n display: block;\n border: none;\n margin: 0 1rem;\n border-block-end: 1px solid $border-subtle;\n }\n}\n\n:host(#{$prefix}-fluid-combo-box:not([is-condensed])) {\n ::slotted(#{$prefix}-combo-box-item) {\n block-size: $spacing-10;\n }\n}\n\n:host(#{$prefix}-fluid-combo-box[invalid]) {\n @extend .#{$prefix}--list-box__wrapper--fluid--invalid;\n @include focus-outline('invalid');\n\n outline-offset: 0;\n}\n\n// Direction top\n:host(#{$prefix}-fluid-combo-box[direction='top']) {\n @extend .#{$prefix}--list-box--up;\n\n .#{$prefix}--list-box__menu {\n inset-block-start: auto;\n }\n}\n\n// AI Label styles\n:host(#{$prefix}-fluid-combo-box[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: 73%;\n inset-inline-end: $spacing-09;\n }\n\n ::slotted(#{$prefix}-ai-label:not([revert-active])),\n ::slotted(#{$prefix}-slug:not([revert-active])) {\n transform: translateY(-73%);\n }\n\n .#{$prefix}--list-box__wrapper--decorator {\n @include ai-gradient;\n }\n}\n\n// AI label dividers - always present\n:host(#{$prefix}-fluid-combo-box[ai-label]) ::slotted(#{$prefix}-ai-label) {\n &::after {\n position: absolute;\n background-color: $border-subtle-01;\n block-size: to-rem(16px);\n content: '';\n inline-size: to-rem(1px);\n inset-inline-start: calc(#{$spacing-06} - to-rem(1px));\n }\n}\n\n:host(#{$prefix}-fluid-combo-box[ai-label][read-only]),\n:host(#{$prefix}-fluid-combo-box[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// Preserve AI gradient in invalid/warn states\n:host(\n #{$prefix}-fluid-combo-box[ai-label][invalid]:not([disabled]):not(\n [read-only]\n )\n ),\n:host(\n #{$prefix}-fluid-combo-box[ai-label][warn]:not([disabled]):not([read-only])\n ) {\n .#{$prefix}--list-box__wrapper--decorator {\n @include ai-gradient;\n }\n}\n\n// AI label - adjust position when clear button is visible\n:host(#{$prefix}-fluid-combo-box[ai-label][isClosable]) {\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n inset-inline-end: calc($spacing-10 + 18px);\n }\n}\n\n// Condensed styles\n:host(#{$prefix}-fluid-combo-box[is-condensed]) {\n @extend .#{$prefix}--list-box__wrapper--fluid--condensed;\n\n .#{$prefix}--list-box__menu-item__selected-icon {\n inset-block-start: auto;\n }\n\n ::slotted(#{$prefix}-combo-box-item) {\n block-size: auto;\n }\n}\n\n// Disabled state\n:host(#{$prefix}-fluid-combo-box[disabled]) {\n .#{$prefix}--list-box {\n cursor: not-allowed;\n }\n\n .#{$prefix}--list-box__menu-icon svg {\n fill: $icon-disabled;\n }\n\n .#{$prefix}--list-box__field,\n .#{$prefix}--list-box__selection {\n pointer-events: none;\n }\n\n .#{$prefix}--list-box__field:focus,\n .#{$prefix}--list-box__selection:focus {\n outline: none;\n }\n\n .#{$prefix}--label {\n color: $text-disabled;\n cursor: not-allowed;\n }\n}\n\n:host(#{$prefix}-fluid-combo-box[read-only]) {\n @extend .#{$prefix}--dropdown--readonly;\n\n .#{$prefix}--text-input {\n border-block-end-color: $border-subtle;\n }\n\n .#{$prefix}--list-box__field,\n .#{$prefix}--list-box__selection {\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-fluid-combo-box[invalid]:not([disabled]):not([read-only])),\n:host(#{$prefix}-fluid-combo-box[warn]:not([disabled]):not([read-only])) {\n .#{$prefix}--form__helper-text {\n padding: to-rem(8px) 4rem to-rem(8px) $spacing-05;\n inline-size: auto;\n margin-block-start: 0;\n }\n\n .#{$prefix}--list-box {\n border-block-end: 1px solid transparent;\n }\n\n .#{$prefix}--list-box.#{$prefix}--list-box--warning\n .#{$prefix}--list-box__invalid-icon,\n .#{$prefix}--list-box__invalid-icon--warning {\n inset-block-start: to-rem(81px);\n inset-inline-end: $spacing-05;\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-fluid-combo-box[warn]:not([disabled]):not([read-only])) {\n .#{$prefix}--form__helper-text {\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-fluid-combo-box[invalid]:not([disabled]):not([read-only])) {\n .#{$prefix}--form__helper-text {\n color: $text-error;\n }\n}\n\n// Skeleton\n:host(#{$prefix}-fluid-combo-box-skeleton) {\n @extend .#{$prefix}--list-box__wrapper--fluid;\n\n display: block;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"fluid-combo-box.scss.js","names":[],"sources":["../../../src/components/fluid-combo-box/fluid-combo-box.scss?lit"],"sourcesContent":["/*\n Copyright IBM Corp. 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@use '@carbon/styles/scss/config' as ;\n@use '@carbon/styles/scss/components/fluid-combo-box/index';\n@use '@carbon/styles/scss/components/combo-box' as ;\n@use '@carbon/styles/scss/components/list-box' as ;\n@use '@carbon/styles/scss/utilities/layout' as ;\n@use '@carbon/styles/scss/spacing' as ;\n@use '@carbon/styles/scss/theme' as ;\n@use '@carbon/styles/scss/type' as ;\n@use '@carbon/styles/scss/utilities/skeleton' as ;\n@use '@carbon/styles/scss/utilities' as ;\n@use '@carbon/styles/scss/colors';\n@use '@carbon/styles/scss/utilities/convert' as *;\n\n:host(#{$prefix}-fluid-combo-box) {\n @extend .#{$prefix}--list-box__wrapper;\n @extend .#{$prefix}--list-box__wrapper--fluid;\n\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 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 .#{$prefix}--list-box--disabled {\n border-block-end-color: transparent;\n pointer-events: none;\n }\n\n .#{$prefix}--list-box__menu-item__selected-icon {\n inset-block-start: to-rem(20px);\n }\n\n .#{$prefix}--list-box__divider {\n display: block;\n border: none;\n margin: 0 1rem;\n border-block-end: 1px solid $border-subtle;\n }\n}\n\n:host(#{$prefix}-fluid-combo-box:not([is-condensed])) {\n ::slotted(#{$prefix}-combo-box-item) {\n block-size: $spacing-10;\n }\n}\n\n:host(#{$prefix}-fluid-combo-box[invalid]) {\n @extend .#{$prefix}--list-box__wrapper--fluid--invalid;\n @include focus-outline('invalid');\n\n outline-offset: 0;\n}\n\n// Direction top\n:host(#{$prefix}-fluid-combo-box[direction='top']) {\n @extend .#{$prefix}--list-box--up;\n\n .#{$prefix}--list-box__menu {\n inset-block-start: auto;\n }\n}\n\n// AI Label styles\n:host(#{$prefix}-fluid-combo-box[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: 73%;\n inset-inline-end: $spacing-09;\n }\n\n ::slotted(#{$prefix}-ai-label:not([revert-active])),\n ::slotted(#{$prefix}-slug:not([revert-active])) {\n transform: translateY(-73%);\n }\n\n .#{$prefix}--list-box__wrapper--decorator {\n @include ai-gradient;\n }\n}\n\n// AI label dividers - always present\n:host(#{$prefix}-fluid-combo-box[ai-label]) ::slotted(#{$prefix}-ai-label) {\n &::after {\n position: absolute;\n background-color: $border-subtle-01;\n block-size: to-rem(16px);\n content: '';\n inline-size: to-rem(1px);\n inset-inline-start: calc(#{$spacing-06} - to-rem(1px));\n }\n}\n\n:host(#{$prefix}-fluid-combo-box[ai-label][read-only]),\n:host(#{$prefix}-fluid-combo-box[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// Preserve AI gradient in invalid/warn states\n:host(\n #{$prefix}-fluid-combo-box[ai-label][invalid]:not([disabled]):not(\n [read-only]\n )\n ),\n:host(\n #{$prefix}-fluid-combo-box[ai-label][warn]:not([disabled]):not([read-only])\n ) {\n .#{$prefix}--list-box__wrapper--decorator {\n @include ai-gradient;\n }\n}\n\n// AI label - adjust position when clear button is visible\n:host(#{$prefix}-fluid-combo-box[ai-label][isClosable]) {\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n inset-inline-end: calc($spacing-10 + 18px);\n }\n}\n\n// Condensed styles\n:host(#{$prefix}-fluid-combo-box[is-condensed]) {\n @extend .#{$prefix}--list-box__wrapper--fluid--condensed;\n\n .#{$prefix}--list-box__menu-item__selected-icon {\n inset-block-start: auto;\n }\n\n ::slotted(#{$prefix}-combo-box-item) {\n block-size: auto;\n }\n}\n\n// Disabled state\n:host(#{$prefix}-fluid-combo-box[disabled]) {\n .#{$prefix}--list-box {\n cursor: not-allowed;\n }\n\n .#{$prefix}--list-box__menu-icon svg {\n fill: $icon-disabled;\n }\n\n .#{$prefix}--list-box__field,\n .#{$prefix}--list-box__selection {\n pointer-events: none;\n }\n\n .#{$prefix}--list-box__field:focus,\n .#{$prefix}--list-box__selection:focus {\n outline: none;\n }\n\n .#{$prefix}--label {\n color: $text-disabled;\n cursor: not-allowed;\n }\n}\n\n:host(#{$prefix}-fluid-combo-box[read-only]) {\n @extend .#{$prefix}--dropdown--readonly;\n\n .#{$prefix}--text-input {\n border-block-end-color: $border-subtle;\n }\n\n .#{$prefix}--list-box__field,\n .#{$prefix}--list-box__selection {\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-fluid-combo-box[invalid]:not([disabled]):not([read-only])),\n:host(#{$prefix}-fluid-combo-box[warn]:not([disabled]):not([read-only])) {\n .#{$prefix}--form__helper-text {\n padding: to-rem(8px) 4rem to-rem(8px) $spacing-05;\n inline-size: auto;\n margin-block-start: 0;\n }\n\n .#{$prefix}--list-box {\n border-block-end: 1px solid transparent;\n }\n\n .#{$prefix}--list-box.#{$prefix}--list-box--warning\n .#{$prefix}--list-box__invalid-icon,\n .#{$prefix}--list-box__invalid-icon--warning {\n inset-block-start: to-rem(81px);\n inset-inline-end: $spacing-05;\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-fluid-combo-box[warn]:not([disabled]):not([read-only])) {\n .#{$prefix}--form__helper-text {\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-fluid-combo-box[invalid]:not([disabled]):not([read-only])) {\n .#{$prefix}--form__helper-text {\n color: $text-error;\n }\n}\n\n// Skeleton\n:host(#{$prefix}-fluid-combo-box-skeleton) {\n @extend .#{$prefix}--list-box__wrapper--fluid;\n\n display: block;\n}\n"],"mappings":""}