KidsUI Playground

<!-- Basic usage -->
<kids-button variant="primary">Click Me!</kids-button>

<!-- Different variants -->
<kids-button variant="secondary">Hello!</kids-button>
<kids-button variant="accent" size="lg">Big Button</kids-button>
<kids-button variant="warning" size="sm">Tiny</kids-button>

<!-- Disabled state -->
<kids-button disabled>Disabled</kids-button>

<!-- Basic card with hover effect -->
<kids-card hoverable>
  <span slot="header">Card Title</span>
  Card content goes here!
</kids-card>

<!-- Outlined card with footer -->
<kids-card variant="outlined">
  <span slot="header">Outlined Card</span>
  Secondary content
  <span slot="footer">
    <kids-button variant="secondary" size="sm">Action</kids-button>
  </span>
</kids-card>

<!-- Static badge -->
<kids-badge variant="primary">New!</kids-badge>

<!-- Animated badges -->
<kids-badge variant="secondary" animate="pulse">Pulse</kids-badge>
<kids-badge variant="accent" animate="wiggle">Wiggle</kids-badge>
<kids-badge variant="warning" animate="bounce">Bounce</kids-badge>

<!-- Basic toggle -->
<kids-toggle variant="primary">Sound</kids-toggle>

<!-- Pre-checked toggle -->
<kids-toggle checked>Enabled</kids-toggle>

<!-- Large accent toggle -->
<kids-toggle variant="accent" size="lg">Dark Mode</kids-toggle>

<!-- Listen for changes -->
<script>
  document.querySelector('kids-toggle').addEventListener('kids-toggle', (e) => {
    console.log('Toggled:', e.detail.checked);
  });
</script>

<!-- Basic input -->
<kids-input placeholder="What's your name?"></kids-input>

<!-- Outlined variant -->
<kids-input variant="outlined"></kids-input>

<!-- Different sizes -->
<kids-input size="sm"></kids-input>
<kids-input size="lg"></kids-input>

<!-- Listen for input -->
<script>
  document.querySelector('kids-input').addEventListener('kids-input', (e) => {
    console.log('Value:', e.detail.value);
  });
</script>

<!-- Basic progress bar -->
<kids-progress value="75"></kids-progress>

<!-- With label and stripes -->
<kids-progress value="60" striped label></kids-progress>

<!-- Different sizes and variants -->
<kids-progress value="45" variant="secondary" size="lg"></kids-progress>
<kids-progress value="30" variant="warning" size="sm"></kids-progress>

<!-- Image avatar -->
<kids-avatar src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix"></kids-avatar>

<!-- Different sizes -->
<kids-avatar src="..." size="sm"></kids-avatar>
<kids-avatar src="..." size="lg"></kids-avatar>

<!-- Initials avatar -->
<kids-avatar variant="primary" size="xl">JD</kids-avatar>
<kids-avatar variant="accent">AB</kids-avatar>

<!-- Info alert -->
<kids-alert variant="info">This is an informational message!</kids-alert>

<!-- Success alert -->
<kids-alert variant="success">Great job!</kids-alert>

<!-- Dismissible warning -->
<kids-alert variant="warning" dismissible>Watch out!</kids-alert>

<!-- Listen for dismiss -->
<script>
  document.querySelector('kids-alert').addEventListener('kids-dismiss', () => {
    console.log('Alert dismissed');
  });
</script>

<!-- Simple divider -->
<kids-divider color="primary"></kids-divider>

<!-- Dashed with label -->
<kids-divider variant="dashed" color="secondary">or</kids-divider>

<!-- Wavy divider -->
<kids-divider variant="wavy" color="warning"></kids-divider>

<!-- Basic chip -->
<kids-chip variant="primary">Science</kids-chip>

<!-- Selected chip -->
<kids-chip selected>Math</kids-chip>

<!-- Removable chip -->
<kids-chip removable>Art</kids-chip>

<!-- Listen for events -->
<script>
  document.querySelector('kids-chip').addEventListener('kids-remove', () => {
    console.log('Chip removed');
  });
</script>

<!-- Tooltip on top -->
<kids-tooltip text="I'm on top!" position="top">
  <kids-button>Hover me</kids-button>
</kids-tooltip>

<!-- Different positions and variants -->
<kids-tooltip text="Down here!" position="bottom" variant="primary">
  <kids-button>Bottom</kids-button>
