@thunderid/react 1.3.3 → 1.4.0

package/dist/components/primitives/PasswordField/PasswordField.d.ts

@@ -1,16 +1,24 @@
 import { FC } from 'react';
 import { TextFieldProps } from '../TextField/TextField';
-export interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endIcon' | 'onEndIconClick' | 'onChange'> {
+export interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endIcon' | 'endIconLabel' | 'onEndIconClick' | 'onChange'> {
     /**
      * The browser autofill hint. Defaults to `current-password`; set `new-password` on the
      * fields of a change-password or sign-up form so password managers offer to generate and
      * store a new credential instead of filling the existing one.
      */
     autoComplete?: string;
+    /**
+     * Accessible name of the toggle button while the password is visible
+     */
+    hideLabel?: string;
     /**
      * Callback function when the field value changes
      */
     onChange: (value: string) => void;
+    /**
+     * Accessible name of the toggle button while the password is hidden
+     */
+    showLabel?: string;
 }
 /**
  * Password field component with show/hide toggle functionality.

package/dist/components/primitives/PasswordField/PasswordField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,EAAE,EAAqB,MAAM,OAAO,CAAC;AAM1D,OAAkB,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAEjE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,GAAG,gBAAgB,GAAG,UAAU,CAAC;IAClH;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;;GAGG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA2CzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAc,EAAE,EAAqB,MAAM,OAAO,CAAC;AAM1D,OAAkB,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAEjE,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,gBAAgB,GAAG,UAAU,CAAC;IACjG;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA8CzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/primitives/PasswordField/PasswordField.js

@@ -13,7 +13,7 @@ import { jsx } from "react/jsx-runtime";
 * Password field component with show/hide toggle functionality.
 * This component extends TextField and adds password visibility toggle functionality.
 */
