tyrell-components 1.0.0-RC14 → 1.0.0-RC15

package/lib/styles/input.js

@@ -1,310 +1,194 @@
 import { FLAVORS } from "../types/common.js";
+import { fieldSizeVars } from "./field-size.js";
 const inputFlavor = (f, fb) => {
-    const c = (s) => fb
-        ? s
-            ? `var(--ty-color-${f}${s}, var(--ty-color-${f}, var(--ty-color-${fb}${s})))`
-            : `var(--ty-color-${f}, var(--ty-color-${fb}))`
-        : s
-            ? `var(--ty-color-${f}${s}, var(--ty-color-${f}))`
-            : `var(--ty-color-${f})`;
-    return `
+const c = (s) => fb
+? s
+? `var(--ty-color-${f}${s}, var(--ty-color-${f}, var(--ty-color-${fb}${s})))`
+: `var(--ty-color-${f}, var(--ty-color-${fb}))`
+: s
+? `var(--ty-color-${f}${s}, var(--ty-color-${f}))`
+: `var(--ty-color-${f})`;
+return `
 :host([flavor="${f}"]) {
-  --input-accent: var(--ty-input-${f}-border, ${c("-soft")});
-  --input-accent-bold: ${c("")};
-  --input-ring: color-mix(in oklab, ${c("")} 15%, transparent);
+--input-accent: var(--ty-input-${f}-border, ${c("-soft")});
+--input-accent-bold: ${c("")};
+--input-ring: color-mix(in oklab, ${c("")} 15%, transparent);
 }
 :host([flavor="${f}+"]) {
-  --input-accent: ${c("")};
-  --input-accent-bold: ${c("-strong")};
-  --input-ring: color-mix(in oklab, ${c("-strong")} 15%, transparent);
+--input-accent: ${c("")};
+--input-accent-bold: ${c("-strong")};
+--input-ring: color-mix(in oklab, ${c("-strong")} 15%, transparent);
 }
 :host([flavor="${f}-"]) {
-  --input-accent: ${c("-faint")};
-  --input-accent-bold: ${c("-soft")};
-  --input-ring: color-mix(in oklab, ${c("-soft")} 15%, transparent);
+--input-accent: ${c("-faint")};
+--input-accent-bold: ${c("-soft")};
+--input-ring: color-mix(in oklab, ${c("-soft")} 15%, transparent);
 }
 `;
 };
 export const inputCustomFlavorCss = (base) => inputFlavor(base, "neutral");
 export const inputStyles = `
+${fieldSizeVars}
 :host {
-  display: block;
-  font-family: inherit;
-  width: 100%;
+display: block;
+font-family: inherit;
+width: 100%;
 }
-
-:host([size="sm"]) {
-  font-size: 14px;
-}
-
-:host([size="lg"]) {
-  font-size: 18px;
-}
-
 .input-container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  box-sizing: border-box;
+display: flex;
+flex-direction: column;
+width: 100%;
+box-sizing: border-box;
 }
-
 .ty-field-label {
-  font-size: var(--ty-font-sm);
-  line-height: var(--ty-leading-sm);
-  letter-spacing: var(--ty-tracking-sm);
-  font-weight: var(--ty-font-medium);
-  color: var(--ty-label-color);
-  margin-bottom: 6px;
-  padding-left: 12px;
-  display: flex;
-  align-items: center;
+font-size: var(--ty-field-label-font);
+line-height: var(--ty-field-label-leading);
+letter-spacing: var(--ty-tracking-sm);
+font-weight: var(--ty-font-medium);
+color: var(--ty-label-color);
+margin-bottom: var(--ty-field-label-gap);
+padding-left: var(--ty-field-outer-pad-x);
+display: flex;
+align-items: center;
 }
-
 .required-icon {
-  display: inline-flex;
-  align-items: center;
-  color: var(--ty-color-danger);
-  width: 12px;
-  height: 12px;
-  margin-left: 4px;
-  vertical-align: middle;
+display: inline-flex;
+align-items: center;
+color: var(--ty-color-danger);
+width: 12px;
+height: 12px;
+margin-left: 4px;
+vertical-align: middle;
 }
-
 .required-icon svg {
-  width: 100%;
-  height: 100%;
+width: 100%;
+height: 100%;
 }
-
 .input-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  box-sizing: border-box;
