@xleddyl/443-components-vue 0.2.2 → 0.3.0

package/dist/styles/forms/slider.css

@@ -144,7 +144,7 @@
    border-radius: var(--k-radius-sm);
    background: var(--k-text);
    color: var(--k-surface);
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
@@ -169,7 +169,7 @@
 .k-slider-marks {
    display: flex;
    justify-content: space-between;
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    color: var(--k-text-dimmed);
    font-variant-numeric: tabular-nums;
 }

package/dist/styles/layout/accordion.css

@@ -85,10 +85,20 @@
 }
 
 .k-accordion-title {
+   display: flex;
    flex: 1;
+   flex-direction: column;
+   gap: 0.125rem;
    min-width: 0;
 }
 
+.k-accordion-description {
+   font-size: 0.75rem;
+   font-weight: 400;
+   line-height: 1.45;
+   color: var(--k-text-muted);
+}
+
 .k-accordion-chevron {
    color: var(--k-text-dimmed);
    transition:
@@ -141,6 +151,12 @@
    padding-inline: 0.25rem;
 }
 
+.k-accordion.is-neutral .k-accordion-content {
+   padding: 0;
+   font-size: inherit;
+   color: inherit;
+}
+
 .k-accordion-item.is-open .k-accordion-content {
    opacity: 1;
    transform: none;

package/dist/styles/layout/app-shell.css

@@ -238,6 +238,10 @@ html.k-root body {
          visibility 0s linear;
    }
 
+   .k-shell-sidebar :where(dialog[open], :popover-open) {
+      visibility: visible;
+   }
+
    .k-shell-scrim {
       position: absolute;
       inset: 0;

package/dist/styles/layout/breadcrumbs.css

@@ -39,7 +39,7 @@
       background-color var(--k-duration) var(--k-ease);
 }
 
-.k-breadcrumbs-link:is(a):hover {
+.k-breadcrumbs-link:is(a, button):hover {
    background: var(--k-hover);
    color: var(--k-text);
 }
@@ -53,3 +53,18 @@
    --k-icon-size: 0.75rem;
    color: var(--k-text-dimmed);
 }
+
+.k-breadcrumbs-link:is(button) {
+   font: inherit;
+   cursor: pointer;
+}
+
+.k-breadcrumbs-link:is(button):active {
+   scale: 0.97;
+}
+
+:is(.k-breadcrumbs-link, .k-breadcrumbs-current).is-drop-target {
+   background: var(--k-accent-soft);
+   box-shadow: inset 0 0 0 1px var(--k-accent-line);
+   color: var(--k-accent-text);
+}

package/dist/styles/layout/card.css

@@ -75,7 +75,7 @@
 }
 
 .k-card-title {
-   font-size: 0.875rem;
+   font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--k-text);
@@ -165,3 +165,21 @@
 .k-card.is-disabled {
    opacity: 0.6;
 }
+
+.k-card.is-selected {
+   border-color: var(--k-accent);
+   box-shadow:
+      0 0 0 1px var(--k-accent),
+      var(--k-shadow-xs);
+}
+
+.k-card.is-selected.is-interactive:hover {
+   border-color: var(--k-accent);
+   box-shadow:
+      0 0 0 1px var(--k-accent),
+      var(--k-shadow-sm);
+}
+
+.k-card.is-static {
+   animation: none;
+}

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

@@ -73,7 +73,7 @@
    padding: 0.1875rem 0.375rem;
    border-radius: var(--k-radius-full);
    background: var(--k-fill);
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;

package/dist/styles/layout/sidebar.css

@@ -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

@@ -70,7 +70,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 +180,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/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;
@@ -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/menu.css

@@ -116,7 +116,7 @@
 
 .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/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

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

package/package.json

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