@fragments-sdk/ui 0.7.3 → 0.7.5

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

@@ -0,0 +1,89 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Prompt } from './index';
+
+function renderPrompt(props: {
+  onSubmit?: (v: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  defaultValue?: string;
+} = {}) {
+  return render(
+    <Prompt
+      placeholder={props.placeholder ?? 'Ask something...'}
+      onSubmit={props.onSubmit}
+      disabled={props.disabled}
+      defaultValue={props.defaultValue}
+    >
+      <Prompt.Textarea />
+      <Prompt.Toolbar>
+        <Prompt.Actions>
+          <Prompt.ActionButton aria-label="Attach file">Attach</Prompt.ActionButton>
+        </Prompt.Actions>
+      </Prompt.Toolbar>
+      <Prompt.Submit />
+    </Prompt>
+  );
+}
+
+describe('Prompt', () => {
+  it('renders a textarea with placeholder', () => {
+    renderPrompt({ placeholder: 'Type here...' });
+    expect(screen.getByPlaceholderText('Type here...')).toBeInTheDocument();
+  });
+
+  it('renders compound sub-components (Toolbar, Actions)', () => {
+    renderPrompt();
+    expect(screen.getByRole('button', { name: /attach file/i })).toBeInTheDocument();
+  });
+
+  it('renders submit button', () => {
+    renderPrompt();
+    expect(screen.getByRole('button', { name: /submit/i })).toBeInTheDocument();
+  });
+
+  it('disables submit when value is empty', () => {
+    renderPrompt();
+    expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();
+  });
+
+  it('enables submit when user types text', async () => {
+    const user = userEvent.setup();
+    renderPrompt();
+    const textarea = screen.getByPlaceholderText('Ask something...');
+    await user.type(textarea, 'Hello');
+    expect(screen.getByRole('button', { name: /submit/i })).not.toBeDisabled();
+  });
+
+  it('calls onSubmit when submit button is clicked', async () => {
+    const user = userEvent.setup();
+    const handleSubmit = vi.fn();
+    renderPrompt({ onSubmit: handleSubmit, defaultValue: 'Test message' });
+
+    await user.click(screen.getByRole('button', { name: /submit/i }));
+    expect(handleSubmit).toHaveBeenCalledWith('Test message');
+  });
+
+  it('submits on Enter key by default (submitOnEnter)', async () => {
+    const user = userEvent.setup();
+    const handleSubmit = vi.fn();
+    renderPrompt({ onSubmit: handleSubmit });
+
+    const textarea = screen.getByPlaceholderText('Ask something...');
+    await user.type(textarea, 'Hello');
+    await user.keyboard('{Enter}');
+    expect(handleSubmit).toHaveBeenCalledWith('Hello');
+  });
+
+  it('disables all controls when disabled prop is true', () => {
+    renderPrompt({ disabled: true });
+    expect(screen.getByPlaceholderText('Ask something...')).toBeDisabled();
+    expect(screen.getByRole('button', { name: /attach file/i })).toBeDisabled();
+    expect(screen.getByRole('button', { name: /submit/i })).toBeDisabled();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = renderPrompt();
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/RadioGroup/RadioGroup.test.tsx

@@ -0,0 +1,105 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { RadioGroup } from './index';
+
+describe('RadioGroup', () => {
+  it('renders a radiogroup role', () => {
+    render(
+      <RadioGroup label="Color">
+        <RadioGroup.Item value="red" label="Red" />
+        <RadioGroup.Item value="blue" label="Blue" />
+      </RadioGroup>
+    );
+    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+  });
+
+  it('renders radio items', () => {
+    render(
+      <RadioGroup label="Color">
+        <RadioGroup.Item value="red" label="Red" />
+        <RadioGroup.Item value="blue" label="Blue" />
+      </RadioGroup>
+    );
+    expect(screen.getAllByRole('radio')).toHaveLength(2);
+  });
+
+  it('selects a radio on click', async () => {
+    const user = userEvent.setup();
+    render(
+      <RadioGroup label="Color">
+        <RadioGroup.Item value="red" label="Red" />
+        <RadioGroup.Item value="blue" label="Blue" />
+      </RadioGroup>
+    );
+    const radios = screen.getAllByRole('radio');
+    await user.click(radios[1]);
+    expect(radios[1]).toBeChecked();
+  });
+
+  it('renders the group label', () => {
+    render(
+      <RadioGroup label="Choose a color">
+        <RadioGroup.Item value="red" label="Red" />
+      </RadioGroup>
+    );
+    expect(screen.getByText('Choose a color')).toBeInTheDocument();
+  });
+
+  it('sets defaultValue as the initially selected radio', () => {
+    render(
+      <RadioGroup label="Color" defaultValue="blue">
+        <RadioGroup.Item value="red" label="Red" />
+        <RadioGroup.Item value="blue" label="Blue" />
+      </RadioGroup>
+    );
+    const radios = screen.getAllByRole('radio');
+    expect(radios[1]).toBeChecked();
+  });
+
+  it('disables all items when disabled prop is set', () => {
+    render(
+      <RadioGroup label="Color" disabled>
+        <RadioGroup.Item value="red" label="Red" />
+        <RadioGroup.Item value="blue" label="Blue" />
+      </RadioGroup>
+    );
+    const radios = screen.getAllByRole('radio');
+    radios.forEach((radio) => expect(radio).toHaveAttribute('aria-disabled', 'true'));
+  });
+
+  it('disables individual items', () => {
+    render(
+      <RadioGroup label="Color">
+        <RadioGroup.Item value="red" label="Red" disabled />
+        <RadioGroup.Item value="blue" label="Blue" />
+      </RadioGroup>
+    );
+    const radios = screen.getAllByRole('radio');
+    expect(radios[0]).toHaveAttribute('aria-disabled', 'true');
+    expect(radios[1]).not.toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('calls onValueChange with the selected value', async () => {
+    const handleChange = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <RadioGroup label="Color" onValueChange={handleChange}>
+        <RadioGroup.Item value="red" label="Red" />
+        <RadioGroup.Item value="blue" label="Blue" />
+      </RadioGroup>
+    );
+    await user.click(screen.getAllByRole('radio')[0]);
+    expect(handleChange).toHaveBeenCalled();
+    expect(handleChange.mock.calls[0][0]).toBe('red');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <RadioGroup label="Accessible group">
+        <RadioGroup.Item value="a" label="Option A" />
+        <RadioGroup.Item value="b" label="Option B" />
+      </RadioGroup>
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/RadioGroup/index.tsx

@@ -41,10 +41,21 @@ export interface RadioItemProps {
   description?: string;
   /** Whether this item is disabled */
   disabled?: boolean;
+  /** Accessible name for icon-only mode */
+  'aria-label'?: string;
+  /** Accessible labelled-by relationship */
+  'aria-labelledby'?: string;
+  /** Accessible described-by relationship */
+  'aria-describedby'?: string;
   /** Additional class name */
   className?: string;
 }
 
+function mergeAriaIds(...ids: Array<string | undefined>): string | undefined {
+  const merged = ids.filter(Boolean).join(' ').trim();
+  return merged.length > 0 ? merged : undefined;
+}
+
 // ============================================
 // Context for size
 // ============================================
@@ -60,9 +71,15 @@ function RadioItem({
   label,
   description,
   disabled = false,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
   className,
 }: RadioItemProps) {
   const size = React.useContext(RadioSizeContext);
+  const id = React.useId();
+  const labelId = label ? `radio-label-${id}` : undefined;
+  const descriptionId = description ? `radio-desc-${id}` : undefined;
 
   const radioClasses = [
     styles.radio,
@@ -84,6 +101,9 @@ function RadioItem({
       <BaseRadio.Root
         value={value}
         disabled={disabled}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
         className={[radioClasses, className].filter(Boolean).join(' ')}
       >
         <BaseRadio.Indicator className={styles.indicator} />
@@ -96,14 +116,17 @@ function RadioItem({
       <BaseRadio.Root
         value={value}
         disabled={disabled}
+        aria-label={ariaLabel}
+        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}
+        aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}
         className={radioClasses}
       >
         <BaseRadio.Indicator className={styles.indicator} />
       </BaseRadio.Root>
       <div className={styles.content}>
-        <span className={labelClasses}>{label}</span>
+        <span id={labelId} className={labelClasses}>{label}</span>
         {description && (
-          <span className={styles.description}>{description}</span>
+          <span id={descriptionId} className={styles.description}>{description}</span>
         )}
       </div>
     </label>
@@ -126,8 +149,15 @@ function RadioGroupRoot({
   size = 'md',
   children,
   className,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
   ...htmlProps
 }: RadioGroupProps) {
+  const groupId = React.useId();
+  const labelId = label ? `radio-group-label-${groupId}` : undefined;
+  const errorId = error ? `radio-group-error-${groupId}` : undefined;
+
   const groupClasses = [
     styles.group,
     styles[orientation],
@@ -137,18 +167,21 @@ function RadioGroupRoot({
   return (
     <RadioSizeContext.Provider value={size}>
       <div {...htmlProps} className={styles.wrapper}>
-        {label && <span className={styles.groupLabel}>{label}</span>}
+        {label && <span id={labelId} className={styles.groupLabel}>{label}</span>}
         <BaseRadioGroup
           value={value}
           defaultValue={defaultValue}
           onValueChange={onValueChange}
           disabled={disabled}
           name={name}
+          aria-label={ariaLabel}
+          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}
+          aria-describedby={mergeAriaIds(ariaDescribedBy, errorId)}
           className={groupClasses}
         >
           {children}
         </BaseRadioGroup>
-        {error && <span className={styles.error}>{error}</span>}
+        {error && <span id={errorId} className={styles.error}>{error}</span>}
       </div>
     </RadioSizeContext.Provider>
   );

package/src/components/Select/Select.test.tsx

@@ -0,0 +1,161 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Select } from './index';
+
+function renderSelect(props: { onValueChange?: (v: string | null) => void; disabled?: boolean; value?: string; placeholder?: string } = {}) {
+  return render(
+    <Select
+      placeholder={props.placeholder ?? 'Pick one'}
+      onValueChange={props.onValueChange}
+      disabled={props.disabled}
+      value={props.value}
+    >
+      <Select.Trigger />
+      <Select.Content>
+        <Select.Item value="apple">Apple</Select.Item>
+        <Select.Item value="banana">Banana</Select.Item>
+        <Select.Item value="cherry" disabled>Cherry</Select.Item>
+      </Select.Content>
+    </Select>
+  );
+}
+
+describe('Select', () => {
+  it('renders a trigger button', () => {
+    renderSelect();
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('shows placeholder text when no value selected', () => {
+    renderSelect({ placeholder: 'Choose fruit' });
+    expect(screen.getByText('Choose fruit')).toBeInTheDocument();
+  });
+
+  it('opens dropdown and selects an option on click', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderSelect({ onValueChange: onChange });
+
+    await user.click(screen.getByRole('combobox'));
+    const option = await screen.findByRole('option', { name: 'Apple' });
+    await user.click(option);
+    expect(onChange).toHaveBeenCalledWith('apple');
+  });
+
+  it('renders with a controlled value', async () => {
+    const user = userEvent.setup();
+    renderSelect({ value: 'banana' });
+    // The trigger should display the selected item label
+    await user.click(screen.getByRole('combobox'));
+    const bananaOption = await screen.findByRole('option', { name: 'Banana' });
+    expect(bananaOption).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('disables the trigger when disabled prop is true', () => {
+    renderSelect({ disabled: true });
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+
+  it('renders groups and group labels', async () => {
+    const user = userEvent.setup();
+    render(
+      <Select placeholder="Pick">
+        <Select.Trigger />
+        <Select.Content>
+          <Select.Group>
+            <Select.GroupLabel>Fruits</Select.GroupLabel>
+            <Select.Item value="apple">Apple</Select.Item>
+          </Select.Group>
+        </Select.Content>
+      </Select>
+    );
+    await user.click(screen.getByRole('combobox'));
+    expect(await screen.findByText('Fruits')).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <Select placeholder="Pick one">
+        <Select.Trigger aria-label="Select a fruit" />
+        <Select.Content>
+          <Select.Item value="apple">Apple</Select.Item>
+        </Select.Content>
+      </Select>
+    );
+    await expectNoA11yViolations(container);
+  });
+
+  describe('keyboard & focus', () => {
+    it('ArrowDown opens the dropdown from focused trigger', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+
+      await user.tab(); // focus trigger
+      await user.keyboard('{ArrowDown}');
+      expect(await screen.findByRole('option', { name: 'Apple' })).toBeInTheDocument();
+    });
+
+    it('listbox receives focus when dropdown opens', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+
+      await user.click(screen.getByRole('combobox'));
+      const listbox = await screen.findByRole('listbox');
+      expect(listbox).toBeInTheDocument();
+    });
+
+    it('all options are rendered in the listbox', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+
+      await user.click(screen.getByRole('combobox'));
+      expect(await screen.findByRole('option', { name: 'Apple' })).toBeInTheDocument();
+      expect(screen.getByRole('option', { name: 'Banana' })).toBeInTheDocument();
+      expect(screen.getByRole('option', { name: 'Cherry' })).toBeInTheDocument();
+    });
+
+    it('clicking an option selects it', async () => {
+      const user = userEvent.setup();
+      const onChange = vi.fn();
+      renderSelect({ onValueChange: onChange });
+
+      await user.click(screen.getByRole('combobox'));
+      await user.click(await screen.findByRole('option', { name: 'Banana' }));
+      expect(onChange).toHaveBeenCalledWith('banana');
+    });
+
+    it('Escape closes the dropdown', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+
+      await user.click(screen.getByRole('combobox'));
+      await screen.findByRole('option', { name: 'Apple' });
+
+      await user.keyboard('{Escape}');
+      expect(screen.queryByRole('option')).not.toBeInTheDocument();
+    });
+
+    it('trigger is focusable after closing dropdown', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+
+      const trigger = screen.getByRole('combobox');
+      await user.click(trigger);
+      await screen.findByRole('option', { name: 'Apple' });
+
+      await user.keyboard('{Escape}');
+      // After closing, the trigger should still be accessible
+      expect(trigger).toBeInTheDocument();
+      expect(trigger).not.toBeDisabled();
+    });
+
+    it('disabled option has aria-disabled attribute', async () => {
+      const user = userEvent.setup();
+      renderSelect();
+
+      await user.click(screen.getByRole('combobox'));
+      const cherry = await screen.findByRole('option', { name: 'Cherry' });
+      expect(cherry).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+});

package/src/components/Select/index.tsx

@@ -268,11 +268,12 @@ function SelectItem({ children, value, disabled, className }: SelectItemProps) {
 
   // Register this item's children in the registry so the trigger can display them
   React.useEffect(() => {
-    itemsRef.current.set(value, children);
+    const items = itemsRef.current;
+    items.set(value, children);
     // Trigger re-render of trigger to show the registered content
     incrementItemsVersion();
     return () => {
-      itemsRef.current.delete(value);
+      items.delete(value);
     };
   }, [itemsRef, incrementItemsVersion, value, children]);
 

package/src/components/Separator/Separator.test.tsx

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, expectNoA11yViolations } from '../../test/utils';
+import { Separator } from './index';
+
+describe('Separator', () => {
+  it('renders with role="separator"', () => {
+    render(<Separator />);
+    expect(screen.getByRole('separator')).toBeInTheDocument();
+  });
+
+  it('applies horizontal class by default', () => {
+    render(<Separator />);
+    expect(screen.getByRole('separator')).toHaveClass('horizontal');
+  });
+
+  it('applies vertical class and orientation', () => {
+    render(<Separator orientation="vertical" />);
+    const sep = screen.getByRole('separator');
+    expect(sep).toHaveClass('vertical');
+  });
+
+  it('renders labeled separator', () => {
+    render(<Separator label="OR" />);
+    const sep = screen.getByRole('separator');
+    expect(sep).toHaveClass('withLabel');
+    expect(screen.getByText('OR')).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Separator />);
+    await expectNoA11yViolations(container);
+  });
+});

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

@@ -31,7 +31,7 @@
 
   .header {
     justify-content: center;
-    padding: var(--fui-space-3, $fui-space-3);
+    padding: var(--fui-padding-container-sm, $fui-padding-container-sm);
   }
 
   .sectionLabel {
@@ -46,7 +46,7 @@
 
   .item {
     justify-content: center;
-    padding: var(--fui-space-3, $fui-space-3);
+    padding: var(--fui-padding-container-sm, $fui-padding-container-sm);
   }
 
   .itemIcon {
@@ -55,7 +55,7 @@
 
   .footer {
     justify-content: center;
-    padding: var(--fui-space-3, $fui-space-3);
+    padding: var(--fui-padding-container-sm, $fui-padding-container-sm);
   }
 
   .collapseToggle {
@@ -92,7 +92,7 @@
   display: flex;
   align-items: center;
   gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-sm, $fui-padding-item-sm) var(--fui-padding-item-sm, $fui-padding-item-sm);
   flex-shrink: 0;
   height: var(--appshell-header-height, 56px);
 }
@@ -105,7 +105,7 @@
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-sm, $fui-padding-item-sm);
 }
 
 // ============================================
@@ -121,13 +121,19 @@
 .sectionHeader {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  gap: var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
+}
+
+.sectionTrigger {
+  flex: 1;
 }
 
 .sectionLabel {
   @include helper-text;
 
+  flex: 1;
+  min-width: 0;
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -170,11 +176,14 @@
 // Collapsible section styles (using Collapsible component)
 .sectionCollapsible {
   // Override Collapsible trigger styles for sidebar context
-  :global(.collapsible-trigger),
-  button[aria-expanded] {
+  .sectionTrigger {
     background: transparent;
+    display: flex;
+    align-items: center;
     justify-content: space-between;
-    padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+    width: 100%;
+    padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
+    border-radius: var(--fui-radius-md, $fui-radius-md);
 
     &:hover {
       background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -199,11 +208,10 @@
   @include interactive-base;
   @include text-base;
 
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: var(--fui-space-3, $fui-space-3);
-  width: 100%;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
@@ -212,6 +220,7 @@
   &:hover:not(.itemDisabled) {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
     color: var(--fui-text-primary, $fui-text-primary);
+    text-decoration: none;
   }
 
   &:active:not(.itemDisabled) {
@@ -225,8 +234,9 @@
   color: var(--fui-text-inverse, $fui-text-inverse);
 
   &:hover {
-    background-color: var(--fui-color-accent-active, $fui-color-accent-active);
-    color: var(--fui-text-inverse, $fui-text-inverse);
+    background-color: var(--fui-color-accent-hover, $fui-color-accent-hover) !important;
+    color: var(--fui-text-inverse, $fui-text-inverse) !important;
+    text-decoration: none;
   }
 
   .itemIcon {
@@ -270,7 +280,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
   font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   // Use accent-hover for WCAG AA contrast (4.5:1 minimum)
@@ -341,10 +351,9 @@
   @include interactive-base;
   @include text-base;
 
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  width: 100%;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
@@ -369,6 +378,7 @@
   &:hover:not(.subItemDisabled) {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
     color: var(--fui-text-primary, $fui-text-primary);
+    text-decoration: none;
   }
 
   &:active:not(.subItemDisabled) {
@@ -399,7 +409,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-4, $fui-space-4);
+  padding: var(--fui-padding-container-md, $fui-padding-container-md);
   margin-top: auto;
   flex-shrink: 0;
 }
@@ -563,14 +573,14 @@
   display: flex;
   flex-direction: column;
   gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-sm, $fui-padding-item-sm);
 }
 
 .skeletonItem {
   display: flex;
   align-items: center;
   gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
   min-height: $fui-sidebar-item-height;
 }