@politiet/sheriff-web-components 2.5.1 → 2.6.0

package/dist/skill/references/react-wrappers.md

@@ -0,0 +1,66 @@
+# React 18 Wrappers
+
+React 18 does not natively support web component events. Use these wrappers instead of bare web components.
+Import components from `@politiet/sheriff-web-components/react-wrappers`.
+
+React 19+ supports custom elements natively — may use web components directly without wrappers.
+
+## Available Wrappers
+
+```tsx
+import {
+	SDSAlertWrapper,
+	SDSButtonWrapper,
+	SDSCardWrapper,
+	SDSCheckboxWrapper,
+	SDSCheckboxGroupWrapper,
+	SDSChipWrapper,
+	SDSDetailsWrapper,
+	SDSDialogWrapper,
+	SDSHeadingWrapper,
+	SDSIconWrapper,
+	SDSLoaderWrapper,
+	SDSNotificationWrapper,
+	SDSRadioWrapper,
+	SDSRadioGroupWrapper,
+	SDSSelectWrapper,
+	SDSStepperWrapper,
+	SDSStepperStepWrapper,
+	SDSSwitchWrapper,
+	SDSTagWrapper,
+	SDSTextWrapper,
+	SDSTextAreaWrapper,
+	SDSTextFieldWrapper,
+} from '@politiet/sheriff-web-components/react-wrappers';
+```
+
+Internally, wrappers use `@lit/react` `createComponent()` to map native DOM events to React handlers.
+
+## Usage Example
+
+```tsx
+import '@politiet/sheriff-css-framework';
+import { SDSButtonWrapper, SDSTextFieldWrapper } from '@politiet/sheriff-web-components/react-wrappers';
+
+function MyForm() {
+	return (
+		<form>
+			<SDSTextFieldWrapper label="Name" name="name" placeholder="Enter your name" />
+			<SDSButtonWrapper variant="primary" type="submit">
+				Submit
+			</SDSButtonWrapper>
+		</form>
+	);
+}
+```
+
+## Event Mapping Examples
+
+More React-y event handling in that names follow React naming/idioms:
+
+-   `SDSButtonWrapper`: `onClick` → `click`, `onSubmit` → `submit`, `onReset` → `reset`
+-   `SDSTextFieldWrapper`: `onInput` → `input`, `onSelect` → `select`, `onFocus` → `focus`, `onBlur` → `blur`, `onKeydown` → `keydown`
+-   `SDSAlertWrapper`: `onSdsRemove` → `sds-remove`
+-   `SDSDetailsWrapper`: `onSdsToggle` → `sds-toggle`
+-   `SDSDialogWrapper`: `onSdsClose` → `sds-close`
+-   `SDSCheckboxGroupWrapper` / `SDSRadioGroupWrapper`: `onSdsUpdate` → `sds-update`

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 export declare const colorPalettes: readonly ["neutral", "main", "accent", "support-1", "info", "success", "attention", "warning", "danger"];
 export type SDS_COLOR_PALETTES = (typeof colorPalettes)[number];
