tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/styles/input.js

@@ -1,359 +1,194 @@
-/**
- * Input Component Styles
- * PORTED FROM: clj/ty/components/input.css
- * Phase A: Regular input styles only (no checkbox, no numeric formatting)
- */
 import { FLAVORS } from "../types/common.js";
-/* Flavor rules only set --input-accent (border), --input-accent-bold
-   (hover/focus border), and --input-ring (focus shadow); the wrapper base
-   rules consume them. They double as the per-instance override API:
-   `ty-input { --input-accent: … }`. Neutral is skipped — it IS the default
-   chrome (--ty-input-* tokens), and input's auto-danger-on-error logic
-   relies on neutral being the unstyled state.
-
-   Fallback flavor `fb` is used for custom flavors: suffixed tokens fall
-   back to the custom base color first (a flavor defining only
-   --ty-color-X still gets sensible hover/focus), then to neutral.
-
-   Emphasis ladder mirrors the neutral chrome (faint rest → soft hover →
-   focus + ring): a flavored field rests on its -soft shade and only
-   escalates to the full color on hover/focus — a resting field shouldn't
-   shout its full-saturation border (tones shift the whole ladder). */
+import { fieldSizeVars } from "./field-size.js";
 const inputFlavor = (f, fb) => {
-    const c = (s) => fb
-        ? s
-            ? `var(--ty-color-${f}${s}, var(--ty-color-${f}, var(--ty-color-${fb}${s})))`
-            : `var(--ty-color-${f}, var(--ty-color-${fb}))`
-        : s
-            ? `var(--ty-color-${f}${s}, var(--ty-color-${f}))`
-            : `var(--ty-color-${f})`;
-    return `
+const c = (s) => fb
+? s
+? `var(--ty-color-${f}${s}, var(--ty-color-${f}, var(--ty-color-${fb}${s})))`
+: `var(--ty-color-${f}, var(--ty-color-${fb}))`
+: s
+? `var(--ty-color-${f}${s}, var(--ty-color-${f}))`
+: `var(--ty-color-${f})`;
+return `
 :host([flavor="${f}"]) {
-  --input-accent: var(--ty-input-${f}-border, ${c("-soft")});
-  --input-accent-bold: ${c("")};
-  --input-ring: color-mix(in oklab, ${c("")} 15%, transparent);
+--input-accent: var(--ty-input-${f}-border, ${c("-soft")});
+--input-accent-bold: ${c("")};
+--input-ring: color-mix(in oklab, ${c("")} 15%, transparent);
 }
 :host([flavor="${f}+"]) {
-  --input-accent: ${c("")};
-  --input-accent-bold: ${c("-strong")};
-  --input-ring: color-mix(in oklab, ${c("-strong")} 15%, transparent);
+--input-accent: ${c("")};
+--input-accent-bold: ${c("-strong")};
+--input-ring: color-mix(in oklab, ${c("-strong")} 15%, transparent);
 }
 :host([flavor="${f}-"]) {
-  --input-accent: ${c("-faint")};
-  --input-accent-bold: ${c("-soft")};
-  --input-ring: color-mix(in oklab, ${c("-soft")} 15%, transparent);
+--input-accent: ${c("-faint")};
+--input-accent-bold: ${c("-soft")};
+--input-ring: color-mix(in oklab, ${c("-soft")} 15%, transparent);
 }
 `;
 };
-/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export const inputCustomFlavorCss = (base) => inputFlavor(base, "neutral");
 export const inputStyles = `
+${fieldSizeVars}
 :host {
-  display: block;
-  font-family: var(--ty-font-sans);
-  width: 100%;
+display: block;
+font-family: inherit;
+width: 100%;
 }
-
-:host([size="sm"]) {
-  font-size: 14px;
-}
-
-:host([size="lg"]) {
-  font-size: 18px;
-}
-
 .input-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  box-sizing: border-box;
+display: flex;
+flex-direction: column;
+width: 100%;
+box-sizing: border-box;
 }
