@politiet/sheriff-web-components 0.1.3 → 0.6.0

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

@@ -3,106 +3,73 @@ export const styles = css `
 	.sds-chip {
 		align-items: center;
 		display: inline-flex;
-		gap: var(--sds-spacing-3, 8px);
+		gap: var(--sds-spacing-3);
 		justify-content: center;
-		padding: var(--sds-spacing-3) var(--sds-spacing-4);
+		padding: 6px var(--sds-spacing-4);
 
 		background-color: var(--sds-color-semantic-surface-action-inverted);
 		border: 2px solid var(--sds-color-semantic-border-action);
-		border-radius: 5rem;
+		border-radius: 2rem;
 
-		font-family: 'Roboto';
+		font-family: var(--sds-typography-font-family);
 		font-size: 1rem;
-		line-height: 1.5;
+		font-weight: 400;
+		line-height: 1.25;
 		text-align: center;
 
-		&[data-selectable] {
-			cursor: pointer;
-
-			&:focus {
-				background-color: var(
-					--sds-color-semantic-surface-action-subtle
-				);
-				color: var(--sds-color-semantic-text-subtle);
-			}
-
-			&:hover {
-				background-color: var(
-					--sds-color-semantic-surface-action-hover
-				);
-				border-color: var(--sds-color-semantic-surface-action-hover);
-				color: var(--sds-color-semantic-text-on-action);
-			}
-
-			&:active {
-				background-color: var(
-					--sds-color-semantic-surface-action-active
-				);
-				border: 2px solid
-					var(--sds-color-semantic-surface-action-active);
-				outline: 0;
-			}
-		}
+		user-select: none;
+		cursor: pointer;
 
-		&[data-selected] {
-			background-color: var(--sds-color-semantic-surface-action-selected);
-			border-color: var(--sds-color-semantic-surface-action-selected);
+		&:has(input[type='checkbox']:checked) {
+			background-color: var(--sds-color-semantic-surface-action-default);
+			border-color: var(--sds-color-semantic-surface-action-default);
 			color: var(--sds-color-semantic-text-on-action);
 		}
 
-		&:disabled {
+		&:has(
+				input[type='checkbox'][disabled],
+				input[type='checkbox']:checked[disabled]
+			) {
 			background-color: var(--sds-color-semantic-surface-disabled);
 			border: 2px solid var(--sds-color-semantic-surface-disabled);
 			color: var(--sds-color-semantic-text-disabled);
 			cursor: not-allowed;
 		}
 
-		&[data-size='medium'] {
-			padding: var(--sds-spacing-1) var(--sds-spacing-3);
-
-			.sds-chip-remove-button {
-				width: var(--sds-spacing-6);
-				height: var(--sds-spacing-6);
-				font-size: 0.8rem;
-			}
+		&:hover {
+			background-color: var(--sds-color-semantic-surface-action-hover);
+			border-color: var(--sds-color-semantic-surface-action-hover);
+			color: var(--sds-color-semantic-text-on-action);
 		}
 
-		&[data-size='small'] {
-			font-size: 0.875rem;
-			padding: 0 var(--sds-spacing-3);
-
-			.sds-chip-remove-button {
-				width: var(--sds-spacing-5);
-				height: var(--sds-spacing-5);
-				font-size: 0.7rem;
-			}
+		&:active {
+			background-color: var(--sds-color-semantic-surface-action-active);
+			border: 2px solid var(--sds-color-semantic-surface-action-active);
 		}
 
-		&[data-size='large'],
-		&[data-size=''] {
-			.sds-chip-remove-button span {
-				position: relative;
-				top: 1px;
-			}
+		&:focus-within,
+		&:focus {
+			outline: 2px solid var(--sds-color-semantic-border-focus);
+			outline-offset: 2px;
 		}
-	}
 
-	.sds-chip-remove-button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 0;
-		background: 0;
-		width: var(--sds-spacing-7);
-		height: var(--sds-spacing-7);
-		border-radius: 50%;
-		font-size: 1rem;
-		color: inherit;
-		cursor: pointer;
+		&.sds-chip--small {
+			font-size: 0.875rem;
+			line-height: 1.125rem;
+			padding: var(--sds-spacing-1) var(--sds-spacing-3);
+			gap: var(--sds-spacing-2);
+		}
 
-		&:hover {
-			background-color: var(--sds-color-semantic-surface-action-hover);
-			color: var(--sds-color-semantic-text-on-action);
+		& input[type='checkbox'] {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip-path: inset(50%);
+			border: 0;
+			white-space: nowrap;
 		}
 	}
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.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.sds-chip {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3, 8px);\n\t\tjustify-content: center;\n\t\tpadding: var(--sds-spacing-3) var(--sds-spacing-4);\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: 5rem;\n\n\t\tfont-family: 'Roboto';\n\t\tfont-size: 1rem;\n\t\tline-height: 1.5;\n\t\ttext-align: center;\n\n\t\t&[data-selectable] {\n\t\t\tcursor: pointer;\n\n\t\t\t&:focus {\n\t\t\t\tbackground-color: var(\n\t\t\t\t\t--sds-color-semantic-surface-action-subtle\n\t\t\t\t);\n\t\t\t\tcolor: var(--sds-color-semantic-text-subtle);\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tbackground-color: var(\n\t\t\t\t\t--sds-color-semantic-surface-action-hover\n\t\t\t\t);\n\t\t\t\tborder-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tbackground-color: var(\n\t\t\t\t\t--sds-color-semantic-surface-action-active\n\t\t\t\t);\n\t\t\t\tborder: 2px solid\n\t\t\t\t\tvar(--sds-color-semantic-surface-action-active);\n\t\t\t\toutline: 0;\n\t\t\t}\n\t\t}\n\n\t\t&[data-selected] {\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\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t\tcursor: not-allowed;\n\t\t}\n\n\t\t&[data-size='medium'] {\n\t\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\n\t\t\t.sds-chip-remove-button {\n\t\t\t\twidth: var(--sds-spacing-6);\n\t\t\t\theight: var(--sds-spacing-6);\n\t\t\t\tfont-size: 0.8rem;\n\t\t\t}\n\t\t}\n\n\t\t&[data-size='small'] {\n\t\t\tfont-size: 0.875rem;\n\t\t\tpadding: 0 var(--sds-spacing-3);\n\n\t\t\t.sds-chip-remove-button {\n\t\t\t\twidth: var(--sds-spacing-5);\n\t\t\t\theight: var(--sds-spacing-5);\n\t\t\t\tfont-size: 0.7rem;\n\t\t\t}\n\t\t}\n\n\t\t&[data-size='large'],\n\t\t&[data-size=''] {\n\t\t\t.sds-chip-remove-button span {\n\t\t\t\tposition: relative;\n\t\t\t\ttop: 1px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-chip-remove-button {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 0;\n\t\tbackground: 0;\n\t\twidth: var(--sds-spacing-7);\n\t\theight: var(--sds-spacing-7);\n\t\tborder-radius: 50%;\n\t\tfont-size: 1rem;\n\t\tcolor: inherit;\n\t\tcursor: pointer;\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"file":"sds-chip.styles.js","sourceRoot":"","sources":["../../src/sds-chip/sds-chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t.sds-chip {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3);\n\t\tjustify-content: center;\n\t\tpadding: 6px var(--sds-spacing-4);\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: 2rem;\n\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\ttext-align: center;\n\n\t\tuser-select: none;\n\t\tcursor: pointer;\n\n\t\t&:has(input[type='checkbox']:checked) {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-default);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t}\n\n\t\t&:has(\n\t\t\t\tinput[type='checkbox'][disabled],\n\t\t\t\tinput[type='checkbox']:checked[disabled]\n\t\t\t) {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t\tcursor: not-allowed;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t}\n\n\t\t&:focus-within,\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-chip--small {\n\t\t\tfont-size: 0.875rem;\n\t\t\tline-height: 1.125rem;\n\t\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t\t\tgap: var(--sds-spacing-2);\n\t\t}\n\n\t\t& input[type='checkbox'] {\n\t\t\tposition: absolute;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\tpadding: 0;\n\t\t\tmargin: -1px;\n\t\t\toverflow: hidden;\n\t\t\tclip-path: inset(50%);\n\t\t\tborder: 0;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n`;\n"]}

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

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+type Variation = 'text' | 'label';
+export declare class SDSDetail extends LitElement {
+    static styles: import("lit").CSSResult[];
+    variation: Variation;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-detail': SDSDetail;
+    }
+}
+export {};
+//# sourceMappingURL=sds-detail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-detail.d.ts","sourceRoot":"","sources":["../../src/sds-detail/sds-detail.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAElC,qBACa,SAAU,SAAQ,UAAU;IAExC,OAAgB,MAAM,4BAAY;IAIlC,SAAS,EAAE,SAAS,CAAU;IAErB,MAAM;CAWf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/dist/sds-detail/sds-detail.js

