@xleddyl/443-components-vue 0.5.0 → 0.6.2

package/dist/styles/forms/date-picker.css

@@ -22,10 +22,6 @@
    cursor: default;
 }
 
-.k-date-picker-trigger:disabled {
-   cursor: not-allowed;
-}
-
 .k-date-picker-icon,
 .k-date-picker-chevron {
    color: var(--k-text-dimmed);
@@ -44,21 +40,21 @@
 }
 
 .k-date-picker.is-open .k-date-picker-trigger {
-   border-color: var(--k-accent);
+   border-color: var(--k-ring);
    box-shadow: var(--k-focus-ring);
 }
 
 .k-date-picker-value {
    flex: 1;
    min-width: 0;
-   overflow: hidden;
+   overflow-x: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
 }
 
 .k-date-picker.is-empty .k-date-picker-value {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-date-picker.has-clear .k-date-picker-chevron {

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

@@ -44,9 +44,10 @@
 }
 
 .k-file-input-dropzone:focus-visible {
-   outline: none;
+   outline: 2px solid transparent;
+   outline-offset: 2px;
    border-style: solid;
-   border-color: var(--k-accent);
+   border-color: var(--k-ring);
    box-shadow: var(--k-focus-ring);
 }
 
@@ -187,7 +188,7 @@
 }
 
 .k-file-input-name {
-   overflow: hidden;
+   overflow-x: clip;
    font-size: 0.8125rem;
    color: var(--k-text);
    text-overflow: ellipsis;

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

@@ -2,9 +2,15 @@
    --k-input-group-radius: var(--k-radius-md);
    display: inline-flex;
    align-items: stretch;
+   border-radius: var(--k-input-group-radius);
+   box-shadow: var(--k-shadow-xs);
    isolation: isolate;
 }
 
+.k-input-group .k-field:not(:focus, :focus-within) {
+   box-shadow: none;
+}
+
 .k-input-group-sm {
    --k-input-group-radius: var(--k-radius-sm);
 }

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

@@ -1,6 +1,6 @@
 .k-number-input {
    --k-icon-size: 0.875rem;
-   --k-number-step-size: 1.375rem;
+   --k-number-step-size: 1.5rem;
    position: relative;
    display: flex;
    width: 100%;
@@ -8,7 +8,7 @@
 }
 
 .k-number-input-sm {
-   --k-number-step-size: 1.125rem;
+   --k-number-step-size: 1.5rem;
 }
 
 .k-number-input-lg {

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

@@ -53,7 +53,7 @@
 }
 
 .k-password-input-action.is-done {
-   color: var(--k-success);
+   color: var(--k-success-text);
 }
 
 .k-password-input-action.is-done > .k-icon {
@@ -62,6 +62,7 @@
 
 .k-password-meter {
    --k-meter-tone: var(--k-danger);
+   --k-meter-text: var(--k-danger-text);
    display: flex;
    align-items: center;
    gap: 0.625rem;
@@ -70,6 +71,7 @@
 
 .k-password-meter[data-score='2'] {
    --k-meter-tone: var(--k-warning);
+   --k-meter-text: var(--k-warning-text);
 }
 
 .k-password-meter[data-score='3'] {
@@ -78,6 +80,7 @@
 
 .k-password-meter[data-score='4'] {
    --k-meter-tone: var(--k-success);
+   --k-meter-text: var(--k-success-text);
 }
 
 .k-password-meter-bar {
@@ -103,5 +106,5 @@
    font-size: 0.75rem;
    font-weight: 500;
    text-align: right;
-   color: var(--k-meter-tone);
+   color: var(--k-meter-text, var(--k-meter-tone));
 }

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

@@ -91,7 +91,9 @@
 }
 
 .k-pin-input-cell.is-active {
-   border-color: var(--k-accent);
+   outline: 2px solid transparent;
+   outline-offset: 2px;
+   border-color: var(--k-ring);
    box-shadow: var(--k-focus-ring);
 }
 
@@ -100,7 +102,7 @@
 }
 
 .k-pin-input-placeholder {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-pin-input-caret {

package/dist/styles/forms/segmented.css

@@ -94,7 +94,7 @@
 }
 
 .k-segmented-label {
-   overflow: hidden;
+   overflow-x: clip;
    text-overflow: ellipsis;
 }
 
@@ -139,7 +139,7 @@
 }
 
 .k-segmented-item.is-muted:not([aria-checked='true']) {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-segmented-item.is-muted:not([aria-checked='true']) > .k-icon {

package/dist/styles/forms/select.css

@@ -23,7 +23,7 @@
 }
 
 .k-select.is-empty .k-select-field {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-select-field option,
@@ -111,8 +111,8 @@
       display: flex;
       align-items: center;
       gap: 0.5rem;
-      min-height: 2rem;
-      padding: 0.375rem 0.5rem;
+      min-height: 1.875rem;
+      padding: 0.25rem 0.5rem;
       border-radius: var(--k-radius-sm);
       font-size: 0.8125rem;
       color: var(--k-text-toned);
@@ -125,7 +125,7 @@
 
    .k-select .k-select-field option:hover,
    .k-select .k-select-field option:focus-visible {
-      outline: none;
+      outline: 2px solid transparent;
       background: var(--k-hover);
       color: var(--k-text);
    }
@@ -147,14 +147,14 @@
    }
 
    .k-select .k-select-field .k-select-placeholder {
-      color: var(--k-text-dimmed);
+      color: var(--k-text-muted);
    }
 
    .k-select .k-select-field optgroup {
       padding-top: 0.25rem;
       font-size: 0.75rem;
       font-weight: 600;
-      color: var(--k-text-dimmed);
+      color: var(--k-text-muted);
       background: transparent;
    }
 }

package/dist/styles/forms/slider.css

@@ -44,7 +44,8 @@
 }
 
 .k-slider-input:focus-visible {
-   outline: none;
+   outline: 2px solid transparent;
+   outline-offset: 2px;
 }
 
 .k-slider-input:disabled {
@@ -57,7 +58,7 @@
    background: linear-gradient(
       to right,
       var(--k-slider-fill) var(--k-slider-pct),
-      var(--k-line-strong) var(--k-slider-pct)
+      var(--k-field-line) var(--k-slider-pct)
    );
 }
 
