@byline/ui 3.15.2 → 3.16.1

package/dist/components/inputs/checkbox_module.css

@@ -32,6 +32,10 @@
     outline-color: var(--ring-color);
   }
 
+  :is(.checkbox-p0iZ1T:focus-visible, .byline-checkbox:focus-visible) {
+    outline-color: var(--checkbox-variant-outline-ring-color);
+  }
+
   :is(.checkbox-p0iZ1T[data-disabled], .byline-checkbox[data-disabled]) {
     pointer-events: none;
   }

package/dist/components/inputs/help-text.d.ts

@@ -1,8 +1,9 @@
 import type React from 'react';
 interface HelpTextProps {
+    id?: string;
     className?: string;
     size?: 'sm' | 'md' | 'lg';
     text: string;
 }
-export declare function HelpText({ className, size, text }: HelpTextProps): React.JSX.Element;
+export declare function HelpText({ id, className, size, text }: HelpTextProps): React.JSX.Element;
 export {};

package/dist/components/inputs/help-text.js

@@ -1,8 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import help_text_module from "./help-text.module.js";
-function HelpText({ className, size, text }) {
+function HelpText({ id, className, size, text }) {
     return /*#__PURE__*/ jsx("p", {
+        id: id,
         className: classnames('byline-help-text', help_text_module.text, size && help_text_module[size], className),
         children: text
     });

package/dist/components/inputs/input.js

@@ -29,11 +29,11 @@ const Input = ({ ref, id, name, type = 'text', variant = 'outlined', inputSize =
                         required: required,
                         autoComplete: autoComplete,
                         placeholder: placeHolder,
-                        "aria-labelledby": `label-for-${id}`,
+                        "aria-labelledby": null != label ? `label-for-${id}` : void 0,
                         "aria-invalid": error,
                         "aria-required": required,
                         "aria-errormessage": errorText,
-                        "aria-describedby": error ? `error-for-${id}` : void 0,
+                        "aria-describedby": error ? `error-for-${id}` : helpText.length > 0 ? `help-for-${id}` : void 0,
                         className: classnames('byline-input', `byline-input-${variant}`, `byline-input-${inputSize}`, `byline-input-${intent}`, input_module.input, input_module[variant], input_module[inputSize], input_module[intent], {
                             [input_module["start-adornment-padding"]]: null != startAdornment
                         }, {
@@ -54,6 +54,7 @@ const Input = ({ ref, id, name, type = 'text', variant = 'outlined', inputSize =
                 size: inputSize,
                 text: errorText ?? helpText
             }) : helpText?.length > 0 && /*#__PURE__*/ jsx(HelpText, {
+                id: `help-for-${id}`,
                 size: inputSize,
                 text: helpText
             })

package/dist/components/inputs/label.js

@@ -9,6 +9,7 @@ function Label({ className, id, htmlFor, label, required }) {
         children: [
             label,
             required && /*#__PURE__*/ jsx("span", {
+                "aria-hidden": "true",
                 className: label_module.required,
                 children: "\xa0*"
             })

package/dist/components/inputs/text-area.js

@@ -23,11 +23,11 @@ const text_area_TextArea = function({ ref, id, name, label, rows = 4, required =
                 rows: rows,
                 autoComplete: autoComplete,
                 placeholder: placeHolder,
-                "aria-labelledby": `label-for-${id}`,
+                "aria-labelledby": null != label ? `label-for-${id}` : void 0,
                 "aria-invalid": error,
                 "aria-required": required,
                 "aria-errormessage": errorText,
-                "aria-describedby": error ? `error-for-${id}` : void 0,
+                "aria-describedby": error ? `error-for-${id}` : helpText.length > 0 ? `help-for-${id}` : void 0,
                 className: classnames('byline-text-area', `byline-text-area-${variant}`, `byline-text-area-${intent}`, input_module.input, input_module[variant], input_module[intent], text_area_module["text-area"], text_area_module[variant], {
                     [input_module.error]: error
                 }, className),
@@ -37,6 +37,7 @@ const text_area_TextArea = function({ ref, id, name, label, rows = 4, required =
                 id: `error-for-${id}`,
                 text: errorText ?? helpText
             }) : helpText?.length > 0 && /*#__PURE__*/ jsx(HelpText, {
+                id: `help-for-${id}`,
                 text: helpText
             })
         ]

package/dist/styles/styles.css

@@ -630,7 +630,7 @@
     --stroke-noeffect: var(--gray-500);
     --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * .75) c h);
     --stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * 1.5) calc(c * .8) h);
-    --ring-noeffect: var(--gray-200);
+    --ring-noeffect: var(--gray-500);
     --gradient-noeffect-start: var(--gray-100);
     --gradient-noeffect-end: var(--gray-200);
     --gradient-noeffect-foreground: black;
@@ -891,7 +891,7 @@
     --stroke-noeffect: var(--gray-500);
     --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 1.2) c h);
     --stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * .8) calc(c * .8) h);
-    --ring-noeffect: var(--gray-900);
+    --ring-noeffect: var(--gray-200);
     --gradient-noeffect-start: var(--gray-700);
     --gradient-noeffect-end: var(--gray-800);
     --gradient-noeffect-foreground: white;
@@ -1149,7 +1149,7 @@
     --stroke-noeffect: var(--gray-500);
     --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * .75) c h);
     --stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * 1.5) calc(c * .8) h);
