@yewdiel21/motion-kit 0.17.0 → 0.18.0

package/dist/css/components/stepper.css

@@ -0,0 +1,36 @@
+/* components/stepper/stepper.css */
+:is(.mk-stepper, mk-stepper) { display: block; min-width: 0; color: var(--mk-text); font: 500 .875rem/1.35 var(--mk-font); }
+[data-mk-stepper-body] { display: grid; gap: 1rem; }
+[data-mk-stepper-list] { display: flex; align-items: stretch; gap: .5rem; list-style: none; margin: 0; padding: 0; }
+[data-mk-stepper-item] { position: relative; flex: 1; min-width: 0; }
+[data-mk-stepper-step] { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; width: 100%; min-height: 44px; padding: .75rem; border: 0; border-radius: 16px; background: transparent; color: var(--mk-muted); font: inherit; text-align: start; cursor: pointer; transition: background .25s, border-radius .4s var(--mk-ease-swatch), color .2s; -webkit-tap-highlight-color: transparent; }
+[data-mk-stepper-marker] { display: grid; place-items: center; flex: none; box-sizing: border-box; width: 36px; height: 36px; border-radius: 12px; background: var(--mk-surface-2); color: var(--mk-muted); font-size: .8125rem; transition: background .25s, color .25s, width .4s var(--mk-ease-swatch), border-radius .4s var(--mk-ease-swatch); }
+[data-mk-stepper-copy] { display: grid; gap: .25rem; min-width: 0; }
+[data-mk-stepper-description] { font-size: .75rem; color: var(--mk-muted); font-weight: 400; }
+[data-mk-stepper-item][data-mk-current] [data-mk-stepper-step] { background: var(--mk-surface-2); color: var(--mk-text); border-radius: 24px; }
+[data-mk-stepper-item][data-mk-current] [data-mk-stepper-marker] { background: var(--mk-text); color: var(--mk-bg); border-radius: 64px; }
+[data-mk-stepper-item][data-mk-complete] [data-mk-stepper-marker] { background: var(--mk-surface-3); color: var(--mk-text); border-radius: 64px; }
+[data-mk-stepper-item][data-mk-error] [data-mk-stepper-marker] { background: var(--mk-error-soft); color: var(--mk-error); }
+[data-mk-stepper-step]:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; }
+[data-mk-stepper-step]:disabled { opacity: .4; cursor: not-allowed; }
+[data-mk-stepper-caption] { min-height: 1.3em; color: var(--mk-muted); font-size: .75rem; text-align: center; font-variant-numeric: tabular-nums; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='vertical'] [data-mk-stepper-list] { flex-direction: column; gap: .375rem; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='vertical'] [data-mk-stepper-step] { flex-direction: row; align-items: center; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='vertical'] [data-mk-stepper-caption] { text-align: start; padding-inline: .75rem; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='compact'] [data-mk-stepper-step] { flex-direction: row; align-items: center; padding: .375rem; border-radius: 64px; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='compact'] [data-mk-stepper-item] { flex: 0 1 auto; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='compact'] [data-mk-stepper-item][data-mk-current] { flex: 1; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='compact'] [data-mk-stepper-marker] { border-radius: 64px; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='compact'] [data-mk-stepper-copy] { display: none; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='compact'] [data-mk-current] [data-mk-stepper-copy] { display: grid; padding-inline-end: .75rem; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='compact'] [data-mk-stepper-description] { display: none; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='dots'] [data-mk-stepper-list] { justify-content: center; gap: .25rem; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='dots'] [data-mk-stepper-item] { flex: none; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='dots'] [data-mk-stepper-step] { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: transparent; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='dots'] [data-mk-stepper-marker] { width: 8px; height: 8px; border-radius: 64px; font-size: 0; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='dots'] [data-mk-current] [data-mk-stepper-marker] { width: 28px; }
+:is(.mk-stepper, mk-stepper)[data-mk-variant='dots'] [data-mk-stepper-copy] { display: none; }
+@media (hover: hover) { [data-mk-stepper-step]:not(:disabled):hover { background: var(--mk-surface-2); border-radius: 24px; color: var(--mk-text); } }
+@media (max-width: 420px) { :is(.mk-stepper, mk-stepper)[data-mk-variant='horizontal'] [data-mk-stepper-step] { padding: .5rem; font-size: .75rem; } :is(.mk-stepper, mk-stepper)[data-mk-variant='horizontal'] [data-mk-stepper-description] { display: none; } }
+@media (prefers-reduced-motion: reduce) { [data-mk-stepper-step], [data-mk-stepper-marker] { transition: none; } }
+@media (forced-colors: active) { [data-mk-current] [data-mk-stepper-marker] { outline: 2px solid Highlight; } }

package/dist/css/components/sticky-header.css

