1  <script lang="ts">
 2    let count: number = $state(0);
 3    const increment = () => {
 4      count += 1;
 5    };
 6  </script>
 7  
 8  <button type="button" class="counter" onclick={increment}>
 9    Count is {count}
10  </button>
11  
12  <style>
13    .counter {
14      font-family: var(--mono);
15      display: inline-flex;
16      border-radius: 4px;
17      color: var(--text-h);
18    }
19  
20    .counter {
21      font-size: 16px;
22      padding: 5px 10px;
23      border-radius: 5px;
24      color: var(--accent);
25      background: var(--accent-bg);
26      border: 2px solid transparent;
27      transition: border-color 0.3s;
28      margin-bottom: 24px;
29  
30      &:hover {
31        border-color: var(--accent-border);
32      }
33      &:focus-visible {
34        outline: 2px solid var(--accent);
35        outline-offset: 2px;
36      }
37    }
38  </style>