tyrell-components 1.0.0-RC13 → 1.0.0-RC14

package/lib/icons/material/filled.d.ts

@@ -2177,4 +2177,3 @@ export declare const starOutline = "<svg xmlns=\"http://www.w3.org/2000/svg\" he
 export declare const starPurple500 = "<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <g>\n    <g>\n      <path d=\"M0,0h24v24H0V0z\" fill=\"none\"/>\n    </g>\n  </g>\n  <g>\n    <path d=\"M12,8.89L12.94,12h2.82l-2.27,1.62l0.93,3.01L12,14.79l-2.42,1.84l0.93-3.01L8.24,12h2.82L12,8.89 M12,2l-2.42,8H2 l6.17,4.41L5.83,22L12,17.31L18.18,22l-2.35-7.59L22,10h-7.58L12,2L12,2z\"/>\n  </g>\n</svg>";
 export declare const toggleOff = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z\"/>\n</svg>";
 export declare const toggleOn = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z\"/>\n</svg>";
-//# sourceMappingURL=filled.d.ts.map

package/lib/icons/material/filled.js

@@ -1,12 +1,3 @@
-/**
- * Material Design Icons FILLED - Auto-generated
- * DO NOT EDIT THIS FILE MANUALLY
- * Generated from: https://github.com/google/material-design-icons
- * Style: filled
- * Total icons: 2170
- *
- * Note: Material icons have currentColor attributes added
- */
 export const icon123 = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" stroke-width="0" stroke="currentColor" fill="currentColor">
   <g>
     <rect fill="none" height="24" width="24"/>
@@ -14000,4 +13991,3 @@ export const toggleOn = `<svg xmlns="http://www.w3.org/2000/svg" height="24" vie
   <path d="M0 0h24v24H0z" fill="none"/>
   <path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>
 </svg>`;
-//# sourceMappingURL=filled.js.map

package/lib/icons/material/outlined.d.ts

@@ -2139,4 +2139,3 @@ export declare const starOutline = "<svg xmlns=\"http://www.w3.org/2000/svg\" he
 export declare const starPurple500 = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n  <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z\"/>\n</svg>";
 export declare const toggleOff = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n  <path d=\"M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zM7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/>\n</svg>";
 export declare const toggleOn = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/>\n</svg>";
-//# sourceMappingURL=outlined.d.ts.map

package/lib/icons/material/outlined.js

@@ -1,12 +1,3 @@
-/**
- * Material Design Icons OUTLINED - Auto-generated
- * DO NOT EDIT THIS FILE MANUALLY
- * Generated from: https://github.com/google/material-design-icons
- * Style: outlined
- * Total icons: 2132
- *
- * Note: Material icons have currentColor attributes added
- */
 export const icon123 = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" stroke-width="0" stroke="currentColor" fill="currentColor">
   <g>
     <rect fill="none" height="24" width="24"/>
@@ -14542,4 +14533,3 @@ export const toggleOn = `<svg xmlns="http://www.w3.org/2000/svg" height="24" vie
   <path d="M0 0h24v24H0z" fill="none"/>
   <path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
 </svg>`;
-//# sourceMappingURL=outlined.js.map

package/lib/icons/material/round.d.ts

@@ -2144,4 +2144,3 @@ export declare const starOutline = "<svg xmlns=\"http://www.w3.org/2000/svg\" he
 export declare const starPurple500 = "<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <g>\n    <g>\n      <path d=\"M0,0h24v24H0V0z\" fill=\"none\"/>\n    </g>\n  </g>\n  <g>\n    <path d=\"M12,8.89L12.94,12h2.82l-2.27,1.62l0.93,3.01L12,14.79l-2.42,1.84l0.93-3.01L8.24,12h2.82L12,8.89 M9.58,10H5.12 c-0.97,0-1.37,1.25-0.58,1.81l3.64,2.6l-1.43,4.61c-0.29,0.93,0.79,1.68,1.56,1.09L12,17.31l3.69,2.81 c0.77,0.59,1.85-0.16,1.56-1.09l-1.43-4.61l3.64-2.6c0.79-0.57,0.39-1.81-0.58-1.81h-4.46l-1.47-4.84c-0.29-0.95-1.63-0.95-1.91,0 L9.58,10z\"/>\n  </g>\n</svg>";
 export declare const toggleOff = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n  <path d=\"M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z\"/>\n</svg>";
 export declare const toggleOn = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z\"/>\n</svg>";
