@pnx-mixtape/mxds 0.0.13 → 0.0.14

package/src/Form/Radio/Radio.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "../FormItem/form-item.twig"
 import InputRadio from "./input-radio.twig"
 import Label from "../Label/label.twig"

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

@@ -1,58 +1,62 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Radio Checked smoke-test 1`] = `
-<fieldset class="mx-form-item mx-fieldset ">
-  <legend class="mx-legend ">
-    Do you like music?
-  </legend>
-  <div class="mx-radio ">
-    <input id="radio-set-yes"
-           type="radio"
-           name="music"
-           value="yes"
-           checked="checked"
-    >
-    <label for="radio-set-yes">
-      Yes
-    </label>
-  </div>
-  <div class="mx-radio ">
-    <input id="radio-set-no"
-           type="radio"
-           name="music"
-           value="no"
-    >
-    <label for="radio-set-no">
-      No
-    </label>
-  </div>
-</fieldset>
+<div class="mx-page default">
+  <fieldset class="mx-form-item mx-fieldset ">
+    <legend class="mx-legend ">
+      Do you like music?
+    </legend>
+    <div class="mx-radio ">
+      <input id="radio-set-yes"
+             type="radio"
+             name="music"
+             value="yes"
+             checked="checked"
+      >
+      <label for="radio-set-yes">
+        Yes
+      </label>
+    </div>
+    <div class="mx-radio ">
+      <input id="radio-set-no"
+             type="radio"
+             name="music"
+             value="no"
+      >
+      <label for="radio-set-no">
+        No
+      </label>
+    </div>
+  </fieldset>
+</div>
 `;
 
 exports[`Form/Radio Radio smoke-test 1`] = `
-<fieldset class="mx-form-item mx-fieldset ">
-  <legend class="mx-legend ">
-    Do you like music?
-  </legend>
-  <div class="mx-radio ">
-    <input id="radio-set-yes"
-           type="radio"
-           name="music"
-           value="yes"
-    >
-    <label for="radio-set-yes">
-      Yes
-    </label>
-  </div>
-  <div class="mx-radio ">
-    <input id="radio-set-no"
-           type="radio"
-           name="music"
-           value="no"
-    >
-    <label for="radio-set-no">
-      No
-    </label>
-  </div>
-</fieldset>
+<div class="mx-page default">
+  <fieldset class="mx-form-item mx-fieldset ">
+    <legend class="mx-legend ">
+      Do you like music?
+    </legend>
+    <div class="mx-radio ">
+      <input id="radio-set-yes"
+             type="radio"
+             name="music"
+             value="yes"
+      >
+      <label for="radio-set-yes">
+        Yes
+      </label>
+    </div>
+    <div class="mx-radio ">
+      <input id="radio-set-no"
+             type="radio"
+             name="music"
+             value="no"
+      >
+      <label for="radio-set-no">
+        No
+      </label>
+    </div>
+  </fieldset>
+</div>
 `;

package/src/Form/Search/Search.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./search-form.twig"
 import "../form.css"
 
@@ -14,9 +14,6 @@ const meta: Meta<SearchFormType> = {
     action: "#search",
     id: "search-keyword",
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
 }
 
 export default meta

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

@@ -1,26 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Search Search smoke-test 1`] = `
-<form class="mx-form mx-form--inline-button"
-      role="search"
-      action="#search"
->
-  <input class="mx-input__text "
-         id="search-keyword"
-         name="search-form"
-         type="search"
-         value
-         aria-label="Search by keywords"
-         placeholder="Keywords..."
+<div class="mx-page default">
+  <form class="mx-form mx-form--inline-button"
+        role="search"
+        action="#search"
   >
-  <button class="mx-button mx-button--icon-only"
-          type="submit"
-  >
-    <span class="mx-icon mx-icon--search">
-    </span>
-    <span class="sr-only">
-      Search
-    </span>
-  </button>
-</form>
+    <input class="mx-input__text "
+           id="search-keyword"
+           name="search-form"
+           type="search"
+           value
+           aria-label="Search by keywords"
+           placeholder="Keywords..."
+    >
+    <button class="mx-button mx-button--icon-only"
+            type="submit"
+    >
+      <span class="mx-icon mx-icon--search">
+      </span>
+      <span class="sr-only">
+        Search
+      </span>
+    </button>
+  </form>
+</div>
 `;

