@politiet/sheriff-web-components 1.3.0 → 2.0.0-beta.1

package/dist/sds-radio-group/sds-radio-group.styles.js

@@ -1,47 +1,97 @@
 import { css } from 'lit';
 export const styles = css `
+	:host {
+		--_sds-radio-group-gap: var(--sds-radio-group-gap, var(--sds-spacing-xs));
+		--_sds-radio-group-row-gap: var(--sds-radio-group-row-gap, var(--sds-spacing-md));
+		--_sds-radio-group-font-family: var(--sds-radio-group-font-family, var(--sds-typography-font-family-roboto));
+		--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-md));
+		--_sds-radio-group-text-color: var(--sds-radio-group-text-color, var(--sds-color-neutral-text-default));
+		--_sds-radio-group-max-line-width: var(--sds-radio-group-max-line-width, var(--sds-typography-max-line-width));
+		--_sds-radio-group-disabled-opacity: var(--sds-radio-group-disabled-opacity, var(--sds-color-states-disabled-opacity));
+
+		--_sds-radio-group-legend-font-weight: var(--sds-radio-group-legend-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));
+		--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-md));
+		--_sds_radio-group-legend-help-text-gap: var(--sds-radio-group-legend-help-text-gap, var(--sds-spacing-4xs));
+
+		--_sds-radio-group-help-text-color: var(--sds-radio-group-help-text-color, var(--sds-color-neutral-text-subtle));
+		--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-md));
+		--_sds-radio-group-help-text-font-weight: var(--sds-radio-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
+		--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));
+
+		display: block;
+		contain: layout style;
+		box-sizing: border-box;
+	}
+
 	.sds-radio-group {
 		border: 0;
 		margin: 0;
 		padding: 0;
+		color: var(--_sds-radio-group-text-color);
+		font-family: var(--_sds-radio-group-font-family);
+		font-size: var(--_sds-radio-group-font-size);
+	}
+
+	.sds-radio-group--disabled {
+		.sds-radio-group__legend,
+		.sds-radio-group__help-text,
+		sds-alert {
+			opacity: var(--_sds-radio-group-disabled-opacity);
+		}
 	}
 
 	.sds-radio-group__legend {
-		color: var(--sds-color-semantic-text-default);
-		font-family: var(--sds-typography-font-family);
-		font-size: 1rem;
-		font-weight: 600;
-		line-height: 1.5;
-		margin: 0 0 var(--sds-spacing-2) 0;
-		max-width: var(--sds-typography-max-line-width);
+		display: flex;
+		align-items: center;
+		gap: var(--sds-spacing-5xs);
+		margin: 0;
 		padding: 0;
+		font-weight: var(--_sds-radio-group-legend-font-weight);
+		line-height: var(--_sds-radio-group-legend-line-height);
+		max-width: var(--_sds-radio-group-max-line-width);
+
+		+ .sds-radio-group__help-text {
+			margin-block-start: var(--_sds_radio-group-legend-help-text-gap);
+		}
 	}
 
 	.sds-radio-group__help-text {
-		color: var(--sds-color-semantic-text-subtle);
-		font-family: var(--sds-typography-font-family);
-		font-size: 1rem;
-		font-weight: 400;
-		line-height: 1.25rem;
 		margin: 0;
-		max-width: var(--sds-typography-max-line-width);
+		color: var(--_sds-radio-group-help-text-color);
+		font-size: var(--_sds-radio-group-help-text-font-size);
+		font-weight: var(--_sds-radio-group-help-text-font-weight);
+		line-height: var(--_sds-radio-group-help-text-line-height);
+		max-width: var(--_sds-radio-group-max-line-width);
 	}
 
 	.sds-radio-group__radios {
 		display: flex;
 		flex-direction: column;
-		gap: var(--sds-spacing-5);
-		margin-top: var(--sds-spacing-3);
+		gap: var(--_sds-radio-group-gap);
+		margin-top: var(--_sds-radio-group-gap);
+
+		&.sds-radio-group--row {
+			flex-direction: row;
+			gap: var(--_sds-radio-group-row-gap);
+		}
 	}
 
-	.sds-radio-group__error-message {
-		margin: var(--sds-spacing-5) 0 0;
-		max-width: var(--sds-typography-max-line-width);
-		align-items: flex-start;
-		color: var(--sds-color-semantic-text-default);
-		display: flex;
-		line-height: 1.5rem;
-		gap: var(--sds-spacing-2);
+	sds-alert {
+		margin-top: var(--_sds-radio-group-gap);
+	}
+
+	:host([size='sm']) {
+		--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-sm));
+		--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));
+		--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-sm));
+		--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));
+	}
+
+	:host([size='lg']) {
+		--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-lg));
+		--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));
+		--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-lg));
+		--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));
 	}
 `;
 //# sourceMappingURL=sds-radio-group.styles.js.map

