atoms-element v5.0.0

import { classMap, createElement, css, html } from '../../index.js';

// State lives only in the count attribute — no separate internal copy to
// keep in sync. Counter.attrs below declares count as a Number: that folds
// it into observedAttributes on its own (name is still destructured as a
// plain param since it's only ever displayed, never written), and
// createElement hands count to this function already wrapped as a
// {value} getter/setter box, type-checked against the declared constructor.
// count must be set in markup (no default) — reading count.value throws
// otherwise. count.value += 1 reads the live attribute and writes straight
// back via setAttribute.
//
// <output> is the element HTML actually defines for "the result of a
// calculation" — a live-updating count is exactly that, which is what lets
// the CSS below style it by tag name instead of an accessory class like the
// old .count.
const Counter = ({ name, count }) => {
  const increment = () => { count.value += 1; };
  const decrement = () => { count.value -= 1; };

  return html`
    <p>Counter: ${name}</p>
    <div class="controls">
      <button type="button" aria-label="Decrement" @click=${decrement}>-</button>
      <output class=${classMap({ warning: count.value > 10 })}>${count.value}</output>
      <button type="button" aria-label="Increment" @click=${increment}>+</button>
    </div>
  `;
};

Counter.attrs = { count: Number };

Counter.styles = css`
  :scope {
    display: block;
    margin-top: 2.5rem;
    color: rgb(55 65 81);
    --color-danger: rgb(239 68 68);
    --color-button-bg: rgb(209 213 219);
    --color-button-bg-hover: rgb(229 231 235);
  }
  p {
    margin: 0 0 0.5rem;
  }
  .controls {
    display: flex;
    align-items: center;
  }
  output {
    margin: 0 5rem;
    font-size: 1.875rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }
  output.warning {
    color: var(--color-danger);
  }
  button {
    background-color: var(--color-button-bg);
    color: inherit;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    font-size: 1.875rem;
  }
  button:hover {
    background-color: var(--color-button-bg-hover);
  }
  button:focus {
    outline: none;
  }
`;

export default createElement(import.meta, Counter);