@politiet/sheriff-web-components 2.0.3 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/frameworks/preact.d.ts +4 -1
- package/dist/frameworks/preact.d.ts.map +1 -1
- package/dist/frameworks/react.d.ts +4 -1
- package/dist/frameworks/react.d.ts.map +1 -1
- package/dist/frameworks/solidjs.d.ts +1 -0
- package/dist/frameworks/solidjs.d.ts.map +1 -1
- package/dist/frameworks/svelte.d.ts +1 -0
- package/dist/frameworks/svelte.d.ts.map +1 -1
- package/dist/frameworks/vue.d.ts +1 -0
- package/dist/frameworks/vue.d.ts.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/react-wrappers/SDSDetailsWrapper.d.ts +6 -0
- package/dist/react-wrappers/SDSDetailsWrapper.d.ts.map +1 -0
- package/dist/react-wrappers/SDSDetailsWrapper.js +12 -0
- package/dist/react-wrappers/SDSDetailsWrapper.js.map +1 -0
- package/dist/react-wrappers/index.d.ts +1 -0
- package/dist/react-wrappers/index.d.ts.map +1 -1
- package/dist/react-wrappers/index.js +1 -0
- package/dist/react-wrappers/index.js.map +1 -1
- package/dist/sds-alert/sds-alert.styles.d.ts.map +1 -1
- package/dist/sds-alert/sds-alert.styles.js +2 -0
- package/dist/sds-alert/sds-alert.styles.js.map +1 -1
- package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
- package/dist/sds-button/sds-button.styles.js +3 -2
- package/dist/sds-button/sds-button.styles.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.d.ts +20 -1
- package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.js +54 -2
- package/dist/sds-checkbox/sds-checkbox.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.styles.d.ts.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.styles.js +10 -5
- package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.d.ts +2 -0
- package/dist/sds-checkbox-group/sds-checkbox-group.d.ts.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.js +37 -24
- package/dist/sds-checkbox-group/sds-checkbox-group.js.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.styles.js +6 -6
- package/dist/sds-checkbox-group/sds-checkbox-group.styles.js.map +1 -1
- package/dist/sds-chip/sds-chip.d.ts.map +1 -1
- package/dist/sds-chip/sds-chip.js +2 -3
- package/dist/sds-chip/sds-chip.js.map +1 -1
- package/dist/sds-chip/sds-chip.styles.d.ts.map +1 -1
- package/dist/sds-chip/sds-chip.styles.js +7 -3
- package/dist/sds-chip/sds-chip.styles.js.map +1 -1
- package/dist/sds-details/sds-details.d.ts +21 -0
- package/dist/sds-details/sds-details.d.ts.map +1 -0
- package/dist/sds-details/sds-details.js +60 -0
- package/dist/sds-details/sds-details.js.map +1 -0
- package/dist/sds-details/sds-details.styles.d.ts +2 -0
- package/dist/sds-details/sds-details.styles.d.ts.map +1 -0
- package/dist/sds-details/sds-details.styles.js +139 -0
- package/dist/sds-details/sds-details.styles.js.map +1 -0
- package/dist/sds-icon/sds-icon-names.d.ts +1 -1
- package/dist/sds-icon/sds-icon-names.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon-names.js +1 -0
- package/dist/sds-icon/sds-icon-names.js.map +1 -1
- package/dist/sds-icon/sds-icon.system.d.ts +1 -1
- package/dist/sds-icon/sds-icon.system.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon.system.js +2 -0
- package/dist/sds-icon/sds-icon.system.js.map +1 -1
- package/dist/sds-notification/sds-notification.styles.js +1 -1
- package/dist/sds-notification/sds-notification.styles.js.map +1 -1
- package/dist/sds-radio/sds-radio.styles.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.styles.js +9 -4
- package/dist/sds-radio/sds-radio.styles.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.styles.js +6 -6
- package/dist/sds-radio-group/sds-radio-group.styles.js.map +1 -1
- package/dist/sds-switch/sds-switch.js +2 -2
- package/dist/sds-switch/sds-switch.js.map +1 -1
- package/dist/sds-switch/sds-switch.styles.js +6 -6
- package/dist/sds-switch/sds-switch.styles.js.map +1 -1
- package/dist/sds-text/sds-text.styles.js +2 -2
- package/dist/sds-text/sds-text.styles.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.d.ts +1 -1
- package/dist/sds-textarea/sds-textarea.d.ts.map +1 -1
- package/dist/sds-textarea/sds-textarea.js +14 -12
- package/dist/sds-textarea/sds-textarea.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.styles.js +15 -15
- package/dist/sds-textarea/sds-textarea.styles.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.d.ts +1 -1
- package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
- package/dist/sds-textfield/sds-textfield.js +17 -14
- package/dist/sds-textfield/sds-textfield.js.map +1 -1
- package/dist/sheriff-web-components.js +323 -2769
- package/dist/types.d.ts +2 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +1 -1
- package/dist/types.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ICON_NAMES } from './sds-icon-names';
|
|
2
2
|
export type SystemIcon = Extract<(typeof ICON_NAMES)[number], (typeof SYSTEM_ICONS)[number]>;
|
|
3
|
-
export declare const SYSTEM_ICONS: readonly ["arrow_forward-material-outlined", "check_circle-material-filled", "close-material-outlined", "dangerous-material-filled", "InformationSquareFill-aksel-filled", "lock-material-filled", "search-material-filled", "warning-material-filled"];
|
|
3
|
+
export declare const SYSTEM_ICONS: readonly ["arrow_forward-material-outlined", "check_circle-material-filled", "close-material-outlined", "dangerous-material-filled", "InformationSquareFill-aksel-filled", "lock-material-filled", "search-material-filled", "warning-material-filled", "chevron_up-material-filled"];
|
|
4
4
|
export declare const isSystemIcon: (name: string) => name is SystemIcon;
|
|
5
5
|
export declare const systemIcons: Record<SystemIcon, string>;
|
|
6
6
|
//# sourceMappingURL=sds-icon.system.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon.system.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.system.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAE7F,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"sds-icon.system.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.system.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAE7F,eAAO,MAAM,YAAY,uRAUf,CAAC;AAEX,eAAO,MAAM,YAAY,GAAI,MAAM,MAAM,KAAG,IAAI,IAAI,UAEnD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAUlD,CAAC"}
|
|
@@ -7,6 +7,7 @@ export const SYSTEM_ICONS = [
|
|
|
7
7
|
'lock-material-filled',
|
|
8
8
|
'search-material-filled',
|
|
9
9
|
'warning-material-filled',
|
|
10
|
+
'chevron_up-material-filled',
|
|
10
11
|
];
|
|
11
12
|
export const isSystemIcon = (name) => {
|
|
12
13
|
return SYSTEM_ICONS.includes(name);
|
|
@@ -20,5 +21,6 @@ export const systemIcons = {
|
|
|
20
21
|
'lock-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M225.09-67q-32.68 0-55.95-23.27t-23.27-55.95v-423.82q0-32.91 23.27-56.35t55.95-23.44h58.69v-83.56q0-82.44 57.17-140.18 57.16-57.73 139.02-57.73t139.05 57.73q57.2 57.74 57.2 140.18v83.56h58.69q32.91 0 56.35 23.44t23.44 56.35v423.82q0 32.68-23.44 55.95T734.91-67zm255.08-214.13q31.83 0 54.33-22.03t22.5-52.97q0-30-22.67-54.5t-54.5-24.5-54.33 24.5-22.5 55 22.67 52.5 54.5 22M363-649.83h234v-83.43q0-49.96-33.79-84.11-33.8-34.15-82.96-34.15t-83.21 34.15Q363-783.22 363-733.26z"/></svg>`,
|
|
21
22
|
'search-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M795.43-105.17 529.04-371q-29.43 24.26-69.11 37.94-39.67 13.67-85.32 13.67-112.12 0-189.87-77.83Q107-475.04 107-585t77.83-187.78q77.82-77.83 188.28-77.83t187.78 77.83q77.33 77.82 77.33 187.93 0 43.98-13.15 83.13-13.16 39.15-39.46 73.59L853-162.74zM373.81-398.61q77.66 0 131.42-54.53Q559-507.67 559-585t-53.85-131.86-131.34-54.53q-78.33 0-132.96 54.53T186.22-585t54.55 131.86 133.04 54.53"/></svg>`,
|
|
22
23
|
'warning-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 -960 960 960"><path d="M27.56-112.65 480-894.7l452.44 782.05zm456.62-125.48q13.15 0 22.61-9.64 9.47-9.65 9.47-22.8t-9.64-22.33q-9.65-9.19-22.8-9.19t-22.61 9.36q-9.47 9.36-9.47 22.51t9.64 22.62q9.65 9.47 22.8 9.47M454-348h60v-219.48h-60z"/></svg>`,
|
|
24
|
+
'chevron_up-material-filled': `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 32 32"><path d="m16 11.5 8 8-1.867 1.867L16 15.233l-6.133 6.134L8 19.5z"/></svg>`,
|
|
23
25
|
};
|
|
24
26
|
//# sourceMappingURL=sds-icon.system.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-icon.system.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.system.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC3B,iCAAiC;IACjC,8BAA8B;IAC9B,yBAAyB;IACzB,2BAA2B;IAC3B,oCAAoC;IACpC,sBAAsB;IACtB,wBAAwB;IACxB,yBAAyB;
|
|
1
|
+
{"version":3,"file":"sds-icon.system.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.system.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC3B,iCAAiC;IACjC,8BAA8B;IAC9B,yBAAyB;IACzB,2BAA2B;IAC3B,oCAAoC;IACpC,sBAAsB;IACtB,wBAAwB;IACxB,yBAAyB;IACzB,4BAA4B;CACnB,CAAC;AAEX,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,IAAY,EAAsB,EAAE;IAChE,OAAO,YAAY,CAAC,QAAQ,CAAC,IAAkB,CAAC,CAAC;AAClD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA+B;IACtD,iCAAiC,EAAE,uMAAuM;IAC1O,8BAA8B,EAAE,khBAAkhB;IACljB,yBAAyB,EAAE,2NAA2N;IACtP,2BAA2B,EAAE,2VAA2V;IACxX,oCAAoC,EAAE,wZAAwZ;IAC9b,sBAAsB,EAAE,ikBAAikB;IACzlB,wBAAwB,EAAE,4eAA4e;IACtgB,yBAAyB,EAAE,8TAA8T;IACzV,4BAA4B,EAAE,2JAA2J;CACzL,CAAC","sourcesContent":["import { ICON_NAMES } from './sds-icon-names';\n\nexport type SystemIcon = Extract<(typeof ICON_NAMES)[number], (typeof SYSTEM_ICONS)[number]>;\n\nexport const SYSTEM_ICONS = [\n\t'arrow_forward-material-outlined',\n\t'check_circle-material-filled',\n\t'close-material-outlined',\n\t'dangerous-material-filled',\n\t'InformationSquareFill-aksel-filled',\n\t'lock-material-filled',\n\t'search-material-filled',\n\t'warning-material-filled',\n\t'chevron_up-material-filled',\n] as const;\n\nexport const isSystemIcon = (name: string): name is SystemIcon => {\n\treturn SYSTEM_ICONS.includes(name as SystemIcon);\n};\n\nexport const systemIcons: Record<SystemIcon, string> = {\n\t'arrow_forward-material-outlined': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M662.82-440.39H145.87v-79.22h516.95L423.87-758.57 480-814.7 814.7-480 480-145.87l-56.13-55.56z\"/></svg>`,\n\t'check_circle-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"m419.87-289.52 289.22-289.22-57.31-56.87L419.87-403.7 304.96-518.61l-56.31 56.87zm60.21 223.65q-85.47 0-161.01-32.39-75.53-32.4-131.97-88.84T98.26-318.99q-32.39-75.46-32.39-160.93 0-86.47 32.39-162.01 32.4-75.53 88.75-131.5t131.85-88.62 161.01-32.65q86.52 0 162.12 32.61 75.61 32.6 131.53 88.5 55.93 55.89 88.55 131.45Q894.7-566.58 894.7-480q0 85.55-32.65 161.07-32.65 75.53-88.62 131.9T642.01-98.26q-75.46 32.39-161.93 32.39\"/></svg>`,\n\t'close-material-outlined': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M249-193.43 193.43-249l231-231-231-231L249-766.57l231 231 231-231L766.57-711l-231 231 231 231L711-193.43l-231-231z\"/></svg>`,\n\t'dangerous-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M324.35-105.87 105.87-324.35v-311.87L324.35-854.7h311.87L854.7-636.22v311.87L636.22-105.87zm34.91-206.87L480-433.48l120.74 120.74 47.09-46.52L526.52-480l121.31-120.74-47.09-47.09L480-526.52 359.26-647.83l-46.52 47.09L433.48-480 312.74-359.26z\"/></svg>`,\n\t'InformationSquareFill-aksel-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"/></svg>`,\n\t'lock-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M225.09-67q-32.68 0-55.95-23.27t-23.27-55.95v-423.82q0-32.91 23.27-56.35t55.95-23.44h58.69v-83.56q0-82.44 57.17-140.18 57.16-57.73 139.02-57.73t139.05 57.73q57.2 57.74 57.2 140.18v83.56h58.69q32.91 0 56.35 23.44t23.44 56.35v423.82q0 32.68-23.44 55.95T734.91-67zm255.08-214.13q31.83 0 54.33-22.03t22.5-52.97q0-30-22.67-54.5t-54.5-24.5-54.33 24.5-22.5 55 22.67 52.5 54.5 22M363-649.83h234v-83.43q0-49.96-33.79-84.11-33.8-34.15-82.96-34.15t-83.21 34.15Q363-783.22 363-733.26z\"/></svg>`,\n\t'search-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M795.43-105.17 529.04-371q-29.43 24.26-69.11 37.94-39.67 13.67-85.32 13.67-112.12 0-189.87-77.83Q107-475.04 107-585t77.83-187.78q77.82-77.83 188.28-77.83t187.78 77.83q77.33 77.82 77.33 187.93 0 43.98-13.15 83.13-13.16 39.15-39.46 73.59L853-162.74zM373.81-398.61q77.66 0 131.42-54.53Q559-507.67 559-585t-53.85-131.86-131.34-54.53q-78.33 0-132.96 54.53T186.22-585t54.55 131.86 133.04 54.53\"/></svg>`,\n\t'warning-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 -960 960 960\"><path d=\"M27.56-112.65 480-894.7l452.44 782.05zm456.62-125.48q13.15 0 22.61-9.64 9.47-9.65 9.47-22.8t-9.64-22.33q-9.65-9.19-22.8-9.19t-22.61 9.36q-9.47 9.36-9.47 22.51t9.64 22.62q9.65 9.47 22.8 9.47M454-348h60v-219.48h-60z\"/></svg>`,\n\t'chevron_up-material-filled': `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 32 32\"><path d=\"m16 11.5 8 8-1.867 1.867L16 15.233l-6.133 6.134L8 19.5z\"/></svg>`,\n};\n"]}
|
|
@@ -11,7 +11,7 @@ export const styles = css `
|
|
|
11
11
|
--_sds-notification-content-gap: var(--sds-notification-content-gap, var(--sds-spacing-3xs));
|
|
12
12
|
|
|
13
13
|
--_sds-notification-font-family: var(--sds-notification-font-family, var(--sds-typography-font-family-roboto));
|
|
14
|
-
--_sds-notification-font-size: var(--sds-notification-font-size, var(--sds-components-font-size-md));
|
|
14
|
+
--_sds-notification-font-size: var(--sds-notification-font-size, var(--sds-components-font-size-content-md));
|
|
15
15
|
--_sds-notification-font-weight: var(--sds-notification-font-weight, var(--sds-typography-body-md-desktop-font-weight));
|
|
16
16
|
--_sds-notification-line-height: var(--sds-notification-line-height, var(--sds-components-line-height-squeezed-md));
|
|
17
17
|
--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-info-text-default));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-notification.styles.js","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyIxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-info-surface-tinted));\n\n\t\t--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-info-border-default));\n\t\t--_sds-notification-border-radius: var(--sds-notification-border-radius, var(--sds-radius-sm));\n\t\t--_sds-notification-border-width: var(--sds-notification-border-width, var(--sds-border-sm));\n\n\t\t--_sds-notification-column-gap: var(--sds-notification-column-gap, var(--sds-spacing-2xs));\n\t\t--_sds-notification-content-gap: var(--sds-notification-content-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-notification-font-family: var(--sds-notification-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-notification-font-size: var(--sds-notification-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-notification-font-weight: var(--sds-notification-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-notification-line-height: var(--sds-notification-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-info-text-default));\n\n\t\t--_sds-notification-title-font-size: var(--sds-notification-title-font-size, var(--sds-typography-body-lg-desktop-tall-font-size));\n\t\t--_sds-notification-title-font-weight: var(--sds-notification-title-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-notification-title-line-height: var(--sds-notification-title-line-height, var(--sds-typography-body-lg-strong-tall-desktop-line-height));\n\n\t\t--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-info-text-subtle));\n\t\t--_sds-notification-max-line-width: var(--sds-notification-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-notification-padding: var(--sds-notification-padding, var(--sds-spacing-sm));\n\t\t--_sds-notification-remove-btn-radius: var(--sds-notification-remove-btn-radius, var(--sds-radius-xs));\n\n\t\tdisplay: block;\n\t}\n\n\t.sds-notification {\n\t\tdisplay: flex;\n\t\tgap: var(--_sds-notification-column-gap);\n\t\tpadding: var(--_sds-notification-padding);\n\n\t\tbackground-color: var(--_sds-notification-background-color);\n\t\tborder: var(--_sds-notification-border-width) solid var(--_sds-notification-border-color);\n\t\tborder-radius: var(--_sds-notification-border-radius);\n\t\tcolor: var(--_sds-notification-text-color);\n\n\t\tfont-family: var(--_sds-notification-font-family);\n\t\ttext-align: left;\n\t}\n\n\t.sds-notification__type {\n\t\tcolor: var(--_sds-notification-icon-color);\n\t}\n\n\t.sds-notification__content {\n\t\talign-self: center;\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-notification-content-gap);\n\t}\n\n\t.sds-notification__actions {\n\t\t--sds-button-padding-inline: 0;\n\t}\n\n\t.sds-notification__icon {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n\n\t:host([variant='success']) {\n\t\t--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-success-surface-tinted));\n\t\t--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-success-border-default));\n\t\t--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-attention-text-default));\n\t\t--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-success-text-subtle));\n\n\t\tsds-button {\n\t\t\t--sds-button-text-color: var(--sds-color-alert-success-action-default);\n\t\t}\n\n\t\tsds-button:hover {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-success-surface-hover);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-success-surface-hover);\n\t\t}\n\n\t\tsds-button:active {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-success-surface-active);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-success-surface-active);\n\t\t}\n\t}\n\n\t:host([variant='warning']), /* Deprecated */\n\t:host([variant='attention']) {\n\t\t--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-attention-surface-tinted));\n\t\t--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-attention-border-default));\n\t\t--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-attention-text-default));\n\t\t--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-attention-text-subtle));\n\n\t\tsds-button {\n\t\t\t--sds-button-text-color: var(--sds-color-alert-attention-border-default);\n\t\t}\n\n\t\tsds-button:hover {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-attention-surface-hover);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-attention-surface-hover);\n\t\t}\n\n\t\tsds-button:active {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-attention-surface-active);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-attention-surface-active);\n\t\t}\n\t}\n\n\t:host([variant='critical']), /* Deprecated */\n\t:host([variant='danger']) {\n\t\t--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-danger-surface-tinted));\n\t\t--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-danger-border-default));\n\t\t--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-danger-text-default));\n\t\t--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-danger-text-subtle));\n\t}\n\n\t::slotted([slot='title']),\n\t::slotted(:is(h1, h2, h3, h4, h5, h6)) {\n\t\tcolor: var(--_sds-notification-text-color) !important;\n\t\tfont-size: var(--_sds-notification-title-font-size) !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: var(--_sds-notification-title-font-weight) !important;\n\t\tline-height: var(--_sds-notification-title-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--_sds-notification-max-line-width) !important;\n\t}\n\n\t::slotted([slot='message']),\n\t::slotted(:is(p)) {\n\t\tcolor: var(--_sds-notification-text-color) !important;\n\t\tfont-size: var(--_sds-notification-font-size) !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: var(--_sds-notification-font-weight) !important;\n\t\tline-height: var(--_sds-notification-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--_sds-notification-max-line-width) !important;\n\t}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"sds-notification.styles.js","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyIxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-info-surface-tinted));\n\n\t\t--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-info-border-default));\n\t\t--_sds-notification-border-radius: var(--sds-notification-border-radius, var(--sds-radius-sm));\n\t\t--_sds-notification-border-width: var(--sds-notification-border-width, var(--sds-border-sm));\n\n\t\t--_sds-notification-column-gap: var(--sds-notification-column-gap, var(--sds-spacing-2xs));\n\t\t--_sds-notification-content-gap: var(--sds-notification-content-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-notification-font-family: var(--sds-notification-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-notification-font-size: var(--sds-notification-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-notification-font-weight: var(--sds-notification-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-notification-line-height: var(--sds-notification-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-info-text-default));\n\n\t\t--_sds-notification-title-font-size: var(--sds-notification-title-font-size, var(--sds-typography-body-lg-desktop-tall-font-size));\n\t\t--_sds-notification-title-font-weight: var(--sds-notification-title-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-notification-title-line-height: var(--sds-notification-title-line-height, var(--sds-typography-body-lg-strong-tall-desktop-line-height));\n\n\t\t--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-info-text-subtle));\n\t\t--_sds-notification-max-line-width: var(--sds-notification-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-notification-padding: var(--sds-notification-padding, var(--sds-spacing-sm));\n\t\t--_sds-notification-remove-btn-radius: var(--sds-notification-remove-btn-radius, var(--sds-radius-xs));\n\n\t\tdisplay: block;\n\t}\n\n\t.sds-notification {\n\t\tdisplay: flex;\n\t\tgap: var(--_sds-notification-column-gap);\n\t\tpadding: var(--_sds-notification-padding);\n\n\t\tbackground-color: var(--_sds-notification-background-color);\n\t\tborder: var(--_sds-notification-border-width) solid var(--_sds-notification-border-color);\n\t\tborder-radius: var(--_sds-notification-border-radius);\n\t\tcolor: var(--_sds-notification-text-color);\n\n\t\tfont-family: var(--_sds-notification-font-family);\n\t\ttext-align: left;\n\t}\n\n\t.sds-notification__type {\n\t\tcolor: var(--_sds-notification-icon-color);\n\t}\n\n\t.sds-notification__content {\n\t\talign-self: center;\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-notification-content-gap);\n\t}\n\n\t.sds-notification__actions {\n\t\t--sds-button-padding-inline: 0;\n\t}\n\n\t.sds-notification__icon {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n\n\t:host([variant='success']) {\n\t\t--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-success-surface-tinted));\n\t\t--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-success-border-default));\n\t\t--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-attention-text-default));\n\t\t--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-success-text-subtle));\n\n\t\tsds-button {\n\t\t\t--sds-button-text-color: var(--sds-color-alert-success-action-default);\n\t\t}\n\n\t\tsds-button:hover {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-success-surface-hover);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-success-surface-hover);\n\t\t}\n\n\t\tsds-button:active {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-success-surface-active);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-success-surface-active);\n\t\t}\n\t}\n\n\t:host([variant='warning']), /* Deprecated */\n\t:host([variant='attention']) {\n\t\t--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-attention-surface-tinted));\n\t\t--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-attention-border-default));\n\t\t--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-attention-text-default));\n\t\t--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-attention-text-subtle));\n\n\t\tsds-button {\n\t\t\t--sds-button-text-color: var(--sds-color-alert-attention-border-default);\n\t\t}\n\n\t\tsds-button:hover {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-attention-surface-hover);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-attention-surface-hover);\n\t\t}\n\n\t\tsds-button:active {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-attention-surface-active);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-attention-surface-active);\n\t\t}\n\t}\n\n\t:host([variant='critical']), /* Deprecated */\n\t:host([variant='danger']) {\n\t\t--_sds-notification-background-color: var(--sds-notification-background-color, var(--sds-color-alert-danger-surface-tinted));\n\t\t--_sds-notification-border-color: var(--sds-notification-border-color, var(--sds-color-alert-danger-border-default));\n\t\t--_sds-notification-text-color: var(--sds-notification-text-color, var(--sds-color-alert-danger-text-default));\n\t\t--_sds-notification-icon-color: var(--sds-notification-icon-color, var(--sds-color-alert-danger-text-subtle));\n\t}\n\n\t::slotted([slot='title']),\n\t::slotted(:is(h1, h2, h3, h4, h5, h6)) {\n\t\tcolor: var(--_sds-notification-text-color) !important;\n\t\tfont-size: var(--_sds-notification-title-font-size) !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: var(--_sds-notification-title-font-weight) !important;\n\t\tline-height: var(--_sds-notification-title-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--_sds-notification-max-line-width) !important;\n\t}\n\n\t::slotted([slot='message']),\n\t::slotted(:is(p)) {\n\t\tcolor: var(--_sds-notification-text-color) !important;\n\t\tfont-size: var(--_sds-notification-font-size) !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: var(--_sds-notification-font-weight) !important;\n\t\tline-height: var(--_sds-notification-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--_sds-notification-max-line-width) !important;\n\t}\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-radio.styles.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-radio.styles.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA0MlB,CAAC"}
|
|
@@ -23,6 +23,11 @@ export const styles = css `
|
|
|
23
23
|
--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, transparent);
|
|
24
24
|
--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);
|
|
25
25
|
|
|
26
|
+
--_sds-radio-grid-template-areas: var(--sds-radio-grid-template-area, 'input content');
|
|
27
|
+
--_sds-radio-label-grid-area: var(--sds-radio-label-grid-area, content);
|
|
28
|
+
--_sds-radio-input-grid-area: var(--sds-radio-input-grid-area, input);
|
|
29
|
+
--_sds-radio-help-text-grid-area: var(--sds-radio-help-text-grid-area, content);
|
|
30
|
+
|
|
26
31
|
display: inline-flex;
|
|
27
32
|
flex: 0 0 auto;
|
|
28
33
|
}
|
|
@@ -31,7 +36,7 @@ export const styles = css `
|
|
|
31
36
|
display: grid;
|
|
32
37
|
font-family: var(--_sds-radio-font-family);
|
|
33
38
|
gap: var(--_sds-radio-block-gap) var(--_sds-radio-inline-gap);
|
|
34
|
-
grid-template-areas:
|
|
39
|
+
grid-template-areas: var(--_sds-radio-grid-template-areas);
|
|
35
40
|
grid-template-columns: auto 1fr;
|
|
36
41
|
width: fit-content;
|
|
37
42
|
|
|
@@ -53,7 +58,7 @@ export const styles = css `
|
|
|
53
58
|
}
|
|
54
59
|
|
|
55
60
|
.sds-radio__help-text {
|
|
56
|
-
grid-column:
|
|
61
|
+
grid-column: var(--_sds-radio-help-text-grid-area);
|
|
57
62
|
margin: 0;
|
|
58
63
|
color: var(--_sds-radio-help-text-color);
|
|
59
64
|
font-size: var(--_sds-radio-help-text-font-size);
|
|
@@ -70,7 +75,7 @@ export const styles = css `
|
|
|
70
75
|
font-weight: var(--_sds-radio-label-font-weight);
|
|
71
76
|
line-height: var(--_sds-radio-label-line-height);
|
|
72
77
|
|
|
73
|
-
grid-column:
|
|
78
|
+
grid-column: var(--_sds-radio-label-grid-area);
|
|
74
79
|
}
|
|
75
80
|
|
|
76
81
|
.sds-radio__input {
|
|
@@ -87,7 +92,7 @@ export const styles = css `
|
|
|
87
92
|
margin: 0;
|
|
88
93
|
position: relative;
|
|
89
94
|
|
|
90
|
-
grid-column: input;
|
|
95
|
+
grid-column: var(--_sds-radio-input-grid-area);
|
|
91
96
|
grid-row: 1;
|
|
92
97
|
|
|
93
98
|
&[readonly] {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-radio.styles.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqMxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-radio-font-family: var(--sds-radio-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-radio-disabled-opacity: var(--sds-radio-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-radio-block-gap: var(--sds-radio-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-radio-inline-gap: var(--sds-radio-inline-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-radio-label-font-weight: var(--sds-radio-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-radio-help-text-color: var(--sds-radio-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-radio-help-text-font-size: var(--sds-radio-help-text-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-radio-help-text-font-weight: var(--sds-radio-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-help-text-line-height: var(--sds-radio-help-text-line-height, var(--sds-components-line-height-tall-content-md));\n\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-md));\n\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-radio-input-border-width: var(--sds-radio-input-border-width, var(--sds-border-md));\n\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, transparent);\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);\n\n\t\tdisplay: inline-flex;\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-radio {\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-radio-font-family);\n\t\tgap: var(--_sds-radio-block-gap) var(--_sds-radio-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-radio-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: 3px solid var(--sds-color-states-focus-outer);\n\t\t\toutline-offset: 6px;\n\t\t\tborder-radius: var(--sds-radius-sm);\n\t\t}\n\t}\n\n\t.sds-radio--error {\n\t\t--_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-text-default, var(--sds-color-alert-danger-text-default)));\n\t}\n\n\t.sds-radio__help-text {\n\t\tgrid-column: content;\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-radio-help-text-color);\n\t\tfont-size: var(--_sds-radio-help-text-font-size);\n\t\tfont-weight: var(--_sds-radio-help-text-font-weight);\n\t\tline-height: var(--_sds-radio-help-text-line-height);\n\t\tmax-width: var(--_sds-radio-max-line-width);\n\t}\n\n\t.sds-radio__label {\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-radio-label-text-color);\n\t\tdisplay: inline-block;\n\t\tfont-size: var(--_sds-radio-label-font-size);\n\t\tfont-weight: var(--_sds-radio-label-font-weight);\n\t\tline-height: var(--_sds-radio-label-line-height);\n\n\t\tgrid-column: content;\n\t}\n\n\t.sds-radio__input {\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-radio-input-background-color);\n\t\tbackground-image: radial-gradient(circle closest-side, currentcolor var(--_sds-radio-input-dot-size), transparent 0);\n\t\tcolor: var(--_sds-radio-input-dot-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-radio-input-size);\n\t\theight: var(--_sds-radio-input-size);\n\t\taspect-ratio: 1;\n\t\tborder: var(--_sds-radio-input-border-width) solid var(--_sds-radio-input-border-color);\n\t\tborder-radius: 50%;\n\t\tmargin: 0;\n\t\tposition: relative;\n\n\t\tgrid-column: input;\n\t\tgrid-row: 1;\n\n\t\t&[readonly] {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-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-radio__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-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-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-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t}\n\t\t}\n\n\t\t&:active:not([readonly], [checked]) {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\n\t\t&.sds-radio__input--error {\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-alert-danger-action-contrast-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));\n\n\t\t\t\t&[checked] {\n\t\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active:not([readonly], [checked]) {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));\n\n\t\t\t\t&[checked] {\n\t\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-sm));\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 3.5px);\n\n\t\t.sds-radio__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-lg));\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);\n\n\t\t.sds-radio__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"sds-radio.styles.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0MxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-radio-font-family: var(--sds-radio-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-radio-disabled-opacity: var(--sds-radio-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-radio-block-gap: var(--sds-radio-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-radio-inline-gap: var(--sds-radio-inline-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-radio-label-font-weight: var(--sds-radio-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-radio-help-text-color: var(--sds-radio-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-radio-help-text-font-size: var(--sds-radio-help-text-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-radio-help-text-font-weight: var(--sds-radio-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-help-text-line-height: var(--sds-radio-help-text-line-height, var(--sds-components-line-height-tall-content-md));\n\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-md));\n\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-radio-input-border-width: var(--sds-radio-input-border-width, var(--sds-border-md));\n\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, transparent);\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);\n\n\t\t--_sds-radio-grid-template-areas: var(--sds-radio-grid-template-area, 'input content');\n\t\t--_sds-radio-label-grid-area: var(--sds-radio-label-grid-area, content);\n\t\t--_sds-radio-input-grid-area: var(--sds-radio-input-grid-area, input);\n\t\t--_sds-radio-help-text-grid-area: var(--sds-radio-help-text-grid-area, content);\n\n\t\tdisplay: inline-flex;\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-radio {\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-radio-font-family);\n\t\tgap: var(--_sds-radio-block-gap) var(--_sds-radio-inline-gap);\n\t\tgrid-template-areas: var(--_sds-radio-grid-template-areas);\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-radio-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: 3px solid var(--sds-color-states-focus-outer);\n\t\t\toutline-offset: 6px;\n\t\t\tborder-radius: var(--sds-radius-sm);\n\t\t}\n\t}\n\n\t.sds-radio--error {\n\t\t--_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-text-default, var(--sds-color-alert-danger-text-default)));\n\t}\n\n\t.sds-radio__help-text {\n\t\tgrid-column: var(--_sds-radio-help-text-grid-area);\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-radio-help-text-color);\n\t\tfont-size: var(--_sds-radio-help-text-font-size);\n\t\tfont-weight: var(--_sds-radio-help-text-font-weight);\n\t\tline-height: var(--_sds-radio-help-text-line-height);\n\t\tmax-width: var(--_sds-radio-max-line-width);\n\t}\n\n\t.sds-radio__label {\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-radio-label-text-color);\n\t\tdisplay: inline-block;\n\t\tfont-size: var(--_sds-radio-label-font-size);\n\t\tfont-weight: var(--_sds-radio-label-font-weight);\n\t\tline-height: var(--_sds-radio-label-line-height);\n\n\t\tgrid-column: var(--_sds-radio-label-grid-area);\n\t}\n\n\t.sds-radio__input {\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-radio-input-background-color);\n\t\tbackground-image: radial-gradient(circle closest-side, currentcolor var(--_sds-radio-input-dot-size), transparent 0);\n\t\tcolor: var(--_sds-radio-input-dot-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-radio-input-size);\n\t\theight: var(--_sds-radio-input-size);\n\t\taspect-ratio: 1;\n\t\tborder: var(--_sds-radio-input-border-width) solid var(--_sds-radio-input-border-color);\n\t\tborder-radius: 50%;\n\t\tmargin: 0;\n\t\tposition: relative;\n\n\t\tgrid-column: var(--_sds-radio-input-grid-area);\n\t\tgrid-row: 1;\n\n\t\t&[readonly] {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-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-radio__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-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-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-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t}\n\t\t}\n\n\t\t&:active:not([readonly], [checked]) {\n\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t}\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\n\t\t&.sds-radio__input--error {\n\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-alert-danger-action-contrast-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));\n\n\t\t\t\t&[checked] {\n\t\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:active:not([readonly], [checked]) {\n\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));\n\n\t\t\t\t&[checked] {\n\t\t\t\t\t--_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t\t--_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t\t--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-sm));\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 3.5px);\n\n\t\t.sds-radio__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-lg));\n\t\t--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);\n\n\t\t.sds-radio__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-radio-group-gap: var(--sds-radio-group-gap, var(--sds-spacing-xs));
|
|
5
5
|
--_sds-radio-group-row-gap: var(--sds-radio-group-row-gap, var(--sds-spacing-md));
|
|
6
6
|
--_sds-radio-group-font-family: var(--sds-radio-group-font-family, var(--sds-typography-font-family-roboto));
|
|
7
|
-
--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-md));
|
|
7
|
+
--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-content-md));
|
|
8
8
|
--_sds-radio-group-text-color: var(--sds-radio-group-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
|
|
9
9
|
--_sds-radio-group-max-line-width: var(--sds-radio-group-max-line-width, var(--sds-typography-max-line-width));
|
|
10
10
|
--_sds-radio-group-disabled-opacity: var(--sds-radio-group-disabled-opacity, var(--sds-color-states-disabled-opacity));
|
|
@@ -14,7 +14,7 @@ export const styles = css `
|
|
|
14
14
|
--_sds_radio-group-legend-help-text-gap: var(--sds-radio-group-legend-help-text-gap, var(--sds-spacing-4xs));
|
|
15
15
|
|
|
16
16
|
--_sds-radio-group-help-text-color: var(--sds-radio-group-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
|
|
17
|
-
--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-md));
|
|
17
|
+
--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-content-md));
|
|
18
18
|
--_sds-radio-group-help-text-font-weight: var(--sds-radio-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
|
|
19
19
|
--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));
|
|
20
20
|
|
|
@@ -85,16 +85,16 @@ export const styles = css `
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
:host([size='sm']) {
|
|
88
|
-
--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-sm));
|
|
88
|
+
--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-content-sm));
|
|
89
89
|
--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));
|
|
90
|
-
--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-sm));
|
|
90
|
+
--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-content-sm));
|
|
91
91
|
--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
:host([size='lg']) {
|
|
95
|
-
--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-lg));
|
|
95
|
+
--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-content-lg));
|
|
96
96
|
--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));
|
|
97
|
-
--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-lg));
|
|
97
|
+
--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-content-lg));
|
|
98
98
|
--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));
|
|
99
99
|
}
|
|
100
100
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-radio-group.styles.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-radio-group-gap: var(--sds-radio-group-gap, var(--sds-spacing-xs));\n\t\t--_sds-radio-group-row-gap: var(--sds-radio-group-row-gap, var(--sds-spacing-md));\n\t\t--_sds-radio-group-font-family: var(--sds-radio-group-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-radio-group-text-color: var(--sds-radio-group-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-radio-group-max-line-width: var(--sds-radio-group-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-radio-group-disabled-opacity: var(--sds-radio-group-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-radio-group-legend-font-weight: var(--sds-radio-group-legend-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds_radio-group-legend-help-text-gap: var(--sds-radio-group-legend-help-text-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-radio-group-help-text-color: var(--sds-radio-group-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-radio-group-help-text-font-weight: var(--sds-radio-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-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-radio-group {\n\t\tborder: 0;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tcolor: var(--_sds-radio-group-text-color);\n\t\tfont-family: var(--_sds-radio-group-font-family);\n\t\tfont-size: var(--_sds-radio-group-font-size);\n\t}\n\n\t.sds-radio-group--disabled {\n\t\t.sds-radio-group__legend,\n\t\t.sds-radio-group__help-text,\n\t\tsds-alert {\n\t\t\topacity: var(--_sds-radio-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-radio-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-radio-group-legend-font-weight);\n\t\tline-height: var(--_sds-radio-group-legend-line-height);\n\t\tmax-width: var(--_sds-radio-group-max-line-width);\n\n\t\t+ .sds-radio-group__help-text {\n\t\t\tmargin-block-start: var(--_sds_radio-group-legend-help-text-gap);\n\t\t}\n\t}\n\n\t.sds-radio-group__help-text {\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-radio-group-help-text-color);\n\t\tfont-size: var(--_sds-radio-group-help-text-font-size);\n\t\tfont-weight: var(--_sds-radio-group-help-text-font-weight);\n\t\tline-height: var(--_sds-radio-group-help-text-line-height);\n\t\tmax-width: var(--_sds-radio-group-max-line-width);\n\t}\n\n\t.sds-radio-group__radios {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-radio-group-gap);\n\t\tmargin-top: var(--_sds-radio-group-gap);\n\n\t\t&.sds-radio-group--row {\n\t\t\tflex-direction: row;\n\t\t\tgap: var(--_sds-radio-group-row-gap);\n\t\t}\n\t}\n\n\tsds-alert {\n\t\tmargin-top: var(--_sds-radio-group-gap);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"sds-radio-group.styles.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkGxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-radio-group-gap: var(--sds-radio-group-gap, var(--sds-spacing-xs));\n\t\t--_sds-radio-group-row-gap: var(--sds-radio-group-row-gap, var(--sds-spacing-md));\n\t\t--_sds-radio-group-font-family: var(--sds-radio-group-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-radio-group-text-color: var(--sds-radio-group-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-radio-group-max-line-width: var(--sds-radio-group-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-radio-group-disabled-opacity: var(--sds-radio-group-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-radio-group-legend-font-weight: var(--sds-radio-group-legend-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds_radio-group-legend-help-text-gap: var(--sds-radio-group-legend-help-text-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-radio-group-help-text-color: var(--sds-radio-group-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-radio-group-help-text-font-weight: var(--sds-radio-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-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-radio-group {\n\t\tborder: 0;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tcolor: var(--_sds-radio-group-text-color);\n\t\tfont-family: var(--_sds-radio-group-font-family);\n\t\tfont-size: var(--_sds-radio-group-font-size);\n\t}\n\n\t.sds-radio-group--disabled {\n\t\t.sds-radio-group__legend,\n\t\t.sds-radio-group__help-text,\n\t\tsds-alert {\n\t\t\topacity: var(--_sds-radio-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-radio-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-radio-group-legend-font-weight);\n\t\tline-height: var(--_sds-radio-group-legend-line-height);\n\t\tmax-width: var(--_sds-radio-group-max-line-width);\n\n\t\t+ .sds-radio-group__help-text {\n\t\t\tmargin-block-start: var(--_sds_radio-group-legend-help-text-gap);\n\t\t}\n\t}\n\n\t.sds-radio-group__help-text {\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-radio-group-help-text-color);\n\t\tfont-size: var(--_sds-radio-group-help-text-font-size);\n\t\tfont-weight: var(--_sds-radio-group-help-text-font-weight);\n\t\tline-height: var(--_sds-radio-group-help-text-line-height);\n\t\tmax-width: var(--_sds-radio-group-max-line-width);\n\t}\n\n\t.sds-radio-group__radios {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-radio-group-gap);\n\t\tmargin-top: var(--_sds-radio-group-gap);\n\n\t\t&.sds-radio-group--row {\n\t\t\tflex-direction: row;\n\t\t\tgap: var(--_sds-radio-group-row-gap);\n\t\t}\n\t}\n\n\tsds-alert {\n\t\tmargin-top: var(--_sds-radio-group-gap);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
|
|
@@ -24,7 +24,7 @@ let SDSSwitch = class SDSSwitch extends LitElement {
|
|
|
24
24
|
this._initialChecked = false;
|
|
25
25
|
this._handleChange = (event) => {
|
|
26
26
|
event.stopImmediatePropagation();
|
|
27
|
-
if (!this.disabled
|
|
27
|
+
if (!this.disabled) {
|
|
28
28
|
const elem = event.target;
|
|
29
29
|
this.checked = elem.checked;
|
|
30
30
|
this.internals.setFormValue(this.checked ? 'on' : 'off');
|
|
@@ -36,7 +36,7 @@ let SDSSwitch = class SDSSwitch extends LitElement {
|
|
|
36
36
|
};
|
|
37
37
|
this._handleFocus = (event) => {
|
|
38
38
|
event.stopImmediatePropagation();
|
|
39
|
-
if (!this.disabled
|
|
39
|
+
if (!this.disabled) {
|
|
40
40
|
this.dispatchEvent(new CustomEvent('focus', {
|
|
41
41
|
bubbles: true,
|
|
42
42
|
composed: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-switch.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,OAAO,sBAAsB,CAAC;AAiBvB,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAkBxC;QACC,KAAK,EAAE,CAAC;QAhBmC,aAAQ,GAAY,KAAK,CAAC;QAC3B,UAAK,GAAW,EAAE,CAAC;QACO,cAAS,GAAY,KAAK,CAAC;QAEpD,YAAO,GAAY,KAAK,CAAC;QACzB,YAAO,GAAY,KAAK,CAAC;QACF,aAAQ,GAAY,KAAK,CAAC;QAClD,SAAI,GAAe,IAAI,CAAC;QAM3D,oBAAe,GAAY,KAAK,CAAC;QA+BxB,kBAAa,GAAG,CAAC,KAAY,EAAE,EAAE;YACjD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"sds-switch.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-switch.styles';\nimport { SDS_SIZES } from '../types';\n\nimport '../sds-icon/sds-icon';\n\ntype v2SwitchSizes = Extract<SDS_SIZES, 'sm' | 'md' | 'lg'>;\ntype SwitchSize = v2SwitchSizes | 's' | 'l';\n\nexport interface SDSSwitchProps {\n\tdisabled?: boolean;\n\tlabel?: string;\n\t'hide-label'?: boolean;\n\tname?: string;\n\treadonly?: boolean;\n\treverse?: boolean;\n\tchecked?: boolean;\n\tsize?: SwitchSize;\n}\n\n@guardedCustomElement('sds-switch')\nexport class SDSSwitch extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: String, reflect: true }) label: string = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: Boolean, reflect: true }) reverse: boolean = false;\n\t@property({ type: Boolean, reflect: true }) checked: boolean = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) size: SwitchSize = 'md';\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis.control.checked = this.checked;\n\t\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this._initialChecked ? 'on' : 'off');\n\t}\n\n\tformStateRestoreCallback(state: unknown) {\n\t\tthis.checked = state as boolean;\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('focus', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled && !this.disabled) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('blur', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly getIconSize = (): v2SwitchSizes => {\n\t\tswitch (this.size) {\n\t\t\tcase 'sm':\n\t\t\tcase 'md':\n\t\t\tcase 'lg':\n\t\t\t\treturn this.size;\n\t\t\tcase 'l':\n\t\t\t\treturn 'lg';\n\t\t\tcase 's':\n\t\t\t\treturn 'sm';\n\t\t}\n\t};\n\n\tget value(): string {\n\t\treturn this.checked ? 'on' : 'off';\n\t}\n\n\toverride render() {\n\t\tconst switchClasses = {\n\t\t\t'sds-switch': true,\n\t\t};\n\n\t\tconst labelClasses = {\n\t\t\t'sds-switch__label': true,\n\t\t\t'sds-switch__label--hidden': this.hideLabel,\n\t\t};\n\n\t\tconst inputTemplate = html`<input\n\t\t\tclass=\"sds-switch__input\"\n\t\t\tid=\"control\"\n\t\t\ttype=\"checkbox\"\n\t\t\trole=\"switch\"\n\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t.checked=\"${this.checked}\"\n\t\t\t?checked=\"${this.checked}\"\n\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t@change=\"${this._handleChange}\"\n\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t@blur=\"${this._handleBlur}\"\n\t\t/>`;\n\t\tconst iconTemplate = this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"${this.getIconSize()}\"></sds-icon>` : nothing;\n\t\tconst labelTemplate = html`<label class=\"${classMap(labelClasses)}\" for=\"control\">${iconTemplate}${this.label}</label>`;\n\t\treturn html`<div class=\"${classMap(switchClasses)}\">${this.reverse ? [labelTemplate, inputTemplate] : [inputTemplate, labelTemplate]}</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-switch': SDSSwitch;\n\t}\n}\n"]}
|
|
@@ -11,9 +11,9 @@ export const styles = css `
|
|
|
11
11
|
--_sds-switch-border-radius: var(--sds-switch-border-radius, var(--sds-radius-full));
|
|
12
12
|
|
|
13
13
|
--_sds-switch-font-family: var(--sds-switch-font-family, var(--sds-typography-font-family-roboto));
|
|
14
|
-
--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-md));
|
|
14
|
+
--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-content-md));
|
|
15
15
|
--_sds-switch-font-weight: var(--sds-switch-font-weight, var(--sds-typography-font-weight-regular));
|
|
16
|
-
--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-
|
|
16
|
+
--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-tall-content-md));
|
|
17
17
|
|
|
18
18
|
--_sds-switch-gap: var(--sds-switch-gap, var(--sds-spacing-3xs));
|
|
19
19
|
--_sds-switch-icon-gap: var(--sds-switch-icon-gap, var(--sds-spacing-4xs));
|
|
@@ -58,8 +58,8 @@ export const styles = css `
|
|
|
58
58
|
--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-sm));
|
|
59
59
|
--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-sm));
|
|
60
60
|
--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-sm));
|
|
61
|
-
--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-sm));
|
|
62
|
-
--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-
|
|
61
|
+
--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-content-sm));
|
|
62
|
+
--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-tall-content-sm));
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
:host([size='l']),
|
|
@@ -67,8 +67,8 @@ export const styles = css `
|
|
|
67
67
|
--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-lg));
|
|
68
68
|
--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-lg));
|
|
69
69
|
--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-lg));
|
|
70
|
-
--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-lg));
|
|
71
|
-
--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-
|
|
70
|
+
--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-content-lg));
|
|
71
|
+
--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-tall-content-lg));
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
.sds-switch {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-switch.styles.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-switch-text-color: var(--sds-switch-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-switch-transition-time: var(--sds-switch-transition-time, 200ms);\n\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-switch-border-width: var(--sds-switch-border-width, var(--sds-border-md));\n\t\t--_sds-switch-border-radius: var(--sds-switch-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-switch-font-family: var(--sds-switch-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-switch-font-weight: var(--sds-switch-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-
|
|
1
|
+
{"version":3,"file":"sds-switch.styles.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-switch-text-color: var(--sds-switch-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-switch-transition-time: var(--sds-switch-transition-time, 200ms);\n\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-switch-border-width: var(--sds-switch-border-width, var(--sds-border-md));\n\t\t--_sds-switch-border-radius: var(--sds-switch-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-switch-font-family: var(--sds-switch-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-switch-font-weight: var(--sds-switch-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-tall-content-md));\n\n\t\t--_sds-switch-gap: var(--sds-switch-gap, var(--sds-spacing-3xs));\n\t\t--_sds-switch-icon-gap: var(--sds-switch-icon-gap, var(--sds-spacing-4xs));\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-md));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-md));\n\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-md));\n\t\t--_sds-switch-button-gap: var(--sds-switch-button-gap, var(--sds-spacing-4xs));\n\t\t--_sds-switch-button-position: var(--sds-switch-button-position, calc(var(--_sds-switch-button-gap) - var(--_sds-switch-border-width)));\n\t\t--_sds-switch-button-radius: var(--sds-switch-button-radius, var(--sds-radius-full));\n\n\t\t--_sds-switch-focus-outline-width: var(--sds-switch-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-switch-focus-outline-color: var(--sds-switch-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-switch-focus-outline-offset: var(--sds-switch-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-switch-focus-inner-color: var(--sds-switch-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-switch-disabled-opacity: var(--sds-switch-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-subtle));\n\t\tcursor: default;\n\t\tpointer-events: none;\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-switch-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='s']),\n\t:host([size='sm']) {\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-sm));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-sm));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-sm));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-tall-content-sm));\n\t}\n\n\t:host([size='l']),\n\t:host([size='lg']) {\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-lg));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-lg));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-lg));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-tall-content-lg));\n\t}\n\n\t.sds-switch {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: var(--_sds-switch-gap);\n\t\tfont-family: var(--_sds-switch-font-family);\n\t}\n\n\t.sds-switch__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tgap: var(--_sds-switch-icon-gap);\n\t\tcolor: var(--_sds-switch-text-color);\n\t\tfont-size: var(--_sds-switch-font-size);\n\t\tfont-weight: var(--_sds-switch-font-weight);\n\t\tline-height: var(--_sds-switch-line-height);\n\t}\n\n\t.sds-switch__label--hidden:not(:focus):not(:active):not(:focus-within) {\n\t\tclip-path: inset(50%);\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\twhite-space: nowrap;\n\t\twidth: 1px;\n\t}\n\n\t.sds-switch__input {\n\t\tappearance: none;\n\t\tposition: relative;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tmargin: 0;\n\n\t\twidth: var(--_sds-switch-width);\n\t\theight: var(--_sds-switch-height);\n\n\t\tbackground-color: var(--_sds-switch-background-color);\n\t\tborder: var(--_sds-switch-border-width) solid var(--_sds-switch-border-color);\n\t\tborder-radius: var(--_sds-switch-border-radius);\n\n\t\ttransition: background-color var(--_sds-switch-transition-time) ease;\n\t}\n\n\t.sds-switch__input::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%) translateX(var(--_sds-switch-button-position));\n\n\t\twidth: var(--_sds-switch-button-size);\n\t\theight: var(--_sds-switch-button-size);\n\n\t\tbackground-color: var(--_sds-switch-button-color);\n\t\tborder-radius: var(--_sds-switch-button-radius);\n\n\t\ttransition:\n\t\t\ttransform var(--_sds-switch-transition-time) ease,\n\t\t\tbackground-color var(--_sds-switch-transition-time) ease;\n\t}\n\n\t.sds-switch__input:focus-visible {\n\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-switch-focus-inner-color);\n\t\toutline: var(--_sds-switch-focus-outline-width) solid var(--_sds-switch-focus-outline-color);\n\t\toutline-offset: var(--_sds-switch-focus-outline-offset);\n\t}\n\n\t.sds-switch__input:checked:not([readonly]) {\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-main-action-default));\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color-checked, var(--sds-color-main-action-default));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-surface-default));\n\t}\n\n\t.sds-switch__input:checked::before {\n\t\t--_sds-switch-button-position: calc(var(--_sds-switch-width) - var(--_sds-switch-button-size) - var(--_sds-switch-button-gap) - var(--_sds-switch-border-width));\n\t}\n`;\n"]}
|
|
@@ -5,7 +5,7 @@ export const styles = css `
|
|
|
5
5
|
--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));
|
|
6
6
|
--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));
|
|
7
7
|
--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));
|
|
8
|
-
--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-
|
|
8
|
+
--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
|
|
9
9
|
|
|
10
10
|
display: block;
|
|
11
11
|
box-sizing: border-box;
|
|
@@ -23,7 +23,7 @@ export const styles = css `
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
:host([data-palette]) {
|
|
26
|
-
--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-
|
|
26
|
+
--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
/* Mobile */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-text.styles.js","sourceRoot":"","sources":["../../src/sds-text/sds-text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmRxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-text-font-family: var(--sds-text-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\t\t--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-accent-text-default)));\n\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t}\n\n\tp {\n\t\tfont-family: var(--_sds-text-font-family);\n\t\tfont-size: var(--_sds-text-font-size);\n\t\tfont-weight: var(--_sds-text-font-weight);\n\t\tline-height: var(--_sds-text-line-height);\n\t\tcolor: var(--_sds-text-color);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-accent-text-default)));\n\t}\n\n\t/* Mobile */\n\t:host {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\t}\n\n\t:host([strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-mobile-line-height));\n\t}\n\n\t:host([tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-mobile-line-height));\n\t}\n\n\t/* Extra small variants */\n\t:host([size='xs']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-mobile-line-height));\n\t}\n\n\t:host([size='xs'][strong]) {\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-mobile-font-weight));\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-mobile-font-size));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-mobile-line-height));\n\t}\n\n\t/* Small variants */\n\t:host([size='sm']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-mobile-line-height));\n\t}\n\n\t:host([size='sm'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-mobile-line-height));\n\t}\n\n\t:host([size='sm'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-mobile-line-height));\n\t}\n\n\t/* Large variants */\n\t:host([size='lg']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-mobile-line-height));\n\t}\n\n\t:host([size='lg'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-mobile-line-height));\n\t}\n\n\t:host([size='lg'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-mobile-font-size));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-mobile-line-height));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-mobile-font-weight));\n\t}\n\n\t:host([size='lg'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-mobile-line-height));\n\t}\n\n\t/* Extra large variant */\n\t:host([size='xl']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-mobile-line-height));\n\t}\n\n\t/* Tablet */\n\t@media (min-width: 640px) {\n\t\t/* Medium variants */\n\t\t:host {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tablet-line-height));\n\t\t}\n\n\t\t:host([strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Extra small variants */\n\t\t:host([size='xs']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong]) {\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-tablet-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-tablet-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-tablet-line-height));\n\t\t}\n\n\t\t/* Small variants */\n\t\t:host([size='sm']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Large variants */\n\t\t:host([size='lg']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tablet-line-height));\n\t\t}\n\n\t\t:host([size='lg'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='lg'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-tablet-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-tablet-line-height));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-tablet-font-weight));\n\t\t}\n\n\t\t:host([size='lg'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Extra large variant */\n\t\t:host([size='xl']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-tablet-line-height));\n\t\t}\n\t}\n\n\t/* Desktop */\n\t@media (min-width: 1024px) {\n\t\t/* Medium variants */\n\t\t:host([strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Extra small variants */\n\t\t:host([size='xs']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong]) {\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-desktop-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-desktop-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-desktop-line-height));\n\t\t}\n\n\t\t/* Small variants */\n\t\t:host([size='sm']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Large variants */\n\t\t:host([size='lg']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-desktop-line-height));\n\t\t}\n\n\t\t:host([size='lg'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='lg'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-desktop-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-desktop-line-height));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-desktop-font-weight));\n\t\t}\n\n\t\t:host([size='lg'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Extra large variant */\n\t\t:host([size='xl']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"sds-text.styles.js","sourceRoot":"","sources":["../../src/sds-text/sds-text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmRxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-text-font-family: var(--sds-text-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\t\t--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t}\n\n\tp {\n\t\tfont-family: var(--_sds-text-font-family);\n\t\tfont-size: var(--_sds-text-font-size);\n\t\tfont-weight: var(--_sds-text-font-weight);\n\t\tline-height: var(--_sds-text-line-height);\n\t\tcolor: var(--_sds-text-color);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-text-color: var(--sds-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t}\n\n\t/* Mobile */\n\t:host {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\t}\n\n\t:host([strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-mobile-line-height));\n\t}\n\n\t:host([tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-mobile-line-height));\n\t}\n\n\t/* Extra small variants */\n\t:host([size='xs']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-mobile-line-height));\n\t}\n\n\t:host([size='xs'][strong]) {\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-mobile-font-weight));\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-mobile-font-size));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-mobile-line-height));\n\t}\n\n\t/* Small variants */\n\t:host([size='sm']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-mobile-line-height));\n\t}\n\n\t:host([size='sm'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-mobile-line-height));\n\t}\n\n\t:host([size='sm'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-mobile-line-height));\n\t}\n\n\t/* Large variants */\n\t:host([size='lg']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-mobile-line-height));\n\t}\n\n\t:host([size='lg'][strong]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-mobile-line-height));\n\t}\n\n\t:host([size='lg'][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-mobile-font-size));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-mobile-line-height));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-mobile-font-weight));\n\t}\n\n\t:host([size='lg'][strong][tall]) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-mobile-line-height));\n\t}\n\n\t/* Extra large variant */\n\t:host([size='xl']) {\n\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-mobile-font-size));\n\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-mobile-font-weight));\n\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-mobile-line-height));\n\t}\n\n\t/* Tablet */\n\t@media (min-width: 640px) {\n\t\t/* Medium variants */\n\t\t:host {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tablet-line-height));\n\t\t}\n\n\t\t:host([strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Extra small variants */\n\t\t:host([size='xs']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-tablet-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong]) {\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-tablet-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-tablet-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-tablet-line-height));\n\t\t}\n\n\t\t/* Small variants */\n\t\t:host([size='sm']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='sm'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Large variants */\n\t\t:host([size='lg']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tablet-line-height));\n\t\t}\n\n\t\t:host([size='lg'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tablet-line-height));\n\t\t}\n\n\t\t:host([size='lg'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-tablet-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-tablet-line-height));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-tablet-font-weight));\n\t\t}\n\n\t\t:host([size='lg'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-tablet-line-height));\n\t\t}\n\n\t\t/* Extra large variant */\n\t\t:host([size='xl']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-tablet-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-tablet-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-tablet-line-height));\n\t\t}\n\t}\n\n\t/* Desktop */\n\t@media (min-width: 1024px) {\n\t\t/* Medium variants */\n\t\t:host([strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-md-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-md-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-md-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Extra small variants */\n\t\t:host([size='xs']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-desktop-line-height));\n\t\t}\n\n\t\t:host([size='xs'][strong]) {\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xs-strong-desktop-font-weight));\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xs-strong-desktop-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xs-strong-desktop-line-height));\n\t\t}\n\n\t\t/* Small variants */\n\t\t:host([size='sm']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='sm'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-sm-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-sm-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-sm-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Large variants */\n\t\t:host([size='lg']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-desktop-line-height));\n\t\t}\n\n\t\t:host([size='lg'][strong]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-desktop-line-height));\n\t\t}\n\n\t\t:host([size='lg'][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-tall-desktop-font-size));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-tall-desktop-line-height));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-tall-desktop-font-weight));\n\t\t}\n\n\t\t:host([size='lg'][strong][tall]) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-lg-strong-tall-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-lg-strong-tall-desktop-line-height));\n\t\t}\n\n\t\t/* Extra large variant */\n\t\t:host([size='xl']) {\n\t\t\t--_sds-text-font-size: var(--sds-text-font-size, var(--sds-typography-body-xl-desktop-font-size));\n\t\t\t--_sds-text-font-weight: var(--sds-text-font-weight, var(--sds-typography-body-xl-desktop-font-weight));\n\t\t\t--_sds-text-line-height: var(--sds-text-line-height, var(--sds-typography-body-xl-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import '../sds-icon/sds-icon';
|
|
3
2
|
import '../sds-alert/sds-alert';
|
|
3
|
+
import '../sds-icon/sds-icon';
|
|
4
4
|
import { SDS_SIZES } from '../types';
|
|
5
5
|
type InputSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
|
|
6
6
|
export interface SDSTextAreaProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-textarea.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAOhD,OAAO,
|
|
1
|
+
{"version":3,"file":"sds-textarea.d.ts","sourceRoot":"","sources":["../../src/sds-textarea/sds-textarea.ts"],"names":[],"mappings":"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"}
|