@xleddyl/443-components-vue 0.4.0 → 0.6.0

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

@@ -2,7 +2,7 @@
 .k-form-field-error,
 .k-form-field-warning {
    --k-icon-size: 0.875rem;
-   --k-field-message-tone: var(--k-danger);
+   --k-field-message-tone: var(--k-danger-text);
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
@@ -14,7 +14,7 @@
 
 .k-field-message-warning,
 .k-form-field-warning {
-   --k-field-message-tone: var(--k-warning);
+   --k-field-message-tone: var(--k-warning-text);
 }
 
 .k-field-message-neutral {

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;
 }
 
@@ -34,19 +34,19 @@
 
 .k-form-field-required {
    margin-left: -0.25rem;
-   color: var(--k-danger);
+   color: var(--k-danger-text);
 }
 
 .k-form-field-hint {
    margin-left: auto;
    font-size: 0.75rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .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);
 }
 
@@ -57,3 +57,12 @@
 .k-form-field.is-disabled .k-form-field-label {
    color: var(--k-text-muted);
 }
+
+.k-form-field-messages {
+   display: flex;
+   flex-direction: column;
+}
+
+.k-form-field-messages:empty {
+   margin-top: -0.375rem;
+}

package/dist/styles/core/input.css

@@ -16,7 +16,7 @@
 }
 
 .k-field::placeholder {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
    opacity: 1;
 }
 
@@ -26,15 +26,12 @@
 
 .k-field:focus,
 .k-field:focus-within {
-   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);
 }
 
-.k-field:focus-visible {
-   outline: none;
-}
-
 .k-field.is-invalid {
    border-color: var(--k-danger);
 }

package/dist/styles/core/kbd.css

@@ -21,5 +21,4 @@
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
-   font-size: 0.75rem;
 }

package/dist/styles/data/badge.css

@@ -37,22 +37,22 @@
 
 .k-badge-success {
    --k-badge-tone: var(--k-success);
-   --k-badge-text: var(--k-success);
+   --k-badge-text: var(--k-success-text);
 }
 
 .k-badge-warning {
    --k-badge-tone: var(--k-warning);
-   --k-badge-text: var(--k-warning);
+   --k-badge-text: var(--k-warning-text);
 }
 
 .k-badge-danger {
    --k-badge-tone: var(--k-danger);
-   --k-badge-text: var(--k-danger);
+   --k-badge-text: var(--k-danger-text);
 }
 
 .k-badge-info {
    --k-badge-tone: var(--k-info);
-   --k-badge-text: var(--k-info);
+   --k-badge-text: var(--k-info-text);
 }
 
 .k-badge-soft {
@@ -83,6 +83,10 @@
    color: var(--k-text-inverted);
 }
 
