@discourser/design-system 0.12.0 → 0.14.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 (64) hide show
  1. package/dist/{chunk-GUJTU4IH.js → chunk-F7LHARS4.js} +12 -8
  2. package/dist/chunk-F7LHARS4.js.map +1 -0
  3. package/dist/{chunk-5NW4VZJD.js → chunk-M7J7WKJY.js} +192 -243
  4. package/dist/chunk-M7J7WKJY.js.map +1 -0
  5. package/dist/{chunk-SQNOAZ2L.cjs → chunk-QC44JPCA.cjs} +192 -243
  6. package/dist/chunk-QC44JPCA.cjs.map +1 -0
  7. package/dist/{chunk-X4PNKWSA.cjs → chunk-QP4EJI3G.cjs} +12 -8
  8. package/dist/chunk-QP4EJI3G.cjs.map +1 -0
  9. package/dist/components/Badge.d.ts +1 -1
  10. package/dist/components/Badge.d.ts.map +1 -1
  11. package/dist/components/Checkbox.d.ts +2 -2
  12. package/dist/components/Stepper/Stepper.d.ts +5 -1
  13. package/dist/components/Stepper/Stepper.d.ts.map +1 -1
  14. package/dist/components/index.cjs +33 -33
  15. package/dist/components/index.js +1 -1
  16. package/dist/index.cjs +37 -37
  17. package/dist/index.js +2 -2
  18. package/dist/preset/colors/create-palette-bridge.d.ts +45 -0
  19. package/dist/preset/colors/create-palette-bridge.d.ts.map +1 -0
  20. package/dist/preset/colors/index.d.ts +13 -926
  21. package/dist/preset/colors/index.d.ts.map +1 -1
  22. package/dist/preset/colors/m3-error.d.ts +4 -306
  23. package/dist/preset/colors/m3-error.d.ts.map +1 -1
  24. package/dist/preset/colors/m3-primary.d.ts +1 -306
  25. package/dist/preset/colors/m3-primary.d.ts.map +1 -1
  26. package/dist/preset/colors/m3-secondary.d.ts +7 -0
  27. package/dist/preset/colors/m3-secondary.d.ts.map +1 -0
  28. package/dist/preset/colors/m3-tertiary.d.ts +7 -0
  29. package/dist/preset/colors/m3-tertiary.d.ts.map +1 -0
  30. package/dist/preset/index.cjs +2 -2
  31. package/dist/preset/index.d.ts.map +1 -1
  32. package/dist/preset/index.js +1 -1
  33. package/dist/preset/recipes/radio-group.d.ts.map +1 -1
  34. package/dist/preset/recipes/stepper.d.ts.map +1 -1
  35. package/dist/preset/semantic-tokens.d.ts +4 -4
  36. package/dist/preset/shadows.d.ts +12 -26
  37. package/dist/preset/shadows.d.ts.map +1 -1
  38. package/package.json +14 -8
  39. package/src/components/Badge.tsx +1 -1
  40. package/src/components/Stepper/Stepper.tsx +12 -2
  41. package/src/languages/__tests__/transform.test.ts +100 -0
  42. package/src/preset/__tests__/shadows.test.ts +83 -0
  43. package/src/preset/__tests__/token-resolution.test.ts +247 -0
  44. package/src/preset/colors/create-palette-bridge.ts +156 -0
  45. package/src/preset/colors/index.ts +4 -0
  46. package/src/preset/colors/m3-error.ts +12 -77
  47. package/src/preset/colors/m3-primary.ts +5 -90
  48. package/src/preset/colors/m3-secondary.ts +13 -0
  49. package/src/preset/colors/m3-tertiary.ts +13 -0
  50. package/src/preset/index.ts +1 -6
  51. package/src/preset/recipes/__tests__/recipe-shadows.test.ts +238 -0
  52. package/src/preset/recipes/button.ts +3 -3
  53. package/src/preset/recipes/radio-group.ts +12 -11
  54. package/src/preset/recipes/stepper.ts +15 -1
  55. package/src/preset/semantic-tokens.ts +6 -6
  56. package/src/preset/shadows.ts +12 -26
  57. package/src/stories/foundations/Colors.mdx +1 -1
  58. package/src/stories/foundations/Elevation.mdx +37 -8
  59. package/src/stories/foundations/Spacing.mdx +1 -1
  60. package/src/stories/foundations/Typography.mdx +1 -1
  61. package/dist/chunk-5NW4VZJD.js.map +0 -1
  62. package/dist/chunk-GUJTU4IH.js.map +0 -1
  63. package/dist/chunk-SQNOAZ2L.cjs.map +0 -1
  64. package/dist/chunk-X4PNKWSA.cjs.map +0 -1
