@politiet/sheriff-web-components 1.3.4 → 2.0.0-rc.0

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

@@ -1,13 +1,13 @@
 import { LitElement } from 'lit';
-type LoaderSize = 'large' | 'medium' | 'small';
+type LoaderSize = 'large' | 'medium' | 'small' | 'lg' | 'md' | 'sm';
 export interface SDSLoaderProps {
     size?: LoaderSize;
-    color?: string;
+    contrast?: boolean;
 }
 export declare class SDSLoader extends LitElement {
     static styles: import("lit").CSSResult[];
     size: LoaderSize;
-    color: string;
+    contrast: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"sds-loader.d.ts","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qBACa,SAAU,SAAQ,UAAU;IAExC,OAAgB,MAAM,4BAAY;IAGS,IAAI,EAAE,UAAU,CAAW;IAC3B,KAAK,EAAE,MAAM,CAAkB;IAEjE,MAAM;CASf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
+{"version":3,"file":"sds-loader.d.ts","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpE,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAY;IAES,IAAI,EAAE,UAAU,CAAQ;IACvB,QAAQ,EAAE,OAAO,CAAS;IAE7D,MAAM;CAMf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

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

@@ -6,33 +6,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
 import { styles } from './sds-loader.styles';
 let SDSLoader = class SDSLoader extends LitElement {
     constructor() {
         super(...arguments);
-        // Reactive Props
-        this.size = 'large';
-        this.color = 'currentColor';
+        this.size = 'md';
+        this.contrast = false;
     }
     render() {
-        const loaderClasses = {
-            'sds-loader': true,
-            'sds-loader--medium': this.size === 'medium',
-            'sds-loader--small': this.size === 'small',
-        };
-        return html `<span class="${classMap(loaderClasses)}" style="${`color:${this.color}`}"></span>`;
+        return html `<svg aria-label="Laster" class="sds-loader" role="img" viewBox="0 0 50 50">
+			<circle class="sds-loader__background" cx="25" cy="25" r="20" fill="none" stroke-width="7"></circle>
+			<circle class="sds-loader__circle" cx="25" cy="25" r="20" fill="none" stroke-width="7"></circle>
+		</svg>`;
     }
 };
-// Styling
 SDSLoader.styles = [styles];
 __decorate([
     property({ type: String, reflect: true })
 ], SDSLoader.prototype, "size", void 0);
 __decorate([
-    property({ type: String, reflect: true })
-], SDSLoader.prototype, "color", void 0);
+    property({ type: Boolean, reflect: true })
+], SDSLoader.prototype, "contrast", void 0);
 SDSLoader = __decorate([
     guardedCustomElement('sds-loader')
 ], SDSLoader);

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

