tyrell-components 1.0.0-RC10

package/lib/styles/multiselect.js.map

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

package/lib/styles/option.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Option Component Styles
+ * PORTED FROM: clj/ty/components/option.css
+ */
+export declare const optionStyles = "\n/* Ty Option Component Styles */\n\n.option-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ty-spacing-2);\n  box-sizing: border-box;\n  width: 100%;\n\n  /* Ensure content is clickable */\n  cursor: pointer;\n  user-select: none;\n\n  /* Smooth transitions */\n  transition: var(--ty-transition-all);\n\n  /* Text styling \u2014 Linear-paired typography */\n  color: var(--ty-text);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n}\n\n:host([cloned]) .option-content {\n  padding: 0px;\n  background: transparent;\n}\n\n.option-content:hover {\n  background: var(--ty-bg-primary-soft);\n}\n\n.option-content[highlighted] {\n  background: var(--ty-bg-primary-soft);\n  color: var(--ty-text-strong);\n  font-weight: var(--ty-font-semibold);\n}\n\n.option-content[selected] {\n  background: var(--ty-bg-primary-bold);\n  color: var(--ty-text-strong);\n  font-weight: var(--ty-font-medium);\n}\n\n.option-text {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.option-clear-btn {\n  flex-shrink: 0;\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.5);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  padding: 0;\n  transition: all 150ms ease;\n  opacity: 0.9;\n}\n\n.option-clear-btn:hover {\n  background: rgba(0, 0, 0, 0.7);\n  opacity: 1;\n  transform: scale(1.05);\n}\n\n.option-clear-btn:active {\n  background: rgba(0, 0, 0, 0.85);\n  transform: scale(0.95);\n}\n\n.option-clear-btn svg {\n  width: 16px;\n  height: 16px;\n  color: #ffffff;\n  stroke-width: 2.5;\n}\n\n.option-content[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n/* Ensure nested elements inherit proper styling */\n.option-content * {\n  pointer-events: none;\n}\n\n/* CRITICAL: Re-enable pointer events on clear button */\n.option-clear-btn {\n  pointer-events: auto !important;\n}\n\n.option-clear-btn * {\n  pointer-events: none;\n}\n";
+//# sourceMappingURL=option.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"option.d.ts","sourceRoot":"","sources":["../../src/styles/option.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,YAAY,qrEA8GxB,CAAA"}

package/lib/styles/option.js

@@ -0,0 +1,116 @@
+/**
+ * Option Component Styles
+ * PORTED FROM: clj/ty/components/option.css
+ */
+export const optionStyles = `
+/* Ty Option Component Styles */
+
+.option-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ty-spacing-2);
+  box-sizing: border-box;
+  width: 100%;
+
+  /* Ensure content is clickable */
+  cursor: pointer;
+  user-select: none;
+
+  /* Smooth transitions */
+  transition: var(--ty-transition-all);
+
+  /* Text styling — Linear-paired typography */
+  color: var(--ty-text);
+  font-family: var(--ty-font-sans);
+  font-size: var(--ty-font-sm);
+  line-height: var(--ty-leading-sm);
+  letter-spacing: var(--ty-tracking-sm);
+  padding: var(--ty-spacing-2) var(--ty-spacing-3);
+}
+
+:host([cloned]) .option-content {
+  padding: 0px;
+  background: transparent;
+}
+
+.option-content:hover {
+  background: var(--ty-bg-primary-soft);
+}
+
+.option-content[highlighted] {
+  background: var(--ty-bg-primary-soft);
+  color: var(--ty-text-strong);
+  font-weight: var(--ty-font-semibold);
+}
+
+.option-content[selected] {
+  background: var(--ty-bg-primary-bold);
+  color: var(--ty-text-strong);
+  font-weight: var(--ty-font-medium);
+}
+
+.option-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.option-clear-btn {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 0;
+  transition: all 150ms ease;
+  opacity: 0.9;
+}
+
+.option-clear-btn:hover {
+  background: rgba(0, 0, 0, 0.7);
+  opacity: 1;
+  transform: scale(1.05);
+}
+
+.option-clear-btn:active {
+  background: rgba(0, 0, 0, 0.85);
+  transform: scale(0.95);
+}
+
+.option-clear-btn svg {
+  width: 16px;
+  height: 16px;
+  color: #ffffff;
+  stroke-width: 2.5;
+}
+
+.option-content[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.option-content[hidden] {}
+
+/* Ensure nested elements inherit proper styling */
+.option-content * {
+  pointer-events: none;
+}
+
+/* CRITICAL: Re-enable pointer events on clear button */
+.option-clear-btn {
+  pointer-events: auto !important;
+}
+
+.option-clear-btn * {
+  pointer-events: none;
+}
+`;
+//# sourceMappingURL=option.js.map

