@financial-times/o3-form 0.4.0 → 0.5.0

package/cjs/CheckBox.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CheckBoxProps, F as FormFieldsetProps } from './index-CHdbHHZ0.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-D6jDTWIC.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

package/cjs/CheckBox.js

@@ -1,8 +1,13 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
 var _react = require('react');
+var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
+const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-checkbox-input");
 const CheckBoxItem = (props) => {
   let { inputId, attributes, optional, error } = props;
+  if (!inputId) {
+    inputId = uniqueId("_");
+  }
   const classNames = ["o3-form-input-checkbox__input", "o3-visually-hidden"];
   if (error) {
     classNames.push("o3-form-input-error");

package/cjs/Error-summary.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as ErrorSummaryProps } from './index-CHdbHHZ0.js';
+import { E as ErrorSummaryProps } from './index-D6jDTWIC.js';
 
 declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/PasswordInput.d.ts

@@ -1,9 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as FormFieldProps } from './index-CHdbHHZ0.js';
+import { P as PasswordInputProps } from './index-D6jDTWIC.js';
 
-interface PasswordInputProps extends FormFieldProps {
-    disabled?: boolean;
-}
 declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
 
 export { PasswordInput };

package/cjs/PasswordInput.js

@@ -1,6 +1,8 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
 var _CheckBox = require('./CheckBox');
+const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-password-input");
 const PasswordInput = ({
   label,
   feedback,
@@ -10,6 +12,8 @@ const PasswordInput = ({
   inputId,
   optional
 }) => {
+  const id = inputId || uniqueId("_");
+  const showPasswordId = `${id}-showPassword`;
   const inputClasses = ["o3-form", "o3-form-text-input"];
   if (feedback && feedback.type === "error") {
     inputClasses.push("o3-form-text-input--error");
@@ -21,13 +25,13 @@ const PasswordInput = ({
         label,
         feedback,
         description,
-        inputId,
+        inputId: id,
         optional,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "input",
           {
             ...attributes,
-            id: inputId,
+            id,
             disabled,
             className: inputClasses.join(" "),
             required: !optional,
@@ -42,11 +46,11 @@ const PasswordInput = ({
         _CheckBox.CheckBoxItem,
         {
           attributes: { disabled },
-          inputId: "showPassword",
+          inputId: showPasswordId,
           checkboxLabel: "Show Password"
         }
       ),
-      !disabled && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { href: "", children: "Forgot password?" })
+      !disabled && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { className: "o3-typography-link", href: "", children: "Forgot password?" })
     ] })
   ] });
 };

package/cjs/RadioButton.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RadioButtonProps, F as FormFieldsetProps } from './index-CHdbHHZ0.js';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-D6jDTWIC.js';
 
 declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
 declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;

package/cjs/RadioButton.js

@@ -1,12 +1,14 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
 var _react = require('react');
+var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
+const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-radio-button-input");
 const RadioButtonItem = (props) => {
   let { inputId, attributes, optional, error } = props;
-  const classNames = [
-    "o3-form-input-radio-button",
-    "o3-visually-hidden"
-  ];
+  if (!inputId) {
+    inputId = uniqueId("_");
+  }
+  const classNames = ["o3-form-input-radio-button", "o3-visually-hidden"];
   if (error) {
     classNames.push("o3-form-input-error");
   }

package/cjs/TextInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TextInputProps } from './index-CHdbHHZ0.js';
+import { T as TextInputProps } from './index-D6jDTWIC.js';
 
 declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/TextInput.js

@@ -1,5 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _outils = require('@financial-times/o-utils');
 var _FormField = require('./fieldComponents/FormField');
