@ps1ui/core 0.1.0 → 0.2.0

package/dist/styles.css

@@ -19,6 +19,17 @@
   --ps1ui-color-primary-active: #3fb950;
   --ps1ui-color-primary-fg: #0b0f14;
   --ps1ui-color-accent: #ffa657;
+  /* Destructive / error signalling. Hue sits in the rose-coral band the code
+     palette already inhabits (--ps1ui-code-keyword / -tag / -deleted) so the
+     surface reads as one system; luminance is tuned so the base color hits
+     ≥ 4.5:1 vs BOTH --ps1ui-color-bg and --ps1ui-color-surface (verified by
+     Text.contrast.test.tsx) and danger-fg on each danger-* fill hits the
+     same threshold (verified by Button.contrast.test.tsx). Hover/active
+     progressively darken while staying above contrast. */
+  --ps1ui-color-danger: #ff7d8d;
+  --ps1ui-color-danger-hover: #f0637a;
+  --ps1ui-color-danger-active: #e04a60;
+  --ps1ui-color-danger-fg: #0b0f14;
   --ps1ui-color-focus-ring-soft: color-mix(in srgb, var(--ps1ui-color-primary) 14%, transparent);
   --ps1ui-shadow-focus-ring: 0 0 0 3px var(--ps1ui-color-focus-ring-soft);
 
@@ -88,6 +99,7 @@
 
   --ps1ui-transition-fast: 120ms ease;
 }
+
 /* ==========================================================================
  * Reset
  * --------------------------------------------------------------------------
@@ -107,6 +119,7 @@
  * layouts unless you set display:inline explicitly), <ul>/<ol> lose their
  * bullets. Locked in by src/styles/reset.test.tsx.
  * ========================================================================== */
+
 /* Box model + border baseline. Applied to `*` only — NOT to ::before/::after
    /::backdrop/::file-selector-button. Pseudo-elements with border-drawn
    glyphs (the classic rotated-L checkmark, tooltip carets, radio-dot rings)
@@ -120,6 +133,7 @@
   box-sizing: border-box;
   border: 0 solid;
 }
+
 body,
 blockquote,
 dl,
@@ -140,6 +154,7 @@ pre,
 ul {
   margin: 0;
 }
+
 fieldset,
 legend,
 menu,
@@ -147,6 +162,7 @@ ol,
 ul {
   padding: 0;
 }
+
 html {
   color-scheme: dark;
   line-height: 1.5;
@@ -157,11 +173,13 @@ html {
        tab-size: 4;
   text-rendering: optimizeLegibility;
 }
+
 body {
   min-height: 100dvh;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
 /* Heading responsibility belongs to <Heading>; raw h1..h6 inherit so a bare
    <h1> outside <Heading> doesn't blow up to the UA default. */
 h1,
@@ -175,15 +193,18 @@ h6 {
   text-wrap: balance;
   overflow-wrap: break-word;
 }
+
 p {
   text-wrap: pretty;
   overflow-wrap: break-word;
 }
+
 ol,
 ul,
 menu {
   list-style: none;
 }
+
 img,
 svg,
 video,
@@ -195,17 +216,20 @@ object {
   display: block;
   vertical-align: middle;
 }
+
 img,
 video {
   max-width: 100%;
   height: auto;
 }
+
 /* Anchor responsibility belongs to <Anchor>; raw <a> inherits color/decoration
    so it doesn't paint as UA blue underline against the dark canvas. */
 a {
   color: inherit;
   text-decoration: inherit;
 }
+
 /* UA still refuses to inherit font/color into form controls in 2026.
    Inherit font-feature-settings / font-variation-settings too so JetBrains
    Mono Variable's axes stay live inside <input> / <textarea>. */
@@ -224,13 +248,16 @@ textarea,
   border-radius: 0;
   opacity: 1;
 }
+
 :where(select:is([multiple], [size])) optgroup {
   font-weight: bolder;
 }
+
 button,
 select {
   text-transform: none;
 }
