@salmexio/ui 0.3.0 → 0.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 (18) hide show
  1. package/dist/dialogs/ContextMenu/ContextMenu.svelte +4 -4
  2. package/dist/dialogs/Modal/Modal.svelte +23 -9
  3. package/dist/feedback/Alert/Alert.svelte +19 -19
  4. package/dist/feedback/Spinner/Spinner.svelte +4 -5
  5. package/dist/forms/Checkbox/Checkbox.svelte +12 -11
  6. package/dist/forms/Select/Select.svelte +16 -15
  7. package/dist/forms/TextInput/TextInput.svelte +18 -18
  8. package/dist/layout/Card/Card.svelte +7 -8
  9. package/dist/navigation/CommandPalette/CommandPalette.svelte +18 -7
  10. package/dist/navigation/Tabs/Tabs.svelte +40 -26
  11. package/dist/navigation/Tabs/Tabs.svelte.d.ts +6 -0
  12. package/dist/navigation/Tabs/Tabs.svelte.d.ts.map +1 -1
  13. package/dist/primitives/Badge/Badge.svelte +3 -4
  14. package/dist/primitives/Button/Button.svelte +53 -72
  15. package/dist/styles/tokens.css +31 -22
  16. package/dist/windowing/Window/Window.svelte +45 -10
  17. package/dist/windowing/WindowManager/WindowManager.svelte +23 -8
  18. package/package.json +1 -1