@@ -67,7 +68,7 @@
    background: linear-gradient(
       to right,
       var(--k-slider-fill) var(--k-slider-pct),
-      var(--k-line-strong) var(--k-slider-pct)
+      var(--k-field-line) var(--k-slider-pct)
    );
 }
 
@@ -170,6 +171,6 @@
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
    font-variant-numeric: tabular-nums;
 }

package/dist/styles/forms/switch.css

@@ -43,7 +43,9 @@
    margin-top: calc((1lh - var(--k-switch-height)) / 2);
    border-radius: var(--k-radius-full);
    background: var(--k-line-strong);
-   box-shadow: inset 0 1px 2px var(--k-shadow-tint);
+   box-shadow:
+      inset 0 0 0 1px var(--k-field-line),
+      inset 0 1px 2px var(--k-shadow-tint);
    transition:
       background-color 200ms var(--k-ease),
       box-shadow var(--k-duration) var(--k-ease);
@@ -55,6 +57,7 @@
 
 .k-switch-track[aria-checked='true'] {
    background: var(--k-accent);
+   box-shadow: inset 0 1px 2px var(--k-shadow-tint);
 }
 
 .k-switch-track[aria-checked='true']:hover:not(:disabled) {
@@ -101,6 +104,7 @@
 
 .k-switch.is-invalid .k-switch-track[aria-checked='false'] {
    box-shadow:
+      inset 0 0 0 1px var(--k-danger),
       inset 0 1px 2px var(--k-shadow-tint),
       0 0 0 1px var(--k-danger);
 }

package/dist/styles/index.css

@@ -11,4 +11,5 @@
 @import './layout.css' layer(k.components);
 @import './feedback.css' layer(k.components);
 @import './templates.css' layer(k.components);
+@import './forced-colors.css' layer(k.components);
 @import './utilities.css' layer(k.utilities);

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

@@ -8,7 +8,6 @@
    height: var(--k-shell-height, 100dvh);
    min-height: 0;
    overflow: hidden;
-   overscroll-behavior: none;
    background: var(--k-canvas);
    container: k-shell / inline-size;
 }
@@ -17,7 +16,6 @@ html:has(.k-shell),
 html:has(.k-shell) body,
 html.k-root,
 html.k-root body {
-   overflow-x: clip;
    overscroll-behavior: none;
 }
 
@@ -59,7 +57,6 @@ html.k-root body {
    margin: var(--k-shell-gap) var(--k-shell-gap) var(--k-shell-gap) 0;
    overflow-x: hidden;
    overflow-y: auto;
-   overscroll-behavior: contain;
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-xl);
@@ -67,6 +64,10 @@ html.k-root body {
    scroll-padding-top: calc(var(--k-shell-topbar) + 1rem);
 }
 