-  border: 1px solid var(--input-accent, var(--input-border, var(--ty-input-border)));
-  border-radius: var(--ty-radius-base);
-  background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));
-  transition: var(--ty-local-transition, all 0.15s ease-in-out);
-
-  min-height: var(--ty-size-md);
-  padding: 0 12px;
+display: flex;
+align-items: center;
+gap: 0.5rem;
+width: 100%;
+box-sizing: border-box;
+border: 1px solid var(--input-accent, var(--input-border, var(--ty-input-border)));
+border-radius: var(--ty-radius-base);
+background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));
+transition: var(--ty-local-transition, all 0.15s ease-in-out);
+min-height: var(--ty-field-height);
+padding: 0 var(--ty-field-pad-x);
 }
-
-/* Wrapper states — --input-accent* are set by the flavor rules below;
-   without a flavor attribute they're unset and the default chrome chain
-   (per-instance --input-* var, then --ty-input-* token) applies. */
-/* :not(.focused) — hover must never override focus. Without the guard this
-   rule out-ranks .focused by specificity, so hovering a FOCUSED unflavored
-   input swapped its primary focus border for the dimmer neutral hover
-   border (focus ring stayed, border dimmed — read as a glitch). Same
-   pattern as date-picker's :hover:not(.open). */
 .input-wrapper:hover:not(.disabled):not(.focused) {
-  border-color: var(--input-accent-bold, var(--input-border-hover, var(--ty-input-border-hover)));
+border-color: var(--input-accent-bold, var(--input-border-hover, var(--ty-input-border-hover)));
 }
-
 .input-wrapper.focused {
-  border-color: var(--input-accent-bold, var(--input-border-focus, var(--ty-input-border-focus)));
-  box-shadow: 0 0 0 3px var(--input-ring, var(--input-shadow-focus, var(--ty-input-shadow-focus)));
+border-color: var(--input-accent-bold, var(--input-border-focus, var(--ty-input-border-focus)));
+box-shadow: 0 0 0 3px var(--input-ring, var(--input-shadow-focus, var(--ty-input-shadow-focus)));
 }
-
 .input-wrapper.disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));
-  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));
+cursor: not-allowed;
+opacity: 0.5;
+background: var(--input-disabled-bg, var(--ty-input-disabled-bg));
+border-color: var(--input-disabled-border, var(--ty-input-disabled-border));
 }
-
 ::slotted([slot="start"]),
 ::slotted([slot="end"]) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--ty-color-text-soft);
+display: flex;
+align-items: center;
+justify-content: center;
+flex-shrink: 0;
+color: var(--ty-color-text-soft);
 }
-
-/* Password reveal toggle (rendered for type="password") */
 .password-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  padding: 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: var(--input-placeholder, var(--ty-input-placeholder));
-  transition: var(--ty-local-transition, color 0.15s ease-in-out);
+display: flex;
+align-items: center;
+justify-content: center;
+flex-shrink: 0;
+width: 1.25rem;
+height: 1.25rem;
+padding: 0;
+border: none;
+background: none;
+cursor: pointer;
+color: var(--input-placeholder, var(--ty-input-placeholder));
+transition: var(--ty-local-transition, color 0.15s ease-in-out);
 }
 .password-toggle:hover {
-  color: var(--input-color, var(--ty-input-color));
+color: var(--input-color, var(--ty-input-color));
 }
 .password-toggle:focus-visible {
-  outline: 2px solid var(--input-accent, var(--ty-color-primary));
-  outline-offset: 2px;
-  border-radius: 2px;
+outline: 2px solid var(--input-accent, var(--ty-color-primary));
+outline-offset: 2px;
+border-radius: 2px;
 }
 .password-toggle svg {
-  width: 1rem;
-  height: 1rem;
+width: 1rem;
+height: 1rem;
 }
-
 ::slotted(ty-icon) {
-  width: 1em;
-  height: 1em;
-  flex-shrink: 0;
+width: 1em;
+height: 1em;
+flex-shrink: 0;
 }
-
 .error-message {
-  font-size: var(--ty-font-xs);
-  line-height: var(--ty-leading-xs);
-  letter-spacing: var(--ty-tracking-xs);
-  color: var(--ty-color-danger);
-  margin-top: 4px;
-  padding-left: 12px;
+font-size: var(--ty-font-xs);
+line-height: var(--ty-leading-xs);
+letter-spacing: var(--ty-tracking-xs);
+color: var(--ty-color-danger);
+margin-top: 4px;
+padding-left: var(--ty-field-outer-pad-x);
 }
