@xleddyl/443-components-vue 0.10.2 → 0.12.0

package/dist/styles/layout/stepper.css

@@ -0,0 +1,244 @@
+.k-stepper {
+   --k-stepper-indicator: 1.75rem;
+   --k-stepper-tone: var(--k-accent);
+   container-type: inline-size;
+   min-width: 0;
+}
+
+.k-stepper-sm {
+   --k-stepper-indicator: 1.5rem;
+}
+
+.k-stepper-list {
+   display: flex;
+   margin: 0;
+   padding: 0;
+   list-style: none;
+}
+
+.k-stepper-horizontal .k-stepper-list {
+   align-items: flex-start;
+}
+
+.k-stepper-vertical .k-stepper-list {
+   flex-direction: column;
+}
+
+.k-stepper-item {
+   position: relative;
+   display: flex;
+   min-width: 0;
+}
+
+.k-stepper-horizontal .k-stepper-item {
+   flex: 1 1 auto;
+   align-items: flex-start;
+}
+
+.k-stepper-horizontal .k-stepper-item:last-child {
+   flex: 0 1 auto;
+}
+
+.k-stepper-vertical .k-stepper-item {
+   flex-direction: column;
+}
+
+.k-stepper-step {
+   --k-icon-size: 0.875rem;
+   display: flex;
+   align-items: flex-start;
+   gap: 0.625rem;
+   min-width: 0;
+   padding: 0.25rem;
+   margin: -0.25rem;
+   border-radius: var(--k-radius-md);
+   color: var(--k-text-muted);
+   text-align: start;
+   transition:
+      background-color var(--k-duration) var(--k-ease),
+      color var(--k-duration) var(--k-ease);
+}
+
+.k-stepper-horizontal .k-stepper-step {
+   flex-shrink: 1;
+   max-width: calc(100% + 0.5rem);
+}
+
+button.k-stepper-step:hover {
+   background: var(--k-hover);
+   color: var(--k-text);
+}
+
+button.k-stepper-step:active {
+   background: var(--k-press);
+}
+
+.k-stepper-item.is-disabled > .k-stepper-step {
+   cursor: default;
+}
+
+.k-stepper-indicator {
+   display: grid;
+   flex-shrink: 0;
+   place-items: center;
+   width: var(--k-stepper-indicator);
+   height: var(--k-stepper-indicator);
+   border: 1px solid var(--k-line-strong);
+   border-radius: var(--k-radius-full);
+   background: var(--k-surface);
+   color: var(--k-text-muted);
+   font-size: 0.75rem;
+   font-weight: var(--k-font-weight-strong, 600);
+   font-variant-numeric: tabular-nums;
+   transition:
+      background-color var(--k-duration) var(--k-ease),
+      border-color var(--k-duration) var(--k-ease),
+      color var(--k-duration) var(--k-ease);
+}
+
+.k-stepper-item.is-current .k-stepper-indicator {
+   border-color: var(--k-stepper-tone);
+   background: var(--k-stepper-tone);
+   color: var(--k-accent-contrast);
+}
+
+.k-stepper-item.is-complete .k-stepper-indicator {
+   border-color: var(--k-accent-line);
+   background: var(--k-accent-soft);
+   color: var(--k-accent-text);
+}
+
+.k-stepper-item.is-current.is-complete .k-stepper-indicator {
+   border-color: var(--k-stepper-tone);
+   background: var(--k-stepper-tone);
+   color: var(--k-accent-contrast);
+}
+
+.k-stepper-item.is-error .k-stepper-indicator {
+   border-color: var(--k-danger);
+   background: color-mix(in oklab, var(--k-danger) 12%, var(--k-surface));
+   color: var(--k-danger-text);
+}
+
+.k-stepper-item.is-current.is-error .k-stepper-indicator {
+   background: var(--k-danger);
+   color: var(--k-text-inverted);
+}
+
+.k-stepper-text {
+   display: flex;
+   flex-direction: column;
+   gap: 0.125rem;
+   min-width: 0;
+   padding-top: calc((var(--k-stepper-indicator) - 1.25rem) / 2);
+}
+
+.k-stepper-label {
+   overflow: hidden;
+   font-size: 0.8125rem;
+   font-weight: var(--k-font-weight-medium, 500);
+   line-height: 1.25rem;
+   text-overflow: ellipsis;
+   white-space: nowrap;
+}
+
+.k-stepper-item.is-current .k-stepper-label,
+.k-stepper-item.is-complete .k-stepper-label {
+   color: var(--k-text);
+}
+
+.k-stepper-item.is-error .k-stepper-label {
+   color: var(--k-danger-text);
+}
+
+.k-stepper-description {
+   overflow: hidden;
+   font-size: 0.75rem;
+   line-height: 1.35;
+   color: var(--k-text-muted);
+   text-overflow: ellipsis;
+}
+
+.k-stepper-horizontal .k-stepper-description {
+   white-space: nowrap;
+}
+
+.k-stepper-connector {
+   flex: 1 1 auto;
+   background: var(--k-line-strong);
+   transition: background-color var(--k-duration-lg) var(--k-ease);
+}
+
+.k-stepper-item.is-complete > .k-stepper-connector {
+   background: var(--k-accent-line);
+}
+
+.k-stepper-horizontal .k-stepper-connector {
+   min-width: 1rem;
+   height: 1px;
+   margin: calc(var(--k-stepper-indicator) / 2) 0.75rem 0;
+}
+
+.k-stepper-vertical .k-stepper-connector {
+   width: 1px;
+   min-height: 1rem;
+   margin: 0.375rem 0 0.375rem calc(var(--k-stepper-indicator) / 2);
+}
+
+.k-stepper-vertical .k-stepper-item:not(:last-child) {
+   min-height: 3.5rem;
+}
+
+.k-stepper-summary {
+   display: none;
+   gap: 0.375rem;
+   align-items: baseline;
+   min-width: 0;
+   margin: 0.625rem 0 0;
+   font-size: 0.8125rem;
+}
+
+.k-stepper-summary-position {
+   flex-shrink: 0;
+   color: var(--k-text-muted);
+}
+
+.k-stepper-summary-label {
+   overflow: hidden;
+   font-weight: var(--k-font-weight-medium, 500);
+   color: var(--k-text);
+   text-overflow: ellipsis;
+   white-space: nowrap;
+}
+
+.k-stepper-horizontal.is-compact .k-stepper-text {
+   position: absolute;
+   width: 1px;
+   height: 1px;
+   padding: 0;
+   margin: -1px;
+   overflow: hidden;
+   clip-path: inset(50%);
+   white-space: nowrap;
+}
+
+.k-stepper-horizontal.is-compact .k-stepper-summary {
+   display: flex;
+}
+
+@container (max-width: 36rem) {
+   .k-stepper-horizontal.is-auto-compact .k-stepper-text {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+   }
+
+   .k-stepper-horizontal.is-auto-compact .k-stepper-summary {
+      display: flex;
+   }
+}

