@bspk/ui 1.3.21 → 1.3.23

package/dist/styles/base.css.js

@@ -142,87 +142,6 @@ body[data-bspk] {
   color: var(--foreground-neutral-on-surface);
   min-width: 343px;
 }
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]),
-body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]) {
-  color: var(--foreground-link-text-default);
-}
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover],
-body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover,
-body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover] {
-  color: var(--foreground-link-text-default-hovered);
-}
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active],
-body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active,
-body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active] {
-  color: var(--foreground-link-text-default);
-  filter: brightness(80%);
-}
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited],
-body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited,
-body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited] {
-  color: var(--foreground-link-text-default-visited);
-}
-body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item])[disabled],
-body[data-bspk] [data-bspk=link]:not([data-bspk=button], [data-bspk=list-item])[disabled] {
-  pointer-events: none;
-  cursor: text;
-  color: var(--foreground-link-text-default-disabled);
-}
-body[data-bspk] a[data-subtle],
-body[data-bspk] [data-bspk=link][data-subtle] {
-  text-decoration: none;
-  color: var(--foreground-neutral-on-surface);
-}
-body[data-bspk] a[data-subtle]:not([disabled]):hover, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=hover],
-body[data-bspk] [data-bspk=link][data-subtle]:not([disabled]):hover,
-body[data-bspk] [data-bspk=link][data-subtle]:not([disabled])[data-pseudo=hover] {
-  text-decoration: underline;
-  color: var(--foreground-link-text-subtle-hovered);
-}
-body[data-bspk] a[data-subtle]:not([disabled]):active, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=active],
-body[data-bspk] [data-bspk=link][data-subtle]:not([disabled]):active,
-body[data-bspk] [data-bspk=link][data-subtle]:not([disabled])[data-pseudo=active] {
-  text-decoration: underline;
-  color: var(--foreground-link-text-subtle-pressed);
-}
-body[data-bspk] a[data-subtle]:not([disabled]):visited, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=visited],
-body[data-bspk] [data-bspk=link][data-subtle]:not([disabled]):visited,
-body[data-bspk] [data-bspk=link][data-subtle]:not([disabled])[data-pseudo=visited] {
-  color: var(--foreground-neutral-on-surface);
-}
-body[data-bspk] a[data-subtle][disabled],
-body[data-bspk] [data-bspk=link][data-subtle][disabled] {
-  pointer-events: none;
-  color: var(--foreground-link-text-subtle-disabled);
-}
-body[data-bspk] a[data-subtle-inverse],
-body[data-bspk] [data-bspk=link][data-subtle-inverse] {
-  text-decoration: none;
-  color: var(--foreground-neutral-inverse-on-surface);
-}
-body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=hover],
-body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled]):hover,
-body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled])[data-pseudo=hover] {
-  text-decoration: underline;
-  color: var(--foreground-link-text-subtle-inverse-hovered);
-}
-body[data-bspk] a[data-subtle-inverse]:not([disabled]):active, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=active],
-body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled]):active,
-body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled])[data-pseudo=active] {
-  text-decoration: underline;
-  color: var(--foreground-link-text-subtle-inverse-pressed);
-}
-body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=visited],
-body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled]):visited,
-body[data-bspk] [data-bspk=link][data-subtle-inverse]:not([disabled])[data-pseudo=visited] {
-  color: var(--foreground-neutral-on-inverse-surface);
-}
-body[data-bspk] a[data-subtle-inverse][disabled],
-body[data-bspk] [data-bspk=link][data-subtle-inverse][disabled] {
-  pointer-events: none;
-  color: var(--foreground-link-text-subtle-inversed-disabled);
-}
-
 [data-touch-target-parent] {
   display: flex;
   justify-content: center;
@@ -361,6 +280,77 @@ body[data-bspk] [data-bspk=link][data-subtle-inverse][disabled] {
   display: none !important;
 }
 
+body[data-bspk] a:not([data-bspk]), [data-bspk=link] {
+  color: var(--foreground-link-text-default);
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sizing-01);
+  font: var(--labels-base);
+}
+body[data-bspk] a:not([disabled]):hover:not([data-bspk]), [data-bspk=link]:not([disabled]):hover, body[data-bspk] a:not([disabled])[data-pseudo=hover]:not([data-bspk]), [data-bspk=link]:not([disabled])[data-pseudo=hover] {
+  color: var(--foreground-link-text-default-hovered);
+}
+body[data-bspk] a:not([disabled]):active:not([data-bspk]), [data-bspk=link]:not([disabled]):active, body[data-bspk] a:not([disabled])[data-pseudo=active]:not([data-bspk]), [data-bspk=link]:not([disabled])[data-pseudo=active] {
+  color: var(--foreground-link-text-default);
+  filter: brightness(80%);
+}
+body[data-bspk] a:not([disabled]):visited:not([data-bspk]), [data-bspk=link]:not([disabled]):visited, body[data-bspk] a:not([disabled])[data-pseudo=visited]:not([data-bspk]), [data-bspk=link]:not([disabled])[data-pseudo=visited] {
+  color: var(--foreground-link-text-default-visited);
+}
+body[data-bspk] a[disabled]:not([data-bspk]), [disabled][data-bspk=link] {
+  pointer-events: none;
+  cursor: text;
+  color: var(--foreground-link-text-default-disabled);
+}
+body[data-bspk] a[data-subtle]:not([data-bspk]), [data-subtle][data-bspk=link] {
+  text-decoration: none;
+  color: var(--foreground-neutral-on-surface);
+}
+body[data-bspk] a[data-subtle]:not([disabled]):hover:not([data-bspk]), [data-subtle][data-bspk=link]:not([disabled]):hover, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=hover]:not([data-bspk]), [data-subtle][data-bspk=link]:not([disabled])[data-pseudo=hover] {
+  text-decoration: underline;
+  color: var(--foreground-link-text-subtle-hovered);
+}
+body[data-bspk] a[data-subtle]:not([disabled]):active:not([data-bspk]), [data-subtle][data-bspk=link]:not([disabled]):active, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=active]:not([data-bspk]), [data-subtle][data-bspk=link]:not([disabled])[data-pseudo=active] {
+  text-decoration: underline;
+  color: var(--foreground-link-text-subtle-pressed);
+}
+body[data-bspk] a[data-subtle]:not([disabled]):visited:not([data-bspk]), [data-subtle][data-bspk=link]:not([disabled]):visited, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=visited]:not([data-bspk]), [data-subtle][data-bspk=link]:not([disabled])[data-pseudo=visited] {
+  color: var(--foreground-neutral-on-surface);
+}
+body[data-bspk] a[data-subtle][disabled]:not([data-bspk]), [data-subtle][disabled][data-bspk=link] {
+  pointer-events: none;
+  color: var(--foreground-link-text-subtle-disabled);
+}
+body[data-bspk] a[data-subtle-inverse]:not([data-bspk]), [data-subtle-inverse][data-bspk=link] {
+  text-decoration: none;
+  color: var(--foreground-neutral-inverse-on-surface);
+}
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover:not([data-bspk]), [data-subtle-inverse][data-bspk=link]:not([disabled]):hover, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=hover]:not([data-bspk]), [data-subtle-inverse][data-bspk=link]:not([disabled])[data-pseudo=hover] {
+  text-decoration: underline;
+  color: var(--foreground-link-text-subtle-inverse-hovered);
+}
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):active:not([data-bspk]), [data-subtle-inverse][data-bspk=link]:not([disabled]):active, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=active]:not([data-bspk]), [data-subtle-inverse][data-bspk=link]:not([disabled])[data-pseudo=active] {
+  text-decoration: underline;
+  color: var(--foreground-link-text-subtle-inverse-pressed);
+}
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited:not([data-bspk]), [data-subtle-inverse][data-bspk=link]:not([disabled]):visited, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=visited]:not([data-bspk]), [data-subtle-inverse][data-bspk=link]:not([disabled])[data-pseudo=visited] {
+  color: var(--foreground-neutral-on-inverse-surface);
+}
+body[data-bspk] a[data-subtle-inverse][disabled]:not([data-bspk]), [data-subtle-inverse][disabled][data-bspk=link] {
+  pointer-events: none;
+  color: var(--foreground-link-text-subtle-inversed-disabled);
+}
+body[data-bspk] a[data-size=large]:not([data-bspk]), [data-size=large][data-bspk=link] {
+  font: var(--labels-large);
+}
+body[data-bspk] a[data-size=small]:not([data-bspk]), [data-size=small][data-bspk=link] {
+  font: var(--labels-small);
+}
+body[data-bspk] a:not([data-bspk]) svg, [data-bspk=link] svg {
+  width: var(--spacing-sizing-05);
+}
+
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);