@@ -463,121 +463,152 @@ function extractLetterSpacings(scale) {
463
463
  ])
464
464
  );
465
465
  }
466
- var m3 = material3Language.colors.primary;
467
- var primary = defineSemanticTokens.colors({
468
- // Base scale mapping M3 tonal to Radix
466
+ function createPaletteBridge({
467
+ name,
468
+ palette: m32,
469
+ includeDefault = false,
470
+ solidFgWhiteBoth = false
471
+ }) {
472
+ const tokens = {
473
+ // Base scale mapping M3 tonal to Radix (same for all chromatic colors)
474
+ "1": { value: { base: m32[99], _dark: m32[10] } },
475
+ "2": { value: { base: m32[95], _dark: m32[20] } },
476
+ "3": { value: { base: m32[90], _dark: m32[30] } },
477
+ "4": { value: { base: m32[80], _dark: m32[30] } },
478
+ "5": { value: { base: m32[70], _dark: m32[40] } },
479
+ "6": { value: { base: m32[60], _dark: m32[40] } },
480
+ "7": { value: { base: m32[50], _dark: m32[50] } },
481
+ "8": { value: { base: m32[40], _dark: m32[60] } },
482
+ "9": { value: { base: m32[40], _dark: m32[80] } },
483
+ // Primary action color
484
+ "10": { value: { base: m32[30], _dark: m32[70] } },
485
+ // Hover state
486
+ "11": { value: { base: m32[30], _dark: m32[90] } },
487
+ // Low-contrast text
488
+ "12": { value: { base: m32[10], _dark: m32[95] } },
489
+ // High-contrast text
490
+ // Alpha variants (for overlays/transparency)
491
+ // Increased opacity for better visibility in UI components
492
+ a1: { value: { base: `${m32[40]}08`, _dark: `${m32[80]}08` } },
493
+ a2: { value: { base: `${m32[40]}20`, _dark: `${m32[80]}20` } },
494
+ // ~13% for surface bg
495
+ a3: { value: { base: `${m32[40]}30`, _dark: `${m32[80]}30` } },
496
+ // ~19% for subtle bg
497
+ a4: { value: { base: `${m32[40]}40`, _dark: `${m32[80]}40` } },
498
+ // ~25% for hover states
499
+ a5: { value: { base: `${m32[40]}50`, _dark: `${m32[80]}50` } },
500
+ // ~31% for active states
501
+ a6: { value: { base: `${m32[40]}80`, _dark: `${m32[80]}80` } },
502
+ // ~50% for visible borders
503
+ a7: { value: { base: `${m32[40]}A0`, _dark: `${m32[80]}A0` } },
504
+ // ~63% for prominent borders
505
+ a8: { value: { base: `${m32[40]}B0`, _dark: `${m32[80]}B0` } },
506
+ // ~69%
507
+ a9: { value: { base: `${m32[40]}C0`, _dark: `${m32[80]}C0` } },
508
+ // ~75%
509
+ a10: { value: { base: `${m32[40]}D0`, _dark: `${m32[80]}D0` } },
510
+ // ~81%
511
+ a11: { value: { base: `${m32[40]}E0`, _dark: `${m32[80]}E0` } },
512
+ // ~88% for text colors
513
+ a12: { value: { base: `${m32[40]}F0`, _dark: `${m32[80]}F0` } },
514
+ // ~94% for high contrast
515
+ // Semantic variants (Park UI component styling)
516
+ solid: {
517
+ bg: {
518
+ DEFAULT: { value: { base: `{colors.${name}.9}`, _dark: `{colors.${name}.9}` } },
519
+ hover: { value: { base: `{colors.${name}.10}`, _dark: `{colors.${name}.10}` } }
520
+ },
521
+ fg: {
522
+ DEFAULT: solidFgWhiteBoth ? { value: { base: "white", _dark: "white" } } : { value: { base: "{colors.white}", _dark: `{colors.${name}.1}` } }
523
+ }
524
+ },
525
+ subtle: {
526
+ bg: {
527
+ DEFAULT: { value: { base: `{colors.${name}.a3}`, _dark: `{colors.${name}.a3}` } },
528
+ hover: { value: { base: `{colors.${name}.a4}`, _dark: `{colors.${name}.a4}` } },
529
+ active: { value: { base: `{colors.${name}.a5}`, _dark: `{colors.${name}.a5}` } }
530
+ },
531
+ fg: {
532
+ DEFAULT: { value: { base: `{colors.${name}.a11}`, _dark: `{colors.${name}.a11}` } }
533
+ }
534
+ },
535
+ surface: {
536
+ bg: {
537
+ DEFAULT: { value: { base: `{colors.${name}.a2}`, _dark: `{colors.${name}.a2}` } },
538
+ active: { value: { base: `{colors.${name}.a3}`, _dark: `{colors.${name}.a3}` } }
539
+ },
540
+ border: {
541
+ DEFAULT: { value: { base: `{colors.${name}.a6}`, _dark: `{colors.${name}.a6}` } },
542
+ hover: { value: { base: `{colors.${name}.a7}`, _dark: `{colors.${name}.a7}` } }
543
+ },
544
+ fg: {
545
+ DEFAULT: { value: { base: `{colors.${name}.a11}`, _dark: `{colors.${name}.a11}` } }
546
+ }
547
+ },
548
+ outline: {
549
+ bg: {
550
+ DEFAULT: { value: { base: "transparent", _dark: "transparent" } },
551
+ hover: { value: { base: `{colors.${name}.a2}`, _dark: `{colors.${name}.a2}` } },
552
+ active: { value: { base: `{colors.${name}.a3}`, _dark: `{colors.${name}.a3}` } }
553
+ },
554
+ border: {
555
+ DEFAULT: { value: { base: `{colors.${name}.a7}`, _dark: `{colors.${name}.a7}` } }
556
+ },
557
+ fg: {
558
+ DEFAULT: { value: { base: `{colors.${name}.a11}`, _dark: `{colors.${name}.a11}` } }
559
+ }
560
+ },
561
+ plain: {
562
+ bg: {
563
+ DEFAULT: { value: { base: "transparent", _dark: "transparent" } },
564
+ hover: { value: { base: `{colors.${name}.a3}`, _dark: `{colors.${name}.a3}` } },
565
+ active: { value: { base: `{colors.${name}.a4}`, _dark: `{colors.${name}.a4}` } }
566
+ },
567
+ fg: {
568
+ DEFAULT: { value: { base: `{colors.${name}.a11}`, _dark: `{colors.${name}.a11}` } }
569
+ }
570
+ }
571
+ };
572
+ if (includeDefault) {
573
+ return defineSemanticTokens.colors({
574
+ DEFAULT: { value: { base: m32[40], _dark: m32[80] } },
575
+ ...tokens
576
+ });
577
+ }
578
+ return defineSemanticTokens.colors(tokens);
579
+ }
580
+
581
+ // src/preset/colors/m3-primary.ts
582
+ var primary = createPaletteBridge({
583
+ name: "primary",
584
+ palette: material3Language.colors.primary
585
+ });
586
+
587
+ // src/preset/colors/m3-secondary.ts
588
+ var secondary = createPaletteBridge({
589
+ name: "secondary",
590
+ palette: material3Language.colors.secondary
591
+ });
592
+
593
+ // src/preset/colors/m3-tertiary.ts
594
+ var tertiary = createPaletteBridge({
595
+ name: "tertiary",
596
+ palette: material3Language.colors.tertiary
597
+ });
598
+ var m3 = material3Language.colors.neutral;
599
+ var neutral = defineSemanticTokens.colors({
469
600
  "1": { value: { base: m3[99], _dark: m3[10] } },
470
601
  "2": { value: { base: m3[95], _dark: m3[20] } },
471
- "3": { value: { base: m3[90], _dark: m3[30] } },
602
+ "3": { value: { base: m3[90], _dark: m3[20] } },
472
603
  "4": { value: { base: m3[80], _dark: m3[30] } },
473
- "5": { value: { base: m3[70], _dark: m3[40] } },
604
+ "5": { value: { base: m3[70], _dark: m3[30] } },
474
605
  "6": { value: { base: m3[60], _dark: m3[40] } },
475
606
  "7": { value: { base: m3[50], _dark: m3[50] } },
476
607
  "8": { value: { base: m3[40], _dark: m3[60] } },
477
- "9": { value: { base: m3[40], _dark: m3[80] } },
478
- // Primary action color
608
+ "9": { value: { base: m3[40], _dark: m3[60] } },
479
609
  "10": { value: { base: m3[30], _dark: m3[70] } },
480
- // Hover state
481
- "11": { value: { base: m3[30], _dark: m3[90] } },
482
- // Low-contrast text
483
- "12": { value: { base: m3[10], _dark: m3[95] } },
484
- // High-contrast text
485
- // Alpha variants (for overlays/transparency)
486
- // Increased opacity for better visibility in UI components
487
- a1: { value: { base: `${m3[40]}08`, _dark: `${m3[80]}08` } },
488
- a2: { value: { base: `${m3[40]}20`, _dark: `${m3[80]}20` } },
489
- // ~13% for surface bg
490
- a3: { value: { base: `${m3[40]}30`, _dark: `${m3[80]}30` } },
491
- // ~19% for subtle bg
492
- a4: { value: { base: `${m3[40]}40`, _dark: `${m3[80]}40` } },
493
- // ~25% for hover states
494
- a5: { value: { base: `${m3[40]}50`, _dark: `${m3[80]}50` } },
495
- // ~31% for active states
496
- a6: { value: { base: `${m3[40]}80`, _dark: `${m3[80]}80` } },
497
- // ~50% for visible borders
498
- a7: { value: { base: `${m3[40]}A0`, _dark: `${m3[80]}A0` } },
499
- // ~63% for prominent borders
500
- a8: { value: { base: `${m3[40]}B0`, _dark: `${m3[80]}B0` } },
501
- // ~69%
502
- a9: { value: { base: `${m3[40]}C0`, _dark: `${m3[80]}C0` } },
503
- // ~75%
504
- a10: { value: { base: `${m3[40]}D0`, _dark: `${m3[80]}D0` } },
505
- // ~81%
506
- a11: { value: { base: `${m3[40]}E0`, _dark: `${m3[80]}E0` } },
507
- // ~88% for text colors
508
- a12: { value: { base: `${m3[40]}F0`, _dark: `${m3[80]}F0` } },
509
- // ~94% for high contrast
510
- // Semantic variants (Park UI component styling)
511
- solid: {
512
- bg: {
513
- DEFAULT: { value: { base: "{colors.primary.9}", _dark: "{colors.primary.9}" } },
514
- hover: { value: { base: "{colors.primary.10}", _dark: "{colors.primary.10}" } }
515
- },
516
- fg: {
517
- DEFAULT: { value: { base: "{colors.white}", _dark: "{colors.primary.1}" } }
518
- }
519
- },
520
- subtle: {
521
- bg: {
522
- DEFAULT: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } },
523
- hover: { value: { base: "{colors.primary.a4}", _dark: "{colors.primary.a4}" } },
524
- active: { value: { base: "{colors.primary.a5}", _dark: "{colors.primary.a5}" } }
525
- },
526
- fg: {
527
- DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
528
- }
529
- },
530
- surface: {
531
- bg: {
532
- DEFAULT: { value: { base: "{colors.primary.a2}", _dark: "{colors.primary.a2}" } },
533
- active: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } }
534
- },
535
- border: {
536
- DEFAULT: { value: { base: "{colors.primary.a6}", _dark: "{colors.primary.a6}" } },
537
- hover: { value: { base: "{colors.primary.a7}", _dark: "{colors.primary.a7}" } }
538
- },
539
- fg: {
540
- DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
541
- }
542
- },
543
- outline: {
544
- bg: {
545
- DEFAULT: { value: { base: "transparent", _dark: "transparent" } },
546
- hover: { value: { base: "{colors.primary.a2}", _dark: "{colors.primary.a2}" } },
547
- active: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } }
548
- },
549
- border: {
550
- DEFAULT: { value: { base: "{colors.primary.a7}", _dark: "{colors.primary.a7}" } }
551
- },
552
- fg: {
553
- DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
554
- }
555
- },
556
- plain: {
557
- bg: {
558
- DEFAULT: { value: { base: "transparent", _dark: "transparent" } },
559
- hover: { value: { base: "{colors.primary.a3}", _dark: "{colors.primary.a3}" } },
560
- active: { value: { base: "{colors.primary.a4}", _dark: "{colors.primary.a4}" } }
561
- },
562
- fg: {
563
- DEFAULT: { value: { base: "{colors.primary.a11}", _dark: "{colors.primary.a11}" } }
564
- }
565
- }
566
- });
567
- var m32 = material3Language.colors.neutral;
568
- var neutral = defineSemanticTokens.colors({
569
- "1": { value: { base: m32[99], _dark: m32[10] } },
570
- "2": { value: { base: m32[95], _dark: m32[20] } },
571
- "3": { value: { base: m32[90], _dark: m32[20] } },
572
- "4": { value: { base: m32[80], _dark: m32[30] } },
573
- "5": { value: { base: m32[70], _dark: m32[30] } },
574
- "6": { value: { base: m32[60], _dark: m32[40] } },
575
- "7": { value: { base: m32[50], _dark: m32[50] } },
576
- "8": { value: { base: m32[40], _dark: m32[60] } },
577
- "9": { value: { base: m32[40], _dark: m32[60] } },
578
- "10": { value: { base: m32[30], _dark: m32[70] } },
579
- "11": { value: { base: m32[30], _dark: m32[80] } },
580
- "12": { value: { base: m32[10], _dark: m32[90] } },
610
+ "11": { value: { base: m3[30], _dark: m3[80] } },
611
+ "12": { value: { base: m3[10], _dark: m3[90] } },
581
612
  // Alpha variants (increased opacity for better visibility)
582
613
  a1: { value: { base: "#00000008", _dark: "#ffffff08" } },
583
614
  a2: { value: { base: "#00000020", _dark: "#ffffff20" } },
@@ -660,93 +691,20 @@ var neutral = defineSemanticTokens.colors({
660
691
  }
661
692
  }
662
693
  });
