@yewdiel21/motion-kit 0.17.0 → 0.19.0

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);

package/dist/elements/index.d.ts

@@ -1,7 +1,7 @@
 import { I as Instance } from '../types-BkS_raL8.js';
-import { dh as StudioDockInstance, dk as StudioDockView, dy as TrailerInstance, bg as DialogInstance, bi as DialogOptions, c3 as MenuInstance, cp as QuantityInstance, cb as PaginationInstance, bO as HoverCardInstance, bU as InputOtpInstance, av as CalendarInstance, d4 as SlotPickerInstance, ai as AttachmentInstance, ah as AttachmentFile, an as AttachmentStatus, d1 as SkeletonInstance, cs as QuestionnaireInstance, cr as QuestionnaireAnswers, aK as CodeBlockInstance, aZ as ContextMenuInstance, bZ as LinkPreviewInstance, cm as ProgressInstance, cx as RangeSliderInstance, cz as RangeValue, aB as ChartInstance, aC as ChartOptions, b0 as CreditCardInstance, a$ as CreditCardField, b3 as CreditCardValues, aA as CardBrand, aX as CommandSearchInstance, aW as CommandItem, bM as HoldConfirmInstance, bS as ImagePreviewInstance, c8 as NotificationBellInstance, cg as PasswordStrengthInstance, cL as ScratchCardInstance, dd as StarRatingInstance, aU as ColorSliderInstance, aM as ColorAreaInstance, aP as ColorFieldInstance, aS as ColorPickerInstance, dp as TimeFieldInstance, cv as RangeCalendarInstance, bb as DateRange, bc as DateRangePickerInstance, dw as TooltipInstance, ck as PopoverInstance, c0 as LoadingButtonInstance, c2 as LoadingState, ap as BreadcrumbInstance, bu as EmptyStateInstance, df as StatCardInstance, aF as ChartTooltipInstance, c5 as MultiSelectInstance, dm as TagInputInstance, be as DateTimePickerInstance, bE as FilterBuilderInstance, bI as FilterGroup, dt as TimelineInstance, ds as TimelineEvent, ab as ActivityFeedInstance, ad as ActivityItem, dB as TreeViewInstance, bz as FileExplorerInstance, bX as JsonViewerInstance, dE as VirtualListInstance, cA as ResizablePanelInstance, db as SplitViewInstance, b9 as DataTableInstance, b7 as DataRow, bp as EditableTableInstance, cG as RichTextEditorInstance, cP as SelectInstance, af as AddToCartInstance, cN as ScrollIslandInstance, cY as SignaturePadInstance, cT as SignatureData, cU as SignatureExportOptions, cV as SignaturePNGOptions, dM as WaveformPlayerInstance, dN as WaveformPlayerOptions, dO as WaveformPlayerState, dJ as VoiceMessageBubbleInstance, dK as VoiceMessageBubbleOptions, bl as DrilldownMenuInstance, bm as DrilldownMenuItem, dR as WheelPickerInstance, dQ as WheelPickerEntry } from '../engine-Bn6hC87X.js';
-import { E as ThemePickerInstance, M as ToasterInstance, C as ChatInstance, d as ChatRole, l as NavInstance, n as NavStyle, o as NavStyleAlias, e as CursorInstance, I as IslandInstance, V as ToolbarInstance, B as BidirectionalSliderInstance, X as VoiceDotsInstance, Z as VoiceState, r as PieChartInstance, s as PieChartOptions, R as RadarChartInstance, u as RadarChartOptions, w as RadialChartInstance, x as RadialChartOptions, S as SankeyChartInstance, z as SankeyChartOptions, H as HeatmapChartInstance, h as HeatmapChartOptions, O as OrbitMenuInstance } from '../store-CZ6vdtIE.js';
-export { an as toast } from '../store-CZ6vdtIE.js';
+import { e7 as StudioDockInstance, ea as StudioDockView, eq as TrailerInstance, bA as DialogInstance, bC as DialogOptions, ct as MenuInstance, cZ as QuantityInstance, cJ as PaginationInstance, ca as HoverCardInstance, cg as InputOtpInstance, aP as CalendarInstance, dR as SlotPickerInstance, ay as AttachmentInstance, ax as AttachmentFile, aD as AttachmentStatus, dO as SkeletonInstance, d0 as QuestionnaireInstance, c$ as QuestionnaireAnswers, b2 as CodeBlockInstance, bh as ContextMenuInstance, cl as LinkPreviewInstance, cW as ProgressInstance, d8 as RangeSliderInstance, da as RangeValue, aV as ChartInstance, aW as ChartOptions, bk as CreditCardInstance, bj as CreditCardField, bn as CreditCardValues, aU as CardBrand, bf as CommandSearchInstance, be as CommandItem, c8 as HoldConfirmInstance, ce as ImagePreviewInstance, cC as NotificationBellInstance, cQ as PasswordStrengthInstance, dp as ScratchCardInstance, d_ as StarRatingInstance, bc as ColorSliderInstance, b4 as ColorAreaInstance, b7 as ColorFieldInstance, ba as ColorPickerInstance, eh as TimeFieldInstance, d6 as RangeCalendarInstance, bv as DateRange, bw as DateRangePickerInstance, eo as TooltipInstance, cU as PopoverInstance, co as LoadingButtonInstance, cq as LoadingState, aJ as BreadcrumbInstance, bO as EmptyStateInstance, e0 as StatCardInstance, aZ as ChartTooltipInstance, cx as MultiSelectInstance, ec as TagInputInstance, by as DateTimePickerInstance, b_ as FilterBuilderInstance, c2 as FilterGroup, el as TimelineInstance, ek as TimelineEvent, ar as ActivityFeedInstance, at as ActivityItem, et as TreeViewInstance, bV as FileExplorerInstance, cj as JsonViewerInstance, ew as VirtualListInstance, dd as ResizablePanelInstance, dY as SplitViewInstance, bt as DataTableInstance, br as DataRow, bJ as EditableTableInstance, dj as RichTextEditorInstance, dA as SelectInstance, av as AddToCartInstance, dv as ScrollIslandInstance, dJ as SignaturePadInstance, dE as SignatureData, dF as SignatureExportOptions, dG as SignaturePNGOptions, eE as WaveformPlayerInstance, eF as WaveformPlayerOptions, eG as WaveformPlayerState, eB as VoiceMessageBubbleInstance, eC as VoiceMessageBubbleOptions, bF as DrilldownMenuInstance, bG as DrilldownMenuItem, eJ as WheelPickerInstance, eI as WheelPickerEntry, e2 as StepperInstance, d3 as RadioGroupInstance, bQ as EqualizerSliderInstance, ee as TemperatureSliderInstance, eg as TemperatureUnit, db as RatingScaleInstance, cF as NotificationStackInstance, cH as NotificationStackOptions, cG as NotificationStackItem, aH as BentoGridInstance, aI as BentoGridOptions, dx as ScrollPreviewDockInstance, dz as ScrollPreviewDockOptions, dy as ScrollPreviewDockItem, e5 as StickyHeaderInstance, e6 as StickyHeaderOptions, c6 as HandwritingTextInstance, cM as ParticleButtonInstance, cr as MagnetizeButtonInstance, aF as BadgeButtonInstance, cv as MorphingPageDotsInstance, cA as NotFoundInstance, ds as ScrollAreaInstance } from '../engine-D6XV-WNt.js';
+import { E as ThemePickerInstance, M as ToasterInstance, C as ChatInstance, d as ChatRole, l as NavInstance, n as NavStyle, o as NavStyleAlias, e as CursorInstance, I as IslandInstance, V as ToolbarInstance, B as BidirectionalSliderInstance, X as VoiceDotsInstance, Z as VoiceState, r as PieChartInstance, s as PieChartOptions, R as RadarChartInstance, u as RadarChartOptions, w as RadialChartInstance, x as RadialChartOptions, S as SankeyChartInstance, z as SankeyChartOptions, H as HeatmapChartInstance, h as HeatmapChartOptions, O as OrbitMenuInstance } from '../store-CAHWkurn.js';
+export { an as toast } from '../store-CAHWkurn.js';
 import { C as ChatBackgroundInstance, c as StepsInstance, P as PillButtonInstance } from '../engine-5zRIssTO.js';
 import { L as LikeButtonInstance, S as SwipeActionsInstance } from '../engine-QECQnGz1.js';
 import 'gsap/Flip';
