@politiet/sheriff-web-components 1.3.0 → 2.0.0-beta.1

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

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

package/dist/sds-icon/sds-icon.color-types.d.ts

@@ -1,2 +1,2 @@
-export type ColorType = 'currentColor' | 'var(--sds-color-semantic-icon-action-selected)' | 'var(--sds-color-semantic-icon-action-active)' | 'var(--sds-color-semantic-icon-action-hover)' | 'var(--sds-color-semantic-icon-action-default)' | 'var(--sds-color-semantic-icon-critical)' | 'var(--sds-color-semantic-icon-warning)' | 'var(--sds-color-semantic-icon-attention)' | 'var(--sds-color-semantic-icon-ok)' | 'var(--sds-color-semantic-icon-info)' | 'var(--sds-color-semantic-icon-on-action)' | 'var(--sds-color-semantic-icon-disabled)' | 'var(--sds-color-semantic-icon-subtle)' | 'var(--sds-color-semantic-icon-default)';
+export type ColorType = 'currentColor' | 'var(--sds-color-primary-action-default)' | 'var(--sds-color-primary-action-active)' | 'var(--sds-color-primary-action-hover)' | 'var(--sds-color-primary-action-default)' | 'var(--sds-color-alert-danger-action-default)' | 'var(--sds-color-alert-warning-action-default)' | 'var(--sds-color-alert-attention-action-default)' | 'var(--sds-color-alert-success-action-default)' | 'var(--sds-color-alert-info-action-default)' | 'var(--sds-color-primary-action-contrast-default)' | 'var(--sds-color-semantic-icon-disabled)' | 'var(--sds-color-primary-text-subtle)' | 'var(--sds-color-primary-text-default)';
 //# sourceMappingURL=sds-icon.color-types.d.ts.map

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

@@ -1,12 +1,20 @@
 import { LitElement } from 'lit';
 import { type IconPromise } from './sds-icon-loader';
+import { SDS_SIZES } from '../types';
+type IconSizes = Extract<SDS_SIZES, 'sm' | 'md' | 'lg'>;
+export interface SDSIconProps {
+    name?: string;
+    size?: 's' | 'm' | IconSizes;
+    color?: string;
+    label?: string;
+}
 export declare class SDSIcon extends LitElement {
     static styles: import("lit").CSSResult[];
     private static readonly iconLoader;
     static setLoadLocal(loadLocal: boolean): void;
     static registerResolver(resolver: IconPromise): void;
     name: string;
-    size: 's' | 'm';
+    size: 's' | 'm' | IconSizes;
     color: string;
     label: string;
     private svg;
@@ -24,4 +32,5 @@ declare global {
         'sds-icon': SDSIcon;
     }
 }
+export {};
 //# sourceMappingURL=sds-icon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sds-icon.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIpE,qBACa,OAAQ,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAAY;IAElC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAuB;IAEzD,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI;IAI7C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI;IAIT,IAAI,EAAE,MAAM,CAAM;IAClB,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IACtB,KAAK,EAAE,MAAM,CAAM;IACnB,KAAK,EAAE,MAAM,CAAM;IAErD,OAAO,CAAC,GAAG,CAAc;IAEzB,MAAM;IAef;;;;OAIG;YACW,SAAS;IAWd,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;CAMjF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}