package/dist/sds-radio-group/sds-radio-group.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-radio-group.styles.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t.sds-radio-group {\n\t\tborder: 0;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.sds-radio-group__legend {\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 600;\n\t\tline-height: 1.5;\n\t\tmargin: 0 0 var(--sds-spacing-2) 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding: 0;\n\t}\n\n\t.sds-radio-group__help-text {\n\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 400;\n\t\tline-height: 1.25rem;\n\t\tmargin: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t}\n\n\t.sds-radio-group__radios {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--sds-spacing-5);\n\t\tmargin-top: var(--sds-spacing-3);\n\t}\n\n\t.sds-radio-group__error-message {\n\t\tmargin: var(--sds-spacing-5) 0 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\talign-items: flex-start;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tdisplay: flex;\n\t\tline-height: 1.5rem;\n\t\tgap: var(--sds-spacing-2);\n\t}\n`;\n"]}
+{"version":3,"file":"sds-radio-group.styles.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-radio-group-gap: var(--sds-radio-group-gap, var(--sds-spacing-xs));\n\t\t--_sds-radio-group-row-gap: var(--sds-radio-group-row-gap, var(--sds-spacing-md));\n\t\t--_sds-radio-group-font-family: var(--sds-radio-group-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-radio-group-text-color: var(--sds-radio-group-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-radio-group-max-line-width: var(--sds-radio-group-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-radio-group-disabled-opacity: var(--sds-radio-group-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--_sds-radio-group-legend-font-weight: var(--sds-radio-group-legend-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds_radio-group-legend-help-text-gap: var(--sds-radio-group-legend-help-text-gap, var(--sds-spacing-4xs));\n\n\t\t--_sds-radio-group-help-text-color: var(--sds-radio-group-help-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-radio-group-help-text-font-weight: var(--sds-radio-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\tdisplay: block;\n\t\tcontain: layout style;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-radio-group {\n\t\tborder: 0;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tcolor: var(--_sds-radio-group-text-color);\n\t\tfont-family: var(--_sds-radio-group-font-family);\n\t\tfont-size: var(--_sds-radio-group-font-size);\n\t}\n\n\t.sds-radio-group--disabled {\n\t\t.sds-radio-group__legend,\n\t\t.sds-radio-group__help-text,\n\t\tsds-alert {\n\t\t\topacity: var(--_sds-radio-group-disabled-opacity);\n\t\t}\n\t}\n\n\t.sds-radio-group__legend {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--sds-spacing-5xs);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tfont-weight: var(--_sds-radio-group-legend-font-weight);\n\t\tline-height: var(--_sds-radio-group-legend-line-height);\n\t\tmax-width: var(--_sds-radio-group-max-line-width);\n\n\t\t+ .sds-radio-group__help-text {\n\t\t\tmargin-block-start: var(--_sds_radio-group-legend-help-text-gap);\n\t\t}\n\t}\n\n\t.sds-radio-group__help-text {\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-radio-group-help-text-color);\n\t\tfont-size: var(--_sds-radio-group-help-text-font-size);\n\t\tfont-weight: var(--_sds-radio-group-help-text-font-weight);\n\t\tline-height: var(--_sds-radio-group-help-text-line-height);\n\t\tmax-width: var(--_sds-radio-group-max-line-width);\n\t}\n\n\t.sds-radio-group__radios {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-radio-group-gap);\n\t\tmargin-top: var(--_sds-radio-group-gap);\n\n\t\t&.sds-radio-group--row {\n\t\t\tflex-direction: row;\n\t\t\tgap: var(--_sds-radio-group-row-gap);\n\t\t}\n\t}\n\n\tsds-alert {\n\t\tmargin-top: var(--_sds-radio-group-gap);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}

package/dist/sds-switch/sds-switch.d.ts

@@ -1,10 +1,14 @@
 import { LitElement } from 'lit';
-type SwitchSize = 's' | 'l';
+import { SDS_SIZES } from '../types';
+import '../sds-icon/sds-icon';
+type v2SwitchSizes = Extract<SDS_SIZES, 'sm' | 'md' | 'lg'>;
+type SwitchSize = v2SwitchSizes | 's' | 'l';
 export interface SDSSwitchProps {
     disabled?: boolean;
     label?: string;
     'hide-label'?: boolean;
     name?: string;
+    readonly?: boolean;
     reverse?: boolean;
     checked?: boolean;
     size?: SwitchSize;
@@ -29,6 +33,7 @@ export declare class SDSSwitch extends LitElement {
     name?: string;
     reverse: boolean;
     checked: boolean;
+    readOnly: boolean;
     size: SwitchSize;
     control: HTMLInputElement;
     static formAssociated: boolean;
@@ -42,6 +47,7 @@ export declare class SDSSwitch extends LitElement {
     private readonly _handleChange;
     private readonly _handleFocus;
     private readonly _handleBlur;
+    private readonly getIconSize;
     get value(): string;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/sds-switch/sds-switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sds-switch.d.ts","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,CAAC;AAE5B,MAAM,WAAW,cAAc;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC5E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC3E;AAED,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAY;IAEU,QAAQ,EAAE,OAAO,CAAS;IAC3B,KAAK,EAAE,MAAM,CAAM;IACO,SAAS,EAAE,OAAO,CAAS;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAS;IACzB,OAAO,EAAE,OAAO,CAAS;IAC1B,IAAI,EAAE,UAAU,CAAO;IAE/C,OAAO,EAAG,gBAAgB,CAAC;IAE9C,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAC5C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB,IAAI,IAAI;IAMzB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAO1E,iBAAiB;IAMjB,wBAAwB,CAAC,KAAK,EAAE,OAAO;IAIvC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAa5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAU3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAU1B;IAEF,IAAI,KAAK,IAAI,MAAM,CAElB;IAEQ,MAAM;CA2Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
+{"version":3,"file":"sds-switch.d.ts","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,OAAO,sBAAsB,CAAC;AAE9B,KAAK,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAC5D,KAAK,UAAU,GAAG,aAAa,GAAG,GAAG,GAAG,GAAG,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC5E,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC3E;AAED,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAY;IAEU,QAAQ,EAAE,OAAO,CAAS;IAC3B,KAAK,EAAE,MAAM,CAAM;IACO,SAAS,EAAE,OAAO,CAAS;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAS;IACzB,OAAO,EAAE,OAAO,CAAS;IACF,QAAQ,EAAE,OAAO,CAAS;IAClD,IAAI,EAAE,UAAU,CAAQ;IAEhD,OAAO,EAAG,gBAAgB,CAAC;IAE9C,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAC5C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB,IAAI,IAAI;IAMzB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAO1E,iBAAiB;IAMjB,wBAAwB,CAAC,KAAK,EAAE,OAAO;IAIvC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAa5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAU3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAU1B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAW1B;IAEF,IAAI,KAAK,IAAI,MAAM,CAElB;IAEQ,MAAM;CA2Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/dist/sds-switch/sds-switch.js

@@ -4,12 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
 import { styles } from './sds-switch.styles';
+import '../sds-icon/sds-icon';
 let SDSSwitch = class SDSSwitch extends LitElement {
     constructor() {
         super();
@@ -18,11 +19,12 @@ let SDSSwitch = class SDSSwitch extends LitElement {
         this.hideLabel = false;
         this.reverse = false;
         this.checked = false;
-        this.size = 'l';
+        this.readOnly = false;
+        this.size = 'md';
         this._initialChecked = false;
         this._handleChange = (event) => {
             event.stopImmediatePropagation();
-            if (!this.disabled) {
+            if (!this.disabled && !this.disabled) {
                 const elem = event.target;
                 this.checked = elem.checked;
                 this.internals.setFormValue(this.checked ? 'on' : 'off');
@@ -34,7 +36,7 @@ let SDSSwitch = class SDSSwitch extends LitElement {
         };
         this._handleFocus = (event) => {
             event.stopImmediatePropagation();
-            if (!this.disabled) {
+            if (!this.disabled && !this.disabled) {
                 this.dispatchEvent(new CustomEvent('focus', {
                     bubbles: true,
                     composed: true,
@@ -43,13 +45,25 @@ let SDSSwitch = class SDSSwitch extends LitElement {
         };
         this._handleBlur = (event) => {
             event.stopImmediatePropagation();
-            if (!this.disabled) {
+            if (!this.disabled && !this.disabled) {
                 this.dispatchEvent(new CustomEvent('blur', {
                     bubbles: true,
                     composed: true,
                 }));
             }
         };
+        this.getIconSize = () => {
+            switch (this.size) {
+                case 'sm':
+                case 'md':
+                case 'lg':
+                    return this.size;
+                case 'l':
+                    return 'lg';
+                case 's':
+                    return 'sm';
+            }
+        };
         this.internals = this.attachInternals();
         this.attachShadow({ mode: 'open', delegatesFocus: true });
     }
@@ -78,7 +92,6 @@ let SDSSwitch = class SDSSwitch extends LitElement {
     render() {
         const switchClasses = {
             'sds-switch': true,
-            'sds-switch--small': this.size === 's',
         };
         const labelClasses = {
             'sds-switch__label': true,
@@ -89,16 +102,17 @@ let SDSSwitch = class SDSSwitch extends LitElement {
 			id="control"
 			type="checkbox"
 			role="switch"
+			?readonly="${this.readOnly}"
+			?disabled="${this.disabled}"
 			?checked="${this.checked}"
 			name="${ifDefined(this.name)}"
 			@change="${this._handleChange}"
 			@focus="${this._handleFocus}"
 			@blur="${this._handleBlur}"
 		/>`;