-const PasswordField = ({ autoComplete = "current-password", onChange, className, disabled, error,...textFieldProps }) => {
+const PasswordField = ({ autoComplete = "current-password", hideLabel = "Hide password", onChange, showLabel = "Show password", className, disabled, error,...textFieldProps }) => {
 	const { theme, colorScheme } = useTheme_default();
 	const [showPassword, setShowPassword] = useState(false);
 	const styles = PasswordField_styles_default(theme, colorScheme, showPassword, !!disabled, !!error);
@@ -29,6 +29,7 @@ const PasswordField = ({ autoComplete = "current-password", onChange, className,
 		autoComplete,
 		disabled,
 		error,
+		endIconLabel: showPassword ? hideLabel : showLabel,
 		endIcon: /* @__PURE__ */ jsx(IconComponent, {
 			width: 16,
 			height: 16,

package/dist/components/primitives/PasswordField/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["PasswordField: FC<PasswordFieldProps>","useTheme","styles: Record<string, string>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","EyeOff","Eye","TextField"],"sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ChangeEvent, FC, SVGProps, useState} from 'react';\nimport useStyles from './PasswordField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Eye from '../Icons/Eye';\nimport EyeOff from '../Icons/EyeOff';\nimport TextField, {TextFieldProps} from '../TextField/TextField';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endIcon' | 'onEndIconClick' | 'onChange'> {\n  /**\n   * The browser autofill hint. Defaults to `current-password`; set `new-password` on the\n   * fields of a change-password or sign-up form so password managers offer to generate and\n   * store a new credential instead of filling the existing one.\n   */\n  autoComplete?: string;\n  /**\n   * Callback function when the field value changes\n   */\n  onChange: (value: string) => void;\n}\n\n/**\n * Password field component with show/hide toggle functionality.\n * This component extends TextField and adds password visibility toggle functionality.\n */\nconst PasswordField: FC<PasswordFieldProps> = ({\n  autoComplete = 'current-password',\n  onChange,\n  className,\n  disabled,\n  error,\n  ...textFieldProps\n}: PasswordFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const [showPassword, setShowPassword] = useState(false);\n  const styles: Record<string, string> = useStyles(theme, colorScheme, showPassword, !!disabled, !!error);\n\n  const togglePasswordVisibility = (): void => {\n    if (!disabled) {\n      setShowPassword(!showPassword);\n    }\n  };\n\n  const IconComponent: FC<SVGProps<SVGSVGElement>> = showPassword ? EyeOff : Eye;\n\n  return (\n    <TextField\n      {...textFieldProps}\n      className={cx(withVendorCSSClassPrefix(bem('password-field')), className)}\n      type={showPassword ? 'text' : 'password'}\n      onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n      autoComplete={autoComplete}\n      disabled={disabled}\n      error={error}\n      endIcon={\n        <IconComponent\n          width={16}\n          height={16}\n          className={cx(\n            withVendorCSSClassPrefix(bem('password-field', 'toggle-icon')),\n            styles['toggleIcon'],\n            showPassword ? styles['visibleIcon'] : styles['hiddenIcon'],\n          )}\n        />\n      }\n      onEndIconClick={togglePasswordVisibility}\n    />\n  );\n};\n\nexport default PasswordField;\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAMA,iBAAyC,EAC7C,eAAe,oBACf,UACA,WACA,UACA,MACA,GAAG,qBACqB;CACxB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAMC,SAAiCC,6BAAU,OAAO,aAAa,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM;CAEvG,MAAM,iCAAuC;AAC3C,MAAI,CAAC,SACH,iBAAgB,CAAC,aAAa;;CAIlC,MAAMC,gBAA6C,eAAeC,iBAASC;AAE3E,QACE,oBAACC;EACC,GAAI;EACJ,WAAW,GAAG,yBAAyB,IAAI,iBAAiB,CAAC,EAAE,UAAU;EACzE,MAAM,eAAe,SAAS;EAC9B,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;EAChE;EACJ;EACH;EACP,SACE,oBAAC;GACC,OAAO;GACP,QAAQ;GACR,WAAW,GACT,yBAAyB,IAAI,kBAAkB,cAAc,CAAC,EAC9D,OAAO,eACP,eAAe,OAAO,iBAAiB,OAAO,cAC/C;IACD;EAEJ,gBAAgB;GAChB;;AAIN,4BAAe"}
+{"version":3,"file":"PasswordField.js","names":["PasswordField: FC<PasswordFieldProps>","useTheme","styles: Record<string, string>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","EyeOff","Eye","TextField"],"sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ChangeEvent, FC, SVGProps, useState} from 'react';\nimport useStyles from './PasswordField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Eye from '../Icons/Eye';\nimport EyeOff from '../Icons/EyeOff';\nimport TextField, {TextFieldProps} from '../TextField/TextField';\n\nexport interface PasswordFieldProps\n  extends Omit<TextFieldProps, 'type' | 'endIcon' | 'endIconLabel' | 'onEndIconClick' | 'onChange'> {\n  /**\n   * The browser autofill hint. Defaults to `current-password`; set `new-password` on the\n   * fields of a change-password or sign-up form so password managers offer to generate and\n   * store a new credential instead of filling the existing one.\n   */\n  autoComplete?: string;\n  /**\n   * Accessible name of the toggle button while the password is visible\n   */\n  hideLabel?: string;\n  /**\n   * Callback function when the field value changes\n   */\n  onChange: (value: string) => void;\n  /**\n   * Accessible name of the toggle button while the password is hidden\n   */\n  showLabel?: string;\n}\n\n/**\n * Password field component with show/hide toggle functionality.\n * This component extends TextField and adds password visibility toggle functionality.\n */\nconst PasswordField: FC<PasswordFieldProps> = ({\n  autoComplete = 'current-password',\n  hideLabel = 'Hide password',\n  onChange,\n  showLabel = 'Show password',\n  className,\n  disabled,\n  error,\n  ...textFieldProps\n}: PasswordFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const [showPassword, setShowPassword] = useState(false);\n  const styles: Record<string, string> = useStyles(theme, colorScheme, showPassword, !!disabled, !!error);\n\n  const togglePasswordVisibility = (): void => {\n    if (!disabled) {\n      setShowPassword(!showPassword);\n    }\n  };\n\n  const IconComponent: FC<SVGProps<SVGSVGElement>> = showPassword ? EyeOff : Eye;\n\n  return (\n    <TextField\n      {...textFieldProps}\n      className={cx(withVendorCSSClassPrefix(bem('password-field')), className)}\n      type={showPassword ? 'text' : 'password'}\n      onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n      autoComplete={autoComplete}\n      disabled={disabled}\n      error={error}\n      endIconLabel={showPassword ? hideLabel : showLabel}\n      endIcon={\n        <IconComponent\n          width={16}\n          height={16}\n          className={cx(\n            withVendorCSSClassPrefix(bem('password-field', 'toggle-icon')),\n            styles['toggleIcon'],\n            showPassword ? styles['visibleIcon'] : styles['hiddenIcon'],\n          )}\n        />\n      }\n      onEndIconClick={togglePasswordVisibility}\n    />\n  );\n};\n\nexport default PasswordField;\n"],"mappings":";;;;;;;;;;;;;;;AAsCA,MAAMA,iBAAyC,EAC7C,eAAe,oBACf,YAAY,iBACZ,UACA,YAAY,iBACZ,WACA,UACA,MACA,GAAG,qBACqB;CACxB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAMC,SAAiCC,6BAAU,OAAO,aAAa,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM;CAEvG,MAAM,iCAAuC;AAC3C,MAAI,CAAC,SACH,iBAAgB,CAAC,aAAa;;CAIlC,MAAMC,gBAA6C,eAAeC,iBAASC;AAE3E,QACE,oBAACC;EACC,GAAI;EACJ,WAAW,GAAG,yBAAyB,IAAI,iBAAiB,CAAC,EAAE,UAAU;EACzE,MAAM,eAAe,SAAS;EAC9B,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;EAChE;EACJ;EACH;EACP,cAAc,eAAe,YAAY;EACzC,SACE,oBAAC;GACC,OAAO;GACP,QAAQ;GACR,WAAW,GACT,yBAAyB,IAAI,kBAAkB,cAAc,CAAC,EAC9D,OAAO,eACP,eAAe,OAAO,iBAAiB,OAAO,cAC/C;IACD;EAEJ,gBAAgB;GAChB;;AAIN,4BAAe"}

package/dist/components/primitives/Select/ResourceSelect.d.ts

@@ -0,0 +1,36 @@
+import type { EmbeddedFlowComponent, EmbeddedFlowComponentType, FetchSelectPage, SelectOptionDefaults, SelectOptionMapping } from '@thunderid/browser';
+import { FC } from 'react';
+import { SelectProps } from './Select';
+export interface ResourceSelectProps extends Omit<SelectProps, 'loading' | 'onError' | 'onLoadMore' | 'options'> {
+    /** Block name for the picker's CSS class, e.g. `user-select`. */
+    bemBlock: string;
+    /** The flow component the page function is called for. Defaults to one built from `type`. */
+    component?: EmbeddedFlowComponent;
+    defaults?: SelectOptionDefaults;
+    /** Wording used when the translations for the keys under `messageKey` are empty. */
+    fallbackMessages: {
+        ariaLabel: string;
+        empty: string;
+    };
+    /** Loads one page of the resource. Nothing is requested while this is unset. */
+    fetchPage?: FetchSelectPage;
+    filter?: string;
+    mapping?: SelectOptionMapping;
+    /** Translation key group under `elements.fields`, e.g. `user_select`. */
+    messageKey: string;
+    /** Called with the error of every failed load. The list itself shows no error. */
+    onError?: (error: Error) => void;
+    /** Options per request. Defaults to 30 and is capped at 100. */
+    pageSize?: number;
+    /** What is loaded, in the words of the failure log, e.g. `users`. */
+    resource: string;
+    /** The flow component type this picker stands for. */
+    type: EmbeddedFlowComponentType;
+}
+/**
+ * The part the `USER_SELECT`, `AUTH_FLOW_SELECT` and `USER_TYPE_SELECT` pickers share: a {@link Select} that loads
+ * one resource page by page. The list restarts when the page function, filter or page size changes.
+ */
+declare const ResourceSelect: FC<ResourceSelectProps>;
+export default ResourceSelect;
+//# sourceMappingURL=ResourceSelect.d.ts.map

package/dist/components/primitives/Select/ResourceSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/ResourceSelect.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,qBAAqB,EACrB,yBAAyB,EACzB,eAAe,EAEf,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,EAAE,EAA6B,MAAM,OAAO,CAAC;AACrD,OAAe,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAK7C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC;IAC9G,iEAAiE;IACjE,QAAQ,EAAE,MAAM,CAAC;IACjB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,oFAAoF;IACpF,gBAAgB,EAAE;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,CAAC;IACrD,gFAAgF;IAChF,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,yEAAyE;IACzE,UAAU,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,QAAQ,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,IAAI,EAAE,yBAAyB,CAAC;CACjC;AAID;;;GAGG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA6F3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/primitives/Select/ResourceSelect.js

@@ -0,0 +1,100 @@
+import { cx } from "../../../styles/emotion.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import useInfiniteOptions_default from "../../../hooks/useInfiniteOptions.js";
+import Select_default from "./Select.js";
+import { SelectConstants, bem, createResourceOptionsLoader, resolvePageSize, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/primitives/Select/ResourceSelect.tsx
+const NO_PAGES = () => Promise.resolve({
+	nextOffset: null,
+	options: []
+});
+/**
+* The part the `USER_SELECT`, `AUTH_FLOW_SELECT` and `USER_TYPE_SELECT` pickers share: a {@link Select} that loads
+* one resource page by page. The list restarts when the page function, filter or page size changes.
+*/
+const ResourceSelect = ({ "aria-label": ariaLabel, bemBlock, className, component, defaults, emptyText, fallbackMessages, fetchPage, filter, id, label, mapping, messageKey, name, onError, pageSize = SelectConstants.DEFAULT_PAGE_SIZE, placeholder, resource, type,...rest }) => {
+	const { t } = useTranslation_default();
+	const effectivePageSize = resolvePageSize(pageSize);
+	const live = useRef({
+		component,
+		defaults,
+		mapping
+	});
+	useEffect(() => {
+		live.current = {
+			component,
+			defaults,
+			mapping
+		};
+	});
+	const load = useMemo(() => createResourceOptionsLoader({
+		get component() {
+			return live.current.component ?? {
+				id: id ?? name ?? bemBlock,
+				type
+			};
+		},
+		get defaults() {
+			return live.current.defaults;
+		},
+		fetchPage: fetchPage ?? NO_PAGES,
+		filter,
+		get mapping() {
+			return live.current.mapping;
+		},
+		pageSize: effectivePageSize,
+		resource
+	}), [
+		bemBlock,
+		effectivePageSize,
+		fetchPage,
+		filter,
+		id,
+		name,
+		resource,
+		type
+	]);
+	const { hasMore, loading, onLoadMore, options, reset } = useInfiniteOptions_default({
+		load,
+		onError
+	});
+	const previousLoadRef = useRef(null);
+	useEffect(() => {
+		const previousLoad = previousLoadRef.current;
+		previousLoadRef.current = load;
+		if (previousLoad !== null && previousLoad !== load) reset();
+		if (fetchPage) onLoadMore();
+	}, [
+		fetchPage,
+		load,
+		onLoadMore,
+		reset
+	]);
+	const accessibleName = [
+		ariaLabel,
+		label,
+		placeholder,
+		t(`elements.fields.${messageKey}.aria_label`)
+	].find((text) => Boolean(text)) ?? fallbackMessages.ariaLabel;
+	return /* @__PURE__ */ jsx(Select_default, {
+		...rest,
+		"aria-label": accessibleName,
+		className: cx(withVendorCSSClassPrefix(bem(bemBlock)), className),
+		emptyText: emptyText ?? (t(`elements.fields.${messageKey}.empty`) || fallbackMessages.empty),
+		id,
+		label,
+		loading,
+		name,
+		onLoadMore: fetchPage && hasMore ? onLoadMore : void 0,
+		options,
+		placeholder
+	});
+};
+var ResourceSelect_default = ResourceSelect;
+
+//#endregion
+export { ResourceSelect_default as default };
+//# sourceMappingURL=ResourceSelect.js.map

package/dist/components/primitives/Select/ResourceSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceSelect.js","names":["NO_PAGES: FetchSelectPage","ResourceSelect: FC<ResourceSelectProps>","useTranslation","effectivePageSize: number","load: ResourceOptionsLoader","useInfiniteOptions","previousLoad: ResourceOptionsLoader | null","accessibleName: string","Select"],"sources":["../../../../src/components/primitives/Select/ResourceSelect.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  bem,\n  createResourceOptionsLoader,\n  SelectConstants,\n  resolvePageSize,\n  withVendorCSSClassPrefix,\n} from '@thunderid/browser';\nimport type {\n  EmbeddedFlowComponent,\n  EmbeddedFlowComponentType,\n  FetchSelectPage,\n  ResourceOptionsLoader,\n  SelectOptionDefaults,\n  SelectOptionMapping,\n} from '@thunderid/browser';\nimport {FC, useEffect, useMemo, useRef} from 'react';\nimport Select, {SelectProps} from './Select';\nimport useInfiniteOptions from '../../../hooks/useInfiniteOptions';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\n\nexport interface ResourceSelectProps extends Omit<SelectProps, 'loading' | 'onError' | 'onLoadMore' | 'options'> {\n  /** Block name for the picker's CSS class, e.g. `user-select`. */\n  bemBlock: string;\n  /** The flow component the page function is called for. Defaults to one built from `type`. */\n  component?: EmbeddedFlowComponent;\n  defaults?: SelectOptionDefaults;\n  /** Wording used when the translations for the keys under `messageKey` are empty. */\n  fallbackMessages: {ariaLabel: string; empty: string};\n  /** Loads one page of the resource. Nothing is requested while this is unset. */\n  fetchPage?: FetchSelectPage;\n  filter?: string;\n  mapping?: SelectOptionMapping;\n  /** Translation key group under `elements.fields`, e.g. `user_select`. */\n  messageKey: string;\n  /** Called with the error of every failed load. The list itself shows no error. */\n  onError?: (error: Error) => void;\n  /** Options per request. Defaults to 30 and is capped at 100. */\n  pageSize?: number;\n  /** What is loaded, in the words of the failure log, e.g. `users`. */\n  resource: string;\n  /** The flow component type this picker stands for. */\n  type: EmbeddedFlowComponentType;\n}\n\nconst NO_PAGES: FetchSelectPage = () => Promise.resolve({nextOffset: null, options: []});\n\n/**\n * The part the `USER_SELECT`, `AUTH_FLOW_SELECT` and `USER_TYPE_SELECT` pickers share: a {@link Select} that loads\n * one resource page by page. The list restarts when the page function, filter or page size changes.\n */\nconst ResourceSelect: FC<ResourceSelectProps> = ({\n  'aria-label': ariaLabel,\n  bemBlock,\n  className,\n  component,\n  defaults,\n  emptyText,\n  fallbackMessages,\n  fetchPage,\n  filter,\n  id,\n  label,\n  mapping,\n  messageKey,\n  name,\n  onError,\n  pageSize = SelectConstants.DEFAULT_PAGE_SIZE,\n  placeholder,\n  resource,\n  type,\n  ...rest\n}: ResourceSelectProps) => {\n  const {t} = useTranslation();\n  const effectivePageSize: number = resolvePageSize(pageSize);\n\n  const live = useRef({component, defaults, mapping});\n\n  useEffect(() => {\n    live.current = {component, defaults, mapping};\n  });\n\n  // Only the page function, filter and page size restart the list. Mapping, defaults and component are read when\n  // a page loads, so a parent that passes a new object on every render does not reload it.\n  const load: ResourceOptionsLoader = useMemo(\n    () =>\n      createResourceOptionsLoader({\n        get component(): EmbeddedFlowComponent {\n          return live.current.component ?? ({id: id ?? name ?? bemBlock, type} as EmbeddedFlowComponent);\n        },\n        get defaults(): SelectOptionDefaults | undefined {\n          return live.current.defaults;\n        },\n        fetchPage: fetchPage ?? NO_PAGES,\n        filter,\n        get mapping(): SelectOptionMapping | undefined {\n          return live.current.mapping;\n        },\n        pageSize: effectivePageSize,\n        resource,\n      }),\n    [bemBlock, effectivePageSize, fetchPage, filter, id, name, resource, type],\n  );\n  const {hasMore, loading, onLoadMore, options, reset} = useInfiniteOptions({load, onError});\n\n  const previousLoadRef = useRef<ResourceOptionsLoader | null>(null);\n\n  // The first batch is requested when the picker renders. A different page function, filter or page size starts\n  // the list again from the beginning.\n  useEffect(() => {\n    const previousLoad: ResourceOptionsLoader | null = previousLoadRef.current;\n\n    previousLoadRef.current = load;\n\n    if (previousLoad !== null && previousLoad !== load) {\n      reset();\n    }\n\n    if (fetchPage) {\n      onLoadMore();\n    }\n  }, [fetchPage, load, onLoadMore, reset]);\n\n  // The first of these that is not empty names the select. An empty string is not a name, which is why this is not a\n  // chain of `??`.\n  const accessibleName: string =\n    [ariaLabel, label, placeholder, t(`elements.fields.${messageKey}.aria_label`)].find((text) => Boolean(text)) ??\n    fallbackMessages.ariaLabel;\n\n  return (\n    <Select\n      {...rest}\n      aria-label={accessibleName}\n      className={cx(withVendorCSSClassPrefix(bem(bemBlock)), className)}\n      emptyText={emptyText ?? (t(`elements.fields.${messageKey}.empty`) || fallbackMessages.empty)}\n      id={id}\n      label={label}\n      loading={loading}\n      name={name}\n      onLoadMore={fetchPage && hasMore ? onLoadMore : undefined}\n      options={options}\n      placeholder={placeholder}\n    />\n  );\n};\n\nexport default ResourceSelect;\n"],"mappings":";;;;;;;;;AAgDA,MAAMA,iBAAkC,QAAQ,QAAQ;CAAC,YAAY;CAAM,SAAS,EAAE;CAAC,CAAC;;;;;AAMxF,MAAMC,kBAA2C,EAC/C,cAAc,WACd,UACA,WACA,WACA,UACA,WACA,kBACA,WACA,QACA,IACA,OACA,SACA,YACA,MACA,SACA,WAAW,gBAAgB,mBAC3B,aACA,UACA,KACA,GAAG,WACsB;CACzB,MAAM,EAAC,MAAKC,wBAAgB;CAC5B,MAAMC,oBAA4B,gBAAgB,SAAS;CAE3D,MAAM,OAAO,OAAO;EAAC;EAAW;EAAU;EAAQ,CAAC;AAEnD,iBAAgB;AACd,OAAK,UAAU;GAAC;GAAW;GAAU;GAAQ;GAC7C;CAIF,MAAMC,OAA8B,cAEhC,4BAA4B;EAC1B,IAAI,YAAmC;AACrC,UAAO,KAAK,QAAQ,aAAc;IAAC,IAAI,MAAM,QAAQ;IAAU;IAAK;;EAEtE,IAAI,WAA6C;AAC/C,UAAO,KAAK,QAAQ;;EAEtB,WAAW,aAAa;EACxB;EACA,IAAI,UAA2C;AAC7C,UAAO,KAAK,QAAQ;;EAEtB,UAAU;EACV;EACD,CAAC,EACJ;EAAC;EAAU;EAAmB;EAAW;EAAQ;EAAI;EAAM;EAAU;EAAK,CAC3E;CACD,MAAM,EAAC,SAAS,SAAS,YAAY,SAAS,UAASC,2BAAmB;EAAC;EAAM;EAAQ,CAAC;CAE1F,MAAM,kBAAkB,OAAqC,KAAK;AAIlE,iBAAgB;EACd,MAAMC,eAA6C,gBAAgB;AAEnE,kBAAgB,UAAU;AAE1B,MAAI,iBAAiB,QAAQ,iBAAiB,KAC5C,QAAO;AAGT,MAAI,UACF,aAAY;IAEb;EAAC;EAAW;EAAM;EAAY;EAAM,CAAC;CAIxC,MAAMC,iBACJ;EAAC;EAAW;EAAO;EAAa,EAAE,mBAAmB,WAAW,aAAa;EAAC,CAAC,MAAM,SAAS,QAAQ,KAAK,CAAC,IAC5G,iBAAiB;AAEnB,QACE,oBAACC;EACC,GAAI;EACJ,cAAY;EACZ,WAAW,GAAG,yBAAyB,IAAI,SAAS,CAAC,EAAE,UAAU;EACjE,WAAW,cAAc,EAAE,mBAAmB,WAAW,QAAQ,IAAI,iBAAiB;EAClF;EACG;EACE;EACH;EACN,YAAY,aAAa,UAAU,aAAa;EACvC;EACI;GACb;;AAIN,6BAAe"}

package/dist/components/primitives/Select/Select.d.ts

@@ -1,14 +1,6 @@
+import type { SelectOption, SelectOptionInput } from '@thunderid/browser';
 import { FC, SelectHTMLAttributes } from 'react';
-export interface SelectOption {
-    /**
-     * The text that will be displayed in the select
-     */
-    label: string;
-    /**
-     * The value that will be submitted with the form
-     */
-    value: string;
-}
+export type { SelectOption, SelectOptionInput };
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {
     /**
      * Additional CSS class names
@@ -18,6 +10,10 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
      * Whether the field is disabled
      */
     disabled?: boolean;
+    /**
+     * Text shown below the select when it has no options, nothing is loading and there is nothing more to load
+     */
+    emptyText?: string;
     /**
      * Error message to display below the select
      */
@@ -31,17 +27,30 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
      */
     label?: string;
     /**
-     * The options to display in the select
+     * Whether options are being fetched. The load more option waits, and a select with no options shows a loading message
      */
-    options: SelectOption[];
+    loading?: boolean;
     /**
-     * Placeholder text for the default/empty option
+     * Called when the load more option, listed after the last one, is chosen. Choosing it does not change the selection.
+     * The option is listed only when this is set, so pass it only while more options may be available
+     */
+    onLoadMore?: () => void;
+    /**
+     * The options to display: strings, numbers, or `{label, value, disabled?}` objects
+     */
+    options?: readonly (SelectOptionInput | null | undefined)[] | null;
+    /**
+     * Placeholder text for the default/empty option. While the field is not required, choosing it clears the selection
      */
     placeholder?: string;
     /**
      * Whether the field is required
      */
     required?: boolean;
+    /**
+     * Label of the selected option while `value` is not among `options`, such as a value loaded from saved data
+     */
+    selectedOption?: SelectOption;
 }
 declare const Select: FC<SelectProps>;
 export default Select;

package/dist/components/primitives/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAE,oBAAoB,EAAC,MAAM,OAAO,CAAC;AAO/C,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAC7F;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAuD3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAc,EAAE,EAAa,oBAAoB,EAA6B,MAAM,OAAO,CAAC;AAQnG,YAAY,EAAC,YAAY,EAAE,iBAAiB,EAAC,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAC7F;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,IAAI,CAAC;IACnE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,YAAY,CAAC;CAC/B;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAwH3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/primitives/Select/Select.js

@@ -3,40 +3,90 @@ import useTheme_default from "../../../contexts/Theme/useTheme.js";
 import FormControl_default from "../FormControl/FormControl.js";
 import InputLabel_default from "../InputLabel/InputLabel.js";
 import Select_styles_default from "./Select.styles.js";
-import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import useSelectMessages_default from "./useSelectMessages.js";
+import { SelectConstants, bem, normalizeSelectOptions, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/primitives/Select/Select.tsx
-const Select = ({ label, error, className, required, disabled, helperText, placeholder, options, style = {},...rest }) => {
+const Select = ({ label, error, className, required, disabled, helperText, placeholder, options = void 0, emptyText = void 0, loading = false, onLoadMore = void 0, onChange = void 0, selectedOption = void 0, style = {},...rest }) => {
 	const { theme, colorScheme } = useTheme_default();
+	const messages = useSelectMessages_default();
 	const hasError = !!error;
 	const styles = Select_styles_default(theme, colorScheme, disabled ?? false, hasError);
+	const items = useMemo(() => normalizeSelectOptions(options), [options]);
+	const selectRef = useRef(null);
+	const chosenValueRef = useRef("");
+	useEffect(() => {
+		const current = selectRef.current?.value;
+		if (current !== void 0 && current !== SelectConstants.LOAD_MORE_OPTION_VALUE) chosenValueRef.current = current;
+	});
+	const handleChange = (event) => {
+		if (event.target.value !== SelectConstants.LOAD_MORE_OPTION_VALUE) {
+			chosenValueRef.current = event.target.value;
+			onChange?.(event);
+			return;
+		}
+		event.target.value = chosenValueRef.current;
+		onLoadMore?.();
+	};
 	const selectClassName = cx(withVendorCSSClassPrefix(bem("select", "input")), styles["select"], hasError && styles["selectError"], disabled && styles["selectDisabled"]);
+	const showsSelectedOption = selectedOption !== void 0 && rest.value !== void 0 && String(rest.value) === selectedOption.value && !items.some((item) => item.value === selectedOption.value);
+	let statusText;
+	if (loading) statusText = items.length === 0 ? messages.loading : messages.loadingMore;
+	else if (items.length === 0 && !onLoadMore) statusText = emptyText;
+	const hasStatus = onLoadMore !== void 0 || emptyText !== void 0 || loading;
+	const showsLoadMore = onLoadMore !== void 0 && (items.length > 0 || !loading);
 	return /* @__PURE__ */ jsxs(FormControl_default, {
 		error,
 		helperText,
 		className: cx(withVendorCSSClassPrefix(bem("select")), className),
 		style,
-		children: [label && /* @__PURE__ */ jsx(InputLabel_default, {
-			required,
-			error: hasError,
-			children: label
-		}), /* @__PURE__ */ jsxs("select", {
-			className: selectClassName,
-			disabled,
-			"aria-invalid": hasError,
-			"aria-required": required,
-			...rest,
-			children: [placeholder && /* @__PURE__ */ jsx("option", {
-				value: "",
-				disabled: true,
-				children: placeholder
-			}), options.map((option) => /* @__PURE__ */ jsx("option", {
-				value: option.value,
-				className: styles["option"],
-				children: option.label
-			}, option.value))]
-		})]
+		children: [
+			label && /* @__PURE__ */ jsx(InputLabel_default, {
+				required,
+				error: hasError,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("select", {
+				className: selectClassName,
+				disabled,
+				"aria-invalid": hasError,
+				"aria-required": required,
+				"aria-busy": loading || void 0,
+				...rest,
+				ref: selectRef,
+				onChange: onLoadMore ? handleChange : onChange,
+				children: [
+					placeholder && /* @__PURE__ */ jsx("option", {
+						value: "",
+						disabled: Boolean(required),
+						children: placeholder
+					}),
+					showsSelectedOption && /* @__PURE__ */ jsx("option", {
+						value: selectedOption?.value,
+						children: selectedOption?.label
+					}),
+					items.map((option) => /* @__PURE__ */ jsx("option", {
+						value: option.value,
+						disabled: option.disabled,
+						className: styles["option"],
+						children: option.label
+					}, option.value)),
+					showsLoadMore && /* @__PURE__ */ jsx("option", {
+						value: SelectConstants.LOAD_MORE_OPTION_VALUE,
+						disabled: loading,
+						className: cx(withVendorCSSClassPrefix(bem("select", "load-more")), styles["option"], styles["loadMore"]),
+						children: loading ? messages.loadingMore : messages.loadMore
+					})
+				]
+			}),
+			hasStatus && /* @__PURE__ */ jsx("span", {
+				role: "status",
+				className: styles["status"],
+				children: statusText
+			})
+		]
 	});
 };
 var Select_default = Select;

package/dist/components/primitives/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["Select: FC<SelectProps>","useTheme","styles: Record<string, string>","useStyles","selectClassName: string","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/Select/Select.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, SelectHTMLAttributes} from 'react';\nimport useStyles from './Select.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface SelectOption {\n  /**\n   * The text that will be displayed in the select\n   */\n  label: string;\n  /**\n   * The value that will be submitted with the form\n   */\n  value: string;\n}\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the select\n   */\n  error?: string;\n  /**\n   * Helper text to display below the select\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the select\n   */\n  label?: string;\n  /**\n   * The options to display in the select\n   */\n  options: SelectOption[];\n  /**\n   * Placeholder text for the default/empty option\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst Select: FC<SelectProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  placeholder,\n  options,\n  style = {},\n  ...rest\n}: SelectProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError);\n\n  const selectClassName: string = cx(\n    withVendorCSSClassPrefix(bem('select', 'input')),\n    styles['select'],\n    hasError && styles['selectError'],\n    disabled && styles['selectDisabled'],\n  );\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('select')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <select\n        className={selectClassName}\n        disabled={disabled}\n        aria-invalid={hasError}\n        aria-required={required}\n        {...rest}\n      >\n        {placeholder && (\n          <option value=\"\" disabled>\n            {placeholder}\n          </option>\n        )}\n        {options.map((option: SelectOption) => (\n          <option key={option.value} value={option.value} className={styles['option']}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n    </FormControl>\n  );\n};\n\nexport default Select;\n"],"mappings":";;;;;;;;;AAyDA,MAAMA,UAA2B,EAC/B,OACA,OACA,WACA,UACA,UACA,YACA,aACA,SACA,QAAQ,EAAE,CACV,GAAG,WACc;CACjB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,sBAAU,OAAO,aAAa,YAAY,OAAO,SAAS;CAEjG,MAAMC,kBAA0B,GAC9B,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAChD,OAAO,WACP,YAAY,OAAO,gBACnB,YAAY,OAAO,kBACpB;AAED,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,SAAS,CAAC,EAAE,UAAU;EAC1D;aAEN,SACC,oBAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,qBAAC;GACC,WAAW;GACD;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;cAEH,eACC,oBAAC;IAAO,OAAM;IAAG;cACd;KACM,EAEV,QAAQ,KAAK,WACZ,oBAAC;IAA0B,OAAO,OAAO;IAAO,WAAW,OAAO;cAC/D,OAAO;MADG,OAAO,MAEX,CACT;IACK;GACG;;AAIlB,qBAAe"}
+{"version":3,"file":"Select.js","names":["Select: FC<SelectProps>","useTheme","messages: SelectMessages","useSelectMessages","styles: Record<string, string>","useStyles","items: SelectOption[]","selectRef: RefObject<HTMLSelectElement | null>","chosenValueRef: RefObject<string>","current: string | undefined","selectClassName: string","showsSelectedOption: boolean","statusText: string | undefined","hasStatus: boolean","showsLoadMore: boolean","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/Select/Select.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {bem, normalizeSelectOptions, SelectConstants, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport type {SelectOption, SelectOptionInput} from '@thunderid/browser';\nimport {ChangeEvent, FC, RefObject, SelectHTMLAttributes, useEffect, useMemo, useRef} from 'react';\nimport useStyles from './Select.styles';\nimport useSelectMessages, {SelectMessages} from './useSelectMessages';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport type {SelectOption, SelectOptionInput};\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Text shown below the select when it has no options, nothing is loading and there is nothing more to load\n   */\n  emptyText?: string;\n  /**\n   * Error message to display below the select\n   */\n  error?: string;\n  /**\n   * Helper text to display below the select\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the select\n   */\n  label?: string;\n  /**\n   * Whether options are being fetched. The load more option waits, and a select with no options shows a loading message\n   */\n  loading?: boolean;\n  /**\n   * Called when the load more option, listed after the last one, is chosen. Choosing it does not change the selection.\n   * The option is listed only when this is set, so pass it only while more options may be available\n   */\n  onLoadMore?: () => void;\n  /**\n   * The options to display: strings, numbers, or `{label, value, disabled?}` objects\n   */\n  options?: readonly (SelectOptionInput | null | undefined)[] | null;\n  /**\n   * Placeholder text for the default/empty option. While the field is not required, choosing it clears the selection\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Label of the selected option while `value` is not among `options`, such as a value loaded from saved data\n   */\n  selectedOption?: SelectOption;\n}\n\nconst Select: FC<SelectProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  placeholder,\n  options = undefined,\n  emptyText = undefined,\n  loading = false,\n  onLoadMore = undefined,\n  onChange = undefined,\n  selectedOption = undefined,\n  style = {},\n  ...rest\n}: SelectProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const messages: SelectMessages = useSelectMessages();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError);\n  const items: SelectOption[] = useMemo(() => normalizeSelectOptions(options), [options]);\n  const selectRef: RefObject<HTMLSelectElement | null> = useRef<HTMLSelectElement>(null);\n  const chosenValueRef: RefObject<string> = useRef<string>('');\n\n  // The value to put back when the load more option is chosen, since choosing it is not a selection.\n  useEffect(() => {\n    const current: string | undefined = selectRef.current?.value;\n\n    if (current !== undefined && current !== SelectConstants.LOAD_MORE_OPTION_VALUE) {\n      chosenValueRef.current = current;\n    }\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLSelectElement>): void => {\n    if (event.target.value !== SelectConstants.LOAD_MORE_OPTION_VALUE) {\n      chosenValueRef.current = event.target.value;\n      onChange?.(event);\n\n      return;\n    }\n\n    event.target.value = chosenValueRef.current;\n    onLoadMore?.();\n  };\n\n  const selectClassName: string = cx(\n    withVendorCSSClassPrefix(bem('select', 'input')),\n    styles['select'],\n    hasError && styles['selectError'],\n    disabled && styles['selectDisabled'],\n  );\n\n  const showsSelectedOption: boolean =\n    selectedOption !== undefined &&\n    rest.value !== undefined &&\n    String(rest.value) === selectedOption.value &&\n    !items.some((item: SelectOption) => item.value === selectedOption.value);\n\n  let statusText: string | undefined;\n\n  if (loading) {\n    statusText = items.length === 0 ? messages.loading : messages.loadingMore;\n  } else if (items.length === 0 && !onLoadMore) {\n    statusText = emptyText;\n  }\n\n  const hasStatus: boolean = onLoadMore !== undefined || emptyText !== undefined || loading;\n  const showsLoadMore: boolean = onLoadMore !== undefined && (items.length > 0 || !loading);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('select')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <select\n        className={selectClassName}\n        disabled={disabled}\n        aria-invalid={hasError}\n        aria-required={required}\n        aria-busy={loading || undefined}\n        {...rest}\n        ref={selectRef}\n        onChange={onLoadMore ? handleChange : onChange}\n      >\n        {placeholder && (\n          <option value=\"\" disabled={Boolean(required)}>\n            {placeholder}\n          </option>\n        )}\n        {showsSelectedOption && <option value={selectedOption?.value}>{selectedOption?.label}</option>}\n        {items.map((option: SelectOption) => (\n          <option key={option.value} value={option.value} disabled={option.disabled} className={styles['option']}>\n            {option.label}\n          </option>\n        ))}\n        {showsLoadMore && (\n          <option\n            value={SelectConstants.LOAD_MORE_OPTION_VALUE}\n            disabled={loading}\n            className={cx(withVendorCSSClassPrefix(bem('select', 'load-more')), styles['option'], styles['loadMore'])}\n          >\n            {loading ? messages.loadingMore : messages.loadMore}\n          </option>\n        )}\n      </select>\n      {hasStatus && (\n        <span role=\"status\" className={styles['status']}>\n          {statusText}\n        </span>\n      )}\n    </FormControl>\n  );\n};\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;AAmEA,MAAMA,UAA2B,EAC/B,OACA,OACA,WACA,UACA,UACA,YACA,aACA,UAAU,QACV,YAAY,QACZ,UAAU,OACV,aAAa,QACb,WAAW,QACX,iBAAiB,QACjB,QAAQ,EAAE,CACV,GAAG,WACc;CACjB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,WAA2BC,2BAAmB;CACpD,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,sBAAU,OAAO,aAAa,YAAY,OAAO,SAAS;CACjG,MAAMC,QAAwB,cAAc,uBAAuB,QAAQ,EAAE,CAAC,QAAQ,CAAC;CACvF,MAAMC,YAAiD,OAA0B,KAAK;CACtF,MAAMC,iBAAoC,OAAe,GAAG;AAG5D,iBAAgB;EACd,MAAMC,UAA8B,UAAU,SAAS;AAEvD,MAAI,YAAY,UAAa,YAAY,gBAAgB,uBACvD,gBAAe,UAAU;GAE3B;CAEF,MAAM,gBAAgB,UAAgD;AACpE,MAAI,MAAM,OAAO,UAAU,gBAAgB,wBAAwB;AACjE,kBAAe,UAAU,MAAM,OAAO;AACtC,cAAW,MAAM;AAEjB;;AAGF,QAAM,OAAO,QAAQ,eAAe;AACpC,gBAAc;;CAGhB,MAAMC,kBAA0B,GAC9B,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAChD,OAAO,WACP,YAAY,OAAO,gBACnB,YAAY,OAAO,kBACpB;CAED,MAAMC,sBACJ,mBAAmB,UACnB,KAAK,UAAU,UACf,OAAO,KAAK,MAAM,KAAK,eAAe,SACtC,CAAC,MAAM,MAAM,SAAuB,KAAK,UAAU,eAAe,MAAM;CAE1E,IAAIC;AAEJ,KAAI,QACF,cAAa,MAAM,WAAW,IAAI,SAAS,UAAU,SAAS;UACrD,MAAM,WAAW,KAAK,CAAC,WAChC,cAAa;CAGf,MAAMC,YAAqB,eAAe,UAAa,cAAc,UAAa;CAClF,MAAMC,gBAAyB,eAAe,WAAc,MAAM,SAAS,KAAK,CAAC;AAEjF,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,SAAS,CAAC,EAAE,UAAU;EAC1D;;GAEN,SACC,oBAACC;IAAqB;IAAU,OAAO;cACpC;KACU;GAEf,qBAAC;IACC,WAAW;IACD;IACV,gBAAc;IACd,iBAAe;IACf,aAAW,WAAW;IACtB,GAAI;IACJ,KAAK;IACL,UAAU,aAAa,eAAe;;KAErC,eACC,oBAAC;MAAO,OAAM;MAAG,UAAU,QAAQ,SAAS;gBACzC;OACM;KAEV,uBAAuB,oBAAC;MAAO,OAAO,gBAAgB;gBAAQ,gBAAgB;OAAe;KAC7F,MAAM,KAAK,WACV,oBAAC;MAA0B,OAAO,OAAO;MAAO,UAAU,OAAO;MAAU,WAAW,OAAO;gBAC1F,OAAO;QADG,OAAO,MAEX,CACT;KACD,iBACC,oBAAC;MACC,OAAO,gBAAgB;MACvB,UAAU;MACV,WAAW,GAAG,yBAAyB,IAAI,UAAU,YAAY,CAAC,EAAE,OAAO,WAAW,OAAO,YAAY;gBAExG,UAAU,SAAS,cAAc,SAAS;OACpC;;KAEJ;GACR,aACC,oBAAC;IAAK,MAAK;IAAS,WAAW,OAAO;cACnC;KACI;;GAEG;;AAIlB,qBAAe"}

package/dist/components/primitives/Select/Select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,EAAE,UAAU,OAAO,EAAE,UAAU,OAAO,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAgFpE,CAAC;AAE/C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,EAAE,UAAU,OAAO,EAAE,UAAU,OAAO,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAkGpE,CAAC;AAE/C,eAAe,SAAS,CAAC"}

package/dist/components/primitives/Select/Select.styles.js

@@ -63,8 +63,7 @@ const useStyles = (theme, colorScheme, disabled, hasError) => useMemo(() => {
       opacity: 0.6;
       cursor: not-allowed;
     `;
-	return {
-		option: css`
+	const option = css`
       padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};
       color: ${theme.vars.colors.text.primary};
       background-color: ${theme.vars.colors.background.surface};
@@ -77,10 +76,27 @@ const useStyles = (theme, colorScheme, disabled, hasError) => useMemo(() => {
         background-color: ${theme.vars.colors.primary.main};
         color: ${theme.vars.colors.primary.contrastText};
       }
+    `;
+	const status = css`
+      display: block;
+      margin-top: calc(${theme.vars.spacing.unit} / 2);
+      font-size: ${theme.vars.typography.fontSizes.sm};
+      color: ${theme.vars.colors.text.secondary};
+
+      &:empty {
+        display: none;
+      }
+    `;
+	return {
+		loadMore: css`
+      color: ${theme.vars.colors.primary.main};
+      font-weight: ${theme.vars.typography.fontWeights.medium};
     `,
+		option,
 		select,
 		selectDisabled,
-		selectError
+		selectError,
+		status
 	};
 }, [
 	theme,

package/dist/components/primitives/Select/Select.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","names":["select: string","selectError: string","selectDisabled: string"],"sources":["../../../../src/components/primitives/Select/Select.styles.ts"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the Select component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean): Record<string, string> =>\n  useMemo(() => {\n    const dropdownArrowColor: string = theme.colors.text.secondary.replace('#', '');\n    const dropdownArrow = `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23${dropdownArrowColor}%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E`;\n\n    const select: string = css`\n      width: 100%;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n      appearance: none;\n      background-image: url('${dropdownArrow}');\n      background-repeat: no-repeat;\n      background-position: right 0.7em top 50%;\n      background-size: 0.65em auto;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n      &:focus {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n      }\n    `;\n\n    const selectError: string = css`\n      border-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        border-color: ${theme.vars.colors.error.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${theme.vars.colors.error.main};\n      }\n    `;\n\n    const selectDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      opacity: 0.6;\n      cursor: not-allowed;\n    `;\n\n    const option: string = css`\n      padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${theme.vars.colors.background.surface};\n\n      &:hover {\n        background-color: ${theme.vars.colors.action.hover};\n      }\n\n      &:checked {\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n      }\n    `;\n\n    return {\n      option,\n      select,\n      selectDisabled,\n      selectError,\n    };\n  }, [theme, colorScheme, disabled, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,aAAa,OAAc,aAAqB,UAAmB,aACvE,cAAc;CAEZ,MAAM,gBAAgB,yKADa,MAAM,OAAO,KAAK,UAAU,QAAQ,KAAK,GAAG,CACmI;CAElN,MAAMA,SAAiB,GAAG;;iBAEb,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;+BAMnF,cAAc;;;;gBAI7B,WAAW,gBAAgB,UAAU;;;wBAG7B,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;CAI7F,MAAMC,cAAsB,GAAG;sBACb,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,iBAAyB,GAAG;0BACZ,MAAM,KAAK,OAAO,WAAW,SAAS;;;;AAoB5D,QAAO;EACL,QAhBqB,GAAG;sBACR,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;eAC/D,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;4BAGnC,MAAM,KAAK,OAAO,OAAO,MAAM;;;;4BAI/B,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;;;EAMlD;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,4BAAe"}
+{"version":3,"file":"Select.styles.js","names":["select: string","selectError: string","selectDisabled: string","option: string","status: string"],"sources":["../../../../src/components/primitives/Select/Select.styles.ts"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates styles for the Select component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean): Record<string, string> =>\n  useMemo(() => {\n    const dropdownArrowColor: string = theme.colors.text.secondary.replace('#', '');\n    const dropdownArrow = `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23${dropdownArrowColor}%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E`;\n\n    const select: string = css`\n      width: 100%;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n      appearance: none;\n      background-image: url('${dropdownArrow}');\n      background-repeat: no-repeat;\n      background-position: right 0.7em top 50%;\n      background-size: 0.65em auto;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n      &:focus {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n      }\n    `;\n\n    const selectError: string = css`\n      border-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        border-color: ${theme.vars.colors.error.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${theme.vars.colors.error.main};\n      }\n    `;\n\n    const selectDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      opacity: 0.6;\n      cursor: not-allowed;\n    `;\n\n    const option: string = css`\n      padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${theme.vars.colors.background.surface};\n\n      &:hover {\n        background-color: ${theme.vars.colors.action.hover};\n      }\n\n      &:checked {\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n      }\n    `;\n\n    const status: string = css`\n      display: block;\n      margin-top: calc(${theme.vars.spacing.unit} / 2);\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      color: ${theme.vars.colors.text.secondary};\n\n      &:empty {\n        display: none;\n      }\n    `;\n\n    const loadMore: string = css`\n      color: ${theme.vars.colors.primary.main};\n      font-weight: ${theme.vars.typography.fontWeights.medium};\n    `;\n\n    return {\n      loadMore,\n      option,\n      select,\n      selectDisabled,\n      selectError,\n      status,\n    };\n  }, [theme, colorScheme, disabled, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,aAAa,OAAc,aAAqB,UAAmB,aACvE,cAAc;CAEZ,MAAM,gBAAgB,yKADa,MAAM,OAAO,KAAK,UAAU,QAAQ,KAAK,GAAG,CACmI;CAElN,MAAMA,SAAiB,GAAG;;iBAEb,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;+BAMnF,cAAc;;;;gBAI7B,WAAW,gBAAgB,UAAU;;;wBAG7B,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;CAI7F,MAAMC,cAAsB,GAAG;sBACb,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,iBAAyB,GAAG;0BACZ,MAAM,KAAK,OAAO,WAAW,SAAS;;;;CAK5D,MAAMC,SAAiB,GAAG;sBACR,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;eAC/D,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;4BAGnC,MAAM,KAAK,OAAO,OAAO,MAAM;;;;4BAI/B,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;;;CAIpD,MAAMC,SAAiB,GAAG;;yBAEL,MAAM,KAAK,QAAQ,KAAK;mBAC9B,MAAM,KAAK,WAAW,UAAU,GAAG;eACvC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;AAY5C,QAAO;EACL,UANuB,GAAG;eACjB,MAAM,KAAK,OAAO,QAAQ,KAAK;qBACzB,MAAM,KAAK,WAAW,YAAY,OAAO;;EAKxD;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,4BAAe"}

package/dist/components/primitives/Select/__tests__/selectTestUtils.d.ts

@@ -0,0 +1,6 @@
+export declare const getSelectControl: () => HTMLSelectElement;
+export declare const getAllSelectControls: () => HTMLSelectElement[];
+export declare const readSelectedLabel: (control: HTMLElement) => string;
+export declare const chooseOption: (control: HTMLElement, optionLabel: string) => void;
+export declare const changeEventWith: (value: string) => unknown;
+//# sourceMappingURL=selectTestUtils.d.ts.map

package/dist/components/primitives/Select/__tests__/selectTestUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectTestUtils.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/Select/__tests__/selectTestUtils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,gBAAgB,QAAO,iBAAoE,CAAC;AAEzG,eAAO,MAAM,oBAAoB,QAAO,iBAAiB,EAAwD,CAAC;AAElH,eAAO,MAAM,iBAAiB,GAAI,SAAS,WAAW,KAAG,MACa,CAAC;AAEvE,eAAO,MAAM,YAAY,GAAI,SAAS,WAAW,EAAE,aAAa,MAAM,KAAG,IAUxE,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,KAAG,OAI/C,CAAC"}

package/dist/components/primitives/Select/useSelectMessages.d.ts

@@ -0,0 +1,9 @@
+import type { SelectMessages } from '@thunderid/browser';
+export type { SelectMessages };
+/**
+ * The wording of `Select`: the active translations when there is an I18n provider, English otherwise, so `Select`
+ * works without a provider.
+ */
+declare const useSelectMessages: () => SelectMessages;
+export default useSelectMessages;
+//# sourceMappingURL=useSelectMessages.d.ts.map

package/dist/components/primitives/Select/useSelectMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectMessages.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/useSelectMessages.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AAIvD,YAAY,EAAC,cAAc,EAAC,CAAC;AAE7B;;;GAGG;AACH,QAAA,MAAM,iBAAiB,QAAO,cAI7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/primitives/Select/useSelectMessages.js

@@ -0,0 +1,18 @@
+import I18nContext_default from "../../../contexts/I18n/I18nContext.js";
+import { getSelectMessages } from "@thunderid/browser";
+import { useContext, useMemo } from "react";
+
+//#region src/components/primitives/Select/useSelectMessages.ts
+/**
+* The wording of `Select`: the active translations when there is an I18n provider, English otherwise, so `Select`
+* works without a provider.
+*/
+const useSelectMessages = () => {
+	const i18n = useContext(I18nContext_default);
+	return useMemo(() => getSelectMessages(i18n ? (key) => i18n.t(key) : void 0), [i18n]);
+};
+var useSelectMessages_default = useSelectMessages;
+
+//#endregion
+export { useSelectMessages_default as default };
+//# sourceMappingURL=useSelectMessages.js.map

package/dist/components/primitives/Select/useSelectMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectMessages.js","names":["i18n: ContextType<typeof I18nContext>","I18nContext"],"sources":["../../../../src/components/primitives/Select/useSelectMessages.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {getSelectMessages} from '@thunderid/browser';\nimport type {SelectMessages} from '@thunderid/browser';\nimport {ContextType, useContext, useMemo} from 'react';\nimport I18nContext from '../../../contexts/I18n/I18nContext';\n\nexport type {SelectMessages};\n\n/**\n * The wording of `Select`: the active translations when there is an I18n provider, English otherwise, so `Select`\n * works without a provider.\n */\nconst useSelectMessages = (): SelectMessages => {\n  const i18n: ContextType<typeof I18nContext> = useContext(I18nContext);\n\n  return useMemo((): SelectMessages => getSelectMessages(i18n ? (key: string) => i18n.t(key) : undefined), [i18n]);\n};\n\nexport default useSelectMessages;\n"],"mappings":";;;;;;;;;AAcA,MAAM,0BAA0C;CAC9C,MAAMA,OAAwC,WAAWC,oBAAY;AAErE,QAAO,cAA8B,kBAAkB,QAAQ,QAAgB,KAAK,EAAE,IAAI,GAAG,OAAU,EAAE,CAAC,KAAK,CAAC;;AAGlH,gCAAe"}

package/dist/components/primitives/TextField/TextField.d.ts

@@ -8,10 +8,18 @@ export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElemen
      * Whether the field is disabled
      */
     disabled?: boolean;
+    /**
+     * Extra content shown inside the field, at its end after the end icon, such as an action button
+     */
+    endAdornment?: ReactNode;
     /**
      * Icon to display at the end (right) of the input
      */
     endIcon?: ReactNode;
+    /**
+     * Accessible name of the end icon when it is a button, that is when `onEndIconClick` is set
+     */
+    endIconLabel?: string;
     /**
      * Error message to display below the input
      */

package/dist/components/primitives/TextField/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/TextField/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAE,mBAAmB,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAOzD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC9F;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CA0FjC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/TextField/TextField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,EAAE,EAAE,mBAAmB,EAAiB,SAAS,EAAC,MAAM,OAAO,CAAC;AAOxE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC9F;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAcD,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAsGjC,CAAC;AAEF,eAAe,SAAS,CAAC"}