@xleddyl/443-components-vue 0.8.1 → 0.8.2

package/dist/styles/data/description-list.css

@@ -40,13 +40,13 @@
 
 .k-description-term {
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-muted);
 }
 
 .k-description-list-inline .k-description-term {
    font-size: 0.8125rem;
-   font-weight: 450;
+   font-weight: max(var(--k-font-weight, 400), 450);
 }
 
 .k-description-details {

package/dist/styles/data/filter-pills.css

@@ -16,7 +16,7 @@
    border-radius: var(--k-radius-full);
    background: transparent;
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    white-space: nowrap;
    color: var(--k-text-muted);
    transition:
@@ -33,7 +33,7 @@
 }
 
 .k-filter-pill:active:not(:disabled) {
-   scale: 0.97;
+   scale: var(--k-press-scale, 0.97);
 }
 
 .k-filter-pill:is([aria-pressed='true'], .is-active) {
@@ -113,7 +113,7 @@
    padding-left: 0.3125rem;
    border-left: 1px solid currentColor;
    border-left-color: color-mix(in oklab, currentColor 30%, transparent);
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    overflow-x: clip;
    text-overflow: ellipsis;
    max-width: 14rem;
@@ -133,3 +133,24 @@
 .k-filter-pill[aria-expanded='true'] .k-filter-pill-caret {
    transform: rotate(180deg);
 }
+
+.k-filter-pill-group {
+   position: relative;
+   display: inline-flex;
+   align-items: center;
+}
+
+.k-filter-pill-group > .k-filter-pill {
+   padding-inline-end: calc(var(--k-size-xs) + 0.25rem);
+}
+
+.k-filter-pill-group > .k-filter-pill-remove {
+   position: absolute;
+   inset-inline-end: 0.25rem;
+   border-radius: var(--k-radius-full);
+   color: inherit;
+}
+
+.k-filter-pill-group:has(.k-filter-pill.is-active) > .k-filter-pill-remove {
+   color: var(--k-accent-text);
+}

package/dist/styles/data/pagination.css

@@ -13,7 +13,7 @@
 }
 
 .k-pagination-strong {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 
@@ -69,7 +69,7 @@
    border: 1px solid transparent;
    border-radius: var(--k-radius-sm);
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    font-variant-numeric: tabular-nums;
    color: var(--k-text-muted);
    transition:
@@ -86,7 +86,7 @@
 }
 
 .k-pagination-page:active:not(:disabled) {
-   scale: 0.97;
+   scale: var(--k-press-scale, 0.97);
 }
 
 .k-pagination-page[aria-current='page'] {
@@ -125,3 +125,26 @@
    font-size: 0.75rem;
    border-radius: var(--k-radius-sm);
 }
+
+.k-pagination-jump {
+   display: inline-flex;
+   align-items: center;
+   gap: 0.5rem;
+   white-space: nowrap;
+}
+
+.k-pagination-jump-input {
+   width: 4.5rem;
+   font-variant-numeric: tabular-nums;
+   -moz-appearance: textfield;
+}
+
+.k-pagination-jump-input::-webkit-inner-spin-button,
+.k-pagination-jump-input::-webkit-outer-spin-button {
+   -webkit-appearance: none;
+   margin: 0;
+}
+
+.k-pagination-jump-total {
+   font-variant-numeric: tabular-nums;
+}

package/dist/styles/data/selection-bar.css

@@ -56,7 +56,7 @@
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--k-text);

package/dist/styles/data/stat.css

@@ -43,7 +43,7 @@
 
 .k-stat-label {
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-muted);
 }
 
@@ -74,7 +74,7 @@
    gap: 0.25rem;
    min-width: 0;
    font-size: 1.5rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    line-height: 1.15;
    letter-spacing: -0.022em;
    font-variant-numeric: tabular-nums;
@@ -84,7 +84,7 @@
 
 .k-stat-unit {
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    letter-spacing: 0;
    color: var(--k-text-muted);
 }
@@ -122,7 +122,7 @@
    padding: 0 0.375rem;
    border-radius: var(--k-radius-sm);
    background: color-mix(in oklab, var(--k-stat-tone) 11%, transparent);
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    font-variant-numeric: tabular-nums;
    color: var(--k-stat-tone);
 }

package/dist/styles/data/table.css

@@ -46,7 +46,7 @@
    padding: 0.75rem var(--k-table-pad-x) 0.25rem;
    caption-side: top;
    text-align: left;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    color: var(--k-text);
 }
 
@@ -61,7 +61,7 @@
    padding: 0 var(--k-table-pad-x);
    vertical-align: middle;
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--k-text-muted);
    background: var(--k-subtle);
@@ -157,7 +157,7 @@
 }
 
 .k-table-td.is-strong {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 
@@ -183,7 +183,7 @@
 .k-table-link {
    border-radius: var(--k-radius-xs);
    color: inherit;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    text-decoration: none;
 }
 

package/dist/styles/data/tag.css

@@ -12,7 +12,7 @@
    background: var(--k-surface);
    box-shadow: var(--k-shadow-xs);
    font-size: 0.8125rem;
-   font-weight: 450;
+   font-weight: max(var(--k-font-weight, 400), 450);
    line-height: 1;
    color: var(--k-text);
    white-space: nowrap;

package/dist/styles/data/timeline.css

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

package/dist/styles/data/tree.css

@@ -95,7 +95,7 @@
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 
@@ -259,7 +259,7 @@
 }
 
 .k-tree-sm .k-tree-label {
-   font-weight: 450;
+   font-weight: max(var(--k-font-weight, 400), 450);
    color: inherit;
 }
 

package/dist/styles/feedback/empty-state.css

@@ -63,7 +63,7 @@
 
 .k-empty-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/feedback/loading-host.css

@@ -70,7 +70,7 @@
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    background: var(--k-elevated);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-overlay);

package/dist/styles/feedback/loading-overlay.css

@@ -44,7 +44,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);
    animation: k-pop var(--k-duration-lg) var(--k-ease-out) 120ms backwards;
 }

package/dist/styles/feedback/meter.css

@@ -14,7 +14,7 @@
 }
 
 .k-meter-label {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 

package/dist/styles/feedback/progress.css

@@ -44,7 +44,7 @@
 }
 
 .k-progress-label {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 
@@ -118,7 +118,7 @@
 
 .k-progress-ring-content {
    font-size: calc(var(--k-ring-size, 2.5rem) * 0.26);
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    font-variant-numeric: tabular-nums;
    color: var(--k-text);
 }

package/dist/styles/forced-colors.css

@@ -192,7 +192,7 @@
       background: none;
    }
 
-   :is(.k-btn-solid, .k-btn-soft, .k-btn-ghost, .k-badge) {
+   :is(.k-btn-solid, .k-btn-soft, .k-btn-subtle, .k-btn-ghost, .k-badge) {
       border: 1px solid ButtonText;
    }
 
@@ -212,4 +212,9 @@
       forced-color-adjust: none;
       background: Highlight;
    }
+
+   .k-tab-dot {
+      forced-color-adjust: none;
+      background: CanvasText;
+   }
 }

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;
+}