@codemonster-ru/vueforge-core 1.1.1 → 1.3.0

package/dist/theme-api.js

@@ -1,5 +1,223 @@
-import { d as t, e as a } from "./public-D2viaiWv.js";
+import { vfMotionTokens as o } from "@codemonster-ru/vueforge-theme";
+import { createThemePreset as t } from "@codemonster-ru/vueforge-theme";
+import { b as r } from "./breakpoints-hxAiWC8U.js";
+const e = {
+  breakpointXs: `${r.xs}px`,
+  breakpointSm: `${r.sm}px`,
+  breakpointMd: `${r.md}px`,
+  breakpointLg: `${r.lg}px`,
+  breakpointXl: `${r.xl}px`,
+  breakpoint2xl: `${r["2xl"]}px`
+}, i = {
+  name: "vueforge-default",
+  tokens: {
+    colorBg: "#fcfcfd",
+    colorSurface: "#ffffff",
+    colorSurfaceMuted: "#f5f7fb",
+    colorText: "#172033",
+    colorMuted: "#69738a",
+    colorBorder: "#d8e0ef",
+    colorPrimary: "#0b63f6",
+    colorPrimaryContrast: "#ffffff",
+    colorPrimarySoft: "color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface))",
+    colorPrimaryBorderSoft: "color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border))",
+    colorFocusRing: "color-mix(in srgb, var(--vf-color-primary) 32%, var(--vf-color-surface))",
+    colorSuccess: "#16a34a",
+    colorSuccessContrast: "#ffffff",
+    colorInfo: "#0ea5e9",
+    colorInfoContrast: "#ffffff",
+    colorWarn: "#f59e0b",
+    colorWarnContrast: "#1f1300",
+    colorHelp: "#8b5cf6",
+    colorHelpContrast: "#ffffff",
+    colorDanger: "#dc2626",
+    colorDangerContrast: "#ffffff",
+    colorContrast: "#111827",
+    colorContrastContrast: "#ffffff",
+    colorSuccessSoft: "color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface))",
+    colorInfoSoft: "color-mix(in srgb, var(--vf-color-info) 12%, var(--vf-color-surface))",
+    colorWarnSoft: "color-mix(in srgb, var(--vf-color-warn) 12%, var(--vf-color-surface))",
+    colorHelpSoft: "color-mix(in srgb, var(--vf-color-help) 12%, var(--vf-color-surface))",
+    colorDangerSoft: "color-mix(in srgb, var(--vf-color-danger) 12%, var(--vf-color-surface))",
+    colorContrastSoft: "color-mix(in srgb, var(--vf-color-contrast) 10%, var(--vf-color-surface))",
+    colorSuccessBorderSoft: "color-mix(in srgb, var(--vf-color-success) 24%, var(--vf-color-border))",
+    colorInfoBorderSoft: "color-mix(in srgb, var(--vf-color-info) 24%, var(--vf-color-border))",
+    colorWarnBorderSoft: "color-mix(in srgb, var(--vf-color-warn) 24%, var(--vf-color-border))",
+    colorHelpBorderSoft: "color-mix(in srgb, var(--vf-color-help) 24%, var(--vf-color-border))",
+    colorDangerBorderSoft: "color-mix(in srgb, var(--vf-color-danger) 24%, var(--vf-color-border))",
+    colorContrastBorderSoft: "color-mix(in srgb, var(--vf-color-contrast) 24%, var(--vf-color-border))",
+    focusRingWidth: "3px",
+    radius: "0.75rem",
+    radiusControl: "calc(var(--vf-radius) - 0.125rem)",
+    radiusControlTight: "calc(var(--vf-radius) - 0.25rem)",
+    radiusSurface: "var(--vf-radius)",
+    radiusOverlay: "calc(var(--vf-radius) + 0.125rem)",
+    ...e,
+    controlHeightSm: "1.75rem",
+    controlHeightMd: "2.25rem",
+    controlHeightLg: "2.5rem",
+    controlFontSizeSm: "0.875rem",
+    controlFontSizeMd: "0.9375rem",
+    controlFontSizeLg: "1rem",
+    buttonPaddingSm: "0.25rem 0.55rem",
+    buttonPaddingMd: "0.375rem 0.75rem",
+    buttonPaddingLg: "0.5rem 0.875rem",
+    buttonGap: "0.5rem",
+    fieldPaddingSm: "0.25rem 0.55rem",
+    fieldPaddingMd: "0.375rem 0.65rem",
+    fieldPaddingLg: "0.5rem 0.75rem",
+    checkboxSizeSm: "1rem",
+    checkboxSizeMd: "1.125rem",
+    checkboxSizeLg: "1.25rem",
+    selectionGap: "0.65rem",
+    checkboxMarkWidth: "0.3rem",
+    checkboxMarkHeight: "0.55rem",
+    checkboxMarkStrokeWidth: "2px",
+    checkboxMarkOffsetY: "-0.05rem",
+    radioDotSize: "0.5rem",
+    switchWidthSm: "2rem",
+    switchWidthMd: "2.25rem",
+    switchWidthLg: "2.5rem",
+    switchHeightSm: "1.125rem",
+    switchHeightMd: "1.25rem",
+    switchHeightLg: "1.375rem",
+    switchThumbSizeSm: "0.75rem",
+    switchThumbSizeMd: "0.875rem",
+    switchThumbSizeLg: "1rem",
+    switchThumbInset: "0.1875rem",
+    textareaMinHeightSm: "4.5rem",
+    textareaMinHeightMd: "6rem",
+    textareaMinHeightLg: "7rem",
+    overlayPadding: "0.875rem",
+    overlayGap: "0.75rem",
+    overlayViewportPadding: "1rem",
+    menuPadding: "0.4rem",
+    menuGap: "0.2rem",
+    menuMinWidth: "12rem",
+    surfacePadding: "0.95rem",
+    surfaceGap: "0.625rem",
+    surfacePaddingCompact: "0.7rem",
+    surfaceGapCompact: "0.5rem",
+    sectionPadding: "0.75rem 0.9rem",
+    sectionGap: "0.75rem",
+    tabsGap: "0.875rem",
+    tabsListGap: "0.375rem",
+    tabsListPadding: "0.25rem",
+    tabsTabPaddingInline: "0.8rem",
+    tabsPanelPaddingTop: "0.75rem",
+    navMenuListGap: "0.2rem",
+    navMenuNestedGap: "0.15rem",
+    navMenuCollapseOffsetTop: "0.1rem",
+    navMenuCollapseInsetLevel0Margin: "1.275rem",
+    navMenuCollapseInsetLevel0Padding: "0.7rem",
+    navMenuCollapseInsetSimpleLevel0Margin: "0.75rem",
+    navMenuCollapseInsetSimpleLevel0Padding: "0.45rem",
+    navMenuCollapseInsetDeepMargin: "0.35rem",
+    navMenuCollapseInsetDeepPadding: "0.35rem",
+    navMenuCollapseInsetSimpleDeepMargin: "0.2rem",
+    navMenuCollapseInsetSimpleDeepPadding: "0.2rem",
+    navMenuNodeGroupSpacing: "0.1rem",
+    navMenuGroupPadding: "0.35rem 0.65rem",
+    navMenuGroupFontSize: "0.875rem",
+    navMenuItemPadding: "0.35rem 0.65rem",
+    navMenuItemGap: "0.55rem",
+    navMenuLeadingIconSize: "1rem",
+    navMenuLeadingIconColumnSize: "1.25rem",
+    badgeHeight: "1.625rem",
+    badgePadding: "0.2rem 0.55rem",
+    badgeGap: "0.375rem",
+    badgeRadius: "999px",
+    badgeFontSize: "0.8125rem",
+    badgeLineHeight: "1.2",
+    tagHeight: "1.75rem",
+    tagPadding: "0.25rem 0.6rem",
+    tagFontSize: "0.8125rem",
+    tagLineHeight: "1.2",
+    tooltipPadding: "0.45rem 0.65rem",
+    tooltipMaxWidth: "16rem",
+    tooltipFontSize: "0.8125rem",
+    tooltipLineHeight: "1.4",
+    dialogWidthSm: "28rem",
+    dialogWidthMd: "36rem",
+    dialogWidthLg: "48rem",
+    dialogMaxHeight: "min(85vh, 48rem)",
+    drawerSizeSm: "20rem",
+    drawerSizeMd: "26rem",
+    drawerSizeLg: "32rem",
+    drawerOffsetTop: "0px",
+    drawerBodyPadding: "var(--vf-overlay-padding)",
+    dialogTitleFontSize: "1.125rem",
+    dialogHeaderGap: "0.75rem",
+    dialogActionsGap: "0.5rem",
+    popoverWidth: "min(100vw - 2rem, 22rem)",
+    floatingArrowSize: "0.625rem",
+    overlayBackdrop: "rgba(15, 23, 42, 0.56)",
+    alertPrimarySoft: "color-mix(in srgb, var(--vf-color-primary) 8%, var(--vf-color-surface))",
+    alertPrimaryBorderSoft: "color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border))",
+    alertContentGap: "0.25rem",
+    alertTitleFontSize: "0.9375rem",
+    cardTitleFontSize: "1rem",
+    panelTitleFontSize: "0.9375rem",
+    textLineHeight: "1.5",
+    headingLineHeight: "1.3",
+    tabsLineHeight: "1.2",
+    motionDurationFast: o.durationFast,
+    motionDurationNormal: o.durationNormal,
+    motionEaseStandard: o.easeStandard,
+    zOverlay: "1000",
+    zDrawer: "1000",
+    zDropdown: "900",
+    zPopover: "925",
+    zTooltip: "950",
+    spacing: "1rem",
+    shadow: "none"
+  },
+  dark: {
+    colorBg: "#0f172a",
+    colorSurface: "#162033",
+    colorSurfaceMuted: "#1b2840",
+    colorText: "#eff4ff",
+    colorMuted: "#9fb0cf",
+    colorBorder: "#2d405f",
+    colorPrimary: "#6ea8fe",
+    colorPrimaryContrast: "#081120",
+    colorPrimarySoft: "color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface))",
+    colorPrimaryBorderSoft: "color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border))",
+    colorFocusRing: "color-mix(in srgb, var(--vf-color-primary) 32%, var(--vf-color-surface))",
+    colorSuccess: "#4ade80",
+    colorSuccessContrast: "#081120",
+    colorInfo: "#38bdf8",
+    colorInfoContrast: "#081120",
+    colorWarn: "#fbbf24",
+    colorWarnContrast: "#1f1300",
+    colorHelp: "#a78bfa",
+    colorHelpContrast: "#081120",
+    colorDanger: "#f87171",
+    colorDangerContrast: "#081120",
+    colorContrast: "#f3f4f6",
+    colorContrastContrast: "#111827",
+    colorSuccessSoft: "color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface))",
+    colorInfoSoft: "color-mix(in srgb, var(--vf-color-info) 12%, var(--vf-color-surface))",
+    colorWarnSoft: "color-mix(in srgb, var(--vf-color-warn) 12%, var(--vf-color-surface))",
+    colorHelpSoft: "color-mix(in srgb, var(--vf-color-help) 12%, var(--vf-color-surface))",
+    colorDangerSoft: "color-mix(in srgb, var(--vf-color-danger) 12%, var(--vf-color-surface))",
+    colorContrastSoft: "color-mix(in srgb, var(--vf-color-contrast) 10%, var(--vf-color-surface))",
+    colorSuccessBorderSoft: "color-mix(in srgb, var(--vf-color-success) 24%, var(--vf-color-border))",
+    colorInfoBorderSoft: "color-mix(in srgb, var(--vf-color-info) 24%, var(--vf-color-border))",
+    colorWarnBorderSoft: "color-mix(in srgb, var(--vf-color-warn) 24%, var(--vf-color-border))",
+    colorHelpBorderSoft: "color-mix(in srgb, var(--vf-color-help) 24%, var(--vf-color-border))",
+    colorDangerBorderSoft: "color-mix(in srgb, var(--vf-color-danger) 24%, var(--vf-color-border))",
+    colorContrastBorderSoft: "color-mix(in srgb, var(--vf-color-contrast) 24%, var(--vf-color-border))",
+    focusRingWidth: "3px",
+    zOverlay: "1000",
+    zDrawer: "1000",
+    zDropdown: "900",
+    zPopover: "925",
+    zTooltip: "950",
+    shadow: "none"
+  }
+};
 export {
   t as createThemePreset,
-  a as defaultThemePreset
+  i as defaultThemePreset
 };

