@sbb-esta/lyne-elements 1.15.0 → 1.16.0

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 (49) hide show
  1. package/README.md +6 -6
  2. package/core/base-elements/link-base-element.d.ts +1 -0
  3. package/core/base-elements/link-base-element.d.ts.map +1 -1
  4. package/core/base-elements.js +46 -43
  5. package/core/config/config.d.ts +3 -0
  6. package/core/config/config.d.ts.map +1 -1
  7. package/core/styles/scrollbar.scss +44 -0
  8. package/core/styles/standard-theme.scss +1 -0
  9. package/custom-elements.json +364 -35
  10. package/development/core/base-elements/link-base-element.d.ts +1 -0
  11. package/development/core/base-elements/link-base-element.d.ts.map +1 -1
  12. package/development/core/base-elements.js +5 -2
  13. package/development/core/config/config.d.ts +3 -0
  14. package/development/core/config/config.d.ts.map +1 -1
  15. package/development/core/config.js +1 -1
  16. package/development/form-field/form-field/form-field.d.ts +2 -0
  17. package/development/form-field/form-field/form-field.d.ts.map +1 -1
  18. package/development/form-field/form-field.js +44 -4
  19. package/development/navigation/navigation.js +2 -7
  20. package/development/tabs/tab-group/tab-group.d.ts.map +1 -1
  21. package/development/tabs/tab-group.js +7 -2
  22. package/development/teaser/teaser.d.ts +2 -1
  23. package/development/teaser/teaser.d.ts.map +1 -1
  24. package/development/teaser-product/common/teaser-product-common.d.ts +1 -1
  25. package/development/teaser-product/common/teaser-product-common.d.ts.map +1 -1
  26. package/development/teaser-product/common.js +19 -19
  27. package/development/teaser-product/teaser-product/teaser-product.d.ts +2 -1
  28. package/development/teaser-product/teaser-product/teaser-product.d.ts.map +1 -1
  29. package/development/teaser-product/teaser-product.js +44 -12
  30. package/development/teaser.js +33 -7
  31. package/form-field/form-field/form-field.d.ts +2 -0
  32. package/form-field/form-field/form-field.d.ts.map +1 -1
  33. package/form-field/form-field.js +155 -132
  34. package/navigation/navigation.js +1 -1
  35. package/package.json +13 -5
  36. package/scrollbar.css +158 -0
  37. package/standard-theme.css +159 -0
  38. package/table.css +217 -0
  39. package/tabs/tab-group/tab-group.d.ts.map +1 -1
  40. package/tabs/tab-group.js +62 -60
  41. package/teaser/teaser.d.ts +2 -1
  42. package/teaser/teaser.d.ts.map +1 -1
  43. package/teaser-product/common/teaser-product-common.d.ts +1 -1
  44. package/teaser-product/common/teaser-product-common.d.ts.map +1 -1
  45. package/teaser-product/common.js +22 -20
  46. package/teaser-product/teaser-product/teaser-product.d.ts +2 -1
  47. package/teaser-product/teaser-product/teaser-product.d.ts.map +1 -1
  48. package/teaser-product/teaser-product.js +26 -13
  49. package/teaser.js +38 -26
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sbb-esta/lyne-elements",
3
- "version": "1.15.0",
3
+ "version": "1.16.0",
4
4
  "description": "Lyne Design System",
5
5
  "keywords": [
6
6
  "design system",
@@ -53,10 +53,6 @@
53
53
  "style": "./font-characters-extension.css",
54
54
  "default": "./font-characters-extension.css"
55
55
  },
56
- "./standard-theme.css": {
57
- "style": "./standard-theme.css",
58
- "default": "./standard-theme.css"
59
- },
60
56
  "./layout.css": {
61
57
  "style": "./layout.css",
62
58
  "default": "./layout.css"
@@ -69,6 +65,18 @@
69
65
  "style": "./normalize.css",
70
66
  "default": "./normalize.css"
71
67
  },
