@bspk/ui 1.1.13 → 1.1.15

package/dist/hooks/useOptionIconsInvalid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOptionIconsInvalid.js","sourceRoot":"","sources":["../../src/hooks/useOptionIconsInvalid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,UAAU,qBAAqB,CAAsB,OAAwB;IAC/E,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IAEtC,OAAO,OAAO,CAAC,GAAG,EAAE;QAChB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;YAAE,OAAO,IAAI,CAAC;QAErD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QAEzG,QAAQ,CACJ,YAAY,EACZ,+FAA+F,CAClG,CAAC;QAEF,OAAO,YAAY,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AAC5B,CAAC;AAsBD,sDAAsD"}

package/dist/index.d.ts

@@ -24,7 +24,7 @@ export type CallToActionButton = {
     /** The size of the call to action button. */
     size?: ButtonSize;
 };
-export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name', T> & Required<CommonProps<'value'>> & {
+export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label' | 'disabled' | 'name', T> & InvalidPropsLibrary & Required<CommonProps<'value'>> & {
     /**
      * Marks the control as checked.
      *
@@ -40,6 +40,27 @@ export type ToggleControlProps<T extends HTMLElement> = CommonProps<'aria-label'
     onChange: (checked: boolean, event: ChangeEvent<T>) => void;
 };
 export type CommonProps<K extends keyof CommonPropsLibrary, T extends HTMLElement = HTMLElement> = Pick<CommonPropsLibrary<T>, K>;
+/**
+ * The props that are common to input elements.
+ *
+ * If an element is invalid it must have an errorMessage.
+ */
+export type InvalidPropsLibrary = {
+    /**
+     * Marks the element as invalid and displays error state theme.
+     *
+     * If the errorMessage is empty the error state theme will not appear.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Marks the element as invalid and displays error message.
+     *
+     * When an element is invalid it must display an error message explaining why it is invalid.
+     */
+    errorMessage?: string;
+};
 export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
     /** The id of the element. If not provided one will be generated. */
     id?: string;
@@ -73,12 +94,6 @@ export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
      * @default false
      */
     disabled?: boolean;
-    /**
-     * Marks the element as invalid and displays error state theme.
-     *
-     * @default false
-     */
-    invalid?: boolean;
     /**
      * Determines if the element is [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly).
      *
@@ -91,12 +106,6 @@ export type CommonPropsLibrary<T extends HTMLElement = HTMLElement> = {
      * @required
      */
     name: string;