@@ -1 +1 @@
-{"version":3,"file":"sds-loader.js","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAUtC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAIN,iBAAiB;QAC0B,SAAI,GAAe,OAAO,CAAC;QAC3B,UAAK,GAAW,cAAc,CAAC;IAW3E,CAAC;IATS,MAAM;QACd,MAAM,aAAa,GAAG;YACrB,YAAY,EAAE,IAAI;YAClB,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC5C,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SAC1C,CAAC;QAEF,OAAO,IAAI,CAAA,gBAAgB,QAAQ,CAAC,aAAa,CAAC,YAAY,SAAS,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC;IAChG,CAAC;;AAfD,UAAU;AACM,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAA4B;AAC3B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAgC;AAN9D,SAAS;IADrB,oBAAoB,CAAC,YAAY,CAAC;GACtB,SAAS,CAiBrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-loader.styles';\n\ntype LoaderSize = 'large' | 'medium' | 'small';\n\nexport interface SDSLoaderProps {\n\tsize?: LoaderSize;\n\tcolor?: string;\n}\n\n@guardedCustomElement('sds-loader')\nexport class SDSLoader extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) size: LoaderSize = 'large';\n\t@property({ type: String, reflect: true }) color: string = 'currentColor';\n\n\toverride render() {\n\t\tconst loaderClasses = {\n\t\t\t'sds-loader': true,\n\t\t\t'sds-loader--medium': this.size === 'medium',\n\t\t\t'sds-loader--small': this.size === 'small',\n\t\t};\n\n\t\treturn html`<span class=\"${classMap(loaderClasses)}\" style=\"${`color:${this.color}`}\"></span>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-loader': SDSLoader;\n\t}\n}\n"]}
+{"version":3,"file":"sds-loader.js","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAUtC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAGqC,SAAI,GAAe,IAAI,CAAC;QACvB,aAAQ,GAAY,KAAK,CAAC;IAQvE,CAAC;IANS,MAAM;QACd,OAAO,IAAI,CAAA;;;SAGJ,CAAC;IACT,CAAC;;AAVe,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAES;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAyB;AACvB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA2B;AAJ1D,SAAS;IADrB,oBAAoB,CAAC,YAAY,CAAC;GACtB,SAAS,CAYrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-loader.styles';\n\ntype LoaderSize = 'large' | 'medium' | 'small' | 'lg' | 'md' | 'sm';\n\nexport interface SDSLoaderProps {\n\tsize?: LoaderSize;\n\tcontrast?: boolean;\n}\n\n@guardedCustomElement('sds-loader')\nexport class SDSLoader extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) size: LoaderSize = 'md';\n\t@property({ type: Boolean, reflect: true }) contrast: boolean = false;\n\n\toverride render() {\n\t\treturn html`<svg aria-label=\"Laster\" class=\"sds-loader\" role=\"img\" viewBox=\"0 0 50 50\">\n\t\t\t<circle class=\"sds-loader__background\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"7\"></circle>\n\t\t\t<circle class=\"sds-loader__circle\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"7\"></circle>\n\t\t</svg>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-loader': SDSLoader;\n\t}\n}\n"]}

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

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

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

@@ -1,38 +1,78 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
-		line-height: 0;
+		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));
+		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));
+		--_sds-loader-animation-duration: var(--sds-loader-animation-duration, 2.5s);
+		--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-md));
+
+		display: flex;
+	}
+	:host([contrast]):host([data-palette]),
+	:host([contrast]) {
+		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
+		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));
+	}
+
+	:host([data-palette]) {
+		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));
+		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));
+	}
+
+	:host([size='small']), /* Deprecated */
+	:host([size='sm']) {
+		--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-sm));
+	}
+
+	:host([size='large']), /* Deprecated */
+	:host([size='lg']) {
+		--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-lg));
 	}
 
 	.sds-loader {
-		width: 24px;
-		height: 24px;
-		border: 3px solid currentColor;
-		border-bottom-color: transparent;
-		border-radius: 50%;
-		display: inline-block;
+		animation: sds-loader-rotate-animation linear infinite var(--_sds-loader-animation-duration);
 		box-sizing: border-box;
-		animation: rotation 1s linear infinite;
+		font-size: var(--_sds-loader-size);
+		height: 1em;
+		width: 1em;
+		padding: 1px;
+	}
 
