@pnx-mixtape/mxds 0.1.0-rc.4 → 0.1.0-rc.6

package/src/Form/FeedbackForm/README.md

@@ -0,0 +1,233 @@
+# FeedbackForm
+
+A yes/no "was this page useful?" control that reveals a free-text comment field once a rating
+is chosen.
+
+**This component never submits anywhere itself.** Progressive enhancement, native `<form
+action>` submission still works — but the Web Component dispatches a cancelable
+`mx-feedback-form-submit` event (and React calls an `onSubmit` prop) before the form submits, so
+any backend can be wired up by the consumer: a Drupal webform AJAX endpoint, a REST call,
+whatever. This keeps the component usable whether you're posting to a classic HTML form action
+or handling submission entirely in JS.
+
+---
+
+## CSS Import
+
+```css
+@import "@pnx-mixtape/mxds/src/Form/FeedbackForm/feedback-form.css";
+```
+
+---
+
+## Twig
+
+```twig
+{% include '@mixtape/Form/FeedbackForm/feedback-form.twig' with {
+  id: 'feedback',
+  secondaryText: 'If you need a response, ',
+  secondaryLinkText: 'contact us',
+  secondaryLinkHref: '/contact',
+} %}
+```
+
+**feedback-form.twig props:**
+
+| Prop                   | Type        | Default                                    | Description                                                                                               |
+| ---------------------- | ----------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
+| `id`                   | `string`    | `feedback-form`                            | Root id, used to derive the rating/comment field ids                                                      |
+| `name`                 | `string`    | `rating`                                   | `name` on the two rating radios                                                                           |
+| `question`             | `string`    | `Was the information on this page useful?` | Rating fieldset `<legend>` text                                                                           |
+| `yesLabel` / `noLabel` | `string`    | `Yes` / `No`                               | Rating radio labels                                                                                       |
+| `secondaryText`        | `string`    | —                                          | Optional copy shown below the rating (e.g. pointing to another contact channel)                           |
+| `secondaryLinkText`    | `string`    | —                                          | Optional link text — only rendered together with `secondaryLinkHref`                                      |
+| `secondaryLinkHref`    | `string`    | —                                          | Optional link destination                                                                                 |
+| `commentLabel`         | `string`    | `How can we make it better?`               | Label for the revealed comment field                                                                      |
+| `commentName`          | `string`    | `comment`                                  | `name` on the comment `<textarea>`                                                                        |
+| `commentPlaceholder`   | `string`    | —                                          | Comment `<textarea>` placeholder                                                                          |
+| `commentRequired`      | `boolean`   | `false`                                    | Adds `required` to the comment field, and enables the required-field error message                        |
+| `requiredErrorMessage` | `string`    | `This field is required.`                  | Message shown when `commentRequired` is set and the comment is submitted empty                            |
+| `submitLabel`          | `string`    | `Submit`                                   | Submit button text                                                                                        |
+| `action`               | `string`    | —                                          | `<form action>` — progressive-enhancement fallback target                                                 |
+| `method`               | `string`    | `post`                                     | `<form method>`                                                                                           |
+| `errorMessage`         | `string`    | —                                          | Consumer-supplied top-level notice (e.g. after a failed async submit), rendered as a `role="alert"` block |
+| `attributes`           | `Attribute` | —                                          | Optional Drupal-style attributes object — `mx-feedback-form` is always merged on top                      |
+
+Registers as `<mx-feedback-form>`. Import the element to activate its behaviour:
+
+```js
+import "@pnx-mixtape/mxds/src/Form/FeedbackForm/Elements/FeedbackForm"
+```
+
+---
+
+## HTML + Web Component
+
+```html
+<mx-feedback-form class="mx-feedback-form">
+  <form method="post">
+    <fieldset class="mx-fieldset mx-fieldset--plain mx-feedback-form__rating">
+      <legend class="mx-legend">Was the information on this page useful?</legend>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="feedback-yes" name="rating" value="yes" />
+        <label class="mx-button mx-button--dark mx-button--outline" for="feedback-yes">
+          <span class="mx-icon mx-icon--thumb"></span>
+          <span>Yes</span>
+        </label>
+      </div>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="feedback-no" name="rating" value="no" />
+        <label class="mx-button mx-button--dark mx-button--outline" for="feedback-no">
+          <span class="mx-icon mx-icon--thumb mx-icon--rotate-180"></span>
+          <span>No</span>
+        </label>
+      </div>
+    </fieldset>
+    <div class="mx-feedback-form__reveal">
+      <!-- FormItem-wrapped comment textarea, error status, submit button -->
+    </div>
+  </form>
+</mx-feedback-form>
+```
+
+**Reveal behaviour:** the comment field and submit button are always visible and submittable in
+the static/no-JS markup. Once the `<mx-feedback-form>` element connects, it adds an
+`is-enhanced` class to itself — only then does CSS hide the reveal block until a rating radio is
+checked (`:has()`-driven). This means a blocked or failed script load can never leave the form's
+only submit path permanently hidden — see [Accessibility](#accessibility).
+
+**Validation:** when `commentRequired` is set and the comment is empty on submit, the Web
+Component prevents the native submit, marks the textarea `aria-invalid="true"`, reveals the
+pre-rendered `role="alert"` status message, and moves focus to the comment field — rather than
+relying on the browser's native validation bubble (`novalidate` is set on the form).
+
+**Submit contract:** on a valid submit, the Web Component dispatches a cancelable
+`mx-feedback-form-submit` `CustomEvent` with `detail: { rating, comment, form }` _before_ the
+form actually submits. If a listener calls `preventDefault()` on that event, the native
+submission is also cancelled — full consumer ownership of the request. If nothing cancels it,
+the browser proceeds with the form's `action`/`method` as normal.
+
+```js
+const root = document.querySelector("mx-feedback-form")
+
+root.addEventListener("mx-feedback-form-submit", async event => {
+  event.preventDefault() // take over submission ourselves
+  const { rating, comment } = event.detail
+  await fetch("/api/feedback", {
+    method: "POST",
+    body: JSON.stringify({ rating, comment }),
+  })
+})
+```
+
+**Pending state:** while your own async submit is in flight, reflect it with the `pending`
+attribute:
+
+```js
+root.setAttribute("pending", "")
+// ... await your request ...
+root.removeAttribute("pending")
+```
+
+This adds mxds's standard `pending` custom state (`internals_.states`, so `:state(pending)` is
+selectable in CSS) and disables/`aria-busy`s the submit button.
+
+---
+
+## React
+
+```tsx
+import { FeedbackForm } from "@pnx-mixtape/mxds/react"
+
+const Example = () => {
+  const [pending, setPending] = useState(false)
+
+  const handleSubmit = async ({ rating, comment }) => {
+    setPending(true)
+    await fetch("/api/feedback", { method: "POST", body: JSON.stringify({ rating, comment }) })
+    setPending(false)
+  }
+
+  return (
+    <FeedbackForm
+      id="feedback"
+      secondaryText="If you need a response, "
+      secondaryLinkText="contact us"
+      secondaryLinkHref="/contact"
+      pending={pending}
+      onSubmit={handleSubmit}
+    />
+  )
+}
+```
+
+**`FeedbackForm` props:** same set as the Twig props above (camelCase, no `attributes`), plus:
+
+| Prop        | Type                                          | Default | Description                                                                     |
+| ----------- | --------------------------------------------- | ------- | ------------------------------------------------------------------------------- |
+| `pending`   | `boolean`                                     | `false` | Reflected as `aria-busy`/`disabled` on the submit button                        |
+| `onSubmit`  | `(detail: { rating, comment, form }) => void` | —       | Called on a valid submit — see [React ⇄ Twig parity](#react--twig-parity) below |
+| `className` | `string`                                      | —       | Extra class on the root                                                         |
+
+---
+
+### React ⇄ Twig parity
+
+- **Submit ownership differs by design.** In Twig/Web Component, `mx-feedback-form-submit` is a
+  _cancelable_ event — the native form submission proceeds unless a listener calls
+  `preventDefault()`. In React, supplying `onSubmit` always prevents the native submission (a
+  React app wiring up `onSubmit` expects full control, not an opt-in interception) — there's no
+  React equivalent of "let it submit natively AND notify me."
+- `pending` has no Twig prop — it's a runtime-only concept. The Twig/Web-Component equivalent is
+  the `pending` HTML _attribute_, toggled by your own JS after render (see above), not a
+  template-render-time prop.
+- `yesIcon`, `noIcon`, `commentItem`, and `submitButton` in `feedback-form.twig` are internal
+  `{% set x %}...{% endset %}` template locals used to pre-render nested `Icon`/`FormItem`/
+  `Button` markup for composition — not props, and not present in React (which composes the
+  equivalent components directly in JSX). `pnpm audit-parity`'s static extractor doesn't
+  recognize the `{% set x %}...{% endset %}` capture-block form (only the inline `{% set x = … %}`
+  form), so it misreports these as Twig-only props — a known tool limitation, not a real
+  divergence.
+- `commentPlaceholder` and `commentRequired` genuinely are used in Twig — passed through to
+  `Form/Textarea/input-textarea.twig` inside a nested `{% include ... with {...} %}` call. The
+  audit tool's extractor doesn't scan inside `with {}` object literals, so it misreports these as
+  unused — also a known tool limitation.
+
+---
+
+## Modifiers
+
+No BEM modifier classes. `mx-feedback-form--l`-style breakpoint modifiers don't apply here —
+this component isn't visibility/breakpoint-gated the way `BackToTop`/`Sticky` are.
+
+---
+
+## Accessibility
+
+- The rating group uses a real `<fieldset>`/`<legend>` — no `role="radiogroup"` needed, this is
+  the native equivalent.
+- Each rating option is a real, focusable `<input type="radio">` paired with a `<label>` styled
+  as a button (reusing the `Button` atom's own classes/custom properties — `mx-button
+  mx-button--dark mx-button--outline`, with `:has(input:checked)` undoing the outline to show
+  the selected state). The input itself is visually hidden with `.sr-only` (clip, not
+  `display:none`) so it stays in the tab order and the accessibility tree — only its default
+  circular appearance is hidden, keyboard operation (Tab to focus, arrow keys to move within the
+  native radio group, Space/click to select) is unaffected. The visible label still carries icon
+  - text, not icon-only/visually-hidden text.
+- **The comment field and submit button are reachable without JavaScript.** The reveal-on-rating
+  behaviour is only switched on once JS is confirmed running (`is-enhanced`, added by the Web
+  Component's `connectedCallback`; always present in React) — a blocked or failed script load
+  never leaves the form's only path to submit permanently hidden.
+- The required-field error is a `role="alert"` region, programmatically associated with the
+  comment field via `aria-describedby`, and focus moves to the field when validation fails.
+- The top-level `errorMessage` notice is also `role="alert"`.
+
+---
+
+## Customisation via CSS custom properties
+
+```css
+.mx-feedback-form {
+  --feedback-form-icon-size: var(--spacing-m); /* size of the thumb icons */
+}
+```

package/src/Form/FeedbackForm/__snapshots__/FeedbackForm.stories.ts.snap

@@ -0,0 +1,125 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Feedback Form 1`] = `
+"
+
+<mx-feedback-form class="mx-feedback-form is-enhanced">
+  <form action="" method="post" novalidate="">
+    
+    <fieldset class="mx-fieldset mx-fieldset--plain mx-feedback-form__rating">
+      <legend class="mx-legend">Was the information on this page useful?</legend>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="feedback-yes" name="rating" value="yes">
+        <label class="mx-button mx-button--dark mx-button--outline" for="feedback-yes">
+          
+<span class="mx-icon mx-icon--thumb"></span>
+          <span>Yes</span>
+        </label>
+      </div>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="feedback-no" name="rating" value="no">
+        <label class="mx-button mx-button--dark mx-button--outline" for="feedback-no">
+          
+<span class="mx-icon mx-icon--thumb mx-icon--rotate-180"></span>
+          <span>No</span>
+        </label>
+      </div>
+    </fieldset>
+
+          <p class="mx-feedback-form__secondary">
+        Your rating will help us improve the website.
+      </p>
+    
+    <div class="mx-feedback-form__reveal">
+        
+<div class="mx-form-item">
+      
+<label class="mx-label" for="feedback-comment">
+  How can we make it better?
+  </label>
+
+  
+      
+<textarea aria-describedby="unique-0" class="mx-input__textarea" id="feedback-comment" name="unique-0"></textarea>
+
+  
+  
+</div>
+
+      <div class="mx-error-message" id="unique-0" role="alert" hidden="">This field is required.</div>
+      <div class="mx-form-actions">
+            
+  <button class="mx-button mx-button--dark" type="submit">
+    
+    <span>Submit</span>
+    
+  </button>
+
+      </div>
+    </div>
+  </form>
+</mx-feedback-form>
+"
+`;
+
+exports[`Required Comment 1`] = `
+"
+
+<mx-feedback-form class="mx-feedback-form is-enhanced">
+  <form action="" method="post" novalidate="">
+    
+    <fieldset class="mx-fieldset mx-fieldset--plain mx-feedback-form__rating">
+      <legend class="mx-legend">Was the information on this page useful?</legend>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="feedback-required-yes" name="rating" value="yes">
+        <label class="mx-button mx-button--dark mx-button--outline" for="feedback-required-yes">
+          
+<span class="mx-icon mx-icon--thumb"></span>
+          <span>Yes</span>
+        </label>
+      </div>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="feedback-required-no" name="rating" value="no">
+        <label class="mx-button mx-button--dark mx-button--outline" for="feedback-required-no">
+          
+<span class="mx-icon mx-icon--thumb mx-icon--rotate-180"></span>
+          <span>No</span>
+        </label>
+      </div>
+    </fieldset>
+
+          <p class="mx-feedback-form__secondary">
+        Your rating will help us improve the website.
+      </p>
+    
+    <div class="mx-feedback-form__reveal">
+        
+<div class="mx-form-item">
+      
+<label class="mx-label" for="feedback-required-comment">
+  How can we make it better?
+  </label>
+
+  
+      
+<textarea aria-describedby="unique-0" class="mx-input__textarea" id="feedback-required-comment" name="unique-0" required="" aria-invalid="true"></textarea>
+
+  
+  
+</div>
+
+      <div class="mx-error-message" id="unique-0" role="alert">This field is required.</div>
+      <div class="mx-form-actions">
+            
+  <button class="mx-button mx-button--dark" type="submit">
+    
+    <span>Submit</span>
+    
+  </button>
+
+      </div>
+    </div>
+  </form>
+</mx-feedback-form>
+"
+`;

package/src/Form/FeedbackForm/__snapshots__/FeedbackForm.stories.tsx.snap

@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Feedback Form 1`] = `"<div class="mx-feedback-form is-enhanced"><form method="post" novalidate=""><fieldset class="mx-fieldset mx-fieldset--plain mx-feedback-form__rating"><legend class="mx-legend">Was the information on this page useful?</legend><div class="mx-feedback-form__option"><input class="sr-only" id="feedback-yes" type="radio" value="yes" name="rating"><label class="mx-button mx-button--dark mx-button--outline" for="feedback-yes"><span class="mx-icon mx-icon--thumb"></span><span>Yes</span></label></div><div class="mx-feedback-form__option"><input class="sr-only" id="feedback-no" type="radio" value="no" name="rating"><label class="mx-button mx-button--dark mx-button--outline" for="feedback-no"><span class="mx-icon mx-icon--thumb mx-icon--rotate-180"></span><span>No</span></label></div></fieldset><p class="mx-feedback-form__secondary">If you need a response, <a href="#contact" class="mx-link">contact us</a></p><div class="mx-feedback-form__reveal"><div class="mx-form-item"><label class="mx-label" for="feedback-comment">How can we make it better?</label><textarea class="mx-input__textarea" id="feedback-comment" name="comment" aria-describedby="status-feedback-comment"></textarea></div><div class="mx-error-message" id="status-feedback-comment" role="alert" hidden="">This field is required.</div><div class="mx-form-actions"><button class="mx-button mx-button--dark" type="submit" data-pending="false" aria-busy="false"><span>Submit</span></button></div></div></form></div>"`;
+
+exports[`Required Comment 1`] = `"<div class="mx-feedback-form is-enhanced"><form method="post" novalidate=""><fieldset class="mx-fieldset mx-fieldset--plain mx-feedback-form__rating"><legend class="mx-legend">Was the information on this page useful?</legend><div class="mx-feedback-form__option"><input class="sr-only" id="feedback-required-yes" type="radio" value="yes" name="rating"><label class="mx-button mx-button--dark mx-button--outline" for="feedback-required-yes"><span class="mx-icon mx-icon--thumb"></span><span>Yes</span></label></div><div class="mx-feedback-form__option"><input class="sr-only" id="feedback-required-no" type="radio" value="no" name="rating"><label class="mx-button mx-button--dark mx-button--outline" for="feedback-required-no"><span class="mx-icon mx-icon--thumb mx-icon--rotate-180"></span><span>No</span></label></div></fieldset><p class="mx-feedback-form__secondary">If you need a response, <a href="#contact" class="mx-link">contact us</a></p><div class="mx-feedback-form__reveal"><div class="mx-form-item"><label class="mx-label" for="feedback-required-comment">How can we make it better?</label><textarea class="mx-input__textarea" id="feedback-required-comment" name="comment" required="" aria-describedby="status-feedback-required-comment"></textarea></div><div class="mx-error-message" id="status-feedback-required-comment" role="alert">This field is required.</div><div class="mx-form-actions"><button class="mx-button mx-button--dark" type="submit" data-pending="false" aria-busy="false"><span>Submit</span></button></div></div></form></div>"`;

package/src/Form/FeedbackForm/feedback-form.css

@@ -0,0 +1,74 @@
+/**
+ * FeedbackForm
+ */
+
+@layer design-system.defaults {
+  mx-feedback-form {
+    display: block;
+  }
+}
+
+@layer design-system.components {
+  .mx-feedback-form {
+    display: block;
+
+    & form {
+      display: grid;
+      gap: var(--flow-gap, var(--gap));
+    }
+
+    & .mx-error-message {
+      margin-block-end: unset;
+    }
+
+    & .mx-form-actions {
+      margin-block-start: var(--flow-gap, var(--gap));
+    }
+  }
+
+  .mx-feedback-form__rating {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-s);
+  }
+
+  /* @public --feedback-form-icon-size */
+  .mx-feedback-form__option .mx-icon {
+    --icon-size: var(--feedback-form-icon-size, var(--spacing-m));
+  }
+
+  /*
+   * The radio input stays in the DOM and keyboard/AT-operable (`.sr-only`, not `display:none`) —
+   * only its default appearance is hidden. The <label> is styled as a button (reusing the Button
+   * atom's own classes/custom properties) so it can act as the visible, clickable control; its
+   * `.mx-button--outline` modifier is undone by `:has(input:checked)` to show which is selected.
+   */
+  .mx-feedback-form__option label {
+    cursor: pointer;
+  }
+
+  .mx-feedback-form__option:has(input:checked) label {
+    --button-bg: var(--button-dark-bg, var(--link-colour, var(--colour-link)));
+    --button-fg: var(--button-dark-fg, var(--colour-foreground-reverse));
+  }
+
+  .mx-feedback-form__option:has(input:focus-visible) label {
+    outline: var(--outline-size, 2px) var(--outline-style, solid) var(--outline-color, currentcolor);
+    outline-offset: var(--outline-offset, 2px);
+  }
+
+  /*
+   * The reveal is only gated behind a checked rating once JS has confirmed it can drive it
+   * (`is-enhanced`, added by the Web Component/React on mount) — matches BackToTop's
+   * `is-enhanced` convention. Without JS, the comment field and submit button stay visible and
+   * submittable so the form is never accidentally unusable.
+   */
+  .mx-feedback-form.is-enhanced .mx-feedback-form__reveal {
+    display: none;
+  }
+
+  .mx-feedback-form.is-enhanced:has(.mx-feedback-form__rating input:checked)
+    .mx-feedback-form__reveal {
+    display: block;
+  }
+}

