@tylertech/forge 3.3.6 → 3.4.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 (47) hide show
  1. package/custom-elements.json +48 -27
  2. package/dist/app-bar/forge-app-bar.css +2 -1
  3. package/dist/forge.css +12 -0
  4. package/dist/icon-button/forge-icon-button.css +1 -0
  5. package/dist/lib.js +1 -1
  6. package/dist/lib.js.map +3 -3
  7. package/dist/toolbar/forge-toolbar.css +2 -1
  8. package/dist/typography/forge-typography.css +12 -0
  9. package/dist/vscode.css-custom-data.json +15 -15
  10. package/dist/vscode.html-custom-data.json +6 -6
  11. package/esm/app-bar/app-bar/app-bar.d.ts +1 -0
  12. package/esm/app-bar/app-bar/app-bar.js +2 -1
  13. package/esm/calendar/calendar-core.d.ts +1 -1
  14. package/esm/calendar/calendar-core.js +1 -1
  15. package/esm/checkbox/checkbox.js +1 -1
  16. package/esm/deprecated/icon-button/deprecated-icon-button.js +1 -1
  17. package/esm/icon-button/icon-button.d.ts +1 -0
  18. package/esm/icon-button/icon-button.js +2 -1
  19. package/esm/popover/popover-adapter.js +3 -1
  20. package/esm/radio/radio/radio.js +1 -1
  21. package/esm/switch/switch.js +1 -1
  22. package/esm/tabs/tab/tab-adapter.d.ts +3 -0
  23. package/esm/tabs/tab/tab-adapter.js +5 -0
  24. package/esm/tabs/tab/tab-core.d.ts +3 -0
  25. package/esm/tabs/tab/tab-core.js +5 -0
  26. package/esm/tabs/tab/tab.d.ts +6 -4
  27. package/esm/tabs/tab/tab.js +6 -5
  28. package/esm/tabs/tab-bar/tab-bar-core.js +1 -1
  29. package/esm/tabs/tab-bar/tab-bar.d.ts +4 -2
  30. package/esm/tabs/tab-bar/tab-bar.js +3 -3
  31. package/esm/toolbar/toolbar.d.ts +1 -0
  32. package/esm/toolbar/toolbar.js +2 -1
  33. package/package.json +1 -1
  34. package/sass/app-bar/app-bar/_core.scss +1 -1
  35. package/sass/checkbox/_core.scss +1 -1
  36. package/sass/core/styles/tokens/app-bar/app-bar/_tokens.scss +1 -0
  37. package/sass/core/styles/tokens/icon-button/_tokens.scss +1 -0
  38. package/sass/core/styles/tokens/tabs/tab/_tokens.scss +6 -6
  39. package/sass/core/styles/tokens/toolbar/_tokens.scss +2 -1
  40. package/sass/core/styles/tokens/typography/_tokens.label.scss +10 -0
  41. package/sass/icon-button/_core.scss +1 -0
  42. package/sass/radio/radio/_core.scss +1 -1
  43. package/sass/switch/_core.scss +1 -1
  44. package/sass/tabs/tab/_core.scss +4 -19
  45. package/sass/tabs/tab/tab.scss +1 -25
  46. package/sass/tabs/tab-bar/_core.scss +1 -0
  47. package/sass/toolbar/_core.scss +1 -1
@@ -77,12 +77,6 @@
77
77
  }
78
78
  }
79
79
 
80
- @mixin tab-secondary {
81
- @include override(indicator-height, secondary-indicator-height);
82
- @include override(indicator-shape, secondary-indicator-shape);
83
- @include override(padding-inline, 0, value);
84
- }
85
-
86
80
  @mixin focus {
87
81
  color: #{token(focus-label-text-color)};
88
82
 
@@ -131,6 +125,7 @@
131
125
  transition: 150ms color linear;
132
126
  max-height: calc(#{token(content-height)} + 2 * #{token(content-padding-block)});
133
127
  min-height: #{token(content-height)};
128
+ width: 100%;
134
129
  padding-block: #{token(content-padding-block)};
135
130
  padding-inline: #{token(content-padding-inline)};
136
131
  gap: #{token(content-spacing)};
@@ -149,20 +144,11 @@
149
144
  background: #{token(indicator-color)};
150
145
  border-radius: #{token(indicator-shape)};
151
146
  height: #{token(indicator-height)};
147
+ min-width: 100%;
152
148
  inset: auto 0 0;
153
149
  opacity: 0;
154
150
  }
155
151
 
156
- @mixin content-secondary {
157
- @include override(content-padding-inline, content-padding-inline-secondary);
158
-
159
- width: 100%;
160
- }
161
-
162
- @mixin indicator-secondary {
163
- min-width: 100%;
164
- }
165
-
166
152
  @mixin vertical {
167
153
  @include override(padding-inline, 0, value);
168
154
 
@@ -173,9 +159,6 @@
173
159
 
174
160
  @mixin vertical-content {
175
161
  width: 100%;
176
- }
177
-
178
- @mixin vertical-secondary-content {
179
162
  min-height: 100%;
180
163
  }
181
164
 
@@ -190,7 +173,9 @@
190
173
  }
191
174
 
192
175
  @mixin content-stacked {
176
+ max-height: none;
193
177
  flex-direction: column;
178
+ height: 100%;
194
179
  }
195
180
 
196
181
  @mixin inverted-indicator {
@@ -173,24 +173,6 @@ forge-state-layer {
173
173
  }
174
174
  }
175
175
 
176
- //
177
- // Secondary
178
- //
179
-
180
- :host([secondary]) {
181
- .forge-tab {
182
- @include tab-secondary;
183
- }
184
-
185
- .content {
186
- @include content-secondary;
187
- }
188
-
189
- .indicator {
190
- @include indicator-secondary;
191
- }
192
- }
193
-
194
176
  //
195
177
  // Vertical
196
178
  //
@@ -217,13 +199,7 @@ forge-state-layer {
217
199
  }
218
200
  }
219
201
 
220
- :host([vertical][secondary]) {
221
- .content {
222
- @include vertical-secondary-content;
223
- }
224
- }
225
-
226
- :host([vertical]:not([secondary])) {
202
+ :host([vertical]) {
227
203
  .forge-tab {
228
204
  @include override(indicator-shape, vertical-indicator-shape);
229
205
  }
@@ -30,6 +30,7 @@
30
30
 
31
31
  @mixin slotted-base {
32
32
  flex: #{token(stretch)};
33
+ align-self: stretch;
33
34
  }
34
35
 
35
36
  @mixin slotted-selected {
@@ -9,7 +9,7 @@
9
9
 
10
10
  @mixin _grid {
11
11
  display: grid;
12
- grid-template-columns: auto 1fr auto;
12
+ grid-template-columns: #{token(columns)};
13
13
  }
14
14
 
15
15
  @mixin host {