@@ -0,0 +1,36 @@
+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 } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './sds-detail.styles';
+let SDSDetail = class SDSDetail extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Reactive Props
+        this.variation = 'text';
+    }
+    render() {
+        const styleClasses = {
+            'sds-detail': true,
+            'sds-detail--text': this.variation === 'text',
+            'sds-detail--label': this.variation === 'label',
+        };
+        const classes = classMap(styleClasses);
+        return html `<p class=${classes}><slot></slot></p>`;
+    }
+};
+// Styling
+SDSDetail.styles = [styles];
+__decorate([
+    property({ type: String })
+], SDSDetail.prototype, "variation", void 0);
+SDSDetail = __decorate([
+    customElement('sds-detail')
+], SDSDetail);
+export { SDSDetail };
+//# sourceMappingURL=sds-detail.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-detail.js","sourceRoot":"","sources":["../../src/sds-detail/sds-detail.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAKtC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAIN,iBAAiB;QAEjB,cAAS,GAAc,MAAM,CAAC;IAa/B,CAAC;IAXS,MAAM;QACd,MAAM,YAAY,GAAG;YACpB,YAAY,EAAE,IAAI;YAClB,kBAAkB,EAAE,IAAI,CAAC,SAAS,KAAK,MAAM;YAC7C,mBAAmB,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO;SAC/C,CAAC;QAEF,MAAM,OAAO,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;QAEvC,OAAO,IAAI,CAAA,YAAY,OAAO,oBAAoB,CAAC;IACpD,CAAC;;AAjBD,UAAU;AACM,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACG;AANlB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAmBrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-detail.styles';\n\ntype Variation = 'text' | 'label';\n\n@customElement('sds-detail')\nexport class SDSDetail extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String })\n\tvariation: Variation = 'text';\n\n\toverride render() {\n\t\tconst styleClasses = {\n\t\t\t'sds-detail': true,\n\t\t\t'sds-detail--text': this.variation === 'text',\n\t\t\t'sds-detail--label': this.variation === 'label',\n\t\t};\n\n\t\tconst classes = classMap(styleClasses);\n\n\t\treturn html`<p class=${classes}><slot></slot></p>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-detail': SDSDetail;\n\t}\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		display: block;
+	}
+
+	.sds-detail {
+		font-family: var(--sds-typography-font-family);
+		font-size: 0.75rem;
+		line-height: 1.333;
+		color: var(--sds-color-semantic-text-default);
+		margin: 0;
+		max-width: var(--sds-typography-max-line-width);
+		padding: 0;
+	}
+
+	.sds-detail--text {
+		font-weight: 400;
+	}
+
+	.sds-detail--label {
+		font-weight: 500;
+	}
+`;
+//# sourceMappingURL=sds-detail.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-detail.styles.js","sourceRoot":"","sources":["../../src/sds-detail/sds-detail.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-detail {\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 0.75rem;\n\t\tline-height: 1.333;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tmargin: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding: 0;\n\t}\n\n\t.sds-detail--text {\n\t\tfont-weight: 400;\n\t}\n\n\t.sds-detail--label {\n\t\tfont-weight: 500;\n\t}\n`;\n"]}

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

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+type Level = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type DisplaySize = 'xl' | 'l' | 'm' | 's' | 'xs';
+export declare class SDSHeading extends LitElement {
+    static styles: import("lit").CSSResult[];
+    level: Level;
+    as?: DisplaySize;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-heading': SDSHeading;
+    }
+}
+export {};
+//# sourceMappingURL=sds-heading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-heading.d.ts","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,KAAK,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrD,KAAK,WAAW,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEjD,qBACa,UAAW,SAAQ,UAAU;IAEzC,OAAgB,MAAM,4BAAY;IAIlC,KAAK,EAAE,KAAK,CAAQ;IAGpB,EAAE,CAAC,EAAE,WAAW,CAAC;IAER,MAAM;CA6Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/dist/sds-heading/sds-heading.js