package/dist/theme.css

@@ -6,7 +6,7 @@
   color: var(--vf-color-text);
 }
 
-:root[data-vf-theme='dark'] {
+:root[data-vf-theme="dark"] {
   color-scheme: dark;
   --vf-color-bg: #0f172a;
   --vf-color-surface: #162033;
@@ -16,14 +16,113 @@
   --vf-color-border: #2d405f;
   --vf-color-primary: #6ea8fe;
   --vf-color-primary-contrast: #081120;
-  --vf-color-primary-soft: color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface));
-  --vf-color-primary-border-soft: color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border));
-  --vf-color-focus-ring: color-mix(in srgb, var(--vf-color-primary) 52%, var(--vf-color-surface));
+  --vf-color-primary-soft: color-mix(
+    in srgb,
+    var(--vf-color-primary) 12%,
+    var(--vf-color-surface)
+  );
+  --vf-color-primary-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-primary) 22%,
+    var(--vf-color-border)
+  );
+  --vf-color-focus-ring: color-mix(
+    in srgb,
+    var(--vf-color-primary) 32%,
+    var(--vf-color-surface)
+  );
   --vf-color-success: #4ade80;
+  --vf-color-success-contrast: #081120;
+  --vf-color-info: #38bdf8;
+  --vf-color-info-contrast: #081120;
+  --vf-color-warn: #fbbf24;
+  --vf-color-warn-contrast: #1f1300;
+  --vf-color-help: #a78bfa;
+  --vf-color-help-contrast: #081120;
   --vf-color-danger: #f87171;
