# @intility/bifrost-css

## 6.15.0

### Minor Changes

- a6ae3ec: Add `.bf-kbd` (and `<kbd>` inside `.bf-elements`/`.bf-content`) styling for documenting hotkey keypress. #977

### Patch Changes

- 4504cd4: `<Drawer>` with overlay no longer hides the page scrollbar when open. Before,
  the scrollbar disappeared and the page content shifted by the scrollbar width,
  then jumped back when the drawer closed. The page behind the overlay can now
  scroll while the drawer is open.
- 9fa0320: Increase `.bf-kbd` border contrast to meet WCAG.

## 6.14.0 - 2026-10-05

### Minor Changes

- d9b8169: Drawer: Add a `16px` gap between the header and the content, matching the gap in `Modal`. #993

  If you added your own spacing below the drawer header, you can remove it to avoid a double gap.

### Patch Changes

- aaafc2c: List markers inside a `.bfc-*-bg` class (for example `<Message>`) now inherit
  the text color, the same as links. Before, the markers used the theme color.
  This color can match the background, and then the markers are not visible.

## 6.13.2 - 2026-09-14

### Patch Changes

- 9158fd0: Update inactive styling for Checkbox and Radio #828

## 6.13.1 - 2026-09-07

### Patch Changes

- 57b15b6: fix: update spacing around `<hr>` placed inside `<Nav.Group>` to match new nav css

## 6.13.0 - 2026-09-07

### Minor Changes