@@ -1075,8 +1075,11 @@ declare const defineDrilldownMenu: () => void;
 
 declare class MkWheelPickerElement extends MkElement<WheelPickerInstance> {
     static options: Record<string, OptionType>;
+    private savedValue;
+    private savedItems;
     protected create(options: Record<string, unknown>): WheelPickerInstance;
     attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    disconnectedCallback(): void;
     get value(): string;
     set value(next: string);
     setValue(value: string, notify?: boolean): void;
@@ -1084,6 +1087,200 @@ declare class MkWheelPickerElement extends MkElement<WheelPickerInstance> {
 }
 declare const defineWheelPicker: () => void;
 
+/** Light DOM; attribute changes keep the current imperative value and reset baseline. */
+declare class MkStepperElement extends MkElement<StepperInstance> {
+    static options: Record<string, OptionType>;
+    private baseline;
+    private saved;
+    protected create(options: Record<string, unknown>): StepperInstance;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): number;
+    set value(next: number);
+    setValue(value: number, notify?: boolean): void;
+    reset(notify?: boolean): void;
+    next(notify?: boolean): void;
+    previous(notify?: boolean): void;
+}
+declare const defineStepper: () => void;
+
+/** Light DOM; attribute changes keep the current imperative value and reset baseline. */
+declare class MkRadioGroupElement extends MkElement<RadioGroupInstance> {
+    static options: Record<string, OptionType>;
+    private baseline;
+    private saved;
+    protected create(options: Record<string, unknown>): RadioGroupInstance;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): string | null;
+    set value(next: string | null);
+    setValue(value: string | null, notify?: boolean): void;
+    reset(notify?: boolean): void;
+}
+declare const defineRadioGroup: () => void;
+
+/** Light DOM; attribute changes keep the current imperative value and reset baseline. */
+declare class MkEqualizerSliderElement extends MkElement<EqualizerSliderInstance> {
+    static options: Record<string, OptionType>;
+    private baseline;
+    private saved;
+    protected create(options: Record<string, unknown>): EqualizerSliderInstance;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): number;
+    set value(next: number);
+    setValue(value: number, notify?: boolean): void;
+    reset(notify?: boolean): void;
+}
+declare const defineEqualizerSlider: () => void;
+
+/** Light DOM; attribute changes keep the current imperative value and reset baseline. */
+declare class MkTemperatureSliderElement extends MkElement<TemperatureSliderInstance> {
+    static options: Record<string, OptionType>;
+    private baseline;
+    private saved;
+    private syncing;
+    protected create(options: Record<string, unknown>): TemperatureSliderInstance;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): number;
+    set value(next: number);
+    setValue(value: number, notify?: boolean): void;
+    reset(notify?: boolean): void;
+    get unit(): TemperatureUnit;
+    /** Converts in place and glides; the unit, min and max attributes follow without remounting. */
+    setUnit(unit: TemperatureUnit, notify?: boolean): void;
+}
+declare const defineTemperatureSlider: () => void;
+
+/** Light DOM; attribute changes keep the current imperative value and reset baseline. */
+declare class MkRatingScaleElement extends MkElement<RatingScaleInstance> {
+    static options: Record<string, OptionType>;
+    private baseline;
+    private saved;
+    protected create(options: Record<string, unknown>): RatingScaleInstance;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): number | null;
+    set value(next: number | null);
+    setValue(value: number | null, notify?: boolean): void;
+    reset(notify?: boolean): void;
+}
+declare const defineRatingScale: () => void;
+
+declare class MkNotificationStackElement extends MkElement<NotificationStackInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): NotificationStackInstance;
+    setOptions(options: Partial<NotificationStackOptions>): void;
+    push(item: NotificationStackItem): void;
+    dismiss(id: string): void;
+    clear(): void;
+    expand(): void;
+    collapse(): void;
+    toggle(): void;
+    get expanded(): boolean;
+    set expanded(value: boolean);
+    get items(): NotificationStackItem[];
+    set items(value: NotificationStackItem[]);
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+declare const defineNotificationStack: () => void;
+
+declare class MkBentoGridElement extends MkElement<BentoGridInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): BentoGridInstance;
+    setOptions(options: Partial<BentoGridOptions>): void;
+    refresh(): void;
+    setFilter(filter: string | null): void;
+    reorder(keys: string[]): void;
+    mutate(change: () => void): void;
+    get filter(): string | null;
+    get keys(): string[];
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+declare const defineBentoGrid: () => void;
+
+declare class MkScrollPreviewDockElement extends MkElement<ScrollPreviewDockInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ScrollPreviewDockInstance;
+    setOptions(options: Partial<ScrollPreviewDockOptions>): void;
+    select(id: string): void;
+    update(): void;
+    get value(): string;
+    set items(value: ScrollPreviewDockItem[]);
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+declare const defineScrollPreviewDock: () => void;
+
+declare class MkStickyHeaderElement extends MkElement<StickyHeaderInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): StickyHeaderInstance;
+    setOptions(options: Partial<StickyHeaderOptions>): void;
+    update(): void;
+    get compact(): boolean;
+    get progress(): number;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+declare const defineStickyHeader: () => void;
+
+declare class MkHandwritingTextElement extends MkElement<HandwritingTextInstance> {
+    static options: Record<string, OptionType>;
+    private retained;
+    protected create(options: Record<string, unknown>): HandwritingTextInstance;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+declare const defineHandwritingText: () => void;
+
+declare class MkParticleButtonElement extends MkElement<ParticleButtonInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ParticleButtonInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+declare const defineParticleButton: () => void;
+
+declare class MkMagnetizeButtonElement extends MkElement<MagnetizeButtonInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): MagnetizeButtonInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+declare const defineMagnetizeButton: () => void;
+
+declare class MkBadgeButtonElement extends MkElement<BadgeButtonInstance> {
+    static options: Record<string, OptionType>;
+    private retained;
+    protected create(options: Record<string, unknown>): BadgeButtonInstance;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+declare const defineBadgeButton: () => void;
+
+declare class MkMorphingPageDotsElement extends MkElement<MorphingPageDotsInstance> {
+    static options: Record<string, OptionType>;
+    private retained;
+    protected create(options: Record<string, unknown>): MorphingPageDotsInstance;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+declare const defineMorphingPageDots: () => void;
+
+declare class MkNotFoundElement extends MkElement<NotFoundInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): NotFoundInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+declare const defineNotFound: () => void;
+
+/**
+ * <mk-scroll-area class="mk-scroll-area" style="height: 20rem" back-to-top>…</mk-scroll-area>
+ * Its content is wrapped in the viewport. Emits mk:scroll ({x, y}).
+ */
+declare class MkScrollAreaElement extends MkElement<ScrollAreaInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): ScrollAreaInstance;
+}
+declare const defineScrollArea: () => void;
+
 /** Tag name → element class, for every component. */
 declare const ELEMENTS: {
     readonly 'mk-theme-picker': typeof MkThemePickerElement;
@@ -1171,9 +1368,25 @@ declare const ELEMENTS: {
     readonly 'mk-voice-message-bubble': typeof MkVoiceMessageBubbleElement;
     readonly 'mk-drilldown-menu': typeof MkDrilldownMenuElement;
     readonly 'mk-wheel-picker': typeof MkWheelPickerElement;
+    readonly 'mk-stepper': typeof MkStepperElement;
+    readonly 'mk-radio-group': typeof MkRadioGroupElement;
+    readonly 'mk-equalizer-slider': typeof MkEqualizerSliderElement;
+    readonly 'mk-temperature-slider': typeof MkTemperatureSliderElement;
+    readonly 'mk-rating-scale': typeof MkRatingScaleElement;
+    readonly 'mk-notification-stack': typeof MkNotificationStackElement;
+    readonly 'mk-bento-grid': typeof MkBentoGridElement;
+    readonly 'mk-scroll-preview-dock': typeof MkScrollPreviewDockElement;
+    readonly 'mk-sticky-header': typeof MkStickyHeaderElement;
+    readonly 'mk-handwriting-text': typeof MkHandwritingTextElement;
+    readonly 'mk-particle-button': typeof MkParticleButtonElement;
+    readonly 'mk-magnetize-button': typeof MkMagnetizeButtonElement;
+    readonly 'mk-badge-button': typeof MkBadgeButtonElement;
+    readonly 'mk-morphing-page-dots': typeof MkMorphingPageDotsElement;
+    readonly 'mk-not-found': typeof MkNotFoundElement;
+    readonly 'mk-scroll-area': typeof MkScrollAreaElement;
 };
 type ElementName = keyof typeof ELEMENTS;
 /** Register every motion-kit element (or the ones named). Safe to call more than once. */
 declare function defineElements(names?: ElementName[]): void;
 
-export { ELEMENTS, type ElementName, MkActivityFeedElement, MkAddToCartElement, MkAttachmentElement, MkBidirectionalSliderElement, MkBreadcrumbElement, MkCalendarElement, MkChartElement, MkChartTooltipElement, MkChatBackgroundElement, MkChatElement, MkCodeBlockElement, MkColorAreaElement, MkColorFieldElement, MkColorPickerElement, MkColorSliderElement, MkCommandSearchElement, MkContextMenuElement, MkCreditCardElement, MkCursorElement, MkDataTableElement, MkDateRangePickerElement, MkDateTimePickerElement, MkDialogElement, MkDrawerElement, MkDrilldownMenuElement, MkEditableTableElement, MkElement, MkEmptyStateElement, MkFileExplorerElement, MkFilterBuilderElement, MkHeatmapChartElement, MkHoldConfirmElement, MkHoverCardElement, MkImagePreviewElement, MkInputOtpElement, MkIslandElement, MkJsonViewerElement, MkLikeButtonElement, MkLinkPreviewElement, MkLoadingButtonElement, MkMenuElement, MkMultiSelectElement, MkNavElement, MkNotificationBellElement, MkOrbitMenuElement, MkPaginationElement, MkPasswordStrengthElement, MkPieChartElement, MkPillButtonElement, MkPopoverElement, MkProgressElement, MkQuantityElement, MkQuestionnaireElement, MkRadarChartElement, MkRadialChartElement, MkRangeCalendarElement, MkRangeSliderElement, MkResizablePanelElement, MkRichTextEditorElement, MkSankeyChartElement, MkScratchCardElement, MkScrollIslandElement, MkSelectElement, MkSignaturePadElement, MkSkeletonElement, MkSlotPickerElement, MkSplitViewElement, MkStarRatingElement, MkStatCardElement, MkStepsElement, MkStudioDockElement, MkSwipeActionsElement, MkTagInputElement, MkThemePickerElement, MkTimeFieldElement, MkTimelineElement, MkToasterElement, MkToolbarElement, MkTooltipElement, MkTrailerElement, MkTreeViewElement, MkVirtualListElement, MkVoiceDotsElement, MkVoiceMessageBubbleElement, MkWaveformPlayerElement, MkWheelPickerElement, type OptionType, SafeHTMLElement, defineDrilldownMenu, defineElement, defineElements, defineSignaturePad, defineStudioDock, defineTrailer, defineVoiceMessageBubble, defineWaveformPlayer, defineWheelPicker };
+export { ELEMENTS, type ElementName, MkActivityFeedElement, MkAddToCartElement, MkAttachmentElement, MkBadgeButtonElement, MkBentoGridElement, MkBidirectionalSliderElement, MkBreadcrumbElement, MkCalendarElement, MkChartElement, MkChartTooltipElement, MkChatBackgroundElement, MkChatElement, MkCodeBlockElement, MkColorAreaElement, MkColorFieldElement, MkColorPickerElement, MkColorSliderElement, MkCommandSearchElement, MkContextMenuElement, MkCreditCardElement, MkCursorElement, MkDataTableElement, MkDateRangePickerElement, MkDateTimePickerElement, MkDialogElement, MkDrawerElement, MkDrilldownMenuElement, MkEditableTableElement, MkElement, MkEmptyStateElement, MkEqualizerSliderElement, MkFileExplorerElement, MkFilterBuilderElement, MkHandwritingTextElement, MkHeatmapChartElement, MkHoldConfirmElement, MkHoverCardElement, MkImagePreviewElement, MkInputOtpElement, MkIslandElement, MkJsonViewerElement, MkLikeButtonElement, MkLinkPreviewElement, MkLoadingButtonElement, MkMagnetizeButtonElement, MkMenuElement, MkMorphingPageDotsElement, MkMultiSelectElement, MkNavElement, MkNotFoundElement, MkNotificationBellElement, MkNotificationStackElement, MkOrbitMenuElement, MkPaginationElement, MkParticleButtonElement, MkPasswordStrengthElement, MkPieChartElement, MkPillButtonElement, MkPopoverElement, MkProgressElement, MkQuantityElement, MkQuestionnaireElement, MkRadarChartElement, MkRadialChartElement, MkRadioGroupElement, MkRangeCalendarElement, MkRangeSliderElement, MkRatingScaleElement, MkResizablePanelElement, MkRichTextEditorElement, MkSankeyChartElement, MkScratchCardElement, MkScrollAreaElement, MkScrollIslandElement, MkScrollPreviewDockElement, MkSelectElement, MkSignaturePadElement, MkSkeletonElement, MkSlotPickerElement, MkSplitViewElement, MkStarRatingElement, MkStatCardElement, MkStepperElement, MkStepsElement, MkStickyHeaderElement, MkStudioDockElement, MkSwipeActionsElement, MkTagInputElement, MkTemperatureSliderElement, MkThemePickerElement, MkTimeFieldElement, MkTimelineElement, MkToasterElement, MkToolbarElement, MkTooltipElement, MkTrailerElement, MkTreeViewElement, MkVirtualListElement, MkVoiceDotsElement, MkVoiceMessageBubbleElement, MkWaveformPlayerElement, MkWheelPickerElement, type OptionType, SafeHTMLElement, defineBadgeButton, defineBentoGrid, defineDrilldownMenu, defineElement, defineElements, defineEqualizerSlider, defineHandwritingText, defineMagnetizeButton, defineMorphingPageDots, defineNotFound, defineNotificationStack, defineParticleButton, defineRadioGroup, defineRatingScale, defineScrollArea, defineScrollPreviewDock, defineSignaturePad, defineStepper, defineStickyHeader, defineStudioDock, defineTemperatureSlider, defineTrailer, defineVoiceMessageBubble, defineWaveformPlayer, defineWheelPicker };