@xleddyl/443-components-vue 0.4.0 → 0.6.0

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,

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

@@ -22,10 +22,6 @@
    cursor: default;
 }
 
-.k-date-picker-trigger:disabled {
-   cursor: not-allowed;
-}
-
 .k-date-picker-icon,
 .k-date-picker-chevron {
    color: var(--k-text-dimmed);
@@ -44,21 +40,21 @@
 }
 
 .k-date-picker.is-open .k-date-picker-trigger {
-   border-color: var(--k-accent);
+   border-color: var(--k-ring);
    box-shadow: var(--k-focus-ring);
 }
 
 .k-date-picker-value {
    flex: 1;
    min-width: 0;
-   overflow: hidden;
+   overflow-x: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
 }
 
 .k-date-picker.is-empty .k-date-picker-value {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-date-picker.has-clear .k-date-picker-chevron {

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

@@ -44,9 +44,10 @@
 }
 
 .k-file-input-dropzone:focus-visible {
-   outline: none;
+   outline: 2px solid transparent;
+   outline-offset: 2px;
    border-style: solid;
-   border-color: var(--k-accent);
+   border-color: var(--k-ring);
    box-shadow: var(--k-focus-ring);
 }
 
@@ -187,7 +188,7 @@
 }
 
 .k-file-input-name {
-   overflow: hidden;
+   overflow-x: clip;
    font-size: 0.8125rem;
    color: var(--k-text);
    text-overflow: ellipsis;

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

@@ -2,9 +2,15 @@
    --k-input-group-radius: var(--k-radius-md);
    display: inline-flex;
    align-items: stretch;
+   border-radius: var(--k-input-group-radius);
+   box-shadow: var(--k-shadow-xs);
    isolation: isolate;
 }
 
+.k-input-group .k-field:not(:focus, :focus-within) {
+   box-shadow: none;
+}
+
 .k-input-group-sm {
    --k-input-group-radius: var(--k-radius-sm);
 }

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

@@ -1,6 +1,6 @@
 .k-number-input {
    --k-icon-size: 0.875rem;
-   --k-number-step-size: 1.375rem;
+   --k-number-step-size: 1.5rem;
    position: relative;
    display: flex;
    width: 100%;
@@ -8,7 +8,7 @@
 }
 
 .k-number-input-sm {
-   --k-number-step-size: 1.125rem;
+   --k-number-step-size: 1.5rem;
 }
 
 .k-number-input-lg {

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

@@ -53,7 +53,7 @@
 }
 
 .k-password-input-action.is-done {
-   color: var(--k-success);
+   color: var(--k-success-text);
 }
 
 .k-password-input-action.is-done > .k-icon {
@@ -62,6 +62,7 @@
 
 .k-password-meter {
    --k-meter-tone: var(--k-danger);
+   --k-meter-text: var(--k-danger-text);
    display: flex;
    align-items: center;
    gap: 0.625rem;
@@ -70,6 +71,7 @@
 
 .k-password-meter[data-score='2'] {
    --k-meter-tone: var(--k-warning);
+   --k-meter-text: var(--k-warning-text);
 }
 
 .k-password-meter[data-score='3'] {
@@ -78,6 +80,7 @@
 
 .k-password-meter[data-score='4'] {
    --k-meter-tone: var(--k-success);
+   --k-meter-text: var(--k-success-text);
 }
 
 .k-password-meter-bar {
@@ -103,5 +106,5 @@
    font-size: 0.75rem;
    font-weight: 500;
    text-align: right;
-   color: var(--k-meter-tone);
+   color: var(--k-meter-text, var(--k-meter-tone));
 }

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

@@ -91,7 +91,9 @@
 }
 
 .k-pin-input-cell.is-active {
-   border-color: var(--k-accent);
+   outline: 2px solid transparent;
+   outline-offset: 2px;
+   border-color: var(--k-ring);
    box-shadow: var(--k-focus-ring);
 }
 
@@ -100,7 +102,7 @@
 }
 
 .k-pin-input-placeholder {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-pin-input-caret {

package/dist/styles/forms/segmented.css

@@ -94,7 +94,7 @@
 }
 
 .k-segmented-label {
-   overflow: hidden;
+   overflow-x: clip;
    text-overflow: ellipsis;
 }
 
@@ -139,7 +139,7 @@
 }
 
 .k-segmented-item.is-muted:not([aria-checked='true']) {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-segmented-item.is-muted:not([aria-checked='true']) > .k-icon {

package/dist/styles/forms/select.css

@@ -23,7 +23,7 @@
 }
 
 .k-select.is-empty .k-select-field {
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-select-field option,
@@ -111,8 +111,8 @@
       display: flex;
       align-items: center;
       gap: 0.5rem;
-      min-height: 2rem;
-      padding: 0.375rem 0.5rem;
+      min-height: 1.875rem;
+      padding: 0.25rem 0.5rem;
       border-radius: var(--k-radius-sm);
       font-size: 0.8125rem;
       color: var(--k-text-toned);
@@ -125,7 +125,7 @@
 
    .k-select .k-select-field option:hover,
    .k-select .k-select-field option:focus-visible {
-      outline: none;
+      outline: 2px solid transparent;
       background: var(--k-hover);
       color: var(--k-text);
    }
@@ -147,14 +147,14 @@
    }
 
    .k-select .k-select-field .k-select-placeholder {
-      color: var(--k-text-dimmed);
+      color: var(--k-text-muted);
    }
 
    .k-select .k-select-field optgroup {
       padding-top: 0.25rem;
       font-size: 0.75rem;
       font-weight: 600;
-      color: var(--k-text-dimmed);
+      color: var(--k-text-muted);
       background: transparent;
    }
 }

package/dist/styles/forms/slider.css

@@ -44,7 +44,8 @@
 }
 
 .k-slider-input:focus-visible {
-   outline: none;
+   outline: 2px solid transparent;
+   outline-offset: 2px;
 }
 
 .k-slider-input:disabled {
@@ -57,7 +58,7 @@
    background: linear-gradient(
       to right,
       var(--k-slider-fill) var(--k-slider-pct),
-      var(--k-line-strong) var(--k-slider-pct)
+      var(--k-field-line) var(--k-slider-pct)
    );
 }
 
