@xleddyl/443-components-vue 0.3.0 → 0.5.0

package/dist/styles/core/form-field.css

@@ -2,7 +2,7 @@
    --k-icon-size: 0.875rem;
    display: flex;
    flex-direction: column;
-   gap: 0.4375rem;
+   gap: 0.375rem;
    min-width: 0;
 }
 
@@ -46,7 +46,7 @@
 .k-form-field-description {
    margin-top: -0.125rem;
    font-size: 0.75rem;
-   line-height: 1.45;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

package/dist/styles/data/avatar.css

@@ -118,7 +118,7 @@
 
 .k-avatar-group > .k-avatar {
    box-shadow: 0 0 0 2px var(--k-surface);
-   transition: translate var(--k-duration-lg) var(--k-ease-spring);
+   transition: translate var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-avatar-group > .k-avatar + .k-avatar {

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

@@ -6,7 +6,8 @@
 
 .k-description-item {
    display: grid;
-   gap: 0.25rem;
+   align-content: start;
+   gap: 0.125rem;
    min-width: 0;
    padding-block: 0.625rem;
    animation: k-row-in 360ms var(--k-ease-out) backwards;
@@ -51,6 +52,7 @@
 .k-description-details {
    display: flex;
    flex-direction: column;
+   align-items: flex-start;
    gap: 0.125rem;
    min-width: 0;
    font-size: 0.8125rem;
@@ -70,7 +72,7 @@
 @container (max-width: 32rem) {
    .k-description-list-inline .k-description-item {
       grid-template-columns: minmax(0, 1fr);
-      gap: 0.25rem;
+      gap: 0.125rem;
    }
 
    .k-description-list-grid {
@@ -81,7 +83,7 @@
 @media (max-width: 559px) {
    .k-description-list-inline .k-description-item {
       grid-template-columns: minmax(0, 1fr);
-      gap: 0.25rem;
+      gap: 0.125rem;
    }
 
    .k-description-list-grid {

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

@@ -71,7 +71,6 @@
 }
 
 .k-filter-pill[aria-pressed='true'] .k-filter-pill-check > .k-icon {
-   animation: k-icon-pop 300ms var(--k-ease-spring);
 }
 
 .k-filter-pill-count {

package/dist/styles/data/pagination.css

@@ -94,7 +94,6 @@
    border-color: var(--k-field-line);
    box-shadow: var(--k-shadow-xs);
    color: var(--k-text);
-   animation: k-icon-pop 300ms var(--k-ease-spring);
 }
 
 .k-pagination-page:disabled {

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

@@ -3,6 +3,10 @@
    min-width: 0;
 }
 
+.k-selection-bar:not(.is-visible) {
+   display: contents;
+}
+
 .k-selection-bar-sticky {
    position: sticky;
    top: 0;

package/dist/styles/data/stat.css

@@ -57,11 +57,7 @@
    background: var(--k-subtle);
    box-shadow: inset 0 0 0 1px var(--k-line);
    color: var(--k-accent-text);
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
-}
-
-.k-stat.is-interactive:hover .k-stat-icon {
-   transform: scale(1.08) rotate(-4deg);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-stat-body {
@@ -141,7 +137,6 @@
 
 .k-stat-delta-icon {
    stroke-width: 2.25;
-   animation: k-icon-pop 400ms var(--k-ease-spring) 200ms backwards;
 }
 
 .k-stat-delta.is-up .k-stat-delta-icon {

package/dist/styles/data/table.css

@@ -111,7 +111,7 @@
    transition:
       opacity var(--k-duration) var(--k-ease),
       color var(--k-duration) var(--k-ease),
-      transform var(--k-duration-lg) var(--k-ease-spring);
+      transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-table-sort:hover .k-table-sort-icon,
@@ -122,7 +122,6 @@
 
 .k-table-th.is-sorted .k-table-sort-icon {
    color: var(--k-accent-text);
-   animation: k-icon-pop 300ms var(--k-ease-spring);
 }
 
 .k-table-th.is-align-end .k-table-sort {

package/dist/styles/data/tag.css

@@ -108,9 +108,6 @@
 }
 
 .k-tag-remove > .k-icon {
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
-.k-tag-remove:hover:not(:disabled) > .k-icon {
-   transform: rotate(90deg);
-}

package/dist/styles/data/timeline.css

@@ -103,6 +103,7 @@
 
 .k-timeline-description {
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

package/dist/styles/data/tree.css

@@ -107,11 +107,18 @@
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
-   font-family: var(--k-font-mono);
    font-size: 0.75rem;
    color: var(--k-text-dimmed);
 }
 
+.k-tree-description-mono {
+   font-family: var(--k-font-mono);
+}
+
+.k-tree-description-text {
+   color: var(--k-text-muted);
+}
+
 .k-tree-meta {
    flex-shrink: 0;
    font-size: 0.75rem;
@@ -137,7 +144,6 @@
 
 .k-tree-check > .k-icon {
    stroke-width: 2.25;
-   animation: k-icon-pop 300ms var(--k-ease-spring);
 }
 
 .k-tree-empty {

package/dist/styles/feedback/alert.css

@@ -70,7 +70,6 @@
 }
 
 .k-alert-icon > .k-icon {
-   animation: k-icon-pop var(--k-duration-xl) var(--k-ease-spring) 120ms backwards;
 }
 
 .k-alert-body {
@@ -79,6 +78,7 @@
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
+   line-height: 1.4;
    padding-top: 0.0625rem;
 }
 

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

@@ -4,7 +4,7 @@
    display: flex;
    flex-direction: column;
    align-items: center;
-   gap: 0.375rem;
+   gap: 0.125rem;
    padding: 3.5rem 1.5rem;
    overflow: hidden;
    text-align: center;
@@ -34,7 +34,7 @@
 }
 
 .k-empty-sm {
-   gap: 0.25rem;
+   gap: 0.125rem;
    padding: 2rem 1rem;
 }
 
@@ -44,27 +44,27 @@
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
-   margin-bottom: 0.625rem;
+   margin-bottom: 0.875rem;
    border-radius: var(--k-radius-lg);
    background: var(--k-surface);
    box-shadow:
       var(--k-shadow-raised),
       0 6px 16px -6px var(--k-shadow-tint-strong);
    color: var(--k-text-muted);
-   animation: k-float 4s ease-in-out infinite;
 }
 
 .k-empty-sm .k-empty-icon {
    --k-icon-size: 1rem;
    width: 2.25rem;
    height: 2.25rem;
-   margin-bottom: 0.375rem;
+   margin-bottom: 0.5rem;
    border-radius: var(--k-radius-md);
 }
 
 .k-empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
+   line-height: 1.3;
    color: var(--k-text);
 }
 
@@ -75,6 +75,7 @@
 .k-empty-description {
    max-width: 28rem;
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

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

@@ -94,7 +94,7 @@
    background: var(--k-swatch);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--k-text) 14%, transparent);
    transition:
-      scale var(--k-duration-lg) var(--k-ease-spring),
+      scale var(--k-duration-lg) var(--k-ease-out),
       box-shadow var(--k-duration) var(--k-ease);
 }
 

package/dist/styles/forms/combobox.css

@@ -221,7 +221,6 @@
 .k-combobox-option-selected {
    --k-icon-size: 0.875rem;
    color: var(--k-accent-text);
-   animation: k-icon-pop var(--k-duration-lg) var(--k-ease-spring);
 }
 
 .k-combobox-check {

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

@@ -31,7 +31,7 @@
    color: var(--k-text-dimmed);
    transition:
       color var(--k-duration) var(--k-ease),
-      transform var(--k-duration-lg) var(--k-ease-spring);
+      transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-date-picker-trigger:hover:not(:disabled) .k-date-picker-icon {

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

@@ -78,7 +78,7 @@
    box-shadow: var(--k-shadow-raised);
    color: var(--k-text-muted);
    transition:
-      transform var(--k-duration-lg) var(--k-ease-spring),
+      transform var(--k-duration-lg) var(--k-ease-out),
       color var(--k-duration) var(--k-ease);
 }
 
@@ -120,6 +120,14 @@
    color: var(--k-text-muted);
 }
 
+.k-file-input-actions {
+   display: flex;
+   flex-wrap: wrap;
+   align-items: center;
+   justify-content: center;
+   gap: 0.375rem;
+}
+
 .k-file-input-native {
    position: absolute;
    width: 1px;

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

@@ -67,7 +67,7 @@
 }
 
 .k-number-input-step > .k-icon {
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-number-input-step:hover:not(:disabled) {

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

@@ -35,7 +35,7 @@
 }
 
 .k-password-input-action > .k-icon {
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration) var(--k-ease-out);
 }
 
 .k-password-input-action:hover:not(:disabled) {
@@ -47,10 +47,6 @@
    transform: scale(0.85);
 }
 
-.k-password-input-action:hover:not(:disabled) > .k-icon[data-icon='arrow-path'] {
-   transform: rotate(60deg);
-}
-
 .k-password-input-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;

package/dist/styles/forms/switch.css

@@ -82,7 +82,6 @@
 
 .k-switch-thumb > .k-icon {
    stroke-width: 2.5;
-   animation: k-icon-spin var(--k-duration-lg) var(--k-ease-spring);
 }
 
 .k-switch-track[aria-checked='true'] .k-switch-thumb {

package/dist/styles/layout/accordion.css

@@ -4,11 +4,15 @@
    min-width: 0;
 }
 
-.k-accordion-card {
+.k-accordion-card,
+.k-accordion-outline {
    overflow: hidden;
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-lg);
    background: var(--k-surface);
+}
+
+.k-accordion-card {
    box-shadow: var(--k-shadow-xs);
 }
 
@@ -32,6 +36,7 @@
 }
 
 .k-accordion-card .k-accordion-item + .k-accordion-item,
+.k-accordion-outline .k-accordion-item + .k-accordion-item,
 .k-accordion-plain .k-accordion-item + .k-accordion-item {
    border-top: 1px solid var(--k-line);
 }
@@ -95,7 +100,7 @@
 .k-accordion-description {
    font-size: 0.75rem;
    font-weight: 400;
-   line-height: 1.45;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

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);
@@ -63,7 +67,7 @@
    background: var(--k-subtle);
    box-shadow: inset 0 0 0 1px var(--k-line);
    color: var(--k-accent-text);
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-card-heading {
@@ -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 {
@@ -154,10 +164,6 @@
    box-shadow: var(--k-shadow-sm);
 }
 
-.k-card.is-interactive:hover .k-card-icon {
-   transform: scale(1.08) rotate(-4deg);
-}
-
 .k-card.is-interactive:active {
    scale: 0.99;
 }

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

@@ -14,14 +14,14 @@
    grid-area: 1 / 1;
    transition:
       opacity var(--k-duration) var(--k-ease),
-      transform var(--k-duration-lg) var(--k-ease-spring);
+      transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-copy-icon.is-done {
    stroke-width: 2;
    color: var(--k-success);
    opacity: 0;
-   transform: scale(0.4) rotate(-45deg);
+   transform: scale(0.6);
 }
 
 .k-copy-button.is-copied .k-copy-icon.is-idle {

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

@@ -47,7 +47,7 @@
    color: var(--k-text-dimmed);
    transition:
       color var(--k-duration) var(--k-ease),
-      transform var(--k-duration-lg) var(--k-ease-spring);
+      transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-navlink:hover .k-navlink-icon {
@@ -57,7 +57,6 @@
 .k-navlink.is-active .k-navlink-icon,
 .k-navlink[aria-current='page'] .k-navlink-icon {
    color: var(--k-accent-text);
-   animation: k-icon-pop 360ms var(--k-ease-spring);
 }
 
 .k-navlink-label {

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/sidebar-nav.css

@@ -20,7 +20,7 @@
    --k-icon-size: 0.875rem;
    flex: none;
    color: var(--k-text-dimmed);
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-navgroup.is-open .k-navgroup-chevron {

package/dist/styles/layout/sidebar.css

@@ -24,7 +24,7 @@
 }
 
 .k-sidebar-collapse > .k-icon {
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-sidebar-nav {

package/dist/styles/layout/tabs.css

@@ -23,6 +23,27 @@
    flex: 1;
 }
 
+.k-tabs.is-stretch {
+   flex: 1;
+   min-height: 0;
+}
+
+.k-tabs.is-stretch > .k-tabs-panel {
+   display: flex;
+   flex: 1;
+   flex-direction: column;
+   min-height: 0;
+}
+
+.k-tabs.is-inset {
+   gap: 0;
+}
+
+.k-tabs.is-inset > .k-tabs-list {
+   max-width: calc(100% - 1.75rem);
+   margin: 0.75rem 0.875rem 0;
+}
+
 .k-tab {
    --k-icon-size: 0.9375rem;
    position: relative;
@@ -57,12 +78,11 @@
 }
 
 .k-tab-icon {
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-tab[aria-selected='true'] .k-tab-icon {
    color: var(--k-accent-text);
-   animation: k-icon-pop 360ms var(--k-ease-spring);
 }
 
 .k-tab-badge {

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

@@ -62,11 +62,10 @@
 }
 
 .k-theme-switch-icon {
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-theme-switch-option.is-active .k-theme-switch-icon {
-   animation: k-icon-spin var(--k-duration-xl) var(--k-ease-spring);
 }
 
 .k-theme-switch-sm .k-theme-switch-option {
@@ -75,5 +74,4 @@
 }
 
 .k-theme-cycle-icon {
-   animation: k-icon-spin var(--k-duration-xl) var(--k-ease-spring);
 }

package/dist/styles/overlays/command.css

@@ -148,7 +148,7 @@
    color: var(--k-text-dimmed);
    transition:
       color var(--k-duration) var(--k-ease),
-      transform var(--k-duration-lg) var(--k-ease-spring);
+      transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-command-option.is-active .k-command-option-icon {

package/dist/styles/overlays/confirm.css

@@ -24,7 +24,6 @@
    border-radius: var(--k-radius-full);
    color: var(--k-confirm-tone);
    background: color-mix(in oklab, var(--k-confirm-tone) 12%, transparent);
-   animation: k-icon-pop var(--k-duration-xl) var(--k-ease-spring) 120ms;
 }
 
 .k-confirm-danger .k-confirm-icon {

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,6 +94,14 @@
    --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;
@@ -118,4 +131,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;
+   }
 }