@lapismd/design-core 0.3.0 → 0.3.2

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 (27) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/shared/ai/composer-input/ComposerInput.svelte +5 -1
  3. package/dist/shared/ai/experimental/emoji-picker/EmojiPicker.svelte +9 -0
  4. package/dist/shared/forms/dialog-frame/DialogFrameExample.svelte +7 -0
  5. package/dist/shared/shadcn/scroll-area/ScrollAreaStyledLifecycleFixture.svelte +38 -0
  6. package/dist/shared/shadcn/scroll-area/ScrollAreaStyledLifecycleFixture.svelte.d.ts +6 -0
  7. package/dist/shared/shadcn/tabs/tabs.svelte +104 -32
  8. package/dist/shared/shell/app-shell/app-shell-teleport.js +1 -0
  9. package/dist/shared/workspace/stacked-tabs/WorkspaceStackedTabs.css +8 -0
  10. package/dist/shared/workspace/tabs/WorkspaceTabs.css +8 -0
  11. package/dist/shared/workspace/workspace.tokens.css +2 -1
  12. package/dist/shared/workspace/workspace.tokens.d.ts +1 -0
  13. package/dist/shared/workspace/workspace.tokens.js +3 -1
  14. package/dist/themes/lapis.css +1 -1
  15. package/package.json +2 -2
  16. package/spec/src/styling-and-themes.md +5 -0
  17. package/src/shared/ai/composer-input/ComposerInput.svelte +5 -1
  18. package/src/shared/ai/experimental/emoji-picker/EmojiPicker.svelte +9 -0
  19. package/src/shared/forms/dialog-frame/DialogFrameExample.svelte +7 -0
  20. package/src/shared/shadcn/scroll-area/ScrollAreaStyledLifecycleFixture.svelte +38 -0
  21. package/src/shared/shadcn/tabs/tabs.svelte +104 -32
  22. package/src/shared/shell/app-shell/app-shell-teleport.ts +1 -0
  23. package/src/shared/workspace/stacked-tabs/WorkspaceStackedTabs.css +8 -0
  24. package/src/shared/workspace/tabs/WorkspaceTabs.css +8 -0
  25. package/src/shared/workspace/workspace.tokens.css +2 -1
  26. package/src/shared/workspace/workspace.tokens.ts +4 -1
  27. package/src/themes/lapis.css +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @lapismd/design-core
2
2
 
