tyrell-components 1.0.0-TC24 → 1.0.0-TC26

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 (138) hide show
  1. package/css/tyrell-brand.css +15 -11
  2. package/css/tyrell.css +8 -8
  3. package/dist/tyrell-brand.css +15 -11
  4. package/dist/tyrell.css +8 -8
  5. package/dist/tyrell.js +1 -1
  6. package/lib/base/ty-component.d.ts +7 -0
  7. package/lib/base/ty-component.d.ts.map +1 -1
  8. package/lib/base/ty-component.js +27 -0
  9. package/lib/base/ty-component.js.map +1 -1
  10. package/lib/components/calendar-month.d.ts +6 -0
  11. package/lib/components/calendar-month.d.ts.map +1 -1
  12. package/lib/components/calendar-month.js +52 -9
  13. package/lib/components/calendar-month.js.map +1 -1
  14. package/lib/components/calendar-navigation.d.ts +31 -5
  15. package/lib/components/calendar-navigation.d.ts.map +1 -1
  16. package/lib/components/calendar-navigation.js +71 -31
  17. package/lib/components/calendar-navigation.js.map +1 -1
  18. package/lib/components/calendar.d.ts +14 -1
  19. package/lib/components/calendar.d.ts.map +1 -1
  20. package/lib/components/calendar.js +65 -4
  21. package/lib/components/calendar.js.map +1 -1
  22. package/lib/components/checkbox.d.ts +10 -0
  23. package/lib/components/checkbox.d.ts.map +1 -1
  24. package/lib/components/checkbox.js +68 -27
  25. package/lib/components/checkbox.js.map +1 -1
  26. package/lib/components/copy.d.ts +10 -0
  27. package/lib/components/copy.d.ts.map +1 -1
  28. package/lib/components/copy.js +25 -4
  29. package/lib/components/copy.js.map +1 -1
  30. package/lib/components/date-picker.d.ts +14 -0
  31. package/lib/components/date-picker.d.ts.map +1 -1
  32. package/lib/components/date-picker.js +29 -0
  33. package/lib/components/date-picker.js.map +1 -1
  34. package/lib/components/input.d.ts +14 -0
  35. package/lib/components/input.d.ts.map +1 -1
  36. package/lib/components/input.js +80 -4
  37. package/lib/components/input.js.map +1 -1
  38. package/lib/components/modal.js +6 -0
  39. package/lib/components/modal.js.map +1 -1
  40. package/lib/components/radio.d.ts +1 -0
  41. package/lib/components/radio.d.ts.map +1 -1
  42. package/lib/components/radio.js +39 -8
  43. package/lib/components/radio.js.map +1 -1
  44. package/lib/components/scroll-container.d.ts +16 -0
  45. package/lib/components/scroll-container.d.ts.map +1 -1
  46. package/lib/components/scroll-container.js +105 -1
  47. package/lib/components/scroll-container.js.map +1 -1
  48. package/lib/components/select.d.ts +440 -0
  49. package/lib/components/select.d.ts.map +1 -0
  50. package/lib/components/select.js +1747 -0
  51. package/lib/components/select.js.map +1 -0
  52. package/lib/components/selected-tags.d.ts +80 -0
  53. package/lib/components/selected-tags.d.ts.map +1 -0
  54. package/lib/components/selected-tags.js +250 -0
  55. package/lib/components/selected-tags.js.map +1 -0
  56. package/lib/components/switch.d.ts +2 -0
  57. package/lib/components/switch.d.ts.map +1 -1
  58. package/lib/components/switch.js +37 -7
  59. package/lib/components/switch.js.map +1 -1
  60. package/lib/components/textarea.d.ts +3 -0
  61. package/lib/components/textarea.d.ts.map +1 -1
  62. package/lib/components/textarea.js +61 -6
  63. package/lib/components/textarea.js.map +1 -1
  64. package/lib/index.d.ts +2 -0
  65. package/lib/index.d.ts.map +1 -1
  66. package/lib/index.js +2 -0
  67. package/lib/index.js.map +1 -1
  68. package/lib/styles/calendar-month.d.ts +1 -1
  69. package/lib/styles/calendar-month.d.ts.map +1 -1
  70. package/lib/styles/calendar-month.js +35 -59
  71. package/lib/styles/calendar-month.js.map +1 -1
  72. package/lib/styles/calendar-navigation.d.ts +1 -1
  73. package/lib/styles/calendar-navigation.d.ts.map +1 -1
  74. package/lib/styles/calendar-navigation.js +17 -33
  75. package/lib/styles/calendar-navigation.js.map +1 -1
  76. package/lib/styles/checkbox.d.ts +5 -5
  77. package/lib/styles/checkbox.d.ts.map +1 -1
  78. package/lib/styles/checkbox.js +147 -8
  79. package/lib/styles/checkbox.js.map +1 -1
  80. package/lib/styles/copy.d.ts +1 -1
  81. package/lib/styles/copy.d.ts.map +1 -1
  82. package/lib/styles/copy.js +32 -0
  83. package/lib/styles/copy.js.map +1 -1
  84. package/lib/styles/input.d.ts +1 -1
  85. package/lib/styles/input.d.ts.map +1 -1
  86. package/lib/styles/input.js +28 -298
  87. package/lib/styles/input.js.map +1 -1
  88. package/lib/styles/option.d.ts +1 -1
  89. package/lib/styles/option.d.ts.map +1 -1
  90. package/lib/styles/option.js +7 -3
  91. package/lib/styles/option.js.map +1 -1
  92. package/lib/styles/radio.d.ts +1 -1
  93. package/lib/styles/radio.d.ts.map +1 -1
  94. package/lib/styles/scroll-container.d.ts +1 -1
  95. package/lib/styles/scroll-container.d.ts.map +1 -1
  96. package/lib/styles/scroll-container.js +6 -0
  97. package/lib/styles/scroll-container.js.map +1 -1
  98. package/lib/styles/select.d.ts +12 -0
  99. package/lib/styles/select.d.ts.map +1 -0
  100. package/lib/styles/select.js +257 -0
  101. package/lib/styles/select.js.map +1 -0
  102. package/lib/styles/switch.d.ts +1 -1
  103. package/lib/styles/switch.d.ts.map +1 -1
  104. package/lib/styles/textarea.d.ts +1 -1
  105. package/lib/styles/textarea.d.ts.map +1 -1
  106. package/lib/styles/textarea.js +67 -33
  107. package/lib/styles/textarea.js.map +1 -1
  108. package/lib/utils/calendar-utils.d.ts +0 -48
  109. package/lib/utils/calendar-utils.d.ts.map +1 -1
  110. package/lib/utils/calendar-utils.js +0 -69
  111. package/lib/utils/calendar-utils.js.map +1 -1
  112. package/lib/utils/icon-registry.d.ts +0 -13
  113. package/lib/utils/icon-registry.d.ts.map +1 -1
  114. package/lib/utils/icon-registry.js +0 -35
  115. package/lib/utils/icon-registry.js.map +1 -1
  116. package/lib/utils/locale.d.ts +0 -57
  117. package/lib/utils/locale.d.ts.map +1 -1
  118. package/lib/utils/locale.js +0 -89
  119. package/lib/utils/locale.js.map +1 -1
  120. package/lib/utils/number-format.d.ts +0 -21
  121. package/lib/utils/number-format.d.ts.map +1 -1
  122. package/lib/utils/number-format.js +0 -27
  123. package/lib/utils/number-format.js.map +1 -1
  124. package/lib/utils/positioning.d.ts +0 -24
  125. package/lib/utils/positioning.d.ts.map +1 -1
  126. package/lib/utils/positioning.js +3 -86
  127. package/lib/utils/positioning.js.map +1 -1
  128. package/lib/utils/scroll-lock.d.ts.map +1 -1
  129. package/lib/utils/scroll-lock.js +0 -1
  130. package/lib/utils/scroll-lock.js.map +1 -1
  131. package/lib/utils/styles.d.ts +0 -5
  132. package/lib/utils/styles.d.ts.map +1 -1
  133. package/lib/utils/styles.js +0 -7
  134. package/lib/utils/styles.js.map +1 -1
  135. package/lib/version.d.ts +1 -1
  136. package/lib/version.js +1 -1
  137. package/package.json +18 -2
  138. package/css/tyrell-simple.css +0 -257
