@mozaic-ds/web-components 1.5.1 → 1.6.0

package/dist/components/sidebar/floating-item.spec.js

@@ -0,0 +1,96 @@
+import { beforeEach, afterEach, describe, it, expect, vi, afterAll, beforeAll } from 'vitest';
+import { useFloatingItem } from './floating-item.svelte.ts';
+beforeAll(() => {
+    vi.stubGlobal('matchMedia', (query) => ({
+        matches: query.includes('max-width: 780px'),
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    }));
+});
+afterAll(() => {
+    vi.unstubAllGlobals();
+});
+describe('useFloatingItem', () => {
+    let triggerEl;
+    let floatingEl;
+    let firstButton;
+    let addSpy;
+    let removeSpy;
+    beforeEach(() => {
+        triggerEl = document.createElement('button');
+        triggerEl.textContent = 'trigger';
+        document.body.appendChild(triggerEl);
+        floatingEl = document.createElement('div');
+        floatingEl.className = 'mc-sidebar__floating-item mc-sidebar__floating-item--hidden';
+        firstButton = document.createElement('button');
+        firstButton.textContent = 'first';
+        floatingEl.appendChild(firstButton);
+        document.body.appendChild(floatingEl);
+        addSpy = vi.spyOn(document, 'addEventListener');
+        removeSpy = vi.spyOn(document, 'removeEventListener');
+    });
+    afterEach(() => {
+        vi.restoreAllMocks();
+        document.body.innerHTML = '';
+    });
+    it('showFloatingItem removes hidden class and adds mousedown listener', () => {
+        const { showFloatingItem } = useFloatingItem(() => triggerEl, () => floatingEl);
+        showFloatingItem();
+        expect(floatingEl.classList.contains('mc-sidebar__floating-item--hidden')).toBe(false);
+        expect(addSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
+    });
+    it('hideFloatingItem hides and removes listener when relatedTarget is outside', () => {
+        const { showFloatingItem, hideFloatingItem } = useFloatingItem(() => triggerEl, () => floatingEl);
+        showFloatingItem();
+        hideFloatingItem();
+        expect(floatingEl.classList.contains('mc-sidebar__floating-item--hidden')).toBe(true);
+        expect(removeSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
+    });
+    it('hideFloatingItem does not hide when relatedTarget is inside floating or trigger (allowItemHover)', () => {
+        const { showFloatingItem, hideFloatingItem } = useFloatingItem(() => triggerEl, () => floatingEl, { allowItemHover: true });
+        showFloatingItem();
+        const evInsideFloating = { relatedTarget: firstButton };
+        hideFloatingItem(evInsideFloating);
+        expect(floatingEl.classList.contains('mc-sidebar__floating-item--hidden')).toBe(false);
+        expect(removeSpy).not.toHaveBeenCalled();
+    });
+    it('clicking outside triggers hide via mousedown listener', () => {
+        const { showFloatingItem } = useFloatingItem(() => triggerEl, () => floatingEl);
+        showFloatingItem();
+        const outside = document.createElement('div');
+        document.body.appendChild(outside);
+        outside.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+        expect(floatingEl.classList.contains('mc-sidebar__floating-item--hidden')).toBe(true);
+    });
+    it('onTriggerKeydown opens on ArrowDown and focuses first item', () => {
+        const { onTriggerKeydown } = useFloatingItem(() => triggerEl, () => floatingEl);
+        const preventSpy = vi.fn();
+        const ev = { key: 'ArrowDown', preventDefault: preventSpy };
+        const focusSpy = vi.spyOn(firstButton, 'focus');
+        onTriggerKeydown(ev);
+        expect(preventSpy).toHaveBeenCalled();
+        expect(focusSpy).toHaveBeenCalled();
+        expect(floatingEl.classList.contains('mc-sidebar__floating-item--hidden')).toBe(false);
+    });
+    it('onTriggerKeydown with Tab hides the floating item', () => {
+        const { showFloatingItem, onTriggerKeydown } = useFloatingItem(() => triggerEl, () => floatingEl);
+        showFloatingItem();
+        const ev = { key: 'Tab' };
+        onTriggerKeydown(ev);
+        expect(floatingEl.classList.contains('mc-sidebar__floating-item--hidden')).toBe(true);
+    });
+    it('onListboxKeydown Escape hides and focuses trigger', () => {
+        const { showFloatingItem, onListboxKeydown } = useFloatingItem(() => triggerEl, () => floatingEl);
+        showFloatingItem();
+        const preventSpy = vi.fn();
+        const ev = { key: 'Escape', preventDefault: preventSpy };
+        const focusSpy = vi.spyOn(triggerEl, 'focus');
+        onListboxKeydown(ev);
+        expect(preventSpy).toHaveBeenCalled();
+        expect(focusSpy).toHaveBeenCalled();
+        expect(floatingEl.classList.contains('mc-sidebar__floating-item--hidden')).toBe(true);
+    });
+});

package/dist/components/sidebar/floating-item.svelte.d.ts

@@ -0,0 +1,13 @@
+type Options = {
+    allowItemHover?: boolean;
+    position?: 'top' | 'bottom';
+};
+export declare const useFloatingItem: (trigger: () => HTMLElement | null, floatingItem: () => HTMLElement | null, options?: Options) => {
+    floatingItemIsDisplayed: boolean;
+    hideFloatingItem: (event?: MouseEvent | FocusEvent) => void;
+    showFloatingItem: () => void;
+    onTriggerKeydown: (event: KeyboardEvent) => void;
+    onListboxKeydown: (event: KeyboardEvent) => void;
+};
+export {};
+//# sourceMappingURL=floating-item.svelte.d.ts.map

package/dist/components/sidebar/floating-item.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-item.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/floating-item.svelte.ts"],"names":[],"mappings":"AAEA,KAAK,OAAO,GAAG;IACb,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CAC7B,CAAC;AAIF,eAAO,MAAM,eAAe,GAC1B,SAAS,MAAM,WAAW,GAAG,IAAI,EACjC,cAAc,MAAM,WAAW,GAAG,IAAI,EACtC,UAAS,OAAwB;;+BA8BC,UAAU,GAAG,UAAU;;8BAoDxB,aAAa;8BAqBb,aAAa;CAe/C,CAAC"}

package/dist/components/sidebar/floating-item.svelte.js

@@ -0,0 +1,95 @@
+import { MediaQuery } from 'svelte/reactivity';
+const defaultOptions = { allowItemHover: true, position: 'bottom' };
+export const useFloatingItem = (trigger, floatingItem, options = defaultOptions) => {
+    const normalizedOptions = {
+        ...defaultOptions,
+        ...options,
+    };
+    let floatingItemIsDisplayed = $state(false);
+    const isMobile = $derived(new MediaQuery('(max-width: 780px)').current);
+    function getListboxPosition() {
+        const triggerRect = trigger()?.getBoundingClientRect();
+        const floatingItemRect = floatingItem()?.getBoundingClientRect();
+        if (!triggerRect || !floatingItemRect)
+            return {};
+        if (isMobile) {
+            return {
+                top: `-${floatingItemRect.height + 24}px`,
+                left: `-${floatingItemRect.width - triggerRect.width}px`,
+            };
+        }
+        return {
+            top: options.position === 'top'
+                ? `-${floatingItemRect.height - triggerRect.height}px`
+                : floatingItem()?.style.left || '0px',
+        };
+    }
+    function hideFloatingItem(event) {
+        if (!floatingItem || !trigger)
+            return;
+        const target = event?.relatedTarget;
+        // Prevent floating item from being hidden if mouse goes from trigger to listbox, unless specified
+        if (normalizedOptions.allowItemHover &&
+            target &&
+            (floatingItem()?.contains(target) || trigger()?.contains(target))) {
+            return;
+        }
+        floatingItem()?.classList.add('mc-sidebar__floating-item--hidden');
+        floatingItemIsDisplayed = false;
+        document.removeEventListener('mousedown', handleClickOutside);
+    }
+    function handleClickOutside(event) {
+        const path = event.composedPath ? event.composedPath() : [];
+        if (!path.includes(trigger()) && !path.includes(floatingItem())) {
+            hideFloatingItem(event);
+        }
+    }
+    function showFloatingItem() {
+        const el = floatingItem();
+        el?.classList.toggle('mc-sidebar__floating-item--hidden');
+        floatingItemIsDisplayed = !el?.classList.contains('mc-sidebar__floating-item--hidden');
+        if (!floatingItemIsDisplayed)
+            return;
+        if (!el)
+            return;
+        const { left, top } = getListboxPosition();
+        if (top) {
+            el.style.top = top;
+        }
+        if (left) {
+            el.style.left = left;
+        }
+        floatingItemIsDisplayed = true;
+        document.addEventListener('mousedown', handleClickOutside);
+    }
+    function onTriggerKeydown(event) {
+        if (!floatingItem)
+            return;
+        if (['ArrowDown', 'Enter', ' '].includes(event.key)) {
+            event.preventDefault();
+            showFloatingItem();
+            focusFirstListboxItem();
+        }
+        if (event.key === 'Tab') {
+            hideFloatingItem();
+        }
+    }
+    function focusFirstListboxItem() {
+        const firstItem = floatingItem()?.querySelector('button, [href], [tabindex]:not([tabindex="-1"])');
+        firstItem?.focus();
+    }
+    function onListboxKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            hideFloatingItem();
+            trigger()?.focus();
+        }
+    }
+    return {
+        floatingItemIsDisplayed,
+        hideFloatingItem,
+        showFloatingItem,
+        onTriggerKeydown,
+        onListboxKeydown,
+    };
+};

