@xleddyl/443-components-vue 0.4.0 → 0.6.0

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

@@ -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;
@@ -114,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

@@ -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;
@@ -162,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/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

@@ -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 {
@@ -170,13 +164,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);
 }
 
@@ -214,7 +209,7 @@
 }
 
 .k-settings-modal-account-name {
-   overflow: hidden;
+   overflow-x: clip;
    font-size: 0.875rem;
    font-weight: 500;
    text-overflow: ellipsis;
@@ -223,7 +218,7 @@
 }
 
 .k-settings-modal-account-email {
-   overflow: hidden;
+   overflow-x: clip;
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
@@ -258,6 +253,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 +261,7 @@
 
 .k-settings-group-description {
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 
@@ -472,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.4.0",
+  "version": "0.6.0",
   "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;
-}