@@ -0,0 +1,57 @@
+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 } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './sds-heading.styles';
+let SDSHeading = class SDSHeading extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Reactive Props
+        this.level = 'h1';
+    }
+    render() {
+        const headingClasses = {
+            'sds-heading': true,
+            'sds-heading--xl': this.as === 'xl',
+            'sds-heading--l': this.as === 'l',
+            'sds-heading--m': this.as === 'm',
+            'sds-heading--s': this.as === 's',
+            'sds-heading--xs': this.as === 'xs',
+        };
+        const classes = classMap(headingClasses);
+        switch (this.level.toLowerCase()) {
+            case 'h1':
+                return html `<h1 class=${classes}><slot></slot></h1>`;
+            case 'h2':
+                return html `<h2 class=${classes}><slot></slot></h2>`;
+            case 'h3':
+                return html `<h3 class=${classes}><slot></slot></h3>`;
+            case 'h4':
+                return html `<h4 class=${classes}><slot></slot></h4>`;
+            case 'h5':
+                return html `<h5 class=${classes}><slot></slot></h5>`;
+            case 'h6':
+                return html `<h6 class=${classes}><slot></slot></h6>`;
+            default:
+                return html `<h1 class=${classes}><slot></slot></h1>`;
+        }
+    }
+};
+// Styling
+SDSHeading.styles = [styles];
+__decorate([
+    property({ type: String })
+], SDSHeading.prototype, "level", void 0);
+__decorate([
+    property({ type: String })
+], SDSHeading.prototype, "as", void 0);
+SDSHeading = __decorate([
+    customElement('sds-heading')
+], SDSHeading);
+export { SDSHeading };
+//# sourceMappingURL=sds-heading.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-heading.js","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAMvC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIN,iBAAiB;QAEjB,UAAK,GAAU,IAAI,CAAC;IAkCrB,CAAC;IA7BS,MAAM;QACd,MAAM,cAAc,GAAG;YACtB,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI;YACnC,gBAAgB,EAAE,IAAI,CAAC,EAAE,KAAK,GAAG;YACjC,gBAAgB,EAAE,IAAI,CAAC,EAAE,KAAK,GAAG;YACjC,gBAAgB,EAAE,IAAI,CAAC,EAAE,KAAK,GAAG;YACjC,iBAAiB,EAAE,IAAI,CAAC,EAAE,KAAK,IAAI;SACnC,CAAC;QAEF,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;QAEzC,QAAQ,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;YAClC,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD,KAAK,IAAI;gBACR,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;YACtD;gBACC,OAAO,IAAI,CAAA,aAAa,OAAO,qBAAqB,CAAC;QACvD,CAAC;IACF,CAAC;;AAtCD,UAAU;AACM,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACP;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACV;AATL,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAwCtB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-heading.styles';\n\ntype Level = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\ntype DisplaySize = 'xl' | 'l' | 'm' | 's' | 'xs';\n\n@customElement('sds-heading')\nexport class SDSHeading extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String })\n\tlevel: Level = 'h1';\n\n\t@property({ type: String })\n\tas?: DisplaySize;\n\n\toverride render() {\n\t\tconst headingClasses = {\n\t\t\t'sds-heading': true,\n\t\t\t'sds-heading--xl': this.as === 'xl',\n\t\t\t'sds-heading--l': this.as === 'l',\n\t\t\t'sds-heading--m': this.as === 'm',\n\t\t\t'sds-heading--s': this.as === 's',\n\t\t\t'sds-heading--xs': this.as === 'xs',\n\t\t};\n\n\t\tconst classes = classMap(headingClasses);\n\n\t\tswitch (this.level.toLowerCase()) {\n\t\t\tcase 'h1':\n\t\t\t\treturn html`<h1 class=${classes}><slot></slot></h1>`;\n\t\t\tcase 'h2':\n\t\t\t\treturn html`<h2 class=${classes}><slot></slot></h2>`;\n\t\t\tcase 'h3':\n\t\t\t\treturn html`<h3 class=${classes}><slot></slot></h3>`;\n\t\t\tcase 'h4':\n\t\t\t\treturn html`<h4 class=${classes}><slot></slot></h4>`;\n\t\t\tcase 'h5':\n\t\t\t\treturn html`<h5 class=${classes}><slot></slot></h5>`;\n\t\t\tcase 'h6':\n\t\t\t\treturn html`<h6 class=${classes}><slot></slot></h6>`;\n\t\t\tdefault:\n\t\t\t\treturn html`<h1 class=${classes}><slot></slot></h1>`;\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-heading': SDSHeading;\n\t}\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,105 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		--_heading-text-align: left;
+		display: inline-block;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	.sds-heading {
+		font-family: var(--sds-typography-font-family);
+		color: var(--sds-color-semantic-text-default);
+		display: inline-block;
+		margin: 0;
+		max-width: var(--sds-typography-max-line-width);
+		padding: 0;
+		text-align: var(--_heading-text-align);
+	}
+
+	h1,
+	.sds-heading--xl {
+		font-size: 2rem;
+		font-weight: 700;
+		line-height: 1.24;
+	}
+
+	@media (min-width: 640px) {
+		h1,
+		.sds-heading--xl {
+			font-size: 2.5rem;
+			font-weight: 700;
+			line-height: 1.4;
+		}
+	}
+
+	h2,
+	.sds-heading--l {
+		font-size: 1.5rem;
+		font-weight: 500;
+		line-height: 1.333;
+	}
+
+	@media (min-width: 640px) {
+		h2,
+		.sds-heading--l {
+			font-size: 2rem;
+			font-weight: 700;
+			line-height: 1.24;
+		}
+	}
+
+	h3,
+	.sds-heading--m {
+		font-size: 1.25rem;
+		font-weight: 500;
+		line-height: 1.4;
+	}
+
+	@media (min-width: 640px) {
+		h3,
+		.sds-heading--m {
+			font-size: 1.5rem;
+			font-weight: 500;
+			line-height: 1.333;
+		}
+	}
+
+	h4,
+	.sds-heading--s {
+		font-size: 1.125rem;
+		font-weight: 500;
+		line-height: 1.333;
+	}
+
+	@media (min-width: 640px) {
+		h4,
+		.sds-heading--s {
+			font-size: 1.25rem;
+			font-weight: 500;
+			line-height: 1.4;
+		}
+	}
+
+	h5,
+	h6,
+	.sds-heading--xs {
+		font-size: 1.063rem;
+		line-height: 1.3529;
+	}
+
+	@media (min-width: 640px) {
+		h5,
+		h6,
+		.sds-heading--xs {
+			font-size: 1.125rem;
+			font-weight: 500;
+			line-height: 1.333;
+		}
+	}
+`;
+//# sourceMappingURL=sds-heading.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-heading.styles.js","sourceRoot":"","sources":["../../src/sds-heading/sds-heading.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_heading-text-align: left;\n\t\tdisplay: inline-block;\n\t}\n\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\t.sds-heading {\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tdisplay: inline-block;\n\t\tmargin: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding: 0;\n\t\ttext-align: var(--_heading-text-align);\n\t}\n\n\th1,\n\t.sds-heading--xl {\n\t\tfont-size: 2rem;\n\t\tfont-weight: 700;\n\t\tline-height: 1.24;\n\t}\n\n\t@media (min-width: 640px) {\n\t\th1,\n\t\t.sds-heading--xl {\n\t\t\tfont-size: 2.5rem;\n\t\t\tfont-weight: 700;\n\t\t\tline-height: 1.4;\n\t\t}\n\t}\n\n\th2,\n\t.sds-heading--l {\n\t\tfont-size: 1.5rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.333;\n\t}\n\n\t@media (min-width: 640px) {\n\t\th2,\n\t\t.sds-heading--l {\n\t\t\tfont-size: 2rem;\n\t\t\tfont-weight: 700;\n\t\t\tline-height: 1.24;\n\t\t}\n\t}\n\n\th3,\n\t.sds-heading--m {\n\t\tfont-size: 1.25rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.4;\n\t}\n\n\t@media (min-width: 640px) {\n\t\th3,\n\t\t.sds-heading--m {\n\t\t\tfont-size: 1.5rem;\n\t\t\tfont-weight: 500;\n\t\t\tline-height: 1.333;\n\t\t}\n\t}\n\n\th4,\n\t.sds-heading--s {\n\t\tfont-size: 1.125rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.333;\n\t}\n\n\t@media (min-width: 640px) {\n\t\th4,\n\t\t.sds-heading--s {\n\t\t\tfont-size: 1.25rem;\n\t\t\tfont-weight: 500;\n\t\t\tline-height: 1.4;\n\t\t}\n\t}\n\n\th5,\n\th6,\n\t.sds-heading--xs {\n\t\tfont-size: 1.063rem;\n\t\tline-height: 1.3529;\n\t}\n\n\t@media (min-width: 640px) {\n\t\th5,\n\t\th6,\n\t\t.sds-heading--xs {\n\t\t\tfont-size: 1.125rem;\n\t\t\tfont-weight: 500;\n\t\t\tline-height: 1.333;\n\t\t}\n\t}\n`;\n"]}

