@carbon/web-components 2.52.0-rc.0 → 2.52.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 +75 -0
- package/es/components/accordion/accordion.scss.js +1 -1
- package/es/components/accordion/accordion.scss.js.map +1 -1
- package/es/components/combo-box/combo-box.d.ts.map +1 -1
- package/es/components/combo-box/combo-box.js +2 -6
- package/es/components/combo-box/combo-box.js.map +1 -1
- package/es/components/layout/index.d.ts +10 -0
- package/es/components/layout/index.d.ts.map +1 -0
- package/es/components/layout/index.js +11 -0
- package/es/components/layout/layout-constraint.d.ts +24 -0
- package/es/components/layout/layout-constraint.d.ts.map +1 -0
- package/es/components/layout/layout-constraint.js +52 -0
- package/es/components/layout/layout-constraint.js.map +1 -0
- package/es/components/layout/layout.d.ts +34 -0
- package/es/components/layout/layout.d.ts.map +1 -0
- package/es/components/layout/layout.js +53 -0
- package/es/components/layout/layout.js.map +1 -0
- package/es/components/layout/layout.scss.js +15 -0
- package/es/components/layout/layout.scss.js.map +1 -0
- package/es/index.d.ts +2 -0
- package/es/index.d.ts.map +1 -1
- package/es/index.js +3 -1
- package/es-custom/components/accordion/accordion.scss.js +1 -1
- package/es-custom/components/accordion/accordion.scss.js.map +1 -1
- package/es-custom/components/combo-box/combo-box.d.ts.map +1 -1
- package/es-custom/components/combo-box/combo-box.js +2 -6
- package/es-custom/components/combo-box/combo-box.js.map +1 -1
- package/es-custom/components/layout/index.d.ts +10 -0
- package/es-custom/components/layout/index.d.ts.map +1 -0
- package/es-custom/components/layout/index.js +11 -0
- package/es-custom/components/layout/layout-constraint.d.ts +24 -0
- package/es-custom/components/layout/layout-constraint.d.ts.map +1 -0
- package/es-custom/components/layout/layout-constraint.js +52 -0
- package/es-custom/components/layout/layout-constraint.js.map +1 -0
- package/es-custom/components/layout/layout.d.ts +34 -0
- package/es-custom/components/layout/layout.d.ts.map +1 -0
- package/es-custom/components/layout/layout.js +53 -0
- package/es-custom/components/layout/layout.js.map +1 -0
- package/es-custom/components/layout/layout.scss.js +15 -0
- package/es-custom/components/layout/layout.scss.js.map +1 -0
- package/es-custom/index.d.ts +2 -0
- package/es-custom/index.d.ts.map +1 -1
- package/es-custom/index.js +3 -1
- package/lib/components/combo-box/combo-box.d.ts.map +1 -1
- package/lib/components/layout/index.d.ts +10 -0
- package/lib/components/layout/index.d.ts.map +1 -0
- package/lib/components/layout/layout-constraint.d.ts +24 -0
- package/lib/components/layout/layout-constraint.d.ts.map +1 -0
- package/lib/components/layout/layout.d.ts +34 -0
- package/lib/components/layout/layout.d.ts.map +1 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.d.ts.map +1 -1
- package/package.json +6 -6
- package/scss/components/accordion/accordion.scss +25 -0
- package/scss/components/layout/layout.scss +21 -0
- package/telemetry.yml +30 -0
package/custom-elements.json
CHANGED
|
@@ -10997,6 +10997,81 @@
|
|
|
10997
10997
|
}
|
|
10998
10998
|
]
|
|
10999
10999
|
},
|
|
11000
|
+
{
|
|
11001
|
+
"name": "cds-layout-constraint",
|
|
11002
|
+
"path": "./src/components/layout/layout-constraint.ts",
|
|
11003
|
+
"description": "`<cds-layout-constraint>` restricts the size range available to its\ndescendant components.",
|
|
11004
|
+
"attributes": [
|
|
11005
|
+
{
|
|
11006
|
+
"name": "size-default",
|
|
11007
|
+
"type": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"2xl\" | undefined"
|
|
11008
|
+
},
|
|
11009
|
+
{
|
|
11010
|
+
"name": "size-min",
|
|
11011
|
+
"type": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"2xl\" | undefined"
|
|
11012
|
+
},
|
|
11013
|
+
{
|
|
11014
|
+
"name": "size-max",
|
|
11015
|
+
"type": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"2xl\" | undefined"
|
|
11016
|
+
}
|
|
11017
|
+
],
|
|
11018
|
+
"properties": [
|
|
11019
|
+
{
|
|
11020
|
+
"name": "styles",
|
|
11021
|
+
"default": "\"styles\""
|
|
11022
|
+
},
|
|
11023
|
+
{
|
|
11024
|
+
"name": "sizeDefault",
|
|
11025
|
+
"attribute": "size-default",
|
|
11026
|
+
"type": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"2xl\" | undefined"
|
|
11027
|
+
},
|
|
11028
|
+
{
|
|
11029
|
+
"name": "sizeMin",
|
|
11030
|
+
"attribute": "size-min",
|
|
11031
|
+
"type": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"2xl\" | undefined"
|
|
11032
|
+
},
|
|
11033
|
+
{
|
|
11034
|
+
"name": "sizeMax",
|
|
11035
|
+
"attribute": "size-max",
|
|
11036
|
+
"type": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"2xl\" | undefined"
|
|
11037
|
+
}
|
|
11038
|
+
]
|
|
11039
|
+
},
|
|
11040
|
+
{
|
|
11041
|
+
"name": "cds-layout",
|
|
11042
|
+
"path": "./src/components/layout/layout.ts",
|
|
11043
|
+
"description": "`<cds-layout>` sets a layout context (size and/or density) for all\ndescendant Carbon components.",
|
|
11044
|
+
"attributes": [
|
|
11045
|
+
{
|
|
11046
|
+
"name": "size",
|
|
11047
|
+
"description": "Size context for all descendant components.",
|
|
11048
|
+
"type": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"2xl\" | undefined"
|
|
11049
|
+
},
|
|
11050
|
+
{
|
|
11051
|
+
"name": "density",
|
|
11052
|
+
"description": "Density context for all descendant components.",
|
|
11053
|
+
"type": "\"condensed\" | \"normal\" | undefined"
|
|
11054
|
+
}
|
|
11055
|
+
],
|
|
11056
|
+
"properties": [
|
|
11057
|
+
{
|
|
11058
|
+
"name": "styles",
|
|
11059
|
+
"default": "\"styles\""
|
|
11060
|
+
},
|
|
11061
|
+
{
|
|
11062
|
+
"name": "size",
|
|
11063
|
+
"attribute": "size",
|
|
11064
|
+
"description": "Size context for all descendant components.",
|
|
11065
|
+
"type": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"2xl\" | undefined"
|
|
11066
|
+
},
|
|
11067
|
+
{
|
|
11068
|
+
"name": "density",
|
|
11069
|
+
"attribute": "density",
|
|
11070
|
+
"description": "Density context for all descendant components.",
|
|
11071
|
+
"type": "\"condensed\" | \"normal\" | undefined"
|
|
11072
|
+
}
|
|
11073
|
+
]
|
|
11074
|
+
},
|
|
11000
11075
|
{
|
|
11001
11076
|
"name": "cds-link",
|
|
11002
11077
|
"path": "./src/components/link/link.ts",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
import { css } from "lit";
|
|
9
9
|
|
|
10
10
|
//#region src/components/accordion/accordion.scss?lit
|
|
11
|
-
var accordion_default = css([".cds--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--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--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--layer-one.cds--layer__with-background,.cds--layer-three.cds--layer__with-background,.cds--layer-two.cds--layer__with-background{background-color:var(--cds-layer-background)}.cds--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--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm,:host(cds-accordion-item-skeleton[size=sm]) button,:host(cds-accordion-item[size=sm]) button{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--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--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg,:host(cds-accordion-item-skeleton[size=lg]) button,:host(cds-accordion-item[size=lg]) button{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--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--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--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--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--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--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--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--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--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--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--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--accordion,:host(cds-accordion),:host(cds-accordion-skeleton){--cds-layout-size-height-local:clamp(max(var(--cds-layout-size-height-min),var(--cds-layout-size-height-sm)),var(--cds-layout-size-height,var(--cds-layout-size-height-md)),min(var(--cds-layout-size-height-max),var(--cds-layout-size-height-lg)));--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));border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--accordion *,.cds--accordion :after,.cds--accordion :before,:host(cds-accordion) *,:host(cds-accordion) :after,:host(cds-accordion) :before,:host(cds-accordion-skeleton) *,:host(cds-accordion-skeleton) :after,:host(cds-accordion-skeleton) :before{box-sizing:inherit}.cds--accordion,:host(cds-accordion),:host(cds-accordion-skeleton){inline-size:100%;list-style:none}.cds--accordion__item,:host(cds-accordion-item),:host(cds-accordion-item-skeleton){border-block-start:1px solid var(--cds-border-subtle);display:list-item;overflow:visible;transition:border-color .11s cubic-bezier(.2,0,.38,.9)}.cds--accordion__item:last-child{border-block-end:1px solid var(--cds-border-subtle)}.cds--accordion__item:not(.cds--accordion__item--active):hover,.cds--accordion__item:not(.cds--accordion__item--active):hover+.cds--accordion__item,.cds--accordion__item:not(.cds--accordion__item--active):hover+:host(cds-accordion-item),.cds--accordion__item:not(.cds--accordion__item--active):hover+:host(cds-accordion-item-skeleton){border-block-start-color:var(--cds-layer-hover)}.cds--accordion__item:not(.cds--accordion__item--active):last-child:hover{border-block-end-color:var(--cds-layer-hover)}.cds--accordion__heading{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;display:inline-block;font-family:inherit;font-size:100%;padding:0;text-align:start;transition:background-color .11s cubic-bezier(.2,0,.38,.9);vertical-align:baseline}.cds--accordion__heading *,.cds--accordion__heading :after,.cds--accordion__heading :before{box-sizing:inherit}.cds--accordion__heading::-moz-focus-inner{border:0}.cds--accordion__heading{align-items:center;color:var(--cds-text-primary,#161616);cursor:pointer;display:flex;flex-direction:row-reverse;inline-size:100%;justify-content:flex-start;margin:0;min-block-size:var(--cds-layout-size-height-local);padding-inline-end:var(--cds-layout-density-padding-inline-local);position:relative}.cds--accordion__heading:hover{background-color:var(--cds-layer-hover);outline:none}.cds--accordion__heading:focus{box-shadow:0 -1px 0 0 var(--cds-focus,#0f62fe),inset 0 1px 0 0 var(--cds-focus,#0f62fe),inset 2px 0 0 0 var(--cds-focus,#0f62fe),0 1px 0 0 var(--cds-focus,#0f62fe),inset 0 -1px 0 0 var(--cds-focus,#0f62fe),inset -2px 0 0 0 var(--cds-focus,#0f62fe);outline:none;position:relative;z-index:2}.cds--accordion__heading[disabled]{background-color:transparent;color:var(--cds-text-disabled,hsla(0,0%,9%,.25));cursor:not-allowed}.cds--accordion__heading[disabled] .cds--accordion__arrow{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds--accordion__heading[disabled]:hover:before{background-color:transparent}.cds--accordion__item--disabled,.cds--accordion__item--disabled+.cds--accordion__item,.cds--accordion__item--disabled+:host(cds-accordion-item),.cds--accordion__item--disabled+:host(cds-accordion-item-skeleton){border-block-start:1px solid var(--cds-border-subtle)}li.cds--accordion__item--disabled:last-of-type{border-block-end:1px solid var(--cds-border-subtle)}.cds--accordion__arrow{block-size:1rem;flex:0 0 1rem;outline:2px solid transparent;outline-offset:-2px;transition:all .11s cubic-bezier(.2,0,.38,.9);fill:var(--cds-icon-primary,#161616);inline-size:1rem;transform:rotate(-270deg)}.cds--accordion__title{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);inline-size:100%;letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);padding-inline-start:1rem;text-align:start;z-index:1}.cds--accordion__wrapper{display:none;max-block-size:0;opacity:0;overflow:hidden;padding:0;transition:all allow-discrete .11s cubic-bezier(0,0,.38,.9);writing-mode:horizontal-tb}.cds--accordion__content,:host(cds-accordion-item) .cds--accordion__content,:host(cds-accordion-item-skeleton) .cds--accordion__content{padding-inline:var(--cds-layout-density-padding-inline-local)}@media (min-width:480px){.cds--accordion__content,:host(cds-accordion-item) .cds--accordion__content,:host(cds-accordion-item-skeleton) .cds--accordion__content{padding-inline-end:3rem}}@media (min-width:640px){.cds--accordion__content,:host(cds-accordion-item) .cds--accordion__content,:host(cds-accordion-item-skeleton) .cds--accordion__content{padding-inline-end:25%}}.cds--accordion__content>p,:host(cds-accordion-item) .cds--accordion__content>p,:host(cds-accordion-item-skeleton) .cds--accordion__content>p{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857)}.cds--accordion--start .cds--accordion__heading,:host(cds-accordion-item-skeleton[alignment=start]) .cds--accordion__heading,:host(cds-accordion-item[alignment=start]) .cds--accordion__heading{flex-direction:row}.cds--accordion--start .cds--accordion__arrow,:host(cds-accordion-item-skeleton[alignment=start]) .cds--accordion__arrow,:host(cds-accordion-item[alignment=start]) .cds--accordion__arrow{margin:2px 0 0 var(--cds-layout-density-padding-inline-local)}.cds--accordion--start .cds--accordion__title,:host(cds-accordion-item-skeleton[alignment=start]) .cds--accordion__title,:host(cds-accordion-item[alignment=start]) .cds--accordion__title{margin-inline-end:1rem}.cds--accordion--start .cds--accordion__content,:host(cds-accordion-item-skeleton[alignment=start]) .cds--accordion__content,:host(cds-accordion-item[alignment=start]) .cds--accordion__content{margin-inline-start:calc(var(--cds-layout-density-padding-inline-local) + 1rem)}.cds--accordion__item--collapsing .cds--accordion__content,.cds--accordion__item--expanding .cds--accordion__content,:host(cds-accordion-item[collapsing]) .cds--accordion__content,:host(cds-accordion-item[expanding]) .cds--accordion__content{display:block}.cds--accordion__item--active,:host(cds-accordion-item[open]:not([disabled])){overflow:visible}.cds--accordion__item--active>.cds--accordion__wrapper,:host(cds-accordion-item[open]:not([disabled]))>.cds--accordion__wrapper{display:block;max-block-size:-moz-fit-content;max-block-size:fit-content;opacity:1;overflow:visible;padding-block:.5rem;padding-block-end:1.5rem}.cds--accordion__item--active>.cds--accordion__heading>.cds--accordion__arrow,:host(cds-accordion-item[open]:not([disabled]))>.cds--accordion__heading>.cds--accordion__arrow{fill:var(--cds-icon-primary,#161616);transform:rotate(-90deg)}@starting-style{.cds--accordion__item--active>.cds--accordion__wrapper,:host(cds-accordion-item[open]:not([disabled]))>.cds--accordion__wrapper{max-block-size:0;opacity:0;padding:0}}.cds--accordion--flush .cds--accordion__item,.cds--accordion--flush :host(cds-accordion-item),.cds--accordion--flush :host(cds-accordion-item-skeleton){border-color:transparent;position:relative}.cds--accordion--flush .cds--accordion__item:hover,.cds--accordion--flush .cds--accordion__item:hover+.cds--accordion__item,.cds--accordion--flush .cds--accordion__item:hover+:host(cds-accordion-item),.cds--accordion--flush .cds--accordion__item:hover+:host(cds-accordion-item-skeleton),.cds--accordion--flush .cds--accordion__item:last-child,.cds--accordion--flush .cds--accordion__item:last-child:hover{border-color:transparent}.cds--accordion--flush .cds--accordion__item:after,.cds--accordion--flush .cds--accordion__item:before{block-size:1px;content:\"\";display:block;inline-size:calc(100% - 2rem);margin-inline-start:1rem;position:absolute;transition:background .11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds--accordion--flush .cds--accordion__item:after,.cds--accordion--flush .cds--accordion__item:before{transition:none}}.cds--accordion--flush .cds--accordion__item:before{background:var(--cds-border-subtle);inset-block-start:-1px}.cds--accordion--flush .cds--accordion__item:last-child:after{background:var(--cds-border-subtle);inset-block-end:-1px}.cds--accordion--flush .cds--accordion__heading:hover{position:relative;z-index:1}.cds--accordion--flush .cds--accordion__heading:hover:after,.cds--accordion--flush .cds--accordion__heading:hover:before{background:var(--cds-layer-hover);block-size:1px;content:\"\";display:block;inline-size:100%;inset-inline-start:0;position:absolute;transition:background .11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds--accordion--flush .cds--accordion__heading:hover:after,.cds--accordion--flush .cds--accordion__heading:hover:before{transition:none}}.cds--accordion--flush .cds--accordion__heading:hover:before{inset-block-start:-1px}.cds--accordion--flush .cds--accordion__heading:hover:after{inset-block-end:-1px}.cds--accordion--flush .cds--accordion__heading:hover:focus:after,.cds--accordion--flush .cds--accordion__heading:hover:focus:before{background:none}.cds--accordion.cds--skeleton .cds--accordion__button,.cds--accordion.cds--skeleton .cds--accordion__heading{cursor:default}.cds--accordion.cds--skeleton .cds--accordion__arrow{cursor:default;fill:var(--cds-icon-primary,#161616);pointer-events:none}.cds--accordion.cds--skeleton .cds--accordion__arrow:active,.cds--accordion.cds--skeleton .cds--accordion__arrow:focus,.cds--accordion.cds--skeleton .cds--accordion__arrow:hover{border:none;cursor:default;outline:none}.cds--accordion.cds--skeleton .cds--accordion__heading:hover,.cds--accordion.cds--skeleton .cds--accordion__heading:hover:before{background-color:transparent}.cds--accordion--end.cds--skeleton .cds--accordion__arrow{margin-inline-start:1rem}.cds--skeleton .cds--accordion__heading:focus .cds--accordion__arrow{border:none;cursor:default;outline:none}.cds--accordion__title.cds--skeleton__text{margin-block-end:0}.cds--accordion.cds--skeleton .cds--accordion__title{margin-inline-start:1rem}[dir=rtl] .cds--accordion--start .cds--accordion__heading,[dir=rtl] :host(cds-accordion-item-skeleton[alignment=start]) .cds--accordion__heading,[dir=rtl] :host(cds-accordion-item[alignment=start]) .cds--accordion__heading{padding-inline:var(--cds-layout-density-padding-inline-local) 0}[dir=rtl] .cds--accordion--start .cds--accordion__title,[dir=rtl] :host(cds-accordion-item-skeleton[alignment=start]) .cds--accordion__title,[dir=rtl] :host(cds-accordion-item[alignment=start]) .cds--accordion__title{margin-inline-end:0;padding-inline-start:0}:host(cds-accordion),:host(cds-accordion-skeleton){--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-accordion-item),:host(cds-accordion-item-skeleton){display:block;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);outline:none}:host(cds-accordion-item) .cds--accordion__content ::slotted(p),:host(cds-accordion-item-skeleton) .cds--accordion__content ::slotted(p){font-size:var(--cds-body-01-font-size)!important;font-weight:var(--cds-body-01-font-weight);letter-spacing:var(--cds-body-01-letter-spacing);line-height:var(--cds-body-01-line-height);margin:0}:host([data-last-item]){border-block-end:1px solid var(--cds-border-subtle)}:host(cds-accordion-item-skeleton[size=sm]) button,:host(cds-accordion-item[size=sm]) button{min-block-size:var(--cds-layout-size-height-context)}:host(cds-accordion-item-skeleton[size=lg]) button,:host(cds-accordion-item[size=lg]) button{min-block-size:var(--cds-layout-size-height-context)}:host(cds-accordion-item-skeleton[isFlush]),:host(cds-accordion-item[isFlush]){border-color:transparent;position:relative}:host(cds-accordion-item-skeleton[isFlush]):after,:host(cds-accordion-item-skeleton[isFlush]):before,:host(cds-accordion-item[isFlush]):after,:host(cds-accordion-item[isFlush]):before{block-size:1px;content:\"\";display:block;inline-size:calc(100% - 2rem);margin-inline-start:1rem;position:absolute;transition:background .11s cubic-bezier(0,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){:host(cds-accordion-item-skeleton[isFlush]):after,:host(cds-accordion-item-skeleton[isFlush]):before,:host(cds-accordion-item[isFlush]):after,:host(cds-accordion-item[isFlush]):before{transition:none}}:host(cds-accordion-item-skeleton[isFlush]):before,:host(cds-accordion-item[isFlush]):before{background:var(--cds-border-subtle);inset-block-start:-1px}:host(cds-accordion-item-skeleton[isFlush]):after,:host(cds-accordion-item[isFlush]):after{background:var(--cds-border-subtle);inset-block-end:-1px}:host([isFlush]) .cds--accordion__heading:hover{position:relative;z-index:1}:host([isFlush]) .cds--accordion__heading:hover:after,:host([isFlush]) .cds--accordion__heading:hover:before{background:var(--cds-layer-hover);block-size:1px;content:\"\";display:block;inline-size:100%;inset-inline-start:0;position:absolute;transition:background .11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){:host([isFlush]) .cds--accordion__heading:hover:after,:host([isFlush]) .cds--accordion__heading:hover:before{transition:none}}:host([isFlush]) .cds--accordion__heading:hover:before{inset-block-start:-1px}:host([isFlush]) .cds--accordion__heading:hover:after{inset-block-end:-1px}:host([isFlush]) .cds--accordion__heading:hover:focus:after,:host([isFlush]) .cds--accordion__heading:hover:focus:before{background:none}:host(cds-accordion-item[open]:not([disabled])) .cds--accordion__content{padding-inline-end:1rem}:host(cds-accordion-item[open]:not([disabled])) .cds-ce--accordion__content--sm{padding-inline-end:3rem}:host(cds-accordion-item[open]:not([disabled])) .cds-ce--accordion__content--md{padding-inline-end:25%}:host(cds-accordion-item-skeleton) .cds--accordion__heading,:host(cds-accordion-skeleton) .cds--accordion__heading{cursor:default;pointer-events:none}:host(cds-accordion-item-skeleton) .cds--accordion__heading:hover:before,:host(cds-accordion-skeleton) .cds--accordion__heading:hover:before{background:transparent}:host(cds-accordion-item-skeleton[alignment=end i]) .cds--accordion__arrow,:host(cds-accordion-item[alignment=end i]) .cds--accordion__arrow,:host(cds-accordion-skeleton) .cds--accordion__item.cds--accordion--END .cds--accordion__arrow{margin-inline-start:1rem}:host(cds-accordion-item-skeleton) .cds--accordion__title,:host(cds-accordion-skeleton) .cds--accordion__heading .cds--accordion__title{padding-block-start:.5rem}.controlled-accordion-btn{max-inline-size:13.25rem}"]);
|
|
11
|
+
var accordion_default = css([".cds--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--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--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--layer-one.cds--layer__with-background,.cds--layer-three.cds--layer__with-background,.cds--layer-two.cds--layer__with-background{background-color:var(--cds-layer-background)}.cds--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--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm,:host(cds-accordion-item-skeleton[size=sm]) button,:host(cds-accordion-item[size=sm]) button{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--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--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg,:host(cds-accordion-item-skeleton[size=lg]) button,:host(cds-accordion-item[size=lg]) button{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--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--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--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--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--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--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--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--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--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--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--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--accordion,:host(cds-accordion),:host(cds-accordion-skeleton){--cds-layout-size-height-local:clamp(max(var(--cds-layout-size-height-min),var(--cds-layout-size-height-sm)),var(--cds-layout-size-height,var(--cds-layout-size-height-md)),min(var(--cds-layout-size-height-max),var(--cds-layout-size-height-lg)));--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));border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--accordion *,.cds--accordion :after,.cds--accordion :before,:host(cds-accordion) *,:host(cds-accordion) :after,:host(cds-accordion) :before,:host(cds-accordion-skeleton) *,:host(cds-accordion-skeleton) :after,:host(cds-accordion-skeleton) :before{box-sizing:inherit}.cds--accordion,:host(cds-accordion),:host(cds-accordion-skeleton){inline-size:100%;list-style:none}.cds--accordion__item,:host(cds-accordion-item),:host(cds-accordion-item-skeleton){border-block-start:1px solid var(--cds-border-subtle);display:list-item;overflow:visible;transition:border-color .11s cubic-bezier(.2,0,.38,.9)}.cds--accordion__item:last-child{border-block-end:1px solid var(--cds-border-subtle)}.cds--accordion__item:not(.cds--accordion__item--active):hover,.cds--accordion__item:not(.cds--accordion__item--active):hover+.cds--accordion__item,.cds--accordion__item:not(.cds--accordion__item--active):hover+:host(cds-accordion-item),.cds--accordion__item:not(.cds--accordion__item--active):hover+:host(cds-accordion-item-skeleton){border-block-start-color:var(--cds-layer-hover)}.cds--accordion__item:not(.cds--accordion__item--active):last-child:hover{border-block-end-color:var(--cds-layer-hover)}.cds--accordion__heading{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;display:inline-block;font-family:inherit;font-size:100%;padding:0;text-align:start;transition:background-color .11s cubic-bezier(.2,0,.38,.9);vertical-align:baseline}.cds--accordion__heading *,.cds--accordion__heading :after,.cds--accordion__heading :before{box-sizing:inherit}.cds--accordion__heading::-moz-focus-inner{border:0}.cds--accordion__heading{align-items:center;color:var(--cds-text-primary,#161616);cursor:pointer;display:flex;flex-direction:row-reverse;inline-size:100%;justify-content:flex-start;margin:0;min-block-size:var(--cds-layout-size-height-local);padding-inline-end:var(--cds-layout-density-padding-inline-local);position:relative}.cds--accordion__heading:hover{background-color:var(--cds-layer-hover);outline:none}.cds--accordion__heading:focus{box-shadow:0 -1px 0 0 var(--cds-focus,#0f62fe),inset 0 1px 0 0 var(--cds-focus,#0f62fe),inset 2px 0 0 0 var(--cds-focus,#0f62fe),0 1px 0 0 var(--cds-focus,#0f62fe),inset 0 -1px 0 0 var(--cds-focus,#0f62fe),inset -2px 0 0 0 var(--cds-focus,#0f62fe);outline:none;position:relative;z-index:2}.cds--accordion__heading[disabled]{background-color:transparent;color:var(--cds-text-disabled,hsla(0,0%,9%,.25));cursor:not-allowed}.cds--accordion__heading[disabled] .cds--accordion__arrow{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds--accordion__heading[disabled]:hover:before{background-color:transparent}.cds--accordion__item--disabled,.cds--accordion__item--disabled+.cds--accordion__item,.cds--accordion__item--disabled+:host(cds-accordion-item),.cds--accordion__item--disabled+:host(cds-accordion-item-skeleton){border-block-start:1px solid var(--cds-border-subtle)}li.cds--accordion__item--disabled:last-of-type{border-block-end:1px solid var(--cds-border-subtle)}.cds--accordion__arrow{block-size:1rem;flex:0 0 1rem;outline:2px solid transparent;outline-offset:-2px;transition:all .11s cubic-bezier(.2,0,.38,.9);fill:var(--cds-icon-primary,#161616);inline-size:1rem;transform:rotate(-270deg)}.cds--accordion__title{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);inline-size:100%;letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);padding-inline-start:1rem;text-align:start;z-index:1}.cds--accordion__wrapper{display:none;max-block-size:0;opacity:0;overflow:hidden;padding:0;transition:all allow-discrete .11s cubic-bezier(0,0,.38,.9);writing-mode:horizontal-tb}.cds--accordion__content,:host(cds-accordion-item) .cds--accordion__content,:host(cds-accordion-item-skeleton) .cds--accordion__content{padding-inline:var(--cds-layout-density-padding-inline-local)}@media (min-width:480px){.cds--accordion__content,:host(cds-accordion-item) .cds--accordion__content,:host(cds-accordion-item-skeleton) .cds--accordion__content{padding-inline-end:3rem}}@media (min-width:640px){.cds--accordion__content,:host(cds-accordion-item) .cds--accordion__content,:host(cds-accordion-item-skeleton) .cds--accordion__content{padding-inline-end:25%}}.cds--accordion__content>p,:host(cds-accordion-item) .cds--accordion__content>p,:host(cds-accordion-item-skeleton) .cds--accordion__content>p{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857)}.cds--accordion--start .cds--accordion__heading,:host(cds-accordion-item-skeleton[alignment=start]) .cds--accordion__heading,:host(cds-accordion-item[alignment=start]) .cds--accordion__heading{flex-direction:row}.cds--accordion--start .cds--accordion__arrow,:host(cds-accordion-item-skeleton[alignment=start]) .cds--accordion__arrow,:host(cds-accordion-item[alignment=start]) .cds--accordion__arrow{margin:2px 0 0 var(--cds-layout-density-padding-inline-local)}.cds--accordion--start .cds--accordion__title,:host(cds-accordion-item-skeleton[alignment=start]) .cds--accordion__title,:host(cds-accordion-item[alignment=start]) .cds--accordion__title{margin-inline-end:1rem}.cds--accordion--start .cds--accordion__content,:host(cds-accordion-item-skeleton[alignment=start]) .cds--accordion__content,:host(cds-accordion-item[alignment=start]) .cds--accordion__content{margin-inline-start:calc(var(--cds-layout-density-padding-inline-local) + 1rem)}.cds--accordion__item--collapsing .cds--accordion__content,.cds--accordion__item--expanding .cds--accordion__content,:host(cds-accordion-item[collapsing]) .cds--accordion__content,:host(cds-accordion-item[expanding]) .cds--accordion__content{display:block}.cds--accordion__item--active,:host(cds-accordion-item[open]:not([disabled])){overflow:visible}.cds--accordion__item--active>.cds--accordion__wrapper,:host(cds-accordion-item[open]:not([disabled]))>.cds--accordion__wrapper{display:block;max-block-size:-moz-fit-content;max-block-size:fit-content;opacity:1;overflow:visible;padding-block:.5rem;padding-block-end:1.5rem}.cds--accordion__item--active>.cds--accordion__heading>.cds--accordion__arrow,:host(cds-accordion-item[open]:not([disabled]))>.cds--accordion__heading>.cds--accordion__arrow{fill:var(--cds-icon-primary,#161616);transform:rotate(-90deg)}@starting-style{.cds--accordion__item--active>.cds--accordion__wrapper,:host(cds-accordion-item[open]:not([disabled]))>.cds--accordion__wrapper{max-block-size:0;opacity:0;padding:0}}.cds--accordion--flush .cds--accordion__item,.cds--accordion--flush :host(cds-accordion-item),.cds--accordion--flush :host(cds-accordion-item-skeleton){border-color:transparent;position:relative}.cds--accordion--flush .cds--accordion__item:hover,.cds--accordion--flush .cds--accordion__item:hover+.cds--accordion__item,.cds--accordion--flush .cds--accordion__item:hover+:host(cds-accordion-item),.cds--accordion--flush .cds--accordion__item:hover+:host(cds-accordion-item-skeleton),.cds--accordion--flush .cds--accordion__item:last-child,.cds--accordion--flush .cds--accordion__item:last-child:hover{border-color:transparent}.cds--accordion--flush .cds--accordion__item:after,.cds--accordion--flush .cds--accordion__item:before{block-size:1px;content:\"\";display:block;inline-size:calc(100% - 2rem);margin-inline-start:1rem;position:absolute;transition:background .11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds--accordion--flush .cds--accordion__item:after,.cds--accordion--flush .cds--accordion__item:before{transition:none}}.cds--accordion--flush .cds--accordion__item:before{background:var(--cds-border-subtle);inset-block-start:-1px}.cds--accordion--flush .cds--accordion__item:last-child:after{background:var(--cds-border-subtle);inset-block-end:-1px}.cds--accordion--flush .cds--accordion__heading:hover{position:relative;z-index:1}.cds--accordion--flush .cds--accordion__heading:hover:after,.cds--accordion--flush .cds--accordion__heading:hover:before{background:var(--cds-layer-hover);block-size:1px;content:\"\";display:block;inline-size:100%;inset-inline-start:0;position:absolute;transition:background .11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds--accordion--flush .cds--accordion__heading:hover:after,.cds--accordion--flush .cds--accordion__heading:hover:before{transition:none}}.cds--accordion--flush .cds--accordion__heading:hover:before{inset-block-start:-1px}.cds--accordion--flush .cds--accordion__heading:hover:after{inset-block-end:-1px}.cds--accordion--flush .cds--accordion__heading:hover:focus:after,.cds--accordion--flush .cds--accordion__heading:hover:focus:before{background:none}.cds--accordion.cds--skeleton .cds--accordion__button,.cds--accordion.cds--skeleton .cds--accordion__heading{cursor:default}.cds--accordion.cds--skeleton .cds--accordion__arrow{cursor:default;fill:var(--cds-icon-primary,#161616);pointer-events:none}.cds--accordion.cds--skeleton .cds--accordion__arrow:active,.cds--accordion.cds--skeleton .cds--accordion__arrow:focus,.cds--accordion.cds--skeleton .cds--accordion__arrow:hover{border:none;cursor:default;outline:none}.cds--accordion.cds--skeleton .cds--accordion__heading:hover,.cds--accordion.cds--skeleton .cds--accordion__heading:hover:before{background-color:transparent}.cds--accordion--end.cds--skeleton .cds--accordion__arrow{margin-inline-start:1rem}.cds--skeleton .cds--accordion__heading:focus .cds--accordion__arrow{border:none;cursor:default;outline:none}.cds--accordion__title.cds--skeleton__text{margin-block-end:0}.cds--accordion.cds--skeleton .cds--accordion__title{margin-inline-start:1rem}[dir=rtl] .cds--accordion--start .cds--accordion__heading,[dir=rtl] :host(cds-accordion-item-skeleton[alignment=start]) .cds--accordion__heading,[dir=rtl] :host(cds-accordion-item[alignment=start]) .cds--accordion__heading{padding-inline:var(--cds-layout-density-padding-inline-local) 0}[dir=rtl] .cds--accordion--start .cds--accordion__title,[dir=rtl] :host(cds-accordion-item-skeleton[alignment=start]) .cds--accordion__title,[dir=rtl] :host(cds-accordion-item[alignment=start]) .cds--accordion__title{margin-inline-end:0;padding-inline-start:0}:host(cds-accordion),:host(cds-accordion-skeleton){--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-accordion-item),:host(cds-accordion-item-skeleton){display:block;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857);outline:none}:host(cds-accordion-item) .cds--accordion__content ::slotted(p),:host(cds-accordion-item-skeleton) .cds--accordion__content ::slotted(p){font-size:var(--cds-body-01-font-size)!important;font-weight:var(--cds-body-01-font-weight);letter-spacing:var(--cds-body-01-letter-spacing);line-height:var(--cds-body-01-line-height);margin:0}:host([data-last-item]){border-block-end:1px solid var(--cds-border-subtle)}:host(cds-accordion-item-skeleton[size=sm]) button,:host(cds-accordion-item[size=sm]) button{min-block-size:var(--cds-layout-size-height-context)}:host(cds-accordion-item-skeleton[size=lg]) button,:host(cds-accordion-item[size=lg]) button{min-block-size:var(--cds-layout-size-height-context)}:host(cds-accordion-item-skeleton[isFlush]),:host(cds-accordion-item[isFlush]){border-color:transparent;position:relative}:host(cds-accordion-item-skeleton[isFlush]):after,:host(cds-accordion-item-skeleton[isFlush]):before,:host(cds-accordion-item[isFlush]):after,:host(cds-accordion-item[isFlush]):before{block-size:1px;content:\"\";display:block;inline-size:calc(100% - 2rem);margin-inline-start:1rem;position:absolute;transition:background .11s cubic-bezier(0,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){:host(cds-accordion-item-skeleton[isFlush]):after,:host(cds-accordion-item-skeleton[isFlush]):before,:host(cds-accordion-item[isFlush]):after,:host(cds-accordion-item[isFlush]):before{transition:none}}:host(cds-accordion-item-skeleton[isFlush]):before,:host(cds-accordion-item[isFlush]):before{background:var(--cds-border-subtle);inset-block-start:-1px}:host(cds-accordion-item-skeleton[isFlush]):after,:host(cds-accordion-item[isFlush]):after{background:var(--cds-border-subtle);inset-block-end:-1px}:host([isFlush]) .cds--accordion__heading:hover{position:relative;z-index:1}:host([isFlush]) .cds--accordion__heading:hover:after,:host([isFlush]) .cds--accordion__heading:hover:before{background:var(--cds-layer-hover);block-size:1px;content:\"\";display:block;inline-size:100%;inset-inline-start:0;position:absolute;transition:background .11s cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){:host([isFlush]) .cds--accordion__heading:hover:after,:host([isFlush]) .cds--accordion__heading:hover:before{transition:none}}:host([isFlush]) .cds--accordion__heading:hover:before{inset-block-start:-1px}:host([isFlush]) .cds--accordion__heading:hover:after{inset-block-end:-1px}:host([isFlush]) .cds--accordion__heading:hover:focus:after,:host([isFlush]) .cds--accordion__heading:hover:focus:before{background:none}:host(cds-accordion-item[open]:not([disabled])) .cds--accordion__content{padding-inline-end:1rem}:host(cds-accordion-item[open]:not([disabled])) .cds-ce--accordion__content--sm{padding-inline-end:3rem}:host(cds-accordion-item[open]:not([disabled])) .cds-ce--accordion__content--md{padding-inline-end:25%}:host(cds-accordion-item-skeleton) .cds--accordion__heading,:host(cds-accordion-skeleton) .cds--accordion__heading{cursor:default;pointer-events:none}:host(cds-accordion-item-skeleton) .cds--accordion__heading:hover:before,:host(cds-accordion-skeleton) .cds--accordion__heading:hover:before{background:transparent}:host(cds-accordion-item-skeleton[alignment=end i]) .cds--accordion__arrow,:host(cds-accordion-item[alignment=end i]) .cds--accordion__arrow,:host(cds-accordion-skeleton) .cds--accordion__item.cds--accordion--END .cds--accordion__arrow{margin-inline-start:1rem}:host(cds-accordion-item-skeleton) .cds--accordion__title,:host(cds-accordion-skeleton) .cds--accordion__heading .cds--accordion__title{padding-block-start:.5rem}.controlled-accordion-btn{max-inline-size:13.25rem}.cds--accordion--flush{border-color:transparent;position:relative}.cds--accordion--flush:before{background:var(--cds-border-subtle);block-size:1px;content:\"\";display:block;inline-size:calc(100% - 2rem);inset-block-start:-1px;inset-inline-start:0;margin-inline-start:1rem;position:absolute;transition:background .11s cubic-bezier(0,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds--accordion--flush:before{transition:none}}.cds--accordion--flush:focus:before{background:none}"]);
|
|
12
12
|
|
|
13
13
|
//#endregion
|
|
14
14
|
export { accordion_default as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.scss.js","names":[],"sources":["../../../src/components/accordion/accordion.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/type' as *;\n@use '@carbon/styles/scss/utilities/convert' as *;\n@use '@carbon/styles/scss/components/accordion';\n@use '@carbon/styles/scss/layout' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/components/button/tokens' as button-tokens;\n\n:host(#{$prefix}-accordion),\n:host(#{$prefix}-accordion-skeleton) {\n @extend .#{$prefix}--accordion;\n @include emit-layout-tokens();\n}\n\n:host(#{$prefix}-accordion-item),\n:host(#{$prefix}-accordion-item-skeleton) {\n @extend .#{$prefix}--accordion__item;\n @include type-style('body-01');\n\n display: block;\n outline: none;\n .#{$prefix}--accordion__content {\n @extend .#{$prefix}--accordion__content;\n\n ::slotted(p) {\n margin: 0;\n\n font-size: var(\n --cds-body-01-font-size\n ) !important; /* stylelint-disable-line declaration-no-important */\n\n font-weight: var(--cds-body-01-font-weight);\n letter-spacing: var(--cds-body-01-letter-spacing);\n line-height: var(--cds-body-01-line-height);\n }\n }\n}\n\n// Indicates this is the last visible item in a group (for styling the bottom border)\n:host([data-last-item]) {\n border-block-end: 1px solid $border-subtle;\n}\n\n:host(#{$prefix}-accordion-item[size='sm']),\n:host(#{$prefix}-accordion-item-skeleton[size='sm']) {\n button {\n @extend .#{$prefix}--layout--size-sm;\n\n min-block-size: var(--cds-layout-size-height-context);\n }\n}\n\n:host(#{$prefix}-accordion-item[size='lg']),\n:host(#{$prefix}-accordion-item-skeleton[size='lg']) {\n button {\n @extend .#{$prefix}--layout--size-lg;\n\n min-block-size: var(--cds-layout-size-height-context);\n }\n}\n\n:host(#{$prefix}-accordion-item[alignment='start']),\n:host(#{$prefix}-accordion-item-skeleton[alignment='start']) {\n @extend .#{$prefix}--accordion--start;\n}\n\n:host(#{$prefix}-accordion-item[isFlush]),\n:host(#{$prefix}-accordion-item-skeleton[isFlush]) {\n position: relative;\n border-color: transparent;\n\n &::before,\n &::after {\n position: absolute;\n display: block;\n block-size: 1px;\n content: '';\n inline-size: calc(100% - #{$spacing-05} - #{$spacing-05});\n margin-inline-start: $spacing-05;\n transition: background $duration-fast-02 motion(entrance, productive);\n\n @media screen and (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n background: $border-subtle;\n inset-block-start: -1px;\n }\n\n &::after {\n background: $border-subtle;\n inset-block-end: -1px;\n }\n}\n\n:host([isFlush]) .#{$prefix}--accordion__heading:hover {\n position: relative;\n z-index: 1;\n\n &::before,\n &::after {\n position: absolute;\n display: block;\n background: $layer-hover;\n block-size: 1px;\n content: '';\n inline-size: 100%;\n inset-inline-start: 0;\n transition: background $duration-fast-02 motion(standard, productive);\n\n @media screen and (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n inset-block-start: -1px;\n }\n\n &::after {\n inset-block-end: -1px;\n }\n\n &:focus::before,\n &:focus::after {\n background: none;\n }\n}\n\n:host(#{$prefix}-accordion-item[expanding]) {\n @extend .#{$prefix}--accordion__item--expanding;\n}\n\n:host(#{$prefix}-accordion-item[collapsing]) {\n @extend .#{$prefix}--accordion__item--collapsing;\n}\n\n:host(#{$prefix}-accordion-item[open]:not([disabled])) {\n @extend .#{$prefix}--accordion__item--active;\n\n .#{$prefix}--accordion__content {\n padding-inline-end: $spacing-05;\n }\n\n .#{$prefix}-ce--accordion__content--sm {\n padding-inline-end: $spacing-09;\n }\n\n .#{$prefix}-ce--accordion__content--md {\n padding-inline-end: 25%;\n }\n}\n\n:host(#{$prefix}-accordion-skeleton),\n:host(#{$prefix}-accordion-item-skeleton) {\n .#{$prefix}--accordion__heading {\n cursor: default;\n pointer-events: none;\n\n &:hover::before {\n background: transparent;\n }\n }\n}\n\n:host(#{$prefix}-accordion-item[alignment='end' i]),\n:host(#{$prefix}-accordion-item-skeleton[alignment='end' i]),\n:host(#{$prefix}-accordion-skeleton)\n .#{$prefix}--accordion__item.#{$prefix}--accordion--END {\n .#{$prefix}--accordion__arrow {\n margin-inline-start: $spacing-05;\n }\n}\n\n:host(#{$prefix}-accordion-item-skeleton) .#{$prefix}--accordion__title,\n:host(#{$prefix}-accordion-skeleton)\n .#{$prefix}--accordion__heading\n .#{$prefix}--accordion__title {\n padding-block-start: $spacing-03;\n}\n\n.controlled-accordion-btn {\n max-inline-size: 13.25rem;\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"accordion.scss.js","names":[],"sources":["../../../src/components/accordion/accordion.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/type' as *;\n@use '@carbon/styles/scss/utilities/convert' as *;\n@use '@carbon/styles/scss/components/accordion';\n@use '@carbon/styles/scss/layout' as *;\n@use '@carbon/styles/scss/motion' as *;\n@use '@carbon/styles/scss/theme' as *;\n@use '@carbon/styles/scss/components/button/tokens' as button-tokens;\n\n:host(#{$prefix}-accordion),\n:host(#{$prefix}-accordion-skeleton) {\n @extend .#{$prefix}--accordion;\n @include emit-layout-tokens();\n}\n\n:host(#{$prefix}-accordion-item),\n:host(#{$prefix}-accordion-item-skeleton) {\n @extend .#{$prefix}--accordion__item;\n @include type-style('body-01');\n\n display: block;\n outline: none;\n .#{$prefix}--accordion__content {\n @extend .#{$prefix}--accordion__content;\n\n ::slotted(p) {\n margin: 0;\n\n font-size: var(\n --cds-body-01-font-size\n ) !important; /* stylelint-disable-line declaration-no-important */\n\n font-weight: var(--cds-body-01-font-weight);\n letter-spacing: var(--cds-body-01-letter-spacing);\n line-height: var(--cds-body-01-line-height);\n }\n }\n}\n\n// Indicates this is the last visible item in a group (for styling the bottom border)\n:host([data-last-item]) {\n border-block-end: 1px solid $border-subtle;\n}\n\n:host(#{$prefix}-accordion-item[size='sm']),\n:host(#{$prefix}-accordion-item-skeleton[size='sm']) {\n button {\n @extend .#{$prefix}--layout--size-sm;\n\n min-block-size: var(--cds-layout-size-height-context);\n }\n}\n\n:host(#{$prefix}-accordion-item[size='lg']),\n:host(#{$prefix}-accordion-item-skeleton[size='lg']) {\n button {\n @extend .#{$prefix}--layout--size-lg;\n\n min-block-size: var(--cds-layout-size-height-context);\n }\n}\n\n:host(#{$prefix}-accordion-item[alignment='start']),\n:host(#{$prefix}-accordion-item-skeleton[alignment='start']) {\n @extend .#{$prefix}--accordion--start;\n}\n\n:host(#{$prefix}-accordion-item[isFlush]),\n:host(#{$prefix}-accordion-item-skeleton[isFlush]) {\n position: relative;\n border-color: transparent;\n\n &::before,\n &::after {\n position: absolute;\n display: block;\n block-size: 1px;\n content: '';\n inline-size: calc(100% - #{$spacing-05} - #{$spacing-05});\n margin-inline-start: $spacing-05;\n transition: background $duration-fast-02 motion(entrance, productive);\n\n @media screen and (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n background: $border-subtle;\n inset-block-start: -1px;\n }\n\n &::after {\n background: $border-subtle;\n inset-block-end: -1px;\n }\n}\n\n:host([isFlush]) .#{$prefix}--accordion__heading:hover {\n position: relative;\n z-index: 1;\n\n &::before,\n &::after {\n position: absolute;\n display: block;\n background: $layer-hover;\n block-size: 1px;\n content: '';\n inline-size: 100%;\n inset-inline-start: 0;\n transition: background $duration-fast-02 motion(standard, productive);\n\n @media screen and (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n inset-block-start: -1px;\n }\n\n &::after {\n inset-block-end: -1px;\n }\n\n &:focus::before,\n &:focus::after {\n background: none;\n }\n}\n\n:host(#{$prefix}-accordion-item[expanding]) {\n @extend .#{$prefix}--accordion__item--expanding;\n}\n\n:host(#{$prefix}-accordion-item[collapsing]) {\n @extend .#{$prefix}--accordion__item--collapsing;\n}\n\n:host(#{$prefix}-accordion-item[open]:not([disabled])) {\n @extend .#{$prefix}--accordion__item--active;\n\n .#{$prefix}--accordion__content {\n padding-inline-end: $spacing-05;\n }\n\n .#{$prefix}-ce--accordion__content--sm {\n padding-inline-end: $spacing-09;\n }\n\n .#{$prefix}-ce--accordion__content--md {\n padding-inline-end: 25%;\n }\n}\n\n:host(#{$prefix}-accordion-skeleton),\n:host(#{$prefix}-accordion-item-skeleton) {\n .#{$prefix}--accordion__heading {\n cursor: default;\n pointer-events: none;\n\n &:hover::before {\n background: transparent;\n }\n }\n}\n\n:host(#{$prefix}-accordion-item[alignment='end' i]),\n:host(#{$prefix}-accordion-item-skeleton[alignment='end' i]),\n:host(#{$prefix}-accordion-skeleton)\n .#{$prefix}--accordion__item.#{$prefix}--accordion--END {\n .#{$prefix}--accordion__arrow {\n margin-inline-start: $spacing-05;\n }\n}\n\n:host(#{$prefix}-accordion-item-skeleton) .#{$prefix}--accordion__title,\n:host(#{$prefix}-accordion-skeleton)\n .#{$prefix}--accordion__heading\n .#{$prefix}--accordion__title {\n padding-block-start: $spacing-03;\n}\n\n.controlled-accordion-btn {\n max-inline-size: 13.25rem;\n}\n.#{$prefix}--accordion--flush {\n position: relative;\n border-color: transparent;\n\n &::before {\n position: absolute;\n display: block;\n background: $border-subtle;\n block-size: 1px;\n content: '';\n inline-size: calc(100% - #{$spacing-05} - #{$spacing-05});\n inset-block-start: -1px;\n inset-inline-start: 0;\n margin-inline-start: $spacing-05;\n transition: background $duration-fast-02 motion(entrance, productive);\n\n @media screen and (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &:focus::before {\n background: none;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/combo-box.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAC;AAK3C,OAAO,WAAyC,MAAM,sBAAsB,CAAC;AAC7E,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAQ/C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEzE,KAAK,gBAAgB,GAAG,CAAC,KAAK,EAAE;IAC9B,IAAI,EAAE,eAAe,CAAC;IACtB,YAAY,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,KAAK,OAAO,CAAC;AAEd;;;;;;;;;;;;GAYG;AACH,cACM,WAAY,SAAQ,WAAW;IACnC;;OAEG;IACH,SAAS,CAAC,iBAAiB,SAAM;IAEjC,SAAS,CAAC,yBAAyB,UAAS;IAE5C;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAoB;IAE5C;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAe;IAEhC;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAe;IAE3C;;;OAGG;IACH,SAAS,CAAC,sBAAsB,CAAC,IAAI,KAAA;IAOrC;;;;;;OAMG;IACH,SAAS,CAAC,mBAAmB,CAC3B,IAAI,EAAE,eAAe,EACrB,SAAS,EAAE,MAAM,GAChB,OAAO;IAOV,iBAAiB;IAQjB;;OAEG;IACH,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU;IAsExC,SAAS,CAAC,6BAA6B;IAevC,SAAS,CAAC,YAAY,CACpB,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,EAC1B,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,GACnB,MAAM;IA6CT,SAAS,CAAC,mBAAmB,CAAC,IAAI,EAAE,WAAW;IAqB/C,SAAS,CAAC,gBAAgB,IAAI,eAAe,GAAG,IAAI;IAUpD,SAAS,CAAC,sBAAsB,CAAC,KAAK,UAAO;IA6B7C,SAAS,CAAC,mBAAmB,CAAC,KAAK,EAAE,aAAa;IA8BlD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAU7C,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,aAAa;IAenD;;OAEG;IACH,SAAS,CAAC,8BAA8B;
|
|
1
|
+
{"version":3,"file":"combo-box.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/combo-box.ts"],"names":[],"mappings":"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"}
|
|
@@ -215,13 +215,9 @@ let CDSComboBox = class CDSComboBox extends dropdown_default {
|
|
|
215
215
|
* Handles user-initiated clearing the `<input>` for filtering.
|
|
216
216
|
*/
|
|
217
217
|
_handleUserInitiatedClearInput() {
|
|
218
|
-
this._resetFilteredItems();
|
|
219
|
-
this._filterInputValue = "";
|
|
220
|
-
if (this._filterInputNode) {
|
|
221
|
-
this._filterInputNode.value = "";
|
|
222
|
-
this._filterInputNode.focus();
|
|
223
|
-
}
|
|
224
218
|
this._handleUserInitiatedSelectItem();
|
|
219
|
+
if (this.value) this._revertInputToSelected(true);
|
|
220
|
+
else this._clearInputWithoutSelecting(true);
|
|
225
221
|
this.requestUpdate();
|
|
226
222
|
}
|
|
227
223
|
_handleUserInitiatedSelectItem(item) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"combo-box.js","names":["CDSDropdown","ifNonEmpty","styles","customElement"],"sources":["../../../src/components/combo-box/combo-box.ts"],"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\nimport { classMap } from 'lit/directives/class-map.js';\nimport { TemplateResult, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport CDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';\nimport CDSComboBoxItem from './combo-box-item';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport styles from './combo-box.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport spread from '../../globals/directives/spread';\n\nexport { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from '../dropdown/dropdown';\n\ntype ShouldFilterItem = (input: {\n item: CDSComboBoxItem;\n itemToString: (item: CDSComboBoxItem) => string;\n inputValue: string | null;\n}) => boolean;\n\n/**\n * Combo box.\n *\n * @element cds-combo-box\n * @fires cds-combo-box-beingselected\n * The custom event fired before a combo box item is selected upon a user gesture.\n * Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-combo-box-beingtoggled\n * The custom event fired before the open state of this combo box is toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated toggling.\n * @fires cds-combo-box-selected - The custom event fired after a combo box item is selected upon a user gesture.\n * @fires cds-combo-box-toggled - The custom event fired after the open state of this combo box is toggled upon a user gesture.\n */\n@customElement(`${prefix}-combo-box`)\nclass CDSComboBox extends CDSDropdown {\n /**\n * The text content that should be set to the `<input>` for filtering.\n */\n protected _filterInputValue = '';\n\n protected _shouldTriggerBeFocusable = false;\n\n /**\n * The `<input>` for filtering.\n */\n @query('input')\n private _filterInputNode!: HTMLInputElement;\n\n /**\n * The menu containing all selectable items.\n */\n @query('#menu-body')\n private _itemMenu!: HTMLElement;\n\n /**\n * The selection button.\n */\n @query('#selection-button')\n private _selectionButtonNode!: HTMLElement;\n\n /**\n * @param item A combo box item.\n * @returns `true` if the given combo box item matches the query text user types.\n */\n protected _testItemWithQueryText(item) {\n return (this.itemMatches || this._defaultItemMatches)(\n item,\n this._filterInputNode.value\n );\n }\n\n /**\n * The default item matching callback.\n *\n * @param item The combo box item.\n * @param queryText The query text user types.\n * @returns `true` if the given combo box item matches the given query text.\n */\n protected _defaultItemMatches(\n item: CDSComboBoxItem,\n queryText: string\n ): boolean {\n return (\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n item.textContent!.toLowerCase().indexOf(queryText.toLowerCase()) >= 0\n );\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (this.typeahead) {\n this.shouldFilterItem = true;\n this.setAttribute('should-filter-item', '');\n }\n }\n\n /**\n * Handles `input` event on the `<input>` for filtering.\n */\n protected _handleInput(event: InputEvent) {\n const rawQueryText = this._filterInputNode.value;\n const queryText = rawQueryText.trim().toLowerCase();\n\n if (rawQueryText.length !== 0) {\n this.setAttribute('isClosable', '');\n } else {\n this.removeAttribute('isClosable');\n }\n\n const items = this.querySelectorAll(\n (this.constructor as typeof CDSComboBox).selectorItem\n );\n\n const firstMatchIndex = this._filterItems(items, queryText, rawQueryText);\n if (firstMatchIndex !== -1) {\n const highlightedItem = items[firstMatchIndex];\n if (highlightedItem) {\n this._scrollItemIntoView(highlightedItem as HTMLElement);\n }\n if (this.typeahead && event?.inputType?.startsWith('insert')) {\n const suggestedItem = highlightedItem.textContent?.trim() ?? '';\n if (\n suggestedItem.toLowerCase().startsWith(rawQueryText.toLowerCase()) &&\n suggestedItem.length > rawQueryText.length\n ) {\n const suggestionText =\n rawQueryText + suggestedItem.slice(rawQueryText.length);\n\n this._filterInputNode.value = suggestionText;\n this._filterInputNode.setSelectionRange(\n rawQueryText.length,\n suggestionText.length\n );\n\n this._filterInputValue = suggestionText;\n this.open = true;\n this.requestUpdate();\n return;\n }\n }\n }\n\n this._filterInputValue = rawQueryText;\n\n if (this.allowCustomValue) {\n const previousValue = this.value;\n this.value = rawQueryText;\n\n if (previousValue !== this.value) {\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSComboBox).eventSelect,\n {\n bubbles: true,\n composed: true,\n detail: {\n item: null,\n value: this.value,\n },\n }\n )\n );\n }\n }\n this.open = true;\n this.requestUpdate();\n }\n\n // removes the autocomplete suggestion\n protected _removeAutoCompleteSuggestion() {\n if (!this._filterInputNode) return;\n const { selectionStart, selectionEnd, value } = this._filterInputNode;\n if (selectionStart && selectionEnd && selectionEnd > selectionStart) {\n const cleanInput = value.slice(0, selectionStart);\n this._filterInputNode.value = cleanInput;\n this._filterInputNode.setSelectionRange(\n cleanInput.length,\n cleanInput.length\n );\n return;\n }\n }\n\n // Applies filtering/highlighting to all slotted items.\n protected _filterItems(\n items: NodeListOf<Element>,\n queryText: string,\n rawQueryText: string\n ): number {\n let firstMatchIndex = -1;\n const hasQuery = Boolean(queryText);\n forEach(items, (item, i) => {\n const comboItem = item as CDSComboBoxItem;\n const index = i ?? -1;\n if (!hasQuery) {\n (comboItem as HTMLElement).style.display = '';\n comboItem.highlighted = false;\n return;\n }\n const matches = this.typeahead\n ? (comboItem.textContent || '').toLowerCase().startsWith(queryText)\n : (comboItem.textContent || '').toLowerCase().includes(queryText);\n const filterFunction =\n typeof this.shouldFilterItem === 'function'\n ? this.shouldFilterItem\n : null;\n const shouldApplyBuiltInFilter =\n filterFunction === null && hasQuery && this.shouldFilterItem === true;\n const itemToString = (value: CDSComboBoxItem) => value.textContent || '';\n const filterInputValue = rawQueryText.length === 0 ? null : rawQueryText;\n const passesFilter = filterFunction\n ? filterFunction({\n item: comboItem,\n itemToString,\n inputValue: filterInputValue,\n })\n : shouldApplyBuiltInFilter\n ? matches\n : true;\n const highlightMatch = filterFunction !== null ? passesFilter : matches;\n if (highlightMatch && firstMatchIndex === -1) {\n firstMatchIndex = index;\n }\n if (filterFunction || shouldApplyBuiltInFilter) {\n (comboItem as HTMLElement).style.display = passesFilter ? '' : 'none';\n } else {\n (comboItem as HTMLElement).style.display = '';\n }\n comboItem.highlighted = index === firstMatchIndex;\n });\n return firstMatchIndex;\n }\n\n protected _scrollItemIntoView(item: HTMLElement) {\n if (!this._itemMenu) {\n return;\n }\n const menuRect = this._itemMenu.getBoundingClientRect();\n const itemRect = item.getBoundingClientRect();\n if (!menuRect || !itemRect) {\n return;\n }\n const menuBottom = menuRect.top + this._itemMenu.clientHeight;\n const isWithinViewport =\n menuRect.top <= itemRect.top && itemRect.bottom <= menuBottom;\n if (isWithinViewport) {\n return;\n }\n const scrollTop = itemRect.top - menuRect.top;\n const scrollBottom = itemRect.bottom - menuRect.bottom;\n this._itemMenu.scrollTop +=\n Math.abs(scrollTop) < Math.abs(scrollBottom) ? scrollTop : scrollBottom;\n }\n\n protected _getSelectedItem(): CDSComboBoxItem | null {\n if (!this.value) return null;\n const items = Array.from(\n this.querySelectorAll(\n (this.constructor as typeof CDSDropdown).selectorItem\n )\n ) as CDSComboBoxItem[];\n return items.find((it) => String(it.value) === String(this.value)) ?? null;\n }\n\n protected _revertInputToSelected(focus = true) {\n const selected = this._getSelectedItem();\n\n let text = selected?.textContent ?? '';\n if (this.allowCustomValue && !selected && this.value) {\n text = this.value as string;\n }\n\n this._filterInputValue = text;\n\n if (this._filterInputNode) {\n this._filterInputNode.value = text;\n\n if (focus) {\n try {\n this._filterInputNode.focus();\n const len = text.length;\n this._filterInputNode.setSelectionRange(len, len);\n } catch {\n /* ignore */\n }\n }\n }\n\n this._resetFilteredItems();\n this.removeAttribute('isClosable');\n this.requestUpdate();\n }\n\n protected _handleInputKeydown(event: KeyboardEvent) {\n // remove the autocomplete suggestion when navigating away from the suggested item\n if (\n this.typeahead &&\n (event.key === 'ArrowDown' || event.key === 'ArrowUp')\n ) {\n this._removeAutoCompleteSuggestion();\n }\n if (event.key !== 'Escape') {\n return;\n }\n if (!this._filterInputNode) {\n return;\n }\n\n if (this.open) {\n this._handleUserInitiatedToggle(false);\n } else {\n if (this.value) {\n this._revertInputToSelected(true);\n } else if (this._filterInputNode.value) {\n this._clearInputWithoutSelecting(true);\n }\n\n if (this.value || this._filterInputNode.value) {\n this._handleUserInitiatedClearInput();\n }\n }\n }\n\n protected _handleClickInner(event: MouseEvent) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n const { target } = event as any;\n if (this._selectionButtonNode?.contains(target)) {\n this._handleUserInitiatedClearInput();\n } else {\n super._handleClickInner(event);\n }\n }\n\n protected _handleKeypressInner(event: KeyboardEvent) {\n const { key } = event;\n const action = (this.constructor as typeof CDSDropdown).getAction(key);\n const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n if (\n this._selectionButtonNode?.contains(event.target as Node) &&\n // Space key should be handled by `<input>` unless \"clear selection\" button has focus\n (action === TRIGGERING || key === ' ')\n ) {\n this._handleUserInitiatedClearInput();\n } else {\n super._handleKeypressInner(event);\n }\n }\n\n /**\n * Handles user-initiated clearing the `<input>` for filtering.\n */\n protected _handleUserInitiatedClearInput() {\n this._resetFilteredItems();\n this._filterInputValue = '';\n if (this._filterInputNode) {\n this._filterInputNode.value = '';\n this._filterInputNode.focus();\n }\n\n this._handleUserInitiatedSelectItem();\n this.requestUpdate();\n }\n\n protected _handleUserInitiatedSelectItem(item?: CDSComboBoxItem) {\n if (item && !this._selectionShouldChange(item)) {\n // Escape hatch for `shouldUpdate()` logic that updates `._filterInputValue()` when selection changes,\n // given we want to update the `<input>` and close the dropdown even if selection doesn't update.\n // Use case:\n // 1. Select the 2nd item in combo box drop down\n // 2. Type some text in the `<input>`\n // 3. Re-select the 2nd item in combo box drop down,\n // the `<input>` has to updated with the 2nd item and the dropdown should be closed,\n // even if there is no change in the selected value\n this._filterInputValue = item.textContent || '';\n this.open = false;\n this.requestUpdate();\n }\n super._handleUserInitiatedSelectItem(item);\n }\n\n protected _selectionDidChange(itemToSelect?: CDSComboBoxItem) {\n this.value = !itemToSelect ? '' : itemToSelect.value;\n forEach(\n this.querySelectorAll(\n (this.constructor as typeof CDSDropdown).selectorItemSelected\n ),\n (item) => {\n (item as CDSComboBoxItem).selected = false;\n item.setAttribute('aria-selected', 'false');\n }\n );\n if (itemToSelect) {\n itemToSelect.selected = true;\n itemToSelect.setAttribute('aria-selected', 'true');\n }\n\n this._handleUserInitiatedToggle(false);\n\n if (this._filterInputNode) {\n try {\n this._filterInputNode.focus();\n const val = this._filterInputNode.value || '';\n this._filterInputNode.setSelectionRange(val.length, val.length);\n } catch {\n /* ignore browsers that prevent setSelectionRange */\n }\n }\n }\n\n protected _renderLabel(): TemplateResult {\n const {\n disabled,\n inputLabel,\n label,\n open,\n readOnly,\n value,\n inputProps,\n _activeDescendant: activeDescendant,\n _filterInputValue: filterInputValue,\n _handleInput: handleInput,\n _handleInputKeydown: handleInputKeydown,\n } = this;\n\n const inputClasses = classMap({\n [`${prefix}--text-input`]: true,\n [`${prefix}--text-input--empty`]: !value,\n });\n\n let activeDescendantFallback: string | undefined;\n if (open && !activeDescendant) {\n const constructor = this.constructor as typeof CDSDropdown;\n const items = this.querySelectorAll(constructor.selectorItem);\n activeDescendantFallback = items[0]?.id;\n }\n\n return html`\n <input\n id=\"trigger-button\"\n class=\"${inputClasses}\"\n ?disabled=${disabled}\n placeholder=\"${label}\"\n .value=${filterInputValue}\n role=\"combobox\"\n aria-label=\"${ifNonEmpty(inputLabel)}\"\n aria-labelledby=\"dropdown-label\"\n aria-controls=\"menu-body\"\n aria-haspopup=\"listbox\"\n aria-autocomplete=\"list\"\n aria-expanded=\"${String(open)}\"\n aria-activedescendant=\"${ifDefined(\n open ? (activeDescendant ?? activeDescendantFallback) : ''\n )}\"\n ?readonly=${readOnly}\n @input=${handleInput}\n @keydown=${handleInputKeydown}\n ...=\"${spread(this._normalizeInputProps(inputProps))}\" />\n `;\n }\n\n protected _renderFollowingLabel(): TemplateResult | undefined {\n const { clearSelectionLabel, _filterInputValue: filterInputValue } = this;\n\n if (filterInputValue.length != 0) {\n this.setAttribute('isClosable', '');\n } else {\n this.removeAttribute('isClosable');\n }\n\n return filterInputValue.length === 0\n ? undefined\n : html`\n <div\n id=\"selection-button\"\n role=\"button\"\n class=\"${prefix}--list-box__selection\"\n tabindex=\"-1\"\n title=\"${clearSelectionLabel}\">\n ${iconLoader(Close16, { 'aria-label': clearSelectionLabel })}\n </div>\n `;\n }\n\n protected _renderTitleLabel(): TemplateResult {\n const {\n disabled,\n hideLabel,\n titleText,\n _slotTitleTextNode: slotTitleTextNode,\n _handleSlotchangeLabelText: handleSlotchangeLabelText,\n } = this;\n\n const labelClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--label--disabled`]: disabled,\n [`${prefix}--visually-hidden`]: hideLabel,\n });\n\n const hasTitleText =\n titleText ||\n (slotTitleTextNode && slotTitleTextNode.assignedNodes().length > 0);\n\n return html`\n <label\n id=\"dropdown-label\"\n part=\"title-text\"\n class=\"${labelClasses}\"\n ?hidden=\"${!hasTitleText}\">\n <slot name=\"title-text\" @slotchange=\"${handleSlotchangeLabelText}\"\n >${titleText}</slot\n >\n </label>\n `;\n }\n /**\n * The `aria-label` attribute for the icon to clear selection.\n */\n @property({ attribute: 'clear-selection-label' })\n clearSelectionLabel = 'Clear selection';\n\n /**\n * The `aria-label` attribute for the `<input>` for filtering.\n */\n @property({ attribute: 'input-label' })\n inputLabel = '';\n\n /**\n * The custom item matching callback.\n */\n @property({ attribute: false })\n itemMatches!: (item: CDSComboBoxItem, queryText: string) => boolean;\n\n /**\n * Provide custom filtering behavior. This attribute will be ignored if\n * `typeahead` is enabled and will default to `true`\n */\n @property({\n attribute: 'should-filter-item',\n converter: {\n fromAttribute: (value) => value !== null,\n },\n })\n shouldFilterItem: boolean | ShouldFilterItem = false;\n\n /**\n * **Experimental**: will enable autocomplete and typeahead for the input field.\n */\n @property({ type: Boolean, reflect: true })\n typeahead = false;\n\n /**\n * `true` to allow custom values that do not match any item in the list.\n */\n @property({ type: Boolean, attribute: 'allow-custom-value' })\n allowCustomValue = false;\n\n /**\n * Additional input attributes to apply to the internal input element.\n * Allows passing native HTML input attributes like `maxlength`, `pattern`,\n * `autocomplete`, etc.\n */\n @property({ type: Object, attribute: false })\n inputProps?: Record<string, string | number | boolean>;\n\n private _normalizeInputProps(\n inputProps?: Record<string, string | number | boolean>\n ) {\n const normalizedInputProps: Record<string, string> = {};\n\n Object.entries(inputProps ?? {}).forEach(([key, value]) => {\n if (value === undefined || value === null || value === false) {\n return;\n }\n normalizedInputProps[key] = value === true ? '' : String(value);\n });\n\n return normalizedInputProps;\n }\n\n shouldUpdate(changedProperties) {\n super.shouldUpdate(changedProperties);\n if (!changedProperties.has('value')) {\n return true;\n }\n if (this._selectedItemContent) {\n this._filterInputValue = this._selectedItemContent.textContent || '';\n return true;\n }\n if (this.allowCustomValue && this.value) {\n this._filterInputValue = String(this.value);\n return true;\n }\n if (this.value === '') {\n this._filterInputValue = '';\n }\n return true;\n }\n\n protected _clearInputWithoutSelecting(focus = true) {\n this._filterInputValue = '';\n if (this._filterInputNode) {\n this._filterInputNode.value = '';\n\n if (focus) {\n try {\n this._filterInputNode.focus();\n this._filterInputNode.setSelectionRange(0, 0);\n } catch {\n /* ignore */\n }\n }\n }\n\n this._resetFilteredItems();\n this.removeAttribute('isClosable');\n this.requestUpdate();\n }\n\n updated(changedProperties) {\n super.updated(changedProperties);\n if (changedProperties.has('open')) {\n if (this.open && this._filterInputNode) {\n this._handleInput(changedProperties);\n } else if (!this.open) {\n // remove the autocomplete suggestion when closing the combobox\n this._removeAutoCompleteSuggestion();\n this._resetFilteredItems();\n if (this._filterInputNode.value == '') {\n this.value = '';\n }\n if (this.value) {\n this._revertInputToSelected(false);\n if (\n this._filterInputNode &&\n document.activeElement === this._filterInputNode\n ) {\n (this._filterInputNode as HTMLInputElement).blur();\n }\n } else if (\n this._filterInputValue &&\n this._filterInputValue.length > 0 &&\n !this.allowCustomValue\n ) {\n this._clearInputWithoutSelecting(false);\n if (\n this._filterInputNode &&\n document.activeElement === this._filterInputNode\n ) {\n (this._filterInputNode as HTMLInputElement).blur();\n }\n } else {\n // nothing typed and no selection, ensure no extra changes\n }\n }\n }\n const { _listBoxNode: listBoxNode } = this;\n if (listBoxNode) {\n listBoxNode.classList.add(`${prefix}--combo-box`);\n }\n }\n\n // Restores the full list when the query is cleared or the menu closes.\n protected _resetFilteredItems() {\n const items = this.querySelectorAll(\n (this.constructor as typeof CDSComboBox).selectorItem\n );\n forEach(items, (item) => {\n const comboItem = item as CDSComboBoxItem;\n (comboItem as HTMLElement).style.display = '';\n comboItem.highlighted = false;\n });\n }\n\n // For combo box, open/selection with space key is disabled given the input box should take it over\n static TRIGGER_KEYS = new Set(['Enter']);\n\n /**\n * A selector that will return highlighted items.\n */\n static get selectorItemHighlighted() {\n return `${prefix}-combo-box-item[highlighted]`;\n }\n\n /**\n * A selector that will return combo box items.\n */\n static get selectorItem() {\n return `${prefix}-combo-box-item`;\n }\n\n /**\n * A selector that will return selected items.\n */\n static get selectorItemSelected() {\n return `${prefix}-combo-box-item[selected]`;\n }\n\n /**\n * The name of the custom event fired before this combo box item is being toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated action of toggling this combo box item.\n */\n static get eventBeforeToggle() {\n return `${prefix}-combo-box-beingtoggled`;\n }\n\n /**\n * The name of the custom event fired after this combo box item is toggled upon a user gesture.\n */\n static get eventToggle() {\n return `${prefix}-combo-box-toggled`;\n }\n\n /**\n * The name of the custom event fired before a combo box item is selected upon a user gesture.\n * Cancellation of this event stops changing the user-initiated selection.\n */\n static get eventBeforeSelect() {\n return `${prefix}-combo-box-beingselected`;\n }\n\n /**\n * The name of the custom event fired after a a combo box item is selected upon a user gesture.\n */\n static get eventSelect() {\n return `${prefix}-combo-box-selected`;\n }\n\n static styles = styles;\n}\n\nexport default CDSComboBox;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"combo-box.js","names":["CDSDropdown","ifNonEmpty","styles","customElement"],"sources":["../../../src/components/combo-box/combo-box.ts"],"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\nimport { classMap } from 'lit/directives/class-map.js';\nimport { TemplateResult, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport Close16 from '@carbon/icons/es/close/16.js';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport CDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';\nimport CDSComboBoxItem from './combo-box-item';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport styles from './combo-box.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport spread from '../../globals/directives/spread';\n\nexport { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from '../dropdown/dropdown';\n\ntype ShouldFilterItem = (input: {\n item: CDSComboBoxItem;\n itemToString: (item: CDSComboBoxItem) => string;\n inputValue: string | null;\n}) => boolean;\n\n/**\n * Combo box.\n *\n * @element cds-combo-box\n * @fires cds-combo-box-beingselected\n * The custom event fired before a combo box item is selected upon a user gesture.\n * Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-combo-box-beingtoggled\n * The custom event fired before the open state of this combo box is toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated toggling.\n * @fires cds-combo-box-selected - The custom event fired after a combo box item is selected upon a user gesture.\n * @fires cds-combo-box-toggled - The custom event fired after the open state of this combo box is toggled upon a user gesture.\n */\n@customElement(`${prefix}-combo-box`)\nclass CDSComboBox extends CDSDropdown {\n /**\n * The text content that should be set to the `<input>` for filtering.\n */\n protected _filterInputValue = '';\n\n protected _shouldTriggerBeFocusable = false;\n\n /**\n * The `<input>` for filtering.\n */\n @query('input')\n private _filterInputNode!: HTMLInputElement;\n\n /**\n * The menu containing all selectable items.\n */\n @query('#menu-body')\n private _itemMenu!: HTMLElement;\n\n /**\n * The selection button.\n */\n @query('#selection-button')\n private _selectionButtonNode!: HTMLElement;\n\n /**\n * @param item A combo box item.\n * @returns `true` if the given combo box item matches the query text user types.\n */\n protected _testItemWithQueryText(item) {\n return (this.itemMatches || this._defaultItemMatches)(\n item,\n this._filterInputNode.value\n );\n }\n\n /**\n * The default item matching callback.\n *\n * @param item The combo box item.\n * @param queryText The query text user types.\n * @returns `true` if the given combo box item matches the given query text.\n */\n protected _defaultItemMatches(\n item: CDSComboBoxItem,\n queryText: string\n ): boolean {\n return (\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n item.textContent!.toLowerCase().indexOf(queryText.toLowerCase()) >= 0\n );\n }\n\n connectedCallback() {\n super.connectedCallback();\n if (this.typeahead) {\n this.shouldFilterItem = true;\n this.setAttribute('should-filter-item', '');\n }\n }\n\n /**\n * Handles `input` event on the `<input>` for filtering.\n */\n protected _handleInput(event: InputEvent) {\n const rawQueryText = this._filterInputNode.value;\n const queryText = rawQueryText.trim().toLowerCase();\n\n if (rawQueryText.length !== 0) {\n this.setAttribute('isClosable', '');\n } else {\n this.removeAttribute('isClosable');\n }\n\n const items = this.querySelectorAll(\n (this.constructor as typeof CDSComboBox).selectorItem\n );\n\n const firstMatchIndex = this._filterItems(items, queryText, rawQueryText);\n if (firstMatchIndex !== -1) {\n const highlightedItem = items[firstMatchIndex];\n if (highlightedItem) {\n this._scrollItemIntoView(highlightedItem as HTMLElement);\n }\n if (this.typeahead && event?.inputType?.startsWith('insert')) {\n const suggestedItem = highlightedItem.textContent?.trim() ?? '';\n if (\n suggestedItem.toLowerCase().startsWith(rawQueryText.toLowerCase()) &&\n suggestedItem.length > rawQueryText.length\n ) {\n const suggestionText =\n rawQueryText + suggestedItem.slice(rawQueryText.length);\n\n this._filterInputNode.value = suggestionText;\n this._filterInputNode.setSelectionRange(\n rawQueryText.length,\n suggestionText.length\n );\n\n this._filterInputValue = suggestionText;\n this.open = true;\n this.requestUpdate();\n return;\n }\n }\n }\n\n this._filterInputValue = rawQueryText;\n\n if (this.allowCustomValue) {\n const previousValue = this.value;\n this.value = rawQueryText;\n\n if (previousValue !== this.value) {\n this.dispatchEvent(\n new CustomEvent(\n (this.constructor as typeof CDSComboBox).eventSelect,\n {\n bubbles: true,\n composed: true,\n detail: {\n item: null,\n value: this.value,\n },\n }\n )\n );\n }\n }\n this.open = true;\n this.requestUpdate();\n }\n\n // removes the autocomplete suggestion\n protected _removeAutoCompleteSuggestion() {\n if (!this._filterInputNode) return;\n const { selectionStart, selectionEnd, value } = this._filterInputNode;\n if (selectionStart && selectionEnd && selectionEnd > selectionStart) {\n const cleanInput = value.slice(0, selectionStart);\n this._filterInputNode.value = cleanInput;\n this._filterInputNode.setSelectionRange(\n cleanInput.length,\n cleanInput.length\n );\n return;\n }\n }\n\n // Applies filtering/highlighting to all slotted items.\n protected _filterItems(\n items: NodeListOf<Element>,\n queryText: string,\n rawQueryText: string\n ): number {\n let firstMatchIndex = -1;\n const hasQuery = Boolean(queryText);\n forEach(items, (item, i) => {\n const comboItem = item as CDSComboBoxItem;\n const index = i ?? -1;\n if (!hasQuery) {\n (comboItem as HTMLElement).style.display = '';\n comboItem.highlighted = false;\n return;\n }\n const matches = this.typeahead\n ? (comboItem.textContent || '').toLowerCase().startsWith(queryText)\n : (comboItem.textContent || '').toLowerCase().includes(queryText);\n const filterFunction =\n typeof this.shouldFilterItem === 'function'\n ? this.shouldFilterItem\n : null;\n const shouldApplyBuiltInFilter =\n filterFunction === null && hasQuery && this.shouldFilterItem === true;\n const itemToString = (value: CDSComboBoxItem) => value.textContent || '';\n const filterInputValue = rawQueryText.length === 0 ? null : rawQueryText;\n const passesFilter = filterFunction\n ? filterFunction({\n item: comboItem,\n itemToString,\n inputValue: filterInputValue,\n })\n : shouldApplyBuiltInFilter\n ? matches\n : true;\n const highlightMatch = filterFunction !== null ? passesFilter : matches;\n if (highlightMatch && firstMatchIndex === -1) {\n firstMatchIndex = index;\n }\n if (filterFunction || shouldApplyBuiltInFilter) {\n (comboItem as HTMLElement).style.display = passesFilter ? '' : 'none';\n } else {\n (comboItem as HTMLElement).style.display = '';\n }\n comboItem.highlighted = index === firstMatchIndex;\n });\n return firstMatchIndex;\n }\n\n protected _scrollItemIntoView(item: HTMLElement) {\n if (!this._itemMenu) {\n return;\n }\n const menuRect = this._itemMenu.getBoundingClientRect();\n const itemRect = item.getBoundingClientRect();\n if (!menuRect || !itemRect) {\n return;\n }\n const menuBottom = menuRect.top + this._itemMenu.clientHeight;\n const isWithinViewport =\n menuRect.top <= itemRect.top && itemRect.bottom <= menuBottom;\n if (isWithinViewport) {\n return;\n }\n const scrollTop = itemRect.top - menuRect.top;\n const scrollBottom = itemRect.bottom - menuRect.bottom;\n this._itemMenu.scrollTop +=\n Math.abs(scrollTop) < Math.abs(scrollBottom) ? scrollTop : scrollBottom;\n }\n\n protected _getSelectedItem(): CDSComboBoxItem | null {\n if (!this.value) return null;\n const items = Array.from(\n this.querySelectorAll(\n (this.constructor as typeof CDSDropdown).selectorItem\n )\n ) as CDSComboBoxItem[];\n return items.find((it) => String(it.value) === String(this.value)) ?? null;\n }\n\n protected _revertInputToSelected(focus = true) {\n const selected = this._getSelectedItem();\n\n let text = selected?.textContent ?? '';\n if (this.allowCustomValue && !selected && this.value) {\n text = this.value as string;\n }\n\n this._filterInputValue = text;\n\n if (this._filterInputNode) {\n this._filterInputNode.value = text;\n\n if (focus) {\n try {\n this._filterInputNode.focus();\n const len = text.length;\n this._filterInputNode.setSelectionRange(len, len);\n } catch {\n /* ignore */\n }\n }\n }\n\n this._resetFilteredItems();\n this.removeAttribute('isClosable');\n this.requestUpdate();\n }\n\n protected _handleInputKeydown(event: KeyboardEvent) {\n // remove the autocomplete suggestion when navigating away from the suggested item\n if (\n this.typeahead &&\n (event.key === 'ArrowDown' || event.key === 'ArrowUp')\n ) {\n this._removeAutoCompleteSuggestion();\n }\n if (event.key !== 'Escape') {\n return;\n }\n if (!this._filterInputNode) {\n return;\n }\n\n if (this.open) {\n this._handleUserInitiatedToggle(false);\n } else {\n if (this.value) {\n this._revertInputToSelected(true);\n } else if (this._filterInputNode.value) {\n this._clearInputWithoutSelecting(true);\n }\n\n if (this.value || this._filterInputNode.value) {\n this._handleUserInitiatedClearInput();\n }\n }\n }\n\n protected _handleClickInner(event: MouseEvent) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n const { target } = event as any;\n if (this._selectionButtonNode?.contains(target)) {\n this._handleUserInitiatedClearInput();\n } else {\n super._handleClickInner(event);\n }\n }\n\n protected _handleKeypressInner(event: KeyboardEvent) {\n const { key } = event;\n const action = (this.constructor as typeof CDSDropdown).getAction(key);\n const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n if (\n this._selectionButtonNode?.contains(event.target as Node) &&\n // Space key should be handled by `<input>` unless \"clear selection\" button has focus\n (action === TRIGGERING || key === ' ')\n ) {\n this._handleUserInitiatedClearInput();\n } else {\n super._handleKeypressInner(event);\n }\n }\n\n /**\n * Handles user-initiated clearing the `<input>` for filtering.\n */\n protected _handleUserInitiatedClearInput() {\n this._handleUserInitiatedSelectItem();\n if (this.value) {\n this._revertInputToSelected(true);\n } else {\n this._clearInputWithoutSelecting(true);\n }\n this.requestUpdate();\n }\n\n protected _handleUserInitiatedSelectItem(item?: CDSComboBoxItem) {\n if (item && !this._selectionShouldChange(item)) {\n // Escape hatch for `shouldUpdate()` logic that updates `._filterInputValue()` when selection changes,\n // given we want to update the `<input>` and close the dropdown even if selection doesn't update.\n // Use case:\n // 1. Select the 2nd item in combo box drop down\n // 2. Type some text in the `<input>`\n // 3. Re-select the 2nd item in combo box drop down,\n // the `<input>` has to updated with the 2nd item and the dropdown should be closed,\n // even if there is no change in the selected value\n this._filterInputValue = item.textContent || '';\n this.open = false;\n this.requestUpdate();\n }\n super._handleUserInitiatedSelectItem(item);\n }\n\n protected _selectionDidChange(itemToSelect?: CDSComboBoxItem) {\n this.value = !itemToSelect ? '' : itemToSelect.value;\n forEach(\n this.querySelectorAll(\n (this.constructor as typeof CDSDropdown).selectorItemSelected\n ),\n (item) => {\n (item as CDSComboBoxItem).selected = false;\n item.setAttribute('aria-selected', 'false');\n }\n );\n if (itemToSelect) {\n itemToSelect.selected = true;\n itemToSelect.setAttribute('aria-selected', 'true');\n }\n\n this._handleUserInitiatedToggle(false);\n\n if (this._filterInputNode) {\n try {\n this._filterInputNode.focus();\n const val = this._filterInputNode.value || '';\n this._filterInputNode.setSelectionRange(val.length, val.length);\n } catch {\n /* ignore browsers that prevent setSelectionRange */\n }\n }\n }\n\n protected _renderLabel(): TemplateResult {\n const {\n disabled,\n inputLabel,\n label,\n open,\n readOnly,\n value,\n inputProps,\n _activeDescendant: activeDescendant,\n _filterInputValue: filterInputValue,\n _handleInput: handleInput,\n _handleInputKeydown: handleInputKeydown,\n } = this;\n\n const inputClasses = classMap({\n [`${prefix}--text-input`]: true,\n [`${prefix}--text-input--empty`]: !value,\n });\n\n let activeDescendantFallback: string | undefined;\n if (open && !activeDescendant) {\n const constructor = this.constructor as typeof CDSDropdown;\n const items = this.querySelectorAll(constructor.selectorItem);\n activeDescendantFallback = items[0]?.id;\n }\n\n return html`\n <input\n id=\"trigger-button\"\n class=\"${inputClasses}\"\n ?disabled=${disabled}\n placeholder=\"${label}\"\n .value=${filterInputValue}\n role=\"combobox\"\n aria-label=\"${ifNonEmpty(inputLabel)}\"\n aria-labelledby=\"dropdown-label\"\n aria-controls=\"menu-body\"\n aria-haspopup=\"listbox\"\n aria-autocomplete=\"list\"\n aria-expanded=\"${String(open)}\"\n aria-activedescendant=\"${ifDefined(\n open ? (activeDescendant ?? activeDescendantFallback) : ''\n )}\"\n ?readonly=${readOnly}\n @input=${handleInput}\n @keydown=${handleInputKeydown}\n ...=\"${spread(this._normalizeInputProps(inputProps))}\" />\n `;\n }\n\n protected _renderFollowingLabel(): TemplateResult | undefined {\n const { clearSelectionLabel, _filterInputValue: filterInputValue } = this;\n\n if (filterInputValue.length != 0) {\n this.setAttribute('isClosable', '');\n } else {\n this.removeAttribute('isClosable');\n }\n\n return filterInputValue.length === 0\n ? undefined\n : html`\n <div\n id=\"selection-button\"\n role=\"button\"\n class=\"${prefix}--list-box__selection\"\n tabindex=\"-1\"\n title=\"${clearSelectionLabel}\">\n ${iconLoader(Close16, { 'aria-label': clearSelectionLabel })}\n </div>\n `;\n }\n\n protected _renderTitleLabel(): TemplateResult {\n const {\n disabled,\n hideLabel,\n titleText,\n _slotTitleTextNode: slotTitleTextNode,\n _handleSlotchangeLabelText: handleSlotchangeLabelText,\n } = this;\n\n const labelClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--label--disabled`]: disabled,\n [`${prefix}--visually-hidden`]: hideLabel,\n });\n\n const hasTitleText =\n titleText ||\n (slotTitleTextNode && slotTitleTextNode.assignedNodes().length > 0);\n\n return html`\n <label\n id=\"dropdown-label\"\n part=\"title-text\"\n class=\"${labelClasses}\"\n ?hidden=\"${!hasTitleText}\">\n <slot name=\"title-text\" @slotchange=\"${handleSlotchangeLabelText}\"\n >${titleText}</slot\n >\n </label>\n `;\n }\n /**\n * The `aria-label` attribute for the icon to clear selection.\n */\n @property({ attribute: 'clear-selection-label' })\n clearSelectionLabel = 'Clear selection';\n\n /**\n * The `aria-label` attribute for the `<input>` for filtering.\n */\n @property({ attribute: 'input-label' })\n inputLabel = '';\n\n /**\n * The custom item matching callback.\n */\n @property({ attribute: false })\n itemMatches!: (item: CDSComboBoxItem, queryText: string) => boolean;\n\n /**\n * Provide custom filtering behavior. This attribute will be ignored if\n * `typeahead` is enabled and will default to `true`\n */\n @property({\n attribute: 'should-filter-item',\n converter: {\n fromAttribute: (value) => value !== null,\n },\n })\n shouldFilterItem: boolean | ShouldFilterItem = false;\n\n /**\n * **Experimental**: will enable autocomplete and typeahead for the input field.\n */\n @property({ type: Boolean, reflect: true })\n typeahead = false;\n\n /**\n * `true` to allow custom values that do not match any item in the list.\n */\n @property({ type: Boolean, attribute: 'allow-custom-value' })\n allowCustomValue = false;\n\n /**\n * Additional input attributes to apply to the internal input element.\n * Allows passing native HTML input attributes like `maxlength`, `pattern`,\n * `autocomplete`, etc.\n */\n @property({ type: Object, attribute: false })\n inputProps?: Record<string, string | number | boolean>;\n\n private _normalizeInputProps(\n inputProps?: Record<string, string | number | boolean>\n ) {\n const normalizedInputProps: Record<string, string> = {};\n\n Object.entries(inputProps ?? {}).forEach(([key, value]) => {\n if (value === undefined || value === null || value === false) {\n return;\n }\n normalizedInputProps[key] = value === true ? '' : String(value);\n });\n\n return normalizedInputProps;\n }\n\n shouldUpdate(changedProperties) {\n super.shouldUpdate(changedProperties);\n if (!changedProperties.has('value')) {\n return true;\n }\n if (this._selectedItemContent) {\n this._filterInputValue = this._selectedItemContent.textContent || '';\n return true;\n }\n if (this.allowCustomValue && this.value) {\n this._filterInputValue = String(this.value);\n return true;\n }\n if (this.value === '') {\n this._filterInputValue = '';\n }\n return true;\n }\n\n protected _clearInputWithoutSelecting(focus = true) {\n this._filterInputValue = '';\n if (this._filterInputNode) {\n this._filterInputNode.value = '';\n\n if (focus) {\n try {\n this._filterInputNode.focus();\n this._filterInputNode.setSelectionRange(0, 0);\n } catch {\n /* ignore */\n }\n }\n }\n\n this._resetFilteredItems();\n this.removeAttribute('isClosable');\n this.requestUpdate();\n }\n\n updated(changedProperties) {\n super.updated(changedProperties);\n if (changedProperties.has('open')) {\n if (this.open && this._filterInputNode) {\n this._handleInput(changedProperties);\n } else if (!this.open) {\n // remove the autocomplete suggestion when closing the combobox\n this._removeAutoCompleteSuggestion();\n this._resetFilteredItems();\n if (this._filterInputNode.value == '') {\n this.value = '';\n }\n if (this.value) {\n this._revertInputToSelected(false);\n if (\n this._filterInputNode &&\n document.activeElement === this._filterInputNode\n ) {\n (this._filterInputNode as HTMLInputElement).blur();\n }\n } else if (\n this._filterInputValue &&\n this._filterInputValue.length > 0 &&\n !this.allowCustomValue\n ) {\n this._clearInputWithoutSelecting(false);\n if (\n this._filterInputNode &&\n document.activeElement === this._filterInputNode\n ) {\n (this._filterInputNode as HTMLInputElement).blur();\n }\n } else {\n // nothing typed and no selection, ensure no extra changes\n }\n }\n }\n const { _listBoxNode: listBoxNode } = this;\n if (listBoxNode) {\n listBoxNode.classList.add(`${prefix}--combo-box`);\n }\n }\n\n // Restores the full list when the query is cleared or the menu closes.\n protected _resetFilteredItems() {\n const items = this.querySelectorAll(\n (this.constructor as typeof CDSComboBox).selectorItem\n );\n forEach(items, (item) => {\n const comboItem = item as CDSComboBoxItem;\n (comboItem as HTMLElement).style.display = '';\n comboItem.highlighted = false;\n });\n }\n\n // For combo box, open/selection with space key is disabled given the input box should take it over\n static TRIGGER_KEYS = new Set(['Enter']);\n\n /**\n * A selector that will return highlighted items.\n */\n static get selectorItemHighlighted() {\n return `${prefix}-combo-box-item[highlighted]`;\n }\n\n /**\n * A selector that will return combo box items.\n */\n static get selectorItem() {\n return `${prefix}-combo-box-item`;\n }\n\n /**\n * A selector that will return selected items.\n */\n static get selectorItemSelected() {\n return `${prefix}-combo-box-item[selected]`;\n }\n\n /**\n * The name of the custom event fired before this combo box item is being toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated action of toggling this combo box item.\n */\n static get eventBeforeToggle() {\n return `${prefix}-combo-box-beingtoggled`;\n }\n\n /**\n * The name of the custom event fired after this combo box item is toggled upon a user gesture.\n */\n static get eventToggle() {\n return `${prefix}-combo-box-toggled`;\n }\n\n /**\n * The name of the custom event fired before a combo box item is selected upon a user gesture.\n * Cancellation of this event stops changing the user-initiated selection.\n */\n static get eventBeforeSelect() {\n return `${prefix}-combo-box-beingselected`;\n }\n\n /**\n * The name of the custom event fired after a a combo box item is selected upon a user gesture.\n */\n static get eventSelect() {\n return `${prefix}-combo-box-selected`;\n }\n\n static styles = styles;\n}\n\nexport default CDSComboBox;\n"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
export { CDSLayout, LAYOUT_SIZES, LAYOUT_DENSITIES } from './layout';
|
|
8
|
+
export type { LayoutSize, LayoutDensity } from './layout';
|
|
9
|
+
export { CDSLayoutConstraint } from './layout-constraint';
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { CDSLayout, LAYOUT_DENSITIES, LAYOUT_SIZES } from "./layout.js";
|
|
9
|
+
import { CDSLayoutConstraint } from "./layout-constraint.js";
|
|
10
|
+
|
|
11
|
+
export { CDSLayout, CDSLayoutConstraint, LAYOUT_DENSITIES, LAYOUT_SIZES };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { LitElement } from 'lit';
|
|
8
|
+
import { type LayoutSize } from './layout';
|
|
9
|
+
/**
|
|
10
|
+
* `<cds-layout-constraint>` restricts the size range available to its
|
|
11
|
+
* descendant components.
|
|
12
|
+
*
|
|
13
|
+
* @element cds-layout-constraint
|
|
14
|
+
*/
|
|
15
|
+
declare class CDSLayoutConstraint extends LitElement {
|
|
16
|
+
static styles: any;
|
|
17
|
+
sizeDefault?: LayoutSize;
|
|
18
|
+
sizeMin?: LayoutSize;
|
|
19
|
+
sizeMax?: LayoutSize;
|
|
20
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
21
|
+
}
|
|
22
|
+
export { CDSLayoutConstraint };
|
|
23
|
+
export default CDSLayoutConstraint;
|
|
24
|
+
//# sourceMappingURL=layout-constraint.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layout-constraint.d.ts","sourceRoot":"","sources":["../../../src/components/layout/layout-constraint.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C;;;;;GAKG;AACH,cACM,mBAAoB,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,MAAU;IAGvB,WAAW,CAAC,EAAE,UAAU,CAAC;IAGzB,OAAO,CAAC,EAAE,UAAU,CAAC;IAGrB,OAAO,CAAC,EAAE,UAAU,CAAC;IAErB,MAAM;CAGP;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAC/B,eAAe,mBAAmB,CAAC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { prefix } from "../../globals/settings.js";
|
|
9
|
+
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
|
|
10
|
+
import layout_default from "./layout.scss.js";
|
|
11
|
+
import { LitElement, html } from "lit";
|
|
12
|
+
import { customElement, property } from "lit/decorators.js";
|
|
13
|
+
|
|
14
|
+
//#region src/components/layout/layout-constraint.ts
|
|
15
|
+
/**
|
|
16
|
+
* Copyright IBM Corp. 2026
|
|
17
|
+
*
|
|
18
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
19
|
+
* LICENSE file in the root directory of this source tree.
|
|
20
|
+
*/
|
|
21
|
+
/**
|
|
22
|
+
* `<cds-layout-constraint>` restricts the size range available to its
|
|
23
|
+
* descendant components.
|
|
24
|
+
*
|
|
25
|
+
* @element cds-layout-constraint
|
|
26
|
+
*/
|
|
27
|
+
let CDSLayoutConstraint = class CDSLayoutConstraint extends LitElement {
|
|
28
|
+
static {
|
|
29
|
+
this.styles = layout_default;
|
|
30
|
+
}
|
|
31
|
+
render() {
|
|
32
|
+
return html`<slot></slot>`;
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
__decorate([property({
|
|
36
|
+
attribute: "size-default",
|
|
37
|
+
reflect: true
|
|
38
|
+
})], CDSLayoutConstraint.prototype, "sizeDefault", void 0);
|
|
39
|
+
__decorate([property({
|
|
40
|
+
attribute: "size-min",
|
|
41
|
+
reflect: true
|
|
42
|
+
})], CDSLayoutConstraint.prototype, "sizeMin", void 0);
|
|
43
|
+
__decorate([property({
|
|
44
|
+
attribute: "size-max",
|
|
45
|
+
reflect: true
|
|
46
|
+
})], CDSLayoutConstraint.prototype, "sizeMax", void 0);
|
|
47
|
+
CDSLayoutConstraint = __decorate([customElement(`${prefix}-layout-constraint`)], CDSLayoutConstraint);
|
|
48
|
+
var layout_constraint_default = CDSLayoutConstraint;
|
|
49
|
+
|
|
50
|
+
//#endregion
|
|
51
|
+
export { CDSLayoutConstraint, layout_constraint_default as default };
|
|
52
|
+
//# sourceMappingURL=layout-constraint.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layout-constraint.js","names":["styles"],"sources":["../../../src/components/layout/layout-constraint.ts"],"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\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './layout.scss?lit';\nimport { type LayoutSize } from './layout';\n\n/**\n * `<cds-layout-constraint>` restricts the size range available to its\n * descendant components.\n *\n * @element cds-layout-constraint\n */\n@customElement(`${prefix}-layout-constraint`)\nclass CDSLayoutConstraint extends LitElement {\n static styles = styles;\n\n @property({ attribute: 'size-default', reflect: true })\n sizeDefault?: LayoutSize;\n\n @property({ attribute: 'size-min', reflect: true })\n sizeMin?: LayoutSize;\n\n @property({ attribute: 'size-max', reflect: true })\n sizeMax?: LayoutSize;\n\n render() {\n return html`<slot></slot>`;\n }\n}\n\nexport { CDSLayoutConstraint };\nexport default CDSLayoutConstraint;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,gCACM,4BAA4B,WAAW;;gBAC3BA;;CAWhB,SAAS;AACP,SAAO,IAAI;;;YAVZ,SAAS;CAAE,WAAW;CAAgB,SAAS;CAAM,CAAC;YAGtD,SAAS;CAAE,WAAW;CAAY,SAAS;CAAM,CAAC;YAGlD,SAAS;CAAE,WAAW;CAAY,SAAS;CAAM,CAAC;kCAVpD,cAAc,GAAG,OAAO,oBAAoB;AAmB7C,gCAAe"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
import { LitElement } from 'lit';
|
|
8
|
+
export declare const LAYOUT_SIZES: readonly ["xs", "sm", "md", "lg", "xl", "2xl"];
|
|
9
|
+
export declare const LAYOUT_DENSITIES: readonly ["condensed", "normal"];
|
|
10
|
+
export type LayoutSize = (typeof LAYOUT_SIZES)[number];
|
|
11
|
+
export type LayoutDensity = (typeof LAYOUT_DENSITIES)[number];
|
|
12
|
+
/**
|
|
13
|
+
* `<cds-layout>` sets a layout context (size and/or density) for all
|
|
14
|
+
* descendant Carbon components.
|
|
15
|
+
*
|
|
16
|
+
* @see This component is in {@link https://web-components.carbondesignsystem.com/?path=/docs/preview-about-preview--about-preview|preview status}
|
|
17
|
+
*
|
|
18
|
+
* @element cds-layout
|
|
19
|
+
*/
|
|
20
|
+
declare class CDSLayout extends LitElement {
|
|
21
|
+
static styles: any;
|
|
22
|
+
/**
|
|
23
|
+
* Size context for all descendant components.
|
|
24
|
+
*/
|
|
25
|
+
size?: LayoutSize;
|
|
26
|
+
/**
|
|
27
|
+
* Density context for all descendant components.
|
|
28
|
+
*/
|
|
29
|
+
density?: LayoutDensity;
|
|
30
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
31
|
+
}
|
|
32
|
+
export { CDSLayout };
|
|
33
|
+
export default CDSLayout;
|
|
34
|
+
//# sourceMappingURL=layout.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/components/layout/layout.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,eAAO,MAAM,YAAY,gDAAiD,CAAC;AAC3E,eAAO,MAAM,gBAAgB,kCAAmC,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AACvD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D;;;;;;;GAOG;AACH,cACM,SAAU,SAAQ,UAAU;IAChC,MAAM,CAAC,MAAM,MAAU;IAEvB;;OAEG;IAEH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB,MAAM;CAGP;AAED,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,eAAe,SAAS,CAAC"}
|