@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.1

package/forms/combobox/combobox.module.css

@@ -0,0 +1,511 @@
+/*
+ * Combobox (§10.6). CVA function `combobox`. Parts: `base` (the field box,
+ * Base UI's InputGroup), `input`, `icon`, `clear`, `trigger` (with
+ * `chevron`), `chips` and each removable `chip` (§10.11: the Chip module's
+ * parts through `chipParts`; `chip` adds only the keyboard ring, the stack
+ * guard and the print comma), `popup`, `list`, `item`,
+ * `itemIndicator`, `itemText`, `match`, `group`, `groupLabel`, `separator`,
+ * `empty`, `status` (the loading and failure row, with `statusGlyph`),
+ * `addRow` (the creatable row, with `addGlyph`); `positioner` places the
+ * popup on --layer-3, and `edge` / `edgeLine` draw the disabled
+ * `line-dotted-fine` edge as true dots [D36, D68]. Colors are role
+ * variables only; local custom properties carry dimensions only. The popup
+ * is a portaled `white` page scope framed by --border-size-2 --primary12
+ * [D92, D139, D156].
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.input {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.item {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.groupLabel {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.empty,
+.status {
+  composes: typeBodyUi typeMuted from '../../utils/type.module.css';
+}
+
+.edgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  /* The field box (§10.1): --size-px-8 minimum, --radius-1, --border-size-1 --role-rule, open. */
+  .base {
+    /* Local dimensions. */
+    --combobox-edge: var(--border-size-1);
+    --combobox-radius: var(--radius-1);
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: var(--size-px-8);
+    margin: 0;
+    padding-block: 0;
+    padding-inline: calc(var(--ds-space-12) + var(--border-size-1) - var(--combobox-edge)) 0;
+    border: var(--combobox-edge) solid var(--role-rule);
+    border-radius: var(--combobox-radius);
+    background: none;
+    color: var(--primary12);
+    cursor: text;
+  }
+
+  /* The value: type-body-ui in the box's ink; the ring is the box's. */
+  .input {
+    flex: 1 1 var(--size-px-9);
+    align-self: stretch;
+    min-inline-size: 0;
+    min-block-size: calc(var(--size-px-8) - 2 * var(--combobox-edge));
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    text-overflow: ellipsis;
+    appearance: none;
+  }
+
+  /* The placeholder: --role-muted, one weight lighter in dark scopes [D170]. */
+  .input::placeholder {
+    color: var(--role-muted);
+    font-weight: max(
+      var(--type-weight-floor, 400),
+      calc(var(--type-weight, 400) - var(--ds-muted-weight-step))
+    );
+  }
+
+  /* Leading icon (search) and the chevron: --primary12, inline tier [D166]. */
+  .icon {
+    flex: none;
+    color: inherit;
+  }
+
+  /* Clear × and the chevron trigger: glyph cells with a --ds-size-hit target. */
+  .clear,
+  .trigger {
+    position: relative;
+    flex: none;
+    display: grid;
+    place-items: center;
+    align-self: stretch;
+    inline-size: var(--ds-size-hit);
+    min-block-size: var(--ds-size-hit);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--combobox-radius);
+    background: none;
+    color: inherit;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .chevron {
+    display: block;
+  }
+
+  /* Chips wrap inside the box, which grows and never scrolls sideways. */
+  .chips {
+    display: flex;
+    flex: 1 1 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--size-px-1);
+    min-inline-size: 0;
+  }
+
+  /*
+   * The removable chip (§10.11) is the Chip module's (chipParts): here only
+   * what a focusable Base UI chip adds, its keyboard ring (states).
+   */
+  .chip {
+    cursor: default;
+    outline: 0;
+  }
+
+  .edge {
+    display: none;
+    position: absolute;
+    inset-block-start: calc(var(--ds-dot-fine) / 2);
+    inset-inline-start: calc(var(--ds-dot-fine) / 2);
+    inline-size: calc(100% - var(--ds-dot-fine));
+    block-size: calc(100% - var(--ds-dot-fine));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+    rx: calc(var(--combobox-radius) - var(--ds-dot-fine) / 2);
+  }
+
+  .positioner {
+    z-index: var(--layer-3);
+    outline: 0;
+  }
+
+  /* The overlay face: the white scope's --primary1, the --border-size-2 --primary12 frame, --ds-radius-8. */
+  .popup {
+    /* The clip reveal starts from the trigger side. */
+    --combobox-reveal-from: inset(0 0 100% 0);
+
+    box-sizing: border-box;
+    inline-size: var(--anchor-width);
+    max-inline-size: calc(100vw - 2 * var(--ds-space-margin));
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--ds-radius-8);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    clip-path: inset(0);
+    outline: 0;
+  }
+
+  /* At most 8 rows, then it scrolls; the height stays above the on-screen keyboard. */
+  .list {
+    box-sizing: border-box;
+    max-block-size: min(
+      var(--available-height, 100vh),
+      calc(8 * var(--ds-size-hit) + 2 * var(--size-px-1))
+    );
+    padding: var(--size-px-1);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: var(--size-px-1);
+    outline: 0;
+  }
+
+  .list:empty {
+    padding: 0;
+  }
+
+  /* Items as Select (§10.5): --ds-size-hit rows, the ✓ column first. */
+  .item {
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--size-px-3) minmax(0, 1fr);
+    align-items: center;
+    column-gap: var(--size-px-2);
+    min-block-size: var(--ds-size-hit);
+    padding-inline: var(--size-px-3);
+    border-radius: calc(var(--ds-radius-8) - var(--size-px-1));
+    color: var(--primary12);
+    cursor: default;
+    outline: 0;
+    user-select: none;
+  }
+
+  .item::before {
+    content: '';
+    display: none;
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    border-inline-start: var(--ds-stroke-3) solid var(--primary12);
+  }
+
+  .itemIndicator {
+    grid-column: 1;
+    display: inline-flex;
+    color: var(--primary12);
+  }
+
+  .itemText {
+    grid-column: 2;
+    min-inline-size: 0;
+  }
+
+  /* The matched substring: --primary12 at --font-weight-7; never color or fill (P2). */
+  .match {
+    background: none;
+    color: var(--primary12);
+    font-weight: var(--font-weight-7);
+  }
+
+  .group {
+    display: block;
+  }
+
+  .groupLabel {
+    padding-block: var(--size-px-2) var(--size-px-1);
+    padding-inline: var(--size-px-3);
+    color: var(--role-muted);
+  }
+
+  .separator {
+    margin-block: var(--size-px-1);
+    margin-inline: calc(-1 * var(--size-px-1));
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  /*
+   * The empty and loading rows: type-body-ui italic in --role-muted. They
+   * stay mounted as live regions, so only a row with words takes space.
+   */
+  .empty,
+  .status {
+    font-style: italic;
+  }
+
+  .empty:not(:empty),
+  .status:not(:empty) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-px-2);
+    padding: var(--size-px-3);
+  }
+
+  /* A fetch failure: the danger glyph in --role-status and a --primary12 message. */
+  .statusError {
+    display: contents;
+    color: var(--primary12);
+    font-style: normal;
+  }
+
+  .statusGlyph {
+    flex: none;
+    inline-size: var(--size-px-3);
+    block-size: 1lh;
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--role-status-fill);
+    stroke: var(--role-status-fill);
+    stroke-width: var(--ds-stroke-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* The creatable row: "+ Add '…'" in --primary12. */
+  .addRow {
+    color: var(--primary12);
+  }
+
+  .addGlyph {
+    grid-column: 1;
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine {
+      stroke: currentColor;
+    }
+
+    .statusGlyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .base {
+      transition-property: border-color, outline-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    .chevron {
+      transition: rotate var(--ds-duration-quick) var(--ease-out-3);
+    }
+
+    /* The clip reveal (the edge wipes open), never a fade [D91]. */
+    .popup {
+      transition: clip-path var(--ds-duration-disclosure) var(--ease-out-3);
+    }
+  }
+
+  /* From --lg-n-above the popup may grow past the field, up to --size-sm. */
+  @media (min-width: 1024px) {
+    .popup {
+      min-inline-size: var(--anchor-width);
+      inline-size: auto;
+      max-inline-size: max(var(--anchor-width), var(--size-sm));
+    }
+  }
+
+  /* Stack guard: chips keep their × and truncate their label [D73] (`.chips` outranks the chip's own cap). */
+  @media (max-width: 359.98px) {
+    .chips .chip {
+      max-inline-size: calc(100% - var(--ds-size-hit));
+    }
+  }
+}
+
+@layer variants {
+  /*
+   * Multiple: the box grows as its chips wrap. The chips row (chips plus
+   * the input) takes the width the clear and chevron cells leave, so those
+   * stay in the box at the end edge; the input keeps room for its
+   * placeholder and wraps to its own line before it would truncate. The
+   * row carries the block padding, so an empty box is --size-px-8 tall,
+   * as a single one is.
+   */
+  .multiple .chips {
+    flex: 1 1 0;
+    align-self: stretch;
+    padding-block: calc((var(--size-px-8) - var(--size-px-7)) / 2 - var(--combobox-edge));
+  }
+
+  .multiple .input {
+    flex: 1 1 var(--size-px-11);
+    min-inline-size: min(100%, var(--size-px-11));
+    min-block-size: var(--size-px-7);
+  }
+
+  /*
+   * Plate: the box face is the nested white scope's --primary1 (§10.1). The
+   * box is also a Ground face, whose own classes share the base layer, so
+   * its display and edge are restated here.
+   */
+  .plate {
+    display: flex;
+    border: var(--combobox-edge) solid var(--role-rule);
+    background-color: var(--primary1);
+    color: var(--primary12);
+  }
+}
+
+@layer states {
+  /* Hover (not disabled): the 1 px edge steps to --primary12 at the same weight [D140]. */
+  .base:hover:not([data-disabled], [data-invalid], [data-readonly]) {
+    border-color: var(--primary12);
+  }
+
+  /* Focus: the ring on any focus of the input, outside the box [D90]. */
+  .base[data-focused] {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  .input:focus-visible {
+    outline: none;
+  }
+
+  /* Open: the box edge goes to --primary12 and the chevron turns. */
+  .base[data-popup-open] {
+    border-color: var(--primary12);
+  }
+
+  .trigger[data-popup-open] .chevron {
+    rotate: 180deg;
+  }
+
+  /* The clear × and the trigger take their own ring (the chip × takes the Chip module's). */
+  .clear:focus-visible,
+  .trigger:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: calc(-1 * var(--border-size-2));
+  }
+
+  /* Pressed: the glyph's cell takes the inverse pair (§10.1 icon states). */
+  .clear:active {
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+  }
+
+  /* A chip focused from the keyboard (Backspace, arrows) draws the ring. */
+  .chip:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /* Error: the --border-size-2 edge in --role-status (the danger scale) [D141, D155]. */
+  .base[data-invalid] {
+    --combobox-edge: var(--border-size-2);
+
+    border-color: var(--role-status);
+  }
+
+  /* Disabled: dotted edge, --role-muted inks, no face, clear hidden; never dimmed [D16]. */
+  .base[data-disabled] {
+    --combobox-edge: 0px;
+
+    border-style: none;
+    background: none;
+    color: var(--role-muted);
+    cursor: default;
+  }
+
+  .base[data-disabled] .edge {
+    display: block;
+  }
+
+  .base[data-disabled] .clear {
+    display: none;
+  }
+
+  /* Read-only: the box is removed; a --border-size-1 --role-rule bottom rule remains. */
+  .base[data-readonly] {
+    border-width: 0 0 var(--border-size-1);
+    border-color: var(--role-rule);
+    border-radius: var(--ds-radius-none);
+    background: none;
+  }
+
+  /* Highlighted: --primary4 plus the start-edge bar; focus stays in the input [D145]. */
+  .item[data-highlighted] {
+    background-color: var(--primary4);
+  }
+
+  .item[data-highlighted]::before {
+    display: block;
+  }
+
+  /* Selected: the leading ✓ in --primary12 plus --font-weight-6; no fill, no bar [D145]. */
+  .item[data-selected] {
+    font-weight: var(--font-weight-6);
+  }
+
+  .item[data-disabled] {
+    background: none;
+    color: var(--role-muted);
+  }
+
+  .item[data-disabled]::before {
+    display: none;
+  }
+
+  /* Placement: a popup above the field reveals from its bottom edge. */
+  .popup[data-side='top'] {
+    --combobox-reveal-from: inset(100% 0 0 0);
+  }
+
+  /* The clip reveal from the trigger side [D91]; instant under --motionNotOK. */
+  .popup[data-starting-style],
+  .popup[data-ending-style] {
+    clip-path: var(--combobox-reveal-from);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Values print as text in the frame; multiple values comma-joined (the chips print as words, Chip's print rules). */
+    .clear,
+    .trigger,
+    .positioner {
+      display: none;
+    }
+
+    .chip:not(:last-of-type)::after {
+      content: ',';
+    }
+
+    .input::placeholder {
+      font-size: 0;
+    }
+  }
+}

package/forms/combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/forms/combobox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/forms/combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/forms/field/Field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/forms/field/Field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA4BjE,eAAO,MAAM,KAAK;;;8EAMhB,CAAA;AASF,sFAAsF;AACtF,eAAO,MAAM,WAAW,OAAsB,CAAA;AAK9C;;;GAGG;AACH,wBAAgB,eAAe,IAAI,OAAO,CAEzC;AAED,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAA;AAE/C,qEAAqE;AACrE,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,GAAG;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAA;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;CACvC,CAAA;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,qBAqBtC;AAED,oFAAoF;AACpF,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG;IACpD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC5B,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAoBhD;AAED,mEAAmE;AACnE,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAA;AAE/D;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAQ5D;AAED,yEAAyE;AACzE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;AAEnE;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAmBhD"}

package/forms/field/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/forms/field/Field.tsx"],"names":[],"mappings":"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"}

package/forms/field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/forms/field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/forms/field/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/forms/fieldset/Fieldset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../src/forms/fieldset/Fieldset.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAClE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA4BjE,eAAO,MAAM,QAAQ;;;;8EAcnB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAErD,uFAAuF;AACvF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,GAAG;IACpD;;;;;OAKG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,2EAA2E;IAC3E,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;CAC1C,CAAA;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAoB5C;AAED,+DAA+D;AAC/D,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,MAAM,CAAC,KAAK,CAAA;AAE3D;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAYxD;AAED,4DAA4D;AAC5D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAA;AAEtF;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAYxD"}

package/forms/fieldset/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../src/forms/fieldset/Fieldset.tsx"],"names":[],"mappings":"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"}

package/forms/fieldset/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/fieldset/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/forms/fieldset/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/forms/fieldset/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}

package/forms/form/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../src/forms/form/Form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA4BjE,eAAO,MAAM,IAAI;;;8EAMf,CAAA;AAEF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAA;AAE7C,yEAAyE;AACzE,MAAM,MAAM,SAAS,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,IAAI,CAC5F,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EACtB,WAAW,CACZ,GAAG;IACF,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,0FAA0F;IAC1F,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;CACtC,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnF,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,qBAczB;AAED,2FAA2F;AAC3F,MAAM,WAAW,gBAAgB;IAC/B,mEAAmE;IACnE,EAAE,EAAE,MAAM,CAAA;IACV,kDAAkD;IAClD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,6BAA6B;AAC7B,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,uEAAuE;IACvE,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAA;IACnC,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAmClD;AAED,sCAAsC;AACtC,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAA;AAE7D;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,qBAG1C;AAED,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAA;AAEjE;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAGlD"}

package/forms/form/Form.js

@@ -0,0 +1,90 @@
+'use client';
+import * as React from 'react';
+import { Form as BaseForm } from '@base-ui/react/form';
+import { cva } from 'class-variance-authority';
+import { Alert } from '../../feedback/alert';
+import { Link } from '../../actions/link';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './form.module.css';
+/*
+ * Form (§10.2): anything submitted. Instant-apply settings are switches.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: form.module.css; CVA function `form`.
+ * - Axes: `primary`, `secondary` → scales module classes (structure takes
+ *   `primary` only; `secondary` is accepted unused).
+ * - Compound variants: none. Defaults: color axes none.
+ * - Color fallback: inherits the scope. The summary is an Alert whose
+ *   secondary is the danger scale [D129].
+ * - States: `aria-busy` (set from `busy`) → the form is inert, the submit
+ *   reads "-ing…" at its rest width [D84].
+ * - Parts: base, summary (an Alert, status danger; `summaryTitle`,
+ *   `summaryList`), actions; `row` holds a short pair.
+ * - Scope: none.
+ * - Container: the root is the inline-size container `form`; short pairs
+ *   share a row from 480 px, fieldset padding and the butted submit's
+ *   stack guard read it below 360 px (§5.10.2) [D163].
+ */
+export const form = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/**
+ * A Base UI Form, one column at `--size-sm`. Base UI validates on submit,
+ * then re-validates failed fields as they change (§10.2 asks for blur;
+ * pass `validationMode="onBlur"` to a Field that should wait for it).
+ * Order: an optional `FormSummary`, fields and fieldsets, then
+ * `FormActions`.
+ */
+export function Form(props) {
+    const { busy, primary, secondary, className, ...rest } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement(BaseForm, { ...rest, ...scope, "aria-busy": busy || undefined, inert: busy || undefined, className: form({ primary, secondary, className }) }));
+}
+/**
+ * The error summary at the top of the form (§10.2): the danger Alert with
+ * a heading and a link to each failing field. Render it only while there
+ * are errors; it takes focus when it appears.
+ */
+export function FormSummary(props) {
+    const { title, errors, className } = props;
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        ref.current?.focus();
+    }, []);
+    const focusField = (event, id) => {
+        const target = document.getElementById(id);
+        if (!target)
+            return;
+        event.preventDefault();
+        target.focus();
+        target.scrollIntoView({ block: 'center' });
+    };
+    return (React.createElement(Alert, { ref: ref, status: "danger", tabIndex: -1, className: cx(styles.summary, className) },
+        React.createElement("h2", { className: styles.summaryTitle }, title),
+        React.createElement("ul", { className: styles.summaryList }, errors.map((error) => (React.createElement("li", { key: error.id },
+            React.createElement(Link, { href: `#${error.id}`, onClick: (event) => focusField(event, error.id) }, error.message)))))));
+}
+/**
+ * A short pair, such as city and postcode: a 2:1 row that stacks when both
+ * fields do not fit, and always shares the row from 480 px of form width.
+ */
+export function FormRow(props) {
+    const { className, ...rest } = props;
+    return React.createElement("div", { ...rest, className: cx(styles.row, className) });
+}
+/**
+ * The action row, `--size-px-5` below the last field. Author the solid
+ * submit (`size="lg"`) last: it shows first and full width at base, and
+ * last (rightmost) from `--md-n-above` [D106].
+ */
+export function FormActions(props) {
+    const { className, ...rest } = props;
+    return React.createElement("div", { ...rest, className: cx(styles.actions, className) });
+}
+//# sourceMappingURL=Form.js.map

package/forms/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/forms/form/Form.tsx"],"names":[],"mappings":"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"}

package/forms/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/forms/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/forms/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}