tyrell-components 1.0.0-TC33 → 1.0.0-TC35

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 (46) hide show
  1. package/css/tyrell-brand.css +101 -6
  2. package/dist/tyrell-brand.css +101 -6
  3. package/dist/tyrell.js +1 -1
  4. package/lib/components/button.d.ts +7 -0
  5. package/lib/components/button.d.ts.map +1 -1
  6. package/lib/components/button.js +12 -1
  7. package/lib/components/button.js.map +1 -1
  8. package/lib/components/option.d.ts +0 -11
  9. package/lib/components/option.d.ts.map +1 -1
  10. package/lib/components/option.js +4 -103
  11. package/lib/components/option.js.map +1 -1
  12. package/lib/components/popup.d.ts.map +1 -1
  13. package/lib/components/popup.js +22 -2
  14. package/lib/components/popup.js.map +1 -1
  15. package/lib/components/select.d.ts +8 -0
  16. package/lib/components/select.d.ts.map +1 -1
  17. package/lib/components/select.js +56 -7
  18. package/lib/components/select.js.map +1 -1
  19. package/lib/components/tabs.d.ts.map +1 -1
  20. package/lib/components/tabs.js +162 -23
  21. package/lib/components/tabs.js.map +1 -1
  22. package/lib/styles/button.d.ts.map +1 -1
  23. package/lib/styles/button.js +57 -14
  24. package/lib/styles/button.js.map +1 -1
  25. package/lib/styles/option.d.ts +1 -1
  26. package/lib/styles/option.d.ts.map +1 -1
  27. package/lib/styles/option.js +0 -51
  28. package/lib/styles/option.js.map +1 -1
  29. package/lib/styles/select-base.d.ts.map +1 -1
  30. package/lib/styles/select-base.js +51 -35
  31. package/lib/styles/select-base.js.map +1 -1
  32. package/lib/styles/select.d.ts +1 -1
  33. package/lib/styles/select.d.ts.map +1 -1
  34. package/lib/styles/select.js +18 -1
  35. package/lib/styles/select.js.map +1 -1
  36. package/lib/styles/tabs.d.ts +1 -1
  37. package/lib/styles/tabs.d.ts.map +1 -1
  38. package/lib/styles/tabs.js +70 -0
  39. package/lib/styles/tabs.js.map +1 -1
  40. package/lib/styles/wizard.d.ts +1 -1
  41. package/lib/styles/wizard.d.ts.map +1 -1
  42. package/lib/styles/wizard.js +15 -3
  43. package/lib/styles/wizard.js.map +1 -1
  44. package/lib/version.d.ts +1 -1
  45. package/lib/version.js +1 -1
  46. package/package.json +5 -2
package/css/tyrell-brand.css CHANGED
@@ -625,12 +625,107 @@ html:root {
625
625
  var(--ty-neutral-hue)
626
626
  );
627
627
 