-
 .input-wrapper.error {
-  border-color: var(--ty-color-danger);
-  background: var(--ty-bg-danger-soft);
+border-color: var(--ty-color-danger);
+background: var(--ty-bg-danger-soft);
 }
-
 .input-wrapper.error.focused {
-  border-color: var(--ty-color-danger-bold);
-  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
+border-color: var(--ty-color-danger-bold);
+box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));
 }
-
 input {
-  /* Linear-paired typography */
-  font-family: inherit;
-  flex: 1;
-  min-width: 0;
-  box-sizing: border-box;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--input-color, var(--ty-input-color));
-  font-family: inherit;
-  font-size: var(--ty-font-sm);
-  line-height: var(--ty-leading-sm);
-  letter-spacing: var(--ty-tracking-sm);
-  font-weight: var(--ty-font-normal);
-  padding: 0;
-  margin: 0;
+flex: 1;
+min-width: 0;
+box-sizing: border-box;
+border: none;
+outline: none;
+background: transparent;
+color: var(--input-color, var(--ty-input-color));
+font-family: inherit;
+font-size: var(--ty-field-font);
+line-height: var(--ty-field-leading);
+letter-spacing: var(--ty-field-tracking);
+font-weight: var(--ty-font-normal);
+padding: 0;
+margin: 0;
 }
-
-/* Remove number input spinner arrows */
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+-webkit-appearance: none;
+margin: 0;
 }
-
 input[type="number"] {
-  -moz-appearance: textfield;
+-moz-appearance: textfield;
 }
-
 input:disabled {
-  cursor: not-allowed;
-  color: var(--input-disabled-color, var(--ty-input-disabled-color));
+cursor: not-allowed;
+color: var(--input-disabled-color, var(--ty-input-disabled-color));
 }
-
 input::placeholder {
-  color: var(--input-placeholder, var(--ty-input-placeholder));
-  font-weight: 400;
-}
-
-.input-wrapper.sm {
-  min-height: var(--ty-size-sm);
-  padding: 0 10px;
-  border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));
-}
-
-.input-wrapper.sm input {
-  font-size: var(--ty-font-sm);
-  line-height: var(--ty-leading-sm);
-  letter-spacing: var(--ty-tracking-sm);
-}
-
-.input-wrapper.md {
-  min-height: var(--ty-size-md);
-  padding: 0 12px;
-  border-radius: var(--ty-input-radius-md, var(--ty-radius-base));
-}
-
-.input-wrapper.md input {
-  font-size: var(--ty-font-sm);
-  line-height: var(--ty-leading-sm);
-  letter-spacing: var(--ty-tracking-sm);
+color: var(--input-placeholder, var(--ty-input-placeholder));
+font-weight: 400;
 }
-
-.input-wrapper.lg {
-  min-height: var(--ty-size-lg);
-  padding: 0 14px;
-  border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));
-}
-
-.input-wrapper.lg input {
-  font-size: var(--ty-font-base);
-  line-height: var(--ty-leading-base);
-  letter-spacing: var(--ty-tracking-base);
-}
-
-/* Semantic flavor modifiers set --input-accent*, consumed above */
 ${FLAVORS.filter((f) => f !== "neutral").map((f) => inputFlavor(f)).join("")}
-
 input:focus-visible {
-  outline: none;
+outline: none;
 }
