@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/dist/css/components/color-area.css

@@ -0,0 +1,82 @@
+/* components/color-area/color-area.css */
+/* color-area — saturation (x) × brightness (y) at the current hue; 12 px corners; the thumb is a ringed circle that
+   grows when grabbed and pops a loupe. The thumb may stand half outside the square: leave room around it. */
+.mk-color-area,
+mk-color-area {
+  --mk-color-area-height: 11rem;
+  --mk-color-checker: repeating-conic-gradient(#d4d4d4 0 25%, #fff 0 50%) 0 0 / 10px 10px;
+  display: block;
+  position: relative;
+}
+
+:is(.mk-color-area, mk-color-area) [data-mk-color-area-surface] {
+  position: relative;
+  height: var(--mk-color-area-height);
+  border-radius: 12px;
+  background: var(--mk-color-area);
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
+  cursor: crosshair;
+  touch-action: none;
+}
+
+:is(.mk-color-area, mk-color-area) [data-mk-color-thumb] {
+  position: absolute;
+  left: calc(clamp(0, var(--mk-color-x, 0), 1) * 100%);
+  top: calc(clamp(0, var(--mk-color-y, 0), 1) * 100%);
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: -0.75rem 0 0 -0.75rem;
+  border-radius: 50%;
+  background: linear-gradient(var(--mk-color-thumb), var(--mk-color-thumb)), var(--mk-color-checker);
+  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgb(0 0 0 / 0.14), 0 4px 12px rgb(0 0 0 / 0.3);
+  pointer-events: none;
+}
+
+:is(.mk-color-area, mk-color-area):has(input:focus-visible) [data-mk-color-thumb] {
+  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--mk-accent), 0 4px 12px rgb(0 0 0 / 0.3);
+}
+
+:is(.mk-color-area, mk-color-area) [data-mk-color-loupe] {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  width: 2.75rem;
+  height: 2.75rem;
+  margin-left: -1.375rem;
+  border-radius: 50%;
+  background: linear-gradient(var(--mk-color-thumb), var(--mk-color-thumb)), var(--mk-color-checker);
+  box-shadow: 0 0 0 3px #fff, 0 8px 20px rgb(0 0 0 / 0.25);
+  opacity: 0;
+  transform-origin: 50% 100%;
+}
+
+/* Near the top edge the loupe flips below the thumb, so a panel or card that clips its content never cuts it. */
+:is(.mk-color-area, mk-color-area)[data-mk-loupe-below] [data-mk-color-loupe] {
+  top: calc(100% + 10px);
+  bottom: auto;
+  transform-origin: 50% 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-color-area, mk-color-area)[data-mk-grabbing] [data-mk-color-loupe] {
+    opacity: 1;
+  }
+}
+
+:is(.mk-color-area, mk-color-area):has(input:disabled) [data-mk-color-area-surface] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* The two ranges stay readable to assistive tech but take no room (the per-component file does not need base.css). */
+:is(.mk-color-area, mk-color-area) [data-mk-color-input] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/css/components/color-field.css

