@xleddyl/443-components-vue 0.8.1 → 0.8.2

package/dist/grid/theme.mjs

@@ -18,20 +18,20 @@ export function createGridTheme(density) {
     headerTextColor: "var(--k-grid-header-text, var(--k-text-muted))",
     headerFontFamily: "var(--k-grid-header-font, var(--k-font-sans))",
     headerFontSize: 12,
-    headerFontWeight: 500,
+    headerFontWeight: "var(--k-grid-header-font-weight, var(--k-font-weight-medium, 500))",
     headerRowBorder: { color: "var(--k-line)" },
     headerColumnBorder: false,
     rowBorder: { color: "var(--k-line)" },
     columnBorder: false,
     rowHoverColor: "var(--k-hover)",
-    selectedRowBackgroundColor: "var(--k-accent-soft)",
+    selectedRowBackgroundColor: "var(--k-grid-selected-background, var(--k-accent-soft))",
     oddRowBackgroundColor: "transparent",
     fontFamily: "var(--k-font-sans)",
-    fontSize: 13,
+    fontSize: "var(--k-grid-font-size, 13px)",
     iconSize: 14,
     spacing: spacingByDensity[density],
     borderRadius: "var(--k-radius-sm)",
-    wrapperBorderRadius: "var(--k-radius-lg)",
+    wrapperBorderRadius: "var(--k-grid-radius, var(--k-radius-lg))",
     wrapperBorder: { color: "var(--k-line)" },
     menuBackgroundColor: "var(--k-elevated)",
     menuShadow: "var(--k-shadow-overlay)",

package/dist/grid/types.d.ts

@@ -38,6 +38,7 @@ export interface BooleanCellParams {
 export interface DateCellParams {
     locale?: string;
     options?: Intl.DateTimeFormatOptions;
+    relative?: boolean | Intl.RelativeTimeFormatOptions;
 }
 export interface BadgeCellParams {
     tones?: Record<string, Tone>;

package/dist/icons/builtin.d.ts

@@ -8,6 +8,9 @@ export declare const builtinIcons: {
     readonly 'chevron-left': readonly ["M15.75 19.5 8.25 12l7.5-7.5"];
     readonly 'chevron-right': readonly ["m8.25 4.5 7.5 7.5-7.5 7.5"];
     readonly 'chevron-up-down': readonly ["M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"];
+    readonly 'chevron-double-left': readonly ["m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"];
+    readonly 'chevron-double-right': readonly ["m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"];
+    readonly underline: readonly ["M17.995 3.744v7.5a6 6 0 1 1-12 0v-7.5m-2.25 16.502h16.5"];
     readonly 'arrow-path': readonly ["M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"];
     readonly 'arrow-right': readonly ["M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"];
     readonly 'arrow-left': readonly ["M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"];

package/dist/icons/builtin.mjs

@@ -8,6 +8,9 @@ export const builtinIcons = {
   "chevron-left": ["M15.75 19.5 8.25 12l7.5-7.5"],
   "chevron-right": ["m8.25 4.5 7.5 7.5-7.5 7.5"],
   "chevron-up-down": ["M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"],
+  "chevron-double-left": ["m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"],
+  "chevron-double-right": ["m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"],
+  underline: ["M17.995 3.744v7.5a6 6 0 1 1-12 0v-7.5m-2.25 16.502h16.5"],
   "arrow-path": [
     "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
   ],

package/dist/index.d.ts

@@ -11,5 +11,5 @@ export { builtinLocales, de, defineLocale, en, it } from './locale';
 export type { DefineLocaleOptions } from './locale';
 export type * from './locale/types';
 export type { BuiltinIconName } from './icons/builtin';
-export { FIELD_KEY, FORM_KEY, ICON_USAGE_KEY, ICONS_KEY, LINK_KEY, LOCALE_KEY, PRESET_KEY, THEME_KEY, } from './internal/keys';
+export { FIELD_KEY, FORM_CONFIG_KEY, FORM_KEY, ICON_USAGE_KEY, ICONS_KEY, LINK_KEY, LOCALE_KEY, PRESET_KEY, THEME_KEY, } from './internal/keys';
 export type * from './types/dom';

package/dist/index.mjs

@@ -10,6 +10,7 @@ export { builtinIcons } from "./icons/builtin.mjs";
 export { builtinLocales, de, defineLocale, en, it } from "./locale/index.mjs";
 export {
   FIELD_KEY,
+  FORM_CONFIG_KEY,
   FORM_KEY,
   ICON_USAGE_KEY,
   ICONS_KEY,

package/dist/internal/core/intl.d.ts

@@ -2,3 +2,5 @@ export declare const numberFormat: (locale?: string, options?: Intl.NumberFormat
 export declare const dateTimeFormat: (locale?: string, options?: Intl.DateTimeFormatOptions) => Intl.DateTimeFormat;
 export declare const pluralRules: (locale?: string, options?: Intl.PluralRulesOptions) => Intl.PluralRules;
 export declare const collator: (locale?: string, options?: Intl.CollatorOptions) => Intl.Collator;
+export declare const relativeTimeFormat: (locale?: string, options?: Intl.RelativeTimeFormatOptions) => Intl.RelativeTimeFormat;
+export declare function formatRelativeTime(date: Date, locale?: string, options?: Intl.RelativeTimeFormatOptions, now?: number): string;

package/dist/internal/core/intl.mjs

@@ -22,3 +22,20 @@ export const pluralRules = cachedIntl(
 export const collator = cachedIntl(
   (locale, options) => new Intl.Collator(locale, options)
 );
+export const relativeTimeFormat = cachedIntl(
+  (locale, options) => new Intl.RelativeTimeFormat(locale, options)
+);
+const relativeUnits = [
+  ["year", 31536e3],
+  ["month", 2592e3],
+  ["week", 604800],
+  ["day", 86400],
+  ["hour", 3600],
+  ["minute", 60],
+  ["second", 1]
+];
+export function formatRelativeTime(date, locale, options = { numeric: "auto" }, now = Date.now()) {
+  const seconds = Math.round((date.getTime() - now) / 1e3);
+  const [unit, size] = relativeUnits.find(([, length]) => Math.abs(seconds) >= length) ?? relativeUnits.at(-1);
+  return relativeTimeFormat(locale, options).format(Math.round(seconds / size), unit);
+}

package/dist/internal/keys.d.ts

@@ -1,6 +1,6 @@
 import type { Component, ComputedRef, InjectionKey, Ref } from 'vue';
 import type { FieldContext, FieldControlRole } from '../composables/useField';
-import type { FormContext } from '../composables/useForm';
+import type { FormConfig, FormContext } from '../composables/useForm';
 import type { IconRegistry } from '../composables/useIcons';
 import type { ThemePreference } from '../composables/useTheme';
 import type { KLocale } from '../locale/types';
@@ -14,4 +14,5 @@ export declare const FIELD_KEY: InjectionKey<FieldContext>;
 export declare const FIELD_ROLE_KEY: InjectionKey<FieldControlRole>;
 export declare const ROOT_KEY: InjectionKey<true>;
 export declare const FORM_KEY: InjectionKey<FormContext>;
+export declare const FORM_CONFIG_KEY: InjectionKey<FormConfig>;
 export declare const LOCALE_KEY: InjectionKey<ComputedRef<KLocale>>;

package/dist/internal/keys.mjs

@@ -7,4 +7,5 @@ export const FIELD_KEY = Symbol("k-field");
 export const FIELD_ROLE_KEY = Symbol("k-field-role");
 export const ROOT_KEY = Symbol("k-root");
 export const FORM_KEY = Symbol("k-form");
+export const FORM_CONFIG_KEY = Symbol("k-form-config");
 export const LOCALE_KEY = Symbol("k-locale");

package/dist/internal/overlays/MenuList.vue

@@ -5,7 +5,7 @@
       :popover="layer.popoverMode.value"
       :data-side="layer.side.value"
       class="k-floating k-menu"
-      :class="{ 'is-submenu': level > 0 }"
+      :class="{ 'is-submenu': level > 0, 'is-match-width': matchWidth && level === 0 }"
       role="menu"
       :aria-label="label"
       :aria-labelledby="labelledby"
@@ -133,7 +133,8 @@ const props = defineProps({
   label: { type: String, required: false },
   labelledby: { type: String, required: false },
   id: { type: String, required: false },
-  manualPositioning: { type: Boolean, required: false }
+  manualPositioning: { type: Boolean, required: false },
+  matchWidth: { type: Boolean, required: false }
 });
 const emit = defineEmits(["openChange", "select"]);
 const generatedId = useId();
@@ -156,6 +157,7 @@ const layer = useFloatingLayer({
   placement: () => props.placement,
   offset: () => props.offset,
   mode: "auto",
+  matchWidth: Boolean(props.matchWidth) && props.level === 0,
   manualPositioning: () => props.manualPositioning || !(props.anchor() instanceof Element),
   onOpen: () => {
     const target = pendingFocus;

package/dist/internal/overlays/MenuList.vue.d.ts

@@ -13,6 +13,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     labelledby?: string;
     id?: string | undefined;
     manualPositioning?: boolean;
+    matchWidth?: boolean;
     key?: PropertyKey | undefined;
     prefix?: string | undefined | undefined;
     title?: string | undefined | undefined;
@@ -224,6 +225,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     labelledby?: string;
     id?: string | undefined;
     manualPositioning?: boolean;
+    matchWidth?: boolean;
     key?: PropertyKey | undefined;
     prefix?: string | undefined | undefined;
     title?: string | undefined | undefined;

package/dist/internal/overlays/OverlayView.vue.d.ts

@@ -4,13 +4,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     key?: PropertyKey | undefined;
     loading?: boolean;
     prefix?: "k-modal" | "k-drawer" | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "full" | undefined;
     label?: string;
     title?: string | undefined;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
-    size?: "sm" | "md" | "lg" | "xl" | "full" | undefined;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -114,6 +114,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     color?: string | undefined;
     id?: string | undefined;
     lang?: string | undefined;
+    width?: string;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -216,6 +217,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     hideClose?: boolean;
     beforeClose?: import("../../index.ts").DialogBeforeClose;
     closedby?: import("../../index.ts").DialogClosedBy;
+    minHeight?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
     afterLeave: () => any;
@@ -225,13 +227,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     key?: PropertyKey | undefined;
     loading?: boolean;
     prefix?: "k-modal" | "k-drawer" | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "full" | undefined;
     label?: string;
     title?: string | undefined;
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     description?: string;
-    size?: "sm" | "md" | "lg" | "xl" | "full" | undefined;
     dir?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
@@ -335,6 +337,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     color?: string | undefined;
     id?: string | undefined;
     lang?: string | undefined;
+    width?: string;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -437,6 +440,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     hideClose?: boolean;
     beforeClose?: import("../../index.ts").DialogBeforeClose;
     closedby?: import("../../index.ts").DialogClosedBy;
+    minHeight?: string;
 }> & Readonly<{
     onClose?: (() => any) | undefined;
     onAfterLeave?: (() => any) | undefined;

package/dist/locale/de.mjs

@@ -46,6 +46,7 @@ export const de = {
       bold: "Fett",
       italic: "Kursiv",
       strike: "Durchgestrichen",
+      underline: "Unterstrichen",
       code: "Code",
       heading: "\xDCberschrift {level}",
       bulletList: "Aufz\xE4hlung",
@@ -222,7 +223,11 @@ export const de = {
       rejected: "{count} Datei wurde nicht akzeptiert | {count} Dateien wurden nicht akzeptiert"
     },
     filterPills: {
-      label: "Filter"
+      label: "Filter",
+      remove: "{label} entfernen"
+    },
+    tabs: {
+      dot: "Erfordert Aufmerksamkeit"
     },
     listPage: {
       toolbar: "Ergebnisse filtern",
@@ -241,7 +246,10 @@ export const de = {
       previous: "Vorherige Seite",
       next: "N\xE4chste Seite",
       pageSize: "Zeilen pro Seite",
-      of: "von"
+      of: "von",
+      first: "Erste Seite",
+      last: "Letzte Seite",
+      jump: "Gehe zu Seite"
     },
     passwordInput: {
       show: "Passwort anzeigen",

package/dist/locale/en.mjs

@@ -46,6 +46,7 @@ export const en = {
       bold: "Bold",
       italic: "Italic",
       strike: "Strikethrough",
+      underline: "Underline",
       code: "Inline code",
       heading: "Heading {level}",
       bulletList: "Bullet list",
@@ -222,7 +223,11 @@ export const en = {
       rejected: "{count} file was not accepted | {count} files were not accepted"
     },
     filterPills: {
-      label: "Filters"
+      label: "Filters",
+      remove: "Remove {label}"
+    },
+    tabs: {
+      dot: "Needs attention"
     },
     listPage: {
       toolbar: "Filter results",
@@ -241,7 +246,10 @@ export const en = {
       previous: "Previous page",
       next: "Next page",
       pageSize: "Rows per page",
-      of: "of"
+      of: "of",
+      first: "First page",
+      last: "Last page",
+      jump: "Go to page"
     },
     passwordInput: {
       show: "Show password",

package/dist/locale/it.mjs

@@ -46,6 +46,7 @@ export const it = {
       bold: "Grassetto",
       italic: "Corsivo",
       strike: "Barrato",
+      underline: "Sottolineato",
       code: "Codice",
       heading: "Titolo {level}",
       bulletList: "Elenco puntato",
@@ -222,7 +223,11 @@ export const it = {
       rejected: "{count} file non accettato | {count} file non accettati"
     },
     filterPills: {
-      label: "Filtri"
+      label: "Filtri",
+      remove: "Rimuovi {label}"
+    },
+    tabs: {
+      dot: "Richiede attenzione"
     },
     listPage: {
       toolbar: "Filtra i risultati",
@@ -241,7 +246,10 @@ export const it = {
       previous: "Pagina precedente",
       next: "Pagina successiva",
       pageSize: "Righe per pagina",
-      of: "di"
+      of: "di",
+      first: "Prima pagina",
+      last: "Ultima pagina",
+      jump: "Vai alla pagina"
     },
     passwordInput: {
       show: "Mostra password",

package/dist/locale/types.d.ts

@@ -44,6 +44,7 @@ export interface KMessages {
         bold: string;
         italic: string;
         strike: string;
+        underline: string;
         code: string;
         heading: string;
         bulletList: string;
@@ -221,6 +222,10 @@ export interface KMessages {
     };
     filterPills: {
         label: string;
+        remove: string;
+    };
+    tabs: {
+        dot: string;
     };
     listPage: {
         toolbar: string;
@@ -240,6 +245,9 @@ export interface KMessages {
         next: string;
         pageSize: string;
         of: string;
+        first: string;
+        last: string;
+        jump: string;
     };
     passwordInput: {
         show: string;

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

@@ -20,6 +20,7 @@
          :collapsible="dashboard.collapsible"
          :storage-key="dashboard.storageKey"
          :fluid="dashboard.fluid"
+         :fill="route.meta.fill === true || Boolean(dashboard.fill)"
       >
          <slot />
       </DashboardLayout>

package/dist/styles/base.css

@@ -1,6 +1,7 @@
 .k-root {
    font-family: var(--k-font-sans);
    font-size: var(--k-font-size);
+   font-weight: var(--k-font-weight, 400);
    font-feature-settings: var(--k-font-features);
    line-height: var(--k-line-height);
    color: var(--k-text-toned);
@@ -78,7 +79,7 @@ html.k-root > body {
 :where(.k-root) :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--k-font-display, var(--k-font-sans));
    font-size: inherit;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    color: var(--k-text);
    letter-spacing: -0.015em;
 }

package/dist/styles/core/button.css

@@ -2,7 +2,7 @@
    --k-btn-tone: var(--k-accent);
    --k-btn-tone-text: var(--k-accent-text);
    --k-btn-on-tone: var(--k-accent-contrast);
-   --k-icon-size: 1rem;
+   --k-icon-size: var(--k-btn-icon-size, 1rem);
    position: relative;
    display: inline-flex;
    align-items: center;
@@ -10,7 +10,7 @@
    gap: 0.375rem;
    min-height: var(--k-btn-size);
    font-family: inherit;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    line-height: 1;
    letter-spacing: -0.005em;
    white-space: nowrap;
@@ -31,7 +31,7 @@
 }
 
 .k-btn:active:not(:disabled, [aria-disabled='true'], .k-btn-link) {
-   scale: 0.97;
+   scale: var(--k-press-scale, 0.97);
 }
 
 .k-btn:disabled,
@@ -95,15 +95,15 @@
 
 .k-btn-md {
    --k-btn-size: var(--k-size-md);
-   font-size: 0.8125rem;
-   padding: 0.25rem 0.8125rem;
+   font-size: var(--k-btn-font-size, 0.8125rem);
+   padding: 0.25rem var(--k-btn-padding-x, 0.8125rem);
 }
 
 .k-btn-lg {
    --k-btn-size: var(--k-size-lg);
-   --k-icon-size: 1.125rem;
-   font-size: 0.875rem;
-   padding: 0.375rem 1.125rem;
+   --k-icon-size: var(--k-btn-icon-size, 1.125rem);
+   font-size: var(--k-btn-font-size, 0.875rem);
+   padding: 0.375rem var(--k-btn-padding-x, 1.125rem);
    border-radius: calc(10px * var(--k-radius-scale));
 }
 
@@ -134,17 +134,17 @@
 .k-btn-solid {
    background: var(--k-btn-tone);
    color: var(--k-btn-on-tone);
-   border-color: color-mix(in oklab, var(--k-btn-tone) 82%, black);
+   border-color: var(--k-btn-border, color-mix(in oklab, var(--k-btn-tone) 82%, black));
    box-shadow:
-      inset 0 1px 0 rgb(255 255 255 / 0.18),
-      0 1px 2px color-mix(in oklab, var(--k-btn-tone) 35%, transparent);
+      inset 0 1px 0 var(--k-btn-highlight, rgb(255 255 255 / 0.18)),
+      var(--k-btn-shadow, 0 1px 2px color-mix(in oklab, var(--k-btn-tone) 35%, transparent));
 }
 
 .k-btn-solid:hover:not(:disabled, [aria-disabled='true']) {
    background: color-mix(in oklab, var(--k-btn-tone) 90%, black);
    box-shadow:
-      inset 0 1px 0 rgb(255 255 255 / 0.22),
-      0 2px 8px -2px color-mix(in oklab, var(--k-btn-tone) 60%, transparent);
+      inset 0 1px 0 var(--k-btn-highlight, rgb(255 255 255 / 0.22)),
+      var(--k-btn-shadow, 0 2px 8px -2px color-mix(in oklab, var(--k-btn-tone) 60%, transparent));
 }
 
 .k-btn-solid:active:not(:disabled, [aria-disabled='true']) {
@@ -162,13 +162,13 @@
 .k-btn-neutral.k-btn-solid {
    background: var(--k-text);
    color: var(--k-surface);
-   border-color: var(--k-text);
-   box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14);
+   border-color: var(--k-btn-border, var(--k-text));
+   box-shadow: inset 0 1px 0 var(--k-btn-highlight, rgb(255 255 255 / 0.14));
 }
 
 .k-btn-neutral.k-btn-solid:hover:not(:disabled, [aria-disabled='true']) {
    background: color-mix(in oklab, var(--k-text) 86%, var(--k-surface));
-   box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14);
+   box-shadow: inset 0 1px 0 var(--k-btn-highlight, rgb(255 255 255 / 0.14));
 }
 
 .k-btn-neutral.k-btn-solid:active:not(:disabled, [aria-disabled='true']) {
@@ -208,6 +208,32 @@
    background: var(--k-fill);
 }
 
+.k-btn-subtle {
+   background: color-mix(in oklab, var(--k-btn-tone) 12%, transparent);
+   color: var(--k-btn-tone-text);
+}
+
+.k-btn-subtle:hover:not(:disabled, [aria-disabled='true']) {
+   background: color-mix(in oklab, var(--k-btn-tone) 18%, transparent);
+}
+
+.k-btn-subtle:active:not(:disabled, [aria-disabled='true']) {
+   background: color-mix(in oklab, var(--k-btn-tone) 24%, transparent);
+}
+
+.k-btn-neutral.k-btn-subtle {
+   background: var(--k-fill);
+   color: var(--k-text);
+}
+
+.k-btn-neutral.k-btn-subtle:hover:not(:disabled, [aria-disabled='true']) {
+   background: color-mix(in oklab, var(--k-text) 7%, var(--k-fill));
+}
+
+.k-btn-neutral.k-btn-subtle:active:not(:disabled, [aria-disabled='true']) {
+   background: color-mix(in oklab, var(--k-text) 12%, var(--k-fill));
+}
+
 .k-btn-outline {
    background: transparent;
    border-color: var(--k-btn-tone);

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

@@ -19,7 +19,7 @@
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-toned);
 }
 

package/dist/styles/core/input.css

@@ -68,13 +68,13 @@
 
 .k-field-md {
    font-size: 0.875rem;
-   padding: 0.25rem 0.75rem;
+   padding: 0.25rem var(--k-field-padding-x, 0.75rem);
    min-height: var(--k-size-md);
 }
 
 .k-field-lg {
    font-size: 0.9375rem;
-   padding: 0.375rem 0.875rem;
+   padding: 0.375rem var(--k-field-padding-x, 0.875rem);
    min-height: var(--k-size-lg);
    border-radius: calc(10px * var(--k-radius-scale));
 }

package/dist/styles/core/kbd.css

@@ -7,7 +7,7 @@
    padding: 0 0.3125rem;
    font-family: var(--k-font-mono);
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    line-height: 1;
    color: var(--k-text-muted);
    background: var(--k-subtle);

package/dist/styles/data/avatar.css

@@ -10,7 +10,7 @@
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--k-accent) 14%, transparent);
    color: var(--k-accent-text);
    font-size: calc(var(--k-avatar-size) * 0.38);
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    line-height: 1;
    letter-spacing: 0.01em;
    vertical-align: middle;

package/dist/styles/data/badge.css

@@ -1,6 +1,7 @@
 .k-badge {
    --k-badge-tone: var(--k-text-muted);
    --k-badge-text: var(--k-text-toned);
+   --k-badge-on-tone: var(--k-text-inverted);
    --k-icon-size: 0.75rem;
    display: inline-flex;
    align-items: center;
@@ -10,8 +11,11 @@
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--k-badge-radius, var(--k-radius-full));
-   font-size: 0.75rem;
-   font-weight: 500;
+   font-family: var(--k-badge-font, inherit);
+   font-size: var(--k-badge-font-size, 0.75rem);
+   font-weight: var(--k-badge-font-weight, var(--k-font-weight-medium, 500));
+   text-transform: var(--k-badge-text-transform, none);
+   letter-spacing: var(--k-badge-letter-spacing, normal);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
@@ -55,46 +59,58 @@
    --k-badge-text: var(--k-info-text);
 }
 
+.k-badge-accent {
+   --k-badge-on-tone: var(--k-accent-contrast);
+}
+
 .k-badge-soft {
-   background: color-mix(in oklab, var(--k-badge-tone) 10%, transparent);
-   border-color: color-mix(in oklab, var(--k-badge-tone) 24%, transparent);
-   color: var(--k-badge-text);
+   background: var(--k-badge-background, color-mix(in oklab, var(--k-badge-tone) 10%, transparent));
+   border-color: var(
+      --k-badge-border-color,
+      color-mix(in oklab, var(--k-badge-tone) 24%, transparent)
+   );
+   color: var(--k-badge-color, var(--k-badge-text));
 }
 
 .k-badge-neutral.k-badge-soft {
-   background: var(--k-subtle);
-   border-color: var(--k-line);
+   background: var(--k-badge-background, var(--k-subtle));
+   border-color: var(--k-badge-border-color, var(--k-line));
 }
 
 .k-badge-outline {
-   background: transparent;
-   border-color: color-mix(in oklab, var(--k-badge-tone) 45%, transparent);
-   color: var(--k-badge-text);
+   background: var(--k-badge-background, transparent);
+   border-color: var(
+      --k-badge-border-color,
+      color-mix(in oklab, var(--k-badge-tone) 45%, transparent)
+   );
+   color: var(--k-badge-color, var(--k-badge-text));
 }
 
 .k-badge-neutral.k-badge-outline {
-   border-color: var(--k-line-strong);
-   color: var(--k-text-muted);
+   border-color: var(--k-badge-border-color, var(--k-line-strong));
+   color: var(--k-badge-color, var(--k-text-muted));
 }
 
 .k-badge-solid {
-   background: var(--k-badge-tone);
-   border-color: color-mix(in oklab, var(--k-badge-tone) 82%, black);
-   color: var(--k-text-inverted);
+   background: var(--k-badge-background, var(--k-badge-tone));
+   border-color: var(
+      --k-badge-border-color,
+      color-mix(in oklab, var(--k-badge-background, var(--k-badge-tone)) 82%, black)
+   );
+   color: var(--k-badge-color, var(--k-badge-on-tone));
 }
 
 :is(.k-badge-success, .k-badge-warning).k-badge-solid {
-   background: light-dark(color-mix(in oklab, var(--k-badge-tone) 94%, black), var(--k-badge-tone));
-}
-
-.k-badge-accent.k-badge-solid {
-   color: var(--k-accent-contrast);
+   background: var(
+      --k-badge-background,
+      light-dark(color-mix(in oklab, var(--k-badge-tone) 94%, black), var(--k-badge-tone))
+   );
 }
 
 .k-badge-neutral.k-badge-solid {
-   background: var(--k-text);
-   border-color: var(--k-text);
-   color: var(--k-surface);
+   background: var(--k-badge-background, var(--k-text));
+   border-color: var(--k-badge-border-color, var(--k-badge-background, var(--k-text)));
+   color: var(--k-badge-color, var(--k-surface));
 }
 
 .k-badge-dot {