68
+ "./scrollbar.css": {
69
+ "style": "./scrollbar.css",
70
+ "default": "./scrollbar.css"
71
+ },
72
+ "./standard-theme.css": {
73
+ "style": "./standard-theme.css",
74
+ "default": "./standard-theme.css"
75
+ },
76
+ "./table.css": {
77
+ "style": "./table.css",
78
+ "default": "./table.css"
79
+ },
72
80
  "./typography.css": {
73
81
  "style": "./typography.css",
74
82
  "default": "./typography.css"
package/scrollbar.css ADDED
@@ -0,0 +1,158 @@
1
+ .sbb-scrollbar,
2
+ .sbb-scrollbar-negative,
3
+ .sbb-scrollbar-thick,
4
+ .sbb-scrollbar-thick-negative,
5
+ .sbb-scrollbar-track-visible,
6
+ .sbb-scrollbar-negative-track-visible,
7
+ .sbb-scrollbar-thick-track-visible,
8
+ .sbb-scrollbar-thick-negative-track-visible {
9
+ --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
10
+ }
11
+ .sbb-scrollbar::-webkit-scrollbar,
12
+ .sbb-scrollbar-negative::-webkit-scrollbar,
13
+ .sbb-scrollbar-thick::-webkit-scrollbar,
14
+ .sbb-scrollbar-thick-negative::-webkit-scrollbar,
15
+ .sbb-scrollbar-track-visible::-webkit-scrollbar,
16
+ .sbb-scrollbar-negative-track-visible::-webkit-scrollbar,
17
+ .sbb-scrollbar-thick-track-visible::-webkit-scrollbar,
18
+ .sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar {
19
+ width: var(--sbb-scrollbar-width);
20
+ height: var(--sbb-scrollbar-width);
21
+ background-color: var(--sbb-scrollbar-track-color, transparent);
22
+ }
23
+ .sbb-scrollbar::-webkit-scrollbar-corner,
24
+ .sbb-scrollbar-negative::-webkit-scrollbar-corner,
25
+ .sbb-scrollbar-thick::-webkit-scrollbar-corner,
26
+ .sbb-scrollbar-thick-negative::-webkit-scrollbar-corner,
27
+ .sbb-scrollbar-track-visible::-webkit-scrollbar-corner,
28
+ .sbb-scrollbar-negative-track-visible::-webkit-scrollbar-corner,
29
+ .sbb-scrollbar-thick-track-visible::-webkit-scrollbar-corner,
30
+ .sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-corner {
31
+ background-color: var(--sbb-scrollbar-track-color, transparent);
32
+ }
33
+ .sbb-scrollbar::-webkit-scrollbar-thumb,
34
+ .sbb-scrollbar-negative::-webkit-scrollbar-thumb,
35
+ .sbb-scrollbar-thick::-webkit-scrollbar-thumb,
36
+ .sbb-scrollbar-thick-negative::-webkit-scrollbar-thumb,
37
+ .sbb-scrollbar-track-visible::-webkit-scrollbar-thumb,
38
+ .sbb-scrollbar-negative-track-visible::-webkit-scrollbar-thumb,
39
+ .sbb-scrollbar-thick-track-visible::-webkit-scrollbar-thumb,
40
+ .sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-thumb {
41
+ background-color: var(--sbb-scrollbar-color, currentcolor);
42
+ border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
43
+ border-radius: var(--sbb-border-radius-4x);
44
+ background-clip: padding-box;
45
+ }
46
+ .sbb-scrollbar::-webkit-scrollbar-thumb:hover,
47
+ .sbb-scrollbar-negative::-webkit-scrollbar-thumb:hover,
48
+ .sbb-scrollbar-thick::-webkit-scrollbar-thumb:hover,
49
+ .sbb-scrollbar-thick-negative::-webkit-scrollbar-thumb:hover,
50
+ .sbb-scrollbar-track-visible::-webkit-scrollbar-thumb:hover,
51
+ .sbb-scrollbar-negative-track-visible::-webkit-scrollbar-thumb:hover,
52
+ .sbb-scrollbar-thick-track-visible::-webkit-scrollbar-thumb:hover,
53
+ .sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-thumb:hover {
54
+ background-color: var(--sbb-scrollbar-color-hover, currentcolor);
55
+ border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
56
+ }
57
+ .sbb-scrollbar::-webkit-scrollbar-button, .sbb-scrollbar::-webkit-scrollbar-corner,
58
+ .sbb-scrollbar-negative::-webkit-scrollbar-button,
59
+ .sbb-scrollbar-negative::-webkit-scrollbar-corner,
60
+ .sbb-scrollbar-thick::-webkit-scrollbar-button,
61
+ .sbb-scrollbar-thick::-webkit-scrollbar-corner,
62
+ .sbb-scrollbar-thick-negative::-webkit-scrollbar-button,
63
+ .sbb-scrollbar-thick-negative::-webkit-scrollbar-corner,
64
+ .sbb-scrollbar-track-visible::-webkit-scrollbar-button,
65
+ .sbb-scrollbar-track-visible::-webkit-scrollbar-corner,
66
+ .sbb-scrollbar-negative-track-visible::-webkit-scrollbar-button,
67
+ .sbb-scrollbar-negative-track-visible::-webkit-scrollbar-corner,
68
+ .sbb-scrollbar-thick-track-visible::-webkit-scrollbar-button,
69
+ .sbb-scrollbar-thick-track-visible::-webkit-scrollbar-corner,
70
+ .sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-button,
71
+ .sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-corner {
72
+ display: none;
73
+ }
74
+ @supports not selector(::-webkit-scrollbar) {
75
+ .sbb-scrollbar,
76
+ .sbb-scrollbar-negative,
77
+ .sbb-scrollbar-thick,
78
+ .sbb-scrollbar-thick-negative,
79
+ .sbb-scrollbar-track-visible,
80
+ .sbb-scrollbar-negative-track-visible,
81
+ .sbb-scrollbar-thick-track-visible,
82
+ .sbb-scrollbar-thick-negative-track-visible {
83
+ scrollbar-width: var(--sbb-scrollbar-width-firefox);
84
+ scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
85
+ }
86
+ }
87
+
88
+ .sbb-scrollbar {
89
+ --sbb-scrollbar-thumb-width: 0.125rem;
90
+ --sbb-scrollbar-thumb-width-hover: 0.25rem;
91
+ --sbb-scrollbar-width-firefox: thin;
92
+ --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
93
+ --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
94
+ --sbb-scrollbar-track-color: transparent;
95
+ }
96
+
97
+ .sbb-scrollbar-negative {
98
+ --sbb-scrollbar-thumb-width: 0.125rem;
99
+ --sbb-scrollbar-thumb-width-hover: 0.25rem;
100
+ --sbb-scrollbar-width-firefox: thin;
101
+ --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
102
+ --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
103
+ --sbb-scrollbar-track-color: transparent;
104
+ }
105
+
106
+ .sbb-scrollbar-thick {
107
+ --sbb-scrollbar-thumb-width: 0.5rem;
108
+ --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
109
+ --sbb-scrollbar-width-firefox: auto;
110
+ --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
111
+ --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
112
+ --sbb-scrollbar-track-color: transparent;
113
+ }
114
+
115
+ .sbb-scrollbar-thick-negative {
116
+ --sbb-scrollbar-thumb-width: 0.5rem;
117
+ --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
118
+ --sbb-scrollbar-width-firefox: auto;
119
+ --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
120
+ --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
121
+ --sbb-scrollbar-track-color: transparent;
122
+ }
123
+
124
+ .sbb-scrollbar-track-visible {
125
+ --sbb-scrollbar-thumb-width: 0.125rem;
126
+ --sbb-scrollbar-thumb-width-hover: 0.25rem;
127
+ --sbb-scrollbar-width-firefox: thin;
128
+ --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
129
+ --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
130
+ --sbb-scrollbar-track-color: var(--sbb-color-cloud);
131
+ }
132
+
133
+ .sbb-scrollbar-negative-track-visible {
134
+ --sbb-scrollbar-thumb-width: 0.125rem;
135
+ --sbb-scrollbar-thumb-width-hover: 0.25rem;
136
+ --sbb-scrollbar-width-firefox: thin;
137
+ --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
138
+ --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
139
+ --sbb-scrollbar-track-color: var(--sbb-color-iron);
140
+ }
141
+
142
+ .sbb-scrollbar-thick-track-visible {
143
+ --sbb-scrollbar-thumb-width: 0.5rem;
144
+ --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
145
+ --sbb-scrollbar-width-firefox: auto;
146
+ --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
147
+ --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
148
+ --sbb-scrollbar-track-color: var(--sbb-color-cloud);
149
+ }
150
+
151
+ .sbb-scrollbar-thick-negative-track-visible {
152
+ --sbb-scrollbar-thumb-width: 0.5rem;
153
+ --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
154
+ --sbb-scrollbar-width-firefox: auto;
155
+ --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
156
+ --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
157
+ --sbb-scrollbar-track-color: var(--sbb-color-iron);
158
+ }
package/standard-theme.css CHANGED
@@ -1734,6 +1734,165 @@ sup {
1734
1734
  mask-size: 100%;
1735
1735
  }
1736
1736
 
1737
+ .sbb-scrollbar,
1738
+ .sbb-scrollbar-negative,
1739
+ .sbb-scrollbar-thick,
1740
+ .sbb-scrollbar-thick-negative,
1741
+ .sbb-scrollbar-track-visible,
1742
+ .sbb-scrollbar-negative-track-visible,
1743
+ .sbb-scrollbar-thick-track-visible,
1744
+ .sbb-scrollbar-thick-negative-track-visible {
1745
+ --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
1746
+ }
1747
+ .sbb-scrollbar::-webkit-scrollbar,
1748
+ .sbb-scrollbar-negative::-webkit-scrollbar,
1749
+ .sbb-scrollbar-thick::-webkit-scrollbar,
1750
+ .sbb-scrollbar-thick-negative::-webkit-scrollbar,
1751
+ .sbb-scrollbar-track-visible::-webkit-scrollbar,
1752
+ .sbb-scrollbar-negative-track-visible::-webkit-scrollbar,
1753
+ .sbb-scrollbar-thick-track-visible::-webkit-scrollbar,
1754
+ .sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar {
1755
+ width: var(--sbb-scrollbar-width);
1756
+ height: var(--sbb-scrollbar-width);
1757
+ background-color: var(--sbb-scrollbar-track-color, transparent);
1758
+ }
1759
+ .sbb-scrollbar::-webkit-scrollbar-corner,
1760
+ .sbb-scrollbar-negative::-webkit-scrollbar-corner,
1761
+ .sbb-scrollbar-thick::-webkit-scrollbar-corner,
1762
+ .sbb-scrollbar-thick-negative::-webkit-scrollbar-corner,
1763
+ .sbb-scrollbar-track-visible::-webkit-scrollbar-corner,
1764
+ .sbb-scrollbar-negative-track-visible::-webkit-scrollbar-corner,
1765
+ .sbb-scrollbar-thick-track-visible::-webkit-scrollbar-corner,
1766
+ .sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-corner {
1767
+ background-color: var(--sbb-scrollbar-track-color, transparent);
1768
+ }
1769
+ .sbb-scrollbar::-webkit-scrollbar-thumb,
1770
+ .sbb-scrollbar-negative::-webkit-scrollbar-thumb,
1771
+ .sbb-scrollbar-thick::-webkit-scrollbar-thumb,
1772
+ .sbb-scrollbar-thick-negative::-webkit-scrollbar-thumb,
1773
+ .sbb-scrollbar-track-visible::-webkit-scrollbar-thumb,
1774
+ .sbb-scrollbar-negative-track-visible::-webkit-scrollbar-thumb,
1775
+ .sbb-scrollbar-thick-track-visible::-webkit-scrollbar-thumb,
1776
+ .sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-thumb {
1777
+ background-color: var(--sbb-scrollbar-color, currentcolor);
1778
+ border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
1779
+ border-radius: var(--sbb-border-radius-4x);
1780
+ background-clip: padding-box;
1781
+ }
1782
+ .sbb-scrollbar::-webkit-scrollbar-thumb:hover,
1783
+ .sbb-scrollbar-negative::-webkit-scrollbar-thumb:hover,
1784
+ .sbb-scrollbar-thick::-webkit-scrollbar-thumb:hover,
1785
+ .sbb-scrollbar-thick-negative::-webkit-scrollbar-thumb:hover,
1786
+ .sbb-scrollbar-track-visible::-webkit-scrollbar-thumb:hover,
1787
+ .sbb-scrollbar-negative-track-visible::-webkit-scrollbar-thumb:hover,
1788
+ .sbb-scrollbar-thick-track-visible::-webkit-scrollbar-thumb:hover,
1789
+ .sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-thumb:hover {
1790
+ background-color: var(--sbb-scrollbar-color-hover, currentcolor);
1791
+ border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
1792
+ }
1793
+ .sbb-scrollbar::-webkit-scrollbar-button, .sbb-scrollbar::-webkit-scrollbar-corner,
1794
+ .sbb-scrollbar-negative::-webkit-scrollbar-button,
1795
+ .sbb-scrollbar-negative::-webkit-scrollbar-corner,
1796
+ .sbb-scrollbar-thick::-webkit-scrollbar-button,
1797
+ .sbb-scrollbar-thick::-webkit-scrollbar-corner,
1798
+ .sbb-scrollbar-thick-negative::-webkit-scrollbar-button,
1799
+ .sbb-scrollbar-thick-negative::-webkit-scrollbar-corner,
1800
+ .sbb-scrollbar-track-visible::-webkit-scrollbar-button,
1801
+ .sbb-scrollbar-track-visible::-webkit-scrollbar-corner,
1802
+ .sbb-scrollbar-negative-track-visible::-webkit-scrollbar-button,
1803
+ .sbb-scrollbar-negative-track-visible::-webkit-scrollbar-corner,
1804
+ .sbb-scrollbar-thick-track-visible::-webkit-scrollbar-button,
1805
+ .sbb-scrollbar-thick-track-visible::-webkit-scrollbar-corner,
1806
+ .sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-button,
1807
+ .sbb-scrollbar-thick-negative-track-visible::-webkit-scrollbar-corner {
1808
+ display: none;
1809
+ }
1810
+ @supports not selector(::-webkit-scrollbar) {
1811
+ .sbb-scrollbar,
1812
+ .sbb-scrollbar-negative,
1813
+ .sbb-scrollbar-thick,
1814
+ .sbb-scrollbar-thick-negative,
1815
+ .sbb-scrollbar-track-visible,
1816
+ .sbb-scrollbar-negative-track-visible,
1817
+ .sbb-scrollbar-thick-track-visible,
1818
+ .sbb-scrollbar-thick-negative-track-visible {
1819
+ scrollbar-width: var(--sbb-scrollbar-width-firefox);
1820
+ scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
1821
+ }
1822
+ }
1823
+
1824
+ .sbb-scrollbar {
1825
+ --sbb-scrollbar-thumb-width: 0.125rem;
1826
+ --sbb-scrollbar-thumb-width-hover: 0.25rem;
1827
+ --sbb-scrollbar-width-firefox: thin;
1828
+ --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
1829
+ --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
1830
+ --sbb-scrollbar-track-color: transparent;
1831
+ }
1832
+
1833
+ .sbb-scrollbar-negative {
1834
+ --sbb-scrollbar-thumb-width: 0.125rem;
1835
+ --sbb-scrollbar-thumb-width-hover: 0.25rem;
1836
+ --sbb-scrollbar-width-firefox: thin;
1837
+ --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
1838
+ --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
1839
+ --sbb-scrollbar-track-color: transparent;
1840
+ }
1841
+
1842
+ .sbb-scrollbar-thick {
1843
+ --sbb-scrollbar-thumb-width: 0.5rem;
1844
+ --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
1845
+ --sbb-scrollbar-width-firefox: auto;
1846
+ --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
1847
+ --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
1848
+ --sbb-scrollbar-track-color: transparent;
1849
+ }
1850
+
1851
+ .sbb-scrollbar-thick-negative {
1852
+ --sbb-scrollbar-thumb-width: 0.5rem;
1853
+ --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
1854
+ --sbb-scrollbar-width-firefox: auto;
1855
+ --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
1856
+ --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
1857
+ --sbb-scrollbar-track-color: transparent;
1858
+ }
1859
+
1860
+ .sbb-scrollbar-track-visible {
1861
+ --sbb-scrollbar-thumb-width: 0.125rem;
1862
+ --sbb-scrollbar-thumb-width-hover: 0.25rem;
1863
+ --sbb-scrollbar-width-firefox: thin;
1864
+ --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
1865
+ --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
1866
+ --sbb-scrollbar-track-color: var(--sbb-color-cloud);
1867
+ }
1868
+
1869
+ .sbb-scrollbar-negative-track-visible {
1870
+ --sbb-scrollbar-thumb-width: 0.125rem;
1871
+ --sbb-scrollbar-thumb-width-hover: 0.25rem;
1872
+ --sbb-scrollbar-width-firefox: thin;
1873
+ --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
1874
+ --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
1875
+ --sbb-scrollbar-track-color: var(--sbb-color-iron);
1876
+ }
1877
+
1878
+ .sbb-scrollbar-thick-track-visible {
1879
+ --sbb-scrollbar-thumb-width: 0.5rem;
1880
+ --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
1881
+ --sbb-scrollbar-width-firefox: auto;
1882
+ --sbb-scrollbar-color: var(--sbb-color-black-alpha-30);
1883
+ --sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);
1884
+ --sbb-scrollbar-track-color: var(--sbb-color-cloud);
1885
+ }
1886
+
1887
+ .sbb-scrollbar-thick-negative-track-visible {
1888
+ --sbb-scrollbar-thumb-width: 0.5rem;
1889
+ --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);
1890
+ --sbb-scrollbar-width-firefox: auto;
1891
+ --sbb-scrollbar-color: var(--sbb-color-white-alpha-30);
1892
+ --sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);
1893
+ --sbb-scrollbar-track-color: var(--sbb-color-iron);
1894
+ }
1895
+
1737
1896
  .sbb-table,
