@bspk/ui 1.2.0 → 1.3.0

package/dist/components/FileUploadItem/FileUploadItemExample.js

@@ -3,6 +3,49 @@ import { useState } from 'react';
 import { FileUploadItem } from './FileUploadItem';
 import { useTimeout } from '../../hooks/useTimeout';
 import { randomNumber } from '../../utils/random';
+export const presets = [
+    {
+        label: 'long file name',
+        propState: {
+            fileName: 'I-think-this-is-a-long-file-name.txt',
+            status: 'uploading',
+            cancelButtonLabel: 'Close',
+            fileSize: 10,
+            id: '10',
+        },
+    },
+    {
+        label: 'state: uploading',
+        propState: {
+            fileName: 'basic-file.png',
+            status: 'uploading',
+            fileSize: 1.2,
+            cancelButtonLabel: 'Cancel',
+            id: '1.2',
+        },
+    },
+    {
+        label: 'state: success',
+        propState: {
+            fileName: 'success-story.pdf',
+            status: 'complete',
+            cancelButtonLabel: 'Bye',
+            fileSize: 42,
+            id: '42',
+        },
+    },
+    {
+        label: 'state: failed',
+        propState: {
+            fileName: 'file-name.txt',
+            status: 'error',
+            errorMessage: 'File too large. Please upload a smaller file.',
+            cancelButtonLabel: 'Escape',
+            fileSize: 10000000,
+            id: '10000000',
+        },
+    },
+];
 export const FileUploadItemExample = ({ action }) => ({
     render: ({ props, preset }) => {
         let progress = props.progress;
@@ -10,45 +53,7 @@ export const FileUploadItemExample = ({ action }) => ({
             progress = 100;
         return (_jsx(FileUploadItemExampleRender, { ...props, onCancel: () => action('Cancel action clicked!'), progress: progress }, preset?.label));
     },
-    presets: [
-        {
-            label: 'long file name',
-            propState: {
-                fileName: 'I-think-this-is-a-long-file-name.txt',
-                status: 'uploading',
-                cancelButtonLabel: 'Close',
-                fileSize: 10,
-            },
-        },
-        {
-            label: 'state: uploading',
-            propState: {
-                fileName: 'basic-file.png',
-                status: 'uploading',
-                fileSize: 1.2,
-                cancelButtonLabel: 'Cancel',
-            },
-        },
-        {
-            label: 'state: success',
-            propState: {
-                fileName: 'success-story.pdf',
-                status: 'complete',
-                cancelButtonLabel: 'Bye',
-                fileSize: 42,
-            },
-        },
-        {
-            label: 'state: failed',
-            propState: {
-                fileName: 'file-name.txt',
-                status: 'error',
-                errorMessage: 'File too large. Please upload a smaller file.',
-                cancelButtonLabel: 'Escape',
-                fileSize: 10000000,
-            },
-        },
-    ],
+    presets,
     variants: false,
 });
 function FileUploadItemExampleRender({ progress, ...props }) {

package/dist/components/FileUploadItem/FileUploadItemExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadItemExample.js","sourceRoot":"","sources":["../../../src/components/FileUploadItem/FileUploadItemExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,qBAAqB,GAA4C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3F,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;QAC1B,IAAI,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAE9B,IAAI,MAAM,EAAE,KAAK,KAAK,gBAAgB;YAAE,QAAQ,GAAG,GAAG,CAAC;QAEvD,OAAO,CACH,KAAC,2BAA2B,OAEpB,KAAK,EACT,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,wBAAwB,CAAC,EAChD,QAAQ,EAAE,QAAQ,IAHb,MAAM,EAAE,KAAK,CAIpB,CACL,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,gBAAgB;YACvB,SAAS,EAAE;gBACP,QAAQ,EAAE,sCAAsC;gBAChD,MAAM,EAAE,WAAW;gBACnB,iBAAiB,EAAE,OAAO;gBAC1B,QAAQ,EAAE,EAAE;aACf;SACJ;QACD;YACI,KAAK,EAAE,kBAAkB;YACzB,SAAS,EAAE;gBACP,QAAQ,EAAE,gBAAgB;gBAC1B,MAAM,EAAE,WAAW;gBACnB,QAAQ,EAAE,GAAG;gBACb,iBAAiB,EAAE,QAAQ;aAC9B;SACJ;QACD;YACI,KAAK,EAAE,gBAAgB;YACvB,SAAS,EAAE;gBACP,QAAQ,EAAE,mBAAmB;gBAC7B,MAAM,EAAE,UAAU;gBAClB,iBAAiB,EAAE,KAAK;gBACxB,QAAQ,EAAE,EAAE;aACf;SACJ;QACD;YACI,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE;gBACP,QAAQ,EAAE,eAAe;gBACzB,MAAM,EAAE,OAAO;gBACf,YAAY,EAAE,+CAA+C;gBAC7D,iBAAiB,EAAE,QAAQ;gBAC3B,QAAQ,EAAE,QAAQ;aACrB;SACJ;KACJ;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC;AAEH,SAAS,2BAA2B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuB;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,MAAM,cAAc,GAAG,CAAC,gBAAwB,EAAE,EAAE,CAAC,GAAG,EAAE;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,GAAG,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;QAC/E,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,IAAI,IAAI,GAAG,GAAG;YAAE,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,IAAI,KAAK,CAAC,MAAM,KAAK,WAAW;QAAE,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IAEjF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,QAAQ,EAAE,WAAW,GAAI,CAAC;AAChE,CAAC"}
+{"version":3,"file":"FileUploadItemExample.js","sourceRoot":"","sources":["../../../src/components/FileUploadItem/FileUploadItemExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,OAAO,GAAkC;IAClD;QACI,KAAK,EAAE,gBAAgB;QACvB,SAAS,EAAE;YACP,QAAQ,EAAE,sCAAsC;YAChD,MAAM,EAAE,WAA+B;YACvC,iBAAiB,EAAE,OAAO;YAC1B,QAAQ,EAAE,EAAE;YACZ,EAAE,EAAE,IAAI;SACX;KACJ;IACD;QACI,KAAK,EAAE,kBAAkB;QACzB,SAAS,EAAE;YACP,QAAQ,EAAE,gBAAgB;YAC1B,MAAM,EAAE,WAA+B;YACvC,QAAQ,EAAE,GAAG;YACb,iBAAiB,EAAE,QAAQ;YAC3B,EAAE,EAAE,KAAK;SACZ;KACJ;IACD;QACI,KAAK,EAAE,gBAAgB;QACvB,SAAS,EAAE;YACP,QAAQ,EAAE,mBAAmB;YAC7B,MAAM,EAAE,UAA8B;YACtC,iBAAiB,EAAE,KAAK;YACxB,QAAQ,EAAE,EAAE;YACZ,EAAE,EAAE,IAAI;SACX;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,QAAQ,EAAE,eAAe;YACzB,MAAM,EAAE,OAA2B;YACnC,YAAY,EAAE,+CAA+C;YAC7D,iBAAiB,EAAE,QAAQ;YAC3B,QAAQ,EAAE,QAAQ;YAClB,EAAE,EAAE,UAAU;SACjB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAA4C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3F,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;QAC1B,IAAI,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAE9B,IAAI,MAAM,EAAE,KAAK,KAAK,gBAAgB;YAAE,QAAQ,GAAG,GAAG,CAAC;QAEvD,OAAO,CACH,KAAC,2BAA2B,OAEpB,KAAK,EACT,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,wBAAwB,CAAC,EAChD,QAAQ,EAAE,QAAQ,IAHb,MAAM,EAAE,KAAK,CAIpB,CACL,CAAC;IACN,CAAC;IACD,OAAO;IACP,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC;AAEH,SAAS,2BAA2B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAuB;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,MAAM,cAAc,GAAG,CAAC,gBAAwB,EAAE,EAAE,CAAC,GAAG,EAAE;QACtD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,GAAG,YAAY,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;QAC/E,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,IAAI,IAAI,GAAG,GAAG;YAAE,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,IAAI,KAAK,CAAC,MAAM,KAAK,WAAW;QAAE,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IAEjF,OAAO,KAAC,cAAc,OAAK,KAAK,EAAE,QAAQ,EAAE,WAAW,GAAI,CAAC;AAChE,CAAC"}

package/dist/components/FormField/FormField.d.ts

@@ -1,5 +1,5 @@
-import { CommonProps, ElementProps, FormFieldControlProps } from '-/types/common';
 import './form-field.scss';
+import { CommonProps, ElementProps, FormFieldControlProps } from '-/types/common';
 export type FormFieldWrapProps<T extends Record<string, unknown>> = Omit<FormFieldProps, keyof T | 'children'> & Omit<T, 'aria-describedby' | 'aria-errormessage'>;
 export type FormFieldProps = CommonProps<'invalid' | 'required'> & {
     /** The error message to display when the field is invalid. */
@@ -13,7 +13,7 @@ export type FormFieldProps = CommonProps<'invalid' | 'required'> & {
     /** The id of the control. */
     controlId: string;
     /**
-     * The children of the form field. This should be a control such as TextInput, Select, DatePicker, or TimePicker.
+     * The children of the form field. This should be a control such as TextInput, Select, DateInput, or TimeInput.
      *
      * @type (childProps: FormFieldControlProps) => JSX.Element
      * @required
@@ -27,7 +27,7 @@ export type FormFieldProps = CommonProps<'invalid' | 'required'> & {
 /**
  * Wrapper component for form controls.
  *
- * Children may be one of the following: TextInput, Select, DatePicker, or TimePicker.
+ * Children should be one of the following: TextInput, Select, DateInput or TimeInput.
  *
  * @example
  *     import { TextInput } from '@bspk/ui/TextInput';

package/dist/components/FormField/FormField.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './form-field.css.js';
 import { InlineAlert } from '../InlineAlert';
 import { Txt } from '../Txt';
-import './form-field.css.js';
 /**
  * Wrapper component for form controls.
  *
- * Children may be one of the following: TextInput, Select, DatePicker, or TimePicker.
+ * Children should be one of the following: TextInput, Select, DateInput or TimeInput.
  *
  * @example
  *     import { TextInput } from '@bspk/ui/TextInput';

package/dist/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,mBAAmB,CAAC;AA8B3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,SAAS,CAAC,EACtB,KAAK,EACL,OAAO,EACP,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,cAAc,EAC1B,QAAQ,EACR,aAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAC0B;IAClC,MAAM,YAAY,GAAG,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAChF,MAAM,cAAc,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,SAAS,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/E,MAAM,UAAU,GAAG,CAAC,YAAY,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAChF,MAAM,YAAY,GAAG,CAAC,YAAY,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1F,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACH,kBAAS,KAAK,uBAAoB,YAAY,kBAAe,OAAO,IAAI,SAAS,aAC7E,6BACI,iBAAO,OAAO,EAAE,SAAS,aACrB,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,YAChC,KAAK,GACJ,EACL,QAAQ,IAAI,CACT,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,YAAY,YAC9B,aAAa,GACZ,CACT,IACG,EACP,aAAa,IACT,EACR,QAAQ,CAAC;gBACN,kBAAkB,EAAE,YAAY;gBAChC,mBAAmB,EAAE,cAAc;aACtC,CAAC,EACD,YAAY,IAAI,CACb,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,EAAE,OAAO,EAAC,OAAO,YAC3C,YAAY,GACH,CACjB,EACA,UAAU,IAAI,CACX,KAAC,GAAG,IAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAC,YAAY,YACtC,UAAU,GACT,CACT,IACC,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AA+BvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,SAAS,CAAC,EACtB,KAAK,EACL,OAAO,EACP,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,cAAc,EAC1B,QAAQ,EACR,aAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAC0B;IAClC,MAAM,YAAY,GAAG,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAChF,MAAM,cAAc,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,SAAS,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/E,MAAM,UAAU,GAAG,CAAC,YAAY,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAChF,MAAM,YAAY,GAAG,CAAC,YAAY,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1F,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACH,kBAAS,KAAK,uBAAoB,YAAY,kBAAe,OAAO,IAAI,SAAS,aAC7E,6BACI,iBAAO,OAAO,EAAE,SAAS,aACrB,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,YAChC,KAAK,GACJ,EACL,QAAQ,IAAI,CACT,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,YAAY,YAC9B,aAAa,GACZ,CACT,IACG,EACP,aAAa,IACT,EACR,QAAQ,CAAC;gBACN,kBAAkB,EAAE,YAAY;gBAChC,mBAAmB,EAAE,cAAc;aACtC,CAAC,EACD,YAAY,IAAI,CACb,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,EAAE,OAAO,EAAC,OAAO,YAC3C,YAAY,GACH,CACjB,EACA,UAAU,IAAI,CACX,KAAC,GAAG,IAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAC,YAAY,YACtC,UAAU,GACT,CACT,IACC,CACT,CAAC;AACN,CAAC"}

package/dist/components/FormField/form-field.css

@@ -1,16 +1,16 @@
-[data-bspk=form-field] {
+[data-bspk-utility=form-field] {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sizing-01);
 }
-[data-bspk=form-field] header {
+[data-bspk-utility=form-field] header {
   flex-grow: 1;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
-[data-bspk=form-field] header label {
+[data-bspk-utility=form-field] header label {
   flex-grow: 1;
 }
 

package/dist/components/FormField/form-field.css.js

@@ -1,19 +1,19 @@
 /** * This file is generated by the build script.
 * Do not edit this file directly. */
 const style = document.createElement('style');
-style.appendChild(document.createTextNode(`[data-bspk=form-field] {
+style.appendChild(document.createTextNode(`[data-bspk-utility=form-field] {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sizing-01);
 }
-[data-bspk=form-field] header {
+[data-bspk-utility=form-field] header {
   flex-grow: 1;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
-[data-bspk=form-field] header label {
+[data-bspk-utility=form-field] header label {
   flex-grow: 1;
 }
 

package/dist/components/InlineAlert/InlineAlert.d.ts

@@ -1,5 +1,5 @@
-import { AlertVariant } from '-/types/common';
 import './inline-alert.scss';
+import { AlertVariant } from '-/types/common';
 export type InlineAlertProps = {
     /**
      * The content of the inline alert.

package/dist/components/InlineAlert/InlineAlert.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './inline-alert.css.js';
 import { SvgCheckCircleFill } from '@bspk/icons/CheckCircleFill';
 import { SvgErrorFill } from '@bspk/icons/ErrorFill';
 import { SvgInfoFill } from '@bspk/icons/InfoFill';
 import { SvgWarningTwoTone } from './SvgWarningTwoTone';
 import { Txt } from '../Txt';
-import './inline-alert.css.js';
 /**
  * Inline alerts provide contextual feedback messages for typical user actions with a handful of available and flexible
  * alert messages.

package/dist/components/InlineAlert/InlineAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.js","sourceRoot":"","sources":["../../../src/components/InlineAlert/InlineAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,OAAO,qBAAqB,CAAC;AAoB7B;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,eAAe,EAAE,EAAE,EAAoB;IACrF,OAAO,CACH,4BAAe,cAAc,kBAAe,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAC,OAAO,aACpE,YAAY,CAAC,OAAO,CAAC,EACtB,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,QAAQ,GAAO,IACxC,CACT,CAAC;AACN,CAAC;AAED,MAAM,YAAY,GAAoC;IAClD,KAAK,EAAE,KAAC,YAAY,KAAG;IACvB,aAAa,EAAE,KAAC,WAAW,KAAG;IAC9B,OAAO,EAAE,KAAC,kBAAkB,KAAG;IAC/B,OAAO,EAAE,KAAC,iBAAiB,KAAG;CACjC,CAAC"}
+{"version":3,"file":"InlineAlert.js","sourceRoot":"","sources":["../../../src/components/InlineAlert/InlineAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAqBvC;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,eAAe,EAAE,EAAE,EAAoB;IACrF,OAAO,CACH,4BAAe,cAAc,kBAAe,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAC,OAAO,aACpE,YAAY,CAAC,OAAO,CAAC,EACtB,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,QAAQ,GAAO,IACxC,CACT,CAAC;AACN,CAAC;AAED,MAAM,YAAY,GAAoC;IAClD,KAAK,EAAE,KAAC,YAAY,KAAG;IACvB,aAAa,EAAE,KAAC,WAAW,KAAG;IAC9B,OAAO,EAAE,KAAC,kBAAkB,KAAG;IAC/B,OAAO,EAAE,KAAC,iBAAiB,KAAG;CACjC,CAAC"}

package/dist/components/Layout/LayoutExample.d.ts

@@ -1,3 +1,4 @@
 import { LayoutProps } from './Layout';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<LayoutProps>[];
 export declare const LayoutExample: ComponentExample<LayoutProps>;

package/dist/components/Layout/LayoutExample.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const presets = [];
 export const LayoutExample = {
     render: ({ props, Component }) => {
         return (_jsxs(Component, { ...props, children: [_jsx("div", { children: "Alpha" }), _jsx("div", { children: "Beta" }), _jsx("div", { children: "Gamma" })] }));
     },
+    presets,
 };
 //# sourceMappingURL=LayoutExample.js.map

package/dist/components/Layout/LayoutExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutExample.js","sourceRoot":"","sources":["../../../src/components/Layout/LayoutExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,kCAAgB,EAChB,iCAAe,EACf,kCAAgB,IACR,CACf,CAAC;IACN,CAAC;CACJ,CAAC"}
+{"version":3,"file":"LayoutExample.js","sourceRoot":"","sources":["../../../src/components/Layout/LayoutExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAA0B,EAAE,CAAC;AAEjD,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,kCAAgB,EAChB,iCAAe,EACf,kCAAgB,IACR,CACf,CAAC;IACN,CAAC;IACD,OAAO;CACV,CAAC"}

package/dist/components/Link/Link.d.ts

@@ -1,6 +1,6 @@
+import './link.scss';
 import { AnchorHTMLAttributes } from 'react';
 import { CommonPropsLibrary, ElementProps } from '-/types/common';
-import './link.scss';
 export type LinkProps = Pick<CommonPropsLibrary, 'disabled'> & {
     /**
      * The label of the link.

package/dist/components/Link/Link.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { lazy, Suspense } from 'react';
 import './link.css.js';
+import { lazy, Suspense } from 'react';
 /**
  * This is the standalone link component. Inline links can use the native `a` element.
  *

package/dist/components/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,IAAI,EAAuB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjG,OAAO,aAAa,CAAC;AAwCrB;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,KAAK,EAAgC;IACjH,IAAI,QAAQ,GAA4D,SAAS,CAAC;IAElF,IAAI,YAAY,KAAK,UAAU;QAC3B,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IAEhH,IAAI,YAAY,KAAK,SAAS;QAC1B,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CACjB,MAAM,CAAC,0BAA0B,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,eAAe,EAAE,CAAC,CAAC,CAC7F,CAAC;IAEN,IAAI,YAAY,KAAK,MAAM;QACvB,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAEtG,OAAO,CACH,gBACQ,KAAK,eACC,MAAM,eACL,IAAI,iBACF,OAAO,KAAK,QAAQ,IAAI,SAAS,yBACzB,OAAO,KAAK,gBAAgB,IAAI,SAAS,wBAC1C,YAAY,IAAI,SAAS,EAC7C,MAAM,EAAE,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,aAEvD,yBAAO,KAAK,GAAQ,EACnB,QAAQ,IAAI,CACT,KAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI,YACpB,KAAC,QAAQ,KAAG,GACL,CACd,IACD,CACP,CAAC;AACN,CAAC"}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,EAAuC,IAAI,EAAuB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAyCjG;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,KAAK,EAAgC;IACjH,IAAI,QAAQ,GAA4D,SAAS,CAAC;IAElF,IAAI,YAAY,KAAK,UAAU;QAC3B,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IAEhH,IAAI,YAAY,KAAK,SAAS;QAC1B,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CACjB,MAAM,CAAC,0BAA0B,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,eAAe,EAAE,CAAC,CAAC,CAC7F,CAAC;IAEN,IAAI,YAAY,KAAK,MAAM;QACvB,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAEtG,OAAO,CACH,gBACQ,KAAK,eACC,MAAM,eACL,IAAI,iBACF,OAAO,KAAK,QAAQ,IAAI,SAAS,yBACzB,OAAO,KAAK,gBAAgB,IAAI,SAAS,wBAC1C,YAAY,IAAI,SAAS,EAC7C,MAAM,EAAE,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,aAEvD,yBAAO,KAAK,GAAQ,EACnB,QAAQ,IAAI,CACT,KAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI,YACpB,KAAC,QAAQ,KAAG,GACL,CACd,IACD,CACP,CAAC;AACN,CAAC"}

package/dist/components/Link/LinkExample.d.ts

@@ -1,5 +1,6 @@
 import { LinkProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<LinkProps>[];
 export declare const LinkExample: ComponentExample<LinkProps>;
 /**
  * This component demonstrates the different pseudo states of the Link component.

package/dist/components/Link/LinkExample.js

@@ -3,6 +3,7 @@ import { Fragment } from 'react';
 import { Link } from '.';
 import { Txt } from '../Txt';
 import { useId } from '../../hooks/useId';
+export const presets = [];
 export const LinkExample = {
     containerStyle: {
         width: '100%',
@@ -22,6 +23,7 @@ export const LinkExample = {
             content: ({ props }) => _jsx(LinkDemo, { props: props }),
         },
     ],
+    presets,
 };
 /**
  * This component demonstrates the different pseudo states of the Link component.

package/dist/components/Link/LinkExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkExample.js","sourceRoot":"","sources":["../../../src/components/Link/LinkExample.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"LinkExample.js","sourceRoot":"","sources":["../../../src/components/Link/LinkExample.tsx"],"names":[],"mappings":"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"}

package/dist/components/ListItem/ListItem.d.ts

@@ -1,8 +1,8 @@
-import { AnchorHTMLAttributes, ElementType, ReactNode } from 'react';
+import './list-item.scss';
+import { AnchorHTMLAttributes, ElementType, ReactNode, MouseEvent, AriaAttributes, AriaRole } from 'react';
 import { ListItemButton } from './ListItemButton';
 import { CommonProps, ElementProps, SetRef } from '-/types/common';
-import './list-item.scss';
-export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = CommonProps<'active' | 'disabled' | 'owner' | 'readOnly'> & {
+export type ListItemProps<As extends ElementType = ElementType> = CommonProps<'active' | 'disabled' | 'owner' | 'readOnly'> & Pick<AriaAttributes, 'aria-label'> & {
     /**
      * The element type to render as.
      *
@@ -13,7 +13,7 @@ export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = Com
     /**
      * The leading element to display in the ListItem.
      *
-     * Leading elements may only be one of the following [Icon](/icons), Img, Avatar.
+     * Leading elements should only be one of the following [Icon](/icons), Img, Avatar.
      *
      * @exampleType select
      * @options Icon, Img, Avatar
@@ -30,8 +30,8 @@ export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = Com
     /**
      * The trailing element to display in the ListItem.
      *
-     * Trailing elements may only be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag,
-     * Txt.
+     * Trailing elements should only be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio,
+     * Switch, Tag, Txt.
      *
      * @exampleType select
      * @options Checkbox, Icon, ListItemButton, Radio, Switch, Tag, Txt
@@ -44,11 +44,37 @@ export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = Com
      */
     href?: AnchorHTMLAttributes<unknown>['href'];
     /** A ref to the list item div element. */
-    innerRef?: SetRef<T>;
-    /** The ARIA role of the list item. */
-    role?: string;
-    /** Whether the aria-label should be included on the list item. */
-    includeAriaLabel?: boolean;
+    innerRef?: SetRef<HTMLElement>;
+    /**
+     * The ARIA role of the list item.
+     *
+     * The role will be set to 'button' automatically if the ListItem has an onClick prop and is not a button,
+     * label, or anchor element.
+     *
+     * If including other focusable elements (e.g. buttons, links) in the leading or trailing slots, the role should
+     * be set explicitly to something other than 'button'.
+     */
+    role?: AriaRole;
+    /** Callback function that is called when the ListItem is clicked. */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * The unique ID of the list item.
+     *
+     * If not provided, a unique ID will be generated. This is useful for accessibility and testing purposes.
+     */
+    id?: string;
+    /**
+     * Whether to hide the label from screen readers. Use this when the label is redundant with other context, such
+     * as within a ListItemMenu or Label.
+     *
+     * @default false
+     */
+    hideAriaLabel?: boolean;
+    /**
+     * Indicates the current "selected" state of the list item when used in a selectable context, such as within a
+     * ListItemMenu.
+     */
+    'aria-selected'?: boolean;
 };
 /**
  * A hybrid interactive component that is used frequently to organize content and offers a wide range of control and
@@ -58,9 +84,9 @@ export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = Com
  *
  * The ListItem has three main elements: leading element, label, and trailing element.
  *
- * Leading elements may be one of the following [Icon](/icons), Img, Avatar.
+ * Leading elements should be one of the following [Icon](/icons), Img, Avatar.
  *
- * Trailing elements may be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag, Txt.
+ * Trailing elements should be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag, Txt.
  *
  * The ListItemButton is a more limited Button with context specific options.
  *
@@ -82,7 +108,7 @@ export type ListItemProps<As extends ElementType = 'div', T = HTMLElement> = Com
  * @name ListItem
  * @phase UXReview
  */
-declare function ListItem<As extends ElementType = 'div', T = HTMLElement>({ includeAriaLabel, active, as, disabled, innerRef, label, leading, readOnly, owner, role, subText, trailing, ...props }: ElementProps<ListItemProps<As, T>, As>): import("react/jsx-runtime").JSX.Element | null;
+declare function ListItem<As extends ElementType = ElementType>({ active, as, disabled, innerRef, label, leading, readOnly, owner, role: roleProp, subText, trailing, id: idProp, 'aria-label': ariaLabel, 'aria-selected': ariaSelected, hideAriaLabel, ...props }: ElementProps<ListItemProps<As>, As>): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ListItem {
     var Button: typeof ListItemButton;
 }

package/dist/components/ListItem/ListItem.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './list-item.css.js';
 import { ListItemButton } from './ListItemButton';
 import { Truncated } from '../Truncated';
-import './list-item.css.js';
+import { useId } from '../../hooks/useId';
 /**
  * A hybrid interactive component that is used frequently to organize content and offers a wide range of control and
  * navigation in most experiences.
@@ -10,9 +11,9 @@ import './list-item.css.js';
  *
  * The ListItem has three main elements: leading element, label, and trailing element.
  *
- * Leading elements may be one of the following [Icon](/icons), Img, Avatar.
+ * Leading elements should be one of the following [Icon](/icons), Img, Avatar.
  *
- * Trailing elements may be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag, Txt.
+ * Trailing elements should be one of the following [Icon](/icons), Checkbox, ListItemButton, Radio, Switch, Tag, Txt.
  *
  * The ListItemButton is a more limited Button with context specific options.
  *
@@ -34,19 +35,31 @@ import './list-item.css.js';
  * @name ListItem
  * @phase UXReview
  */
-function ListItem({ includeAriaLabel = true, active, as, disabled, innerRef, label, leading, readOnly, owner, role, subText, trailing, ...props }) {
+function ListItem({ active, as, disabled, innerRef, label, leading, readOnly, owner, role: roleProp, subText, trailing, id: idProp, 'aria-label': ariaLabel, 'aria-selected': ariaSelected, hideAriaLabel, ...props }) {
+    const id = useId(idProp);
     if (!label)
         return null;
-    let As = as || 'div';
-    if (!as) {
-        if (props.href)
-            As = 'a';
-        else if (props.onClick)
-            As = 'button';
-    }
-    const actionable = (As === 'a' || As === 'button') && !props.disabled && !props.readOnly;
-    return (_jsxs(As, { ...props, "aria-disabled": disabled || undefined, "aria-label": As === 'label' || As === 'span' || As === 'div' || includeAriaLabel === false ? undefined : label, as: As, "data-action": actionable || undefined, "data-active": active || undefined, "data-bspk": "list-item", "data-bspk-owner": owner || undefined, "data-readonly": readOnly || undefined, ref: innerRef, role: role || (As === 'button' ? 'option' : undefined), tabIndex: actionable ? 0 : undefined, children: [leading && (_jsx("span", { "aria-hidden": true, "data-leading": true, children: leading })), _jsxs("span", { "data-item-label": true, children: [_jsx(Truncated, { "data-text": true, children: label }), subText && _jsx("span", { "data-sub-text": true, children: subText })] }), trailing && _jsx("span", { "data-trailing": true, children: trailing })] }));
+    const As = asLogic(as, props);
+    const role = roleLogic(roleProp, { as: As, props });
+    const actionable = (props.href || props.onClick) && !props.disabled && !props.readOnly;
+    return (_jsxs(As, { ...props, "aria-disabled": disabled || undefined, "aria-label": ariaLabel || undefined, "aria-selected": ariaSelected, "data-action": actionable || undefined, "data-active": active || undefined, "data-bspk": "list-item", "data-bspk-owner": owner || undefined, "data-readonly": readOnly || undefined, id: id, ref: innerRef, role: role, tabIndex: props.tabIndex || (actionable ? 0 : undefined), children: [leading && (_jsx("span", { "aria-hidden": true, "data-leading": true, children: leading })), _jsxs("span", { "aria-hidden": hideAriaLabel ? true : undefined, "data-item-label": true, children: [_jsx(Truncated, { "data-text": true, children: label }), subText && _jsx("span", { "data-sub-text": true, children: subText })] }), trailing && _jsx("span", { "data-trailing": true, children: trailing })] }));
 }
 ListItem.Button = ListItemButton;
 export { ListItem };
+function asLogic(as, props) {
+    if (as)
+        return as;
+    if (props.href)
+        return 'a';
+    return 'div';
+}
+function roleLogic(existingRole, { as: As, props, }) {
+    if (existingRole)
+        return existingRole;
+    if (props.href)
+        return As !== 'a' ? 'link' : undefined;
+    if (props.onClick && As !== 'button' && As !== 'label')
+        return 'button';
+    return undefined;
+}
 //# sourceMappingURL=ListItem.js.map

package/dist/components/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGnD,OAAO,kBAAkB,CAAC;AAqD1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,SAAS,QAAQ,CAAkD,EAC/D,gBAAgB,GAAG,IAAI,EACvB,MAAM,EACN,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EAC6B;IACrC,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IAExB,IAAI,EAAE,GAAG,EAAE,IAAI,KAAK,CAAC;IAErB,IAAI,CAAC,EAAE,EAAE,CAAC;QACN,IAAI,KAAK,CAAC,IAAI;YAAE,EAAE,GAAG,GAAG,CAAC;aACpB,IAAI,KAAK,CAAC,OAAO;YAAE,EAAE,GAAG,QAAQ,CAAC;IAC1C,CAAC;IAED,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,EAAE,KAAK,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAEzF,OAAO,CACH,MAAC,EAAE,OACK,KAAK,mBACM,QAAQ,IAAI,SAAS,gBAEhC,EAAE,KAAK,OAAO,IAAI,EAAE,KAAK,MAAM,IAAI,EAAE,KAAK,KAAK,IAAI,gBAAgB,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAErG,EAAE,EAAE,EAAE,iBACO,UAAU,IAAI,SAAS,iBACvB,MAAM,IAAI,SAAS,eACtB,WAAW,qBACJ,KAAK,IAAI,SAAS,mBACpB,QAAQ,IAAI,SAAS,EACpC,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,EACtD,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,aAEnC,OAAO,IAAI,CACR,oEACK,OAAO,GACL,CACV,EACD,oDACI,KAAC,SAAS,iCAAY,KAAK,GAAa,EACvC,OAAO,IAAI,gDAAqB,OAAO,GAAQ,IAC7C,EACN,QAAQ,IAAI,gDAAqB,QAAQ,GAAQ,IACjD,CACR,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAU1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAiFtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,SAAS,QAAQ,CAAuC,EACpD,MAAM,EACN,EAAE,EACF,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,YAAY,EAAE,SAAS,EACvB,eAAe,EAAE,YAAY,EAC7B,aAAa,EACb,GAAG,KAAK,EAC0B;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IAExB,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IAC9B,MAAM,IAAI,GAAG,SAAS,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAEvF,OAAO,CACH,MAAC,EAAE,OACK,KAAK,mBACM,QAAQ,IAAI,SAAS,gBACxB,SAAS,IAAI,SAAS,mBACnB,YAAY,iBACd,UAAU,IAAI,SAAS,iBACvB,MAAM,IAAI,SAAS,eACtB,WAAW,qBACJ,KAAK,IAAI,SAAS,mBACpB,QAAQ,IAAI,SAAS,EACpC,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,aAEvD,OAAO,IAAI,CACR,oEACK,OAAO,GACL,CACV,EACD,+BAAmB,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,sCAC/C,KAAC,SAAS,iCAAY,KAAK,GAAa,EACvC,OAAO,IAAI,gDAAqB,OAAO,GAAQ,IAC7C,EACN,QAAQ,IAAI,gDAAqB,QAAQ,GAAQ,IACjD,CACR,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAE,CAAC;AAEpB,SAAS,OAAO,CAAyB,EAAkB,EAAE,KAA6B;IACtF,IAAI,EAAE;QAAE,OAAO,EAAE,CAAC;IAClB,IAAI,KAAK,CAAC,IAAI;QAAE,OAAO,GAAG,CAAC;IAC3B,OAAO,KAAK,CAAC;AACjB,CAAC;AAED,SAAS,SAAS,CACd,YAAkC,EAClC,EACI,EAAE,EAAE,EAAE,EACN,KAAK,GAIR;IAED,IAAI,YAAY;QAAE,OAAO,YAAY,CAAC;IAEtC,IAAI,KAAK,CAAC,IAAI;QAAE,OAAO,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IAEvD,IAAI,KAAK,CAAC,OAAO,IAAI,EAAE,KAAK,QAAQ,IAAI,EAAE,KAAK,OAAO;QAAE,OAAO,QAAQ,CAAC;IAExE,OAAO,SAAS,CAAC;AACrB,CAAC"}

package/dist/components/ListItem/ListItemExample.d.ts

@@ -1,3 +1,4 @@
 import { ListItemProps } from './ListItem';
-import { ComponentExampleFn } from '-/utils/demo';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+export declare const presets: Preset<ListItemProps>[];
 export declare const ListItemExample: ComponentExampleFn<ListItemProps>;

package/dist/components/ListItem/ListItemExample.js

@@ -1,6 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ListItem } from './ListItem';
 import { createExampleChildElement } from '../../utils/createExampleChildElement';
+export const presets = [
+    {
+        label: 'Long Label',
+        propState: {
+            label: 'This is a really long label that should be truncated if it exceeds the width of the ListItem',
+            subText: 'See below for other leading and trailing examples',
+            trailing: 'Checkbox',
+            leading: 'Avatar',
+        },
+    },
+];
 export const ListItemExample = ({ action, setState }) => ({
     render: ({ props, id }) => {
         const leading = createExampleChildElement({
@@ -22,17 +33,6 @@ export const ListItemExample = ({ action, setState }) => ({
             as = 'label';
         return _jsx(ListItem, { ...props, as: as, leading: leading.element, trailing: trailing.element });
     },
-    presets: [
-        {
-            value: 'long-label',
-            label: 'Long Label',
-            propState: {
-                label: 'This is a really long label that should be truncated if it exceeds the width of the ListItem',
-                subText: 'See below for other leading and trailing examples',
-                trailing: 'Checkbox',
-                leading: 'Avatar',
-            },
-        },
-    ],
+    presets,
 });
 //# sourceMappingURL=ListItemExample.js.map

package/dist/components/ListItem/ListItemExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemExample.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItemExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAG9E,MAAM,CAAC,MAAM,eAAe,GAAsC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IACzF,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE;QACtB,MAAM,OAAO,GAAG,yBAAyB,CAAC;YACtC,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,SAAS;YACf,QAAQ;YACR,MAAM;YACN,EAAE;SACL,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,yBAAyB,CAAC;YACvC,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,UAAU;YAChB,QAAQ;YACR,MAAM;YACN,EAAE;SACL,CAAC,CAAC;QAEH,IAAI,EAAE,GAAgB,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC;QAExC,IAAI,QAAQ,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;YAAE,EAAE,GAAG,OAAO,CAAC;QAE7G,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,OAAO,GAAI,CAAC;IACjG,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,KAAK,EAAE,8FAA8F;gBACrG,OAAO,EAAE,mDAAmD;gBAC5D,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,QAAQ;aACpB;SACJ;KACJ;CACJ,CAAC,CAAC"}
+{"version":3,"file":"ListItemExample.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItemExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAG9E,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC5C;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE,8FAA8F;YACrG,OAAO,EAAE,mDAAmD;YAC5D,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,QAAQ;SACpB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAsC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IACzF,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE;QACtB,MAAM,OAAO,GAAG,yBAAyB,CAAC;YACtC,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,SAAS;YACf,QAAQ;YACR,MAAM;YACN,EAAE;SACL,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,yBAAyB,CAAC;YACvC,YAAY,EAAE,KAAK;YACnB,IAAI,EAAE,UAAU;YAChB,QAAQ;YACR,MAAM;YACN,EAAE;SACL,CAAC,CAAC;QAEH,IAAI,EAAE,GAAgB,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC;QAExC,IAAI,QAAQ,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC;YAAE,EAAE,GAAG,OAAO,CAAC;QAE7G,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,OAAO,GAAI,CAAC;IACjG,CAAC;IACD,OAAO;CACV,CAAC,CAAC"}

package/dist/components/ListItem/list-item.css

@@ -3,6 +3,7 @@
   width: 100%;
   user-select: none;
   color: var(--foreground-neutral-on-surface);
+  background-color: var(--surface-neutral-t1-base);
   height: 100%;
   overflow: hidden;
   min-height: var(--list-item-height);
@@ -10,7 +11,6 @@
   gap: var(--spacing-sizing-03);
   padding: var(--spacing-sizing-02);
   justify-items: stretch;
-  background: unset;
   border: unset;
   margin: unset;
   text-decoration: unset;
@@ -21,16 +21,12 @@
 [data-pseudo=focus] [data-bspk=list-item] [data-inner], [data-bspk=list-item]:focus-visible [data-inner], [data-bspk=list-item]:has(*:focus-visible) [data-inner] {
   border-color: transparent;
 }
-[data-pseudo=hover] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action]:hover {
+[data-bspk=list-item][data-action][data-active], [data-pseudo=hover] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action]:hover, [data-bspk=list-item]:is(label)[data-active], [data-pseudo=hover] [data-bspk=list-item]:is(label), [data-bspk=list-item]:is(label):hover {
   background-color: var(--interactions-neutral-hover-opacity);
 }
-[data-pseudo=active] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action][data-active], [data-bspk=list-item][data-action]:active {
+[data-pseudo=active] [data-bspk=list-item][data-action], [data-bspk=list-item][data-action]:active, [data-pseudo=active] [data-bspk=list-item]:is(label), [data-bspk=list-item]:is(label):active {
   background-color: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=list-item][aria-disabled] [data-text],
-[data-bspk=list-item][aria-disabled] [data-sub-text] {
-  color: var(--foreground-neutral-disabled-on-surface);
-}
 [data-bspk=list-item] [data-leading],
 [data-bspk=list-item] [data-item-label],
 [data-bspk=list-item] [data-trailing] {
@@ -65,6 +61,10 @@
   font: var(--body-small);
   color: var(--foreground-neutral-on-surface-variant-01);
 }
+[data-bspk=list-item][aria-disabled] [data-text],
+[data-bspk=list-item][aria-disabled] [data-sub-text] {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
 [data-bspk=list-item] [data-trailing]:has(input) {
   pointer-events: none;
 }
@@ -77,5 +77,8 @@
   border-bottom: 0;
   gap: var(--spacing-sizing-02);
 }
+[data-bspk=list-item][aria-selected=true] {
+  background-color: var(--surface-brand-primary-highlight);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */