From 3d9d10b3e6be62b1b593fc489252d5af82010ee8 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 2 Sep 2026 19:46:11 -0300
Subject: [PATCH 1/7] fix(BBButton): make `size` resize `circle` and `squared`
 layouts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`circle` hardcoded a 3rem width/height regardless of `size`, and
`squared` hardcoded its padding, overriding the size-derived padding
from commonButtonStyles — both contradicted the `size` doc, which
claims it affects padding and the circle's diameter.

Add a shared `iconBoxSize` per size to CSS_SIZE_PROPERTIES and an
`iconOnlyBoxStyles` fragment reused by both layouts, so `circle` and
`squared` always render at the same fixed box size for a given `size`
(sm: 2rem, md: 3rem, the latter promoted to a new `spacingXXLarge`
token to match the previous circle default). This changes squared's
default look: it no longer sizes itself from icon + padding, and now
matches circle's box size instead.
---
 src/components/Button/component.stories.tsx | 40 ++++++++++++++++++++-
 src/components/Button/constants.ts          |  8 +++--
 src/components/Button/styles.ts             | 29 ++++++++-------
 src/components/Button/type.ts               |  3 +-
 src/stylesheets/sizing.ts                   |  1 +
 5 files changed, 64 insertions(+), 17 deletions(-)

