@politiet/sheriff-web-components 0.0.1 → 0.1.0

package/dist/index.d.ts

@@ -1,2 +1,4 @@
-export * from './s-button/s-button';
+export * from './sds-button/sds-button';
+export * from './sds-chip/sds-chip';
+export * from './sds-nav-card/sds-nav-card';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC"}

package/dist/index.js

@@ -1,2 +1,4 @@
-export * from './s-button/s-button';
+export * from './sds-button/sds-button';
+export * from './sds-chip/sds-chip';
+export * from './sds-nav-card/sds-nav-card';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './s-button/s-button';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './sds-button/sds-button';\nexport * from './sds-chip/sds-chip';\nexport * from './sds-nav-card/sds-nav-card';\n"]}

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

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+type ButtonType = 'button' | 'submit' | 'reset';
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+type ButtonSize = 'large' | 'medium' | 'small';
+export declare class SButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    name: string;
+    type: ButtonType;
+    variant: ButtonVariant;
+    size: ButtonSize;
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-button': SButton;
+    }
+}
+export {};
+//# sourceMappingURL=sds-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAC1D,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAG,MAAM,CAAC;IAGd,IAAI,EAAE,UAAU,CAAY;IAG5B,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAW;IAG3B,QAAQ,EAAE,OAAO,CAAS;IAEjB,MAAM;CAoBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,OAAO,CAAC;KACtB;CACD"}

