@xleddyl/443-components-vue 0.7.0 → 0.8.1

package/README.md

@@ -45,7 +45,7 @@ Every component is registered with the prefix (`Button.vue` becomes `<KButton>`)
 | `prefix`                  | `'K'`                                     | Component name prefix.                                                                                                                                                                                                                                                                   |
 | `css`                     | `true`                                    | Injects `@xleddyl/443-components-vue/style.css` (and the CSS of enabled optional groups).                                                                                                                                                                                                |
 | `cssLayers`               | `'theme, base, k, components, utilities'` | Cascade layer order declared before any other CSS. The library layer `k` sits after the `theme` and `base` layers of Tailwind (so preflight does not reset components) and before `components` and `utilities` (so host classes win). `false` declares nothing. See [Scoping](#scoping). |
-| `locale`                  | `'en'`                                    | Language of the built-in copy: `'en'`, `'it'`, or any code completed with `messages`. With `@nuxtjs/i18n` the current i18n locale wins. See [Languages](#languages).                                                                                                                     |
+| `locale`                  | `'en'`                                    | Language of the built-in copy: `'en'`, `'it'`, `'de'`, or any code completed with `messages`. With `@nuxtjs/i18n` the current i18n locale wins. See [Languages](#languages).                                                                                                             |
 | `messages`                | `{}`                                      | Overrides per locale code, for example `{ it: { common: { cancel: 'Indietro' } } }`.                                                                                                                                                                                                     |
 | `composables`             | `true`                                    | Auto-imports the composables.                                                                                                                                                                                                                                                            |
 | `global`                  | `false`                                   | Puts `k-root` and `data-theme` on `<html>` for apps that are dashboard only.                                                                                                                                                                                                             |
@@ -108,6 +108,8 @@ Tokens live on `.k-root`, never on `:root`. Override them on a root element: Roo
 
 Input tokens, declared only on the outermost root so nested roots inherit them: `--k-accent`, `--k-accent-contrast`, `--k-font-sans`, `--k-font-mono`, `--k-font-size`, `--k-font-features`, `--k-line-height`, `--k-radius-scale`. Every other token (surfaces, text, lines, accent shades, status colors, radii, shadows, motion) is derived per root, so a nested root with its own `theme` or `accent` re-themes a region. The full list is in [CONVENTIONS.md](./CONVENTIONS.md#tokens).
 
+A few component tokens are unset by default and only exist to be overridden on a root: `--k-scrim-blur` (backdrop blur of Modal and Drawer, `3px`), `--k-badge-radius` (Badge corners, `--k-radius-full`), `--k-grid-header-background`, `--k-grid-header-text` and `--k-grid-header-font` (DataGrid header, `--k-subtle`, `--k-text-muted` and `--k-font-sans`).
+
 Contrast is part of the tokens: `--k-text-muted` is the lightest text color (4.5:1), `--k-text-dimmed` is for icons and decoration (3:1), `--k-ring` is an opaque focus color (3:1 on every surface), and `--k-danger-text`, `--k-success-text`, `--k-warning-text`, `--k-info-text` color status text (4.5:1, also on soft tints). Every preset sets them for light and dark; keep the same ratios when you override them.
 
 Themes: `data-theme="light"` or `"dark"` forces the scheme, `system` (or no attribute) follows the OS. `useTheme()` returns `preference`, `set()` and `cycle()`; `KThemeSwitch` is a ready control.
@@ -202,7 +204,7 @@ Each collection is a separate chunk loaded the first time one of its icons rende
 
 ## Languages
 
-The components have no hardcoded copy. Every label, placeholder, status text and validation message comes from a typed catalog (`KMessages`), with English (`en`) and Italian (`it`) built in. Plurals are `'one | other'` templates with a `{count}` parameter.
+The components have no hardcoded copy. Every label, placeholder, status text and validation message comes from a typed catalog (`KMessages`), with English (`en`), Italian (`it`) and German (`de`) built in. Plurals are `'one | other'` templates with a `{count}` parameter.
 
 ```ts
 k: { locale: 'it', messages: { it: { common: { cancel: 'Indietro' } } } }
@@ -591,6 +593,7 @@ Accessibility related props and defaults:
 - Copy props that contain a value are templates: `removeLabel` (`'Remove {label}'`) on `Tag`, `Combobox` and `FileInput`, `moreLabel` (`'{count} more'`) on `AvatarGroup`, `pageLabel` (`'Page {page}'`) on `Pagination`. `ListPage` takes `resultsText: (count) => string` for the announced result count, `ColorInput` takes `invalidText`.
 - `ColorInput` `swatches` accept `{ value, label }` objects (a radio group named by `label` or the hex). `PasswordInput` picks `autocomplete="new-password"` with `generate` or `strength`, `current-password` otherwise.
 - `Tree` with `reorderable` shows small move buttons (up, down, indent, outdent) on the hovered or focused row, as a single pointer alternative to dragging. Set `patterns` on `LineChart` and `BarChart` to tell series apart without color (dash and point style per line, a fill pattern per bar series, mirrored in the legend); it is off by default.
+- `DataGrid` takes `gridOptions` for any AG Grid option it does not wrap (`rowHeight`, `onCellEditingStopped`, `onFilterChanged`, ...). They are applied before the props of `DataGrid`, so its own props win, and handlers from both run.
 - `DataGrid` translates the AG Grid ARIA strings through the catalog (`grid.*`; your own `localeText` still wins) and announces row count changes.
 
 ## Browser support

package/dist/grid/DataGrid.vue

@@ -27,6 +27,7 @@
       >
          <AgGridVue
             v-if="mounted"
+            v-bind="gridOptions"
             class="k-data-grid-ag"
             :theme="theme"
             :row-data="rows"
@@ -127,7 +128,8 @@ const props = defineProps({
   total: { type: Number, required: false, default: 0 },
   pageSizes: { type: Array, required: false, default: () => [10, 25, 50, 100] },
   messages: { type: Object, required: false },
-  localeText: { type: Object, required: false }
+  localeText: { type: Object, required: false },
+  gridOptions: { type: Object, required: false }
 });
 const emit = defineEmits(["rowClick", "selectionChange", "sortChange", "copy"]);
 const query = defineModel("query", { type: String, ...{ default: "" } });

package/dist/grid/DataGrid.vue.d.ts

@@ -1,4 +1,4 @@
-import type { ColDef, GridApi, RowClickedEvent } from 'ag-grid-community';
+import type { ColDef, GridApi, GridOptions, RowClickedEvent } from 'ag-grid-community';
 import type { GridDensity, GridMessages, GridSelection, GridSortChange } from './types';
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
@@ -25,6 +25,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         pageSizes?: number[];
         messages?: Partial<GridMessages>;
         localeText?: Record<string, string>;
+        gridOptions?: GridOptions<T>;
     } & {
         query?: string;
         page?: number;

package/dist/grid/theme.mjs

@@ -14,8 +14,9 @@ export function createGridTheme(density) {
     textColor: "var(--k-text-toned)",
     borderColor: "var(--k-line)",
     chromeBackgroundColor: "var(--k-subtle)",
-    headerBackgroundColor: "var(--k-subtle)",
-    headerTextColor: "var(--k-text-muted)",
+    headerBackgroundColor: "var(--k-grid-header-background, var(--k-subtle))",
+    headerTextColor: "var(--k-grid-header-text, var(--k-text-muted))",
+    headerFontFamily: "var(--k-grid-header-font, var(--k-font-sans))",
     headerFontSize: 12,
     headerFontWeight: 500,
     headerRowBorder: { color: "var(--k-line)" },

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export * from './components/overlays';
 export * from './components/templates';
 export * from './composables';
 export { builtinIcons } from './icons/builtin';
-export { builtinLocales, defineLocale, en, it } from './locale';
+export { builtinLocales, de, defineLocale, en, it } from './locale';
 export type { DefineLocaleOptions } from './locale';
 export type * from './locale/types';
 export type { BuiltinIconName } from './icons/builtin';

package/dist/index.mjs

@@ -7,7 +7,7 @@ export * from "./components/overlays/index.mjs";
 export * from "./components/templates/index.mjs";
 export * from "./composables/index.mjs";
 export { builtinIcons } from "./icons/builtin.mjs";
-export { builtinLocales, defineLocale, en, it } from "./locale/index.mjs";
+export { builtinLocales, de, defineLocale, en, it } from "./locale/index.mjs";
 export {
   FIELD_KEY,
   FORM_KEY,

package/dist/locale/de.d.ts

@@ -0,0 +1,2 @@
+import type { KLocale } from './types';
+export declare const de: KLocale;

package/dist/locale/de.mjs

@@ -0,0 +1,354 @@
+export const de = {
+  code: "de",
+  dir: "ltr",
+  messages: {
+    common: {
+      cancel: "Abbrechen",
+      confirm: "Best\xE4tigen",
+      close: "Schlie\xDFen",
+      ok: "OK",
+      clear: "Leeren",
+      loading: "Wird geladen",
+      areYouSure: "Bist du sicher?",
+      noResults: "Keine Ergebnisse",
+      remove: "Entfernen",
+      dismiss: "Ausblenden",
+      copy: "Kopieren",
+      copied: "Kopiert",
+      search: "Suchen",
+      back: "Zur\xFCck",
+      save: "Speichern",
+      saveChanges: "\xC4nderungen speichern",
+      discard: "Verwerfen",
+      retry: "Erneut versuchen",
+      unsavedChanges: "Ungespeicherte \xC4nderungen",
+      somethingWentWrong: "Etwas ist schiefgelaufen",
+      selected: "{count} ausgew\xE4hlt",
+      removeItem: "{label} entfernen",
+      opensInNewTab: "(\xF6ffnet in einem neuen Tab)",
+      copyFailed: "Kopieren fehlgeschlagen",
+      readonly: "Schreibgesch\xFCtzt",
+      empty: "Leer"
+    },
+    form: {
+      required: "Dieses Feld ist erforderlich",
+      min: "Muss mindestens {min} sein",
+      max: "Darf h\xF6chstens {max} sein",
+      minLength: "Mindestens {count} Zeichen | Mindestens {count} Zeichen",
+      maxLength: "H\xF6chstens {count} Zeichen | H\xF6chstens {count} Zeichen",
+      minItems: "W\xE4hle mindestens {count} Eintrag | W\xE4hle mindestens {count} Eintr\xE4ge",
+      maxItems: "W\xE4hle h\xF6chstens {count} Eintrag | W\xE4hle h\xF6chstens {count} Eintr\xE4ge",
+      pattern: "Ung\xFCltiges Format",
+      invalid: "Ung\xFCltiger Wert",
+      requiredHint: "(erforderlich)"
+    },
+    editor: {
+      bold: "Fett",
+      italic: "Kursiv",
+      strike: "Durchgestrichen",
+      code: "Code",
+      heading: "\xDCberschrift {level}",
+      bulletList: "Aufz\xE4hlung",
+      orderedList: "Nummerierte Liste",
+      blockquote: "Zitat",
+      link: "Link",
+      undo: "R\xFCckg\xE4ngig",
+      redo: "Wiederholen",
+      toolbar: "Formatierung",
+      linkUrl: "Link-URL",
+      applyLink: "\xDCbernehmen",
+      removeLink: "Link entfernen",
+      characters: "{count} Zeichen | {count} Zeichen",
+      limit: "{count} von {max} Zeichen",
+      limitReached: "Zeichenlimit erreicht"
+    },
+    grid: {
+      noRows: "Keine Zeilen vorhanden",
+      loading: "Wird geladen",
+      search: "Suchen",
+      clearSearch: "Suche leeren",
+      toolbar: "Tabellenwerkzeuge",
+      columns: "Spalten",
+      resetColumns: "Spalten zur\xFCcksetzen",
+      exportCsv: "CSV exportieren",
+      rowsPerPage: "Zeilen pro Seite",
+      previousPage: "Vorherige Seite",
+      nextPage: "N\xE4chste Seite",
+      pageStatus: "{from}-{to} von {total}",
+      selected: "{count} ausgew\xE4hlt",
+      copied: "In die Zwischenablage kopiert",
+      yes: "Ja",
+      no: "Nein",
+      label: "Datentabelle",
+      rowCount: "Keine Zeilen | {count} Zeile | {count} Zeilen",
+      checked: "ausgew\xE4hlt",
+      unchecked: "nicht ausgew\xE4hlt",
+      indeterminate: "teilweise ausgew\xE4hlt",
+      selectRowHint: "Leertaste dr\xFCcken, um diese Zeile auszuw\xE4hlen",
+      deselectRowHint: "Leertaste dr\xFCcken, um die Auswahl dieser Zeile aufzuheben",
+      toggleRowHint: "Leertaste dr\xFCcken, um die Zeile aus- oder abzuw\xE4hlen",
+      rowSelectionDisabled: "Diese Zeile kann nicht ausgew\xE4hlt werden",
+      selectAllHint: "Leertaste dr\xFCcken, um alle Zeilen aus- oder abzuw\xE4hlen",
+      selectAllRows: "Alle Zeilen ausw\xE4hlen",
+      sortHint: "Eingabetaste dr\xFCcken, um zu sortieren",
+      tooltip: "Tooltip"
+    },
+    account: {
+      label: "Konto"
+    },
+    alert: {
+      title: "Hinweis"
+    },
+    appearance: {
+      theme: "Design",
+      themeDescription: "W\xE4hle das Aussehen der Oberfl\xE4che. System folgt deinem Ger\xE4t.",
+      style: "Stil",
+      styleDescription: "Markenfarben, Schriften und Eckenradius."
+    },
+    auth: {
+      aside: "Info"
+    },
+    avatar: {
+      label: "Avatar",
+      online: "online",
+      away: "abwesend",
+      busy: "besch\xE4ftigt",
+      offline: "offline"
+    },
+    avatarGroup: {
+      more: "{count} weitere"
+    },
+    breadcrumbs: {
+      label: "Brotkrumennavigation"
+    },
+    calendar: {
+      previousMonth: "Vorheriger Monat",
+      nextMonth: "N\xE4chster Monat",
+      rangeStart: "Beginn des Zeitraums",
+      rangeEnd: "Ende des Zeitraums"
+    },
+    chart: {
+      empty: "Keine Daten vorhanden",
+      loading: "Diagramm wird geladen",
+      legend: "Legende"
+    },
+    colorInput: {
+      pick: "Farbe w\xE4hlen",
+      swatches: "Vordefinierte Farben",
+      invalid: "Gib eine Hex-Farbe wie #3366ff ein"
+    },
+    combobox: {
+      clear: "Auswahl leeren",
+      toggle: "Optionen anzeigen",
+      list: "Optionen",
+      create: '"{query}" erstellen',
+      results: "{count} Ergebnis verf\xFCgbar | {count} Ergebnisse verf\xFCgbar"
+    },
+    commandPalette: {
+      placeholder: "Befehl eingeben oder suchen",
+      label: "Befehlspalette",
+      recent: "Zuletzt verwendet",
+      minQuery: "Weiter tippen, um zu suchen",
+      error: "Suche fehlgeschlagen. Versuche es erneut.",
+      results: "{count} Ergebnis | {count} Ergebnisse",
+      move: "zum Bewegen",
+      select: "zum Ausw\xE4hlen",
+      close: "zum Schlie\xDFen"
+    },
+    contextMenu: {
+      label: "Kontextmen\xFC"
+    },
+    dashboardLayout: {
+      pages: "Seiten",
+      searchPlaceholder: "Seiten und Aktionen suchen"
+    },
+    dashboardPage: {
+      stats: "Kennzahlen"
+    },
+    datePicker: {
+      placeholder: "Datum w\xE4hlen",
+      clear: "Datum leeren",
+      dialog: "Datum ausw\xE4hlen",
+      range: "{start} bis {end}",
+      rangePending: "{start} - ..."
+    },
+    descriptionList: {
+      empty: "Nicht festgelegt"
+    },
+    detailPage: {
+      sections: "Abschnitte",
+      details: "Details",
+      error: "Dieser Eintrag konnte nicht geladen werden"
+    },
+    dirtyGuard: {
+      title: "Ungespeicherte \xC4nderungen verwerfen?",
+      description: "Die \xC4nderungen auf dieser Seite gehen verloren.",
+      confirm: "\xC4nderungen verwerfen",
+      cancel: "Weiter bearbeiten"
+    },
+    emptyPage: {
+      title: "Willkommen",
+      steps: "Erste Schritte",
+      done: "(erledigt)",
+      todo: "(offen)"
+    },
+    errorPage: {
+      home: "Zur Startseite",
+      back: "Zur\xFCck",
+      retry: "Erneut versuchen",
+      badRequestTitle: "Ung\xFCltige Anfrage",
+      badRequestMessage: "Die Anfrage konnte nicht verarbeitet werden.",
+      signInTitle: "Anmeldung erforderlich",
+      signInMessage: "Du musst dich anmelden, um diese Seite zu sehen.",
+      forbiddenTitle: "Zugriff verweigert",
+      forbiddenMessage: "Du hast keine Berechtigung, diese Seite zu sehen.",
+      notFoundTitle: "Seite nicht gefunden",
+      notFoundMessage: "Die gesuchte Seite existiert nicht oder wurde verschoben.",
+      serverTitle: "Etwas ist schiefgelaufen",
+      serverMessage: "Ein unerwarteter Fehler ist aufgetreten. Versuche es gleich noch einmal.",
+      unavailableTitle: "Dienst nicht verf\xFCgbar",
+      unavailableMessage: "Wir f\xFChren Wartungsarbeiten durch. Bald wieder da."
+    },
+    fileInput: {
+      title: "Dateien hier ablegen oder zum Durchsuchen klicken",
+      drop: "Loslassen, um Dateien hinzuzuf\xFCgen",
+      list: "Ausgew\xE4hlte Dateien",
+      selected: "{count} Datei ausgew\xE4hlt | {count} Dateien ausgew\xE4hlt",
+      directoryTitle: "Ordner hier ablegen oder zum Durchsuchen klicken",
+      mixedTitle: "Dateien oder Ordner hier ablegen oder zum Durchsuchen klicken",
+      browseDirectory: "Ordner hochladen",
+      loading: "Wird hochgeladen",
+      added: "{count} Datei hinzugef\xFCgt | {count} Dateien hinzugef\xFCgt",
+      rejected: "{count} Datei wurde nicht akzeptiert | {count} Dateien wurden nicht akzeptiert"
+    },
+    filterPills: {
+      label: "Filter"
+    },
+    listPage: {
+      toolbar: "Ergebnisse filtern",
+      emptyTitle: "Noch nichts vorhanden",
+      noResultsDescription: "Versuche eine andere Suche oder entferne die Filter.",
+      clearFilters: "Filter entfernen",
+      results: "Keine Ergebnisse | {count} Ergebnis | {count} Ergebnisse"
+    },
+    numberInput: {
+      increase: "Erh\xF6hen",
+      decrease: "Verringern"
+    },
+    pagination: {
+      label: "Seitennavigation",
+      page: "Seite {page}",
+      previous: "Vorherige Seite",
+      next: "N\xE4chste Seite",
+      pageSize: "Zeilen pro Seite",
+      of: "von"
+    },
+    passwordInput: {
+      show: "Passwort anzeigen",
+      hide: "Passwort verbergen",
+      generate: "Passwort generieren",
+      copy: "Passwort kopieren",
+      strength: "Passwortst\xE4rke"
+    },
+    passwordStrength: {
+      tooShort: "Zu kurz",
+      weak: "Schwach",
+      fair: "Ausreichend",
+      good: "Gut",
+      strong: "Stark"
+    },
+    preset: {
+      default: "Standard",
+      defaultDescription: "Geist, Indigo-Akzent",
+      suedtirolDescription: "Funnel, Waldgr\xFCn und Limette",
+      spotfishDescription: "Unbounded, Signalgelb"
+    },
+    progress: {
+      label: "Fortschritt"
+    },
+    prompt: {
+      title: "Wert eingeben"
+    },
+    saveBar: {
+      message: "Du hast ungespeicherte \xC4nderungen"
+    },
+    selectionBar: {
+      label: "Auswahl",
+      selectedOf: "{count} von {total} ausgew\xE4hlt",
+      selectAll: "Alle {count} ausw\xE4hlen",
+      clear: "Auswahl aufheben",
+      cleared: "Auswahl aufgehoben"
+    },
+    settings: {
+      title: "Einstellungen",
+      close: "Einstellungen schlie\xDFen",
+      sections: "Einstellungsbereiche",
+      signOut: "Abmelden",
+      session: "Sitzung",
+      sessionDescription: "Auf diesem Ger\xE4t abmelden.",
+      accountDescription: "Dein Profil und deine Sitzung.",
+      appearance: "Darstellung",
+      appearanceDescription: "Design und Stil der Oberfl\xE4che."
+    },
+    shell: {
+      sidebar: "Seitenleiste",
+      openNavigation: "Navigation \xF6ffnen",
+      skipToContent: "Zum Inhalt springen",
+      main: "Hauptnavigation",
+      closeNavigation: "Navigation schlie\xDFen",
+      navigation: "Navigation"
+    },
+    stat: {
+      increased: "Gestiegen um",
+      decreased: "Gesunken um",
+      favorable: "positiv",
+      unfavorable: "negativ"
+    },
+    table: {
+      selectAll: "Alle Zeilen ausw\xE4hlen",
+      loading: "Zeilen werden geladen",
+      selectRow: "Zeile {index} ausw\xE4hlen",
+      label: "Tabelle",
+      sortedBy: "Sortiert nach {column}, {direction}",
+      ascending: "aufsteigend",
+      descending: "absteigend",
+      sortCleared: "Sortierung entfernt"
+    },
+    theme: {
+      label: "Design",
+      system: "System",
+      light: "Hell",
+      dark: "Dunkel"
+    },
+    toaster: {
+      label: "Benachrichtigungen",
+      dismiss: "Benachrichtigung schlie\xDFen",
+      actionHint: "{hotkey} dr\xFCcken, um {action} zu erreichen"
+    },
+    tree: {
+      label: "Baum",
+      empty: "Keine Eintr\xE4ge",
+      reorderHint: "Alt mit Pfeil nach oben oder unten dr\xFCcken, um zu verschieben",
+      reorderNestedHint: "Alt mit den Pfeiltasten dr\xFCcken, um zu verschieben: oben und unten \xE4ndern die Position, links und rechts die Ebene",
+      moved: "{label} an Position {position} von {count} verschoben",
+      movedInto: "{label} nach {parent} verschoben, Position {position} von {count}",
+      moveUp: "{label} nach oben verschieben",
+      moveDown: "{label} nach unten verschieben",
+      indent: "{label} einr\xFCcken",
+      outdent: "{label} ausr\xFCcken"
+    },
+    meter: {
+      label: "Messanzeige",
+      valueText: "{value}, {state}",
+      good: "gut",
+      fair: "mittel",
+      poor: "schlecht"
+    },
+    tone: {
+      danger: "Fehler",
+      warning: "Warnung",
+      info: "Information",
+      success: "Erfolg"
+    }
+  }
+};

package/dist/locale/index.d.ts

@@ -1,7 +1,8 @@
+import { de } from './de';
 import { en } from './en';
 import { it } from './it';
 import type { DeepPartial, KLocale, KMessages, MessageKey, MessageParams } from './types';
-export { en, it };
+export { de, en, it };
 export type * from './types';
 export declare const builtinLocales: Readonly<Record<string, KLocale>>;
 export interface DefineLocaleOptions {

package/dist/locale/index.mjs

@@ -1,9 +1,10 @@
 import { pluralRules } from "../internal/core/intl.mjs";
 import { formatMessage } from "../internal/core/text.mjs";
+import { de } from "./de.mjs";
 import { en } from "./en.mjs";
 import { it } from "./it.mjs";
-export { en, it };
-export const builtinLocales = { en, it };
+export { de, en, it };
+export const builtinLocales = { de, en, it };
 function mergeMessages(base, overrides) {
   if (!overrides) return base;
   const merged = { ...base };

package/dist/styles/data/badge.css

@@ -9,7 +9,7 @@
    height: 1.375rem;
    padding: 0 0.5rem;
    border: 1px solid transparent;
-   border-radius: var(--k-radius-full);
+   border-radius: var(--k-badge-radius, var(--k-radius-full));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;

package/dist/styles/overlays/modal.css

@@ -40,7 +40,7 @@
 .k-modal[open]::backdrop,
 .k-drawer[open]::backdrop {
    background: var(--k-scrim);
-   backdrop-filter: blur(3px);
+   backdrop-filter: blur(var(--k-scrim-blur, 3px));
 }
 
 @starting-style {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/443-components-vue",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Compact, scoped dashboard components for Vue and Nuxt",
   "license": "MIT",
   "author": "Edoardo Alberti (https://github.com/xleddyl)",