@fremtind/jokul 6.0.0-next.0 → 6.0.0-next.2

package/codemods/CODEMODS.md

@@ -118,6 +118,41 @@ Tilsvarende omdøping for alle Tailwind v4-fargeklasser generert fra `--color-*`
 
 Tailwind-modifikatorer (`hover:`, `dark:`, `md:`, `focus:` o.l.), opacity-modifikatorer (`/50`) og viktig-prefiks (`!`) håndteres korrekt.
 
+#### DateInput (Jøkul 6)
+
+Import path, stilimporter og komponentnavn omdøpes automatisk:
+
+| Gammel import | Ny import |
+|---|---|
+| `@fremtind/jokul/datepicker` | `@fremtind/jokul/date-input` |
+| `@fremtind/jokul/date-inputs` | `@fremtind/jokul/date-input` |
+| `@fremtind/jokul/date-picker` | `@fremtind/jokul/date-input` |
+
+Stilmappa følger komponentmappa, så både mappe- og filnavn skrives om. Gjelder både `import "..."` og Sass `@use`/`@forward`:
+
+| Gammel stilimport | Ny stilimport |
+|---|---|
+| `@fremtind/jokul/styles/components/datepicker` | `@fremtind/jokul/styles/components/date-input` |
+| `@fremtind/jokul/styles/components/datepicker/_index.scss` | `@fremtind/jokul/styles/components/date-input/_index.scss` |
+| `@fremtind/jokul/styles/components/datepicker/datepicker.scss` | `@fremtind/jokul/styles/components/date-input/date-input.scss` |
+| `@fremtind/jokul/styles/components/datepicker/datepicker.css` | `@fremtind/jokul/styles/components/date-input/date-input.css` |
+| `@fremtind/jokul/styles/components/datepicker/datepicker.min.css` | `@fremtind/jokul/styles/components/date-input/date-input.min.css` |
+
+De samme variantene håndteres for de eldre mappenavnene `date-picker` og `date-inputs`.
+
+| Gammel komponent | Ny komponent |
+|---|---|
+| `DatePicker` | `DateInput` |
+
+Prop-navnene som begrenser datovalg omdøpes automatisk:
+
+| Gammel prop | Ny prop |
+|---|---|
+| `disableBeforeDate` | `min` |
+| `disableAfterDate` | `max` |
+
+Fjernede props endres ikke automatisk, men gir varsel når de finnes i en fil som bruker `DateInput`/`DatePicker`: `defaultShow`, `initialShow`, `extended`, `invalid`, `yearsToShow`, `days`, `months`, `monthLabel`, `yearLabel`, `action`, `showCalendarLabel`, `hideCalendarLabel` og `textInputProps`. Se [MIGRATION.md](../MIGRATION.md#fjernede-props-og-hjelpefunksjoner) for erstatninger.
+
 ---
 
 #### Fjernede maskefunksjoner
@@ -147,3 +182,7 @@ Disse mønstrene kan ikke omdøpes automatisk. Codemoden skriver ut ett varsel p
 | `variant="outlined\|high\|low"` (på `Card`) | `variant`-prop er fjernet. Bruk `outlined` (boolean) for ramme, fjern `high`/`low`. |
 | `bg-background-interactive` o.l. (Tailwind) | Fjernede Tailwind-klasser basert på `background-interactive`/`text-interactive`. |
 | `border-border-separator` o.l. (Tailwind) | Fjernede Tailwind-kantklasser. Bruk `border-border-default`, `-subdued` eller `-strong`. |
+| `<DateInput>` | Datoverdier bruker nå ISO-format (`yyyy-mm-dd`), ikke `dd.mm.yyyy`. |
+| `<DateInput>` `onChange` | Gir nå et standard React change-event. Les datoen fra `event.target.value`. |
+| `defaultShow` | Fjernet fra DateInput. Kalenderen åpnes via kalenderknappen. |
+| `extended`, `invalid`, `yearsToShow`, `days`, `months`, `monthLabel`, `yearLabel`, `action`, `showCalendarLabel`, `hideCalendarLabel`, `textInputProps` | Fjernet fra DateInput. Se migrasjonsguiden for erstatninger. |

package/codemods/__tests__/import-paths.test.mjs

@@ -746,45 +746,157 @@ test("ExpandablePanel: håndterer flerlinjet JSX korrekt", () => {
     assert.equal(result.changed, true);
 });
 
-test("registerWithMask: migrerer JSX-spread til registerWithMasks(form).X()", () => {
-    const source = `<TextInput {...registerWithFodselsnummerMask(form, "fnr")} />`;
+test("renames DatePicker disable-bound props to min/max", () => {
+    const source = `import { DatePicker } from "@fremtind/jokul/date-inputs";
+
+<DatePicker
+    disableBeforeDate={lower}
+    disableAfterDate={upper}
+    onChange={(event, date, { error }) => handle(date)}
+/>;
+`;
+
+    const result = transformImportPaths(source, "/tmp/Form.tsx");
+
+    assert.equal(result.text.includes("min={lower}"), true);
+    assert.equal(result.text.includes("max={upper}"), true);
+    assert.equal(result.text.includes("disableBeforeDate"), false);
+    assert.equal(result.text.includes("disableAfterDate"), false);
+});
+
+test("warns about breaking DatePicker changes that need manual review", () => {
+    const source = `import { DatePicker } from "@fremtind/jokul/date-inputs";
+const iso = formatInput(new Date());
+<DatePicker defaultShow onChange={(e, d) => save(d)} />;
+`;
+
     const result = transformImportPaths(source, "/tmp/Form.tsx");
+
     assert.equal(
-        result.text,
-        `<TextInput {...registerWithMasks(form).registerWithFodselsnummerMask("fnr")} />`,
+        result.warnings.some((w) => w.includes("ISO-datoformat")),
+        true,
+    );
+    assert.equal(
+        result.warnings.some((w) => w.includes("event.target.value")),
+        true,
+    );
+    assert.equal(
+        result.warnings.some((w) => w.includes("defaultShow")),
+        true,
+    );
+    assert.equal(
+        result.warnings.some((w) => w.includes("formatInput")),
+        true,
     );
-    assert.equal(result.changed, true);
 });
 
-test("registerWithMask: beholder options-argumentet", () => {
-    const source = `registerWithKontonummerMask(form, "konto", { required: true })`;
-    const result = transformImportPaths(source, "/tmp/Form.tsx");
+test("migrerer DatePicker-stilimporter (ESM import)", () => {
+    const source = `import "@fremtind/jokul/styles/components/datepicker/_index.scss";
+import "@fremtind/jokul/styles/components/datepicker/datepicker.min.css";
+import "@fremtind/jokul/styles/components/datepicker/datepicker.css";
+`;
+
+    const result = transformImportPaths(source, "/tmp/App.tsx");
+
     assert.equal(
         result.text,
-        `registerWithMasks(form).registerWithKontonummerMask("konto", { required: true })`,
+        `import "@fremtind/jokul/styles/components/date-input/_index.scss";
+import "@fremtind/jokul/styles/components/date-input/date-input.min.css";
+import "@fremtind/jokul/styles/components/date-input/date-input.css";
+`,
     );
+    assert.equal(result.text.includes("datepicker"), false);
 });
 
-test("registerWithMask: oppdaterer import og legger til registerWithMasks", () => {
-    const source = `import { registerWithFodselsnummerMask } from "@fremtind/jokul/utilities";`;
-    const result = transformImportPaths(source, "/tmp/Form.tsx");
+test("migrerer DatePicker-stilimporter (Sass @use/@forward)", () => {
+    const source = `@use "@fremtind/jokul/styles/components/datepicker";
+@use "@fremtind/jokul/styles/components/datepicker/datepicker.scss";
+@forward "@fremtind/jokul/styles/components/date-inputs";
+`;
+
+    const result = transformImportPaths(source, "/tmp/global.scss");
+
     assert.equal(
         result.text,
-        `import { registerWithMasks } from "@fremtind/jokul/utilities";`,
+        `@use "@fremtind/jokul/styles/components/date-input";
+@use "@fremtind/jokul/styles/components/date-input/date-input.scss";
+@forward "@fremtind/jokul/styles/components/date-input";
+`,
     );
+    assert.deepEqual(result.warnings, []);
 });
 
-test("registerWithMask: beholder andre importer og eksisterende registerWithMasks", () => {
-    const source = `import { formatValuta, registerWithMasks, registerWithKortnummerMask } from "@fremtind/jokul/utilities";`;
+test("migrerer komponent- og stilimport i samme fil", () => {
+    const source = `import { DatePicker } from "@fremtind/jokul/datepicker";
+import "@fremtind/jokul/styles/components/datepicker/_index.scss";
+
+<DatePicker defaultValue={value} />;
+`;
+
     const result = transformImportPaths(source, "/tmp/Form.tsx");
+
+    assert.equal(result.text.includes("datepicker"), false);
     assert.equal(
-        result.text,
-        `import { formatValuta, registerWithMasks } from "@fremtind/jokul/utilities";`,
+        result.text.includes(
+            'import "@fremtind/jokul/styles/components/date-input/_index.scss";',
+        ),
+        true,
     );
+    assert.equal(result.text.includes("<DateInput"), true);
 });
 
-test("registerWithMask: rører ikke allerede migrert kode", () => {
-    const source = `registerWithMasks(form).registerWithTelefonnummerMask("tlf")`;
+test("warns about removed DatePicker props", () => {
+    const source = `import { DatePicker } from "@fremtind/jokul/datepicker";
+<DatePicker extended yearsToShow={10} textInputProps={{}} action={reset} />;
+`;
     const result = transformImportPaths(source, "/tmp/Form.tsx");
-    assert.equal(result.changed, false);
+
+    for (const prop of [
+        "extended",
+        "yearsToShow",
+        "textInputProps",
+        "action",
+    ]) {
+        assert.equal(
+            result.warnings.some((w) => w.includes(prop)),
+            true,
+        );
+    }
+});
+
+test("does not warn about identifiers that look like removed props", () => {
+    const source = `import { DateInput } from "@fremtind/jokul/date-input";
+const months = ["januar"];
+<DateInput aria-invalid={true} label={months[0]} />;
+`;
+    const result = transformImportPaths(source, "/tmp/Form.tsx");
+
+    assert.equal(
+        result.warnings.some((w) => w.includes("`months`")),
+        false,
+    );
+    assert.equal(
+        result.warnings.some((w) => w.includes("`invalid`")),
+        false,
+    );
+});
+
+test("DateInput: rører ikke like prop-navn på andre komponenter", () => {
+    const source =
+        "<OtherComponent disableBeforeDate={x} disableAfterDate={y} />;";
+    const result = transformImportPaths(source, "src/App.tsx");
+    assert.equal(result.text.includes("disableBeforeDate={x}"), true);
+    assert.equal(result.text.includes("disableAfterDate={y}"), true);
+});
+
+test("DateInput: håndterer piluttrykk i props ved omdøping", () => {
+    const source = `<DateInput onChange={(e) => setX(e)} disableBeforeDate={a} />;
+<Other disableAfterDate={b} />;
+`;
+    const result = transformImportPaths(source, "src/App.tsx");
+    assert.equal(
+        result.text.includes("<DateInput onChange={(e) => setX(e)} min={a} />"),
+        true,
+    );
+    assert.equal(result.text.includes("<Other disableAfterDate={b} />"), true);
 });

package/codemods/import-paths.mjs

@@ -5,6 +5,7 @@ import {
     applyCssTokenRenames,
     applyTailwindColorRenames,
 } from "./transforms/color-tokens.mjs";
+import { applyDateInputTransforms } from "./transforms/date-input.mjs";
 import { applyExpandablePanelTransforms } from "./transforms/expandable-panel.mjs";
 import { applyFontFamilyReplacements } from "./transforms/font-family.mjs";
 import {
@@ -73,10 +74,9 @@ export function transformImportPaths(text, filePath = "") {
     const cssTokens = applyCssTokenRenames(beta.text);
     const tailwindColors = applyTailwindColorRenames(cssTokens.text);
     const expandablePanel = applyExpandablePanelTransforms(tailwindColors.text);
-    const registerWithMask = applyRegisterWithMaskTransforms(
-        expandablePanel.text,
-    );
-    let next = registerWithMask.text;
+    const dateInput = applyDateInputTransforms(expandablePanel.text);
+    const masks = applyRegisterWithMaskTransforms(dateInput.text);
+    let next = masks.text;
     let reordered = false;
 
     if (/\.(sass|scss)$/i.test(filePath)) {
@@ -87,7 +87,8 @@ export function transformImportPaths(text, filePath = "") {
 
     const warnings = [
         ...beta.warnings,
-        ...registerWithMask.warnings,
+        ...dateInput.warnings,
+        ...masks.warnings,
         ...collectManualMigrationWarnings(text),
     ];
 
@@ -111,7 +112,8 @@ export function transformImportPaths(text, filePath = "") {
             cssTokens.count +
             tailwindColors.count +
             expandablePanel.count +
-            registerWithMask.count,
+            dateInput.count +
+            masks.count,
         warnings,
         reordered,
     };

package/codemods/transforms/date-input.mjs

@@ -0,0 +1,225 @@
+// DatePicker er omdøpt til DateInput og Calendar er skrevet om til å bygge på det native
+// <input type="date">-elementet i Jøkul 6. Denne transformen håndterer de
+// mekaniske delene av migreringen og varsler om det som må vurderes manuelt.
+//
+// Automatiske endringer:
+//   - Import path: @fremtind/jokul/datepicker → @fremtind/jokul/date-input
+//   - Komponentnavn: DatePicker → DateInput
+//   - Props på <DateInput>:
+//     disableBeforeDate={...} → min={...}
+//     disableAfterDate={...}  → max={...}
+//
+// Manuell oppfølging (varsler):
+//   - value/defaultValue/min/max bruker nå ISO-format (yyyy-mm-dd), ikke dd.mm.yyyy
+//   - onChange gir nå et standard React ChangeEvent (les event.target.value)
+//   - defaultShow, initialShow, extended, invalid, yearsToShow, days, months,
+//     monthLabel, yearLabel, action, showCalendarLabel, hideCalendarLabel og
+//     textInputProps er fjernet
+//   - hjelpefunksjonen formatInput er fjernet – bruk toValidInputValue
+
+const IMPORT_PATH_RENAMES = [
+    [
+        /from\s+["']@fremtind\/jokul\/datepicker["']/g,
+        'from "@fremtind/jokul/date-input"',
+    ],
+    [
+        /from\s+["']@fremtind\/jokul\/date-inputs["']/g,
+        'from "@fremtind/jokul/date-input"',
+    ],
+    [
+        /from\s+["']@fremtind\/jokul\/date-picker["']/g,
+        'from "@fremtind/jokul/date-input"',
+    ],
+];
+
+// Component name replacements (imports + JSX tags)
+const COMPONENT_RENAMES = [
+    // Import specifiers: `import { DatePicker } ...` -> `import { DateInput } ...`
+    [/\bDatePicker\b(?=\s*(?:,|}|as\b))/g, "DateInput"],
+    // JSX opening/closing tags
+    [/<\s*DatePicker\b/g, "<DateInput"],
+    [/<\s*\/\s*DatePicker\b/g, "</DateInput"],
+];
+
+// Prop name replacements - Kun JSX-attributter (etterfulgt av `=`) matches
+const PROP_RENAMES = [
+    [/\bdisableBeforeDate(?=\s*=)/g, "min"],
+    [/\bdisableAfterDate(?=\s*=)/g, "max"],
+];
+
+// Fjernede props uten direkte erstatning. Codemoden kan ikke gjette intensjonen,
+// så vi varsler i stedet for å endre koden. Boolske props brukes ofte uten `=`,
+// derfor to lister.
+const REMOVED_BOOLEAN_PROPS = [
+    ["defaultShow", "Kalenderen åpnes via kalenderknappen (popover)."],
+    ["initialShow", "Kalenderen åpnes via kalenderknappen (popover)."],
+    ["extended", "Kalenderen har alltid måneds- og årsvelger."],
+    [
+        "invalid",
+        "Bruk `errorLabel`, som setter både `aria-invalid` og feilstilen.",
+    ],
+];
+
+const REMOVED_VALUE_PROPS = [
+    [
+        "yearsToShow",
+        "Årsvelgeren utledes fra `min`/`max` (±5 år som standard).",
+    ],
+    ["months", "Månedsnavn hentes fra `Intl` med `nb-NO`."],
+    ["days", "Ukedagsnavn hentes fra `Intl` med `nb-NO`."],
+    ["monthLabel", "Månedsvelgeren har fast, skjult label «Måned»."],
+    ["yearLabel", "Årsvelgeren har fast, skjult label «År»."],
+    [
+        "showCalendarLabel",
+        "Kalenderknappen har fast aria-label «Åpne kalender».",
+    ],
+    ["hideCalendarLabel", "Kalenderen lukkes med Esc eller klikk utenfor."],
+    ["action", "Egne handlinger må plasseres utenfor feltet."],
+    [
+        "textInputProps",
+        'Send attributtene direkte på <DateInput>; de videresendes til <input type="date">.',
+    ],
+];
+
+const USES_DATE_COMPONENT = /<\s*(?:DateInput|DatePicker)\b/;
+
+// Kun JSX-attributter: hopp over `aria-invalid`, `obj.invalid`, `isInvalid`,
+// variabeldeklarasjoner (`const months = ...`) og sammenligninger (`days === 3`).
+const NOT_PART_OF_IDENTIFIER = "(?<![-\\w.$])";
+const NOT_A_DECLARATION = "(?<!\\b(?:const|let|var)\\s+)";
+
+const DATE_COMPONENT_TAG_START = /<\s*(?:DateInput|DatePicker)\b/g;
+
+// Leser en JSX-tag fra `<DateInput` til matchende `>`. Hopper over `>` inne i
+// uttrykk (`onChange={(e) => ...}`), strenger og template-literaler.
+function replaceInDateComponentTags(text, replaceTag) {
+    let output = "";
+    let lastIndex = 0;
+    DATE_COMPONENT_TAG_START.lastIndex = 0;
+
+    for (
+        let match = DATE_COMPONENT_TAG_START.exec(text);
+        match !== null;
+        match = DATE_COMPONENT_TAG_START.exec(text)
+    ) {
+        const start = match.index;
+        let i = DATE_COMPONENT_TAG_START.lastIndex;
+        let depth = 0;
+        let stringChar = null;
+        let end = -1;
+
+        while (i < text.length) {
+            const char = text[i];
+
+            if (stringChar) {
+                if (char === "\\") {
+                    i += 2;
+                    continue;
+                }
+                if (char === stringChar) stringChar = null;
+                i += 1;
+                continue;
+            }
+            if (char === '"' || char === "'" || char === "`") {
+                stringChar = char;
+            } else if (char === "{") {
+                depth += 1;
+            } else if (char === "}") {
+                depth -= 1;
+            } else if (char === ">" && depth === 0) {
+                end = i + 1;
+                break;
+            }
+            i += 1;
+        }
+
+        if (end === -1) break;
+
+        output +=
+            text.slice(lastIndex, start) + replaceTag(text.slice(start, end));
+        lastIndex = end;
+        DATE_COMPONENT_TAG_START.lastIndex = end;
+    }
+
+    return output + text.slice(lastIndex);
+}
+
+export function applyDateInputTransforms(text) {
+    let next = text;
+    let count = 0;
+
+    // Replace import paths
+    for (const [pattern, replacement] of IMPORT_PATH_RENAMES) {
+        next = next.replace(pattern, () => {
+            count += 1;
+            return replacement;
+        });
+    }
+
+    // Replace component names in JSX
+    for (const [pattern, replacement] of COMPONENT_RENAMES) {
+        const matches = next.match(pattern);
+        if (matches) {
+            next = next.replace(pattern, replacement);
+            count += matches.length;
+        }
+    }
+
+    // Replace prop names
+    for (const [pattern, replacement] of PROP_RENAMES) {
+        next = replaceInDateComponentTags(next, (tag) => {
+            let replacedTag = tag;
+            for (const [pattern, replacement] of PROP_RENAMES) {
+                replacedTag = replacedTag.replace(pattern, () => {
+                    count += 1;
+                    return replacement;
+                });
+            }
+            return replacedTag;
+        });
+    }
+
+    const warnings = [];
+
+    if (USES_DATE_COMPONENT.test(next)) {
+        warnings.push(
+            "Manuell vurdering: DateInput `onChange`, `onFocus` og `onBlur` er nå vanlige React-handlere som kun får `event`. Les datoen fra `event.target.value` i stedet for `(event, date, { error, value })`.",
+        );
+        warnings.push(
+            "Manuell vurdering: DateInput bruker nå ISO-datoformat (yyyy-mm-dd) for `value`, `defaultValue`, `min` og `max`. Konverter eventuelle `dd.mm.yyyy`-strenger.",
+        );
+        warnings.push(
+            "Manuell vurdering: DateInput `onChange` gir nå et standard React change-event. Les datoen fra `event.target.value` i stedet for `(event, date, { error, value })`.",
+        );
+
+        for (const [prop, hint] of REMOVED_BOOLEAN_PROPS) {
+            const pattern = new RegExp(
+                `${NOT_PART_OF_IDENTIFIER}${prop}\\b(?=[\\s/>=}])`,
+            );
+            if (pattern.test(next)) {
+                warnings.push(
+                    `Manuell vurdering: \`${prop}\` er fjernet fra DateInput. ${hint}`,
+                );
+            }
+        }
+
+        for (const [prop, hint] of REMOVED_VALUE_PROPS) {
+            const pattern = new RegExp(
+                `${NOT_PART_OF_IDENTIFIER}${NOT_A_DECLARATION}${prop}\\s*=(?!=)`,
+            );
+            if (pattern.test(next)) {
+                warnings.push(
+                    `Manuell vurdering: \`${prop}\` er fjernet fra DateInput. ${hint}`,
+                );
+            }
+        }
+    }
+
+    if (/\bformatInput\b/.test(next)) {
+        warnings.push(
+            "Manuell vurdering: hjelpefunksjonen `formatInput` er fjernet. Bruk `toValidInputValue` for å normalisere datostrenger til ISO-format.",
+        );
+    }
+
+    return { text: next, count, warnings };
+}

package/codemods/transforms/import-specifiers.mjs

@@ -1,5 +1,29 @@
 import { escapeRegExp, replaceSpecifier } from "../utils.mjs";
 
+// DatePicker ble omdøpt til DateInput i Jøkul 6. Den publiserte stilmappa følger
+// komponentmappa, så både mappe- og filnavn må skrives om.
+const DATE_INPUT_LEGACY_STYLE_DIRS = [
+    "datepicker",
+    "date-picker",
+    "date-inputs",
+];
+
+const DATE_INPUT_STYLE_REPLACEMENTS = DATE_INPUT_LEGACY_STYLE_DIRS.flatMap(
+    (legacy) => {
+        const from = `@fremtind/jokul/styles/components/${legacy}`;
+        const to = "@fremtind/jokul/styles/components/date-input";
+
+        return [
+            [`${from}/${legacy}.min.css`, `${to}/date-input.min.css`],
+            [`${from}/${legacy}.css`, `${to}/date-input.css`],
+            [`${from}/${legacy}.scss`, `${to}/date-input.scss`],
+            [`${from}/${legacy}`, `${to}/date-input`],
+            [`${from}/_index.scss`, `${to}/_index.scss`],
+            [from, to],
+        ];
+    },
+);
+
 const DIRECT_REPLACEMENTS = [
     [
         "@fremtind/jokul/styles/core/core.min.css",
@@ -45,6 +69,8 @@ const DIRECT_REPLACEMENTS = [
     ["@fremtind/jokul/styles/core", "@fremtind/jokul/styles/base.scss"],
     ["@fremtind/jokul/styles", "@fremtind/jokul/styles/components.scss"],
     ["@fremtind/jokul/core", "@fremtind/jokul/utilities"],
+    ["@fremtind/jokul/datepicker", "@fremtind/jokul/date-input"],
+    ...DATE_INPUT_STYLE_REPLACEMENTS,
 ].sort(([a], [b]) => b.length - a.length);
 
 const BETA_STYLE_MIGRATIONS = [

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@fremtind/jokul",
-  "version": "6.0.0-next.0",
+  "version": "6.0.0-next.2",
   "type": "module",
   "engines": {
-    "node": "^20.19.0 || >=22.12.0"
+    "node": "^22.22.2 || ^24.15.0 || ^26.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -75,8 +75,8 @@
     }
   },
   "dependencies": {
-    "downshift": "^7.6.2",
-    "match-sorter": "^6.3.4"
+    "downshift": "^9.4.0",
+    "match-sorter": "^8.3.0"
   },
   "optionalDependencies": {
     "@floating-ui/react": "0.24.1 - 0.27",
@@ -86,36 +86,37 @@
     "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
-    "@babel/cli": "^7.29.7",
-    "@babel/preset-react": "^7.29.7",
+    "@babel/core": "^8.0.1",
+    "@babel/cli": "^8.0.4",
+    "@babel/preset-react": "^8.0.1",
     "@figma/code-connect": "^1.5.2",
     "@rollup/plugin-terser": "^1.0.0",
     "@types/react": "18.3.1",
     "@vitejs/plugin-react": "^4.7.0",
-    "@vitejs/plugin-react-swc": "^3.11.0",
+    "@vitejs/plugin-react-swc": "^4.3.3",
     "autoprefixer": "^10.5.4",
     "change-case": "^5.4.4",
-    "cssnano": "^7.1.9",
-    "cssnano-preset-lite": "^4.0.6",
+    "cssnano": "^8.0.2",
+    "cssnano-preset-lite": "^5.0.1",
     "dayjs": "^1.11.21",
     "glob": "^13.0.6",
     "ink": "^5.1.0",
     "ink-select-input": "^6.0.0",
-    "jsdom": "^26.1.0",
-    "nanoid": "^5.1.16",
+    "jsdom": "^30.0.1",
+    "nanoid": "^6.0.1",
     "postcss": "^8.5.10",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.84.0",
     "react-is": "18.3.1",
     "rollup-plugin-node-externals": "^8.0.1",
-    "rollup-plugin-visualizer": "^6.0.11",
+    "rollup-plugin-visualizer": "^7.0.1",
     "sass-embedded": "^1.100.0",
     "style-dictionary": "^5.5.0",
     "tailwindcss": "^3.4.17",
     "tsx": "^4.23.5",
     "vite": "^7.3.6",
-    "vite-plugin-dts": "^5.0.0",
+    "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10",
     "vitest-axe": "^0.1.0"
   },

package/styles/base.css

@@ -1405,4 +1405,11 @@
   .jkl-spacing-2xl--right {
     margin-right: var(--jkl-spacing-2xl);
   }
+}
+@layer jokul.utility {
+  :is(ul, ol):is(.jkl-list-reset) {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
 }