package/dist/components/sidebar/sidebar-state.spec.js

@@ -0,0 +1,112 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { getSidebarState, getShortcutsState, setSubItems } from './sidebar-state.svelte';
+import { setContext } from 'svelte';
+vi.mock('svelte', async () => {
+    const actual = await vi.importActual('svelte');
+    return {
+        ...actual,
+        setContext: vi.fn(),
+    };
+});
+describe('getSidebarState', () => {
+    let sidebar;
+    let element;
+    let cleanup;
+    beforeEach(() => {
+        sidebar = document.createElement('m-sidebar');
+        element = document.createElement('div');
+        document.body.appendChild(sidebar);
+    });
+    afterEach(() => {
+        cleanup?.();
+        sidebar.remove();
+        element.remove();
+    });
+    it('sets expanded state based on attribute', () => {
+        sidebar.setAttribute('expanded', '');
+        const setExpanded = vi.fn();
+        cleanup = getSidebarState({ setExpanded })(element);
+        expect(setExpanded).toHaveBeenCalledWith(true);
+    });
+    it('updates expanded state on event', () => {
+        const setExpanded = vi.fn();
+        cleanup = getSidebarState({ setExpanded })(element);
+        setExpanded.mockClear();
+        document.dispatchEvent(new CustomEvent('update:expanded', { detail: false }));
+        expect(setExpanded).toHaveBeenCalledWith(false);
+    });
+    it('removes event listener on cleanup', () => {
+        const setExpanded = vi.fn();
+        cleanup = getSidebarState({ setExpanded })(element);
+        setExpanded.mockClear();
+        cleanup?.();
+        document.dispatchEvent(new CustomEvent('update:expanded', { detail: true }));
+        expect(setExpanded).not.toHaveBeenCalled();
+    });
+});
+describe('getShortcutsState', () => {
+    let shortcuts;
+    let element;
+    let cleanup;
+    beforeEach(() => {
+        shortcuts = document.createElement('m-sortcuts');
+        element = document.createElement('div');
+        document.body.appendChild(shortcuts);
+    });
+    afterEach(() => {
+        cleanup?.();
+        shortcuts.remove();
+        element.remove();
+    });
+    it('sets stacked state based on attribute', () => {
+        shortcuts.setAttribute('stacked', '');
+        const setState = vi.fn();
+        cleanup = getShortcutsState({ setState })(element);
+        expect(setState).toHaveBeenCalledWith(true);
+    });
+    it('updates stacked state on event', () => {
+        const setState = vi.fn();
+        cleanup = getShortcutsState({ setState })(element);
+        setState.mockClear();
+        document.dispatchEvent(new CustomEvent('update:stacked', { detail: true }));
+        expect(setState).toHaveBeenCalledWith(true);
+    });
+    it('removes event listener on cleanup', () => {
+        const setState = vi.fn();
+        cleanup = getShortcutsState({ setState })(element);
+        setState.mockClear();
+        cleanup?.();
+        document.dispatchEvent(new CustomEvent('update:stacked', { detail: false }));
+        expect(setState).not.toHaveBeenCalled();
+    });
+});
+describe('setSubItems', () => {
+    let element;
+    beforeEach(() => {
+        document.body.innerHTML = '';
+        element = document.createElement('div');
+    });
+    afterEach(() => {
+        element.remove();
+    });
+    it('calls setContext with SUB_ITEM', () => {
+        setSubItems('M-SIDEBAR')(element);
+        expect(setContext).toHaveBeenCalledWith('SUB_ITEM', true);
+    });
+    it('marks sub items when parent node matches tag name', () => {
+        const parent = document.createElement('m-sidebar');
+        const child = document.createElement('m-sidebar-nav-item');
+        parent.appendChild(child);
+        document.body.appendChild(parent);
+        setSubItems('M-SIDEBAR')(element);
+        expect(child.sub).toBe(true);
+    });
+    it('does not mark items with a different parent', () => {
+        const parent = document.createElement('div');
+        const child = document.createElement('m-sidebar-nav-item');
+        parent.appendChild(child);
+        document.body.appendChild(parent);
+        setSubItems('M-SIDEBAR')(element);
+        expect(child.sub).toBeUndefined();
+    });
+});