package/lib/styles/option.js.map

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

package/lib/styles/popup.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Popup Component Styles
+ *
+ * Popup component with dropdown-like behavior and tooltip positioning.
+ * Uses dialog element for top layer rendering like dropdown and date-picker.
+ */
+export declare const popupStyles = "\n/* Popup component with dropdown-like behavior and tooltip positioning */\n/* Uses dialog element for top layer rendering like dropdown and date-picker */\n\n.popup-dialog {\n  position: fixed;\n  top: 0;\n  left: 0;\n\n  /* Reset dialog defaults */\n  margin: 0;\n  border: none;\n  background: transparent;\n  max-width: none;\n  max-height: none;\n\n  /* Shadow infrastructure - provide space for user shadows */\n  padding: var(--popup-padding, 16px);\n\n  /* Hidden by default - even when [open] (for positioning phase) */\n  visibility: hidden;\n  opacity: 0;\n  /* NO TRANSFORM here - apply only when animating to avoid measurement errors! */\n\n  /* Smooth transitions */\n  transition:\n    opacity 150ms ease-out,\n    visibility 150ms ease-out,\n    transform 150ms ease-out;\n\n  /* Prevent interactions when hidden */\n  pointer-events: none;\n}\n\n/* Apply position variables only when position is calculated (like dropdown) */\n.popup-dialog.position-calculated {\n  top: var(--popup-y, 0px);\n  left: var(--popup-x, 0px);\n}\n\n/* Apply scale for entrance animation (right before .open) */\n.popup-dialog.preparing-animation {\n  transform: scale(0.95);\n}\n\n/* When open - smooth entrance animation */\n.popup-dialog.open {\n  visibility: visible;\n  opacity: 1;\n  transform: scale(1);\n  pointer-events: auto;\n}\n\n/* Make dialog backdrop transparent like dropdown/date-picker */\n.popup-dialog::backdrop {\n  background: transparent;\n}\n\n/* Inner container - neutral structural container */\n.popup-container {\n  /* No default styling - just provides structure */\n  /* Users control all visual aspects via slotted content */\n  display: contents;\n}\n\n/* Content slot styling */\n#popup-content {\n  /* Allow slotted content to define its own styling */\n  display: contents;\n}\n\n/* Remove default styling from slotted content - users have full control */\n#popup-content ::slotted(*) {\n  /* Remove default styling that conflicts with user styling */\n  /* Users now have complete control over popup appearance */\n  /* background: unset; */\n  /* border: unset; */\n  /* box-shadow: unset; */\n\n  /* Only maintain essential positioning */\n  position: relative;\n\n  /* Prevent content from being too wide - still helpful */\n  max-width: min(400px, 90vw);\n  max-height: min(500px, 80vh);\n  overflow: auto;\n}\n";
+//# sourceMappingURL=popup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/styles/popup.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,gzEAuFvB,CAAC"}

package/lib/styles/popup.js

