@politiet/sheriff-web-components 0.1.4 → 0.6.1

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

@@ -0,0 +1,109 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		flex: 0 0 auto;
+	}
+
+	.sds-radio__label {
+		align-items: flex-start;
+		cursor: pointer;
+		color: var(--sds-color-semantic-text-default);
+		display: inline-flex;
+		font-family: var(--sds-typography-font-family);
+		font-size: 1rem;
+		font-weight: 400;
+		gap: var(--sds-spacing-3);
+		line-height: 1.25;
+
+		&:has(:disabled) {
+			cursor: default;
+			pointer-events: none;
+		}
+	}
+
+	.sds-radio__input {
+		appearance: none;
+		background-color: transparent;
+		color: currentColor;
+		cursor: pointer;
+		width: 24px;
+		height: 24px;
+		border: 2px solid var(--sds-color-semantic-border-default);
+		border-radius: 50%;
+		margin: 0;
+		position: relative;
+
+		&:checked {
+			background-color: white;
+			border-color: var(--sds-color-semantic-surface-action-selected);
+			border-width: 3px;
+
+			&::after {
+				content: '';
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				width: 12px;
+				height: 12px;
+				background-color: var(--sds-color-semantic-icon-action-default);
+				border-radius: 50%;
+				transform: translate(-50%, -50%);
+			}
+		}
+
+		&:hover {
+			border-width: 3px;
+
+			&:checked {
+				&::after {
+					width: 12px;
+					height: 12px;
+					transform: translate(-50%, -50%);
+				}
+			}
+		}
+
+		&:focus {
+			outline: 2px solid var(--sds-color-semantic-border-focus);
+			outline-offset: 1px;
+		}
+
+		&.sds-radio__input--error {
+			border: 2px solid var(--sds-color-semantic-surface-critical-xtreme);
+
+			&:checked {
+				&::after {
+					width: 12px;
+					height: 12px;
+					transform: translate(-50%, -50%);
+				}
+			}
+		}
+
+		&:disabled {
+			border: 2px solid var(--sds-color-semantic-border-disabled);
+
+			&:checked {
+				border-width: 3px;
+				background-color: white;
+
+				&::after {
+					background-color: var(--sds-color-semantic-border-disabled);
+					width: 12px;
+					height: 12px;
+				}
+			}
+
+			& + .sds-radio__text {
+				color: var(--sds-color-semantic-border-disabled);
+			}
+		}
+	}
+
+	.sds-radio__text {
+		display: inline-block;
+		max-width: var(--sds-typography-max-line-width);
+		padding-top: 2px;
+	}
+`;
+//# sourceMappingURL=sds-radio.styles.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-radio__label {\n\t\talign-items: flex-start;\n\t\tcursor: pointer;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tdisplay: inline-flex;\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 400;\n\t\tgap: var(--sds-spacing-3);\n\t\tline-height: 1.25;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-radio__input {\n\t\tappearance: none;\n\t\tbackground-color: transparent;\n\t\tcolor: currentColor;\n\t\tcursor: pointer;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tborder: 2px solid var(--sds-color-semantic-border-default);\n\t\tborder-radius: 50%;\n\t\tmargin: 0;\n\t\tposition: relative;\n\n\t\t&:checked {\n\t\t\tbackground-color: white;\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-selected);\n\t\t\tborder-width: 3px;\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 50%;\n\t\t\t\twidth: 12px;\n\t\t\t\theight: 12px;\n\t\t\t\tbackground-color: var(--sds-color-semantic-icon-action-default);\n\t\t\t\tborder-radius: 50%;\n\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\tborder-width: 3px;\n\n\t\t\t&:checked {\n\t\t\t\t&::after {\n\t\t\t\t\twidth: 12px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&.sds-radio__input--error {\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-critical-xtreme);\n\n\t\t\t&:checked {\n\t\t\t\t&::after {\n\t\t\t\t\twidth: 12px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\n\t\t\t&:checked {\n\t\t\t\tborder-width: 3px;\n\t\t\t\tbackground-color: white;\n\n\t\t\t\t&::after {\n\t\t\t\t\tbackground-color: var(--sds-color-semantic-border-disabled);\n\t\t\t\t\twidth: 12px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& + .sds-radio__text {\n\t\t\t\tcolor: var(--sds-color-semantic-border-disabled);\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-radio__text {\n\t\tdisplay: inline-block;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding-top: 2px;\n\t}\n`;\n"]}