-  --vf-color-success-soft: color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface));
-  --vf-color-danger-soft: color-mix(in srgb, var(--vf-color-danger) 12%, var(--vf-color-surface));
-  --vf-color-success-border-soft: color-mix(in srgb, var(--vf-color-success) 24%, var(--vf-color-border));
-  --vf-color-danger-border-soft: color-mix(in srgb, var(--vf-color-danger) 24%, var(--vf-color-border));
+  --vf-color-danger-contrast: #081120;
+  --vf-color-contrast: #f3f4f6;
+  --vf-color-contrast-contrast: #111827;
+  --vf-color-success-soft: color-mix(
+    in srgb,
+    var(--vf-color-success) 12%,
+    var(--vf-color-surface)
+  );
+  --vf-color-info-soft: color-mix(
+    in srgb,
+    var(--vf-color-info) 12%,
+    var(--vf-color-surface)
+  );
+  --vf-color-warn-soft: color-mix(
+    in srgb,
+    var(--vf-color-warn) 12%,
+    var(--vf-color-surface)
+  );
+  --vf-color-help-soft: color-mix(
+    in srgb,
+    var(--vf-color-help) 12%,
+    var(--vf-color-surface)
+  );
+  --vf-color-danger-soft: color-mix(
+    in srgb,
+    var(--vf-color-danger) 12%,
+    var(--vf-color-surface)
+  );
+  --vf-color-contrast-soft: color-mix(
+    in srgb,
+    var(--vf-color-contrast) 10%,
+    var(--vf-color-surface)
+  );
+  --vf-color-success-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-success) 24%,
+    var(--vf-color-border)
+  );
+  --vf-color-info-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-info) 24%,
+    var(--vf-color-border)
+  );
+  --vf-color-warn-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-warn) 24%,
+    var(--vf-color-border)
+  );
+  --vf-color-help-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-help) 24%,
+    var(--vf-color-border)
+  );
+  --vf-color-danger-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-danger) 24%,
+    var(--vf-color-border)
+  );
+  --vf-color-contrast-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-contrast) 24%,
+    var(--vf-color-border)
+  );
   --vf-shadow: none;
 }