3
+ ## 0.3.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#17](https://github.com/lapismd/design-core/pull/17) [`54e7bac`](https://github.com/lapismd/design-core/commit/54e7bacf1261bb5450bbb16a72c367d74eb86674) Thanks [@stevejuma](https://github.com/stevejuma)! - Use bold section headings in Lapis workspace settings and allow hosts to reserve the full native window-controls inset when a tab group is maximized.
8
+
9
+ - [#17](https://github.com/lapismd/design-core/pull/17) [`fd6bd54`](https://github.com/lapismd/design-core/commit/fd6bd54b9357f4358d8858b20b0ce771c5cce6f4) Thanks [@stevejuma](https://github.com/stevejuma)! - Align line-tab selection indicators with the divider and remove teleported mobile sidebar content when its owning shell is destroyed.
10
+
11
+ The dev catalog and browser runner share explicit runtime/icon prebundling.
12
+ Pointer suites wait for the client compiler to prepare shared entries before
13
+ starting their existing interaction readiness clocks.
14
+ Workspace pointer acceptance runs serially, matching the catalog's existing
15
+ lifecycle policy and other pointer lanes, so concurrent cold compilation cannot
16
+ starve a second scenario's unchanged readiness deadline.
17
+
18
+ ## 0.3.1
19
+
20
+ ### Patch Changes
21
+
22
+ - [#16](https://github.com/lapismd/design-core/pull/16) [`f94fb98`](https://github.com/lapismd/design-core/commit/f94fb9852f6c3e54ea57f89c2f185b6f00c68e35) Thanks [@stevejuma](https://github.com/stevejuma)! - Release the Composer Input handle correctly through reactive consumer bindings during teardown while preserving replacement handles. Keep Svelte runtime diagnostics fatal even when component cleanup catches the immediate error.
23
+
24
+ - [#13](https://github.com/lapismd/design-core/pull/13) [`5f533e6`](https://github.com/lapismd/design-core/commit/5f533e656601015b5a5dd3a680f5e97fd13cd1d2) Thanks [@stevejuma](https://github.com/stevejuma)! - Preserve emoji-grid keyboard focus when delayed popover opening frames complete.
25
+
26
+ - [#15](https://github.com/lapismd/design-core/pull/15) [`02756cb`](https://github.com/lapismd/design-core/commit/02756cb32a5405db45cb47cae9e28d448d20651f) Thanks [@stevejuma](https://github.com/stevejuma)! - Require Bits UI 2.19.5 to prevent Scroll Area resize callbacks and text-selection pointer handlers from reading destroyed Svelte state. Make Svelte runtime diagnostics fatal in Storybook tests and preserve the editing Dialog Frame example's initial field focus.
27
+
3
28
  ## 0.3.0
4
29
 
5
30
  ### Minor Changes
package/dist/shared/ai/composer-input/ComposerInput.svelte CHANGED
@@ -5,6 +5,7 @@
5
5
  <script lang="ts">
6
6
  import * as Command from "@lapismd/design-core/shadcn/command";
7
7
  import type { HTMLAttributes } from "svelte/elements";
8
+ import { untrack } from "svelte";
8
9
  import {
9
10
  createComposerTokens,
10
11
  createPasteAsToken,
@@ -149,12 +150,15 @@
149
150
 
150
151
  $effect(() => {
151
152
  handle = inputHandle;
153
+ // A consumer's binding may proxy the plain handle. Retain the identity
154
+ // returned by that binding without making it an effect dependency.
155
+ const assignedHandle = untrack(() => handle);
152
156
  context?.setInputHandle(inputHandle);
153
157
  return () => {
154
158
  triggerSearch.cancel();
155
159
  tokens.cleanup();
156
160
  context?.setInputHandle(null);
157
- if (handle === inputHandle) handle = null;
161
+ if (handle === assignedHandle) handle = null;
158
162
  };
159
163
  });
160
164
 
package/dist/shared/ai/experimental/emoji-picker/EmojiPicker.svelte CHANGED
@@ -55,6 +55,7 @@
55
55
  } = $props();
56
56
 
57
57
  let query = $state("");
58
+ let searchRef = $state<HTMLInputElement | null>(null);
58
59
  let gridRef = $state<HTMLDivElement | null>(null);
59
60
 
60
61
  const visible = $derived.by(() => {
@@ -77,6 +78,12 @@
77
78
  setOpen(false);
78
79
  }
79
80
 
81
+ function focusSearchOnOpen(event: Event): void {
82
+ // Own initial focus so a deferred popover callback cannot undo navigation.
83
+ event.preventDefault();
84
+ searchRef?.focus();
85
+ }
86
+
80
87
  function gridButtons(): HTMLButtonElement[] {
81
88
  const root = gridRef ?? ref;
82
89
  return Array.from(
@@ -155,9 +162,11 @@
155
162
  align="start"
156
163
  aria-label={label}
157
164
  data-ai-chat-part="emoji-content"
165
+ onOpenAutoFocus={focusSearchOnOpen}
158
166
  >
159
167
  <div bind:this={ref} {...restProps} data-ui-part="emoji-panel">
160
168
  <Input
169
+ bind:ref={searchRef}
161
170
  bind:value={query}
162
171
  aria-label={searchLabel}
163
172
  placeholder={searchLabel}
package/dist/shared/forms/dialog-frame/DialogFrameExample.svelte CHANGED
@@ -5,6 +5,7 @@
5
5
  import { Input } from "@lapismd/design-core/shadcn/input";
6
6
  let open = $state(false);
7
7
  let name = $state("");
8
+ let firstField = $state<HTMLInputElement | null>(null);
8
9
  </script>
9
10
 
10
11
  <Dialog.Root bind:open>
@@ -20,6 +21,11 @@
20
21
  size="large"
21
22
  surface="inset"
22
23
  class={name ? "record-filled" : "record-empty"}
24
+ onOpenAutoFocus={(event) => {
25
+ if (!firstField) return;
26
+ firstField.focus();
27
+ event.preventDefault();
28
+ }}
23
29
  >
24
30
  {#snippet sidebar()}<nav aria-label="Sections">
25
31
  <Button variant="secondary">Details</Button>
@@ -27,6 +33,7 @@
27
33
  {#each Array.from({ length: 24 }) as _, index}<label
28
34
  style="display: grid; gap: 0.5rem; margin-block: 1rem;"
29
35
  >Field {index + 1}{#if index === 0}<Input
36
+ bind:ref={firstField}
30
37
  bind:value={name}
31
38
  />{:else}<Input />{/if}</label
32
39
  >{/each}
package/dist/shared/shadcn/scroll-area/ScrollAreaStyledLifecycleFixture.svelte ADDED
@@ -0,0 +1,38 @@
1
+ <script lang="ts">
2
+ import { Button } from "../button/index.js";
3
+ import { ScrollArea } from "./index.js";
4
+
5
+ let { type = "always" }: { type?: "always" | "auto" } = $props();
6
+ let mounted = $state(false);
7
+ let clicks = $state(0);
8
+ </script>
9
+
10
+ <Button onclick={() => (mounted = !mounted)}>Toggle styled viewport</Button>
11
+ <Button onclick={() => clicks++}>Remaining control</Button>
12
+ <p role="status">Remaining clicks: {clicks}</p>
13
+ {#if mounted}
14
+ <ScrollArea
15
+ aria-label="Styled lifecycle"
16
+ {type}
17
+ orientation="both"
18
+ scrollStrategy="styled"
19
+ class="styled-lifecycle-area"
20
+ >
21
+ <div class="styled-lifecycle-content">
22
+ {#each Array.from({ length: 40 }) as _, index}
23
+ <p>Entry {index + 1}</p>
24
+ {/each}
25
+ </div>
26
+ </ScrollArea>
27
+ {/if}
28
+
29
+ <style>
30
+ :global(.styled-lifecycle-area) {
31
+ height: 10rem;
32
+ width: 16rem;
33
+ }
34
+
35
+ .styled-lifecycle-content {
36
+ width: 30rem;
37
+ }
38
+ </style>
package/dist/shared/shadcn/scroll-area/ScrollAreaStyledLifecycleFixture.svelte.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ type $$ComponentProps = {
2
+ type?: "always" | "auto";
3
+ };
4
+ declare const ScrollAreaStyledLifecycleFixture: import("svelte").Component<$$ComponentProps, {}, "">;
5
+ type ScrollAreaStyledLifecycleFixture = ReturnType<typeof ScrollAreaStyledLifecycleFixture>;
6
+ export default ScrollAreaStyledLifecycleFixture;
package/dist/shared/shadcn/tabs/tabs.svelte CHANGED
@@ -130,7 +130,10 @@
130
130
  outline-style: none;
131
131
  }
132
132
  [data-ui-component="tabs"][data-ui-part="tabs-list"]:is(
133
- :where(.group\/tabs)[data-orientation="vertical"] *
133
+ :where(
134
+ [data-ui-component="tabs"][data-ui-part="tabs"]
135
+ )[data-orientation="vertical"]
136
+ *
134
137
  ),
135
138
  .group-data-\[orientation\=vertical\]\/tabs\:h-fit:is(
136
139
  :where(
@@ -141,7 +144,10 @@
141
144
  height: fit-content;
142
145
  }
143
146
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
144
- :where(.group\/tabs)[data-orientation="vertical"] *
147
+ :where(
148
+ [data-ui-component="tabs"][data-ui-part="tabs"]
149
+ )[data-orientation="vertical"]
150
+ *
145
151
  ),
146
152
  .group-data-\[orientation\=vertical\]\/tabs\:w-full:is(
147
153
  :where(
@@ -152,7 +158,10 @@
152
158
  width: 100%;
153
159
  }
154
160
  [data-ui-component="tabs"][data-ui-part="tabs-list"]:is(
155
- :where(.group\/tabs)[data-orientation="vertical"] *
161
+ :where(
162
+ [data-ui-component="tabs"][data-ui-part="tabs"]
163
+ )[data-orientation="vertical"]
164
+ *
156
165
  ),
157
166
  .group-data-\[orientation\=vertical\]\/tabs\:flex-col:is(
158
167
  :where(
@@ -163,7 +172,10 @@
163
172
  flex-direction: column;
164
173
  }
165
174
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
166
- :where(.group\/tabs)[data-orientation="vertical"] *
175
+ :where(
176
+ [data-ui-component="tabs"][data-ui-part="tabs"]
177
+ )[data-orientation="vertical"]
178
+ *
167
179
  ),
168
180
  .group-data-\[orientation\=vertical\]\/tabs\:justify-start:is(
169
181
  :where(
@@ -174,7 +186,10 @@
174
186
  justify-content: flex-start;
175
187
  }
176
188
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
177
- :where(.group\/tabs-list)[data-variant="line"] *
189
+ :where(
190
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
191
+ )[data-variant="line"]
192
+ *
178
193
  ),
179
194
  .group-data-\[variant\=line\]\/tabs-list\:bg-transparent:is(
180
195
  :where(
@@ -185,7 +200,10 @@
185
200
  background-color: #0000;
186
201
  }
187
202
  [data-ui-component="tabs"][data-ui-part="tabs-list"]:is(
188
- :where(.group\/tabs):where([data-orientation="horizontal"]) *
203
+ :where([data-ui-component="tabs"][data-ui-part="tabs"]):where(
204
+ [data-orientation="horizontal"]
205
+ )
206
+ *
189
207
  ),
190
208
  .group-data-horizontal\/tabs\:h-9:is(
191
209
  :where([data-ui-component="tabs"][data-ui-part="tabs"]):where(
@@ -220,7 +238,10 @@
220
238
  );
221
239
  }
222
240
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
223
- :where(.group\/tabs)[data-orientation="horizontal"] *
241
+ :where(
242
+ [data-ui-component="tabs"][data-ui-part="tabs"]
243
+ )[data-orientation="horizontal"]
244
+ *
224
245
  ):after,
225
246
  .group-data-\[orientation\=horizontal\]\/tabs\:after\:inset-x-0:is(
226
247
  :where(
@@ -232,7 +253,10 @@
232
253
  inset-inline: 0;
233
254
  }
234
255
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
235
- :where(.group\/tabs)[data-orientation="horizontal"] *
256
+ :where(
257
+ [data-ui-component="tabs"][data-ui-part="tabs"]
258
+ )[data-orientation="horizontal"]
259
+ *
236
260
  ):after,
237
261
  .group-data-\[orientation\=horizontal\]\/tabs\:after\:bottom-\[-5px\]:is(
238
262
  :where(
@@ -244,7 +268,10 @@
244
268
  bottom: -5px;
245
269
  }
246
270
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
247
- :where(.group\/tabs)[data-orientation="horizontal"] *
271
+ :where(
272
+ [data-ui-component="tabs"][data-ui-part="tabs"]
273
+ )[data-orientation="horizontal"]
274
+ *
248
275
  ):after,
249
276
  .group-data-\[orientation\=horizontal\]\/tabs\:after\:h-0\.5:is(
250
277
  :where(
@@ -256,7 +283,10 @@
256
283
  height: calc(var(--spacing) * 0.5);
257
284
  }
258
285
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
259
- :where(.group\/tabs)[data-orientation="vertical"] *
286
+ :where(
287
+ [data-ui-component="tabs"][data-ui-part="tabs"]
288
+ )[data-orientation="vertical"]
289
+ *
260
290
  ):after,
261
291
  .group-data-\[orientation\=vertical\]\/tabs\:after\:inset-y-0:is(
262
292
  :where(
@@ -268,7 +298,10 @@
268
298
  inset-block: 0;
269
299
  }
270
300
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
271
- :where(.group\/tabs)[data-orientation="vertical"] *
301
+ :where(
302
+ [data-ui-component="tabs"][data-ui-part="tabs"]
303
+ )[data-orientation="vertical"]
304
+ *
272
305
  ):after,
273
306
  .group-data-\[orientation\=vertical\]\/tabs\:after\:-right-1:is(
274
307
  :where(
@@ -280,7 +313,10 @@
280
313
  right: calc(var(--spacing) * -1);
281
314
  }
282
315
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
283
- :where(.group\/tabs)[data-orientation="vertical"] *
316
+ :where(
317
+ [data-ui-component="tabs"][data-ui-part="tabs"]
318
+ )[data-orientation="vertical"]
319
+ *
284
320
  ):after,
285
321
  .group-data-\[orientation\=vertical\]\/tabs\:after\:w-0\.5:is(
286
322
  :where(
@@ -376,7 +412,10 @@
376
412
  color: var(--ui-tabs-foreground, var(--foreground));
377
413
  }
378
414
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
379
- :where(.group\/tabs-list)[data-variant="default"] *
415
+ :where(
416
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
417
+ )[data-variant="default"]
418
+ *
380
419
  ):where([data-state="active"]),
381
420
  .group-data-\[variant\=default\]\/tabs-list\:data-active\:shadow-sm:is(
382
421
  :where(
@@ -385,7 +424,10 @@
385
424
  *
386
425
  ):where([data-state="active"]),
387
426
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
388
- :where(.group\/tabs-list)[data-variant="default"] *
427
+ :where(
428
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
429
+ )[data-variant="default"]
430
+ *
389
431
  ):where([data-active]:not([data-active="false"])),
390
432
  .group-data-\[variant\=default\]\/tabs-list\:data-active\:shadow-sm:is(
391
433
  :where(
@@ -399,7 +441,10 @@
399
441
  var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
400
442
  }
401
443
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
402
- :where(.group\/tabs-list)[data-variant="line"] *
444
+ :where(
445
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
446
+ )[data-variant="line"]
447
+ *
403
448
  ):where([data-state="active"]),
404
449
  .group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent:is(
405
450
  :where(
@@ -408,7 +453,10 @@
408
453
  *
409
454
  ):where([data-state="active"]),
410
455
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
411
- :where(.group\/tabs-list)[data-variant="line"] *
456
+ :where(
457
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
458
+ )[data-variant="line"]
459
+ *
412
460
  ):where([data-active]:not([data-active="false"])),
413
461
  .group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent:is(
414
462
  :where(
@@ -419,7 +467,10 @@
419
467
  background-color: #0000;
420
468
  }
421
469
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
422
- :where(.group\/tabs-list)[data-variant="line"] *
470
+ :where(
471
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
472
+ )[data-variant="line"]
473
+ *
423
474
  ):where([data-state="active"]),
424
475
  .group-data-\[variant\=line\]\/tabs-list\:data-active\:shadow-none:is(
425
476
  :where(
@@ -428,7 +479,10 @@
428
479
  *
429
480
  ):where([data-state="active"]),
430
481
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
431
- :where(.group\/tabs-list)[data-variant="line"] *
482
+ :where(
483
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
484
+ )[data-variant="line"]
485
+ *
432
486
  ):where([data-active]:not([data-active="false"])),
433
487
  .group-data-\[variant\=line\]\/tabs-list\:data-active\:shadow-none:is(
434
488
  :where(
@@ -442,10 +496,16 @@
442
496
  }
443
497
  :is(
444
498
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
445
- :where(.group\/tabs-list)[data-variant="line"] *
499
+ :where(
500
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
501
+ )[data-variant="line"]
502
+ *
446
503
  ):where([data-state="active"]),
447
504
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
448
- :where(.group\/tabs-list)[data-variant="line"] *
505
+ :where(
506
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
507
+ )[data-variant="line"]
508
+ *
449
509
  ):where([data-active]:not([data-active="false"]))
450
510
  ):after,
451
511
  :is(
@@ -501,9 +561,12 @@
501
561
  }
502
562
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
503
563
  :global(.dark) *
504
- ):is(:where(.group\/tabs-list)[data-variant="line"] *):where(
505
- [data-state="active"]
506
- ),
564
+ ):is(
565
+ :where(
566
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
567
+ )[data-variant="line"]
568
+ *
569
+ ):where([data-state="active"]),
507
570
  .dark\:group-data-\[variant\=line\]\/tabs-list\:data-active\:border-transparent:is(
508
571
  :global(.dark) *
509
572
  ):is(
@@ -514,9 +577,12 @@
514
577
  ):where([data-state="active"]),
515
578
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
516
579
  :global(.dark) *
517
- ):is(:where(.group\/tabs-list)[data-variant="line"] *):where(
518
- [data-active]:not([data-active="false"])
519
- ),
580
+ ):is(
581
+ :where(
582
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
583
+ )[data-variant="line"]
584
+ *
585
+ ):where([data-active]:not([data-active="false"])),
520
586
  .dark\:group-data-\[variant\=line\]\/tabs-list\:data-active\:border-transparent:is(
521
587
  :global(.dark) *
522
588
  ):is(
@@ -529,9 +595,12 @@
529
595
  }
530
596
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
531
597
  :global(.dark) *
532
- ):is(:where(.group\/tabs-list)[data-variant="line"] *):where(
533
- [data-state="active"]
534
- ),
598
+ ):is(
599
+ :where(
600
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
601
+ )[data-variant="line"]
602
+ *
603
+ ):where([data-state="active"]),
535
604
  .dark\:group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent:is(
536
605
  :global(.dark) *
537
606
  ):is(
@@ -542,9 +611,12 @@
542
611
  ):where([data-state="active"]),
543
612
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
544
613
  :global(.dark) *
545
- ):is(:where(.group\/tabs-list)[data-variant="line"] *):where(
546
- [data-active]:not([data-active="false"])
547
- ),
614
+ ):is(
615
+ :where(
616
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
617
+ )[data-variant="line"]
618
+ *
619
+ ):where([data-active]:not([data-active="false"])),
548
620
  .dark\:group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent:is(
549
621
  :global(.dark) *
550
622
  ):is(
package/dist/shared/shell/app-shell/app-shell-teleport.js CHANGED
@@ -18,6 +18,7 @@ export function appShellTeleport(node, options) {
18
18
  return {
19
19
  update,
20
20
  destroy() {
21
+ node.remove();
21
22
  anchor.remove();
22
23
  },
23
24
  };
package/dist/shared/workspace/stacked-tabs/WorkspaceStackedTabs.css CHANGED
@@ -38,6 +38,14 @@
38
38
  padding-inline-start: var(--ui-workspace-window-controls-inline-start, 0px);
39
39
  }
40
40
 
41
+ .ui-workspace-stacked-tabs[data-workspace-focus-mode="true"]
42
+ > .ui-workspace-stacked-tabs__chrome {
43
+ padding-inline-start: var(
44
+ --ui-workspace-window-controls-overlay-inline-start,
45
+ 0px
46
+ );
47
+ }
48
+
41
49
  .ui-workspace-stacked-tabs__chrome-main {
42
50
  display: flex;
43
51
  min-width: 0;
package/dist/shared/workspace/tabs/WorkspaceTabs.css CHANGED
@@ -52,6 +52,14 @@
52
52
  );
53
53
  }
54
54
 
55
+ .ui-workspace-tabs[data-workspace-focus-mode="true"]
56
+ > .ui-workspace-tabs__header
57
+ > .ui-workspace-tabs__header-main {
58
+ padding-inline-start: calc(
59
+ 8px + var(--ui-workspace-window-controls-overlay-inline-start, 0px)
60
+ );
61
+ }
62
+
55
63
  .ui-workspace-tabs__left-toggle,
56
64
  .ui-workspace-tabs__right-toggle,
57
65
  .ui-workspace-tabs__overflow {
package/dist/shared/workspace/workspace.tokens.css CHANGED
@@ -57,6 +57,7 @@
57
57
  --ui-workspace-radius-medium: calc(var(--radius, 0.625rem) * 0.8);
58
58
  --ui-workspace-radius-large: var(--radius, 0.625rem);
59
59
  --ui-workspace-shadow: 0 12px 32px rgb(15 23 42 / 24%);
60
+ --ui-workspace-window-controls-overlay-inline-start: 0px;
60
61
  --ui-workspace-tab-height: 2.5rem;
61
62
  --ui-workspace-tab-active-height: 2.25rem;
62
63
  --ui-workspace-tab-width: 12.5rem;
@@ -87,7 +88,7 @@
87
88
  --ui-workspace-ribbon-width: 3rem;
88
89
  --ui-workspace-status-height: 1.5rem;
89
90
  --ui-workspace-settings-heading-size: 1rem;
90
- --ui-workspace-settings-heading-weight: 400;
91
+ --ui-workspace-settings-heading-weight: 700;
91
92
  --ui-workspace-settings-label-size: 0.9375rem;
92
93
  --ui-workspace-settings-description-size: 0.75rem;
93
94
  --ui-workspace-settings-navigation-row-height: 2rem;
package/dist/shared/workspace/workspace.tokens.d.ts CHANGED
@@ -39,6 +39,7 @@ export declare const workspaceTokenNames: {
39
39
  readonly radiusMedium: "--ui-workspace-radius-medium";
40
40
  readonly radiusLarge: "--ui-workspace-radius-large";
41
41
  readonly shadow: "--ui-workspace-shadow";
42
+ readonly windowControlsOverlayInlineStart: "--ui-workspace-window-controls-overlay-inline-start";
42
43
  readonly tabHeight: "--ui-workspace-tab-height";
43
44
  readonly tabActiveHeight: "--ui-workspace-tab-active-height";
44
45
  readonly tabWidth: "--ui-workspace-tab-width";
package/dist/shared/workspace/workspace.tokens.js CHANGED
@@ -39,6 +39,7 @@ export const workspaceTokenNames = {
39
39
  radiusMedium: "--ui-workspace-radius-medium",
40
40
  radiusLarge: "--ui-workspace-radius-large",
41
41
  shadow: "--ui-workspace-shadow",
42
+ windowControlsOverlayInlineStart: "--ui-workspace-window-controls-overlay-inline-start",
42
43
  tabHeight: "--ui-workspace-tab-height",
43
44
  tabActiveHeight: "--ui-workspace-tab-active-height",
44
45
  tabWidth: "--ui-workspace-tab-width",
@@ -139,6 +140,7 @@ export const workspaceTokenDefaults = {
139
140
  radiusMedium: "calc(var(--radius, 0.625rem) * 0.8)",
140
141
  radiusLarge: "var(--radius, 0.625rem)",
141
142
  shadow: "0 12px 32px rgb(15 23 42 / 24%)",
143
+ windowControlsOverlayInlineStart: "0px",
142
144
  tabHeight: "2.5rem",
143
145
  tabActiveHeight: "2.25rem",
144
146
  tabWidth: "12.5rem",
@@ -157,7 +159,7 @@ export const workspaceTokenDefaults = {
157
159
  ribbonWidth: "3rem",
158
160
  statusHeight: "1.5rem",
159
161
  settingsHeadingSize: "1rem",
160
- settingsHeadingWeight: "400",
162
+ settingsHeadingWeight: "700",
161
163
  settingsLabelSize: "0.9375rem",
162
164
  settingsDescriptionSize: "0.75rem",
163
165
  settingsNavigationRowHeight: "2rem",
package/dist/themes/lapis.css CHANGED
@@ -124,7 +124,7 @@
124
124
  --ui-workspace-ribbon-width: 49px;
125
125
  --ui-workspace-status-height: 24px;
126
126
  --ui-workspace-settings-heading-size: 16px;
127
- --ui-workspace-settings-heading-weight: 400;
127
+ --ui-workspace-settings-heading-weight: 700;
128
128
  --ui-workspace-settings-label-size: 15px;
129
129
  --ui-workspace-settings-description-size: 12px;
130
130
  --ui-workspace-settings-navigation-row-height: 32px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lapismd/design-core",
3
- "version": "0.3.0",
3
+ "version": "0.3.2",
4
4
  "description": "Shared Lapis design system, forms, shell, and workspace primitives",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -58,7 +58,7 @@
58
58
  "@lucide/svelte": "^1.21.0",
59
59
  "@tanstack/svelte-virtual": "^3.13.39",
60
60
  "@types/luxon": "^3.4.2",
61
- "bits-ui": "^2.18.1",
61
+ "bits-ui": "^2.19.5",
62
62
  "chrono-node": "^2.10.1",
63
63
  "clsx": "^2.1.1",
64
64
  "codemirror-lang-mermaid": "^0.5.0",
package/spec/src/styling-and-themes.md CHANGED
@@ -5,6 +5,11 @@ Design Core styling is native CSS driven by semantic tokens. Themes and consumer
5
5
  File Listing exposes `--ui-diff-file-listing-row-gap` (default `2px`) for
6
6
  separation between eager and virtualized rows.
7
7
 
8
+ Settings headings default to bold 700 in both workspace tokens and the Lapis
9
+ theme while retaining the shared sans family (DC-WS-069). Hosts supply full
10
+ window-control clearance through `--ui-workspace-window-controls-overlay-inline-start`
11
+ for maximized groups (DC-WS-070); ordinary chrome retains its ribbon-adjusted inset.
12
+
8
13
  Panel Toggle exposes compact button/icon geometry and reversible motion through
9
14
  `--ui-panel-toggle-*` tokens imported by the shared stylesheet. Its icon inherits
10
15
  currentColor, reduced-motion preferences and Button focus semantics.
package/src/shared/ai/composer-input/ComposerInput.svelte CHANGED
@@ -5,6 +5,7 @@
5
5
  <script lang="ts">
6
6
  import * as Command from "@lapismd/design-core/shadcn/command";
7
7
  import type { HTMLAttributes } from "svelte/elements";
8
+ import { untrack } from "svelte";
8
9
  import {
9
10
  createComposerTokens,
10
11
  createPasteAsToken,
@@ -149,12 +150,15 @@
149
150
 
150
151
  $effect(() => {
151
152
  handle = inputHandle;
153
+ // A consumer's binding may proxy the plain handle. Retain the identity
154
+ // returned by that binding without making it an effect dependency.
155
+ const assignedHandle = untrack(() => handle);
152
156
  context?.setInputHandle(inputHandle);
153
157
  return () => {
154
158
  triggerSearch.cancel();
155
159
  tokens.cleanup();
156
160
  context?.setInputHandle(null);
157
- if (handle === inputHandle) handle = null;
161
+ if (handle === assignedHandle) handle = null;
158
162
  };
159
163
  });
160
164
 
package/src/shared/ai/experimental/emoji-picker/EmojiPicker.svelte CHANGED
@@ -55,6 +55,7 @@
55
55
  } = $props();
56
56
 
57
57
  let query = $state("");
58
+ let searchRef = $state<HTMLInputElement | null>(null);
58
59
  let gridRef = $state<HTMLDivElement | null>(null);
59
60
 
60
61
  const visible = $derived.by(() => {
@@ -77,6 +78,12 @@
77
78
  setOpen(false);
78
79
  }
79
80
 
81
+ function focusSearchOnOpen(event: Event): void {
82
+ // Own initial focus so a deferred popover callback cannot undo navigation.
83
+ event.preventDefault();
84
+ searchRef?.focus();
85
+ }
86
+
80
87
  function gridButtons(): HTMLButtonElement[] {
81
88
  const root = gridRef ?? ref;
82
89
  return Array.from(
@@ -155,9 +162,11 @@
155
162
  align="start"
156
163
  aria-label={label}
157
164
  data-ai-chat-part="emoji-content"
165
+ onOpenAutoFocus={focusSearchOnOpen}
158
166
  >
159
167
  <div bind:this={ref} {...restProps} data-ui-part="emoji-panel">
160
168
  <Input
169
+ bind:ref={searchRef}
161
170
  bind:value={query}
162
171
  aria-label={searchLabel}
163
172
  placeholder={searchLabel}
package/src/shared/forms/dialog-frame/DialogFrameExample.svelte CHANGED
@@ -5,6 +5,7 @@
5
5
  import { Input } from "@lapismd/design-core/shadcn/input";
6
6
  let open = $state(false);
7
7
  let name = $state("");
8
+ let firstField = $state<HTMLInputElement | null>(null);
8
9
  </script>
9
10
 
10
11
  <Dialog.Root bind:open>
@@ -20,6 +21,11 @@
20
21
  size="large"
21
22
  surface="inset"
22
23
  class={name ? "record-filled" : "record-empty"}
24
+ onOpenAutoFocus={(event) => {
25
+ if (!firstField) return;
26
+ firstField.focus();
27
+ event.preventDefault();
28
+ }}
23
29
  >
24
30
  {#snippet sidebar()}<nav aria-label="Sections">
25
31
  <Button variant="secondary">Details</Button>
@@ -27,6 +33,7 @@
27
33
  {#each Array.from({ length: 24 }) as _, index}<label
28
34
  style="display: grid; gap: 0.5rem; margin-block: 1rem;"
29
35
  >Field {index + 1}{#if index === 0}<Input
36
+ bind:ref={firstField}
30
37
  bind:value={name}
31
38
  />{:else}<Input />{/if}</label
32
39
  >{/each}
package/src/shared/shadcn/scroll-area/ScrollAreaStyledLifecycleFixture.svelte ADDED
@@ -0,0 +1,38 @@
1
+ <script lang="ts">
2
+ import { Button } from "../button/index.js";
3
+ import { ScrollArea } from "./index.js";
4
+
5
+ let { type = "always" }: { type?: "always" | "auto" } = $props();
6
+ let mounted = $state(false);
7
+ let clicks = $state(0);
8
+ </script>
9
+
10
+ <Button onclick={() => (mounted = !mounted)}>Toggle styled viewport</Button>
11
+ <Button onclick={() => clicks++}>Remaining control</Button>
12
+ <p role="status">Remaining clicks: {clicks}</p>
13
+ {#if mounted}
14
+ <ScrollArea
15
+ aria-label="Styled lifecycle"
16
+ {type}
17
+ orientation="both"
18
+ scrollStrategy="styled"
19
+ class="styled-lifecycle-area"
20
+ >
21
+ <div class="styled-lifecycle-content">
22
+ {#each Array.from({ length: 40 }) as _, index}
23
+ <p>Entry {index + 1}</p>
24
+ {/each}
25
+ </div>
26
+ </ScrollArea>
27
+ {/if}
28
+
29
+ <style>
30
+ :global(.styled-lifecycle-area) {
31
+ height: 10rem;
32
+ width: 16rem;
33
+ }
34
+
35
+ .styled-lifecycle-content {
36
+ width: 30rem;
37
+ }
38
+ </style>
package/src/shared/shadcn/tabs/tabs.svelte CHANGED
@@ -130,7 +130,10 @@
130
130
  outline-style: none;
131
131
  }
132
132
  [data-ui-component="tabs"][data-ui-part="tabs-list"]:is(
133
- :where(.group\/tabs)[data-orientation="vertical"] *
133
+ :where(
134
+ [data-ui-component="tabs"][data-ui-part="tabs"]
135
+ )[data-orientation="vertical"]
136
+ *
134
137
  ),
135
138
  .group-data-\[orientation\=vertical\]\/tabs\:h-fit:is(
136
139
  :where(
@@ -141,7 +144,10 @@
141
144
  height: fit-content;
142
145
  }
143
146
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
144
- :where(.group\/tabs)[data-orientation="vertical"] *
147
+ :where(
148
+ [data-ui-component="tabs"][data-ui-part="tabs"]
149
+ )[data-orientation="vertical"]
150
+ *
145
151
  ),
146
152
  .group-data-\[orientation\=vertical\]\/tabs\:w-full:is(
147
153
  :where(
@@ -152,7 +158,10 @@
152
158
  width: 100%;
153
159
  }
154
160
  [data-ui-component="tabs"][data-ui-part="tabs-list"]:is(
155
- :where(.group\/tabs)[data-orientation="vertical"] *
161
+ :where(
162
+ [data-ui-component="tabs"][data-ui-part="tabs"]
163
+ )[data-orientation="vertical"]
164
+ *
156
165
  ),
157
166
  .group-data-\[orientation\=vertical\]\/tabs\:flex-col:is(
158
167
  :where(
@@ -163,7 +172,10 @@
163
172
  flex-direction: column;
164
173
  }
165
174
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
166
- :where(.group\/tabs)[data-orientation="vertical"] *
175
+ :where(
176
+ [data-ui-component="tabs"][data-ui-part="tabs"]
177
+ )[data-orientation="vertical"]
178
+ *
167
179
  ),
168
180
  .group-data-\[orientation\=vertical\]\/tabs\:justify-start:is(
169
181
  :where(
@@ -174,7 +186,10 @@
174
186
  justify-content: flex-start;
175
187
  }
176
188
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
177
- :where(.group\/tabs-list)[data-variant="line"] *
189
+ :where(
190
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
191
+ )[data-variant="line"]
192
+ *
178
193
  ),
179
194
  .group-data-\[variant\=line\]\/tabs-list\:bg-transparent:is(
180
195
  :where(
@@ -185,7 +200,10 @@
185
200
  background-color: #0000;
186
201
  }
187
202
  [data-ui-component="tabs"][data-ui-part="tabs-list"]:is(
188
- :where(.group\/tabs):where([data-orientation="horizontal"]) *
203
+ :where([data-ui-component="tabs"][data-ui-part="tabs"]):where(
204
+ [data-orientation="horizontal"]
205
+ )
206
+ *
189
207
  ),
190
208
  .group-data-horizontal\/tabs\:h-9:is(
191
209
  :where([data-ui-component="tabs"][data-ui-part="tabs"]):where(
@@ -220,7 +238,10 @@
220
238
  );
221
239
  }
222
240
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
223
- :where(.group\/tabs)[data-orientation="horizontal"] *
241
+ :where(
242
+ [data-ui-component="tabs"][data-ui-part="tabs"]
243
+ )[data-orientation="horizontal"]
244
+ *
224
245
  ):after,
225
246
  .group-data-\[orientation\=horizontal\]\/tabs\:after\:inset-x-0:is(
226
247
  :where(
@@ -232,7 +253,10 @@
232
253
  inset-inline: 0;
233
254
  }
234
255
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
235
- :where(.group\/tabs)[data-orientation="horizontal"] *
256
+ :where(
257
+ [data-ui-component="tabs"][data-ui-part="tabs"]
258
+ )[data-orientation="horizontal"]
259
+ *
236
260
  ):after,
237
261
  .group-data-\[orientation\=horizontal\]\/tabs\:after\:bottom-\[-5px\]:is(
238
262
  :where(
@@ -244,7 +268,10 @@
244
268
  bottom: -5px;
245
269
  }
246
270
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
247
- :where(.group\/tabs)[data-orientation="horizontal"] *
271
+ :where(
272
+ [data-ui-component="tabs"][data-ui-part="tabs"]
273
+ )[data-orientation="horizontal"]
274
+ *
248
275
  ):after,
249
276
  .group-data-\[orientation\=horizontal\]\/tabs\:after\:h-0\.5:is(
250
277
  :where(
@@ -256,7 +283,10 @@
256
283
  height: calc(var(--spacing) * 0.5);
257
284
  }
258
285
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
259
- :where(.group\/tabs)[data-orientation="vertical"] *
286
+ :where(
287
+ [data-ui-component="tabs"][data-ui-part="tabs"]
288
+ )[data-orientation="vertical"]
289
+ *
260
290
  ):after,
261
291
  .group-data-\[orientation\=vertical\]\/tabs\:after\:inset-y-0:is(
262
292
  :where(
@@ -268,7 +298,10 @@
268
298
  inset-block: 0;
269
299
  }
270
300
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
271
- :where(.group\/tabs)[data-orientation="vertical"] *
301
+ :where(
302
+ [data-ui-component="tabs"][data-ui-part="tabs"]
303
+ )[data-orientation="vertical"]
304
+ *
272
305
  ):after,
273
306
  .group-data-\[orientation\=vertical\]\/tabs\:after\:-right-1:is(
274
307
  :where(
@@ -280,7 +313,10 @@
280
313
  right: calc(var(--spacing) * -1);
281
314
  }
282
315
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
283
- :where(.group\/tabs)[data-orientation="vertical"] *
316
+ :where(
317
+ [data-ui-component="tabs"][data-ui-part="tabs"]
318
+ )[data-orientation="vertical"]
319
+ *
284
320
  ):after,
285
321
  .group-data-\[orientation\=vertical\]\/tabs\:after\:w-0\.5:is(
286
322
  :where(
@@ -376,7 +412,10 @@
376
412
  color: var(--ui-tabs-foreground, var(--foreground));
377
413
  }
378
414
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
379
- :where(.group\/tabs-list)[data-variant="default"] *
415
+ :where(
416
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
417
+ )[data-variant="default"]
418
+ *
380
419
  ):where([data-state="active"]),
381
420
  .group-data-\[variant\=default\]\/tabs-list\:data-active\:shadow-sm:is(
382
421
  :where(
@@ -385,7 +424,10 @@
385
424
  *
386
425
  ):where([data-state="active"]),
387
426
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
388
- :where(.group\/tabs-list)[data-variant="default"] *
427
+ :where(
428
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
429
+ )[data-variant="default"]
430
+ *
389
431
  ):where([data-active]:not([data-active="false"])),
390
432
  .group-data-\[variant\=default\]\/tabs-list\:data-active\:shadow-sm:is(
391
433
  :where(
@@ -399,7 +441,10 @@
399
441
  var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
400
442
  }
401
443
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
402
- :where(.group\/tabs-list)[data-variant="line"] *
444
+ :where(
445
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
446
+ )[data-variant="line"]
447
+ *
403
448
  ):where([data-state="active"]),
404
449
  .group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent:is(
405
450
  :where(
@@ -408,7 +453,10 @@
408
453
  *
409
454
  ):where([data-state="active"]),
410
455
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
411
- :where(.group\/tabs-list)[data-variant="line"] *
456
+ :where(
457
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
458
+ )[data-variant="line"]
459
+ *
412
460
  ):where([data-active]:not([data-active="false"])),
413
461
  .group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent:is(
414
462
  :where(
@@ -419,7 +467,10 @@
419
467
  background-color: #0000;
420
468
  }
421
469
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
422
- :where(.group\/tabs-list)[data-variant="line"] *
470
+ :where(
471
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
472
+ )[data-variant="line"]
473
+ *
423
474
  ):where([data-state="active"]),
424
475
  .group-data-\[variant\=line\]\/tabs-list\:data-active\:shadow-none:is(
425
476
  :where(
@@ -428,7 +479,10 @@
428
479
  *
429
480
  ):where([data-state="active"]),
430
481
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
431
- :where(.group\/tabs-list)[data-variant="line"] *
482
+ :where(
483
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
484
+ )[data-variant="line"]
485
+ *
432
486
  ):where([data-active]:not([data-active="false"])),
433
487
  .group-data-\[variant\=line\]\/tabs-list\:data-active\:shadow-none:is(
434
488
  :where(
@@ -442,10 +496,16 @@
442
496
  }
443
497
  :is(
444
498
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
445
- :where(.group\/tabs-list)[data-variant="line"] *
499
+ :where(
500
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
501
+ )[data-variant="line"]
502
+ *
446
503
  ):where([data-state="active"]),
447
504
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
448
- :where(.group\/tabs-list)[data-variant="line"] *
505
+ :where(
506
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
507
+ )[data-variant="line"]
508
+ *
449
509
  ):where([data-active]:not([data-active="false"]))
450
510
  ):after,
451
511
  :is(
@@ -501,9 +561,12 @@
501
561
  }
502
562
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
503
563
  :global(.dark) *
504
- ):is(:where(.group\/tabs-list)[data-variant="line"] *):where(
505
- [data-state="active"]
506
- ),
564
+ ):is(
565
+ :where(
566
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
567
+ )[data-variant="line"]
568
+ *
569
+ ):where([data-state="active"]),
507
570
  .dark\:group-data-\[variant\=line\]\/tabs-list\:data-active\:border-transparent:is(
508
571
  :global(.dark) *
509
572
  ):is(
@@ -514,9 +577,12 @@
514
577
  ):where([data-state="active"]),
515
578
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
516
579
  :global(.dark) *
517
- ):is(:where(.group\/tabs-list)[data-variant="line"] *):where(
518
- [data-active]:not([data-active="false"])
519
- ),
580
+ ):is(
581
+ :where(
582
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
583
+ )[data-variant="line"]
584
+ *
585
+ ):where([data-active]:not([data-active="false"])),
520
586
  .dark\:group-data-\[variant\=line\]\/tabs-list\:data-active\:border-transparent:is(
521
587
  :global(.dark) *
522
588
  ):is(
@@ -529,9 +595,12 @@
529
595
  }
530
596
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
531
597
  :global(.dark) *
532
- ):is(:where(.group\/tabs-list)[data-variant="line"] *):where(
533
- [data-state="active"]
534
- ),
598
+ ):is(
599
+ :where(
600
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
601
+ )[data-variant="line"]
602
+ *
603
+ ):where([data-state="active"]),
535
604
  .dark\:group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent:is(
536
605
  :global(.dark) *
537
606
  ):is(
@@ -542,9 +611,12 @@
542
611
  ):where([data-state="active"]),
543
612
  [data-ui-component="tabs"][data-ui-part="tabs-trigger"]:is(
544
613
  :global(.dark) *
545
- ):is(:where(.group\/tabs-list)[data-variant="line"] *):where(
546
- [data-active]:not([data-active="false"])
547
- ),
614
+ ):is(
615
+ :where(
616
+ [data-ui-component="tabs"][data-ui-part="tabs-list"]
617
+ )[data-variant="line"]
618
+ *
619
+ ):where([data-active]:not([data-active="false"])),
548
620
  .dark\:group-data-\[variant\=line\]\/tabs-list\:data-active\:bg-transparent:is(
549
621
  :global(.dark) *
550
622
  ):is(
package/src/shared/shell/app-shell/app-shell-teleport.ts CHANGED
@@ -31,6 +31,7 @@ export function appShellTeleport(
31
31
  return {
32
32
  update,
33
33
  destroy() {
34
+ node.remove();
34
35
  anchor.remove();
35
36
  },
36
37
  };
package/src/shared/workspace/stacked-tabs/WorkspaceStackedTabs.css CHANGED
@@ -38,6 +38,14 @@
38
38
  padding-inline-start: var(--ui-workspace-window-controls-inline-start, 0px);
39
39
  }
40
40
 
41
+ .ui-workspace-stacked-tabs[data-workspace-focus-mode="true"]
42
+ > .ui-workspace-stacked-tabs__chrome {
43
+ padding-inline-start: var(
44
+ --ui-workspace-window-controls-overlay-inline-start,
45
+ 0px
46
+ );
47
+ }
48
+
41
49
  .ui-workspace-stacked-tabs__chrome-main {
42
50
  display: flex;
43
51
  min-width: 0;
package/src/shared/workspace/tabs/WorkspaceTabs.css CHANGED
@@ -52,6 +52,14 @@
52
52
  );
53
53
  }
54
54
 
55
+ .ui-workspace-tabs[data-workspace-focus-mode="true"]
56
+ > .ui-workspace-tabs__header
57
+ > .ui-workspace-tabs__header-main {
58
+ padding-inline-start: calc(
59
+ 8px + var(--ui-workspace-window-controls-overlay-inline-start, 0px)
60
+ );
61
+ }
62
+
55
63
  .ui-workspace-tabs__left-toggle,
56
64
  .ui-workspace-tabs__right-toggle,
57
65
  .ui-workspace-tabs__overflow {
package/src/shared/workspace/workspace.tokens.css CHANGED
@@ -57,6 +57,7 @@
57
57
  --ui-workspace-radius-medium: calc(var(--radius, 0.625rem) * 0.8);
58
58
  --ui-workspace-radius-large: var(--radius, 0.625rem);
59
59
  --ui-workspace-shadow: 0 12px 32px rgb(15 23 42 / 24%);
60
+ --ui-workspace-window-controls-overlay-inline-start: 0px;
60
61
  --ui-workspace-tab-height: 2.5rem;
61
62
  --ui-workspace-tab-active-height: 2.25rem;
62
63
  --ui-workspace-tab-width: 12.5rem;
@@ -87,7 +88,7 @@
87
88
  --ui-workspace-ribbon-width: 3rem;
88
89
  --ui-workspace-status-height: 1.5rem;
89
90
  --ui-workspace-settings-heading-size: 1rem;
90
- --ui-workspace-settings-heading-weight: 400;
91
+ --ui-workspace-settings-heading-weight: 700;
91
92
  --ui-workspace-settings-label-size: 0.9375rem;
92
93
  --ui-workspace-settings-description-size: 0.75rem;
93
94
  --ui-workspace-settings-navigation-row-height: 2rem;
package/src/shared/workspace/workspace.tokens.ts CHANGED
@@ -39,6 +39,8 @@ export const workspaceTokenNames = {
39
39
  radiusMedium: "--ui-workspace-radius-medium",
40
40
  radiusLarge: "--ui-workspace-radius-large",
41
41
  shadow: "--ui-workspace-shadow",
42
+ windowControlsOverlayInlineStart:
43
+ "--ui-workspace-window-controls-overlay-inline-start",
42
44
  tabHeight: "--ui-workspace-tab-height",
43
45
  tabActiveHeight: "--ui-workspace-tab-active-height",
44
46
  tabWidth: "--ui-workspace-tab-width",
@@ -149,6 +151,7 @@ export const workspaceTokenDefaults: Record<WorkspaceTokenKey, string> = {
149
151
  radiusMedium: "calc(var(--radius, 0.625rem) * 0.8)",
150
152
  radiusLarge: "var(--radius, 0.625rem)",
151
153
  shadow: "0 12px 32px rgb(15 23 42 / 24%)",
154
+ windowControlsOverlayInlineStart: "0px",
152
155
  tabHeight: "2.5rem",
153
156
  tabActiveHeight: "2.25rem",
154
157
  tabWidth: "12.5rem",
@@ -167,7 +170,7 @@ export const workspaceTokenDefaults: Record<WorkspaceTokenKey, string> = {
167
170
  ribbonWidth: "3rem",
168
171
  statusHeight: "1.5rem",
169
172
  settingsHeadingSize: "1rem",
170
- settingsHeadingWeight: "400",
173
+ settingsHeadingWeight: "700",
171
174
  settingsLabelSize: "0.9375rem",
172
175
  settingsDescriptionSize: "0.75rem",
173
176
  settingsNavigationRowHeight: "2rem",
package/src/themes/lapis.css CHANGED
@@ -124,7 +124,7 @@
124
124
  --ui-workspace-ribbon-width: 49px;
125
125
  --ui-workspace-status-height: 24px;
126
126
  --ui-workspace-settings-heading-size: 16px;
127
- --ui-workspace-settings-heading-weight: 400;
127
+ --ui-workspace-settings-heading-weight: 700;
128
128
  --ui-workspace-settings-label-size: 15px;
129
129
  --ui-workspace-settings-description-size: 12px;
130
130
  --ui-workspace-settings-navigation-row-height: 32px;