@bspk/ui 1.1.12 → 1.1.14

package/dist/Textarea.js

@@ -14,7 +14,7 @@ const MAX_ROWS = 10;
  *
  * @name Textarea
  */
-function Textarea({ invalid: invalidProp, onChange, size = 'medium', value = '', name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows: minRowsProp = MIN_ROWS, maxRows: maxRowsProp = MAX_ROWS, ...otherProps }) {
+function Textarea({ invalid: invalidProp, onChange, size = 'medium', value = '', name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows: minRowsProp = MIN_ROWS, maxRows: maxRowsProp = MAX_ROWS, errorMessage, ...otherProps }) {
     const id = useId(idProp);
     const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
     // ensure minRows and maxRows are within bounds
@@ -23,7 +23,7 @@ function Textarea({ invalid: invalidProp, onChange, size = 'medium', value = '',
     return (_jsxs("div", { "data-bspk": "textarea", "data-size": size, style: {
             '--min-rows': minRows,
             '--max-rows': maxRows,
-        }, children: [_jsx("textarea", { ...otherProps, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, id: id, name: name, onBlur: (event) => {
+        }, children: [_jsx("textarea", { ...otherProps, "aria-errormessage": errorMessage || undefined, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, id: id, name: name, onBlur: (event) => {
                     const target = event.target;
                     target.scrollTop = 0;
                 }, onChange: (event) => onChange(event.target.value, event), onInput: (event) => {

package/dist/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../src/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAoDtC,MAAM,QAAQ,GAAG,CAAC,CAAC;AACnB,MAAM,QAAQ,GAAG,EAAE,CAAC;AAEpB;;;;;;GAMG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,WAAW,GAAG,QAAQ,EAC/B,OAAO,EAAE,WAAW,GAAG,QAAQ,EAC/B,GAAG,UAAU,EACD;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,OAAO,GAAG,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,WAAW,CAAC;IAC5E,+CAA+C;IAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IACpE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpE,OAAO,CACH,4BACc,UAAU,eACT,IAAI,EACf,KAAK,EACD;YACI,YAAY,EAAE,OAAO;YACrB,YAAY,EAAE,OAAO;SACP,aAGtB,sBACQ,UAAU,kBACA,OAAO,IAAI,SAAS,gBACtB,SAAS,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;oBACd,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;oBACnD,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC;gBACzB,CAAC,EACD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EACxD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACf,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;oBACnD,qEAAqE;oBACrE,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM;wBAAE,OAAO;oBAC/B,MAAM,CAAC,WAA2B,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;gBACxE,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,GACd,EACF,mEAAyC,IACvC,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../src/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAqDtC,MAAM,QAAQ,GAAG,CAAC,CAAC;AACnB,MAAM,QAAQ,GAAG,EAAE,CAAC;AAEpB;;;;;;GAMG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,WAAW,GAAG,QAAQ,EAC/B,OAAO,EAAE,WAAW,GAAG,QAAQ,EAC/B,YAAY,EACZ,GAAG,UAAU,EACD;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,OAAO,GAAG,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,WAAW,CAAC;IAC5E,+CAA+C;IAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IACpE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpE,OAAO,CACH,4BACc,UAAU,eACT,IAAI,EACf,KAAK,EACD;YACI,YAAY,EAAE,OAAO;YACrB,YAAY,EAAE,OAAO;SACP,aAGtB,sBACQ,UAAU,uBACK,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,gBACtB,SAAS,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;oBACd,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;oBACnD,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC;gBACzB,CAAC,EACD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EACxD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACf,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;oBACnD,qEAAqE;oBACrE,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM;wBAAE,OAAO;oBAC/B,MAAM,CAAC,WAA2B,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;gBACxE,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,GACd,EACF,mEAAyC,IACvC,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/form-field.css

@@ -1 +1 @@
-[data-bspk=form-field]{box-sizing:border-box;width:100%;display:flex;flex-direction:column;gap:var(--spacing-sizing-01)}[data-bspk=form-field] header label{flex-grow:1}
+[data-bspk=form-field]{box-sizing:border-box;max-width:100%;width:fit-content;display:flex;flex-direction:column;gap:var(--spacing-sizing-01)}[data-bspk=form-field] header label{flex-grow:1}

package/dist/hooks/useFloatingMenu.d.ts

@@ -1,9 +1,9 @@
 import { AriaAttributes } from 'react';
-import { CommonProps } from '..';
+import { CommonProps, InvalidPropsLibrary } from '..';
 import { Placement } from './useFloating';
 export type UseFloatingMenuProps = {
     placement: Placement;
-    triggerProps?: CommonProps<'disabled' | 'invalid' | 'readOnly'>;
+    triggerProps?: CommonProps<'disabled' | 'readOnly'> & InvalidPropsLibrary;
 };
 export type UseFloatingMenuReturn = {
     menuProps: {
@@ -23,6 +23,7 @@ export type UseFloatingMenuReturn = {
         'aria-invalid': boolean | undefined;
         'aria-owns': string;
         'aria-readonly': boolean | undefined;
+        'aria-errormessage': string | undefined;
         role: 'combobox';
         tabIndex: number;
         ref: (node: HTMLElement | null) => void;

package/dist/hooks/useFloatingMenu.js

@@ -35,6 +35,7 @@ export function useFloatingMenu({ placement, triggerProps }) {
             tabIndex: -1,
         },
         triggerProps: {
+            'aria-errormessage': triggerProps?.errorMessage || undefined,
             'aria-activedescendant': selectedId || undefined,
             'aria-controls': menuId,
             'aria-expanded': show,

package/dist/hooks/useFloatingMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingMenu.js","sourceRoot":"","sources":["../../src/hooks/useFloatingMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,OAAO,EAAa,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAkCpD,MAAM,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,YAAY,EAAwB;IAC7E,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IACvC,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAErC,MAAM,EAAE,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,WAAW,CAAC;QAC7D,SAAS;QACT,QAAQ,EAAE,OAAO;QACjB,aAAa,EAAE,CAAC;QAChB,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,CAAC,IAAI;KACd,CAAC,CAAC;IAEH,MAAM,EAAE,mBAAmB,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,qBAAqB,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEjH,eAAe,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,EAAE;QAC7D,KAAK,EAAE,eAAe,EAAE,CAAC;QACzB,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,SAAS,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,OAAO;QACH,SAAS,EAAE;YACP,WAAW;YACX,gBAAgB,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS;YACnD,EAAE,EAAE,MAAM;YACV,QAAQ,EAAE,CAAC,IAAwB,EAAE,EAAE;gBACnC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC;YACD,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,cAAc;YACrB,QAAQ,EAAE,CAAC,CAAC;SACf;QACD,YAAY,EAAE;YACV,uBAAuB,EAAE,UAAU,IAAI,SAAS;YAChD,eAAe,EAAE,MAAM;YACvB,eAAe,EAAE,IAAI;YACrB,eAAe,EAAE,SAA4C;YAC7D,cAAc,EAAE,YAAY,EAAE,OAAO,IAAI,SAAS;YAClD,WAAW,EAAE,MAAM;YACnB,eAAe,EAAE,YAAY,EAAE,QAAQ,IAAI,SAAS;YACpD,IAAI,EAAE,UAAU;YAChB,QAAQ,EAAE,CAAC;YACX,GAAG,EAAE,CAAC,IAAwB,EAAE,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC;YAC5D,OAAO,EAAE,GAAG,EAAE;gBACV,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;YAC7B,CAAC;YACD;;;eAGG;YACH,gBAAgB,EAAE,CAAC,KAA0B,EAAW,EAAE;gBACtD,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,CAAC,MAAM,EAAE,CAAC;oBAChE,SAAS,EAAE,CAAC;oBACZ,OAAO,IAAI,CAAC;gBAChB,CAAC;gBAED,QAAQ,EAAE,CAAC;gBAEX,OAAO,mBAAmB,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACpD,CAAC;SACJ;QACD,SAAS;KACZ,CAAC;AACN,CAAC;AAED,sDAAsD"}
+{"version":3,"file":"useFloatingMenu.js","sourceRoot":"","sources":["../../src/hooks/useFloatingMenu.ts"],"names":[],"mappings":"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"}

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/meta-types.ts

@@ -6,11 +6,11 @@ export type BaseMeta = {
     name: string;
     description?: string;
     file?: string;
+    example?: string;
 };
 
 export type TypeMeta = BaseMeta & {
     id: string;
-    example?: string;
     references?: string[];
     properties?: TypeProperty[];
 };
@@ -35,12 +35,15 @@ export type ComponentMeta = BaseMeta & {
     modified: string;
     css: string;
     hasTouchTarget: boolean;
+    usage?: {
+        code: string;
+        description?: string;
+    };
 };
 
 export type UtilityMeta = BaseMeta & {
     param?: string;
     returns?: string;
-    example?: string;
 };
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/meta.ts

@@ -169,6 +169,13 @@ function generateComponentMeta({
 
     const css = fs.existsSync(cssPath) ? fs.readFileSync(cssPath, { encoding: 'utf-8' }) : '';
 
+    const usage = componentDoc.example
+        ? {
+              code: componentDoc.example,
+              description: componentDoc.exampleDescription,
+          }
+        : undefined;
+
     return {
         description: componentDoc.description,
         file: componentFile.split(componentsDir)[1],
@@ -176,6 +183,7 @@ function generateComponentMeta({
         slug,
         dependencies,
         modified: stats.mtime.toISOString(),
+        usage,
         css,
         hasTouchTarget: css.includes('data-touch-target'),
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.1.12",
+    "version": "1.1.14",
     "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/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,7 @@ import './number-input.scss';
 import { useId } from './hooks/useId';
 import { useLongPress } from './hooks/useLongPress';
 
-import { CommonProps } from '.';
+import { CommonProps, InvalidPropsLibrary } from '.';
 
 function isNumber(value: unknown): number | undefined {
     if (typeof value === 'number') return value;
@@ -14,40 +14,53 @@ 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.
+         *
+         * @required
+         */
+        value?: number;
+        /** Callback when the value changes. */
+        onChange: (value: number) => 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,
     onChange,
-    centered = false,
+    align = 'center',
     size = 'medium',
     disabled = false,
     readOnly = false,
@@ -58,6 +71,7 @@ function NumberInput({
     max: maxProp,
     min: minProp,
 }: NumberInputProps) {
+    const centered = align !== 'left';
     const inputId = useId(inputIdProp);
     const max = isNumber(maxProp);
     const min = isNumber(minProp);

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/Skeleton.tsx

@@ -5,13 +5,13 @@ import { TxtVariant } from './utils/txtVariants';
 
 export type SkeletonProps = {
     /**
-     * The text variant of the skeleton.
+     * The variant of the skeleton that best hints the content being loaded.
      *
      * @default text
      */
     variant?: 'circular' | 'photo' | 'profile' | 'rectangular' | 'text' | 'thumbnail';
     /**
-     * The size of the text. This is only used when variant is 'text'.
+     * The variant of the text being loaded. This is only used when variant is 'text'.
      *
      * @default body-base
      */
@@ -39,6 +39,28 @@ export type SkeletonProps = {
 /**
  * A visual placeholder for an element while it is in a loading state.
  *
+ * The data for your components might not be immediately available. You can improve the perceived responsiveness of the
+ * page by using skeletons. It feels like things are happening immediately, then the information is incrementally
+ * displayed on the screen.
+ *
+ * @example
+ *     function Example() {
+ *         return item ? (
+ *             <img
+ *                 style={{
+ *                     width: 210,
+ *                     height: 118,
+ *                 }}
+ *                 alt={item.title}
+ *                 src={item.src}
+ *             />
+ *         ) : (
+ *             <Skeleton variant="photo" width={210} height={118} />
+ *         );
+ *     }
+ *
+ * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
+ *
  * @name Skeleton
  */
 function Skeleton({

package/src/TextField.tsx

@@ -1,23 +1,25 @@
 import { FormFieldProps, FormField } from './FormField';
 import { TextInputProps, TextInput } from './TextInput';
 
-export type TextFieldProps = Pick<
-    TextInputProps,
-    | 'autoComplete'
-    | 'disabled'
-    | 'inputRef'
-    | 'invalid'
-    | 'leading'
-    | 'name'
-    | 'onChange'
-    | 'placeholder'
-    | 'readOnly'
-    | 'required'
-    | 'size'
-    | 'trailing'
-    | 'type'
-    | 'value'
-> &
+import { InvalidPropsLibrary } from '.';
+
+export type TextFieldProps = InvalidPropsLibrary &
+    Pick<
+        TextInputProps,
+        | 'autoComplete'
+        | 'disabled'
+        | 'inputRef'
+        | 'leading'
+        | 'name'
+        | 'onChange'
+        | 'placeholder'
+        | 'readOnly'
+        | 'required'
+        | 'size'
+        | 'trailing'
+        | 'type'
+        | 'value'
+    > &
     Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing'>;
 
 /**