package/dist/sds-icon/sds-icon-loader.d.ts

@@ -0,0 +1,7 @@
+export type IconPromise = (iconName: string) => Promise<string>;
+export declare class SDSIconLoader {
+    private readonly cache;
+    resolver: IconPromise;
+    resolve(name: string, onResolved: (svg: string) => void): void;
+}
+//# sourceMappingURL=sds-icon-loader.d.ts.map

package/dist/sds-icon/sds-icon-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-icon-loader.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;AAOhE,qBAAa,aAAa;IACzB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA6B;IACnD,QAAQ,EAAE,WAAW,CAAY;IAEjC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI;CAoB9D"}

package/dist/sds-icon/sds-icon-loader.js

@@ -0,0 +1,26 @@
+// TODO: When the icons are available through CDN we want to let the user choose to fetch icons from CDN or locally
+const loadIcon = async (name) => await import(`@politiet/sheriff-icons/dist/${name}.js`).then(({ default: svg }) => svg);
+export class SDSIconLoader {
+    constructor() {
+        this.cache = new Map();
+        this.resolver = loadIcon;
+    }
+    resolve(name, onResolved) {
+        const cached = this.cache.get(name);
+        if (cached != null) {
+            onResolved(cached);
+            return;
+        }
+        const fetchIcon = this.resolver(name)
+            .catch((error) => {
+            console.error(`Failed to fetch icon '${name}':`, error);
+            return '';
+        })
+            .then((svg) => {
+            this.cache.set(name, svg);
+            return svg;
+        });
+        void fetchIcon.then(onResolved);
+    }
+}
+//# sourceMappingURL=sds-icon-loader.js.map

