@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/dist/css/components/tag-input.css

@@ -0,0 +1,244 @@
+/* components/tag-input/tag-input.css */
+/* tag-input — a 12 px field on surface-3 with 8 px chips and the input; the reason a tag was refused sits under it in
+   the error colour. The chips and the listbox rules below are shared with multi-select (each stylesheet works alone). */
+.mk-tag-input,
+mk-tag-input {
+  display: block;
+  min-width: 0;
+}
+
+[data-mk-tag-field] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  box-sizing: border-box;
+  min-height: 2.75rem;
+  padding: 0.35rem 0.5rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  cursor: text;
+  transition: box-shadow 0.2s ease;
+}
+
+[data-mk-tag-field]:focus-within {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+[data-mk-tag-field]:has([aria-invalid='true']) {
+  box-shadow: 0 0 0 2px var(--mk-error, #c62828);
+}
+
+[data-mk-tag-input] {
+  flex: 1;
+  min-width: 8ch;
+  height: 1.75rem;
+  padding: 0 0.25rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+[data-mk-tag-input]::placeholder {
+  color: var(--mk-muted);
+}
+
+[data-mk-tag-error] {
+  margin: 0.4rem 0 0;
+  color: var(--mk-error, #c62828);
+  font-size: 0.8125rem;
+}
+
+[data-mk-tag-error][hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-tag-field] {
+    transition: none;
+  }
+}
+
+/* Chips (core/chips.ts): 8 px, accent-soft, a round remove button; the armed one (next Backspace) gets a ring. */
+[data-mk-chips] {
+  display: contents;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[data-mk-chip] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.15rem;
+  box-sizing: border-box;
+  max-width: 100%;
+  height: 1.75rem;
+  padding: 0 0.2rem 0 0.6rem;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft, var(--mk-text));
+  font-size: 0.8125rem;
+  font-weight: 500;
+  white-space: nowrap;
+  outline: none;
+  transition: box-shadow 0.2s ease;
+}
+
+[data-mk-chip-label] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-mk-chip]:focus-visible,
+[data-mk-chip][data-mk-armed] {
+  box-shadow: 0 0 0 2px var(--mk-accent);
+}
+
+[data-mk-chip-remove] {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+}
+
+[data-mk-chip-remove]:hover {
+  background: color-mix(in srgb, currentColor 14%, transparent);
+  opacity: 1;
+}
+
+/* Listbox (core/listbox.ts): a 16 px panel in the top layer under the field; the active option sits on a pill. */
+[data-mk-listbox] {
+  position: fixed;
+  inset: auto;
+  z-index: 2147482000;
+  box-sizing: border-box;
+  max-height: min(18rem, 50vh);
+  margin: 0;
+  padding: 0.35rem;
+  overflow: auto;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 16px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
+  font: 0.9375rem/1.3 var(--mk-font, system-ui, sans-serif);
+  overscroll-behavior: contain;
+}
+
+[data-mk-listbox][hidden] {
+  display: none;
+}
+
+[data-mk-listbox-items] {
+  position: relative;
+  display: grid;
+  gap: 2px;
+}
+
+[data-mk-listbox-pill] {
+  position: absolute;
+  top: 0.35rem;
+  right: 0.35rem;
+  left: 0.35rem;
+  border-radius: 10px;
+  background: var(--mk-accent-soft);
+  opacity: 0;
+  pointer-events: none;
+}
+
+[data-mk-option] {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-height: 2.5rem;
+  padding: 0 0.75rem;
+  border-radius: 10px;
+  cursor: pointer;
+  user-select: none;
+}
+
+[data-mk-option][aria-disabled='true'] {
+  color: var(--mk-muted);
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+[data-mk-option-label] {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+[data-mk-option-label] mark {
+  background: transparent;
+  color: inherit;
+  font-weight: 700;
+  text-decoration: underline;
+  text-decoration-color: var(--mk-accent);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+}
+
+[data-mk-option-hint] {
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+}
+
+[data-mk-option-check] {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 1.15rem;
+  height: 1.15rem;
+  border: 1.5px solid var(--mk-outline);
+  border-radius: 5px;
+  color: transparent;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+[data-mk-option][aria-selected='true'] [data-mk-option-check] {
+  border-color: var(--mk-accent);
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+}
+
+[data-mk-listbox-group] {
+  padding: 0.6rem 0.75rem 0.25rem;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+
+[data-mk-listbox-empty] {
+  padding: 0.75rem;
+  color: var(--mk-muted);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-chip],
+  [data-mk-chip-remove],
+  [data-mk-option-check] {
+    transition: none;
+  }
+}

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