@malva-ui/core 0.1.13 → 0.1.14

package/styles/malva-ui.css

@@ -1,170 +1,191 @@
 @charset "UTF-8";
-@keyframes dialog-enter {
-  from {
-    opacity: var(--mlv-dialog-enter-from-opacity, 0);
-    transform: scale(var(--mlv-dialog-enter-from-scale, 0.95)) translateY(var(--mlv-dialog-enter-from-translate-y, 20px));
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-@keyframes dialog-leave {
-  from {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-  to {
-    opacity: var(--mlv-dialog-leave-to-opacity, 0);
-    transform: scale(var(--mlv-dialog-leave-to-scale, 0.95)) translateY(var(--mlv-dialog-leave-to-translate-y, 20px));
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .mlv-dialog--enter {
-    animation: dialog-enter var(--mlv-dialog-enter-duration, var(--mlv-duration-normal)) var(--mlv-dialog-enter-easing, var(--mlv-ease-out-strong)) forwards;
-  }
-  .mlv-dialog--leave {
-    animation: dialog-leave var(--mlv-dialog-leave-duration, var(--mlv-duration-fast)) var(--mlv-dialog-leave-easing, var(--mlv-ease-out-strong)) forwards;
-  }
-}
-@keyframes popup-enter {
-  from {
-    opacity: var(--mlv-popup-enter-from-opacity, 0);
-    transform: translateY(var(--mlv-popup-enter-from-translate-y, -0.25rem)) scale(var(--mlv-popup-enter-from-scale, 0.96));
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-@keyframes popup-leave {
-  from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  to {
-    opacity: var(--mlv-popup-leave-to-opacity, 0);
-    transform: translateY(var(--mlv-popup-leave-to-translate-y, -0.25rem)) scale(var(--mlv-popup-leave-to-scale, 0.96));
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .mlv-popup--enter {
-    transform-origin: var(--mlv-popup-transform-origin, top center);
-    animation: popup-enter var(--mlv-popup-enter-duration, var(--mlv-duration-fast)) var(--mlv-popup-enter-easing, var(--mlv-ease-out-strong)) forwards;
-  }
-  .mlv-popup--leave {
-    transform-origin: var(--mlv-popup-transform-origin, top center);
-    animation: popup-leave var(--mlv-popup-leave-duration, var(--mlv-duration-fast)) var(--mlv-popup-leave-easing, var(--mlv-ease-out-strong)) forwards;
-  }
-}
-@keyframes drawer-enter {
-  from {
-    transform: var(--mlv-drawer-hidden-transform);
-  }
-  to {
-    transform: translate(0, 0);
-  }
-}
-@keyframes drawer-leave {
-  from {
-    transform: translate(0, 0);
-  }
-  to {
-    transform: var(--mlv-drawer-hidden-transform);
-  }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .mlv-drawer--enter {
-    animation: drawer-enter var(--mlv-drawer-enter-duration, var(--mlv-duration-slow)) var(--mlv-drawer-enter-easing, var(--mlv-ease-drawer)) forwards;
-  }
-  .mlv-drawer--leave {
-    animation: drawer-leave var(--mlv-drawer-leave-duration, var(--mlv-duration-normal)) var(--mlv-drawer-leave-easing, var(--mlv-ease-drawer)) forwards;
-  }
-}
-@keyframes mlv-slide-down {
-  from {
-    opacity: 0;
-    transform: translateY(-0.25rem);
+/**
+ * Malva UI — CSS Cascade Layer order declaration
+ *
+ * Declares the ordering of the library's global style layers exactly once.
+ * Every global stylesheet that emits layered CSS `@use`s this partial first,
+ * and because Sass emits a module's CSS only once, the statement below is
+ * written to the compiled output a single time, ahead of any layered rule.
+ *
+ * Layer order (low → high priority within the library):
+ *   mlv.tokens      — design-token custom properties (theme.scss, muted.scss)
+ *   mlv.base        — global resets / element defaults (index.scss)
+ *   mlv.components  — library component styles and overlay chrome
+ *
+ * IMPORTANT — the cascade-layer contract:
+ *   Unlayered styles always beat layered styles, regardless of specificity.
+ *   Consumer overrides written WITHOUT `@layer` therefore win over anything in
+ *   these layers with zero specificity battles. See libs/styles/CLAUDE.md.
+ */
+@layer mlv.tokens, mlv.base, mlv.components;
+@layer mlv.components {
+  @keyframes dialog-enter {
+    from {
+      opacity: var(--mlv-dialog-enter-from-opacity, 0);
+      transform: scale(var(--mlv-dialog-enter-from-scale, 0.95)) translateY(var(--mlv-dialog-enter-from-translate-y, 20px));
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  @keyframes dialog-leave {
+    from {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+    to {
+      opacity: var(--mlv-dialog-leave-to-opacity, 0);
+      transform: scale(var(--mlv-dialog-leave-to-scale, 0.95)) translateY(var(--mlv-dialog-leave-to-translate-y, 20px));
+    }
   }
-}
-@keyframes mlv-stagger-enter {
-  from {
-    opacity: 0;
-    transform: translateY(var(--mlv-stagger-enter-offset-y, 0.5rem));
+  @media (prefers-reduced-motion: no-preference) {
+    .mlv-dialog--enter {
+      animation: dialog-enter var(--mlv-dialog-enter-duration, var(--mlv-duration-normal)) var(--mlv-dialog-enter-easing, var(--mlv-ease-out-strong)) forwards;
+    }
+    .mlv-dialog--leave {
+      animation: dialog-leave var(--mlv-dialog-leave-duration, var(--mlv-duration-fast)) var(--mlv-dialog-leave-easing, var(--mlv-ease-out-strong)) forwards;
+    }
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+  @keyframes popup-enter {
+    from {
+      opacity: var(--mlv-popup-enter-from-opacity, 0);
+      transform: translateY(var(--mlv-popup-enter-from-translate-y, -0.25rem)) scale(var(--mlv-popup-enter-from-scale, 0.96));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
   }
-}
-@keyframes mlv-stagger-enter-fade {
-  from {
-    opacity: 0;
+  @keyframes popup-leave {
+    from {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    to {
+      opacity: var(--mlv-popup-leave-to-opacity, 0);
+      transform: translateY(var(--mlv-popup-leave-to-translate-y, -0.25rem)) scale(var(--mlv-popup-leave-to-scale, 0.96));
+    }
   }
-  to {
-    opacity: 1;
+  @media (prefers-reduced-motion: no-preference) {
+    .mlv-popup--enter {
+      transform-origin: var(--mlv-popup-transform-origin, top center);
+      animation: popup-enter var(--mlv-popup-enter-duration, var(--mlv-duration-fast)) var(--mlv-popup-enter-easing, var(--mlv-ease-out-strong)) forwards;
+    }
+    .mlv-popup--leave {
+      transform-origin: var(--mlv-popup-transform-origin, top center);
+      animation: popup-leave var(--mlv-popup-leave-duration, var(--mlv-duration-fast)) var(--mlv-popup-leave-easing, var(--mlv-ease-out-strong)) forwards;
+    }
   }
-}
-@keyframes mlv-stagger-enter-scale {
-  from {
-    opacity: 0;
-    transform: scale(var(--mlv-stagger-enter-scale-from, 0.92));
+  @keyframes drawer-enter {
+    from {
+      transform: var(--mlv-drawer-hidden-transform);
+    }
+    to {
+      transform: translate(0, 0);
+    }
   }
-  to {
-    opacity: 1;
-    transform: scale(1);
+  @keyframes drawer-leave {
+    from {
+      transform: translate(0, 0);
+    }
+    to {
+      transform: var(--mlv-drawer-hidden-transform);
+    }
   }
-}
-@keyframes mlv-accordion--enter {
-  from {
-    grid-template-rows: 0fr;
-    opacity: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    .mlv-drawer--enter {
+      animation: drawer-enter var(--mlv-drawer-enter-duration, var(--mlv-duration-slow)) var(--mlv-drawer-enter-easing, var(--mlv-ease-drawer)) forwards;
+    }
+    .mlv-drawer--leave {
+      animation: drawer-leave var(--mlv-drawer-leave-duration, var(--mlv-duration-normal)) var(--mlv-drawer-leave-easing, var(--mlv-ease-drawer)) forwards;
+    }
   }
-  to {
-    grid-template-rows: 1fr;
-    opacity: 1;
+  @keyframes mlv-slide-down {
+    from {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-}
-@keyframes mlv-accordion--leave {
-  from {
-    grid-template-rows: 1fr;
-    opacity: 1;
+  @keyframes mlv-stagger-enter {
+    from {
+      opacity: 0;
+      transform: translateY(var(--mlv-stagger-enter-offset-y, 0.5rem));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-  to {
-    grid-template-rows: 0fr;
-    opacity: 0;
+  @keyframes mlv-stagger-enter-fade {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
-}
-@keyframes mlv-presence-enter {
-  from {
-    opacity: 0;
-    transform: translateY(var(--mlv-presence-enter-from-translate-y, 0.25rem)) scale(var(--mlv-presence-enter-from-scale, 0.98));
+  @keyframes mlv-stagger-enter-scale {
+    from {
+      opacity: 0;
+      transform: scale(var(--mlv-stagger-enter-scale-from, 0.92));
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
+  @keyframes mlv-accordion--enter {
+    from {
+      grid-template-rows: 0fr;
+      opacity: 0;
+    }
+    to {
+      grid-template-rows: 1fr;
+      opacity: 1;
+    }
   }
-}
-@keyframes mlv-presence-leave {
-  from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
+  @keyframes mlv-accordion--leave {
+    from {
+      grid-template-rows: 1fr;
+      opacity: 1;
+    }
+    to {
+      grid-template-rows: 0fr;
+      opacity: 0;
+    }
   }
-  to {
-    opacity: 0;
-    transform: translateY(var(--mlv-presence-leave-to-translate-y, 0.25rem)) scale(var(--mlv-presence-leave-to-scale, 0.98));
+  @keyframes mlv-presence-enter {
+    from {
+      opacity: 0;
+      transform: translateY(var(--mlv-presence-enter-from-translate-y, 0.25rem)) scale(var(--mlv-presence-enter-from-scale, 0.98));
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
   }
-}
-@media (prefers-reduced-motion: no-preference) {
-  .mlv-presence--enter {
-    animation: mlv-presence-enter var(--mlv-presence-enter-duration, var(--mlv-duration-normal)) var(--mlv-presence-enter-easing, var(--mlv-ease-out)) forwards;
+  @keyframes mlv-presence-leave {
+    from {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(var(--mlv-presence-leave-to-translate-y, 0.25rem)) scale(var(--mlv-presence-leave-to-scale, 0.98));
+    }
   }
-  .mlv-presence--leave {
-    animation: mlv-presence-leave var(--mlv-presence-leave-duration, var(--mlv-duration-fast)) var(--mlv-presence-leave-easing, var(--mlv-ease-in)) forwards;
+  @media (prefers-reduced-motion: no-preference) {
+    .mlv-presence--enter {
+      animation: mlv-presence-enter var(--mlv-presence-enter-duration, var(--mlv-duration-normal)) var(--mlv-presence-enter-easing, var(--mlv-ease-out)) forwards;
+    }
+    .mlv-presence--leave {
+      animation: mlv-presence-leave var(--mlv-presence-leave-duration, var(--mlv-duration-fast)) var(--mlv-presence-leave-easing, var(--mlv-ease-in)) forwards;
+    }
   }
 }
 /**
@@ -173,7 +194,7 @@
  *
  * Generated by Claude Code — generate-css-theme skill
  *
- * Primary:   #526ed3
+ * Primary:   #5770cb
  * Secondary: #ebebeb
  * Accent:    #fd774d
  * Prefix:    --mlv
@@ -187,7 +208,7 @@
  * Malva UI Theme — Core Tokens
  * Generated by Claude Code — generate-css-theme skill
  *
- * Primary:   #526ed3
+ * Primary:   #5770cb
  * Secondary: #ebebeb (neutral gray)
  * Accent:    #fd774d (coral-orange)
  * Neutral:   #64748b (slate, default)
@@ -203,41 +224,23 @@
  *   8. Spacing & Sizing
  *   9. Motion & Animation
  *  10. Stroke & Focus
+ *  11. Direction
  */
-/**
- * Malva UI — CSS Cascade Layer order declaration
- *
- * Declares the ordering of the library's global style layers exactly once.
- * Every global stylesheet that emits layered CSS `@use`s this partial first,
- * and because Sass emits a module's CSS only once, the statement below is
- * written to the compiled output a single time, ahead of any layered rule.
- *
- * Layer order (low → high priority within the library):
- *   mlv.tokens      — design-token custom properties (theme.scss, muted.scss)
- *   mlv.base        — global resets / element defaults (index.scss)
- *   mlv.components  — reserved for future component-level layering
- *
- * IMPORTANT — the cascade-layer contract:
- *   Unlayered styles always beat layered styles, regardless of specificity.
- *   Consumer overrides written WITHOUT `@layer` therefore win over anything in
- *   these layers with zero specificity battles. See libs/styles/CLAUDE.md.
- */
-@layer mlv.tokens, mlv.base, mlv.components;
 @layer mlv.tokens {
   :root,
   :host,
   [mlvTheme=light] {
-    --mlv-palette-primary-50: #eef1fd;
-    --mlv-palette-primary-100: #dce5fb;
-    --mlv-palette-primary-200: #baccf7;
-    --mlv-palette-primary-300: #8eaaf0;
-    --mlv-palette-primary-400: #6887e4;
-    --mlv-palette-primary-500: #526ed3;
-    --mlv-palette-primary-600: #3c55bb;
-    --mlv-palette-primary-700: #2d409c;
-    --mlv-palette-primary-800: #22307b;
-    --mlv-palette-primary-900: #18225a;
-    --mlv-palette-primary-950: #0f1539;
+    --mlv-palette-primary-50: #eceffc;
+    --mlv-palette-primary-100: #dbe4f9;
+    --mlv-palette-primary-200: #bacbf4;
+    --mlv-palette-primary-300: #90aaeb;
+    --mlv-palette-primary-400: #6c88dd;
+    --mlv-palette-primary-500: #5770cb;
+    --mlv-palette-primary-600: #4359b1;
+    --mlv-palette-primary-700: #334393;
+    --mlv-palette-primary-800: #273373;
+    --mlv-palette-primary-900: #1b2454;
+    --mlv-palette-primary-950: #111634;
     --mlv-palette-secondary-50: #f9f9f9;
     --mlv-palette-secondary-100: #f3f3f3;
     --mlv-palette-secondary-200: #ebebeb;
@@ -362,18 +365,17 @@
       var(--mlv-palette-accent-500) 20%,
       white
     );
+    --mlv-background-selected: var(--mlv-background-accent-1-pale);
+    --mlv-background-selected-hover: var(--mlv-background-accent-1-pale-hover);
     --mlv-background-neutral-1: var(--mlv-palette-neutral-100);
     --mlv-background-neutral-1-hover: color-mix(
       in srgb,
-      var(--mlv-palette-neutral-100) 70%,
-      var(--mlv-palette-neutral-400)
-    );
-    --mlv-background-neutral-1-active: color-mix(
-      in srgb,
-      var(--mlv-palette-neutral-100) 50%,
-      var(--mlv-palette-neutral-400)
+      var(--mlv-palette-neutral-100) 60%,
+      var(--mlv-palette-neutral-200)
     );
+    --mlv-background-neutral-1-active: var(--mlv-palette-neutral-200);
     --mlv-background-neutral-2: var(--mlv-palette-neutral-200);
+    --mlv-background-disabled: var(--mlv-palette-neutral-200);
     --mlv-background-danger-1: var(--mlv-palette-danger-600);
     --mlv-background-danger-1-hover: color-mix(
       in srgb,
@@ -468,7 +470,7 @@
     --mlv-text-primary: var(--mlv-palette-neutral-900);
     --mlv-text-secondary: var(--mlv-palette-neutral-600);
     --mlv-text-tertiary: var(--mlv-palette-neutral-400);
-    --mlv-text-disabled: var(--mlv-palette-neutral-300);
+    --mlv-text-disabled: var(--mlv-palette-neutral-500);
     --mlv-text-inverse: #ffffff;
     --mlv-text-action: var(--mlv-palette-primary-600);
     --mlv-text-action-hover: color-mix(
@@ -482,9 +484,10 @@
     --mlv-text-on-success: #ffffff;
     --mlv-text-on-warning: #ffffff;
     --mlv-text-on-info: #ffffff;
-    --mlv-text-positive: var(--mlv-palette-success-700);
+    --mlv-text-on-selected: var(--mlv-text-action);
+    --mlv-text-positive: var(--mlv-palette-success-800);
     --mlv-text-negative: var(--mlv-palette-danger-700);
-    --mlv-text-warning: var(--mlv-palette-warning-700);
+    --mlv-text-warning: var(--mlv-palette-warning-800);
     --mlv-text-info: var(--mlv-palette-info-700);
     --mlv-text-heading: var(--mlv-palette-neutral-950);
     --mlv-text-label: var(--mlv-palette-neutral-700);
@@ -515,11 +518,21 @@
     --mlv-shadow-floating: var(--mlv-shadow-3); /* dropdowns, popups, panels */
     --mlv-shadow-overlay: var(--mlv-shadow-4); /* drawers, side overlays    */
     --mlv-shadow-modal: var(--mlv-shadow-5); /* modal dialogs             */
-    --mlv-elevation-bg-1: var(--mlv-background-raised);
-    --mlv-elevation-bg-2: var(--mlv-background-raised);
-    --mlv-elevation-bg-3: var(--mlv-background-raised);
-    --mlv-elevation-bg-4: var(--mlv-background-raised);
-    --mlv-elevation-bg-5: var(--mlv-background-raised);
+    --mlv-elevation-bg-1: var(
+      --mlv-background-base
+    ); /* flush — canvas-level, border only */
+    --mlv-elevation-bg-2: var(
+      --mlv-background-raised
+    ); /* raised — card, dialog, drawer */
+    --mlv-elevation-bg-3: var(
+      --mlv-background-raised
+    ); /* floating — popup, toast, form-control */
+    --mlv-elevation-bg-4: var(
+      --mlv-background-raised
+    ); /* overlay — drawers, side overlays */
+    --mlv-elevation-bg-5: var(
+      --mlv-background-raised
+    ); /* switch-thumb only — never behind text */
     --mlv-radius-xs: 0.125rem; /* 2px  */
     --mlv-radius-s: 0.25rem; /* 4px  */
     --mlv-radius-m: 0.375rem; /* 6px  */
@@ -528,15 +541,15 @@
     --mlv-radius-2xl: 1rem; /* 16px */
     --mlv-radius-3xl: 1.5rem; /* 24px */
     --mlv-radius-full: 9999px;
-    --mlv-radius-button: var(--mlv-radius-m);
-    --mlv-radius-input: var(--mlv-radius-m);
+    --mlv-radius-button: var(--mlv-radius-l);
+    --mlv-radius-input: var(--mlv-radius-l);
     --mlv-radius-card: var(--mlv-radius-xl);
     --mlv-radius-dialog: var(--mlv-radius-2xl);
     --mlv-radius-badge: var(--mlv-radius-full);
-    --mlv-radius-tag: var(--mlv-radius-s);
+    --mlv-radius-tag: var(--mlv-radius-full);
     --mlv-radius-tooltip: var(--mlv-radius-m);
-    --mlv-radius-panel: var(--mlv-radius-xl);
-    --mlv-popover-surface-radius: var(--mlv-radius-l);
+    --mlv-radius-panel: var(--mlv-radius-l);
+    --mlv-popover-surface-radius: var(--mlv-radius-panel);
     --mlv-popover-inset: var(--mlv-spacing-1);
     --mlv-popover-item-padding: var(--mlv-spacing-2);
     --mlv-popover-item-radius: var(--mlv-radius-m);
@@ -547,10 +560,13 @@
     --mlv-font-family-mono:
       ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas,
       'Liberation Mono', 'Courier New', monospace;
+    --mlv-font-family-code:
+      'Fira Code', 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono',
+      Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
     --mlv-font-family-display: var(--mlv-font-family-sans);
     --mlv-typography-family-text: var(--mlv-font-family-sans);
     --mlv-typography-family-heading: var(--mlv-font-family-display);
-    --mlv-typography-family-code: var(--mlv-font-family-mono);
+    --mlv-typography-family-code: var(--mlv-font-family-code);
     --mlv-font-size-xs: 0.6875rem; /* 11px */
     --mlv-font-size-s: 0.75rem; /* 12px */
     --mlv-font-size-m: 0.875rem; /* 14px */
@@ -648,7 +664,7 @@
     --mlv-typography-caption-line-height: var(--mlv-line-height-tight);
     --mlv-typography-code-size: var(--mlv-font-size-m);
     --mlv-typography-code-weight: var(--mlv-font-weight-normal);
-    --mlv-typography-code-family: var(--mlv-font-family-mono);
+    --mlv-typography-code-family: var(--mlv-font-family-code);
     --mlv-typography-error-size: var(--mlv-font-size-s);
     --mlv-typography-error-weight: var(--mlv-font-weight-normal);
     --mlv-typography-error-line-height: var(--mlv-line-height-normal);
@@ -668,18 +684,19 @@
     --mlv-spacing-10: 2.5rem; /* 40px */
     --mlv-spacing-12: 3rem; /* 48px */
     --mlv-spacing-16: 4rem; /* 64px */
-    --mlv-height-xs: 2rem; /* 32px */
-    --mlv-height-s: 2.5rem; /* 40px */
+    --mlv-height-xs: 1.75rem; /* 28px */
+    --mlv-height-s: 2.25rem; /* 36px */
     --mlv-height-m: 2.75rem; /* 44px */
     --mlv-height-l: 3.25rem; /* 52px */
     --mlv-height-xl: 3.75rem; /* 60px */
-    --mlv-height-2xl: 4.25rem; /* 68px */
+    --mlv-height-2xl: 4.25rem; /* 68px — no consumer; do not introduce one */
     --mlv-padding-xs: var(--mlv-spacing-1) var(--mlv-spacing-2);
     --mlv-padding-s: var(--mlv-spacing-1-5) var(--mlv-spacing-3);
     --mlv-padding-m: var(--mlv-spacing-2) var(--mlv-spacing-4);
     --mlv-padding-l: var(--mlv-spacing-3) var(--mlv-spacing-6);
     --mlv-padding-xl: var(--mlv-spacing-3) var(--mlv-spacing-6);
     --mlv-padding-2xl: var(--mlv-spacing-3) var(--mlv-spacing-6);
+    --mlv-icon-in-container-ratio: 0.45;
     --mlv-duration-instant: 0ms;
     --mlv-duration-fast: 100ms;
     --mlv-duration-normal: 200ms;
@@ -689,13 +706,9 @@
     --mlv-ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* material standard */
     --mlv-ease-in: cubic-bezier(0.4, 0, 1, 1); /* accelerate — exit */
     --mlv-ease-out: cubic-bezier(0, 0, 0.2, 1); /* decelerate — enter */
-    --mlv-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* smooth bidirectional */
-    --mlv-ease-spring: cubic-bezier(
-      0.34,
-      1.56,
-      0.64,
-      1
-    ); /* springy overshoot */
+    --mlv-ease-in-out: var(
+      --mlv-ease-default
+    ); /* smooth bidirectional — same curve, one source */
     --mlv-ease-linear: linear;
     --mlv-ease-out-strong: cubic-bezier(
       0.23,
@@ -766,6 +779,13 @@
     --mlv-hover-overlay: 0.06;
     --mlv-active-overlay: 0.12;
     --mlv-focus-overlay: 0.08;
+    --mlv-inline-direction: 1;
+  }
+  [dir=rtl] {
+    --mlv-inline-direction: -1;
+  }
+  [dir=ltr] {
+    --mlv-inline-direction: 1;
   }
   [mlvTheme=dark] {
     --mlv-background-base: var(--mlv-palette-neutral-900);
@@ -793,6 +813,8 @@
       var(--mlv-palette-primary-500) 25%,
       var(--mlv-palette-neutral-900)
     );
+    --mlv-background-selected: var(--mlv-background-accent-1-pale);
+    --mlv-background-selected-hover: var(--mlv-background-accent-1-pale-hover);
     --mlv-background-accent-2: var(--mlv-palette-accent-500);
     --mlv-background-accent-2-hover: color-mix(
       in srgb,
@@ -817,15 +839,20 @@
     --mlv-background-neutral-1: var(--mlv-palette-neutral-800);
     --mlv-background-neutral-1-hover: color-mix(
       in srgb,
-      var(--mlv-palette-neutral-800) 75%,
+      var(--mlv-palette-neutral-800) 94%,
       white
     );
     --mlv-background-neutral-1-active: color-mix(
       in srgb,
-      var(--mlv-palette-neutral-800) 60%,
+      var(--mlv-palette-neutral-800) 88%,
       white
     );
     --mlv-background-neutral-2: var(--mlv-palette-neutral-700);
+    --mlv-background-disabled: color-mix(
+      in srgb,
+      var(--mlv-palette-neutral-800) 60%,
+      var(--mlv-palette-neutral-900)
+    );
     --mlv-background-danger-1: var(--mlv-palette-danger-600);
     --mlv-background-danger-1-hover: color-mix(
       in srgb,
@@ -920,12 +947,16 @@
     --mlv-text-primary: #ffffff;
     --mlv-text-secondary: var(--mlv-palette-neutral-300);
     --mlv-text-tertiary: var(--mlv-palette-neutral-500);
-    --mlv-text-disabled: var(--mlv-palette-neutral-600);
+    --mlv-text-disabled: var(--mlv-palette-neutral-500);
     --mlv-text-inverse: var(--mlv-palette-neutral-900);
-    --mlv-text-action: var(--mlv-palette-primary-400);
+    --mlv-text-action: color-mix(
+      in srgb,
+      var(--mlv-palette-primary-300) 85%,
+      white
+    );
     --mlv-text-action-hover: color-mix(
       in srgb,
-      var(--mlv-palette-primary-400) 80%,
+      var(--mlv-palette-primary-300) 65%,
       white
     );
     --mlv-text-primary-on-accent-1: #ffffff;
@@ -934,6 +965,7 @@
     --mlv-text-on-success: #ffffff;
     --mlv-text-on-warning: #ffffff;
     --mlv-text-on-info: #ffffff;
+    --mlv-text-on-selected: var(--mlv-text-action);
     --mlv-text-positive: var(--mlv-palette-success-400);
     --mlv-text-negative: var(--mlv-palette-danger-400);
     --mlv-text-warning: var(--mlv-palette-warning-400);
@@ -993,6 +1025,7 @@
     --mlv-background-neutral-1-hover: #d0d0d0;
     --mlv-background-neutral-1-active: #b8b8b8;
     --mlv-background-neutral-2: #d0d0d0;
+    --mlv-background-disabled: #d0d0d0;
     --mlv-background-danger-1: #cc0000;
     --mlv-background-danger-1-hover: #990000;
     --mlv-background-danger-1-active: #660000;
@@ -1310,7 +1343,7 @@
       white
     );
   }
-  [data-theme=dark] {
+  [mlvTheme=dark] {
     --mlv-muted-default-bg-1: color-mix(
       in srgb,
       var(--mlv-palette-neutral-500) 15%,
@@ -1675,7 +1708,7 @@
 @layer mlv.base {
   [class*=mlv] {
     font-family: var(--mlv-font-family-display);
-    font-size: var(--mlv-font-size-l);
+    font-size: inherit;
     color: var(--mlv-text-primary);
     padding: 0;
     margin: 0;