@politiet/sheriff-web-components 2.0.0-rc.2 → 2.0.2
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/sds-button/sds-button.styles.js +1 -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-icon/sds-icon.styles.js +2 -2
- package/dist/sds-icon/sds-icon.styles.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.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 +102 -102
- package/package.json +143 -143
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+IxB,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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+IxB,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-hover)));\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([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));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox-group.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-group-gap: var(--sds-checkbox-group-gap, var(--sds-spacing-xs));\n\t\t--_sds-checkbox-group-font-family: var(--sds-checkbox-group-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-group-text-color: var(--sds-checkbox-group-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-checkbox-group-max-line-width: var(--sds-checkbox-group-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-checkbox-group-disabled-opacity: var(--sds-checkbox-group-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-checkbox-group-legend-font-weight: var(--sds-checkbox-group-legend-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-checkbox-group-legend-help-text-gap: var(--sds-checkbox-group-legend-help-text-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-checkbox-group-help-text-color: var(--sds-checkbox-group-help-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-group-help-text-font-weight: var(--sds-checkbox-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\tdisplay: block;\n\t\tcontain: layout style;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-checkbox-group {\n\t\tborder: 0;\n\t\tcolor: var(--_sds-checkbox-group-text-color);\n\t\tfont-family: var(--_sds-checkbox-group-font-family);\n\t\tfont-size: var(--_sds-checkbox-group-font-size);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.sds-checkbox-group--disabled {\n\t\t.sds-checkbox-group__legend,\n\t\t.sds-checkbox-group__help-text,\n\t\tsds-alert {\n\t\t\topacity: var(--_sds-checkbox-group-disabled-opacity);\n\t\t}\n\t}\n\n\tsds-alert {\n\t\t--sds-alert-padding: 0px;\n\t}\n\n\t.sds-checkbox-group__legend {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--sds-spacing-5xs);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tfont-weight: var(--_sds-checkbox-group-legend-font-weight);\n\t\tline-height: var(--_sds-checkbox-group-legend-line-height);\n\t\tmax-width: var(--_sds-checkbox-group-max-line-width);\n\n\t\t+ .sds-checkbox-group__help-text {\n\t\t\tmargin-block-start: var(--_sds-checkbox-group-legend-help-text-gap);\n\t\t}\n\t}\n\n\t.sds-checkbox-group__help-text {\n\t\tcolor: var(--_sds-checkbox-group-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-group-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-group-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-group-help-text-line-height);\n\t\tmargin: 0;\n\t\tmax-width: var(--_sds-checkbox-group-max-line-width);\n\t}\n\n\t.sds-checkbox-group__checkboxes {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-checkbox-group-gap);\n\t\tmargin-top: var(--_sds-checkbox-group-gap);\n\t}\n\n\tsds-alert {\n\t\tmargin-top: var(--_sds-checkbox-group-gap);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"sds-checkbox-group.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-group-gap: var(--sds-checkbox-group-gap, var(--sds-spacing-xs));\n\t\t--_sds-checkbox-group-font-family: var(--sds-checkbox-group-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-group-text-color: var(--sds-checkbox-group-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-checkbox-group-max-line-width: var(--sds-checkbox-group-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-checkbox-group-disabled-opacity: var(--sds-checkbox-group-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-checkbox-group-legend-font-weight: var(--sds-checkbox-group-legend-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-checkbox-group-legend-help-text-gap: var(--sds-checkbox-group-legend-help-text-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-checkbox-group-help-text-color: var(--sds-checkbox-group-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-group-help-text-font-weight: var(--sds-checkbox-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\tdisplay: block;\n\t\tcontain: layout style;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-checkbox-group {\n\t\tborder: 0;\n\t\tcolor: var(--_sds-checkbox-group-text-color);\n\t\tfont-family: var(--_sds-checkbox-group-font-family);\n\t\tfont-size: var(--_sds-checkbox-group-font-size);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.sds-checkbox-group--disabled {\n\t\t.sds-checkbox-group__legend,\n\t\t.sds-checkbox-group__help-text,\n\t\tsds-alert {\n\t\t\topacity: var(--_sds-checkbox-group-disabled-opacity);\n\t\t}\n\t}\n\n\tsds-alert {\n\t\t--sds-alert-padding: 0px;\n\t}\n\n\t.sds-checkbox-group__legend {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--sds-spacing-5xs);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tfont-weight: var(--_sds-checkbox-group-legend-font-weight);\n\t\tline-height: var(--_sds-checkbox-group-legend-line-height);\n\t\tmax-width: var(--_sds-checkbox-group-max-line-width);\n\n\t\t+ .sds-checkbox-group__help-text {\n\t\t\tmargin-block-start: var(--_sds-checkbox-group-legend-help-text-gap);\n\t\t}\n\t}\n\n\t.sds-checkbox-group__help-text {\n\t\tcolor: var(--_sds-checkbox-group-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-group-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-group-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-group-help-text-line-height);\n\t\tmargin: 0;\n\t\tmax-width: var(--_sds-checkbox-group-max-line-width);\n\t}\n\n\t.sds-checkbox-group__checkboxes {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-checkbox-group-gap);\n\t\tmargin-top: var(--_sds-checkbox-group-gap);\n\t}\n\n\tsds-alert {\n\t\tmargin-top: var(--_sds-checkbox-group-gap);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
|
|
@@ -10,7 +10,7 @@ export const styles = css `
|
|
|
10
10
|
--_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));
|
|
11
11
|
--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));
|
|
12
12
|
|
|
13
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-border-default));
|
|
13
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-border-default, var(--sds-color-main-border-default)));
|
|
14
14
|
--_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));
|
|
15
15
|
--_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));
|
|
16
16
|
|
|
@@ -21,8 +21,8 @@ export const styles = css `
|
|
|
21
21
|
|
|
22
22
|
--_sds-chip-disabled-opacity: var(--sds-chip-disabled-opacity, var(--sds-color-states-disabled-opacity));
|
|
23
23
|
|
|
24
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-tinted));
|
|
25
|
-
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-text-default));
|
|
24
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));
|
|
25
|
+
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
|
|
26
26
|
|
|
27
27
|
display: inline-block;
|
|
28
28
|
box-sizing: border-box;
|
|
@@ -35,30 +35,30 @@ export const styles = css `
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
:host(:hover) {
|
|
38
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-hover));
|
|
39
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
|
|
38
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
|
|
39
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
:host(:active) {
|
|
43
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-active));
|
|
44
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
|
|
43
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));
|
|
44
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
:host([checked]) {
|
|
48
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));
|
|
49
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
|
|
48
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
49
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
50
50
|
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
:host([checked]:hover) {
|
|
54
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));
|
|
54
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
|
|
55
55
|
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
|
|
56
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));
|
|
56
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
:host([checked]:active) {
|
|
60
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));
|
|
61
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));
|
|
60
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
|
|
61
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
:host([size='sm']) {
|
|
@@ -110,20 +110,20 @@ export const styles = css `
|
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
&.sds-chip--removable {
|
|
113
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));
|
|
113
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
114
114
|
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
|
|
115
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
|
|
115
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
116
116
|
|
|
117
117
|
&:hover {
|
|
118
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));
|
|
118
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
|
|
119
119
|
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
|
|
120
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));
|
|
120
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
&:active {
|
|
124
|
-
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));
|
|
124
|
+
--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
|
|
125
125
|
--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
|
|
126
|
-
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));
|
|
126
|
+
--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
129
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-chip-font-family: var(--sds-chip-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-chip-font-weight: var(--sds-chip-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-md));\n\n\t\t--_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-border-default));\n\t\t--_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));\n\t\t--_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-chip-focus-outline-width: var(--sds-chip-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-chip-focus-outline-color: var(--sds-chip-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-chip-focus-outline-offset: var(--sds-chip-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-chip-focus-inner-color: var(--sds-chip-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-chip-disabled-opacity: var(--sds-chip-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-tinted));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-text-default));\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-chip-disabled-opacity);\n\t\tcursor: not-allowed;\n\t\tpointer-events: none;\n\t}\n\n\t:host(:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-hover));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));\n\t}\n\n\t:host(:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-active));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));\n\t}\n\n\t:host([checked]) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t}\n\n\t:host([checked]:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));\n\t}\n\n\t:host([checked]:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-lg));\n\t}\n\n\t.sds-chip {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\theight: var(--_sds-chip-height);\n\t\tgap: var(--_sds-chip-gap);\n\t\tjustify-content: center;\n\t\tpadding-inline: var(--_sds-chip-padding-inline);\n\n\t\tbackground-color: var(--_sds-chip-background-color);\n\t\tborder: var(--_sds-chip-border-width) solid var(--_sds-chip-border-color);\n\t\tborder-radius: var(--_sds-chip-border-radius);\n\n\t\tfont-family: var(--_sds-chip-font-family);\n\t\tfont-size: var(--_sds-chip-font-size);\n\t\tfont-weight: var(--_sds-chip-font-weight);\n\t\tline-height: var(--_sds-chip-line-height);\n\t\ttext-align: center;\n\t\tcolor: var(--_sds-chip-text-color);\n\t\tbox-sizing: border-box;\n\n\t\tuser-select: text;\n\t\tcursor: pointer;\n\n\t\t&:focus-within,\n\t\t&:focus {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-chip-focus-inner-color);\n\t\t\toutline: var(--_sds-chip-focus-outline-width) solid var(--_sds-chip-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-chip-focus-outline-offset);\n\t\t}\n\n\t\t&:has([readonly]) {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&.sds-chip--removable {\n\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));\n\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));\n\t\t\t}\n\t\t}\n\n\t\t& input[type='checkbox'] {\n\t\t\tposition: absolute;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\tpadding: 0;\n\t\t\tmargin: -1px;\n\t\t\toverflow: hidden;\n\t\t\tclip-path: inset(50%);\n\t\t\tborder: 0;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-chip-font-family: var(--sds-chip-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-chip-font-weight: var(--sds-chip-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-md));\n\n\t\t--_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-border-default, var(--sds-color-main-border-default)));\n\t\t--_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));\n\t\t--_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-chip-focus-outline-width: var(--sds-chip-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-chip-focus-outline-color: var(--sds-chip-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-chip-focus-outline-offset: var(--sds-chip-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-chip-focus-inner-color: var(--sds-chip-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-chip-disabled-opacity: var(--sds-chip-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-chip-disabled-opacity);\n\t\tcursor: not-allowed;\n\t\tpointer-events: none;\n\t}\n\n\t:host(:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t}\n\n\t:host(:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t}\n\n\t:host([checked]) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t}\n\n\t:host([checked]:hover) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t}\n\n\t:host([checked]:active) {\n\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));\n\t\t--_sds-chip-font-size: var(--sds-chip-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-chip-line-height: var(--sds-chip-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-chip-height: var(--sds-chip-height, var(--sds-components-chip-lg));\n\t}\n\n\t.sds-chip {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\theight: var(--_sds-chip-height);\n\t\tgap: var(--_sds-chip-gap);\n\t\tjustify-content: center;\n\t\tpadding-inline: var(--_sds-chip-padding-inline);\n\n\t\tbackground-color: var(--_sds-chip-background-color);\n\t\tborder: var(--_sds-chip-border-width) solid var(--_sds-chip-border-color);\n\t\tborder-radius: var(--_sds-chip-border-radius);\n\n\t\tfont-family: var(--_sds-chip-font-family);\n\t\tfont-size: var(--_sds-chip-font-size);\n\t\tfont-weight: var(--_sds-chip-font-weight);\n\t\tline-height: var(--_sds-chip-line-height);\n\t\ttext-align: center;\n\t\tcolor: var(--_sds-chip-text-color);\n\t\tbox-sizing: border-box;\n\n\t\tuser-select: text;\n\t\tcursor: pointer;\n\n\t\t&:focus-within,\n\t\t&:focus {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-chip-focus-inner-color);\n\t\t\toutline: var(--_sds-chip-focus-outline-width) solid var(--_sds-chip-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-chip-focus-outline-offset);\n\t\t}\n\n\t\t&:has([readonly]) {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&.sds-chip--removable {\n\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\t--_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t\t--_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));\n\t\t\t\t--_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t}\n\t\t}\n\n\t\t& input[type='checkbox'] {\n\t\t\tposition: absolute;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\tpadding: 0;\n\t\t\tmargin: -1px;\n\t\t\toverflow: hidden;\n\t\t\tclip-path: inset(50%);\n\t\t\tborder: 0;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n`;\n"]}
|
|
@@ -2,7 +2,7 @@ import { css } from 'lit';
|
|
|
2
2
|
export const styles = css `
|
|
3
3
|
:host {
|
|
4
4
|
--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-md));
|
|
5
|
-
--_sds-icon-color: var(--sds-icon-color, var(--sds-color-text-
|
|
5
|
+
--_sds-icon-color: var(--sds-icon-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
|
|
6
6
|
|
|
7
7
|
display: inline-block;
|
|
8
8
|
color: var(--_sds-icon-color);
|
|
@@ -21,7 +21,7 @@ export const styles = css `
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
:host([data-palette]) {
|
|
24
|
-
--_sds-icon-color: var(--sds-icon-color, var(--sds-color-text-
|
|
24
|
+
--_sds-icon-color: var(--sds-icon-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
.sds-icon {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon.styles.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-md));\n\t\t--_sds-icon-color: var(--sds-icon-color, var(--sds-color-text-
|
|
1
|
+
{"version":3,"file":"sds-icon.styles.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-md));\n\t\t--_sds-icon-color: var(--sds-icon-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\n\t\tdisplay: inline-block;\n\t\tcolor: var(--_sds-icon-color);\n\t\tblock-size: var(--_sds-icon-size);\n\t\tinline-size: var(--_sds-icon-size);\n\t\tmin-inline-size: var(--_sds-icon-size);\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-lg));\n\t}\n\n\t:host([size='s']), /* Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-sm));\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-icon-color: var(--sds-icon-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t}\n\n\t.sds-icon {\n\t\taspect-ratio: 1;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden;\n\t}\n`;\n"]}
|