-
-/* ===== LABEL STYLING ===== */
-
 .ty-field-label {
-  font-size: var(--ty-font-sm);
-  line-height: var(--ty-leading-sm);
-  letter-spacing: var(--ty-tracking-sm);
-  font-weight: var(--ty-font-medium);
-  color: var(--ty-label-color);
-  margin-bottom: 6px;
-  padding-left: 12px;
-  display: flex;
-  align-items: center;
+font-size: var(--ty-field-label-font);
+line-height: var(--ty-field-label-leading);
+letter-spacing: var(--ty-tracking-sm);
+font-weight: var(--ty-font-medium);
+color: var(--ty-label-color);
+margin-bottom: var(--ty-field-label-gap);
+padding-left: var(--ty-field-outer-pad-x);
+display: flex;
+align-items: center;
 }
-
-/* Required indicator - using SVG icon */
 .required-icon {
-  display: inline-flex;
-  align-items: center;
-  color: var(--ty-color-danger);
-  width: 12px;
-  height: 12px;
-  margin-left: 4px;
-  vertical-align: middle;
+display: inline-flex;
+align-items: center;
+color: var(--ty-color-danger);
+width: 12px;
+height: 12px;
+margin-left: 4px;
+vertical-align: middle;
 }
-
 .required-icon svg {
-  width: 100%;
-  height: 100%;
+width: 100%;
+height: 100%;
 }
-
-/* ===== INPUT WRAPPER WITH SLOTS ===== */
-
 .input-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem; /* No gap by default */
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid var(--input-accent, var(--input-border, var(--ty-input-border)));
-  border-radius: var(--ty-radius-base);
-  background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));
-  transition: var(--ty-local-transition, all 0.15s ease-in-out);
-
-  /* Default size (md) */
-  min-height: var(--ty-size-md);
-  padding: 0 12px;
+display: flex;
+align-items: center;
+gap: 0.5rem;
+width: 100%;
+box-sizing: border-box;
+border: 1px solid var(--input-accent, var(--input-border, var(--ty-input-border)));
+border-radius: var(--ty-radius-base);
+background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));
+transition: var(--ty-local-transition, all 0.15s ease-in-out);
+min-height: var(--ty-field-height);
+padding: 0 var(--ty-field-pad-x);
 }
-
-/* Wrapper states — --input-accent* are set by the flavor rules below;
-   without a flavor attribute they're unset and the default chrome chain
-   (per-instance --input-* var, then --ty-input-* token) applies. */
-/* :not(.focused) — hover must never override focus. Without the guard this
-   rule out-ranks .focused by specificity, so hovering a FOCUSED unflavored
-   input swapped its primary focus border for the dimmer neutral hover
-   border (focus ring stayed, border dimmed — read as a glitch). Same
-   pattern as date-picker's :hover:not(.open). */
 .input-wrapper:hover:not(.disabled):not(.focused) {
-  border-color: var(--input-accent-bold, var(--input-border-hover, var(--ty-input-border-hover)));
+border-color: var(--input-accent-bold, var(--input-border-hover, var(--ty-input-border-hover)));
 }
-
 .input-wrapper.focused {
-  border-color: var(--input-accent-bold, var(--input-border-focus, var(--ty-input-border-focus)));
-  box-shadow: 0 0 0 3px var(--input-ring, var(--input-shadow-focus, var(--ty-input-shadow-focus)));
+border-color: var(--input-accent-bold, var(--input-border-focus, var(--ty-input-border-focus)));
+box-shadow: 0 0 0 3px var(--input-ring, var(--input-shadow-focus, var(--ty-input-shadow-focus)));
 }
-
 .input-wrapper.disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));
-  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));
+cursor: not-allowed;
+opacity: 0.5;
+background: var(--input-disabled-bg, var(--ty-input-disabled-bg));
+border-color: var(--input-disabled-border, var(--ty-input-disabled-border));
 }
-
-/* ===== SLOT STYLING ===== */
-
-/* Style slotted content directly (no wrappers needed) */
 ::slotted([slot="start"]),
 ::slotted([slot="end"]) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--ty-color-text-soft);
+display: flex;
+align-items: center;
+justify-content: center;
+flex-shrink: 0;
+color: var(--ty-color-text-soft);
 }
-
-/* Password reveal toggle (rendered for type="password") */
 .password-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  padding: 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: var(--input-placeholder, var(--ty-input-placeholder));
