@fragments-sdk/ui 0.18.0 → 0.19.0

package/src/components/Input/Input.module.scss

@@ -88,8 +88,11 @@
   align-items: center;
 
   // Auto-detect shortcut kbd via :has() — replaces JS class toggle: `shortcut && styles.hasShortcut`
+  // Optical alignment: nudge left padding slightly to center the placeholder
+  // in the visible area between the left edge and the kbd badge.
   &:has(> .shortcut) .input {
     padding-right: var(--fui-space-12, 3rem);
+    padding-left: var(--fui-space-3, $fui-space-3);
   }
 }
 
@@ -101,6 +104,16 @@
   padding: 0 var(--fui-space-3, $fui-space-3);
   border-radius: var(--fui-radius-md, $fui-radius-md);
 
+  // Optical alignment: icons have built-in whitespace, so reduce padding
+  // on the side with an adornment to keep the content optically centered.
+  &:has(> .adornment:first-child) {
+    padding-left: var(--fui-space-2, $fui-space-2);
+  }
+
+  &:has(> .adornment:last-of-type:not(:first-child)) {
+    padding-right: var(--fui-space-2, $fui-space-2);
+  }
+
   &:focus-within {
     @include field-shell-focus;
   }
@@ -165,8 +178,8 @@
   align-items: center;
   justify-content: center;
   gap: calc(var(--fui-space-px, $fui-space-px) * 2);
-  min-width: 1.25rem;
-  height: 1.25rem;
+  min-width: 24px;
+  height: 24px;
   padding: 0 var(--fui-space-1, $fui-space-1);
   font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
   font-family: var(--fui-font-sans, $fui-font-sans);
@@ -175,11 +188,8 @@
   letter-spacing: 0.02em;
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   background: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border-default, $fui-border-default);
-  border-bottom-width: 2px;
+  border: 1px solid var(--fui-field-border, $fui-border);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
-  box-shadow:
-    inset 0 0.5px 0 color-mix(in srgb, white 6%, transparent);
   pointer-events: none;
   white-space: nowrap;
   user-select: none;

package/src/components/Markdown/Markdown.module.scss

@@ -7,9 +7,6 @@
 
 .markdown {
   @include text-base;
-  font-size: 1.25rem;
-  line-height: 1.7;
-  letter-spacing: -0.01em;
   word-wrap: break-word;
   color: var(--fui-text-secondary, $fui-text-secondary);
 

package/src/components/Markdown/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './Markdown.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Menu/Menu.module.scss

@@ -36,6 +36,12 @@
   }
 }
 