-//# sourceMappingURL=round.d.ts.map

package/lib/icons/material/round.js

@@ -1,12 +1,3 @@
-/**
- * Material Design Icons ROUND - Auto-generated
- * DO NOT EDIT THIS FILE MANUALLY
- * Generated from: https://github.com/google/material-design-icons
- * Style: round
- * Total icons: 2137
- *
- * Note: Material icons have currentColor attributes added
- */
 export const icon123 = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" stroke-width="0" stroke="currentColor" fill="currentColor">
   <g>
     <rect fill="none" height="24" width="24"/>
@@ -14776,4 +14767,3 @@ export const toggleOn = `<svg xmlns="http://www.w3.org/2000/svg" height="24" vie
   <path d="M0 0h24v24H0z" fill="none"/>
   <path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>
 </svg>`;
-//# sourceMappingURL=round.js.map

package/lib/icons/material/sharp.d.ts

@@ -2144,4 +2144,3 @@ export declare const starOutline = "<svg xmlns=\"http://www.w3.org/2000/svg\" he
 export declare const starPurple500 = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n  <path d=\"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z\"/>\n</svg>";
 export declare const toggleOff = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n  <path d=\"M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z\"/>\n</svg>";
 export declare const toggleOn = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z\"/>\n</svg>";
-//# sourceMappingURL=sharp.d.ts.map

package/lib/icons/material/sharp.js

@@ -1,12 +1,3 @@
-/**
- * Material Design Icons SHARP - Auto-generated
- * DO NOT EDIT THIS FILE MANUALLY
- * Generated from: https://github.com/google/material-design-icons
- * Style: sharp
- * Total icons: 2137
- *
- * Note: Material icons have currentColor attributes added
- */
 export const icon123 = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" stroke-width="0" stroke="currentColor" fill="currentColor">
   <g>
     <rect fill="none" height="24" width="24"/>
@@ -14186,4 +14177,3 @@ export const toggleOn = `<svg xmlns="http://www.w3.org/2000/svg" height="24" vie
   <path d="M0 0h24v24H0z" fill="none"/>
   <path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>
 </svg>`;
-//# sourceMappingURL=sharp.js.map

package/lib/icons/material/two-tone.d.ts

@@ -2182,4 +2182,3 @@ export declare const starOutline = "<svg xmlns=\"http://www.w3.org/2000/svg\" he
 export declare const starPurple500 = "<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <g>\n    <g>\n      <path d=\"M0,0h24v24H0V0z\" fill=\"none\"/>\n    </g>\n  </g>\n  <g>\n    <path d=\"M12,8.89L12.94,12h2.82l-2.27,1.62l0.93,3.01L12,14.79l-2.42,1.84l0.93-3.01L8.24,12h2.82L12,8.89 M12,2l-2.42,8H2 l6.17,4.41L5.83,22L12,17.31L18.18,22l-2.35-7.59L22,10h-7.58L12,2L12,2z\"/>\n  </g>\n</svg>";
 export declare const toggleOff = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <path d=\"M0 0h24v24H0V0z\" fill=\"none\"/>\n  <path d=\"M17 8H7c-2.21 0-4 1.79-4 4s1.79 4 4 4h10c2.21 0 4-1.79 4-4s-1.79-4-4-4zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z\" opacity=\".3\"/>\n  <path d=\"M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zM7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/>\n</svg>";
 export declare const toggleOn = "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" stroke-width=\"0\" stroke=\"currentColor\" fill=\"currentColor\">\n  <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n  <path d=\"M17 8H7c-2.21 0-4 1.79-4 4s1.79 4 4 4h10c2.21 0 4-1.79 4-4s-1.79-4-4-4zm0 7c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z\" opacity=\".3\"/>\n  <path d=\"M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/>\n</svg>";
-//# sourceMappingURL=two-tone.d.ts.map

package/lib/icons/material/two-tone.js

