# @intility/bifrost-react

## 6.15.3

### Patch Changes

- 88d20ea: fix `width: fit-content` on labels only applying to `.bf-label` to avoid unintended side effects on checkboxes
- Updated dependencies [88d20ea]
  - @intility/bifrost-css@6.7.2

## 6.15.2 - 2026-03-02

### Patch Changes

- 4047625: update fontawesome dependencies from `^7.1.0` to `^7.2.0`

## 6.15.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` is no longer full width, preventing accidental refocus on click
- Updated dependencies [52e4453]
- Updated dependencies [c048c6d]
  - @intility/bifrost-css@6.7.1

## 6.15.0 - 2026-02-10

### Minor Changes

- 6a49c50: New `<FormatRelativeTime>` component for displaying relative time strings (e.g.,
  "5 minutes ago", "in 2 hours") with full-date tooltip, automatic updates and
  localization support. #608

  ```tsx
  // Component with auto-updates and tooltip
  <FormatRelativeTime date={myDate} />
  ```

  New `useRelativeTime()` hook, if you need a simple formatted `string` instead.
  - Up to you to handle updates ("5 minutes ago" will only be true for one minute)

  ```tsx
  // Hook returning a simple string (no auto-update)
  const relativeTime = useRelativeTime(myDate);
  ```

- e12feee: Multiple color tweaks:

#### 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`

### Patch Changes

- Updated dependencies [e12feee]
  - @intility/bifrost-css@6.7.0

## 6.14.0 - 2026-02-04

### Minor Changes

- f40a1cf: Chore: bump `@floating-ui/react` dependency from `0.27.16` to `0.27.17` https://github.com/floating-ui/floating-ui/blob/master/packages/react/CHANGELOG.md#02717
- 4e4db04: Chore: bump `focus-trap-react` sub-dependency from `11.0.6` to `12.0.0` which is
  _technically breaking_ but we don´t expect the change to affect us (or you).
  See https://github.com/focus-trap/focus-trap/blob/master/CHANGELOG.md#800

## 6.13.4 - 2026-01-22

### Patch Changes

- c0dd80c: Fix: Drawer transition should no longer be shown when toggling position between
  "right" and "bottom" #628
- Updated dependencies [c0dd80c]
  - @intility/bifrost-css@6.6.3

## 6.13.3 - 2026-01-19

### Patch Changes

- Updated dependencies [c3a8805]
  - @intility/bifrost-css@6.6.2

## 6.13.2 - 2026-01-15

### Patch Changes

- 6edb61f: TypeScript: update `<Box background>` prop to match (more) existing background class names.
- 20d053f: Fix: the `ref` prop on `<Nav.Search>` should now point to the correct underlying
  `<input>` even when nested inside a collapsed sidebar.

## 6.13.1 - 2025-12-12

### Patch Changes

- 482913a: Fix: replace internal use of `base-dimmed` with `base-c-dimmed` for border color
  and update docs.
- Updated dependencies [482913a]
  - @intility/bifrost-css@6.6.1

## 6.13.0 - 2025-12-11

### Minor Changes

- 7a8d094: New `state="inherit"` option for `<Checkbox>`, `<Radio>`, and `<Switch>` - uses
  current text color instead of theme color. Useful when placing a checkbox on top
  of a colored background. #573

### Patch Changes

- 7a8d094: Fix: `<label>` should now correctly inherit current text color, even if placed
  inside `.bf-content` or `.bf-elements`.
- Updated dependencies [7a8d094]
- Updated dependencies [7a8d094]
  - @intility/bifrost-css@6.6.0

## 6.12.2 - 2025-12-05

### Patch Changes

- Updated dependencies [619352a]
- Updated dependencies [2f1d908]
  - @intility/bifrost-css@6.5.4

## 6.12.1 - 2025-12-01

### Patch Changes

- 5892962: Bump `@fortawesome/react-fontawesome` dependency from `^3.1.0` to `^3.1.1`
- c14b886: Fix: `<FileInputArea>` wrapper element now gets `aria-disabled` when its input
  is `disabled`.
- 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.
- Updated dependencies [c80e40e]
- Updated dependencies [60be5ae]
  - @intility/bifrost-css@6.5.3

## 6.12.0 - 2025-11-28

### Minor Changes

- c1121d3: New `<Feedback>` component #518
  - Equivalent to `feedback` prop for form field components like `<Input>`,
    `<DatePicker>`,`<TextArea>`, `<Select>` and `<FieldGroup>`.
  - `state` prop accepts `"default"` or `"alert"` (red).
    A11y: `feedback` and `description` props for `<Input>` and `<TextArea>` are now
    linked to their form field using `aria-describedby`.

### Patch Changes

- Updated dependencies [c1121d3]
  - @intility/bifrost-css@6.5.2

## 6.11.0 - 2025-11-27

### Minor Changes

- 76b01ab: - Add `state="alert"` prop to `<Checkbox>` components:
  - `<Checkbox>`
  - `<CheckboxCard>`
  - `<Radio>`
  - `<RadioCard>`
  - `<Switch>`
  - `<SwitchCard>`
- `<Checkbox indeterminate>` now uses theme color

### Patch Changes

- Updated dependencies [76b01ab]
- Updated dependencies [fd58f73]
- Updated dependencies [036fd40]
  - @intility/bifrost-css@6.5.1

## 6.10.0 - 2025-11-20

### Minor Changes

- 0d9cf7c: New `<FormatDuration start={date} end={date} />` component
  - Accepts two `Date` objects and displays a short, readable and localized
    duration including a tooltip with full datetime details and timezone
    information.
  - Displays **days** if over 2: "7 days"
  - Displays **hours** if over 2: "24 hours"
  - Otherwise **minutes**: "30 minutes"
- 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"`

### Patch Changes

- Updated dependencies [a4c8f66]
- Updated dependencies [0100f2c]
  - @intility/bifrost-css@6.5.0

## 6.9.2 - 2025-11-07

### Patch Changes

- 4fc3607: Fix: Changed font-size for `.bf-nav-header` from small (12px) to medium (14px). #489
- Updated dependencies [4fc3607]
  - @intility/bifrost-css@6.4.1

## 6.9.1 - 2025-10-23

### Patch Changes