package/dist/sds-radio-group/sds-radio-group.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import '../sds-radio/sds-radio';
+import '../sds-icon/sds-icon';
+/**
+ * TODO: Implement keyboard navigation behavior according to
+ * https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+ */
+export declare class SDSRadioGroup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    legend?: string;
+    helpText?: string;
+    errorMessage?: string;
+    private selectedValue;
+    private readonly _handleRadioChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-radio-group': SDSRadioGroup;
+    }
+}
+//# sourceMappingURL=sds-radio-group.d.ts.map

package/dist/sds-radio-group/sds-radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-radio-group.d.ts","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAIhD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAE9B;;;GAGG;AAEH,qBACa,aAAc,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAAY;IAGlC,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,OAAO,CAAC,aAAa,CAAuB;IAE5C,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAkBjC;IAEO,MAAM;CAqBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD"}

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

@@ -0,0 +1,75 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './sds-radio-group.styles';
+import '../sds-radio/sds-radio';
+import '../sds-icon/sds-icon';
+/**
+ * TODO: Implement keyboard navigation behavior according to
+ * https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+ */
+let SDSRadioGroup = class SDSRadioGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selectedValue = null;
+        this._handleRadioChange = (event) => {
+            const target = event
+                .composedPath()
+                .find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO');
+            if (target) {
+                // Update the selected value
+                this.selectedValue = target.getAttribute('value') || null;
+                // Emit the `change` event for the group
+                this.dispatchEvent(new CustomEvent('change', {
+                    detail: { selectedValue: this.selectedValue },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+    }
+    render() {
+        return html `
+			<fieldset class="sds-radio-group">
+				${this.legend ? html `<legend class="sds-radio-group__legend">${this.legend}</legend>` : nothing}
+				${this.helpText ? html `<p class="sds-radio-group__help-text">${this.helpText}</p>` : nothing}
+				<div class="sds-radio-group__radios" @change=${this._handleRadioChange}>
+					<slot></slot>
+				</div>
+				${this.errorMessage
+            ? html `<p class="sds-radio-group__error-message">
+							<sds-icon
+								name="warning-material-filled"
+								size="m"
+								color="var(--sds-color-semantic-icon-critical)"
+							></sds-icon
+							>${this.errorMessage}
+						</p>`
+            : nothing}
+			</fieldset>
+		`;
+    }
+};
+SDSRadioGroup.styles = [styles];
+__decorate([
+    property({ type: String })
+], SDSRadioGroup.prototype, "legend", void 0);
+__decorate([
+    property({ type: String, attribute: 'help-text' })
+], SDSRadioGroup.prototype, "helpText", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-message' })
+], SDSRadioGroup.prototype, "errorMessage", void 0);
+__decorate([
+    state()
+], SDSRadioGroup.prototype, "selectedValue", void 0);
+SDSRadioGroup = __decorate([
+    customElement('sds-radio-group')
+], SDSRadioGroup);
+export { SDSRadioGroup };
+//# sourceMappingURL=sds-radio-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-radio-group.js","sourceRoot":"","sources":["../../src/sds-radio-group/sds-radio-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAE9B;;;GAGG;AAGI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAaE,kBAAa,GAAkB,IAAI,CAAC;QAE3B,uBAAkB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAC5D,MAAM,MAAM,GAAG,KAAK;iBAClB,YAAY,EAAE;iBACd,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,YAAY,WAAW,IAAI,EAAE,CAAC,OAAO,KAAK,WAAW,CAAoC,CAAC;YAE3G,IAAI,MAAM,EAAE,CAAC;gBACZ,4BAA4B;gBAC5B,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC;gBAE1D,wCAAwC;gBACxC,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACzB,MAAM,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE;oBAC7C,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACd,CAAC,CACF,CAAC;YACH,CAAC;QACF,CAAC,CAAC;IAuBH,CAAC;IArBS,MAAM;QACd,OAAO,IAAI,CAAA;;MAEP,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,2CAA2C,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,OAAO;MAC7F,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,yCAAyC,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO;mDAC7C,IAAI,CAAC,kBAAkB;;;MAGpE,IAAI,CAAC,YAAY;YAClB,CAAC,CAAC,IAAI,CAAA;;;;;;UAMD,IAAI,CAAC,YAAY;WAChB;YACN,CAAC,CAAC,OAAO;;GAEX,CAAC;IACH,CAAC;;AAtDe,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+CACjC;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mDACjC;AAGd;IADP,KAAK,EAAE;oDACoC;AAbhC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAwDzB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './sds-radio-group.styles';\n\nimport '../sds-radio/sds-radio';\nimport '../sds-icon/sds-icon';\n\n/**\n * TODO: Implement keyboard navigation behavior according to\n * https://www.w3.org/WAI/ARIA/apg/patterns/radio/\n */\n\n@customElement('sds-radio-group')\nexport class SDSRadioGroup extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String })\n\tlegend?: string;\n\n\t@property({ type: String, attribute: 'help-text' })\n\thelpText?: string;\n\n\t@property({ type: String, attribute: 'error-message' })\n\terrorMessage?: string;\n\n\t@state()\n\tprivate selectedValue: string | null = null;\n\n\tprivate readonly _handleRadioChange = (event: Event): void => {\n\t\tconst target = event\n\t\t\t.composedPath()\n\t\t\t.find((el) => el instanceof HTMLElement && el.tagName === 'SDS-RADIO') as HTMLElement & { value: string };\n\n\t\tif (target) {\n\t\t\t// Update the selected value\n\t\t\tthis.selectedValue = target.getAttribute('value') || null;\n\n\t\t\t// Emit the `change` event for the group\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tdetail: { selectedValue: this.selectedValue },\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\toverride render() {\n\t\treturn html`\n\t\t\t<fieldset class=\"sds-radio-group\">\n\t\t\t\t${this.legend ? html`<legend class=\"sds-radio-group__legend\">${this.legend}</legend>` : nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-radio-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-radio-group__radios\" @change=${this._handleRadioChange}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`<p class=\"sds-radio-group__error-message\">\n\t\t\t\t\t\t\t<sds-icon\n\t\t\t\t\t\t\t\tname=\"warning-material-filled\"\n\t\t\t\t\t\t\t\tsize=\"m\"\n\t\t\t\t\t\t\t\tcolor=\"var(--sds-color-semantic-icon-critical)\"\n\t\t\t\t\t\t\t></sds-icon\n\t\t\t\t\t\t\t>${this.errorMessage}\n\t\t\t\t\t\t</p>`\n\t\t\t\t\t: nothing}\n\t\t\t</fieldset>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio-group': SDSRadioGroup;\n\t}\n}\n"]}

package/dist/sds-radio-group/sds-radio-group.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=sds-radio-group.styles.d.ts.map

package/dist/sds-radio-group/sds-radio-group.styles.d.ts.map

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

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

@@ -0,0 +1,47 @@
+import { css } from 'lit';
+export const styles = css `
+	.sds-radio-group {
+		border: 0;
+		margin: 0;
+		padding: 0;
+	}
+
+	.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);
+		padding: 0;
+	}
+
+	.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);
+	}
+
+	.sds-radio-group__radios {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sds-spacing-5);
+		margin-top: var(--sds-spacing-3);
+	}
+
+	.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);
+	}
+`;
+//# sourceMappingURL=sds-radio-group.styles.js.map

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

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

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

@@ -0,0 +1,60 @@
+import { LitElement } from 'lit';
+export declare class SDSSwitch extends LitElement {
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    label: string;
+    hideLabel: boolean;
+    name?: string;
+    value: string;
+    reverse: boolean;
+    checked: boolean;
+    size: 's' | 'l';
+    control: HTMLInputElement;
+    static formAssociated: boolean;
+    readonly internals: ElementInternals;
+    private _initialChecked;
+    constructor();
+    connectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: unknown): void;
+    private readonly _handleChange;
+    private readonly _handleFocus;
+    private readonly _handleBlur;
+    get form(): HTMLFormElement | null;
+    get type(): string;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    formDisabledCallback(disabled: boolean): void;
+    focus(): void;
+    blur(): void;
+    click(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-switch': SDSSwitch;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sds-switch': {
+                disabled?: boolean;
+                label?: string;
+                'hide-label'?: boolean;
+                name?: string;
+                value?: string;
+                reverse?: boolean;
+                checked?: boolean;
+                size?: 's' | 'l';
+                onChange?: (event: CustomEvent) => void;
+                onFocus?: (event: CustomEvent) => void;
+                onBlur?: (event: CustomEvent) => void;
+            } & React.DetailedHTMLProps<React.HTMLAttributes<SDSSwitch>, SDSSwitch>;
+        }
+    }
+}
+//# sourceMappingURL=sds-switch.d.ts.map

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

