@politiet/sheriff-web-components 0.1.4 → 0.6.1

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

@@ -0,0 +1,110 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		flex: 0 0 auto;
+	}
+
+	.sds-checkbox__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-checkbox__input {
+		appearance: none;
+		background-color: transparent;
+		color: currentColor;
+		cursor: pointer;
+		width: 24px;
+		height: 24px;
+		border: 1px solid var(--sds-color-semantic-border-default);
+		border-radius: var(--sds-radius-2);
+		margin: 0;
+		/*transition:
+			background-color 0.3s ease,
+			box-shadow 0.3s ease;*/
+
+		&:checked {
+			background-color: var(--sds-color-semantic-surface-action-selected);
+			border-color: var(--sds-color-semantic-surface-action-selected);
+
+			&::after {
+				content: '';
+				position: absolute;
+				width: 24px;
+				height: 24px;
+				background-color: white;
+				transform-origin: bottom left;
+				clip-path: path(
+					'M9.54998 18L3.84998 12.3L5.27498 10.875L9.54998 15.15L18.725 5.97501L20.15 7.40001L9.54998 18Z'
+				);
+				transform: translate(-1px, -1px);
+				/*transition:
+					background-color 0.3s ease,
+					box-shadow 0.3s ease;*/
+			}
+		}
+
+		&:hover {
+			border-width: 2px;
+
+			&:checked {
+				&::after {
+					transform: translate(-2px, -2px);
+				}
+			}
+		}
+
+		&:focus {
+			outline: 2px solid var(--sds-color-semantic-border-focus);
+			outline-offset: 2px;
+		}
+
+		&.sds-checkbox__input--error {
+			border: 2px solid var(--sds-color-semantic-surface-critical-xtreme);
+
+			&:checked {
+				// TODO: Decide if checked checkbox with error should be fully red
+				//background-color: var(--sds-color-semantic-border-critical);
+
+				&::after {
+					transform: translate(-2px, -2px);
+				}
+			}
+		}
+
+		&:disabled {
+			border: 2px solid var(--sds-color-semantic-border-disabled);
+
+			&:checked {
+				background-color: var(--sds-color-semantic-border-disabled);
+
+				&::after {
+					transform: translate(-2px, -2px);
+				}
+			}
+
+			& + .sds-checkbox__text {
+				color: var(--sds-color-semantic-border-disabled);
+			}
+		}
+	}
+
+	.sds-checkbox__text {
+		display: inline-block;
+		max-width: var(--sds-typography-max-line-width);
+		padding-top: 2px;
+	}
+`;
+//# sourceMappingURL=sds-checkbox.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GxB,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-checkbox__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-checkbox__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: 1px solid var(--sds-color-semantic-border-default);\n\t\tborder-radius: var(--sds-radius-2);\n\t\tmargin: 0;\n\t\t/*transition:\n\t\t\tbackground-color 0.3s ease,\n\t\t\tbox-shadow 0.3s ease;*/\n\n\t\t&:checked {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-selected);\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-selected);\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 24px;\n\t\t\t\theight: 24px;\n\t\t\t\tbackground-color: white;\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'M9.54998 18L3.84998 12.3L5.27498 10.875L9.54998 15.15L18.725 5.97501L20.15 7.40001L9.54998 18Z'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-1px, -1px);\n\t\t\t\t/*transition:\n\t\t\t\t\tbackground-color 0.3s ease,\n\t\t\t\t\tbox-shadow 0.3s ease;*/\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\tborder-width: 2px;\n\n\t\t\t&:checked {\n\t\t\t\t&::after {\n\t\t\t\t\ttransform: translate(-2px, -2px);\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: 2px;\n\t\t}\n\n\t\t&.sds-checkbox__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// TODO: Decide if checked checkbox with error should be fully red\n\t\t\t\t//background-color: var(--sds-color-semantic-border-critical);\n\n\t\t\t\t&::after {\n\t\t\t\t\ttransform: translate(-2px, -2px);\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\tbackground-color: var(--sds-color-semantic-border-disabled);\n\n\t\t\t\t&::after {\n\t\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& + .sds-checkbox__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-checkbox__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-checkbox-group/sds-checkbox-group.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+import '../sds-checkbox/sds-checkbox';
+import '../sds-icon/sds-icon';
+export declare class SDSCheckboxGroup extends LitElement {
+    static styles: import("lit").CSSResult[];
+    legend?: string;
+    helpText?: string;
+    errorMessage?: string;
+    private selectedValues;
+    private readonly _handleCheckboxChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-checkbox-group': SDSCheckboxGroup;
+    }
+}
+//# sourceMappingURL=sds-checkbox-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-checkbox-group.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAKhD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAE9B,qBACa,gBAAiB,SAAQ,UAAU;IAE/C,OAAgB,MAAM,4BAAY;IAIlC,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,OAAO,CAAC,cAAc,CAAgB;IAEtC,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAgBpC;IAEO,MAAM;CA0Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}

package/dist/sds-checkbox-group/sds-checkbox-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 { classMap } from 'lit/directives/class-map.js';
+import { styles } from './sds-checkbox-group.styles';
+import '../sds-checkbox/sds-checkbox';
+import '../sds-icon/sds-icon';
+let SDSCheckboxGroup = class SDSCheckboxGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selectedValues = [];
+        this._handleCheckboxChange = (event) => {
+            const checkbox = event.target;
+            const value = checkbox.value;
+            const isChecked = checkbox.checked;
+            this.selectedValues = isChecked
+                ? [...this.selectedValues, value]
+                : this.selectedValues.filter((v) => v !== value);
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: { selectedValues: this.selectedValues },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    render() {
+        const groupClasses = {
+            'sds-checkbox-group': true,
+            'sds-checkbox-group--error': Boolean(this.errorMessage),
+        };
+        return html `
+			<fieldset class="${classMap(groupClasses)}">
+				${this.legend ? html `<legend class="sds-checkbox-group__legend">${this.legend}</legend>` : nothing}
+				${this.helpText ? html `<p class="sds-checkbox-group__help-text">${this.helpText}</p>` : nothing}
+				<div class="sds-checkbox-group__checkboxes">
+					<slot @change=${this._handleCheckboxChange}></slot>
+				</div>
+				${this.errorMessage
+            ? html `<p class="sds-checkbox-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>
+		`;
+    }
+};
+// Styling
+SDSCheckboxGroup.styles = [styles];
+__decorate([
+    property({ type: String, reflect: true })
+], SDSCheckboxGroup.prototype, "legend", void 0);
+__decorate([
+    property({ type: String, attribute: 'help-text', reflect: true })
+], SDSCheckboxGroup.prototype, "helpText", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-message', reflect: true })
+], SDSCheckboxGroup.prototype, "errorMessage", void 0);
+__decorate([
+    state()
+], SDSCheckboxGroup.prototype, "selectedValues", void 0);
+SDSCheckboxGroup = __decorate([
+    customElement('sds-checkbox-group')
+], SDSCheckboxGroup);
+export { SDSCheckboxGroup };
+//# sourceMappingURL=sds-checkbox-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-checkbox-group.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-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,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAErD,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAGvB,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAeE,mBAAc,GAAa,EAAE,CAAC;QAErB,0BAAqB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YACrE,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA0B,CAAC;YAClD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;YAC7B,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC;YAEnC,IAAI,CAAC,cAAc,GAAG,SAAS;gBAC9B,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC;gBACjC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;YAElD,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACzB,MAAM,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE;gBAC/C,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;IA4BH,CAAC;IA1BS,MAAM;QACd,MAAM,YAAY,GAAG;YACpB,oBAAoB,EAAE,IAAI;YAC1B,2BAA2B,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC;SACvD,CAAC;QAEF,OAAO,IAAI,CAAA;sBACS,QAAQ,CAAC,YAAY,CAAC;MACtC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,8CAA8C,IAAI,CAAC,MAAM,WAAW,CAAC,CAAC,CAAC,OAAO;MAChG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,4CAA4C,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO;;qBAE9E,IAAI,CAAC,qBAAqB;;MAEzC,IAAI,CAAC,YAAY;YAClB,CAAC,CAAC,IAAI,CAAA;;;;;;UAMD,IAAI,CAAC,YAAY;WAChB;YACN,CAAC,CAAC,OAAO;;GAEX,CAAC;IACH,CAAC;;AA3DD,UAAU;AACM,uBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAC1B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAChD;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAChD;AAGd;IADP,KAAK,EAAE;wDAC8B;AAf1B,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CA6D5B","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-checkbox-group.styles';\n\nimport '../sds-checkbox/sds-checkbox';\nimport '../sds-icon/sds-icon';\n\n@customElement('sds-checkbox-group')\nexport class SDSCheckboxGroup extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Props\n\t@property({ type: String, reflect: true })\n\tlegend?: string;\n\n\t@property({ type: String, attribute: 'help-text', reflect: true })\n\thelpText?: string;\n\n\t@property({ type: String, attribute: 'error-message', reflect: true })\n\terrorMessage?: string;\n\n\t@state()\n\tprivate selectedValues: string[] = [];\n\n\tprivate readonly _handleCheckboxChange = (event: CustomEvent): void => {\n\t\tconst checkbox = event.target as HTMLInputElement;\n\t\tconst value = checkbox.value;\n\t\tconst isChecked = checkbox.checked;\n\n\t\tthis.selectedValues = isChecked\n\t\t\t? [...this.selectedValues, value]\n\t\t\t: this.selectedValues.filter((v) => v !== value);\n\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tdetail: { selectedValues: this.selectedValues },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\toverride render() {\n\t\tconst groupClasses = {\n\t\t\t'sds-checkbox-group': true,\n\t\t\t'sds-checkbox-group--error': Boolean(this.errorMessage),\n\t\t};\n\n\t\treturn html`\n\t\t\t<fieldset class=\"${classMap(groupClasses)}\">\n\t\t\t\t${this.legend ? html`<legend class=\"sds-checkbox-group__legend\">${this.legend}</legend>` : nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-checkbox-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-checkbox-group__checkboxes\">\n\t\t\t\t\t<slot @change=${this._handleCheckboxChange}></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`<p class=\"sds-checkbox-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-checkbox-group': SDSCheckboxGroup;\n\t}\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,52 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		display: block;
+		contain: layout style;
+		box-sizing: border-box;
+	}
+
+	.sds-checkbox-group {
+		border: 0;
+		font-family: var(--sds-typography-font-family);
+		margin: 0;
+		padding: 0;
+	}
+
+	.sds-checkbox-group__legend {
+		color: var(--sds-color-semantic-text-default);
+		font-size: 1rem;
+		font-weight: 700;
+		line-height: 1.5;
+		margin: 0 0 var(--sds-spacing-2) 0;
+		max-width: var(--sds-typography-max-line-width);
+		padding: 0;
+	}
+
+	.sds-checkbox-group__help-text {
+		color: var(--sds-color-semantic-text-subtle);
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.25rem;
+		margin: 0;
+		max-width: var(--sds-typography-max-line-width);
+	}
+
+	.sds-checkbox-group__checkboxes {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sds-spacing-5);
+		margin-top: var(--sds-spacing-3);
+	}
+
+	.sds-checkbox-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-checkbox-group.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-checkbox-group.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiDxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tcontain: layout style;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-checkbox-group {\n\t\tborder: 0;\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.sds-checkbox-group__legend {\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 700;\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-checkbox-group__help-text {\n\t\tcolor: var(--sds-color-semantic-text-subtle);\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-checkbox-group__checkboxes {\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-checkbox-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-chip/sds-chip.d.ts

@@ -1,21 +1,26 @@
 import { LitElement } from 'lit';
+import '../sds-icon/sds-icon';
+type ChipVariant = 'selectable' | 'removable';
+type ChipSize = 'large' | 'small';
 export declare class SDSChip extends LitElement {
     static styles: import("lit").CSSResult[];
-    size: 'large' | 'medium' | 'small';
+    variant: ChipVariant;
+    size: ChipSize;
+    checked: boolean;
+    name?: string;
+    value?: string;
     disabled: boolean;
-    selectable: boolean;
-    selected: boolean;
-    removable: boolean;
-    onSelect: () => void;
-    onUnselect: () => void;
-    render(): import("lit-html").TemplateResult<1>;
-    _unselect(): void;
-    _select(): void;
-    _toggle(): void;
+    focus(): void;
+    blur(): void;
+    click(): void;
+    render(): import("lit").TemplateResult<1>;
+    private readonly _toggle;
+    private readonly _remove;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'sds-chip': SDSChip;
     }
 }
+export {};
 //# sourceMappingURL=sds-chip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sds-chip.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAG7C,QAAQ,UAAS;IAGjB,UAAU,UAAS;IAGnB,QAAQ,UAAS;IAGjB,SAAS,UAAS;IAGlB,QAAQ,aAAY;IAGpB,UAAU,aAAY;IAEb,MAAM;IA+Bf,SAAS;IAWT,OAAO;IAWP,OAAO;CASP;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
+{"version":3,"file":"sds-chip.d.ts","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,sBAAsB,CAAC;AAE9B,KAAK,WAAW,GAAG,YAAY,GAAG,WAAW,CAAC;AAC9C,KAAK,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;AAElC,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAIlC,OAAO,EAAE,WAAW,CAAgB;IAGpC,IAAI,EAAE,QAAQ,CAAW;IAGzB,OAAO,UAAS;IAGhB,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,QAAQ,UAAS;IAER,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;IAwBf,OAAO,CAAC,QAAQ,CAAC,OAAO,CAYtB;IAEF,OAAO,CAAC,QAAQ,CAAC,OAAO,CAOtB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

package/dist/sds-chip/sds-chip.js

@@ -4,101 +4,91 @@ 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;
 };
-/* eslint-disable @typescript-eslint/unbound-method */
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { styles } from './sds-chip.styles';
+import '../sds-icon/sds-icon';
 let SDSChip = class SDSChip extends LitElement {
     constructor() {
         super(...arguments);
         // Reactive Props
+        this.variant = 'selectable'; // Selectable is a radio input, removable is a button
         this.size = 'large';
+        this.checked = false;
         this.disabled = false;
-        this.selectable = false;
-        this.selected = false;
-        this.removable = false;
-        this.onSelect = () => { };
-        this.onUnselect = () => { };
+        this._toggle = (event) => {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            this.checked = !this.checked;
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: { value: this.value, isChecked: this.checked },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._remove = () => {
+            this.dispatchEvent(new CustomEvent('sds-remove', {
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    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 buttonClasses = {
-            'sds-chip--medium': this.size === 'medium',
+        const chipClasses = {
+            'sds-chip': true,
             'sds-chip--small': this.size === 'small',
-            'sds-chip--selectable': this.selectable,
-            'sds-chip--selected': this.selected,
         };
-        return html `
-			<button
-				class="sds-chip${classMap(buttonClasses)}"
-				data-size=${this.size}
-				?disabled=${this.disabled}
-				?data-removable=${this.removable}
-				?data-selectable=${this.selectable}
-				?data-selected=${this.selected}
-				@click=${this._toggle}
-			>
+        if (this.variant === 'removable')
+            return html `<button class="${classMap(chipClasses)}" @click=${this._remove}>
 				<slot></slot>
-				${this.removable
-            ? html `<button
-							class="sds-chip-remove-button"
-							@click=${this._unselect}
-						>
-							<span>X</span>
-						</button>`
-            : ''}
-			</button>
-		`;
-    }
-    _unselect() {
-        this.onUnselect();
-        this.dispatchEvent(new CustomEvent('chip-unselect', {
-            detail: { node: this },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _select() {
-        this.onSelect();
-        this.dispatchEvent(new CustomEvent('chip-select', {
-            detail: { node: this },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _toggle() {
-        if (!this.selectable)
-            return;
-        if (this.selected) {
-            this._unselect();
-            return;
-        }
-        this._select();
+				<sds-icon name="close-material-outlined" size="s"></sds-icon>
+			</button>`;
+        return html `<label class="${classMap(chipClasses)}" @click="${this._toggle}">
+			<input
+				type="checkbox"
+				name="${ifDefined(this.name)}"
+				value="${ifDefined(this.value)}"
+				?checked="${this.checked}"
+				?disabled="${this.disabled}"
+			/>
+			<slot></slot>
+		</label>`;
     }
 };
 // Styling
 SDSChip.styles = [styles];
 __decorate([
-    property({ type: String })
-], SDSChip.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean })
-], SDSChip.prototype, "disabled", void 0);
+    property({ type: String, reflect: true })
+], SDSChip.prototype, "variant", void 0);
 __decorate([
-    property({ type: Boolean })
-], SDSChip.prototype, "selectable", void 0);
+    property({ type: String, reflect: true })
+], SDSChip.prototype, "size", void 0);
 __decorate([
-    property({ type: Boolean })
-], SDSChip.prototype, "selected", void 0);
+    property({ type: Boolean, reflect: true })
+], SDSChip.prototype, "checked", void 0);
 __decorate([
-    property({ type: Boolean })
-], SDSChip.prototype, "removable", void 0);
+    property({ type: String, reflect: true })
+], SDSChip.prototype, "name", void 0);
 __decorate([
-    property({ attribute: false })
-], SDSChip.prototype, "onSelect", void 0);
+    property({ type: String })
+], SDSChip.prototype, "value", void 0);
 __decorate([
-    property({ attribute: false })
-], SDSChip.prototype, "onUnselect", void 0);
+    property({ type: Boolean, reflect: true })
+], SDSChip.prototype, "disabled", void 0);
 SDSChip = __decorate([
     customElement('sds-chip')
 ], SDSChip);

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