+
+:root.vf-theme-transitioning,
+:root.vf-theme-transitioning body,
+:root.vf-theme-transitioning #app,
+:root.vf-theme-transitioning [class^="vf-"],
+:root.vf-theme-transitioning [class*=" vf-"],
+:root.vf-theme-transitioning .demo-page,
+:root.vf-theme-transitioning .demo-container,
+:root.vf-theme-transitioning .demo-header,
+:root.vf-theme-transitioning .demo-block,
+:root.vf-theme-transitioning .demo-example,
+:root.vf-theme-transitioning .demo-item {
+  transition:
+    background-color var(--vf-motion-duration-normal)
+      var(--vf-motion-ease-standard),
+    border-color var(--vf-motion-duration-normal) var(--vf-motion-ease-standard),
+    color var(--vf-motion-duration-normal) var(--vf-motion-ease-standard),
+    box-shadow var(--vf-motion-duration-normal) var(--vf-motion-ease-standard),
+    fill var(--vf-motion-duration-normal) var(--vf-motion-ease-standard),
+    stroke var(--vf-motion-duration-normal) var(--vf-motion-ease-standard);
+}

package/dist/tokens.css

@@ -1,6 +1,6 @@
 /* Fallback baseline tokens for package CSS consumers.
    Canonical token values live in src/theme/default-preset.ts. */
