@xleddyl/443-components-vue 0.3.0 → 0.5.0

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/modal.css

@@ -8,7 +8,7 @@
    max-height: none;
    margin: 0;
    padding: 1rem;
-   overflow: hidden;
+   overflow: clip;
    color: var(--k-text-toned);
    background: transparent;
    border: 0;
@@ -152,7 +152,7 @@
 .k-drawer-heading {
    display: flex;
    flex-direction: column;
-   gap: 0.25rem;
+   gap: 0.125rem;
    min-width: 0;
    padding-top: 0.125rem;
 }
@@ -176,7 +176,7 @@
 .k-drawer-title {
    font-size: 0.9375rem;
    font-weight: 600;
-   line-height: 1.35;
+   line-height: 1.3;
    color: var(--k-text);
    letter-spacing: -0.015em;
 }
@@ -184,6 +184,7 @@
 .k-modal-description,
 .k-drawer-description {
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

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

@@ -70,6 +70,10 @@
    color: var(--k-text);
 }
 
+.k-auth-title + .k-auth-description {
+   margin-top: -0.25rem;
+}
+
 .k-auth-description {
    max-width: 20rem;
    font-size: 0.8125rem;
@@ -166,7 +170,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 {
@@ -63,6 +63,10 @@
    color: var(--k-text);
 }
 
+.k-empty-page-title + .k-empty-page-description {
+   margin-top: -0.375rem;
+}
+
 .k-empty-page-description {
    max-width: 26rem;
    font-size: 0.875rem;

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

@@ -61,6 +61,10 @@
    color: var(--k-text);
 }
 
+.k-error-title + .k-error-message {
+   margin-top: -0.375rem;
+}
+
 .k-error-message {
    font-size: 0.875rem;
    color: var(--k-text-muted);

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

@@ -170,13 +170,14 @@
 .k-settings-modal-title {
    font-size: 0.9375rem;
    font-weight: 600;
-   line-height: 1.4;
+   line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--k-text);
 }
 
 .k-settings-modal-description {
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 
@@ -258,6 +259,7 @@
 .k-settings-group-label {
    font-family: var(--k-font-sans);
    font-size: 0.875rem;
+   line-height: 1.3;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--k-text);
@@ -265,6 +267,7 @@
 
 .k-settings-group-description {
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 
@@ -430,7 +433,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.5.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?.();
-  }
-});