@@ -1,12 +1,3 @@
-/**
- * Material Design Icons TWO-TONE - Auto-generated
- * DO NOT EDIT THIS FILE MANUALLY
- * Generated from: https://github.com/google/material-design-icons
- * Style: two-tone
- * Total icons: 2175
- *
- * Note: Material icons have currentColor attributes added
- */
 export const icon123 = `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24" stroke-width="0" stroke="currentColor" fill="currentColor">
   <g>
     <rect fill="none" height="24" width="24"/>
@@ -17149,4 +17140,3 @@ export const toggleOn = `<svg xmlns="http://www.w3.org/2000/svg" height="24" vie
   <path d="M17 8H7c-2.21 0-4 1.79-4 4s1.79 4 4 4h10c2.21 0 4-1.79 4-4s-1.79-4-4-4zm0 7c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z" opacity=".3"/>
   <path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6zm0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4zm0-7c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
 </svg>`;
-//# sourceMappingURL=two-tone.js.map

package/lib/index.d.ts

@@ -84,4 +84,3 @@ declare global {
         };
     }
 }
-//# sourceMappingURL=index.d.ts.map

package/lib/index.js

@@ -1,5 +1,3 @@
-// Ty TypeScript Components
-// Modern, zero-dependency web components
 export { TyButton } from './components/button.js';
 export { TyIcon, IconRegistry } from './components/icon.js';
 export { TyTag } from './components/tag.js';
@@ -28,37 +26,21 @@ export { TyDatePicker } from './components/date-picker.js';
 export { TyResizeObserver } from './components/resize-observer.js';
 export { TyScrollContainer } from './components/scroll-container.js';
 export { CustomScrollbar, isCustomScrollbarEnabled } from './utils/custom-scrollbar.js';
-// Resize Observer
 export { getSize, onResize, getAllSizes } from './utils/resize-observer.js';
-// Loader registry — global override for the spinner SVG used by loading-aware components
 export { setLoaderSvg, getLoaderSvg, resetLoaderSvg } from './utils/loader-registry.js';
-// Property capture utilities for React/Reagent compatibility
 export { capturePreSetProperties, getCapturedValues, applyPreSetProperties, captureAndApplyProperties } from './utils/property-capture.js';
-// Utilities
 export { lockScroll, unlockScroll, forceUnlockAll, isLocked, isLockedBy, getActiveLocks, getLockState, enableDebug as enableScrollLockDebug, disableDebug as disableScrollLockDebug } from './utils/scroll-lock.js';
-// Icons
-// Note: Icon libraries moved to separate tyrell-icons package
-// Icon registry utility remains in core for registering custom icons
-// Version (auto-generated from package.json)
 import { VERSION } from './version.js';
-// Global API
-// Expose window.tyIcons for script tag usage
 import { registerIcons, getIcon, hasIcon, getIconNames, getCacheInfo, clearIcons, getCachedIcon } from './utils/icon-registry.js';
-// Export icon registry functions for advanced use
 export { registerIcons, getIcon, hasIcon, getIconNames, getCacheInfo, clearIcons, getCachedIcon };
-// Import resize observer utilities for window API
 import { getSize as getResizeSize, onResize as subscribeResize, getAllSizes } from './utils/resize-observer.js';
 if (typeof window !== 'undefined') {
     window.tyVersion = VERSION;
-    // One-time load banner — helps consumers confirm which version of the
-    // library their page is actually running. Filter in DevTools with
-    // "tyrell-components" if it's noisy.
     console.log(`%c[tyrell-components]%c v${VERSION}`, 'color:#06b6d4;font-weight:600', 'color:inherit;font-weight:400');
     window.tyIcons = {
         register: (icons) => {
             const count = Object.keys(icons).length;
             registerIcons(icons);
-            // Defer logging to not block registration
             setTimeout(() => {
                 console.log(`✅ Registered ${count} icons (cached for instant reload)`);
             }, 0);
@@ -69,11 +51,9 @@ if (typeof window !== 'undefined') {
         cacheInfo: () => getCacheInfo(),
         clearCache: () => clearIcons()
     };
-    // Resize Observer API
     window.tyResizeObserver = {
         getSize: (id) => getResizeSize(id),
         onResize: (id, callback) => subscribeResize(id, callback),
         get sizes() { return getAllSizes(); }
     };
 }
-//# sourceMappingURL=index.js.map

package/lib/styles/button.d.ts

@@ -9,10 +9,10 @@
  *               3 axes (color / hover-active / theme chroma-hue); literal in
  *               tyrell.css. The component does no color math for the fill.
  *               Depth chrome (border + drop shadow) IS computed here, from
- *               the fill, via relative color — see "Depth chrome" below.
+ *               the fill, via relative color — see the button.solid rule.
  *   - outlined → --ty-color-{flavor}-{strong|base|soft} (text === border at
  *               rest); hover/active/focus always resolve to -strong,
- *               whatever the resting tone was — see "Hover escalation".
+ *               whatever the resting tone was — see outlinedFlavor().
  *   - ghost    → same as outlined, text only (no border), --ty-bg-{flavor}-soft
  *               background on hover.
  *
@@ -22,23 +22,6 @@
  * generic --ty-color-neutral-strong text-emphasis token. Base/soft neutral
  * stay on the generic token like every other flavor.
  *
- * Depth chrome (solid only): a 1px border + soft drop shadow, both derived
- * from the fill via oklch(from …), scaled by --ty-button-depth (0–1). The
- * border reads the TONE'S RESTING fill (not the current/hover one) so it
- * stays stationary while the fill rises toward it on interaction. Offset
- * direction/magnitude is --ty-button-border-l (mode-flipped: no border at
- * all for colored solids in dark, a lit edge in light) with its own
- * stronger dial for neutral, --ty-button-border-l-neutral (ink has no hue
- * to separate it from the canvas). Escape hatches --ty-solid-border-color
- * / --ty-solid-border-width outrank the derivation entirely.
- *
- * Hover escalation (outlined/ghost): :hover/:active/:focus-visible always
- * resolve to the -strong tier regardless of starting tone — soft and base
- * both rise to the same peak on interaction. Composes with `muted` rather
- * than fighting it (see the escalation rules themselves for the exact
- * split) — a pressed muted button lands on the same color as a pressed
- * plain one of the same flavor.
- *
  * Per-instance overrides via host CSS variables:
  *   --ty-button-bg, --ty-button-bg-hover, --ty-button-color, --ty-button-border,
  *   --ty-solid-border-color, --ty-solid-border-width
@@ -46,4 +29,3 @@
 /** Rules for one custom (non-built-in) flavor across all three appearances. */
 export declare const buttonCustomFlavorCss: (base: string) => string;
 export declare const buttonStyles: string;
-//# sourceMappingURL=button.d.ts.map

package/lib/styles/button.js

@@ -1,91 +1,14 @@
-/**
- * Button Component Styles
- *
- * Three appearance variants × five semantic flavors × three tones (+/base/-).
- * Each variant uses ONE token system:
- *
- *   - solid    → flat per-segment tokens --ty-solid-{flavor}{,-hover,-active,
- *               -strong,-soft,-fg}. Derived in tyrell-theme.css via OKLCH on
- *               3 axes (color / hover-active / theme chroma-hue); literal in
- *               tyrell.css. The component does no color math for the fill.
- *               Depth chrome (border + drop shadow) IS computed here, from
- *               the fill, via relative color — see "Depth chrome" below.
- *   - outlined → --ty-color-{flavor}-{strong|base|soft} (text === border at
- *               rest); hover/active/focus always resolve to -strong,
- *               whatever the resting tone was — see "Hover escalation".
- *   - ghost    → same as outlined, text only (no border), --ty-bg-{flavor}-soft
- *               background on hover.
- *
- * Neutral is the exception in both outlined and ghost: its `+` tone reads
- * --ty-solid-neutral-strong (the ink dial solid buttons use — the only
- * value that actually inverts light↔dark for full contrast) instead of the
- * generic --ty-color-neutral-strong text-emphasis token. Base/soft neutral
- * stay on the generic token like every other flavor.
- *
- * Depth chrome (solid only): a 1px border + soft drop shadow, both derived
- * from the fill via oklch(from …), scaled by --ty-button-depth (0–1). The
- * border reads the TONE'S RESTING fill (not the current/hover one) so it
- * stays stationary while the fill rises toward it on interaction. Offset
- * direction/magnitude is --ty-button-border-l (mode-flipped: no border at
- * all for colored solids in dark, a lit edge in light) with its own
- * stronger dial for neutral, --ty-button-border-l-neutral (ink has no hue
- * to separate it from the canvas). Escape hatches --ty-solid-border-color
- * / --ty-solid-border-width outrank the derivation entirely.
- *
- * Hover escalation (outlined/ghost): :hover/:active/:focus-visible always
- * resolve to the -strong tier regardless of starting tone — soft and base
- * both rise to the same peak on interaction. Composes with `muted` rather
- * than fighting it (see the escalation rules themselves for the exact
- * split) — a pressed muted button lands on the same color as a pressed
- * plain one of the same flavor.
- *
- * Per-instance overrides via host CSS variables:
- *   --ty-button-bg, --ty-button-bg-hover, --ty-button-color, --ty-button-border,
- *   --ty-solid-border-color, --ty-solid-border-width
- */
 import { FLAVORS } from '../types/common.js';
-/* One block per flavor, per appearance. Selectors and tokens are formulaic —
-   see the section comments below for which token system each appearance uses.
-
-   Each generator takes an optional fallback flavor `fb`: token references
-   then become var(--ty-*-f, var(--ty-*-fb)). Built-ins pass no fallback
-   (their tokens always exist); buttonCustomFlavorCss() passes 'neutral' so a
-   custom flavor with missing tokens degrades to neutral instead of an
-   invisible button. */
 const tokenRef = (prefix, f, suffix, fb) => fb
     ? `var(${prefix}-${f}${suffix}, var(${prefix}-${fb}${suffix}))`
     : `var(${prefix}-${f}${suffix})`;
-/* Nudge a fill by an interaction offset (hover/active), tone-aware: each
-   tone's states derive from the TONE's own fill, not the base fill —
-   otherwise tone- hover jumps from the soft fill to near-base darkness.
-   States deliberately do NOT re-derive the text color: fg is decided by
-   the tone's REST fill and stays stable through interaction — the ±0.04/
-   0.08 L nudges keep AA for any rest-passing fill, and re-deriving would
-   flicker black↔white whenever a nudge crosses the fg threshold. */
 const nudged = (fillExpr, offsetDial) => `oklch(from ${fillExpr} calc(l + var(--ty-${offsetDial})) c h)`;
-/* Fill-relative nudge: moves TOWARD mid-lightness by the dial's magnitude,
-   whatever the fill. Needed for neutral+ — full-contrast ink sits at an L
-   extreme in both modes (near-black light / near-white dark), where the
-   MODE-directional dials clip into the L ceiling/floor and vanish. */
 const nudgedMid = (fillExpr, offsetDial) => `oklch(from ${fillExpr} calc(l + sign(0.5 - l) * abs(var(--ty-${offsetDial}))) c h)`;
-/* Solid rules assign --_solid-bg (the CURRENT fill — swapped by hover/
-   active) and --_solid-rest (the tone's RESTING fill — set only by rest/
-   tone rules, never by state rules). The base button.solid rule holds the
-   single set of formulas that consume them: background follows --_solid-bg;
-   the depth border derives from --_solid-rest so it stays STATIONARY while
-   the fill steps up on hover — the fill rises toward the lit edge instead
-   of dragging the edge along with it. */
 const solidFlavor = (f, fb) => {
     const solid = (suffix) => tokenRef('--ty-solid', f, suffix, fb);
-    // Neutral reads its own, stronger border offset (no hue separates ink
-    // from the canvas — see --ty-button-border-l-neutral in tyrell.css).
-    // Colored flavors must RESET to the plain dial: the bare button.solid
-    // rule (which matches every solid button) sets the neutral chain.
     const borderL = f === 'neutral'
         ? ' --_border-l: var(--ty-button-border-l-neutral, var(--ty-button-border-l, -0.15));'
-        : ' --_border-l: var(--ty-button-border-l, -0.15);';
-    // Neutral+ is full-contrast ink at an L extreme — its hover/active must
-    // move toward mid (fill-relative), not in the mode's direction.
+        : ' --_border-l: var(--_muted-border-l, var(--ty-button-border-l, -0.15));';
     const plusNudge = f === 'neutral' ? nudgedMid : nudged;
     return `
 button.solid.${f} { --_ring: ${tokenRef('--ty-color', f, '', fb)}; --_solid-bg: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('')})); --_solid-rest: var(--ty-button-bg, var(--_muted-solid-bg, ${solid('')}));${borderL} color: var(--ty-button-color, var(--_muted-solid-fg, ${solid('-fg')})); }
