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

package/components/Table/table.module.css

@@ -1,751 +0,0 @@
-/*
- * Table (§8.2). CVA function `table`. This module is the single definition
- * of table rules: the Color roles table's parts are its classes — `frame`
- * (top and bottom rules), `headerRule`, `row`, `cadence`, `totalRule`,
- * `grid` and `rowBar` [D127]. Borders sit on the cells (separate border
- * model), so a pinned column keeps its rules while the rest scrolls. Dots
- * are true circles: an SVG mask cuts a 1 px solid border into round dots
- * (never a dotted border style or a gradient [D36, D68]); being a border,
- * the run prints as foreground and takes the system ink in forced colors.
- * Colors are role variables only; local custom properties carry dimensions.
- *
- * Local properties:
- *   --table-pad-block, --table-pad-inline  cell padding by density
- *   --table-row-min                         minimum row pitch (compact 32, interactive 44)
- *   --table-row-rule                        width of the --role-rule row rule (compact)
- * Each starts from its --ds-table-* density token (tokens.css), so a
- * Ground's data-density reaches the table; the `density` prop overrides it.
- */
-
-/* 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. */
-.cue {
-  composes: typeCaption typeMuted from '../../utils/type.module.css';
-}
-
-.captionLabel {
-  composes: typeData from '../../utils/type.module.css';
-}
-
-.captionTitle {
-  composes: typeSubhead from '../../utils/type.module.css';
-}
-
-.captionNote {
-  composes: typeCaption from '../../utils/type.module.css';
-}
-
-.headCell {
-  composes: typeLabel from '../../utils/type.module.css';
-}
-
-.rowHeader {
-  composes: typeBodyUi from '../../utils/type.module.css';
-}
-
-.cell {
-  composes: typeBodyUi from '../../utils/type.module.css';
-}
-
-.cellLabel {
-  composes: typeLabel from '../../utils/type.module.css';
-}
-
-.notes {
-  composes: typeSmall from '../../utils/type.module.css';
-}
-
-@layer base {
-  .base {
-    --table-pad-block: var(--ds-table-pad-block);
-    --table-pad-inline: var(--ds-table-pad-inline);
-    --table-row-min: var(--ds-table-row-min);
-    --table-row-rule: var(--ds-table-row-rule);
-
-    container-type: inline-size;
-    /* Size containment leaves no intrinsic width: fill the box, never collapse as a flex or shrink-to-fit item. */
-    inline-size: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: var(--ds-space-12);
-    min-inline-size: 0;
-    color: var(--primary12);
-  }
-
-  .toggle {
-    display: flex;
-  }
-
-  .cue {
-    margin: 0;
-  }
-
-  /* Frame: --border-size-2 --primary12 top and bottom; no verticals, no box. */
-  .frame {
-    inline-size: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    border-block: var(--border-size-2) solid var(--primary12);
-    color: var(--primary12);
-    font-variant-numeric: var(--ds-numerals-data);
-  }
-
-  /* Caption block above the table; it stays in view while a wide table scrolls. */
-  .caption {
-    caption-side: top;
-    padding-block-end: var(--ds-space-12);
-    text-align: start;
-  }
-
-  .captionInner {
-    position: sticky;
-    inset-inline-start: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--size-px-1);
-    inline-size: fit-content;
-    max-inline-size: 100cqi;
-  }
-
-  .captionLabel,
-  .captionTitle,
-  .captionNote {
-    display: block;
-    color: var(--primary12);
-  }
-
-  .headCell,
-  .rowHeader,
-  .cell {
-    position: relative;
-    box-sizing: border-box;
-    block-size: var(--table-row-min);
-    padding: var(--table-pad-block) var(--table-pad-inline);
-    border: 0 solid var(--role-hairline);
-    color: var(--primary12);
-    text-align: start;
-    overflow-wrap: break-word;
-  }
-
-  /* Column headers: caps labels, bottom-aligned, aligned like their data. */
-  .headCell {
-    vertical-align: bottom;
-  }
-
-  .rowHeader,
-  .cell {
-    vertical-align: baseline;
-  }
-
-  .rowHeader {
-    --type-weight: var(--font-weight-6);
-
-    font-weight: var(--type-weight);
-  }
-
-  /* Numbers: right-aligned lining tabular figures that never wrap. */
-  .numeric {
-    text-align: end;
-    white-space: nowrap;
-  }
-
-  /* The column label repeats only in stacked records. */
-  .cellLabel {
-    display: none;
-  }
-
-  /* Header rule: --border-size-1 --primary12 under the head's last row. */
-  .headerRule > .row:last-child > * {
-    border-block-end: var(--border-size-1) solid var(--primary12);
-  }
-
-  /*
-   * Row rules: --border-size-1 --role-hairline under every body row; the
-   * frame closes the last [D83]. Compact padding needs --role-rule rows:
-   * --table-row-rule moves the rule's pixel to a --role-rule line above the
-   * next row, so the pitch holds.
-   */
-  .body > .row > * {
-    border-block-end-width: calc(var(--border-size-1) - var(--table-row-rule));
-  }
-
-  .body > .row + .row > * {
-    border-block-start: var(--table-row-rule) solid var(--role-rule);
-  }
-
-  .body > .row:last-child > * {
-    border-block-end-width: 0;
-  }
-
-  /*
-   * The five-row cadence (tables over 10 rows) [D174]: a line-dotted-fine
-   * rule in --role-rule between rows, the solid --role-rule rule after
-   * every fifth. Dotted rows keep the rule's pixel as padding, so every
-   * row has the same pitch. `mask-repeat: round` ends each cell on a whole
-   * dot, so the rhythm runs on across cell seams.
-   */
-  .cadence > .row > * {
-    border-block-end-width: 0;
-    padding-block-end: calc(var(--table-pad-block) + var(--border-size-1));
-  }
-
-  .cadence > .row > *::after {
-    content: '';
-    position: absolute;
-    inset-inline: 0;
-    inset-block-end: 0;
-    block-size: 0;
-    border-block-end: var(--ds-dot-fine) solid var(--role-rule);
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1'%3E%3Ccircle cx='1.5' cy='0.5' r='0.5'/%3E%3C/svg%3E");
-    mask-size: var(--ds-dot-fine-pitch) var(--ds-dot-fine);
-    mask-repeat: round no-repeat;
-    mask-origin: border-box;
-    pointer-events: none;
-  }
-
-  .cadence > .row:nth-child(5n) > * {
-    border-block-end-width: var(--border-size-1);
-    border-block-end-color: var(--role-rule);
-    padding-block-end: var(--table-pad-block);
-  }
-
-  .cadence > .row:nth-child(5n) > *::after,
-  .cadence > .row:last-child > *::after {
-    content: none;
-  }
-
-  .cadence > .row:last-child > * {
-    border-block-end-width: 0;
-    padding-block-end: var(--table-pad-block);
-  }
-
-  /* The cadence draws every row rule in --role-rule already. */
-  .cadence > .row + .row > * {
-    border-block-start-width: 0;
-  }
-
-  /*
-   * Total rule: line-double-hair in --primary12, two --border-size-1 lines
-   * --ds-double-hair-gap apart, drawn on the foot's first row (a cell
-   * border plus a second line) because cells cannot host the composed
-   * line class.
-   */
-  .totalRule > .row:first-child > * {
-    border-block-start: var(--border-size-1) solid var(--primary12);
-    padding-block-start: calc(
-      var(--table-pad-block) + var(--ds-double-hair-gap) + var(--border-size-1)
-    );
-  }
-
-  .totalRule > .row:first-child > *::before {
-    content: '';
-    position: absolute;
-    inset-inline: 0;
-    inset-block-start: var(--ds-double-hair-gap);
-    border-block-start: var(--border-size-1) solid var(--primary12);
-    pointer-events: none;
-  }
-
-  /* Selected or current row bar: --ds-stroke-3 --primary12 at the row's start edge [D15]. */
-  .rowBar {
-    display: none;
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: 0;
-    inline-size: var(--ds-stroke-3);
-    background-color: var(--primary12);
-  }
-
-  /* Sort header: a button that keeps the column header's caps [D165]; glyph after the label. */
-  .sortButton {
-    position: relative;
-    display: inline-flex;
-    align-items: baseline;
-    gap: var(--size-px-1);
-    margin: calc(-1 * var(--size-px-1));
-    padding: var(--size-px-1);
-    border: 0;
-    border-radius: var(--radius-1);
-    background: none;
-    color: inherit;
-    font: inherit;
-    letter-spacing: inherit;
-    text-align: inherit;
-    text-transform: inherit;
-    cursor: pointer;
-    appearance: none;
-  }
-
-  /* Every target reaches --ds-size-hit (§9.1) [D43]. */
-  .sortButton::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    inline-size: var(--ds-size-hit);
-    block-size: var(--ds-size-hit);
-    min-inline-size: 100%;
-    min-block-size: 100%;
-    translate: -50% -50%;
-  }
-
-  /* The bare-text hover underline's color, weight and offset (§10.1) [D181]. */
-  .sortLabel {
-    text-decoration-color: var(--role-accent);
-    text-decoration-thickness: var(--border-size-2);
-    text-underline-offset: var(--size-px-1);
-  }
-
-  /* Hover and press transitions [D181]: --ds-duration-quick, --ease-out-3. */
-  @media (prefers-reduced-motion: no-preference) {
-    .sortButton {
-      transition-property: color, background-color;
-      transition-duration: var(--ds-duration-quick);
-      transition-timing-function: var(--ease-out-3);
-    }
-  }
-
-  .sortGlyph {
-    flex: none;
-    inline-size: var(--size-px-2);
-    block-size: var(--size-px-2);
-    fill: currentColor;
-  }
-
-  .sortState {
-    position: absolute;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-
-  .notes {
-    display: grid;
-    gap: var(--size-px-1);
-    color: var(--primary12);
-  }
-
-  .notes > * {
-    margin: 0;
-  }
-
-  @media (forced-colors: active) {
-    .rowBar {
-      forced-color-adjust: none;
-      background-color: CanvasText;
-    }
-  }
-}
-
-@layer variants {
-  /* Density [D83]: compact padding --size-px-2 × --ds-space-12, rows ≥ 32 px, --role-rule row rules. */
-  .compact {
-    --table-pad-block: var(--size-px-2);
-    --table-pad-inline: var(--ds-space-12);
-    --table-row-min: var(--size-px-7);
-    --table-row-rule: var(--border-size-1);
-  }
-
-  .densityDefault {
-    --table-pad-block: var(--ds-space-12);
-    --table-pad-inline: var(--size-px-3);
-    --table-row-min: 0px;
-    --table-row-rule: 0px;
-  }
-
-  /* Interactive rows are click targets: ≥ --ds-size-hit tall with --role-rule rules [D83]. */
-  .interactive {
-    --table-row-min: var(--ds-size-hit);
-  }
-
-  .interactive .body > .row > * {
-    border-block-end-color: var(--role-rule);
-  }
-
-  /* Saturated grounds (≤ 5 rows): line-dotted-fine row rules in --role-rule (= --primary12 there). */
-  .onSolid .body > .row > * {
-    border-block-start-width: 0;
-    border-block-end-width: 0;
-    padding-block-end: calc(var(--table-pad-block) + var(--border-size-1));
-  }
-
-  .onSolid .body > .row > *::after {
-    content: '';
-    position: absolute;
-    inset-inline: 0;
-    inset-block-end: 0;
-    block-size: 0;
-    border-block-end: var(--ds-dot-fine) solid var(--role-rule);
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1'%3E%3Ccircle cx='1.5' cy='0.5' r='0.5'/%3E%3C/svg%3E");
-    mask-size: var(--ds-dot-fine-pitch) var(--ds-dot-fine);
-    mask-repeat: round no-repeat;
-    mask-origin: border-box;
-    pointer-events: none;
-  }
-
-  .onSolid .body > .row:last-child > *::after {
-    content: none;
-  }
-
-  /* Matrix grid: --border-size-1 --role-rule, never --role-hairline [D83]; centered headers, marks centered. */
-  .grid .headCell,
-  .grid .rowHeader,
-  .grid .cell {
-    border-inline-start-width: var(--border-size-1);
-    border-inline-start-color: var(--role-rule);
-  }
-
-  .grid .lead {
-    border-inline-start-width: 0;
-  }
-
-  .grid .body > .row > * {
-    border-block-end-color: var(--role-rule);
-  }
-
-  .grid .headCell,
-  .grid .cell {
-    text-align: center;
-  }
-
-  /* The row-header column's header aligns like its data: start, as the row headers. */
-  .grid .headCell.lead {
-    text-align: start;
-  }
-
-  /* Fit (≤ 4 short columns) stays a table at every width; scroll matrices keep one-line headers. */
-  .fit .headCell,
-  .scroll .headCell {
-    white-space: nowrap;
-  }
-
-  /* Scroll: the first column stays pinned; its end edge replaces the Scroll Area's start edge. */
-  .pinned {
-    --scroll-area-edge-start: none;
-  }
-
-  .pinned .lead {
-    position: sticky;
-    inset-inline-start: 0;
-    z-index: var(--layer-1);
-    border-inline-end: 0 solid var(--role-rule);
-    padding-inline-end: calc(var(--table-pad-inline) + var(--border-size-2));
-    background-color: var(--role-ground);
-  }
-
-  /* Prioritize: optional columns wait behind the toggle; they always print. */
-  .prioritize .optional {
-    display: none;
-  }
-
-  /*
-   * Stacked records (strategy `stack`), screen only: below 768 px of the
-   * table's width each row is a block — the row header as `type-itemhead`,
-   * then a leader list of header → value — separated by a --border-size-1
-   * --role-rule rule (§8.2, §8.3). Baseline: the viewport fallback below
-   * --md-n-above; the same rules follow under the container query. The row
-   * header restates type-itemhead's tokens: composition cannot depend on
-   * the container width.
-   */
-  @media screen and (max-width: 767.98px) {
-    .stack .frame,
-    .stack .caption,
-    .stack .body,
-    .stack .totalRule {
-      display: block;
-    }
-
-    .stack .frame {
-      border-block-start-width: 0;
-    }
-
-    .stack .body {
-      border-block-start: var(--border-size-2) solid var(--primary12);
-    }
-
-    .stack .headerRule {
-      position: absolute;
-      overflow: hidden;
-      clip-path: inset(50%);
-      white-space: nowrap;
-    }
-
-    .stack .row {
-      display: block;
-      padding-block: var(--table-pad-block);
-      border-block-end: var(--border-size-1) solid var(--role-rule);
-    }
-
-    .stack .body > .row:last-child {
-      border-block-end-width: 0;
-    }
-
-    .stack .totalRule > .row:first-child {
-      border-block-start: var(--border-size-1) solid var(--primary12);
-    }
-
-    .stack .rowHeader,
-    .stack .cell {
-      block-size: auto;
-      padding: 0;
-      border-width: 0;
-      text-align: start;
-    }
-
-    .stack .rowHeader {
-      display: block;
-      padding-block-end: var(--size-px-2);
-      font-family: var(--ds-font-display);
-      font-variation-settings: var(--ds-font-display-settings);
-      font-size: var(--ds-font-size-itemhead);
-      font-weight: var(--font-weight-7);
-      line-height: var(--font-lineheight-0);
-    }
-
-    .stack .cell {
-      display: flex;
-      align-items: last baseline;
-      column-gap: var(--size-px-2);
-    }
-
-    .stack .cell + .cell {
-      margin-block-start: var(--size-px-1);
-    }
-
-    .stack .rowHeader::after,
-    .stack .cell::after,
-    .stack .totalRule > .row:first-child > .rowHeader::before {
-      content: none;
-    }
-
-    .stack .cellLabel {
-      display: block;
-      flex: 0 1 auto;
-    }
-
-    /* The leader stops --size-px-2 short of each text (the LTA trail break). It
-       resets the total rule's line, so the total row's cells keep their leaders. */
-    .stack .cell::before {
-      content: '';
-      position: static;
-      border-block-start-width: 0;
-      order: 1;
-      flex: 1 0 var(--size-px-5);
-      align-self: last baseline;
-      block-size: 0;
-      border-block-end: var(--ds-dot-fine) solid var(--role-rule);
-      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1'%3E%3Ccircle cx='1.5' cy='0.5' r='0.5'/%3E%3C/svg%3E");
-      mask-size: var(--ds-dot-fine-pitch) var(--ds-dot-fine);
-      mask-repeat: round no-repeat;
-      mask-origin: border-box;
-    }
-
-    .stack .cellValue {
-      order: 2;
-      flex: 0 1 auto;
-      margin-inline-start: auto;
-      text-align: end;
-    }
-  }
-
-  @media screen {
-    @container (width < 768px) {
-      .stack .frame,
-      .stack .caption,
-      .stack .body,
-      .stack .totalRule {
-        display: block;
-      }
-
-      .stack .frame {
-        border-block-start-width: 0;
-      }
-
-      .stack .body {
-        border-block-start: var(--border-size-2) solid var(--primary12);
-      }
-
-      .stack .headerRule {
-        position: absolute;
-        overflow: hidden;
-        clip-path: inset(50%);
-        white-space: nowrap;
-      }
-
-      .stack .row {
-        display: block;
-        padding-block: var(--table-pad-block);
-        border-block-end: var(--border-size-1) solid var(--role-rule);
-      }
-
-      .stack .body > .row:last-child {
-        border-block-end-width: 0;
-      }
-
-      .stack .totalRule > .row:first-child {
-        border-block-start: var(--border-size-1) solid var(--primary12);
-      }
-
-      .stack .rowHeader,
-      .stack .cell {
-        block-size: auto;
-        padding: 0;
-        border-width: 0;
-        text-align: start;
-      }
-
-      .stack .rowHeader {
-        display: block;
-        padding-block-end: var(--size-px-2);
-        font-family: var(--ds-font-display);
-        font-variation-settings: var(--ds-font-display-settings);
-        font-size: var(--ds-font-size-itemhead);
-        font-weight: var(--font-weight-7);
-        line-height: var(--font-lineheight-0);
-      }
-
-      .stack .cell {
-        display: flex;
-        align-items: last baseline;
-        column-gap: var(--size-px-2);
-      }
-
-      .stack .cell + .cell {
-        margin-block-start: var(--size-px-1);
-      }
-
-      .stack .rowHeader::after,
-      .stack .cell::after,
-      .stack .totalRule > .row:first-child > .rowHeader::before {
-        content: none;
-      }
-
-      .stack .cellLabel {
-        display: block;
-        flex: 0 1 auto;
-      }
-
-      .stack .cell::before {
-        content: '';
-        position: static;
-        border-block-start-width: 0;
-        order: 1;
-        flex: 1 0 var(--size-px-5);
-        align-self: last baseline;
-        block-size: 0;
-        border-block-end: var(--ds-dot-fine) solid var(--role-rule);
-        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1'%3E%3Ccircle cx='1.5' cy='0.5' r='0.5'/%3E%3C/svg%3E");
-        mask-size: var(--ds-dot-fine-pitch) var(--ds-dot-fine);
-        mask-repeat: round no-repeat;
-        mask-origin: border-box;
-      }
-
-      .stack .cellValue {
-        order: 2;
-        flex: 0 1 auto;
-        margin-inline-start: auto;
-        text-align: end;
-      }
-    }
-  }
-}
-
-@layer states {
-  /* Prioritize, expanded: the optional columns return. */
-  .expanded .optional {
-    display: table-cell;
-  }
-
-  /* The scroll cue shows only while the table overflows. */
-  .base:not(:has(.region[data-has-overflow-x])) .cue {
-    display: none;
-  }
-
-  /* Pinned column: its --border-size-2 --role-rule edge appears once columns scroll under it. */
-  .pinned[data-overflow-x-start] .lead {
-    border-inline-end-width: var(--border-size-2);
-    padding-inline-end: var(--table-pad-inline);
-  }
-
-  /* Selected (a checked row Checkbox or `selected`) and current (`:target`): the row bar. */
-  .selected .rowBar,
-  .row:has([data-checked]) .rowBar,
-  .row:target .rowBar {
-    display: block;
-  }
-
-  .row:target .rowHeader {
-    --type-weight: var(--font-weight-7);
-
-    font-weight: var(--type-weight);
-  }
-
-  /* Inactive: --role-muted plus a word, never tone alone. */
-  .inactive > * {
-    color: var(--role-muted);
-  }
-
-  /*
-   * Sort header hover (not disabled): a column header is bare wayfinding
-   * text, so its label takes the bare-text underline, --role-accent at
-   * --border-size-2, offset --size-px-1; no fill (§8.2, §10.1) [D181].
-   */
-  .sortButton:not([data-disabled]):hover .sortLabel {
-    text-decoration-line: underline;
-  }
-
-  /* Pressed: the inverse pair [D96]. */
-  .sortButton:not([data-disabled]):active {
-    background-color: var(--primary12);
-    color: var(--role-inverse);
-  }
-
-  /* Focus: the 2 px --primary12 ring at a 2 px offset, keyboard only [D45]. */
-  .sortButton:focus-visible {
-    outline: var(--border-size-2) solid var(--primary12);
-    outline-offset: var(--border-size-2);
-  }
-}
-
-@layer print {
-  @media print {
-    /*
-     * The full table at every printed width: the header repeats on every
-     * page, the total prints once, rows never split. Every rule prints at
-     * 0.75 pt black through the remap; no zebra tint exists to drop.
-     */
-    .headerRule {
-      display: table-header-group;
-    }
-
-    .totalRule {
-      display: table-row-group;
-    }
-
-    .row {
-      break-inside: avoid;
-    }
-
-    .caption {
-      break-after: avoid;
-    }
-
-    .prioritize .optional {
-      display: table-cell;
-    }
-
-    /* Interactive-only chrome: sort glyphs, row checkboxes and row bars are hidden. */
-    .toggle,
-    .cue,
-    .sortGlyph,
-    .rowBar,
-    .frame [role='checkbox'] {
-      display: none;
-    }
-
-    .pinned .lead {
-      position: static;
-    }
-  }
-}