tyrell-components 1.0.0-TC7

package/lib/styles/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/styles/dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAy8B5B,qBAAqB;CACtB,CAAC"}

package/lib/styles/icon.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Icon Component Styles
+ * PORTED FROM: clj/ty/components/icon.css
+ */
+export declare const iconStyles = "\n:host {\n  /* Display & Layout - CRITICAL: No containment to prevent paint deferral */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n  \n  /* Dimensions with CSS variable support for flexibility */\n  width: var(--ty-icon-size, 1em);\n  height: var(--ty-icon-size, 1em);\n  \n  /* Enforce square aspect ratio */\n  aspect-ratio: 1 / 1;\n  \n  \n  /* Color & Transitions */\n  color: inherit;\n  transition: color var(--ty-transition-fast);\n  \n  /* Flex Behavior */\n  flex-shrink: 0;\n  \n  /* Visibility - Force immediate rendering */\n  visibility: visible !important;\n  opacity: 1;\n  \n  /* ANTI-FLICKER: Force browser to paint immediately */\n  will-change: contents;\n  \n  /* Prevent any sub-pixel rendering issues */\n  transform: translateZ(0);\n  -webkit-font-smoothing: antialiased;\n}\n\n/* The SVG element inside shadow DOM */\n:host svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n  \n  /* Force immediate SVG rendering */\n  will-change: auto;\n  transform: translateZ(0);\n}\n\n/* When used in slots, ensure proper display */\n:host([slot]) {\n  display: inline-flex;\n}\n\n/* Size variants via CSS classes on the host */\n:host(.icon-xs) {\n  width: 0.75em;\n  height: 0.75em;\n}\n\n:host(.icon-sm) {\n  width: 0.875em;\n  height: 0.875em;\n}\n\n:host(.icon-md) {\n  width: 1em;\n  height: 1em;\n}\n\n:host(.icon-lg) {\n  width: 1.25em;\n  height: 1.25em;\n}\n\n:host(.icon-xl) {\n  width: 1.5em;\n  height: 1.5em;\n}\n\n:host(.icon-2xl) {\n  width: 2em;\n  height: 2em;\n}\n\n/* Fixed pixel sizes */\n:host(.icon-12) {\n  width: 12px;\n  height: 12px;\n}\n\n:host(.icon-14) {\n  width: 14px;\n  height: 14px;\n}\n\n:host(.icon-16) {\n  width: 16px;\n  height: 16px;\n}\n\n:host(.icon-18) {\n  width: 18px;\n  height: 18px;\n}\n\n:host(.icon-20) {\n  width: 20px;\n  height: 20px;\n}\n\n:host(.icon-24) {\n  width: 24px;\n  height: 24px;\n}\n\n:host(.icon-32) {\n  width: 32px;\n  height: 32px;\n}\n\n:host(.icon-48) {\n  width: 48px;\n  height: 48px;\n}\n\n:host(.icon-64) {\n  width: 64px;\n  height: 64px;\n}\n\n:host(.icon-80) {\n  width: 80px;\n  height: 80px;\n}\n\n:host(.icon-96) {\n  width: 96px;\n  height: 96px;\n}\n\n/* Spinning animation - default tempo */\n:host(.icon-spin) {\n  animation: icon-spin 1s linear infinite;\n}\n\n/* Spinning animation - slow tempo */\n:host(.icon-spin.icon-tempo-slow) {\n  animation: icon-spin 2s linear infinite;\n}\n\n/* Spinning animation - fast tempo */\n:host(.icon-spin.icon-tempo-fast) {\n  animation: icon-spin 0.5s linear infinite;\n}\n\n@keyframes icon-spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Pulse animation - default tempo */\n:host(.icon-pulse) {\n  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Pulse animation - slow tempo */\n:host(.icon-pulse.icon-tempo-slow) {\n  animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Pulse animation - fast tempo */\n:host(.icon-pulse.icon-tempo-fast) {\n  animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@keyframes icon-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Accessibility: ensure icons are not announced by screen readers by default */\n:host {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/* Allow pointer events to pass through by default */\n:host(:not(.icon-clickable)) {\n  pointer-events: none;\n}\n\n/* Clickable icons */\n:host(.icon-clickable) {\n  cursor: pointer;\n  pointer-events: auto;\n  transition: color var(--ty-transition-fast), transform var(--ty-transition-fast);\n}\n\n:host(.icon-clickable:hover) {\n  transform: scale(1.1);\n}\n\n:host(.icon-clickable:active) {\n  transform: scale(0.95);\n}\n\n/* Disabled state */\n:host(.icon-disabled) {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Block display variant */\n:host(.icon-block) {\n  display: block;\n}\n";
+//# sourceMappingURL=icon.d.ts.map

