@sikt/sds-tabs 3.1.0 → 3.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/index.css +6 -3
- package/dist/index.css.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [3.2.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-tabs@3.2.0...@sikt/sds-tabs@3.2.1) (2025-06-25)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **tabs:** change gap between icon & text ([18b1ff5](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/18b1ff5384db89f0685f376c104977251dbc189e))
|
|
10
|
+
- **tabs:** wrap on too little space ([08f7da4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/08f7da44b07aa23982dd1d76a24448cccd456781))
|
|
11
|
+
|
|
12
|
+
## [3.2.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-tabs@3.1.0...@sikt/sds-tabs@3.2.0) (2025-06-02)
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
- **tabs:** change hover color to neutral ([1c81bdb](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/1c81bdb438230613dcf1da0bcfd6966adde22864))
|
|
17
|
+
|
|
5
18
|
## [3.1.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-tabs@3.0.4...@sikt/sds-tabs@3.1.0) (2025-05-20)
|
|
6
19
|
|
|
7
20
|
### Features
|
package/dist/index.css
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
/* src/tabs.pcss */
|
|
2
2
|
.sds-tabs {
|
|
3
3
|
--tab-list-border-bottom: var(--sds-space-border-weight-regular);
|
|
4
|
+
--tab-hover-background-color: var( --sds-color-interaction-neutral-transparent-highlight );
|
|
5
|
+
--tab-active-background-color: var( --sds-color-interaction-neutral-transparent-pressed );
|
|
4
6
|
}
|
|
5
7
|
.sds-tabs__tab-list {
|
|
6
8
|
border-bottom: var(--tab-list-border-bottom) solid var(--sds-color-layout-divider-subtle);
|
|
7
9
|
display: flex;
|
|
10
|
+
flex-wrap: wrap;
|
|
8
11
|
margin-bottom: var(--sds-space-gap-small);
|
|
9
12
|
}
|
|
10
13
|
.sds-tabs__tab {
|
|
@@ -13,7 +16,7 @@
|
|
|
13
16
|
border-bottom: var(--sds-space-border-weight-bold) solid transparent;
|
|
14
17
|
color: var(--sds-color-text-primary);
|
|
15
18
|
display: flex;
|
|
16
|
-
gap: var(--sds-space-gap-
|
|
19
|
+
gap: var(--sds-space-gap-tiny);
|
|
17
20
|
font-size: var(--sds-typography-label-l-fontsize);
|
|
18
21
|
font-weight: var(--sds-typography-label-l-fontweight);
|
|
19
22
|
line-height: var(--sds-typography-label-l-lineheight);
|
|
@@ -34,10 +37,10 @@
|
|
|
34
37
|
}
|
|
35
38
|
.sds-tabs__tab:hover,
|
|
36
39
|
.sds-tabs__tab:focus-visible {
|
|
37
|
-
background-color: var(
|
|
40
|
+
background-color: var(--tab-hover-background-color);
|
|
38
41
|
}
|
|
39
42
|
.sds-tabs__tab:active {
|
|
40
|
-
background-color: var(
|
|
43
|
+
background-color: var(--tab-active-background-color);
|
|
41
44
|
border-color: var(--sds-color-interaction-primary-strong-pressed);
|
|
42
45
|
}
|
|
43
46
|
.sds-tabs__tab:focus-visible {
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/tabs.pcss","../src/tab-link.pcss"],"sourcesContent":[".sds-tabs {\n --tab-list-border-bottom: var(--sds-space-border-weight-regular);\n}\n\n .sds-tabs__tab-list {\n border-bottom: var(--tab-list-border-bottom) solid\n var(--sds-color-layout-divider-subtle);\n display: flex;\n margin-bottom: var(--sds-space-gap-small);\n }\n\n .sds-tabs__tab {\n align-items: center;\n border: 0 none;\n border-bottom: var(--sds-space-border-weight-bold) solid transparent;\n color: var(--sds-color-text-primary);\n display: flex;\n gap: var(--sds-space-gap-
|
|
1
|
+
{"version":3,"sources":["../src/tabs.pcss","../src/tab-link.pcss"],"sourcesContent":[".sds-tabs {\n --tab-list-border-bottom: var(--sds-space-border-weight-regular);\n --tab-hover-background-color: var(\n --sds-color-interaction-neutral-transparent-highlight\n );\n --tab-active-background-color: var(\n --sds-color-interaction-neutral-transparent-pressed\n );\n}\n\n .sds-tabs__tab-list {\n border-bottom: var(--tab-list-border-bottom) solid\n var(--sds-color-layout-divider-subtle);\n display: flex;\n flex-wrap: wrap;\n margin-bottom: var(--sds-space-gap-small);\n }\n\n .sds-tabs__tab {\n align-items: center;\n border: 0 none;\n border-bottom: var(--sds-space-border-weight-bold) solid transparent;\n color: var(--sds-color-text-primary);\n display: flex;\n gap: var(--sds-space-gap-tiny);\n font-size: var(--sds-typography-label-l-fontsize);\n font-weight: var(--sds-typography-label-l-fontweight);\n line-height: var(--sds-typography-label-l-lineheight);\n padding: var(--sds-space-padding-medium) var(--sds-space-padding-small);\n margin-bottom: calc(var(--tab-list-border-bottom) * -1);\n }\n\n .sds-tabs__tab-icon {\n align-items: center;\n display: flex;\n font-size: var(--sds-typography-fontsize-700);\n justify-content: center;\n }\n\n .sds-tabs__tab-badge {\n margin: -1px 0;\n }\n\n .sds-tabs__tab[aria-selected=\"true\"] {\n border-color: var(--sds-color-interaction-primary-strong-default);\n }\n\n .sds-tabs__tab:hover,\n .sds-tabs__tab:focus-visible {\n background-color: var(--tab-hover-background-color);\n }\n\n .sds-tabs__tab:active {\n background-color: var(--tab-active-background-color);\n border-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n\n .sds-tabs__tab:focus-visible {\n outline: var(--sds-focus-outline);\n }\n\n .sds-tabs__tab-panel:focus-visible {\n outline: var(--sds-focus-outline);\n }\n",".sds-tab-link {\n display: inline-flex;\n text-decoration: none;\n}\n\n .sds-tab-link--selected {\n border-color: var(--sds-color-interaction-primary-strong-default);\n }\n\n .sds-tab-link:focus-visible {\n outline-offset: 0;\n }\n"],"mappings":";AAAA,CAAC;AACC,4BAA0B,IAAI;AAC9B,gCAA8B,KAC5B;AAEF,iCAA+B,KAC7B;AAEJ;AAEE,CAAC;AACC,iBAAe,IAAI,0BAA0B,MAC3C,IAAI;AACN,WAAS;AACT,aAAW;AACX,iBAAe,IAAI;AACrB;AAEA,CAAC;AACC,eAAa;AACb,UAAQ,EAAE;AACV,iBAAe,IAAI,gCAAgC,MAAM;AACzD,SAAO,IAAI;AACX,WAAS;AACT,OAAK,IAAI;AACT,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,WAAS,IAAI,4BAA4B,IAAI;AAC7C,iBAAe,KAAK,IAAI,0BAA0B,EAAE;AACtD;AAEA,CAAC;AACG,eAAa;AACb,WAAS;AACT,aAAW,IAAI;AACf,mBAAiB;AACnB;AAEF,CAAC;AACG,UAAQ,KAAK;AACf;AAEF,CAzBC,aAyBa,CAAC;AACX,gBAAc,IAAI;AACpB;AAEF,CA7BC,aA6Ba;AACZ,CA9BD,aA8Be;AACZ,oBAAkB,IAAI;AACxB;AAEF,CAlCC,aAkCa;AACV,oBAAkB,IAAI;AACtB,gBAAc,IAAI;AACpB;AAEF,CAvCC,aAuCa;AACV,WAAS,IAAI;AACf;AAEF,CAAC,mBAAmB;AAChB,WAAS,IAAI;AACf;;;AC/DJ,CAAC;AACC,WAAS;AACT,mBAAiB;AACnB;AAEE,CAAC;AACC,gBAAc,IAAI;AACpB;AAEA,CATD,YASc;AACX,kBAAgB;AAClB;","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("clsx/lite"),s=require("react"),n=require("react/jsx-runtime"),a=Object.defineProperty,t=Object.defineProperties,l=Object.getOwnPropertyDescriptors,r=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,d=(e,s,n)=>s in e?a(e,s,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[s]=n,o=(e,s)=>{for(var n in s||(s={}))c.call(s,n)&&d(e,n,s[n]);if(r)for(var n of r(s))i.call(s,n)&&d(e,n,s[n]);return e},b=(e,s)=>t(e,l(s)),u=(e,s)=>{var n={};for(var a in e)c.call(e,a)&&s.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&r)for(var a of r(e))s.indexOf(a)<0&&i.call(e,a)&&(n[a]=e[a]);return n},x=s.createContext(null),m=s.forwardRef((
|
|
1
|
+
"use strict";var e=require("clsx/lite"),s=require("react"),n=require("react/jsx-runtime"),a=Object.defineProperty,t=Object.defineProperties,l=Object.getOwnPropertyDescriptors,r=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,d=(e,s,n)=>s in e?a(e,s,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[s]=n,o=(e,s)=>{for(var n in s||(s={}))c.call(s,n)&&d(e,n,s[n]);if(r)for(var n of r(s))i.call(s,n)&&d(e,n,s[n]);return e},b=(e,s)=>t(e,l(s)),u=(e,s)=>{var n={};for(var a in e)c.call(e,a)&&s.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&r)for(var a of r(e))s.indexOf(a)<0&&i.call(e,a)&&(n[a]=e[a]);return n},x=s.createContext(null),m=s.forwardRef((a,t)=>{var l=a,{children:r,className:c,icon:i,badge:d,href:x,isSelected:m}=l,h=u(l,["children","className","icon","badge","href","isSelected"]);return n.jsxs("a",b(o({className:e.clsx("sds-tabs__tab","sds-tab-link",m&&"sds-tab-link--selected",c),href:x,ref:t},h),{children:[i&&n.jsx("div",{className:"sds-tabs__tab-icon",children:i}),r,d&&n.jsx("div",{className:"sds-tabs__tab-badge",children:m?s.isValidElement(d)&&s.cloneElement(d,{visibility:"strong"}):d})]}))});m.displayName="TabLink",exports.Tab=a=>{var t=a,{children:l,className:r,icon:c,badge:i}=t,d=u(t,["children","className","icon","badge"]);const{index:m}=d,h=s.useContext(x);if(!h)return console.warn("TabContext missing. Component needs to be used inside <Tabs>"),null;const{id:f,count:p,isSelectOnFocus:v,selectedIndex:g,setSelectedIndex:y,setPreviousIndex:N}=h,j=m===g,C=e=>{v&&(N(g),y(e))};return n.jsxs("button",b(o({className:e.clsx("sds-tabs__tab",r),role:"tab","aria-selected":j,"aria-controls":"panel-".concat(f,"-").concat(m),id:"tab-".concat(f,"-").concat(m),tabIndex:j?0:-1,onClick:()=>{N(g),y(m)},onKeyDown:e=>{var s,n;const a=p-1,t=e.currentTarget,l=null==(s=t.parentElement)?void 0:s.firstChild,r=null==(n=t.parentElement)?void 0:n.lastChild;if("ArrowLeft"===e.key){const e=t.previousSibling;m>0?e.focus():r.focus(),C(g>0?g-1:a)}else if("ArrowRight"===e.key){const e=t.nextSibling;m<a?e.focus():l.focus(),C(g<a?g+1:0)}else"Home"===e.key?(l.focus(),C(0)):"End"===e.key?(r.focus(),C(a)):"Enter"!==e.key&&"Space"!==e.code||y(m)}},d),{children:[c&&n.jsx("span",{className:"sds-tabs__tab-icon",children:c}),l,i&&n.jsx("span",{className:"sds-tabs__tab-badge",children:s.isValidElement(i)&&s.cloneElement(i,{visibility:"strong"})})]}))},exports.TabLink=m,exports.TabList=a=>{var t=a,{children:l,"aria-label":r,className:c}=t,i=u(t,["children","aria-label","className"]);const d=s.Children.toArray(l);return n.jsx("div",b(o({className:e.clsx("sds-tabs__tab-list",c),role:"tablist","aria-label":r},i),{children:s.Children.map(d,(e,a)=>{if(s.isValidElement(e))return n.jsx(n.Fragment,{children:s.cloneElement(e,{index:a})})})}))},exports.TabPanel=a=>{var t=a,{children:l,className:r}=t,c=u(t,["children","className"]);const{index:i}=c,d=s.useContext(x);if(!d)return console.warn("TabContext missing. Component needs to be used inside <Tabs>"),null;const{id:m,selectedIndex:h}=d,f=i===h;return n.jsx("div",b(o({className:e.clsx("sds-tabs__tab-panel",r),id:"panel-".concat(m,"-").concat(i),role:"tabpanel",tabIndex:f?void 0:-1,"aria-labelledby":"tab-".concat(m,"-").concat(i),hidden:!f},c),{children:l}))},exports.Tabs=a=>{var t=a,{defaultIndex:l=0,onChange:r,isSelectOnFocus:c=!1,children:i,className:d}=t,m=u(t,["defaultIndex","onChange","isSelectOnFocus","children","className"]);const[h,f]=s.useState(l),[p,v]=s.useState(l),g=s.useId();s.useEffect(()=>{r&&p!==h&&r(h)},[r,p,h]);const y=s.Children.toArray(i),N=y.length-1;return n.jsx(x.Provider,{value:{id:g,count:N,isSelectOnFocus:c,selectedIndex:h,setSelectedIndex:f,setPreviousIndex:v},children:n.jsx("div",b(o({className:e.clsx("sds-tabs",d)},m),{children:s.Children.map(y,(e,a)=>s.isValidElement(e)&&a>0?n.jsx(n.Fragment,{children:s.cloneElement(e,{index:a-1})}):e)}))})};//# sourceMappingURL=index.js.map
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{clsx as e}from"clsx/lite";import{createContext as a,forwardRef as n,isValidElement as s,cloneElement as t,useState as r,useId as l,useEffect as c,Children as i,useContext as o}from"react";import{jsxs as d,jsx as b,Fragment as u}from"react/jsx-runtime";var m=Object.defineProperty,f=Object.defineProperties,h=Object.getOwnPropertyDescriptors,p=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,g=(e,a,n)=>a in e?m(e,a,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[a]=n,y=(e,a)=>{for(var n in a||(a={}))v.call(a,n)&&g(e,n,a[n]);if(p)for(var n of p(a))x.call(a,n)&&g(e,n,a[n]);return e},N=(e,a)=>f(e,h(a)),_=(e,a)=>{var n={};for(var s in e)v.call(e,s)&&a.indexOf(s)<0&&(n[s]=e[s]);if(null!=e&&p)for(var s of p(e))a.indexOf(s)<0&&x.call(e,s)&&(n[s]=e[s]);return n},O=a(null),I=a=>{var n=a,{defaultIndex:o=0,onChange:d,isSelectOnFocus:m=!1,children:f,className:h}=n,p=_(n,["defaultIndex","onChange","isSelectOnFocus","children","className"]);const[v,x]=r(o),[g,I]=r(o),S=l();c((
|
|
1
|
+
import{clsx as e}from"clsx/lite";import{createContext as a,forwardRef as n,isValidElement as s,cloneElement as t,useState as r,useId as l,useEffect as c,Children as i,useContext as o}from"react";import{jsxs as d,jsx as b,Fragment as u}from"react/jsx-runtime";var m=Object.defineProperty,f=Object.defineProperties,h=Object.getOwnPropertyDescriptors,p=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,g=(e,a,n)=>a in e?m(e,a,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[a]=n,y=(e,a)=>{for(var n in a||(a={}))v.call(a,n)&&g(e,n,a[n]);if(p)for(var n of p(a))x.call(a,n)&&g(e,n,a[n]);return e},N=(e,a)=>f(e,h(a)),_=(e,a)=>{var n={};for(var s in e)v.call(e,s)&&a.indexOf(s)<0&&(n[s]=e[s]);if(null!=e&&p)for(var s of p(e))a.indexOf(s)<0&&x.call(e,s)&&(n[s]=e[s]);return n},O=a(null),I=a=>{var n=a,{defaultIndex:o=0,onChange:d,isSelectOnFocus:m=!1,children:f,className:h}=n,p=_(n,["defaultIndex","onChange","isSelectOnFocus","children","className"]);const[v,x]=r(o),[g,I]=r(o),S=l();c(()=>{d&&g!==v&&d(v)},[d,g,v]);const k=i.toArray(f),w=k.length-1;return b(O.Provider,{value:{id:S,count:w,isSelectOnFocus:m,selectedIndex:v,setSelectedIndex:x,setPreviousIndex:I},children:b("div",N(y({className:e("sds-tabs",h)},p),{children:i.map(k,(e,a)=>s(e)&&a>0?b(u,{children:t(e,{index:a-1})}):e)}))})},S=a=>{var n=a,{children:r,"aria-label":l,className:c}=n,o=_(n,["children","aria-label","className"]);const d=i.toArray(r);return b("div",N(y({className:e("sds-tabs__tab-list",c),role:"tablist","aria-label":l},o),{children:i.map(d,(e,a)=>{if(s(e))return b(u,{children:t(e,{index:a})})})}))},k=a=>{var n=a,{children:r,className:l,icon:c,badge:i}=n,u=_(n,["children","className","icon","badge"]);const{index:m}=u,f=o(O);if(!f)return console.warn("TabContext missing. Component needs to be used inside <Tabs>"),null;const{id:h,count:p,isSelectOnFocus:v,selectedIndex:x,setSelectedIndex:g,setPreviousIndex:I}=f,S=m===x,k=e=>{v&&(I(x),g(e))};return d("button",N(y({className:e("sds-tabs__tab",l),role:"tab","aria-selected":S,"aria-controls":"panel-".concat(h,"-").concat(m),id:"tab-".concat(h,"-").concat(m),tabIndex:S?0:-1,onClick:()=>{I(x),g(m)},onKeyDown:e=>{var a,n;const s=p-1,t=e.currentTarget,r=null==(a=t.parentElement)?void 0:a.firstChild,l=null==(n=t.parentElement)?void 0:n.lastChild;if("ArrowLeft"===e.key){const e=t.previousSibling;m>0?e.focus():l.focus(),k(x>0?x-1:s)}else if("ArrowRight"===e.key){const e=t.nextSibling;m<s?e.focus():r.focus(),k(x<s?x+1:0)}else"Home"===e.key?(r.focus(),k(0)):"End"===e.key?(l.focus(),k(s)):"Enter"!==e.key&&"Space"!==e.code||g(m)}},u),{children:[c&&b("span",{className:"sds-tabs__tab-icon",children:c}),r,i&&b("span",{className:"sds-tabs__tab-badge",children:s(i)&&t(i,{visibility:"strong"})})]}))},w=a=>{var n=a,{children:s,className:t}=n,r=_(n,["children","className"]);const{index:l}=r,c=o(O);if(!c)return console.warn("TabContext missing. Component needs to be used inside <Tabs>"),null;const{id:i,selectedIndex:d}=c,u=l===d;return b("div",N(y({className:e("sds-tabs__tab-panel",t),id:"panel-".concat(i,"-").concat(l),role:"tabpanel",tabIndex:u?void 0:-1,"aria-labelledby":"tab-".concat(i,"-").concat(l),hidden:!u},r),{children:s}))},C=n((a,n)=>{var r=a,{children:l,className:c,icon:i,badge:o,href:u,isSelected:m}=r,f=_(r,["children","className","icon","badge","href","isSelected"]);return d("a",N(y({className:e("sds-tabs__tab","sds-tab-link",m&&"sds-tab-link--selected",c),href:u,ref:n},f),{children:[i&&b("div",{className:"sds-tabs__tab-icon",children:i}),l,o&&b("div",{className:"sds-tabs__tab-badge",children:m?s(o)&&t(o,{visibility:"strong"}):o})]}))});C.displayName="TabLink";export{k as Tab,C as TabLink,S as TabList,w as TabPanel,I as Tabs};//# sourceMappingURL=index.mjs.map
|