package/dist/components/sidebar/sidebar-state.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Attachment } from 'svelte/attachments';
+export declare function getSidebarState({ setExpanded, }: {
+    setExpanded: (value: boolean) => void;
+}): Attachment;
+export declare function getShortcutsState({ setState, }: {
+    setState: (value: boolean) => void;
+}): Attachment;
+export declare function setSubItems(tagName: string): Attachment;
+//# sourceMappingURL=sidebar-state.svelte.d.ts.map

package/dist/components/sidebar/sidebar-state.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-state.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/sidebar-state.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,GACZ,EAAE;IACD,WAAW,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,GAAG,UAAU,CAab;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,GAAG,UAAU,CAab;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,UAAU,CAavD"}

package/dist/components/sidebar/sidebar-state.svelte.js

@@ -0,0 +1,36 @@
+import { setContext } from 'svelte';
+export function getSidebarState({ setExpanded, }) {
+    return () => {
+        const sidebar = document.querySelector('m-sidebar');
+        setExpanded(sidebar?.hasAttribute('expanded') ?? false);
+        const updateExpanded = (e) => {
+            setExpanded(e.detail);
+        };
+        document.addEventListener('update:expanded', updateExpanded);
+        return () => document.removeEventListener('update:expanded', updateExpanded);
+    };
+}
+export function getShortcutsState({ setState, }) {
+    return () => {
+        const shortcuts = document.querySelector('m-sortcuts');
+        setState(shortcuts?.hasAttribute('stacked') ?? false);
+        const updateState = (e) => {
+            setState(e.detail);
+        };
+        document.addEventListener('update:stacked', updateState);
+        return () => document.removeEventListener('update:stacked', updateState);
+    };
+}
+export function setSubItems(tagName) {
+    return () => {
+        // Works only for Svelte components
+        setContext('SUB_ITEM', true);
+        // Works only for custom-elements
+        const children = document.querySelectorAll('m-sidebar-nav-item');
+        children.forEach((el) => {
+            if (el.parentNode?.nodeName === tagName) {
+                el.sub = true;
+            }
+        });
+    };
+}

