@xleddyl/443-components-vue 0.8.1 → 0.8.3

package/dist/locale/types.d.ts

@@ -39,11 +39,15 @@ export interface KMessages {
         pattern: string;
         invalid: string;
         requiredHint: string;
+        optional: string;
+        characterCount: string;
+        characterLimitReached: string;
     };
     editor: {
         bold: string;
         italic: string;
         strike: string;
+        underline: string;
         code: string;
         heading: string;
         bulletList: string;
@@ -56,6 +60,13 @@ export interface KMessages {
         linkUrl: string;
         applyLink: string;
         removeLink: string;
+        linkType: string;
+        linkTypeUrl: string;
+        linkTypeEmail: string;
+        linkTypePhone: string;
+        linkEmail: string;
+        linkPhone: string;
+        linkText: string;
         characters: string;
         limit: string;
         limitReached: string;
@@ -221,6 +232,10 @@ export interface KMessages {
     };
     filterPills: {
         label: string;
+        remove: string;
+    };
+    tabs: {
+        dot: string;
     };
     listPage: {
         toolbar: string;
@@ -240,6 +255,9 @@ export interface KMessages {
         next: string;
         pageSize: string;
         of: string;
+        first: string;
+        last: string;
+        jump: string;
     };
     passwordInput: {
         show: string;

package/dist/nuxt/runtime/layouts/dashboard.vue

@@ -20,6 +20,7 @@
          :collapsible="dashboard.collapsible"
          :storage-key="dashboard.storageKey"
          :fluid="dashboard.fluid"
+         :fill="route.meta.fill === true || Boolean(dashboard.fill)"
       >
          <slot />
       </DashboardLayout>

package/dist/styles/base.css

@@ -1,6 +1,7 @@
 .k-root {
    font-family: var(--k-font-sans);
    font-size: var(--k-font-size);
+   font-weight: var(--k-font-weight, 400);
    font-feature-settings: var(--k-font-features);
    line-height: var(--k-line-height);
    color: var(--k-text-toned);
@@ -78,7 +79,7 @@ html.k-root > body {
 :where(.k-root) :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--k-font-display, var(--k-font-sans));
    font-size: inherit;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    color: var(--k-text);
    letter-spacing: -0.015em;
 }

package/dist/styles/core/button.css

@@ -2,7 +2,7 @@
    --k-btn-tone: var(--k-accent);
    --k-btn-tone-text: var(--k-accent-text);
    --k-btn-on-tone: var(--k-accent-contrast);
-   --k-icon-size: 1rem;
+   --k-icon-size: var(--k-btn-icon-size, 1rem);
    position: relative;
    display: inline-flex;
    align-items: center;
@@ -10,7 +10,7 @@
    gap: 0.375rem;
    min-height: var(--k-btn-size);
    font-family: inherit;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    line-height: 1;
    letter-spacing: -0.005em;
    white-space: nowrap;
@@ -31,7 +31,7 @@
 }
 
 .k-btn:active:not(:disabled, [aria-disabled='true'], .k-btn-link) {
-   scale: 0.97;
+   scale: var(--k-press-scale, 0.97);
 }
 
 .k-btn:disabled,
@@ -95,15 +95,15 @@
 
 .k-btn-md {
    --k-btn-size: var(--k-size-md);
-   font-size: 0.8125rem;
-   padding: 0.25rem 0.8125rem;
+   font-size: var(--k-btn-font-size, 0.8125rem);
+   padding: 0.25rem var(--k-btn-padding-x, 0.8125rem);
 }
 
 .k-btn-lg {
    --k-btn-size: var(--k-size-lg);
-   --k-icon-size: 1.125rem;
-   font-size: 0.875rem;
-   padding: 0.375rem 1.125rem;
+   --k-icon-size: var(--k-btn-icon-size, 1.125rem);
+   font-size: var(--k-btn-font-size, 0.875rem);
+   padding: 0.375rem var(--k-btn-padding-x, 1.125rem);
    border-radius: calc(10px * var(--k-radius-scale));
 }
 
@@ -134,17 +134,17 @@
 .k-btn-solid {
    background: var(--k-btn-tone);
    color: var(--k-btn-on-tone);
-   border-color: color-mix(in oklab, var(--k-btn-tone) 82%, black);
+   border-color: var(--k-btn-border, color-mix(in oklab, var(--k-btn-tone) 82%, black));
    box-shadow:
-      inset 0 1px 0 rgb(255 255 255 / 0.18),
-      0 1px 2px color-mix(in oklab, var(--k-btn-tone) 35%, transparent);
+      inset 0 1px 0 var(--k-btn-highlight, rgb(255 255 255 / 0.18)),
+      var(--k-btn-shadow, 0 1px 2px color-mix(in oklab, var(--k-btn-tone) 35%, transparent));
 }
 
 .k-btn-solid:hover:not(:disabled, [aria-disabled='true']) {
    background: color-mix(in oklab, var(--k-btn-tone) 90%, black);
    box-shadow:
-      inset 0 1px 0 rgb(255 255 255 / 0.22),
-      0 2px 8px -2px color-mix(in oklab, var(--k-btn-tone) 60%, transparent);
+      inset 0 1px 0 var(--k-btn-highlight, rgb(255 255 255 / 0.22)),
+      var(--k-btn-shadow, 0 2px 8px -2px color-mix(in oklab, var(--k-btn-tone) 60%, transparent));
 }
 
 .k-btn-solid:active:not(:disabled, [aria-disabled='true']) {
@@ -162,13 +162,13 @@
 .k-btn-neutral.k-btn-solid {
    background: var(--k-text);
    color: var(--k-surface);
-   border-color: var(--k-text);
-   box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14);
+   border-color: var(--k-btn-border, var(--k-text));
+   box-shadow: inset 0 1px 0 var(--k-btn-highlight, rgb(255 255 255 / 0.14));
 }
 
 .k-btn-neutral.k-btn-solid:hover:not(:disabled, [aria-disabled='true']) {
    background: color-mix(in oklab, var(--k-text) 86%, var(--k-surface));
-   box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14);
+   box-shadow: inset 0 1px 0 var(--k-btn-highlight, rgb(255 255 255 / 0.14));
 }
 
 .k-btn-neutral.k-btn-solid:active:not(:disabled, [aria-disabled='true']) {
@@ -208,6 +208,32 @@
    background: var(--k-fill);
 }
 
+.k-btn-subtle {
+   background: color-mix(in oklab, var(--k-btn-tone) 12%, transparent);
+   color: var(--k-btn-tone-text);
+}
+
+.k-btn-subtle:hover:not(:disabled, [aria-disabled='true']) {
+   background: color-mix(in oklab, var(--k-btn-tone) 18%, transparent);
+}
+
+.k-btn-subtle:active:not(:disabled, [aria-disabled='true']) {
+   background: color-mix(in oklab, var(--k-btn-tone) 24%, transparent);
+}
+
+.k-btn-neutral.k-btn-subtle {
+   background: var(--k-fill);
+   color: var(--k-text);
+}
+
+.k-btn-neutral.k-btn-subtle:hover:not(:disabled, [aria-disabled='true']) {
+   background: color-mix(in oklab, var(--k-text) 7%, var(--k-fill));
+}
+
+.k-btn-neutral.k-btn-subtle:active:not(:disabled, [aria-disabled='true']) {
+   background: color-mix(in oklab, var(--k-text) 12%, var(--k-fill));
+}
+
 .k-btn-outline {
    background: transparent;
    border-color: var(--k-btn-tone);

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

@@ -19,7 +19,7 @@
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-toned);
 }
 
@@ -37,6 +37,12 @@
    color: var(--k-danger-text);
 }
 