-@import './generated-breakpoints.css';
+@import "./generated-breakpoints.css";
 
 :root {
   --vf-color-bg: #fcfcfd;
@@ -11,15 +11,94 @@
   --vf-color-border: #d8e0ef;
   --vf-color-primary: #0b63f6;
   --vf-color-primary-contrast: #ffffff;
-  --vf-color-primary-soft: color-mix(in srgb, var(--vf-color-primary) 12%, var(--vf-color-surface));
-  --vf-color-primary-border-soft: color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border));
-  --vf-color-focus-ring: color-mix(in srgb, var(--vf-color-primary) 52%, var(--vf-color-surface));
+  --vf-color-primary-soft: color-mix(
+    in srgb,
+    var(--vf-color-primary) 12%,
+    var(--vf-color-surface)
+  );
+  --vf-color-primary-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-primary) 22%,
+    var(--vf-color-border)
+  );
+  --vf-color-focus-ring: color-mix(
+    in srgb,
+    var(--vf-color-primary) 32%,
+    var(--vf-color-surface)
+  );
   --vf-color-success: #16a34a;
+  --vf-color-success-contrast: #ffffff;
+  --vf-color-info: #0ea5e9;
+  --vf-color-info-contrast: #ffffff;
+  --vf-color-warn: #f59e0b;
+  --vf-color-warn-contrast: #1f1300;
+  --vf-color-help: #8b5cf6;
+  --vf-color-help-contrast: #ffffff;
   --vf-color-danger: #dc2626;
-  --vf-color-success-soft: color-mix(in srgb, var(--vf-color-success) 12%, var(--vf-color-surface));
-  --vf-color-danger-soft: color-mix(in srgb, var(--vf-color-danger) 12%, var(--vf-color-surface));
-  --vf-color-success-border-soft: color-mix(in srgb, var(--vf-color-success) 24%, var(--vf-color-border));
-  --vf-color-danger-border-soft: color-mix(in srgb, var(--vf-color-danger) 24%, var(--vf-color-border));
+  --vf-color-danger-contrast: #ffffff;
+  --vf-color-contrast: #111827;
+  --vf-color-contrast-contrast: #ffffff;
+  --vf-color-success-soft: color-mix(
+    in srgb,
+    var(--vf-color-success) 12%,
+    var(--vf-color-surface)
+  );
+  --vf-color-info-soft: color-mix(
+    in srgb,
+    var(--vf-color-info) 12%,
+    var(--vf-color-surface)
+  );
+  --vf-color-warn-soft: color-mix(
+    in srgb,
+    var(--vf-color-warn) 12%,
+    var(--vf-color-surface)
+  );
+  --vf-color-help-soft: color-mix(
+    in srgb,
+    var(--vf-color-help) 12%,
+    var(--vf-color-surface)
+  );
+  --vf-color-danger-soft: color-mix(
+    in srgb,
+    var(--vf-color-danger) 12%,
+    var(--vf-color-surface)
+  );
+  --vf-color-contrast-soft: color-mix(
+    in srgb,
+    var(--vf-color-contrast) 10%,
+    var(--vf-color-surface)
+  );
+  --vf-color-success-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-success) 24%,
+    var(--vf-color-border)
+  );
+  --vf-color-info-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-info) 24%,
+    var(--vf-color-border)
+  );
+  --vf-color-warn-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-warn) 24%,
+    var(--vf-color-border)
+  );
+  --vf-color-help-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-help) 24%,
+    var(--vf-color-border)
+  );
+  --vf-color-danger-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-danger) 24%,
+    var(--vf-color-border)
+  );
+  --vf-color-contrast-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-contrast) 24%,
+    var(--vf-color-border)
+  );
+  --vf-focus-ring-width: 3px;
   --vf-radius: 0.75rem;
   --vf-radius-control: calc(var(--vf-radius) - 0.125rem);
   --vf-radius-control-tight: calc(var(--vf-radius) - 0.25rem);