package/dist/components/sidebarexpandableitem/README.md

@@ -0,0 +1,19 @@
+# `m-sidebar-expandable-item`
+
+SidebarExpandableItem is a component that renders a sidebar item which can either expand to show a nested submenu or display a floating menu when the sidebar is collapsed. It supports optional icons, keyboard navigation, and accessibility attributes, and allows for custom submenu items via slots.
+
+## Props
+
+| Name | Description | Type | Default |
+|------|-------------|------|---------|
+| `id` | Identifier used for listbox controlling. | `string` | `crypto.randomUUID()` |
+| `label*` | The text displayed for the sidebar item in its expanded state. | `string` |   |
+| `menulabel*` | The title shown at the top of the floating menu when the sidebar is collapsed. | `string` |   |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `icon` | Use this slot to display an icon alongside the sidebar item. |
+| `default` | Contains one or more SidebarNavItem components used to render the submenu items. |
+

package/dist/components/sidebarexpandableitem/SidebarExpandableItem.js

@@ -0,0 +1,18 @@
+import{o as ee,c as ae,e as te,a as se,p as B,l as u,y as ie,x as re,b as f,d as le,v as C,i as K,j as a,k as p,r as t,q as E,t as P,m as R,C as m,u as X,f as S}from"../../custom-element.js";import{i as L}from"../../if.js";import{a as oe,s as D}from"../../slot.js";import{c as M,s as w}from"../../attributes.js";import{b as G}from"../../this.js";import{u as ne}from"../../floating-item.svelte.js";import{p as de}from"../../Condition20.js";import{g as H,s as ce}from"../../sidebar-state.svelte.js";import"../../branches.js";import"../../media-query.js";var me=S('<span class="mc-sidebar__icon svelte-1c38lw3"><!></span>'),be=S('<li class="mc-sidebar__item svelte-1c38lw3"><details class="mc-sidebar__link-expand svelte-1c38lw3" open=""><summary class="mc-sidebar__link svelte-1c38lw3"><!> <span class="mc-sidebar__text svelte-1c38lw3"> </span> <span class="mc-sidebar__sub svelte-1c38lw3"><!></span></summary> <ul class="mc-sidebar__sublist svelte-1c38lw3"><!></ul></details></li>'),ve=S('<span class="mc-sidebar__icon svelte-1c38lw3"><!></span>'),_e=S('<div class="mc-sidebar__item svelte-1c38lw3"><button class="mc-sidebar__trigger mc-sidebar__link svelte-1c38lw3" aria-haspopup="listbox"><!></button> <div class="mc-sidebar__floating-item mc-sidebar__floating-item--hidden svelte-1c38lw3" tabindex="0" role="menu"><div class="mc-sidebar__listbox svelte-1c38lw3"><h3 class="mc-sidebar__listbox-title svelte-1c38lw3"> </h3> <ul class="mc-sidebar__list svelte-1c38lw3"><!></ul></div></div></div>');const ue={hash:"svelte-1c38lw3",code:`/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}.mc-sidebar__floating-item.svelte-1c38lw3 {position:absolute;padding-left:1.25rem;left:3rem;}
+@media screen and (min-width: 680px) {
+}.mc-sidebar__floating-item--hidden.svelte-1c38lw3 {visibility:hidden;overflow:hidden;opacity:0;height:0;pointer-events:none;}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}
+@media screen and (min-width: 680px) {
+}.mc-sidebar__listbox.svelte-1c38lw3 {min-width:18.75rem;border-radius:var(--border-radius-m, 0.5rem);background-color:var(--listbox-color-background, #ffffff);padding:1rem;display:flex;flex-direction:column;gap:0.25rem;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));}.mc-sidebar__listbox-title.svelte-1c38lw3 {font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);padding-bottom:0.75rem;margin:0;border-bottom:1px solid var(--divider-color-primary, #cccccc);color:var(--sidebar-color-shortcut-item-text-default, #404040);}.mc-sidebar__list.svelte-1c38lw3 {list-style-type:none;margin:0;padding:0;}.mc-sidebar__link.svelte-1c38lw3 {display:flex;align-items:center;gap:0.25rem;height:2.5rem;width:100%;padding-left:0.25rem;text-align:left;text-decoration:none;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--sidebar-color-section-item-text-default, #404040);border-radius:var(--border-radius-m, 0.5rem);background:transparent;border:none;cursor:pointer;}.mc-sidebar__link.svelte-1c38lw3:not(.mc-sidebar__link--selected):hover {background:var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));}.mc-sidebar__link.svelte-1c38lw3:focus-visible {box-shadow:0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:0.125rem solid transparent;outline-offset:0.125rem;}.mc-sidebar__link-expand.svelte-1c38lw3:open .mc-sidebar__sub:where(.svelte-1c38lw3) {transform:rotate(180deg);}.mc-sidebar__link.svelte-1c38lw3:is(summary:where(.svelte-1c38lw3)) .mc-sidebar__text:where(.svelte-1c38lw3) {flex-grow:1;}.mc-sidebar__icon.svelte-1c38lw3 {fill:currentcolor;width:1.5rem;height:1.5rem;}.mc-sidebar__text.svelte-1c38lw3 {display:block;}.mc-sidebar__sub.svelte-1c38lw3 {width:1.25rem;height:1.25rem;}.mc-sidebar__sublist.svelte-1c38lw3 {list-style-type:none;margin:0;padding:0 0 0 2rem;display:flex;flex-direction:column;gap:0.25rem;}.mc-sidebar__item.svelte-1c38lw3 {position:relative;}`};function fe(T,l){const j=oe(l);te(l,!0),se(T,ue);let b=B(l,"id",23,()=>crypto.randomUUID()),g=B(l,"label",7),z=B(l,"menulabel",7),U=C(null),A=C(null);const{floatingItemIsDisplayed:J,hideFloatingItem:h,showFloatingItem:q,onTriggerKeydown:O,onListboxKeydown:Q}=ne(()=>u(U),()=>u(A));let F=C(!1);var V={get id(){return b()},set id(s=crypto.randomUUID()){b(s),K()},get label(){return g()},set label(s){g(s),K()},get menulabel(){return z()},set menulabel(s){z(s),K()}},N=ie(),W=re(N);{var Y=s=>{var r=be(),e=a(r),d=a(e),x=a(d);{var o=n=>{var _=me(),$=a(_);D($,l,"icon",{},null),t(_),f(n,_)};L(x,n=>{j.icon&&n(o)})}var c=p(x,2),v=a(c,!0);t(c);var y=p(c,2),k=a(y);de(k,{}),t(y),t(d);var I=p(d,2),i=a(I);D(i,l,"default",{},null),t(I),t(e),t(r),M(r,()=>H({setExpanded:n=>E(F,n,!0)})),M(r,()=>ce("M-SIDEBAR-EXPANDABLE-ITEM")),P(()=>{w(d,"aria-label",g()),R(v,g())}),f(s,r)},Z=s=>{var r=_e(),e=a(r),d=a(e);{var x=i=>{var n=ve(),_=a(n);D(_,l,"icon",{},null),t(n),f(i,n)};L(d,i=>{j.icon&&i(x)})}t(e),G(e,i=>E(U,i),()=>u(U));var o=p(e,2),c=a(o),v=a(c),y=a(v,!0);t(v);var k=p(v,2),I=a(k);D(I,l,"default",{},null),t(k),t(c),t(o),G(o,i=>E(A,i),()=>u(A)),t(r),M(r,()=>H({setExpanded:i=>E(F,i,!0)})),P(()=>{w(e,"id",b()),w(e,"aria-expanded",J),w(e,"aria-controls",`listbox-${b()}`),w(o,"id",`listbox-${b()}`),R(y,z())}),m("mouseenter",e,q),m("focus",e,q),X("keydown",e,O),m("mouseleave",e,h),m("blur",e,h),X("keydown",o,Q),m("mouseleave",o,h),m("blur",o,h),f(s,r)};L(W,s=>{u(F)?s(Y):s(Z,!1)})}return f(T,N),le(V)}ee(["keydown"]);customElements.define("m-sidebar-expandable-item",ae(fe,{id:{},label:{},menulabel:{}},["icon","default"],[],{mode:"open"}));
+//# sourceMappingURL=SidebarExpandableItem.js.map

