viur-ui 0.0.1 → 0.0.2

package/src/request/envelope.js

@@ -64,7 +64,7 @@ export function v1SelectionFollow(body) {
     if (!String(bone?.["type"] ?? "").startsWith("select")) continue
     const chosen = values?.[name]
     if (typeof chosen !== "string" || !/^(\/|https?:\/\/)/.test(chosen)) continue
-    // Nur wenn der Wert tatsächlich eine der angebotenen Ziel-URLs ist.
+    // Only if the value actually is one of the offered target URLs.
     if (bone?.["values"] && Object.prototype.hasOwnProperty.call(bone["values"], chosen)) return chosen
   }
   return null
@@ -190,11 +190,11 @@ export function normalizeEnvelope(data) {
   out["action"] = action
   out["status"] = status
   out["errors"] = normalizeErrors(data["errors"])
-  // Ziel des Schritts. v1 legt es je nach Stufe anderswo ab:
-  //   next_url          – vom Server gesetzt (z. B. Auswahl des zweiten Faktors)
-  //   params.action_url  – bei einem gerenderten Schritt, der selbst ein Ziel
-  //                        mitbringt (viur-core: der OTP-Schritt des zweiten
-  //                        Faktors kommt als `edit` mit action_url)
+  // Target of the step. v1 puts it in different places depending on the stage:
+  //   next_url          – set by the server (e.g. choice of the second factor)
+  //   params.action_url  – for a rendered step that brings its own target
+  //                        (viur-core: the OTP step of the second factor
+  //                        comes as `edit` with action_url)
   out["follow"] = data["follow"] ?? data["next_url"] ?? data["params"]?.["action_url"] ?? null
   out["structure"] = data["structure"] ?? null
 

package/src/request/request.js

@@ -126,14 +126,14 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
     }
 
     /**
-     * Struktur der Liste holen.
+     * Fetch the structure of the list.
      *
-     * Zwei Antwortformen sind unterwegs:
-     *   • aktuell:  `/<modul>/structure` rendert wie jede andere Aktion, also
+     * Two response shapes are in circulation:
+     *   • current:  `/<modul>/structure` renders like any other action, i.e.
      *     `{ action: "structure.view", values, structure }`
-     *   • historisch (getStructure): `{ viewSkel: {…}, editSkel: {…} }`
-     * Zusätzlich kann die Struktur eine PAAR-LISTE sein
-     * (`json.bone.structure.keytuples`) — normalizeStructure glättet das.
+     *   • historic (getStructure): `{ viewSkel: {…}, editSkel: {…} }`
+     * Additionally, the structure can be a PAIR LIST
+     * (`json.bone.structure.keytuples`) — normalizeStructure flattens that.
      */
     async function _fetchStructure() {
       const skeltype =
@@ -188,9 +188,9 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
             await _fetchStructure()
           }
           const list = responseData.data ?? []
-          // Manche Installationen liefern die Struktur in der Liste mit
-          // (Kompatibilitäts-Flag `json.bone.structure.inlists`) — dann ist der
-          // separate Aufruf oben umsonst gewesen, aber diese hier ist aktueller.
+          // Some installations deliver the structure along with the list
+          // (compatibility flag `json.bone.structure.inlists`) — then the
+          // separate call above was in vain, but this one is more current.
           if (responseData.structure) {
             structure.value = normalizeStructure(responseData.structure)
           }
@@ -218,8 +218,8 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
 
     const { isFetching, isFinished, error, execute: _execute, abort } = useViurFetch(listUrl, { immediate }).json()
 
-    /** Alles geladen: letzte Antwort da und kein Cursor mehr offen. Ab hier
-     *  dürfen Sortierung/Filter lokal auf dem Datensatz laufen. */
+    /** Everything loaded: last response is in and no cursor left open. From here
+     *  on, sorting/filtering may run locally on the dataset. */
     const complete = computed(() => isFinished.value && !cursor.value)
 
     const fetchResult = {
@@ -262,8 +262,8 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
       return executeAndThrow(fetchResult, _execute)
     }
 