- a4610e6: Fixed bug where `<Ellipsis>` would not show tooltips when using react 19
  (broken since 6.6.1 - updated `<Tooltip>` and `<Dropdown>` to no longer assume
  `ref` won't be part of `children.props`) #475

## 6.9.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

### Patch Changes

- Updated dependencies [4ec68a5]
- Updated dependencies [cbd329a]
  - @intility/bifrost-css@6.4.0

## 6.8.0 - 2025-10-21

### Minor Changes

- fbe99c7: Added React Compiler.

  The following components have been slightly refactored to follow the rules of react:
  - `Accordion`
  - `Ellipsis`
  - `FloatingMessage`
  - `Modal`
  - `Nav`
  - `Tabs`
  - `useHotkey`

  Please let us know if you encounter unexpected behavior.

## 6.7.1 - 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
- Updated dependencies [75be909]
  - @intility/bifrost-css@6.3.2

## 6.7.0 - 2025-10-13

### Minor Changes

- 620de1b: Tweaks to `<Message>` component:
  - `statusBar` now has same `16px` padding as default (previously `8px`).
  - `header` is now allowed for `statusBar` (previously ignored).
  - `expandable` is now allowed for `statusBar` (previously ignored).
  - New focus styling for `expandable` header button and `onClose` button.
  - Fixed hover styling for `expandable` chevron icon and `onClose` button.

### Patch Changes

- 3305988: Fix(Box): Avoid writing to inline style object (react compiler warning).

## 6.6.1 - 2025-10-09

### Patch Changes

- d0b5a5e: fix: `<Dropdown>` and `<Tooltip>` should no longer overwrite props (like
  `onClick`) on nested child component. #443

## 6.6.0 - 2025-10-08

### Minor Changes

- d4ee37c: New `state` prop for `<ProgressBar>` (#389), valid values:
  - `"default"` - follow current theme
  - `"success"` - green
  - `"warning"` - yellow/orange
  - `"alert"` - red

### Patch Changes

- Updated dependencies [d4ee37c]
  - @intility/bifrost-css@6.3.1

## 6.5.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`

### Patch Changes

- Updated dependencies [4d55846]
  - @intility/bifrost-css@6.3.0

## 6.4.2 - 2025-10-06

### Patch Changes

- bb7624b: Chore: Bump `@fortawesome/*` dependencies to `^7.1.0`
- bb7624b: Chore: Bump `@fortawesome/react-fontawesome` dependency to `^3.1.0`
- Updated dependencies [4e2e89a]
  - @intility/bifrost-css@6.2.2

## 6.4.1 - 2025-09-30

### Patch Changes

- df1561e: Fix: Avoid potential hydration errors by using inline element as `<Tooltip>` and
  `<Dropdown>` content wrapper. (Block-level elements not allowed inside `<p>`,
  for instance.)
- 0fc84d4: Fix: Links wrapping `<Section>` elements should now get appropriate keyboard
  focus styling.
- ea27cd3: fix: `<Dropdown.Item className>` should no longer override internal `.bf-dropdown-item` class name. #369
- Updated dependencies [0fc84d4]
  - @intility/bifrost-css@6.2.1

## 6.4.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.
- 926a7f8: Components affected by neutral color changes:
  - `<Button state="neutral">`
  - `<Message state="neutral">`
  - `<Badge state="neutral">`

### Patch Changes

- Updated dependencies [edfc022]
  - @intility/bifrost-css@6.2.0

## 6.3.1 - 2025-09-05

### Patch Changes

- 01a6406: Update `@fortawesome/*-icons` dependencies to `^7.0.1`
- 01a6406: Update `@fortawesome/react-fontawesome` dependency to `^3.0.2`

## 6.3.0 - 2025-09-04

### Minor Changes

- 97cc068: Expand `useHotkey(key, callback, options)` hook (#336) with optional config
  object as 3rd parameter, with the following properties:
  - `ctrlOrCmd` (default `true`) - Ctrl on Windows/Linux, ⌘ on MacOS
  - `shift` (default `false`) - listen to Shift/⇧
  - `alt` (default `false`) - listen to Alt/⌥
  - `preventDefault` (default `true`) - prevent default browser behavior

  ```tsx
  useHotkey("s", save, { shift: true }); // "Ctrl + Shift + S" or "⌘ + ⇧ + S"
  useHotkey("Escape", close, { ctrlOrCmd: false }); // "Esc"
  useHotkey("ArrowUp", moveUp); // "Ctrl + ↑" or "⌘ + ↑"
  ```

### Patch Changes

- 45804cb: Improve JSDoc output #348
  - Add `@see` directives linking to documentation pages for all components
  - Add `@example` code where it makes sense
  - Move top-level JSDoc comments to index files for sub-components and components
    with sub-components attached so they are more likely to be picked up by IDEs

## 6.2.1 - 2025-08-27

### Patch Changes

- adfb8c0: Fix React 18 support by not importing `use` directly.

## 6.2.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
- 83a73b3: Bump `@fortawesome/react-fontawesome` from `0.2.3` to
  [`3.0.0`](https://github.com/FortAwesome/react-fontawesome/releases/tag/3.0.0)
  - Refactor `IconProps` type to `interface` to simplify it and fix props table docs generation.
- 3a06ee4: Remove "an intility service" branding. Deprecated `hideBranding` prop. #211

### Patch Changes

- 75091db: Bump `@floating-ui/react` from `^0.27.15` to `^0.27.16`
- Updated dependencies [3a06ee4]
  - @intility/bifrost-css@6.1.0

## 6.1.1 - 2025-08-18

### Patch Changes

- 1af8578: Fix: `<Bifrost>` now properly marked as client component (for RSC/Next.js support)

## 6.1.0 - 2025-08-18

### Minor Changes

- 281e85a: New `eager` prop for `<Tabs.Item>`, will render its `content` even while the tab
  is inactive and hidden. Useful if the tab content has some internal state that
  should persist between switching tabs. #318

## 6.0.1 - 2025-08-15

### Patch Changes

- 8087081: Mark `<Icon.Spinner fixedWidth>` prop as deprecated and add `widthAuto` prop to TypeScript definition.

## 6.0.0 - 2025-08-13

### Major Changes

- 5de0e05: Update `peerDependencies` to explicit major versions:

  ```
  react: ^17 || ^18 || ^19
  react-dom: ^17 || ^18 || ^19
  ```

- 5de0e05: Updated Font Awesome dependencies from `^6.4.2` to `^7.0.0`.
  - `<Icon fixedWidth>` prop deprecated since icons are now fixed width default.
  - New `<Icon widthAuto>` prop if you want the old behavior.
  - If you have trouble installing, try deleting your `node_modules` and
    `package-lock.json`.

### Patch Changes

- Updated dependencies [5de0e05]
  - @intility/bifrost-css@6.0.0

## 5.9.0 - 2025-08-07

### Minor Changes

- a79e31b: Feat: Added optional `align="left"` prop to `<CheckboxCard>` #246

### Patch Changes

- 26b8063: Add focus styling for `recharts` (`accessibilityLayer` is default active since v3) #258
- 593ec3c: bump `@floating-ui/react` from `0.27.14` to `0.27.15`
- Updated dependencies [26b8063]
- Updated dependencies [a79e31b]
- Updated dependencies [96b38eb]
  - @intility/bifrost-css@5.5.0

## 5.8.2 - 2025-07-30

### Patch Changes

- d1a1d0e: Bump `@floating-ui/react` dependency from `0.27.13` to `0.27.14`
- 1f39455: Fix: default to `eager` rendering for `<Nav.Group>` so collapsed groups with
  active children are still styled as active. #265
- 3dc2523: cloneElement usage in Dropdown and Tooltip now works with newer nextjs and react versions
- Updated dependencies [4dc9711]
  - @intility/bifrost-css@5.4.1

## 5.8.1 - 2025-07-22

### Patch Changes

- Updated dependencies [3180fb3]
- Updated dependencies [5ca8cab]
  - @intility/bifrost-css@5.4.0

## 5.8.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.

### Patch Changes

- Updated dependencies [b16e76d]
  - @intility/bifrost-css@5.3.0

## 5.7.0 - 2025-07-02

### Minor Changes

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

### Patch Changes

- 15a01f9: bump @floating-ui/react from 0.27.12 to 0.27.13 #251
- Updated dependencies [a161a0c]
  - @intility/bifrost-css@5.2.0

## 5.6.0 - 2025-06-24

### Minor Changes

- 7a4b3a2: Bump dependency `@floating-ui/react` from `0.27.11` to `0.27.12`
- 7626122: Added new `useHotkey(key, callback)` hook for platform-independent hotkeys.
  - `key` (string) - the key to listen to, a single lowercase character (like
    `"k"` or `"s"`)
  - `callback` (function) - will be called when user presses `⌘ + key` on
    macOS, or `Ctrl + key` on win/linux
  - returns an object with `hotkeyText` (string) which will be `"⌘ + key"` or
    `"Ctrl + key"` depending on platform

  ```js
  import useHotkey from "@intility/bifrost-react/hooks/useHotkey";

  // listen to Ctrl/⌘ + K keypress
  const { hotkeyText } = useHotkey("k", (e) => {
    // focus search input
    inputRef.current?.focus();
  });
  // hotkeyText will be "⌘ + K" or "Ctrl + K"
  ```

### Patch Changes

- 9aea814: Fix: `<Dropdown>` no longer auto-closes itself when elements outside it receive focus. #200
- Updated dependencies [aea5b6f]
  - @intility/bifrost-css@5.1.1

## 5.5.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`).
- 097aa66: - Bump `@floating-ui/react` dependency from `0.27.9` to `0.27.10`
  - Bump `focus-trap-react` dependency from `11.0.3` to `11.0.4`

### Patch Changes

- Updated dependencies [75033e2]
  - @intility/bifrost-css@5.1.0

## 5.4.1 - 2025-05-27

### Patch Changes

- Updated dependencies [8267f6a]
- Updated dependencies [c7dfe7f]
  - @intility/bifrost-css@5.0.6

## 5.4.0 - 2025-05-20

### Minor Changes

- 8ba9274: Added new `<FileInputArea>` component for file upload
  - Wraps a native `<input type="file">` styled as drag-and-droppable area with customizable content
  - `state="alert"` prop gives a red border

## 5.3.0 - 2025-05-15

### Minor Changes

- ab00bab: Bump `@floating-ui/react` dependency to `0.27.8`

## 5.2.1 - 2025-05-14

### Patch Changes

- aad6e0e: fix: add missing `.js` suffix in internal import (some build systems require it)

## 5.2.0 - 2025-05-07

### Minor Changes

- 3fd8295: New `radius` prop for `<Accordion>` allows different sizes:
  - `"none"` = no border radius
  - `"xs"` = `4px`
  - `"s"` = `8px`
  - `"m"` (or `undefined`) = `12px` (default)
  - `"l"` = `16px`
  - `"xl"` = `24px`
- 109c5b4: Add new props for `<Icon.Spinner>`: `marginLeft`, `marginRight`, and
  `fixedWidth` (works same as for `<Icon>`) #153
- 36114d3: Added optional `noMain` prop to `<Nav>` to allow custom landmark elements like
  `<header>`, `<main>`, and `<footer>`. #120

### 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.
- 074a3aa: Internal tweak: Update deprecated `FocusTrap` imports. #108
- 41412ec: Fix: Prevent `<Tooltip>` and `<Dropdown>` from overflowing viewport width. #148
- Updated dependencies [3fd8295]
- Updated dependencies [87f41a8]
- Updated dependencies [41412ec]
  - @intility/bifrost-css@5.0.5

## 5.1.0 - 2025-04-28

### Minor Changes

- d70cdab: New `eager` prop (renders children/content even when closed) #112
  - `<SlideDown>`
  - `<Dropdown>`
  - `<Accordion.Item>`
  - `<Nav.Group>`
  - `<Message>` (when using `expandable` prop)
  - `<Table.Row>` (when using `content` prop)

### Patch Changes

- 8c9709c: Fix: `<Dropdown>`, `<Dropdown.Group>`, and `<Tooltip>` should be better
  contained inside viewport on small screens. #131
- 15a5ea0: Fix: `.bf-state-icon` icon color (used by `<Input state="warning">`) should be `base-c` by default. #127
- a2994eb: Fixed bug where chromium-based browsers closes `<Modal>` even if `isOpen` and
  `noCloseOnEsc` is `true`, when users press `ESC` **more than once**. #143
- Updated dependencies [15a5ea0]
  - @intility/bifrost-css@5.0.4

## 5.0.4 - 2025-04-04

### Patch Changes

- Updated dependencies [391862a]
  - @intility/bifrost-css@5.0.3

## 5.0.3 - 2025-04-03

### Patch Changes

- c12aaed: Fix: `<CheckboxCard>` (and `<SwitchCard>` and `<RadioCard>`) `label` should not
  have `margin-bottom` when there's no content (`children`) below it.
  [#59](https://github.com/intility/bifrost/issues/59)
- 08849e2: Fix: support string for `logo` prop on `<Nav.Side>` and `<Nav.Top>` (adds fallback graphic, like the `logo` prop on `<Nav>`)

## 5.0.2 - 2025-04-01

### Patch Changes

- 6d67f5f: Fix: Explicitly set `font-family` to "Open Sans" to prevent inheriting wrong
  font from parent for components that may likely be nested inside a heading. #86
  - `<Badge>`
  - `<Tag>`
  - `<Button>`
  - `<Checkbox>`
  - `<Drawer>`
  - `<Modal>`
- Updated dependencies [e136063]
- Updated dependencies [6d67f5f]
- Updated dependencies [4b313b9]
  - @intility/bifrost-css@5.0.2

## 5.0.1 - 2025-03-26

### Patch Changes

- Updated dependencies [b1a6a7f]
  - @intility/bifrost-css@5.0.1

## 5.0.0 - 2025-03-26

### Major Changes

- Added support for React 19
- 582d87e: `<SlideDown>` no longers renders its `children` while `open` is `false` (unless mid-transition).
  - This change also affects components that use `<SlideDown>` internally:
    - `<Accordion.Item>`
    - `<Nav.Group>` when used in sidebar (non-collapsed)
    - `<Message expandable>` expandable message
    - `<Table.Row content>` expandable table row
- 65c4ebd: - New prop `theme` for `<Box>` component, applies a color theme to itself and descendant elements. Supports values:
  - `"inherit"` (default), same as not passing a `theme` prop.
  - `"teal"` default theme color (equivalent to "brand", useful if the parent theme isn't default).
  - `"purple"` purple theme color (equivalent to "chill").
- ac7ff14: Rewritten `<Tooltip>` and `<Dropdown>` components from scratch.
  - Removed `@tippyjs/react` dependency since it's no longer maintained and does not support React 19
    - All props previously forwarded to `<Tippy>` are no longer supported, but we have re-implemented the ones most used. See [upgrade guide](https://bifrost.intility.com/react/install/upgradeTo5) for migration tips.
  - Added `@floating-ui/react` dependency
  - They are no longer stacked using `z-index` but uses the browser top layer via [Popover Web API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) instead.
  - `disabled` prop not only disables the `<Dropdown>` or `<Tooltip>`, but no longer renders the `content` in the DOM tree.
  - Clicking on the hovered element no longer hides the `<Tooltip>`.
  - The `<Tooltip>` DOM node is no longer attached to the `document.body` default, but is placed as a sibling to the `children` of the `<Tooltip>`.
  - `onClickOutside` prop is removed, use `onHide` instead (triggers on `click` outside, and `ESC` kepress, and on `focusin` event on other elements).
  - `placement` no longer supports `"auto"` (default is now `"top"` for `<Tooltip>` and `"bottom-start"` for `<Dropdown>`). Valid values are:
    - `"top"`
    - `"right"`
    - `"bottom"`
    - `"left"`
    - `"top-start"`
    - `"top-end"`
    - `"right-start"`
    - `"right-end"`
    - `"bottom-start"`
    - `"bottom-end"`
    - `"left-start"`
    - `"left-end"`
- 8943b49: Refactored `<FloatingMessage>` to use [Popover Web API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API).
  - Fixes issue where floating messages would always appear behind an open `<Modal>` #738
  - Removed the extra `<div>` wrapper with `position: relative` and a `z-index`.
    - This includes forwarded props like `ref`, `className` and `style` (all documented props remain unchanged).

#### Removed

- 11e52eb: Removed `<Spinner>` component. Use `<Icon.Spinner>` instead:

```tsx
<Icon.Spinner size={64} /> // equivalent to `<Spinner />`
<Icon.Spinner /> // equivalent to `<Spinner size="1em" />`
```

- `theme` prop on `<Bifrost>` component removed (deprecated in 4.0)
  - to use light or dark mode, apply `.bf-darkmode` or `.bf-lightmode` to `<html>` element.
- `useTheme()` hook removed (deprecated in 4.0)
- 11e52eb: Removed `icon` and `iconRight` props from `<Button>` (deprecated since 4.7). Place `<Icon>` as child element instead:

```tsx
<Button>
  <Icon marginRight icon={faHome} />
  Click me
</Button>
```

- 11e52eb: Removed `"outline"` value for `<Button variant>` prop (deprecated since 4.7)
- 11e52eb: Removed `variant` prop from `<Dropdown>` (only has a single variant since 4.5)
- 11e52eb: Removed `hideCircle` prop from `<Nav.Item>` (deprecated since 4.2)
- 11e52eb: Removed `appName`, `collapsedAppName`, `logoHref` and `logoOnClick` from `<Nav>` - use `logo` instead. Same goes for `<Nav.Side>` and `<Nav.Top>` as well.
  `useFloatingMessage` hook no longer exported from FloatingMessage file - use `import useFloatingMessage from "@intility/bifrost-react/hooks/useFloatingMessage"`
- 285f893: Removed `dateFormat()` and `timeFormat()` functions (deprecated since 4.0) - use the `useDateTimeFormatter()` hook instead.

#### Renamed

- `useApplyTheme(theme: Theme)` hook renamed to `useApplyColorMode(mode: ColorMode)`. Still functions the same way.

#### TypeScript

- `Theme` type (`"light" | "dark" | "system"`) renamed to `ColorMode`

#### Dependencies

- 4e54726: Bump `focus-trap-react` dependency (used internally by Nav and Drawer) from `10.2.3` to `11.0.3`
- 526d727: Refactor: removed `date-fns` dependency from `@intility/bifrost-react` and added it to `@intility/bifrost-react-datepicker` and bumped from `3.6.0` to `4.1.0`

### Minor Changes

- a40486b: - New `<Badge state>` prop value `"brand"`
  - New `<Message state>` prop values `"brand"`, `"attn"`, and `"chill"`
  - `<Box background>` prop updated to match css background classes (some removed and some added, see bifrost-css changelog)
- c5b07ac: Added new `<Dropdown.Group>` component, styles a button for nested dropdown menu hierarchy, meant to use inside `content` of `<Dropdown>`.
  - `name` prop for labelling the button
  - Optional `icon` prop, styled equivalent to `<Dropdown.Item icon>`
  - `children` content will be placed inside a toggleable sub-dropdown

  Useful for dropdown menus with multiple levels, example:

  ```tsx
  <Dropdown
    content={
      <Dropdown.Group name="Group">
        <Dropdown.Item>Item 1</Dropdown.Item>
        <Dropdown.Item>Item 2</Dropdown.Item>
      </Dropdown.Group>
    }
  >
    <Button>Two levels</Button>
  </Dropdown>
  ```

  Can be nested inside eachother:

  ```tsx
  <Dropdown
    content={
      <Dropdown.Group name="Group">
        <Dropdown.Group name="Nested Group A">
          <Dropdown.Item>Item A1</Dropdown.Item>
          <Dropdown.Item>Item A2</Dropdown.Item>
        </Dropdown.Group>
        <Dropdown.Group name="Nested Group B">
          <Dropdown.Item>Item B1</Dropdown.Item>
          <Dropdown.Item>Item B2</Dropdown.Item>
        </Dropdown.Group>
      </Dropdown.Group>
    }
  >
    <Button>Three levels</Button>
  </Dropdown>
  ```

- bd4e754: Add new `usePrefersColorMode()` hook:
  - Uses CSS media query to find the users `prefers-color-scheme`.
  - Returns `"light"` or `"dark"` when running client-side. (which is the case for single-page-apps)
  - Falls back to `undefined` when server-side-rendering. (like preloading a next.js page, or statically generated)

### Patch Changes

- a26abe7: Deprecated `<Banner>` component. It's been removed from figma components for a while, no current designs should be using it.
- Updated dependencies [fef5acd]
- Updated dependencies [a40486b]
- Updated dependencies [11e52eb]
- Updated dependencies [3e16543]
  - @intility/bifrost-css@5.0.0

## 4.19.1 - 2025-02-26

### Patch Changes

- 1e2116f: update package metadata
- Updated dependencies [1e2116f]
  - @intility/bifrost-css@4.18.3

## 4.19.0 - 2025-02-19

### Minor Changes

- d40b0c3: feat: add noTooltip prop to FormatDate

## 4.18.2 - 2025-02-14

### Patch Changes

- Updated dependencies [66a9741]
- Updated dependencies [8bc2846]
  - @intility/bifrost-css@4.18.2

## 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)
- Updated dependencies [53e3e7b]
  - @intility/bifrost-css@4.18.1

## 4.18.0 - 2025-01-13

### Minor Changes

- 96071ef: - New `<Menu>` component suitable for nesting inside other wrappers like `<Section>`, `<Accordion>`, or `<Box>`
  - Simple flex container with `8px` gap (no background or other styling)
  - Optional `horizontal` boolean prop for laying out menu items inline.
  - New `<Menu.Item>` sub-component with some padding and hover bg, suitable for nesting inside a `<Link>`, `<a>`, or `<button>`.
    - Marked as active when nested inside a link or button with `.active` css class.
  - New `<Icon.Step>` component, suitable for creating a flexible "step-bar"
    - `variant` prop to choose which icon to display:
      - `"default"` - a faded dot, use for unvisited (future) step
      - `"active"` - right-arrow in a faded circle, use for current step
      - `"completed"` - checkmark in a solid circle, use for steps that are done
      - `"incomplete"` - unfinished progress-pie, use for steps that are visited but not done

  ```tsx
  <Menu>
    <a href="/step1">
      <Menu.Item>
        <Icon.Step variant="completed" marginRight />
        Step 1
      </Menu.Item>
    </a>
    <a href="/step2" class="active">
      <Menu.Item>
        <Icon.Step variant="active" marginRight />
        Step 1
      </Menu.Item>
    </a>
    [more steps...]
  </Menu>
  ```

### Patch Changes

- 548d6e7: Don't close modal on overlay click if click started on a different element
- Updated dependencies [49c20c4]
- Updated dependencies [96071ef]
- Updated dependencies [1716d20]
  - @intility/bifrost-css@4.18.0

## 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

- 958b541: Fix: Only apply padding for `<Input clearable>` when the icon is rendered
- Updated dependencies [eb3b1cc]
- Updated dependencies [97de3fe]
- Updated dependencies [174f259]
- Updated dependencies [10509f3]
  - @intility/bifrost-css@4.17.0

## 4.16.1 - 2024-11-29

### Patch Changes

- a9d985b: Fix: `<Icon.Spinner size>` prop type should now properly accept `number` and `string`.

## 4.16.0 - 2024-11-28

### Minor Changes

- 17060a3: Add new `<Icon.Spinner />` sub-component as an alias for:

  ```tsx
  <Icon
    icon={faSpinnerThird}
    className="bf-icon-spinner bfc-theme"
    style={{ fontSize: /* size prop */ }}
  />
  ```

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

### Patch Changes

- Updated dependencies [b9c82ea]
  - @intility/bifrost-css@4.16.0

## 4.15.0 - 2024-11-26

### Minor Changes

- 91f354b: New `<Ellipsis>` component, cuts off overflowing text and adds an ellipsis (…)
  - Renders a tooltip on hover when text is overflowing.
  - Configure allowed lines with `lines` prop (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" />
  ```

- Updated dependencies [bbb8a57]
- Updated dependencies [91f354b]
- Updated dependencies [bae3a2f]
  - @intility/bifrost-css@4.15.0

## 4.14.1 - 2024-11-06

### Patch Changes

- 7668263: Fix scaling issue with nav branding
- 9ac0d65: allow react 17 as a peer dep
- 908fd54: - Fixed `disabled` styling for pagination next/prev buttons
  - Fixed `:focus` styling for link-styled buttons
- Updated dependencies [7668263]
- Updated dependencies [908fd54]
  - @intility/bifrost-css@4.14.1

## 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

- fe1d4fc: Add convenience aliases for some components:
  - `<RadioCard>` is the same as `<CheckboxCard type="radio">`
  - `<SwitchCard>` is the same as `<CheckboxCard type="switch">`
- Updated dependencies [7915aaf]
- Updated dependencies [d090112]
- Updated dependencies [a486693]
- Updated dependencies [c8990f1]
- Updated dependencies [cb6baa6]
  - @intility/bifrost-css@4.14.0

## 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

- 1fbff6b: Fix: Section.Header and Section.Content now has `border-radius` (useful when designers put separate custom background colors on them)
- c2dfb58: Added translation text for select loading state
- Updated dependencies [1fa1483]
- Updated dependencies [1fbff6b]
- Updated dependencies [2703b98]
  - @intility/bifrost-css@4.13.0

## 4.12.1 - 2024-10-01

### Patch Changes

- 553fe3b: Set a (14px) font-size for `<Section>` component (previously inherited from parent)
- d303cff: TypeScript: Add missing values for `<Box background>` prop

## 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

- Updated dependencies [de00f8f]
- Updated dependencies [e7d617e]
- Updated dependencies [eac9a11]
- Updated dependencies [4fd0770]
  - @intility/bifrost-css@4.12.0

## 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

- c54884f: Fix: `useBreakpoint()` (used by `<Nav>` and `<Drawer>`) should no longer cause [hydration](https://react.dev/reference/react-dom/client/hydrateRoot) errors.
- 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.
- ea682a9: Fix: Render `<Tabs>` overflow arrows based on container size as opposed to window size. #776
- 8fb3f6c: Changed typescript definitions for union props to make them more readable in props docs table and on hover in IDE !693
- Updated dependencies [cfc369e]
- Updated dependencies [3bcdf74]
- Updated dependencies [3a5ae26]
- Updated dependencies [df8ce99]
  - @intility/bifrost-css@4.11.0

## 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
- Updated dependencies [6ef5ced]
  - @intility/bifrost-css@4.10.1

## 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: Add `external` prop to `<Box.Arrow>` component, for an arrow poiting up and to the right, 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
- Updated dependencies [810663f]
- Updated dependencies [46d07a6]
- Updated dependencies [8cbbf46]
- Updated dependencies [bb6765e]
- Updated dependencies [f1be5f4]
  - @intility/bifrost-css@4.10.0

## 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

- e3da5e5: Fix: `<Modal>` should no longer close itself when nested elements trigger a `cancel` event.
- 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)
- Updated dependencies [8685fcf]
- Updated dependencies [e8faca6]
- Updated dependencies [fe7ec62]
- Updated dependencies [a727d33]
  - @intility/bifrost-css@4.9.0

## 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

### Patch Changes

- 9326af8: add locale for the word "of"
- Updated dependencies [77c67b4]
  - @intility/bifrost-css@4.8.0

## 4.7.5 - 2024-08-07

### Patch Changes

- Updated dependencies [fd3acaa]
  - @intility/bifrost-css@4.7.2

## 4.7.4 - 2024-08-06

### Patch Changes

- 633e7b2: chore: avoid internal barrel file imports
- Updated dependencies [899927b]
- Updated dependencies [2cbf99a]
  - @intility/bifrost-css@4.7.1

## 4.7.3 - 2024-08-02

### Patch Changes

- 1755cfb: fix: autoFocus not working in `<Modal />` when initial `isOpen` is true

## 4.7.2 - 2024-08-02

### Patch Changes

- Updated dependencies [3ccc958]
- Updated dependencies [6dfd55d]
- Updated dependencies [14c207d]
  - @intility/bifrost-css@4.7.0

## 4.7.1 - 2024-07-31

### Patch Changes

- Updated dependencies [9ae0e80]
  - @intility/bifrost-css@4.6.1

## 4.7.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`
- 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.
- 7b2eacc: Fix: Apparently, Chrome has changed its `<input autocomplete>` behaviour and now appears to only respect `autoComplete="off"`, so lets try that and pray to the browser gods that this will satisfy all of them for the forseeable future. #758
- 49761c2: support `autoFocus` on elements inside `<Modal />`
- Updated dependencies [ac738a9]
- Updated dependencies [4df5421]
- Updated dependencies [841993b]
- Updated dependencies [daa6eee]
- Updated dependencies [a23cc4f]
- Updated dependencies [365100c]
  - @intility/bifrost-css@4.6.0

## 4.6.0 - 2024-06-21

### Minor Changes

- 43dc6cf9: New `removeFloatingMessage()` function exposed from `useFloatingMessage()` hook when called from a component nested inside a floating message. #708

### Patch Changes

- 426d9481: Fix: Floating messages should now transition properly regardless of message box height, and respect users `prefers-reduced-motion` setting.
- Updated dependencies [a2ec3e53]
- Updated dependencies [23ff3593]
  - @intility/bifrost-css@4.5.1

## 4.5.1 - 2024-06-13

### Patch Changes

- fd392752: Fix: Drawer `inert` prop should now support react 19
- 6a6a8cd5: import tippy with a fallback to avoid failing in some build systems
- Updated dependencies [833a15e4]
  - @intility/bifrost-css@4.5.0

## 4.5.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

- 13a6a698: Fix: `<Tooltip>` should no longer be overlapped by `<Nav>` #744
- Updated dependencies [0b24673c]
- Updated dependencies [e6ead541]
  - @intility/bifrost-css@4.4.0

## 4.4.0 - 2024-06-05

### Minor Changes

- c0206816: Added new `<Section>` component

### Patch Changes

- c20e24ae: Fix Nav.Search styling when used in top bar
- 409b9e4d: Fix: allow deep import of `useBreakpoint` hook, e.g. `import useBreakpoint from "@intility/bifrost-react/hooks/useBreakpoint";`
- Updated dependencies [c20e24ae]
- Updated dependencies [5de6a97c]
  - @intility/bifrost-css@4.3.1

## 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

- 503ffd86: Performance tweaks for `useDateTimeFormatter()` #725
- 9749173c: Fixed positioning for nav top bar #746
- Updated dependencies [069614ed]
- Updated dependencies [9b7cead3]
- Updated dependencies [fd90da94]
- Updated dependencies [9749173c]
  - @intility/bifrost-css@4.3.0

## 4.2.7 - 2024-05-29

### Patch Changes

- Updated dependencies [d2bb0be5]
  - @intility/bifrost-css@4.2.7

## 4.2.6 - 2024-05-29

### Patch Changes

- Updated dependencies [4c0b4e5e]
  - @intility/bifrost-css@4.2.6

## 4.2.5 - 2024-05-27

### Patch Changes

- c00455e8: bump focus-trap-react dep
- Updated dependencies [af52c2d7]
  - @intility/bifrost-css@4.2.5

## 4.2.4 - 2024-05-22

### Patch Changes

- 92cc2649: Fixed error assigning sub-components to a client component
- bf863902: New custom icon for Nav sidebar collapse button
- 751340b2: fix intility logo asset import in Nav.Logo and internal Branding component
- Updated dependencies [366de21e]
- Updated dependencies [bf863902]
- Updated dependencies [917825cb]
  - @intility/bifrost-css@4.2.4

## 4.2.3 - 2024-05-16

### Patch Changes

- Updated dependencies [9c1de768]
  - @intility/bifrost-css@4.2.3

## 4.2.2 - 2024-05-16

### Patch Changes

- Updated dependencies [08583204]
  - @intility/bifrost-css@4.2.2

## 4.2.1 - 2024-05-15

### Patch Changes

- 99fc0cdc: Change nav side collapse icon from pro to free bundle
- 33a242ff: Fix text-align in top nav for some scenarios
- Updated dependencies [33a242ff]
  - @intility/bifrost-css@4.2.1

## 4.2.0 - 2024-05-15

### Minor Changes

- 74dc6d6f: - `<Nav>` component redesigned:
  - A lot of styling changes, including removal of top-left Intility logo. See [bifrost-css changelog](https://github.com/intility/bifrost/blob/main/packages/bifrost-css/CHANGELOG.md).
  - Added "an intility service" branding to bottom of sidebar (and mobile nav).
    - New prop `hideBranding` can disable it.
    - Changes to an "it" graphic for collapsed sidebar.
  - New prop `logo`, which accepts an app name as string, or JSX content.
  - Deprecated props `appName`, `collapsedAppName`, `logoHref`, and `logoOnClick` (all you need is `logo`)
  - New helper component `<Nav.Logo>` for topbar logo layout (custom graphic + text). See updated [Nav component docs](https://bifrost.intility.com/react/nav#logo-graphic) for examples.
- dfb6fbfb: - New `<Box>` component to make bifrost styling more easily accessible in JSX.
  - Unstyled by default, use props to add styling:
  - `shadow` - `boolean`
  - `border` (plus `borderTop`, `borderRight`, `borderBottom`, `borderLeft`) - `boolean`
  - `padding` (plus `paddingInline`, `paddingBlock`) - `boolean` | `number`
  - `background` - `boolean` | `"base"` | `"base-2"` | `"base-3"` | `"dimmed"` | `"dimmed-c"` | `"inverted"` | `"inverted-2"` | `"theme"` | `"theme-fade"` | `"success"` | `"success-fade"` | `"warning"` | `"warning-fade"` | `"alert"` | `"alert-fade"` | `"alert-fade-2"` | `"attn"` | `"attn-c"` | `"chill"` | `"chill-c"`
  - `radius` (plus `radiusTopLeft`, `radiusTopRight`, `radiusBottomRight`, `radiusBottomLeft`)
    - `"xs"` = `4px`
    - `"s"` = `8px`
    - `true` or `"m"` = `12px`
    - `"l"` = `16px`
    - `"xl"` = `24px`
    - `"full"` = `9999px`
    - `false` or `undefined` (default) = no border radius
  - New `<Box.Arrow>` component, renders an arrow-right icon with a transition on hover when nested inside a link.
    - E.g. `<a href="/path">link with arrow <Box.Arrow /></a>`

### Patch Changes

- Updated dependencies [2207b865]
- Updated dependencies [f3eae438]
  - @intility/bifrost-css@4.2.0

## 4.1.2 - 2024-05-15

### Patch Changes

- 924c0b5f: Bump datepicker and date-fns versions !557

## 4.1.1 - 2024-04-24

### Patch Changes

- Updated dependencies [31205e8d]
  - @intility/bifrost-css@4.1.1

## 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

- 1efa0916: Fix: Avoid double border for `<Table.Row content>` #731
- 660407c2: fix: Disable autofocus on initial item when opening mobile Nav
- Updated dependencies [f39613ed]
- Updated dependencies [29572cca]
  - @intility/bifrost-css@4.1.0

## 4.0.2 - 2024-04-10

### Patch Changes

- 79b9ab5d: Fix deep import paths for `useNav` and `useFloatingMessage`

## 4.0.1 - 2024-04-05

### Patch Changes

- 611f82ca: Removed unnecessary files from npm package output.
- Updated dependencies [bb9e438b]
- Updated dependencies [611f82ca]
  - @intility/bifrost-css@4.0.1

## 4.0.0 - 2024-04-03

### Major Changes

- Removed dependencies `react-modal`, `react-animate-height`, `react-select`,
  `react-datepicker`, and `prop-types` from `@intility/bifrost-react`
  - Removed components `<Select>` and `<DatePicker>` from
    `@intility/bifrost-react`
  - 5c7ba5a4: New packages `@intility/bifrost-react-select` and
    `@intility/bifrost-react-datepicker`
- Removed `setTheme` method from deprecated `useTheme()` hook.
- 3f3af703: `<Button type>` prop now defaults to `"button"` (previously
  `"submit"`)
  - If you're using a bifrost `<Button>` inside a `<form>` (listening to the
    `onSubmit` event), and want it to submit the form, you now need to explicitly
    set `<Button type="submit">`
- `<Breakpoint>` rewritten from scratch.
  - No longer relies on `matchMedia` browser API (making it server-side
    friendly)
  - Will now always render its child content to the DOM, and show/hide it with
    [breakpoint CSS classes](/css/breakpoints)
  - Introduces a `<div>` wrapper.
  - We still recommend using [breakpoint CSS classes](/css/breakpoints) instead
- `<Modal>` rewritten from scratch, using brower native `<dialog>` element.
  - 81af701b: `fromBottom` prop removed, use `<Drawer position='bottom'>`
    instead.
    - Drawer with `position="buttom"` should not disable main scroll.
  - ae6a87d3: Refactor `<Modal>` component close props:
    - `noCloseButton` prevents rendering an "X" close button
    - `noCloseOnOverlayClick` prevents closing on overlay click (previously
      `shouldCloseOnOverlayClick`)
    - `noCloseOnEsc` prevents closing on ESC keypress (previously
      `shouldCloseOnEsc`)
    - removed `noClose` prop from previous beta prerelease
- `<SlideDown>` rewritten from scratch
  - Will now always render its child content to the DOM, and hide/transition
    with CSS classes [`.bf-expand` and `.bf-expand-closed`](/css/expand).
  - Uses a
    [css trick](https://css-tricks.com/css-grid-can-do-auto-height-transitions)
    that does not allow `padding` on the container. Create a child element with
    `padding` if needed.
  - Used internally by `<Message expandable>`, `<Accordion.Item>`,
    `<Table.Row content>` and `<Nav.Group>`
- 19500ce7: Removed all internal `localStorage` usage, `<Bifrost>` component is
  now strictly authorative
- 81af701b: New `position="bottom"` prop for `<Drawer>`
- 6b355639: New styling for inputs, now always outlined. Removed `variant` prop
  from `<Input>`.
- 3785f8d6: New `package.json` definitions, updated import paths
  - Allows deep imports (incl. TypeScript definitions)  
    ex: `import Accordion from '@intility/bifrost-react/Accordion'`
  - Support for React Server Components (RSC) and Server-Side Rendering (SSR or
    SSG)
  - Dropped support for CJS (only shipped in ES Module format, meaning
    `require('@intility/bifrost-react')` will not work, only `import` or
    `import()`)
  - 165904af: Hooks can be imported from `/hooks/*`
- Removed margins from block level typograpy classes
  - `.bf-h1`
  - `.bf-h2`
  - `.bf-h3`
  - `.bf-h4`
  - `.bf-h5`
  - `.bf-h6`
  - `.bf-p`
  - `.bf-ul`
  - `.bf-ol`
  - `.bf-li`
- Removed all `propTypes` in favor of TypeScript with JSDoc comments

### Minor Changes

- Deprecated ~~`icon`~~ and ~~`rightIcon`~~ props for `<Button>` (Use nested
  `<Icon>` instead: `<Button><Icon /> Click me</Button>`)
- Deprecated the (potentially confusing) `l` in `bfl-*` for:
  - `.bf-border` and `--bf-border`
  - `.bf-padding` and `--bf-box-padding`
  - `.bf-page-padding` and `--bf-page-padding`
  - `.bf-autocol`, `--bf-autocol-width`, and `--bf-autocol-gap`
  - The old names (like `.bfl-border`) are aliased and should still work, but
    might get removed in a future release.
- Deprecated ~~`theme`~~ prop from `<Bifrost>` component.
  - Apply theme class names `.bf-darkmode` and `.bf-lightmode` on root element
    (`<html>`) instead.
- New `useApplyTheme()` helper hook for applying a theme class to the root.
  - Only use in a single-page app, for SSR/RSC/SSG (like Next.js) you may have
    direct control over the root `<html>` element.
  - `useApplyTheme("dark")` applies `.bf-darkmode` class to `<html>`
  - `useApplyTheme("light")` applies `.bf-lightmode` class to `<html>`
  - `useApplyTheme("system")` does not apply any class (bifrost will follow
    device setting)
- `<Message>` components uses new (solid) default icons, you may prefer to
  pass in font awesome pro icons to the `icon` prop instead.
- `<Drawer>` with `overlay` (or fullscreen mobile) should disable scroll on root
  element instead of `<body>`, like the mobile `<Nav>` menu does.
  - Drawer content padding should now match `.bf-page-padding`.
- `<Accordion>` HTML structure and styling
  - Angle icon moved left for styled variant
  - No text-decoration on hover
- `<Message>` styling changes, angle icon moved left + minor tweaks. #719
- All form fields (`<Input>`, `<TextArea>`, `<Select>`, `<DatePicker>`, and
  `<FieldGroup>`) now have an `1px` outline instead of a `2px` underline
- Top nav logo color changed to neutral `base-c` and given a proper keyboard
  focus state.
- Slight tweaks to `base` and `attn` color values. #711 & #723
- New `position="bottom"` prop for `<Drawer>`
- b9a6353b: New classes for single edge bifrost default border:
  - `.bf-border-top`
  - `.bf-border-right`
  - `.bf-border-bottom`
  - `.bf-border-left`
- New CSS classes for rendering content for _either_ dark or light 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.
- New [`<Inline>`](/react/inline) component for inline layouts
  - Places its child elements on same line with a `8px` gap default
  - Uses `.bf-inline` CSS class
  - Use `<Inline.Separator />` as a child to push its siblings away
    - Alternatively use `.bf-inline-separator` CSS class
  - Use `<Inline.Stretch>` to stretch its own nested child element.
    - `<Inline.Stretch><Button>Stretched button</Button></Inline.Stretch>`
    - Alternatively use `.bf-inline-stretch` CSS class
      - `<Button className="bf-inline-stretch">Stretched button</Button>`
- 7f1969b7: New `fullTooltip` prop for `<FormatDate>` displays full date and
  time in tooltip even if `show` is set to `date` or `time`
- 6edfa7a4: Improve accessibility and keyboard navigation for `<Nav>` component
  #441
  - New "Skip to content" button for keyboard users
  - Trap focus inside mobile nav menu when open, with a close button for
    keyboard users
  - Added missing `aria` attributes
- cc16df41: `<Tooltip>` DOM node is now appended to `parentNode` by default, in
  order to work correctly when used inside a `<Modal>`. #722  
  [Read more about appendTo at tippyjs docs](https://atomiks.github.io/tippyjs/v6/all-props/#appendto).
- 6b355639: New `<Accordion>` styling and DOM structure
  - New `buttonProps` prop for `<Accordion.Item>`, allows customizing the
    underlying `<button>` element
- 9814ef52: New `useDateTimeFormatter()` hook for formatting date and/or time.
  - Follows the locale passed to `<Bifrost locale>`
  - Replaces `dateFormat()` and `timeFormat()` (now marked as deprecated)
  - Returns a function that accepts an object parameter with same API as
    `<FormatDate>`:
    - `show`: either "date" (default), "time", or "datetime"
    - `date`: an ISO formatted date string, or a `Date` objet
    - `locale`: (optional) override the default
      [`Intl.Locale`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)
    - `options` (optional) override the default
      [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
- 62b02461: Include JSDoc comments in TypeScript Definition output
- 50b76941: Fix: Mobile landscape font size iOS #721
- 3849abc3: Optional padding (`noPadding` prop) and close button
  (`onRequestClose` no longer required) for `<Drawer>`
- be0a4fcf: `<Checkbox>` and `<CheckboxCard>` internal rewrite. Input wrapped
  in label, removes need for generated `id`. Props and usage unchanged.
- 56d60bd8: Add convenience aliases for some components:
  - `<SubmitButton>` is the same as `<Button type="submit" variant="filled">`
  - `<Radio>` is the same as `<Checkbox type="radio">`
  - `<Switch>` is the same as `<Checkbox type="switch">`
- ec250594: `<Drawer>` content padding should now match `.bf-page-padding`.
- 710afa88: New `<Message>` component styling #719

### Patch Changes

- `<Breadcrumbs.Item>` separator angle color and spacing changed to more closely
  match Figma component.
- Fixed bug that allowed users to focus elements inside a closed `<Drawer>` when
  using the `footer` prop.
- Updated mobile landscape font size for IOS. #721
- Disable main scroll while scrolling inside `.bf-drawer` or `.bf-modal` with
  `overscroll-behavior: contain` #678
- Add `safe-area` (mobile device screen "notch" or "dynamic island") padding for
  `.bf-drawer` #734
- Use `dvh` instead of `vh` for supporting browsers #733
- 5e25cfc0: Fix: `index.d.ts` files in package output should no longer strip out
  JSDoc comments for component props. Hovering over a prop in vscode should now
  properly display a description.
- 82b1a248: Fix: Allow clicks outside focus-trapped mobile `<Nav>`
- 18c2b063: Allow `<SlideDown>` overflow when expanded
- 82ab21b5: Update `border-radius` values to use bifrost css variables
- 5504294e: Fix `<Drawer>` spacing when no close button
- 14a9b64b: Fix: `<Grid.Span cols>` prop should now properly default to `1`
- 1076f2cb: Fix: internal `<button>`s are now `type="button"` and should no
  longer trigger a submit if wrapped in `<form>`
- 8263586d: Fix: allow `dist/*` css import
- 7db473c6: Fixed bug that allowed focus inside a closed `<Drawer>` when using
  `footer` prop

## [3.12.0] - 2023-09-28

### Added

- Added support for swedish `svSE` locale and date format.

### Fixed

- `useUniqueId` should no longer cause warnings when attempting to build projects using pre-18 react

## [3.11.0] - 2023-08-24

### Changed

- [`<Nav>`](#/Components/Navigation/Nav) styling changed, mobile and tablet menu items are now styled same as desktop sidebar.

### Fixed

- [`<Table.Row>`](#/Components/Interactive/Table) with `content` will now correctly span all available columns. !446
- [`<Checkbox>`](#/Components/Inputs/Checkbox) and [`<CheckboxCard>`](#/Components/Inputs/CheckboxCard) should now render correct state even without `checked` prop (useful if used inside a `<form>`, for instance). !450
- Ids generated under the hood by Bifrost components will now use `useId` when on React 18, giving better SSR support
- Open Sans and Satoshi font family names are now read from variables (`--font-open-sans` and `--font-satoshi`), allowing usage of NextJS font system
- Mobile nav menu should now correctly prevent main browser scroll while open (even for first toggle).
- [`<FloatingArea>`](#/Components/Utility/FloatingArea) should be positioned correctly even if `body` has `overflow: scroll` styling (don't do this)

## [3.10.0] - 2023-06-07

### Changed

- Cleaned up a lot of potential CSS issues (with help from [`stylelint`](https://stylelint.io/)). #684
- [`<Select>`](#/Components/Inputs/Select) now displays current selection (for single value) in input field while opened.
- Added screen reader accessible label for [`<Modal>`](#/Components/Interactive/Modal) and [`<Drawer>`](#/Components/Interactive/Drawer) close button. !443

### Fixed

- Icon files in `/es/assets` directory of the package output should now correctly be ES module format. #688
- Updated [`react-datepicker`](https://reactdatepicker.com/) dependency to version [`^4.12.0`](https://github.com/Hacker0x01/react-datepicker/releases/tag/v4.12.0) which should fix timepicker issue. #620
- [`<Select>`](#/Components/Inputs/Select) and other scrollable elements should no longer get extra padding when used inside [`<Drawer>`](#/Components/Interactive/Drawer). #690

## [3.9.0] - 2023-05-05

### Added

- New prop `footer` for [`<Drawer>`](#/Components/Interactive/Drawer) provides a fixed (non-scrollable) area at the bottom of the drawer. #606

### Fixed

- Using [`<Select>`](#/Components/Inputs/Select) with grouped options should no longer produce an error about ":first-child" CSS. #682
- `<Tabs.Item content>` prop type should now work properly, even with latest react types. Refactored all component prop types to avoid potential conflicts with any global `@types/react` HTML attributes. #683

## [3.8.3] - 2023-04-25

### Fixed

- Downgraded [`react-datepicker`](https://reactdatepicker.com/) dependency to version `4.8.0` since it's [currently the latest version with a working timepicker](https://github.com/Hacker0x01/react-datepicker/issues/3952) (hopefully temporarily). #679

## [3.8.2] - 2023-04-21

### Fixed

- [`<Dropdown>`](#/Components/Interactive/Dropdown) padding moved inside its scrollable area. #671
- Close button for [`<Modal>`](#/Components/Interactive/Modal) and [`<Drawer>`](#/Components/Interactive/Drawer) should now render correctly for iOS Safari. #677

## [3.8.1] - 2023-04-11

### Fixed

- `appName` for [`<Nav>`](#/Components/Navigation/Nav) changed font to Open Sans. #529
- The following components now support JSX in `label` prop. #551
  - [`<TextArea>`](#/Components/Inputs/TextArea)
  - [`<CheckboxCard>`](#/Components/Inputs/CheckboxCard)
  - [`<FieldGroup>`](#/Components/Inputs/FieldGroup)
  - [`<DatePicker>`](#/Components/Inputs/DatePicker)
  - [`<Select>`](#/Components/Inputs/Select)
  - [`<Spinner>`](#/Components/Visual/Spinner)

## [3.8.0] - 2023-03-17

### Fixed

- [`<Modal>`](#/Components/Interactive/Modal) close button z-index issue when content surpasses screen height on mobile devices. #658
- [`<Table.Row>`](#/Components/Interactive/Table) click event for expanding `content` should no longer propagate/bubble. #646
- Firefox should no longer render [`<Nav.Group>`](#/Components/Navigation/Nav) taller than [`<Nav.Item>`](#/Components/Navigation/Nav) #668

### Added

- New prop `pill` for [`<Badge>`](#/Components/Visual/Badge), applies rounded corners. #661

## [3.7.0] - 2023-03-01

### Changed

- TypeScript definitions have been reworked.
- [`<Card>`](#/Components/Visual/Card) styling tweaks, default font (Open Sans) for title, and default text color (`base-c`) for content. #596
- [`FormatDate`](#/Components/Utility/FormatDate) now displays a shorter numeric date format. #517
  - New tooltip displays full month name for dates, and timezone info for times.
  - Added [`options`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) and [`locale`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#locales) props for customizability

### Fixed

- [`<Input>`](#/Components/Inputs/Input) component, added TypeScript support for JSX in `label` prop. #551
- Locked `react-datepicker` dependency to version `4.10.0` (previously `^4.3.0`) since they introduced breaking api changes inside same major version. #620
- [`<DatePicker>`](#/Components/Inputs/DatePicker) format and placeholders should now follow current bifrost locale. #517
  - Added placeholders for month/year and year-only mode.
  - Better highlighting of todays date (underlined) #621
- Passing `components` prop to [`<Select>`](#/Components/Inputs/Select) is now merged with Bifrost Select's components, instead of overriding.

## [3.6.0] - 2023-02-02

### Added

- [`<Button.Expand>`](#/Components/Inputs/Button) component, a bifrost-standardised toggle button useful alongside [`<SlideDown>`](#/Components/Utility/SlideDown). #450
- [`<Select>`](#/Components/Inputs/Select) now supports a `loading` prop (alias for `isLoading` from `react-select`), which displays a loading spinner in a similar fashion to [`<Input loading>`](#/Components/Inputs/Input). #540
- More link style css classes and a new style guide page for [styling links and buttons](#/Welcome%20to%20Bifrost/Visual%20style/Links%20and%20buttons). #610
  - Links with `.bf-button` can now be combined with `.bf-button-pill`, `.bf-button-small`, `.bf-tag` (previously only `.bf-button-filled` and `.bf-button-outline`)
  - Allows styling `<a>` as a small button, pill button, any combination (including filled and outline), or a [`<Tag>`](#/Components/Interactive/Tag)

### Changed

- Slightly increased padding on [`<Button small pill>`](#/Components/Inputs/Button) from `8px` to `12px`.

### Fixed

- Warning/alert icon size for [`<TextArea>`](#/Components/Inputs/TextArea). #612
- Updated our [`<DatePicker>`](#/Components/Inputs/DatePicker) since certain versions of `react-datepicker` appears to pass a Date object to `formatWeekDay` prop instead of a string. #614

## [3.5.1] - 2023-01-25

### Fixed

- [`<Accordion.Item onClick>`](#/Components/Interactive/Accordion) is now usable with internal state (previously required you to control `active` state explicitly)

## [3.5.0] - 2023-01-11

### Fixed

- [`<Checkbox>`](#/Components/Inputs/Checkbox) with `hideLabel` should better match the size and alignment of other checkboxes. #575
- [`<Drawer>`](#/Components/Interactive/Drawer) heading `font-weight` updated to match figma spec. #581

### Added

- [`<SlideDown>`](#/Components/Utility/SlideDown) accepts a `closedHeight` prop
- [`<Select>`](#/Components/Inputs/Select) now forwards the `ref` to the internal `react-select` component

### Changed (potentially breaking)

- CSS variables `--bf-nav-top-height` and `--bf-nav-side-width` should now be `0px` for parent elements of [`<Nav>`](#/Components/Navigation/Nav), and for child elements when there is no [`<Nav>`](#/Components/Navigation/Nav) top or side, respectively. fixes #576 but we may revert this change if there are unintended side effects.

## [3.4.3] - 2022-12-01

### Fixed

- [`<Drawer>`](#/Components/Interactive/Drawer) no longer erroneously disables scrolling on body in certain circumstances. (For up to large (1280px) screens it renders with an overlay and disables scrolling on body, which would stick if users zoomed out or resized window.) #572
- [`<Checkbox>`](#/Components/Inputs/Checkbox) wrapper now has `position: relative` to contain its hidden internal `<input>`, fixes strange scrollbar/overflow issues in Firefox.

## [3.4.2] - 2022-11-18

### Fixed

- Prevent [`<Nav>`](#/Components/Navigation/Nav) top bar from obscuring top section of the element being scrolled to (when using a url hash) by adding `scroll-padding-top` to `<html>`.

## [3.4.1] - 2022-11-16

### Fixed

- Minor overflow issue when using [`<Checkbox>`](#/Components/Inputs/Checkbox) inside [`<Nav.Group>`](#/Components/Navigation/Nav) in top bar.
- [`<Drawer>`](#/Components/Interactive/Drawer) close button should no longer overlap header. #564

## [3.4.0] - 2022-11-16

### Added

- `contentProps` prop for [`<Tabs.Item>`](#/Components/Interactive/Tabs) forwards props to internal `<div>` (allows putting custom css class on content wrapper, for instance).
- `noCloseButton` for [`<Modal>`](#/Components/Interactive/Modal), allows developers to customize close button while still using `onRequestClose` for closing on overlay click and ESC keypress.
- [Color conversion table](#/Welcome%20to%20Bifrost/Visual%20style/Colors), converts all bifrost CSS variable colors to hsl, rgb, or rgb-hex syntax.

### Changed

- Minor styling tweaks for [`<Checkbox>`](#/Components/Inputs/Checkbox), should behave better when used as a CSS grid item.
- [`.bf-scrollbar`](#/Welcome%20to%20Bifrost/Examples/Scrollbar) (and `.bf-scrollbar-small`) now also applies `scroll-behavior: smooth` for users without `prefers-reduced-motion`
- Use small scrollbar for [`<Select>`](#/Components/Inputs/Select) and [`<Sticky>`](#/Components/Utility/Sticky) #440
- More CSS bundles in package output, allows more options for fine-grained usage (bifrost css without font imports, for example). [CSS files overview in Contributing.md file in github](https://github.com/intility/bifrost/blob/main/Contributing.md#css-files-overview)

### Fixed

- Slight tweaking for [`<Message>`](#/Components/Interactive/Message) close button styling (should be more centered for more screens/zoom levels).
- Bumped `z-index` for [`<Select>`](#/Components/Inputs/Select) and [`<DatePicker>`](#/Components/Inputs/DatePicker) so they overlap [`<BottomBar>`](#/Components/Navigation/BottomBar). #552
- Fixed styling for link elements (`<a>`) with `.bf-button-outline` (and `.bf-button-alert`). #557
- Removed old `letter-spacing` from [H5 styling](#/Welcome%20to%20Bifrost/Visual%20style/Typography). #558
- Disabled ligatures for Satoshi font, since they dont match our stylistic set. #559
- Update `react-animate-height` dependency to `2.1.2`, should fix "TypeError" crash. #566
- Removed small scrollbar CSS for Firefox, fixes issues with resize button size for `<TextArea>`. New versions of Firefox already renders a nice small scrollbar, no need for the separate styling anymore. #567

## [3.3.0] - 2022-10-13

### Added

- [Example guide for Table of Contents](#/Welcome%20to%20Bifrost/Examples/Table%20of%20Contents)
- [`<Sticky>`](#/Components/Utility/Sticky) component, a box that will follow scroll position until it's `24px` from top (then stick to top)
  - Useful for creating a Table of Contents for desktop screens
- [`<FloatingArea>`](#/Components/Utility/FloatingArea) component, a container which will automatically hide when user scrolls down, re-appears when user scrolls up
  - Useful for a 'Scroll to top' or 'Open TOC' button
- [`.bf-border`](#/Welcome%20to%20Bifrost/Visual%20style/Border) css class, applies a bifrost default `border: 1px solid var(--bfc-base-dimmed)`.
- [`.bf-border-radius`](#/Welcome%20to%20Bifrost/Visual%20style/Border) css class, applies a bifrost default `border-radius: 3px`.

### Fixed

- Support for nested [`<Dropdown>`](#/Components/Interactive/Dropdown) and [`<Tooltip>`](#/Components/Interactive/Tooltip)
- [`<Nav>`](#/Components/Navigation/Nav)
  - Using `<button>` as a wrapper around `<Nav.Item>` (as opposed to an `<a>` or a `<Link>`) should now be styled correctly.
  - Minor padding and margin tweaks for `<Nav.Item>` when used inside `<Nav.Group>`.
  - `--bf-nav-top-height` should now correctly compute to `0px` when the top nav is hidden.

## [3.2.0] - 2022-10-04

### Added

- props for [`<Modal>`](#/Components/Interactive/Modal)
  - `center` will center content for mobile screens (when modal is displayed full screen)
  - `fromBottom` renders as a full-width drawer-ish popup that slides in from bottom, also allows rest of page to be interactive and scrollable while open (recommended for mobile screens only)
- props for [accordions](#/Components/Interactive/Accordion)
  - `<Accordion multiple>` allows an uncontrolled accordion to have multiple open items
  - `<Accordion.Item defaultActive>` sets an uncontrolled accordion item to open initially
- props for [`<Button>`](#/Components/Inputs/Button)
  - `pill` for round edge style
  - `noPadding` removes inline padding. Allows circular button when combined with `pill` and only an `<Icon>` child

### Changed

- [`<Nav>`](#/Components/Navigation/Nav) top bar automatically hidden for mobile screens when user scrolls down, re-appears when user scrolls up

### Fixed

- Explicit `text-decoration-style` for Safari (does not support `text-decoration` style in shorthand form)
- Prevent keyboard focus inside `<Nav>` mobile menu when it is closed
- CSS font `@import` statements should now be correctly placed at top of packaged CSS files
- Position of `<Drawer>`'s close button icon

## [3.1.0] - 2022-09-07

### Added

- New prop `aspectRatio` for `<Skeleton.CardImage>` to match the behavior and api of `<Card.Image>`

### Fixed

- Removed `z-index` from classname `.bf-accordion-item-title`
- Added `z-index` to `<BottomBar>`. Same value as `.bf-nav-side` and `.bf-nav-top`
- Transitions should be disabled when changing theme in a more consistent way

## [3.0.0] - 2022-09-01

### Breaking

- Font Awesome dependency updated to v6
- Removed components
  - `<TabBar>` removed and `<Tabs>` reworked (see below)
  - `<Sidebar>` and `<TopBar>` (deprecated since v2.2, replaced by `<Nav>`)
  - `<Message.Header>` (use `<Message header="">` instead)
- Reworked `<Tabs>` component
  - Changes to `<Tabs>`:
    - `active` and `onChange` (removed) - use `active` and `onClick` on `<Tabs.Item>` instead
  - Changes to `<Tabs.Item>`:
    - `children` (changed) - tab button text (previously `title`)
    - `content` (new) - the tab panel content, rendered when the tab is active (previously `children`)
    - `title` (removed) - used to be the tab button text and required a unique string (now use `children`, with no limitations, we generate a unique id internally)
    - `tabProps` (removed) - passed props now apply directly to the tab button
  - Overflow buttons and scroll should work better (rewritten from scratch, happens when there's not enough space to fit all the tabs)
- Removed CSS class names
  - `.bfl`, `.bfl-2col`, and `.bfl-3col` have been removed, use [`.bfl-grid`](#/Welcome%20to%20Bifrost/Layout/CSS%20grid) or [`<Grid>`](#/Components/Utility/Grid) for column layouts instead
- Removed CSS variables
  - `--bf-font-size-xl` (use `--bf-font-size-h4`)
  - `--bf-font-size-xxl` (use `--bf-font-size-h3`)
  - `--bf-font-size-xxxl` (use `--bf-font-size-h2`)
  - `--bf-font-size-xxxxl` (use `--bf-font-size-h1`)
  - `--bf-topbar-height` (use `--bf-nav-top-height`)
  - `--bf-sidebar-width` (use `--bf-nav-side-width`)
  - `--bf-sidebar-width-collapsed` (use `--bf-nav-side-width`)
  - `--bf-sidebar-transition` (use `--bf-nav-side-transition`)
  - `--bf-card-image-ratio` (use `aspectRatio` prop on `<Card.Image>`)
  - `--bf-card-image-height` (with [`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) there is no need)
- Renamed default value for `size` prop on `<ProgressBar>` from `'regular'` to `'medium'`
- Changed `state` prop on multiple components
  - Renamed `'theme'` to `'default'`
  - Removed unused/invalid values

    | Component      | New valid values for `state`                                         |
    | -------------- | -------------------------------------------------------------------- |
    | `<Input>`      | 'default', 'success', 'warning', 'alert'                             |
    | `<DatePicker>` | 'default', 'success', 'warning', 'alert'                             |
    | `<Button>`     | 'default', 'alert', 'inactive'                                       |
    | `<Select>`     | 'default', 'alert'                                                   |
    | `<TextArea>`   | 'default', 'warning', 'alert'                                        |
    | `<FieldGroup>` | 'default', 'alert'                                                   |
    | `<Message>`    | 'default', 'success', 'warning', 'alert', 'neutral'                  |
    | `<Badge>`      | 'default', 'success', 'warning', 'alert', 'attn', 'chill', 'neutral' |
    | `<Tooltip>`    | 'default', 'neutral'                                                 |

- `<Checkbox>` component is now `display: inline-block` to make it behave more like a native `<input type='checkbox' />`
- `<Button>` component `width` and `height` constraints are removed, and the `stretch` prop as well. (Now stretches to its content like a native `<button>`)
- Removed `focus-visible` polyfill. Use `:focus-visible` instead of `[data-focus-visible-added]` in your CSS selectors
- Form input components `style` and `className` props are now sent to wrapping container element instead of internal form element.
  - Removed `containerProps` prop that was previously used for this, for the following components:
    - `<Checkbox>`
    - `<Input>`
    - `<DatePicker>`
    - `<Select>`
  - Added `inputProps` for `<Checkbox>`, `<CheckboxCard>`, `<Input>`
  - Added `textAreaProps` for `<TextArea>`
- Default `<StepBar>` variant now renders full-width by default (to behave same as `'circle'` variant)
- `<Accordion>` state rewrite
  - `title` prop no longer requires a unique string (can be JSX or blank or whatever)
  - Removed props `onChange` and `active` from parent `<Accordion>` component (you can still use `active` and `onClick` on `<Accordion.Item>` as before, see demo page)
  - `onClick` prop on `<Accordion.Item>` now forwards click event (previously the string from `title`)
- Rewrite of `<Message>` component (internal DOM-structure only, would only break custom styling)
- Removed `useLocalStorage` hook. See upgrade [`guide`](#/Welcome%20to%20Bifrost/Get%20started/Upgrade%20to%20Bifrost%203.0) for more information

### Added

- [Upgrade to Bifrost 3.0 guide](#/Welcome%20to%20Bifrost/Get%20started/Upgrade%20to%20Bifrost%203.0)
- Prop `disableFocusTrap` for `<Drawer>`, as a measure to avoid focus issues when opening a `<Modal>` from inside a `<Drawer>`.
- Custom icon graphic for `<Checkbox indeterminate>`
  - Also added support for `indeterminate` on `<CheckboxCard>` (same behavior as `<Checkbox>`)
- `<CheckboxCard>` now supports `type='switch'`
- New `inverted` prop for `<Badge>` along with new `state` values (`'attn'` and `'chill'`) allows for 9 new color combinations
- CSS variables for colors:
  - `--bfc-base-c-warning`
  - `--bfc-base-c-chill`
  - `--bfc-theme-c-base-3` (alias for `--bfc-base-3`)
  - `--bfc-attn` (and `--bfc-attn-hsl`)
  - `--bfc-attn-c`
  - `--bfc-chill` (and `--bfc-chill-hsl`)
  - `--bfc-chill-c`
- CSS classes for text/icon colors (on base background):
  - `.bfc-success`
  - `.bfc-warning`
  - `.bfc-alert`
  - `.bfc-attn`
  - `.bfc-chill`
- CSS classes for background colors (with mathcing text color and link styling):
  - `.bfc-dimmed-c-bg`
  - `.bfc-attn-bg`
  - `.bfc-attn-c-bg`
  - `.bfc-chill-bg`
  - `.bfc-chill-c-bg`
- Boolean props for `<Icon>` that adds standardized spacing.
  - `marginLeft` adds spacing on the left side of the icon
  - `marginRight` adds spacing on the right side of the icon
- New behavior for `<Card.Image>`, height should now follow a default aspect ratio of `16/9`
  - Customizable through new `aspectRatio` prop
  - Prop `height` if you want a static height instead (will override any `aspectRatio`)
- Added `<DatePicker>` styling for selecting a date range in one input (`selectsRange`)
- Added `<DatePicker>` styling for `showTimeSelectOnly`
- Prop `actions` for `<Accordion.Item>` to place content next to the clickable `title` area.
  - New sub-component `<Accordion.Action>` helper for creating a clickable icon suitable for use with the `action` prop
- `<ProgressBar>` now supports any custom label via `children`
  - Added a `max` prop which calculates completion width and percentage (default `100`)

### Changed

- Complete rewrite of colors, both dark and light mode has a brand new color palette
  - No `--bfc-*` CSS variables have been removed or renamed
- Changed [default header font](#/Welcome%20to%20Bifrost/Visual%20style/Typography) to [Satoshi](https://www.fontshare.com/fonts/satoshi) (everything else is still Open Sans)
  - `h1-h5` font size, weight and line-height updated to fit the new font.
- Numerous small tweaks to fonts and colors
- `<Pagination>` buttons should jump less when moving between pages
- `<Accordion.Item title>` now wraps long titles instead of hiding content behind an ellipsis '...'
- `feedback` and `description` props for input components now supports JSX content
  - empty string passed to `feedback` ensures space is allocated to avoid jumping when a message is toggled on/off
- All transitions will be disabled during a theme change

### Fixed

- `<Checkbox button>` should now behave better when put inside a `display: flex` container
- Use deep imports internally for icons to improve tree-shakability for bundlers
- Updated `react-select` to `5.3.2` and fixed types
- Fixed `<Accordion.Item>` font-family
- Added `line-height` to `<Button>`, to fix an issue where height was different on various browsers
- Fixed an issue where icon passed to `<Nav.Item>` within a `<Nav.Group>` had weird styling
- `<ProgressBar>` percentage text should no longer break (even when used inside `<Card>` or `.bf-break-word`)
- `<DatePicker>` should no longer render a conflicting icon when in `inline` mode
- `<FloatingMessage>` should have proper margin in all directions (even for multiline messages on mobile)
- `<FloatingMessage>` messages should now always appear on top of other child content (including an open `<Drawer>`)
- Safari renders a `2px` border for `<button>`, normalized to `0px` to behave like other browsers

## 2.x.x (apr 2022)

### [2.16.4] - 2022-07-04

#### Fixed

- Modal close button CSS tweak

### [2.16.1] - 2022-04-27

#### Fixed

- Fixed an issue when `id` was passed as prop to `<Drawer>` and it created a conflict with focus-trap

### [2.16.0] - 2022-04-22

#### Added

- Added placeholder text color for `<Input>`, `<TextArea>` and `<DatePicker>`

#### Changed

- Removed transparent border between each `<Table.HeaderCell>` when table is vertical
- Link underline offset changed from 5px to ~1px scaling with font-size (custom usage: `text-underline-offset: var(--bf-underline-offset)`)
- [`<Checkbox>`](#/Components/Inputs/Checkbox) changes:
  - Refactored CSS to match spacing in figma components
  - Switch toggle size decreased to `36x20` (from `44x24`)
  - `small button` should now render all `type` and `align` variations properly
  - Fixed misplaced `type='switch'` toggle when `label` spans multiple lines
  - Changed `indeterminate` icon to fix rendering issues at several zoom/scaling levels
- Size and margin changes for mobile and tablet `<Nav>` menu items.

#### Fixed

- Fixed centering issues when using `<Accordion.Item>` with variable height/width JSX content
- Fixed an issue with `<Select>`, where `margin-top` was present, even though it was not needed. Ex. when `hideLabel` was true and there was no `description`

### [2.15.4] - 2022-04-04

#### Fixed

- `<Checkbox>` check icon no longer top aligned, but should still follow first text line (fingers crossed)
- `<Table vertical>` should have better spacing for columns following vertical heading

### [2.15.3] - 2022-04-01

#### Fixed

- `<Select>` component display bugfixes
- `<Drawer>` keyboard accessibility, will now trap focus when opened with overlay
- `<Checkbox>` top aligned check icon, and `button` styling should now also wrap text properly for long labels
- `<CheckboxCard>` new hover color, and slightly smaller default padding (from 16px to 12px)
- `<Modal>` new border color

### [2.15.2] - 2022-03-16

#### Fixed

- Minor tweaks for [`<Table>`](#/Components/Interactive/Table) component:
  - Fixed spacing for arrow on expandable table rows.
  - Left border is now hidden for mobile (<600px) screens.
- Increased link underline offset to increase legibility on hover (dashed line).
- Added a bunch of unit tests for all components.

### [2.15.1] - 2022-02-09

#### Fixed

- Locked dependency `@fortawesome/fontawesome-svg-core` to `1.2.36`, as `1.3.0` doesn't play nicely with other fontawesome v5 packages.

### [2.15.0] - 2022-02-02

#### Added

- New `small` prop for [`<Checkbox>`](#/Components/Inputs/Checkbox) button.
- New `.bf-scrollbar-small` class added for thinner scrollbar. See [Scrollbar](#/Welcome%20to%20Bifrost/Examples/Scrollbar) page for more info.

#### Fixed

- `.bf-neutral-link` now correctly applies dashed outline (even if used outside `.bf-content`)
- `.bf-title-link` should now also work for `<button>` elements

### [2.14.0] - 2022-01-05

#### Added

- New [`<FloatingMessage>`](#/Components/Utility/FloatingMessage) provider for temporary low-priority messages
  - Wrap your app in this provider component, then use `const { showFloatingMessage } = useFloatingMessage()`
  - The `showFloatingMessage(message, options)`method accepts two parameters:
    - `message` simple string or JSX
    - `options` optional object, forwarded as props for [`<Message>`](#/Components/Interactive/Message)
- Props for [`<Checkbox>`](#/Components/Inputs/Checkbox):
  - `labelProps` for internal label element
  - `containerProps` for container div element
- New `defaultExpanded` prop for [`<Nav.Group>`](#/Components/Navigation/Nav), only applies to expanded sidebar and mobile menu.

#### Fixed

- `<img>` inside [`<Modal>`](#/Components/Interactive/Modal) is no longer set to `display: block` globally.
- Long titles for [`<Accordion.Item>`](#/Components/Interactive/Accordion) should no longer push toggle button down on a separate line.
- [`<Spinner>`](#/Components/Visual/Spinner) should no longer break when passing a `className`. Also added new `iconProps` for configuring icon element directly.

### [2.13.0] - 2021-11-11

#### Added

- New [`<Nav.Search>`](#/Components/Navigation/Nav) component, a dynamic search/filter input for use inside top bar or sidebar.
  - Accepts `value` and `onChange` (and other) props like a native input
  - `onSubmit` for clicks on the search icon / enter keypress.
  - `loading` prop displays a loading spinner.
  - In sidebar and mobile menu: renders a simple search input field.
  - In top bar: renders a search icon that expands into an input field.
  - In collapsed sidebar: renders a nav.group with search icon that opens dropout with an input field.
- New [`<Card.Button>`](#/Components/Visual/Card) component, full width clickable bottom area for a Card.
- Styling for icons on items inside `<Nav.Group>` (not recommended usage).
- New `loading` prop for [`<Input>`](#/Components/Inputs/Input) renders a loading spinner inside the input.
  - Does not disable the input or deactivate `onIconClick`.
  - For inputs with an icon (including validation `state`), the icon is replaced with the spinner while loading.
- [`<DatePicker>`](#/Components/Inputs/DatePicker) now supports month and year picker.

#### Changed

- Readable text color for disabled `<Input>`, `<Select>`, `<DatePicker>`, and `<TextArea>`.
- Changed font sizes inside `<Nav.Group>` for sidebar and top bar.
- Paddings and margins for `<TabBar>` and `<Tabs>` now closely match `.bfl-page-padding`.
- Styling tweaks for `<Checkbox>`, new `:hover` color and outline for `hideLabel` in `:focus` state
- Update `react-datepicker` and `@types/react-datepicker` to latest version.

#### Fixed

- Fixed bug where menu would appear twice or not at all at around 1599 or 1600 px width viewport under certain circumstances (windows scaled to 125%).
  - All media queries made more resilient to browsers (erroneously?) using sub-pixel values for viewport width

### [2.12.0] - 2021-10-19

#### Added

- New `mode` prop for [`<Accordion>`](#/Components/Interactive/Accordion), can be `'compact'`, `'responsive'`, or `'default'`
  - `'compact'` removes left/right border and border-radius, designed to be used on full width accordion
  - `'responsive'` same as compact but only applied for `600px` width and smaller
  - Supported by both `'default'` and `'styled'` accordion `variant`

#### Changed

- `<Nav>` Theme button now always displayed in top bar
- `<Tag>` component height should now match checkbox switch

#### Fixed

- Styling for disabled or inactive `<Button>` inside `<Button.Group>`
- `<Bifrost>` now applies theme classes to `<body>` which should resolve scrollbar and tippy color not always matching current theme
- Added `aria-label` for expandable `<Table.Row>`
- Expandable `<Table.Row>` right padding removed (specificity issue)

### [2.11.0] - 2021-10-11

#### Changed

- CSS for [`<Table>`](#/Components/Interactive/Table) component reworked, now only root class `.bf-table` is needed to style the descendant thead, tbody, tr, th and td elements
  - Default table cell left and right padding changed from respectively `18px 18px` to `24px 8px` (mobile `12px 8px`), issue #326
- List styling rewrite (`.bf-ol`, `.bf-ul`, `.bf-li`, or equivalent list elements inside `.bf-content`)
  - More closely follow browser default styling (can now be modified with css `list-style-*`, and nested lists bullet style varies)
  - Fixes centering of bullet point for large font sizes
  - New `12px` spacing between list items
- [`<Checkbox label>`](#/Components/Inputs/Checkbox) prop now supports JSX content (previously `string`)

#### Added

- [`<StepBar>`](#/Components/Navigation/StepBar) is now responsive, will display step number for inactive steps on screens below `600px` width
  - this behavior can be deactivated with new prop `disableCollapse`
- [`<Message>`](#/Components/Interactive/Message) now supports controlled mode with two new props:
  - `isOpen` and `onHeaderClick`
- New component [`<CheckboxCard>`](#/Components/Inputs/CheckboxCard)

#### Fixed

- Removed hover styling when focus on table elements.
- [`<Table>`](#/Components/Interactive/Table) shadows should now also work in Safari.
- [`<Select>`](#/Components/Inputs/Select) fixes:
  - Dropdown menu z-index increased, preventing other elements showing through the menu
  - Styling for grouped options, `<Select isMulti>` prop, and disabled options
  - Export `selectComponents` object so they can be reused for `components` prop override
- Styling for [`<Checkbox>`](#/Components/Inputs/Checkbox) label color
- Cleaned up a ton of typescript types, should theoretically not break anything (famous last words)

### [2.10.0] - 2021-09-20

#### Added

- New [`<BottomBar>`](#/Components/Navigation/BottomBar) component, floating bar with custom content at bottom of viewport.
- New `padding` prop for [`<Card>`](#/Components/Visual/Card), for optional responsive padding.
- New `disabled` prop for [`<FieldGroup>`](#/Components/Inputs/FieldGroup).

#### Changed

- [`<SlideDown>`](#/Components/Utility/SlideDown) now supports `autoScroll` prop (default disabled), which also affects other components:
  - [`<Accordion.Item>`](#/Components/Interactive/Accordion)
  - [`<Message expanded>`](#/Components/Interactive/Message)
  - [`<Table.Row content>`](#/Components/Interactive/Table)
  - [`<Nav.Group>`](#/Components/Navigation/Nav)
- Update `typescript` to version 4.4.2
- Multiple [`<DatePicker>`](#/Components/Inputs/DatePicker) improvements:
  - Locale changed from `en-US` to `en-GB`
  - Update `react-datepicker` and `@types/react-datepicker` to latest version
  - Scroll is now smaller
  - CSS for days that are disabled is now correct

#### Fixed

- [`<FieldGroup>`](#/Components/Inputs/FieldGroup) now supports `alert` state for `<DatePicker>`.
- [`<Select>`](#/Components/Inputs/Select) options with long text will now break to a new line. Also fixed checkmark position
- [`<Table.Row onClick>`](#/Components/Interactive/Table) hover background no longer hides table header drop shadow

### [2.9.0] - 2021-05-26

#### Added

- New CSS class `.bf-shadow` adds a subtle box-shadow (which is slightly stronger in dark mode)
  - Also available as a CSS var `box-shadow: var(--bf-shadow)`
  - The [shadow color](#/Welcome%20to%20Bifrost/Visual%20style/Colors) alone is also available through `var(--bfc-shadow)`
  - Updated shadow for standalone [`<Nav>`](#/Components/Navigation/Nav) sidebar, [`<Dropdown>`](#/Components/Interactive/Dropdown) and [`<Tooltip>`](#/Components/Interactive/Tooltip)
- [`<FieldGroup>`](#/Components/Inputs/FieldGroup) now supports [`<DatePicker>`](#/Components/Inputs/DatePicker)
- New prop `noPadding` for [`<Dropdown>`](#/Components/Interactive/Dropdown)

#### Changed

- New focus styles for most components:
  - Button, Checkbox, DatePicker, Select, Drawer and Modal close button, Banner, Pagination, Breadcrumbs, Nav, StepBar, Tag, Input (icon button)
- Size and padding for [`<Input>`](#/Components/Inputs/Input): Clickable icon, clearable X, and filled button are now all the same size.
- Slight changes to padding and size for [`<Checkbox>`](#/Components/Inputs/Checkbox). Fixed styling for `disabled` while `indeterminate`.
- Restyling of [`<Modal>`](#/Components/Interactive/Modal) (mobile) and [`<Drawer>`](#/Components/Interactive/Drawer) close button. Responsive padding (also available through `--bfl-modal-padding`)
- [`<Checkbox>`](#/Components/Inputs/Checkbox) styling when inside a [`<Dropdown>`](#/Components/Interactive/Dropdown) (and dropdown font-size)

#### Fixed

- `<DatePicker isClearable>` styling for X button
- `<Modal>` no longer renders a close button when `onRequestClose` prop is omitted

### [2.8.1] - 2021-05-12

#### Fixed

- Fixed typescript error for `<FieldGroup.Item>`.
- Fixed an issue where multiple `<Dropdown>`'s could be opened at the same time

### [2.8.0] - 2021-05-10

#### Added

- New [`<SlideDown>`](#/Components/Utility/SlideDown) component exposed (previously only used internally)
  - Animating height is tricky because CSS can't transition to keyword `auto`. This component calculates correct height before using a CSS transition, and if the resulting expanded area is outside viewport, should automatically scroll to it.
- New [`<FieldGroup>`](#/Components/Inputs/FieldGroup) component can be used to
  - Visually merge two inputs together (like a select and a text input)
  - Have static text or icon (like 'https://' or 'kg') as prefix or suffix for an input

#### Changed

- [`<Message>`](#/Components/Interactive/Message) component:
  - Basic and expandable `<Message>` now supports `'neutral'` state
  - Various CSS changes
- [`<Tabs>`](#/Components/Interactive/Tabs) and [`<TabBar>`](#/Components/Navigation/TabBar) are now responsive
- [`<Card>`](#/Components/Visual/Card) margins/padding fixed to `12px` in all directions for all screen sizes
- `.bfl-padding` minor value tweaks

#### Fixed

- Disabled Input with `onIconClick` prop now disables the icon button too.
- Invalid `<Pagination>` DOM structure (block inside inline element) fixed.

### [2.7.0] - 2021-04-13

#### Changed

- [`<Accordion>`](#/Components/Interactive/Accordion)
  - New styling for `:hover` and `:focus-visible` states
  - New prop `noBorder` removes outermost border. Useful when accordion should span full width (or inside table, tabs etc)
  - New prop `variant='styled'` for larger, spaced accordion buttons with angle on right-hand side
- `<Accordion.Item>`
  - New prop `icon` adds an icon before the `title` text
  - TypeScript fix: `title` prop now supports `ReactElement` as long as `onClick` and `active` is also supplied (previously only string)
  - `htmlTitle` prop added for adding a native title tooltip when `title` is not a string

#### Fixed

- Improved support for using `.bf-neutral-link` on `<button>`
- `<FormatDate>` uses 12hr clock with AM/PM for `enUS` locale

### [2.6.0] - 2021-03-24

#### Added

- New [`.bf-neutral-link`](#/Welcome%20to%20Bifrost/Visual%20style/Typography) class to remove default link styling and `.bf-neutral-link-text` to add underline on hover on a sub-section of a neutral link. Still gets outlined on focus.
- New [`<FormatDate>`](#/Components/Utility/FormatDate) component to display formatted date (or time or datetime) based on current bifrost locale
- Standalone [`<Label>`](#/Components/Inputs/Label) component for displaying a label without an input (or use with a custom input)
  - Used internally by `label` prop for `<Input>`, `<DatePicker>`, `<Select>`, and `<TextArea>`
- Update `react-select` to version `4.2.1`
- Update `@types/react-select` to version `4.0.13`
- `<Checkbox type='switch'>` now supports `button` styling

#### Fixed

- `<Card>` component now also support `<button>` for interactivity (previously only `<a>` links)
- Disable CSS animations for users who `prefers-reduced-motion`

#### Changed

- input labels, tab buttons, `.bf-h5`, and `<h5>` inside `.bf-content` no longer forces CAPS LOCK via `text-transform: uppercase`
- `.bf-h5`, `<h5>` inside `.bf-content`, and `--bf-font-size-h5` changed from font size medium (14px) to large (16px)

### [2.5.3] - 2021-02-25

#### Fixed

- `<Table noBorder>` no longer removes table header drop shadow
- `<Select>` component
  - Font size for multi value increased from 12px to 14px
  - Clearable and dropdown indicators stays on top
  - Some styling related to focus
  - Options dropdown should no longer be clipped at the edge of a `<Modal>`
- `<Checkbox type='radio'>` now renders solid icon when `checked`
- `<Drawer>` no longer transitions background-color when switching theme
- `<Message>` close button restyled
- Translated "required/optional" label for inputs

#### Added

- New [color contrast checker](#/Welcome%20to%20Bifrost/Visual%20style/Colors)
- More colors available as hsl values, updated color docs with `hsla()` opacity usage

### [2.5.2] - 2021-02-12

#### Fixed

- Firefox bullet points weren't rendering because of non-supported a11y feature
- Fixed `<Skeleton>` animation rendering glitch on iOS
- Forward `id` prop for `<DatePicker>`, `<Input>` and `<TextArea>`
- Forward `inputId` prop for `<Select>`
- Fixed keyboard focus for `<Nav.Group>` radio buttons (like the theme dropdown)
- Collapsed items (accordion, nav.group in sidebar, expandable message/table row) is now removed from DOM when not visible
- `<Select>` component:
  - When `isMulti` is passed, each option will display a checkbox indicating if it is selected
  - When `isMulti` is passed, menu will stay open when selecting option(s).

### [2.5.1] - 2021-02-10

#### Fixed

- `<Grid.Span>` now correctly falls back to `cols` for small screens

### [2.5.0] - 2021-02-09

#### Added

- New layout CSS class `bfl-grid` to create a css grid
  - Configure column count through `--bfl-colums` css variable
- New component [`<Grid>`](#/Components/Utility/Grid) based on the css class
- New component [`<AutoCol>`](#/Components/Utility/AutoCol) based on `.bfl-autocol`
- New component [`<Skeleton>`](/#/Components/Visual/Skeleton), content placeholder while fetching data
- New variant `'circle'` for [`<StepBar>`](#/Components/Navigation/StepBar)
- New prop `indeterminate` for [`<Checkbox>`](#/Components/Inputs/Checkbox)

#### Fixed

- `selectStyles` is now exported
- Typescript definition for `<Breakpoint>` component #258
- Redesigned `<Checkbox>` focus, active and button checked CSS styling #254
- Resolved conflict for `<Dropdown>`'s `trigger` and `visible` prop
- Fixed bug where `useNav` hook `useMobileOpen` function would only work after built-in hamburger menu had been clicked once first

### [2.4.0] - 2021-01-15

#### Added

- New component [`<Drawer>`](/#/Components/Interactive/Drawer).
  - Default width is `480px`. For screens wider than `1280px`, it stretches to `620px`.
- New component [`<Dropdown>`](/#/Components/Interactive/Dropdown) displays a popup on click.
- New component [`<Banner>`](/#/Components/Visual/Banner) for a visual flair attached to the top of an element.
  - Can also be used as a button (like desktop `<Modal>`)
- Styled versions of `<AsyncSelect>`, `<CreatableSelect>` and `<AsyncCreatableSelect>` from [react-select](https://react-select.com/home#async) are now available

#### Fixed

- Expandable areas opening outside screenview automatically scrolls to view content. Issue #240
- `<Message>` close button now keyboard accessible, minor styling changes: focus, hover and icons
- All inputs font size bumped from 14px to 16px to avoid iOS Safari automatic zoom
- Re-added missing spacing between tabs
- `<Checkbox>` now forwards `id` prop to its underlying `<input id>` and `<label htmlFor>`

#### Changed

- Bifrost npm packages are now published to [public npmjs registry](https://www.npmjs.com/package/@intility/bifrost-react)
  - This makes artifactory config optional, unless you need access to FontAwesome Pro icons without configuring license

### [2.3.3] - 2020-12-11

#### Fixed

- `<TextArea>`'s label not receiving htmlFor link to textarea element

### [2.3.2] - 2020-12-02

#### Fixed

- `<Input>` clearable icon will now be positioned correctly when using `state` prop
- `<Select>` label is now linked with input tag inside the component
- `<ProgressBar>` fill capped at 100% (will still display numbers over 100 but throws propType warning)

#### Changed

- `<Pagination>` is now responsive out of the box, three different display modes based on screen width
  - added translated labels on each button for accessibility
- `<Nav>` animated mobile nav slide and overlay fade

### [2.3.1] - 2020-11-23

#### Changed

- Peer dependency on `react` is now `>=16.12.0` instead of `^16.12.0`

### [2.3.0] - 2020-11-20

#### Fixed

- `<Modal>` now uses the correct theme when `<Bifrost>` is used
- `@intility/bifrost-css` package no longer includes css from react packages like `react-datepicker`
  - bundle file is named `bifrost-all.css`
- Theme is now always applied when using `<Nav>`

#### Added

- New CSS class `.bf-break-word` to wrap long words
- New CSS class `.bfl-autocol` for automatic column layout
  - Customize min-width for the columns with CSS var `--bfl-autocol-width`
- Support for filled and outline button styles when used on links: `<a class='bf-button bf-button-filled'>`
- Support for link styling when used on buttons: `<button class='bf-link'>`
- 'Color theme' header in topbar theme dropdown
- Bifrost now adds appropriate safe-area padding for devices with notch in the display (a.k.a. "busslomme")
  - Requires `<meta>` tag with `viewport-fit=cover` (see <a href="/#/Welcome to Bifrost/Layout/Notch">Layout/Notch</a>)
  - New CSS class `.bf-negative-notch` removes this padding (for full-width elements)
  - New CSS class `.bf-notch` adds safe-area padding ( use for content inside full-width elements)
- [`<Select>`](/#/Components/Inputs/Select) now supports selecting multiple options by using `isMulti` prop.
- [`<DatePicker>`](/#/Components/Inputs/DatePicker) now supports time selection by using `showTimeSelect` prop.

#### Changed

- Breakpoint `xl` is now 1600px (down from 1920px)
- Added breakpoint `xxl` at 1920px. complete breakpoint list is now:
  - `small` 600px
  - `medium` 960px
  - `large` 1280px
  - `xl` 1600px
  - `xxl` 1920px
- Multiple `<Nav>` component changes
  - Renders hamburger menu up to `xl` (1600px)
  - Hamburger button moved to left hand side
  - Overlay from `medium` (960px) (still fullscreen for smaller screens)

### [2.2.1] - 2020-10-29

#### Fixed

- `<Nav.Top>` logo missing default url
- `<Nav>` logo border missing from large screen widths
- Internal media queries used for breakpoints and color schemes now works on Safari
- `<Spinner overlay>` colors fixed, and text centering
- Styleguide version and code snippet link styling
- Clicks outside mobile nav closes it, clicks on buttons inside does not
- Reduced aggressiveness on fullscreen Modal for mobile
- Reverted dark mode css background color social experiment

#### Added

- New `useTheme` property: `current` returns the applied theme (`dark` or `light`), even when the selected theme is `system` (uses JS breakpoint, avoid for SSR/SSG)

### [2.2.0] - 2020-10-28

#### Breaking

- [`useTheme()`](/#/Components/Hooks/useTheme) hook finalized and documented, returns an object with state accessors
  - no longer has a `current` string or a `toggle()` method (never documented)
  - string `theme` returns current theme, one of `'dark'`, `'light'` or `'system'`
  - function `setTheme(string)` sets current theme, accepts modes listed above

#### Changed

- `<Sidebar>` and `<TopBar>` are deprecated, replaced with `<Nav>` and will be removed in a later release
  - `useSidebarCollapse` deprecated as well, replaced by `useNav`

#### Fixed

- `<Breadcrumb>` items now wrap on small screens (or long paths)
- `<Accordion.Item>` title tooltip added for when small screens (or long titles) cuts off button text with ellipsis
- `<Modal>` now fullscreen for small screens and medium screens in landscape (with a close button to match)

#### Added

- New [`<Nav>`](/#/Components/Navigation/Nav) component for responsive menu layout, replaces `<Sidebar>` and `<TopBar>`
  - Adds a 'hamburger' menu button for small screens that toggles a mobile nav popup
  - Color theme button with three options: 'dark', 'light', and 'system' (default, which uses `prefers-color-scheme` media query).
    - Can be hidden with `hideTheme` prop.
    - Get or set current theme via `let { theme, setTheme } = useTheme()` hook.
  - `<Nav.Item>` replaces `<Sidebar.Item>` and `<TopBar.Item>`, and also works for mobile nav
  - `<Nav.Group>` replaces `<Sidebar.Group>` and `<TopBar.Group>`, and also works for mobile nav
  - Is built using breakpoint CSS classes mentioned below and some sub-components exposed if you have special use cases:
    - `<Nav.Side>`, `<Nav.Top>`, and `<Nav.Mobile>`
  - [`useNav()`](/#/Components/Hooks/useNav) hook returns state accessors for the component (only usable inside `<Nav>`)
    - bool `sideCollapsed` is true when sidebar is collapsed
    - function `setSideCollapsed(bool)` collapses/expands the sidebar
    - bool `isMobile` is true when mobile menu button is displayed and sidebar is hidden (uses JS breakpoint, avoid for SSR/SSG)
    - bool `mobileOpen` is true when mobile nav is open
    - function `setMobileOpen(bool)` shows/hides the mobile nav
- Breakpoint CSS classes `.from-[size]` and `.to-[size]` for hiding content at certain viewport widths using CSS media queries where `[size]` is one of:
  - `small` 600px
  - `medium` 960px
  - `large` 1280px
  - `xl` 1920px
- New [`<Breakpoint>`](/#/Components/Utility/Breakpoint) component for hiding content at certain viewport widths
  - `from` and `to` props accepts sizes listed above
  - same functionality accessible with [`useBreakpoint(from, to)`](/#/Components/Hooks/useBreakpoint) hook that returns a boolean
  - uses JS breakpoint, avoid for SSR/SSG
- New [`<Bifrost>`](/#/Components/Utility/Bifrost) wrapper component to configure global Bifrost options
  - `locale` prop to set current translation, English `enUS` (default) and Norwegian `nbNO` locales shipped with Bifrost package
  - `theme` prop sets current theme
  - `onThemeChange` prop provides a way to act when the theme is changed with `setTheme` from `useTheme` hook (used by the default dark mode toggle buttons)

### [2.1.4] - 2020-10-20

#### Fixed

- Exported type for `<Card>` component.
- Correct `<Checkbox type='radio'>` checked icon. `onChange` and `checked` made optional to support uncontrolled mode. Updated styleguide demo to group by `name`.

### [2.1.3] - 2020-10-16

#### Fixed

- `<Tabs.Item noPadding>` prop is no longer forwarded to underlying `<div>` (removes a console warning)

### [2.1.2] - 2020-10-15

#### Fixed

- `<TextArea>` inside `<Modal>` is no longer showing blurry text.
- `<h1>` and `.bf-h1` line-height set to 130%

### [2.1.1] - 2020-10-06

#### Fixed

- `<Accordion.Item>` no longer hides overflow, issue #208
- `<Table.Row>`'s expanded content now correctly spans across the Table

### [2.1.0] - 2020-09-25

#### Fixed

- `<DatePicker>`: `className` prop no longer overwrites Bifrost className
- `<Input>`: disabled autoComplete by default, can be enabled with `autoComplete='on'`

#### Added

- `<Tag>`: added new variant `compact`
- `<TextArea>`: new prop `hideLabel`
- `<Button>`: `state='inactive'` now supports `variant='outline'`

#### Changed

- `<Table>` component
  - `highlightable` prop deprecated
  - `<Table.Row>` can be made expandable through `content` prop
  - Accessibility, rows and cells that recieve `onClick` will get accessibility features
  - Styling changes when hovered and focused
- `<Tag>` now requires `onClick`
- `<StepBar>` consistent link styling
- `<TopBar.Group>` css changes to accommodate custom dropdown content

### [2.0.1] - 2020-09-15

#### Added

- Export `useSidebarCollapsed` from package
- We now also publish a `@intility/bifrost-css` npm package including css bundle only

#### Fixed

- Next.js (and probably other build tools) does not support css file imports from imported js files.
  Components therefore no longer expose their own css files, instead all css is now bundled into a single `bifrost-app.css`.
- Removed naive references to browser JS API (like `document` and `localStorage`) to support SSR/SSG
- `<Sidebar.Group>` and `<TopBar.Group>` dropout overlay z-index issues fixed
- Minor `<Sidebar>` style fixes, removed 'pressed' styles.

### [2.0.0] - 2020-09-07

#### Breaking

- Rewrite of components to support wrapping Nav items in links
  - removed props `active` and `onClick` from `<SideBar.Item>` and `<TopBar.Item>`
  - instead of `active` prop, use `<a className='active'>` on the wrapping link (default when using react-router `<NavLink>`)
- Removed `<Button>` variants `'pill'` and `'underline'`
- Renamed `<Button state='neutral'>` to `'inactive'`
- Moved `<Pagination>` and `<Tag>` components from Nav to Interactive category (only breaks full path imports)

#### Added

- New low-level (stateless) [`<TabBar>`](#/Components/Navigation/TabBar) component for more flexibility
  - `<TabBar.Item>` requires wrapping in a link similarly to the new Sidebar and TopBar
  - `<Tabs>` component uses `<TabBar>` internally
- New component [`<Button.Group>`](#/Components/Inputs/Button)
  - `<Button>` now supports prop `active` whenever used as children of `Button.Group`
- New component [`<Spinner>`](#/Components/Visual/Spinner) for indicating loading or waiting
- CSS styling
  - Form fieldset `.bf-fieldset` (or simply `<fieldset>` inside `.bf-content`)
  - Padded container `.bfl-padding`
  - Inputs inside a `.bfc-base-3-bg` will get a contrasting background color
- New prop `<Table vertical>` for headings on the left-hand side (or a 2D matrix)
- New prop `<Checkbox align>` for checkbox icon (or switch toggle) placement
  - Can be set to `'left'` (default for checkbox and radio) or `'right'` (default for switch)
- New component [`<Card>`](#/Components/Visual/Card) with sub-components
  - `<Card.Image>` image banner
  - `<Card.Logo>` circular image or icon
  - `<Card.Title>` title text
  - `<Card.Content>` wrapper for rest of the card content
- New props for [`<Input>`](#/Components/Inputs/Input):
  - `onIconClick` as an onClick handler for icons
  - `clearable` will add an icon that will clear value of input
  - `variant='outline'` style mostly for use with search
- New colors: `alert-fade-2` and `alert-fade-2-c`
- New [`<Button>`](#/Components/Inputs/Button) state: `'alert'`
- New props for `<Spinner>`: `icon` for using custom icon, `spin` and `pulse`

#### Fixed

- `<DatePicker>` height changed to `40px` to match other inputs.
- CSS `:focus` re-styled for keyboard focus using `:focus-visible` polyfill, bug #155
- `<Icon>` now supports `ref` prop, and no longer needs to be wrapped in a `<span>` to work with `<Tooltip>`
- `<Pagination>` component buttons now stretches to support multiple digit pages, bug #181

#### Changed

- Component `<StepBar.Item>` now supports being wrapped in links
- New link styling for `.bf-link` ( or`<a>` inside `.bf-content`) and `.bf-title-link`
  - Added link style support for more background colors: `.bfc-dimmed-bg`, `.bfc-inverted-bg`, and `.bfc-inverted-2-bg`
- `<Checkbox hideLabel>` now renders as `display: inline-block`
  - not supported with `button` style
  - only the checkbox/radio/switch itself will be clickable

## 1.x.x (aug 2020)

### [1.3.1] - 2020-08-12

#### Fixed

- Removed fontawesome pro dependency

### [1.3.0] - 2020-08-12

#### Fixed

- `<Select>` dropdown-indicator.
  - Changed to 4px padding and 8px margin-right.
  - Hover color changed to `var(--bfc-theme-3)`.
- `<Select>` option style for `isDisabled` and demo fixed.
- `<Tooltip>` new padding.

#### Added

- New component [`<DatePicker>`](#/Components/Inputs/DatePicker).
- New component [`<StepBar>`](/#/Components/Navigation/StepBar) in development (not clickable yet).
- New prop `<Button small>` to get small buttons.
- New prop `<Tag active>` to indicate selected tag.
- New prop `<Select isClearable>` which adds an icon to clear the input value.
- New prop `<Tooltip state='neutral'>`, currently only supports `neutral` and `theme` (default).
- New prop `<Message expandable>` for a toggleable message.

### [1.2.0] - 2020-07-30

#### Fixed

- Fixed an issue where icons inside `<Accordion>` component were rotated
- Removed autocomplete for `<Select>`
- Minor background color change for neutral button

#### Added

- New prop `<Table noBorder>` removes outermost border and header box-shadow
- CSS styling for numbered and bullet lists
  - can be used with `.bf-ul`, `.bf-ol` and `.bf-li` classes
  - or regular html elements `<ul>`, `<ol>` and `<li>` elements inside a `.bf-content` wrapper

### [1.1.1] - 2020-07-14

#### Changed

- `<Tabs>`
  - Fixed `onChange` type
  - Content wrapper will no longer be rendered if `<Tabs.Item>` children is falsy

### [1.1.0] - 2020-07-06

#### Added

- Two-level Nav
  - `<TopBar.Group>` can be used to group `<TopBar.Item>`, renders as a dropdown
  - `<Sidebar.Group>` can be used to group `<Sidebar.Item>`
    - Renders as popout when sidebar is collapsed
    - Otherwise renders as expandable sections
- `<Tabs.Item tabProps={obj}` will be passed to each tab button element
- `noPadding` removes padding from content div. Added for:
  - `<Tabs>`
  - `<Accordion>`

#### Changed

- `<Sidebar>` now stores collapsed state in `localStorage.bfSidebarCollapsed`
- Improved keyboard accessibility for `<Sidebar>` and `<TopBar>`
- **Esc** keypress closes any open tooltips and Nav popouts
- Added `type='button'` to components such as
  - `Message`
  - `Modal`
  - `Tabs`
  - `BackButton`
  - `Pagination`
- `feedback` prop for these components now supports node or string as value:
  - `Input`
  - `Select`
  - `TextArea`

### [1.0.3] - 2020-06-24

#### Changed

- Package now contains ES Module output, making it friendly with tree-shakers
- Added displayName to components, debugging with React DevTools should now be easier

### [1.0.2] - 2020-06-08

#### Changed

- Added text filter and sort to Icon page
- Updated Contributing docs

#### Fixed

- Removed default `<body>` margin
- Positioning for `<Message>` close button

#### Added

- Text filter and sort to Icon page table

### [1.0.1] - 2020-05-29

#### Breaking

- All packages will now be published to the new [Artifactory instance](https://artifactory.int.intility.no/).
  - To set up the new registry, see the [guide on developers.intility.no](https://developers.intility.no/guides/tutorials/npm) (log-in required).

#### Changed

- CSS classes for Colors documented on styleguide site
  - previously only used internally, renamed from `.bf-*` to `.bfc-*` (should not break anything)

#### Fixed

- `<Tooltip>` colors appeared wrong, changed css file import order

### [1.0.0] - 2020-05-26

#### Breaking

- `<Tooltip>` prop `hover` is removed and made default behavior
- `<TopBar.Item>` prop `tag` and `href` is removed
  - Prefer composition with children instead
- `ref` is now forwarded to the same element as rest props
  - Except for `<Select>`, `<Modal>`, `<Tooltip>` and `<Icon>`
    as they extend other packages.
- `<ProgressBar>` prop `showLabel` inverted and renamed to `hideLabel` for consistency
- `<Input>` prop `noLabel` renamed to `hideLabel` for consistency
- `<Tooltip>` prop `children` now expects an element that supports the ref prop.

#### Changed

- `<Tag>` prop `onClick` is not required. When omitted will be rendered as a static unclickable tag.
- `<BackButton>` is now keyboard accessible.
- `<Tooltip>` component updated to use `@tippyjs/react`
  - The previous tooltip API was a simplified version of this
  - Will only break in cases where text or array was passed as children

#### Added

- New prop `hideLabel` for `<Checkbox>` and `<Select>`, hides label text and adds `aria-label` attribute

## 0.x.x (may 2020)

### [0.6.0] - 2020-05-14

#### Breaking

- `<BifrostApp>` component removed
  - See [installation](#/Welcome%20to%20Bifrost/Get%20started/Installation) for updated style imports
- `<Sidebar>` and `<TopBar>` prop changes
  - Removed props `logoTag` and `logoTagProps`
  - Added props `logoHref` and `logoOnClick`
- `<Input>` prop changes
  - Icon no longer supports being passed a React Node, e.g. `icon={<Icon/>}`
  - Added `iconProps` to optionally specify props for the underlying `<Icon>` component
  - `leftIcon` has been replaced with `rightIcon`, hence icons being positioned to the left by default

#### Changed

- `<TextArea>` component
  - New prop `requiredNoLabel` marks textarea field as required, but hides the required text after label
  - New prop `optional` adds an additional optional text after label
  - New prop `state` used for validation. Has to be either `'warning'` or `'alert'`
  - Fixed some styling issues
- `<Select>` component
  - New prop `requiredNoLabel` marks Select component as required, but hides the required text after label
  - New prop `optional` adds an additional optional text after label
  - New prop `state` used for validation. Currently, only one valid value: `'alert'`
  - Fixed some styling issues
  - Fixed a bug where `required` did not mark the component as required
  - Fixed generic type
- `<Accordion>` component
  - Fixed some styling issues
  - Rewrote `useAccordionContext` to typescript
- `<Tabs>` component
  - Fixed so selected tab is unclickable
  - Fixed some styling issues
  - Rewrote `useTabsContext` to typescript
- `<Pagination>` component
  - Corrected `onChange` type
  - Actually pass rest props to the div element
- `<Sidebar>` component
  - New prop `enableDarkModeToggle` for standalone mode. (default true)

#### Added

- `useTheme` hook, no docs yet
- `<Tooltip>` component
- `<Tag>` and `<BackButton>` components are now actually exported from the package

### [0.5.2] - 2020-04-30

#### Fixed

- Missing TypeScript types and them not being emitted correctly

#### Changed

- `<Modal>` now has a `headerChildren` to specify the children of the header element

### [0.5.1] - 2020-04-29

#### Changed

- Fixed broken colors in `<Modal>` and `<Pagination>`

### [0.5.0] - 2020-04-29

#### Changed

- `<Message>` component props rewrite:
  - **Breaking**: `title` renamed to `header` to allow native html title tooltip
  - **Breaking**: `callout` renamed to `statusBar`
  - `noIcon` boolean prop added to hide default icon
  - `icon` string prop added to allow custom icons (overrides noIcon)
- Sub-component naming consistency:
  - **Breaking**: `<Breadcrumbs.Crumb>` renamed to `<Breadcrumbs.Item>`
  - **Breaking**: `<Tabs.Tab>` renamed to `<Tabs.Item>`
- **Breaking**: CSS variables renamed
- Styleguide color page rewrite
- `<TopBar>` component
  - **Breaking**: `brand` prop renamed to `appName`
  - New prop `hideLogo` hides Intility logo
  - New prop `logoTag` renders logo as another tag
  - New prop `logoTagProps` passes props to logo component
- `<TopBar.Item>` component
  - New prop `active` indicates a `TopBar.Item` being selected
  - New styles for `:active`, `:focus`, `:hover`
- `<Input>` component
  - New prop `noLabel` to hide label. This also converts `label` prop value to `aria-label`
  - New prop `optional` that adds optional label text
  - New prop `requiredNoLabel` that marks input as required, but hides the required label text
  - Support for `htmlFor` prop for label and `id` for input
- `<Table>` default width 100%
- **Breaking**: `<Modal>` component rewritten to wrap `react-modal`, read doc for usage

#### Added

- `<Tag>` component (clickable)
- `<BackButton>` component, consistent with Breadcrumbs design

### [0.4.0] - 2020-04-14

#### Changed

- **Breaking**: `<Bifrost>` renamed to `<BifrostApp>`
- `<Sidebar>` and `<TopBar>` have both been rewritten with new designs
  - **Breaking**: their order have been swapped, put `<Sidebar>` first. See Get started section for example.
- **Breaking**: `<StatusBox>` renamed to `<Badge>`
- **Breaking**: `<Note>` removed, merged into new `<Message>` component
- **Breaking**: `<Callout>` removed, merged into new `<Message callout>` component
- `<Sidebar>` now always includes intility logo
  - New props to allow links on logo `logoTag` and `logoTagProps`
  - New props for standalone sidebar (if you have no `<TopBar>`) `appName` and `collapsedAppName` (optional)
- `<Table>` component
  - Updated styles
  - **Breaking**: Replaced `selectable` with `highlightable` prop
  - `Table.Cell`: Added rightBorder prop
  - `Table.HeaderCell`: Added `none` to sorting union. Indicates sortable header
- `<Accordion.Item>` can now be disabled
- `<Accordion.Item>` can be opened/closed with keyboard keys
- `<Button variant='form'>` is replaced by `<Button variant='filled' state='neutral>`
- `<ProgressBar>` now has `disabled` prop and supports setting a custom width (includes the label)

#### Added

- `<Modal>` component
- `<Tabs>` component
- `<Pagination>` component

### [0.3.2] - 2020-03-27

#### Changed

- Moved `<Icon>` to **Visual** section (styleguide only)
- Moved `<Table>` to **Interactive** section (styleguide only)

#### Fixed

- Exports for `<Callout>`, `<Note>`, and `<StatusBox>` components

### [0.3.1] - 2020-03-26

#### Fixed

- Fixed `required` prop for `<Select>` component

### [0.3.0] - 2020-03-26

#### Changed

- Renamed `<Form>` section to **Inputs** (styleguide only)
- Moved `<Button>` component to **Inputs** section (styleguide only)
- `<Button>` component has a new `variant` named `'form'`
- **bifrost-theme.css** renamed to **bifrost-layout.css**

#### Added

- `<Breadcrumbs>` component for displaying current page path
- `<Note>` component for information messages
  - Choose beteween four different `state`s:
    - `'theme'` (default)
    - `'success'`
    - `'warning'`
    - `'alert'`
- `<StatusBox>` component, a small status badge
  - Choose between the four same `state`s as `<Note>`
- `<Callout>` component for closable bright messages that need user attention
  - Choose between the four same `state`s as `<Note>`
  - Optional `onClose` callback
- `<Accordion>` component collapsible content
  - Optional controlled mode

### [0.2.0] 2020-03-19

#### Changed

- `<Input>` component
  - Renamed `helperText` prop to `feedback`
  - Add support for `description` prop
  - If `required` prop is passed, an indicator text will show after label
- `<TextArea>` component
  - Add support for `description` and `feedback` props
  - If `required` prop is passed, an indicator text will show after label
- `<TopBarItem>` component
  - Now accessible from `TopBar.Item`
- `<SideBarItem>` component
  - Now accessible from `SideBar.Item`

#### Added

- `<Checkbox>` component
  - `type` prop can be set to `'checkbox'`, `'radio'` or `'switch'`
  - Can be styled as a button with `button` prop
- `<Select>` component
  - Works as a wrapper for react-select
  - Supports `description`, `label`, `feedback` and `required` props
- `<Table>` component
  - With `Table.Header`, `Table.Body`, `Table.Footer`, `Table.Row`, `Table.Cell` and `Table.HeaderCell`
  - Passes through props to their respective elements

### [0.1.1] - 2020-03-16

#### Changed

- Renamed `<AppBar>` to `<TopBar>`
- Renamed `<AppBarItem>` to `<TopBarItem>`
- Renamed `<NavBar>` to `<Sidebar>`
  - Sidebar is now collapsible
- Renamed `<NavBarItem>` to `<SidebarItem>`
- `<Button>` component no longer has `primary`, `secondary` or `pill` props
  - instead of `primary` use `variant='filled'`
  - instead of `secondary` use `variant='outline'`
  - instead of `pill` use `variant='pill'`
  - a new style is also available: `variant='underline'`
- Most button styles have new css for `:hover`, `:focus` and `:active`

#### Added

- `<ProgressBar>` component
- `<TextArea>` component
- `<Input>` component now has styles for validation
  - `state` prop accepts `'success'`, `'warning'` or `'error'`
  - `helperText` prop displays text below the input field

### [0.1.0]

#### Added

- `<Bifrost>` component
- `<NavBar>` and `<NavBarItem>` components
- `<AppBar>` and `<AppBarItem>` components
- `<Icon>` component (wrapper for FontAwesomeIcon)
- `<Button>` component
- `<Input>` component
- css files
  - **bifrost-theme.css** for layout variables
  - **bifrost-colors.css** for color variables
  - **bifrost-base.css** for any global selectors