package/dist/{s-button/s-button.js → sds-button/sds-button.js}

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { styles } from './s-button.styles';
+import { styles } from './sds-button.styles';
 let SButton = class SButton extends LitElement {
     constructor() {
         super(...arguments);
@@ -18,14 +18,15 @@ let SButton = class SButton extends LitElement {
     }
     render() {
         const buttonClasses = {
-            's-button--secondary': this.variant === 'secondary',
-            's-button--tertiary': this.variant === 'tertiary',
-            's-button--medium': this.size === 'medium',
-            's-button--small': this.size === 'small',
+            'sds-button': true,
+            'sds-button--secondary': this.variant === 'secondary',
+            'sds-button--tertiary': this.variant === 'tertiary',
+            'sds-button--medium': this.size === 'medium',
+            'sds-button--small': this.size === 'small',
         };
         return html `
 			<button
-				class="s-button${classMap(buttonClasses)}"
+				class="${classMap(buttonClasses)}"
 				type="${this.type}"
 				name="${this.name}"
 				?disabled="${this.disabled}"
@@ -53,7 +54,7 @@ __decorate([
     property({ type: Boolean })
 ], SButton.prototype, "disabled", void 0);
 SButton = __decorate([
-    customElement('s-button')
+    customElement('sds-button')
 ], SButton);
 export { SButton };
-//# sourceMappingURL=s-button.js.map
+//# sourceMappingURL=sds-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.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;AAOtC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QASN,SAAI,GAAe,QAAQ,CAAC;QAG5B,YAAO,GAAkB,SAAS,CAAC;QAGnC,SAAI,GAAe,OAAO,CAAC;QAG3B,aAAQ,GAAY,KAAK,CAAC;IAsB3B,CAAC;IApBS,MAAM;QACd,MAAM,aAAa,GAAG;YACrB,YAAY,EAAE,IAAI;YAClB,uBAAuB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YACrD,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YACnD,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC5C,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SAC1C,CAAC;QAEF,OAAO,IAAI,CAAA;;aAEA,QAAQ,CAAC,aAAa,CAAC;YACxB,IAAI,CAAC,IAAI;YACT,IAAI,CAAC,IAAI;iBACJ,IAAI,CAAC,QAAQ;;;;GAI3B,CAAC;IACH,CAAC;;AAtCD,UAAU;AACM,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACC;AAG5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACQ;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACA;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACF;AAlBd,OAAO;IADnB,aAAa,CAAC,YAAY,CAAC;GACf,OAAO,CAwCnB","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-button.styles';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary';\ntype ButtonSize = 'large' | 'medium' | 'small';\n\n@customElement('sds-button')\nexport class SButton extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String })\n\tname!: string;\n\n\t@property({ type: String })\n\ttype: ButtonType = 'button';\n\n\t@property({ type: String })\n\tvariant: ButtonVariant = 'primary';\n\n\t@property({ type: String })\n\tsize: ButtonSize = 'large';\n\n\t@property({ type: Boolean })\n\tdisabled: boolean = false;\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-button': true,\n\t\t\t'sds-button--secondary': this.variant === 'secondary',\n\t\t\t'sds-button--tertiary': this.variant === 'tertiary',\n\t\t\t'sds-button--medium': this.size === 'medium',\n\t\t\t'sds-button--small': this.size === 'small',\n\t\t};\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${this.name}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t>\n\t\t\t\t<slot></slot>\n\t\t\t</button>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SButton;\n\t}\n}\n"]}

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

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

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

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

package/dist/{s-button/s-button.styles.js → sds-button/sds-button.styles.js}

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 export const styles = css `
-	.s-button {
+	.sds-button {
 		align-items: center;
 		display: inline-flex;
 		gap: var(--sds-spacing-3, 8px);
@@ -39,11 +39,12 @@ export const styles = css `
 		&:disabled {
 			background-color: var(--sds-color-semantic-surface-disabled);
 			border: 2px solid var(--sds-color-semantic-surface-disabled);
+			color: var(--sds-color-semantic-text-subtle);
 			cursor: not-allowed;
 		}
 	}
 
-	.s-button--secondary {
+	.sds-button--secondary {
 		background-color: var(--sds-color-semantic-surface-action-inverted);
 		border: 2px solid var(--sds-color-semantic-border-action);
 		color: var(--sds-color-semantic-text-default);
@@ -71,7 +72,7 @@ export const styles = css `
 		}
 	}
 
-	.s-button--tertiary {
+	.sds-button--tertiary {
 		background-color: transparent;
 		border: 2px solid transparent;
 		color: var(--sds-color-semantic-text-action-default);
@@ -103,13 +104,13 @@ export const styles = css `
 		}
 	}
 
-	.s-button--medium {
+	.sds-button--medium {
 		padding: var(--sds-spacing-1) var(--sds-spacing-3);
 	}
 
-	.s-button--small {
+	.sds-button--small {
 		font-size: 0.875rem;
 		padding: 0 var(--sds-spacing-3);
 	}
 `;
-//# sourceMappingURL=s-button.styles.js.map
+//# sourceMappingURL=sds-button.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t.sds-button {\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-default);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: var(--sds-radius-4);\n\t\tcursor: pointer;\n\n\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\tfont-family: 'Roboto';\n\t\tfont-size: 1rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.5;\n\t\ttext-align: center;\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-hover);\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\toutline: 0;\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-subtle);\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t.sds-button--secondary {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\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\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\t\t\tbackground: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.sds-button--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--sds-color-semantic-text-action-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t\ttext-decoration: underline;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\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\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t\tposition: relative;\n\t\t\ttext-decoration: underline;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid transparent;\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\n\t.sds-button--medium {\n\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t}\n\n\t.sds-button--small {\n\t\tfont-size: 0.875rem;\n\t\tpadding: 0 var(--sds-spacing-3);\n\t}\n`;\n"]}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+export declare class SChip extends LitElement {
+    static styles: import("lit").CSSResult[];
+    size: 'large' | 'medium' | 'small';
+    disabled: boolean;
+    selectable: boolean;
+    selected: boolean;
+    removable: boolean;
+    onSelect: () => void;
+    onUnselect: () => void;
+    render(): import("lit-html").TemplateResult<1>;
+    _unselect(): void;
+    _select(): void;
+    _toggle(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-chip': SChip;
+    }
+}
+//# sourceMappingURL=sds-chip.d.ts.map

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

@@ -0,0 +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,KAAM,SAAQ,UAAU;IAEpC,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,KAAK,CAAC;KAClB;CACD"}

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

@@ -0,0 +1,106 @@
+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;
+};
+/* 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 { styles } from './sds-chip.styles';
+let SChip = class SChip extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Reactive Props
+        this.size = 'large';
+        this.disabled = false;
+        this.selectable = false;
+        this.selected = false;
+        this.removable = false;
+        this.onSelect = () => { };
+        this.onUnselect = () => { };
+    }
+    render() {
+        const buttonClasses = {
+            'sds-chip--medium': this.size === 'medium',
+            '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}
+			>
+				<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();
+    }
+};
+// Styling
+SChip.styles = [styles];
+__decorate([
+    property({ type: String })
+], SChip.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], SChip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], SChip.prototype, "selectable", void 0);
+__decorate([
+    property({ type: Boolean })
+], SChip.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], SChip.prototype, "removable", void 0);
+__decorate([
+    property({ attribute: false })
+], SChip.prototype, "onSelect", void 0);
+__decorate([
+    property({ attribute: false })
+], SChip.prototype, "onUnselect", void 0);
+SChip = __decorate([
+    customElement('sds-chip')
+], SChip);
+export { SChip };
+//# sourceMappingURL=sds-chip.js.map

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

@@ -0,0 +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 SChip 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': SChip;\n\t}\n}\n"]}

package/dist/{s-button/s-button.styles.d.ts → sds-chip/sds-chip.styles.d.ts}

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

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

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

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

@@ -0,0 +1,109 @@
+import { css } from 'lit';
+export const styles = css `
+	.sds-chip {
+		align-items: center;
+		display: inline-flex;
+		gap: var(--sds-spacing-3, 8px);
+		justify-content: center;
+		padding: var(--sds-spacing-3) 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;
+
+		font-family: 'Roboto';
+		font-size: 1rem;
+		line-height: 1.5;
+		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;
+			}
+		}
+
+		&[data-selected] {
+			background-color: var(--sds-color-semantic-surface-action-selected);
+			border-color: var(--sds-color-semantic-surface-action-selected);
+			color: var(--sds-color-semantic-text-on-action);
+		}
+
+		&: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;
+			}
+		}
+
+		&[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;
+			}
+		}
+
+		&[data-size='large'],
+		&[data-size=''] {
+			.sds-chip-remove-button span {
+				position: relative;
+				top: 1px;
+			}
+		}
+	}
+
+	.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;
+
+		&:hover {
+			background-color: var(--sds-color-semantic-surface-action-hover);
+			color: var(--sds-color-semantic-text-on-action);
+		}
+	}
+`;
+//# sourceMappingURL=sds-chip.styles.js.map

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

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

package/dist/sds-nav-card/sds-nav-card.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+export declare class SNavCard extends LitElement {
+    /**
+     * This is the navigation card component
+     *
+     * @remarks The way the icon is handled now, causes a double update/side effect when loading the webpage.
+     * The svg that should be placed inside the slot, currently needs have its stroke attribute manually removed,
+     * in order for the components CSS to insert its own stroke color.
+     * This should be looked more into.
+     *
+     */
+    static styles: import("lit").CSSResult[];
+    size: 'large' | 'medium' | 'small';
+    heading: string;
+    level: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    text: string;
+    link: string;
+    private hasIcon;
+    private iconSlot;
+    firstUpdated(): void;
+    private _handleSlotChange;
+    private _filterToMeaningfulNodes;
+    private _checkSlotContent;
+    private _renderHeading;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-nav-card': SNavCard;
+    }
+}
+//# sourceMappingURL=sds-nav-card.d.ts.map

package/dist/sds-nav-card/sds-nav-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-nav-card.d.ts","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,qBACa,QAAS,SAAQ,UAAU;IACvC;;;;;;;;OAQG;IAGH,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAG7C,OAAO,EAAG,MAAM,CAAC;IAGjB,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAG/C,IAAI,EAAG,MAAM,CAAC;IAGd,IAAI,EAAG,MAAM,CAAC;IAId,OAAO,CAAC,OAAO,CAAkB;IAGjC,OAAO,CAAC,QAAQ,CAAmB;IAE1B,YAAY;IAIrB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,cAAc;IAmBb,MAAM;CAqBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,QAAQ,CAAC;KACzB;CACD"}

package/dist/sds-nav-card/sds-nav-card.js

@@ -0,0 +1,116 @@
+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, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './sds-nav-card.styles';
+let SNavCard = class SNavCard extends LitElement {
+    constructor() {
+        /**
+         * This is the navigation card component
+         *
+         * @remarks The way the icon is handled now, causes a double update/side effect when loading the webpage.
+         * The svg that should be placed inside the slot, currently needs have its stroke attribute manually removed,
+         * in order for the components CSS to insert its own stroke color.
+         * This should be looked more into.
+         *
+         */
+        super(...arguments);
+        // Reactive Props
+        this.size = 'large';
+        this.level = 'h2';
+        // Managing the icon slot
+        this.hasIcon = false;
+    }
+    firstUpdated() {
+        this._checkSlotContent();
+    }
+    _handleSlotChange() {
+        this._checkSlotContent();
+    }
+    // Filters out text nodes that only contain whitespace
+    _filterToMeaningfulNodes(nodes) {
+        return nodes.filter((node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const textContent = node.textContent;
+                return textContent !== null && textContent.trim().length > 0;
+            }
+            return true;
+        });
+    }
+    // Checks if the icon slot has content and updates the state variable
+    _checkSlotContent() {
+        const assignedNodes = this.iconSlot.assignedNodes({ flatten: true });
+        const meaningfulNodes = this._filterToMeaningfulNodes(assignedNodes);
+        this.hasIcon = meaningfulNodes.length !== 0;
+    }
+    _renderHeading() {
+        const headingClass = 'sds-nav-card__heading';
+        switch (this.level) {
+            case 'h2':
+                return html `<h2 class="${headingClass}">${this.heading}</h2>`;
+            case 'h3':
+                return html `<h3 class="${headingClass}">${this.heading}</h3>`;
+            case 'h4':
+                return html `<h4 class="${headingClass}">${this.heading}</h4>`;
+            case 'h5':
+                return html `<h5 class="${headingClass}">${this.heading}</h5>`;
+            case 'h6':
+                return html `<h6 class="${headingClass}">${this.heading}</h6>`;
+            default:
+                return html `<h2 class="${headingClass}">${this.heading}</h2>`;
+        }
+    }
+    render() {
+        const navCardClasses = {
+            'sds-nav-card': true,
+            'sds-nav-card--hasIcon': this.hasIcon,
+            'sds-nav-card--small': this.size === 'small',
+            'sds-nav-card--medium': this.size === 'medium',
+            'sds-nav-card--large': this.size === 'large',
+        };
+        return html `
+			<a class="${classMap(navCardClasses)}" href="${this.link}">
+				<slot @slotchange=${this._handleSlotChange}></slot>
+				<div class="sds-nav-card__content">
+					${this._renderHeading()}
+					${this.size === 'small'
+            ? ''
+            : html `<p class="sds-nav-card__text">${this.text}</p>`}
+				</div>
+			</a>
+		`;
+    }
+};
+// Styling
+SNavCard.styles = [styles];
+__decorate([
+    property({ type: String })
+], SNavCard.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], SNavCard.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], SNavCard.prototype, "level", void 0);
+__decorate([
+    property({ type: String })
+], SNavCard.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], SNavCard.prototype, "link", void 0);
+__decorate([
+    state()
+], SNavCard.prototype, "hasIcon", void 0);
+__decorate([
+    query('slot')
+], SNavCard.prototype, "iconSlot", void 0);
+SNavCard = __decorate([
+    customElement('sds-nav-card')
+], SNavCard);
+export { SNavCard };
+//# sourceMappingURL=sds-nav-card.js.map