663
- var m33 = material3Language.colors.error;
664
- var error = defineSemanticTokens.colors({
665
- "1": { value: { base: m33[99], _dark: m33[10] } },
666
- "2": { value: { base: m33[95], _dark: m33[20] } },
667
- "3": { value: { base: m33[90], _dark: m33[30] } },
668
- "4": { value: { base: m33[80], _dark: m33[30] } },
669
- "5": { value: { base: m33[70], _dark: m33[40] } },
670
- "6": { value: { base: m33[60], _dark: m33[40] } },
671
- "7": { value: { base: m33[50], _dark: m33[50] } },
672
- "8": { value: { base: m33[40], _dark: m33[60] } },
673
- "9": { value: { base: m33[40], _dark: m33[80] } },
674
- "10": { value: { base: m33[30], _dark: m33[70] } },
675
- "11": { value: { base: m33[30], _dark: m33[90] } },
676
- "12": { value: { base: m33[10], _dark: m33[95] } },
677
- // Alpha variants (increased opacity for better visibility)
678
- a1: { value: { base: `${m33[40]}08`, _dark: `${m33[80]}08` } },
679
- a2: { value: { base: `${m33[40]}20`, _dark: `${m33[80]}20` } },
680
- // ~13% for surface bg
681
- a3: { value: { base: `${m33[40]}30`, _dark: `${m33[80]}30` } },
682
- // ~19% for subtle bg
683
- a4: { value: { base: `${m33[40]}40`, _dark: `${m33[80]}40` } },
684
- // ~25% for hover states
685
- a5: { value: { base: `${m33[40]}50`, _dark: `${m33[80]}50` } },
686
- // ~31% for active states
687
- a6: { value: { base: `${m33[40]}80`, _dark: `${m33[80]}80` } },
688
- // ~50% for visible borders
689
- a7: { value: { base: `${m33[40]}A0`, _dark: `${m33[80]}A0` } },
690
- // ~63% for prominent borders
691
- a8: { value: { base: `${m33[40]}B0`, _dark: `${m33[80]}B0` } },
692
- // ~69%
693
- a9: { value: { base: `${m33[40]}C0`, _dark: `${m33[80]}C0` } },
694
- // ~75%
695
- a10: { value: { base: `${m33[40]}D0`, _dark: `${m33[80]}D0` } },
696
- // ~81%
697
- a11: { value: { base: `${m33[40]}E0`, _dark: `${m33[80]}E0` } },
698
- // ~88% for text colors
699
- a12: { value: { base: `${m33[40]}F0`, _dark: `${m33[80]}F0` } },
700
- // ~94% for high contrast
701
- // Semantic variants
702
- solid: {
703
- bg: {
704
- DEFAULT: { value: { base: "{colors.error.9}", _dark: "{colors.error.9}" } },
705
- hover: { value: { base: "{colors.error.10}", _dark: "{colors.error.10}" } }
706
- },
707
- fg: { DEFAULT: { value: { base: "white", _dark: "white" } } }
708
- },
709
- subtle: {
710
- bg: {
711
- DEFAULT: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } },
712
- hover: { value: { base: "{colors.error.a4}", _dark: "{colors.error.a4}" } },
713
- active: { value: { base: "{colors.error.a5}", _dark: "{colors.error.a5}" } }
714
- },
715
- fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
716
- },
717
- surface: {
718
- bg: {
719
- DEFAULT: { value: { base: "{colors.error.a2}", _dark: "{colors.error.a2}" } },
720
- active: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } }
721
- },
722
- border: {
723
- DEFAULT: { value: { base: "{colors.error.a6}", _dark: "{colors.error.a6}" } },
724
- hover: { value: { base: "{colors.error.a7}", _dark: "{colors.error.a7}" } }
725
- },
726
- fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
727
- },
728
- outline: {
729
- bg: {
730
- DEFAULT: { value: { base: "transparent", _dark: "transparent" } },
731
- hover: { value: { base: "{colors.error.a2}", _dark: "{colors.error.a2}" } },
732
- active: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } }
733
- },
734
- border: { DEFAULT: { value: { base: "{colors.error.a7}", _dark: "{colors.error.a7}" } } },
735
- fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
736
- },
737
- plain: {
738
- bg: {
739
- DEFAULT: { value: { base: "transparent", _dark: "transparent" } },
740
- hover: { value: { base: "{colors.error.a3}", _dark: "{colors.error.a3}" } },
741
- active: { value: { base: "{colors.error.a4}", _dark: "{colors.error.a4}" } }
742
- },
743
- fg: { DEFAULT: { value: { base: "{colors.error.a11}", _dark: "{colors.error.a11}" } } }
744
- }
694
+
695
+ // src/preset/colors/m3-error.ts
696
+ var error = createPaletteBridge({
697
+ name: "error",
698
+ palette: material3Language.colors.error,
699
+ includeDefault: true,
700
+ solidFgWhiteBoth: true
745
701
  });
