tyrell-components 1.0.0-TC40 → 1.0.0-TC41

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 (40) hide show
  1. package/css/tyrell-theme.css +14 -1
  2. package/css/tyrell.css +11 -6
  3. package/dist/tyrell-theme.css +14 -1
  4. package/dist/tyrell.css +11 -6
  5. package/dist/tyrell.js +1 -1
  6. package/lib/styles/button.js +1 -1
  7. package/lib/styles/calendar-month.js +1 -1
  8. package/lib/styles/calendar-navigation.d.ts +1 -1
  9. package/lib/styles/calendar-navigation.d.ts.map +1 -1
  10. package/lib/styles/calendar-navigation.js +1 -1
  11. package/lib/styles/checkbox.js +2 -2
  12. package/lib/styles/copy.js +2 -2
  13. package/lib/styles/custom-scrollbar.d.ts +1 -1
  14. package/lib/styles/custom-scrollbar.d.ts.map +1 -1
  15. package/lib/styles/custom-scrollbar.js +2 -2
  16. package/lib/styles/date-picker.js +1 -1
  17. package/lib/styles/file-upload.d.ts +1 -1
  18. package/lib/styles/file-upload.d.ts.map +1 -1
  19. package/lib/styles/file-upload.js +3 -3
  20. package/lib/styles/input.js +3 -3
  21. package/lib/styles/radio.js +1 -1
  22. package/lib/styles/scroll-container.d.ts +1 -1
  23. package/lib/styles/scroll-container.d.ts.map +1 -1
  24. package/lib/styles/step.d.ts +1 -1
  25. package/lib/styles/step.d.ts.map +1 -1
  26. package/lib/styles/switch.js +2 -2
  27. package/lib/styles/tab.d.ts +1 -1
  28. package/lib/styles/tab.d.ts.map +1 -1
  29. package/lib/styles/tabs.d.ts +1 -1
  30. package/lib/styles/tabs.d.ts.map +1 -1
  31. package/lib/styles/tabs.js +1 -1
  32. package/lib/styles/textarea.d.ts +1 -1
  33. package/lib/styles/textarea.d.ts.map +1 -1
  34. package/lib/styles/textarea.js +5 -5
  35. package/lib/styles/wizard.d.ts +1 -1
  36. package/lib/styles/wizard.d.ts.map +1 -1
  37. package/lib/styles/wizard.js +3 -3
  38. package/lib/version.d.ts +1 -1
  39. package/lib/version.js +1 -1
  40. package/package.json +1 -1
package/css/tyrell-theme.css CHANGED
@@ -1393,7 +1393,20 @@ html:root,
1393
1393
  * parseFloat(getComputedStyle(root)
1394
1394
  * .getPropertyValue('--ty-theme-transition')) * 1000 || 450);
1395
1395
  *
1396
- * Purely additive — nothing here runs unless you add the class yourself. */
1396
+ * Two mechanisms, because Shadow DOM blocks the first from reaching the
1397
+ * second: the `*` rule below only matches LIGHT-DOM elements (your own
1398
+ * markup, Tailwind-transitioned nav items, etc.) — it cannot reach inside
1399
+ * any ty-* component's shadow root, style encapsulation blocks a document
1400
+ * stylesheet's universal selector from crossing that boundary. Every ty-*
1401
+ * component's OWN local transition is instead wired to the inheriting
1402
+ * custom property `--ty-local-transition` (unset by default; components
1403
+ * fall back to their normal value) — custom properties DO inherit through
1404
+ * shadow boundaries, so setting it once here reaches every component's
1405
+ * internal styles for free. Purely additive — nothing here runs unless you
1406
+ * add the class yourself. */
1407
+ .ty-theme-switching {
1408
+ --ty-local-transition: none;
1409
+ }
1397
1410
  .ty-theme-switching *,
1398
1411
  .ty-theme-switching *::before,