@@ -0,0 +1,95 @@
+/**
+ * Popup Component Styles
+ *
+ * Popup component with dropdown-like behavior and tooltip positioning.
+ * Uses dialog element for top layer rendering like dropdown and date-picker.
+ */
+export const popupStyles = `
+/* Popup component with dropdown-like behavior and tooltip positioning */
+/* Uses dialog element for top layer rendering like dropdown and date-picker */
+
+.popup-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  /* Reset dialog defaults */
+  margin: 0;
+  border: none;
+  background: transparent;
+  max-width: none;
+  max-height: none;
+
+  /* Shadow infrastructure - provide space for user shadows */
+  padding: var(--popup-padding, 16px);
+
+  /* Hidden by default - even when [open] (for positioning phase) */
+  visibility: hidden;
+  opacity: 0;
+  /* NO TRANSFORM here - apply only when animating to avoid measurement errors! */
+
+  /* Smooth transitions */
+  transition:
+    opacity 150ms ease-out,
+    visibility 150ms ease-out,
+    transform 150ms ease-out;
+
+  /* Prevent interactions when hidden */
+  pointer-events: none;
+}
+
+/* Apply position variables only when position is calculated (like dropdown) */
+.popup-dialog.position-calculated {
+  top: var(--popup-y, 0px);
+  left: var(--popup-x, 0px);
+}
+
+/* Apply scale for entrance animation (right before .open) */
+.popup-dialog.preparing-animation {
+  transform: scale(0.95);
+}
+
+/* When open - smooth entrance animation */
+.popup-dialog.open {
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+
+/* Make dialog backdrop transparent like dropdown/date-picker */
+.popup-dialog::backdrop {
+  background: transparent;
+}
+
+/* Inner container - neutral structural container */
+.popup-container {
+  /* No default styling - just provides structure */
+  /* Users control all visual aspects via slotted content */
+  display: contents;
+}
+
+/* Content slot styling */
+#popup-content {
+  /* Allow slotted content to define its own styling */
+  display: contents;
+}
+
+/* Remove default styling from slotted content - users have full control */
+#popup-content ::slotted(*) {
+  /* Remove default styling that conflicts with user styling */
+  /* Users now have complete control over popup appearance */
+  /* background: unset; */
+  /* border: unset; */
+  /* box-shadow: unset; */
+
+  /* Only maintain essential positioning */
+  position: relative;
+
+  /* Prevent content from being too wide - still helpful */
+  max-width: min(400px, 90vw);
+  max-height: min(500px, 80vh);
+  overflow: auto;
+}
+`;
+//# sourceMappingURL=popup.js.map

package/lib/styles/popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","sourceRoot":"","sources":["../../src/styles/popup.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuF1B,CAAC"}

