@oslokommune/punkt-elements 19.12.2 → 19.13.0

package/CHANGELOG.md

@@ -5,6 +5,14 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [19.13.0](https://github.com/oslokommune/punkt/compare/19.12.3...19.13.0) (2026-10-14)
+
+### Features
+* typesikre select (#3727). 
+
+---
+
+
 ## [19.12.2](https://github.com/oslokommune/punkt/compare/19.12.1...19.12.2) (2026-10-13)
 
 ### Bug Fixes

package/dist/components/index.d.ts

@@ -45,7 +45,7 @@ export type { IPktCombobox, IPktComboboxAttributes, IPktComboboxOption, TPktComb
 export type { IPktHeading, TPktHeadingSize, TPktHeadingLevel } from './heading';
 export type { TTagSkin, TTagType } from './tag';
 export type { IPktTabs, IPktTabItem, TSkin as TTabItemSkin } from './tabs';
-export type { IPktSelectOption, TSelectOption } from './select';
+export type { IPktSelect, IPktSelectOption, TSelectOption } from './select';
 export type { IPktBackLink } from './backlink';
 export type { IPktBreadcrumbs, IBreadcrumb, IBreadcrumbItem } from './breadcrumbs';
 export type { IPktLoader, TPktLoaderVariant } from './loader';

package/dist/components/select/index.d.ts

@@ -1,4 +1,5 @@
 import { PktSelect } from './select';
 export { PktSelect } from './select';
+export type { IPktSelect } from './select';
 export type { IPktSelectOption, TSelectOption } from '../../shared-types/select';
 export default PktSelect;

package/dist/components/select/select.d.ts

@@ -1,11 +1,17 @@
 import { PropertyValues } from 'lit';
 import { Ref } from 'lit/directives/ref.js';
 import { PktOptionsInputElement } from '../../base-elements/options-input-element';
-import { TSelectOption } from '../../shared-types/select';
+import { IPktSelectBase, TSelectOption } from '../../shared-types/select';
+import { Booleanish } from '../../shared-types';
 export type { TSelectOption } from '../../shared-types/select';
-export interface IPktSelect {
+export interface IPktSelect extends Omit<IPktSelectBase, 'form' | 'label' | 'ariaDescribedby' | 'ariaLabelledby' | 'helptextDropdownButton' | 'useWrapper'> {
     options: TSelectOption[];
-    value: string;
+    label?: string | null;
+    ariaDescribedby?: string | null;
+    ariaLabelledby?: string | null;
+    /** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
+    helptextDropdownButton?: string | null;
+    useWrapper?: Booleanish;
 }
 /**
  * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.

package/dist/components/select/select.test.d.ts

@@ -1,5 +1,6 @@
 import { BaseTestConfig } from '../../tests/test-framework';
 import { IPktSelect } from './select';
+import { Booleanish } from '../../shared-types';
 export interface SelectTestConfig extends Partial<IPktSelect>, BaseTestConfig {
     id?: string;
     label?: string;
@@ -13,7 +14,7 @@ export interface SelectTestConfig extends Partial<IPktSelect>, BaseTestConfig {
     'aria-describedby'?: string | null;
     counter?: boolean;
     inline?: boolean;
-    useWrapper?: boolean | string;
+    useWrapper?: Booleanish;
     'input-size'?: string;
 }
 export declare const createSelectTest: (config?: SelectTestConfig) => Promise<{

package/dist/shared-types/index.d.ts

@@ -50,7 +50,8 @@ export { defaultTimepickerStrings } from './timepicker';
 export type { TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, TProgressbarStatusType, TProgressbarTitlePosition, } from './progressbar';
 export { COMBOBOX_TAG_SKINS, COMBOBOX_DISPLAY_VALUES, COMBOBOX_TAG_PLACEMENTS, COMBOBOX_DEFAULTS, } from './combobox';
 export type { IPktComboboxOption, TPktComboboxTagSkin, TPktComboboxDisplayValue, TPktComboboxTagPlacement, IPktComboboxBase, IComboboxSpecProps, } from './combobox';
-export type { IPktSelectOption, TSelectOption } from './select';
+export { SELECT_DEFAULTS } from './select';
+export type { IPktSelectOption, TSelectOption, IPktSelectBase, ISelectSpecProps } from './select';
 export type { TPktSearchInputAppearance, TPktSearchInputMethod, IPktSearchInputSuggestion, IPktSearchInput, } from './searchinput';
 export { UPLOAD_STRATEGIES, FILE_UPLOAD_ITEM_RENDERERS, PREVIEW_UPLOAD_STATUS } from './fileupload';
 export type { TUploadStrategy as TFileUploadStrategy, TFileUploadItemRenderer, TPreviewUploadStatus, TFilesChangedReason, TFileValidator, TTransferProgress, IFileItem, IFileTransfer, IFileValidateDetail, ITransferCancelledDetail, IFilesChangedDetail, IFileUploadSpecProps, IPktFileUploadBase, } from './fileupload';

package/dist/shared-types/select.d.ts

@@ -1,3 +1,12 @@
+/**
+ * select.ts
+ *
+ * Type definitions for pkt-select.
+ * Used by React, Elements, and typed component specs.
+ */
+import type { IPktStringsProps } from '../shared-strings';
+import type { IFormFieldErrorProps, IFormFieldLabelProps, IHelptextProps, ITagOptionalRequiredProps } from './form-field';
+import type { TPktInputSize } from './size';
 /**
  * Shape of a single option in a `<pkt-select>` / `<PktSelect>` component.
  * Lives in shared-types so both `@oslokommune/punkt-elements` and
@@ -11,3 +20,51 @@ export interface IPktSelectOption {
     hidden?: boolean;
 }
 export type TSelectOption = IPktSelectOption;
+/**
+ * Select props shared by React, Elements, and typed component specs.
+ *
+ * @remarks React requires `id` and `label`, widens `helptext`, `helptextDropdown` and
+ * `errorMessage` to `ReactNode`, keeps the native `<select>` type for `value` (string, number
+ * or string array) and omits `options`. Elements widens `label`, `ariaDescribedby`, `ariaLabelledby`
+ * and `helptextDropdownButton` to `| null` (Lit uses `null` for an unset attribute),
+ * `useWrapper` to `Booleanish`, and omits `form`, which is a getter returning the associated
+ * `HTMLFormElement`, not the form id.
+ *
+ * `hasFieldset` is tri-state: `null` means the component derives the value (always `false`
+ * for select).
+ */
+export interface IPktSelectBase extends IFormFieldLabelProps, IHelptextProps, IFormFieldErrorProps, ITagOptionalRequiredProps, IPktStringsProps<'forms' | 'validation'> {
+    id?: string;
+    name?: string;
+    form?: string;
+    value?: string;
+    options?: IPktSelectOption[];
+    required?: boolean;
+    ariaDescribedby?: string;
+    ariaLabelledby?: string;
+    inline?: boolean;
+    fullwidth?: boolean;
+    useWrapper?: boolean;
+    hasFieldset?: boolean | null;
+    inputSize?: TPktInputSize;
+}
+/**
+ * Documented Select props (subset of `IPktSelectBase`).
+ * Used for typed component specs in documentation.
+ */
+export type ISelectSpecProps = Pick<IPktSelectBase, 'label' | 'required' | 'requiredTag' | 'requiredText' | 'optionalTag' | 'optionalText' | 'tagText' | 'hasError' | 'errorMessage' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'name' | 'form' | 'id' | 'value' | 'options' | 'disabled' | 'inline' | 'useWrapper' | 'fullwidth' | 'ariaDescribedby' | 'ariaLabelledby' | 'inputSize' | 'hasFieldset'>;
+/**
+ * Default values for pkt-select. Single source of truth for both frameworks.
+ * `hasFieldset` is intentionally absent — `null` lets the component derive it.
+ */
+export declare const SELECT_DEFAULTS: {
+    readonly disabled: false;
+    readonly required: false;
+    readonly hasError: false;
+    readonly requiredTag: false;
+    readonly optionalTag: false;
+    readonly inline: false;
+    readonly fullwidth: false;
+    readonly useWrapper: true;
+    readonly inputSize: 'medium';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "19.12.2",
+  "version": "19.13.0",
   "description": "Komponentbiblioteket til Punkt, designsystem for Oslo kommune",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo kommune",
@@ -84,5 +84,5 @@
   "engines": {
     "node": "^22.19.0 || ^24.0.0 || ^26.0.0"
   },
-  "gitHead": "6436ea583ed3f827be2ac945629607249beed29b"
+  "gitHead": "d8c349f200dd685cc1911a6baf5ce43012cee404"
 }

package/src/components/index.ts

@@ -95,7 +95,7 @@ export type { TTagSkin, TTagType } from '@/components/tag'
 
 export type { IPktTabs, IPktTabItem, TSkin as TTabItemSkin } from '@/components/tabs'
 
-export type { IPktSelectOption, TSelectOption } from '@/components/select'
+export type { IPktSelect, IPktSelectOption, TSelectOption } from '@/components/select'
 
 export type { IPktBackLink } from '@/components/backlink'
 

package/src/components/select/index.ts

@@ -1,5 +1,6 @@
 import { PktSelect } from './select'
 
 export { PktSelect } from './select'
+export type { IPktSelect } from './select'
 export type { IPktSelectOption, TSelectOption } from 'shared-types/select'
 export default PktSelect

package/src/components/select/select.test.ts

@@ -4,6 +4,7 @@ import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import { type IPktSelect, type TSelectOption } from './select'
+import type { Booleanish } from 'shared-types'
 import './select'
 import { PktInputWrapper } from '@/components/input-wrapper/input-wrapper'
 
@@ -20,7 +21,7 @@ export interface SelectTestConfig extends Partial<IPktSelect>, BaseTestConfig {
   'aria-describedby'?: string | null
   counter?: boolean
   inline?: boolean
-  useWrapper?: boolean | string
+  useWrapper?: Booleanish
   'input-size'?: string
 }
 

package/src/components/select/select.ts

@@ -5,15 +5,24 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 import { PktOptionsInputElement } from '@/base-elements/options-input-element'
 import { PktOptionsSlotController } from '@/controllers/pkt-options-controller'
 import { forwardSlots } from '@/directives/slot-content'
-import type { TSelectOption } from 'shared-types/select'
+import type { IPktSelectBase, TSelectOption } from 'shared-types/select'
+import type { Booleanish } from 'shared-types'
 import '@/components/input-wrapper'
 import { describedByIds } from 'shared-utils/forms/described-by'
 
 export type { TSelectOption } from 'shared-types/select'
 
-export interface IPktSelect {
+export interface IPktSelect extends Omit<
+  IPktSelectBase,
+  'form' | 'label' | 'ariaDescribedby' | 'ariaLabelledby' | 'helptextDropdownButton' | 'useWrapper'
+> {
   options: TSelectOption[]
-  value: string
+  label?: string | null
+  ariaDescribedby?: string | null
+  ariaLabelledby?: string | null
+  /** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
+  helptextDropdownButton?: string | null
+  useWrapper?: Booleanish
 }
 
 /**