@pnx-mixtape/mxds 0.1.0-rc.1 → 0.1.0-rc.3

package/src/Form/Validation.stories.ts

@@ -0,0 +1,153 @@
+import { Meta, StoryObj } from "@storybook/html-vite"
+import FormItem from "./FormItem/form-item.twig"
+import Label from "./Label/label.twig"
+import TextInput from "./TextInput/input-text.twig"
+import Textarea from "./Textarea/input-textarea.twig"
+import Select from "./Select/input-select.twig"
+import Radio from "./Radio/input-radio.twig"
+import Checkbox from "./Checkbox/input-checkbox.twig"
+import Autocomplete from "./Autocomplete/autocomplete.twig"
+import Button from "../Atom/Button/button.twig"
+import "./form.css"
+import "./Autocomplete/autocomplete.css"
+import "./Autocomplete/Elements/Autocomplete"
+import { InputTypeTypes } from "@pnx-mixtape/ids-shape"
+import { DrupalAttribute } from "drupal-attribute"
+
+const meta: Meta = {
+  tags: ["autodocs"],
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {
+            // ID's are not unique due to test-runner.
+            id: "label",
+            enabled: false,
+          },
+        ],
+      },
+    },
+  },
+  render: () =>
+    `<form class="mx-vertical-flow">${[
+      FormItem({
+        id: "validate-text",
+        label: Label({ id: "validate-text", title: "Email address", required: true }),
+        fields: TextInput({
+          id: "validate-text",
+          type: InputTypeTypes.EMAIL,
+          name: "validate-text",
+          placeholder: "you@example.com",
+          required: true,
+          attributes: new DrupalAttribute().addClass("mx-validate"),
+        }),
+      }),
+      FormItem({
+        id: "validate-textarea",
+        label: Label({ id: "validate-textarea", title: "Message", required: true }),
+        fields: Textarea({
+          id: "validate-textarea",
+          name: "validate-textarea",
+          required: true,
+          attributes: new DrupalAttribute().addClass("mx-validate"),
+        }),
+      }),
+      FormItem({
+        id: "validate-select",
+        label: Label({ id: "validate-select", title: "Favourite colour", required: true }),
+        fields: Select({
+          id: "validate-select",
+          name: "validate-select",
+          required: true,
+          attributes: new DrupalAttribute().addClass("mx-validate"),
+          options: [
+            { label: "Choose an option", value: "" },
+            { label: "Red", value: "red" },
+            { label: "Green", value: "green" },
+            { label: "Blue", value: "blue" },
+          ],
+        }),
+      }),
+      FormItem({
+        id: "validate-radio",
+        as: "fieldset",
+        label: Label({ title: "Do you like music?", as: "legend", required: true }),
+        fields: [
+          Radio({
+            id: "validate-radio-yes",
+            name: "validate-radio",
+            label: "Yes",
+            value: "yes",
+            required: true,
+            attributes: new DrupalAttribute().addClass("mx-validate"),
+          }),
+          Radio({
+            id: "validate-radio-no",
+            name: "validate-radio",
+            label: "No",
+            value: "no",
+            required: true,
+            attributes: new DrupalAttribute().addClass("mx-validate"),
+          }),
+        ].join(""),
+      }),
+      FormItem({
+        id: "validate-checkbox",
+        as: "fieldset",
+        label: Label({ title: "Which genres do you like?", as: "legend", required: true }),
+        fields: [
+          Checkbox({
+            id: "validate-checkbox-rock",
+            name: "validate-checkbox-rock",
+            label: "Rock",
+            value: "rock",
+            required: true,
+            attributes: new DrupalAttribute().addClass("mx-validate"),
+          }),
+          Checkbox({
+            id: "validate-checkbox-jazz",
+            name: "validate-checkbox-jazz",
+            label: "Jazz",
+            value: "jazz",
+            required: true,
+            attributes: new DrupalAttribute().addClass("mx-validate"),
+          }),
+        ].join(""),
+      }),
+      FormItem({
+        id: "validate-autocomplete",
+        label: Label({ id: "validate-autocomplete", title: "Favourite fruit", required: true }),
+        fields: Autocomplete({
+          id: "validate-autocomplete",
+          name: "validate-autocomplete",
+          label: "Favourite fruit",
+          type: InputTypeTypes.TEXT,
+          required: true,
+          attributes: new DrupalAttribute().addClass("mx-validate"),
+          options: [
+            { label: "Apple", value: "apple" },
+            { label: "Banana", value: "banana" },
+            { label: "Cherry", value: "cherry" },
+          ],
+        }),
+      }),
+      Button({ title: "Submit", as: "submit" }),
+    ].join("")}</form>`,
+}
+
+export default meta
+type Story = StoryObj
+
+/**
+ * `mx-validate` opts a control into live native validation — the border
+ * turns red once the browser rejects the value and the field has been
+ * interacted with, green once it's accepted.
+ *
+ * Add the class to the control itself (text input, textarea, select), or on
+ * the `.mx-radio` / `.mx-checkbox` / `.mx-autocomplete` wrapper for
+ * components that put `attributes` on the wrapper rather than the input.
+ *
+ * Hit Submit to trigger the invalid states on the empty required fields.
+ */
+export const Validation: Story = {}

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

