nve-designsystem 2.9.1 → 2.10.0

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;
+    }
+}

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

@@ -0,0 +1,278 @@
+import { a as w, E as f, x as b } from "../../chunks/lit-element.js";
+import { n as l, t as g } from "../../chunks/property.js";
+import { r as h } from "../../chunks/state.js";
+import y from "./nve-tab-group.styles.js";
+import "../nve-button/nve-button.component.js";
+import { e as v } from "../../chunks/class-map.js";
+import { o as m } from "../../chunks/if-defined.js";
+var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, c = (t, e, s, o) => {
+  for (var a = o > 1 ? void 0 : o ? S(e, s) : e, i = t.length - 1, r; i >= 0; i--)
+    (r = t[i]) && (a = (o ? r(e, s, a) : r(a)) || a);
+  return o && a && k(e, s, a), a;
+};
+let n = class extends w {
+  constructor() {
+    super(), this.testId = void 0, this.background = !1, this.size = "large", this.activeTab = null, this.isOverflow = !1, this.canScrollBack = !1, this.canScrollForward = !1, this.isBackground = !1, this.tabs = [], this.panels = [], this.buttonContainerWidth = 40;
+  }
+  firstUpdated() {
+    this.syncTabsAndPanels();
+    const t = this.shadowRoot?.querySelector(".tab-group__nav");
+    t && this.resizeObserver && (this.resizeObserver.observe(t), t.addEventListener("scroll", () => this.updateScrollState()));
+  }
+  async updated(t) {
+    super.updated?.(t), (t.has("canScrollBack") || t.has("isOverflow")) && await this.removeTabIndexFromBackwardScrollButton(), (t.has("canScrollForward") || t.has("isOverflow")) && await this.removeTabIndexFromForwardScrollButton();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.style.setProperty("--button-container-width", `${this.buttonContainerWidth}px`), this.setAttribute("role", "tablist"), this.resizeObserver = new ResizeObserver(() => this.checkOverflow()), this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.resizeObserver?.disconnect();
+    const t = this.shadowRoot?.querySelector(".tab-group__nav");
+    t && t.removeEventListener("scroll", () => this.updateScrollState()), this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  /**
+   * @internal
+   * Håndterer klikk på faner i tab gruppen.
+   * Setter aktiv fane basert på klikket element.
+   * @param event Klikkeventet.
+   */
+  handleClick(t) {
+    const e = t.composedPath(), s = e.find(
+      (a) => a instanceof HTMLElement && a.tagName.toLowerCase() === "nve-tab"
+    );
+    e.find(
+      (a) => a instanceof HTMLElement && a.tagName.toLowerCase() === "nve-tab-group"
+    ) === this && s && s.panel && this.setActiveTab(s.panel);
+  }
+  /**
+   * @internal
+   * Håndterer tastetrykk på faner i tab gruppen.
+   * Setter aktiv fane basert på tastetrykket.
+   * @param event Tastetrykk eventet.
+   */
+  handleKeyDown(t) {
+    const e = t.composedPath(), s = e.find((a) => a instanceof HTMLElement && a.closest && a.closest("nve-tab") === a) || null;
+    if (e.find(
+      (a) => a instanceof HTMLElement && a.tagName.toLowerCase() === "nve-tab-group"
+    ) === this && (["Enter", " "].includes(t.key) && s && s.panel && (this.setActiveTab(s.panel), t.preventDefault()), ["ArrowLeft", "ArrowRight", "Home", "End"].includes(t.key))) {
+      const a = this.tabs.find((d) => d === s);
+      if (!a) return;
+      const i = this.tabs.indexOf(a);
+      let r;
+      t.key === "ArrowLeft" && (r = i > 0 ? this.tabs[i - 1] : this.tabs[this.tabs.length - 1]), t.key === "ArrowRight" && (r = i < this.tabs.length - 1 ? this.tabs[i + 1] : this.tabs[0]), t.key === "Home" && (r = this.tabs[0]), t.key === "End" && (r = this.tabs[this.tabs.length - 1]), r && (r.focus(), t.preventDefault());
+    }
+  }
+  /**
+   * Henter alle paneler i tab gruppen.
+   * @returns En liste over alle paneler i tab gruppen.
+   */
+  getPanels() {
+    const t = this.shadowRoot?.querySelector("slot:not([name])");
+    return t ? t.assignedElements({ flatten: !0 }).filter((s) => s.tagName.toLowerCase() === "nve-tab-panel") : [];
+  }
+  /**
+   * Henter alle faner i tab gruppen.
+   * @returns En liste over alle faner i tab gruppen.
+   */
+  getTabs() {
+    const t = this.shadowRoot?.querySelector('slot[name="nav"]');
+    return t ? t.assignedElements({ flatten: !0 }).filter((s) => s.tagName.toLowerCase() === "nve-tab") : [];
+  }
+  /** 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.
+   */
+  setActiveTab(t) {
+    this.tabs.forEach((e) => e.setAttribute("aria-selected", `${e.panel === t}`)), this.tabs.forEach((e) => e.setAttribute("tabindex", e.panel === t ? "0" : "-1")), this.panels.forEach((e) => e.classList.toggle("tab-panel--hidden", e.name !== t)), this.activeTab = t, requestAnimationFrame(() => {
+      this.updateIndicator();
+    }), this.dispatchEvent(
+      new CustomEvent("nve-tab-change", {
+        detail: t,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  updateIndicator() {
+    if (this.isBackground) return;
+    const t = this.shadowRoot?.querySelector(".tab-group__nav"), e = this.tabs.find((s) => s.getAttribute("aria-selected") === "true");
+    if (t && e) {
+      const s = e.offsetLeft - t.offsetLeft - 25, o = e.offsetWidth;
+      t.style.setProperty("--indicator-x", `${s}px`), t.style.setProperty("--indicator-width", `${o}px`);
+    }
+  }
+  /**
+   * 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.
+   */
+  setAriaLabels() {
+    this.tabs.forEach((t) => {
+      const e = this.panels.find((s) => s.name === t.panel);
+      e && (t.setAttribute("aria-controls", e.id), e.setAttribute("aria-labelledby", t.id));
+    });
+  }
+  /**
+   * Oppdaterer faner og paneler i tab gruppen.
+   * Kalles når komponenten oppdateres eller når faner/paneler endres.
+   */
+  async syncTabsAndPanels() {
+    if (await customElements.whenDefined("nve-tab"), await customElements.whenDefined("nve-tab-panel"), this.tabs = this.getTabs(), this.panels = this.getPanels(), this.setAriaLabels(), this.tabs.forEach((t) => {
+      t.background = t.background ? t.background : this.background;
+    }), this.isBackground = this.tabs.some((t) => t.background) || this.background, this.tabs.forEach((t) => {
+      t.size = this.size;
+    }), this.activeTab)
+      this.setActiveTab(this.activeTab);
+    else {
+      const t = this.tabs.length > 0 ? this.tabs[0].panel : null;
+      t && this.setActiveTab(t);
+    }
+  }
+  /**
+   * Fjerner tabindex fra fremover scroll-knappen.
+   */
+  async removeTabIndexFromForwardScrollButton() {
+    const e = this.shadowRoot?.querySelector(".tab-group__nav-button--forward")?.querySelector("nve-button");
+    if (e) {
+      await e.updateComplete;
+      const s = e.shadowRoot?.querySelector('[part="base"]');
+      s && s.setAttribute("tabindex", "-1");
+    }
+  }
+  /**
+   * Fjerner tabindex fra bakover scroll-knappen.
+   */
+  async removeTabIndexFromBackwardScrollButton() {
+    const e = this.shadowRoot?.querySelector(".tab-group__nav-button--backward")?.querySelector("nve-button");
+    if (e) {
+      await e.updateComplete;
+      const s = e.shadowRoot?.querySelector('[part="base"]');
+      s && s.setAttribute("tabindex", "-1");
+    }
+  }
+  /**
+   * Sjekker om tab gruppen har overflow og oppdaterer tilstanden for scroll knappene.
+   * Kalles ved endring av størrelse på tab gruppen.
+   */
+  checkOverflow() {
+    const t = this.shadowRoot?.querySelector(".tab-group__nav");
+    if (!t) return;
+    const e = t.scrollWidth > t.clientWidth;
+    this.isOverflow = e, this.updateScrollState();
+  }
+  /**
+   * Oppdaterer tilstanden for scroll knappene basert på gjeldende scroll posisjon.
+   * Kalles når brukeren scroller i tab gruppen.
+   */
+  updateScrollState() {
+    const t = this.shadowRoot?.querySelector(".tab-group__nav");
+    t && (this.canScrollBack = t.scrollLeft > 0, this.canScrollForward = t.scrollLeft + t.clientWidth + 5 < t.scrollWidth);
+  }
+  /**
+   * Ruller navigasjonslisten fremover. Flytter den siste fanen som er full synlig (den blir den første nå).
+   */
+  scrollNavForward() {
+    const t = this.shadowRoot?.querySelector(".tab-group__nav");
+    if (!t || !this.tabs.length) return;
+    const e = t.scrollLeft, s = t.clientWidth, o = e + s;
+    for (let a of this.tabs)
+      if (a.offsetLeft + a.offsetWidth > o) {
+        const u = this.tabs[this.tabs.indexOf(a) - 1], p = u ? u.offsetLeft : 0;
+        t.scrollTo({
+          left: p - this.buttonContainerWidth,
+          behavior: "smooth"
+        });
+        return;
+      }
+  }
+  /**
+   * Ruller navigasjonslisten bakover. Flytter den første fanen som er full synlig (den blir den første nå).
+   */
+  scrollNavBackward() {
+    const t = this.shadowRoot?.querySelector(".tab-group__nav");
+    if (!t || !this.tabs.length) return;
+    const e = t.clientWidth, s = t.scrollLeft;
+    for (let o of this.tabs) {
+      const a = o.offsetLeft, i = a + o.offsetWidth;
+      if (a > s) {
+        t.scrollTo({
+          left: i - e + this.buttonContainerWidth,
+          behavior: "smooth"
+        });
+        return;
+      }
+    }
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class="tab-group"
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        testId=${m(this.testId)}
+      >
+        <div class="tab-group__nav-container">
+          <div class=${v({ "tab-group__nav": !0, "tab-group__nav--background": this.isBackground })}>
+            <slot name="nav"></slot>
+          </div>
+          ${this.canScrollBack && this.isOverflow ? b`
+                <div
+                  aria-hidden="true"
+                  part="button-backward-base"
+                  class="tab-group__nav-button tab-group__nav-button--backward"
+                >
+                  <nve-button @click=${this.scrollNavBackward} variant="text">
+                    <nve-icon name="chevron_backward"></nve-icon>
+                  </nve-button>
+                </div>
+              ` : f}
+          ${this.canScrollForward && this.isOverflow ? b`
+                <div
+                  part="button-forward-base"
+                  aria-hidden="true"
+                  class=${v({
+      "tab-group__nav-button tab-group__nav-button--forward": !0
+    })}
+                >
+                  <nve-button variant="text" @click=${this.scrollNavForward}
+                    ><nve-icon name="chevron_forward"></nve-icon
+                  ></nve-button>
+                </div>
+              ` : f}
+        </div>
+        <slot part="body"></slot>
+      </div>
+    `;
+  }
+};
+n.styles = [y];
+c([
+  l({ type: String })
+], n.prototype, "testId", 2);
+c([
+  l({ type: Boolean })
+], n.prototype, "background", 2);
+c([
+  l({ type: String })
+], n.prototype, "size", 2);
+c([
+  l({ type: String, reflect: !0 })
+], n.prototype, "activeTab", 2);
+c([
+  h()
+], n.prototype, "isOverflow", 2);
+c([
+  h()
+], n.prototype, "canScrollBack", 2);
+c([
+  h()
+], n.prototype, "canScrollForward", 2);
+c([
+  h()
+], n.prototype, "isBackground", 2);
+n = c([
+  g("nve-tab-group")
+], n);
+export {
+  n as default
+};

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

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

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

@@ -0,0 +1,75 @@
+import { i as t } from "../../chunks/lit-element.js";
+const o = t`
+  .tab-group__nav-container {
+    display: flex;
+    position: relative;
+  }
+
+  .tab-group__nav {
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .tab-group__nav:not(.tab-group__nav--background)::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 2px;
+    background: var(--brand-primary);
+    width: var(--indicator-width, 0px);
+    transform: translateX(var(--indicator-x, 0px)) scaleX(var(--indicator-scale, 1));
+    transition:
+      transform 0.3s,
+      width 0.3s;
+    will-change: transform, width;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tab-group__nav:not(.tab-group__nav--background)::after {
+      display: none;
+    }
+  }
+
+  .tab-group__nav--background {
+    gap: var(--spacing-xx-small);
+  }
+
+  @media (max-width: 600px) {
+    .tab-group__nav {
+      overflow-x: auto;
+    }
+  }
+
+  .tab-group__nav-button {
+    --scroll-button-background: #fff;
+    position: absolute;
+    background: var(--scroll-button-background);
+    width: var(--button-container-width);
+    visibility: visible;
+    transition: visibility 0.3s ease-in-out;
+  }
+
+  .tab-group__nav-button,
+  .tab-group__nav-button nve-button,
+  .tab-group__nav-button nve-button::part(base) {
+    height: 100%;
+  }
+
+  .tab-group__nav-button--forward {
+    right: 0;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .tab-group__nav-button--backward {
+    display: flex;
+    justify-content: flex-start;
+    left: 0;
+  }
+`;
+export {
+  o as default
+};

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

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+/**
+ * En panel som brukes i en nve-tab-group for å vise innhold relatert til en fane.
+ * Kan ikke brukes utenfor en nve-tab-group.
+ * Hvis ikke angitt får panelet en unik id som kan brukes for å referere til det automatisk.
+ * @slot (default) - legg inn innholdet som skal vises
+ * @csspart base - hoved kontainer
+ */
+export default class NveTabPanel extends LitElement implements INveComponent {
+    testId: string | undefined;
+    /** Navn på panelet, brukes for å referere til panelet i faner */
+    name: string | null;
+    /** @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-panel': NveTabPanel;
+    }
+}