@@ -38,6 +117,25 @@
   --vf-field-padding-sm: 0.25rem 0.55rem;
   --vf-field-padding-md: 0.375rem 0.65rem;
   --vf-field-padding-lg: 0.5rem 0.75rem;
+  --vf-checkbox-size-sm: 1rem;
+  --vf-checkbox-size-md: 1.125rem;
+  --vf-checkbox-size-lg: 1.25rem;
+  --vf-selection-gap: 0.65rem;
+  --vf-checkbox-mark-width: 0.3rem;
+  --vf-checkbox-mark-height: 0.55rem;
+  --vf-checkbox-mark-stroke-width: 2px;
+  --vf-checkbox-mark-offset-y: -0.05rem;
+  --vf-radio-dot-size: 0.5rem;
+  --vf-switch-width-sm: 2rem;
+  --vf-switch-width-md: 2.25rem;
+  --vf-switch-width-lg: 2.5rem;
+  --vf-switch-height-sm: 1.125rem;
+  --vf-switch-height-md: 1.25rem;
+  --vf-switch-height-lg: 1.375rem;
+  --vf-switch-thumb-size-sm: 0.75rem;
+  --vf-switch-thumb-size-md: 0.875rem;
+  --vf-switch-thumb-size-lg: 1rem;
+  --vf-switch-thumb-inset: 0.1875rem;
   --vf-textarea-min-height-sm: 4.5rem;
   --vf-textarea-min-height-md: 6rem;
   --vf-textarea-min-height-lg: 7rem;
@@ -58,6 +156,24 @@
   --vf-tabs-list-padding: 0.25rem;
   --vf-tabs-tab-padding-inline: 0.8rem;
   --vf-tabs-panel-padding-top: 0.75rem;
+  --vf-nav-menu-list-gap: 0.2rem;
+  --vf-nav-menu-nested-gap: 0.15rem;
+  --vf-nav-menu-collapse-offset-top: 0.1rem;
+  --vf-nav-menu-collapse-inset-level-0-margin: 1.275rem;
+  --vf-nav-menu-collapse-inset-level-0-padding: 0.7rem;
+  --vf-nav-menu-collapse-inset-simple-level-0-margin: 0.75rem;
+  --vf-nav-menu-collapse-inset-simple-level-0-padding: 0.45rem;
+  --vf-nav-menu-collapse-inset-deep-margin: 0.35rem;
+  --vf-nav-menu-collapse-inset-deep-padding: 0.35rem;
+  --vf-nav-menu-collapse-inset-simple-deep-margin: 0.2rem;
+  --vf-nav-menu-collapse-inset-simple-deep-padding: 0.2rem;
+  --vf-nav-menu-node-group-spacing: 0.1rem;
+  --vf-nav-menu-group-padding: 0.35rem 0.65rem;
+  --vf-nav-menu-group-font-size: 0.875rem;
+  --vf-nav-menu-item-padding: 0.35rem 0.65rem;
+  --vf-nav-menu-item-gap: 0.55rem;
+  --vf-nav-menu-leading-icon-size: 1rem;
+  --vf-nav-menu-leading-icon-column-size: 1.25rem;
   --vf-badge-height: 1.625rem;
   --vf-badge-padding: 0.2rem 0.55rem;
   --vf-badge-gap: 0.375rem;
@@ -76,15 +192,27 @@
   --vf-dialog-width-md: 36rem;
   --vf-dialog-width-lg: 48rem;
   --vf-dialog-max-height: min(85vh, 48rem);
+  --vf-drawer-size-sm: 20rem;
+  --vf-drawer-size-md: 26rem;
+  --vf-drawer-size-lg: 32rem;
+  --vf-drawer-offset-top: 0px;
+  --vf-drawer-body-padding: var(--vf-overlay-padding);
   --vf-dialog-title-font-size: 1.125rem;
   --vf-dialog-header-gap: 0.75rem;
   --vf-dialog-actions-gap: 0.5rem;
   --vf-popover-width: min(100vw - 2rem, 22rem);
   --vf-floating-arrow-size: 0.625rem;
   --vf-overlay-backdrop: rgba(15, 23, 42, 0.56);
