@keycloakify/svelte 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keycloakify/svelte",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "Svelte Components for Keycloakify",
   "keywords": [
     "keycloak",
@@ -437,36 +437,38 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.48.5",
-    "@sveltejs/package": "^2.5.4",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@eslint/js": "^10.0.1",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.53.4",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/eslint": "^9.6.1",
     "@types/node": "^24.10.1",
     "@vercel/ncc": "^0.38.4",
+    "chalk": "^5.6.2",
     "cli-select": "^1.1.2",
     "conventional-changelog": "^7.1.1",
     "conventional-changelog-angular": "^8.1.0",
-    "eslint": "^9.39.1",
+    "eslint": "^10.0.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-svelte": "^3.13.0",
-    "eslint-plugin-unused-imports": "^4.3.0",
-    "globals": "^16.5.0",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-svelte": "^3.15.0",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "globals": "^17.3.0",
     "husky": "^9.1.7",
-    "keycloakify": "^11.11.3",
-    "npm-check-updates": "^19.1.2",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.3.15",
-    "svelte": "^5.43.7",
-    "svelte-check": "^4.3.4",
+    "keycloakify": "^11.15.1",
+    "npm-check-updates": "^19.6.3",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.0",
+    "publint": "^0.3.17",
+    "svelte": "^5.53.6",
+    "svelte-check": "^4.4.4",
     "ts-node": "^10.9.2",
     "tsx": "4.20.4",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.46.4",
-    "vite": "^7.2.2",
-    "zod": "^4.1.12"
+    "typescript-eslint": "^8.56.1",
+    "vite": "^7.3.1",
+    "zod": "^4.3.6"
   },
   "bin": {
     "_keycloakify-custom-handler": "keycloakify-svelte/bin/index.js"

package/src/account/DefaultPage.svelte

@@ -4,7 +4,7 @@
   import type { KcContext } from './KcContext';
 
   const props: PageProps<KcContext, I18n> = $props();
-  const { kcContext: kcContext, ...rest } = props;
+  const { kcContext, ...rest } = $derived(props);
   const loadComponent = () => {
     switch (kcContext.pageId) {
       case 'password.ftl':

package/src/account/Template.svelte

@@ -4,17 +4,17 @@
   import { useSetClassName } from '@keycloakify/svelte/tools/useSetClassName';
   import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
   import { clsx } from 'keycloakify/tools/clsx';
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import type { I18n } from './i18n';
   import type { KcContext } from './KcContext';
   import { kcSanitize } from 'keycloakify/lib/kcSanitize';
 
   const { kcContext, i18n, doUseDefaultCss, active, classes, children }: TemplateProps<KcContext, I18n> = $props();
-  const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+  const { kcClsx } = $derived(getKcClsx({ doUseDefaultCss, classes }));
 
-  const { msg, msgStr, currentLanguage, enabledLanguages } = $i18n;
+  const { msg, msgStr, currentLanguage, enabledLanguages } = $derived($i18n);
 
-  const { url, features, realm, message, referrer } = kcContext;
+  const { url, features, realm, message, referrer } = $derived(kcContext);
 
   onMount(() => {
     document.title = msgStr('accountManagementTitle');
@@ -22,15 +22,22 @@
 
   useSetClassName({
     qualifiedName: 'html',
-    className: kcClsx('kcHtmlClass'),
+    className: untrack(() => kcClsx('kcHtmlClass')),
   });
 
   useSetClassName({
     qualifiedName: 'body',
-    className: clsx('admin-console', 'user', kcClsx('kcBodyClass')),
+    className: clsx(
+      'admin-console',
+      'user',
+      untrack(() => kcClsx('kcBodyClass')),
+    ),
   });
 
-  const { isReadyToRender } = useInitialize({ kcContext, doUseDefaultCss });
+  const { isReadyToRender } = useInitialize({
+    kcContext: untrack(() => kcContext),
+    doUseDefaultCss: untrack(() => doUseDefaultCss),
+  });
 </script>
 
 {#if $isReadyToRender}

package/src/account/pages/Account.svelte

@@ -13,19 +13,21 @@
     ...props
   }: PageProps<Extract<KcContext, { pageId: 'account.ftl' }>, I18n> = $props();
 
-  const classes = {
+  const classes = $derived({
     ...props.classes,
     kcBodyClass: clsx(props.classes?.kcBodyClass, 'user'),
-  };
-
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
   });
 
-  const { url, realm, messagesPerField, stateChecker, account, referrer } = kcContext;
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
+
+  const { url, realm, messagesPerField, stateChecker, account, referrer } = $derived(kcContext);
 
-  const { msg } = $i18n;
+  const { msg } = $derived($i18n);
 </script>
 
 <Template

package/src/account/pages/Applications.svelte

@@ -12,18 +12,20 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'applications.ftl' }>, I18n> = $props();
 
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
   const {
     url,
     applications: { applications },
     stateChecker,
-  } = kcContext;
+  } = $derived(kcContext);
 
-  const { msg, advancedMsg } = $i18n;
+  const { msg, advancedMsg } = $derived($i18n);
 
   function isArrayWithEmptyObject(variable: unknown): boolean {
     return (

package/src/account/pages/FederatedIdentity.svelte

@@ -11,8 +11,8 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'federatedIdentity.ftl' }>, I18n> = $props();
 
-  const { url, federatedIdentity, stateChecker } = kcContext;
-  const { msg } = $i18n;
+  const { url, federatedIdentity, stateChecker } = $derived(kcContext);
+  const { msg } = $derived($i18n);
 </script>
 
 <Template

package/src/account/pages/Log.svelte

@@ -12,14 +12,16 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'log.ftl' }>, I18n> = $props();
 
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
-  const { log } = kcContext;
+  const { log } = $derived(kcContext);
 
-  const { msg } = $i18n;
+  const { msg } = $derived($i18n);
 </script>
 
 <Template

package/src/account/pages/Password.svelte

@@ -14,18 +14,20 @@
     ...props
   }: PageProps<Extract<KcContext, { pageId: 'password.ftl' }>, I18n> = $props();
 
-  const classes = {
+  const classes = $derived({
     ...props.classes,
     kcBodyClass: clsx(props.classes?.kcBodyClass, 'password'),
-  };
-
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
   });
-  const { url, password, account, stateChecker } = kcContext;
 
-  const { msgStr, msg } = $i18n;
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
+  const { url, password, account, stateChecker } = $derived(kcContext);
+
+  const { msgStr, msg } = $derived($i18n);
 
   const [currentPassword, setCurrentPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');

package/src/account/pages/Sessions.svelte

@@ -12,14 +12,16 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'sessions.ftl' }>, I18n> = $props();
 
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
-  const { url, stateChecker, sessions } = kcContext;
+  const { url, stateChecker, sessions } = $derived(kcContext);
 
-  const { msg } = $i18n;
+  const { msg } = $derived($i18n);
 </script>
 
 <Template

package/src/account/pages/Totp.svelte

@@ -14,14 +14,16 @@
     classes,
   }: PageProps<Extract<KcContext, { pageId: 'totp.ftl' }>, I18n> = $props();
 
-  const { kcClsx } = getKcClsx({
-    doUseDefaultCss,
-    classes,
-  });
+  const { kcClsx } = $derived(
+    getKcClsx({
+      doUseDefaultCss,
+      classes,
+    }),
+  );
 
-  const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
+  const { totp, mode, url, messagesPerField, stateChecker } = $derived(kcContext);
 
-  const { msg, msgStr, advancedMsg } = $i18n;
+  const { msg, msgStr, advancedMsg } = $derived($i18n);
 </script>
 
 <Template

package/src/bin/initialize-account-theme/boilerplate/KcPage.svelte

@@ -6,13 +6,13 @@
 
   const { kcContext }: { kcContext: KcContext } = $props();
 
-  const { i18n } = useI18n({ kcContext });
-  const page = async () => {
+  const { i18n } = $derived(useI18n({ kcContext }));
+  const page = $derived(async () => {
     switch (kcContext.pageId) {
       default:
         return import('@keycloakify/svelte/account/DefaultPage.svelte');
     }
-  };
+  });
 
   const classes = {} satisfies { [key in ClassKey]?: string };
 </script>

package/src/bin/initialize-account-theme/boilerplate/KcPageStory.svelte

@@ -3,7 +3,7 @@
   import { getKcContextMock, type KcPageStoryProps } from './KcPageStory';
 
   const { pageId, kcContext }: KcPageStoryProps = $props();
-  const kcContextMock = getKcContextMock({ pageId, overrides: kcContext });
+  const kcContextMock = $derived(getKcContextMock({ pageId, overrides: kcContext }));
 </script>
 
 <KcPage kcContext={kcContextMock} />

package/src/bin/initialize-account-theme/initialize-account-theme.ts

@@ -26,7 +26,7 @@ export async function command(params: { buildContext: BuildContext }) {
   }
 
   exit_if_uncommitted_changes: {
-    let hasUncommittedChanges: boolean | undefined = undefined;
+    let hasUncommittedChanges: boolean | undefined;
 
     try {
       hasUncommittedChanges =
@@ -73,6 +73,7 @@ export async function command(params: { buildContext: BuildContext }) {
         account: {
           isImplemented: true,
           type: accountThemeType,
+          hasEarlyColorSchemeScript: false,
         },
       },
     },

package/src/login/DefaultPage.svelte

@@ -10,7 +10,7 @@
     doMakeUserConfirmPassword: boolean;
   };
   const props: DefaultPageProps = $props();
-  const { kcContext: kcContext, ...rest } = props;
+  const { kcContext, ...rest } = $derived(props);
   const loadComponent = () => {
     switch (kcContext.pageId) {
       case 'login.ftl':

package/src/login/Template.svelte

@@ -5,7 +5,7 @@
   import { kcSanitize } from 'keycloakify/lib/kcSanitize';
   import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
   import { clsx } from 'keycloakify/tools/clsx';
-  import { onMount } from 'svelte';
+  import { onMount, untrack } from 'svelte';
   import type { I18n } from './i18n';
   import type { KcContext } from './KcContext';
 
@@ -24,24 +24,30 @@
     classes,
     children,
   }: TemplateProps<KcContext, I18n> = $props();
-  const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+  const { kcClsx } = $derived(getKcClsx({ doUseDefaultCss, classes }));
 
-  const { msgStr, currentLanguage, enabledLanguages } = $i18n;
+  const { msgStr, currentLanguage, enabledLanguages } = $derived($i18n);
+
+  const { realm, auth, url, message, isAppInitiatedAction } = $derived(kcContext);
 
-  const { realm, auth, url, message, isAppInitiatedAction } = kcContext;
   onMount(() => {
-    document.title = documentTitle ?? msgStr('loginTitle', kcContext.realm.displayName);
+    document.title = documentTitle ?? untrack(() => msgStr('loginTitle', kcContext.realm.displayName));
   });
+
   useSetClassName({
     qualifiedName: 'html',
-    className: kcClsx('kcHtmlClass'),
+    className: untrack(() => kcClsx('kcHtmlClass')),
   });
 
   useSetClassName({
     qualifiedName: 'body',
-    className: bodyClassName ?? kcClsx('kcBodyClass'),
+    className: untrack(() => bodyClassName ?? kcClsx('kcBodyClass')),
+  });
+
+  const { isReadyToRender } = useInitialize({
+    kcContext: untrack(() => kcContext),
+    doUseDefaultCss: untrack(() => doUseDefaultCss),
   });
-  const { isReadyToRender } = useInitialize({ kcContext, doUseDefaultCss });
 </script>
 
 {#if $isReadyToRender}

package/src/login/components/AddRemoveButtonsMultiValuedAttribute.svelte

@@ -4,7 +4,7 @@
     type FormAction,
   } from '@keycloakify/svelte/login/lib/useUserProfileForm';
   import type { Attribute } from 'keycloakify/login/KcContext';
-  import type { EventDispatcher } from 'svelte';
+  import { untrack, type EventDispatcher } from 'svelte';
   import type { Readable } from 'svelte/store';
   import type { I18n } from '../i18n';
 
@@ -17,11 +17,13 @@
   };
   const { attribute, values, fieldIndex, dispatchFormAction, i18n }: AddRemoveButtonsMultiValuedAttributeProps =
     $props();
-  const { msg } = $i18n;
+  const { msg } = $derived($i18n);
 
-  const { hasAdd, hasRemove } = getButtonToDisplayForMultivaluedAttributeField({ attribute, values, fieldIndex });
+  const { hasAdd, hasRemove } = $derived(
+    getButtonToDisplayForMultivaluedAttributeField({ attribute, values, fieldIndex }),
+  );
 
-  const idPostfix = `-${attribute.name}-${fieldIndex + 1}`;
+  const idPostfix = `-${untrack(() => attribute.name)}-${untrack(() => fieldIndex) + 1}`;
 </script>
 
 {#if hasRemove}

package/src/login/components/GroupLabel.svelte

@@ -15,23 +15,25 @@
     kcClsx: KcClsx;
   };
   const { attribute, groupNameRef, i18n, kcClsx }: GroupLabelProps = $props();
-  const { advancedMsg } = $i18n;
+  const { advancedMsg } = $derived($i18n);
 
   let isGrouplabel = $state<boolean>(false);
-  if (attribute.group?.name !== groupNameRef.current) {
-    groupNameRef.current = attribute.group?.name ?? '';
+  $effect(() => {
+    if (attribute.group?.name !== groupNameRef.current) {
+      groupNameRef.current = attribute.group?.name ?? '';
 
-    if (groupNameRef.current !== '') {
-      assert(attribute.group !== undefined);
-      isGrouplabel = true;
+      if (groupNameRef.current !== '') {
+        assert(attribute.group !== undefined);
+        isGrouplabel = true;
+      }
     }
-  }
+  });
 
-  const html5DataAnnotations = {
+  const html5DataAnnotations = $derived({
     ...Object.fromEntries(
       Object.entries(attribute.group?.html5DataAnnotations ?? {}).map(([key, value]) => [`data-${key}`, value]),
     ),
-  };
+  });
 </script>
 
 {#if isGrouplabel}

package/src/login/components/InputFieldByType.svelte

@@ -8,8 +8,8 @@
   import type { I18n } from '../i18n';
 
   let { displayableErrors, ...props }: InputFieldByTypeProps<I18n> = $props();
-  const { attribute, valueOrValues } = props;
-  const inputType = attribute.annotations.inputType ?? '';
+  const { attribute, valueOrValues } = $derived(props);
+  const inputType = $derived(attribute.annotations.inputType ?? '');
 </script>
 
 {#if inputType === 'hidden'}

package/src/login/components/InputTag.svelte

@@ -16,9 +16,9 @@
     displayableErrors = $bindable([]),
   }: InputTagProps = $props();
 
-  const { advancedMsgStr } = $i18n;
-  const { inputType } = attribute.annotations;
-  let value = $state(
+  const { advancedMsgStr } = $derived($i18n);
+  const { inputType } = $derived(attribute.annotations);
+  let value = $derived(
     (() => {
       if (fieldIndex !== undefined) {
         assert(valueOrValues instanceof Array);
@@ -30,11 +30,11 @@
       return valueOrValues;
     })(),
   );
-  const html5DataAnnotations = {
+  const html5DataAnnotations = $derived({
     ...Object.fromEntries(
       Object.entries(attribute.group?.html5DataAnnotations ?? {}).map(([key, value]) => [`data-${key}`, value]),
     ),
-  };
+  });
 </script>
 
 <input

package/src/login/components/InputTagSelects.svelte

@@ -7,59 +7,63 @@
   const { attribute, dispatchFormAction, kcClsx, i18n, valueOrValues, displayableErrors }: InputFieldByTypeProps<I18n> =
     $props();
 
-  const { classDiv, classInput, classLabel, inputType } = (() => {
-    const { inputType } = attribute.annotations;
-
-    assert(inputType === 'select-radiobuttons' || inputType === 'multiselect-checkboxes');
-
-    switch (inputType) {
-      case 'select-radiobuttons':
-        return {
-          inputType: 'radio',
-          classDiv: kcClsx('kcInputClassRadio'),
-          classInput: kcClsx('kcInputClassRadioInput'),
-          classLabel: kcClsx('kcInputClassRadioLabel'),
-        };
-      case 'multiselect-checkboxes':
-        return {
-          inputType: 'checkbox',
-          classDiv: kcClsx('kcInputClassCheckbox'),
-          classInput: kcClsx('kcInputClassCheckboxInput'),
-          classLabel: kcClsx('kcInputClassCheckboxLabel'),
-        };
-      default:
-        return {
-          inputType: '',
-          classDiv: '',
-          classInput: '',
-          classLabel: '',
-        };
-    }
-  })();
-
-  const options = (() => {
-    walk: {
-      const { inputOptionsFromValidation } = attribute.annotations;
-
-      if (inputOptionsFromValidation === undefined) {
-        break walk;
+  const { classDiv, classInput, classLabel, inputType } = $derived(
+    (() => {
+      const { inputType } = attribute.annotations;
+
+      assert(inputType === 'select-radiobuttons' || inputType === 'multiselect-checkboxes');
+
+      switch (inputType) {
+        case 'select-radiobuttons':
+          return {
+            inputType: 'radio',
+            classDiv: kcClsx('kcInputClassRadio'),
+            classInput: kcClsx('kcInputClassRadioInput'),
+            classLabel: kcClsx('kcInputClassRadioLabel'),
+          };
+        case 'multiselect-checkboxes':
+          return {
+            inputType: 'checkbox',
+            classDiv: kcClsx('kcInputClassCheckbox'),
+            classInput: kcClsx('kcInputClassCheckboxInput'),
+            classLabel: kcClsx('kcInputClassCheckboxLabel'),
+          };
+        default:
+          return {
+            inputType: '',
+            classDiv: '',
+            classInput: '',
+            classLabel: '',
+          };
       }
+    })(),
+  );
 
-      const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
+  const options = $derived(
+    (() => {
+      walk: {
+        const { inputOptionsFromValidation } = attribute.annotations;
 
-      if (validator === undefined) {
-        break walk;
-      }
+        if (inputOptionsFromValidation === undefined) {
+          break walk;
+        }
 
-      if (validator.options === undefined) {
-        break walk;
-      }
+        const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
+
+        if (validator === undefined) {
+          break walk;
+        }
 
-      return validator.options;
-    }
+        if (validator.options === undefined) {
+          break walk;
+        }
+
+        return validator.options;
+      }
 
-    return attribute.validators.options?.options ?? [];
-  })();
+      return attribute.validators.options?.options ?? [];
+    })(),
+  );
 </script>
 
 {#each options as option (option)}

package/src/login/components/LogoutOtherSessions.svelte

@@ -5,7 +5,7 @@
 
   const { kcClsx, i18n }: { kcClsx: KcClsx; i18n: Readable<I18n> } = $props();
 
-  const { msg } = $i18n;
+  const { msg } = $derived($i18n);
 </script>
 
 <div

package/src/login/components/PasswordWrapper.svelte

@@ -7,9 +7,9 @@
   import type { Readable } from 'svelte/store';
 
   const props: { kcClsx: KcClsx; i18n: Readable<I18n>; passwordInputId: string; children: Snippet } = $props();
-  const { kcClsx, i18n, passwordInputId, children } = props;
+  const { kcClsx, i18n, passwordInputId, children } = $derived(props);
 
-  const { msgStr } = $i18n;
+  const { msgStr } = $derived($i18n);
 
   const [isPasswordRevealed, toggleIsPasswordRevealed] = useReducer<boolean, boolean>(
     (isPasswordRevealed: boolean) => !isPasswordRevealed,