+const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-text-input");
 const TextInput = ({
   label,
   feedback,
@@ -10,6 +12,7 @@ const TextInput = ({
   inputId,
   optional
 }) => {
+  const id = inputId || uniqueId("_");
   const inputClasses = ["o3-form", "o3-form-text-input"];
   if (feedback && feedback.type === "error") {
     inputClasses.push("o3-form-text-input--error");
@@ -23,13 +26,13 @@ const TextInput = ({
       label,
       feedback,
       description,
-      inputId,
+      inputId: id,
       optional,
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "input",
         {
           ...attributes,
-          id: inputId,
+          id,
           disabled,
           className: inputClasses.join(" "),
           required: !optional,

package/cjs/fieldComponents/Feedback.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as FeedbackProps } from '../index-CHdbHHZ0.js';
+import { a as FeedbackProps } from '../index-D6jDTWIC.js';
 
 declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/fieldComponents/FormField.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as FormFieldProps, F as FormFieldsetProps } from '../index-CHdbHHZ0.js';
+import { b as FormFieldProps, F as FormFieldsetProps } from '../index-D6jDTWIC.js';
 
-declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const TitledFormField: ({ label, description, feedback, children, optional }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const FormFieldset: ({ label, description, feedback, children, optional }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
+declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const FormFieldset: ({ label, description, feedback, children, optional, }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
 
 export { FormFieldset, LabeledFormField, TitledFormField };

package/cjs/fieldComponents/FormField.js

@@ -56,8 +56,11 @@ const FormFieldset = ({
     labelClasses.push("o3-form-field--optional");
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "fieldset", { className: "o3-form-field", "aria-describedby": `${descriptionId}`, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "legend", { className: labelClasses.join(" "), children: label }),
-    description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "o3-form-input__description", id: descriptionId, children: description }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "legend", { className: labelClasses.join(" "), children: [
+      label,
+      " ",
+      description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "o3-form-input__description", id: descriptionId, children: description })
+    ] }),
     children,
     feedback && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Feedback.Feedback, { ...feedback })
   ] });

package/cjs/{index-CHdbHHZ0.d.ts → index-D6jDTWIC.d.ts}

@@ -11,6 +11,10 @@ interface TextInputProps extends BaseInputProps {
     length?: 2 | 3 | 4 | 5;
     feedback?: FeedbackProps;
 }
+interface PasswordInputProps extends BaseInputProps {
+    disabled?: boolean;
+    feedback?: FeedbackProps;
+}
 interface CheckBoxProps extends BaseInputProps {
     inputId: string;
     checkboxLabel: string;
@@ -45,4 +49,4 @@ type ErrorSummaryProps = {
     }[];
 };
 
-export type { CheckBoxProps as C, ErrorSummaryProps as E, FormFieldsetProps as F, RadioButtonProps as R, TextInputProps as T, FormFieldProps as a, FeedbackProps as b };
+export type { CheckBoxProps as C, ErrorSummaryProps as E, FormFieldsetProps as F, PasswordInputProps as P, RadioButtonProps as R, TextInputProps as T, FeedbackProps as a, FormFieldProps as b };

package/cjs/index.d.ts

@@ -7,4 +7,4 @@ export { ErrorSummary } from './Error-summary.js';
 export { PasswordInput } from './PasswordInput.js';
 export { TextInput } from './TextInput.js';
 import 'react/jsx-runtime';
-import './index-CHdbHHZ0.js';
+import './index-D6jDTWIC.js';

package/css/core.css

@@ -0,0 +1,23 @@
+@import "@financial-times/o3-foundation/css/core.css";
+@import "./main.css";
+
+/* src/css/tokens/core/o3-form/_variables.css */
+[data-o3-brand=core] .o3-form {
+  --_o3-form-error-summary-background-color: rgba(204, 0, 0, 0.14);
+  --_o3-form-input-border-radius: 6px;
+  --_o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
+  --_o3-form-input-border: 2px solid var(--o3-color-palette-black-30);
+  --_o3-form-color-use-case-selected-disabled: var(--o3-color-use-case-button-disabled);
+  --_o3-form-color-use-case-border-disabled: var(--o3-color-palette-black-10);
+  --_o3-form-color-use-case-border: var(--o3-color-palette-black-50);
+  --_o3-form-color-use-case-background-disabled: var(--o3-color-palette-black-10);
+  --_o3-form-color-use-case-background: var(--o3-color-palette-white);
+  --_o3-form-input-border-error: 2px solid var(--o3-color-use-case-error);
+  --_o3-form-color-use-case-selected-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-selected-hover: var(--o3-color-use-case-button-hover);
+  --_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
+  --_o3-form-color-use-case-border-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-border-hover: var(--o3-color-use-case-button-hover);
+}
+
+/* src/css/brands/core.css */

package/css/internal.css

@@ -0,0 +1,23 @@
+@import "@financial-times/o3-foundation/css/internal.css";
+@import "./main.css";
+
+/* src/css/tokens/internal/o3-form/_variables.css */
+[data-o3-brand=internal] .o3-form {
+  --_o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
+  --_o3-form-error-summary-background-color: rgba(204, 0, 0, 0.14);
+  --_o3-form-input-border-radius: 6px;
+  --_o3-form-color-use-case-selected-disabled: var(--o3-color-palette-black-5);
+  --_o3-form-color-use-case-border-disabled: var(--o3-color-use-case-button-disabled);
+  --_o3-form-color-use-case-border: var(--o3-color-palette-black-50);
+  --_o3-form-color-use-case-background-disabled: var(--o3-color-palette-black-10);
+  --_o3-form-color-use-case-background: var(--o3-color-palette-white);
+  --_o3-form-input-border: 2px solid var(--o3-color-palette-black-30);
+  --_o3-form-color-use-case-selected-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-selected-hover: var(--o3-color-use-case-button-hover);
+  --_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
+  --_o3-form-color-use-case-border-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-border-hover: var(--o3-color-use-case-button-hover);
+  --_o3-form-input-border-error: 2px solid var(--o3-color-use-case-error);
+}
+
+/* src/css/brands/internal.css */

package/css/main.css

@@ -19,6 +19,13 @@
   padding: 0;
   border: 0;
 }
+.o3-form-field:where(fieldset) legend {
+  margin-bottom: var(--o3-spacing-3xs);
+}
+.o3-form-field:where(fieldset) legend .o3-form-input__description {
+  margin-top: var(--o3-spacing-5xs);
+  display: block;
+}
 .o3-form-field :is(.o3-form-field__label, .o3-form-field__title, .o3-form-field__legend) {
   font-size: var(--o3-font-size-metric2-negative-1);
   line-height: var(--o3-font-lineheight-metric2-negative-1);
@@ -31,9 +38,6 @@
   color: var(--o3-color-use-case-muted-text);
   font-weight: var(--o3-font-weight-regular);
 }
-.o3-form-field .o3-form-field__legend {
-  padding: 0 0 var(--o3-spacing-5xs) 0;
-}
 .o3-form-field .o3-form-input__description {
   font-size: var(--o3-font-size-metric2-negative-1);
   line-height: var(--o3-font-lineheight-metric2-negative-1);
@@ -79,7 +83,7 @@
 .o3-form-text-input {
   border: var(--_o3-form-input-border);
   padding: var(--o3-spacing-3xs) var(--o3-spacing-2xs);
-  background-color: var(--o3-form-color-use-case-background);
+  background-color: var(--_o3-form-color-use-case-background);
   box-sizing: border-box;
   border-radius: var(--_o3-form-input-border-radius);
   --o3-grid-columns-to-span-count: 4;
@@ -102,13 +106,13 @@
 }
 .o3-form-text-input--error {
   border: var(--_o3-form-input-border-error);
-  background-color: var(--o3-form-color-use-case-background-error);
+  background-color: var(--_o3-form-color-use-case-background-error);
 }
 input[class*=o3-form-text-input][type=password]:disabled,
 input[class*=o3-form-text-input][type=text]:disabled {
   color: var(--o3-color-use-case-muted-text);
-  background-color: var(--o3-form-color-use-case-background-disabled);
-  border-color: var(--o3-form-color-use-case-border-disabled);
+  background-color: var(--_o3-form-color-use-case-background-disabled);
+  border-color: var(--_o3-form-color-use-case-border-disabled);
 }
 
 /* src/css/components/checkbox.css */
@@ -123,17 +127,17 @@ input[class*=o3-form-text-input][type=text]:disabled {
   box-sizing: border-box;
 }
 .o3-form-input-checkbox__input:hover + label::before {
-  border-color: var(--o3-form-color-use-case-selected-hover);
+  border-color: var(--_o3-form-color-use-case-selected-hover);
 }
 .o3-form-input-checkbox__input:active + label::before {
-  border-color: var(--o3-form-color-use-case-selected-active);
+  border-color: var(--_o3-form-color-use-case-selected-active);
 }
 .o3-form-input-checkbox__input:checked + label::after {
   position: absolute;
   content: "";
   width: var(--o3-spacing-s);
   height: var(--o3-spacing-s);
-  background-color: var(--o3-form-color-use-case-background);
+  background-color: var(--_o3-form-color-use-case-background);
   -webkit-mask-image: var(--o3-icons-ft-icon-tick);
   mask-image: var(--o3-icons-ft-icon-tick);
   -webkit-mask-repeat: no-repeat;
@@ -142,26 +146,26 @@ input[class*=o3-form-text-input][type=text]:disabled {
   mask-size: contain;
 }
 .o3-form-input-checkbox__input:checked + label::before {
-  background-color: var(--o3-form-color-use-case-selected-active);
-  border-color: var(--o3-form-color-use-case-selected-active);
+  background-color: var(--_o3-form-color-use-case-selected);
+  border-color: var(--_o3-form-color-use-case-selected);
 }
 .o3-form-input-checkbox__input:checked:hover + label::before {
-  background-color: var(--o3-form-color-use-case-selected-hover);
-  border-color: var(--o3-form-color-use-case-selected-hover);
+  background-color: var(--_o3-form-color-use-case-selected-hover);
+  border-color: var(--_o3-form-color-use-case-selected-hover);
 }
 .o3-form-input-checkbox__input:checked:active + label::before {
-  background-color: var(--o3-form-color-use-case-selected-active);
-  border-color: var(--o3-form-color-use-case-selected-active);
+  background-color: var(--_o3-form-color-use-case-selected-active);
+  border-color: var(--_o3-form-color-use-case-selected-active);
 }
 .o3-form-input-checkbox__input:disabled + label::before {
-  border-color: var(--o3-form-color-use-case-border-disabled);
+  border-color: var(--_o3-form-color-use-case-border-disabled);
 }
 .o3-form-input-checkbox__input:disabled + label {
-  color: var(--o3-form-color-use-case-border-disabled);
+  color: var(--_o3-form-color-use-case-border-disabled);
 }
 .o3-form-input-checkbox__input:checked:disabled + label::before {
-  background-color: var(--o3-form-color-use-case-selected-disabled);
-  border-color: var(--o3-form-color-use-case-selected-disabled);
+  background-color: var(--_o3-form-color-use-case-selected-disabled);
+  border-color: var(--_o3-form-color-use-case-selected-disabled);
 }
 .o3-form-input-checkbox__input.o3-form-input-error + label::before {
   border-color: var(--o3-color-use-case-error);
@@ -175,15 +179,15 @@ input[class*=o3-form-text-input][type=text]:disabled {
   background-color: var(--o3-color-use-case-error);
 }
 .o3-form-input-checkbox__input:indeterminate + label::before {
-  border-color: var(--o3-form-color-use-case-selected-active);
-  background-color: var(--o3-form-color-use-case-selected-active);
+  border-color: var(--_o3-form-color-use-case-selected);
+  background-color: var(--_o3-form-color-use-case-selected);
 }
 .o3-form-input-checkbox__input:indeterminate + label::after {
   position: absolute;
   content: "";
   width: var(--o3-spacing-s);
   height: var(--o3-spacing-s);
-  background-color: var(--o3-form-color-use-case-background);
+  background-color: var(--_o3-form-color-use-case-background);
   -webkit-mask-image: var(--o3-icons-ft-icon-minus);
   mask-image: var(--o3-icons-ft-icon-minus);
   -webkit-mask-repeat: no-repeat;
@@ -192,13 +196,13 @@ input[class*=o3-form-text-input][type=text]:disabled {
   mask-size: contain;
 }
 .o3-form-input-checkbox__input:indeterminate:hover + label::before {
-  border-color: var(--o3-form-color-use-case-selected-hover);
-  background-color: var(--o3-form-color-use-case-selected-hover);
+  border-color: var(--_o3-form-color-use-case-selected-hover);
+  background-color: var(--_o3-form-color-use-case-selected-hover);
 }
 .o3-form-input-checkbox__input:indeterminate:active + label::before,
 .o3-form-input-checkbox__input:indeterminate:disabled + label::before {
-  border-color: var(--o3-form-color-use-case-selected-hover);
-  background-color: var(--o3-form-color-use-case-selected-hover);
+  border-color: var(--_o3-form-color-use-case-selected-hover);
+  background-color: var(--_o3-form-color-use-case-selected-hover);
 }
 .o3-form-input-checkbox__input.o3-form-input-error:indeterminate + label::before {
   border-color: var(--o3-color-use-case-error);
@@ -207,6 +211,19 @@ input[class*=o3-form-text-input][type=text]:disabled {
 .o3-form-input-checkbox__input.o3-form-input-error:indeterminate + label::after {
   background-color: var(--o3-color-use-case-error);
 }
+.o3-form-input-checkbox__input:focus + label::before {
+  box-shadow: var(--o3-focus-use-case-ring-inner), var(--03-focus-use-case-ring-outer);
+  outline: 3px solid transparent;
+}
+@supports selector(:focus-visible) {
+  .o3-form-input-checkbox__input:focus + label::before {
+    box-shadow: unset;
+  }
+  .o3-form-input-checkbox__input:focus-visible + label::before {
+    box-shadow: var(--o3-focus-use-case-ring-inner), var(--o3-focus-use-case-ring-outer);
+    outline: 3px solid transparent;
+  }
+}
 .o3-form-input-checkbox__label {
   display: flex;
   align-items: center;
@@ -215,10 +232,6 @@ input[class*=o3-form-text-input][type=text]:disabled {
   font-weight: var(--o3-typography-use-case-body-small-font-weight);
   color: var(--o3-color-use-case-body-text);
 }
-.o3-form-input-checkbox__label:focus-visible {
-  padding: var(--o3-spacing-5xs);
-  margin: calc(-1 * var(--o3-spacing-5xs)) 0 calc(-1 * var(--o3-spacing-5xs)) calc(-1 * var(--o3-spacing-5xs));
-}
 
 /* src/css/components/radio-button.css */
 .o3-form-input-radio-button + label::before {
@@ -232,55 +245,68 @@ input[class*=o3-form-text-input][type=text]:disabled {
   box-sizing: border-box;
 }
 .o3-form-input-radio-button:hover + label::before {
-  border-color: var(--o3-form-color-use-case-border-hover);
+  border-color: var(--_o3-form-color-use-case-border-hover);
 }
 .o3-form-input-radio-button:active + label::before {
-  border-color: var(--o3-form-color-use-case-border-active);
+  border-color: var(--_o3-form-color-use-case-border-active);
 }
 .o3-form-input-radio-button:checked + label::before {
-  border-color: var(--o3-form-color-use-case-selected);
+  border-color: var(--_o3-form-color-use-case-selected);
 }
 .o3-form-input-radio-button:checked + label::after {
   position: absolute;
   content: "";
   width: var(--o3-spacing-3xs);
   height: var(--o3-spacing-3xs);
-  background-color: var(--o3-form-color-use-case-selected);
+  background-color: var(--_o3-form-color-use-case-selected);
   margin: 6px;
   border-radius: 50%;
 }
 .o3-form-input-radio-button:checked:hover + label::before {
-  border-color: var(--o3-form-color-use-case-selected-hover);
+  border-color: var(--_o3-form-color-use-case-selected-hover);
 }
 .o3-form-input-radio-button:checked:hover + label::after {
-  background-color: var(--o3-form-color-use-case-selected-hover);
+  background-color: var(--_o3-form-color-use-case-selected-hover);
 }
 .o3-form-input-radio-button:checked:active + label::before {
-  border-color: var(--o3-form-color-use-case-selected-active);
+  border-color: var(--_o3-form-color-use-case-selected-active);
 }
 .o3-form-input-radio-button:checked:active + label::after {
-  background-color: var(--o3-form-color-use-case-selected-active);
+  background-color: var(--_o3-form-color-use-case-selected-active);
 }
 .o3-form-input-radio-button:disabled + label::before {
-  border-color: var(--o3-form-color-use-case-border-disabled);
+  border-color: var(--_o3-form-color-use-case-border-disabled);
 }
 .o3-form-input-radio-button:disabled:checked + label::after {
-  background-color: var(--o3-form-color-use-case-border-disabled);
+  background-color: var(--_o3-form-color-use-case-border-disabled);
 }
 .o3-form-input-radio-button:disabled + label {
-  color: var(--o3-form-color-use-case-border-disabled);
+  color: var(--_o3-form-color-use-case-border-disabled);
 }
 .o3-form-input-radio-button.o3-form-input-error + label::before {
   border-color: var(--o3-color-use-case-error);
-  background-color: var(--o3-form-color-use-case-background-error);
+  background-color: var(--_o3-form-color-use-case-background-error);
 }
 .o3-form-input-radio-button.o3-form-input-error:checked + label::before {
   border-color: var(--o3-color-use-case-error);
-  background-color: var(--o3-form-color-use-case-background-error);
+  background-color: var(--_o3-form-color-use-case-background-error);
 }
 .o3-form-input-radio-button.o3-form-input-error:checked + label::after {
   background-color: var(--o3-color-use-case-error);
 }
+.o3-form-input-radio-button:focus + label::before {
+  box-shadow: var(--o3-focus-use-case-ring-inner), var(--03-focus-use-case-ring-outer);
+  outline: 3px solid transparent;
+}
+@supports selector(:focus-visible) {
+  .o3-form-input-radio-button:focus + label::before {
+    box-shadow: unset;
+  }
+  .o3-form-input-radio-button:focus-visible + label::before {
+    box-shadow: var(--o3-focus-use-case-ring-inner), var(--o3-focus-use-case-ring-outer);
+    outline: 3px solid transparent;
+  }
+}
 .o3-form-input-radio-button__label {
   display: flex;
   align-items: center;

package/css/professional.css

@@ -0,0 +1,23 @@
+@import "@financial-times/o3-foundation/css/professional.css";
+@import "./main.css";
+
+/* src/css/tokens/core/professional/o3-form/_variables.css */
+[data-o3-brand=professional] .o3-form {
+  --_o3-form-error-summary-background-color: rgba(204, 0, 0, 0.14);
+  --_o3-form-input-border-radius: 6px;
+  --_o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
+  --_o3-form-input-border: 2px solid var(--o3-color-palette-black-30);
+  --_o3-form-color-use-case-selected-disabled: var(--o3-color-use-case-button-disabled);
+  --_o3-form-color-use-case-selected-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-selected-hover: var(--o3-color-use-case-button-hover);
+  --_o3-form-color-use-case-border-disabled: var(--o3-color-palette-black-10);
+  --_o3-form-color-use-case-border-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-border-hover: var(--o3-color-use-case-button-hover);
+  --_o3-form-color-use-case-border: var(--o3-color-palette-black-50);
+  --_o3-form-color-use-case-background-disabled: var(--o3-color-palette-black-10);
+  --_o3-form-color-use-case-background: var(--o3-color-palette-white);
+  --_o3-form-input-border-error: 2px solid var(--o3-color-use-case-error);
+  --_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
+}
+
+/* src/css/brands/professional.css */

package/css/sustainable-views.css

@@ -0,0 +1,23 @@
+@import "@financial-times/o3-foundation/css/sustainable-views.css";
+@import "./main.css";
+
+/* src/css/tokens/sustainable-views/o3-form/_variables.css */
+[data-o3-brand=sustainable-views] .o3-form {
+  --_o3-form-error-summary-background-color: rgba(204, 0, 0, 0.14);
+  --_o3-form-input-border-radius: 6px;
+  --_o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
+  --_o3-form-input-border: 2px solid var(--o3-color-palette-black-30);
+  --_o3-form-color-use-case-selected-disabled: var(--o3-color-palette-black-10);
+  --_o3-form-color-use-case-border-disabled: var(--o3-color-use-case-button-disabled);
+  --_o3-form-color-use-case-border: var(--o3-color-palette-black-50);
+  --_o3-form-color-use-case-background-disabled: var(--o3-color-palette-black-10);
+  --_o3-form-color-use-case-background: var(--o3-color-palette-white);
+  --_o3-form-input-border-error: 2px solid var(--o3-color-use-case-error);
+  --_o3-form-color-use-case-selected-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-selected-hover: var(--o3-color-use-case-button-hover);
+  --_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
+  --_o3-form-color-use-case-border-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-border-hover: var(--o3-color-use-case-button-hover);
+}
+
+/* src/css/brands/sustainable-views.css */

package/css/whitelabel.css

@@ -3,20 +3,20 @@
 
 /* src/css/tokens/whitelabel/o3-form/_variables.css */
 [data-o3-brand=whitelabel] .o3-form {
-  --o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
+  --_o3-form-color-use-case-background-error: rgba(204, 0, 0, 0.06);
   --_o3-form-error-summary-background-color: rgba(204, 0, 0, 0.14);
   --_o3-form-input-border-radius: 6px;
-  --o3-form-color-use-case-selected-disabled: var(--o3-color-palette-black-30);
-  --o3-form-color-use-case-selected-active: var(--o3-color-palette-black-40);
-  --o3-form-color-use-case-selected-hover: var(--o3-color-palette-black-30);
-  --o3-form-color-use-case-selected: var(--o3-color-palette-black-50);
-  --o3-form-color-use-case-border-disabled: var(--o3-color-palette-black-30);
-  --o3-form-color-use-case-border-active: var(--o3-color-palette-black-40);
-  --o3-form-color-use-case-border-hover: var(--o3-color-palette-black-20);
-  --o3-form-color-use-case-border: var(--o3-color-palette-black-30);
-  --o3-form-color-use-case-background-disabled: var(--o3-color-palette-black-5);
-  --o3-form-color-use-case-background: var(--o3-color-palette-white);
+  --_o3-form-color-use-case-border-disabled: var(--o3-color-palette-black-10);
+  --_o3-form-color-use-case-border: var(--o3-color-palette-black-50);
+  --_o3-form-color-use-case-background: var(--o3-color-palette-white);
   --_o3-form-input-border: 2px solid var(--o3-color-palette-black-30);
+  --_o3-form-color-use-case-selected-disabled: var(--o3-color-use-case-button-disabled);
+  --_o3-form-color-use-case-selected-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-selected-hover: var(--o3-color-use-case-button-hover);
+  --_o3-form-color-use-case-selected: var(--o3-color-use-case-button-default);
+  --_o3-form-color-use-case-border-active: var(--o3-color-use-case-button-pressed);
+  --_o3-form-color-use-case-border-hover: var(--o3-color-use-case-button-hover);
+  --_o3-form-color-use-case-background-disabled: var(--o3-color-use-case-button-disabled);
   --_o3-form-input-border-error: 2px solid var(--o3-color-use-case-error);
 }
 

package/esm/CheckBox.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CheckBoxProps, F as FormFieldsetProps } from './index-CHdbHHZ0.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-D6jDTWIC.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

package/esm/CheckBox.js

@@ -1,8 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
+import { uidBuilder } from "@financial-times/o-utils";
 import { TitledFormField, FormFieldset } from "./fieldComponents/FormField";
+const uniqueId = uidBuilder("o3-form-checkbox-input");
 const CheckBoxItem = (props) => {
   let { inputId, attributes, optional, error } = props;
+  if (!inputId) {
+    inputId = uniqueId("_");
+  }
   const classNames = ["o3-form-input-checkbox__input", "o3-visually-hidden"];
   if (error) {
     classNames.push("o3-form-input-error");

package/esm/Error-summary.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as ErrorSummaryProps } from './index-CHdbHHZ0.js';
+import { E as ErrorSummaryProps } from './index-D6jDTWIC.js';
 
 declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
 

package/esm/PasswordInput.d.ts

@@ -1,9 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as FormFieldProps } from './index-CHdbHHZ0.js';
+import { P as PasswordInputProps } from './index-D6jDTWIC.js';
 
-interface PasswordInputProps extends FormFieldProps {
-    disabled?: boolean;
-}
 declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
 
 export { PasswordInput };

package/esm/PasswordInput.js

@@ -1,6 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { uidBuilder } from "@financial-times/o-utils";
 import { LabeledFormField } from "./fieldComponents/FormField";
 import { CheckBoxItem } from "./CheckBox";
+const uniqueId = uidBuilder("o3-form-password-input");
 const PasswordInput = ({
   label,
   feedback,
@@ -10,6 +12,8 @@ const PasswordInput = ({
   inputId,
   optional
 }) => {
+  const id = inputId || uniqueId("_");
+  const showPasswordId = `${id}-showPassword`;
   const inputClasses = ["o3-form", "o3-form-text-input"];
   if (feedback && feedback.type === "error") {
     inputClasses.push("o3-form-text-input--error");
@@ -21,13 +25,13 @@ const PasswordInput = ({
         label,
         feedback,
         description,
-        inputId,
+        inputId: id,
         optional,
         children: /* @__PURE__ */ jsx(
           "input",
           {
             ...attributes,
-            id: inputId,
+            id,
             disabled,
             className: inputClasses.join(" "),
             required: !optional,
@@ -42,11 +46,11 @@ const PasswordInput = ({
         CheckBoxItem,
         {
           attributes: { disabled },
-          inputId: "showPassword",
+          inputId: showPasswordId,
           checkboxLabel: "Show Password"
         }
       ),
-      !disabled && /* @__PURE__ */ jsx("a", { href: "", children: "Forgot password?" })
+      !disabled && /* @__PURE__ */ jsx("a", { className: "o3-typography-link", href: "", children: "Forgot password?" })
     ] })
   ] });
 };

package/esm/RadioButton.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RadioButtonProps, F as FormFieldsetProps } from './index-CHdbHHZ0.js';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-D6jDTWIC.js';
 
 declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
 declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;

package/esm/RadioButton.js

@@ -1,12 +1,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
+import { uidBuilder } from "@financial-times/o-utils";
 import { FormFieldset } from "./fieldComponents/FormField";
+const uniqueId = uidBuilder("o3-form-radio-button-input");
 const RadioButtonItem = (props) => {
   let { inputId, attributes, optional, error } = props;
-  const classNames = [
-    "o3-form-input-radio-button",
-    "o3-visually-hidden"
-  ];
+  if (!inputId) {
+    inputId = uniqueId("_");
+  }
+  const classNames = ["o3-form-input-radio-button", "o3-visually-hidden"];
   if (error) {
     classNames.push("o3-form-input-error");
   }

package/esm/TextInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TextInputProps } from './index-CHdbHHZ0.js';
+import { T as TextInputProps } from './index-D6jDTWIC.js';
 
 declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/TextInput.js

@@ -1,5 +1,7 @@
 import { jsx } from "react/jsx-runtime";
+import { uidBuilder } from "@financial-times/o-utils";
 import { LabeledFormField } from "./fieldComponents/FormField";
+const uniqueId = uidBuilder("o3-form-text-input");
 const TextInput = ({
   label,
   feedback,
@@ -10,6 +12,7 @@ const TextInput = ({
   inputId,
   optional
 }) => {
+  const id = inputId || uniqueId("_");
   const inputClasses = ["o3-form", "o3-form-text-input"];
   if (feedback && feedback.type === "error") {
     inputClasses.push("o3-form-text-input--error");
@@ -23,13 +26,13 @@ const TextInput = ({
       label,
       feedback,
       description,
-      inputId,
+      inputId: id,
       optional,
       children: /* @__PURE__ */ jsx(
         "input",
         {
           ...attributes,
-          id: inputId,
+          id,
           disabled,
           className: inputClasses.join(" "),
           required: !optional,

package/esm/fieldComponents/Feedback.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as FeedbackProps } from '../index-CHdbHHZ0.mjs';
+import { a as FeedbackProps } from '../index-D6jDTWIC.mjs';
 
 declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
 

package/esm/fieldComponents/FormField.d.mts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as FormFieldProps, F as FormFieldsetProps } from '../index-CHdbHHZ0.mjs';
+import { b as FormFieldProps, F as FormFieldsetProps } from '../index-D6jDTWIC.mjs';
 
-declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const TitledFormField: ({ label, description, feedback, children, optional }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-declare const FormFieldset: ({ label, description, feedback, children, optional }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
+declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
+declare const FormFieldset: ({ label, description, feedback, children, optional, }: FormFieldsetProps) => react_jsx_runtime.JSX.Element;
 
 export { FormFieldset, LabeledFormField, TitledFormField };

package/esm/fieldComponents/FormField.js

@@ -56,8 +56,11 @@ const FormFieldset = ({
     labelClasses.push("o3-form-field--optional");
   }
   return /* @__PURE__ */ jsxs("fieldset", { className: "o3-form-field", "aria-describedby": `${descriptionId}`, children: [
-    /* @__PURE__ */ jsx("legend", { className: labelClasses.join(" "), children: label }),
-    description && /* @__PURE__ */ jsx("span", { className: "o3-form-input__description", id: descriptionId, children: description }),
+    /* @__PURE__ */ jsxs("legend", { className: labelClasses.join(" "), children: [
+      label,
+      " ",
+      description && /* @__PURE__ */ jsx("span", { className: "o3-form-input__description", id: descriptionId, children: description })
+    ] }),
     children,
     feedback && /* @__PURE__ */ jsx(Feedback, { ...feedback })
   ] });

package/esm/{index-CHdbHHZ0.d.ts → index-D6jDTWIC.d.ts}

@@ -11,6 +11,10 @@ interface TextInputProps extends BaseInputProps {
     length?: 2 | 3 | 4 | 5;
     feedback?: FeedbackProps;
 }
+interface PasswordInputProps extends BaseInputProps {
+    disabled?: boolean;
+    feedback?: FeedbackProps;
+}
 interface CheckBoxProps extends BaseInputProps {
     inputId: string;
     checkboxLabel: string;
@@ -45,4 +49,4 @@ type ErrorSummaryProps = {
     }[];
 };
 
-export type { CheckBoxProps as C, ErrorSummaryProps as E, FormFieldsetProps as F, RadioButtonProps as R, TextInputProps as T, FormFieldProps as a, FeedbackProps as b };
+export type { CheckBoxProps as C, ErrorSummaryProps as E, FormFieldsetProps as F, PasswordInputProps as P, RadioButtonProps as R, TextInputProps as T, FeedbackProps as a, FormFieldProps as b };

package/esm/index.d.ts

@@ -7,4 +7,4 @@ export { ErrorSummary } from './Error-summary.js';
 export { PasswordInput } from './PasswordInput.js';
 export { TextInput } from './TextInput.js';
 import 'react/jsx-runtime';
-import './index-CHdbHHZ0.js';
+import './index-D6jDTWIC.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o3-form",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"description": "Provides a viewport-aware tooltip for annotating or or highlighting other aspects of a product's UI",
 	"keywords": [
 		"form",