@freightos/freightwind 2.1.3-host-isolation.0 → 2.1.3-host-isolation.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.
Files changed (2) hide show
  1. package/host-isolation/webcargo.css +96 -83
  2. package/package.json +1 -1
package/host-isolation/webcargo.css CHANGED
@@ -17,11 +17,24 @@
17
17
  *
18
18
  * Strategy
19
19
  * ────────
20
- * Scope a Tailwind-equivalent Preflight to a `.fw-root` ancestor. Wrap the
21
- * scope class in `:where()` so it contributes ZERO specificity — the rule
22
- * ties with Bootstrap's bare element selectors (0-0-1) and wins by source
23
- * order (this file loads after the host). FDS class-anchored selectors
24
- * (`.ant-btn`, etc.) and FreightWind utility classes (loaded via
20
+ * Scope a Tailwind-equivalent Preflight to three roots — wrapped in
21
+ * `:where()` so the scope contributes ZERO specificity:
22
+ *
23
+ * · `.fw-root` — the wrapper consumers put
24
+ * on their App container.
25
+ * · `[data-radix-popper-content-wrapper]` — every Radix Popover /
26
+ * Tooltip / DropdownMenu /
27
+ * Select content wrapper.
28
+ * Radix portals these to
29
+ * `<body>`, outside `.fw-root`,
30
+ * so a scope-only rule would
31
+ * miss them.
32
+ * · `[role="dialog"][data-state]` — Radix Dialog content (also
33
+ * portaled to `<body>`).
34
+ *
35
+ * Each rule ties with Bootstrap's bare element selectors (0-0-1) and wins
36
+ * by source order (this file loads after the host). FDS class-anchored
37
+ * selectors (`.ant-btn`, etc.) and FreightWind utility classes (loaded via
25
38
  * `@layer utilities important`) keep their full specificity advantage and
26
39
  * are never affected by this reset.
27
40
  *
@@ -41,9 +54,9 @@
41
54
  * ──────────────────────────────────────────────────────────────────────── */
42
55
 
43
56
  /* 1 ── Universal box model & border reset ─────────────────────────────────── */
44
- :where(.fw-root) *,
45
- :where(.fw-root) *::before,
46
- :where(.fw-root) *::after {
57
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) *,
58
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) *::before,
59
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) *::after {
47
60
  box-sizing: border-box;
48
61
  border-width: 0;
49
62
  border-style: solid;
@@ -52,20 +65,20 @@
52
65
 
53
66
  /* 2 ── Block-level margins ───────────────────────────────────────────────────
54
67
  Bootstrap adds margin-bottom to h1–h6, p, pre, blockquote, dl, dd, figure. */
55
- :where(.fw-root) blockquote,
56
- :where(.fw-root) dl,
57
- :where(.fw-root) dd,
58
- :where(.fw-root) h1,
59
- :where(.fw-root) h2,
60
- :where(.fw-root) h3,
61
- :where(.fw-root) h4,
62
- :where(.fw-root) h5,
63
- :where(.fw-root) h6,
64
- :where(.fw-root) hr,
65
- :where(.fw-root) figure,
66
- :where(.fw-root) p,
67
- :where(.fw-root) pre,
68
- :where(.fw-root) fieldset {
68
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) blockquote,
69
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) dl,
70
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) dd,
71
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h1,
72
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h2,
73
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h3,
74
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h4,
75
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h5,
76
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h6,
77
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) hr,
78
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) figure,
79
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) p,
80
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) pre,
81
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) fieldset {
69
82
  margin: 0;
70
83
  padding: 0;
71
84
  }
@@ -73,12 +86,12 @@
73
86
  /* 3 ── Headings — strip Bootstrap font-size/weight/line-height overrides ────
74
87
  Bootstrap 4 sets h1=2.5rem, h2=2rem … h6=1rem, all with font-weight:500.
75
88
  FreightWind components set their own heading styles via Tailwind utilities. */