package/dist/sds-nav-card/sds-nav-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-nav-card.js","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-nav-card.styles';\n\n@customElement('sds-nav-card')\nexport class SNavCard extends LitElement {\n\t/**\n\t * This is the navigation card component\n\t *\n\t * @remarks The way the icon is handled now, causes a double update/side effect when loading the webpage.\n\t * The svg that should be placed inside the slot, currently needs have its stroke attribute manually removed,\n\t * in order for the components CSS to insert its own stroke color.\n\t * This should be looked more into.\n\t *\n\t */\n\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: String })\n\theading!: string;\n\n\t@property({ type: String })\n\tlevel: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2';\n\n\t@property({ type: String })\n\ttext!: string;\n\n\t@property({ type: String })\n\tlink!: string;\n\n\t// Managing the icon slot\n\t@state()\n\tprivate hasIcon: boolean = false;\n\n\t@query('slot')\n\tprivate iconSlot!: HTMLSlotElement;\n\n\toverride firstUpdated() {\n\t\tthis._checkSlotContent();\n\t}\n\n\tprivate _handleSlotChange() {\n\t\tthis._checkSlotContent();\n\t}\n\n\t// Filters out text nodes that only contain whitespace\n\tprivate _filterToMeaningfulNodes(nodes: Node[]) {\n\t\treturn nodes.filter((node) => {\n\t\t\tif (node.nodeType === Node.TEXT_NODE) {\n\t\t\t\tconst textContent = (node as Text).textContent;\n\t\t\t\treturn textContent !== null && textContent.trim().length > 0;\n\t\t\t}\n\t\t\treturn true;\n\t\t});\n\t}\n\n\t// Checks if the icon slot has content and updates the state variable\n\tprivate _checkSlotContent() {\n\t\tconst assignedNodes = this.iconSlot.assignedNodes({ flatten: true });\n\t\tconst meaningfulNodes = this._filterToMeaningfulNodes(assignedNodes);\n\t\tthis.hasIcon = meaningfulNodes.length !== 0;\n\t}\n\n\tprivate _renderHeading() {\n\t\tconst headingClass = 'sds-nav-card__heading';\n\n\t\tswitch (this.level) {\n\t\t\tcase 'h2':\n\t\t\t\treturn html`<h2 class=\"${headingClass}\">${this.heading}</h2>`;\n\t\t\tcase 'h3':\n\t\t\t\treturn html`<h3 class=\"${headingClass}\">${this.heading}</h3>`;\n\t\t\tcase 'h4':\n\t\t\t\treturn html`<h4 class=\"${headingClass}\">${this.heading}</h4>`;\n\t\t\tcase 'h5':\n\t\t\t\treturn html`<h5 class=\"${headingClass}\">${this.heading}</h5>`;\n\t\t\tcase 'h6':\n\t\t\t\treturn html`<h6 class=\"${headingClass}\">${this.heading}</h6>`;\n\t\t\tdefault:\n\t\t\t\treturn html`<h2 class=\"${headingClass}\">${this.heading}</h2>`;\n\t\t}\n\t}\n\n\toverride render() {\n\t\tconst navCardClasses = {\n\t\t\t'sds-nav-card': true,\n\t\t\t'sds-nav-card--hasIcon': this.hasIcon,\n\t\t\t'sds-nav-card--small': this.size === 'small',\n\t\t\t'sds-nav-card--medium': this.size === 'medium',\n\t\t\t'sds-nav-card--large': this.size === 'large',\n\t\t};\n\n\t\treturn html`\n\t\t\t<a class=\"${classMap(navCardClasses)}\" href=\"${this.link}\">\n\t\t\t\t<slot @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t<div class=\"sds-nav-card__content\">\n\t\t\t\t\t${this._renderHeading()}\n\t\t\t\t\t${this.size === 'small'\n\t\t\t\t\t\t? ''\n\t\t\t\t\t\t: html`<p class=\"sds-nav-card__text\">${this.text}</p>`}\n\t\t\t\t</div>\n\t\t\t</a>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-nav-card': SNavCard;\n\t}\n}\n"]}