+.k-form-field-optional {
+   font-size: 0.75rem;
+   font-weight: var(--k-font-weight, 400);
+   color: var(--k-text-muted);
+}
+
 .k-form-field-hint {
    margin-left: auto;
    font-size: 0.75rem;

package/dist/styles/core/input.css

@@ -68,13 +68,13 @@
 
 .k-field-md {
    font-size: 0.875rem;
-   padding: 0.25rem 0.75rem;
+   padding: 0.25rem var(--k-field-padding-x, 0.75rem);
    min-height: var(--k-size-md);
 }
 
 .k-field-lg {
    font-size: 0.9375rem;
-   padding: 0.375rem 0.875rem;
+   padding: 0.375rem var(--k-field-padding-x, 0.875rem);
    min-height: var(--k-size-lg);
    border-radius: calc(10px * var(--k-radius-scale));
 }
@@ -134,3 +134,32 @@
 .k-input.has-trail .k-field {
    padding-right: 2.125rem;
 }
+
+.k-field-counter {
+   font-size: 0.75rem;
+   line-height: 1;
+   color: var(--k-text-muted);
+   white-space: nowrap;
+   pointer-events: none;
+}
+
+.k-field-counter.is-over {
+   color: var(--k-danger-text);
+}
+
+.k-input > .k-field-counter {
+   position: absolute;
+   right: 0.6875rem;
+}
+
+.k-input.has-trail > .k-field-counter {
+   right: 2.125rem;
+}
+
+.k-input.has-counter .k-field {
+   padding-right: calc(var(--k-input-counter-chars) * 0.5rem + 1rem);
+}
+
+.k-input.has-counter.has-trail .k-field {
+   padding-right: calc(var(--k-input-counter-chars) * 0.5rem + 2.5rem);
+}

package/dist/styles/core/kbd.css

@@ -7,7 +7,7 @@
    padding: 0 0.3125rem;
    font-family: var(--k-font-mono);
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    line-height: 1;
    color: var(--k-text-muted);
    background: var(--k-subtle);

package/dist/styles/core/textarea.css

@@ -37,3 +37,13 @@
 .k-textarea-box.has-trail .k-textarea {
    padding-right: 2.125rem;
 }
+
+.k-textarea-box > .k-field-counter {
+   position: absolute;
+   right: 1.25rem;
+   bottom: 0.5rem;
+}
+
+.k-textarea-box.has-counter .k-textarea {
+   padding-bottom: 1.5rem;
+}

package/dist/styles/data/avatar.css

@@ -10,7 +10,7 @@
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--k-accent) 14%, transparent);
    color: var(--k-accent-text);
    font-size: calc(var(--k-avatar-size) * 0.38);
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    line-height: 1;
    letter-spacing: 0.01em;
    vertical-align: middle;