@@ -0,0 +1,10 @@
+/* components/sticky-header/sticky-header.css */
+.mk-sticky-header, mk-sticky-header { display: block; position: sticky; top: var(--mk-sticky-top, 0px); z-index: 5; height: var(--mk-sticky-expanded-height, 104px); min-height: var(--mk-sticky-expanded-height, 104px); pointer-events: none; color: var(--mk-text); font-family: var(--mk-font); }
+.mk-sticky-header [data-mk-sticky-surface], mk-sticky-header [data-mk-sticky-surface] { box-sizing: border-box; position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 104px; padding: 16px 24px; border-radius: 24px; pointer-events: auto; background: var(--mk-surface); transition: background .3s, box-shadow .3s; }
+:is(.mk-sticky-header,mk-sticky-header)[data-mk-compact=true] [data-mk-sticky-surface] { background: var(--mk-surface-2); box-shadow: 0 10px 24px -20px var(--mk-shadow-color, rgb(0 0 0 / .4)); }
+:is(.mk-sticky-header,mk-sticky-header) [data-mk-sticky-title] { display: block; margin: 0; font-size: clamp(20px, 3.5vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
+:is(.mk-sticky-header,mk-sticky-header) [data-mk-sticky-subtitle] { display: block; margin: 4px 0 0; height: 1.5em; overflow: hidden; color: var(--mk-muted); font-size: 12px; line-height: 1.5; }
+:is(.mk-sticky-header,mk-sticky-header) :is(button,a):focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; }
+:is(.mk-sticky-header,mk-sticky-header) button:disabled { opacity: .4; cursor: not-allowed; }
+@media (max-width: 480px) { :is(.mk-sticky-header,mk-sticky-header) [data-mk-sticky-surface] { gap: 12px; } }
+@media (prefers-reduced-motion: reduce) { :is(.mk-sticky-header,mk-sticky-header) * { transition: none !important; } }

package/dist/css/components/temperature-slider.css

@@ -0,0 +1,29 @@
+/* components/temperature-slider/temperature-slider.css */
+:is(.mk-temperature-slider, mk-temperature-slider) { display: block; width: 100%; min-width: 0; color: var(--mk-text); font: 500 .875rem/1.4 var(--mk-font); }
+[data-mk-temperature-body] { display: grid; gap: .875rem; }
+[data-mk-temperature-header] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
+[data-mk-temperature-output] { font-variant-numeric: tabular-nums; white-space: nowrap; }
+[data-mk-temperature-track] { position: relative; height: 76px; min-width: 0; border-radius: 24px; background: var(--mk-surface-2); }
+[data-mk-temperature-input] { position: absolute; z-index: 3; inset: 0; box-sizing: border-box; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize; opacity: 0; }
+[data-mk-temperature-input]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 32px; height: 76px; background: transparent; }
+[data-mk-temperature-input]::-moz-range-thumb { width: 32px; height: 76px; border: 0; background: transparent; }
+[data-mk-temperature-thumb] { position: absolute; z-index: 2; top: 50%; left: calc(16px + (100% - 32px) * var(--mk-temperature-ratio, .5)); translate: -50% -50%; pointer-events: none; }
+[data-mk-temperature-track]:has(:focus-visible) { outline: 2px solid var(--mk-accent); outline-offset: 4px; }
+[data-mk-temperature-ends] { display: flex; justify-content: space-between; margin-top: -.375rem; color: var(--mk-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
+[data-mk-temperature-message] { color: var(--mk-error); font-size: .8125rem; font-weight: 400; }
+[data-mk-temperature-message]:empty { display: none; }
+:is(.mk-temperature-slider, mk-temperature-slider)[data-mk-disabled] { opacity: .4; }
+:is(.mk-temperature-slider, mk-temperature-slider)[data-mk-disabled] [data-mk-temperature-input] { cursor: not-allowed; }
+:is(.mk-temperature-slider, mk-temperature-slider)[data-mk-error] [data-mk-temperature-track] { outline: 1px solid var(--mk-error); }
+:is(.mk-temperature-slider, mk-temperature-slider) { --mk-temperature-cool: var(--mk-accent); --mk-temperature-hot: var(--md-sys-color-tertiary, var(--mk-text)); --mk-temperature-tint: color-mix(in srgb, var(--mk-temperature-cool), var(--mk-temperature-hot) var(--mk-temperature-warm, 50%)); }
+[data-mk-temperature-output] { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 500; letter-spacing: -.06em; line-height: 1.2; }
+[data-mk-temperature-track] { height: 64px; background: color-mix(in srgb, var(--mk-temperature-tint) 5%, var(--mk-surface-2)); }
+[data-mk-temperature-rail] { position: absolute; inset: 28px 16px; border-radius: 64px; background: var(--mk-outline-soft); overflow: hidden; }
+[data-mk-temperature-fill] { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--mk-temperature-tint) 42%, var(--mk-text)); }
+[data-mk-temperature-ticks] { position: absolute; inset: 0 16px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
+[data-mk-temperature-ticks] > i { width: 1px; height: 18px; background: var(--mk-outline-soft); }
+[data-mk-temperature-thumb] { display: grid; place-items: center; width: 30px; height: 40px; border-radius: 12px; background: var(--mk-text); color: var(--mk-bg); font: 700 18px/1 var(--mk-font); box-shadow: 0 0 0 4px var(--mk-surface-2); transition: width .35s var(--mk-ease-swatch), border-radius .35s var(--mk-ease-swatch); }
+:is(.mk-temperature-slider, mk-temperature-slider)[data-mk-held] [data-mk-temperature-thumb] { width: 38px; border-radius: 16px; }
+@media (hover: hover) { [data-mk-temperature-track]:has(:not(:disabled):hover) [data-mk-temperature-thumb] { border-radius: 16px; width: 34px; } }
+@media (prefers-reduced-motion: reduce) { [data-mk-temperature-thumb] { transition: none; } }
+@media (forced-colors: active) { [data-mk-temperature-rail] { background: GrayText; } [data-mk-temperature-fill], [data-mk-temperature-thumb] { background: Highlight; } }

package/dist/css/components/voice-message-bubble.css

@@ -1,50 +1,67 @@
 /* components/waveform-player/waveform-player.css */
-.mk-waveform-player, mk-waveform-player {
-  --mk-wave-color: var(--mk-accent);
-  --mk-wave-track: color-mix(in srgb, var(--mk-text) 38%, transparent);
-  display: block;
-  width: 100%;
-  min-width: 0;
-  color: var(--mk-text);
-  font-family: var(--mk-font);
-}
-[data-mk-wave-content] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .875rem; }
-[data-mk-wave-toggle] { display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: var(--mk-wave-color); color: var(--mk-on-accent, var(--mk-bg)); cursor: pointer; }
-[data-mk-wave-toggle] svg { width: 1.4rem; height: 1.4rem; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
-[data-mk-wave-body] { min-width: 0; }
-[data-mk-wave-track] { position: relative; height: 3rem; border-radius: .5rem; }
-[data-mk-wave-bars] { display: flex; align-items: center; gap: 3px; height: 100%; pointer-events: none; overflow: hidden; }
-[data-mk-wave-bar] { display: block; flex: 1 1 0; min-width: 1px; border-radius: 999px; background: var(--mk-wave-track); transition: background-color .16s ease; }
-[data-mk-wave-bar][data-mk-played] { background: var(--mk-wave-color); }
-[data-mk-wave-seek] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
-[data-mk-wave-track]:has(input:focus-visible) { outline: 2px solid var(--mk-wave-color); outline-offset: 4px; }
-[data-mk-wave-footer] { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 2rem; }
-[data-mk-wave-time] { color: var(--mk-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
-[data-mk-wave-rate] { min-width: 44px; min-height: 44px; padding: .25rem .5rem; border: 0; border-radius: 99px; color: var(--mk-text); background: var(--mk-surface-2); font: 600 .75rem var(--mk-font); cursor: pointer; }
-[data-mk-wave-rate][hidden] { display: none; }
-[data-mk-wave-message] { grid-column: 2; color: var(--mk-muted); font-size: .75rem; line-height: 1.5; }
-[data-mk-wave-message]:empty { display: none; }
-[data-mk-wave-toggle]:focus-visible, [data-mk-wave-rate]:focus-visible { outline: 2px solid var(--mk-wave-color); outline-offset: 3px; }
-[data-mk-wave-toggle]:disabled, [data-mk-wave-rate]:disabled { opacity: .5; cursor: default; }
-[data-mk-wave-track]:has(input:disabled) { opacity: .55; }
-[data-mk-wave-state='error'] [data-mk-wave-message] { color: var(--mk-error, var(--mk-text)); }
-@media (prefers-reduced-motion: reduce) { [data-mk-wave-bar] { transition: none; } }
-@media (forced-colors: active) {
-  [data-mk-wave-toggle], [data-mk-wave-rate] { border: 1px solid ButtonText; }
-  [data-mk-wave-bar] { background: GrayText; }
-  [data-mk-wave-bar][data-mk-played] { background: Highlight; }
+/* Shares the equalizer's vocabulary: tonal track, pill bars, a cut-out head that grows when held. */
+.mk-waveform-player, mk-waveform-player {
+  --mk-wave-color: var(--mk-text);
+  --mk-wave-track: var(--mk-outline-soft);
+  --mk-wave-surface: var(--mk-surface-2);
+  --mk-wave-inset: 14px;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+[data-mk-wave-content] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .875rem; }
+[data-mk-wave-toggle] { display: grid; place-items: center; align-self: start; width: 3.5rem; height: 3.5rem; margin-top: .25rem; border: 0; border-radius: 50%; background: var(--mk-text); color: var(--mk-bg); cursor: pointer; transition: border-radius .4s var(--mk-ease-playful); }
+[data-mk-wave-toggle]:hover:enabled { border-radius: 22px; }
+[data-mk-wave-icon] { display: grid; place-items: center; width: 24px; height: 24px; }
+[data-mk-wave-state='playing'] [data-mk-wave-toggle] { border-radius: 20px; }
+[data-mk-wave-toggle] svg { width: 1.4rem; height: 1.4rem; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
+[data-mk-wave-body] { display: grid; gap: .5rem; min-width: 0; }
+[data-mk-wave-track] { position: relative; height: 4rem; min-width: 0; border-radius: 24px; background: var(--mk-wave-surface); }
+[data-mk-wave-bars] { position: absolute; inset: 12px var(--mk-wave-inset); display: flex; align-items: center; gap: 3px; pointer-events: none; }
+[data-mk-wave-bar] { display: block; flex: 1 1 0; min-width: 1px; min-height: 4px; border-radius: 64px; background: var(--mk-wave-track); transform-origin: center; transition: background-color .16s; }
+[data-mk-wave-bar][data-mk-played] { background: var(--mk-wave-color); }
+[data-mk-wave-head] { position: absolute; z-index: 2; top: 50%; left: calc(var(--mk-wave-inset) + (100% - 2 * var(--mk-wave-inset)) * var(--mk-wave-progress, 0)); box-sizing: content-box; width: 4px; height: calc(100% - 20px); border: 3px solid var(--mk-wave-surface); border-radius: 64px; background: var(--mk-wave-color); translate: -50% -50%; pointer-events: none; transition: height .35s var(--mk-ease-swatch), border-width .35s var(--mk-ease-swatch); }
+[data-mk-wave-scrubbing] [data-mk-wave-head] { height: calc(100% - 10px); border-width: 5px; }
+@media (hover: hover) { [data-mk-wave-track]:has(input:enabled:hover) [data-mk-wave-head] { height: calc(100% - 14px); } }
+[data-mk-wave-preview] { position: absolute; bottom: calc(100% + 10px); left: calc(var(--mk-wave-inset) + (100% - 2 * var(--mk-wave-inset)) * var(--mk-wave-at, 0)); z-index: 3; padding: .4rem .7rem; border-radius: 99px; background: var(--mk-glass-inverse); color: var(--mk-bg); backdrop-filter: blur(16px); box-shadow: inset 1px 1px 1px color-mix(in srgb, var(--mk-bg) 20%, transparent); font-size: .6875rem; font-variant-numeric: tabular-nums; translate: -50% 0; pointer-events: none; }
+[data-mk-wave-preview][hidden] { display: none; }
+[data-mk-wave-seek] { position: absolute; z-index: 4; inset: 0; box-sizing: border-box; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; opacity: 0; cursor: ew-resize; }
+[data-mk-wave-seek]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: calc(2 * var(--mk-wave-inset)); height: 4rem; background: transparent; }
+[data-mk-wave-seek]::-moz-range-thumb { width: calc(2 * var(--mk-wave-inset)); height: 4rem; border: 0; background: transparent; }
+[data-mk-wave-track]:has(input:focus-visible) { outline: 2px solid var(--mk-accent); outline-offset: 4px; }
+[data-mk-wave-footer] { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 2rem; }
+[data-mk-wave-time] { color: var(--mk-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
+[data-mk-wave-rate] { min-width: 44px; min-height: 36px; padding: .375rem .75rem; border: 0; border-radius: 64px; color: var(--mk-text); background: var(--mk-wave-surface); font: 600 .75rem var(--mk-font); font-variant-numeric: tabular-nums; cursor: pointer; transition: padding .35s var(--mk-ease-swatch), background .15s; }
+[data-mk-wave-rate]:hover:enabled { padding-inline: 1rem; background: color-mix(in srgb, var(--mk-text) 8%, var(--mk-wave-surface)); }
+[data-mk-wave-rate][hidden] { display: none; }
+[data-mk-wave-message] { grid-column: 2; color: var(--mk-muted); font-size: .75rem; line-height: 1.5; }
+[data-mk-wave-message]:empty { display: none; }
+[data-mk-wave-toggle]:focus-visible, [data-mk-wave-rate]:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; }
+[data-mk-wave-toggle]:disabled, [data-mk-wave-rate]:disabled { opacity: .5; cursor: default; }
+[data-mk-wave-track]:has(input:disabled) { opacity: .55; }
+[data-mk-wave-track]:has(input:disabled) [data-mk-wave-seek] { cursor: default; }
+[data-mk-wave-state='error'] [data-mk-wave-message] { color: var(--mk-error, var(--mk-text)); }
+@media (prefers-reduced-motion: reduce) { [data-mk-wave-bar], [data-mk-wave-toggle], [data-mk-wave-head], [data-mk-wave-rate] { transition: none; } }
+@media (forced-colors: active) {
+  [data-mk-wave-toggle], [data-mk-wave-rate] { border: 1px solid ButtonText; }
+  [data-mk-wave-bar] { background: GrayText; }
+  [data-mk-wave-bar][data-mk-played], [data-mk-wave-head] { background: Highlight; }
 }
 
 /* components/voice-message-bubble/voice-message-bubble.css */
-/* Requires waveform-player.css; the bubble composes its player without duplicating it. */
-.mk-voice-message-bubble, mk-voice-message-bubble { display: block; width: min(100%, 25rem); color: var(--mk-text); font-family: var(--mk-font); }
-[data-mk-voice-message-content] { display: grid; gap: .75rem; padding: 1rem 1.125rem .75rem; background: var(--mk-surface-2); border: 1px solid var(--mk-outline-soft); border-radius: 1.5rem 1.5rem 1.5rem .375rem; }
-:is(.mk-voice-message-bubble, mk-voice-message-bubble)[data-mk-direction='outgoing'] { margin-inline-start: auto; }
-:is(.mk-voice-message-bubble, mk-voice-message-bubble)[data-mk-direction='outgoing'] [data-mk-voice-message-content] { background: color-mix(in srgb, var(--mk-accent) 10%, var(--mk-surface-1)); border-radius: 1.5rem 1.5rem .375rem 1.5rem; }
-[data-mk-voice-message-header], [data-mk-voice-message-footer] { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; font-size: .6875rem; color: var(--mk-muted); }
-[data-mk-voice-message-author] { font-weight: 600; color: var(--mk-text); }
-[data-mk-voice-message-caption] { margin-inline-start: auto; }
-[data-mk-voice-message-footer] { justify-content: flex-end; }
-[data-mk-voice-message-status] { color: var(--mk-accent); }
-[data-mk-voice-message-content] .mk-waveform-player { --mk-wave-track: color-mix(in srgb, var(--mk-text) 38%, transparent); }
+/* Requires waveform-player.css; the bubble composes its player without duplicating it. */
+.mk-voice-message-bubble, mk-voice-message-bubble { display: block; width: min(100%, 25rem); color: var(--mk-text); font-family: var(--mk-font); }
+[data-mk-voice-message-content] { display: grid; gap: .5rem; padding: 1rem 1.25rem .75rem; background: var(--mk-surface-2); border: 0; border-radius: 32px 32px 32px 12px; }
+:is(.mk-voice-message-bubble, mk-voice-message-bubble)[data-mk-direction='outgoing'] { margin-inline-start: auto; }
+:is(.mk-voice-message-bubble, mk-voice-message-bubble)[data-mk-direction='outgoing'] [data-mk-voice-message-content] { background: var(--mk-surface-3); border-radius: 32px 32px 12px 32px; }
+[data-mk-voice-message-header], [data-mk-voice-message-footer] { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; font-size: .6875rem; color: var(--mk-muted); }
+[data-mk-voice-message-author] { font-weight: 600; color: var(--mk-text); }
+[data-mk-voice-message-caption] { margin-inline-start: auto; }
+[data-mk-voice-message-footer] { justify-content: flex-end; }
+[data-mk-voice-message-status] { color: var(--mk-accent); }
+/* The track steps one tonal level above its bubble, like the equalizer above the page. */
+[data-mk-voice-message-content] .mk-waveform-player { --mk-wave-surface: var(--mk-surface-3); }
+:is(.mk-voice-message-bubble, mk-voice-message-bubble)[data-mk-direction='outgoing'] .mk-waveform-player { --mk-wave-surface: var(--mk-surface-4); }
 @media (forced-colors: active) { [data-mk-voice-message-content] { border-color: CanvasText; } }

package/dist/css/components/waveform-player.css

@@ -1,36 +1,51 @@
 /* components/waveform-player/waveform-player.css */
-.mk-waveform-player, mk-waveform-player {
-  --mk-wave-color: var(--mk-accent);
-  --mk-wave-track: color-mix(in srgb, var(--mk-text) 38%, transparent);
-  display: block;
-  width: 100%;
-  min-width: 0;
-  color: var(--mk-text);
-  font-family: var(--mk-font);
-}
-[data-mk-wave-content] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .875rem; }
-[data-mk-wave-toggle] { display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: var(--mk-wave-color); color: var(--mk-on-accent, var(--mk-bg)); cursor: pointer; }
-[data-mk-wave-toggle] svg { width: 1.4rem; height: 1.4rem; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
-[data-mk-wave-body] { min-width: 0; }
-[data-mk-wave-track] { position: relative; height: 3rem; border-radius: .5rem; }
-[data-mk-wave-bars] { display: flex; align-items: center; gap: 3px; height: 100%; pointer-events: none; overflow: hidden; }
-[data-mk-wave-bar] { display: block; flex: 1 1 0; min-width: 1px; border-radius: 999px; background: var(--mk-wave-track); transition: background-color .16s ease; }
-[data-mk-wave-bar][data-mk-played] { background: var(--mk-wave-color); }
-[data-mk-wave-seek] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
-[data-mk-wave-track]:has(input:focus-visible) { outline: 2px solid var(--mk-wave-color); outline-offset: 4px; }
-[data-mk-wave-footer] { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 2rem; }
-[data-mk-wave-time] { color: var(--mk-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
-[data-mk-wave-rate] { min-width: 44px; min-height: 44px; padding: .25rem .5rem; border: 0; border-radius: 99px; color: var(--mk-text); background: var(--mk-surface-2); font: 600 .75rem var(--mk-font); cursor: pointer; }
-[data-mk-wave-rate][hidden] { display: none; }
-[data-mk-wave-message] { grid-column: 2; color: var(--mk-muted); font-size: .75rem; line-height: 1.5; }
-[data-mk-wave-message]:empty { display: none; }
-[data-mk-wave-toggle]:focus-visible, [data-mk-wave-rate]:focus-visible { outline: 2px solid var(--mk-wave-color); outline-offset: 3px; }
-[data-mk-wave-toggle]:disabled, [data-mk-wave-rate]:disabled { opacity: .5; cursor: default; }
-[data-mk-wave-track]:has(input:disabled) { opacity: .55; }
-[data-mk-wave-state='error'] [data-mk-wave-message] { color: var(--mk-error, var(--mk-text)); }
-@media (prefers-reduced-motion: reduce) { [data-mk-wave-bar] { transition: none; } }
-@media (forced-colors: active) {
-  [data-mk-wave-toggle], [data-mk-wave-rate] { border: 1px solid ButtonText; }
-  [data-mk-wave-bar] { background: GrayText; }
-  [data-mk-wave-bar][data-mk-played] { background: Highlight; }
+/* Shares the equalizer's vocabulary: tonal track, pill bars, a cut-out head that grows when held. */
+.mk-waveform-player, mk-waveform-player {
+  --mk-wave-color: var(--mk-text);
+  --mk-wave-track: var(--mk-outline-soft);
+  --mk-wave-surface: var(--mk-surface-2);
+  --mk-wave-inset: 14px;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+[data-mk-wave-content] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .875rem; }
+[data-mk-wave-toggle] { display: grid; place-items: center; align-self: start; width: 3.5rem; height: 3.5rem; margin-top: .25rem; border: 0; border-radius: 50%; background: var(--mk-text); color: var(--mk-bg); cursor: pointer; transition: border-radius .4s var(--mk-ease-playful); }
+[data-mk-wave-toggle]:hover:enabled { border-radius: 22px; }
+[data-mk-wave-icon] { display: grid; place-items: center; width: 24px; height: 24px; }
+[data-mk-wave-state='playing'] [data-mk-wave-toggle] { border-radius: 20px; }
+[data-mk-wave-toggle] svg { width: 1.4rem; height: 1.4rem; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
+[data-mk-wave-body] { display: grid; gap: .5rem; min-width: 0; }
+[data-mk-wave-track] { position: relative; height: 4rem; min-width: 0; border-radius: 24px; background: var(--mk-wave-surface); }
+[data-mk-wave-bars] { position: absolute; inset: 12px var(--mk-wave-inset); display: flex; align-items: center; gap: 3px; pointer-events: none; }
+[data-mk-wave-bar] { display: block; flex: 1 1 0; min-width: 1px; min-height: 4px; border-radius: 64px; background: var(--mk-wave-track); transform-origin: center; transition: background-color .16s; }
+[data-mk-wave-bar][data-mk-played] { background: var(--mk-wave-color); }
+[data-mk-wave-head] { position: absolute; z-index: 2; top: 50%; left: calc(var(--mk-wave-inset) + (100% - 2 * var(--mk-wave-inset)) * var(--mk-wave-progress, 0)); box-sizing: content-box; width: 4px; height: calc(100% - 20px); border: 3px solid var(--mk-wave-surface); border-radius: 64px; background: var(--mk-wave-color); translate: -50% -50%; pointer-events: none; transition: height .35s var(--mk-ease-swatch), border-width .35s var(--mk-ease-swatch); }
+[data-mk-wave-scrubbing] [data-mk-wave-head] { height: calc(100% - 10px); border-width: 5px; }
+@media (hover: hover) { [data-mk-wave-track]:has(input:enabled:hover) [data-mk-wave-head] { height: calc(100% - 14px); } }
+[data-mk-wave-preview] { position: absolute; bottom: calc(100% + 10px); left: calc(var(--mk-wave-inset) + (100% - 2 * var(--mk-wave-inset)) * var(--mk-wave-at, 0)); z-index: 3; padding: .4rem .7rem; border-radius: 99px; background: var(--mk-glass-inverse); color: var(--mk-bg); backdrop-filter: blur(16px); box-shadow: inset 1px 1px 1px color-mix(in srgb, var(--mk-bg) 20%, transparent); font-size: .6875rem; font-variant-numeric: tabular-nums; translate: -50% 0; pointer-events: none; }
+[data-mk-wave-preview][hidden] { display: none; }
+[data-mk-wave-seek] { position: absolute; z-index: 4; inset: 0; box-sizing: border-box; width: 100%; height: 100%; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; opacity: 0; cursor: ew-resize; }
+[data-mk-wave-seek]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: calc(2 * var(--mk-wave-inset)); height: 4rem; background: transparent; }
+[data-mk-wave-seek]::-moz-range-thumb { width: calc(2 * var(--mk-wave-inset)); height: 4rem; border: 0; background: transparent; }
+[data-mk-wave-track]:has(input:focus-visible) { outline: 2px solid var(--mk-accent); outline-offset: 4px; }
+[data-mk-wave-footer] { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 2rem; }
+[data-mk-wave-time] { color: var(--mk-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
+[data-mk-wave-rate] { min-width: 44px; min-height: 36px; padding: .375rem .75rem; border: 0; border-radius: 64px; color: var(--mk-text); background: var(--mk-wave-surface); font: 600 .75rem var(--mk-font); font-variant-numeric: tabular-nums; cursor: pointer; transition: padding .35s var(--mk-ease-swatch), background .15s; }
+[data-mk-wave-rate]:hover:enabled { padding-inline: 1rem; background: color-mix(in srgb, var(--mk-text) 8%, var(--mk-wave-surface)); }
+[data-mk-wave-rate][hidden] { display: none; }
+[data-mk-wave-message] { grid-column: 2; color: var(--mk-muted); font-size: .75rem; line-height: 1.5; }
+[data-mk-wave-message]:empty { display: none; }
+[data-mk-wave-toggle]:focus-visible, [data-mk-wave-rate]:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; }
+[data-mk-wave-toggle]:disabled, [data-mk-wave-rate]:disabled { opacity: .5; cursor: default; }
+[data-mk-wave-track]:has(input:disabled) { opacity: .55; }
+[data-mk-wave-track]:has(input:disabled) [data-mk-wave-seek] { cursor: default; }
+[data-mk-wave-state='error'] [data-mk-wave-message] { color: var(--mk-error, var(--mk-text)); }
+@media (prefers-reduced-motion: reduce) { [data-mk-wave-bar], [data-mk-wave-toggle], [data-mk-wave-head], [data-mk-wave-rate] { transition: none; } }
+@media (forced-colors: active) {
+  [data-mk-wave-toggle], [data-mk-wave-rate] { border: 1px solid ButtonText; }
+  [data-mk-wave-bar] { background: GrayText; }
+  [data-mk-wave-bar][data-mk-played], [data-mk-wave-head] { background: Highlight; }
 }

package/dist/css/components/wheel-picker.css

@@ -1,17 +1,18 @@
 /* components/wheel-picker/wheel-picker.css */
-.mk-wheel-picker, mk-wheel-picker { --mk-wheel-row: 44px; --mk-wheel-rows: 5; display: grid; gap: .75rem; min-width: 0; color: var(--mk-text); font-family: var(--mk-font); }
-[data-mk-wheel-label] { color: var(--mk-muted); font-size: .8125rem; text-align: center; }
-[data-mk-wheel-frame] { position: relative; isolation: isolate; min-width: 0; }
-[data-mk-wheel-highlight] { position: absolute; top: calc(50% - var(--mk-wheel-row) / 2); right: .5rem; left: .5rem; height: var(--mk-wheel-row); border: 1px solid var(--mk-outline-soft); border-radius: var(--mk-radius-full); background: var(--mk-surface-3); pointer-events: none; z-index: -1; }
-[data-mk-wheel-viewport] { height: calc(var(--mk-wheel-row) * var(--mk-wheel-rows)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-tap-highlight-color: transparent; mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); }
-[data-mk-wheel-viewport]::-webkit-scrollbar { display: none; }
-[data-mk-wheel-viewport]:focus { outline: none; }
-[data-mk-wheel-frame]:has([data-mk-wheel-viewport]:focus-visible) { outline: 2px solid var(--mk-accent); outline-offset: 3px; border-radius: 24px; }
-[data-mk-wheel-list] { padding-block: calc(var(--mk-wheel-row) * (var(--mk-wheel-rows) - 1) / 2); }
-[data-mk-wheel-option] { display: grid; place-items: center; height: var(--mk-wheel-row); min-height: 44px; padding-inline: 1rem; color: var(--mk-muted); font-size: 1.1rem; font-variant-numeric: tabular-nums; font-weight: 450; scroll-snap-align: center; cursor: pointer; user-select: none; transform-origin: center; transition: color .18s ease; }
-[data-mk-wheel-option][aria-selected='true'] { color: var(--mk-text); font-weight: 650; }
-[data-mk-wheel-option][aria-disabled='true'] { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
-[data-mk-wheel-empty] { display: block; text-align: center; color: var(--mk-muted); font-size: .875rem; }
-[data-mk-disabled] [data-mk-wheel-viewport] { overflow: hidden; opacity: .5; }
-@media (prefers-reduced-motion: reduce) { [data-mk-wheel-option] { transition: none; transform: none !important; } }
+.mk-wheel-picker, mk-wheel-picker { --mk-wheel-row: 44px; --mk-wheel-rows: 5; display: grid; gap: .75rem; min-width: 0; color: var(--mk-text); font-family: var(--mk-font); }
+[data-mk-wheel-label] { color: var(--mk-muted); font-size: .8125rem; text-align: center; }
+[data-mk-wheel-frame] { position: relative; isolation: isolate; min-width: 0; overflow: hidden; border-radius: var(--mk-radius-xl); background: var(--mk-surface-1); }
+[data-mk-wheel-highlight] { position: absolute; top: calc(50% - var(--mk-wheel-row) / 2); right: .5rem; left: .5rem; height: var(--mk-wheel-row); border-radius: var(--mk-radius-md); background: var(--mk-surface-3); box-shadow: inset 0 1px color-mix(in srgb, var(--mk-text) 5%, transparent), inset 0 -1px color-mix(in srgb, var(--mk-text) 4%, transparent); pointer-events: none; z-index: -1; }
+[data-mk-wheel-viewport] { height: calc(var(--mk-wheel-row) * var(--mk-wheel-rows)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-tap-highlight-color: transparent; mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
+[data-mk-wheel-viewport]::-webkit-scrollbar { display: none; }
+[data-mk-wheel-viewport]:focus { outline: none; }
+[data-mk-wheel-frame]:has([data-mk-wheel-viewport]:focus-visible) { outline: 2px solid var(--mk-accent); outline-offset: 3px; border-radius: 24px; }
+[data-mk-wheel-list] { padding-block: calc(var(--mk-wheel-row) * (var(--mk-wheel-rows) - 1) / 2); }
+[data-mk-wheel-option] { display: grid; place-items: center; height: var(--mk-wheel-row); min-height: 44px; padding-inline: 1rem; color: var(--mk-text); font-size: 1.35rem; font-variant-numeric: tabular-nums; font-weight: 450; scroll-snap-align: center; cursor: pointer; user-select: none; transform-origin: center; backface-visibility: hidden; transition: color .18s ease; }
+[data-mk-wheel-option][aria-selected='true'] { color: var(--mk-text); font-weight: 650; }
+[data-mk-wheel-option]:not([aria-disabled='true']):hover { color: var(--mk-accent); }
+[data-mk-wheel-option][aria-disabled='true'] { color: var(--mk-muted); cursor: not-allowed; }
+[data-mk-wheel-empty] { display: block; text-align: center; color: var(--mk-muted); font-size: .875rem; }
+[data-mk-disabled] [data-mk-wheel-viewport] { overflow: hidden; opacity: .5; }
+@media (prefers-reduced-motion: reduce) { [data-mk-wheel-option] { transition: none; transform: none !important; } }
 @media (forced-colors: active) { [data-mk-wheel-highlight] { border: 2px solid Highlight; } }

package/dist/css/tokens.css

@@ -16,6 +16,10 @@
   --mk-ease-nav-move: cubic-bezier(0.38, 0.49, 0, 1.2);
   --mk-ease-swatch: cubic-bezier(0.38, 0.49, 0, 1.5);
   --mk-ease-swatch-light: cubic-bezier(0.11, 1, 0, 1);
+  --mk-ease-click: cubic-bezier(0.37, 1.42, 0.37, 1);
+  --mk-ease-playful: cubic-bezier(0.38, 0.49, 0, 2);
+  --mk-ease-pop: cubic-bezier(0.1, 0.8, 0, 1.1);
+  --mk-ease-wipe: cubic-bezier(0.38, 0.49, 0, 1);
   --mk-ease-slot: cubic-bezier(0.34, 1.56, 0.64, 1);
   /* Glass, sheet and control curves */
   --mk-ease-glass: cubic-bezier(0.25, 1, 0.5, 1);