@@ -0,0 +1,67 @@
+/* components/color-field/color-field.css */
+/* color-field — a 12 px field on surface-3 with a colour swatch (8 px corners, checkerboard under translucent colours)
+   and a mono text input; focus draws a 3 px accent ring; an unparsed text dashes the swatch. */
+.mk-color-field,
+mk-color-field {
+  --mk-color-checker: repeating-conic-gradient(#d4d4d4 0 25%, #fff 0 50%) 0 0 / 8px 8px;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-width: 0;
+  height: 2.75rem;
+  padding: 0 0.75rem 0 0.5rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  transition: box-shadow 0.2s ease;
+}
+
+:is(.mk-color-field, mk-color-field):focus-within {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+:is(.mk-color-field, mk-color-field) [data-mk-color-swatch] {
+  flex: none;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 8px;
+  background: linear-gradient(var(--mk-color-swatch), var(--mk-color-swatch)), var(--mk-color-checker);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-text) 22%, transparent);
+  transition: background 0.25s ease;
+}
+
+:is(.mk-color-field, mk-color-field)[data-mk-unparsed] [data-mk-color-swatch] {
+  outline: 2px dashed var(--mk-muted);
+  outline-offset: 2px;
+}
+
+:is(.mk-color-field, mk-color-field) [data-mk-color-text] {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: 500 0.9375rem/1 var(--mk-font-mono, ui-monospace, monospace);
+  text-overflow: ellipsis;
+  outline: none;
+}
+
+:is(.mk-color-field, mk-color-field) [data-mk-color-status] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-color-field, mk-color-field) {
+    transition: none;
+  }
+
+  :is(.mk-color-field, mk-color-field) [data-mk-color-swatch] {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,131 @@
+/* components/color-picker/color-picker.css */
+/* color-picker — a swatch button (12 px, the hex beside it) that grows into a 20 px panel: area, hue, alpha, field,
+   eyedropper and 8 px preset swatches. Inline, the panel sits in place. Needs dialog.css for the popover, and the
+   color-area, color-slider and color-field stylesheets for its parts. */
+.mk-color-picker,
+mk-color-picker {
+  --mk-color-checker: repeating-conic-gradient(#d4d4d4 0 25%, #fff 0 50%) 0 0 / 8px 8px;
+  display: inline-block;
+  max-width: 100%;
+}
+
+:is(.mk-color-picker, mk-color-picker) [data-mk-color-trigger] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  height: 2.75rem;
+  padding: 0 0.9rem 0 0.4rem;
+  border: 0;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: 500 0.9375rem/1 var(--mk-font-mono, ui-monospace, monospace);
+  cursor: pointer;
+}
+
+:is(.mk-color-picker, mk-color-picker) [data-mk-color-trigger]:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--mk-accent) 45%, transparent);
+  outline-offset: 2px;
+}
+
+:is(.mk-color-picker, mk-color-picker) [data-mk-color-trigger]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+:is(.mk-color-picker, mk-color-picker) [data-mk-color-trigger] [data-mk-color-swatch],
+[data-mk-color-preset] {
+  border-radius: 8px;
+  background: linear-gradient(var(--mk-color-swatch), var(--mk-color-swatch)), var(--mk-color-checker, repeating-conic-gradient(#d4d4d4 0 25%, #fff 0 50%) 0 0 / 8px 8px);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-text) 22%, transparent);
+  transition: background 0.25s ease;
+}
+
+:is(.mk-color-picker, mk-color-picker) [data-mk-color-trigger] [data-mk-color-swatch] {
+  width: 2rem;
+  height: 2rem;
+}
+
+/* Classes, not data attributes: the copy that folds back into the swatch on close keeps only the classes. */
+.mk-dialog.mk-color-panel {
+  --mk-dialog-width: 18rem;
+  --mk-dialog-radius: 20px;
+  --mk-dialog-bg: var(--mk-surface-1);
+}
+
+[data-mk-color-panel-body] {
+  display: grid;
+  gap: 0.9rem;
+  padding: 0.9rem;
+}
+
+/* The loupes pop above the area and the sliders: the panel leaves them room. */
+.mk-dialog.mk-color-panel [data-mk-color-panel-body] {
+  padding-top: 1.1rem;
+}
+
+:is(.mk-color-picker, mk-color-picker)[data-mk-inline] [data-mk-color-panel-body] {
+  width: min(18rem, 100%);
+  box-sizing: border-box;
+  border-radius: 20px;
+  background: var(--mk-surface-1);
+  box-shadow: inset 0 0 0 1px var(--mk-outline-soft, rgb(0 0 0 / 0.08));
+}
+
+[data-mk-color-panel-body] .mk-color-slider {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+[data-mk-color-row] {
+  display: flex;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+[data-mk-color-row] > .mk-color-field {
+  flex: 1;
+}
+
+[data-mk-color-eyedropper] {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border: 0;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  cursor: pointer;
+}
+
+[data-mk-color-swatches] {
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 0.4rem;
+}
+
+[data-mk-color-preset] {
+  aspect-ratio: 1;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  cursor: pointer;
+}
+
+[data-mk-color-preset][aria-pressed='true'] {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-text) 22%, transparent), 0 0 0 2px var(--mk-surface-1), 0 0 0 4px var(--mk-text);
+}
+
+[data-mk-color-preset]:focus-visible,
+[data-mk-color-eyedropper]:focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--mk-accent) 45%, transparent);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-color-picker, mk-color-picker) [data-mk-color-swatch],
+  [data-mk-color-preset] {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,113 @@
+/* components/color-slider/color-slider.css */
+/* color-slider — one colour channel: a pill track with the channel's gradient (alpha over a checkerboard) and a round
+   thumb filled with the colour; grabbing grows it and pops a loupe. The native range is a transparent hit area. */
+.mk-color-slider,
+mk-color-slider {
+  --mk-color-size: 1.75rem;
+  --mk-color-length: 12rem;
+  --mk-color-checker: repeating-conic-gradient(#d4d4d4 0 25%, #fff 0 50%) 0 0 / 10px 10px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-track] {
+  position: relative;
+  height: var(--mk-color-size);
+  border-radius: 999px;
+  background: var(--mk-color-track), var(--mk-color-checker);
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-input] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-thumb] {
+  position: absolute;
+  top: 50%;
+  left: calc(clamp(0, var(--mk-color-pos, 0), 1) * (100% - var(--mk-color-size)));
+  width: var(--mk-color-size);
+  height: var(--mk-color-size);
+  margin-top: calc(var(--mk-color-size) / -2);
+  border-radius: 50%;
+  background: linear-gradient(var(--mk-color-thumb), var(--mk-color-thumb)), var(--mk-color-checker);
+  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgb(0 0 0 / 0.14), 0 4px 12px rgb(0 0 0 / 0.25);
+  pointer-events: none;
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-track]:has(input:focus-visible) [data-mk-color-thumb] {
+  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--mk-accent), 0 4px 12px rgb(0 0 0 / 0.25);
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-loupe] {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 50%;
+  width: 2.75rem;
+  height: 2.75rem;
+  margin-left: -1.375rem;
+  border-radius: 50%;
+  background: linear-gradient(var(--mk-color-thumb), var(--mk-color-thumb)), var(--mk-color-checker);
+  box-shadow: 0 0 0 3px #fff, 0 8px 20px rgb(0 0 0 / 0.25);
+  opacity: 0;
+  transform-origin: 50% 100%;
+}
+
+/* Reduced motion: GSAP does not run, the attribute shows the loupe. */
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-color-slider, mk-color-slider)[data-mk-grabbing] [data-mk-color-loupe] {
+    opacity: 1;
+  }
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-output] {
+  min-width: 3.5ch;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+:is(.mk-color-slider, mk-color-slider) [data-mk-color-track]:has(input:disabled) {
+  opacity: 0.45;
+}
+
+/* Vertical: the track stands up, bottom is the minimum, the loupe sits on the left. */
+:is(.mk-color-slider, mk-color-slider)[data-mk-orientation='vertical'] {
+  grid-template-columns: auto;
+  justify-items: center;
+}
+
+:is(.mk-color-slider, mk-color-slider)[data-mk-orientation='vertical'] [data-mk-color-track] {
+  width: var(--mk-color-size);
+  height: var(--mk-color-length);
+}
+
+:is(.mk-color-slider, mk-color-slider)[data-mk-orientation='vertical'] [data-mk-color-input] {
+  writing-mode: vertical-lr;
+  direction: rtl;
+}
+
+:is(.mk-color-slider, mk-color-slider)[data-mk-orientation='vertical'] [data-mk-color-thumb] {
+  top: auto;
+  bottom: calc(clamp(0, var(--mk-color-pos, 0), 1) * (100% - var(--mk-color-size)));
+  left: 0;
+  margin-top: 0;
+}
+
+:is(.mk-color-slider, mk-color-slider)[data-mk-orientation='vertical'] [data-mk-color-loupe] {
+  top: 50%;
+  right: calc(100% + 10px);
+  bottom: auto;
+  left: auto;
+  margin: -1.375rem 0 0;
+  transform-origin: 100% 50%;
+}

package/dist/css/components/command-search.css

@@ -0,0 +1,252 @@
+/* components/command-search/command-search.css */
+/* command-search — a dark command palette (Melonmind's glass, near black in both modes): a search field, grouped
+   results with marked letters, a pill gliding under the active one and a footer with the keys. */
+.mk-command-search,
+mk-command-search {
+  display: inline-flex;
+}
+
+[data-mk-command] {
+  --mk-command-bg: rgb(14 15 17 / 0.92);
+  --mk-command-text: #eceef1;
+  --mk-command-muted: #8b919b;
+  --mk-command-line: rgb(255 255 255 / 0.07);
+  --mk-command-pill: rgb(255 255 255 / 0.08);
+  --mk-command-mark: #f5d76e;
+  width: min(32rem, calc(100vw - 2rem));
+  max-height: min(28rem, calc(100dvh - 4rem));
+  margin: 12vh auto auto;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  background: transparent;
+  color: var(--mk-command-text);
+  font-family: var(--mk-font);
+}
+
+[data-mk-command]::backdrop {
+  background: color-mix(in srgb, var(--mk-scrim, #000) 28%, transparent);
+  backdrop-filter: blur(3px);
+}
+
+[data-mk-command][open] {
+  display: block;
+}
+
+[data-mk-command] [data-mk-command-panel] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+  overflow: hidden;
+  border-radius: 24px;
+  background: var(--mk-command-bg);
+  box-shadow:
+    inset 1px 1px 1px rgb(255 255 255 / 0.08),
+    inset -1px -1px 1px rgb(255 255 255 / 0.04),
+    0 30px 60px -20px rgb(0 0 0 / 0.6);
+  backdrop-filter: blur(24px);
+}
+
+[data-mk-command] [data-mk-command-field] {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin: 0.6rem;
+  padding: 0 0.85rem;
+  border-radius: 14px;
+  background: rgb(255 255 255 / 0.05);
+  box-shadow: inset 0 0 0 1px var(--mk-command-line);
+}
+
+[data-mk-command] [data-mk-command-icon] {
+  display: grid;
+  color: var(--mk-command-muted);
+}
+
+[data-mk-command] input {
+  flex: 1;
+  min-width: 0;
+  min-height: 2.75rem;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--mk-command-text);
+  font: inherit;
+  font-size: 1rem;
+}
+
+[data-mk-command] input::placeholder {
+  color: var(--mk-command-muted);
+}
+
+[data-mk-command] [data-mk-command-scroll] {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 0.6rem 0.6rem;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(255 255 255 / 0.15) transparent;
+}
+
+[data-mk-command] [data-mk-command-pill] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 12px;
+  background: var(--mk-command-pill);
+  pointer-events: none;
+}
+
+[data-mk-command] [data-mk-command-list] {
+  position: relative;
+}
+
+[data-mk-command] [data-mk-command-group-label] {
+  padding: 0.75rem 0.65rem 0.35rem;
+  color: var(--mk-command-muted);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+[data-mk-command] [data-mk-command-item] {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-height: 2.5rem;
+  padding: 0 0.65rem;
+  border-radius: 12px;
+  cursor: pointer;
+}
+
+[data-mk-command] [data-mk-command-arrow] {
+  width: 1rem;
+  color: var(--mk-command-muted);
+  text-align: center;
+  transition: translate 0.3s cubic-bezier(0.38, 0.49, 0, 2);
+}
+
+[data-mk-command] [data-mk-command-item][aria-selected='true'] [data-mk-command-arrow] {
+  color: var(--mk-command-text);
+  translate: 2px 0;
+}
+
+[data-mk-command] [data-mk-command-label] {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 0.9375rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-command] mark {
+  border-radius: 3px;
+  background: rgb(245 215 110 / 0.16);
+  color: var(--mk-command-mark);
+}
+
+[data-mk-command] [data-mk-command-hint] {
+  color: var(--mk-command-muted);
+  font-size: 0.75rem;
+}
+
+[data-mk-command] [data-mk-command-empty] {
+  margin: 0;
+  padding: 2rem 1rem;
+  color: var(--mk-command-muted);
+  text-align: center;
+}
+
+[data-mk-command] [data-mk-command-empty][hidden] {
+  display: none;
+}
+
+[data-mk-command] [data-mk-command-footer] {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.6rem 0.9rem;
+  border-top: 1px solid var(--mk-command-line);
+  color: var(--mk-command-muted);
+  font-size: 0.75rem;
+}
+
+[data-mk-command] [data-mk-command-footer] span {
+  margin-right: 0.6rem;
+}
+
+[data-mk-command] kbd {
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  padding: 0 0.3rem;
+  border-radius: 6px;
+  background: rgb(255 255 255 / 0.07);
+  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.06);
+  color: var(--mk-command-text);
+  font-family: inherit;
+  font-size: 0.75rem;
+}
+
+/* The trigger (optional): a search pill with the shortcut. */
+[data-mk-command-open] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-height: 2.75rem;
+  padding: 0 0.6rem 0 1rem;
+  border: 0;
+  border-radius: 64px;
+  background: var(--mk-surface-3);
+  color: var(--mk-muted);
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+[data-mk-command-open]:hover {
+  background: var(--mk-surface-4);
+}
+
+[data-mk-command-open]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+[data-mk-command-open] kbd {
+  padding: 0.15rem 0.45rem;
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  font-family: inherit;
+  font-size: 0.75rem;
+}
+
+@media (max-width: 520px) {
+  [data-mk-command] {
+    margin-top: 1rem;
+  }
+
+  [data-mk-command] [data-mk-command-footer] {
+    display: none;
+  }
+}
+
+/* Container transform (motion/morph.ts): the trigger's look covers the panel and fades into it; the trigger hides meanwhile. */
+[data-mk-command] .mk-morph-face {
+  position: absolute;
+  inset: 0;
+  z-index: 2147483647;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+:is(.mk-command-search, mk-command-search) [data-mk-morph-origin] {
+  opacity: 0 !important;
+  transition: opacity 80ms ease !important;
+  pointer-events: none;
+}

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

@@ -0,0 +1,23 @@
+/* components/context-menu/context-menu.css */
+/* context-menu — the area that answers a right click; its menu is .mk-menu, placed at the pointer. */
+mk-context-menu {
+  display: block;
+}
+
+.mk-context-menu,
+mk-context-menu {
+  -webkit-touch-callout: none;
+}
+
+:is(.mk-context-menu, mk-context-menu):focus-visible,
+:is(.mk-context-menu, mk-context-menu) [data-mk-context-trigger]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+/* The area pressed while its menu is open. */
+:is(.mk-context-menu, mk-context-menu)[aria-expanded='true'],
+:is(.mk-context-menu, mk-context-menu) [data-mk-context-trigger][aria-expanded='true'] {
+  outline: 2px solid color-mix(in srgb, var(--mk-accent) 45%, transparent);
+  outline-offset: 3px;
+}