tyrell-components 1.0.0-TC39 → 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 +41 -0
  2. package/css/tyrell.css +11 -6
  3. package/dist/tyrell-theme.css +41 -0
  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
@@ -1371,3 +1371,44 @@ html:root,
1371
1371
  transition-timing-function: ease;
1372
1372
  }
1373
1373
  }
1374
+
1375
+ /* Interactive components (button, input, switch, tabs, …) each carry their
1376
+ * OWN short transition — background-color/border-color/color at 0.15–0.2s —
1377
+ * for snappy hover/focus/active feedback. CSS transitions fire on ANY
1378
+ * computed-value change, not just interaction, so a theme switch also
1379
+ * (re-)triggers every one of those, racing the coordinated 0.45s dial
1380
+ * crossfade above at a different speed on every element — hundreds of
1381
+ * mistimed transitions instead of one wash, which reads as jittery rather
1382
+ * than smooth.
1383
+ *
1384
+ * `.ty-theme-switching` is an opt-in escape hatch: add it to `<html>` (or
1385
+ * a scoped `[data-ty-theme]` root) for the duration of a theme switch to
1386
+ * silence local transitions on its descendants — NOT on the switching
1387
+ * element itself, so the dial crossfade above is untouched. Five lines of
1388
+ * JS around your theme toggle:
1389
+ *
1390
+ * root.classList.add('ty-theme-switching');
1391
+ * root.classList.toggle('dark'); // or flip the theme pack
1392
+ * setTimeout(() => root.classList.remove('ty-theme-switching'),
1393
+ * parseFloat(getComputedStyle(root)
1394
+ * .getPropertyValue('--ty-theme-transition')) * 1000 || 450);
1395
+ *
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
+ }
1410
+ .ty-theme-switching *,
1411
+ .ty-theme-switching *::before,
1412
+ .ty-theme-switching *::after {
1413
+ transition: none !important;
1414
+ }
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
@@ -1371,3 +1371,44 @@ html:root,
1371
1371
  transition-timing-function: ease;
1372
1372
  }
1373
1373
  }
1374
+
1375
+ /* Interactive components (button, input, switch, tabs, …) each carry their
1376
+ * OWN short transition — background-color/border-color/color at 0.15–0.2s —
1377
+ * for snappy hover/focus/active feedback. CSS transitions fire on ANY
1378
+ * computed-value change, not just interaction, so a theme switch also
1379
+ * (re-)triggers every one of those, racing the coordinated 0.45s dial
1380
+ * crossfade above at a different speed on every element — hundreds of
1381
+ * mistimed transitions instead of one wash, which reads as jittery rather
1382
+ * than smooth.
1383
+ *
1384
+ * `.ty-theme-switching` is an opt-in escape hatch: add it to `<html>` (or
1385
+ * a scoped `[data-ty-theme]` root) for the duration of a theme switch to
1386
+ * silence local transitions on its descendants — NOT on the switching
1387
+ * element itself, so the dial crossfade above is untouched. Five lines of
1388
+ * JS around your theme toggle:
1389
+ *
1390
+ * root.classList.add('ty-theme-switching');
1391
+ * root.classList.toggle('dark'); // or flip the theme pack
1392
+ * setTimeout(() => root.classList.remove('ty-theme-switching'),
1393
+ * parseFloat(getComputedStyle(root)
1394
+ * .getPropertyValue('--ty-theme-transition')) * 1000 || 450);
1395
+ *
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
+ }
1410
+ .ty-theme-switching *,
1411
+ .ty-theme-switching *::before,
1412
+ .ty-theme-switching *::after {
1413
+ transition: none !important;
1414
+ }
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