nve-designsystem 0.1.49 → 0.1.51

package/chunks/chunk.7O2CYFQX.js

@@ -1,7 +1,7 @@
 import { c as a, b as i, S as l } from "./chunk.JS655M6J.js";
 import { i as c } from "./lit-element.js";
 import { S as u } from "./chunk.2HU27ZWH.js";
-import { a as d } from "./class-map.js";
+import { e as d } from "./class-map.js";
 import { s as n, n as b } from "./static.js";
 import { o as e } from "./if-defined.js";
 import { n as s } from "./property.js";

package/chunks/chunk.GMVRWIWU.js

@@ -1,6 +1,6 @@
 import { c as Dt, b as v, S as Ft, _ as Nt, a as $t } from "./chunk.JS655M6J.js";
 import { i as Mt, x as yt } from "./lit-element.js";
-import { a as _t } from "./class-map.js";
+import { e as _t } from "./class-map.js";
 import { n as P } from "./property.js";
 import { e as Pt } from "./query.js";
 var Wt = Mt`

package/chunks/class-map.js

@@ -1,10 +1,10 @@
-import { w as a } from "./lit-element.js";
+import { w as h } from "./lit-element.js";
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const h = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, c = (e) => (...t) => ({ _$litDirective$: e, values: t });
+const a = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, c = (e) => (...t) => ({ _$litDirective$: e, values: t });
 class d {
   constructor(t) {
   }
@@ -29,7 +29,7 @@ class d {
 const u = c(class extends d {
   constructor(e) {
     var t;
-    if (super(e), e.type !== h.ATTRIBUTE || e.name !== "class" || ((t = e.strings) == null ? void 0 : t.length) > 2)
+    if (super(e), e.type !== a.ATTRIBUTE || e.name !== "class" || ((t = e.strings) == null ? void 0 : t.length) > 2)
       throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
   }
   render(e) {
@@ -50,12 +50,12 @@ const u = c(class extends d {
       const o = !!t[s];
       o === this.it.has(s) || (n = this.st) != null && n.has(s) || (o ? (i.add(s), this.it.add(s)) : (i.remove(s), this.it.delete(s)));
     }
-    return a;
+    return h;
   }
 });
 export {
-  u as a,
-  c as e,
+  c as a,
+  u as e,
   d as i,
-  h as t
+  a as t
 };

package/chunks/live.js

@@ -1,5 +1,5 @@
 import { w as n, T as s } from "./lit-element.js";
-import { e as T, i as f, t } from "./class-map.js";
+import { a as T, i as f, t } from "./class-map.js";
 import { f as l, m as p } from "./chunk.2HU27ZWH.js";
 /**
  * @license

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

@@ -5,7 +5,7 @@ import { L as C } from "../../chunks/chunk.MAS2SHYD.js";
 import { c as z, b as i, S } from "../../chunks/chunk.JS655M6J.js";
 import { i as $, x as y } from "../../chunks/lit-element.js";
 import { w as g } from "../../chunks/chunk.Q6ASPMKT.js";
-import { a as A } from "../../chunks/class-map.js";
+import { e as A } from "../../chunks/class-map.js";
 import { n as a, t as k } from "../../chunks/property.js";
 import { e as H } from "../../chunks/query.js";
 import "../../chunks/chunk.2HU27ZWH.js";

package/components/nve-badge/nve-badge.component.d.ts

@@ -1,19 +1,21 @@
-import SlBadge from '@shoelace-style/shoelace/dist/components/badge/badge.js';
+import { LitElement } from 'lit';
 /**
- * En sl-badge med Nve utvidelse.
- * Mer info: https://shoelace.style/components/badge
+ * En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.
  * Kan også brukes med knappen som i Shoelace
  * Importerer ingen styles fra shoelace derfor pill og pulse property skal ikke fungere.
  * @property {string} size = small, medium eller large
+ * @property {string} variant = primary, success, neutral, warning, danger, brand
  * @property {boolean} low = viser svakere farger på badgen
  */
-export default class NveBadge extends SlBadge {
+export default class NveBadge extends LitElement {
     static styles: import("lit").CSSResult[];
-    constructor();
+    /** Variant */
+    variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'brand';
     /** Størrelse på komponenten */
     size: 'small' | 'medium' | 'large';
     /** Viser Low variant, High er default */
     low: boolean;
+    render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,116 +1,32 @@
-import { n as l, t as u } from "../../chunks/property.js";
-import g from "./nve-badge.styles.js";
-import { c as b, b as c, S as v } from "../../chunks/chunk.JS655M6J.js";
-import { i as m, x as f } from "../../chunks/lit-element.js";
-import { a as y } from "../../chunks/class-map.js";
-var h = m`
-  ${b}
-
-  :host {
-    display: inline-flex;
-  }
-
-  .badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: max(12px, 0.75em);
-    font-weight: var(--sl-font-weight-semibold);
-    letter-spacing: var(--sl-letter-spacing-normal);
-    line-height: 1;
-    border-radius: var(--sl-border-radius-small);
-    border: solid 1px var(--sl-color-neutral-0);
-    white-space: nowrap;
-    padding: 0.35em 0.6em;
-    user-select: none;
-    -webkit-user-select: none;
-    cursor: inherit;
-  }
-
-  /* Variant modifiers */
-  .badge--primary {
-    background-color: var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .badge--success {
-    background-color: var(--sl-color-success-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .badge--neutral {
-    background-color: var(--sl-color-neutral-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .badge--warning {
-    background-color: var(--sl-color-warning-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .badge--danger {
-    background-color: var(--sl-color-danger-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  /* Pill modifier */
-  .badge--pill {
-    border-radius: var(--sl-border-radius-pill);
-  }
-
-  /* Pulse modifier */
-  .badge--pulse {
-    animation: pulse 1.5s infinite;
-  }
-
-  .badge--pulse.badge--primary {
-    --pulse-color: var(--sl-color-primary-600);
-  }
-
-  .badge--pulse.badge--success {
-    --pulse-color: var(--sl-color-success-600);
-  }
-
-  .badge--pulse.badge--neutral {
-    --pulse-color: var(--sl-color-neutral-600);
-  }
-
-  .badge--pulse.badge--warning {
-    --pulse-color: var(--sl-color-warning-600);
-  }
-
-  .badge--pulse.badge--danger {
-    --pulse-color: var(--sl-color-danger-600);
-  }
-
-  @keyframes pulse {
-    0% {
-      box-shadow: 0 0 0 0 var(--pulse-color);
-    }
-    70% {
-      box-shadow: 0 0 0 0.5rem transparent;
-    }
-    100% {
-      box-shadow: 0 0 0 0 transparent;
-    }
-  }
-`, r = class extends v {
+import { n as o, t as g } from "../../chunks/property.js";
+import d from "./nve-badge.styles.js";
+import { s as m, x as u } from "../../chunks/lit-element.js";
+import { e as b } from "../../chunks/class-map.js";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (p, t, i, a) => {
+  for (var e = a > 1 ? void 0 : a ? f(t, i) : t, n = p.length - 1, l; n >= 0; n--)
+    (l = p[n]) && (e = (a ? l(t, i, e) : l(e)) || e);
+  return a && e && v(t, i, e), e;
+};
+let r = class extends m {
   constructor() {
-    super(...arguments), this.variant = "primary", this.pill = !1, this.pulse = !1;
+    super(...arguments), this.variant = "primary", this.size = "medium", this.low = !1;
   }
   render() {
-    return f`
+    return u`
       <span
         part="base"
-        class=${y({
+        class=${b({
       badge: !0,
       "badge--primary": this.variant === "primary",
       "badge--success": this.variant === "success",
       "badge--neutral": this.variant === "neutral",
       "badge--warning": this.variant === "warning",
       "badge--danger": this.variant === "danger",
-      "badge--pill": this.pill,
-      "badge--pulse": this.pulse
+      "badge--brand": this.variant === "brand",
+      "badge--small": this.size === "small",
+      "badge--medium": this.size === "medium",
+      "badge--large": this.size === "large",
+      low: this.low
     })}
         role="status"
       >
@@ -119,38 +35,19 @@ var h = m`
     `;
   }
 };
-r.styles = h;
-c([
-  l({ reflect: !0 })
+r.styles = [d];
+s([
+  o({ type: String, reflect: !0 })
 ], r.prototype, "variant", 2);
-c([
-  l({ type: Boolean, reflect: !0 })
-], r.prototype, "pill", 2);
-c([
-  l({ type: Boolean, reflect: !0 })
-], r.prototype, "pulse", 2);
-var w = r;
-r.define("sl-badge");
-var _ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, p = (d, s, t, o) => {
-  for (var e = o > 1 ? void 0 : o ? x(s, t) : s, n = d.length - 1, i; n >= 0; n--)
-    (i = d[n]) && (e = (o ? i(s, t, e) : i(e)) || e);
-  return o && e && _(s, t, e), e;
-};
-let a = class extends w {
-  constructor() {
-    super(), this.size = "medium", this.low = !1;
-  }
-};
-a.styles = [g];
-p([
-  l({ type: String, reflect: !0 })
-], a.prototype, "size", 2);
-p([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "low", 2);
-a = p([
-  u("nve-badge")
-], a);
+s([
+  o({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
+s([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "low", 2);
+r = s([
+  g("nve-badge")
+], r);
 export {
-  a as default
+  r as default
 };

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

@@ -1,70 +1,94 @@
 import { i as a } from "../../chunks/lit-element.js";
 const e = a`
-  :host::part(base) {
-    border-radius: 3.125rem;
-    white-space: nowrap;
-    text-align: center;
-    font: var(--label-small);
-    padding: 0.375rem 0.4375rem;
-    color: var(--interactive-primary-foreground-default, #fff);
+  :host {
+    display: inline-flex;
   }
 
-  /* padding basert på størrelse */
-  :host([size='large'])::part(base) {
-    padding: var(--spacing-x-small) 0.5625rem;
+  .badge {
+    display: inline-flex;
+    padding: var(--spacing-xx-small, 4px) var(--spacing-x-small, 8px);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--border-radius-circle, 50px);
   }
 
-  :host([size='small'])::part(base) {
-    font-size: 0.75rem;
-    padding: var(--spacing-xx-small) 0.31rem;
+  /* Variant modifiers */
+  .badge--brand {
+    background-color: var(--brand-primary);
+    color: var(--interactive-primary-foreground-default);
   }
 
-  /* bakgrunn farger basert på variant */
-  :host([variant='primary'])::part(base) {
-    background: var(--feedback-background-emphasized-info, #1e6fdc);
+  .badge--neutral {
+    background-color: var(--feedback-background-default-neutral, #e4e5e7);
+    color: var(--feedback-foreground-default-neutral, #00131c);
   }
 
-  :host([variant='neutral'])::part(base) {
-    background: var(--neutrals-foreground-subtle, #60656c);
+  .badge--primary {
+    background-color: var(--feedback-background-emphasized-info, #1e6fdc);
+    color: var(--feedback-foreground-emphasized-info, #fff);
   }
 
-  :host([variant='success'])::part(base) {
-    background: var(--feedback-background-emphasized-success, #00814b);
+  .badge--success {
+    background-color: var(--feedback-background-emphasized-success, #00814b);
+    color: var(--feedback-foreground-emphasized-success, #fff);
+  }
+  .badge--warning {
+    background-color: var(--feedback-background-emphasized-warning, #ffd046);
+    color: var(--feedback-foreground-emphasized-warning, #0d0d0e);
   }
 
-  :host([variant='danger'])::part(base) {
-    background: var(--feedback-background-emphasized-error, #c00);
+  .badge--danger {
+    background-color: var(--feedback-background-emphasized-error, #c00);
+    color: var(--feedback-foreground-emphasized-error, #fff);
   }
 
-  :host([variant='warning'])::part(base) {
-    color: var(--feedback-foreground-emphasized-warning, #0d0d0e);
-    background: var(--feedback-background-emphasized-warning, #ffd046);
+  /* Low modifiers */
+  .low {
+    color: var(--neutrals-foreground-primary, #00131c);
   }
 
-  /* low bakgrunn farger basert på variant */
+  .badge--brand.low {
+    background-color: var(--brand-light);
+  }
 
-  :host([low])::part(base) {
-    color: var(--neutrals-foreground-primary, #0d0d0e);
+  .badge--neutral.low {
+    background-color: var(--feedback-background-subtle-neutral, #f7f7f8);
   }
 
-  :host([low][variant='primary'])::part(base) {
-    background: var(--feedback-background-default-info, #ceeaff);
+  .badge--primary.low {
+    background-color: var(--feedback-background-default-info, #ceeaff);
   }
 
-  :host([low][variant='neutral'])::part(base) {
-    background: var(--neutrals-background-secondary, #e4e5e7);
+  .badge--success.low {
+    background-color: var(--feedback-background-default-success, #cbf9cb);
+  }
+  .badge--warning.low {
+    background-color: var(--feedback-background-default-warning, #ffe8a5);
+  }
+  .badge--danger.low {
+    background-color: var(--feedback-background-default-error, #ffd8de);
   }
 
-  :host([low][variant='success'])::part(base) {
-    background: var(--feedback-background-default-success, #cbf9cb);
+  /* Sizing modifiers */
+  .badge--small {
+    padding: var(--spacing-xx-small, 4px) 6px;
+    font-family: 'Source Sans Pro';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 10px;
   }
 
-  :host([low][variant='danger'])::part(base) {
-    background: var(--feedback-background-default-error, #ffd8de);
+  .badge--medium {
+    padding: var(--spacing-xx-small, 4px) var(--spacing-x-small, 8px);
+    font: var(--label-x-small);
   }
 
-  :host([low][variant='warning'])::part(base) {
-    background: var(--feedback-background-default-warning, #ffe8a5);
+  .badge--large {
+    // 2 piksler per top og bottom for å få 27px høyde
+    padding: calc(var(--spacing-xx-small, 4px) + 1px) 10px;
+    font: var(--label-small);
   }
 `;
 export {

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

@@ -7,7 +7,7 @@ import { L as _ } from "../../chunks/chunk.MAS2SHYD.js";
 import { S as x } from "../../chunks/chunk.2HU27ZWH.js";
 import { w as S } from "../../chunks/chunk.Q6ASPMKT.js";
 import { b as e, S as w } from "../../chunks/chunk.JS655M6J.js";
-import { a as F } from "../../chunks/class-map.js";
+import { e as F } from "../../chunks/class-map.js";
 import { s as d, n as f } from "../../chunks/static.js";
 import { o as s } from "../../chunks/if-defined.js";
 import { r as c } from "../../chunks/state.js";

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

@@ -1,5 +1,5 @@
 import { i as t } from "../../chunks/lit-element.js";
-const r = t`
+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  */
   .button {
@@ -21,6 +21,7 @@ const r = t`
     position: relative;
     top: 0;
     left: 0;
+    margin-right: var(--spacing-x-small);
   }
 
   :host ::slotted(nve-icon) {
@@ -35,53 +36,66 @@ const r = t`
     font: var(--label-medium);
   }
 
-  :host([size='medium'])::part(spinner),
-  :host([size='large'])::part(spinner) {
-    margin-right: var(--spacing-small);
+  :host([size='medium'])::part(label) {
+    font: var(--label-small);
   }
 
-  :host::part(base) {
-    gap: var(--spacing-x-small);
+  :host([size='small'])::part(label) {
+    font: var(--label-x-small);
   }
 
-  :host([size='small'])::part(spinner) {
-    margin-right: var(--spacing-x-small);
+  /** 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);
   }
 
-  :host([size='small'])::part(label) {
-    font: var(--label-x-small);
+  :host([loading]) .button--has-suffix.button--small {
+    padding-inline-end: 0.125rem;
+  }
+
+  .button--has-suffix.button--medium {
+    padding-inline-end: var(--spacing-medium, 1rem);
+  }
+  .button--has-suffix.button--large {
+    padding-inline-end: var(--spacing-medium, 1rem);
+  }
+
+  :host::part(base) {
+    gap: var(--spacing-x-small);
   }
 
   .button--has-prefix.button--small {
     padding-inline-start: var(--spacing-x-small);
   }
 
+  .button--has-prefix.button--large,
+  .button--has-prefix.button--medium {
+    padding-inline-start: var(--spacing-medium, 1rem);
+  }
+
   .button--has-label.button--large .button__label,
   .button--has-label.button--small .button__label,
   .button--has-label.button--medium .button__label {
     padding: unset;
   }
 
-  .button--has-suffix.button--small,
-  .button--has-suffix.button--medium,
-  .button--has-suffix.button--large {
-    padding-inline-end: unset;
-  }
-
   .button--small {
     height: var(--sizing-x-small);
     min-height: unset;
     padding: 0px;
   }
   .button--large {
-    height: var(--sl-input-height-medium);
+    height: var(--sizing-medium);
     min-height: unset;
-    padding: var(--spacing-medium, 1rem) var(---spacing-x-small, 0.5rem);
+    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(--sl-input-height-small);
+    height: var(--sizing-small);
     min-height: unset;
-    padding: var(--spacing-small, 0.75rem) var(---spacing-x-small, 0.5rem);
+    padding: var(--spacing-medium, 1rem) calc(var(--spacing-medium, 1rem) - var(--spacing-x-small));
   }
 
   /* PRIMARY */
@@ -145,5 +159,5 @@ const r = t`
   }
 `;
 export {
-  r as default
+  a as default
 };

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

@@ -5,7 +5,7 @@ import { d as x } from "../../chunks/chunk.GI7VDIWX.js";
 import { F as g } from "../../chunks/chunk.UEQZEZFU.js";
 import { S as y } from "../../chunks/chunk.2HU27ZWH.js";
 import { w as p } from "../../chunks/chunk.Q6ASPMKT.js";
-import { a as _ } from "../../chunks/class-map.js";
+import { e as _ } from "../../chunks/class-map.js";
 import { o as C } from "../../chunks/if-defined.js";
 import { l as u } from "../../chunks/live.js";
 import { r as z } from "../../chunks/state.js";

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

@@ -7,7 +7,7 @@ import { s as u, g as d, b as c, a as g, w as k } from "../../chunks/chunk.KRRLO
 import { H as q } from "../../chunks/chunk.NYIIDP5N.js";
 import { L as P } from "../../chunks/chunk.MAS2SHYD.js";
 import { w as O } from "../../chunks/chunk.Q6ASPMKT.js";
-import { a as B } from "../../chunks/class-map.js";
+import { e as B } from "../../chunks/class-map.js";
 import { o as E } from "../../chunks/if-defined.js";
 import { n as f, t as I } from "../../chunks/property.js";
 import { e as v } from "../../chunks/query.js";

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

@@ -5,7 +5,7 @@ import { S as T } from "../../chunks/chunk.GMVRWIWU.js";
 import { s as g, w as u, a as c, g as f, b as m } from "../../chunks/chunk.KRRLOROJ.js";
 import { L as _ } from "../../chunks/chunk.MAS2SHYD.js";
 import { w as C } from "../../chunks/chunk.Q6ASPMKT.js";
-import { a as D } from "../../chunks/class-map.js";
+import { e as D } from "../../chunks/class-map.js";
 import { n as l, t as L } from "../../chunks/property.js";
 import { e as h } from "../../chunks/query.js";
 import O from "./nve-dropdown.styles.js";

package/components/nve-icon/nve-icon.component.d.ts

@@ -6,6 +6,7 @@ import { LitElement } from 'lit';
  */
 export default class NveIcon extends LitElement {
     static styles: import("lit").CSSResult[];
+    library: 'Outlined' | 'Sharp';
     /** Navnet på ikonet i Material Symbols-biblioteket */
     name: string;
     protected firstUpdated(): void;

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

@@ -1,28 +1,31 @@
-import { s as m, x as f } from "../../chunks/lit-element.js";
-import { n as c, t as i } from "../../chunks/property.js";
+import { s as f, x as m } from "../../chunks/lit-element.js";
+import { n as i, t as y } from "../../chunks/property.js";
 import u from "./nve-icon.styles.js";
-var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (a, r, n, t) => {
-  for (var e = t > 1 ? void 0 : t ? _(r, n) : r, o = a.length - 1, p; o >= 0; o--)
-    (p = a[o]) && (e = (t ? p(r, n, e) : p(e)) || e);
-  return t && e && v(r, n, e), e;
+var c = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (l, t, n, s) => {
+  for (var r = s > 1 ? void 0 : s ? v(t, n) : t, o = l.length - 1, p; o >= 0; o--)
+    (p = l[o]) && (r = (s ? p(t, n, r) : p(r)) || r);
+  return s && r && c(t, n, r), r;
 };
-let s = class extends m {
+let e = class extends f {
   constructor() {
-    super(...arguments), this.name = "";
+    super(...arguments), this.library = "Outlined", this.name = "";
   }
   firstUpdated() {
   }
   render() {
-    return f`<span part="icon" class="material-symbols-outlined">${this.name}</span>`;
+    return m`<span style="font-family:Material Symbols ${this.library}">${this.name}</span>`;
   }
 };
-s.styles = [u];
-l([
-  c({ reflect: !0 })
-], s.prototype, "name", 2);
-s = l([
-  i("nve-icon")
-], s);
+e.styles = [u];
+a([
+  i({ type: String })
+], e.prototype, "library", 2);
+a([
+  i({ reflect: !0 })
+], e.prototype, "name", 2);
+e = a([
+  y("nve-icon")
+], e);
 export {
-  s as default
+  e as default
 };

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

@@ -1,15 +1,26 @@
 import { i as e } from "../../chunks/lit-element.js";
 const o = e`
-  :host {
-    /* Apply Material Icons font-family to the Shadow DOM */
-    font-family: 'Material Symbols Outlined';
-  }
+
   /* Brukes i dropdown. Eneste måten å override shadow dom for å rotere expand_more ikonet når menyen åpner */
   :host([name='expand_more']) {
     transform: var(--icon-rotation, none);
     transition: transform 0.3s ease;
   }
 
+  /* prevent icon beeing highlighted */ 
+  :host {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
+:host {
+    display: flex;
+}
+
   /* we need it to center the icon */
   :is(span) {
     display: inline-flex;