npm - @politiet/sheriff-web-components - Versions diffs - 2.1.0 → 2.1.2 - Mend

@politiet/sheriff-web-components 2.1.0 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/react-wrappers/SDSDetailsWrapper.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { createComponent } from '@lit/react';
 import React from 'react';
 import { SDSDetails } from '../sds-details/sds-details';
 export const SDSDetailsWrapper = createComponent({
-    tagName: 'sds-button',
+    tagName: 'sds-details',
     elementClass: SDSDetails,
     react: React,
     events: {

package/dist/react-wrappers/SDSDetailsWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SDSDetailsWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSDetailsWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAChD,OAAO,EAAE,~~YAAY~~;~~IACrB~~,YAAY,EAAE,UAAU;IACxB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,YAAgC;KAC1C;CACD,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit/react';\nimport React from 'react';\nimport { SDSDetails } from '../sds-details/sds-details';\nimport { SheriffEventName } from '../types';\n\nexport const SDSDetailsWrapper = createComponent({\n\ttagName: 'sds-~~button~~',\n\telementClass: SDSDetails,\n\treact: React,\n\tevents: {\n\t\tonToggle: 'sds-toggle' as SheriffEventName,\n\t},\n});\n"]}
1	+ {"version":3,"file":"SDSDetailsWrapper.js","sourceRoot":"","sources":["../../src/react-wrappers/SDSDetailsWrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC;IAChD,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,UAAU;IACxB,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACP,QAAQ,EAAE,YAAgC;KAC1C;CACD,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit/react';\nimport React from 'react';\nimport { SDSDetails } from '../sds-details/sds-details';\nimport { SheriffEventName } from '../types';\n\nexport const SDSDetailsWrapper = createComponent({\n\ttagName: 'sds-details',\n\telementClass: SDSDetails,\n\treact: React,\n\tevents: {\n\t\tonToggle: 'sds-toggle' as SheriffEventName,\n\t},\n});\n"]}

package/dist/sds-button/sds-button.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,~~yBA2JlB~~,CAAC"}
1	+ {"version":3,"file":"sds-button.styles.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4JlB,CAAC"}

package/dist/sds-button/sds-button.styles.js CHANGED Viewed

@@ -9,7 +9,7 @@ export const styles = css `
 		--_sds-button-focus-inner-color: var(--sds-button-focus-inner-color, var(--sds-color-states-focus-inner));
 		--_sds-button-focus-spacing: var(--sds-button-focus-spacing, var(--sds-color-states-focus-spacing));
 		--_sds-button-font-family: var(--sds-button-font, var(--sds-typography-font-family-roboto));
-		--_sds-button-font-size: var(--sds-button-font-size, var(--sds-typography-body-md-desktop-font-size));
+		--_sds-button-font-size: var(--sds-button-font-size, var(--sds-components-font-size-content-lg));
 		--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));
 		--_sds-button-gap: var(--sds-button-gap, var(--sds-spacing-3xs));
 		--_sds-button-line-height: var(--sds-button-line-height, var(--sds-typography-body-md-desktop-line-height));
@@ -132,6 +132,7 @@ export const styles = css `
 		--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-md));
 		--_sds-button-padding-block: var(--sds-button-padding-block, var(--sds-spacing-4xs));
 		--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));
+		--_sds-button-font-size: var(--sds-button-font-size, var(--sds-components-font-size-content-md));
 		&:host([variant='tertiary']) {
 			--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);
@@ -143,7 +144,7 @@ export const styles = css `
 		--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-sm));
 		--_sds-button-padding-block: var(--sds-button-padding-block, 0);
 		--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));
-		font-size: 0.875rem;
+		--_sds-button-font-size: var(--sds-button-font-size, var(--sds-components-font-size-content-sm));
 		&:host([variant='tertiary']) {
 			--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);

package/dist/sds-button/sds-button.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2JxB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-border-width: var(--sds-button-border-width, var(--sds-border-md));\n\t\t--_sds-button-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-button-focus-color: var(--sds-button-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-button-focus-inner-color: var(--sds-button-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-button-focus-spacing: var(--sds-button-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-button-font-family: var(--sds-button-font, var(--sds-typography-font-family-roboto));\n\t\t--_sds-button-font-size: var(--sds-button-font-size, var(--sds-~~typography~~-~~body~~-md-~~desktop~~-~~font-size~~));\n\t\t--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));\n\t\t--_sds-button-gap: var(--sds-button-gap, var(--sds-spacing-3xs));\n\t\t--_sds-button-line-height: var(--sds-button-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-lg));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-button-radius: var(--sds-button-radius, var(--sds-radius-sm));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\n\t\t--_sds-button-tertiary-text-decoration: var(--sds-typography-link-text-decoration, underline);\n\t\t--_sds-button-tertiary-text-underline-offset: var(--sds-typography-link-text-underline-offset, 4px);\n\t\t--_sds-button-tertiary-text-underline-thickness: 2px;\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\n\t\t::slotted(sds-icon) {\n\t\t\t--sds-icon-color: var(--_sds-button-text-color);\n\t\t}\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tbackground-color: var(--_sds-button-background-color);\n\t\tborder-radius: var(--_sds-button-radius);\n\t\tborder: var(--_sds-button-border-width) solid var(--_sds-button-border-color);\n\t\tcolor: var(--_sds-button-text-color);\n\t\tcursor: pointer;\n\t\tdisplay: inline-flex;\n\t\tfont-family: var(--_sds-button-font-family);\n\t\tfont-size: var(--_sds-button-font-size);\n\t\tfont-weight: var(--_sds-button-font-weight);\n\t\tgap: var(--_sds-button-gap);\n\t\tinline-size: 100%;\n\t\tjustify-content: center;\n\t\tline-height: var(--_sds-button-line-height);\n\t\tmin-height: var(--_sds-button-min-height);\n\t\tpadding: var(--_sds-button-padding-block) var(--_sds-button-padding-inline);\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-button-focus-inner-color);\n\t\t\toutline: 3px solid var(--_sds-button-focus-color);\n\t\t\toutline-offset: 3px;\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&:disabled {\n\t\t\topacity: var(--_sds-button-disabled-opacity);\n\t\t\tcursor: not-allowed;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-button--as-link {\n\t\tinline-size: auto;\n\t\ttext-decoration: none;\n\t}\n\n\t:host([variant='secondary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t}\n\t}\n\n\t:host([variant='tertiary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\n\t\t\ttext-decoration: var(--_sds-button-tertiary-text-decoration);\n\t\t\ttext-decoration-thickness: var(--_sds-button-tertiary-text-underline-thickness);\n\t\t\ttext-underline-offset: var(--_sds-button-tertiary-text-underline-offset);\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\t}\n\n\t:host([variant='tertiary']):host([icon]) {\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t}\n\t}\n\n\t:host([size='medium']), /* Deprecated /\n\t:host([size='md']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-md));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, var(--sds-spacing-4xs));\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\n\t\t&:host([variant='tertiary']) {\n\t\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\t}\n\t}\n\n\t:host([size='small']), / Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-sm));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\t\~~tfont~~-size: ~~0.875rem~~;\n\n\t\t&:host([variant='tertiary']) {\n\t\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\t}\n\t}\n\n\t:host([icon]) {\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\tmin-width: var(--_sds-button-min-height);\n\t}\n`;\n"]}
1	+ {"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4JxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-border-width: var(--sds-button-border-width, var(--sds-border-md));\n\t\t--_sds-button-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-button-focus-color: var(--sds-button-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-button-focus-inner-color: var(--sds-button-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-button-focus-spacing: var(--sds-button-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-button-font-family: var(--sds-button-font, var(--sds-typography-font-family-roboto));\n\t\t--_sds-button-font-size: var(--sds-button-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));\n\t\t--_sds-button-gap: var(--sds-button-gap, var(--sds-spacing-3xs));\n\t\t--_sds-button-line-height: var(--sds-button-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-lg));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-button-radius: var(--sds-button-radius, var(--sds-radius-sm));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\n\t\t--_sds-button-tertiary-text-decoration: var(--sds-typography-link-text-decoration, underline);\n\t\t--_sds-button-tertiary-text-underline-offset: var(--sds-typography-link-text-underline-offset, 4px);\n\t\t--_sds-button-tertiary-text-underline-thickness: 2px;\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\n\t\t::slotted(sds-icon) {\n\t\t\t--sds-icon-color: var(--_sds-button-text-color);\n\t\t}\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tbackground-color: var(--_sds-button-background-color);\n\t\tborder-radius: var(--_sds-button-radius);\n\t\tborder: var(--_sds-button-border-width) solid var(--_sds-button-border-color);\n\t\tcolor: var(--_sds-button-text-color);\n\t\tcursor: pointer;\n\t\tdisplay: inline-flex;\n\t\tfont-family: var(--_sds-button-font-family);\n\t\tfont-size: var(--_sds-button-font-size);\n\t\tfont-weight: var(--_sds-button-font-weight);\n\t\tgap: var(--_sds-button-gap);\n\t\tinline-size: 100%;\n\t\tjustify-content: center;\n\t\tline-height: var(--_sds-button-line-height);\n\t\tmin-height: var(--_sds-button-min-height);\n\t\tpadding: var(--_sds-button-padding-block) var(--_sds-button-padding-inline);\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-button-focus-inner-color);\n\t\t\toutline: 3px solid var(--_sds-button-focus-color);\n\t\t\toutline-offset: 3px;\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&:disabled {\n\t\t\topacity: var(--_sds-button-disabled-opacity);\n\t\t\tcursor: not-allowed;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-button--as-link {\n\t\tinline-size: auto;\n\t\ttext-decoration: none;\n\t}\n\n\t:host([variant='secondary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t}\n\t}\n\n\t:host([variant='tertiary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\n\t\t\ttext-decoration: var(--_sds-button-tertiary-text-decoration);\n\t\t\ttext-decoration-thickness: var(--_sds-button-tertiary-text-underline-thickness);\n\t\t\ttext-underline-offset: var(--_sds-button-tertiary-text-underline-offset);\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\t}\n\n\t:host([variant='tertiary']):host([icon]) {\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t}\n\t}\n\n\t:host([size='medium']), /* Deprecated /\n\t:host([size='md']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-md));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, var(--sds-spacing-4xs));\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\t\t--_sds-button-font-size: var(--sds-button-font-size, var(--sds-components-font-size-content-md));\n\n\t\t&:host([variant='tertiary']) {\n\t\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\t}\n\t}\n\n\t:host([size='small']), / Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-sm));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\t\t--_sds-button-font-size: var(--sds-button-font-size, var(--sds-components-font-size-content-sm));\n\n\t\t&:host([variant='tertiary']) {\n\t\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\t}\n\t}\n\n\t:host([icon]) {\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\tmin-width: var(--_sds-button-min-height);\n\t}\n`;\n"]}