1738
1897
  .sbb-table-m,
1739
1898
  .sbb-table-s,
package/table.css ADDED
@@ -0,0 +1,217 @@
1
+ .sbb-table,
2
+ .sbb-table-m,
3
+ .sbb-table-s,
4
+ .sbb-table-xs {
5
+ --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
6
+ --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
7
+ --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
8
+ --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
9
+ }
10
+ .sbb-table tbody tr:nth-child(odd),
11
+ .sbb-table-m tbody tr:nth-child(odd),
12
+ .sbb-table-s tbody tr:nth-child(odd),
13
+ .sbb-table-xs tbody tr:nth-child(odd) {
14
+ background-color: var(--sbb-table-row-striped-color);
15
+ }
16
+ .sbb-table,
17
+ .sbb-table-m,
18
+ .sbb-table-s,
19
+ .sbb-table-xs {
20
+ --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
21
+ --sbb-table-border-color: var(--sbb-color-cloud);
22
+ --sbb-table-border-radius: var(--sbb-border-radius-4x);
23
+ --sbb-table-background-color: var(--sbb-color-white);
24
+ --sbb-table-row-striped-color: var(--sbb-color-milk);
25
+ --sbb-table-color: inherit;
26
+ --sbb-table-caption-color: var(--sbb-color-granite);
27
+ --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
28
+ background-color: var(--sbb-table-background-color);
29
+ border: var(--sbb-table-border);
30
+ border-radius: var(--sbb-table-border-radius);
31
+ border-spacing: 0;
32
+ caption-side: bottom;
33
+ color: var(--sbb-table-color);
34
+ table-layout: auto;
35
+ }
36
+ .sbb-table thead > tr > th,
37
+ .sbb-table-m thead > tr > th,
38
+ .sbb-table-s thead > tr > th,
39
+ .sbb-table-xs thead > tr > th {
40
+ --sbb-text-font-size: var(--sbb-font-size-text-xs);
41
+ font-family: var(--sbb-typo-font-family);
42
+ font-weight: normal;
43
+ line-height: var(--sbb-typo-line-height-body-text);
44
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
45
+ font-size: var(--sbb-text-font-size);
46
+ font-weight: bold;
47
+ border-bottom: var(--sbb-table-border);
48
+ border-right: var(--sbb-table-border);
49
+ padding-block: var(--sbb-table-header-padding-block);
50
+ padding-inline: var(--sbb-table-header-padding-inline);
51
+ text-align: left;
52
+ }
53
+ .sbb-table thead > tr > th:last-of-type,
54
+ .sbb-table-m thead > tr > th:last-of-type,
55
+ .sbb-table-s thead > tr > th:last-of-type,
56
+ .sbb-table-xs thead > tr > th:last-of-type {
57
+ border-right: none;
58
+ }
59
+ .sbb-table tbody > tr:first-of-type td,
60
+ .sbb-table-m tbody > tr:first-of-type td,
61
+ .sbb-table-s tbody > tr:first-of-type td,
62
+ .sbb-table-xs tbody > tr:first-of-type td {
63
+ border-top: none;
64
+ }
65
+ .sbb-table tbody > tr > td,
66
+ .sbb-table-m tbody > tr > td,
67
+ .sbb-table-s tbody > tr > td,
68
+ .sbb-table-xs tbody > tr > td {
69
+ --sbb-text-font-size: var(--sbb-font-size-text-s);
70
+ font-family: var(--sbb-typo-font-family);
71
+ font-weight: normal;
72
+ line-height: var(--sbb-typo-line-height-body-text);
73
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
74
+ font-size: var(--sbb-text-font-size);
75
+ border-top: var(--sbb-table-border);
76
+ border-right: var(--sbb-table-border);
77
+ padding-block: var(--sbb-table-cell-padding-block);
78
+ padding-inline: var(--sbb-table-cell-padding-inline);
79
+ }
80
+ .sbb-table tbody > tr > td:last-of-type,
81
+ .sbb-table-m tbody > tr > td:last-of-type,
82
+ .sbb-table-s tbody > tr > td:last-of-type,
83
+ .sbb-table-xs tbody > tr > td:last-of-type {
84
+ border-right: none;
85
+ }
86
+ .sbb-table caption,
87
+ .sbb-table-m caption,
88
+ .sbb-table-s caption,
89
+ .sbb-table-xs caption {
90
+ --sbb-text-font-size: var(--sbb-font-size-text-xs);
91
+ font-family: var(--sbb-typo-font-family);
92
+ font-weight: normal;
93
+ line-height: var(--sbb-typo-line-height-body-text);
94
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
95
+ font-size: var(--sbb-text-font-size);
96
+ color: var(--sbb-table-caption-color, var(--sbb-color-granite));
97
+ margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
98
+ text-align: left;
99
+ }
100
+
101
+ .sbb-table-m {
102
+ --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
103
+ --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
104
+ --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
105
+ --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
106
+ }
107
+
108
+ .sbb-table-s {
109
+ --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
110
+ --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
111
+ --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
112
+ --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
113
+ }
114
+ .sbb-table-s tbody > tr > td {
115
+ --sbb-text-font-size: var(--sbb-font-size-text-xs);
116
+ font-family: var(--sbb-typo-font-family);
117
+ font-weight: normal;
118
+ line-height: var(--sbb-typo-line-height-body-text);
119
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
120
+ font-size: var(--sbb-text-font-size);
121
+ }
122
+
123
+ .sbb-table-xs {
124
+ --sbb-table-header-padding-block: 0;
125
+ --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x);
126
+ --sbb-table-cell-padding-block: 0;
127
+ --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
128
+ }
129
+ .sbb-table-xs tbody > tr > td {
130
+ --sbb-text-font-size: var(--sbb-font-size-text-xs);
131
+ font-family: var(--sbb-typo-font-family);
132
+ font-weight: normal;
133
+ line-height: var(--sbb-typo-line-height-body-text);
134
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
135
+ font-size: var(--sbb-text-font-size);
136
+ }
137
+
138
+ sbb-table-wrapper[negative] .sbb-table,
139
+ .sbb-table--negative {
140
+ --sbb-table-border-color: var(--sbb-color-anthracite);
141
+ --sbb-table-background-color: var(--sbb-color-midnight);
142
+ --sbb-table-color: var(--sbb-color-white);
143
+ --sbb-table-row-striped-color: var(--sbb-color-charcoal);
144
+ --sbb-table-caption-color: var(--sbb-color-cement);
145
+ }
146
+
147
+ .sbb-table--striped tbody tr:nth-child(odd) {
148
+ background-color: var(--sbb-table-row-striped-color);
149
+ }
150
+
151
+ .sbb-table--unstriped tbody tr:nth-child(odd) {
152
+ background-color: unset;
153
+ }
154
+
155
+ .sbb-table--theme-iron {
156
+ --sbb-table-cell-color: var(--sbb-color-iron);
157
+ }
158
+ .sbb-table--theme-iron tbody > tr > td {
159
+ color: var(--sbb-table-cell-color);
160
+ }
161
+ .sbb-table--theme-iron.sbb-table--negative {
162
+ --sbb-table-cell-color: var(--sbb-color-cloud);
163
+ }
164
+
165
+ .sbb-table-header-cell {
166
+ --sbb-text-font-size: var(--sbb-font-size-text-xs);
167
+ font-family: var(--sbb-typo-font-family);
168
+ font-weight: normal;
169
+ line-height: var(--sbb-typo-line-height-body-text);
170
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
171
+ font-size: var(--sbb-text-font-size);
172
+ font-weight: bold;
173
+ border-bottom: var(--sbb-table-border);
174
+ border-right: var(--sbb-table-border);
175
+ padding-block: var(--sbb-table-header-padding-block);
176
+ padding-inline: var(--sbb-table-header-padding-inline);
177
+ text-align: left;
178
+ }
179
+ .sbb-table-header-cell:last-of-type {
180
+ border-right: none;
181
+ }
182
+
183
+ .sbb-table-data-row:first-of-type td {
184
+ border-top: none;
185
+ }
186
+
187
+ .sbb-table-row--striped {
188
+ background-color: var(--sbb-table-row-striped-color);
189
+ }
190
+
191
+ .sbb-table-data-cell {
192
+ --sbb-text-font-size: var(--sbb-font-size-text-s);
193
+ font-family: var(--sbb-typo-font-family);
194
+ font-weight: normal;
195
+ line-height: var(--sbb-typo-line-height-body-text);
196
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
197
+ font-size: var(--sbb-text-font-size);
198
+ border-top: var(--sbb-table-border);
199
+ border-right: var(--sbb-table-border);
200
+ padding-block: var(--sbb-table-cell-padding-block);
201
+ padding-inline: var(--sbb-table-cell-padding-inline);
202
+ }
203
+ .sbb-table-data-cell:last-of-type {
204
+ border-right: none;
205
+ }
206
+
207
+ .sbb-table-caption {
208
+ --sbb-text-font-size: var(--sbb-font-size-text-xs);
209
+ font-family: var(--sbb-typo-font-family);
210
+ font-weight: normal;
211
+ line-height: var(--sbb-typo-line-height-body-text);
212
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
213
+ font-size: var(--sbb-text-font-size);
214
+ color: var(--sbb-table-caption-color, var(--sbb-color-granite));
215
+ margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
216
+ text-align: left;
217
+ }
package/tabs/tab-group/tab-group.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tab-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AASvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI1C,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,CAAC;IACnC,SAAS,EAAE,aAAa,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,IAAI,IAAI,CAAC;IACjB,UAAU,IAAI,IAAI,CAAC;IACnB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;;AAQD;;;;;;GAMG;AACH,qBAEM,kBAAmB,SAAQ,uBAA6B;IAC5D,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,YAAY,CAAC,CAA0B;IAC/C,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,qBAAqB,CAI1B;IACH,OAAO,CAAC,uBAAuB,CAI5B;IACH,OAAO,CAAC,yBAAyB,CAI9B;IAEH,uCAAuC;IACvC,IACW,IAAI,CAAC,KAAK,EAAE,uBAAuB,CAAC,MAAM,CAAC,EAGrD;IACD,IAAW,IAAI,IAAI,uBAAuB,CAAC,MAAM,CAAC,CAEjD;IACD,OAAO,CAAC,KAAK,CAAwC;IAErD;;;OAGG;IACH,SAEgB,oBAAoB,EAAE,MAAM,CAAK;IAEjD,6CAA6C;IAC7C,OAAO,CAAC,mBAAmB,CAGzB;IAEc,iBAAiB,IAAI,IAAI;cAMtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9E;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB,CAS1B;IAEF,OAAO,CAAC,iBAAiB,CAavB;IAEF,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,0BAA0B;IAQlC,OAAO,CAAC,UAAU;IAkGlB,OAAO,CAAC,cAAc;cAoBH,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}
1
+ {"version":3,"file":"tab-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AASvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI1C,MAAM,MAAM,yBAAyB,GAAG;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,CAAC;IACnC,SAAS,EAAE,aAAa,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,kBAAkB,GAAG,SAAS,CAAC;IACjD,WAAW,EAAE,aAAa,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,IAAI,IAAI,CAAC;IACjB,UAAU,IAAI,IAAI,CAAC;IACnB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,2BAA2B,CAAC;IAC9C,IAAI,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;CACxB;;AAQD;;;;;;GAMG;AACH,qBAEM,kBAAmB,SAAQ,uBAA6B;IAC5D,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,YAAY,CAAC,CAA0B;IAC/C,OAAO,CAAC,gBAAgB,CAAe;IACvC,OAAO,CAAC,kBAAkB,CAAe;IACzC,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,qBAAqB,CAI1B;IACH,OAAO,CAAC,uBAAuB,CAI5B;IACH,OAAO,CAAC,yBAAyB,CAI9B;IAEH,uCAAuC;IACvC,IACW,IAAI,CAAC,KAAK,EAAE,uBAAuB,CAAC,MAAM,CAAC,EAGrD;IACD,IAAW,IAAI,IAAI,uBAAuB,CAAC,MAAM,CAAC,CAEjD;IACD,OAAO,CAAC,KAAK,CAAwC;IAErD;;;OAGG;IACH,SAEgB,oBAAoB,EAAE,MAAM,CAAK;IAEjD,6CAA6C;IAC7C,OAAO,CAAC,mBAAmB,CAGzB;IAEc,iBAAiB,IAAI,IAAI;cAMtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAS9E;;;OAGG;IACI,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIzC;;;OAGG;IACI,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIxC;;;OAGG;IACI,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI1C,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,oBAAoB,CAY1B;IAEF,OAAO,CAAC,iBAAiB,CAavB;IAEF,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,sBAAsB;IAwB9B,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,UAAU;IAmGlB,OAAO,CAAC,cAAc;cAoBH,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,kBAAkB,CAAC;KACrC;CACF"}