@bspk/ui 1.3.22 → 1.3.23

package/dist/styles/base.css

@@ -139,87 +139,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;
@@ -358,4 +277,75 @@ 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 */

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.

package/dist/types/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/types/common.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;;AAqLH,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.22",
+    "version": "1.3.23",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [

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

@@ -5,6 +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 { Fieldset, propsWithAria, FieldControlProps } from '-/components/Field';
+import { Fieldset, propsWithAria, ComposedFieldProps } from '-/components/Field';
 import { useId } from '-/hooks/useId';
 
-export type CheckboxGroupFieldProps = FieldControlProps<CheckboxGroupProps>;
+export type CheckboxGroupFieldProps = ComposedFieldProps<CheckboxGroupProps>;
 
 /**
  * A field wrapper for the CheckboxGroup component.
@@ -31,6 +31,7 @@ export function CheckboxGroupField({
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
             <CheckboxGroup {...propsWithAria({ controlProps, id, errorMessage, helperText })} />

package/src/components/DatePickerField/DatePickerField.tsx

@@ -1,8 +1,8 @@
 import { DatePicker, DatePickerProps } from '-/components/DatePicker';
-import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
+import { Field, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { useId } from '-/hooks/useId';
 
-export type DatePickerFieldProps = FieldControlProps<DatePickerProps>;
+export type DatePickerFieldProps = ComposedFieldProps<DatePickerProps>;
 
 /**
  * A field wrapper for the DatePicker component.
@@ -31,6 +31,7 @@ export function DatePickerField({
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
             <DatePicker {...propsWithAria({ id, controlProps, errorMessage, helperText })} />

package/src/components/Field/Field.tsx

@@ -5,7 +5,12 @@ import { labelledById, errorMessageId, describedById } from './utils';
 import { InlineAlert } from '-/components/InlineAlert';
 import { CommonProps } from '-/types/common';
 
-export type FieldControlProps<P extends Record<string, unknown>> = Omit<FieldProps, 'children' | 'controlId'> &
+/**
+ * Props for Composed Field components.
+ *
+ * These are props that combine FieldProps with the props of a specific control component.
+ */
+export type ComposedFieldProps<P extends Record<string, unknown>> = Omit<FieldProps, 'children' | 'controlId'> &
     Omit<P, keyof FieldProps>;
 
 export type FieldProps = CommonProps<'style'> & {
@@ -46,8 +51,8 @@ export type FieldProps = CommonProps<'style'> & {
 /**
  * Wrapper component for form controls.
  *
- * Children should be one of the following: DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, or
- * TimePicker.
+ * Children should be one of the following: DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea,
+ * RadioGroup, CheckboxGroup, or TimePicker.
  *
  * @example
  *     import { Input } from '@bspk/ui/Input';

package/src/components/Field/Fieldset.tsx

@@ -7,8 +7,8 @@ import { InlineAlert } from '-/components/InlineAlert';
 /**
  * Wrapper component for form controls.
  *
- * Children should be one of the following: DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, or
- * TimePicker.
+ * Children should be one of the following: DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea,
+ * RadioGroup, CheckboxGroup, or TimePicker.
  *
  * @example
  *     import { Input } from '@bspk/ui/Input';
@@ -51,27 +51,31 @@ export function Fieldset({
     ...props
 }: FieldProps) {
     return (
-        <fieldset {...props} data-bspk-utility="field" role="group">
-            <legend data-field-label id={labelledById(id)}>
-                <span>{label}</span>
-                {required && <span data-required>{' (Required)'}</span>}
-                {labelTrailing && (
-                    <span aria-hidden data-trailing>
-                        {labelTrailing}
+        <div {...props} data-bspk-utility="field">
+            <fieldset role="group">
+                <legend>
+                    <span data-field-label id={labelledById(id)}>
+                        <span>{label}</span>
+                        {required && <span data-required>{' (Required)'}</span>}
+                        {labelTrailing && (
+                            <span aria-hidden data-trailing>
+                                {labelTrailing}
+                            </span>
+                        )}
                     </span>
+                </legend>
+                {children}
+                {errorMessage ? (
+                    <InlineAlert id={errorMessageId(id)} label={errorMessage} owner="field-error" variant="error" />
+                ) : (
+                    helperText && (
+                        <p data-field-description id={describedById(id)}>
+                            {helperText}
+                        </p>
+                    )
                 )}
-            </legend>
-            {children}
-            {errorMessage ? (
-                <InlineAlert id={errorMessageId(id)} label={errorMessage} owner="field-error" variant="error" />
-            ) : (
-                helperText && (
-                    <p data-field-description id={describedById(id)}>
-                        {helperText}
-                    </p>
-                )
-            )}
-        </fieldset>
+            </fieldset>
+        </div>
     );
 }
 

package/src/components/Field/field.scss

@@ -36,6 +36,11 @@
         margin: 0;
         padding: 0;
     }
+
+    fieldset,
+    legend {
+        display: contents;
+    }
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Input/Input.tsx

@@ -12,7 +12,7 @@ export const DEFAULT = {
     autoComplete: 'off',
 } as const;
 
-export type InputBaseProps = CommonProps<'owner' | 'size'> &
+export type InputProps = CommonProps<'owner' | 'size'> &
     FieldControlProps & {
         /** The ref of the container. */
         containerRef?: SetRef<HTMLDivElement>;
@@ -50,12 +50,10 @@ export type InputBaseProps = CommonProps<'owner' | 'size'> &
          * @default true
          */
         showClearButton?: boolean;
+        /** Additional props to pass to the underlying input element. */
+        inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof InputProps>;
     };
 
-export type InputProps = InputBaseProps & {
-    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof InputBaseProps>;
-};
-
 /**
  * An input that allows users to enter text, numbers or symbols in a singular line. This is a utility element and is not
  * intended to be used directly but rather through the Input, and other components.
@@ -80,7 +78,7 @@ export type InputProps = InputBaseProps & {
  *     };
  *
  * @name Input
- * @phase Utility
+ * @phase Stable
  */
 export function Input({
     invalid,
@@ -142,9 +140,6 @@ export function Input({
                 disabled={disabled || undefined}
                 id={id}
                 name={name}
-                onBlur={(event) => {
-                    inputProps?.onBlur?.(event);
-                }}
                 onChange={(event) => {
                     onChange(event.target.value, event);
                 }}

package/src/components/InputField/InputField.tsx

@@ -1,8 +1,8 @@
-import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
+import { Field, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { Input, InputProps } from '-/components/Input';
 import { useId } from '-/hooks/useId';
 
-export type InputFieldProps = FieldControlProps<InputProps>;
+export type InputFieldProps = ComposedFieldProps<InputProps>;
 
 /**
  * A field wrapper for the Input component.
@@ -31,6 +31,7 @@ export function InputField({
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
             <Input {...propsWithAria({ id, controlProps, errorMessage, helperText })} />

package/src/components/InputNumberField/InputNumberField.tsx

@@ -1,8 +1,8 @@
-import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
+import { Field, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { InputNumber, InputNumberProps } from '-/components/InputNumber';
 import { useId } from '-/hooks/useId';
 
-export type InputNumberFieldProps = FieldControlProps<InputNumberProps>;
+export type InputNumberFieldProps = ComposedFieldProps<InputNumberProps>;
 
 /**
  * A field wrapper for the InputNumber component.
@@ -31,6 +31,7 @@ export function InputNumberField({
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
             <InputNumber {...propsWithAria({ id, controlProps, errorMessage, helperText })} />

package/src/components/InputPhoneField/InputPhoneField.tsx

@@ -1,8 +1,8 @@
-import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
+import { Field, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { InputPhone, InputPhoneProps } from '-/components/InputPhone';
 import { useId } from '-/hooks/useId';
 
-export type InputPhoneFieldProps = FieldControlProps<InputPhoneProps>;
+export type InputPhoneFieldProps = ComposedFieldProps<InputPhoneProps>;
 
 /**
  * A field wrapper for the InputPhone component.
@@ -31,6 +31,7 @@ export function InputPhoneField({
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
             <InputPhone {...propsWithAria({ id, controlProps, errorMessage, helperText })} />

package/src/components/Link/Link.tsx

@@ -1,4 +1,3 @@
-import './link.scss';
 import { AnchorHTMLAttributes, ComponentType, lazy, LazyExoticComponent, Suspense } from 'react';
 import { CommonPropsLibrary, ElementProps } from '-/types/common';
 

package/src/components/PasswordField/PasswordField.tsx

@@ -1,8 +1,8 @@
-import { Field, FieldControlProps, propsWithAria } from '-/components/Field';
+import { Field, ComposedFieldProps, propsWithAria } from '-/components/Field';
 import { Password, PasswordProps } from '-/components/Password';
 import { useId } from '-/hooks/useId';
 
-export type PasswordFieldProps = FieldControlProps<PasswordProps>;
+export type PasswordFieldProps = ComposedFieldProps<PasswordProps>;
 
 /**
  * A field wrapper for the Password component.
@@ -31,6 +31,7 @@ export function PasswordField({
             helperText={helperText}
             label={label}
             labelTrailing={labelTrailing}
+            required={controlProps.required}
             style={style}
         >
             <Password {...propsWithAria({ id, controlProps, errorMessage, helperText })} />

package/src/components/RadioGroup/radio-group.scss

@@ -5,4 +5,8 @@
     max-width: 100%;
 
     --list-item-height: 'auto';
+
+    [data-bspk='list-item'] {
+        background: transparent;
+    }
 }

package/src/components/RadioGroupField/RadioGroupField.tsx

@@ -1,8 +1,8 @@
-import { FieldControlProps, Fieldset, propsWithAria } from '-/components/Field';
+import { ComposedFieldProps, Fieldset, propsWithAria } from '-/components/Field';
 import { RadioGroup, RadioGroupProps } from '-/components/RadioGroup';
 import { useId } from '-/hooks/useId';
 
-export type RadioGroupFieldProps = FieldControlProps<RadioGroupProps>;
+export type RadioGroupFieldProps = ComposedFieldProps<RadioGroupProps>;
 
 /**
  * A field wrapper for the RadioGroup component.