@politiet/sheriff-web-components 2.0.1 → 2.0.3
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/dist/frameworks/react.d.ts +4 -4
- package/dist/frameworks/react.d.ts.map +1 -1
- package/dist/react-wrappers/SDSCheckboxGroupWrapper.d.ts +1 -0
- package/dist/react-wrappers/SDSCheckboxGroupWrapper.d.ts.map +1 -1
- package/dist/react-wrappers/SDSCheckboxGroupWrapper.js +1 -0
- package/dist/react-wrappers/SDSCheckboxGroupWrapper.js.map +1 -1
- package/dist/react-wrappers/SDSRadioGroupWrapper.d.ts +1 -0
- package/dist/react-wrappers/SDSRadioGroupWrapper.d.ts.map +1 -1
- package/dist/react-wrappers/SDSRadioGroupWrapper.js +1 -0
- package/dist/react-wrappers/SDSRadioGroupWrapper.js.map +1 -1
- package/dist/sds-alert/sds-alert.styles.d.ts.map +1 -1
- package/dist/sds-alert/sds-alert.styles.js +25 -3
- package/dist/sds-alert/sds-alert.styles.js.map +1 -1
- package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
- package/dist/sds-button/sds-button.styles.js +13 -1
- package/dist/sds-button/sds-button.styles.js.map +1 -1
- package/dist/sds-card/sds-card.d.ts +1 -1
- package/dist/sds-card/sds-card.d.ts.map +1 -1
- package/dist/sds-card/sds-card.js +5 -5
- package/dist/sds-card/sds-card.js.map +1 -1
- package/dist/sds-card/sds-card.styles.js +6 -6
- package/dist/sds-card/sds-card.styles.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.styles.js +17 -17
- package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.styles.js +2 -2
- package/dist/sds-checkbox-group/sds-checkbox-group.styles.js.map +1 -1
- package/dist/sds-chip/sds-chip.styles.js +19 -19
- package/dist/sds-chip/sds-chip.styles.js.map +1 -1
- package/dist/sds-radio/sds-radio.d.ts +17 -4
- package/dist/sds-radio/sds-radio.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.js +76 -21
- package/dist/sds-radio/sds-radio.js.map +1 -1
- package/dist/sds-radio/sds-radio.styles.js +27 -27
- package/dist/sds-radio/sds-radio.styles.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.d.ts +1 -0
- package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.js +14 -10
- package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.styles.js +2 -2
- package/dist/sds-radio-group/sds-radio-group.styles.js.map +1 -1
- package/dist/sds-switch/sds-switch.styles.js +3 -3
- package/dist/sds-switch/sds-switch.styles.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.styles.js +11 -11
- package/dist/sds-textarea/sds-textarea.styles.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.styles.js +7 -7
- package/dist/sds-textfield/sds-textfield.styles.js.map +1 -1
- package/dist/sheriff-web-components.js +218 -133
- package/package.json +2 -2
|
@@ -5,8 +5,6 @@ declare module 'react' {
|
|
|
5
5
|
namespace JSX {
|
|
6
6
|
interface SDSAlertElementProps extends Merge<React.HTMLAttributes<SDSAlert>, SDSAlertProps> {
|
|
7
7
|
}
|
|
8
|
-
interface SDSCheckboxGroupElementProps extends Merge<React.HTMLAttributes<SDSCheckboxGroup>, SDSCheckboxGroupProps> {
|
|
9
|
-
}
|
|
10
8
|
interface SDSHeadingElementProps extends Merge<React.HTMLAttributes<SDSHeading>, SDSHeadingProps> {
|
|
11
9
|
}
|
|
12
10
|
interface SDSIconElementProps extends Merge<React.HTMLAttributes<SDSIcon>, SDSIconProps> {
|
|
@@ -17,8 +15,6 @@ declare module 'react' {
|
|
|
17
15
|
}
|
|
18
16
|
interface SDSNotificationElementProps extends Merge<React.HTMLAttributes<SDSNotification>, SDSNotificationProps> {
|
|
19
17
|
}
|
|
20
|
-
interface SDSRadioGroupElementProps extends Merge<React.HTMLAttributes<SDSRadioGroup>, SDSRadioGroupProps> {
|
|
21
|
-
}
|
|
22
18
|
interface SDSTagElementProps extends Merge<React.HTMLAttributes<SDSTag>, SDSTagProps> {
|
|
23
19
|
}
|
|
24
20
|
interface SDSTextElementProps extends Merge<React.HTMLAttributes<SDSText>, SDSTextProps> {
|
|
@@ -27,10 +23,14 @@ declare module 'react' {
|
|
|
27
23
|
}
|
|
28
24
|
interface SDSCheckboxElementProps extends Merge<React.InputHTMLAttributes<SDSCheckbox>, SDSCheckboxProps> {
|
|
29
25
|
}
|
|
26
|
+
interface SDSCheckboxGroupElementProps extends Merge<React.InputHTMLAttributes<SDSCheckboxGroup>, SDSCheckboxGroupProps> {
|
|
27
|
+
}
|
|
30
28
|
interface SDSChipElementProps extends Merge<React.InputHTMLAttributes<SDSChip>, SDSChipProps> {
|
|
31
29
|
}
|
|
32
30
|
interface SDSRadioElementProps extends Merge<React.InputHTMLAttributes<SDSRadio>, SDSRadioProps> {
|
|
33
31
|
}
|
|
32
|
+
interface SDSRadioGroupElementProps extends Merge<React.InputHTMLAttributes<SDSRadioGroup>, SDSRadioGroupProps> {
|
|
33
|
+
}
|
|
34
34
|
interface SDSSwitchElementProps extends Merge<React.InputHTMLAttributes<SDSSwitch>, SDSSwitchProps> {
|
|
35
35
|
}
|
|
36
36
|
interface SDSTextFieldElementProps extends Merge<React.InputHTMLAttributes<SDSTextField>, SDSTextFieldProps> {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/frameworks/react.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACN,QAAQ,EACR,aAAa,EACb,SAAS,EACT,cAAc,EACd,OAAO,EACP,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,UAAU,EACV,eAAe,EACf,OAAO,EACP,YAAY,EACZ,SAAS,EACT,cAAc,EACd,eAAe,EACf,oBAAoB,EACpB,QAAQ,EACR,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,SAAS,EACT,cAAc,EACd,MAAM,EACN,WAAW,EACX,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,MAAM,IAAI,CAAC;AAEZ,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAExC,OAAO,QAAQ,OAAO,CAAC;IACtB,UAAU,GAAG,CAAC;QAEb,UAAU,oBAAqB,SAAQ,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC;SAAG;QAC9F,UAAU,
|
|
1
|
+
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/frameworks/react.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACN,QAAQ,EACR,aAAa,EACb,SAAS,EACT,cAAc,EACd,OAAO,EACP,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,OAAO,EACP,YAAY,EACZ,UAAU,EACV,eAAe,EACf,OAAO,EACP,YAAY,EACZ,SAAS,EACT,cAAc,EACd,eAAe,EACf,oBAAoB,EACpB,QAAQ,EACR,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,SAAS,EACT,cAAc,EACd,MAAM,EACN,WAAW,EACX,OAAO,EACP,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,MAAM,IAAI,CAAC;AAEZ,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AAExC,OAAO,QAAQ,OAAO,CAAC;IACtB,UAAU,GAAG,CAAC;QAEb,UAAU,oBAAqB,SAAQ,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC;SAAG;QAC9F,UAAU,sBAAuB,SAAQ,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,eAAe,CAAC;SAAG;QACpG,UAAU,mBAAoB,SAAQ,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;SAAG;QAC3F,UAAU,qBAAsB,SAAQ,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,cAAc,CAAC;SAAG;QACjG,UAAU,mBAAoB,SAAQ,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;SAAG;QAC3F,UAAU,2BAA4B,SAAQ,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,oBAAoB,CAAC;SAAG;QACnH,UAAU,kBAAmB,SAAQ,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;SAAG;QACxF,UAAU,mBAAoB,SAAQ,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;SAAG;QAG3F,UAAU,qBAAsB,SAAQ,KAAK,CAAC,KAAK,CAAC,oBAAoB,CAAC,SAAS,CAAC,EAAE,cAAc,CAAC;SAAG;QAGvG,UAAU,uBAAwB,SAAQ,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,EAAE,gBAAgB,CAAC;SAAG;QAC5G,UAAU,4BAA6B,SAAQ,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;SAAG;QAC3H,UAAU,mBAAoB,SAAQ,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;SAAG;QAChG,UAAU,oBAAqB,SAAQ,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC;SAAG;QACnG,UAAU,yBAA0B,SAAQ,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,aAAa,CAAC,EAAE,kBAAkB,CAAC;SAAG;QAClH,UAAU,qBAAsB,SAAQ,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,SAAS,CAAC,EAAE,cAAc,CAAC;SAAG;QACtG,UAAU,wBAAyB,SAAQ,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,YAAY,CAAC,EAAE,iBAAiB,CAAC;SAAG;QAG/G,UAAU,uBAAwB,SAAQ,KAAK,CAAC,KAAK,CAAC,sBAAsB,CAAC,WAAW,CAAC,EAAE,gBAAgB,CAAC;SAAG;QAE/G,UAAU,iBAAiB;YAC1B,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;YACrE,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC;YACxE,oBAAoB,EAAE,KAAK,CAAC,iBAAiB,CAAC,4BAA4B,EAAE,gBAAgB,CAAC,CAAC;YAC9F,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,EAAE,WAAW,CAAC,CAAC;YAC9E,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC;YAClE,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,EAAE,UAAU,CAAC,CAAC;YAC3E,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC;YAClE,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC;YACxE,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC;YAClE,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,2BAA2B,EAAE,eAAe,CAAC,CAAC;YAC1F,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,yBAAyB,EAAE,aAAa,CAAC,CAAC;YACrF,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;YACrE,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC;YACxE,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;YAC/D,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,EAAE,OAAO,CAAC,CAAC;YAClE,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,EAAE,WAAW,CAAC,CAAC;YAC9E,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,wBAAwB,EAAE,YAAY,CAAC,CAAC;SACjF;KACD;CACD"}
|
|
@@ -2,5 +2,6 @@ import { SDSCheckboxGroup } from '../sds-checkbox-group/sds-checkbox-group';
|
|
|
2
2
|
import { SheriffEventName } from '../types';
|
|
3
3
|
export declare const SDSCheckboxGroupWrapper: import("@lit/react").ReactWebComponent<SDSCheckboxGroup, {
|
|
4
4
|
onUpdate: SheriffEventName;
|
|
5
|
+
onChange: SheriffEventName;
|
|
5
6
|
}>;
|
|
6
7
|
//# sourceMappingURL=SDSCheckboxGroupWrapper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SDSCheckboxGroupWrapper.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/SDSCheckboxGroupWrapper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,eAAO,MAAM,uBAAuB;cAKR,gBAAgB;
|
|
1
|
+
{"version":3,"file":"SDSCheckboxGroupWrapper.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/SDSCheckboxGroupWrapper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,eAAO,MAAM,uBAAuB;cAKR,gBAAgB;cACpB,gBAAgB;EAEtC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SDSCheckboxGroupWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSCheckboxGroupWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAG5E,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC;IACtD,OAAO,EAAE,oBAAoB;IAC7B,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,YAAgC;
|
|
1
|
+
{"version":3,"file":"SDSCheckboxGroupWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSCheckboxGroupWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAG5E,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC;IACtD,OAAO,EAAE,oBAAoB;IAC7B,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,YAAgC;QAC1C,QAAQ,EAAE,QAA4B;KACtC;CACD,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit/react';\nimport React from 'react';\nimport { SDSCheckboxGroup } from '../sds-checkbox-group/sds-checkbox-group';\nimport { SheriffEventName } from '../types';\n\nexport const SDSCheckboxGroupWrapper = createComponent({\n\ttagName: 'sds-checkbox-group',\n\telementClass: SDSCheckboxGroup,\n\treact: React,\n\tevents: {\n\t\tonUpdate: 'sds-update' as SheriffEventName,\n\t\tonChange: 'change' as SheriffEventName,\n\t},\n});\n"]}
|
|
@@ -2,5 +2,6 @@ import { SDSRadioGroup } from '../sds-radio-group/sds-radio-group';
|
|
|
2
2
|
import { SheriffEventName } from '../types';
|
|
3
3
|
export declare const SDSRadioGroupWrapper: import("@lit/react").ReactWebComponent<SDSRadioGroup, {
|
|
4
4
|
onUpdate: SheriffEventName;
|
|
5
|
+
onChange: SheriffEventName;
|
|
5
6
|
}>;
|
|
6
7
|
//# sourceMappingURL=SDSRadioGroupWrapper.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SDSRadioGroupWrapper.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/SDSRadioGroupWrapper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,eAAO,MAAM,oBAAoB;cAKL,gBAAgB;
|
|
1
|
+
{"version":3,"file":"SDSRadioGroupWrapper.d.ts","sourceRoot":"","sources":["../../src/react-wrappers/SDSRadioGroupWrapper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C,eAAO,MAAM,oBAAoB;cAKL,gBAAgB;cACpB,gBAAgB;EAEtC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SDSRadioGroupWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSRadioGroupWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGnE,MAAM,CAAC,MAAM,oBAAoB,GAAG,eAAe,CAAC;IACnD,OAAO,EAAE,iBAAiB;IAC1B,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,YAAgC;
|
|
1
|
+
{"version":3,"file":"SDSRadioGroupWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSRadioGroupWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AAGnE,MAAM,CAAC,MAAM,oBAAoB,GAAG,eAAe,CAAC;IACnD,OAAO,EAAE,iBAAiB;IAC1B,YAAY,EAAE,aAAa;IAC3B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,YAAgC;QAC1C,QAAQ,EAAE,QAA4B;KACtC;CACD,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit/react';\nimport React from 'react';\nimport { SDSRadioGroup } from '../sds-radio-group/sds-radio-group';\nimport { SheriffEventName } from '../types';\n\nexport const SDSRadioGroupWrapper = createComponent({\n\ttagName: 'sds-radio-group',\n\telementClass: SDSRadioGroup,\n\treact: React,\n\tevents: {\n\t\tonUpdate: 'sds-update' as SheriffEventName,\n\t\tonChange: 'change' as SheriffEventName,\n\t},\n});\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-alert.styles.d.ts","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-alert.styles.d.ts","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4KlB,CAAC"}
|
|
@@ -22,6 +22,7 @@ export const styles = css `
|
|
|
22
22
|
--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-components-line-height-tall-title-md));
|
|
23
23
|
|
|
24
24
|
--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-info-text-subtle));
|
|
25
|
+
--_sds-alert-icon-color-background: var(--sds-alert-icon-color-background, var(--sds-color-action-contrast-default, white));
|
|
25
26
|
--_sds-alert-max-line-width: var(--sds-alert-max-line-width, var(--sds-typography-max-line-width));
|
|
26
27
|
--_sds-alert-padding: var(--sds-alert-padding, var(--sds-spacing-sm));
|
|
27
28
|
|
|
@@ -77,7 +78,6 @@ export const styles = css `
|
|
|
77
78
|
display: flex;
|
|
78
79
|
flex: 1;
|
|
79
80
|
flex-direction: column;
|
|
80
|
-
gap: var(--_sds-alert-content-gap);
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
.sds-alert__actions {
|
|
@@ -102,8 +102,30 @@ export const styles = css `
|
|
|
102
102
|
--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-md));
|
|
103
103
|
--_sds-alert-font-weight: var(--sds-alert-font-weight, var(--sds-typography-body-md-tall-desktop-font-weight));
|
|
104
104
|
|
|
105
|
-
|
|
106
|
-
|
|
105
|
+
position: relative;
|
|
106
|
+
|
|
107
|
+
&::after {
|
|
108
|
+
content: '';
|
|
109
|
+
position: absolute;
|
|
110
|
+
top: 8px;
|
|
111
|
+
left: 9px;
|
|
112
|
+
width: 16px;
|
|
113
|
+
height: 16px;
|
|
114
|
+
background-color: var(--_sds-alert-icon-color-background);
|
|
115
|
+
z-index: 0;
|
|
116
|
+
clip-path: circle(50%);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
:host([variant='secondary']):host([data-palette='attention']) {
|
|
121
|
+
--sds-icon-color: var(--sds-alert-icon-color, var(--sds-color-action-default));
|
|
122
|
+
|
|
123
|
+
&::after {
|
|
124
|
+
top: 9px;
|
|
125
|
+
left: 7px;
|
|
126
|
+
width: 20px;
|
|
127
|
+
height: 16px;
|
|
128
|
+
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
|
107
129
|
}
|
|
108
130
|
}
|
|
109
131
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-alert.styles.js","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-alert.styles.js","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4KxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-info-surface-tinted));\n\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-info-border-default));\n\t\t--_sds-alert-border-radius: var(--sds-alert-border-radius, var(--sds-radius-sm));\n\t\t--_sds-alert-border-width: var(--sds-alert-border-width, var(--sds-border-sm));\n\n\t\t--_sds-alert-column-gap: var(--sds-alert-column-gap, var(--sds-spacing-2xs));\n\t\t--_sds-alert-content-gap: var(--sds-alert-content-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-alert-font-family: var(--sds-alert-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-info-text-default));\n\n\t\t--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-alert-font-weight: var(--sds-alert-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-md));\n\n\t\t--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-components-font-size-title-md));\n\t\t--_sds-alert-title-font-weight: var(--sds-alert-title-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-components-line-height-tall-title-md));\n\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-info-text-subtle));\n\t\t--_sds-alert-icon-color-background: var(--sds-alert-icon-color-background, var(--sds-color-action-contrast-default, white));\n\t\t--_sds-alert-max-line-width: var(--sds-alert-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-alert-padding: var(--sds-alert-padding, var(--sds-spacing-sm));\n\n\t\tdisplay: block;\n\t}\n\n\t.sds-alert {\n\t\tdisplay: flex;\n\t\tgap: var(--_sds-alert-column-gap);\n\t\tpadding: var(--_sds-alert-padding);\n\t\tbackground-color: var(--_sds-alert-background-color);\n\t\tborder: var(--_sds-alert-border-width) solid var(--_sds-alert-border-color);\n\t\tborder-radius: var(--_sds-alert-border-radius);\n\t\tcolor: var(--_sds-alert-text-color);\n\t\tfont-family: var(--_sds-alert-font-family);\n\t\ttext-align: left;\n\t}\n\n\t:host([data-palette='success']) {\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-success-text-subtle));\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-success-border-default));\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-success-surface-tinted));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-success-text-default));\n\t}\n\n\t:host([data-palette='danger']) {\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-danger-text-subtle));\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-danger-border-default));\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-danger-surface-tinted));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t:host([data-palette='attention']) {\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-attention-text-subtle));\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-attention-border-default));\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-attention-surface-tinted));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-attention-text-default));\n\t}\n\n\t:host([data-palette='warning']) {\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-warning-text-subtle));\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-warning-border-default));\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-warning-surface-tinted));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-warning-text-default));\n\t}\n\n\t.sds-alert__type {\n\t\tcolor: var(--_sds-alert-icon-color);\n\t}\n\n\t.sds-alert__content {\n\t\talign-self: center;\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\tflex-direction: column;\n\t}\n\n\t.sds-alert__actions {\n\t\t--sds-button-padding-inline: 0;\n\t\t--sds-button-text-color: var(--sds-color-action-default);\n\t}\n\n\t.sds-alert__icon {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n\n\t:host([variant='secondary']) {\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, transparent);\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, transparent);\n\n\t\t--_sds-alert-padding: var(--sds-alert-padding, var(--sds-spacing-4xs));\n\t\t--_sds-alert-column-gap: var(--sds-alert-column-gap, var(--sds-spacing-3xs));\n\t\t--_sds-alert-content-gap: var(--sds-alert-content-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-alert-font-weight: var(--sds-alert-font-weight, var(--sds-typography-body-md-tall-desktop-font-weight));\n\n\t\tposition: relative;\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\ttop: 8px;\n\t\t\tleft: 9px;\n\t\t\twidth: 16px;\n\t\t\theight: 16px;\n\t\t\tbackground-color: var(--_sds-alert-icon-color-background);\n\t\t\tz-index: 0;\n\t\t\tclip-path: circle(50%);\n\t\t}\n\t}\n\n\t:host([variant='secondary']):host([data-palette='attention']) {\n\t\t--sds-icon-color: var(--sds-alert-icon-color, var(--sds-color-action-default));\n\n\t\t&::after {\n\t\t\ttop: 9px;\n\t\t\tleft: 7px;\n\t\t\twidth: 20px;\n\t\t\theight: 16px;\n\t\t\tclip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n\t\t}\n\t}\n\n\t:host([variant='secondary']):host([size='sm']) {\n\t\t--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-components-font-size-title-sm));\n\t\t--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-components-line-height-tall-title-sm));\n\t}\n\n\t:host([variant='secondary']):host([size='md']) {\n\t\t--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-components-font-size-title-md));\n\t\t--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-components-line-height-tall-title-md));\n\t}\n\n\t:host([variant='secondary']):host([size='lg']) {\n\t\t--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-components-font-size-title-lg));\n\t\t--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-components-line-height-tall-title-lg));\n\t}\n\n\t::slotted([slot='title']),\n\t::slotted(:is(h1, h2, h3, h4, h5, h6)) {\n\t\tcolor: var(--_sds-alert-text-color) !important;\n\t\tfont-size: var(--_sds-alert-title-font-size) !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: var(--_sds-alert-title-font-weight) !important;\n\t\tline-height: var(--_sds-alert-title-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--_sds-alert-max-line-width) !important;\n\t}\n\n\t::slotted([slot='message']),\n\t::slotted(:is(p)) {\n\t\tcolor: var(--_sds-alert-text-color) !important;\n\t\tfont-size: var(--_sds-alert-font-size) !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: var(--_sds-alert-font-weight) !important;\n\t\tline-height: var(--_sds-alert-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--_sds-alert-max-line-width) !important;\n\t}\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA2JlB,CAAC"}
|
|
@@ -88,7 +88,7 @@ export const styles = css `
|
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
.sds-button:active {
|
|
91
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-
|
|
91
|
+
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
|
|
@@ -115,6 +115,18 @@ export const styles = css `
|
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
+
:host([variant='tertiary']):host([icon]) {
|
|
119
|
+
.sds-button:hover {
|
|
120
|
+
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
|
|
121
|
+
--_sds-button-border-color: var(--sds-button-border-color, transparent);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.sds-button:active {
|
|
125
|
+
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));
|
|
126
|
+
--_sds-button-border-color: var(--sds-button-border-color, transparent);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
118
130
|
:host([size='medium']), /* Deprecated */
|
|
119
131
|
:host([size='md']) {
|
|
120
132
|
--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-md));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2JxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-border-width: var(--sds-button-border-width, var(--sds-border-md));\n\t\t--_sds-button-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-button-focus-color: var(--sds-button-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-button-focus-inner-color: var(--sds-button-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-button-focus-spacing: var(--sds-button-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-button-font-family: var(--sds-button-font, var(--sds-typography-font-family-roboto));\n\t\t--_sds-button-font-size: var(--sds-button-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));\n\t\t--_sds-button-gap: var(--sds-button-gap, var(--sds-spacing-3xs));\n\t\t--_sds-button-line-height: var(--sds-button-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-lg));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-button-radius: var(--sds-button-radius, var(--sds-radius-sm));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\n\t\t--_sds-button-tertiary-text-decoration: var(--sds-typography-link-text-decoration, underline);\n\t\t--_sds-button-tertiary-text-underline-offset: var(--sds-typography-link-text-underline-offset, 4px);\n\t\t--_sds-button-tertiary-text-underline-thickness: 2px;\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\n\t\t::slotted(sds-icon) {\n\t\t\t--sds-icon-color: var(--_sds-button-text-color);\n\t\t}\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tbackground-color: var(--_sds-button-background-color);\n\t\tborder-radius: var(--_sds-button-radius);\n\t\tborder: var(--_sds-button-border-width) solid var(--_sds-button-border-color);\n\t\tcolor: var(--_sds-button-text-color);\n\t\tcursor: pointer;\n\t\tdisplay: inline-flex;\n\t\tfont-family: var(--_sds-button-font-family);\n\t\tfont-size: var(--_sds-button-font-size);\n\t\tfont-weight: var(--_sds-button-font-weight);\n\t\tgap: var(--_sds-button-gap);\n\t\tinline-size: 100%;\n\t\tjustify-content: center;\n\t\tline-height: var(--_sds-button-line-height);\n\t\tmin-height: var(--_sds-button-min-height);\n\t\tpadding: var(--_sds-button-padding-block) var(--_sds-button-padding-inline);\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-button-focus-inner-color);\n\t\t\toutline: 3px solid var(--_sds-button-focus-color);\n\t\t\toutline-offset: 3px;\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&:disabled {\n\t\t\topacity: var(--_sds-button-disabled-opacity);\n\t\t\tcursor: not-allowed;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-button--as-link {\n\t\tinline-size: auto;\n\t\ttext-decoration: none;\n\t}\n\n\t:host([variant='secondary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t}\n\t}\n\n\t:host([variant='tertiary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\n\t\t\ttext-decoration: var(--_sds-button-tertiary-text-decoration);\n\t\t\ttext-decoration-thickness: var(--_sds-button-tertiary-text-underline-thickness);\n\t\t\ttext-underline-offset: var(--_sds-button-tertiary-text-underline-offset);\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\t}\n\n\t:host([variant='tertiary']):host([icon]) {\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t}\n\t}\n\n\t:host([size='medium']), /* Deprecated */\n\t:host([size='md']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-md));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, var(--sds-spacing-4xs));\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\n\t\t&:host([variant='tertiary']) {\n\t\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\t}\n\t}\n\n\t:host([size='small']), /* Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-sm));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\t\tfont-size: 0.875rem;\n\n\t\t&:host([variant='tertiary']) {\n\t\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\t}\n\t}\n\n\t:host([icon]) {\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\tmin-width: var(--_sds-button-min-height);\n\t}\n`;\n"]}
|
|
@@ -6,7 +6,7 @@ export declare class SDSCard extends LitElement {
|
|
|
6
6
|
static styles: import("lit").CSSResult[];
|
|
7
7
|
link: SDSCardProps['link'];
|
|
8
8
|
private headingSlot;
|
|
9
|
-
private
|
|
9
|
+
private textSlot;
|
|
10
10
|
protected firstUpdated(): void;
|
|
11
11
|
render(): import("lit-html").TemplateResult<1>;
|
|
12
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-card.d.ts","sourceRoot":"","sources":["../../src/sds-card/sds-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,MAAM,WAAW,YAAY;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAGS,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAG/C,OAAO,CAAC,WAAW,CAAmB;
|
|
1
|
+
{"version":3,"file":"sds-card.d.ts","sourceRoot":"","sources":["../../src/sds-card/sds-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,MAAM,WAAW,YAAY;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAGS,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAG/C,OAAO,CAAC,WAAW,CAAmB;IACzC,OAAO,CAAC,QAAQ,CAAmB;cAEpC,YAAY,IAAI,IAAI;IAsB9B,MAAM;CASf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
|
|
@@ -13,13 +13,13 @@ let SDSCard = class SDSCard extends LitElement {
|
|
|
13
13
|
firstUpdated() {
|
|
14
14
|
const contentWarning = '[sds-card] text slot should only contain top-level <p> elements with no nested elements:';
|
|
15
15
|
const headerWarning = '[sds-card] header slot should only contain one of <h2>–<h6> elements:';
|
|
16
|
-
validateSlotContent(this.
|
|
16
|
+
validateSlotContent(this.textSlot, ['P'], false, contentWarning);
|
|
17
17
|
const headerNodes = this.headingSlot.assignedNodes({ flatten: true });
|
|
18
18
|
if (headerNodes.length > 0) {
|
|
19
19
|
validateSlotContent(this.headingSlot, ['H2', 'H3', 'H4', 'H5', 'H6'], false, headerWarning);
|
|
20
20
|
}
|
|
21
|
-
this.
|
|
22
|
-
validateSlotContent(this.
|
|
21
|
+
this.textSlot.addEventListener('slotchange', () => {
|
|
22
|
+
validateSlotContent(this.textSlot, ['P'], false, contentWarning);
|
|
23
23
|
});
|
|
24
24
|
this.headingSlot.addEventListener('slotchange', () => {
|
|
25
25
|
const nodes = this.headingSlot.assignedNodes({ flatten: true });
|
|
@@ -46,8 +46,8 @@ __decorate([
|
|
|
46
46
|
query('slot#heading')
|
|
47
47
|
], SDSCard.prototype, "headingSlot", void 0);
|
|
48
48
|
__decorate([
|
|
49
|
-
query('slot#
|
|
50
|
-
], SDSCard.prototype, "
|
|
49
|
+
query('slot#text')
|
|
50
|
+
], SDSCard.prototype, "textSlot", void 0);
|
|
51
51
|
SDSCard = __decorate([
|
|
52
52
|
guardedCustomElement('sds-card')
|
|
53
53
|
], SDSCard);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-card.js","sourceRoot":"","sources":["../../src/sds-card/sds-card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAOpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAWnB,YAAY;QAC9B,MAAM,cAAc,GAAG,0FAA0F,CAAC;QAClH,MAAM,aAAa,GAAG,uEAAuE,CAAC;QAE9F,mBAAmB,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"sds-card.js","sourceRoot":"","sources":["../../src/sds-card/sds-card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAOpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAWnB,YAAY;QAC9B,MAAM,cAAc,GAAG,0FAA0F,CAAC;QAClH,MAAM,aAAa,GAAG,uEAAuE,CAAC;QAE9F,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC;QACjE,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACtE,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC5B,mBAAmB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC;QAC7F,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;YACjD,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC;QAClE,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;YACpD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YAChE,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACtB,mBAAmB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC;YAC7F,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IAEQ,MAAM;QACd,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;GAIpB,CAAC;QAEF,OAAO,IAAI,CAAA,6BAA6B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,YAAY,IAAI,CAAC,IAAI,+BAA+B,QAAQ,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,QAAQ,QAAQ,YAAY,CAAC;IACjM,CAAC;;AAxCD,UAAU;AACM,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA4B;AAGvC;IAA9B,KAAK,CAAC,cAAc,CAAC;4CAAuC;AACjC;IAA3B,KAAK,CAAC,WAAW,CAAC;yCAAoC;AAT3C,OAAO;IADnB,oBAAoB,CAAC,UAAU,CAAC;GACpB,OAAO,CA0CnB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { validateSlotContent } from '../utils/slot-validator';\nimport { styles } from './sds-card.styles';\n\nexport interface SDSCardProps {\n\tlink?: string;\n}\n\n@guardedCustomElement('sds-card')\nexport class SDSCard extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) link: SDSCardProps['link'];\n\n\t// Slots\n\t@query('slot#heading') private headingSlot!: HTMLSlotElement;\n\t@query('slot#text') private textSlot!: HTMLSlotElement;\n\n\tprotected override firstUpdated(): void {\n\t\tconst contentWarning = '[sds-card] text slot should only contain top-level <p> elements with no nested elements:';\n\t\tconst headerWarning = '[sds-card] header slot should only contain one of <h2>–<h6> elements:';\n\n\t\tvalidateSlotContent(this.textSlot, ['P'], false, contentWarning);\n\t\tconst headerNodes = this.headingSlot.assignedNodes({ flatten: true });\n\t\tif (headerNodes.length > 0) {\n\t\t\tvalidateSlotContent(this.headingSlot, ['H2', 'H3', 'H4', 'H5', 'H6'], false, headerWarning);\n\t\t}\n\n\t\tthis.textSlot.addEventListener('slotchange', () => {\n\t\t\tvalidateSlotContent(this.textSlot, ['P'], false, contentWarning);\n\t\t});\n\n\t\tthis.headingSlot.addEventListener('slotchange', () => {\n\t\t\tconst nodes = this.headingSlot.assignedNodes({ flatten: true });\n\t\t\tif (nodes.length > 0) {\n\t\t\t\tvalidateSlotContent(this.headingSlot, ['H2', 'H3', 'H4', 'H5', 'H6'], false, headerWarning);\n\t\t\t}\n\t\t});\n\t}\n\n\toverride render() {\n\t\tconst cardBody = html`\n\t\t\t<slot name=\"heading\" id=\"heading\"></slot>\n\t\t\t<slot name=\"text\" id=\"content\"></slot>\n\t\t\t<sds-icon name=\"arrow_forward-material-outlined\" size=\"md\" class=\"sds-card__icon\"></sds-icon>\n\t\t`;\n\n\t\treturn html`<article class=\"sds-card\">${this.link ? html`<a href=\"${this.link}\" class=\"sds-card__content\">${cardBody}</a>` : html`<div class=\"sds-card__content\">${cardBody}</div>`}</article>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-card': SDSCard;\n\t}\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `
|
|
3
3
|
:host {
|
|
4
|
-
--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-tinted));
|
|
4
|
+
--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));
|
|
5
5
|
--_sds-card-border-radius: var(--sds-card-border-radius, var(--sds-radius-md));
|
|
6
6
|
--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-xs));
|
|
7
7
|
--_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-3xs));
|
|
@@ -9,14 +9,14 @@ export const styles = css `
|
|
|
9
9
|
--_sds-card-focus-color: var(--sds-card-focus-color, var(--sds-color-states-focus-outer));
|
|
10
10
|
--_sds-card-focus-inner-color: var(--sds-card-focus-inner-color, var(--sds-color-states-focus-inner));
|
|
11
11
|
--_sds-card-focus-spacing: var(--sds-card-focus-spacing, var(--sds-color-states-focus-spacing));
|
|
12
|
-
--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-main-action-default));
|
|
12
|
+
--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
13
13
|
|
|
14
|
-
--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-main-text-default));
|
|
14
|
+
--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
|
|
15
15
|
--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));
|
|
16
16
|
--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-mobile-font-weight));
|
|
17
17
|
--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));
|
|
18
18
|
|
|
19
|
-
--_sds-card-text-color: var(--sds-card-text-color, var(--sds-color-neutral-text-default));
|
|
19
|
+
--_sds-card-text-color: var(--sds-card-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
|
|
20
20
|
--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-mobile-font-size));
|
|
21
21
|
--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));
|
|
22
22
|
--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-mobile-line-height));
|
|
@@ -42,11 +42,11 @@ export const styles = css `
|
|
|
42
42
|
flex: 1;
|
|
43
43
|
|
|
44
44
|
&:hover {
|
|
45
|
-
--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-hover));
|
|
45
|
+
--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
&:active {
|
|
49
|
-
--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-active));
|
|
49
|
+
--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
&:focus-visible {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-card.styles.js","sourceRoot":"","sources":["../../src/sds-card/sds-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-tinted));\n\t\t--_sds-card-border-radius: var(--sds-card-border-radius, var(--sds-radius-md));\n\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-xs));\n\t\t--_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-3xs));\n\t\t--_sds-card-font-family: var(--sds-card-font-family, var(--sds-typography-font-family));\n\t\t--_sds-card-focus-color: var(--sds-card-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-card-focus-inner-color: var(--sds-card-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-card-focus-spacing: var(--sds-card-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-main-action-default));\n\n\t\t--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-main-text-default));\n\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));\n\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-mobile-font-weight));\n\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));\n\n\t\t--_sds-card-text-color: var(--sds-card-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\n\t\tdisplay: flex;\n\t}\n\n\t.sds-card {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t}\n\n\t.sds-card__content {\n\t\tbackground-color: var(--_sds-card-background-color);\n\t\tborder-radius: var(--_sds-card-border-radius);\n\t\tfont-family: var(--_sds-card-font-family);\n\t\tpadding: var(--_sds-card-padding);\n\t\tgap: var(--_sds-card-gap);\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\ttext-decoration: none;\n\t\talign-items: center;\n\t\tflex: 1;\n\n\t\t&:hover {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-hover));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-active));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-card-focus-inner-color);\n\t\t\toutline: var(--_sds-card-focus-spacing) solid var(--_sds-card-focus-color);\n\t\t\toutline-offset: var(--_sds-card-focus-spacing);\n\t\t}\n\t}\n\n\t.sds-card__icon {\n\t\tcolor: var(--_sds-card-icon-color);\n\t\tmargin-inline-start: auto;\n\t}\n\n\t::slotted(p) {\n\t\tcolor: var(--_sds-card-text-color) !important;\n\t\tdisplay: none !important;\n\t\tfont-size: var(--_sds-card-text-font-size) !important;\n\t\tline-height: var(--_sds-card-text-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t::slotted(h2),\n\t::slotted(h3),\n\t::slotted(h4),\n\t::slotted(h5),\n\t::slotted(h6) {\n\t\tcolor: var(--_sds-card-heading-color) !important;\n\t\tfont-size: var(--_sds-card-heading-font-size) !important;\n\t\tfont-weight: var(--_sds-card-heading-font-weight) !important;\n\t\tline-height: var(--_sds-card-heading-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t@media (min-width: 640px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-tablet-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-tablet-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-tablet-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-tablet-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-tablet-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-tablet-line-height));\n\t\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-sm));\n\t\t}\n\n\t\t.sds-card__content {\n\t\t\tflex-direction: column;\n\t\t\talign-items: start;\n\t\t}\n\n\t\t.sds-card__icon {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t::slotted(p) {\n\t\t\tdisplay: block !important;\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-desktop-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-desktop-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-desktop-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"sds-card.styles.js","sourceRoot":"","sources":["../../src/sds-card/sds-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t--_sds-card-border-radius: var(--sds-card-border-radius, var(--sds-radius-md));\n\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-xs));\n\t\t--_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-3xs));\n\t\t--_sds-card-font-family: var(--sds-card-font-family, var(--sds-typography-font-family));\n\t\t--_sds-card-focus-color: var(--sds-card-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-card-focus-inner-color: var(--sds-card-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-card-focus-spacing: var(--sds-card-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));\n\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-mobile-font-weight));\n\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));\n\n\t\t--_sds-card-text-color: var(--sds-card-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\n\t\tdisplay: flex;\n\t}\n\n\t.sds-card {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t}\n\n\t.sds-card__content {\n\t\tbackground-color: var(--_sds-card-background-color);\n\t\tborder-radius: var(--_sds-card-border-radius);\n\t\tfont-family: var(--_sds-card-font-family);\n\t\tpadding: var(--_sds-card-padding);\n\t\tgap: var(--_sds-card-gap);\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\ttext-decoration: none;\n\t\talign-items: center;\n\t\tflex: 1;\n\n\t\t&:hover {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-card-focus-inner-color);\n\t\t\toutline: var(--_sds-card-focus-spacing) solid var(--_sds-card-focus-color);\n\t\t\toutline-offset: var(--_sds-card-focus-spacing);\n\t\t}\n\t}\n\n\t.sds-card__icon {\n\t\tcolor: var(--_sds-card-icon-color);\n\t\tmargin-inline-start: auto;\n\t}\n\n\t::slotted(p) {\n\t\tcolor: var(--_sds-card-text-color) !important;\n\t\tdisplay: none !important;\n\t\tfont-size: var(--_sds-card-text-font-size) !important;\n\t\tline-height: var(--_sds-card-text-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t::slotted(h2),\n\t::slotted(h3),\n\t::slotted(h4),\n\t::slotted(h5),\n\t::slotted(h6) {\n\t\tcolor: var(--_sds-card-heading-color) !important;\n\t\tfont-size: var(--_sds-card-heading-font-size) !important;\n\t\tfont-weight: var(--_sds-card-heading-font-weight) !important;\n\t\tline-height: var(--_sds-card-heading-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t@media (min-width: 640px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-tablet-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-tablet-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-tablet-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-tablet-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-tablet-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-tablet-line-height));\n\t\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-sm));\n\t\t}\n\n\t\t.sds-card__content {\n\t\t\tflex-direction: column;\n\t\t\talign-items: start;\n\t\t}\n\n\t\t.sds-card__icon {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t::slotted(p) {\n\t\t\tdisplay: block !important;\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-desktop-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-desktop-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-desktop-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}
|
|
@@ -8,10 +8,10 @@ export const styles = css `
|
|
|
8
8
|
--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));
|
|
9
9
|
--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));
|
|
10
10
|
--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));
|
|
11
|
-
--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-neutral-text-default));
|
|
11
|
+
--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-text-default, var(--sds-color-neutral-text-default)));
|
|
12
12
|
|
|
13
|
-
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-default));
|
|
14
|
-
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-default));
|
|
13
|
+
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
|
|
14
|
+
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));
|
|
15
15
|
--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));
|
|
16
16
|
--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));
|
|
17
17
|
--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);
|
|
@@ -19,7 +19,7 @@ export const styles = css `
|
|
|
19
19
|
--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);
|
|
20
20
|
--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));
|
|
21
21
|
|
|
22
|
-
--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-neutral-text-subtle));
|
|
22
|
+
--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
|
|
23
23
|
--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-md));
|
|
24
24
|
--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
|
|
25
25
|
--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));
|
|
@@ -88,8 +88,8 @@ export const styles = css `
|
|
|
88
88
|
margin: 0;
|
|
89
89
|
|
|
90
90
|
&[readonly] {
|
|
91
|
-
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));
|
|
92
|
-
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));
|
|
91
|
+
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
|
|
92
|
+
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));
|
|
93
93
|
cursor: default;
|
|
94
94
|
pointer-events: none;
|
|
95
95
|
|
|
@@ -100,8 +100,8 @@ export const styles = css `
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
&[checked] {
|
|
103
|
-
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-default));
|
|
104
|
-
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-default));
|
|
103
|
+
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
104
|
+
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
105
105
|
|
|
106
106
|
&::after {
|
|
107
107
|
content: '';
|
|
@@ -117,30 +117,30 @@ export const styles = css `
|
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
&[readonly] {
|
|
120
|
-
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));
|
|
121
|
-
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));
|
|
122
|
-
--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-neutral-action-default));
|
|
120
|
+
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
|
|
121
|
+
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));
|
|
122
|
+
--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-action-default, var(--sds-color-neutral-action-default)));
|
|
123
123
|
cursor: default;
|
|
124
124
|
pointer-events: none;
|
|
125
125
|
}
|
|
126
126
|
}
|
|
127
127
|
|
|
128
128
|
&:hover {
|
|
129
|
-
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));
|
|
129
|
+
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
&:active:not([readonly]) {
|
|
133
|
-
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));
|
|
133
|
+
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active, var(--sds-color-main-action-active)));
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
&[checked]:hover {
|
|
137
|
-
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-hover));
|
|
138
|
-
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));
|
|
137
|
+
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
|
|
138
|
+
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
&[checked]:active:not([readonly]) {
|
|
142
|
-
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-active));
|
|
143
|
-
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));
|
|
142
|
+
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
|
|
143
|
+
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
&:focus-visible {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyNxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-block-gap: var(--sds-checkbox-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-checkbox-inline-gap: var(--sds-checkbox-inline-gap, var(--sds-spacing-3xs));\n\t\t--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));\n\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-default));\n\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));\n\t\t--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));\n\t\t--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-icon-md));\n\t\t--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);\n\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));\n\n\t\t--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-checkbox-focus-color-outer: var(--sds-checkbox-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-checkbox-focus-color-inner: var(--sds-checkbox-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-checkbox-focus-spacing: var(--sds-checkbox-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-checkbox-focus-radius: var(--sds-checkbox-focus-radius, var(--sds-radius-xs));\n\n\t\t--_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox {\n\t\talign-items: start;\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-checkbox-font-family);\n\t\tgap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);\n\t\tgrid-template-areas: 'input content';\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-checkbox-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: var(--_sds-checkbox-focus-spacing) solid var(--_sds-checkbox-focus-color-outer);\n\t\t\toutline-offset: calc(var(--_sds-checkbox-focus-spacing) * 2);\n\t\t\tborder-radius: var(--_sds-checkbox-focus-radius);\n\t\t}\n\t}\n\n\t.sds-checkbox--error {\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t.sds-checkbox__label {\n\t\tgrid-column: content;\n\t\talign-self: center;\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-checkbox-label-text-color);\n\t\tdisplay: inline-flex;\n\t\tfont-size: var(--_sds-checkbox-label-font-size);\n\t\tfont-weight: var(--_sds-checkbox-label-font-weight);\n\t\tgap: var(--_sds-checkbox-inline-gap);\n\t\tline-height: var(--_sds-checkbox-label-line-height);\n\t}\n\n\t.sds-checkbox__input {\n\t\tgrid-column: input;\n\t\tgrid-row: 1;\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-checkbox-input-background-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-checkbox-input-size);\n\t\theight: var(--_sds-checkbox-input-size);\n\t\taspect-ratio: var(--_sds-checkbox-input-aspect-ratio);\n\t\tborder-width: var(--_sds-checkbox-input-border-width);\n\t\tborder-style: var(--_sds-checkbox-input-border-style);\n\t\tborder-color: var(--_sds-checkbox-input-border-color);\n\t\tborder-radius: var(--_sds-checkbox-input-border-radius);\n\t\tmargin: 0;\n\n\t\t&[readonly] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-checkbox__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-default));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-default));\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: var(--_sds-checkbox-input-size);\n\t\t\t\theight: var(--_sds-checkbox-input-size);\n\t\t\t\tbackground-color: var(--_sds-checkbox-input-icon-color);\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'M17.7929 6.79302C18.1834 6.40249 18.8164 6.40249 19.2069 6.79302C19.5974 7.18354 19.5974 7.81656 19.2069 8.20708L10.7069 16.7071C10.5194 16.8946 10.2651 17 9.99989 17C9.7347 17 9.48038 16.8946 9.29286 16.7071L4.79286 12.2071C4.40236 11.8166 4.40241 11.1835 4.79286 10.793C5.18338 10.4025 5.81639 10.4025 6.20692 10.793L9.99989 14.586L17.7929 6.79302Z'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t}\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));\n\t\t\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-neutral-action-default));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));\n\t\t}\n\n\t\t&:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));\n\t\t}\n\n\t\t&[checked]:hover {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-hover));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));\n\t\t}\n\n\t\t&[checked]:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-active));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&:active:not([readonly]) {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t&[checked]:hover {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&[checked]:active {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__help-text {\n\t\tgrid-column: content;\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-checkbox-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-help-text-line-height);\n\t\tmax-width: var(--_sds-checkbox-max-line-width);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-sm));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M13.168 4.91815C13.5585 4.52763 14.1915 4.52763 14.582 4.91815C14.9724 5.30869 14.9725 5.94173 14.582 6.33221L8.20703 12.7072C8.01952 12.8947 7.76516 13.0002 7.5 13.0002C7.23484 13.0002 6.98049 12.8947 6.79297 12.7072L3.41797 9.33221C3.02746 8.94171 3.0275 8.30868 3.41797 7.91815C3.80849 7.52763 4.44151 7.52763 4.83203 7.91815L7.5 10.5861L13.168 4.91815Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-lg));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M23.9592 9.29327C24.3497 8.9028 24.9828 8.90291 25.3733 9.29327C25.7637 9.68381 25.7638 10.3169 25.3733 10.7073L14.0403 22.0403C13.6498 22.4306 13.0167 22.4307 12.6262 22.0403L6.62622 16.0403C6.23592 15.6499 6.23593 15.0168 6.62622 14.6263C7.0167 14.236 7.6498 14.236 8.04028 14.6263L13.3333 19.9193L23.9592 9.29327Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyNxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-block-gap: var(--sds-checkbox-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-checkbox-inline-gap: var(--sds-checkbox-inline-gap, var(--sds-spacing-3xs));\n\t\t--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));\n\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));\n\t\t--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));\n\t\t--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-icon-md));\n\t\t--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);\n\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));\n\n\t\t--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-checkbox-focus-color-outer: var(--sds-checkbox-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-checkbox-focus-color-inner: var(--sds-checkbox-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-checkbox-focus-spacing: var(--sds-checkbox-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-checkbox-focus-radius: var(--sds-checkbox-focus-radius, var(--sds-radius-xs));\n\n\t\t--_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox {\n\t\talign-items: start;\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-checkbox-font-family);\n\t\tgap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);\n\t\tgrid-template-areas: 'input content';\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-checkbox-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: var(--_sds-checkbox-focus-spacing) solid var(--_sds-checkbox-focus-color-outer);\n\t\t\toutline-offset: calc(var(--_sds-checkbox-focus-spacing) * 2);\n\t\t\tborder-radius: var(--_sds-checkbox-focus-radius);\n\t\t}\n\t}\n\n\t.sds-checkbox--error {\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t.sds-checkbox__label {\n\t\tgrid-column: content;\n\t\talign-self: center;\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-checkbox-label-text-color);\n\t\tdisplay: inline-flex;\n\t\tfont-size: var(--_sds-checkbox-label-font-size);\n\t\tfont-weight: var(--_sds-checkbox-label-font-weight);\n\t\tgap: var(--_sds-checkbox-inline-gap);\n\t\tline-height: var(--_sds-checkbox-label-line-height);\n\t}\n\n\t.sds-checkbox__input {\n\t\tgrid-column: input;\n\t\tgrid-row: 1;\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-checkbox-input-background-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-checkbox-input-size);\n\t\theight: var(--_sds-checkbox-input-size);\n\t\taspect-ratio: var(--_sds-checkbox-input-aspect-ratio);\n\t\tborder-width: var(--_sds-checkbox-input-border-width);\n\t\tborder-style: var(--_sds-checkbox-input-border-style);\n\t\tborder-color: var(--_sds-checkbox-input-border-color);\n\t\tborder-radius: var(--_sds-checkbox-input-border-radius);\n\t\tmargin: 0;\n\n\t\t&[readonly] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-checkbox__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: var(--_sds-checkbox-input-size);\n\t\t\t\theight: var(--_sds-checkbox-input-size);\n\t\t\t\tbackground-color: var(--_sds-checkbox-input-icon-color);\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'M17.7929 6.79302C18.1834 6.40249 18.8164 6.40249 19.2069 6.79302C19.5974 7.18354 19.5974 7.81656 19.2069 8.20708L10.7069 16.7071C10.5194 16.8946 10.2651 17 9.99989 17C9.7347 17 9.48038 16.8946 9.29286 16.7071L4.79286 12.2071C4.40236 11.8166 4.40241 11.1835 4.79286 10.793C5.18338 10.4025 5.81639 10.4025 6.20692 10.793L9.99989 14.586L17.7929 6.79302Z'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t}\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-action-default, var(--sds-color-neutral-action-default)));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&[checked]:hover {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&[checked]:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&:active:not([readonly]) {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t&[checked]:hover {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&[checked]:active {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__help-text {\n\t\tgrid-column: content;\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-checkbox-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-help-text-line-height);\n\t\tmax-width: var(--_sds-checkbox-max-line-width);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-sm));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M13.168 4.91815C13.5585 4.52763 14.1915 4.52763 14.582 4.91815C14.9724 5.30869 14.9725 5.94173 14.582 6.33221L8.20703 12.7072C8.01952 12.8947 7.76516 13.0002 7.5 13.0002C7.23484 13.0002 6.98049 12.8947 6.79297 12.7072L3.41797 9.33221C3.02746 8.94171 3.0275 8.30868 3.41797 7.91815C3.80849 7.52763 4.44151 7.52763 4.83203 7.91815L7.5 10.5861L13.168 4.91815Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-lg));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M23.9592 9.29327C24.3497 8.9028 24.9828 8.90291 25.3733 9.29327C25.7637 9.68381 25.7638 10.3169 25.3733 10.7073L14.0403 22.0403C13.6498 22.4306 13.0167 22.4307 12.6262 22.0403L6.62622 16.0403C6.23592 15.6499 6.23593 15.0168 6.62622 14.6263C7.0167 14.236 7.6498 14.236 8.04028 14.6263L13.3333 19.9193L23.9592 9.29327Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}
|
|
@@ -4,7 +4,7 @@ export const styles = css `
|
|
|
4
4
|
--_sds-checkbox-group-gap: var(--sds-checkbox-group-gap, var(--sds-spacing-xs));
|
|
5
5
|
--_sds-checkbox-group-font-family: var(--sds-checkbox-group-font-family, var(--sds-typography-font-family-roboto));
|
|
6
6
|
--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-md));
|
|
7
|
-
--_sds-checkbox-group-text-color: var(--sds-checkbox-group-text-color, var(--sds-color-neutral-text-default));
|
|
7
|
+
--_sds-checkbox-group-text-color: var(--sds-checkbox-group-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
|
|
8
8
|
--_sds-checkbox-group-max-line-width: var(--sds-checkbox-group-max-line-width, var(--sds-typography-max-line-width));
|
|
9
9
|
--_sds-checkbox-group-disabled-opacity: var(--sds-checkbox-group-disabled-opacity, var(--sds-color-states-disabled-opacity));
|
|
10
10
|
|
|
@@ -12,7 +12,7 @@ export const styles = css `
|
|
|
12
12
|
--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-md));
|
|
13
13
|
--_sds-checkbox-group-legend-help-text-gap: var(--sds-checkbox-group-legend-help-text-gap, var(--sds-spacing-4xs));
|
|
14
14
|
|
|
15
|
-
--_sds-checkbox-group-help-text-color: var(--sds-checkbox-group-help-text-color, var(--sds-color-neutral-text-subtle));
|
|
15
|
+
--_sds-checkbox-group-help-text-color: var(--sds-checkbox-group-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
|
|
16
16
|
--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-md));
|
|
17
17
|
--_sds-checkbox-group-help-text-font-weight: var(--sds-checkbox-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
|
|
18
18
|
--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));
|