@xleddyl/443-components-vue 0.8.1 → 0.8.2

package/dist/styles/layout/separator.css

@@ -32,7 +32,27 @@
 
 .k-separator-label {
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-muted);
    white-space: nowrap;
 }
+
+.k-separator-actions {
+   display: inline-flex;
+   align-items: center;
+   gap: 0.25rem;
+}
+
+.k-separator-text {
+   display: inline-flex;
+   flex-direction: column;
+   align-items: center;
+   gap: 0.125rem;
+   min-width: 0;
+   text-align: center;
+}
+
+.k-separator-description {
+   font-size: 0.75rem;
+   color: var(--k-text-muted);
+}

package/dist/styles/layout/sidebar.css

@@ -65,7 +65,7 @@
    margin-bottom: 0.25rem;
    padding-inline: 0.5rem;
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    letter-spacing: 0.01em;
    color: var(--k-text-muted);
 }

package/dist/styles/layout/tabs.css

@@ -56,7 +56,7 @@
    padding: 0 0.75rem;
    white-space: nowrap;
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-muted);
    transition:
       color var(--k-duration) var(--k-ease),
@@ -247,3 +247,32 @@
    --k-tab-badge-tone: var(--k-danger);
    --k-tab-badge-text: var(--k-danger-text);
 }
+
+.k-tab-dot {
+   --k-tab-dot-tone: var(--k-danger);
+   width: 0.4375rem;
+   height: 0.4375rem;
+   flex: none;
+   border-radius: var(--k-radius-full);
+   background: var(--k-tab-dot-tone);
+}
+
+.k-tab-dot-neutral {
+   --k-tab-dot-tone: var(--k-text-dimmed);
+}
+
+.k-tab-dot-accent {
+   --k-tab-dot-tone: var(--k-accent);
+}
+
+.k-tab-dot-info {
+   --k-tab-dot-tone: var(--k-info);
+}
+
+.k-tab-dot-success {
+   --k-tab-dot-tone: var(--k-success);
+}
+
+.k-tab-dot-warning {
+   --k-tab-dot-tone: var(--k-warning);
+}

package/dist/styles/layout/theme-switch.css

@@ -41,7 +41,7 @@
    padding-inline: 0.25rem;
    border-radius: var(--k-radius-sm);
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-muted);
    cursor: pointer;
    transition: color var(--k-duration) var(--k-ease);

package/dist/styles/overlays/command.css

@@ -111,13 +111,13 @@
    min-width: 0;
    padding: 0.5rem 0.625rem 0.25rem;
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-muted);
 }
 
 .k-command-group-description {
    min-width: 0;
-   font-weight: 400;
+   font-weight: var(--k-font-weight, 400);
    color: var(--k-text-muted);
 }
 
@@ -164,7 +164,7 @@
 }
 
 .k-command-option-label {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 

package/dist/styles/overlays/drawer.css

@@ -30,8 +30,8 @@
    overflow: hidden;
    color: var(--k-text-toned);
    background: var(--k-elevated);
-   border-radius: var(--k-radius-xl);
-   box-shadow: var(--k-shadow-overlay);
+   border-radius: var(--k-drawer-radius, var(--k-radius-xl));
+   box-shadow: var(--k-drawer-shadow, var(--k-shadow-overlay));
    transform: var(--k-drawer-hidden);
    transition: transform var(--k-duration-lg) var(--k-ease);
 }
@@ -57,7 +57,8 @@
    height: auto;
    max-height: var(--k-drawer-size);
    padding-bottom: env(safe-area-inset-bottom);
-   border-radius: var(--k-radius-xl) var(--k-radius-xl) 0 0;
+   border-radius: var(--k-drawer-radius, var(--k-radius-xl))
+      var(--k-drawer-radius, var(--k-radius-xl)) 0 0;
 }
 
 .k-drawer-sm > .k-drawer-panel {

package/dist/styles/overlays/floating.css

@@ -18,8 +18,8 @@
    font-size: 0.8125rem;
    background: var(--k-elevated);
    border: 0;
-   border-radius: var(--k-radius-lg);
-   box-shadow: var(--k-shadow-overlay);
+   border-radius: var(--k-popover-radius, var(--k-radius-lg));
+   box-shadow: var(--k-popover-shadow, var(--k-shadow-overlay));
    opacity: 0;
    transform: translate(var(--k-floating-shift-x), var(--k-floating-shift-y)) scale(0.97);
    transform-origin: var(--k-floating-origin, top center);

package/dist/styles/overlays/menu.css

@@ -100,7 +100,7 @@
 .k-menu-label {
    padding: 0.375rem 0.5rem 0.25rem;
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-muted);
 }
 
@@ -113,3 +113,7 @@
 .k-context-menu-target {
    display: contents;
 }
+
+.k-menu.is-match-width {
+   max-width: calc(100vw - 1rem);
+}

package/dist/styles/overlays/modal.css

