negodesign 0.0.11 → 0.0.13

package/dist/components/core/nav/ui/nav-menu.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+    import { Button } from "../../../ui/button/index.js";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import type { NavMenuProps } from "../data/nav-menu";
+    import LightSwitch from "../../../ui/light-switch/light-switch.svelte";
+    import LanguageSwitcher from "../../../ui/language-switcher/language-switcher.svelte";
+    import { t } from "../../../../i18n";
+    import { Login03Icon, User03Icon } from "@hugeicons/core-free-icons";
+    import { useIsMobile } from "../../../../hooks/responsive.svelte";
+    import NavMenuDrawer from "./mobile/nav-menu-drawer.svelte";
+    import MenuLinks from "./menu-links.svelte";
+
+    let {
+        logo,
+        links,
+        actions,
+        linkClass = "",
+        buttonClass = "",
+        align = "LINK_SEPARATED_ACTIONS",
+        onclickButtonLogin,
+        onclickButtonRegister,
+    }: NavMenuProps = $props();
+
+    const responsive = useIsMobile();
+</script>
+
+{#snippet actionButtons()}
+    <div class="flex items-center gap-2">
+        <LightSwitch />
+        <LanguageSwitcher />
+        {#each actions as item (item.label)}
+            <Button
+                variant={item.type === "LINK" ? "ghost" : "outline"}
+                class={item.className}
+                onclick={item.onclick}
+            >
+                {#if item.icon}
+                    <HugeiconsIcon icon={item.icon} />
+                {/if}
+                {item.label}
+            </Button>
+        {/each}
+        {#if onclickButtonRegister}
+            <Button
+                variant="outline"
+                onclick={onclickButtonRegister}
+                class={buttonClass}
+            >
+                <HugeiconsIcon icon={User03Icon} />
+                {$t("label.register")}
+            </Button>
+        {/if}
+        {#if onclickButtonLogin}
+            <Button
+                variant="outline"
+                onclick={onclickButtonLogin}
+                class={buttonClass}
+            >
+                <HugeiconsIcon icon={Login03Icon} />
+                {$t("label.login")}
+            </Button>
+        {/if}
+    </div>
+{/snippet}
+
+<nav class="flex items-center justify-between container py-5 md:px-5">
+    {#if logo}
+        <div>
+            {#if logo.img}
+                <img
+                    src={logo.img}
+                    alt="logo of site"
+                    class={`max-h-50 ${logo.className}`}
+                />
+            {:else if logo.label}
+                <span class={logo.className}>{logo.label}</span>
+            {/if}
+        </div>
+    {:else}
+        <div>
+            <span class="hidden">Logo</span>
+        </div>
+    {/if}
+
+    {#if responsive.isMobile}
+        <NavMenuDrawer {links} {onclickButtonLogin} {onclickButtonRegister} />
+    {:else}
+        {#if align === "LINK_SEPARATED_ACTIONS"}
+            <MenuLinks {links} {linkClass} orientation="horizontal" />
+            {@render actionButtons()}
+        {:else if align === "LINK_INTO_ACTIONS"}
+            <div class="flex items-center gap-2">
+                <MenuLinks {links} {linkClass} orientation="vertical" />
+                {@render actionButtons()}
+            </div>
+        {/if}
+    {/if}
+</nav>

package/dist/components/core/nav/ui/nav-menu.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavMenuProps } from "../data/nav-menu";
+declare const NavMenu: import("svelte").Component<NavMenuProps, {}, "">;
+type NavMenu = ReturnType<typeof NavMenu>;
+export default NavMenu;

package/dist/components/core/nav/ui/nav-user-sidebar.svelte

@@ -2,7 +2,7 @@
   import * as Avatar from "../../../ui/avatar/index.js";
   import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
   import * as Sidebar from "../../../ui/sidebar/index.js";
-  import type { NavUserSidebarItem } from "../data/nav-user-sidebar";
+  import type { NavUserSidebarProps } from "../data/nav-user-sidebar";
   import { useSidebar } from "../../../ui/sidebar/index.js";
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import {
@@ -12,7 +12,7 @@
   } from "@hugeicons/core-free-icons";
   import { t } from "../../../../i18n";
 
-  let { user: userLogged }: { user: NavUserSidebarItem } = $props();
+  let { user: userLogged }: { user: NavUserSidebarProps } = $props();
 
   const sidebar = useSidebar();
 </script>

package/dist/components/core/nav/ui/nav-user-sidebar.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { NavUserSidebarItem } from "../data/nav-user-sidebar";
+import type { NavUserSidebarProps } from "../data/nav-user-sidebar";
 type $$ComponentProps = {
-    user: NavUserSidebarItem;
+    user: NavUserSidebarProps;
 };
 declare const NavUserSidebar: import("svelte").Component<$$ComponentProps, {}, "">;
 type NavUserSidebar = ReturnType<typeof NavUserSidebar>;

package/dist/components/core/panel/CarouselSlot.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import * as Carousel from "../../ui/carousel/index.js";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    isBorderBottom?: boolean;
+    isButtonPreviousAndNext?: boolean;
+    buttonPreviousAndNextClass?: string;
+    containerClass?: string;
+    children: Snippet;
+  };
+
+  const {
+    isBorderBottom = true,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+    containerClass = "",
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class={`relative py-3 px-2 ${isBorderBottom ? "border-b" : ""} ${containerClass}`}
+>
+  <Carousel.Root>
+    <Carousel.Content class="ml-10">
+      {@render children()}
+    </Carousel.Content>
+    {#if isButtonPreviousAndNext}
+      <Carousel.Previous
+        class={`absolute top-1/2 -translate-y-1/2 left-1 mt-0.5 ${buttonPreviousAndNextClass}`}
+      />
+      <Carousel.Next
+        class={`absolute top-1/2 -translate-y-1/2 right-1 mt-0.5 ${buttonPreviousAndNextClass}`}
+      />
+    {/if}
+  </Carousel.Root>
+</div>

package/dist/components/core/panel/CarouselSlot.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type Props = {
+    isBorderBottom?: boolean;
+    isButtonPreviousAndNext?: boolean;
+    buttonPreviousAndNextClass?: string;
+    containerClass?: string;
+    children: Snippet;
+};
+declare const CarouselSlot: import("svelte").Component<Props, {}, "">;
+type CarouselSlot = ReturnType<typeof CarouselSlot>;
+export default CarouselSlot;

package/dist/components/core/panel/LeftHero.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { HugeiconsIcon } from "@hugeicons/svelte";
   import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-  import type { CarouselProps } from "../carousel/data/CarouselModel";
+  import type { LoginCarouselProps } from "../../pages/security/login/types";
   import type { Snippet } from "svelte";
   import Button from "../../ui/button/button.svelte";
   import { t } from "../../../i18n";
@@ -18,7 +18,7 @@
     items = [],
     variant = "DOT",
     autoPlayInterval = 5000,
-  }: Props & CarouselProps = $props();
+  }: Props & LoginCarouselProps = $props();
 
   let currentIndex = $state(0);
   let currentItem = $derived(items[currentIndex] ?? items[0]);
@@ -53,7 +53,7 @@
   </div>
 
   <section class="flex flex-col gap-5">
-    <div class="my-auto max-w-sm md:max-w-md lg:max-w-[430px]">
+    <div class="my-auto max-w-sm md:max-w-md lg:max-w-100">
       {#if currentItem}
         {#key currentIndex}
           <div

package/dist/components/core/panel/LeftHero.svelte.d.ts

@@ -1,11 +1,11 @@
-import type { CarouselProps } from "../carousel/data/CarouselModel";
+import type { LoginCarouselProps } from "../../pages/security/login/types";
 import type { Snippet } from "svelte";
 type Props = {
     title?: string | Snippet;
     variant?: "NUMBER" | "DOT";
     autoPlayInterval?: number;
 };
-type $$ComponentProps = Props & CarouselProps;
+type $$ComponentProps = Props & LoginCarouselProps;
 declare const LeftHero: import("svelte").Component<$$ComponentProps, {}, "">;
 type LeftHero = ReturnType<typeof LeftHero>;
 export default LeftHero;

package/dist/components/core/search/01/Search01.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  /**
+   * Search input with full border (variant 1).
+   * @component
+   */
+</script>
+
+<script lang="ts">
+  import type { SearchItemProps } from "../types";
+  import SearchInputCore from "../shared/SearchInputCore.svelte";
+
+  let { ...restProps }: SearchItemProps = $props();
+</script>
+
+<SearchInputCore {...restProps} variant={1} />

package/dist/components/core/search/01/Search01.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SearchItemProps } from "../types";
+declare const Search01: import("svelte").Component<SearchItemProps, {}, "">;
+type Search01 = ReturnType<typeof Search01>;
+export default Search01;

package/dist/components/core/search/02/Search02.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" module>
+  /**
+   * Search input with bottom border only (variant 2).
+   * @component
+   */
+</script>
+
+<script lang="ts">
+  import type { SearchItemProps } from "../types";
+  import SearchInputCore from "../shared/SearchInputCore.svelte";
+
+  let { ...restProps }: SearchItemProps = $props();
+</script>
+
+<SearchInputCore {...restProps} variant={2} />

package/dist/components/core/search/02/Search02.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SearchItemProps } from "../types";
+declare const Search02: import("svelte").Component<SearchItemProps, {}, "">;
+type Search02 = ReturnType<typeof Search02>;
+export default Search02;

package/dist/components/core/search/SearchInput.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" module>
+  /**
+   * Main Privacy Policy / Terms of Use component.
+   * Allows choosing between two layout variants:
+   * - **1**: Three-column layout with sidebar, content, and TOC (scroll-spy).
+   * - **2**: Simple layout with colored hero and centered content.
+   *
+   * @component
+   * @example
+   * ```svelte
+    * <!-- Variant 1 (default) — docs layout with sidebar -->
+   * <PrivacyPolicyOrTermsOfUse variant={1} data={pageData} />
+   *
+    * <!-- Variant 2 — layout with hero -->
+   * <PrivacyPolicyOrTermsOfUse variant={2} data={pageData} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+    import Search01 from "./01/Search01.svelte";
+    import Search02 from "./02/Search02.svelte";
+    import type { SearchInputProps } from "./types";
+
+  let { variant = 1, ...restProps }: SearchInputProps = $props();
+</script>
+
+{#if variant === 2}
+  <Search02 {...restProps} />
+{:else}
+  <Search01 {...restProps} />
+{/if}

package/dist/components/core/search/SearchInput.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SearchInputProps } from "./types";
+declare const SearchInput: import("svelte").Component<SearchInputProps, {}, "">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/components/core/search/shared/SearchInputCore.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>
+  /**
+   * Reusable search input component used by Search01 and Search02.
+   * Renders a text input with a search icon and submit button.
+   * @component
+   */
+</script>
+
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Search01Icon } from "@hugeicons/core-free-icons";
+  import Button from "../../../ui/button/button.svelte";
+  import { Separator } from "../../../ui/separator/index";
+  import { t } from "../../../../i18n";
+  import type { SearchInputProps } from "../types";
+
+  let { onSubmit, placeholder, variant = 1, buttonClass, inputClass, iconClass }: SearchInputProps = $props();
+
+  let value = $state("");
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") onSubmit?.(value);
+  }
+</script>
+
+<div class="container relative">
+  <div
+    class="mx-auto md:w-11/12 z-10 {variant === 2
+      ? 'border-b'
+      : 'border bg-input rounded-lg shadow'} m-auto"
+  >
+    <div class="flex items-center gap-2 py-1 px-2 w-full md:min-h-15">
+      <div class="items-center gap-2 hidden md:flex">
+        <HugeiconsIcon
+          icon={Search01Icon}
+          size={20}
+          color="currentColor"
+          strokeWidth={1.5}
+          class={iconClass}
+        />
+      </div>
+      <input
+        type="search"
+        bind:value
+        onkeydown={handleKeydown}
+        class="text-sm w-full bg-transparent border-none outline-none focus:outline-none focus:ring-0 focus:border-transparent {inputClass}"
+        placeholder={placeholder || $t("label.search.placeholder")}
+      />
+      <div class="flex gap-1">
+        <Separator class="w-full" orientation="vertical" />
+        <Button
+          onclick={() => onSubmit?.(value)}
+          class={`flex justify-center items-center cursor-pointer ${buttonClass}`}
+        >
+          <HugeiconsIcon
+            icon={Search01Icon}
+            size={15}
+            color="currentColor"
+            strokeWidth={2}
+          />
+          <span class="hidden md:block">{$t("label.search")}</span>
+        </Button>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/core/search/shared/SearchInputCore.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SearchInputProps } from "../types";
+declare const SearchInputCore: import("svelte").Component<SearchInputProps, {}, "">;
+type SearchInputCore = ReturnType<typeof SearchInputCore>;
+export default SearchInputCore;

package/dist/components/core/search/types.d.ts

@@ -0,0 +1,15 @@
+/** Props for the search input component. */
+export interface SearchItemProps {
+    /** Callback fired when the user submits the search. */
+    onSubmit?: (q: string) => void;
+    /** Placeholder text for the input field. */
+    buttonClass?: string;
+    placeholder?: string;
+    inputClass?: string;
+    iconClass?: string;
+}
+/** Extended search input props with a visual variant option. */
+export interface SearchInputProps extends SearchItemProps {
+    /** Visual variant: 1 = full border, 2 = bottom border only. */
+    variant?: 1 | 2;
+}

package/dist/components/core/sidebar/MenuBarSidebar.svelte

@@ -2,30 +2,30 @@
   import * as Sidebar from "../../ui/sidebar/index.js";
   import type { ComponentProps } from "svelte";
 
-  import type { NavUserSidebarItem } from "../nav/data/nav-user-sidebar";
+  import type { NavUserSidebarProps } from "../nav/data/nav-user-sidebar";
   import type {
     NavMenuItem,
-    NavMenuSidebar,
+    NavMenuSidebarProps,
   } from "../nav/data/nav-menu-sidebar";
   import type { Snippet } from "svelte";
+  import NavMenuTopBarSidebar from "../nav/ui/nav-menu-top-bar-sidebar.svelte";
+  import NavMenuBottomSidebar from "../nav/ui/nav-menu-bottom-sidebar.svelte";
+  import NavMenuBarSidebar from "../nav/ui/nav-menu-sidebar.svelte";
   import NavUserSidebar from "../nav/ui/nav-user-sidebar.svelte";
-  import NavMenuBar from "../nav/ui/nav-menu-bar.svelte";
-  import NavMenuBottomBar from "../nav/ui/nav-menu-bottom-bar.svelte";
-  import NavMenuTopBar from "../nav/ui/nav-menu-top-bar.svelte";
   import { t } from "../../../i18n";
 
   /**
-   * Sidebar de navegação com menus, usuário e botões.
-   * @property {NavMenuSidebar[]} menusButtons - Botões do footer (ex: logout)
-   * @property {NavMenuItem[]} menus - Itens de navegação principal
-   * @property {NavUserSidebarItem} user - Dados do usuário logado
+   * Navigation sidebar with menus, user, and buttons.
+   * @property {NavMenuSidebar[]} menusButtons - Footer buttons (e.g., logout)
+   * @property {NavMenuItem[]} menus - Main navigation items
+   * @property {NavUserSidebarItem} user - Logged-in user data
    * @property {Snippet} footer - Snippet customizado do footer
    * @property {Snippet} header - Snippet customizado do header
    */
   type Props = {
-    menusButtons?: NavMenuSidebar[];
+    menusButtons?: NavMenuSidebarProps[];
     menus: NavMenuItem[];
-    user: NavUserSidebarItem;
+    user: NavUserSidebarProps;
     footer?: Snippet;
     header?: Snippet;
   };
@@ -47,7 +47,7 @@
     {#if header}
       {@render header?.()}
     {:else}
-      <NavMenuTopBar
+      <NavMenuTopBarSidebar
         content={{
           title: $t("label.panel"),
           subtitle: $t("label.administrative"),
@@ -56,13 +56,13 @@
     {/if}
   </Sidebar.Header>
   <Sidebar.Content>
-    <NavMenuBar items={menus} />
+    <NavMenuBarSidebar items={menus} />
   </Sidebar.Content>
   <Sidebar.Footer>
     {#if footer}
       {@render footer?.()}
     {:else if menusButtons && menusButtons.length > 0}
-      <NavMenuBottomBar items={menusButtons} class="mt-auto" />
+      <NavMenuBottomSidebar items={menusButtons} class="mt-auto" />
     {/if}
     <NavUserSidebar {user} />
   </Sidebar.Footer>

package/dist/components/core/sidebar/MenuBarSidebar.svelte.d.ts

@@ -1,20 +1,20 @@
 import * as Sidebar from "../../ui/sidebar/index.js";
 import type { ComponentProps } from "svelte";
-import type { NavUserSidebarItem } from "../nav/data/nav-user-sidebar";
-import type { NavMenuItem, NavMenuSidebar } from "../nav/data/nav-menu-sidebar";
+import type { NavUserSidebarProps } from "../nav/data/nav-user-sidebar";
+import type { NavMenuItem, NavMenuSidebarProps } from "../nav/data/nav-menu-sidebar";
 import type { Snippet } from "svelte";
 /**
- * Sidebar de navegação com menus, usuário e botões.
- * @property {NavMenuSidebar[]} menusButtons - Botões do footer (ex: logout)
- * @property {NavMenuItem[]} menus - Itens de navegação principal
- * @property {NavUserSidebarItem} user - Dados do usuário logado
+ * Navigation sidebar with menus, user, and buttons.
+ * @property {NavMenuSidebar[]} menusButtons - Footer buttons (e.g., logout)
+ * @property {NavMenuItem[]} menus - Main navigation items
+ * @property {NavUserSidebarItem} user - Logged-in user data
  * @property {Snippet} footer - Snippet customizado do footer
  * @property {Snippet} header - Snippet customizado do header
  */
 type Props = {
-    menusButtons?: NavMenuSidebar[];
+    menusButtons?: NavMenuSidebarProps[];
     menus: NavMenuItem[];
-    user: NavUserSidebarItem;
+    user: NavUserSidebarProps;
     footer?: Snippet;
     header?: Snippet;
 };

package/dist/components/pages/admin/{ui → 01/ui}/AdminContent.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
 
-  /** Wrapper de conteúdo para páginas admin. */
+  /** Content wrapper for admin pages. */
   type Props = {
     children?: Snippet;
   };

package/dist/components/pages/admin/{ui → 01/ui}/AdminContent.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-/** Wrapper de conteúdo para páginas admin. */
+/** Content wrapper for admin pages. */
 type Props = {
     children?: Snippet;
 };

package/dist/components/pages/admin/{ui → 01/ui}/AdminPanel.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-  import LanguageSwitcher from "../../../ui/language-switcher/language-switcher.svelte";
-  import LightSwitch from "../../../ui/light-switch/light-switch.svelte";
-  import { Separator } from "../../../ui/separator/index.js";
-  import * as Sidebar from "../../../ui/sidebar/index.js";
+  import LanguageSwitcher from "../../../../ui/language-switcher/language-switcher.svelte";
+  import LightSwitch from "../../../../ui/light-switch/light-switch.svelte";
+  import { Separator } from "../../../../ui/separator/index.js";
+  import * as Sidebar from "../../../../ui/sidebar/index.js";
   import type { Snippet } from "svelte";
 
   /**
-   * Layout de admin com sidebar, header e conteúdo.
-   * @property {Snippet} appsidebar - Sidebar da aplicação
-   * @property {Snippet} content - Conteúdo principal
-   * @property {Snippet} breadcrumb - Navegação breadcrumb
+   * Admin layout with sidebar, header, and content.
+   * @property {Snippet} appsidebar - Application sidebar
+   * @property {Snippet} content - Main content
+   * @property {Snippet} breadcrumb - Breadcrumb navigation
    */
   type Props = {
     appsidebar?: Snippet;

package/dist/components/pages/admin/{ui → 01/ui}/AdminPanel.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { Snippet } from "svelte";
 /**
- * Layout de admin com sidebar, header e conteúdo.
- * @property {Snippet} appsidebar - Sidebar da aplicação
- * @property {Snippet} content - Conteúdo principal
- * @property {Snippet} breadcrumb - Navegação breadcrumb
+ * Admin layout with sidebar, header, and content.
+ * @property {Snippet} appsidebar - Application sidebar
+ * @property {Snippet} content - Main content
+ * @property {Snippet} breadcrumb - Breadcrumb navigation
  */
 type Props = {
     appsidebar?: Snippet;

package/dist/components/pages/privacy-policy-or-terms-of-use/01/DocsSidebar.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+  /**
+   * Side navigation sidebar for documentation pages.
+   * Generates links automatically from document sections.
+   * Navigates internally using anchors (#section-id).
+   *
+   * @component
+   * @example
+   * ```svelte
+   * <DocsSidebar sections={data.sections} activeId="introduction" />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import type { DocSection } from "../types";
+
+  let {
+    sections,
+    activeId,
+  }: {
+    /** Document sections (level 1 titles are displayed as groups). */
+    sections: DocSection[];
+    /** ID of the currently visible section (scroll-spy). */
+    activeId?: string;
+  } = $props();
+
+  /** Flattens level 1 sections with their subsections for the sidebar. */
+  const flatSections = $derived(
+    sections.flatMap((section) => {
+      const items = [
+        {
+          id: section.id,
+          label: section.number
+            ? `${section.number}. ${section.title}`
+            : section.title,
+        },
+      ];
+
+      if (section.subsections) {
+        for (const sub of section.subsections) {
+          items.push({
+            id: sub.id,
+            label: sub.number
+              ? `${sub.number}. ${sub.title}`
+              : sub.title,
+          });
+        }
+      }
+
+      return items;
+    }),
+  );
+</script>
+
+<aside class="w-56 shrink-0 hidden lg:block">
+  <nav class="sticky top-8 flex flex-col gap-1 text-sm">
+    {#each flatSections as item (item.id)}
+      <a
+        href="#{item.id}"
+        class="rounded-md px-2 py-1.5 transition-colors {activeId === item.id
+          ? 'bg-muted text-foreground font-medium'
+          : 'text-muted-foreground hover:text-foreground hover:bg-muted/60'}"
+      >
+        {item.label}
+      </a>
+    {/each}
+  </nav>
+</aside>

package/dist/components/pages/privacy-policy-or-terms-of-use/01/DocsSidebar.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { DocSection } from "../types";
+type $$ComponentProps = {
+    /** Document sections (level 1 titles are displayed as groups). */
+    sections: DocSection[];
+    /** ID of the currently visible section (scroll-spy). */
+    activeId?: string;
+};
+declare const DocsSidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsSidebar = ReturnType<typeof DocsSidebar>;
+export default DocsSidebar;