@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/dist/css/components/multi-select.css

@@ -0,0 +1,267 @@
+/* components/multi-select/multi-select.css */
+/* multi-select — a 12 px field on surface-3 holding 8 px chips and a search input; a chevron that turns when the list
+   is open; a clear button when something is chosen. The chips and the listbox rules below are shared with tag-input
+   (each stylesheet works alone). */
+.mk-multi-select,
+mk-multi-select {
+  display: block;
+  min-width: 0;
+}
+
+[data-mk-ms-field] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  box-sizing: border-box;
+  min-height: 2.75rem;
+  padding: 0.35rem 0.4rem 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-ms-field]:focus-within {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+[data-mk-ms-input] {
+  flex: 1;
+  min-width: 6ch;
+  height: 1.75rem;
+  padding: 0 0.25rem;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+[data-mk-ms-input]::placeholder {
+  color: var(--mk-muted);
+}
+
+[data-mk-ms-clear],
+[data-mk-ms-chevron] {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  color: var(--mk-muted);
+}
+
+[data-mk-ms-clear] {
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  cursor: pointer;
+}
+
+[data-mk-ms-clear]:hover {
+  background: color-mix(in srgb, var(--mk-text) 8%, transparent);
+  color: var(--mk-text);
+}
+
+:is(.mk-multi-select, mk-multi-select):not([data-mk-has-value]) [data-mk-ms-clear] {
+  display: none;
+}
+
+[data-mk-ms-chevron] {
+  transition: rotate 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+:is(.mk-multi-select, mk-multi-select)[data-mk-open] [data-mk-ms-chevron] {
+  rotate: 180deg;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-ms-field],
+  [data-mk-ms-chevron] {
+    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/notification-bell.css

@@ -0,0 +1,127 @@
+/* components/notification-bell/notification-bell.css */
+/* notification-bell — a round Melonmind icon button (surface tone) with a bell, a badge in the error tone and a
+   message that rises beside it in the inverse glass. */
+.mk-notification-bell,
+mk-notification-bell {
+  position: relative;
+  display: inline-flex;
+}
+
+[data-mk-bell] {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+[data-mk-bell]:hover {
+  background: var(--mk-surface-4);
+}
+
+[data-mk-bell]:active {
+  animation: mk-bell-press 500ms cubic-bezier(0.37, 1.42, 0.37, 1);
+}
+
+[data-mk-bell]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+[data-mk-bell] [data-mk-bell-icon] {
+  width: 1.5rem;
+  height: 1.5rem;
+  overflow: visible;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+[data-mk-bell] [data-mk-bell-waves] {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+
+[data-mk-bell] [data-mk-bell-waves] i {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 2px var(--mk-text);
+}
+
+[data-mk-bell] [data-mk-bell-badge] {
+  position: absolute;
+  top: 0.15rem;
+  right: 0.1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.3rem;
+  border-radius: 64px;
+  background: var(--mk-error);
+  box-shadow: 0 0 0 2px var(--mk-bg);
+  color: var(--mk-on-error);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+
+[data-mk-bell] [data-mk-bell-badge][hidden] {
+  display: none;
+}
+
+:is(.mk-notification-bell, mk-notification-bell) [data-mk-bell-message] {
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 0.75rem);
+  width: max-content;
+  max-width: 16rem;
+  padding: 0.5rem 0.85rem;
+  border-radius: 16px;
+  background: var(--mk-glass-inverse);
+  box-shadow: var(--mk-glass-bevel);
+  backdrop-filter: blur(16px);
+  color: var(--mk-on-glass-inverse);
+  font-size: 0.8125rem;
+  translate: 0 -50%;
+  pointer-events: none;
+  transform-origin: 0 50%;
+}
+
+:is(.mk-notification-bell, mk-notification-bell) [data-mk-bell-message][data-mk-side='left'] {
+  right: calc(100% + 0.75rem);
+  left: auto;
+  transform-origin: 100% 50%;
+}
+
+:is(.mk-notification-bell, mk-notification-bell) [data-mk-bell-message][hidden] {
+  display: none;
+}
+
+@keyframes mk-bell-press {
+  50% {
+    transform: scale(0.92);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-bell] {
+    animation: none !important;
+    transition: none;
+  }
+}

package/dist/css/components/pagination.css

@@ -0,0 +1,11 @@
+/* components/pagination/pagination.css */
+.mk-pagination, mk-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem; }
+.mk-pagination [data-mk-pagination-pages], mk-pagination [data-mk-pagination-pages] { display: flex; align-items: center; gap: .25rem; }
+.mk-pagination button, mk-pagination button { min-width: 2.5rem; height: 2.5rem; border: 0; border-radius: var(--mk-radius-full); background: var(--mk-surface-2); color: var(--mk-text); font: inherit; cursor: pointer; transition: transform .3s, background .3s, color .3s; }
+.mk-pagination button[aria-current], mk-pagination button[aria-current] { background: var(--mk-accent); color: var(--mk-on-accent); }
+.mk-pagination button:hover:not(:disabled), mk-pagination button:hover:not(:disabled) { transform: translateY(-3px); }
+.mk-pagination button:active:not(:disabled), mk-pagination button:active:not(:disabled) { transform: scale(.9); }
+.mk-pagination button:focus-visible, mk-pagination button:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; }
+.mk-pagination button:disabled, mk-pagination button:disabled { opacity: .35; cursor: default; }
+.mk-pagination__gap { padding: 0 .15rem; color: var(--mk-muted); }
+@media (prefers-reduced-motion: reduce) { .mk-pagination button, mk-pagination button { transition: none; transform: none !important; } }

package/dist/css/components/password-strength.css

@@ -0,0 +1,183 @@
+/* components/password-strength/password-strength.css */
+/* password-strength — a Melonmind field (16 px radius, surface-container-high, 3 px focus ring) with an eye toggle,
+   four rounded segments that light up by level and a checklist whose checks draw themselves. */
+.mk-password-strength,
+mk-password-strength {
+  --mk-password-weak: var(--mk-error);
+  --mk-password-fair: #e8a317;
+  --mk-password-good: #3c9a5f;
+  --mk-password-strong: var(--mk-accent);
+  --mk-password-tone: var(--mk-outline);
+  display: grid;
+  gap: 0.75rem;
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+:is(.mk-password-strength, mk-password-strength):is([data-mk-score='0'], [data-mk-score='1']) {
+  --mk-password-tone: var(--mk-password-weak);
+}
+
+:is(.mk-password-strength, mk-password-strength)[data-mk-score='2'] {
+  --mk-password-tone: var(--mk-password-fair);
+}
+
+:is(.mk-password-strength, mk-password-strength)[data-mk-score='3'] {
+  --mk-password-tone: var(--mk-password-good);
+}
+
+:is(.mk-password-strength, mk-password-strength)[data-mk-score='4'] {
+  --mk-password-tone: var(--mk-password-strong);
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-field] {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password] {
+  width: 100%;
+  min-height: 3.25rem;
+  padding: 0 3.5rem 0 1.1rem;
+  border: 0;
+  border-radius: 16px;
+  outline: none;
+  background: var(--mk-surface-4);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 1rem;
+  letter-spacing: 0.02em;
+  transition:
+    box-shadow 0.5s,
+    background-color 0.5s;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password]:hover {
+  background: var(--mk-surface-5);
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password]:focus {
+  background: var(--mk-surface-2);
+  box-shadow:
+    0 0 0 3px var(--mk-outline-soft),
+    0 0.5px 2.5px rgb(0 0 0 / 0.3);
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-toggle] {
+  position: absolute;
+  right: 0.4rem;
+  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;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-toggle]:hover {
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-toggle]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+:is(.mk-password-strength, mk-password-strength) svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-meter] {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-meter] > span:not([data-mk-password-label]) {
+  height: 6px;
+  overflow: hidden;
+  border-radius: 64px;
+  background: var(--mk-surface-4);
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-meter] i {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--mk-password-tone);
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: background-color 0.3s ease;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-label] {
+  min-width: 6.5rem;
+  margin-left: 0.4rem;
+  color: var(--mk-password-tone);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-align: right;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-password-checks] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  gap: 0.3rem 1rem;
+  margin: 0;
+  padding: 0;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+  list-style: none;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-check] {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  transition: color 0.2s ease;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-check] svg {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  padding: 2px;
+  border-radius: 50%;
+  background: var(--mk-surface-3);
+  stroke: transparent;
+  stroke-width: 3;
+  transition:
+    background-color 0.2s ease,
+    stroke 0.2s ease;
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-check][data-mk-met] {
+  color: var(--mk-text);
+}
+
+:is(.mk-password-strength, mk-password-strength) [data-mk-check][data-mk-met] svg {
+  background: var(--mk-password-good);
+  stroke: #fff;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-password-strength, mk-password-strength) :is([data-mk-password], [data-mk-check], [data-mk-check] svg, [data-mk-password-meter] i) {
+    transition: none;
+  }
+}

package/dist/css/components/popover.css

@@ -0,0 +1,25 @@
+/* components/popover/popover.css */
+/* popover — an anchored .mk-dialog (needs dialog.css): 20 px corners on surface-1, as wide as its content up to
+   22rem, 1rem padding. Styled by class: the copy that folds back into the trigger keeps classes only. */
+.mk-popover,
+mk-popover {
+  display: inline-block;
+}
+
+.mk-dialog.mk-popover-panel {
+  --mk-dialog-radius: 20px;
+  --mk-dialog-bg: var(--mk-surface-1);
+  --mk-dialog-shadow: 0 16px 48px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
+  gap: 0.75rem;
+  width: max-content;
+  min-width: min(14rem, calc(100vw - 32px));
+  max-width: min(22rem, calc(100vw - 32px));
+  padding: 1rem;
+}
+
+/* Phones: the anchored dialog is centred by dialog.css; keep it a panel, not a sheet. */
+@media (max-width: 679px) {
+  .mk-dialog.mk-popover-panel {
+    max-width: calc(100vw - 32px);
+  }
+}