tyrell-components 1.0.0-TC53 → 1.0.0-TC55

package/lib/styles/select-base.js

@@ -555,18 +555,26 @@ font-weight: 500;
 color: var(--ty-text-faint);
 margin-left: 0.25rem;
 }
-.dropdown-mode-mobile .mobile-selected-section {
+.dropdown-mode-mobile .mobile-body .section-header {
+height: 36px;
+flex: 0 0 36px;
+}
+.dropdown-mode-mobile .mobile-selected-section,
+.dropdown-mode-mobile .mobile-available-section {
 display: flex;
 flex-direction: column;
 background: var(--ty-input-bg);
 overflow: hidden;
-flex: 0 0 auto;
-max-height: 40%;
-transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1);
+min-height: 36px;
+flex: 0 1 36px;
+transition: flex-grow 220ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dropdown-mode-mobile .mobile-body[data-expanded="selected"] .mobile-selected-section,
+.dropdown-mode-mobile .mobile-body[data-expanded="available"] .mobile-available-section {
+flex-grow: 1;
 }
 .dropdown-mode-mobile .mobile-selected-section[data-empty="true"] {
-max-height: 36px;
-flex: 0 0 36px;
+flex-grow: 0;
 }
 .dropdown-mode-mobile .mobile-selected-section .section-content {
 flex: 1;
@@ -581,14 +589,6 @@ align-content: flex-start;
 -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent);
 mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent);
 }
-.dropdown-mode-mobile .mobile-available-section {
-display: flex;
-flex-direction: column;
-background: var(--ty-input-bg);
-overflow: hidden;
-flex: 1 1 auto;
-min-height: 0;
-}
 .dropdown-mode-mobile .mobile-available-section .section-content {
 flex: 1;
 min-height: 0;
@@ -600,6 +600,73 @@ flex-wrap: wrap;
 gap: 0.5rem;
 align-content: flex-start;
 }
+@media (prefers-reduced-motion: reduce) {
+.dropdown-mode-mobile .mobile-selected-section,
+.dropdown-mode-mobile .mobile-available-section {
+transition: none;
+}
+}
+.dropdown-mode-mobile .mobile-body .section-header {
+display: flex;
+align-items: center;
+justify-content: space-between;
+width: 100%;
+border: none;
+background: transparent;
+font: inherit;
+text-align: left;
+cursor: pointer;
+-webkit-tap-highlight-color: transparent;
+}
+.dropdown-mode-mobile .mobile-body .section-header svg {
+width: 1rem;
+height: 1rem;
+flex-shrink: 0;
+opacity: 0.5;
+transition: transform 180ms ease;
+}
+.dropdown-mode-mobile .mobile-body .section-header[aria-expanded="true"] svg {
+transform: rotate(180deg);
+}
+.dropdown-mode-mobile .mobile-selected-section[data-empty="true"] .section-header {
+cursor: default;
+}
+.dropdown-mode-mobile .mobile-selected-section[data-empty="true"] .section-header svg {
+display: none;
+}
+.dropdown-mode-mobile .mobile-selected-chip {
+display: inline-flex;
+align-items: center;
+gap: 0.375rem;
+padding: 0.25rem 0.5rem 0.25rem 0.625rem;
+border: 1px solid var(--ty-border);
+border-radius: 9999px;
+background: var(--ty-surface-content);
+color: var(--ty-text);
+font: inherit;
+font-size: var(--ty-font-sm);
+line-height: var(--ty-leading-sm);
+cursor: pointer;
+transition: transform 0.1s ease, border-color 0.15s ease;
+animation: ty-select-tag-enter 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.dropdown-mode-mobile .mobile-selected-chip svg {
+width: 0.875rem;
+height: 0.875rem;
+flex-shrink: 0;
+opacity: 0.6;
+}
+@media (hover: hover) {
+.dropdown-mode-mobile .mobile-selected-chip:hover {
+border-color: var(--ty-text-soft);
+}
+.dropdown-mode-mobile .mobile-selected-chip:hover svg {
+opacity: 1;
+}
+}
+.dropdown-mode-mobile .mobile-selected-chip:active {
+transform: scale(0.96);
+}
 .dropdown-mode-mobile .empty-state {
 display: none;
 width: 100%;

package/lib/version.d.ts

@@ -4,4 +4,4 @@
  * This is automatically synced with package.json during build.
  * Use `npm version` to bump versions.
  */
-export declare const VERSION = "1.0.0-TC53";
+export declare const VERSION = "1.0.0-TC55";

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '1.0.0-TC53';
+export const VERSION = '1.0.0-TC55';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tyrell-components",
-  "version": "1.0.0-TC53",
+  "version": "1.0.0-TC55",
   "description": "Tyrell Components - Framework-agnostic web components with semantic design system",
   "type": "module",
   "sideEffects": [