@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/dist/css/components/code-block.css

@@ -0,0 +1,264 @@
+/* components/code-block/code-block.css */
+/* code-block — an editor surface, dark in both modes: a bar with three quiet dots, the file name, the language and a
+   glass copy button; mono lines with syntax colours, optional numbers and marked lines. A squared surface (radius 12)
+   so long lines never run into a curved corner. */
+.mk-code-block,
+mk-code-block {
+  --mk-code-radius: var(--mk-radius-sm, 12px);
+  --mk-code-bg: #0e0f11;
+  --mk-code-bar: #16171a;
+  --mk-code-text: #e6e8ec;
+  --mk-code-muted: #8a909b;
+  --mk-code-line: rgb(255 255 255 / 0.035);
+  --mk-code-mark: rgb(196 165 255 / 0.1);
+  --mk-code-keyword: #c4a5ff;
+  --mk-code-string: #9fe0b0;
+  --mk-code-number: #ffb86b;
+  --mk-code-comment: #7d8390;
+  --mk-code-function: #82b4ff;
+  --mk-code-tag: #ff8f8f;
+  --mk-code-attr: #ffd479;
+  --mk-code-property: #8fd6ff;
+  --mk-code-punctuation: #9aa0aa;
+  --mk-code-operator: #c9ced6;
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border-radius: var(--mk-code-radius);
+  background: var(--mk-code-bg);
+  box-shadow:
+    inset 0 0 0 1px rgb(255 255 255 / 0.06),
+    0 18px 40px -24px rgb(0 0 0 / 0.55);
+  color: var(--mk-code-text);
+  color-scheme: dark;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-header] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 3rem;
+  padding: 0.4rem 0.45rem 0.4rem 1rem;
+  background: var(--mk-code-bar);
+  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.05);
+  font-family: var(--mk-font);
+  font-size: 0.8125rem;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-dots] {
+  display: inline-flex;
+  flex: none;
+  gap: 6px;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-dots] i {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgb(255 255 255 / 0.14);
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-title] {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--mk-code-text);
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-language] {
+  padding: 0.15rem 0.5rem;
+  border-radius: 6px;
+  background: rgb(255 255 255 / 0.07);
+  color: var(--mk-code-muted);
+  font-family: var(--mk-font-mono, ui-monospace, monospace);
+  font-size: 0.75rem;
+  text-transform: lowercase;
+}
+
+:is(.mk-code-block, mk-code-block) pre {
+  margin: 0;
+  padding: 1rem 0;
+  overflow-x: auto;
+  font-family: var(--mk-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 0.875rem;
+  line-height: 1.7;
+  tab-size: 2;
+  scrollbar-color: rgb(255 255 255 / 0.2) transparent;
+}
+
+:is(.mk-code-block, mk-code-block) pre:focus-visible {
+  outline: 2px solid var(--mk-code-keyword);
+  outline-offset: -4px;
+  border-radius: calc(var(--mk-code-radius) - 4px);
+}
+
+:is(.mk-code-block, mk-code-block) code {
+  display: block;
+  min-width: max-content;
+  padding: 0 1.25rem;
+  font: inherit;
+  white-space: pre;
+}
+
+/* Highlighted code: block lines (the newlines between them are not rendered in a grid). */
+:is(.mk-code-block, mk-code-block) code:has([data-mk-code-line]) {
+  display: grid;
+  padding: 0;
+  counter-reset: mk-line;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-line] {
+  display: block;
+  translate: 0 var(--mk-line-y, 0);
+  min-height: 1.7em;
+  padding: 0 1.25rem;
+  transition: background-color 0.15s ease;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-line]:hover {
+  background: var(--mk-code-line);
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-line][data-mk-highlight] {
+  background: var(--mk-code-mark);
+  box-shadow: inset 2px 0 0 var(--mk-code-keyword);
+}
+
+:is(.mk-code-block, mk-code-block)[data-mk-line-numbers] [data-mk-code-line]::before {
+  counter-increment: mk-line;
+  content: counter(mk-line);
+  display: inline-block;
+  width: 2ch;
+  margin-right: 1.25rem;
+  color: var(--mk-code-muted);
+  opacity: 0.55;
+  text-align: right;
+  user-select: none;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-token='keyword'] { color: var(--mk-code-keyword); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='string'] { color: var(--mk-code-string); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='number'] { color: var(--mk-code-number); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='comment'] { color: var(--mk-code-comment); font-style: italic; }
+:is(.mk-code-block, mk-code-block) [data-mk-token='function'] { color: var(--mk-code-function); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='tag'] { color: var(--mk-code-tag); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='attr'] { color: var(--mk-code-attr); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='property'] { color: var(--mk-code-property); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='punctuation'] { color: var(--mk-code-punctuation); }
+:is(.mk-code-block, mk-code-block) [data-mk-token='operator'] { color: var(--mk-code-operator); }
+
+/* The copy button: glass on the bar, or floating in the corner when authored outside it. */
+:is(.mk-code-block, mk-code-block) [data-mk-code-copy] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  min-height: 2.25rem;
+  padding: 0 0.9rem;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--mk-radius-xs, 8px);
+  background: rgb(255 255 255 / 0.08);
+  box-shadow:
+    inset 1px 1px 1px rgb(255 255 255 / 0.08),
+    inset -1px -1px 1px rgb(255 255 255 / 0.04);
+  color: var(--mk-code-text);
+  font-family: var(--mk-font);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+:is(.mk-code-block, mk-code-block) > [data-mk-code-copy] {
+  position: absolute;
+  top: 3.5rem;
+  right: 0.6rem;
+  z-index: 1;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-copy]:hover {
+  background: rgb(255 255 255 / 0.14);
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-copy]:focus-visible {
+  outline: 2px solid var(--mk-code-keyword);
+  outline-offset: 2px;
+}
+
+:is(.mk-code-block, mk-code-block)[data-mk-copied] [data-mk-code-copy] {
+  background: #e6e8ec;
+  color: #0e0f11;
+}
+
+:is(.mk-code-block, mk-code-block)[data-mk-copy-error] [data-mk-code-copy] {
+  background: rgb(255 120 120 / 0.18);
+  color: #ffb4b4;
+}
+
+/* The icon turns into a check (or a cross) with a blur. */
+:is(.mk-code-block, mk-code-block) [data-mk-code-copy] svg {
+  flex: none;
+}
+
+:is(.mk-code-block, mk-code-block):is([data-mk-copied], [data-mk-copy-error]) [data-mk-code-copy] svg {
+  display: none;
+}
+
+:is(.mk-code-block, mk-code-block):is([data-mk-copied], [data-mk-copy-error]) [data-mk-code-copy]::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
+  animation: mk-code-check 0.4s cubic-bezier(0.1, 0.8, 0, 1.1);
+}
+
+:is(.mk-code-block, mk-code-block)[data-mk-copy-error] [data-mk-code-copy]::before {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
+}
+
+/* The button says what happened (the status says it to screen readers). */
+:is(.mk-code-block, mk-code-block) [data-mk-code-copy-text][data-mk-feedback] {
+  font-size: 0;
+}
+
+:is(.mk-code-block, mk-code-block) [data-mk-code-copy-text][data-mk-feedback]::after {
+  content: attr(data-mk-feedback);
+  font-size: 0.8125rem;
+}
+
+@keyframes mk-code-check {
+  from {
+    opacity: 0;
+    filter: blur(6px);
+    transform: scale(0.4) rotate(-20deg);
+  }
+}
+
+@media (max-width: 520px) {
+  :is(.mk-code-block, mk-code-block) [data-mk-code-dots] {
+    display: none;
+  }
+
+  :is(.mk-code-block, mk-code-block) pre {
+    font-size: 0.8125rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-code-block, mk-code-block) [data-mk-code-copy]::before {
+    animation: none !important;
+  }
+
+  :is(.mk-code-block, mk-code-block) [data-mk-code-line] {
+    transition: none;
+  }
+}

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%;
+}