Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Swap

Swaps two pieces of content when its checkbox is checked, with fade, rotate, scale and flip effects.

Actions and feedback7 classesNo JavaScriptLight and dark

Example

Full

Classes

7 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the swap. On a <label> in the example. Sets absolute position, width, height, margin, opacity and native control styling.
CSS
.swap:has(> input:checked) > .swap-on, .swap-active > .swap-on {
  opacity: 1;
}

.swap:has(> input:checked) > .swap-off, .swap-active > .swap-off {
  opacity: 0;
}
Part Part of the swap. On a <span> in the example. Sets opacity.
CSS
.swap-on {
  opacity: 0;
}

.swap-scale > .swap-on {
  scale: 0.4;
}
Part Part of the swap. On a <span> in the example. A hook for state rules such as .swap > .swap-on.
CSS
.swap:has(> input:checked) > .swap-off, .swap-active > .swap-off {
  opacity: 0;
}

.swap-flip > .swap-on, .swap-flip > .swap-off {
  opacity: 1;
  backface-visibility: hidden;
}
Modifier Modifier, combined with the swap class. On a <span> in the example. Sets opacity.
CSS
.swap:has(> input:checked) > .swap-on, .swap-active > .swap-on {
  opacity: 1;
}

.swap:has(> input:checked) > .swap-off, .swap-active > .swap-off {
  opacity: 0;
}
Modifier Modifier, combined with the swap class. On a <label> in the example. Sets transform.
CSS
.swap-rotate > .swap-on {
  rotate: -90deg;
}

.swap-rotate:has(> input:checked) > .swap-on, .swap-rotate.swap-active > .swap-on {
  rotate: 0deg;
}
Modifier Modifier, combined with the swap class. On a <label> in the example. Sets transform.
CSS
.swap-scale > .swap-on {
  scale: 0.4;
}

.swap-scale:has(> input:checked) > .swap-on, .swap-scale.swap-active > .swap-on {
  scale: 1;
}
Modifier Modifier, combined with the swap class. On a <label> in the example. Sets opacity and transform.
CSS
.swap-flip > .swap-on {
  transform: rotateY(180deg);
}

.swap-flip {
  perspective: 20rem;
  transform-style: preserve-3d;
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Swap: start from the base class, then add modifiers -->
<div class="flex items-center gap-4">
  <label class="swap swap-rotate btn btn-icon" aria-label="Toggle theme">
    <input type="checkbox">
    <span class="swap-on"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg></span>
    <span class="swap-off"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></span>
  </label>
  <label class="swap swap-scale btn btn-icon" aria-label="Toggle menu">
    <input type="checkbox" checked>
    <span class="swap-on"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></span>
    <span class="swap-off"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 6h16M4 12h16M4 18h16"/></svg></span>
  </label>
  <label class="swap swap-flip text-3xl">
    <input type="checkbox">
    <span class="swap-on">ON</span>
<!-- the full example is in the Code tab above -->

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
  • Checkboxes and radios stay real inputs, so they keep native keyboard behavior (Space toggles, arrow keys move within a radio group) and form submission.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Actions and feedbackSegmented controlA single choice control built from radio inputs, keyboard friendly by default.Actions and feedbackToggle groupA row of joined toggles built from checkboxes, so several can be on at once.Actions and feedbackAlertInline messages in soft, outline and solid styles with an icon, title, description, actions and a script free dismiss.Actions and feedbackCalloutA highlighted note for documentation and long form content.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.