-    --ring-noeffect: var(--gray-200);
+    --ring-noeffect: var(--gray-500);
     --gradient-noeffect-start: var(--gray-100);
     --gradient-noeffect-end: var(--gray-200);
     --gradient-noeffect-foreground: black;

package/dist/widgets/search/search.d.ts

@@ -6,6 +6,7 @@ export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>
     inputClassName?: ClassName;
     intent?: Intent;
     className?: ClassName;
+    ariaLabel?: string;
     ariaLabelForSearch?: string;
     ariaLabelForClear?: string;
     onClear?: () => void;
@@ -17,4 +18,4 @@ export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>
     };
     placeHolderText?: string;
 }
-export declare function Search({ variant, inputSize, inputClassName, intent, className, onClear, onEnter, onSearch, validatorFn, placeHolderText, ariaLabelForSearch, ariaLabelForClear, ...rest }: SearchProps): React.JSX.Element;
+export declare function Search({ variant, inputSize, inputClassName, intent, className, onClear, onEnter, onSearch, validatorFn, placeHolderText, ariaLabel, ariaLabelForSearch, ariaLabelForClear, ...rest }: SearchProps): React.JSX.Element;

package/dist/widgets/search/search.js

@@ -12,7 +12,7 @@ function fallbackSearchHandler(value) {
     else params.delete('query');
     window.location.search = params.toString();
 }