+{"version":3,"file":"sds-icon.d.ts","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGpE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AACxD,MAAM,WAAW,YAAY;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AACD,qBACa,OAAQ,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAAY;IAElC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAuB;IAEzD,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI;IAI7C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI;IAIT,IAAI,EAAE,MAAM,CAAM;IAClB,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,SAAS,CAAQ;IACnC,KAAK,EAAE,MAAM,CAAM;IACnB,KAAK,EAAE,MAAM,CAAM;IAErD,OAAO,CAAC,GAAG,CAAc;IAEzB,MAAM;IAQf;;;;OAIG;YACW,SAAS;IAWd,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;CAMjF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

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

@@ -16,7 +16,7 @@ let SDSIcon = SDSIcon_1 = class SDSIcon extends LitElement {
     constructor() {
         super(...arguments);
         this.name = '';
-        this.size = 'm';
+        this.size = 'md';
         this.color = '';
         this.label = '';
         this.svg = '';
@@ -29,15 +29,8 @@ let SDSIcon = SDSIcon_1 = class SDSIcon extends LitElement {
     }
     render() {
         return html `
-			<div
-				class="sds-icon"
-				role="${ifDefined(this.label ? 'img' : undefined)}"
-				style="${ifDefined(this.color ? `color:${this.color}` : undefined)}"
-				aria-label="${ifDefined(this.label)}"
-			>
-				${this.name
-            ? html `<slot aria-hidden="true">${unsafeSVG(this.svg)}</slot>`
-            : html `<slot aria-hidden="true"></slot>`}
+			<div class="sds-icon" role="${ifDefined(this.label ? 'img' : undefined)}" style="${ifDefined(this.color ? `color:${this.color}` : undefined)}" aria-label="${ifDefined(this.label)}">
+				${this.name ? html `<slot aria-hidden="true">${unsafeSVG(this.svg)}</slot>` : html `<slot aria-hidden="true"></slot>`}
 			</div>
 		`;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"sds-icon.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { SDSIconLoader, type IconPromise } from './sds-icon-loader';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-icon.styles';\n\n@guardedCustomElement('sds-icon')\nexport class SDSIcon extends LitElement {\n\tstatic override styles = [styles];\n\n\tprivate static readonly iconLoader = new SDSIconLoader();\n\n\tstatic setLoadLocal(loadLocal: boolean): void {\n\t\tthis.iconLoader.loadLocal = loadLocal;\n\t}\n\n\tstatic registerResolver(resolver: IconPromise): void {\n\t\tthis.iconLoader.resolver = resolver;\n\t}\n\n\t@property({ type: String, reflect: true }) name: string = '';\n\t@property({ type: String, reflect: true }) size: 's' | 'm' = 'm';\n\t@property({ type: String, reflect: true }) color: string = '';\n\t@property({ type: String, reflect: true }) label: string = '';\n\n\t@state() private svg: string = '';\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div\n\t\t\t\tclass=\"sds-icon\"\n\t\t\t\trole=\"${ifDefined(this.label ? 'img' : undefined)}\"\n\t\t\t\tstyle=\"${ifDefined(this.color ? `color:${this.color}` : undefined)}\"\n\t\t\t\taria-label=\"${ifDefined(this.label)}\"\n\t\t\t>\n\t\t\t\t${this.name\n\t\t\t\t\t? html`<slot aria-hidden=\"true\">${unsafeSVG(this.svg)}</slot>`\n\t\t\t\t\t: html`<slot aria-hidden=\"true\"></slot>`}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t/**\n\t * Wraps the icon loader's callback in a promise. Even if the loader\n\t * calls the callback synchronously, awaiting the promise defers the\n\t * property update to the next microtask.\n\t */\n\tprivate async fetchIcon() {\n\t\tif (!this.name) {\n\t\t\tthis.svg = '';\n\t\t\treturn;\n\t\t}\n\t\tconst svg = await new Promise<string>((resolve) => {\n\t\t\tSDSIcon.iconLoader.resolve(this.name, resolve);\n\t\t});\n\t\tthis.svg = svg;\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>): void {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('name') && this.name) {\n\t\t\tvoid this.fetchIcon();\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-icon': SDSIcon;\n\t}\n}\n"]}
+{"version":3,"file":"sds-icon.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAoB,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAWpC,IAAM,OAAO,eAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAaqC,SAAI,GAAW,EAAE,CAAC;QAClB,SAAI,GAA0B,IAAI,CAAC;QACnC,UAAK,GAAW,EAAE,CAAC;QACnB,UAAK,GAAW,EAAE,CAAC;QAE7C,QAAG,GAAW,EAAE,CAAC;IAgCnC,CAAC;IA7CA,MAAM,CAAC,YAAY,CAAC,SAAkB;QACrC,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,SAAS,CAAC;IACvC,CAAC;IAED,MAAM,CAAC,gBAAgB,CAAC,QAAqB;QAC5C,IAAI,CAAC,UAAU,CAAC,QAAQ,GAAG,QAAQ,CAAC;IACrC,CAAC;IASQ,MAAM;QACd,OAAO,IAAI,CAAA;iCACoB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,YAAY,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,iBAAiB,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;MAC/K,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,4BAA4B,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC;;GAEpH,CAAC;IACH,CAAC;IAED;;;;OAIG;IACK,KAAK,CAAC,SAAS;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;YACd,OAAO;QACR,CAAC;QACD,MAAM,GAAG,GAAG,MAAM,IAAI,OAAO,CAAS,CAAC,OAAO,EAAE,EAAE;YACjD,SAAO,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;IAChB,CAAC;IAEQ,OAAO,CAAC,iBAAyD;QACzE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAChD,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;QACvB,CAAC;IACF,CAAC;;AAhDe,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAEV,kBAAU,GAAG,IAAI,aAAa,EAAE,AAAtB,CAAuB;AAUd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAmB;AAClB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAoC;AACnC;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAoB;AACnB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAoB;AAE7C;IAAhB,KAAK,EAAE;oCAA0B;AAlBtB,OAAO;IADnB,oBAAoB,CAAC,UAAU,CAAC;GACpB,OAAO,CAkDnB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { SDSIconLoader, type IconPromise } from './sds-icon-loader';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-icon.styles';\nimport { SDS_SIZES } from '../types';\n\ntype IconSizes = Extract<SDS_SIZES, 'sm' | 'md' | 'lg'>;\nexport interface SDSIconProps {\n\tname?: string;\n\tsize?: 's' | 'm' | IconSizes;\n\tcolor?: string;\n\tlabel?: string;\n}\n@guardedCustomElement('sds-icon')\nexport class SDSIcon extends LitElement {\n\tstatic override styles = [styles];\n\n\tprivate static readonly iconLoader = new SDSIconLoader();\n\n\tstatic setLoadLocal(loadLocal: boolean): void {\n\t\tthis.iconLoader.loadLocal = loadLocal;\n\t}\n\n\tstatic registerResolver(resolver: IconPromise): void {\n\t\tthis.iconLoader.resolver = resolver;\n\t}\n\n\t@property({ type: String, reflect: true }) name: string = '';\n\t@property({ type: String, reflect: true }) size: 's' | 'm' | IconSizes = 'md';\n\t@property({ type: String, reflect: true }) color: string = '';\n\t@property({ type: String, reflect: true }) label: string = '';\n\n\t@state() private svg: string = '';\n\n\toverride render() {\n\t\treturn html`\n\t\t\t<div class=\"sds-icon\" role=\"${ifDefined(this.label ? 'img' : undefined)}\" style=\"${ifDefined(this.color ? `color:${this.color}` : undefined)}\" aria-label=\"${ifDefined(this.label)}\">\n\t\t\t\t${this.name ? html`<slot aria-hidden=\"true\">${unsafeSVG(this.svg)}</slot>` : html`<slot aria-hidden=\"true\"></slot>`}\n\t\t\t</div>\n\t\t`;\n\t}\n\n\t/**\n\t * Wraps the icon loader's callback in a promise. Even if the loader\n\t * calls the callback synchronously, awaiting the promise defers the\n\t * property update to the next microtask.\n\t */\n\tprivate async fetchIcon() {\n\t\tif (!this.name) {\n\t\t\tthis.svg = '';\n\t\t\treturn;\n\t\t}\n\t\tconst svg = await new Promise<string>((resolve) => {\n\t\t\tSDSIcon.iconLoader.resolve(this.name, resolve);\n\t\t});\n\t\tthis.svg = svg;\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>): void {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('name') && this.name) {\n\t\t\tvoid this.fetchIcon();\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-icon': SDSIcon;\n\t}\n}\n"]}

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

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

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

@@ -1,15 +1,29 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
-		--icon-size: var(--sds-icon-size-m);
+		--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-md));
+
 		display: inline-block;
