sv5ui-plus 5.0.4 → 5.0.6

package/dist/components/NavigationMenu/NavigationMenu.svelte

@@ -210,414 +210,401 @@ $effect(() => () => clearTimeout(flyoutTimer));
 </script>
 
 {#snippet leading(item: NavigationMenuItem, index: number, open: boolean)}
-    {#if itemLeading}
-        {@render itemLeading({ item, index, active: !!item.active, open })}
-    {:else if item.avatar}
-        {#if item.chip}
-            <Chip
-                inset
-                {...typeof item.chip === 'object' ? item.chip : {}}
-                class={classes.linkLeadingAvatar}
-            >
-                <Avatar size="2xs" {...item.avatar} />
-            </Chip>
-        {:else}
-            <Avatar size="2xs" {...item.avatar} class={classes.linkLeadingAvatar} />
-        {/if}
-    {:else if item.icon}
-        <Icon name={item.icon} class={classes.linkLeadingIcon} />
-    {/if}
+	{#if itemLeading}
+		{@render itemLeading({ item, index, active: !!item.active, open })}
+	{:else if item.avatar}
+		{#if item.chip}
+			<Chip
+				inset
+				{...typeof item.chip === "object" ? item.chip : {}}
+				class={classes.linkLeadingAvatar}
+			>
+				<Avatar size="2xs" {...item.avatar} />
+			</Chip>
+		{:else}
+			<Avatar size="2xs" {...item.avatar} class={classes.linkLeadingAvatar} />
+		{/if}
+	{:else if item.icon}
+		<Icon name={item.icon} class={classes.linkLeadingIcon} />
+	{/if}
 {/snippet}
 
 {#snippet label(item: NavigationMenuItem, index: number, open: boolean)}
-    {#if itemLabel}
-        {@render itemLabel({ item, index, active: !!item.active, open })}
-    {:else}
-        <span class={classes.linkLabel}>{itemLabelText(item)}</span>
-        {#if externalIcon !== false && isExternal(item.href)}
-            <Icon
-                name={typeof externalIcon === 'string' ? externalIcon : icons.external}
-                class={classes.linkLabelExternalIcon}
-            />
-        {/if}
-    {/if}
+	{#if itemLabel}
+		{@render itemLabel({ item, index, active: !!item.active, open })}
+	{:else}
+		<span class={classes.linkLabel}>{itemLabelText(item)}</span>
+		{#if externalIcon !== false && isExternal(item.href)}
+			<Icon
+				name={typeof externalIcon === "string" ? externalIcon : icons.external}
+				class={classes.linkLabelExternalIcon}
+			/>
+		{/if}
+	{/if}
 {/snippet}
 
 {#snippet trailing(item: NavigationMenuItem, index: number, open: boolean, isTrigger: boolean)}
-    {#if itemTrailing}
-        {@render itemTrailing({ item, index, active: !!item.active, open })}
-    {:else}
-        <span class={classes.linkTrailing}>
-            {#if item.badge !== undefined}
-                <Badge
-                    size="sm"
-                    color="surface"
-                    variant="soft"
-                    {...typeof item.badge === 'object' ? item.badge : { label: item.badge }}
-                    class={classes.linkTrailingBadge}
-                />
-            {/if}
-            {#if isTrigger}
-                <Icon
-                    name={item.trailingIcon ?? trailingIcon}
-                    class={[classes.linkTrailingIcon, open ? 'rotate-180' : '']}
-                />
-            {/if}
-        </span>
-    {/if}
+	{#if itemTrailing}
+		{@render itemTrailing({ item, index, active: !!item.active, open })}
+	{:else}
+		<span class={classes.linkTrailing}>
+			{#if item.badge !== undefined}
+				<Badge
+					size="sm"
+					color="surface"
+					variant="soft"
+					{...typeof item.badge === "object" ? item.badge : { label: item.badge }}
+					class={classes.linkTrailingBadge}
+				/>
+			{/if}
+			{#if isTrigger}
+				<Icon
+					name={item.trailingIcon ?? trailingIcon}
+					class={[classes.linkTrailingIcon, open ? "rotate-180" : ""]}
+				/>
+			{/if}
+		</span>
+	{/if}
 {/snippet}
 
 {#snippet linkBody(item: NavigationMenuItem, index: number, open: boolean, isTrigger: boolean)}
-    {@render leading(item, index, open)}
-    {@render label(item, index, open)}
-    {@render trailing(item, index, open, isTrigger)}
-    {#if (effectiveCollapsed || stacked) && item.badge !== undefined}
-        <span class={classes.linkBadgeDot} data-navigation-menu-badge-dot="" aria-hidden="true"
-        ></span>
-    {/if}
+	{@render leading(item, index, open)}
+	{@render label(item, index, open)}
+	{@render trailing(item, index, open, isTrigger)}
+	{#if (effectiveCollapsed || stacked) && item.badge !== undefined}
+		<span class={classes.linkBadgeDot} data-navigation-menu-badge-dot="" aria-hidden="true"></span>
+	{/if}
 {/snippet}
 
 {#snippet childLink(sub: NavigationMenuChildItem)}
-    {#if sub.children?.length}
-        <li class={classes.childGroup}>
-            <p class={classes.childGroupLabel}>{sub.label}</p>
-            <ul class={classes.childGroupList}>
-                {#each sub.children as grandchild, gi (grandchild.href ?? gi)}
-                    {@render childLink(grandchild)}
-                {/each}
-            </ul>
-        </li>
-    {:else}
-        {@const active = isItemActive(sub.active, sub.href, sub.exact)}
-        <li class={classes.childItem}>
-            <Link
-                href={safeHref(sub.href)}
-                target={sub.target}
-                raw
-                exact={sub.exact ?? exact}
-                {active}
-                onclick={sub.onSelect}
-                data-active={active ? '' : undefined}
-                class={[classes.childLink, sub.class]}
-            >
-                {#if sub.icon}
-                    <Icon name={sub.icon} class={classes.childLinkIcon} />
-                {/if}
-                <span class={classes.childLinkWrapper}>
-                    <span class="inline-flex items-center gap-1">
-                        <span class={classes.childLinkLabel}>{sub.label}</span>
-                        {#if externalIcon !== false && isExternal(sub.href)}
-                            <Icon
-                                name={typeof externalIcon === 'string'
-                                    ? externalIcon
-                                    : icons.external}
-                                class={classes.linkLabelExternalIcon}
-                            />
-                        {/if}
-                    </span>
-                    {#if sub.description}
-                        <span class={classes.childLinkDescription}>{sub.description}</span>
-                    {/if}
-                </span>
-            </Link>
-        </li>
-    {/if}
+	{#if sub.children?.length}
+		<li class={classes.childGroup}>
+			<p class={classes.childGroupLabel}>{sub.label}</p>
+			<ul class={classes.childGroupList}>
+				{#each sub.children as grandchild, gi (grandchild.href ?? gi)}
+					{@render childLink(grandchild)}
+				{/each}
+			</ul>
+		</li>
+	{:else}
+		{@const active = isItemActive(sub.active, sub.href, sub.exact)}
+		<li class={classes.childItem}>
+			<Link
+				href={safeHref(sub.href)}
+				target={sub.target}
+				raw
+				exact={sub.exact ?? exact}
+				{active}
+				onclick={sub.onSelect}
+				data-active={active ? "" : undefined}
+				class={[classes.childLink, sub.class]}
+			>
+				{#if sub.icon}
+					<Icon name={sub.icon} class={classes.childLinkIcon} />
+				{/if}
+				<span class={classes.childLinkWrapper}>
+					<span class="inline-flex items-center gap-1">
+						<span class={classes.childLinkLabel}>{sub.label}</span>
+						{#if externalIcon !== false && isExternal(sub.href)}
+							<Icon
+								name={typeof externalIcon === "string" ? externalIcon : icons.external}
+								class={classes.linkLabelExternalIcon}
+							/>
+						{/if}
+					</span>
+					{#if sub.description}
+						<span class={classes.childLinkDescription}>{sub.description}</span>
+					{/if}
+				</span>
+			</Link>
+		</li>
+	{/if}
 {/snippet}
 
 {#snippet megaContent(item: NavigationMenuItem, index: number)}
-    {#if itemContent}
-        {@render itemContent({ item, index })}
-    {:else}
-        <ul class={classes.childList}>
-            {#each item.children ?? [] as child, ci (child.href ?? ci)}
-                {@render childLink(child)}
-            {/each}
-        </ul>
-    {/if}
+	{#if itemContent}
+		{@render itemContent({ item, index })}
+	{:else}
+		<ul class={classes.childList}>
+			{#each item.children ?? [] as child, ci (child.href ?? ci)}
+				{@render childLink(child)}
+			{/each}
+		</ul>
+	{/if}
 {/snippet}
 
 {#snippet horizontalMenu()}
-    <Bits.Root
-        bind:ref
-        value={horizontalValue}
-        onValueChange={(v) => emit(v || undefined)}
-        orientation="horizontal"
-        {delayDuration}
-        {skipDelayDuration}
-        class={classes.root}
-        {...restProps as Record<string, unknown>}
-    >
-        <Bits.List bind:ref={listEl} class={classes.list}>
-            {#if showHighlight}
-                <div
-                    class={classes.highlight}
-                    style={highlightStyle}
-                    data-navigation-menu-highlight=""
-                    aria-hidden="true"
-                ></div>
-            {/if}
-            {#if listLeading}{@render listLeading()}{/if}
-            {#each groups as group, gi (gi)}
-                {#each group as item, index (itemValue(item, gi, index))}
-                    {@const iv = itemValue(item, gi, index)}
-                    {@const kind = resolvedType(item)}
-                    {@const open = openSet.has(iv)}
-                    {#if itemSlot}
-                        <Bits.Item value={iv} class={classes.item}>
-                            {@render itemSlot({ item, index, active: !!item.active, open })}
-                        </Bits.Item>
-                    {:else if kind === 'label'}
-                        <li class={classes.label}>{itemLabelText(item)}</li>
-                    {:else if isDropdown(item)}
-                        <Bits.Item
-                            value={iv}
-                            openOnHover={!disableHoverTrigger}
-                            class={classes.item}
-                        >
-                            <Bits.Trigger disabled={disabled || item.disabled}>
-                                {#snippet child({ props }: { props: Record<string, unknown> })}
-                                    <button
-                                        {...disableClickTrigger
-                                            ? { ...props, onclick: blockClick }
-                                            : props}
-                                        class={linkClass(item)}
-                                        data-active={item.active ? '' : undefined}
-                                    >
-                                        {@render linkBody(item, index, open, true)}
-                                    </button>
-                                {/snippet}
-                            </Bits.Trigger>
-                            <Bits.Content {...contentProps} class={classes.content}>
-                                {@render megaContent(item, index)}
-                            </Bits.Content>
-                        </Bits.Item>
-                    {:else}
-                        {@const active = isItemActive(item.active, item.href, item.exact)}
-                        {@const href = safeHref(item.href)}
-                        <Bits.Item value={iv} class={classes.item}>
-                            <Bits.Link {href} {active} onSelect={item.onSelect}>
-                                {#snippet child({ props }: { props: Record<string, unknown> })}
-                                    <Link
-                                        {href}
-                                        target={item.target}
-                                        raw
-                                        exact={item.exact ?? exact}
-                                        {active}
-                                        disabled={disabled || item.disabled}
-                                        {...props}
-                                        class={linkClass(item)}
-                                    >
-                                        {@render linkBody(item, index, open, false)}
-                                    </Link>
-                                {/snippet}
-                            </Bits.Link>
-                        </Bits.Item>
-                    {/if}
-                {/each}
-                {#if gi < groups.length - 1}
-                    <li role="separator" aria-orientation="vertical" class={classes.separator}></li>
-                {/if}
-            {/each}
-            {#if listTrailing}{@render listTrailing()}{/if}
-            {#if arrow}
-                <Bits.Indicator class={classes.indicator}>
-                    <div class={classes.arrow}></div>
-                </Bits.Indicator>
-            {/if}
-        </Bits.List>
-        <div class={classes.viewportWrapper}>
-            <Bits.Viewport {...contentProps} class={classes.viewport} />
-        </div>
-    </Bits.Root>
+	<Bits.Root
+		bind:ref
+		value={horizontalValue}
+		onValueChange={(v) => emit(v || undefined)}
+		orientation="horizontal"
+		{delayDuration}
+		{skipDelayDuration}
+		class={classes.root}
+		{...restProps as Record<string, unknown>}
+	>
+		<Bits.List bind:ref={listEl} class={classes.list}>
+			{#if showHighlight}
+				<div
+					class={classes.highlight}
+					style={highlightStyle}
+					data-navigation-menu-highlight=""
+					aria-hidden="true"
+				></div>
+			{/if}
+			{#if listLeading}{@render listLeading()}{/if}
+			{#each groups as group, gi (gi)}
+				{#each group as item, index (itemValue(item, gi, index))}
+					{@const iv = itemValue(item, gi, index)}
+					{@const kind = resolvedType(item)}
+					{@const open = openSet.has(iv)}
+					{#if itemSlot}
+						<Bits.Item value={iv} class={classes.item}>
+							{@render itemSlot({ item, index, active: !!item.active, open })}
+						</Bits.Item>
+					{:else if kind === "label"}
+						<li class={classes.label}>{itemLabelText(item)}</li>
+					{:else if isDropdown(item)}
+						<Bits.Item value={iv} openOnHover={!disableHoverTrigger} class={classes.item}>
+							<Bits.Trigger disabled={disabled || item.disabled}>
+								{#snippet child({ props }: { props: Record<string, unknown> })}
+									<button
+										{...disableClickTrigger ? { ...props, onclick: blockClick } : props}
+										class={linkClass(item)}
+										data-active={item.active ? "" : undefined}
+									>
+										{@render linkBody(item, index, open, true)}
+									</button>
+								{/snippet}
+							</Bits.Trigger>
+							<Bits.Content {...contentProps} class={classes.content}>
+								{@render megaContent(item, index)}
+							</Bits.Content>
+						</Bits.Item>
+					{:else}
+						{@const active = isItemActive(item.active, item.href, item.exact)}
+						{@const href = safeHref(item.href)}
+						<Bits.Item value={iv} class={classes.item}>
+							<Bits.Link {href} {active} onSelect={item.onSelect}>
+								{#snippet child({ props }: { props: Record<string, unknown> })}
+									<Link
+										{href}
+										target={item.target}
+										raw
+										exact={item.exact ?? exact}
+										{active}
+										disabled={disabled || item.disabled}
+										{...props}
+										class={linkClass(item)}
+									>
+										{@render linkBody(item, index, open, false)}
+									</Link>
+								{/snippet}
+							</Bits.Link>
+						</Bits.Item>
+					{/if}
+				{/each}
+				{#if gi < groups.length - 1}
+					<li role="separator" aria-orientation="vertical" class={classes.separator}></li>
+				{/if}
+			{/each}
+			{#if listTrailing}{@render listTrailing()}{/if}
+			{#if arrow}
+				<Bits.Indicator class={classes.indicator}>
+					<div class={classes.arrow}></div>
+				</Bits.Indicator>
+			{/if}
+		</Bits.List>
+		<div class={classes.viewportWrapper}>
+			<Bits.Viewport {...contentProps} class={classes.viewport} />
+		</div>
+	</Bits.Root>
 {/snippet}
 
 {#snippet verticalLeaf(item: NavigationMenuItem, index: number)}
-    {@const active = isItemActive(item.active, item.href, item.exact)}
-    {@const collapsedTip = effectiveCollapsed && !stacked && (item.tooltip ?? tooltip)}
-    {#if collapsedTip}
-        <Tooltip text={itemLabelText(item)} side="right" {...asProps(item.tooltip ?? tooltip)}>
-            <Link
-                href={safeHref(item.href)}
-                target={item.target}
-                raw
-                exact={item.exact ?? exact}
-                {active}
-                disabled={disabled || item.disabled}
-                onclick={item.onSelect}
-                data-active={active ? '' : undefined}
-                class={linkClass(item)}
-            >
-                {@render linkBody(item, index, false, false)}
-            </Link>
-        </Tooltip>
-    {:else}
-        <Link
-            href={safeHref(item.href)}
-            target={item.target}
-            raw
-            exact={item.exact ?? exact}
-            {active}
-            disabled={disabled || item.disabled}
-            onclick={item.onSelect}
-            data-active={active ? '' : undefined}
-            class={linkClass(item)}
-        >
-            {@render linkBody(item, index, false, false)}
-        </Link>
-    {/if}
+	{@const active = isItemActive(item.active, item.href, item.exact)}
+	{@const collapsedTip = effectiveCollapsed && !stacked && (item.tooltip ?? tooltip)}
+	{#if collapsedTip}
+		<Tooltip text={itemLabelText(item)} side="right" {...asProps(item.tooltip ?? tooltip)}>
+			<Link
+				href={safeHref(item.href)}
+				target={item.target}
+				raw
+				exact={item.exact ?? exact}
+				{active}
+				disabled={disabled || item.disabled}
+				onclick={item.onSelect}
+				data-active={active ? "" : undefined}
+				class={linkClass(item)}
+			>
+				{@render linkBody(item, index, false, false)}
+			</Link>
+		</Tooltip>
+	{:else}
+		<Link
+			href={safeHref(item.href)}
+			target={item.target}
+			raw
+			exact={item.exact ?? exact}
+			{active}
+			disabled={disabled || item.disabled}
+			onclick={item.onSelect}
+			data-active={active ? "" : undefined}
+			class={linkClass(item)}
+		>
+			{@render linkBody(item, index, false, false)}
+		</Link>
+	{/if}
 {/snippet}
 
 {#snippet verticalItem(item: NavigationMenuItem, index: number, groupIndex: number)}
-    {@const iv = itemValue(item, groupIndex, index)}
-    {@const kind = resolvedType(item)}
-    {@const open = openSet.has(iv)}
-    <li class={[classes.item, itemActions ? 'group/nav-row relative' : '']}>
-        {#if itemSlot}
-            {@render itemSlot({ item, index, active: !!item.active, open })}
-        {:else if kind === 'label'}
-            <div class={classes.label}>
-                {itemLabelText(item)}
-                {#if itemActions}
-                    <span class={classes.labelActions}>
-                        {@render itemActions({ item, index, active: !!item.active, open })}
-                    </span>
-                {/if}
-            </div>
-        {:else if isDropdown(item)}
-            {#if effectiveCollapsed}
-                <Popover
-                    side="right"
-                    sideOffset={8}
-                    {...asProps(item.popover ?? popover)}
-                    open={flyoutKey === iv}
-                    onOpenChange={(open) => handleFlyoutChange(open, iv)}
-                    ui={{
-                        content:
-                            'origin-left data-[state=open]:animate-[zoom-in_150ms_ease] data-[state=closed]:animate-[zoom-out_150ms_ease]'
-                    }}
-                >
-                    <span
-                        role="button"
-                        tabindex={disabled || item.disabled ? undefined : 0}
-                        aria-expanded={flyoutKey === iv}
-                        class={linkClass(item)}
-                        onpointerenter={() => openFlyout(iv)}
-                        onpointerleave={closeFlyoutSoon}
-                        onclickcapture={(e) => {
-                            e.stopPropagation()
-                            openFlyout(iv)
-                        }}
-                        onkeydown={(e) => {
-                            if (e.key !== 'Enter' && e.key !== ' ') return
-                            e.preventDefault()
-                            openFlyout(iv)
-                        }}
-                    >
-                        {@render linkBody(item, index, false, false)}
-                    </span>
-                    {#snippet content()}
-                        <div
-                            role="presentation"
-                            class="min-w-52 p-1"
-                            onpointerenter={() => clearTimeout(flyoutTimer)}
-                            onpointerleave={closeFlyoutSoon}
-                        >
-                            {#if itemContent}
-                                {@render itemContent({ item, index })}
-                            {:else}
-                                <p class={classes.childLabel}>{itemLabelText(item)}</p>
-                                <ul class="grid gap-0.5">
-                                    {#each item.children ?? [] as child, ci (child.href ?? ci)}
-                                        {@render childLink(child)}
-                                    {/each}
-                                </ul>
-                            {/if}
-                        </div>
-                    {/snippet}
-                </Popover>
-            {:else}
-                <button
-                    type="button"
-                    class={linkClass(item)}
-                    aria-expanded={open}
-                    disabled={disabled || item.disabled || !collapsible}
-                    data-state={open ? 'open' : 'closed'}
-                    onclick={() => toggleOpen(iv)}
-                >
-                    {@render linkBody(item, index, open, true)}
-                </button>
-                {#if open}
-                    <ul class={classes.childList} transition:slide={{ duration: 200 }}>
-                        {#each item.children ?? [] as child, ci (child.href ?? ci)}
-                            {@render childLink(child)}
-                        {/each}
-                    </ul>
-                {/if}
-            {/if}
-        {:else}
-            {@render verticalLeaf(item, index)}
-            {#if itemActions}
-                <div class={classes.itemActions}>
-                    {@render itemActions({ item, index, active: !!item.active, open })}
-                </div>
-            {/if}
-        {/if}
-    </li>
+	{@const iv = itemValue(item, groupIndex, index)}
+	{@const kind = resolvedType(item)}
+	{@const open = openSet.has(iv)}
+	<li class={[classes.item, itemActions ? "group/nav-row relative" : ""]}>
+		{#if itemSlot}
+			{@render itemSlot({ item, index, active: !!item.active, open })}
+		{:else if kind === "label"}
+			<div class={classes.label}>
+				{itemLabelText(item)}
+				{#if itemActions}
+					<span class={classes.labelActions}>
+						{@render itemActions({ item, index, active: !!item.active, open })}
+					</span>
+				{/if}
+			</div>
+		{:else if isDropdown(item)}
+			{#if effectiveCollapsed}
+				<Popover
+					side="right"
+					sideOffset={8}
+					{...asProps(item.popover ?? popover)}
+					open={flyoutKey === iv}
+					onOpenChange={(open) => handleFlyoutChange(open, iv)}
+					ui={{
+						content:
+							"origin-left data-[state=open]:animate-[zoom-in_150ms_ease] data-[state=closed]:animate-[zoom-out_150ms_ease]",
+					}}
+				>
+					<span
+						role="button"
+						tabindex={disabled || item.disabled ? undefined : 0}
+						aria-expanded={flyoutKey === iv}
+						class={linkClass(item)}
+						onpointerenter={() => openFlyout(iv)}
+						onpointerleave={closeFlyoutSoon}
+						onclickcapture={(e) => {
+							e.stopPropagation();
+							openFlyout(iv);
+						}}
+						onkeydown={(e) => {
+							if (e.key !== "Enter" && e.key !== " ") return;
+							e.preventDefault();
+							openFlyout(iv);
+						}}
+					>
+						{@render linkBody(item, index, false, false)}
+					</span>
+					{#snippet content()}
+						<div
+							role="presentation"
+							class="min-w-52 p-1"
+							onpointerenter={() => clearTimeout(flyoutTimer)}
+							onpointerleave={closeFlyoutSoon}
+						>
+							{#if itemContent}
+								{@render itemContent({ item, index })}
+							{:else}
+								<p class={classes.childLabel}>{itemLabelText(item)}</p>
+								<ul class="grid gap-0.5">
+									{#each item.children ?? [] as child, ci (child.href ?? ci)}
+										{@render childLink(child)}
+									{/each}
+								</ul>
+							{/if}
+						</div>
+					{/snippet}
+				</Popover>
+			{:else}
+				<button
+					type="button"
+					class={linkClass(item)}
+					aria-expanded={open}
+					disabled={disabled || item.disabled || !collapsible}
+					data-state={open ? "open" : "closed"}
+					onclick={() => toggleOpen(iv)}
+				>
+					{@render linkBody(item, index, open, true)}
+				</button>
+				{#if open}
+					<ul class={classes.childList} transition:slide={{ duration: 200 }}>
+						{#each item.children ?? [] as child, ci (child.href ?? ci)}
+							{@render childLink(child)}
+						{/each}
+					</ul>
+				{/if}
+			{/if}
+		{:else}
+			{@render verticalLeaf(item, index)}
+			{#if itemActions}
+				<div class={classes.itemActions}>
+					{@render itemActions({ item, index, active: !!item.active, open })}
+				</div>
+			{/if}
+		{/if}
+	</li>
 {/snippet}
 
 {#snippet verticalMenu()}
-    <svelte:element
-        this={as}
-        bind:this={ref}
-        aria-label="Navigation"
-        class={classes.root}
-        {...restProps}
-    >
-        <ul bind:this={listEl} class={classes.list}>
-            {#if showHighlight}
-                <div
-                    class={classes.highlight}
-                    style={highlightStyle}
-                    data-navigation-menu-highlight=""
-                    aria-hidden="true"
-                ></div>
-            {/if}
-            {#if listLeading}{@render listLeading()}{/if}
-            {#each groups as group, gi (gi)}
-                {#each group as item, index (itemValue(item, gi, index))}
-                    {@render verticalItem(item, index, gi)}
-                {/each}
-                {#if gi < groups.length - 1}
-                    <li
-                        role="separator"
-                        aria-orientation="horizontal"
-                        class={classes.separator}
-                    ></li>
-                {/if}
-            {/each}
-            {#if listTrailing}{@render listTrailing()}{/if}
-        </ul>
-    </svelte:element>
+	<svelte:element
+		this={as}
+		bind:this={ref}
+		aria-label="Navigation"
+		class={classes.root}
+		{...restProps}
+	>
+		<ul bind:this={listEl} class={classes.list}>
+			{#if showHighlight}
+				<div
+					class={classes.highlight}
+					style={highlightStyle}
+					data-navigation-menu-highlight=""
+					aria-hidden="true"
+				></div>
+			{/if}
+			{#if listLeading}{@render listLeading()}{/if}
+			{#each groups as group, gi (gi)}
+				{#each group as item, index (itemValue(item, gi, index))}
+					{@render verticalItem(item, index, gi)}
+				{/each}
+				{#if gi < groups.length - 1}
+					<li role="separator" aria-orientation="horizontal" class={classes.separator}></li>
+				{/if}
+			{/each}
+			{#if listTrailing}{@render listTrailing()}{/if}
+		</ul>
+	</svelte:element>
 {/snippet}
 
 {#if showDrawer}
-    <Button
-        icon={drawerOpen ? icons.close : icons.menu}
-        variant="ghost"
-        color="surface"
-        aria-label="Toggle navigation"
-        aria-expanded={drawerOpen}
-        onclick={() => (drawerOpen = !drawerOpen)}
-    />
-    <Drawer bind:open={drawerOpen} direction="left" {...drawerProps}>
-        {#snippet body()}
-            <div style="width: {drawerWidth}">
-                {@render verticalMenu()}
-            </div>
-        {/snippet}
-    </Drawer>
-{:else if orientation === 'horizontal'}
-    {@render horizontalMenu()}
+	<Button
+		icon={drawerOpen ? icons.close : icons.menu}
+		variant="ghost"
+		color="surface"
+		aria-label="Toggle navigation"
+		aria-expanded={drawerOpen}
+		onclick={() => (drawerOpen = !drawerOpen)}
+	/>
+	<Drawer bind:open={drawerOpen} direction="left" {...drawerProps}>
+		{#snippet body()}
+			<div style="width: {drawerWidth}">
+				{@render verticalMenu()}
+			</div>
+		{/snippet}
+	</Drawer>
+{:else if orientation === "horizontal"}
+	{@render horizontalMenu()}
 {:else}
-    {@render verticalMenu()}
+	{@render verticalMenu()}
 {/if}