@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/css/components/steps.css

@@ -0,0 +1,50 @@
+/* components/steps/steps.css */
+/* steps — Stepbro's onboarding: one step at a time, centred in a column up to 600 px wide. */
+.mk-steps,
+mk-steps {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  min-height: 0;
+  color: var(--md-sys-color-on-background);
+  font-family: var(--mk-font);
+}
+
+/* Stepbro's onboarding background runs at 20 %. */
+:is(.mk-steps, mk-steps) > :is(.mk-chat-background, mk-chat-background) {
+  --mk-chat-background-opacity: 0.2;
+}
+
+.mk-steps__track {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  width: 100%;
+  max-width: 600px;
+}
+
+[data-mk-step] {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: space-around;
+}
+
+/* A step's own display never brings a hidden step back. */
+[data-mk-step][hidden] {
+  display: none !important;
+}
+
+[data-mk-step-title]:focus,
+[data-mk-step] :is(h1, h2, h3, h4, h5, h6)[tabindex='-1']:focus {
+  outline: none;
+}
+
+[data-mk-counter] {
+  font-variant-numeric: tabular-nums;
+}

package/dist/css/components/theme-picker.css

@@ -0,0 +1,115 @@
+/* components/theme-picker/theme-picker.css */
+/* theme-picker — Stepbro's colour balls (from Kayro's accent swatches). */
+.mk-theme-picker,
+mk-theme-picker {
+  --mk-swatch-size: 72px;
+  --mk-swatch-gap: 12px;
+  /* Flex, not grid: it must not collapse to one column inside shrink-to-fit parents. */
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mk-swatch-gap);
+}
+
+.mk-swatch {
+  position: relative;
+  display: block;
+  width: var(--mk-swatch-size, 72px);
+  aspect-ratio: 1;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 50%;
+  background: var(--mk-swatch, var(--mk-accent));
+  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--mk-text) 10%, transparent);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.5s ease,
+    border-radius 0.5s var(--mk-ease-swatch),
+    filter 0.3s ease;
+}
+
+@media (hover: hover) {
+  .mk-swatch:hover {
+    border-radius: 32px;
+    box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--mk-text) 20%, transparent);
+    filter: saturate(1.5);
+  }
+}
+
+.mk-swatch:active {
+  transform: scale(0.95);
+}
+
+.mk-swatch[aria-pressed='true'] {
+  border-radius: 16px;
+  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--mk-text) 30%, transparent);
+  filter: saturate(1.1);
+}
+
+.mk-swatch:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+/* Two blurred lights that drift on hover. */
+.mk-swatch::before,
+.mk-swatch::after {
+  position: absolute;
+  aspect-ratio: 1;
+  border-radius: 32px;
+  content: '';
+  pointer-events: none;
+  transition:
+    left 3.5s var(--mk-ease-swatch-light),
+    top 3.5s var(--mk-ease-swatch-light),
+    bottom 3.5s var(--mk-ease-swatch-light),
+    width 3.5s var(--mk-ease-swatch-light),
+    height 3.5s var(--mk-ease-swatch-light),
+    background 4.5s var(--mk-ease-swatch-light);
+}
+
+.mk-swatch::before {
+  bottom: 50%;
+  left: 50%;
+  width: 50%;
+  height: 50%;
+  background: rgb(255 255 255 / 0.2);
+  filter: blur(8px);
+}
+
+.mk-swatch::after {
+  top: 50%;
+  left: 50%;
+  width: 60%;
+  height: 60%;
+  background: rgb(255 255 255 / 0.4);
+  filter: blur(16px);
+}
+
+@media (hover: hover) {
+  .mk-swatch:hover::before {
+    left: 0%;
+    background: rgb(255 255 255 / 0.4);
+  }
+
+  .mk-swatch:hover::after {
+    top: 25%;
+    left: 25%;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-swatch,
+  .mk-swatch::before,
+  .mk-swatch::after {
+    transition: none;
+  }
+
+  .mk-swatch:active {
+    transform: none;
+  }
+}

package/dist/css/components/toast.css

@@ -0,0 +1,115 @@
+/* components/toast/toast.css */
+/* toast — Stepbro's deck at the top of the screen, above dialogs (top layer when popovers exist). */
+.mk-toaster {
+  position: fixed;
+  inset: 16px 0 auto;
+  z-index: 2147483000;
+  width: 100%;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  background: transparent;
+  pointer-events: none;
+}
+
+.mk-toaster:popover-open {
+  display: block;
+}
+
+mk-toaster {
+  display: contents;
+}
+
+.mk-toast {
+  --mk-toast-bg: var(--mk-surface-4);
+  --mk-toast-radius: 20px;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  max-width: min(420px, calc(100vw - 32px));
+  transform-origin: 50% 0;
+  touch-action: none;
+  pointer-events: auto;
+}
+
+.mk-toast__shell {
+  overflow: hidden;
+  border-radius: var(--mk-toast-radius);
+  background: var(--mk-toast-bg);
+  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.35);
+  color: var(--mk-text);
+}
+
+.mk-toast__body {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 48px;
+  padding: 8px 8px 8px 16px;
+  font-family: var(--mk-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);
+  white-space: nowrap;
+}
+
+.mk-toast__icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  color: var(--mk-accent);
+}
+
+.mk-toast[data-mk-tone='error'] .mk-toast__icon {
+  color: var(--mk-error);
+}
+
+.mk-toast[data-mk-tone='info'] .mk-toast__icon {
+  color: var(--mk-muted);
+}
+
+.mk-toast__message {
+  flex: 1;
+}
+
+.mk-toast__action {
+  flex: none;
+  height: 32px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: transparent;
+  color: var(--mk-accent);
+  font: inherit;
+  cursor: pointer;
+}
+
+.mk-toast__action:hover {
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.mk-toast__dismiss {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--mk-muted);
+  cursor: pointer;
+}
+
+.mk-toast__dismiss:hover {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  color: var(--mk-text);
+}
+
+.mk-toast :is(.mk-toast__action, .mk-toast__dismiss):focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 1px;
+}