nve-designsystem 3.1.0 → 3.3.0

package/components/nve-button/nve-button.component.js

@@ -1,40 +1,147 @@
-import { n as f, t as u } from "../../chunks/property.js";
-import { b as m } from "../../chunks/chunk.JCXLDPQF.js";
-import "../../chunks/chunk.36O46B5H.js";
-import "../../chunks/chunk.3RPBFEDE.js";
-import "../../chunks/chunk.MAQXLKQ7.js";
-import "../../chunks/chunk.6CTB5ZDJ.js";
-import "../../chunks/chunk.YHLNUJ7P.js";
-import "../../chunks/chunk.4TUIT776.js";
-import c from "./nve-button.styles.js";
-var a = Object.defineProperty, d = Object.getOwnPropertyDescriptor, p = (r, t, i, e) => {
-  for (var o = e > 1 ? void 0 : e ? d(t, i) : t, n = r.length - 1, l; n >= 0; n--)
-    (l = r[n]) && (o = (e ? l(t, i, o) : l(o)) || o);
-  return e && o && a(t, i, o), o;
-};
-let s = class extends m {
-  constructor() {
-    super(), this.size = "medium", this.testId = void 0;
-  }
-  // setter has-icon-only attributtet hvis det er kun ikone i standard sporet. Trengs for riktig styling.
-  firstUpdated() {
-    const r = this.shadowRoot?.querySelector(".button__label");
-    if (r) {
-      const t = r.assignedNodes().filter((e) => e.nodeType === Node.ELEMENT_NODE || e.textContent?.trim?.length);
-      t.length === 1 && t[0].nodeName.toLowerCase() === "nve-icon" && this.setAttribute("has-icon-only", "");
-    }
-  }
-};
-s.styles = [m.styles, c];
-p([
-  f({ reflect: !0 })
-], s.prototype, "size", 2);
-p([
-  f({ reflect: !0, type: String })
-], s.prototype, "testId", 2);
-s = p([
-  u("nve-button")
-], s);
-export {
-  s as default
+import { n as e, t } from "../../chunks/lit.js";
+import { a as n, o as r, r as i, s as a, t as o } from "../../chunks/decorate.js";
+import { t as s } from "../../chunks/class-map.js";
+import { t as c } from "../../chunks/if-defined.js";
+import { r as l, t as u } from "../../chunks/static-html.js";
+import d from "./nve-button.styles.js";
+//#region src/components/nve-button/nve-button.component.ts
+var f = class extends t {
+	static {
+		this.styles = [d];
+	}
+	getForm() {
+		if (this.form) {
+			let e = this.getRootNode().getElementById(this.form);
+			if (e instanceof HTMLFormElement) return e;
+		}
+		return this.closest("form");
+	}
+	constructLightDOMButton() {
+		let e = document.createElement("button");
+		return e.type = this.type, this.name && (e.name = this.name), e.value = this.value ?? "", (this.disabled || this.loading) && (e.disabled = !0), this.form && e.setAttribute("form", this.form), this.formAction && (e.formAction = this.formAction), this.formEnctype && (e.formEnctype = this.formEnctype), this.formMethod && (e.formMethod = this.formMethod), this.formNoValidate && (e.formNoValidate = !0), this.formTarget && (e.formTarget = this.formTarget), e.style.position = "absolute", e.style.width = "0", e.style.height = "0", e.style.clipPath = "inset(50%)", e.style.overflow = "hidden", e.style.whiteSpace = "nowrap", e;
+	}
+	handleClick(e) {
+		if (this.disabled || this.loading) {
+			e.preventDefault(), e.stopImmediatePropagation();
+			return;
+		}
+		if (this.type === "submit" || this.type === "reset") {
+			let e = this.getForm();
+			if (!e) return;
+			let t = this.constructLightDOMButton();
+			e.appendChild(t), t.click(), t.remove();
+		}
+	}
+	handleDefaultSlotChange(e) {
+		let t = e.target.assignedNodes({ flatten: !0 });
+		if (t.some((e) => e.nodeType === Node.TEXT_NODE && e.textContent?.trim())) return;
+		let n = t.filter((e) => e.nodeType === Node.ELEMENT_NODE);
+		n.length === 1 && (this.hasIconOrImgOnly = n.some((e) => {
+			let t = e.tagName.toLowerCase();
+			return t === "img" || t === "nve-icon";
+		}));
+	}
+	click() {
+		this.button.click();
+	}
+	focus(e) {
+		this.button.focus(e);
+	}
+	blur() {
+		this.button.blur();
+	}
+	isLink() {
+		return !!this.href;
+	}
+	forwardAriaAttributes(e) {
+		for (let t of this.getAttributeNames()) if (t.startsWith("aria-")) {
+			let n = this.getAttribute(t);
+			n !== null && (e.setAttribute(t, n), this.removeAttribute(t));
+		}
+	}
+	constructor() {
+		super(), this.testId = void 0, this.circle = !1, this.loading = !1, this.size = "medium", this.variant = "secondary", this.formNoValidate = !1, this.autofocus = !1, this.disabled = !1, this.type = "button", this.ariaExpanded = null, this.ariaHaspopup = null, this.ariaLabel = null, this.ariaPressed = null, this.hasIconOrImgOnly = !1;
+	}
+	updated() {
+		this.button && this.forwardAriaAttributes(this.button);
+	}
+	firstUpdated(e) {
+		this.autofocus && this.focus();
+	}
+	render() {
+		let t = this.isLink(), n = t ? u`a` : u`button`;
+		return l`
+      <${n}
+        part="base"
+        @click=${this.handleClick}
+        class=${s({
+			button: !0,
+			"button--small": this.size === "small",
+			"button--medium": this.size === "medium",
+			"button--large": this.size === "large",
+			"button--primary": this.variant === "primary",
+			"button--secondary": this.variant === "secondary",
+			"button--tertiary": this.variant === "tertiary",
+			"button--ghost": this.variant === "ghost",
+			"button--danger": this.variant === "danger",
+			"button--loading": this.loading,
+			"button--icon-only": this.hasIconOrImgOnly,
+			"button--circle": this.circle && this.hasIconOrImgOnly,
+			"button--disabled": this.disabled
+		})}
+        ?disabled=${c(t ? void 0 : this.disabled)}
+        type=${c(t ? void 0 : this.type)}
+        name=${c(t ? void 0 : this.name)}
+        value=${c(t ? void 0 : this.value)}
+        href=${c(t ? this.href : void 0)}
+        target=${c(t ? this.target : void 0)}
+        download=${c(t ? this.download : void 0)}
+        testid=${c(this.testId)}
+        form=${c(t ? void 0 : this.form)}
+        formaction=${c(t ? void 0 : this.formAction)}
+        formenctype=${c(t ? void 0 : this.formEnctype)}
+        formtarget=${c(t ? void 0 : this.formTarget)}
+        rel=${c(t && this.rel ? this.rel : void 0)}
+        aria-disabled=${c(t && this.disabled ? "true" : void 0)}
+        tabindex=${c(t && this.disabled ? "-1" : void 0)}
+      >
+        <slot part="start" name="start"></slot>
+
+        ${this.loading && this.hasIconOrImgOnly ? e : l`<slot part="label" @slotchange=${this.handleDefaultSlotChange}> </slot>`}
+        ${this.loading ? l`<div part="spinner" class="button__spinner"></div>` : e}
+        ${this.loading ? e : l`<slot part="end" name="end"></slot>`}
+      </${n}>
+    `;
+	}
 };
+o([r({ type: String })], f.prototype, "testId", void 0), o([r({ type: Boolean })], f.prototype, "circle", void 0), o([r({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "loading", void 0), o([r({ type: String })], f.prototype, "size", void 0), o([r({
+	type: String,
+	reflect: !0
+})], f.prototype, "variant", void 0), o([r({ type: String })], f.prototype, "download", void 0), o([r({ type: String })], f.prototype, "href", void 0), o([r({ type: String })], f.prototype, "hreflang", void 0), o([r({ type: String })], f.prototype, "referrerpolicy", void 0), o([r({ type: String })], f.prototype, "rel", void 0), o([r({ type: String })], f.prototype, "target", void 0), o([r({ type: String })], f.prototype, "form", void 0), o([r({ type: String })], f.prototype, "formAction", void 0), o([r({ type: String })], f.prototype, "formEnctype", void 0), o([r({ type: String })], f.prototype, "formMethod", void 0), o([r({ type: Boolean })], f.prototype, "formNoValidate", void 0), o([r({ type: String })], f.prototype, "formTarget", void 0), o([r({ type: String })], f.prototype, "name", void 0), o([r({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "autofocus", void 0), o([r({
+	type: Boolean,
+	reflect: !0
+})], f.prototype, "disabled", void 0), o([r({ type: String })], f.prototype, "type", void 0), o([r({ type: String })], f.prototype, "value", void 0), o([r({
+	type: String,
+	attribute: "aria-controls"
+})], f.prototype, "ariaControls", void 0), o([r({
+	type: String,
+	attribute: "aria-expanded"
+})], f.prototype, "ariaExpanded", void 0), o([r({
+	type: String,
+	attribute: "aria-haspopup"
+})], f.prototype, "ariaHaspopup", void 0), o([r({
+	type: String,
+	attribute: "aria-label"
+})], f.prototype, "ariaLabel", void 0), o([r({
+	type: String,
+	attribute: "aria-pressed"
+})], f.prototype, "ariaPressed", void 0), o([n()], f.prototype, "hasIconOrImgOnly", void 0), o([i(".button")], f.prototype, "button", void 0), f = o([a("nve-button")], f);
+var p = f;
+//#endregion
+export { p as default };

package/components/nve-button/nve-button.styles.js

@@ -1,223 +1,280 @@
-import { i as t } from "../../chunks/lit-element.js";
-const a = t`
-  /* kan ikke bruke gap fordi den lager rom mellom slots selv om de er tomme */
-  /* derfor setter margin på ::part(label) og substraherer margin verdi i horizontal padding i selve .button klassen  */
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-button/nve-button.styles.ts
+var t = e`
   :host {
+    display: inline-block;
+    position: relative;
+    width: fit-content;
+    --_img-small-size: var(--font-size-medium);
+    --_img-large-size: var(--font-size-large);
+    --_transition-time: 0.3s;
+    --nve-icon-color-hover: inherit;
+    --nve-icon-color-pressed: inherit;
     --nve-icon-color: inherit;
   }
 
   .button {
-    width: fit-content;
+    padding-inline: unset;
+    margin: unset;
+    padding-block: unset;
+    display: flex;
+    background: var(--_button-background, transparent);
+    color: var(--_button-color, inherit);
+    border-radius: var(--border-radius-small);
+    border: var(--border-width-default) solid transparent;
+    border-color: var(--_button-border-color, transparent);
+    box-shadow: var(--_button-box-shadow, unset);
+    min-height: var(--sizing-fixed-sizing-medium);
+    min-width: var(--sizing-fixed-sizing-medium);
+    justify-content: center;
+    padding: var(--_button-padding, unset);
+    height: var(--_button-height, unset);
+    font: var(--_button-font, unset);
     align-items: center;
-    box-sizing: border-box;
-    position: relative;
-    border: none;
-    min-width: 48px;
+    gap: var(--spacing-x-small);
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
     transition:
-      background-color 0.3s ease,
-      border-color 0.3s ease;
+      background var(--_transition-time) ease,
+      color var(--_transition-time) ease,
+      border-color var(--_transition-time) ease,
+      box-shadow var(--_transition-time) ease;
   }
 
-  :host([has-icon-only])::part(base) {
-    gap: unset;
+  .button:not(.button--loading):not(.button--disabled):hover {
+    background: var(--_button-background-hover, transparent);
+    color: var(--_button-color-hover, inherit);
+    border-color: var(--_button-border-color-hover, transparent);
+    box-shadow: var(--_button-box-shadow-hover, unset);
   }
 
-  :host([has-icon-only]) .button--small {
-    gap: unset;
-    padding: var(--spacing-2x-small);
-    min-width: unset;
+  .button:not(.button--loading):not(.button--disabled):active {
+    background: var(--_button-background-pressed, transparent);
+    color: var(--_button-color-pressed, inherit);
+    box-shadow: var(--_button-box-shadow-pressed, unset);
   }
 
-  :host([has-icon-only]) .button--medium {
-    gap: unset;
-    padding: var(--spacing-x-small);
-    min-width: unset;
-  }
-
-  :host([has-icon-only][circle])::part(base) {
-    width: unset;
+  .button:focus-visible {
+    outline: var(--border-width-strong) solid var(--color-interactive-border-accessibility-focus);
   }
 
-  :host([has-icon-only][loading])::part(spinner) {
-    margin-right: 0;
+  /* Varianter */
+  .button--primary {
+    --_button-background: var(--color-interactive-background-primary-enabled);
+    --_button-color: var(--color-interactive-foreground-primary-enabled);
+    &:hover {
+      --_button-background-hover: var(--color-interactive-background-primary-hover);
+      --_button-color-hover: var(--color-interactive-foreground-primary-hover);
+    }
+    &:active {
+      --_button-background-pressed: var(--color-interactive-background-primary-pressed);
+      --_button-color-pressed: var(--color-interactive-foreground-primary-hover);
+    }
   }
 
-  .button ::slotted(nve-badge) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    transform: translate(50%, -50%);
-    pointer-events: none;
+  .button--secondary {
+    --_button-background: var(--color-interactive-background-secondary-enabled);
+    --_button-color: var(--color-interactive-foreground-secondary-enabled);
+    &:hover {
+      --_button-background-hover: var(--color-interactive-background-secondary-hover);
+      --_button-color-hover: var(--color-interactive-foreground-secondary-hover);
+    }
+    &:active {
+      --_button-background-pressed: var(--color-interactive-background-secondary-pressed);
+      --_button-color-pressed: var(--color-interactive-foreground-secondary-hover);
+    }
   }
 
-  :host::part(spinner) {
-    --track-color: none;
-    --track-width: 2.5px;
-    position: relative;
-    top: 0;
-    font-size: var(--font-size-large);
-    left: 0;
-    margin-right: var(--spacing-x-small);
+  .button--tertiary {
+    --_button-background: transparent;
+    --_button-border-color: var(--color-interactive-border-secondary-enabled);
+    --_button-color: var(--color-interactive-foreground-secondary-enabled);
+    &:hover {
+      --_button-border-color-hover: var(--color-interactive-border-secondary-hover);
+      --_button-color-hover: var(--color-interactive-foreground-secondary-hover);
+    }
+    &:active {
+      --_button-box-shadow-pressed: inset 0 0 0 var(--border-width-default, 1px)
+        var(--color-interactive-border-secondary-hover);
+      --_button-color-pressed: var(--color-interactive-foreground-secondary-hover);
+    }
   }
 
-  :host ::slotted(nve-icon) {
-    font-size: var(--font-size-large);
-    color: var(--nve-icon-color);
+  .button--ghost {
+    --_button-background: transparent;
+    --_button-color: var(--color-interactive-foreground-secondary-enabled);
+    &:hover {
+      --_button-background-hover: var(--color-interactive-background-tertiary-hover);
+      --_button-color-hover: var(--color-interactive-foreground-secondary-hover);
+    }
+    &:active {
+      --_button-background-pressed: var(--color-interactive-background-tertiary-pressed);
+      --_button-color-pressed: var(--color-interactive-foreground-secondary-hover);
+    }
+  }
+  .button--danger {
+    --_button-background: var(--color-feedback-background-emphasized-error);
+    --_button-color: var(--color-interactive-foreground-danger-enabled);
+    &:hover {
+      --_button-background-hover: var(--color-interactive-background-danger-hover);
+      --_button-color-hover: var(--color-interactive-foreground-danger-enabled);
+    }
+    &:active {
+      --_button-background-pressed: var(--color-interactive-background-danger-pressed);
+      --_button-color-pressed: var(--color-interactive-foreground-danger-enabled);
+    }
   }
 
-  :host([size='small']) ::slotted(nve-icon) {
-    font-size: var(--font-size-medium);
+  /* Størrelser */
+  .button--small {
+    padding: 0 var(--spacing-x-small);
+    height: calc(var(--spacing-2x-small) * 2 + var(--_img-small-size));
+    font: var(--typography-label-x-small);
+    line-height: 1em;
+    ::slotted(nve-icon) {
+      --icon-size: var(--_img-small-size);
+    }
+    ::slotted(img) {
+      width: var(--_img-small-size);
+      height: var(--_img-small-size);
+    }
   }
 
-  :host([size='large']) ::slotted(nve-icon) {
-    font-size: var(--font-size-large); // large og medium har samme ikonstr i figma
+  .button--medium {
+    padding: 0 var(--spacing-medium);
+    height: calc(var(--spacing-x-small) * 2 + var(--_img-large-size));
+    font: var(--typography-label-small);
+    line-height: 1em;
+    ::slotted(nve-icon) {
+      --icon-size: var(--_img-large-size);
+    }
+    ::slotted(img) {
+      width: var(--_img-large-size);
+      height: var(--_img-large-size);
+    }
   }
 
-  :host::part(label) {
+  .button--large {
+    padding: var(--spacing-none) var(--spacing-large);
+    height: calc(var(--spacing-small) * 2 + var(--_img-large-size));
     font: var(--typography-label-medium);
+    ::slotted(nve-icon) {
+      --icon-size: var(--_img-large-size);
+    }
+    ::slotted(img) {
+      width: var(--_img-large-size);
+      height: var(--_img-large-size);
+    }
   }
 
-  :host([size='medium'])::part(label) {
-    font: var(--typography-label-small);
+  /* Ikon kun modifikatorer */
+  .button.button--small.button--icon-only,
+  .button.button--medium.button--icon-only,
+  .button.button--large.button--icon-only {
+    padding: 0;
+    color: var(--nve-icon-color, var(--_button-color));
+    &:hover {
+      color: var(--nve-icon-color-hover, var(--_button-color-hover));
+    }
+    &:active {
+      color: var(--nve-icon-color-pressed, var(--_button-color-pressed));
+    }
   }
 
-  :host([size='small'])::part(label) {
-    font: var(--typography-label-x-small);
+  .button--small.button--icon-only {
+    width: calc(var(--spacing-2x-small) * 2 + var(--_img-small-size));
   }
 
-  /** check if has loading if yes apply changes to has-suffix class it shouldnt be fire if loading is not here */
-
-  :host([loading]) .button--has-suffix.button--medium,
-  :host([loading]) .button--has-suffix.button--large {
-    padding-inline-end: var(--spacing-x-small);
+  .button--medium.button--icon-only {
+    width: calc(var(--spacing-x-small) * 2 + var(--_img-large-size));
   }
 
-  :host([loading]) .button--has-suffix.button--small {
-    padding-inline-end: 0.125rem;
+  .button--large.button--icon-only {
+    width: calc(var(--spacing-small) * 2 + var(--_img-large-size));
   }
 
-  .button--has-suffix.button--medium {
-    padding-inline-end: var(--spacing-medium, 1rem);
-  }
-  .button--has-suffix.button--large {
-    padding-inline-end: var(--spacing-medium, 1rem);
+  /* Sirkulære knapper */
+  .button--medium.button--circle,
+  .button--large.button--circle,
+  .button--small.button--circle {
+    border-radius: var(--border-radius-circle);
   }
 
-  :host::part(base) {
-    gap: var(--spacing-x-small);
+  .button--medium.button--circle {
+    padding: var(--spacing-x-small);
   }
 
-  .button--has-prefix.button--small {
-    padding-inline-start: var(--spacing-x-small);
+  .button--large.button--circle {
+    padding: var(--spacing-small);
   }
 
-  .button--has-prefix.button--large,
-  .button--has-prefix.button--medium {
-    padding-inline-start: var(--spacing-medium, 1rem);
+  .button--small.button--circle {
+    padding: var(--spacing-2x-small);
   }
 
-  .button--has-label.button--large .button__label,
-  .button--has-label.button--small .button__label,
-  .button--has-label.button--medium .button__label {
-    padding: unset;
-  }
-  .button:not(.button--has-label) .button__label {
-    display: none;
+  /* Deaktivert */
+  .button--disabled {
+    cursor: not-allowed;
   }
 
-  .button--small {
-    height: var(--sizing-fixed-sizing-medium);
-    min-height: unset;
-    padding: 0px;
-  }
-  .button--large {
-    height: var(--sizing-fixed-sizing-x-large);
-    min-height: unset;
-    padding: var(--spacing-medium, 1rem) calc(var(--spacing-medium, 1rem) - var(--spacing-x-small));
-  }
-  /* fjern gap forskjell på venstre og høyre */
-  .button--medium {
-    height: var(--sizing-fixed-sizing-large);
-    min-height: unset;
-    padding: var(--spacing-medium, 1rem) calc(var(--spacing-medium, 1rem) - var(--spacing-x-small));
+  .button--primary.button--disabled {
+    --_button-background: var(--color-interactive-background-primary-disabled);
+    --_button-color: var(--color-interactive-foreground-primary-disabled);
   }
 
-  /* PRIMARY */
-  :host([variant='primary']) .button--standard.button {
-    background-color: var(--color-interactive-primary-background-default);
-    color: var(--color-interactive-primary-foreground-default);
-    border: none;
-  }
-  :host([variant='primary']) .button--standard.button:hover:not(.button--disabled),
-  :host([variant='primary']) .button--standard.button:active:not(.button--disabled) {
-    background: var(--color-interactive-primary-background-hover);
-    color: var(--color-interactive-primary-foreground-default);
+  .button--secondary.button--disabled {
+    --_button-background: var(--color-interactive-background-secondary-disabled);
+    --_button-color: var(--color-interactive-foreground-secondary-disabled);
   }
 
-  /* DEFAULT, aka SECONDARY */
-  :host([variant='secondary']) .button--standard.button,
-  :host([variant='default']) .button--standard.button {
-    background: var(--color-interactive-secondary-background-default);
-    color: var(--color-interactive-secondary-foreground-default);
-    border: none;
-  }
-  :host([variant='secondary']) .button--standard.button:hover:not(.button--disabled),
-  :host([variant='default']) .button--standard.button:hover:not(.button--disabled) {
-    background: var(--color-interactive-secondary-background-hover);
-    color: var(--color-interactive-secondary-foreground-hover);
+  .button--tertiary.button--disabled {
+    --_button-border-color: var(--color-interactive-border-secondary-disabled);
+    --_button-color: var(--color-interactive-foreground-secondary-disabled);
   }
 
-  /* TEXT aka GHOST */
-  :host([variant='text']) .button.button--standard,
-  :host([variant='ghost']) .button.button--standard {
-    color: var(--color-interactive-ghost-foreground-default);
-    background-color: transparent;
-    border-radius: var(--border-radius-small, 4px);
-    border: none;
+  .button--ghost.button--disabled {
+    --_button-color: var(--color-interactive-foreground-secondary-disabled);
   }
 
-  :host([variant='text'][circle]) .button.button--standard,
-  :host([variant='ghost'][circle]) .button.button--standard {
-    border-radius: 50%;
+  .button--danger.button--disabled {
+    --_button-background: var(--color-interactive-background-danger-disabled);
+    --_button-color: var(--color-interactive-foreground-danger-disabled);
   }
 
-  :host([variant='text']) .button.button--standard:hover:not(.button--disabled),
-  :host([variant='ghost']) .button.button--standard:hover:not(.button--disabled) {
-    background-color: var(--color-interactive-ghost-background-hover);
-    color: var(--color-interactive-ghost-foreground-hover);
+  /* Lastende */
+  .button--loading {
+    cursor: wait;
   }
 
-  /* NEUTRAL, aka OUTLINE */
-  :host([variant='neutral']) .button.button--standard,
-  :host([variant='outline']) .button.button--standard,
-  :host([outline]) .button.button {
-    color: var(--color-interactive-outlined-foreground-default);
-    border-color: var(--color-interactive-outlined-border-default);
-    border-width: var(--border-width-default);
-    border-style: solid;
-    background-color: transparent;
-  }
-  :host([variant='neutral']) .button.button--standard:hover:not(.button--disabled),
-  :host([variant='outline']) .button.button--standard:hover:not(.button--disabled),
-  :host([outline]) .button.button:hover:not(.button--disabled) {
-    border-color: var(--color-interactive-outlined-border-hover);
-    color: var(--color-interactive-outlined-foreground-hover);
-    border-width: var(--border-width-default);
-    border-style: solid;
-    background-color: transparent;
+  .button__spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--color-interactive-foreground-secondary-enabled);
+    border-color: var(--color-interactive-foreground-secondary-enabled) transparent transparent transparent;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
   }
 
-  .button--loading .button__prefix,
-  .button--loading .button__label,
-  .button--loading .button__suffix,
-  .button--loading .button__caret {
-    visibility: unset;
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
   }
 
-  :host([has-icon-only][loading])::part(label) {
-    display: none;
+  /*
+   * Badge
+   */
+  .button ::slotted(nve-badge) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    translate: 50% -50%;
+    pointer-events: none;
   }
 `;
-export {
-  a as default
-};
+//#endregion
+export { t as default };