+.k-shell-body:has(.k-form-page-footer.is-sticky, .k-savebar) {
+   scroll-padding-bottom: 5.5rem;
+}
+
 .k-shell-topbar {
    position: sticky;
    top: 0;
@@ -275,6 +276,17 @@ html.k-root body {
       display: inline-flex;
    }
 
+   .k-shell-close {
+      position: absolute;
+      top: 0.875rem;
+      inset-inline-end: 0.625rem;
+      z-index: 1;
+   }
+
+   .k-shell-sidebar:has(> .k-shell-close) .k-sidebar-header {
+      padding-inline-end: 2.25rem;
+   }
+
    .k-shell-body,
    .k-shell[data-variant] .k-shell-body {
       margin: 0;

package/dist/styles/layout/copy-button.css

@@ -40,5 +40,5 @@
 }
 
 .k-copy-button.is-copied .k-copy-label {
-   color: var(--k-success);
+   color: var(--k-success-text);
 }

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

@@ -1,38 +1,6 @@
 .k-navlink {
    --k-icon-size: 1rem;
    position: relative;
-   display: flex;
-   align-items: center;
-   gap: 0.5rem;
-   min-height: 1.875rem;
-   padding-inline: 0.5rem;
-   border-radius: var(--k-radius-md);
-   font-size: 0.8125rem;
-   font-weight: 450;
-   color: var(--k-text-toned);
-   text-decoration: none;
-   transition:
-      background-color var(--k-duration) var(--k-ease),
-      box-shadow var(--k-duration) var(--k-ease),
-      color var(--k-duration) var(--k-ease),
-      scale var(--k-duration) var(--k-ease);
-}
-
-.k-navlink:hover:not(.is-disabled) {
-   background: var(--k-hover);
-   color: var(--k-text);
-}
-
-.k-navlink:active:not(.is-disabled) {
-   scale: 0.985;
-}
-
-.k-navlink.is-active,
-.k-navlink[aria-current='page'] {
-   background: var(--k-surface);
-   box-shadow: var(--k-shadow-raised);
-   font-weight: 500;
-   color: var(--k-text);
 }
 
 .k-navlink.is-disabled {
@@ -62,7 +30,7 @@
 .k-navlink-label {
    flex: 1;
    min-width: 0;
-   overflow: hidden;
+   overflow-x: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
 }

package/dist/styles/layout/separator.css

@@ -33,6 +33,6 @@
 .k-separator-label {
    font-size: 0.75rem;
    font-weight: 500;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
    white-space: nowrap;
 }

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

@@ -47,19 +47,21 @@
    flex-direction: column;
    gap: 1px;
    min-height: 0;
+   margin-right: -0.25rem;
    overflow: hidden;
-   padding: 0 1px 0 1.25rem;
+   padding: 0 0.25rem 0 1.25rem;
 }
 
 .k-navgroup.is-open .k-navgroup-list {
-   padding-block: 1px;
+   margin-block: -0.1875rem;
+   padding-block: 0.25rem;
 }
 
 .k-navgroup-list::before {
    content: '';
    position: absolute;
-   top: 0.25rem;
-   bottom: 0.25rem;
+   top: 0.4375rem;
+   bottom: 0.4375rem;
    left: 0.9375rem;
    width: 1px;
    background: var(--k-line);
@@ -68,3 +70,12 @@
 .k-navgroup-list > .k-navlink {
    margin-left: 0.375rem;
 }
+
+.k-navgroup-list > .k-navlink:focus-visible {
+   outline-offset: -2px;
+}
+
+.k-navgroup-trigger.is-menu-open {
+   background: var(--k-hover);
+   color: var(--k-text);
+}

package/dist/styles/layout/sidebar.css

@@ -2,7 +2,6 @@
    display: flex;
    flex: 1;
    flex-direction: column;
-   gap: 1.25rem;
    min-height: 0;
    padding: 0.875rem 0.625rem 0.625rem;
 }
@@ -33,17 +32,27 @@
    flex-direction: column;
    gap: 1.125rem;
    min-height: 0;
-   margin-inline: -0.25rem;
-   padding: 0.125rem 0.25rem;
+   margin: 0.625rem -0.625rem 0;
+   padding: 0.75rem 0.625rem 0.375rem;
    overflow-x: hidden;
    overflow-y: auto;
-   overscroll-behavior: contain;
+   border-block: 1px solid transparent;
+   transition: border-color var(--k-duration-lg) var(--k-ease);
+}
+
+.k-sidebar-nav.is-overflow-top {
+   border-top-color: var(--k-line);
+}
+
+.k-sidebar-nav.is-overflow-bottom {
+   border-bottom-color: var(--k-line);
 }
 
 .k-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
+   padding-top: 0.5rem;
 }
 
 .k-sidebar-section {
@@ -58,12 +67,17 @@
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-sidebar-top {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
-   margin-top: -0.5rem;
+   margin-top: 0.75rem;
+}
+
+.k-sidebar-top:first-child,
+.k-sidebar-nav:first-child {
+   margin-top: 0;
 }

package/dist/styles/layout/tabs.css

@@ -64,6 +64,11 @@
       box-shadow var(--k-duration) var(--k-ease);
 }
 
+.k-tab:focus-visible {
+   border-radius: var(--k-radius-sm);
+   outline-offset: -2px;
+}
+
 .k-tab:hover:not(:disabled) {
    color: var(--k-text);
 }