-    /** Eine Seite nachladen; erkennt das ViUR-Ende (leere Seite mit derselben
-     *  Cursor-Marke) und löscht dann den Cursor. Liefert true bei Fortschritt. */
+    /** Load one more page; detects the ViUR end (empty page with the same
+     *  cursor marker) and then clears the cursor. Returns true on progress. */
     async function _advance() {
       if (!cursor.value) return false
       const before = data.value.length
@@ -279,8 +279,8 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
       return true
     }
 
-    /** Die nächsten `pages` Seiten laden (Standard: eine) — z. B. direkt als
-     *  Handler der DataTable-Cursor-Leiste: `@load-more="({ pages }) =>
+    /** Load the next `pages` pages (default: one) — e.g. directly as the
+     *  handler of the DataTable cursor bar: `@load-more="({ pages }) =>
      *  pages === 'all' ? list.nextAll() : list.next(pages)"`. */
     async function next(pages = 1) {
       let remaining = pages
@@ -289,10 +289,10 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
       }
     }
 
-    /** Alle restlichen Seiten laden ("Alles laden"). */
+    /** Load all remaining pages ("load everything"). */
     async function nextAll() {
       while (await _advance()) {
-        /* bis zum Ende */
+        /* until the end */
       }
     }
 
@@ -352,7 +352,7 @@ export function useTreeFetch(
   const isFinished = computed(() => nodes.isFinished.value && leaves.isFinished.value)
   const error = computed(() => nodes.error.value ?? leaves.error.value)
   const hasMore = computed(() => !!(nodes.cursor.value || leaves.cursor.value))
-  /** Beide Listen vollständig geladen — Sortierung/Filter dürfen lokal laufen. */
+  /** Both lists fully loaded — sorting/filtering may run locally. */
   const complete = computed(() => isFinished.value && !hasMore.value)
 
   function _both(fn) {
@@ -363,9 +363,9 @@ export function useTreeFetch(
     return _both((l) => l.execute())
   }
 
-  // Eine Seite nachladen: erst Nodes zu Ende, dann Leaves. Das ViUR-Ende
-  // (leere Seite mit derselben Cursor-Marke) erkennt useListFetch.next()
-  // selbst und löscht dann seinen Cursor — hier zählt nur der Fortschritt.
+  // Load one more page: nodes to the end first, then leaves. useListFetch.next()
+  // detects the ViUR end (empty page with the same cursor marker) itself and
+  // then clears its cursor — only progress counts here.
   async function _nextOf(list) {
     const before = list.data.value.length
     await list.next()
@@ -377,7 +377,7 @@ export function useTreeFetch(
     if (leaves.cursor.value) await _nextOf(leaves)
   }
 
-  /** Alle restlichen Seiten beider Listen laden ("Alles laden"). */
+  /** Load all remaining pages of both lists ("load everything"). */
   async function nextAll() {
     while (nodes.cursor.value) {
       if (!(await _nextOf(nodes))) break

package/src/translations/de.js

@@ -12,6 +12,7 @@ export default {
     list: "Auflisten",
     addEmpty: "Neuer Eintrag",
     no_entries: "Keine Einträge",
+    errors_summary: "Fehler",
   },
   lang: "Sprache",
   bones: {
@@ -27,6 +28,13 @@ export default {
     phone: {
       placeholder: "Telefon/Fax",
     },
+    password: {
+      mismatch: "Die eingegebenen Passwörter stimmen nicht überein.",
+      empty: "Das eingegebene Passwort ist leer.",
+    },
+    text: {
+      openInNewWindow: "Link in neuem Fenster öffnen",
+    },
   },
 
   errors: {
@@ -77,6 +85,10 @@ export default {
     collapseRow: "Zeile einklappen",
     expandRow: "Zeile ausklappen",
     noData: "Keine Daten",
+    noValues: "Keine Werte",
+    clear: "Leeren",
+    filterEquals: "genau …",
+    filterContains: "enthält …",
     noResults: "Keine Treffer",
     filterFrom: "von",
     filterTo: "bis",
@@ -108,6 +120,7 @@ export default {
     path: "Pfad",
     navigation: "Navigation",
     uploadHint: "Dateien hier ablegen",
+    name: "Name",
   },
   form: {
     next: "Weiter",
@@ -122,6 +135,7 @@ export default {
       original: "Original Sprache ({lang}):",
       target: "Zielsprache ({lang}):",
       run: "Übersetzen",
+      name: "Übersetzen",
       applyNext: "Übernehmen und nächste leere Sprache",
       apply: "Ziel für {lang} übernehmen",
     },
@@ -130,6 +144,23 @@ export default {
       instructions: "weitere Anweisungen",
       run: "Beschreibung erstellen",
       apply: "Beschreibung übernehmen",
+      name: "Bildbeschreibung erstellen",
+      title: "Bild beschreiben",
+    },
+    debug: {
+      name: "Debug",
+      title: "Bone Debug-Informationen anzeigen",
+      structure: "Bone-Struktur",
+      value: "Bone-Wert",
+      state: "Bone-Status",
+      context: "Kontext",
+    },
+    placeholder: {
+      name: "Platzhalter",
+      title: "Platzhalter (TODO: entfernen)",
+    },
+    delete: {
+      name: "Löschen",
     },
   },
   messages: {

package/src/translations/en.js

@@ -12,6 +12,7 @@ export default {
     list: "List",
     addEmpty: "New entry",
     no_entries: "No entries",
+    errors_summary: "Errors",
   },
   lang: "Language",
   bones: {
@@ -27,6 +28,13 @@ export default {
     phone: {
       placeholder: "Phone/Fax",
     },
+    password: {
+      mismatch: "The passwords do not match.",
+      empty: "The password is empty.",
+    },
+    text: {
+      openInNewWindow: "Open link in new window",
+    },
   },
 
   errors: {
@@ -77,6 +85,10 @@ export default {
     collapseRow: "Collapse row",
     expandRow: "Expand row",
     noData: "No data",
+    noValues: "No values",
+    clear: "Clear",
+    filterEquals: "exactly …",
+    filterContains: "contains …",
     noResults: "No matches",
     filterFrom: "from",
     filterTo: "to",
@@ -108,6 +120,7 @@ export default {
     path: "Path",
     navigation: "Navigation",
     uploadHint: "Drop files here",
+    name: "Name",
   },
   form: {
     next: "Next",
@@ -121,6 +134,7 @@ export default {
       original: "Source language ({lang}):",
       target: "Target language ({lang}):",
       run: "Translate",
+      name: "Translate",
       applyNext: "Apply and go to next empty language",
       apply: "Apply target for {lang}",
     },
@@ -129,6 +143,23 @@ export default {
       instructions: "additional instructions",
       run: "Generate description",
       apply: "Apply description",
+      name: "Generate image description",
+      title: "Describe image",
+    },
+    debug: {
+      name: "Debug",
+      title: "Show bone debug information",
+      structure: "Bone structure",
+      value: "Bone value",
+      state: "Bone state",
+      context: "Context",
+    },
+    placeholder: {
+      name: "Placeholder",
+      title: "Placeholder (TODO: remove)",
+    },
+    delete: {
+      name: "Delete",
     },
   },
   messages: {

package/src/user/LoginScreen.d.vue.ts

@@ -1,52 +1,52 @@
 import type { DefineComponent } from "vue"
 
-/** Props von LoginScreen.vue (siehe defineProps dort). */
+/** Props of LoginScreen.vue (see defineProps there). */
 export interface LoginScreenProps {
-  /** Überschrift der Karte; per `header`-Slot ersetzbar. */
+  /** Heading of the card; replaceable via the `header` slot. */
   title?: string
   /**
-   * Endpunkt unterhalb des `user`-Moduls, der den Ablauf startet. Envelope v2
-   * fährt die ganze Kette ab "login". viur-core 3.9 (klassisches v1) antwortet
-   * auf "login" mit der Provider-Auswahl; die Kette führt der LoginScreen dann
-   * selbst wie vi-vue-utils (Passwort, Passwort vergessen, zweiter Faktor).
+   * Endpoint below the `user` module that starts the flow. Envelope v2
+   * runs the whole chain from "login". viur-core 3.9 (classic v1) answers
+   * "login" with the provider choice; the LoginScreen then drives the chain
+   * itself like vi-vue-utils (password, lost password, second factor).
    */
   action?: string
-  /** Renderer für die Requests; Standard: VITE_DEFAULT_RENDERER oder "json". */
+  /** Renderer for the requests; default: VITE_DEFAULT_RENDERER or "json". */
   renderer?: string | null
-  /** Protokollversion festnageln; null → unversioniert (Server wählt v2). */
+  /** Pin the protocol version; null → unversioned (server picks v2). */
   version?: string | number | null
   /**
-   * OAuth-Client-ID für „Sign in with Google". Ohne Angabe wird die vom Server
-   * per `/vi/config` ("admin.user.google.clientID") gelieferte ID genutzt;
-   * `false` blendet den Knopf immer aus.
+   * OAuth client ID for "Sign in with Google". If omitted, the ID supplied by
+   * the server via `/vi/config` ("admin.user.google.clientID") is used;
+   * `false` always hides the button.
    */
   googleClientId?: string | false | null
   /**
-   * Hintergrundbild der App, falls die Konfiguration keines setzt
-   * ("admin.login.background" leer). Wie dort: absolute URLs bleiben, "/…" ist
-   * ein Pfad auf dem Backend, alles andere ein Asset der App (unter BASE_URL).
+   * Background image of the app, in case the configuration doesn't set one
+   * ("admin.login.background" empty). As there: absolute URLs stay, "/…" is
+   * a path on the backend, anything else an asset of the app (under BASE_URL).
    */
   backgroundImage?: string | null
-  /** Logo über dem Login, falls "admin.login.logo" leer ist (Auflösung wie oben). */
+  /** Logo above the login, in case "admin.login.logo" is empty (resolved as above). */
   logo?: string | null
-  /** Fortschrittsleiste des Multistep-Formulars zeigen. */
+  /** Show the progress bar of the multistep form. */
   showSteps?: boolean
-  /** Beim Mounten eine bestehende Session prüfen und den Login überspringen. */
+  /** On mount, check for an existing session and skip the login. */
   autoStart?: boolean
   /**
-   * Ziel nach erfolgreicher Anmeldung (auch wenn `autoStart` eine bestehende
-   * Session findet). Läuft über vue-router, falls die Anwendung einen hat,
-   * sonst über `location`. Ohne Angabe bleibt die Ansicht stehen und der
-   * Aufrufer entscheidet in `@success`.
+   * Target after a successful login (also when `autoStart` finds an existing
+   * session). Goes through vue-router if the application has one,
+   * otherwise through `location`. If omitted, the view stays put and the
+   * caller decides in `@success`.
    */
   redirect?: string
 }
 
-/** Ereignisse als `on*`-Props, damit `@success` / `@error` im Template typen. */
+/** Events as `on*` props so that `@success` / `@error` are typed in the template. */
 export interface LoginScreenEmitProps {
-  /** Angemeldet — mit den Werten des UserSkel. */
+  /** Logged in — with the values of the UserSkel. */
   onSuccess?: (user: Record<string, any> | null) => void
-  /** Login fehlgeschlagen (Formularfehler, Transport, "google"). */
+  /** Login failed (form error, transport, "google"). */
   onError?: (error: unknown) => void
 }
 

package/src/user/LoginScreen.vue

@@ -138,8 +138,7 @@
           @failed="onFailed"
         >
           <!-- Pass the form's own slots through so an app can supply its own
-               chrome (the default action bar is Shoelace; a WebAwesome app
-               replaces it here). Only forwarded when the consumer provides the
+               chrome (e.g. its own action bar). Only forwarded when the consumer provides the
                slot, otherwise ViForm keeps its default. -->
           <template
             v-if="$slots.actions"
@@ -244,8 +243,8 @@ const emit = defineEmits(["success", "error"])
 const store = useUserStore()
 const configStore = useConfigStore()
 const { t } = useI18n()
-// Optional: ohne installierten Router ist das undefined — dann wird per
-// location navigiert.
+// Optional: without an installed router this is undefined — navigation then
+// happens via location.
 const router = useRouter()
 
 const state = reactive({
@@ -306,9 +305,9 @@ function onFailed(error) {
 }
 
 /**
- * Nach dem Anmelden weiterleiten, wenn `redirect` gesetzt ist. Läuft NACH dem
- * success-Emit, damit der Aufrufer den Benutzer noch in seinen eigenen Zustand
- * übernehmen kann (Rechte, Persona-Sichtbarkeit), bevor das Ziel rendert.
+ * Redirect after login if `redirect` is set. Runs AFTER the success emit so
+ * the caller can still take the user into its own state (access rights,
+ * persona visibility) before the target renders.
  */
 async function goRedirect() {
   if (!props.redirect) return

package/src/user/store.d.ts

@@ -1,7 +1,7 @@
 /**
- * Werte des UserSkel, wie das Backend sie liefert. Nur die Felder, auf die sich
- * der Store selbst stützt, sind benannt — der Rest bleibt offen, weil das Skel
- * pro Projekt erweitert wird.
+ * Values of the UserSkel as the backend delivers them. Only the fields the
+ * store itself relies on are named — the rest stays open because the skel
+ * is extended per project.
  */
 export interface UserSkelValues {
   key?: string
@@ -16,43 +16,43 @@ export interface UserSkelValues {
 export type UserStatus = "unknown" | "loading" | "authenticated" | "anonymous"
 
 export interface UserStoreState {
-  /** Angemeldeter Benutzer oder null. */
+  /** Logged-in user or null. */
   user: UserSkelValues | null
   status: UserStatus
-  /** Renderer der Requests (Standard: VITE_DEFAULT_RENDERER oder "json"). */
+  /** Renderer for the requests (default: VITE_DEFAULT_RENDERER or "json"). */
   renderer: string
   googleClientId: string | null
 }
 
 /**
- * Der Store, wie ihn `useUserStore()` liefert. Die Getter stehen als Werte da,
- * weil Pinia die Refs eines Setup-Stores am Store-Objekt entpackt.
+ * The store as returned by `useUserStore()`. The getters appear as values
+ * because Pinia unwraps the refs of a setup store on the store object.
  */
 export interface UserStore {
   state: UserStoreState
   isLoggedIn: boolean
-  /** Rechte des Benutzers (leer, wenn keiner angemeldet ist). */
+  /** Access rights of the user (empty if nobody is logged in). */
   access: string[]
   isRoot: boolean
   isAdmin: boolean
-  /** Root gilt immer als berechtigt. */
+  /** Root always counts as authorized. */
   hasAccess: (right: string) => boolean
-  /** Kurzform des Namens für Oberflächen, "-" ohne Benutzer. */
+  /** Short form of the name for UIs, "-" without a user. */
   shortName: string
   configure: (options?: { renderer?: string; googleClientId?: string | null }) => void
-  /** Session laden. Ergibt null, wenn niemand angemeldet ist (401). */
+  /** Load the session. Yields null if nobody is logged in (401). */
   fetchSelf: () => Promise<UserSkelValues | null>
   logout: () => Promise<void>
   reset: () => void
   /**
-   * Klassische Kette (viur-core 3.9): einen Schritt per GET rendern — Endpunkt
-   * unterhalb von `user` (Standard "login") oder eine Server-URL. Liefert die
-   * normalisierte Antwort; wirft bei einem Transportfehler.
+   * Classic chain (viur-core 3.9): render a step via GET — an endpoint
+   * below `user` (default "login") or a server URL. Returns the
+   * normalized response; throws on a transport error.
    */
   loadLoginStep: (target?: string) => Promise<Record<string, any>>
-  /** Primären Provider ohne eigenes Widget wählen; `next_url` ist sein erster Schritt. */
+  /** Choose a primary provider without a widget of its own; `next_url` is its first step. */
   selectAuthenticationProvider: (provider: string) => Promise<Record<string, any>>
-  /** Google-Identity-Token anmelden; liefert die normalisierte Antwort. */
+  /** Log in with a Google identity token; returns the normalized response. */
   loginWithGoogle: (token: string) => Promise<Record<string, any> | null>
 }
 

package/src/vite/safeHtml.js

@@ -0,0 +1,73 @@
+import DOMPurify from "dompurify"
+
+// Central, safe HTML rendering for the app.
+//
+// Purpose: v-html renders raw HTML and is therefore a stored-XSS sink as soon as
+// the value comes from the backend or user input. This file provides ONE sanitize
+// function, used in two places:
+//
+//   1) window.__sanitizeHtml  -> called by the compiled templates.
+//      The app's Vue Vite plugin can override the built-in v-html compiler
+//      transform (in the app's vite.config.js) so that EVERY v-html runs through
+//      it automatically. Existing `v-html` usages become safe without code changes.
+//   2) the `v-safe-html` directive as an explicit, easy-to-spot alias.
+//
+// DOMPurify is a fail-closed allowlist: formatting tags (h1-h6, br, p, strong, em,
+// ul/ol/li, a[href], table, ...) are kept and stay functional; <script>, event
+// handlers (onerror/onclick/...) and javascript: URLs are removed.
+//
+// IMPORTANT: do NOT run values through helpers that decode HTML entities (e.g. a
+// `cleanString()`) beforehand — that turns neutralized payloads live again. Plain
+// text output needs no HTML at all -> use {{ text }} / v-text.
+
+// Protect links that open in a new tab against reverse tabnabbing.
+DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+  if (node.tagName === "A" && node.getAttribute("target") === "_blank") {
+    node.setAttribute("rel", "noopener noreferrer")
+  }
+})
+
+const ESCAPES = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }
+
+export function sanitizeHtml(value) {
+  const html = value == null ? "" : String(value)
+  // DOMPurify returns its input UNCHANGED where it can't run (no DOM, e.g. SSR or
+  // some test environments). Stay fail-closed there: escape instead of passing through.
+  if (!DOMPurify.isSupported) return html.replace(/[&<>"']/g, (c) => ESCAPES[c])
+  // `target` is stripped by default; keep it so the hook above can secure new-tab links
+  return DOMPurify.sanitize(html, { ADD_ATTR: ["target"] })
+}
+
+// For the compiled templates (v-html compiler override in the app's vite.config.js).
+// Set when this module is imported — i.e. before app.mount().
+if (typeof window !== "undefined") {
+  window.__sanitizeHtml = sanitizeHtml
+}
+
+function render(el, value) {
+  el.innerHTML = sanitizeHtml(value)
+}
+
+// Directive object — also importable for local registration (`<script setup>`:
+// `import { vSafeHtml } from ".../safeHtml.js"` makes `v-safe-html` available
+// without a global plugin).
+export const vSafeHtml = {
+  mounted(el, binding) {
+    render(el, binding.value)
+  },
+  updated(el, binding) {
+    if (binding.value !== binding.oldValue) {
+      render(el, binding.value)
+    }
+  },
+}
+
+export default {
+  install: (app) => {
+    // Also available globally as an instance property (e.g. for render functions).
+    app.config.globalProperties.$sanitizeHtml = sanitizeHtml
+
+    // Explicit alias for v-html.
+    app.directive("safe-html", vSafeHtml)
+  },
+}

package/src/vite/sanitizeVHtml.d.ts

@@ -0,0 +1,4 @@
+import type { DirectiveTransform } from "@vue/compiler-dom"
+
+/** Compile-time v-html override: routes every v-html through `window.__sanitizeHtml` (DOMPurify). */
+export declare const sanitizeVHtml: DirectiveTransform

package/src/vite/sanitizeVHtml.js

@@ -0,0 +1,15 @@
+import { DOMDirectiveTransforms, createCompoundExpression } from "@vue/compiler-dom"
+
+// Compile-time v-html override for the app's vite.config.js: every v-html is routed
+// through window.__sanitizeHtml (DOMPurify, set by src/vite/safeHtml.js /
+// installViurForms). Wraps Vue's own transform, so its dev warnings and child
+// handling stay intact.
+//
+//   vue({ template: { compilerOptions: { directiveTransforms: { html: sanitizeVHtml } } } })
+export function sanitizeVHtml(dir, node, context) {
+  const result = DOMDirectiveTransforms.html(dir, node, context)
+  if (dir.exp) {
+    result.props[0].value = createCompoundExpression(["window.__sanitizeHtml(", dir.exp, ")"])
+  }
+  return result
+}

package/src/webawesomeCompat.css

@@ -1,43 +1,3 @@
-:root {
-  --sl-spacing-x-small: var(--wa-space-xs);
-  --sl-spacing-small: var(--wa-space-s);
-  --sl-spacing-medium: var(--wa-space-m);
-  --sl-spacing-large: var(--wa-space-l);
-
-  --sl-border-radius-medium: var(--wa-border-radius-m);
-  --sl-input-border-radius-medium: var(--wa-form-control-border-radius);
-  --sl-input-height-medium: var(--wa-form-control-height);
-  --sl-input-font-size-medium: var(--wa-font-size-m);
-
-  --sl-color-neutral-0: var(--wa-color-surface-default);
-  --sl-color-neutral-50: var(--wa-color-neutral-95);
-  --sl-color-neutral-100: var(--wa-color-neutral-90);
-  --sl-color-neutral-200: var(--wa-color-neutral-fill-normal);
-  --sl-color-neutral-300: var(--wa-color-surface-border);
-  --sl-color-neutral-400: var(--wa-color-neutral-border-normal);
-  --sl-color-neutral-500: var(--wa-color-neutral-60);
-  --sl-color-neutral-600: var(--wa-color-neutral-50);
-  --sl-color-neutral-700: var(--wa-color-neutral-40);
-  --sl-color-neutral-800: var(--wa-color-neutral-20);
-  --sl-color-neutral-900: var(--wa-color-text-normal);
-
-  --sl-color-gray-200: var(--wa-color-neutral-95);
-  --sl-color-gray-400: var(--wa-color-neutral-60);
-  --sl-color-gray-500: var(--wa-color-neutral-border-normal);
-
-  --sl-color-primary-500: var(--wa-color-brand-50);
-  --sl-color-primary-600: var(--wa-color-brand-60);
-  --sl-color-success-500: var(--wa-color-success-50);
-  --sl-color-success-600: var(--wa-color-success-60);
-  --sl-color-danger-500: var(--wa-color-danger-50);
-  --sl-color-danger-700: var(--wa-color-danger-70);
-
-  --sl-color-info-50: var(--wa-color-brand-95);
-  --sl-color-info-300: var(--wa-color-brand-90);
-  --sl-color-info-500: var(--wa-color-brand-60);
-  --sl-color-info-900: var(--wa-color-brand-30);
-}
-
 wa-input,
 wa-textarea,
 wa-select,