# Changelog core-components

## 2.4.0

### Added

#### Radio button (beta)

- **New `<lfds-radio-group>` and `<lfds-radio>` components** — An accessible radio button for forms, with support for label, help-text and validation message.
- **List-row integration** — List row component supports radio buttons in the same way as checkboxes.

#### Checkbox group (beta)

- **New `<lfds-checkbox-group>` component** — Wraps multiple checkboxes in a fieldset with legend, help-text, and validation support.

#### List row

- **`reading-order` attribute on `<lfds-list-row-content>`** — Set `reading-order="horizontal"` to control screen reader announcement order (row-by-row vs column-by-column).
- **`sr-expanded` attribute** — Indicates whether content controlled by the row is expanded (`aria-expanded`).
- **`sr-haspopup` attribute** — Indicates the type of popup triggered by the row (`aria-haspopup`).

### Changed

- **List row: `for` attribute renamed to `selects`** — The `for` attribute is replaced by `selects`. The row now renders a `<div>` instead of a `<label>`. Use `sr-labelledby` on the checkbox/radio for accessible naming.
- **Checkbox: removed `indeterminate` state** — The indeterminate/tri-state property has been removed.
- **Text input**: Label font weight updated to semibold.

### Fixed

- **Sheet**: Recalculate height on window resize — the sheet now updates its height when the viewport changes, preventing an unnecessary scrollbar. (BUG#1145548)
- **Sheet**: Recalculate height on content change — when slotted content is added, removed, or resized, the sheet adapts its height accordingly. (BUG#1146605)
- **Checkbox (iOS WebKit)**: Checkmark icon now renders correctly when checked.
- **Checkbox (iOS WebKit)**: Fixed checkmark not appearing when toggled via programmatic click (e.g. clicking the list-row body).
- **Radio group (iOS WebKit)**: Fixed being able to check multiple radio buttons simultaneously. 
- **Checkbox / Radio (iOS)**: Removed default iOS tap highlight.
- **List row**: Correct gap inside list row when start/end slot is not used.
- **Checkbox / Radio**: Use `color_border_pressed` token for pressed unchecked state.
- **Checkbox**: Fixed memory leak — form reset handler now cleaned up in `disconnectedCallback`.
- **Checkbox**: Fixed duplicate `change` event firing.
- **Radio**: Fixed memory leak — old group reference cleaned up when `name` changes.
- **Sheet**: Fixed null reference error when focus target element is missing. (#136676)


## 2.3.0

### Added

- **New `<lfds-text-input>` component** — Added a new accessible and customizable text input field for forms and user input. 

#### Sheet component

- **New `<lfds-sheet>` component** — A side/bottom overlay for supplementary content or actions without navigating away from the current context.
- **Content & Action variants** — Default close button (✕ Stäng) for content sheets; set `cancelable` for action sheets with "Avbryt".
- **Resizable drag-to-resize** — Users can drag between `hug` and `fill` snap points on mobile with spring animations. Enabled by default (`resizable`).
- **Full-surface drag** — Drag anywhere on the header or body to resize (mobile only).
- **Swipe-to-dismiss** — Swipe down from anywhere on the sheet to close on mobile.
- **Content-hugging height** (`height="hug"`) — Sheet sizes itself to fit content on mobile, upgrading to `fill` when content exceeds available space.
- **Migration attribute** — Opt-in to upcoming breaking changes (`light-background`, `remove-padding`) via the `migration` property.
- **Back button support** — Set `back-button` to show a back navigation button that emits a `back` event (useful for multi-step flows).
- **Accessibility** — Native `<dialog>` with `showModal()`, focus management to heading on open, `closedby="any"`, configurable `aria-label` for close/cancel/back buttons. Focus ring only shown during keyboard navigation.

#### Checkbox component (beta)

- **New `<lfds-checkbox>` component** — An accessible checkbox for forms.
- **List-row integration** — List row component has been updated to support checkbox.

#### Language support

- **`<lfds-sheet>`** — Built-in labels (close, cancel, back) translated via `WithLang`. Set `lang="en"` on the component or any ancestor. Supported: `sv` (default), `en`.
- **`<lfds-alert>`** — Close button and screen reader variant text (info, warning, error) now translated via `WithLang`. Set `lang="en"` on the component or any ancestor. Supported: `sv` (default), `en`.

### Changed

- **Sheet height value renamed** — `height="full"` is now `height="fill"`.

### Deprecated

- **Sheet `height="small"`, `height="medium"` and `height="full"`** — Use `hug` or `fill` instead.
- **Sheet `size` property** — Desktop will only have one size in a future release.

## 2.2.2

### Fixed

- **`lfds-alert` height bug** — Fixed `type="alert"` being taller than `3.5rem` at narrow container widths when no heading or action button was present.

## 2.2.1

- Fix lfds-icon scaling on font size multiplier.

## 2.2.0

### Deprecated

- **Button tertiary variant**: `variant="tertiary"` is deprecated and maps to `secondary` for backward compatibility. Use `secondary` instead — `tertiary` will be removed `2026-07-30`.
- **Button medium size**: `size="medium"` is deprecated and maps to `small` for backward compatibility. Use `small` instead — `medium` will be removed `2026-07-30`
- **Label attribute:** `label` attribute is deprecated, use `default` slot instead. Will be removed `2026-07-30`.

### Changed

- **Secondary button styles**: Updated background and hover states for the secondary button variant.
- **Button padding**: Increased inline padding from `spacing_sm` to `spacing_lg` for improved touch targets and visual balance.
- **Button line height**: Adjusted line height for improved styling consistency.
- **Active and focused state styles**: Updated button styles for active and focused states.

### Fixed

- Fixed disabled state in button.

### Added

- Accessibility unit tests for button component.

#### Section header component

- Added new `<lfds-section-header>` component under Typography for semantic section titles (`h1`-`h6`) with LFDS heading styling.
- Supports `level` (defaults to `h2`), default slot content for visible heading text, and optional `sr-label`.
- Includes Storybook documentation and examples for default usage and all heading levels.

#### Group header component

- Added new `<lfds-group-header>` component under Typography for semantic group titles (`h1`-`h6`) with LFDS heading styling.
- Supports `level` (defaults to `h2`), default slot content for visible heading text, and optional `sr-label`.
- Includes Storybook documentation and examples for default usage and all heading levels.

## 2.1.0

### Added

- **IDE IntelliSense support**: Editor autocomplete for design tokens and utility classes in VS Code and other editors that support CSS custom data.
- **Component registry**: Added `registry.json` to package exports — a machine-readable list of all LFDS components for MFE tooling and bundler integrations.

### Changed

- **Custom Element Manifest cleanup**: Removed internal paths and private events from the CEM, keeping only consumer-relevant metadata.
- **Internal CSS variables**: Renamed internal variables to use `--lfds-internal-*` prefix to clarify their scope and prevent accidental usage.

## 2.0.0

### Breaking

#### 1. Web Component Tag Names Changed

Both changes happen together:

1. **Prefix change**: `lfui-*` → `lfds-*`
2. **Category removal**: category segment removed from tag name

**Tag name mapping:**

| Old Tag                              | New Tag                         | Component                |
| ------------------------------------ | ------------------------------- | ------------------------ |
| `lfui-dialog-side-sheet`             | `lfds-side-sheet`               | Side sheet dialog        |
| `lfui-form-checkbox-card`            | `lfds-checkbox-card`            | Checkbox card variant    |
| `lfui-form-boolean`                  | `lfds-boolean`                  | Boolean input            |
| `lfui-form-boolean-card`             | `lfds-boolean-card`             | Boolean card variant     |
| `lfui-form-radio`                    | `lfds-radio`                    | Radio button             |
| `lfui-form-radio-card`               | `lfds-radio-card`               | Radio card variant       |
| `lfui-form-select`                   | `lfds-select`                   | Select dropdown          |
| `lfui-form-option`                   | `lfds-select-option`            | Select option            |
| `lfui-form-optgroup`                 | `lfds-select-optgroup`          | Select optgroup          |
| `lfui-form-textarea`                 | `lfds-textarea`                 | Text area                |
| `lfui-notification-alert`            | `lfds-alert`                    | Alert notification       |
| `lfui-typography-heading`            | `lfds-heading`                  | Heading element          |

**Migration example:**

```html
<!-- Before -->
<lfui-form-select>
	<lfui-form-option value="1">Option 1</lfui-form-option>
</lfui-form-select>

<!-- After -->
<lfds-select>
	<lfds-select-option value="1">Option 1</lfds-select-option>
</lfds-select>
```

#### 2. React Wrapper Class Names Changed

If you're using the React wrapper package, naming follows the new prefix pattern:

- `Lfui*` → `Lfds*`

**Migration:**

```javascript
// Before
import { LfuiButton, LfuiSelect } from '@lansforsakringar/core-components/react'

// After
import { LfdsButton, LfdsSelect } from '@lansforsakringar/core-components/react'
```

#### 3. Host Accessibility Attributes Changed

LFDS components now use host-level `sr-*` attributes for accessibility metadata that is forwarded to internal native controls.

**Attribute mapping (aria-_ → sr-_):**

| Before             | After            |
| ------------------ | ---------------- |
| `aria-label`       | `sr-label`       |
| `aria-labelledby`  | `sr-labelledby`  |
| `aria-describedby` | `sr-describedby` |
| `aria-controls`    | `sr-controls`    |
| `aria-expanded`    | `sr-expanded`    |
| `aria-pressed`     | `sr-pressed`     |
| `aria-current`     | `sr-current`     |

**Migration example:**

```html
<!-- Before -->
<lfds-button
	aria-label="Open menu"
	aria-controls="main-menu"
	aria-expanded="false"
></lfds-button>

<!-- After -->
<lfds-button
	sr-label="Open menu"
	sr-controls="main-menu"
	sr-expanded="false"
></lfds-button>
```

If both `aria-*` and `sr-*` are present, `sr-*` takes precedence.

#### 4. Slot Naming Standardized

For components that expose leading/trailing content slots, use:

- `slot="start"` for leading content
- `slot="end"` for trailing content

**Migration example:**

```html
<lfds-button>
	<lfds-icon slot="start" icon-id="placeholder"></lfds-icon>
	Continue
	<lfds-spinner slot="end" color="currentcolor" size="20"></lfds-spinner>
</lfds-button>
```

### Migration

1. **Run the rename migration script** (handles most tag/selector updates automatically):

   ```bash
   node scripts/migration/rename-web-components.js <path-to-your-project>
   ```

   This script will:

   - Replace all old tag names with new ones
   - Update attribute references
   - Update comments and documentation strings

2. **Manual review required for:**

   - String literals in JavaScript/TypeScript (e.g., `querySelector('.lfui-form-select')`)
   - Analytics event names
   - Test selectors
   - Configuration files that reference component names

3. **Update host accessibility attributes** from `aria-*` to `sr-*` where LFDS components forward values internally.

4. **Update slot usage** to `start`/`end` for components with leading/trailing slots.

5. **Re-run TypeScript checks and snapshot tests** to catch any remaining stale imports/selectors.

### Migration Checklist

- [ ] Run migration script: `node scripts/migration/rename-web-components.js <path>`
- [ ] Update all component imports from `Lfui*` to `Lfds*`
- [ ] Update JSX markup with new tag names
- [ ] Update host accessibility attributes from `aria-*` to `sr-*`
- [ ] Update slot usage to `slot="start"` / `slot="end"`
- [ ] Update `useRef` selectors and `querySelector` calls
- [ ] Update CSS modules if targeting old class names
- [ ] Update snapshot tests that reference old tag names
- [ ] Manual review for string literals and selectors
- [ ] Run full test suite
- [ ] Test in production-like environment

### Notes

- For rationale and naming decisions, see:
  - [docs/adr/adr-003-lfds-prefix-standardization.md](../../../docs/adr/adr-003-lfds-prefix-standardization.md)
  - [docs/adr/adr-004-web-component-tag-simplification.md](../../../docs/adr/adr-004-web-component-tag-simplification.md)
- Full accessibility migration mapping: [docs/aria-to-sr-migration.md](../../../docs/aria-to-sr-migration.md)

## 1.3.2

### Changed

- Side sheet: Removed secondary background box from body section — the sheet now uses a flat white background to match current usage patterns.

### Fixed

- Added compatibility shim (`compat-tokens.css`) that maps deprecated 1.x token names (`--lfds-semantic-sizes-spacing-*`, `--lfds-semantic-sizes-radius-*`, `--lfds-semantic-sizes-border-width-*`) to their 2.x equivalents, preventing breakage for consumers still referencing old custom properties. These aliases will be removed in 2.0.0.
- Fixed focus outline color.

## 1.3.1

### Added

- Side sheet: New `back-button` property that displays a back navigation button, dispatching a `back` event for multi-step flows.
- Side sheet: New `cancelable` property that replaces the close icon with an "Avbryt" (Cancel) text button.

### Changed

- Side sheet: Redesigned header layout with responsive grid — back button on left, close button on right, and centered heading on mobile.
- Side sheet: Body section now has a secondary background color and border radius.
- Side sheet: Updated heading to be centered on mobile and left-aligned on desktop with responsive font sizes.

### Fixed

- Side sheet: Replaced CSS nesting with flat selectors for improved older browser compatibility.

## 1.3.0

### Updated

- Dependecy to LFDS Icons updated to version 4.11.0

## 1.2.3

### Fixed

- Side sheet heading with long words (#1027780)

## 1.2.0

### Changed

- lfds-icon component is not affected by font-size anymore.
- Checkbox/radio inputs and their card variants accept slots for labels, descriptions, and icons, and their layout can switch between horizontal and stacked automatically—less custom markup for product teams.
- Buttons, shortcuts, and notification alerts adopt the latest LF spacing system and refreshed Storybook pages, keeping visuals consistent with the design language.
- The side-sheet dialog offers an optional backdrop and improved focus handling; the docs explain how to pair it with your own scroll locking when needed.

### Added

- New select (wip), textarea, and radio-group components cover more form scenarios out of the box: selects support option groups, textareas include friendly character feedback, and radio groups handle arrow-key navigation plus shared naming automatically.
- Component docs now flag whether a piece is beta or production-ready, so you know what’s safe to rely on.

### Fixed

- Radio groups and buttons now have automated coverage for keyboard navigation, giving added confidence when adopting the new components.

## Version 1.1.0

### Fixed

- Side sheet : Accessibility imporovements and fixed overlapping content due to z-index.
- Button now work as expected when you change the width of it.

### Updated

- Checkbox Card & Radio Card: Is now built with mobile first in mind with a new `auto` variant that ville change from horizontal to vertical on large screens.
- Checkbox Card & Radio Card: Updated documentation.