tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/styles/radio.js

@@ -1,163 +1,122 @@
-/**
- * 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 { FLAVORS } from "../types/common.js";
 import { inputStyles } from "./input.js";
-/* Flavor rules only set --radio-color (checked border + inner dot); base
-   rules below consume it. Doubles as the per-instance override API:
-   `ty-radio { --radio-color: … }`. Fallback flavor `fb` is used for custom
-   flavors so missing tokens degrade to neutral. */
 const radioFlavor = (f, fb) => {
-    const tok = (s) => fb
-        ? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
-        : `var(--ty-color-${f}${s})`;
-    return `
+const tok = (s) => fb
+? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
+: `var(--ty-color-${f}${s})`;
+return `
 :host([flavor="${f}"])  { --radio-color: ${tok("")}; }
 :host([flavor="${f}+"]) { --radio-color: ${tok("-strong")}; }
 :host([flavor="${f}-"]) { --radio-color: ${tok("-soft")}; }
 `;
 };
-/** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export const radioCustomFlavorCss = (base) => radioFlavor(base, "neutral");
 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;
+display: inline-flex;
+width: auto;
+vertical-align: middle;
 }
-
 :host(ty-radio-group) {
-  display: block;
-  width: 100%;
+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);
+display: flex;
+flex-direction: column;
+gap: 0.4rem;
+font-family: inherit;
+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;
-}
-
+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;
+display: flex;
+gap: 0.6rem;
+align-items: flex-start;
 }
-
 .radio-group-list.vertical {
-  flex-direction: column;
-  align-items: flex-start;
+flex-direction: column;
+align-items: flex-start;
 }
-
 .radio-group-list.horizontal {
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
+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);
+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);
+width: 0.65em;
+height: 0.65em;
+color: var(--ty-color-danger);
 }
 .radio-group-container .required-icon svg {
-  width: 100%;
-  height: 100%;
+width: 100%;
+height: 100%;
 }
-
-/* ===== RADIO ITEM (just the circle) ===== */
 .radio-container {
-  display: inline-block;
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  vertical-align: middle;
+display: inline-block;
+cursor: pointer;
+user-select: none;
+outline: none;
+vertical-align: middle;
 }
-
 .radio-container.disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
+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);
+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: var(--ty-local-transition, border-color 0.15s ease-in-out);
-}
-
-/* Default (no flavor attribute) is primary — defaults don't reflect to the
-   host attribute, so the base rules' fallback carries the default look. */
+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: var(--ty-local-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(--radio-color, var(--ty-color-primary));
-  transform: translate(-50%, -50%) scale(0);
-  transition: transform 0.15s ease-in-out;
-}
-
+content: "";
+position: absolute;
+top: 50%;
+left: 50%;
+width: 8px;
+height: 8px;
+border-radius: 50%;
+background: var(--radio-color, 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(--radio-color, var(--ty-color-primary));
+border-color: var(--radio-color, var(--ty-color-primary));
 }
-
 .radio-container[aria-checked="true"] .radio-circle::after {
-  transform: translate(-50%, -50%) scale(1);
+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 — set --radio-color, consumed by the base rules above */
 ${FLAVORS.map((f) => radioFlavor(f)).join("")}
 `;
-//# sourceMappingURL=radio.js.map

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

@@ -2,5 +2,4 @@
  * 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
+export declare const resizeObserverStyles = "\n:host {\n  /* Default to block display, user can override */\n  display: block;\n  position: relative;\n}\n\n::slotted(*) {\n  /* No default styling - preserve natural layout */\n}\n";

package/lib/styles/resize-observer.js

@@ -1,18 +1,8 @@
-/**
- * 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;
+display: block;
+position: relative;
 }
-
-/* Slot content styling */
 ::slotted(*) {
-  /* No default styling - preserve natural layout */
 }
 `;
-//# sourceMappingURL=resize-observer.js.map

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

@@ -2,5 +2,4 @@
  * 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/* scroll-anchoring: we manage scroll position in JS, so turn off the browser's\n   native scroll anchoring to avoid double-compensation. */\n:host([scroll-anchoring]) .scroll-wrapper {\n  overflow-anchor: 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: var(--ty-local-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: var(--ty-local-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
+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: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/* hide-scrollbar: hides native, no custom */\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/* scroll-anchoring: we manage scroll position in JS, so turn off the browser's\n   native scroll anchoring to avoid double-compensation. */\n:host([scroll-anchoring]) .scroll-wrapper {\n  overflow-anchor: none;\n}\n\n/* custom-scrollbar: hides native */\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: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.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@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\n/* Vertical track */\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: var(--ty-local-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/* Horizontal track */\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: var(--ty-local-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/* Touch devices: hide the custom scrollbar */\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@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";

package/lib/styles/scroll-container.js

@@ -1,204 +1,155 @@
-/**
- * TyScrollContainer styles
- * Component-specific styles + shared custom scrollbar styles
- */
 import { customScrollbarStyles } from './custom-scrollbar.js';
 export const scrollContainerStyles = `
 :host {
-  display: block;
-  position: relative;
-  overflow: hidden;
+display: block;
+position: relative;
+overflow: hidden;
 }
-
 .scroll-wrapper {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
+width: 100%;
+height: 100%;
+overflow-y: auto;
+overflow-x: hidden;
 }
-
-/* Allow horizontal scrolling when enabled */
 :host([overflow-x]) .scroll-wrapper {
-  overflow-x: auto;
+overflow-x: auto;
 }
-
 :host([max-height]) .scroll-wrapper {
-  max-height: var(--scroll-max-height);
+max-height: var(--scroll-max-height);
 }
-
-/* ===================================== */
-/* hide-scrollbar: hides native, no custom */
-/* ===================================== */
-
 :host([hide-scrollbar]) .scroll-wrapper {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+scrollbar-width: none;
+-ms-overflow-style: none;
 }
-
 :host([hide-scrollbar]) .scroll-wrapper::-webkit-scrollbar {
-  display: none;
+display: none;
 }
-
-/* scroll-anchoring: we manage scroll position in JS, so turn off the browser's
-   native scroll anchoring to avoid double-compensation. */
 :host([scroll-anchoring]) .scroll-wrapper {
-  overflow-anchor: none;
+overflow-anchor: none;
 }
-
-/* ===================================== */
-/* custom-scrollbar: hides native */
-/* ===================================== */
-
 :host([custom-scrollbar]) .scroll-wrapper {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+scrollbar-width: none;
+-ms-overflow-style: none;
 }
-
 :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {
-  display: none;
+display: none;
 }
-
-/* Show scrollbar tracks on host hover */
 :host([custom-scrollbar]:hover) .ty-scrollbar-track-y.has-overflow,
 :host([custom-scrollbar]:hover) .ty-scrollbar-track-x.has-overflow {
-  opacity: 1;
+opacity: 1;
 }
-
-/* Corner gap when both axes are present */
 :host([custom-scrollbar][overflow-x]) .ty-scrollbar-track-y {
-  bottom: var(--ty-scrollbar-width, 8px);
+bottom: var(--ty-scrollbar-width, 8px);
 }
-
 :host([custom-scrollbar]) .ty-scrollbar-track-x {
-  right: var(--ty-scrollbar-width, 8px);
+right: var(--ty-scrollbar-width, 8px);
 }
-
-/* ===================================== */
-/* Shadow Indicators                     */
-/* ===================================== */
-
 .shadow-overlay {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 2;
+position: absolute;
+inset: 0;
+pointer-events: none;
+z-index: 2;
 }
-
 .shadow-top,
 .shadow-bottom,
 .shadow-left,
 .shadow-right {
-  position: absolute;
-  opacity: 0;
-  transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);
-  pointer-events: none;
+position: absolute;
+opacity: 0;
+transition: var(--ty-scroll-shadow-transition, opacity 0.2s ease-out);
+pointer-events: none;
 }
