@sensorario/sg-components 0.0.102 → 0.0.104

package/dist/components/AppLauncher/AppLauncher.d.ts

@@ -3,11 +3,13 @@ export declare const DEFAULT_APPS_URL = "https://api.simonegentili.com/heimdall/
 export type LauncherApp = {
     name: string;
     url: string;
+    /** Not granted to the logged-in user: opening it shows AppAccessGate's "Richiedi accesso". */
+    locked?: boolean;
 };
 interface AppLauncherProps {
     /** Endpoint returning `{ apps: LauncherApp[] }` - the enabled apps, managed from Heimdall. */
     appsUrl?: string;
-    /** Accessible name of the grid button - this library has no i18n of its own. */
+    /** Accessible name of the grid button. Default: the translated "App". */
     label?: string;
     /** Logged-in user's JWT: the API then lists only the apps this user may use. */
     token?: string | null;

package/dist/components/Icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import './Icon.css';
-export type IconName = 'menu' | 'layout' | 'edit' | 'help-circle' | 'check' | 'x' | 'file-plus' | 'link' | 'share-2' | 'download' | 'book' | 'printer' | 'eye' | 'columns' | 'sidebar-left' | 'sidebar-right' | 'play' | 'pause' | 'volume-2' | 'tech-node' | 'tech-go' | 'tech-php' | 'grid';
+export type IconName = 'menu' | 'layout' | 'edit' | 'help-circle' | 'check' | 'x' | 'file-plus' | 'link' | 'share-2' | 'download' | 'book' | 'printer' | 'eye' | 'columns' | 'sidebar-left' | 'sidebar-right' | 'play' | 'pause' | 'volume-2' | 'tech-node' | 'tech-go' | 'tech-php' | 'grid' | 'lock';
 export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
     name: IconName;
     size?: number;

package/dist/components/LanguageSwitcher/LanguageSwitcher.d.ts

@@ -0,0 +1,6 @@
+import './LanguageSwitcher.css';
+interface LanguageSwitcherProps {
+    className?: string;
+}
+export declare const LanguageSwitcher: ({ className }: LanguageSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export default LanguageSwitcher;

package/dist/components/LanguageSwitcher/LanguageSwitcher.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { LanguageSwitcher } from './LanguageSwitcher';
+declare const meta: Meta<typeof LanguageSwitcher>;
+export default meta;
+export declare const Default: StoryObj<typeof LanguageSwitcher>;

package/dist/components/Modal/Modal.d.ts

@@ -12,6 +12,7 @@ interface ModalProps {
     children: React.ReactNode;
     buttons?: ModalButton[];
     footer?: React.ReactNode;
+    /** Accessible name of the dismiss button. Default: the translated "Close". */
     closeLabel?: string;
     className?: string;
 }

package/dist/components/Quadrato/Header/QuadratoHeader.d.ts

@@ -1,4 +1,6 @@
 import './QuadratoHeader.css';
+/** Dispatch on `window` with the new avatar (data URL or null) as `detail` after changing it, so the header updates without a reload. */
+export declare const AVATAR_CHANGE_EVENT = "sg-avatar-change";
 interface QuadratoHeaderProps {
     title?: string;
     homePageKey?: string;

package/dist/i18n/index.d.ts

@@ -0,0 +1,13 @@
+import { type i18n } from 'i18next';
+export declare const SUPPORTED_LANGUAGES: readonly ["it", "en", "fr", "de", "es", "ja"];
+export type SupportedLanguage = typeof SUPPORTED_LANGUAGES[number];
+export declare const LANGUAGE_NAMES: Record<SupportedLanguage, string>;
+export declare const LANGUAGE_COOKIE = "sg-language";
+export declare const readLanguageCookie: () => SupportedLanguage | null;
+export declare const sgI18n: i18n;
+type AppResources = Partial<Record<SupportedLanguage, Record<string, unknown>>>;
+/** Adds the app's own texts (default namespace) to the shared instance and makes it the one react-i18next hooks use. */
+export declare const createI18n: ({ resources }: {
+    resources: AppResources;
+}) => i18n;
+export {};

package/dist/index.d.ts

@@ -17,3 +17,6 @@ export * from './components/FontPicker/FontPicker';
 export * from './components/Toggle/Toggle';
 export * from './components/AppLauncher/AppLauncher';
 export * from './components/AppAccessGate/AppAccessGate';
+export * from './components/LanguageSwitcher/LanguageSwitcher';
+export { createI18n, sgI18n, SUPPORTED_LANGUAGES, LANGUAGE_NAMES, LANGUAGE_COOKIE, readLanguageCookie } from './i18n';
+export type { SupportedLanguage } from './i18n';

package/dist/index.es.js

@@ -1,7 +1,9 @@
 import e, { forwardRef as t, useEffect as n, useId as r, useImperativeHandle as i, useRef as a, useState as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { setI18n as u, useTranslation as d } from "react-i18next";
+import f from "i18next";
 //#region src/components/Icon/Icon.tsx
-var u = {
+var p = {
 	menu: /* @__PURE__ */ l(s, { children: [
 		/* @__PURE__ */ c("line", {
 			x1: "3",
@@ -228,8 +230,15 @@ var u = {
 			cy: e,
 			r: "2"
 		}, `${t}-${e}`)))
-	})
-}, d = ({ name: e, size: t = 18, ...n }) => /* @__PURE__ */ c("svg", {
+	}),
+	lock: /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("rect", {
+		x: "5",
+		y: "11",
+		width: "14",
+		height: "10",
+		rx: "2"
+	}), /* @__PURE__ */ c("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })] })
+}, m = ({ name: e, size: t = 18, ...n }) => /* @__PURE__ */ c("svg", {
 	className: "sg-icon",
 	width: t,
 	height: t,
@@ -241,8 +250,8 @@ var u = {
 	strokeLinejoin: "round",
 	"aria-hidden": "true",
 	...n,
-	children: u[e]
-}), f = ({ label: e, icon: t, iconOnly: n, className: r, title: i, ...a }) => /* @__PURE__ */ l("button", {
+	children: p[e]
+}), h = ({ label: e, icon: t, iconOnly: n, className: r, title: i, ...a }) => /* @__PURE__ */ l("button", {
 	className: [
 		"custom-button",
 		t ? "custom-button-with-icon" : "",
@@ -250,11 +259,11 @@ var u = {
 	].filter(Boolean).join(" "),
 	title: i ?? (n ? e : void 0),
 	...a,
-	children: [t && /* @__PURE__ */ c(d, { name: t }), /* @__PURE__ */ c("span", {
+	children: [t && /* @__PURE__ */ c(m, { name: t }), /* @__PURE__ */ c("span", {
 		className: n ? "custom-button-label-visually-hidden" : void 0,
 		children: e
 	})]
-}), p = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ l("footer", {
+}), g = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ l("footer", {
 	className: "footer",
 	children: [/* @__PURE__ */ c("span", { children: /* @__PURE__ */ c("a", {
 		href: t,
@@ -264,17 +273,17 @@ var u = {
 		style: { marginLeft: "16px" },
 		children: e
 	}, t)) })]
-}), m = "simonegentili.com-cookie-consent", h = 3600 * 24 * 365;
-function g() {
-	return document.cookie.split("; ").some((e) => e.startsWith(`${m}=`));
+}), _ = "simonegentili.com-cookie-consent", v = 3600 * 24 * 365;
+function y() {
+	return document.cookie.split("; ").some((e) => e.startsWith(`${_}=`));
 }
-function _() {
-	document.cookie = `${m}=accepted; path=/; domain=.simonegentili.com; max-age=${h}; secure; samesite=strict`;
+function b() {
+	document.cookie = `${_}=accepted; path=/; domain=.simonegentili.com; max-age=${v}; secure; samesite=strict`;
 }
-var v = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
+var x = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 	let [t, r] = o(!1);
 	return n(() => {
-		r(!g());
+		r(!y());
 	}, []), t ? /* @__PURE__ */ l("div", {
 		className: "cookie-consent",
 		role: "region",
@@ -292,15 +301,15 @@ var v = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 				}),
 				"."
 			]
-		}), /* @__PURE__ */ c(f, {
+		}), /* @__PURE__ */ c(h, {
 			label: "Accetta",
 			onClick: () => {
-				_(), r(!1);
+				b(), r(!1);
 			},
 			className: "cookie-consent-accept"
 		})]
 	}) : null;
-}, y = [
+}, S = [
 	{
 		label: "guitar",
 		href: "https://guitar.simonegentili.com"
@@ -321,11 +330,11 @@ var v = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 		label: "code2image",
 		href: "https://code2image.simonegentili.com"
 	}
-], b = () => /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(p, {
+], C = () => /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(g, {
 	href: "https://simonegentili.com",
 	copyright: "© 2026 simonegentili.com",
-	links: y
-}), /* @__PURE__ */ c(v, {})] }), x = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: r, className: i }) => /* @__PURE__ */ c("header", {
+	links: S
+}), /* @__PURE__ */ c(x, {})] }), w = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: r, className: i }) => /* @__PURE__ */ c("header", {
 	className: i ? `header ${i}` : "header",
 	children: /* @__PURE__ */ l("div", {
 		className: "header-container",
@@ -343,46 +352,279 @@ var v = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 			children: r
 		})]
 	})
