@xleddyl/443-components-vue 0.5.0 → 0.6.2

package/dist/locale/it.mjs

@@ -23,7 +23,12 @@ export const it = {
       retry: "Riprova",
       unsavedChanges: "Modifiche non salvate",
       somethingWentWrong: "Qualcosa \xE8 andato storto",
-      selected: "{count} selezionato | {count} selezionati"
+      selected: "{count} selezionato | {count} selezionati",
+      removeItem: "Rimuovi {label}",
+      opensInNewTab: "(si apre in una nuova scheda)",
+      copyFailed: "Impossibile copiare",
+      readonly: "Sola lettura",
+      empty: "Vuoto"
     },
     form: {
       required: "Campo obbligatorio",
@@ -34,7 +39,8 @@ export const it = {
       minItems: "Seleziona almeno {count} elemento | Seleziona almeno {count} elementi",
       maxItems: "Seleziona al massimo {count} elemento | Seleziona al massimo {count} elementi",
       pattern: "Formato non valido",
-      invalid: "Valore non valido"
+      invalid: "Valore non valido",
+      requiredHint: "(obbligatorio)"
     },
     editor: {
       bold: "Grassetto",
@@ -52,7 +58,9 @@ export const it = {
       linkUrl: "URL del link",
       applyLink: "Applica",
       removeLink: "Rimuovi link",
-      characters: "{count} carattere | {count} caratteri"
+      characters: "{count} carattere | {count} caratteri",
+      limit: "{count} di {max} caratteri",
+      limitReached: "Limite di caratteri raggiunto"
     },
     grid: {
       noRows: "Nessuna riga da mostrare",
@@ -67,10 +75,23 @@ export const it = {
       previousPage: "Pagina precedente",
       nextPage: "Pagina successiva",
       pageStatus: "{from}-{to} di {total}",
-      selected: "{count} selezionati",
+      selected: "{count} selezionato | {count} selezionati",
       copied: "Copiato negli appunti",
       yes: "S\xEC",
-      no: "No"
+      no: "No",
+      label: "Griglia dati",
+      rowCount: "Nessuna riga | {count} riga | {count} righe",
+      checked: "selezionato",
+      unchecked: "non selezionato",
+      indeterminate: "parzialmente selezionato",
+      selectRowHint: "Premi Spazio per selezionare questa riga",
+      deselectRowHint: "Premi Spazio per deselezionare questa riga",
+      toggleRowHint: "Premi Spazio per selezionare o deselezionare la riga",
+      rowSelectionDisabled: "Questa riga non pu\xF2 essere selezionata",
+      selectAllHint: "Premi Spazio per selezionare o deselezionare tutte le righe",
+      selectAllRows: "Seleziona tutte le righe",
+      sortHint: "Premi Invio per ordinare",
+      tooltip: "Suggerimento"
     },
     account: {
       label: "Account"
@@ -95,22 +116,26 @@ export const it = {
       offline: "offline"
     },
     avatarGroup: {
-      more: "altri"
+      more: "altri {count}"
     },
     breadcrumbs: {
       label: "Percorso"
     },
     calendar: {
       previousMonth: "Mese precedente",
-      nextMonth: "Mese successivo"
+      nextMonth: "Mese successivo",
+      rangeStart: "inizio intervallo",
+      rangeEnd: "fine intervallo"
     },
     chart: {
       empty: "Nessun dato da mostrare",
-      loading: "Caricamento grafico"
+      loading: "Caricamento grafico",
+      legend: "Legenda"
     },
     colorInput: {
       pick: "Scegli un colore",
-      swatches: "Colori predefiniti"
+      swatches: "Colori predefiniti",
+      invalid: "Inserisci un colore esadecimale, ad esempio #3366ff"
     },
     combobox: {
       clear: "Cancella selezione",
@@ -144,7 +169,8 @@ export const it = {
       placeholder: "Scegli una data",
       clear: "Cancella data",
       dialog: "Scegli la data",
-      range: "{start} - {end}"
+      range: "{start} - {end}",
+      rangePending: "{start} - ..."
     },
     descriptionList: {
       empty: "Non impostato"
@@ -192,7 +218,8 @@ export const it = {
       mixedTitle: "Trascina file o cartelle qui o fai clic per sfogliare",
       browseDirectory: "Carica una cartella",
       loading: "Caricamento in corso",
-      added: "{count} file aggiunto | {count} file aggiunti"
+      added: "{count} file aggiunto | {count} file aggiunti",
+      rejected: "{count} file non accettato | {count} file non accettati"
     },
     filterPills: {
       label: "Filtri"
@@ -201,7 +228,8 @@ export const it = {
       toolbar: "Filtra i risultati",
       emptyTitle: "Ancora niente qui",
       noResultsDescription: "Prova una ricerca diversa o cancella i filtri.",
-      clearFilters: "Cancella filtri"
+      clearFilters: "Cancella filtri",
+      results: "Nessun risultato | {count} risultato | {count} risultati"
     },
     numberInput: {
       increase: "Aumenta",
@@ -209,7 +237,7 @@ export const it = {
     },
     pagination: {
       label: "Paginazione",
-      page: "Pagina",
+      page: "Pagina {page}",
       previous: "Pagina precedente",
       next: "Pagina successiva",
       pageSize: "Righe per pagina",
@@ -267,17 +295,24 @@ export const it = {
       openNavigation: "Apri navigazione",
       skipToContent: "Vai al contenuto",
       main: "Principale",
-      collapse: "Comprimi barra laterale",
-      expand: "Espandi barra laterale"
+      closeNavigation: "Chiudi navigazione",
+      navigation: "Navigazione"
     },
     stat: {
       increased: "Aumento di",
-      decreased: "Diminuzione di"
+      decreased: "Diminuzione di",
+      favorable: "favorevole",
+      unfavorable: "sfavorevole"
     },
     table: {
       selectAll: "Seleziona tutte le righe",
       loading: "Caricamento righe",
-      selectRow: "Seleziona riga {index}"
+      selectRow: "Seleziona riga {index}",
+      label: "Tabella",
+      sortedBy: "Ordinata per {column}, {direction}",
+      ascending: "crescente",
+      descending: "decrescente",
+      sortCleared: "Ordinamento rimosso"
     },
     theme: {
       label: "Tema",
@@ -296,7 +331,24 @@ export const it = {
       reorderHint: "Premi Alt con la freccia su o gi\xF9 per spostare",
       reorderNestedHint: "Premi Alt con le frecce per spostare: su e gi\xF9 cambiano la posizione, sinistra e destra il livello",
       moved: "{label} ora in posizione {position} di {count}",
-      movedInto: "{label} ora dentro {parent}, in posizione {position} di {count}"
+      movedInto: "{label} ora dentro {parent}, in posizione {position} di {count}",
+      moveUp: "Sposta {label} in su",
+      moveDown: "Sposta {label} in gi\xF9",
+      indent: "Aumenta il rientro di {label}",
+      outdent: "Riduci il rientro di {label}"
+    },
+    meter: {
+      label: "Indicatore",
+      valueText: "{value}, {state}",
+      good: "buono",
+      fair: "discreto",
+      poor: "scarso"
+    },
+    tone: {
+      danger: "Errore",
+      warning: "Avviso",
+      info: "Informazione",
+      success: "Operazione riuscita"
     }
   }
 };

package/dist/locale/types.d.ts

@@ -22,6 +22,11 @@ export interface KMessages {
         unsavedChanges: string;
         somethingWentWrong: string;
         selected: string;
+        removeItem: string;
+        opensInNewTab: string;
+        copyFailed: string;
+        readonly: string;
+        empty: string;
     };
     form: {
         required: string;
@@ -33,6 +38,7 @@ export interface KMessages {
         maxItems: string;
         pattern: string;
         invalid: string;
+        requiredHint: string;
     };
     editor: {
         bold: string;
@@ -51,6 +57,8 @@ export interface KMessages {
         applyLink: string;
         removeLink: string;
         characters: string;
+        limit: string;
+        limitReached: string;
     };
     grid: {
         noRows: string;
@@ -69,6 +77,19 @@ export interface KMessages {
         copied: string;
         yes: string;
         no: string;
+        label: string;
+        rowCount: string;
+        checked: string;
+        unchecked: string;
+        indeterminate: string;
+        selectRowHint: string;
+        deselectRowHint: string;
+        toggleRowHint: string;
+        rowSelectionDisabled: string;
+        selectAllHint: string;
+        selectAllRows: string;
+        sortHint: string;
+        tooltip: string;
     };
     account: {
         label: string;
@@ -101,14 +122,18 @@ export interface KMessages {
     calendar: {
         previousMonth: string;
         nextMonth: string;
+        rangeStart: string;
+        rangeEnd: string;
     };
     chart: {
         empty: string;
         loading: string;
+        legend: string;
     };
     colorInput: {
         pick: string;
         swatches: string;
+        invalid: string;
     };
     combobox: {
         clear: string;
@@ -143,6 +168,7 @@ export interface KMessages {
         clear: string;
         dialog: string;
         range: string;
+        rangePending: string;
     };
     descriptionList: {
         empty: string;
@@ -191,6 +217,7 @@ export interface KMessages {
         browseDirectory: string;
         loading: string;
         added: string;
+        rejected: string;
     };
     filterPills: {
         label: string;
@@ -200,6 +227,7 @@ export interface KMessages {
         emptyTitle: string;
         noResultsDescription: string;
         clearFilters: string;
+        results: string;
     };
     numberInput: {
         increase: string;
@@ -265,17 +293,24 @@ export interface KMessages {
         openNavigation: string;
         skipToContent: string;
         main: string;
-        collapse: string;
-        expand: string;
+        closeNavigation: string;
+        navigation: string;
     };
     stat: {
         increased: string;
         decreased: string;
+        favorable: string;
+        unfavorable: string;
     };
     table: {
         selectAll: string;
         loading: string;
         selectRow: string;
+        label: string;
+        sortedBy: string;
+        ascending: string;
+        descending: string;
+        sortCleared: string;
     };
     theme: {
         label: string;
@@ -295,6 +330,23 @@ export interface KMessages {
         reorderNestedHint: string;
         moved: string;
         movedInto: string;
+        moveUp: string;
+        moveDown: string;
+        indent: string;
+        outdent: string;
+    };
+    meter: {
+        label: string;
+        valueText: string;
+        good: string;
+        fair: string;
+        poor: string;
+    };
+    tone: {
+        danger: string;
+        warning: string;
+        info: string;
+        success: string;
     };
 }
 export interface KLocale {

package/dist/nuxt/runtime/RouteAnnouncer.vue

@@ -0,0 +1,21 @@
+<template>
+   <span
+      v-if="announce"
+      class="k-route-announcer k-visually-hidden"
+      :role="politeness === 'assertive' ? 'alert' : 'status'"
+      :aria-live="politeness"
+      >{{ message }}</span
+   >
+</template>
+
+<script setup>
+import { useRouteAnnouncer } from "nuxt/app";
+import { onMounted, ref } from "vue";
+const { message, politeness } = useRouteAnnouncer();
+const announce = ref(false);
+onMounted(
+  () => requestAnimationFrame(() => {
+    announce.value = !document.querySelector(".nuxt-route-announcer, .k-route-announcer");
+  })
+);
+</script>

package/dist/nuxt/runtime/RouteAnnouncer.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<Partial<import("vue").HTMLAttributes & import("vue").ReservedProps>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Partial<import("vue").HTMLAttributes & import("vue").ReservedProps>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/nuxt/runtime/layout-head.d.ts

@@ -0,0 +1,2 @@
+import type { MaybeRefOrGetter } from 'vue';
+export declare function useLayoutHead(brandName: MaybeRefOrGetter<string | undefined>): void;

package/dist/nuxt/runtime/layout-head.mjs

@@ -0,0 +1,13 @@
+import { useHead, useRoute } from "nuxt/app";
+import { toValue } from "vue";
+export function useLayoutHead(brandName) {
+  const route = useRoute();
+  useHead({
+    title: () => typeof route.meta.title === "string" ? route.meta.title : void 0,
+    titleTemplate: (title) => {
+      const brand = toValue(brandName);
+      if (!brand) return title ?? null;
+      return title && title !== brand ? `${title} \xB7 ${brand}` : brand;
+    }
+  });
+}

package/dist/nuxt/runtime/layouts/auth.vue

@@ -17,6 +17,7 @@
          <slot />
       </AuthLayout>
       <OverlayHost v-if="config.toaster !== false" />
+      <RouteAnnouncer />
    </Root>
 </template>
 
@@ -26,10 +27,13 @@ import { computed } from "vue";
 import Root from "../../../components/core/Root.vue";
 import OverlayHost from "../../../components/overlays/OverlayHost.vue";
 import AuthLayout from "../../../components/templates/AuthLayout.vue";
+import { useLayoutHead } from "../layout-head";
+import RouteAnnouncer from "../RouteAnnouncer.vue";
 const appConfig = useAppConfig();
 const route = useRoute();
 const config = computed(() => appConfig.k ?? {});
 const brand = computed(() => config.value.brand ?? {});
+useLayoutHead(() => brand.value.name);
 const auth = computed(() => config.value.auth ?? {});
 const title = computed(() => typeof route.meta.title === "string" ? route.meta.title : void 0);
 const description = computed(

package/dist/nuxt/runtime/layouts/auth.vue.d.ts

@@ -21,6 +21,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly bind?: Record<string, unknown> | undefined;
+    readonly dir?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -180,7 +181,6 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly accesskey?: string | undefined | undefined;
     readonly contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     readonly contextmenu?: string | undefined | undefined;
-    readonly dir?: string | undefined | undefined;
     readonly draggable?: (boolean | "true" | "false") | undefined;
     readonly enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     readonly enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -239,6 +239,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly bind?: Record<string, unknown> | undefined;
+    readonly dir?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -398,7 +399,6 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly accesskey?: string | undefined | undefined;
     readonly contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     readonly contextmenu?: string | undefined | undefined;
-    readonly dir?: string | undefined | undefined;
     readonly draggable?: (boolean | "true" | "false") | undefined;
     readonly enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     readonly enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;

package/dist/nuxt/runtime/layouts/dashboard.vue

@@ -24,6 +24,7 @@
          <slot />
       </DashboardLayout>
       <OverlayHost v-if="config.toaster !== false" />
+      <RouteAnnouncer />
    </Root>
 </template>
 
@@ -33,6 +34,8 @@ import { computed } from "vue";
 import Root from "../../../components/core/Root.vue";
 import OverlayHost from "../../../components/overlays/OverlayHost.vue";
 import DashboardLayout from "../../../components/templates/DashboardLayout.vue";
+import { useLayoutHead } from "../layout-head";
+import RouteAnnouncer from "../RouteAnnouncer.vue";
 import { navBreadcrumbs, navTarget, toNavSections } from "../../../internal/layout/navigation";
 import { useDashboard } from "../dashboard";
 const appConfig = useAppConfig();
@@ -40,6 +43,7 @@ const route = useRoute();
 const state = useDashboard();
 const config = computed(() => appConfig.k ?? {});
 const brand = computed(() => config.value.brand ?? {});
+useLayoutHead(() => brand.value.name);
 const dashboard = computed(() => config.value.dashboard ?? {});
 const account = computed(() => state.value.account ?? config.value.account);
 const settings = computed(() => config.value.settings ?? {});

package/dist/nuxt/runtime/layouts/dashboard.vue.d.ts

@@ -21,6 +21,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly bind?: Record<string, unknown> | undefined;
+    readonly dir?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -180,7 +181,6 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly accesskey?: string | undefined | undefined;
     readonly contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     readonly contextmenu?: string | undefined | undefined;
-    readonly dir?: string | undefined | undefined;
     readonly draggable?: (boolean | "true" | "false") | undefined;
     readonly enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     readonly enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;
@@ -239,6 +239,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly bind?: Record<string, unknown> | undefined;
+    readonly dir?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -398,7 +399,6 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly accesskey?: string | undefined | undefined;
     readonly contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     readonly contextmenu?: string | undefined | undefined;
-    readonly dir?: string | undefined | undefined;
     readonly draggable?: (boolean | "true" | "false") | undefined;
     readonly enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     readonly enterKeyHint?: "search" | "done" | "previous" | "next" | "enter" | "go" | "send" | undefined;

package/dist/nuxt/runtime/locale.mjs

@@ -1,9 +1,10 @@
-import { defineNuxtPlugin, useRuntimeConfig } from "nuxt/app";
+import { defineNuxtPlugin, useHead, useRuntimeConfig } from "nuxt/app";
 import { computed } from "vue";
 import { LOCALE_KEY } from "../../internal/keys.mjs";
 import { defineLocale } from "../../locale/index.mjs";
 export default defineNuxtPlugin({
   name: "k:locale",
+  enforce: "post",
   setup(nuxtApp) {
     const config = useRuntimeConfig().public.k ?? {};
     const code = computed(
@@ -16,5 +17,12 @@ export default defineNuxtPlugin({
       return defineLocale({ code: code.value, base, messages: config.messages?.[code.value] });
     });
     nuxtApp.vueApp.provide(LOCALE_KEY, locale);
+    const owned = () => !nuxtApp.$i18n;
+    useHead({
+      htmlAttrs: {
+        lang: () => owned() ? locale.value.code : void 0,
+        dir: () => owned() ? locale.value.dir : void 0
+      }
+    });
   }
 });

package/dist/nuxt/runtime/theme.mjs

@@ -4,22 +4,27 @@ import { isThemePreference, THEME_STORAGE_KEY } from "../../composables/useTheme
 import { isThemePreset, PRESET_STORAGE_KEY } from "../../internal/core/preset-data.mjs";
 import { PRESET_KEY, THEME_KEY } from "../../internal/keys.mjs";
 import { persistentCookieOptions } from "./cookie.mjs";
+function preferenceRef(cookieName, key, isValid, fallback) {
+  const store = cookieName === false ? useState(key, () => fallback) : useCookie(cookieName ?? key, { ...persistentCookieOptions, default: () => fallback });
+  if (!isValid(store.value)) store.value = fallback;
+  return store;
+}
 export default defineNuxtPlugin({
   name: "k:theme",
   setup(nuxtApp) {
     const config = useRuntimeConfig().public.k ?? {};
-    const fallback = isThemePreference(config.themeDefault) ? config.themeDefault : "system";
-    const cookie = config.themeCookie === false ? useState("k-theme", () => fallback) : useCookie(config.themeCookie ?? THEME_STORAGE_KEY, {
-      ...persistentCookieOptions,
-      default: () => fallback
-    });
-    if (!isThemePreference(cookie.value)) cookie.value = fallback;
-    const presetFallback = isThemePreset(config.presetDefault) ? config.presetDefault : "default";
-    const presetCookie = config.presetCookie === false ? useState("k-preset", () => presetFallback) : useCookie(config.presetCookie ?? PRESET_STORAGE_KEY, {
-      ...persistentCookieOptions,
-      default: () => presetFallback
-    });
-    if (!isThemePreset(presetCookie.value)) presetCookie.value = presetFallback;
+    const cookie = preferenceRef(
+      config.themeCookie,
+      THEME_STORAGE_KEY,
+      isThemePreference,
+      isThemePreference(config.themeDefault) ? config.themeDefault : "system"
+    );
+    const presetCookie = preferenceRef(
+      config.presetCookie,
+      PRESET_STORAGE_KEY,
+      isThemePreset,
+      isThemePreset(config.presetDefault) ? config.presetDefault : "default"
+    );
     nuxtApp.vueApp.provide(THEME_KEY, cookie);
     nuxtApp.vueApp.provide(PRESET_KEY, presetCookie);
     if (config.global) {

package/dist/styles/base.css

@@ -153,19 +153,6 @@ html.k-root > body {
    }
 }
 
-@keyframes k-icon-spin {
-   from {
-      transform: rotate(-60deg) scale(0.6);
-      opacity: 0.4;
-   }
-}
-
-@keyframes k-float {
-   50% {
-      transform: translateY(-3px);
-   }
-}
-
 @keyframes k-pulse {
    50% {
       opacity: 0.45;

package/dist/styles/core/button.css

@@ -59,7 +59,7 @@
    display: inline-flex;
    align-items: center;
    min-width: 0;
-   overflow: hidden;
+   overflow-x: clip;
    text-overflow: ellipsis;
 }
 
@@ -90,7 +90,7 @@
    --k-btn-size: var(--k-size-sm);
    font-size: 0.8125rem;
    padding: 0.25rem 0.625rem;
-   border-radius: calc(7px * var(--k-radius-scale));
+   border-radius: var(--k-radius-sm);
 }
 
 .k-btn-md {
@@ -109,25 +109,25 @@
 
 .k-btn-danger {
    --k-btn-tone: var(--k-danger);
-   --k-btn-tone-text: var(--k-danger);
+   --k-btn-tone-text: var(--k-danger-text);
    --k-btn-on-tone: var(--k-text-inverted);
 }
 
 .k-btn-info {
    --k-btn-tone: var(--k-info);
-   --k-btn-tone-text: var(--k-info);
+   --k-btn-tone-text: var(--k-info-text);
    --k-btn-on-tone: var(--k-text-inverted);
 }
 
 .k-btn-success {
-   --k-btn-tone: var(--k-success);
-   --k-btn-tone-text: var(--k-success);
+   --k-btn-tone: light-dark(color-mix(in oklab, var(--k-success) 94%, black), var(--k-success));
+   --k-btn-tone-text: var(--k-success-text);
    --k-btn-on-tone: var(--k-text-inverted);
 }
 
 .k-btn-warning {
-   --k-btn-tone: var(--k-warning);
-   --k-btn-tone-text: var(--k-warning);
+   --k-btn-tone: light-dark(color-mix(in oklab, var(--k-warning) 94%, black), var(--k-warning));
+   --k-btn-tone-text: var(--k-warning-text);
    --k-btn-on-tone: var(--k-text-inverted);
 }
 

package/dist/styles/core/field-message.css

@@ -2,7 +2,7 @@
 .k-form-field-error,
 .k-form-field-warning {
    --k-icon-size: 0.875rem;
-   --k-field-message-tone: var(--k-danger);
+   --k-field-message-tone: var(--k-danger-text);
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
@@ -14,7 +14,7 @@
 
 .k-field-message-warning,
 .k-form-field-warning {
-   --k-field-message-tone: var(--k-warning);
+   --k-field-message-tone: var(--k-warning-text);
 }
 
 .k-field-message-neutral {

package/dist/styles/core/form-field.css

@@ -34,13 +34,13 @@
 
 .k-form-field-required {
    margin-left: -0.25rem;
-   color: var(--k-danger);
+   color: var(--k-danger-text);
 }
 
 .k-form-field-hint {
    margin-left: auto;
    font-size: 0.75rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-form-field-description {
@@ -57,3 +57,12 @@
 .k-form-field.is-disabled .k-form-field-label {
    color: var(--k-text-muted);
 }
+
+.k-form-field-messages {
+   display: flex;
+   flex-direction: column;
+}
+
+.k-form-field-messages:empty {
+   margin-top: -0.375rem;
+}