package/lib/styles/radio.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Radio Group + Radio Styles
+ *
+ * ty-radio-group: optional label + vertical/horizontal stack of radios + error message
+ * ty-radio: circle with inner dot when checked
+ */
+export declare const radioStyles = "\n\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.ty-field-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-bold);\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-bold);\n}\n\n.input-wrapper.primary.focused {\n  border-color: var(--ty-color-primary-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);\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-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);\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-bold);\n}\n\n.input-wrapper.success.focused {\n  border-color: var(--ty-color-success-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);\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-bold);\n}\n\n.input-wrapper.danger.focused {\n  border-color: var(--ty-color-danger-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\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-bold);\n}\n\n.input-wrapper.warning.focused {\n  border-color: var(--ty-color-warning-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);\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 .ty-field-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 color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\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\n\n/* Override input's :host. ty-radio is just the circle (inline);\n   ty-radio-group is a form-field block. */\n:host(ty-radio) {\n  display: inline-flex;\n  width: auto;\n  vertical-align: middle;\n}\n\n:host(ty-radio-group) {\n  display: block;\n  width: 100%;\n}\n\n/* ===== RADIO GROUP ===== */\n.radio-group-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  font-family: var(--ty-font-sans);\n  color: var(--ty-color-text);\n}\n\n.radio-group-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-color-text);\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.radio-group-list {\n  display: flex;\n  gap: 0.6rem;\n  align-items: flex-start;\n}\n\n.radio-group-list.vertical {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.radio-group-list.horizontal {\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: center;\n}\n\n.radio-group-error {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  color: var(--ty-color-danger);\n}\n\n.radio-group-container .required-icon {\n  width: 0.65em;\n  height: 0.65em;\n  color: var(--ty-color-danger);\n}\n.radio-group-container .required-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== RADIO ITEM (just the circle) ===== */\n.radio-container {\n  display: inline-block;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  vertical-align: middle;\n}\n\n.radio-container.disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.radio-container:focus-visible .radio-circle,\n.radio-container.focused .radio-circle {\n  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);\n}\n\n.radio-circle {\n  position: relative;\n  flex-shrink: 0;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: 2px solid var(--ty-input-border);\n  background: var(--ty-input-bg);\n  box-sizing: border-box;\n  transition: border-color 0.15s ease-in-out;\n}\n\n.radio-circle::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--ty-color-primary);\n  transform: translate(-50%, -50%) scale(0);\n  transition: transform 0.15s ease-in-out;\n}\n\n.radio-container[aria-checked=\"true\"] .radio-circle {\n  border-color: var(--ty-color-primary);\n}\n\n.radio-container[aria-checked=\"true\"] .radio-circle::after {\n  transform: translate(-50%, -50%) scale(1);\n}\n\n/* Size variants */\n.radio-container.xs .radio-circle { width: 14px; height: 14px; }\n.radio-container.xs .radio-circle::after { width: 6px; height: 6px; }\n\n.radio-container.sm .radio-circle { width: 16px; height: 16px; }\n.radio-container.sm .radio-circle::after { width: 7px; height: 7px; }\n\n.radio-container.lg .radio-circle { width: 22px; height: 22px; }\n.radio-container.lg .radio-circle::after { width: 10px; height: 10px; }\n\n.radio-container.xl .radio-circle { width: 26px; height: 26px; }\n.radio-container.xl .radio-circle::after { width: 12px; height: 12px; }\n\n/* Flavor variants \u2014 color of inner dot + checked border */\n.radio-container.primary[aria-checked=\"true\"] .radio-circle { border-color: var(--ty-color-primary); }\n.radio-container.primary .radio-circle::after { background: var(--ty-color-primary); }\n\n.radio-container.secondary[aria-checked=\"true\"] .radio-circle { border-color: var(--ty-color-secondary); }\n.radio-container.secondary .radio-circle::after { background: var(--ty-color-secondary); }\n\n.radio-container.success[aria-checked=\"true\"] .radio-circle { border-color: var(--ty-color-success); }\n.radio-container.success .radio-circle::after { background: var(--ty-color-success); }\n\n.radio-container.danger[aria-checked=\"true\"] .radio-circle { border-color: var(--ty-color-danger); }\n.radio-container.danger .radio-circle::after { background: var(--ty-color-danger); }\n\n.radio-container.warning[aria-checked=\"true\"] .radio-circle { border-color: var(--ty-color-warning); }\n.radio-container.warning .radio-circle::after { background: var(--ty-color-warning); }\n\n.radio-container.neutral[aria-checked=\"true\"] .radio-circle { border-color: var(--ty-color-neutral); }\n.radio-container.neutral .radio-circle::after { background: var(--ty-color-neutral); }\n";
+//# sourceMappingURL=radio.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../src/styles/radio.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,eAAO,MAAM,WAAW,m4kBAuJvB,CAAC"}

package/lib/styles/radio.js