-		block-size: var(--icon-size);
-		inline-size: var(--icon-size);
-		min-inline-size: var(--icon-size);
+		block-size: var(--_sds-icon-size);
+		inline-size: var(--_sds-icon-size);
+		min-inline-size: var(--_sds-icon-size);
+	}
+
+	:host([size='lg']) {
+		--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-lg));
+	}
+
+	:host([size='s']), /* Deprecated */
+	:host([size='sm']) {
+		--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-sm));
 	}
 
-	:host([size='s']) {
-		--icon-size: var(--sds-icon-size-s);
+	.sds-icon {
+		aspect-ratio: 1;
+		display: block;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
 	}
 `;
 //# sourceMappingURL=sds-icon.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"sds-icon.styles.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;CAYxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--icon-size: var(--sds-icon-size-m);\n\t\tdisplay: inline-block;\n\t\tblock-size: var(--icon-size);\n\t\tinline-size: var(--icon-size);\n\t\tmin-inline-size: var(--icon-size);\n\t}\n\n\t:host([size='s']) {\n\t\t--icon-size: var(--sds-icon-size-s);\n\t}\n`;\n"]}
+{"version":3,"file":"sds-icon.styles.js","sourceRoot":"","sources":["../../src/sds-icon/sds-icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-md));\n\n\t\tdisplay: inline-block;\n\t\tblock-size: var(--_sds-icon-size);\n\t\tinline-size: var(--_sds-icon-size);\n\t\tmin-inline-size: var(--_sds-icon-size);\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-lg));\n\t}\n\n\t:host([size='s']), /* Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-icon-size: var(--sds-icon-size, var(--sds-components-icon-sm));\n\t}\n\n\t.sds-icon {\n\t\taspect-ratio: 1;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\toverflow: hidden;\n\t}\n`;\n"]}

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

@@ -5,9 +5,9 @@ export const styles = css `
 	}
 
 	.sds-label {
-		font-family: var(--sds-typography-font-family);
+		font-family: var(--sds-typography-body-md-font-family);
 		font-weight: 500;
-		color: var(--sds-color-semantic-text-default);
+		color: var(--sds-color-primary-text-default);
 		margin: 0;
 		max-width: var(--sds-typography-max-line-width);
 		padding: 0;

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

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

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

@@ -28,9 +28,9 @@ export const styles = css `
 	}
 
 	.sds-link {
-		color: var(--sds-color-semantic-text-default);
+		color: var(--sds-color-primary-text-default);
 		display: inline;
-		font-family: var(--sds-typography-font-family);
+		font-family: var(--sds-typography-body-md-font-family);
 		font-weight: 400;
 		line-height: 1.333;
 		margin: 0;
@@ -38,23 +38,23 @@ export const styles = css `
 
 		&:link,
 		&:visited {
-			color: var(--sds-color-semantic-text-action-default);
+			color: var(--sds-color-primary-action-default);
 			text-decoration: underline;
 			text-decoration-thickness: 1px;
 			text-underline-offset: 2px;
 		}
 
 		&:active {
-			color: var(--sds-color-semantic-text-action-active);
+			color: var(--sds-color-primary-action-active);
 		}
 
 		&:hover {
-			color: var(--sds-color-semantic-text-action-hover);
+			color: var(--sds-color-primary-action-hover);
 		}
 
 		&:focus {
 			border-radius: 4px;
-			outline: 2px solid var(--sds-color-semantic-border-focus);
+			outline: 2px solid var(--sds-color-states-focus);
 			outline-offset: 2px;
 		}
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"sds-link.styles.js","sourceRoot":"","sources":["../../src/sds-link/sds-link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: inline;\n\t}\n\n\t:host([display-type='block']) {\n\t\tdisplay: block;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\n\t\t.sds-link {\n\t\t\tdisplay: block;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\t}\n\n\t:host([display-type='inline-block']) {\n\t\tdisplay: inline-block;\n\n\t\t.sds-link {\n\t\t\tdisplay: inline-block;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\t}\n\n\t:host([display-type='inline']) {\n\t\tdisplay: inline;\n\t}\n\n\t.sds-link {\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tdisplay: inline;\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-weight: 400;\n\t\tline-height: 1.333;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&:link,\n\t\t&:visited {\n\t\t\tcolor: var(--sds-color-semantic-text-action-default);\n\t\t\ttext-decoration: underline;\n\t\t\ttext-decoration-thickness: 1px;\n\t\t\ttext-underline-offset: 2px;\n\t\t}\n\n\t\t&:active {\n\t\t\tcolor: var(--sds-color-semantic-text-action-active);\n\t\t}\n\n\t\t&:hover {\n\t\t\tcolor: var(--sds-color-semantic-text-action-hover);\n\t\t}\n\n\t\t&:focus {\n\t\t\tborder-radius: 4px;\n\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n\n\t.sds-link--l {\n\t\tfont-size: 1.125rem;\n\t}\n\n\t.sds-link--m {\n\t\tfont-size: 1rem;\n\t}\n\n\t.sds-link--s {\n\t\tfont-size: 0.875rem;\n\t}\n`;\n"]}
+{"version":3,"file":"sds-link.styles.js","sourceRoot":"","sources":["../../src/sds-link/sds-link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: inline;\n\t}\n\n\t:host([display-type='block']) {\n\t\tdisplay: block;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\n\t\t.sds-link {\n\t\t\tdisplay: block;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\t}\n\n\t:host([display-type='inline-block']) {\n\t\tdisplay: inline-block;\n\n\t\t.sds-link {\n\t\t\tdisplay: inline-block;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\t}\n\n\t:host([display-type='inline']) {\n\t\tdisplay: inline;\n\t}\n\n\t.sds-link {\n\t\tcolor: var(--sds-color-primary-text-default);\n\t\tdisplay: inline;\n\t\tfont-family: var(--sds-typography-body-md-font-family);\n\t\tfont-weight: 400;\n\t\tline-height: 1.333;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&:link,\n\t\t&:visited {\n\t\t\tcolor: var(--sds-color-primary-action-default);\n\t\t\ttext-decoration: underline;\n\t\t\ttext-decoration-thickness: 1px;\n\t\t\ttext-underline-offset: 2px;\n\t\t}\n\n\t\t&:active {\n\t\t\tcolor: var(--sds-color-primary-action-active);\n\t\t}\n\n\t\t&:hover {\n\t\t\tcolor: var(--sds-color-primary-action-hover);\n\t\t}\n\n\t\t&:focus {\n\t\t\tborder-radius: 4px;\n\t\t\toutline: 2px solid var(--sds-color-states-focus);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n\n\t.sds-link--l {\n\t\tfont-size: 1.125rem;\n\t}\n\n\t.sds-link--m {\n\t\tfont-size: 1rem;\n\t}\n\n\t.sds-link--s {\n\t\tfont-size: 0.875rem;\n\t}\n`;\n"]}

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

@@ -1,13 +1,14 @@
 import { LitElement } from 'lit';
-type LoaderSize = 'large' | 'medium' | 'small';
+type LoaderSize = 'large' | 'medium' | 'small' | 'lg' | 'md' | 'sm';
+export type ColorMode = 'accent' | 'accent-contrast' | 'danger' | 'danger-contrast';
 export interface SDSLoaderProps {
     size?: LoaderSize;
-    color?: string;
+    color?: ColorMode;
 }
 export declare class SDSLoader extends LitElement {
     static styles: import("lit").CSSResult[];
     size: LoaderSize;
-    color: string;
+    color: ColorMode;
     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;AAMvC,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,iBAAiB,CAAC;AAIpF,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAY;IAES,IAAI,EAAE,UAAU,CAAQ;IAUnE,KAAK,EAAE,SAAS,CAAY;IAEnB,MAAM;CAUf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

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

@@ -9,29 +9,37 @@ 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';
+const VALID_COLORS = ['accent', 'accent-contrast', 'danger', 'danger-contrast'];
 let SDSLoader = class SDSLoader extends LitElement {
     constructor() {
         super(...arguments);
-        // Reactive Props
-        this.size = 'large';
-        this.color = 'currentColor';
+        this.size = 'md';
+        this.color = 'accent';
     }
     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="${classMap(loaderClasses)}" 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 })
+    property({
+        type: String,
+        reflect: true,
+        converter: {
+            fromAttribute(value) {
+                return value && VALID_COLORS.includes(value) ? value : 'accent';
+            },
+        },
+    })
 ], SDSLoader.prototype, "color", void 0);
 SDSLoader = __decorate([
     guardedCustomElement('sds-loader')

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,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAK7C,MAAM,YAAY,GAAgB,CAAC,QAAQ,EAAE,iBAAiB,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC;AAQtF,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAGqC,SAAI,GAAe,IAAI,CAAC;QAUnE,UAAK,GAAc,QAAQ,CAAC;IAY7B,CAAC;IAVS,MAAM;QACd,MAAM,aAAa,GAAG;YACrB,YAAY,EAAE,IAAI;SAClB,CAAC;QAEF,OAAO,IAAI,CAAA,mCAAmC,QAAQ,CAAC,aAAa,CAAC;;;SAG9D,CAAC;IACT,CAAC;;AAvBe,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAES;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAyB;AAUnE;IATC,QAAQ,CAAC;QACT,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,IAAI;QACb,SAAS,EAAE;YACV,aAAa,CAAC,KAAoB;gBACjC,OAAO,KAAK,IAAI,YAAY,CAAC,QAAQ,CAAC,KAAkB,CAAC,CAAC,CAAC,CAAE,KAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC;YAC7F,CAAC;SACD;KACD,CAAC;wCAC0B;AAbhB,SAAS;IADrB,oBAAoB,CAAC,YAAY,CAAC;GACtB,SAAS,CAyBrB","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' | 'lg' | 'md' | 'sm';\nexport type ColorMode = 'accent' | 'accent-contrast' | 'danger' | 'danger-contrast';\n\nconst VALID_COLORS: ColorMode[] = ['accent', 'accent-contrast', 'danger', 'danger-contrast'];\n\nexport interface SDSLoaderProps {\n\tsize?: LoaderSize;\n\tcolor?: ColorMode;\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({\n\t\ttype: String,\n\t\treflect: true,\n\t\tconverter: {\n\t\t\tfromAttribute(value: string | null): ColorMode {\n\t\t\t\treturn value && VALID_COLORS.includes(value as ColorMode) ? (value as ColorMode) : 'accent';\n\t\t\t},\n\t\t},\n\t})\n\tcolor: ColorMode = 'accent';\n\n\toverride render() {\n\t\tconst loaderClasses = {\n\t\t\t'sds-loader': true,\n\t\t};\n\n\t\treturn html`<svg aria-label=\"Laster\" class=\"${classMap(loaderClasses)}\" 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,yBAiFlB,CAAC"}

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

@@ -1,38 +1,83 @@
 import { css } from 'lit';
 export const styles = css `
 	:host {
-		line-height: 0;
+		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-accent-action-contrast-default));
+		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-accent-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([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));
+	}
+
+	:host([color='accent-contrast']) {
+		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-accent-border-subtle));
+		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-accent-action-default));
+	}
+
+	:host([color='danger']) {
+		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-alert-danger-action-default));
+		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-alert-danger-border-subtle));
+	}
+
+	:host([color='danger-contrast']) {
+		--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-alert-danger-border-subtle));
+		--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-alert-danger-action-contrast-default));
 	}
 
 	.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__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;
+	}
 
-		&.sds-loader--medium {
-			width: 18px;
-			height: 18px;
-			border-width: 2px;
+	@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;
 		}
-		100% {
-			transform: rotate(360deg);
+
+		50% {
+			stroke-dasharray: 100px, 200px;
+			stroke-dashoffset: -15px;
+		}
+
+		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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFxB,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-accent-action-contrast-default));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-accent-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\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:host([color='accent-contrast']) {\n\t\t--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-accent-border-subtle));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-accent-action-default));\n\t}\n\n\t:host([color='danger']) {\n\t\t--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-alert-danger-action-default));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-alert-danger-border-subtle));\n\t}\n\n\t:host([color='danger-contrast']) {\n\t\t--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-alert-danger-border-subtle));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-alert-danger-action-contrast-default));\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"}