@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/dist/chunk-QP4QJOEN.js

@@ -0,0 +1,72 @@
+import {
+  TIMING,
+  reduced
+} from "./chunk-DOOMULVV.js";
+import {
+  warnOnce
+} from "./chunk-TGV27ZWM.js";
+
+// src/motion/effects.ts
+var ANIMATIONS = [
+  "out",
+  "out-left",
+  "out-bottom",
+  "collapse",
+  "highlight",
+  "shake",
+  "shake-strong",
+  "fade",
+  "wipe",
+  "progress-in"
+];
+var EXITS = /* @__PURE__ */ new Set(["out", "out-left", "out-bottom", "collapse"]);
+function animate(el, name, { signal } = {}) {
+  const className = `mk-anim-${name}`;
+  if (!ANIMATIONS.includes(name)) {
+    warnOnce(`animate: unknown animation "${String(name)}" (use ${ANIMATIONS.join(", ")})`);
+    return Promise.resolve();
+  }
+  if (reduced()) return Promise.resolve();
+  const element = el;
+  if (name === "collapse") element.style.setProperty("--mk-collapse-from", `${element.offsetHeight}px`);
+  element.classList.remove(className);
+  void element.offsetWidth;
+  element.classList.add(className);
+  return new Promise((resolve) => {
+    const finish = (keep) => {
+      element.removeEventListener("animationend", onEnd);
+      signal?.removeEventListener("abort", onAbort);
+      clearTimeout(timer);
+      if (!keep) element.classList.remove(className);
+      resolve();
+    };
+    const onEnd = (event) => {
+      if (event.animationName === `mk-${name}`) finish(EXITS.has(name));
+    };
+    const onAbort = () => finish(false);
+    element.addEventListener("animationend", onEnd);
+    signal?.addEventListener("abort", onAbort, { once: true });
+    const timer = setTimeout(() => finish(EXITS.has(name)), TIMING.effects[name] * 1e3 + 100);
+    if (signal?.aborted) onAbort();
+  });
+}
+async function leave(el, name, { remove = true } = {}) {
+  const focused = el.contains(document.activeElement) ? document.activeElement : null;
+  await animate(el, name);
+  focused?.blur();
+  if (remove) {
+    el.remove();
+    return;
+  }
+  el.hidden = true;
+  el.classList.remove(`mk-anim-${name}`);
+  el.style.removeProperty("--mk-collapse-from");
+  if (el.getAttribute("style") === "") el.removeAttribute("style");
+}
+
+export {
+  ANIMATIONS,
+  animate,
+  leave
+};
+//# sourceMappingURL=chunk-QP4QJOEN.js.map