+:is(.k-badge-success, .k-badge-warning).k-badge-solid {
+   background: light-dark(color-mix(in oklab, var(--k-badge-tone) 94%, black), var(--k-badge-tone));
+}
+
 .k-badge-accent.k-badge-solid {
    color: var(--k-accent-contrast);
 }

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;
@@ -59,18 +61,18 @@
 }
 
 .k-description-empty {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-description-hint {
    font-size: 0.75rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 @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

@@ -10,8 +10,8 @@
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
-   height: var(--k-size-sm);
-   padding: 0 0.6875rem;
+   height: var(--k-size-md);
+   padding: 0 0.75rem;
    border: 1px dashed var(--k-line-strong);
    border-radius: var(--k-radius-full);
    background: transparent;
@@ -70,9 +70,6 @@
    opacity: 1;
 }
 
-.k-filter-pill[aria-pressed='true'] .k-filter-pill-check > .k-icon {
-}
-
 .k-filter-pill-count {
    min-width: 1.125rem;
    padding: 0.125rem 0.3125rem;
@@ -92,8 +89,8 @@
 
 .k-filter-pill-sm,
 .k-filter-pills-sm .k-filter-pill {
-   height: var(--k-size-xs);
-   padding: 0 0.5625rem;
+   height: var(--k-size-sm);
+   padding: 0 0.625rem;
    font-size: 0.75rem;
 }
 
@@ -117,7 +114,7 @@
    border-left: 1px solid currentColor;
    border-left-color: color-mix(in oklab, currentColor 30%, transparent);
    font-weight: 600;
-   overflow: hidden;
+   overflow-x: clip;
    text-overflow: ellipsis;
    max-width: 14rem;
 }

package/dist/styles/data/pagination.css

@@ -67,7 +67,7 @@
    height: var(--k-size-sm);
    padding-inline: 0.375rem;
    border: 1px solid transparent;
-   border-radius: calc(7px * var(--k-radius-scale));
+   border-radius: var(--k-radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
@@ -105,7 +105,7 @@
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-pagination-compact {

package/dist/styles/data/stat.css

@@ -128,11 +128,11 @@
 }
 
 .k-stat-delta.is-positive {
-   --k-stat-tone: var(--k-success);
+   --k-stat-tone: var(--k-success-text);
 }
 
 .k-stat-delta.is-negative {
-   --k-stat-tone: var(--k-danger);
+   --k-stat-tone: var(--k-danger-text);
 }
 
 .k-stat-delta-icon {
@@ -148,7 +148,7 @@
 }
 
 .k-stat-hint {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-stat-skeleton {

package/dist/styles/data/table.css

@@ -236,7 +236,7 @@
    margin: 0;
    flex-shrink: 0;
    appearance: none;
-   border: 1px solid var(--k-line-strong);
+   border: 1px solid var(--k-field-line);
    border-radius: var(--k-radius-xs);
    background: var(--k-field);
    box-shadow: var(--k-shadow-xs);
@@ -254,6 +254,7 @@
    margin-top: -0.125rem;
    border: solid var(--k-accent-contrast);
    border-width: 0 0 2px 2px;
+   rotate: -45deg;
    opacity: 0;
    scale: 0.4;
    transition:
@@ -262,7 +263,7 @@
 }
 
 .k-table-check:hover:not(:disabled) {
-   border-color: var(--k-text-dimmed);
+   border-color: var(--k-text-muted);
 }
 
 .k-table-check:active:not(:disabled) {

package/dist/styles/data/tag.css

@@ -38,7 +38,7 @@
 
 .k-tag-label {
    min-width: 0;
-   overflow: hidden;
+   overflow-x: clip;
    text-overflow: ellipsis;
 }
 
@@ -110,4 +110,3 @@
 .k-tag-remove > .k-icon {
    transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
-

package/dist/styles/data/timeline.css

@@ -98,11 +98,12 @@
 .k-timeline-time {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-timeline-description {
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

package/dist/styles/data/tree.css

@@ -15,6 +15,7 @@
 }
 
 .k-tree-row {
+   position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
@@ -38,11 +39,6 @@
    background: var(--k-accent-soft);
 }
 
-.k-tree-row[aria-disabled='true'] {
-   opacity: 0.5;
-   cursor: not-allowed;
-}
-
 .k-tree-toggle {
    --k-icon-size: 0.875rem;
    display: grid;
@@ -95,7 +91,7 @@
 }
 
 .k-tree-label {
-   overflow: hidden;
+   overflow-x: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
@@ -104,11 +100,11 @@
 }
 
 .k-tree-description {
-   overflow: hidden;
+   overflow-x: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-tree-description-mono {
@@ -122,7 +118,7 @@
 .k-tree-meta {
    flex-shrink: 0;
    font-size: 0.75rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-tree.is-invalid.is-bordered {
@@ -149,7 +145,7 @@
 .k-tree-empty {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-tree-handle {
@@ -278,3 +274,28 @@
 .k-tree-sm .k-tree-row[data-drop='inside'] {
    background: var(--k-accent-soft);
 }
+
+.k-tree-actions {
+   position: absolute;
+   top: 50%;
+   right: 0.375rem;
+   display: flex;
+   align-items: center;
+   gap: 0.125rem;
+   border-radius: var(--k-radius-sm);
+   background: var(--k-elevated);
+   opacity: 0;
+   pointer-events: none;
+   translate: 0 -50%;
+   transition: opacity var(--k-duration) var(--k-ease);
+}
+
+.k-tree-row:is(:hover, :focus-within) > .k-tree-actions {
+   opacity: 1;
+   pointer-events: auto;
+}
+
+.k-tree.is-dragging .k-tree-actions {
+   opacity: 0;
+   pointer-events: none;
+}

package/dist/styles/feedback/alert.css

@@ -69,15 +69,13 @@
    color: var(--k-text-muted);
 }
 
-.k-alert-icon > .k-icon {
-}
-
 .k-alert-body {
    display: flex;
    flex: 1;
    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,7 +44,7 @@
    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:
@@ -57,13 +57,14 @@
    --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);
 }
 
@@ -74,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/feedback/loading-host.css

@@ -49,6 +49,10 @@
    border: 0;
 }
 
+.k-loading-screen:focus {
+   outline: 2px solid transparent;
+}
+
 .k-loading-screen[open] {
    display: grid;
    place-items: center;

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

@@ -31,6 +31,10 @@
    background: color-mix(in oklab, var(--k-surface) 45%, transparent);
 }
 
+.k-loading-overlay-layer:focus {
+   outline: 2px solid transparent;
+}
+
 .k-loading-overlay-indicator {
    display: inline-flex;
    align-items: center;