-        const labelTemplate = html `<label class="${classMap(labelClasses)}" for="control">${this.label}</label>`;
-        return html `<div class="${classMap(switchClasses)}">
-			${this.reverse ? [labelTemplate, inputTemplate] : [inputTemplate, labelTemplate]}
-		</div>`;
+        const iconTemplate = this.readOnly ? html `<sds-icon name="lock-material-filled" size="${this.getIconSize()}"></sds-icon>` : nothing;
+        const labelTemplate = html `<label class="${classMap(labelClasses)}" for="control">${iconTemplate}${this.label}</label>`;
+        return html `<div class="${classMap(switchClasses)}">${this.reverse ? [labelTemplate, inputTemplate] : [inputTemplate, labelTemplate]}</div>`;
     }
 };
 SDSSwitch.styles = [styles];
@@ -121,6 +135,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SDSSwitch.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'readonly', reflect: true })
+], SDSSwitch.prototype, "readOnly", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SDSSwitch.prototype, "size", void 0);

package/dist/sds-switch/sds-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-switch.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAkBtC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAiBxC;QACC,KAAK,EAAE,CAAC;QAfmC,aAAQ,GAAY,KAAK,CAAC;QAC3B,UAAK,GAAW,EAAE,CAAC;QACO,cAAS,GAAY,KAAK,CAAC;QAEpD,YAAO,GAAY,KAAK,CAAC;QACzB,YAAO,GAAY,KAAK,CAAC;QAC1B,SAAI,GAAe,GAAG,CAAC;QAM1D,oBAAe,GAAY,KAAK,CAAC;QA+BxB,kBAAa,GAAG,CAAC,KAAY,EAAE,EAAE;YACjD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpB,MAAM,IAAI,GAAG,KAAK,CAAC,MAA0B,CAAC;gBAC9C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;gBAC5B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;gBACzD,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACzB,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACd,CAAC,CACF,CAAC;YACH,CAAC;QACF,CAAC,CAAC;QAEe,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YAChD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpB,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,OAAO,EAAE;oBACxB,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACd,CAAC,CACF,CAAC;YACH,CAAC;QACF,CAAC,CAAC;QAEe,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YAC/C,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpB,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,MAAM,EAAE;oBACvB,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACd,CAAC,CACF,CAAC;YACH,CAAC;QACF,CAAC,CAAC;QAhED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3D,CAAC;IAEQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAC1D,CAAC;IAEQ,OAAO,CAAC,iBAAyD;QACzE,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YACpC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAC1D,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;QACpC,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC;QAC5C,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAClE,CAAC;IAED,wBAAwB,CAAC,KAAc;QACtC,IAAI,CAAC,OAAO,GAAG,KAAgB,CAAC;IACjC,CAAC;IAyCD,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IACpC,CAAC;IAEQ,MAAM;QACd,MAAM,aAAa,GAAG;YACrB,YAAY,EAAE,IAAI;YAClB,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;SACtC,CAAC;QAEF,MAAM,YAAY,GAAG;YACpB,mBAAmB,EAAE,IAAI;YACzB,2BAA2B,EAAE,IAAI,CAAC,SAAS;SAC3C,CAAC;QAEF,MAAM,aAAa,GAAG,IAAI,CAAA;;;;;eAKb,IAAI,CAAC,OAAO;WAChB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;cACjB,IAAI,CAAC,aAAa;aACnB,IAAI,CAAC,YAAY;YAClB,IAAI,CAAC,WAAW;KACvB,CAAC;QACJ,MAAM,aAAa,GAAG,IAAI,CAAA,iBAAiB,QAAQ,CAAC,YAAY,CAAC,mBAAmB,IAAI,CAAC,KAAK,UAAU,CAAC;QACzG,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,aAAa,CAAC;KAC9C,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,aAAa,CAAC;SAC1E,CAAC;IACT,CAAC;;AAlHe,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAY3B,wBAAc,GAAG,IAAI,AAAP,CAAQ;AAVe;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA2B;AAC3B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAoB;AACO;IAApE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CAA4B;AACrD;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AACb;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAA0B;AACzB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAA0B;AAC1B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAwB;AAE/C;IAAlB,KAAK,CAAC,UAAU,CAAC;0CAA4B;AAXlC,SAAS;IADrB,oBAAoB,CAAC,YAAY,CAAC;GACtB,SAAS,CAoHrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-switch.styles';\n\ntype SwitchSize = 's' | 'l';\n\nexport interface SDSSwitchProps {\n\tdisabled?: boolean;\n\tlabel?: string;\n\t'hide-label'?: boolean;\n\tname?: string;\n\treverse?: boolean;\n\tchecked?: boolean;\n\tsize?: SwitchSize;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonFocus?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonBlur?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n}\n\n@guardedCustomElement('sds-switch')\nexport class SDSSwitch extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: String, reflect: true }) label: string = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: Boolean, reflect: true }) reverse: boolean = false;\n\t@property({ type: Boolean, reflect: true }) checked: boolean = false;\n\t@property({ type: String, reflect: true }) size: SwitchSize = 'l';\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis.control.checked = this.checked;\n\t\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this._initialChecked ? 'on' : 'off');\n\t}\n\n\tformStateRestoreCallback(state: unknown) {\n\t\tthis.checked = state as boolean;\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('focus', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('blur', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tget value(): string {\n\t\treturn this.checked ? 'on' : 'off';\n\t}\n\n\toverride render() {\n\t\tconst switchClasses = {\n\t\t\t'sds-switch': true,\n\t\t\t'sds-switch--small': this.size === 's',\n\t\t};\n\n\t\tconst labelClasses = {\n\t\t\t'sds-switch__label': true,\n\t\t\t'sds-switch__label--hidden': this.hideLabel,\n\t\t};\n\n\t\tconst inputTemplate = html`<input\n\t\t\tclass=\"sds-switch__input\"\n\t\t\tid=\"control\"\n\t\t\ttype=\"checkbox\"\n\t\t\trole=\"switch\"\n\t\t\t?checked=\"${this.checked}\"\n\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t@change=\"${this._handleChange}\"\n\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t@blur=\"${this._handleBlur}\"\n\t\t/>`;\n\t\tconst labelTemplate = html`<label class=\"${classMap(labelClasses)}\" for=\"control\">${this.label}</label>`;\n\t\treturn html`<div class=\"${classMap(switchClasses)}\">\n\t\t\t${this.reverse ? [labelTemplate, inputTemplate] : [inputTemplate, labelTemplate]}\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-switch': SDSSwitch;\n\t}\n}\n"]}
+{"version":3,"file":"sds-switch.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-switch.styles';\nimport { SDS_SIZES } from '../types';\n\nimport '../sds-icon/sds-icon';\n\ntype v2SwitchSizes = Extract<SDS_SIZES, 'sm' | 'md' | 'lg'>;\ntype SwitchSize = v2SwitchSizes | 's' | 'l';\n\nexport interface SDSSwitchProps {\n\tdisabled?: boolean;\n\tlabel?: string;\n\t'hide-label'?: boolean;\n\tname?: string;\n\treadonly?: boolean;\n\treverse?: boolean;\n\tchecked?: boolean;\n\tsize?: SwitchSize;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonFocus?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonBlur?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n}\n\n@guardedCustomElement('sds-switch')\nexport class SDSSwitch extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: String, reflect: true }) label: string = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: Boolean, reflect: true }) reverse: boolean = false;\n\t@property({ type: Boolean, reflect: true }) checked: boolean = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) size: SwitchSize = 'md';\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis.control.checked = this.checked;\n\t\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t\t}\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this._initialChecked ? 'on' : 'off');\n\t}\n\n\tformStateRestoreCallback(state: unknown) {\n\t\tthis.checked = state as boolean;\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled && !this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tthis.internals.setFormValue(this.checked ? 'on' : 'off');\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled && !this.disabled) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('focus', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled && !this.disabled) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('blur', {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tcomposed: true,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\t};\n\n\tprivate readonly getIconSize = (): v2SwitchSizes => {\n\t\tswitch (this.size) {\n\t\t\tcase 'sm':\n\t\t\tcase 'md':\n\t\t\tcase 'lg':\n\t\t\t\treturn this.size;\n\t\t\tcase 'l':\n\t\t\t\treturn 'lg';\n\t\t\tcase 's':\n\t\t\t\treturn 'sm';\n\t\t}\n\t};\n\n\tget value(): string {\n\t\treturn this.checked ? 'on' : 'off';\n\t}\n\n\toverride render() {\n\t\tconst switchClasses = {\n\t\t\t'sds-switch': true,\n\t\t};\n\n\t\tconst labelClasses = {\n\t\t\t'sds-switch__label': true,\n\t\t\t'sds-switch__label--hidden': this.hideLabel,\n\t\t};\n\n\t\tconst inputTemplate = html`<input\n\t\t\tclass=\"sds-switch__input\"\n\t\t\tid=\"control\"\n\t\t\ttype=\"checkbox\"\n\t\t\trole=\"switch\"\n\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t?checked=\"${this.checked}\"\n\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t@change=\"${this._handleChange}\"\n\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t@blur=\"${this._handleBlur}\"\n\t\t/>`;\n\t\tconst iconTemplate = this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"${this.getIconSize()}\"></sds-icon>` : nothing;\n\t\tconst labelTemplate = html`<label class=\"${classMap(labelClasses)}\" for=\"control\">${iconTemplate}${this.label}</label>`;\n\t\treturn html`<div class=\"${classMap(switchClasses)}\">${this.reverse ? [labelTemplate, inputTemplate] : [inputTemplate, labelTemplate]}</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-switch': SDSSwitch;\n\t}\n}\n"]}