package/dist/chunk-QP4QJOEN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/motion/effects.ts"],"sourcesContent":["import { reduced } from '../core/reduced';\nimport { TIMING } from '../core/timing';\nimport { warnOnce } from '../core/types';\n\n/*\n * Play utility animations (css/effects/anim.css) from code: animate()\n * restarts one even when it is already playing and resolves when it ends;\n * leave() plays an exit and then removes (or hides) the element.\n */\n\nexport const ANIMATIONS = [\n  'out',\n  'out-left',\n  'out-bottom',\n  'collapse',\n  'highlight',\n  'shake',\n  'shake-strong',\n  'fade',\n  'wipe',\n  'progress-in',\n] as const;\nexport type AnimationName = (typeof ANIMATIONS)[number];\nexport type ExitName = 'out' | 'out-left' | 'out-bottom' | 'collapse';\n\nconst EXITS = new Set<AnimationName>(['out', 'out-left', 'out-bottom', 'collapse']);\n\nexport interface AnimateOptions {\n  signal?: AbortSignal;\n}\n\nexport function animate(el: Element, name: AnimationName, { signal }: AnimateOptions = {}): Promise<void> {\n  const className = `mk-anim-${name}`;\n  if (!ANIMATIONS.includes(name)) {\n    warnOnce(`animate: unknown animation \"${String(name)}\" (use ${ANIMATIONS.join(', ')})`);\n    return Promise.resolve();\n  }\n  if (reduced()) return Promise.resolve();\n  const element = el as HTMLElement;\n  if (name === 'collapse') element.style.setProperty('--mk-collapse-from', `${element.offsetHeight}px`);\n  // Off, reflow, on: the browser starts the animation over.\n  element.classList.remove(className);\n  void element.offsetWidth;\n  element.classList.add(className);\n  return new Promise((resolve) => {\n    const finish = (keep: boolean) => {\n      element.removeEventListener('animationend', onEnd);\n      signal?.removeEventListener('abort', onAbort);\n      clearTimeout(timer);\n      if (!keep) element.classList.remove(className);\n      resolve();\n    };\n    const onEnd = (event: Event) => {\n      if ((event as AnimationEvent).animationName === `mk-${name}`) finish(EXITS.has(name));\n    };\n    const onAbort = () => finish(false);\n    element.addEventListener('animationend', onEnd);\n    signal?.addEventListener('abort', onAbort, { once: true });\n    const timer = setTimeout(() => finish(EXITS.has(name)), TIMING.effects[name] * 1000 + 100);\n    if (signal?.aborted) onAbort();\n  });\n}\n\nexport interface LeaveOptions {\n  /** Remove the element (default) or hide it. */\n  remove?: boolean;\n}\n\nexport async function leave(el: Element, name: ExitName, { remove = true }: LeaveOptions = {}): Promise<void> {\n  const focused = el.contains(document.activeElement) ? (document.activeElement as HTMLElement) : null;\n  await animate(el, name);\n  focused?.blur();\n  if (remove) {\n    el.remove();\n    return;\n  }\n  (el as HTMLElement).hidden = true;\n  el.classList.remove(`mk-anim-${name}`);\n  (el as HTMLElement).style.removeProperty('--mk-collapse-from');\n  if (el.getAttribute('style') === '') el.removeAttribute('style');\n}\n"],"mappings":";;;;;;;;;AAUO,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIA,IAAM,QAAQ,oBAAI,IAAmB,CAAC,OAAO,YAAY,cAAc,UAAU,CAAC;AAM3E,SAAS,QAAQ,IAAa,MAAqB,EAAE,OAAO,IAAoB,CAAC,GAAkB;AACxG,QAAM,YAAY,WAAW,IAAI;AACjC,MAAI,CAAC,WAAW,SAAS,IAAI,GAAG;AAC9B,aAAS,+BAA+B,OAAO,IAAI,CAAC,UAAU,WAAW,KAAK,IAAI,CAAC,GAAG;AACtF,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACA,MAAI,QAAQ,EAAG,QAAO,QAAQ,QAAQ;AACtC,QAAM,UAAU;AAChB,MAAI,SAAS,WAAY,SAAQ,MAAM,YAAY,sBAAsB,GAAG,QAAQ,YAAY,IAAI;AAEpG,UAAQ,UAAU,OAAO,SAAS;AAClC,OAAK,QAAQ;AACb,UAAQ,UAAU,IAAI,SAAS;AAC/B,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,SAAS,CAAC,SAAkB;AAChC,cAAQ,oBAAoB,gBAAgB,KAAK;AACjD,cAAQ,oBAAoB,SAAS,OAAO;AAC5C,mBAAa,KAAK;AAClB,UAAI,CAAC,KAAM,SAAQ,UAAU,OAAO,SAAS;AAC7C,cAAQ;AAAA,IACV;AACA,UAAM,QAAQ,CAAC,UAAiB;AAC9B,UAAK,MAAyB,kBAAkB,MAAM,IAAI,GAAI,QAAO,MAAM,IAAI,IAAI,CAAC;AAAA,IACtF;AACA,UAAM,UAAU,MAAM,OAAO,KAAK;AAClC,YAAQ,iBAAiB,gBAAgB,KAAK;AAC9C,YAAQ,iBAAiB,SAAS,SAAS,EAAE,MAAM,KAAK,CAAC;AACzD,UAAM,QAAQ,WAAW,MAAM,OAAO,MAAM,IAAI,IAAI,CAAC,GAAG,OAAO,QAAQ,IAAI,IAAI,MAAO,GAAG;AACzF,QAAI,QAAQ,QAAS,SAAQ;AAAA,EAC/B,CAAC;AACH;AAOA,eAAsB,MAAM,IAAa,MAAgB,EAAE,SAAS,KAAK,IAAkB,CAAC,GAAkB;AAC5G,QAAM,UAAU,GAAG,SAAS,SAAS,aAAa,IAAK,SAAS,gBAAgC;AAChG,QAAM,QAAQ,IAAI,IAAI;AACtB,WAAS,KAAK;AACd,MAAI,QAAQ;AACV,OAAG,OAAO;AACV;AAAA,EACF;AACA,EAAC,GAAmB,SAAS;AAC7B,KAAG,UAAU,OAAO,WAAW,IAAI,EAAE;AACrC,EAAC,GAAmB,MAAM,eAAe,oBAAoB;AAC7D,MAAI,GAAG,aAAa,OAAO,MAAM,GAAI,IAAG,gBAAgB,OAAO;AACjE;","names":[]}

package/dist/css/components/activity-feed.css

@@ -0,0 +1,240 @@
+/* components/activity-feed/activity-feed.css */
+/* activity-feed — day headings in small caps, entries on 12 px rows: a 2.25rem avatar (a picture, or initials on a hue
+   from the name) with a badge for the kind of action, the sentence, a quote on surface-3, a muted time. New entries
+   keep an accent-soft highlight that fades; the "novedades" pill sticks to the top. Give the root a max-height (or
+   --mk-af-height) to scroll inside it. */
+.mk-activity-feed,
+mk-activity-feed {
+  --mk-af-height: none;
+  --mk-af-avatar-l: 86%;
+  --mk-af-avatar-ink-l: 28%;
+  position: relative;
+  display: block;
+  max-height: var(--mk-af-height);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  color: var(--mk-text);
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-mk-mode='light'])) :is(.mk-activity-feed, mk-activity-feed) {
+    --mk-af-avatar-l: 28%;
+    --mk-af-avatar-ink-l: 86%;
+  }
+}
+
+:where(:root[data-mk-mode='dark']) :is(.mk-activity-feed, mk-activity-feed) {
+  --mk-af-avatar-l: 28%;
+  --mk-af-avatar-ink-l: 86%;
+}
+
+[data-mk-af-new] {
+  position: sticky;
+  top: 0.5rem;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+  width: max-content;
+  height: 2rem;
+  margin: 0 auto 0.5rem;
+  padding: 0 0.9rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+[data-mk-af-new][hidden] {
+  display: none;
+}
+
+[data-mk-af-day] + [data-mk-af-day] {
+  margin-top: 1rem;
+}
+
+/* Section > heading: strong enough for a page's own h3 rules (a card's `.card h3`, say). */
+[data-mk-af-day] > [data-mk-af-heading] {
+  margin: 0 0 0.35rem;
+  padding: 0 0.5rem;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+[data-mk-af-day] ul {
+  display: grid;
+  gap: 0.15rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[data-mk-af-item] {
+  display: grid;
+  grid-template-columns: 2.25rem minmax(0, 1fr);
+  gap: 0.75rem;
+  padding: 0.6rem 0.5rem;
+  border-radius: 12px;
+  outline: none;
+}
+
+[data-mk-af-item]:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--mk-accent);
+}
+
+[data-mk-af-item][data-mk-fresh] {
+  animation: mk-af-fresh 2.4s ease-out both;
+}
+
+@keyframes mk-af-fresh {
+  from {
+    background: color-mix(in srgb, var(--mk-accent-soft) 90%, transparent);
+  }
+
+  to {
+    background: transparent;
+  }
+}
+
+[data-mk-af-avatar] {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  background: hsl(var(--mk-af-hue, 210) 55% var(--mk-af-avatar-l));
+  color: hsl(var(--mk-af-hue, 210) 50% var(--mk-af-avatar-ink-l));
+  font-size: 0.8125rem;
+  font-weight: 700;
+}
+
+[data-mk-af-avatar] img {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+[data-mk-af-badge] {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  display: grid;
+  place-items: center;
+  width: 1.05rem;
+  height: 1.05rem;
+  border-radius: 50%;
+  background: var(--mk-text);
+  color: var(--mk-surface-1, var(--mk-bg));
+  box-shadow: 0 0 0 2px var(--mk-surface-1, var(--mk-bg));
+}
+
+[data-mk-af-badge='comment'],
+[data-mk-af-badge='mention'] {
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+}
+
+[data-mk-af-badge='complete'] {
+  background: #1f9d5b;
+  color: #fff;
+}
+
+[data-mk-af-badge='delete'] {
+  background: var(--mk-error, #c62828);
+  color: var(--mk-on-error, #fff);
+}
+
+[data-mk-af-line] {
+  margin: 0;
+  font-size: 0.9375rem;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
+[data-mk-af-line] b {
+  font-weight: 600;
+}
+
+[data-mk-af-target] {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
+  text-underline-offset: 3px;
+}
+
+a[data-mk-af-target]:hover {
+  text-decoration-color: currentColor;
+}
+
+[data-mk-af-detail] {
+  margin: 0.4rem 0 0;
+  padding: 0.5rem 0.75rem;
+  border-radius: 10px;
+  background: var(--mk-surface-3);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+
+[data-mk-af-time] {
+  display: block;
+  margin-top: 0.2rem;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+}
+
+[data-mk-af-more] {
+  display: block;
+  height: 2.25rem;
+  margin: 0.75rem auto 0;
+  padding: 0 1rem;
+  border: 0;
+  border-radius: 10px;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+[data-mk-af-more][hidden],
+[data-mk-af-empty][hidden] {
+  display: none;
+}
+
+[data-mk-af-more][aria-busy='true'] {
+  cursor: progress;
+  opacity: 0.7;
+}
+
+[data-mk-af-more]:focus-visible,
+[data-mk-af-new]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+[data-mk-af-end],
+[data-mk-af-empty] {
+  margin: 0.75rem 0 0;
+  color: var(--mk-muted);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-af-item][data-mk-fresh] {
+    animation: none;
+  }
+}

package/dist/css/components/add-to-cart.css

@@ -0,0 +1,72 @@
+/* components/add-to-cart/add-to-cart.css */
+/* add-to-cart — the little box that carries the product to the cart: a kraft front with a tape stripe in the accent,
+   two flaps that close over the picture, a soft shadow; it flies above everything and never takes the pointer. */
+.mk-add-to-cart,
+mk-add-to-cart {
+  display: inline-flex;
+}
+
+[data-mk-cart-box] {
+  --mk-cart-box: #c99a62;
+  --mk-cart-box-shade: #b0824d;
+  --mk-cart-tape: var(--mk-accent);
+  position: fixed;
+  z-index: 2147483646;
+  pointer-events: none;
+  filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.28));
+}
+
+[data-mk-cart-thumb] {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+[data-mk-cart-front] {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 70%;
+  border-radius: 4px 4px 8px 8px;
+  background: linear-gradient(180deg, var(--mk-cart-box), var(--mk-cart-box-shade));
+  transform-origin: 50% 100%;
+}
+
+[data-mk-cart-tape] {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 10px;
+  height: 100%;
+  margin-left: -5px;
+  border-radius: 0 0 2px 2px;
+  background: var(--mk-cart-tape);
+  opacity: 0.9;
+  transform-origin: 50% 0;
+}
+
+[data-mk-cart-flap] {
+  position: absolute;
+  top: 18%;
+  width: 50%;
+  height: 14%;
+  background: var(--mk-cart-box-shade);
+}
+
+[data-mk-cart-flap='left'] {
+  left: 0;
+  border-radius: 4px 0 0 2px;
+  transform-origin: 0 100%;
+}
+
+[data-mk-cart-flap='right'] {
+  right: 0;
+  border-radius: 0 4px 2px 0;
+  transform-origin: 100% 100%;
+}

package/dist/css/components/attachment.css

@@ -0,0 +1,266 @@
+/* components/attachment/attachment.css */
+/* attachment — a soft dashed drop zone and file cards with progress (Melon Mind surfaces: 16–24 px radius). */
+.mk-attachment,
+mk-attachment {
+  --mk-attachment-radius: var(--mk-radius-lg, 24px);
+  --mk-attachment-accent: var(--mk-accent);
+  display: grid;
+  gap: 0.75rem;
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 0.35rem;
+  padding: 1.75rem 1.25rem;
+  border: 1.5px dashed var(--mk-outline-soft);
+  border-radius: var(--mk-attachment-radius);
+  background: var(--mk-surface-2);
+  text-align: center;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    transform 0.25s var(--mk-ease-press, ease);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop]:hover,
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop][data-mk-dragging] {
+  border-color: var(--mk-outline);
+  background: var(--mk-surface-3);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop][data-mk-dragging] {
+  transform: scale(1.015);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop]:active {
+  transform: scale(0.99);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop]:has(input:focus-visible) {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+:is(.mk-attachment, mk-attachment)[data-mk-disabled] [data-mk-attachment-drop] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] input[type='file'] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] [data-mk-part='icon'] {
+  display: grid;
+  place-items: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  margin-bottom: 0.25rem;
+  border-radius: 50%;
+  background: var(--mk-text);
+  color: var(--mk-bg);
+  transition: translate 0.4s cubic-bezier(0.38, 0.49, 0, 2);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop]:is(:hover, [data-mk-dragging]) [data-mk-part='icon'] {
+  translate: 0 -4px;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] [data-mk-part='icon']::before {
+  content: '';
+  width: 1.25rem;
+  height: 1.25rem;
+  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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M6.5 9.5 12 4l5.5 5.5M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] strong {
+  color: var(--mk-text);
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-drop] small {
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-list] {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-list]:empty {
+  display: none;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-item] {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.875rem;
+  padding: 0.625rem 0.625rem 0.625rem 0.75rem;
+  border-radius: calc(var(--mk-attachment-radius) - 8px);
+  background: var(--mk-surface-1);
+  box-shadow: inset 0 0 0 1px var(--mk-outline-soft);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-item][data-mk-status='error'] {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-error) 45%, transparent);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-item] [data-mk-part='thumb'] {
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 0.875rem;
+  background: var(--mk-surface-3);
+  color: var(--mk-muted);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-part='thumb'] img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-part='meta'] {
+  display: grid;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-part='name'] {
+  overflow: hidden;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-part='detail'] {
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-status='complete'] [data-mk-part='detail'] {
+  color: var(--mk-accent);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-status='error'] [data-mk-part='detail'] {
+  color: var(--mk-error);
+}
+
+:is(.mk-attachment, mk-attachment) progress {
+  width: 100%;
+  height: 4px;
+  margin-top: 0.3rem;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-surface-4);
+  appearance: none;
+  accent-color: var(--mk-attachment-accent);
+}
+
+:is(.mk-attachment, mk-attachment) progress[hidden] {
+  display: none;
+}
+
+:is(.mk-attachment, mk-attachment) progress::-webkit-progress-bar {
+  background: transparent;
+}
+
+:is(.mk-attachment, mk-attachment) progress::-webkit-progress-value {
+  border-radius: inherit;
+  background: var(--mk-attachment-accent);
+  transition: width 0.3s ease;
+}
+
+:is(.mk-attachment, mk-attachment) progress::-moz-progress-bar {
+  border-radius: inherit;
+  background: var(--mk-attachment-accent);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove] {
+  display: grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--mk-muted);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    transform 0.2s var(--mk-ease-press, ease);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove]:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--mk-error) 12%, transparent);
+  color: var(--mk-error);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove]:active:not(:disabled) {
+  transform: scale(0.9);
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-remove]:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-error] {
+  margin: 0;
+  padding: 0.625rem 0.875rem;
+  border-radius: var(--mk-radius-lg);
+  background: var(--mk-error-soft);
+  color: var(--mk-on-error-soft);
+  font-size: 0.875rem;
+}
+
+:is(.mk-attachment, mk-attachment) [data-mk-attachment-error][hidden] {
+  display: none;
+}
+
+@keyframes mk-attachment-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-attachment, mk-attachment) :is([data-mk-attachment-drop], [data-mk-attachment-item], [data-mk-attachment-remove]) {
+    transition: none;
+    animation: none;
+    transform: none !important;
+  }
+}