</kids-tooltip>

<!-- Classic spinner -->
<kids-spinner></kids-spinner>

<!-- Dots animation -->
<kids-spinner type="dots"></kids-spinner>

<!-- Bouncing ball -->
<kids-spinner type="bounce" size="lg"></kids-spinner>

<!-- Radio group -->
<kids-radio name="fruit" value="apple" checked>Apple</kids-radio>
<kids-radio name="fruit" value="banana">Banana</kids-radio>
<kids-radio name="fruit" value="cherry">Cherry</kids-radio>

<!-- Listen for selection -->
<script>
  document.querySelectorAll('kids-radio').forEach(radio => {
    radio.addEventListener('kids-radio-change', (e) => {
      console.log('Selected:', e.detail.value);
    });
  });
</script>

<!-- Basic checkbox -->
<kids-checkbox>I agree to terms</kids-checkbox>

<!-- Pre-checked with variant -->
<kids-checkbox variant="accent" checked>Enable rainbows</kids-checkbox>

<!-- Listen for changes -->
<script>
  document.querySelector('kids-checkbox').addEventListener('kids-checkbox-change', (e) => {
    console.log('Checked:', e.detail.checked);
  });
</script>

<!-- Basic textarea -->
<kids-textarea placeholder="Write your story..." rows="3"></kids-textarea>

<!-- Outlined variant -->
<kids-textarea variant="outlined" rows="2"></kids-textarea>

<!-- Basic select -->
<kids-select placeholder="Pick a fruit!">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</kids-select>

<!-- Outlined variant -->
<kids-select variant="outlined">...</kids-select>

<!-- Listen for selection -->
<script>
  document.querySelector('kids-select').addEventListener('kids-change', (e) => {
    console.log('Selected:', e.detail.value, e.detail.label);
  });
</script>

<!-- Default tabs -->
<kids-tabs active="0">
  <kids-tab label="Story">Once upon a time...</kids-tab>
  <kids-tab label="Quiz">Question here</kids-tab>
  <kids-tab label="Activity">Draw something!</kids-tab>
</kids-tabs>

<!-- Pills variant -->
<kids-tabs variant="pills">...</kids-tabs>

<!-- Dialog trigger -->
<kids-button onclick="document.getElementById('my-dialog').setAttribute('open','')">
  Open Dialog
</kids-button>

<!-- Dialog definition -->
<kids-dialog id="my-dialog" title="Hello!">
  <p>Dialog content goes here.</p>
  <span slot="footer">
    <kids-button onclick="document.getElementById('my-dialog').removeAttribute('open')">
      Close
    </kids-button>
  </span>
</kids-dialog>

<!-- Toast trigger -->
<kids-button onclick="document.getElementById('my-toast').setAttribute('open','')">
  Show Toast
</kids-button>

<!-- Toast definition -->
<kids-toast id="my-toast" variant="success" duration="3000" position="top-right">
  Great job! You earned a star!
</kids-toast>

<!-- Basic slider -->
<kids-slider label="Volume" value="60"></kids-slider>

<!-- Custom range -->
<kids-slider label="Difficulty" value="30" min="0" max="100"></kids-slider>

<!-- Different variant -->
<kids-slider variant="accent"></kids-slider>

<!-- Basic accordion -->
<kids-accordion>
  <kids-accordion-item label="Question 1?" open>
    Answer goes here!
  </kids-accordion-item>
  <kids-accordion-item label="Question 2?">
    Another answer!
  </kids-accordion-item>
</kids-accordion>

<!-- Allow multiple open -->
<kids-accordion multiple>...</kids-accordion>

<!-- Basic stepper -->
<kids-stepper
  steps='["Step 1","Step 2","Step 3"]'
  active="1"
></kids-stepper>

<!-- Compact variant -->
<kids-stepper variant="compact" steps='["A","B","C"]' active="0">
</kids-stepper>

<!-- Text lines -->
<kids-skeleton variant="text" lines="2"></kids-skeleton>

<!-- Circle avatar placeholder -->
<kids-skeleton variant="circle" width="48px" height="48px"></kids-skeleton>

<!-- Card placeholder -->
<kids-skeleton variant="card" height="140px"></kids-skeleton>

<!-- Basic choice card -->
<kids-choice-card value="a">
  Option A text
</kids-choice-card>

