@xleddyl/443-components-vue 0.2.3 → 0.4.0

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

@@ -0,0 +1,89 @@
+.k-selection-bar {
+   display: flex;
+   min-width: 0;
+}
+
+.k-selection-bar:not(.is-visible) {
+   display: contents;
+}
+
+.k-selection-bar-sticky {
+   position: sticky;
+   top: 0;
+   z-index: 15;
+}
+
+.k-selection-bar-floating {
+   position: sticky;
+   bottom: 1rem;
+   z-index: 15;
+   justify-content: center;
+   pointer-events: none;
+}
+
+.k-selection-bar-panel {
+   display: flex;
+   flex: 1;
+   flex-wrap: wrap;
+   align-items: center;
+   gap: 0.375rem 0.5rem;
+   min-width: 0;
+   min-height: var(--k-size-sm);
+   animation: k-pop 200ms var(--k-ease-out);
+}
+
+.k-selection-bar-sticky .k-selection-bar-panel {
+   padding: 0.375rem 0.375rem 0.375rem 0.75rem;
+   border: 1px solid var(--k-accent-line);
+   border-radius: var(--k-radius-md);
+   background: color-mix(in oklab, var(--k-accent-soft) 60%, var(--k-surface));
+   box-shadow: var(--k-shadow-sm);
+}
+
+.k-selection-bar-floating .k-selection-bar-panel {
+   flex: 0 1 auto;
+   width: min(100%, 40rem);
+   padding: 0.5rem 0.5rem 0.5rem 0.875rem;
+   border-radius: var(--k-radius-lg);
+   background: var(--k-elevated);
+   box-shadow: var(--k-shadow-overlay);
+   pointer-events: auto;
+   animation: k-rise 320ms var(--k-ease-out) both;
+}
+
+.k-selection-bar-count {
+   display: inline-flex;
+   align-items: center;
+   gap: 0.5rem;
+   font-size: 0.8125rem;
+   font-weight: 600;
+   font-variant-numeric: tabular-nums;
+   white-space: nowrap;
+   color: var(--k-text);
+}
+
+.k-selection-bar-dot {
+   width: 0.5rem;
+   height: 0.5rem;
+   flex: none;
+   border-radius: var(--k-radius-full);
+   background: var(--k-accent);
+   box-shadow: 0 0 0 3px var(--k-accent-soft);
+}
+
+.k-selection-bar-actions {
+   display: flex;
+   flex-wrap: wrap;
+   align-items: center;
+   gap: 0.375rem;
+   margin-left: auto;
+}
+
+.k-selection-bar-clear {
+   flex: none;
+   margin-left: auto;
+}
+
+.k-selection-bar-actions + .k-selection-bar-clear {
+   margin-left: 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 {
@@ -255,7 +254,6 @@
    margin-top: -0.125rem;
    border: solid var(--k-accent-contrast);
    border-width: 0 0 2px 2px;
-   rotate: -45deg;
    opacity: 0;
    scale: 0.4;
    transition:

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/tree.css

@@ -107,13 +107,174 @@
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
-   font-family: var(--k-font-mono);
-   font-size: 0.71875rem;
+   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;
    color: var(--k-text-dimmed);
 }
+
+.k-tree.is-invalid.is-bordered {
+   border-color: var(--k-danger);
+}
+
+.k-tree.is-disabled {
+   opacity: 0.6;
+}
+
+.k-tree-check {
+   --k-icon-size: 0.875rem;
+   display: grid;
+   place-items: center;
+   width: 1rem;
+   flex: none;
+   color: var(--k-accent-text);
+}
+
+.k-tree-check > .k-icon {
+   stroke-width: 2.25;
+}
+
+.k-tree-empty {
+   padding: 0.75rem 1rem;
+   font-size: 0.8125rem;
+   color: var(--k-text-dimmed);
+}
+
+.k-tree-handle {
+   display: grid;
+   place-items: center;
+   width: 1rem;
+   height: 1.5rem;
+   flex: none;
+   margin-right: -0.25rem;
+   border-radius: var(--k-radius-xs);
+   color: var(--k-text-dimmed);
+   cursor: grab;
+   opacity: 0.6;
+   transition:
+      opacity var(--k-duration) var(--k-ease),
+      color var(--k-duration) var(--k-ease),
+      background-color var(--k-duration) var(--k-ease);
+}
+
+.k-tree-handle > svg {
+   width: 0.875rem;
+   height: 0.875rem;
+}
+
+.k-tree-row:is(:hover, :focus-visible) > .k-tree-handle:not(.is-disabled) {
+   opacity: 1;
+}
+
+.k-tree-handle:hover:not(.is-disabled) {
+   background: var(--k-hover);
+   color: var(--k-text);
+}
+
+.k-tree-handle:active {
+   cursor: grabbing;
+}
+
+.k-tree-handle.is-disabled {
+   opacity: 0.25;
+   cursor: not-allowed;
+}
+
+.k-tree-row.is-moving {
+   opacity: 0.45;
+}
+
+.k-tree-row[data-drop='before'] {
+   box-shadow: inset 0 2px 0 var(--k-accent);
+}
+
+.k-tree-row[data-drop='after'] {
+   box-shadow: inset 0 -2px 0 var(--k-accent);
+}
+
+.k-tree-row[data-drop='inside'] {
+   background: var(--k-accent-soft);
+   box-shadow: inset 0 0 0 1px var(--k-accent-line);
+}
+
+.k-tree-sm {
+   gap: 1px;
+}
+
+.k-tree-sm:not(.is-bordered) {
+   overflow: visible;
+   background: transparent;
+}
+
+.k-tree-sm.is-bordered {
+   padding: 0.25rem;
+   border-radius: var(--k-radius-md);
+}
+
+.k-tree-sm .k-tree-row {
+   gap: 0.375rem;
+   min-height: 1.875rem;
+   padding: 0.25rem 0.5rem 0.25rem calc(0.25rem + var(--k-tree-level, 0) * 1rem);
+   border-radius: var(--k-radius-sm);
+   color: var(--k-text-toned);
+   cursor: pointer;
+}
+
+.k-tree-sm .k-tree-row + .k-tree-row {
+   border-top: 0;
+}
+
+.k-tree-sm .k-tree-row:hover:not([aria-disabled='true']) {
+   background: var(--k-hover);
+}
+
+.k-tree-sm .k-tree-row[aria-selected='true'] {
+   background: var(--k-accent-soft);
+}
+
+.k-tree-sm .k-tree-row[aria-disabled='true'] {
+   opacity: 0.4;
+}
+
+.k-tree-sm .k-tree-toggle {
+   width: 1rem;
+   height: 1rem;
+}
+
+.k-tree-sm .k-tree-icon {
+   --k-icon-size: 1rem;
+   width: auto;
+   height: auto;
+   background: none;
+   box-shadow: none;
+   color: inherit;
+}
+
+.k-tree-sm .k-tree-label {
+   font-weight: 450;
+   color: inherit;
+}
+
+.k-tree-sm .k-tree-row[aria-selected='true'] :is(.k-tree-label, .k-tree-icon) {
+   color: var(--k-accent-text);
+}
+
+.k-tree-sm .k-tree-empty {
+   padding: 0.375rem 0.5rem;
+}
+
+.k-tree-sm .k-tree-row[data-drop='inside'] {
+   background: var(--k-accent-soft);
+}

package/dist/styles/data.css

@@ -8,3 +8,4 @@
 @import './data/timeline.css';
 @import './data/tree.css';
 @import './data/filter-pills.css';
+@import './data/selection-bar.css';

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 {

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

@@ -51,7 +51,6 @@
       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 {

package/dist/styles/forms/calendar.css

@@ -31,7 +31,7 @@
    width: var(--k-calendar-cell);
    height: 1.5rem;
    padding: 0;
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    color: var(--k-text-dimmed);

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;
@@ -191,3 +199,11 @@
    color: var(--k-text-muted);
    font-variant-numeric: tabular-nums;
 }
+
+.k-file-input.is-loading .k-file-input-dropzone {
+   cursor: progress;
+}
+
+.k-file-input.is-loading .k-file-input-dropzone-icon {
+   color: var(--k-accent-text);
+}

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/segmented.css

@@ -137,3 +137,11 @@
 .k-segmented.is-disabled {
    opacity: 0.6;
 }
+
+.k-segmented-item.is-muted:not([aria-checked='true']) {
+   color: var(--k-text-dimmed);
+}
+
+.k-segmented-item.is-muted:not([aria-checked='true']) > .k-icon {
+   opacity: 0.7;
+}

package/dist/styles/forms/select.css

@@ -152,7 +152,7 @@
 
    .k-select .k-select-field optgroup {
       padding-top: 0.25rem;
-      font-size: 0.6875rem;
+      font-size: 0.75rem;
       font-weight: 600;
       color: var(--k-text-dimmed);
       background: transparent;

package/dist/styles/forms/slider.css

@@ -144,7 +144,7 @@
    border-radius: var(--k-radius-sm);
    background: var(--k-text);
    color: var(--k-surface);
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
@@ -169,7 +169,7 @@
 .k-slider-marks {
    display: flex;
    justify-content: space-between;
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    color: var(--k-text-dimmed);
    font-variant-numeric: tabular-nums;
 }

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);
 }
@@ -85,10 +90,20 @@
 }
 
 .k-accordion-title {
+   display: flex;
    flex: 1;
+   flex-direction: column;
+   gap: 0.125rem;
    min-width: 0;
 }
 
