# Component Reference

Full API for each SDS web component. All components support `size` (`"lg"` | `"md"` | `"sm"`, default `"md"`) unless noted otherwise.

---

## sds-alert

Contextual alert/message banner. Source: `sds-alert.component.ts`.

```html
<sds-alert data-palette="info">
	<p slot="message">Informational message.</p>
</sds-alert>

<sds-alert data-palette="success">
	<h2 slot="title">Success!</h2>
	<p slot="message">Your changes have been saved.</p>
</sds-alert>

<sds-alert variant="secondary" data-palette="attention">
	<h2 slot="title">Notice</h2>
	<p slot="message">Please review your submission.</p>
</sds-alert>

<sds-alert data-palette="danger" removable-label="Close alert">
	<h2 slot="title">Error</h2>
	<p slot="message">Something went wrong.</p>
</sds-alert>

<sds-alert variant="secondary" data-palette="info" size="sm">
	<p slot="message">Compact info message.</p>
</sds-alert>
```

**Props:** `variant` (`"primary"` | `"secondary"`, default `"primary"`), `size` (`"lg"` | `"md"` | `"sm"`), `removable-label` (string — shows close button on primary variant), `data-palette` (`"info"` | `"success"` | `"attention"` | `"danger"`, default `"info"`)
**Slots:** `title` (heading element), `message` (`<p>`)
**Events:** `sds-remove` (close button clicked)

---

## sds-button

Button or link-styled-as-button. Source: `sds-button.component.ts`.

```html
<sds-button variant="primary" size="lg">Save</sds-button>
<sds-button variant="secondary">Cancel</sds-button>
<sds-button variant="tertiary">Learn more</sds-button>
<sds-button href="https://example.com" target="_blank">Visit site</sds-button>

<!-- Icon-only -->
<sds-button variant="primary" icon>
	<sds-icon name="search-material-outlined" label="Search"></sds-icon>
</sds-button>

<!-- With leading/trailing icons -->
<sds-button variant="primary">
	<sds-icon name="file_upload-material-outlined" slot="before"></sds-icon>
	Upload
</sds-button>

<sds-button variant="primary">
	Continue
	<sds-icon name="arrow_forward-material-outlined" slot="after"></sds-icon>
</sds-button>

<sds-button variant="primary" loading>Saving...</sds-button>
<sds-button variant="primary" type="submit">Submit</sds-button>
```

**Props:** `variant` (`"primary"` | `"secondary"` | `"tertiary"`, default `"primary"`), `size` (`"lg"` | `"md"` | `"sm"`, default `"lg"`), `type` (`"button"` | `"submit"` | `"reset"`, default `"button"`), `disabled`, `loading`, `icon` (compact icon-only mode), `href`, `target`, `name`, `value`, `form`
**Slots:** default (label), `before`, `after`
**Events:** `click`, `submit`, `reset`
**Danger pattern:** `<sds-button variant="primary" data-palette="danger">Delete</sds-button>`

---

## sds-card

Content container card. Renders as `<a>` with arrow icon when `link` is set.

```html
<sds-card link="https://www.example.com">
	<h2 slot="heading">Pass og ID-kort</h2>
	<p slot="text">Søke pass eller ID-kort, bestille time.</p>
</sds-card>

<sds-card>
	<h2 slot="heading">Kort uten lenke</h2>
	<p slot="text">Dette er et kort uten lenke</p>
</sds-card>
```

**Props:** `link` (URL — renders as anchor)
**Slots:** `heading` (`<h2>`–`<h6>` only), `text` (`<p>` only, no nested elements)
**Note:** Slots enforce strict content validation — use native heading/paragraph elements.

---

## sds-checkbox

Single checkbox input.

```html
<sds-checkbox label="I agree to the terms" name="terms" value="accepted"></sds-checkbox>
<sds-checkbox label="Subscribe" name="subscribe" checked></sds-checkbox>
<sds-checkbox label="Remember me" name="remember" help-text="Stay logged in for 30 days"></sds-checkbox>
<sds-checkbox label="Required option" name="required" error></sds-checkbox>
<sds-checkbox label="Locked choice" name="locked" checked readonly></sds-checkbox>
```

**Props:** `label`, `name`, `value`, `checked`, `disabled`, `required`, `readonly`, `error` (boolean — use checkbox-group for text error messages), `help-text`, `size`
**Events:** `change`, `focus`, `blur`

