@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/src/components/island/README.md

@@ -0,0 +1,91 @@
+# island
+
+Una isla de cristal esmerilado fija arriba y centrada que crece hasta ser un panel: la fila del contenido pasa de `0fr` a `1fr` (0.6 s `cubic-bezier(.625,.05,0,1)`, 0.125 s después), el radio pasa de 3em a 2em, la página de detrás se oscurece a .4 (0.7 s, 0.1 s después) y las filas del panel suben 3em desde 0.15 s, 25 ms una tras otra. Varios botones comparten la isla: el mismo cierra, otro cambia directamente a su panel. Escape, el fondo, un enlace del panel y hacer scroll después de una rueda o un toque la cierran. Al cargar cae desde −300 % en 1.8 s. En las tarjetas, pasar sobre una baja las demás al 20 % y su imagen crece a 1.04.
+
+Origen: iyo.ai, navbar de la home (`nav`/`d3`): cristal `blur(20px)` sobre `#38383899` con gradiente `141deg #a9c2f214 → #62718c24`, ancho 23.5rem (28rem desde 1920 px; a lo ancho con 1rem / 5vw de margen en móvil), botones de 2.5rem. iyo da solo la duración de la entrada, así que se usa la curva por defecto de GSAP (`power1.out`). El icono de nueve puntos es estático, como en iyo.
+
+## HTML / Astro
+
+```html
+<mk-island aria-label="Principal">
+  <button type="button" class="mk-island__backdrop" data-mk-island-close tabindex="-1" aria-label="Cerrar"></button>
+  <div class="mk-island__shell">
+    <div class="mk-island__glass" aria-hidden="true"></div>
+    <div class="mk-island__header">
+      <a href="/" class="mk-island__brand">Marca</a>
+      <div class="mk-island__actions">
+        <a href="#producto" class="mk-island__cta">Explorar</a>
+        <button type="button" class="mk-island__button" data-mk-island-toggle="menu" aria-label="Menú">
+          <span class="mk-island__dots" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
+        </button>
+        <span class="mk-island__separator" aria-hidden="true"></span>
+        <button type="button" class="mk-island__button mk-island__button--light" data-mk-island-toggle="cart" aria-label="Carrito">
+          …
+        </button>
+      </div>
+    </div>
+    <div class="mk-island__content">
+      <div>
+        <section class="mk-island__panel" data-mk-island-panel="menu" aria-label="Productos">
+          <div class="mk-island__row" data-mk-island-item>
+            <a class="mk-island-card" href="/uno">Uno <span class="mk-island-card__visual" aria-hidden="true"></span></a>
+            <a class="mk-island-card" href="/dos" aria-current="page">Dos</a>
+          </div>
+          <div class="mk-island__foot" data-mk-island-item><span>Estudio</span><span>2026</span></div>
+        </section>
+        <section class="mk-island__panel" data-mk-island-panel="cart" aria-label="Carrito">
+          <p data-mk-island-item>Vacío</p>
+        </section>
+      </div>
+    </div>
+  </div>
+</mk-island>
+<script>
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-island']);
+</script>
+```
+
+Con la clase `mk-island` sirve cualquier etiqueta (`<nav class="mk-island">` + `createIsland(nav)`). `mk-island--contained` la deja (con su fondo) dentro de un padre posicionado en vez de fija sobre la página.
+
+## React
+
+```tsx
+<Island
+  brand={<a href="/">Marca</a>}
+  cta={{ href: '#producto', label: 'Explorar' }}
+  panels={[
+    {
+      name: 'menu',
+      label: 'Menú',
+      content: (
+        <div className="mk-island__row" data-mk-island-item>
+          …
+        </div>
+      ),
+    },
+    { name: 'cart', label: 'Carrito', light: true, icon: <CartIcon />, content: <p data-mk-island-item>Vacío</p> },
+  ]}
+  onChange={(active) => console.log(active)}
+/>
+```
+
+## Opciones
+
+| Opción            | Atributo                   | Por defecto | Qué hace                                                   |
+| ----------------- | -------------------------- | ----------- | ---------------------------------------------------------- |
+| `entrance`        | `entrance="false\|manual"` | `true`      | Caer desde −300 % al cargar; `'manual'` espera a `ready()` |
+| `closeOnScroll`   | `close-on-scroll`          | `true`      | Cerrar al moverse la página tras una rueda o un toque      |
+| `closeOnNavigate` | `close-on-navigate`        | `true`      | Cerrar al seguir un enlace del panel                       |
+| `focusOnOpen`     | `focus-on-open`            | `true`      | Enfocar el primer control del panel (150 ms)               |
+| `onChange`        | evento `mk:island`         | —           | Panel abierto o `null`                                     |
+
+API: `createIsland(root, options)` → `{ open(name), close(), toggle(name), ready(), active, destroy }`.
+
+## Variables CSS
+
+`--mk-island-width`, `--mk-island-top`, `--mk-island-fg`, `--mk-island-glass`, `--mk-island-tint`, `--mk-island-blur`, `--mk-island-button(-active)`, `--mk-island-button-light(-active)`, `--mk-island-line`, `--mk-ease-island`, `--mk-ease-island-radius`, `--mk-ease-island-veil`. Filas del panel: `--mk-island-delay` (la escribe el motor).
+
+## Accesibilidad
+
+Navegación no modal: no atrapa el foco ni bloquea el scroll. Los botones llevan `aria-expanded` y `aria-controls`; los paneles cerrados `inert` y `aria-hidden`; el CTA queda `inert` mientras hay un panel abierto. Escape y el fondo devuelven el foco al botón. La tarjeta de la página actual (`aria-current="page"`) queda al 20 % y sin puntero. Con movimiento reducido no hay entrada ni transiciones.

