tyrell-components 1.0.0-TC55 → 1.0.0-TC57

package/lib/styles/multiselect.js

@@ -0,0 +1,568 @@
+
+export const multiselectStyles = `
+:host {
+--mobile-border-color: #5858587d;
+}
+.dropdown-dialog {
+position: fixed;
+width: var(--dropdown-width, 200px);
+max-width: 100vw;
+margin: 0;
+padding: 0;
+border: none;
+background: transparent;
+box-sizing: border-box;
+padding: var(--dropdown-padding, 20px);
+opacity: 0;
+transition: opacity 400ms ease;
+transform: translate(var(--dropdown-offset-x, 0px), var(--dropdown-offset-y, 0px));
+top: -1000px;
+left: -1000px;
+}
+.dropdown-dialog[open] {
+display: flex;
+flex-direction: column;
+}
+.dropdown-dialog.position-below {
+left: var(--dropdown-x);
+top: var(--dropdown-y);
+}
+.dropdown-dialog.position-above {
+left: var(--dropdown-x);
+bottom: var(--dropdown-y);
+top: auto;
+flex-direction: column-reverse;
+}
+.dropdown-dialog.position-above .dropdown-header {
+margin-top: 4px;
+}
+.dropdown-dialog.position-below .dropdown-header {
+margin-bottom: 4px;
+}
+.dropdown-dialog.position-below .dropdown-options {
+box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1), var(--ty-shadow-md);
+}
+.dropdown-dialog.open {
+opacity: 1;
+}
+.dropdown-dialog.open .dropdown-options {
+opacity: 1;
+transform: translateY(0) scale(1);
+}
+.dropdown-dialog::backdrop {
+background: transparent;
+}
+.dropdown-header {
+display: flex;
+align-items: center;
+gap: var(--ty-spacing-2);
+position: relative;
+}
+.dropdown-search-input {
+width: 100%;
+min-width: 0;
+box-sizing: border-box;
+background: var(--ty-input-bg);
+color: var(--ty-input-color);
+border: 1px solid var(--ty-input-border);
+border-radius: var(--ty-radius-md);
+font-family: var(--ty-font-sans);
+font-size: var(--ty-font-sm);
+font-weight: var(--ty-font-normal);
+line-height: var(--ty-line-height-tight);
+min-height: var(--ty-size-md);
+padding: var(--ty-spacing-2) var(--ty-spacing-3);
+padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));
+transition: var(--ty-transition-all);
+outline: none;
+}
+.dropdown-search-input:focus {
+border-color: var(--ty-input-border-focus);
+box-shadow: 0 0 0 3px var(--ty-input-shadow-focus);
+}
+.dropdown-search-input:disabled {
+background-color: var(--ty-input-disabled-bg);
+color: var(--ty-input-disabled-color);
+cursor: not-allowed;
+opacity: 0.6;
+}
+.dropdown-search-input::placeholder {
+color: var(--ty-input-placeholder);
+}
+.dropdown-search-chevron {
+position: absolute;
+top: 50%;
+right: var(--ty-spacing-3);
+transform: translateY(-50%);
+width: 1rem;
+height: 1rem;
+color: var(--ty-input-placeholder);
+transition: var(--ty-transition-transform);
+pointer-events: none;
+}
+.dropdown-search-chevron.open {
+transform: translateY(-50%) rotate(180deg);
+}
+.dropdown-search-chevron svg {
+width: 100%;
+height: 100%;
+}
+.multiselect-stub {
+min-height: 2.5rem;
+display: flex;
+flex-wrap: wrap;
+gap: 0.25rem;
+align-items: center;
+padding: 0.5rem 2.5rem 0.5rem 0.75rem;
+transition: var(--ty-transition-all), opacity 0.2s ease;
+outline: none;
+background: var(--ty-input-bg);
+color: var(--ty-input-color);
+border: 1px solid var(--ty-input-border);
+border-radius: var(--ty-radius-md);
+font-family: var(--ty-font-sans);
+font-size: var(--ty-font-sm);
+cursor: pointer;
+position: relative;
+width: 100%;
+box-sizing: border-box;
+}
+.multiselect-stub:hover {
+border-color: var(--ty-input-border-hover);
+}
+.multiselect-stub[disabled] {
+background-color: var(--ty-input-disabled-bg);
+color: var(--ty-input-disabled-color);
+cursor: not-allowed;
+opacity: 0.6;
+}
+.dropdown-wrapper:has(.dropdown-chevron.open) .multiselect-stub {
+opacity: 0;
+pointer-events: none;
+}
+.dropdown-mode-mobile .dropdown-wrapper:has(.mobile-dialog[open]) .multiselect-chips {
+display: none;
+}
+.multiselect-stub.has-tags {
+padding: 0.25rem 2.5rem 0.25rem 0.5rem;
+width: 100%;
+}
+.multiselect-stub.has-tags slot[name="selected"] {
+display: flex;
+flex-wrap: wrap;
+gap: 0.25rem;
+}
+.dropdown-chevron {
+position: absolute;
+top: 50%;
+right: var(--ty-spacing-3);
+transform: translateY(-50%);
+width: 1rem;
+height: 1rem;
+color: var(--ty-input-placeholder);
+transition: var(--ty-transition-transform);
+pointer-events: none;
+}
+.dropdown-chevron.open {
+transform: translateY(-50%) rotate(180deg);
+}
+.dropdown-chevron svg {
+width: 100%;
+height: 100%;
+}
+.multiselect-chips {
+display: flex;
+flex-wrap: wrap;
+gap: 0.5rem;
+align-items: center;
+min-width: 0;
+}
+.dropdown-placeholder {
+flex-grow: 1;
+color: var(--ty-input-placeholder, #9ca3af);
+font-size: var(--ty-font-sm);
+font-weight: var(--ty-font-light);
+font-style: italic;
+line-height: 1.5;
+}
+.dropdown-placeholder.hidden {
+display: none;
+}
+.dropdown-options {
+opacity: 0;
+background: var(--ty-input-bg);
+border: 1px solid var(--ty-input-border);
+border-radius: var(--ty-radius-lg);
+box-shadow: var(--ty-shadow-md);
+max-height: 16rem;
+width: 100%;
+max-width: 100%;
+overflow-x: hidden;
+overflow-y: auto;
+scroll-behavior: smooth;
+box-sizing: border-box;
+box-shadow:
+0 20px 25px -5px rgba(0, 0, 0, 0.1),
+0 10px 10px -5px rgba(0, 0, 0, 0.04);
+transform: translateY(-8px) scale(0.95);
+transition:
+opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
+transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+display: flex;
+flex-wrap: wrap;
+padding: 0.5rem;
+gap: 0.5rem;
+}
+.dropdown-options ty-tag {
+user-select: none;
+transition: transform 0.1s ease;
+}
+.dropdown-options ty-tag:hover {
+transform: scale(1.02);
+}
+.dropdown-options ty-tag:active {
+transform: scale(0.98);
+}
+.dropdown-options ty-tag[selected] {
+opacity: 0.5;
+}
+.multiselect-chips ty-tag {
+max-width: 150px;
+}
+@media (max-width: 640px) {
+.multiselect-chips ty-tag {
+max-width: 100px;
+}
+}
+.multiselect-container {
+display: flex;
+flex-direction: column;
+gap: 0.25rem;
+}
+.dropdown-wrapper {
+position: relative;
+display: block;
+width: 100%;
+}
+.dropdown-label {
+font-size: 14px;
+font-weight: 500;
+color: var(--ty-label-color);
+margin-bottom: 6px;
+line-height: 1.25;
+padding-left: 12px;
+display: flex;
+align-items: center;
+}
+.required-icon {
+display: inline-flex;
+align-items: center;
+color: #ef4444;
+width: 12px;
+height: 12px;
+vertical-align: middle;
+margin-left: 4px;
+}
+.required-icon svg {
+width: 100%;
+height: 100%;
+}
+:host([disabled]) .multiselect-container {
+pointer-events: none;
+}
+.dropdown-mode-mobile .mobile-dialog {
+position: fixed;
+top: 0;
+left: 0;
+right: 0;
+bottom: 0;
+width: 100vw;
+height: 100vh;
+max-width: 100vw;
+max-height: 100vh;
+margin: 0;
+padding: 0;
+padding-top: 10vh; 
+border: none;
+background: transparent; 
+align-items: flex-start;
+justify-content: center;
+opacity: 0;
+transition: opacity 300ms ease;
+}
+.dropdown-mode-mobile .mobile-dialog[open] {
+display: flex;
+}
+.dropdown-mode-mobile .mobile-dialog.open {
+opacity: 1;
+}
+.dropdown-mode-mobile .mobile-dialog::backdrop {
+background: rgba(0, 0, 0, 0.5);
+backdrop-filter: blur(8px);
+-webkit-backdrop-filter: blur(8px);
+}
+.dropdown-mode-mobile .mobile-dialog-content {
+position: relative;
+display: flex;
+flex-direction: column;
+width: calc(100% - 32px); 
+max-width: 400px; 
+min-height: 200px;
+max-height: calc(90vh - 10vh);
+opacity: 0;
+transform: scale(0.95);
+transition: 
+opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),
+transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.dropdown-mode-mobile .mobile-dialog.open .mobile-dialog-content {
+opacity: 1;
+transform: scale(1);
+}
+.dropdown-mode-mobile .mobile-search-input:focus {
+border-color: var(--ty-border);
+}
+.dropdown-mode-mobile .mobile-search-header {
+flex-shrink: 0;
+display: flex;
+align-items: center;
+gap: 12px;
+margin-bottom: 16px;
+padding: 0;
+background: transparent;
+position: relative;
+}
+.dropdown-mode-mobile .mobile-header-content {
+display: flex;
+align-items: center;
+gap: 12px;
+width: 100%;
+}
+.dropdown-mode-mobile .mobile-header-nosearch {
+flex-shrink: 0;
+display: flex;
+justify-content: flex-end;
+margin-bottom: 16px;
+padding: 0;
+background: transparent;
+position: relative;
+min-height: 40px;
+}
+.dropdown-mode-mobile .mobile-close-button {
+flex-shrink: 0;
+width: 36px;
+height: 36px;
+display: flex;
+align-items: center;
+justify-content: center;
+background: var(--ty-surface-floating);
+border: 3px solid;
+border-color: var(--mobile-border-color);
+border-radius: 50%;
+color: var(--ty-text-);
+cursor: pointer;
+transition: var(--ty-transition-all);
+padding: 0;
+}
+.dropdown-mode-mobile .mobile-close-button:hover {
+background: var(--ty-bg-neutral);
+border-color: var(--ty-border);
+color: var(--ty-text);
+}
+.dropdown-mode-mobile .mobile-close-button:active {
+transform: scale(0.9);
+}
+.dropdown-mode-mobile .mobile-close-button svg {
+width: 24px;
+height: 24px;
+}
+.dropdown-mode-mobile .mobile-search-input {
+flex: 1;
+min-width: 0;
+box-sizing: border-box;
+background: var(--ty-surface-floating);
+color: var(--ty-text);
+border: 3px solid;
+border-color: var(--mobile-border-color);
+border-radius: var(--ty-radius-md);
+font-family: var(--ty-font-sans);
+font-size: var(--ty-font-sm);
+font-weight: var(--ty-font-normal);
+line-height: var(--ty-line-height-tight);
+padding: var(--ty-spacing-2) var(--ty-spacing-3);
+height: 40px;
+transition: var(--ty-transition-all);
+outline: none;
+}
+.dropdown-mode-mobile .mobile-search-input::placeholder {
+color: var(--ty-text--);
+}
+.dropdown-mode-mobile .mobile-search-input:focus {
+border-color: var(--ty-border);
+}
+.dropdown-mode-mobile .mobile-body {
+position: relative;
+display: flex;
+flex-direction: column;
+height: var(--body-height, 350px);
+max-height: 350px;
+overflow: hidden;
+background: var(--ty-surface-floating);
+border-radius: var(--ty-radius-lg);
+box-shadow: 
+0 20px 25px -5px rgba(0, 0, 0, 0.1),
+0 10px 10px -5px rgba(0, 0, 0, 0.04);
+border: 3px solid;
+border-color: var(--mobile-border-color);
+}
+.dropdown-mode-mobile .section-header {
+display: flex;
+align-items: center;
+justify-content: space-between;
+height: 48px;
+flex-shrink: 0;
+padding: 0 16px;
+font-size: 12px;
+font-weight: 600;
+text-transform: uppercase;
+letter-spacing: 0.05em;
+color: var(--ty-text-);
+background: var(--ty-bg-neutral-);
+border-bottom: 1px solid var(--ty-border--);
+cursor: pointer;
+user-select: none;
+transition: all 0.3s ease;
+}
+.dropdown-mode-mobile .section-header:hover {
+background: var(--ty-bg-neutral);
+}
+.dropdown-mode-mobile .section-header:active {
+background: var(--ty-bg-neutral+);
+}
+.dropdown-mode-mobile .section-header .section-title {
+flex: 1;
+}
+.dropdown-mode-mobile .section-header .section-count {
+font-weight: 400;
+opacity: 0.7;
+margin-left: 0.25rem;
+}
+.dropdown-mode-mobile .section-header .section-chevron {
+width: 16px;
+height: 16px;
+color: var(--ty-text--);
+transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+display: flex;
+align-items: center;
+justify-content: center;
+}
+.dropdown-mode-mobile .section-header .section-chevron svg {
+width: 100%;
+height: 100%;
+}
+.dropdown-mode-mobile .mobile-selected-section[data-expanded="true"] .section-chevron {
+transform: rotate(180deg);
+}
+.dropdown-mode-mobile .mobile-available-section .section-header {
+cursor: default;
+}
+.dropdown-mode-mobile .mobile-available-section .section-header:hover {
+background: var(--ty-bg-neutral-);
+}
+.dropdown-mode-mobile .mobile-selected-section {
+display: flex;
+flex-direction: column;
+background: var(--ty-surface-elevated);
+border-bottom: 2px solid var(--ty-border);
+overflow: hidden;
+transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dropdown-mode-mobile .mobile-selected-section[data-expanded="false"] {
+max-height: 48px;
+flex: 0 0 48px;
+}
+.dropdown-mode-mobile .mobile-selected-section[data-expanded="true"] {
+max-height: 1000px; 
+flex: 1;
+}
+.dropdown-mode-mobile .mobile-selected-section .section-content {
+flex: 1;
+overflow-y: auto;
+padding: 0.75rem 1rem;
+display: flex;
+flex-wrap: wrap;
+gap: 0.5rem;
+align-content: flex-start;
+}
+.dropdown-mode-mobile .mobile-available-section {
+display: flex;
+flex-direction: column;
+background: var(--ty-surface-floating);
+overflow: hidden;
+transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dropdown-mode-mobile .mobile-available-section[data-expanded="false"] {
+max-height: 48px;
+flex: 0 0 48px;
+}
+.dropdown-mode-mobile .mobile-available-section[data-expanded="true"] {
+max-height: 1000px; 
+flex: 1;
+}
+.dropdown-mode-mobile .mobile-available-section .section-content {
+flex: 1;
+overflow-y: auto;
+padding: 0.75rem 1rem;
+display: flex;
+flex-wrap: wrap;
+gap: 0.5rem;
+align-content: flex-start;
+}
+.dropdown-mode-mobile .empty-state {
+display: none;
+width: 100%;
+padding: 2rem 1rem;
+text-align: center;
+color: var(--ty-text--);
+font-size: 0.875rem;
+font-style: italic;
+}
+.dropdown-mode-mobile .mobile-selected-section[data-empty="true"] .empty-state,
+.dropdown-mode-mobile .mobile-available-section[data-empty="true"] .empty-state {
+display: block;
+}
+.dropdown-mode-mobile .mobile-selected-section[data-empty="true"] slot,
+.dropdown-mode-mobile .mobile-available-section[data-empty="true"] slot {
+display: none;
+}
+.dropdown-mode-mobile .section-content ::slotted(ty-tag) {
+cursor: pointer;
+user-select: none;
+transition: transform 0.1s ease;
+margin: 2px 0; 
+}
+.dropdown-mode-mobile .section-content ::slotted(ty-tag:hover) {
+transform: scale(1.02);
+}
+.dropdown-mode-mobile .section-content ::slotted(ty-tag:active) {
+transform: scale(0.98);
+}
+.dropdown-mode-mobile .section-content ::slotted(ty-tag[hidden]) {
+display: none !important;
+}
+.dropdown-mode-mobile .section-content::-webkit-scrollbar {
+width: 6px;
+}
+.dropdown-mode-mobile .section-content::-webkit-scrollbar-track {
+background: var(--ty-bg-neutral-);
+border-radius: 3px;
+}
+.dropdown-mode-mobile .section-content::-webkit-scrollbar-thumb {
+background: var(--ty-border);
+border-radius: 3px;
+}
+.dropdown-mode-mobile .section-content::-webkit-scrollbar-thumb:hover {
+background: var(--ty-border+);
+}
+`;
+//# sourceMappingURL=multiselect.js.map

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,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8tBhC,CAAA"}

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\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";
+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}\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. Its box is always reserved so selecting\n   (or highlighting) never changes the row's width and rewraps the text. */\n.option-check {\n  display: block;\n  visibility: hidden;\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  visibility: visible;\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";

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,mnEA6GxB,CAAA"}

