@yewdiel21/motion-kit 0.15.0 → 0.17.0

package/dist/css/components/chart.css

@@ -16,6 +16,7 @@ mk-chart {
   --mk-chart-other: var(--mk-muted);
   --mk-chart-surface: var(--mk-surface-1);
   --mk-chart-grid: color-mix(in srgb, var(--mk-text) 14%, transparent);
+  --mk-chart-track: color-mix(in srgb, var(--mk-text) 5%, transparent);
   position: relative;
   display: grid;
   gap: 0.75rem;
@@ -121,6 +122,12 @@ mk-chart {
   fill: color-mix(in srgb, var(--mk-text) 6%, transparent);
 }
 
+:is(.mk-chart, mk-chart) [data-mk-part='bar-track'] { fill: var(--mk-chart-track); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'] { transition: opacity .22s ease, filter .22s ease; }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'][data-mk-active] { filter: brightness(1.12); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] rect { fill: var(--mk-text); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] text { fill: var(--mk-bg); font-size: 11px; font-weight: 600; }
+
 :is(.mk-chart, mk-chart) [data-mk-part='series'] path[data-mk-index] {
   transition: opacity 0.2s ease;
 }

package/dist/css/components/drilldown-menu.css

@@ -0,0 +1,130 @@
+/* components/drilldown-menu/drilldown-menu.css */
+/* Drilldown menu: a single live level travels in the navigation direction. */
+.mk-drilldown-menu,
+mk-drilldown-menu {
+  --mk-drilldown-radius: 28px;
+  --mk-drilldown-item-radius: 18px;
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 26rem;
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: var(--mk-drilldown-radius);
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  font-family: var(--md-sys-typescale-body-large-font, inherit);
+  box-shadow: 0 12px 36px -20px rgb(0 0 0 / 0.25);
+}
+
+[data-mk-drilldown-header] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 48px;
+  padding: 4px 10px;
+}
+
+[data-mk-drilldown-heading] {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: 1.1rem;
+  font-weight: 650;
+  letter-spacing: -0.025em;
+}
+
+[data-mk-drilldown-back] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  cursor: pointer;
+}
+
+[data-mk-drilldown-back] > svg { transform: rotate(180deg); }
+[data-mk-drilldown-back][hidden],
+[data-mk-drilldown-empty][hidden] { display: none; }
+
+[data-mk-drilldown-breadcrumb] ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  padding: 0 12px 12px;
+  list-style: none;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+[data-mk-drilldown-breadcrumb] li {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+[data-mk-drilldown-breadcrumb] li + li::before { content: '/'; opacity: 0.5; }
+[data-mk-drilldown-breadcrumb] [aria-current] { color: var(--mk-text); }
+[data-mk-drilldown-crumb] {
+  padding: 2px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+[data-mk-drilldown-viewport] { overflow: hidden; border-radius: var(--mk-drilldown-item-radius); }
+[data-mk-drilldown-level] { display: grid; gap: 3px; }
+[data-mk-drilldown-item] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  width: 100%;
+  min-height: 58px;
+  padding: 13px 15px;
+  border: 0;
+  border-radius: var(--mk-drilldown-item-radius);
+  background: transparent;
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 0.9rem;
+  line-height: 1.4;
+  text-align: start;
+  cursor: pointer;
+  transition: background-color 0.16s ease;
+}
+
+[data-mk-drilldown-item]:enabled:hover,
+[data-mk-drilldown-item]:focus-visible { background: var(--mk-surface-3); }
+[data-mk-drilldown-item]:disabled { opacity: 0.42; cursor: default; }
+[data-mk-drilldown-text] { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
+[data-mk-drilldown-label] { font-weight: 550; }
+[data-mk-drilldown-description] { color: var(--mk-muted); font-size: 0.8rem; }
+[data-mk-drilldown-arrow] { display: inline-flex; flex: none; color: var(--mk-muted); }
+[data-mk-drilldown-empty] { margin: 0; padding: 24px 16px; color: var(--mk-muted); font-size: 0.875rem; }
+
+[data-mk-drilldown-item]:focus-visible,
+[data-mk-drilldown-back]:focus-visible,
+[data-mk-drilldown-crumb]:focus-visible,
+[data-mk-drilldown-level]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-drilldown-item] { transition: none; }
+}

package/dist/css/components/heatmap-chart.css