package/src/Form/Select/FormSelect.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./FormSelect"
 
 const meta: Meta<typeof Component> = {

package/src/Form/Select/FormSelect.tsx

@@ -16,7 +16,7 @@ const Option = ({ label, value }: OptionProps): JSX.Element => (
   <option value={value}>{label}</option>
 )
 
-type FormSelectProps = ComponentPropsWithoutRef<"select"> & {
+export type FormSelectProps = ComponentPropsWithoutRef<"select"> & {
   options: OptionProps[]
   label?: string
   className?: string

package/src/Form/Select/Select.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./input-select.twig"
 import "../form.css"
 import { FormSelect as FormSelectType } from "@pnx-mixtape/ids-shape"

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

@@ -1,20 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Select Select smoke-test 1`] = `
-<select class="mx-input__select "
-        id="form-input-select"
-        name="example-form-input"
-        aria-label="Visually hidden label"
-        aria-describedby="unique-0"
->
-  <option value="1">
-    Option 1
-  </option>
-  <option value="2">
-    Option 2
-  </option>
-  <option value="3">
-    Option 3
-  </option>
-</select>
+<div class="mx-page default">
+  <select class="mx-input__select "
+          id="form-input-select"
+          name="example-form-input"
+          aria-label="Visually hidden label"
+          aria-describedby="unique-0"
+  >
+    <option value="1">
+      Option 1
+    </option>
+    <option value="2">
+      Option 2
+    </option>
+    <option value="3">
+      Option 3
+    </option>
+  </select>
+</div>
 `;

package/src/Form/TextInput/FormText.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./FormText"
 
 const meta: Meta<typeof Component> = {

package/src/Form/TextInput/InputDivider.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./input-divider.twig"
 import "../form.css"
 

package/src/Form/TextInput/TextInput.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./input-text.twig"
 import "../form.css"
 import {

package/src/Form/TextInput/__snapshots__/InputDivider.stories.ts.snap

@@ -1,28 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Text Input/Divider InputDivider smoke-test 1`] = `
-<div class="mx-form-item mx-form-item--inline">
-  <div class="mx-form-item">
-    <label class="mx-label mx-label--inline"
-           for="input1"
-    >
-      Input field
-    </label>
-    <input class="mx-input__text"
-           type="text"
-           id="input1"
-    >
-  </div>
-  <div class="mx-input__divider">
-    OR
-  </div>
-  <div class="mx-form-item">
-    <input class="mx-input__text"
-           type="text"
-           id="input2"
-           placeholder="Other input"
-           aria-label="Other input field"
-    >
+<div class="mx-page default">
+  <div class="mx-form-item mx-form-item--inline">
+    <div class="mx-form-item">
+      <label class="mx-label mx-label--inline"
+             for="input1"
+      >
+        Input field
+      </label>
+      <input class="mx-input__text"
+             type="text"
+             id="input1"
+      >
+    </div>
+    <div class="mx-input__divider">
+      OR
+    </div>
+    <div class="mx-form-item">
+      <input class="mx-input__text"
+             type="text"
+             id="input2"
+             placeholder="Other input"
+             aria-label="Other input field"
+      >
+    </div>
   </div>
 </div>
 `;

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

@@ -1,25 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/TextInput Icon smoke-test 1`] = `
-<span class="mx-input--icon mx-icon mx-icon--email">
+<div class="mx-page default">
+  <span class="mx-input--icon mx-icon mx-icon--email">
+    <input class="mx-input__text "
+           id="form-input-text"
+           name="example-form-input"
+           type="email"
+           value
+           aria-label="Visually hidden label"
+           placeholder="A text field"
+    >
+  </span>
+</div>
+`;
+
+exports[`Form/TextInput TextInput smoke-test 1`] = `
+<div class="mx-page default">
   <input class="mx-input__text "
          id="form-input-text"
          name="example-form-input"
-         type="email"
+         type="text"
          value
          aria-label="Visually hidden label"
          placeholder="A text field"
   >
-</span>
-`;
-
-exports[`Form/TextInput TextInput smoke-test 1`] = `
-<input class="mx-input__text "
-       id="form-input-text"
-       name="example-form-input"
-       type="text"
-       value
-       aria-label="Visually hidden label"
-       placeholder="A text field"
->
+</div>
 `;

package/src/Form/Textarea/FormTextarea.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "../TextInput/FormText"
 
 const meta: Meta<typeof Component> = {

package/src/Form/Textarea/Textarea.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./input-textarea.twig"
 import "../form.css"
 import { FormTextArea as FormTextAreaType } from "@pnx-mixtape/ids-shape"

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

@@ -1,11 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form/Textarea TextArea smoke-test 1`] = `
-<textarea class="mx-input__textarea "
-          id="form-input-textarea"
-          name="example-form-input"
-          aria-label="Visually hidden label"
-          aria-describedby="unique-0"
->
-</textarea>
+<div class="mx-page default">
+  <textarea class="mx-input__textarea "
+            id="form-input-textarea"
+            name="example-form-input"
+            aria-label="Visually hidden label"
+            aria-describedby="unique-0"
+  >
+  </textarea>
+</div>
 `;

package/src/Form/form.css

@@ -29,6 +29,9 @@
 
 @layer design-system.atoms {
   :is(.mx-input__text, .mx-input__select, .mx-input__textarea) {
+    --outline-size: var(--line-width, 2px);
+    --outline-offset: calc(var(--outline-size, 2px) * -1);
+
     box-shadow: none;
     font: inherit;
     letter-spacing: inherit;
@@ -46,10 +49,6 @@
     line-height: var(--line-height-ui);
     block-size: var(--form-element-height, var(--spacing-xxl));
 
-    &:focus-visible {
-      outline-offset: calc(var(--line-width, 2px) * -1);
-    }
-
     &::placeholder {
       color: var(--placeholder-colour, var(--colour-foreground-alt));
       opacity: 1;
@@ -61,11 +60,11 @@
     }
 
     &.error {
-      border-color: var(--error-foreground, var(--colour-error-foreground));
+      border-color: var(--error-foreground, var(--colour-error));
     }
 
     &.success {
-      border-color: var(--success-foreground, var(--colour-success-foreground));
+      border-color: var(--success-foreground, var(--colour-success));
     }
   }
 
@@ -117,14 +116,11 @@
     }
 
     &:has(.error)::before {
-      background-color: var(--error-foreground, var(--colour-error-foreground));
+      background-color: var(--error-foreground, var(--colour-error));
     }
 
     &:has(.success)::before {
-      background-color: var(
-        --success-foreground,
-        var(--colour-success-foreground)
-      );
+      background-color: var(--success-foreground, var(--colour-success));
     }
   }
 }
