@paperless/core 3.19.2 → 3.19.4

package/dist/types/components/molecules/submenu/item/submenu-item.component.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
 import { IconVariant } from '../../../../types/icon';
 export declare class SubmenuItem {
     /**
@@ -8,5 +9,11 @@ export declare class SubmenuItem {
      * Icon to show on the label
      */
     icon: IconVariant;
+    /**
+     * Event when the active state changes
+     */
+    activeChange: EventEmitter<boolean>;
+    private _lastActiveState;
+    componentDidRender(): void;
     render(): any;
 }

package/dist/types/components/molecules/submenu/menu/submenu.component.d.ts

@@ -27,6 +27,21 @@ export declare class Submenu {
      * The host element
      */
     private _el;
+    private _activeItemPosition;
+    private _showItemIndicator;
+    private _headerOffset;
+    private _submenuItems;
+    private _hoveringItem;
+    private _itemActiveListener;
+    private _itemMouseEnterListener;
+    private _itemMouseLeaveListener;
     componentDidLoad(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
     render(): any;
+    onWindowResize(): void;
+    private _calculateHeaderOffset;
+    private _setItemPosition;
+    private _slotChanged;
+    private _removeListeners;
 }

package/dist/types/components/molecules/submenu/menu/submenu.stories.d.ts

@@ -5,6 +5,12 @@ declare const meta: {
         title: string;
         subtitle: string;
         index: number;
+        activeItem: boolean;
+    };
+    argTypes: {
+        activeItem: {
+            type: string;
+        };
     };
     parameters: {
         docs: {
@@ -17,8 +23,9 @@ declare const meta: {
 };
 export default meta;
 export declare const Default: {
-    render: ({ active, open, title, subtitle, index, showIndex }: {
+    render: ({ active, activeItem, open, title, subtitle, index, showIndex }: {
         active: any;
+        activeItem: any;
         open: any;
         title: any;
         subtitle: any;

package/dist/types/components.d.ts

@@ -2796,6 +2796,10 @@ export interface PSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPSelectElement;
 }
+export interface PSubmenuItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPSubmenuItemElement;
+}
 export interface PTableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPTableElement;
@@ -3528,7 +3532,18 @@ declare global {
         prototype: HTMLPSubmenuElement;
         new (): HTMLPSubmenuElement;
     };
+    interface HTMLPSubmenuItemElementEventMap {
+        "activeChange": boolean;
+    }
     interface HTMLPSubmenuItemElement extends Components.PSubmenuItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPSubmenuItemElementEventMap>(type: K, listener: (this: HTMLPSubmenuItemElement, ev: PSubmenuItemCustomEvent<HTMLPSubmenuItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPSubmenuItemElementEventMap>(type: K, listener: (this: HTMLPSubmenuItemElement, ev: PSubmenuItemCustomEvent<HTMLPSubmenuItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLPSubmenuItemElement: {
         prototype: HTMLPSubmenuItemElement;
@@ -5958,6 +5973,10 @@ declare namespace LocalJSX {
           * @default 'placeholder'
          */
         "icon"?: IconVariant1;
+        /**
+          * Event when the active state changes
+         */
+        "onActiveChange"?: (event: PSubmenuItemCustomEvent<boolean>) => void;
     }
     interface PTabContainer {
     }

package/hydrate/index.js

@@ -88670,7 +88670,7 @@ const header$5 = cva(`relative z-[1] inline-flex w-full flex-col justify-start r
         },
     },
 });
-const content$7 = cva('flex items-center gap-2', {
+const content$6 = cva('flex items-center gap-2', {
     variants: {
         variant: {
             default: 'py-3',
@@ -88713,7 +88713,7 @@ class CardHeader {
     render() {
         return (hAsync(ThemedHost, { key: 'b7eb827631c54142f2a4e3fe2b81271c8144b16a' }, hAsync("div", { key: 'fcb33fb73eb61e36d8c4990b5b27e217221b96a4', class: header$5({
                 variant: this.variant,
-            }) }, hAsync("div", { key: '1ae832e07095882bb8e46398c30609e12fa4d6eb', class: content$7({
+            }) }, hAsync("div", { key: '1ae832e07095882bb8e46398c30609e12fa4d6eb', class: content$6({
                 variant: this.variant,
             }) }, this.icon ? (hAsync("p-icon", { class: '\n          text-storm-300\n          dark:text-hurricane-200\n        ', flip: this.iconFlip, rotate: this.iconRotate, variant: this.icon })) : (hAsync("slot", { name: 'prefix' })), hAsync("div", { key: '2c9394715612b7415aeb065d9575caf755044e5f', class: title$2() }, hAsync("span", { key: '9d8e7178338dd0e4ed218c5a16d5c77486c7f240', class: 'max-w-full overflow-hidden text-ellipsis' }, this.header?.length ? this.header : hAsync("slot", null)), hAsync("slot", { key: '1483bded5220bda03e8b80228135539a8b099033', name: 'content-suffix' })), hAsync("div", { key: '62055fed1277f466d6e70578c12ce51cb9a73272', class: '\n         ml-auto flex items-center justify-end gap-4\n         empty:hidden\n       ' }, hAsync("slot", { key: '73b2c1a055167b6050ec18f2a8b997bea8f39f8e', name: 'suffix' }))), this.variant === 'default' ? (asBoolean(this.divider) && (hAsync("p-divider", { class: '\n          text-off-white-700\n          dark:text-white/10\n        ' }))) : (hAsync("div", { class: '\n         pointer-events-none absolute left-0 top-0 z-[-1] h-full w-full\n         overflow-hidden rounded-t-2xl\n       ' }, hAsync("p-smile", { class: 'dark:text-hurricane-400', variant: 'card' }))))));
     }
@@ -92573,7 +92573,7 @@ class Datepicker {
 
 const dividerComponentCss = () => `*{box-sizing:border-box}p-divider{--tw-content:""}.static{position:static}.flex{display:flex}.h-full{height:100%}.w-full{width:100%}.flex-col{flex-direction:column}.items-center{align-items:center}.px-2{padding-left:.5rem;padding-right:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-medium{font-weight:500}.text-hurricane-400{--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.text-off-white-700{--tw-text-opacity:1;color:rgb(222 219 213/var(--tw-text-opacity,1))}.text-storm-400{--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.before\\:hidden:before{content:var(--tw-content);display:none}.before\\:h-px:before{content:var(--tw-content);height:1px}.before\\:w-px:before{content:var(--tw-content);width:1px}.before\\:flex-1:before{content:var(--tw-content);flex:1 1 0%}.before\\:bg-current:before{background-color:currentColor;content:var(--tw-content)}.before\\:content-\\[\\"\\"\\]:before{--tw-content:"";content:var(--tw-content)}.after\\:hidden:after{content:var(--tw-content);display:none}.after\\:h-px:after{content:var(--tw-content);height:1px}.after\\:w-px:after{content:var(--tw-content);width:1px}.after\\:flex-1:after{content:var(--tw-content);flex:1 1 0%}.after\\:bg-current:after{background-color:currentColor;content:var(--tw-content)}.after\\:content-\\[\\"\\"\\]:after{--tw-content:"";content:var(--tw-content)}.empty\\:px-0:empty{padding-left:0;padding-right:0}.dark\\:text-hurricane-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\\:text-hurricane-400:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.dark\\:text-hurricane-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(163 165 169/var(--tw-text-opacity,1))}.dark\\:text-hurricane-400:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}`;
 
-const content$6 = cva([
+const content$5 = cva([
     'flex items-center',
     `
     before:content-[""]
@@ -92628,7 +92628,7 @@ class Divider {
     get _el() { return getElement(this); }
     render() {
         const hasContent = this._el.innerHTML?.length > 0;
-        return (hAsync(ThemedHost, { key: 'ff409606cbaf88fec989b154c9c16eb07b60e185' }, hAsync("div", { key: 'bbf08c6ede2f45885372760c28026fa170dd2cd7', class: cn(content$6({
+        return (hAsync(ThemedHost, { key: 'ff409606cbaf88fec989b154c9c16eb07b60e185' }, hAsync("div", { key: 'bbf08c6ede2f45885372760c28026fa170dd2cd7', class: cn(content$5({
                 variant: this.variant,
                 alignContent: this.alignContent,
             }), {
@@ -92852,7 +92852,7 @@ const header$4 = cva([
  `,
     'inline-flex',
 ]);
-const content$5 = cva(['flex justify-between', 'min-h-12 w-full p-4 pb-0']);
+const content$4 = cva(['flex justify-between', 'min-h-12 w-full p-4 pb-0']);
 const title$1 = cva([
     'flex-1 text-center',
     `
@@ -92874,7 +92874,7 @@ class DrawerHeader {
      */
     close;
     render() {
-        return (hAsync(ThemedHost, { key: 'f0cc21f420fc9ede8f37b703e2bdc05b0494fdfb' }, hAsync("div", { key: 'e90c5f4e51592b3dd5aabddc4cdf394a44afc4d6', class: header$4() }, hAsync("div", { key: '7c34db9d5c88f715dc67663c4bd59292f4d5f465', class: content$5() }, this.showClose && (hAsync("p-button", { key: '65d62aac568049c275aaf0da50927aa162375291', icon: 'negative', iconOnly: true, variant: 'secondary', onClick: ev => this.close.emit(ev) })), hAsync("div", { key: '7e1809baea3e11b781292e5948dcd88de22adcbf', class: title$1() }, hAsync("slot", { key: 'a197919fc325a031824cc187d9f01c02047c3cce' })), this.showClose && hAsync("div", { key: 'a89a2a5c054a83c7998f8e3537294bb0d9a3654a', class: 'size-8' })), hAsync("p-smile", { key: 'b6247f9b0f7dd88fe13b507507a5802bef0b518f', class: 'dark:text-hurricane-400' }))));
+        return (hAsync(ThemedHost, { key: 'f0cc21f420fc9ede8f37b703e2bdc05b0494fdfb' }, hAsync("div", { key: 'e90c5f4e51592b3dd5aabddc4cdf394a44afc4d6', class: header$4() }, hAsync("div", { key: '7c34db9d5c88f715dc67663c4bd59292f4d5f465', class: content$4() }, this.showClose && (hAsync("p-button", { key: '65d62aac568049c275aaf0da50927aa162375291', icon: 'negative', iconOnly: true, variant: 'secondary', onClick: ev => this.close.emit(ev) })), hAsync("div", { key: '7e1809baea3e11b781292e5948dcd88de22adcbf', class: title$1() }, hAsync("slot", { key: 'a197919fc325a031824cc187d9f01c02047c3cce' })), this.showClose && hAsync("div", { key: 'a89a2a5c054a83c7998f8e3537294bb0d9a3654a', class: 'size-8' })), hAsync("p-smile", { key: 'b6247f9b0f7dd88fe13b507507a5802bef0b518f', class: 'dark:text-hurricane-400' }))));
     }
     static get style() { return drawerHeaderComponentCss(); }
     static get cmpMeta() { return {
@@ -97662,7 +97662,7 @@ const header$2 = cva([
  `,
     'inline-flex aspect-[7/1] max-h-28',
 ]);
-const content$4 = cva(['flex justify-end', 'h-12 w-full p-4 pb-0']);
+const content$3 = cva(['flex justify-end', 'h-12 w-full p-4 pb-0']);
 const title = cva([
     'flex-1 text-center',
     'w-[calc(100%-7rem)]',
@@ -97686,7 +97686,7 @@ class ModalHeader {
      */
     close;
     render() {
-        return (hAsync(ThemedHost, { key: '6ff888c25d7455ffd6baf7e1dd046d8446555739' }, hAsync("div", { key: '9b9fa9ee81f4174df2f880965afa9cc72b63e800', class: header$2() }, hAsync("div", { key: 'b58b6b353afa85c5e45f71abf9c4d59b5fa42eeb', class: content$4() }, hAsync("div", { key: '576edc988821e2ae50b8a11c8fc4b81fea137cb8', class: title() }, hAsync("slot", { key: 'b9906b5af7dc8542f3d046d8ca9dccc0f8310e9d' })), this.showClose && (hAsync("p-button", { key: 'c5da895fc9b1e6ef042a5f9d829d6e584ff23ab8', icon: 'negative', iconOnly: true, variant: 'secondary', onClick: ev => this.close.emit(ev) }))), hAsync("p-smile", { key: 'e0390b852e9ae3633185cdb5441d9172a07f7986', class: 'dark:text-hurricane-400' }))));
+        return (hAsync(ThemedHost, { key: '6ff888c25d7455ffd6baf7e1dd046d8446555739' }, hAsync("div", { key: '9b9fa9ee81f4174df2f880965afa9cc72b63e800', class: header$2() }, hAsync("div", { key: 'b58b6b353afa85c5e45f71abf9c4d59b5fa42eeb', class: content$3() }, hAsync("div", { key: '576edc988821e2ae50b8a11c8fc4b81fea137cb8', class: title() }, hAsync("slot", { key: 'b9906b5af7dc8542f3d046d8ca9dccc0f8310e9d' })), this.showClose && (hAsync("p-button", { key: 'c5da895fc9b1e6ef042a5f9d829d6e584ff23ab8', icon: 'negative', iconOnly: true, variant: 'secondary', onClick: ev => this.close.emit(ev) }))), hAsync("p-smile", { key: 'e0390b852e9ae3633185cdb5441d9172a07f7986', class: 'dark:text-hurricane-400' }))));
     }
     static get style() { return modalHeaderComponentCss(); }
     static get cmpMeta() { return {
@@ -100115,7 +100115,7 @@ const circle$1 = cva([
         },
     ],
 });
-const content$3 = cva('mt-[1px] flex-1 text-sm font-medium', {
+const content$2 = cva('mt-[1px] flex-1 text-sm font-medium', {
     variants: {
         finished: {
             true: null,
@@ -100202,7 +100202,7 @@ class StepperItem {
                 direction: this.direction,
                 active: asBoolean(this.active),
                 finished: asBoolean(this.finished),
-            }) }, this.number), hAsync("div", { key: 'faafa708b0f4548661dfeb114fa78530377d896f', class: content$3({
+            }) }, this.number), hAsync("div", { key: 'faafa708b0f4548661dfeb114fa78530377d896f', class: content$2({
                 active: asBoolean(this.active),
                 finished: asBoolean(this.finished),
                 direction: this.direction,
@@ -100257,7 +100257,7 @@ class StepperLine {
     }; }
 }
 
-const submenuComponentCss = () => `*{box-sizing:border-box}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-\\[calc\\(1\\.5rem\\)\\]{left:1.5rem}.top-0{top:0}.z-0{z-index:0}.z-10{z-index:10}.m-0{margin:0}.m-2{margin:.5rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.flex{display:flex}.size-4{height:1rem;width:1rem}.w-full{width:100%}.w-px{width:1px}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.bg-hurricane-400{--tw-bg-opacity:1;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))}.bg-indigo-200{--tw-bg-opacity:1;background-color:rgb(199 217 253/var(--tw-bg-opacity,1))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(142 179 251/var(--tw-bg-opacity,1))}.bg-off-white-300{--tw-bg-opacity:1;background-color:rgb(248 247 244/var(--tw-bg-opacity,1))}.bg-off-white-400{--tw-bg-opacity:1;background-color:rgb(245 244 241/var(--tw-bg-opacity,1))}.bg-storm-500\\/30{background-color:rgba(24,30,41,.3)}.p-2{padding:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.pl-2{padding-left:.5rem}.pr-4{padding-right:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-semibold{font-weight:600}.text-hurricane-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.text-indigo-200{--tw-text-opacity:1;color:rgb(199 217 253/var(--tw-text-opacity,1))}.text-storm-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.text-storm-400{--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.transition-\\[max-height\\]{transition-duration:.15s;transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-indigo-50:hover{--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))}.group\\/submenu-header:hover .group-hover\\/submenu-header\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\\:bg-hurricane-400:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))}.dark\\:bg-indigo-600\\/30:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:rgba(82,138,250,.3)}.dark\\:bg-storm-500\\/20:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:rgba(24,30,41,.2)}.dark\\:bg-storm-500\\/30:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:rgba(24,30,41,.3)}.dark\\:text-hurricane-100:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}.dark\\:text-hurricane-300:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.dark\\:text-hurricane-500:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(54 60 70/var(--tw-text-opacity,1))}.dark\\:text-indigo-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(199 217 253/var(--tw-text-opacity,1))}.dark\\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\\:hover\\:bg-indigo-600\\/10:hover:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:rgba(82,138,250,.1)}.group\\/submenu-header:hover .dark\\:group-hover\\/submenu-header\\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\\:bg-hurricane-400:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))}.dark\\:bg-indigo-600\\/30:where([data-theme=dark],[data-theme=dark] *){background-color:rgba(82,138,250,.3)}.dark\\:bg-storm-500\\/20:where([data-theme=dark],[data-theme=dark] *){background-color:rgba(24,30,41,.2)}.dark\\:bg-storm-500\\/30:where([data-theme=dark],[data-theme=dark] *){background-color:rgba(24,30,41,.3)}.dark\\:text-hurricane-100:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}.dark\\:text-hurricane-300:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.dark\\:text-hurricane-500:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(54 60 70/var(--tw-text-opacity,1))}.dark\\:text-indigo-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(199 217 253/var(--tw-text-opacity,1))}.dark\\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\\:hover\\:bg-indigo-600\\/10:hover:where([data-theme=dark],[data-theme=dark] *){background-color:rgba(82,138,250,.1)}.group\\/submenu-header:hover .dark\\:group-hover\\/submenu-header\\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}`;
+const submenuComponentCss = () => `*{box-sizing:border-box}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-6{left:1.5rem}.top-0{top:0}.z-0{z-index:0}.z-10{z-index:10}.z-\\[1\\]{z-index:1}.m-0{margin:0}.m-2{margin:.5rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.flex{display:flex}.size-4{height:1rem;width:1rem}.h-8{height:2rem}.w-\\[2px\\]{width:2px}.w-full{width:100%}.w-px{width:1px}.flex-1{flex:1 1 0%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.bg-hurricane-400{--tw-bg-opacity:1;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(227 236 254/var(--tw-bg-opacity,1))}.bg-indigo-200{--tw-bg-opacity:1;background-color:rgb(199 217 253/var(--tw-bg-opacity,1))}.bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))}.bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(142 179 251/var(--tw-bg-opacity,1))}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))}.bg-off-white-300{--tw-bg-opacity:1;background-color:rgb(248 247 244/var(--tw-bg-opacity,1))}.bg-off-white-400{--tw-bg-opacity:1;background-color:rgb(245 244 241/var(--tw-bg-opacity,1))}.bg-storm-500\\/30{background-color:rgba(24,30,41,.3)}.bg-transparent{background-color:transparent}.p-2{padding:.5rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.pl-2{padding-left:.5rem}.pr-4{padding-right:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-semibold{font-weight:600}.text-hurricane-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.text-indigo-200{--tw-text-opacity:1;color:rgb(199 217 253/var(--tw-text-opacity,1))}.text-storm-300{--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.text-storm-400{--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.transition-\\[max-height\\]{transition-duration:.15s;transition-property:max-height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:bg-indigo-50:hover{--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))}.group\\/submenu-header:hover .group-hover\\/submenu-header\\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\\:bg-hurricane-400:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))}.dark\\:bg-indigo-600\\/30:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:rgba(82,138,250,.3)}.dark\\:bg-storm-500\\/20:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:rgba(24,30,41,.2)}.dark\\:bg-storm-500\\/30:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:rgba(24,30,41,.3)}.dark\\:text-hurricane-100:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}.dark\\:text-hurricane-300:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.dark\\:text-hurricane-500:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(54 60 70/var(--tw-text-opacity,1))}.dark\\:text-indigo-200:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(199 217 253/var(--tw-text-opacity,1))}.dark\\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\\:hover\\:bg-indigo-600\\/10:hover:where(:host([data-theme=dark]),:host([data-theme=dark]) *){background-color:rgba(82,138,250,.1)}.group\\/submenu-header:hover .dark\\:group-hover\\/submenu-header\\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\\:bg-hurricane-400:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1;background-color:rgb(70 75 84/var(--tw-bg-opacity,1))}.dark\\:bg-indigo-600\\/30:where([data-theme=dark],[data-theme=dark] *){background-color:rgba(82,138,250,.3)}.dark\\:bg-storm-500\\/20:where([data-theme=dark],[data-theme=dark] *){background-color:rgba(24,30,41,.2)}.dark\\:bg-storm-500\\/30:where([data-theme=dark],[data-theme=dark] *){background-color:rgba(24,30,41,.3)}.dark\\:text-hurricane-100:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}.dark\\:text-hurricane-300:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(116 120 127/var(--tw-text-opacity,1))}.dark\\:text-hurricane-500:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(54 60 70/var(--tw-text-opacity,1))}.dark\\:text-indigo-200:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(199 217 253/var(--tw-text-opacity,1))}.dark\\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\\:hover\\:bg-indigo-600\\/10:hover:where([data-theme=dark],[data-theme=dark] *){background-color:rgba(82,138,250,.1)}.group\\/submenu-header:hover .dark\\:group-hover\\/submenu-header\\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}`;
 
 const header$1 = cva([
     'group/submenu-header',
@@ -100266,6 +100266,7 @@ const header$1 = cva([
     'rounded-lg',
     'cursor-pointer',
     'transition-colors',
+    'relative',
 ], {
     variants: {
         open: {
@@ -100344,6 +100345,40 @@ class Submenu {
      */
     open = false;
     get _el() { return getElement(this); }
+    _activeItemPosition = -1;
+    _showItemIndicator = false;
+    _headerOffset = 0;
+    _submenuItems = [];
+    _hoveringItem = undefined;
+    _itemActiveListener = () => {
+        const activeItemIndex = this._submenuItems.findIndex(i => i.active === true);
+        this.active = activeItemIndex !== -1;
+        if (activeItemIndex === -1) {
+            this._showItemIndicator = false;
+            return;
+        }
+        // set open when active changes
+        if (!this.open && this.active) {
+            this.open = true;
+        }
+        this._setItemPosition(this._submenuItems[activeItemIndex]);
+    };
+    _itemMouseEnterListener = (event) => {
+        if (this._hoveringItem && this._hoveringItem === event.target) {
+            return;
+        }
+        this._hoveringItem = event.target;
+        this._setItemPosition(this._hoveringItem);
+    };
+    _itemMouseLeaveListener = (event) => {
+        setTimeout(() => {
+            if (this._hoveringItem && this._hoveringItem !== event.target) {
+                return;
+            }
+            this._hoveringItem = undefined;
+            this._itemActiveListener();
+        }, 100);
+    };
     componentDidLoad() {
         const submenuItems = this._el.querySelectorAll('p-submenu-item');
         const hasActiveChild = [...submenuItems].some(i => i.active === true);
@@ -100355,35 +100390,87 @@ class Submenu {
         }
         this.open = true;
     }
+    componentDidRender() {
+        this._calculateHeaderOffset();
+    }
+    disconnectedCallback() {
+        this._removeListeners();
+    }
     render() {
         const submenuItems = this._el.querySelectorAll('p-submenu-item');
         const firstItem = getComputedStyle(submenuItems[0]);
         const maxHeight = submenuItems.length *
             Number.parseInt(firstItem.height.replace('px', '')) +
             16; // the margin of the content
-        return (hAsync(ThemedHost, { key: '110fad52ce96c4fc855408b422a42956b957d092' }, hAsync("div", { key: '0b8f40db722e7c6f6ba8ded2e33a6776af28f0dc', class: 'flex w-full flex-col' }, hAsync("div", { key: '23aa3cf5a7ece75e3fb6312e2e2173d68b2dcd86', class: cn(header$1({
+        return (hAsync(ThemedHost, { key: '9f1be5fc3770c7527bc8be07510fa37d6c0e984c' }, hAsync("div", { key: 'b6afb284861441006879d0bda9d9eb0bf86174f3', class: 'flex w-full flex-col' }, hAsync("div", { key: '5e8e749909c8493486c352a3177b308d4cdfe05a', class: cn(header$1({
                 active: this.active,
                 open: this.open,
-            })), onClick: () => (this.open = !this.open) }, this.showIndex && (hAsync("div", { key: 'a24b117f984eb4392a90b47fd8363e7e320cb84a', class: indexContainer({
+            })), onClick: () => (this.open = !this.open) }, this.showIndex && (hAsync("div", { key: '7429d46e05326a60fecf9ad0fd30ecdd03e4c148', class: indexContainer({
                 active: this.active,
                 open: this.open,
-            }) }, this.index)), hAsync("div", { key: '76fb811ac456b88a7f3d3df3b5badfaf9fe6170f', class: 'flex flex-1 flex-col' }, hAsync("p", { key: '0dd533096861b9962eb523ece6a2ad03f34223f0', class: cn('m-0 text-sm', {
+            }) }, this.index)), hAsync("div", { key: '0940e36702f42da9e076762191d4a11b57c3312c', class: 'flex flex-1 flex-col' }, hAsync("p", { key: '64e34ec4598f4983a03a415c1dc893380413c51c', class: cn('m-0 text-sm', {
                 'text-storm-400 dark:text-hurricane-100 dark:group-hover/submenu-header:text-white': !this.active,
                 'text-storm-500 dark:text-white': this.active,
-            }) }, this.title), hAsync("p", { key: '0c3624317e71d9519ab6b694e70dbc7024641cef', class: cn('m-0 text-xs', {
+            }) }, this.title), hAsync("p", { key: 'd15bb2b7035cc06d2c7f4e6a8a3566a8044ade9d', class: cn('m-0 text-xs', {
                 'text-storm-300 dark:text-hurricane-300': !this.active,
                 'text-storm-300 dark:text-indigo-200': this.active,
-            }) }, this.subtitle)), hAsync("p-icon", { key: '480e39ea4630c81d13ec24728d7827a3760ebb6f', class: cn({
+            }) }, this.subtitle)), hAsync("p-icon", { key: 'cba00a3d1093bb5c565a8b585e3471fe53947d10', class: cn({
                 'text-storm-500 dark:text-white': this.active,
                 'text-storm-300 dark:text-hurricane-300': !this.active,
-            }), rotate: this.open ? 180 : 0, variant: 'caret' })), hAsync("div", { key: '2613acd0e5e16af70c39b93a1e064423fafa036c', class: cn('relative flex flex-col overflow-hidden transition-[max-height]'), style: {
+            }), rotate: this.open ? 180 : 0, variant: 'caret' })), hAsync("div", { key: '2199b8bad93526ae33cae769b3c1643614c26b86', class: cn('relative flex flex-col overflow-hidden transition-[max-height]'), style: {
                 maxHeight: `${this.open ? maxHeight : 0}px`,
-            } }, hAsync("div", { key: 'c8d88df1d7b0ffd7e29202655f33f46ec781a15e', class: cn('absolute left-[calc(1.5rem)] top-0 z-0 w-px', {
+            } }, hAsync("div", { key: 'cd7a456eb8ba1bb949e9891146e5260607c45153', class: cn('absolute left-6 top-0 z-0 w-px', {
                 'bg-off-white-400 dark:bg-storm-500/30': !this.active,
                 'bg-indigo-100 dark:bg-hurricane-400': this.active,
             }), style: {
                 height: `${maxHeight}px`,
-            } }), hAsync("div", { key: '0e4328a428da51a172b5a5ff7e8adf2a5c840de6', class: 'z-10 my-2 flex flex-col' }, hAsync("slot", { key: '1541aecaf7c8981cd3a56ffe73b542b135cb186a' }))))));
+            } }), hAsync("div", { key: 'fc15b0d8cc3764b378c4fc9db70a7e164a9e287a', class: cn(`absolute left-6 top-0 z-[1] h-8 w-[2px] transform transition-all`, {
+                'bg-indigo-600': this._showItemIndicator,
+                'bg-transparent': !this._showItemIndicator,
+            }), style: {
+                transform: `translateY(${this._activeItemPosition}px)`,
+            } }), hAsync("div", { key: '027e8f7c958784db540f67331f0577bb13a5a90f', class: 'z-10 my-2 flex flex-col' }, hAsync("slot", { key: 'b3495515c0c0478a7bd4376b6cced01b89400d15', onSlotchange: () => this._slotChanged() }))))));
+    }
+    onWindowResize() {
+        this._calculateHeaderOffset();
+        this._itemActiveListener();
+    }
+    _calculateHeaderOffset() {
+        const headerEl = this._el.shadowRoot?.querySelector(String.raw `.group\/submenu-header`);
+        if (!headerEl) {
+            this._activeItemPosition = -1;
+            return;
+        }
+        this._headerOffset = headerEl.getBoundingClientRect().bottom;
+    }
+    _setItemPosition(item) {
+        if (!item) {
+            return;
+        }
+        this._activeItemPosition =
+            item.getBoundingClientRect().top - this._headerOffset;
+        if (!this._showItemIndicator) {
+            setTimeout(() => (this._showItemIndicator = true), 50);
+        }
+    }
+    _slotChanged() {
+        this._removeListeners();
+        const submenuItems = [...this._el.querySelectorAll('p-submenu-item')];
+        for (const item of submenuItems) {
+            item.addEventListener('activeChange', this._itemActiveListener);
+            item.addEventListener('mouseenter', this._itemMouseEnterListener);
+            item.addEventListener('mouseleave', this._itemMouseLeaveListener);
+        }
+        this._submenuItems = submenuItems;
+    }
+    _removeListeners() {
+        if (this._submenuItems.length > 0) {
+            for (const item of this._submenuItems) {
+                item.removeEventListener('activeChange', this._itemActiveListener);
+                item.removeEventListener('mouseenter', this._itemMouseEnterListener);
+                item.removeEventListener('mouseleave', this._itemMouseLeaveListener);
+            }
+        }
     }
     static get style() { return submenuComponentCss(); }
     static get cmpMeta() { return {
@@ -100395,27 +100482,22 @@ class Submenu {
             "index": [514],
             "showIndex": [516, "show-index"],
             "active": [516],
-            "open": [516]
+            "open": [516],
+            "_activeItemPosition": [32],
+            "_showItemIndicator": [32]
         },
-        "$listeners$": undefined,
+        "$listeners$": [[9, "resize", "onWindowResize"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["title", "title"], ["subtitle", "subtitle"], ["index", "index"], ["showIndex", "show-index"], ["active", "active"], ["open", "open"]]
     }; }
 }
 
-const submenuItemComponentCss = () => `*{box-sizing:border-box}.static{position:static}.flex{display:flex}.h-8{height:2rem}.h-full{height:100%}.w-\\[2px\\]{width:2px}.w-full{width:100%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.gap-2{gap:.5rem}.gap-6{gap:1.5rem}.bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.pl-6{padding-left:1.5rem}.text-hurricane-100{--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}.text-indigo-600{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity,1))}.text-storm-400{--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.group\\/submenu-item:hover .group-hover\\/submenu-item\\:bg-indigo-600{--tw-bg-opacity:1;background-color:rgb(82 138 250/var(--tw-bg-opacity,1))}.dark\\:text-hurricane-100:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}.dark\\:text-hurricane-100:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}`;
+const submenuItemComponentCss = () => `*{box-sizing:border-box}.static{position:static}.flex{display:flex}.h-8{height:2rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.gap-2{gap:.5rem}.pl-\\[calc\\(3rem\\+2px\\)\\]{padding-left:calc(3rem + 2px)}.text-hurricane-100{--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}.text-indigo-600{--tw-text-opacity:1;color:rgb(82 138 250/var(--tw-text-opacity,1))}.text-storm-400{--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.dark\\:text-hurricane-100:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}.dark\\:text-hurricane-100:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(209 210 212/var(--tw-text-opacity,1))}`;
 
-const content$2 = cva([
-    'flex items-center gap-6',
-    'h-8 w-full pl-6',
-    'cursor-pointer',
-    'group/submenu-item',
-], {
-    variants: {},
-});
 class SubmenuItem {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.activeChange = createEvent(this, "activeChange", 3);
     }
     /**
      * Wether the submenu is active or not
@@ -100425,14 +100507,28 @@ class SubmenuItem {
      * Icon to show on the label
      */
     icon = 'placeholder';
+    /**
+     * Event when the active state changes
+     */
+    activeChange;
+    _lastActiveState = this.active;
+    componentDidRender() {
+        if (this._lastActiveState === this.active) {
+            return;
+        }
+        this._lastActiveState = this.active;
+        this.activeChange.emit(this.active);
+    }
     render() {
-        return (hAsync(ThemedHost, { key: '812bee8d46780d60ed604505b4f8c00e798a9f8f' }, hAsync("div", { key: 'f5a76dd14ccb0559586b01214c6badb3bcf2eef8', class: cn(content$2({}), {}) }, hAsync("div", { key: '97fe0916207dfefd625ae51d911ef4eeb5d6b4cc', class: cn(`h-full w-[2px] transition-colors`, {
-                'bg-indigo-600': this.active,
-                'bg-transparent group-hover/submenu-item:bg-indigo-600': !this.active,
-            }) }), hAsync("div", { key: '2c6ab60c2fb19b197d5aabd2368a7eb7406fdcb2', class: cn('flex items-center gap-2 transition-colors', {
+        return (hAsync(ThemedHost, { key: '38bbc84752e1aa8271568aad5c1fd46bfa435d9a' }, hAsync("div", { key: 'a17fb921e57780d1ff572a3d1ba10331b045276e', class: cn([
+                'flex items-center',
+                'h-8 w-full pl-[calc(3rem+2px)]',
+                'cursor-pointer',
+                'group/submenu-item',
+            ]) }, hAsync("div", { key: 'd9c949c6f467524e0590a19774ae86c06e234fe5', class: cn('flex items-center gap-2 transition-colors', {
                 'text-storm-400 dark:text-hurricane-100': !this.active,
                 'text-indigo-600': this.active,
-            }) }, hAsync("p-icon", { key: '7db15690b67f555a46dc72133be72e5937051658', variant: this.icon }), hAsync("slot", { key: '1a4574d13c012affe2713a034445f636369729c8' })))));
+            }) }, hAsync("p-icon", { key: '8eed69a5fd4cef34ef69d7e5a96993289effc37e', variant: this.icon }), hAsync("slot", { key: '5471376f37afb9566f21599ee0e86af42a00b370' })))));
     }
     static get style() { return submenuItemComponentCss(); }
     static get cmpMeta() { return {