-  --vf-overlay-backdrop-blur: 6px;
-  --vf-alert-primary-soft: color-mix(in srgb, var(--vf-color-primary) 8%, var(--vf-color-surface));
-  --vf-alert-primary-border-soft: color-mix(in srgb, var(--vf-color-primary) 22%, var(--vf-color-border));
+  --vf-alert-primary-soft: color-mix(
+    in srgb,
+    var(--vf-color-primary) 8%,
+    var(--vf-color-surface)
+  );
+  --vf-alert-primary-border-soft: color-mix(
+    in srgb,
+    var(--vf-color-primary) 22%,
+    var(--vf-color-border)
+  );
   --vf-alert-content-gap: 0.25rem;
   --vf-alert-title-font-size: 0.9375rem;
   --vf-card-title-font-size: 1rem;
@@ -92,6 +220,14 @@
   --vf-text-line-height: 1.5;
   --vf-heading-line-height: 1.3;
   --vf-tabs-line-height: 1.2;
+  --vf-motion-duration-fast: 220ms;
+  --vf-motion-duration-normal: 320ms;
+  --vf-motion-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+  --vf-z-overlay: 1000;
+  --vf-z-drawer: 1000;
+  --vf-z-dropdown: 900;
+  --vf-z-popover: 925;
+  --vf-z-tooltip: 950;
   --vf-spacing: 1rem;
   --vf-shadow: none;
 }

package/dist/types/components.d.ts

@@ -1,15 +1,29 @@
-export type VfButtonVariant = 'primary' | 'secondary' | 'ghost';
-export type VfControlSize = 'sm' | 'md' | 'lg';
-export type VfLinkTone = 'default' | 'muted';
-export type VfBadgeTone = 'neutral' | 'primary' | 'success' | 'danger';
-export type VfFeedbackTone = 'neutral' | 'primary' | 'success' | 'danger';
-export type VfDividerOrientation = 'horizontal' | 'vertical';
-export type VfDialogSize = 'sm' | 'md' | 'lg';
-export type VfDropdownPlacement = 'bottom-start' | 'bottom-end';
-export type VfTooltipPlacement = 'top' | 'bottom';
+import { IconName } from '@codemonster-ru/vueiconify';
+export type VfButtonVariant = "primary" | "secondary" | "success" | "info" | "warn" | "help" | "danger" | "contrast" | "ghost";
+export type VfControlSize = "sm" | "md" | "lg";
+export type VfLinkTone = "default" | "muted";
+export type VfBadgeTone = "neutral" | "primary" | "success" | "info" | "warn" | "help" | "danger" | "contrast";
+export type VfFeedbackTone = "neutral" | "primary" | "success" | "info" | "warn" | "help" | "danger" | "contrast";
+export type VfDividerOrientation = "horizontal" | "vertical";
+export type VfDialogSize = "sm" | "md" | "lg";
+export type VfDrawerPlacement = "left" | "right" | "top" | "bottom";
+export type VfDropdownPlacement = "bottom-start" | "bottom-end";
+export type VfTooltipPlacement = "top" | "bottom";
 export interface VfTabItem {
     value: string;
     label: string;
     disabled?: boolean;
 }
+export interface VfNavMenuItem {
+    value: string;
+    label: string;
+    kind?: "item" | "group";
+    leadingIcon?: IconName | string;
+    href?: string;
+    to?: string | Record<string, unknown>;
+    target?: string;
+    rel?: string;
+    disabled?: boolean;
+    children?: VfNavMenuItem[];
+}
 //# sourceMappingURL=components.d.ts.map

package/dist/types/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/types/components.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;AAC/D,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAC9C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,CAAA;AAC5C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;AACtE,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAA;AACzE,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAA;AAC5D,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAC7C,MAAM,MAAM,mBAAmB,GAAG,cAAc,GAAG,YAAY,CAAA;AAC/D,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAA;AAEjD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/types/components.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAE3D,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,GACV,OAAO,CAAC;AACZ,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,CAAC;AACf,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,SAAS,GACT,SAAS,GACT,MAAM,GACN,MAAM,GACN,MAAM,GACN,QAAQ,GACR,UAAU,CAAC;AACf,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC7D,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9C,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AACpE,MAAM,MAAM,mBAAmB,GAAG,cAAc,GAAG,YAAY,CAAC;AAChE,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B"}