---

## sds-checkbox-group

Groups multiple checkboxes with shared legend and validation.

```html
<sds-checkbox-group legend="Select toppings">
	<sds-checkbox label="Cheese" name="toppings" value="cheese"></sds-checkbox>
	<sds-checkbox label="Pepperoni" name="toppings" value="pepperoni"></sds-checkbox>
</sds-checkbox-group>

<sds-checkbox-group legend="Select at least one" error-message="Please select at least one">
	<sds-checkbox label="Option A" name="options" value="a"></sds-checkbox>
	<sds-checkbox label="Option B" name="options" value="b"></sds-checkbox>
</sds-checkbox-group>

<sds-checkbox-group legend="Locked choices" readonly>
	<sds-checkbox label="Fixed A" name="fixed" value="a" checked></sds-checkbox>
	<sds-checkbox label="Fixed B" name="fixed" value="b"></sds-checkbox>
</sds-checkbox-group>
```

**Props:** `legend`, `disabled` (propagates), `readonly` (propagates), `error-message`, `help-text`, `size` (propagates)
**Slots:** default (`sds-checkbox` children — `name`/`value` go on each child)
**Events:** `sds-update`

---

## sds-chip

Form-associated chip/pill. Two variants: `selectable` (toggle) and `removable` (dismiss).

```html
<sds-chip name="category" value="east">Øst politidistrikt</sds-chip>
<sds-chip name="filter" value="active" checked>Active</sds-chip>
<sds-chip variant="removable">Removable tag</sds-chip>
<sds-chip name="secure" value="locked">
	Locked
	<sds-icon size="sm" name="lock-material-outlined"></sds-icon>
</sds-chip>
```

**Props:** `variant` (`"selectable"` | `"removable"`, default `"selectable"`), `checked`, `name`, `value`, `disabled`, `readonly`, `size`
**Slots:** default (label, can include `sds-icon`)
**Events:** `change` (selectable), `sds-remove` (removable)

---

## sds-details

Expandable/collapsible accordion. Summary text is a slot.

```html
<sds-details>
	<span slot="summary">Click to expand</span>
	<p>Hidden content.</p>
</sds-details>

<sds-details open standalone>
	<span slot="summary">Standalone</span>
	<p>Has rounded corners and border.</p>
</sds-details>

<!-- Exclusive accordion (only one open at a time) -->
<sds-details name="faq">
	<span slot="summary">Question 1</span>
	<p>Answer 1</p>
</sds-details>
<sds-details name="faq">
	<span slot="summary">Question 2</span>
	<p>Answer 2</p>
</sds-details>
```

**Props:** `open`, `standalone` (rounded corners + border), `name` (exclusive accordion group)
**Slots:** `summary` (always visible), default (expandable content)
**Events:** `sds-toggle` (detail: `{ open: boolean }`)

---

## sds-dialog

Modal/dialog wrapping native `<dialog>`.

```html
<sds-dialog modal closedby="any">
	<sds-heading level="h2" size="md" slot="header">Confirm Action</sds-heading>
	<sds-text>Are you sure you want to proceed?</sds-text>
	<div slot="footer" style="display: flex; gap: var(--sds-spacing-2xs);">
		<sds-button size="md">Confirm</sds-button>
		<sds-button size="md" variant="secondary" data-command="close">Cancel</sds-button>
	</div>
</sds-dialog>
```

**Props:** `open`, `modal`, `closedby` (`"none"` | `"closerequest"` | `"any"`, default `"closerequest"`), `close-button-label` (default `"Lukk dialogvindu"`, empty string hides button)
**Slots:** `header`, default (body), `footer`
**Events:** `sds-close`
**Methods:** `show()`, `showModal()`, `close()`
**Note:** `data-command="close"` on any inner button closes the dialog.

---

## sds-heading

Semantic heading. Source: `sds-heading.component.ts`.

```html
<sds-heading level="h1">Page Title</sds-heading>
<sds-heading level="h3" size="xl">Looks XL, semantically h3</sds-heading>
<sds-heading level="h2" data-palette="accent">Accent heading</sds-heading>
```

**Props:** `level` (`"h1"`–`"h6"`, default `"h1"`), `size` (`"xl"` | `"lg"` | `"md"` | `"sm"` | `"xs"` — visual override)
**Slots:** default

---

## sds-icon

Dynamic SVG icon. Source: `sds-icon.component.ts`.