- e54d3e0: `<Nav>`: reworked sizing (#887)

  - Top bar height reduced from `56px` to `49px`, all top bar buttons are now
    `48x48px` and borderless
  - Collapsed sidebar width reduced from `56px` to `49px`
  - `<Nav.Item>` and `<Nav.Group>` button in sidebar is now `48px` tall (230x48
    expanded, 48x48 collapsed) with a `4px` inset
  - `<Nav.Group>` content and dropout padding reduced from `8px` to `4px`, dropout
    heading inline padding from `24px` to `20px`
  - `<Nav.Search>` now uses the small `32px` input variant with corrected icon
    alignment in top bar, sidebar and collapsed dropout

## 6.12.0 - 2026-08-27

### Minor Changes

- b7eb5a6: All `.bf-card-*` classes are now deprecated and scheduled for removal in `7.0`.
  Compose your own cards using [`alternative class
names`](https://bifrost.intility.com/css/box) instead.
  Restyled temporarily to make existing cards follow new [Article
  card](https://bifrost.intility.com/design/article-card) styling.

## 6.11.2 - 2026-08-03

### Patch Changes

- 20e00ff: fix: `Tabs` trigger text color changed from `--bfc-base-c-2` to `--bfc-base-c` for better contrast

## 6.11.1 - 2026-07-30

### Patch Changes

- f128de9: fix: `.bf-ellipsis-padded` margin and padding increased from `3px` to `4px` to acommodate link styling `2px` outline + `2px` outline-offset

## 6.11.0 - 2026-07-02

### Minor Changes

- 6479f99: Add `--bf-table-radius` variable to customize `.bf-table` border radius. #439

## 6.10.0 - 2026-05-29

### Minor Changes

- c9df08a: `.bf-button-neutral` border color changed from `bfc-neutral` to `bfc-base-c-wcag` #810

### Patch Changes

- 49af373: Fixes for anchor (link) styling:
  - now properly renders ~2px underline on hover (including all zoom/scaling levels and smallest font size - for some reason browsers seem to "round" 1.998 down to 1)
  - "a" selector now global for underline styling, ensures consistency including breadcrumb links. #761
  - anchor tags without a `href` attribute no longer styled as a bifrost link (same as native browser behavior. if you _do_ want link styling on a non-clickable anchor for some reason, use `.bf-link`)

## 6.9.0 - 2026-05-18

### Minor Changes

- 9ba2fb3: Add `.bf-checkbox-inactive` class for checkbox-family controls (checkbox, radio, switch, and their card variants). Dims the toggle icon and (for cards) the border while keeping the label/chrome fully visible, so the control reads as a focusable, tooltip-friendly replacement for `disabled`. Apply alongside `.bf-checkbox` or `.bf-checkboxcard`; the same class covers both because `.bf-checkboxcard` reuses the checkbox icon styles.

## 6.8.3 - 2026-05-13

### Patch Changes

- 6983cff: Improved syntax highlighting support for YAML

## 6.8.2 - 2026-05-06

### Patch Changes

- 5739357: fix label color for fieldgroup component
- 12dfd3a: update css for code snippets to match syntax highlighting theme (prism) and highlighter component

## 6.8.1 - 2026-05-06

### Patch Changes

- c829b26: Fixes for `@intility/bifrost-react-highlighter`:
  - Avoid crash when `children` is not a string (e.g. `undefined` or a React element). Non-string children now render as-is, bypassing the syntax highlighter.
  - Tweak spacing so non-numbered code blocks keep their left padding, while numbered blocks still align to the gutter.
  - Move the horizontal scroll rule out of `bifrost-prism.css` (it incorrectly applied to all `pre.prismjs` elements).

## 6.8.0 - 2026-05-05

### Minor Changes

- 420a77e: Expose a Bifrost syntax-highlighting theme for Prism as `dist/bifrost-prism.css`. Works with classic `prismjs`, `prism-react-renderer`, and Docusaurus. Uses Bifrost CSS variables so one stylesheet covers both light and dark mode. Read more at [syntax highlighting docs](https://bifrost.intility.com/css/syntax-highlighting).

## 6.7.2 - 2026-03-24

### Patch Changes

- 88d20ea: fix `width: fit-content` on labels only applying to `.bf-label` to avoid unintended side effects on checkboxes

## 6.7.1 - 2026-02-26

### Patch Changes

- 52e4453: fix: nested accordions with differing styles and variants should no longer
  inherit styling from parent. #683
- c048c6d: fix `bf-label` should no longer be full width. To prevent users from accidentally refocus inputs on click

## 6.7.0 - 2026-02-10

### Minor Changes

- e12feee: ## Teal theme variables:

  The listed variables are now using a darker color in light mode. No changes for dark mode.
  - `bfc-theme-c`
  - `bfc-theme-fade`

  ## Changed foreground (text/icon) colors

  The listed variables are now using a darker color for light mode, and a lighter color for dark mode for these variables:
  - `bfc-theme-fade-c`
  - `bfc-brand-fade-c`
  - `bfc-chill-fade-c`
  - `bfc-attn-fade-c`
  - `bfc-warning-fade-c`
  - `bfc-success-fade-c`
  - `bfc-alert-fade-c`

  ## Changed background colors
  - `bfc-success-fade` has become lighter in light mode and darker in dark mode
  - `bfc-alert-fade` has become darker in light and dark mode
  - `bfc-brand-fade` has become darker in light mode. No change in dark mode.

  ## Themed flat button

  Changed variables
  - Background: from `bfc-theme-c` to `bfc-theme-fade`
  - Foreground (text/icon): from `bfc-theme` to `bfc-theme-fade-c`

## 6.6.3 - 2026-01-22

### Patch Changes

- c0dd80c: Fix: Drawer transition should no longer be shown when toggling position between
  "right" and "bottom" #628

## 6.6.2 - 2026-01-19

### Patch Changes

- c3a8805: Fixed double border issue when hovering inactive styled tabs on some zoom levels. #623

## 6.6.1 - 2025-12-12

### Patch Changes

- 482913a: Fix: replace internal use of `base-dimmed` with `base-c-dimmed` for border color
  and update docs.

## 6.6.0 - 2025-12-11

### Minor Changes

- 7a8d094: New class `.bf-checkbox-inherit` allows checkbox, radio and switch to use
  current text color to ensure contrast to its background.

### Patch Changes

- 7a8d094: Fix: `<label>` should now correctly inherit current text color, even if placed
  inside `.bf-content` or `.bf-elements`.

## 6.5.4 - 2025-12-05

### Patch Changes

- 619352a: Changed from using `hsla()` to `color-mix()` for translucent colors.
- 2f1d908: Fix: Minor adjustment to `.bf-message-expandable .bf-message-header` padding to
  match accordion height. #505

## 6.5.3 - 2025-12-01

### Patch Changes

- c80e40e: Fix: Update focus and disabled styling for `.bf-file-input-area`, now has same
  focus styling as buttons, and `opacity: 0.3` when disabled.
- 60be5ae: Fix: Link tabs (`<a>` inside `.bf-tabs`) should now be properly centered. #547

## 6.5.2 - 2025-11-28

### Patch Changes

- c1121d3: Changes to `.bf-label-feedback`:
  - No longer has `text-align: right`.
  - Support `.bfc-*` color classes by lowering specificity.

## 6.5.1 - 2025-11-27

### Patch Changes

- 76b01ab: - Add `state="alert"` prop to `<Checkbox>` components:
  - `<Checkbox>`
  - `<CheckboxCard>`
  - `<Radio>`
  - `<RadioCard>`
  - `<Switch>`
  - `<SwitchCard>`
  - `<Checkbox indeterminate>` now uses theme color
- fd58f73: fix rendering issues in firefox with .bf-break-word
- 036fd40: Update `.bf-tabs` and `.bf-tab` to support descendant `.bf-badge`.

## 6.5.0 - 2025-11-20

### Minor Changes

- a4c8f66: Reworked `<Nav.Item>`:
  - Now uses flexbox internally - hopefully we didn't break anything (let us know!)
  - Centered icons properly this time maybe.
  - New `external` prop displays an arrow equivalent to `<Box.Arrow external>` #480
  - The `name` prop of `<Nav.Group>` reworked slightly to behave the same for collapsed
    and non-collapsed sidebar.
- 0100f2c: Add new `state` prop for `<Dropdown.Item>`:
  - `"default"`
  - `"alert"`
  - `"success"`
  - `"warning"`
  - `"inactive"`

## 6.4.1 - 2025-11-07

### Patch Changes

- 4fc3607: Fix: Changed font-size for `.bf-nav-header` from small (12px) to medium (14px). #489

## 6.4.0 - 2025-10-22

### Minor Changes

- 4ec68a5: Some visual and prop updates to tabs, to make it easier to insert into a section. Related to: #87 and #16
  - Added `paddingInline` prop for `<Tabs>`
  - Added `padding` prop for `<Tabs.Item>`
  - `<Tabs>` height changed to match `<Section.Header>`

  #### Basic tabs
  - Changed padding for `<Tabs.Item>`
  - Added gap between each `<Tabs.Item>` (from `0px` to `16px`)

  #### Styled tabs
  - Changed padding for `<Tabs.Item>`

- cbd329a: New prop `loading` for `<ProgressBar>` which adds animated loading stripes

## 6.3.2 - 2025-10-14

### Patch Changes

- 75be909: Fix ellipsis tooltip not working on buttons and tags by adding `pointer-events: none` to the ::before pseudo-element

## 6.3.1 - 2025-10-08

### Patch Changes

- d4ee37c: Changed for progress bar:
  - `.bf-progressbar` bg changed from `theme-c-2` to `base`
  - `.bf-progressbar-progress` bg changed from `theme` to `base-c-theme`
  - Disabled transition for users who `prefers-reduced-motion`

## 6.3.0 - 2025-10-08

### Minor Changes

- 4d55846: - Increase default border-radius of `<Message>` from `8px` to `12px`.
  - Add new `radius` prop to `<Message>`, accepts one of:
    - `"none"` = no border radius
    - `"xs"` = `4px`
    - `"s"` = `8px`
    - `"m"`= `12px` (default)
    - `"l"` = `16px`
    - `"xl"` = `24px`

## 6.2.2 - 2025-10-06

### Patch Changes

- 4e2e89a: Fix: Content inside `<main>` should no longer overlap nav top/side bar. #421

## 6.2.1 - 2025-09-30

### Patch Changes

- 0fc84d4: Fix: Links wrapping `<Section>` elements should now get appropriate keyboard
  focus styling.

## 6.2.0 - 2025-09-19

### Minor Changes

- edfc022: Changed `neutral`-variables (#368):
  - `--bfc-neutral` (dark mode) is lighter than before.
  - `--bfc-neutral-2` (dark mode) is lighter than before.
  - `--bfc-neutral` (light mode) is darker than before.
  - `--bfc-neutral-2` (light mode) is darker than before.
  - `--bfc-neutral-c` (light mode) is darker than before.
  - `--bfc-neutral-fade-c` (light mode) is darker than before.
  - `--bfc-neutral-fade-c` (dark mode) is lighter than before.

## 6.1.0 - 2025-08-27

### Minor Changes

- 3a06ee4: Slight restyling of Nav.Logo #211
  - Larger logo graphic and font size for tablet/desktop
  - Smaller logo, font, and spacing for mobile
  - New SVG file for "it" fallback logo

## 6.0.0 - 2025-08-13

### Major Changes

- 5de0e05: No changes, only bumping major to keep in sync with `bifrost-react` package.

## 5.5.0 - 2025-08-07

### Minor Changes

- a79e31b: Feat: Added `.bf-checkboxcard-left` class to allow left-aligned icon. #246
  Fix: Spacing for switch toggle inside `.bf-checkboxcard`.

### Patch Changes

- 26b8063: Add focus styling for `recharts` (`accessibilityLayer` is default active since v3) #258
- 96b38eb: Minor formatting changes after updating `stylelint` config intarnally.

## 5.4.1 - 2025-07-30

### Patch Changes

- 4dc9711: Fix: Simplify `.bf-fieldgroup-item` selectors so disabled fieldgroup items get correct text color. #272

## 5.4.0 - 2025-07-22

### Minor Changes

- 3180fb3: Support html attribute `data-bf-color-mode` to set color mode.

### Patch Changes

- 5ca8cab: Explicitly set `font-size` on `.bf-modal` to avoid inheriting #254

## 5.3.0 - 2025-07-04

### Minor Changes

- b16e76d: Added new prop `readOnly` and changed `disabled` styling for:
  - `<Input>`
  - `<TextArea>`
  - `<FieldGroup>`
  - `<Label>`
    Changed icon from "ban" to "lock" for disabled (and readOnly) labels.

## 5.2.0 - 2025-07-02

### Minor Changes

- a161a0c: feat: add `noArrow` and `unstyled` props to `<Dropdown>` to allow custom styling

## 5.1.1 - 2025-06-24

### Patch Changes

- aea5b6f: fix: inactive filled button should not have a border color #225

## 5.1.0 - 2025-06-02

### Minor Changes

- 75033e2: - Added new theme colors
  - `.bf-theme-pink` applies a pink theme (equivalent to "attn").
  - `.bf-theme-yellow` applies a yellow theme
    - Equivalent to "warning" in dark mode
    - A new "gold/tan" color in light mode
    - While in yellow theme, do not use `--bfc-warning` (e.g. inverted warning badge) on `--bfc-theme` background (this will look like it is working in light mode, but will be invisible in dark mode)
  - `<Box theme>` prop now allows `"pink"` and `"yellow"` values.
  - `--bfc-theme-c` has been updated for all color themes in light mode. It is
    now using a lighter color to establish WCAG-approved contrast against main
    colors (`--bfc-theme`, `--bfc-theme-2`, `--bfc-theme-3`).

## 5.0.6 - 2025-05-27

### Patch Changes

- 8267f6a: `--bfc-theme-2` value updated to match figma. Fixes #198
- c7dfe7f: fix text `color` for filled input icon button. #199

## 5.0.5 - 2025-05-07

### Patch Changes

- 3fd8295: Tweaked size of `<button>` in `.bf-accordion-item-title` to better match
  `.bf-section-header`.
  Added `border-top` to `.bf-accordion-item-content` for "styled" variant.
- 87f41a8: Fix: `.bf-checkbox-button` height should now match Figma component properly
  (`40px` height, or `32px` when `small`) #142
- 41412ec: Fix: Prevent `<Tooltip>` and `<Dropdown>` from overflowing viewport width. #148

## 5.0.4 - 2025-04-28

### Patch Changes

- 15a5ea0: Fix: `.bf-state-icon` icon color (used by `<Input state="warning">`) should be `base-c` by default. #127

## 5.0.3 - 2025-04-04

### Patch Changes

- 391862a: Fix: Add explicit `margin: auto` to `.bf-modal` (Should override tailwind 4 CSS preflight reset) #113

## 5.0.2 - 2025-04-01

### Patch Changes

- e136063: Fix: checkbox icon, radio icon, switch toggle, and their labels should align better with inline elements #51
- 6d67f5f: Fix: Explicitly set `font-feature-settings: normal` for `.bf-open-sans` to
  prevent inheriting wrong font settings from parent. #86
- 4b313b9: Fix: Changed neutral flat button (`.bf-button-flat.bf-button-neutral`) color from `--bfc-neutral` to `--bfc-base-c` so it looks less disabled by default.

## 5.0.1 - 2025-03-26

### Patch Changes

- b1a6a7f: Fix: Revert some color values and fixed values for `--base-c-success`, `--base-dimmed`, and `--bfc-base-disabled`.

## 5.0.0 - 2025-03-26

### Major Changes

- a40486b: Styling changes:
  - `.bf-message` padding increased from `12px` to `16px`
  - New `.bf-link` styling. Improved underline visibility.
  - `.bf-code` no longer `inline-block` in order to support new `.bf-link` styling
  - Added theme classes, can be applied to any element (use `<html>` to use as
    global app theme)
    - `.bf-theme-teal`
    - `.bf-theme-purple`
  - Added new color classes
    - `.bfc-neutral-bg`
    - `.bfc-neutral-fade-bg`
    - `.bfc-brand-bg`
    - `.bfc-brand-fade-bg`
    - `.bfc-chill-fade-bg`
    - `.bfc-attn-fade-bg`
    - Updated `badge` styling to use new class names.
  - Added new color variables
    - `--bfc-base-c-brand` (teal)
    - `--bfc-theme-hc` (dynamic)
    - `--bfc-theme-fade`
    - `--bfc-theme-fade-c`
    - `--bfc-neutral` (grayscale)
    - `--bfc-neutral-c`
    - `--bfc-neutral-hc`
    - `--bfc-neutral-fade`
    - `--bfc-neutral-fade-c`
    - `--bfc-brand` (teal)
    - `--bfc-brand-c`
    - `--bfc-brand-fade-c`
    - `--bfc-brand-fade`
    - `--bfc-brand-hc`
    - `--bfc-chill-fade-c` (purple)
    - `--bfc-chill-fade`
    - `--bfc-chill-hc`
    - `--bfc-attn-fade-c` (pink)
    - `--bfc-attn-fade`
    - `--bfc-attn-hc`
    - `--bfc-success-hc` (green)
    - `--bfc-warning-hc` (yellow)
    - `--bfc-alert-hc` (red)
  - Changed values for
    - `--bfc-theme` (dark mode)
    - `--bfc-theme-2` (dark mode)
    - `--bfc-theme-3` (dark mode)
    - `--bfc-theme-c` (dark mode)
    - `--bfc-theme-c-2` (dark mode)
    - `--bfc-chill`
    - `--bfc-chill-c`
  - Removed class names:
    - `.bfc-chill-c-bg` - use `.bfc-chill-fade-bg` instead
    - `.bfc-attn-c-bg` - use `.bfc-attn-fade-bg` instead
    - `.bfc-base-c-theme-bg` - use `.bfc-theme-bg` instead
    - `.bfc-base-c-chill-bg` - use `.bfc-chill-bg` instead
    - `.bfc-base-c-attn-bg` - use `.bfc-attn-bg` instead
    - `.bfc-base-c-bg` and `.bfc-base-c-1-bg` - use `.bfc-inverted-bg` instead
    - `.bfc-dimmed-c-bg` - use `.bfc-inverted-2-bg` instead
  - Removed variables:
    - `--bfc-theme-c-base-3`
      - use `--bfc-theme-hc` on `--bfc-theme` backgrounds
      - otherwise use `--bfc-base-3`
    - `--bfc-theme-gradient` and `--bfc-theme-grad`
      - use `linear-gradient(90deg, var(--bfc-theme-3), var(--bfc-theme-1))`
    - `--bfc-theme-hs` (internal)
    - `--bfc-base-hs` (internal)
- 11e52eb: Removed deprecated class names:
  - `.bf-button-left-icon`
  - `.bf-button-right-icon`
  - `.bf-small-it-logo`
  - `.bf-full-intility-logo`
  - `.bf-nav-top-appname`
  - `.bf-nav-side-appname`
  - `.bf-nav-group-item-circle-wrapper`
  - `.bf-nav-group-item-circle`
  - `.bf-nav-group-item-dot-circle`
  - `.bf-spinner-container`
  - `.bf-spinner-color`
  - `.bf-spinner-label`
  - `.bf-overlay` (used by `<Spinner>`)
- 3e16543: Bifrost spacing `--bfs\*` CSS variables now defined using `px` instead of `rem`. Only noticable when using a custom font-size browser setting.
- Removed css variable: `--bfl-border-radius` (deprecated in 4.x)
  - use `--bf-radius-xs` for `4px` or `--bf-radius` for `12px` instead.
- Removed class: `.bfl-border-radius` (deprecated in 4.x)
  - use `.bf-radius-xs` for `4px` or `.bf-radius` for `12px` instead.

## 4.18.3 - 2025-02-26

### Patch Changes

- 1e2116f: update package metadata

## 4.18.2 - 2025-02-14

### Patch Changes

- 66a9741: Fix: Feedback text for datepicker in `alert` state should now correctly be colored red.
- 8bc2846: Fix: Floating message `box-shadow` should no longer be cut off, leaving only the corners visible. #813

## 4.18.1 - 2025-01-29

### Patch Changes

- 53e3e7b: fix: `<Ellipsis>` and `.bf-ellipsis` should now work for single-word content,
  and also not break on hyphens for single line (will take all available width)

## 4.18.0 - 2025-01-13

### Minor Changes

- 96071ef: - New `.bf-menu` and `.bf-menu-item` classes suitable for creating generic menus (or a step-bar)
  - `.bf-menu-horizontal` applies `flex-direction: row;` and `flex-grow: 1` for its children
  - New `.bf-step-icon` class to create an icon suitable for a step bar (or menu)

### Patch Changes

- 49c20c4: Fix: Checkbox icon should be better centered when using "button" styled checheckboxes #791
- 1716d20: Fix: The bottom 1px of "Skip to main" button should no longer be visible regardless of browser/zoom level while hidden #810

## 4.17.0 - 2024-12-13

### Minor Changes

- 10509f3: - Introduced `padded` parameter to `<Ellipsis>` component to prevent clipping of focus outline
  - Added `bf-ellipsis-padded` css class

### Patch Changes

- eb3b1cc: Fix: Text color should be `base-c-2` for disabled inputs (when they have a value).
- 97de3fe: fix: progressbar fill `.progressbar-progress` should no longer overflow its container `.bf-progressbar` #802
- 174f259: Fix: hovering over a `.bf-checkboxcard` (that is not disabled) should now always display a pointer cursor.

## 4.16.0 - 2024-11-28

### Minor Changes

- b9c82ea: Add `transparent` prop to `<Modal>` to allow better control for custom styling

## 4.15.0 - 2024-11-26

### Minor Changes

- 91f354b: New `.bf-ellipsis` class, cuts off overflowing text and adds an ellipsis (…)
  - Configure allowed lines with `--bf-ellipsis-lines` (default `1`)

### Patch Changes

- bbb8a57: Deprecate `<Spinner>` component in favor of using the more flexible `<Icon>` directly. Example:

  ```tsx
  <Icon icon={faSpinnerThird} className="bf-icon-spinner bfc-theme" />
  ```

- bae3a2f: Fix: checkbox/switch/radio (and theird card equivalents) should no longer get a pointer cursor on hover while disabled.

## 4.14.1 - 2024-11-06

### Patch Changes

- 7668263: Fix scaling issue with nav branding
- 908fd54: - Fixed `disabled` styling for pagination next/prev buttons
  - Fixed `:focus` styling for link-styled buttons

## 4.14.0 - 2024-10-21

### Minor Changes

- d090112: `<Drawer>` design update
  - Removed left border from right-positioned drawer
  - New drop shadow (while open)
  - Changed background from `bfc-base-2` to `bfc-base-3`
  - Changed right-positioned drawer width to `550px` for all screen widths wider than small
- c8990f1: Color change in light mode: `bfc-theme-*` variables and classes are now teal colored instead of blue.

### Patch Changes

- 7915aaf: `.bf-li` and list items inside `.bf-toc`, `.bf-ul`, `.bf-ol`, `.bf-elements`, and `.bf-contents` now has `8px` margin between each item regardless of nesting level. #786
- a486693: New `--bf-mode` CSS var allows devs to use style queries to determine if current bifrost color mode is `dark` or `light`.
  Note: Not yet supported by Firefox. Example:

  ```css
  @container style(--bf-mode: dark) {
    /* styles to apply only when in dark mode */
  }
  @container style(--bf-mode: light) {
    /* styles to apply only when in light mode */
  }
  ```

- cb6baa6: Fix css selector, so border-radius is correctly set to last expandable row for Table

## 4.13.0 - 2024-10-15

### Minor Changes

- 2703b98: Add support for `small` variants for most form field inputs, to match existing `small` button styling.
  - `<Input>`
  - `<DatePicker>`
  - `<FieldGroup.Item>`
  - `<Select>`

### Patch Changes

- 1fa1483: Color tweaks:
  - `.bf-accordion-action` color and focus outline
  - `.bf-banner` font weight
  - `.bf-button-expand` and `.bf-expand-icon-wrapper` focus outline, size and spacing
  - `.bf-checkbox-checked` is now `theme` colored
  - `.bf-progressbar` flat color (previously gradient) and new `.bf-progressbar-disabled` styling (0.3 opacity)
  - `.bf-label-feedback` is `alert` colored when associated field is in `alert` state
  - Other minor cleanup and tweaks

- 1fbff6b: Fix: Section.Header and Section.Content now has `border-radius` (useful when designers put separate custom background colors on them)

## 4.12.0 - 2024-09-16

### Minor Changes

- eac9a11: New `<Dropdown.Item>` sub-component for styling buttons and links in a dropdown. #774
  - Padding for `<Dropdown>` reduced from `12` to `8` px.

### Patch Changes

- de00f8f: Fixed typo for base-dimmed-1 css variable
- e7d617e: Add `.bf-highlight-target` class to enable highlight animation when browser
  scrolls to (or opens a page with) a h1-h6 heading with an `id` matching the
  current location `#hash`. #781
- 4fd0770: Lower specificity for link focus styling to avoid overriding custom `border-radius`

## 4.11.0 - 2024-09-03

### Minor Changes

- df8ce99: `<Tabs>` component restyled and made a bit more flexible
  - Neutralised active tab underline color for default `variant`
  - Added shadow on styled tab selected and hover
  - Added border bottom for basic tab on hover
  - Changed paddings
  - New props for `<Tabs>`:
    - `noBakground` (boolean) makes the tab bar transparent
    - `noPadding` (boolean) removes padding from the tab bar
    - `contentProps` (object) props forwarded to the content area `<div>` element (if any)
    - `contentBackground` (string) sets background-color for content area and active tab for `variant="styled"`. Possible values:
      - `"base"` (default),
      - `"base-2"`
      - `"base-3"`
      - `"transparent"` (not supported by `variant="styled"`)
    - `radius` (string | boolean) adds a border-radius to top of tab bar, and bottom of content area (if any). Possible values:
      - `false` or `undefined` (default) = no border radius
      - `"xs"` = `4px`
      - `"s"` = `8px`
      - `true` or `"m"` = `12px`
      - `"l"` = `16px`
      - `"xl"` = `24px`
  - `radiusTop` same values as `radius`, but only applied to top of tab bar
  - `radiusBottom` same values as `radius`, but only applied to bottom of content area (if any)

### Patch Changes

- cfc369e: Minor CSS tweaks
  - `.bf-box-arrow-external` no longer requires `.bf-box-arrow` to be applied at the same time
  - Removed unused and undocumented `.bf-box` class.
  - Added `.bf-block` utility class, applies `display: block`. When applied to `<button>` also gives `width: 100%` (to make it behave like a block level element)
  - Lowered specificity for `.bf-neutral-link` when used on a `<button>` (to allow visual classes like `.bf-border` to take precedence when used together)
- 3bcdf74: Removed some old CSS that was mis-styling the input background color based on parent context. This was needed before inputs got their current outline styling, and removing it should fix several small issues, including:
  - Nesting form elements like `<Input>`, `<Select>`, and `<TextArea>`, inside `.bfc-base-3-bg` should no longer result in wrong background colors.
  - Nesting a `<Select>` that is `disabled` inside a `<Section>` should now look as expected.
  - `<Input>` should look the same inside a `<Table>` as it does outside.
- 3a5ae26: Fix: List elements (`ul`, `ol`, `li`, `.bf-ul` etc) and table of contents (`.bf-toc`) now inherit font-size. #768

## 4.10.1 - 2024-08-27

### Patch Changes

- 6ef5ced: Fix: Use pointer cursor when hovering hidden native `<input>` for checkbox, radio, switch, and checkboxcard. #777

## 4.10.0 - 2024-08-22

### Minor Changes

- 810663f: Added some new color classes: `.bfc-base-c-attention-bg` and `.bfc-base-c-chill-bg`
  Recolored some badges to use base-3 as text color (attn, chill)
  Fixed link color for background class names
- f1be5f4: Added new `.bf-box-arrow-external` class. Use alongside `.bf-box-arrow` and a right-pointing arrow icon, to tilt it upwards, suitable for use with external links.

### Patch Changes

- 46d07a6: Fix: "skip to content" button (from `<Nav>`) should no longer be part of printed content.
- 8cbbf46: fix: `<Button.Group active>` focus and hover styling fixes
- bb6765e: fix: increase native (hidden) checkbox input element size to make it more compatible with how tippy works (Dropdown and Tooltip components) #525

## 4.9.0 2024-08-14

### Minor Changes

- a727d33: Based on feedback we've changed the default `<Button>` color back to `theme`. We're preparing components to be compatible with a theming system we're currently working on. Hopefully we don't create too many issues :)
  - Same goes for `<Input iconButton>`, `<Button.Group>` and `<Tag active>`
  - Add new `state="neutral"` to `<Button>` (`.bf-button-neutral` CSS class)

### Patch Changes

- 8685fcf: Removed theme color from table header and border left
- e8faca6: Fixed bug where clicking the outer edges of wide buttons doesn't register clicks (because it was scaled down, placing the cursor outside button)
- fe7ec62: fix: hover glitch for input button hover

## 4.8.0 - 2024-08-07

### Minor Changes

- 77c67b4: Updated checkbox styling
  - Removed theme color
  - Increased size of checkbox, radio and switch
  - Now supports custom browser font size
  - New active state for switch
  - New hover state for checkbox, radio and switch
  - Neutralized select checkboxes

## 4.7.2 - 2024-08-07

### Patch Changes

- fd3acaa: Fix: lower specificity for button focus css to prevent overriding custom styling

## 4.7.1 - 2024-08-06

### Patch Changes

- 899927b: Fix: form field height should follow browser font-size setting. Use `rem` over `px` for height-related units for form fields (input, button, select, datepicker).
- 2cbf99a: Fix: button group hover styling

## 4.7.0 - 2024-08-02

### Minor Changes

- 6dfd55d: Styling for tooltip
  - Changed color styling on default tooltip; from theme to neutral colors
  - Increased font-size and removed bold font-weight on regular size tooltip
  - Increased padding on both tooltip sizes
  - Added example of tooltip with both icon and text
- 14c207d: Add new `.bf-select` class to style native HTML `<select>`.

### Patch Changes

- 3ccc958: Fix: Drawer overlay should be visible for mobile screens. #764

## 4.6.1 - 2024-07-31

### Patch Changes

- 9ae0e80: - Fixed rendering glitch issues for button hover on certain scale or zoom levels. #762
  - Fixed `border-radius` on focus for button-styled links.
  - Fixed Checkbox button `border-color` change on hover when `disabled`.
  - Reverted Checkbox button and CheckboxCard border color to match input styling instead of button styling.

## 4.6.0 - 2024-07-30

### Minor Changes

- daa6eee: New breadcrumbs styling
  - Added CSS to allow buttons inside `.bf-breadcrumbs` container (to allow forward/back buttons)
  - Use `/` instead of `>` icon to separate path segments
    - `.bf-breadcrumb-angle` renamed to `.bf-breadcrumb-separator`
- a23cc4f: New container query CSS classes:
  - Specify a container element with `.bf-container` class.
  - Container breakpoint CSS classes `.from-[size]-container` and `.to-[size]-container` for hiding content at certain container widths where `[size]` is one of:
    - `xs` 300px
    - `small` 600px
    - `medium` 960px
    - `large` 1280px
    - `xl` 1920px
    - `xxl` 1600px

  For example:

  ```html
  <div class="bf-container">
    <div class="to-large-container">
      Only visible if `.bf-container` element is narrower than 1280px
    </div>
    <div class="from-small-container">
      Only visible if `.bf-container` element is wider than 600px
    </div>
    <div class="from-small-container to-large-container">
      Only visible if `.bf-container` element is wider than 600px and narrower
      than 1280px
    </div>
  </div>
  ```

  [Read more at bifrost.intility.com/css/container](https://bifrost.intility.com/css/container)

- 365100c: Changed color values for:
  - `--bfc-base-dimmed`
  - `--bfc-base-c-alert`
  - `--bfc-base-c-wcag`
  - `--bfc-base-c-dimmed` (alias for `--bfc-base-dimmed`)
  - `--bfc-base-c-inverted-1`
  - `--bfc-base-c-inverted-2`
  - `--bfc-alert`
  - `--bfc-alert-c` (big change, from almost black to white)
  - `--bfc-alert-fade`
  - `--bfc-alert-fade-c`
  - `--bfc-alert-fade-1` (alias for `--bfc-alert-fade`)
  - `--bfc-alert-fade-1-c` (alias for `--bfc-alert-fade-c`)

  Added new colors:
  - `--bfc-base-c-inverted-3`
  - `--bfc-base-dimmed-1` (alias for existing `--bfc-base-dimmed`)
  - `--bfc-base-dimmed-2`
  - `--bfc-base-dimmed-3`
  - `--bfc-alert-2`

  Added new class names:
  - `.bfc-base-c-bg`
  - `.bfc-base-c-2-bg`

  New `<Button>` styling:
  - Increased `border-radius` (from xs to s)
  - New outline styling on keyboard focus
  - Removed theme color from `variant="filled"`
  - Added `variant="flat"`, no background or outline
  - Added `state="inverted"`, for contrasting background
  - Deprecated `variant="outline"` since default `variant` has outline
  - `state="alert"` now supported by every `variant`
  - New `<Button.Group>` styling
    - Removed theme color from `active` button
  - Fixed outline overlapping on `:focus-visible` with `z-index: 1`

  Update `<Checkbox button>`, `<CheckboxCard>`, `<Tag>` and `<Drawer>` (close button) styling to match new bifrost Button.

  Update `border` styling for `<Input>`, `<Textarea>` and `<FieldGroup>` to match new bifrost Button.

  New `<Badge>` styling: updated `font-weight` and `padding`. Background changed for `inverted` `state="neutral"` variant.

  Increased `marginRight` and `marginLeft` for `<Icon>` from `4px` to `8px`.

### Patch Changes

- ac738a9: Fix: Remove "." placeholder from `<Skeleton.Text>` and pray browsers support `lh` CSS unit.
- 4df5421: Fix: minor `.bf-nav` css tweaks
- 841993b: Removed custom button styling for bottom positioned drawer

## 4.5.1 - 2024-06-21

### Patch Changes

- a2ec3e53: Fix: remove CSS references to non-existing variable `--bfc-alert-c-2` #755
- 23ff3593: Fix: Corrected border-radius for styled accordion content. #756

## 4.5.0 - 2024-06-13

### Minor Changes

- 833a15e4: Fix: update Select styling to allow `menuPlacement="top"` and more closely match DatePicker #754

## 4.4.0 - 2024-06-06

### Minor Changes

- 0b24673c: Feat: New styling for dropdowns, now always renders with both a shadow and border. Deprecated the `<Dropdown variant>` prop and removed `.bf-dropdown-border` since there's only one variant now.

### Patch Changes

- e6ead541: Fix: `.bf-nav` font-size reduced from large (16px) to medium (14px)

## 4.3.1 - 2024-06-05

### Patch Changes

- c20e24ae: Fix Nav.Search styling when used in top bar
- 5de6a97c: fix: Changed spacing between styled accordions #727

## 4.3.0 - 2024-05-31

### Minor Changes

- 069614ed: Slight tweaks to .bf-input, .bf-datepicker and .bf-textarea on hover and focus #740
- 9b7cead3: Fix: Font-size variables are now defined in `rem` in order to respect user agent font settings. #742
- fd90da94: Feat: add scrollbar styling
  - Default `scrollbar-color` set on root element, `.bf-scrollbar`, and `.bf-scrollbar-small`
  - `.bf-scrollbar-small` now applies `scrollbar-width: thin`

### Patch Changes

- 9749173c: Fixed positioning for nav top bar #746

## 4.2.7 - 2024-05-29

### Patch Changes

- d2bb0be5: Fixed mobile nav transition flash on load by making sure `.bf-nav-mobile` is not visible with `.bf-nav-mobile-gone`

## 4.2.6 - 2024-05-29

### Patch Changes

- 4c0b4e5e: Fix position issue for nav-item

## 4.2.5 - 2024-05-27

### Patch Changes

- af52c2d7: Fix: Prevent clipping of text in `.bf-nav-logo-name` when used in nav topbar.

## 4.2.4 - 2024-05-22

### Patch Changes

- 366de21e: Fix: add styling for non-clickable Nav.Item in topbar
- bf863902: New custom icon for Nav sidebar collapse button
- 917825cb: Fix: Tweak expand arrow positioning for Nav.Group in sidebar

## 4.2.3 - 2024-05-16

### Patch Changes

- 9c1de768: Fix: platform-toolkit notifcation icon placement

## 4.2.2 - 2024-05-16

### Patch Changes

- 08583204: Nav top bar tweaks:
  - `.bf-nav-item` inside `.bf-nav-top` width tweaked to match figma spec
  - `.bf-nav-logo-name` font changed to Satoshi (740 weight, 14px size)
  - `.bf-nav-logo-name` inside `.bf-nav-top` will be clamped at 2 lines and still be centered

## 4.2.1 - 2024-05-15

### Patch Changes

- 33a242ff: Fix text-align in top nav for some scenarios

## 4.2.0 - 2024-05-15

### Minor Changes

- 2207b865: - `.bf-nav-*` has been redesigned.
  - Top-left area previously dedicated to intility logo has been removed. (Put app icon and title there instead)
  - Restyled `:hover`, `.active` (class), and `:focus-visible` for `.bf-nav-item` and `.bf-nav-group`.
  - Nav group buttons are now styled as "active" when a grouped item has `.active` class. (previously required scripting)
  - New `.bf-nav-logo`, `.bf-nav-logo-name`, and `.bf-nav-logo-graphic` classes for logo layout.
  - CSS selectors for `.bf-nav-*` simplified, hopefully mostly works the same. 🤞
  - Margins for `.bf-checkbox` inside `.bf-dropdown` tweaked to match new Nav design
- f3eae438: - Add `.bf-box-arrow` class for use on `fa-arrow-right` icon with a transition on link hover.
  - E.g. `<a href="/path">link with arrow <i class="fa-regular fa-arrow-right bf-box-arrow"></i></a>`
  - Fixed text color classes (`.bfc-*`) so they should correctly take precedence over text color set by background-color classes (`.bfc-*-bg`) when both are present on the same element.
  - Fixed so `.bf-inline-stretch` should no longer overflow when wrapping text.

## 4.1.1 - 2024-04-24

### Patch Changes

- 31205e8d: Fix: More robust selectors for `.bf-checkbox` and `.bf-checkboxcard`, should no longer be influenced by other adjacent `<input>` elements.

## 4.1.0 - 2024-04-23

### Minor Changes

- f39613ed: Changes to `<Drawer>` and `.bf-drawer`
  - Use `margin` instead of `transform` to show/hide drawer. Fixes #736
  - Use `inert` html attribute for closed drawer instead of `display: none;` and `aria-hidden`

### Patch Changes

- 29572cca: Fix: Allow click-through on input icons `.bf-input-icon` and `.bf-state-icon`

## 4.0.1 - 2024-04-05

### Patch Changes

- bb9e438b: Fix: Disable Chromium Auto-Dark color overrides by setting `color-scheme: only dark` for dark mode and `color-scheme: only light` for light mode. #737 https://developer.chrome.com/blog/auto-dark-theme/
- 611f82ca: Removed unnecessary files from npm package output.

## 4.0.0 - 2024-04-03

### Minor Changes

- 6b355639: New `.bf-accordion` styling and DOM structure
- 799c9adf: Add `.bf-drawer-bottom` class to position drawer at bottom of
  viewport.
- 62b02461: Include JSDoc comments in typescript definition output
- 50b76941: Fix: Mobile landscape font size IOS #721
- b9a6353b: Added classnames for single edge border
  - `.bf-border-top`
  - `.bf-border-right`
  - `.bf-border-bottom`
  - `.bf-border-left`
- 8f64aa42: Internal refactor: relocate css files to bifrost-css folder
- 3849abc3: Optional padding and close button for drawer
- 387a1440: Clean up css for dropdown and fieldset after checkbox rewrite.
- bffe432f: Refactor checkbox CSS, wrap the `<input type="checkbox">` in the
  `<label className="bf-checkbox">` means you no longer need a unique `id` and
  `for` to connect them.
- ec250594: Drawer content padding should now match `.bf-page-padding`.
- 710afa88: New `.bf-message` styling #719
- 276f9742: Slight tweaks to `--bfc-base-*` and `--bfc-chill-*` color values
- 6edfa7a4: Add `.bf-hide-until-focus` class for "skip to content" button
- New CSS classes for rendering content for _either_ light or dark mode
  _exclusively_:
  - `.bf-dark-only` will be hidden (`display: none`) when in light mode
  - `.bf-light-only` will be hidden in dark mode
- New `.bf-elements` CSS class to apply typography CSS without margins
  (`.bf-content` does the same, but _with margins_)
- New standard values for `border-radius`
  - CSS Variables
    - `--bf-radius-none` = 0px
    - `--bf-radius-xs` = 4px
    - `--bf-radius-s` = 8px
    - `--bf-radius` or `--bf-radius-m` = 12px
    - `--bf-radius-l` = 16px
    - `--bf-radius-xl` = 24px
    - `--bf-radius-full` = 9999px
  - Corresponding CSS helper classes
    - `.bf-radius-xs` applies 4px `border-radius`
    - `.bf-radius-s` applies 8px `border-radius`
    - `.bf-radius` or `.bf-radius-m` applies 12px `border-radius`
    - `.bf-radius-l` applies 16px `border-radius`
    - `.bf-radius-xl` applies 24px `border-radius`
    - `.bf-radius-full` applies 9999px `border-radius`
  - Deprecated old border radius classes and variable
    - ~~`--bfl-border-radius`~~ use `--bf-radius-xs` instead.
    - ~~`.bfl-border-radius`~~ and ~~`.bf-border-radius`~~, use `.bf-radius-xs`
      instead.
  - All `border-radius` values updated to use new `--bf-radius-*` variables.

### Patch Changes

- Disable main scroll while scrolling inside `.bf-drawer` or `.bf-modal` with
  `overscroll-behavior: contain` #678
- 18feb758: Top nav logo color changed to neutral `base-c` color and given a
  proper keyboard focus state.
- e410a910: New base color values for light mode #711
- 8484a491: Fix: `border-left` on table mediaquery value
- 2fd63480: Minor color value tweak for `--bfc-base-c`. #724
- e07afaff: Fix: font size and weight for Modal header
- 82ab21b5: Update border-radius values to use bifrost css variables
- 5504294e: Fix drawer spacing when no close button
- 60d1310c:
  - Fix: Disable main scroll while scrolling inside `.bf-drawer` or `.bf-modal`
    with `overscroll-behavior: contain` #678
  - Fix: Add `safe-area` (mobile device screen "notch" or "dynamic island")
    padding for `.bf-drawer` #734
  - Fix: use `dvh` instead of `vh` for supporting browsers. #733
- a3b1fd6b: Remove unnecessary CSS, should now have correct outline for
  `.bf-neutral-link` button focus. #726
- 7db473c6: Fixed bug that allowed focus inside a closed `<Drawer>` when using
  `footer` prop

## Older versions

See /packages/bifrost-react/CHANGELOG.md for 3.12 and older versions.