@simplybusiness/mobius 9.3.3 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 10.0.0
+
+### Major Changes
+
+- fc4ed44: ### BREAKING CHANGE: All component CSS is now wrapped in `@layer` declarations
+
+  All CSS across mobius, mobius-datepicker, mobius-journey, mobius-interventions, mobius-chat-ui, and mobius-chatbot is now wrapped in `@layer atoms` or `@layer organisms`. The layer order preamble is declared in theme-core.
+
+  **What this means for consumers:**
+  - **Good news:** You no longer need specificity hacks (e.g. `.Foo.Foo`) to override Mobius styles. Your unlayered CSS automatically wins the cascade, regardless of import order.
+  - **Action required if you support older browsers:** `@layer` is supported in Chrome 99+, Firefox 97+, and Safari 15.4+ (all shipped early 2022). If you need to support browsers older than this, you must add your own `@layer` polyfill at the build level. Mobius intentionally does not ship a polyfill — doing so would cause polyfilled styles to become unlayered and override your app styles, defeating the purpose.
+  - **Custom layer ordering:** If you need to insert your own layers between Mobius layers, declare your own `@layer` order before importing theme-core. Your declaration must include all Mobius layers: `@layer reset, base, atoms, your-layer, organisms, theme;`
+
+  **What changed:**
+  - 204 CSS files wrapped in `@layer` blocks
+  - `@layer reset, base, atoms, organisms, theme;` preamble added to theme-core
+  - New `@simplybusiness/stylelint-plugin` enforces layer wrapping in CI
+  - `lint-css.js` now resolves stylelint config per-package instead of using a hardcoded central config
+
+### Patch Changes
+
+- @simplybusiness/icons@5.0.3
+- @simplybusiness/mobius-hooks@0.1.1
+
+## 9.3.4
+
+### Patch Changes
+
+- ff8c3ab: Add sensible autocomplete defaults to TextField and PasswordField for improved browser autofill support
+
 ## 9.3.3
 
 ### Patch Changes

package/dist/cjs/components/AddressLookup/AddressLookup.js

@@ -3106,6 +3106,7 @@ var init_PasswordField = __esm({
     PasswordField = ({
       ref,
       className,
+      autoComplete = "current-password",
       ...props
     }) => {
       const [show, setShow] = (0, import_react26.useState)(false);
@@ -3129,6 +3130,7 @@ var init_PasswordField = __esm({
           ref: mergeRefs([localRef, ref]),
           className: classes,
           ...props,
+          autoComplete,
           type,
           suffixInside: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ShowHideButton, { onClick: handleShowHideButtonClick, show })
         }
@@ -4736,11 +4738,14 @@ var init_TextField = __esm({
         prefixOutside,
         suffixInside,
         suffixOutside,
+        autoComplete,
         isReadOnly,
         ...otherProps
       } = props;
+      const resolvedAutoComplete = autoComplete ?? (type === "email" ? "email" : type === "tel" ? "tel" : void 0);
       const { inputProps, labelProps, errorMessageProps } = useTextField({
         ...props,
+        autoComplete: resolvedAutoComplete,
         "aria-errormessage": errorMessage
       });
       const hidden = type === "hidden";