package/dist/sds-switch/sds-switch.styles.d.ts.map

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

package/dist/sds-switch/sds-switch.styles.js

@@ -1,57 +1,82 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
-		display: inline-flex;
-		contain: layout style;
+		--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-default));
+		--_sds-switch-text-color: var(--sds-switch-text-color, var(--sds-color-neutral-text-default));
+
+		--_sds-switch-transition-time: var(--sds-switch-transition-time, 200ms);
+
+		--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-default));
+		--_sds-switch-border-width: var(--sds-switch-border-width, var(--sds-border-md));
+		--_sds-switch-border-radius: var(--sds-switch-border-radius, var(--sds-radius-full));
+
+		--_sds-switch-font-family: var(--sds-switch-font-family, var(--sds-typography-font-family-roboto));
+		--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-md));
+		--_sds-switch-font-weight: var(--sds-switch-font-weight, var(--sds-typography-font-weight-regular));
+		--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-md));
+
+		--_sds-switch-gap: var(--sds-switch-gap, var(--sds-spacing-3xs));
+		--_sds-switch-icon-gap: var(--sds-switch-icon-gap, var(--sds-spacing-4xs));
+		--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-md));
+		--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-md));
+
+		--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));
+		--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-md));
+		--_sds-switch-button-gap: var(--sds-switch-button-gap, var(--sds-spacing-4xs));
+		--_sds-switch-button-position: var(--sds-switch-button-position, calc(var(--_sds-switch-button-gap) - var(--_sds-switch-border-width)));
+		--_sds-switch-button-radius: var(--sds-switch-button-radius, var(--sds-radius-full));
+
+		--_sds-switch-focus-outline-width: var(--sds-switch-focus-outline-width, var(--sds-border-md));
+		--_sds-switch-focus-outline-color: var(--sds-switch-focus-outline-color, var(--sds-color-states-focus-outer));
+		--_sds-switch-focus-outline-offset: var(--sds-switch-focus-outline-offset, var(--sds-color-states-focus-spacing));
+		--_sds-switch-focus-inner-color: var(--sds-switch-focus-inner-color, var(--sds-color-states-focus-inner));
+
+		--_sds-switch-disabled-opacity: var(--sds-switch-disabled-opacity, var(--sds-color-states-disabled-opacity));
+
 		box-sizing: border-box;