package/src/components/island/element.ts

@@ -0,0 +1,45 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createIsland, type IslandInstance, type IslandOptions } from './engine';
+
+/**
+ * <mk-island [entrance="false|manual"] [close-on-scroll="false"] [close-on-navigate="false"] [focus-on-open="false"]>
+ *   <button class="mk-island__backdrop" data-mk-island-close tabindex="-1" aria-label="Cerrar"></button>
+ *   <div class="mk-island__shell">…header with [data-mk-island-toggle="menu"]…
+ *     <div class="mk-island__content"><div><section data-mk-island-panel="menu">…</section></div></div>
+ *   </div>
+ * </mk-island>
+ * Emits `mk:island` (detail: { active }) when a panel opens or closes.
+ */
+export class MkIslandElement extends MkElement<IslandInstance> {
+  static options: Record<string, OptionType> = {
+    entrance: 'string',
+    closeOnScroll: 'boolean',
+    closeOnNavigate: 'boolean',
+    focusOnOpen: 'boolean',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    const entrance: IslandOptions['entrance'] = options.entrance === 'false' ? false : options.entrance === 'manual' ? 'manual' : true;
+    return createIsland(this, {
+      entrance,
+      closeOnScroll: options.closeOnScroll as boolean | undefined,
+      closeOnNavigate: options.closeOnNavigate as boolean | undefined,
+      focusOnOpen: options.focusOnOpen as boolean | undefined,
+      onChange: (active) => this.dispatchEvent(new CustomEvent('mk:island', { detail: { active }, bubbles: true })),
+    });
+  }
+
+  open(name?: string) {
+    this.instance?.open(name);
+  }
+
+  close() {
+    this.instance?.close();
+  }
+
+  ready() {
+    this.instance?.ready();
+  }
+}
+
+export const defineIsland = () => defineElement('mk-island', MkIslandElement);

package/src/components/island/engine.ts