package/src/Form/FeedbackForm/feedback-form.entry.js

@@ -0,0 +1 @@
+import "./Elements/FeedbackForm"

package/src/Form/FeedbackForm/feedback-form.twig

@@ -0,0 +1,80 @@
+{% set baseClass = 'mx-feedback-form' %}
+{% set attributes = (attributes ?? create_attribute()).addClass(baseClass) %}
+{% set id = id|default('feedback-form') %}
+{% set name = name|default('rating') %}
+{% set question = question|default('Was the information on this page useful?') %}
+{% set yesLabel = yesLabel|default('Yes') %}
+{% set noLabel = noLabel|default('No') %}
+{% set commentLabel = commentLabel|default('How can we make it better?') %}
+{% set commentName = commentName|default('comment') %}
+{% set requiredErrorMessage = requiredErrorMessage|default('This field is required.') %}
+{% set submitLabel = submitLabel|default('Submit') %}
+{% set method = method|default('post') %}
+{% set commentId = id~'-comment' %}
+
+{% set commentLabelMarkup %}
+  {% include '@mixtape/Form/Label/label.twig' with { id: commentId, title: commentLabel } only %}
+{% endset %}
+{% set commentField %}
+  {% include '@mixtape/Form/Textarea/input-textarea.twig' with {
+    id: commentId,
+    name: commentName,
+    placeholder: commentPlaceholder,
+    required: commentRequired,
+    attributes: create_attribute().setAttribute('aria-describedby', 'status-'~commentId),
+  } only %}
+{% endset %}
+{% set commentItem %}
+  {% include '@mixtape/Form/FormItem/form-item.twig' with {
+    id: commentId,
+    label: commentLabelMarkup,
+    fields: commentField,
+  } only %}
+{% endset %}
+{% set submitButton %}
+  {% include '@mixtape/Atom/Button/button.twig' with {
+    as: 'submit',
+    title: submitLabel,
+    modifiers: ['dark'],
+  } only %}
+{% endset %}
+
+<mx-feedback-form{{ attributes }}>
+  <form action="{{ action }}" method="{{ method }}">
+    {% if errorMessage %}
+      <div class="mx-feedback-form__error" role="alert">{{ errorMessage }}</div>
+    {% endif %}
+
+    <fieldset class="mx-fieldset mx-fieldset--plain mx-feedback-form__rating">
+      <legend class="mx-legend">{{ question }}</legend>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="{{ id }}-yes" name="{{ name }}" value="yes">
+        <label class="mx-button mx-button--dark mx-button--outline" for="{{ id }}-yes">
+          {% include '@mixtape/Atom/Icon/icon.twig' with { icon: 'thumb' } only %}
+          <span>{{ yesLabel }}</span>
+        </label>
+      </div>
+      <div class="mx-feedback-form__option">
+        <input type="radio" class="sr-only" id="{{ id }}-no" name="{{ name }}" value="no">
+        <label class="mx-button mx-button--dark mx-button--outline" for="{{ id }}-no">
+          {% include '@mixtape/Atom/Icon/icon.twig' with { icon: 'thumb', rotate: 'rotate-180' } only %}
+          <span>{{ noLabel }}</span>
+        </label>
+      </div>
+    </fieldset>
+
+    {% if secondaryText %}
+      <p class="mx-feedback-form__secondary">
+        {{ secondaryText }}
+      </p>
+    {% endif %}
+
+    <div class="mx-feedback-form__reveal">
+      {{ commentItem }}
+      <div class="mx-error-message" id="status-{{ commentId }}" role="alert" hidden>{{ requiredErrorMessage }}</div>
+      <div class="mx-form-actions">
+        {{ submitButton }}
+      </div>
+    </div>
+  </form>
+</mx-feedback-form>