-		align-items: center;
-		justify-content: space-between;
 	}
 
 	:host([hidden]) {
 		display: none;
 	}
 
-	:host(:disabled),
-	:host(:disabled) * {
+	:host([readonly]) {
+		--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-tinted));
+		--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));
+		--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-subtle));
+		cursor: default;
 		pointer-events: none;
 	}
 
-	:host(:disabled) .sds-switch__input:checked::before {
-		content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23C4C6C7' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>");
+	:host([disabled]) {
+		opacity: var(--_sds-switch-disabled-opacity);
+		pointer-events: none;
 	}
 
-	:host(:disabled) .sds-switch__input:not(:checked)::before {
-		display: none;
+	:host([size='s']),
+	:host([size='sm']) {
+		--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-sm));
+		--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-sm));
+		--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-sm));
+		--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-sm));
+		--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-sm));
 	}
 
-	:host(:disabled) .sds-switch__label {
-		color: var(--sds-color-semantic-text-disabled);
+	:host([size='l']),
+	:host([size='lg']) {
+		--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-lg));
+		--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-lg));
+		--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-lg));
+		--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-lg));
+		--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-lg));
 	}
 
 	.sds-switch {
-		--_switch-motion-duration: 200ms;
-		--_switch-height: 32px;
-		--_switch-width: 60px;
-		--_switch-padding: 8px;
-		--_switch-icon-size: calc(var(--_switch-height) - (2 * var(--_switch-padding)));
-
 		display: flex;
-		gap: 0.5rem;
-	}
-
-	.sds-switch--small {
-		--_switch-height: 24px;
-		--_switch-width: 48px;
-		--_switch-padding: 6px;
-	}
-
-	.sds-switch:has(.sds-switch__input:checked) {
-		--_switch-padding: 6px;
-	}
-
-	.sds-switch--small:has(.sds-switch__input:checked) {
-		--_switch-padding: 4px;
+		flex-direction: row;
+		align-items: center;
+		gap: var(--_sds-switch-gap);
+		font-family: var(--_sds-switch-font-family);
 	}
 
 	.sds-switch__label {
@@ -59,11 +84,11 @@ export const styles = css `
 		align-items: center;
 		cursor: pointer;
 		user-select: none;
-		color: var(--sds-color-semantic-text-default);
-		font-family: var(--sds-typography-font-family);
-		font-size: 1rem;
-		font-weight: 400;
-		line-height: 1.25;
+		gap: var(--_sds-switch-icon-gap);
+		color: var(--_sds-switch-text-color);
+		font-size: var(--_sds-switch-font-size);
+		font-weight: var(--_sds-switch-font-weight);
+		line-height: var(--_sds-switch-line-height);
 	}
 
 	.sds-switch__label--hidden:not(:focus):not(:active):not(:focus-within) {
@@ -76,50 +101,53 @@ export const styles = css `
 	}
 
 	.sds-switch__input {
-		--_switch-icon-position: var(--_switch-padding);
-
 		appearance: none;
+		position: relative;
 		cursor: pointer;
 		user-select: none;
-
-		inline-size: var(--_switch-width);
-		block-size: var(--_switch-height);
 		margin: 0;
 
-		flex-shrink: 0;
-		display: grid;
-		align-items: center;
-		grid: [track] 1fr / [track] 1fr;
+		width: var(--_sds-switch-width);
+		height: var(--_sds-switch-height);
+
+		background-color: var(--_sds-switch-background-color);
+		border: var(--_sds-switch-border-width) solid var(--_sds-switch-border-color);
+		border-radius: var(--_sds-switch-border-radius);
 
-		transition: background-color var(--_switch-motion-duration);
-		border-radius: 1rem;
-		background-color: var(--sds-color-global-gray-300);
+		transition: background-color var(--_sds-switch-transition-time) ease;
 	}
 
 	.sds-switch__input::before {
 		content: '';
-		grid-area: track;
-		inline-size: var(--_switch-icon-size);
-		block-size: var(--_switch-icon-size);
-
-		background-color: var(--sds-color-semantic-border-default);
-		transition: transform var(--_switch-motion-duration);
-		border-radius: 50%;
-		transform: translateX(var(--_switch-icon-position));
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%) translateX(var(--_sds-switch-button-position));
+
+		width: var(--_sds-switch-button-size);
+		height: var(--_sds-switch-button-size);
+
+		background-color: var(--_sds-switch-button-color);
+		border-radius: var(--_sds-switch-button-radius);
+
+		transition:
+			transform var(--_sds-switch-transition-time) ease,
+			background-color var(--_sds-switch-transition-time) ease;
 	}
 
 	.sds-switch__input:focus-visible {
-		outline: 2px solid var(--sds-color-semantic-border-focus);
-		outline-offset: 2px;
+		box-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-switch-focus-inner-color);
+		outline: var(--_sds-switch-focus-outline-width) solid var(--_sds-switch-focus-outline-color);
+		outline-offset: var(--_sds-switch-focus-outline-offset);
 	}
 