package/dist/sds-icon/sds-icon-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-icon-loader.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon-loader.ts"],"names":[],"mappings":"AAEA,mHAAmH;AAEnH,MAAM,QAAQ,GAAgB,KAAK,EAAE,IAAY,EAAE,EAAE,CACpD,MAAM,MAAM,CAAC,gCAAgC,IAAI,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;AAEzF,MAAM,OAAO,aAAa;IAA1B;QACkB,UAAK,GAAG,IAAI,GAAG,EAAkB,CAAC;QACnD,aAAQ,GAAgB,QAAQ,CAAC;IAsBlC,CAAC;IApBA,OAAO,CAAC,IAAY,EAAE,UAAiC;QACtD,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAEpC,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;YACpB,UAAU,CAAC,MAAM,CAAC,CAAC;YACnB,OAAO;QACR,CAAC;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;aACnC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YAChB,OAAO,CAAC,KAAK,CAAC,yBAAyB,IAAI,IAAI,EAAE,KAAK,CAAC,CAAC;YACxD,OAAO,EAAE,CAAC;QACX,CAAC,CAAC;aACD,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;YACb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;YAC1B,OAAO,GAAG,CAAC;QACZ,CAAC,CAAC,CAAC;QAEJ,KAAK,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACjC,CAAC;CACD","sourcesContent":["export type IconPromise = (iconName: string) => Promise<string>;\n\n// TODO: When the icons are available through CDN we want to let the user choose to fetch icons from CDN or locally\n\nconst loadIcon: IconPromise = async (name: string) =>\n\tawait import(`@politiet/sheriff-icons/dist/${name}.js`).then(({ default: svg }) => svg);\n\nexport class SDSIconLoader {\n\tprivate readonly cache = new Map<string, string>();\n\tresolver: IconPromise = loadIcon;\n\n\tresolve(name: string, onResolved: (svg: string) => void): void {\n\t\tconst cached = this.cache.get(name);\n\n\t\tif (cached != null) {\n\t\t\tonResolved(cached);\n\t\t\treturn;\n\t\t}\n\n\t\tconst fetchIcon = this.resolver(name)\n\t\t\t.catch((error) => {\n\t\t\t\tconsole.error(`Failed to fetch icon '${name}':`, error);\n\t\t\t\treturn '';\n\t\t\t})\n\t\t\t.then((svg) => {\n\t\t\t\tthis.cache.set(name, svg);\n\t\t\t\treturn svg;\n\t\t\t});\n\n\t\tvoid fetchIcon.then(onResolved);\n\t}\n}\n"]}