@@ -0,0 +1,160 @@
+/**
+ * Radio Group + Radio Styles
+ *
+ * ty-radio-group: optional label + vertical/horizontal stack of radios + error message
+ * ty-radio: circle with inner dot when checked
+ */
+import { inputStyles } from "./input.js";
+export const radioStyles = `
+${inputStyles}
+
+/* Override input's :host. ty-radio is just the circle (inline);
+   ty-radio-group is a form-field block. */
+:host(ty-radio) {
+  display: inline-flex;
+  width: auto;
+  vertical-align: middle;
+}
+
+:host(ty-radio-group) {
+  display: block;
+  width: 100%;
+}
+
+/* ===== RADIO GROUP ===== */
+.radio-group-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  font-family: var(--ty-font-sans);
+  color: var(--ty-color-text);
+}
+
+.radio-group-label {
+  font-size: var(--ty-font-sm);
+  line-height: var(--ty-leading-sm);
+  font-weight: var(--ty-font-medium);
+  color: var(--ty-color-text);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.radio-group-list {
+  display: flex;
+  gap: 0.6rem;
+  align-items: flex-start;
+}
+
+.radio-group-list.vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.radio-group-list.horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.radio-group-error {
+  font-size: var(--ty-font-xs);
+  line-height: var(--ty-leading-xs);
+  color: var(--ty-color-danger);
+}
+
+.radio-group-container .required-icon {
+  width: 0.65em;
+  height: 0.65em;
+  color: var(--ty-color-danger);
+}
+.radio-group-container .required-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* ===== RADIO ITEM (just the circle) ===== */
+.radio-container {
+  display: inline-block;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  vertical-align: middle;
+}
+
+.radio-container.disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.radio-container:focus-visible .radio-circle,
+.radio-container.focused .radio-circle {
+  box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
+}
+
+.radio-circle {
+  position: relative;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid var(--ty-input-border);
+  background: var(--ty-input-bg);
+  box-sizing: border-box;
+  transition: border-color 0.15s ease-in-out;
+}
+
+.radio-circle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--ty-color-primary);
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform 0.15s ease-in-out;
+}
+
+.radio-container[aria-checked="true"] .radio-circle {
+  border-color: var(--ty-color-primary);
+}
+
+.radio-container[aria-checked="true"] .radio-circle::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* Size variants */
+.radio-container.xs .radio-circle { width: 14px; height: 14px; }
+.radio-container.xs .radio-circle::after { width: 6px; height: 6px; }
+
+.radio-container.sm .radio-circle { width: 16px; height: 16px; }
+.radio-container.sm .radio-circle::after { width: 7px; height: 7px; }
+
+.radio-container.lg .radio-circle { width: 22px; height: 22px; }
+.radio-container.lg .radio-circle::after { width: 10px; height: 10px; }
+
+.radio-container.xl .radio-circle { width: 26px; height: 26px; }
+.radio-container.xl .radio-circle::after { width: 12px; height: 12px; }
+
+/* Flavor variants — color of inner dot + checked border */
+.radio-container.primary[aria-checked="true"] .radio-circle { border-color: var(--ty-color-primary); }
+.radio-container.primary .radio-circle::after { background: var(--ty-color-primary); }
+
+.radio-container.secondary[aria-checked="true"] .radio-circle { border-color: var(--ty-color-secondary); }
+.radio-container.secondary .radio-circle::after { background: var(--ty-color-secondary); }
+
+.radio-container.success[aria-checked="true"] .radio-circle { border-color: var(--ty-color-success); }
+.radio-container.success .radio-circle::after { background: var(--ty-color-success); }
+
+.radio-container.danger[aria-checked="true"] .radio-circle { border-color: var(--ty-color-danger); }
+.radio-container.danger .radio-circle::after { background: var(--ty-color-danger); }
+
+.radio-container.warning[aria-checked="true"] .radio-circle { border-color: var(--ty-color-warning); }
+.radio-container.warning .radio-circle::after { background: var(--ty-color-warning); }
+
+.radio-container.neutral[aria-checked="true"] .radio-circle { border-color: var(--ty-color-neutral); }
+.radio-container.neutral .radio-circle::after { background: var(--ty-color-neutral); }
+`;
+//# sourceMappingURL=radio.js.map

package/lib/styles/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../src/styles/radio.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,CAAC,MAAM,WAAW,GAAG;EACzB,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsJZ,CAAC"}

package/lib/styles/resize-observer.d.ts

@@ -0,0 +1,6 @@
+/**
+ * TyResizeObserver styles
+ * Minimal styling - just ensures component participates in layout
+ */
+export declare const resizeObserverStyles = "\n:host {\n  /* Default to block display, user can override */\n  display: block;\n  /* Ensure the component can participate in layout */\n  position: relative;\n}\n\n/* Slot content styling */\n::slotted(*) {\n  /* No default styling - preserve natural layout */\n}\n";
+//# sourceMappingURL=resize-observer.d.ts.map

package/lib/styles/resize-observer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-observer.d.ts","sourceRoot":"","sources":["../../src/styles/resize-observer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,oBAAoB,iRAYhC,CAAA"}

package/lib/styles/resize-observer.js

