nve-designsystem 0.2.2 → 0.2.3

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

@@ -90,7 +90,7 @@ const e = r`
     }
   }
 
-  /* emphasized */
+  /* Styling for høyere metningsgrad */
   :host([variant='neutral']) .alert,
   :host([saturation='emphasized']) .alert {
     color: var(--interactive-primary-foreground-default);

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

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
  * 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.
  * @property {string} size = small, medium eller large
  * @property {string} variant = primary, success, neutral, warning, danger, brand
- * @property {boolean} low = gir lysere bakgrunnsfarge
+ * @property {string} saturation = Setter metningsgrad. subtle er eneste støttede, evt ikke satt.
  */
 export default class NveBadge extends LitElement {
     static styles: import("lit").CSSResult[];

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

@@ -43,7 +43,7 @@ const e = a`
     color: var(--feedback-foreground-emphasized-error, #fff);
   }
 
-  /* Low modifiers */
+  /* Lav metningsgrad */
   .saturation--subtle {
     color: var(--neutrals-foreground-primary, #00131c);
   }

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

@@ -1,11 +1,14 @@
 import SlTooltip from '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
 /**
- * Et verktøyhint.
- * TODO: Denne har ingen NVE-styling ennå.
- * TODO: Bør vi skrive noe om at denne ikke funker på pekeskjermer?
+ * Et verktøyhint. Kan åpnes og lukkes programmatisk eller automatisk med ulike hendelser. Kan ha ulik farge og metning.
+ *
  */
 export default class NveTooltip extends SlTooltip {
     constructor();
+    /** Variant, bestemmer fargen på tag */
+    variant: 'neutral' | 'success' | 'info' | 'warning' | 'error';
+    /** Saturation - Hvor mettet fargen på tooltip er */
+    saturation: 'emphasized' | 'subtle' | 'default';
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

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

@@ -1,15 +1,16 @@
-import { c as b, b as o, S as _ } from "../../chunks/chunk.JS655M6J.js";
-import { i as k, x as T } from "../../chunks/lit-element.js";
-import { S as C } from "../../chunks/chunk.GMVRWIWU.js";
-import { s as v, p as u, a as f, g as m, b as y, w as g } from "../../chunks/chunk.KRRLOROJ.js";
-import { L as x } from "../../chunks/chunk.MAS2SHYD.js";
+import { c as _, b as o, S as k } from "../../chunks/chunk.JS655M6J.js";
+import { i as T, x as C } from "../../chunks/lit-element.js";
+import { S as x } from "../../chunks/chunk.GMVRWIWU.js";
+import { s as w, p as f, a as m, g as y, b as g, w as v } from "../../chunks/chunk.KRRLOROJ.js";
+import { L as O } from "../../chunks/chunk.MAS2SHYD.js";
 import { w as d } from "../../chunks/chunk.Q6ASPMKT.js";
-import { e as O } from "../../chunks/class-map.js";
-import { n as s, t as $ } from "../../chunks/property.js";
-import { e as c } from "../../chunks/query.js";
+import { e as $ } from "../../chunks/class-map.js";
+import { n as i, t as z } from "../../chunks/property.js";
+import { e as u } from "../../chunks/query.js";
 import "../nve-icon/nve-icon.component.js";
-var z = k`
-  ${b}
+import E from "./nve-tooltip.styles.js";
+var D = T`
+  ${_}
 
   :host {
     --max-width: 20rem;
@@ -61,9 +62,9 @@ var z = k`
     user-select: none;
     -webkit-user-select: none;
   }
-`, t = class extends _ {
+`, t = class extends k {
   constructor() {
-    super(), this.localize = new x(this), this.content = "", this.placement = "top", this.disabled = !1, this.distance = 8, this.open = !1, this.skidding = 0, this.trigger = "hover focus", this.hoist = !1, this.handleBlur = () => {
+    super(), this.localize = new O(this), this.content = "", this.placement = "top", this.disabled = !1, this.distance = 8, this.open = !1, this.skidding = 0, this.trigger = "hover focus", this.hoist = !1, this.handleBlur = () => {
       this.hasTrigger("focus") && this.hide();
     }, this.handleClick = () => {
       this.hasTrigger("click") && (this.open ? this.hide() : this.show());
@@ -73,12 +74,12 @@ var z = k`
       this.open && !this.disabled && e.key === "Escape" && (e.stopPropagation(), this.hide());
     }, this.handleMouseOver = () => {
       if (this.hasTrigger("hover")) {
-        const e = u(getComputedStyle(this).getPropertyValue("--show-delay"));
+        const e = f(getComputedStyle(this).getPropertyValue("--show-delay"));
         clearTimeout(this.hoverTimeout), this.hoverTimeout = window.setTimeout(() => this.show(), e);
       }
     }, this.handleMouseOut = () => {
       if (this.hasTrigger("hover")) {
-        const e = u(getComputedStyle(this).getPropertyValue("--hide-delay"));
+        const e = f(getComputedStyle(this).getPropertyValue("--hide-delay"));
         clearTimeout(this.hoverTimeout), this.hoverTimeout = window.setTimeout(() => this.hide(), e);
       }
     }, this.addEventListener("blur", this.handleBlur, !0), this.addEventListener("focus", this.handleFocus, !0), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown), this.addEventListener("mouseover", this.handleMouseOver), this.addEventListener("mouseout", this.handleMouseOut);
@@ -96,13 +97,13 @@ var z = k`
     if (this.open) {
       if (this.disabled)
         return;
-      this.emit("sl-show"), await f(this.body), this.body.hidden = !1, this.popup.active = !0;
-      const { keyframes: e, options: i } = m(this, "tooltip.show", { dir: this.localize.dir() });
-      await y(this.popup.popup, e, i), this.emit("sl-after-show");
+      this.emit("sl-show"), await m(this.body), this.body.hidden = !1, this.popup.active = !0;
+      const { keyframes: e, options: s } = y(this, "tooltip.show", { dir: this.localize.dir() });
+      await g(this.popup.popup, e, s), this.emit("sl-after-show");
     } else {
-      this.emit("sl-hide"), await f(this.body);
-      const { keyframes: e, options: i } = m(this, "tooltip.hide", { dir: this.localize.dir() });
-      await y(this.popup.popup, e, i), this.popup.active = !1, this.body.hidden = !0, this.emit("sl-after-hide");
+      this.emit("sl-hide"), await m(this.body);
+      const { keyframes: e, options: s } = y(this, "tooltip.hide", { dir: this.localize.dir() });
+      await g(this.popup.popup, e, s), this.popup.active = !1, this.body.hidden = !0, this.emit("sl-after-hide");
     }
   }
   async handleOptionsChange() {
@@ -114,12 +115,12 @@ var z = k`
   /** Shows the tooltip. */
   async show() {
     if (!this.open)
-      return this.open = !0, g(this, "sl-after-show");
+      return this.open = !0, v(this, "sl-after-show");
   }
   /** Hides the tooltip */
   async hide() {
     if (this.open)
-      return this.open = !1, g(this, "sl-after-hide");
+      return this.open = !1, v(this, "sl-after-hide");
   }
   //
   // NOTE: Tooltip is a bit unique in that we're using aria-live instead of aria-labelledby to trick screen readers into
@@ -128,14 +129,14 @@ var z = k`
   // element, otherwise positioning is incorrect.
   //
   render() {
-    return T`
+    return C`
       <sl-popup
         part="base"
         exportparts="
           popup:base__popup,
           arrow:base__arrow
         "
-        class=${O({
+        class=${$({
       tooltip: !0,
       "tooltip--open": this.open
     })}
@@ -158,40 +159,40 @@ var z = k`
     `;
   }
 };
-t.styles = z;
-t.dependencies = { "sl-popup": C };
+t.styles = D;
+t.dependencies = { "sl-popup": x };
 o([
-  c("slot:not([name])")
+  u("slot:not([name])")
 ], t.prototype, "defaultSlot", 2);
 o([
-  c(".tooltip__body")
+  u(".tooltip__body")
 ], t.prototype, "body", 2);
 o([
-  c("sl-popup")
+  u("sl-popup")
 ], t.prototype, "popup", 2);
 o([
-  s()
+  i()
 ], t.prototype, "content", 2);
 o([
-  s()
+  i()
 ], t.prototype, "placement", 2);
 o([
-  s({ type: Boolean, reflect: !0 })
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
 o([
-  s({ type: Number })
+  i({ type: Number })
 ], t.prototype, "distance", 2);
 o([
-  s({ type: Boolean, reflect: !0 })
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "open", 2);
 o([
-  s({ type: Number })
+  i({ type: Number })
 ], t.prototype, "skidding", 2);
 o([
-  s()
+  i()
 ], t.prototype, "trigger", 2);
 o([
-  s({ type: Boolean })
+  i({ type: Boolean })
 ], t.prototype, "hoist", 2);
 o([
   d("open", { waitUntilFirstUpdate: !0 })
@@ -202,36 +203,42 @@ o([
 o([
   d("disabled")
 ], t.prototype, "handleDisabledChange", 1);
-v("tooltip.show", {
+w("tooltip.show", {
   keyframes: [
     { opacity: 0, scale: 0.8 },
     { opacity: 1, scale: 1 }
   ],
   options: { duration: 150, easing: "ease" }
 });
-v("tooltip.hide", {
+w("tooltip.hide", {
   keyframes: [
     { opacity: 1, scale: 1 },
     { opacity: 0, scale: 0.8 }
   ],
   options: { duration: 150, easing: "ease" }
 });
-var w = t;
+var b = t;
 t.define("sl-tooltip");
-var E = Object.defineProperty, D = Object.getOwnPropertyDescriptor, L = (e, i, r, p) => {
-  for (var a = p > 1 ? void 0 : p ? D(i, r) : i, l = e.length - 1, n; l >= 0; l--)
-    (n = e[l]) && (a = (p ? n(i, r, a) : n(a)) || a);
-  return p && a && E(i, r, a), a;
+var L = Object.defineProperty, P = Object.getOwnPropertyDescriptor, c = (e, s, l, p) => {
+  for (var a = p > 1 ? void 0 : p ? P(s, l) : s, n = e.length - 1, h; n >= 0; n--)
+    (h = e[n]) && (a = (p ? h(s, l, a) : h(a)) || a);
+  return p && a && L(s, l, a), a;
 };
-let h = class extends w {
+let r = class extends b {
   constructor() {
-    super();
+    super(), this.variant = "neutral", this.saturation = "emphasized";
   }
 };
-h.styles = [w.styles];
-h = L([
-  $("nve-tooltip")
-], h);
+r.styles = [b.styles, E];
+c([
+  i({ reflect: !0 })
+], r.prototype, "variant", 2);
+c([
+  i({ reflect: !0 })
+], r.prototype, "saturation", 2);
+r = c([
+  z("nve-tooltip")
+], r);
 export {
-  h as default
+  r as default
 };

package/components/nve-tooltip/nve-tooltip.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

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

@@ -0,0 +1,119 @@
+import { i as r } from "../../chunks/lit-element.js";
+const a = r`
+  :host {
+    --sl-tooltip-border-radius: 40px;
+    --sl-tooltip-background-color: var(--_bg-color);
+    --sl-tooltip-color: var(--_text-color);
+    --sl-tooltip-font-weight: initial;
+    --sl-tooltip-font-size: initial;
+    --sl-tooltip-padding: var(--spacing-xx-small) var(--spacing-x-small);
+    --sl-tooltip-border-radius: var(--border-radius-small);
+    font: var(--label-small-light);
+    --_border-color: transparent;
+    --_border-top-width: 0;
+    --_border-left-width: 0;
+    --_border-right-width: 0;
+    --_border-bottom-width: 0;
+  }
+
+  :host([saturation='subtle'])::part(body) {
+    border: var(--border-width-default) solid var(--_border-color);
+    box-shadow: var(--hard);
+  }
+  :host([saturation='subtle']) [data-current-placement^='top'] {
+    --_border-bottom-width: var(--border-width-default);
+    --_border-right-width: var(--border-width-default);
+  }
+
+  :host([saturation='subtle']) [data-current-placement^='bottom'] {
+    --_border-top-width: var(--border-width-default);
+    --_border-left-width: var(--border-width-default);
+  }
+
+  :host([saturation='subtle']) [data-current-placement^='left'] {
+    --_border-top-width: var(--border-width-default);
+    --_border-right-width: var(--border-width-default);
+  }
+
+  :host([saturation='subtle']) [data-current-placement^='right'] {
+    --_border-bottom-width: var(--border-width-default);
+    --_border-left-width: var(--border-width-default);
+  }
+
+  :host([saturation='subtle'])::part(arrow) {
+    border-top: var(--_border-top-width) solid var(--_border-color);
+    border-bottom: var(--_border-bottom-width) solid var(--_border-color);
+    border-left: var(--_border-left-width) solid var(--_border-color);
+    border-right: var(--_border-right-width) solid var(--_border-color);
+    z-index: 1;
+    translate: var(--_arrow-nudge-x, 0) var(--_arrow-nudge-y, 0);
+  }
+  :host([variant='neutral'][saturation='emphasized']) {
+    --_bg-color: var(--feedback-background-emphasized-neutral);
+    --_text-color: var(--feedback-foreground-emphasized-neutral);
+  }
+  :host([variant='neutral'][saturation='default']) {
+    --_bg-color: var(--feedback-background-default-neutral);
+    --_text-color: var(--feedback-foreground-default-neutral);
+  }
+  :host([variant='neutral'][saturation='subtle']) {
+    --_bg-color: var(--feedback-background-subtle-neutral);
+    --_text-color: var(--feedback-foreground-subtle-neutral);
+    --_border-color: var(--feedback-background-emphasized-neutral);
+  }
+  :host([variant='success'][saturation='emphasized']) {
+    --_bg-color: var(--feedback-background-emphasized-success);
+    --_text-color: var(--feedback-foreground-emphasized-success);
+  }
+  :host([variant='success'][saturation='default']) {
+    --_bg-color: var(--feedback-background-default-success);
+    --_text-color: var(--feedback-foreground-default-success);
+  }
+  :host([variant='success'][saturation='subtle']) {
+    --_bg-color: var(--feedback-background-subtle-success);
+    --_text-color: var(--feedback-foreground-subtle-success);
+    --_border-color: var(--feedback-background-emphasized-success);
+  }
+  :host([variant='info'][saturation='emphasized']) {
+    --_bg-color: var(--feedback-background-emphasized-info);
+    --_text-color: var(--feedback-foreground-emphasized-info);
+  }
+  :host([variant='info'][saturation='default']) {
+    --_bg-color: var(--feedback-background-default-info);
+    --_text-color: var(--feedback-foreground-default-info);
+  }
+  :host([variant='info'][saturation='subtle']) {
+    --_bg-color: var(--feedback-background-subtle-info);
+    --_text-color: var(--feedback-foreground-subtle-info);
+    --_border-color: var(--feedback-background-emphasized-info);
+  }
+  :host([variant='warning'][saturation='emphasized']) {
+    --_bg-color: var(--feedback-background-emphasized-warning);
+    --_text-color: var(--feedback-foreground-emphasized-warning);
+  }
+  :host([variant='warning'][saturation='default']) {
+    --_bg-color: var(--feedback-background-default-warning);
+    --_text-color: var(--feedback-foreground-default-warning);
+  }
+  :host([variant='warning'][saturation='subtle']) {
+    --_bg-color: var(--feedback-background-subtle-warning);
+    --_text-color: var(--feedback-foreground-subtle-warning);
+    --_border-color: var(--feedback-background-emphasized-warning);
+  }
+  :host([variant='error'][saturation='emphasized']) {
+    --_bg-color: var(--feedback-background-emphasized-error);
+    --_text-color: var(--feedback-foreground-emphasized-error);
+  }
+  :host([variant='error'][saturation='default']) {
+    --_bg-color: var(--feedback-background-default-error);
+    --_text-color: var(--feedback-foreground-default-error);
+  }
+  :host([variant='error'][saturation='subtle']) {
+    --_bg-color: var(--feedback-background-subtle-error);
+    --_text-color: var(--feedback-foreground-subtle-error);
+    --_border-color: var(--feedback-background-emphasized-error);
+  }
+`;
+export {
+  a as default
+};

package/custom-elements.json

@@ -383,22 +383,14 @@
               "kind": "field",
               "name": "saturation",
               "type": {
-                "text": "'subtle' | null"
+                "text": "string"
               },
               "default": "null",
-              "description": "Viser lav metning, default er at denne ikke er satt"
+              "description": "= Setter metningsgrad. subtle er eneste støttede, evt ikke satt."
             },
             {
               "kind": "method",
               "name": "render"
-            },
-            {
-              "type": {
-                "text": "boolean"
-              },
-              "description": "= gir lysere bakgrunnsfarge",
-              "name": "low",
-              "kind": "field"
             }
           ],
           "superclass": {
@@ -408,7 +400,7 @@
           "tagNameWithoutPrefix": "badge",
           "tagName": "nve-badge",
           "customElement": true,
-          "jsDoc": "/**\n * 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.\n * @property {string} size = small, medium eller large\n * @property {string} variant = primary, success, neutral, warning, danger, brand\n * @property {boolean} low = gir lysere bakgrunnsfarge\n */"
+          "jsDoc": "/**\n * 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.\n * @property {string} size = small, medium eller large\n * @property {string} variant = primary, success, neutral, warning, danger, brand\n * @property {string} saturation = Setter metningsgrad. subtle er eneste støttede, evt ikke satt.\n */"
         }
       ],
       "exports": [
@@ -9545,9 +9537,27 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Et verktøyhint.\nTODO: Denne har ingen NVE-styling ennå.\nTODO: Bør vi skrive noe om at denne ikke funker på pekeskjermer?",
+          "description": "Et verktøyhint. Kan åpnes og lukkes programmatisk eller automatisk med ulike hendelser. Kan ha ulik farge og metning.",
           "name": "NveTooltip",
           "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'neutral' | 'success' | 'info' | 'warning' | 'error'"
+              },
+              "default": "'neutral'",
+              "description": "Variant, bestemmer fargen på tag"
+            },
+            {
+              "kind": "field",
+              "name": "saturation",
+              "type": {
+                "text": "'emphasized' | 'subtle' | 'default'"
+              },
+              "default": "'emphasized'",
+              "description": "Saturation - Hvor mettet fargen på tooltip er"
+            },
             {
               "kind": "field",
               "name": "styles",
@@ -9555,7 +9565,7 @@
                 "text": "array"
               },
               "static": true,
-              "default": "[SlTooltip.styles]"
+              "default": "[SlTooltip.styles, styles]"
             },
             {
               "kind": "field",
@@ -9750,7 +9760,7 @@
           "tagNameWithoutPrefix": "tooltip",
           "tagName": "nve-tooltip",
           "customElement": true,
-          "jsDoc": "/**\n * Et verktøyhint.\n * TODO: Denne har ingen NVE-styling ennå.\n * TODO: Bør vi skrive noe om at denne ikke funker på pekeskjermer?\n */",
+          "jsDoc": "/**\n * Et verktøyhint. Kan åpnes og lukkes programmatisk eller automatisk med ulike hendelser. Kan ha ulik farge og metning.\n *\n */",
           "cssProperties": [
             {
               "description": "The maximum width of the tooltip before its content will wrap.",
@@ -10300,7 +10310,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "MIT",
   "homepage": "https://github.com/NVE/Designsystem/",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "customElements": "custom-elements.json",
   "exports": {
     ".": {