```html
<sds-icon name="search-material-filled"></sds-icon>
<sds-icon name="close-material-outlined" size="lg" label="Close"></sds-icon>
<sds-icon name="lock-material-filled" color="red"></sds-icon>

<!-- Inline custom SVG -->
<sds-icon label="Custom icon">
	<svg viewBox="0 0 24 24" fill="none">
		<path fill="currentColor" d="M12 2L2 22h20L12 2z" />
	</svg>
</sds-icon>
```

**Props:** `name` (`{icon}-{source}-{variant}`), `size` (`"sm"` | `"md"` | `"lg"`), `label` (sets `role="img"` + `aria-label`), `color`
**Slots:** default (custom `<svg>` — use instead of `name`)
**CSS vars:** `--sds-icon-size`, `--sds-icon-color`, `--sds-icon-display`

For icon naming, loading, and resolvers, see `@politiet/sheriff-icons` package skill.

---

## sds-loader

Loading spinner with built-in `aria-label="Laster"`.

```html
<sds-loader></sds-loader>
<sds-loader size="lg"></sds-loader>
<sds-loader contrast></sds-loader>
<sds-loader data-palette="accent"></sds-loader>
```

**Props:** `size`, `contrast` (for colored backgrounds)

---

## sds-notification

> **Deprecated** — use `sds-alert` instead.

```html
<sds-notification variant="success">
	<p slot="title">Success</p>
	<p slot="message">Profile updated.</p>
</sds-notification>
```

**Props:** `variant` (`"info"` | `"success"` | `"attention"` | `"danger"`), `removable-label`
**Slots:** `title`, `message`
**Events:** `sds-remove`

---

## sds-radio

Single radio button.

```html
<sds-radio label="Option A" name="choice" value="a"></sds-radio>
<sds-radio label="Option B" name="choice" value="b" checked></sds-radio>
<sds-radio label="Express" name="shipping" value="express" help-text="2-3 business days"></sds-radio>
<sds-radio label="Locked" name="locked" value="y" checked readonly></sds-radio>
```

**Props:** `label`, `name`, `value` (default `"on"`), `checked`, `disabled`, `required`, `readonly`, `error`, `hide-label`, `help-text`, `size`
**Events:** `change`, `focus`, `blur`

---

## sds-radio-group

Groups radio buttons with shared legend and validation.

```html
<sds-radio-group legend="Choose one">
	<sds-radio label="A" name="choice" value="a"></sds-radio>
	<sds-radio label="B" name="choice" value="b"></sds-radio>
</sds-radio-group>

<sds-radio-group legend="Direction" direction="row">
	<sds-radio label="Left" name="dir" value="left"></sds-radio>
	<sds-radio label="Right" name="dir" value="right"></sds-radio>
</sds-radio-group>

<sds-radio-group legend="Required" error-message="Please select an option">
	<sds-radio label="Yes" name="req" value="yes"></sds-radio>
	<sds-radio label="No" name="req" value="no"></sds-radio>
</sds-radio-group>
```

**Props:** `legend`, `disabled` (propagates), `required` (propagates), `readonly` (propagates), `direction` (`"column"` | `"row"`), `error-message`, `help-text`, `size` (propagates)
**Slots:** default (`sds-radio` children)
**Events:** `sds-update`

---

## sds-select

Dropdown select using native `<option>`/`<optgroup>` elements.

```html
<sds-select label="Country" name="country">
	<option value="no">Norway</option>
	<option value="se">Sweden</option>
	<option value="dk">Denmark</option>
</sds-select>

<sds-select label="Category" name="category" default-value="b">
	<option value="a">Category A</option>
	<option value="b">Category B</option>
</sds-select>

<sds-select label="Location" name="location">
	<optgroup label="Norway">
		<option value="oslo">Oslo</option>
		<option value="bergen">Bergen</option>
	</optgroup>
	<hr />
	<optgroup label="Sweden">
		<option value="stockholm">Stockholm</option>
	</optgroup>
</sds-select>
```

**Props:** `label`, `name`, `value` (property only), `default-value` (attribute), `disabled`, `required`, `readonly`, `error-message`, `help-text`, `size`
**Slots:** default (`<option>` / `<optgroup>` / `<hr>`)
**Events:** `input`, `change`, `focus`, `blur`

---

## sds-stepper

Step indicator for multi-step flows. Contains `sds-stepper-step` children.

