@usefragments/ui 1.5.4 → 1.7.0

package/src/recipes/_navigation.scss

@@ -0,0 +1,110 @@
+@use "../tokens/measurements.generated" as measurements;
+@use "typography";
+
+@function _navigation($role) {
+  @if $role == "appShellHeaderHeight" {
+    @return var(--fui-navigation-app-shell-header-height, #{measurements.navigation-value($role)});
+  } @else if $role == "sidebarGutter" {
+    @return var(--fui-navigation-sidebar-gutter, #{measurements.navigation-value($role)});
+  } @else if $role == "sidebarLeadingBox" {
+    @return var(--fui-navigation-sidebar-leading-box, #{measurements.navigation-value($role)});
+  } @else if $role == "sidebarDot" {
+    @return var(--fui-navigation-sidebar-dot, #{measurements.navigation-value($role)});
+  } @else if $role == "sidebarRail" {
+    @return var(--fui-navigation-sidebar-rail, #{measurements.navigation-value($role)});
+  } @else if $role == "sidebarLabelOffset" {
+    @return var(--fui-navigation-sidebar-label-offset, #{measurements.navigation-value($role)});
+  } @else if $role == "sidebarCollapsedWidth" {
+    @return var(--fui-navigation-sidebar-collapsed-width, #{measurements.navigation-value($role)});
+  }
+
+  @error "Unknown navigation measurement '#{$role}'.";
+}
+
+@mixin properties {
+  --fui-navigation-row-track: var(
+    --fui-control-track-md,
+    #{measurements.target-value("controlTrack", "md")}
+  );
+  --fui-navigation-section-track: var(
+    --fui-control-track-micro,
+    #{measurements.target-value("controlTrack", "micro")}
+  );
+  --fui-navigation-gutter: #{_navigation("sidebarGutter")};
+  --fui-navigation-inline-inset: #{_navigation("sidebarGutter")};
+  --fui-navigation-content-gap: #{_navigation("sidebarGutter")};
+  --fui-navigation-leading-box: #{_navigation("sidebarLeadingBox")};
+  --fui-navigation-active-rail: #{_navigation("sidebarRail")};
+  --fui-navigation-active-dot: #{_navigation("sidebarDot")};
+  --fui-navigation-label-optical-y: #{_navigation("sidebarLabelOffset")};
+}
+
+@mixin row {
+  @include properties;
+  @include typography.role("ui-compact");
+
+  box-sizing: border-box;
+  min-block-size: var(--fui-navigation-row-track);
+  padding-inline: var(--fui-navigation-inline-inset);
+  gap: var(--fui-navigation-content-gap);
+}
+
+@mixin section-row {
+  @include properties;
+  @include typography.role("caption");
+
+  box-sizing: border-box;
+  min-block-size: var(--fui-navigation-section-track);
+  padding-inline: var(--fui-navigation-inline-inset);
+  gap: var(--fui-navigation-content-gap);
+}
+
+@mixin leading {
+  @include properties;
+
+  inline-size: var(--fui-navigation-leading-box);
+  block-size: var(--fui-navigation-leading-box);
+  flex: 0 0 var(--fui-navigation-leading-box);
+
+  > svg,
+  > img {
+    inline-size: var(--fui-icon-md, #{measurements.target-value("icon", "md")});
+    block-size: var(--fui-icon-md, #{measurements.target-value("icon", "md")});
+  }
+}
+
+@mixin active-indicator($placement) {
+  @include properties;
+
+  position: relative;
+
+  @if $placement == "start" {
+    &::before {
+      content: "";
+      position: absolute;
+      inset-block: var(--fui-raw-space-4, #{measurements.raw-space(4)});
+      inset-inline-start: calc(-1 * var(--fui-navigation-gutter));
+      inline-size: var(--fui-navigation-active-rail);
+    }
+  } @else if $placement == "end" {
+    &::after {
+      content: "";
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-end: var(--fui-navigation-inline-inset);
+      inline-size: var(--fui-navigation-active-dot);
+      block-size: var(--fui-navigation-active-dot);
+      border-radius: 999px;
+      transform: translateY(-50%);
+    }
+  } @else {
+    @error "Unknown navigation indicator placement '#{$placement}'. Expected start or end.";
+  }
+}
+
+@mixin collapsed-shell {
+  @include properties;
+
+  inline-size: #{_navigation("sidebarCollapsedWidth")};
+  justify-items: center;
+}

package/src/recipes/_overlay.scss

@@ -0,0 +1,191 @@
+@use "../tokens/variables" as tokens;
+@use "action" as action;
+@use "feedback" as feedback;
+@use "surface" as surface;
+@use "target" as target;
+@use "typography" as typography;
+
+@function _raw($step, $fallback) {
+  @return var(--fui-raw-space-#{$step}, $fallback);
+}
+
+@function dialog-max($size) {
+  @if $size == "sm" {
+    @return var(--fui-overlay-dialog-max-inline-sm, 384px);
+  } @else if $size == "md" {
+    @return var(--fui-overlay-dialog-max-inline-md, 448px);
+  } @else if $size == "lg" {
+    @return var(--fui-overlay-dialog-max-inline-lg, 576px);
+  } @else if $size == "xl" {
+    @return var(--fui-overlay-dialog-max-inline-xl, 768px);
+  }
+
+  @error "Unknown dialog overlay size '#{$size}'. Expected sm, md, lg, or xl.";
+}
+
+@function drawer-inline($size) {
+  @if $size == "sm" {
+    @return var(--fui-overlay-drawer-inline-sm, 320px);
+  } @else if $size == "md" {
+    @return var(--fui-overlay-drawer-inline-md, 384px);
+  } @else if $size == "lg" {
+    @return var(--fui-overlay-drawer-inline-lg, 512px);
+  } @else if $size == "xl" {
+    @return var(--fui-overlay-drawer-inline-xl, 768px);
+  }
+
+  @error "Unknown side-drawer size '#{$size}'. Expected sm, md, lg, or xl.";
+}
+
+@function drawer-block($size) {
+  @if $size == "sm" {
+    @return var(--fui-overlay-drawer-block-sm, 25dvh);
+  } @else if $size == "md" {
+    @return var(--fui-overlay-drawer-block-md, 40dvh);
+  } @else if $size == "lg" {
+    @return var(--fui-overlay-drawer-block-lg, 60dvh);
+  } @else if $size == "xl" {
+    @return var(--fui-overlay-drawer-block-xl, 80dvh);
+  }
+
+  @error "Unknown block-drawer size '#{$size}'. Expected sm, md, lg, or xl.";
+}
+
+@mixin safe-viewport {
+  --_fui-overlay-safe-top: var(
+    --fui-feedback-viewport-inset-top,
+    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-top))
+  );
+  --_fui-overlay-safe-bottom: var(
+    --fui-feedback-viewport-inset-bottom,
+    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-bottom))
+  );
+  --_fui-overlay-safe-left: var(
+    --fui-feedback-viewport-inset-left,
+    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-left))
+  );
+  --_fui-overlay-safe-right: var(
+    --fui-feedback-viewport-inset-right,
+    max(var(--fui-raw-space-16, 16px), env(safe-area-inset-right))
+  );
+  --_fui-overlay-safe-inline: calc(
+    100dvw - var(--_fui-overlay-safe-left) - var(--_fui-overlay-safe-right)
+  );
+  --_fui-overlay-safe-block: calc(
+    100dvh - var(--_fui-overlay-safe-top) - var(--_fui-overlay-safe-bottom)
+  );
+}
+
+@mixin modal-shell {
+  @include typography.role("body-compact");
+
+  box-sizing: border-box;
+  max-block-size: var(--_fui-overlay-safe-block, calc(100dvh - #{_raw(32, 32px)}));
+  overflow: auto;
+  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  background-color: var(--fui-bg-elevated, #{tokens.$fui-bg-elevated});
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, #{tokens.$fui-border});
+  border-radius: var(--fui-radius-lg, #{tokens.$fui-radius-lg});
+  box-shadow: var(--fui-shadow-md, #{tokens.$fui-shadow-md});
+}
+
+@mixin _section-inline-inset {
+  padding-inline: var(--fui-overlay-inline-inset, #{surface.inset("roomy")});
+
+  @media (max-width: 479px) {
+    padding-inline: var(--fui-overlay-inline-inset-narrow, #{surface.inset("default")});
+  }
+}
+
+@mixin header {
+  @include _section-inline-inset;
+
+  display: grid;
+  gap: var(--fui-overlay-section-gap, #{_raw(8, 8px)});
+  padding-block: var(--fui-overlay-header-block-inset, #{_raw(12, 12px)});
+}
+
+@mixin body {
+  @include _section-inline-inset;
+  @include typography.role("body-compact");
+
+  padding-block: 0 var(--fui-overlay-body-block-end-inset, #{_raw(12, 12px)});
+}
+
+@mixin footer {
+  @include _section-inline-inset;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--fui-overlay-section-gap, #{_raw(8, 8px)});
+  padding-block: var(--fui-overlay-footer-block-inset, #{_raw(8, 8px)});
+}
+
+@mixin modal-title {
+  @include typography.role("title-md");
+}
+
+@mixin description {
+  @include typography.role("body-compact");
+}
+
+@mixin anchored-title {
+  @include typography.role("ui-standard");
+}
+
+@mixin close {
+  @include action.base;
+  @include action.icon-only("sm");
+  @include target.hit-area("compact");
+
+  position: absolute;
+  inset-block-start: var(--fui-overlay-close-inset, #{_raw(12, 12px)});
+  inset-inline-end: var(--fui-overlay-close-inset, #{_raw(12, 12px)});
+}
+
+@mixin anchored-size($size) {
+  @if $size == "sm" {
+    @include surface.apply-inset("compact");
+
+    max-inline-size: var(--fui-overlay-popover-max-inline-sm, 256px);
+  } @else if $size == "md" {
+    @include surface.apply-inset("compact");
+
+    max-inline-size: var(--fui-overlay-popover-max-inline-md, 384px);
+  } @else if $size == "lg" {
+    @include surface.apply-inset("default");
+
+    max-inline-size: var(--fui-overlay-popover-max-inline-lg, 512px);
+  } @else {
+    @error "Unknown anchored overlay size '#{$size}'. Expected sm, md, or lg.";
+  }
+}
+
+@mixin anchored-surface($size) {
+  @include typography.role("body-compact");
+  @include anchored-size($size);
+
+  box-sizing: border-box;
+  min-inline-size: var(--fui-overlay-popover-min-inline, 192px);
+  color: var(--fui-text-primary, #{tokens.$fui-text-primary});
+  background-color: var(--fui-bg-elevated, #{tokens.$fui-bg-elevated});
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, #{tokens.$fui-border});
+  border-radius: var(--fui-radius-lg, #{tokens.$fui-radius-lg});
+  box-shadow: var(--fui-shadow-md, #{tokens.$fui-shadow-md});
+}
+
+@mixin arrow-box {
+  inline-size: var(--fui-overlay-arrow-size, #{_raw(10, 10px)});
+  block-size: var(--fui-overlay-arrow-size, #{_raw(10, 10px)});
+  transform: rotate(45deg);
+}
+
+@mixin tooltip {
+  @include typography.role("ui-compact");
+
+  box-sizing: border-box;
+  max-inline-size: var(--fui-overlay-tooltip-max-inline, 320px);
+  padding-block: _raw(4, 4px);
+  padding-inline: _raw(8, 8px);
+}

package/src/recipes/_popup.scss

@@ -0,0 +1,102 @@
+@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;
+  // Rows are pick targets: rapid pointer travel must never start a text
+  // selection, and touch taps get no highlight flash.
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  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-field-selection-bg,
+    var(--fui-control-selected-bg, #{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,182 @@
+@use "../tokens/mixins" as mixins;
+@use "typography" as typography;
+
+// Block rhythm is owned by the container (owl selectors below). The element
+// mixins reset inline margins only, so a `.x p { @include paragraph }` rule
+// (specificity 0,1,1) cannot out-rank the owl (0,1,0) and glue the flow.
+@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-inline: 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-inline: 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;
+  // Em offset scales with the inherited font size (prose links render at
+  // several sizes); matches the Link component's hover/dotted variants.
+  text-underline-offset: 0.2em;
+  overflow-wrap: anywhere;
+
+  &:focus-visible {
+    // The previous hand-rolled outline referenced --fui-focus-ring, which is
+    // never defined — the whole declaration was invalid and prose links had
+    // no visible ring at all.
+    @include mixins.focus-ring;
+  }
+}
+
+@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;
+}