76
- :where(.fw-root) h1,
77
- :where(.fw-root) h2,
78
- :where(.fw-root) h3,
79
- :where(.fw-root) h4,
80
- :where(.fw-root) h5,
81
- :where(.fw-root) h6 {
89
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h1,
90
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h2,
91
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h3,
92
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h4,
93
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h5,
94
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) h6 {
82
95
  font-size: inherit;
83
96
  font-weight: inherit;
84
97
  line-height: inherit;
@@ -86,16 +99,16 @@
86
99
 
87
100
  /* 4 ── Lists ─────────────────────────────────────────────────────────────────
88
101
  Bootstrap adds margin-bottom:1rem to ol/ul and sets list-style-type. */
89
- :where(.fw-root) ol,
90
- :where(.fw-root) ul,
91
- :where(.fw-root) menu {
102
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) ol,
103
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) ul,
104
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) menu {
92
105
  list-style: none;
93
106
  margin: 0;
94
107
  padding: 0;
95
108
  }
96
109
 
97
110
  /* 5 ── Links — strip Bootstrap link color (#337ab7) and underline rules ───── */
98
- :where(.fw-root) a {
111
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) a {
99
112
  color: inherit;
100
113
  text-decoration: inherit;
101
114
  }
@@ -104,7 +117,7 @@
104
117
  Resetting to `display:block; margin:0` restores the FreightWind layout.
105
118
  FDS / Ant labels carry their own class (.ant-form-item-label, 0-1-0) and
106
119
  beat this reset, so they keep their styling. */
107
- :where(.fw-root) label {
120
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) label {
108
121
  display: block;
109
122
  margin: 0;
110
123
  font-weight: inherit;
@@ -114,11 +127,11 @@
114
127
  /* 7 ── Form controls ─────────────────────────────────────────────────────────
115
128
  Bootstrap and browsers set font, margin, and padding on inputs/buttons that
116
129
  differ from the page font. Inherit from the FW root instead. */
117
- :where(.fw-root) button,
118
- :where(.fw-root) input,
119
- :where(.fw-root) optgroup,
120
- :where(.fw-root) select,
121
- :where(.fw-root) textarea {
130
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) button,
131
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) input,
132
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) optgroup,
133
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) select,
134
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) textarea {
122
135
  font-family: inherit;
123
136
  font-feature-settings: inherit;
124
137
  font-variation-settings: inherit;
@@ -131,134 +144,134 @@
131
144
  padding: 0;
132
145
  }
133
146
 
134
- :where(.fw-root) button,
135
- :where(.fw-root) select {
147
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) button,
148
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) select {
136
149
  text-transform: none;
137
150
  }
138
151
 
139
152
  /* Bootstrap 4 adds background gradients and border-radius to buttons. */
140
- :where(.fw-root) button,
141
- :where(.fw-root) input:where([type='button']),
142
- :where(.fw-root) input:where([type='reset']),
143
- :where(.fw-root) input:where([type='submit']) {
153
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) button,
154
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) input:where([type='button']),
155
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) input:where([type='reset']),
156
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) input:where([type='submit']) {
144
157
  -webkit-appearance: button;
145
158
  background-color: transparent;
146
159
  background-image: none;
147
160
  }
148
161
 
149
- :where(.fw-root) :-moz-focusring {
162
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) :-moz-focusring {
150
163
  outline: auto;
151
164
  }
152
165
 
153
- :where(.fw-root) :-moz-ui-invalid {
166
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) :-moz-ui-invalid {
154
167
  box-shadow: none;
155
168
  }
156
169
 
157
- :where(.fw-root) progress {
170
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) progress {
158
171
  vertical-align: baseline;
159
172
  }
160
173
 
161
- :where(.fw-root) ::-webkit-inner-spin-button,
162
- :where(.fw-root) ::-webkit-outer-spin-button {
174
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) ::-webkit-inner-spin-button,
175
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) ::-webkit-outer-spin-button {
163
176
  height: auto;
164
177
  }
165
178
 
166
- :where(.fw-root) [type='search'] {
179
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) [type='search'] {
167
180
  -webkit-appearance: textfield;
168
181
  outline-offset: -2px;
169
182
  }
170
183
 
171
- :where(.fw-root) ::-webkit-search-decoration {
184
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) ::-webkit-search-decoration {
172
185
  -webkit-appearance: none;
173
186
  }
174
187
 
175
- :where(.fw-root) ::-webkit-file-upload-button {
188
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) ::-webkit-file-upload-button {
176
189
  -webkit-appearance: button;
177
190
  font: inherit;
178
191
  }
179
192
 
180
- :where(.fw-root) summary {
193
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) summary {
181
194
  display: list-item;
182
195
  }
183
196
 
184
197
  /* 8 ── Tables ────────────────────────────────────────────────────────────────
185
198
  Bootstrap adds border-spacing and td borders; collapse restores clean table. */