-  transition: var(--ty-local-transition, color 0.15s ease-in-out);
+display: flex;
+align-items: center;
+justify-content: center;
+flex-shrink: 0;
+width: 1.25rem;
+height: 1.25rem;
+padding: 0;
+border: none;
+background: none;
+cursor: pointer;
+color: var(--input-placeholder, var(--ty-input-placeholder));
+transition: var(--ty-local-transition, color 0.15s ease-in-out);
 }
 .password-toggle:hover {
-  color: var(--input-color, var(--ty-input-color));
+color: var(--input-color, var(--ty-input-color));
 }
 .password-toggle:focus-visible {
-  outline: 2px solid var(--input-accent, var(--ty-color-primary));
-  outline-offset: 2px;
-  border-radius: 2px;
+outline: 2px solid var(--input-accent, var(--ty-color-primary));
+outline-offset: 2px;
+border-radius: 2px;
 }
 .password-toggle svg {
-  width: 1rem;
-  height: 1rem;
+width: 1rem;
+height: 1rem;
 }
-
-/* Icon sizing for slotted icons */
 ::slotted(ty-icon) {
-  width: 1em;
-  height: 1em;
-  flex-shrink: 0;
+width: 1em;
+height: 1em;
+flex-shrink: 0;
 }
-
-/* ===== ERROR MESSAGE STYLING ===== */
-
 .error-message {
-  font-size: var(--ty-font-xs);
-  line-height: var(--ty-leading-xs);
-  letter-spacing: var(--ty-tracking-xs);
-  color: var(--ty-color-danger);
-  margin-top: 4px;
-  padding-left: 12px;
+font-size: var(--ty-font-xs);
+line-height: var(--ty-leading-xs);
+letter-spacing: var(--ty-tracking-xs);
+color: var(--ty-color-danger);
+margin-top: 4px;
+padding-left: var(--ty-field-outer-pad-x);
 }
-
-/* Error state for wrapper */
 .input-wrapper.error {
-  border-color: var(--ty-color-danger);
-  background: var(--ty-bg-danger-soft);
+border-color: var(--ty-color-danger);
+background: var(--ty-bg-danger-soft);
 }
-
 .input-wrapper.error.focused {
-  border-color: var(--ty-color-danger-bold);
-  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
+border-color: var(--ty-color-danger-bold);
+box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
 }
-
-/* ===== INPUT BASE STYLING ===== */
-
 input {
-  /* Reset and base styles — Linear-paired typography */
-  flex: 1;
-  min-width: 0;
-  box-sizing: border-box;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--input-color, var(--ty-input-color));
-  font-family: inherit;
-  font-size: var(--ty-font-sm);
-  line-height: var(--ty-leading-sm);
-  letter-spacing: var(--ty-tracking-sm);
-  font-weight: var(--ty-font-normal);
-  padding: 0;
-  margin: 0;
+flex: 1;
+min-width: 0;
+box-sizing: border-box;
+border: none;
+outline: none;
+background: transparent;
+color: var(--input-color, var(--ty-input-color));
+font-family: inherit;
+font-size: var(--ty-field-font);
+line-height: var(--ty-field-leading);
+letter-spacing: var(--ty-field-tracking);
+font-weight: var(--ty-font-normal);
+padding: 0;
+margin: 0;
 }
-
-/* Remove number input spinner arrows */
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+-webkit-appearance: none;
+margin: 0;
 }
-
 input[type="number"] {
-  -moz-appearance: textfield;
+-moz-appearance: textfield;
 }
-
-/* Disabled state */
 input:disabled {
-  cursor: not-allowed;
-  color: var(--input-disabled-color, var(--ty-input-disabled-color));
+cursor: not-allowed;
+color: var(--input-disabled-color, var(--ty-input-disabled-color));
 }
-
-/* Placeholder styling */
 input::placeholder {
-  color: var(--input-placeholder, var(--ty-input-placeholder));
-  font-weight: 400;
-}
-
-/* ===== SIZE MODIFIERS ===== */
-
-/* Small */
-.input-wrapper.sm {
-  min-height: var(--ty-size-sm);
-  padding: 0 10px;
-  border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));
-}
-
-.input-wrapper.sm input {
-  font-size: var(--ty-font-sm);
-  line-height: var(--ty-leading-sm);
-  letter-spacing: var(--ty-tracking-sm);
-}
-
-/* Medium (default) */
-.input-wrapper.md {
-  min-height: var(--ty-size-md);
-  padding: 0 12px;
-  border-radius: var(--ty-input-radius-md, var(--ty-radius-base));
-}
-
-.input-wrapper.md input {
-  font-size: var(--ty-font-sm);
-  line-height: var(--ty-leading-sm);
-  letter-spacing: var(--ty-tracking-sm);
+color: var(--input-placeholder, var(--ty-input-placeholder));
+font-weight: 400;
 }