package/dist/sds-icon/sds-icon.allowed-colors.d.ts

@@ -0,0 +1,3 @@
+import { type ColorType } from './sds-icon.color-types';
+export declare const allowedColorTypes: ColorType[];
+//# sourceMappingURL=sds-icon.allowed-colors.d.ts.map

package/dist/sds-icon/sds-icon.allowed-colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-icon.allowed-colors.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.allowed-colors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,SAAS,EAexC,CAAC"}

package/dist/sds-icon/sds-icon.allowed-colors.js

@@ -0,0 +1,17 @@
+export const allowedColorTypes = [
+    'currentColor',
+    'var(--sds-color-semantic-icon-action-selected)',
+    'var(--sds-color-semantic-icon-action-active)',
+    'var(--sds-color-semantic-icon-action-hover)',
+    'var(--sds-color-semantic-icon-action-default)',
+    'var(--sds-color-semantic-icon-critical)',
+    'var(--sds-color-semantic-icon-warning)',
+    'var(--sds-color-semantic-icon-attention)',
+    'var(--sds-color-semantic-icon-ok)',
+    'var(--sds-color-semantic-icon-info)',
+    'var(--sds-color-semantic-icon-on-action)',
+    'var(--sds-color-semantic-icon-disabled)',
+    'var(--sds-color-semantic-icon-subtle)',
+    'var(--sds-color-semantic-icon-default)',
+];
+//# sourceMappingURL=sds-icon.allowed-colors.js.map