-		&.sds-loader--medium {
-			width: 18px;
-			height: 18px;
-			border-width: 2px;
+	.sds-loader__background {
+		stroke: var(--_sds-loader-main-color);
+	}
+
+	.sds-loader__circle {
+		animation: sds-loader-stroke-animation ease-in-out infinite var(--_sds-loader-animation-duration);
+		stroke-dasharray: 1px, 200px;
+		stroke: var(--_sds-loader-secondary-color);
+		transform-origin: center;
+	}
+
+	@keyframes sds-loader-rotate-animation {
+		0% {
+			transform: rotate(0);
 		}
 
-		&.sds-loader--small {
-			width: 14px;
-			height: 14px;
-			border-width: 2px;
+		to {
+			transform: rotate(1turn);
 		}
 	}
 
-	@keyframes rotation {
+	@keyframes sds-loader-stroke-animation {
 		0% {
-			transform: rotate(0deg);
+			stroke-dasharray: 1px, 200px;
+			stroke-dashoffset: 0;
+		}
+
+		50% {
+			stroke-dasharray: 100px, 200px;
+			stroke-dashoffset: -15px;
 		}
-		100% {
-			transform: rotate(360deg);
+
+		to {
+			stroke-dasharray: 1px, 200px;
+			stroke-dashoffset: -120px;
 		}
 	}
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"sds-loader.styles.js","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tline-height: 0;\n\t}\n\n\t.sds-loader {\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tborder: 3px solid currentColor;\n\t\tborder-bottom-color: transparent;\n\t\tborder-radius: 50%;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tanimation: rotation 1s linear infinite;\n\n\t\t&.sds-loader--medium {\n\t\t\twidth: 18px;\n\t\t\theight: 18px;\n\t\t\tborder-width: 2px;\n\t\t}\n\n\t\t&.sds-loader--small {\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t\tborder-width: 2px;\n\t\t}\n\t}\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"file":"sds-loader.styles.js","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-loader-animation-duration: var(--sds-loader-animation-duration, 2.5s);\n\t\t--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-md));\n\n\t\tdisplay: flex;\n\t}\n\t:host([contrast]):host([data-palette]),\n\t:host([contrast]) {\n\t\t--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t}\n\n\t:host([size='small']), /* Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-sm));\n\t}\n\n\t:host([size='large']), /* Deprecated */\n\t:host([size='lg']) {\n\t\t--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-lg));\n\t}\n\n\t.sds-loader {\n\t\tanimation: sds-loader-rotate-animation linear infinite var(--_sds-loader-animation-duration);\n\t\tbox-sizing: border-box;\n\t\tfont-size: var(--_sds-loader-size);\n\t\theight: 1em;\n\t\twidth: 1em;\n\t\tpadding: 1px;\n\t}\n\n\t.sds-loader__background {\n\t\tstroke: var(--_sds-loader-main-color);\n\t}\n\n\t.sds-loader__circle {\n\t\tanimation: sds-loader-stroke-animation ease-in-out infinite var(--_sds-loader-animation-duration);\n\t\tstroke-dasharray: 1px, 200px;\n\t\tstroke: var(--_sds-loader-secondary-color);\n\t\ttransform-origin: center;\n\t}\n\n\t@keyframes sds-loader-rotate-animation {\n\t\t0% {\n\t\t\ttransform: rotate(0);\n\t\t}\n\n\t\tto {\n\t\t\ttransform: rotate(1turn);\n\t\t}\n\t}\n\n\t@keyframes sds-loader-stroke-animation {\n\t\t0% {\n\t\t\tstroke-dasharray: 1px, 200px;\n\t\t\tstroke-dashoffset: 0;\n\t\t}\n\n\t\t50% {\n\t\t\tstroke-dasharray: 100px, 200px;\n\t\t\tstroke-dashoffset: -15px;\n\t\t}\n\n\t\tto {\n\t\t\tstroke-dasharray: 1px, 200px;\n\t\t\tstroke-dashoffset: -120px;\n\t\t}\n\t}\n`;\n"]}

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

@@ -1 +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,yBAmJlB,CAAC"}
+{"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,yBA4IlB,CAAC"}

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

@@ -6,15 +6,13 @@ 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
+		color: var(--sds-color-primary-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);
+		font-size: var(--sds-typography-body-md-desktop-font-size);
+		line-height: var(--sds-typography-body-md-desktop-line-height);
+		font-weight: var(--sds-typography-body-md-desktop-font-weight);
+		font-family: var(--sds-typography-font-family-roboto);
 
 		display: flex;
 		min-height: 10.25rem;
@@ -23,8 +21,8 @@ export const styles = css `
 		max-width: 50rem;
 
 		box-sizing: border-box;
