@xleddyl/443-components-vue 0.5.0 → 0.6.2

package/dist/styles/overlays/modal.css

@@ -145,7 +145,16 @@
 }
 
 .k-modal-header {
-   padding: 1.125rem 1rem 0 1.25rem;
+   padding: 1.125rem 1rem 0.75rem 1.25rem;
+}
+
+.k-dialog-header-slot {
+   display: flex;
+   flex: 1;
+   align-items: flex-start;
+   justify-content: space-between;
+   gap: 1rem;
+   min-width: 0;
 }
 
 .k-modal-heading,
@@ -202,7 +211,18 @@
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
-   padding: 1rem 1.25rem 1.25rem;
+   padding: 0.25rem 1.25rem 1.25rem;
+}
+
+.k-modal-body,
+.k-drawer-body {
+   border-top: 1px solid transparent;
+   transition: border-color var(--k-duration-lg) var(--k-ease);
+}
+
+.k-modal-header + .k-modal-body.is-overflow-top,
+.k-drawer-header + .k-drawer-body.is-overflow-top {
+   border-top-color: var(--k-line);
 }
 
 .k-modal-body.is-flush,
@@ -220,15 +240,18 @@
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    background: var(--k-subtle);
-   border-top: 1px solid var(--k-line);
+   border-top: 1px solid transparent;
+   transition: border-color var(--k-duration-lg) var(--k-ease);
+}
+
+.k-modal-body.is-overflow-bottom + .k-modal-footer,
+.k-drawer-body.is-overflow-bottom + .k-drawer-footer {
+   border-top-color: var(--k-line);
 }
 
 @media (max-width: 640px) {
    .k-modal.is-sheet {
       padding: 2rem 0 0;
-   }
-
-   .k-modal.is-sheet {
       place-items: end stretch;
    }
 

package/dist/styles/overlays/toast.css

@@ -88,8 +88,7 @@
    padding: 0.625rem 0.875rem 0.625rem 0.625rem;
    overflow: hidden;
    font-family: var(--k-font-sans);
-   background: light-dark(var(--k-elevated), var(--k-fill));
-   border: 1px solid var(--k-line-strong);
+   background: var(--k-elevated);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-overlay);
    opacity: 0;

package/dist/styles/presets.css