package/lib/styles/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/styles/icon.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,UAAU,g4HAiOtB,CAAC"}

package/lib/styles/icon.js

@@ -0,0 +1,231 @@
+/**
+ * Icon Component Styles
+ * PORTED FROM: clj/ty/components/icon.css
+ */
+export const iconStyles = `
+:host {
+  /* Display & Layout - CRITICAL: No containment to prevent paint deferral */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  
+  /* Dimensions with CSS variable support for flexibility */
+  width: var(--ty-icon-size, 1em);
+  height: var(--ty-icon-size, 1em);
+  
+  /* Enforce square aspect ratio */
+  aspect-ratio: 1 / 1;
+  
+  
+  /* Color & Transitions */
+  color: inherit;
+  transition: color var(--ty-transition-fast);
+  
+  /* Flex Behavior */
+  flex-shrink: 0;
+  
+  /* Visibility - Force immediate rendering */
+  visibility: visible !important;
+  opacity: 1;
+  
+  /* ANTI-FLICKER: Force browser to paint immediately */
+  will-change: contents;
+  
+  /* Prevent any sub-pixel rendering issues */
+  transform: translateZ(0);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* The SVG element inside shadow DOM */
+:host svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  
+  /* Force immediate SVG rendering */
+  will-change: auto;
+  transform: translateZ(0);
+}
+
+/* When used in slots, ensure proper display */
+:host([slot]) {
+  display: inline-flex;
+}
+
+/* Size variants via CSS classes on the host */
+:host(.icon-xs) {
+  width: 0.75em;
+  height: 0.75em;
+}
+
+:host(.icon-sm) {
+  width: 0.875em;
+  height: 0.875em;
+}
+
+:host(.icon-md) {
+  width: 1em;
+  height: 1em;
+}
+
+:host(.icon-lg) {
+  width: 1.25em;
+  height: 1.25em;
+}
+
+:host(.icon-xl) {
+  width: 1.5em;
+  height: 1.5em;
+}
+
+:host(.icon-2xl) {
+  width: 2em;
+  height: 2em;
+}
+
+/* Fixed pixel sizes */
+:host(.icon-12) {
+  width: 12px;
+  height: 12px;
+}
+
+:host(.icon-14) {
+  width: 14px;
+  height: 14px;
+}
+
+:host(.icon-16) {
+  width: 16px;
+  height: 16px;
+}
+
+:host(.icon-18) {
+  width: 18px;
+  height: 18px;
+}
+
+:host(.icon-20) {
+  width: 20px;
+  height: 20px;
+}
+
+:host(.icon-24) {
+  width: 24px;
+  height: 24px;
+}
+
+:host(.icon-32) {
+  width: 32px;
+  height: 32px;
+}
+
+:host(.icon-48) {
+  width: 48px;
+  height: 48px;
+}
+
+:host(.icon-64) {
+  width: 64px;
+  height: 64px;
+}
+
+:host(.icon-80) {
+  width: 80px;
+  height: 80px;
+}
+
+:host(.icon-96) {
+  width: 96px;
+  height: 96px;
+}
+
+/* Spinning animation - default tempo */
+:host(.icon-spin) {
+  animation: icon-spin 1s linear infinite;
+}
+
+/* Spinning animation - slow tempo */
+:host(.icon-spin.icon-tempo-slow) {
+  animation: icon-spin 2s linear infinite;
+}
+
+/* Spinning animation - fast tempo */
+:host(.icon-spin.icon-tempo-fast) {
+  animation: icon-spin 0.5s linear infinite;
+}
+
+@keyframes icon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Pulse animation - default tempo */
+:host(.icon-pulse) {
+  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Pulse animation - slow tempo */
+:host(.icon-pulse.icon-tempo-slow) {
+  animation: icon-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Pulse animation - fast tempo */
+:host(.icon-pulse.icon-tempo-fast) {
+  animation: icon-pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes icon-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* Accessibility: ensure icons are not announced by screen readers by default */
+:host {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Allow pointer events to pass through by default */
+:host(:not(.icon-clickable)) {
+  pointer-events: none;
+}
+
+/* Clickable icons */
+:host(.icon-clickable) {
+  cursor: pointer;
+  pointer-events: auto;
+  transition: color var(--ty-transition-fast), transform var(--ty-transition-fast);
+}
+
+:host(.icon-clickable:hover) {
+  transform: scale(1.1);
+}
+
+:host(.icon-clickable:active) {
+  transform: scale(0.95);
+}
+
+/* Disabled state */
+:host(.icon-disabled) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Block display variant */
+:host(.icon-block) {
+  display: block;
+}
+`;
+//# sourceMappingURL=icon.js.map