+export type SDS_HEADING_LEVELS = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export type SDS_SIZES = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 export type SDS_VARIANTS = 'primary' | 'secondary' | 'tertiary';
 export type AutocompleteTypes = 'off' | 'on' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'email' | 'username' | 'new-password' | 'current-password' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'impp' | 'url' | 'photo';

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,0GAA2G,CAAC;AACtI,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAChE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAC1B,KAAK,GACL,IAAI,GACJ,MAAM,GACN,kBAAkB,GAClB,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,kBAAkB,GAClB,UAAU,GACV,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,eAAe,GACf,oBAAoB,GACpB,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,cAAc,GACd,aAAa,GACb,SAAS,GACT,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,WAAW,GACX,QAAQ,GACR,cAAc,GACd,aAAa,GACb,QAAQ,GACR,SAAS,GACT,sBAAsB,GACtB,oBAAoB,GACpB,UAAU,GACV,MAAM,GACN,UAAU,GACV,YAAY,GACZ,WAAW,GACX,KAAK,GACL,KAAK,GACL,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,WAAW,GACX,eAAe,GACf,MAAM,GACN,KAAK,GACL,OAAO,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,0GAA2G,CAAC;AACtI,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAChE,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAClE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAC1B,KAAK,GACL,IAAI,GACJ,MAAM,GACN,kBAAkB,GAClB,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,kBAAkB,GAClB,UAAU,GACV,OAAO,GACP,UAAU,GACV,cAAc,GACd,kBAAkB,GAClB,eAAe,GACf,oBAAoB,GACpB,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,SAAS,GACT,cAAc,GACd,aAAa,GACb,SAAS,GACT,eAAe,GACf,oBAAoB,GACpB,gBAAgB,GAChB,WAAW,GACX,QAAQ,GACR,cAAc,GACd,aAAa,GACb,QAAQ,GACR,SAAS,GACT,sBAAsB,GACtB,oBAAoB,GACpB,UAAU,GACV,MAAM,GACN,UAAU,GACV,YAAY,GACZ,WAAW,GACX,KAAK,GACL,KAAK,GACL,kBAAkB,GAClB,cAAc,GACd,eAAe,GACf,WAAW,GACX,eAAe,GACf,MAAM,GACN,KAAK,GACL,OAAO,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC"}

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC","sourcesContent":["export const colorPalettes = ['neutral', 'main', 'accent', 'support-1', 'info', 'success', 'attention', 'warning', 'danger'] as const;\nexport type SDS_COLOR_PALETTES = (typeof colorPalettes)[number];\nexport type SDS_SIZES = 'xl' | 'lg' | 'md' | 'sm' | 'xs';\nexport type SDS_VARIANTS = 'primary' | 'secondary' | 'tertiary';\nexport type AutocompleteTypes =\n\t| 'off'\n\t| 'on'\n\t| 'name'\n\t| 'honorific-prefix'\n\t| 'given-name'\n\t| 'additional-name'\n\t| 'family-name'\n\t| 'honorific-suffix'\n\t| 'nickname'\n\t| 'email'\n\t| 'username'\n\t| 'new-password'\n\t| 'current-password'\n\t| 'one-time-code'\n\t| 'organization-title'\n\t| 'organization'\n\t| 'street-address'\n\t| 'address-line1'\n\t| 'address-line2'\n\t| 'address-line3'\n\t| 'address-level4'\n\t| 'address-level3'\n\t| 'address-level2'\n\t| 'address-level1'\n\t| 'country'\n\t| 'country-name'\n\t| 'postal-code'\n\t| 'cc-name'\n\t| 'cc-given-name'\n\t| 'cc-additional-name'\n\t| 'cc-family-name'\n\t| 'cc-number'\n\t| 'cc-exp'\n\t| 'cc-exp-month'\n\t| 'cc-exp-year'\n\t| 'cc-csc'\n\t| 'cc-type'\n\t| 'transaction-currency'\n\t| 'transaction-amount'\n\t| 'language'\n\t| 'bday'\n\t| 'bday-day'\n\t| 'bday-month'\n\t| 'bday-year'\n\t| 'sex'\n\t| 'tel'\n\t| 'tel-country-code'\n\t| 'tel-national'\n\t| 'tel-area-code'\n\t| 'tel-local'\n\t| 'tel-extension'\n\t| 'impp'\n\t| 'url'\n\t| 'photo';\n\nexport type SheriffEvent = CustomEvent<null>;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,CAAU,CAAC","sourcesContent":["export const colorPalettes = ['neutral', 'main', 'accent', 'support-1', 'info', 'success', 'attention', 'warning', 'danger'] as const;\nexport type SDS_COLOR_PALETTES = (typeof colorPalettes)[number];\nexport type SDS_HEADING_LEVELS = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\nexport type SDS_SIZES = 'xl' | 'lg' | 'md' | 'sm' | 'xs';\nexport type SDS_VARIANTS = 'primary' | 'secondary' | 'tertiary';\nexport type AutocompleteTypes =\n\t| 'off'\n\t| 'on'\n\t| 'name'\n\t| 'honorific-prefix'\n\t| 'given-name'\n\t| 'additional-name'\n\t| 'family-name'\n\t| 'honorific-suffix'\n\t| 'nickname'\n\t| 'email'\n\t| 'username'\n\t| 'new-password'\n\t| 'current-password'\n\t| 'one-time-code'\n\t| 'organization-title'\n\t| 'organization'\n\t| 'street-address'\n\t| 'address-line1'\n\t| 'address-line2'\n\t| 'address-line3'\n\t| 'address-level4'\n\t| 'address-level3'\n\t| 'address-level2'\n\t| 'address-level1'\n\t| 'country'\n\t| 'country-name'\n\t| 'postal-code'\n\t| 'cc-name'\n\t| 'cc-given-name'\n\t| 'cc-additional-name'\n\t| 'cc-family-name'\n\t| 'cc-number'\n\t| 'cc-exp'\n\t| 'cc-exp-month'\n\t| 'cc-exp-year'\n\t| 'cc-csc'\n\t| 'cc-type'\n\t| 'transaction-currency'\n\t| 'transaction-amount'\n\t| 'language'\n\t| 'bday'\n\t| 'bday-day'\n\t| 'bday-month'\n\t| 'bday-year'\n\t| 'sex'\n\t| 'tel'\n\t| 'tel-country-code'\n\t| 'tel-national'\n\t| 'tel-area-code'\n\t| 'tel-local'\n\t| 'tel-extension'\n\t| 'impp'\n\t| 'url'\n\t| 'photo';\n\nexport type SheriffEvent = CustomEvent<null>;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@politiet/sheriff-web-components",
-	"version": "2.5.1",
+	"version": "2.6.0",
 	"description": "Sheriff Design System Web Components Library",
 	"author": "Politiets IT-enhet",
 	"license": "ISC",