-}), S = ({ onNavigate: e }) => /* @__PURE__ */ c(x, {
+}), T = ({ onNavigate: e }) => /* @__PURE__ */ c(w, {
 	onNavigate: e,
 	title: "Simone Gentili - senior web developer, tech author and chess enthusiast",
 	homePageKey: "home"
-}), C = "https://api.simonegentili.com/heimdall", w = (e) => e.endsWith("/") ? e : `${e}/`, T = (e) => {
-	let t = w(window.location.origin + window.location.pathname);
-	return e.filter((e) => t.startsWith(w(e.url))).sort((e, t) => t.url.length - e.url.length)[0] ?? null;
-}, E = ({ token: e, heimdallUrl: t = C }) => {
-	let [r, i] = o(null), [a, u] = o(!1), [d, p] = o(!1);
+}), E = {
+	auth: {
+		login: "Accedi",
+		logout: "Esci",
+		username: "Username",
+		password: "Password"
+	},
+	modal: { close: "Chiudi" },
+	accessGate: {
+		title: "Non hai accesso a {{app}}",
+		pending: "La tua richiesta è in attesa di approvazione.",
+		rejected: "La tua richiesta di accesso è stata rifiutata. Puoi inviarne una nuova.",
+		none: "Per usare questa app devi chiedere l’accesso a un amministratore.",
+		failed: "Invio non riuscito, riprova.",
+		sending: "Invio…",
+		request: "Richiedi accesso"
+	},
+	launcher: {
+		label: "App",
+		loading: "Caricamento…",
+		loadFailed: "Impossibile caricare le app.",
+		locked: "accesso su richiesta"
+	},
+	setPassword: {
+		title: "Imposta una nuova password",
+		newPassword: "Nuova password",
+		confirmPassword: "Conferma password",
+		submit: "Salva password",
+		errorEmpty: "Inserisci e conferma la nuova password.",
+		errorMismatch: "Le password non coincidono."
+	},
+	languageSwitcher: { label: "Lingua" }
+}, D = {
+	auth: {
+		login: "Log in",
+		logout: "Log out",
+		username: "Username",
+		password: "Password"
+	},
+	modal: { close: "Close" },
+	accessGate: {
+		title: "You don't have access to {{app}}",
+		pending: "Your request is awaiting approval.",
+		rejected: "Your access request was rejected. You can send a new one.",
+		none: "To use this app you need to ask an administrator for access.",
+		failed: "Sending failed, please try again.",
+		sending: "Sending…",
+		request: "Request access"
+	},
+	launcher: {
+		label: "Apps",
+		loading: "Loading…",
+		loadFailed: "Unable to load the apps.",
+		locked: "access on request"
+	},
+	setPassword: {
+		title: "Set a new password",
+		newPassword: "New password",
+		confirmPassword: "Confirm password",
+		submit: "Save password",
+		errorEmpty: "Enter and confirm the new password.",
+		errorMismatch: "The passwords don't match."
+	},
+	languageSwitcher: { label: "Language" }
+}, O = {
+	auth: {
+		login: "Se connecter",
+		logout: "Se déconnecter",
+		username: "Nom d’utilisateur",
+		password: "Mot de passe"
+	},
+	modal: { close: "Fermer" },
+	accessGate: {
+		title: "Vous n’avez pas accès à {{app}}",
+		pending: "Votre demande est en attente d’approbation.",
+		rejected: "Votre demande d’accès a été refusée. Vous pouvez en envoyer une nouvelle.",
+		none: "Pour utiliser cette application, vous devez demander l’accès à un administrateur.",
+		failed: "Échec de l’envoi, veuillez réessayer.",
+		sending: "Envoi…",
+		request: "Demander l’accès"
+	},
+	launcher: {
+		label: "Applications",
+		loading: "Chargement…",
+		loadFailed: "Impossible de charger les applications.",
+		locked: "accès sur demande"
+	},
+	setPassword: {
+		title: "Définir un nouveau mot de passe",
+		newPassword: "Nouveau mot de passe",
+		confirmPassword: "Confirmer le mot de passe",
+		submit: "Enregistrer le mot de passe",
+		errorEmpty: "Saisissez et confirmez le nouveau mot de passe.",
+		errorMismatch: "Les mots de passe ne correspondent pas."
+	},
+	languageSwitcher: { label: "Langue" }
+}, k = {
+	auth: {
+		login: "Anmelden",
+		logout: "Abmelden",
+		username: "Benutzername",
+		password: "Passwort"
+	},
+	modal: { close: "Schließen" },
+	accessGate: {
+		title: "Du hast keinen Zugriff auf {{app}}",
+		pending: "Deine Anfrage wartet auf Freigabe.",
+		rejected: "Deine Zugriffsanfrage wurde abgelehnt. Du kannst eine neue senden.",
+		none: "Um diese App zu nutzen, musst du einen Administrator um Zugriff bitten.",
+		failed: "Senden fehlgeschlagen, bitte versuche es erneut.",
+		sending: "Wird gesendet…",
+		request: "Zugriff anfragen"
+	},
+	launcher: {
+		label: "Apps",
+		loading: "Wird geladen…",
+		loadFailed: "Die Apps konnten nicht geladen werden.",
+		locked: "Zugriff auf Anfrage"
+	},
+	setPassword: {
+		title: "Neues Passwort festlegen",
+		newPassword: "Neues Passwort",
+		confirmPassword: "Passwort bestätigen",
+		submit: "Passwort speichern",
+		errorEmpty: "Gib das neue Passwort ein und bestätige es.",
+		errorMismatch: "Die Passwörter stimmen nicht überein."
+	},
+	languageSwitcher: { label: "Sprache" }
+}, A = {
+	auth: {
+		login: "Iniciar sesión",
+		logout: "Cerrar sesión",
+		username: "Usuario",
+		password: "Contraseña"
+	},
+	modal: { close: "Cerrar" },
+	accessGate: {
+		title: "No tienes acceso a {{app}}",
+		pending: "Tu solicitud está pendiente de aprobación.",
+		rejected: "Tu solicitud de acceso ha sido rechazada. Puedes enviar una nueva.",
+		none: "Para usar esta aplicación debes pedir acceso a un administrador.",
+		failed: "No se pudo enviar, inténtalo de nuevo.",
+		sending: "Enviando…",
+		request: "Solicitar acceso"
+	},
+	launcher: {
+		label: "Aplicaciones",
+		loading: "Cargando…",
+		loadFailed: "No se pudieron cargar las aplicaciones.",
+		locked: "acceso bajo solicitud"
+	},
+	setPassword: {
+		title: "Establecer una nueva contraseña",
+		newPassword: "Nueva contraseña",
+		confirmPassword: "Confirmar contraseña",
+		submit: "Guardar contraseña",
+		errorEmpty: "Introduce y confirma la nueva contraseña.",
+		errorMismatch: "Las contraseñas no coinciden."
+	},
+	languageSwitcher: { label: "Idioma" }
+}, ee = {
+	auth: {
+		login: "ログイン",
+		logout: "ログアウト",
+		username: "ユーザー名",
+		password: "パスワード"
+	},
+	modal: { close: "閉じる" },
+	accessGate: {
+		title: "{{app}} へのアクセス権がありません",
+		pending: "リクエストは承認待ちです。",
+		rejected: "アクセスリクエストは却下されました。新しいリクエストを送信できます。",
+		none: "このアプリを使うには、管理者にアクセスを申請してください。",
+		failed: "送信に失敗しました。もう一度お試しください。",
+		sending: "送信中…",
+		request: "アクセスを申請"
+	},
+	launcher: {
+		label: "アプリ",
+		loading: "読み込み中…",
+		loadFailed: "アプリを読み込めませんでした。",
+		locked: "申請によりアクセス可能"
+	},
+	setPassword: {
+		title: "新しいパスワードを設定",
+		newPassword: "新しいパスワード",
+		confirmPassword: "パスワードの確認",
+		submit: "パスワードを保存",
+		errorEmpty: "新しいパスワードを入力して確認してください。",
+		errorMismatch: "パスワードが一致しません。"
+	},
+	languageSwitcher: { label: "言語" }
+}, j = [
+	"it",
+	"en",
+	"fr",
+	"de",
+	"es",
+	"ja"
+], M = {
+	it: "Italiano",
+	en: "English",
+	fr: "Français",
+	de: "Deutsch",
+	es: "Español",
+	ja: "日本語"
+}, N = "sg-language", P = "it", te = (e) => !!e && j.includes(e), F = () => {
+	let e = document.cookie.split("; ").find((e) => e.startsWith(`${N}=`))?.slice(12);
+	return te(e) ? e : null;
+}, I = (e) => {
+	let t = window.location.hostname.endsWith("simonegentili.com") ? "; domain=.simonegentili.com; secure" : "";
+	document.cookie = `${N}=${e}; path=/; max-age=31536000; samesite=lax${t}`;
+}, L = f.createInstance();
+L.init({
+	resources: {
+		it: { sg: E },
+		en: { sg: D },
+		fr: { sg: O },
+		de: { sg: k },
+		es: { sg: A },
+		ja: { sg: ee }
+	},
+	lng: F() ?? P,
+	fallbackLng: P,
+	supportedLngs: [...j],
+	ns: ["sg", "translation"],
+	defaultNS: "translation",
+	initAsync: !1,
+	interpolation: { escapeValue: !1 }
+}), L.on("languageChanged", I);
+var ne = ({ resources: e }) => {
+	for (let [t, n] of Object.entries(e)) L.addResourceBundle(t, "translation", n, !0, !0);
+	return u(L), L;
+}, R = "https://api.simonegentili.com/heimdall", z = (e) => e.endsWith("/") ? e : `${e}/`, re = (e) => {
+	let t = z(window.location.origin + window.location.pathname);
+	return e.filter((e) => t.startsWith(z(e.url))).sort((e, t) => t.url.length - e.url.length)[0] ?? null;
+}, B = ({ token: e, heimdallUrl: t = R }) => {
+	let { t: r } = d("sg", { i18n: L }), [i, a] = o(null), [u, f] = o(!1), [p, m] = o(!1);
 	n(() => {
-		e && fetch(`${t}/access`, { headers: { Authorization: `Bearer ${e}` } }).then((e) => e.ok ? e.json() : Promise.reject(e.status)).then((t) => i({
+		e && fetch(`${t}/access`, { headers: { Authorization: `Bearer ${e}` } }).then((e) => e.ok ? e.json() : Promise.reject(e.status)).then((t) => a({
 			token: e,
-			app: T(t.apps)
-		})).catch(() => i({
+			app: re(t.apps)
+		})).catch(() => a({
 			token: e,
 			app: null
 		}));
 	}, [e, t]);
-	let m = r?.token === e ? r.app : null;
-	return !e || m === null || m.access === "open" || m.access === "approved" ? null : /* @__PURE__ */ c("div", {
+	let g = i?.token === e ? i.app : null;
+	return !e || g === null || g.access === "open" || g.access === "approved" ? null : /* @__PURE__ */ c("div", {
 		className: "sg-access-gate",
 		role: "dialog",
 		"aria-modal": "true",
 		"aria-labelledby": "sg-access-gate-title",
 		children: /* @__PURE__ */ l("div", {
 			className: "sg-access-gate-card",
-			children: [/* @__PURE__ */ l("h2", {
+			children: [/* @__PURE__ */ c("h2", {
 				id: "sg-access-gate-title",
-				children: ["Non hai accesso a ", m.name]
-			}), m.access === "pending" ? /* @__PURE__ */ c("p", { children: "La tua richiesta è in attesa di approvazione." }) : /* @__PURE__ */ l(s, { children: [
-				/* @__PURE__ */ c("p", { children: m.access === "rejected" ? "La tua richiesta di accesso è stata rifiutata. Puoi inviarne una nuova." : "Per usare questa app devi chiedere l’accesso a un amministratore." }),
-				d && /* @__PURE__ */ c("p", {
+				children: r("accessGate.title", { app: g.name })
+			}), g.access === "pending" ? /* @__PURE__ */ c("p", { children: r("accessGate.pending") }) : /* @__PURE__ */ l(s, { children: [
+				/* @__PURE__ */ c("p", { children: g.access === "rejected" ? r("accessGate.rejected") : r("accessGate.none") }),
+				p && /* @__PURE__ */ c("p", {
 					className: "sg-access-gate-error",
-					children: "Invio non riuscito, riprova."
+					children: r("accessGate.failed")
 				}),
-				/* @__PURE__ */ c(f, {
-					label: a ? "Invio…" : "Richiedi accesso",
-					disabled: a,
+				/* @__PURE__ */ c(h, {
+					label: r(u ? "accessGate.sending" : "accessGate.request"),
+					disabled: u,
 					onClick: async () => {
-						u(!0), p(!1);
+						f(!0), m(!1);
 						try {
 							let n = await fetch(`${t}/access-requests`, {
 								method: "POST",
@@ -390,153 +632,174 @@ var v = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 									Authorization: `Bearer ${e}`,
 									"Content-Type": "application/json"
 								},
-								body: JSON.stringify({ app: m.slug })
+								body: JSON.stringify({ app: g.slug })
 							});
-							n.ok || n.status === 409 ? i({
+							n.ok || n.status === 409 ? a({
 								token: e,
 								app: {
-									...m,
+									...g,
 									access: "pending"
 								}
-							}) : p(!0);
+							}) : m(!0);
 						} catch {
-							p(!0);
+							m(!0);
 						} finally {
-							u(!1);
+							f(!1);
 						}
 					}
 				})
 			] })]
 		})
 	});
-}, D = "https://api.simonegentili.com/heimdall/launcher", O = ({ appsUrl: e = D, label: t = "App", token: r = null }) => {
-	let [i, s] = o(!1), [u, f] = o(null), p = u?.token === r ? u.apps : null, [m, h] = o(!1), g = a(null);
+}, V = "https://api.simonegentili.com/heimdall/launcher", H = ({ appsUrl: e = V, label: t, token: r = null }) => {
+	let { t: i } = d("sg", { i18n: L }), s = t ?? i("launcher.label"), [u, f] = o(!1), [p, h] = o(null), g = p?.token === r ? p.apps : null, [_, v] = o(!1), y = a(null);
 	return n(() => {
-		!i || p !== null || fetch(e, r ? { headers: { Authorization: `Bearer ${r}` } } : void 0).then((e) => e.ok ? e.json() : Promise.reject(e.status)).then((e) => f({
+		!u || g !== null || fetch(e, r ? { headers: { Authorization: `Bearer ${r}` } } : void 0).then((e) => e.ok ? e.json() : Promise.reject(e.status)).then((e) => h({
 			token: r,
 			apps: e.apps
-		})).catch(() => h(!0));
+		})).catch(() => v(!0));
 	}, [
-		i,
-		p,
+		u,
+		g,
 		e,
 		r
 	]), n(() => {
-		if (!i) return;
+		if (!u) return;
 		let e = (e) => {
-			g.current?.contains(e.target) || s(!1);
+			y.current?.contains(e.target) || f(!1);
 		}, t = (e) => {
-			e.key === "Escape" && s(!1);
+			e.key === "Escape" && f(!1);
 		};
 		return document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), () => {
 			document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
 		};
-	}, [i]), /* @__PURE__ */ l("div", {
+	}, [u]), /* @__PURE__ */ l("div", {
 		className: "sg-app-launcher",
-		ref: g,
+		ref: y,
 		children: [/* @__PURE__ */ c("button", {
 			type: "button",
 			className: "sg-app-launcher-toggle",
-			"aria-label": t,
-			title: t,
-			"aria-expanded": i,
+			"aria-label": s,
+			title: s,
+			"aria-expanded": u,
 			onClick: () => {
-				i || h(!1), s(!i);
+				u || v(!1), f(!u);
 			},
-			children: /* @__PURE__ */ c(d, {
+			children: /* @__PURE__ */ c(m, {
 				name: "grid",
 				size: 22
 			})
-		}), i && /* @__PURE__ */ c("div", {
+		}), u && /* @__PURE__ */ c("div", {
 			className: "sg-app-launcher-panel",
-			children: m ? /* @__PURE__ */ c("p", {
+			children: _ ? /* @__PURE__ */ c("p", {
 				className: "sg-app-launcher-message",
-				children: "Impossibile caricare le app."
-			}) : p === null ? /* @__PURE__ */ c("p", {
+				children: i("launcher.loadFailed")
+			}) : g === null ? /* @__PURE__ */ c("p", {
 				className: "sg-app-launcher-message",
-				children: "Caricamento…"
+				children: i("launcher.loading")
 			}) : /* @__PURE__ */ c("ul", {
 				className: "sg-app-launcher-grid",
-				children: p.map((e) => /* @__PURE__ */ c("li", { children: /* @__PURE__ */ l("a", {
+				children: g.map((e) => /* @__PURE__ */ c("li", { children: /* @__PURE__ */ l("a", {
 					href: e.url,
-					className: new URL(e.url).origin === window.location.origin ? "sg-app-launcher-app current" : "sg-app-launcher-app",
-					children: [/* @__PURE__ */ c("span", {
+					className: [
+						"sg-app-launcher-app",
+						new URL(e.url).origin === window.location.origin ? "current" : "",
+						e.locked ? "locked" : ""
+					].filter(Boolean).join(" "),
+					title: e.locked ? `${e.name}: ${i("launcher.locked")}` : void 0,
+					children: [/* @__PURE__ */ l("span", {
 						className: "sg-app-launcher-tile",
 						"aria-hidden": "true",
-						children: e.name.charAt(0).toUpperCase()
-					}), /* @__PURE__ */ c("span", {
+						children: [e.name.charAt(0).toUpperCase(), e.locked && /* @__PURE__ */ c("span", {
+							className: "sg-app-launcher-lock",
+							children: /* @__PURE__ */ c(m, {
+								name: "lock",
+								size: 12
+							})
+						})]
+					}), /* @__PURE__ */ l("span", {
 						className: "sg-app-launcher-name",
-						children: e.name
+						children: [e.name, e.locked && /* @__PURE__ */ l("span", {
+							className: "sg-visually-hidden",
+							children: [
+								" (",
+								i("launcher.locked"),
+								")"
+							]
+						})]
 					})]
 				}) }, e.url))
 			})
 		})]
 	});
-}, k = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => /* @__PURE__ */ c(s, { children: e ? /* @__PURE__ */ c("button", {
-	onClick: n,
-	className: "sg-authenticator-button",
-	children: "logout"
-}) : /* @__PURE__ */ c("button", {
-	onClick: t,
-	className: "sg-authenticator-button",
-	children: "Login"
-}) }), A = 220, j = ({ open: t, onClose: r, title: i, icon: a, children: s, buttons: u, footer: d, closeLabel: p = "Close", className: m }) => {
-	let [h, g] = o(!1), [_, v] = o({
+}, U = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => {
+	let { t: r } = d("sg", { i18n: L });
+	return /* @__PURE__ */ c(s, { children: e ? /* @__PURE__ */ c("button", {
+		onClick: n,
+		className: "sg-authenticator-button",
+		children: r("auth.logout")
+	}) : /* @__PURE__ */ c("button", {
+		onClick: t,
+		className: "sg-authenticator-button",
+		children: r("auth.login")
+	}) });
+}, ie = 220, W = ({ open: t, onClose: r, title: i, icon: a, children: s, buttons: u, footer: f, closeLabel: p, className: m }) => {
+	let { t: g } = d("sg", { i18n: L }), [_, v] = o(!1), [y, b] = o({
 		x: 0,
 		y: 0
-	}), y = e.useRef(null), [b, x] = o(!1), S = (e) => {
-		h || (g(!0), setTimeout(() => {
-			g(!1), e();
-		}, A));
+	}), x = e.useRef(null), [S, C] = o(!1), w = (e) => {
+		_ || (v(!0), setTimeout(() => {
+			v(!1), e();
+		}, ie));
 	};
 	n(() => {
 		if (!t) return;
 		let e = (e) => {
-			e.key === "Escape" && S(r);
+			e.key === "Escape" && w(r);
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, [t, r]);
-	let [C, w] = o(t);
-	if (t !== C && (w(t), t && v({
+	let [T, E] = o(t);
+	if (t !== T && (E(t), t && b({
 		x: 0,
 		y: 0
 	})), !t) return null;
-	function T(e) {
-		e.target.closest(".modal-close") || (y.current = {
+	function D(e) {
+		e.target.closest(".modal-close") || (x.current = {
 			pointerX: e.clientX,
 			pointerY: e.clientY,
-			offsetX: _.x,
-			offsetY: _.y
-		}, x(!0), e.currentTarget.setPointerCapture(e.pointerId));
+			offsetX: y.x,
+			offsetY: y.y
+		}, C(!0), e.currentTarget.setPointerCapture(e.pointerId));
 	}
-	function E(e) {
-		if (!y.current) return;
-		let { pointerX: t, pointerY: n, offsetX: r, offsetY: i } = y.current;
-		v({
+	function O(e) {
+		if (!x.current) return;
+		let { pointerX: t, pointerY: n, offsetX: r, offsetY: i } = x.current;
+		b({
 			x: r + (e.clientX - t),
 			y: i + (e.clientY - n)
 		});
 	}
-	function D() {
-		y.current = null, x(!1);
+	function k() {
+		x.current = null, C(!1);
 	}
 	return /* @__PURE__ */ c("div", {
-		className: `modal-overlay${h ? " modal-overlay-closing" : ""}`,
-		onClick: () => S(r),
+		className: `modal-overlay${_ ? " modal-overlay-closing" : ""}`,
+		onClick: () => w(r),
 		children: /* @__PURE__ */ l("div", {
-			className: `modal-content${m ? ` ${m}` : ""}${h ? " modal-content-closing" : ""}`,
+			className: `modal-content${m ? ` ${m}` : ""}${_ ? " modal-content-closing" : ""}`,
 			style: {
-				"--drag-x": `${_.x}px`,
-				"--drag-y": `${_.y}px`
+				"--drag-x": `${y.x}px`,
+				"--drag-y": `${y.y}px`
 			},
 			onClick: (e) => e.stopPropagation(),
 			children: [
 				/* @__PURE__ */ l("div", {
-					className: `modal-header${b ? " modal-header-dragging" : ""}`,
-					onPointerDown: T,
-					onPointerMove: E,
-					onPointerUp: D,
-					onPointerCancel: D,
+					className: `modal-header${S ? " modal-header-dragging" : ""}`,
+					onPointerDown: D,
+					onPointerMove: O,
+					onPointerUp: k,
+					onPointerCancel: k,
 					children: [
 						a && /* @__PURE__ */ c("span", {
 							className: "modal-icon",
@@ -549,9 +812,9 @@ var v = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 						/* @__PURE__ */ c("button", {
 							type: "button",
 							className: "modal-close",
-							"aria-label": p,
-							onClick: () => S(r),
-							disabled: h,
+							"aria-label": p ?? g("modal.close"),
+							onClick: () => w(r),
+							disabled: _,
 							children: "×"
 						})
 					]
@@ -562,20 +825,20 @@ var v = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 				}),
 				u && /* @__PURE__ */ c("div", {
 					className: "modal-footer",
-					children: u.map((e, t) => /* @__PURE__ */ c(f, {
+					children: u.map((e, t) => /* @__PURE__ */ c(h, {
 						label: e.label,
-						onClick: () => S(e.onClick),
-						disabled: h
+						onClick: () => w(e.onClick),
+						disabled: _
 					}, t))
 				}),
-				d && /* @__PURE__ */ c("div", {
+				f && /* @__PURE__ */ c("div", {
 					className: "modal-footer",
-					children: d
+					children: f
 				})
 			]
 		})
 	});
-}, M = ({ label: e, invalid: t, className: n, id: i, ...a }) => {
+}, G = ({ label: e, invalid: t, className: n, id: i, ...a }) => {
 	let o = r(), s = i ?? o;
 	return /* @__PURE__ */ l("div", {
 		className: "input-wrapper",
@@ -593,7 +856,7 @@ var v = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 			...a
 		})]
 	});
-}, N = ({ label: e, className: t, id: n, ...i }) => {
+}, K = ({ label: e, className: t, id: n, ...i }) => {
 	let a = r(), o = n ?? a;
 	return /* @__PURE__ */ l("div", {
 		className: "input-wrapper",
@@ -608,138 +871,164 @@ var v = ({ privacyPolicyHref: e = "https://simonegentili.com/privacy" }) => {
 			...i
 		})]
 	});
-}, P = ({ open: e, onClose: t, onLogin: n }) => {
-	let [r, i] = o(""), [a, s] = o("");
-	return /* @__PURE__ */ c(j, {
+}, q = ({ open: e, onClose: t, onLogin: n }) => {
+	let { t: r } = d("sg", { i18n: L }), [i, a] = o(""), [s, u] = o("");
+	return /* @__PURE__ */ c(W, {
 		open: e,
 		onClose: t,
-		title: "Login",
+		title: r("auth.login"),
 		children: /* @__PURE__ */ l("form", {
 			onSubmit: (e) => {
-				e.preventDefault(), n(r, a);
+				e.preventDefault(), n(i, s);
 			},
 			children: [
-				/* @__PURE__ */ c(M, {
-					label: "Username",
-					value: r,
-					onChange: (e) => i(e.target.value),
+				/* @__PURE__ */ c(G, {
+					label: r("auth.username"),
+					value: i,
+					onChange: (e) => a(e.target.value),
 					autoFocus: !0
 				}),
-				/* @__PURE__ */ c(N, {
-					label: "Password",
-					value: a,
-					onChange: (e) => s(e.target.value)
+				/* @__PURE__ */ c(K, {
+					label: r("auth.password"),
+					value: s,
+					onChange: (e) => u(e.target.value)
 				}),
-				/* @__PURE__ */ c(f, {
-					label: "Login",
+				/* @__PURE__ */ c(h, {
+					label: r("auth.login"),
 					type: "submit",
 					style: { width: "100%" }
 				})
 			]
 		})
 	});
-}, F = "simonegentili.com-access-token", I = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), L = (e) => {
+}, J = "simonegentili.com-access-token", Y = "sg-avatar-change", X = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), ae = (e) => {
 	let t = document.cookie.split("; ").find((t) => t.startsWith(`${e}=`));
 	return t ? t.slice(e.length + 1) : null;
-}, R = (e, t) => {
+}, oe = (e, t) => {
 	try {
 		return JSON.parse(atob(e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")))[t] ?? null;
 	} catch {
 		return null;
 	}
-}, z = t(({ title: e = "Quadrato", homePageKey: t = "home", onNavigate: r, cookieName: a = F, username: u = null, usernameJwtField: d = "sub", onLogin: f, onLogout: p, onUserAuthenticated: m, appsUrl: h, heimdallUrl: g }, _) => {
-	let [v, y] = o(() => I(a)), [b, S] = o(!1);
-	i(_, () => ({ openLoginModal: () => S(!0) }));
-	let C = v ? L(a) : null, w = u ?? (C ? R(C, d) : null);
+}, Z = t(({ title: e = "Quadrato", homePageKey: t = "home", onNavigate: r, cookieName: a = J, username: u = null, usernameJwtField: d = "sub", onLogin: f, onLogout: p, onUserAuthenticated: m, appsUrl: h, heimdallUrl: g = R }, _) => {
+	let [v, y] = o(() => X(a)), [b, x] = o(!1);
+	i(_, () => ({ openLoginModal: () => x(!0) }));
+	let S = v ? ae(a) : null, C = u ?? (S ? oe(S, d) : null), [T, E] = o(null), D = S && T?.token === S ? T.src : null;
 	return n(() => {
-		m?.(v, v ? w : null);
+		if (!S) return;
+		let e = !1;
+		return fetch(`${g}/me/avatar`, { headers: { Authorization: `Bearer ${S}` } }).then((e) => e.ok ? e.json() : null).then((t) => {
+			e || E({
+				token: S,
+				src: t?.avatar ?? null
+			});
+		}).catch(() => {}), () => {
+			e = !0;
+		};
+	}, [S, g]), n(() => {
+		if (!S) return;
+		let e = (e) => E({
+			token: S,
+			src: e.detail
+		});
+		return window.addEventListener(Y, e), () => window.removeEventListener(Y, e);
+	}, [S]), n(() => {
+		m?.(v, v ? C : null);
 	}, []), /* @__PURE__ */ l(s, { children: [
-		/* @__PURE__ */ l(x, {
+		/* @__PURE__ */ l(w, {
 			onNavigate: r,
 			title: e,
 			homePageKey: t,
 			className: "quadrato-header",
-			children: [/* @__PURE__ */ c(O, {
+			children: [/* @__PURE__ */ c(H, {
 				appsUrl: h,
-				token: C
+				token: S
 			}), /* @__PURE__ */ l("div", {
 				className: "quadrato-header-auth",
-				children: [v && w && /* @__PURE__ */ c("span", {
-					className: "quadrato-header-username",
-					children: w
-				}), /* @__PURE__ */ c(k, {
-					isLoggedIn: v,
-					handleLogin: () => S(!0),
-					handleLogout: () => {
-						p?.();
-						let e = I(a);
-						y(e), m?.(e, null);
-					}
-				})]
+				children: [
+					v && D && /* @__PURE__ */ c("img", {
+						className: "quadrato-header-avatar",
+						src: D,
+						alt: ""
+					}),
+					v && C && /* @__PURE__ */ c("span", {
+						className: "quadrato-header-username",
+						children: C
+					}),
+					/* @__PURE__ */ c(U, {
+						isLoggedIn: v,
+						handleLogin: () => x(!0),
+						handleLogout: () => {
+							p?.();
+							let e = X(a);
+							y(e), m?.(e, null);
+						}
+					})
+				]
 			})]
 		}),
-		/* @__PURE__ */ c(E, {
-			token: C,
+		/* @__PURE__ */ c(B, {
+			token: S,
 			heimdallUrl: g
 		}),
-		/* @__PURE__ */ c(P, {
+		/* @__PURE__ */ c(q, {
 			open: b,
-			onClose: () => S(!1),
+			onClose: () => x(!1),
 			onLogin: async (e, t) => {
 				await f(e, t);
-				let n = I(a);
-				y(n), S(!1), m?.(n, n ? u ?? e : null);
+				let n = X(a);
+				y(n), x(!1), m?.(n, n ? u ?? e : null);
 			}
 		})
 	] });
 });
-z.displayName = "QuadratoHeader";
+Z.displayName = "QuadratoHeader";
 //#endregion
 //#region src/components/SetPasswordModal/SetPasswordModal.tsx
-var B = ({ open: e, onClose: t, onSubmit: n }) => {
-	let [r, i] = o(""), [a, s] = o(""), [u, d] = o("");
-	return /* @__PURE__ */ c(j, {
+var se = ({ open: e, onClose: t, onSubmit: n }) => {
+	let { t: r } = d("sg", { i18n: L }), [i, a] = o(""), [s, u] = o(""), [f, p] = o("");
+	return /* @__PURE__ */ c(W, {
 		open: e,
 		onClose: t,
-		title: "Imposta una nuova password",
+		title: r("setPassword.title"),
 		children: /* @__PURE__ */ l("form", {
 			className: "set-password-modal-form",
 			onSubmit: (e) => {
-				if (e.preventDefault(), r === "" || a === "") {
-					d("Inserisci ed conferma la nuova password.");
+				if (e.preventDefault(), i === "" || s === "") {
+					p(r("setPassword.errorEmpty"));
 					return;
 				}
-				if (r !== a) {
-					d("Le password non coincidono.");
+				if (i !== s) {
+					p(r("setPassword.errorMismatch"));
 					return;
 				}
-				d(""), n(r);
+				p(""), n(i);
 			},
 			children: [
-				/* @__PURE__ */ c(N, {
-					label: "Nuova password",
-					value: r,
-					onChange: (e) => i(e.target.value),
+				/* @__PURE__ */ c(K, {
+					label: r("setPassword.newPassword"),
+					value: i,
+					onChange: (e) => a(e.target.value),
 					autoFocus: !0
 				}),
-				/* @__PURE__ */ c(N, {
-					label: "Conferma password",
-					value: a,
-					onChange: (e) => s(e.target.value)
+				/* @__PURE__ */ c(K, {
+					label: r("setPassword.confirmPassword"),
+					value: s,
+					onChange: (e) => u(e.target.value)
 				}),
-				u && /* @__PURE__ */ c("p", {
+				f && /* @__PURE__ */ c("p", {
 					className: "set-password-modal-error",
-					children: u
+					children: f
 				}),
-				/* @__PURE__ */ c(f, {
-					label: "Salva password",
+				/* @__PURE__ */ c(h, {
+					label: r("setPassword.submit"),
 					type: "submit",
 					style: { width: "100%" }
 				})
 			]
 		})
 	});
-}, V = ({ value: e, onChange: t, swatches: r }) => {
+}, Q = ({ value: e, onChange: t, swatches: r }) => {
 	let [i, s] = o(!1), u = a(null);
 	return n(() => {
 		if (!i) return;
@@ -788,7 +1077,7 @@ var B = ({ open: e, onClose: t, onSubmit: n }) => {
 			})]
 		})]
 	});
-}, H = (e) => e.split(",")[0].replace(/'/g, ""), U = ({ value: e, onChange: t, options: r }) => {
+}, $ = (e) => e.split(",")[0].replace(/'/g, ""), ce = ({ value: e, onChange: t, options: r }) => {
 	let [i, s] = o(!1), u = a(null);
 	return n(() => {
 		if (!i) return;
@@ -810,7 +1099,7 @@ var B = ({ open: e, onClose: t, onSubmit: n }) => {
 			style: { fontFamily: e },
 			children: [/* @__PURE__ */ c("span", {
 				className: "sg-font-picker-toggle-label",
-				children: H(e)
+				children: $(e)
 			}), /* @__PURE__ */ c("span", {
 				className: "sg-font-picker-toggle-caret",
 				children: i ? "▲" : "▼"
@@ -824,11 +1113,11 @@ var B = ({ open: e, onClose: t, onSubmit: n }) => {
 					t(n), s(!1);
 				},
 				style: { fontFamily: n },
-				children: H(n)
+				children: $(n)
 			}) }, n))
 		})]
 	});
-}, W = ({ checked: e, onChange: t, label: n }) => /* @__PURE__ */ l("label", {
+}, le = ({ checked: e, onChange: t, label: n }) => /* @__PURE__ */ l("label", {
 	className: "sg-toggle",
 	children: [
 		/* @__PURE__ */ c("input", {
@@ -846,6 +1135,18 @@ var B = ({ open: e, onClose: t, onSubmit: n }) => {
 			children: n
 		})
 	]
-});
+}), ue = ({ className: e }) => {
+	let { t, i18n: n } = d("sg", { i18n: L });
+	return /* @__PURE__ */ c("select", {
+		className: ["sg-language-switcher", e].filter(Boolean).join(" "),
+		value: n.resolvedLanguage,
+		onChange: (e) => n.changeLanguage(e.target.value),
+		"aria-label": t("languageSwitcher.label"),
+		children: j.map((e) => /* @__PURE__ */ c("option", {
+			value: e,
+			children: M[e]
+		}, e))
+	});
+};
 //#endregion
-export { E as AppAccessGate, O as AppLauncher, k as Authenticator, f as Button, V as ColorPicker, v as CookieConsent, D as DEFAULT_APPS_URL, C as DEFAULT_HEIMDALL_URL, U as FontPicker, p as Footer, x as Header, d as Icon, M as Input, j as Modal, N as PasswordInput, z as QuadratoHeader, b as SGFooter, S as SGHeader, B as SetPasswordModal, W as Toggle };
+export { Y as AVATAR_CHANGE_EVENT, B as AppAccessGate, H as AppLauncher, U as Authenticator, h as Button, Q as ColorPicker, x as CookieConsent, V as DEFAULT_APPS_URL, R as DEFAULT_HEIMDALL_URL, ce as FontPicker, g as Footer, w as Header, m as Icon, G as Input, N as LANGUAGE_COOKIE, M as LANGUAGE_NAMES, ue as LanguageSwitcher, W as Modal, K as PasswordInput, Z as QuadratoHeader, C as SGFooter, T as SGHeader, j as SUPPORTED_LANGUAGES, se as SetPasswordModal, le as Toggle, ne as createI18n, F as readLanguageCookie, L as sgI18n };

package/dist/sg-components.css

@@ -1,2 +1,2 @@
-.custom-button{border-radius:var(--button-radius);background:var(--button-bg);color:var(--button-color);cursor:pointer;font-size:var(--primary-font);font-weight:600;font-family:var(--font-family);box-shadow:var(--button-shadow);transition:background .15s var(--button-ease-standard), transform var(--button-ease-bounce) .2s;border:none;padding:8px 20px}.custom-button:hover:not(:disabled){background:var(--button-bg-hover);transform:translateY(-1px)}.custom-button:active:not(:disabled){transform:scale(.97)}.custom-button:disabled{opacity:.6;cursor:default}.custom-button-with-icon{align-items:center;gap:8px;display:inline-flex}.custom-button-label-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sg-icon{vertical-align:middle;flex-shrink:0;display:inline-block}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:#1ea7fd;text-decoration:none}.footer a:hover{text-decoration:underline}.cookie-consent{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;z-index:1000;box-sizing:border-box;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.cookie-consent-text{flex:320px;margin:0}.cookie-consent a{color:#1ea7fd;text-decoration:none}.cookie-consent a:hover{text-decoration:underline}.cookie-consent-accept{flex:none}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{z-index:100;width:100%;font-size:var(--font-size);background-color:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:#333;font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:#007acc}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.sg-access-gate{z-index:998;box-sizing:border-box;background:var(--primary-bg);font-family:var(--font-family);justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.sg-access-gate-card{border:1px solid var(--primary-border);border-radius:calc(var(--radius) * 3);background:var(--modal-bg);max-width:420px;box-shadow:var(--shadow-2);text-align:center;padding:24px}.sg-access-gate-card h2{font-size:var(--font-size-h1);color:var(--modal-title-color);margin:0 0 12px}.sg-access-gate-card p{color:var(--ink-muted);margin:0 0 16px}.sg-access-gate-card .sg-access-gate-error{color:#c0392b}.sg-app-launcher{font-family:var(--font-family);position:relative}.sg-app-launcher-toggle{width:40px;height:40px;color:var(--ink-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex}.sg-app-launcher-toggle:hover,.sg-app-launcher-toggle[aria-expanded=true]{background:var(--primary-hover-bg)}.sg-app-launcher-panel{z-index:1000;box-sizing:border-box;border:1px solid var(--primary-border);border-radius:calc(var(--radius) * 3);background:var(--modal-bg);width:320px;max-width:calc(100vw - 24px);max-height:70vh;box-shadow:var(--shadow-2);padding:12px;position:absolute;top:calc(100% + 8px);right:0;overflow-y:auto}.sg-app-launcher-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none;display:grid}.sg-app-launcher-app{border-radius:var(--radius);color:inherit;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;text-decoration:none;display:flex}.sg-app-launcher-app:hover,.sg-app-launcher-app:focus-visible{background:var(--primary-hover-bg)}.sg-app-launcher-app.current{background:var(--accent-soft)}.sg-app-launcher-tile{border-radius:var(--radius);background:var(--accent);color:#fff;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;font-weight:600;display:flex}.sg-app-launcher-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:13px;overflow:hidden}.sg-app-launcher-message{color:var(--ink-muted);margin:0;padding:8px;font-size:13px}.sg-authenticator-button{font-size:.9rem;font-family:var(--font-family);border:1px solid var(--primary-border);border-radius:var(--radius);background:var(--primary-bg);color:#333;cursor:pointer;padding:.4rem 1rem;transition:background .15s,border-color .15s}.sg-authenticator-button:hover{background:var(--primary-hover-bg);border-color:var(--ink-muted)}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.25s ease-out sg-modal-overlay-fade-in;display:flex;position:fixed;top:0;left:0}.modal-overlay.modal-overlay-closing{animation:.22s ease-in forwards sg-modal-overlay-fade-out}.modal-content{--drag-x:0px;--drag-y:0px;background:var(--modal-bg);border-radius:var(--primary-radius);font-size:var(--primary-font);min-width:320px;max-width:calc(100vw - 40px);max-height:90vh;transform:translate(var(--drag-x), var(--drag-y));flex-direction:column;animation:.3s ease-out sg-modal-slide-in;display:flex;overflow:hidden;box-shadow:0 2px 16px #00000026}.modal-content.modal-content-closing{animation:.22s ease-in forwards sg-modal-slide-out}@keyframes sg-modal-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sg-modal-overlay-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sg-modal-slide-in{0%{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}to{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}}@keyframes sg-modal-slide-out{0%{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}to{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}}.modal-header{background:var(--primary-bg);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);cursor:grab;touch-action:none;flex:none;align-items:center;gap:8px;padding:16px;display:flex}.modal-header-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.modal-icon{color:var(--modal-title-color);display:inline-flex}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);font-size:var(--primary-font);flex:1;margin:0}.modal-close{cursor:pointer;color:var(--modal-title-color);background:0 0;border:none;padding:4px 8px;font-size:20px;line-height:1}.modal-close:disabled{cursor:default;opacity:.6}.modal-children{font-family:var(--font-family);padding:16px;overflow-y:auto}.modal-footer{border-top:1px solid var(--primary-border);flex-wrap:wrap;flex:none;justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field--invalid{background-color:#ffe5e5;border-color:#c00}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{box-sizing:border-box;border-radius:var(--radius);width:100%;font-size:var(--primary-font);border-style:solid;border-width:1px;padding:8px}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.header.quadrato-header{z-index:999}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-username{font-size:var(--font-size);color:#333;transition:color .2s}.quadrato-header-username:hover{color:var(--accent)}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:#d32f2f;font-size:var(--primary-font);margin:0}.sg-color-picker{font-family:var(--font-family);position:relative}.sg-color-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-family:inherit;font-size:13px;display:flex}.sg-color-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-color-picker-swatch{border:1px solid #00000026;border-radius:4px;flex:none;width:18px;height:18px}.sg-color-picker-popover{z-index:30;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--shadow-1);width:170px;padding:10px;position:absolute;top:calc(100% + 4px);left:0}.sg-color-picker-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.sg-color-picker-swatch-button{cursor:pointer;border:1px solid #00000026;border-radius:4px;width:20px;height:20px;padding:0}.sg-color-picker-swatch-button.active{border:2px solid var(--accent)}.sg-color-picker-custom{border-top:1px solid var(--input-border);color:var(--ink-muted);cursor:pointer;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding-top:8px;font-size:11px;display:flex}.sg-color-picker-custom input[type=color]{cursor:pointer;border:none;width:26px;height:20px;padding:0}.sg-font-picker{font-family:var(--font-family);position:relative}.sg-font-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-size:13px;display:flex}.sg-font-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-font-picker-toggle-caret{opacity:.5;flex:none;font-size:10px}.sg-font-picker-list{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);max-height:260px;box-shadow:var(--shadow-1);z-index:30;margin:0;padding:4px 0;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.sg-font-picker-option{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:none;padding:8px 10px;font-size:15px;display:block}.sg-font-picker-option.active{background:var(--accent-soft)}:root{--unit:3px;--primary-bg:#f5f5f5;--primary-border:#ccc;--radius:calc(var(--unit) * 2);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:#e0e0e0;--modal-bg:#fff;--modal-overlay:#0000004d;--modal-title-color:#222;--input-bg:#fff;--input-border:#ccc;--input-radius:var(--radius);--input-font:1rem;--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5);--button-bg:#6f9cf7;--button-bg-hover:#5480e6;--button-color:#fff;--button-radius:999px;--button-shadow:0 1px 2px #5480e61f, 0 1px 3px #5480e61a;--button-ease-standard:cubic-bezier(.4, 0, .2, 1);--button-ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--accent:#3d5fc4;--accent-strong:#2e4aa0;--accent-soft:#e2e7f8;--ink-muted:#647089;--shadow-1:0 1px 2px #0f172a14, 0 1px 3px #0f172a0f;--shadow-2:0 4px 12px #0f172a1f}.theme-dark{--primary-bg:#222;--primary-border:#444;--primary-font:1rem;--font-family:"Inter", Arial, sans-serif;--primary-hover-bg:#333;--modal-bg:#222;--modal-title-color:#fff;--input-bg:#333;--input-border:#555;--input-font:1rem;--button-bg:#6f9cf7;--button-bg-hover:#86aefc;--button-color:#fff;--accent:#6f9cf7;--accent-strong:#86aefc;--accent-soft:#6f9cf72e;--ink-muted:#9aa3b5;--shadow-1:0 1px 2px #0000004d, 0 1px 3px #0000003d;--shadow-2:0 4px 12px #0006}.sg-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family);align-items:center;gap:6px;display:flex}.sg-toggle-input{opacity:0;width:1px;height:1px;position:absolute}.sg-toggle-track{background:var(--input-border);border-radius:999px;flex:none;width:34px;height:20px;transition:background .15s cubic-bezier(.4,0,.2,1);position:relative}.sg-toggle-input:checked+.sg-toggle-track{background:var(--accent)}.sg-toggle-thumb{background:var(--input-bg);width:16px;height:16px;box-shadow:var(--shadow-1);border-radius:50%;transition:left .15s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;left:2px}.sg-toggle-input:checked+.sg-toggle-track .sg-toggle-thumb{left:16px}.sg-toggle-input:focus-visible+.sg-toggle-track{outline:2px solid var(--accent-strong);outline-offset:2px}.sg-toggle-label{color:var(--ink-muted);white-space:nowrap;font-size:13px}
+.custom-button{border-radius:var(--button-radius);background:var(--button-bg);color:var(--button-color);cursor:pointer;font-size:var(--primary-font);font-weight:600;font-family:var(--font-family);box-shadow:var(--button-shadow);transition:background .15s var(--button-ease-standard), transform var(--button-ease-bounce) .2s;border:none;padding:8px 20px}.custom-button:hover:not(:disabled){background:var(--button-bg-hover);transform:translateY(-1px)}.custom-button:active:not(:disabled){transform:scale(.97)}.custom-button:disabled{opacity:.6;cursor:default}.custom-button-with-icon{align-items:center;gap:8px;display:inline-flex}.custom-button-label-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sg-icon{vertical-align:middle;flex-shrink:0;display:inline-block}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:var(--sg-text-secondary);justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:var(--sg-link);text-decoration:none}.footer a:hover{text-decoration:underline}.cookie-consent{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:var(--sg-text-secondary);z-index:1000;box-sizing:border-box;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.cookie-consent-text{flex:320px;margin:0}.cookie-consent a{color:var(--sg-link);text-decoration:none}.cookie-consent a:hover{text-decoration:underline}.cookie-consent-accept{flex:none}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{background-color:var(--sg-surface);width:100%;color:var(--sg-text);border-bottom:1px solid var(--sg-border-subtle);box-shadow:var(--sg-shadow-1);z-index:100;font-size:var(--font-size);position:sticky;top:0}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:var(--sg-text);font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:var(--accent)}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.sg-access-gate{z-index:998;box-sizing:border-box;background:var(--primary-bg);font-family:var(--font-family);justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.sg-access-gate-card{border:1px solid var(--primary-border);border-radius:calc(var(--radius) * 3);background:var(--modal-bg);max-width:420px;box-shadow:var(--shadow-2);color:var(--sg-text);text-align:center;padding:24px}.sg-access-gate-card h2{font-size:var(--font-size-h1);color:var(--modal-title-color);margin:0 0 12px}.sg-access-gate-card p{color:var(--ink-muted);margin:0 0 16px}.sg-access-gate-card .sg-access-gate-error{color:var(--sg-danger)}.sg-app-launcher{font-family:var(--font-family);position:relative}.sg-app-launcher-toggle{width:40px;height:40px;color:var(--ink-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex}.sg-app-launcher-toggle:hover,.sg-app-launcher-toggle[aria-expanded=true]{background:var(--primary-hover-bg)}.sg-app-launcher-panel{z-index:1000;box-sizing:border-box;border:1px solid var(--primary-border);border-radius:calc(var(--radius) * 3);background:var(--modal-bg);width:320px;max-width:calc(100vw - 24px);max-height:70vh;color:var(--sg-text);box-shadow:var(--shadow-2);padding:12px;position:absolute;top:calc(100% + 8px);right:0;overflow-y:auto}.sg-app-launcher-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none;display:grid}.sg-app-launcher-app{border-radius:var(--radius);color:inherit;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;text-decoration:none;display:flex}.sg-app-launcher-app:hover,.sg-app-launcher-app:focus-visible{background:var(--primary-hover-bg)}.sg-app-launcher-app.current{background:var(--accent-soft)}.sg-app-launcher-tile{border-radius:var(--radius);background:var(--accent);width:40px;height:40px;color:var(--sg-on-accent);justify-content:center;align-items:center;font-size:18px;font-weight:600;display:flex}.sg-app-launcher-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:13px;overflow:hidden}.sg-app-launcher-message{color:var(--ink-muted);margin:0;padding:8px;font-size:13px}.sg-app-launcher-tile{position:relative}.sg-app-launcher-app.locked .sg-app-launcher-tile{background:var(--ink-muted)}.sg-app-launcher-app.locked .sg-app-launcher-name{color:var(--ink-muted)}.sg-app-launcher-lock{border:2px solid var(--modal-bg);background:var(--modal-title-color);width:20px;height:20px;color:var(--modal-bg);border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;bottom:-6px;right:-6px}.sg-visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.sg-authenticator-button{font-size:.9rem;font-family:var(--font-family);border:1px solid var(--primary-border);border-radius:var(--radius);background:var(--primary-bg);color:var(--sg-text);cursor:pointer;padding:.4rem 1rem;transition:background .15s,border-color .15s}.sg-authenticator-button:hover{background:var(--primary-hover-bg);border-color:var(--ink-muted)}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.25s ease-out sg-modal-overlay-fade-in;display:flex;position:fixed;top:0;left:0}.modal-overlay.modal-overlay-closing{animation:.22s ease-in forwards sg-modal-overlay-fade-out}.modal-content{--drag-x:0px;--drag-y:0px;background:var(--modal-bg);border-radius:var(--primary-radius);font-size:var(--primary-font);min-width:320px;max-width:calc(100vw - 40px);max-height:90vh;color:var(--sg-text);box-shadow:var(--sg-shadow-3);transform:translate(var(--drag-x), var(--drag-y));flex-direction:column;animation:.3s ease-out sg-modal-slide-in;display:flex;overflow:hidden}.modal-content.modal-content-closing{animation:.22s ease-in forwards sg-modal-slide-out}@keyframes sg-modal-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sg-modal-overlay-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sg-modal-slide-in{0%{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}to{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}}@keyframes sg-modal-slide-out{0%{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}to{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}}.modal-header{background:var(--primary-bg);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);cursor:grab;touch-action:none;flex:none;align-items:center;gap:8px;padding:16px;display:flex}.modal-header-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.modal-icon{color:var(--modal-title-color);display:inline-flex}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);font-size:var(--primary-font);flex:1;margin:0}.modal-close{cursor:pointer;color:var(--modal-title-color);background:0 0;border:none;padding:4px 8px;font-size:20px;line-height:1}.modal-close:disabled{cursor:default;opacity:.6}.modal-children{font-family:var(--font-family);padding:16px;overflow-y:auto}.modal-footer{border-top:1px solid var(--primary-border);flex-wrap:wrap;flex:none;justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field--invalid{background-color:var(--sg-danger-soft);border-color:var(--sg-danger)}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{box-sizing:border-box;border-radius:var(--radius);border-style:solid;border-width:1px;border-color:var(--input-border);background-color:var(--input-bg);width:100%;color:var(--sg-text);font-size:var(--primary-font);padding:8px}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.header.quadrato-header{z-index:999}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-avatar{object-fit:cover;width:32px;height:32px;box-shadow:var(--sg-shadow-1);border-radius:50%}.quadrato-header-username{font-size:var(--font-size);color:var(--sg-text);transition:color .2s}.quadrato-header-username:hover{color:var(--accent)}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:var(--sg-danger);font-size:var(--primary-font);margin:0}.sg-color-picker{font-family:var(--font-family);position:relative}.sg-color-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-family:inherit;font-size:13px;display:flex}.sg-color-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-color-picker-swatch{border:1px solid var(--sg-border-subtle);border-radius:4px;flex:none;width:18px;height:18px}.sg-color-picker-popover{z-index:30;background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);box-shadow:var(--shadow-1);width:170px;padding:10px;position:absolute;top:calc(100% + 4px);left:0}.sg-color-picker-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.sg-color-picker-swatch-button{border:1px solid var(--sg-border-subtle);cursor:pointer;border-radius:4px;width:20px;height:20px;padding:0}.sg-color-picker-swatch-button.active{border:2px solid var(--accent)}.sg-color-picker-custom{border-top:1px solid var(--input-border);color:var(--ink-muted);cursor:pointer;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding-top:8px;font-size:11px;display:flex}.sg-color-picker-custom input[type=color]{cursor:pointer;border:none;width:26px;height:20px;padding:0}.sg-font-picker{font-family:var(--font-family);position:relative}.sg-font-picker-toggle{border-radius:var(--input-radius);border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:inherit;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;font-size:13px;display:flex}.sg-font-picker-toggle-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sg-font-picker-toggle-caret{opacity:.5;flex:none;font-size:10px}.sg-font-picker-list{background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--input-radius);max-height:260px;box-shadow:var(--shadow-1);z-index:30;margin:0;padding:4px 0;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto}.sg-font-picker-option{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:none;padding:8px 10px;font-size:15px;display:block}.sg-font-picker-option.active{background:var(--accent-soft)}.sg-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family);align-items:center;gap:6px;display:flex}.sg-toggle-input{opacity:0;width:1px;height:1px;position:absolute}.sg-toggle-track{background:var(--input-border);border-radius:999px;flex:none;width:34px;height:20px;transition:background .15s cubic-bezier(.4,0,.2,1);position:relative}.sg-toggle-input:checked+.sg-toggle-track{background:var(--accent)}.sg-toggle-thumb{background:var(--input-bg);width:16px;height:16px;box-shadow:var(--shadow-1);border-radius:50%;transition:left .15s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;left:2px}.sg-toggle-input:checked+.sg-toggle-track .sg-toggle-thumb{left:16px}.sg-toggle-input:focus-visible+.sg-toggle-track{outline:2px solid var(--accent-strong);outline-offset:2px}.sg-toggle-label{color:var(--ink-muted);white-space:nowrap;font-size:13px}:root{--sg-color-white:#fff;--sg-color-black:#000;--sg-color-gray-50:#f5f5f5;--sg-color-gray-100:#e1e5e9;--sg-color-gray-150:#e0e0e0;--sg-color-gray-200:#e6e6e6;--sg-color-gray-300:#ccc;--sg-color-gray-350:#bdbdbd;--sg-color-gray-400:#9aa3b5;--sg-color-gray-500:#647089;--sg-color-gray-600:#555;--sg-color-gray-650:#444;--sg-color-gray-700:#333;--sg-color-gray-750:#2a2a2a;--sg-color-gray-800:#222;--sg-color-gray-900:#1a1a1a;--sg-color-blue-50:#e2e7f8;--sg-color-blue-300:#86aefc;--sg-color-blue-400:#6f9cf7;--sg-color-blue-500:#5480e6;--sg-color-blue-600:#3d5fc4;--sg-color-blue-700:#2e4aa0;--sg-color-sky-500:#1ea7fd;--sg-color-red-50:#ffe5e5;--sg-color-red-400:#e57373;--sg-color-red-600:#c0392b;--sg-bg:var(--sg-color-white);--sg-surface:var(--sg-color-white);--sg-surface-muted:var(--sg-color-gray-50);--sg-surface-hover:var(--sg-color-gray-150);--sg-border:var(--sg-color-gray-300);--sg-border-subtle:var(--sg-color-gray-100);--sg-text:var(--sg-color-gray-700);--sg-text-heading:var(--sg-color-gray-800);--sg-text-secondary:var(--sg-color-gray-600);--sg-text-muted:var(--sg-color-gray-500);--sg-accent:var(--sg-color-blue-600);--sg-accent-strong:var(--sg-color-blue-700);--sg-accent-soft:var(--sg-color-blue-50);--sg-on-accent:var(--sg-color-white);--sg-action:var(--sg-color-blue-400);--sg-action-hover:var(--sg-color-blue-500);--sg-link:var(--sg-color-sky-500);--sg-danger:var(--sg-color-red-600);--sg-danger-soft:var(--sg-color-red-50);--sg-overlay:#0000004d;--sg-shadow-1:0 1px 2px #0f172a14, 0 1px 3px #0f172a0f;--sg-shadow-2:0 4px 12px #0f172a1f;--sg-shadow-3:0 2px 16px #00000026;--sg-action-shadow:0 1px 2px #5480e61f, 0 1px 3px #5480e61a;--unit:3px;--radius:calc(var(--unit) * 2);--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5);--primary-bg:var(--sg-surface-muted);--primary-border:var(--sg-border);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:var(--sg-surface-hover);--modal-bg:var(--sg-surface);--modal-overlay:var(--sg-overlay);--modal-title-color:var(--sg-text-heading);--input-bg:var(--sg-surface);--input-border:var(--sg-border);--input-radius:var(--radius);--input-font:1rem;--button-bg:var(--sg-action);--button-bg-hover:var(--sg-action-hover);--button-color:var(--sg-on-accent);--button-radius:999px;--button-shadow:var(--sg-action-shadow);--button-ease-standard:cubic-bezier(.4, 0, .2, 1);--button-ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--accent:var(--sg-accent);--accent-strong:var(--sg-accent-strong);--accent-soft:var(--sg-accent-soft);--ink-muted:var(--sg-text-muted);--shadow-1:var(--sg-shadow-1);--shadow-2:var(--sg-shadow-2)}:root[data-theme=dark]{--sg-bg:var(--sg-color-gray-900);--sg-surface:var(--sg-color-gray-800);--sg-surface-muted:var(--sg-color-gray-750);--sg-surface-hover:var(--sg-color-gray-700);--sg-border:var(--sg-color-gray-600);--sg-border-subtle:var(--sg-color-gray-650);--sg-text:var(--sg-color-gray-200);--sg-text-heading:var(--sg-color-white);--sg-text-secondary:var(--sg-color-gray-350);--sg-text-muted:var(--sg-color-gray-400);--sg-accent:var(--sg-color-blue-400);--sg-accent-strong:var(--sg-color-blue-300);--sg-accent-soft:#6f9cf72e;--sg-action-hover:var(--sg-color-blue-300);--sg-link:var(--sg-color-blue-300);--sg-danger:var(--sg-color-red-400);--sg-danger-soft:#e5737326;--sg-overlay:#0009;--sg-shadow-1:0 1px 2px #0000004d, 0 1px 3px #0000003d;--sg-shadow-2:0 4px 12px #0006;--sg-shadow-3:0 2px 16px #00000080}.sg-language-switcher{border:1px solid var(--input-border);border-radius:var(--input-radius);background:var(--input-bg);color:var(--sg-text);font-family:var(--font-family);font-size:var(--primary-font);cursor:pointer;padding:4px 8px}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensorario/sg-components",
-  "version": "0.0.102",
+  "version": "0.0.104",
   "type": "module",
   "private": false,
   "scripts": {
@@ -25,12 +25,21 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
       "style": "./dist/sg-components.css"
-    }
+    },
+    "./style.css": "./dist/sg-components.css",
+    "./dist/sg-components.css": "./dist/sg-components.css"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "dependencies": {
     "react": "^19.2.6",
     "react-dom": "^19.2.6"
   },
+  "peerDependencies": {
+    "i18next": ">=26",
+    "react-i18next": ">=17"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.3.0",
     "@eslint/js": "^10.0.1",
@@ -54,7 +63,9 @@
     "eslint-plugin-react-refresh": "^0.5.2",
     "eslint-plugin-storybook": "^10.5.10",
     "globals": "^17.6.0",
+    "i18next": "^26.4.2",
     "playwright": "^1.60.0",
+    "react-i18next": "^17.0.15",
     "rollup": "^4.60.4",
     "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",