@usefragments/ui 1.5.4 → 1.6.0

package/src/recipes/_popup.scss

@@ -0,0 +1,92 @@
+@use "../tokens/measurements.generated" as measurements;
+@use "../tokens/variables" as tokens;
+@use "typography";
+
+@mixin properties {
+  --fui-popup-container-inset: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  --fui-popup-row-pitch: var(--fui-raw-space-32, #{measurements.raw-space(32)});
+  --fui-popup-row-block-inset: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+  --fui-popup-row-inline-inset: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+  --fui-popup-row-content-gap: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+  --fui-popup-row-gap: var(--fui-stroke-hairline, #{measurements.target-value("stroke", "hairline")});
+  --fui-popup-indicator-box: var(--fui-raw-space-16, #{measurements.raw-space(16)});
+  --fui-popup-separator-size: var(
+    --fui-stroke-hairline,
+    #{measurements.target-value("stroke", "hairline")}
+  );
+  --fui-popup-separator-gap: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  --fui-popup-offset: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  --fui-popup-viewport-rows: 4.5;
+  --_fui-popup-effective-row-pitch: var(--fui-popup-row-pitch);
+
+  @media (pointer: coarse) {
+    --_fui-popup-effective-row-pitch: var(--fui-raw-space-48, #{measurements.raw-space(48)});
+  }
+}
+
+@mixin container {
+  @include properties;
+
+  box-sizing: border-box;
+  padding: var(--fui-popup-container-inset);
+  border: var(--fui-stroke-hairline, #{measurements.target-value("stroke", "hairline")}) solid
+    var(--fui-border, #{tokens.$fui-border});
+  border-radius: var(--fui-radius-md, #{tokens.$fui-radius-md});
+  background: var(--fui-bg-elevated, #{tokens.$fui-bg-elevated});
+  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  box-shadow: var(--fui-shadow-md, #{tokens.$fui-shadow-md});
+}
+
+@mixin viewport {
+  box-sizing: border-box;
+  max-block-size: calc(
+    2 * var(--fui-popup-container-inset) + 2 *
+      var(--fui-stroke-hairline, #{measurements.target-value("stroke", "hairline")}) +
+      var(--fui-popup-viewport-rows) * var(--_fui-popup-effective-row-pitch) +
+      (var(--fui-popup-viewport-rows) - 0.5) * var(--fui-popup-row-gap)
+  );
+  overflow-y: auto;
+}
+
+@mixin row {
+  @include typography.role("ui-compact");
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  min-block-size: var(--_fui-popup-effective-row-pitch);
+  padding-block: var(--fui-popup-row-block-inset);
+  padding-inline: var(--fui-popup-row-inline-inset);
+  gap: var(--fui-popup-row-content-gap);
+}
+
+@mixin highlight-state {
+  background: var(--fui-bg-hover, #{tokens.$fui-bg-hover});
+}
+
+@mixin selected-state {
+  background: var(--fui-bg-active, #{tokens.$fui-bg-active});
+  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+}
+
+@mixin disabled-state {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+@mixin group-label {
+  @include typography.role("ui-compact");
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  min-block-size: var(--_fui-popup-effective-row-pitch);
+  padding-inline: var(--fui-popup-row-inline-inset);
+  color: var(--fui-text-tertiary, #{tokens.$fui-text-tertiary});
+}
+
+@mixin group-separator {
+  block-size: var(--fui-popup-separator-size);
+  margin-block: var(--fui-popup-separator-gap);
+  background: var(--fui-border, #{tokens.$fui-border});
+}

package/src/recipes/_prose.scss

@@ -0,0 +1,174 @@
+@use "typography" as typography;
+
+@mixin root {
+  @include typography.role("body-relaxed");
+
+  > * {
+    margin-block: 0;
+  }
+
+  > * + * {
+    margin-block-start: var(--fui-raw-space-12);
+  }
+
+  > * + :is(h1, h2, h3, h4, h5, h6) {
+    margin-block-start: var(--fui-raw-space-24);
+  }
+}
+
+@mixin paragraph {
+  @include typography.role("body-relaxed");
+
+  margin: 0;
+}
+
+@mixin heading($level) {
+  @if $level == 1 {
+    @include typography.role("title-lg");
+  } @else if $level == 2 {
+    @include typography.role("title-md");
+  } @else if $level == 3 {
+    @include typography.role("title-sm");
+  } @else if $level == 4 or $level == 5 or $level == 6 {
+    @include typography.role("ui-standard");
+  } @else {
+    @error "Unknown prose heading '#{$level}'. Expected 1 through 6.";
+  }
+
+  margin: 0;
+}
+
+@mixin list($kind) {
+  @include typography.role("body-relaxed");
+
+  margin: 0;
+  padding: 0;
+
+  @if $kind == "none" {
+    display: grid;
+    list-style: none;
+  } @else if $kind == "disc" or $kind == "decimal" or $kind == "icon" {
+    display: grid;
+    grid-template-columns: minmax(var(--fui-raw-space-12), max-content) minmax(0, 1fr);
+    column-gap: var(--fui-raw-space-8);
+    list-style: none;
+
+    > li {
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-column: 1 / -1;
+      min-inline-size: 0;
+    }
+
+    > li::before,
+    > li > :first-child:is([class*="iconWrapper"]) {
+      grid-column: 1;
+      align-self: start;
+      justify-self: end;
+    }
+
+    > li > :not([class*="iconWrapper"]),
+    > li::after {
+      grid-column: 2;
+      min-inline-size: 0;
+    }
+
+    > li > :is(ul, ol) {
+      grid-column: 1 / -1;
+      margin-block-start: var(--fui-raw-space-8);
+    }
+
+    @if $kind == "disc" {
+      > li::before {
+        content: "•";
+      }
+    } @else if $kind == "decimal" {
+      counter-reset: fui-prose-list;
+
+      > li {
+        counter-increment: fui-prose-list;
+      }
+
+      > li::before {
+        content: counter(fui-prose-list) ".";
+        font-variant-numeric: tabular-nums;
+      }
+    }
+  } @else {
+    @error "Unknown prose list '#{$kind}'. Expected none, disc, decimal, or icon.";
+  }
+}
+
+@mixin inline-code {
+  @include typography.role("code");
+
+  padding-block: var(--fui-raw-space-2);
+  padding-inline: var(--fui-raw-space-4);
+  border-radius: var(--fui-radius-sm);
+  background: var(--fui-bg-tertiary);
+  overflow-wrap: anywhere;
+}
+
+@mixin code-block($density) {
+  @include typography.role("code");
+
+  @if $density == "compact" {
+    padding-block: var(--fui-raw-space-8);
+    padding-inline: var(--fui-raw-space-12);
+  } @else if $density == "default" {
+    padding-block: var(--fui-raw-space-12);
+    padding-inline: var(--fui-raw-space-16);
+  } @else {
+    @error "Unknown code-block density '#{$density}'. Expected compact or default.";
+  }
+
+  tab-size: 2;
+  max-inline-size: 100%;
+  overflow: auto;
+  white-space: pre;
+}
+
+@mixin blockquote {
+  @include typography.role("body-relaxed");
+
+  margin: 0;
+  padding-inline-start: var(--fui-raw-space-16);
+  border-inline-start: var(--fui-raw-space-2) solid var(--fui-border-strong);
+}
+
+@mixin table {
+  @include typography.role("body-compact");
+
+  display: block;
+  max-inline-size: 100%;
+  overflow-x: auto;
+
+  :is(th, td) {
+    padding-block: var(--fui-raw-space-8);
+    padding-inline: var(--fui-raw-space-12);
+  }
+}
+
+@mixin link {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: var(--fui-raw-space-2);
+  overflow-wrap: anywhere;
+
+  &:focus-visible {
+    outline: var(--fui-stroke-default) solid var(--fui-focus-ring);
+    outline-offset: var(--fui-stroke-default);
+  }
+}
+
+@mixin rule {
+  block-size: var(--fui-stroke-hairline);
+  margin-block: var(--fui-raw-space-24);
+  border: 0;
+  background: var(--fui-border);
+}
+
+@mixin media {
+  max-inline-size: 100%;
+  block-size: auto;
+}

package/src/recipes/_representation.scss

@@ -0,0 +1,193 @@
+@use "../tokens/measurements.generated" as measurements;
+@use "action" as action;
+@use "typography" as typography;
+
+@function _raw($step) {
+  @return var(--fui-raw-space-#{$step}, #{measurements.raw-space($step)});
+}
+
+@function avatar-size($size) {
+  $step: null;
+
+  @if $size == "xs" {
+    $step: 24;
+  } @else if $size == "sm" {
+    $step: 32;
+  } @else if $size == "md" {
+    $step: 40;
+  } @else if $size == "lg" {
+    $step: 48;
+  } @else if $size == "xl" {
+    $step: 64;
+  } @else {
+    @error "Unknown avatar size '#{$size}'. Expected xs, sm, md, lg, or xl.";
+  }
+
+  @return var(--fui-avatar-size-#{$size}, #{_raw($step)});
+}
+
+@function avatar-overlap($size) {
+  $step: null;
+
+  @if $size == "xs" {
+    $step: 6;
+  } @else if $size == "sm" {
+    $step: 8;
+  } @else if $size == "md" {
+    $step: 10;
+  } @else if $size == "lg" {
+    $step: 12;
+  } @else if $size == "xl" {
+    $step: 16;
+  } @else {
+    @error "Unknown avatar overlap '#{$size}'. Expected xs, sm, md, lg, or xl.";
+  }
+
+  @return var(--fui-avatar-overlap-#{$size}, #{_raw($step)});
+}
+
+@function icon-size($size) {
+  @if $size ==
+    "xs" or
+    $size ==
+    "sm" or
+    $size ==
+    "md" or
+    $size ==
+    "lg" or
+    $size ==
+    "xl" or
+    $size ==
+    "2xl"
+  {
+    @return var(--fui-icon-#{$size}, #{measurements.target-value("icon", $size)});
+  }
+
+  @error "Unknown icon size '#{$size}'. Expected xs, sm, md, lg, xl, or 2xl.";
+}
+
+@function activity-size($size) {
+  @if $size == "sm" {
+    @return icon-size("md");
+  } @else if $size == "md" {
+    @return icon-size("lg");
+  } @else if $size == "lg" {
+    @return icon-size("xl");
+  } @else if $size == "xl" {
+    @return icon-size("2xl");
+  }
+
+  @error "Unknown activity size '#{$size}'. Expected sm, md, lg, or xl.";
+}
+
+@function badge-track($size) {
+  @if $size == "sm" {
+    @return var(--fui-badge-track-sm, #{_raw(20)});
+  } @else if $size == "md" {
+    @return var(--fui-badge-track-md, #{_raw(24)});
+  } @else if $size == "lg" {
+    @return var(--fui-badge-track-lg, #{action.track("sm")});
+  }
+
+  @error "Unknown badge size '#{$size}'. Expected sm, md, or lg.";
+}
+
+@mixin avatar($size) {
+  $type-role: "ui-standard";
+
+  @if $size == "xs" or $size == "sm" {
+    $type-role: "ui-compact";
+  } @else if $size == "xl" {
+    $type-role: "title-md";
+  }
+
+  @include typography.role($type-role);
+
+  inline-size: avatar-size($size);
+  block-size: avatar-size($size);
+  overflow: hidden;
+  border-radius: var(--fui-radius-full);
+}
+
+@mixin avatar-group-item($size) {
+  margin-inline-start: calc(-1 * #{avatar-overlap($size)});
+  border: var(--fui-stroke-default, #{measurements.target-value("stroke", "default")}) solid
+    var(--fui-bg-primary);
+}
+
+@mixin glyph($size) {
+  inline-size: icon-size($size);
+  block-size: icon-size($size);
+  flex: 0 0 auto;
+}
+
+@mixin activity($size) {
+  --_fui-activity-size: #{activity-size($size)};
+
+  inline-size: var(--_fui-activity-size);
+  block-size: var(--_fui-activity-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+@mixin skeleton($kind, $size) {
+  @if $kind == "avatar" {
+    @if $size == "sm" {
+      inline-size: avatar-size("sm");
+      block-size: avatar-size("sm");
+    } @else if $size == "md" {
+      inline-size: avatar-size("md");
+      block-size: avatar-size("md");
+    } @else if $size == "lg" {
+      inline-size: avatar-size("lg");
+      block-size: avatar-size("lg");
+    } @else {
+      @error "Unknown skeleton size '#{$size}'. Expected sm, md, or lg.";
+    }
+  } @else if $kind == "button" or $kind == "field" {
+    @if $size == "sm" or $size == "md" or $size == "lg" {
+      block-size: action.track($size);
+    } @else {
+      @error "Unknown skeleton size '#{$size}'. Expected sm, md, or lg.";
+    }
+  } @else {
+    @error "Unknown skeleton kind '#{$kind}'. Expected avatar, button, or field.";
+  }
+}
+
+@mixin badge($size) {
+  @if $size == "sm" {
+    @include typography.role("ui-compact");
+  } @else if $size == "md" or $size == "lg" {
+    @include typography.role("ui-standard");
+  } @else {
+    @error "Unknown badge size '#{$size}'. Expected sm, md, or lg.";
+  }
+
+  min-block-size: badge-track($size);
+}
+
+@mixin chart-marker($kind) {
+  @if $kind == "dot" {
+    inline-size: var(--fui-chart-marker-dot, #{_raw(8)});
+    block-size: var(--fui-chart-marker-dot, #{_raw(8)});
+    border-radius: var(--fui-radius-full);
+  } @else if $kind == "line" or $kind == "dashed" {
+    inline-size: var(--fui-chart-marker-inline, #{_raw(12)});
+    block-size: var(--fui-chart-marker-stroke, #{_raw(2)});
+  } @else {
+    @error "Unknown chart marker '#{$kind}'. Expected dot, line, or dashed.";
+  }
+}
+
+@mixin chart-tooltip {
+  @include typography.role("body-compact");
+
+  --_fui-chart-tooltip-item-gap: #{_raw(8)};
+
+  min-inline-size: var(--fui-chart-tooltip-min-inline, 100px);
+  padding-block: _raw(8);
+  padding-inline: _raw(12);
+}

package/src/recipes/_segmented.scss

@@ -0,0 +1,26 @@
+@use "action";
+
+@function track($size) {
+  @return action.track($size);
+}
+
+@mixin rail($size) {
+  --_fui-segmented-track: #{action.track($size)};
+  --_fui-segmented-inline-inset: #{action.inline-inset($size)};
+  --_fui-segmented-gap: #{action.gap($size)};
+  --_fui-segmented-icon-size: #{action.icon-size($size)};
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: stretch;
+  min-block-size: var(--_fui-segmented-track);
+}
+
+@mixin item($size) {
+  @include action.base;
+  @include action.size($size);
+}
+
+@mixin glyph($size) {
+  @include action.glyph($size);
+}

package/src/recipes/_surface.scss

@@ -0,0 +1,13 @@
+@use "../tokens/measurements.generated" as measurements;
+
+@function inset($role) {
+  @if $role == "panel" or $role == "compact" or $role == "default" or $role == "roomy" {
+    @return var(--fui-surface-inset-#{$role}, #{measurements.target-value("surfaceInset", $role)});
+  }
+
+  @error "Unknown surface inset role '#{$role}'. Expected panel, compact, default, or roomy.";
+}
+
+@mixin apply-inset($role) {
+  padding: inset($role);
+}

package/src/recipes/_table-chrome.scss

@@ -0,0 +1,105 @@
+@use "../tokens/measurements.generated" as measurements;
+@use "typography" as typography;
+
+@mixin properties {
+  --fui-table-row-track-compact: var(--fui-raw-space-32, #{measurements.raw-space(32)});
+  --fui-table-row-track-regular: var(--fui-raw-space-40, #{measurements.raw-space(40)});
+  --fui-table-row-track-relaxed: var(--fui-raw-space-48, #{measurements.raw-space(48)});
+  --fui-table-cell-inline-inset-compact: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+  --fui-table-cell-inline-inset-regular: var(--fui-raw-space-12, #{measurements.raw-space(12)});
+  --fui-table-cell-inline-inset-relaxed: var(--fui-raw-space-16, #{measurements.raw-space(16)});
+  --fui-table-cell-block-inset-compact: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+  --fui-table-cell-block-inset-regular: var(--fui-raw-space-8, #{measurements.raw-space(8)});
+  --fui-table-cell-block-inset-relaxed: var(--fui-raw-space-12, #{measurements.raw-space(12)});
+  --fui-table-tree-indent-step: var(--fui-raw-space-24, #{measurements.raw-space(24)});
+  --fui-table-divider-size: var(
+    --fui-stroke-hairline,
+    #{measurements.target-value("stroke", "hairline")}
+  );
+}
+
+@function row-track($density) {
+  @if $density == "compact" or $density == "regular" or $density == "relaxed" {
+    @return var(--fui-table-row-track-#{$density});
+  }
+
+  @error "Unknown table density '#{$density}'. Expected compact, regular, or relaxed.";
+}
+
+@function cell-inline-inset($density) {
+  @if $density == "compact" or $density == "regular" or $density == "relaxed" {
+    @return var(--fui-table-cell-inline-inset-#{$density});
+  }
+
+  @error "Unknown table density '#{$density}'. Expected compact, regular, or relaxed.";
+}
+
+@function cell-block-inset($density) {
+  @if $density == "compact" or $density == "regular" or $density == "relaxed" {
+    @return var(--fui-table-cell-block-inset-#{$density});
+  }
+
+  @error "Unknown table density '#{$density}'. Expected compact, regular, or relaxed.";
+}
+
+@mixin density($density) {
+  @if $density != "compact" and $density != "regular" and $density != "relaxed" {
+    @error "Unknown table density '#{$density}'. Expected compact, regular, or relaxed.";
+  }
+
+  --_fui-table-row-track: #{row-track($density)};
+  --_fui-table-cell-inline-inset: #{cell-inline-inset($density)};
+  --_fui-table-cell-block-inset: #{cell-block-inset($density)};
+
+  @if $density == "compact" {
+    @include typography.role("ui-compact");
+  } @else {
+    @include typography.role("body-compact");
+  }
+}
+
+@mixin root {
+  @include properties;
+
+  inline-size: 100%;
+  border-collapse: collapse;
+}
+
+@mixin caption {
+  @include typography.role("caption");
+
+  padding-block: var(--fui-raw-space-12, #{measurements.raw-space(12)});
+  padding-inline: 0;
+  color: var(--fui-text-secondary);
+  text-align: start;
+  caption-side: top;
+}
+
+@mixin header-cell {
+  @include typography.role("ui-compact");
+
+  padding-block: var(--_fui-table-cell-block-inset);
+  padding-inline: var(--_fui-table-cell-inline-inset);
+  color: var(--fui-text-secondary);
+  text-align: start;
+  vertical-align: middle;
+}
+
+@mixin body-cell {
+  padding-block: var(--_fui-table-cell-block-inset);
+  padding-inline: var(--_fui-table-cell-inline-inset);
+  color: var(--fui-text-primary);
+  vertical-align: middle;
+}
+
+@mixin row {
+  height: var(--_fui-table-row-track);
+  border-block-end: var(--fui-table-divider-size) solid var(--fui-table-border, var(--fui-border));
+}
+
+@mixin tree-cell {
+  padding-inline-start: calc(
+    var(--_fui-table-cell-inline-inset) + var(--_fui-table-tree-depth, 0) *
+      var(--fui-table-tree-indent-step)
+  );
+}

package/src/recipes/_target.scss

@@ -0,0 +1,31 @@
+@use "../tokens/measurements.generated" as measurements;
+
+@function hit-size($role) {
+  @if $role == "micro" {
+    @return var(--fui-control-track-micro, #{measurements.target-value("controlTrack", "micro")});
+  } @else if $role == "compact" {
+    @return var(--fui-control-track-md, #{measurements.target-value("controlTrack", "md")});
+  } @else if $role == "touch" {
+    @return var(--fui-raw-space-48, #{measurements.raw-space(48)});
+  }
+
+  @error "Unknown hit-target role '#{$role}'. Expected micro, compact, or touch.";
+}
+
+@mixin hit-area($role) {
+  --_fui-target-hit-size: #{hit-size($role)};
+
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: max(100%, var(--_fui-target-hit-size));
+    block-size: max(100%, var(--_fui-target-hit-size));
+    box-sizing: border-box;
+    transform: translate(-50%, -50%);
+    pointer-events: auto;
+  }
+}

package/src/recipes/_typography.scss

@@ -0,0 +1,38 @@
+@use "../tokens/measurements.generated" as measurements;
+@use "../tokens/variables" as tokens;
+
+@function font-size($role) {
+  @return var(--fui-type-#{$role}-size, #{measurements.typography-value($role, "size")});
+}
+
+@function line-height($role) {
+  @return var(--fui-type-#{$role}-line, #{measurements.typography-value($role, "line")});
+}
+
+@function weight($role) {
+  @return var(--fui-type-#{$role}-weight, #{measurements.typography-value($role, "weight")});
+}
+
+@function tracking($role) {
+  @return var(--fui-type-#{$role}-tracking, #{measurements.typography-value($role, "tracking")});
+}
+
+@function font-family($role) {
+  // Reuse the generated lookup as the closed-role assertion. Families remain
+  // a semantic choice here rather than a numeric generated property.
+  $_validated-role: measurements.typography-value($role, "size");
+
+  @if $role == "code" {
+    @return var(--fui-font-mono, #{tokens.$fui-font-mono});
+  }
+
+  @return var(--fui-font-sans, #{tokens.$fui-font-sans});
+}
+
+@mixin role($role) {
+  font-size: font-size($role);
+  line-height: line-height($role);
+  font-weight: weight($role);
+  letter-spacing: tracking($role);
+  font-family: font-family($role);
+}

package/src/recipes/popup.ts

@@ -0,0 +1,12 @@
+import { MEASUREMENT_PROFILES, measurementPx } from "../measurements";
+
+export const POPUP_OFFSET_PX = measurementPx(MEASUREMENT_PROFILES.rawSpace["4"], "rawSpace.4");
+export const POPUP_VIEWPORT_ROWS = 4.5;
+
+export function resolvePopupViewportRows(maxVisibleItems?: number): number {
+  if (maxVisibleItems === undefined || !Number.isFinite(maxVisibleItems) || maxVisibleItems <= 0) {
+    return POPUP_VIEWPORT_ROWS;
+  }
+
+  return Math.max(1, Math.floor(maxVisibleItems)) + 0.5;
+}