@xleddyl/443-components-vue 0.8.0 → 0.8.2

package/dist/styles/forms/calendar.css

@@ -17,7 +17,7 @@
 .k-calendar-heading {
    flex: 1;
    font-size: 0.8125rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    text-align: center;
    color: var(--k-text);
 }
@@ -32,7 +32,7 @@
    height: 1.5rem;
    padding: 0;
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    text-align: center;
    color: var(--k-text-muted);
 }
@@ -89,7 +89,7 @@
 }
 
 .k-calendar-day.is-today .k-calendar-day-number {
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    color: var(--k-accent-text);
 }
 
@@ -191,3 +191,30 @@
    padding-top: 0.5rem;
    border-top: 1px solid var(--k-line);
 }
+
+.k-calendar.has-day-text {
+   --k-calendar-cell: 2.75rem;
+}
+
+.k-calendar.has-day-text .k-calendar-day-number {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   gap: 0.0625rem;
+   line-height: 1.1;
+}
+
+.k-calendar-day-text {
+   max-width: 100%;
+   overflow: hidden;
+   font-size: 0.75rem;
+   line-height: 1;
+   text-overflow: ellipsis;
+   white-space: nowrap;
+   color: var(--k-text-muted);
+}
+
+.k-calendar-day[aria-selected='true'] .k-calendar-day-text {
+   color: inherit;
+}

package/dist/styles/forms/checkbox.css

@@ -38,5 +38,5 @@
 }
 
 .k-checkbox.has-description .k-checkbox-label {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
 }

package/dist/styles/forms/choice.css

@@ -9,7 +9,7 @@
    margin-bottom: 0.5rem;
    padding: 0;
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-toned);
 }
 

package/dist/styles/forms/combobox.css

@@ -134,7 +134,7 @@
    background: var(--k-subtle);
    color: var(--k-text);
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    animation: k-pop var(--k-duration-lg) var(--k-ease-out);
 }
 