746
702
 
747
703
  // src/preset/colors/index.ts
748
704
  var colors = {
749
705
  primary,
706
+ secondary,
707
+ tertiary,
750
708
  neutral,
751
709
  error,
752
710
  // Alias gray to neutral (Park UI expects this)
@@ -783,21 +741,21 @@ var m3SemanticTokens = defineSemanticTokens.colors({
783
741
  DEFAULT: { value: { base: semantic.onPrimary, _dark: semanticDark.onPrimary } },
784
742
  container: { value: { base: semantic.onPrimaryContainer, _dark: semanticDark.onPrimaryContainer } }
785
743
  },
786
- // M3 Secondary
787
- secondary: {
744
+ // M3 Secondary (prefixed to avoid conflict with Park UI Radix-scale bridge)
745
+ m3Secondary: {
788
746
  DEFAULT: { value: { base: semantic.secondary, _dark: semanticDark.secondary } },
789
747
  container: { value: { base: semantic.secondaryContainer, _dark: semanticDark.secondaryContainer } }
790
748
  },
791
- onSecondary: {
749
+ onM3Secondary: {
792
750
  DEFAULT: { value: { base: semantic.onSecondary, _dark: semanticDark.onSecondary } },
793
751
  container: { value: { base: semantic.onSecondaryContainer, _dark: semanticDark.onSecondaryContainer } }
794
752
  },
795
- // M3 Tertiary
796
- tertiary: {
753
+ // M3 Tertiary (prefixed to avoid conflict with Park UI Radix-scale bridge)
754
+ m3Tertiary: {
797
755
  DEFAULT: { value: { base: semantic.tertiary, _dark: semanticDark.tertiary } },
798
756
  container: { value: { base: semantic.tertiaryContainer, _dark: semanticDark.tertiaryContainer } }
799
757
  },
800
- onTertiary: {
758
+ onM3Tertiary: {
801
759
  DEFAULT: { value: { base: semantic.onTertiary, _dark: semanticDark.onTertiary } },
802
760
  container: { value: { base: semantic.onTertiaryContainer, _dark: semanticDark.onTertiaryContainer } }
803
761
  },
@@ -918,14 +876,14 @@ var button = defineRecipe({
918
876
  elevated: {
919
877
  bg: "colorPalette.surface.bg",
920
878
  color: "colorPalette.solid.fg",
921
- boxShadow: "level2",
879
+ boxShadow: "sm",
922
880
  border: "none",
923
881
  _hover: {
924
882
  bg: "colorPalette.surface.bg",
925
- boxShadow: "level3"
883
+ boxShadow: "md"
926
884
  },
927
885
  _active: {
928
- boxShadow: "level1"
886
+ boxShadow: "xs"
929
887
  }
930
888
  }
931
889
  },
@@ -2086,8 +2044,6 @@ var radioGroup = defineSlotRecipe({
2086
2044
  flexShrink: 0,
2087
2045
  justifyContent: "center",
2088
2046
  verticalAlign: "top",
2089
- boxShadow: "inset 0 0 0 1px var(--shadow-color)",
2090
- boxShadowColor: "gray.surface.border",
2091
2047
  _after: {
2092
2048
  content: '""',
2093
2049
  display: "block",
@@ -2096,14 +2052,6 @@ var radioGroup = defineSlotRecipe({
2096
2052
  },
2097
2053
  _focusVisible: {
2098
2054
  focusVisibleRing: "outside"
2099
- },
2100
- _checked: {
2101
- bg: "colorPalette.solid.bg",
2102
- color: "colorPalette.solid.fg",
2103
- boxShadowColor: "colorPalette.solid.bg",
2104
- _after: {
2105
- background: "colorPalette.solid.fg"
2106
- }
2107
2055
  }
2108
2056
  },
2109
2057
  item: {
@@ -2132,7 +2080,18 @@ var radioGroup = defineSlotRecipe({
2132
2080
  variants: {
2133
2081
  variant: {
2134
2082
  solid: {
2135
- itemControl: {}
2083
+ itemControl: {
2084
+ boxShadow: "inset 0 0 0 1px var(--shadow-color)",
2085
+ boxShadowColor: "gray.surface.border",
2086
+ _checked: {
2087
+ bg: "colorPalette.solid.bg",
2088
+ color: "colorPalette.solid.fg",
2089
+ boxShadowColor: "colorPalette.solid.bg",
2090
+ _after: {
2091
+ background: "colorPalette.solid.fg"
2092
+ }
2093
+ }
2094
+ }
2136
2095
  }
2137
2096
  },
2138
2097
  size: {
@@ -3294,6 +3253,7 @@ var stepper = defineSlotRecipe({
3294
3253
  "item",
3295
3254
  "trigger",
3296
3255
  "indicator",
3256
+ "label",
3297
3257
  "separator",
3298
3258
  "content",
3299
3259
  "progress",
@@ -3333,6 +3293,7 @@ var stepper = defineSlotRecipe({
3333
3293
  padding: "0",
3334
3294
  position: "relative",
3335
3295
  zIndex: "2",
3296
+ flexShrink: "0",
3336
3297
  _disabled: {
3337
3298
  cursor: "not-allowed",
3338
3299
  opacity: 0.5
@@ -3375,10 +3336,21 @@ var stepper = defineSlotRecipe({
3375
3336
  outlineOffset: "2px"
3376
3337
  }
3377
3338
  },
3339
+ label: {
3340
+ whiteSpace: "nowrap",
3341
+ textAlign: "center",
3342
+ fontSize: "sm",
3343
+ fontWeight: "medium",
3344
+ color: "fg.default",
3345
+ maxWidth: "120px",
3346
+ overflow: "hidden",
3347
+ textOverflow: "ellipsis"
3348
+ },
3378
3349
  separator: {
3379
3350
  flex: "1",
3351
+ minWidth: "40px",
3380
3352
  height: "2px",
3381
- bg: "border",
3353
+ bg: "neutral.surface.border",
3382
3354
  transition: "background",
3383
3355
  transitionDuration: "normal",
3384
3356
  marginInline: "4",
@@ -3502,40 +3474,22 @@ var textStyles = defineTextStyles({
3502
3474
  });
3503
3475
  var shadows = defineSemanticTokens.shadows({
3504
3476
  xs: {
3505
- value: {
3506
- base: "0px 1px 2px {colors.neutral.a6}, 0px 0px 1px {colors.neutral.a7}",
3507
- _dark: "0px 1px 1px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
3508
- }
3477
+ value: "{shadows.level1}"
3509
3478
  },
3510
3479
  sm: {
3511
- value: {
3512
- base: "0px 2px 4px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
3513
- _dark: "0px 2px 4px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
3514
- }
3480
+ value: "{shadows.level2}"
3515
3481
  },
3516
3482
  md: {
3517
- value: {
3518
- base: "0px 4px 8px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
3519
- _dark: "0px 4px 8px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
3520
- }
3483
+ value: "{shadows.level3}"
3521
3484
  },
3522
3485
  lg: {
3523
- value: {
3524
- base: "0px 8px 16px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
3525
- _dark: "0px 8px 16px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
3526
- }
3486
+ value: "{shadows.level4}"
3527
3487
  },
3528
3488
  xl: {
3529
- value: {
3530
- base: "0px 16px 24px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
3531
- _dark: "0px 16px 24px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
3532
- }
3489
+ value: "{shadows.level5}"
3533
3490
  },
3534
3491
  "2xl": {
3535
- value: {
3536
- base: "0px 24px 40px {colors.neutral.a4}, 0px 0px 1px {colors.neutral.a4}",
3537
- _dark: "0px 24px 40px {colors.neutral.a8}, 0px 0px 1px inset {colors.neutral.a8}"
3538
- }
3492
+ value: "{shadows.level5}"
3539
3493
  },
3540
3494
  inset: {
3541
3495
  value: {
@@ -3597,12 +3551,7 @@ var discourserPandaPreset = definePreset({
3597
3551
  value: { base: "{colors.gray.1}", _dark: "{colors.gray.1}" }
3598
3552
  },
3599
3553
  border: {
3600
- default: {
3601
- value: { base: "{colors.gray.6}", _dark: "{colors.gray.6}" }
3602
- },
3603
- muted: {
3604
- value: { base: "{colors.gray.4}", _dark: "{colors.gray.4}" }
3605
- }
3554
+ value: { base: "{colors.gray.6}", _dark: "{colors.gray.6}" }
3606
3555
  },
3607
3556
  // M3 semantic tokens (surface, onSurface, etc.)
3608
3557
  ...m3SemanticTokens,
@@ -3684,5 +3633,5 @@ var discourserPandaPreset = definePreset({
3684
3633
  });
3685
3634
 
3686
3635
  export { discourserPandaPreset, material3Language, transformToPandaTheme };
3687
- //# sourceMappingURL=chunk-5NW4VZJD.js.map
3688
- //# sourceMappingURL=chunk-5NW4VZJD.js.map
3636
+ //# sourceMappingURL=chunk-M7J7WKJY.js.map
3637
+ //# sourceMappingURL=chunk-M7J7WKJY.js.map