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

package/dist/sds-alert/sds-alert.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { guardedCustomElement } from '../utils/guarded-custom-element';
+import { styles } from './sds-alert.styles';
+import '../sds-icon/sds-icon';
+import '../sds-button/sds-button';
+const alertIcons = {
+    info: 'InformationSquareFill-aksel-filled',
+    success: 'check_circle-material-filled',
+    attention: 'warning-material-filled',
+    danger: 'dangerous-material-filled',
+};
+let SDSAlert = class SDSAlert extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.color = 'info';
+        this.variant = 'primary';
+        this._remove = () => {
+            this.dispatchEvent(new CustomEvent('sds-remove', {
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    render() {
+        const buttonColor = this.color === 'danger' ? 'danger' : 'accent';
+        return html `<div class="sds-alert">
+			<div class="sds-alert__type">
+				<sds-icon class="sds-alert__icon" name="${alertIcons[this.color]}" size="md"></sds-icon>
+			</div>
+			<div class="sds-alert__content">
+				<slot name="title"></slot>
+				<slot name="message"></slot>
+			</div>
+			${this.removableLabel && this.variant === 'primary'
+            ? html `<div class="sds-alert__actions">
+						<sds-button icon variant="tertiary" color="${buttonColor}" size="sm" @click=${this._remove} aria-label="${this.removableLabel}">
+							<sds-icon name="close-material-outlined" size="sm"></sds-icon>
+						</sds-button>
+					</div>`
+            : nothing}
+		</div>`;
+    }
+};
+SDSAlert.styles = [styles];
+__decorate([
+    property({ type: String, reflect: true })
+], SDSAlert.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSAlert.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, attribute: 'removable-label', reflect: true })
+], SDSAlert.prototype, "removableLabel", void 0);
+SDSAlert = __decorate([
+    guardedCustomElement('sds-alert')
+], SDSAlert);
+export { SDSAlert };
+//# sourceMappingURL=sds-alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-alert.js","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.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,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAG5C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAKlC,MAAM,UAAU,GAAiC;IAChD,IAAI,EAAE,oCAAoC;IAC1C,OAAO,EAAE,8BAA8B;IACvC,SAAS,EAAE,yBAAyB;IACpC,MAAM,EAAE,2BAA2B;CACnC,CAAC;AAUK,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGqC,UAAK,GAAiB,MAAM,CAAC;QAC7B,YAAO,GAAa,SAAS,CAAC;QAGxD,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;IAsBH,CAAC;IApBS,MAAM;QACd,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;QAElE,OAAO,IAAI,CAAA;;8CAEiC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;;;;;;KAM/D,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;YAClD,CAAC,CAAC,IAAI,CAAA;mDACyC,WAAW,sBAAsB,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,cAAc;;;YAGvH;YACR,CAAC,CAAC,OAAO;SACJ,CAAC;IACT,CAAC;;AAlCe,eAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAES;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAA8B;AAC7B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA+B;AACA;IAAxE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAyB;AALrF,QAAQ;IADpB,oBAAoB,CAAC,WAAW,CAAC;GACrB,QAAQ,CAoCpB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-alert.styles';\nimport { SDS_COLOR_PALETTES, SDS_VARIANTS } from '../types';\n\nimport '../sds-icon/sds-icon';\nimport '../sds-button/sds-button';\n\ntype ColorPalette = Extract<SDS_COLOR_PALETTES, 'info' | 'success' | 'attention' | 'danger'>;\ntype Variants = Extract<SDS_VARIANTS, 'primary' | 'secondary'>;\n\nconst alertIcons: Record<ColorPalette, string> = {\n\tinfo: 'InformationSquareFill-aksel-filled',\n\tsuccess: 'check_circle-material-filled',\n\tattention: 'warning-material-filled',\n\tdanger: 'dangerous-material-filled',\n};\n\nexport interface SDSAlertProps {\n\tcolor?: ColorPalette;\n\tvariant?: Variants;\n\t'removable-label'?: string;\n\tonSdsRemove?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-alert')\nexport class SDSAlert extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) color: ColorPalette = 'info';\n\t@property({ type: String, reflect: true }) variant: Variants = 'primary';\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 buttonColor = this.color === 'danger' ? 'danger' : 'accent';\n\n\t\treturn html`<div class=\"sds-alert\">\n\t\t\t<div class=\"sds-alert__type\">\n\t\t\t\t<sds-icon class=\"sds-alert__icon\" name=\"${alertIcons[this.color]}\" size=\"md\"></sds-icon>\n\t\t\t</div>\n\t\t\t<div class=\"sds-alert__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 && this.variant === 'primary'\n\t\t\t\t? html`<div class=\"sds-alert__actions\">\n\t\t\t\t\t\t<sds-button icon variant=\"tertiary\" color=\"${buttonColor}\" 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-alert': SDSAlert;\n\t}\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,166 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-info-surface-tinted));
+
+		--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-info-border-default));
+		--_sds-alert-border-radius: var(--sds-alert-border-radius, var(--sds-radius-sm));
+		--_sds-alert-border-width: var(--sds-alert-border-width, var(--sds-border-sm));
+
+		--_sds-alert-column-gap: var(--sds-alert-column-gap, var(--sds-spacing-2xs));
+		--_sds-alert-content-gap: var(--sds-alert-content-gap, var(--sds-spacing-3xs));
+
+		--_sds-alert-font-family: var(--sds-alert-font-family, var(--sds-typography-font-family-roboto));
+		--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-md));
+		--_sds-alert-font-weight: var(--sds-alert-font-weight, var(--sds-typography-body-md-desktop-font-weight));
+		--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-squeezed-md));
+		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-info-text-default));
+
+		--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-typography-body-lg-desktop-tall-font-size));
+		--_sds-alert-title-font-weight: var(--sds-alert-title-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));
+		--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-typography-body-lg-strong-tall-desktop-line-height));
+
+		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-info-text-subtle));
+		--_sds-alert-max-line-width: var(--sds-alert-max-line-width, var(--sds-typography-max-line-width));
+		--_sds-alert-padding: var(--sds-alert-padding, var(--sds-spacing-sm));
+
+		display: block;
+	}
+
+	.sds-alert {
+		display: flex;
+		gap: var(--_sds-alert-column-gap);
+		padding: var(--_sds-alert-padding);
+
+		background-color: var(--_sds-alert-background-color);
+		border: var(--_sds-alert-border-width) solid var(--_sds-alert-border-color);
+		border-radius: var(--_sds-alert-border-radius);
+		color: var(--_sds-alert-text-color);
+
+		font-family: var(--_sds-alert-font-family);
+		text-align: left;
+	}
+
+	.sds-alert__type {
+		color: var(--_sds-alert-icon-color);
+	}
+
+	.sds-alert__content {
+		align-self: center;
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		gap: var(--_sds-alert-content-gap);
+	}
+
+	.sds-alert__actions {
+		--sds-button-padding-inline: 0;
+	}
+
+	.sds-alert__icon {
+		display: block;
+		position: relative;
+		z-index: 1;
+	}
+
+	:host([color='success']) {
+		--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-success-surface-tinted));
+		--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-success-border-default));
+		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-attention-text-default));
+		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-success-text-subtle));
+
+		sds-button {
+			--sds-button-text-color: var(--sds-color-alert-success-action-default);
+		}
+
+		sds-button:hover {
+			--sds-button-background-color: var(--sds-color-alert-success-surface-hover);
+			--sds-button-border-color: var(--sds-color-alert-success-surface-hover);
+		}
+
+		sds-button:active {
+			--sds-button-background-color: var(--sds-color-alert-success-surface-active);
+			--sds-button-border-color: var(--sds-color-alert-success-surface-active);
+		}
+	}
+
+	:host([color='attention']) {
+		--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-attention-surface-tinted));
+		--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-attention-border-default));
+		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-attention-text-default));
+		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-attention-text-subtle));
+
+		sds-button {
+			--sds-button-text-color: var(--sds-color-alert-attention-border-default);
+		}
+
+		sds-button:hover {
+			--sds-button-background-color: var(--sds-color-alert-attention-surface-hover);
+			--sds-button-border-color: var(--sds-color-alert-attention-surface-hover);
+		}
+
+		sds-button:active {
+			--sds-button-background-color: var(--sds-color-alert-attention-surface-active);
+			--sds-button-border-color: var(--sds-color-alert-attention-surface-active);
+		}
+	}
+
+	:host([color='danger']) {
+		--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-danger-surface-tinted));
+		--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-danger-border-default));
+		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-danger-text-default));
+		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-danger-text-subtle));
+	}
+
+	:host([variant='secondary']) {
+		--_sds-alert-background-color: var(--sds-alert-background-color, transparent);
+		--_sds-alert-border-color: var(--sds-alert-border-color, transparent);
+		--_sds-alert-padding: var(--sds-alert-padding, 0);
+		--_sds-alert-column-gap: var(--sds-alert-column-gap, var(--sds-spacing-3xs));
+		--_sds-alert-content-gap: var(--sds-alert-content-gap, 0);
+
+		::slotted([slot='message']) {
+			padding: 3px 0 !important;
+		}
+	}
+
+	:host([variant='secondary']):host([color='info']) {
+		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-info-text-subtle));
+	}
+
+	:host([variant='secondary']):host([color='success']) {
+		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-success-text-subtle));
+	}
+
+	:host([variant='secondary']):host([color='attention']) {
+		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-attention-text-subtle));
+		--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-attention-action-default));
+	}
+
+	:host([variant='secondary']):host([color='danger']) {
+		--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-danger-text-subtle));
+	}
+
+	::slotted([slot='title']),
+	::slotted(:is(h1, h2, h3, h4, h5, h6)) {
+		color: var(--_sds-alert-text-color) !important;
+		font-size: var(--_sds-alert-title-font-size) !important;
+		font-style: normal !important;
+		font-weight: var(--_sds-alert-title-font-weight) !important;
+		line-height: var(--_sds-alert-title-line-height) !important;
+		margin: 0 !important;
+		max-width: var(--_sds-alert-max-line-width) !important;
+	}
+
+	::slotted([slot='message']),
+	::slotted(:is(p)) {
+		color: var(--_sds-alert-text-color) !important;
+		font-size: var(--_sds-alert-font-size) !important;
+		font-style: normal !important;
+		font-weight: var(--_sds-alert-font-weight) !important;
+		line-height: var(--_sds-alert-line-height) !important;
+		margin: 0 !important;
+		max-width: var(--_sds-alert-max-line-width) !important;
+	}
+`;
+//# sourceMappingURL=sds-alert.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-alert.styles.js","sourceRoot":"","sources":["../../src/sds-alert/sds-alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-info-surface-tinted));\n\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-info-border-default));\n\t\t--_sds-alert-border-radius: var(--sds-alert-border-radius, var(--sds-radius-sm));\n\t\t--_sds-alert-border-width: var(--sds-alert-border-width, var(--sds-border-sm));\n\n\t\t--_sds-alert-column-gap: var(--sds-alert-column-gap, var(--sds-spacing-2xs));\n\t\t--_sds-alert-content-gap: var(--sds-alert-content-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-alert-font-family: var(--sds-alert-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-alert-font-size: var(--sds-alert-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-alert-font-weight: var(--sds-alert-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-alert-line-height: var(--sds-alert-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-info-text-default));\n\n\t\t--_sds-alert-title-font-size: var(--sds-alert-title-font-size, var(--sds-typography-body-lg-desktop-tall-font-size));\n\t\t--_sds-alert-title-font-weight: var(--sds-alert-title-font-weight, var(--sds-typography-body-lg-strong-tall-desktop-font-weight));\n\t\t--_sds-alert-title-line-height: var(--sds-alert-title-line-height, var(--sds-typography-body-lg-strong-tall-desktop-line-height));\n\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-info-text-subtle));\n\t\t--_sds-alert-max-line-width: var(--sds-alert-max-line-width, var(--sds-typography-max-line-width));\n\t\t--_sds-alert-padding: var(--sds-alert-padding, var(--sds-spacing-sm));\n\n\t\tdisplay: block;\n\t}\n\n\t.sds-alert {\n\t\tdisplay: flex;\n\t\tgap: var(--_sds-alert-column-gap);\n\t\tpadding: var(--_sds-alert-padding);\n\n\t\tbackground-color: var(--_sds-alert-background-color);\n\t\tborder: var(--_sds-alert-border-width) solid var(--_sds-alert-border-color);\n\t\tborder-radius: var(--_sds-alert-border-radius);\n\t\tcolor: var(--_sds-alert-text-color);\n\n\t\tfont-family: var(--_sds-alert-font-family);\n\t\ttext-align: left;\n\t}\n\n\t.sds-alert__type {\n\t\tcolor: var(--_sds-alert-icon-color);\n\t}\n\n\t.sds-alert__content {\n\t\talign-self: center;\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-alert-content-gap);\n\t}\n\n\t.sds-alert__actions {\n\t\t--sds-button-padding-inline: 0;\n\t}\n\n\t.sds-alert__icon {\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tz-index: 1;\n\t}\n\n\t:host([color='success']) {\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-success-surface-tinted));\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-success-border-default));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-attention-text-default));\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-success-text-subtle));\n\n\t\tsds-button {\n\t\t\t--sds-button-text-color: var(--sds-color-alert-success-action-default);\n\t\t}\n\n\t\tsds-button:hover {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-success-surface-hover);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-success-surface-hover);\n\t\t}\n\n\t\tsds-button:active {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-success-surface-active);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-success-surface-active);\n\t\t}\n\t}\n\n\t:host([color='attention']) {\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-attention-surface-tinted));\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-attention-border-default));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-attention-text-default));\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-attention-text-subtle));\n\n\t\tsds-button {\n\t\t\t--sds-button-text-color: var(--sds-color-alert-attention-border-default);\n\t\t}\n\n\t\tsds-button:hover {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-attention-surface-hover);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-attention-surface-hover);\n\t\t}\n\n\t\tsds-button:active {\n\t\t\t--sds-button-background-color: var(--sds-color-alert-attention-surface-active);\n\t\t\t--sds-button-border-color: var(--sds-color-alert-attention-surface-active);\n\t\t}\n\t}\n\n\t:host([color='danger']) {\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, var(--sds-color-alert-danger-surface-tinted));\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, var(--sds-color-alert-danger-border-default));\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-danger-text-default));\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-danger-text-subtle));\n\t}\n\n\t:host([variant='secondary']) {\n\t\t--_sds-alert-background-color: var(--sds-alert-background-color, transparent);\n\t\t--_sds-alert-border-color: var(--sds-alert-border-color, transparent);\n\t\t--_sds-alert-padding: var(--sds-alert-padding, 0);\n\t\t--_sds-alert-column-gap: var(--sds-alert-column-gap, var(--sds-spacing-3xs));\n\t\t--_sds-alert-content-gap: var(--sds-alert-content-gap, 0);\n\n\t\t::slotted([slot='message']) {\n\t\t\tpadding: 3px 0 !important;\n\t\t}\n\t}\n\n\t:host([variant='secondary']):host([color='info']) {\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-info-text-subtle));\n\t}\n\n\t:host([variant='secondary']):host([color='success']) {\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-success-text-subtle));\n\t}\n\n\t:host([variant='secondary']):host([color='attention']) {\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-attention-text-subtle));\n\t\t--_sds-alert-icon-color: var(--sds-alert-icon-color, var(--sds-color-alert-attention-action-default));\n\t}\n\n\t:host([variant='secondary']):host([color='danger']) {\n\t\t--_sds-alert-text-color: var(--sds-alert-text-color, var(--sds-color-alert-danger-text-subtle));\n\t}\n\n\t::slotted([slot='title']),\n\t::slotted(:is(h1, h2, h3, h4, h5, h6)) {\n\t\tcolor: var(--_sds-alert-text-color) !important;\n\t\tfont-size: var(--_sds-alert-title-font-size) !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: var(--_sds-alert-title-font-weight) !important;\n\t\tline-height: var(--_sds-alert-title-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--_sds-alert-max-line-width) !important;\n\t}\n\n\t::slotted([slot='message']),\n\t::slotted(:is(p)) {\n\t\tcolor: var(--_sds-alert-text-color) !important;\n\t\tfont-size: var(--_sds-alert-font-size) !important;\n\t\tfont-style: normal !important;\n\t\tfont-weight: var(--_sds-alert-font-weight) !important;\n\t\tline-height: var(--_sds-alert-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--_sds-alert-max-line-width) !important;\n\t}\n`;\n"]}

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

