npm - @politiet/sheriff-web-components - Versions diffs - 2.5.1 → 2.6.1 - Mend

@politiet/sheriff-web-components 2.5.1 → 2.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (179) hide show

package/custom-elements.json +1774 -1341
package/dist/frameworks/preact.d.ts +12 -3
package/dist/frameworks/preact.d.ts.map +1 -1
package/dist/frameworks/react.d.ts +12 -3
package/dist/frameworks/react.d.ts.map +1 -1
package/dist/frameworks/solidjs.d.ts +3 -0
package/dist/frameworks/solidjs.d.ts.map +1 -1
package/dist/frameworks/svelte.d.ts +3 -0
package/dist/frameworks/svelte.d.ts.map +1 -1
package/dist/frameworks/vue.d.ts +3 -0
package/dist/frameworks/vue.d.ts.map +1 -1
package/dist/index.d.ts +8 -2
package/dist/index.d.ts.map +1 -1
package/dist/index.js +3 -0
package/dist/index.js.map +1 -1
package/dist/mixins/index.d.ts +6 -0
package/dist/mixins/index.d.ts.map +1 -0
package/dist/mixins/index.js +6 -0
package/dist/mixins/index.js.map +1 -0
package/dist/mixins/sds-delegate-interaction-mixin.d.ts +27 -0
package/dist/mixins/sds-delegate-interaction-mixin.d.ts.map +1 -0
package/dist/mixins/sds-delegate-interaction-mixin.js +29 -0
package/dist/mixins/sds-delegate-interaction-mixin.js.map +1 -0
package/dist/mixins/sds-dialog-target-mixin.d.ts +11 -0
package/dist/mixins/sds-dialog-target-mixin.d.ts.map +1 -0
package/dist/mixins/sds-dialog-target-mixin.js +95 -0
package/dist/mixins/sds-dialog-target-mixin.js.map +1 -0
package/dist/mixins/sds-event-dispatcher-mixin.d.ts +1 -2
package/dist/mixins/sds-event-dispatcher-mixin.d.ts.map +1 -1
package/dist/mixins/sds-event-dispatcher-mixin.js.map +1 -1
package/dist/mixins/sds-form-control-mixin.d.ts +14 -0
package/dist/mixins/sds-form-control-mixin.d.ts.map +1 -0
package/dist/mixins/sds-form-control-mixin.js +40 -0
package/dist/mixins/sds-form-control-mixin.js.map +1 -0
package/dist/mixins/sds-popover-target-mixin.d.ts +8 -0
package/dist/mixins/sds-popover-target-mixin.d.ts.map +1 -0
package/dist/mixins/sds-popover-target-mixin.js +77 -0
package/dist/mixins/sds-popover-target-mixin.js.map +1 -0
package/dist/mixins/types.d.ts +2 -0
package/dist/mixins/types.d.ts.map +1 -0
package/dist/mixins/types.js +2 -0
package/dist/mixins/types.js.map +1 -0
package/dist/react-wrappers/SDSPopoverWrapper.d.ts +3 -0
package/dist/react-wrappers/SDSPopoverWrapper.d.ts.map +1 -0
package/dist/react-wrappers/SDSPopoverWrapper.js +10 -0
package/dist/react-wrappers/SDSPopoverWrapper.js.map +1 -0
package/dist/react-wrappers/SDSProcessStepWrapper.d.ts +3 -0
package/dist/react-wrappers/SDSProcessStepWrapper.d.ts.map +1 -0
package/dist/react-wrappers/SDSProcessStepWrapper.js +10 -0
package/dist/react-wrappers/SDSProcessStepWrapper.js.map +1 -0
package/dist/react-wrappers/SDSProcessWrapper.d.ts +3 -0
package/dist/react-wrappers/SDSProcessWrapper.d.ts.map +1 -0
package/dist/react-wrappers/SDSProcessWrapper.js +10 -0
package/dist/react-wrappers/SDSProcessWrapper.js.map +1 -0
package/dist/react-wrappers/index.d.ts +3 -0
package/dist/react-wrappers/index.d.ts.map +1 -1
package/dist/react-wrappers/index.js +3 -0
package/dist/react-wrappers/index.js.map +1 -1
package/dist/sds-alert/sds-alert.component.d.ts +1 -1
package/dist/sds-button/sds-button.component.d.ts +6 -4
package/dist/sds-button/sds-button.component.d.ts.map +1 -1
package/dist/sds-button/sds-button.component.js +27 -15
package/dist/sds-button/sds-button.component.js.map +1 -1
package/dist/sds-checkbox/sds-checkbox.d.ts +8 -19
package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -1
package/dist/sds-checkbox/sds-checkbox.js +38 -63
package/dist/sds-checkbox/sds-checkbox.js.map +1 -1
package/dist/sds-checkbox/sds-checkbox.styles.d.ts.map +1 -1
package/dist/sds-checkbox/sds-checkbox.styles.js +1 -0
package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -1
package/dist/sds-checkbox-group/sds-checkbox-group.d.ts +1 -1
package/dist/sds-chip/sds-chip.d.ts +15 -22
package/dist/sds-chip/sds-chip.d.ts.map +1 -1
package/dist/sds-chip/sds-chip.js +28 -40
package/dist/sds-chip/sds-chip.js.map +1 -1
package/dist/sds-chip/sds-chip.styles.js +1 -1
package/dist/sds-chip/sds-chip.styles.js.map +1 -1
package/dist/sds-details/sds-details.d.ts +1 -1
package/dist/sds-dialog/sds-dialog.component.d.ts +56 -0
package/dist/sds-dialog/sds-dialog.component.d.ts.map +1 -0
package/dist/sds-dialog/sds-dialog.component.js +181 -0
package/dist/sds-dialog/sds-dialog.component.js.map +1 -0
package/dist/sds-dialog/sds-dialog.d.ts +2 -49
package/dist/sds-dialog/sds-dialog.d.ts.map +1 -1
package/dist/sds-dialog/sds-dialog.js +2 -145
package/dist/sds-dialog/sds-dialog.js.map +1 -1
package/dist/sds-dialog/sds-dialog.spec.d.ts +2 -0
package/dist/sds-dialog/sds-dialog.spec.d.ts.map +1 -0
package/dist/sds-dialog/sds-dialog.spec.js +50 -0
package/dist/sds-dialog/sds-dialog.spec.js.map +1 -0
package/dist/sds-dialog/sds-dialog.styles.js +4 -4
package/dist/sds-dialog/sds-dialog.styles.js.map +1 -1
package/dist/sds-notification/sds-notification.d.ts +1 -1
package/dist/sds-popover/assets/popover-styles.d.ts +3 -0
package/dist/sds-popover/assets/popover-styles.d.ts.map +1 -0
package/dist/sds-popover/assets/popover-styles.js +3 -0
package/dist/sds-popover/assets/popover-styles.js.map +1 -0
package/dist/sds-popover/assets/positioning.js +1 -0
package/dist/sds-popover/sds-popover.d.ts +25 -0
package/dist/sds-popover/sds-popover.d.ts.map +1 -0
package/dist/sds-popover/sds-popover.js +43 -0
package/dist/sds-popover/sds-popover.js.map +1 -0
package/dist/sds-popover/sds-popover.styles.d.ts +2 -0
package/dist/sds-popover/sds-popover.styles.d.ts.map +1 -0
package/dist/sds-popover/sds-popover.styles.js +52 -0
package/dist/sds-popover/sds-popover.styles.js.map +1 -0
package/dist/sds-process/sds-process.d.ts +20 -0
package/dist/sds-process/sds-process.d.ts.map +1 -0
package/dist/sds-process/sds-process.js +29 -0
package/dist/sds-process/sds-process.js.map +1 -0
package/dist/sds-process/sds-process.styles.d.ts +2 -0
package/dist/sds-process/sds-process.styles.d.ts.map +1 -0
package/dist/sds-process/sds-process.styles.js +8 -0
package/dist/sds-process/sds-process.styles.js.map +1 -0
package/dist/sds-process-step/sds-process-step.d.ts +29 -0
package/dist/sds-process-step/sds-process-step.d.ts.map +1 -0
package/dist/sds-process-step/sds-process-step.js +75 -0
package/dist/sds-process-step/sds-process-step.js.map +1 -0
package/dist/sds-process-step/sds-process-step.styles.d.ts +2 -0
package/dist/sds-process-step/sds-process-step.styles.d.ts.map +1 -0
package/dist/sds-process-step/sds-process-step.styles.js +143 -0
package/dist/sds-process-step/sds-process-step.styles.js.map +1 -0
package/dist/sds-radio/sds-radio.d.ts +14 -20
package/dist/sds-radio/sds-radio.d.ts.map +1 -1
package/dist/sds-radio/sds-radio.js +45 -73
package/dist/sds-radio/sds-radio.js.map +1 -1
package/dist/sds-radio-group/sds-radio-group.d.ts +1 -1
package/dist/sds-select/sds-select.component.d.ts +54 -0
package/dist/sds-select/sds-select.component.d.ts.map +1 -0
package/dist/sds-select/sds-select.component.js +290 -0
package/dist/sds-select/sds-select.component.js.map +1 -0
package/dist/sds-select/sds-select.d.ts +2 -64
package/dist/sds-select/sds-select.d.ts.map +1 -1
package/dist/sds-select/sds-select.js +2 -311
package/dist/sds-select/sds-select.js.map +1 -1
package/dist/sds-select/sds-select.styles.js +1 -1
package/dist/sds-select/sds-select.styles.js.map +1 -1
package/dist/sds-stepper/sds-stepper.d.ts +1 -2
package/dist/sds-stepper/sds-stepper.d.ts.map +1 -1
package/dist/sds-stepper/sds-stepper.js +2 -3
package/dist/sds-stepper/sds-stepper.js.map +1 -1
package/dist/sds-stepper/sds-stepper.styles.d.ts.map +1 -1
package/dist/sds-stepper/sds-stepper.styles.js +2 -1
package/dist/sds-stepper/sds-stepper.styles.js.map +1 -1
package/dist/sds-stepper-step/sds-stepper-step.d.ts +1 -1
package/dist/sds-stepper-step/sds-stepper-step.styles.d.ts.map +1 -1
package/dist/sds-stepper-step/sds-stepper-step.styles.js +7 -5
package/dist/sds-stepper-step/sds-stepper-step.styles.js.map +1 -1
package/dist/sds-switch/sds-switch.d.ts +5 -14
package/dist/sds-switch/sds-switch.d.ts.map +1 -1
package/dist/sds-switch/sds-switch.js +13 -26
package/dist/sds-switch/sds-switch.js.map +1 -1
package/dist/sds-switch/sds-switch.styles.js +1 -1
package/dist/sds-switch/sds-switch.styles.js.map +1 -1
package/dist/sds-textarea/sds-textarea.d.ts +12 -24
package/dist/sds-textarea/sds-textarea.d.ts.map +1 -1
package/dist/sds-textarea/sds-textarea.js +3 -32
package/dist/sds-textarea/sds-textarea.js.map +1 -1
package/dist/sds-textarea/sds-textarea.styles.d.ts.map +1 -1
package/dist/sds-textarea/sds-textarea.styles.js +8 -5
package/dist/sds-textarea/sds-textarea.styles.js.map +1 -1
package/dist/sds-textfield/sds-textfield.d.ts +11 -23
package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
package/dist/sds-textfield/sds-textfield.js +4 -33
package/dist/sds-textfield/sds-textfield.js.map +1 -1
package/dist/sds-textfield/sds-textfield.spec.js +3 -3
package/dist/sds-textfield/sds-textfield.spec.js.map +1 -1
package/dist/sds-textfield/sds-textfield.styles.d.ts.map +1 -1
package/dist/sds-textfield/sds-textfield.styles.js +5 -1
package/dist/sds-textfield/sds-textfield.styles.js.map +1 -1
package/dist/sheriff-web-components.js +388 -170
package/dist/skill/SKILL.md +172 -0
package/dist/skill/references/components.md +481 -0
package/dist/skill/references/react-wrappers.md +66 -0
package/dist/types.d.ts +1 -0
package/dist/types.d.ts.map +1 -1
package/dist/types.js.map +1 -1
package/package.json +23 -4
package/web-types.json +1559 -840

