@ps1ui/core 0.0.1 → 0.2.0

package/dist/components.css

@@ -21,7 +21,6 @@
  * ========================================================================== */
 
 /* Palette hexes are mirrored in .storybook/ps1uiTheme.ts — see note there. */
-
 :root {
   --ps1ui-font-mono:
     "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", Consolas,
@@ -41,6 +40,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);
 
@@ -110,20 +120,16 @@
 
   --ps1ui-transition-fast: 120ms ease;
 }
-
 /* PS1Root establishes the app-level responsive containment context.
    `container-type: inline-size` turns this element into a query context for
    `@container` rules used by responsive ps1ui components. Named `ps1ui-root`
    for future targeted queries; unnamed queries in component CSS match this
    via nearest-ancestor lookup. */
-
 /* Containment side-effect defense (align-self / justify-self / min-width) lives
    in components.css's shared selector list — see the block header there. */
-
 .ps1ui-root {
   container: ps1ui-root / inline-size;
 }
-
 .ps1ui-anchor {
   font-family: var(--ps1ui-font-mono);
   text-decoration: underline;
@@ -138,7 +144,6 @@
 
 /* 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;
@@ -147,15 +152,12 @@
 /* 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. */
-
 .ps1ui-anchor--primary {
   color: var(--ps1ui-color-primary);
 }
-
 .ps1ui-anchor--primary:hover {
   color: var(--ps1ui-color-primary-hover);
 }
-
 .ps1ui-anchor--primary:active {
   color: var(--ps1ui-color-primary-active);
 }
@@ -164,21 +166,17 @@
   color: inherit;
   text-decoration-color: var(--ps1ui-color-fg-subtle);
 }
-
 /* Reset text-decoration-color to currentColor so the underline follows the
    hover/active color shift; without this it would stay pinned to fg-subtle
    from the base rule. */
-
 .ps1ui-anchor--subtle:hover {
   color: var(--ps1ui-color-primary);
   text-decoration-color: currentColor;
 }
-
 .ps1ui-anchor--subtle:active {
   color: var(--ps1ui-color-primary-active);
   text-decoration-color: currentColor;
 }
-
 .ps1ui-button {
   display: inline-flex;
   align-items: center;
@@ -221,17 +219,14 @@
   color: var(--ps1ui-color-primary-fg);
   border-color: var(--ps1ui-color-primary);
 }
-
 .ps1ui-button--primary:hover:not(:disabled) {
   background: var(--ps1ui-color-primary-hover);
   border-color: var(--ps1ui-color-primary-hover);
 }
-
 .ps1ui-button--primary:active:not(:disabled) {
   background: var(--ps1ui-color-primary-active);
   border-color: var(--ps1ui-color-primary-active);
 }
-
 .ps1ui-button--primary:disabled {
   background: transparent;
   color: var(--ps1ui-color-fg-subtle);
@@ -247,22 +242,40 @@
      down to its text glyphs next to a solid primary. */
   border-color: var(--ps1ui-color-fg-subtle);
 }
-
 .ps1ui-button--secondary:hover:not(:disabled) {
   border-color: var(--ps1ui-color-primary);
   background: color-mix(in srgb, var(--ps1ui-color-primary) 6%, transparent);
 }
-
 .ps1ui-button--secondary:active:not(:disabled) {
   border-color: var(--ps1ui-color-primary-active);
   background: color-mix(in srgb, var(--ps1ui-color-primary-active) 10%, transparent);
 }