@@ -1,36 +1,45 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
+import { SDS_COLOR_PALETTES, SDS_SIZES, SDS_VARIANTS } from '../types';
 type ButtonType = 'button' | 'submit' | 'reset';
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';
-type ButtonSize = 'large' | 'medium' | 'small';
+type ButtonVariant = SDS_VARIANTS | 'critical';
+type ButtonColorPalette = Extract<SDS_COLOR_PALETTES, 'accent' | 'danger'>;
+type ButtonSize = 'large' | 'medium' | 'small' | Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;
 type TargetTypes = '_self' | '_blank' | '_parent' | '_top';
 export interface SDSButtonProps {
-    type?: ButtonType;
-    variant?: ButtonVariant;
-    size?: ButtonSize;
+    color?: ButtonColorPalette;
     disabled?: boolean;
-    name?: string;
-    value?: string;
     form?: string;
     href?: string;
+    icon?: boolean;
+    loading?: boolean;
+    name?: string;
+    size?: ButtonSize;
     target?: TargetTypes;
+    type?: ButtonType;
+    value?: string;
+    variant?: ButtonVariant;
     onClick?: (event: CustomEvent) => void;
-    onSubmit?: (event: CustomEvent) => void;
     onReset?: (event: CustomEvent) => void;
+    onSubmit?: (event: CustomEvent) => void;
 }
 export declare class SDSButton extends LitElement {
     static styles: import("lit").CSSResult[];
     static formAssociated: boolean;
     readonly internals: ElementInternals;
-    type: ButtonType;
-    variant: ButtonVariant;
-    size: ButtonSize;
     disabled: boolean;
-    name?: string;
-    value: string;
+    icon: boolean;
+    loading: boolean;
+    color?: ButtonColorPalette;
     form?: string;
     href?: string;
+    name?: string;
+    size: ButtonSize;
     target?: TargetTypes;
+    type: ButtonType;
+    value: string;
+    variant: ButtonVariant;
     constructor();
+    updated(changed: PropertyValues): void;
     private readonly _handleClick;
     focus(): void;
     blur(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;AACvE,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC/C,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AAED,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAG5C,IAAI,EAAE,UAAU,CAAY;IAG5B,OAAO,EAAE,aAAa,CAAa;IAGnC,IAAI,EAAE,UAAU,CAAW;IAEiB,QAAQ,EAAE,OAAO,CAAS;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAM;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,WAAW,CAAC;;IAQhE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAuD3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CAyCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
+{"version":3,"file":"sds-button.d.ts","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAOhE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAEvE,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAChD,KAAK,aAAa,GAAG,YAAY,GAAG,UAAU,CAAC;AAC/C,KAAK,kBAAkB,GAAG,OAAO,CAAC,kBAAkB,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAC;AAC3E,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AACxF,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,cAAc;IAC9B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC;AAED,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAEA,QAAQ,EAAE,OAAO,CAAS;IAC1B,IAAI,EAAE,OAAO,CAAS;IACtB,OAAO,EAAE,OAAO,CAAS;IAC1B,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAQ;IACxB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,UAAU,CAAY;IAC5B,KAAK,EAAE,MAAM,CAAM;IACnB,OAAO,EAAE,aAAa,CAAa;;IAQrE,OAAO,CAAC,OAAO,EAAE,cAAc;IAQxC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAuD3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CAsCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -13,11 +13,13 @@ import { styles } from './sds-button.styles';
 let SDSButton = class SDSButton extends LitElement {
     constructor() {
         super();
-        this.type = 'button';
-        this.variant = 'primary';
-        this.size = 'large';
         this.disabled = false;
+        this.icon = false;
+        this.loading = false;
+        this.size = 'lg';
+        this.type = 'button';
         this.value = '';
+        this.variant = 'primary';
         this._handleClick = (event) => {
             event.preventDefault();
             event.stopImmediatePropagation();
@@ -72,6 +74,13 @@ let SDSButton = class SDSButton extends LitElement {
         this.internals = this.attachInternals();
         this.attachShadow({ mode: 'open', delegatesFocus: true });
     }
+    updated(changed) {
+        // Cast critical variant to primary and color to danger to prevent breaking changes
+        if (changed.has('variant') && this.variant === 'critical') {
+            this.variant = 'primary';
+            this.color = 'danger';
+        }
+    }
     focus() {
         if (!this.disabled)
             this.shadowRoot?.querySelector('button')?.focus();
@@ -87,20 +96,17 @@ let SDSButton = class SDSButton extends LitElement {
     render() {
         const buttonClasses = {
             'sds-button': true,
-            'sds-button--secondary': this.variant === 'secondary',
-            'sds-button--tertiary': this.variant === 'tertiary',
-            'sds-button--critical': this.variant === 'critical',
-            'sds-button--medium': this.size === 'medium',
-            'sds-button--small': this.size === 'small',
             'sds-button--as-link': !!this.href,
         };
+        let loaderColor;
+        if (this.color === 'danger') {
+            loaderColor = ['primary', 'critical'].includes(this.variant) ? 'danger' : 'danger-contrast';
+        }
+        else {
+            loaderColor = ['primary', 'critical'].includes(this.variant) ? 'accent' : 'accent-contrast';
+        }
         if (this.href) {
-            return html ` <a
-				id="link"
-				class="${classMap(buttonClasses)}"
-				href="${this.href}"
-				target="${ifDefined(this.target)}"
-			>
+            return html ` <a id="link" class="${classMap(buttonClasses)}" href="${this.href}" target="${ifDefined(this.target)}">
 				<slot name="before"></slot>
 				<slot></slot>
 				<slot name="after"></slot>
@@ -117,9 +123,9 @@ let SDSButton = class SDSButton extends LitElement {
 				?disabled="${this.disabled}"
 				@click="${this._handleClick}"
 			>
-				<slot name="before"></slot>
+				${this.loading ? html `<sds-loader slot="before" color=${loaderColor}></sds-loader>` : nothing} ${this.loading ? nothing : html `<slot name="before"></slot>`}
 				<slot></slot>
-				<slot name="after"></slot>
+				${this.loading ? nothing : html `<slot name="after"></slot>`}
 			</button>
 		`;
     }
@@ -127,32 +133,41 @@ let SDSButton = class SDSButton extends LitElement {
 SDSButton.styles = [styles];
 SDSButton.formAssociated = true;
 __decorate([
-    property({ type: String, reflect: true })
-], SDSButton.prototype, "type", void 0);
+    property({ type: Boolean, reflect: true })
+], SDSButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSButton.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSButton.prototype, "loading", void 0);
 __decorate([
     property({ type: String, reflect: true })
-], SDSButton.prototype, "variant", void 0);
+], SDSButton.prototype, "color", void 0);
 __decorate([
     property({ type: String, reflect: true })
-], SDSButton.prototype, "size", void 0);
+], SDSButton.prototype, "form", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], SDSButton.prototype, "disabled", void 0);
+    property({ type: String, reflect: true })
+], SDSButton.prototype, "href", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], SDSButton.prototype, "name", void 0);
 __decorate([
     property({ type: String, reflect: true })
-], SDSButton.prototype, "value", void 0);
+], SDSButton.prototype, "size", void 0);
 __decorate([
     property({ type: String, reflect: true })
-], SDSButton.prototype, "form", void 0);
+], SDSButton.prototype, "target", void 0);
 __decorate([
     property({ type: String, reflect: true })
-], SDSButton.prototype, "href", void 0);
+], SDSButton.prototype, "type", void 0);
 __decorate([
     property({ type: String, reflect: true })
-], SDSButton.prototype, "target", void 0);
+], SDSButton.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSButton.prototype, "variant", void 0);
 SDSButton = __decorate([
     guardedCustomElement('sds-button')
 ], SDSButton);

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

@@ -1 +1 @@
-{"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-button.styles';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'critical';\ntype ButtonSize = 'large' | 'medium' | 'small';\ntype TargetTypes = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface SDSButtonProps {\n\ttype?: ButtonType;\n\tvariant?: ButtonVariant;\n\tsize?: ButtonSize;\n\tdisabled?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tform?: string;\n\thref?: string;\n\ttarget?: TargetTypes;\n\tonClick?: (event: CustomEvent) => void;\n\tonSubmit?: (event: CustomEvent) => void;\n\tonReset?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-button')\nexport class SDSButton extends LitElement {\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: String, reflect: true })\n\ttype: ButtonType = 'button';\n\n\t@property({ type: String, reflect: true })\n\tvariant: ButtonVariant = 'primary';\n\n\t@property({ type: String, reflect: true })\n\tsize: ButtonSize = 'large';\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) value: string = '';\n\t@property({ type: String, reflect: true }) form?: string;\n\t@property({ type: String, reflect: true }) href?: string;\n\t@property({ type: String, reflect: true }) target?: TargetTypes;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\tprivate readonly _handleClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!this.disabled) {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'submit': {\n\t\t\t\t\tconst submitEvent = new CustomEvent('submit', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldSubmit = this.dispatchEvent(submitEvent);\n\n\t\t\t\t\tif (shouldSubmit) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.requestSubmit();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.requestSubmit();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tcase 'reset': {\n\t\t\t\t\tconst resetEvent = new CustomEvent('reset', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldReset = this.dispatchEvent(resetEvent);\n\n\t\t\t\t\tif (shouldReset) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.reset();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.reset();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tdefault:\n\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\tnew CustomEvent('click', {\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t})\n\t\t\t\t\t);\n\t\t\t}\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.click();\n\t}\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-button': true,\n\t\t\t'sds-button--secondary': this.variant === 'secondary',\n\t\t\t'sds-button--tertiary': this.variant === 'tertiary',\n\t\t\t'sds-button--critical': this.variant === 'critical',\n\t\t\t'sds-button--medium': this.size === 'medium',\n\t\t\t'sds-button--small': this.size === 'small',\n\t\t\t'sds-button--as-link': !!this.href,\n\t\t};\n\n\t\tif (this.href) {\n\t\t\treturn html` <a\n\t\t\t\tid=\"link\"\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\thref=\"${this.href}\"\n\t\t\t\ttarget=\"${ifDefined(this.target)}\"\n\t\t\t>\n\t\t\t\t<slot name=\"before\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"after\"></slot>\n\t\t\t</a>`;\n\t\t}\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tid=\"control\"\n\t\t\t\tform=\"${ifDefined(this.form)}\"\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t@click=\"${this._handleClick}\"\n\t\t\t>\n\t\t\t\t<slot name=\"before\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"after\"></slot>\n\t\t\t</button>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SDSButton;\n\t}\n}\n"]}
+{"version":3,"file":"sds-button.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-button.styles';\nimport { ColorMode as LoaderColorMode } from '../sds-loader/sds-loader';\nimport { SDS_COLOR_PALETTES, SDS_SIZES, SDS_VARIANTS } from '../types';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\ntype ButtonVariant = SDS_VARIANTS | 'critical';\ntype ButtonColorPalette = Extract<SDS_COLOR_PALETTES, 'accent' | 'danger'>;\ntype ButtonSize = 'large' | 'medium' | 'small' | Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\ntype TargetTypes = '_self' | '_blank' | '_parent' | '_top';\n\nexport interface SDSButtonProps {\n\tcolor?: ButtonColorPalette;\n\tdisabled?: boolean;\n\tform?: string;\n\thref?: string;\n\ticon?: boolean;\n\tloading?: boolean;\n\tname?: string;\n\tsize?: ButtonSize;\n\ttarget?: TargetTypes;\n\ttype?: ButtonType;\n\tvalue?: string;\n\tvariant?: ButtonVariant;\n\tonClick?: (event: CustomEvent) => void;\n\tonReset?: (event: CustomEvent) => void;\n\tonSubmit?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-button')\nexport class SDSButton extends LitElement {\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, reflect: true }) icon: boolean = false;\n\t@property({ type: Boolean, reflect: true }) loading: boolean = false;\n\t@property({ type: String, reflect: true }) color?: ButtonColorPalette;\n\t@property({ type: String, reflect: true }) form?: string;\n\t@property({ type: String, reflect: true }) href?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) size: ButtonSize = 'lg';\n\t@property({ type: String, reflect: true }) target?: TargetTypes;\n\t@property({ type: String, reflect: true }) type: ButtonType = 'button';\n\t@property({ type: String, reflect: true }) value: string = '';\n\t@property({ type: String, reflect: true }) variant: ButtonVariant = 'primary';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride updated(changed: PropertyValues) {\n\t\t// Cast critical variant to primary and color to danger to prevent breaking changes\n\t\tif (changed.has('variant') && this.variant === 'critical') {\n\t\t\tthis.variant = 'primary';\n\t\t\tthis.color = 'danger';\n\t\t}\n\t}\n\n\tprivate readonly _handleClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!this.disabled) {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'submit': {\n\t\t\t\t\tconst submitEvent = new CustomEvent('submit', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldSubmit = this.dispatchEvent(submitEvent);\n\n\t\t\t\t\tif (shouldSubmit) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.requestSubmit();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.requestSubmit();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tcase 'reset': {\n\t\t\t\t\tconst resetEvent = new CustomEvent('reset', {\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\tcancelable: true,\n\t\t\t\t\t});\n\t\t\t\t\tconst shouldReset = this.dispatchEvent(resetEvent);\n\n\t\t\t\t\tif (shouldReset) {\n\t\t\t\t\t\tif (this.form) {\n\t\t\t\t\t\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\t\t\t\t\t\tconst formElement: HTMLFormElement | null = root.querySelector(`form#${this.form}`);\n\t\t\t\t\t\t\tformElement?.reset();\n\t\t\t\t\t\t} else if (this.internals.form) {\n\t\t\t\t\t\t\tthis.internals.form.reset();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tdefault:\n\t\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\t\tnew CustomEvent('click', {\n\t\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t\t})\n\t\t\t\t\t);\n\t\t\t}\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('button')?.click();\n\t}\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t'sds-button': true,\n\t\t\t'sds-button--as-link': !!this.href,\n\t\t};\n\n\t\tlet loaderColor: LoaderColorMode;\n\t\tif (this.color === 'danger') {\n\t\t\tloaderColor = ['primary', 'critical'].includes(this.variant) ? 'danger' : 'danger-contrast';\n\t\t} else {\n\t\t\tloaderColor = ['primary', 'critical'].includes(this.variant) ? 'accent' : 'accent-contrast';\n\t\t}\n\n\t\tif (this.href) {\n\t\t\treturn html` <a id=\"link\" class=\"${classMap(buttonClasses)}\" href=\"${this.href}\" target=\"${ifDefined(this.target)}\">\n\t\t\t\t<slot name=\"before\"></slot>\n\t\t\t\t<slot></slot>\n\t\t\t\t<slot name=\"after\"></slot>\n\t\t\t</a>`;\n\t\t}\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tid=\"control\"\n\t\t\t\tform=\"${ifDefined(this.form)}\"\n\t\t\t\tclass=\"${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t@click=\"${this._handleClick}\"\n\t\t\t>\n\t\t\t\t${this.loading ? html`<sds-loader slot=\"before\" color=${loaderColor}></sds-loader>` : nothing} ${this.loading ? nothing : html`<slot name=\"before\"></slot>`}\n\t\t\t\t<slot></slot>\n\t\t\t\t${this.loading ? nothing : html`<slot name=\"after\"></slot>`}\n\t\t\t</button>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-button': SDSButton;\n\t}\n}\n"]}