628
- --ty-solid-primary-fg: white;
629
- --ty-solid-secondary-fg: white;
630
- --ty-solid-success-fg: white;
631
- --ty-solid-danger-fg: white;
632
- --ty-solid-warning-fg: white;
633
- --ty-solid-neutral-fg: white;
628
+ /* ----------------------------------------------------------------
629
+ * SOLID FOREGROUNDS — auto-contrast.
630
+ *
631
+ * Each fill gets a foreground picked from its OWN lightness, so a
632
+ * rebrand (--ty-brand-hue / --ty-brand-chroma / any L-curve override)
633
+ * can't strand white text on a pale fill. Branchless, no JS:
634
+ *
635
+ * clamp(0, (threshold - l) * 1000, 1) -> 1 (white) when the fill
636
+ * is darker than the threshold, 0 (black) when it's lighter.
637
+ *
638
+ * One token per FILL, not per flavor — base / -soft (tone-) / -strong
639
+ * (tone+) each carry a different L, so each needs its own decision.
640
+ * Declared once: the oklch(from ...) formulas re-resolve per mode,
641
+ * because html.dark redefines the fills these read.
642
+ *
643
+ * TO REVERT to the old fixed-white behaviour, override in your app:
644
+ * :root { --ty-solid-primary-fg: white; ... }
645
+ * or set --ty-solid-fg-threshold: 1 to force white everywhere.
646
+ * --------------------------------------------------------------*/
647
+
648
+ /* Crossover point. Fills lighter than this get black text. ~0.58-0.62
649
+ is the sRGB break-even; higher = prefers white, lower = prefers black. */
650
+ --ty-solid-fg-threshold: 0.6;
651
+
652
+ --ty-solid-primary-fg: oklch(
653
+ from var(--ty-solid-primary)
654
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
655
+ );
656
+ --ty-solid-primary-soft-fg: oklch(
657
+ from var(--ty-solid-primary-soft)
658
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
659
+ );
660
+ --ty-solid-primary-strong-fg: oklch(
661
+ from var(--ty-solid-primary-strong)
662
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
663
+ );
664
+
665
+ --ty-solid-secondary-fg: oklch(
666
+ from var(--ty-solid-secondary)
667
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
668
+ );
669
+ --ty-solid-secondary-soft-fg: oklch(
670
+ from var(--ty-solid-secondary-soft)
671
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
672
+ );
673
+ --ty-solid-secondary-strong-fg: oklch(
674
+ from var(--ty-solid-secondary-strong)
675
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
676
+ );
677
+
678
+ --ty-solid-success-fg: oklch(
679
+ from var(--ty-solid-success)
680
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
681
+ );
682
+ --ty-solid-success-soft-fg: oklch(
683
+ from var(--ty-solid-success-soft)
684
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
685
+ );
686
+ --ty-solid-success-strong-fg: oklch(
687
+ from var(--ty-solid-success-strong)
688
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
689
+ );
690
+
691
+ --ty-solid-danger-fg: oklch(
692
+ from var(--ty-solid-danger)
693
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
694
+ );
695
+ --ty-solid-danger-soft-fg: oklch(
696
+ from var(--ty-solid-danger-soft)
697
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
698
+ );
699
+ --ty-solid-danger-strong-fg: oklch(
700
+ from var(--ty-solid-danger-strong)
701
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
702
+ );
703
+
704
+ --ty-solid-warning-fg: oklch(
705
+ from var(--ty-solid-warning)
706
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
707
+ );
708
+ --ty-solid-warning-soft-fg: oklch(
709
+ from var(--ty-solid-warning-soft)
710
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
711
+ );
712
+ --ty-solid-warning-strong-fg: oklch(
713
+ from var(--ty-solid-warning-strong)
714
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
715
+ );
716
+
717
+ --ty-solid-neutral-fg: oklch(
718
+ from var(--ty-solid-neutral)
719
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
720
+ );
721
+ --ty-solid-neutral-soft-fg: oklch(
722
+ from var(--ty-solid-neutral-soft)
723
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
724
+ );
725
+ --ty-solid-neutral-strong-fg: oklch(
726
+ from var(--ty-solid-neutral-strong)
727
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
728
+ );
634
729
 
635
730
  /* derived states — axis 2 offsets on each base fill */