+// Viewport — enables content transition animations
+.viewport {
+  overflow: hidden;
+  transition: height var(--fui-transition-fast, $fui-transition-fast);
+}
+
 // Menu item (shared base)
 .item {
   @include popup-item;

package/src/components/Menu/index.tsx

@@ -191,7 +191,9 @@ function MenuContent({
         className={styles.positioner}
       >
         <BaseMenu.Popup {...htmlProps} className={popupClasses}>
-          {children}
+          <BaseMenu.Viewport className={styles.viewport}>
+            {children}
+          </BaseMenu.Viewport>
         </BaseMenu.Popup>
       </BaseMenu.Positioner>
     </BaseMenu.Portal>

package/src/components/Message/Message.module.scss

@@ -36,7 +36,7 @@
 
   .content {
     background-color: var(--fui-color-accent, $fui-color-accent);
-    color: var(--fui-text-inverse, $fui-text-inverse);
+    color: var(--fui-color-on-accent, $fui-color-on-accent);
   }
 }
 
@@ -99,7 +99,7 @@
 
 .avatarUser {
   background-color: var(--fui-color-accent, $fui-color-accent);
-  color: var(--fui-text-inverse, $fui-text-inverse);
+  color: var(--fui-color-on-accent, $fui-color-on-accent);
 }
 
 .avatarAssistant {

package/src/components/NavigationMenu/NavigationMenu.module.scss

@@ -56,7 +56,7 @@
   display: flex;
   align-items: center;
   gap: var(--fui-space-1, $fui-space-1);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   white-space: nowrap;
@@ -91,10 +91,14 @@
 // ============================================
 
 .content {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
   position: absolute;
   left: 0;
   top: 0;
-  width: auto;
+  width: 100%;
+  min-width: 180px;
 
   // Motion direction for directional slide
   &[data-motion='from-start'] {
@@ -160,22 +164,17 @@
 // ============================================
 
 .link {
-  @include text-base;
+  @include popup-item;
 
-  display: flex;
-  align-items: center;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
-  border-radius: var(--fui-radius-md, $fui-radius-md);
-  color: var(--fui-text-secondary, $fui-text-secondary);
+  color: var(--fui-text-primary, $fui-text-primary);
   text-decoration: none;
   white-space: nowrap;
-  min-height: var(--fui-button-height-md, $fui-button-height-md);
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   transition: background-color var(--fui-transition-fast, $fui-transition-fast),
     color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
-    color: var(--fui-text-primary, $fui-text-primary);
   }
 
   &:focus-visible {
@@ -184,21 +183,15 @@
 }
 
 .linkActive {
-  color: var(--fui-text-primary, $fui-text-primary);
+  background-color: var(--fui-bg-hover, $fui-bg-hover);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-
-  &:hover {
-    background-color: var(--fui-bg-secondary, $fui-bg-secondary);
-    color: var(--fui-text-primary, $fui-text-primary);
-  }
 }
 
 // Structured link (title + description + icon) inside content panels
 .linkStructured {
   display: flex;
-  gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  gap: var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-2, $fui-space-2);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   white-space: normal;
   min-height: auto;
@@ -273,10 +266,12 @@
   @include surface-elevated;
 
   position: absolute;
-  top: 100%;
+  top: calc(100% + var(--fui-space-1, #{$fui-space-1}));
   left: var(--fui-navmenu-viewport-left, 0);
   overflow: hidden;
-  box-shadow: var(--fui-shadow-lg, $fui-shadow-lg);
+  padding: var(--fui-space-1, $fui-space-1);
+  border-color: var(--fui-border-strong, $fui-border-strong);
+  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
   z-index: calc(var(--fui-header-z-index, $fui-header-z-index) + 1);
 
   width: var(--fui-navmenu-viewport-width);
@@ -433,7 +428,7 @@
 .drawerSectionLabel {
   @include section-label-text;
 
-  padding: var(--fui-space-3, $fui-space-3) var(--fui-space-4, $fui-space-4)
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-4, $fui-space-4)
     var(--fui-space-1, $fui-space-1);
 }
 
@@ -467,7 +462,7 @@
 }
 
 .drawerCollapsibleContent {
-  padding-left: var(--fui-space-3, $fui-space-3);
+  padding-left: var(--fui-space-2, $fui-space-2);
 }
 
 // ============================================

package/src/components/Pagination/Pagination.module.scss

@@ -57,7 +57,7 @@
 // Active page
 .itemActive {
   background-color: var(--fui-color-accent, $fui-color-accent);
-  color: var(--fui-text-inverse, $fui-text-inverse);
+  color: var(--fui-color-on-accent, $fui-color-on-accent);
 
   &:hover:not(:disabled) {
     background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);

package/src/components/Prompt/Prompt.module.scss

@@ -11,13 +11,77 @@
   flex-direction: column;
   border-radius: var(--fui-radius-xl, $fui-radius-xl);
   overflow: hidden;
+  position: relative;
+
+  // Beam border — rotating conic gradient clipped to a 1px border
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+
+  // Gradient layer (behind everything)
+  &::before {
+    inset: -1px;
+    z-index: 0;
+    background: conic-gradient(
+      from var(--beam-angle, 0deg) at 50% 50%,
+      transparent 0%,
+      transparent 25%,
+      var(--fui-color-accent, $fui-color-accent) 45%,
+      transparent 50%,
+      transparent 55%,
+      color-mix(in srgb, var(--fui-color-accent, $fui-color-accent) 40%, transparent) 70%,
+      transparent 75%,
+      transparent 100%
+    );
+    animation: beam-rotate 4s linear infinite;
+    opacity: 0.6;
+    transition: opacity 300ms ease;
+  }
+
+  // Mask layer — covers the interior, leaving only the 1px border visible
+  &::after {
+    inset: 1px;
+    z-index: 1;
+    background: var(--fui-bg-elevated, $fui-bg-elevated);
+  }
+
+  // Content must sit above the mask
+  > * {
+    position: relative;
+    z-index: 2;
+  }
+
+  &:focus-within::before {
+    opacity: 1;
+  }
 
   &[data-disabled] {
     opacity: 0.5;
     pointer-events: none;
+
+    &::before {
+      animation-play-state: paused;
+      opacity: 0.2;
+    }
   }
 }
 
+@keyframes beam-rotate {
+  from { --beam-angle: 0deg; }
+  to { --beam-angle: 360deg; }
+}
+
+@property --beam-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
 // Fixed variant - for viewport-fixed prompts (centered to page)
 .fixed {
   position: fixed;
@@ -71,9 +135,11 @@
     color: var(--fui-text-tertiary, $fui-text-tertiary);
   }
 
+  // Focus is shown on the prompt container via :focus-within instead
+  &:focus,
   &:focus-visible {
-    @include focus-ring;
-    border-radius: var(--fui-radius-md, $fui-radius-md);
+    outline: none;
+    box-shadow: none;
   }
 
   &:disabled {
@@ -81,6 +147,52 @@
   }
 }
 
+// ============================================
+// Tabs (floating above the prompt body)
+// ============================================
+
+.tabs {
+  display: flex;
+  justify-content: center;
+  margin-bottom: calc(-1 * var(--fui-space-1, $fui-space-1)); // overlap the prompt border
+  position: relative;
+  z-index: 1;
+}
+
+.tabsInner {
+  display: inline-flex;
+  gap: 1px;
+  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
+  border-radius: var(--fui-radius-lg, $fui-radius-lg) var(--fui-radius-lg, $fui-radius-lg) 0 0;
+  padding: 3px 3px 0 3px;
+  border: 1px solid var(--fui-border, $fui-border);
+  border-bottom: none;
+}
+
+.tabButton {
+  @include button-reset;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
+  border-radius: var(--fui-radius-md, $fui-radius-md) var(--fui-radius-md, $fui-radius-md) 0 0;
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  transition: all 120ms ease;
+  white-space: nowrap;
+
+  &:hover {
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+}
+
+.tabButtonActive {
+  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  color: var(--fui-text-primary, $fui-text-primary);
+}
+
 // ============================================
 // Toolbar
 // ============================================
@@ -102,7 +214,9 @@
 .actions {
   display: flex;
   align-items: center;
+  align-self: flex-end;
   gap: var(--fui-space-1, $fui-space-1);
+  padding: 0 var(--fui-space-2, $fui-space-2) var(--fui-space-2, $fui-space-2) 0;
 }
 
 .info {
@@ -201,7 +315,7 @@
   height: 2rem;
   border-radius: var(--fui-radius-full, $fui-radius-full);
   background-color: var(--fui-color-accent, $fui-color-accent);
-  color: var(--fui-text-inverse, $fui-text-inverse);
+  color: var(--fui-color-on-accent, $fui-color-on-accent);
 
   &:hover:not(:disabled) {
     background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);

package/src/components/Prompt/index.tsx

@@ -55,6 +55,20 @@ export interface PromptToolbarProps {
   className?: string;
 }
 
+export interface PromptTabsProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface PromptTabProps {
+  children: React.ReactNode;
+  /** Whether this tab is currently active */
+  active?: boolean;
+  /** Click handler */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+}
+
 export interface PromptActionsProps {
   children?: React.ReactNode;
   className?: string;
@@ -330,6 +344,28 @@ function PromptToolbar({ children, className }: PromptToolbarProps) {
   return <div className={classes}>{children}</div>;
 }
 
+function PromptTabs({ children, className }: PromptTabsProps) {
+  const classes = [styles.tabs, className].filter(Boolean).join(' ');
+  return (
+    <div className={classes}>
+      <div className={styles.tabsInner}>{children}</div>
+    </div>
+  );
+}
+
+function PromptTab({ children, active = false, onClick, className }: PromptTabProps) {
+  const classes = [
+    styles.tabButton,
+    active && styles.tabButtonActive,
+    className,
+  ].filter(Boolean).join(' ');
+  return (
+    <button type="button" className={classes} onClick={onClick} aria-pressed={active}>
+      {children}
+    </button>
+  );
+}
+
 function PromptActions({ children, className }: PromptActionsProps) {
   if (!children) return null;
   const classes = [styles.actions, className].filter(Boolean).join(' ');
@@ -444,6 +480,8 @@ function PromptSubmit({
 export const Prompt = Object.assign(PromptRoot, {
   Textarea: PromptTextarea,
   Toolbar: PromptToolbar,
+  Tabs: PromptTabs,
+  Tab: PromptTab,
   Actions: PromptActions,
   Info: PromptInfo,
   ActionButton: PromptActionButton,
@@ -456,6 +494,8 @@ export {
   PromptRoot,
   PromptTextarea,
   PromptToolbar,
+  PromptTabs,
+  PromptTab,
   PromptActions,
   PromptInfo,
   PromptActionButton,

package/src/components/Select/index.tsx

@@ -221,40 +221,35 @@ const SelectRoot = React.forwardRef<HTMLDivElement, SelectProps>(function Select
     [placeholder, value, internalValue, items, registerItem, unregisterItem, size]
   );
 
-  const { labelId, helperId, errorId, hasError, errorMessage } = useFormFieldIds('select', { label, helperText, error });
+  const { helperId, errorId, hasError, errorMessage } = useFormFieldIds('select', { label, helperText, error });
 
   const wrapperClasses = [styles.wrapper, className].filter(Boolean).join(' ');
   const helperClasses = [styles.helper, hasError && styles.helperError]
     .filter(Boolean)
     .join(' ');
 
-  const selectContent = (
-    <BaseSelect.Root
-      value={value}
-      defaultValue={defaultValue}
-      onValueChange={handleValueChange}
-      open={open}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
-      disabled={disabled}
-      required={required}
-      name={name}
-      aria-labelledby={labelId}
-      aria-describedby={mergeAriaIds(errorId, helperId)}
-    >
-      {children ?? options?.map((option) => (
-        <SelectItem key={option.value} value={option.value} disabled={option.disabled}>
-          {option.label}
-        </SelectItem>
-      ))}
-    </BaseSelect.Root>
-  );
-
   return (
     <SelectContext.Provider value={contextValue}>
       <div ref={ref} className={wrapperClasses}>
-        {label && <span id={labelId} className={styles.label}>{label}</span>}
-        {selectContent}
+        <BaseSelect.Root
+          value={value}
+          defaultValue={defaultValue}
+          onValueChange={handleValueChange}
+          open={open}
+          defaultOpen={defaultOpen}
+          onOpenChange={onOpenChange}
+          disabled={disabled}
+          required={required}
+          name={name}
+          aria-describedby={mergeAriaIds(errorId, helperId)}
+        >
+          {label && <BaseSelect.Label className={styles.label}>{label}</BaseSelect.Label>}
+          {children ?? options?.map((option) => (
+            <SelectItem key={option.value} value={option.value} disabled={option.disabled}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </BaseSelect.Root>
         {helperText && (
           <span id={helperId} className={helperClasses}>{helperText}</span>
         )}

package/src/components/Sidebar/Sidebar.module.scss

@@ -318,7 +318,7 @@
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   // Use accent-hover for WCAG AA contrast (4.5:1 minimum)
   background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-  color: var(--fui-text-inverse, $fui-text-inverse);
+  color: var(--fui-color-on-accent, $fui-color-on-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   min-width: $fui-icon-lg;
   line-height: 1;

package/src/components/Slider/index.tsx

@@ -111,16 +111,6 @@ const SliderRoot = React.forwardRef<HTMLDivElement, SliderProps>(
 
     return (
       <Field.Root {...htmlProps} disabled={disabled} invalid={error} className={[styles.wrapper, className].filter(Boolean).join(' ')}>
-        {(label || showValue) && (
-          <div className={styles.header}>
-            {label && <Field.Label className={styles.label}>{label}</Field.Label>}
-            {showValue && (
-              <span className={styles.value}>
-                {displayValue}{valueSuffix}
-              </span>
-            )}
-          </div>
-        )}
         <BaseSlider.Root
           ref={ref}
           value={value !== undefined ? [value] : undefined}
@@ -138,6 +128,16 @@ const SliderRoot = React.forwardRef<HTMLDivElement, SliderProps>(
           className={styles.root}
           onPointerDownCapture={handleDragStart}
         >
+          {(label || showValue) && (
+            <div className={styles.header}>
+              {label && <BaseSlider.Label className={styles.label}>{label}</BaseSlider.Label>}
+              {showValue && (
+                <span className={styles.value}>
+                  {displayValue}{valueSuffix}
+                </span>
+              )}
+            </div>
+          )}
           <BaseSlider.Control className={styles.control}>
             <BaseSlider.Track className={styles.track}>
               <BaseSlider.Indicator className={styles.indicator} />

package/src/components/Table/index.tsx

@@ -1,8 +1,6 @@
 'use client';
 
 import * as React from 'react';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 import styles from './Table.module.scss';
 
 // ============================================

package/src/components/TableOfContents/TableOfContents.module.scss

@@ -1,4 +1,5 @@
 @use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
 
 // Root nav wrapper
 .root {
@@ -10,7 +11,7 @@
 // Title text ("On This Page")
 .title {
   margin: 0;
-  padding: 0 0 var(--fui-space-2, $fui-space-2) 0;
+  padding: 0 var(--fui-space-2, $fui-space-2) var(--fui-space-2, $fui-space-2);
 }
 
 // List container
@@ -20,6 +21,7 @@
   list-style: none;
   margin: 0;
   padding: 0;
+  gap: var(--fui-space-0-5, $fui-space-0-5);
 }
 
 // Individual item
@@ -27,40 +29,42 @@
   display: block;
 }
 
-// Link styling shared by all items
+// Link styling — matches Sidebar.Item pattern
 .link {
-  display: block;
-  padding: var(--fui-space-1, $fui-space-1) 0 var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
-  border-left: 2px solid transparent;
+  display: flex;
+  align-items: center;
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   line-height: var(--fui-line-height-normal, $fui-line-height-normal);
   text-decoration: none;
-  transition: color var(--fui-transition-fast, $fui-transition-fast),
-    border-color var(--fui-transition-fast, $fui-transition-fast);
+  transition: background-color var(--fui-transition-fast, $fui-transition-fast),
+    color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
     color: var(--fui-text-primary, $fui-text-primary);
   }
 
   &:focus-visible {
-    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid var(--fui-focus-ring-color, $fui-focus-ring-color);
-    outline-offset: var(--fui-focus-ring-offset, $fui-focus-ring-offset);
-    border-radius: var(--fui-radius-sm, $fui-radius-sm);
+    @include focus-ring;
   }
 }
 
 // Indent for depth > 2 (h3s)
 .indent {
-  padding-left: var(--fui-space-6, $fui-space-6);
+  padding-left: var(--fui-space-5, $fui-space-5);
 }
 
-// Active state
+// Active state — matches Sidebar.Item active pattern
 .active {
-  border-left-color: var(--fui-color-accent, $fui-color-accent);
-  color: var(--fui-color-accent, $fui-color-accent);
+  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  color: var(--fui-text-primary, $fui-text-primary);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
 
   &:hover {
-    color: var(--fui-color-accent, $fui-color-accent);
+    background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+    color: var(--fui-text-primary, $fui-text-primary);
   }
 }

package/src/components/Toggle/Toggle.module.scss

@@ -62,7 +62,7 @@
   width: var(--fui-toggle-width-sm, $fui-toggle-width-sm);
   height: var(--fui-toggle-height-sm, $fui-toggle-height-sm);
   --_toggle-thumb-size: calc(var(--fui-toggle-height-sm, #{$fui-toggle-height-sm}) - 4px);
-  --_toggle-inset: 2px;
+  --_toggle-inset: 1px;
   --_toggle-translate: calc(
     var(--fui-toggle-width-sm, #{$fui-toggle-width-sm}) -
     var(--_toggle-thumb-size) -
@@ -75,7 +75,7 @@
   width: var(--fui-toggle-width-lg, $fui-toggle-width-lg);
   height: var(--fui-toggle-height-lg, $fui-toggle-height-lg);
   --_toggle-thumb-size: calc(var(--fui-toggle-height-lg, #{$fui-toggle-height-lg}) - 4px);
-  --_toggle-inset: 2px;
+  --_toggle-inset: 1px;
   --_toggle-translate: calc(
     var(--fui-toggle-width-lg, #{$fui-toggle-width-lg}) -
     var(--_toggle-thumb-size) -
@@ -88,7 +88,7 @@
   width: var(--fui-toggle-width-md, $fui-toggle-width-md);
   height: var(--fui-toggle-height-md, $fui-toggle-height-md);
   --_toggle-thumb-size: calc(var(--fui-toggle-height-md, #{$fui-toggle-height-md}) - 4px);
-  --_toggle-inset: 2px;
+  --_toggle-inset: 1px;
   --_toggle-translate: calc(
     var(--fui-toggle-width-md, #{$fui-toggle-width-md}) -
     var(--_toggle-thumb-size) -