@@ -0,0 +1,200 @@
+import { gsap, registerMotion } from '../../core/gsap';
+import { entrances, reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { TIMING } from '../../core/timing';
+import { inert, warnOnce, type Instance } from '../../core/types';
+
+/*
+ * iyo.ai's floating navbar: a frosted glass pill centred at the top that grows
+ * into a rounded panel (CSS grid rows 0fr → 1fr, 0.6 s cubic-bezier(.625,.05,0,1),
+ * 0.125 s late; radius 3em → 2em) while the page behind darkens to .4 and the
+ * panel's rows rise in 0.15 s + 0.025 s apart. Several triggers share the shell:
+ * the same one closes, another switches straight to its panel. Escape, the
+ * backdrop, a link inside and scrolling after a wheel/touch close it. On load it
+ * drops in from −300 % over 1.8 s.
+ *
+ * Markup: [data-mk-island-toggle="name"] buttons, [data-mk-island-panel="name"]
+ * sections, [data-mk-island-item] rows, [data-mk-island-close] backdrop,
+ * .mk-island__shell and .mk-island__cta (hidden while open).
+ */
+
+export interface IslandOptions {
+  /** Drop in from above on load (true), wait for ready() ('manual') or not at all. */
+  entrance?: boolean | 'manual';
+  /** Close when the page scrolls after a wheel or touch (iyo). */
+  closeOnScroll?: boolean;
+  /** Close when a link inside a panel is followed. */
+  closeOnNavigate?: boolean;
+  /** Focus the first control of the panel that opens. */
+  focusOnOpen?: boolean;
+  /** The open panel's name, or null when it closes. */
+  onChange?: (active: string | null) => void;
+}
+
+export interface IslandInstance extends Instance {
+  open(name?: string): void;
+  close(returnFocus?: boolean): void;
+  toggle(name?: string): void;
+  /** Play the entrance (entrance: 'manual'). */
+  ready(): void;
+  readonly active: string | null;
+}
+
+let sequence = 0;
+const FOCUSABLE =
+  'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+export function createIsland(root: HTMLElement | null, options: IslandOptions = {}): IslandInstance {
+  const shell = root?.querySelector<HTMLElement>('.mk-island__shell') ?? null;
+  const panels = root ? [...root.querySelectorAll<HTMLElement>('[data-mk-island-panel]')] : [];
+  if (!root || !shell || !panels.length) {
+    warnOnce('island: needs .mk-island__shell and at least one [data-mk-island-panel]');
+    return inert({ open() {}, close() {}, toggle() {}, ready() {}, active: null });
+  }
+  const t = TIMING.island;
+  const { entrance = true, closeOnScroll = true, closeOnNavigate = true, focusOnOpen = true, onChange } = options;
+  registerMotion();
+  const scope = createScope();
+  const toggles = [...root.querySelectorAll<HTMLElement>('[data-mk-island-toggle]')];
+  const cta = root.querySelector<HTMLElement>('.mk-island__cta');
+  const backdrops = [...root.querySelectorAll<HTMLElement>('[data-mk-island-close]')];
+  let active: string | null = null;
+  let trigger: HTMLElement | null = null;
+  let scrollStart = 0;
+  let armed = false;
+  let focusTimer: ReturnType<typeof setTimeout> | undefined;
+  let entered = false;
+  let entry: gsap.core.Tween | null = null;
+
+  const flag = (el: Element | null, name: string, on: boolean) => {
+    if (el) scope.attr(el, name, on ? '' : null);
+  };
+  const sync = () => {
+    for (const panel of panels) {
+      const on = panel.dataset.mkIslandPanel === active;
+      // A closing panel stays in the collapsing grid for its exit.
+      if (active) flag(panel, 'hidden', !on);
+      scope.attr(panel, 'aria-hidden', String(!on));
+      flag(panel, 'inert', !on);
+    }
+    for (const button of toggles) scope.attr(button, 'aria-expanded', String(button.dataset.mkIslandToggle === active));
+    flag(cta, 'inert', Boolean(active));
+    for (const backdrop of backdrops) {
+      flag(backdrop, 'inert', !active);
+      scope.attr(backdrop, 'aria-hidden', String(!active));
+    }
+    flag(root, 'data-mk-open', Boolean(active));
+    scope.attr(root, 'data-mk-active', active);
+  };
+  const stagger = (opening: boolean) => {
+    root.querySelectorAll<HTMLElement>('[data-mk-island-item]').forEach((item, index) => {
+      // Saves the original style once, so destroy() puts it back.
+      scope.attr(item, 'style', item.getAttribute('style'));
+      item.style.setProperty('--mk-island-delay', opening ? `${Number((t.delay + index * t.step).toFixed(3))}s` : '0s');
+    });
+  };
+
+  const close = (returnFocus = true) => {
+    if (scope.disposed || !active) return;
+    clearTimeout(focusTimer);
+    active = null;
+    stagger(false);
+    sync();
+    onChange?.(null);
+    if (returnFocus && trigger?.isConnected) trigger.focus({ preventScroll: true });
+  };
+  const open = (name = panels[0]!.dataset.mkIslandPanel!, source?: HTMLElement) => {
+    if (scope.disposed) return;
+    const panel = panels.find((el) => el.dataset.mkIslandPanel === name);
+    if (!panel) return;
+    const wasClosed = !active;
+    clearTimeout(focusTimer);
+    active = name;
+    trigger = source ?? toggles.find((el) => el.dataset.mkIslandToggle === name) ?? trigger;
+    if (wasClosed) {
+      scrollStart = window.scrollY;
+      armed = false;
+      stagger(true);
+    }
+    sync();
+    onChange?.(name);
+    if (focusOnOpen)
+      focusTimer = setTimeout(
+        () => {
+          if (active !== name) return;
+          const first = [...panel.querySelectorAll<HTMLElement>(FOCUSABLE)].find((el) => !el.closest('[hidden], [inert]'));
+          (first ?? panel).focus({ preventScroll: true });
+        },
+        reduced() ? 0 : t.focus,
+      );
+  };
+  const toggle = (name = panels[0]!.dataset.mkIslandPanel!, source?: HTMLElement) => (active === name ? close(false) : open(name, source));
+
+  for (const panel of panels) {
+    if (!panel.id) scope.attr(panel, 'id', `mk-island-panel-${++sequence}`);
+    if (!panel.hasAttribute('tabindex')) scope.attr(panel, 'tabindex', '-1');
+    if (!panel.hasAttribute('role')) scope.attr(panel, 'role', 'region');
+  }
+  for (const button of toggles) {
+    const panel = panels.find((el) => el.dataset.mkIslandPanel === button.dataset.mkIslandToggle);
+    if (panel) scope.attr(button, 'aria-controls', panel.id);
+    scope.on(button, 'click', () => toggle(button.dataset.mkIslandToggle, button));
+  }
+  for (const backdrop of backdrops) scope.on(backdrop, 'click', () => close(true));
+  scope.on(document, 'keydown', (event) => {
+    if (active && (event as KeyboardEvent).key === 'Escape') {
+      event.preventDefault();
+      close(true);
+    }
+  });
+  if (closeOnNavigate)
+    scope.on(root, 'click', (event) => {
+      const link = (event.target as Element | null)?.closest?.('a[href]');
+      if (active && link?.closest('[data-mk-island-panel]')) close(false);
+    });
+  if (closeOnScroll) {
+    const arm = () => {
+      if (active) armed = true;
+    };
+    scope.on(window, 'wheel', arm, { passive: true });
+    scope.on(window, 'touchmove', arm, { passive: true });
+    scope.on(
+      window,
+      'scroll',
+      () => {
+        if (active && armed && Math.abs(window.scrollY - scrollStart) > 1) close(false);
+      },
+      { passive: true },
+    );
+  }
+  scope.add(() => clearTimeout(focusTimer));
+
+  // iyo's entrance gives only a duration, so GSAP's default ease (power1.out) applies.
+  const moving = entrance !== false && entrances();
+  if (moving) gsap.set(shell, { yPercent: t.offset });
+  const ready = () => {
+    if (scope.disposed || entered || !moving) return;
+    entered = true;
+    entry = gsap.to(shell, { yPercent: 0, duration: t.entrance });
+  };
+  scope.add(() => {
+    entry?.kill();
+    if (moving) gsap.set(shell, { clearProps: 'transform,translate' });
+    if (shell.getAttribute('style') === '') shell.removeAttribute('style');
+  });
+
+  sync();
+  if (entrance === true) ready();
+  scope.attr(root, 'data-mk-ready', '');
+
+  return {
+    open: (name?: string) => open(name),
+    close,
+    toggle: (name?: string) => toggle(name),
+    ready,
+    get active() {
+      return active;
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/island/island.css

@@ -0,0 +1,300 @@
+/*
+ * 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;
+  }
+}