@ptbdynamic/plinth 0.0.0-stage → 0.1.1

package/packages/css/dist/button.css

@@ -0,0 +1,273 @@
+/*
+ * Button: the main action control.
+ *
+ * <button type="button" class="plinth-button" data-variant="primary" data-size="md">
+ *   <span class="plinth-icon" data-size="md" aria-hidden="true"><svg>…</svg></span>
+ *   <span class="plinth-button-label">Save</span>
+ *   <span class="plinth-icon" data-size="md" aria-hidden="true"><svg>…</svg></span>
+ * </button>
+ *
+ * With an href it is <a class="plinth-button" href="…"> instead; the icons are optional.
+ *
+ * data-mirror on an icon flips it in right-to-left text, for arrows (mirror-icon and
+ * mirror-trailing in Blade, Vue and React; mirror on the icon button).
+ *
+ * Variants (data-variant): primary (default, also when missing; inverted neutral unless a brand
+ * colours it), accent (the brand's colour, for marketing and brand moments), secondary, ghost, danger, and
+ * danger-ghost for a low-emphasis destructive action (Remove next to an item).
+ * Sizes (data-size): sm 28px, md 32px (default), lg 40px. On a touch screen every size keeps a
+ * 40px touch target through an invisible hit area. Icons inside are 16px on sm and 20px otherwise.
+ *
+ * States:
+ * - disabled: `disabled` on a <button>; on a link, no href, role="link" and aria-disabled="true".
+ * - busy: aria-busy="true" and aria-disabled="true", with
+ *   <span class="plinth-button-spinner" aria-hidden="true"></span> in the leading icon's place.
+ *   It keeps focus; the app ignores activation while busy.
+ * - hover only where the device can hover; the focus ring on :focus-visible.
+ *
+ * Icon button: a button with only an icon, square at the button's height.
+ *
+ * <button type="button" class="plinth-button plinth-icon-button" data-variant="ghost"
+ *   data-size="md" aria-label="More actions">
+ *   <span class="plinth-icon" data-size="md" aria-hidden="true"><svg>…</svg></span>
+ * </button>
+ *
+ * With an href it is a link instead, with the same disabled state as the button's link:
+ *
+ * <a class="plinth-button plinth-icon-button" href="…" data-variant="secondary"
+ *   data-size="md" aria-label="Next page">
+ *   <span class="plinth-icon" data-size="md" data-mirror aria-hidden="true"><svg>…</svg></span>
+ * </a>
+ *
+ * aria-label is required: it is the only name the button has. A toggle has aria-pressed
+ * ("true" or "false"), and pressed shows the selection tint (accent-subtle, accent-text) inside
+ * a 2px accent edge (border-width.thick), so colour is not its only cue; it still answers hover
+ * and press with a step on the tint. In forced colours it takes the Highlight system colour. A
+ * link is never a toggle: aria-pressed is never printed on one.
+ */
+
+@layer plinth {
+  .plinth-button {
+    --plinth-button-surface: var(--plinth-color-primary);
+    --plinth-button-surface-hover: var(--plinth-color-primary-hover);
+    --plinth-button-surface-active: var(--plinth-color-primary-active);
+    --plinth-button-text: var(--plinth-color-on-primary);
+    --plinth-button-edge: transparent;
+    --plinth-button-inner-edge: inset 0 0 0 1px var(--plinth-color-primary-edge);
+    --plinth-button-height: var(--plinth-control-md);
+    --plinth-button-padding: var(--plinth-space-4);
+    --plinth-button-icon-size: var(--plinth-size-icon-md);
+
+    position: relative;
+    display: inline-flex;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    justify-content: center;
+    max-inline-size: 100%;
+    min-block-size: var(--plinth-button-height);
+    padding-block: 0;
+    padding-inline: var(--plinth-button-padding);
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-md);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-tight);
+    vertical-align: middle;
+    color: var(--plinth-button-text);
+    white-space: nowrap;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    background-color: var(--plinth-button-surface);
+    border: var(--plinth-border-width-thin) solid var(--plinth-button-edge);
+    border-radius: var(--plinth-radius-control);
+    box-shadow: var(--plinth-button-inner-edge);
+    transition:
+      background-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      border-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      box-shadow var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  /* The brand's colour, for marketing and brand moments (Upgrade plan): at most one per screen. */
+  .plinth-button[data-variant='accent'] {
+    --plinth-button-surface: var(--plinth-color-accent);
+    --plinth-button-surface-hover: var(--plinth-color-accent-hover);
+    --plinth-button-surface-active: var(--plinth-color-accent-active);
+    --plinth-button-text: var(--plinth-color-on-accent);
+  }
+
+  .plinth-button[data-variant='secondary'] {
+    --plinth-button-inner-edge: none;
+    --plinth-button-surface: var(--plinth-color-surface-raised);
+    --plinth-button-surface-hover: var(--plinth-color-surface-hover);
+    --plinth-button-surface-active: var(--plinth-color-surface-sunken);
+    --plinth-button-text: var(--plinth-color-text);
+    --plinth-button-edge: var(--plinth-color-border-strong);
+  }
+
+  .plinth-button[data-variant='ghost'] {
+    --plinth-button-inner-edge: none;
+    --plinth-button-surface: transparent;
+    --plinth-button-surface-hover: var(--plinth-color-surface-hover);
+    --plinth-button-surface-active: var(--plinth-color-surface-sunken);
+    --plinth-button-text: var(--plinth-color-text);
+  }
+
+  .plinth-button[data-variant='danger'] {
+    --plinth-button-inner-edge: none;
+    --plinth-button-surface: var(--plinth-color-danger-solid);
+    --plinth-button-surface-hover: var(--plinth-color-danger-solid-hover);
+    --plinth-button-surface-active: var(--plinth-color-danger-solid-active);
+    --plinth-button-text: var(--plinth-color-on-danger);
+  }
+
+  .plinth-button[data-variant='danger-ghost'] {
+    --plinth-button-inner-edge: none;
+    --plinth-button-surface: transparent;
+    --plinth-button-surface-hover: var(--plinth-color-danger-surface);
+    --plinth-button-surface-active: var(--plinth-color-danger-surface);
+    --plinth-button-text: var(--plinth-color-danger-text);
+  }
+
+  .plinth-button[data-size='sm'] {
+    --plinth-button-height: var(--plinth-control-sm);
+    --plinth-button-padding: var(--plinth-space-3);
+    --plinth-button-icon-size: var(--plinth-size-icon-sm);
+
+    font-size: var(--plinth-font-size-sm);
+  }
+
+  .plinth-button[data-size='lg'] {
+    --plinth-button-height: var(--plinth-control-lg);
+    --plinth-button-padding: var(--plinth-space-5);
+  }
+
+  /*
+   * On a touch screen, every button keeps a 40px touch target through an invisible hit area,
+   * centred on it, without changing its look (ADR 3: controls look small, touch stays at 40px).
+   */
+  @media (pointer: coarse) {
+    .plinth-button::before {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline: 0;
+      block-size: max(100%, var(--plinth-touch-target));
+      content: '';
+      translate: 0 -50%;
+    }
+
+    /* An icon button is narrower than 40px, so its hit area grows sideways too. */
+    .plinth-icon-button::before {
+      inset-inline: min(0%, 50% - var(--plinth-touch-target) / 2);
+    }
+  }
+
+  @media (hover: hover) {
+    .plinth-button:hover {
+      background-color: var(--plinth-button-surface-hover);
+    }
+  }
+
+  .plinth-button:active {
+    background-color: var(--plinth-button-surface-active);
+  }
+
+  .plinth-button:disabled,
+  .plinth-button[aria-disabled='true'] {
+    cursor: not-allowed;
+    background-color: var(--plinth-button-surface);
+  }
+
+  .plinth-button:disabled,
+  .plinth-button[aria-disabled='true']:not([aria-busy='true']) {
+    opacity: var(--plinth-opacity-disabled);
+  }
+
+  .plinth-button[aria-busy='true'] {
+    cursor: progress;
+  }
+
+  .plinth-button:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset-filled);
+  }
+
+  .plinth-button:is(
+      [data-variant='secondary'],
+      [data-variant='ghost'],
+      [data-variant='danger-ghost']
+    ):focus-visible {
+    outline-offset: var(--plinth-focus-ring-offset);
+  }
+
+  .plinth-icon-button {
+    flex: none;
+    inline-size: var(--plinth-button-height);
+    padding-inline: 0;
+  }
+
+  /* The border and an inset ring make the 2px edge, so pressed doesn't move the icon. */
+  .plinth-icon-button[aria-pressed='true'] {
+    --plinth-button-surface: var(--plinth-color-accent-subtle);
+    --plinth-button-surface-hover: var(--plinth-color-accent-subtle-hover);
+    --plinth-button-surface-active: var(--plinth-color-accent-subtle-active);
+    --plinth-button-text: var(--plinth-color-accent-text);
+    --plinth-button-edge: var(--plinth-color-accent);
+    --plinth-button-inner-edge: inset 0 0 0
+      calc(var(--plinth-border-width-thick) - var(--plinth-border-width-thin))
+      var(--plinth-color-accent);
+  }
+
+  /* A gap between the ring and the pressed accent edge, so focus and pressed read apart. */
+  .plinth-icon-button[aria-pressed='true']:focus-visible {
+    outline-offset: var(--plinth-focus-ring-offset-filled);
+  }
+
+  .plinth-button-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* The same size as the icon it replaces, so the button keeps its width when it goes busy. */
+  .plinth-button-spinner {
+    flex: none;
+    inline-size: var(--plinth-button-icon-size);
+    block-size: var(--plinth-button-icon-size);
+    border: var(--plinth-border-width-thick) solid currentcolor;
+    border-inline-end-color: transparent;
+    border-radius: 50%;
+    animation: plinth-button-spin calc(var(--plinth-duration-slow) * 3) linear infinite;
+  }
+
+  @keyframes plinth-button-spin {
+    to {
+      transform: rotate(1turn);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .plinth-button {
+      border-color: ButtonText;
+    }
+
+    .plinth-button:disabled,
+    .plinth-button[aria-disabled='true']:not([aria-busy='true']) {
+      color: GrayText;
+      border-color: GrayText;
+    }
+
+    /* The pressed tint is dropped in forced colours, so pressed takes the selection colours,
+       unless it is disabled, which keeps GrayText. */
+    .plinth-icon-button[aria-pressed='true']:not(
+        :disabled,
+        [aria-disabled='true']:not([aria-busy='true'])
+      ) {
+      color: HighlightText;
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+
+    .plinth-button-spinner {
+      forced-color-adjust: none;
+    }
+  }
+}

package/packages/css/dist/callout.css

@@ -0,0 +1,143 @@
+/*
+ * Callout: a note inside a page, with a tone, an icon, an optional title and actions.
+ *
+ * <div class="plinth-callout" data-tone="warning" role="note">
+ *   <span class="plinth-icon plinth-callout-icon" data-size="md" aria-hidden="true">
+ *     <svg viewBox="0 0 24 24">…</svg>
+ *   </span>
+ *   <div class="plinth-callout-body">
+ *     <p class="plinth-callout-title">Invoices are sent at 9:00</p>
+ *     <div class="plinth-callout-text">Drafts saved after that go out the next morning.</div>
+ *     <div class="plinth-callout-actions">…buttons or links…</div>
+ *   </div>
+ * </div>
+ *
+ * Tones (data-tone): neutral (default, also when the attribute is missing), info, success,
+ * warning, danger. Each tints the surface, the hairline border and the icon, and has its own icon
+ * shape; the title or the text still says what kind of note it is, so the tone is never the only
+ * signal. The tints are the component tokens --plinth-callout-<tone>-surface and -border: faint
+ * and translucent, quieter than the status surfaces a badge uses.
+ *
+ * role: note (default) for a note that is part of the page; status for a message the app adds
+ * after something happens (announced politely); alert for an urgent one (announced at once). A
+ * live region inserted with its content is often not announced, so for a status the app keeps an
+ * empty container with role="status" in the page and puts the callout in it.
+ *
+ * The text may hold paragraphs, links (underlined, in the text's colour) and inline code.
+ *
+ * The icon is decorative (aria-hidden). The tone's icon comes with the component; a project puts
+ * its own SVG in its place. Title, text and actions are each printed only when they have content.
+ */
+
+@layer plinth {
+  .plinth-callout {
+    --plinth-callout-surface: var(--plinth-callout-neutral-surface);
+    --plinth-callout-border: var(--plinth-callout-neutral-border);
+    --plinth-callout-icon-color: var(--plinth-color-text-muted);
+
+    display: flex;
+    gap: var(--plinth-space-3);
+    align-items: flex-start;
+    min-inline-size: 0;
+    padding-block: var(--plinth-space-3);
+    padding-inline: var(--plinth-space-4);
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-md);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text);
+    overflow-wrap: anywhere;
+    background-color: var(--plinth-callout-surface);
+    border: 1px solid var(--plinth-callout-border);
+    border-radius: var(--plinth-radius-container);
+  }
+
+  .plinth-callout[data-tone='info'] {
+    --plinth-callout-surface: var(--plinth-callout-info-surface);
+    --plinth-callout-border: var(--plinth-callout-info-border);
+    --plinth-callout-icon-color: var(--plinth-color-info-text);
+  }
+
+  .plinth-callout[data-tone='success'] {
+    --plinth-callout-surface: var(--plinth-callout-success-surface);
+    --plinth-callout-border: var(--plinth-callout-success-border);
+    --plinth-callout-icon-color: var(--plinth-color-success-text);
+  }
+
+  .plinth-callout[data-tone='warning'] {
+    --plinth-callout-surface: var(--plinth-callout-warning-surface);
+    --plinth-callout-border: var(--plinth-callout-warning-border);
+    --plinth-callout-icon-color: var(--plinth-color-warning-text);
+  }
+
+  .plinth-callout[data-tone='danger'] {
+    --plinth-callout-surface: var(--plinth-callout-danger-surface);
+    --plinth-callout-border: var(--plinth-callout-danger-border);
+    --plinth-callout-icon-color: var(--plinth-color-danger-text);
+  }
+
+  /* Centred on the first line of text, however tall the line is. */
+  .plinth-callout-icon {
+    margin-block: calc((1lh - var(--plinth-size-icon-md)) / 2);
+    color: var(--plinth-callout-icon-color);
+  }
+
+  .plinth-callout-body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--plinth-space-1);
+    min-inline-size: 0;
+  }
+
+  .plinth-callout-title {
+    margin: 0;
+    font-weight: var(--plinth-font-weight-semibold);
+  }
+
+  .plinth-callout-text > * {
+    margin-block: 0;
+  }
+
+  .plinth-callout-text > * + * {
+    margin-block-start: var(--plinth-space-2);
+  }
+
+  .plinth-callout-text a {
+    color: inherit;
+    text-decoration-line: underline;
+    text-decoration-color: var(--plinth-color-text-muted);
+    text-underline-offset: 0.2em;
+  }
+
+  @media (hover: hover) {
+    .plinth-callout-text a:hover {
+      text-decoration-color: currentcolor;
+    }
+  }
+
+  .plinth-callout-text a:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset);
+    border-radius: var(--plinth-radius-control);
+  }
+
+  .plinth-callout-text code {
+    font-family: var(--plinth-font-family-mono);
+    font-size: var(--plinth-font-size-sm);
+  }
+
+  .plinth-callout-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    margin-block-start: var(--plinth-space-2);
+  }
+
+  /* Small buttons grow a 40px hit area on a touch screen; wrapped rows keep theirs apart. */
+  @media (pointer: coarse) {
+    .plinth-callout-actions {
+      row-gap: var(--plinth-space-3);
+    }
+  }
+}