package/dist/styles/layout.css

@@ -6,6 +6,7 @@
 @import './layout/breadcrumbs.css';
 @import './layout/card.css';
 @import './layout/tabs.css';
+@import './layout/stepper.css';
 @import './layout/accordion.css';
 @import './layout/separator.css';
 @import './layout/stack.css';

package/dist/styles/overlays/toast.css

@@ -18,6 +18,11 @@
    color: var(--k-text-toned);
    background: transparent;
    border: 0;
+   transition:
+      top var(--k-duration-lg) var(--k-ease-out),
+      right var(--k-duration-lg) var(--k-ease-out),
+      bottom var(--k-duration-lg) var(--k-ease-out),
+      left var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-toaster[data-y='top'] {
@@ -37,34 +42,34 @@
 }
 
 .k-toaster-bottom-right {
-   right: 1rem;
-   bottom: 1rem;
+   right: calc(1rem + var(--k-toaster-avoid-right, 0px));
+   bottom: calc(1rem + var(--k-toaster-avoid-bottom, 0px));
 }
 
 .k-toaster-bottom-left {
-   bottom: 1rem;
-   left: 1rem;
+   bottom: calc(1rem + var(--k-toaster-avoid-bottom, 0px));
+   left: calc(1rem + var(--k-toaster-avoid-left, 0px));
 }
 
 .k-toaster-bottom-center {
-   bottom: 1rem;
-   left: 50%;
+   bottom: calc(1rem + var(--k-toaster-avoid-bottom, 0px));
+   left: calc(50% + (var(--k-toaster-avoid-left, 0px) - var(--k-toaster-avoid-right, 0px)) / 2);
    translate: -50% 0;
 }
 
 .k-toaster-top-right {
-   top: 1rem;
-   right: 1rem;
+   top: calc(1rem + var(--k-toaster-avoid-top, 0px));
+   right: calc(1rem + var(--k-toaster-avoid-right, 0px));
 }
 
 .k-toaster-top-left {
-   top: 1rem;
-   left: 1rem;
+   top: calc(1rem + var(--k-toaster-avoid-top, 0px));
+   left: calc(1rem + var(--k-toaster-avoid-left, 0px));
 }
 
 .k-toaster-top-center {
-   top: 1rem;
-   left: 50%;
+   top: calc(1rem + var(--k-toaster-avoid-top, 0px));
+   left: calc(50% + (var(--k-toaster-avoid-left, 0px) - var(--k-toaster-avoid-right, 0px)) / 2);
    translate: -50% 0;
 }
 

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

@@ -147,15 +147,17 @@
 
 .k-settings-modal-header {
    display: flex;
+   flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    flex: none;
-   gap: 1rem;
+   gap: 0.75rem 1rem;
    padding: 1.25rem 1.5rem 0.875rem;
 }
 
 .k-settings-modal-heading {
    display: flex;
+   flex: 1 1 14rem;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
@@ -216,8 +218,10 @@
 .k-settings-modal-actions {
    display: flex;
    flex: none;
+   flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
+   max-width: 100%;
 }
 
 .k-settings-modal-account {

package/package.json

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