package/dist/styles/data/badge.css

@@ -1,6 +1,7 @@
 .k-badge {
    --k-badge-tone: var(--k-text-muted);
    --k-badge-text: var(--k-text-toned);
+   --k-badge-on-tone: var(--k-text-inverted);
    --k-icon-size: 0.75rem;
    display: inline-flex;
    align-items: center;
@@ -10,8 +11,11 @@
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--k-badge-radius, var(--k-radius-full));
-   font-size: 0.75rem;
-   font-weight: 500;
+   font-family: var(--k-badge-font, inherit);
+   font-size: var(--k-badge-font-size, 0.75rem);
+   font-weight: var(--k-badge-font-weight, var(--k-font-weight-medium, 500));
+   text-transform: var(--k-badge-text-transform, none);
+   letter-spacing: var(--k-badge-letter-spacing, normal);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
@@ -55,46 +59,58 @@
    --k-badge-text: var(--k-info-text);
 }
 
+.k-badge-accent {
+   --k-badge-on-tone: var(--k-accent-contrast);
+}
+
 .k-badge-soft {
-   background: color-mix(in oklab, var(--k-badge-tone) 10%, transparent);
-   border-color: color-mix(in oklab, var(--k-badge-tone) 24%, transparent);
-   color: var(--k-badge-text);
+   background: var(--k-badge-background, color-mix(in oklab, var(--k-badge-tone) 10%, transparent));
+   border-color: var(
+      --k-badge-border-color,
+      color-mix(in oklab, var(--k-badge-tone) 24%, transparent)
+   );
+   color: var(--k-badge-color, var(--k-badge-text));
 }
 
 .k-badge-neutral.k-badge-soft {
-   background: var(--k-subtle);
-   border-color: var(--k-line);
+   background: var(--k-badge-background, var(--k-subtle));
+   border-color: var(--k-badge-border-color, var(--k-line));
 }
 
 .k-badge-outline {
-   background: transparent;
-   border-color: color-mix(in oklab, var(--k-badge-tone) 45%, transparent);
-   color: var(--k-badge-text);
+   background: var(--k-badge-background, transparent);
+   border-color: var(
+      --k-badge-border-color,
+      color-mix(in oklab, var(--k-badge-tone) 45%, transparent)
+   );
+   color: var(--k-badge-color, var(--k-badge-text));
 }
 
 .k-badge-neutral.k-badge-outline {
-   border-color: var(--k-line-strong);
-   color: var(--k-text-muted);
+   border-color: var(--k-badge-border-color, var(--k-line-strong));
+   color: var(--k-badge-color, var(--k-text-muted));
 }
 
 .k-badge-solid {
-   background: var(--k-badge-tone);
-   border-color: color-mix(in oklab, var(--k-badge-tone) 82%, black);
-   color: var(--k-text-inverted);
+   background: var(--k-badge-background, var(--k-badge-tone));
+   border-color: var(
+      --k-badge-border-color,
+      color-mix(in oklab, var(--k-badge-background, var(--k-badge-tone)) 82%, black)
+   );
+   color: var(--k-badge-color, var(--k-badge-on-tone));
 }
 
 :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);
