@slotted/styles 0.0.0-stage → 0.1.0-beta.0

package/src/filter-bar/filter-bar.tokens.json

@@ -0,0 +1,78 @@
+[
+  "--slotted-border-strong",
+  "--slotted-border-subtle",
+  "--slotted-border-width-medium",
+  "--slotted-border-width-thin",
+  "--slotted-control-border-color",
+  "--slotted-control-border-width",
+  "--slotted-control-font-size-lg",
+  "--slotted-control-font-size-md",
+  "--slotted-control-font-size-sm",
+  "--slotted-control-gap-lg",
+  "--slotted-control-gap-md",
+  "--slotted-control-gap-sm",
+  "--slotted-control-height-lg",
+  "--slotted-control-height-md",
+  "--slotted-control-height-sm",
+  "--slotted-control-icon-size-lg",
+  "--slotted-control-icon-size-md",
+  "--slotted-control-icon-size-sm",
+  "--slotted-control-invalid-edge-width",
+  "--slotted-control-line-height",
+  "--slotted-control-padding-inline-lg",
+  "--slotted-control-padding-inline-md",
+  "--slotted-control-padding-inline-sm",
+  "--slotted-control-radius",
+  "--slotted-control-shadow",
+  "--slotted-control-transition-duration",
+  "--slotted-control-transition-easing",
+  "--slotted-disabled-background",
+  "--slotted-disabled-border",
+  "--slotted-disabled-foreground",
+  "--slotted-duration-medium",
+  "--slotted-duration-short",
+  "--slotted-easing-enter",
+  "--slotted-easing-standard",
+  "--slotted-filter-bar-chip-seam",
+  "--slotted-filter-bar-color",
+  "--slotted-filter-bar-color-muted",
+  "--slotted-filter-bar-editor-size",
+  "--slotted-filter-bar-font-family",
+  "--slotted-filter-bar-gap",
+  "--slotted-filter-bar-group-border",
+  "--slotted-filter-bar-group-surface",
+  "--slotted-filter-bar-join-size",
+  "--slotted-filter-bar-pill-border",
+  "--slotted-filter-bar-pill-radius",
+  "--slotted-filter-bar-search-max",
+  "--slotted-filter-bar-surface",
+  "--slotted-filter-bar-value-max",
+  "--slotted-filter-bar-value-max-narrow",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-offset",
+  "--slotted-focus-ring-width",
+  "--slotted-font-family-sans",
+  "--slotted-font-size-xs",
+  "--slotted-font-weight-medium",
+  "--slotted-font-weight-regular",
+  "--slotted-line-height-md",
+  "--slotted-line-height-xs",
+  "--slotted-radius-full",
+  "--slotted-radius-md",
+  "--slotted-radius-sm",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-space-4",
+  "--slotted-space-5",
+  "--slotted-surface",
+  "--slotted-surface-sunken",
+  "--slotted-target-comfortable",
+  "--slotted-target-min",
+  "--slotted-text",
+  "--slotted-text-muted",
+  "--slotted-tone-danger-border",
+  "--slotted-tone-danger-text",
+  "--slotted-tone-secondary-subtle-active",
+  "--slotted-tone-secondary-subtle-hover",
+  "--slotted-z-index-sticky"
+]

package/src/form/form.css

