nve-designsystem 2.9.0 → 2.10.0

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

@@ -1,53 +1,70 @@
-import { i as r } from "../../chunks/lit-element.js";
-const t = r`
-:host {
-  --header-spacing: var(--spacing-x-large, 2rem);
-  --body-spacing: var(--spacing-x-large, 2rem);
-  --footer-spacing: var(--spacing-x-large, 2rem);
-  --width: 40.625rem;
-}
+import { i as o } from "../../chunks/lit-element.js";
+const e = o`
+  :host {
+    --header-spacing: var(--spacing-x-large, 2rem);
+    --body-spacing: var(--spacing-x-large, 2rem);
+    --footer-spacing: var(--spacing-x-large, 2rem);
+    --width: 40.625rem;
+  }
 
-:host::part(footer), ::slotted([slot="footer"]) {
-  display: flex;
-  text-align: left;
-  gap: 0.75rem;
+  :host::part(footer),
+  ::slotted([slot='footer']) {
+    display: flex;
+    text-align: left;
+    gap: 0.75rem;
+  }
+  :host::part(title),
+  ::slotted([slot='title']) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    position: relative;
+    color: var(--neutrals-foreground-primary, #00131c);
+    font: var(--header-small);
+    line-height: 130%;
+    padding: var(--spacing-x-large, 2rem);
+  }
 
-}
-:host::part(title), ::slotted([slot="title"]) {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  position: relative; 
-  color: var(--neutrals-foreground-primary, #00131C);
-  font: var(--header-small);
-  line-height: 130%;
-  padding: var(--spacing-x-large, 2rem);
-}
+  .dialog__title::before {
+    font-family: 'Material Symbols Sharp';
+    content: var(--title-icon);
+  }
 
-:host::part(title)::before {
-  font-family: 'Material Symbols Outlined';
-  content: var(--title-icon);
-}
+  .dialog__header-actions sl-icon-button,
+  .dialog__header-actions ::slotted(sl-icon-button) {
+    color: var(--neutrals-foreground-primary, #00131c);
+    font-family: Source Sans Pro;
+    font-size: 1.3rem;
+    font-style: normal;
+    font-weight: bold;
+  }
 
-.dialog__header-actions sl-icon-button, .dialog__header-actions ::slotted(sl-icon-button) {
-  color: var(--neutrals-foreground-primary, #00131C);
-  font-family: Source Sans Pro;
-  font-size: 1.3rem;
-  font-style: normal;
-  font-weight: bold;
-}
+  :host::part(body),
+  ::slotted([slot='body']) {
+    color: var(--neutrals-foreground-primary, #00131c);
+    font: var(--body-medium-default);
+    line-height: 150%;
+    padding: 0 var(--spacing-x-large, 2rem) 0 var(--spacing-x-large, 2rem);
+  }
 
-:host::part(body), ::slotted([slot="body"]) {
-  color: var(--neutrals-foreground-primary, #00131C);
-  font: var(--body-medium-default);
-  line-height: 150%;
-  padding: 0 var(--spacing-x-large, 2rem) 0 var(--spacing-x-large, 2rem);
-}
+  .dialog__overlay {
+    background-color: rgba(13, 13, 14, 0.4);
+  }
 
-.dialog__overlay {
-  background-color: rgba(13, 13, 14, 0.40);
-}
+  .dialog__header-actions nve-button,
+  .dialog__header-actions ::slotted(nve-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--sl-font-size-medium);
+  }
+
+  .dialog:not(.dialog--has-footer) {
+    .dialog__body {
+      padding-bottom: var(--body-spacing);
+    }
+  }
 `;
 export {
-  t as default
+  e as default
 };

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

@@ -28,7 +28,7 @@ export default class NveDialog extends SlDialog {
      * Metoden søker først etter tittel-elementet i komponentens skygge-DOM.
      * Hvis tittel-elementet finnes og `icon`-egenskapen er satt, oppdateres
      * tittel-elementets stil for å inkludere det angitte ikonet.
-     * Hvis `icon`-egenskapen ikke er satt, settes ikoninnholdet til 'none'
+     * Hvis `icon`-egenskapen ikke er satt, settes ikoninnholdet til null
      * for å unngå å skape unødvendig mellomrom i layouten.
      */
     updateIcon(): void;

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

@@ -5,10 +5,10 @@ import "../../chunks/chunk.YHLNUJ7P.js";
 import "../../chunks/chunk.4TUIT776.js";
 import { n as c, t as d } from "../../chunks/property.js";
 import u from "./nve-dialog-styles.js";
-var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, a = (e, o, i, r) => {
-  for (var t = r > 1 ? void 0 : r ? h(o, i) : o, l = e.length - 1, n; l >= 0; l--)
-    (n = e[l]) && (t = (r ? n(o, i, t) : n(t)) || t);
-  return r && t && f(o, i, t), t;
+var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (e, o, l, r) => {
+  for (var t = r > 1 ? void 0 : r ? h(o, l) : o, i = e.length - 1, a; i >= 0; i--)
+    (a = e[i]) && (t = (r ? a(o, l, t) : a(t)) || t);
+  return r && t && f(o, l, t), t;
 };
 let s = class extends p {
   constructor() {
@@ -28,25 +28,25 @@ let s = class extends p {
    * Metoden søker først etter tittel-elementet i komponentens skygge-DOM.
    * Hvis tittel-elementet finnes og `icon`-egenskapen er satt, oppdateres
    * tittel-elementets stil for å inkludere det angitte ikonet.
-   * Hvis `icon`-egenskapen ikke er satt, settes ikoninnholdet til 'none'
+   * Hvis `icon`-egenskapen ikke er satt, settes ikoninnholdet til null
    * for å unngå å skape unødvendig mellomrom i layouten.
    */
   updateIcon() {
     const e = this.shadowRoot?.querySelector(".dialog__title");
     if (e instanceof HTMLElement) {
-      const o = this.icon ? `"${this.icon}"` : "none";
+      const o = this.icon ? `"${this.icon}"` : null;
       e.style.setProperty("--title-icon", o);
     }
   }
 };
 s.styles = [p.styles, u];
-a([
+n([
   c({ type: String, reflect: !0 })
 ], s.prototype, "icon", 2);
-a([
+n([
   c({ type: Boolean, reflect: !0 })
 ], s.prototype, "disableBackground", 2);
-s = a([
+s = n([
   d("nve-dialog")
 ], s);
 export {

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

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+/**
+ * En fane som kan brukes i en nve-tab-group.
+ * Fane har ingen egen utforming, den viser kun det som er inni.
+ * Hvis ikke angitt får fanen en unik id som kan brukes for å referere til den automatisk.
+ * @slot (prefix) - legg inn innhold som skal vises før hovedinnholdet
+ * @slot (standard) - legg inn fane teksten
+ * @slot (suffix) - legg inn innhold som skal vises etter hovedinnholdet
+ *
+ * @csspart base Topp-element
+ */
+export default class NveTab extends LitElement implements INveComponent {
+    testId: string | undefined;
+    /** Navn på panelet, brukes for å referere til fanen i tab-gruppen */
+    panel: string | null;
+    /** Fane størrelse */
+    size: 'large' | 'small';
+    /** Om fanen skal ha bakgrunn */
+    background: boolean;
+    /** @internal */
+    private readonly attrId;
+    /** @internal */
+    private readonly componentId;
+    static styles: import('lit').CSSResult[];
+    connectedCallback(): void;
+    constructor();
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-tab': NveTab;
+    }
+}

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

@@ -0,0 +1,48 @@
+import { a as d, x as c } from "../../chunks/lit-element.js";
+import { n as a, t as b } from "../../chunks/property.js";
+import h from "./nve-tab.styles.js";
+import { e as u } from "../../chunks/class-map.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (p, s, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? m(s, i) : s, l = p.length - 1, n; l >= 0; l--)
+    (n = p[l]) && (t = (o ? n(s, i, t) : n(t)) || t);
+  return o && t && f(s, i, t), t;
+};
+let v = 0, e = class extends d {
+  constructor() {
+    super(), this.testId = void 0, this.panel = null, this.size = "large", this.background = !1, this.attrId = ++v, this.componentId = `nve-tab-${this.attrId}`, this.id = this.id.length > 0 ? this.id : this.componentId;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "tab");
+  }
+  render() {
+    return c`
+      <div
+        part="base"
+        class=${u({ tab: !0, "tab--large": this.size === "large", "tab--background": this.background })}
+      >
+        <slot name="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix"></slot>
+      </div>
+    `;
+  }
+};
+e.styles = [h];
+r([
+  a({ type: String })
+], e.prototype, "testId", 2);
+r([
+  a({ type: String })
+], e.prototype, "panel", 2);
+r([
+  a({ type: String })
+], e.prototype, "size", 2);
+r([
+  a({ type: Boolean })
+], e.prototype, "background", 2);
+e = r([
+  b("nve-tab")
+], e);
+export {
+  e as default
+};

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

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

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

@@ -0,0 +1,77 @@
+import { i as r } from "../../chunks/lit-element.js";
+const e = r`
+  :host {
+    --border-bottom: 2px;
+    display: flex;
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  :host(:focus-visible) .tab {
+    outline: 2px solid var(--interactive-outlined-border-focus);
+    outline-offset: -12px;
+  }
+
+  .tab {
+    display: flex;
+    min-width: 100px;
+    padding: 11px 0px;
+    text-align: center;
+    width: fit-content;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-xx-small);
+    border-radius: var(--border-radius-small) var(--border-radius-small) var(--border-radius-none)
+      var(--border-radius-none);
+    border-bottom: 2px solid transparent;
+    color: var(--neutrals-foreground-primary);
+    font: var(--label-medium);
+    cursor: pointer;
+    transition:
+      border-color 0.3s ease-in-out,
+      background 0.3s ease-in-out,
+      color 0.3s ease-in-out;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tab {
+      border-bottom: 2px solid var(--brand-primary);
+    }
+  }
+
+  .tab--large {
+    padding: 18px 8px;
+    font: var(--label-medium);
+  }
+
+  .tab--background {
+    background: var(--neutrals-background-primary);
+    border-bottom: var(--border-bottom) solid transparent;
+  }
+
+  :host([aria-selected='false']) .tab {
+    border-bottom: var(--border-bottom) solid var(--neutrals-border-subtle);
+    font: var(--label-medium-light);
+    color: var(--neutrals-foreground-muted);
+  }
+
+  :host([aria-selected='false']) .tab:hover {
+    border-bottom: var(--border-bottom) solid var(--neutrals-border-default);
+  }
+
+  :host([aria-selected='false']) .tab.tab--background:hover {
+    border-bottom: var(--border-bottom) solid var(--neutrals-border-default);
+  }
+
+  :host([aria-selected='false']) .tab.tab--background {
+    background: var(--neutrals-background-secondary);
+    font: var(--label-medium-light);
+    color: var(--neutrals-foreground-muted);
+  }
+`;
+export {
+  e as default
+};

package/components/nve-tab-group/nve-tab-group.component.d.ts

@@ -0,0 +1,131 @@
+import { LitElement } from 'lit';
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+/**
+ * Fanegruppe som viser og styrer et sett med faner og tilhørende innholdspaneler.
+ * Håndterer navigasjon mellom faner, synkronisering av aktive faner og paneler, samt tilgjengelighetsegenskaper.
+ * Sporet 'nav' brukes for å legge til faner, og standardsporet brukes for innholdspaneler. Foreløpig støttes kun horisontal retning på fanene.
+ * Automatisk aktivering av faner (når man blar mellom fanene med tastatur) støttes ikke – det kan være uheldig fra et tilgjengelighetsperspektiv.
+ * For beste praksis, les mer i seksjonen om universell utforming.
+ *
+ * @event nve-tab-change Når aktiv fane endres.
+ *
+ * @csspart base Topp-element
+ * @csspart body Innholdet i tab gruppen
+ * @csspart button-backward-base Bakoverknapp kontainer
+ * @csspart button-forward-base Fremoverknapp kontainer
+ *
+ * @slot (nav) - legg inn faner her.
+ * @slot (standard) - legg inn paneler her.
+ *  @cssproperty --scroll-button-background - farge på bakover og fremoverknappene. Standard er #fff og #1b1b1f for dark modus.
+ */
+export default class NveTabGroup extends LitElement implements INveComponent {
+    testId: string | undefined;
+    /** Om tab gruppen skal ha bakgrunnsfarge */
+    background: boolean;
+    /** Størrelse på tab gruppen */
+    size: 'small' | 'large';
+    /** Den aktive fanen i tab gruppen */
+    activeTab: string | null;
+    /**
+     * @internal
+     * Om det er overflow i tab gruppen og bruker må scrolle */
+    private isOverflow;
+    /**
+     * @internal
+     *  Om det er mulig å scrolle tilbake */
+    private canScrollBack;
+    /**
+     * @internal
+     * Om det er mulig å scrolle fremover */
+    private canScrollForward;
+    /**
+     * @internal
+     * Om tab-gruppe eller noen av tabbene har background egenskap som true */
+    private isBackground;
+    /** @internal */
+    private tabs;
+    /** @internal */
+    private panels;
+    /** @internal */
+    private resizeObserver?;
+    /** @internal */
+    private buttonContainerWidth;
+    static styles: import('lit').CSSResult[];
+    firstUpdated(): void;
+    updated(changedProps: Map<string, unknown>): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    constructor();
+    /**
+     * @internal
+     * Håndterer klikk på faner i tab gruppen.
+     * Setter aktiv fane basert på klikket element.
+     * @param event Klikkeventet.
+     */
+    handleClick(event: MouseEvent): void;
+    /**
+     * @internal
+     * Håndterer tastetrykk på faner i tab gruppen.
+     * Setter aktiv fane basert på tastetrykket.
+     * @param event Tastetrykk eventet.
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Henter alle paneler i tab gruppen.
+     * @returns En liste over alle paneler i tab gruppen.
+     */
+    private getPanels;
+    /**
+     * Henter alle faner i tab gruppen.
+     * @returns En liste over alle faner i tab gruppen.
+     */
+    private getTabs;
+    /** Setter aria-selected og tabindex på fanene. Kun aktiv fane skal bli fokusert. Gjemmer inaktive paneller.
+     * Sender en nve-tab-change event med navnet på den aktive fanen.
+     * @param panelName Navnet på panelet som skal aktiveres.
+     */
+    private setActiveTab;
+    private updateIndicator;
+    /**
+     * Setter aria-controls og aria-labelledby attributter på faner og paneler.
+     * Dette er viktig for tilgjengelighet slik at skjermlesere kan forstå sammenhengen mellom faner og deres tilhørende paneler.
+     */
+    private setAriaLabels;
+    /**
+     * Oppdaterer faner og paneler i tab gruppen.
+     * Kalles når komponenten oppdateres eller når faner/paneler endres.
+     */
+    private syncTabsAndPanels;
+    /**
+     * Fjerner tabindex fra fremover scroll-knappen.
+     */
+    private removeTabIndexFromForwardScrollButton;
+    /**
+     * Fjerner tabindex fra bakover scroll-knappen.
+     */
+    private removeTabIndexFromBackwardScrollButton;
+    /**
+     * Sjekker om tab gruppen har overflow og oppdaterer tilstanden for scroll knappene.
+     * Kalles ved endring av størrelse på tab gruppen.
+     */
+    private checkOverflow;
+    /**
+     * Oppdaterer tilstanden for scroll knappene basert på gjeldende scroll posisjon.
+     * Kalles når brukeren scroller i tab gruppen.
+     */
+    private updateScrollState;
+    /**
+     * Ruller navigasjonslisten fremover. Flytter den siste fanen som er full synlig (den blir den første nå).
+     */
+    private scrollNavForward;
+    /**
+     * Ruller navigasjonslisten bakover. Flytter den første fanen som er full synlig (den blir den første nå).
+     */
+    private scrollNavBackward;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-tab-group': NveTabGroup;
+    }
+}