@trebired/frontend 1.19.0 → 1.19.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 CHANGED
@@ -6,6 +6,10 @@ This project follows semantic versioning once published.
6
6
 
7
7
  ## Unreleased
8
8
 
9
+ ## 1.19.1
10
+
11
+ - Fixed package-owned product chrome surfaces so they inherit config `background-page`, keep header support links horizontal on desktop, hide the mobile menu toggle outside mobile breakpoints, and preserve dark platform spacing/colors without app-side legacy chrome CSS.
12
+
9
13
  ## 1.19.0
10
14
 
11
15
  - Added package-owned locale switching and source-language visualizer components/runtime so ecosystem apps can remove local language switcher, language card/modal, bucket filtering, and file-tree mounting code.
@@ -1,14 +1,14 @@
1
1
  .tbf-header,
2
2
  [data-tbf-header] {
3
3
  display: flex;
4
- min-height: var(--tbf-header-min-height, 56px);
4
+ min-height: var(--tbf-header-min-height, 67px);
5
5
  box-sizing: border-box;
6
6
  align-items: center;
7
7
  gap: var(--tbf-gap-sm, 8px);
8
- padding: var(--tbf-header-padding, 8px 14px);
8
+ padding: var(--tbf-header-padding, 8px 18px);
9
9
  border-block-end: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
10
10
  color: var(--tbf-text, #000);
11
- background: var(--tbf-page, #fff);
11
+ background: var(--tbf-page, var(--background-page, #fff));
12
12
  }
13
13
 
14
14
  [data-tbf-header-primary],
@@ -46,10 +46,12 @@
46
46
  .tbf-header__nav,
47
47
  [data-tbf-header-nav] {
48
48
  flex: 1 1 auto;
49
+ overflow: hidden;
49
50
  }
50
51
 
51
52
  .tbf-header__actions,
52
53
  [data-tbf-header-actions] {
54
+ flex: 0 0 auto;
53
55
  margin-inline-start: auto;
54
56
  }
55
57
 
@@ -69,6 +71,7 @@
69
71
  }
70
72
 
71
73
  .tbf-shell-header-toggle-group {
74
+ display: none;
72
75
  margin-inline-start: auto;
73
76
  }
74
77
 
@@ -114,7 +117,7 @@
114
117
  padding: var(--tbf-mobile-nav-padding, 16px);
115
118
  overflow-y: auto;
116
119
  color: var(--tbf-text, #000);
117
- background: var(--tbf-page, #fff);
120
+ background: var(--tbf-page, var(--background-page, #fff));
118
121
  transform: translateX(-100%);
119
122
  transition: transform var(--tbf-transition-normal, 180ms) ease;
120
123
  }
@@ -147,14 +150,48 @@
147
150
  }
148
151
 
149
152
  .tbf-shell-mobile-nav__section,
150
- .tbf-shell-support-links,
151
- .tbf-shell-support-links__list {
153
+ .tbf-shell-support-links {
152
154
  display: flex;
153
155
  min-width: 0;
154
156
  flex-direction: column;
155
157
  gap: var(--tbf-gap-sm, 8px);
156
158
  }
157
159
 
160
+ .tbf-shell-support-links__list {
161
+ display: flex;
162
+ min-width: 0;
163
+ flex-direction: row;
164
+ align-items: center;
165
+ gap: var(--tbf-gap-sm, 8px);
166
+ padding: 0;
167
+ margin: 0;
168
+ list-style: none;
169
+ }
170
+
171
+ .tbf-shell-support-links__list.inline-row {
172
+ flex-direction: row;
173
+ flex-wrap: nowrap;
174
+ justify-content: flex-start;
175
+ }
176
+
177
+ .tbf-shell-support-links__list.column {
178
+ flex-direction: column;
179
+ align-items: stretch;
180
+ }
181
+
182
+ .tbf-header__nav .tbf-shell-support-links,
183
+ [data-tbf-header-nav] .tbf-shell-support-links {
184
+ flex: 1 1 auto;
185
+ overflow: hidden;
186
+ }
187
+
188
+ .tbf-header__nav .tbf-shell-support-links__list,
189
+ [data-tbf-header-nav] .tbf-shell-support-links__list {
190
+ overflow-x: auto;
191
+ overflow-y: hidden;
192
+ scrollbar-width: thin;
193
+ }
194
+
158
195
  .tbf-shell-mobile-nav__section-label,
159
196
  .tbf-shell-support-links__label {
160
197
  color: var(--tbf-text-muted, #666);
@@ -208,7 +245,7 @@
208
245
  min-height: 52px;
209
246
  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
210
247
  border-radius: var(--tbf-radius, 0);
211
- background: var(--tbf-page, #fff);
248
+ background: var(--tbf-page, var(--background-page, #fff));
212
249
  pointer-events: auto;
213
250
  }
214
251
 
@@ -288,8 +325,24 @@
288
325
  }
289
326
 
290
327
  @media (max-width: 900px) {
328
+ .tbf-header,
329
+ [data-tbf-header] {
330
+ flex-wrap: wrap;
331
+ min-height: 10px;
332
+ padding: var(--tbf-header-mobile-padding, 10px 14px);
333
+ }
334
+
291
335
  .tbf-header__nav,
292
336
  [data-tbf-header-nav] {
293
337
  display: none;
294
338
  }
339
+
340
+ .tbf-shell-header-toggle-group {
341
+ display: inline-flex;
342
+ }
343
+
344
+ .tbf-header__actions,
345
+ [data-tbf-header-actions] {
346
+ display: none;
347
+ }
295
348
  }
@@ -38,6 +38,7 @@
38
38
  --tbf-radius-sm: var(--radius-sm, 0);
39
39
  --tbf-border-width: var(--border-width, 1px);
40
40
  --tbf-border: var(--border-surface-1, var(--gray-750, #000));
41
+ --tbf-page: var(--background-page, var(--tbf-surface, #fff));
41
42
  --tbf-surface: var(--surface-1, var(--background-surface-1, #fff));
42
43
  --tbf-surface-muted: var(--surface-2, var(--background-surface-2, #fff));
43
44
  --tbf-text: var(--text-color, var(--gray-100, #000));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trebired/frontend",
3
- "version": "1.19.0",
3
+ "version": "1.19.1",
4
4
  "description": "Generic browser runtime systems for Trebired frontend packages and applications.",
5
5
  "type": "module",
6
6
  "private": false,