npm - @mks2508/mks-ui - Versions diffs - 0.5.4 → 0.5.8 - Mend

@mks2508/mks-ui 0.5.4 → 0.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (262) hide show

package/src/react-ui/ui/DynamicToggle/prototype-v7.html DELETED Viewed

@@ -1,615 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>DynamicToggle Prototype v7 — Gooey Morphing</title>
-<style>
-  :root {
-    --fg: #e2e8f0;
-    --bg: #0f172a;
-    --card: #1e293b;
-    --muted: #64748b;
-    --border: #334155;
-    --duration: 0.22;
-    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
-    --drop-off: 0.4;
-  }
-  * { box-sizing: border-box; margin: 0; }
-  body {
-    min-height: 100vh;
-    display: flex; flex-direction: column; align-items: center;
-    padding: 4rem 1rem; gap: 2rem;
-    background: var(--bg);
-    font-family: system-ui, -apple-system, sans-serif;
-    color: var(--fg);
-  }
-  h3 { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
-  .row { display: flex; gap: 2rem; align-items: end; flex-wrap: wrap; justify-content: center; }
-  .sr-only {
-    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
-  }
-  /* ================================================================
-   * SHARED: CONTROL BASE (pill toggle)
-   * ================================================================ */
-  .control {
-    --w: 260px;
-    --h: 38px;
-    --radius: 9999px;
-    --font: 0.75rem;
-    --_r: min(var(--radius), calc(var(--h) / 2));
-    position: relative;
-    width: var(--w);
-    height: var(--h);
-    background: var(--card);
-    border-radius: var(--radius);
-    border: 1px solid var(--border);
-    padding: 2px;
-    margin-top: calc(var(--h) * 0.8);
-  }
-  .control__track {
-    display: grid; place-items: center;
-    grid-template-columns: repeat(4, 1fr);
-    width: 100%; height: 100%;
-    position: relative;
-  }
-  .indicator {
-    position: absolute;
-    width: 50%; left: 0; top: 0; bottom: 0;
-    background: var(--fg);
-    border-radius: var(--radius);
-    transition: translate calc(var(--duration) * 1s) var(--ease);
-  }
-  label {
-    display: inline-grid; place-items: center;
-    height: 100%; width: 100%;
-    cursor: pointer; font-size: var(--font);
-    color: var(--fg); z-index: 2; font-weight: 500;
-  }
-  .control__track > label { color: var(--card); }
-  .group {
-    width: 100%; height: 100%;
-    display: grid; position: relative;
-    grid-template-columns: 1fr 1fr;
-    container-type: size;
-    overflow: hidden;
-  }
-  .group, .control__track > label:nth-of-type(1) { grid-column: span 2; }
-  /* premium::before styled in the flip section below via data-label */
-  .group .indicator {
-    background: var(--fg); left: 50%; top: 0;
-    translate: -50% 0;
-    pointer-events: none;
-    transition: translate calc(var(--duration) * 1s) var(--ease),
-                clip-path calc(var(--duration) * 1s) var(--ease),
-                background calc(var(--duration) * 1s) var(--ease);
-    clip-path: inset(73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px) round var(--radius));
-  }
-  /* ══════════════════════════════════════════════
-   * GROUP COLLAPSED STATE
-   * ::before = title (data-label)
-   * ::after  = combined opts (data-opts)
-   * <label>s = hidden when collapsed, shown when expanded
-   * ══════════════════════════════════════════════ */
-  /* Title — ::before */
-  .group::before {
-    content: attr(data-label);
-    position: absolute;
-    left: 50%; top: 50%;
-    translate: -50% -80%;
-    color: var(--fg);
-    font-size: var(--font);
-    font-weight: 500;
-    z-index: 2;
-    white-space: nowrap;
-    pointer-events: none;
-    transition: scale calc(var(--duration) * 1s) var(--ease),
-                translate calc(var(--duration) * 1s) var(--ease),
-                opacity calc(var(--duration) * 1s) var(--ease);
-  }
-  /* Combined opts — ::after (only if data-opts exists) */
-  .group::after {
-    content: attr(data-opts);
-    position: absolute;
-    left: 50%; top: 50%;
-    translate: -50% 20%;
-    color: var(--muted);
-    font-size: calc(var(--font) * 0.85);
-    opacity: 0.6;
-    z-index: 2;
-    white-space: nowrap;
-    pointer-events: none;
-    transition: opacity calc(var(--duration) * 1s) var(--ease);
-  }
-  /* Hide ::after completely when no data-opts (prevents stale dot) */
-  .group:not([data-opts])::after { content: none; }
-  /* Labels — morph position via scale + transform-origin (from original codepen) */
-  .group label {
-    color: var(--muted);
-    cursor: pointer;
-    z-index: 2;
-    transition: color calc(var(--duration) * 1s) var(--ease),
-                opacity calc(var(--duration) * 1s) var(--ease),
-                translate calc(var(--duration) * 1s) var(--ease);
-  }
-  .group label span {
-    display: grid; place-items: center; height: 100%; width: 100%;
-    border-radius: var(--radius);
-    transition: scale calc(var(--duration) * 1s) var(--ease);
-  }
-  /* Collapsed: labels scaled down + container-query origins (scales with size) */
-  .group label:nth-of-type(1) span { scale: 0.75; transform-origin: 60cqw 80cqh; }
-  .group label:nth-of-type(2) span { scale: 0.75; transform-origin: 40cqw 80cqh; }
-  /* ── Collapsed modes ── */
-  /* "title": only ::before, no opts, labels slide-in from below on expand */
-  .group[data-collapsed="title"]::before { translate: -50% -50%; }
-  .group[data-collapsed="title"]::after { display: none; }
-  .group[data-collapsed="title"]:not(:has(:checked)) label { opacity: 0; translate: 0 30%; }
-  /* "opts": only ::after, no title, labels slide-in from below on expand */
-  .group[data-collapsed="opts"]::before { display: none; }
-  .group[data-collapsed="opts"]::after { translate: -50% -50%; font-size: var(--font); opacity: 0.7; }
-  .group[data-collapsed="opts"]:not(:has(:checked)) label { opacity: 0; translate: 0 30%; }
-  /* default (title-opts): labels visible at 0.75 + ::after hidden */
-  .group:not([data-collapsed])::after { content: none; }
-  /* ── Track states ── */
-  .control__track:has(> :checked) > label { color: var(--card); }
-  .control__track:not(:has(> :checked)) > label { color: var(--fg); opacity: var(--drop-off); }
-  .control__track:not(:has(> :checked)) > .indicator { translate: 100% 0; }
-  .control__track:has(> :checked) .group .indicator { background: transparent; }
-  /* ── When group expanded ── */
-  .group:has(:checked)::before {
-    translate: -50% -250%;
-    scale: 0.85;
-  }
-  .group:has(:checked)::after {
-    opacity: 0;
-  }
-  .group:has(:checked) label {
-    opacity: 0.75;
-    color: var(--muted);
-    pointer-events: auto;
-    translate: 0 0;
-  }
-  .group:has(:checked) label span {
-    scale: 1;
-  }
-  .group:has(:checked) .indicator { background: var(--card); clip-path: inset(0 0 0 0 round var(--radius)); }
-  .group:has(:nth-of-type(1):checked) label:nth-of-type(1),
-  .group:has(:nth-of-type(2):checked) label:nth-of-type(2) { color: var(--fg); opacity: 1; }
-  .group:has(:nth-of-type(1):checked) .indicator { translate: -100% 0; }
-  .group:has(:nth-of-type(2):checked) .indicator { translate: 0 0; }
-  /* ── Gooey mode: ::before hides on expand, bubble text takes over ── */
-  .control--filter .group:has(:checked)::before {
-    opacity: 0;
-    translate: -50% -80%;
-    scale: 1;
-  }
-  /* ================================================================
-   * TECHNIQUE 1: SVG FILTER GOOEY
-   * Filter ONLY on .goo-bg layer (pill bg + bubble bg).
-   * Content (indicator, labels) sits on top, unfiltered.
-   * ================================================================ */
-  .control--filter {
-    background: transparent;
-    border-color: transparent;
-    overflow: visible;
-  }
-  /* Background layer — gooey filtered */
-  .control--filter > .goo-bg {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background: var(--card);
-    pointer-events: none;
-    z-index: 0;
-    filter: url(#goo) drop-shadow(0 0 var(--outline-blur, 0.5px) var(--outline-color, #334155)) drop-shadow(0 0 var(--outline-blur, 0.5px) var(--outline-color, #334155));
-    overflow: visible;
-  }
-  .control--filter.xs > .goo-bg  { filter: url(#goo-xs) drop-shadow(0 0 var(--outline-blur, 0.5px) var(--outline-color, #334155)) drop-shadow(0 0 var(--outline-blur, 0.5px) var(--outline-color, #334155)); }
-  .control--filter.sm > .goo-bg  { filter: url(#goo-sm) drop-shadow(0 0 var(--outline-blur, 0.5px) var(--outline-color, #334155)) drop-shadow(0 0 var(--outline-blur, 0.5px) var(--outline-color, #334155)); }
-  .control--filter.lg > .goo-bg  { filter: url(#goo-lg) drop-shadow(0 0 var(--outline-blur, 0.5px) var(--outline-color, #334155)) drop-shadow(0 0 var(--outline-blur, 0.5px) var(--outline-color, #334155)); }
-  .control--filter.xl > .goo-bg  { filter: url(#goo-xl) drop-shadow(0 0 var(--outline-blur, 0.5px) var(--outline-color, #334155)) drop-shadow(0 0 var(--outline-blur, 0.5px) var(--outline-color, #334155)); }
-  /* Bubble — lives inside .goo-bg so it gets filtered */
-  .control--filter .bubble {
-    position: absolute;
-    left: var(--bubble-inset, 20%); right: var(--bubble-inset, 20%);
-    bottom: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--card);
-    border-radius: calc(var(--_r) * var(--bubble-br-pct, 40) / 100);
-    font-size: var(--font);
-    font-weight: 500;
-    color: var(--fg);
-    white-space: nowrap;
-    pointer-events: none;
-    height: 0;
-    padding: 0;
-    opacity: 0;
-    overflow: hidden;
-    transition:
-      height calc(var(--duration) * 1.5s) var(--ease),
-      padding calc(var(--duration) * 1.5s) var(--ease),
-      opacity calc(var(--duration) * 1s) var(--ease);
-  }
-  .control--filter:has(.group :checked) .goo-bg .bubble {
-    height: calc(var(--h) * var(--bubble-h-pct, 40) / 100);
-    padding: 0 0.75em;
-    opacity: 1;
-  }
-  /* Content layer — on top, NOT filtered */
-  .control--filter > .control__track {
-    position: relative;
-    z-index: 1;
-  }
-  /* ================================================================
-   * TECHNIQUE 2: PARAMETRIC SVG PATH
-   * An SVG <path> draws the merged shape. No filter needed.
-   * ================================================================ */
-  .control--path {
-    background: transparent;
-    border-color: transparent;
-  }
-  .control--path .path-svg {
-    position: absolute;
-    top: 0; left: 0;
-    overflow: visible;
-    pointer-events: none;
-    z-index: -1;
-  }
-  .control--path .bubble {
-    position: absolute;
-    left: 0; right: 0;
-    bottom: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: var(--font);
-    font-weight: 500;
-    color: var(--fg);
-    white-space: nowrap;
-    pointer-events: none;
-    height: 0;
-    opacity: 0;
-    transition:
-      height calc(var(--duration) * 1.5s) var(--ease),
-      opacity calc(var(--duration) * 1s) var(--ease);
-  }
-  .control--path:has(.group :checked) .bubble {
-    height: calc(var(--h) * 0.7);
-    opacity: 1;
-  }
-  /* SIZES */
-  .control.xs  { --w: 170px; --h: 26px; --font: 9px; }
-  .control.sm  { --w: 210px; --h: 30px; --font: 10px; }
-  .control.lg  { --w: 320px; --h: 44px; --font: 14px; }
-  .control.xl  { --w: 400px; --h: 52px; --font: 16px; }
-  /* SHAPES */
-  .control.rounded { --radius: 12px; }
-  .control.square  { --radius: 6px; }
-  /* Controls panel */
-  #controls {
-    position: fixed; top: 1rem; right: 1rem; z-index: 999;
-    background: #1e293b; border: 1px solid #475569; border-radius: 12px;
-    padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;
-    font-size: 11px; color: #94a3b8; min-width: 240px;
-  }
-  #controls strong { color: #e2e8f0; }
-  #controls input[type="range"] { width: 100%; }
-</style>
-</head>
-<body>
-<!-- SVG Filter Definitions — blur scales with size (blur ≈ height * 0.15) -->
-<svg style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true">
-  <defs>
-    <!-- XS h=26 → blur 4 -->
-    <filter id="goo-xs" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
-      <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"/>
-      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="goo"/>
-      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
-    </filter>
-    <!-- SM h=30 → blur 5 -->
-    <filter id="goo-sm" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
-      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
-      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="goo"/>
-      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
-    </filter>
-    <!-- Default h=38 → blur 6 -->
-    <filter id="goo" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
-      <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/>
-      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="goo"/>
-      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
-    </filter>
-    <!-- LG h=44 → blur 7 -->
-    <filter id="goo-lg" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
-      <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"/>
-      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="goo"/>
-      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
-    </filter>
-    <!-- XL h=52 → blur 8 -->
-    <filter id="goo-xl" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
-      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur"/>
-      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="goo"/>
-      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
-    </filter>
-  </defs>
-</svg>
-<!-- Controls -->
-<div id="controls">
-  <strong>Gooey Filter Controls</strong>
-  <label>Blur: <span id="v-blur">8</span>
-    <input type="range" min="1" max="20" value="8"
-      oninput="document.querySelector('#goo feGaussianBlur').setAttribute('stdDeviation',this.value);document.getElementById('v-blur').textContent=this.value">
-  </label>
-  <label>Alpha Gain: <span id="v-gain">20</span>
-    <input type="range" min="5" max="40" value="20"
-      oninput="var g=this.value,o=document.getElementById('v-offset-r').value;document.querySelector('#goo feColorMatrix').setAttribute('values','1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 '+g+' '+o);document.getElementById('v-gain').textContent=g">
-  </label>
-  <div style="margin-top:0.25rem;border-top:1px solid #334155;padding-top:0.25rem">
-    <strong>Bubble Shape</strong>
-  </div>
-  <label>Inset (width): <span id="v-inset">20</span>%
-    <input type="range" min="0" max="45" value="20"
-      oninput="document.documentElement.style.setProperty('--bubble-inset',this.value+'%');document.getElementById('v-inset').textContent=this.value">
-  </label>
-  <label>Overlap: <span id="v-overlap">0</span>px
-    <input type="range" min="0" max="20" value="0"
-      oninput="document.documentElement.style.setProperty('--bubble-overlap',this.value+'px');document.getElementById('v-overlap').textContent=this.value">
-  </label>
-  <label>Height: <span id="v-bh">40</span>%
-    <input type="range" min="20" max="120" value="40"
-      oninput="document.documentElement.style.setProperty('--bubble-h-pct',this.value);document.getElementById('v-bh').textContent=this.value">
-  </label>
-  <label>Border-radius: <span id="v-br">40</span>%
-    <input type="range" min="0" max="100" value="40"
-      oninput="document.documentElement.style.setProperty('--bubble-br-pct',this.value);document.getElementById('v-br').textContent=this.value">
-  </label>
-  <div style="margin-top:0.25rem;border-top:1px solid #334155;padding-top:0.25rem">
-    <strong>Outline</strong>
-  </div>
-  <label>Blur: <span id="v-ol">0.5</span>px
-    <input type="range" min="0" max="3" step="0.1" value="0.5"
-      oninput="document.documentElement.style.setProperty('--outline-blur',this.value+'px');document.getElementById('v-ol').textContent=this.value">
-  </label>
-  <label>Layers: <span id="v-layers">2</span>
-    <input type="range" min="1" max="4" value="2"
-      oninput="var n=+this.value,b='var(--outline-blur, 0.5px)',c='var(--outline-color, #334155)',s=Array(n).fill('drop-shadow(0 0 '+b+' '+c+')').join(' ');document.documentElement.style.setProperty('--outline-stack',s);document.querySelectorAll('.control--filter').forEach(function(el){el.style.filter='url(#goo) '+s});document.getElementById('v-layers').textContent=n">
-  </label>
-  <label>Color:
-    <input type="color" value="#334155"
-      oninput="document.documentElement.style.setProperty('--outline-color',this.value);document.querySelectorAll('.control--filter').forEach(function(el){var s=el.style.filter;el.style.filter=s})" style="width:100%;height:24px;border:1px solid #475569;border-radius:4px;background:#0f172a;cursor:pointer">
-  </label>
-  <div style="margin-top:0.25rem;border-top:1px solid #334155;padding-top:0.25rem">
-    <strong>Filter</strong>
-  </div>
-  <label>Alpha Offset: <span id="v-offset">-10</span>
-    <input type="range" id="v-offset-r" min="-20" max="0" value="-10"
-      oninput="var g=document.getElementById('v-gain').parentElement.querySelector('input').value,o=this.value;document.querySelector('#goo feColorMatrix').setAttribute('values','1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 '+g+' '+o);document.getElementById('v-offset').textContent=o">
-  </label>
-</div>
-<!-- ============================================================
-     TECHNIQUE 1: SVG FILTER GOOEY
-     ============================================================ -->
-<h3>Technique 1: SVG Filter Gooey</h3>
-<p style="color:var(--muted);font-size:12px;max-width:600px;text-align:center">
-  <code>filter: url(#goo)</code> on the control. Bubble + pill same bg color = automatic organic merge. No pseudo-elements, no path math.
-</p>
-<h3>collapsed="opts" — Solo opciones</h3>
-<div class="row">
-  <div><h3>SM</h3>
-    <div class="control sm control--filter">
-      <div class="goo-bg"><div class="bubble">Changes</div></div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="m1s-a">Tree</label><input class="sr-only" type="radio" name="m1s" id="m1s-a" checked>
-        <div class="group" data-collapsed="opts" data-label="Changes" data-opts="Flat · Grp"><div class="indicator"></div>
-<label for="m1s-b"><span>Flat</span></label><input class="sr-only" type="radio" name="m1s" id="m1s-b">
-          <label for="m1s-c"><span>Grp</span></label><input class="sr-only" type="radio" name="m1s" id="m1s-c">
-        </div></div></div></div>
-  <div><h3>Default</h3>
-    <div class="control control--filter">
-      <div class="goo-bg"><div class="bubble">Premium</div></div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="m1d-a">Free</label><input class="sr-only" type="radio" name="m1d" id="m1d-a" checked>
-        <div class="group" data-collapsed="opts" data-label="Premium" data-opts="Solo · Team"><div class="indicator"></div>
-<label for="m1d-b"><span>Solo</span></label><input class="sr-only" type="radio" name="m1d" id="m1d-b">
-          <label for="m1d-c"><span>Team</span></label><input class="sr-only" type="radio" name="m1d" id="m1d-c">
-        </div></div></div></div>
-  <div><h3>LG</h3>
-    <div class="control lg control--filter">
-      <div class="goo-bg"><div class="bubble">Billing</div></div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="m1l-a">Annual</label><input class="sr-only" type="radio" name="m1l" id="m1l-a" checked>
-        <div class="group" data-collapsed="opts" data-label="Billing" data-opts="Monthly · Weekly"><div class="indicator"></div>
-<label for="m1l-b"><span>Monthly</span></label><input class="sr-only" type="radio" name="m1l" id="m1l-b">
-          <label for="m1l-c"><span>Weekly</span></label><input class="sr-only" type="radio" name="m1l" id="m1l-c">
-        </div></div></div></div>
-  <div><h3>XL</h3>
-    <div class="control xl control--filter">
-      <div class="goo-bg"><div class="bubble">Enterprise</div></div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="m1x-a">Standard</label><input class="sr-only" type="radio" name="m1x" id="m1x-a" checked>
-        <div class="group" data-collapsed="opts" data-label="Enterprise" data-opts="Business · Custom"><div class="indicator"></div>
-<label for="m1x-b"><span>Business</span></label><input class="sr-only" type="radio" name="m1x" id="m1x-b">
-          <label for="m1x-c"><span>Custom</span></label><input class="sr-only" type="radio" name="m1x" id="m1x-c">
-        </div></div></div></div>
-</div>
-<h3>default — Title + labels morphing (codepen original)</h3>
-<div class="row">
-  <div><h3>SM</h3>
-    <div class="control sm control--filter">
-      <div class="goo-bg"><div class="bubble">Changes</div></div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="m2s-a">Tree</label><input class="sr-only" type="radio" name="m2s" id="m2s-a" checked>
-        <div class="group" data-label="Changes" data-opts="Flat · Grp"><div class="indicator"></div>
-          <label for="m2s-b"><span>Flat</span></label><input class="sr-only" type="radio" name="m2s" id="m2s-b">
-          <label for="m2s-c"><span>Grp</span></label><input class="sr-only" type="radio" name="m2s" id="m2s-c">
-        </div></div></div></div>
-  <div><h3>Default</h3>
-    <div class="control control--filter">
-      <div class="goo-bg"><div class="bubble">Premium</div></div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="m2d-a">Free</label><input class="sr-only" type="radio" name="m2d" id="m2d-a" checked>
-        <div class="group" data-label="Premium" data-opts="Solo · Team"><div class="indicator"></div>
-          <label for="m2d-b"><span>Solo</span></label><input class="sr-only" type="radio" name="m2d" id="m2d-b">
-          <label for="m2d-c"><span>Team</span></label><input class="sr-only" type="radio" name="m2d" id="m2d-c">
-        </div></div></div></div>
-  <div><h3>LG</h3>
-    <div class="control lg control--filter">
-      <div class="goo-bg"><div class="bubble">Billing</div></div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="m2l-a">Annual</label><input class="sr-only" type="radio" name="m2l" id="m2l-a" checked>
-        <div class="group" data-label="Billing" data-opts="Monthly · Weekly"><div class="indicator"></div>
-          <label for="m2l-b"><span>Monthly</span></label><input class="sr-only" type="radio" name="m2l" id="m2l-b">
-          <label for="m2l-c"><span>Weekly</span></label><input class="sr-only" type="radio" name="m2l" id="m2l-c">
-        </div></div></div></div>
-  <div><h3>XL</h3>
-    <div class="control xl control--filter">
-      <div class="goo-bg"><div class="bubble">Enterprise</div></div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="m2x-a">Standard</label><input class="sr-only" type="radio" name="m2x" id="m2x-a" checked>
-        <div class="group" data-label="Enterprise" data-opts="Business · Custom"><div class="indicator"></div>
-          <label for="m2x-b"><span>Business</span></label><input class="sr-only" type="radio" name="m2x" id="m2x-b">
-          <label for="m2x-c"><span>Custom</span></label><input class="sr-only" type="radio" name="m2x" id="m2x-c">
-        </div></div></div></div>
-</div>
-<h3>collapsed="title" — Solo titulo</h3>
-<div class="row">
-  <div><h3>Default</h3>
-    <div class="control control--filter">
-      <div class="goo-bg"><div class="bubble">Theme</div></div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="m3d-a">System</label><input class="sr-only" type="radio" name="m3d" id="m3d-a" checked>
-        <div class="group" data-collapsed="title" data-label="Theme" data-opts="Light · Dark"><div class="indicator"></div>
-          <label for="m3d-b"><span>Light</span></label><input class="sr-only" type="radio" name="m3d" id="m3d-b">
-          <label for="m3d-c"><span>Dark</span></label><input class="sr-only" type="radio" name="m3d" id="m3d-c">
-        </div></div></div></div>
-  <div><h3>LG</h3>
-    <div class="control lg control--filter">
-      <div class="goo-bg"><div class="bubble">Billing</div></div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="m3l-a">Annual</label><input class="sr-only" type="radio" name="m3l" id="m3l-a" checked>
-        <div class="group" data-collapsed="title" data-label="Billing" data-opts="Monthly · Weekly"><div class="indicator"></div>
-          <label for="m3l-b"><span>Monthly</span></label><input class="sr-only" type="radio" name="m3l" id="m3l-b">
-          <label for="m3l-c"><span>Weekly</span></label><input class="sr-only" type="radio" name="m3l" id="m3l-c">
-        </div></div></div></div>
-  <div><h3>XL</h3>
-    <div class="control xl control--filter">
-      <div class="goo-bg"><div class="bubble">Enterprise</div></div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="m3x-a">Standard</label><input class="sr-only" type="radio" name="m3x" id="m3x-a" checked>
-        <div class="group" data-collapsed="title" data-label="Enterprise" data-opts="Business · Custom"><div class="indicator"></div>
-          <label for="m3x-b"><span>Business</span></label><input class="sr-only" type="radio" name="m3x" id="m3x-b">
-          <label for="m3x-c"><span>Custom</span></label><input class="sr-only" type="radio" name="m3x" id="m3x-c">
-        </div></div></div></div>
-</div>
-<h3>Filter: Rounded + Square</h3>
-<div class="row">
-  <div class="control sm rounded control--filter">
-    <div class="goo-bg"><div class="bubble">Mode</div></div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="fr1-a">Off</label><input class="sr-only" type="radio" name="fr1" id="fr1-a">
-      <div class="group" data-label="Mode" data-opts="Auto · Manual"><div class="indicator"></div>
-                <label for="fr1-b"><span>Auto</span></label><input class="sr-only" type="radio" name="fr1" id="fr1-b" checked>
-        <label for="fr1-c"><span>Manual</span></label><input class="sr-only" type="radio" name="fr1" id="fr1-c">
-      </div></div></div>
-  <div class="control rounded control--filter">
-    <div class="goo-bg"><div class="bubble">Theme</div></div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="fr2-a">System</label><input class="sr-only" type="radio" name="fr2" id="fr2-a">
-      <div class="group" data-label="Theme" data-opts="Light · Dark"><div class="indicator"></div>
-                <label for="fr2-b"><span>Light</span></label><input class="sr-only" type="radio" name="fr2" id="fr2-b" checked>
-        <label for="fr2-c"><span>Dark</span></label><input class="sr-only" type="radio" name="fr2" id="fr2-c">
-      </div></div></div>
-  <div class="control sm square control--filter">
-    <div class="goo-bg"><div class="bubble">Group</div></div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="fs1-a">A</label><input class="sr-only" type="radio" name="fs1" id="fs1-a">
-      <div class="group" data-label="Group" data-opts="B · C"><div class="indicator"></div>
-                <label for="fs1-b"><span>B</span></label><input class="sr-only" type="radio" name="fs1" id="fs1-b" checked>
-        <label for="fs1-c"><span>C</span></label><input class="sr-only" type="radio" name="fs1" id="fs1-c">
-      </div></div></div>
-  <div class="control square control--filter">
-    <div class="goo-bg"><div class="bubble">Output</div></div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="fs2-a">Input</label><input class="sr-only" type="radio" name="fs2" id="fs2-a">
-      <div class="group" data-label="Output" data-opts="JSON · XML"><div class="indicator"></div>
-                <label for="fs2-b"><span>JSON</span></label><input class="sr-only" type="radio" name="fs2" id="fs2-b" checked>
-        <label for="fs2-c"><span>XML</span></label><input class="sr-only" type="radio" name="fs2" id="fs2-c">
-      </div></div></div>
-</div>
-<h3>Filter: Collapsed (click left option)</h3>
-<div class="row">
-  <div class="control control--filter">
-    <div class="goo-bg"><div class="bubble">Premium</div></div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="fc-a">Free</label><input class="sr-only" type="radio" name="fc" id="fc-a" checked>
-      <div class="group" data-label="Premium" data-opts="Solo · Team"><div class="indicator"></div>
-                <label for="fc-b"><span>Solo</span></label><input class="sr-only" type="radio" name="fc" id="fc-b">
-        <label for="fc-c"><span>Team</span></label><input class="sr-only" type="radio" name="fc" id="fc-c">
-      </div></div></div>
-  <div class="control rounded control--filter">
-    <div class="goo-bg"><div class="bubble">Premium</div></div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="fc2-a">Free</label><input class="sr-only" type="radio" name="fc2" id="fc2-a" checked>
-      <div class="group" data-label="Premium" data-opts="Solo · Team"><div class="indicator"></div>
-                <label for="fc2-b"><span>Solo</span></label><input class="sr-only" type="radio" name="fc2" id="fc2-b">
-        <label for="fc2-c"><span>Team</span></label><input class="sr-only" type="radio" name="fc2" id="fc2-c">
-      </div></div></div>
-  <div class="control square control--filter">
-    <div class="goo-bg"><div class="bubble">Premium</div></div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="fc3-a">Free</label><input class="sr-only" type="radio" name="fc3" id="fc3-a" checked>
-      <div class="group" data-label="Premium" data-opts="Solo · Team"><div class="indicator"></div>
-                <label for="fc3-b"><span>Solo</span></label><input class="sr-only" type="radio" name="fc3" id="fc3-b">
-        <label for="fc3-c"><span>Team</span></label><input class="sr-only" type="radio" name="fc3" id="fc3-c">
-      </div></div></div>
-</div>
-</body>
-</html>