-
 .shadow-top {
-  top: -40px;
-  left: 0;
-  right: 0;
-  height: 80px;
-  background: var(--ty-scroll-shadow-top, radial-gradient(
-    ellipse 100% 30% at center,
-    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
-    transparent,
-    transparent
-  ));
-  clip-path: inset(50% 0 0 0);
-}
-
+top: -40px;
+left: 0;
+right: 0;
+height: 80px;
+background: var(--ty-scroll-shadow-top, radial-gradient(
+ellipse 100% 30% at center,
+color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
+transparent,
+transparent
+));
+clip-path: inset(50% 0 0 0);
+}
 .shadow-bottom {
-  bottom: -30px;
-  left: 0;
-  right: 0;
-  height: 60px;
-  background: var(--ty-scroll-shadow-bottom, radial-gradient(
-    ellipse 100% 20% at center,
-    color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),
-    transparent,
-    transparent
-  ));
-  clip-path: inset(0 0 50% 0);
-}
-
+bottom: -30px;
+left: 0;
+right: 0;
+height: 60px;
+background: var(--ty-scroll-shadow-bottom, radial-gradient(
+ellipse 100% 20% at center,
+color-mix(in oklab, var(--ty-color-neutral-bold) 18%, transparent),
+transparent,
+transparent
+));
+clip-path: inset(0 0 50% 0);
+}
 .shadow-left {
-  left: -30px;
-  top: 0;
-  bottom: 0;
-  width: 60px;
-  background: var(--ty-scroll-shadow-left, radial-gradient(
-    ellipse 30% 100% at center,
-    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
-    transparent,
-    transparent
-  ));
-  clip-path: inset(0 0 0 50%);
-}
-
+left: -30px;
+top: 0;
+bottom: 0;
+width: 60px;
+background: var(--ty-scroll-shadow-left, radial-gradient(
+ellipse 30% 100% at center,
+color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
+transparent,
+transparent
+));
+clip-path: inset(0 0 0 50%);
+}
 .shadow-right {
-  right: -30px;
-  top: 0;
-  bottom: 0;
-  width: 60px;
-  background: var(--ty-scroll-shadow-right, radial-gradient(
-    ellipse 30% 100% at center,
-    color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
-    transparent,
-    transparent
-  ));
-  clip-path: inset(0 50% 0 0);
-}
-
+right: -30px;
+top: 0;
+bottom: 0;
+width: 60px;
+background: var(--ty-scroll-shadow-right, radial-gradient(
+ellipse 30% 100% at center,
+color-mix(in oklab, var(--ty-color-neutral-bold) 12%, transparent),
+transparent,
+transparent
+));
+clip-path: inset(0 50% 0 0);
+}
 .shadow-left,
 .shadow-right {
-  display: none;
+display: none;
 }