@@ -52,17 +52,18 @@
 }
 
 .k-modal-panel {
-   --k-modal-width: 32rem;
+   --k-modal-width: var(--k-modal-width-md, 32rem);
    display: flex;
    flex-direction: column;
    width: 100%;
-   max-width: var(--k-modal-width);
+   max-width: var(--k-modal-custom-width, var(--k-modal-width));
+   min-height: min(var(--k-modal-min-height, 0px), calc(100dvh - 2rem));
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
    color: var(--k-text-toned);
    background: var(--k-elevated);
-   border-radius: var(--k-radius-xl);
-   box-shadow: var(--k-shadow-overlay);
+   border-radius: var(--k-modal-radius, var(--k-radius-xl));
+   box-shadow: var(--k-modal-shadow, var(--k-shadow-overlay));
    opacity: 0;
    transform: translateY(8px) scale(0.97);
    transition:
@@ -91,15 +92,15 @@
 }
 
 .k-modal-sm > .k-modal-panel {
-   --k-modal-width: 26rem;
+   --k-modal-width: var(--k-modal-width-sm, 26rem);
 }
 
 .k-modal-lg > .k-modal-panel {
-   --k-modal-width: 50rem;
+   --k-modal-width: var(--k-modal-width-lg, 50rem);
 }
 
 .k-modal-xl > .k-modal-panel {
-   --k-modal-width: 64rem;
+   --k-modal-width: var(--k-modal-width-xl, 64rem);
 }
 
 .k-modal-full > .k-modal-panel {
@@ -184,7 +185,7 @@
 .k-modal-title,
 .k-drawer-title {
    font-size: 0.9375rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    line-height: 1.3;
    color: var(--k-text);
    letter-spacing: -0.015em;
@@ -258,9 +259,11 @@
    .k-modal.is-sheet > .k-modal-panel {
       --k-modal-width: none;
       width: 100%;
+      max-width: none;
       max-height: 92dvh;
       padding-bottom: env(safe-area-inset-bottom);
-      border-radius: var(--k-radius-xl) var(--k-radius-xl) 0 0;
+      border-radius: var(--k-modal-radius, var(--k-radius-xl))
+         var(--k-modal-radius, var(--k-radius-xl)) 0 0;
       opacity: 1;
       transform: translateY(100%);
       transition: transform var(--k-duration-lg) var(--k-ease);

package/dist/styles/overlays/toast.css

@@ -89,8 +89,8 @@
    overflow: hidden;
    font-family: var(--k-font-sans);
    background: var(--k-elevated);
-   border-radius: var(--k-radius-lg);
-   box-shadow: var(--k-shadow-overlay);
+   border-radius: var(--k-toast-radius, var(--k-radius-lg));
+   box-shadow: var(--k-toast-shadow, var(--k-shadow-overlay));
    opacity: 0;
    transform: translateY(calc(var(--k-toast-lift) * -100%));
    translate: var(--k-toast-swipe, 0) 0;
@@ -235,7 +235,7 @@
 
 .k-toast-title {
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    line-height: 1rem;
    color: var(--k-text);
    overflow-wrap: anywhere;

package/dist/styles/overlays/tooltip.css

@@ -3,14 +3,16 @@
    align-items: center;
    gap: 0.5rem;
    max-width: min(18rem, calc(100vw - 1rem));
-   padding: 0.3125rem 0.5rem;
+   padding: var(--k-tooltip-padding, 0.3125rem 0.5rem);
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    line-height: 1.35;
-   color: var(--k-surface);
-   background: var(--k-text);
-   border-radius: var(--k-radius-md);
-   box-shadow: var(--k-shadow-sm);
+   color: var(--k-tooltip-text, var(--k-surface));
+   background: var(--k-tooltip-background, var(--k-text));
+   border-radius: var(--k-tooltip-radius, var(--k-radius-md));
+   box-shadow:
+      0 0 0 1px var(--k-tooltip-border, transparent),
+      var(--k-tooltip-shadow, var(--k-shadow-sm));
 }
 
 .k-tooltip:popover-open {
@@ -25,6 +27,22 @@
    box-shadow: none;
 }
 
+.k-tooltip[data-side='bottom'] > .k-floating-arrow {
+   box-shadow: -1px -1px 0 0 var(--k-tooltip-border, transparent);
+}
+
+.k-tooltip[data-side='top'] > .k-floating-arrow {
+   box-shadow: 1px 1px 0 0 var(--k-tooltip-border, transparent);
+}
+
+.k-tooltip[data-side='right'] > .k-floating-arrow {
+   box-shadow: -1px 1px 0 0 var(--k-tooltip-border, transparent);
+}
+
+.k-tooltip[data-side='left'] > .k-floating-arrow {
+   box-shadow: 1px -1px 0 0 var(--k-tooltip-border, transparent);
+}
+
 .k-tooltip-text {
    min-width: 0;
    overflow-wrap: anywhere;
@@ -37,6 +55,6 @@
 
 .k-tooltip-shortcut .k-kbd {
    color: inherit;
-   background: color-mix(in oklab, var(--k-surface) 14%, transparent);
-   border-color: color-mix(in oklab, var(--k-surface) 18%, transparent);
+   background: color-mix(in oklab, currentColor 14%, transparent);
+   border-color: color-mix(in oklab, currentColor 18%, transparent);
 }

package/dist/styles/shared.css

@@ -21,7 +21,7 @@
    padding-inline: 0.5rem;
    border-radius: var(--k-radius-md);
    font-size: 0.8125rem;
-   font-weight: 450;
+   font-weight: max(var(--k-font-weight, 400), 450);
    color: var(--k-text-toned);
    text-decoration: none;
    transition:
@@ -49,7 +49,7 @@
 ) {
    background: var(--k-surface);
    box-shadow: var(--k-shadow-raised);
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 

package/dist/styles/templates/account-menu.css

@@ -42,7 +42,7 @@
 .k-account-name {
    overflow-x: clip;
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--k-text);

package/dist/styles/templates/auth-layout.css

@@ -16,7 +16,7 @@
    background: var(--k-elevated);
    box-shadow: var(--k-shadow-overlay);
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
    text-decoration: none;
 }
@@ -64,7 +64,7 @@
 
 .k-auth-title {
    font-size: 1.375rem;
-   font-weight: 650;
+   font-weight: var(--k-font-weight-display, 650);
    line-height: 1.2;
    letter-spacing: -0.022em;
    color: var(--k-text);
@@ -105,7 +105,7 @@
 }
 
 .k-auth-links a {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-accent-text);
    text-decoration: none;
 }
@@ -204,7 +204,7 @@
 
 .k-auth-quote-title {
    font-size: 1.5rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    line-height: 1.25;
    letter-spacing: -0.022em;
 }

package/dist/styles/templates/brand.css

@@ -40,7 +40,7 @@
 
 .k-brand-initial {
    font-size: 0.8125rem;
-   font-weight: 650;
+   font-weight: var(--k-font-weight-display, 650);
    line-height: 1;
 }
 
@@ -78,7 +78,7 @@
 .k-brand-name {
    overflow-x: clip;
    font-size: 0.875rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;

package/dist/styles/templates/dashboard-page.css

@@ -1,6 +1,6 @@
 .k-dashboard-page-eyebrow {
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-accent-text);
 }
 

package/dist/styles/templates/empty-page.css

@@ -57,7 +57,7 @@
 
 .k-empty-page-title {
    font-size: 1.375rem;
-   font-weight: 650;
+   font-weight: var(--k-font-weight-display, 650);
    line-height: 1.2;
    letter-spacing: -0.022em;
    color: var(--k-text);
@@ -130,7 +130,7 @@
    border-radius: var(--k-radius-full);
    background: var(--k-fill);
    font-size: 0.75rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    font-variant-numeric: tabular-nums;
    color: var(--k-text-muted);
 }
@@ -149,7 +149,7 @@
 
 .k-empty-page-step-title {
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
    text-decoration: none;
 }

package/dist/styles/templates/error-page.css

@@ -55,7 +55,7 @@
 
 .k-error-title {
    font-size: 1.375rem;
-   font-weight: 650;
+   font-weight: var(--k-font-weight-display, 650);
    line-height: 1.2;
    letter-spacing: -0.022em;
    color: var(--k-text);

package/dist/styles/templates/save-bar.css

@@ -33,7 +33,7 @@
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 

package/dist/styles/templates/settings-modal.css

@@ -65,7 +65,7 @@
    margin: 0.875rem 0 0.25rem;
    padding-inline: 0.5rem;
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-muted);
 }
 
@@ -163,7 +163,7 @@
 
 .k-settings-modal-title {
    font-size: 0.9375rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--k-text);
@@ -211,7 +211,7 @@
 .k-settings-modal-account-name {
    overflow-x: clip;
    font-size: 0.875rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--k-text);
@@ -254,7 +254,7 @@
    font-family: var(--k-font-sans);
    font-size: 0.875rem;
    line-height: 1.3;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    letter-spacing: normal;
    color: var(--k-text);
 }
@@ -396,7 +396,7 @@
 .k-appearance-sample {
    font-family: var(--k-font-display, var(--k-font-sans));
    font-size: 1.125rem;
-   font-weight: 650;
+   font-weight: var(--k-font-weight-display, 650);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--k-text);
@@ -409,7 +409,7 @@
    gap: 0.375rem;
    padding: 0 0.25rem;
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-toned);
 }
 

package/dist/styles/utilities.css

@@ -22,20 +22,20 @@
 }
 
 .k-title {
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    letter-spacing: -0.015em;
    color: var(--k-text);
 }
 
 .k-display {
-   font-weight: 650;
+   font-weight: var(--k-font-weight-display, 650);
    letter-spacing: -0.025em;
    color: var(--k-text);
 }
 
 .k-label {
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--k-text-muted);
 }

package/package.json

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