package/packages/css/dist/code-block.css

@@ -0,0 +1,283 @@
+/*
+ * Code block: a block of code with an optional file name or label, a copy button and optional
+ * language tabs.
+ *
+ * <div class="plinth-code-block">
+ *   <div class="plinth-code-block-header">
+ *     <span class="plinth-code-block-label">resources/css/brand.css</span>
+ *     <button type="button" class="plinth-button plinth-code-block-copy" data-variant="ghost"
+ *       data-size="sm" hidden>
+ *       <span class="plinth-button-label">Copy</span>
+ *     </button>
+ *     <span class="plinth-code-block-status" role="status"></span>
+ *   </div>
+ *   <pre class="plinth-code-block-code" dir="ltr" tabindex="0"><code>…</code></pre>
+ * </div>
+ *
+ * With language tabs, the header holds a radio group after the label, and there is one <pre> per
+ * tab, in the same order:
+ *
+ *   <div class="plinth-code-block-tabs" role="radiogroup" aria-label="Language">
+ *     <label class="plinth-code-block-tab">
+ *       <input type="radio" class="plinth-code-block-tab-input" name="install-language" checked>
+ *       <span class="plinth-code-block-tab-label">Blade</span>
+ *     </label>
+ *     <label class="plinth-code-block-tab">…Vue…</label>
+ *   </div>
+ *   …
+ *   <pre class="plinth-code-block-code" dir="ltr" tabindex="0"><code>…Blade…</code></pre>
+ *   <pre class="plinth-code-block-code" dir="ltr" tabindex="0"><code>…Vue…</code></pre>
+ *
+ * The root is the <div>, and takes the app's id. The label is optional, and is text or a little
+ * markup (a badge). The tabs are native radio buttons (ADR 2): the browser moves between them with
+ * the arrow keys and remembers the checked one, and CSS shows the <pre> in the checked tab's
+ * place, with no script. Their name is the root's id with -language (one is generated when the
+ * root has no id), and the group's name is tabs-label in Blade, Vue and React ("Language" by
+ * default). In plain HTML, give each block on a page its own name, or their tabs become one group.
+ * Up to six tabs (the layers drop the rest); the first is checked unless the app picks another
+ * (selected), and after that the browser keeps the reader's choice. Inside a <form> the radios
+ * are part of it: they are sent with it (name=on), and a reset checks the starting tab again.
+ *
+ * The code is text, or the markup a highlighter prints (Phiki, Shiki: the spans inside its
+ * <code>). Plinth styles the block, not the tokens: their colours are the highlighter's. The
+ * <pre> keeps the code's lines and scrolls sideways inside its own box, so it takes tabindex="0"
+ * (a scrolling region must be reachable by keyboard), and dir="ltr", as code reads left to right
+ * on any page.
+ *
+ * Copy: the button (button.css) is printed hidden, and the Blade (Alpine), Vue and React layers
+ * show it when the clipboard is there. It copies the text of the <pre> that shows, says Copied
+ * (copied-label) for two seconds and puts the same word in the status, a polite live region,
+ * hidden from sight. The plain HTML works without it, and the header keeps its place for the
+ * button either way. copy: false in Blade, Vue and React leaves
+ * the button and the status out.
+ *
+ * States: the checked tab (input:checked) is a raised surface with a strong edge; hover only
+ * where the device can hover; the focus ring on :focus-visible, on the tab's input (it covers the
+ * tab) and inset on the <pre>. On a touch screen each tab keeps a 40px touch target, as the
+ * button does. The header hides itself when it has nothing to show.
+ */
+
+@layer plinth {
+  .plinth-code-block {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    color: var(--plinth-color-text);
+    background-color: var(--plinth-color-surface-sunken);
+    border: var(--plinth-border-width-thin) solid var(--plinth-color-border);
+    border-radius: var(--plinth-radius-container);
+  }
+
+  .plinth-code-block-header {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    min-block-size: var(--plinth-touch-target);
+    padding-block: calc((var(--plinth-touch-target) - var(--plinth-control-sm)) / 2);
+    padding-inline: var(--plinth-space-4)
+      calc((var(--plinth-touch-target) - var(--plinth-control-sm)) / 2);
+    border-block-end: var(--plinth-border-width-thin) solid var(--plinth-color-divider);
+  }
+
+  /* Tabs first, with no label: the header's start matches its end. */
+  .plinth-code-block-header:not(:has(.plinth-code-block-label)) {
+    padding-inline-start: calc((var(--plinth-touch-target) - var(--plinth-control-sm)) / 2);
+  }
+
+  /*
+   * Nothing to show: no label, no tabs and no copy button (copy off). A hidden copy button keeps
+   * the header, so the code doesn't move down when the layer shows it.
+   */
+  .plinth-code-block-header:not(
+    :has(.plinth-code-block-label, .plinth-code-block-tabs, .plinth-code-block-copy)
+  ) {
+    display: none;
+  }
+
+  .plinth-code-block-label {
+    display: inline-flex;
+    flex: 0 1 auto;
+    gap: var(--plinth-space-2);
+    align-items: center;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: var(--plinth-font-family-mono);
+    font-size: var(--plinth-font-size-xs);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text-muted);
+    white-space: nowrap;
+  }
+
+  .plinth-code-block-label:has(+ .plinth-code-block-tabs) {
+    margin-inline-end: var(--plinth-space-2);
+  }
+
+  /* The tabs follow the label; the copy button sits at the end. */
+  .plinth-code-block-tabs {
+    display: flex;
+    flex: 0 1 auto;
+    flex-wrap: wrap;
+    gap: var(--plinth-space-1);
+    align-items: center;
+    min-inline-size: 0;
+  }
+
+  .plinth-code-block-tab {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--plinth-control-sm);
+    padding-block: 0;
+    padding-inline: var(--plinth-space-3);
+    font-family: var(--plinth-font-family-body);
+    font-size: var(--plinth-font-size-sm);
+    font-weight: var(--plinth-font-weight-medium);
+    line-height: var(--plinth-font-leading-tight);
+    color: var(--plinth-color-text-muted);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    background-color: transparent;
+    border: var(--plinth-border-width-thin) solid transparent;
+    border-radius: var(--plinth-radius-control);
+    transition:
+      background-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      border-color var(--plinth-duration-fast) var(--plinth-easing-standard),
+      color var(--plinth-duration-fast) var(--plinth-easing-standard);
+  }
+
+  /* The radio covers its tab, so the tab is what is focused, clicked and ringed. */
+  .plinth-code-block-tab-input {
+    position: absolute;
+    inset: calc(-1 * var(--plinth-border-width-thin));
+    margin: 0;
+    appearance: none;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--plinth-radius-control);
+  }
+
+  .plinth-code-block-tab-input:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset);
+  }
+
+  .plinth-code-block-tab:has(> .plinth-code-block-tab-input:checked) {
+    color: var(--plinth-color-text);
+    background-color: var(--plinth-color-surface-raised);
+    border-color: var(--plinth-color-border-strong);
+  }
+
+  @media (hover: hover) {
+    .plinth-code-block-tab:not(:has(> .plinth-code-block-tab-input:checked)):hover {
+      color: var(--plinth-color-text);
+      background-color: var(--plinth-color-surface-hover);
+    }
+  }
+
+  .plinth-code-block-tab:not(:has(> .plinth-code-block-tab-input:checked)):active {
+    background-color: var(--plinth-color-surface-sunken);
+  }
+
+  /* A 40px touch target through an invisible hit area, as on the button (ADR 3). */
+  @media (pointer: coarse) {
+    .plinth-code-block-tab::before {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline: min(0%, 50% - var(--plinth-touch-target) / 2);
+      block-size: max(100%, var(--plinth-touch-target));
+      content: '';
+      translate: 0 -50%;
+    }
+  }
+
+  .plinth-code-block-copy {
+    margin-inline-start: auto;
+  }
+
+  /* The button's own display would beat the hidden attribute. */
+  .plinth-code-block-copy[hidden] {
+    display: none;
+  }
+
+  /* Read out, not shown. */
+  .plinth-code-block-status {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: calc(-1 * var(--plinth-border-width-thin));
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    clip-path: inset(50%);
+  }
+
+  .plinth-code-block-code {
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    padding: var(--plinth-space-4);
+    margin: 0;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    font-family: var(--plinth-font-family-mono);
+    font-size: var(--plinth-font-size-sm);
+    line-height: var(--plinth-font-leading-normal);
+    color: var(--plinth-color-text);
+    tab-size: 2;
+    white-space: pre;
+    border-radius: var(--plinth-radius-container);
+  }
+
+  .plinth-code-block-code:focus-visible {
+    outline: var(--plinth-focus-ring-width) solid var(--plinth-color-focus-ring);
+    outline-offset: var(--plinth-focus-ring-offset-inset);
+  }
+
+  .plinth-code-block-code > code {
+    font: inherit;
+    color: inherit;
+    background: none;
+  }
+
+  /*
+   * With tabs, only the checked tab's <pre> shows: the nth tab shows the nth <pre>. Nothing
+   * checked (a reset form) shows the first.
+   */
+  .plinth-code-block:has(.plinth-code-block-tabs) > .plinth-code-block-code {
+    display: none;
+  }
+
+  .plinth-code-block:not(:has(.plinth-code-block-tab-input:checked))
+    > .plinth-code-block-code:first-of-type,
+  .plinth-code-block:has(.plinth-code-block-tab:nth-child(1) > :checked)
+    > .plinth-code-block-code:nth-of-type(1),
+  .plinth-code-block:has(.plinth-code-block-tab:nth-child(2) > :checked)
+    > .plinth-code-block-code:nth-of-type(2),
+  .plinth-code-block:has(.plinth-code-block-tab:nth-child(3) > :checked)
+    > .plinth-code-block-code:nth-of-type(3),
+  .plinth-code-block:has(.plinth-code-block-tab:nth-child(4) > :checked)
+    > .plinth-code-block-code:nth-of-type(4),
+  .plinth-code-block:has(.plinth-code-block-tab:nth-child(5) > :checked)
+    > .plinth-code-block-code:nth-of-type(5),
+  .plinth-code-block:has(.plinth-code-block-tab:nth-child(6) > :checked)
+    > .plinth-code-block-code:nth-of-type(6) {
+    display: block;
+  }
+
+  @media (forced-colors: active) {
+    .plinth-code-block-tab:has(> .plinth-code-block-tab-input:checked) {
+      color: HighlightText;
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+  }
+}