-		padding: var(--sds-spacing-7) var(--sds-spacing-9) var(--sds-spacing-8);
-		gap: var(--sds-spacing-5);
+		padding: var(--sds-spacing-lg) var(--sds-spacing-2xl) var(--sds-spacing-xl);
+		gap: var(--sds-spacing-sm);
 		text-align: left;
 
 		cursor: pointer;
@@ -40,24 +38,22 @@ export const styles = css `
 		}
 
 		&:hover {
-			background-color: var(
-				--sds-color-global-lightblue-300
-			); // TODO: Global variable used, should be replaced by a more spesific one
+			background-color: var(--sds-color-global-lightblue-300); // TODO: Global variable used, should be replaced by a more spesific one
 		}
 
 		&:active,
 		&:focus:active {
-			background-color: var(--sds-color-semantic-surface-action-selected);
-			color: var(--sds-color-semantic-text-on-action);
+			background-color: var(--sds-color-primary-action-default);
+			color: var(--sds-color-primary-action-contrast-default);
 
 			::slotted(*) {
-				stroke: var(--sds-color-semantic-icon-on-action);
+				stroke: var(--sds-color-primary-action-contrast-default);
 			}
 		}
 
 		&:focus {
 			background: var(--sds-color-global-lightblue-100);
-			outline: 2px solid var(--sds-color-semantic-surface-action-default);
+			outline: 2px solid var(--sds-color-primary-action-default);
 			outline-offset: 1px;
 		}
 
@@ -72,14 +68,14 @@ export const styles = css `
 	}
 
 	.sds-nav-card--hasIcon {
-		padding: var(--sds-spacing-7) var(--sds-spacing-7) var(--sds-spacing-8);
+		padding: var(--sds-spacing-lg) var(--sds-spacing-lg) var(--sds-spacing-xl);
 	}
 
 	.sds-nav-card__content {
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		gap: var(--sds-spacing-3);
+		gap: var(--sds-spacing-2xs);
 	}
 
 	.sds-nav-card__text {
@@ -94,9 +90,7 @@ export const styles = css `
 		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
+		stroke: var(--sds-color-primary-text-default); // TODO: Global variable used, should be replaced by a more spesific one
 	}
 
 	.sds-nav-card__heading {
@@ -128,11 +122,10 @@ export const styles = css `
 
 	.sds-nav-card--small {
 		min-height: 4.5rem;
-		padding: var(--sds-spacing-5) var(--sds-spacing-8) var(--sds-spacing-6);
+		padding: var(--sds-spacing-sm) var(--sds-spacing-xl) var(--sds-spacing-md);
 
 		.sds-nav-card--hasIcon {
-			padding: var(--sds-spacing-5) var(--sds-spacing-7)
-				var(--sds-spacing-6);
+			padding: var(--sds-spacing-sm) var(--sds-spacing-lg) var(--sds-spacing-md);
 		}
 
 		.sds-nav-card__content {

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

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t}\n\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\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\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\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::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\tbackground: var(--sds-color-global-lightblue-100);\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&: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\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: 700;\n\t\tfont-size: 1.5rem;\n\t\tmargin: 0;\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"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-nav-card {\n\t\tcolor: var(--sds-color-primary-text-default);\n\t\tbackground-color: var(--sds-color-global-lightblue-100); // TODO: Global variable used, should be replaced by a more spesific one\n\n\t\tfont-size: var(--sds-typography-body-md-desktop-font-size);\n\t\tline-height: var(--sds-typography-body-md-desktop-line-height);\n\t\tfont-weight: var(--sds-typography-body-md-desktop-font-weight);\n\t\tfont-family: var(--sds-typography-font-family-roboto);\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\n\t\tbox-sizing: border-box;\n\t\tpadding: var(--sds-spacing-lg) var(--sds-spacing-2xl) var(--sds-spacing-xl);\n\t\tgap: var(--sds-spacing-sm);\n\t\ttext-align: left;\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(--sds-color-global-lightblue-300); // TODO: Global variable used, should be replaced by a more spesific one\n\t\t}\n\n\t\t&:active,\n\t\t&:focus:active {\n\t\t\tbackground-color: var(--sds-color-primary-action-default);\n\t\t\tcolor: var(--sds-color-primary-action-contrast-default);\n\n\t\t\t::slotted(*) {\n\t\t\t\tstroke: var(--sds-color-primary-action-contrast-default);\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\tbackground: var(--sds-color-global-lightblue-100);\n\t\t\toutline: 2px solid var(--sds-color-primary-action-default);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&: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\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-nav-card--hasIcon {\n\t\tpadding: var(--sds-spacing-lg) var(--sds-spacing-lg) var(--sds-spacing-xl);\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-2xs);\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(--sds-color-primary-text-default); // 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: 700;\n\t\tfont-size: 1.5rem;\n\t\tmargin: 0;\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-sm) var(--sds-spacing-xl) var(--sds-spacing-md);\n\n\t\t.sds-nav-card--hasIcon {\n\t\t\tpadding: var(--sds-spacing-sm) var(--sds-spacing-lg) var(--sds-spacing-md);\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/dist/sds-notification/sds-notification.d.ts

@@ -1,6 +1,8 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
+import { SDS_COLOR_PALETTES } from '../types';
 import '../sds-icon/sds-icon';
-type NotificationVariant = 'info' | 'success' | 'attention' | 'warning' | 'critical';
+import '../sds-button/sds-button';
+type NotificationVariant = Extract<SDS_COLOR_PALETTES, 'info' | 'success' | 'attention' | 'warning' | 'critical' | 'danger'> | 'critical';
 export interface SDSNotificationProps {
     variant?: NotificationVariant;
     'removable-label'?: string;
@@ -10,6 +12,8 @@ export declare class SDSNotification extends LitElement {
     static styles: import("lit").CSSResult[];
     variant: NotificationVariant;
     removableLabel?: string;
+    constructor();
+    updated(changed: PropertyValues): void;
     private readonly _remove;
     render(): import("lit-html").TemplateResult<1>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"sds-notification.d.ts","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,sBAAsB,CAAC;AAE9B,KAAK,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;AAUrF,MAAM,WAAW,oBAAoB;IACpC,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AAED,qBACa,eAAgB,SAAQ,UAAU;IAE9C,OAAgB,MAAM,4BAAY;IAGS,OAAO,EAAE,mBAAmB,CAAU;IACR,cAAc,CAAC,EAAE,MAAM,CAAC;IAEjG,OAAO,CAAC,QAAQ,CAAC,OAAO,CAOtB;IAEO,MAAM;CA2Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,eAAe,CAAC;KACpC;CACD"}
+{"version":3,"file":"sds-notification.d.ts","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAKhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAElC,KAAK,mBAAmB,GAAG,OAAO,CAAC,kBAAkB,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC,GAAG,UAAU,CAAC;AAW1I,MAAM,WAAW,oBAAoB;IACpC,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CAC3C;AAID,qBACa,eAAgB,SAAQ,UAAU;IAE9C,OAAgB,MAAM,4BAAY;IAGS,OAAO,EAAE,mBAAmB,CAAU;IACR,cAAc,CAAC,EAAE,MAAM,CAAC;;IAUxF,OAAO,CAAC,OAAO,EAAE,cAAc;IASxC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAOtB;IAEO,MAAM;CAwBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,eAAe,CAAC;KACpC;CACD"}

package/dist/sds-notification/sds-notification.js

@@ -10,16 +10,19 @@ import { classMap } from 'lit/directives/class-map.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
 import { styles } from './sds-notification.styles';
 import '../sds-icon/sds-icon';
+import '../sds-button/sds-button';
 const notificationIcons = {
-    info: 'info-material-filled',
+    info: 'InformationSquareFill-aksel-filled',
     success: 'check_circle-material-filled',
-    attention: 'error-material-filled',
+    attention: 'warning-material-filled',
     warning: 'warning-material-filled',
-    critical: 'dangerous-material-filled',
+    danger: 'dangerous-material-filled',
+    critical: 'dangerous-material-filled', // Deprecated
 };
+let hasWarnedAboutDeprecation = false;
 let SDSNotification = class SDSNotification extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         // Reactive Props
         this.variant = 'info';
         this._remove = () => {
@@ -28,31 +31,40 @@ let SDSNotification = class SDSNotification extends LitElement {
                 composed: true,
             }));
         };
+        if (!hasWarnedAboutDeprecation) {
+            hasWarnedAboutDeprecation = true;
+            console.warn('[Sheriff] The Notification component is deprecated and will be removed in the next major release. Please migrate to the Alert component.');
+        }
+    }
+    updated(changed) {
+        // Cast critical variant to danger and warning to attention to prevent breaking changes
+        if (changed.has('variant') && this.variant === 'critical') {
+            this.variant = 'danger';
+        }
+        else if (changed.has('variant') && this.variant === 'warning') {
+            this.variant = 'attention';
+        }
     }
     render() {
         const notificationClasses = {
             'sds-notification': true,
-            [`sds-notification--${this.variant}`]: true,
         };
+        const colorPalette = this.variant === 'danger' || this.variant === 'critical' ? 'danger' : 'accent';
         return html `<div class="${classMap(notificationClasses)}">
 			<div class="sds-notification__type">
-				<sds-icon class="sds-notification__icon" name="${notificationIcons[this.variant]}" size="m"></sds-icon>
+				<sds-icon class="sds-notification__icon" name="${notificationIcons[this.variant]}" size="md"></sds-icon>
 			</div>
 			<div class="sds-notification__content">
-				<div class="sds-notification__content-text">
-					<slot name="title"></slot>
-					<slot name="message"></slot>
-				</div>
-				${this.removableLabel
-            ? html `<button
-							class="sds-notification__remove-btn"
-							@click=${this._remove}
-							aria-label="${this.removableLabel}"
-						>
-							<sds-icon name="close-material-outlined" size="s"></sds-icon>
-						</button>`
-            : nothing}
+				<slot name="title"></slot>
+				<slot name="message"></slot>
 			</div>
+			${this.removableLabel
+            ? html `<div class="sds-notification__actions">
+						<sds-button icon variant="tertiary" color="${colorPalette}" size="sm" @click=${this._remove} aria-label="${this.removableLabel}">
+							<sds-icon name="close-material-outlined" size="sm"></sds-icon>
+						</sds-button>
+					</div>`
+            : nothing}
 		</div>`;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"sds-notification.js","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD,OAAO,sBAAsB,CAAC;AAI9B,MAAM,iBAAiB,GAAwC;IAC9D,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,8BAA8B;IACvC,SAAS,EAAE,uBAAuB;IAClC,OAAO,EAAE,yBAAyB;IAClC,QAAQ,EAAE,2BAA2B;CACrC,CAAC;AASK,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAIN,iBAAiB;QAC0B,YAAO,GAAwB,MAAM,CAAC;QAGhE,YAAO,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;IA6BH,CAAC;IA3BS,MAAM;QACd,MAAM,mBAAmB,GAAG;YAC3B,kBAAkB,EAAE,IAAI;YACxB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;SAC3C,CAAC;QAEF,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,mBAAmB,CAAC;;qDAEJ,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;;MAO9E,IAAI,CAAC,cAAc;YACpB,CAAC,CAAC,IAAI,CAAA;;gBAEK,IAAI,CAAC,OAAO;qBACP,IAAI,CAAC,cAAc;;;gBAGxB;YACX,CAAC,CAAC,OAAO;;SAEL,CAAC;IACT,CAAC;;AA1CD,UAAU;AACM,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAuC;AACR;IAAxE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAyB;AANrF,eAAe;IAD3B,oBAAoB,CAAC,kBAAkB,CAAC;GAC5B,eAAe,CA4C3B","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-notification.styles';\n\nimport '../sds-icon/sds-icon';\n\ntype NotificationVariant = 'info' | 'success' | 'attention' | 'warning' | 'critical';\n\nconst notificationIcons: Record<NotificationVariant, string> = {\n\tinfo: 'info-material-filled',\n\tsuccess: 'check_circle-material-filled',\n\tattention: 'error-material-filled',\n\twarning: 'warning-material-filled',\n\tcritical: 'dangerous-material-filled',\n};\n\nexport interface SDSNotificationProps {\n\tvariant?: NotificationVariant;\n\t'removable-label'?: string;\n\tonSdsRemove?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-notification')\nexport class SDSNotification extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) variant: NotificationVariant = 'info';\n\t@property({ type: String, attribute: 'removable-label', reflect: true }) removableLabel?: string;\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\toverride render() {\n\t\tconst notificationClasses = {\n\t\t\t'sds-notification': true,\n\t\t\t[`sds-notification--${this.variant}`]: true,\n\t\t};\n\n\t\treturn html`<div class=\"${classMap(notificationClasses)}\">\n\t\t\t<div class=\"sds-notification__type\">\n\t\t\t\t<sds-icon class=\"sds-notification__icon\" name=\"${notificationIcons[this.variant]}\" size=\"m\"></sds-icon>\n\t\t\t</div>\n\t\t\t<div class=\"sds-notification__content\">\n\t\t\t\t<div class=\"sds-notification__content-text\">\n\t\t\t\t\t<slot name=\"title\"></slot>\n\t\t\t\t\t<slot name=\"message\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.removableLabel\n\t\t\t\t\t? html`<button\n\t\t\t\t\t\t\tclass=\"sds-notification__remove-btn\"\n\t\t\t\t\t\t\t@click=${this._remove}\n\t\t\t\t\t\t\taria-label=\"${this.removableLabel}\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"s\"></sds-icon>\n\t\t\t\t\t\t</button>`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-notification': SDSNotification;\n\t}\n}\n"]}