package/css/tyrell-brand.css CHANGED
@@ -97,7 +97,11 @@
97
97
  * --------------------------------------------------------------*/
98
98
 
99
99
  --ty-brand-hue: 230;
100
- --ty-brand-chroma: 0.2;
100
+ --ty-brand-chroma: 0.12; /* restrained EU default; the loud 0.2 read as "bollywood" */
101
+
102
+ /* Surface tint. 0 = monochrome surfaces (default, no brand leak).
103
+ * Bump to ~0.005 (light) / ~0.012 (dark) to warm surfaces toward brand. */
104
+ --ty-surface-chroma: 0;
101
105
 
102
106
  /* Secondary rotates from brand by an exposed offset. Default +60°
103
107
  * (sibling accent). Try 30° for a close sibling, 120° for triadic,
@@ -549,9 +553,9 @@ html[data-theme="dark"] {
549
553
  --ty-border-faint: var(--ty-color-neutral-faint);
550
554
 
551
555
  /* ----------------------------------------------------------------
552
- * Surfaces — canvas tinted slightly toward brand for warmth.
556
+ * Surfaces — monochrome by default; --ty-surface-chroma warms them.
553
557
  * --------------------------------------------------------------*/
554
- --ty-surface-canvas: oklch(0.985 0.005 var(--ty-brand-hue));
558
+ --ty-surface-canvas: oklch(0.985 var(--ty-surface-chroma) var(--ty-brand-hue));
555
559
  --ty-surface-content: oklch(1 0 0);
