@usefragments/ui 1.5.4 → 1.7.0

package/src/components/Combobox/Combobox.module.scss

@@ -1,31 +1,46 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../recipes/action";
+@use "../../recipes/field";
+@use "../../recipes/layout";
+@use "../../recipes/popup";
+@use "../../recipes/target";
+
+.wrapper {
+  @include field.wrapper;
+}
+
+.label {
+  @include field.label;
+}
+
+.helper {
+  @include field.helper;
+}
 
-// Form field wrapper (label + helper + error)
-@include form-field-wrapper;
+.helperError,
+.errorMessage {
+  @include field.error;
+}
 
 // Input + trigger wrapper.
-// --_field-h is the single field-height source (same input-height tokens that
-// control-size() uses for Select/DatePicker); the inner text input + chevron
-// trigger derive from it. Declared before the size variants so those win the
-// --_field-h override. min-height (not height) preserves chip wrapping.
+// --_field-h is the shared control-height track (same ladder as Input/Select).
+// Inner text + chips fill the content box after wrapper pad only.
+// min-height (not height) preserves chip wrapping.
 .inputWrapper {
-  @include field-shell;
-
-  --_field-h: var(--fui-input-height, #{$fui-input-height});
+  @include field.size("md");
+  @include field.shell;
 
   display: inline-flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: var(--fui-space-1, $fui-space-1);
+  gap: action.gap("sm");
   width: 100%;
-  min-width: 10rem;
-  min-height: var(--_field-h);
-  padding: calc(var(--fui-space-px, $fui-space-px) * 2);
-  padding-right: var(--fui-space-1, $fui-space-1);
+  min-width: layout.measure("field-minimum");
+  padding-inline-end: var(--fui-raw-space-4, 4px);
 
   &:focus-within {
-    @include field-shell-focus;
+    @include field.focus-state;
   }
 
   &:has([data-disabled]) {
@@ -36,35 +51,23 @@
 
 // Size variants for input wrapper — override --_field-h.
 .inputWrapperSm {
-  --_field-h: var(--fui-input-height-sm, #{$fui-input-height-sm});
+  @include field.size("sm");
 }
 
 .inputWrapperMd {
-  // Default — inherits from .inputWrapper
+  @include field.size("md");
 }
 
 .inputWrapperLg {
-  --_field-h: var(--fui-input-height-lg, #{$fui-input-height-lg});
-}
-
-// Size variants for text input
-.inputSm {
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-}
-
-.inputLg {
-  font-size: var(--fui-font-size-base, $fui-font-size-base);
+  @include field.size("lg");
 }
 
 // Text input
 .input {
-  @include text-base;
-
   flex: 1;
-  min-width: 4rem;
-  // Inner text row sits inside the field with vertical breathing room.
-  height: calc(var(--_field-h) - var(--fui-space-2, #{$fui-space-2}));
-  padding: 0 var(--fui-space-2, $fui-space-2);
+  min-width: layout.measure("inline-floor");
+  min-block-size: 0;
+  padding: 0;
   background: transparent;
   border: none;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
@@ -96,19 +99,15 @@
 
 // Individual chip (multi-select) — matches Chip component outlined xs
 .chip {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--fui-space-0-5, $fui-space-0-5);
-  height: var(--fui-target-size-min, $fui-target-size-min);
-  padding: 0 var(--fui-space-2, $fui-space-2);
+  @include action.base;
+  @include action.size("micro");
+
   background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-  border: 1px solid var(--fui-form-group-border, $fui-border);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-form-group-border, $fui-border);
   border-radius: var(--fui-radius-full, $fui-radius-full);
-  font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
-  line-height: 1;
   color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
-  max-width: 12rem;
+  max-width: layout.measure("compact-content");
 }
 
 .chipLabel {
@@ -120,14 +119,14 @@
 // Chip remove button — round icon button inside the pill
 .chipRemove {
   @include button-reset;
-  @include touch-target;
+  @include target.hit-area("micro");
 
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: var(--fui-icon-sm, $fui-icon-sm);
-  height: var(--fui-icon-sm, $fui-icon-sm);
+  width: action.icon-size("sm");
+  height: action.icon-size("sm");
   border-radius: var(--fui-radius-full, $fui-radius-full);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   cursor: pointer;
@@ -151,8 +150,8 @@
   flex-shrink: 0;
   min-width: 0;
   min-height: 0;
-  width: calc(var(--_field-h) - var(--fui-space-2, #{$fui-space-2}));
-  height: calc(var(--_field-h) - var(--fui-space-2, #{$fui-space-2}));
+  width: action.track("micro");
+  height: action.track("micro");
   margin-left: auto;
   color: var(--fui-text-secondary, $fui-text-secondary);
   cursor: pointer;
@@ -160,7 +159,7 @@
   transition:
     color var(--fui-transition-fast, $fui-transition-fast),
     background-color var(--fui-transition-fast, $fui-transition-fast);
-  margin-inline-end: calc(var(--fui-space-px, $fui-space-px) * 2);
+  margin-inline-end: var(--fui-raw-space-2, 2px);
 
   &:hover {
     color: var(--fui-text-primary, $fui-text-primary);
@@ -173,8 +172,7 @@
   }
 
   svg {
-    width: var(--fui-icon-sm, $fui-icon-sm);
-    height: var(--fui-icon-sm, $fui-icon-sm);
+    @include action.glyph("sm");
     transition: transform var(--fui-transition-fast, $fui-transition-fast);
   }
 
@@ -191,17 +189,10 @@
 
 // Popup container
 .popup {
-  @include surface-elevated;
-  @include popup-container;
-
-  @include popup-scroll-viewport;
+  @include popup.container;
+  @include popup.viewport;
 
-  border-color: var(--fui-form-group-border, $fui-border);
   min-width: var(--anchor-width);
-  // Show N items + half-peek scroll hint (default 4.5 items).
-  // !important needed to override Base UI's inline max-height: 100%
-  max-height: var(--_popup-scroll-max-h) !important;
-  overflow-y: auto !important;
 
   // Animation
   opacity: 0;
@@ -225,18 +216,18 @@
 
 // Individual option
 .item {
-  @include popup-item;
+  @include popup.row;
 
   // Base UI Combobox sets [data-highlighted] on KEYBOARD nav only — it does NOT add it
   // on pointer hover (verified in-browser) — so :hover is required for mouse users.
   // Both map to the one shared neutral highlight.
   &:hover,
   &[data-highlighted] {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
   }
 
   &[data-selected] {
-    @include popup-item-selected;
+    @include popup.selected-state;
 
     // Selected + active: stronger accent-tinted wash so it still reads as selected.
     &:hover,
@@ -246,7 +237,7 @@
   }
 
   &[data-disabled] {
-    @include popup-item-disabled;
+    @include popup.disabled-state;
   }
 }
 
@@ -268,28 +259,24 @@
 
 // Empty state
 .empty {
-  @include text-base;
+  @include popup.row;
 
-  display: flex;
-  align-items: center;
   justify-content: center;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
 }
 
 // Group container
 .group {
-  &:not(:first-child) {
-    margin-top: var(--fui-space-1, $fui-space-1);
-    padding-top: var(--fui-space-1, $fui-space-1);
-    border-top: 1px solid var(--fui-border, $fui-border);
+  &:not(:first-child)::before {
+    content: "";
+    display: block;
+    @include popup.group-separator;
   }
 }
 
 // Group label
 .groupLabel {
-  @include popup-group-label;
+  @include popup.group-label;
 }
 
 // ============================================
@@ -298,7 +285,7 @@
 
 @media (prefers-contrast: more) {
   .inputWrapper {
-    border-width: 2px;
+    border-width: var(--fui-stroke-default, 2px);
     border-color: var(--fui-text-primary, $fui-text-primary);
 
     &:focus-within {

package/src/components/Combobox/index.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
 import { useResolvedControlSize } from "../ComponentDefaults";
 import { mergeAriaIds, useFormFieldIds, type FormFieldProps } from "../../utils/aria";
+import { POPUP_OFFSET_PX, resolvePopupViewportRows } from "../../recipes/popup";
 import styles from "./Combobox.module.scss";
 
 // ============================================
@@ -289,6 +290,27 @@ function filterStaticChildren(
   };
 }
 
+/**
+ * True when the consumer already supplied a `Combobox.Empty` slot anywhere in
+ * the content. Used to decide whether the built-in "no results" fallback is
+ * needed — without it an unmatched query renders an empty, collapsed popup.
+ */
+function containsEmptySlot(node: React.ReactNode): boolean {
+  let found = false;
+  React.Children.forEach(node, (child) => {
+    if (found || !React.isValidElement(child)) return;
+    if (child.type === ComboboxEmpty) {
+      found = true;
+      return;
+    }
+    const props = child.props as { children?: React.ReactNode };
+    if (props.children !== undefined && containsEmptySlot(props.children)) {
+      found = true;
+    }
+  });
+  return found;
+}
+
 // ============================================
 // Components
 // ============================================
@@ -532,15 +554,13 @@ function ComboboxInput({
   ...htmlProps
 }: ComboboxInputProps) {
   const context = React.useContext(ComboboxContext);
-  const inputSizeClass =
-    context.size === "sm" ? styles.inputSm : context.size === "lg" ? styles.inputLg : undefined;
   const wrapperSizeClass =
     context.size === "sm"
       ? styles.inputWrapperSm
       : context.size === "lg"
         ? styles.inputWrapperLg
         : undefined;
-  const classes = [styles.input, inputSizeClass, className].filter(Boolean).join(" ");
+  const classes = [styles.input, className].filter(Boolean).join(" ");
   const wrapperClasses = [styles.inputWrapper, wrapperSizeClass].filter(Boolean).join(" ");
   const renderTrigger = showTrigger && context.explicitTriggerCount === 0;
   const inputId = context.inputId ?? htmlProps.id;
@@ -612,7 +632,7 @@ function ComboboxTrigger({ children, className, ...htmlProps }: ComboboxTriggerP
 function ComboboxContent({
   children,
   className,
-  sideOffset = 4,
+  sideOffset = POPUP_OFFSET_PX,
   align = "start",
   maxVisibleItems,
   ...htmlProps
@@ -629,11 +649,19 @@ function ComboboxContent({
     () => filterStaticChildren(children, visibleValues),
     [children, visibleValues]
   );
+  // No matches and no author-supplied empty slot would leave a bare, collapsed
+  // popup, so fall back to a readable "no results" row.
+  const popupChildren =
+    filteredContent.visibleItemCount === 0 && !containsEmptySlot(children) ? (
+      <ComboboxEmpty>No results found</ComboboxEmpty>
+    ) : (
+      filteredContent.children
+    );
 
   const popupStyle =
     maxVisibleItems != null
       ? ({
-          "--fui-select-max-items": maxVisibleItems + 0.5,
+          "--fui-popup-viewport-rows": resolvePopupViewportRows(maxVisibleItems),
           ...htmlProps.style,
         } as React.CSSProperties)
       : htmlProps.style;
@@ -648,7 +676,7 @@ function ComboboxContent({
       >
         <BaseCombobox.Popup {...htmlProps} className={popupClasses} style={popupStyle}>
           <ComboboxFilteredItemIndexContext.Provider value={filteredItemIndices}>
-            {filteredContent.children}
+            {popupChildren}
           </ComboboxFilteredItemIndexContext.Provider>
         </BaseCombobox.Popup>
       </BaseCombobox.Positioner>

package/src/components/Command/Command.contract.json

@@ -1,16 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Command",
-  "description": "A searchable command palette for quick actions. Combines an input with a filterable, keyboard-navigable list of actions.",
+  "description": "Filters a list of actions as the user types.",
   "category": "navigation",
-  "tags": [
-    "command",
-    "palette",
-    "search",
-    "spotlight",
-    "quick-actions",
-    "cmdk"
-  ],
+  "tags": ["command", "palette", "search", "spotlight", "quick-actions", "cmdk"],
   "status": "stable",
   "sourcePath": "src/components/Command/index.tsx",
   "exportName": "Command",
@@ -58,23 +51,22 @@
   },
   "usage": {
     "when": [
-      "Quick-access command palettes (Ctrl+K)",
-      "Searchable action menus",
-      "Inline command lists with filtering",
-      "Application-wide search interfaces"
+      "A keyboard shortcut that jumps anywhere",
+      "Action lists too long to scan",
+      "Inline lists that need filtering",
+      "Search across everything the app can do"
     ],
     "whenNot": [
-      "Simple dropdown menus (use Menu)",
-      "Form field selection (use Select or Combobox)",
-      "Static navigation (use Sidebar or Tabs)",
-      "Search with complex result types (build custom)"
+      "A handful of actions (use Menu)",
+      "Picking a value for a form (use Select or Combobox)",
+      "Fixed navigation (use Sidebar or Tabs)"
     ],
     "guidelines": [
-      "Compose inside Dialog for modal command palette usage",
-      "Use Command.Group to organize items by category",
-      "Provide Command.Empty for no-results feedback",
-      "Use keywords prop for items that should match on aliases",
-      "Keep item labels short and action-oriented"
+      "Wrap in Dialog for the summon-anywhere palette",
+      "Group by category once the list gets long",
+      "Always supply Command.Empty",
+      "Add keywords so aliases and synonyms match",
+      "Label rows with a verb"
     ],
     "accessibility": [
       "Uses combobox + listbox ARIA pattern",
@@ -86,22 +78,22 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Inline command list with search",
+      "description": "Search field over a flat list.",
       "code": "<div style={{ maxWidth: '400px', width: '100%' }}>\n  <Command>\n    <Command.Input placeholder=\"Type a command...\" />\n    <Command.List>\n      <Command.Item onItemSelect={() => {}}>Open File</Command.Item>\n      <Command.Item onItemSelect={() => {}}>Save Document</Command.Item>\n      <Command.Item onItemSelect={() => {}}>Print</Command.Item>\n      <Command.Empty>No results found.</Command.Empty>\n    </Command.List>\n  </Command>\n</div>"
     },
     {
       "name": "Dialog Command Palette",
-      "description": "Command palette inside a Dialog",
+      "description": "The same list summoned over the page.",
       "code": "<Dialog>\n  <Dialog.Trigger asChild>\n    <Button variant=\"secondary\">Open Command Palette</Button>\n  </Dialog.Trigger>\n  <Dialog.Content size=\"sm\">\n    <Command>\n      <Command.Input placeholder=\"Search commands...\" />\n      <Command.List>\n        <Command.Group heading=\"Actions\">\n          <Command.Item onItemSelect={() => {}}>New File</Command.Item>\n          <Command.Item onItemSelect={() => {}}>Open Recent</Command.Item>\n        </Command.Group>\n        <Command.Separator />\n        <Command.Group heading=\"Settings\">\n          <Command.Item onItemSelect={() => {}}>Preferences</Command.Item>\n          <Command.Item onItemSelect={() => {}}>Keyboard Shortcuts</Command.Item>\n        </Command.Group>\n        <Command.Empty>No results found.</Command.Empty>\n      </Command.List>\n    </Command>\n  </Dialog.Content>\n</Dialog>"
     },
     {
       "name": "With Groups",
-      "description": "Organized by category groups",
+      "description": "Category labels survive filtering.",
       "code": "<div style={{ maxWidth: '400px', width: '100%' }}>\n  <Command>\n    <Command.Input placeholder=\"Search...\" />\n    <Command.List>\n      <Command.Group heading=\"Suggestions\">\n        <Command.Item onItemSelect={() => {}}>Calendar</Command.Item>\n        <Command.Item onItemSelect={() => {}}>Calculator</Command.Item>\n      </Command.Group>\n      <Command.Separator />\n      <Command.Group heading=\"Settings\">\n        <Command.Item onItemSelect={() => {}}>Profile</Command.Item>\n        <Command.Item onItemSelect={() => {}}>Billing</Command.Item>\n        <Command.Item disabled onItemSelect={() => {}}>\n          Team (coming soon)\n        </Command.Item>\n      </Command.Group>\n      <Command.Empty>No results found.</Command.Empty>\n    </Command.List>\n  </Command>\n</div>"
     },
     {
       "name": "With Icons",
-      "description": "Items with leading icons",
+      "description": "Leading glyphs speed up scanning.",
       "code": "<div style={{ maxWidth: '400px', width: '100%' }}>\n  <Command>\n    <Command.Input placeholder=\"What do you need?\" />\n    <Command.List>\n      <Command.Item onItemSelect={() => {}}>\n        <span style={{ marginRight: '0.5rem', fontSize: '1rem' }}>+</span> New Document\n      </Command.Item>\n      <Command.Item onItemSelect={() => {}}>\n        <span style={{ marginRight: '0.5rem', fontSize: '1rem' }}>{'>'}</span> Open Folder\n      </Command.Item>\n      <Command.Item onItemSelect={() => {}}>\n        <span style={{ marginRight: '0.5rem', fontSize: '1rem' }}>?</span> Search\n      </Command.Item>\n      <Command.Empty>No results found.</Command.Empty>\n    </Command.List>\n  </Command>\n</div>"
     }
   ],
@@ -132,26 +124,12 @@
       "Command.Item keywords: string[] - extra filter terms",
       "Command.Item onItemSelect: (value, event) => void - selection handler"
     ],
-    "a11yRules": [
-      "A11Y_COMBOBOX_ROLE",
-      "A11Y_LISTBOX_ROLE",
-      "A11Y_ACTIVE_DESCENDANT"
-    ]
+    "a11yRules": ["A11Y_COMBOBOX_ROLE", "A11Y_LISTBOX_ROLE", "A11Y_ACTIVE_DESCENDANT"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Input",
-      "List",
-      "Item",
-      "Group",
-      "Empty",
-      "Separator"
-    ],
-    "requiredChildren": [
-      "Input",
-      "List"
-    ],
+    "subComponents": ["Input", "List", "Item", "Group", "Empty", "Separator"],
+    "requiredChildren": ["Input", "List"],
     "commonPatterns": [
       "<Dialog><Dialog.Trigger><Button>Open Palette</Button></Dialog.Trigger><Dialog.Content size=\"sm\"><Command><Command.Input placeholder=\"Search...\" /><Command.List><Command.Group heading=\"Actions\"><Command.Item onItemSelect={() => {}}>Action 1</Command.Item></Command.Group><Command.Empty>No results.</Command.Empty></Command.List></Command></Dialog.Content></Dialog>"
     ]

package/src/components/Command/Command.module.scss

@@ -1,55 +1,48 @@
-@use '../../tokens/variables' as *;
-@use '../../tokens/mixins' as *;
-
-// ============================================
-// Command container
-// ============================================
+@use "../../tokens/variables" as *;
+@use "../../recipes/action" as action;
+@use "../../recipes/field" as field;
+@use "../../recipes/popup" as popup;
+@use "../../recipes/typography" as typography;
 
 .command {
-  @include surface-elevated;
+  @include popup.container;
 
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
 }
 
-// ============================================
-// Input area
-// ============================================
-
 .inputWrapper {
-  @include field-shell;
+  @include field.size("md");
+  @include field.shell;
 
   display: flex;
   align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
-  padding: 0 var(--fui-space-2, $fui-space-2);
-  margin: var(--fui-space-2, $fui-space-2);
-  height: var(--fui-input-height, $fui-input-height);
+  gap: var(--fui-popup-row-content-gap);
+  margin-block-end: var(--fui-popup-container-inset);
 
   &:focus-within {
-    @include field-shell-focus;
+    @include field.focus-state;
   }
 
   svg {
-    flex-shrink: 0;
-    width: 1rem;
-    height: 1rem;
+    inline-size: action.icon-size("md");
+    block-size: action.icon-size("md");
+    flex: 0 0 auto;
     color: var(--fui-text-secondary, $fui-text-secondary);
   }
 }
 
 .input {
-  @include text-base;
-
   flex: 1;
+  min-inline-size: 0;
+  padding: 0;
   border: none;
-  background: transparent;
   outline: none;
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   color: var(--fui-text-primary, $fui-text-primary);
-  padding: 0;
+  background: transparent;
+  font: inherit;
+  letter-spacing: inherit;
 
   &::placeholder {
     color: var(--fui-text-tertiary, $fui-text-tertiary);
@@ -62,91 +55,68 @@
   }
 }
 
-// ============================================
-// List area
-// ============================================
-
 .list {
-  overflow-y: auto;
-  max-height: 300px; // scroll viewport cap (no spacing token at this size)
-  padding: var(--fui-space-1, $fui-space-1);
+  @include popup.viewport;
 }
 
-// ============================================
-// Item
-// ============================================
-
 .item {
-  @include popup-item;
+  @include popup.row;
 
-  // Command items pair an icon with a label; a slightly wider gap than the default
-  // popup-item reads better here.
-  gap: var(--fui-space-2, $fui-space-2);
-  text-align: left;
+  text-align: start;
 
   &:hover {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
+  }
+
+  > svg {
+    inline-size: var(--fui-popup-indicator-box);
+    block-size: var(--fui-popup-indicator-box);
+    flex: 0 0 auto;
   }
 }
 
-// Keyboard-active row (cmdk-style roving selection) uses the same neutral highlight.
 .itemActive {
-  @include popup-item-highlight;
+  @include popup.highlight-state;
 }
 
 .itemDisabled {
-  @include popup-item-disabled;
+  @include popup.disabled-state;
 }
 
-// ============================================
-// Group
-// ============================================
+.group:not(:first-child)::before {
+  @include popup.group-separator;
 
-.group {
-  &:not(:first-child) {
-    margin-top: var(--fui-space-1, $fui-space-1);
-  }
+  content: "";
+  display: block;
 }
 
 .groupHeading {
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  @include popup.group-label;
 }
 
-// ============================================
-// Empty state
-// ============================================
-
 .empty {
-  padding: var(--fui-space-3, $fui-space-3);
-  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  @include typography.role("body-compact");
+
+  padding-block: var(--fui-popup-row-block-inset);
+  padding-inline: var(--fui-popup-row-inline-inset);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-align: center;
 }
 
-// ============================================
-// Separator
-// ============================================
-
 .separator {
-  height: 1px;
-  margin: var(--fui-space-1, $fui-space-1) 0;
-  background-color: var(--fui-border, $fui-border);
+  @include popup.group-separator;
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
 @media (prefers-contrast: more) {
   .command {
-    border-width: 2px;
+    border-color: var(--fui-text-primary, $fui-text-primary);
+    outline: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
+    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
   }
 
   .itemActive {
-    outline: 2px solid var(--fui-color-accent, $fui-color-accent);
-    outline-offset: -2px;
+    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid
+      var(--fui-color-accent, $fui-color-accent);
+    outline-offset: calc(-1 * var(--fui-focus-ring-width, $fui-focus-ring-width));
   }
 }