+{"version":3,"file":"sds-notification.js","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAGnD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAIlC,MAAM,iBAAiB,GAAwC;IAC9D,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,8BAA8B;IACvC,SAAS,EAAE,yBAAyB;IACpC,OAAO,EAAE,yBAAyB;IAClC,MAAM,EAAE,2BAA2B;IACnC,QAAQ,EAAE,2BAA2B,EAAE,aAAa;CACpD,CAAC;AAQF,IAAI,yBAAyB,GAAY,KAAK,CAAC;AAGxC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAQ9C;QACC,KAAK,EAAE,CAAC;QALT,iBAAiB;QAC0B,YAAO,GAAwB,MAAM,CAAC;QAoBhE,YAAO,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;QAtBD,IAAI,CAAC,yBAAyB,EAAE,CAAC;YAChC,yBAAyB,GAAG,IAAI,CAAC;YACjC,OAAO,CAAC,IAAI,CAAC,0IAA0I,CAAC,CAAC;QAC1J,CAAC;IACF,CAAC;IAEQ,OAAO,CAAC,OAAuB;QACvC,uFAAuF;QACvF,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;YAC3D,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;QACzB,CAAC;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YACjE,IAAI,CAAC,OAAO,GAAG,WAAW,CAAC;QAC5B,CAAC;IACF,CAAC;IAWQ,MAAM;QACd,MAAM,mBAAmB,GAAG;YAC3B,kBAAkB,EAAE,IAAI;SACxB,CAAC;QAEF,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEpG,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,mBAAmB,CAAC;;qDAEJ,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;KAM/E,IAAI,CAAC,cAAc;YACpB,CAAC,CAAC,IAAI,CAAA;mDACyC,YAAY,sBAAsB,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,cAAc;;;YAGxH;YACR,CAAC,CAAC,OAAO;SACJ,CAAC;IACT,CAAC;;AAxDD,UAAU;AACM,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGS;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAuC;AACR;IAAxE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAyB;AANrF,eAAe;IAD3B,oBAAoB,CAAC,kBAAkB,CAAC;GAC5B,eAAe,CA0D3B","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-notification.styles';\nimport { SDS_COLOR_PALETTES } from '../types';\n\nimport '../sds-icon/sds-icon';\nimport '../sds-button/sds-button';\n\ntype NotificationVariant = Extract<SDS_COLOR_PALETTES, 'info' | 'success' | 'attention' | 'warning' | 'critical' | 'danger'> | 'critical';\n\nconst notificationIcons: Record<NotificationVariant, string> = {\n\tinfo: 'InformationSquareFill-aksel-filled',\n\tsuccess: 'check_circle-material-filled',\n\tattention: 'warning-material-filled',\n\twarning: 'warning-material-filled',\n\tdanger: 'dangerous-material-filled',\n\tcritical: 'dangerous-material-filled', // Deprecated\n};\n\nexport interface SDSNotificationProps {\n\tvariant?: NotificationVariant;\n\t'removable-label'?: string;\n\tonSdsRemove?: (event: CustomEvent) => void;\n}\n\nlet hasWarnedAboutDeprecation: boolean = false;\n\n@guardedCustomElement('sds-notification')\nexport class SDSNotification extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true }) variant: NotificationVariant = 'info';\n\t@property({ type: String, attribute: 'removable-label', reflect: true }) removableLabel?: string;\n\n\tconstructor() {\n\t\tsuper();\n\t\tif (!hasWarnedAboutDeprecation) {\n\t\t\thasWarnedAboutDeprecation = true;\n\t\t\tconsole.warn('[Sheriff] The Notification component is deprecated and will be removed in the next major release. Please migrate to the Alert component.');\n\t\t}\n\t}\n\n\toverride updated(changed: PropertyValues) {\n\t\t// Cast critical variant to danger and warning to attention to prevent breaking changes\n\t\tif (changed.has('variant') && this.variant === 'critical') {\n\t\t\tthis.variant = 'danger';\n\t\t} else if (changed.has('variant') && this.variant === 'warning') {\n\t\t\tthis.variant = 'attention';\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\toverride render() {\n\t\tconst notificationClasses = {\n\t\t\t'sds-notification': true,\n\t\t};\n\n\t\tconst colorPalette = this.variant === 'danger' || this.variant === 'critical' ? 'danger' : 'accent';\n\n\t\treturn html`<div class=\"${classMap(notificationClasses)}\">\n\t\t\t<div class=\"sds-notification__type\">\n\t\t\t\t<sds-icon class=\"sds-notification__icon\" name=\"${notificationIcons[this.variant]}\" size=\"md\"></sds-icon>\n\t\t\t</div>\n\t\t\t<div class=\"sds-notification__content\">\n\t\t\t\t<slot name=\"title\"></slot>\n\t\t\t\t<slot name=\"message\"></slot>\n\t\t\t</div>\n\t\t\t${this.removableLabel\n\t\t\t\t? html`<div class=\"sds-notification__actions\">\n\t\t\t\t\t\t<sds-button icon variant=\"tertiary\" color=\"${colorPalette}\" size=\"sm\" @click=${this._remove} aria-label=\"${this.removableLabel}\">\n\t\t\t\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"sm\"></sds-icon>\n\t\t\t\t\t\t</sds-button>\n\t\t\t\t\t</div>`\n\t\t\t\t: nothing}\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-notification': SDSNotification;\n\t}\n}\n"]}

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

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