@midas-ds/components 17.2.1 → 17.2.3

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 17.2.3 (2026-02-23)
+
+### 🧱 Updated Dependencies
+
+- Updated theme to 3.11.1
+
+## 17.2.2 (2026-02-19)
+
+### 🩹 Fixes
+
+- **components, textfield:** toggle input type for password ([#1064](https://github.com/migrationsverket/midas/pull/1064))
+
 ## 17.2.1 (2026-02-19)
 
 ### 🩹 Fixes

package/assets/TextField.css

@@ -1 +1 @@
-._textField_1jh92_1{display:grid;grid-auto-columns:1fr;grid-auto-rows:1fr 1fr;grid-template-columns:1fr auto;grid-template-rows:min-content min-content min-content min-content;grid-template-areas:"Label Count" "Desc Count" "Error Count" "Input Input" "BottomError BottomError";width:100%;align-content:flex-end}._textField_1jh92_1>[slot=description]{grid-area:Desc}._textField_1jh92_1>._bottomError_1jh92_20{grid-area:BottomError}._textField_1jh92_1[data-disabled]{color:var(--midas-text-disabled)}._textField_1jh92_1[data-readonly] ._textArea_1jh92_29,._textField_1jh92_1[data-readonly] ._input_1jh92_30{background-color:transparent;border-color:var(--midas-border-color-subtle)}._textArea_1jh92_29{all:unset;color:var(--midas-text-primary);font-family:var(--midas-typography-font-family);display:flex;grid-area:Input;border-bottom:1px solid var(--midas-border-color-primary);align-items:center;justify-content:center;font-size:1rem;padding:1rem 1rem 1.25rem;background-color:var(--midas-field-01-base);box-sizing:border-box;word-wrap:break-word;width:100%;resize:both;overflow:auto}@media(forced-colors:active){._textArea_1jh92_29{outline:3px solid;outline-offset:2px}}._textArea_1jh92_29[data-hovered]{background-color:var(--midas-field-01-hover)}._textArea_1jh92_29[data-focused],._textArea_1jh92_29[data-focus-visible]{box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._textArea_1jh92_29[data-focused],._textArea_1jh92_29[data-focus-visible]{border:1px solid}}._textArea_1jh92_29[data-invalid]{border:none;box-shadow:var(--midas-state-invalid)}._textArea_1jh92_29[data-disabled]{cursor:not-allowed;background-color:var(--midas-field-disabled);border:none;border-bottom:1px solid var(--midas-border-color-disabled);color:var(--midas-text-disabled)}._wrap_1jh92_87{position:relative;grid-area:Input}._medium_1jh92_92 ._input_1jh92_30{min-height:var(--midas-size-130)}._input_1jh92_30{all:unset;color:var(--midas-text-primary);font-family:var(--midas-typography-font-family);grid-area:Input;border-bottom:1px solid var(--midas-border-color-primary);font-size:1rem;padding:0 1rem;line-height:1;background-color:var(--midas-field-01-base);border-radius:0;box-sizing:border-box;width:100%;min-height:var(--midas-size-150)}@media(forced-colors:active){._input_1jh92_30{border:1px solid}}._input_1jh92_30[data-hovered]{background-color:var(--midas-field-01-hover)}._input_1jh92_30[data-hovered]+._passwordText_1jh92_120{background-color:var(--midas-field-01-hover)}._input_1jh92_30[data-focused]{box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._input_1jh92_30[data-focused]{outline:3px solid highlight;outline-offset:2px}}._input_1jh92_30[data-invalid]{border:none;box-shadow:var(--midas-state-invalid)}@media(forced-colors:active){._input_1jh92_30[data-invalid]{border:1px solid}}._input_1jh92_30[data-disabled]{cursor:not-allowed;background-color:var(--midas-field-disabled);border:none;border-bottom:1px solid var(--midas-border-color-disabled)}@media(forced-colors:active){._input_1jh92_30[data-disabled]{border:1px solid}}._input_1jh92_30::-ms-reveal{display:none}._passwordText_1jh92_120{background-color:var(--midas-field-01-base);position:absolute;display:flex;align-items:center;top:3px;z-index:var(--midas-z-index-base);left:1rem;height:calc(100% - 6px);width:calc(100% - 2rem)}._passwordButton_1jh92_171{position:absolute;right:0;z-index:calc(var(--midas-z-index-base) + var(--midas-z-index-above));border-bottom:none}
+._textField_38yax_1{display:grid;grid-auto-columns:1fr;grid-auto-rows:1fr 1fr;grid-template-columns:1fr auto;grid-template-rows:min-content min-content min-content min-content;grid-template-areas:"Label Count" "Desc Count" "Error Count" "Input Input" "BottomError BottomError";width:100%;align-content:flex-end}._textField_38yax_1>[slot=description]{grid-area:Desc}._textField_38yax_1>._bottomError_38yax_20{grid-area:BottomError}._textField_38yax_1[data-disabled]{color:var(--midas-text-disabled)}._textField_38yax_1[data-readonly] ._textArea_38yax_29,._textField_38yax_1[data-readonly] ._input_38yax_30{background-color:transparent;border-color:var(--midas-border-color-subtle)}._textArea_38yax_29{all:unset;color:var(--midas-text-primary);font-family:var(--midas-typography-font-family);display:flex;grid-area:Input;border-bottom:1px solid var(--midas-border-color-primary);align-items:center;justify-content:center;font-size:1rem;padding:1rem 1rem 1.25rem;background-color:var(--midas-field-01-base);box-sizing:border-box;word-wrap:break-word;width:100%;resize:both;overflow:auto}@media(forced-colors:active){._textArea_38yax_29{outline:3px solid;outline-offset:2px}}._textArea_38yax_29[data-hovered]{background-color:var(--midas-field-01-hover)}._textArea_38yax_29[data-focused],._textArea_38yax_29[data-focus-visible]{box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._textArea_38yax_29[data-focused],._textArea_38yax_29[data-focus-visible]{border:1px solid}}._textArea_38yax_29[data-invalid]{border:none;box-shadow:var(--midas-state-invalid)}._textArea_38yax_29[data-disabled]{cursor:not-allowed;background-color:var(--midas-field-disabled);border:none;border-bottom:1px solid var(--midas-border-color-disabled);color:var(--midas-text-disabled)}._wrap_38yax_87{position:relative;grid-area:Input}._medium_38yax_92 ._input_38yax_30{min-height:var(--midas-size-130)}._input_38yax_30{all:unset;color:var(--midas-text-primary);font-family:var(--midas-typography-font-family);grid-area:Input;border-bottom:1px solid var(--midas-border-color-primary);font-size:1rem;padding:0 1rem;line-height:1;background-color:var(--midas-field-01-base);border-radius:0;box-sizing:border-box;width:100%;min-height:var(--midas-size-150)}@media(forced-colors:active){._input_38yax_30{border:1px solid}}._input_38yax_30[data-hovered]{background-color:var(--midas-field-01-hover)}._input_38yax_30[data-hovered]+._passwordText_38yax_120{background-color:var(--midas-field-01-hover)}._input_38yax_30[data-focused]{box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._input_38yax_30[data-focused]{outline:3px solid highlight;outline-offset:2px}}._input_38yax_30[data-invalid]{border:none;box-shadow:var(--midas-state-invalid)}@media(forced-colors:active){._input_38yax_30[data-invalid]{border:1px solid}}._input_38yax_30[data-disabled]{cursor:not-allowed;background-color:var(--midas-field-disabled);border:none;border-bottom:1px solid var(--midas-border-color-disabled)}@media(forced-colors:active){._input_38yax_30[data-disabled]{border:1px solid}}._input_38yax_30::-ms-reveal{display:none}._passwordButton_38yax_159{position:absolute;right:0;z-index:calc(var(--midas-z-index-base) + var(--midas-z-index-above));border-bottom:none}

package/chunks/{SearchField-YVhf1_6R.js → SearchField-CZqmRPCT.js}

@@ -1,6 +1,6 @@
 'use client';
 import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { s as C } from "./TextField.module-BQbSZFKU.js";
+import { s as C } from "./TextField.module-CJn-guZp.js";
 import { B as F } from "./Button-CaLOUTDO.js";
 import { C as N } from "./ClearButton-DPm_d7SL.js";
 import { c as l } from "./clsx-AexbMWKp.js";

package/chunks/TextArea-DtcdxpIM.js

@@ -0,0 +1,135 @@
+'use client';
+import { jsxs as w, jsx as t } from "react/jsx-runtime";
+import { forwardRef as c, useState as F } from "react";
+import { useContextProps as u, TextFieldContext as y, TextField as g, InputContext as P, Input as b, TextArea as C } from "react-aria-components";
+import { a as I, c as h } from "./clsx-AexbMWKp.js";
+import { s as d } from "./TextField.module-CJn-guZp.js";
+import { B as A } from "./Button-CaLOUTDO.js";
+import { u as B } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import { T as L } from "./Text-BuXvuoqM.js";
+import { F as f } from "./FieldError-BMTrvSof.js";
+import { C as S } from "./CharacterCounter-Dgnv-orm.js";
+import { a as v, L as E } from "./Label-6GZmmff9.js";
+const x = c(
+  (e, o) => {
+    [e] = u(e, o, y);
+    const {
+      label: s,
+      description: a,
+      errorMessage: i,
+      showCounter: n,
+      errorPosition: r = "top",
+      size: l = "large",
+      popover: m,
+      children: p
+    } = e;
+    return /* @__PURE__ */ w(
+      g,
+      {
+        ...e,
+        className: I(d.textField, {
+          [d.medium]: l === "medium"
+        }),
+        children: [
+          /* @__PURE__ */ t(v, { popover: m, children: s && /* @__PURE__ */ t(E, { children: s }) }),
+          a && /* @__PURE__ */ t(L, { slot: "description", children: a }),
+          n && /* @__PURE__ */ t(S, { isLonely: !a }),
+          r === "top" && /* @__PURE__ */ t(f, { "data-testid": "fieldError", children: i }),
+          p,
+          r === "bottom" && /* @__PURE__ */ t(
+            f,
+            {
+              "data-testid": "fieldError",
+              className: d.bottomError,
+              children: i
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+x.displayName = "TextFieldBase";
+const $ = { hide: "Hide", show: "Show", showPassword: "Show password" }, j = { hide: "Dölj", show: "Visa", showPassword: "Visa lösenord" }, z = {
+  en: $,
+  sv: j
+}, V = ({
+  showPassword: e,
+  onToggle: o
+}) => {
+  const s = B(z);
+  return /* @__PURE__ */ t(
+    A,
+    {
+      "aria-label": s.format("showPassword"),
+      "aria-pressed": e,
+      variant: "tertiary",
+      onPress: o,
+      className: d.passwordButton,
+      children: e ? s.format("hide") : s.format("show")
+    }
+  );
+}, T = c(
+  ({ skipContext: e = !1, ...o }, s) => {
+    const [a, i] = u(
+      o,
+      s,
+      P
+    ), n = e ? s : i, r = e ? o : a, l = r.type === "password", [m, p] = F(!1);
+    return /* @__PURE__ */ w("div", { className: d.wrap, children: [
+      /* @__PURE__ */ t(
+        b,
+        {
+          ...r,
+          ref: n,
+          type: l && m ? "text" : r.type,
+          className: h(d.input, r.className)
+        }
+      ),
+      l && /* @__PURE__ */ t(
+        V,
+        {
+          showPassword: m,
+          onToggle: () => p((N) => !N)
+        }
+      )
+    ] });
+  }
+);
+T.displayName = "Input";
+const D = c(
+  ({ className: e, list: o, type: s, min: a, max: i, form: n, ...r }, l) => /* @__PURE__ */ t(x, { ...r, children: /* @__PURE__ */ t(
+    T,
+    {
+      className: h(e),
+      form: n,
+      list: o,
+      min: a,
+      max: i,
+      ref: l,
+      type: s,
+      skipContext: !0
+    }
+  ) })
+);
+D.displayName = "TextField";
+const H = c(
+  ({ className: e, cols: o, form: s, rows: a, wrap: i, ...n }, r) => /* @__PURE__ */ t(x, { ...n, children: /* @__PURE__ */ t(
+    C,
+    {
+      className: h(d.textArea, e),
+      cols: o,
+      form: s,
+      ref: r,
+      rows: a,
+      wrap: i
+    }
+  ) })
+);
+H.displayName = "TextArea";
+export {
+  T as I,
+  H as T,
+  D as a,
+  x as b
+};

package/chunks/TextField.module-CJn-guZp.js

@@ -0,0 +1,12 @@
+import '../assets/TextField.css';const t = "_textField_38yax_1", o = "_bottomError_38yax_20", _ = "_textArea_38yax_29", r = "_input_38yax_30", s = "_wrap_38yax_87", a = "_medium_38yax_92", e = "_passwordButton_38yax_159", n = {
+  textField: t,
+  bottomError: o,
+  textArea: _,
+  input: r,
+  wrap: s,
+  medium: a,
+  passwordButton: e
+};
+export {
+  n as s
+};

package/index.js

@@ -29,7 +29,7 @@ import { M as So } from "./chunks/Dialog-BHxDzbf8.js";
 import { P as Io } from "./chunks/Popover-BcEtFiU1.js";
 import { P as Go } from "./chunks/ProgressBar-Dg0JMQ71.js";
 import { R as ko, a as vo } from "./chunks/Radio-CAIyBgBp.js";
-import { S as Mo } from "./chunks/SearchField-YVhf1_6R.js";
+import { S as Mo } from "./chunks/SearchField-CZqmRPCT.js";
 import { S as ho } from "./chunks/Select-D7JfpIUT.js";
 import { S as yo } from "./chunks/Skeleton-DqIHQLQl.js";
 import { S as No } from "./chunks/Spinner-CfKMn18u.js";
@@ -37,7 +37,7 @@ import { C as zo, a as Oo, R as Qo, T as Vo, b as Zo, c as jo } from "./chunks/T
 import { T as Jo, a as Ko, b as Uo, c as Wo } from "./chunks/TabList-BaR443mu.js";
 import { T as Yo, a as _o, b as $o } from "./chunks/TagGroup-CWe0P76-.js";
 import { T as aa } from "./chunks/Text-BuXvuoqM.js";
-import { I as ea, T as ta, a as sa, b as pa } from "./chunks/TextArea-CNmgpBdA.js";
+import { I as ea, T as ta, a as sa, b as pa } from "./chunks/TextArea-DtcdxpIM.js";
 import { G as ma, T as ia, a as fa, b as na, t as da } from "./chunks/Toast-UPM-1ipu.js";
 import { T as ca, a as la } from "./chunks/ToggleButtonGroup-CXKTrLbb.js";
 import { T as ga, a as Ba } from "./chunks/Tooltip-rDmOkGmX.js";
@@ -49,7 +49,7 @@ import { c as Na } from "./chunks/clsx-AexbMWKp.js";
 import { DialogTrigger as za, MenuTrigger as Oa, RouterProvider as Qa } from "react-aria-components";
 import { u as Za } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
 import { useToastState as qa } from "react-stately";
-const o = "17.2.1", a = {
+const o = "17.2.3", a = {
   version: o
 }, r = a.version;
 export {

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "17.2.1",
+  "version": "17.2.3",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",
@@ -41,7 +41,7 @@
     "./*": "./*/index.js"
   },
   "dependencies": {
-    "@midas-ds/theme": "3.11.0",
+    "@midas-ds/theme": "3.11.1",
     "react-aria-components": "1.14.0"
   }
 }

package/search-field/index.js

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

package/textfield/PasswordToggle.d.ts

@@ -0,0 +1,6 @@
+interface PasswordToggleProps {
+    showPassword: boolean;
+    onToggle: () => void;
+}
+export declare const PasswordToggle: ({ showPassword, onToggle, }: PasswordToggleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/textfield/index.js

@@ -1,4 +1,4 @@
-import { I as s, T as t, a as x, b as T } from "../chunks/TextArea-CNmgpBdA.js";
+import { I as s, T as t, a as x, b as T } from "../chunks/TextArea-DtcdxpIM.js";
 export {
   s as Input,
   t as TextArea,

package/textfield/intl/translations.json.d.ts

@@ -1,11 +1,13 @@
 declare const _default: {
   "en": {
     "hide": "Hide",
-    "show": "Show"
+    "show": "Show",
+    "showPassword": "Show password"
   },
   "sv": {
     "hide": "Dölj",
-    "show": "Visa"
+    "show": "Visa",
+    "showPassword": "Visa lösenord"
   }
 }
 ;

package/chunks/TextArea-CNmgpBdA.js

@@ -1,138 +0,0 @@
-'use client';
-import { jsxs as c, jsx as s, Fragment as P } from "react/jsx-runtime";
-import { forwardRef as l, useState as C } from "react";
-import { useContextProps as p, TextFieldContext as b, TextField as g, InputContext as f, Input as I, TextArea as v } from "react-aria-components";
-import { a as A, c as h } from "./clsx-AexbMWKp.js";
-import { s as d } from "./TextField.module-BQbSZFKU.js";
-import { T as w } from "./Text-BuXvuoqM.js";
-import { B } from "./Button-CaLOUTDO.js";
-import { u as L } from "./useLocalizedStringFormatter-BHvsRxDk.js";
-import { F as u } from "./FieldError-BMTrvSof.js";
-import { C as E } from "./CharacterCounter-Dgnv-orm.js";
-import { a as S, L as $ } from "./Label-6GZmmff9.js";
-const x = l(
-  (e, a) => {
-    [e] = p(e, a, b);
-    const {
-      label: r,
-      description: o,
-      errorMessage: i,
-      showCounter: n,
-      errorPosition: t = "top",
-      size: m = "large",
-      popover: N,
-      children: y
-    } = e;
-    return /* @__PURE__ */ c(
-      g,
-      {
-        ...e,
-        className: A(d.textField, {
-          [d.medium]: m === "medium"
-        }),
-        children: [
-          /* @__PURE__ */ s(S, { popover: N, children: r && /* @__PURE__ */ s($, { children: r }) }),
-          o && /* @__PURE__ */ s(w, { slot: "description", children: o }),
-          n && /* @__PURE__ */ s(E, { isLonely: !o }),
-          t === "top" && /* @__PURE__ */ s(u, { "data-testid": "fieldError", children: i }),
-          y,
-          t === "bottom" && /* @__PURE__ */ s(
-            u,
-            {
-              "data-testid": "fieldError",
-              className: d.bottomError,
-              children: i
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-x.displayName = "TextFieldBase";
-const j = { hide: "Hide", show: "Show" }, z = { hide: "Dölj", show: "Visa" }, D = {
-  en: j,
-  sv: z
-}, T = l(
-  (e, a) => {
-    [e, a] = p(e, a, f);
-    const [r, o] = C(!1), i = () => o((t) => !t), n = L(D);
-    return /* @__PURE__ */ c(P, { children: [
-      r && /* @__PURE__ */ s(
-        w,
-        {
-          slot: "description",
-          className: d.passwordText,
-          children: e.value
-        }
-      ),
-      /* @__PURE__ */ s(
-        B,
-        {
-          variant: "tertiary",
-          onPress: i,
-          className: d.passwordButton,
-          children: r ? n.format("hide") : n.format("show")
-        }
-      )
-    ] });
-  }
-);
-T.displayName = "PasswordField";
-const F = l(
-  ({ skipContext: e = !1, ...a }, r) => {
-    const [o, i] = p(
-      a,
-      r,
-      f
-    ), n = e ? r : i, t = e ? a : o;
-    return /* @__PURE__ */ c("div", { className: d.wrap, children: [
-      /* @__PURE__ */ s(
-        I,
-        {
-          ...t,
-          ref: n,
-          className: h(d.input, t.className)
-        }
-      ),
-      t.type === "password" && /* @__PURE__ */ s(T, { ...t })
-    ] });
-  }
-);
-F.displayName = "Input";
-const H = l(
-  ({ className: e, list: a, type: r, min: o, max: i, form: n, ...t }, m) => /* @__PURE__ */ s(x, { ...t, children: /* @__PURE__ */ s(
-    F,
-    {
-      className: h(e),
-      form: n,
-      list: a,
-      min: o,
-      max: i,
-      ref: m,
-      type: r,
-      skipContext: !0
-    }
-  ) })
-);
-H.displayName = "TextField";
-const M = l(
-  ({ className: e, cols: a, form: r, rows: o, wrap: i, ...n }, t) => /* @__PURE__ */ s(x, { ...n, children: /* @__PURE__ */ s(
-    v,
-    {
-      className: h(d.textArea, e),
-      cols: a,
-      form: r,
-      ref: t,
-      rows: o,
-      wrap: i
-    }
-  ) })
-);
-M.displayName = "TextArea";
-export {
-  F as I,
-  M as T,
-  H as a,
-  x as b
-};

package/chunks/TextField.module-BQbSZFKU.js

@@ -1,13 +0,0 @@
-import '../assets/TextField.css';const t = "_textField_1jh92_1", o = "_bottomError_1jh92_20", s = "_textArea_1jh92_29", _ = "_input_1jh92_30", r = "_wrap_1jh92_87", e = "_medium_1jh92_92", n = "_passwordText_1jh92_120", a = "_passwordButton_1jh92_171", p = {
-  textField: t,
-  bottomError: o,
-  textArea: s,
-  input: _,
-  wrap: r,
-  medium: e,
-  passwordText: n,
-  passwordButton: a
-};
-export {
-  p as s
-};

package/textfield/PasswordField.d.ts

@@ -1,2 +0,0 @@
-import { InputProps } from './Input';
-export declare const PasswordField: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;