-
 @media (prefers-contrast: high) {
-  .input-wrapper {
-    border-width: 2px;
-  }
+.input-wrapper {
+border-width: 2px;
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .input-wrapper {
-    transition: none;
-  }
 }
-
-@media (max-width: 640px) {
-  .input-wrapper.lg {
-    min-height: 40px;
-    padding: 0 12px;
-  }
-
-  .input-wrapper.lg input {
-    font-size: var(--ty-font-sm);
-    line-height: var(--ty-leading-sm);
-    letter-spacing: var(--ty-tracking-sm);
-  }
-
-  .input-wrapper.xl {
-    min-height: 44px;
-    padding: 0 14px;
-  }
-
-  .input-wrapper.xl input {
-    font-size: var(--ty-font-base);
-    line-height: var(--ty-leading-base);
-    letter-spacing: var(--ty-tracking-base);
-  }
+@media (prefers-reduced-motion: reduce) {
+.input-wrapper {
+transition: none;
 }
-
-@media (max-width: 480px) {
-  .input-wrapper.xl {
-    min-height: 40px;
-    padding: 0 12px;
-  }
-
-  .input-wrapper.xl input {
-    font-size: var(--ty-font-sm);
-    line-height: var(--ty-leading-sm);
-    letter-spacing: var(--ty-tracking-sm);
-  }
 }
 `;

package/lib/styles/modal.js

@@ -1,132 +1,97 @@
 export const modalStyles = `
 :host {
-  display: contents;
-  /* Don't interfere with layout */
+display: contents;
 }
-
-/* Part of the modal wrapper functionality, not user content styling */
 .close-button {
-  position: absolute;
-  top: -8px;
-  right: -8px;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  transition: var(--ty-transition-colors);
-  z-index: 1;
-  color: #d8d8d8;
-
-  /* Remove all default browser styling that could cause outlines/borders */
-  outline: none;
-  box-shadow: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  /* Remove mobile tap highlights and focus rings */
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
+position: absolute;
+top: -8px;
+right: -8px;
+background: transparent;
+border: none;
+cursor: pointer;
+padding: 4px;
+border-radius: 4px;
+transition: var(--ty-transition-colors);
+z-index: 1;
+color: #d8d8d8;
+outline: none;
+box-shadow: none;
+-webkit-appearance: none;
+-moz-appearance: none;
+appearance: none;
+-webkit-tap-highlight-color: transparent;
+-webkit-touch-callout: none;
+-webkit-user-select: none;
+-moz-user-select: none;
+-ms-user-select: none;
+user-select: none;
+}
 .close-button:hover {
-  color: white;
+color: white;
 }
-
-/* Explicitly remove focus and active states for all interaction modes */
 .close-button:focus,
 .close-button:focus-visible,
 .close-button:focus-within,
 .close-button:active {
-  outline: none !important;
-  box-shadow: none !important;
-  border: none !important;
-  background: transparent !important;
+outline: none !important;
+box-shadow: none !important;
+border: none !important;
+background: transparent !important;
 }
-
-/* Override hover color even in focus/active states */
 .close-button:hover,
 .close-button:focus:hover,
 .close-button:active:hover {
-  color: white;
+color: white;
 }
-
 .close-button.hide {
-  visibility: hidden;
+visibility: hidden;
 }
-
-/* Pure wrapper: only essential modal functionality, no styling of user content */
 .ty-modal-dialog {
-  /* Reset default dialog styles */
-  padding: 18px;
-  border: none;
-  margin: 0;
-  background: transparent;
-
-  /* Centered */
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  z-index: 1000;
-  overflow: hidden;
-
-  /* No sizing - let user content determine size */
-  max-width: 85vw;
-  max-height: 90vh;
-
-  outline: none;
-}
-
-/* Panel zoom-in synced with the backdrop fade (shadcn-style zoom-in-95).
-   Enter-only: animating exit on a native <dialog> means delaying close(). */
+padding: 18px;
+border: none;
+margin: 0;
+background: transparent;
+position: fixed;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+z-index: 1000;
+overflow: hidden;
+max-width: 85vw;
+max-height: 90vh;
+outline: none;
+}
 .ty-modal-dialog[open] {
-  animation: ty-modal-enter var(--ty-modal-duration, 200ms) ease-out;
+animation: ty-modal-enter var(--ty-modal-duration, 200ms) ease-out;
 }
-
 @keyframes ty-modal-enter {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.93);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-/* Backdrop is part of modal functionality, not user content */
+from {
+opacity: 0;
+transform: translate(-50%, -50%) scale(0.93);
+}
+to {
+opacity: 1;
+transform: translate(-50%, -50%) scale(1);
+}
+}
 .ty-modal-dialog::backdrop {
-  background: var(--ty-modal-backdrop, rgba(0, 0, 0, 0.5));
-  backdrop-filter: var(--ty-modal-backdrop-blur, blur(2px));
-  animation: ty-modal-backdrop-enter var(--ty-modal-duration, 200ms) ease-out;
+background: var(--ty-modal-backdrop, rgba(0, 0, 0, 0.5));
+backdrop-filter: var(--ty-modal-backdrop-blur, blur(2px));
+animation: ty-modal-backdrop-enter var(--ty-modal-duration, 200ms) ease-out;
 }
-
-/* When backdrop is disabled */
 .ty-modal-dialog:not([data-backdrop])::backdrop {
-  background: transparent;
-  backdrop-filter: none;
+background: transparent;
+backdrop-filter: none;
 }
-
-/* Minimal container - no styling imposed on user content */
 .modal-content {
-  color: var(--ty-text);
+color: var(--ty-text);
 }
-
 @keyframes ty-modal-backdrop-enter {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
+from {
+opacity: 0;
+}
+to {
+opacity: 1;
+}
 }
 `;

package/lib/styles/option.d.ts

@@ -1,2 +1,2 @@
 /** Option Component Styles */
-export declare const optionStyles = "\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  cursor: pointer;\n  user-select: none;\n\n  transition: var(--ty-transition-all);\n\n  /* Linear-paired typography */\n  color: var(--ty-text);\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  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  border-radius: var(--ty-radius-md);\n}\n\n/* Cloned copy (projected into the select's trigger field): host defaults to\n   inline like any unstyled custom element, which ignores width/overflow \u2014\n   force a block box so the parent's flex-basis:0 truncation (select.ts\n   .select-stub.has-clone slot[name=\"selected\"]) actually clips it, and\n   collapse the content to a single ellipsized line instead of wrapping. */\n:host([cloned]) {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n}\n:host([cloned]) .option-content {\n  display: block;\n  padding: 0px;\n  background: transparent;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.option-content:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[highlighted] {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n  font-weight: var(--ty-font-semibold);\n}\n\n/* Selected: quiet \u2014 bolder text color only, no background slab, no weight change */\n.option-content[selected] {\n  background: transparent;\n  color: var(--ty-text-bold);\n}\n\n/* Lucide check \u2014 right-aligned, visible only on selected options */\n.option-check {\n  display: none;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  margin-left: auto;\n  color: var(--ty-color-primary);\n}\n\n.option-content[selected] .option-check {\n  display: block;\n}\n\n/* Never show the check on the copy cloned into the select's trigger field */\n:host([cloned]) .option-check {\n  display: none;\n}\n\n.option-content[selected]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n.option-content * {\n  pointer-events: none;\n}\n";
+export declare const optionStyles = "\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  cursor: pointer;\n  user-select: none;\n\n  transition: var(--ty-transition-all);\n\n  /* Linear-paired typography */\n  color: var(--ty-text);\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  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  border-radius: var(--ty-radius-md);\n}\n\n/* Cloned copy (projected into the select's trigger field): host defaults to\n   inline like any unstyled custom element, which ignores width/overflow \u2014\n   force a block box so the parent's flex-basis:0 truncation (select.ts\n   .select-stub.has-clone slot[name=\"selected\"]) actually clips it, and\n   collapse the content to a single ellipsized line instead of wrapping. */\n:host([cloned]) {\n  display: block;\n  min-width: 0;\n  overflow: hidden;\n}\n\n/* The clone sits in the select's TRIGGER, so its type follows the field size\n   ladder (styles/field-size.ts) rather than the dropdown list's own scale \u2014\n   the --ty-field-* vars inherit from ty-select through the light DOM. The\n   fallbacks cover a ty-option rendered outside a select. */\n:host([cloned]) .option-content {\n  display: block;\n  padding: 0px;\n  background: transparent;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-size: var(--ty-field-font, var(--ty-font-sm));\n  line-height: var(--ty-field-leading, var(--ty-leading-sm));\n  letter-spacing: var(--ty-field-tracking, var(--ty-tracking-sm));\n}\n\n.option-content:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[highlighted] {\n  background: var(--ty-bg-neutral-soft);\n  color: var(--ty-text-strong);\n  font-weight: var(--ty-font-semibold);\n}\n\n/* Selected: quiet \u2014 bolder text color only, no background slab, no weight change */\n.option-content[selected] {\n  background: transparent;\n  color: var(--ty-text-bold);\n}\n\n/* Lucide check \u2014 right-aligned, visible only on selected options */\n.option-check {\n  display: none;\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  margin-left: auto;\n  color: var(--ty-color-primary);\n}\n\n.option-content[selected] .option-check {\n  display: block;\n}\n\n/* Never show the check on the copy cloned into the select's trigger field */\n:host([cloned]) .option-check {\n  display: none;\n}\n\n.option-content[selected]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n\n.option-content[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.option-content[hidden] {}\n\n.option-content * {\n  pointer-events: none;\n}\n";