package/dist/sds-checkbox/sds-checkbox.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,~~yBAyNlB~~,CAAC"}
1	+ {"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8NlB,CAAC"}

package/dist/sds-checkbox/sds-checkbox.styles.js CHANGED Viewed

@@ -31,6 +31,11 @@ export const styles = css `
 		--_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));
+		--_sds-checkbox-grid-template-areas: var(--sds-checkbox-grid-template-area, 'input content');
+		--_sds-checkbox-label-grid-area: var(--sds-checkbox-label-grid-area, content);
+		--_sds-checkbox-input-grid-area: var(--sds-checkbox-input-grid-area, input);
+		--_sds-checkbox-help-text-grid-area: var(--sds-checkbox-help-text-grid-area, content);
 		flex: 0 0 auto;
 	}
@@ -39,7 +44,7 @@ export const styles = css `
 		display: grid;
 		font-family: var(--_sds-checkbox-font-family);
 		gap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);
-		grid-template-areas: 'input content';
+		grid-template-areas: var(--_sds-checkbox-grid-template-areas);
 		grid-template-columns: auto 1fr;
 		width: fit-content;
@@ -61,7 +66,7 @@ export const styles = css `
 	}
 	.sds-checkbox__label {
-		grid-column: content;
+		grid-column: var(--_sds-checkbox-label-grid-area);
 		align-self: center;
 		cursor: pointer;
 		color: var(--_sds-checkbox-label-text-color);
@@ -73,7 +78,7 @@ export const styles = css `
 	}
 	.sds-checkbox__input {
-		grid-column: input;
+		grid-column: var(--_sds-checkbox-input-grid-area);
 		grid-row: 1;
 		appearance: none;
 		background-color: var(--_sds-checkbox-input-background-color);
@@ -176,7 +181,7 @@ export const styles = css `
 	}
 	.sds-checkbox__help-text {
-		grid-column: content;
+		grid-column: var(--_sds-checkbox-help-text-grid-area);
 		margin: 0;
 		color: var(--_sds-checkbox-help-text-color);
 		font-size: var(--_sds-checkbox-help-text-font-size);

package/dist/sds-checkbox/sds-checkbox.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyNxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-block-gap: var(--sds-checkbox-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-checkbox-inline-gap: var(--sds-checkbox-inline-gap, var(--sds-spacing-3xs));\n\t\t--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));\n\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));\n\t\t--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));\n\t\t--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-icon-md));\n\t\t--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);\n\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));\n\n\t\t--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-checkbox-focus-color-outer: var(--sds-checkbox-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-checkbox-focus-color-inner: var(--sds-checkbox-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-checkbox-focus-spacing: var(--sds-checkbox-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-checkbox-focus-radius: var(--sds-checkbox-focus-radius, var(--sds-radius-xs));\n\n\t\t--_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox {\n\t\talign-items: start;\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-checkbox-font-family);\n\t\tgap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);\n\t\tgrid-template-areas: 'input content';\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-checkbox-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: var(--_sds-checkbox-focus-spacing) solid var(--_sds-checkbox-focus-color-outer);\n\t\t\toutline-offset: calc(var(--_sds-checkbox-focus-spacing) * 2);\n\t\t\tborder-radius: var(--_sds-checkbox-focus-radius);\n\t\t}\n\t}\n\n\t.sds-checkbox--error {\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t.sds-checkbox__label {\n\t\tgrid-column: content;\n\t\talign-self: center;\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-checkbox-label-text-color);\n\t\tdisplay: inline-flex;\n\t\tfont-size: var(--_sds-checkbox-label-font-size);\n\t\tfont-weight: var(--_sds-checkbox-label-font-weight);\n\t\tgap: var(--_sds-checkbox-inline-gap);\n\t\tline-height: var(--_sds-checkbox-label-line-height);\n\t}\n\n\t.sds-checkbox__input {\n\t\tgrid-column: input;\n\t\tgrid-row: 1;\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-checkbox-input-background-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-checkbox-input-size);\n\t\theight: var(--_sds-checkbox-input-size);\n\t\taspect-ratio: var(--_sds-checkbox-input-aspect-ratio);\n\t\tborder-width: var(--_sds-checkbox-input-border-width);\n\t\tborder-style: var(--_sds-checkbox-input-border-style);\n\t\tborder-color: var(--_sds-checkbox-input-border-color);\n\t\tborder-radius: var(--_sds-checkbox-input-border-radius);\n\t\tmargin: 0;\n\n\t\t&[readonly] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-checkbox__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: var(--_sds-checkbox-input-size);\n\t\t\t\theight: var(--_sds-checkbox-input-size);\n\t\t\t\tbackground-color: var(--_sds-checkbox-input-icon-color);\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'M17.7929 6.79302C18.1834 6.40249 18.8164 6.40249 19.2069 6.79302C19.5974 7.18354 19.5974 7.81656 19.2069 8.20708L10.7069 16.7071C10.5194 16.8946 10.2651 17 9.99989 17C9.7347 17 9.48038 16.8946 9.29286 16.7071L4.79286 12.2071C4.40236 11.8166 4.40241 11.1835 4.79286 10.793C5.18338 10.4025 5.81639 10.4025 6.20692 10.793L9.99989 14.586L17.7929 6.79302Z'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t}\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-action-default, var(--sds-color-neutral-action-default)));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&[checked]:hover {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&[checked]:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&:active:not([readonly]) {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t&[checked]:hover {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&[checked]:active {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__help-text {\n\t\tgrid-column: content;\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-checkbox-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-help-text-line-height);\n\t\tmax-width: var(--_sds-checkbox-max-line-width);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-sm));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M13.168 4.91815C13.5585 4.52763 14.1915 4.52763 14.582 4.91815C14.9724 5.30869 14.9725 5.94173 14.582 6.33221L8.20703 12.7072C8.01952 12.8947 7.76516 13.0002 7.5 13.0002C7.23484 13.0002 6.98049 12.8947 6.79297 12.7072L3.41797 9.33221C3.02746 8.94171 3.0275 8.30868 3.41797 7.91815C3.80849 7.52763 4.44151 7.52763 4.83203 7.91815L7.5 10.5861L13.168 4.91815Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-lg));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M23.9592 9.29327C24.3497 8.9028 24.9828 8.90291 25.3733 9.29327C25.7637 9.68381 25.7638 10.3169 25.3733 10.7073L14.0403 22.0403C13.6498 22.4306 13.0167 22.4307 12.6262 22.0403L6.62622 16.0403C6.23592 15.6499 6.23593 15.0168 6.62622 14.6263C7.0167 14.236 7.6498 14.236 8.04028 14.6263L13.3333 19.9193L23.9592 9.29327Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}
1	+ {"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-block-gap: var(--sds-checkbox-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-checkbox-inline-gap: var(--sds-checkbox-inline-gap, var(--sds-spacing-3xs));\n\t\t--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));\n\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));\n\t\t--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));\n\t\t--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-icon-md));\n\t\t--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);\n\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));\n\n\t\t--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-checkbox-focus-color-outer: var(--sds-checkbox-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-checkbox-focus-color-inner: var(--sds-checkbox-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-checkbox-focus-spacing: var(--sds-checkbox-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-checkbox-focus-radius: var(--sds-checkbox-focus-radius, var(--sds-radius-xs));\n\n\t\t--_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-checkbox-grid-template-areas: var(--sds-checkbox-grid-template-area, 'input content');\n\t\t--_sds-checkbox-label-grid-area: var(--sds-checkbox-label-grid-area, content);\n\t\t--_sds-checkbox-input-grid-area: var(--sds-checkbox-input-grid-area, input);\n\t\t--_sds-checkbox-help-text-grid-area: var(--sds-checkbox-help-text-grid-area, content);\n\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox {\n\t\talign-items: start;\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-checkbox-font-family);\n\t\tgap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);\n\t\tgrid-template-areas: var(--_sds-checkbox-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-checkbox-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: var(--_sds-checkbox-focus-spacing) solid var(--_sds-checkbox-focus-color-outer);\n\t\t\toutline-offset: calc(var(--_sds-checkbox-focus-spacing) * 2);\n\t\t\tborder-radius: var(--_sds-checkbox-focus-radius);\n\t\t}\n\t}\n\n\t.sds-checkbox--error {\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t.sds-checkbox__label {\n\t\tgrid-column: var(--_sds-checkbox-label-grid-area);\n\t\talign-self: center;\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-checkbox-label-text-color);\n\t\tdisplay: inline-flex;\n\t\tfont-size: var(--_sds-checkbox-label-font-size);\n\t\tfont-weight: var(--_sds-checkbox-label-font-weight);\n\t\tgap: var(--_sds-checkbox-inline-gap);\n\t\tline-height: var(--_sds-checkbox-label-line-height);\n\t}\n\n\t.sds-checkbox__input {\n\t\tgrid-column: var(--_sds-checkbox-input-grid-area);\n\t\tgrid-row: 1;\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-checkbox-input-background-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-checkbox-input-size);\n\t\theight: var(--_sds-checkbox-input-size);\n\t\taspect-ratio: var(--_sds-checkbox-input-aspect-ratio);\n\t\tborder-width: var(--_sds-checkbox-input-border-width);\n\t\tborder-style: var(--_sds-checkbox-input-border-style);\n\t\tborder-color: var(--_sds-checkbox-input-border-color);\n\t\tborder-radius: var(--_sds-checkbox-input-border-radius);\n\t\tmargin: 0;\n\n\t\t&[readonly] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-checkbox__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: var(--_sds-checkbox-input-size);\n\t\t\t\theight: var(--_sds-checkbox-input-size);\n\t\t\t\tbackground-color: var(--_sds-checkbox-input-icon-color);\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'M17.7929 6.79302C18.1834 6.40249 18.8164 6.40249 19.2069 6.79302C19.5974 7.18354 19.5974 7.81656 19.2069 8.20708L10.7069 16.7071C10.5194 16.8946 10.2651 17 9.99989 17C9.7347 17 9.48038 16.8946 9.29286 16.7071L4.79286 12.2071C4.40236 11.8166 4.40241 11.1835 4.79286 10.793C5.18338 10.4025 5.81639 10.4025 6.20692 10.793L9.99989 14.586L17.7929 6.79302Z'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t}\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));\n\t\t\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-action-default, var(--sds-color-neutral-action-default)));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&[checked]:hover {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&[checked]:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&:active:not([readonly]) {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t&[checked]:hover {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&[checked]:active {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__help-text {\n\t\tgrid-column: var(--_sds-checkbox-help-text-grid-area);\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-checkbox-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-help-text-line-height);\n\t\tmax-width: var(--_sds-checkbox-max-line-width);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-sm));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M13.168 4.91815C13.5585 4.52763 14.1915 4.52763 14.582 4.91815C14.9724 5.30869 14.9725 5.94173 14.582 6.33221L8.20703 12.7072C8.01952 12.8947 7.76516 13.0002 7.5 13.0002C7.23484 13.0002 6.98049 12.8947 6.79297 12.7072L3.41797 9.33221C3.02746 8.94171 3.0275 8.30868 3.41797 7.91815C3.80849 7.52763 4.44151 7.52763 4.83203 7.91815L7.5 10.5861L13.168 4.91815Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-lg));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M23.9592 9.29327C24.3497 8.9028 24.9828 8.90291 25.3733 9.29327C25.7637 9.68381 25.7638 10.3169 25.3733 10.7073L14.0403 22.0403C13.6498 22.4306 13.0167 22.4307 12.6262 22.0403L6.62622 16.0403C6.23592 15.6499 6.23593 15.0168 6.62622 14.6263C7.0167 14.236 7.6498 14.236 8.04028 14.6263L13.3333 19.9193L23.9592 9.29327Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}

package/dist/sds-details/sds-details.styles.js CHANGED Viewed

@@ -100,7 +100,7 @@ export const styles = css `
 		transition: var(--_sds-details-icon-transition);
 	}
