button

<!-- .sk-button goes on a native <button> or an <a>. There is no wrapper and no
     <div role="button">.

     The three rows below are the three things the API has to get right: a
     gradient pill built only from --sk-button-bg and --sk-button-radius, a
     full-width submit in its pending state, and a pair of page actions.

     .sk-button__row is demo layout and nothing else. -->
<div class="sk-button__row">
  <a
    class="sk-button"
    data-variant="gradient"
    data-size="lg"
    href="https://nojsui.com/components/"
    style="--sk-button-radius: var(--sk-radius-full)"
  >
    Start a project
  </a>
  <button type="button" class="sk-button">Solid</button>
  <button type="button" class="sk-button" data-variant="outline">Outline</button>
  <button type="button" class="sk-button" data-variant="ghost">Ghost</button>
  <button type="button" class="sk-button" data-size="sm">Small</button>
  <button type="button" class="sk-button" disabled>Disabled</button>
</div>

<!-- The pending state. Both labels live in one grid cell, so the button is
     already as wide as "Sending…" and does not resize when the state flips. -->
<div class="sk-button__row" data-row="block">
  <button type="button" class="sk-button" aria-busy="true">
    <span class="sk-button__label">Send message</span>
    <span class="sk-button__pending">
      <span class="sk-button__spinner"></span>
      Sending…
    </span>
  </button>
</div>

/* .sk-button — the kit's one button, on a native <button> or an <a>.

   TWO DECISIONS SHAPE THIS FILE.

   1. The fill goes through the `background` SHORTHAND, not background-color.
      The shorthand accepts a <color> or an <image>, so --sk-button-bg takes
      either and data-variant="gradient" is one declaration changing that
      property's default rather than a ruleset of its own. The cost is real and
      documented: contrast-color() cannot evaluate against an image, so a
      gradient fill means setting --sk-button-fg too.

   2. The pending state is a GRID STACK. Both labels sit in one cell and only
      `visibility` changes, so the button is already as wide as the wider label
      and does not resize when "Send" becomes "Sending…". min-inline-size would
      make the consumer guess a number that breaks under a font swap or a
      translation; the grid measures the real thing.

   NO FOCUS RING HERE. base.css draws one ring for the whole kit and components
   never restyle it (CLAUDE.md rule 9).

   Specs:
   - background shorthand ... https://drafts.csswg.org/css-backgrounds-3/#the-background
   - grid-area .............. https://drafts.csswg.org/css-grid-2/#propdef-grid-area
   - visibility ............. https://drafts.csswg.org/css-display-3/#propdef-visibility
   - aria-busy .............. https://w3c.github.io/aria/#aria-busy */

/* Public theme knobs (ADR 0011). Read, never declared, so the nearest
   declaration above the component wins. */
.sk-button {
  --_bg: var(--sk-button-bg, var(--sk-color-accent));
  --_fg: var(--sk-button-fg, var(--sk-color-on-accent));
  --_border-color: var(--sk-button-border-color, var(--sk-color-border-strong));
  --_bg-hover: var(--sk-button-bg-hover, var(--sk-color-surface));
  --_radius: var(--sk-button-radius, var(--sk-radius-md));
  --_press-scale: var(--sk-button-press-scale, 0.98);

  /* Size, as private locals the data-size rules below re-point. */
  --_padding-block: var(--sk-space-xs);
  --_padding-inline: var(--sk-space-md);
  --_font-size: var(--sk-text-sm);

  /* inline-grid, not inline-flex: the pending state needs two children in ONE
     cell, which only grid gives. A button with no children still works — it is
     a grid with one item. */
  display: inline-grid;
  grid-template-areas: "label";
  place-items: center;
  min-block-size: var(--sk-size-tap-target);
  padding-block: var(--_padding-block);
  padding-inline: var(--_padding-inline);

  /* transparent as a literal, not as a var() fallback: the theme contract
     requires colour fallbacks to reach a global token, and rightly — but here
     no border is DRAWN unless the outline variant asks for one. */
  border: var(--sk-border-width) solid transparent;
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_fg);
  font-size: var(--_font-size);
  font-weight: var(--sk-weight-medium);
  line-height: var(--sk-leading-tight);
  text-align: center;

  /* For the <a> case. A button never has a default underline; a link does. */
  text-decoration: none;
}

/* --- variants ----------------------------------------------------------- */

