npm - @mks2508/mks-ui - Versions diffs - 0.5.7 → 0.6.0 - Mend

@mks2508/mks-ui 0.5.7 → 0.6.0

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 (271) hide show

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

@@ -1,227 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>v8b — Isolate CSS culprit</title>
-<style>
-  :root {
-    --fg: #e2e8f0; --bg: #0f172a; --card: #1e293b;
-    --muted: #64748b; --border: #334155; --accent: #e2e8f0;
-    --dt-dur: 0.22s; --dt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
-    --dt-indicator-dur: 0.3s; --dt-indicator-ease: cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  * { box-sizing: border-box; margin: 0; }
-  body {
-    min-height: 100vh; display: flex; flex-direction: column; align-items: center;
-    padding: 3rem 1rem; gap: 2rem; background: var(--bg);
-    font-family: system-ui, sans-serif; color: var(--fg);
-  }
-  h2 { font-size: 1rem; }
-  h3 { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
-  p.note { color: var(--muted); font-size: 10px; max-width: 200px; text-align: center; }
-  .row { display: flex; gap: 3rem; flex-wrap: wrap; justify-content: center; }
-  .col { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
-  button {
-    padding: 0.5rem 1.5rem; border-radius: 8px; border: 1px solid var(--border);
-    background: var(--card); color: var(--fg); cursor: pointer; font-size: 0.8rem;
-  }
-  /* ════ Gooey canvas — EXACT same as v8 prototype ════ */
-  .gooey-canvas {
-    position: absolute; inset: 0;
-    border-radius: 9999px;
-    pointer-events: none;
-    transform: translateZ(0);
-    contain: layout style;
-    overflow: visible;
-  }
-  .gooey-canvas svg { position: absolute; overflow: visible; }
-  /* ════ Wrapper (same in all variants) ════ */
-  .demo {
-    position: relative;
-    width: 260px; height: 38px;
-    margin-top: 20px;
-    border-radius: 9999px;
-  }
-  /* ════ React-like wrappers ════ */
-  .dt-root {
-    position: relative; padding: 2px; user-select: none;
-    height: 38px; width: 260px; font-size: 12px; border-radius: 9999px;
-    /* filter mode: */
-    background: transparent; border: 1px solid transparent;
-    overflow: visible;
-  }
-  .dt-track {
-    position: relative; display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    place-items: center; width: 100%; height: 100%;
-    z-index: 1;
-  }
-  .dt-group {
-    grid-column: span 2; position: relative;
-    width: 100%; height: 100%;
-    display: grid; grid-template-columns: repeat(2, 1fr);
-    container-type: size; overflow: hidden;
-  }
-  .dt-indicator {
-    position: absolute; width: 50%; left: 50%; top: 0; bottom: 0;
-    background: var(--accent); border-radius: 9999px;
-    pointer-events: none; z-index: 0;
-    transition: left var(--dt-indicator-dur) var(--dt-indicator-ease);
-  }
-  .dt-option {
-    display: inline-grid; place-items: center;
-    cursor: pointer; font-weight: 500; z-index: 2;
-    height: 100%; width: 100%; grid-column: span 2;
-  }
-  .dt-group label {
-    display: inline-grid; place-items: center;
-    cursor: pointer; font-weight: 500; z-index: 2;
-    height: 100%; width: 100%; color: var(--muted);
-    transition: color var(--dt-dur) var(--dt-ease), opacity var(--dt-dur) var(--dt-ease);
-  }
-</style>
-</head>
-<body>
-<h2>v8b — What kills the gooey in Safari?</h2>
-<button onclick="toggleAll()">Toggle All</button>
-<div class="row">
-  <div class="col">
-    <h3>1: Bare (v8 exact)</h3>
-    <div class="demo"><div class="gooey-canvas" id="c1"></div></div>
-  </div>
-  <div class="col">
-    <h3>2: + dt-root only</h3>
-    <p class="note">Root wrapper, no track/group</p>
-    <div class="dt-root"><div class="gooey-canvas" id="c2"></div></div>
-  </div>
-  <div class="col">
-    <h3>3: + track (z-index:1)</h3>
-    <p class="note">Root + track with z-index:1</p>
-    <div class="dt-root">
-      <div class="gooey-canvas" id="c3"></div>
-      <div class="dt-track"></div>
-    </div>
-  </div>
-</div>
-<div class="row" style="margin-top:1.5rem">
-  <div class="col">
-    <h3>4: + group (container+overflow)</h3>
-    <p class="note">Full structure with labels</p>
-    <div class="dt-root">
-      <div class="gooey-canvas" id="c4"></div>
-      <div class="dt-track">
-        <div class="dt-indicator"></div>
-        <label class="dt-option"><span>Free</span></label>
-        <div class="dt-group">
-          <label><span>Solo</span></label>
-          <label><span>Team</span></label>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col">
-    <h3>5: Full BUT no container-type</h3>
-    <p class="note">Group: container-type:normal, overflow:visible</p>
-    <div class="dt-root">
-      <div class="gooey-canvas" id="c5"></div>
-      <div class="dt-track">
-        <div class="dt-indicator"></div>
-        <label class="dt-option"><span>Free</span></label>
-        <div class="dt-group" style="container-type:normal;overflow:visible;">
-          <label><span>Solo</span></label>
-          <label><span>Team</span></label>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="col">
-    <h3>6: Full BUT track z-index:auto</h3>
-    <p class="note">Track without stacking context</p>
-    <div class="dt-root">
-      <div class="gooey-canvas" id="c6"></div>
-      <div class="dt-track" style="z-index:auto;">
-        <div class="dt-indicator"></div>
-        <label class="dt-option"><span>Free</span></label>
-        <div class="dt-group">
-          <label><span>Solo</span></label>
-          <label><span>Team</span></label>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<script>
-const W=260, H=38, PAD=2, BH=15, TH=H+BH;
-const ER=Math.min(9999,H/2), IPX=W*0.2, BW=W-2*IPX;
-const BR=Math.min(ER*0.6,BH*0.45,12), FILL='#1e293b', BLUR=Math.round(H*0.15);
-const SPRING=`linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 62.5%, 1.001 74.7%, 1)`;
-const EOUT='cubic-bezier(0.33, 1, 0.68, 1)';
-let gid=0;
-function mkSVG(el) {
-  const id='goo-'+(++gid);
-  const svg=document.createElementNS('http://www.w3.org/2000/svg','svg');
-  svg.setAttribute('width',W); svg.setAttribute('height',TH);
-  svg.setAttribute('viewBox',`0 0 ${W} ${TH}`);
-  svg.style.cssText=`position:absolute;top:-${BH}px;left:0;overflow:visible`;
-  svg.innerHTML=`<defs><filter id="${id}" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="${BLUR}" 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>`;
-  const pill=document.createElementNS('http://www.w3.org/2000/svg','rect');
-  pill.setAttribute('x',PAD); pill.setAttribute('y',BH);
-  pill.setAttribute('width',W-PAD*2); pill.setAttribute('height',H-PAD*2);
-  pill.setAttribute('rx',ER); pill.setAttribute('ry',ER);
-  pill.setAttribute('fill',FILL);
-  svg.appendChild(pill);
-  const b=document.createElementNS('http://www.w3.org/2000/svg','rect');
-  b.setAttribute('x',IPX); b.setAttribute('y',BH);
-  b.setAttribute('width',BW); b.setAttribute('height',0);
-  b.setAttribute('rx',BR); b.setAttribute('ry',BR);
-  b.setAttribute('fill',FILL);
-  svg.appendChild(b);
-  el.style.filter=`url(#${id}) drop-shadow(0 0 0.5px #334155) drop-shadow(0 0 0.5px #334155)`;
-  el.appendChild(svg);
-  return b;
-}
-const toggles=[];
-function mk(cid) {
-  const bubble=mkSVG(document.getElementById(cid));
-  let exp=false, anim=null, last={y:BH,h:0};
-  toggles.push(()=>{
-    exp=!exp;
-    const toY=exp?0:BH, toH=exp?BH:0;
-    if(anim) anim.cancel();
-    anim=bubble.animate(
-      [{y:`${last.y}px`,height:`${last.h}px`},{y:`${toY}px`,height:`${toH}px`}],
-      {duration:exp?550:400, easing:exp?SPRING:EOUT, fill:'forwards'}
-    );
-    last={y:toY,h:toH};
-  });
-}
-function init(){
-  ['c1','c2','c3','c4','c5','c6'].forEach(mk);
-}
-function toggleAll(){toggles.forEach(fn=>fn());}
-document.addEventListener('DOMContentLoaded',init);
-</script>
-</body>
-</html>

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

@@ -1,419 +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 v6</title>
-<style>
-  :root {
-    --fg: #e2e8f0;
-    --bg: #0f172a;
-    --card: #1e293b;
-    --muted: #64748b;
-    --border: #334155;
-    --duration: 0.22;
-    --drop-off: 0.4;
-    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
-  }
-  * { box-sizing: border-box; margin: 0; }
-  body {
-    min-height: 100vh;
-    display: flex; flex-direction: column; align-items: center;
-    padding: 4rem 1rem; gap: 3rem;
-    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; }
-  /* Debug toggle */
-  #debug-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 999; padding: 0.5rem 1rem; border-radius: 8px; background: #334155; color: #e2e8f0; border: 1px solid #475569; cursor: pointer; font-size: 12px; }
-  /* ================================================================
-   * CONTROL
-   * ================================================================ */
-  .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); }
-  .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;
-  }
-  .premium {
-    width: 100%; height: 100%;
-    display: grid; position: relative;
-    grid-template-columns: 1fr 1fr;
-    container-type: size;
-  }
-  .premium, .control__track > label:nth-of-type(1) { grid-column: span 2; }
-  .premium::before { display: none; }
-  .premium .indicator {
-    background: var(--fg); left: 50%; top: 0;
-    translate: -50% 0;
-    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));
-  }
-  .premium label span {
-    display: grid; place-items: center; height: 100%; width: 100%;
-    transition: scale calc(var(--duration) * 1s) var(--ease);
-  }
-  .premium label:nth-of-type(1) span { scale: 0.75; transform-origin: 150% 150%; border-radius: var(--radius); }
-  .premium label:nth-of-type(2) span { scale: 0.75; transform-origin: -65% 150%; border-radius: var(--radius); }
-  .premium label {
-    color: var(--muted);
-    transition: color calc(var(--duration) * 1s) var(--ease), opacity calc(var(--duration) * 1s) var(--ease);
-  }
-  .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) .premium .indicator { background: var(--muted); }
-  .control__track:has(> :checked) .premium label { color: var(--muted); }
-  .premium:has(:checked) label span { scale: 1; }
-  .premium:has(:checked) .indicator { background: var(--card); clip-path: inset(0 0 0 0 round var(--radius)); }
-  .premium:has(:checked) label { color: var(--muted); opacity: 0.75; }
-  .premium:has(:nth-of-type(1):checked) label:nth-of-type(1),
-  .premium:has(:nth-of-type(2):checked) label:nth-of-type(2) { color: var(--fg); opacity: 1; }
-  .premium:has(:nth-of-type(1):checked) .indicator { translate: -100% 0; }
-  .premium:has(:nth-of-type(2):checked) .indicator { translate: 0 0; }
-  /* ================================================================
-   * BUBBLE — full width, ears at bottom corners
-   * Ears positioned at the junction line, curving inward
-   * ================================================================ */
-  .bubble {
-    position: absolute;
-    left: var(--_r);
-    right: var(--_r);
-    bottom: 100%;
-    margin-bottom: -1px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--card);
-    border: 1px solid var(--border);
-    border-bottom: none;
-    border-radius: calc(var(--_r) * 0.4) calc(var(--_r) * 0.4) 0 0;
-    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);
-  }
-  /*
-   * Concave ears — positioned BELOW the bubble, extending into the
-   * pill's border-radius corner area. The transparent quarter-circle
-   * reveals the page bg, creating the concave junction.
-   *
-   * All positions adjustable via --ear-* CSS vars (control panel).
-   */
-  .bubble::before,
-  .bubble::after {
-    content: '';
-    position: absolute;
-    bottom: calc(-5px + var(--ear-ly, 0px));
-    width: var(--_r);
-    height: var(--_r);
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity calc(var(--duration) * 1s) var(--ease);
-  }
-  .bubble::before {
-    left: calc(var(--_r) * -1 + var(--ear-lx, 0px));
-    background: radial-gradient(
-      circle at var(--ear-co-l, 0% 0%),
-      transparent calc(var(--_r) - 1.5px),
-      var(--border) calc(var(--_r) - 0.5px),
-      var(--card) var(--_r)
-    );
-  }
-  .bubble::after {
-    right: calc(var(--_r) * -1 + var(--ear-rx, 0px));
-    background: radial-gradient(
-      circle at var(--ear-co-r, 100% 0%),
-      transparent calc(var(--_r) - 1.5px),
-      var(--border) calc(var(--_r) - 0.5px),
-      var(--card) var(--_r)
-    );
-  }
-  .control:has(.premium :checked) .bubble::before,
-  .control:has(.premium :checked) .bubble::after {
-    opacity: 1;
-  }
-  /* DEBUG: show ear boundaries */
-  [data-debug="true"] .bubble { outline: 2px dashed red; }
-  [data-debug="true"] .bubble::before { opacity: 1 !important; outline: 1px dashed cyan; }
-  [data-debug="true"] .bubble::after { opacity: 1 !important; outline: 1px dashed magenta; }
-  /* Active: bubble grows + ears show */
-  .control:has(.premium :checked) .bubble {
-    height: calc(var(--h) * 0.7);
-    padding: 0 0.75em;
-    opacity: 1;
-    overflow: visible;
-  }
-  .control:has(.premium :checked) .bubble::before,
-  .control:has(.premium :checked) .bubble::after {
-    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; }
-</style>
-</head>
-<body>
-<div id="controls" style="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:280px;">
-  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">
-    <strong style="color:#e2e8f0">Ear Controls</strong>
-    <button onclick="if(document.body.dataset.debug==='true'){document.body.dataset.debug='false'}else{document.body.dataset.debug='true'}" style="padding:2px 8px;border-radius:4px;background:#334155;color:#e2e8f0;border:1px solid #475569;cursor:pointer;font-size:10px">Debug Colors</button>
-  </div>
-  <label>Left X: <span id="v-lx">0</span>px
-    <input type="range" min="-50" max="50" value="0" oninput="document.documentElement.style.setProperty('--ear-lx',this.value+'px');document.getElementById('v-lx').textContent=this.value" style="width:100%">
-  </label>
-  <label>Left Y (bottom offset): <span id="v-ly">0</span>
-    <input type="range" min="-50" max="50" value="0" oninput="document.documentElement.style.setProperty('--ear-ly',this.value+'px');document.getElementById('v-ly').textContent=this.value" style="width:100%">
-  </label>
-  <label>Right X: <span id="v-rx">0</span>px
-    <input type="range" min="-50" max="50" value="0" oninput="document.documentElement.style.setProperty('--ear-rx',this.value+'px');document.getElementById('v-rx').textContent=this.value" style="width:100%">
-  </label>
-  <label>Right Y (bottom offset): <span id="v-ry">0</span>
-    <input type="range" min="-50" max="50" value="0" oninput="document.documentElement.style.setProperty('--ear-ry',this.value+'px');document.getElementById('v-ry').textContent=this.value" style="width:100%">
-  </label>
-  <div style="margin-top:0.25rem;border-top:1px solid #334155;padding-top:0.25rem">
-    <strong style="color:#e2e8f0;font-size:10px">Quick: Both Y</strong>
-  </div>
-  <label>Both Y offset: <span id="v-by">0</span>
-    <input type="range" min="-50" max="50" value="0" oninput="var v=this.value+'px';document.documentElement.style.setProperty('--ear-ly',v);document.documentElement.style.setProperty('--ear-ry',v);document.getElementById('v-by').textContent=this.value;document.getElementById('v-ly').textContent=this.value;document.getElementById('v-ry').textContent=this.value" style="width:100%">
-  </label>
-  <label>Circle Origin Left: <span id="v-co1">0% 0%</span>
-    <select onchange="document.documentElement.style.setProperty('--ear-co-l',this.value);document.getElementById('v-co1').textContent=this.value" style="width:100%;background:#0f172a;color:#e2e8f0;border:1px solid #475569;border-radius:4px;padding:2px">
-      <option value="0% 0%">0% 0% (top-left)</option>
-      <option value="100% 0%">100% 0% (top-right)</option>
-      <option value="100% 100%">100% 100% (bottom-right)</option>
-      <option value="0% 100%">0% 100% (bottom-left)</option>
-      <option value="50% 50%">50% 50% (center)</option>
-    </select>
-  </label>
-  <label>Circle Origin Right: <span id="v-co2">100% 0%</span>
-    <select onchange="document.documentElement.style.setProperty('--ear-co-r',this.value);document.getElementById('v-co2').textContent=this.value" style="width:100%;background:#0f172a;color:#e2e8f0;border:1px solid #475569;border-radius:4px;padding:2px">
-      <option value="100% 0%">100% 0% (top-right)</option>
-      <option value="0% 0%">0% 0% (top-left)</option>
-      <option value="0% 100%">0% 100% (bottom-left)</option>
-      <option value="100% 100%">100% 100% (bottom-right)</option>
-      <option value="50% 50%">50% 50% (center)</option>
-    </select>
-  </label>
-  <div style="margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid #334155;font-size:10px;color:#64748b" id="css-out"></div>
-  <button onclick="
-    var s=getComputedStyle(document.documentElement);
-    document.getElementById('css-out').textContent=
-      'left:'+s.getPropertyValue('--ear-lx')+' bottom:'+s.getPropertyValue('--ear-ly')+
-      ' | right:'+s.getPropertyValue('--ear-rx')+' bottom:'+s.getPropertyValue('--ear-ry')+
-      ' | size:'+s.getPropertyValue('--ear-pct')+'% | L-origin:'+s.getPropertyValue('--ear-co-l')+
-      ' | R-origin:'+s.getPropertyValue('--ear-co-r');
-  " style="padding:4px 8px;border-radius:4px;background:#334155;color:#e2e8f0;border:1px solid #475569;cursor:pointer;font-size:10px">Copy Current Values</button>
-</div>
-<h3>All Sizes — Pill</h3>
-<div class="row">
-  <div><h3>XS</h3>
-    <div class="control xs">
-      <div class="bubble">Changes</div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="xs-a">Tree</label><input class="sr-only" type="radio" name="xs" id="xs-a">
-        <div class="premium"><div class="indicator"></div>
-          <label for="xs-b"><span>Flat</span></label><input class="sr-only" type="radio" name="xs" id="xs-b" checked>
-          <label for="xs-c"><span>Grp</span></label><input class="sr-only" type="radio" name="xs" id="xs-c">
-        </div></div></div></div>
-  <div><h3>SM</h3>
-    <div class="control sm">
-      <div class="bubble">Changes</div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="sm-a">Tree</label><input class="sr-only" type="radio" name="sm" id="sm-a">
-        <div class="premium"><div class="indicator"></div>
-          <label for="sm-b"><span>Flat</span></label><input class="sr-only" type="radio" name="sm" id="sm-b" checked>
-          <label for="sm-c"><span>Grp</span></label><input class="sr-only" type="radio" name="sm" id="sm-c">
-        </div></div></div></div>
-  <div><h3>Default</h3>
-    <div class="control">
-      <div class="bubble">Premium</div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="df-a">Free</label><input class="sr-only" type="radio" name="df" id="df-a">
-        <div class="premium"><div class="indicator"></div>
-          <label for="df-b"><span>Solo</span></label><input class="sr-only" type="radio" name="df" id="df-b" checked>
-          <label for="df-c"><span>Team</span></label><input class="sr-only" type="radio" name="df" id="df-c">
-        </div></div></div></div>
-  <div><h3>LG</h3>
-    <div class="control lg">
-      <div class="bubble">Billing</div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="lg-a">Annual</label><input class="sr-only" type="radio" name="lg" id="lg-a">
-        <div class="premium"><div class="indicator"></div>
-          <label for="lg-b"><span>Monthly</span></label><input class="sr-only" type="radio" name="lg" id="lg-b" checked>
-          <label for="lg-c"><span>Weekly</span></label><input class="sr-only" type="radio" name="lg" id="lg-c">
-        </div></div></div></div>
-  <div><h3>XL</h3>
-    <div class="control xl">
-      <div class="bubble">Enterprise</div>
-      <div class="control__track"><div class="indicator"></div>
-        <label for="xl-a">Standard</label><input class="sr-only" type="radio" name="xl" id="xl-a">
-        <div class="premium"><div class="indicator"></div>
-          <label for="xl-b"><span>Business</span></label><input class="sr-only" type="radio" name="xl" id="xl-b" checked>
-          <label for="xl-c"><span>Custom</span></label><input class="sr-only" type="radio" name="xl" id="xl-c">
-        </div></div></div></div>
-</div>
-<h3>Rounded</h3>
-<div class="row">
-  <div class="control sm rounded">
-    <div class="bubble">Mode</div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="r1-a">Off</label><input class="sr-only" type="radio" name="r1" id="r1-a">
-      <div class="premium"><div class="indicator"></div>
-        <label for="r1-b"><span>Auto</span></label><input class="sr-only" type="radio" name="r1" id="r1-b" checked>
-        <label for="r1-c"><span>Manual</span></label><input class="sr-only" type="radio" name="r1" id="r1-c">
-      </div></div></div>
-  <div class="control rounded">
-    <div class="bubble">Theme</div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="r2-a">System</label><input class="sr-only" type="radio" name="r2" id="r2-a">
-      <div class="premium"><div class="indicator"></div>
-        <label for="r2-b"><span>Light</span></label><input class="sr-only" type="radio" name="r2" id="r2-b" checked>
-        <label for="r2-c"><span>Dark</span></label><input class="sr-only" type="radio" name="r2" id="r2-c">
-      </div></div></div>
-  <div class="control lg rounded">
-    <div class="bubble">Advanced</div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="r3-a">Basic</label><input class="sr-only" type="radio" name="r3" id="r3-a">
-      <div class="premium"><div class="indicator"></div>
-        <label for="r3-b"><span>Pro</span></label><input class="sr-only" type="radio" name="r3" id="r3-b" checked>
-        <label for="r3-c"><span>Expert</span></label><input class="sr-only" type="radio" name="r3" id="r3-c">
-      </div></div></div>
-</div>
-<h3>Square</h3>
-<div class="row">
-  <div class="control sm square">
-    <div class="bubble">Group</div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="sq1-a">A</label><input class="sr-only" type="radio" name="sq1" id="sq1-a">
-      <div class="premium"><div class="indicator"></div>
-        <label for="sq1-b"><span>B</span></label><input class="sr-only" type="radio" name="sq1" id="sq1-b" checked>
-        <label for="sq1-c"><span>C</span></label><input class="sr-only" type="radio" name="sq1" id="sq1-c">
-      </div></div></div>
-  <div class="control square">
-    <div class="bubble">Output</div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="sq2-a">Input</label><input class="sr-only" type="radio" name="sq2" id="sq2-a">
-      <div class="premium"><div class="indicator"></div>
-        <label for="sq2-b"><span>JSON</span></label><input class="sr-only" type="radio" name="sq2" id="sq2-b" checked>
-        <label for="sq2-c"><span>XML</span></label><input class="sr-only" type="radio" name="sq2" id="sq2-c">
-      </div></div></div>
-  <div class="control lg square">
-    <div class="bubble">Target</div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="sq3-a">Source</label><input class="sr-only" type="radio" name="sq3" id="sq3-a">
-      <div class="premium"><div class="indicator"></div>
-        <label for="sq3-b"><span>Dev</span></label><input class="sr-only" type="radio" name="sq3" id="sq3-b" checked>
-        <label for="sq3-c"><span>Prod</span></label><input class="sr-only" type="radio" name="sq3" id="sq3-c">
-      </div></div></div>
-</div>
-<h3>Collapsed (click left option)</h3>
-<div class="row">
-  <div class="control">
-    <div class="bubble">Premium</div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="ps-a">Free</label><input class="sr-only" type="radio" name="ps" id="ps-a" checked>
-      <div class="premium"><div class="indicator"></div>
-        <label for="ps-b"><span>Solo</span></label><input class="sr-only" type="radio" name="ps" id="ps-b">
-        <label for="ps-c"><span>Team</span></label><input class="sr-only" type="radio" name="ps" id="ps-c">
-      </div></div></div>
-  <div class="control rounded">
-    <div class="bubble">Premium</div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="ps2-a">Free</label><input class="sr-only" type="radio" name="ps2" id="ps2-a" checked>
-      <div class="premium"><div class="indicator"></div>
-        <label for="ps2-b"><span>Solo</span></label><input class="sr-only" type="radio" name="ps2" id="ps2-b">
-        <label for="ps2-c"><span>Team</span></label><input class="sr-only" type="radio" name="ps2" id="ps2-c">
-      </div></div></div>
-  <div class="control square">
-    <div class="bubble">Premium</div>
-    <div class="control__track"><div class="indicator"></div>
-      <label for="ps3-a">Free</label><input class="sr-only" type="radio" name="ps3" id="ps3-a" checked>
-      <div class="premium"><div class="indicator"></div>
-        <label for="ps3-b"><span>Solo</span></label><input class="sr-only" type="radio" name="ps3" id="ps3-b">
-        <label for="ps3-c"><span>Team</span></label><input class="sr-only" type="radio" name="ps3" id="ps3-c">
-      </div></div></div>
-</div>
-</body>
-</html>