package/dist/sds-icon/sds-icon.allowed-colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-icon.allowed-colors.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.allowed-colors.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,iBAAiB,GAAgB;IAC7C,cAAc;IACd,gDAAgD;IAChD,8CAA8C;IAC9C,6CAA6C;IAC7C,+CAA+C;IAC/C,yCAAyC;IACzC,wCAAwC;IACxC,0CAA0C;IAC1C,mCAAmC;IACnC,qCAAqC;IACrC,0CAA0C;IAC1C,yCAAyC;IACzC,uCAAuC;IACvC,wCAAwC;CACxC,CAAC","sourcesContent":["import { type ColorType } from './sds-icon.color-types';\n\nexport const allowedColorTypes: ColorType[] = [\n\t'currentColor',\n\t'var(--sds-color-semantic-icon-action-selected)',\n\t'var(--sds-color-semantic-icon-action-active)',\n\t'var(--sds-color-semantic-icon-action-hover)',\n\t'var(--sds-color-semantic-icon-action-default)',\n\t'var(--sds-color-semantic-icon-critical)',\n\t'var(--sds-color-semantic-icon-warning)',\n\t'var(--sds-color-semantic-icon-attention)',\n\t'var(--sds-color-semantic-icon-ok)',\n\t'var(--sds-color-semantic-icon-info)',\n\t'var(--sds-color-semantic-icon-on-action)',\n\t'var(--sds-color-semantic-icon-disabled)',\n\t'var(--sds-color-semantic-icon-subtle)',\n\t'var(--sds-color-semantic-icon-default)',\n];\n"]}

package/dist/sds-icon/sds-icon.allowed-names.d.ts

@@ -0,0 +1,3 @@
+import { type IconType } from './sds-icon.icon-types';
+export declare const allowedIconTypes: IconType[];
+//# sourceMappingURL=sds-icon.allowed-names.d.ts.map

package/dist/sds-icon/sds-icon.allowed-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-icon.allowed-names.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.allowed-names.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,eAAO,MAAM,gBAAgB,EAAE,QAAQ,EAAqquI,CAAC"}