package/lib/styles/option.js

@@ -40,14 +40,14 @@ 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);
 }
 .option-content[selected] {
 background: transparent;
 color: var(--ty-text-bold);
 }
 .option-check {
-display: none;
+display: block;
+visibility: hidden;
 flex-shrink: 0;
 width: 14px;
 height: 14px;
@@ -55,7 +55,7 @@ margin-left: auto;
 color: var(--ty-color-primary);
 }
 .option-content[selected] .option-check {
-display: block;
+visibility: visible;
 }
 :host([cloned]) .option-check {
 display: none;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6G3B,CAAA"}

package/lib/styles/popup.d.ts

@@ -4,4 +4,4 @@
  * 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-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  transition:\n    opacity var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),\n    visibility var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),\n    transform var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1));\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/* Entrance prep (right before .open): scale + a short slide from the anchor\n   side. data-side is the RESOLVED side (post-flip), set by updatePosition. */\n.popup-dialog.preparing-animation {\n  transform: scale(0.96);\n}\n\n.popup-dialog[data-side=\"bottom\"].preparing-animation:not(.open) {\n  transform: translateY(-6px) scale(0.96);\n}\n\n.popup-dialog[data-side=\"top\"].preparing-animation:not(.open) {\n  transform: translateY(6px) scale(0.96);\n}\n\n.popup-dialog[data-side=\"left\"].preparing-animation:not(.open) {\n  transform: translateX(6px) scale(0.96);\n}\n\n.popup-dialog[data-side=\"right\"].preparing-animation:not(.open) {\n  transform: translateX(-6px) scale(0.96);\n}\n\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/* Neutral structural container \u2014 users control all visuals via slotted content */\n.popup-container {\n  display: contents;\n}\n\n/* Slotted content defines its own styling */\n#popup-content {\n  display: contents;\n}\n\n/* Users have complete control over the popup's appearance; only essential\n   positioning is imposed here. */\n#popup-content ::slotted(*) {\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";
+export declare const popupStyles = "\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  transition:\n    opacity var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),\n    visibility var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),\n    transform var(--ty-popup-duration, 180ms) var(--ty-popup-ease, cubic-bezier(0.34, 1.56, 0.64, 1));\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/* Entrance prep (right before .open): scale + a short slide from the anchor\n   side. data-side is the RESOLVED side (post-flip), set by updatePosition. */\n.popup-dialog.preparing-animation {\n  transform: scale(var(--ty-popup-scale, 0.96));\n}\n\n/* The prep pose must land instantly. Transitioned, it had barely left\n   scale(1) when .open arrived a frame later, so the entrance (and any\n   springy --ty-popup-ease) ran over almost no distance. */\n.popup-dialog.preparing-animation:not(.open) {\n  transition: none;\n}\n\n.popup-dialog[data-side=\"bottom\"].preparing-animation:not(.open) {\n  transform: translateY(-6px) scale(var(--ty-popup-scale, 0.96));\n}\n\n.popup-dialog[data-side=\"top\"].preparing-animation:not(.open) {\n  transform: translateY(6px) scale(var(--ty-popup-scale, 0.96));\n}\n\n.popup-dialog[data-side=\"left\"].preparing-animation:not(.open) {\n  transform: translateX(6px) scale(var(--ty-popup-scale, 0.96));\n}\n\n.popup-dialog[data-side=\"right\"].preparing-animation:not(.open) {\n  transform: translateX(-6px) scale(var(--ty-popup-scale, 0.96));\n}\n\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/* Neutral structural container \u2014 users control all visuals via slotted content */\n.popup-container {\n  display: contents;\n}\n\n/* Slotted content defines its own styling */\n#popup-content {\n  display: contents;\n}\n\n/* Users have complete control over the popup's appearance; only essential\n   positioning is imposed here. */\n#popup-content ::slotted(*) {\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";

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

@@ -22,19 +22,22 @@ top: var(--popup-y, 0px);
 left: var(--popup-x, 0px);
 }
 .popup-dialog.preparing-animation {
-transform: scale(0.96);
+transform: scale(var(--ty-popup-scale, 0.96));
+}
+.popup-dialog.preparing-animation:not(.open) {
+transition: none;
 }
 .popup-dialog[data-side="bottom"].preparing-animation:not(.open) {
-transform: translateY(-6px) scale(0.96);
+transform: translateY(-6px) scale(var(--ty-popup-scale, 0.96));
 }
 .popup-dialog[data-side="top"].preparing-animation:not(.open) {
-transform: translateY(6px) scale(0.96);
+transform: translateY(6px) scale(var(--ty-popup-scale, 0.96));
 }
 .popup-dialog[data-side="left"].preparing-animation:not(.open) {
-transform: translateX(6px) scale(0.96);
+transform: translateX(6px) scale(var(--ty-popup-scale, 0.96));
 }
 .popup-dialog[data-side="right"].preparing-animation:not(.open) {
-transform: translateX(-6px) scale(0.96);
+transform: translateX(-6px) scale(var(--ty-popup-scale, 0.96));
 }
 .popup-dialog.open {
 visibility: visible;

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"}