tyrell-components 1.0.0-RC14 → 1.0.0-RC15

package/lib/styles/option.js

@@ -1,94 +1,74 @@
 export const optionStyles = `
 .option-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--ty-spacing-2);
-  box-sizing: border-box;
-  width: 100%;
-
-  cursor: pointer;
-  user-select: none;
-
-  transition: var(--ty-transition-all);
-
-  /* Linear-paired typography */
-  color: var(--ty-text);
-  font-family: inherit;
-  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);
-  border-radius: var(--ty-radius-md);
+display: flex;
+align-items: center;
+justify-content: space-between;
+gap: var(--ty-spacing-2);
+box-sizing: border-box;
+width: 100%;
+cursor: pointer;
+user-select: none;
+transition: var(--ty-transition-all);
+color: var(--ty-text);
+font-family: inherit;
+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);
+border-radius: var(--ty-radius-md);
 }
-
-/* Cloned copy (projected into the select's trigger field): host defaults to
-   inline like any unstyled custom element, which ignores width/overflow —
-   force a block box so the parent's flex-basis:0 truncation (select.ts
-   .select-stub.has-clone slot[name="selected"]) actually clips it, and
-   collapse the content to a single ellipsized line instead of wrapping. */
 :host([cloned]) {
-  display: block;
-  min-width: 0;
-  overflow: hidden;
+display: block;
+min-width: 0;
+overflow: hidden;
 }
 :host([cloned]) .option-content {
-  display: block;
-  padding: 0px;
-  background: transparent;
-  min-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+display: block;
+padding: 0px;
+background: transparent;
+min-width: 0;
+overflow: hidden;
+white-space: nowrap;
+text-overflow: ellipsis;
+font-size: var(--ty-field-font, var(--ty-font-sm));
+line-height: var(--ty-field-leading, var(--ty-leading-sm));
+letter-spacing: var(--ty-field-tracking, var(--ty-tracking-sm));
 }
-
 .option-content:hover {
-  background: var(--ty-bg-neutral-soft);
+background: var(--ty-bg-neutral-soft);
 }
-
 .option-content[highlighted] {
-  background: var(--ty-bg-neutral-soft);
-  color: var(--ty-text-strong);
-  font-weight: var(--ty-font-semibold);
+background: var(--ty-bg-neutral-soft);
+color: var(--ty-text-strong);
+font-weight: var(--ty-font-semibold);
 }
-
-/* Selected: quiet — bolder text color only, no background slab, no weight change */
 .option-content[selected] {
-  background: transparent;
-  color: var(--ty-text-bold);
+background: transparent;
+color: var(--ty-text-bold);
 }
-
-/* Lucide check — right-aligned, visible only on selected options */
 .option-check {
-  display: none;
-  flex-shrink: 0;
-  width: 14px;
-  height: 14px;
-  margin-left: auto;
-  color: var(--ty-color-primary);
+display: none;
+flex-shrink: 0;
+width: 14px;
+height: 14px;
+margin-left: auto;
+color: var(--ty-color-primary);
 }
-
 .option-content[selected] .option-check {
-  display: block;
+display: block;
 }
-
-/* Never show the check on the copy cloned into the select's trigger field */
 :host([cloned]) .option-check {
-  display: none;
+display: none;
 }
-
 .option-content[selected]:hover {
-  background: var(--ty-bg-neutral-soft);
+background: var(--ty-bg-neutral-soft);
 }
-
 .option-content[disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
+opacity: 0.5;
+cursor: not-allowed;
 }
-
 .option-content[hidden] {}
-
 .option-content * {
-  pointer-events: none;
+pointer-events: none;
 }
 `;

package/lib/styles/popup.js

@@ -1,91 +1,60 @@
 export const popupStyles = `
 .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! */
-
-  transition:
-    opacity var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
-    visibility var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
-    transform var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
-
-  /* Prevent interactions when hidden */
-  pointer-events: none;
+position: fixed;
+top: 0;
+left: 0;
+margin: 0;
+border: none;
+background: transparent;
+max-width: none;
+max-height: none;
+padding: var(--popup-padding, 16px);
+visibility: hidden;
+opacity: 0;
+transition:
+opacity var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
+visibility var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
+transform var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
+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);
+top: var(--popup-y, 0px);
+left: var(--popup-x, 0px);
 }
-
-/* Entrance prep (right before .open): scale + a short slide from the anchor
-   side. data-side is the RESOLVED side (post-flip), set by updatePosition. */
 .popup-dialog.preparing-animation {
-  transform: scale(0.96);
+transform: scale(0.96);
 }
-
 .popup-dialog[data-side="bottom"].preparing-animation:not(.open) {
-  transform: translateY(-6px) scale(0.96);
+transform: translateY(-6px) scale(0.96);
 }
-
 .popup-dialog[data-side="top"].preparing-animation:not(.open) {
-  transform: translateY(6px) scale(0.96);
+transform: translateY(6px) scale(0.96);
 }
-
 .popup-dialog[data-side="left"].preparing-animation:not(.open) {
-  transform: translateX(6px) scale(0.96);
+transform: translateX(6px) scale(0.96);
 }
-
 .popup-dialog[data-side="right"].preparing-animation:not(.open) {
-  transform: translateX(-6px) scale(0.96);
+transform: translateX(-6px) scale(0.96);
 }
-
 .popup-dialog.open {
-  visibility: visible;
-  opacity: 1;
-  transform: scale(1);
-  pointer-events: auto;
+visibility: visible;
+opacity: 1;
+transform: scale(1);
+pointer-events: auto;
 }
-
-/* Make dialog backdrop transparent like dropdown/date-picker */
 .popup-dialog::backdrop {
-  background: transparent;
+background: transparent;
 }
-
-/* Neutral structural container — users control all visuals via slotted content */
 .popup-container {
-  display: contents;
+display: contents;
 }
-
-/* Slotted content defines its own styling */
 #popup-content {
-  display: contents;
+display: contents;
 }
-
-/* Users have complete control over the popup's appearance; only essential
-   positioning is imposed here. */
 #popup-content ::slotted(*) {
-  position: relative;
-
-  /* Prevent content from being too wide - still helpful */
-  max-width: min(400px, 90vw);
-  max-height: min(500px, 80vh);
-  overflow: auto;
+position: relative;
+max-width: min(400px, 90vw);
+max-height: min(500px, 80vh);
+overflow: auto;
 }
 `;

package/lib/styles/radio.js

@@ -1,10 +1,10 @@
 import { FLAVORS } from "../types/common.js";
 import { inputStyles } from "./input.js";
 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")}; }
@@ -13,137 +13,110 @@ const radioFlavor = (f, fb) => {
 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-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  font-family: inherit;
-  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%;
 }
-
-/* A radio item is 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);
 }
-
 .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("")}
 `;

package/lib/styles/resize-observer.js

@@ -1,11 +1,8 @@
 export const resizeObserverStyles = `
 :host {
-  /* Default to block display, user can override */
-  display: block;
-  position: relative;
+display: block;
+position: relative;
 }
-
 ::slotted(*) {
-  /* No default styling - preserve natural layout */
 }
 `;