package/src/Form/form.css

@@ -462,20 +462,6 @@
  */
 
 @layer design-system.atoms {
-  @supports (appearance: base-select) {
-    .mx-input__select,
-    ::picker(select) {
-      appearance: base-select;
-    }
-
-    ::picker(select) {
-      border-radius: var(--border-radius);
-      inset-block-start: var(--spacing-xxxs);
-      border: var(--line-width, 2px) solid
-        var(--line-colour, var(--line-colour, var(--colour-border)));
-    }
-  }
-
   .mx-input__select {
     --outline-size: var(--line-width, 2px);
     --outline-offset: calc(var(--outline-size, 2px) * -1);
@@ -489,21 +475,33 @@
     padding-inline-end: var(--spacing-xl);
 
     @supports (appearance: base-select) {
+      padding-inline-end: var(--form-spacing, var(--spacing-s));
+      align-items: center;
+      background-image: none;
+
       &,
-      ::picker(select) {
+      &::picker(select) {
         appearance: base-select;
-        background-image: none;
-        padding-inline-end: 0;
       }
 
-      selectedcontent {
+      &::picker(select) {
+        border-radius: var(--border-radius);
+        inset-block-start: var(--spacing-xxxs);
+        border: var(--line-width, 2px) solid
+          var(--line-colour, var(--line-colour, var(--colour-border)));
+        min-inline-size: anchor-size(width);
+        position-area: block-end center;
+        position-try-fallbacks: flip-block flip-inline;
+      }
+
+      & selectedcontent {
         display: flex;
         align-items: center;
         block-size: 100%;
         column-gap: var(--spacing-xxxs);
       }
 
-      option {
+      & option {
         padding-block: var(--spacing-xxs);
       }
     }

package/src/Introduction.mdx

@@ -14,7 +14,7 @@ import { Meta, Title, Subtitle } from "@storybook/addon-docs/blocks"
 - Javascript is available in both React and Web Component formats.
 - Provides Twig templates for each component
 - Supports PINTO and Experience Builder integration.
-- Is tested against WCAG 2.0 AA to ensure accessibility standards.
+- Is tested against WCAG 2.2 AA to ensure accessibility standards.
 - Follows PreviousNext's high standards.
 - Provide integration Documentation.
 

package/src/Layout/Footer/__snapshots__/Footer.stories.ts.snap

@@ -14,7 +14,7 @@ exports[`Everything 1`] = `
                   <a href="#">
             News
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button>
               <ul class="mx-nav__level-2">
           <li>
                   <a href="#">
@@ -33,7 +33,7 @@ exports[`Everything 1`] = `
                   <a href="#">
             About us
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button>
               <ul class="mx-nav__level-2">
           <li>
                   <a href="#">
@@ -57,7 +57,7 @@ exports[`Everything 1`] = `
                   <a href="#">
             Contact
           </a>
-                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
+                          <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only" type="button">Sub-navigation</button>
               <ul class="mx-nav__level-2">
           <li>
                   <a href="#">

package/src/Layout/Header/Components/GlobalToggle.tsx

@@ -28,7 +28,7 @@ const GlobalToggle = ({
       aria-controls={toggleId}
       {...props}
     >
-      {open ? "Close" : "Open"} {name}
+      {`${open ? "Close" : "Open"} ${name}`}
     </Button>
   )
 }