-	.sds-switch__input:checked {
-		--_switch-icon-position: calc(var(--_switch-width) - var(--_switch-icon-size) - var(--_switch-padding));
+	.sds-switch__input:checked:not([readonly]) {
+		--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-accent-action-default));
+		--_sds-switch-background-color: var(--sds-switch-background-color-checked, var(--sds-color-accent-action-default));
+		--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-surface-default));
 	}
 
 	.sds-switch__input:checked::before {
-		content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>");
-		background-color: var(--sds-color-semantic-surface-default);
+		--_sds-switch-button-position: calc(var(--_sds-switch-width) - var(--_sds-switch-button-size) - var(--_sds-switch-button-gap) - var(--_sds-switch-border-width));
 	}
 `;
 //# sourceMappingURL=sds-switch.styles.js.map

package/dist/sds-switch/sds-switch.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-switch.styles.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: inline-flex;\n\t\tcontain: layout style;\n\t\tbox-sizing: border-box;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t:host(:disabled),\n\t:host(:disabled) * {\n\t\tpointer-events: none;\n\t}\n\n\t:host(:disabled) .sds-switch__input:checked::before {\n\t\tcontent: url(\"data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23C4C6C7' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>\");\n\t}\n\n\t:host(:disabled) .sds-switch__input:not(:checked)::before {\n\t\tdisplay: none;\n\t}\n\n\t:host(:disabled) .sds-switch__label {\n\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t}\n\n\t.sds-switch {\n\t\t--_switch-motion-duration: 200ms;\n\t\t--_switch-height: 32px;\n\t\t--_switch-width: 60px;\n\t\t--_switch-padding: 8px;\n\t\t--_switch-icon-size: calc(var(--_switch-height) - (2 * var(--_switch-padding)));\n\n\t\tdisplay: flex;\n\t\tgap: 0.5rem;\n\t}\n\n\t.sds-switch--small {\n\t\t--_switch-height: 24px;\n\t\t--_switch-width: 48px;\n\t\t--_switch-padding: 6px;\n\t}\n\n\t.sds-switch:has(.sds-switch__input:checked) {\n\t\t--_switch-padding: 6px;\n\t}\n\n\t.sds-switch--small:has(.sds-switch__input:checked) {\n\t\t--_switch-padding: 4px;\n\t}\n\n\t.sds-switch__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 400;\n\t\tline-height: 1.25;\n\t}\n\n\t.sds-switch__label--hidden:not(:focus):not(:active):not(:focus-within) {\n\t\tclip-path: inset(50%);\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\twhite-space: nowrap;\n\t\twidth: 1px;\n\t}\n\n\t.sds-switch__input {\n\t\t--_switch-icon-position: var(--_switch-padding);\n\n\t\tappearance: none;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\n\t\tinline-size: var(--_switch-width);\n\t\tblock-size: var(--_switch-height);\n\t\tmargin: 0;\n\n\t\tflex-shrink: 0;\n\t\tdisplay: grid;\n\t\talign-items: center;\n\t\tgrid: [track] 1fr / [track] 1fr;\n\n\t\ttransition: background-color var(--_switch-motion-duration);\n\t\tborder-radius: 1rem;\n\t\tbackground-color: var(--sds-color-global-gray-300);\n\t}\n\n\t.sds-switch__input::before {\n\t\tcontent: '';\n\t\tgrid-area: track;\n\t\tinline-size: var(--_switch-icon-size);\n\t\tblock-size: var(--_switch-icon-size);\n\n\t\tbackground-color: var(--sds-color-semantic-border-default);\n\t\ttransition: transform var(--_switch-motion-duration);\n\t\tborder-radius: 50%;\n\t\ttransform: translateX(var(--_switch-icon-position));\n\t}\n\n\t.sds-switch__input:focus-visible {\n\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\toutline-offset: 2px;\n\t}\n\n\t.sds-switch__input:checked {\n\t\t--_switch-icon-position: calc(var(--_switch-width) - var(--_switch-icon-size) - var(--_switch-padding));\n\t}\n\n\t.sds-switch__input:checked::before {\n\t\tcontent: url(\"data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' fill='%230072ce' viewBox='0 0 24 24'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'></path></svg>\");\n\t\tbackground-color: var(--sds-color-semantic-surface-default);\n\t}\n`;\n"]}
+{"version":3,"file":"sds-switch.styles.js","sourceRoot":"","sources":["../../src/sds-switch/sds-switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-default));\n\t\t--_sds-switch-text-color: var(--sds-switch-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-switch-transition-time: var(--sds-switch-transition-time, 200ms);\n\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-switch-border-width: var(--sds-switch-border-width, var(--sds-border-md));\n\t\t--_sds-switch-border-radius: var(--sds-switch-border-radius, var(--sds-radius-full));\n\n\t\t--_sds-switch-font-family: var(--sds-switch-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-switch-font-weight: var(--sds-switch-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-switch-gap: var(--sds-switch-gap, var(--sds-spacing-3xs));\n\t\t--_sds-switch-icon-gap: var(--sds-switch-icon-gap, var(--sds-spacing-4xs));\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-md));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-md));\n\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-md));\n\t\t--_sds-switch-button-gap: var(--sds-switch-button-gap, var(--sds-spacing-4xs));\n\t\t--_sds-switch-button-position: var(--sds-switch-button-position, calc(var(--_sds-switch-button-gap) - var(--_sds-switch-border-width)));\n\t\t--_sds-switch-button-radius: var(--sds-switch-button-radius, var(--sds-radius-full));\n\n\t\t--_sds-switch-focus-outline-width: var(--sds-switch-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-switch-focus-outline-color: var(--sds-switch-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-switch-focus-outline-offset: var(--sds-switch-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-switch-focus-inner-color: var(--sds-switch-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-switch-disabled-opacity: var(--sds-switch-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-subtle));\n\t\tcursor: default;\n\t\tpointer-events: none;\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-switch-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t:host([size='s']),\n\t:host([size='sm']) {\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-sm));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-sm));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-sm));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='l']),\n\t:host([size='lg']) {\n\t\t--_sds-switch-width: var(--sds-switch-width, var(--sds-components-switch-length-lg));\n\t\t--_sds-switch-height: var(--sds-switch-height, var(--sds-components-icon-lg));\n\t\t--_sds-switch-button-size: var(--sds-switch-button-size, var(--sds-components-switch-bulleye-lg));\n\t\t--_sds-switch-font-size: var(--sds-switch-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-switch-line-height: var(--sds-switch-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n\n\t.sds-switch {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: var(--_sds-switch-gap);\n\t\tfont-family: var(--_sds-switch-font-family);\n\t}\n\n\t.sds-switch__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tgap: var(--_sds-switch-icon-gap);\n\t\tcolor: var(--_sds-switch-text-color);\n\t\tfont-size: var(--_sds-switch-font-size);\n\t\tfont-weight: var(--_sds-switch-font-weight);\n\t\tline-height: var(--_sds-switch-line-height);\n\t}\n\n\t.sds-switch__label--hidden:not(:focus):not(:active):not(:focus-within) {\n\t\tclip-path: inset(50%);\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\twhite-space: nowrap;\n\t\twidth: 1px;\n\t}\n\n\t.sds-switch__input {\n\t\tappearance: none;\n\t\tposition: relative;\n\t\tcursor: pointer;\n\t\tuser-select: none;\n\t\tmargin: 0;\n\n\t\twidth: var(--_sds-switch-width);\n\t\theight: var(--_sds-switch-height);\n\n\t\tbackground-color: var(--_sds-switch-background-color);\n\t\tborder: var(--_sds-switch-border-width) solid var(--_sds-switch-border-color);\n\t\tborder-radius: var(--_sds-switch-border-radius);\n\n\t\ttransition: background-color var(--_sds-switch-transition-time) ease;\n\t}\n\n\t.sds-switch__input::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%) translateX(var(--_sds-switch-button-position));\n\n\t\twidth: var(--_sds-switch-button-size);\n\t\theight: var(--_sds-switch-button-size);\n\n\t\tbackground-color: var(--_sds-switch-button-color);\n\t\tborder-radius: var(--_sds-switch-button-radius);\n\n\t\ttransition:\n\t\t\ttransform var(--_sds-switch-transition-time) ease,\n\t\t\tbackground-color var(--_sds-switch-transition-time) ease;\n\t}\n\n\t.sds-switch__input:focus-visible {\n\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-switch-focus-inner-color);\n\t\toutline: var(--_sds-switch-focus-outline-width) solid var(--_sds-switch-focus-outline-color);\n\t\toutline-offset: var(--_sds-switch-focus-outline-offset);\n\t}\n\n\t.sds-switch__input:checked:not([readonly]) {\n\t\t--_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-accent-action-default));\n\t\t--_sds-switch-background-color: var(--sds-switch-background-color-checked, var(--sds-color-accent-action-default));\n\t\t--_sds-switch-button-color: var(--sds-switch-button-color, var(--sds-color-neutral-surface-default));\n\t}\n\n\t.sds-switch__input:checked::before {\n\t\t--_sds-switch-button-position: calc(var(--_sds-switch-width) - var(--_sds-switch-button-size) - var(--_sds-switch-button-gap) - var(--_sds-switch-border-width));\n\t}\n`;\n"]}