-
 :host([overflow-x]) .shadow-left,
 :host([overflow-x]) .shadow-right {
-  display: block;
+display: block;
 }
-
 .shadow-top.visible,
 .shadow-bottom.visible,
 .shadow-left.visible,
 .shadow-right.visible {
-  opacity: 1;
+opacity: 1;
 }
-
 :host([shadow="false"]) .shadow-overlay {
-  display: none;
+display: none;
 }
-
-/* Touch devices - restore native scrollbar */
 @media (pointer: coarse) and (hover: none) {
-  :host([custom-scrollbar]) .scroll-wrapper {
-    scrollbar-width: thin;
-    scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;
-  }
-  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {
-    display: block;
-    width: 4px;
-    height: 4px;
-  }
-  :host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {
-    background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));
-    border-radius: 2px;
-  }
-}
-
-/* Respect reduced motion */
+:host([custom-scrollbar]) .scroll-wrapper {
+scrollbar-width: thin;
+scrollbar-color: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent)) transparent;
+}
+:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar {
+display: block;
+width: 4px;
+height: 4px;
+}
+:host([custom-scrollbar]) .scroll-wrapper::-webkit-scrollbar-thumb {
+background: var(--ty-border, color-mix(in oklab, var(--ty-color-neutral-bold) 25%, transparent));
+border-radius: 2px;
+}
+}
 @media (prefers-reduced-motion: reduce) {
-  .shadow-top,
-  .shadow-bottom,
-  .shadow-left,
-  .shadow-right {
-    transition-duration: 0ms !important;
-  }
-}
-
-/* Shared scrollbar styles */
+.shadow-top,
+.shadow-bottom,
+.shadow-left,
+.shadow-right {
+transition-duration: 0ms !important;
+}
+}
 ${customScrollbarStyles}
 `;
-//# sourceMappingURL=scroll-container.js.map

package/lib/styles/select-base.d.ts

@@ -6,4 +6,3 @@
 /** Rules for one custom (non-built-in) flavor — see utils/flavor-sheet.ts. */
 export declare const selectCustomFlavorCss: (base: string) => string;
 export declare const selectBaseStyles: string;
-//# sourceMappingURL=select-base.d.ts.map