@@ -225,20 +230,20 @@
 
 .k-tab-badge-info {
    --k-tab-badge-tone: var(--k-info);
-   --k-tab-badge-text: var(--k-info);
+   --k-tab-badge-text: var(--k-info-text);
 }
 
 .k-tab-badge-success {
    --k-tab-badge-tone: var(--k-success);
-   --k-tab-badge-text: var(--k-success);
+   --k-tab-badge-text: var(--k-success-text);
 }
 
 .k-tab-badge-warning {
    --k-tab-badge-tone: var(--k-warning);
-   --k-tab-badge-text: var(--k-warning);
+   --k-tab-badge-text: var(--k-warning-text);
 }
 
 .k-tab-badge-danger {
    --k-tab-badge-tone: var(--k-danger);
-   --k-tab-badge-text: var(--k-danger);
+   --k-tab-badge-text: var(--k-danger-text);
 }

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

@@ -65,13 +65,7 @@
    transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
-.k-theme-switch-option.is-active .k-theme-switch-icon {
-}
-
 .k-theme-switch-sm .k-theme-switch-option {
    --k-icon-size: 0.875rem;
    font-size: 0.75rem;
 }
-
-.k-theme-cycle-icon {
-}

package/dist/styles/overlays/command.css

@@ -8,7 +8,7 @@
    height: var(--k-size-sm);
    padding: 0 0.375rem 0 0.625rem;
    font-size: 0.8125rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
    background: var(--k-field);
    border: 1px solid var(--k-field-line);
    border-radius: var(--k-radius-md);
@@ -21,13 +21,13 @@
 }
 
 .k-command-trigger:hover {
-   color: var(--k-text-muted);
    border-color: var(--k-line-strong);
 }
 
 .k-command-trigger:focus-visible {
-   outline: none;
-   border-color: var(--k-accent);
+   outline: 2px solid transparent;
+   outline-offset: 2px;
+   border-color: var(--k-ring);
    box-shadow: var(--k-focus-ring);
 }
 
@@ -77,11 +77,11 @@
 }
 
 .k-command-input::placeholder {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-command-input:focus-visible {
-   outline: none;
+   outline: 2px solid transparent;
 }
 
 .k-command-body {
@@ -118,13 +118,13 @@
 .k-command-group-description {
    min-width: 0;
    font-weight: 400;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-command-notice {
    padding: 0.5rem 0.625rem 0.25rem;
    font-size: 0.75rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
    text-align: center;
 }
 
@@ -168,12 +168,6 @@
    color: var(--k-text);
 }
 
-.k-command-option-description {
-   overflow: hidden;
-   text-overflow: ellipsis;
-   white-space: nowrap;
-}
-
 .k-command-option-shortcut {
    display: inline-flex;
    gap: 0.125rem;
@@ -185,7 +179,7 @@
    gap: 1rem;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
    border-top: 1px solid var(--k-line);
 }
 

package/dist/styles/overlays/confirm.css

@@ -65,6 +65,6 @@
    gap: 0.375rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
-   color: var(--k-danger);
+   color: var(--k-danger-text);
    animation: k-enter var(--k-duration-lg) var(--k-ease-out);
 }

package/dist/styles/overlays/drawer.css

@@ -106,7 +106,6 @@
    align-items: center;
    min-height: 3.5rem;
    padding: 0.625rem 0.75rem 0.625rem 1.5rem;
-   border-bottom: 1px solid var(--k-line);
 }
 
 .k-drawer-actions {

package/dist/styles/overlays/menu.css

@@ -14,23 +14,11 @@
 
 .k-menu-item {
    --k-icon-size: 1rem;
-   display: flex;
-   align-items: center;
-   gap: 0.5rem;
    width: 100%;
-   min-height: 1.875rem;
-   padding: 0.25rem 0.5rem;
-   font-size: 0.8125rem;
    color: var(--k-text);
    text-align: left;
    text-decoration: none;
-   border-radius: var(--k-radius-sm);
-   outline: none;
-   user-select: none;
-   -webkit-user-select: none;
-   transition:
-      background-color var(--k-duration) var(--k-ease),
-      color var(--k-duration) var(--k-ease);
+   outline: 2px solid transparent;
 }
 
 .k-menu-item:focus,
@@ -58,7 +46,7 @@
 .k-menu-item-danger,
 .k-menu-item-danger .k-menu-item-icon,
 .k-menu-item-danger:focus .k-menu-item-icon {
-   color: var(--k-danger);
+   color: var(--k-danger-text);
 }
 
 .k-menu-item-danger:focus {
@@ -102,9 +90,6 @@
    color: var(--k-accent-text);
 }
 
-.k-menu-item-indicator > .k-icon {
-}
-
 .k-menu-item-dot {
    width: 0.375rem;
    height: 0.375rem;