+.k-accordion-description {
+   font-size: 0.75rem;
+   font-weight: 400;
+   line-height: 1.45;
+   color: var(--k-text-muted);
+}
+
 .k-accordion-chevron {
    color: var(--k-text-dimmed);
    transition:
@@ -141,6 +156,12 @@
    padding-inline: 0.25rem;
 }
 
+.k-accordion.is-neutral .k-accordion-content {
+   padding: 0;
+   font-size: inherit;
+   color: inherit;
+}
+
 .k-accordion-item.is-open .k-accordion-content {
    opacity: 1;
    transform: none;

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

@@ -238,6 +238,10 @@ html.k-root body {
          visibility 0s linear;
    }
 
+   .k-shell-sidebar :where(dialog[open], :popover-open) {
+      visibility: visible;
+   }
+
    .k-shell-scrim {
       position: absolute;
       inset: 0;

package/dist/styles/layout/breadcrumbs.css

@@ -39,7 +39,7 @@
       background-color var(--k-duration) var(--k-ease);
 }
 
-.k-breadcrumbs-link:is(a):hover {
+.k-breadcrumbs-link:is(a, button):hover {
    background: var(--k-hover);
    color: var(--k-text);
 }
@@ -53,3 +53,18 @@
    --k-icon-size: 0.75rem;
    color: var(--k-text-dimmed);
 }
+
+.k-breadcrumbs-link:is(button) {
+   font: inherit;
+   cursor: pointer;
+}
+
+.k-breadcrumbs-link:is(button):active {
+   scale: 0.97;
+}
+
+:is(.k-breadcrumbs-link, .k-breadcrumbs-current).is-drop-target {
+   background: var(--k-accent-soft);
+   box-shadow: inset 0 0 0 1px var(--k-accent-line);
+   color: var(--k-accent-text);
+}

package/dist/styles/layout/card.css

@@ -63,7 +63,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 {
@@ -75,7 +75,7 @@
 }
 
 .k-card-title {
-   font-size: 0.875rem;
+   font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--k-text);
@@ -154,10 +154,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;
 }
@@ -165,3 +161,21 @@
 .k-card.is-disabled {
    opacity: 0.6;
 }
+
+.k-card.is-selected {
+   border-color: var(--k-accent);
+   box-shadow:
+      0 0 0 1px var(--k-accent),
+      var(--k-shadow-xs);
+}
+
+.k-card.is-selected.is-interactive:hover {
+   border-color: var(--k-accent);
+   box-shadow:
+      0 0 0 1px var(--k-accent),
+      var(--k-shadow-sm);
+}
+
+.k-card.is-static {
+   animation: none;
+}

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 {
@@ -73,7 +72,7 @@
    padding: 0.1875rem 0.375rem;
    border-radius: var(--k-radius-full);
    background: var(--k-fill);
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;