-
-/* Large */
-.input-wrapper.lg {
-  min-height: var(--ty-size-lg);
-  padding: 0 14px;
-  border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));
-}
-
-.input-wrapper.lg input {
-  font-size: var(--ty-font-base);
-  line-height: var(--ty-leading-base);
-  letter-spacing: var(--ty-tracking-base);
-}
-
-/* ===== SEMANTIC FLAVOR MODIFIERS (set --input-accent*, consumed above) ===== */
 ${FLAVORS.filter((f) => f !== "neutral").map((f) => inputFlavor(f)).join("")}
-
-/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
-
 input:focus-visible {
-  outline: none;
+outline: none;
 }
-
-/* High contrast mode support */
 @media (prefers-contrast: high) {
-  .input-wrapper {
-    border-width: 2px;
-  }
+.input-wrapper {
+border-width: 2px;
 }
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-  .input-wrapper {
-    transition: none;
-  }
 }
-
-/* ===== RESPONSIVE BEHAVIOR ===== */
-
-@media (max-width: 640px) {
-  .input-wrapper.lg {
-    min-height: 40px;
-    padding: 0 12px;
-  }
-
-  .input-wrapper.lg input {
-    font-size: var(--ty-font-sm);
-    line-height: var(--ty-leading-sm);
-    letter-spacing: var(--ty-tracking-sm);
-  }
-
-  .input-wrapper.xl {
-    min-height: 44px;
-    padding: 0 14px;
-  }
-
-  .input-wrapper.xl input {
-    font-size: var(--ty-font-base);
-    line-height: var(--ty-leading-base);
-    letter-spacing: var(--ty-tracking-base);
-  }
+@media (prefers-reduced-motion: reduce) {
+.input-wrapper {
+transition: none;
 }
-
-@media (max-width: 480px) {
-  .input-wrapper.xl {
-    min-height: 40px;
-    padding: 0 12px;
-  }
-
-  .input-wrapper.xl input {
-    font-size: var(--ty-font-sm);
-    line-height: var(--ty-leading-sm);
-    letter-spacing: var(--ty-tracking-sm);
-  }
 }
 `;
-//# sourceMappingURL=input.js.map

package/lib/styles/modal.d.ts

@@ -4,5 +4,4 @@
  * CSS for the modal component wrapper.
  * The modal is a pure wrapper - all content styling is user-defined.
  */
-export declare const modalStyles = "\n/* Modal Host Styling */\n:host {\n  display: contents;\n  /* Don't interfere with layout */\n  /* CSS variables are now auto-generated via the with-vars? option */\n}\n\n/* ===== CLOSE BUTTON STYLING ===== */\n/* This is part of the modal wrapper functionality, not user content styling */\n\n.close-button {\n  position: absolute;\n  top: -8px;\n  right: -8px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n  transition: var(--ty-transition-colors);\n  z-index: 1;\n  color: #d8d8d8;\n\n  /* Remove all default browser styling that could cause outlines/borders */\n  outline: none;\n  box-shadow: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  /* Remove mobile tap highlights and focus rings */\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.close-button:hover {\n  color: white;\n}\n\n/* Explicitly remove focus and active states for all interaction modes */\n.close-button:focus,\n.close-button:focus-visible,\n.close-button:focus-within,\n.close-button:active {\n  outline: none !important;\n  box-shadow: none !important;\n  border: none !important;\n  background: transparent !important;\n}\n\n/* Override hover color even in focus/active states */\n.close-button:hover,\n.close-button:focus:hover,\n.close-button:active:hover {\n  color: white;\n}\n\n.close-button.hide {\n  visibility: hidden;\n}\n\n/* ===== DIALOG ELEMENT - PURE WRAPPER ===== */\n/* Modal dialog - provides only essential modal functionality without styling user content */\n\n.ty-modal-dialog {\n  /* Reset default dialog styles */\n  padding: 18px;\n  border: none;\n  margin: 0;\n  background: transparent;\n\n  /* Modal positioning - centered */\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  /* Layer management */\n  z-index: 1000;\n  overflow: hidden;\n\n  /* No sizing - let user content determine size */\n  max-width: 85vw;\n  max-height: 90vh;\n\n  outline: none;\n}\n\n/* ===== BACKDROP STYLING ===== */\n/* Backdrop is part of modal functionality, not user content */\n\n.ty-modal-dialog::backdrop {\n  background: var(--ty-modal-backdrop, rgba(0, 0, 0, 0.5));\n  backdrop-filter: var(--ty-modal-backdrop-blur, blur(2px));\n  animation: ty-modal-backdrop-enter var(--ty-modal-duration, 200ms) ease-out;\n}\n\n/* When backdrop is disabled */\n.ty-modal-dialog:not([data-backdrop])::backdrop {\n  background: transparent;\n  backdrop-filter: none;\n}\n\n/* ===== MODAL CONTENT CONTAINER ===== */\n/* Minimal container - no styling imposed on user content */\n\n.modal-content {\n  color: var(--ty-text);\n}\n\n/* ===== ANIMATION KEYFRAMES ===== */\n\n@keyframes ty-modal-backdrop-enter {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";
-//# sourceMappingURL=modal.d.ts.map
+export declare const modalStyles = "\n:host {\n  display: contents;\n  /* Don't interfere with layout */\n}\n\n/* Part of the modal wrapper functionality, not user content styling */\n.close-button {\n  position: absolute;\n  top: -8px;\n  right: -8px;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n  transition: var(--ty-transition-colors);\n  z-index: 1;\n  color: #d8d8d8;\n\n  /* Remove all default browser styling that could cause outlines/borders */\n  outline: none;\n  box-shadow: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  /* Remove mobile tap highlights and focus rings */\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.close-button:hover {\n  color: white;\n}\n\n/* Explicitly remove focus and active states for all interaction modes */\n.close-button:focus,\n.close-button:focus-visible,\n.close-button:focus-within,\n.close-button:active {\n  outline: none !important;\n  box-shadow: none !important;\n  border: none !important;\n  background: transparent !important;\n}\n\n/* Override hover color even in focus/active states */\n.close-button:hover,\n.close-button:focus:hover,\n.close-button:active:hover {\n  color: white;\n}\n\n.close-button.hide {\n  visibility: hidden;\n}\n\n/* Pure wrapper: only essential modal functionality, no styling of user content */\n.ty-modal-dialog {\n  /* Reset default dialog styles */\n  padding: 18px;\n  border: none;\n  margin: 0;\n  background: transparent;\n\n  /* Centered */\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  z-index: 1000;\n  overflow: hidden;\n\n  /* No sizing - let user content determine size */\n  max-width: 85vw;\n  max-height: 90vh;\n\n  outline: none;\n}\n\n/* Panel zoom-in synced with the backdrop fade (shadcn-style zoom-in-95).\n   Enter-only: animating exit on a native <dialog> means delaying close(). */\n.ty-modal-dialog[open] {\n  animation: ty-modal-enter var(--ty-modal-duration, 200ms) ease-out;\n}\n\n@keyframes ty-modal-enter {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.93);\n  }\n\n  to {\n    opacity: 1;\n    transform: translate(-50%, -50%) scale(1);\n  }\n}\n\n/* Backdrop is part of modal functionality, not user content */\n.ty-modal-dialog::backdrop {\n  background: var(--ty-modal-backdrop, rgba(0, 0, 0, 0.5));\n  backdrop-filter: var(--ty-modal-backdrop-blur, blur(2px));\n  animation: ty-modal-backdrop-enter var(--ty-modal-duration, 200ms) ease-out;\n}\n\n/* When backdrop is disabled */\n.ty-modal-dialog:not([data-backdrop])::backdrop {\n  background: transparent;\n  backdrop-filter: none;\n}\n\n/* Minimal container - no styling imposed on user content */\n.modal-content {\n  color: var(--ty-text);\n}\n\n@keyframes ty-modal-backdrop-enter {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n";