-function Search({ variant, inputSize, inputClassName, intent, className, onClear, onEnter, onSearch, validatorFn, placeHolderText = 'Search', ariaLabelForSearch = 'search', ariaLabelForClear = 'clear', ...rest }) {
+function Search({ variant, inputSize, inputClassName, intent, className, onClear, onEnter, onSearch, validatorFn, placeHolderText = 'Search', ariaLabel, ariaLabelForSearch = 'Search', ariaLabelForClear = 'Clear search', ...rest }) {
     const [search, setSearch] = useState(null);
     const inputRef = useRef(null);
     const handleClear = ()=>{
@@ -64,20 +64,17 @@ function Search({ variant, inputSize, inputClassName, intent, className, onClear
             id: "search",
             defaultValue: search ?? '',
             name: "search",
+            "aria-label": ariaLabel ?? placeHolderText,
             placeHolder: placeHolderText,
             disabled: false,
             error: false,
             startAdornment: /*#__PURE__*/ jsx(InputAdornment, {
                 position: "start",
                 children: /*#__PURE__*/ jsx(IconButton, {
-                    role: "button",
                     intent: "noeffect",
                     variant: "text",
-                    style: {
-                        outline: 'none'
-                    },
                     ripple: false,
-                    "arial-label": ariaLabelForSearch,
+                    "aria-label": ariaLabelForSearch,
                     size: "xs",
                     onClick: ()=>{
                         handleSearch();
@@ -91,13 +88,9 @@ function Search({ variant, inputSize, inputClassName, intent, className, onClear
             endAdornment: /*#__PURE__*/ jsx(InputAdornment, {
                 position: "end",
                 children: /*#__PURE__*/ jsx(IconButton, {
-                    role: "button",
                     intent: "noeffect",
-                    style: {
-                        outline: 'none'
-                    },
                     variant: "text",
-                    "arial-label": ariaLabelForClear,
+                    "aria-label": ariaLabelForClear,
                     size: "xs",
                     onClick: ()=>{
                         handleClear();

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "3.15.2",
+  "version": "3.16.1",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -53,16 +53,13 @@
   "dependencies": {
     "@base-ui/react": "^1.5.0",
     "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "classnames": "^2.5.1",
     "date-fns": "^4.2.1",
     "motion": "^12.40.0",
     "npm-run-all": "^4.1.5",
     "react-day-picker": "^10.0.1",
-    "zod": "^4.4.3",
-    "@byline/core": "3.15.2"
+    "zod": "^4.4.3"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/inputs/checkbox.module.css

@@ -46,6 +46,14 @@
     outline-color: var(--ring-color);
   }
 
+  /* a11y (WCAG 2.4.7): show a focus ring on keyboard focus regardless of
+     checked state. The intent-level ring color is always defined, whereas
+     --ring-color is only set on [data-checked], so use it directly here. */
+  .checkbox:focus-visible,
+  :global(.byline-checkbox):focus-visible {
+    outline-color: var(--checkbox-variant-outline-ring-color);
+  }
+
   .checkbox[data-disabled],
   :global(.byline-checkbox)[data-disabled] {
     pointer-events: none;

package/src/components/inputs/help-text.tsx

@@ -5,13 +5,16 @@ import cx from 'classnames'
 import styles from './help-text.module.css'
 
 interface HelpTextProps {
+  id?: string
   className?: string
   size?: 'sm' | 'md' | 'lg'
   text: string
 }
 
-export function HelpText({ className, size, text }: HelpTextProps): React.JSX.Element {
+export function HelpText({ id, className, size, text }: HelpTextProps): React.JSX.Element {
   return (
-    <p className={cx('byline-help-text', styles.text, size && styles[size], className)}>{text}</p>
+    <p id={id} className={cx('byline-help-text', styles.text, size && styles[size], className)}>
+      {text}
+    </p>
   )
 }

package/src/components/inputs/input.tsx

@@ -76,11 +76,13 @@ export const Input = <_C extends React.ElementType = 'input'>({
           required={required}
           autoComplete={autoComplete}
           placeholder={placeHolder}
-          aria-labelledby={`label-for-${id}`}
+          aria-labelledby={label != null ? `label-for-${id}` : undefined}
           aria-invalid={error}
           aria-required={required}
           aria-errormessage={errorText}
-          aria-describedby={error ? `error-for-${id}` : undefined}
+          aria-describedby={
+            error ? `error-for-${id}` : helpText.length > 0 ? `help-for-${id}` : undefined
+          }
           className={cx(
             'byline-input',
             `byline-input-${variant}`,
@@ -108,7 +110,7 @@ export const Input = <_C extends React.ElementType = 'input'>({
       {error ? (
         <ErrorText id={`error-for-${id}`} size={inputSize} text={errorText ?? helpText} />
       ) : (
-        helpText?.length > 0 && <HelpText size={inputSize} text={helpText} />
+        helpText?.length > 0 && <HelpText id={`help-for-${id}`} size={inputSize} text={helpText} />
       )}
     </div>
   )

package/src/components/inputs/label.tsx

@@ -20,7 +20,14 @@ export function Label({ className, id, htmlFor, label, required }: LabelProps):
       className={cx('label', styles.label, className)}
     >
       {label}
-      {required && <span className={styles.required}>&nbsp;*</span>}
+      {/* a11y: the input carries aria-required, so the visual asterisk is
+          decorative — hide it from the accessible name (it would otherwise be
+          read as part of the label via aria-labelledby). */}
+      {required && (
+        <span aria-hidden="true" className={styles.required}>
+          &nbsp;*
+        </span>
+      )}
     </label>
   )
 }

package/src/components/inputs/text-area.tsx

@@ -54,11 +54,13 @@ export const TextArea = function TextArea({
         rows={rows}
         autoComplete={autoComplete}
         placeholder={placeHolder}
-        aria-labelledby={`label-for-${id}`}
+        aria-labelledby={label != null ? `label-for-${id}` : undefined}
         aria-invalid={error}
         aria-required={required}
         aria-errormessage={errorText}
-        aria-describedby={error ? `error-for-${id}` : undefined}
+        aria-describedby={
+          error ? `error-for-${id}` : helpText.length > 0 ? `help-for-${id}` : undefined
+        }
         className={cx(
           'byline-text-area',
           `byline-text-area-${variant}`,
@@ -76,7 +78,7 @@ export const TextArea = function TextArea({
       {error ? (
         <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
       ) : (
-        helpText?.length > 0 && <HelpText text={helpText} />
+        helpText?.length > 0 && <HelpText id={`help-for-${id}`} text={helpText} />
       )}
     </div>
   )

package/src/styles/functional/colors.css

@@ -210,7 +210,9 @@
     --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 0.75) c h);
     --stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * 1.5) calc(c * 0.8) h);
 
-    --ring-noeffect: var(--gray-200);
+    /* a11y: gray-200 (#C0C0C0) is only 1.8:1 on white; gray-500 (#666666) is
+       5.78:1, clearing the WCAG 1.4.11 / 2.4.7 3:1 non-text contrast minimum. */
+    --ring-noeffect: var(--gray-500);
 
     --gradient-noeffect-start: var(--gray-100);
     --gradient-noeffect-end: var(--gray-200);
@@ -637,7 +639,9 @@
     --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 1.2) c h);
     --stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * 0.8) calc(c * 0.8) h);
 
-    --ring-noeffect: var(--gray-900);
+    /* a11y: a dark ring (gray-900) is ~1.1:1 on the dark canvas — effectively
+       invisible. A light ring (gray-200) gives 5.5–10:1 on dark surfaces. */
+    --ring-noeffect: var(--gray-200);
 
     --gradient-noeffect-start: var(--gray-700);
     --gradient-noeffect-end: var(--gray-800);
@@ -1051,7 +1055,9 @@
     --stroke-noeffect-hover: oklch(from var(--gray-500) calc(l * 0.75) c h);
     --stroke-noeffect-disabled: oklch(from var(--gray-500) calc(l * 1.5) calc(c * 0.8) h);
 
-    --ring-noeffect: var(--gray-200);
+    /* a11y: gray-200 (#C0C0C0) is only 1.8:1 on white; gray-500 (#666666) is
+       5.78:1, clearing the WCAG 1.4.11 / 2.4.7 3:1 non-text contrast minimum. */
+    --ring-noeffect: var(--gray-500);
 
     --gradient-noeffect-start: var(--gray-100);
     --gradient-noeffect-end: var(--gray-200);

package/src/widgets/search/search.tsx

@@ -15,6 +15,7 @@ export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>
   inputClassName?: ClassName
   intent?: Intent
   className?: ClassName
+  ariaLabel?: string
   ariaLabelForSearch?: string
   ariaLabelForClear?: string
   onClear?: () => void
@@ -52,8 +53,9 @@ export function Search({
   onSearch,
   validatorFn,
   placeHolderText = 'Search',
-  ariaLabelForSearch = 'search',
-  ariaLabelForClear = 'clear',
+  ariaLabel,
+  ariaLabelForSearch = 'Search',
+  ariaLabelForClear = 'Clear search',
   ...rest
 }: SearchProps): React.JSX.Element {
   const [search, setSearch] = useState<null | string>(null)
@@ -144,18 +146,17 @@ export function Search({
         id="search"
         defaultValue={search ?? ''}
         name="search"
+        aria-label={ariaLabel ?? placeHolderText}
         placeHolder={placeHolderText}
         disabled={false}
         error={false}
         startAdornment={
           <InputAdornment position="start">
             <IconButton
-              role="button"
               intent="noeffect"
               variant="text"
-              style={{ outline: 'none' }}
               ripple={false}
-              arial-label={ariaLabelForSearch}
+              aria-label={ariaLabelForSearch}
               size="xs"
               onClick={() => {
                 handleSearch()
@@ -168,11 +169,9 @@ export function Search({
         endAdornment={
           <InputAdornment position="end">
             <IconButton
-              role="button"
               intent="noeffect"
-              style={{ outline: 'none' }}
               variant="text"
-              arial-label={ariaLabelForClear}
+              aria-label={ariaLabelForClear}
               size="xs"
               onClick={() => {
                 handleClear()