+   background: var(
+      --k-badge-background,
+      light-dark(color-mix(in oklab, var(--k-badge-tone) 94%, black), var(--k-badge-tone))
+   );
 }
 
 .k-badge-neutral.k-badge-solid {
-   background: var(--k-text);
-   border-color: var(--k-text);
-   color: var(--k-surface);
+   background: var(--k-badge-background, var(--k-text));
+   border-color: var(--k-badge-border-color, var(--k-badge-background, var(--k-text)));
+   color: var(--k-badge-color, var(--k-surface));
 }
 
 .k-badge-dot {

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

@@ -40,13 +40,13 @@
 
 .k-description-term {
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-muted);
 }
 
 .k-description-list-inline .k-description-term {
    font-size: 0.8125rem;
-   font-weight: 450;
+   font-weight: max(var(--k-font-weight, 400), 450);
 }
 
 .k-description-details {

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

@@ -16,7 +16,7 @@
    border-radius: var(--k-radius-full);
    background: transparent;
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    white-space: nowrap;
    color: var(--k-text-muted);
    transition:
@@ -33,7 +33,7 @@
 }
 
 .k-filter-pill:active:not(:disabled) {
-   scale: 0.97;
+   scale: var(--k-press-scale, 0.97);
 }
 
 .k-filter-pill:is([aria-pressed='true'], .is-active) {
@@ -113,7 +113,7 @@
    padding-left: 0.3125rem;
    border-left: 1px solid currentColor;
    border-left-color: color-mix(in oklab, currentColor 30%, transparent);
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    overflow-x: clip;
    text-overflow: ellipsis;
    max-width: 14rem;
@@ -133,3 +133,24 @@
 .k-filter-pill[aria-expanded='true'] .k-filter-pill-caret {
    transform: rotate(180deg);
 }
+
+.k-filter-pill-group {
+   position: relative;
+   display: inline-flex;
+   align-items: center;
+}
+
+.k-filter-pill-group > .k-filter-pill {
+   padding-inline-end: calc(var(--k-size-xs) + 0.25rem);
+}
+
+.k-filter-pill-group > .k-filter-pill-remove {
+   position: absolute;
+   inset-inline-end: 0.25rem;
+   border-radius: var(--k-radius-full);
+   color: inherit;
+}
+
+.k-filter-pill-group:has(.k-filter-pill.is-active) > .k-filter-pill-remove {
+   color: var(--k-accent-text);
+}

package/dist/styles/data/pagination.css

@@ -13,7 +13,7 @@
 }
 
 .k-pagination-strong {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 
@@ -69,7 +69,7 @@
    border: 1px solid transparent;
    border-radius: var(--k-radius-sm);
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    font-variant-numeric: tabular-nums;
    color: var(--k-text-muted);
    transition:
@@ -86,7 +86,7 @@
 }
 
 .k-pagination-page:active:not(:disabled) {
-   scale: 0.97;
+   scale: var(--k-press-scale, 0.97);
 }
 
 .k-pagination-page[aria-current='page'] {
@@ -125,3 +125,26 @@
    font-size: 0.75rem;
    border-radius: var(--k-radius-sm);
 }