186
- :where(.fw-root) table {
199
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) table {
187
200
  text-indent: 0;
188
201
  border-color: inherit;
189
202
  border-collapse: collapse;
190
203
  }
191
204
 
192
205
  /* 9 ── Typography ──────────────────────────────────────────────────────────── */
193
- :where(.fw-root) b,
194
- :where(.fw-root) strong {
206
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) b,
207
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) strong {
195
208
  font-weight: bolder;
196
209
  }
197
210
 
198
- :where(.fw-root) code,
199
- :where(.fw-root) kbd,
200
- :where(.fw-root) samp,
201
- :where(.fw-root) pre {
211
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) code,
212
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) kbd,
213
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) samp,
214
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) pre {
202
215
  font-size: 1em;
203
216
  }
204
217
 
205
- :where(.fw-root) small {
218
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) small {
206
219
  font-size: 80%;
207
220
  }
208
221
 
209
- :where(.fw-root) sub,
210
- :where(.fw-root) sup {
222
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) sub,
223
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) sup {
211
224
  font-size: 75%;
212
225
  line-height: 0;
213
226
  position: relative;
214
227
  vertical-align: baseline;
215
228
  }
216
229
 
217
- :where(.fw-root) sub { bottom: -0.25em; }
218
- :where(.fw-root) sup { top: -0.5em; }
230
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) sub { bottom: -0.25em; }
231
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) sup { top: -0.5em; }
219
232
 
220
233
  /* 10 ── Media ────────────────────────────────────────────────────────────────
221
234
  Bootstrap sets `svg { overflow:hidden; vertical-align:middle }` which is
222
235
  inline, leaving white-space gaps. Tailwind preflight uses display:block. */
223
- :where(.fw-root) img,
224
- :where(.fw-root) svg,
225
- :where(.fw-root) video,
226
- :where(.fw-root) canvas,
227
- :where(.fw-root) audio,
228
- :where(.fw-root) iframe,
229
- :where(.fw-root) embed,
230
- :where(.fw-root) object {
236
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) img,
237
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) svg,
238
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) video,
239
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) canvas,
240
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) audio,
241
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) iframe,
242
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) embed,
243
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) object {
231
244
  display: block;
232
245
  vertical-align: middle;
233
246
  }
234
247
 
235
- :where(.fw-root) img,
236
- :where(.fw-root) video {
248
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) img,
249
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) video {
237
250
  max-width: 100%;
238
251
  height: auto;
239
252
  }
240
253
 
241
254
  /* 11 ── Misc ──────────────────────────────────────────────────────────────── */
242
- :where(.fw-root) textarea {
255
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) textarea {
243
256
  resize: vertical;
244
257
  }
245
258
 
246
- :where(.fw-root) input::placeholder,
247
- :where(.fw-root) textarea::placeholder {
259
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) input::placeholder,
260
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) textarea::placeholder {
248
261
  opacity: 1;
249
262
  color: #9ca3af;
250
263
  }
251
264
 
252
- :where(.fw-root) button,
253
- :where(.fw-root) [role='button'] {
265
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) button,
266
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) [role='button'] {
254
267
  cursor: pointer;
255
268
  }
256
269
 
257
- :where(.fw-root) :disabled {
270
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) :disabled {
258
271
  cursor: default;
259
272
  }
260
273
 
261
- :where(.fw-root) [hidden]:not([hidden='until-found']) {
274
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) [hidden]:not([hidden='until-found']) {
262
275
  display: none;
263
276
  }
264
277
 
@@ -284,7 +297,7 @@
284
297
  portals (Dialog, Popover, Tooltip, DropdownMenu, Select) — those mount
285
298
  under `<body>` outside `.fw-root`, so a scope-only rule would miss them.
286
299
  `.fw-base` travels with every FW-rendered native element. */
287
- :where(.fw-root) :is(
300
+ :where(.fw-root, [data-radix-popper-content-wrapper], [role="dialog"][data-state]) :is(
288
301
  button, [role="button"], a, input, select, textarea, [tabindex], summary
289
302
  ):focus,
290
303
  .fw-base:focus {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@freightos/freightwind",
3
- "version": "2.1.3-host-isolation.0",
3
+ "version": "2.1.3-host-isolation.1",
4
4
  "private": false,
5
5
  "description": "FreightWind Design System — icons, constants, and utilities for Freightos applications",
6
6
  "main": "./dist/cjs/index.js",