package/dist/sds-nav-card/sds-nav-card.styles.d.ts

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

package/dist/sds-nav-card/sds-nav-card.styles.d.ts.map

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

package/dist/sds-nav-card/sds-nav-card.styles.js

@@ -0,0 +1,158 @@
+import { css } from 'lit';
+export const styles = css `
+	.sds-nav-card {
+		color: var(--sds-color-semantic-text-default);
+		background-color: var(
+			--sds-color-global-lightblue-100
+		); // TODO: Global variable used, should be replaced by a more spesific one
+
+		font-size: var(--sds-typography-base-font-size);
+		line-height: var(--sds-typography-base-line-height);
+		font-weight: var(--sds-typography-base-font-weight);
+		font-family: var(--sds-typography-font-family);
+
+		display: flex;
+		min-height: 10.25rem;
+		height: 100%;
+		width: 100%;
+		max-width: 50rem;
+		min-width: 20rem;
+
+		box-sizing: border-box;
+		padding: var(--sds-spacing-7) var(--sds-spacing-9) var(--sds-spacing-8);
+		gap: var(--sds-spacing-5);
+		text-align: left;
+
+		border-radius: var(--sds-radius-card);
+		border: 1px solid transparent;
+
+		cursor: pointer;
+
+		& p {
+			padding: 0;
+			margin: 0;
+			hyphens: auto;
+		}
+
+		&:link {
+			text-decoration: none;
+		}
+
+		&:hover {
+			background-color: var(
+				--sds-color-global-lightblue-300
+			); // TODO: Global variable used, should be replaced by a more spesific one
+
+			.sds-nav-card__heading {
+				text-decoration: none;
+			}
+		}
+
+		&:active,
+		&:focus:active {
+			background-color: var(--sds-color-semantic-surface-action-selected);
+			color: var(--sds-color-semantic-text-on-action);
+
+			.sds-nav-card__heading {
+				text-decoration: underline;
+				text-decoration-thickness: 0.075rem;
+			}
+
+			::slotted(*) {
+				stroke: var(--sds-color-semantic-icon-on-action);
+			}
+		}
+
+		&:focus {
+			border: 1px solid var(--sds-color-semantic-border-focus);
+			background: var(
+				--sds-color-global-lightblue-100
+			); // TODO: Global variable used, should be replaced by a more spesific one
+		}
+
+		&:disabled {
+			background-color: var(--sds-color-semantic-surface-disabled);
+			pointer-events: none;
+		}
+	}
+
+	.sds-nav-card--hasIcon {
+		padding: var(--sds-spacing-7) var(--sds-spacing-7) var(--sds-spacing-8);
+	}
+
+	.sds-nav-card__content {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		gap: var(--sds-spacing-3);
+	}
+
+	.sds-nav-card__text {
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	::slotted(*) {
+		height: 4.5rem;
+		min-width: 4.5rem;
+		width: 4.5rem;
+		align-self: center;
+		stroke: var(
+			--sds-color-global-black
+		); // TODO: Global variable used, should be replaced by a more spesific one
+	}
+
+	.sds-nav-card__heading {
+		font-weight: 600;
+		font-size: 1.5rem;
+		margin: 0;
+		text-decoration: underline;
+		text-decoration-thickness: 0.075rem;
+		text-underline-offset: 0.146rem;
+	}
+
+	.sds-nav-card--medium {
+		min-height: 7rem;
+
+		.sds-nav-card__text {
+			display: -webkit-box;
+			display: flex;
+
+			-webkit-line-clamp: 1;
+			-webkit-box-orient: vertical;
+
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		::slotted(*) {
+			height: 3rem;
+			min-width: 3rem;
+			width: 3rem;
+		}
+	}
+
+	.sds-nav-card--small {
+		min-height: 4.5rem;
+		padding: var(--sds-spacing-5) var(--sds-spacing-8) var(--sds-spacing-6);
+
+		.sds-nav-card--hasIcon {
+			padding: var(--sds-spacing-5) var(--sds-spacing-7)
+				var(--sds-spacing-6);
+		}
+
+		.sds-nav-card__content {
+			gap: 0;
+			align-self: center;
+		}
+
+		::slotted(*) {
+			height: 2.5rem;
+			min-width: 2.5rem;
+			width: 2.5rem;
+		}
+	}
+`;
+//# sourceMappingURL=sds-nav-card.styles.js.map