-	.sds-details[open] sds-icon {
+	.sds-details:not([open]) sds-icon {
 		transform: rotate(180deg);
 	}

package/dist/sds-details/sds-details.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-details.styles.js","sourceRoot":"","sources":["../../src/sds-details/sds-details.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-details-summary-padding: var(--sds-details-summary-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--_sds-details-summary-gap: var(--sds-details-summary-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-details-content-padding-start: var(--sds-details-content-padding-start, calc(var(--_sds-details-summary-padding) + var(--_sds-details-summary-gap) + var(--sds-components-icon-md)));\n\t\t--_sds-details-content-padding: var(--sds-details-content-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-content-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\n\t\t--_sds-details-focus-outline-width: var(--sds-details-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-details-focus-outline-color: var(--sds-details-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-details-focus-outline-offset: var(--sds-details-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-details-focus-inner-color: var(--sds-details-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-details-icon-transition: var(--sds-details-icon-transition, transform 0.2s ease);\n\n\t\t--_sds-details-border-color: var(--sds-details-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-details-border-bottom: var(--sds-details-border-bottom, solid 1px var(--_sds-details-border-color));\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t}\n\n\t.sds-details {\n\t\tcolor: var(--_sds-details-text-color);\n\n\t\t&:is([open]) {\n\t\t\t--_sds-details-summary-background-color: var(----_sds-details-summary-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t}\n\n\t\t&:not([data-standalone]) {\n\t\t\tborder-top: solid 1px var(--_sds-details-border-color);\n\t\t\tborder-bottom: var(--_sds-details-border-bottom);\n\t\t}\n\n\t\t/* Setting the border on the summary element preserves the border\n\t\t when the element has focus\n\t\t/\n\t\t&:is([data-standalone]) {\n\t\t\tsummary {\n\t\t\t\tborder-radius: var(--sds-radius-md);\n\t\t\t\tborder: solid 1px var(--_sds-details-border-color);\n\t\t\t}\n\n\t\t\t&:is([open]) {\n\t\t\t\t& summary {\n\t\t\t\t\tborder-bottom-left-radius: 0px;\n\t\t\t\t\tborder-bottom-right-radius: 0px;\n\t\t\t\t}\n\n\t\t\t\t& .sds-details__content {\n\t\t\t\t\tborder-left: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-right: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom-left-radius: var(--sds-radius-md);\n\t\t\t\t\tborder-bottom-right-radius: var(--sds-radius-md);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-details__summary {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: var(--_sds-details-summary-padding);\n\t\tbackground-color: var(--_sds-details-summary-background-color);\n\t\tgap: var(--_sds-details-summary-gap);\n\t\tlist-style: none;\n\t\tuser-select: none;\n\n\t\t&:hover {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-details-focus-inner-color);\n\t\t\toutline: var(--_sds-details-focus-outline-width) solid var(--_sds-details-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-details-focus-outline-offset);\n\t\t}\n\t}\n\n\t.sds-details__summary-content {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t}\n\n\tsds-icon {\n\t\ttransition: var(--_sds-details-icon-transition);\n\t}\n\n\t.sds-details[open] sds-icon {\n\t\ttransform: rotate(180deg);\n\t}\n\n\t.sds-details__content {\n\t\tpadding: var(--_sds-details-content-padding);\n\t\tpadding-inline-start: var(--_sds-details-content-padding-start);\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.sds-details__content {\n\t\t\tanimation: show-content-keyframes 200ms ease-in-out;\n\t\t}\n\t}\n\n\t@keyframes show-content-keyframes {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(-0.5rem);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t::slotted() {\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t}\n\n\t::slotted([slot='summary']) {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t}\n`;\n"]}
1	+ {"version":3,"file":"sds-details.styles.js","sourceRoot":"","sources":["../../src/sds-details/sds-details.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-details-summary-padding: var(--sds-details-summary-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--_sds-details-summary-gap: var(--sds-details-summary-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-details-content-padding-start: var(--sds-details-content-padding-start, calc(var(--_sds-details-summary-padding) + var(--_sds-details-summary-gap) + var(--sds-components-icon-md)));\n\t\t--_sds-details-content-padding: var(--sds-details-content-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-content-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\n\t\t--_sds-details-focus-outline-width: var(--sds-details-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-details-focus-outline-color: var(--sds-details-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-details-focus-outline-offset: var(--sds-details-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-details-focus-inner-color: var(--sds-details-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-details-icon-transition: var(--sds-details-icon-transition, transform 0.2s ease);\n\n\t\t--_sds-details-border-color: var(--sds-details-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-details-border-bottom: var(--sds-details-border-bottom, solid 1px var(--_sds-details-border-color));\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t}\n\n\t.sds-details {\n\t\tcolor: var(--_sds-details-text-color);\n\n\t\t&:is([open]) {\n\t\t\t--_sds-details-summary-background-color: var(----_sds-details-summary-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t}\n\n\t\t&:not([data-standalone]) {\n\t\t\tborder-top: solid 1px var(--_sds-details-border-color);\n\t\t\tborder-bottom: var(--_sds-details-border-bottom);\n\t\t}\n\n\t\t/* Setting the border on the summary element preserves the border\n\t\t when the element has focus\n\t\t/\n\t\t&:is([data-standalone]) {\n\t\t\tsummary {\n\t\t\t\tborder-radius: var(--sds-radius-md);\n\t\t\t\tborder: solid 1px var(--_sds-details-border-color);\n\t\t\t}\n\n\t\t\t&:is([open]) {\n\t\t\t\t& summary {\n\t\t\t\t\tborder-bottom-left-radius: 0px;\n\t\t\t\t\tborder-bottom-right-radius: 0px;\n\t\t\t\t}\n\n\t\t\t\t& .sds-details__content {\n\t\t\t\t\tborder-left: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-right: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom-left-radius: var(--sds-radius-md);\n\t\t\t\t\tborder-bottom-right-radius: var(--sds-radius-md);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-details__summary {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: var(--_sds-details-summary-padding);\n\t\tbackground-color: var(--_sds-details-summary-background-color);\n\t\tgap: var(--_sds-details-summary-gap);\n\t\tlist-style: none;\n\t\tuser-select: none;\n\n\t\t&:hover {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-details-focus-inner-color);\n\t\t\toutline: var(--_sds-details-focus-outline-width) solid var(--_sds-details-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-details-focus-outline-offset);\n\t\t}\n\t}\n\n\t.sds-details__summary-content {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t}\n\n\tsds-icon {\n\t\ttransition: var(--_sds-details-icon-transition);\n\t}\n\n\t.sds-details:not([open]) sds-icon {\n\t\ttransform: rotate(180deg);\n\t}\n\n\t.sds-details__content {\n\t\tpadding: var(--_sds-details-content-padding);\n\t\tpadding-inline-start: var(--_sds-details-content-padding-start);\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.sds-details__content {\n\t\t\tanimation: show-content-keyframes 200ms ease-in-out;\n\t\t}\n\t}\n\n\t@keyframes show-content-keyframes {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(-0.5rem);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t::slotted() {\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t}\n\n\t::slotted([slot='summary']) {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t}\n`;\n"]}

package/dist/sds-radio/sds-radio.styles.d.ts.map CHANGED Viewed

	@@ -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,~~yBAqMlB~~,CAAC"}
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"}

package/dist/sds-radio/sds-radio.styles.js CHANGED Viewed

@@ -23,6 +23,11 @@ export const styles = css `
 		--_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, transparent);
 		--_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);
+		--_sds-radio-grid-template-areas: var(--sds-radio-grid-template-area, 'input content');
+		--_sds-radio-label-grid-area: var(--sds-radio-label-grid-area, content);
+		--_sds-radio-input-grid-area: var(--sds-radio-input-grid-area, input);
+		--_sds-radio-help-text-grid-area: var(--sds-radio-help-text-grid-area, content);
 		display: inline-flex;
 		flex: 0 0 auto;
 	}
@@ -31,7 +36,7 @@ export const styles = css `
 		display: grid;
 		font-family: var(--_sds-radio-font-family);
 		gap: var(--_sds-radio-block-gap) var(--_sds-radio-inline-gap);
-		grid-template-areas: 'input content';
+		grid-template-areas: var(--_sds-radio-grid-template-areas);
 		grid-template-columns: auto 1fr;
 		width: fit-content;
@@ -53,7 +58,7 @@ export const styles = css `
 	}
 	.sds-radio__help-text {
-		grid-column: content;
+		grid-column: var(--_sds-radio-help-text-grid-area);
 		margin: 0;
 		color: var(--_sds-radio-help-text-color);
 		font-size: var(--_sds-radio-help-text-font-size);
@@ -70,7 +75,7 @@ export const styles = css `
 		font-weight: var(--_sds-radio-label-font-weight);
 		line-height: var(--_sds-radio-label-line-height);
-		grid-column: content;
+		grid-column: var(--_sds-radio-label-grid-area);
 	}
 	.sds-radio__input {
@@ -87,7 +92,7 @@ export const styles = css `
 		margin: 0;
 		position: relative;
-		grid-column: input;
+		grid-column: var(--_sds-radio-input-grid-area);
 		grid-row: 1;
 		&[readonly] {

package/dist/sds-radio/sds-radio.styles.js.map CHANGED Viewed

	@@ -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"]}

package/dist/sds-textfield/sds-textfield.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAOhD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,SAAS,GACX,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,KAAK,GACL,OAAO,GACP,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,QAAQ,GACR,OAAO,GACP,OAAO,GACP,UAAU,GACV,OAAO,GACP,MAAM,GACN,QAAQ,GACR,OAAO,GACP,OAAO,GACP,QAAQ,CAAC;AAEZ,KAAK,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAC1B,KAAK,GACL,IAAI,GACJ,MAAM,GACN,kBAAkB,GAClB,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,kBAAkB,GAClB,UAAU,GACV,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,eAAe,GACf,oBAAoB,GACpB,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,cAAc,GACd,aAAa,GACb,SAAS,GACT,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,WAAW,GACX,QAAQ,GACR,cAAc,GACd,aAAa,GACb,QAAQ,GACR,SAAS,GACT,sBAAsB,GACtB,oBAAoB,GACpB,UAAU,GACV,MAAM,GACN,UAAU,GACV,YAAY,GACZ,WAAW,GACX,KAAK,GACL,KAAK,GACL,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,WAAW,GACX,eAAe,GACf,MAAM,GACN,KAAK,GACL,OAAO,CAAC;AAEX,MAAM,WAAW,iBAAiB;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB;AAED,qBACa,YAAa,SAAQ,UAAU;IAE3C,OAAgB,MAAM,4BAAY;IAES,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAU;IACxD,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACpB,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;IACvB,QAAQ,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,iBAAiB,CAAC,eAAe,CAAC,CAAC;IAC7E,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAS;IACzB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAS;IACxE,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAChD,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAS;IACjD,OAAO,CAAC,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC3C,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAQ;IAGzE,OAAO,CAAC,OAAO,CAAS;IAER,OAAO,EAAG,gBAAgB,CAAC;IAEpD,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAE5C,OAAO,CAAC,aAAa,CAAuB;;IAQnC,iBAAiB;IAM1B,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAG/B;IAEF,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAUjC;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAI1B;IAEF,OAAO,CAAC,QAAQ,CAAC,cAAc,CAe7B;IAEF,iBAAiB;IASjB,MAAM,IAAI,IAAI;IAIL,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAItB,IAAI,cAAc,IAAI,MAAM,GAAG,IAAI,CAElC;IAED,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAItC;IAED,IAAI,YAAY,IAAI,MAAM,GAAG,IAAI,CAEhC;IACD,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAIpC;IAED,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,IAAI;IAMhG,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAK/B,MAAM;~~CAyCf~~;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}
1	+ {"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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"}

package/dist/sds-textfield/sds-textfield.js CHANGED Viewed

@@ -151,6 +151,7 @@ let SDSTextField = class SDSTextField extends LitElement {
 				${this.helpText ? html `<p class="sds-textfield__help-text">${this.helpText}</p>` : nothing}
 				<div class="sds-textfield__input-container">
 					<input
+						part="input"
 						class="sds-textfield__input"
 						type="${ifDefined(this.type)}"
 						id="sds-textfield"

package/dist/sds-textfield/sds-textfield.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-textfield.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textfield.styles';\n\nimport '../sds-alert/sds-alert';\nimport '../sds-icon/sds-icon';\nimport { SDS_SIZES } from '../types';\n\ntype InputType =\n\t\| 'hidden'\n\t\| 'text'\n\t\| 'search'\n\t\| 'tel'\n\t\| 'url'\n\t\| 'email'\n\t\| 'password'\n\t\| 'datetime'\n\t\| 'date'\n\t\| 'month'\n\t\| 'week'\n\t\| 'time'\n\t\| 'datetime-local'\n\t\| 'number'\n\t\| 'range'\n\t\| 'color'\n\t\| 'checkbox'\n\t\| 'radio'\n\t\| 'file'\n\t\| 'submit'\n\t\| 'image'\n\t\| 'reset'\n\t\| 'button';\n\ntype InputSize = Extract<SDS_SIZES, 'lg' \| 'md' \| 'sm'>;\nexport type AutocompleteTypes =\n\t\| 'off'\n\t\| 'on'\n\t\| 'name'\n\t\| 'honorific-prefix'\n\t\| 'given-name'\n\t\| 'additional-name'\n\t\| 'family-name'\n\t\| 'honorific-suffix'\n\t\| 'nickname'\n\t\| 'email'\n\t\| 'username'\n\t\| 'new-password'\n\t\| 'current-password'\n\t\| 'one-time-code'\n\t\| 'organization-title'\n\t\| 'organization'\n\t\| 'street-address'\n\t\| 'address-line1'\n\t\| 'address-line2'\n\t\| 'address-line3'\n\t\| 'address-level4'\n\t\| 'address-level3'\n\t\| 'address-level2'\n\t\| 'address-level1'\n\t\| 'country'\n\t\| 'country-name'\n\t\| 'postal-code'\n\t\| 'cc-name'\n\t\| 'cc-given-name'\n\t\| 'cc-additional-name'\n\t\| 'cc-family-name'\n\t\| 'cc-number'\n\t\| 'cc-exp'\n\t\| 'cc-exp-month'\n\t\| 'cc-exp-year'\n\t\| 'cc-csc'\n\t\| 'cc-type'\n\t\| 'transaction-currency'\n\t\| 'transaction-amount'\n\t\| 'language'\n\t\| 'bday'\n\t\| 'bday-day'\n\t\| 'bday-month'\n\t\| 'bday-year'\n\t\| 'sex'\n\t\| 'tel'\n\t\| 'tel-country-code'\n\t\| 'tel-national'\n\t\| 'tel-area-code'\n\t\| 'tel-local'\n\t\| 'tel-extension'\n\t\| 'impp'\n\t\| 'url'\n\t\| 'photo';\n\nexport interface SDSTextFieldProps {\n\ttype?: InputType;\n\tvalue?: string;\n\tname?: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tautocomplete?: AutocompleteTypes;\n\trequired?: boolean;\n\tpattern?: string;\n\tminlength?: number;\n\tmaxlength?: number;\n\tsize?: InputSize;\n}\n\n@guardedCustomElement('sds-textfield')\nexport class SDSTextField extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) type: SDSTextFieldProps['type'] = 'text';\n\t@property({ type: String }) value?: SDSTextFieldProps['value'];\n\t@property({ type: String, reflect: true }) name?: SDSTextFieldProps['name'];\n\t@property({ type: String, reflect: true }) label?: SDSTextFieldProps['label'];\n\t@property({ type: String, reflect: true }) placeholder?: SDSTextFieldProps['placeholder'];\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: SDSTextFieldProps['help-text'];\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: SDSTextFieldProps['error-message'];\n\t@property({ type: Boolean, reflect: true }) disabled: SDSTextFieldProps['disabled'] = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: SDSTextFieldProps['readonly'] = false;\n\t@property({ type: String, reflect: true }) autocomplete?: SDSTextFieldProps['autocomplete'];\n\t@property({ type: Boolean, reflect: true }) required: SDSTextFieldProps['required'] = false;\n\t@property({ type: String, reflect: true }) pattern?: SDSTextFieldProps['pattern'];\n\t@property({ type: Number, reflect: true }) minlength?: SDSTextFieldProps['minlength'];\n\t@property({ type: Number, reflect: true }) maxlength?: SDSTextFieldProps['maxlength'];\n\t@property({ type: String, reflect: true }) size: SDSTextFieldProps['size'] = 'md';\n\n\t// State\n\t@state() private hasIcon = false;\n\n\t@query('#sds-textfield') control!: HTMLInputElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tprivate _defaultValue: string \| null = null;\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() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? null;\n\t\tthis.internals.setFormValue(this._defaultValue);\n\t}\n\n\tprivate readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n\t};\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate readonly _handleInputChange = (event: InputEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled \|\| !(event.target instanceof HTMLInputElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = event.target.value;\n\t\tthis.internals.setFormValue(this.value === '' ? null : this.value);\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleKeyDown = (event: KeyboardEvent) => {\n\t\tif (event.key !== 'Enter') {\n\t\t\treturn;\n\t\t}\n\n\t\tevent.stopImmediatePropagation();\n\t\tconst form = this.internals?.form;\n\n\t\tif (form?.requestSubmit) {\n\t\t\t// Try to use requestSubmit as this will run form validation before submitting\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit#usage_notes\n\t\t\tform.requestSubmit();\n\t\t} else {\n\t\t\tform?.submit();\n\t\t}\n\t};\n\n\tformResetCallback() {\n\t\tthis.internals.setFormValue(this._defaultValue);\n\n\t\tconst newValue = this._defaultValue ?? '';\n\t\tthis.control.value = newValue;\n\t\tthis.value = newValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.control.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.control.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.control.click();\n\t}\n\n\tget selectionStart(): number \| null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number \| null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number \| null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number \| null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' \| 'backward' \| 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textfieldClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textfield\" class=\"sds-textfield__label\">${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"m\"></sds-icon>` : nothing}</sds-icon>${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\t\ttype=\"${ifDefined(this.type)}\"\n\t\t\t\t\t\tid=\"sds-textfield\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete as any)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t\t@keydown=\"${this._handleKeyDown}\"\n\t\t\t\t\t/>\n\t\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage ? html`<sds-alert variant=\"secondary\" data-palette=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textfield': SDSTextField;\n\t}\n}\n"]}
1	+ {"version":3,"file":"sds-textfield.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textfield.styles';\n\nimport '../sds-alert/sds-alert';\nimport '../sds-icon/sds-icon';\nimport { SDS_SIZES } from '../types';\n\ntype InputType =\n\t\| 'hidden'\n\t\| 'text'\n\t\| 'search'\n\t\| 'tel'\n\t\| 'url'\n\t\| 'email'\n\t\| 'password'\n\t\| 'datetime'\n\t\| 'date'\n\t\| 'month'\n\t\| 'week'\n\t\| 'time'\n\t\| 'datetime-local'\n\t\| 'number'\n\t\| 'range'\n\t\| 'color'\n\t\| 'checkbox'\n\t\| 'radio'\n\t\| 'file'\n\t\| 'submit'\n\t\| 'image'\n\t\| 'reset'\n\t\| 'button';\n\ntype InputSize = Extract<SDS_SIZES, 'lg' \| 'md' \| 'sm'>;\nexport type AutocompleteTypes =\n\t\| 'off'\n\t\| 'on'\n\t\| 'name'\n\t\| 'honorific-prefix'\n\t\| 'given-name'\n\t\| 'additional-name'\n\t\| 'family-name'\n\t\| 'honorific-suffix'\n\t\| 'nickname'\n\t\| 'email'\n\t\| 'username'\n\t\| 'new-password'\n\t\| 'current-password'\n\t\| 'one-time-code'\n\t\| 'organization-title'\n\t\| 'organization'\n\t\| 'street-address'\n\t\| 'address-line1'\n\t\| 'address-line2'\n\t\| 'address-line3'\n\t\| 'address-level4'\n\t\| 'address-level3'\n\t\| 'address-level2'\n\t\| 'address-level1'\n\t\| 'country'\n\t\| 'country-name'\n\t\| 'postal-code'\n\t\| 'cc-name'\n\t\| 'cc-given-name'\n\t\| 'cc-additional-name'\n\t\| 'cc-family-name'\n\t\| 'cc-number'\n\t\| 'cc-exp'\n\t\| 'cc-exp-month'\n\t\| 'cc-exp-year'\n\t\| 'cc-csc'\n\t\| 'cc-type'\n\t\| 'transaction-currency'\n\t\| 'transaction-amount'\n\t\| 'language'\n\t\| 'bday'\n\t\| 'bday-day'\n\t\| 'bday-month'\n\t\| 'bday-year'\n\t\| 'sex'\n\t\| 'tel'\n\t\| 'tel-country-code'\n\t\| 'tel-national'\n\t\| 'tel-area-code'\n\t\| 'tel-local'\n\t\| 'tel-extension'\n\t\| 'impp'\n\t\| 'url'\n\t\| 'photo';\n\nexport interface SDSTextFieldProps {\n\ttype?: InputType;\n\tvalue?: string;\n\tname?: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tautocomplete?: AutocompleteTypes;\n\trequired?: boolean;\n\tpattern?: string;\n\tminlength?: number;\n\tmaxlength?: number;\n\tsize?: InputSize;\n}\n\n@guardedCustomElement('sds-textfield')\nexport class SDSTextField extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) type: SDSTextFieldProps['type'] = 'text';\n\t@property({ type: String }) value?: SDSTextFieldProps['value'];\n\t@property({ type: String, reflect: true }) name?: SDSTextFieldProps['name'];\n\t@property({ type: String, reflect: true }) label?: SDSTextFieldProps['label'];\n\t@property({ type: String, reflect: true }) placeholder?: SDSTextFieldProps['placeholder'];\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: SDSTextFieldProps['help-text'];\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: SDSTextFieldProps['error-message'];\n\t@property({ type: Boolean, reflect: true }) disabled: SDSTextFieldProps['disabled'] = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: SDSTextFieldProps['readonly'] = false;\n\t@property({ type: String, reflect: true }) autocomplete?: SDSTextFieldProps['autocomplete'];\n\t@property({ type: Boolean, reflect: true }) required: SDSTextFieldProps['required'] = false;\n\t@property({ type: String, reflect: true }) pattern?: SDSTextFieldProps['pattern'];\n\t@property({ type: Number, reflect: true }) minlength?: SDSTextFieldProps['minlength'];\n\t@property({ type: Number, reflect: true }) maxlength?: SDSTextFieldProps['maxlength'];\n\t@property({ type: String, reflect: true }) size: SDSTextFieldProps['size'] = 'md';\n\n\t// State\n\t@state() private hasIcon = false;\n\n\t@query('#sds-textfield') control!: HTMLInputElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tprivate _defaultValue: string \| null = null;\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() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? null;\n\t\tthis.internals.setFormValue(this._defaultValue);\n\t}\n\n\tprivate readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n\t};\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate readonly _handleInputChange = (event: InputEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled \|\| !(event.target instanceof HTMLInputElement)) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = event.target.value;\n\t\tthis.internals.setFormValue(this.value === '' ? null : this.value);\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleKeyDown = (event: KeyboardEvent) => {\n\t\tif (event.key !== 'Enter') {\n\t\t\treturn;\n\t\t}\n\n\t\tevent.stopImmediatePropagation();\n\t\tconst form = this.internals?.form;\n\n\t\tif (form?.requestSubmit) {\n\t\t\t// Try to use requestSubmit as this will run form validation before submitting\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit#usage_notes\n\t\t\tform.requestSubmit();\n\t\t} else {\n\t\t\tform?.submit();\n\t\t}\n\t};\n\n\tformResetCallback() {\n\t\tthis.internals.setFormValue(this._defaultValue);\n\n\t\tconst newValue = this._defaultValue ?? '';\n\t\tthis.control.value = newValue;\n\t\tthis.value = newValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.control.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.control.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.control.click();\n\t}\n\n\tget selectionStart(): number \| null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number \| null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number \| null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number \| null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' \| 'backward' \| 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textfieldClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textfield\" class=\"sds-textfield__label\">${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"m\"></sds-icon>` : nothing}</sds-icon>${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tpart=\"input\"\n\t\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\t\ttype=\"${ifDefined(this.type)}\"\n\t\t\t\t\t\tid=\"sds-textfield\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\t.value=\"${this.value ?? ''}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete as any)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t\t@keydown=\"${this._handleKeyDown}\"\n\t\t\t\t\t/>\n\t\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage ? html`<sds-alert variant=\"secondary\" data-palette=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textfield': SDSTextField;\n\t}\n}\n"]}

package/dist/sds-textfield/sds-textfield.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-textfield.styles.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,~~yBAsKlB~~,CAAC"}
1	+ {"version":3,"file":"sds-textfield.styles.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAuKlB,CAAC"}

package/dist/sds-textfield/sds-textfield.styles.js CHANGED Viewed

@@ -51,6 +51,8 @@ export const styles = css `
 		.sds-textfield__input-container {
 			position: relative;
+			font-size: var(--_sds-textfield-font-size);
+			max-width: var(--_sds-textfield-max-width);
 		}
 		.sds-textfield__input {
@@ -65,7 +67,6 @@ export const styles = css `
 			border-radius: var(--_sds-textfield-border-radius);
 			border: var(--_sds-textfield-border-width) solid var(--_sds-textfield-border-color);
 			background: var(--_sds-textfield-background-color);
-			max-width: var(--_sds-textfield-max-width);
 			width: 100%;
 			&:hover {

package/dist/sds-textfield/sds-textfield.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sds-textfield.styles.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKxB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-background-default, var(--sds-color-neutral-background-default)));\n\t\t--_sds-textfield-text-color: var(--sds-textfield-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-textfield-border-width: var(--sds-textfield-border-width, var(--sds-border-sm));\n\t\t--_sds-textfield-border-radius: var(--sds-textfield-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-textfield-font-family: var(--sds-textfield-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-textfield-font-weight: var(--sds-textfield-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-md));\n\n\t\t--_sds-textfield-gap: var(--sds-textfield-gap, var(--sds-spacing-3xs));\n\t\t--_sds-textfield-padding-block: var(--sds-textfield-padding-block, 0);\n\t\t--_sds-textfield-padding-inline: var(--sds-textfield-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-md)));\n\t\t--_sds-textfield-disabled-opacity: var(--sds-textfield-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-textfield-max-width: var(--sds-textfield-input-max-width, var(--sds-typography-max-line-width, 80ch));\n\n\t\t--_sds-textfield-label-text-color: var(--sds-textfield-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-textfield-label-font-weight: var(--sds-textfield-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textfield-helptext-text-color: var(--sds-textfield-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-textfield-helptext-font-weight: var(--sds-textfield-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textfield-focus-color: var(--sds-textfield-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-textfield-focus-inner-color: var(--sds-textfield-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-textfield-focus-spacing: var(--sds-textfield-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\t--_sds-textfield-icon-right: var(--sds-textfield-icon-right, var(--sds-spacing-xs));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-3xs));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-textfield {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-textfield-gap);\n\t\tfont-family: var(--_sds-textfield-font-family);\n\n\t\t.sds-textfield__input-container {\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.sds-textfield__input {\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--_sds-textfield-text-color);\n\t\t\tpadding: var(--_sds-textfield-padding-block) var(--_sds-textfield-padding-inline);\n\t\t\tline-height: var(--_sds-textfield-line-height);\n\t\t\tfont-size: var(--_sds-textfield-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-font-weight);\n\t\t\tfont-family: var(--_sds-textfield-font-family);\n\t\t\tmin-height: var(--_sds-textfield-min-height);\n\t\t\tborder-radius: var(--_sds-textfield-border-radius);\n\t\t\tborder: var(--_sds-textfield-border-width) solid var(--_sds-textfield-border-color);\n\t\t\tbackground: var(--_sds-textfield-background-color);\n\t\t\~~tmax-width: var(--_sds-textfield-max-width);\n\t\t\~~twidth: 100%;\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-border-strong, var(--sds-color-neutral-border-strong)));\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-textfield-focus-inner-color);\n\t\t\t\toutline: 3px solid var(--_sds-textfield-focus-color);\n\t\t\t\toutline-offset: 3px;\n\t\t\t}\n\t\t}\n\n\t\t.sds-textfield__label {\n\t\t\tcolor: var(--_sds-textfield-text-color);\n\t\t\tfont-size: var(--_sds-textfield-label-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-label-font-weight);\n\t\t\tline-height: var(--_sds-textfield-label-line-height);\n\t\t}\n\n\t\t.sds-textfield__label:has(sds-icon) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tgap: var(--_sds-textfield-gap);\n\t\t}\n\n\t\t.sds-textfield__help-text {\n\t\t\tdisplay: block;\n\t\t\tcolor: var(--_sds-textfield-helptext-text-color);\n\t\t\tfont-size: var(--_sds-textfield-helptext-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-helptext-font-weight);\n\t\t\tline-height: var(--_sds-textfield-helptext-line-height);\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t.sds-textfield--error {\n\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t& .sds-textfield__input:hover,\n\t\t& .sds-textfield__input:hover {\n\t\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-alert-danger-border-default));\n\t\t}\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-textfield-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t.sds-textfield--has-icon {\n\t\t.sds-textfield__input {\n\t\t\tpadding-right: var(--_sds-textfield-padding-icon);\n\t\t}\n\t}\n\n\t::slotted([slot='after']) {\n\t\tposition: absolute;\n\t\ttop: var(--_sds-textfield-icon-top);\n\t\tright: var(--_sds-textfield-icon-right);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-sm));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, calc((var(--_sds-textfield-min-height) - var(--sds-components-icon-sm)) / 2));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-sm)));\n\n\t\t&:has(sds-icon:not([size])) {\n\t\t\t--sds-icon-size: var(--sds-textfield-icon-size, var(--sds-components-icon-sm));\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-lg));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-3xs));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-lg)));\n\n\t\t&:has(sds-icon:not([size])) {\n\t\t\t--sds-icon-size: var(--sds-textfield-icon-size, var(--sds-components-icon-lg));\n\t\t}\n\t}\n`;\n"]}
1	+ {"version":3,"file":"sds-textfield.styles.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-background-default, var(--sds-color-neutral-background-default)));\n\t\t--_sds-textfield-text-color: var(--sds-textfield-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-textfield-border-width: var(--sds-textfield-border-width, var(--sds-border-sm));\n\t\t--_sds-textfield-border-radius: var(--sds-textfield-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-textfield-font-family: var(--sds-textfield-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-textfield-font-weight: var(--sds-textfield-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-md));\n\n\t\t--_sds-textfield-gap: var(--sds-textfield-gap, var(--sds-spacing-3xs));\n\t\t--_sds-textfield-padding-block: var(--sds-textfield-padding-block, 0);\n\t\t--_sds-textfield-padding-inline: var(--sds-textfield-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-md)));\n\t\t--_sds-textfield-disabled-opacity: var(--sds-textfield-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-textfield-max-width: var(--sds-textfield-input-max-width, var(--sds-typography-max-line-width, 80ch));\n\n\t\t--_sds-textfield-label-text-color: var(--sds-textfield-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-textfield-label-font-weight: var(--sds-textfield-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textfield-helptext-text-color: var(--sds-textfield-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-textfield-helptext-font-weight: var(--sds-textfield-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-textfield-focus-color: var(--sds-textfield-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-textfield-focus-inner-color: var(--sds-textfield-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-textfield-focus-spacing: var(--sds-textfield-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\t--_sds-textfield-icon-right: var(--sds-textfield-icon-right, var(--sds-spacing-xs));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-3xs));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-textfield {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-textfield-gap);\n\t\tfont-family: var(--_sds-textfield-font-family);\n\n\t\t.sds-textfield__input-container {\n\t\t\tposition: relative;\n\t\t\tfont-size: var(--_sds-textfield-font-size);\n\t\t\tmax-width: var(--_sds-textfield-max-width);\n\t\t}\n\n\t\t.sds-textfield__input {\n\t\t\tbox-sizing: border-box;\n\t\t\tcolor: var(--_sds-textfield-text-color);\n\t\t\tpadding: var(--_sds-textfield-padding-block) var(--_sds-textfield-padding-inline);\n\t\t\tline-height: var(--_sds-textfield-line-height);\n\t\t\tfont-size: var(--_sds-textfield-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-font-weight);\n\t\t\tfont-family: var(--_sds-textfield-font-family);\n\t\t\tmin-height: var(--_sds-textfield-min-height);\n\t\t\tborder-radius: var(--_sds-textfield-border-radius);\n\t\t\tborder: var(--_sds-textfield-border-width) solid var(--_sds-textfield-border-color);\n\t\t\tbackground: var(--_sds-textfield-background-color);\n\t\t\twidth: 100%;\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-border-strong, var(--sds-color-neutral-border-strong)));\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-textfield-focus-inner-color);\n\t\t\t\toutline: 3px solid var(--_sds-textfield-focus-color);\n\t\t\t\toutline-offset: 3px;\n\t\t\t}\n\t\t}\n\n\t\t.sds-textfield__label {\n\t\t\tcolor: var(--_sds-textfield-text-color);\n\t\t\tfont-size: var(--_sds-textfield-label-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-label-font-weight);\n\t\t\tline-height: var(--_sds-textfield-label-line-height);\n\t\t}\n\n\t\t.sds-textfield__label:has(sds-icon) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tgap: var(--_sds-textfield-gap);\n\t\t}\n\n\t\t.sds-textfield__help-text {\n\t\t\tdisplay: block;\n\t\t\tcolor: var(--_sds-textfield-helptext-text-color);\n\t\t\tfont-size: var(--_sds-textfield-helptext-font-size);\n\t\t\tfont-weight: var(--_sds-textfield-helptext-font-weight);\n\t\t\tline-height: var(--_sds-textfield-helptext-line-height);\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t.sds-textfield--error {\n\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t& .sds-textfield__input:hover,\n\t\t& .sds-textfield__input:hover {\n\t\t\t--_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-alert-danger-border-default));\n\t\t}\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-textfield-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t.sds-textfield--has-icon {\n\t\t.sds-textfield__input {\n\t\t\tpadding-right: var(--_sds-textfield-padding-icon);\n\t\t}\n\t}\n\n\t::slotted([slot='after']) {\n\t\tposition: absolute;\n\t\ttop: var(--_sds-textfield-icon-top);\n\t\tright: var(--_sds-textfield-icon-right);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-sm));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, calc((var(--_sds-textfield-min-height) - var(--sds-components-icon-sm)) / 2));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-sm)));\n\n\t\t&:has(sds-icon:not([size])) {\n\t\t\t--sds-icon-size: var(--sds-textfield-icon-size, var(--sds-components-icon-sm));\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-textfield-min-height: var(--sds-textfield-height, var(--sds-components-button-lg));\n\t\t--_sds-textfield-font-size: var(--sds-textfield-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-textfield-line-height: var(--sds-textfield-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-textfield-icon-top: var(--sds-textfield-icon-top, var(--sds-spacing-3xs));\n\t\t--_sds-textfield-padding-icon: var(--sds-textfield-padding-icon, calc(var(--sds-spacing-xs) + var(--sds-components-icon-lg)));\n\n\t\t&:has(sds-icon:not([size])) {\n\t\t\t--sds-icon-size: var(--sds-textfield-icon-size, var(--sds-components-icon-lg));\n\t\t}\n\t}\n`;\n"]}