556
560
  --ty-surface-elevated: oklch(1 0 0);
557
561
  --ty-surface-floating: oklch(1 0 0);
@@ -562,8 +566,8 @@ html[data-theme="dark"] {
562
566
  * --------------------------------------------------------------*/
563
567
  --ty-input-bg: var(--ty-surface-input);
564
568
  --ty-input-color: var(--ty-color-neutral-strong);
565
- --ty-input-border: var(--ty-color-neutral-soft);
566
- --ty-input-border-hover: var(--ty-color-neutral-bold);
569
+ --ty-input-border: var(--ty-color-neutral-faint);
570
+ --ty-input-border-hover: var(--ty-color-neutral-soft);
567
571
  --ty-input-border-focus: var(--ty-color-primary);
568
572
  --ty-input-placeholder: var(--ty-color-neutral-soft);
569
573
  --ty-input-disabled-bg: var(--ty-color-neutral-faint);
@@ -979,12 +983,12 @@ html[data-theme="dark"] {
979
983
  --ty-border-soft: var(--ty-color-neutral-faint);
980
984
  --ty-border-faint: var(--ty-color-neutral-faint);
981
985
 
982
- /* Surfaces — flip dark with a hint of brand chroma. */
983
- --ty-surface-canvas: oklch(0.12 0.012 var(--ty-brand-hue));
984
- --ty-surface-content: oklch(0.16 0.012 var(--ty-brand-hue));
985
- --ty-surface-elevated: oklch(0.19 0.013 var(--ty-brand-hue));
986
- --ty-surface-floating: oklch(0.22 0.015 var(--ty-brand-hue));
987
- --ty-surface-input: oklch(0.18 0.012 var(--ty-brand-hue));
986
+ /* Surfaces — monochrome by default; --ty-surface-chroma warms them. */
987
+ --ty-surface-canvas: oklch(0.12 var(--ty-surface-chroma) var(--ty-brand-hue));
988
+ --ty-surface-content: oklch(0.16 var(--ty-surface-chroma) var(--ty-brand-hue));
989
+ --ty-surface-elevated: oklch(0.19 var(--ty-surface-chroma) var(--ty-brand-hue));
990
+ --ty-surface-floating: oklch(0.22 var(--ty-surface-chroma) var(--ty-brand-hue));
991
+ --ty-surface-input: oklch(0.18 var(--ty-surface-chroma) var(--ty-brand-hue));
988
992
 
989
993
  /* Inputs — re-declared at html.dark specificity. */
990
994
  --ty-input-bg: var(--ty-surface-input);
package/css/tyrell.css CHANGED
@@ -336,8 +336,8 @@ COMPONENT TOKENS
336
336
  /* Input component tokens */
337
337
  --ty-input-bg: #ffffff;
338
338
  --ty-input-color: #111827;
339
- --ty-input-border: #d1d5db;
340
- --ty-input-border-hover: #9ca3af;
339
+ --ty-input-border: #e5e7eb;
340
+ --ty-input-border-hover: #d1d5db;
341
341
  --ty-input-border-focus: var(--ty-color-primary);
342
342
  --ty-input-shadow-focus: rgba(59, 130, 246, 0.1);
343
343
  --ty-input-placeholder: #9ca3af;
@@ -668,11 +668,11 @@ Emphasis logic inverts: lighter = more emphasis
668
668
  --ty-border-faint: #030712;
669
669
 
670
670
  /* Scrollbar - dark mode */
671
- --ty-scrollbar-thumb: rgba(255, 255, 255, 0.22);
672
- --ty-scrollbar-thumb-hover: rgba(255, 255, 255, 0.38);
673
- --ty-scrollbar-thumb-active: rgba(255, 255, 255, 0.48);
671
+ --ty-scrollbar-thumb: rgba(255, 255, 255, 0.13);
672
+ --ty-scrollbar-thumb-hover: rgba(255, 255, 255, 0.22);
673
+ --ty-scrollbar-thumb-active: rgba(255, 255, 255, 0.3);
674
674
  --ty-scrollbar-track: transparent;
675
- --ty-scrollbar-track-hover: rgba(255, 255, 255, 0.06);
675
+ --ty-scrollbar-track-hover: rgba(255, 255, 255, 0.04);
676
676
 
677
677
  --ty-surface-canvas: black;
678
678
  --ty-surface-content: #1a1a1a;
@@ -750,8 +750,8 @@ Emphasis logic inverts: lighter = more emphasis
750
750
  /* Input component tokens - dark mode */
751
751
  --ty-input-bg: #1b1b1b;
752
752
  --ty-input-color: #f9fafb;
753
- --ty-input-border: #505050;
754
- --ty-input-border-hover: #7f7f7f;
753
+ --ty-input-border: #3a3a3a;
754
+ --ty-input-border-hover: #505050;
755
755
  --ty-input-border-focus: var(--ty-color-primary);
756
756
  --ty-input-shadow-focus: rgba(96, 165, 250, 0.1);
757
757
  --ty-input-placeholder: #717171;
package/dist/tyrell-brand.css CHANGED
@@ -97,7 +97,11 @@
97
97
  * --------------------------------------------------------------*/
98
98
 
99
99
  --ty-brand-hue: 230;
100
- --ty-brand-chroma: 0.2;
100
+ --ty-brand-chroma: 0.12; /* restrained EU default; the loud 0.2 read as "bollywood" */
101
+
102
+ /* Surface tint. 0 = monochrome surfaces (default, no brand leak).
103
+ * Bump to ~0.005 (light) / ~0.012 (dark) to warm surfaces toward brand. */
104
+ --ty-surface-chroma: 0;
101
105
 
102
106
  /* Secondary rotates from brand by an exposed offset. Default +60°
103
107
  * (sibling accent). Try 30° for a close sibling, 120° for triadic,
@@ -549,9 +553,9 @@ html[data-theme="dark"] {
549
553
  --ty-border-faint: var(--ty-color-neutral-faint);
550
554
 
551
555
  /* ----------------------------------------------------------------
552
- * Surfaces — canvas tinted slightly toward brand for warmth.
556
+ * Surfaces — monochrome by default; --ty-surface-chroma warms them.
553
557
  * --------------------------------------------------------------*/
554
- --ty-surface-canvas: oklch(0.985 0.005 var(--ty-brand-hue));
558
+ --ty-surface-canvas: oklch(0.985 var(--ty-surface-chroma) var(--ty-brand-hue));
555
559
  --ty-surface-content: oklch(1 0 0);
556
560
  --ty-surface-elevated: oklch(1 0 0);
557
561
  --ty-surface-floating: oklch(1 0 0);
@@ -562,8 +566,8 @@ html[data-theme="dark"] {
562
566
  * --------------------------------------------------------------*/
563
567
  --ty-input-bg: var(--ty-surface-input);
564
568
  --ty-input-color: var(--ty-color-neutral-strong);
565
- --ty-input-border: var(--ty-color-neutral-soft);
566
- --ty-input-border-hover: var(--ty-color-neutral-bold);
569
+ --ty-input-border: var(--ty-color-neutral-faint);
570
+ --ty-input-border-hover: var(--ty-color-neutral-soft);
567
571
  --ty-input-border-focus: var(--ty-color-primary);
568
572
  --ty-input-placeholder: var(--ty-color-neutral-soft);
569
573
  --ty-input-disabled-bg: var(--ty-color-neutral-faint);
@@ -979,12 +983,12 @@ html[data-theme="dark"] {
979
983
  --ty-border-soft: var(--ty-color-neutral-faint);
980
984
  --ty-border-faint: var(--ty-color-neutral-faint);
981
985
 
982
- /* Surfaces — flip dark with a hint of brand chroma. */
983
- --ty-surface-canvas: oklch(0.12 0.012 var(--ty-brand-hue));
984
- --ty-surface-content: oklch(0.16 0.012 var(--ty-brand-hue));
985
- --ty-surface-elevated: oklch(0.19 0.013 var(--ty-brand-hue));
986
- --ty-surface-floating: oklch(0.22 0.015 var(--ty-brand-hue));
987
- --ty-surface-input: oklch(0.18 0.012 var(--ty-brand-hue));
986
+ /* Surfaces — monochrome by default; --ty-surface-chroma warms them. */
987
+ --ty-surface-canvas: oklch(0.12 var(--ty-surface-chroma) var(--ty-brand-hue));
988
+ --ty-surface-content: oklch(0.16 var(--ty-surface-chroma) var(--ty-brand-hue));
989
+ --ty-surface-elevated: oklch(0.19 var(--ty-surface-chroma) var(--ty-brand-hue));
990
+ --ty-surface-floating: oklch(0.22 var(--ty-surface-chroma) var(--ty-brand-hue));
991
+ --ty-surface-input: oklch(0.18 var(--ty-surface-chroma) var(--ty-brand-hue));
988
992
 
989
993
  /* Inputs — re-declared at html.dark specificity. */
990
994
  --ty-input-bg: var(--ty-surface-input);
package/dist/tyrell.css CHANGED
@@ -336,8 +336,8 @@ COMPONENT TOKENS
336
336
  /* Input component tokens */
337
337
  --ty-input-bg: #ffffff;
338
338
  --ty-input-color: #111827;
339
- --ty-input-border: #d1d5db;
340
- --ty-input-border-hover: #9ca3af;
339
+ --ty-input-border: #e5e7eb;
340
+ --ty-input-border-hover: #d1d5db;
341
341
  --ty-input-border-focus: var(--ty-color-primary);
342
342
  --ty-input-shadow-focus: rgba(59, 130, 246, 0.1);
343
343
  --ty-input-placeholder: #9ca3af;
@@ -668,11 +668,11 @@ Emphasis logic inverts: lighter = more emphasis
668
668
  --ty-border-faint: #030712;
669
669
 
670
670
  /* Scrollbar - dark mode */
671
- --ty-scrollbar-thumb: rgba(255, 255, 255, 0.22);
672
- --ty-scrollbar-thumb-hover: rgba(255, 255, 255, 0.38);
673
- --ty-scrollbar-thumb-active: rgba(255, 255, 255, 0.48);
671
+ --ty-scrollbar-thumb: rgba(255, 255, 255, 0.13);
672
+ --ty-scrollbar-thumb-hover: rgba(255, 255, 255, 0.22);
673
+ --ty-scrollbar-thumb-active: rgba(255, 255, 255, 0.3);
674
674
  --ty-scrollbar-track: transparent;
675
- --ty-scrollbar-track-hover: rgba(255, 255, 255, 0.06);
675
+ --ty-scrollbar-track-hover: rgba(255, 255, 255, 0.04);
676
676
 
677
677
  --ty-surface-canvas: black;
678
678
  --ty-surface-content: #1a1a1a;
@@ -750,8 +750,8 @@ Emphasis logic inverts: lighter = more emphasis
750
750
  /* Input component tokens - dark mode */
751
751
  --ty-input-bg: #1b1b1b;
752
752
  --ty-input-color: #f9fafb;
753
- --ty-input-border: #505050;
754
- --ty-input-border-hover: #7f7f7f;
753
+ --ty-input-border: #3a3a3a;
754
+ --ty-input-border-hover: #505050;
755
755
  --ty-input-border-focus: var(--ty-color-primary);
756
756
  --ty-input-shadow-focus: rgba(96, 165, 250, 0.1);
757
757
  --ty-input-placeholder: #717171;