@xleddyl/443-components-vue 0.4.0 → 0.5.0

package/dist/components/overlays/Toaster.vue

@@ -79,7 +79,7 @@
                         variant="ghost"
                         tone="neutral"
                         :aria-label="dismissText"
-                        @click="dismiss(entry.id)"
+                        @click="dismissFromToast(entry.id)"
                      />
                   </div>
                   <span
@@ -122,6 +122,7 @@ const props = defineProps({
   position: { type: String, required: false, default: "bottom-right" },
   max: { type: Number, required: false, default: 4 },
   duration: { type: Number, required: false, default: 4e3 },
+  actionDuration: { type: Number, required: false, default: 1e4 },
   gap: { type: Number, required: false, default: 8 },
   expand: { type: Boolean, required: false },
   progress: { type: Boolean, required: false },
@@ -274,7 +275,8 @@ function syncEntries() {
 }
 const timers = /* @__PURE__ */ new Map();
 function durationOf(item) {
-  return item.duration ?? props.duration;
+  if (item.duration !== void 0) return item.duration;
+  return item.action ? Math.max(props.duration, props.actionDuration) : props.duration;
 }
 function hasTimer(item) {
   const duration = durationOf(item);
@@ -343,8 +345,15 @@ function resumeTimers() {
   for (const [id, timer] of timers) if (timer.handle === void 0) run(id, timer);
 }
 watch(paused, (value) => value ? pauseTimers() : resumeTimers());
+function actionHint(item) {
+  if (!item.action || !props.hotkey) return "";
+  return t("toaster.actionHint", {
+    hotkey: ariaKeyShortcuts(props.hotkey, false),
+    action: item.action.label
+  });
+}
 function announce(item) {
-  const text = [item.title, ...descriptionLines(item)].filter(Boolean).join(". ");
+  const text = [item.title, ...descriptionLines(item), actionHint(item)].filter(Boolean).join(". ");
   const target = item.tone === "danger" ? assertiveMessage : politeMessage;
   target.value = "";
   nextTick(() => target.value = text);
@@ -408,9 +417,29 @@ watch(active, async (value) => {
 function dismiss(id) {
   toast.dismiss(id);
 }
+let returnFocus = null;
+function focusInToaster() {
+  const active2 = document.activeElement;
+  return Boolean(active2 && toasterRef.value?.contains(active2));
+}
+function restoreFocus() {
+  const target = returnFocus;
+  returnFocus = null;
+  const next = toasterRef.value?.querySelector(
+    '.k-toast[data-visible="true"]:not([data-removed="true"]) button'
+  );
+  if (target?.isConnected) target.focus({ preventScroll: true });
+  else if (next) next.focus({ preventScroll: true });
+  if (!focusInToaster()) focusInside.value = false;
+}
+function dismissFromToast(id) {
+  const hadFocus = focusInToaster();
+  dismiss(id);
+  if (hadFocus) nextTick(restoreFocus);
+}
 function runAction(item, event) {
   item.action?.onClick(event);
-  if (!item.action?.keepOpen) dismiss(item.id);
+  if (!item.action?.keepOpen) dismissFromToast(item.id);
 }
 function onPointerEnter(event) {
   if (event.pointerType === "mouse") hovered.value = true;
@@ -451,6 +480,8 @@ function onVisibilityChange() {
 useHotkey(
   () => props.hotkey ? [props.hotkey] : [],
   () => {
+    if (!focusInToaster())
+      returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     const first = toasterRef.value?.querySelector(
       '.k-toast[data-visible="true"] button'
     );

package/dist/components/overlays/Toaster.vue.d.ts

@@ -3,6 +3,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     position?: ToasterPosition;
     max?: number;
     duration?: number;
+    actionDuration?: number;
     gap?: number;
     expand?: boolean;
     progress?: boolean;
@@ -214,6 +215,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     position?: ToasterPosition;
     max?: number;
     duration?: number;
+    actionDuration?: number;
     gap?: number;
     expand?: boolean;
     progress?: boolean;
@@ -426,6 +428,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     duration: number;
     position: ToasterPosition;
     gap: number;
+    actionDuration: number;
     hotkey: string | false;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/overlays/types.d.ts

@@ -10,6 +10,7 @@ export interface ToasterOptions {
     position?: ToasterPosition;
     max?: number;
     duration?: number;
+    actionDuration?: number;
     gap?: number;
     expand?: boolean;
     progress?: boolean;

package/dist/internal/layout/route.mjs

@@ -29,6 +29,6 @@ export function matchesPath(current, target, exact) {
   const from = normalize(current);
   const to = normalize(target);
   if (from === to) return true;
-  if (exact) return false;
+  if (exact || !to) return false;
   return from.startsWith(to === "/" ? "/" : `${to}/`) && to !== "/";
 }

package/dist/locale/en.mjs

@@ -287,7 +287,8 @@ export const en = {
     },
     toaster: {
       label: "Notifications",
-      dismiss: "Dismiss notification"
+      dismiss: "Dismiss notification",
+      actionHint: "Press {hotkey} to reach {action}"
     },
     tree: {
       label: "Tree",

package/dist/locale/it.mjs

@@ -287,7 +287,8 @@ export const it = {
     },
     toaster: {
       label: "Notifiche",
-      dismiss: "Chiudi notifica"
+      dismiss: "Chiudi notifica",
+      actionHint: "Premi {hotkey} per raggiungere {action}"
     },
     tree: {
       label: "Albero",

package/dist/locale/types.d.ts

@@ -286,6 +286,7 @@ export interface KMessages {
     toaster: {
         label: string;
         dismiss: string;
+        actionHint: string;
     };
     tree: {
         label: string;

package/dist/nuxt/module.mjs

@@ -292,7 +292,7 @@ function filterCollection(data, option) {
       ([name, alias]) => keep(name) && alias.parent in icons
     )
   );
-  return { prefix: data.prefix, icons, aliases, width: data.width, height: data.height };
+  return { prefix: option.prefix, icons, aliases, width: data.width, height: data.height };
 }
 function collectionSvg(collections, name) {
   const index = name.indexOf(":");

package/dist/styles/core/form-field.css

@@ -2,7 +2,7 @@
    --k-icon-size: 0.875rem;
    display: flex;
    flex-direction: column;
-   gap: 0.4375rem;
+   gap: 0.375rem;
    min-width: 0;
 }
 
@@ -46,7 +46,7 @@
 .k-form-field-description {
    margin-top: -0.125rem;
    font-size: 0.75rem;
-   line-height: 1.45;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

package/dist/styles/data/description-list.css

@@ -6,7 +6,8 @@
 
 .k-description-item {
    display: grid;
-   gap: 0.25rem;
+   align-content: start;
+   gap: 0.125rem;
    min-width: 0;
    padding-block: 0.625rem;
    animation: k-row-in 360ms var(--k-ease-out) backwards;
@@ -51,6 +52,7 @@
 .k-description-details {
    display: flex;
    flex-direction: column;
+   align-items: flex-start;
    gap: 0.125rem;
    min-width: 0;
    font-size: 0.8125rem;
@@ -70,7 +72,7 @@
 @container (max-width: 32rem) {
    .k-description-list-inline .k-description-item {
       grid-template-columns: minmax(0, 1fr);
-      gap: 0.25rem;
+      gap: 0.125rem;
    }
 
    .k-description-list-grid {
@@ -81,7 +83,7 @@
 @media (max-width: 559px) {
    .k-description-list-inline .k-description-item {
       grid-template-columns: minmax(0, 1fr);
-      gap: 0.25rem;
+      gap: 0.125rem;
    }
 
    .k-description-list-grid {

package/dist/styles/data/table.css

@@ -254,6 +254,7 @@
    margin-top: -0.125rem;
    border: solid var(--k-accent-contrast);
    border-width: 0 0 2px 2px;
+   rotate: -45deg;
    opacity: 0;
    scale: 0.4;
    transition:

package/dist/styles/data/timeline.css

@@ -103,6 +103,7 @@
 
 .k-timeline-description {
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

package/dist/styles/feedback/alert.css

@@ -78,6 +78,7 @@
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
+   line-height: 1.4;
    padding-top: 0.0625rem;
 }
 

package/dist/styles/feedback/empty-state.css

@@ -4,7 +4,7 @@
    display: flex;
    flex-direction: column;
    align-items: center;
-   gap: 0.375rem;
+   gap: 0.125rem;
    padding: 3.5rem 1.5rem;
    overflow: hidden;
    text-align: center;
@@ -34,7 +34,7 @@
 }
 
 .k-empty-sm {
-   gap: 0.25rem;
+   gap: 0.125rem;
    padding: 2rem 1rem;
 }
 
@@ -44,7 +44,7 @@
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
-   margin-bottom: 0.625rem;
+   margin-bottom: 0.875rem;
    border-radius: var(--k-radius-lg);
    background: var(--k-surface);
    box-shadow:
@@ -57,13 +57,14 @@
    --k-icon-size: 1rem;
    width: 2.25rem;
    height: 2.25rem;
-   margin-bottom: 0.375rem;
+   margin-bottom: 0.5rem;
    border-radius: var(--k-radius-md);
 }
 
 .k-empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
+   line-height: 1.3;
    color: var(--k-text);
 }
 
@@ -74,6 +75,7 @@
 .k-empty-description {
    max-width: 28rem;
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

package/dist/styles/layout/accordion.css

@@ -100,7 +100,7 @@
 .k-accordion-description {
    font-size: 0.75rem;
    font-weight: 400;
-   line-height: 1.45;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

package/dist/styles/layout/card.css

@@ -47,6 +47,10 @@
    padding: var(--k-card-pad) var(--k-card-pad) 0;
 }
 
+.k-card-header:last-child {
+   padding-bottom: var(--k-card-pad);
+}
+
 .k-card-pad-none > .k-card-header {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--k-line);
@@ -74,15 +78,21 @@
    min-width: 0;
 }
 
+.k-card-icon + .k-card-heading {
+   justify-content: center;
+   min-height: 2rem;
+}
+
 .k-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
-   line-height: 1.35;
+   line-height: 1.3;
    color: var(--k-text);
 }
 
 .k-card-description {
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 
@@ -102,7 +112,7 @@
 }
 
 .k-card-header + .k-card-body {
-   padding-top: 0.875rem;
+   padding-top: min(0.875rem, var(--k-card-pad));
 }
 
 .k-card-pad-none > .k-card-header + .k-card-body {

package/dist/styles/layout/page-header.css

@@ -45,7 +45,7 @@
 .k-page-header-text {
    display: flex;
    flex-direction: column;
-   gap: 0.1875rem;
+   gap: 0.125rem;
    min-width: 0;
 }
 
@@ -67,6 +67,7 @@
 .k-page-header-description {
    max-width: 44rem;
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

package/dist/styles/overlays/drawer.css

@@ -14,7 +14,9 @@
 
 .k-drawer-bottom {
    flex-direction: column;
+   align-items: center;
    justify-content: flex-end;
+   padding: 1rem 1rem 0;
 }
 
 .k-drawer-panel {
@@ -50,10 +52,12 @@
 }
 
 .k-drawer-bottom > .k-drawer-panel {
-   --k-drawer-hidden: translateY(calc(100% + 1rem));
-   max-width: none;
+   --k-drawer-hidden: translateY(100%);
+   max-width: var(--k-drawer-sheet-width, 50rem);
    height: auto;
    max-height: var(--k-drawer-size);
+   padding-bottom: env(safe-area-inset-bottom);
+   border-radius: var(--k-radius-xl) var(--k-radius-xl) 0 0;
 }
 
 .k-drawer-sm > .k-drawer-panel {
@@ -74,6 +78,7 @@
 
 .k-drawer-bottom.k-drawer-sm > .k-drawer-panel {
    --k-drawer-size: 30dvh;
+   --k-drawer-sheet-width: 32rem;
 }
 
 .k-drawer-bottom.k-drawer-md > .k-drawer-panel {
@@ -89,6 +94,14 @@
    --k-drawer-size: 100%;
 }
 
+.k-drawer-bottom.k-drawer-xl > .k-drawer-panel {
+   --k-drawer-sheet-width: 64rem;
+}
+
+.k-drawer-bottom.k-drawer-full > .k-drawer-panel {
+   --k-drawer-sheet-width: none;
+}
+
 .k-drawer-header {
    align-items: center;
    min-height: 3.5rem;
@@ -118,4 +131,12 @@
    .k-drawer-right > .k-drawer-panel {
       max-width: calc(100% - 2rem);
    }
+
+   .k-drawer.k-drawer-bottom {
+      padding: 2rem 0 0;
+   }
+
+   .k-drawer-bottom > .k-drawer-panel {
+      max-width: none;
+   }
 }

package/dist/styles/overlays/modal.css

@@ -8,7 +8,7 @@
    max-height: none;
    margin: 0;
    padding: 1rem;
-   overflow: hidden;
+   overflow: clip;
    color: var(--k-text-toned);
    background: transparent;
    border: 0;
@@ -152,7 +152,7 @@
 .k-drawer-heading {
    display: flex;
    flex-direction: column;
-   gap: 0.25rem;
+   gap: 0.125rem;
    min-width: 0;
    padding-top: 0.125rem;
 }
@@ -176,7 +176,7 @@
 .k-drawer-title {
    font-size: 0.9375rem;
    font-weight: 600;
-   line-height: 1.35;
+   line-height: 1.3;
    color: var(--k-text);
    letter-spacing: -0.015em;
 }
@@ -184,6 +184,7 @@
 .k-modal-description,
 .k-drawer-description {
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

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;

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;

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/settings-modal.css

@@ -170,13 +170,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);
 }
 
@@ -258,6 +259,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 +267,7 @@
 
 .k-settings-group-description {
    font-size: 0.8125rem;
+   line-height: 1.4;
    color: var(--k-text-muted);
 }
 

package/package.json

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