package/dist/sds-tag/sds-tag.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import { SDS_COLOR_PALETTES, SDS_SIZES } from '../types';
+type TagColor = Extract<SDS_COLOR_PALETTES, 'neutral' | 'primary' | 'info' | 'success' | 'attention' | 'warning' | 'danger'> | 'danger-critical';
+type TagSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
+export interface SDSTagProps {
+    color?: TagColor;
+    size?: TagSize;
+}
+export declare class SDSTag extends LitElement {
+    static styles: import("lit").CSSResult[];
+    color: TagColor;
+    size: TagSize;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-tag': SDSTag;
+    }
+}
+export {};
+//# sourceMappingURL=sds-tag.d.ts.map

package/dist/sds-tag/sds-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-tag.d.ts","sourceRoot":"","sources":["../../src/sds-tag/sds-tag.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAEzD,KAAK,QAAQ,GAAG,OAAO,CAAC,kBAAkB,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC,GAAG,iBAAiB,CAAC;AACjJ,KAAK,OAAO,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAEtD,MAAM,WAAW,WAAW;IAC3B,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,qBACa,MAAO,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAAY;IAES,KAAK,EAAE,QAAQ,CAAa;IAC5B,IAAI,EAAE,OAAO,CAAQ;IAEvD,MAAM;CASf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,SAAS,EAAE,MAAM,CAAC;KAClB;CACD"}