@yewdiel21/motion-kit 0.10.0 → 0.15.0

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/orbit-menu.css

@@ -0,0 +1,130 @@
+/* components/orbit-menu/orbit-menu.css */
+/* orbit-menu — soft white squares (16 px corners, a wide low shadow) around a middle button whose lines turn into an ×.
+   The options sit on the middle and the engine moves them out; give the menu room around it. */
+.mk-orbit-menu,
+mk-orbit-menu {
+  --mk-orbit-size: 4rem;
+  --mk-orbit-face: var(--mk-surface-3);
+  --mk-orbit-ink: var(--mk-text);
+  --mk-orbit-shadow: 0 18px 36px -14px rgb(0 0 0 / 0.22), 0 2px 6px -2px rgb(0 0 0 / 0.08);
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  width: var(--mk-orbit-size);
+  height: var(--mk-orbit-size);
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu) :is([data-mk-orbit-toggle], [data-mk-orbit-item]) {
+  display: grid;
+  place-items: center;
+  width: var(--mk-orbit-size);
+  height: var(--mk-orbit-size);
+  padding: 0;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: var(--mk-radius-md);
+  background: var(--mk-orbit-face);
+  box-shadow: var(--mk-orbit-shadow);
+  color: var(--mk-orbit-ink);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu) [data-mk-orbit-toggle] {
+  position: relative;
+  z-index: 2;
+  transition:
+    background-color 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+/* Open: the middle goes glassy, the options are the faces now. */
+:is(.mk-orbit-menu, mk-orbit-menu)[data-mk-state='open'] [data-mk-orbit-toggle] {
+  background: color-mix(in srgb, var(--mk-orbit-face) 55%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-orbit-ink) 8%, transparent);
+  backdrop-filter: blur(8px);
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu) [data-mk-orbit-item] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu) :is([data-mk-orbit-toggle], [data-mk-orbit-item]) svg {
+  width: 1.75rem;
+  height: 1.75rem;
+  transition: transform 0.35s var(--mk-ease-swatch);
+}
+
+@media (hover: hover) {
+  :is(.mk-orbit-menu, mk-orbit-menu) [data-mk-orbit-item]:hover svg {
+    transform: scale(1.12);
+  }
+  :is(.mk-orbit-menu, mk-orbit-menu) [data-mk-orbit-item]:hover {
+    box-shadow: 0 22px 40px -14px rgb(0 0 0 / 0.28), 0 2px 6px -2px rgb(0 0 0 / 0.1);
+  }
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu) :is([data-mk-orbit-toggle], [data-mk-orbit-item]):focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+/* The three lines and their × . */
+[data-mk-orbit-burger] {
+  position: relative;
+  width: 1.5rem;
+  height: 1rem;
+}
+
+[data-mk-orbit-burger] i {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  border-radius: 2px;
+  background: currentColor;
+  transition:
+    transform 0.4s var(--mk-ease-swatch),
+    opacity 0.2s ease;
+}
+
+[data-mk-orbit-burger] i:nth-child(1) {
+  top: 0;
+}
+
+[data-mk-orbit-burger] i:nth-child(2) {
+  top: calc(50% - 1px);
+}
+
+[data-mk-orbit-burger] i:nth-child(3) {
+  bottom: 0;
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu)[data-mk-state='open'] [data-mk-orbit-burger] i:nth-child(1) {
+  transform: translateY(calc(0.5rem - 1px)) rotate(45deg);
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu)[data-mk-state='open'] [data-mk-orbit-burger] i:nth-child(2) {
+  opacity: 0;
+  transform: scaleX(0.2);
+}
+
+:is(.mk-orbit-menu, mk-orbit-menu)[data-mk-state='open'] [data-mk-orbit-burger] i:nth-child(3) {
+  transform: translateY(calc(-0.5rem + 1px)) rotate(-45deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-orbit-burger] i,
+  :is(.mk-orbit-menu, mk-orbit-menu) [data-mk-orbit-toggle],
+  :is(.mk-orbit-menu, mk-orbit-menu) svg {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :is(.mk-orbit-menu, mk-orbit-menu) :is([data-mk-orbit-toggle], [data-mk-orbit-item]) {
+    border: 1px solid ButtonText;
+  }
+}

package/dist/css/components/pagination.css

@@ -1,11 +1,16 @@
 /* components/pagination/pagination.css */
+/* pagination — round page buttons on surface-2; a pill (accent) glides under the current page; numbers that stay slide
+   when the window moves and new ones pop in; hover lifts, press squeezes. */
 .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 [data-mk-pagination-pages], mk-pagination [data-mk-pagination-pages] { position: relative; display: flex; align-items: center; gap: .25rem; isolation: isolate; }
+.mk-pagination button, mk-pagination button { position: relative; 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; font-variant-numeric: tabular-nums; cursor: pointer; transition: translate .3s cubic-bezier(.38,.49,0,1.5), background-color .25s, color .25s; }
 .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); }
+/* With the engine, the pill paints the current page and its button stays clear. */
+:is(.mk-pagination, mk-pagination)[data-mk-glide] button[aria-current] { background: transparent; }
+:is(.mk-pagination, mk-pagination) [data-mk-pagination-indicator] { position: absolute; top: 0; left: 0; z-index: -1; border-radius: var(--mk-radius-full); background: var(--mk-accent); pointer-events: none; }
+.mk-pagination button:hover:not(:disabled), mk-pagination button:hover:not(:disabled) { translate: 0 -3px; }
+.mk-pagination button:hover:not(:disabled):not([aria-current]), mk-pagination button:hover:not(:disabled):not([aria-current]) { background: var(--mk-surface-3); }
 .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; } }
+@media (prefers-reduced-motion: reduce) { .mk-pagination button, mk-pagination button { transition: none; translate: 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;
+  }
+}