@entur/tab 1.0.0-alpha.0 → 1.0.0-next.1

package/README.md

@@ -2,7 +2,7 @@
 
 This package contains the different Tab components.
 
-> 💡 Looking for the [documentation](https://design.entur.no/komponenter/layout-and-surfaces/tabs)?
+> 💡 Looking for the [documentation](https://linje.entur.no/komponenter/layout-og-flater/tab)?
 
 ## Installation
 
@@ -14,4 +14,4 @@ yarn add @entur/tab
 
 ## Usage
 
-Please refer to the [documentation](https://design.entur.no/komponenter/layout-and-surfaces/tabs) for usage information.
+Please refer to the [documentation](https://linje.entur.no/komponenter/layout-og-flater/tab) for usage information.

package/dist/Tab.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
+import { default as React } from 'react';
 export type TabProps = {
     /** Overskriften til taben */
     children: React.ReactNode;
     /** Om taben er disabled eller ikke */
     disabled?: boolean;
     /** HTML-elementet eller React-komponenten som lager komponenten */
-    as?: keyof JSX.IntrinsicElements | any;
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
     removeActiveLine?: boolean;
-    [key: string]: any;
-};
-export declare const Tab: React.FC<TabProps>;
+    className?: string;
+} & Omit<React.ComponentPropsWithoutRef<'button'>, 'children' | 'disabled'>;
+export declare const Tab: ({ className, removeActiveLine, as, disabled, children, ...rest }: TabProps) => import("react/jsx-runtime").JSX.Element;

package/dist/TabList.d.ts

@@ -1,10 +1,14 @@
-import React from 'react';
+import { default as React } from 'react';
 export type TabListProps = {
     /** Tab-komponenter */
     children: React.ReactNode;
     /** HTML-elementet eller React-komponenten som lager komponenten */
-    as?: keyof JSX.IntrinsicElements | any;
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
     width?: 'fluid';
-    [key: string]: any;
-};
-export declare const TabList: React.FC<TabListProps>;
+    className?: string;
+    /** Tilgjengelig navn på tab-listen (dersom det ikke finnes en synlig overskrift) */
+    'aria-label'?: string;
+    /** ID til elementet som navngir tab-listen */
+    'aria-labelledby'?: string;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;
+export declare const TabList: ({ className, width, as, children, ...rest }: TabListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/TabPanel.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import { default as React } from 'react';
 export type TabPanelProps = {
-    /** Overskriften til taben */
-    children: React.ReactNode;
+    /** Innholdet i tab-panelet */
+    children?: React.ReactNode;
     /** HTML-elementet eller React-komponenten som lager komponenten */
-    as?: keyof JSX.IntrinsicElements | any;
-    [key: string]: any;
-};
-export declare const TabPanel: React.FC<TabPanelProps>;
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
+    className?: string;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;
+export declare const TabPanel: ({ className, as, children, ...rest }: TabPanelProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/TabPanels.d.ts

@@ -1,9 +1,11 @@
-import React from 'react';
+import { default as React } from 'react';
 export type TabPanelsProps = {
     /** Tab-panelene */
     children: React.ReactNode;
     /** HTML-elementet eller React-komponenten som lager komponenten */
-    as?: keyof JSX.IntrinsicElements | any;
-    [key: string]: any;
-};
-export declare const TabPanels: React.FC<TabPanelsProps>;
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
+    /** Behold alle panel-noder i DOM (skjult med hidden-attributt) i stedet for å avmontere */
+    keepMounted?: boolean;
+    className?: string;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;
+export declare const TabPanels: ({ className, as, keepMounted, children, ...rest }: TabPanelsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Tabs.d.ts

@@ -1,15 +1,15 @@
-import React from 'react';
+import { default as React } from 'react';
 export type TabsProps = {
-    /** Overskriften til taben */
+    /** Tab-innholdet */
     children: React.ReactNode;
     /** Kalles når taben endres */
     onChange?: (index: number) => void;
     /** Hvilken tab som skal være åpen by default */
     defaultIndex?: number;
-    /** Den åpne indexen */
+    /** Den åpne indexen (kontrollert) */
     index?: number;
     /** HTML-elementet eller React-komponenten som lager komponenten */
-    as?: keyof JSX.IntrinsicElements | any;
-    [key: string]: any;
-};
-export declare const Tabs: React.FC<TabsProps>;
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
+    className?: string;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'onChange'>;
+export declare const Tabs: ({ className, index, defaultIndex, onChange, as, children, ...rest }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/TabsContext.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export type TabsContextValue = {
+    selectedIndex: number;
+    onSelect: (index: number) => void;
+    tabsId: string;
+};
+export declare const TabsContext: React.Context<TabsContextValue>;
+export type TabItemContextValue = {
+    tabIndex: number;
+    tabId: string;
+    panelId: string;
+};
+export declare const TabItemContext: React.Context<TabItemContextValue | null>;
+export type TabPanelItemContextValue = {
+    tabIndex: number;
+    tabId: string;
+    panelId: string;
+    keepMounted: boolean;
+};
+export declare const TabPanelItemContext: React.Context<TabPanelItemContextValue | null>;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import './index.scss';
 export * from './Tab';
 export * from './Tabs';
 export * from './TabPanel';

package/dist/styles.css

@@ -1,153 +1,384 @@
-/* DO NOT CHANGE!*/
-/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
-:root {
-  --reach-tabs: 1;
-  --eds-tab: 1;
+[data-color-mode=light],
+:root{
+  --components-tab-contrast-border:#aeb7e2;
+  --components-tab-contrast-fill-disabled:rgba(84, 86, 140, 0.4);
+  --components-tab-contrast-fill-hover:#626493;
+  --components-tab-contrast-fill-selected:#181c56;
+  --components-tab-contrast-fill-unselected:#393d79;
+  --components-tab-contrast-icon:#ffffff;
+  --components-tab-contrast-icon-disabled:#b6b8ba;
+  --components-tab-contrast-text:#ffffff;
+  --components-tab-contrast-text-disabled:#b6b8ba;
+  --components-tab-contrast-underline-selected:#ff5959;
+  --components-tab-standard-border:#e3e6e8;
+  --components-tab-standard-fill-disabled:#cfd2d4;
+  --components-tab-standard-fill-hover:#e3e6e8;
+  --components-tab-standard-fill-selected:#ffffff;
+  --components-tab-standard-fill-unselected:#edf0f2;
+  --components-tab-standard-icon:#181c56;
+  --components-tab-standard-icon-disabled:#515254;
+  --components-tab-standard-text:#181c56;
+  --components-tab-standard-text-disabled:#515254;
+  --components-tab-standard-underline-selected:#ff5959;
 }
 
-.eds-tab-list {
-  position: relative;
-  top: 0.125rem;
-  overflow-x: scroll;
-  display: flex;
-  scrollbar-width: none;
-  padding-top: 0.25rem;
-  margin-top: -0.25rem;
-  z-index: 0;
-}
-.eds-tab-list::after {
-  content: "";
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: #d1d3d3;
-  display: block;
-  height: 0.125rem;
-  width: inherit;
-  z-index: -1;
-}
-.eds-contrast .eds-tab-list::after {
-  background-color: #aeb7e2;
-}
-.eds-tab-list::-webkit-scrollbar {
-  display: none;
+[data-color-mode=dark]{
+  --components-tab-contrast-border:#81828f;
+  --components-tab-contrast-fill-disabled:rgba(207, 210, 212, 0.1019607843);
+  --components-tab-contrast-fill-hover:#393a49;
+  --components-tab-contrast-fill-selected:#08091c;
+  --components-tab-contrast-fill-unselected:rgba(229, 229, 233, 0.2509803922);
+  --components-tab-contrast-icon:#e5e5e9;
+  --components-tab-contrast-icon-disabled:#949699;
+  --components-tab-contrast-text:#e5e5e9;
+  --components-tab-contrast-text-disabled:#949699;
+  --components-tab-contrast-underline-selected:#ff5959;
+  --components-tab-standard-border:#81828f;
+  --components-tab-standard-fill-disabled:rgba(207, 210, 212, 0.1019607843);
+  --components-tab-standard-fill-hover:#393a49;
+  --components-tab-standard-fill-selected:#08091c;
+  --components-tab-standard-fill-unselected:rgba(229, 229, 233, 0.2509803922);
+  --components-tab-standard-icon:#e5e5e9;
+  --components-tab-standard-icon-disabled:#949699;
+  --components-tab-standard-text:#e5e5e9;
+  --components-tab-standard-text-disabled:#949699;
+  --components-tab-standard-underline-selected:#ff5959;
+}
+[data-color-mode=light],
+:root{
+  --basecolors-frame-contrast:#181c56;
+  --basecolors-frame-contrastalt:#393d79;
+  --basecolors-frame-contrastalt-2:#292b6a;
+  --basecolors-frame-default:#ffffff;
+  --basecolors-frame-elevated:#ffffff;
+  --basecolors-frame-elevatedalt:#f6f6f9;
+  --basecolors-frame-highlight:#ff5959;
+  --basecolors-frame-highlightalt:#ffbf9e;
+  --basecolors-frame-subdued:#d9dae8;
+  --basecolors-frame-tint:#f6f6f9;
+  --basecolors-shape-accent:#181c56;
+  --basecolors-shape-bicycle-contrast:#00dbb6;
+  --basecolors-shape-bicycle-default:#0d827e;
+  --basecolors-shape-bus-contrast:#ff6392;
+  --basecolors-shape-bus-default:#c5044e;
+  --basecolors-shape-cableway-contrast:#b482fb;
+  --basecolors-shape-cableway-default:#78469a;
+  --basecolors-shape-disabled:#6e6f73;
+  --basecolors-shape-disabledalt:#b6b8ba;
+  --basecolors-shape-ferry-contrast:#6fdfff;
+  --basecolors-shape-ferry-default:#0c6693;
+  --basecolors-shape-funicular-contrast:#b482fb;
+  --basecolors-shape-funicular-default:#78469a;
+  --basecolors-shape-helicopter-contrast:#fbafea;
+  --basecolors-shape-helicopter-default:#800664;
+  --basecolors-shape-highlight:#ff5959;
+  --basecolors-shape-light:#ffffff;
+  --basecolors-shape-mask:#ffffff;
+  --basecolors-shape-maskalt:#ffffff;
+  --basecolors-shape-metro-contrast:#f08901;
+  --basecolors-shape-metro-default:#bf5826;
+  --basecolors-shape-mobility-contrast:#00dbb6;
+  --basecolors-shape-mobility-default:#0d827e;
+  --basecolors-shape-plane-contrast:#fbafea;
+  --basecolors-shape-plane-default:#800664;
+  --basecolors-shape-subdued:#626493;
+  --basecolors-shape-subduedalt:#d9dae8;
+  --basecolors-shape-taxi-contrast:#ffe082;
+  --basecolors-shape-taxi-default:#3d3e40;
+  --basecolors-shape-train-contrast:#42a5f5;
+  --basecolors-shape-train-default:#00367f;
+  --basecolors-shape-tram-contrast:#b482fb;
+  --basecolors-shape-tram-default:#78469a;
+  --basecolors-shape-walk-contrast:#9ea0bd;
+  --basecolors-shape-walk-default:#8d8e9c;
+  --basecolors-shape-airportlinkbus-contrast:#fbafea;
+  --basecolors-shape-airportlinkbus-default:#800664;
+  --basecolors-shape-airportlinkrail-contrast:#fbafea;
+  --basecolors-shape-airportlinkrail-default:#800664;
+  --basecolors-stroke-contrast:#aeb7e2;
+  --basecolors-stroke-default:#181c56;
+  --basecolors-stroke-disabled:#949699;
+  --basecolors-stroke-focus-contrast:#aeb7e2;
+  --basecolors-stroke-focus-standard:#181c56;
+  --basecolors-stroke-highlight:#ff5959;
+  --basecolors-stroke-highlight2:#ffbf9e;
+  --basecolors-stroke-light:#ffffff;
+  --basecolors-stroke-subdued:#8284ab;
+  --basecolors-stroke-subduedalt:#e3e6e8;
+  --basecolors-text-accent:#181c56;
+  --basecolors-text-disabled:#6e6f73;
+  --basecolors-text-disabledalt:#b6b8ba;
+  --basecolors-text-highlight:#ff5959;
+  --basecolors-text-highlightalt:#ffbf9e;
+  --basecolors-text-light:#ffffff;
+  --basecolors-text-subdued:#626493;
+  --basecolors-text-subduedalt:#d9dae8;
+}
+
+[data-color-mode=dark]{
+  --basecolors-frame-contrast:#212233;
+  --basecolors-frame-contrastalt:#141527;
+  --basecolors-frame-contrastalt-2:#08091c;
+  --basecolors-frame-default:#08091c;
+  --basecolors-frame-elevated:rgba(229, 229, 233, 0.1490196078);
+  --basecolors-frame-elevatedalt:#464755;
+  --basecolors-frame-highlight:#ff5959;
+  --basecolors-frame-highlightalt:#ffbf9e;
+  --basecolors-frame-subdued:#2d2e3e;
+  --basecolors-frame-tint:#141527;
+  --basecolors-shape-accent:#e5e5e9;
+  --basecolors-shape-bicycle-contrast:#4db2a1;
+  --basecolors-shape-bicycle-default:#4db2a1;
+  --basecolors-shape-bus-contrast:#ef7398;
+  --basecolors-shape-bus-default:#ef7398;
+  --basecolors-shape-cableway-contrast:#b898e5;
+  --basecolors-shape-cableway-default:#b898e5;
+  --basecolors-shape-disabled:#b6b8ba;
+  --basecolors-shape-disabledalt:#b3b4bd;
+  --basecolors-shape-ferry-contrast:#8ccfe2;
+  --basecolors-shape-ferry-default:#8ccfe2;
+  --basecolors-shape-funicular-contrast:#b898e5;
+  --basecolors-shape-funicular-default:#b898e5;
+  --basecolors-shape-helicopter-contrast:#f2b8e5;
+  --basecolors-shape-helicopter-default:#f2b8e5;
+  --basecolors-shape-highlight:#ff5959;
+  --basecolors-shape-light:#e5e5e9;
+  --basecolors-shape-mask:#2d2e3e;
+  --basecolors-shape-maskalt:#393a49;
+  --basecolors-shape-metro-contrast:#dd973c;
+  --basecolors-shape-metro-default:#dd973c;
+  --basecolors-shape-mobility-contrast:#4db2a1;
+  --basecolors-shape-mobility-default:#4db2a1;
+  --basecolors-shape-plane-contrast:#f2b8e5;
+  --basecolors-shape-plane-default:#f2b8e5;
+  --basecolors-shape-subdued:#b3b4bd;
+  --basecolors-shape-subduedalt:#b3b4bd;
+  --basecolors-shape-taxi-contrast:#ffe082;
+  --basecolors-shape-taxi-default:#ffe082;
+  --basecolors-shape-train-contrast:#60a2d7;
+  --basecolors-shape-train-default:#60a2d7;
+  --basecolors-shape-tram-contrast:#b898e5;
+  --basecolors-shape-tram-default:#b898e5;
+  --basecolors-shape-walk-contrast:#8d8e9c;
+  --basecolors-shape-walk-default:#8d8e9c;
+  --basecolors-shape-airportlinkbus-contrast:#f2b8e5;
+  --basecolors-shape-airportlinkbus-default:#f2b8e5;
+  --basecolors-shape-airportlinkrail-contrast:#f2b8e5;
+  --basecolors-shape-airportlinkrail-default:#f2b8e5;
+  --basecolors-stroke-contrast:#aeb7e2;
+  --basecolors-stroke-default:#b3b4bd;
+  --basecolors-stroke-disabled:#e3e6e8;
+  --basecolors-stroke-focus-contrast:#aeb7e2;
+  --basecolors-stroke-focus-standard:#aeb7e2;
+  --basecolors-stroke-highlight:#ff5959;
+  --basecolors-stroke-highlight2:#ffbf9e;
+  --basecolors-stroke-light:#b3b4bd;
+  --basecolors-stroke-subdued:#81828f;
+  --basecolors-stroke-subduedalt:#949699;
+  --basecolors-text-accent:#e5e5e9;
+  --basecolors-text-disabled:#b6b8ba;
+  --basecolors-text-disabledalt:#b6b8ba;
+  --basecolors-text-highlight:#ff5959;
+  --basecolors-text-highlightalt:#ffbf9e;
+  --basecolors-text-light:#e5e5e9;
+  --basecolors-text-subdued:#b3b4bd;
+  --basecolors-text-subduedalt:#b3b4bd;
 }
 
-.eds-tab {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: #f3f3f3;
-  border: 0.125rem solid #f3f3f3;
-  border-radius: 0.25rem 0.25rem 0 0;
-  color: #181c56;
-  cursor: pointer;
-  font-family: inherit;
-  font-size: inherit;
-  height: 3rem;
-  line-height: inherit;
-  margin: 0;
-  min-width: 8rem;
-  padding: 0.5rem 1rem;
-  position: relative;
-}
-.eds-tab-list--width-fluid .eds-tab {
-  flex-grow: 1;
-  min-width: 0;
-}
-.eds-contrast .eds-tab {
-  background-color: #54568c;
-  border-color: #54568c;
-  color: #ffffff;
-}
-.eds-tab:hover {
-  background-color: #d1d3d3;
-  border-color: #d1d3d3;
-}
-.eds-contrast .eds-tab:hover {
-  background-color: #aeb7e2;
-  border-color: #aeb7e2;
-  color: #181c56;
-}
-.eds-tab + .eds-tab {
-  margin-left: 0.25rem;
-}
-.eds-tab::after {
-  content: "";
-  position: absolute;
-  bottom: -0.125rem;
-  left: -0.125rem;
-  right: -0.125rem;
-  background-color: #d1d3d3;
-  display: block;
-  height: 0.125rem;
-}
-.eds-contrast .eds-tab::after {
-  background-color: #aeb7e2;
-}
-.eds-tab[aria-selected=true] {
-  background-color: #ffffff;
-  border-color: #d1d3d3;
-  color: #181c56;
-  font-weight: 600;
-}
-.eds-contrast .eds-tab[aria-selected=true] {
-  background-color: #181c56;
-  color: #ffffff;
-  border-color: #aeb7e2;
-}
-.eds-tab[aria-selected=true]::after {
-  background-color: #ffffff;
-  left: 0;
-  right: 0;
-}
-.eds-contrast .eds-tab[aria-selected=true]::after {
-  background-color: #181c56;
-}
-.eds-tab[aria-selected=true]::before {
-  content: "";
-  display: block;
-  margin: 0 auto;
-  width: 2rem;
-  height: 3px;
-  background: #ff5959;
-  position: absolute;
-  bottom: 0.25rem;
-  left: 0;
-  right: 0;
-}
-.eds-tab--remove-active-line[aria-selected=true]::before {
-  background: transparent;
-}
-.eds-tab[disabled] {
-  background: #f8f8f8;
-  border-color: #f8f8f8;
-  color: #d1d3d3;
-  pointer-events: none;
-}
-.eds-contrast .eds-tab[disabled] {
-  background: #292b6a;
-  border-color: #292b6a;
-  color: #babbcf;
-}
-.eds-tab:focus {
-  outline: none;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
-}
-.eds-contrast .eds-tab:focus {
-  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+:root{
+  --eds-tab:1;
 }
 
-.eds-tab-panels {
-  padding: 1rem;
+.eds-tab-list{
+  position:relative;
+  top:0.125rem;
+  overflow-x:scroll;
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:-moz-box;
+  display:flex;
+  scrollbar-width:none;
+  padding-top:0.25rem;
+  margin-top:-0.25rem;
+  z-index:0;
+}
+.eds-tab-list::after{
+  content:"";
+  position:absolute;
+  bottom:0;
+  left:0;
+  right:0;
+  background-color:#e3e6e8;
+  background-color:var(--components-tab-standard-border);
+  display:block;
+  height:0.125rem;
+  width:inherit;
+  z-index:-1;
+}
+.eds-contrast .eds-tab-list::after{
+  background-color:#aeb7e2;
+  background-color:var(--components-tab-contrast-border);
+}
+.eds-tab-list::-webkit-scrollbar{
+  display:none;
+}
+
+.eds-tab{
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  background:#edf0f2;
+  background:var(--components-tab-standard-fill-unselected);
+  border:0.125rem solid transparent;
+  -webkit-border-radius:0.25rem 0.25rem 0 0;
+     -moz-border-radius:0.25rem 0.25rem 0 0;
+          border-radius:0.25rem 0.25rem 0 0;
+  color:#181c56;
+  color:var(--components-tab-standard-text);
+  cursor:pointer;
+  display:-webkit-inline-box;
+  display:-webkit-inline-flex;
+  display:-moz-inline-box;
+  display:inline-flex;
+  -webkit-box-align:center;
+  -webkit-align-items:center;
+     -moz-box-align:center;
+          align-items:center;
+  -webkit-box-pack:center;
+  -webkit-justify-content:center;
+     -moz-box-pack:center;
+          justify-content:center;
+  font-family:inherit;
+  font-size:inherit;
+  height:3rem;
+  line-height:inherit;
+  margin:0;
+  min-width:8rem;
+  padding:0.5rem 1rem;
+  position:relative;
+}
+.eds-tab-list--width-fluid .eds-tab{
+  -webkit-box-flex:1;
+  -webkit-flex-grow:1;
+     -moz-box-flex:1;
+          flex-grow:1;
+  min-width:0;
+}
+.eds-contrast .eds-tab{
+  background-color:#393d79;
+  background-color:var(--components-tab-contrast-fill-unselected);
+  color:#ffffff;
+  color:var(--components-tab-contrast-text);
+}
+.eds-tab:hover{
+  background-color:#e3e6e8;
+  background-color:var(--components-tab-standard-fill-hover);
+  color:var(--components-menu-tableofcontent-standard-text-selected);
+}
+.eds-contrast .eds-tab:hover{
+  background-color:#626493;
+  background-color:var(--components-tab-contrast-fill-hover);
+  color:#ffffff;
+  color:var(--components-tab-contrast-text);
+}
+.eds-tab + .eds-tab{
+  margin-left:0.25rem;
+}
+.eds-tab::after{
+  content:"";
+  position:absolute;
+  bottom:-0.125rem;
+  left:-0.125rem;
+  right:-0.125rem;
+  background-color:#e3e6e8;
+  background-color:var(--components-tab-standard-border);
+  display:block;
+  height:0.125rem;
+}
+.eds-contrast .eds-tab::after{
+  background-color:#aeb7e2;
+  background-color:var(--components-tab-contrast-border);
+}
+.eds-tab[aria-selected=true]{
+  background-color:#ffffff;
+  background-color:var(--components-tab-standard-fill-selected);
+  border-color:#e3e6e8;
+  border-color:var(--components-tab-standard-border);
+  color:#181c56;
+  color:var(--components-tab-standard-text);
+  font-weight:600;
+}
+.eds-contrast .eds-tab[aria-selected=true]{
+  background-color:#181c56;
+  background-color:var(--components-tab-contrast-fill-selected);
+  color:#ffffff;
+  color:var(--components-tab-contrast-text);
+  border-color:#aeb7e2;
+  border-color:var(--components-tab-contrast-border);
+}
+.eds-tab[aria-selected=true]::after{
+  background-color:#ffffff;
+  background-color:var(--components-tab-standard-fill-selected);
+  left:0;
+  right:0;
+}
+.eds-contrast .eds-tab[aria-selected=true]::after{
+  background-color:#181c56;
+  background-color:var(--components-tab-contrast-fill-selected);
+}
+.eds-tab[aria-selected=true]::before{
+  content:"";
+  display:block;
+  margin:0 auto;
+  width:2rem;
+  height:3px;
+  background:#ff5959;
+  background:var(--components-tab-standard-underline-selected);
+  position:absolute;
+  bottom:0.25rem;
+  left:0;
+  right:0;
+}
+.eds-tab--remove-active-line[aria-selected=true]::before{
+  background:transparent;
+}
+.eds-tab[disabled], .eds-tab[aria-disabled=true]{
+  background:#cfd2d4;
+  background:var(--components-tab-standard-fill-disabled);
+  border-color:none;
+  color:#515254;
+  color:var(--components-tab-standard-text-disabled);
+  cursor:not-allowed;
+}
+.eds-contrast .eds-tab[disabled], .eds-contrast .eds-tab[aria-disabled=true]{
+  background:rgba(84, 86, 140, 0.4);
+  background:var(--components-tab-contrast-fill-disabled);
+  border-color:none;
+  color:#b6b8ba;
+  color:var(--components-tab-contrast-text-disabled);
+}
+.eds-tab:focus-visible{
+  outline:2px solid #181c56;
+  outline-color:#181c56;
+  outline-color:var(--basecolors-stroke-focus-standard);
+  outline-offset:0.125rem;
+}
+.eds-contrast .eds-tab:focus-visible{
+  outline-color:#aeb7e2;
+  outline-color:var(--basecolors-stroke-focus-contrast);
 }
 
-.eds-tab-panel:focus {
-  outline: none;
-  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
-  outline-offset: 0.125rem;
+.eds-tab-panels{
+  padding:1rem;
 }
-.eds-contrast .eds-tab-panel:focus {
-  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
+
+.eds-tab-panel:focus-visible{
+  outline:2px solid #181c56;
+  outline-color:#181c56;
+  outline-color:var(--basecolors-stroke-focus-standard);
+  outline-offset:0.125rem;
 }
+.eds-contrast .eds-tab-panel:focus-visible{
+  outline-color:#aeb7e2;
+  outline-color:var(--basecolors-stroke-focus-contrast);
+}