@@ -91,6 +91,18 @@
 			"import": "./dist/sds-notification/sds-notification.js",
 			"types": "./dist/sds-notification/sds-notification.d.ts"
 		},
+		"./sds-process": {
+			"import": "./dist/sds-process/sds-process.js",
+			"types": "./dist/sds-process/sds-process.d.ts"
+		},
+		"./sds-process-step": {
+			"import": "./dist/sds-process-step/sds-process-step.js",
+			"types": "./dist/sds-process-step/sds-process-step.d.ts"
+		},
+		"./sds-popover": {
+			"import": "./dist/sds-popover/sds-popover.js",
+			"types": "./dist/sds-popover/sds-popover.d.ts"
+		},
 		"./sds-radio": {
 			"import": "./dist/sds-radio/sds-radio.js",
 			"types": "./dist/sds-radio/sds-radio.d.ts"
@@ -134,10 +146,12 @@
 	},
 	"scripts": {
 		"tidy-frameworks": "node ../../../scripts/delete-filetypes-from-folder.js --folder ./dist/frameworks --filetypes js,js.map",
-		"build": "tsc && npm run tidy-frameworks && npm run build:metadata",
+		"build": "npm run build:popover && tsc && npm run tidy-frameworks && npm run build:metadata && npm run build:skill",
+		"build:popover": "rollup -c src/sds-popover/assets/rollup.config.js",
 		"build:web-types": "wca-webtypes analyze \"src/sds-*/**/*.ts\" --format webtypes --visibility public --outFile \"web-types.json\"",
 		"build:cem": "cem analyze --config custom-elements-manifest.config.mjs --outdir .",
-		"build:metadata": "npm run build:web-types && npm run build:cem"
+		"build:metadata": "npm run build:web-types && npm run build:cem",
+		"build:skill": "mkdir -p dist/skill && cp -r ../../../skills/sheriff-web-components/. dist/skill/"
 	},
 	"dependencies": {
 		"lit": "^3.3.1"
@@ -147,7 +161,7 @@
 		"@politiet/sheriff-icons": "^2.0.2"
 	},
 	"peerDependencies": {
-		"@politiet/sheriff-css-framework": "^2.2.3",
+		"@politiet/sheriff-css-framework": "^2.2.4",
 		"typescript": ">=3.8.0"
 	},
 	"peerDependenciesMeta": {
@@ -157,7 +171,12 @@
 	},
 	"devDependencies": {
 		"@custom-elements-manifest/analyzer": "^0.11.0",
+		"@digdir/designsystemet-css": "^1.12.1",
+		"@digdir/designsystemet-web": "^1.12.1",
+		"@rollup/plugin-node-resolve": "^16.0.3",
+		"@rollup/plugin-terser": "^0.4.4",
 		"lit-web-types": "^0.1.5",
+		"rollup": "^4.59.0",
 		"web-component-analyzer-webtypes": "^2.0.12"
 	},
 	"wca": {