diff --git a/src/components/Button/component.stories.tsx b/src/components/Button/component.stories.tsx
index 8020311..83d251f 100644
--- a/src/components/Button/component.stories.tsx
+++ b/src/components/Button/component.stories.tsx
@@ -55,7 +55,7 @@ const meta = {
     size: {
       control: 'select',
       options: SIZE_VALUES,
-      description: `Button size. Allowed values: ${SIZE_VALUES.join(', ')}. Note: size affects padding and, for \`circle\` layout, the overall diameter.`,
+      description: `Button size. Allowed values: ${SIZE_VALUES.join(', ')}. Note: size affects padding and, for \`circle\`/\`squared\` layouts, the overall box size (both render at the same size).`,
       table: { defaultValue: { summary: `${DEFAULT_SIZE}` } },
     },
     layout: {
@@ -323,6 +323,44 @@ export const AllSizes: Story = {
   ),
 };
 
+/** Renders the icon-only `circle` and `squared` layouts across every available `size`, showing that both render at the same box size for a given `size`. */
+export const IconOnlySizes: Story = {
+  name: 'Icon-Only Layout Sizes',
+  args: {
+    variant: 'primary',
+  },
+  render: (args) => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+        {SIZE_VALUES.map((size) => (
+          <BBButton
+            {...args}
+            key={`circle-${size}`}
+            layout="circle"
+            size={size}
+            icon={<MdFavorite size="1.25rem" />}
+            ariaLabel={`Circle ${size}`}
+            tooltipLabel={`Circle ${size}`}
+          />
+        ))}
+      </div>
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+        {SIZE_VALUES.map((size) => (
+          <BBButton
+            {...args}
+            key={`squared-${size}`}
+            layout="squared"
+            size={size}
+            icon={<MdFavorite size="1.25rem" />}
+            ariaLabel={`Squared ${size}`}
+            tooltipLabel={`Squared ${size}`}
+          />
+        ))}
+      </div>
+    </div>
+  ),
+};
+
 /** Shows the button in its disabled state. */
 export const Disabled: Story = {
   args: {
diff --git a/src/components/Button/constants.ts b/src/components/Button/constants.ts
index 22517be..5df5521 100644
--- a/src/components/Button/constants.ts
+++ b/src/components/Button/constants.ts
@@ -15,7 +15,9 @@ import {
   colorGray,
   colorBrandAux,
 } from '../../stylesheets/palette';
-import { spacingMedium, spacingSmall, spacingSmallMedium } from '../../stylesheets/sizing';
+import {
+  spacingSmall, spacingSmallMedium, spacingMedium, spacingXLarge, spacingXXLarge,
+} from '../../stylesheets/sizing';
 import { CSSColorPropertiesType, CSSSizePropertiesType, EssentialColorProperties } from './type';
 
 const VARIANTS = {
@@ -193,9 +195,11 @@ const CSS_COLOR_PROPERTIES_DISABLED: EssentialColorProperties = {
 const CSS_SIZE_PROPERTIES: CSSSizePropertiesType = {
   sm: {
     padding: `${spacingSmall} ${spacingSmallMedium}`,
+    iconBoxSize: spacingXLarge,
   },
   md: {
-    padding: spacingMedium
+    padding: spacingMedium,
+    iconBoxSize: spacingXXLarge,
   },
 };
 
diff --git a/src/components/Button/styles.ts b/src/components/Button/styles.ts
index d384e80..b44c596 100644
--- a/src/components/Button/styles.ts
+++ b/src/components/Button/styles.ts
@@ -119,10 +119,15 @@ const stackedLayoutStyles = css`
   align-items: center;
 `;
 
-const circleLayoutStyles = css`
-  border-radius: 50%;
-  width: 3rem;
-  height: 3rem;
+// Shared by `circle` and `squared`: both are icon-only, fixed-box layouts that
+// must render at the same width/height for a given `size` — they differ only
+// in border-radius (round vs. slightly rounded square).
+const iconOnlyBoxStyles = css<StyledButtonProps>`
+  ${({ $size }) => {
+    const safeSize = $size ?? DEFAULT_SIZE;
+    const { iconBoxSize } = CSS_SIZE_PROPERTIES[safeSize] ?? CSS_SIZE_PROPERTIES[DEFAULT_SIZE];
+    return `width: ${iconBoxSize}; height: ${iconBoxSize};`;
+  }}
   aspect-ratio: 1;
   padding: 0;
   display: flex;
@@ -130,16 +135,14 @@ const circleLayoutStyles = css`
   align-items: center;
 `;
 
-// Icon-only, sized by its own (equal, non-text) padding rather than a fixed
-// box — stays compact next to a single line of text instead of forcing a
-// fixed height like circle/stacked do.
-const squaredLayoutStyles = css`
+const circleLayoutStyles = css<StyledButtonProps>`
+  ${iconOnlyBoxStyles}
+  border-radius: 50%;
+`;
+
+const squaredLayoutStyles = css<StyledButtonProps>`
+  ${iconOnlyBoxStyles}
   border-radius: ${borderRadiusSmall};
-  aspect-ratio: 1;
-  padding: ${spacingSmall};
-  display: flex;
-  justify-content: center;
-  align-items: center;
 `;
 
 const defaultLayoutStyles = css`
diff --git a/src/components/Button/type.ts b/src/components/Button/type.ts
index 30c9281..bc38ae0 100644
--- a/src/components/Button/type.ts
+++ b/src/components/Button/type.ts
@@ -30,6 +30,7 @@ export type CSSColorPropertiesType = {
 
 export type SizeProperties = {
   padding: string;
+  iconBoxSize: string;
 }
 
 export type CSSSizePropertiesType = {
@@ -97,7 +98,7 @@ type BaseButtonProps = {
   /** Visual variant controlling emphasis and background/border styling. @default 'primary' */
   variant?: VariantType;
 
-  /** Button size; affects padding and, for the `circle` layout, the overall diameter. @default 'md' */
+  /** Button size; affects padding and, for the `circle`/`squared` layouts, the overall box size (both render at the same size). @default 'md' */
   size?: SizeType;
 
   /** Disables interaction and applies disabled styling. @default false */
diff --git a/src/stylesheets/sizing.ts b/src/stylesheets/sizing.ts
index 1e0c76a..af3ef60 100644
--- a/src/stylesheets/sizing.ts
+++ b/src/stylesheets/sizing.ts
@@ -8,6 +8,7 @@ export const spacingMedium = '1rem';          // 16px
 export const spacingMediumLarge = '1.25rem';  // 20px
 export const spacingLarge = '1.5rem';         // 24px
 export const spacingXLarge = '2rem';          // 32px
+export const spacingXXLarge = '3rem';         // 48px
 
 // Border sizes
 export const borderRadiusDefault = '1rem';    //16px

From 9523721f2e88d6b8b8729d25497ab9e97eb5eeae Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 2 Sep 2026 19:52:06 -0300
Subject: [PATCH 2/7] feat(BBBModal): add hideCloseButton prop to hide header
 close button

BBBModal always renders a close button in the header, with no way to
suppress it. This blocks use cases that require a non-dismissible
modal, such as mandatory-action dialogs or modals whose closing is
controlled entirely by external logic.

Add a hideCloseButton prop (default false) that conditionally renders
the close button, following the same pattern already used by
noFooter.
---
 src/components/Modal/README.md             |  1 +
 src/components/Modal/component.stories.tsx | 13 +++++++++++++
 src/components/Modal/component.tsx         | 19 +++++++++++--------
 src/components/Modal/types.ts              |  3 +++
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
index 0558370..769c640 100644
--- a/src/components/Modal/README.md
+++ b/src/components/Modal/README.md
@@ -39,6 +39,7 @@ import { BBBModal } from 'bbb-ui-components-react';
 | `shouldCloseOnEsc`          | `boolean`                      | `false`   | Allows closing with ESC key.                                                |
 | `allowScroll`               | `boolean`                      | `true`    | Enables scroll in the modal body.                                           |
 | `noFooter`                  | `boolean`                      | `false`   | Hides the modal footer.                                                     |
+| `hideCloseButton`           | `boolean`                      | `false`   | Hides the header close button.                                              |
 | `footerContent`             | `React.ReactNode`              | `null`    | Custom content for the footer.                                              |
 | `stickyFooter`              | `boolean`                      | `true`    | Makes the footer sticky.                                                    |
 | `testId`                    | `string`                       | —         | Test identifier applied to the modal element (native `ReactModal` prop).    |
diff --git a/src/components/Modal/component.stories.tsx b/src/components/Modal/component.stories.tsx
index 9367b1e..731eb33 100644
--- a/src/components/Modal/component.stories.tsx
+++ b/src/components/Modal/component.stories.tsx
@@ -59,6 +59,10 @@ const meta = {
       control: 'boolean',
       description: 'Hide the footer section.',
     },
+    hideCloseButton: {
+      control: 'boolean',
+      description: 'Hide the header close button.',
+    },
     footerContent: {
       control: false,
       description: 'Custom React node to render inside the footer.',
@@ -190,3 +194,12 @@ export const Default: Story = {
   },
   render: (args) => <ModalStory {...args}><ModalBody /></ModalStory>,
 };
+
+/** Modal without a header close button, for mandatory-action or externally-controlled flows. */
+export const HideCloseButton: Story = {
+  args: {
+    ...Default.args,
+    hideCloseButton: true,
+  },
+  render: (args) => <ModalStory {...args}><ModalBody /></ModalStory>,
+};
diff --git a/src/components/Modal/component.tsx b/src/components/Modal/component.tsx
index b1d9d8b..6376cf1 100644
--- a/src/components/Modal/component.tsx
+++ b/src/components/Modal/component.tsx
@@ -25,6 +25,7 @@ const Modal: React.FC<ModalProps> = ({
   shouldCloseOnEsc = false,
   allowScroll = true,
   noFooter = false,
+  hideCloseButton = false,
   footerContent = null,
   stickyFooter = true,
   testId,
@@ -65,14 +66,16 @@ const Modal: React.FC<ModalProps> = ({
         >
           {title}
         </BBBTypography>
-        <BBButton
-          layout="circle"
-          icon={<MdClose size="1.5rem" />}
-          onClick={onRequestClose}
-          variant="subtle"
-          ariaLabel="close"
-          {...(_closeButtonDataTest ? { dataTest: _closeButtonDataTest } : {})}
-        />
+        {!hideCloseButton && (
+          <BBButton
+            layout="circle"
+            icon={<MdClose size="1.5rem" />}
+            onClick={onRequestClose}
+            variant="subtle"
+            ariaLabel="close"
+            {...(_closeButtonDataTest ? { dataTest: _closeButtonDataTest } : {})}
+          />
+        )}
       </Styled.ModalHeader>
 
       {showDividers && <BBBDivider />}
diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts
index d82a8f3..5cc7b41 100644
--- a/src/components/Modal/types.ts
+++ b/src/components/Modal/types.ts
@@ -28,6 +28,9 @@ export interface ModalProps extends Omit<ReactModal.Props, 'style'> {
   /** Hide the footer section. @default false */
   noFooter?: boolean;
 
+  /** Hide the header close button. @default false */
+  hideCloseButton?: boolean;
+
   /** When true, the footer is sticky to the bottom instead of scrolling with the body. @default true */
   stickyFooter?: boolean;
 

From eceb66a2a871d9b4f823532b8e5abf4b24466343 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 2 Sep 2026 19:52:17 -0300
Subject: [PATCH 3/7] chore(BBBModal): remove unused CloseButton
 styled-component

styles.ts defines a CloseButton styled-component that is never
referenced: the modal's close button has always been rendered via
BBButton in component.tsx instead. Remove the dead code.
---
 src/components/Modal/styles.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts
index 708c871..1002ac9 100644
--- a/src/components/Modal/styles.ts
+++ b/src/components/Modal/styles.ts
@@ -45,15 +45,6 @@ export const ModalHeader = styled.div`
   align-items: center;
 `;
 
-export const CloseButton = styled.button`
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  padding: 0;
-  line-height: 1;
-`;
-
 export const ModalScrollArea = styled.div<StyledModalBodyProps>`
   flex-grow: 1;
   overflow-y: ${({ $allowScroll }) => $allowScroll ? 'auto' : 'hidden'};

From 3d1ad707731a8e3423a47ca5d7fcecfb08e445c5 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 2 Sep 2026 20:01:21 -0300
Subject: [PATCH 4/7] fix(BBBCheckbox): respect caller-provided id prop

BBBCheckbox always rendered with an internally generated id from
useId(), because {...props} was spread before the explicit id
attribute, so the generated value silently overwrote any id passed
by the caller. This made it impossible to target the rendered input
by a known id and broke the label/htmlFor association whenever a
custom id was expected.

Destructure id from props and fall back to useId() only when the
caller does not provide one, reusing the resolved value for both the
checkbox input and the label's htmlFor attribute.
---
 src/components/Checkbox/component.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Checkbox/component.tsx b/src/components/Checkbox/component.tsx
index 808740e..5356e8e 100644
--- a/src/components/Checkbox/component.tsx
+++ b/src/components/Checkbox/component.tsx
@@ -17,13 +17,15 @@ function Checkbox({
   layout = DEFAULT_LAYOUT,
   round = false,
   ariaLabel,
+  id,
   ...props
 }: CheckboxProps): JSX.Element {
-  const id = useId();
+  const generatedId = useId();
+  const checkboxId = id ?? generatedId;
   const checkbox = (
     <Styled.StyledCheckbox
       {...props}
-      id={id}
+      id={checkboxId}
       aria-label={ariaLabel}
       icon={round ? <RadioButtonUnchecked /> : undefined}
       checkedIcon={round ? <RadioButtonChecked /> : undefined}
@@ -36,9 +38,9 @@ function Checkbox({
 
   return (
     <Styled.Container>
-      {layout === LAYOUTS.LEFT && <Styled.Label htmlFor={id}>{label}</Styled.Label>}
+      {layout === LAYOUTS.LEFT && <Styled.Label htmlFor={checkboxId}>{label}</Styled.Label>}
       {checkbox}
-      {layout === LAYOUTS.RIGHT && <Styled.Label htmlFor={id}>{label}</Styled.Label>}
+      {layout === LAYOUTS.RIGHT && <Styled.Label htmlFor={checkboxId}>{label}</Styled.Label>}
     </Styled.Container>
   );
 }

From 78cf86be50fd031fbf3b2bbb03c835d3fcab0fe9 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 2 Sep 2026 22:11:12 -0300
Subject: [PATCH 5/7] feat(BBBCheckbox): add dataTest prop for the underlying
 input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BBBCheckbox has no way to tag its rendered <input> for test
selectors. Spreading an arbitrary data-test through {...props} does
not work: MUI's SwitchBase only forwards explicitly recognized props
(id, checked, name, inputProps) to the actual <input>, so anything
else spread through falls into the outer wrapper <span> instead —
the same class of issue fixed for id in the previous commit.

Add an explicit dataTest prop, matching the convention already used
by BBButton and BBBInput, and route it through MUI's inputProps so
it lands on the real <input>, merging with any inputProps the caller
already passes directly.
---
 src/components/Checkbox/README.md             | 1 +
 src/components/Checkbox/component.stories.tsx | 4 ++++
 src/components/Checkbox/component.tsx         | 4 ++++
 src/components/Checkbox/types.ts              | 3 +++
 4 files changed, 12 insertions(+)

diff --git a/src/components/Checkbox/README.md b/src/components/Checkbox/README.md
index 5f219a0..4464c4a 100644
--- a/src/components/Checkbox/README.md
+++ b/src/components/Checkbox/README.md
@@ -28,4 +28,5 @@ import { BBBCheckbox } from 'bbb-ui-components';
 | `layout`   | `keyof typeof LAYOUTS` | `'right'` | The position of the label relative to the checkbox.                         |
 | `round`      | `boolean`              | `false`   | If `true`, the checkbox will be rendered as a round radio-style button.     |
 | `ariaLabel`| `string`               |           | The accessible name for the checkbox.                                       |
+| `dataTest` | `string`               |           | The `data-test` attribute on the underlying `<input>` element.              |
 | `...props` | `any`                  |           | Any other props will be passed down to the underlying Material-UI Checkbox component. |
diff --git a/src/components/Checkbox/component.stories.tsx b/src/components/Checkbox/component.stories.tsx
index d5d14ac..c6f7d22 100644
--- a/src/components/Checkbox/component.stories.tsx
+++ b/src/components/Checkbox/component.stories.tsx
@@ -25,6 +25,10 @@ const meta = {
       control: 'text',
       description: 'Accessible name for the checkbox.',
     },
+    dataTest: {
+      control: 'text',
+      description: '`data-test` attribute on the underlying `<input>` element.',
+    },
   },
 } satisfies Meta<typeof BBBCheckbox>;
 
diff --git a/src/components/Checkbox/component.tsx b/src/components/Checkbox/component.tsx
index 5356e8e..4e52e96 100644
--- a/src/components/Checkbox/component.tsx
+++ b/src/components/Checkbox/component.tsx
@@ -18,10 +18,13 @@ function Checkbox({
   round = false,
   ariaLabel,
   id,
+  dataTest,
+  inputProps,
   ...props
 }: CheckboxProps): JSX.Element {
   const generatedId = useId();
   const checkboxId = id ?? generatedId;
+  const mergedInputProps = { 'data-test': dataTest, ...inputProps };
   const checkbox = (
     <Styled.StyledCheckbox
       {...props}
@@ -29,6 +32,7 @@ function Checkbox({
       aria-label={ariaLabel}
       icon={round ? <RadioButtonUnchecked /> : undefined}
       checkedIcon={round ? <RadioButtonChecked /> : undefined}
+      inputProps={mergedInputProps}
     />
   );
 
diff --git a/src/components/Checkbox/types.ts b/src/components/Checkbox/types.ts
index bd7298c..c61e065 100644
--- a/src/components/Checkbox/types.ts
+++ b/src/components/Checkbox/types.ts
@@ -15,4 +15,7 @@ export interface CheckboxProps extends MuiCheckboxProps {
 
   /** Accessible name for the checkbox. */
   ariaLabel?: string;
+
+  /** `data-test` attribute on the underlying `<input>` element. */
+  dataTest?: string;
 }

From c796cb4c675d5d865c51ba72ef0f3c446aa06f06 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Thu, 3 Sep 2026 14:27:14 -0300
Subject: [PATCH 6/7] feat(BBBAvatar): add avatar component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The library has no reusable component for rendering a user avatar.
Every BBB surface that needs one — e.g. bbb-plugin-pick-random-user's
user-avatar — reimplements the same image/initials/color logic
locally, causing duplicated code and visual inconsistency across
plugins and apps.

Add BBBAvatar (src/components/Avatar), using bbb-plugin-pick-random-user's
user-avatar as the reference implementation, extended to mirror BBB's
own conventions rather than inventing new ones:

- Renders the avatar image, falling back to initials on a colored
  background when no image is given or it fails to load.
- The fallback color is hashed deterministically from the user's name
  into the same 16-color palette akka-bbb-apps' ColorPicker assigns
  server-side, so the fallback lands on colors real BBB users get.
- small/medium/large size variants (medium default).
- isModerator renders the rounded-square shape BBB uses for
  moderators, independent of color.
- isYou applies BBB's own "you" color (colorUserYou, added to the
  shared palette) in place of the fallback, overridden by an explicit
  color prop.
- isTalking shows a pulsing ring in the avatar's own color, mirroring
  BBB's talking indicator (ported to use CSS's native color-to-transparent
  interpolation instead of manual alpha-string concatenation, so it
  works with both hex colors and CSS custom properties).
- A Tippy tooltip shows the full name on hover; disableTooltip opts out.
---
 README.md                                   |   4 +-
 package.json                                |  10 ++
 src/components/Avatar/README.md             |  83 +++++++++++++++
 src/components/Avatar/assets/example.png    | Bin 0 -> 29282 bytes
 src/components/Avatar/component.stories.tsx | 112 ++++++++++++++++++++
 src/components/Avatar/component.tsx         |  72 +++++++++++++
 src/components/Avatar/constants.ts          |  15 +++
 src/components/Avatar/index.ts              |   1 +
 src/components/Avatar/styles.ts             |  48 +++++++++
 src/components/Avatar/types.ts              |  36 +++++++
 src/components/index.ts                     |   1 +
 src/stylesheets/colors.ts                   |   4 +
 src/stylesheets/palette.ts                  |   3 +
 webpack.config.babel.js                     |   1 +
 14 files changed, 389 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Avatar/README.md
 create mode 100644 src/components/Avatar/assets/example.png
 create mode 100644 src/components/Avatar/component.stories.tsx
 create mode 100644 src/components/Avatar/component.tsx
 create mode 100644 src/components/Avatar/constants.ts
 create mode 100644 src/components/Avatar/index.ts
 create mode 100644 src/components/Avatar/styles.ts
 create mode 100644 src/components/Avatar/types.ts

diff --git a/README.md b/README.md
index 223b759..dbf0055 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@ This repository contains a library of reusable React components extracted from t
 Below is a list of the components available in this library. Each component has its own detailed documentation with usage examples and a complete list of props.
 
 - [BBBAccordion](./src/components/Accordion/README.md)
+- [BBBAvatar](./src/components/Avatar/README.md)
 - [BBButton](./src/components/Button/README.md)
 - [BBBCheckbox](./src/components/Checkbox/README.md)
 - [BBBDivider](./src/components/Divider/README.md)
@@ -101,6 +102,7 @@ The following table lists the supported CSS variables for color overriding, extr
 | `--color-icon-default-dark`| No                         | rgba(255, 255, 255, 0.35) |
 | `--color-overlay`          | No                         | rgba(0, 0, 0, 0.75) |
 | `--color-shadow-default`   | No                         | rgb(0 35 11 / 20%) |
+| `--color-user-you`         | No                         | #19237C      |
 
 **Example Usage**:
 ```css
@@ -132,7 +134,7 @@ const StyledDiv = styled.div`
 ```
 
 `colors` is grouped the same way as the table above: `neutral`, `brand`, `semantic`, `background`,
-`border`, `text`, `icon`, `hover`.
+`border`, `text`, `icon`, `hover`, `overlay`, `shadow`, `user`.
 
 ## Installation
 
diff --git a/package.json b/package.json
index bea56d7..b56e4f4 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,13 @@
       "require": "./dist/components/Accordion.js",
       "default": "./dist/components/Accordion.js"
     },
+    "./Avatar": {
+      "types": "./dist/types/components/Avatar/index.d.ts",
+      "node": "./dist/components/Avatar.js",
+      "import": "./dist/esm/components/Avatar/index.js",
+      "require": "./dist/components/Avatar.js",
+      "default": "./dist/components/Avatar.js"
+    },
     "./Button": {
       "types": "./dist/types/components/Button/index.d.ts",
       "node": "./dist/components/Button.js",
@@ -181,6 +188,9 @@
       "Accordion": [
         "dist/types/components/Accordion/index.d.ts"
       ],
+      "Avatar": [
+        "dist/types/components/Avatar/index.d.ts"
+      ],
       "Button": [
         "dist/types/components/Button/index.d.ts"
       ],
diff --git a/src/components/Avatar/README.md b/src/components/Avatar/README.md
new file mode 100644
index 0000000..1d98e3f
--- /dev/null
+++ b/src/components/Avatar/README.md
@@ -0,0 +1,83 @@
+# BBBAvatar
+
+The `BBBAvatar` component renders a user's avatar image, falling back to their initials on a deterministically-colored background when no image is available or the image fails to load. It shows a tooltip with the full name on hover, and can highlight the current user or a speaking user, matching BBB's own avatar treatment.
+
+![Demo](assets/example.png)
+
+## Usage Example
+
+### Avatar with image
+```jsx
+import { BBBAvatar } from 'bbb-ui-components-react';
+
+<BBBAvatar name="Arthur Kaminski" avatarUrl={user.avatar} />
+```
+
+### Avatar with initials fallback
+```jsx
+import { BBBAvatar } from 'bbb-ui-components-react';
+
+<BBBAvatar name="Arthur Kaminski" />
+```
+
+### Avatar with a custom color
+```jsx
+import { BBBAvatar } from 'bbb-ui-components-react';
+
+<BBBAvatar name="Arthur Kaminski" color="#0F70D7" />
+```
+
+### Medium avatar
+```jsx
+import { BBBAvatar } from 'bbb-ui-components-react';
+
+<BBBAvatar name="Arthur Kaminski" size="medium" />
+```
+
+### Large avatar
+```jsx
+import { BBBAvatar } from 'bbb-ui-components-react';
+
+<BBBAvatar name="Arthur Kaminski" size="large" />
+```
+
+### Moderator avatar
+```jsx
+import { BBBAvatar } from 'bbb-ui-components-react';
+
+<BBBAvatar name="Arthur Kaminski" isModerator />
+```
+
+### Current user's avatar
+```jsx
+import { BBBAvatar } from 'bbb-ui-components-react';
+
+<BBBAvatar name="Arthur Kaminski" isYou />
+```
+
+### Talking indicator
+```jsx
+import { BBBAvatar } from 'bbb-ui-components-react';
+
+<BBBAvatar name="Arthur Kaminski" isTalking />
+```
+
+### Avatar without the hover tooltip
+```jsx
+import { BBBAvatar } from 'bbb-ui-components-react';
+
+<BBBAvatar name="Arthur Kaminski" disableTooltip />
+```
+
+## Props
+
+| Property         | Type                 | Default                                     | Description                                                                                                                   |
+| ---------------- | -------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `name`           | `string`             |                                              | Full name of the user; used to render initials, to derive a deterministic fallback color, and as the tooltip content.          |
+| `avatarUrl`      | `string`             |                                              | URL of the user's avatar image. Falls back to initials when omitted or if the image fails to load.                            |
+| `color`          | `string`             | color deterministically derived from `name` | Background color behind the initials (and border color on the image). Overrides `isYou`.                                     |
+| `size`           | `'small' \| 'medium' \| 'large'` | `'medium'`                        | Size variant of the avatar.                                                                                                     |
+| `isModerator`    | `boolean`            | `false`                                      | Renders a rounded-square shape instead of a circle, matching BBB's moderator avatar treatment.                                |
+| `isYou`          | `boolean`            | `false`                                      | Marks this avatar as belonging to the current user, applying BBB's "you" color in place of the fallback/computed color. Ignored when `color` is set. |
+| `isTalking`      | `boolean`            | `false`                                      | Shows a pulsing ring around the avatar, in its own color, matching BBB's talking indicator.                                    |
+| `disableTooltip` | `boolean`            | `false`                                      | Disables the tooltip that shows the full `name` on hover.                                                                      |
diff --git a/src/components/Avatar/assets/example.png b/src/components/Avatar/assets/example.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a9463aaa2e68c1a5cbebf842f749eeaa3967ea3
GIT binary patch
literal 29282
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
GcmD;m&PmV!

literal 0
HcmV?d00001

diff --git a/src/components/Avatar/component.stories.tsx b/src/components/Avatar/component.stories.tsx
new file mode 100644
index 0000000..94bd44a
--- /dev/null
+++ b/src/components/Avatar/component.stories.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import BBBAvatar from './component';
+import { AVATAR_SIZE_VALUES, DEFAULT_AVATAR_SIZE } from './constants';
+
+const meta = {
+  title: 'BBBAvatar',
+  component: BBBAvatar,
+  tags: ['autodocs'],
+  argTypes: {
+    name: {
+      control: 'text',
+      description: 'Full name of the user; used to render initials and to derive a deterministic fallback color.',
+    },
+    avatarUrl: {
+      control: 'text',
+      description: "URL of the user's avatar image. Falls back to initials when omitted or if the image fails to load.",
+    },
+    color: {
+      control: 'color',
+      description: 'Background color behind the initials (and border color on the image).',
+    },
+    size: {
+      control: 'select',
+      options: AVATAR_SIZE_VALUES,
+      description: 'Size variant of the avatar.',
+      table: { defaultValue: { summary: `${DEFAULT_AVATAR_SIZE}` } },
+    },
+    isModerator: {
+      control: 'boolean',
+      description: "Renders a rounded-square shape instead of a circle, matching BBB's moderator avatar treatment.",
+      table: { defaultValue: { summary: 'false' } },
+    },
+    isYou: {
+      control: 'boolean',
+      description: 'Marks this avatar as belonging to the current user, applying BBB\'s "you" color in place of the fallback/computed color. Ignored when `color` is set.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+    isTalking: {
+      control: 'boolean',
+      description: "Shows a pulsing ring around the avatar, in its own color, matching BBB's talking indicator.",
+      table: { defaultValue: { summary: 'false' } },
+    },
+    disableTooltip: {
+      control: 'boolean',
+      description: 'Disables the tooltip that shows the full `name` on hover.',
+      table: { defaultValue: { summary: 'false' } },
+    },
+  },
+} satisfies Meta<typeof BBBAvatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Falls back to initials when no image is given, next to an avatar rendering a provided image. */
+export const Default: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <BBBAvatar {...args} name="Arthur Kaminski" />
+      <BBBAvatar {...args} name="Arthur Kaminski" avatarUrl="https://i.pravatar.cc/150?img=60" />
+    </div>
+  ),
+};
+
+/** All size variants rendered side by side. */
+export const Sizes: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-end' }}>
+      {AVATAR_SIZE_VALUES.map((size) => (
+        <BBBAvatar {...args} key={size} name="Arthur Kaminski" size={size} />
+      ))}
+    </div>
+  ),
+};
+
+/** The default circular shape next to the rounded-square shape used for moderators. */
+export const Types: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <BBBAvatar {...args} name="Arthur Kaminski" />
+      <BBBAvatar {...args} name="Arthur Kaminski" isModerator />
+    </div>
+  ),
+};
+
+/** Different names deriving different colors from the deterministic fallback, next to an explicit custom color override. */
+export const Colors: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <BBBAvatar {...args} name="Arthur Kaminski" />
+      <BBBAvatar {...args} name="Beatriz Nunes" />
+      <BBBAvatar {...args} name="Carlos Eduardo" />
+      <BBBAvatar {...args} name="Diana Prince" />
+      <BBBAvatar {...args} name="Fernanda Lima" />
+      <BBBAvatar {...args} name="Gustavo Rocha" />
+      <BBBAvatar {...args} name="Isabela Torres" />
+      <BBBAvatar {...args} name="Arthur Kaminski" color="#0F70D7" />
+      <BBBAvatar {...args} name="Beatriz Nunes" color="#2DD36F" />
+      <BBBAvatar {...args} name="Arthur Kaminski" isYou />
+    </div>
+  ),
+};
+
+/** Not talking next to the pulsing ring shown while the user is speaking. */
+export const Talking: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '2rem', alignItems: 'center' }}>
+      <BBBAvatar {...args} name="Arthur Kaminski" />
+      <BBBAvatar {...args} name="Arthur Kaminski" isTalking />
+    </div>
+  ),
+};
diff --git a/src/components/Avatar/component.tsx b/src/components/Avatar/component.tsx
new file mode 100644
index 0000000..fe2e161
--- /dev/null
+++ b/src/components/Avatar/component.tsx
@@ -0,0 +1,72 @@
+import React, { JSX, useEffect, useState } from 'react';
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css';
+import * as Styled from './styles';
+import { AvatarProps } from './types';
+import { DEFAULT_AVATAR_SIZE, AVATAR_FALLBACK_COLORS } from './constants';
+import { colorUserYou } from '../../stylesheets/palette';
+
+function getInitials(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return '';
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+  return `${words[0][0]}${words[words.length - 1][0]}`.toUpperCase();
+}
+
+function getFallbackColor(name: string): string {
+  const hash = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  return AVATAR_FALLBACK_COLORS[hash % AVATAR_FALLBACK_COLORS.length];
+}
+
+/**
+ * A user avatar component.
+ *
+ * Renders the user's avatar image when available, falling back to their initials on a
+ * deterministically-colored background when no image is provided or it fails to load.
+ *
+ */
+function Avatar({
+  name,
+  avatarUrl,
+  color,
+  size = DEFAULT_AVATAR_SIZE,
+  isModerator = false,
+  isYou = false,
+  isTalking = false,
+  disableTooltip = false,
+}: AvatarProps): JSX.Element {
+  const [hasImageError, setHasImageError] = useState(false);
+  const resolvedColor = color || (isYou ? colorUserYou : getFallbackColor(name));
+
+  useEffect(() => {
+    setHasImageError(false);
+  }, [avatarUrl]);
+
+  const avatarElement = avatarUrl && !hasImageError ? (
+    <Styled.AvatarImage
+      src={avatarUrl}
+      alt={name}
+      $size={size}
+      $color={resolvedColor}
+      $isModerator={isModerator}
+      $isTalking={isTalking}
+      onError={() => setHasImageError(true)}
+    />
+  ) : (
+    <Styled.AvatarInitials $size={size} $color={resolvedColor} $isModerator={isModerator} $isTalking={isTalking}>
+      {getInitials(name)}
+    </Styled.AvatarInitials>
+  );
+
+  if (disableTooltip) {
+    return avatarElement;
+  }
+
+  return (
+    <Tippy content={name} placement="top">
+      {avatarElement}
+    </Tippy>
+  );
+}
+
+export default Avatar;
diff --git a/src/components/Avatar/constants.ts b/src/components/Avatar/constants.ts
new file mode 100644
index 0000000..7e9e260
--- /dev/null
+++ b/src/components/Avatar/constants.ts
@@ -0,0 +1,15 @@
+export const AVATAR_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+} as const;
+
+export const AVATAR_SIZE_VALUES = Object.values(AVATAR_SIZES);
+export const DEFAULT_AVATAR_SIZE = AVATAR_SIZES.MEDIUM;
+
+// Mirrors the palette akka-bbb-apps' ColorPicker assigns to users server-side (round-robin per
+// meeting), so a name-hash fallback here lands on the same colors real BBB users get.
+export const AVATAR_FALLBACK_COLORS = [
+  '#7b1fa2', '#6a1b9a', '#4a148c', '#5e35b1', '#512da8', '#4527a0', '#311b92',
+  '#3949ab', '#303f9f', '#283593', '#1a237e', '#1976d2', '#1565c0', '#0d47a1', '#0277bd', '#01579b',
+];
diff --git a/src/components/Avatar/index.ts b/src/components/Avatar/index.ts
new file mode 100644
index 0000000..3d4170d
--- /dev/null
+++ b/src/components/Avatar/index.ts
@@ -0,0 +1 @@
+export { default as BBBAvatar } from './component';
diff --git a/src/components/Avatar/styles.ts b/src/components/Avatar/styles.ts
new file mode 100644
index 0000000..71ab5f7
--- /dev/null
+++ b/src/components/Avatar/styles.ts
@@ -0,0 +1,48 @@
+import styled, { css, keyframes } from 'styled-components';
+import { colorWhite } from '../../stylesheets/palette';
+import { AVATAR_SIZES } from './constants';
+import { StyledAvatarProps } from './types';
+
+const DIMENSIONS = {
+  [AVATAR_SIZES.SMALL]: { dimension: '1.625rem', fontSize: '0.625rem', fontWeight: '600' },
+  [AVATAR_SIZES.MEDIUM]: { dimension: '3rem', fontSize: '1.125rem', fontWeight: '500' },
+  [AVATAR_SIZES.LARGE]: { dimension: '6rem', fontSize: '2.75rem', fontWeight: '400' },
+};
+
+// Mirrors BBB's talking indicator (a ring, in the user's own color, that spreads and fades out).
+const talkingPulse = (color: string) => keyframes`
+  0% { box-shadow: 0 0 0 0 ${color}; }
+  100% { box-shadow: 0 0 0 4px transparent; }
+`;
+
+const talkingStyles = css<StyledAvatarProps>`
+  ${({ $isTalking, $color }) => $isTalking && css`
+    animation: ${talkingPulse($color)} 1s infinite ease-in;
+  `}
+`;
+
+export const AvatarInitials = styled.div<StyledAvatarProps>`
+  width: ${({ $size }) => DIMENSIONS[$size].dimension};
+  height: ${({ $size }) => DIMENSIONS[$size].dimension};
+  border-radius: ${({ $isModerator }) => ($isModerator ? '20%' : '50%')};
+  flex-shrink: 0;
+  background: ${({ $color }) => $color};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${({ $size }) => DIMENSIONS[$size].fontSize};
+  font-weight: ${({ $size }) => DIMENSIONS[$size].fontWeight};
+  color: ${colorWhite};
+  text-transform: uppercase;
+  ${talkingStyles}
+`;
+
+export const AvatarImage = styled.img<StyledAvatarProps>`
+  width: ${({ $size }) => DIMENSIONS[$size].dimension};
+  height: ${({ $size }) => DIMENSIONS[$size].dimension};
+  border-radius: ${({ $isModerator }) => ($isModerator ? '20%' : '50%')};
+  flex-shrink: 0;
+  object-fit: cover;
+  border: 2px solid ${({ $color }) => $color};
+  ${talkingStyles}
+`;
diff --git a/src/components/Avatar/types.ts b/src/components/Avatar/types.ts
new file mode 100644
index 0000000..978b74f
--- /dev/null
+++ b/src/components/Avatar/types.ts
@@ -0,0 +1,36 @@
+import { AVATAR_SIZE_VALUES } from './constants';
+
+export type AvatarSize = typeof AVATAR_SIZE_VALUES[number];
+
+export interface StyledAvatarProps {
+  $size: AvatarSize;
+  $color: string;
+  $isModerator: boolean;
+  $isTalking: boolean;
+}
+
+export interface AvatarProps {
+  /** Full name of the user; used to render initials, to derive a deterministic fallback color, and as the tooltip content. */
+  name: string;
+
+  /** URL of the user's avatar image. Falls back to initials when omitted or if the image fails to load. */
+  avatarUrl?: string;
+
+  /** Background color behind the initials (and border color on the image). @default a color deterministically derived from `name`, or BBB's "you" color when `isYou` is set */
+  color?: string;
+
+  /** Size variant of the avatar. @default 'medium' */
+  size?: AvatarSize;
+
+  /** Renders a rounded-square shape instead of a circle, matching BBB's moderator avatar treatment. @default false */
+  isModerator?: boolean;
+
+  /** Marks this avatar as belonging to the current user, applying BBB's "you" color in place of the fallback/computed color. Ignored when `color` is set. @default false */
+  isYou?: boolean;
+
+  /** Shows a pulsing ring around the avatar, in its own color, matching BBB's talking indicator. @default false */
+  isTalking?: boolean;
+
+  /** Disables the tooltip that shows the full `name` on hover. @default false */
+  disableTooltip?: boolean;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 230d706..ab4ba37 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,4 +1,5 @@
 export { BBBAccordion } from './Accordion';
+export { BBBAvatar } from './Avatar';
 export { BBButton } from './Button';
 export { BBBCheckbox } from './Checkbox';
 export { BBBDivider } from './Divider';
diff --git a/src/stylesheets/colors.ts b/src/stylesheets/colors.ts
index 84251c7..fc5341a 100644
--- a/src/stylesheets/colors.ts
+++ b/src/stylesheets/colors.ts
@@ -9,6 +9,7 @@ import {
   colorHoverDark, colorHoverLight, colorHoverNeutral,
   colorOverlay,
   colorShadowDefault,
+  colorUserYou,
 } from './palette';
 
 export const colors = {
@@ -66,6 +67,9 @@ export const colors = {
   shadow: {
     default: colorShadowDefault,
   },
+  user: {
+    you: colorUserYou,
+  },
 } as const;
 
 export type Colors = typeof colors;
diff --git a/src/stylesheets/palette.ts b/src/stylesheets/palette.ts
index 1867278..6b43f8e 100644
--- a/src/stylesheets/palette.ts
+++ b/src/stylesheets/palette.ts
@@ -66,3 +66,6 @@ export const colorOverlay = 'var(--color-overlay, rgba(0, 0, 0, 0.75))';
 
 //Shadow colors
 export const colorShadowDefault = 'var(--color-shadow-default, rgb(0 35 11 / 20%))';
+
+// User colors
+export const colorUserYou = 'var(--color-user-you, #19237C)';
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 461ae7f..90d5502 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -3,6 +3,7 @@ import path from 'path';
 export default {
   entry: {
     Accordion: './src/components/Accordion/index.ts',
+    Avatar: './src/components/Avatar/index.ts',
     Button: './src/components/Button/index.ts',
     Checkbox: './src/components/Checkbox/index.ts',
     Divider: './src/components/Divider/index.ts',

From f85e02cda95ee5a02726a1fc1164868c2a05e297 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Mon, 21 Sep 2026 08:22:41 -0300
Subject: [PATCH 7/7] feat(BBBSlider): add slider component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The library has no slider, so every range control in BigBlueButton
ships its own: the camera modal drives brightness with a raw
`input[type=range]` plus hand-positioned markers, while the profile
panel uses a bare MUI `Slider` with local `styled()` overrides. The
two disagree on range, on styling and on how the value is announced.

Add `BBBSlider`, a horizontal single-thumb wrapper around MUI's
`Slider`, so those call sites collapse onto one control. Its
appearance matches what the profile panel renders today — MUI's
defaults carrying the brand colour — so adopting it changes no pixels
there.

Three things are handled by the wrapper rather than left to callers,
because MUI gets them wrong by default in this context:

- `id` and `aria-describedby` are routed into the hidden range input
  through `slotProps.input`. MUI puts unrecognized props on the root
  `<span>`, which makes `<label htmlFor>` associate with nothing and
  silently strands the description on a non-focusable element.
- Right-to-left takes three separate repairs. The ambient direction is
  read from the DOM and re-provided to MUI through `ThemeProvider`,
  since `useRtl()` defaults to false and the client sets no theme
  direction. That switches MUI to right-anchored positioning but not
  the transforms paired with it, which normally come from an emotion
  cache running `stylis-plugin-rtl`, so the thumb and the marks are
  mirrored here instead — without it every one of them sits a full
  element width off and the thumb detaches from the track. The numeric
  labels also carry `unicode-bidi: plaintext`, without which a leading
  minus is reordered and `-100` paints as `100-`. `ThemeProvider`
  comes from `@mui/material/styles`, not `@mui/system`, so the context
  is the same module instance that renders the slider.
- The public props narrow MUI's `number | number[]` value and handlers
  down to `number`, and drop `orientation`, so the single-thumb
  horizontal scope is enforced by the types.

Two props cover what the call sites need beyond MUI's own API:
`showMarkTicks` keeps mark labels while hiding their tick dots, which
is what the camera modal's -100/0/100 scale needs, and `animate`
turns off every transition and hover effect. The keyboard focus ring
survives `animate={false}`, since removing it would leave the control
with no visible focus state.

The README covers the two usage patterns the component was designed
for — a value the user reads (volume) and one they only feel
(brightness) — along with the rules that are easy to get wrong.
---
 README.md                                   |   1 +
 package.json                                |  10 +
 src/components/Slider/README.md             | 137 ++++++++++++
 src/components/Slider/assets/example.png    | Bin 0 -> 3224 bytes
 src/components/Slider/component.stories.tsx | 232 ++++++++++++++++++++
 src/components/Slider/component.tsx         | 110 ++++++++++
 src/components/Slider/constants.ts          |  10 +
 src/components/Slider/index.ts              |   1 +
 src/components/Slider/styles.ts             | 167 ++++++++++++++
 src/components/Slider/types.ts              |  67 ++++++
 src/components/index.ts                     |   1 +
 webpack.config.babel.js                     |   1 +
 12 files changed, 737 insertions(+)
 create mode 100644 src/components/Slider/README.md
 create mode 100644 src/components/Slider/assets/example.png
 create mode 100644 src/components/Slider/component.stories.tsx
 create mode 100644 src/components/Slider/component.tsx
 create mode 100644 src/components/Slider/constants.ts
 create mode 100644 src/components/Slider/index.ts
 create mode 100644 src/components/Slider/styles.ts
 create mode 100644 src/components/Slider/types.ts

diff --git a/README.md b/README.md
index 223b759..ef4b118 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@ Below is a list of the components available in this library. Each component has
 - [BBBScrollArea](./src/components/ScrollArea/README.md)
 - [BBBSearch](./src/components/Search/README.md)
 - [BBBSelect](./src/components/Select/README.md)
+- [BBBSlider](./src/components/Slider/README.md)
 - [BBBSpinner](./src/components/Spinner//README.md)
 - [BBBTextAreaInput](./src/components/TextAreaInput/README.md)
 - [BBBTextInput](./src/components/TextInput/README.md)
diff --git a/package.json b/package.json
index bea56d7..6d53f7a 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,13 @@
       "require": "./dist/components/Select.js",
       "default": "./dist/components/Select.js"
     },
+    "./Slider": {
+      "types": "./dist/types/components/Slider/index.d.ts",
+      "node": "./dist/components/Slider.js",
+      "import": "./dist/esm/components/Slider/index.js",
+      "require": "./dist/components/Slider.js",
+      "default": "./dist/components/Slider.js"
+    },
     "./Spinner": {
       "types": "./dist/types/components/Spinner/index.d.ts",
       "node": "./dist/components/Spinner.js",
@@ -211,6 +218,9 @@
       "Select": [
         "dist/types/components/Select/index.d.ts"
       ],
+      "Slider": [
+        "dist/types/components/Slider/index.d.ts"
+      ],
       "Spinner": [
         "dist/types/components/Spinner/index.d.ts"
       ],
diff --git a/src/components/Slider/README.md b/src/components/Slider/README.md
new file mode 100644
index 0000000..ae036d9
--- /dev/null
+++ b/src/components/Slider/README.md
@@ -0,0 +1,137 @@
+# BBBSlider
+
+The `BBBSlider` component provides a horizontal, single-thumb slider for picking a value inside a
+range. It supports labels (`label` and `helperText`), decorative end icons, marks with or without
+tick dots, and a value tooltip.
+
+![Demo](assets/example.png)
+
+## Usage Example
+
+### Slider with a label
+
+```jsx
+import { BBBSlider } from 'bbb-ui-components-react';
+
+<BBBSlider label="Brightness" defaultValue={50} />
+```
+
+### Volume, where the number matters
+
+```jsx
+import { BBBSlider } from 'bbb-ui-components-react';
+
+<BBBSlider
+  label="Volume"
+  min={0}
+  max={100}
+  defaultValue={50}
+  valueLabelDisplay="on"
+  valueLabelFormat={(value) => `${value}%`}
+  getAriaValueText={(value) => `${value} percent`}
+  dataTest="volume-slider"
+  onChange={(event, value) => setVolume(value)}
+/>
+```
+
+### Brightness, where the number does not matter
+
+```jsx
+import { BBBSlider } from 'bbb-ui-components-react';
+import { MdBrightnessLow, MdBrightnessHigh } from 'react-icons/md';
+
+<BBBSlider
+  label="Brightness"
+  min={-100}
+  max={100}
+  defaultValue={0}
+  iconStart={<MdBrightnessLow />}
+  iconEnd={<MdBrightnessHigh />}
+  valueLabelDisplay="off"
+  onChange={(event, value) => setBrightness(value)}
+/>
+```
+
+### Discrete stages with labels only
+
+```jsx
+import { BBBSlider } from 'bbb-ui-components-react';
+
+<BBBSlider
+  label="Webcam grid size"
+  min={1}
+  max={4}
+  step={1}
+  showMarkTicks={false}
+  marks={[
+    { value: 1, label: '1x1' },
+    { value: 2, label: '2x2' },
+    { value: 3, label: '3x3' },
+    { value: 4, label: '4x4' },
+  ]}
+  defaultValue={2}
+  onChangeCommitted={(event, value) => setGridSize(value)}
+/>
+```
+
+## Accessibility
+
+- Give every slider an accessible name: either `label` (which also renders visible text and is
+  wired to the input with `htmlFor`) or `ariaLabel` when the design has no visible label.
+- `helperText` is referenced by the input's `aria-describedby` automatically; `ariaDescribedBy`
+  overrides it when the description lives elsewhere on the page.
+- When `valueLabelFormat` shows something other than the raw value, pass the matching
+  `getAriaValueText` so screen readers announce what the user sees.
+- Keyboard support comes from MUI: arrows move by `step`, Page Up/Page Down jump, Home/End go to
+  the ends.
+
+## Testing
+
+`dataTest` lands on the root element, and the focusable range input gets the same value suffixed
+with `-input`. Drive the input, not the root:
+
+```js
+await page.locator('[data-test="volume-slider-input"]').fill('80');
+```
+
+## Notes
+
+The value tooltip is rendered inside the slider, so a container with `overflow: hidden` can clip it
+when the slider sits at the very top of the container. Use `valueLabelDisplay="off"` or reserve
+vertical space above the slider in that case.
+
+Mark labels are centred on their tick, so the labels at `min` and `max` extend half their width past
+each end of the track. Reserve horizontal padding around the slider, or avoid labelling the extreme
+marks, when the container clips.
+
+`iconStart`/`iconEnd` render at `1.5rem` by default, matching a circle `BBButton`; pass a `size` on
+the icon itself to override it.
+
+## Props
+
+| Property            | Type                                                              | Default  | Description                                                                                                                    |
+| ------------------- | ------------------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `label`             | `string`                                                            |          | The main label text displayed above the slider.                                                                                   |
+| `helperText`        | `string`                                                            |          | The helper text displayed below the label.                                                                                        |
+| `value`             | `number`                                                            |          | The current value; providing it makes the slider controlled.                                                                      |
+| `defaultValue`      | `number`                                                            |          | The initial value used while the slider is uncontrolled.                                                                          |
+| `min`               | `number`                                                            | `0`      | The minimum allowed value.                                                                                                         |
+| `max`               | `number`                                                            | `100`    | The maximum allowed value.                                                                                                         |
+| `step`              | `number \| null`                                                    | `1`      | The granularity the value moves by; `null` snaps to `marks`.                                                                      |
+| `marks`             | `boolean \| { value: number, label?: ReactNode }[]`                 | `false`  | The marks rendered on the track.                                                                                                   |
+| `showMarkTicks`     | `boolean`                                                           | `true`   | If `false`, renders the mark labels without their tick dots.                                                                      |
+| `animate`           | `boolean`                                                           | `true`   | If `false`, disables transitions and hover/drag visual effects so state changes render instantly.                                 |
+| `valueLabelDisplay` | `'auto' \| 'on' \| 'off'`                                           | `'auto'` | When the value tooltip is shown.                                                                                                   |
+| `valueLabelFormat`  | `string \| ((value: number, index: number) => ReactNode)`           |          | Formats the value shown in the tooltip.                                                                                            |
+| `getAriaValueText`  | `(value: number, index: number) => string`                          |          | The text screen readers announce for the current value.                                                                           |
+| `iconStart`         | `React.ReactNode`                                                   |          | A decorative node rendered at the minimum end; it is hidden from screen readers.                                                  |
+| `iconEnd`           | `React.ReactNode`                                                   |          | A decorative node rendered at the maximum end; it is hidden from screen readers.                                                  |
+| `disabled`          | `boolean`                                                           | `false`  | If `true`, the slider is disabled and unresponsive.                                                                               |
+| `onChange`          | `(event: Event, value: number) => void`                             |          | Fired continuously while the user drags or presses a key.                                                                         |
+| `onChangeCommitted` | `(event: React.SyntheticEvent \| Event, value: number) => void`     |          | Fired once, when the interaction ends; prefer it for expensive updates.                                                           |
+| `id`                | `string`                                                            |          | The HTML `id` of the underlying range input; auto-generated when omitted.                                                         |
+| `dataTest`          | `string`                                                            |          | The `data-test` attribute for the root; the range input gets `${dataTest}-input`.                                                 |
+| `ariaLabel`         | `string`                                                            |          | The accessible name for the slider.                                                                                               |
+| `ariaLabelledBy`    | `string`                                                            |          | The ID of the element that labels the slider; ignored when `ariaLabel` is set, and falls back to the rendered label's id when omitted. |
+| `ariaDescribedBy`   | `string`                                                            |          | The ID of the element that describes the slider; falls back to the rendered helper text's id when omitted.                        |
+| `...props`          | `MuiSliderProps`                                                    |          | Any other props are passed down to the underlying Material-UI Slider component.                                                   |
diff --git a/src/components/Slider/assets/example.png b/src/components/Slider/assets/example.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6066783528e3df1866f1b3051ca896a37541cf2
GIT binary patch
literal 3224
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
KMNUMnLSTYUEJro~

literal 0
HcmV?d00001

diff --git a/src/components/Slider/component.stories.tsx b/src/components/Slider/component.stories.tsx
new file mode 100644
index 0000000..c329062
--- /dev/null
+++ b/src/components/Slider/component.stories.tsx
@@ -0,0 +1,232 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MdBrightnessLow, MdBrightnessHigh } from 'react-icons/md';
+import BBBSlider from './component';
+import { VALUE_LABEL_DISPLAY_VALUES, DEFAULT_VALUE_LABEL_DISPLAY } from './constants';
+
+const meta = {
+  title: 'BBBSlider',
+  component: BBBSlider,
+  tags: ['autodocs'],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Main label text displayed above the slider.',
+    },
+    helperText: {
+      control: 'text',
+      description: 'Helper text displayed below the label.',
+    },
+    min: {
+      control: 'number',
+      description: 'Minimum allowed value.',
+    },
+    max: {
+      control: 'number',
+      description: 'Maximum allowed value.',
+    },
+    step: {
+      control: 'number',
+      description: 'Granularity the value can move by; use null with marks to snap to them.',
+    },
+    marks: {
+      control: 'object',
+      description: 'Marks to render on the track; true spreads them by step, or pass an array with labels.',
+    },
+    showMarkTicks: {
+      control: 'boolean',
+      description: 'Renders the tick dots of `marks`; set to false to keep the mark labels only.',
+      table: { defaultValue: { summary: 'true' } },
+    },
+    animate: {
+      control: 'boolean',
+      description: 'Enables transitions and hover/drag visual effects; set to false for instant state changes.',
+      table: { defaultValue: { summary: 'true' } },
+    },
+    valueLabelDisplay: {
+      control: 'select',
+      options: VALUE_LABEL_DISPLAY_VALUES,
+      description: 'Controls when the value tooltip is shown.',
+      table: { defaultValue: { summary: `${DEFAULT_VALUE_LABEL_DISPLAY}` } },
+    },
+    iconStart: {
+      control: false,
+      description: 'Decorative node rendered at the minimum end of the track.',
+    },
+    iconEnd: {
+      control: false,
+      description: 'Decorative node rendered at the maximum end of the track.',
+    },
+    valueLabelFormat: {
+      control: false,
+      description: 'Formats the value shown in the tooltip; receives the raw value.',
+    },
+    getAriaValueText: {
+      control: false,
+      description: 'Returns the text screen readers announce for the current value.',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the slider when true.',
+    },
+    dataTest: {
+      control: 'text',
+      description: 'Value for the data-test attribute on the root; the range input gets `${dataTest}-input`.',
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Accessible name for the slider.',
+    },
+    onChange: {
+      control: false,
+      description: 'Change handler fired continuously while the user drags or presses a key.',
+    },
+    onChangeCommitted: {
+      control: false,
+      description: 'Change handler fired once, when the interaction ends.',
+    },
+  },
+} satisfies Meta<typeof BBBSlider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Bare slider with no label, covering the default 0-100 range. */
+export const Default: Story = {
+  args: { defaultValue: 50, ariaLabel: 'Volume' },
+};
+
+/** Visible label and helper text; clicking the label focuses the slider. */
+export const WithLabel: Story = {
+  args: { label: 'Brightness', helperText: 'Applies to the whole image', defaultValue: 50 },
+};
+
+/** Disabled state, which keeps the label readable but blocks interaction. */
+export const Disabled: Story = {
+  args: { label: 'Brightness', defaultValue: 50, disabled: true },
+};
+
+/** Decorative icons at both ends, the brightness pattern where the number itself is irrelevant. */
+export const WithIcons: Story = {
+  args: {
+    label: 'Brightness',
+    iconStart: <MdBrightnessLow />,
+    iconEnd: <MdBrightnessHigh />,
+    valueLabelDisplay: 'off',
+    min: -100,
+    max: 100,
+    defaultValue: 0,
+    ariaLabel: 'Camera brightness',
+  },
+};
+
+/** Discrete stages with labelled marks, snapping to each step. */
+export const WithMarks: Story = {
+  args: {
+    label: 'Webcam grid size',
+    min: 1,
+    max: 4,
+    step: 1,
+    marks: [
+      { value: 1, label: '1x1' },
+      { value: 2, label: '2x2' },
+      { value: 3, label: '3x3' },
+      { value: 4, label: '4x4' },
+    ],
+    defaultValue: 2,
+    valueLabelDisplay: 'off',
+    ariaLabel: 'Webcam grid size',
+  },
+  decorators: [
+    (StoryComponent) => (
+      <div style={{ paddingLeft: '1.5rem', paddingRight: '1.5rem' }}>
+        <StoryComponent />
+      </div>
+    ),
+  ],
+};
+
+/** Mark labels without the tick dots, reproducing the camera modal's -100/0/100 scale. */
+export const MarksWithoutTicks: Story = {
+  args: {
+    label: 'Brightness',
+    min: -100,
+    max: 100,
+    showMarkTicks: false,
+    marks: [
+      { value: -100, label: '-100' },
+      { value: 0, label: '0' },
+      { value: 100, label: '100' },
+    ],
+    defaultValue: 0,
+    ariaLabel: 'Camera brightness',
+  },
+  decorators: [
+    (StoryComponent) => (
+      <div style={{ paddingLeft: '1.5rem', paddingRight: '1.5rem' }}>
+        <StoryComponent />
+      </div>
+    ),
+  ],
+};
+
+/** Tooltip pinned open, for cases where the number must stay visible while adjusting. */
+export const ValueLabelAlwaysOn: Story = {
+  args: { label: 'Volume', defaultValue: 70, valueLabelDisplay: 'on', ariaLabel: 'Volume' },
+};
+
+/** Percentage formatting through valueLabelFormat, the volume pattern where the number matters. */
+export const PercentageFormat: Story = {
+  args: {
+    label: 'Volume',
+    defaultValue: 70,
+    valueLabelDisplay: 'on',
+    valueLabelFormat: (value: number) => `${value}%`,
+    getAriaValueText: (value: number) => `${value} percent`,
+    ariaLabel: 'Volume',
+  },
+};
+
+/** Stored value and displayed value differ: the range is 0-200 but the user sees -100 to 100. */
+export const OffsetFormat: Story = {
+  args: {
+    label: 'Brightness',
+    min: 0,
+    max: 200,
+    defaultValue: 100,
+    valueLabelDisplay: 'on',
+    valueLabelFormat: (value: number) => `${value - 100}`,
+    getAriaValueText: (value: number) => `${value - 100}`,
+    ariaLabel: 'Camera brightness',
+  },
+};
+
+/** Animation disabled: dragging the thumb and viewing the tooltip show no transitions or hover glow. */
+export const WithoutAnimation: Story = {
+  args: {
+    label: 'Volume',
+    defaultValue: 70,
+    valueLabelDisplay: 'on',
+    animate: false,
+    ariaLabel: 'Volume',
+  },
+};
+
+/** Same slider under a right-to-left ancestor: the track fills from the right. */
+export const RightToLeft: Story = {
+  args: {
+    label: 'Brightness',
+    min: -100,
+    max: 100,
+    defaultValue: 50,
+    valueLabelDisplay: 'on',
+    ariaLabel: 'Camera brightness',
+  },
+  decorators: [
+    (StoryComponent) => (
+      <div dir="rtl">
+        <StoryComponent />
+      </div>
+    ),
+  ],
+};
diff --git a/src/components/Slider/component.tsx b/src/components/Slider/component.tsx
new file mode 100644
index 0000000..6f21302
--- /dev/null
+++ b/src/components/Slider/component.tsx
@@ -0,0 +1,110 @@
+import React, { JSX, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
+import { SliderProps } from './types';
+import * as Styled from './styles';
+import { DEFAULT_ANIMATE, DEFAULT_SHOW_MARK_TICKS, DEFAULT_VALUE_LABEL_DISPLAY } from './constants';
+
+/**
+ * A horizontal, single-thumb slider for picking a value inside a range.
+ *
+ * It supports labels (label and helperText), decorative end icons, marks and a value tooltip,
+ * and keeps its accessible name and description on the underlying range input.
+ *
+ */
+function Slider ({
+  label,
+  helperText,
+  iconStart,
+  iconEnd,
+  showMarkTicks = DEFAULT_SHOW_MARK_TICKS,
+  animate = DEFAULT_ANIMATE,
+  valueLabelDisplay = DEFAULT_VALUE_LABEL_DISPLAY,
+  onChange,
+  onChangeCommitted,
+  id: providedId,
+  dataTest,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
+  slotProps,
+  ...rest
+}: SliderProps): JSX.Element {
+  const generatedUniqueId = useId();
+  const id = providedId ?? generatedUniqueId;
+  const labelId = label ? `${id}-label` : undefined;
+  const helperTextId = helperText ? `${id}-helper` : undefined;
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [isRtl, setIsRtl] = useState(false);
+
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return undefined;
+
+    const readDirection = () => {
+      setIsRtl(window.getComputedStyle(wrapper).direction === 'rtl');
+    };
+
+    readDirection();
+    const observer = new MutationObserver(readDirection);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
+
+    return () => observer.disconnect();
+  }, []);
+
+  const outerTheme = useTheme();
+  const theme = useMemo(
+    () => (isRtl && outerTheme.direction !== 'rtl'
+      ? createTheme(outerTheme, { direction: 'rtl' })
+      : outerTheme),
+    [outerTheme, isRtl],
+  );
+
+  const handleChange = useCallback((event: Event, value: number | number[]) => {
+    onChange?.(event, Array.isArray(value) ? value[0] : value);
+  }, [onChange]);
+
+  const handleChangeCommitted = useCallback((
+    event: React.SyntheticEvent | Event,
+    value: number | number[],
+  ) => {
+    onChangeCommitted?.(event, Array.isArray(value) ? value[0] : value);
+  }, [onChangeCommitted]);
+
+  return (
+    <Styled.SliderWrapper ref={wrapperRef} $valueLabelSpace={valueLabelDisplay !== 'off'}>
+      {(label || helperText) && (
+        <Styled.TextWrapper htmlFor={id}>
+          {label && <Styled.Title id={labelId}>{label}</Styled.Title>}
+          {helperText && <Styled.HelperText id={helperTextId}>{helperText}</Styled.HelperText>}
+        </Styled.TextWrapper>
+      )}
+      <Styled.SliderRow $showMarkTicks={showMarkTicks} $animate={animate} $isRtl={isRtl}>
+        {iconStart && <Styled.IconWrapper aria-hidden>{iconStart}</Styled.IconWrapper>}
+        <ThemeProvider theme={theme}>
+          <Styled.MaterialSlider
+            {...rest}
+            valueLabelDisplay={valueLabelDisplay}
+            onChange={handleChange}
+            onChangeCommitted={handleChangeCommitted}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabel ? undefined : ariaLabelledBy || labelId}
+            data-test={dataTest}
+            slotProps={{
+              ...slotProps,
+              input: {
+                id,
+                'aria-describedby': ariaDescribedBy || helperTextId,
+                ...(dataTest ? { 'data-test': `${dataTest}-input` } : {}),
+                ...(typeof slotProps?.input === 'object' ? slotProps.input : {}),
+              },
+            }}
+          />
+        </ThemeProvider>
+        {iconEnd && <Styled.IconWrapper aria-hidden>{iconEnd}</Styled.IconWrapper>}
+      </Styled.SliderRow>
+    </Styled.SliderWrapper>
+  );
+}
+
+export default Slider;
diff --git a/src/components/Slider/constants.ts b/src/components/Slider/constants.ts
new file mode 100644
index 0000000..628d7fa
--- /dev/null
+++ b/src/components/Slider/constants.ts
@@ -0,0 +1,10 @@
+export const VALUE_LABEL_DISPLAYS = {
+  AUTO: 'auto',
+  ON: 'on',
+  OFF: 'off',
+} as const;
+
+export const VALUE_LABEL_DISPLAY_VALUES = Object.values(VALUE_LABEL_DISPLAYS);
+export const DEFAULT_VALUE_LABEL_DISPLAY = VALUE_LABEL_DISPLAYS.AUTO;
+export const DEFAULT_SHOW_MARK_TICKS = true;
+export const DEFAULT_ANIMATE = true;
diff --git a/src/components/Slider/index.ts b/src/components/Slider/index.ts
new file mode 100644
index 0000000..58fd15e
--- /dev/null
+++ b/src/components/Slider/index.ts
@@ -0,0 +1 @@
+export { default as BBBSlider } from './component';
diff --git a/src/components/Slider/styles.ts b/src/components/Slider/styles.ts
new file mode 100644
index 0000000..edd3929
--- /dev/null
+++ b/src/components/Slider/styles.ts
@@ -0,0 +1,167 @@
+import { Slider } from '@mui/material';
+import { styled as materialStyled } from '@mui/material/styles';
+import styled from 'styled-components';
+import {
+  colorBrand1,
+  colorNeutral3,
+  colorWhite,
+  colorShadowDefault,
+  colorTextDefault,
+  colorTextLight,
+  colorIconDefault,
+  colorBorderFocusRing,
+} from '../../stylesheets/palette';
+import {
+  fontSizeXSmall,
+  fontSizeDefault,
+  fontSizeBig,
+  fontWeightDefault,
+  fontWeightLight,
+} from '../../stylesheets/typography';
+import {
+  spacingXSmall,
+  spacingSmall,
+  spacingXLarge,
+  borderRadiusSmall,
+} from '../../stylesheets/sizing';
+import { StyledSliderRowProps, StyledSliderWrapperProps } from './types';
+
+const THUMB_SIZE = '1rem';
+const TRACK_HEIGHT = '0.3125rem';
+const MARK_SIZE = '0.25rem';
+const ICON_SIZE = '1.5rem';
+
+export const SliderWrapper = styled.div<StyledSliderWrapperProps>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  ${({ $valueLabelSpace }) => $valueLabelSpace && `
+    gap: ${spacingXLarge};
+  `}
+`;
+
+export const TextWrapper = styled.label`
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+`;
+
+export const Title = styled.span`
+  color: ${colorTextDefault};
+  font-size: ${fontSizeBig};
+  font-weight: ${fontWeightLight};
+`;
+
+export const HelperText = styled.span`
+  color: ${colorTextLight};
+  font-size: ${fontSizeDefault};
+  font-weight: ${fontWeightLight};
+`;
+
+export const SliderRow = styled.div<StyledSliderRowProps>`
+  display: flex;
+  align-items: center;
+  gap: ${spacingSmall};
+  width: 100%;
+
+  ${({ $showMarkTicks }) => !$showMarkTicks && `
+    & .MuiSlider-mark {
+      display: none;
+    }
+  `}
+
+  ${({ $animate }) => !$animate && `
+    & .MuiSlider-thumb,
+    & .MuiSlider-track,
+    & .MuiSlider-valueLabel {
+      transition: none;
+    }
+
+    & .MuiSlider-thumb:hover:not(.Mui-focusVisible),
+    & .MuiSlider-thumb.Mui-active:not(.Mui-focusVisible) {
+      box-shadow: 0 2px 4px 0 ${colorShadowDefault};
+    }
+  `}
+
+  ${({ $isRtl }) => $isRtl && `
+    /* MUI only mirrors right:-anchored positioning under RTL, not the LTR transforms paired
+       with it (that half normally comes from stylis-plugin-rtl, which this library can't add) */
+    && .MuiSlider-thumb {
+      transform: translate(50%, -50%);
+    }
+
+    && .MuiSlider-mark {
+      transform: translate(1px, -50%);
+    }
+
+    && .MuiSlider-markLabel {
+      transform: translateX(50%);
+    }
+  `}
+`;
+
+export const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  color: ${colorIconDefault};
+  font-size: ${ICON_SIZE};
+`;
+
+export const MaterialSlider = materialStyled(Slider)({
+  color: colorBrand1,
+  height: TRACK_HEIGHT,
+  '& .MuiSlider-rail': {
+    backgroundColor: 'currentColor',
+    opacity: 0.38,
+  },
+  '& .MuiSlider-track': {
+    border: '1px solid currentColor',
+    backgroundColor: colorBrand1,
+  },
+  '& .MuiSlider-thumb': {
+    height: THUMB_SIZE,
+    width: THUMB_SIZE,
+    backgroundColor: 'currentColor',
+    boxShadow: `0 2px 4px 0 ${colorShadowDefault}`,
+    '&:hover, &.Mui-focusVisible': {
+      boxShadow: `0 0 0 0.5rem ${colorBorderFocusRing}`,
+    },
+    '&.Mui-active': {
+      boxShadow: `0 0 0 0.875rem ${colorBorderFocusRing}`,
+    },
+  },
+  '& .MuiSlider-mark': {
+    width: MARK_SIZE,
+    height: MARK_SIZE,
+    borderRadius: '50%',
+    backgroundColor: colorNeutral3,
+    '&.MuiSlider-markActive': {
+      backgroundColor: colorWhite,
+    },
+  },
+  '& .MuiSlider-markLabel': {
+    color: colorTextLight,
+    fontSize: fontSizeXSmall,
+    // RTL: resolve each label's own direction so a leading minus sign doesn't get reordered
+    unicodeBidi: 'plaintext',
+  },
+  '& .MuiSlider-valueLabel': {
+    backgroundColor: colorTextDefault,
+    color: colorWhite,
+    fontSize: fontSizeXSmall,
+    fontWeight: fontWeightDefault,
+    borderRadius: borderRadiusSmall,
+    padding: `${spacingXSmall} ${spacingSmall}`,
+    '& .MuiSlider-valueLabelLabel': {
+      // RTL: resolve each label's own direction so a leading minus sign doesn't get reordered
+      unicodeBidi: 'plaintext',
+    },
+  },
+  '&.Mui-disabled': {
+    color: colorNeutral3,
+    '& .MuiSlider-track': {
+      backgroundColor: colorNeutral3,
+    },
+  },
+});
diff --git a/src/components/Slider/types.ts b/src/components/Slider/types.ts
new file mode 100644
index 0000000..6e1a6a7
--- /dev/null
+++ b/src/components/Slider/types.ts
@@ -0,0 +1,67 @@
+import React from 'react';
+import { SliderProps as MuiSliderProps } from '@mui/material';
+import { VALUE_LABEL_DISPLAY_VALUES } from './constants';
+
+export type ValueLabelDisplay = typeof VALUE_LABEL_DISPLAY_VALUES[number];
+
+export interface StyledSliderRowProps {
+  $showMarkTicks: boolean;
+  $animate: boolean;
+  $isRtl: boolean;
+}
+
+export interface StyledSliderWrapperProps {
+  $valueLabelSpace: boolean;
+}
+
+export interface SliderProps extends Omit<MuiSliderProps,
+  'orientation' | 'value' | 'defaultValue' | 'onChange' | 'onChangeCommitted' | 'valueLabelDisplay'
+> {
+  /** Main label text displayed above the slider. */
+  label?: string;
+
+  /** Helper text displayed below the label. */
+  helperText?: string;
+
+  /** Current value; providing it makes the slider controlled. */
+  value?: number;
+
+  /** Initial value used while the slider is uncontrolled. */
+  defaultValue?: number;
+
+  /** Change handler fired continuously while the user drags or presses a key. */
+  onChange?: (event: Event, value: number) => void;
+
+  /** Change handler fired once, when the interaction ends; prefer it for expensive updates. */
+  onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number) => void;
+
+  /** Decorative node rendered at the minimum end of the track. */
+  iconStart?: React.ReactNode;
+
+  /** Decorative node rendered at the maximum end of the track. */
+  iconEnd?: React.ReactNode;
+
+  /** Controls when the value tooltip is shown. @default 'auto' */
+  valueLabelDisplay?: ValueLabelDisplay;
+
+  /** Renders the tick dots of `marks`; set to false to keep the mark labels only. @default true */
+  showMarkTicks?: boolean;
+
+  /** Enables transitions and hover/drag visual effects; set to false for instant state changes. @default true */
+  animate?: boolean;
+
+  /** HTML `id` applied to the underlying range input; auto-generated via `useId` when omitted. */
+  id?: string;
+
+  /** Value for the `data-test` attribute on the root; the range input gets `${dataTest}-input`. */
+  dataTest?: string;
+
+  /** Accessible name for the slider. */
+  ariaLabel?: string;
+
+  /** ID of the element that labels the slider; ignored when `ariaLabel` is set, and falls back to the rendered label's id when omitted. */
+  ariaLabelledBy?: string;
+
+  /** ID of the element that describes the slider; falls back to the rendered helper text's id when omitted. */
+  ariaDescribedBy?: string;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 230d706..6c16524 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -9,6 +9,7 @@ export { BBBNavigation } from './Navigation';
 export { BBBScrollArea } from './ScrollArea';
 export { BBBSearch } from './Search';
 export { BBBSelect } from './Select';
+export { BBBSlider } from './Slider';
 export { BBBSpinner } from './Spinner';
 export { BBBTextAreaInput } from './TextAreaInput';
 export { BBBTextInput } from './TextInput';
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 461ae7f..49b575f 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -13,6 +13,7 @@ export default {
     ScrollArea: './src/components/ScrollArea/index.ts',
     Search: './src/components/Search/index.ts',
     Select: './src/components/Select/index.ts',
+    Slider: './src/components/Slider/index.ts',
     Spinner: './src/components/Spinner/index.ts',
     TextAreaInput: './src/components/TextAreaInput/index.ts',
     TextInput: './src/components/TextInput/index.ts',