package/dist/components/sidebarexpandableitem/SidebarExpandableItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarExpandableItem.js","sources":["../../../src/components/sidebarexpandableitem/SidebarExpandableItem.svelte"],"sourcesContent":["<svelte:options\n  customElement={{\n    tag: 'm-sidebar-expandable-item',\n  }}\n/>\n\n<script lang=\"ts\">\n  import { useFloatingItem } from '../sidebar/floating-item.svelte';\n  import { ChevronDown20 } from '@mozaic-ds/icons-svelte';\n  import { getSidebarState, setSubItems } from '../sidebar/sidebar-state.svelte';\n\n  /**\n   * SidebarExpandableItem is a component that renders a sidebar item which can either expand to show a nested submenu or display a floating menu when the sidebar is collapsed. It supports optional icons, keyboard navigation, and accessibility attributes, and allows for custom submenu items via slots.\n   * @slot default - Contains one or more SidebarNavItem components used to render the submenu items.\n   * @slot icon - Use this slot to display an icon alongside the sidebar item.\n   */\n\n  interface Props {\n    /**\n     * Identifier used for listbox controlling.\n     */\n    id?: string;\n    /**\n     * The text displayed for the sidebar item in its expanded state.\n     */\n    label: string;\n    /**\n     * The title shown at the top of the floating menu when the sidebar is collapsed.\n     */\n    menulabel: string;\n  }\n\n  let { id = crypto.randomUUID(), label, menulabel }: Props = $props();\n\n  let trigger: HTMLElement | null = $state(null);\n  let listbox: HTMLElement | null = $state(null);\n\n  const {\n    floatingItemIsDisplayed,\n    hideFloatingItem,\n    showFloatingItem,\n    onTriggerKeydown,\n    onListboxKeydown,\n  } = useFloatingItem(\n    () => trigger,\n    () => listbox,\n  );\n\n  let expanded = $state(false);\n</script>\n\n{#if expanded}\n  <li\n    {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}\n    {@attach setSubItems('M-SIDEBAR-EXPANDABLE-ITEM')}\n    class=\"mc-sidebar__item\"\n  >\n    <details class=\"mc-sidebar__link-expand\" open>\n      <summary class=\"mc-sidebar__link\" aria-label={label}>\n        {#if $$slots.icon}\n          <span class=\"mc-sidebar__icon\">\n            <slot name=\"icon\" />\n          </span>\n        {/if}\n        <span class=\"mc-sidebar__text\">{label}</span>\n        <span class=\"mc-sidebar__sub\">\n          <ChevronDown20 />\n        </span>\n      </summary>\n      <ul class=\"mc-sidebar__sublist\">\n        <slot />\n      </ul>\n    </details>\n  </li>\n{:else}\n  <div\n    {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}\n    class=\"mc-sidebar__item\"\n  >\n    <button\n      bind:this={trigger}\n      class=\"mc-sidebar__trigger mc-sidebar__link\"\n      {id}\n      aria-haspopup=\"listbox\"\n      aria-expanded={floatingItemIsDisplayed}\n      aria-controls={`listbox-${id}`}\n      onmouseenter={showFloatingItem}\n      onfocus={showFloatingItem}\n      onkeydown={onTriggerKeydown}\n      onmouseleave={hideFloatingItem}\n      onblur={hideFloatingItem}\n    >\n      {#if $$slots.icon}\n        <span class=\"mc-sidebar__icon\">\n          <slot name=\"icon\" />\n        </span>\n      {/if}\n    </button>\n\n    <div\n      bind:this={listbox}\n      class=\"mc-sidebar__floating-item mc-sidebar__floating-item--hidden\"\n      id={`listbox-${id}`}\n      tabindex=\"0\"\n      role=\"menu\"\n      onkeydown={onListboxKeydown}\n      onmouseleave={hideFloatingItem}\n      onblur={hideFloatingItem}\n    >\n      <div class=\"mc-sidebar__listbox\">\n        <h3 class=\"mc-sidebar__listbox-title\">{menulabel}</h3>\n        <ul class=\"mc-sidebar__list\">\n          <slot />\n        </ul>\n      </div>\n    </div>\n  </div>\n{/if}\n\n<style lang=\"scss\">\n  @use '@mozaic-ds/styles/components/sidebar';\n</style>\n"],"names":["id","$.prop","$$props","label","menulabel","trigger","$.state","listbox","floatingItemIsDisplayed","hideFloatingItem","showFloatingItem","onTriggerKeydown","onListboxKeydown","useFloatingItem","$.get","expanded","$$value","li","root_1","details","$.child","summary","span","root_2","$$slots","$$render","consequent","span_1","$.sibling","node_1","span_2","ChevronDown20","node_3","ul","$.reset","getSidebarState","value","$.set","setSubItems","$.set_attribute","$.append","$$anchor","div","root_3","button","node_5","span_3","root_4","consequent_2","div_1","div_2","h3","ul_1","$.event","$.delegated","consequent_1","alternate"],"mappings":";;;;;;;;;;;;;;;;qsEAMA,qCA0BQA,EAAEC,EAAAC,EAAA,KAAA,GAAA,IAAG,OAAO,YAAU,EAAIC,EAAKF,EAAAC,EAAA,QAAA,CAAA,EAAEE,EAASH,EAAAC,EAAA,YAAA,CAAA,EAE5CG,EAA8BC,EAAO,IAAI,EACzCC,EAA8BD,EAAO,IAAI,QAG3C,wBAAAE,EACA,iBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,iBAAAC,GACEC,GAAe,IAAAC,EACXT,CAAO,EAAA,IAAAS,EACPP,CAAO,CAAA,MAGXQ,EAAWT,EAAO,EAAK,8BAhBhB,IAAA,GAAAU,EAAA,OAAO,WAAU,EAAA,4IAoB3B,IAAAC,EAAAC,GAAA,EAKEC,EAAOC,EALTH,CAAA,EAMII,IADFF,CAAO,MACLE,CAAO,iBAEHC,EAAIC,GAAA,MAAJD,CAAI,0BAAJA,CAAI,MAAJA,CAAI,WADFE,EAAQ,MAAIC,EAAAC,CAAA,QAKhBC,EAAIC,EAAAC,EAAA,CAAA,MAAJF,EAAI,EAAA,IAAJA,CAAI,EACJ,IAAAG,IADAH,EAAI,CAAA,MACJG,CAAI,EACFC,GAAaC,EAAA,EAAA,IADfF,CAAI,IAPNT,CAAO,EAWP,IAAAY,IAXAZ,EAAO,CAAA,MAWPY,CAAE,6BAAFA,CAAE,IAZJd,CAAO,EALTe,EAAAjB,CAAA,IAAAA,EAAA,IACUkB,GAAkB,YAAcC,GAAKC,EAAMtB,EAAWqB,EAAK,EAAA,CAAA,CAAA,CAAA,IADrEnB,EAAA,IAEUqB,GAAY,2BAA2B,CAAA,SAI7CC,EAAAlB,eAA6ClB,GAAK,MAMjBA,GAAK,IAZ1CqC,EAAAC,EAAAxB,CAAA,SAuBA,IAAAyB,EAAAC,GAAA,EAIEC,EAAAxB,EAJFsB,CAAA,EAIEG,EAAAzB,EAAAwB,CAAA,iBAcIE,EAAIC,GAAA,MAAJD,CAAI,0BAAJA,CAAI,MAAJA,CAAI,WADFtB,EAAQ,MAAIC,EAAAuB,CAAA,IAblBd,EAAAU,CAAA,IAAAA,EAAA5B,GAAAqB,EACYhC,WAAAA,CAAO,CAAA,MAmBnB4C,EAAArB,EApBAgB,EAAA,CAAA,EA8BEM,EAAG9B,EAVL6B,CAAA,EAWIE,IADFD,CAAG,MACDC,EAAE,EAAA,IAAFA,CAAE,EACF,IAAAC,IADAD,EAAE,CAAA,MACFC,CAAE,6BAAFA,CAAE,IAFJF,CAAG,EAVLhB,EAAAe,CAAA,IAAAA,EAAAjC,GAAAqB,EACY9B,WAAAA,CAAO,CAAA,EAzBrB2B,EAAAQ,CAAA,IAAAA,EAAA,IACUP,GAAkB,YAAcC,GAAKC,EAAMtB,EAAWqB,EAAK,EAAA,CAAA,CAAA,CAAA,SAGnEG,EAAAK,EAAA,KAGE5C,GAAE,EAHJuC,EAAAK,EAAA,gBAKgBpC,CAAuB,EALvC+B,EAAAK,EAAA,gBAAA,WAM2B5C,EAAE,CAAA,EAAA,EAc7BuC,EAAAU,EAAA,KAAA,WAGgBjD,EAAE,CAAA,EAAA,MAQwBI,GAAS,IA/BnDiD,EAAA,aAAAT,EAOelC,CAAgB,EAP/B2C,EAAA,QAAAT,EAQUlC,CAAgB,EAR1B4C,EAAA,UAAAV,EASYjC,CAAgB,EAT5B0C,EAAA,aAAAT,EAUenC,CAAgB,EAV/B4C,EAAA,OAAAT,EAWSnC,CAAgB,EASzB6C,EAAA,UAAAL,EAMYrC,CAAgB,EAN5ByC,EAAA,aAAAJ,EAOexC,CAAgB,EAP/B4C,EAAA,OAAAJ,EAQSxC,CAAgB,EAhC3B+B,EAAAC,EAAAC,CAAA,aAxBE3B,CAAQ,EAAAU,EAAA8B,CAAA,EAAA9B,EAAA+B,EAAA,EAAA,uBAFL"}

