@fragments-sdk/ui 0.8.2 → 0.8.3

package/src/components/CodeBlock/index.tsx

@@ -56,6 +56,8 @@ export type CodeBlockTheme =
   | 'min-dark'
   | 'min-light';
 
+export type CodeBlockCopyPlacement = 'auto' | 'header' | 'overlay';
+
 export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Code string to display */
   code: string;
@@ -95,6 +97,8 @@ export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   compact?: boolean;
   /** Show a persistent copy button (always visible, uses Button component) */
   persistentCopy?: boolean;
+  /** Placement of copy button when not using persistent copy */
+  copyPlacement?: CodeBlockCopyPlacement;
 }
 
 function CopyIcon({ className }: { className?: string }) {
@@ -211,6 +215,198 @@ function dedent(str: string): string {
     .join('\n');
 }
 
+/**
+ * Normalize indentation while handling JSX where first line is already at column 0.
+ */
+function normalizeIndentation(str: string): string {
+  const lines = str.split('\n');
+  if (lines.length <= 1) return str;
+
+  let minIndent = Infinity;
+  const firstLineIndent = lines[0].match(/^(\s*)/)?.[1].length ?? 0;
+
+  for (let i = 1; i < lines.length; i += 1) {
+    const line = lines[i];
+    if (line.trim().length === 0) continue;
+    const indent = line.match(/^(\s*)/)?.[1].length ?? 0;
+    minIndent = Math.min(minIndent, indent);
+  }
+
+  if (firstLineIndent > 0) {
+    minIndent = Math.min(minIndent, firstLineIndent);
+  }
+
+  if (minIndent === Infinity || minIndent === 0) return str;
+
+  return lines
+    .map((line) => line.slice(Math.min(minIndent, line.match(/^(\s*)/)?.[1].length ?? 0)))
+    .join('\n');
+}
+
+function trimTrailingWhitespace(str: string): string {
+  return str
+    .split('\n')
+    .map((line) => line.replace(/[ \t]+$/g, ''))
+    .join('\n');
+}
+
+function findTagEnd(line: string): number {
+  let quote: '"' | '\'' | '`' | null = null;
+  let escaped = false;
+  let braceDepth = 0;
+  let bracketDepth = 0;
+  let parenDepth = 0;
+
+  for (let i = 1; i < line.length; i += 1) {
+    const char = line[i];
+
+    if (quote) {
+      if (char === '\\' && !escaped) {
+        escaped = true;
+        continue;
+      }
+      if (char === quote && !escaped) {
+        quote = null;
+      }
+      escaped = false;
+      continue;
+    }
+
+    if (char === '"' || char === '\'' || char === '`') {
+      quote = char;
+      continue;
+    }
+
+    if (char === '{') braceDepth += 1;
+    else if (char === '}') braceDepth = Math.max(0, braceDepth - 1);
+    else if (char === '[') bracketDepth += 1;
+    else if (char === ']') bracketDepth = Math.max(0, bracketDepth - 1);
+    else if (char === '(') parenDepth += 1;
+    else if (char === ')') parenDepth = Math.max(0, parenDepth - 1);
+    else if (char === '>' && braceDepth === 0 && bracketDepth === 0 && parenDepth === 0) {
+      return i;
+    }
+  }
+
+  return -1;
+}
+
+function splitJsxAttributes(attrs: string): string[] {
+  const parts: string[] = [];
+  let current = '';
+  let quote: '"' | '\'' | '`' | null = null;
+  let escaped = false;
+  let braceDepth = 0;
+  let bracketDepth = 0;
+  let parenDepth = 0;
+
+  for (const char of attrs) {
+    if (quote) {
+      current += char;
+      if (char === '\\' && !escaped) {
+        escaped = true;
+        continue;
+      }
+      if (char === quote && !escaped) {
+        quote = null;
+      }
+      escaped = false;
+      continue;
+    }
+
+    if (char === '"' || char === '\'' || char === '`') {
+      quote = char;
+      current += char;
+      continue;
+    }
+
+    if (char === '{') braceDepth += 1;
+    else if (char === '}') braceDepth = Math.max(0, braceDepth - 1);
+    else if (char === '[') bracketDepth += 1;
+    else if (char === ']') bracketDepth = Math.max(0, bracketDepth - 1);
+    else if (char === '(') parenDepth += 1;
+    else if (char === ')') parenDepth = Math.max(0, parenDepth - 1);
+
+    if (/\s/.test(char) && braceDepth === 0 && bracketDepth === 0 && parenDepth === 0) {
+      if (current.trim().length > 0) {
+        parts.push(current.trim());
+        current = '';
+      }
+      continue;
+    }
+
+    current += char;
+  }
+
+  if (current.trim().length > 0) {
+    parts.push(current.trim());
+  }
+
+  return parts;
+}
+
+function formatLongJsxTagLine(line: string): string {
+  const maxInlineLength = 110;
+  if (line.length <= maxInlineLength) return line;
+
+  const indent = line.match(/^(\s*)/)?.[1] ?? '';
+  const trimmed = line.trimStart();
+
+  if (
+    !trimmed.startsWith('<')
+    || trimmed.startsWith('</')
+    || trimmed.startsWith('<!')
+    || trimmed.startsWith('<?')
+  ) {
+    return line;
+  }
+
+  const tagEnd = findTagEnd(trimmed);
+  if (tagEnd === -1) return line;
+  if (trimmed.slice(tagEnd + 1).trim().length > 0) return line;
+
+  const rawTagBody = trimmed.slice(1, tagEnd).trim();
+  const isSelfClosing = rawTagBody.endsWith('/');
+  const tagBody = isSelfClosing ? rawTagBody.slice(0, -1).trimEnd() : rawTagBody;
+  const firstSpace = tagBody.search(/\s/);
+  if (firstSpace === -1) return line;
+
+  const tagName = tagBody.slice(0, firstSpace);
+  if (!/^[A-Za-z][\w.:-]*$/.test(tagName)) return line;
+
+  const attrsSource = tagBody.slice(firstSpace).trim();
+  if (!attrsSource.includes('=') && !attrsSource.includes('{...')) return line;
+
+  const attrs = splitJsxAttributes(attrsSource);
+  if (attrs.length === 0) return line;
+
+  const attrIndent = `${indent}  `;
+  const close = isSelfClosing ? '/>' : '>';
+
+  return [
+    `${indent}<${tagName}`,
+    ...attrs.map((attr) => `${attrIndent}${attr}`),
+    `${indent}${close}`,
+  ].join('\n');
+}
+
+function formatLongJsxTags(code: string): string {
+  return code
+    .split('\n')
+    .flatMap((line) => formatLongJsxTagLine(line).split('\n'))
+    .join('\n');
+}
+
+function normalizeCode(code: string): string {
+  const trimmed = code.trim();
+  if (trimmed.length === 0) return '';
+
+  const normalized = normalizeIndentation(trimmed);
+  const dedented = dedent(normalized);
+  const withoutTrailingWhitespace = trimTrailingWhitespace(dedented);
+  return formatLongJsxTags(withoutTrailingWhitespace);
+}
+
 /**
  * Parse line specification into a Set of line numbers.
  * Supports: [1, 3, '5-7'] -> Set {1, 3, 5, 6, 7}
@@ -326,6 +522,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
       collapsedLines = 5,
       compact = false,
       persistentCopy = false,
+      copyPlacement = 'auto',
       className,
       ...htmlProps
     },
@@ -336,7 +533,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
     const [isLoading, setIsLoading] = useState(true);
     const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
 
-    const trimmedCode = dedent(code.trim());
+    const trimmedCode = useMemo(() => normalizeCode(code), [code]);
     const codeLines = trimmedCode.split('\n');
     const totalLines = codeLines.length;
     const shouldShowCollapse = collapsible && totalLines > collapsedLines;
@@ -350,6 +547,12 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
     const addedSet = useMemo(() => parseLineSpec(addedLines), [addedLines]);
     const removedSet = useMemo(() => parseLineSpec(removedLines), [removedLines]);
     const hasDiff = addedSet.size > 0 || removedSet.size > 0;
+    const resolvedCopyPlacement = copyPlacement === 'auto'
+      ? (filename ? 'header' : 'overlay')
+      : copyPlacement;
+    const shouldShowHeaderCopy = showCopy && !persistentCopy && resolvedCopyPlacement === 'header';
+    const shouldShowOverlayCopy = showCopy && !persistentCopy && resolvedCopyPlacement === 'overlay';
+    const shouldRenderHeader = Boolean(filename) || shouldShowHeaderCopy;
 
     // Apply syntax highlighting
     useEffect(() => {
@@ -422,6 +625,7 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
     const wrapperClasses = [
       styles.wrapper,
       persistentCopy && styles.persistentCopyWrapper,
+      shouldShowOverlayCopy && styles.withCopyOverlay,
     ].filter(Boolean).join(' ');
 
     const codeContainerStyle: React.CSSProperties = maxHeight
@@ -432,10 +636,10 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
       <div ref={ref} {...htmlProps} className={classNames}>
         {title && <div className={styles.title}>{title}</div>}
         <div className={wrapperClasses}>
-          {(filename || (showCopy && !persistentCopy)) && (
+          {shouldRenderHeader && (
             <div className={styles.header}>
               <span className={styles.filename}>{filename ?? ''}</span>
-              {showCopy && !persistentCopy && (
+              {shouldShowHeaderCopy && (
                 <button
                   type="button"
                   onClick={handleCopy}
@@ -447,6 +651,16 @@ const CodeBlockBase = React.forwardRef<HTMLDivElement, CodeBlockProps>(
               )}
             </div>
           )}
+          {shouldShowOverlayCopy && (
+            <button
+              type="button"
+              onClick={handleCopy}
+              className={`${styles.copyButton} ${styles.copyOverlay} ${copied ? styles.copied : ''}`}
+              aria-label={copied ? 'Copied!' : 'Copy code'}
+            >
+              {copied ? <CheckIcon className={styles.icon} /> : <CopyIcon className={styles.icon} />}
+            </button>
+          )}
           {isLoading ? (
             <div className={styles.loading} style={codeContainerStyle}>
               <pre>
@@ -520,6 +734,8 @@ export interface TabbedCodeBlockProps {
   defaultTab?: string;
   /** Show copy button */
   showCopy?: boolean;
+  /** Placement of copy button when not using persistent copy */
+  copyPlacement?: CodeBlockCopyPlacement;
   /** Show line numbers */
   showLineNumbers?: boolean;
   /** Syntax highlighting theme (applies to all tabs) */
@@ -538,6 +754,7 @@ function TabbedCodeBlock({
   tabs,
   defaultTab,
   showCopy = true,
+  copyPlacement = 'auto',
   showLineNumbers = false,
   theme,
   tabsVariant = 'pills',
@@ -564,6 +781,7 @@ function TabbedCodeBlock({
               language={tab.language}
               theme={theme}
               showCopy={showCopy}
+              copyPlacement={copyPlacement}
               showLineNumbers={showLineNumbers}
               wordWrap={wordWrap}
               maxHeight={maxHeight}

package/src/components/ColorPicker/ColorPicker.fragment.tsx

@@ -102,7 +102,7 @@ export default defineFragment({
       'input.specialized',
       'theme.customization',
     ],
-    a11yRules: ['A11Y_LABEL_REQUIRED', 'A11Y_FOCUS_VISIBLE'],
+    a11yRules: ['A11Y_LABEL_REQUIRED', 'A11Y_FOCUS_VISIBLE', 'A11Y_TARGET_SIZE_MIN'],
   },
 
   variants: [

package/src/components/ColorPicker/ColorPicker.module.scss

@@ -45,8 +45,9 @@
 .swatch {
   @include button-reset;
   @include interactive-base;
-  width: 40px;
-  height: 36px;
+  @include min-target-size;
+  width: var(--fui-target-size-comfortable, $fui-target-size-comfortable);
+  height: var(--fui-input-height, $fui-input-height);
   border: 1px solid var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   flex-shrink: 0;
@@ -101,15 +102,15 @@
   }
 
   :global(.react-colorful__hue) {
-    height: 12px;
+    height: var(--fui-colorpicker-hue-height, #{$fui-colorpicker-hue-height});
     border-radius: var(--fui-radius-sm, $fui-radius-sm);
   }
 
   :global(.react-colorful__pointer) {
-    width: 16px;
-    height: 16px;
-    border: 2px solid white;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+    width: var(--fui-colorpicker-pointer-size, #{$fui-colorpicker-pointer-size});
+    height: var(--fui-colorpicker-pointer-size, #{$fui-colorpicker-pointer-size});
+    border: $fui-colorpicker-pointer-border solid var(--fui-text-inverse, $fui-text-inverse);
+    box-shadow: var(--fui-shadow-md, $fui-shadow-md);
   }
 }
 

package/src/components/Combobox/Combobox.fragment.tsx

@@ -132,7 +132,7 @@ export default defineFragment({
       'form.multiselect',
       'input.search',
     ],
-    a11yRules: ['A11Y_COMBOBOX_KEYBOARD', 'A11Y_COMBOBOX_LABEL'],
+    a11yRules: ['A11Y_COMBOBOX_KEYBOARD', 'A11Y_COMBOBOX_LABEL', 'A11Y_TARGET_SIZE_MIN'],
   },
 
   ai: {

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

@@ -98,10 +98,8 @@
 // Chip remove button
 .chipRemove {
   @include button-reset;
+  @include touch-target;
 
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;

package/src/components/Field/index.tsx

@@ -87,7 +87,7 @@ function FieldLabel({ children, className }: FieldLabelProps) {
  * Wraps the child with Base UI's Field.Control via the `render` prop,
  * which merges aria attributes and field state onto the child element.
  *
- * Works with Input, Textarea, Checkbox, Toggle, Select, or any element.
+ * Works with Input, Textarea, Checkbox, Switch, Select, or any element.
  */
 function FieldControl({ children, className }: FieldControlProps) {
   const classes = [styles.control, className].filter(Boolean).join(' ');

package/src/components/Form/Form.fragment.tsx

@@ -8,7 +8,7 @@ import { Textarea } from '../Textarea';
 import { Select } from '../Select';
 import { Checkbox } from '../Checkbox';
 import { RadioGroup } from '../RadioGroup';
-import { Toggle } from '../Toggle';
+import { Switch } from '../Switch';
 import { Button } from '../Button';
 import { Grid } from '../Grid';
 
@@ -141,7 +141,7 @@ export default defineFragment({
     },
     {
       name: 'Profile settings',
-      description: 'Multi-section form with Fieldsets, toggles, and radio group',
+      description: 'Multi-section form with Fieldsets, switches, and radio group',
       render: () => (
         <Form onFormSubmit={(e) => { e.preventDefault(); }}>
           <Fieldset>
@@ -182,12 +182,12 @@ export default defineFragment({
             <Fieldset.Legend>Notifications</Fieldset.Legend>
             <Field name="emailNotifs">
               <Field.Control>
-                <Toggle label="Email notifications" />
+                <Switch label="Email notifications" />
               </Field.Control>
             </Field>
             <Field name="marketingEmails">
               <Field.Control>
-                <Toggle label="Marketing emails" />
+                <Switch label="Marketing emails" />
               </Field.Control>
             </Field>
             <Field name="frequency">

package/src/components/Input/Input.fragment.tsx

@@ -23,7 +23,7 @@ export default defineFragment({
     whenNot: [
       'Multi-line text (use Textarea)',
       'Selecting from predefined options (use Select)',
-      'Boolean input (use Checkbox or Toggle)',
+      'Boolean input (use Checkbox or Switch)',
       'Date/time input (use DatePicker)',
     ],
     guidelines: [

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-danger-text, $fui-color-danger-text);
   }
 }
 
@@ -148,14 +148,14 @@
     font-size: 0.9em;
     padding: 0.125em 0.375em;
     border-radius: var(--fui-radius-sm, $fui-radius-sm);
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--fui-bg-subtle, $fui-bg-subtle);
   }
 
   pre {
     margin: var(--fui-space-2, $fui-space-2) 0;
     padding: var(--fui-padding-inline-sm);
     border-radius: var(--fui-radius-md, $fui-radius-md);
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--fui-bg-subtle, $fui-bg-subtle);
     overflow-x: auto;
 
     code {

package/src/components/Popover/Popover.fragment.tsx

@@ -87,7 +87,7 @@ export default defineFragment({
       'form.inline',
       'content.preview',
     ],
-    a11yRules: ['A11Y_POPOVER_FOCUS', 'A11Y_POPOVER_ESCAPE'],
+    a11yRules: ['A11Y_POPOVER_FOCUS', 'A11Y_POPOVER_ESCAPE', 'A11Y_TARGET_SIZE_MIN'],
   },
 
   ai: {

package/src/components/Popover/Popover.module.scss

@@ -96,13 +96,11 @@
 .close {
   @include button-reset;
   @include interactive-base;
+  @include touch-target;
 
   position: absolute;
   top: var(--fui-space-2, $fui-space-2);
   right: var(--fui-space-2, $fui-space-2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
   width: 1.5rem;
   height: 1.5rem;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);

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

@@ -27,9 +27,7 @@
   width: calc(100% - var(--fui-space-8, $fui-space-8));
   max-width: 800px;
   z-index: 100;
-  box-shadow:
-    0 -4px 16px rgba(0, 0, 0, 0.08),
-    0 4px 24px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--fui-shadow-lg, $fui-shadow-lg);
 }
 
 // Sticky variant - for content-area fixed prompts (accounts for sidebar)
@@ -44,9 +42,7 @@
   width: calc(100% - var(--fui-prompt-inset-left, 0px) - var(--fui-space-8, $fui-space-8));
   max-width: 800px;
   z-index: 100;
-  box-shadow:
-    0 -4px 16px rgba(0, 0, 0, 0.08),
-    0 4px 24px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--fui-shadow-lg, $fui-shadow-lg);
 
   // Center within the available space (after sidebar)
   left: calc(var(--fui-prompt-inset-left, 0px) + ((100% - var(--fui-prompt-inset-left, 0px)) / 2));
@@ -113,6 +109,7 @@
   display: flex;
   align-items: center;
   gap: var(--fui-space-2, $fui-space-2);
+  margin-left: auto;
 }
 
 // ============================================
@@ -226,19 +223,9 @@
 }
 
 .submitLoading {
-  position: relative;
-
-  svg {
-    animation: pulse 1s ease-in-out infinite;
-  }
+  pointer-events: none;
 }
 
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
+.submitSpinner {
+  line-height: 0;
 }

package/src/components/Prompt/Prompt.test.tsx

@@ -7,6 +7,7 @@ function renderPrompt(props: {
   placeholder?: string;
   disabled?: boolean;
   defaultValue?: string;
+  loading?: boolean;
 } = {}) {
   return render(
     <Prompt
@@ -14,6 +15,7 @@ function renderPrompt(props: {
       onSubmit={props.onSubmit}
       disabled={props.disabled}
       defaultValue={props.defaultValue}
+      loading={props.loading}
     >
       <Prompt.Textarea />
       <Prompt.Toolbar>
@@ -82,6 +84,12 @@ describe('Prompt', () => {
     expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();
   });
 
+  it('shows loading spinner icon in submit button when loading', () => {
+    renderPrompt({ loading: true, defaultValue: 'Submitting...' });
+    expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();
+    expect(screen.getByRole('status', { name: /submitting/i })).toBeInTheDocument();
+  });
+
   it('has no accessibility violations', async () => {
     const { container } = renderPrompt();
     await expectNoA11yViolations(container);

package/src/components/Prompt/index.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import styles from './Prompt.module.scss';
 import '../../styles/globals.scss';
+import { Loading } from '../Loading';
 
 // ============================================
 // Types
@@ -404,7 +405,17 @@ function PromptSubmit({
       disabled={isDisabled}
       aria-label={ariaLabel}
     >
-      {children ?? <ArrowUpIcon />}
+      {loading ? (
+        <Loading
+          size="sm"
+          variant="spinner"
+          color="current"
+          label="Submitting"
+          className={styles.submitSpinner}
+        />
+      ) : (
+        children ?? <ArrowUpIcon />
+      )}
     </button>
   );
 }

package/src/components/RadioGroup/RadioGroup.fragment.tsx

@@ -23,7 +23,7 @@ export default defineFragment({
     whenNot: [
       'Multiple selections allowed (use Checkbox group)',
       'Many options (use Select)',
-      'Binary on/off choice (use Toggle/Switch)',
+      'Binary on/off choice (use Switch)',
       'Options need to be searchable (use Combobox)',
     ],
     guidelines: [
@@ -96,9 +96,9 @@ export default defineFragment({
       note: 'Use Select for many options or limited space',
     },
     {
-      component: 'Toggle',
+      component: 'Switch',
       relationship: 'alternative',
-      note: 'Use Toggle for binary on/off choices',
+      note: 'Use Switch for binary on/off choices',
     },
   ],
 
@@ -118,6 +118,7 @@ export default defineFragment({
     a11yRules: [
       'A11Y_RADIO_GROUP',
       'A11Y_LABEL_REQUIRED',
+      'A11Y_TARGET_SIZE_MIN',
     ],
     bans: [],
   },

package/src/components/RadioGroup/RadioGroup.module.scss

@@ -30,11 +30,15 @@
 // Individual item wrapper
 .itemWrapper {
   display: inline-flex;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--fui-space-2, $fui-space-2);
   cursor: pointer;
   font-family: var(--fui-font-sans, $fui-font-sans);
 
+  &[data-has-description] {
+    align-items: flex-start;
+  }
+
   &[data-disabled] {
     cursor: not-allowed;
     opacity: 0.5;
@@ -44,15 +48,13 @@
 // The radio circle
 .radio {
   @include interactive-base;
+  @include touch-target;
 
   position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
-  margin-top: var(--fui-space-0-5, $fui-space-0-5);
+  margin-top: 0;
   background-color: var(--fui-bg-elevated, $fui-bg-elevated);
   border: 1px solid var(--fui-border-strong, $fui-border-strong);
   border-radius: var(--fui-radius-full, $fui-radius-full);
@@ -80,13 +82,11 @@
 .radioSm {
   width: 0.875rem;
   height: 0.875rem;
-  margin-top: var(--fui-space-0-75, $fui-space-0-75);
 }
 
 .radioLg {
   width: 1.25rem;
   height: 1.25rem;
-  margin-top: 0;
 }
 
 // The indicator dot - use absolute positioning for perfect centering
@@ -94,8 +94,8 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 0.5rem;
-  height: 0.5rem;
+  width: 0.75rem;
+  height: 0.75rem;
   background-color: var(--fui-color-accent, $fui-color-accent);
   border-radius: var(--fui-radius-full, $fui-radius-full);