@xleddyl/443-components-vue 0.4.0 → 0.6.0

package/dist/styles/layout/card.css

@@ -47,6 +47,10 @@
    padding: var(--k-card-pad) var(--k-card-pad) 0;
 }
 
+.k-card-header:last-child {
+   padding-bottom: var(--k-card-pad);
+}
+
 .k-card-pad-none > .k-card-header {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--k-line);
@@ -74,15 +78,21 @@
    min-width: 0;
 }
 
+.k-card-icon + .k-card-heading {
+   justify-content: center;
+   min-height: 2rem;
+}
+
 .k-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
-   line-height: 1.35;
+   line-height: 1.3;
    color: var(--k-text);
 }
 
 .k-card-description {
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 
@@ -102,7 +112,7 @@
 }
 
 .k-card-header + .k-card-body {
-   padding-top: 0.875rem;
+   padding-top: min(0.875rem, var(--k-card-pad));
 }
 
 .k-card-pad-none > .k-card-header + .k-card-body {

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/page-header.css

@@ -45,7 +45,7 @@
 .k-page-header-text {
    display: flex;
    flex-direction: column;
-   gap: 0.1875rem;
+   gap: 0.125rem;
    min-width: 0;
 }
 
@@ -67,6 +67,7 @@
 .k-page-header-description {
    max-width: 44rem;
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

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

@@ -14,7 +14,9 @@
 
 .k-drawer-bottom {
    flex-direction: column;
+   align-items: center;
    justify-content: flex-end;
+   padding: 1rem 1rem 0;
 }
 
 .k-drawer-panel {
@@ -50,10 +52,12 @@
 }
 
 .k-drawer-bottom > .k-drawer-panel {
-   --k-drawer-hidden: translateY(calc(100% + 1rem));
-   max-width: none;
+   --k-drawer-hidden: translateY(100%);
+   max-width: var(--k-drawer-sheet-width, 50rem);
    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;
 }
 
 .k-drawer-sm > .k-drawer-panel {
@@ -74,6 +78,7 @@
 
 .k-drawer-bottom.k-drawer-sm > .k-drawer-panel {
    --k-drawer-size: 30dvh;
+   --k-drawer-sheet-width: 32rem;
 }
 
 .k-drawer-bottom.k-drawer-md > .k-drawer-panel {
@@ -89,11 +94,18 @@
    --k-drawer-size: 100%;
 }
 
+.k-drawer-bottom.k-drawer-xl > .k-drawer-panel {
+   --k-drawer-sheet-width: 64rem;
+}
+
+.k-drawer-bottom.k-drawer-full > .k-drawer-panel {
+   --k-drawer-sheet-width: none;
+}
+
 .k-drawer-header {
    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 {
@@ -118,4 +130,12 @@
    .k-drawer-right > .k-drawer-panel {
       max-width: calc(100% - 2rem);
    }
+
+   .k-drawer.k-drawer-bottom {
+      padding: 2rem 0 0;
+   }
+
+   .k-drawer-bottom > .k-drawer-panel {
+      max-width: none;
+   }
 }

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;

package/dist/styles/overlays/modal.css

@@ -8,7 +8,7 @@
    max-height: none;
    margin: 0;
    padding: 1rem;
-   overflow: hidden;
+   overflow: clip;
    color: var(--k-text-toned);
    background: transparent;
    border: 0;
@@ -145,14 +145,23 @@
 }
 
 .k-modal-header {
-   padding: 1.125rem 1rem 0 1.25rem;
+   padding: 1.125rem 1rem 0.75rem 1.25rem;
+}
+
+.k-dialog-header-slot {
+   display: flex;
+   flex: 1;
+   align-items: flex-start;
+   justify-content: space-between;
+   gap: 1rem;
+   min-width: 0;
 }
 
 .k-modal-heading,
 .k-drawer-heading {
    display: flex;
    flex-direction: column;
-   gap: 0.25rem;
+   gap: 0.125rem;
    min-width: 0;
    padding-top: 0.125rem;
 }
@@ -176,7 +185,7 @@
 .k-drawer-title {
    font-size: 0.9375rem;
    font-weight: 600;
-   line-height: 1.35;
+   line-height: 1.3;
    color: var(--k-text);
    letter-spacing: -0.015em;
 }
@@ -184,6 +193,7 @@
 .k-modal-description,
 .k-drawer-description {
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 
@@ -201,7 +211,18 @@
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
-   padding: 1rem 1.25rem 1.25rem;
+   padding: 0.25rem 1.25rem 1.25rem;
+}
+
+.k-modal-body,
+.k-drawer-body {
+   border-top: 1px solid transparent;
+   transition: border-color var(--k-duration-lg) var(--k-ease);
+}
+
+.k-modal-header + .k-modal-body.is-overflow-top,
+.k-drawer-header + .k-drawer-body.is-overflow-top {
+   border-top-color: var(--k-line);
 }
 
 .k-modal-body.is-flush,
@@ -219,15 +240,18 @@
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    background: var(--k-subtle);
-   border-top: 1px solid var(--k-line);
+   border-top: 1px solid transparent;
+   transition: border-color var(--k-duration-lg) var(--k-ease);
+}
+
+.k-modal-body.is-overflow-bottom + .k-modal-footer,
+.k-drawer-body.is-overflow-bottom + .k-drawer-footer {
+   border-top-color: var(--k-line);
 }
 
 @media (max-width: 640px) {
    .k-modal.is-sheet {
       padding: 2rem 0 0;
-   }
-
-   .k-modal.is-sheet {
       place-items: end stretch;
    }
 

package/dist/styles/overlays/toast.css

@@ -88,8 +88,7 @@
    padding: 0.625rem 0.875rem 0.625rem 0.625rem;
    overflow: hidden;
    font-family: var(--k-font-sans);
-   background: light-dark(var(--k-elevated), var(--k-fill));
-   border: 1px solid var(--k-line-strong);
+   background: var(--k-elevated);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-overlay);
    opacity: 0;

package/dist/styles/presets.css

@@ -22,14 +22,14 @@
    --k-text: light-dark(#111114, #f2f2f3);
    --k-text-toned: light-dark(#3b3b42, #cdcdd3);
    --k-text-muted: light-dark(#6b6b75, #9b9ba5);
-   --k-text-dimmed: light-dark(#9d9da7, #686872);
+   --k-text-dimmed: light-dark(#85858e, #6e6e78);
    --k-text-inverted: light-dark(#ffffff, #111114);
 
    --k-accent-text: light-dark(
       color-mix(in oklab, var(--k-accent) 90%, black),
       color-mix(in oklab, var(--k-accent) 55%, white)
    );
-   --k-ring: color-mix(in oklab, var(--k-accent) 70%, transparent);
+   --k-ring: light-dark(var(--k-accent-text), color-mix(in oklab, var(--k-accent) 70%, white));
    --k-accent-soft: color-mix(in oklab, var(--k-accent) 11%, transparent);
    --k-ring-soft: color-mix(in oklab, var(--k-accent) 18%, transparent);
    --k-scrim: light-dark(rgb(22 22 30 / 0.22), rgb(0 0 0 / 0.55));
@@ -65,7 +65,7 @@
    --k-text-inverted: light-dark(#ffffff, #06140e);
 
    --k-accent-text: light-dark(#0d4631, #bde68f);
-   --k-ring: light-dark(rgb(13 70 49 / 0.7), rgb(189 230 143 / 0.75));
+   --k-ring: light-dark(#0d4631, #bde68f);
    --k-accent-soft: color-mix(in oklab, var(--k-accent) 11%, transparent);
    --k-ring-soft: color-mix(in oklab, var(--k-accent) 18%, transparent);
    --k-scrim: light-dark(rgb(4 22 15 / 0.32), rgb(0 0 0 / 0.6));
@@ -102,7 +102,7 @@
 
    --k-accent-text: light-dark(#5c4300, #ffcf4d);
    --k-accent-soft: light-dark(rgb(255 189 0 / 0.16), rgb(255 189 0 / 0.12));
-   --k-ring: light-dark(rgb(0 0 0 / 0.72), rgb(255 189 0 / 0.85));
+   --k-ring: light-dark(#474747, #ffbd00);
    --k-ring-soft: light-dark(rgb(255 189 0 / 0.38), rgb(255 189 0 / 0.24));
    --k-scrim: light-dark(rgb(0 0 0 / 0.32), rgb(0 0 0 / 0.6));
 }