1399
1412
  .ty-theme-switching *::after {
package/css/tyrell.css CHANGED
@@ -506,14 +506,19 @@ DESIGN SYSTEM TOKENS
506
506
  --ty-line-height-relaxed: 1.625;
507
507
  --ty-line-height-loose: 2;
508
508
 
509
- /* Transitions */
509
+ /* Transitions. Each routes through --ty-local-transition first — unset by
510
+ default (falls through to the real value below), but the theme engine's
511
+ .ty-theme-switching sets it to `none` for the duration of a theme swap,
512
+ so components using these tokens don't run their own hover/focus
513
+ transition at the same time as the coordinated theme crossfade. See
514
+ tyrell-theme.css SECTION 3 — THEME TRANSITIONS. */
510
515
  --ty-transition-none: none;
511
- --ty-transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
512
- --ty-transition-colors:
516
+ --ty-transition-all: var(--ty-local-transition, all 150ms cubic-bezier(0.4, 0, 0.2, 1));
517
+ --ty-transition-colors: var(--ty-local-transition,
513
518
  bg-color, border-color, color, fill,
514
- stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
515
- --ty-transition-shadow: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
516
- --ty-transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
519
+ stroke 150ms cubic-bezier(0.4, 0, 0.2, 1));
520
+ --ty-transition-shadow: var(--ty-local-transition, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1));
521
+ --ty-transition-transform: var(--ty-local-transition, transform 150ms cubic-bezier(0.4, 0, 0.2, 1));
517
522
 
518
523
  /* Component Sizes — single source of truth for FIELD heights.
519
524
  Fields (ty-input, ty-select, ty-date-picker) come in exactly three
package/dist/tyrell-theme.css CHANGED
@@ -1393,7 +1393,20 @@ html:root,
1393
1393
  * parseFloat(getComputedStyle(root)
1394
1394
  * .getPropertyValue('--ty-theme-transition')) * 1000 || 450);
1395
1395
  *
1396
- * Purely additive — nothing here runs unless you add the class yourself. */
1396
+ * Two mechanisms, because Shadow DOM blocks the first from reaching the
1397
+ * second: the `*` rule below only matches LIGHT-DOM elements (your own
1398
+ * markup, Tailwind-transitioned nav items, etc.) — it cannot reach inside
1399
+ * any ty-* component's shadow root, style encapsulation blocks a document
1400
+ * stylesheet's universal selector from crossing that boundary. Every ty-*
1401
+ * component's OWN local transition is instead wired to the inheriting
1402
+ * custom property `--ty-local-transition` (unset by default; components
1403
+ * fall back to their normal value) — custom properties DO inherit through
1404
+ * shadow boundaries, so setting it once here reaches every component's
1405
+ * internal styles for free. Purely additive — nothing here runs unless you
1406
+ * add the class yourself. */
1407
+ .ty-theme-switching {
1408
+ --ty-local-transition: none;
1409
+ }
1397
1410
  .ty-theme-switching *,
1398
1411
  .ty-theme-switching *::before,
1399
1412
  .ty-theme-switching *::after {
package/dist/tyrell.css CHANGED
@@ -506,14 +506,19 @@ DESIGN SYSTEM TOKENS
506
506
  --ty-line-height-relaxed: 1.625;
507
507
  --ty-line-height-loose: 2;
508
508
 
509
- /* Transitions */
509
+ /* Transitions. Each routes through --ty-local-transition first — unset by
510
+ default (falls through to the real value below), but the theme engine's
511
+ .ty-theme-switching sets it to `none` for the duration of a theme swap,
512
+ so components using these tokens don't run their own hover/focus
513
+ transition at the same time as the coordinated theme crossfade. See
514
+ tyrell-theme.css SECTION 3 — THEME TRANSITIONS. */
510
515
  --ty-transition-none: none;
511
- --ty-transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
512
- --ty-transition-colors:
516
+ --ty-transition-all: var(--ty-local-transition, all 150ms cubic-bezier(0.4, 0, 0.2, 1));
517
+ --ty-transition-colors: var(--ty-local-transition,
513
518
  bg-color, border-color, color, fill,
514
- stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
515
- --ty-transition-shadow: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
516
- --ty-transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
519
+ stroke 150ms cubic-bezier(0.4, 0, 0.2, 1));
520
+ --ty-transition-shadow: var(--ty-local-transition, box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1));
521
+ --ty-transition-transform: var(--ty-local-transition, transform 150ms cubic-bezier(0.4, 0, 0.2, 1));
517
522
 
518
523
  /* Component Sizes — single source of truth for FIELD heights.
519
524
  Fields (ty-input, ty-select, ty-date-picker) come in exactly three