@midas-ds/components 17.10.12 → 17.10.14

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## 17.10.14 (2026-04-01)
+
+### 🩹 Fixes
+
+- **components, search-field:** set inputMode='search' as default ([4a0fe1a9bc](https://github.com/migrationsverket/midas/commit/4a0fe1a9bc))
+
+### 📖 Documentation changes
+
+- **components, textfield:** add numeric example ([8ae48988af](https://github.com/migrationsverket/midas/commit/8ae48988af))
+- **components:** add autocomplete and inputmode stories ([7babb670fd](https://github.com/migrationsverket/midas/commit/7babb670fd))
+
+## 17.10.13 (2026-03-30)
+
+### 🩹 Fixes
+
+- **components,link:** wrap hover rules in @media (hover: hover) to match LinkButton ([c71848b659](https://github.com/migrationsverket/midas/commit/c71848b659))
+- **components,link:** consolidate hover rules to match LinkButton pattern ([0fa6c2ab09](https://github.com/migrationsverket/midas/commit/0fa6c2ab09))
+- **components,link:** move redundant :hover rules under @media (hover: hover) ([cf8e2114a4](https://github.com/migrationsverket/midas/commit/cf8e2114a4))
+
 ## 17.10.12 (2026-03-30)
 
 ### 🧱 Updated Dependencies

package/assets/Link.css

@@ -1 +1 @@
-._link_1sdlh_1{font-family:var(--midas-typography-font-family);color:var(--midas-link-enabled);text-decoration:underline;display:inline-flex;cursor:pointer;gap:var(--midas-space-xsmall);font-weight:400;align-items:center}._link_1sdlh_1[data-hovered]:not([data-disabled],:disabled),._link_1sdlh_1:hover:not([data-disabled],:disabled){color:var(--midas-link-hover)}@media(forced-colors:active){._link_1sdlh_1[data-hovered]:not([data-disabled],:disabled),._link_1sdlh_1:hover:not([data-disabled],:disabled){color:highlight}}._link_1sdlh_1:visited{color:var(--midas-link-visited)}._link_1sdlh_1[data-disabled],._link_1sdlh_1:disabled{cursor:not-allowed;color:var(--midas-text-disabled)}._link_1sdlh_1[data-pressed]:not([data-disabled],:disabled),._link_1sdlh_1:active:not([data-disabled],:disabled){color:var(--midas-link-pressed)}._link_1sdlh_1[data-focused],._link_1sdlh_1:focus{outline:none}._link_1sdlh_1[data-focus-visible],._link_1sdlh_1:focus-visible{box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._link_1sdlh_1[data-focus-visible],._link_1sdlh_1:focus-visible{outline:3px solid highlight;outline-offset:2px}}._icon_1sdlh_51{flex:0 0 auto}._standalone_1sdlh_55{display:inline-flex;gap:var(--midas-space-small);text-decoration:none;font-weight:500}._standalone_1sdlh_55[data-hovered]:not([data-disabled],:disabled),._standalone_1sdlh_55:hover:not([data-disabled],:disabled){text-decoration:underline}._standalone_1sdlh_55[data-pressed]:not([data-disabled],:disabled),._standalone_1sdlh_55:active:not([data-disabled],:disabled){text-decoration:underline}._stretched_1sdlh_72:after{position:absolute;inset:0;z-index:var(--midas-z-index-base);content:""}
+._link_duep2_1{font-family:var(--midas-typography-font-family);color:var(--midas-link-enabled);text-decoration:underline;display:inline-flex;cursor:pointer;gap:var(--midas-space-xsmall);font-weight:400;align-items:center}@media(hover:hover){._link_duep2_1[data-hovered]:not([data-disabled],:disabled),._link_duep2_1:hover:not([data-disabled],:disabled){color:var(--midas-link-hover)}@media(forced-colors:active){._link_duep2_1[data-hovered]:not([data-disabled],:disabled),._link_duep2_1:hover:not([data-disabled],:disabled){color:highlight}}}._link_duep2_1:visited{color:var(--midas-link-visited)}._link_duep2_1[data-disabled],._link_duep2_1:disabled{cursor:not-allowed;color:var(--midas-text-disabled)}._link_duep2_1[data-pressed]:not([data-disabled],:disabled),._link_duep2_1:active:not([data-disabled],:disabled){color:var(--midas-link-pressed)}._link_duep2_1[data-focused],._link_duep2_1:focus{outline:none}._link_duep2_1[data-focus-visible],._link_duep2_1:focus-visible{box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._link_duep2_1[data-focus-visible],._link_duep2_1:focus-visible{outline:3px solid highlight;outline-offset:2px}}._icon_duep2_53{flex:0 0 auto}._standalone_duep2_57{display:inline-flex;gap:var(--midas-space-small);text-decoration:none;font-weight:500}@media(hover:hover){._standalone_duep2_57[data-hovered]:not([data-disabled],:disabled),._standalone_duep2_57:hover:not([data-disabled],:disabled){text-decoration:underline}}._standalone_duep2_57[data-pressed]:not([data-disabled],:disabled),._standalone_duep2_57:active:not([data-disabled],:disabled){text-decoration:underline}._stretched_duep2_76:after{position:absolute;inset:0;z-index:var(--midas-z-index-base);content:""}

package/chunks/Link-CSIZehbN.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as e, jsxs as _, Fragment as u } from "react/jsx-runtime";
+import { Link as f } from "react-aria-components";
+import { c as h } from "./clsx-AexbMWKp.js";
+import { c as k } from "./createLucideIcon-CP-mMPfa.js";
+import { S as w } from "./square-arrow-out-up-right-x_I6wdNi.js";
+import { A as L } from "./arrow-right-BVcFGZmy.js";
+import '../assets/Link.css';const x = [
+  ["path", { d: "M12 17V3", key: "1cwfxf" }],
+  ["path", { d: "m6 11 6 6 6-6", key: "12ii2o" }],
+  ["path", { d: "M19 21H5", key: "150jfl" }]
+], g = k("arrow-down-to-line", x), y = "_link_duep2_1", A = "_icon_duep2_53", j = "_standalone_duep2_57", I = "_stretched_duep2_76", o = {
+  link: y,
+  icon: A,
+  standalone: j,
+  stretched: I
+}, D = ({
+  children: t,
+  standalone: n,
+  target: r,
+  stretched: s,
+  download: a,
+  icon: c,
+  className: l,
+  as: d,
+  ...m
+}) => {
+  const p = d || f, i = c || (a ? g : r === "_blank" ? w : n ? L : null);
+  return /* @__PURE__ */ e(
+    p,
+    {
+      className: h(
+        o.link,
+        n && o.standalone,
+        s && o.stretched,
+        l
+      ),
+      ...m,
+      target: r,
+      children: /* @__PURE__ */ _(u, { children: [
+        t,
+        i ? /* @__PURE__ */ e(
+          N,
+          {
+            className: o.icon,
+            icon: i,
+            size: 16
+          }
+        ) : null
+      ] })
+    }
+  );
+}, N = ({
+  icon: t,
+  ...n
+}) => /* @__PURE__ */ e(t, { ...n });
+export {
+  D as L
+};

package/chunks/{SearchField-VIMb28RB.js → SearchField-DRaSep82.js}

@@ -1,32 +1,32 @@
 'use client';
-import { jsx as i, jsxs as s, Fragment as F } from "react/jsx-runtime";
-import { useSlottedContext as j, FormContext as N, SearchField as g, Input as y } from "react-aria-components";
-import { s as B } from "./TextField.module-BDIbEV87.js";
+import { jsx as i, jsxs as s, Fragment as j } from "react/jsx-runtime";
+import { useSlottedContext as N, FormContext as g, SearchField as y, Input as B } from "react-aria-components";
+import { s as C } from "./TextField.module-BDIbEV87.js";
 import { B as u } from "./Button-GCROAMSl.js";
 import { c as o } from "./clsx-AexbMWKp.js";
 import { F as h } from "./FieldError-krpMBtie.js";
-import { c as C } from "./createLucideIcon-CP-mMPfa.js";
-import { X as k } from "./x-B9bYxG31.js";
-import { u as I } from "./useLocalizedStringFormatter-BHvsRxDk.js";
-import '../assets/SearchField.css';const D = [
+import { c as k } from "./createLucideIcon-CP-mMPfa.js";
+import { X as I } from "./x-B9bYxG31.js";
+import { u as D } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import '../assets/SearchField.css';const E = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], E = C("search", D), L = "_container_1msv3_1", T = "_inner_1msv3_10", V = "_inputContainer_1msv3_15", $ = "_medium_1msv3_21", w = "_icon_1msv3_26", O = "_clear_1msv3_38", P = "_input_1msv3_15", n = {
-  container: L,
-  inner: T,
-  inputContainer: V,
-  medium: $,
-  icon: w,
-  clear: O,
-  input: P
-}, X = { search: "Search" }, q = { search: "Sök" }, A = {
-  en: X,
-  sv: q
+], L = k("search", E), T = "_container_1msv3_1", V = "_inner_1msv3_10", $ = "_inputContainer_1msv3_15", w = "_medium_1msv3_21", O = "_icon_1msv3_26", P = "_clear_1msv3_38", X = "_input_1msv3_15", n = {
+  container: T,
+  inner: V,
+  inputContainer: $,
+  medium: w,
+  icon: O,
+  clear: P,
+  input: X
+}, q = { search: "Search" }, A = { search: "Sök" }, G = {
+  en: q,
+  sv: A
 };
-function G(a) {
+function H(a) {
   return !!a?.length;
 }
-const z = ({
+const M = ({
   errorPosition: a = "top",
   size: r = "large",
   showButton: _,
@@ -34,20 +34,22 @@ const z = ({
   errorMessage: m,
   placeholder: l,
   validationBehavior: f,
+  inputMode: S = "search",
   ...e
 }) => {
-  const S = I(A), b = j(N), p = f ?? b?.validationBehavior ?? "aria", x = _ !== !1, d = (t) => {
-    !t || e.isInvalid || e.validate && G(e.validate(t)) || e.onSubmit?.(t);
+  const b = D(G), p = N(g), x = f ?? p?.validationBehavior ?? "aria", F = _ !== !1, d = (t) => {
+    !t || e.isInvalid || e.validate && H(e.validate(t)) || e.onSubmit?.(t);
   };
   return /* @__PURE__ */ i(
-    g,
+    y,
     {
       ...e,
+      inputMode: S,
       onSubmit: d,
       "aria-label": e["aria-label"] ?? l,
       className: o(n.container, v),
-      validationBehavior: p,
-      children: ({ state: t }) => /* @__PURE__ */ s(F, { children: [
+      validationBehavior: x,
+      children: ({ state: t }) => /* @__PURE__ */ s(j, { children: [
         a === "top" && /* @__PURE__ */ i(h, { children: ({ validationErrors: c }) => m ?? c.join(" ") }),
         /* @__PURE__ */ s("div", { className: n.inner, children: [
           /* @__PURE__ */ s(
@@ -58,21 +60,19 @@ const z = ({
               }),
               children: [
                 /* @__PURE__ */ i(
-                  E,
+                  L,
                   {
                     size: 20,
                     className: n.icon
                   }
                 ),
                 /* @__PURE__ */ i(
-                  y,
+                  B,
                   {
                     placeholder: l,
-                    className: o(
-                      B.input,
-                      n.input,
-                      { [n.medium]: r === "medium" }
-                    )
+                    className: o(C.input, n.input, {
+                      [n.medium]: r === "medium"
+                    })
                   }
                 ),
                 t.value.length > 0 && /* @__PURE__ */ i(
@@ -84,7 +84,7 @@ const z = ({
                       [n.medium]: r === "medium"
                     }),
                     children: /* @__PURE__ */ i(
-                      k,
+                      I,
                       {
                         size: 20,
                         "aria-hidden": !0
@@ -95,7 +95,7 @@ const z = ({
               ]
             }
           ),
-          x && /* @__PURE__ */ i(
+          F && /* @__PURE__ */ i(
             u,
             {
               slot: null,
@@ -104,7 +104,7 @@ const z = ({
               isDisabled: e.isDisabled,
               type: "button",
               onPress: () => d(t.value),
-              children: e.buttonText ?? S.format("search")
+              children: e.buttonText ?? b.format("search")
             }
           )
         ] }),
@@ -114,5 +114,5 @@ const z = ({
   );
 };
 export {
-  z as S
+  M as S
 };

package/index.js

@@ -23,14 +23,14 @@ import { H as po } from "./chunks/Heading-nfcRc2QF.js";
 import { I as mo } from "./chunks/InfoBanner-CWLvkP6D.js";
 import { L as fo } from "./chunks/Label-Cg0aAlnt.js";
 import { H as To, L as lo, N as co, S as go, a as uo } from "./chunks/Layout-DLe0UoSw.js";
-import { L as Co } from "./chunks/Link-CyY3-8M8.js";
+import { L as Co } from "./chunks/Link-CSIZehbN.js";
 import { L as bo } from "./chunks/LinkButton-Dzp8ZAPs.js";
 import { L as Io, a as Do } from "./chunks/Logo-DDykn5b2.js";
 import { M as Ro } from "./chunks/Dialog-BSWBlyJI.js";
 import { P as Po } from "./chunks/Popover-CjEPHe4A.js";
 import { P as vo } from "./chunks/ProgressBar-CBz_dIOH.js";
 import { R as Ao, a as ho } from "./chunks/Radio-CRHdSthr.js";
-import { S as yo } from "./chunks/SearchField-VIMb28RB.js";
+import { S as yo } from "./chunks/SearchField-DRaSep82.js";
 import { S as No } from "./chunks/Select-DKNK3eh_.js";
 import { S as zo } from "./chunks/Skeleton-tiP1Syzf.js";
 import { S as Qo } from "./chunks/Spinner-CfKMn18u.js";
@@ -50,7 +50,7 @@ import { c as Qa } from "./chunks/clsx-AexbMWKp.js";
 import { DialogTrigger as Za, MenuTrigger as ja, RouterProvider as qa } from "react-aria-components";
 import { u as Ka } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
 import { useToastState as Wa } from "react-stately";
-const o = "17.10.12", a = {
+const o = "17.10.14", a = {
   version: o
 }, r = a.version;
 export {

package/link/index.js

@@ -1,4 +1,4 @@
-import { L as e } from "../chunks/Link-CyY3-8M8.js";
+import { L as e } from "../chunks/Link-CSIZehbN.js";
 import { RouterProvider as f } from "react-aria-components";
 export {
   e as Link,

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "17.10.12",
+  "version": "17.10.14",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

package/search-field/SearchField.d.ts

@@ -1,6 +1,5 @@
 import { SearchFieldProps as AriaSearchFieldProps } from 'react-aria-components';
 import { Size } from '../common/types';
-import * as React from 'react';
 export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'children'> {
     /** Placeholder text */
     placeholder: string;
@@ -38,4 +37,4 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'children'>
      * */
     size?: Size;
 }
-export declare const SearchField: React.FC<SearchFieldProps>;
+export declare const SearchField: ({ errorPosition, size, showButton, className, errorMessage, placeholder, validationBehavior, inputMode, ...props }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;

package/search-field/SearchField.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { SearchField } from './SearchField';
 type Story = StoryObj<typeof SearchField>;
 declare const _default: {
-    component: import('react').FC<import('./SearchField').SearchFieldProps>;
+    component: ({ errorPosition, size, showButton, className, errorMessage, placeholder, validationBehavior, inputMode, ...props }: import('./SearchField').SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
     title: string;
     tags: string[];
     parameters: {

package/search-field/index.js

@@ -1,4 +1,4 @@
-import { S as a } from "../chunks/SearchField-VIMb28RB.js";
+import { S as a } from "../chunks/SearchField-DRaSep82.js";
 export {
   a as SearchField
 };

package/textfield/TextField.stories.d.ts

@@ -17,6 +17,7 @@ declare const _default: {
         description: string;
         errorPosition: "top";
         size: "large";
+        inputMode: "text";
     };
 };
 export default _default;
@@ -26,9 +27,11 @@ export declare const Invalid: Story;
 export declare const Required: Story;
 export declare const CustomValidation: Story;
 export declare const Number: Story;
+export declare const Numeric: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const ShowCounter: Story;
 export declare const MaxLengthAndShowCounter: Story;
 export declare const DS1243: Story;
 export declare const WithHelpPopover: Story;
+export declare const Email: Story;

package/chunks/Link-CyY3-8M8.js

@@ -1,59 +0,0 @@
-'use client';
-import { jsx as r, jsxs as _, Fragment as f } from "react/jsx-runtime";
-import { Link as p } from "react-aria-components";
-import { c as k } from "./clsx-AexbMWKp.js";
-import { c as u } from "./createLucideIcon-CP-mMPfa.js";
-import { S as w } from "./square-arrow-out-up-right-x_I6wdNi.js";
-import { A as L } from "./arrow-right-BVcFGZmy.js";
-import '../assets/Link.css';const x = [
-  ["path", { d: "M12 17V3", key: "1cwfxf" }],
-  ["path", { d: "m6 11 6 6 6-6", key: "12ii2o" }],
-  ["path", { d: "M19 21H5", key: "150jfl" }]
-], g = u("arrow-down-to-line", x), y = "_link_1sdlh_1", A = "_icon_1sdlh_51", j = "_standalone_1sdlh_55", I = "_stretched_1sdlh_72", o = {
-  link: y,
-  icon: A,
-  standalone: j,
-  stretched: I
-}, D = ({
-  children: t,
-  standalone: n,
-  target: s,
-  stretched: i,
-  download: l,
-  icon: e,
-  className: a,
-  as: d,
-  ...m
-}) => {
-  const h = d || p, c = e || (l ? g : s === "_blank" ? w : n ? L : null);
-  return /* @__PURE__ */ r(
-    h,
-    {
-      className: k(
-        o.link,
-        n && o.standalone,
-        i && o.stretched,
-        a
-      ),
-      ...m,
-      target: s,
-      children: /* @__PURE__ */ _(f, { children: [
-        t,
-        c ? /* @__PURE__ */ r(
-          N,
-          {
-            className: o.icon,
-            icon: c,
-            size: 16
-          }
-        ) : null
-      ] })
-    }
-  );
-}, N = ({
-  icon: t,
-  ...n
-}) => /* @__PURE__ */ r(t, { ...n });
-export {
-  D as L
-};