jvetrau-ds 0.2.49 → 0.2.50

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.
Files changed (6) hide show
  1. package/base.css +2 -2
  2. package/components/card-group/card-group.cjs.map +1 -1
  3. package/components/card-group/card-group.js.map +1 -1
  4. package/components/tabs/tabs.css +42 -2
  5. package/package.json +1 -1
  6. package/styles.css +42 -2
package/base.css CHANGED
@@ -15,6 +15,8 @@ html {
15
15
 
16
16
  body {
17
17
  margin: 0;
18
+
19
+ font-variation-settings: 'slnt' 0;
18
20
  }
19
21
 
20
22
  /* src/base/color.css */
@@ -69,8 +71,6 @@ body {
69
71
  line-height: var(--body-line-height);
70
72
  letter-spacing: var(--body-letter-spacing);
71
73
 
72
- font-variation-settings: 'slnt' 0;
73
-
74
74
  /* size */
75
75
 
76
76
  /* border */
package/components/card-group/card-group.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/card-group/card-group.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AASA,MAAM,YAAsC,CAAC;AAAA,EAC3C,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,YAAA,EAAc,SAAA,EAAW;AAAA,IAClD,oBAAoB,OAAA,KAAY,MAAA;AAAA,IAChC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY;AAAA,GACtC,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,kBAAA,GAAQ","file":"card-group.cjs","sourcesContent":["import React from 'react';\nimport './card-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface CardGroupProps\n extends React.HTMLAttributes<HTMLDivElement> {\n columns?: 1 | 2 | 3 | 4;\n}\n\nconst CardGroup: React.FC<CardGroupProps> = ({\n columns,\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames('card-group', className, {\n 'card-group--auto': columns === undefined,\n 'card-group--columns-1': columns === 1,\n 'card-group--columns-2': columns === 2,\n 'card-group--columns-3': columns === 3,\n 'card-group--columns-4': columns === 4,\n });\n\n return (\n <div\n className={classes}\n {...props}\n >\n {children}\n </div>\n );\n};\n\nexport default CardGroup;"]}
1
+ {"version":3,"sources":["../../../src/components/card-group/card-group.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AASA,MAAM,YAAsC,CAAC;AAAA,EAC3C,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,YAAA,EAAc,SAAA,EAAW;AAAA,IAClD,oBAAoB,OAAA,KAAY,MAAA;AAAA,IAChC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY;AAAA,GACtC,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,kBAAA,GAAQ","file":"card-group.cjs","sourcesContent":["import React from 'react';\nimport './card-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface CardGroupProps\n extends React.HTMLAttributes<HTMLDivElement> {\n columns?: 1 | 2 | 3 | 4;\n}\n\nconst CardGroup: React.FC<CardGroupProps> = ({\n columns,\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames('card-group', className, {\n 'card-group--auto': columns === undefined,\n 'card-group--columns-1': columns === 1,\n 'card-group--columns-2': columns === 2,\n 'card-group--columns-3': columns === 3,\n 'card-group--columns-4': columns === 4,\n });\n\n return (\n <div\n className={classes}\n {...props}\n >\n {children}\n </div>\n );\n};\n\nexport default CardGroup;\n"]}
package/components/card-group/card-group.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/card-group/card-group.tsx"],"names":[],"mappings":";;;;AASA,MAAM,YAAsC,CAAC;AAAA,EAC3C,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,YAAA,EAAc,SAAA,EAAW;AAAA,IAClD,oBAAoB,OAAA,KAAY,MAAA;AAAA,IAChC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY;AAAA,GACtC,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,kBAAA,GAAQ","file":"card-group.js","sourcesContent":["import React from 'react';\nimport './card-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface CardGroupProps\n extends React.HTMLAttributes<HTMLDivElement> {\n columns?: 1 | 2 | 3 | 4;\n}\n\nconst CardGroup: React.FC<CardGroupProps> = ({\n columns,\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames('card-group', className, {\n 'card-group--auto': columns === undefined,\n 'card-group--columns-1': columns === 1,\n 'card-group--columns-2': columns === 2,\n 'card-group--columns-3': columns === 3,\n 'card-group--columns-4': columns === 4,\n });\n\n return (\n <div\n className={classes}\n {...props}\n >\n {children}\n </div>\n );\n};\n\nexport default CardGroup;"]}
1
+ {"version":3,"sources":["../../../src/components/card-group/card-group.tsx"],"names":[],"mappings":";;;;AASA,MAAM,YAAsC,CAAC;AAAA,EAC3C,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,YAAA,EAAc,SAAA,EAAW;AAAA,IAClD,oBAAoB,OAAA,KAAY,MAAA;AAAA,IAChC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY,CAAA;AAAA,IACrC,yBAAyB,OAAA,KAAY;AAAA,GACtC,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,kBAAA,GAAQ","file":"card-group.js","sourcesContent":["import React from 'react';\nimport './card-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface CardGroupProps\n extends React.HTMLAttributes<HTMLDivElement> {\n columns?: 1 | 2 | 3 | 4;\n}\n\nconst CardGroup: React.FC<CardGroupProps> = ({\n columns,\n className = '',\n children,\n ...props\n}) => {\n const classes = classnames('card-group', className, {\n 'card-group--auto': columns === undefined,\n 'card-group--columns-1': columns === 1,\n 'card-group--columns-2': columns === 2,\n 'card-group--columns-3': columns === 3,\n 'card-group--columns-4': columns === 4,\n });\n\n return (\n <div\n className={classes}\n {...props}\n >\n {children}\n </div>\n );\n};\n\nexport default CardGroup;\n"]}
package/components/tabs/tabs.css CHANGED
@@ -23,6 +23,8 @@
23
23
  display: flex;
24
24
  flex-direction: column;
25
25
  gap: var(--tabs-gap);
26
+ min-width: 0;
27
+ max-width: 100%;
26
28
 
27
29
  /* border */
28
30
 
@@ -39,10 +41,29 @@
39
41
  /* size */
40
42
  --tabs-list-gap: var(--margin-tab);
41
43
 
42
- display: inline-flex;
44
+ display: flex;
43
45
  align-items: center;
44
46
  gap: var(--tabs-list-gap);
45
- width: fit-content;
47
+ width: 100%;
48
+ min-width: 0;
49
+ overflow-x: auto;
50
+ overflow-y: hidden;
51
+ scrollbar-width: none;
52
+
53
+ /* border */
54
+
55
+ /* depth */
56
+
57
+ /* motion */
58
+ }
59
+
60
+ .tabs__list::-webkit-scrollbar {
61
+ /* color */
62
+
63
+ /* typography */
64
+
65
+ /* size */
66
+ display: none;
46
67
 
47
68
  /* border */
48
69
 
@@ -72,6 +93,7 @@
72
93
  --tabs-tab-padding-x: var(--padding-tab);
73
94
 
74
95
  display: inline-flex;
96
+ flex-shrink: 0;
75
97
  align-items: center;
76
98
  justify-content: center;
77
99
  min-height: var(--tabs-tab-height);
@@ -104,8 +126,18 @@
104
126
  .tabs__tab:active,
105
127
  .tabs__tab:focus,
106
128
  .tabs__tab:hover {
129
+ /* color */
130
+
107
131
  /* typography */
108
132
  text-decoration: none;
133
+
134
+ /* size */
135
+
136
+ /* border */
137
+
138
+ /* depth */
139
+
140
+ /* motion */
109
141
  }
110
142
 
111
143
  .tabs__tab--selected {
@@ -113,8 +145,16 @@
113
145
  --tabs-tab-bg: var(--tabs-tab-bg-selected);
114
146
  --tabs-tab-color: var(--tabs-tab-color-selected);
115
147
 
148
+ /* typography */
149
+
150
+ /* size */
151
+
116
152
  /* border */
117
153
  --tabs-tab-border-color: var(--color-line);
154
+
155
+ /* depth */
156
+
157
+ /* motion */
118
158
  }
119
159
 
120
160
  .tabs__panel {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "jvetrau-ds",
3
- "version": "0.2.49",
3
+ "version": "0.2.50",
4
4
  "description": "Multi-brand React design system with semantic tokens",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
package/styles.css CHANGED
@@ -5543,6 +5543,8 @@ h4.course-outline__group-title {
5543
5543
  display: flex;
5544
5544
  flex-direction: column;
5545
5545
  gap: var(--tabs-gap);
5546
+ min-width: 0;
5547
+ max-width: 100%;
5546
5548
 
5547
5549
  /* border */
5548
5550
 
@@ -5559,10 +5561,29 @@ h4.course-outline__group-title {
5559
5561
  /* size */
5560
5562
  --tabs-list-gap: var(--margin-tab);
5561
5563
 
5562
- display: inline-flex;
5564
+ display: flex;
5563
5565
  align-items: center;
5564
5566
  gap: var(--tabs-list-gap);
5565
- width: fit-content;
5567
+ width: 100%;
5568
+ min-width: 0;
5569
+ overflow-x: auto;
5570
+ overflow-y: hidden;
5571
+ scrollbar-width: none;
5572
+
5573
+ /* border */
5574
+
5575
+ /* depth */
5576
+
5577
+ /* motion */
5578
+ }
5579
+
5580
+ .tabs__list::-webkit-scrollbar {
5581
+ /* color */
5582
+
5583
+ /* typography */
5584
+
5585
+ /* size */
5586
+ display: none;
5566
5587
 
5567
5588
  /* border */
5568
5589
 
@@ -5592,6 +5613,7 @@ h4.course-outline__group-title {
5592
5613
  --tabs-tab-padding-x: var(--padding-tab);
5593
5614
 
5594
5615
  display: inline-flex;
5616
+ flex-shrink: 0;
5595
5617
  align-items: center;
5596
5618
  justify-content: center;
5597
5619
  min-height: var(--tabs-tab-height);
@@ -5624,8 +5646,18 @@ h4.course-outline__group-title {
5624
5646
  .tabs__tab:active,
5625
5647
  .tabs__tab:focus,
5626
5648
  .tabs__tab:hover {
5649
+ /* color */
5650
+
5627
5651
  /* typography */
5628
5652
  text-decoration: none;
5653
+
5654
+ /* size */
5655
+
5656
+ /* border */
5657
+
5658
+ /* depth */
5659
+
5660
+ /* motion */
5629
5661
  }
5630
5662
 
5631
5663
  .tabs__tab--selected {
@@ -5633,8 +5665,16 @@ h4.course-outline__group-title {
5633
5665
  --tabs-tab-bg: var(--tabs-tab-bg-selected);
5634
5666
  --tabs-tab-color: var(--tabs-tab-color-selected);
5635
5667
 
5668
+ /* typography */
5669
+
5670
+ /* size */
5671
+
5636
5672
  /* border */
5637
5673
  --tabs-tab-border-color: var(--color-line);
5674
+
5675
+ /* depth */
5676
+
5677
+ /* motion */
5638
5678
  }
5639
5679
 
5640
5680
  .tabs__panel {