@@ -22,14 +22,14 @@
    --k-text: light-dark(#111114, #f2f2f3);
    --k-text-toned: light-dark(#3b3b42, #cdcdd3);
    --k-text-muted: light-dark(#6b6b75, #9b9ba5);
-   --k-text-dimmed: light-dark(#9d9da7, #686872);
+   --k-text-dimmed: light-dark(#85858e, #6e6e78);
    --k-text-inverted: light-dark(#ffffff, #111114);
 
    --k-accent-text: light-dark(
       color-mix(in oklab, var(--k-accent) 90%, black),
       color-mix(in oklab, var(--k-accent) 55%, white)
    );
-   --k-ring: color-mix(in oklab, var(--k-accent) 70%, transparent);
+   --k-ring: light-dark(var(--k-accent-text), color-mix(in oklab, var(--k-accent) 70%, white));
    --k-accent-soft: color-mix(in oklab, var(--k-accent) 11%, transparent);
    --k-ring-soft: color-mix(in oklab, var(--k-accent) 18%, transparent);
    --k-scrim: light-dark(rgb(22 22 30 / 0.22), rgb(0 0 0 / 0.55));
@@ -65,7 +65,7 @@
    --k-text-inverted: light-dark(#ffffff, #06140e);
 
    --k-accent-text: light-dark(#0d4631, #bde68f);
-   --k-ring: light-dark(rgb(13 70 49 / 0.7), rgb(189 230 143 / 0.75));
+   --k-ring: light-dark(#0d4631, #bde68f);
    --k-accent-soft: color-mix(in oklab, var(--k-accent) 11%, transparent);
    --k-ring-soft: color-mix(in oklab, var(--k-accent) 18%, transparent);
    --k-scrim: light-dark(rgb(4 22 15 / 0.32), rgb(0 0 0 / 0.6));
@@ -102,7 +102,7 @@
 
    --k-accent-text: light-dark(#5c4300, #ffcf4d);
    --k-accent-soft: light-dark(rgb(255 189 0 / 0.16), rgb(255 189 0 / 0.12));
-   --k-ring: light-dark(rgb(0 0 0 / 0.72), rgb(255 189 0 / 0.85));
+   --k-ring: light-dark(#474747, #ffbd00);
    --k-ring-soft: light-dark(rgb(255 189 0 / 0.38), rgb(255 189 0 / 0.24));
    --k-scrim: light-dark(rgb(0 0 0 / 0.32), rgb(0 0 0 / 0.6));
 }

package/dist/styles/shared.css

@@ -1,3 +1,58 @@
+:is(.k-menu-item, .k-combobox-option) {
+   display: flex;
+   align-items: center;
+   gap: 0.5rem;
+   min-height: 1.875rem;
+   padding: 0.25rem 0.5rem;
+   border-radius: var(--k-radius-sm);
+   font-size: 0.8125rem;
+   user-select: none;
+   -webkit-user-select: none;
+   transition:
+      background-color var(--k-duration) var(--k-ease),
+      color var(--k-duration) var(--k-ease);
+}
+
+:is(.k-navlink, .k-settings-modal-tab) {
+   display: flex;
+   align-items: center;
+   gap: 0.5rem;
+   min-height: 1.875rem;
+   padding-inline: 0.5rem;
+   border-radius: var(--k-radius-md);
+   font-size: 0.8125rem;
+   font-weight: 450;
+   color: var(--k-text-toned);
+   text-decoration: none;
+   transition:
+      background-color var(--k-duration) var(--k-ease),
+      box-shadow var(--k-duration) var(--k-ease),
+      color var(--k-duration) var(--k-ease),
+      scale var(--k-duration) var(--k-ease);
+}
+
+.k-navlink:hover:not(.is-disabled),
+.k-settings-modal-tab:hover:not(:disabled) {
+   background: var(--k-hover);
+   color: var(--k-text);
+}
+
+.k-navlink:active:not(.is-disabled),
+.k-settings-modal-tab:active:not(:disabled) {
+   scale: 0.985;
+}
+
+:is(
+   .k-navlink.is-active,
+   .k-navlink[aria-current='page'],
+   .k-settings-modal-tab[aria-current='true']
+) {
+   background: var(--k-surface);
+   box-shadow: var(--k-shadow-raised);
+   font-weight: 500;
+   color: var(--k-text);
+}
+
 :is(.k-menu-item-text, .k-combobox-option-text, .k-command-option-text) {
    display: flex;
    flex: 1;
@@ -5,8 +60,14 @@
    min-width: 0;
 }
 
-:is(.k-menu-item-label, .k-combobox-option-label, .k-command-option-label) {
-   overflow: hidden;
+:is(
+   .k-menu-item-label,
+   .k-combobox-option-label,
+   .k-combobox-tag-label,
+   .k-command-option-label,
+   .k-command-option-description
+) {
+   overflow-x: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
 }
@@ -16,7 +77,7 @@
    color: var(--k-text-muted);
 }
 
-:is(.k-menu-item, .k-combobox-option, .k-command-option)[aria-disabled='true'] {
+:is(.k-menu-item, .k-combobox-option, .k-command-option, .k-tree-row)[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
 }
@@ -69,3 +130,35 @@
 ) {
    font-family: var(--k-font-display, var(--k-font-sans));
 }
+
+:is(
+   .k-input-clear,
+   .k-date-picker-clear,
+   .k-combobox-icon-button,
+   .k-combobox-tag-remove,
+   .k-tag-remove,
+   .k-tree-toggle,
+   .k-switch-track,
+   .k-color-input-preset
+) {
+   position: relative;
+}
+
+:is(
+   .k-input-clear,
+   .k-date-picker-clear,
+   .k-combobox-icon-button,
+   .k-combobox-tag-remove,
+   .k-tag-remove,
+   .k-tree-toggle,
+   .k-switch-track,
+   .k-color-input-preset
+)::before {
+   content: '';
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   width: max(100%, 1.5rem);
+   height: max(100%, 1.5rem);
+   translate: -50% -50%;
+}

package/dist/styles/templates/account-menu.css

@@ -40,7 +40,7 @@
 }
 
 .k-account-name {
-   overflow: hidden;
+   overflow-x: clip;
    font-size: 0.8125rem;
    font-weight: 500;
    text-overflow: ellipsis;
@@ -49,11 +49,11 @@
 }
 
 .k-account-email {
-   overflow: hidden;
+   overflow-x: clip;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-account-more {

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

@@ -118,7 +118,7 @@
 .k-auth-footer {
    font-size: 0.75rem;
    text-align: center;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-auth-aside {

package/dist/styles/templates/brand.css

@@ -76,7 +76,7 @@
 }
 
 .k-brand-name {
-   overflow: hidden;
+   overflow-x: clip;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
@@ -86,11 +86,11 @@
 }
 
 .k-brand-subtitle {
-   overflow: hidden;
+   overflow-x: clip;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-brand-sm .k-brand-mark {

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

@@ -166,7 +166,7 @@ a.k-empty-page-step-title:hover {
 
 .k-empty-page-step-description {
    font-size: 0.75rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 @keyframes k-empty-fan {

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

@@ -73,3 +73,13 @@
    gap: 0.5rem;
    margin-left: auto;
 }
+
+.k-form-page-form:focus {
+   outline: 2px solid transparent;
+}
+
+.k-form-page:has(> .k-form-page-footer.is-sticky):not(.k-shell-body *)
+   .k-form-page-form
+   :is(input, select, textarea, button, a[href], [tabindex], [contenteditable]) {
+   scroll-margin-bottom: 5rem;
+}

package/dist/styles/templates/save-bar.css

@@ -43,3 +43,13 @@
    align-items: center;
    gap: 0.25rem;
 }
+
+.k-savebar-slot:focus {
+   outline: 2px solid transparent;
+}
+
+.k-root
+   :where(:has(> .k-savebar-slot.is-visible):not(.k-shell-body *))
+   :is(input, select, textarea, button, a[href], [tabindex], [contenteditable]) {
+   scroll-margin-bottom: 5rem;
+}

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

@@ -30,7 +30,7 @@
 
 .k-settings-modal-close {
    align-self: flex-start;
-   margin-bottom: 0.5rem;
+   margin-bottom: 0.25rem;
 }
 
 .k-settings-modal-nav-list {
@@ -39,10 +39,20 @@
    flex-direction: column;
    gap: 1px;
    min-height: 0;
-   margin-inline: -0.25rem;
-   padding-inline: 0.25rem;
+   margin-inline: -0.625rem;
+   padding: 0.25rem 0.625rem;
    overflow-y: auto;
    overscroll-behavior: contain;
+   border-block: 1px solid transparent;
+   transition: border-color var(--k-duration-lg) var(--k-ease);
+}
+
+.k-settings-modal-nav-list.is-overflow-top {
+   border-top-color: var(--k-line);
+}
+
+.k-settings-modal-nav-list.is-overflow-bottom:not(:has(+ .k-settings-modal-divider)) {
+   border-bottom-color: var(--k-line);
 }
 
 .k-settings-modal-nav-group {
@@ -56,43 +66,13 @@
    padding-inline: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 .k-settings-modal-tab {
-   display: flex;
-   align-items: center;
-   gap: 0.5rem;
    width: 100%;
-   height: 2rem;
    flex: none;
-   padding-inline: 0.5rem;
-   border-radius: var(--k-radius-md);
-   font-size: 0.8125rem;
-   font-weight: 500;
    text-align: start;
-   text-decoration: none;
-   color: var(--k-text-toned);
-   transition:
-      background-color var(--k-duration) var(--k-ease),
-      box-shadow var(--k-duration) var(--k-ease),
-      color var(--k-duration) var(--k-ease),
-      scale var(--k-duration) var(--k-ease);
-}
-
-.k-settings-modal-tab:hover:not(:disabled) {
-   background: var(--k-hover);
-   color: var(--k-text);
-}
-
-.k-settings-modal-tab:active:not(:disabled) {
-   scale: 0.985;
-}
-
-.k-settings-modal-tab[aria-current='true'] {
-   background: var(--k-surface);
-   box-shadow: var(--k-shadow-raised);
-   color: var(--k-text);
 }
 
 .k-settings-modal-tab:disabled {
@@ -101,18 +81,18 @@
 }
 
 .k-settings-modal-tab.is-danger {
-   color: var(--k-danger);
+   color: var(--k-danger-text);
 }
 
 .k-settings-modal-tab.is-danger:hover {
    background: color-mix(in oklab, var(--k-danger) 10%, transparent);
-   color: var(--k-danger);
+   color: var(--k-danger-text);
 }
 
 .k-settings-modal-tab-label {
    flex: 1;
    min-width: 0;
-   overflow: hidden;
+   overflow-x: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
 }
@@ -143,21 +123,35 @@
    display: flex;
    flex: 1;
    flex-direction: column;
-   gap: 1.25rem;
    min-width: 0;
+   min-height: 0;
+   animation: k-fade var(--k-duration-lg) var(--k-ease);
+}
+
+.k-settings-modal-body {
+   display: flex;
+   flex: 1;
+   flex-direction: column;
+   gap: 1.25rem;
+   min-height: 0;
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
-   animation: k-fade var(--k-duration-lg) var(--k-ease);
+   border-top: 1px solid transparent;
+   transition: border-color var(--k-duration-lg) var(--k-ease);
+}
+
+.k-settings-modal-body.is-overflow-top {
+   border-top-color: var(--k-line);
 }
 
 .k-settings-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
+   flex: none;
    gap: 1rem;
-   padding-bottom: 0.875rem;
-   border-bottom: 1px solid var(--k-line);
+   padding: 1.25rem 1.5rem 0.875rem;
 }
 
 .k-settings-modal-heading {
@@ -215,7 +209,7 @@
 }
 
 .k-settings-modal-account-name {
-   overflow: hidden;
+   overflow-x: clip;
    font-size: 0.875rem;
    font-weight: 500;
    text-overflow: ellipsis;
@@ -224,7 +218,7 @@
 }
 
 .k-settings-modal-account-email {
-   overflow: hidden;
+   overflow-x: clip;
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
@@ -475,7 +469,11 @@
       display: none;
    }
 
-   .k-settings-modal-content {
+   .k-settings-modal-header {
+      padding: 1rem 1rem 0.75rem;
+   }
+
+   .k-settings-modal-body {
       padding: 1rem;
    }
 

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

@@ -15,8 +15,8 @@
 .k-settings-nav-list {
    display: flex;
    gap: 0.25rem;
-   margin: 0 -1rem;
-   padding: 0.125rem 1rem 0.25rem;
+   margin: -0.125rem -1rem 0;
+   padding: 0.25rem 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    list-style: none;
@@ -65,7 +65,7 @@
 
 .k-settings-section-hint {
    font-size: 0.75rem;
-   color: var(--k-text-dimmed);
+   color: var(--k-text-muted);
 }
 
 @container k-page (min-width: 46rem) {

package/dist/styles/tokens.css

@@ -24,7 +24,7 @@
    --k-text: light-dark(#111114, #f2f2f3);
    --k-text-toned: light-dark(#3b3b42, #cdcdd3);
    --k-text-muted: light-dark(#6b6b75, #9b9ba5);
-   --k-text-dimmed: light-dark(#9d9da7, #686872);
+   --k-text-dimmed: light-dark(#85858e, #6e6e78);
    --k-text-inverted: light-dark(#ffffff, #111114);
 
    --k-accent-hover: light-dark(
@@ -38,7 +38,7 @@
    );
    --k-accent-soft: color-mix(in oklab, var(--k-accent) 11%, transparent);
    --k-accent-line: color-mix(in oklab, var(--k-accent) 34%, transparent);
-   --k-ring: color-mix(in oklab, var(--k-accent) 70%, transparent);
+   --k-ring: light-dark(var(--k-accent-text), color-mix(in oklab, var(--k-accent) 70%, white));
    --k-ring-soft: color-mix(in oklab, var(--k-accent) 18%, transparent);
    --k-selection: color-mix(in oklab, var(--k-accent) 28%, transparent);
    --k-focus-ring: 0 0 0 3px var(--k-ring-soft);
@@ -47,6 +47,16 @@
    --k-success: light-dark(#1d8a54, #5ccf90);
    --k-warning: light-dark(#b5620b, #efb255);
    --k-info: light-dark(#2f6fd6, #7aa8f4);
+   --k-danger-text: light-dark(
+      color-mix(in oklab, var(--k-danger) 82%, black),
+      color-mix(in oklab, var(--k-danger) 90%, white)
+   );
+   --k-success-text: light-dark(color-mix(in oklab, var(--k-success) 82%, black), var(--k-success));
+   --k-warning-text: light-dark(color-mix(in oklab, var(--k-warning) 82%, black), var(--k-warning));
+   --k-info-text: light-dark(
+      color-mix(in oklab, var(--k-info) 86%, black),
+      color-mix(in oklab, var(--k-info) 94%, white)
+   );
    --k-focus-ring-danger: 0 0 0 3px color-mix(in oklab, var(--k-danger) 18%, transparent);
 
    --k-hover: color-mix(in oklab, var(--k-text) 5%, transparent);

package/package.json

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

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

@@ -1 +0,0 @@
-export declare function focusFirst(container: Element | null | undefined): boolean;

package/dist/internal/overlays/focus.mjs

@@ -1,24 +0,0 @@
-const FOCUSABLE = [
-  "a[href]",
-  "area[href]",
-  "button:not([disabled])",
-  'input:not([disabled]):not([type="hidden"])',
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "iframe",
-  "summary",
-  '[contenteditable]:not([contenteditable="false"])',
-  '[tabindex]:not([tabindex="-1"])'
-].join(",");
-function focusableWithin(container) {
-  return [...container.querySelectorAll(FOCUSABLE)].filter(
-    (element) => !element.closest("[inert]") && element.getClientRects().length > 0
-  );
-}
-export function focusFirst(container) {
-  if (!container) return false;
-  const first = focusableWithin(container)[0];
-  if (!first) return false;
-  first.focus();
-  return true;
-}