package/lib/styles/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../src/styles/icon.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiOzB,CAAC"}

package/lib/styles/input.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Input Component Styles
+ * PORTED FROM: clj/ty/components/input.css
+ * Phase A: Regular input styles only (no checkbox, no numeric formatting)
+ */
+export declare const inputStyles = "\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n:host([size=\"xl\"]) {\n  font-size: 20px;\n}\n\n\n:host([size=\"xs\"]) {\n  font-size: 12px;\n}\n\n\n:host([size=\"sm\"]) {\n  font-size: 14px;\n}\n\n:host([size=\"lg\"]) {\n  font-size: 18px;\n}\n\n.input-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.input-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 12px;\n  display: flex;\n  align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ty-color-danger);\n  width: 12px;\n  height: 12px;\n  margin-left: 4px;\n  vertical-align: middle;\n}\n\n.required-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== INPUT WRAPPER WITH SLOTS ===== */\n\n.input-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem; /* No gap by default */\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-base);\n  background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));\n  transition: all 0.15s ease-in-out;\n  \n  /* Default size (md) */\n  min-height: 40px;\n  padding: 0 12px;\n}\n\n/* Wrapper states */\n.input-wrapper:hover:not(.disabled) {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.input-wrapper.focused {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n.input-wrapper.disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n}\n\n/* ===== SLOT STYLING ===== */\n\n/* Style slotted content directly (no wrappers needed) */\n::slotted([slot=\"start\"]),\n::slotted([slot=\"end\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--ty-color-text-soft);\n}\n\n/* Icon sizing for slotted icons */\n::slotted(ty-icon) {\n  width: 1em;\n  height: 1em;\n  flex-shrink: 0;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 12px;\n}\n\n/* Error state for wrapper */\n.input-wrapper.error {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n\n.input-wrapper.error.focused {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== INPUT BASE STYLING ===== */\n\ninput {\n  /* Reset and base styles \u2014 Linear-paired typography */\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: var(--input-color, var(--ty-input-color));\n  font-family: inherit;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  padding: 0;\n  margin: 0;\n}\n\n/* Remove number input spinner arrows */\ninput[type=\"number\"]::-webkit-outer-spin-button,\ninput[type=\"number\"]::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\n/* Disabled state */\ninput:disabled {\n  cursor: not-allowed;\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling */\ninput::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\n.input-wrapper.xs {\n  min-height: 32px;\n  padding: 0 8px;\n  border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));\n}\n\n.input-wrapper.xs input {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\n.input-wrapper.sm {\n  min-height: 36px;\n  padding: 0 10px;\n  border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));\n}\n\n.input-wrapper.sm input {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\n.input-wrapper.md {\n  min-height: 40px;\n  padding: 0 12px;\n  border-radius: var(--ty-input-radius-md, var(--ty-radius-base));\n}\n\n.input-wrapper.md input {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\n.input-wrapper.lg {\n  min-height: 44px;\n  padding: 0 14px;\n  border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));\n}\n\n.input-wrapper.lg input {\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\n.input-wrapper.xl {\n  min-height: 48px;\n  padding: 0 16px;\n  border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));\n}\n\n.input-wrapper.xl input {\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== SEMANTIC FLAVOR MODIFIERS ===== */\n\n/* Primary */\n.input-wrapper.primary {\n  border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.input-wrapper.primary:hover:not(.disabled) {\n  border-color: var(--ty-color-primary-mild);\n}\n\n.input-wrapper.primary.focused {\n  border-color: var(--ty-color-primary-mild);\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Secondary */\n.input-wrapper.secondary {\n  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.input-wrapper.secondary.focused {\n  border-color: var(--ty-color-secondary-mild);\n  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Success */\n.input-wrapper.success {\n  border-color: var(--ty-input-success-border);\n}\n\n.input-wrapper.success:hover:not(.disabled) {\n  border-color: var(--ty-color-success-mild);\n}\n\n.input-wrapper.success.focused {\n  border-color: var(--ty-color-success-mild);\n  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n/* Danger */\n.input-wrapper.danger {\n  border-color: var(--ty-input-danger-border);\n}\n\n.input-wrapper.danger:hover:not(.disabled) {\n  border-color: var(--ty-color-danger-mild);\n}\n\n.input-wrapper.danger.focused {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Warning */\n.input-wrapper.warning {\n  border-color: var(--ty-input-warning-border);\n}\n\n.input-wrapper.warning:hover:not(.disabled) {\n  border-color: var(--ty-color-warning-mild);\n}\n\n.input-wrapper.warning.focused {\n  border-color: var(--ty-color-warning-mild);\n  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Neutral (default) */\n.input-wrapper.neutral.focused {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ninput:focus-visible {\n  outline: none;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .input-wrapper {\n    border-width: 2px;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .input-wrapper {\n    transition: none;\n  }\n}\n\n/* ===== RESPONSIVE BEHAVIOR ===== */\n\n@media (max-width: 640px) {\n  .input-wrapper.lg {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.lg input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n\n  .input-wrapper.xl {\n    min-height: 44px;\n    padding: 0 14px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n  }\n}\n\n@media (max-width: 480px) {\n  .input-wrapper.xl {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n}\n\n/* ===== CHECKBOX STYLING ===== */\n\n.checkbox-container {\n  display: inline-flex;\n  align-items: center;\n  outline: none;\n  transition: all 0.15s ease-in-out;\n  user-select: none;\n  cursor: pointer;\n\n  /* Default size (md) - matching input sizes */\n  border-radius: 6px;\n  gap: var(--ty-spacing-1);\n  color: var(--ty-text-faint);\n}\n\n.checkbox-container[aria-checked=\"true\"] {\n  color: var(--ty-text);\n}\n\n/* Ensure slotted label content inherits the color from container */\n.checkbox-container ::slotted(*) {\n  color: inherit;\n  transition: color 0.15s ease-in-out;\n}\n\n.checkbox-container label {\n  cursor: pointer;\n}\n\n.checkbox-container label {\n  font-size: var(--ty-font-sm);\n}\n\n.checkbox-container.sm label {\n  font-size: var(--ty-font-xs);\n}\n\n.checkbox-container.lg label {\n  font-size: var(--ty-font-base);\n}\n\n.checkbox-container.xl label {\n  font-size: var(--ty-font-lg);\n}\n\n/* Checkbox input container - different layout for checkboxes */\n.input-container.checkbox-layout {\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n  width: auto;\n  /* Don't force full width for checkboxes */\n}\n\n.input-container.checkbox-layout .input-label {\n  margin-bottom: 0;\n  padding-left: 0;\n  order: 2;\n  cursor: pointer;\n  flex: 1;\n}\n\n.input-container.checkbox-layout .checkbox-container {\n  order: 1;\n  flex-shrink: 0;\n}\n\n/* Error message positioning for checkboxes */\n.input-container.checkbox-layout .error-message {\n  padding-left: 0;\n  margin-left: 52px;\n  /* Align with label text */\n}\n\n.checkbox-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  transition: color 0.15s ease-in-out;\n  pointer-events: none;\n  /* Let the container handle the click */\n}\n\n.checkbox-container svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* ===== CHECKBOX SIZE MODIFIERS ===== */\n\n.checkbox-container.xs svg {\n  width: 16px;\n  height: 16px;\n}\n\n/* Adjust error message margin for XS */\n.input-container.checkbox-layout .checkbox-container.xs~.error-message {\n  margin-left: 44px;\n}\n\n\n.checkbox-container.sm svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* Adjust error message margin for SM */\n.input-container.checkbox-layout .checkbox-container.sm~.error-message {\n  margin-left: 48px;\n}\n\n\n.checkbox-container.md svg {\n  width: 24px;\n  height: 24px;\n}\n\n\n.checkbox-container.lg svg {\n  width: 28px;\n  height: 28px;\n}\n\n.checkbox-container.xl svg {\n  width: 32px;\n  height: 32px;\n}\n\n\n.checkbox-container.xl svg {\n  font-size: 20px;\n}\n\n/* Adjust error message margin for LG */\n.input-container.checkbox-layout .checkbox-container.lg~.error-message {\n  margin-left: 56px;\n}\n\n\n/* Adjust error message margin for XL */\n.input-container.checkbox-layout .checkbox-container.xl~.error-message {\n  margin-left: 60px;\n  /* 48px + 12px gap */\n}\n\n/* ===== CHECKBOX SEMANTIC FLAVORS ===== */\n\n.checkbox-container.primary {\n  color: var(--ty-color-primary-soft);\n}\n\n\n.checkbox-container.primary[aria-checked=\"true\"] {\n  color: var(--ty-color-primary);\n}\n\n.checkbox-container.secondary {\n  color: var(--ty-color-secondary-soft);\n}\n\n\n.checkbox-container.secondary[aria-checked=\"true\"] {\n  color: var(--ty-color-secondary);\n}\n\n.checkbox-container.success {\n  color: var(--ty-color-success-soft);\n}\n\n\n.checkbox-container.success[aria-checked=\"true\"] {\n  color: var(--ty-color-success);\n}\n\n.checkbox-container.danger {\n  color: var(--ty-color-danger-soft);\n}\n\n.checkbox-container.danger[aria-checked=\"true\"] {\n  color: var(--ty-color-danger);\n}\n\n.checkbox-container.warning {\n  color: var(--ty-color-warning-soft);\n}\n\n.checkbox-container.warning[aria-checked=\"true\"] {\n  color: var(--ty-color-warning);\n}\n\n\n/* Neutral */\n.checkbox-container.neutral {\n  color: var(--ty-color-neutral-soft);\n}\n\n.checkbox-container.neutral[aria-checked=\"true\"] {\n  color: var(--ty-color-neutral);\n}\n\n/* Disabled state */\n.checkbox-container.disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.checkbox-container.disabled .checkbox-icon {\n  color: var(--ty-color-neutral-faint);\n}\n\n/* Error state */\n.checkbox-container.error .checkbox-icon {\n  color: var(--ty-color-danger);\n}\n\n.checkbox-container.error:focus {\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Required state */\n.checkbox-container.required .checkbox-icon {\n  /* Could add specific styling for required checkboxes */\n}\n\n/* ===== RESPONSIVE CHECKBOX BEHAVIOR ===== */\n\n@container (max-width: 480px) {\n  .checkbox-container.lg {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.lg svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .checkbox-container.xl {\n    width: 44px;\n    height: 44px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 22px;\n    height: 22px;\n  }\n}\n\n@container (max-width: 320px) {\n  .checkbox-container.xl {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 20px;\n    height: 20px;\n  }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n  .checkbox-container.lg {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.lg svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .checkbox-container.xl {\n    width: 44px;\n    height: 44px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 22px;\n    height: 22px;\n  }\n}\n\n@media (max-width: 480px) {\n  .checkbox-container.xl {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 20px;\n    height: 20px;\n  }\n}\n";
+//# sourceMappingURL=input.d.ts.map

package/lib/styles/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/styles/input.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,WAAW,07bAsqBvB,CAAA"}