@@ -0,0 +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;AAMvC,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAY;IAEU,QAAQ,EAAE,OAAO,CAAS;IAC3B,KAAK,EAAE,MAAM,CAAM;IACO,SAAS,EAAE,OAAO,CAAS;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAM;IACnB,OAAO,EAAE,OAAO,CAAS;IACzB,OAAO,EAAE,OAAO,CAAS;IAC1B,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAGjE,OAAO,EAAG,gBAAgB,CAAC;IAE3B,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAC5C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB,IAAI,IAAI;IAOzB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAa1E,iBAAiB;IAOjB,wBAAwB,CAAC,KAAK,EAAE,OAAO;IAIvC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAa5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAY3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAY1B;IAEF,IAAI,IAAI,2BAEP;IAED,IAAI,IAAI,WAEP;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIxC,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKpC,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CA4Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;IAED,UAAU,GAAG,CAAC;QACb,UAAU,iBAAiB;YAC1B,YAAY,EAAE;gBACb,QAAQ,CAAC,EAAE,OAAO,CAAC;gBACnB,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,YAAY,CAAC,EAAE,OAAO,CAAC;gBACvB,IAAI,CAAC,EAAE,MAAM,CAAC;gBACd,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,OAAO,CAAC,EAAE,OAAO,CAAC;gBAClB,OAAO,CAAC,EAAE,OAAO,CAAC;gBAClB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;gBACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;gBACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;gBACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;aACtC,GAAG,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC;SACxE;KACD;CACD"}

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

