@xleddyl/443-components-vue 0.2.3 → 0.4.0

package/dist/internal/overlays/dialog.mjs

@@ -11,6 +11,35 @@ export function useModalDialog(options) {
   const scrollLock = useScrollLock();
   let returnTarget = null;
   let pressedOnBackdrop = false;
+  let closing = false;
+  async function allowClose(reason) {
+    const guard = options.beforeClose?.();
+    if (!guard) return true;
+    if (closing) return false;
+    closing = true;
+    try {
+      return await guard(reason) !== false;
+    } catch {
+      return false;
+    } finally {
+      closing = false;
+    }
+  }
+  async function requestClose(reason) {
+    if (!options.open.value) return true;
+    if (!await allowClose(reason)) return false;
+    options.open.value = false;
+    return true;
+  }
+  function reopen() {
+    const dialog = options.dialog.value;
+    if (!dialog || dialog.open || !options.open.value) return;
+    try {
+      dialog.showModal();
+    } catch {
+      dialog.setAttribute("open", "");
+    }
+  }
   async function show() {
     present.value = true;
     await nextTick();
@@ -63,10 +92,15 @@ export function useModalDialog(options) {
   });
   function onCancel(event) {
     event.preventDefault();
-    if (options.dismissible()) options.open.value = false;
+    if (options.dismissible()) requestClose("escape");
   }
-  function onClose() {
-    if (options.open.value) options.open.value = false;
+  async function onClose() {
+    if (!options.open.value) return;
+    if (!options.beforeClose?.()) {
+      options.open.value = false;
+      return;
+    }
+    if (!options.dismissible() || !await requestClose("escape")) reopen();
   }
   function onPointerDown(event) {
     pressedOnBackdrop = event.target === event.currentTarget;
@@ -74,7 +108,7 @@ export function useModalDialog(options) {
   function onClick(event) {
     const fromBackdrop = pressedOnBackdrop && event.target === event.currentTarget;
     pressedOnBackdrop = false;
-    if (fromBackdrop && options.dismissible()) options.open.value = false;
+    if (fromBackdrop && options.dismissible()) requestClose("backdrop");
   }
-  return { present, onCancel, onClose, onPointerDown, onClick };
+  return { present, requestClose, onCancel, onClose, onPointerDown, onClick };
 }

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

@@ -1,5 +1,5 @@
 import type { Component, InjectionKey } from 'vue';
-import type { DrawerSide, DrawerSize, ModalSize } from '../../components/overlays/types';
+import type { DialogBeforeClose, DrawerSide, DrawerSize, ModalSize } from '../../components/overlays/types';
 export type OverlayKind = 'modal' | 'drawer';
 export interface OverlayOptions {
     as?: OverlayKind;
@@ -12,6 +12,7 @@ export interface OverlayOptions {
     dismissible?: boolean;
     hideClose?: boolean;
     closeLabel?: string;
+    beforeClose?: DialogBeforeClose;
 }
 export interface OverlayContext<R = unknown> {
     id: number;

package/dist/locale/en.mjs

@@ -187,7 +187,12 @@ export const en = {
       title: "Drop files here or click to browse",
       drop: "Release to add files",
       list: "Selected files",
-      selected: "{count} file selected | {count} files selected"
+      selected: "{count} file selected | {count} files selected",
+      directoryTitle: "Drop a folder here or click to browse",
+      mixedTitle: "Drop files or folders here or click to browse",
+      browseDirectory: "Upload a folder",
+      loading: "Uploading",
+      added: "{count} file added | {count} files added"
     },
     filterPills: {
       label: "Filters"
@@ -239,6 +244,13 @@ export const en = {
     saveBar: {
       message: "You have unsaved changes"
     },
+    selectionBar: {
+      label: "Selection",
+      selectedOf: "{count} of {total} selected",
+      selectAll: "Select all {count}",
+      clear: "Clear selection",
+      cleared: "Selection cleared"
+    },
     settings: {
       title: "Settings",
       close: "Close settings",
@@ -278,7 +290,12 @@ export const en = {
       dismiss: "Dismiss notification"
     },
     tree: {
-      label: "Tree"
+      label: "Tree",
+      empty: "No items",
+      reorderHint: "Press Alt with the up or down arrow to move",
+      reorderNestedHint: "Press Alt with the arrow keys to move: up and down change the position, left and right change the level",
+      moved: "{label} moved to position {position} of {count}",
+      movedInto: "{label} moved into {parent}, position {position} of {count}"
     }
   }
 };

package/dist/locale/it.mjs

@@ -187,7 +187,12 @@ export const it = {
       title: "Trascina i file qui o fai clic per sfogliare",
       drop: "Rilascia per aggiungere i file",
       list: "File selezionati",
-      selected: "{count} file selezionato | {count} file selezionati"
+      selected: "{count} file selezionato | {count} file selezionati",
+      directoryTitle: "Trascina una cartella qui o fai clic per sfogliare",
+      mixedTitle: "Trascina file o cartelle qui o fai clic per sfogliare",
+      browseDirectory: "Carica una cartella",
+      loading: "Caricamento in corso",
+      added: "{count} file aggiunto | {count} file aggiunti"
     },
     filterPills: {
       label: "Filtri"
@@ -239,6 +244,13 @@ export const it = {
     saveBar: {
       message: "Hai modifiche non salvate"
     },
+    selectionBar: {
+      label: "Selezione",
+      selectedOf: "{count} di {total} selezionato | {count} di {total} selezionati",
+      selectAll: "Seleziona tutti e {count}",
+      clear: "Deseleziona tutto",
+      cleared: "Selezione annullata"
+    },
     settings: {
       title: "Impostazioni",
       close: "Chiudi impostazioni",
@@ -278,7 +290,12 @@ export const it = {
       dismiss: "Chiudi notifica"
     },
     tree: {
-      label: "Albero"
+      label: "Albero",
+      empty: "Nessun elemento",
+      reorderHint: "Premi Alt con la freccia su o gi\xF9 per spostare",
+      reorderNestedHint: "Premi Alt con le frecce per spostare: su e gi\xF9 cambiano la posizione, sinistra e destra il livello",
+      moved: "{label} ora in posizione {position} di {count}",
+      movedInto: "{label} ora dentro {parent}, in posizione {position} di {count}"
     }
   }
 };

package/dist/locale/types.d.ts

@@ -186,6 +186,11 @@ export interface KMessages {
         drop: string;
         list: string;
         selected: string;
+        directoryTitle: string;
+        mixedTitle: string;
+        browseDirectory: string;
+        loading: string;
+        added: string;
     };
     filterPills: {
         label: string;
@@ -237,6 +242,13 @@ export interface KMessages {
     saveBar: {
         message: string;
     };
+    selectionBar: {
+        label: string;
+        selectedOf: string;
+        selectAll: string;
+        clear: string;
+        cleared: string;
+    };
     settings: {
         title: string;
         close: string;
@@ -277,6 +289,11 @@ export interface KMessages {
     };
     tree: {
         label: string;
+        empty: string;
+        reorderHint: string;
+        reorderNestedHint: string;
+        moved: string;
+        movedInto: string;
     };
 }
 export interface KLocale {

package/dist/nuxt/module.d.ts

@@ -5,6 +5,7 @@ import type { DeepPartial, KMessages } from '../locale/types';
 export type { KAppConfig } from '../components/templates/types';
 export interface IconCollectionOption {
     prefix: string;
+    from?: string;
     include?: string[];
     exclude?: string[];
 }

package/dist/nuxt/module.mjs

@@ -149,12 +149,15 @@ export default defineNuxtModule({
       ].join("\n")
     });
     const collections = [];
+    const seenPrefixes = /* @__PURE__ */ new Set();
     for (const entry of options.icons.collections ?? []) {
       const collection = typeof entry === "string" ? { prefix: entry } : entry;
-      const file = await resolveCollectionFile(collection.prefix, searchPaths);
-      if (!file) {
+      if (seenPrefixes.has(collection.prefix)) continue;
+      seenPrefixes.add(collection.prefix);
+      const file = collection.from ? resolveIconsDir(collection.from, nuxt.options.rootDir) : await resolveCollectionFile(collection.prefix, searchPaths);
+      if (!file || !existsSync(file)) {
         console.warn(
-          `[@xleddyl/443-components-vue] icon collection "${collection.prefix}" not installed: pnpm add -D @iconify-json/${collection.prefix}`
+          collection.from ? `[@xleddyl/443-components-vue] icon collection "${collection.prefix}" not found: ${file}` : `[@xleddyl/443-components-vue] icon collection "${collection.prefix}" not installed: pnpm add -D @iconify-json/${collection.prefix}`
         );
         continue;
       }

package/dist/nuxt/runtime/layouts/auth.vue.d.ts

@@ -21,9 +21,6 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly bind?: Record<string, unknown> | undefined;
-    readonly type?: string | undefined | undefined;
-    readonly ref?: import("vue").VNodeRef | undefined;
-    readonly target?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -127,6 +124,8 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly id?: string | undefined | undefined;
     readonly lang?: string | undefined | undefined;
     readonly media?: string | undefined | undefined;
+    readonly target?: string | undefined | undefined;
+    readonly type?: string | undefined | undefined;
     readonly tabindex?: (string | number) | undefined;
     readonly href?: string | undefined | undefined;
     readonly 'aria-activedescendant'?: string | undefined | undefined;
@@ -138,7 +137,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-colindex'?: (string | number) | undefined;
     readonly 'aria-colspan'?: (string | number) | undefined;
     readonly 'aria-controls'?: string | undefined | undefined;
-    readonly 'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    readonly 'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     readonly 'aria-describedby'?: string | undefined | undefined;
     readonly 'aria-details'?: string | undefined | undefined;
     readonly 'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -175,6 +174,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-valuemin'?: (string | number) | undefined;
     readonly 'aria-valuenow'?: (string | number) | undefined;
     readonly 'aria-valuetext'?: string | undefined | undefined;
+    readonly ref?: import("vue").VNodeRef | undefined;
     readonly ref_for?: boolean | undefined;
     readonly ref_key?: string | undefined;
     readonly accesskey?: string | undefined | undefined;
@@ -239,9 +239,6 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly bind?: Record<string, unknown> | undefined;
-    readonly type?: string | undefined | undefined;
-    readonly ref?: import("vue").VNodeRef | undefined;
-    readonly target?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -345,6 +342,8 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly id?: string | undefined | undefined;
     readonly lang?: string | undefined | undefined;
     readonly media?: string | undefined | undefined;
+    readonly target?: string | undefined | undefined;
+    readonly type?: string | undefined | undefined;
     readonly tabindex?: (string | number) | undefined;
     readonly href?: string | undefined | undefined;
     readonly 'aria-activedescendant'?: string | undefined | undefined;
@@ -356,7 +355,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-colindex'?: (string | number) | undefined;
     readonly 'aria-colspan'?: (string | number) | undefined;
     readonly 'aria-controls'?: string | undefined | undefined;
-    readonly 'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    readonly 'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     readonly 'aria-describedby'?: string | undefined | undefined;
     readonly 'aria-details'?: string | undefined | undefined;
     readonly 'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -393,6 +392,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-valuemin'?: (string | number) | undefined;
     readonly 'aria-valuenow'?: (string | number) | undefined;
     readonly 'aria-valuetext'?: string | undefined | undefined;
+    readonly ref?: import("vue").VNodeRef | undefined;
     readonly ref_for?: boolean | undefined;
     readonly ref_key?: string | undefined;
     readonly accesskey?: string | undefined | undefined;

package/dist/nuxt/runtime/layouts/dashboard.vue.d.ts

@@ -21,9 +21,6 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly bind?: Record<string, unknown> | undefined;
-    readonly type?: string | undefined | undefined;
-    readonly ref?: import("vue").VNodeRef | undefined;
-    readonly target?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -127,6 +124,8 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly id?: string | undefined | undefined;
     readonly lang?: string | undefined | undefined;
     readonly media?: string | undefined | undefined;
+    readonly target?: string | undefined | undefined;
+    readonly type?: string | undefined | undefined;
     readonly tabindex?: (string | number) | undefined;
     readonly href?: string | undefined | undefined;
     readonly 'aria-activedescendant'?: string | undefined | undefined;
@@ -138,7 +137,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-colindex'?: (string | number) | undefined;
     readonly 'aria-colspan'?: (string | number) | undefined;
     readonly 'aria-controls'?: string | undefined | undefined;
-    readonly 'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    readonly 'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     readonly 'aria-describedby'?: string | undefined | undefined;
     readonly 'aria-details'?: string | undefined | undefined;
     readonly 'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -175,6 +174,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-valuemin'?: (string | number) | undefined;
     readonly 'aria-valuenow'?: (string | number) | undefined;
     readonly 'aria-valuetext'?: string | undefined | undefined;
+    readonly ref?: import("vue").VNodeRef | undefined;
     readonly ref_for?: boolean | undefined;
     readonly ref_key?: string | undefined;
     readonly accesskey?: string | undefined | undefined;
@@ -239,9 +239,6 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly results?: (string | number) | undefined;
     readonly placeholder?: string | undefined | undefined;
     readonly bind?: Record<string, unknown> | undefined;
-    readonly type?: string | undefined | undefined;
-    readonly ref?: import("vue").VNodeRef | undefined;
-    readonly target?: string | undefined | undefined;
     readonly class?: import("vue").ClassValue;
     readonly role?: string | undefined | undefined;
     readonly 'aria-label'?: string | undefined | undefined;
@@ -345,6 +342,8 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly id?: string | undefined | undefined;
     readonly lang?: string | undefined | undefined;
     readonly media?: string | undefined | undefined;
+    readonly target?: string | undefined | undefined;
+    readonly type?: string | undefined | undefined;
     readonly tabindex?: (string | number) | undefined;
     readonly href?: string | undefined | undefined;
     readonly 'aria-activedescendant'?: string | undefined | undefined;
@@ -356,7 +355,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-colindex'?: (string | number) | undefined;
     readonly 'aria-colspan'?: (string | number) | undefined;
     readonly 'aria-controls'?: string | undefined | undefined;
-    readonly 'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    readonly 'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     readonly 'aria-describedby'?: string | undefined | undefined;
     readonly 'aria-details'?: string | undefined | undefined;
     readonly 'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -393,6 +392,7 @@ declare const __VLS_base: import("vue").DefineComponent<Partial<NonNullable<{
     readonly 'aria-valuemin'?: (string | number) | undefined;
     readonly 'aria-valuenow'?: (string | number) | undefined;
     readonly 'aria-valuetext'?: string | undefined | undefined;
+    readonly ref?: import("vue").VNodeRef | undefined;
     readonly ref_for?: boolean | undefined;
     readonly ref_key?: string | undefined;
     readonly accesskey?: string | undefined | undefined;

package/dist/styles/base.css

@@ -10,11 +10,13 @@
 }
 
 html.k-root {
+   font-size: 100%;
    background: var(--k-canvas);
 }
 
 html.k-root > body {
    margin: 0;
+   font-size: var(--k-font-size);
 }
 
 :where(.k-root, .k-root *, .k-root *::before, .k-root *::after) {

package/dist/styles/core/button.css

@@ -64,7 +64,7 @@
 }
 
 .k-btn > .k-icon {
-   transition: transform var(--k-duration-lg) var(--k-ease-spring);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-btn:hover > .k-icon[data-icon='arrow-right'],
@@ -77,18 +77,6 @@
    transform: translateX(-2px);
 }
 
-.k-btn:hover > .k-icon[data-icon='plus'] {
-   transform: rotate(90deg);
-}
-
-.k-btn:hover > .k-icon[data-icon='arrow-path'] {
-   transform: rotate(60deg);
-}
-
-.k-btn:hover > .k-icon[data-icon='arrow-up-tray'] {
-   transform: translateY(-1px);
-}
-
 .k-btn-xs {
    --k-btn-size: var(--k-size-xs);
    --k-icon-size: 0.875rem;

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

@@ -0,0 +1,34 @@
+.k-field-message,
+.k-form-field-error,
+.k-form-field-warning {
+   --k-icon-size: 0.875rem;
+   --k-field-message-tone: var(--k-danger);
+   display: flex;
+   align-items: flex-start;
+   gap: 0.375rem;
+   font-size: 0.8125rem;
+   line-height: 1.35;
+   color: var(--k-field-message-tone);
+   animation: k-enter var(--k-duration-lg) var(--k-ease-out) backwards;
+}
+
+.k-field-message-warning,
+.k-form-field-warning {
+   --k-field-message-tone: var(--k-warning);
+}
+
+.k-field-message-neutral {
+   --k-field-message-tone: var(--k-text-muted);
+}
+
+.k-field-message > .k-icon,
+.k-form-field-error > .k-icon,
+.k-form-field-warning > .k-icon {
+   flex: none;
+   margin-top: 0.0625rem;
+}
+
+.k-field-message-text {
+   min-width: 0;
+   overflow-wrap: anywhere;
+}

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

@@ -50,29 +50,6 @@
    color: var(--k-text-muted);
 }
 
-.k-form-field-error,
-.k-form-field-warning {
-   display: flex;
-   align-items: flex-start;
-   gap: 0.375rem;
-   font-size: 0.8125rem;
-   line-height: 1.35;
-   animation: k-enter var(--k-duration-lg) var(--k-ease-out) backwards;
-}
-
-.k-form-field-error > .k-icon,
-.k-form-field-warning > .k-icon {
-   margin-top: 0.0625rem;
-}
-
-.k-form-field-error {
-   color: var(--k-danger);
-}
-
-.k-form-field-warning {
-   color: var(--k-warning);
-}
-
 .k-form-field.is-shaking :is(.k-field, .k-input, [data-k-shake]) {
    animation: k-shake 320ms var(--k-ease);
 }

package/dist/styles/core/form.css

@@ -8,3 +8,14 @@
 .k-form[aria-busy='true'] {
    cursor: progress;
 }
+
+.k-form-alerts {
+   display: flex;
+   flex-direction: column;
+   gap: 0.5rem;
+   border-radius: var(--k-radius-md);
+}
+
+.k-form-alerts:focus {
+   outline: none;
+}

package/dist/styles/core/kbd.css

@@ -6,7 +6,7 @@
    height: 1.25rem;
    padding: 0 0.3125rem;
    font-family: var(--k-font-mono);
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    color: var(--k-text-muted);
@@ -21,5 +21,5 @@
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
-   font-size: 0.625rem;
+   font-size: 0.75rem;
 }

package/dist/styles/core/spinner.css

@@ -28,3 +28,22 @@
    --k-spinner-size: 1.75rem;
    --k-spinner-width: 2.5px;
 }
+
+.k-spinner-block {
+   display: flex;
+   flex: 1;
+   flex-direction: column;
+   align-items: center;
+   justify-content: center;
+   gap: 0.75rem;
+   width: 100%;
+   min-height: 10rem;
+   padding: 1.5rem;
+   font-size: 0.8125rem;
+   color: var(--k-text-muted);
+   text-align: center;
+}
+
+.k-spinner-label {
+   animation: k-fade 300ms var(--k-ease) 120ms backwards;
+}

package/dist/styles/core.css

@@ -4,6 +4,7 @@
 @import './core/button.css';
 @import './core/input.css';
 @import './core/textarea.css';
+@import './core/field-message.css';
 @import './core/form-field.css';
 @import './core/form.css';
 @import './core/kbd.css';

package/dist/styles/data/avatar.css

@@ -118,7 +118,7 @@
 
 .k-avatar-group > .k-avatar {
    box-shadow: 0 0 0 2px var(--k-surface);
-   transition: translate var(--k-duration-lg) var(--k-ease-spring);
+   transition: translate var(--k-duration-lg) var(--k-ease-out);
 }
 
 .k-avatar-group > .k-avatar + .k-avatar {

package/dist/styles/data/badge.css

@@ -27,7 +27,7 @@
    gap: 0.25rem;
    height: 1.125rem;
    padding: 0 0.375rem;
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
 }
 
 .k-badge-accent {

package/dist/styles/data/filter-pills.css

@@ -36,7 +36,7 @@
    scale: 0.97;
 }
 
-.k-filter-pill[aria-pressed='true'] {
+.k-filter-pill:is([aria-pressed='true'], .is-active) {
    border-style: solid;
    border-color: var(--k-accent-line);
    background: var(--k-accent-soft);
@@ -71,7 +71,6 @@
 }
 
 .k-filter-pill[aria-pressed='true'] .k-filter-pill-check > .k-icon {
-   animation: k-icon-pop 300ms var(--k-ease-spring);
 }
 
 .k-filter-pill-count {
@@ -79,18 +78,19 @@
    padding: 0.125rem 0.3125rem;
    border-radius: var(--k-radius-full);
    background: var(--k-fill);
-   font-size: 0.6875rem;
+   font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    color: var(--k-text-muted);
 }
 
-.k-filter-pill[aria-pressed='true'] .k-filter-pill-count {
+.k-filter-pill:is([aria-pressed='true'], .is-active) .k-filter-pill-count {
    background: color-mix(in oklab, var(--k-accent) 16%, transparent);
    color: var(--k-accent-text);
 }
 
+.k-filter-pill-sm,
 .k-filter-pills-sm .k-filter-pill {
    height: var(--k-size-xs);
    padding: 0 0.5625rem;
@@ -100,3 +100,39 @@
 .k-filter-pills-clear {
    margin-left: 0.25rem;
 }
+
+.k-filter-pill[aria-expanded='true'] {
+   border-style: solid;
+   background: var(--k-hover);
+   color: var(--k-text);
+}
+
+.k-filter-pill.is-active[aria-expanded='true'] {
+   background: color-mix(in oklab, var(--k-accent) 18%, transparent);
+   color: var(--k-accent-text);
+}
+
+.k-filter-pill-value {
+   padding-left: 0.3125rem;
+   border-left: 1px solid currentColor;
+   border-left-color: color-mix(in oklab, currentColor 30%, transparent);
+   font-weight: 600;
+   overflow: hidden;
+   text-overflow: ellipsis;
+   max-width: 14rem;
+}
+
+.k-filter-pill-caret {
+   --k-icon-size: 0.75rem;
+   margin-right: -0.125rem;
+   color: var(--k-text-dimmed);
+   transition: transform var(--k-duration-lg) var(--k-ease-out);
+}
+
+.k-filter-pill.is-active .k-filter-pill-caret {
+   color: inherit;
+}
+
+.k-filter-pill[aria-expanded='true'] .k-filter-pill-caret {
+   transform: rotate(180deg);
+}

package/dist/styles/data/pagination.css

@@ -94,7 +94,6 @@
    border-color: var(--k-field-line);
    box-shadow: var(--k-shadow-xs);
    color: var(--k-text);
-   animation: k-icon-pop 300ms var(--k-ease-spring);
 }
 
 .k-pagination-page:disabled {