@xleddyl/443-components-vue 0.2.3 → 0.4.0

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 {
@@ -55,7 +55,7 @@
 .k-sidebar-section-label {
    margin-bottom: 0.25rem;
    padding-inline: 0.5rem;
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--k-text-dimmed);

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 {
@@ -70,7 +90,7 @@
    padding: 0.125rem 0.3125rem;
    border-radius: var(--k-radius-full);
    background: var(--k-fill);
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
@@ -180,3 +200,45 @@
 .k-tabs-panel:focus-visible {
    outline-offset: 4px;
 }
+
+.k-tab
+   .k-tab-badge:is(
+      .k-tab-badge-accent,
+      .k-tab-badge-info,
+      .k-tab-badge-success,
+      .k-tab-badge-warning,
+      .k-tab-badge-danger
+   ) {
+   background: color-mix(in oklab, var(--k-tab-badge-tone) 14%, transparent);
+   color: var(--k-tab-badge-text);
+}
+
+.k-tab .k-tab-badge.k-tab-badge-neutral {
+   background: var(--k-fill);
+   color: var(--k-text-muted);
+}
+
+.k-tab-badge-accent {
+   --k-tab-badge-tone: var(--k-accent);
+   --k-tab-badge-text: var(--k-accent-text);
+}
+
+.k-tab-badge-info {
+   --k-tab-badge-tone: var(--k-info);
+   --k-tab-badge-text: var(--k-info);
+}
+
+.k-tab-badge-success {
+   --k-tab-badge-tone: var(--k-success);
+   --k-tab-badge-text: var(--k-success);
+}
+
+.k-tab-badge-warning {
+   --k-tab-badge-tone: var(--k-warning);
+   --k-tab-badge-text: var(--k-warning);
+}
+
+.k-tab-badge-danger {
+   --k-tab-badge-tone: var(--k-danger);
+   --k-tab-badge-text: var(--k-danger);
+}

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

@@ -104,12 +104,30 @@
 }
 
 .k-command-group-label {
+   display: flex;
+   flex-wrap: wrap;
+   align-items: baseline;
+   gap: 0 0.375rem;
+   min-width: 0;
    padding: 0.5rem 0.625rem 0.25rem;
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-weight: 500;
    color: var(--k-text-muted);
 }
 
+.k-command-group-description {
+   min-width: 0;
+   font-weight: 400;
+   color: var(--k-text-dimmed);
+}
+
+.k-command-notice {
+   padding: 0.5rem 0.625rem 0.25rem;
+   font-size: 0.75rem;
+   color: var(--k-text-dimmed);
+   text-align: center;
+}
+
 .k-command-option {
    --k-icon-size: 1rem;
    display: flex;
@@ -130,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 {
@@ -166,7 +184,7 @@
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.5rem 1rem;
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    color: var(--k-text-dimmed);
    border-top: 1px solid var(--k-line);
 }

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,12 +110,11 @@
    height: 0.375rem;
    border-radius: var(--k-radius-full);
    background: currentColor;
-   animation: k-icon-pop 300ms var(--k-ease-spring);
 }
 
 .k-menu-label {
    padding: 0.375rem 0.5rem 0.25rem;
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-weight: 500;
    color: var(--k-text-muted);
 }

package/dist/styles/overlays/modal.css

@@ -107,6 +107,29 @@
    height: 100%;
 }
 
+.k-modal.k-modal-fullscreen {
+   padding: 0;
+}
+
+.k-modal-fullscreen > .k-modal-panel {
+   --k-modal-width: none;
+   width: 100%;
+   height: 100%;
+   max-height: none;
+   padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
+      env(safe-area-inset-left);
+   border-radius: 0;
+   box-shadow: none;
+   transform: translateY(8px);
+}
+
+@starting-style {
+   .k-modal-fullscreen[open] > .k-modal-panel {
+      opacity: 0;
+      transform: translateY(8px);
+   }
+}
+
 .k-modal-fit > .k-modal-panel {
    --k-modal-width: calc(100vw - 2rem);
    width: auto;
@@ -134,6 +157,21 @@
    padding-top: 0.125rem;
 }
 
+.k-modal-title-row,
+.k-drawer-title-row {
+   display: flex;
+   flex-wrap: wrap;
+   align-items: center;
+   gap: 0.375rem 0.5rem;
+   min-width: 0;
+}
+
+.k-modal-title-row > .k-modal-title,
+.k-drawer-title-row > .k-drawer-title {
+   min-width: 0;
+   overflow-wrap: anywhere;
+}
+
 .k-modal-title,
 .k-drawer-title {
    font-size: 0.9375rem;

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

@@ -53,6 +53,21 @@
    object-fit: contain;
 }
 
+.k-brand-logo.is-svg,
+.k-brand-logo.is-slot {
+   display: inline-flex;
+   align-items: center;
+}
+
+.k-brand-logo.is-svg > svg,
+.k-brand-logo.is-slot > :is(svg, img) {
+   display: block;
+   width: auto;
+   max-width: 100%;
+   height: 100%;
+   object-fit: contain;
+}
+
 .k-brand-text {
    display: flex;
    flex-direction: column;

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 {
@@ -125,7 +125,7 @@
    flex: none;
    border-radius: var(--k-radius-full);
    background: var(--k-fill);
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    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/list-page.css

@@ -26,12 +26,8 @@
    max-width: 18rem;
 }
 
-.k-list-selection {
-   font-size: 0.8125rem;
-   font-weight: 600;
-   font-variant-numeric: tabular-nums;
-   color: var(--k-text);
-   animation: k-pop 200ms var(--k-ease-out);
+.k-list-selection:not(.is-visible) {
+   display: contents;
 }
 
 .k-list-footer {

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

@@ -54,7 +54,7 @@
 .k-settings-modal-nav-label {
    margin: 0.875rem 0 0.25rem;
    padding-inline: 0.5rem;
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-weight: 500;
    color: var(--k-text-dimmed);
 }
@@ -127,7 +127,7 @@
    padding: 0 0.375rem;
    border-radius: var(--k-radius-full);
    background: var(--k-fill);
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    line-height: 1.125rem;
    text-align: center;
    color: var(--k-text-muted);
@@ -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.2.3",
+  "version": "0.4.0",
   "description": "Compact, scoped dashboard components for Vue and Nuxt",
   "license": "MIT",
   "author": "Edoardo Alberti (https://github.com/xleddyl)",