-
 .ps1ui-button--secondary:disabled {
   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;
@@ -325,7 +338,6 @@
    sit OUTSIDE the 4×8 content — base.css's reset intentionally excludes pseudo
    elements from its `box-sizing: border-box` block for exactly this pattern.
    Rendered geometry locked in by Checkbox.checkmark-geometry.test.tsx. */
-
 .ps1ui-checkbox:checked:not(:indeterminate)::after {
   content: "";
   position: absolute;
@@ -356,7 +368,6 @@
    needs nothing). The focus-outline counterpart lives in the grouped
    forced-colors rule in styles/components.css. Tested in
    src/styles/forced-colors.test.tsx. */
-
 @media (forced-colors: active) {
   .ps1ui-checkbox:indeterminate::after {
     background: none;
@@ -378,7 +389,6 @@
   background: var(--ps1ui-color-surface);
   border-color: var(--ps1ui-color-border);
 }
-
 /* Input custom properties emitted by Container.tsx per set responsive-prop
    breakpoint (`--_container-<axis>-<bp>`). Registered as non-inheriting for
    the same reason as Stack — see Stack.css's @property block for the full
@@ -386,52 +396,42 @@
    `unset`/`revert` won't block; only `initial` or `@property inherits:false`
    works). Any new responsive axis added to Container.tsx must add matching
    @property blocks here. */
-
 @property --_container-size-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_container-size-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_container-size-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_container-size-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_container-size-xl {
   syntax: "*";
   inherits: false;
 }
-
 @property --_container-px-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_container-px-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_container-px-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_container-px-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_container-px-xl {
   syntax: "*";
   inherits: false;
@@ -453,10 +453,8 @@
    Breakpoint thresholds mirror --ps1ui-breakpoint-* in tokens.css; kept
    inline as literal values because `@container` conditions cannot resolve
    `var()`. Keep them in sync. */
-
 /* Containment side-effect defense (align-self / justify-self / min-width) lives
    in components.css's shared selector list — see the block header there. */
-
 .ps1ui-container {
   container: ps1ui-container / inline-size;
   width: 100%;
@@ -487,79 +485,65 @@
     --_px: var(--_px-sm);
   }
 }
-
 @container (min-width: 48rem) {
   .ps1ui-container {
     --_size: var(--_size-md);
     --_px: var(--_px-md);
   }
 }
-
 @container (min-width: 64rem) {
   .ps1ui-container {
     --_size: var(--_size-lg);
     --_px: var(--_px-lg);
   }
 }
-
 @container (min-width: 80rem) {
   .ps1ui-container {
     --_size: var(--_size-xl);
     --_px: var(--_px-xl);
   }
 }
-
 /* Input custom properties emitted by Grid.tsx per set responsive-prop
    breakpoint (`--_grid-<axis>-<bp>`). Registered as non-inheriting for the
    same reason as Stack — see Stack.css's @property block for the full
    rationale. Any new responsive axis added to Grid.tsx must add matching
    @property blocks here. */
-
 @property --_grid-columns-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_grid-columns-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_grid-columns-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_grid-columns-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_grid-columns-xl {
   syntax: "*";
   inherits: false;
 }
-
 @property --_grid-gap-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_grid-gap-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_grid-gap-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_grid-gap-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_grid-gap-xl {
   syntax: "*";
   inherits: false;
@@ -581,10 +565,8 @@
    Breakpoint thresholds mirror --ps1ui-breakpoint-* in tokens.css; kept
    inline as literal values because `@container` conditions cannot resolve
    `var()`. Keep them in sync. */
-
 /* Containment side-effect defense (align-self / justify-self / min-width) lives
    in components.css's shared selector list — see the block header there. */
-
 .ps1ui-grid {
   container: ps1ui-grid / inline-size;
   display: grid;
@@ -614,54 +596,45 @@
     --_gap: var(--_gap-sm);
   }
 }
-
 @container (min-width: 48rem) {
   .ps1ui-grid {
     --_columns: var(--_columns-md);
     --_gap: var(--_gap-md);
   }
 }
-
 @container (min-width: 64rem) {
   .ps1ui-grid {
     --_columns: var(--_columns-lg);
     --_gap: var(--_gap-lg);
   }
 }
-
 @container (min-width: 80rem) {
   .ps1ui-grid {
     --_columns: var(--_columns-xl);
     --_gap: var(--_gap-xl);
   }
 }
-
 /* Input custom properties emitted by GridItem.tsx per set responsive-prop
    breakpoint (`--_griditem-col-span-<bp>`). Registered as non-inheriting for
    the same reason as Stack — see Stack.css's @property block for the full
    rationale. Any new responsive axis added to GridItem.tsx must add matching
    @property blocks here. */
-
 @property --_griditem-col-span-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_griditem-col-span-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_griditem-col-span-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_griditem-col-span-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_griditem-col-span-xl {
   syntax: "*";
   inherits: false;
@@ -694,7 +667,6 @@
    the item still renders, the declaration is simply ignored. That matches
    the "no runtime enforcement of parent type" convention used across the
    library. */
-
 .ps1ui-griditem {
   --_col-span-base: var(--_griditem-col-span-base, 1);
   --_col-span-sm: var(--_griditem-col-span-sm, var(--_col-span-base));
@@ -712,25 +684,21 @@
     --_col-span: var(--_col-span-sm);
   }
 }
-
 @container (min-width: 48rem) {
   .ps1ui-griditem {
     --_col-span: var(--_col-span-md);
   }
 }
-
 @container (min-width: 64rem) {
   .ps1ui-griditem {
     --_col-span: var(--_col-span-lg);
   }
 }
-
 @container (min-width: 80rem) {
   .ps1ui-griditem {
     --_col-span: var(--_col-span-xl);
   }
 }
-
 .ps1ui-input {
   display: block;
   width: 100%;
@@ -772,7 +740,6 @@
   border-color: var(--ps1ui-color-border);
   background: var(--ps1ui-color-surface);
 }
-
 .ps1ui-label {
   display: inline-block;
   font-family: var(--ps1ui-font-mono);
@@ -781,14 +748,13 @@
   line-height: 1.6;
   color: var(--ps1ui-color-fg);
 }
-
-/* List — semantic <ul>/<ol> wrapper with terminal-style markers.
+/* List — semantic <ul>/<ol> wrapper with plain-text markers.
 
    The global reset in base.css sets `list-style: none` on every <ul>/<ol>,
    which strips the UA bullet/number glyph. List re-introduces a marker via
    `::before` on each direct <li> — `-` for unordered, `NN.` for ordered —
    so the "reset removes bullets" side effect turns into an on-brand
-   terminal glyph rather than a hole.
+   plain-text glyph rather than a hole.
 
    The ordered marker uses `counter(list-item)` — the browser-maintained
    list-item counter that already honours `<ol start>`, `<ol reversed>`,
@@ -875,11 +841,9 @@
    as `<li><List>…</List></li>`. The outer flex `gap` on `.ps1ui-list`
    only reaches direct children, so without this rule any nested list
    loses breathing room. */
-
 .ps1ui-list li .ps1ui-list {
   margin-top: var(--ps1ui-space-xs);
 }
-
 /* ListItem — no rules of its own.
 
    The `.ps1ui-listitem` class (naming parallels `.ps1ui-griditem`) is a
@@ -888,7 +852,6 @@
    `<List>` continues to render identically to `<ListItem>`. Keeping this
    file present (and imported from components.css) matches the
    per-component file layout the `new-component` skill enforces. */
-
 .ps1ui-card {
   background: var(--ps1ui-color-surface);
   border: 1px solid var(--ps1ui-color-border);
@@ -899,7 +862,6 @@
   font-size: var(--ps1ui-font-size-sm);
   line-height: 1.6;
 }
-
 /* Code — inline code chip.
 
    Companion to <CodeBlock>, but for inline fragments that live inside body
@@ -936,7 +898,6 @@
    in-repo callers (Text = 1.6, Heading = 1.3) leave ample slack;
    consumers who tighten line-height below ~1.2 need to widen it around
    inline `<Code>` themselves. */
-
 .ps1ui-code {
   font-family: var(--ps1ui-font-mono);
   font-size: 0.9em;
@@ -947,7 +908,6 @@
   color: var(--ps1ui-color-fg);
   overflow-wrap: anywhere;
 }
-
 .ps1ui-codeblock {
   margin: 0;
   padding: var(--ps1ui-space-md) var(--ps1ui-space-lg);
@@ -994,7 +954,6 @@
 /* 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. */
-
 .ps1ui-codeblock .token.comment,
 .ps1ui-codeblock .token.prolog,
 .ps1ui-codeblock .token.doctype,
@@ -1028,11 +987,9 @@
 
 /* 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 {
   color: var(--ps1ui-code-inserted);
 }
-
 .ps1ui-codeblock .token.deleted {
   color: var(--ps1ui-code-deleted);
 }
@@ -1069,7 +1026,6 @@
 .ps1ui-codeblock .token.italic {
   font-style: italic;
 }
-
 .ps1ui-details {
   background: var(--ps1ui-color-surface);
   border: 1px solid var(--ps1ui-color-border);
@@ -1099,17 +1055,15 @@
 /* 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;
 }
 
-/* Terminal-style disclosure marker: `▸` when closed, `▾` when open. Fixed
+/* 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
    monospace stack. Colored with fg-muted so the arrow reads as chrome, not
    content; ::before is not exposed to the a11y tree so this is safe. */
-
 .ps1ui-details__summary::before {
   content: "▸";
   display: inline-block;
@@ -1130,7 +1084,6 @@
    itself — .ps1ui-details__summary:focus-visible is registered in
    styles/components.css's forced-colors grouped selector so the box-shadow
    ring falls back to a real outline in high-contrast mode. */
-
 .ps1ui-details__summary:focus-visible {
   outline: none;
   box-shadow: var(--ps1ui-shadow-focus-ring);
@@ -1140,7 +1093,6 @@
   padding: var(--ps1ui-space-md);
   border-top: 1px solid var(--ps1ui-color-border);
 }
-
 /* Input custom properties emitted by Stack.tsx per set responsive-prop
    breakpoint (`--_stack-<axis>-<bp>`). Registered as non-inheriting so a
    parent Stack's `--_stack-gap-md` (etc.) does NOT cascade into a nested
@@ -1158,127 +1110,102 @@
    every axis so a forgotten one trips CI immediately. `unset` / `revert` /
    `revert-layer` are NOT interchangeable with this approach for custom
    properties — they resolve to the inherited value, defeating the block. */
-
 @property --_stack-direction-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-direction-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-direction-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-direction-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-direction-xl {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-gap-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-gap-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-gap-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-gap-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-gap-xl {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-align-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-align-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-align-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-align-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-align-xl {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-justify-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-justify-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-justify-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-justify-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-justify-xl {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-wrap-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-wrap-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-wrap-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-wrap-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_stack-wrap-xl {
   syntax: "*";
   inherits: false;
@@ -1311,10 +1238,8 @@
    Each default matches the property's own initial-value behaviour so
    omitting the corresponding prop is equivalent to not writing the
    declaration at all. */
-
 /* Containment side-effect defense (align-self / justify-self / min-width) lives
    in components.css's shared selector list — see the block header there. */
-
 .ps1ui-stack {
   container: ps1ui-stack / inline-size;
   display: flex;
@@ -1371,7 +1296,6 @@
     --_wrap: var(--_wrap-sm);
   }
 }
-
 @container (min-width: 48rem) {
   .ps1ui-stack {
     --_direction: var(--_direction-md);
@@ -1381,7 +1305,6 @@
     --_wrap: var(--_wrap-md);
   }
 }
-
 @container (min-width: 64rem) {
   .ps1ui-stack {
     --_direction: var(--_direction-lg);
@@ -1391,7 +1314,6 @@
     --_wrap: var(--_wrap-lg);
   }
 }
-
 @container (min-width: 80rem) {
   .ps1ui-stack {
     --_direction: var(--_direction-xl);
@@ -1401,8 +1323,7 @@
     --_wrap: var(--_wrap-xl);
   }
 }
-
-/* Table — semantic <table> with terminal-style grid borders, wrapped in a
+/* Table — semantic <table> with box-drawing-style grid borders, wrapped in a
    horizontal-scroll container.
 
    Scroll wrapper: `display: table` boxes don't honor overflow, so Table.tsx
@@ -1414,8 +1335,8 @@
    high-contrast mode; the grouped rule restores a real outline).
 
    Grid borders: `border-collapse: collapse` + a uniform 1px cell border in
-   --ps1ui-color-border draw the closed single-stroke grid a terminal
-   box-drawing table (┌─┬─┐) renders — collapsing is what merges adjacent
+   --ps1ui-color-border draw the closed single-stroke grid a box-drawing
+   table (┌─┬─┐) renders — collapsing is what merges adjacent
    cell edges into one shared rule. The header row separates on two axes:
    a surface background and a border-strong bottom rule. That rule is
    declared on the <th> (cell origin) deliberately — in border-collapse
@@ -1447,7 +1368,6 @@
 /* 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%`. */
-
 .ps1ui-table {
   border-collapse: collapse;
   color: var(--ps1ui-color-fg);
@@ -1478,7 +1398,6 @@
 .ps1ui-table thead th {
   border-bottom-color: var(--ps1ui-color-border-strong);
 }
-
 /* Thead — no rules of its own.
 
    The `.ps1ui-thead` class is a stable API hook for consumers. All header
@@ -1487,7 +1406,6 @@
    continues to render identically to <Thead>. Keeping this file present
    (and imported from components.css) matches the per-component file layout
    the `new-component` skill enforces — same precedent as ListItem.css. */
-
 /* Tbody — no rules of its own.
 
    The `.ps1ui-tbody` class is a stable API hook for consumers. All cell
@@ -1496,7 +1414,6 @@
    file present (and imported from components.css) matches the per-component
    file layout the `new-component` skill enforces — same precedent as
    ListItem.css. */
-
 /* Tr — no rules of its own.
 
    The `.ps1ui-tr` class is a stable API hook for consumers. All cell
@@ -1505,7 +1422,6 @@
    present (and imported from components.css) matches the per-component file
    layout the `new-component` skill enforces — same precedent as
    ListItem.css. */
-
 /* Th — no rules of its own.
 
    The `.ps1ui-th` class is a stable API hook for consumers. All header-cell
@@ -1514,7 +1430,6 @@
    render identically to <Th>. Keeping this file present (and imported from
    components.css) matches the per-component file layout the `new-component`
    skill enforces — same precedent as ListItem.css. */
-
 /* Td — no rules of its own.
 
    The `.ps1ui-td` class is a stable API hook for consumers. All data-cell
@@ -1523,57 +1438,46 @@
    <Td>. Keeping this file present (and imported from components.css) matches
    the per-component file layout the `new-component` skill enforces — same
    precedent as ListItem.css. */
-
 /* Input custom properties emitted by Text.tsx per set responsive-prop
    breakpoint (`--_text-<axis>-<bp>`). Registered as non-inheriting for the
    same reason as Stack — see Stack.css's @property block for the full
    rationale. */
-
 @property --_text-size-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_text-size-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_text-size-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_text-size-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_text-size-xl {
   syntax: "*";
   inherits: false;
 }
-
 @property --_text-weight-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_text-weight-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_text-weight-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_text-weight-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_text-weight-xl {
   syntax: "*";
   inherits: false;
@@ -1600,7 +1504,6 @@
    NOT the UA `<strong>` style). Users who need the UA-strong appearance
    should pair `as="strong"` with `weight="bold"` for consistency across
    engines. */
-
 .ps1ui-text {
   margin: 0;
   font-family: var(--ps1ui-font-mono);
@@ -1631,21 +1534,18 @@
     --_weight: var(--_weight-sm);
   }
 }
-
 @container (min-width: 48rem) {
   .ps1ui-text {
     --_size: var(--_size-md);
     --_weight: var(--_weight-md);
   }
 }
-
 @container (min-width: 64rem) {
   .ps1ui-text {
     --_size: var(--_size-lg);
     --_weight: var(--_weight-lg);
   }
 }
-
 @container (min-width: 80rem) {
   .ps1ui-text {
     --_size: var(--_size-xl);
@@ -1667,73 +1567,104 @@
 .ps1ui-text--body {
   color: var(--ps1ui-color-fg);
 }
-
 .ps1ui-text--muted {
   color: var(--ps1ui-color-fg-muted);
 }
-
 .ps1ui-text--subtle {
   color: var(--ps1ui-color-fg-subtle);
 }
-
 .ps1ui-text--primary {
   color: var(--ps1ui-color-primary);
 }
-
 .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
    rationale. */
-
 @property --_heading-size-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_heading-size-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_heading-size-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_heading-size-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_heading-size-xl {
   syntax: "*";
   inherits: false;
 }
-
 @property --_heading-weight-base {
   syntax: "*";
   inherits: false;
 }
-
 @property --_heading-weight-sm {
   syntax: "*";
   inherits: false;
 }
-
 @property --_heading-weight-md {
   syntax: "*";
   inherits: false;
 }
-
 @property --_heading-weight-lg {
   syntax: "*";
   inherits: false;
 }
-
 @property --_heading-weight-xl {
   syntax: "*";
   inherits: false;
@@ -1762,7 +1693,6 @@
    base breakpoint, these floors keep the component in a legible default
    (font-size sm, font-weight normal). Text.css uses a live fallback path
    because Text.tsx does not normalize its size/weight props. */
-
 .ps1ui-heading {
   margin: 0;
   font-family: var(--ps1ui-font-mono);
@@ -1797,21 +1727,18 @@
     --_weight: var(--_weight-sm);
   }
 }
-
 @container (min-width: 48rem) {
   .ps1ui-heading {
     --_size: var(--_size-md);
     --_weight: var(--_weight-md);
   }
 }
-
 @container (min-width: 64rem) {
   .ps1ui-heading {
     --_size: var(--_size-lg);
     --_weight: var(--_weight-lg);
   }
 }
-
 @container (min-width: 80rem) {
   .ps1ui-heading {
     --_size: var(--_size-xl);
@@ -1840,7 +1767,6 @@
    tests (Stack.test.tsx / Container.test.tsx / Grid.test.tsx / PS1Root.test.tsx's
    "resists collapse via align-self: stretch in shrink-wrap flex parent") catch
    accidental removal. */
-
 .ps1ui-root,
 .ps1ui-container,
 .ps1ui-grid,
@@ -1856,14 +1782,14 @@
    box-shadow-focus components to this list. Component-specific forced-colors
    adjustments (e.g. Checkbox's indeterminate bar) stay in their own CSS.
    Tested in src/styles/forced-colors.test.tsx. */
-
 @media (forced-colors: active) {
   .ps1ui-button:focus-visible,
   .ps1ui-checkbox:focus-visible,
   .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;
   }