@@ -0,0 +1,130 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Validation 1`] = `
+"<form class="mx-vertical-flow">
+<div class="mx-form-item">
+    
+<label class="mx-label" for="validate-text">
+  Email address
+  <span class="mx-required">(required)</span></label>
+
+  
+  
+<input class="mx-validate mx-input__text" id="validate-text" name="validate-text" type="email" value="" placeholder="you@example.com" required="">
+
+  
+  
+</div>
+
+<div class="mx-form-item">
+    
+<label class="mx-label" for="validate-textarea">
+  Message
+  <span class="mx-required">(required)</span></label>
+
+  
+    
+<textarea class="mx-validate mx-input__textarea" id="unique-4" name="unique-0" aria-describedby="unique-0" required=""></textarea>
+
+  
+  
+</div>
+
+<div class="mx-form-item">
+    
+<label class="mx-label" for="validate-select">
+  Favourite colour
+  <span class="mx-required">(required)</span></label>
+
+  
+    
+<select class="mx-validate mx-input__select" id="unique-5" name="unique-1" aria-describedby="unique-1" required="">
+  <button>
+    <selectedcontent>Choose an option</selectedcontent>
+  </button>
+    <option value="">Choose an option</option>
+    <option value="red">Red</option>
+    <option value="green">Green</option>
+    <option value="blue">Blue</option>
+  </select>
+
+  
+  
+</div>
+
+<fieldset class="mx-form-item mx-fieldset">
+    
+<legend class="mx-legend">
+  Do you like music?
+  <span class="mx-required">(required)</span></legend>
+
+  
+  <div class="mx-validate mx-radio">
+  <input id="validate-radio-yes" type="radio" name="validate-radio" value="yes" required="">
+  <label for="validate-radio-yes">Yes</label>
+</div>
+<div class="mx-validate mx-radio">
+  <input id="validate-radio-no" type="radio" name="validate-radio" value="no" required="">
+  <label for="validate-radio-no">No</label>
+</div>
+
+  
+  
+</fieldset>
+
+<fieldset class="mx-form-item mx-fieldset">
+    
+<legend class="mx-legend">
+  Which genres do you like?
+  <span class="mx-required">(required)</span></legend>
+
+  
+  
+<div class="mx-validate mx-checkbox">
+  <input id="validate-checkbox-rock" type="checkbox" name="validate-checkbox-rock" value="rock" required="">
+  <label for="validate-checkbox-rock">Rock</label>
+</div>
+
+<div class="mx-validate mx-checkbox">
+  <input id="validate-checkbox-jazz" type="checkbox" name="validate-checkbox-jazz" value="jazz" required="">
+  <label for="validate-checkbox-jazz">Jazz</label>
+</div>
+
+  
+  
+</fieldset>
+
+<div class="mx-form-item">
+    
+<label class="mx-label" for="validate-autocomplete">
+  Favourite fruit
+  <span class="mx-required">(required)</span></label>
+
+  
+  
+<mx-autocomplete class="mx-autocomplete">
+  <div class="mx-autocomplete__control mx-form--inline-button" data-control="">
+    <input class="mx-validate mx-input__text" id="unique-6" name="unique-2" type="text" role="combobox" aria-expanded="false" aria-controls="unique-2" aria-autocomplete="list" aria-activedescendant="" aria-describedby="unique-2" aria-label="Favourite fruit" autocomplete="off" required="">
+      </div>
+  <div class="mx-autocomplete__suggestions">
+    
+    <ul class="mx-autocomplete__listbox" id="unique-0" role="listbox" hidden="">
+              <li class="mx-autocomplete__option" id="validate-autocomplete-option-0" role="option" data-value="apple" aria-selected="false">Apple</li>
+              <li class="mx-autocomplete__option" id="validate-autocomplete-option-1" role="option" data-value="banana" aria-selected="false">Banana</li>
+              <li class="mx-autocomplete__option" id="validate-autocomplete-option-2" role="option" data-value="cherry" aria-selected="false">Cherry</li>
+          </ul>
+    <output class="sr-only" aria-live="polite" data-autocomplete-status=""></output>
+  </div>
+</mx-autocomplete>
+
+  
+  
+</div>
+
+  <button class="mx-button" type="submit">
+    
+    <span>Submit</span>
+    
+  </button>
+</form>"
+`;

package/src/Form/form.css

@@ -1,3 +1,5 @@
+@import "../Utility/_mixins.css";
+
 /**
  * Form
  */
@@ -65,14 +67,15 @@
     &[disabled] {
       opacity: var(--disabled-opacity, 0.6);
       cursor: not-allowed;
-    }
-
-    &.error {
-      border-color: var(--error-foreground, var(--colour-error));
-    }
 
-    &.success {
-      border-color: var(--success-foreground, var(--colour-success));
+      @media (--forced-colors) {
+        /* opt out so GrayText survives */
+        forced-color-adjust: none;
+        opacity: 1;
+        color: GrayText;
+        border-color: GrayText;
+        background-color: Canvas;
+      }
     }
   }
 
@@ -123,12 +126,12 @@
       background-color: transparent;
     }
 
-    &:has(.error)::before {
-      background-color: var(--error-foreground, var(--colour-error));
+    &:has(.mx-validate:user-valid)::before {
+      background-color: var(--success-foreground, var(--colour-success));
     }
 
-    &:has(.success)::before {
-      background-color: var(--success-foreground, var(--colour-success));
+    &:has(:is(.mx-validate:user-invalid, [aria-invalid="true"]))::before {
+      background-color: var(--error-foreground, var(--colour-error));
     }
   }
 }
@@ -153,6 +156,17 @@
       outline-offset: calc(var(--line-width, 2px) * -1);
     }
 
+    &:has(.mx-validate:user-valid),
+    .mx-validate &:has(:user-valid) {
+      border-color: var(--success-foreground, var(--colour-success));
+    }
+
+    &:has(.mx-validate:user-invalid),
+    .mx-validate &:has(:user-invalid),
+    &:has([aria-invalid="true"]) {
+      border-color: var(--error-foreground, var(--colour-error));
+    }
+
     & .mx-input__text {
       background-color: transparent;
       border: 0;
@@ -195,45 +209,57 @@
   .mx-checkbox [type="checkbox"] {
     box-shadow: none;
     appearance: none;
+    display: flex;
     inline-size: var(--control-size, var(--spacing-m));
     block-size: var(--control-size, var(--spacing-m));
     background-color: var(--background, var(--colour-background));
     border: var(--line-width, 2px) solid var(--line-colour, var(--colour-border));
     border-radius: var(--border-radius);
+    font-size: 1rem;
 
     @media (pointer: coarse) {
       --control-size: 2rem;
     }
 
-    &:checked {
-      background-image: url("./images/checkmark.svg");
-      background-size: 0.75rem;
-      background-position: center;
+    &:checked::after {
+      content: "";
+      display: block;
+      inline-size: 0.75rem;
+      block-size: 0.75rem;
+      margin: auto;
+      mask-image: url("./images/checkmark.svg");
+      mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      background-color: var(--checkbox-colour, currentcolor);
+
+      @add-mixin forced-colors-paint;
     }
 
     &[disabled] {
-      &::after {
-        opacity: var(--disabled-opacity, 0.6);
-        cursor: not-allowed;
-        content: "";
-        display: block;
-        inline-size: 100%;
-        block-size: 100%;
-        border-radius: var(--border-radius);
-      }
+      cursor: not-allowed;
 
       & + label {
         opacity: var(--disabled-opacity, 0.6);
         cursor: not-allowed;
+
+        @media (--forced-colors) {
+          /* opt out or the UA forces this straight back to CanvasText */
+          forced-color-adjust: none;
+          opacity: 1;
+          color: GrayText;
+        }
       }
-    }
 
-    &.error {
-      border-color: var(--error-foreground, var(--colour-error));
-    }
+      @media (--forced-colors) {
+        /* opt out so GrayText survives */
+        --forced-colour: GrayText;
 
-    &.success {
-      border-color: var(--success-foreground, var(--colour-success));
+        forced-color-adjust: none;
+        color: GrayText;
+        border-color: GrayText;
+        background-color: Canvas;
+      }
     }
   }
 }
@@ -256,46 +282,48 @@
     background-color: var(--background, var(--colour-background));
     border: var(--line-width, 2px) solid var(--line-colour, var(--colour-border));
     border-radius: 50%;
+    font-size: 1rem;
 
     @media (pointer: coarse) {
       --control-size: 2rem;
     }
 
-    &:checked {
-      &::after {
-        content: "";
-        display: block;
-        inline-size: 0.5rem;
-        block-size: 0.5rem;
-        margin: auto;
-        border-radius: 50%;
-        background-color: var(--radio-colour, var(--colour-primary));
-      }
+    &:checked::after {
+      content: "";
+      display: block;
+      inline-size: 0.5rem;
+      block-size: 0.5rem;
+      margin: auto;
+      border-radius: 50%;
+      background-color: var(--radio-colour, var(--colour-primary));
+
+      @add-mixin forced-colors-paint;
     }
 
     &[disabled] {
-      &::after {
-        opacity: var(--disabled-opacity, 0.6);
-        cursor: not-allowed;
-        content: "";
-        display: block;
-        inline-size: 100%;
-        block-size: 100%;
-        border-radius: 50%;
-      }
+      cursor: not-allowed;
 
       & + label {
         opacity: var(--disabled-opacity, 0.6);
         cursor: not-allowed;
+
+        @media (--forced-colors) {
+          /* opt out or the UA forces this straight back to CanvasText */
+          forced-color-adjust: none;
+          opacity: 1;
+          color: GrayText;
+        }
       }
-    }
 
-    &.error {
-      border-color: var(--error-foreground, var(--colour-error));
-    }
+      @media (--forced-colors) {
+        /* opt out so GrayText survives */
+        --forced-colour: GrayText;
 
-    &.success {
-      border-color: var(--success-foreground, var(--colour-success));
+        forced-color-adjust: none;
+        color: GrayText;
+        border-color: GrayText;
+        background-color: Canvas;
+      }
     }
   }
 
@@ -337,6 +365,96 @@
   }
 }
 
+/**
+ * Choice cards.
+ */
+
+@layer design-system.components {
+  .mx-choice-card {
+    /* @public --choice-padding-block --choice-padding-inline --choice-colour-active */
+    display: block;
+    position: relative;
+    border: var(--line-width, 2px) solid var(--line-colour, var(--colour-border));
+    border-radius: var(--border-radius);
+    background-color: var(--background, var(--colour-background));
+    transition:
+      border-color 0.12s linear,
+      background-color 0.12s linear;
+
+    & label {
+      display: grid;
+      gap: var(--spacing-xxxs);
+      padding-block: var(--choice-padding-block, var(--spacing-s));
+      padding-inline: calc(
+          var(--control-size, var(--spacing-m)) + var(--choice-padding-inline, var(--spacing-m)) * 2
+        )
+        var(--choice-padding-inline, var(--spacing-m));
+      min-block-size: calc(
+        var(--control-size, var(--spacing-m)) + var(--choice-padding-block, var(--spacing-s)) * 2
+      );
+      cursor: pointer;
+      font-weight: var(--font-weight-bold);
+    }
+
+    & input {
+      position: absolute;
+      inset-block-start: var(--choice-padding-block, var(--spacing-s));
+      inset-inline-start: var(--choice-padding-inline, var(--spacing-m));
+    }
+
+    &:has(input:checked) {
+      border-color: var(--choice-colour-active, var(--colour-primary));
+      background-color: color-mix(
+        in oklch,
+        var(--choice-colour-active, var(--colour-primary)),
+        white 95%
+      );
+    }
+
+    &:hover {
+      border-color: var(--choice-colour-active, var(--colour-primary));
+    }
+
+    &:has(.mx-validate:user-valid),
+    .mx-validate &:has(:user-valid) {
+      border-color: var(--success-foreground, var(--colour-success));
+    }
+
+    &:has(.mx-validate:user-invalid),
+    .mx-validate &:has(:user-invalid),
+    &:has([aria-invalid="true"]) {
+      border-color: var(--error-foreground, var(--colour-error));
+    }
+  }
+
+  .mx-choice-divider {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    font-size: var(--font-size-s);
+    color: var(--colour-foreground-alt);
+    margin-block-end: var(--spacing-xxxs);
+
+    &::before,
+    &::after {
+      content: "";
+      flex: 1;
+      block-size: 1px;
+      background-color: var(--colour-border);
+    }
+  }
+
+  .mx-choice-card__hint {
+    font-weight: var(--font-weight-normal);
+    font-size: var(--font-size-s);
+    color: var(--colour-foreground-alt);
+  }
+
+  .mx-description + .mx-choice-card {
+    margin-block-start: var(--spacing-xxxs);
+  }
+}
+
 /**
  * Select
  */
@@ -388,12 +506,25 @@
       }
     }
 
+    /* A <select> has no pseudo-element to mask, and the chevron asset is a
+       fixed black, so on the legacy path hand the arrow back to the UA under
+       forced colours. The base-select path masks ::picker-icon instead. */
+    @supports not (appearance: base-select) {
+      @media (--forced-colors) {
+        appearance: auto;
+        background-image: none;
+        padding-inline-end: revert;
+      }
+    }
+
     &::picker-icon {
       mask-image: url("./images/form-chevron-down.svg");
       mask-repeat: no-repeat;
       mask-position: center;
       background-color: currentcolor;
       aspect-ratio: 1 / 1;
+
+      @add-mixin forced-colors-paint;
     }
 
     &:open::picker-icon {
@@ -407,6 +538,8 @@
       display: block;
       mask-image: url("./images/checkmark.svg");
       background-color: currentcolor;
+
+      @add-mixin forced-colors-paint;
     }
 
     &[multiple] {
@@ -527,10 +660,62 @@
   .mx-error-message::before {
     mask-image: url("./images/form-error.svg");
     background-color: var(--error-foreground, var(--colour-error));
+
+    @add-mixin forced-colors-paint;
   }
 
   .mx-success-message::before {
     mask-image: url("./images/form-success.svg");
     background-color: var(--success-foreground, var(--colour-success));
+
+    @add-mixin forced-colors-paint;
+  }
+}
+
+/**
+ * Validation state
+ *
+ * Two separate hooks, deliberately:
+ *
+ * 1. .mx-validate — opt in to *live* native validation. :user-valid /
+ *    :user-invalid fire on their own as the user types, so without this class
+ *    a control is never coloured automatically (filling in an unmarked field
+ *    doesn't turn it green).
+ *
+ *    Put it on the control itself, or on a .mx-checkbox / .mx-radio /
+ *    .mx-autocomplete wrapper — those three components put `className` and
+ *    Drupal `attributes` on the wrapper, not the input, so the wrapper is the
+ *    only reachable spot. The wrapper half is scoped to those class names on
+ *    purpose: a bare descendant selector would leak, styling checkboxes
+ *    inside any .mx-validate ancestor while leaving text inputs alone.
+ *
+ * 2. [aria-invalid="true"] — an *explicit* error, no opt-in: server-rendered
+ *    (Drupal) or async failures the browser can't see. The consumer has
+ *    already decided the field is wrong, so there's nothing to opt into.
+ *
+ * :user-* is used rather than :valid / :invalid so a blank required field
+ * isn't red on page load.
+ *
+ * Explicit errors are excluded from live success styling so they stay red.
+ */
+
+@layer design-system.atoms {
+  .mx-validate,
+  :is(.mx-checkbox, .mx-radio, .mx-autocomplete).mx-validate :is(input, select, textarea) {
+    &:user-valid:not([aria-invalid="true"]) {
+      border-color: var(--success-foreground, var(--colour-success));
+    }
+
+    &:user-invalid {
+      border-color: var(--error-foreground, var(--colour-error));
+    }
+  }
+
+  .mx-input__text[aria-invalid="true"],
+  .mx-input__select[aria-invalid="true"],
+  .mx-input__textarea[aria-invalid="true"],
+  .mx-checkbox [type="checkbox"][aria-invalid="true"],
+  .mx-radio [type="radio"][aria-invalid="true"] {
+    border-color: var(--error-foreground, var(--colour-error));
   }
 }