-    /**
-     * Marks the element as invalid and displays error message.
-     *
-     * When an element is invalid it must display an error message explaining why it is invalid.
-     */
-    errorMessage?: string;
     /**
      * The value of the control.
      *

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA+IH,MAAM,CAAC,MAAM,MAAM,GAAqC;IACpD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACjE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;IACnC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE;IAC3C,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7C,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE;IAC7B,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE;CAClC,CAAC;AAEX,sDAAsD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA0JH,MAAM,CAAC,MAAM,MAAM,GAAqC;IACpD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACjE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;IACnC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE;IAC3C,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7C,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE;IAC7B,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE;CAClC,CAAC;AAEX,sDAAsD"}

package/dist/inline-alert.css

@@ -1 +1 @@
-[data-bspk=inline-alert]{display:flex;align-items:start;justify-content:center;flex-direction:row;gap:var(--spacing-sizing-02)}[data-bspk=inline-alert] [data-txt]{flex:1}[data-bspk=inline-alert][data-variant=error]{color:var(--status-error);--first-tone: var(--status-error);--second-tone: var(--status-on-information)}[data-bspk=inline-alert][data-variant=success]{color:var(--status-success);--first-tone: var(--status-success);--second-tone: var(--status-on-success)}[data-bspk=inline-alert][data-variant=warning]{color:var(--foreground-neutral-on-surface);--first-tone: var(--status-warning);--second-tone: var(--status-on-warning)}[data-bspk=inline-alert][data-variant=informational]{color:var(--status-information);--first-tone: var(--status-information);--second-tone: var(--status-on-information)}[data-bspk=inline-alert] svg{color:var(--first-tone);width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=inline-alert] svg [data-second-tone]{fill:var(--second-tone)}
+[data-bspk=inline-alert]{display:flex;align-items:start;justify-content:start;flex-direction:row;gap:var(--spacing-sizing-02)}[data-bspk=inline-alert] [data-txt]{flex:1}[data-bspk=inline-alert][data-variant=error]{color:var(--status-error);--first-tone: var(--status-error);--second-tone: var(--status-on-information)}[data-bspk=inline-alert][data-variant=success]{color:var(--status-success);--first-tone: var(--status-success);--second-tone: var(--status-on-success)}[data-bspk=inline-alert][data-variant=warning]{color:var(--foreground-neutral-on-surface);--first-tone: var(--status-warning);--second-tone: var(--status-on-warning)}[data-bspk=inline-alert][data-variant=informational]{color:var(--status-information);--first-tone: var(--status-information);--second-tone: var(--status-on-information)}[data-bspk=inline-alert] svg{color:var(--first-tone);width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=inline-alert] svg [data-second-tone]{fill:var(--second-tone)}

package/dist/number-input.css

@@ -1 +1 @@
-[data-bspk=number-input]{--font: var(--body-base);--height: var(--spacing-sizing-10);--svg-width: var(--spacing-sizing-05);--color: var(--foreground-neutral-on-surface);width:100%;display:flex;flex-flow:row nowrap;font:var(--font);height:var(--height);border:1px solid var(--stroke-neutral-base);border-radius:var(--radius-small);background:var(--surface-neutral-t1-base)}[data-bspk=number-input]:focus-within{border-color:var(--stroke-brand-primary);outline:1px solid var(--stroke-brand-primary)}[data-bspk=number-input] [data-divider]{width:4px;border-right:1px solid var(--stroke-neutral-base);height:calc(var(--height) - 8px);margin:3px 0}[data-bspk=number-input] button{min-width:var(--height);background:none;border:none;cursor:pointer;font:var(--font);display:flex;justify-content:center;align-items:center;color:var(--color)}[data-bspk=number-input] button svg{width:var(--svg-width)}[data-bspk=number-input] button:disabled{cursor:not-allowed;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=number-input] input{color:var(--color);min-width:0;display:block;font:var(--font);text-align:center;padding:0 var(--spacing-sizing-03);background:rgba(0,0,0,0);border:none}[data-bspk=number-input] input:focus{outline:none}[data-bspk=number-input] input::-webkit-outer-spin-button,[data-bspk=number-input] input::-webkit-inner-spin-button{appearance:none;margin:0}[data-bspk=number-input] input[type=number]{appearance:textfield}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:hover,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):hover{background-color:var(--interactions-hover-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:active,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):active{background-color:var(--interactions-press-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly])[data-invalid]{border-color:var(--status-error);outline-color:var(--status-error)}[data-bspk=number-input][data-disabled],[data-bspk=number-input][data-readonly]{--color: var(--foreground-neutral-disabled-on-surface);border-color:var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=number-input][data-disabled] [data-divider],[data-bspk=number-input][data-readonly] [data-divider]{border-color:var(--stroke-neutral-disabled-light)}[data-bspk=number-input][data-readonly] input{color:var(--foreground-neutral-on-surface) !important}[data-bspk=number-input][data-size=small]{--font: var(--body-small);--height: var(--spacing-sizing-08)}[data-bspk=number-input][data-size=large]{--font: var(--body-large);--height: var(--spacing-sizing-12);--svg-width: var(--spacing-sizing-06)}
+[data-bspk=number-input]{--font: var(--body-base);--height: var(--spacing-sizing-10);--svg-width: var(--spacing-sizing-05);--color: var(--foreground-neutral-on-surface);width:100%;display:flex;flex-flow:row nowrap;font:var(--font);height:var(--height);border:1px solid var(--stroke-neutral-base);border-radius:var(--radius-small);background:var(--surface-neutral-t1-base);max-width:280px}[data-bspk=number-input]:focus-within{border-color:var(--stroke-brand-primary)}[data-bspk=number-input] [data-divider]{width:4px;border-right:1px solid var(--stroke-neutral-base);height:calc(var(--height) - 8px);margin:3px 0}[data-bspk=number-input] button{width:var(--height);height:var(--height);background:none;border:none;cursor:pointer;font:var(--font);flex-shrink:0;display:flex;justify-content:center;align-items:center;color:var(--color)}[data-bspk=number-input] button svg{width:var(--svg-width)}[data-bspk=number-input] button:disabled{cursor:not-allowed;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=number-input] input{color:var(--color);min-width:0;display:block;font:var(--font);text-align:center;padding:0 var(--spacing-sizing-03);background:rgba(0,0,0,0);border:none;flex-grow:1}[data-bspk=number-input] input:focus{outline:none}[data-bspk=number-input] input::-webkit-outer-spin-button,[data-bspk=number-input] input::-webkit-inner-spin-button{appearance:none;margin:0}[data-bspk=number-input] input[type=number]{appearance:textfield}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:hover,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):hover{background-color:var(--interactions-hover-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:active,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):active{background-color:var(--interactions-press-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly])[data-invalid]{border-color:var(--status-error);outline-color:var(--status-error)}[data-bspk=number-input][data-disabled],[data-bspk=number-input][data-readonly]{--color: var(--foreground-neutral-disabled-on-surface);border-color:var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=number-input][data-disabled] [data-divider],[data-bspk=number-input][data-readonly] [data-divider]{border-color:var(--stroke-neutral-disabled-light)}[data-bspk=number-input][data-readonly] input{color:var(--foreground-neutral-on-surface) !important}[data-bspk=number-input][data-size=small]{--font: var(--body-small);--height: var(--spacing-sizing-08)}[data-bspk=number-input][data-size=large]{--font: var(--body-large);--height: var(--spacing-sizing-12);--svg-width: var(--spacing-sizing-06)}

package/dist/textarea.css

@@ -1,4 +1,4 @@
 [data-bspk=textarea]{/*! 
 --min-rows: is set via inline style 
 --max-rows: is set via inline style
-*/display:grid;width:100%;--font: var(--body-base);--line-height: 20px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea][data-size=small]{--font: var(--body-small);--line-height: 20px;--padding: var(--spacing-sizing-02)}[data-bspk=textarea][data-size=large]{--font: var(--body-large);--line-height: 24px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea] [data-replicated-value]{white-space:pre-wrap;visibility:hidden}[data-bspk=textarea] textarea,[data-bspk=textarea] [data-replicated-value]{width:100%;font:var(--font);border:1px solid var(--border-color);padding:var(--padding);grid-area:1/1/2/2;min-height:calc(var(--line-height)*var(--min-rows) + var(--padding)*2);max-height:calc(var(--line-height)*var(--max-rows) + var(--padding)*2)}[data-bspk=textarea] textarea{--border-color: var(--stroke-neutral-base);resize:vertical;color:var(--foreground-neutral-on-surface);background-color:var(--surface-neutral-t1-base);border-radius:var(--radius-small)}[data-bspk=textarea] textarea:focus-within{--border-color: var(--stroke-neutral-focus);outline:none;color:var(--foreground-neutral-on-surface)}[data-bspk=textarea] textarea:disabled{pointer-events:none;background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=textarea] textarea:read-only{background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));color:var(--foreground-neutral-on-surface-variant-02);cursor:not-allowed}[data-bspk=textarea] textarea[aria-invalid]{--border-color: var(--status-error)}
+*/display:grid;width:100%;--font: var(--body-base);--line-height: 20px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea][data-size=small]{--font: var(--body-small);--line-height: 20px;--padding: var(--spacing-sizing-02)}[data-bspk=textarea][data-size=large]{--font: var(--body-large);--line-height: 24px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea] [data-replicated-value]{white-space:pre-wrap;visibility:hidden}[data-bspk=textarea] textarea,[data-bspk=textarea] [data-replicated-value]{width:100%;font:var(--font);border:1px solid var(--border-color);padding:var(--padding);grid-area:1/1/2/2;min-height:calc(var(--line-height)*var(--min-rows) + var(--padding)*2);max-height:calc(var(--line-height)*var(--max-rows) + var(--padding)*2)}[data-bspk=textarea] textarea{--border-color: var(--stroke-neutral-base);resize:none;color:var(--foreground-neutral-on-surface);background-color:var(--surface-neutral-t1-base);border-radius:var(--radius-small)}[data-bspk=textarea] textarea::placeholder{color:var(--foreground-neutral-on-surface-variant-03)}[data-bspk=textarea] textarea:focus-within{--border-color: var(--stroke-neutral-focus);outline:none;color:var(--foreground-neutral-on-surface)}[data-bspk=textarea] textarea:disabled{pointer-events:none;background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=textarea] textarea:read-only{background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));cursor:not-allowed}[data-bspk=textarea] textarea[aria-invalid]{--border-color: var(--status-error)}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.1.13",
+    "version": "1.1.15",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [
@@ -19,7 +19,7 @@
         "sass": "sass --style=compressed --no-source-map src:dist",
         "build": "tsx build.ts",
         "lint:css": "npx stylelint '**/*.scss'",
-        "lint": "eslint",
+        "lint": "eslint && tsc --noEmit && stylelint '**/*.scss'",
         "lint:fix": "eslint --fix",
         "semantic-release": "semantic-release",
         "test": "jest",

package/src/Checkbox.tsx

@@ -27,6 +27,8 @@ function Checkbox({
     indeterminate: indeterminateProp,
     invalid,
     disabled,
+    errorMessage,
+
     ...props
 }: ElementProps<CheckboxProps, 'input'>) {
     const indeterminate = !!indeterminateProp;
@@ -46,6 +48,7 @@ function Checkbox({
         >
             <input
                 {...props}
+                aria-errormessage={errorMessage || undefined}
                 aria-invalid={invalid || undefined}
                 checked={checked}
                 disabled={disabled || undefined}

package/src/CheckboxOption.tsx

@@ -1,10 +1,10 @@
 import { CheckboxProps, Checkbox } from './Checkbox';
 import { ToggleOptionProps, ToggleOption } from './ToggleOption';
 
-export type CheckboxOptionProps = Pick<
-    CheckboxProps,
-    'checked' | 'disabled' | 'indeterminate' | 'invalid' | 'name' | 'onChange' | 'value'
-> &
+import { InvalidPropsLibrary } from '.';
+
+export type CheckboxOptionProps = InvalidPropsLibrary &
+    Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'name' | 'onChange' | 'value'> &
     Pick<ToggleOptionProps, 'description' | 'label'>;
 
 /**

package/src/Dropdown.tsx

@@ -8,7 +8,7 @@ import { Placement } from './hooks/useFloating';
 import { useFloatingMenu } from './hooks/useFloatingMenu';
 import { useId } from './hooks/useId';
 
-import { CommonProps } from './';
+import { CommonProps, InvalidPropsLibrary } from './';
 
 export type DropdownOption = {
     /** The value of the option. */
@@ -18,8 +18,9 @@ export type DropdownOption = {
 };
 
 export type DropdownProps<O extends DropdownOption = DropdownOption> = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'
+    'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'
 > &
+    InvalidPropsLibrary &
     Pick<MenuProps<O>, 'isMulti' | 'itemCount' | 'onChange' | 'renderListItem'> & {
         /**
          * Array of options to display in the dropdown
@@ -66,6 +67,7 @@ function Dropdown<O extends DropdownOption = DropdownOption>({
     disabled,
     id: propId,
     invalid,
+    errorMessage,
     readOnly,
     placement = 'bottom',
     name,
@@ -81,6 +83,7 @@ function Dropdown<O extends DropdownOption = DropdownOption>({
             disabled,
             invalid,
             readOnly,
+            errorMessage,
         },
     });
 

package/src/FormField.tsx

@@ -3,7 +3,7 @@ import { InlineAlert } from './InlineAlert';
 import { Layout } from './Layout';
 import { Txt } from './Txt';
 
-import { CommonProps } from './';
+import { CommonProps, InvalidPropsLibrary } from './';
 
 export type FieldControlProps = {
     /**
@@ -18,27 +18,29 @@ export type FieldControlProps = {
     'aria-errormessage'?: string;
 };
 
-export type FormFieldProps = CommonProps<'errorMessage' | 'required'> & {
-    /**
-     * The label of the field.
-     *
-     * @required
-     */
-    label: string;
-    /** The id of the control. */
-    controlId: string;
-    /**
-     * The children of the form field. This should be a control such as TextInput, Dropdown, DatePicker, or TimePicker.
-     *
-     * @type (childProps: FieldControlProps) => JSX.Element
-     * @required
-     */
-    children: (childProps: FieldControlProps) => JSX.Element;
-    /** The helperText of the field. */
-    helperText?: string;
-    /** The trailing element of the label. */
-    labelTrailing?: React.ReactNode;
-};
+export type FormFieldProps = CommonProps<'required'> &
+    InvalidPropsLibrary & {
+        /**
+         * The label of the field.
+         *
+         * @required
+         */
+        label: string;
+        /** The id of the control. */
+        controlId: string;
+        /**
+         * The children of the form field. This should be a control such as TextInput, Dropdown, DatePicker, or
+         * TimePicker.
+         *
+         * @type (childProps: FieldControlProps) => JSX.Element
+         * @required
+         */
+        children: (childProps: FieldControlProps) => JSX.Element;
+        /** The helperText of the field. */
+        helperText?: string;
+        /** The trailing element of the label. */
+        labelTrailing?: React.ReactNode;
+    };
 
 /**
  * Wrapper component for form controls.
@@ -47,14 +49,23 @@ export type FormFieldProps = CommonProps<'errorMessage' | 'required'> & {
  *
  * @name FormField
  */
-function FormField({ label, errorMessage, helperText, children, labelTrailing, controlId, required }: FormFieldProps) {
+function FormField({
+    label,
+    invalid,
+    errorMessage,
+    helperText,
+    children,
+    labelTrailing,
+    controlId,
+    required,
+}: FormFieldProps) {
     const errorMessageId = errorMessage && `${controlId}-error-message`;
     const helperTextId = helperText && `${controlId}-helper-text`;
 
     if (typeof children !== 'function') return null;
 
     return (
-        <div data-bspk="form-field">
+        <div data-bspk="form-field" data-invalid={invalid || undefined}>
             <Layout as="header">
                 <label htmlFor={controlId}>
                     <Txt as="span" variant="labels-small">

package/src/Link.tsx

@@ -4,31 +4,34 @@ import { SvgOpenInNew } from '@bspk/icons/OpenInNew';
 import './link.scss';
 import { AnchorHTMLAttributes } from 'react';
 
-export type LinkProps = Pick<AnchorHTMLAttributes<unknown>, 'target'> & {
-    /**
-     * The label of the link.
-     *
-     * @required
-     */
-    label: string;
-    /** The variant of the link. Controls the icon that is displayed and link target. */
-    trailingIcon?: 'chevron' | 'external' | 'link';
-    /** The [href](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href) of the link. */
-    href: AnchorHTMLAttributes<unknown>['href'];
-    /**
-     * The size of the link.
-     *
-     * @default base
-     */
-    size?: 'base' | 'large' | 'small';
-    /**
-     * Change the color of the link to a subtle color. This is useful for links that are not primary actions, for
-     * example footer menus.
-     *
-     * @default default
-     */
-    variant?: 'default' | 'subtle-inverse' | 'subtle';
-};
+import { CommonPropsLibrary } from '.';
+
+export type LinkProps = Pick<AnchorHTMLAttributes<unknown>, 'target'> &
+    Pick<CommonPropsLibrary, 'disabled'> & {
+        /**
+         * The label of the link.
+         *
+         * @required
+         */
+        label: string;
+        /** The variant of the link. Controls the icon that is displayed and link target. */
+        trailingIcon?: 'chevron' | 'external' | 'link';
+        /** The [href](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href) of the link. */
+        href: AnchorHTMLAttributes<unknown>['href'];
+        /**
+         * The size of the link.
+         *
+         * @default base
+         */
+        size?: 'base' | 'large' | 'small';
+        /**
+         * Change the color of the link to a subtle color. This is useful for links that are not primary actions, for
+         * example footer menus.
+         *
+         * @default default
+         */
+        variant?: 'default' | 'subtle-inverse' | 'subtle';
+    };
 
 /**
  * This is the standalone link component. Inline links can use the native `a` element.

package/src/ListItem.tsx

@@ -81,6 +81,7 @@ function ListItem<As extends ElementType = 'div'>({
     subText,
     active,
     readOnly,
+    errorMessage,
     ...props
 }: ElementProps<ListItemProps<As>, As>) {
     let As: ElementType = as || 'div';
@@ -120,6 +121,7 @@ function ListItem<As extends ElementType = 'div'>({
         <As
             {...props}
             aria-disabled={disabled || undefined}
+            aria-errormessage={errorMessage || undefined}
             aria-invalid={invalid || undefined}
             data-action={actionable || undefined}
             data-active={active || undefined}

package/src/NumberField.tsx

@@ -1,11 +1,11 @@
 import { FormFieldProps, FormField } from './FormField';
 import { NumberInputProps, NumberInput } from './NumberInput';
 
-export type NumberFieldProps = Pick<
-    NumberInputProps,
-    'centered' | 'disabled' | 'id' | 'invalid' | 'name' | 'onChange' | 'readOnly' | 'size' | 'value'
-> &
-    Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing' | 'required'>;
+import { InvalidPropsLibrary } from '.';
+
+export type NumberFieldProps = InvalidPropsLibrary &
+    Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing' | 'required'> &
+    Pick<NumberInputProps, 'align' | 'disabled' | 'id' | 'name' | 'onChange' | 'readOnly' | 'size' | 'value'>;
 
 /**
  * A input element that allows users to either input a numerical value or singularly increase or decrease the values by

package/src/NumberInput.tsx

@@ -5,7 +5,14 @@ import './number-input.scss';
 import { useId } from './hooks/useId';
 import { useLongPress } from './hooks/useLongPress';
 
-import { CommonProps } from '.';
+import { CommonProps, InvalidPropsLibrary } from '.';
+
+const DEFAULT = {
+    align: 'center',
+    size: 'medium',
+    disabled: false,
+    readOnly: false,
+} as const;
 
 function isNumber(value: unknown): number | undefined {
     if (typeof value === 'number') return value;
@@ -14,43 +21,51 @@ function isNumber(value: unknown): number | undefined {
     return isNaN(num) ? undefined : num;
 }
 
-export type NumberInputProps = CommonProps<
-    'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'
-> & {
-    /**
-     * The value of the control.
-     *
-     * @required
-     */
-    value?: number;
-    /** Callback when the value changes. */
-    onChange: (value: number) => void;
-    /**
-     * If the value should be centered between the up & down buttons.
-     *
-     * @default false
-     */
-    centered?: boolean;
-    /** Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is accepted. */
-    max?: number;
-    /** Defines the [minimum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) value that is accepted. */
-    min?: number;
-};
+export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'> &
+    InvalidPropsLibrary & {
+        /** The value of the control. */
+        value?: number;
+        /** Callback when the value changes. */
+        onChange: (value: number | undefined) => void;
+        /**
+         * The alignment of the input box. Centered between the plus and minus buttons or to the left of the buttons.
+         *
+         * @default center
+         */
+        align?: 'center' | 'left';
+        /**
+         * Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is
+         * accepted.
+         *
+         * @default 99
+         * @maximum 99
+         * @minimum 1
+         */
+        max?: number;
+        /**
+         * Defines the [minimum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) value that is
+         * accepted.
+         *
+         * @minimum 0
+         */
+        min?: number;
+    };
 
 /**
  * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
  * pressing the (+) or (-).
  *
+ * The value of the input is a number. The value is clamped to the min and max values if they are provided.
+ *
  * @name NumberInput
  */
 function NumberInput({
-    //
-    value = 1,
+    value,
     onChange,
-    centered = false,
-    size = 'medium',
-    disabled = false,
-    readOnly = false,
+    align = DEFAULT.align,
+    size = DEFAULT.size,
+    disabled = DEFAULT.disabled,
+    readOnly = DEFAULT.readOnly,
     name,
     id: inputIdProp,
     invalid,
@@ -58,11 +73,17 @@ function NumberInput({
     max: maxProp,
     min: minProp,
 }: NumberInputProps) {
+    const centered = align !== 'left';
     const inputId = useId(inputIdProp);
     const max = isNumber(maxProp);
     const min = isNumber(minProp);
 
-    const fix = (next: number = value) => {
+    const fix = (next: number | undefined = value) => {
+        if (typeof next !== 'number') {
+            onChange(undefined);
+            return;
+        }
+
         let fixValue = next;
         if (typeof min !== 'undefined' && next < min) fixValue = min;
         if (typeof max !== 'undefined' && next > max) fixValue = max;

package/src/Radio.tsx

@@ -1,10 +1,8 @@
 import './radio.scss';
-import { ToggleControlProps, ElementProps } from './';
+import { ToggleControlProps, ElementProps, InvalidPropsLibrary } from './';
 
-export type RadioProps = Pick<
-    ToggleControlProps<HTMLInputElement>,
-    'aria-label' | 'checked' | 'disabled' | 'invalid' | 'name' | 'onChange' | 'value'
->;
+export type RadioProps = InvalidPropsLibrary &
+    Pick<ToggleControlProps<HTMLInputElement>, 'aria-label' | 'checked' | 'disabled' | 'name' | 'onChange' | 'value'>;
 
 /**
  * A round control that allows user to choose one option from a set. This is the base element and if used directly you

package/src/RadioOption.tsx

@@ -1,7 +1,10 @@
 import { RadioProps, Radio } from './Radio';
 import { ToggleOptionProps, ToggleOption } from './ToggleOption';
 
-export type RadioOptionProps = Pick<RadioProps, 'checked' | 'disabled' | 'invalid' | 'name' | 'onChange' | 'value'> &
+import { InvalidPropsLibrary } from '.';
+
+export type RadioOptionProps = InvalidPropsLibrary &
+    Pick<RadioProps, 'checked' | 'disabled' | 'name' | 'onChange' | 'value'> &
     Pick<ToggleOptionProps, 'description' | 'label'>;
 
 /**

package/src/SegmentedControl.tsx

@@ -2,11 +2,11 @@ import './segmented-control.scss';
 import { Fragment } from 'react';
 
 import { Tooltip } from './Tooltip';
-import { useNavOptions } from './hooks/useNavOptions';
+import { useOptionIconsInvalid } from './hooks/useOptionIconsInvalid';
 
 import { ElementProps } from './';
 
-export type SegmentedToggleOption = {
+export type SegmentedControlOption = {
     /**
      * The label of the option. This is the text that will be displayed on the option.
      *
@@ -30,18 +30,22 @@ export type SegmentedControlProps = {
     /**
      * The options to display. Each option has a label and an optional leading icon.
      *
-     * @type SegmentedToggleOption[]
+     * @type SegmentedControlOption[]
      * @required
      */
-    options: SegmentedToggleOption[];
-    /** The id of the selected option. */
-    value?: SegmentedToggleOption['value'];
+    options: SegmentedControlOption[];
+    /**
+     * The id of the selected option.
+     *
+     * @required
+     */
+    value: SegmentedControlOption['value'];
     /**
      * The function to call when the option is clicked.
      *
      * @required
      */
-    onChange: (value: SegmentedToggleOption['value']) => void;
+    onChange: (value: SegmentedControlOption['value']) => void;
     /**
      * The size of the options.
      *
@@ -73,18 +77,19 @@ function SegmentedControl({
     onChange,
     value,
     size = 'medium',
-    options,
+    options: optionsProp,
     width = 'hug',
     showLabels: showLabelsProp = true,
     ...containerProps
 }: ElementProps<SegmentedControlProps, 'div'>) {
-    const items = useNavOptions(options);
+    const options = Array.isArray(optionsProp) ? optionsProp : [];
+    useOptionIconsInvalid(options);
 
-    const hideLabels = showLabelsProp === false && items.every((item) => item.icon && item.label);
+    const hideLabels = showLabelsProp === false && options.every((item) => item.icon && item.label);
 
     return (
         <div {...containerProps} data-bspk="segmented-control" data-size={size} data-width={width}>
-            {items.map((item, index) => {
+            {options.map((item, index) => {
                 const isActive = item.value === value;
                 return (
                     <Fragment key={item.value}>
@@ -92,10 +97,10 @@ function SegmentedControl({
                             <button
                                 aria-label={item.label}
                                 data-first={index === 0 || undefined}
-                                data-last={index === items.length - 1 || undefined}
+                                data-last={index === options.length - 1 || undefined}
                                 data-selected={isActive || undefined}
                                 disabled={item.disabled || undefined}
-                                onClick={() => onChange(item.value)}
+                                onClick={() => onChange(item.value || item.label)}
                             >
                                 <span data-outer>
                                     <span data-inner>