@xleddyl/443-components-vue 0.5.0 → 0.6.2

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

@@ -61,12 +61,12 @@
 }
 
 .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) {

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);
@@ -263,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,7 +98,7 @@
 .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 {

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,9 +69,6 @@
    color: var(--k-text-muted);
 }
 
-.k-alert-icon > .k-icon {
-}
-
 .k-alert-body {
    display: flex;
    flex: 1;

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;

package/dist/styles/forced-colors.css

@@ -0,0 +1,215 @@
+@media (forced-colors: active) {
+   :is(
+      .k-field:focus,
+      .k-field:focus-within,
+      .k-field:focus-visible,
+      .k-pin-input-cell.is-active,
+      .k-file-input-dropzone:focus-visible,
+      .k-command-trigger:focus-visible,
+      .k-command-input:focus-visible,
+      .k-editor-prose:focus-visible,
+      .k-calendar-day:focus-visible
+   ) {
+      outline: 2px solid Highlight;
+   }
+
+   .k-slider-input:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+   }
+
+   :is(
+      .k-menu-item:focus-visible,
+      .k-combobox-option.is-active,
+      .k-command-option.is-active,
+      .k-select .k-select-field option:focus-visible
+   ) {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+   }
+
+   :is(.k-checkbox-box, .k-radio-dot, .k-table-check, .k-combobox-check) {
+      border-color: ButtonText;
+   }
+
+   .k-switch-track {
+      border: 1px solid ButtonText;
+   }
+
+   .k-switch-thumb {
+      forced-color-adjust: none;
+      background: ButtonText;
+      color: ButtonFace;
+   }
+
+   .k-switch-track[aria-checked='true'] {
+      forced-color-adjust: none;
+      background: Highlight;
+      border-color: Highlight;
+   }
+
+   .k-switch-track[aria-checked='true'] .k-switch-thumb {
+      background: HighlightText;
+      color: Highlight;
+   }
+
+   .k-switch-track:disabled {
+      border-color: GrayText;
+   }
+
+   .k-radio-dot::after,
+   .k-menu-item-dot {
+      forced-color-adjust: none;
+      background: CanvasText;
+   }
+
+   :is(
+      .k-calendar-day.is-selected .k-calendar-day-number,
+      .k-progress-bar,
+      .k-segmented-item[aria-checked='true']
+   ) {
+      forced-color-adjust: none;
+      background: Highlight;
+      color: HighlightText;
+   }
+
+   .k-progress-ring-bar {
+      stroke: Highlight;
+   }
+
+   :is(.k-progress-track, .k-meter-el) {
+      border: 1px solid CanvasText;
+   }
+
+   .k-meter-el {
+      forced-color-adjust: none;
+      background: Canvas;
+   }
+
+   .k-meter-el::-webkit-meter-bar {
+      background: Canvas;
+   }
+
+   .k-meter-el::-webkit-meter-optimum-value {
+      background: Highlight;
+   }
+
+   .k-meter-el::-webkit-meter-suboptimum-value {
+      background: Highlight;
+   }
+
+   .k-meter-el::-webkit-meter-even-less-good-value {
+      background: Highlight;
+   }
+
+   .k-meter-el::-moz-meter-bar {
+      background: Highlight;
+   }
+
+   .k-slider-input::-webkit-slider-runnable-track {
+      forced-color-adjust: none;
+      background: linear-gradient(
+         to right,
+         Highlight var(--k-slider-pct),
+         CanvasText var(--k-slider-pct)
+      );
+   }
+
+   .k-slider-input::-moz-range-track {
+      forced-color-adjust: none;
+      background: linear-gradient(
+         to right,
+         Highlight var(--k-slider-pct),
+         CanvasText var(--k-slider-pct)
+      );
+   }
+
+   .k-slider-input::-webkit-slider-thumb {
+      forced-color-adjust: none;
+      background: ButtonText;
+   }
+
+   .k-slider-input::-moz-range-thumb {
+      forced-color-adjust: none;
+      background: ButtonText;
+   }
+
+   :is(
+      .k-navlink[aria-current='page'],
+      .k-navlink.is-active,
+      .k-settings-modal-tab[aria-current='true'],
+      .k-tab[aria-selected='true'],
+      .k-theme-switch-option.is-active,
+      .k-color-input-preset[aria-checked='true'],
+      .k-tree-row[aria-selected='true'],
+      .k-card.is-selected,
+      .k-appearance-card.is-active,
+      .k-editor-button.is-active,
+      .k-filter-pill[aria-pressed='true'],
+      .k-filter-pill.is-active,
+      .k-pagination-page[aria-current='page'],
+      .k-radio-card.is-checked,
+      .k-table-row.is-selected,
+      .k-combobox-option.is-selected
+   ) {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+   }
+
+   :is(.k-tabs-indicator, .k-segmented-indicator) {
+      forced-color-adjust: none;
+      background: Highlight;
+   }
+
+   .k-tabs-segmented .k-tabs-indicator {
+      background: transparent;
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+   }
+
+   :is(
+      .k-floating,
+      .k-modal-panel,
+      .k-drawer-panel,
+      .k-toast,
+      .k-tooltip,
+      .k-loading-screen-indicator,
+      .k-loading-overlay-indicator,
+      .k-savebar,
+      .k-selection-bar
+   ) {
+      border: 1px solid CanvasText;
+   }
+
+   .k-separator,
+   .k-separator.has-label::before,
+   .k-separator.has-label::after {
+      forced-color-adjust: none;
+      background: CanvasText;
+   }
+
+   .k-separator.has-label {
+      background: none;
+   }
+
+   :is(.k-btn-solid, .k-btn-soft, .k-btn-ghost, .k-badge) {
+      border: 1px solid ButtonText;
+   }
+
+   .k-btn:is(:disabled, [aria-disabled='true']) {
+      color: GrayText;
+      border-color: GrayText;
+      opacity: 1;
+   }
+
+   .k-spinner {
+      forced-color-adjust: none;
+      border-color: GrayText;
+      border-top-color: CanvasText;
+   }
+
+   .k-loading-bar-fill {
+      forced-color-adjust: none;
+      background: Highlight;
+   }
+}

