@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/css/components/dialog.css

@@ -0,0 +1,259 @@
+/* components/dialog/dialog.css */
+/* dialog — Stepbro's modal surface: 400 px, radius 40, tonal surface; full screen under 680 px. */
+.mk-dialog {
+  --mk-dialog-bg: var(--mk-surface-2);
+  --mk-dialog-radius: var(--mk-radius-dialog);
+  --mk-dialog-width: 400px;
+  --mk-dialog-padding: 24px;
+  --mk-dialog-shadow: 0 24px 64px -16px rgb(0 0 0 / 0.35);
+  width: min(var(--mk-dialog-width), calc(100vw - 32px));
+  max-width: none;
+  max-height: min(88dvh, calc(100dvh - 32px));
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--mk-dialog-radius);
+  background: var(--mk-dialog-bg);
+  box-shadow: var(--mk-dialog-shadow);
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+.mk-dialog[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+.mk-dialog--sm {
+  --mk-dialog-width: 360px;
+}
+
+.mk-dialog--lg {
+  --mk-dialog-width: 640px;
+}
+
+.mk-dialog--xl {
+  --mk-dialog-width: 960px;
+}
+
+.mk-dialog::backdrop {
+  background: color-mix(in srgb, var(--mk-scrim, #000) 32%, transparent);
+  backdrop-filter: blur(4px);
+}
+
+.mk-dialog[data-mk-backdrop='none']::backdrop {
+  background: transparent;
+  backdrop-filter: none;
+}
+
+/* Parts */
+.mk-dialog [data-mk-part='header'] {
+  display: flex;
+  flex: none;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: var(--mk-dialog-padding) var(--mk-dialog-padding) 12px;
+}
+
+.mk-dialog [data-mk-part='header'] > :first-child {
+  min-width: 0;
+}
+
+.mk-dialog [data-mk-part='title'] {
+  margin: 0;
+  font-family: var(--md-sys-typescale-headline-small-font);
+  font-size: var(--md-sys-typescale-headline-small-size);
+  line-height: var(--md-sys-typescale-headline-small-line-height);
+  font-weight: var(--md-sys-typescale-headline-small-weight);
+  letter-spacing: -0.01em;
+}
+
+.mk-dialog [data-mk-part='description'] {
+  margin: 4px 0 0;
+  color: var(--mk-muted);
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+}
+
+.mk-dialog [data-mk-part='actions'] {
+  display: flex;
+  flex: none;
+  gap: 4px;
+}
+
+.mk-dialog [data-mk-part='body'] {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 4px var(--mk-dialog-padding) var(--mk-dialog-padding);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+.mk-dialog [data-mk-part='footer'] {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px var(--mk-dialog-padding) var(--mk-dialog-padding);
+}
+
+.mk-dialog :is([data-mk-part='close'], [data-mk-part='handle']) {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  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;
+}
+
+.mk-dialog :is([data-mk-part='close'], [data-mk-part='handle']):hover {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  color: var(--mk-text);
+}
+
+.mk-dialog :is([data-mk-part='close'], [data-mk-part='handle']):focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+/* Container transform helpers (motion/morph.ts). */
+.mk-morph-face {
+  position: absolute;
+  inset: 0;
+  z-index: 2147483647;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+/* The opener hides as its surface starts (80 ms) and stays out of reach while inside it. */
+[data-mk-morph-origin] {
+  opacity: 0 !important;
+  transition: opacity 80ms ease !important;
+  pointer-events: none;
+}
+
+[data-mk-shared-hidden] {
+  opacity: 0 !important;
+}
+
+/* Placement */
+.mk-dialog[data-mk-placement='anchor'] {
+  max-height: calc(100dvh - 32px);
+}
+
+.mk-dialog[data-mk-placement='side'] {
+  position: fixed;
+  inset: 8px 8px 8px auto;
+  width: min(440px, calc(100vw - 16px));
+  height: calc(100dvh - 16px);
+  max-height: none;
+  margin: 0;
+}
+
+/* Floating window (motion/floating.ts) */
+.mk-dialog:popover-open {
+  display: flex;
+  flex-direction: column;
+}
+
+.mk-dialog.is-floating {
+  z-index: 50;
+  box-shadow: rgb(0 0 0 / 0.24) 0 0 24px -6px;
+}
+
+.mk-float-corner {
+  position: absolute;
+  z-index: 3;
+  display: none;
+  width: 18px;
+  height: 18px;
+}
+
+.mk-dialog.is-floating .mk-float-corner {
+  display: block;
+}
+
+.mk-float-corner[data-mk-float-corner='tl'] {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+}
+
+.mk-float-corner[data-mk-float-corner='br'] {
+  right: 0;
+  bottom: 0;
+  cursor: nwse-resize;
+}
+
+.mk-float-corner[data-mk-float-corner='tr'] {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+}
+
+.mk-float-corner[data-mk-float-corner='bl'] {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+}
+
+/* The custom element only wraps its <dialog>; before it is defined its content stays hidden. */
+mk-dialog {
+  display: contents;
+}
+
+mk-dialog:not(:defined) {
+  display: none;
+}
+
+/* Phones: dialogs take the whole screen with square corners (Stepbro's responsive rules). */
+@media (max-width: 679px) {
+  .mk-dialog:not([data-mk-placement='anchor']) {
+    width: 100vw;
+    height: 100dvh;
+    max-height: none;
+    margin: 0;
+    border-radius: 0;
+    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
+  }
+
+  .mk-dialog [data-mk-part='handle'] {
+    display: none;
+  }
+
+  .mk-dialog [data-mk-part='footer'] {
+    padding-bottom: calc(var(--mk-dialog-padding) + env(safe-area-inset-bottom));
+  }
+}
+
+/* Sheet (Dousan): pinned to the bottom, up to 720 px wide, rises from below. Also on phones. */
+.mk-dialog[data-mk-variant='sheet'] {
+  --mk-dialog-width: var(--mk-sheet-max-width, 720px);
+  /* A modal <dialog> is inset: 0 — anchored only to the bottom, it takes its content's height. */
+  inset: auto 0 0;
+  width: min(var(--mk-dialog-width), 100vw);
+  height: auto;
+  max-height: calc(100dvh - 24px);
+  margin: 0 auto;
+  padding: 0 0 env(safe-area-inset-bottom);
+  border-radius: var(--mk-dialog-radius) var(--mk-dialog-radius) 0 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-dialog :is([data-mk-part='close'], [data-mk-part='handle']) {
+    transition: none;
+  }
+}

package/dist/css/components/island.css

@@ -0,0 +1,301 @@
+/* components/island/island.css */
+/*
+ * iyo.ai's floating navbar: frosted glass pill at the top that grows into a
+ * panel. Fixed over the page by default; .mk-island--contained keeps it (and its
+ * backdrop) inside a positioned parent, for previews.
+ */
+:is(.mk-island, mk-island) {
+  --mk-island-width: 23.5rem;
+  --mk-island-top: 2rem;
+  --mk-island-fg: #f9f9fb;
+  --mk-island-glass: #38383899;
+  --mk-island-tint: linear-gradient(141deg, #a9c2f214, #62718c24);
+  --mk-island-blur: 20px;
+  --mk-island-button: #11111180;
+  --mk-island-button-active: #111c;
+  --mk-island-button-light: #d9d9d980;
+  --mk-island-button-light-active: #d9d9d9cc;
+  --mk-island-line: #dddee34d;
+  --mk-ease-island: cubic-bezier(0.625, 0.05, 0, 1);
+  --mk-ease-island-radius: cubic-bezier(0.4, 0, 0.2, 1);
+  --mk-ease-island-veil: cubic-bezier(0.5, 0.5, 0, 1);
+  position: fixed;
+  inset: 0;
+  z-index: 500;
+  display: block;
+  pointer-events: none;
+  color: var(--mk-island-fg);
+}
+.mk-island--contained {
+  position: absolute;
+  z-index: 2;
+}
+.mk-island__shell {
+  position: absolute;
+  top: var(--mk-island-top);
+  right: 0;
+  left: 0;
+  width: var(--mk-island-width);
+  max-width: calc(100% - 2rem);
+  margin-inline: auto;
+  border-radius: 3em;
+  isolation: isolate;
+  transition: border-radius 0.4s var(--mk-ease-island-radius) 0.45s;
+}
+.mk-island__glass {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background-color: var(--mk-island-glass);
+  background-image: var(--mk-island-tint);
+  -webkit-backdrop-filter: blur(var(--mk-island-blur));
+  backdrop-filter: blur(var(--mk-island-blur));
+  pointer-events: none;
+}
+.mk-island__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  padding: 0.7rem 0.7rem 0.7rem 1.625rem;
+  pointer-events: auto;
+}
+.mk-island__brand {
+  color: inherit;
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: -0.07em;
+  text-decoration: none;
+}
+.mk-island__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+.mk-island__button {
+  display: grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--mk-island-button);
+  color: #fff;
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+.mk-island__button--light {
+  background: var(--mk-island-button-light);
+  color: #101010;
+}
+:is(.mk-island, mk-island)[data-mk-active] .mk-island__button[aria-expanded='true'] {
+  background: var(--mk-island-button-active);
+}
+:is(.mk-island, mk-island)[data-mk-active] .mk-island__button--light[aria-expanded='true'] {
+  background: var(--mk-island-button-light-active);
+}
+:is(.mk-island, mk-island) :is(.mk-island__button, a):focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 4px;
+}
+.mk-island__dots {
+  display: grid;
+  grid-template-columns: repeat(3, 3.5px);
+  gap: 2.5px;
+}
+.mk-island__dots > i {
+  width: 3.5px;
+  height: 3.5px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.mk-island__separator {
+  width: 1px;
+  height: 1.2rem;
+  background: var(--mk-island-line);
+}
+.mk-island__cta {
+  color: inherit;
+  font-size: 0.75rem;
+  text-decoration: none;
+  transition: opacity 0.3s ease-out;
+}
+:is(.mk-island, mk-island)[data-mk-open] .mk-island__cta {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* The panel: grid rows 0fr → 1fr, 0.125 s after the radius starts to change. */
+.mk-island__content {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition:
+    grid-template-rows 0.6s var(--mk-ease-island),
+    border-radius 0.4s var(--mk-ease-island-radius) 0.35s;
+}
+.mk-island__content > * {
+  min-height: 0;
+  overflow: hidden;
+  pointer-events: auto;
+}
+:is(.mk-island, mk-island)[data-mk-open] .mk-island__shell {
+  border-radius: 2em;
+  transition-delay: 0s;
+}
+:is(.mk-island, mk-island)[data-mk-open] .mk-island__content {
+  grid-template-rows: 1fr;
+  border-radius: 2em;
+  transition-delay: 0.125s, 0s;
+}
+.mk-island__panel {
+  max-height: calc(100dvh - 9rem);
+  padding: 1rem 2rem 1.5rem;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.mk-island__panel:focus {
+  outline: none;
+}
+:is(.mk-island, mk-island) [data-mk-island-panel][hidden] {
+  display: none;
+}
+:is(.mk-island, mk-island) [data-mk-island-item] {
+  opacity: 0;
+  transform: translateY(3em);
+  transition:
+    transform 0.6s var(--mk-ease-island),
+    opacity 0.6s var(--mk-ease-island);
+  transition-delay: var(--mk-island-delay, 0s);
+}
+:is(.mk-island, mk-island)[data-mk-open] [data-mk-island-item] {
+  opacity: 1;
+  transform: none;
+}
+.mk-island__row {
+  display: flex;
+  gap: 0.35rem;
+  margin-bottom: 0.35rem;
+}
+.mk-island__foot {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  padding-top: 1rem;
+  font-size: 0.6rem;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  opacity: 0.55;
+}
+
+/* Cards: hovering one dims the others to 20 %; its picture grows to 1.04. */
+.mk-island-card {
+  display: flex;
+  flex: 1;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-width: 0;
+  min-height: 5rem;
+  padding: 1rem 0.8rem;
+  border-radius: 0.8rem;
+  background: linear-gradient(129deg, #fff3e2, #fff);
+  color: #101010;
+  text-decoration: none;
+  overflow: clip;
+  transition: opacity 0.15s ease-out;
+}
+.mk-island-card[aria-current='page'] {
+  opacity: 0.2;
+  pointer-events: none;
+}
+.mk-island-card__visual {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 50%;
+  background: linear-gradient(150deg, #e0e0ed, #888b96);
+  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+.mk-island__panel:has(.mk-island-card:is(:hover, :focus-visible)) .mk-island-card {
+  opacity: 0.2;
+}
+.mk-island__panel:has(.mk-island-card:is(:hover, :focus-visible)) .mk-island-card:is(:hover, :focus-visible) {
+  opacity: 1;
+}
+.mk-island-card:is(:hover, :focus-visible) .mk-island-card__visual {
+  transform: scale(1.04);
+  transition-duration: 0.4s;
+}
+
+/* The page behind darkens to .4. */
+.mk-island__backdrop {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: #000;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: auto;
+  transition:
+    opacity 0.7s var(--mk-ease-island-veil),
+    visibility 0.7s;
+}
+:is(.mk-island, mk-island)[data-mk-open] .mk-island__backdrop {
+  opacity: 0.4;
+  visibility: visible;
+  transition-delay: 0.1s;
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .mk-island__glass {
+    background-color: #35363ded;
+  }
+}
+@media (min-width: 1920px) {
+  :is(.mk-island, mk-island) {
+    --mk-island-width: 28rem;
+  }
+  .mk-island__header {
+    padding: 0.96em 0.96em 0.96em 1.95em;
+  }
+  .mk-island__button {
+    width: 3.12rem;
+    height: 3.12rem;
+  }
+}
+@media (max-width: 767px) {
+  .mk-island__shell {
+    top: 1.5rem;
+    right: 1rem;
+    left: 1rem;
+    width: auto;
+    max-width: none;
+    margin: 0;
+  }
+}
+@media (max-width: 479px) {
+  .mk-island__shell {
+    top: 6vw;
+    right: 5vw;
+    left: 5vw;
+  }
+  .mk-island__panel {
+    padding-inline: 1.25rem;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-island, mk-island) *,
+  :is(.mk-island, mk-island) *::before,
+  :is(.mk-island, mk-island) *::after {
+    transition: none !important;
+  }
+}

package/dist/css/components/menu.css

@@ -0,0 +1,105 @@
+/* components/menu/menu.css */
+/* menu — Stepbro's translucent options panel that grows out of its button (an anchored .mk-dialog). */
+.mk-menu {
+  --mk-menu-bg: color-mix(in srgb, var(--mk-surface-3) 78%, transparent);
+  --mk-menu-radius: 28px;
+  --mk-menu-item-radius: 20px;
+  --mk-dialog-bg: var(--mk-menu-bg);
+  --mk-dialog-radius: var(--mk-menu-radius);
+  --mk-dialog-shadow: 0 16px 48px -12px rgb(0 0 0 / 0.35);
+  width: max-content;
+  min-width: 220px;
+  max-width: min(320px, calc(100vw - 32px));
+  padding: 8px;
+  backdrop-filter: blur(24px) saturate(1.6);
+  -webkit-backdrop-filter: blur(24px) saturate(1.6);
+}
+
+.mk-menu[open] {
+  gap: 2px;
+}
+
+.mk-menu [data-mk-item] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 48px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: var(--mk-menu-item-radius);
+  background: transparent;
+  color: var(--mk-text);
+  font-family: var(--md-sys-typescale-body-large-font);
+  font-size: var(--md-sys-typescale-label-large-size);
+  font-weight: var(--md-sys-typescale-label-large-weight);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  text-align: left;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.15s linear;
+}
+
+.mk-menu [data-mk-item]:hover,
+.mk-menu [data-mk-item]:focus-visible {
+  background: color-mix(in srgb, var(--mk-text) 8%, transparent);
+}
+
+.mk-menu [data-mk-item]:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--mk-accent);
+}
+
+.mk-menu [data-mk-item][aria-disabled='true'],
+.mk-menu [data-mk-item]:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
+
+.mk-menu [data-mk-item] .mk-icon,
+.mk-menu [data-mk-item] svg {
+  flex: none;
+  color: var(--mk-muted);
+  font-size: 20px;
+}
+
+.mk-menu [data-mk-separator] {
+  height: 1px;
+  margin: 6px 12px;
+  border: 0;
+  background: var(--mk-outline-soft);
+}
+
+.mk-menu [data-mk-label] {
+  padding: 8px 16px 4px;
+  color: var(--mk-muted);
+  font-size: var(--md-sys-typescale-label-medium-size);
+  font-weight: var(--md-sys-typescale-label-medium-weight);
+}
+
+mk-menu {
+  display: contents;
+}
+
+.mk-menu[data-mk-ticket] {
+  --mk-menu-radius: 2px;
+  --mk-menu-item-radius: 0px;
+  --mk-menu-bg: var(--mk-surface-1);
+  padding: 20px;
+  min-width: 280px;
+  border-block: 6px dotted var(--mk-outline-soft);
+  backdrop-filter: none;
+}
+.mk-menu[data-mk-ticket] [data-mk-item] { border-bottom: 1px dashed var(--mk-outline-soft); min-height: 64px; font-size: 20px; }
+
+mk-menu:not(:defined) {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-menu [data-mk-item] {
+    transition: none;
+  }
+}