package/dist/sds-nav-card/sds-nav-card.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-nav-card.styles.js","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2JxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t.sds-nav-card {\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tbackground-color: var(\n\t\t\t--sds-color-global-lightblue-100\n\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\n\t\tfont-size: var(--sds-typography-base-font-size);\n\t\tline-height: var(--sds-typography-base-line-height);\n\t\tfont-weight: var(--sds-typography-base-font-weight);\n\t\tfont-family: var(--sds-typography-font-family);\n\n\t\tdisplay: flex;\n\t\tmin-height: 10.25rem;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tmax-width: 50rem;\n\t\tmin-width: 20rem;\n\n\t\tbox-sizing: border-box;\n\t\tpadding: var(--sds-spacing-7) var(--sds-spacing-9) var(--sds-spacing-8);\n\t\tgap: var(--sds-spacing-5);\n\t\ttext-align: left;\n\n\t\tborder-radius: var(--sds-radius-card);\n\t\tborder: 1px solid transparent;\n\n\t\tcursor: pointer;\n\n\t\t& p {\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\thyphens: auto;\n\t\t}\n\n\t\t&:link {\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(\n\t\t\t\t--sds-color-global-lightblue-300\n\t\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\n\t\t\t.sds-nav-card__heading {\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t}\n\n\t\t&:active,\n\t\t&:focus:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-selected);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\n\t\t\t.sds-nav-card__heading {\n\t\t\t\ttext-decoration: underline;\n\t\t\t\ttext-decoration-thickness: 0.075rem;\n\t\t\t}\n\n\t\t\t::slotted(*) {\n\t\t\t\tstroke: var(--sds-color-semantic-icon-on-action);\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\tborder: 1px solid var(--sds-color-semantic-border-focus);\n\t\t\tbackground: var(\n\t\t\t\t--sds-color-global-lightblue-100\n\t\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-nav-card--hasIcon {\n\t\tpadding: var(--sds-spacing-7) var(--sds-spacing-7) var(--sds-spacing-8);\n\t}\n\n\t.sds-nav-card__content {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t\tgap: var(--sds-spacing-3);\n\t}\n\n\t.sds-nav-card__text {\n\t\tdisplay: -webkit-box;\n\t\t-webkit-line-clamp: 3;\n\t\t-webkit-box-orient: vertical;\n\t\toverflow: hidden;\n\t}\n\n\t::slotted(*) {\n\t\theight: 4.5rem;\n\t\tmin-width: 4.5rem;\n\t\twidth: 4.5rem;\n\t\talign-self: center;\n\t\tstroke: var(\n\t\t\t--sds-color-global-black\n\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\t}\n\n\t.sds-nav-card__heading {\n\t\tfont-weight: 600;\n\t\tfont-size: 1.5rem;\n\t\tmargin: 0;\n\t\ttext-decoration: underline;\n\t\ttext-decoration-thickness: 0.075rem;\n\t\ttext-underline-offset: 0.146rem;\n\t}\n\n\t.sds-nav-card--medium {\n\t\tmin-height: 7rem;\n\n\t\t.sds-nav-card__text {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: flex;\n\n\t\t\t-webkit-line-clamp: 1;\n\t\t\t-webkit-box-orient: vertical;\n\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\n\t\t::slotted(*) {\n\t\t\theight: 3rem;\n\t\t\tmin-width: 3rem;\n\t\t\twidth: 3rem;\n\t\t}\n\t}\n\n\t.sds-nav-card--small {\n\t\tmin-height: 4.5rem;\n\t\tpadding: var(--sds-spacing-5) var(--sds-spacing-8) var(--sds-spacing-6);\n\n\t\t.sds-nav-card--hasIcon {\n\t\t\tpadding: var(--sds-spacing-5) var(--sds-spacing-7)\n\t\t\t\tvar(--sds-spacing-6);\n\t\t}\n\n\t\t.sds-nav-card__content {\n\t\t\tgap: 0;\n\t\t\talign-self: center;\n\t\t}\n\n\t\t::slotted(*) {\n\t\t\theight: 2.5rem;\n\t\t\tmin-width: 2.5rem;\n\t\t\twidth: 2.5rem;\n\t\t}\n\t}\n`;\n"]}

package/package.json

@@ -1,14 +1,18 @@
 {
-	"name": "@politiet/sheriff-web-components",
-	"version": "0.0.1",
-	"description": "Sheriff Design System Web Components Library",
-	"main": "dist/sheriff.js",
-	"module": "dist/sheriff.js",
-	"type": "module",
-	"types": "dist/index.d.ts",
-	"files": [
-		"dist"
-	],
-	"author": "Politiets IT-enhet",
-	"license": "ISC"
+    "name": "@politiet/sheriff-web-components",
+    "version": "0.1.0",
+    "description": "Sheriff Design System Web Components Library",
+    "main": "dist/sheriff.js",
+    "module": "dist/sheriff.js",
+    "type": "module",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build-components": "tsc",
+        "version-bump": "node ../../../scripts/bump-version.js"
+    },
+    "author": "Politiets IT-enhet",
+    "license": "ISC"
 }

package/dist/s-button/s-button.d.ts

@@ -1,16 +0,0 @@
-import { LitElement } from 'lit';
-export declare class SButton extends LitElement {
-    static styles: import("lit").CSSResult[];
-    name: string;
-    type: 'button' | 'submit' | 'reset';
-    variant: 'primary' | 'secondary' | 'tertiary';
-    size: 'large' | 'medium' | 'small';
-    disabled: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        's-button': SButton;
-    }
-}
-//# sourceMappingURL=s-button.d.ts.map

package/dist/s-button/s-button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"s-button.d.ts","sourceRoot":"","sources":["../../src/s-button/s-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAG,MAAM,CAAC;IAGd,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG/C,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAG1D,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAG7C,QAAQ,UAAS;IAER,MAAM;CAmBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

package/dist/s-button/s-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"s-button.js","sourceRoot":"","sources":["../../src/s-button/s-button.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,mBAAmB,CAAC;AAGpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QASN,SAAI,GAAkC,QAAQ,CAAC;QAG/C,YAAO,GAAyC,SAAS,CAAC;QAG1D,SAAI,GAAiC,OAAO,CAAC;QAG7C,aAAQ,GAAG,KAAK,CAAC;IAqBlB,CAAC;IAnBS,MAAM;QACd,MAAM,aAAa,GAAG;YACrB,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YACnD,oBAAoB,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YACjD,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC1C,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SACxC,CAAC;QAEF,OAAO,IAAI,CAAA;;qBAEQ,QAAQ,CAAC,aAAa,CAAC;YAChC,IAAI,CAAC,IAAI;YACT,IAAI,CAAC,IAAI;iBACJ,IAAI,CAAC,QAAQ;;;;GAI3B,CAAC;IACH,CAAC;;AArCD,UAAU;AACM,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACoB;AAG/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAC+B;AAG1D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACkB;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAlBL,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAuCnB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './s-button.styles';\n\n@customElement('s-button')\nexport class SButton extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String })\n\tname!: string;\n\n\t@property({ type: String })\n\ttype: 'button' | 'submit' | 'reset' = 'button';\n\n\t@property({ type: String })\n\tvariant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n\t@property({ type: String })\n\tsize: 'large' | 'medium' | 'small' = 'large';\n\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t's-button--secondary': this.variant === 'secondary',\n\t\t\t's-button--tertiary': this.variant === 'tertiary',\n\t\t\t's-button--medium': this.size === 'medium',\n\t\t\t's-button--small': this.size === 'small',\n\t\t};\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tclass=\"s-button${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${this.name}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t>\n\t\t\t\t<slot></slot>\n\t\t\t</button>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t's-button': SButton;\n\t}\n}\n"]}

package/dist/s-button/s-button.styles.d.ts.map

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

package/dist/s-button/s-button.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"s-button.styles.js","sourceRoot":"","sources":["../../src/s-button/s-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t.s-button {\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-default);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: var(--sds-radius-4);\n\t\tcursor: pointer;\n\n\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\tfont-family: 'Roboto';\n\t\tfont-size: 1rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.5;\n\t\ttext-align: center;\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-hover);\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\toutline: 0;\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\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t.s-button--secondary {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\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\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\t\t\tbackground: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.s-button--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--sds-color-semantic-text-action-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t\ttext-decoration: underline;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\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\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t\tposition: relative;\n\t\t\ttext-decoration: underline;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid transparent;\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\n\t.s-button--medium {\n\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t}\n\n\t.s-button--small {\n\t\tfont-size: 0.875rem;\n\t\tpadding: 0 var(--sds-spacing-3);\n\t}\n`;\n"]}