@@ -1 +1 @@
-{"version":3,"file":"sds-chip.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/unbound-method */\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-chip.styles';\n\n@customElement('sds-chip')\nexport class SDSChip extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String })\n\tsize: 'large' | 'medium' | 'small' = 'large';\n\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t@property({ type: Boolean })\n\tselectable = false;\n\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t@property({ type: Boolean })\n\tremovable = false;\n\n\t@property({ attribute: false })\n\tonSelect = () => {};\n\n\t@property({ attribute: false })\n\tonUnselect = () => {};\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-chip--medium': this.size === 'medium',\n\t\t\t'sds-chip--small': this.size === 'small',\n\t\t\t'sds-chip--selectable': this.selectable,\n\t\t\t'sds-chip--selected': this.selected,\n\t\t};\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tclass=\"sds-chip${classMap(buttonClasses)}\"\n\t\t\t\tdata-size=${this.size}\n\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t?data-removable=${this.removable}\n\t\t\t\t?data-selectable=${this.selectable}\n\t\t\t\t?data-selected=${this.selected}\n\t\t\t\t@click=${this._toggle}\n\t\t\t>\n\t\t\t\t<slot></slot>\n\t\t\t\t${this.removable\n\t\t\t\t\t? html`<button\n\t\t\t\t\t\t\tclass=\"sds-chip-remove-button\"\n\t\t\t\t\t\t\t@click=${this._unselect}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>X</span>\n\t\t\t\t\t\t</button>`\n\t\t\t\t\t: ''}\n\t\t\t</button>\n\t\t`;\n\t}\n\n\t_unselect() {\n\t\tthis.onUnselect();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('chip-unselect', {\n\t\t\t\tdetail: { node: this },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t}\n\n\t_select() {\n\t\tthis.onSelect();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('chip-select', {\n\t\t\t\tdetail: { node: this },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t}\n\n\t_toggle() {\n\t\tif (!this.selectable) return;\n\n\t\tif (this.selected) {\n\t\t\tthis._unselect();\n\t\t\treturn;\n\t\t}\n\t\tthis._select();\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-chip': SDSChip;\n\t}\n}\n"]}
+{"version":3,"file":"sds-chip.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styles } from './sds-chip.styles';\n\nimport '../sds-icon/sds-icon';\n\ntype ChipVariant = 'selectable' | 'removable';\ntype ChipSize = 'large' | 'small';\n\n@customElement('sds-chip')\nexport class SDSChip extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true })\n\tvariant: ChipVariant = 'selectable'; // Selectable is a radio input, removable is a button\n\n\t@property({ type: String, reflect: true })\n\tsize: ChipSize = 'large';\n\n\t@property({ type: Boolean, reflect: true })\n\tchecked = false;\n\n\t@property({ type: String, reflect: true })\n\tname?: string;\n\n\t@property({ type: String })\n\tvalue?: string;\n\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false;\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 chipClasses = {\n\t\t\t'sds-chip': true,\n\t\t\t'sds-chip--small': this.size === 'small',\n\t\t};\n\n\t\tif (this.variant === 'removable')\n\t\t\treturn html`<button class=\"${classMap(chipClasses)}\" @click=${this._remove}>\n\t\t\t\t<slot></slot>\n\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"s\"></sds-icon>\n\t\t\t</button>`;\n\n\t\treturn html`<label class=\"${classMap(chipClasses)}\" @click=\"${this._toggle}\">\n\t\t\t<input\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t/>\n\t\t\t<slot></slot>\n\t\t</label>`;\n\t}\n\n\tprivate readonly _toggle = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tthis.checked = !this.checked;\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('change', {\n\t\t\t\tdetail: { value: this.value, isChecked: this.checked },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate readonly _remove = () => {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-remove', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-chip': SDSChip;\n\t}\n}\n"]}

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

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