package/dist/skill/SKILL.md ADDED Viewed

@@ -0,0 +1,172 @@
+---
+name: sheriff-web-components
+description: >
+    Assists developers using @politiet/sheriff-web-components — Lit-based custom
+    elements with the sds-* prefix. Covers all 22 components (alert, button, card,
+    checkbox, chip, details, dialog, heading, icon, loader, radio, select, stepper,
+    switch, tag, text, textarea, textfield), React wrappers, form-associated
+    elements, slots, events, and data-palette theming. Use when the user references
+    sds-* components, @politiet/sheriff-web-components imports, or React wrappers.
+    Do not use for CSS-only questions, icon loading configuration, or SSR/RSC usage.
+---
+# Sheriff Web Components
+## Source File Conventions
+When looking up component details not covered here, read the source directly:
+-   Most components: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.ts`
+-   Exception components (alert, button, heading, icon, text): `packages/sheriff/web-components/src/sds-{name}/sds-{name}.component.ts`
+-   Usage examples: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.stories.ts`
+-   Documentation: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.mdx`
+## Architecture
+1. Components that dispatch events extend `LitElement` via `SDSEventDispatcherMixin`.
+2. Properties use `@property({ reflect: true })` — settable as HTML attributes or JS properties.
+3. Content distribution uses named slots (`slot="before"`, `slot="after"`) and a default slot.
+4. Form-associated components implement `ElementInternals` with `formAssociated = true`.
+5. Events dispatch via `dispatchSheriffEvent()` as `CustomEvent` with `bubbles: true, composed: true`.
+6. Color theming uses the `data-palette` attribute (see `@politiet/sheriff-css-framework` skill for palette details).
+## Prerequisites
+Import the CSS framework (components depend on it for CSS custom properties):
+```js
+import '@politiet/sheriff-css-framework';
+```
+Recommended to apply `sds-reset` to the root container. Not required for components:
+```html
+<body class="sds-reset">
+	...
+</body>
+```
+## Register Components
+Import once early at app entry point for performance. Importing a component multiple times is harmless but wasteful.
+For `sds-icon` specifically, repeated imports can overwrite resolver/loader configuration.
+This can cause loading bugs where the intended resolve/loader is overwritten.
+Import all components:
+```js
+import '@politiet/sheriff-web-components';
+```
+Or import individually for tree-shaking:
+```js
+import '@politiet/sheriff-web-components/sds-button';
+import '@politiet/sheriff-web-components/sds-textfield';
+```
+## Component Quick Reference
+All components use the `sds-` prefix. Sizes are `"lg"` | `"md"` | `"sm"` (default `"md"`).
+| Component            | Description                                  | Key Props                                                        |
+| -------------------- | -------------------------------------------- | ---------------------------------------------------------------- |
+| `sds-alert`          | Contextual alert banner                      | `variant`, `data-palette`, `removable-label`, `size`             |
+| `sds-button`         | Button or link-as-button                     | `variant`, `size`, `type`, `disabled`, `loading`, `icon`, `href` |
+| `sds-card`           | Content container; link card when `link` set | `link`                                                           |
+| `sds-checkbox`       | Single checkbox                              | `label`, `name`, `value`, `checked`, `error`                     |
+| `sds-checkbox-group` | Grouped checkboxes with legend               | `legend`, `error-message`, `help-text`                           |
+| `sds-chip`           | Selectable or removable chip/pill            | `variant`, `checked`, `name`, `value`                            |
+| `sds-details`        | Expandable accordion                         | `open`, `standalone`, `name` (exclusive group)                   |
+| `sds-dialog`         | Modal/dialog wrapping native `<dialog>`      | `open`, `modal`, `closedby`                                      |
+| `sds-heading`        | Semantic heading                             | `level`, `size`                                                  |
+| `sds-icon`           | Dynamic SVG icon                             | `name`, `size`, `label`, `data-palette`                          |
+| `sds-loader`         | Loading spinner                              | `size`, `contrast`                                               |
+| `sds-notification`   | **Deprecated** — use `sds-alert`             | `variant`, `removable-label`                                     |
+| `sds-radio`          | Single radio button                          | `label`, `name`, `value`, `checked`                              |
+| `sds-radio-group`    | Grouped radios with legend                   | `legend`, `direction`, `error-message`                           |
+| `sds-select`         | Dropdown select                              | `label`, `name`, `default-value`, `error-message`                |
+| `sds-stepper`        | Step indicator for multi-step flows          | `orientation`                                                    |
+| `sds-stepper-step`   | Individual step in stepper                   | `complete`, `interactive`, `active`                              |
+| `sds-switch`         | Toggle switch                                | `label`, `name`, `checked`, `reverse`, `hide-label`              |
+| `sds-tag`            | Non-interactive label/badge                  | `size`, `data-palette`                                           |
+| `sds-text`           | Text container with typography               | `size`, `strong`, `tall`                                         |
+| `sds-textarea`       | Multi-line text input                        | `label`, `name`, `counter`, `error-message`                      |
+| `sds-textfield`      | Single-line text input                       | `label`, `name`, `type`, `error-message`                         |
+For full component API (all props, slots, events, code examples), see `references/components.md`.
+## React Wrappers
+React versions before v19 do not natively handle web component events. Use the provided wrappers from `@politiet/sheriff-web-components/react-wrappers`:
+```tsx
+import { SDSButtonWrapper, SDSTextFieldWrapper } from '@politiet/sheriff-web-components/react-wrappers';
+function MyForm() {
+	return (
+		<form>
+			<SDSTextFieldWrapper label="Name" name="name" />
+			<SDSButtonWrapper variant="primary" type="submit">
+				Submit
+			</SDSButtonWrapper>
+		</form>
+	);
+}
+```
+React 19+ supports custom elements natively — can use web components directly without wrappers.
+For the full list of available wrappers and event mappings, see `references/react-wrappers.md`.
+## Common Patterns
+### Form layout
+```html
+<div class="sds-stack-y-xs">
+	<sds-textfield label="Name" name="name" required></sds-textfield>
+	<sds-textfield label="Email" name="email" type="email" required></sds-textfield>
+	<sds-textarea label="Message" name="message" rows="4"></sds-textarea>
+	<div class="sds-stack-x-sm">
+		<sds-button variant="secondary">Cancel</sds-button>
+		<sds-button variant="primary" type="submit">Submit</sds-button>
+	</div>
+</div>
+```
+### Dialog with actions
+```html
+<sds-dialog modal closedby="any">
+	<sds-heading level="h2" size="md" slot="header">Confirm</sds-heading>
+	<sds-text>Are you sure?</sds-text>
+	<div slot="footer" class="sds-stack-x-2xs">
+		<sds-button size="md">Confirm</sds-button>
+		<sds-button size="md" variant="secondary" data-command="close">Cancel</sds-button>
+	</div>
+</sds-dialog>
+```
+### Alert with title
+```html
+<sds-alert data-palette="success">
+	<h2 slot="title">Success!</h2>
+	<p slot="message">Your changes have been saved.</p>
+</sds-alert>
+```
+### Danger button
+```html
+<sds-button variant="primary" data-palette="danger">Delete</sds-button>
+```
+## Error Handling
+-   **Component does not render or render weird**: Verify the CSS framework is imported. This is needed for CSS custom properties.
+-   **Events do not fire in React (pre-v19)**: Confirm React wrappers are used instead of web components.
+-   **Icons do not load**: Check the icon name format (`{name}-{source}-{variant}`) and network access to jsDelivr CDN. If in secure/isolated network, use Artifactory. If needed, see `@politiet/sheriff-icons` for icon skill.
+-   **Form values not submitted**: Ensure the component has both `name` and `value` attributes set.

package/dist/skill/references/components.md ADDED Viewed

@@ -0,0 +1,481 @@
+# 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`