636
731
  --ty-solid-primary-hover: oklch(
package/dist/tyrell-brand.css CHANGED
@@ -625,12 +625,107 @@ html:root {
625
625
  var(--ty-neutral-hue)
626
626
  );
627
627
 
628
- --ty-solid-primary-fg: white;
629
- --ty-solid-secondary-fg: white;
630
- --ty-solid-success-fg: white;
631
- --ty-solid-danger-fg: white;
632
- --ty-solid-warning-fg: white;
633
- --ty-solid-neutral-fg: white;
628
+ /* ----------------------------------------------------------------
629
+ * SOLID FOREGROUNDS — auto-contrast.
630
+ *
631
+ * Each fill gets a foreground picked from its OWN lightness, so a
632
+ * rebrand (--ty-brand-hue / --ty-brand-chroma / any L-curve override)
633
+ * can't strand white text on a pale fill. Branchless, no JS:
634
+ *
635
+ * clamp(0, (threshold - l) * 1000, 1) -> 1 (white) when the fill
636
+ * is darker than the threshold, 0 (black) when it's lighter.
637
+ *
638
+ * One token per FILL, not per flavor — base / -soft (tone-) / -strong
639
+ * (tone+) each carry a different L, so each needs its own decision.
640
+ * Declared once: the oklch(from ...) formulas re-resolve per mode,
641
+ * because html.dark redefines the fills these read.
642
+ *
643
+ * TO REVERT to the old fixed-white behaviour, override in your app:
644
+ * :root { --ty-solid-primary-fg: white; ... }
645
+ * or set --ty-solid-fg-threshold: 1 to force white everywhere.
646
+ * --------------------------------------------------------------*/
647
+
648
+ /* Crossover point. Fills lighter than this get black text. ~0.58-0.62
649
+ is the sRGB break-even; higher = prefers white, lower = prefers black. */
650
+ --ty-solid-fg-threshold: 0.6;
651
+
652
+ --ty-solid-primary-fg: oklch(
653
+ from var(--ty-solid-primary)
654
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
655
+ );
656
+ --ty-solid-primary-soft-fg: oklch(
657
+ from var(--ty-solid-primary-soft)
658
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
659
+ );
660
+ --ty-solid-primary-strong-fg: oklch(
661
+ from var(--ty-solid-primary-strong)
662
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
663
+ );
664
+
665
+ --ty-solid-secondary-fg: oklch(
666
+ from var(--ty-solid-secondary)
667
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
668
+ );
669
+ --ty-solid-secondary-soft-fg: oklch(
670
+ from var(--ty-solid-secondary-soft)
671
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
672
+ );
673
+ --ty-solid-secondary-strong-fg: oklch(
674
+ from var(--ty-solid-secondary-strong)
675
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
676
+ );
677
+
678
+ --ty-solid-success-fg: oklch(
679
+ from var(--ty-solid-success)
680
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
681
+ );
682
+ --ty-solid-success-soft-fg: oklch(
683
+ from var(--ty-solid-success-soft)
684
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
685
+ );
686
+ --ty-solid-success-strong-fg: oklch(
687
+ from var(--ty-solid-success-strong)
688
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
689
+ );
690
+
691
+ --ty-solid-danger-fg: oklch(
692
+ from var(--ty-solid-danger)
693
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
694
+ );
695
+ --ty-solid-danger-soft-fg: oklch(
696
+ from var(--ty-solid-danger-soft)
697
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
698
+ );
699
+ --ty-solid-danger-strong-fg: oklch(
700
+ from var(--ty-solid-danger-strong)
701
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
702
+ );
703
+
704
+ --ty-solid-warning-fg: oklch(
705
+ from var(--ty-solid-warning)
706
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
707
+ );
708
+ --ty-solid-warning-soft-fg: oklch(
709
+ from var(--ty-solid-warning-soft)
710
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
711
+ );
712
+ --ty-solid-warning-strong-fg: oklch(
713
+ from var(--ty-solid-warning-strong)
714
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
715
+ );
716
+
717
+ --ty-solid-neutral-fg: oklch(
718
+ from var(--ty-solid-neutral)
719
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
720
+ );
721
+ --ty-solid-neutral-soft-fg: oklch(
722
+ from var(--ty-solid-neutral-soft)
723
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
724
+ );
725
+ --ty-solid-neutral-strong-fg: oklch(
726
+ from var(--ty-solid-neutral-strong)
727
+ clamp(0, (var(--ty-solid-fg-threshold) - l) * 1000, 1) 0 0
728
+ );
634
729
 
635
730
  /* derived states — axis 2 offsets on each base fill */
636
731
  --ty-solid-primary-hover: oklch(