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

package/feedback/meter/meter.module.css

@@ -0,0 +1,389 @@
+/*
+ * Meter (§10.18; constructions §8.9). CVA functions `meter` and
+ * `meterStatus`. Ink only: track edges, indicators, filled cells, ticks,
+ * the arrow and labels are --primary12; the track interior shows the
+ * ground; ring tracks are --role-hairline. No part uses the secondary, so a
+ * meter never reads as a chart series. Status glyphs take --role-status of
+ * their own status scale. Colors are role variables only.
+ *
+ * Print [D126]: the indicator and filled cells compose `patternHatch`. On
+ * screen its --primary12 marks sit on the part's own --primary12 fill and
+ * disappear into it; in print the fill drops and the 45° hatch (its layer
+ * carries `print-color-adjust: exact`) prints black inside the outline,
+ * closed by an edge at the value.
+ *
+ * Local properties (counts and positions, never colors):
+ *   --meter-stops, --meter-stop-index   ordinal geometry, set inline
+ *   --meter-threshold                   the threshold position, set inline
+ */
+
+/* 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. */
+.label {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.value {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.stopLabel {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.statusText {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.indicator {
+  composes: patternHatch from '../../utils/pattern.module.css';
+}
+
+.cellFilled {
+  composes: patternHatch from '../../utils/pattern.module.css';
+}
+
+@layer base {
+  /* Label and value above a full-width track (§8.9 responsive baseline). */
+  .base {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      'label readout'
+      'track track';
+    align-items: baseline;
+    gap: var(--size-px-1) var(--size-px-3);
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .label {
+    grid-area: label;
+    color: var(--primary12);
+  }
+
+  .readout {
+    grid-area: readout;
+    justify-self: end;
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--size-px-1) var(--size-px-2);
+  }
+
+  .value {
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  /* Linear: a --border-size-1 outlined --primary12 track, 8 px tall, square in data modules. */
+  .track {
+    grid-area: track;
+    align-self: center;
+    position: relative;
+    box-sizing: content-box;
+    block-size: calc(var(--size-px-2) - 2 * var(--border-size-1));
+    border: var(--border-size-1) solid var(--primary12);
+    border-radius: var(--ds-radius-none);
+  }
+
+  /* Solid --primary12; its height is Base UI's inline `inherit`. Only the value edge prints as a line. */
+  .indicator {
+    display: block;
+    box-sizing: border-box;
+    border-width: 0;
+    border-inline-end-width: var(--border-size-1);
+    background-color: var(--primary12);
+  }
+
+  /* Threshold: a --ds-space-12 tick at --border-size-2 across the track (a border, so it prints). */
+  .threshold {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: var(--meter-threshold);
+    inline-size: 0;
+    block-size: var(--ds-space-12);
+    margin-block-start: calc(var(--ds-space-12) / -2);
+    margin-inline-start: calc(var(--border-size-2) / -2);
+    border-inline-start: var(--border-size-2) solid var(--primary12);
+  }
+
+  /* Segmented: outlined --ds-space-12 cells, --border-size-1, 2 px apart; filled cells solid. */
+  .cell {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--ds-space-12);
+    block-size: var(--ds-space-12);
+    border: var(--border-size-1) solid var(--primary12);
+  }
+
+  .cellFilled {
+    background-color: var(--primary12);
+  }
+
+  /* Ordinal: a --border-size-1 track with stop ticks, caps labels under the stops. */
+  .stop {
+    position: absolute;
+    inset-block-start: var(--ds-space-12);
+    inset-inline-start: calc((var(--meter-stop-index) + 0.5) / var(--meter-stops) * 100%);
+    block-size: var(--size-px-2);
+    margin-inline-start: calc(var(--border-size-1) / -2);
+    border-inline-start: var(--border-size-1) solid var(--primary12);
+  }
+
+  .stopActive {
+    margin-inline-start: calc(var(--border-size-2) / -2);
+    border-inline-start-width: var(--border-size-2);
+  }
+
+  /* The active stop's arrow-triangle: outlined, never filled (§1.5.8). */
+  .arrow {
+    display: none;
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc((var(--meter-stop-index) + 0.5) / var(--meter-stops) * 100%);
+    inline-size: var(--ds-space-12);
+    block-size: var(--size-px-2);
+    margin-inline-start: calc(var(--ds-space-12) / -2);
+    overflow: visible;
+    fill: none;
+    stroke: var(--primary12);
+    stroke-width: var(--ds-stroke-1-25);
+    stroke-linejoin: round;
+  }
+
+  .stops {
+    grid-area: stops;
+    display: grid;
+    grid-template-columns: repeat(var(--meter-stops), minmax(0, 1fr));
+    column-gap: var(--size-px-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .stopLabel {
+    color: var(--primary12);
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+
+  /* The active label is bold and one step larger, so it never depends on the arrow alone. */
+  .stopLabelActive {
+    --type-weight: var(--font-weight-7);
+
+    font-weight: var(--type-weight);
+    font-size: var(--ds-font-size-caption);
+  }
+
+  /* Ring: a --border-size-2 --primary12 arc over a --role-hairline track, always with its value. */
+  .ring {
+    grid-area: track;
+    display: block;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-4);
+    overflow: visible;
+  }
+
+  .ringTrack,
+  .ringArc {
+    fill: none;
+    stroke-width: var(--border-size-2);
+  }
+
+  .ringTrack {
+    stroke: var(--role-hairline);
+  }
+
+  .ringArc {
+    stroke: var(--primary12);
+  }
+
+  /* Status: the §1.5.4 glyph in --role-status (its status scale) plus the word in --primary12. */
+  .status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-px-1);
+  }
+
+  .success,
+  .warning,
+  .danger {
+    color: var(--primary12);
+  }
+
+  .statusGlyph {
+    flex: none;
+    display: block;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    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;
+  }
+
+  .statusText {
+    color: var(--primary12);
+  }
+
+  /* The meter-panel container (§10.18): a stack of meters that reflow on its width. */
+  .panel {
+    container: meter-panel / 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: grid;
+    gap: var(--size-px-5);
+    min-inline-size: 0;
+  }
+
+  @media (forced-colors: active) {
+    .indicator,
+    .cellFilled {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .ringArc {
+      forced-color-adjust: none;
+      stroke: CanvasText;
+    }
+
+    .statusGlyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}
+
+@layer variants {
+  .steps .track {
+    justify-self: start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--border-size-2);
+    block-size: auto;
+    border-width: 0;
+  }
+
+  /* Ordinal: arrow, 4 px, ticks crossing the 1 px line; labels below; the value is the active label. */
+  .ordinal {
+    grid-template-areas:
+      'label readout'
+      'track track'
+      'stops stops';
+  }
+
+  .ordinal .track {
+    block-size: var(--size-px-4);
+    border-width: 0;
+  }
+
+  .ordinal .track::before {
+    content: '';
+    position: absolute;
+    inset-block-start: calc(var(--ds-space-12) + var(--size-px-1));
+    inset-inline: calc(50% / var(--meter-stops));
+    border-block-start: var(--border-size-1) solid var(--primary12);
+  }
+
+  .ordinal .arrow {
+    display: block;
+  }
+
+  /* Ring: inline, the ring beside its value; its tracks pack at the start even when stretched in a panel. */
+  .kindRing {
+    display: inline-grid;
+    grid-template-columns: auto auto auto;
+    grid-template-areas: 'label track readout';
+    justify-content: start;
+    align-items: center;
+    column-gap: var(--size-px-2);
+  }
+
+  /*
+   * Viewport fallback: label | track | value in one row from --md-n-above…
+   * The columns are fixed shares (1 : 2 : 1), not sized by each readout, so
+   * the tracks of stacked rows start and end on one line; the value column
+   * never drops below its unbreakable text.
+   */
+  @media (min-width: 768px) {
+    .bar,
+    .steps {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(min-content, 1fr);
+      grid-template-areas: 'label track readout';
+    }
+
+    /* The ordinal scale takes the track column, its labels under it. */
+    .ordinal {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(min-content, 1fr);
+      grid-template-areas:
+        'label track readout'
+        '. stops .';
+    }
+  }
+
+  /* …refined by the meter-panel container: stacked below 768 px, rows from 768 (§5.10.2). */
+  @container meter-panel (width < 768px) {
+    .bar,
+    .steps {
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas:
+        'label readout'
+        'track track';
+    }
+
+    .ordinal {
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas:
+        'label readout'
+        'track track'
+        'stops stops';
+    }
+  }
+
+  @container meter-panel (width >= 768px) {
+    .bar,
+    .steps {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(min-content, 1fr);
+      grid-template-areas: 'label track readout';
+    }
+
+    .ordinal {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(min-content, 1fr);
+      grid-template-areas:
+        'label track readout'
+        '. stops .';
+    }
+  }
+
+  /*
+   * Below 360 px of the panel, ordinal labels turn vertical (§10.18), all
+   * kept: each reads upward and hangs from its tick, so a long word never
+   * breaks mid-word in a narrow column.
+   */
+  @container meter-panel (width < 360px) {
+    .stopLabel {
+      justify-self: center;
+      writing-mode: sideways-lr;
+      text-align: end;
+      overflow-wrap: normal;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* Linear and segmented values print as the 45° hatch (composed); the numeral and status stay. */
+    .base {
+      break-inside: avoid;
+    }
+  }
+}

package/feedback/progress/Progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/feedback/progress/Progress.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;AAoCjE,eAAO,MAAM,QAAQ;;;;8EAenB,CAAA;AAEF,+EAA+E;AAC/E,eAAO,MAAM,cAAc;;;8EASzB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AAErD,4GAA4G;AAC5G,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;AAE7D,8GAA8G;AAC9G,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG;IACtE;;;;;OAKG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,0FAA0F;IAC1F,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACzC,qEAAqE;IACrE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACxE;;;;OAIG;IACH,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,4FAA4F;IAC5F,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,oDAAoD;IACpD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,oFAAoF;IACpF,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACrC,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBA+G5C"}

package/feedback/progress/Progress.js.map

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

package/feedback/progress/index.d.ts.map

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

package/feedback/progress/index.js.map

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

package/feedback/progress/progress.module.css

@@ -0,0 +1,285 @@
+/*
+ * Progress (§10.18; constructions §8.9). CVA functions `progress` and
+ * `progressStatus`. Ink only: track edge, indicator, cells, label and value
+ * are --primary12 on the ground; no part uses the secondary, so progress
+ * never reads as a chart series. Status glyphs take --role-status of their
+ * own status scale. Colors are role variables only; no opacity, no shimmer.
+ */
+
+/* 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. */
+.label {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.value {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.statusText {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.dashLine {
+  composes: lineDashed from '../../utils/line.module.css';
+}
+
+@keyframes dashAdvance {
+  to {
+    stroke-dashoffset: calc(-1 * (var(--ds-dash) + var(--ds-dash-gap)));
+  }
+}
+
+@layer base {
+  /* Label and value above a full-width track (§8.9 responsive baseline). */
+  .base {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      'label readout'
+      'track track';
+    align-items: baseline;
+    gap: var(--size-px-1) var(--size-px-3);
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .label {
+    grid-area: label;
+    color: var(--primary12);
+  }
+
+  .readout {
+    grid-area: readout;
+    justify-self: end;
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--size-px-1) var(--size-px-2);
+  }
+
+  .value {
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  /* Linear: a --border-size-1 outlined --primary12 track, 8 px tall, square in data modules. */
+  .track {
+    grid-area: track;
+    align-self: center;
+    position: relative;
+    box-sizing: content-box;
+    block-size: calc(var(--size-px-2) - 2 * var(--border-size-1));
+    border: var(--border-size-1) solid var(--primary12);
+    border-radius: var(--ds-radius-none);
+  }
+
+  /* The indicator's height is Base UI's inline `inherit`: the track's content height. */
+  .indicator {
+    display: block;
+    background-color: var(--primary12);
+  }
+
+  .dashes {
+    display: none;
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    stroke: var(--primary12);
+  }
+
+  /* Segmented: outlined --ds-space-12 cells, --border-size-1, 2 px apart; filled cells solid. */
+  .cell {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--ds-space-12);
+    block-size: var(--ds-space-12);
+    border: var(--border-size-1) solid var(--primary12);
+  }
+
+  .cellFilled {
+    background-color: var(--primary12);
+  }
+
+  /* Ring: a --border-size-2 --primary12 arc over a --role-hairline track, always with its value. */
+  .ring {
+    grid-area: track;
+    display: block;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-4);
+    overflow: visible;
+  }
+
+  .ringTrack,
+  .ringArc {
+    fill: none;
+    stroke-width: var(--border-size-2);
+  }
+
+  .ringTrack {
+    stroke: var(--role-hairline);
+  }
+
+  .ringArc {
+    stroke: var(--primary12);
+  }
+
+  /* Status: the §1.5.4 glyph in --role-status (its status scale) plus the word in --primary12. */
+  .status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-px-1);
+  }
+
+  .success,
+  .warning,
+  .danger {
+    color: var(--primary12);
+  }
+
+  .statusGlyph {
+    flex: none;
+    display: block;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    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;
+  }
+
+  .statusText {
+    color: var(--primary12);
+  }
+
+  @media (forced-colors: active) {
+    .indicator,
+    .cellFilled {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .ringArc {
+      forced-color-adjust: none;
+      stroke: CanvasText;
+    }
+
+    .statusGlyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}
+
+@layer variants {
+  .steps .track {
+    justify-self: start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--border-size-2);
+    block-size: auto;
+    border-width: 0;
+  }
+
+  /* Ring: inline, the ring beside its value; its tracks pack at the start even when stretched in a panel. */
+  .kindRing {
+    display: inline-grid;
+    grid-template-columns: auto auto auto;
+    grid-template-areas: 'label track readout';
+    justify-content: start;
+    align-items: center;
+    column-gap: var(--size-px-2);
+  }
+
+  /* Rail (§10.19): a --border-size-2 --role-hairline line, the position in --primary12. */
+  .rail .track {
+    block-size: var(--border-size-2);
+    border-width: 0;
+    background-color: var(--role-hairline);
+  }
+
+  /*
+   * Viewport fallback: label | track | value in one row from --md-n-above…
+   * The columns are fixed shares (1 : 2 : 1), not sized by each readout, so
+   * the tracks of stacked rows start and end on one line; the value column
+   * never drops below its unbreakable text.
+   */
+  @media (min-width: 768px) {
+    .bar,
+    .steps,
+    .rail {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(min-content, 1fr);
+      grid-template-areas: 'label track readout';
+    }
+  }
+
+  /* …refined by the meter-panel container: stacked below 768 px, rows from 768 (§5.10.2). */
+  @container meter-panel (width < 768px) {
+    .bar,
+    .steps,
+    .rail {
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas:
+        'label readout'
+        'track track';
+    }
+  }
+
+  @container meter-panel (width >= 768px) {
+    .bar,
+    .steps,
+    .rail {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(min-content, 1fr);
+      grid-template-areas: 'label track readout';
+    }
+  }
+}
+
+@layer states {
+  /* Indeterminate: the track in line-dashed (provisional [D66]), no indicator; "Loading…" beside it. */
+  .base[data-indeterminate] .track {
+    padding-block: var(--border-size-1);
+    border-width: 0;
+  }
+
+  .base[data-indeterminate] .indicator {
+    display: none;
+  }
+
+  .base[data-indeterminate] .dashes {
+    display: block;
+  }
+
+  /* The dashes advance slowly, and only under --motionOK; never shimmer, pulse or opacity (§10.20). */
+  @media (prefers-reduced-motion: no-preference) {
+    .base[data-indeterminate] .dashLine {
+      animation: dashAdvance calc(var(--ds-duration-disclosure) * 6) linear infinite;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* Progress is hidden in print, except steps, which print their "2 of 4" text (§10.18). */
+    .base {
+      display: none;
+    }
+
+    .steps {
+      display: grid;
+    }
+
+    .steps .track {
+      display: none;
+    }
+  }
+}