@@ -193,7 +193,7 @@
 }
 
 .k-combobox-option.is-selected .k-combobox-option-label {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
 }
 
 .k-combobox-option-selected {

package/dist/styles/forms/file-input.css

@@ -108,7 +108,7 @@
 
 .k-file-input-dropzone-title {
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 

package/dist/styles/forms/password-input.css

@@ -104,7 +104,7 @@
 .k-password-meter-label {
    min-width: 4.5rem;
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    text-align: right;
    color: var(--k-meter-text, var(--k-meter-tone));
 }

package/dist/styles/forms/pin-input.css

@@ -64,7 +64,7 @@
    background: var(--k-field);
    box-shadow: var(--k-shadow-xs);
    color: var(--k-text);
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    font-variant-numeric: tabular-nums;
    transition:
       border-color var(--k-duration) var(--k-ease),

package/dist/styles/forms/radio.css

@@ -44,7 +44,7 @@
 }
 
 .k-radio.has-description .k-radio-label {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
 }
 
 .k-radio-card {

package/dist/styles/forms/segmented.css

@@ -47,7 +47,7 @@
    min-width: 0;
    padding: 0 0.75rem;
    border-radius: var(--k-segmented-radius);
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    line-height: 1;
    color: var(--k-text-muted);
    white-space: nowrap;
@@ -73,7 +73,7 @@
 }
 
 .k-segmented-item:active:not(:disabled) {
-   scale: 0.97;
+   scale: var(--k-press-scale, 0.97);
 }
 
 .k-segmented-item[aria-checked='true'] {

package/dist/styles/forms/select.css

@@ -131,7 +131,7 @@
    }
 
    .k-select .k-select-field option:checked {
-      font-weight: 500;
+      font-weight: var(--k-font-weight-medium, 500);
       color: var(--k-text);
    }
 
@@ -153,7 +153,7 @@
    .k-select .k-select-field optgroup {
       padding-top: 0.25rem;
       font-size: 0.75rem;
-      font-weight: 600;
+      font-weight: var(--k-font-weight-strong, 600);
       color: var(--k-text-muted);
       background: transparent;
    }

package/dist/styles/forms/slider.css

@@ -146,7 +146,7 @@
    background: var(--k-text);
    color: var(--k-surface);
    font-size: 0.75rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;

package/dist/styles/forms/switch.css

@@ -1,7 +1,7 @@
 .k-switch {
-   --k-switch-width: 2.125rem;
-   --k-switch-height: 1.25rem;
-   --k-switch-thumb: 1rem;
+   --k-switch-width: var(--k-switch-track-width, 2.125rem);
+   --k-switch-height: var(--k-switch-track-height, 1.25rem);
+   --k-switch-thumb: var(--k-switch-thumb-size, 1rem);
    --k-switch-press: 0.25rem;
    display: inline-flex;
    align-items: flex-start;
@@ -123,7 +123,7 @@
 }
 
 .k-switch:has(.k-switch-description) .k-switch-label {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
 }
 
 .k-switch.is-disabled {

package/dist/styles/layout/accordion.css

@@ -58,7 +58,7 @@
    padding: 0.625rem 1rem;
    text-align: left;
    font-size: 0.875rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
    outline-offset: -2px;
    transition: background-color var(--k-duration) var(--k-ease);
@@ -99,7 +99,7 @@
 
 .k-accordion-description {
    font-size: 0.75rem;
-   font-weight: 400;
+   font-weight: var(--k-font-weight, 400);
    line-height: 1.4;
    color: var(--k-text-muted);
 }

package/dist/styles/layout/app-shell.css

@@ -1,8 +1,8 @@
 .k-shell {
-   --k-shell-sidebar: 15rem;
-   --k-shell-rail: 3.5rem;
-   --k-shell-topbar: 3rem;
-   --k-shell-gap: 0.5rem;
+   --k-shell-sidebar: var(--k-sidebar-width, 15rem);
+   --k-shell-rail: var(--k-sidebar-rail-width, 3.5rem);
+   --k-shell-topbar: var(--k-topbar-height, 3rem);
+   --k-shell-gap: var(--k-shell-inset, 0.5rem);
    position: relative;
    display: flex;
    height: var(--k-shell-height, 100dvh);
@@ -29,7 +29,7 @@ html.k-root body {
    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;
 }
@@ -106,7 +106,7 @@ html.k-root body {
    width: 100%;
    max-width: var(--k-shell-content, 72rem);
    margin-inline: auto;
-   padding: 2.25rem 2.5rem 2.5rem;
+   padding: var(--k-shell-padding, 2.25rem 2.5rem 2.5rem);
    animation: k-enter 320ms var(--k-ease-out) backwards;
 }
 
@@ -114,6 +114,18 @@ html.k-root body {
    max-width: none;
 }
 
+.k-shell.is-fill .k-shell-main {
+   min-height: 0;
+}
+
+.k-shell-content.is-fill {
+   flex: 1;
+   min-height: 0;
+   max-width: none;
+   gap: 0;
+   padding: 0;
+}
+
 .k-shell[data-variant='sidebar'] .k-shell-sidebar {
    border-right: 1px solid var(--k-line);
 }

package/dist/styles/layout/breadcrumbs.css

@@ -7,7 +7,7 @@
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
-   font-weight: 450;
+   font-weight: max(var(--k-font-weight, 400), 450);
    line-height: 1.4;
    color: var(--k-text-muted);
 }
@@ -45,7 +45,7 @@
 }
 
 .k-breadcrumbs-current {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 
@@ -60,7 +60,7 @@
 }
 
 .k-breadcrumbs-link:is(button):active {
-   scale: 0.97;
+   scale: var(--k-press-scale, 0.97);
 }
 
 :is(.k-breadcrumbs-link, .k-breadcrumbs-current).is-drop-target {

package/dist/styles/layout/card.css

@@ -85,7 +85,7 @@
 
 .k-card-title {
    font-size: 0.9375rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    line-height: 1.3;
    color: var(--k-text);
 }

package/dist/styles/layout/nav-link.css

@@ -41,7 +41,7 @@
    border-radius: var(--k-radius-full);
    background: var(--k-fill);
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;

package/dist/styles/layout/page-header.css

@@ -58,7 +58,7 @@
 
 .k-page-header-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);
@@ -81,3 +81,23 @@
 .k-page-header-extra {
    flex-basis: 100%;
 }
+
+.k-page-header-align-start {
+   align-items: flex-start;
+}
+
+.k-page-header-align-center {
+   align-items: center;
+}
+
+.k-page-header.is-truncated .k-page-header-title-line {
+   flex-wrap: nowrap;
+   min-width: 0;
+}
+
+.k-page-header.is-truncated .k-page-header-title {
+   min-width: 0;
+   overflow: hidden;
+   text-overflow: ellipsis;
+   white-space: nowrap;
+}

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

@@ -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 {
@@ -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);
 }