+
+.k-pagination-jump {
+   display: inline-flex;
+   align-items: center;
+   gap: 0.5rem;
+   white-space: nowrap;
+}
+
+.k-pagination-jump-input {
+   width: 4.5rem;
+   font-variant-numeric: tabular-nums;
+   -moz-appearance: textfield;
+}
+
+.k-pagination-jump-input::-webkit-inner-spin-button,
+.k-pagination-jump-input::-webkit-outer-spin-button {
+   -webkit-appearance: none;
+   margin: 0;
+}
+
+.k-pagination-jump-total {
+   font-variant-numeric: tabular-nums;
+}

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

@@ -56,7 +56,7 @@
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--k-text);

package/dist/styles/data/stat.css

@@ -43,7 +43,7 @@
 
 .k-stat-label {
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text-muted);
 }
 
@@ -74,7 +74,7 @@
    gap: 0.25rem;
    min-width: 0;
    font-size: 1.5rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    line-height: 1.15;
    letter-spacing: -0.022em;
    font-variant-numeric: tabular-nums;
@@ -84,7 +84,7 @@
 
 .k-stat-unit {
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    letter-spacing: 0;
    color: var(--k-text-muted);
 }
@@ -122,7 +122,7 @@
    padding: 0 0.375rem;
    border-radius: var(--k-radius-sm);
    background: color-mix(in oklab, var(--k-stat-tone) 11%, transparent);
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    font-variant-numeric: tabular-nums;
    color: var(--k-stat-tone);
 }

package/dist/styles/data/table.css

@@ -46,7 +46,7 @@
    padding: 0.75rem var(--k-table-pad-x) 0.25rem;
    caption-side: top;
    text-align: left;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    color: var(--k-text);
 }
 
@@ -61,7 +61,7 @@
    padding: 0 var(--k-table-pad-x);
    vertical-align: middle;
    font-size: 0.75rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    line-height: 1.4;
    color: var(--k-text-muted);
    background: var(--k-subtle);
@@ -157,7 +157,7 @@
 }
 
 .k-table-td.is-strong {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 
@@ -183,7 +183,7 @@
 .k-table-link {
    border-radius: var(--k-radius-xs);
    color: inherit;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    text-decoration: none;
 }
 

package/dist/styles/data/tag.css

@@ -12,7 +12,7 @@
    background: var(--k-surface);
    box-shadow: var(--k-shadow-xs);
    font-size: 0.8125rem;
-   font-weight: 450;
+   font-weight: max(var(--k-font-weight, 400), 450);
    line-height: 1;
    color: var(--k-text);
    white-space: nowrap;

package/dist/styles/data/timeline.css

@@ -91,7 +91,7 @@
 
 .k-timeline-title {
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 

package/dist/styles/data/tree.css

@@ -95,7 +95,7 @@
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }
 
@@ -259,7 +259,7 @@
 }
 
 .k-tree-sm .k-tree-label {
-   font-weight: 450;
+   font-weight: max(var(--k-font-weight, 400), 450);
    color: inherit;
 }
 

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

@@ -63,7 +63,7 @@
 
 .k-empty-title {
    font-size: 0.9375rem;
-   font-weight: 600;
+   font-weight: var(--k-font-weight-strong, 600);
    line-height: 1.3;
    color: var(--k-text);
 }

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

@@ -70,7 +70,7 @@
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    background: var(--k-elevated);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-overlay);

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

@@ -44,7 +44,7 @@
    background: var(--k-elevated);
    box-shadow: var(--k-shadow-overlay);
    font-size: 0.8125rem;
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
    animation: k-pop var(--k-duration-lg) var(--k-ease-out) 120ms backwards;
 }

package/dist/styles/feedback/meter.css

@@ -14,7 +14,7 @@
 }
 
 .k-meter-label {
-   font-weight: 500;
+   font-weight: var(--k-font-weight-medium, 500);
    color: var(--k-text);
 }