<!-- Selected state -->
<kids-choice-card value="b" selected>Option B</kids-choice-card>

<!-- Answer states -->
<kids-choice-card value="c" correct>Correct answer</kids-choice-card>
<kids-choice-card value="d" incorrect>Wrong answer</kids-choice-card>

<!-- Tip callout -->
<kids-callout variant="tip">
  Always read carefully!
</kids-callout>

<!-- Fun fact -->
<kids-callout variant="fun-fact">
  Honey never spoils!
</kids-callout>

<!-- Custom title -->
<kids-callout variant="info" title="Custom Heading">
  Content here
</kids-callout>

<!-- Basic lesson nav -->
<kids-lesson-nav current="3" total="5"></kids-lesson-nav>

<!-- With progress indicator -->
<kids-lesson-nav current="2" total="8" show-progress></kids-lesson-nav>

<!-- Listen for navigation -->
<script>
  document.querySelector('kids-lesson-nav').addEventListener('kids-next', () => {
    console.log('Next clicked');
  });
</script>

<!-- Lesson progress tracker -->
<kids-lesson-progress lessons='[
  {"title":"Intro","status":"completed"},
  {"title":"Lesson 1","status":"completed"},
  {"title":"Lesson 2","status":"current"},
  {"title":"Quiz","status":"locked"}
]'></kids-lesson-progress>

<!-- Map variant -->
<kids-lesson-progress variant="map" lessons='[...]'></kids-lesson-progress>

<!-- Question card -->
<kids-question-card number="3" total="10" points="5">
  <span slot="question">Which planet...?</span>
  
  <kids-choice-card value="a">Venus</kids-choice-card>
  <kids-choice-card value="b">Mars</kids-choice-card>
  
  <span slot="hint">Think about...</span>
</kids-question-card>

<!-- Single select (default) -->
<kids-choice-group>
  <kids-choice-card value="a">Option A</kids-choice-card>
  <kids-choice-card value="b">Option B</kids-choice-card>
</kids-choice-group>

<!-- Multiple select grid -->
<kids-choice-group mode="multiple" direction="grid" columns="2">
  <kids-choice-card value="dog">Dog</kids-choice-card>
  <kids-choice-card value="cat">Cat</kids-choice-card>
</kids-choice-group>

<!-- Empty state -->
<kids-empty-state
  icon="📚"
  title="No lessons yet!"
  message="Start your first lesson..."
>
  <kids-button slot="action">Start Learning</kids-button>
</kids-empty-state>

<!-- Trigger button -->
<kids-button onclick="document.getElementById('achievement').setAttribute('open','')">
  Unlock!
</kids-button>

<!-- Achievement popup -->
<kids-achievement
  id="achievement"
  icon="🏆"
  title="Quiz Master!"
  message="You scored 100%!"
  variant="gold"
></kids-achievement>

<!-- Flashcard -->
<kids-flashcard>
  <span slot="front">What is H₂O?</span>
  <span slot="back">Water!</span>
</kids-flashcard>

<!-- Compact variant -->
<kids-flashcard variant="compact">...</kids-flashcard>

<!-- Matching exercise -->
<kids-match-grid pairs='[
  {"left":"Cat","right":"Meow"},
  {"left":"Dog","right":"Woof"},
  {"left":"Cow","right":"Moo"}
]'></kids-match-grid>

<!-- Listen for matches -->
<script>
  document.querySelector('kids-match-grid').addEventListener('kids-match', (e) => {
    console.log('Match:', e.detail.correct ? 'Correct!' : 'Try again');
  });
</script>

<!-- Sorting exercise -->
<kids-sort-list
  items='["Earth","Venus","Mars","Mercury"]'
  correct='["Mercury","Venus","Earth","Mars"]'
></kids-sort-list>

<!-- Check answer programmatically -->
<script>
  const sortList = document.querySelector('kids-sort-list');
  sortList.check(); // Returns true/false, triggers kids-check event
</script>

<!-- Countdown timer -->
<kids-timer duration="60" running></kids-timer>

<!-- Circular variant -->
<kids-timer duration="120" variant="circular"></kids-timer>

<!-- Control timer -->
<script>
  const timer = document.querySelector('kids-timer');
  timer.setAttribute('running', '');   // Start
  timer.removeAttribute('running');   // Pause
  timer.reset();                      // Reset
</script>