package/dist/types/common.d.ts

@@ -120,6 +120,7 @@ export type CommonPropsLibrary = {
 };
 export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLibrary, K>;
 export type RequiredCommonProps<K extends keyof CommonPropsLibrary> = Required<Pick<CommonPropsLibrary, K>>;
+/** The common properties for all input control components such as Input, TextArea, Select, etc. */
 export type FieldControlProps<ValueType = string, ChangeContext = ChangeEvent<HTMLElement> | KeyboardEvent | undefined> = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'required'> & {
     /**
      * The value of the field control.
@@ -133,6 +134,8 @@ export type FieldControlProps<ValueType = string, ChangeContext = ChangeEvent<HT
      * @required
      */
     onChange: (next: ValueType | undefined, event?: ChangeContext) => void;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
 };
 export type Brand = 'anywhere' | 'better-homes-gardens' | 'cartus' | 'century-21' | 'coldwell-banker' | 'corcoran' | 'denali-boss' | 'era' | 'sothebys';
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/types/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AA6KH,sDAAsD"}
+{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AAsLH,sDAAsD"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.3.21",
+    "version": "1.3.23",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [
@@ -40,7 +40,8 @@
         "newc": "tsx .scripts/tasks/new-component.ts",
         "create:tests": "tsx .scripts/tasks/create-tests.ts",
         "clean": "tsx .scripts/clean.ts",
-        "pr-check": "npx tsx .scripts/tasks/lint-components.ts && npm run lint && npm run lint:css && npx tsx .scripts/check-css-vars.ts && npm run build && npm run test"
+        "pr-check": "npx tsx .scripts/tasks/lint-components.ts && npm run lint && npm run lint:css && npx tsx .scripts/check-css-vars.ts && npm run build && npm run test",
+        "pr": "npm run pr-check && git push --set-upstream origin origin $(git symbolic-ref --short HEAD) && open \"https://github.com/Anywhererealestate/bspk-ui/compare/dev...$(git symbolic-ref --short HEAD)\""
     },
     "static-exports": {
         "./*": "./dist/*.js"
@@ -107,8 +108,6 @@
         "./FileUploadItem/*": "./dist/components/FileUploadItem/*.js",
         "./Flex": "./dist/components/Flex/index.js",
         "./Flex/*": "./dist/components/Flex/*.js",
-        "./FormField": "./dist/components/FormField/index.js",
-        "./FormField/*": "./dist/components/FormField/*.js",
         "./Grid": "./dist/components/Grid/index.js",
         "./Grid/*": "./dist/components/Grid/*.js",
         "./Img": "./dist/components/Img/index.js",

package/src/components/Accordion/Accordion.tsx

@@ -130,7 +130,7 @@ export function Accordion({ items: itemsProp, singleOpen = true }: AccordionProp
             {items.map(({ children, title, subtitle: subtitle, leading, trailing, disabled, id }, index) => {
                 const isOpen = openSections.includes(id);
                 return (
-                    <section data-disabled={disabled || undefined} id={id} key={id || index}>
+                    <section data-bspk="accordion-item" data-disabled={disabled || undefined} id={id} key={id || index}>
                         <button
                             aria-controls={`${id}-content`}
                             aria-expanded={isOpen}
@@ -147,7 +147,7 @@ export function Accordion({ items: itemsProp, singleOpen = true }: AccordionProp
                             <span data-arrow>{isOpen ? <SvgKeyboardArrowUp /> : <SvgKeyboardArrowDown />}</span>
                         </button>
                         {isOpen && (
-                            <div data-content data-hidden={!isOpen || undefined} id={`${id}-content`}>
+                            <div data-content id={`${id}-content`}>
                                 {children}
                             </div>
                         )}

package/src/components/Accordion/accordion.scss

@@ -1,8 +1,13 @@
 [data-bspk='accordion'] {
+    display: block;
     width: 100%;
     padding: var(--spacing-sizing-02);
 
-    > section {
+    &:empty {
+        display: none;
+    }
+
+    > [data-bspk='accordion-item'] {
         --border-bottom-color: var(--stroke-neutral-base);
 
         display: flex;
@@ -54,6 +59,10 @@
                 align-items: center;
                 justify-content: center;
                 margin-left: var(--spacing-sizing-02);
+
+                svg {
+                    width: var(--spacing-sizing-06);
+                }
             }
 
             &:not(:disabled) {

package/src/components/BottomNavigation/BottomNavigation.tsx

@@ -21,7 +21,6 @@ export type BottomNavigationProps = Pick<TabListProps, 'label' | 'onChange' | 'o
  *
  * @example
  *     import { BottomNavigation } from '@bspk/ui/BottomNavigation';
- *     import { useState } from 'react';
  *
  *     () => {
  *         const [value, setValue] = useState<string>('1');

package/src/components/BottomNavigation/bottom-navigation.scss

@@ -27,6 +27,7 @@ ul[data-bspk-utility='tab-list'][data-bspk='bottom-navigation'] {
         &[data-pseudo='focus'] > &,
         &:focus-visible {
             outline: solid 2px var(--stroke-neutral-focus);
+            isolation: isolate;
         }
 
         &[aria-selected='true'] {

package/src/components/Button/button.scss

@@ -1,4 +1,5 @@
 [data-bspk='button'] {
+    display: flex;
     flex-direction: row;
     gap: var(--spacing-sizing-02);
     border: none;
@@ -137,6 +138,7 @@
             [data-pseudo='focus'] > &,
             &:focus-visible {
                 outline: solid 2px var(--stroke-neutral-focus);
+                isolation: isolate;
             }
         }
 
@@ -173,6 +175,7 @@
             [data-pseudo='focus'] > &,
             &:focus-visible {
                 outline: solid 2px var(--stroke-neutral-focus);
+                isolation: isolate;
             }
         }
 
@@ -207,6 +210,7 @@
             [data-pseudo='focus'] > &,
             &:focus-visible {
                 outline: solid 2px var(--stroke-neutral-focus);
+                isolation: isolate;
             }
         }
 

package/src/components/Checkbox/Checkbox.tsx

@@ -64,14 +64,14 @@ export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'readOnly' | 'v
  */
 export function Checkbox({
     checked: checkedProp = false,
-    indeterminate: indeterminateProp,
+    indeterminate: indeterminateProp = false,
     invalid,
     disabled,
     required,
     ...props
 }: ElementProps<CheckboxProps, 'input'>) {
+    const checked = !!checkedProp;
     const indeterminate = !!indeterminateProp;
-    const checked = !!checkedProp && !indeterminate;
 
     const inputRef = useRef<HTMLInputElement>();
 
@@ -100,7 +100,7 @@ export function Checkbox({
                 type="checkbox"
             />
             <span aria-hidden>
-                {checked && (
+                {checked && !indeterminate && (
                     <svg data-checked fill="none" viewBox="0 0 14 11" xmlns="http://www.w3.org/2000/svg">
                         <path
                             d="M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z"

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -1,13 +1,11 @@
 import './checkbox-group.scss';
-import { Checkbox, CheckboxProps } from '-/components/Checkbox';
-import { useFieldInit } from '-/components/Field';
-import { ToggleOptionProps, ToggleOption } from '-/components/ToggleOption';
+import { CheckboxOption, CheckboxOptionProps } from '-/components/CheckboxOption';
+import { useId } from '-/hooks/useId';
 import { ElementProps, FieldControlProps } from '-/types/common';
 
 const ALL_LABEL = 'All';
 
-export type CheckboxGroupOption = Pick<CheckboxProps, 'value'> &
-    Pick<ToggleOptionProps, 'description' | 'disabled' | 'label'>;
+export type CheckboxGroupOption = Omit<CheckboxOptionProps, 'name' | 'onChange'>;
 
 export type CheckboxGroupProps = Omit<FieldControlProps<string[]>, 'readOnly'> & {
     /**
@@ -31,7 +29,7 @@ export type CheckboxGroupProps = Omit<FieldControlProps<string[]>, 'readOnly'> &
      */
     selectAll?: boolean;
     /** The props for the select all checkbox. */
-    selectAllProps?: CheckboxGroupOption;
+    selectAllProps?: Pick<CheckboxOptionProps, 'aria-label' | 'description' | 'label'>;
 };
 
 /**
@@ -73,64 +71,51 @@ export function CheckboxGroup({
     selectAll,
     selectAllProps,
     disabled = false,
-    invalid: invalidProp,
-    required,
+    invalid = false,
     id: idProp,
-    'aria-describedby': ariaDescribedByProp,
-    'aria-errormessage': ariaErrorMessageProp,
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
+    required,
     ...props
 }: ElementProps<CheckboxGroupProps, 'div'>) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        invalidProp,
-    });
+    const id = useId(idProp);
+    const availableOptions = options.filter((o) => !o.disabled);
 
     return (
-        <div
-            {...props}
-            aria-describedby={ariaDescribedByProp || ariaDescribedBy || undefined}
-            data-bspk="checkbox-group"
-            id={id}
-            role="group"
-        >
+        <div {...props} aria-describedby={ariaDescribedBy || undefined} data-bspk="checkbox-group" id={id} role="group">
             {selectAll && (
-                <ToggleOption label={selectAllProps?.label || ALL_LABEL}>
-                    <Checkbox
-                        aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
-                        aria-label={selectAllProps?.label || ALL_LABEL}
-                        checked={!!value.length && value.length === options.length}
-                        data-testid="selectAll-Checkbox"
-                        disabled={disabled}
-                        indeterminate={!!value.length && value.length < options.length}
-                        invalid={invalid || undefined}
-                        name={name}
-                        onChange={(checked) => onChange(checked ? options.map((o) => o.value) : [])}
-                        value="all"
-                    />
-                </ToggleOption>
+                <CheckboxOption
+                    aria-label={ALL_LABEL}
+                    label={ALL_LABEL}
+                    {...selectAllProps}
+                    aria-errormessage={ariaErrorMessage || undefined}
+                    checked={!!value.length && value.length === availableOptions.length}
+                    data-testid="selectAll-Checkbox"
+                    disabled={disabled}
+                    indeterminate={!!value.length && value.length < availableOptions.length}
+                    invalid={invalid || undefined}
+                    name={name}
+                    onChange={(checked) => onChange(checked ? availableOptions.map((o) => o.value) : [])}
+                    value="all"
+                />
             )}
             {options.map(({ label, description, value: optionValue, disabled: optionDisabled }) => (
-                <ToggleOption
+                <CheckboxOption
+                    aria-errormessage={ariaErrorMessage || undefined}
+                    aria-label={label}
+                    checked={value.includes(optionValue)}
                     description={description}
                     disabled={disabled || optionDisabled}
+                    invalid={invalid || undefined}
                     key={optionValue}
                     label={label}
-                >
-                    <Checkbox
-                        aria-errormessage={ariaErrorMessageProp || ariaErrorMessage || undefined}
-                        aria-label={label}
-                        checked={value.includes(optionValue)}
-                        disabled={disabled || optionDisabled}
-                        invalid={invalid || undefined}
-                        name={name}
-                        onChange={(checked) => {
-                            onChange(checked ? [...value, optionValue] : value.filter((v) => v !== optionValue));
-                        }}
-                        value={optionValue}
-                    />
-                </ToggleOption>
+                    name={name}
+                    onChange={(checked) => {
+                        onChange(checked ? [...value, optionValue] : value.filter((v) => v !== optionValue));
+                    }}
+                    required={required}
+                    value={optionValue}
+                />
             ))}
         </div>
     );

package/src/components/CheckboxGroup/CheckboxGroupExample.tsx

@@ -68,6 +68,12 @@ export const CheckboxGroupExample: ComponentExample<CheckboxGroupProps> = {
                 disabled: true,
             },
             { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
+            {
+                label: 'Option 4',
+                value: 'option4',
+                description:
+                    'This is a very long label for option 4 that never seems to end and just goes on and on without stopping',
+            },
         ],
     },
 };

package/src/components/CheckboxGroup/checkbox-group.scss

@@ -5,4 +5,10 @@
     max-width: 100%;
 
     --list-item-height: 'auto';
+
+    [data-bspk='list-item'] {
+        background: transparent;
+    }
 }
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/CheckboxGroupField/CheckboxGroupField.tsx

@@ -1,8 +1,8 @@
 import { CheckboxGroup, CheckboxGroupProps } from '-/components/CheckboxGroup';
-import { Field, FieldDescription, FieldError, FieldLabel } from '-/components/Field';
-import { FormFieldControlProps } from '-/components/FormField';
+import { Fieldset, propsWithAria, ComposedFieldProps } from '-/components/Field';
+import { useId } from '-/hooks/useId';
 
-export type CheckboxGroupFieldProps = FormFieldControlProps<CheckboxGroupProps>;
+export type CheckboxGroupFieldProps = ComposedFieldProps<CheckboxGroupProps>;
 
 /**
  * A field wrapper for the CheckboxGroup component.
@@ -20,17 +20,22 @@ export function CheckboxGroupField({
     labelTrailing,
     errorMessage,
     style,
+    id: idProp,
     ...controlProps
 }: CheckboxGroupFieldProps) {
+    const id = useId(idProp);
     return (
-        <Field as="fieldset" style={style}>
-            <FieldLabel as="legend" labelTrailing={labelTrailing} style={style}>
-                {label}
-            </FieldLabel>
-            <CheckboxGroup {...controlProps} />
-            {!errorMessage && helperText && <FieldDescription>{helperText}</FieldDescription>}
-            {errorMessage && <FieldError>{errorMessage}</FieldError>}
-        </Field>
+        <Fieldset
+            controlId={id}
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            required={controlProps.required}
+            style={style}
+        >
+            <CheckboxGroup {...propsWithAria({ controlProps, id, errorMessage, helperText })} />
+        </Fieldset>
     );
 }
 

package/src/components/ChipGroup/ChipGroup.tsx

@@ -17,7 +17,6 @@ export type ChipGroupProps = {
  * A component that manages the layout of a group of chips.
  *
  * @example
- *     import { Chip } from '@bspk/ui/Chip';
  *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *
  *     <ChipGroup

package/src/components/ChipGroup/chip-group.scss

@@ -5,6 +5,10 @@
     flex-flow: row wrap;
     padding-bottom: var(--spacing-sizing-01);
 
+    &:empty {
+        display: none;
+    }
+
     &[data-scroll] {
         overflow: auto;
         flex-wrap: nowrap;

package/src/components/DatePicker/DatePicker.tsx

@@ -4,8 +4,7 @@ import { format, startOfToday } from 'date-fns';
 import { useMemo, useState } from 'react';
 import { Button } from '-/components/Button';
 import { Calendar, parseDate } from '-/components/Calendar';
-import { useFieldInit } from '-/components/Field';
-import { InputElement, InputProps } from '-/components/Input';
+import { Input, InputProps } from '-/components/Input';
 import { useFloating } from '-/hooks/useFloating';
 import { useOutsideClick } from '-/hooks/useOutsideClick';
 import { FieldControlProps } from '-/types/common';
@@ -49,19 +48,15 @@ export type DatePickerProps = Omit<FieldControlProps, 'aria-label' | 'onChange'
  * For a more complete example with field usage, see the DatePickerField component.
  *
  * @example
- *     import { DatePicker } from '@bspk/ui/DatePicker';
- *     import { Field, FieldLabel } from '@bspk/ui/Field';
- *     import { useState } from 'react';
+ *     import { DatePicker } from '-/components/DatePicker';
  *
  *     () => {
  *         const [fieldDate, setFieldDate] = useState<string>();
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Date</FieldLabel>
- *                     <DatePicker name="date1" onChange={setFieldDate} required value={fieldDate} />
- *                     <FieldDescription>The date picker allows you to select a date.</FieldDescription>
+ *                 <Field controlId="date1" helperText="The date picker allows you to select a date." label="Date">
+ *                     <DatePicker id="date1" name="date1" onChange={setFieldDate} required value={fieldDate} />
  *                 </Field>
  *             </div>
  *         );
@@ -78,20 +73,14 @@ export function DatePicker({
     closeCalendarOnChange = true,
     name,
     placeholder,
-    invalid: invalidProp,
+    invalid,
     required = false,
     size,
-    id: idProp,
+    id,
     'aria-label': ariaLabel = 'Enter or choose date',
+    'aria-describedby': ariaDescribedBy,
+    'aria-errormessage': ariaErrorMessage,
 }: DatePickerProps) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
-
     const [calendarVisible, setCalendarVisible] = useState(false);
 
     const { elements, floatingStyles } = useFloating({
@@ -118,7 +107,7 @@ export function DatePicker({
                 elements.setReference(node);
             }}
         >
-            <InputElement
+            <Input
                 aria-describedby={ariaDescribedBy || undefined}
                 aria-errormessage={ariaErrorMessage || undefined}
                 aria-label={ariaLabel}

package/src/components/DatePicker/DatePickerExample.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { DatePicker, DatePickerProps } from '.';
-import { Field, FieldLabel, FieldDescription } from '-/components/Field';
+import { Field } from '-/components/Field';
 import { ComponentExample } from '-/utils/demo';
 
 export const DatePickerExample: ComponentExample<DatePickerProps> = {
@@ -19,10 +19,8 @@ export const Usage = () => {
 
     return (
         <div style={{ width: 320 }}>
-            <Field>
-                <FieldLabel>Date</FieldLabel>
-                <DatePicker name="date1" onChange={setFieldDate} required value={fieldDate} />
-                <FieldDescription>The date picker allows you to select a date.</FieldDescription>
+            <Field controlId="date1" helperText="The date picker allows you to select a date." label="Date">
+                <DatePicker id="date1" name="date1" onChange={setFieldDate} required value={fieldDate} />
             </Field>
         </div>
     );

package/src/components/DatePickerField/DatePickerField.rtl.test.tsx

@@ -3,7 +3,7 @@ import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
 import { render } from '-/rtl/util';
 
 const TestBed = () => (
-    <DatePickerField label="Example field label" name="example-field-name" onChange={() => {}} value={undefined} />
+    <DatePickerField label="Example field label" name="example-field-name" onChange={() => {}} value="" />
 );
 
 describe('DatePickerField (RTL)', () => {