package/dist/styles/forms/calendar.css

@@ -34,7 +34,7 @@
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-calendar-body {
@@ -51,7 +51,7 @@
 }
 
 .k-calendar-day:focus-visible {
-   outline: none;
+   outline: 2px solid transparent;
 }
 
 .k-calendar-day-number {

package/dist/styles/forms/choice.css

@@ -84,7 +84,7 @@
    place-items: center;
    width: 100%;
    height: 100%;
-   border: 1px solid var(--k-line-strong);
+   border: 1px solid var(--k-field-line);
    background: var(--k-field);
    box-shadow: var(--k-shadow-xs);
    pointer-events: none;
@@ -93,7 +93,7 @@
 :is(.k-checkbox, .k-radio):hover
    :is(.k-checkbox-input, .k-radio-input):not(:disabled)
    + :is(.k-checkbox-box, .k-radio-dot) {
-   border-color: var(--k-text-dimmed);
+   border-color: var(--k-text-muted);
 }
 
 :is(.k-checkbox-input, .k-radio-input):active:not(:disabled) + :is(.k-checkbox-box, .k-radio-dot) {

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

@@ -106,7 +106,7 @@
    scale: 0.92;
 }
 
-.k-color-input-preset[aria-pressed='true'] {
+.k-color-input-preset[aria-checked='true'] {
    box-shadow:
       0 0 0 2px var(--k-surface),
       0 0 0 3.5px var(--k-swatch);

package/dist/styles/forms/combobox.css

@@ -33,10 +33,6 @@
    padding-left: 0.25rem;
 }
 
-.k-combobox-control.is-disabled {
-   cursor: not-allowed;
-}
-
 .k-combobox-input {
    flex: 1 1 4rem;
    min-width: 4rem;
@@ -51,7 +47,7 @@
 }
 
 .k-combobox-input::placeholder {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
    opacity: 1;
 }
 
@@ -142,12 +138,6 @@
    animation: k-pop var(--k-duration-lg) var(--k-ease-out);
 }
 
-.k-combobox-tag-label {
-   overflow: hidden;
-   text-overflow: ellipsis;
-   white-space: nowrap;
-}
-
 .k-combobox-tag-remove {
    --k-icon-size: 0.75rem;
    display: grid;
@@ -179,21 +169,9 @@
 
 .k-combobox-option {
    --k-icon-size: 0.9375rem;
-   display: flex;
-   align-items: center;
-   gap: 0.5rem;
-   min-height: 2rem;
-   padding: 0.375rem 0.5rem;
-   border-radius: var(--k-radius-sm);
-   font-size: 0.8125rem;
    color: var(--k-text-toned);
    cursor: pointer;
    scroll-margin-block: 0.25rem;
-   user-select: none;
-   -webkit-user-select: none;
-   transition:
-      background-color var(--k-duration) var(--k-ease),
-      color var(--k-duration) var(--k-ease);
 }
 
 .k-combobox-option.is-active {
@@ -230,7 +208,7 @@
    place-items: center;
    width: 0.875rem;
    height: 0.875rem;
-   border: 1px solid var(--k-line-strong);
+   border: 1px solid var(--k-field-line);
    border-radius: var(--k-radius-xs);
    background: var(--k-field);
    color: var(--k-accent-contrast);

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

@@ -3,7 +3,7 @@
 }
 
 .k-date-input.is-empty .k-field::-webkit-datetime-edit {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-date-input .k-field::-webkit-datetime-edit-fields-wrapper {
@@ -12,7 +12,7 @@
 
 .k-date-input .k-field::-webkit-datetime-edit-text {
    padding: 0 0.0625rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-date-input .k-field::-webkit-datetime-edit-month-field:focus,