@@ -67,7 +68,7 @@
    background: linear-gradient(
       to right,
       var(--k-slider-fill) var(--k-slider-pct),
-      var(--k-line-strong) var(--k-slider-pct)
+      var(--k-field-line) var(--k-slider-pct)
    );
 }
 
@@ -170,6 +171,6 @@
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
    font-variant-numeric: tabular-nums;
 }

package/dist/styles/forms/switch.css

@@ -43,7 +43,9 @@
    margin-top: calc((1lh - var(--k-switch-height)) / 2);
    border-radius: var(--k-radius-full);
    background: var(--k-line-strong);
-   box-shadow: inset 0 1px 2px var(--k-shadow-tint);
+   box-shadow:
+      inset 0 0 0 1px var(--k-field-line),
+      inset 0 1px 2px var(--k-shadow-tint);
    transition:
       background-color 200ms var(--k-ease),
       box-shadow var(--k-duration) var(--k-ease);
@@ -55,6 +57,7 @@
 
 .k-switch-track[aria-checked='true'] {
    background: var(--k-accent);
+   box-shadow: inset 0 1px 2px var(--k-shadow-tint);
 }
 
 .k-switch-track[aria-checked='true']:hover:not(:disabled) {
@@ -101,6 +104,7 @@
 
 .k-switch.is-invalid .k-switch-track[aria-checked='false'] {
    box-shadow:
+      inset 0 0 0 1px var(--k-danger),
       inset 0 1px 2px var(--k-shadow-tint),
       0 0 0 1px var(--k-danger);
 }

package/dist/styles/index.css

@@ -11,4 +11,5 @@
 @import './layout.css' layer(k.components);
 @import './feedback.css' layer(k.components);
 @import './templates.css' layer(k.components);
+@import './forced-colors.css' layer(k.components);
 @import './utilities.css' layer(k.utilities);

package/dist/styles/layout/accordion.css

@@ -100,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/app-shell.css

@@ -8,7 +8,6 @@
    height: var(--k-shell-height, 100dvh);
    min-height: 0;
    overflow: hidden;
-   overscroll-behavior: none;
    background: var(--k-canvas);
    container: k-shell / inline-size;
 }
@@ -17,7 +16,6 @@ html:has(.k-shell),
 html:has(.k-shell) body,
 html.k-root,
 html.k-root body {
-   overflow-x: clip;
    overscroll-behavior: none;
 }
 
@@ -59,7 +57,6 @@ html.k-root body {
    margin: var(--k-shell-gap) var(--k-shell-gap) var(--k-shell-gap) 0;
    overflow-x: hidden;
    overflow-y: auto;
-   overscroll-behavior: contain;
    background: var(--k-surface);
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-xl);
@@ -67,6 +64,10 @@ html.k-root body {
    scroll-padding-top: calc(var(--k-shell-topbar) + 1rem);
 }
 
+.k-shell-body:has(.k-form-page-footer.is-sticky, .k-savebar) {
+   scroll-padding-bottom: 5.5rem;
+}
+
 .k-shell-topbar {
    position: sticky;
    top: 0;
@@ -275,6 +276,17 @@ html.k-root body {
       display: inline-flex;
    }
 
+   .k-shell-close {
+      position: absolute;
+      top: 0.875rem;
+      inset-inline-end: 0.625rem;
+      z-index: 1;
+   }
+
+   .k-shell-sidebar:has(> .k-shell-close) .k-sidebar-header {
+      padding-inline-end: 2.25rem;
+   }
+
    .k-shell-body,
    .k-shell[data-variant] .k-shell-body {
       margin: 0;