@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/css/controls.css

@@ -0,0 +1,950 @@
+/* css/controls/button.css */
+/* .mk-button — Stepbro capsules. Default is the tonal primary container Stepbro uses on filled buttons. */
+.mk-button {
+  --mk-button-bg: var(--mk-accent-soft);
+  --mk-button-fg: var(--mk-on-accent-soft);
+  --mk-button-height: 40px;
+  --mk-button-padding: 24px;
+  --mk-button-radius: var(--mk-radius-full);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: var(--mk-button-height);
+  padding: 0 var(--mk-button-padding);
+  border: 0;
+  border-radius: var(--mk-button-radius);
+  background: var(--mk-button-bg);
+  color: var(--mk-button-fg);
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-size: var(--md-sys-typescale-label-large-size);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  font-weight: var(--md-sys-typescale-label-large-weight);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  isolation: isolate;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    transform 0.2s var(--mk-ease-signature),
+    border-radius 0.3s var(--mk-ease-signature),
+    background-color 0.25s ease,
+    color 0.25s ease;
+}
+
+/* Material state layer: the label colour at 8 % on hover, 10 % on focus and press. */
+.mk-button::before {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: currentColor;
+  content: '';
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s linear;
+}
+
+@media (hover: hover) {
+  .mk-button:hover::before {
+    opacity: 0.08;
+  }
+}
+
+.mk-button:focus-visible::before,
+.mk-button:active::before {
+  opacity: 0.1;
+}
+
+.mk-button:active {
+  transform: scale(0.97);
+}
+
+.mk-button:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+.mk-button:disabled,
+.mk-button[aria-disabled='true'] {
+  opacity: 0.38;
+  pointer-events: none;
+}
+
+.mk-button .mk-icon {
+  font-size: 18px;
+}
+
+.mk-button--primary {
+  --mk-button-bg: var(--mk-accent);
+  --mk-button-fg: var(--mk-on-accent);
+}
+
+.mk-button--tonal {
+  --mk-button-bg: var(--mk-secondary-soft);
+  --mk-button-fg: var(--mk-on-secondary-soft);
+}
+
+.mk-button--outlined {
+  --mk-button-bg: transparent;
+  --mk-button-fg: var(--mk-accent);
+  box-shadow: inset 0 0 0 1px var(--mk-outline-soft);
+}
+
+.mk-button--text {
+  --mk-button-bg: transparent;
+  --mk-button-fg: var(--mk-accent);
+  --mk-button-padding: 12px;
+}
+
+.mk-button--icon {
+  --mk-button-padding: 0;
+  width: var(--mk-button-height);
+  aspect-ratio: 1;
+}
+
+.mk-button--icon .mk-icon {
+  font-size: 24px;
+}
+
+/* Stepbro's small buttons: 32 px, 16 px sides, radius 12. */
+.mk-button--sm {
+  --mk-button-height: 32px;
+  --mk-button-padding: 16px;
+  --mk-button-radius: var(--mk-radius-sm);
+}
+
+.mk-button--lg {
+  --mk-button-height: 48px;
+  --mk-button-padding: 32px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-button,
+  .mk-button::before {
+    transition: none;
+  }
+
+  .mk-button:active {
+    transform: none;
+  }
+}
+
+/* Stepbro's press squash (buttonClickAnimation), on pointer focus only so tabbing does not bounce. */
+.mk-button:focus:not(:focus-visible) {
+  animation: mk-press 0.5s cubic-bezier(0.37, 1.42, 0.37, 1);
+}
+
+@keyframes mk-press {
+  0% {
+    transform: scaleX(1) scaleY(1);
+  }
+
+  50% {
+    transform: scaleX(0.95) scaleY(0.9);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}
+
+/* Rolling label (Siena's Explore button): the text and its copy roll up, the arrow slides on, the fill inverts. */
+.mk-button--roll {
+  overflow: hidden;
+  background: transparent;
+  box-shadow: inset 0 0 0 1px currentColor;
+  color: var(--mk-text);
+  transition:
+    background-color 0.8s var(--mk-ease-quint),
+    color 0.8s var(--mk-ease-quint) 0.1s;
+}
+
+.mk-button--roll::before {
+  display: none;
+}
+
+.mk-roll {
+  position: relative;
+  display: inline-block;
+  transition: transform 0.8s var(--mk-ease-quint) 0.1s;
+}
+
+.mk-roll::after {
+  position: absolute;
+  inset: 150% 0 auto;
+  content: attr(data-text);
+}
+
+.mk-roll__arrow {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.mk-roll__arrow > * {
+  position: relative;
+  transition: transform 0.8s var(--mk-ease-quint);
+}
+
+.mk-roll__arrow > *::before {
+  position: absolute;
+  right: 100%;
+  content: attr(data-icon);
+}
+
+@media (hover: hover) {
+  .mk-button--roll:hover {
+    background-color: var(--mk-text);
+    color: var(--mk-bg);
+  }
+
+  .mk-button--roll:hover .mk-roll {
+    transform: translateY(-150%);
+  }
+
+  .mk-button--roll:hover .mk-roll__arrow > * {
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-button:focus:not(:focus-visible) {
+    animation: none;
+  }
+
+  .mk-roll,
+  .mk-roll__arrow > * {
+    transition: none;
+  }
+
+  .mk-button--roll:hover .mk-roll,
+  .mk-button--roll:hover .mk-roll__arrow > * {
+    transform: none;
+  }
+}
+
+/* css/controls/field.css */
+/*
+ * .mk-field — Stepbro's filled fields: container-high background, radius 16,
+ * no bottom indicator; focus draws a ring in the accent colour.
+ * <label class="mk-field"><span class="mk-field__label">…</span><input>…<span class="mk-field__hint">…</span></label>
+ */
+.mk-field {
+  --mk-field-bg: var(--mk-surface-4);
+  --mk-field-radius: var(--mk-radius-md);
+  display: grid;
+  gap: 6px;
+  min-width: 0;
+}
+
+.mk-field__label {
+  color: var(--mk-muted);
+  font-family: var(--md-sys-typescale-label-medium-font);
+  font-size: var(--md-sys-typescale-label-medium-size);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
+  font-weight: var(--md-sys-typescale-label-medium-weight);
+  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+}
+
+.mk-field :is(input, textarea, select) {
+  width: 100%;
+  min-height: 56px;
+  margin: 0;
+  padding: 16px;
+  border: 0;
+  border-radius: var(--mk-field-radius);
+  background-color: var(--mk-field-bg);
+  color: var(--mk-text);
+  font-family: var(--md-sys-typescale-body-large-font);
+  font-size: var(--md-sys-typescale-body-large-size);
+  line-height: var(--md-sys-typescale-body-large-line-height);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+  outline: none;
+  appearance: none;
+  transition:
+    box-shadow 0.2s ease,
+    background-color 0.25s ease;
+}
+
+.mk-field textarea {
+  min-height: 96px;
+  resize: vertical;
+}
+
+/* A caret drawn with gradients so it follows the text colour. */
+.mk-field select {
+  padding-right: 44px;
+  background-image:
+    linear-gradient(45deg, transparent 50%, currentColor 50%),
+    linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position:
+    calc(100% - 22px) 50%,
+    calc(100% - 17px) 50%;
+  background-size: 5px 5px;
+  background-repeat: no-repeat;
+}
+
+.mk-field :is(input, textarea, select)::placeholder {
+  color: var(--mk-muted);
+  opacity: 0.7;
+}
+
+.mk-field :is(input, textarea, select):focus-visible {
+  box-shadow: inset 0 0 0 2px var(--mk-accent);
+}
+
+.mk-field :is(input, textarea, select):disabled {
+  opacity: 0.38;
+}
+
+.mk-field :is(input, textarea, select)[aria-invalid='true'] {
+  background-color: var(--mk-error-soft);
+  color: var(--mk-on-error-soft);
+  animation: mk-vibrate 0.3s;
+}
+
+/* Stepbro's error vibration: plays each time the field becomes invalid. */
+@keyframes mk-vibrate {
+  0% {
+    transform: translate(0);
+  }
+
+  20% {
+    transform: translate(-5px);
+  }
+
+  40% {
+    transform: translate(5px);
+  }
+
+  60% {
+    transform: translate(-5px);
+  }
+
+  80% {
+    transform: translate(5px);
+  }
+
+  to {
+    transform: translate(0);
+  }
+}
+
+.mk-field__hint {
+  color: var(--mk-muted);
+  font-family: var(--md-sys-typescale-body-small-font);
+  font-size: var(--md-sys-typescale-body-small-size);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  letter-spacing: var(--md-sys-typescale-body-small-tracking);
+}
+
+.mk-field:has([aria-invalid='true']) .mk-field__hint {
+  color: var(--mk-error);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-field :is(input, textarea, select) {
+    transition: none;
+    animation: none;
+  }
+}
+
+/* css/controls/switch.css */
+/* .mk-switch — <input type="checkbox" role="switch" class="mk-switch">. The thumb grows from 16 to 24 px when on. */
+.mk-switch {
+  position: relative;
+  flex: none;
+  width: 52px;
+  height: 32px;
+  margin: 0;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-surface-5);
+  box-shadow: inset 0 0 0 2px var(--mk-outline);
+  cursor: pointer;
+  appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    background-color 0.3s var(--mk-ease-signature),
+    box-shadow 0.3s ease;
+}
+
+.mk-switch::before {
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--mk-outline);
+  content: '';
+  translate: 0 -50%;
+  transition:
+    left 0.3s var(--mk-ease-signature),
+    width 0.3s var(--mk-ease-signature),
+    height 0.3s var(--mk-ease-signature),
+    background-color 0.3s ease;
+}
+
+.mk-switch:checked {
+  background: var(--mk-accent);
+  box-shadow: none;
+}
+
+.mk-switch:checked::before {
+  left: 24px;
+  width: 24px;
+  height: 24px;
+  background: var(--mk-on-accent);
+}
+
+.mk-switch:active::before {
+  width: 28px;
+  height: 28px;
+}
+
+.mk-switch:checked:active::before {
+  left: 22px;
+}
+
+.mk-switch:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+.mk-switch:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-switch,
+  .mk-switch::before {
+    transition: none;
+  }
+}
+
+/* css/controls/checkbox.css */
+/* .mk-checkbox — <input type="checkbox" class="mk-checkbox">: 18 px, radius 6 (Stepbro), check drawn in on-accent. */
+.mk-checkbox {
+  position: relative;
+  display: inline-grid;
+  flex: none;
+  place-content: center;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 2px var(--mk-outline);
+  cursor: pointer;
+  appearance: none;
+  transition:
+    background-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.mk-checkbox::before {
+  width: 12px;
+  height: 12px;
+  background: var(--mk-on-accent);
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+  content: '';
+  transform: scale(0);
+  transition: transform 0.2s var(--mk-ease-signature);
+}
+
+.mk-checkbox:checked {
+  background: var(--mk-accent);
+  box-shadow: none;
+}
+
+.mk-checkbox:checked::before {
+  transform: scale(1);
+}
+
+.mk-checkbox:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+.mk-checkbox:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-checkbox,
+  .mk-checkbox::before {
+    transition: none;
+  }
+}
+
+/* css/controls/chip.css */
+/* .mk-chip — capsules on container-high; a pressed filter chip takes the primary container (Stepbro filter chips). */
+.mk-chip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-surface-4);
+  color: var(--mk-text);
+  font-family: var(--md-sys-typescale-label-large-font);
+  font-size: var(--md-sys-typescale-label-large-size);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  font-weight: var(--md-sys-typescale-label-large-weight);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  white-space: nowrap;
+  cursor: pointer;
+  isolation: isolate;
+  transition:
+    background-color 0.25s ease,
+    color 0.25s ease;
+}
+
+.mk-chip::before {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background: currentColor;
+  content: '';
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s linear;
+}
+
+@media (hover: hover) {
+  .mk-chip:hover::before {
+    opacity: 0.08;
+  }
+}
+
+.mk-chip:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+.mk-chip .mk-icon {
+  font-size: 18px;
+}
+
+.mk-chip--filter[aria-pressed='true'] {
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft);
+}
+
+/* Input chip: the remove button sits at the end. */
+.mk-chip--input {
+  padding-right: 6px;
+}
+
+.mk-chip__remove {
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.mk-chip__remove:hover {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-chip,
+  .mk-chip::before {
+    transition: none;
+  }
+}
+
+/* css/controls/segmented.css */
+/*
+ * .mk-segmented — a capsule group whose indicator slides (pair it with the `tabs` recipe:
+ * data-mk="tabs", [data-mk-tab] buttons and a [data-mk-indicator]).
+ */
+.mk-segmented {
+  position: relative;
+  display: inline-flex;
+  width: fit-content;
+  max-width: 100%;
+  padding: 4px;
+  overflow-x: auto;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-surface-3);
+  isolation: isolate;
+  scrollbar-width: none;
+}
+
+.mk-segmented > :is(button, a, [data-mk-tab]) {
+  position: relative;
+  z-index: 1;
+  flex: none;
+  height: 40px;
+  padding: 0 16px;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: transparent;
+  color: var(--mk-muted);
+  font-family: var(--md-sys-typescale-label-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-decoration: none;
+  cursor: pointer;
+  transition: color 0.25s ease;
+}
+
+.mk-segmented > [aria-selected='true'] {
+  color: var(--mk-on-accent-soft);
+}
+
+.mk-segmented > :is(button, a, [data-mk-tab]):focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: -2px;
+}
+
+.mk-segmented > [data-mk-indicator] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  border-radius: var(--mk-radius-full);
+  background: var(--mk-accent-soft);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-segmented > * {
+    transition: none;
+  }
+}
+
+/* css/controls/icon.css */
+/* .mk-icon — Material Symbols Rounded by ligature (<span class="mk-icon">home</span>); css/fonts.css loads the font. */
+.mk-icon {
+  display: inline-block;
+  font-family: 'Material Symbols Rounded';
+  font-size: 24px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  white-space: nowrap;
+  overflow-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  font-variation-settings:
+    'FILL' var(--mk-icon-fill, 0),
+    'wght' var(--mk-icon-weight, 400),
+    'GRAD' 0,
+    'opsz' 24;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+}
+
+.mk-icon--fill {
+  --mk-icon-fill: 1;
+}
+
+/* css/controls/glass.css */
+/*
+ * .mk-glass — Dousan Miao's glass in one element: a translucent surface with a
+ * 4 px backdrop blur, an optical ring (::before) whose conic highlight turns
+ * from −75° to −125° on hover, and a specular band (::after) that slides and
+ * tilts when pressed. <span class="mk-glass__shadow" aria-hidden="true"> inside
+ * adds Dousan's gradient shadow. Colours follow the theme's scheme (light-dark()).
+ */
+@property --mk-glass-angle-1 {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: -75deg;
+}
+
+@property --mk-glass-angle-2 {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: -45deg;
+}
+
+.mk-glass {
+  --mk-glass-blur: 4px;
+  --mk-glass-border: clamp(1px, 0.0625em, 4px);
+  --mk-glass-tint: rgb(255 255 255 / 55%);
+  --mk-glass-edge: light-dark(rgb(255 255 255 / 5%), rgb(255 255 255 / 2%));
+  --mk-glass-middle: light-dark(rgb(255 255 255 / 22%), rgb(255 255 255 / 8%));
+  --mk-glass-ring: light-dark(rgb(0 0 0 / 50%), rgb(255 255 255 / 70%));
+  --mk-glass-ring-top: light-dark(rgb(255 255 255 / 50%), rgb(255 255 255 / 20%));
+  --mk-glass-ring-bottom: light-dark(rgb(255 255 255 / 50%), rgb(255 255 255 / 10%));
+  --mk-glass-shadow:
+    inset 0 0.125em 0.125em light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 5%)),
+    inset 0 -0.125em 0.125em light-dark(rgb(255 255 255 / 50%), rgb(255 255 255 / 25%)),
+    0 0.25em 0.125em -0.125em light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 70%)),
+    0 0 0.1em 0.25em inset light-dark(rgb(255 255 255 / 20%), rgb(255 255 255 / 15%)),
+    0 0 0 0 light-dark(rgb(255 255 255), rgb(255 255 255 / 10%));
+  --mk-glass-shadow-hover:
+    inset 0 0.125em 0.125em light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 8%)),
+    inset 0 -0.125em 0.125em light-dark(rgb(255 255 255 / 50%), rgb(255 255 255 / 35%)),
+    0 0.15em 0.05em -0.1em light-dark(rgb(0 0 0 / 25%), rgb(0 0 0 / 90%)),
+    0 0 0.05em 0.1em inset light-dark(rgb(255 255 255 / 50%), rgb(255 255 255 / 35%)),
+    0 0 0 0 light-dark(rgb(255 255 255), rgb(255 255 255 / 20%));
+  --mk-glass-shadow-active:
+    inset 0 0.125em 0.125em rgb(0 0 0 / 5%), inset 0 -0.125em 0.125em rgb(255 255 255 / 50%), 0 0.125em 0.125em -0.125em rgb(0 0 0 / 20%),
+    0 0 0.1em 0.25em inset rgb(255 255 255 / 20%), 0 0.225em 0.05em 0 rgb(0 0 0 / 5%), 0 0.25em 0 0 rgb(255 255 255 / 75%),
+    inset 0 0.25em 0.05em 0 rgb(0 0 0 / 15%);
+  position: relative;
+  isolation: isolate;
+  border: 0;
+  border-radius: 999vw;
+  /* Dousan: dark text on light, white on dark. */
+  color: var(--mk-glass-fg, light-dark(#121212, #fff));
+  background: linear-gradient(-75deg, var(--mk-glass-edge), var(--mk-glass-middle), var(--mk-glass-edge));
+  box-shadow: var(--mk-glass-shadow);
+  -webkit-backdrop-filter: blur(var(--mk-glass-blur));
+  backdrop-filter: blur(var(--mk-glass-blur));
+  transition:
+    transform var(--mk-dur-press) var(--mk-ease-press),
+    box-shadow 0.4s var(--mk-ease-glass),
+    -webkit-backdrop-filter 0.4s var(--mk-ease-glass),
+    backdrop-filter 0.4s var(--mk-ease-glass);
+}
+
+/* Optical ring: a conic highlight masked to the border. Also replaces .mk-button's state layer. */
+.mk-glass::before,
+.mk-glass:is(:hover, :focus-visible, :active)::before {
+  position: absolute;
+  inset: calc(var(--mk-glass-border) / -2);
+  z-index: 1;
+  box-sizing: border-box;
+  padding: var(--mk-glass-border);
+  border-radius: inherit;
+  background:
+    conic-gradient(
+      from var(--mk-glass-angle-1) at 50% 50%,
+      var(--mk-glass-ring),
+      transparent 5% 40%,
+      var(--mk-glass-ring) 50%,
+      transparent 60% 95%,
+      var(--mk-glass-ring)
+    ),
+    linear-gradient(180deg, var(--mk-glass-ring-top), var(--mk-glass-ring-bottom));
+  box-shadow: inset 0 0 0 calc(var(--mk-glass-border) / 2) rgb(255 255 255 / 50%);
+  content: '';
+  opacity: 1;
+  pointer-events: none;
+  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  -webkit-mask-clip: content-box, border-box;
+  mask-clip: content-box, border-box;
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  transition: --mk-glass-angle-1 0.5s;
+}
+
+/* Specular band, screened over the content. */
+.mk-glass::after {
+  position: absolute;
+  inset: calc(var(--mk-glass-border) / 2);
+  z-index: 1;
+  border-radius: inherit;
+  background: linear-gradient(var(--mk-glass-angle-2), transparent 0%, var(--mk-glass-tint) 40% 50%, transparent 55%) 0% 50% / 200% 200%
+    no-repeat;
+  content: '';
+  mix-blend-mode: screen;
+  pointer-events: none;
+  transition:
+    background-position 0.5s var(--mk-ease-glass),
+    --mk-glass-angle-2 0.5s var(--mk-ease-glass);
+}
+
+/* Dousan's gradient shadow (optional child). Only its lower part shows: it sits under the button. */
+.mk-glass__shadow {
+  --mk-glass-cut: 2em;
+  position: absolute;
+  top: calc(var(--mk-glass-cut) / -2);
+  left: calc(var(--mk-glass-cut) / -2);
+  z-index: -1;
+  width: calc(100% + var(--mk-glass-cut));
+  height: calc(100% + var(--mk-glass-cut));
+  overflow: visible;
+  filter: blur(clamp(2px, 0.125em, 12px));
+  pointer-events: none;
+  -webkit-mask-image: linear-gradient(transparent 55%, #000);
+  mask-image: linear-gradient(transparent 55%, #000);
+  transition: filter 0.4s var(--mk-ease-glass);
+}
+
+.mk-glass__shadow::after {
+  position: absolute;
+  top: calc(var(--mk-glass-cut) - 0.5em);
+  left: calc(var(--mk-glass-cut) - 0.875em);
+  box-sizing: border-box;
+  width: calc(100% - var(--mk-glass-cut) - 0.25em);
+  height: calc(100% - var(--mk-glass-cut) - 0.25em);
+  padding: 0.125em;
+  border-radius: 999vw;
+  background: linear-gradient(180deg, light-dark(rgb(0 0 0 / 22%), rgb(0 0 0 / 85%)), light-dark(rgb(0 0 0 / 10%), rgb(0 0 0 / 55%)));
+  content: '';
+  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  -webkit-mask-clip: content-box, border-box;
+  mask-clip: content-box, border-box;
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  transition:
+    top 0.4s var(--mk-ease-glass),
+    opacity 0.4s var(--mk-ease-glass);
+}
+
+@media (hover: hover) {
+  .mk-glass:hover {
+    box-shadow: var(--mk-glass-shadow-hover);
+    -webkit-backdrop-filter: blur(0.01em);
+    backdrop-filter: blur(0.01em);
+  }
+
+  .mk-glass:hover::before {
+    --mk-glass-angle-1: -125deg;
+  }
+
+  .mk-glass:hover::after {
+    background-position: 25% 50%;
+  }
+
+  .mk-glass:hover .mk-glass__shadow {
+    filter: blur(clamp(2px, 0.0625em, 6px));
+  }
+
+  .mk-glass:hover .mk-glass__shadow::after {
+    top: calc(var(--mk-glass-cut) - 0.875em);
+  }
+}
+
+.mk-glass:active {
+  box-shadow: var(--mk-glass-shadow-active);
+  transform: scale(0.95);
+}
+
+.mk-glass:active::after {
+  --mk-glass-angle-2: -15deg;
+  background-position: 50% 15%;
+}
+
+.mk-glass:active .mk-glass__shadow {
+  filter: blur(clamp(2px, 0.125em, 12px));
+}
+
+.mk-glass:active .mk-glass__shadow::after {
+  top: calc(var(--mk-glass-cut) - 0.5em);
+  opacity: 0.75;
+}
+
+/* The glass presses with its own spring: no squash. */
+.mk-button.mk-glass:focus {
+  animation: none;
+}
+
+.mk-glass:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+  .mk-glass {
+    background: color-mix(in srgb, var(--mk-bg) 80%, transparent);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-glass,
+  .mk-glass::before,
+  .mk-glass::after,
+  .mk-glass__shadow,
+  .mk-glass__shadow::after {
+    transition: none;
+  }
+
+  .mk-glass:active {
+    transform: none;
+  }
+}
+
+/* css/controls/burger.css */
+/* .mk-burger — Siena's menu icon: three lines that fold into an X when aria-expanded="true" (1.1 s, Siena's curve). */
+.mk-burger {
+  --mk-burger-size: 24px;
+  --mk-burger-line: 1.5px;
+  --mk-burger-gap: 5px;
+  display: inline-grid;
+  place-items: center;
+  width: calc(var(--mk-burger-size) + 16px);
+  height: calc(var(--mk-burger-size) + 16px);
+  padding: 0;
+  border: 0;
+  border-radius: var(--mk-radius-full);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mk-burger > span {
+  grid-area: 1 / 1;
+  width: var(--mk-burger-size);
+  height: var(--mk-burger-line);
+  border-radius: var(--mk-burger-line);
+  background: currentColor;
+  transition: transform 1.1s var(--mk-ease-siena);
+}
+
+.mk-burger > span:nth-child(1) {
+  transform: translate3d(0, calc(var(--mk-burger-gap) * -1), 0);
+  transition-delay: 0s;
+}
+
+.mk-burger > span:nth-child(2) {
+  transform: translateZ(0);
+  transition-delay: 0.05s;
+}
+
+.mk-burger > span:nth-child(3) {
+  transform: translate3d(0, var(--mk-burger-gap), 0);
+  transition-delay: 0s;
+}
+
+.mk-burger[aria-expanded='true'] > span:nth-child(1) {
+  transform: translateZ(0) rotate(-45deg) scaleX(0.8);
+  transition-delay: 0.05s;
+}
+
+.mk-burger[aria-expanded='true'] > span:nth-child(2) {
+  transform: translateZ(0) scaleX(0);
+  transition-delay: 0s;
+}
+
+.mk-burger[aria-expanded='true'] > span:nth-child(3) {
+  transform: translateZ(0) rotate(45deg) scaleX(0.8);
+  transition-delay: 0.05s;
+}
+
+.mk-burger:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mk-burger > span {
+    transition: none;
+  }
+}