@@ -101,12 +24,6 @@ button.solid.${f}.tone-minus:active:not(:disabled) { --_solid-bg: ${nudged(solid
 };
 const outlinedFlavor = (f, fb) => {
     const color = (suffix) => tokenRef('--ty-color', f, suffix, fb);
-    // Neutral+ only: bare text/border need page contrast, which the
-    // per-flavor ladder is FOR (it deliberately inverts per mode) — pointing
-    // base/soft at the solid ink ramp was a real bug (dark-mode contrast
-    // against the canvas measured 1.01/1.20 — invisible; WCAG minimum is
-    // 4.5). Strong stays on ink: at 0.93 dark / 0.15 light it's still 16.5:1,
-    // and matches solid's "+" for the loud-CTA identity that was the ask.
     const textInk = (suffix) => (f === 'neutral' && suffix === '-strong' ? `var(--ty-solid-neutral${suffix})` : color(suffix));
     return `
 button.outlined.${f} {
@@ -144,15 +61,6 @@ button.outlined.${f}:focus-visible {
 };
 const ghostFlavor = (f, fb) => {
     const color = (suffix) => tokenRef('--ty-color', f, suffix, fb);
-    // Neutral+ only: bare text needs page contrast, which is what the
-    // per-flavor text ladder is FOR (it deliberately inverts per mode) — the
-    // solid ink ramp doesn't need to invert for readability, a fill reads as
-    // a shape regardless of its own lightness. Pointing base/soft neutral
-    // text at ink was a real bug: dark-mode contrast against the canvas
-    // measured 1.01/1.20 (WCAG minimum is 4.5), i.e. invisible. Strong stays
-    // on ink — at 0.93 dark / 0.15 light it's still far above threshold
-    // (16.5:1), and matches solid's "+" for the loud-CTA identity that was
-    // the actual ask.
     const ink = (suffix) => (f === 'neutral' && suffix === '-strong' ? `var(--ty-solid-neutral${suffix})` : color(suffix));
     return `
 button.ghost.${f}            { color: var(--ty-button-color, var(--_muted-ghost-fg, ${ink('')})); }
@@ -170,12 +78,11 @@ button.ghost.${f}:focus-visible {
 }
 `;
 };
-/** Rules for one custom (non-built-in) flavor across all three appearances. */
 export const buttonCustomFlavorCss = (base) => solidFlavor(base, 'neutral') + outlinedFlavor(base, 'neutral') + ghostFlavor(base, 'neutral');
 export const buttonStyles = `
 :host {
   display: inline-block;
-  font-family: var(--ty-font-sans);
+  font-family: inherit;
 }
 
 :host([wide]) {
@@ -184,6 +91,10 @@ export const buttonStyles = `
 }
 
 button {
+  /* Native form controls do NOT inherit font from the shadow host — the UA
+     stylesheet sets one on them, which beats inheritance. Must be explicit
+     here or the button silently falls back to the system font. */
+  font-family: inherit;
   position: relative;
   display: flex;
   align-items: center;
@@ -228,10 +139,8 @@ button:disabled {
   opacity: 0.6;
 }
 
-/* ===== LOADING STATE =====
-   Spinner overlays the button center; original content kept in flow but
-   hidden via visibility so width/height are preserved (no layout shift).
-*/
+/* Spinner overlays the button center; original content kept in flow but
+   hidden via visibility so width/height are preserved (no layout shift). */
 .loader-icon {
   display: none;
   align-items: center;
@@ -282,8 +191,7 @@ button.loading > .loader-icon {
   flex-grow: 1;
 }
 
-/* ===== SIZES =====
-   Buttons run a 4px ladder (24-40px). Shared scale with fields
+/* Buttons run a 4px ladder (24-40px). Shared scale with fields
    (--ty-size-sm/md/lg — see tyrell.css): field sm = button md (32px),
    field md = button lg (36px), field lg = button xl (40px) — a button
    and a field of the paired size sit flush, same height, in a row. */
@@ -333,8 +241,7 @@ button.xl {
   height: 2.5rem; /* 40px — matches field lg */
 }
 
-/* ===== ACTION (icon-only square) ===== */
-
+/* Action = icon-only square */
 button.action {
   gap: 0px !important;
   height: 2rem;
@@ -359,8 +266,7 @@ button.action.lg ::slotted(ty-icon) { height: 1.125rem; width: 1.125rem; }
 button.action.xl { height: 2.5rem; width: 2.5rem; }
 button.action.xl ::slotted(ty-icon) { height: 1.25rem; width: 1.25rem; }
 
-/* ===== MUTED =====
-   Show the neutral tokens at rest instead of the flavor color; reveal the
+/* MUTED: show the neutral tokens at rest instead of the flavor color; reveal the
    real flavor on interaction. Implemented as a fallback tier the flavor
    rules above already read (--_muted-*), which sits behind the public
    --ty-button-{bg,color,border} override slots and ahead of the flavor's
@@ -382,6 +288,7 @@ button.muted {
   --_muted-solid-fg: var(--ty-solid-neutral-fg);
   --_muted-outlined-line: var(--ty-color-neutral);
   --_muted-ghost-fg: var(--ty-color-neutral);
+  --_muted-border-l: var(--ty-button-border-l-neutral, var(--ty-button-border-l, -0.15));
 }
 button.muted.tone-plus {
   --_muted-solid-bg: var(--ty-solid-neutral-strong);
@@ -404,6 +311,7 @@ button.muted.tone-minus {
     --_muted-solid-fg: unset;
     --_muted-outlined-line: unset;
     --_muted-ghost-fg: unset;
+    --_muted-border-l: unset;
   }
 }
 button.muted:active:not(:disabled),
@@ -412,10 +320,9 @@ button.muted:focus-visible:not(:disabled) {
   --_muted-solid-fg: unset;
   --_muted-outlined-line: unset;
   --_muted-ghost-fg: unset;
+  --_muted-border-l: unset;
 }
 
-/* ===== PILL ===== */
-
 button.pill {
   border-radius: 9999px;
   padding-left: 1.25em;
@@ -441,13 +348,11 @@ button.pill.md:has(ty-icon:only-child) { min-width: 2rem; min-height: 2rem; }
 button.pill.lg:has(ty-icon:only-child) { min-width: 2.25rem; min-height: 2.25rem; }
 button.pill.xl:has(ty-icon:only-child) { min-width: 2.5rem; min-height: 2.5rem; }
 
-/* ============================================================
-   SOLID — flat: one variable per segment. No color math here; all the
+/* SOLID — flat: one variable per segment. No color math here; all the
    --ty-solid-{flavor}-{hover,active,strong,soft} tokens are DERIVED in
    tyrell-theme.css (OKLCH) or set literally in tyrell.css. Override any
    single token to recolor that one segment. Bare .solid = custom-flavor
-   fallback, themable via --ty-button-{bg,bg-hover,color}.
-   ============================================================ */
+   fallback, themable via --ty-button-{bg,bg-hover,color}. */
 
 button.solid {
   --_ring: var(--ty-color-neutral);
@@ -502,12 +407,10 @@ button.solid:focus-visible {
   box-shadow: 0 0 0 2px var(--ty-focus-ring-gap), 0 0 0 4px var(--_ring);
 }
 
-/* ============================================================
-   OUTLINED — transparent bg, text === border (uses --ty-color-*)
-   Bare .outlined rule = fallback for custom flavors. For outlined,
-   text is bound to border color (the rule "text === border"), so the
-   fallback chain prefers --ty-button-border, then --ty-button-color.
-   ============================================================ */
+/* OUTLINED — transparent bg, text === border (uses --ty-color-*).
+   Bare .outlined rule = fallback for custom flavors. Text is bound to
+   border color, so the fallback chain prefers --ty-button-border, then
+   --ty-button-color. */
 
 button.outlined {
   background: transparent;
@@ -520,10 +423,8 @@ button.outlined:hover:not(:disabled) {
 
 ${FLAVORS.map((f) => outlinedFlavor(f)).join('')}
 
-/* ============================================================
-   GHOST — text only, hover bg (uses --ty-color-* + --ty-bg-*-soft)
-   Bare .ghost rule = fallback for custom flavors.
-   ============================================================ */
+/* GHOST — text only, hover bg (uses --ty-color-* + --ty-bg-*-soft).
+   Bare .ghost rule = fallback for custom flavors. */
 
 button.ghost {
   background: transparent;
@@ -535,4 +436,3 @@ button.ghost:hover:not(:disabled) {
 }
 
 ${FLAVORS.map((f) => ghostFlavor(f)).join('')}`;
-//# sourceMappingURL=button.js.map

package/lib/styles/calendar-month.d.ts

@@ -1,8 +1,4 @@
-/**
- * Calendar Month Styles
- * Improved design with better visual hierarchy and size variants
- */
+/** Calendar Month Styles */
 /** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export declare const calendarMonthCustomFlavorCss: (base: string) => string;
 export declare const calendarMonthStyles: string;
-//# sourceMappingURL=calendar-month.d.ts.map