@@ -145,10 +141,8 @@
       var(--line-colour, var(--line-colour, var(--colour-border)));
 
     &:has(.mx-input__text:focus-visible) {
-      --outline-size: max(0.125rem, 0.15em);
-
-      outline: var(--outline-width, var(--outline-size))
-        var(--outline-style, solid) var(--outline-color, currentcolor);
+      outline: var(--outline-size) var(--outline-style, solid)
+        var(--outline-color, currentcolor);
       outline-offset: calc(var(--line-width, 2px) * -1);
     }
 
@@ -212,11 +206,6 @@
       background-position: center;
     }
 
-    &:focus-visible {
-      outline: var(--line-width, 2px) auto var(--outline-color);
-      outline-offset: 0;
-    }
-
     &[disabled] {
       &::after {
         opacity: var(--disabled-opacity, 0.6);
@@ -235,11 +224,11 @@
     }
 
     &.error {
-      border-color: var(--error-foreground, var(--colour-error-foreground));
+      border-color: var(--error-foreground, var(--colour-error));
     }
 
     &.success {
-      border-color: var(--success-foreground, var(--colour-success-foreground));
+      border-color: var(--success-foreground, var(--colour-success));
     }
   }
 }
@@ -280,11 +269,6 @@
       }
     }
 
-    &:focus-visible {
-      outline: var(--line-width, 2px) auto var(--outline-color);
-      outline-offset: 0;
-    }
-
     &[disabled] {
       &::after {
         opacity: var(--disabled-opacity, 0.6);
@@ -303,15 +287,18 @@
     }
 
     &.error {
-      border-color: var(--error-foreground, var(--colour-error-foreground));
+      border-color: var(--error-foreground, var(--colour-error));
     }
 
     &.success {
-      border-color: var(--success-foreground, var(--colour-success-foreground));
+      border-color: var(--success-foreground, var(--colour-success));
     }
   }
 
   :is(.mx-radio, .mx-checkbox) {
+    --outline-size: var(--line-width, 2px);
+    --outline-offset: calc(var(--outline-size, 2px) * -1);
+
     margin-block-end: var(--spacing-xxxs);
     display: flex;
     align-items: center;
@@ -343,6 +330,9 @@
 
 @layer design-system.atoms {
   .mx-input__select {
+    --outline-size: var(--line-width, 2px);
+    --outline-offset: calc(var(--outline-size, 2px) * -1);
+
     appearance: none;
     cursor: pointer;
     background-color: var(--background, var(--colour-background));
@@ -377,6 +367,9 @@
 
 @layer design-system.atoms {
   .mx-input__textarea {
+    --outline-size: var(--line-width, 2px);
+    --outline-offset: calc(var(--outline-size, 2px) * -1);
+
     block-size: calc(4 * var(--form-element-height, var(--spacing-xxl)));
     inline-size: 100%;
   }
@@ -466,14 +459,11 @@
 
   .mx-error-message::before {
     mask-image: svg-load("./images/form-error.svg");
-    background-color: var(--error-foreground, var(--colour-error-foreground));
+    background-color: var(--error-foreground, var(--colour-error));
   }
 
   .mx-success-message::before {
     mask-image: svg-load("./images/form-success.svg");
-    background-color: var(
-      --success-foreground,
-      var(--colour-success-foreground)
-    );
+    background-color: var(--success-foreground, var(--colour-success));
   }
 }

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./footer.twig"
 import Link from "../../Atom/Link/link.twig"
 import Icon from "../../Atom/Icon/icon.twig"
@@ -12,7 +12,6 @@ import {
   IconSizeModifier,
   FooterModifier,
 } from "@pnx-mixtape/ids-shape"
-import { Page } from "../../../.storybook/decorators"
 import { Icons } from "../../enums"
 
 const meta: Meta<FooterType> = {
@@ -67,10 +66,6 @@ const meta: Meta<FooterType> = {
     ],
     copyright: "&copy; 2025 Company Name",
   },
-  parameters: {
-    deepControls: { enabled: true },
-  },
-  decorators: [Page],
 }
 
 export default meta

package/src/Layout/Footer/Footer.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Footer"
 import "./footer.css"
 

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Layout/Footer Everything smoke-test 1`] = `
-<div class="mx-page">
-  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
+<div class="mx-page default">
+  <footer class="mx-footer mx-section--top-l mx-section--bottom-m mx-background--reverse">
     <div class="mx-footer__inner">
       <img alt="Mixtape"
            src="./mixtape-logo.png"
@@ -129,8 +129,8 @@ exports[`Layout/Footer Everything smoke-test 1`] = `
 `;
 
 exports[`Layout/Footer Footer smoke-test 1`] = `
-<div class="mx-page">
-  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
+<div class="mx-page default">
+  <footer class="mx-footer mx-section--top-l mx-section--bottom-m mx-background--reverse">
     <div class="mx-footer__inner">
       <img alt="Mixtape"
            src="./mixtape-logo.png"
@@ -187,8 +187,8 @@ exports[`Layout/Footer Footer smoke-test 1`] = `
 `;
 
 exports[`Layout/Footer Light smoke-test 1`] = `
-<div class="mx-page">
-  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--alt">
+<div class="mx-page default">
+  <footer class="mx-footer mx-section--top-l mx-section--bottom-m mx-background--alt">
     <div class="mx-footer__inner">
       <img alt="Mixtape"
            src="./mixtape-logo.png"
@@ -245,8 +245,8 @@ exports[`Layout/Footer Light smoke-test 1`] = `
 `;
 
 exports[`Layout/Footer NoMenu smoke-test 1`] = `
-<div class="mx-page">
-  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
+<div class="mx-page default">
+  <footer class="mx-footer mx-section--top-l mx-section--bottom-m mx-background--reverse">
     <div class="mx-footer__inner">
       <img alt="Mixtape"
            src="./mixtape-logo.png"
@@ -276,8 +276,8 @@ exports[`Layout/Footer NoMenu smoke-test 1`] = `
 `;
 
 exports[`Layout/Footer WithAcknowledgment smoke-test 1`] = `
-<div class="mx-page">
-  <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
+<div class="mx-page default">
+  <footer class="mx-footer mx-section--top-l mx-section--bottom-m mx-background--reverse">
     <div class="mx-footer__inner">
       <div class="mx-footer__aoc mx-text--s">
         We acknowledge the traditional owners and custodians of country throughout Australia and acknowledges their continuing connection to land, waters and community. We pay our respects to the people, the cultures and the elders past, present and emerging.