@@ -16,6 +16,7 @@ mk-chart {
   --mk-chart-other: var(--mk-muted);
   --mk-chart-surface: var(--mk-surface-1);
   --mk-chart-grid: color-mix(in srgb, var(--mk-text) 14%, transparent);
+  --mk-chart-track: color-mix(in srgb, var(--mk-text) 5%, transparent);
   position: relative;
   display: grid;
   gap: 0.75rem;
@@ -121,6 +122,12 @@ mk-chart {
   fill: color-mix(in srgb, var(--mk-text) 6%, transparent);
 }
 
+:is(.mk-chart, mk-chart) [data-mk-part='bar-track'] { fill: var(--mk-chart-track); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'] { transition: opacity .22s ease, filter .22s ease; }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'][data-mk-active] { filter: brightness(1.12); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] rect { fill: var(--mk-text); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] text { fill: var(--mk-bg); font-size: 11px; font-weight: 600; }
+
 :is(.mk-chart, mk-chart) [data-mk-part='series'] path[data-mk-index] {
   transition: opacity 0.2s ease;
 }

package/dist/css/components/pie-chart.css

@@ -16,6 +16,7 @@ mk-chart {
   --mk-chart-other: var(--mk-muted);
   --mk-chart-surface: var(--mk-surface-1);
   --mk-chart-grid: color-mix(in srgb, var(--mk-text) 14%, transparent);
+  --mk-chart-track: color-mix(in srgb, var(--mk-text) 5%, transparent);
   position: relative;
   display: grid;
   gap: 0.75rem;
@@ -121,6 +122,12 @@ mk-chart {
   fill: color-mix(in srgb, var(--mk-text) 6%, transparent);
 }
 
+:is(.mk-chart, mk-chart) [data-mk-part='bar-track'] { fill: var(--mk-chart-track); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'] { transition: opacity .22s ease, filter .22s ease; }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'][data-mk-active] { filter: brightness(1.12); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] rect { fill: var(--mk-text); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] text { fill: var(--mk-bg); font-size: 11px; font-weight: 600; }
+
 :is(.mk-chart, mk-chart) [data-mk-part='series'] path[data-mk-index] {
   transition: opacity 0.2s ease;
 }

package/dist/css/components/radar-chart.css

@@ -16,6 +16,7 @@ mk-chart {
   --mk-chart-other: var(--mk-muted);
   --mk-chart-surface: var(--mk-surface-1);
   --mk-chart-grid: color-mix(in srgb, var(--mk-text) 14%, transparent);
+  --mk-chart-track: color-mix(in srgb, var(--mk-text) 5%, transparent);
   position: relative;
   display: grid;
   gap: 0.75rem;
@@ -121,6 +122,12 @@ mk-chart {
   fill: color-mix(in srgb, var(--mk-text) 6%, transparent);
 }
 
+:is(.mk-chart, mk-chart) [data-mk-part='bar-track'] { fill: var(--mk-chart-track); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'] { transition: opacity .22s ease, filter .22s ease; }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'][data-mk-active] { filter: brightness(1.12); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] rect { fill: var(--mk-text); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] text { fill: var(--mk-bg); font-size: 11px; font-weight: 600; }
+
 :is(.mk-chart, mk-chart) [data-mk-part='series'] path[data-mk-index] {
   transition: opacity 0.2s ease;
 }

package/dist/css/components/radial-chart.css

@@ -16,6 +16,7 @@ mk-chart {
   --mk-chart-other: var(--mk-muted);
   --mk-chart-surface: var(--mk-surface-1);
   --mk-chart-grid: color-mix(in srgb, var(--mk-text) 14%, transparent);
+  --mk-chart-track: color-mix(in srgb, var(--mk-text) 5%, transparent);
   position: relative;
   display: grid;
   gap: 0.75rem;
@@ -121,6 +122,12 @@ mk-chart {
   fill: color-mix(in srgb, var(--mk-text) 6%, transparent);
 }
 
+:is(.mk-chart, mk-chart) [data-mk-part='bar-track'] { fill: var(--mk-chart-track); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'] { transition: opacity .22s ease, filter .22s ease; }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'][data-mk-active] { filter: brightness(1.12); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] rect { fill: var(--mk-text); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] text { fill: var(--mk-bg); font-size: 11px; font-weight: 600; }
+
 :is(.mk-chart, mk-chart) [data-mk-part='series'] path[data-mk-index] {
   transition: opacity 0.2s ease;
 }
@@ -330,6 +337,13 @@ mk-radial-chart {
   stroke: var(--mk-chart-grid);
 }
 
+[data-mk-chart-type='radial'][data-mk-segmented] :is([data-mk-part='tracks'], [data-mk-part='series']) path {
+  stroke-width: 1px;
+  stroke-linejoin: round;
+}
+[data-mk-chart-type='radial'][data-mk-segmented] [data-mk-part='tracks'] path { fill: var(--mk-chart-track); stroke: var(--mk-chart-track); }
+[data-mk-chart-type='radial'][data-mk-segmented] [data-mk-part='series'] path[data-mk-on] { filter: brightness(1.12); stroke-width: 2px; }
+
 [data-mk-chart-type='radial'] :is([data-mk-part='tracks'], [data-mk-part='series']) path[data-mk-on] {
   stroke-width: calc(var(--mk-radial-thickness, 12px) + 4px);
 }
@@ -340,12 +354,12 @@ mk-radial-chart {
 
 [data-mk-radial-center] {
   position: absolute;
-  top: 50%;
+  top: var(--mk-radial-center-y, 50%);
   left: 50%;
   display: grid;
   justify-items: center;
   gap: 0.15rem;
-  max-width: calc(var(--mk-radial-size, 240px) * 0.36);
+  max-width: calc(var(--mk-radial-size, 240px) * var(--mk-radial-center-width, 0.36));
   transform: translate(-50%, -50%);
   text-align: center;
   pointer-events: none;

package/dist/css/components/sankey-chart.css

@@ -16,6 +16,7 @@ mk-chart {
   --mk-chart-other: var(--mk-muted);
   --mk-chart-surface: var(--mk-surface-1);
   --mk-chart-grid: color-mix(in srgb, var(--mk-text) 14%, transparent);
+  --mk-chart-track: color-mix(in srgb, var(--mk-text) 5%, transparent);
   position: relative;
   display: grid;
   gap: 0.75rem;
@@ -121,6 +122,12 @@ mk-chart {
   fill: color-mix(in srgb, var(--mk-text) 6%, transparent);
 }
 
+:is(.mk-chart, mk-chart) [data-mk-part='bar-track'] { fill: var(--mk-chart-track); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'] { transition: opacity .22s ease, filter .22s ease; }
+:is(.mk-chart, mk-chart) [data-mk-part='bar'][data-mk-active] { filter: brightness(1.12); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] rect { fill: var(--mk-text); }
+:is(.mk-chart, mk-chart) [data-mk-part='bar-value'] text { fill: var(--mk-bg); font-size: 11px; font-weight: 600; }
+
 :is(.mk-chart, mk-chart) [data-mk-part='series'] path[data-mk-index] {
   transition: opacity 0.2s ease;
 }

package/dist/css/components/scroll-island.css

@@ -74,6 +74,8 @@ mk-scroll-island {
 [data-mk-island-content] {
   display: inline-flex;
   flex: none;
+  max-width: 100%;
+  min-width: 0;
   align-items: center;
   gap: 0.5rem;
   padding: 0 14px;
@@ -92,6 +94,7 @@ mk-scroll-island {
 }
 
 [data-mk-island-section] {
+  min-width: 0;
   max-width: 12rem;
   overflow: hidden;
   color: rgb(255 255 255 / 0.68);

package/dist/css/components/signature-pad.css

@@ -0,0 +1,104 @@
+/* components/signature-pad/signature-pad.css */
+/* Normalized SVG ink survives layout changes. Only the drawing area captures touch. */
+.mk-signature-pad,
+mk-signature-pad {
+  --mk-signature-height: clamp(12rem, 32vw, 17rem);
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 24px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-surface] {
+  position: relative;
+  height: var(--mk-signature-height);
+  min-height: 8rem;
+  overflow: hidden;
+  background: var(--mk-signature-paper, var(--mk-surface-2));
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-surface]::after {
+  position: absolute;
+  right: 1.5rem;
+  bottom: 2rem;
+  left: 1.5rem;
+  border-bottom: 1px dashed var(--mk-outline-soft);
+  content: '';
+  pointer-events: none;
+}
+
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-drawing] {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-placeholder] {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: var(--mk-muted);
+  font-size: 1.5rem;
+  font-style: italic;
+  font-weight: 400;
+  pointer-events: none;
+}
+
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-placeholder][hidden] { display: none; }
+
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-footer] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem 0;
+}
+
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-toolbar] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-action] {
+  min-height: 2.75rem;
+  padding: 0.5rem 0.875rem;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 64px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-action]:hover:enabled { background: var(--mk-surface-4); }
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-action]:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-action]:disabled { opacity: 0.4; cursor: default; }
+
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-status],
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-hint] {
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-status] { font-variant-numeric: tabular-nums; }
+:is(.mk-signature-pad, mk-signature-pad) [data-mk-signature-hint] { margin: 0; padding: 0.75rem 1rem 1rem; }
+:is(.mk-signature-pad, mk-signature-pad)[data-mk-readonly] [data-mk-signature-surface],
+:is(.mk-signature-pad, mk-signature-pad)[data-mk-disabled] [data-mk-signature-surface] { cursor: default; touch-action: auto; }
+:is(.mk-signature-pad, mk-signature-pad)[data-mk-disabled] [data-mk-signature-surface] { opacity: 0.55; }

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

@@ -0,0 +1,50 @@
+/* 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; }
+}
+
+/* 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); }
+@media (forced-colors: active) { [data-mk-voice-message-content] { border-color: CanvasText; } }

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

@@ -0,0 +1,36 @@
+/* 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; }
+}

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

@@ -0,0 +1,17 @@
+/* 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; } }
+@media (forced-colors: active) { [data-mk-wheel-highlight] { border: 2px solid Highlight; } }

package/dist/elements/index.d.ts

@@ -1,7 +1,7 @@
 import { I as Instance } from '../types-BkS_raL8.js';
-import { d0 as StudioDockInstance, d3 as StudioDockView, dg as TrailerInstance, bb as DialogInstance, bd as DialogOptions, bX as MenuInstance, ch as QuantityInstance, c3 as PaginationInstance, bG as HoverCardInstance, bM as InputOtpInstance, aq as CalendarInstance, cP as SlotPickerInstance, ad as AttachmentInstance, ac as AttachmentFile, ai as AttachmentStatus, cM as SkeletonInstance, ck as QuestionnaireInstance, cj as QuestionnaireAnswers, aF as CodeBlockInstance, aU as ContextMenuInstance, bR as LinkPreviewInstance, ce as ProgressInstance, cp as RangeSliderInstance, cr as RangeValue, aw as ChartInstance, ax as ChartOptions, aX as CreditCardInstance, aW as CreditCardField, a_ as CreditCardValues, av as CardBrand, aS as CommandSearchInstance, aR as CommandItem, bE as HoldConfirmInstance, bK as ImagePreviewInstance, c0 as NotificationBellInstance, c8 as PasswordStrengthInstance, cD as ScratchCardInstance, cY as StarRatingInstance, aP as ColorSliderInstance, aH as ColorAreaInstance, aK as ColorFieldInstance, aN as ColorPickerInstance, d7 as TimeFieldInstance, cn as RangeCalendarInstance, b6 as DateRange, b7 as DateRangePickerInstance, de as TooltipInstance, cc as PopoverInstance, bU as LoadingButtonInstance, bW as LoadingState, ak as BreadcrumbInstance, bm as EmptyStateInstance, c_ as StatCardInstance, aA as ChartTooltipInstance, bZ as MultiSelectInstance, d5 as TagInputInstance, b9 as DateTimePickerInstance, bw as FilterBuilderInstance, bA as FilterGroup, db as TimelineInstance, da as TimelineEvent, a6 as ActivityFeedInstance, a8 as ActivityItem, dj as TreeViewInstance, br as FileExplorerInstance, bP as JsonViewerInstance, dm as VirtualListInstance, cs as ResizablePanelInstance, cW as SplitViewInstance, b4 as DataTableInstance, b2 as DataRow, bh as EditableTableInstance, cy as RichTextEditorInstance, cH as SelectInstance, aa as AddToCartInstance, cF as ScrollIslandInstance } from '../reveal-BfyKKsw4.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-CA2Qcun_.js';
-export { an as toast } from '../store-CA2Qcun_.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 { 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';
@@ -1003,6 +1003,87 @@ declare class MkOrbitMenuElement extends MkElement<OrbitMenuInstance> {
     close(): void;
 }
 
+/** Light-DOM element. `data` accepts versioned JSON; mk:change carries data and history state. */
+declare class MkSignaturePadElement extends MkElement<SignaturePadInstance> {
+    static options: Record<string, OptionType>;
+    private saved;
+    protected create(options: Record<string, unknown>): SignaturePadInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    disconnectedCallback(): void;
+    connectedCallback(): void;
+    get data(): SignatureData;
+    set data(value: SignatureData);
+    get isEmpty(): boolean;
+    get canUndo(): boolean;
+    get canRedo(): boolean;
+    undo(): void;
+    redo(): void;
+    clear(): void;
+    importData(value: unknown, notify?: boolean): boolean;
+    exportData(): SignatureData;
+    exportSVG(options?: SignatureExportOptions): string;
+    exportPNG(options?: SignaturePNGOptions): Promise<Blob | null>;
+}
+declare const defineSignaturePad: () => void;
+
+declare class MkWaveformPlayerElement extends MkElement<WaveformPlayerInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): WaveformPlayerInstance;
+    play(): Promise<boolean>;
+    pause(): void;
+    seek(seconds: number): void;
+    update(options: Partial<WaveformPlayerOptions>): void;
+    get state(): WaveformPlayerState | undefined;
+    get audio(): HTMLAudioElement | null;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+declare const defineWaveformPlayer: () => void;
+
+declare class MkVoiceMessageBubbleElement extends MkElement<VoiceMessageBubbleInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): VoiceMessageBubbleInstance;
+    play(): Promise<boolean>;
+    pause(): void;
+    seek(seconds: number): void;
+    update(options: Partial<VoiceMessageBubbleOptions>): void;
+    get state(): WaveformPlayerState | undefined;
+    get audio(): HTMLAudioElement | null;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+}
+declare const defineVoiceMessageBubble: () => void;
+
+/** Light DOM action menu; items/path accept JSON. Emits mk:select and mk:path-change. */
+declare class MkDrilldownMenuElement extends MkElement<DrilldownMenuInstance> {
+    static options: Record<string, OptionType>;
+    private pendingItems;
+    private pendingPath;
+    protected create(options: Record<string, unknown>): DrilldownMenuInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get items(): DrilldownMenuItem[];
+    set items(items: DrilldownMenuItem[]);
+    get path(): string[];
+    set path(path: string[]);
+    open(id: string): boolean;
+    back(): boolean;
+    root(): void;
+    reset(): void;
+    setItems(items: DrilldownMenuItem[]): void;
+    setPath(path: string[]): void;
+    focusItem(id: string): void;
+}
+declare const defineDrilldownMenu: () => void;
+
+declare class MkWheelPickerElement extends MkElement<WheelPickerInstance> {
+    static options: Record<string, OptionType>;
+    protected create(options: Record<string, unknown>): WheelPickerInstance;
+    attributeChangedCallback(name: string, previous: string | null, next: string | null): void;
+    get value(): string;
+    set value(next: string);
+    setValue(value: string, notify?: boolean): void;
+    setItems(items: WheelPickerEntry[], notify?: boolean): void;
+}
+declare const defineWheelPicker: () => void;
+
 /** Tag name → element class, for every component. */
 declare const ELEMENTS: {
     readonly 'mk-theme-picker': typeof MkThemePickerElement;
@@ -1085,9 +1166,14 @@ declare const ELEMENTS: {
     readonly 'mk-sankey-chart': typeof MkSankeyChartElement;
     readonly 'mk-heatmap-chart': typeof MkHeatmapChartElement;
     readonly 'mk-orbit-menu': typeof MkOrbitMenuElement;
+    readonly 'mk-signature-pad': typeof MkSignaturePadElement;
+    readonly 'mk-waveform-player': typeof MkWaveformPlayerElement;
+    readonly 'mk-voice-message-bubble': typeof MkVoiceMessageBubbleElement;
+    readonly 'mk-drilldown-menu': typeof MkDrilldownMenuElement;
+    readonly 'mk-wheel-picker': typeof MkWheelPickerElement;
 };
 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, 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, MkSkeletonElement, MkSlotPickerElement, MkSplitViewElement, MkStarRatingElement, MkStatCardElement, MkStepsElement, MkStudioDockElement, MkSwipeActionsElement, MkTagInputElement, MkThemePickerElement, MkTimeFieldElement, MkTimelineElement, MkToasterElement, MkToolbarElement, MkTooltipElement, MkTrailerElement, MkTreeViewElement, MkVirtualListElement, MkVoiceDotsElement, type OptionType, SafeHTMLElement, defineElement, defineElements, defineStudioDock, defineTrailer };
+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 };