@@ -0,0 +1,218 @@
+@layer slotted.components {
+  /**
+   * ── A form, its summary of errors and its row of actions ───────────────
+   *
+   * The family paints two things and arranges nothing else. Vertical rhythm
+   * between fields belongs to `stack` and to `field-group`, which already own
+   * arrangement; a form that laid its own children out would be a second
+   * answer to a question two families have answered.
+   *
+   * What it does own is the summary — the region a reader is sent to after a
+   * failed submit — and the action row, whose reflow below a container width
+   * needs a container query a consumer should not write for every form.
+   *
+   * Both stand anywhere inside the form, and so do other families' parts of
+   * the same names — a `table`'s summary row, a `section`'s actions. The two
+   * carry the family's identifier, and every rule names them by it: a rule
+   * that reached `[data-part='summary']` as any descendant painted a table's
+   * totals as an error panel.
+   */
+  [data-ui='form'][data-part='root'] {
+    --_font-size: var(--slotted-control-font-size-md, 13px);
+
+    /**
+     * The form is the container, not the action row. A container cannot answer
+     * its own query — `@container` asks the nearest ancestor container — so a
+     * `container-type` on the row itself left the reflow rule matching nothing,
+     * and the 240-pixel capture showed two buttons still side by side.
+     */
+    container-name: slotted-form;
+    container-type: inline-size;
+
+    color: var(--slotted-form-color, var(--slotted-text, CanvasText));
+    display: block;
+    font-family: var(--slotted-control-font-family, system-ui, sans-serif);
+    /**
+     * A form takes the width it is offered. Its intrinsic width is its
+     * min-content width, which for a column of fields is the longest word in
+     * it: in a shrink-to-fit stage the React reference page printed every
+     * label one character per line and every button as a vertical strip.
+     */
+    inline-size: 100%;
+    /* And in a grid track narrower than that, it shrinks. */
+    min-inline-size: 0;
+  }
+
+  /**
+   * A form waiting on its own submission says so with the cursor as well as
+   * with `aria-busy`, because the pointer is where a reader who just pressed
+   * the button already is.
+   */
+  [data-ui='form'][data-part='root'][data-loading] {
+    cursor: progress;
+  }
+
+  /* ── The summary ──────────────────────────────────────────────────────
+   *
+   * The four things the GOV.UK error summary states a summary must do: focus
+   * moves to it, it carries a heading, it links to each answer in error, and
+   * its messages are the same strings the fields show.
+   *
+   * It is a danger-toned panel rather than a bare list, because a reader
+   * arriving at the top of a page after a failed submit has to find it before
+   * they read it. The tone tokens are the theme's, so the panel answers the
+   * scheme switch instead of being a red box that turns black.
+   */
+  [data-ui='form'][data-part='summary'] {
+    background-color: var(--slotted-form-summary-background, var(--slotted-tone-danger-surface));
+    border: var(--slotted-control-border-width, 1px) solid
+      var(--slotted-form-summary-border-color, var(--slotted-tone-danger-border));
+    /**
+     * The edge that carries the tone. A panel bordered evenly reads as a card;
+     * the thicker start edge is what a reader's eye finds first in the reading
+     * direction, and it survives the high-contrast scheme, where every border
+     * is the same black.
+     */
+    border-inline-start-width: var(--slotted-border-width-thick, 2px);
+    border-radius: var(--slotted-form-summary-radius, var(--slotted-radius-md, 6px));
+    color: var(--slotted-form-summary-color, var(--slotted-tone-danger-text));
+    display: block;
+    font-size: var(--_font-size);
+    margin-block-end: var(--slotted-space-6, 1rem);
+    padding-block: var(--slotted-space-5, 0.75rem);
+    padding-inline: var(--slotted-space-6, 1rem);
+  }
+
+  /**
+   * The region is focusable so the summary can be reached rather than merely
+   * announced, and the ring is the family's own: a `tabindex="-1"` target that
+   * showed nothing on focus would move a reader somewhere they cannot see.
+   */
+  [data-ui='form'][data-part='summary']:focus-visible {
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  [data-ui='form'][data-part='summary'] > [data-part='summary-title'] {
+    font-family: var(
+      --slotted-font-family-heading,
+      var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif)
+    );
+    font-size: var(--_font-size);
+    font-weight: var(--slotted-font-weight-semibold, 600);
+    line-height: var(--slotted-line-height-md, 1.5);
+    margin: 0;
+  }
+
+  [data-ui='form'][data-part='summary'] > [data-part='summary-list'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--slotted-space-2, 0.25rem);
+    line-height: var(--slotted-line-height-sm, 1.45);
+    /**
+     * The markers are withdrawn and the list stays a list. A reader using a
+     * screen reader is told how many errors there are by the element; a reader
+     * looking at the page is told by the links.
+     */
+    list-style: none;
+    /**
+     * A hundred errors is a real answer from a real server. The list scrolls
+     * rather than truncating, because `docs/rebuild-briefing.md` refuses to
+     * take content out of the DOM. The ceiling is twelve lines of its own
+     * type rather than a fraction of the viewport: a summary that grew with
+     * the screen would push the actions off a laptop and not off a phone.
+     */
+    margin-block: var(--slotted-space-3, 0.375rem) 0;
+    max-block-size: calc(12em * var(--slotted-line-height-sm, 1.45));
+    overflow-y: auto;
+    /* Room for the ring on a link at the edge of a scrolled box. */
+    padding-block: var(--slotted-space-1, 0.125rem);
+    padding-inline-start: 0;
+  }
+
+  [data-ui='form'][data-part='summary']
+    > [data-part='summary-list']
+    > li
+    > [data-part='summary-item'] {
+    color: inherit;
+    text-decoration-line: underline;
+    text-underline-offset: var(--slotted-space-1, 0.125rem);
+  }
+
+  [data-ui='form'][data-part='summary']
+    > [data-part='summary-list']
+    > li
+    > [data-part='summary-item']:hover:not(:disabled) {
+    text-decoration-thickness: var(--slotted-border-width-thick, 2px);
+  }
+
+  [data-ui='form'][data-part='summary']
+    > [data-part='summary-list']
+    > li
+    > [data-part='summary-item']:focus-visible {
+    border-radius: var(--slotted-radius-xs, 2px);
+    outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
+    outline-offset: var(--slotted-focus-ring-offset, 2px);
+  }
+
+  /* ── The action row ───────────────────────────────────────────────────
+   *
+   * Its own container, because the question it answers is how much room the
+   * row has and not how wide the page is. The breakpoint is a literal: CSS
+   * forbids a custom property in a container condition, which
+   * `docs/token-foundation.md` rule 4 records.
+   */
+  [data-ui='form'][data-part='actions'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--slotted-space-4, 0.5rem);
+    justify-content: flex-end;
+    margin-block-start: var(--slotted-space-8, 1.5rem);
+  }
+
+  [data-ui='form'][data-part='actions'][data-align='start'] {
+    justify-content: flex-start;
+  }
+
+  [data-ui='form'][data-part='actions'][data-align='between'] {
+    justify-content: space-between;
+  }
+
+  [data-ui='form'][data-part='actions'][data-align='stretch'] > * {
+    flex: 1 1 0;
+  }
+
+  /**
+   * Below the breakpoint two buttons side by side stop being two buttons and
+   * become two half-buttons. The row becomes a column and every action takes
+   * the whole width — the arrangement a phone needs, decided by the row's own
+   * width rather than by the viewport's, so a form in a narrow panel on a wide
+   * screen gets it too.
+   *
+   * The order reverses with it. In a row the primary action sits at the
+   * reading end; in a column the reader's thumb is at the bottom, and the
+   * action they came to take belongs first.
+   */
+  @container slotted-form (max-width: 360px) {
+    [data-ui='form'][data-part='actions'] {
+      flex-direction: column-reverse;
+    }
+
+    [data-ui='form'][data-part='actions'] > * {
+      inline-size: 100%;
+    }
+  }
+
+  /**
+   * The one block the theme cannot write for the family. The summary's start
+   * edge is what tells a forced-colours reader that the panel is the errors
+   * and not a note, and a tone surface flattened to `Canvas` would leave the
+   * panel with nothing but its border.
+   */
+  @media (forced-colors: active) {
+    [data-ui='form'][data-part='summary'] {
+      border-color: CanvasText;
+      border-inline-start-color: Highlight;
+    }
+  }
+}

package/src/form/form.tokens.json

@@ -0,0 +1,32 @@
+[
+  "--slotted-border-width-thick",
+  "--slotted-control-border-width",
+  "--slotted-control-font-family",
+  "--slotted-control-font-size-md",
+  "--slotted-focus-ring-color",
+  "--slotted-focus-ring-offset",
+  "--slotted-focus-ring-width",
+  "--slotted-font-family-heading",
+  "--slotted-font-family-sans",
+  "--slotted-font-weight-semibold",
+  "--slotted-form-color",
+  "--slotted-form-summary-background",
+  "--slotted-form-summary-border-color",
+  "--slotted-form-summary-color",
+  "--slotted-form-summary-radius",
+  "--slotted-line-height-md",
+  "--slotted-line-height-sm",
+  "--slotted-radius-md",
+  "--slotted-radius-xs",
+  "--slotted-space-1",
+  "--slotted-space-2",
+  "--slotted-space-3",
+  "--slotted-space-4",
+  "--slotted-space-5",
+  "--slotted-space-6",
+  "--slotted-space-8",
+  "--slotted-text",
+  "--slotted-tone-danger-border",
+  "--slotted-tone-danger-surface",
+  "--slotted-tone-danger-text"
+]