@xleddyl/443-components-vue 0.3.0 → 0.4.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,11 +107,18 @@
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
-   font-family: var(--k-font-mono);
    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;
@@ -137,7 +144,6 @@
 
 .k-tree-check > .k-icon {
    stroke-width: 2.25;
-   animation: k-icon-pop 300ms var(--k-ease-spring);
 }
 
 .k-tree-empty {

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/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;

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/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);
 }

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 {
@@ -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;
 }

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 {

package/dist/styles/layout/sidebar-nav.css

@@ -20,7 +20,7 @@
    --k-icon-size: 0.875rem;
    flex: none;
    color: var(--k-text-dimmed);
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-navgroup.is-open .k-navgroup-chevron {

package/dist/styles/layout/sidebar.css

@@ -24,7 +24,7 @@
 }
 
 .k-sidebar-collapse > .k-icon {
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-sidebar-nav {

package/dist/styles/layout/tabs.css

@@ -23,6 +23,27 @@
    flex: 1;
 }
 
+.k-tabs.is-stretch {
+   flex: 1;
+   min-height: 0;
+}
+
+.k-tabs.is-stretch > .k-tabs-panel {
+   display: flex;
+   flex: 1;
+   flex-direction: column;
+   min-height: 0;
+}
+
+.k-tabs.is-inset {
+   gap: 0;
+}
+
+.k-tabs.is-inset > .k-tabs-list {
+   max-width: calc(100% - 1.75rem);
+   margin: 0.75rem 0.875rem 0;
+}
+
 .k-tab {
    --k-icon-size: 0.9375rem;
    position: relative;
@@ -57,12 +78,11 @@
 }
 
 .k-tab-icon {
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-tab[aria-selected='true'] .k-tab-icon {
    color: var(--k-accent-text);
-   animation: k-icon-pop 360ms var(--k-ease-spring);
 }
 
 .k-tab-badge {

package/dist/styles/layout/theme-switch.css

@@ -62,11 +62,10 @@
 }
 
 .k-theme-switch-icon {
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-theme-switch-option.is-active .k-theme-switch-icon {
-   animation: k-icon-spin var(--k-duration-xl) var(--k-ease-spring);
 }
 
 .k-theme-switch-sm .k-theme-switch-option {
@@ -75,5 +74,4 @@
 }
 
 .k-theme-cycle-icon {
-   animation: k-icon-spin var(--k-duration-xl) var(--k-ease-spring);
 }

package/dist/styles/overlays/command.css

@@ -148,7 +148,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-command-option.is-active .k-command-option-icon {

package/dist/styles/overlays/confirm.css

@@ -24,7 +24,6 @@
    border-radius: var(--k-radius-full);
    color: var(--k-confirm-tone);
    background: color-mix(in oklab, var(--k-confirm-tone) 12%, transparent);
-   animation: k-icon-pop var(--k-duration-xl) var(--k-ease-spring) 120ms;
 }
 
 .k-confirm-danger .k-confirm-icon {

package/dist/styles/overlays/menu.css

@@ -48,7 +48,7 @@
 
 .k-menu-item-icon {
    color: var(--k-text-muted);
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-menu-item:focus .k-menu-item-icon {
@@ -84,7 +84,7 @@
    --k-icon-size: 0.875rem;
    margin-left: auto;
    color: var(--k-text-dimmed);
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-menu-item.is-expanded .k-menu-item-chevron,
@@ -103,7 +103,6 @@
 }
 
 .k-menu-item-indicator > .k-icon {
-   animation: k-icon-pop 300ms var(--k-ease-spring);
 }
 
 .k-menu-item-dot {
@@ -111,7 +110,6 @@
    height: 0.375rem;
    border-radius: var(--k-radius-full);
    background: currentColor;
-   animation: k-icon-pop 300ms var(--k-ease-spring);
 }
 
 .k-menu-label {

package/dist/styles/overlays/toast.css

@@ -220,7 +220,6 @@
    color: var(--k-toast-tone);
    background: color-mix(in oklab, var(--k-toast-tone) 14%, transparent);
    border-radius: var(--k-radius-full);
-   animation: k-icon-pop var(--k-duration-xl) var(--k-ease-spring) 120ms;
 }
 
 .k-toast-content {

package/dist/styles/templates/auth-layout.css

@@ -166,7 +166,6 @@
    border-radius: var(--k-radius-full);
    background: radial-gradient(circle at 30% 30%, rgb(255 255 255 / 0.5), transparent 65%);
    filter: blur(2px);
-   animation: k-float 9s ease-in-out infinite;
 }
 
 .k-auth-aside-content {

package/dist/styles/templates/empty-page.css

@@ -38,13 +38,13 @@
 .k-empty-page-card.is-back {
    transform: translateX(-1.5rem) rotate(-10deg) scale(0.86);
    background: var(--k-subtle);
-   animation: k-empty-fan 600ms var(--k-ease-spring) 120ms backwards;
+   animation: k-empty-fan 600ms var(--k-ease-out) 120ms backwards;
 }
 
 .k-empty-page-card.is-middle {
    transform: translateX(1.5rem) rotate(10deg) scale(0.86);
    background: var(--k-subtle);
-   animation: k-empty-fan 600ms var(--k-ease-spring) 120ms backwards;
+   animation: k-empty-fan 600ms var(--k-ease-out) 120ms backwards;
 }
 
 .k-empty-page-card.is-front {
@@ -52,7 +52,7 @@
    display: grid;
    place-items: center;
    color: var(--k-accent-text);
-   animation: k-pop var(--k-duration-xl) var(--k-ease-spring) backwards;
+   animation: k-pop var(--k-duration-xl) var(--k-ease-out) backwards;
 }
 
 .k-empty-page-title {

package/dist/styles/templates/form-page.css

@@ -63,7 +63,7 @@
    border-radius: var(--k-radius-full);
    background: var(--k-warning);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--k-warning) 22%, transparent);
-   animation: k-pop 260ms var(--k-ease-spring);
+   animation: k-pop 260ms var(--k-ease-out);
 }
 
 .k-form-page-actions {

package/dist/styles/templates/page.css

@@ -13,7 +13,7 @@
 }
 
 .k-page-back .k-icon {
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-page-back .k-btn:hover .k-icon {

package/dist/styles/templates/settings-modal.css

@@ -430,7 +430,6 @@
 .k-appearance-card-check {
    margin-inline-start: auto;
    color: var(--k-accent-text);
-   animation: k-icon-pop 300ms var(--k-ease-spring);
 }
 
 @media (max-width: 639px) {

package/dist/styles/tokens.css

@@ -81,7 +81,7 @@
    --k-ease: cubic-bezier(0.2, 0, 0, 1);
    --k-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --k-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
-   --k-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
+   --k-ease-spring: cubic-bezier(0.34, 1.22, 0.64, 1);
 }
 
 :where(.k-root:not(.k-root .k-root)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xleddyl/443-components-vue",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Compact, scoped dashboard components for Vue and Nuxt",
   "license": "MIT",
   "author": "Edoardo Alberti (https://github.com/xleddyl)",

package/dist/internal/forms/FormAlerts.vue

@@ -1,25 +0,0 @@
-<template>
-   <div v-if="errors.length || warnings.length" class="k-form-alerts" tabindex="-1">
-      <Alert
-         v-for="message in errors"
-         :key="`error:${message}`"
-         tone="danger"
-         :description="message"
-      />
-      <Alert
-         v-for="message in warnings"
-         :key="`warning:${message}`"
-         tone="warning"
-         role="status"
-         :description="message"
-      />
-   </div>
-</template>
-
-<script setup>
-import Alert from "../../components/feedback/Alert.vue";
-defineProps({
-  errors: { type: Array, required: true },
-  warnings: { type: Array, required: true }
-});
-</script>

package/dist/internal/overlays/FieldBoundary.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/internal/overlays/FieldBoundary.mjs

@@ -1,9 +0,0 @@
-import { defineComponent } from "vue";
-import { provideFieldBoundary } from "../../composables/useFieldBoundary.mjs";
-export default defineComponent({
-  name: "KFieldBoundary",
-  setup(_, { slots }) {
-    provideFieldBoundary();
-    return () => slots.default?.();
-  }
-});