+
 button,
 input:where([type="button"], [type="reset"], [type="submit"]),
 ::file-selector-button {
@@ -238,12 +265,15 @@ input:where([type="button"], [type="reset"], [type="submit"]),
        appearance: button;
   -webkit-appearance: button;
 }
+
 button {
   cursor: pointer;
 }
+
 textarea {
   resize: vertical;
 }
+
 /* `in srgb` for consistency with the library's other color-mix calls. The
    space is irrelevant when mixing with `transparent` (premultiplied-alpha
    interpolation, CSS Color 4), so diverging from Tailwind Preflight's oklab
@@ -256,23 +286,28 @@ textarea {
   opacity: 1;
   color: color-mix(in srgb, currentcolor 55%, transparent);
 }
+
 ::-webkit-date-and-time-value {
   min-height: 1lh;
   text-align: inherit;
 }
+
 ::-webkit-datetime-edit {
   display: inline-flex;
   padding: 0;
 }
+
 ::-webkit-datetime-edit-fields-wrapper {
   padding: 0;
 }
+
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
   height: auto;
 }
+
 /* number spinner: Chromium is already handled by ::-webkit-inner/outer-spin-button
    { appearance: none } above. Firefox needs its own vendor prefix — the unprefixed
    `appearance: textfield` is deprecated per CSS UI Level 4 (moved to compatibility
@@ -280,27 +315,34 @@ textarea {
 input[type="number"] {
   -moz-appearance: textfield;
 }
+
 [type="search"] {
   -webkit-appearance: textfield;
   outline-offset: -2px;
 }
+
 ::-webkit-search-decoration,
 ::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
+
 :-moz-ui-invalid {
   box-shadow: none;
 }
+
 :-moz-focusring:where(:not(iframe)) {
   outline: auto;
 }
+
 b,
 strong {
   font-weight: bolder;
 }
+
 small {
   font-size: 80%;
 }
+
 code,
 kbd,
 samp,
@@ -308,14 +350,17 @@ pre {
   font-family: var(--ps1ui-font-mono);
   font-size: 1em;
 }
+
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
           text-decoration: underline dotted;
 }
+
 q::before,
 q::after {
   content: "";
 }
+
 /* Keeps sub/sup from expanding the parent line-height. */
 sub,
 sup {
@@ -324,34 +369,42 @@ sup {
   position: relative;
   vertical-align: baseline;
 }
+
 sub {
   bottom: -0.25em;
 }
+
 sup {
   top: -0.5em;
 }
+
 table {
   text-indent: 0;
   border-color: inherit;
   border-collapse: collapse;
 }
+
 hr {
   height: 0;
   color: inherit;
   border-top: 1px solid;
 }
+
 summary {
   display: list-item;
 }
+
 /* [hidden] would lose to `display: flex` etc. without this. */
 [hidden]:where(:not([hidden="until-found"])) {
   display: none !important;
 }
+
 @media (prefers-reduced-motion: no-preference) {
   html {
     interpolate-size: allow-keywords;
   }
 }
+
 /* ==========================================================================
  * Ambient environment
  * --------------------------------------------------------------------------
@@ -363,15 +416,18 @@ summary {
  * area would reveal the light UA default and flash white on scroll. `color`
  * and `font-family` cascade down to `body` and descendants naturally.
  * ========================================================================== */
+
 html {
   background: var(--ps1ui-color-bg);
   color: var(--ps1ui-color-fg);
   font-family: var(--ps1ui-font-mono);
 }
+
 ::-moz-selection {
   background: var(--ps1ui-color-primary);
   color: var(--ps1ui-color-primary-fg);
 }
+
 ::selection {
   background: var(--ps1ui-color-primary);
   color: var(--ps1ui-color-primary-fg);
@@ -418,12 +474,14 @@ html {
     color var(--ps1ui-transition-fast),
     text-decoration-color var(--ps1ui-transition-fast);
 }
+
 /* outline (not box-shadow) so a wrapping inline anchor renders as connected fragments
    per line-box instead of two disjoint rectangles. Modern browsers follow border-radius. */
 .ps1ui-anchor:focus-visible {
   outline: 2px solid var(--ps1ui-color-primary);
   outline-offset: 2px;
 }
+
 /* text-decoration-color defaults to currentColor, so setting only `color` per state
    also shifts the underline. subtle's default intentionally decouples the two — the
    underline is dimmer than the text — hence the explicit override there. */
@@ -436,6 +494,7 @@ html {
 .ps1ui-anchor--primary:active {
   color: var(--ps1ui-color-primary-active);
 }
+
 .ps1ui-anchor--subtle {
   color: inherit;
   text-decoration-color: var(--ps1ui-color-fg-subtle);
@@ -477,14 +536,17 @@ html {
     border-color var(--ps1ui-transition-fast),
     color var(--ps1ui-transition-fast);
 }
+
 .ps1ui-button:focus-visible {
   outline: none;
   border-color: var(--ps1ui-color-primary);
   box-shadow: var(--ps1ui-shadow-focus-ring);
 }
+
 .ps1ui-button:disabled {
   cursor: not-allowed;
 }
+
 .ps1ui-button--primary {
   background: var(--ps1ui-color-primary);
   color: var(--ps1ui-color-primary-fg);
@@ -503,6 +565,7 @@ html {
   color: var(--ps1ui-color-fg-subtle);
   border-color: var(--ps1ui-color-border);
 }
+
 .ps1ui-button--secondary {
   background: transparent;
   color: var(--ps1ui-color-fg);
@@ -524,6 +587,28 @@ html {
   color: var(--ps1ui-color-fg-subtle);
   border-color: var(--ps1ui-color-border);
 }
+
+/* Same filled shape as --primary — variant only shifts hue, not typographic
+   weight or footprint, so a danger button reads as an equal-weight sibling
+   of a primary one and the visual difference is purely semantic colour. */
+.ps1ui-button--danger {
+  background: var(--ps1ui-color-danger);
+  color: var(--ps1ui-color-danger-fg);
+  border-color: var(--ps1ui-color-danger);
+}
+.ps1ui-button--danger:hover:not(:disabled) {
+  background: var(--ps1ui-color-danger-hover);
+  border-color: var(--ps1ui-color-danger-hover);
+}
+.ps1ui-button--danger:active:not(:disabled) {
+  background: var(--ps1ui-color-danger-active);
+  border-color: var(--ps1ui-color-danger-active);
+}
+.ps1ui-button--danger:disabled {
+  background: transparent;
+  color: var(--ps1ui-color-fg-subtle);
+  border-color: var(--ps1ui-color-border);
+}
 .ps1ui-checkbox {
   -moz-appearance: none;
        appearance: none;
@@ -548,29 +633,35 @@ html {
     border-color var(--ps1ui-transition-fast),
     box-shadow var(--ps1ui-transition-fast);
 }
+
 .ps1ui-checkbox:hover:not(:disabled) {
   border-color: var(--ps1ui-color-primary);
 }
+
 .ps1ui-checkbox:focus-visible {
   outline: none;
   border-color: var(--ps1ui-color-primary);
   box-shadow: var(--ps1ui-shadow-focus-ring);
 }
+
 .ps1ui-checkbox:checked,
 .ps1ui-checkbox:indeterminate {
   background: var(--ps1ui-color-primary);
   border-color: var(--ps1ui-color-primary);
 }
+
 .ps1ui-checkbox:checked:hover:not(:disabled),
 .ps1ui-checkbox:indeterminate:hover:not(:disabled) {
   background: var(--ps1ui-color-primary-hover);
   border-color: var(--ps1ui-color-primary-hover);
 }
+
 .ps1ui-checkbox:checked:active:not(:disabled),
 .ps1ui-checkbox:indeterminate:active:not(:disabled) {
   background: var(--ps1ui-color-primary-active);
   border-color: var(--ps1ui-color-primary-active);
 }
+
 /* Checkmark: classic rotated-L trick — draws the right + bottom border of a small
    rectangle, then rotates 45deg so it reads as a ✓. `:not(:indeterminate)` makes
    precedence explicit for the mixed DOM state (both .checked and .indeterminate
@@ -592,6 +683,7 @@ html {
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
 }
+
 .ps1ui-checkbox:indeterminate::after {
   content: "";
   position: absolute;
@@ -602,6 +694,7 @@ html {
   background: currentColor;
   border-radius: 1px;
 }
+
 /* forced-colors force-replaces author backgrounds, so the background-drawn
    indeterminate bar would vanish — redraw it as a border, which survives as
    system ink (same 6–8px band; the checked ✓ is already border-drawn and
@@ -616,12 +709,14 @@ html {
     border-radius: 0;
   }
 }
+
 .ps1ui-checkbox:disabled {
   cursor: not-allowed;
   color: var(--ps1ui-color-fg-subtle);
   background: var(--ps1ui-color-surface);
   border-color: var(--ps1ui-color-border);
 }
+
 .ps1ui-checkbox:disabled:checked,
 .ps1ui-checkbox:disabled:indeterminate {
   background: var(--ps1ui-color-surface);
@@ -674,6 +769,7 @@ html {
   syntax: "*";
   inherits: false;
 }
+
 /* Container — max-width + horizontal padding + auto centering.
    Establishes an inline-size containment context so descendants respond to
    Container's width via `@container` queries. Named `ps1ui-container` for
@@ -715,6 +811,7 @@ html {
   max-width: var(--_size);
   padding-inline: var(--_px);
 }
+
 @container (min-width: 40rem) {
   .ps1ui-container {
     --_size: var(--_size-sm);
@@ -784,6 +881,7 @@ html {
   syntax: "*";
   inherits: false;
 }
+
 /* Grid — display:grid + N-column tracks + gap.
    Establishes an inline-size containment context so descendants respond to
    Grid's width via `@container` queries. Named `ps1ui-grid` for future
@@ -824,6 +922,7 @@ html {
   grid-template-columns: repeat(var(--_columns), minmax(0, 1fr));
   gap: var(--_gap);
 }
+
 @container (min-width: 40rem) {
   .ps1ui-grid {
     --_columns: var(--_columns-sm);
@@ -873,6 +972,7 @@ html {
   syntax: "*";
   inherits: false;
 }
+
 /* GridItem — child of Grid that spans multiple column tracks.
    GridItem is a leaf: it queries an ancestor containment context (typically
    the parent Grid, which establishes `container: ps1ui-grid / inline-size`),
@@ -911,6 +1011,7 @@ html {
 
   grid-column: span var(--_col-span);
 }
+
 @container (min-width: 40rem) {
   .ps1ui-griditem {
     --_col-span: var(--_col-span-sm);
@@ -947,20 +1048,25 @@ html {
     border-color var(--ps1ui-transition-fast),
     box-shadow var(--ps1ui-transition-fast);
 }
+
 .ps1ui-input::-moz-placeholder {
   color: var(--ps1ui-color-fg-subtle);
 }
+
 .ps1ui-input::placeholder {
   color: var(--ps1ui-color-fg-subtle);
 }
+
 .ps1ui-input:hover:not(:disabled) {
   border-color: var(--ps1ui-color-primary);
 }
+
 .ps1ui-input:focus {
   outline: none;
   border-color: var(--ps1ui-color-primary);
   box-shadow: var(--ps1ui-shadow-focus-ring);
 }
+
 .ps1ui-input:disabled {
   cursor: not-allowed;
   color: var(--ps1ui-color-fg-subtle);
@@ -1001,6 +1107,7 @@ html {
    Forced-colors (Windows High Contrast) repaints the `::before` glyph
    with `CanvasText` — the marker survives as system-foreground ink; no
    forced-colors-specific defense is needed. */
+
 .ps1ui-list {
   display: flex;
   flex-direction: column;
@@ -1012,6 +1119,7 @@ html {
   font-size: var(--ps1ui-font-size-sm);
   line-height: 1.6;
 }
+
 /* Hanging indent — `padding-left` reserves the marker column; the ::before
    is inline-block with a negative `margin-left` that pulls it into that
    reservation. Wrapped item text continues from the padding-left position
@@ -1031,12 +1139,15 @@ html {
    Ordered's `3ch` marker column fits `1.` through `99.`; lists past 99
    items visually break the right-align column — an acceptable trade for
    the common < 100 case. */
+
 .ps1ui-list--unordered > li {
   padding-left: calc(1ch + var(--ps1ui-space-sm));
 }
+
 .ps1ui-list--ordered > li {
   padding-left: calc(3ch + var(--ps1ui-space-sm));
 }
+
 .ps1ui-list > li::before {
   display: inline-block;
   padding-right: var(--ps1ui-space-sm);
@@ -1044,16 +1155,19 @@ html {
   font-variant-numeric: tabular-nums;
   text-align: right;
 }
+
 .ps1ui-list--unordered > li::before {
   content: "-";
   width: 1ch;
   margin-left: calc((1ch + var(--ps1ui-space-sm)) * -1);
 }
+
 .ps1ui-list--ordered > li::before {
   content: counter(list-item) ".";
   width: 3ch;
   margin-left: calc((3ch + var(--ps1ui-space-sm)) * -1);
 }
+
 /* Breathing room above a nested <List>. Descendant combinator (not child)
    so the rule still applies when a consumer wraps the sublist in a layout
    primitive — `<li><Stack><List>…</List></Stack></li>` gets the same gap
@@ -1156,17 +1270,20 @@ html {
      to wrapping is still possible via `style={{ whiteSpace: "pre-wrap" }}`. */
   white-space: pre;
 }
+
 .ps1ui-codeblock:focus-visible {
   outline: none;
   border-color: var(--ps1ui-color-primary);
   box-shadow: var(--ps1ui-shadow-focus-ring);
 }
+
 .ps1ui-codeblock code {
   font-family: inherit;
   font-size: inherit;
   color: inherit;
   background: none;
 }
+
 /* Prism token classes, mapped to ps1ui code palette (see tokens.css).
    Refractor emits hast <span class="token <type>"> nodes; keep this list
    in sync with the token types produced by Prism grammars. */
@@ -1177,18 +1294,22 @@ html {
   color: var(--ps1ui-code-comment);
   font-style: italic;
 }
+
 .ps1ui-codeblock .token.punctuation,
 .ps1ui-codeblock .token.operator {
   color: var(--ps1ui-code-punctuation);
 }
+
 .ps1ui-codeblock .token.property,
 .ps1ui-codeblock .token.tag,
 .ps1ui-codeblock .token.symbol {
   color: var(--ps1ui-code-tag);
 }
+
 .ps1ui-codeblock .token.attr-name {
   color: var(--ps1ui-code-attr);
 }
+
 .ps1ui-codeblock .token.string,
 .ps1ui-codeblock .token.char,
 .ps1ui-codeblock .token.url,
@@ -1196,6 +1317,7 @@ html {
 .ps1ui-codeblock .token.regex {
   color: var(--ps1ui-code-string);
 }
+
 /* diff: line-level markers get their own hue so "+" reads as added (green) and
    "-" reads as removed (rose). Distinct from tag/string groups on purpose. */
 .ps1ui-codeblock .token.inserted {
@@ -1204,30 +1326,36 @@ html {
 .ps1ui-codeblock .token.deleted {
   color: var(--ps1ui-code-deleted);
 }
+
 .ps1ui-codeblock .token.number,
 .ps1ui-codeblock .token.boolean,
 .ps1ui-codeblock .token.constant,
 .ps1ui-codeblock .token.entity {
   color: var(--ps1ui-code-constant);
 }
+
 .ps1ui-codeblock .token.class-name,
 .ps1ui-codeblock .token.builtin {
   color: var(--ps1ui-code-type);
 }
+
 .ps1ui-codeblock .token.function,
 .ps1ui-codeblock .token.method {
   color: var(--ps1ui-code-function);
 }
+
 .ps1ui-codeblock .token.keyword,
 .ps1ui-codeblock .token.selector,
 .ps1ui-codeblock .token.atrule,
 .ps1ui-codeblock .token.important {
   color: var(--ps1ui-code-keyword);
 }
+
 .ps1ui-codeblock .token.important,
 .ps1ui-codeblock .token.bold {
   font-weight: 600;
 }
+
 .ps1ui-codeblock .token.italic {
   font-style: italic;
 }
@@ -1240,6 +1368,7 @@ html {
   font-size: var(--ps1ui-font-size-sm);
   line-height: 1.6;
 }
+
 .ps1ui-details__summary {
   padding: var(--ps1ui-control-padding-y) var(--ps1ui-space-md);
   cursor: pointer;
@@ -1255,12 +1384,14 @@ html {
      marker so our ::before glyph is the only disclosure indicator. */
   list-style: none;
 }
+
 /* Older WebKit (Safari < 17) renders a native disclosure triangle via its
    private ::-webkit-details-marker pseudo — `list-style: none` alone doesn't
    suppress it there. Explicitly hide it so ::before is the only glyph. */
 .ps1ui-details__summary::-webkit-details-marker {
   display: none;
 }
+
 /* Glyph disclosure marker: `▸` when closed, `▾` when open. Fixed
    inline-block width so the summary text baseline stays put across states —
    the two glyphs don't measure identically in the JetBrains Mono fallback
@@ -1273,12 +1404,15 @@ html {
   margin-right: var(--ps1ui-space-sm);
   color: var(--ps1ui-color-fg-muted);
 }
+
 .ps1ui-details[open] > .ps1ui-details__summary::before {
   content: "▾";
 }
+
 .ps1ui-details__summary:hover {
   color: var(--ps1ui-color-primary);
 }
+
 /* Focus ring lives on the summary (the interactive element), not on details
    itself — .ps1ui-details__summary:focus-visible is registered in
    styles/components.css's forced-colors grouped selector so the box-shadow
@@ -1287,6 +1421,7 @@ html {
   outline: none;
   box-shadow: var(--ps1ui-shadow-focus-ring);
 }
+
 .ps1ui-details__body {
   padding: var(--ps1ui-space-md);
   border-top: 1px solid var(--ps1ui-color-border);
@@ -1408,6 +1543,7 @@ html {
   syntax: "*";
   inherits: false;
 }
+
 /* Stack — flexbox composition of children along one axis.
    Establishes an inline-size containment context so descendants respond to
    Stack's width via `@container` queries. Named `ps1ui-stack` for future
@@ -1483,6 +1619,7 @@ html {
   justify-content: var(--_justify);
   flex-wrap: var(--_wrap);
 }
+
 @container (min-width: 40rem) {
   .ps1ui-stack {
     --_direction: var(--_direction-sm);
@@ -1551,13 +1688,16 @@ html {
    neutralizations are declared here even though base.css's reset also
    collapses table borders — the components.css entry ships without the
    reset, and UA <th> defaults (bold, center) would leak through. */
+
 .ps1ui-table__scroller {
   overflow-x: auto;
 }
+
 .ps1ui-table__scroller:focus-visible {
   outline: none;
   box-shadow: var(--ps1ui-shadow-focus-ring);
 }
+
 /* No width override — the UA's shrink-to-fit keeps the grid hugging its
    content like a box-drawing table. Call sites that want a full-bleed table
    (e.g. a props table filling a docs column) opt in with `width: 100%`. */
@@ -1568,6 +1708,7 @@ html {
   font-size: var(--ps1ui-font-size-sm);
   line-height: 1.6;
 }
+
 .ps1ui-table th,
 .ps1ui-table td {
   border: 1px solid var(--ps1ui-color-border);
@@ -1581,10 +1722,12 @@ html {
      vertical centers of unequal-height neighbors. */
   vertical-align: top;
 }
+
 .ps1ui-table th {
   background: var(--ps1ui-color-surface);
   font-weight: 600;
 }
+
 .ps1ui-table thead th {
   border-bottom-color: var(--ps1ui-color-border-strong);
 }
@@ -1672,6 +1815,7 @@ html {
   syntax: "*";
   inherits: false;
 }
+
 /* Text — typography primitive.
    Text is a leaf component: it queries an ancestor containment context (a
    PS1Root / Container / Grid / Stack), but does NOT establish one itself.
@@ -1716,6 +1860,7 @@ html {
   font-size: var(--_size);
   font-weight: var(--_weight);
 }
+
 @container (min-width: 40rem) {
   .ps1ui-text {
     --_size: var(--_size-sm);
@@ -1740,15 +1885,18 @@ html {
     --_weight: var(--_weight-xl);
   }
 }
+
 .ps1ui-text--truncate {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: 100%;
 }
+
 .ps1ui-text--truncate-inline {
   display: inline-block;
 }
+
 .ps1ui-text--body {
   color: var(--ps1ui-color-fg);
 }
@@ -1764,6 +1912,52 @@ html {
 .ps1ui-text--accent {
   color: var(--ps1ui-color-accent);
 }
+.ps1ui-text--danger {
+  color: var(--ps1ui-color-danger);
+}
+.ps1ui-textarea {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: var(--ps1ui-font-mono);
+  font-size: var(--ps1ui-font-size-sm);
+  line-height: 1.5;
+  color: var(--ps1ui-color-fg);
+  background: var(--ps1ui-color-bg);
+  border: 1px solid var(--ps1ui-color-border-strong);
+  border-radius: var(--ps1ui-radius-md);
+  padding: var(--ps1ui-control-padding-y) var(--ps1ui-space-md);
+  resize: vertical;
+  transition:
+    border-color var(--ps1ui-transition-fast),
+    box-shadow var(--ps1ui-transition-fast);
+}
+
+.ps1ui-textarea::-moz-placeholder {
+  color: var(--ps1ui-color-fg-subtle);
+}
+
+.ps1ui-textarea::placeholder {
+  color: var(--ps1ui-color-fg-subtle);
+}
+
+.ps1ui-textarea:hover:not(:disabled) {
+  border-color: var(--ps1ui-color-primary);
+}
+
+.ps1ui-textarea:focus {
+  outline: none;
+  border-color: var(--ps1ui-color-primary);
+  box-shadow: var(--ps1ui-shadow-focus-ring);
+}
+
+.ps1ui-textarea:disabled {
+  cursor: not-allowed;
+  color: var(--ps1ui-color-fg-subtle);
+  border-color: var(--ps1ui-color-border);
+  background: var(--ps1ui-color-surface);
+  resize: none;
+}
 /* Input custom properties emitted by Heading.tsx per set responsive-prop
    breakpoint (`--_heading-<axis>-<bp>`). Registered as non-inheriting for
    the same reason as Stack — see Stack.css's @property block for the full
@@ -1808,6 +2002,7 @@ html {
   syntax: "*";
   inherits: false;
 }
+
 /* Heading — semantic heading primitive with level-driven typography.
    Like Text, Heading is a leaf: it queries an ancestor containment context
    but does not establish one itself. See Text.css for the rationale.
@@ -1858,6 +2053,7 @@ html {
   font-size: var(--_size);
   font-weight: var(--_weight);
 }
+
 @container (min-width: 40rem) {
   .ps1ui-heading {
     --_size: var(--_size-sm);
@@ -1882,6 +2078,7 @@ html {
     --_weight: var(--_weight-xl);
   }
 }
+
 /* Containment side-effect defense — applied uniformly to every primitive that
    establishes a `container-type: inline-size` context (i.e. every layout
    primitive whose responsive props drive `@container` queries).
@@ -1911,6 +2108,7 @@ html {
   justify-self: stretch;
   min-width: 0;
 }
+
 /* forced-colors (Windows High Contrast) strips box-shadow, so every component
    whose focus ring is box-shadow-based needs a real outline there — one rule,
    one owner, same precedent as the containment grouped selector above. Add new
@@ -1923,7 +2121,8 @@ html {
   .ps1ui-codeblock:focus-visible,
   .ps1ui-details__summary:focus-visible,
   .ps1ui-input:focus,
-  .ps1ui-table__scroller:focus-visible {
+  .ps1ui-table__scroller:focus-visible,
+  .ps1ui-textarea:focus {
     outline: 2px solid CanvasText;
     outline-offset: 2px;
   }