@@ -0,0 +1,18 @@
+/**
+ * TyResizeObserver styles
+ * Minimal styling - just ensures component participates in layout
+ */
+export const resizeObserverStyles = `
+:host {
+  /* Default to block display, user can override */
+  display: block;
+  /* Ensure the component can participate in layout */
+  position: relative;
+}
+
+/* Slot content styling */
+::slotted(*) {
+  /* No default styling - preserve natural layout */
+}
+`;
+//# sourceMappingURL=resize-observer.js.map

package/lib/styles/resize-observer.js.map

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

package/lib/styles/scroll-container.d.ts

@@ -0,0 +1,6 @@
+/**
+ * TyScrollContainer styles
+ * Component-specific styles + shared custom scrollbar styles
+ */
+export declare const scrollContainerStyles = "\n:host {\n  display: block;\n  position: relative;\n  overflow: hidden;\n}\n\n.scroll-wrapper {\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Allow horizontal scrolling when enabled */\n:host([overflow-x]) .scroll-wrapper {\n  overflow-x: auto;\n}\n\n:host([max-height]) .scroll-wrapper {\n  max-height: var(--scroll-max-height);\n}\n\n/* ===================================== */\n/* hide-scrollbar: hides native, no custom */\n/* ===================================== */\n\n:host([hide-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n/* ===================================== */\n/* custom-scrollbar: hides native */\n/* ===================================== */\n\n:host([custom-scrollbar]) .scroll-wrapper {\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n  display: none;\n}\n\n/* Show scrollbar tracks on host hover */\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,\n:host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {\n  opacity: 1;\n}\n\n/* Corner gap when both axes are present */\n:host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {\n  bottom: var(--ty-scrollbar-width, 8px);\n}\n\n:host([custom-scrollbar]) .ty-scrollbar-track-x {\n  right: var(--ty-scrollbar-width, 8px);\n}\n\n/* ===================================== */\n/* Shadow Indicators                     */\n/* ===================================== */\n\n.shadow-overlay {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.shadow-top,\n.shadow-bottom,\n.shadow-left,\n.shadow-right {\n  position: absolute;\n  opacity: 0;\n  transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);\n  pointer-events: none;\n}\n\n.shadow-top {\n  top: -40px;\n  left: 0;\n  right: 0;\n  height: 80px;\n  background: var(--ty-scroll-shadow-top, radial-gradient(\n    ellipse 100% 30% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(50% 0 0 0);\n}\n\n.shadow-bottom {\n  bottom: -30px;\n  left: 0;\n  right: 0;\n  height: 60px;\n  background: var(--ty-scroll-shadow-bottom, radial-gradient(\n    ellipse 100% 20% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 50% 0);\n}\n\n.shadow-left {\n  left: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-left, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 0 0 50%);\n}\n\n.shadow-right {\n  right: -30px;\n  top: 0;\n  bottom: 0;\n  width: 60px;\n  background: var(--ty-scroll-shadow-right, radial-gradient(\n    ellipse 30% 100% at center,\n    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),\n    transparent,\n    transparent\n  ));\n  clip-path: inset(0 50% 0 0);\n}\n\n.shadow-left,\n.shadow-right {\n  display: none;\n}\n\n:host([overflow-x]) .shadow-left,\n:host([overflow-x]) .shadow-right {\n  display: block;\n}\n\n.shadow-top.visible,\n.shadow-bottom.visible,\n.shadow-left.visible,\n.shadow-right.visible {\n  opacity: 1;\n}\n\n:host([shadow=\"false\"]) .shadow-overlay {\n  display: none;\n}\n\n/* Touch devices - restore native scrollbar */\n@media (pointer: coarse) and (hover: none) {\n  :host([custom-scrollbar]) .scroll-wrapper {\n    scrollbar-width: thin;\n    scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {\n    display: block;\n    width: 4px;\n    height: 4px;\n  }\n  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {\n    background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));\n    border-radius: 2px;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .shadow-top,\n  .shadow-bottom,\n  .shadow-left,\n  .shadow-right {\n    transition-duration: 0ms !important;\n  }\n}\n\n/* Shared scrollbar styles */\n\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n\n";
+//# sourceMappingURL=scroll-container.d.ts.map

package/lib/styles/scroll-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-container.d.ts","sourceRoot":"","sources":["../../src/styles/scroll-container.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,qBAAqB,y+QA+LjC,CAAC"}