@bspk/ui 1.3.22 → 1.3.24

package/dist/hooks/useFloating.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFloating.js","sourceRoot":"","sources":["../../src/hooks/useFloating.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useFloating.js","sourceRoot":"","sources":["../../src/hooks/useFloating.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAOH,eAAe,EACf,KAAK,EACL,MAAM,EACN,IAAI,EACJ,UAAU,EACV,IAAI,GACP,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,MAAM,gBAAgB,GAAG,GAAG,CAAC;AA8C7B,MAAM,UAAU,WAAW,CAAC,EACxB,SAAS,GAAG,cAAc,EAC1B,QAAQ,EACR,QAAQ,GAAG,OAAO,EAClB,aAAa,GAAG,CAAC,EACjB,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,KAAK,GACG;IAMf,MAAM,CAAC,cAAc,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAsB;QAC3E,OAAO,EAAE,CAAC;QACV,aAAa,EAAE,MAAM;QACrB,OAAO,EAAE,MAAM;KAClB,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,IAAwD,EAAE,EAAE;QACnF,sBAAsB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;YAC9B,UAAU,EAAE,WAAW,gBAAgB,IAAI;YAC3C,GAAG,IAAI,CAAC,IAAI,CAAC;SAChB,CAAC,CAAC,CAAC;IACR,CAAC,CAAC;IAEF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,CAAC;IAEzE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAEnF,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAEjF,MAAM,eAAe,GAAG,UAAU,EAAE,CAAC;IACrC,MAAM,eAAe,GAAG,UAAU,EAAE,CAAC;IAErC,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,eAAe,CAAC,KAAK,EAAE,CAAC;QACxB,eAAe,CAAC,KAAK,EAAE,CAAC;QAExB,iEAAiE;QAEjE,qDAAqD;QACrD,IAAI,gBAAgB,KAAK,IAAI,IAAI,eAAe,KAAK,IAAI;YAAE,OAAO;QAElE,IAAI,IAAI,EAAE,CAAC;YACP,IAAI,eAAe,EAAE,KAAK,CAAC,GAAG;gBAC1B,iBAAiB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACzB,GAAG,IAAI;oBACP,OAAO,EAAE,CAAC;oBACV,aAAa,EAAE,MAAM;iBACxB,CAAC,CAAC,CAAC;YAER,eAAe,CAAC,GAAG,CAAC,GAAG,EAAE;gBACrB,iBAAiB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACzB,GAAG,IAAI;iBACV,CAAC,CAAC,CAAC;YACR,CAAC,EAAE,gBAAgB,CAAC,CAAC;YACrB,OAAO;QACX,CAAC;QAED,oCAAoC;QAEpC,eAAe,CAAC,GAAG,CAAC,GAAG,EAAE;YACrB,2DAA2D;YAC3D,IAAI,IAAI,IAAI,gBAAgB,KAAK,IAAI,IAAI,eAAe,KAAK,IAAI;gBAAE,OAAO;YAE1E,eAAe,CAAC,gBAAgB,EAAE,eAAe,EAAE;gBAC/C,SAAS,EAAE,SAAS;gBACpB,QAAQ;gBACR,UAAU,EAAE;oBACR,QAAQ,EAAE,OAAO,IAAI,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;oBACrE,MAAM,CAAC,aAAa,CAAC;oBACrB,IAAI,EAAE;oBACN,QAAQ;wBACJ,IAAI,CAAC;4BACD,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAmB;gCACtC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE;oCACnC,KAAK,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI;iCACtC,CAAC,CAAC;4BACP,CAAC;yBACJ,CAAC;iBACT;aACJ,CAAC,CAAC,IAAI,CAAC,CAAC,KAA4B,EAAE,EAAE;gBACrC,iBAAiB,CAAC,GAAG,EAAE,CAAC,CAAC;oBACrB,GAAG,EAAE,KAAK,CAAC,CAAC;oBACZ,IAAI,EAAE,KAAK,CAAC,CAAC;oBACb,QAAQ,EAAE,KAAK,CAAC,QAAQ;oBACxB,OAAO,EAAE,CAAC;oBACV,aAAa,EAAE,MAAM;oBACrB,OAAO,EAAE,SAAS;iBACrB,CAAC,CAAC,CAAC;gBAEJ,eAAe,CAAC,GAAG,CAAC,GAAG,EAAE;oBACrB,iBAAiB,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;wBACzB,GAAG,IAAI;wBACP,OAAO,EAAE,CAAC;wBACV,aAAa,EAAE,MAAM;wBACrB,OAAO,EAAE,SAAS;qBACrB,CAAC,CAAC,CAAC;gBACR,CAAC,EAAE,EAAE,CAAC,CAAC;gBAEP,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;YAC5C,CAAC,CAAC,CAAC;QACP,CAAC,EAAE,EAAE,CAAC,CAAC;IACX,CAAC,EAAE;QACC,eAAe;QACf,eAAe;QACf,gBAAgB;QAChB,eAAe;QACf,IAAI;QACJ,SAAS;QACT,QAAQ;QACR,QAAQ;QACR,aAAa;QACb,QAAQ;KACX,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACX,OAAO,EAAE,CAAC;QAEV,OAAO,GAAG,EAAE;YACR,eAAe,CAAC,KAAK,EAAE,CAAC;YACxB,eAAe,CAAC,KAAK,EAAE,CAAC;QAC5B,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,IAAI,gBAAgB,KAAK,IAAI,IAAI,eAAe,KAAK,IAAI;YAAE,OAAO;QAE1E,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,EAAE,eAAe,EAAE,OAAO,CAAC,CAAC;QAEvE,OAAO,GAAG,EAAE;YACR,OAAO,EAAE,CAAC;QACd,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEvD,OAAO;QACH,QAAQ,EAAE;YACN,SAAS,EAAE,gBAAgB;YAC3B,QAAQ,EAAE,eAAe;YACzB,YAAY,EAAE,mBAAmB;YACjC,WAAW,EAAE,kBAAkB;SAClC;QACD,cAAc;QACd,cAAc;QACd,gBAAgB,EAAE,cAAc,EAAE,MAAM,EAAE,SAAS;KACtD,CAAC;AACN,CAAC;AAED,sDAAsD"}

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.24",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [

package/src/components/Breadcrumb/BreadcrumbDropdown.tsx

@@ -131,7 +131,13 @@ export function BreadcrumbDropdown({ items: itemsProp, id, scrollLimit }: Breadc
                     }}
                 >
                     {items.map((item) => (
-                        <ListItem key={item.id} {...item} active={activeElementId === item.id} tabIndex={-1} />
+                        <ListItem
+                            key={item.id}
+                            role="menuitem"
+                            {...item}
+                            active={activeElementId === item.id}
+                            tabIndex={-1}
+                        />
                     ))}
                 </Menu>
             )}

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';