@yewdiel21/motion-kit 0.10.0 → 0.15.0

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

@@ -0,0 +1,88 @@
+/* components/time-field/time-field.css */
+/* time-field — a 12 px field on surface-3; tabular digits; the focused segment sits on a 6 px accent-soft pill that
+   glides between segments; empty segments are muted dashes; invalid draws an error ring. */
+.mk-time-field,
+mk-time-field {
+  display: inline-block;
+  max-width: 100%;
+}
+
+:is(.mk-time-field, mk-time-field) [data-mk-segments] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-height: 2.75rem;
+  padding: 0 0.75rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  transition: box-shadow 0.2s ease;
+}
+
+:is(.mk-time-field, mk-time-field) [data-mk-segments]:focus-within {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+:is(.mk-time-field, mk-time-field) [data-mk-segments][aria-invalid='true'] {
+  box-shadow: 0 0 0 2px var(--mk-error, #d93025);
+}
+
+:is(.mk-time-field, mk-time-field) [data-mk-segments][aria-disabled='true'] {
+  opacity: 0.5;
+}
+
+:is(.mk-time-field, mk-time-field) [data-mk-segment] {
+  position: relative;
+  z-index: 1;
+  padding: 0.2rem 0.15rem;
+  border-radius: 6px;
+  caret-color: transparent;
+  outline: none;
+  cursor: default;
+}
+
+:is(.mk-time-field, mk-time-field) [data-mk-segment][data-mk-empty] {
+  color: var(--mk-muted);
+}
+
+:is(.mk-time-field, mk-time-field) [data-mk-segment]:focus {
+  color: var(--mk-on-accent-soft, var(--mk-text));
+}
+
+:is(.mk-time-field, mk-time-field) [data-mk-segment]::selection {
+  background: transparent;
+}
+
+:is(.mk-time-field, mk-time-field) [data-mk-segment-literal] {
+  padding: 0 0.05rem;
+  color: var(--mk-muted);
+}
+
+:is(.mk-time-field, mk-time-field) [data-mk-segment-focus] {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 1.75rem;
+  margin-top: -0.875rem;
+  border-radius: 6px;
+  background: var(--mk-accent-soft);
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Without motion the pill is not drawn: the focused segment gets the colour directly. */
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-time-field, mk-time-field) [data-mk-segment]:focus {
+    background: var(--mk-accent-soft);
+  }
+
+  :is(.mk-time-field, mk-time-field) [data-mk-segment-focus] {
+    display: none;
+  }
+
+  :is(.mk-time-field, mk-time-field) [data-mk-segments] {
+    transition: none;
+  }
+}

package/dist/css/components/timeline.css

@@ -0,0 +1,219 @@
+/* components/timeline/timeline.css */
+/* timeline — a 2 px rail (outline-soft) behind 2rem dots, its done stretch in the accent; dots by state (done: accent,
+   current: accent-soft with a ring that breathes, upcoming: dashed, error: error); a muted time, a 600 title, a muted
+   description; days are chips on the rail. 'alternate' puts the events on both sides of a centred rail when the timeline
+   is 520 px wide or more. */
+.mk-timeline,
+mk-timeline {
+  container-type: inline-size;
+  display: block;
+  min-width: 0;
+  color: var(--mk-text);
+}
+
+[data-mk-tl-wrap] {
+  position: relative;
+}
+
+[data-mk-timeline-list] {
+  display: grid;
+  gap: 1.1rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[data-mk-tl-rail] {
+  position: absolute;
+  left: calc(1rem - 1px);
+  width: 2px;
+  overflow: hidden;
+  border-radius: 2px;
+  background: var(--mk-outline-soft);
+}
+
+[data-mk-tl-rail][hidden] {
+  display: none;
+}
+
+[data-mk-tl-progress] {
+  display: block;
+  width: 100%;
+  border-radius: inherit;
+  background: var(--mk-accent);
+  transition: height 0.5s cubic-bezier(0.38, 0.49, 0, 1);
+}
+
+[data-mk-tl-item] {
+  display: grid;
+  grid-template-columns: 2rem minmax(0, 1fr);
+  align-items: start;
+  column-gap: 0.85rem;
+}
+
+[data-mk-tl-dot] {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+  box-shadow: 0 0 0 4px var(--mk-surface-1, var(--mk-bg));
+  font-size: 0.8125rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+[data-mk-tl-dot]:empty::after {
+  content: '';
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+[data-mk-tl-item][data-status='current'] [data-mk-tl-dot] {
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft, var(--mk-text));
+  animation: mk-tl-breathe 2.2s ease-in-out infinite;
+}
+
+[data-mk-tl-item][data-status='upcoming'] [data-mk-tl-dot] {
+  background: var(--mk-surface-1, var(--mk-bg));
+  color: var(--mk-muted);
+  outline: 2px dashed var(--mk-outline);
+  outline-offset: -2px;
+}
+
+[data-mk-tl-item][data-status='error'] [data-mk-tl-dot] {
+  background: var(--mk-error, #c62828);
+  color: var(--mk-on-error, #fff);
+}
+
+@keyframes mk-tl-breathe {
+  0%,
+  100% {
+    box-shadow: 0 0 0 4px var(--mk-surface-1, var(--mk-bg)), 0 0 0 4px color-mix(in srgb, var(--mk-accent) 45%, transparent);
+  }
+
+  50% {
+    box-shadow: 0 0 0 4px var(--mk-surface-1, var(--mk-bg)), 0 0 0 9px color-mix(in srgb, var(--mk-accent) 0%, transparent);
+  }
+}
+
+[data-mk-tl-body] {
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  justify-self: start;
+  gap: 0.2rem;
+  min-width: 0;
+  padding-top: 0.25rem;
+}
+
+/* A new event: a soft accent highlight behind it that fades. */
+[data-mk-tl-fresh] [data-mk-tl-body]::before {
+  content: '';
+  position: absolute;
+  inset: -0.125rem -0.625rem -0.375rem;
+  z-index: -1;
+  border-radius: 12px;
+  background: var(--mk-accent-soft);
+  animation: mk-tl-fresh 1.8s ease-out both;
+  pointer-events: none;
+}
+
+@keyframes mk-tl-fresh {
+  from {
+    opacity: 0.75;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+[data-mk-tl-time],
+[data-mk-tl-meta] {
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+}
+
+[data-mk-tl-title] {
+  font-weight: 600;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+[data-mk-tl-item][data-status='upcoming'] [data-mk-tl-title] {
+  color: var(--mk-muted);
+}
+
+[data-mk-tl-description] {
+  margin: 0;
+  color: var(--mk-muted);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+/* A day is a small chip on the rail (it hides the line behind it). */
+[data-mk-tl-day] {
+  position: relative;
+  z-index: 1;
+  justify-self: start;
+  margin-top: 0.35rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 8px;
+  background: var(--mk-surface-3);
+  color: var(--mk-muted);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+@container (min-width: 520px) {
+  :is(.mk-timeline, mk-timeline)[data-mk-layout='alternate'] [data-mk-tl-rail] {
+    left: calc(50% - 1px);
+  }
+
+  :is(.mk-timeline, mk-timeline)[data-mk-layout='alternate'] [data-mk-tl-item] {
+    grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr);
+  }
+
+  :is(.mk-timeline, mk-timeline)[data-mk-layout='alternate'] [data-mk-tl-dot] {
+    grid-row: 1;
+    grid-column: 2;
+  }
+
+  :is(.mk-timeline, mk-timeline)[data-mk-layout='alternate'] [data-mk-tl-item][data-side='start'] [data-mk-tl-body] {
+    grid-row: 1;
+    grid-column: 1;
+    justify-self: end;
+    text-align: end;
+  }
+
+  :is(.mk-timeline, mk-timeline)[data-mk-layout='alternate'] [data-mk-tl-item][data-side='end'] [data-mk-tl-body] {
+    grid-row: 1;
+    grid-column: 3;
+  }
+
+  :is(.mk-timeline, mk-timeline)[data-mk-layout='alternate'] [data-mk-tl-day] {
+    justify-self: center;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-tl-item][data-status='current'] [data-mk-tl-dot] {
+    animation: none;
+    box-shadow: 0 0 0 4px var(--mk-surface-1, var(--mk-bg)), 0 0 0 6px color-mix(in srgb, var(--mk-accent) 45%, transparent);
+  }
+
+  [data-mk-tl-progress] {
+    transition: none;
+  }
+}

package/dist/css/components/toolbar.css

@@ -0,0 +1,122 @@
+/* components/toolbar/toolbar.css */
+/* toolbar — a dark rail of round tools; a light blob sits under the chosen one and stretches like slime to the next.
+   The label beside a tool is a small dark pill. In the dark theme the rail turns light and the blob dark. */
+.mk-toolbar,
+mk-toolbar {
+  --mk-toolbar-rail: color-mix(in srgb, var(--mk-text) 86%, var(--mk-bg));
+  --mk-toolbar-on-rail: var(--mk-bg);
+  --mk-toolbar-blob: var(--mk-bg);
+  --mk-toolbar-on-blob: var(--mk-text);
+  --mk-toolbar-tool: 3.5rem;
+  position: relative;
+  display: inline-flex;
+  width: max-content;
+  max-width: 100%;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-toolbar-rail);
+  box-shadow: 0 10px 30px -12px var(--mk-shadow-color, rgb(0 0 0 / 0.35));
+}
+
+:is(.mk-toolbar, mk-toolbar)[data-mk-orientation='horizontal'] {
+  flex-direction: row;
+}
+
+:is(.mk-toolbar, mk-toolbar) > button {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  width: var(--mk-toolbar-tool);
+  height: var(--mk-toolbar-tool);
+  padding: 0;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: transparent;
+  color: var(--mk-toolbar-on-rail);
+  cursor: pointer;
+  transition: color 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:is(.mk-toolbar, mk-toolbar) > button svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  transition: transform 0.35s var(--mk-ease-swatch);
+}
+
+/* The chosen tool's icon turns dark as the blob arrives under it. */
+:is(.mk-toolbar, mk-toolbar) > button[aria-pressed='true'] {
+  color: var(--mk-toolbar-on-blob);
+  transition-delay: 0.12s;
+}
+
+@media (hover: hover) {
+  :is(.mk-toolbar, mk-toolbar) > button:hover svg {
+    transform: scale(1.1);
+  }
+}
+
+:is(.mk-toolbar, mk-toolbar) > button:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+:is(.mk-toolbar, mk-toolbar) > button:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+[data-mk-toolbar-blob] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--mk-toolbar-tool);
+  height: var(--mk-toolbar-tool);
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-toolbar-blob);
+  pointer-events: none;
+  will-change: transform, height, width;
+}
+
+[data-mk-toolbar-tip] {
+  position: absolute;
+  top: 0;
+  left: calc(100% + 0.75rem);
+  z-index: 2;
+  padding: 0.4rem 0.9rem;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-toolbar-rail);
+  color: var(--mk-toolbar-on-rail);
+  font: 500 0.875rem/1.2 var(--mk-font);
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+:is(.mk-toolbar, mk-toolbar)[data-mk-orientation='horizontal'] [data-mk-toolbar-tip] {
+  top: auto;
+  bottom: calc(100% + 0.75rem);
+  left: 0;
+}
+
+[data-mk-toolbar-tip][hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-toolbar, mk-toolbar) > button,
+  :is(.mk-toolbar, mk-toolbar) > button svg {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-mk-toolbar-blob] {
+    background: Highlight;
+  }
+  :is(.mk-toolbar, mk-toolbar) > button[aria-pressed='true'] {
+    color: HighlightText;
+  }
+}

package/dist/css/components/tooltip.css

@@ -0,0 +1,79 @@
+/* components/tooltip/tooltip.css */
+/* tooltip — Melon Mind's inverse glass in a compact 8 px bubble: .8125rem text, at most 18rem wide, a 12 × 6 px arrow
+   that points at the trigger's centre. It lives in the top layer, so the reset below undoes the popover UA styles. */
+.mk-tooltip,
+mk-tooltip {
+  display: inline-flex;
+}
+
+[data-mk-tooltip-bubble] {
+  --mk-tooltip-bg: var(--mk-glass-inverse, rgb(24 24 24 / 0.9));
+  position: fixed;
+  inset: auto;
+  z-index: 2147483000;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(18rem, calc(100vw - 16px));
+  margin: 0;
+  padding: 0.4rem 0.65rem;
+  border: 0;
+  border-radius: 8px;
+  overflow: visible;
+  background: var(--mk-tooltip-bg);
+  color: var(--mk-on-glass-inverse, #fff);
+  box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
+  font: 500 0.8125rem/1.35 var(--mk-font, system-ui, sans-serif);
+  text-align: start;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+}
+
+[data-mk-tooltip-bubble][data-mk-interactive] {
+  pointer-events: auto;
+}
+
+[data-mk-tooltip-bubble][hidden] {
+  display: none;
+}
+
+/* A triangle outside the bubble's edge (no overlap, so the translucent glass is not doubled). */
+[data-mk-tooltip-arrow] {
+  position: absolute;
+  background: var(--mk-tooltip-bg);
+}
+
+[data-mk-tooltip-bubble][data-mk-side='top'] > [data-mk-tooltip-arrow],
+[data-mk-tooltip-bubble][data-mk-side='bottom'] > [data-mk-tooltip-arrow] {
+  left: calc(var(--mk-tooltip-arrow, 50%) - 6px);
+  width: 12px;
+  height: 6px;
+}
+
+[data-mk-tooltip-bubble][data-mk-side='top'] > [data-mk-tooltip-arrow] {
+  top: 100%;
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+
+[data-mk-tooltip-bubble][data-mk-side='bottom'] > [data-mk-tooltip-arrow] {
+  bottom: 100%;
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+[data-mk-tooltip-bubble][data-mk-side='left'] > [data-mk-tooltip-arrow],
+[data-mk-tooltip-bubble][data-mk-side='right'] > [data-mk-tooltip-arrow] {
+  top: calc(var(--mk-tooltip-arrow, 50%) - 6px);
+  width: 6px;
+  height: 12px;
+}
+
+[data-mk-tooltip-bubble][data-mk-side='left'] > [data-mk-tooltip-arrow] {
+  left: 100%;
+  clip-path: polygon(0 0, 100% 50%, 0 100%);
+}
+
+[data-mk-tooltip-bubble][data-mk-side='right'] > [data-mk-tooltip-arrow] {
+  right: 100%;
+  clip-path: polygon(100% 0, 100% 100%, 0 50%);
+}