@politiet/sheriff-web-components 2.13.0 → 2.13.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.
- package/custom-elements.json +173 -7
- package/dist/mixins/sds-dialog-target-mixin.d.ts.map +1 -1
- package/dist/mixins/sds-dialog-target-mixin.js +10 -0
- package/dist/mixins/sds-dialog-target-mixin.js.map +1 -1
- package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
- package/dist/sds-button/sds-button.styles.js +7 -2
- package/dist/sds-button/sds-button.styles.js.map +1 -1
- package/dist/sds-radio/sds-radio.d.ts +53 -1
- package/dist/sds-radio/sds-radio.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.js +218 -41
- package/dist/sds-radio/sds-radio.js.map +1 -1
- package/dist/sds-radio/sds-radio.styles.js +36 -36
- package/dist/sds-radio/sds-radio.styles.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.d.ts +4 -2
- package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.js +10 -3
- package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
- package/dist/sheriff-web-components.js +188 -180
- package/dist/skill/SKILL.md +127 -41
- package/dist/skill/references/components.md +247 -35
- package/dist/skill/references/react-wrappers.md +34 -9
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/dist/version.js.map +1 -1
- package/package.json +1 -1
- package/web-types.json +133 -40
package/dist/skill/SKILL.md
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: sheriff-web-components
|
|
3
3
|
description: >
|
|
4
|
-
Assists developers using @politiet/sheriff-web-components
|
|
5
|
-
elements with the sds-* prefix. Covers all
|
|
6
|
-
checkbox, chip, details,
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
Assists developers using @politiet/sheriff-web-components made of Lit-based custom
|
|
5
|
+
elements with the sds-* prefix. Covers all 29 components (alert, button, card,
|
|
6
|
+
checkbox, checkbox-group, chip, details, details-group, dialog,
|
|
7
|
+
environment-banner, heading, icon, internal-header, loader, notification,
|
|
8
|
+
popover, process, process-step, radio, radio-group, select, stepper,
|
|
9
|
+
stepper-step, switch, tag, text, textarea, textfield, tooltip), React
|
|
10
|
+
wrappers, framework type definitions, form-associated elements, slots,
|
|
11
|
+
events, and data-palette theming. Use when the user references sds-*
|
|
12
|
+
components, @politiet/sheriff-web-components imports, or React wrappers.
|
|
10
13
|
Do not use for CSS-only questions, icon loading configuration, or SSR/RSC usage.
|
|
11
14
|
---
|
|
12
15
|
|
|
@@ -17,17 +20,20 @@ description: >
|
|
|
17
20
|
When looking up component details not covered here, read the source directly:
|
|
18
21
|
|
|
19
22
|
- Most components: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.ts`
|
|
20
|
-
- Exception components (alert, button, heading, icon, text): `packages/sheriff/web-components/src/sds-{name}/sds-{name}.component.ts`
|
|
23
|
+
- Exception components (alert, button, dialog, environment-banner, heading, icon, internal-header, select, text, textfield): `packages/sheriff/web-components/src/sds-{name}/sds-{name}.component.ts`
|
|
24
|
+
- Styles and CSS custom properties: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.styles.ts`
|
|
21
25
|
- Usage examples: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.stories.ts`
|
|
22
|
-
- Documentation: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.mdx`
|
|
26
|
+
- Documentation: `packages/sheriff/web-components/src/sds-{name}/sds-{name}.mdx`, `variables.mdx` (CSS variables), `guidelines.mdx` (design guidance)
|
|
27
|
+
|
|
28
|
+
Inside an installed package the same files live under `node_modules/@politiet/sheriff-web-components/dist/sds-{name}/`.
|
|
23
29
|
|
|
24
30
|
## Architecture
|
|
25
31
|
|
|
26
32
|
1. Components that dispatch events extend `LitElement` via `SDSEventDispatcherMixin`.
|
|
27
|
-
2. Properties use `@property({ reflect: true })
|
|
28
|
-
3. Content distribution uses named slots (`slot="before"`, `slot="after"`) and a default slot.
|
|
29
|
-
4. Form-associated components implement `ElementInternals` with `formAssociated = true`.
|
|
30
|
-
5. Events dispatch via `dispatchSheriffEvent()` as `CustomEvent` with `bubbles: true, composed: true`.
|
|
33
|
+
2. Properties use `@property({ reflect: true })`, so they are settable as HTML attributes or JS properties.
|
|
34
|
+
3. Content distribution uses named slots (`slot="before"`, `slot="after"`, `slot="label"`, …) and a default slot.
|
|
35
|
+
4. Form-associated components implement `ElementInternals` with `formAssociated = true` and `delegatesFocus`.
|
|
36
|
+
5. Events dispatch via `dispatchSheriffEvent()` as `CustomEvent` with `bubbles: true, composed: true`. **The event name is used verbatim — there is no automatic `sds-` prefix.** Some components dispatch native-sounding names (`change`, `toggle`, `close`), others dispatch prefixed names (`sds-remove`, `sds-update`).
|
|
31
37
|
6. Color theming uses the `data-palette` attribute (see `@politiet/sheriff-css-framework` skill for palette details).
|
|
32
38
|
|
|
33
39
|
## Prerequisites
|
|
@@ -66,37 +72,74 @@ import '@politiet/sheriff-web-components/sds-button';
|
|
|
66
72
|
import '@politiet/sheriff-web-components/sds-textfield';
|
|
67
73
|
```
|
|
68
74
|
|
|
75
|
+
Every component has its own subpath export matching its tag name (`./sds-alert` … `./sds-tooltip`).
|
|
76
|
+
|
|
69
77
|
## Component Quick Reference
|
|
70
78
|
|
|
71
|
-
All components use the `sds-` prefix. Sizes are `"lg"` | `"md"` | `"sm"
|
|
72
|
-
|
|
73
|
-
| Component
|
|
74
|
-
|
|
|
75
|
-
| `sds-alert`
|
|
76
|
-
| `sds-button`
|
|
77
|
-
| `sds-card`
|
|
78
|
-
| `sds-checkbox`
|
|
79
|
-
| `sds-checkbox-group`
|
|
80
|
-
| `sds-chip`
|
|
81
|
-
| `sds-details`
|
|
82
|
-
| `sds-
|
|
83
|
-
| `sds-
|
|
84
|
-
| `sds-
|
|
85
|
-
| `sds-
|
|
86
|
-
| `sds-
|
|
87
|
-
| `sds-
|
|
88
|
-
| `sds-
|
|
89
|
-
| `sds-
|
|
90
|
-
| `sds-
|
|
91
|
-
| `sds-
|
|
92
|
-
| `sds-
|
|
93
|
-
| `sds-
|
|
94
|
-
| `sds-
|
|
95
|
-
| `sds-
|
|
96
|
-
| `sds-
|
|
79
|
+
All components use the `sds-` prefix. Sizes are `"lg"` | `"md"` | `"sm"`, default `"md"` — **except `sds-button`, which defaults to `"lg"`**. `sds-heading` and `sds-text` use the wider `"xl" | "lg" | "md" | "sm" | "xs"` scale.
|
|
80
|
+
|
|
81
|
+
| Component | Description | Key Props |
|
|
82
|
+
| ------------------------ | --------------------------------------------- | ------------------------------------------------------------------------------------------------ |
|
|
83
|
+
| `sds-alert` | Contextual alert banner | `variant`, `size`, `removable-label`, `data-palette` |
|
|
84
|
+
| `sds-button` | Button or link-as-button | `variant`, `size`, `type`, `disabled`, `loading`, `icon`, `inverted`, `label`, `href`, `command` |
|
|
85
|
+
| `sds-card` | Content container; link card when `link` set | `link` |
|
|
86
|
+
| `sds-checkbox` | Single checkbox | `label`, `name`, `value`, `checked`, `error`, `help-text` |
|
|
87
|
+
| `sds-checkbox-group` | Grouped checkboxes with legend | `legend`, `error-message`, `help-text` |
|
|
88
|
+
| `sds-chip` | Selectable or removable chip/pill | `variant`, `checked`, `name`, `value`, `size` |
|
|
89
|
+
| `sds-details` | Expandable accordion | `open`, `standalone`, `name` (exclusive group) |
|
|
90
|
+
| `sds-details-group` | Wraps `sds-details` into one accordion group | `outlined`, `name` (makes the group exclusive) |
|
|
91
|
+
| `sds-dialog` | Modal/dialog wrapping native `<dialog>` | `open`, `modal`, `closedby`, `close-button-label` |
|
|
92
|
+
| `sds-environment-banner` | Environment/build strip for internal apps | `env`, `build` |
|
|
93
|
+
| `sds-heading` | Semantic heading | `level`, `size` |
|
|
94
|
+
| `sds-icon` | Dynamic SVG icon | `name`, `size`, `label`, `color` |
|
|
95
|
+
| `sds-internal-header` | App header for internal (non-public) apps | `app-name`, `home-href` |
|
|
96
|
+
| `sds-loader` | Loading spinner | `size`, `contrast` |
|
|
97
|
+
| `sds-notification` | **Deprecated** — use `sds-alert` | `variant`, `removable-label` |
|
|
98
|
+
| `sds-popover` | Anchored popover built on the Popover API | `placement`, `autoplacement`, `overscroll` |
|
|
99
|
+
| `sds-process` | Timeline / process list | `heading-level` |
|
|
100
|
+
| `sds-process-step` | Individual step in a process | `heading`, `timestamp` |
|
|
101
|
+
| `sds-radio` | Single radio button | `label`, `name`, `value`, `checked`, `hide-label` |
|
|
102
|
+
| `sds-radio-group` | Grouped radios with legend | `legend`, `direction`, `error-message` |
|
|
103
|
+
| `sds-select` | Dropdown select | `label`, `name`, `default-value`, `error-message` |
|
|
104
|
+
| `sds-stepper` | Step indicator for multi-step flows | `orientation` |
|
|
105
|
+
| `sds-stepper-step` | Individual step in a stepper | `complete`, `interactive`, `active` |
|
|
106
|
+
| `sds-switch` | Toggle switch | `label`, `name`, `checked`, `reverse`, `hide-label` |
|
|
107
|
+
| `sds-tag` | Non-interactive label/badge | `size`, `data-palette` |
|
|
108
|
+
| `sds-text` | Text container with typography | `size`, `strong`, `subtle`, `tall` |
|
|
109
|
+
| `sds-textarea` | Multi-line text input | `label`, `name`, `counter`, `autosize`, `error-message` |
|
|
110
|
+
| `sds-textfield` | Single-line text input | `label`, `name`, `type`, `error-message` |
|
|
111
|
+
| `sds-tooltip` | Hover/focus tooltip anchored to a trigger | `id` (required), `placement` |
|
|
97
112
|
|
|
98
113
|
For full component API (all props, slots, events, code examples), see `references/components.md`.
|
|
99
114
|
|
|
115
|
+
## `data-palette` Support
|
|
116
|
+
|
|
117
|
+
`data-palette` works on **every** component and is inherited from any ancestor container, with three exceptions:
|
|
118
|
+
|
|
119
|
+
- `sds-alert`: `data-palette` is a typed component property, so it must be set **on the alert itself** (it does not inherit from a container). Accepted values are only `info` | `success` | `attention` | `danger`; it also selects the alert's status icon.
|
|
120
|
+
- `sds-tooltip` and `sds-environment-banner`: fixed colors, palette has no effect. The environment banner colors itself from `env`.
|
|
121
|
+
- `sds-loader`: the palette variant is designed for a loader sitting **on** a palette-colored surface. Add `contrast` to flip it back for a plain background.
|
|
122
|
+
|
|
123
|
+
`sds-tag` additionally accepts `data-palette="danger-action"` (deep red), which is not a general framework palette.
|
|
124
|
+
|
|
125
|
+
## Form-Associated Components
|
|
126
|
+
|
|
127
|
+
`sds-button`, `sds-checkbox`, `sds-chip`, `sds-radio`, `sds-select`, `sds-switch`, `sds-textarea`, and `sds-textfield` are form-associated: they participate in `<form>` submission, validation, and reset without extra wiring. Set both `name` and `value` for the value to be submitted. `sds-switch` submits `"on"` / `"off"`.
|
|
128
|
+
|
|
129
|
+
Shared props from the form-control mixin: `name`, `disabled`, `readonly`. In a `sds-checkbox-group` / `sds-radio-group`, setting `disabled` or `readonly` on the group propagates to children unless the child sets it explicitly.
|
|
130
|
+
|
|
131
|
+
### Slotted labels
|
|
132
|
+
|
|
133
|
+
`sds-checkbox`, `sds-radio`, `sds-select`, `sds-switch`, `sds-textarea`, and `sds-textfield` accept a `label` slot as an alternative to the `label` attribute, for labels that need markup:
|
|
134
|
+
|
|
135
|
+
```html
|
|
136
|
+
<sds-textfield name="orgnr">
|
|
137
|
+
<span slot="label">Org.nr <sds-icon name="info-material-outlined" size="sm"></sds-icon></span>
|
|
138
|
+
</sds-textfield>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
The attribute is the default slot content, so use one or the other — not both.
|
|
142
|
+
|
|
100
143
|
## React Wrappers
|
|
101
144
|
|
|
102
145
|
React versions before v19 do not natively handle web component events. Use the provided wrappers from `@politiet/sheriff-web-components/react-wrappers`:
|
|
@@ -120,6 +163,16 @@ React 19+ supports custom elements natively — can use web components directly
|
|
|
120
163
|
|
|
121
164
|
For the full list of available wrappers and event mappings, see `references/react-wrappers.md`.
|
|
122
165
|
|
|
166
|
+
## Framework Type Definitions
|
|
167
|
+
|
|
168
|
+
Type-only subpath exports register the `sds-*` tags with a framework's JSX/template typings, so custom elements type-check without wrappers. Import once in a global `.d.ts`:
|
|
169
|
+
|
|
170
|
+
```ts
|
|
171
|
+
/// <reference types="@politiet/sheriff-web-components/framework/react" />
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
Available: `framework/react`, `framework/preact`, `framework/vue`, `framework/svelte`, `framework/solidjs`. These ship types only and they emit no runtime code, so you still need to import the components themselves to register them.
|
|
175
|
+
|
|
123
176
|
## Common Patterns
|
|
124
177
|
|
|
125
178
|
### Form layout
|
|
@@ -139,16 +192,37 @@ For the full list of available wrappers and event mappings, see `references/reac
|
|
|
139
192
|
### Dialog with actions
|
|
140
193
|
|
|
141
194
|
```html
|
|
142
|
-
<sds-
|
|
195
|
+
<sds-button command="show-modal" commandfor="confirm-dialog">Delete…</sds-button>
|
|
196
|
+
|
|
197
|
+
<sds-dialog id="confirm-dialog" modal closedby="any">
|
|
143
198
|
<sds-heading level="h2" size="md" slot="header">Confirm</sds-heading>
|
|
144
199
|
<sds-text>Are you sure?</sds-text>
|
|
145
200
|
<div slot="footer" class="sds-stack-x-2xs">
|
|
146
|
-
<sds-button size="md">Confirm</sds-button>
|
|
147
|
-
<sds-button size="md" variant="secondary"
|
|
201
|
+
<sds-button size="md" data-palette="danger">Confirm</sds-button>
|
|
202
|
+
<sds-button size="md" variant="secondary" command="close">Cancel</sds-button>
|
|
148
203
|
</div>
|
|
149
204
|
</sds-dialog>
|
|
150
205
|
```
|
|
151
206
|
|
|
207
|
+
`command="show-modal"` needs `commandfor` pointing at the dialog's `id`, and it also wires `aria-haspopup`/`aria-expanded`/`aria-controls` on the trigger. `command="close"` (or the legacy `data-command="close"`) works on any button inside the dialog without `commandfor`.
|
|
208
|
+
|
|
209
|
+
### Popover and tooltip
|
|
210
|
+
|
|
211
|
+
```html
|
|
212
|
+
<sds-button popovertarget="filters">Filters</sds-button>
|
|
213
|
+
<sds-popover id="filters" placement="bottom-start">
|
|
214
|
+
<sds-checkbox label="Open cases" name="open"></sds-checkbox>
|
|
215
|
+
</sds-popover>
|
|
216
|
+
|
|
217
|
+
<!-- Tooltip: the trigger references the tooltip id, the tooltip is a sibling -->
|
|
218
|
+
<span style="position: relative; display: inline-block;">
|
|
219
|
+
<sds-button aria-describedby="orgnr-tip" variant="secondary" icon>
|
|
220
|
+
<sds-icon name="info-material-outlined" label="Om org.nr"></sds-icon>
|
|
221
|
+
</sds-button>
|
|
222
|
+
<sds-tooltip id="orgnr-tip">Organisasjonsnummer</sds-tooltip>
|
|
223
|
+
</span>
|
|
224
|
+
```
|
|
225
|
+
|
|
152
226
|
### Alert with title
|
|
153
227
|
|
|
154
228
|
```html
|
|
@@ -164,9 +238,21 @@ For the full list of available wrappers and event mappings, see `references/reac
|
|
|
164
238
|
<sds-button variant="primary" data-palette="danger">Delete</sds-button>
|
|
165
239
|
```
|
|
166
240
|
|
|
241
|
+
### Icon-only button
|
|
242
|
+
|
|
243
|
+
Put the accessible name on the button via `label` (it becomes `aria-label` on the internal `<button>`), and leave the icon undescribed:
|
|
244
|
+
|
|
245
|
+
```html
|
|
246
|
+
<sds-button variant="tertiary" icon label="Search">
|
|
247
|
+
<sds-icon name="search-material-outlined"></sds-icon>
|
|
248
|
+
</sds-button>
|
|
249
|
+
```
|
|
250
|
+
|
|
167
251
|
## Error Handling
|
|
168
252
|
|
|
169
253
|
- **Component does not render or render weird**: Verify the CSS framework is imported. This is needed for CSS custom properties.
|
|
170
254
|
- **Events do not fire in React (pre-v19)**: Confirm React wrappers are used instead of web components.
|
|
255
|
+
- **Event listener never fires**: Check the exact event name in `references/components.md`. `sds-details`/`sds-popover`/`sds-tooltip` dispatch `toggle` (not `sds-toggle`) and `sds-dialog` dispatches `close` (not `sds-close`, which is deprecated).
|
|
171
256
|
- **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.
|
|
172
257
|
- **Form values not submitted**: Ensure the component has both `name` and `value` attributes set.
|
|
258
|
+
- **`data-palette` seems ignored**: On `sds-alert` it must be set on the element itself, and only `info`/`success`/`attention`/`danger` are valid. `sds-tooltip` and `sds-environment-banner` do not support palettes.
|