package/dist/components/sidebarexpandableitem/SidebarExpandableItem.spec.js

@@ -0,0 +1,85 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import SidebarExpandableItem from './SidebarExpandableItem.svelte';
+const showMock = vi.fn();
+const hideMock = vi.fn();
+const triggerKeydownMock = vi.fn();
+const listboxKeydownMock = vi.fn();
+vi.mock('../sidebar/floating-item.svelte', async () => {
+    return {
+        useFloatingItem: vi.fn(() => ({
+            floatingItemIsDisplayed: false,
+            showFloatingItem: showMock,
+            hideFloatingItem: hideMock,
+            onTriggerKeydown: triggerKeydownMock,
+            onListboxKeydown: listboxKeydownMock,
+        })),
+    };
+});
+describe('SidebarExpandableItem', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+    });
+    it('calls showFloatingItem and hideFloatingItem on trigger mouse events', async () => {
+        const { container } = render(SidebarExpandableItem, {
+            props: { label: 'Item', menulabel: 'Menu' },
+        });
+        const button = container.querySelector('button.mc-sidebar__trigger');
+        await fireEvent.mouseEnter(button);
+        expect(showMock).toHaveBeenCalled();
+        await fireEvent.mouseLeave(button);
+        expect(hideMock).toHaveBeenCalled();
+    });
+    it('calls onTriggerKeydown when a key is pressed on trigger', async () => {
+        const { container } = render(SidebarExpandableItem, {
+            props: { label: 'Item', menulabel: 'Menu' },
+        });
+        const button = container.querySelector('button.mc-sidebar__trigger');
+        await fireEvent.keyDown(button, { key: 'Enter' });
+        expect(triggerKeydownMock).toHaveBeenCalled();
+    });
+    it('calls showFloatingItem and hideFloatingItem on trigger focus/blur', async () => {
+        const { container } = render(SidebarExpandableItem, {
+            props: { label: 'Item', menulabel: 'Menu' },
+        });
+        const trigger = container.querySelector('.mc-sidebar__trigger');
+        await fireEvent.focus(trigger);
+        expect(showMock).toHaveBeenCalled();
+        await fireEvent.blur(trigger);
+        expect(hideMock).toHaveBeenCalled();
+    });
+    it('calls onListboxKeydown when a key is pressed on listbox', async () => {
+        const { container } = render(SidebarExpandableItem, {
+            props: { label: 'Item', menulabel: 'Menu' },
+        });
+        const listbox = container.querySelector('.mc-sidebar__floating-item');
+        await fireEvent.keyDown(listbox, { key: 'ArrowDown' });
+        expect(listboxKeydownMock).toHaveBeenCalled();
+    });
+    it('calls hideFloatingItem when on listbox blur', async () => {
+        const { container } = render(SidebarExpandableItem, {
+            props: { label: 'Item', menulabel: 'Menu' },
+        });
+        const listbox = container.querySelector('.mc-sidebar__floating-item');
+        await fireEvent.blur(listbox);
+        expect(hideMock).toHaveBeenCalled();
+    });
+    it('calls hideFloatingItem when on listbox mouseleave', async () => {
+        const { container } = render(SidebarExpandableItem, {
+            props: { label: 'Item', menulabel: 'Menu' },
+        });
+        const listbox = container.querySelector('.mc-sidebar__floating-item');
+        await fireEvent.mouseLeave(listbox);
+        expect(hideMock).toHaveBeenCalled();
+    });
+    it('displays a list item when expanded is true', async () => {
+        const sidebar = document.createElement('m-sidebar');
+        sidebar.setAttribute('expanded', '');
+        document.body.appendChild(sidebar);
+        const { container } = render(SidebarExpandableItem, {
+            props: { label: 'Item', menulabel: 'Menu' },
+        });
+        const li = container.querySelector('li');
+        expect(li).toBeTruthy();
+    });
+});