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-custom/components/combo-box/combo-box.scss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combo-box.scss.js","names":[],"sources":["../../../src/components/combo-box/combo-box.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/utilities/focus-outline' as ;\n@use '@carbon/styles/scss/utilities/convert' as ;\n@use '@carbon/styles/scss/layout' as ;\n@use '@carbon/styles/scss/components/combo-box' as ;\n@use '@carbon/styles/scss/components/form';\n@use '@carbon/styles/scss/components/text-input/text-input';\n@use '../dropdown/dropdown';\n\n:host(#{$prefix}-combo-box) {\n @extend :host(#{$prefix}-dropdown);\n @include emit-layout-tokens();\n\n outline: none;\n\n .#{$prefix}--assistive-text {\n inset-block-start: -100%;\n // Hides screen reader cursor\n inset-inline-start: -100%;\n }\n\n .#{$prefix}--list-box__field {\n padding: 0;\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}-combo-box) .#{$prefix}--text-input--highlighted-outline {\n outline: 1px solid $focus;\n outline-offset: -1px;\n}\n\n:host(#{$prefix}-combo-box[disabled]),\n:host(#{$prefix}-combo-box[read-only]) {\n .#{$prefix}--list-box__selection {\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-combo-box[invalid]:not([disabled]):not([read-only])) {\n .#{$prefix}--form__helper-text {\n color: $text-error;\n }\n}\n\n:host(#{$prefix}-combo-box[warn]) {\n .#{$prefix}--form__helper-text {\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-combo-box[read-only]) {\n .#{$prefix}--combo-box,\n .#{$prefix}--combo-box:hover {\n background-color: transparent;\n }\n\n .#{$prefix}--text-input {\n border-block-end-color: $border-subtle;\n }\n\n .#{$prefix}--list-box__menu-icon,\n .#{$prefix}--list-box__selection {\n cursor: default;\n }\n\n .#{$prefix}--list-box__menu-icon svg,\n .#{$prefix}--list-box__selection svg {\n fill: $icon-disabled;\n }\n}\n\n:host(#{$prefix}-combo-box-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}-combo-box-item:not([disabled]):hover) {\n background-color: $layer-hover;\n}\n\n:host(#{$prefix}-combo-box-item:first-of-type)\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n}\n\n:host(#{$prefix}-combo-box-item:first-of-type[highlighted]) {\n @include focus-outline('reset');\n\n &::before {\n position: absolute;\n border: 2px solid $focus;\n block-size: 100%;\n border-block-start: 1px solid $focus;\n content: '';\n inline-size: 100%;\n inset-block-start: 0;\n inset-inline-start: 0;\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-combo-box-item[highlighted-next-sibling]),\n:host(#{$prefix}-combo-box-item[hovered-next-sibling])\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n}\n\n:host(#{$prefix}-combo-box-item[disabled]) {\n cursor: not-allowed;\n\n .#{$prefix}--list-box__menu-item__option {\n color: $text-disabled;\n cursor: not-allowed;\n pointer-events: none;\n text-decoration: none;\n }\n}\n\n:host(#{$prefix}-combo-box-item[disabled][highlighted-next-sibling]:hover),\n:host(#{$prefix}-combo-box-item[disabled][hovered-next-sibling]:hover)\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: $border-subtle;\n}\n\n:host(#{$prefix}-combo-box-item[disabled]:hover)\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: $border-subtle-01;\n}\n\n:host(#{$prefix}-combo-box-item[highlighted]) {\n @extend .#{$prefix}--list-box__menu-item--highlighted;\n}\n\n:host(#{$prefix}-combo-box-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}-combo-box-item[selected-next-sibling])\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n}\n\n:host(#{$prefix}-combo-box-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}-combo-box-item[size='sm']) {\n block-size: $spacing-07;\n\n .#{$prefix}--list-box__menu-item__option {\n padding-block: to-rem(7px);\n }\n}\n\n:host(#{$prefix}-combo-box-item[size='lg']) {\n block-size: $spacing-09;\n\n .#{$prefix}--list-box__menu-item__option {\n padding-block: to-rem(15px);\n }\n}\n\n:host(#{$prefix}-combo-box[size='sm']) {\n .#{$prefix}--list-box__menu-icon {\n inset-block: $spacing-02;\n }\n}\n\n:host(#{$prefix}-combo-box[size='lg']) {\n .#{$prefix}--list-box__menu-icon {\n inset-block: $spacing-04;\n }\n}\n\n:host(#{$prefix}-combo-box[ai-label]) {\n @extend .#{$prefix}--list-box__wrapper--slug;\n\n .#{$prefix}--list-box__wrapper--decorator {\n @include ai-gradient;\n }\n\n .#{$prefix}--list-box__field {\n padding: 0;\n }\n\n .#{$prefix}--list-box__invalid-icon {\n /* stylelint-disable-next-line declaration-no-important /\n inset-inline-end: to-rem(83px) !important;\n }\n\n ::slotted(#{$prefix}-ai-label)::after,\n ::slotted(#{$prefix}-slug)::after {\n position: absolute;\n display: block;\n background-color: $border-subtle-01;\n block-size: $spacing-05;\n content: '';\n inline-size: to-rem(1px);\n inset-block-start: 0;\n inset-inline-end: to-rem(-9px);\n }\n\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: calc($spacing-08 + 9px);\n }\n\n ::slotted(#{$prefix}-ai-label:not([revert-active])),\n ::slotted(#{$prefix}-slug:not([revert-active])) {\n transform: translateY(-50%);\n }\n}\n\n:host(#{$prefix}-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 .#{$prefix}--list-box__field .#{$prefix}--text-input {\n padding-inline-end: to-rem(105px);\n }\n}\n\n:host(#{$prefix}-combo-box[warn]),\n:host(#{$prefix}-combo-box[invalid]) {\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n inset-inline-end: calc($spacing-08 + 9px);\n }\n\n ::slotted(#{$prefix}-ai-label)::before,\n ::slotted(#{$prefix}-slug)::before {\n position: absolute;\n display: block;\n background-color: $border-subtle-01;\n block-size: $spacing-05;\n content: '';\n inline-size: to-rem(1px);\n inset-block-start: 0;\n inset-inline-start: to-rem(-9px);\n }\n}\n\n:host(#{$prefix}-combo-box[warn][isClosable]:not([ai-label])),\n:host(#{$prefix}-combo-box[invalid][isClosable]:not([ai-label])) {\n .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__menu-icon)\n .#{$prefix}--list-box__selection::before {\n position: absolute;\n background-color: $border-subtle-01;\n block-size: to-rem(16px);\n content: '';\n inline-size: to-rem(1px);\n margin-inline-end: to-rem(33px);\n }\n}\n\n:host(#{$prefix}-combo-box[isClosable]) {\n .#{$prefix}--list-box__invalid-icon {\n / stylelint-disable-next-line declaration-no-important /\n inset-inline-end: calc($spacing-10 + 18px) !important;\n }\n\n .#{$prefix}--list-box__field .#{$prefix}--text-input {\n padding-inline-end: to-rem(80px);\n }\n}\n\n:host(#{$prefix}-combo-box[warn][isClosable]),\n:host(#{$prefix}-combo-box[invalid][isClosable]) {\n .#{$prefix}--list-box__field .#{$prefix}--text-input {\n padding-inline-end: to-rem(105px);\n }\n}\n\n:host(#{$prefix}-combo-box[warn][ai-label][isClosable]),\n:host(#{$prefix}-combo-box[invalid][ai-label][isClosable]) {\n .#{$prefix}--list-box__field .#{$prefix}--text-input {\n padding-inline-end: to-rem(141px);\n }\n\n .#{$prefix}--list-box__invalid-icon {\n / stylelint-disable-next-line declaration-no-important */\n inset-inline-end: to-rem(116px) !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"combo-box.scss.js","names":[],"sources":["../../../src/components/combo-box/combo-box.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/utilities/focus-outline' as ;\n@use '@carbon/styles/scss/utilities/convert' as ;\n@use '@carbon/styles/scss/layout' as ;\n@use '@carbon/styles/scss/components/combo-box' as ;\n@use '@carbon/styles/scss/components/form';\n@use '@carbon/styles/scss/components/text-input/text-input';\n@use '../dropdown/dropdown';\n\n:host(#{$prefix}-combo-box) {\n @extend :host(#{$prefix}-dropdown);\n @include emit-layout-tokens();\n\n outline: none;\n\n .#{$prefix}--assistive-text {\n inset-block-start: -100%;\n // Hides screen reader cursor\n inset-inline-start: -100%;\n }\n\n .#{$prefix}--list-box__field {\n padding: 0;\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}-combo-box) .#{$prefix}--text-input--highlighted-outline {\n outline: 1px solid $focus;\n outline-offset: -1px;\n}\n\n:host(#{$prefix}-combo-box[disabled]),\n:host(#{$prefix}-combo-box[read-only]) {\n .#{$prefix}--list-box__selection {\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-combo-box[invalid]:not([disabled]):not([read-only])) {\n .#{$prefix}--form__helper-text {\n color: $text-error;\n }\n}\n\n:host(#{$prefix}-combo-box[warn]) {\n .#{$prefix}--form__helper-text {\n color: $text-primary;\n }\n}\n\n:host(#{$prefix}-combo-box[read-only]) {\n .#{$prefix}--combo-box,\n .#{$prefix}--combo-box:hover {\n background-color: transparent;\n }\n\n .#{$prefix}--text-input {\n border-block-end-color: $border-subtle;\n }\n\n .#{$prefix}--list-box__menu-icon,\n .#{$prefix}--list-box__selection {\n cursor: default;\n }\n\n .#{$prefix}--list-box__menu-icon svg,\n .#{$prefix}--list-box__selection svg {\n fill: $icon-disabled;\n }\n}\n\n:host(#{$prefix}-combo-box-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}-combo-box-item:not([disabled]):hover) {\n background-color: $layer-hover;\n}\n\n:host(#{$prefix}-combo-box-item:first-of-type)\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n}\n\n:host(#{$prefix}-combo-box-item:first-of-type[highlighted]) {\n @include focus-outline('reset');\n\n &::before {\n position: absolute;\n border: 2px solid $focus;\n block-size: 100%;\n border-block-start: 1px solid $focus;\n content: '';\n inline-size: 100%;\n inset-block-start: 0;\n inset-inline-start: 0;\n pointer-events: none;\n }\n}\n\n:host(#{$prefix}-combo-box-item[highlighted-next-sibling]),\n:host(#{$prefix}-combo-box-item[hovered-next-sibling])\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n}\n\n:host(#{$prefix}-combo-box-item[disabled]) {\n cursor: not-allowed;\n\n .#{$prefix}--list-box__menu-item__option {\n color: $text-disabled;\n cursor: not-allowed;\n pointer-events: none;\n text-decoration: none;\n }\n}\n\n:host(#{$prefix}-combo-box-item[disabled][highlighted-next-sibling]:hover),\n:host(#{$prefix}-combo-box-item[disabled][hovered-next-sibling]:hover)\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: $border-subtle;\n}\n\n:host(#{$prefix}-combo-box-item[disabled]:hover)\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: $border-subtle-01;\n}\n\n:host(#{$prefix}-combo-box-item[highlighted]) {\n @extend .#{$prefix}--list-box__menu-item--highlighted;\n}\n\n:host(#{$prefix}-combo-box-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}-combo-box-item[selected-next-sibling])\n .#{$prefix}--list-box__menu-item__option {\n border-block-start-color: transparent;\n}\n\n:host(#{$prefix}-combo-box-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}-combo-box-item[size='sm']) {\n block-size: $spacing-07;\n\n .#{$prefix}--list-box__menu-item__option {\n padding-block: to-rem(7px);\n }\n}\n\n:host(#{$prefix}-combo-box-item[size='lg']) {\n block-size: $spacing-09;\n\n .#{$prefix}--list-box__menu-item__option {\n padding-block: to-rem(15px);\n }\n}\n\n:host(#{$prefix}-combo-box[size='sm']) {\n .#{$prefix}--list-box__menu-icon {\n inset-block: $spacing-02;\n }\n}\n\n:host(#{$prefix}-combo-box[size='lg']) {\n .#{$prefix}--list-box__menu-icon {\n inset-block: $spacing-04;\n }\n}\n\n:host(#{$prefix}-combo-box[ai-label]) {\n @extend .#{$prefix}--list-box__wrapper--slug;\n\n .#{$prefix}--list-box__wrapper--decorator {\n @include ai-gradient;\n }\n\n .#{$prefix}--list-box__field {\n padding: 0;\n }\n\n .#{$prefix}--list-box__invalid-icon {\n /* stylelint-disable-next-line declaration-no-important /\n inset-inline-end: to-rem(83px) !important;\n }\n\n ::slotted(#{$prefix}-ai-label)::after,\n ::slotted(#{$prefix}-slug)::after {\n position: absolute;\n display: block;\n background-color: $border-subtle-01;\n block-size: $spacing-05;\n content: '';\n inline-size: to-rem(1px);\n inset-block-start: 0;\n inset-inline-end: to-rem(-9px);\n }\n\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: calc($spacing-08 + 9px);\n }\n\n ::slotted(#{$prefix}-ai-label:not([revert-active])),\n ::slotted(#{$prefix}-slug:not([revert-active])) {\n transform: translateY(-50%);\n }\n}\n\n:host(#{$prefix}-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 .#{$prefix}--list-box__field .#{$prefix}--text-input {\n padding-inline-end: to-rem(105px);\n }\n}\n\n:host(#{$prefix}-combo-box[warn]),\n:host(#{$prefix}-combo-box[invalid]) {\n ::slotted(#{$prefix}-ai-label),\n ::slotted(#{$prefix}-slug) {\n inset-inline-end: calc($spacing-08 + 9px);\n }\n\n ::slotted(#{$prefix}-ai-label)::before,\n ::slotted(#{$prefix}-slug)::before {\n position: absolute;\n display: block;\n background-color: $border-subtle-01;\n block-size: $spacing-05;\n content: '';\n inline-size: to-rem(1px);\n inset-block-start: 0;\n inset-inline-start: to-rem(-9px);\n }\n}\n\n:host(#{$prefix}-combo-box[warn][isClosable]:not([ai-label])),\n:host(#{$prefix}-combo-box[invalid][isClosable]:not([ai-label])) {\n .#{$prefix}--list-box__field:has(.#{$prefix}--list-box__menu-icon)\n .#{$prefix}--list-box__selection::before {\n position: absolute;\n background-color: $border-subtle-01;\n block-size: to-rem(16px);\n content: '';\n inline-size: to-rem(1px);\n margin-inline-end: to-rem(33px);\n }\n}\n\n:host(#{$prefix}-combo-box[isClosable]) {\n .#{$prefix}--list-box__invalid-icon {\n / stylelint-disable-next-line declaration-no-important /\n inset-inline-end: calc($spacing-10 + 18px) !important;\n }\n\n .#{$prefix}--list-box__field .#{$prefix}--text-input {\n padding-inline-end: to-rem(80px);\n }\n}\n\n:host(#{$prefix}-combo-box[warn][isClosable]),\n:host(#{$prefix}-combo-box[invalid][isClosable]) {\n .#{$prefix}--list-box__field .#{$prefix}--text-input {\n padding-inline-end: to-rem(105px);\n }\n}\n\n:host(#{$prefix}-combo-box[warn][ai-label][isClosable]),\n:host(#{$prefix}-combo-box[invalid][ai-label][isClosable]) {\n .#{$prefix}--list-box__field .#{$prefix}--text-input {\n padding-inline-end: to-rem(141px);\n }\n\n .#{$prefix}--list-box__invalid-icon {\n / stylelint-disable-next-line declaration-no-important */\n inset-inline-end: to-rem(116px) !important;\n }\n}\n\n@include emit-layout-tokens-to-shadow-host('#{$prefix}-combo-box');\n"],"mappings":""}

package/es-custom/components/combo-button/combo-button.js CHANGED Viewed

@@ -13,10 +13,10 @@ import HostListener from "../../globals/decorators/host-listener.js";
 import HostListenerMixin from "../../globals/mixins/host-listener.js";
 import "../popover/defs.js";
 import FloatingController from "../../globals/controllers/floating-controller.js";
+import "../menu/index.js";
 import "../button/index.js";
 import "../icon-button/defs.js";
 import "../icon-button/index.js";
-import "../menu/index.js";
 import combo_button_default$1 from "./combo-button.scss.js";
 import { COMBO_BUTTON_SIZE, COMBO_BUTTON_TOOLTIP_ALIGNMENT } from "./defs.js";
 import { LitElement, html } from "lit";