@@ -0,0 +1,189 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './sds-switch.styles';
+let SDSSwitch = class SDSSwitch extends LitElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.label = '';
+        this.hideLabel = false;
+        this.value = '';
+        this.reverse = false;
+        this.checked = false;
+        this.size = 'l';
+        this._initialChecked = false;
+        this._handleChange = (event) => {
+            event.stopImmediatePropagation();
+            if (!this.disabled) {
+                const elem = event.target;
+                this.checked = elem.checked;
+                this.dispatchEvent(new CustomEvent('change', {
+                    detail: { checked: this.checked, value: this.value },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+        this._handleFocus = (event) => {
+            event.stopImmediatePropagation();
+            if (!this.disabled) {
+                this.control.focus();
+                this.dispatchEvent(new CustomEvent('focus', {
+                    detail: { checked: this.checked, value: this.value },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+        this._handleBlur = (event) => {
+            event.stopImmediatePropagation();
+            if (!this.disabled) {
+                this.control.blur();
+                this.dispatchEvent(new CustomEvent('blur', {
+                    detail: { checked: this.checked, value: this.value },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        };
+        this.internals = this.attachInternals();
+        this.attachShadow({ mode: 'open', delegatesFocus: true });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this._initialChecked) {
+            this._initialChecked = this.checked;
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('checked')) {
+            if (this.checked) {
+                this.control.checked = this.checked;
+                this.internals.setFormValue(this.value ?? null);
+            }
+            else {
+                this.control.checked = this.checked;
+                this.internals.setFormValue(null);
+            }
+        }
+    }
+    // ElementInternals callback when a form is reset
+    formResetCallback() {
+        this.checked = this._initialChecked;
+        this.control.checked = this._initialChecked;
+        this.internals.setFormValue(this._initialChecked ? this.value ?? null : null);
+    }
+    // ElementInternals callback when a form is restored to its state from session history
+    formStateRestoreCallback(state) {
+        this.checked = state;
+    }
+    get form() {
+        return this.internals.form;
+    }
+    get type() {
+        return this.localName;
+    }
+    get validity() {
+        return this.internals.validity;
+    }
+    get validationMessage() {
+        return this.internals.validationMessage;
+    }
+    get willValidate() {
+        return this.internals.willValidate;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    setCustomValidity(message) {
+        this.internals.setValidity({ customError: !!message }, message);
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+        if (this.control)
+            this.control.disabled = disabled;
+    }
+    focus() {
+        if (!this.disabled)
+            this.shadowRoot?.querySelector('input')?.focus();
+    }
+    blur() {
+        if (!this.disabled)
+            this.shadowRoot?.querySelector('input')?.blur();
+    }
+    click() {
+        if (!this.disabled)
+            this.shadowRoot?.querySelector('input')?.click();
+    }
+    render() {
+        const switchClasses = {
+            'sds-switch': true,
+            'sds-switch--small': this.size === 's',
+        };
+        const labelClasses = {
+            'sds-switch__label': true,
+            'sds-switch__label--hidden': this.hideLabel,
+        };
+        const inputTemplate = html `<input
+			class="sds-switch__input"
+			id="control"
+			type="checkbox"
+			role="switch"
+			?checked="${this.checked}"
+			value="${ifDefined(this.value)}"
+			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>`;
+    }
+};
+SDSSwitch.styles = [styles];
+SDSSwitch.formAssociated = true;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSSwitch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSSwitch.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-label' })
+], SDSSwitch.prototype, "hideLabel", void 0);
+__decorate([
+    property({ type: String, reflect: false })
+], SDSSwitch.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: false })
+], SDSSwitch.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSSwitch.prototype, "reverse", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSSwitch.prototype, "checked", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSSwitch.prototype, "size", void 0);
+__decorate([
+    query('#control')
+], SDSSwitch.prototype, "control", void 0);
+SDSSwitch = __decorate([
+    customElement('sds-switch')
+], SDSSwitch);
+export { SDSSwitch };
+//# sourceMappingURL=sds-switch.js.map

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

@@ -0,0 +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,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAGtC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAmBxC;QACC,KAAK,EAAE,CAAC;QAjBmC,aAAQ,GAAY,KAAK,CAAC;QAC3B,UAAK,GAAW,EAAE,CAAC;QACO,cAAS,GAAY,KAAK,CAAC;QAEpD,UAAK,GAAW,EAAE,CAAC;QACnB,YAAO,GAAY,KAAK,CAAC;QACzB,YAAO,GAAY,KAAK,CAAC;QAC1B,SAAI,GAAc,GAAG,CAAC;QAOzD,oBAAe,GAAY,KAAK,CAAC;QAuCxB,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,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;oBACzB,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;oBACpD,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,OAAO,CAAC,KAAK,EAAE,CAAC;gBACrB,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,OAAO,EAAE;oBACxB,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;oBACpD,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,OAAO,CAAC,IAAI,EAAE,CAAC;gBACpB,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,MAAM,EAAE;oBACvB,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;oBACpD,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACd,CAAC,CACF,CAAC;YACH,CAAC;QACF,CAAC,CAAC;QA5ED,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,IAAI,CAAC,eAAe,EAAE,CAAC;YAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;QACrC,CAAC;IACF,CAAC;IAEQ,OAAO,CAAC,iBAAyD;QACzE,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACtC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClB,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;gBACpC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;YACjD,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;gBACpC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YACnC,CAAC;QACF,CAAC;IACF,CAAC;IAED,iDAAiD;IACjD,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,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC/E,CAAC;IAED,sFAAsF;IACtF,wBAAwB,CAAC,KAAc;QACtC,IAAI,CAAC,OAAO,GAAG,KAAgB,CAAC;IACjC,CAAC;IA6CD,IAAI,IAAI;QACP,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC5B,CAAC;IAED,IAAI,IAAI;QACP,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;IAChC,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;IACzC,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;IACpC,CAAC;IAED,aAAa;QACZ,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;IACvC,CAAC;IAED,cAAc;QACb,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;IACxC,CAAC;IAED,iBAAiB,CAAC,OAAe;QAChC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE,OAAO,CAAC,CAAC;IACjE,CAAC;IAED,oBAAoB,CAAC,QAAiB;QACrC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACpD,CAAC;IAEQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;IACtE,CAAC;IAEQ,IAAI;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC;IACrE,CAAC;IAEQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC;IACtE,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;YACf,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;WACtB,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;;AA9Ke,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAc3B,wBAAc,GAAG,IAAI,AAAP,CAAQ;AAZe;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;AACpD;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;uCAAe;AACd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;wCAAoB;AACnB;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;uCAAuB;AAGjE;IADC,KAAK,CAAC,UAAU,CAAC;0CACS;AAbf,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAgLrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-switch.styles';\n\n@customElement('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: false }) name?: string;\n\t@property({ type: String, reflect: false }) value: 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: 's' | 'l' = 'l';\n\n\t@query('#control')\n\tcontrol!: 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\tif (!this._initialChecked) {\n\t\t\tthis._initialChecked = this.checked;\n\t\t}\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tif (changedProperties.has('checked')) {\n\t\t\tif (this.checked) {\n\t\t\t\tthis.control.checked = this.checked;\n\t\t\t\tthis.internals.setFormValue(this.value ?? null);\n\t\t\t} else {\n\t\t\t\tthis.control.checked = this.checked;\n\t\t\t\tthis.internals.setFormValue(null);\n\t\t\t}\n\t\t}\n\t}\n\n\t// ElementInternals callback when a form is reset\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this._initialChecked ? this.value ?? null : null);\n\t}\n\n\t// ElementInternals callback when a form is restored to its state from session history\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.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tdetail: { checked: this.checked, value: this.value },\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.control.focus();\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('focus', {\n\t\t\t\t\tdetail: { checked: this.checked, value: this.value },\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.control.blur();\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('blur', {\n\t\t\t\t\tdetail: { checked: this.checked, value: this.value },\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 form() {\n\t\treturn this.internals.form;\n\t}\n\n\tget type() {\n\t\treturn this.localName;\n\t}\n\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.internals.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.internals.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.internals.setValidity({ customError: !!message }, message);\n\t}\n\n\tformDisabledCallback(disabled: boolean): void {\n\t\tthis.disabled = disabled;\n\t\tif (this.control) this.control.disabled = disabled;\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\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\tvalue=\"${ifDefined(this.value)}\"\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\tnamespace JSX {\n\t\tinterface IntrinsicElements {\n\t\t\t'sds-switch': {\n\t\t\t\tdisabled?: boolean;\n\t\t\t\tlabel?: string;\n\t\t\t\t'hide-label'?: boolean;\n\t\t\t\tname?: string;\n\t\t\t\tvalue?: string;\n\t\t\t\treverse?: boolean;\n\t\t\t\tchecked?: boolean;\n\t\t\t\tsize?: 's' | 'l';\n\t\t\t\tonChange?: (event: CustomEvent) => void;\n\t\t\t\tonFocus?: (event: CustomEvent) => void;\n\t\t\t\tonBlur?: (event: CustomEvent) => void;\n\t\t\t} & React.DetailedHTMLProps<React.HTMLAttributes<SDSSwitch>, SDSSwitch>;\n\t\t}\n\t}\n}\n"]}

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

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=sds-switch.styles.d.ts.map

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

@@ -0,0 +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"}