package/dist/windowing/Window/Window.svelte CHANGED
@@ -335,13 +335,14 @@ function handleKeyDown(e: KeyboardEvent) {
335
335
  flex-direction: column;
336
336
  background: rgb(var(--salmex-window-surface));
337
337
  border: 3px solid rgb(var(--salmex-button-dark-edge));
338
+ border-radius: var(--salmex-radius-md);
339
+ overflow: hidden;
338
340
  box-shadow:
339
341
  /* 3D raised outer edge */
340
342
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
341
343
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
342
344
  /* Flat bold drop shadow */
343
- 5px 5px 0 rgb(0 0 0 / 0.35);
344
- overflow: hidden;
345
+ 4px 4px 3px rgb(0 0 0 / 0.25);
345
346
  outline: none;
346
347
  transition:
347
348
  box-shadow var(--salmex-transition-fast),
@@ -354,11 +355,26 @@ function handleKeyDown(e: KeyboardEvent) {
354
355
  box-shadow:
355
356
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
356
357
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
357
- 3px 3px 0 rgb(0 0 0 / 0.2);
358
+ 3px 3px 2px rgb(0 0 0 / 0.15);
359
+ }
360
+
361
+ :global([data-theme='dark']) .salmex-win {
362
+ box-shadow:
363
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
364
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
365
+ 4px 4px 3px rgb(0 0 0 / 0.5);
366
+ }
367
+
368
+ :global([data-theme='dark']) .salmex-win:not(.salmex-win-focused) {
369
+ box-shadow:
370
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
371
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
372
+ 3px 3px 2px rgb(0 0 0 / 0.35);
358
373
  }
359
374
 
360
375
  .salmex-win-maximized {
361
376
  border-width: 2px;
377
+ border-radius: 0;
362
378
  box-shadow: none !important;
363
379
  }
364
380
 
@@ -384,7 +400,8 @@ function handleKeyDown(e: KeyboardEvent) {
384
400
  rgb(var(--salmex-titlebar-bold))
385
401
  );
386
402
  color: rgb(var(--salmex-chalk-white));
387
- border-bottom: 2px solid rgb(var(--salmex-button-dark-edge));
403
+ border-bottom: 1px solid rgb(var(--salmex-button-dark-edge));
404
+ border-radius: 3px 3px 0 0;
388
405
  flex-shrink: 0;
389
406
  font-family: var(--salmex-font-display);
390
407
  user-select: none;
@@ -437,6 +454,7 @@ function handleKeyDown(e: KeyboardEvent) {
437
454
  width: 50%;
438
455
  height: 3px;
439
456
  background: rgb(var(--salmex-crown-yellow));
457
+ border-radius: 0 2px 0 0;
440
458
  }
441
459
 
442
460
  :root:not([data-theme='dark']) .salmex-win-focused .salmex-win-titlebar::after {
@@ -504,7 +522,8 @@ function handleKeyDown(e: KeyboardEvent) {
504
522
  height: 22px;
505
523
  padding: 0;
506
524
  background: rgb(var(--salmex-button-face));
507
- border: 2px solid rgb(var(--salmex-button-dark-edge));
525
+ border: 1px solid rgb(var(--salmex-button-dark-edge));
526
+ border-radius: var(--salmex-radius-sm);
508
527
  color: rgb(var(--salmex-text-primary));
509
528
  cursor: pointer;
510
529
  box-shadow:
@@ -530,14 +549,14 @@ function handleKeyDown(e: KeyboardEvent) {
530
549
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
531
550
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
532
551
  0 0 0 2px rgb(var(--salmex-midnight-black)),
533
- 0 0 0 5px rgb(var(--salmex-crown-yellow));
552
+ 0 0 2px 4px rgb(var(--salmex-crown-yellow));
534
553
  }
535
554
 
536
555
  :global([data-theme='dark']) .salmex-win-btn:focus-visible {
537
556
  box-shadow:
538
557
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
539
558
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
540
- 0 0 0 3px rgb(var(--salmex-crown-yellow));
559
+ 0 0 2px 3px rgb(var(--salmex-crown-yellow));
541
560
  }
542
561
 
543
562
  /* Close button — red accent on hover */
@@ -561,10 +580,18 @@ function handleKeyDown(e: KeyboardEvent) {
561
580
  }
562
581
 
563
582
  /* Sunken inset for the body area — Win2K content area.
564
- Uses only a subtle top inset shadow; no border or margin
565
- so child components (TextInput, etc.) don't double-frame. */
583
+ L-shaped top+left inset reads "sunken" without the full
584
+ 4-sided frame that would double-frame child inputs. */
566
585
  .salmex-win-body {
567
- box-shadow: inset 0 1px 0 rgb(var(--salmex-button-shadow));
586
+ box-shadow:
587
+ inset 0 1px 0 rgb(var(--salmex-button-shadow)),
588
+ inset 1px 0 0 rgb(var(--salmex-button-shadow) / 0.5);
589
+ }
590
+
591
+ :global([data-theme='dark']) .salmex-win-body {
592
+ box-shadow:
593
+ inset 0 1px 0 rgb(0 0 0 / 0.4),
594
+ inset 1px 0 0 rgb(0 0 0 / 0.2);
568
595
  }
569
596
 
570
597
  /* ========================================
@@ -578,6 +605,7 @@ function handleKeyDown(e: KeyboardEvent) {
578
605
  padding: var(--salmex-space-1) var(--salmex-space-3);
579
606
  background: rgb(var(--salmex-window-surface));
580
607
  border-top: 1px solid rgb(var(--salmex-button-highlight));
608
+ border-radius: 0 0 3px 3px;
581
609
  font-size: var(--salmex-font-size-xs);
582
610
  font-family: var(--salmex-font-system);
583
611
  color: rgb(var(--salmex-text-secondary));
@@ -587,6 +615,13 @@ function handleKeyDown(e: KeyboardEvent) {
587
615
  inset -1px -1px 0 rgb(var(--salmex-button-highlight));
588
616
  }
589
617
 
618
+ :global([data-theme='dark']) .salmex-win-statusbar {
619
+ border-top-color: rgb(var(--salmex-button-shadow));
620
+ box-shadow:
621
+ inset 1px 1px 0 rgb(0 0 0 / 0.3),
622
+ inset -1px -1px 0 rgb(var(--salmex-button-highlight));
623
+ }
624
+
590
625
  /* ========================================
591
626
  REDUCED MOTION
592
627
  ======================================== */
package/dist/windowing/WindowManager/WindowManager.svelte CHANGED
@@ -176,10 +176,14 @@ function handleTaskbarClick(windowId: string) {
176
176
  position: relative;
177
177
  display: flex;
178
178
  flex-direction: column;
179
- border: 3px solid rgb(var(--salmex-button-dark-edge));
179
+ border: 2px solid rgb(var(--salmex-button-dark-edge));
180
+ border-radius: var(--salmex-radius-md);
180
181
  overflow: hidden;
181
182
  background: rgb(var(--salmex-bg-tertiary));
182
- box-shadow: var(--salmex-shadow-lg);
183
+ box-shadow:
184
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
185
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
186
+ var(--salmex-shadow-lg);
183
187
  }
184
188
 
185
189
  .salmex-wm-taskbar-top {
@@ -235,6 +239,13 @@ function handleTaskbarClick(windowId: string) {
235
239
  );
236
240
  }
237
241
 
242
+ :global([data-theme='dark']) .salmex-wm {
243
+ box-shadow:
244
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
245
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
246
+ 4px 4px 3px rgb(0 0 0 / 0.5);
247
+ }
248
+
238
249
  /* ========================================
239
250
  DESKTOP AREA
240
251
  ======================================== */
@@ -270,7 +281,8 @@ function handleTaskbarClick(windowId: string) {
270
281
  gap: 2px;
271
282
  padding: 2px var(--salmex-space-1);
272
283
  background: rgb(var(--salmex-window-surface));
273
- border-top: 2px solid rgb(var(--salmex-button-highlight));
284
+ border-top: 1px solid rgb(var(--salmex-button-highlight));
285
+ border-radius: 0 0 calc(var(--salmex-radius-md) - 2px) calc(var(--salmex-radius-md) - 2px);
274
286
  min-height: 36px;
275
287
  flex-shrink: 0;
276
288
  /* 3D raised taskbar */
@@ -281,7 +293,8 @@ function handleTaskbarClick(windowId: string) {
281
293
 
282
294
  .salmex-wm-taskbar-top .salmex-wm-taskbar {
283
295
  border-top: none;
284
- border-bottom: 2px solid rgb(var(--salmex-button-shadow));
296
+ border-bottom: 1px solid rgb(var(--salmex-button-shadow));
297
+ border-radius: calc(var(--salmex-radius-md) - 2px) calc(var(--salmex-radius-md) - 2px) 0 0;
285
298
  }
286
299
 
287
300
  /* Start button */
@@ -320,7 +333,8 @@ function handleTaskbarClick(windowId: string) {
320
333
  min-width: 0;
321
334
  max-width: 160px;
322
335
  background: rgb(var(--salmex-button-face));
323
- border: 2px solid rgb(var(--salmex-button-dark-edge));
336
+ border: 1px solid rgb(var(--salmex-button-dark-edge));
337
+ border-radius: var(--salmex-radius-sm);
324
338
  cursor: pointer;
325
339
  font-family: var(--salmex-font-system);
326
340
  font-size: var(--salmex-font-size-xs);
@@ -334,7 +348,7 @@ function handleTaskbarClick(windowId: string) {
334
348
  transition: all var(--salmex-transition-fast);
335
349
  white-space: nowrap;
336
350
  overflow: hidden;
337
- height: 26px;
351
+ height: 24px;
338
352
  }
339
353
 
340
354
  .salmex-wm-taskbar-btn:hover {
@@ -361,14 +375,14 @@ function handleTaskbarClick(windowId: string) {
361
375
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
362
376
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
363
377
  0 0 0 2px rgb(var(--salmex-midnight-black)),
364
- 0 0 0 5px rgb(var(--salmex-crown-yellow));
378
+ 0 0 2px 4px rgb(var(--salmex-crown-yellow));
365
379
  }
366
380
 
367
381
  :global([data-theme='dark']) .salmex-wm-taskbar-btn:focus-visible {
368
382
  box-shadow:
369
383
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
370
384
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
371
- 0 0 0 3px rgb(var(--salmex-crown-yellow));
385
+ 0 0 2px 3px rgb(var(--salmex-crown-yellow));
372
386
  }
373
387
 
374
388
  .salmex-wm-taskbar-btn-text {
@@ -384,6 +398,7 @@ function handleTaskbarClick(windowId: string) {
384
398
  padding: 0 var(--salmex-space-2);
385
399
  margin-left: auto;
386
400
  border-left: 1px solid rgb(var(--salmex-button-shadow));
401
+ border-radius: var(--salmex-radius-sm);
387
402
  /* Sunken inset */
388
403
  box-shadow:
389
404
  inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salmexio/ui",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "Salmex I/O Design System — Win2K-inspired UI component library for Salmex and Salmex I/O products",
5
5
  "type": "module",
6
6
  "license": "UNLICENSED",