tyrell-components 1.0.0-RC14 → 1.0.0-RC15

package/lib/styles/checkbox.js

@@ -1,9 +1,9 @@
 import { FLAVORS } from "../types/common.js";
 const checkboxFlavor = (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}"])  { --checkbox-color: ${tok("")}; --checkbox-color-off: ${tok("-soft")}; --checkbox-ring: color-mix(in oklab, ${tok("")} 25%, transparent); }
 :host([flavor="${f}+"]) { --checkbox-color: ${tok("-strong")}; --checkbox-color-off: ${tok("-soft")}; --checkbox-ring: color-mix(in oklab, ${tok("-strong")} 25%, transparent); }
 :host([flavor="${f}-"]) { --checkbox-color: ${tok("-soft")}; --checkbox-color-off: ${tok("-faint")}; --checkbox-ring: color-mix(in oklab, ${tok("-soft")} 25%, transparent); }
@@ -12,103 +12,76 @@ const checkboxFlavor = (f, fb) => {
 export const checkboxCustomFlavorCss = (base) => checkboxFlavor(base, "neutral");
 export const checkboxStyles = `
 :host {
-  display: inline-flex;
-  width: auto;
-  vertical-align: middle;
+display: inline-flex;
+width: auto;
+vertical-align: middle;
 }
-
 .checkbox-container {
-  display: inline-flex;
-  align-items: center;
-  outline: none;
-  transition: var(--ty-local-transition, all 0.15s ease-in-out);
-  user-select: none;
-  cursor: pointer;
-  border-radius: 6px;
-  gap: var(--ty-spacing-1);
-  /* Default (no flavor attribute) is neutral — defaults don't reflect to the
-     host attribute, so the fallbacks here carry the default look. */
-  color: var(--checkbox-color-off, var(--ty-color-neutral-soft));
-}
-
+display: inline-flex;
+align-items: center;
+outline: none;
+transition: var(--ty-local-transition, all 0.15s ease-in-out);
+user-select: none;
+cursor: pointer;
+border-radius: 6px;
+gap: var(--ty-spacing-1);
+color: var(--checkbox-color-off, var(--ty-color-neutral-soft));
+}
 .checkbox-container[aria-checked="true"] {
-  color: var(--checkbox-color, var(--ty-color-neutral));
+color: var(--checkbox-color, var(--ty-color-neutral));
 }
-
-/* Visible focus ring (keyboard) — .focused is toggled by the component.
-   Matches the checked-state color so a danger checkbox gets a red ring,
-   not a fixed primary one. */
 .checkbox-container.focused,
 .checkbox-container:focus-visible {
-  box-shadow: 0 0 0 3px var(--checkbox-ring, color-mix(in oklab, var(--ty-color-primary) 25%, transparent));
+box-shadow: 0 0 0 3px var(--checkbox-ring, color-mix(in oklab, var(--ty-color-primary) 25%, transparent));
 }
-
 .checkbox-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-  transition: var(--ty-local-transition, color 0.15s ease-in-out);
-  pointer-events: none;
-  /* Let the container handle the click */
-}
-
+display: flex;
+align-items: center;
+justify-content: center;
+color: inherit;
+transition: var(--ty-local-transition, color 0.15s ease-in-out);
+pointer-events: none;
+}
 .checkbox-container svg {
-  width: 16px;
-  height: 16px;
+width: 16px;
+height: 16px;
 }
-
 .checkbox-container.xs svg {
-  width: 12px;
-  height: 12px;
+width: 12px;
+height: 12px;
 }
-
 .checkbox-container.sm svg {
-  width: 14px;
-  height: 14px;
+width: 14px;
+height: 14px;
 }
-
 .checkbox-container.lg svg {
-  width: 20px;
-  height: 20px;
+width: 20px;
+height: 20px;
 }
-
 .checkbox-container.xl svg {
-  width: 24px;
-  height: 24px;
+width: 24px;
+height: 24px;
 }
-
-/* Semantic flavors set --checkbox-color[-off], consumed above */
 ${FLAVORS.map((f) => checkboxFlavor(f)).join("")}
-
-/* Clean tick: no box outline, just the checkmark. Inactive = faint tick. */
 .checkbox-container:not([aria-checked="true"]) {
-  opacity: 0.35;
+opacity: 0.35;
 }
-
-/* Indeterminate (dash) sits between unchecked and checked */
 .checkbox-container[aria-checked="mixed"] {
-  opacity: 0.7;
+opacity: 0.7;
 }
-
-/* Disabled must stay distinguishable from merely-unchecked: grayscale kills
-   the flavor color, and disabled-unchecked drops below the unchecked 0.35. */
 .checkbox-container.disabled {
-  pointer-events: none;
-  cursor: not-allowed;
-  opacity: 0.5;
-  filter: grayscale(1);
+pointer-events: none;
+cursor: not-allowed;
+opacity: 0.5;
+filter: grayscale(1);
 }
-
 .checkbox-container.disabled:not([aria-checked="true"]) {
-  opacity: 0.2;
+opacity: 0.2;
 }
-
 .checkbox-container.error .checkbox-icon {
-  color: var(--ty-color-danger);
+color: var(--ty-color-danger);
 }
-
 .checkbox-container.error:focus {
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);
+box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);
 }
 `;

package/lib/styles/copy.js

@@ -1,12 +1,12 @@
 import { FLAVORS } from "../types/common.js";
 const copyFlavor = (f, fb) => {
-    const c = (s) => fb
-        ? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
-        : `var(--ty-color-${f}${s})`;
-    const bg = (s) => fb
-        ? `var(--ty-bg-${f}${s}, var(--ty-bg-${fb}${s}))`
-        : `var(--ty-bg-${f}${s})`;
-    return `
+const c = (s) => fb
+? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
+: `var(--ty-color-${f}${s})`;
+const bg = (s) => fb
+? `var(--ty-bg-${f}${s}, var(--ty-bg-${fb}${s}))`
+: `var(--ty-bg-${f}${s})`;
+return `
 :host([flavor="${f}"])  { --copy-color: ${c("")}; --copy-color-hover: ${c("-strong")}; --copy-bg-hover: ${bg("-soft")}; }
 :host([flavor="${f}+"]) { --copy-color: ${c("-strong")}; --copy-color-hover: ${c("-strong")}; --copy-bg-hover: ${bg("-soft")}; }
 :host([flavor="${f}-"]) { --copy-color: ${c("-soft")}; --copy-color-hover: ${c("")}; --copy-bg-hover: ${bg("-soft")}; }
@@ -15,120 +15,96 @@ const copyFlavor = (f, fb) => {
 export const copyCustomFlavorCss = (base) => copyFlavor(base, "neutral");
 export const copyStyles = `
 .copy-field-value {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  user-select: none;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: none;
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
+flex: 1;
+font-size: var(--ty-field-font);
+line-height: var(--ty-field-leading);
+letter-spacing: var(--ty-field-tracking);
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+user-select: none;
+padding: 0;
+margin: 0;
+background: transparent;
+border: none;
+color: inherit;
+font-family: inherit;
+}
 .copy-field-value.multiline {
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 200px;
-  overflow-y: auto;
+white-space: pre-wrap;
+word-break: break-word;
+max-height: 200px;
+overflow-y: auto;
 }
-
-/* Keep the copy button pinned to the top-right when content wraps to multiple lines */
 .input-wrapper:has(.copy-field-value.multiline) {
-  align-items: flex-start;
-  padding-top: 8px;
-  padding-bottom: 8px;
+align-items: flex-start;
+padding-top: 8px;
+padding-bottom: 8px;
 }
-
-/* Scroll long content instead of clipping with an ellipsis */
 .copy-field-value.horizontal-scroll {
-  overflow-x: auto;
-  overflow-y: hidden;
-  text-overflow: clip;
-  white-space: nowrap;
+overflow-x: auto;
+overflow-y: hidden;
+text-overflow: clip;
+white-space: nowrap;
 }
-
-/* Multiline + horizontal scroll (e.g. code blocks): preserve lines, scroll both axes */
 .copy-field-value.multiline.horizontal-scroll {
-  white-space: pre;
-  word-break: normal;
-  overflow-y: auto;
+white-space: pre;
+word-break: normal;
+overflow-y: auto;
 }
-
-/* Hide scrollbars on scrollable value - content still scrolls, chrome stays clean */
 .copy-field-value.multiline,
 .copy-field-value.horizontal-scroll {
-  scrollbar-width: none; /* Firefox */
+scrollbar-width: none; 
 }
 .copy-field-value.multiline::-webkit-scrollbar,
 .copy-field-value.horizontal-scroll::-webkit-scrollbar {
-  display: none; /* Chrome/Safari */
-}
-
-.copy-field-value {
-  font-size: 0.8em;
+display: none; 
 }
-
-/* Hover state — flavor-soft background (primary by default) */
 .input-wrapper:not(.disabled):hover {
-  background: var(--copy-bg-hover, var(--ty-bg-primary-soft));
-  transition: var(--ty-local-transition, background 0.2s ease);
+background: var(--copy-bg-hover, var(--ty-bg-primary-soft));
+transition: var(--ty-local-transition, background 0.2s ease);
 }
-
 .copy-button {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  color: var(--copy-color, var(--ty-text-soft));
-  transition: var(--ty-local-transition, color 0.2s ease, transform 0.2s ease);
-  padding: 0;
-  margin: 0;
-}
-
+flex-shrink: 0;
+display: flex;
+align-items: center;
+justify-content: center;
+width: var(--ty-field-control);
+height: var(--ty-field-control);
+cursor: pointer;
+border: none;
+background: transparent;
+color: var(--copy-color, var(--ty-text-soft));
+transition: var(--ty-local-transition, color 0.2s ease, transform 0.2s ease);
+padding: 0;
+margin: 0;
+}
 .copy-button:hover:not(.disabled) {
-  color: var(--copy-color-hover, var(--ty-text));
-  transform: scale(1.1);
+color: var(--copy-color-hover, var(--ty-text));
+transform: scale(1.1);
 }
-
 .copy-button.success {
-  color: var(--ty-color-success);
-  animation: copy-feedback 0.3s ease;
+color: var(--ty-color-success);
+animation: copy-feedback 0.3s ease;
 }
-
 .copy-button.error {
-  color: var(--ty-color-danger);
-  animation: copy-feedback 0.3s ease;
+color: var(--ty-color-danger);
+animation: copy-feedback 0.3s ease;
 }
-
 @keyframes copy-feedback {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.2); }
+0%, 100% { transform: scale(1); }
+50% { transform: scale(1.2); }
 }
-
 .copy-button svg {
-  width: 18px;
-  height: 18px;
+width: var(--ty-field-icon);
+height: var(--ty-field-icon);
 }
-
 .input-wrapper.disabled .copy-button {
-  cursor: not-allowed;
-  opacity: 0.5;
+cursor: not-allowed;
+opacity: 0.5;
 }
-
 .input-wrapper.disabled {
-  cursor: not-allowed;
+cursor: not-allowed;
 }
-
-/* Semantic flavors set --copy-*, consumed above */
 ${FLAVORS.map((f) => copyFlavor(f)).join("")}
 `;

package/lib/styles/custom-scrollbar.js

@@ -1,142 +1,122 @@
 export const customScrollbarStyles = `
-/* Vertical track */
 .ty-scrollbar-track-y {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: var(--ty-scrollbar-width, 8px);
-  z-index: 3;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.25s ease-out;
-  cursor: pointer;
-}
-
+position: absolute;
+top: 0;
+right: 0;
+bottom: 0;
+width: var(--ty-scrollbar-width, 8px);
+z-index: 3;
+opacity: 0;
+pointer-events: none;
+transition: opacity 0.25s ease-out;
+cursor: pointer;
+}
 .ty-scrollbar-track-y.has-overflow {
-  pointer-events: auto;
+pointer-events: auto;
 }
-
 .ty-scrollbar-track-y.has-overflow:hover,
 .ty-scrollbar-track-y.has-overflow.scrolling,
 .ty-scrollbar-track-y.dragging {
-  opacity: 1;
+opacity: 1;
 }
-
 .ty-scrollbar-track-y::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--ty-scrollbar-track, transparent);
-  border-radius: var(--ty-scrollbar-radius, 4px);
-  opacity: 0;
-  transition: opacity 0.15s ease-out;
-}
-
+content: '';
+position: absolute;
+inset: 0;
+background: var(--ty-scrollbar-track, transparent);
+border-radius: var(--ty-scrollbar-radius, 4px);
+opacity: 0;
+transition: opacity 0.15s ease-out;
+}
 .ty-scrollbar-track-y:hover::before,
 .ty-scrollbar-track-y.dragging::before {
-  opacity: 1;
-  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));
+opacity: 1;
+background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));
 }
-
 .ty-scrollbar-thumb-y {
-  position: absolute;
-  right: 0;
-  width: 100%;
-  min-height: var(--ty-scrollbar-thumb-min-height, 30px);
-  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));
-  border-radius: var(--ty-scrollbar-radius, 4px);
-  transition: var(--ty-local-transition, background 0.15s ease-out);
-  box-sizing: border-box;
-  border: 1px solid transparent;
-}
-
+position: absolute;
+right: 0;
+width: 100%;
+min-height: var(--ty-scrollbar-thumb-min-height, 30px);
+background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));
+border-radius: var(--ty-scrollbar-radius, 4px);
+transition: var(--ty-local-transition, background 0.15s ease-out);
+box-sizing: border-box;
+border: 1px solid transparent;
+}
 .ty-scrollbar-thumb-y:hover,
 .ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {
-  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));
+background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));
 }
-
 .ty-scrollbar-thumb-y:active,
 .ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {
-  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));
+background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));
 }
-
-/* Horizontal track */
 .ty-scrollbar-track-x {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: var(--ty-scrollbar-width, 8px);
-  z-index: 3;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.25s ease-out;
-  cursor: pointer;
-}
-
+position: absolute;
+bottom: 0;
+left: 0;
+right: 0;
+height: var(--ty-scrollbar-width, 8px);
+z-index: 3;
+opacity: 0;
+pointer-events: none;
+transition: opacity 0.25s ease-out;
+cursor: pointer;
+}
 .ty-scrollbar-track-x.has-overflow {
-  pointer-events: auto;
+pointer-events: auto;
 }
-
 .ty-scrollbar-track-x.has-overflow:hover,
 .ty-scrollbar-track-x.has-overflow.scrolling,
 .ty-scrollbar-track-x.dragging {
-  opacity: 1;
+opacity: 1;
 }
-
 .ty-scrollbar-track-x::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--ty-scrollbar-track, transparent);
-  border-radius: var(--ty-scrollbar-radius, 4px);
-  opacity: 0;
-  transition: opacity 0.15s ease-out;
-}
-
+content: '';
+position: absolute;
+inset: 0;
+background: var(--ty-scrollbar-track, transparent);
+border-radius: var(--ty-scrollbar-radius, 4px);
+opacity: 0;
+transition: opacity 0.15s ease-out;
+}
 .ty-scrollbar-track-x:hover::before,
 .ty-scrollbar-track-x.dragging::before {
-  opacity: 1;
-  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));
+opacity: 1;
+background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));
 }
-
 .ty-scrollbar-thumb-x {
-  position: absolute;
-  bottom: 0;
-  height: 100%;
-  min-width: var(--ty-scrollbar-thumb-min-height, 30px);
-  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));
-  border-radius: var(--ty-scrollbar-radius, 4px);
-  transition: var(--ty-local-transition, background 0.15s ease-out);
-  box-sizing: border-box;
-  border: 1px solid transparent;
-}
-
+position: absolute;
+bottom: 0;
+height: 100%;
+min-width: var(--ty-scrollbar-thumb-min-height, 30px);
+background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));
+border-radius: var(--ty-scrollbar-radius, 4px);
+transition: var(--ty-local-transition, background 0.15s ease-out);
+box-sizing: border-box;
+border: 1px solid transparent;
+}
 .ty-scrollbar-thumb-x:hover,
 .ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {
-  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));
+background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));
 }
-
 .ty-scrollbar-thumb-x:active,
 .ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {
-  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));
+background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));
 }
-
-/* Touch devices: hide the custom scrollbar */
 @media (pointer: coarse) and (hover: none) {
-  .ty-scrollbar-track-y,
-  .ty-scrollbar-track-x {
-    display: none !important;
-  }
+.ty-scrollbar-track-y,
+.ty-scrollbar-track-x {
+display: none !important;
+}
 }
-
 @media (prefers-reduced-motion: reduce) {
-  .ty-scrollbar-track-y,
-  .ty-scrollbar-track-x,
-  .ty-scrollbar-thumb-y,
-  .ty-scrollbar-thumb-x {
-    transition-duration: 0ms !important;
-  }
+.ty-scrollbar-track-y,
+.ty-scrollbar-track-x,
+.ty-scrollbar-thumb-y,
+.ty-scrollbar-thumb-x {
+transition-duration: 0ms !important;
+}
 }
 `;