```html
<sds-stepper>
	<sds-stepper-step interactive complete>Innledning</sds-stepper-step>
	<sds-stepper-step interactive active>Saksopplysninger</sds-stepper-step>
	<sds-stepper-step>Oppsummering</sds-stepper-step>
</sds-stepper>

<sds-stepper orientation="vertical">
	<sds-stepper-step interactive complete>Step 1</sds-stepper-step>
	<sds-stepper-step interactive active>Step 2</sds-stepper-step>
	<sds-stepper-step>Step 3</sds-stepper-step>
</sds-stepper>
```

**Props:** `orientation` (`"horizontal"` | `"vertical"`, default `"horizontal"`)
**Slots:** default (`sds-stepper-step` children)
**Events:** `change` (detail: `{ index: number }`)
**Methods:** `getActiveStep()` (returns index or -1), `goToStep(index)`

### sds-stepper-step

**Props:** `complete`, `interactive` (clickable), `active` (current step)
**Slots:** default (label text)

---

## sds-switch

Toggle switch input.

```html
<sds-switch label="Enable notifications" name="notifications"></sds-switch>
<sds-switch label="Dark mode" name="darkmode" checked></sds-switch>
<sds-switch label="Auto-save" name="autosave" reverse></sds-switch>
<sds-switch label="Toggle" name="toggle" hide-label></sds-switch>
<sds-switch label="Locked" name="locked" checked readonly></sds-switch>
```

**Props:** `label`, `name`, `checked`, `disabled`, `readonly`, `reverse` (flip order), `hide-label`, `size`
**Events:** `change`, `focus`, `blur`
**Note:** No `error-message`, `help-text`, or `required`. Value getter returns `"on"` | `"off"`.

---

## sds-tag

Non-interactive label/badge.

```html
<sds-tag>Default</sds-tag>
<sds-tag data-palette="success">Approved</sds-tag>
<sds-tag data-palette="danger">Rejected</sds-tag>
<sds-tag size="sm">Small</sds-tag>
```

**Props:** `size`
**Slots:** default

---

## sds-text

Text container with typography styling. Source: `sds-text.component.ts`.

```html
<sds-text>Regular body text.</sds-text>
<sds-text size="lg" strong tall>Large bold text with tall line height.</sds-text>
<sds-text data-palette="danger">Red danger text.</sds-text>
```

**Props:** `size` (`"xl"` | `"lg"` | `"md"` | `"sm"` | `"xs"`), `strong` (bold), `tall` (increased line height)
**Slots:** default

---

## sds-textarea

Multi-line text input.

```html
<sds-textarea label="Description" name="description" placeholder="Enter a description..."></sds-textarea>
<sds-textarea label="Comments" name="comments" required error-message="Required"></sds-textarea>
<sds-textarea label="Bio" name="bio" counter="500"></sds-textarea>
<sds-textarea label="Address" name="address" rows="4" wrap="soft"></sds-textarea>
```

**Props:** `label`, `name`, `value`, `placeholder`, `disabled`, `readonly`, `required`, `rows`, `cols`, `wrap` (`"hard"` | `"soft"`), `minlength`, `maxlength`, `counter` (shows character count), `autocomplete`, `help-text`, `error-message`, `size`
**Events:** `input`, `change`, `select`, `focus`, `blur`

---

## sds-textfield

Single-line text input.

```html
<sds-textfield label="Email" name="email" type="email" placeholder="you@example.com"></sds-textfield>
<sds-textfield label="Username" name="username" required help-text="3-20 characters" minlength="3" maxlength="20"></sds-textfield>
<sds-textfield label="Phone" name="phone" type="tel" error-message="Invalid phone"></sds-textfield>
<sds-textfield label="Search" name="search" type="search">
	<sds-icon name="search-material-filled" slot="after"></sds-icon>
</sds-textfield>
<sds-textfield label="Password" name="password" type="password"></sds-textfield>
<sds-textfield label="ID" name="id" value="12345" readonly></sds-textfield>
```

**Props:** `label`, `name`, `value`, `type` (HTML input types), `placeholder`, `disabled`, `readonly`, `required`, `autocomplete`, `pattern`, `minlength`, `maxlength`, `help-text`, `error-message`, `size`
**Slots:** `after` (e.g., icon)
**Events:** `input`, `change`, `select`, `focus`, `blur`, `keydown`