/* `background: none` rather than routing a transparent value through --_bg,
   for the same reason as the border above. Documented consequence: these two
   variants ignore --sk-button-bg. */
.sk-button[data-variant="outline"],
.sk-button[data-variant="ghost"] {
  --_fg: var(--sk-button-fg, var(--sk-color-text));

  background: none;
}

.sk-button[data-variant="outline"] {
  border-color: var(--_border-color);
}

/* The whole gradient variant. One property, because of decision 1 above. */
.sk-button[data-variant="gradient"] {
  --_bg: var(
    --sk-button-bg,
    linear-gradient(
      135deg,
      var(--sk-color-accent),
      color-mix(in oklab, var(--sk-color-accent) 70%, var(--sk-color-text))
    )
  );
}

/* --- sizes -------------------------------------------------------------- */

.sk-button[data-size="sm"] {
  --_padding-block: var(--sk-space-2xs);
  --_padding-inline: var(--sk-space-sm);
  --_font-size: var(--sk-text-xs);
}

.sk-button[data-size="lg"] {
  --_padding-block: var(--sk-space-sm);
  --_padding-inline: var(--sk-space-lg);
  --_font-size: var(--sk-text-md);
}

/* --- pending ------------------------------------------------------------
   Both labels in the same grid cell. Only `visibility` changes, and
   visibility does not affect layout — so the cell keeps the width of the
   wider label and nothing moves when the state flips. `visibility: hidden`
   also removes the inactive label from the accessibility tree, so it is not
   announced twice. */

.sk-button__label,
.sk-button__pending {
  grid-area: label;
  display: inline-flex;
  gap: var(--sk-space-2xs);
  align-items: center;
  visibility: hidden;
}

.sk-button__label {
  visibility: visible;
}

.sk-button[aria-busy="true"] .sk-button__label {
  visibility: hidden;
}

.sk-button[aria-busy="true"] .sk-button__pending {
  visibility: visible;
}

/* 1em so it tracks the label's size across all three data-size values.
   border-inline-end-color leaves the gap that makes the ring read as a
   spinner; it is logical, so it flips in RTL and nothing looks wrong. */
.sk-button__spinner {
  inline-size: 1em;
  block-size: 1em;
  border: var(--sk-border-width) solid currentcolor;
  border-inline-end-color: transparent;
  border-radius: var(--sk-radius-full);
}

/* --- states ------------------------------------------------------------- */

/* <a> never matches :disabled, so both spellings carry the same styling.
   base.css already sets cursor: not-allowed on each.

   No opacity here, deliberately. The shared conformance check flags any
   visible element sitting below opacity 1 at rest, because that is how a
   reveal hidden by a missing feature looks — and it cannot tell the two
   apart. A flat treatment is also the better answer for this component:
   --sk-button-bg may be an image, and a disabled gradient button has no
   business still showing its gradient. */
.sk-button:disabled,
.sk-button[aria-disabled="true"] {
  background: var(--sk-color-surface);
  color: var(--sk-color-text-subtle);
  border-color: transparent;
}

/* Inside @media (hover: hover) so a tap does not leave a stuck hover state. */
@media (hover: hover) {
  .sk-button:hover:not(:disabled, [aria-disabled="true"]) {
    /* Dimming rather than lightening the fill: --sk-button-bg may be an image,
       and there is no token arithmetic that works on both a colour and a
       gradient. */
    opacity: 0.92;
  }

  .sk-button[data-variant="outline"]:hover:not(:disabled),
  .sk-button[data-variant="ghost"]:hover:not(:disabled) {
    opacity: 1;
    background: var(--_bg-hover);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sk-button {
    transition: scale var(--sk-motion-instant) var(--sk-ease-out);
  }

  .sk-button:active:not(:disabled, [aria-disabled="true"]) {
    scale: var(--_press-scale);
  }

  .sk-button__spinner {
    animation: sk-button-spin 700ms linear infinite;
  }

  @keyframes sk-button-spin {
    to {
      rotate: 1turn;
    }
  }
}

/* ---------------------------------------------------------------------------
   Presentation, not behaviour

   The row below is the demo's layout. Delete it when copying .sk-button into
   your own markup.
--------------------------------------------------------------------------- */

.sk-button__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-sm);
  align-items: center;
  margin-block-end: var(--sk-space-lg);
}

.sk-button__row[data-row="block"] {
  display: grid;
  max-inline-size: 22rem;
}