components-svelte 0.1.0

package/dist/components/tree/utils.js

@@ -0,0 +1,86 @@
+const getParentTreeItem = (element, container) => {
+    const findParent = (parent) => {
+        if (!parent || parent === container) {
+            return null;
+        }
+        if (parent.getAttribute("role") === "group") {
+            const folder = parent.previousElementSibling;
+            if (folder instanceof HTMLElement &&
+                folder.getAttribute("role") === "treeitem") {
+                return folder;
+            }
+        }
+        return findParent(parent.parentElement);
+    };
+    return findParent(element.parentElement);
+};
+const getFirstChildTreeItem = (folder) => {
+    const group = folder.nextElementSibling;
+    if (group?.getAttribute("role") === "group") {
+        return group.querySelector('[role="treeitem"]');
+    }
+    return null;
+};
+const isInsideCollapsedGroup = (el, container) => {
+    const checkParent = (parent) => {
+        if (!parent || parent === container) {
+            return false;
+        }
+        if (parent.getAttribute("role") === "group") {
+            const folder = parent.previousElementSibling;
+            if (folder?.getAttribute("aria-expanded") === "false") {
+                return true;
+            }
+        }
+        return checkParent(parent.parentElement);
+    };
+    return checkParent(el.parentElement);
+};
+const getVisibleTreeItems = (container) => Array.from(container.querySelectorAll('[role="treeitem"]')).filter((el) => !isInsideCollapsedGroup(el, container));
+const calculatePaddingLeft = (level) => {
+    return 6 + (level - 1) * 22;
+};
+let treeIdCounter = 0;
+const createTreeId = () => {
+    treeIdCounter += 1;
+    if (typeof globalThis.crypto?.randomUUID === "function") {
+        return globalThis.crypto.randomUUID();
+    }
+    return `${Date.now().toString(36)}-${treeIdCounter.toString(36)}`;
+};
+const getTreeItemLabel = (element) => {
+    const labelSpan = element.querySelector("[title]");
+    return labelSpan?.textContent ?? element.textContent ?? null;
+};
+const getSiblingFolders = (element, container) => {
+    const findParentGroup = (el) => {
+        if (!el || el === container) {
+            return null;
+        }
+        if (el.getAttribute("role") === "group") {
+            return el;
+        }
+        if (el.getAttribute("role") === "tree") {
+            return el;
+        }
+        return findParentGroup(el.parentElement);
+    };
+    const parentGroup = findParentGroup(element.parentElement) ?? container;
+    return Array.from(parentGroup.children).flatMap((child) => {
+        const nested = child.querySelector(':scope > [role="treeitem"][aria-expanded]');
+        const direct = child instanceof HTMLElement &&
+            child.getAttribute("role") === "treeitem" &&
+            child.hasAttribute("aria-expanded")
+            ? child
+            : null;
+        return [nested, direct].filter((el) => el !== null);
+    });
+};
+const updateRovingTabindex = (container, target) => {
+    const allItems = container.querySelectorAll('[role="treeitem"]');
+    // Keep the original deliberate iteration used to maintain one tab stop.
+    allItems.forEach((item) => {
+        item.setAttribute("tabindex", item === target ? "0" : "-1");
+    });
+};
+export { getParentTreeItem, getFirstChildTreeItem, getVisibleTreeItems, calculatePaddingLeft, createTreeId, getTreeItemLabel, getSiblingFolders, updateRovingTabindex, };

package/dist/components/update/Update.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  import { Classes } from "../../constants/selectors";
+  import { copyToClipboard } from "../../utils/copy-to-clipboard";
+  import { cn } from "../../utils/cn";
+  import Icon from "../icon/Icon.svelte";
+
+  export type UpdateRect = {
+    bottom: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    width: number;
+    x: number;
+    y: number;
+  };
+
+  export type UpdateProps = HTMLAttributes<HTMLDivElement> & {
+    id: string;
+    label: string;
+    description?: string;
+    tags?: string[];
+    rss?: {
+      title?: string;
+      description?: string;
+    };
+    children?: string | Snippet;
+    className?: string;
+    ref?: HTMLDivElement | null;
+    "aria-label"?: string;
+    onRegisterHeading?: (id: string, rect: UpdateRect) => void;
+    onUnregisterHeading?: (id: string) => void;
+    hasContext?: boolean;
+    isVisible: boolean;
+    onCopyAnchorLink?: (id: string) => void;
+  };
+
+  let {
+    id,
+    label,
+    description,
+    tags,
+    rss: _rss,
+    children,
+    class: classAttribute,
+    className,
+    ref = $bindable(null),
+    "aria-label": ariaLabel = "Navigate to changelog",
+    onRegisterHeading,
+    onUnregisterHeading,
+    hasContext,
+    isVisible,
+    onCopyAnchorLink,
+    ...restProps
+  }: UpdateProps = $props();
+
+  let rect: UpdateRect | null = $state(null);
+
+  let tagsArray = $derived(
+    [...new Set((tags ?? []).map((tag) => tag.trim()).filter(Boolean))]
+  );
+
+  function measureContent(node: HTMLDivElement) {
+    const measure = () => {
+      const nextRect = node.getBoundingClientRect();
+      rect = {
+        bottom: nextRect.bottom,
+        height: nextRect.height,
+        left: nextRect.left,
+        right: nextRect.right,
+        top: nextRect.top,
+        width: nextRect.width,
+        x: nextRect.x,
+        y: nextRect.y,
+      };
+    };
+
+    // react-use-rect's default resize option is false, so this measures once
+    // when the content element is attached, matching the React component.
+    measure();
+
+    return {
+      destroy() {},
+    };
+  }
+
+  async function copyAnchorLink() {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const result = await copyToClipboard(
+      `${window.location.href.split("#")[0]}#${encodeURIComponent(id)}`
+    );
+
+    if (result === "success") {
+      window.location.hash = encodeURIComponent(id);
+      onCopyAnchorLink?.(id);
+    }
+  }
+
+  // Register the measured content with integrations, replacing React's useRect effect.
+  $effect(() => {
+    if (!(hasContext && isVisible && rect)) {
+      return;
+    }
+
+    const currentId = id;
+    const currentRect = rect;
+    const registerHeading = onRegisterHeading;
+    const unregisterHeading = onUnregisterHeading;
+
+    // Keep callback-owned reactive state from becoming an accidental effect dependency.
+    untrack(() => registerHeading?.(currentId, currentRect));
+
+    return () => {
+      untrack(() => unregisterHeading?.(currentId));
+    };
+  });
+
+  let updateClass = $derived(
+    cn(
+      Classes.Update,
+      "update-container relative flex w-full flex-col items-start gap-2 py-8 lg:flex-row lg:gap-6",
+      classAttribute ?? className
+    )
+  );
+</script>
+
+{#if isVisible}
+  <div class={updateClass} id={id} bind:this={ref} {...restProps}>
+    <div class="group top-(--scroll-mt) flex w-full shrink-0 flex-col items-start justify-start lg:sticky lg:w-[160px]">
+      <div class="absolute">
+        <a
+          aria-label={ariaLabel}
+          class="group/link -ml-10 flex items-center border-0 opacity-0 focus:opacity-100 focus:outline-0 group-hover:opacity-100"
+          href={`#${encodeURIComponent(id)}`}
+        >
+          &#8203;
+          <div class="flex size-6 items-center justify-center rounded-md bg-white text-stone-400 shadow-sm ring-1 ring-stone-400/30 hover:ring-stone-400/60 group-focus/link:border-2 group-focus/link:border-primary dark:bg-background-dark dark:text-white/50 dark:ring-1 dark:ring-stone-700/25 dark:brightness-[1.35] dark:group-focus/link:border-primary-light dark:hover:ring-white/20 dark:hover:brightness-150">
+            <span aria-hidden="true" class="contents">
+              <Icon
+                class="size-3 bg-stone-400 dark:bg-white/50"
+                icon="link"
+                iconType="solid"
+                overrideColor={true}
+                overrideSize={true}
+              />
+            </span>
+          </div>
+        </a>
+      </div>
+
+      <!-- Preserve the React label click behavior; its anchor link remains a separate control. -->
+      <!-- Svelte's click-event suppressions cover React's three equivalent a11y lint suppressions. -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="flex grow-0 cursor-pointer items-center justify-center rounded-lg bg-primary/10 px-2 py-1 font-medium text-primary text-sm dark:text-primary-light"
+        contenteditable="false"
+        data-component-part="update-label"
+        onclick={() => void copyAnchorLink()}
+      >
+        {label}
+      </div>
+
+      {#if tagsArray.length > 0}
+        <div
+          class="mt-3 flex flex-wrap gap-2 px-1 text-secondary text-sm dark:text-secondary-light"
+          data-component-part="update-tag-list"
+        >
+          {#each tagsArray as tag}
+            <span
+              class="inline-block rounded-lg font-medium text-sm"
+              data-component-part="update-tag"
+            >
+              {tag}
+            </span>
+          {/each}
+        </div>
+      {/if}
+
+      {#if description}
+        <div
+          class="wrap-break-word mt-3 max-w-[160px] px-1 text-secondary text-sm dark:text-secondary-light"
+          contenteditable="false"
+          data-component-part="update-description"
+        >
+          {description}
+        </div>
+      {/if}
+    </div>
+
+    <div class="max-w-full flex-1 overflow-hidden px-0.5" use:measureContent>
+      <div class="prose-sm" data-component-part="update-content">
+        {#if children}
+          {#if typeof children === "string"}
+            {children}
+          {:else}
+            {@render children()}
+          {/if}
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/components/update/Update.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type UpdateRect = {
+    bottom: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    width: number;
+    x: number;
+    y: number;
+};
+export type UpdateProps = HTMLAttributes<HTMLDivElement> & {
+    id: string;
+    label: string;
+    description?: string;
+    tags?: string[];
+    rss?: {
+        title?: string;
+        description?: string;
+    };
+    children?: string | Snippet;
+    className?: string;
+    ref?: HTMLDivElement | null;
+    "aria-label"?: string;
+    onRegisterHeading?: (id: string, rect: UpdateRect) => void;
+    onUnregisterHeading?: (id: string) => void;
+    hasContext?: boolean;
+    isVisible: boolean;
+    onCopyAnchorLink?: (id: string) => void;
+};
+declare const Update: import("svelte").Component<UpdateProps, {}, "ref">;
+type Update = ReturnType<typeof Update>;
+export default Update;

package/dist/components/update/index.d.ts

@@ -0,0 +1,4 @@
+import Update from "./Update.svelte";
+export type { UpdateProps, UpdateRect } from "./Update.svelte";
+export { Update };
+export { default } from "./Update.svelte";

package/dist/components/update/index.js

@@ -0,0 +1,3 @@
+import Update from "./Update.svelte";
+export { Update };
+export { default } from "./Update.svelte";

package/dist/components/view/View.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  import { Classes } from "../../constants/selectors";
+  import type { MultiViewItemType } from "../../utils/icon-utils";
+  import { cn } from "../../utils/cn";
+
+  export type ViewProps = HTMLAttributes<HTMLDivElement> & {
+    title: string;
+    /** @internal Pass multiViewItems from useMDXContent() */
+    items: MultiViewItemType[];
+    children?: Snippet;
+    className?: string;
+    ref?: HTMLDivElement | null;
+  };
+
+  let {
+    children,
+    title,
+    items,
+    class: classAttribute,
+    className,
+    ref = $bindable(null),
+    ...restProps
+  }: ViewProps = $props();
+
+  // Svelte's onMount replaces React's useIsomorphicLayoutEffect for the
+  // client-only mounted guard. This preserves the SSR-safe visibility check.
+  let mounted = $state(false);
+
+  onMount(() => {
+    mounted = true;
+  });
+
+  let isVisible = $derived(
+    items.find((item) => item.title === title)?.active ?? false
+  );
+
+  let viewClass = $derived(
+    cn(Classes.MultiViewItem, "prose dark:prose-invert", classAttribute ?? className)
+  );
+</script>
+
+{#if mounted && isVisible}
+  <div bind:this={ref} class={viewClass} {...restProps}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+{/if}

package/dist/components/view/View.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { MultiViewItemType } from "../../utils/icon-utils";
+export type ViewProps = HTMLAttributes<HTMLDivElement> & {
+    title: string;
+    /** @internal Pass multiViewItems from useMDXContent() */
+    items: MultiViewItemType[];
+    children?: Snippet;
+    className?: string;
+    ref?: HTMLDivElement | null;
+};
+declare const View: import("svelte").Component<ViewProps, {}, "ref">;
+type View = ReturnType<typeof View>;
+export default View;

package/dist/components/view/index.d.ts

@@ -0,0 +1,3 @@
+import View from "./View.svelte";
+export type { default as ViewProps } from "./View.svelte";
+export { View };

package/dist/components/view/index.js

@@ -0,0 +1,2 @@
+import View from "./View.svelte";
+export { View };

package/dist/constants/brands.d.ts

@@ -0,0 +1,2 @@
+declare const FONT_AWESOME_BRANDS: string[];
+export { FONT_AWESOME_BRANDS };

package/dist/constants/brands.js

@@ -0,0 +1,4 @@
+const FONT_AWESOME_BRANDS = [
+    "viadeo-square", "supple", "x-twitter", "bootstrap", "weixin", "connectdevelop", "medium", "square-facebook", "ioxhost", "snapchat-ghost", "fonticons", "figma", "reddit-alien", "angrycreative", "imdb", "steam", "square-xing", "d-and-d-beyond", "font-awesome-logo-full", "tumblr", "pied-piper-square", "bandcamp", "red-river", "square-lastfm", "stackpath", "square-hacker-news", "strava", "dropbox", "meta", "microsoft", "creative-commons-nd", "square-tumblr", "dyalog", "squarespace", "google-plus-square", "whatsapp-square", "accusoft", "lastfm", "phoenix-squadron", "square-snapchat", "yelp", "cloudflare", "deviantart", "airbnb", "usps", "envira", "fulcrum", "linux", "foursquare", "bilibili", "drupal", "cc-stripe", "square-youtube", "edge-legacy", "dev", "speakap", "android", "git-square", "ethereum", "shirtsinbulk", "black-tie", "odnoklassniki", "fonticons-fi", "cc-amex", "js", "galactic-senate", "reacteurope", "openid", "gitlab", "sourcetree", "gg", "joget", "weibo", "aws", "sass", "cc-paypal", "superpowers", "rust", "sellcast", "java", "orcid", "tencent-weibo", "trade-federation", "viber", "ello", "wix", "mizuni", "leanpub", "bitbucket", "pagelines", "creative-commons", "github", "viacoin", "freebsd", "rebel", "square-steam", "fedex", "usb", "empire", "simplybuilt", "google-drive", "microblog", "square-figma", "etsy", "bimobject", "app-store-ios", "gripfire", "500px", "speaker-deck", "deskpro", "critical-role", "square-github", "vimeo-v", "stripe-s", "keybase", "yandex-international", "umbraco", "joomla", "google-play", "uniregistry", "d-and-d", "vsco", "kaggle", "cash-app", "hubspot", "confluence", "square-gitlab", "tidal", "youtube-square", "servicestack", "reddit-square", "npm", "square-font-awesome", "tor-browser", "square-whatsapp", "creative-commons-nc", "galactic-republic", "square-instagram", "raspberry-pi", "instagram-square", "tumblr-square", "mastodon", "letterboxd", "square-git", "42-group", "angular", "untappd", "apper", "git-alt", "sitrox", "behance-square", "vk", "vimeo", "discourse", "hotjar", "symfony", "slack-hash", "square-odnoklassniki", "skyatlas", "hacker-news", "files-pinwheel", "flutter", "instagram", "y-combinator", "linktree", "shopify", "webflow", "mendeley", "odysee", "wodu", "fort-awesome-alt", "threads", "square-linkedin", "r-project", "edge", "yammer", "11ty", "bots", "fly", "openai", "safari", "square-behance", "pied-piper-hat", "audible", "yoast", "fort-awesome", "square-dribbble", "python", "pix", "cc-apple-pay", "docker", "git", "blogger", "itch-io", "opensuse", "nfc-symbol", "creative-commons-nc-eu", "schlix", "mailchimp", "neos", "creative-commons-pd", "pinterest-p", "square-letterboxd", "digg", "bitcoin", "whmcs", "delicious", "bluesky", "hackerrank", "vimeo-square", "disqus", "telegram", "cc-discover", "centercode", "erlang", "medrt", "salesforce", "notion", "meetup", "square-vimeo", "wizards-of-the-coast", "markdown", "instalod", "padlet", "goodreads", "dribbble-square", "unity", "creative-commons-sampling-plus", "invision", "mix", "square-x-twitter", "gratipay", "magento", "bluetooth", "houzz", "expeditedssl", "the-red-yeti", "canadian-maple-leaf", "sith", "algolia", "ussunnah", "tex", "sellsy", "jira", "spotify", "intercom", "wolf-pack-battalion", "square-twitter", "flipboard", "google-wallet", "shopware", "jxl", "phoenix-framework", "wirsindhandwerk", "kickstarter-k", "gitlab-square", "cc-jcb", "researchgate", "lyft", "wpressr", "lastfm-square", "octopus-deploy", "periscope", "modx", "kickstarter", "slideshare", "snapchat", "font-awesome", "buy-n-large", "readme", "creative-commons-nc-jp", "themeisle", "html5", "replyd", "cuttlefish", "rockrms", "ravelry", "stubber", "quora", "font-awesome-alt", "monero", "hire-a-helper", "github-alt", "creative-commons-share", "yarn", "cc-visa", "dochub", "github-square", "laravel", "digital-ocean", "xing-square", "earlybirds", "centos", "bluetooth-b", "teamspeak", "square-google-plus", "wpexplorer", "first-order-alt", "ubuntu", "opencart", "pied-piper", "paypal", "suse", "wpbeginner", "deezer", "blogger-b", "rocketchat", "unsplash", "draft2digital", "playstation", "facebook", "amazon-pay", "square-font-awesome-stroke", "amazon", "quinscape", "free-code-camp", "vine", "pinterest", "creative-commons-sa", "css", "creative-commons-pd-alt", "stack-overflow", "page4", "mdb", "osi", "yandex", "whatsapp", "google", "chromecast", "line", "battle-net", "affiliatetheme", "brave", "atlassian", "aviato", "bity", "php", "stumbleupon-circle", "stripe", "jedi-order", "think-peaks", "buromobelexperte", "phabricator", "apple-pay", "artstation", "font-awesome-flag", "scribd", "stack-exchange", "fedora", "jenkins", "studiovinari", "glide", "adn", "square-web-awesome", "pixelfed", "css3-alt", "xing", "medapps", "redhat", "uncharted", "fantasy-flight-games", "facebook-f", "perbyte", "hips", "google-pay", "twitch", "cc-diners-club", "supportnow", "windows", "rev", "btc", "creative-commons-zero", "elementor", "shoelace", "square-pied-piper", "mintbit", "youtube", "accessible-icon", "gg-circle", "lumon-drop", "app-store", "codiepie", "stumbleupon", "nutritionix", "linkedin-in", "jsfiddle", "yahoo", "grav", "firefox-browser", "sticker-mule", "kakao-talk", "goodreads-g", "uber", "sketch", "creative-commons-remix", "itunes-note", "gulp", "keycdn", "diaspora", "cotton-bureau", "reddit", "alipay", "google-scholar", "cloudscale", "buysellads", "steam-symbol", "asymmetrik", "angellist", "wpforms", "linode", "js-square", "guilded", "avianex", "evernote", "codepen", "dribbble", "cc-amazon-pay", "xbox", "trello", "adversal", "dhl", "hornbill", "square-bluesky", "themeco", "square-kickstarter", "google-plus", "contao", "linkedin", "ideal", "mandalorian", "hashnode", "old-republic", "qq", "vaadin", "uikit", "lumon", "react", "creative-commons-by", "square-pinterest", "watchman-monitoring", "optin-monster", "twitter", "less", "dailymotion", "patreon", "swift", "discord", "hacker-news-square", "opera", "gitter", "buffer", "css3", "renren", "square-reddit", "ns8", "sistrix", "rendact", "duolingo", "vuejs", "debian", "facebook-square", "eleventy", "mixcloud", "firstdraft", "slack", "zhihu", "soundcloud", "product-hunt", "wikipedia-w", "space-awesome", "pied-piper-pp", "creative-commons-sampling", "hooli", "first-order", "glide-g", "ember", "gitkraken", "dart-lang", "steam-square", "wsh", "square-threads", "skype", "gofore", "ebay", "cpanel", "wordpress", "square-upwork", "w3c", "korvue", "cloudversify", "square-web-awesome-stroke", "web-awesome", "grunt", "viadeo", "wordpress-simple", "blackberry", "facebook-messenger", "pushed", "hive", "pandora", "amilia", "pied-piper-alt", "nfc-directional", "innosoft", "cloudsmith", "chrome", "forumbee", "snapchat-square", "node-js", "maxcdn", "apple", "pixiv", "napster", "nimblr", "vnv", "waze", "telegram-plane", "odnoklassniki-square", "google-plus-g", "palfed", "screenpal", "weebly", "autoprefixer", "searchengin", "square-viadeo", "pinterest-square", "brave-reverse", "megaport", "typo3", "deploydog", "node", "cc-mastercard", "tiktok", "twitter-square", "dashcube", "get-pocket", "golang", "ups", "medium-m", "behance", "resolving", "internet-explorer", "signal-messenger", "staylinked", "cmplid", "firefox", "flickr", "mixer", "square-js", "upwork", "itunes", "linear",
+];
+export { FONT_AWESOME_BRANDS };

package/dist/constants/index.d.ts

@@ -0,0 +1,6 @@
+declare const MINTLIFY_ICONS_CDN_URL = "https://d3gk2c5xim1je2.cloudfront.net";
+declare const MAX_DEFAULT_VALUE_LENGTH = 50;
+declare const MAX_PREVIEW_BYTES = 50000;
+declare const CHILD_TAB_IDS_ATTRIBUTE = "data-child-tab-ids";
+declare const CHILD_HEADING_IDS_ATTRIBUTE = "data-child-heading-ids";
+export { CHILD_HEADING_IDS_ATTRIBUTE, CHILD_TAB_IDS_ATTRIBUTE, MINTLIFY_ICONS_CDN_URL, MAX_DEFAULT_VALUE_LENGTH, MAX_PREVIEW_BYTES };

package/dist/constants/index.js

@@ -0,0 +1,6 @@
+const MINTLIFY_ICONS_CDN_URL = "https://d3gk2c5xim1je2.cloudfront.net";
+const MAX_DEFAULT_VALUE_LENGTH = 50;
+const MAX_PREVIEW_BYTES = 50_000; // 0.05 mb / 50 kb
+const CHILD_TAB_IDS_ATTRIBUTE = "data-child-tab-ids";
+const CHILD_HEADING_IDS_ATTRIBUTE = "data-child-heading-ids";
+export { CHILD_HEADING_IDS_ATTRIBUTE, CHILD_TAB_IDS_ATTRIBUTE, MINTLIFY_ICONS_CDN_URL, MAX_DEFAULT_VALUE_LENGTH, MAX_PREVIEW_BYTES };

package/dist/constants/selectors.d.ts

@@ -0,0 +1,125 @@
+declare const _classes: {
+    readonly Accordion: "accordion";
+    readonly AccordionGroup: "accordion-group";
+    readonly Callout: "callout";
+    readonly Card: "card";
+    readonly Columns: "columns";
+    readonly CodeBlock: "code-block";
+    readonly CodeBlockIcon: "code-block-icon";
+    readonly CodeGroup: "code-group";
+    readonly Expandable: "expandable";
+    readonly Field: "field";
+    readonly Frame: "frame";
+    readonly Icon: "icon";
+    readonly Mermaid: "mermaid";
+    readonly Step: "step";
+    readonly Steps: "steps";
+    readonly Tab: "tab";
+    readonly Tabs: "tabs";
+    readonly TabIcon: "tab-icon";
+    readonly Update: "update";
+    readonly Tooltip: "tooltip";
+    readonly Panel: "panel";
+    readonly APISection: "api-section";
+    readonly APISectionHeading: "api-section-heading";
+    readonly APISectionHeadingTitle: "api-section-heading-title";
+    readonly APISectionHeadingSubtitle: "api-section-heading-subtitle";
+    readonly OptionDropdown: "option-dropdown";
+    readonly TryitButton: "tryit-button";
+    readonly MethodPill: "method-pill";
+    readonly MethodNavPill: "method-nav-pill";
+    readonly NavTagPill: "nav-tag-pill";
+    readonly NavTagPillText: "nav-tag-pill-text";
+    readonly Anchors: "nav-anchors";
+    readonly Anchor: "nav-anchor";
+    readonly TabsBar: "nav-tabs";
+    readonly TabsBarItem: "nav-tabs-item";
+    readonly MobileNavTabsBarItem: "mobile-nav-tabs-item";
+    readonly TableOfContents: "toc";
+    readonly TableOfContentsItem: "toc-item";
+    readonly Footer: "footer";
+    readonly AdvancedFooter: "advanced-footer";
+    readonly SidebarGroupIcon: "sidebar-group-icon";
+    readonly SidebarGroupHeader: "sidebar-group-header";
+    readonly SidebarTitle: "sidebar-title";
+    readonly SidebarGroup: "sidebar-group";
+    readonly SidebarNavGroupDivider: "sidebar-nav-group-divider";
+    readonly NavBarLink: "navbar-link";
+    readonly TopbarRightContainer: "topbar-right-container";
+    readonly Logo: "nav-logo";
+    readonly PaginationPrev: "pagination-prev";
+    readonly PaginationNext: "pagination-next";
+    readonly PaginationTitle: "pagination-title";
+    readonly FeedbackToolbar: "feedback-toolbar";
+    readonly Eyebrow: "eyebrow";
+    readonly BreadcrumbList: "breadcrumb-list";
+    readonly BreadcrumbItem: "breadcrumb-item";
+    readonly Content: "mdx-content";
+    readonly DropdownTrigger: "nav-dropdown-trigger";
+    readonly DropdownContent: "nav-dropdown-content";
+    readonly DropdownItem: "nav-dropdown-item";
+    readonly DropdownItemTextContainer: "nav-dropdown-item-text-container";
+    readonly DropdownItemTitle: "nav-dropdown-item-title";
+    readonly DropdownItemDescription: "nav-dropdown-item-description";
+    readonly DropdownItemIcon: "nav-dropdown-item-icon";
+    readonly ProductsSelectorTrigger: "nav-dropdown-products-selector-trigger";
+    readonly ProductsSelectorContent: "nav-dropdown-products-selector-content";
+    readonly ProductsSelectorItem: "nav-dropdown-products-selector-item";
+    readonly ProductsSelectorItemTitle: "nav-dropdown-products-selector-item-title";
+    readonly ProductsSelectorItemDescription: "nav-dropdown-products-selector-item-description";
+    readonly ProductsSelectorItemIcon: "nav-dropdown-products-selector-item-icon";
+    readonly Link: "link";
+    readonly AlmondLayout: "almond-layout";
+    readonly AlmondNavBottomSection: "almond-nav-bottom-section";
+    readonly AlmondNavBottomSectionDivider: "almond-nav-bottom-section-divider";
+    readonly ChatAssistantSheet: "chat-assistant-sheet";
+    readonly ChatAssistantSheetHeader: "chat-assistant-sheet-header";
+    readonly ChatAssistantSheetContent: "chat-assistant-sheet-content";
+    readonly ChatAssistantInput: "chat-assistant-input";
+    readonly ChatAssistantFloatingInput: "chat-assistant-floating-input";
+    readonly ChatAssistantSendButton: "chat-assistant-send-button";
+    readonly ChatAssistantDisclaimerText: "chat-assistant-disclaimer-text";
+    readonly ChatAssistantPayloadItem: "chat-assistant-payload-item";
+    readonly StarterQuestionText: "starter-question-text";
+    readonly LoginLink: "login-link";
+    readonly LogoutLink: "logout-link";
+    readonly ContextualFeedbackContainer: "contextual-feedback-container";
+    readonly ContextualFeedbackForm: "contextual-feedback-form";
+    readonly ContextualFeedbackFormTitle: "contextual-feedback-form-title";
+    readonly ContextualFeedbackFormInput: "contextual-feedback-input";
+    readonly ContextualFeedbackFormButton: "contextual-feedback-button";
+    readonly ContextualFeedbackFormSubmitButton: "contextual-feedback-form-submit-button";
+    readonly CodeSnippetFeedbackPopoverContent: "code-snippet-feedback-popover-content";
+    readonly CodeSnippetFeedbackForm: "code-snippet-feedback-form";
+    readonly CodeSnippetFeedbackButton: "code-snippet-feedback-button";
+    readonly CodeSnippetFeedbackTextArea: "code-snippet-feedback-textarea";
+    readonly CodeSnippetFeedbackFormTitle: "code-snippet-feedback-form-title";
+    readonly CodeSnippetFeedbackFormDescription: "code-snippet-feedback-form-description";
+    readonly CodeSnippetFeedbackFormSubmitButton: "code-snippet-feedback-form-submit-button";
+    readonly NotFoundContainer: "not-found-container";
+    readonly NotFoundStatusCode: "not-found-status-code";
+    readonly NotFoundTitle: "not-found-title";
+    readonly NotFoundDescription: "not-found-description";
+    readonly NotFoundLogo: "not-found-logo";
+    readonly NotFoundLogoContainer: "not-found-logo-container";
+    readonly NotFoundMessage: "not-found-message";
+    readonly NotFoundGoBackButton: "not-found-go-back-button";
+    readonly NotFoundGoBackArrow: "not-found-go-back-arrow";
+    readonly NotFoundGoBackText: "not-found-go-back-text";
+    readonly NotFoundRecommendedPagesList: "not-found-recommended-pages-list";
+    readonly NotFoundRecommendedPageLink: "not-found-recommended-page-link";
+    readonly MultiViewItem: "multi-view-item";
+    readonly MultiViewDropdown: "multi-view-dropdown";
+    readonly MultiViewDropdownTrigger: "multi-view-dropdown-trigger";
+    readonly MultiViewDropdownContent: "multi-view-dropdown-content";
+    readonly MultiViewDropdownItem: "multi-view-dropdown-item";
+    readonly Color: "color";
+    readonly ColorRow: "color-row";
+    readonly ColorItem: "color-item";
+    readonly Tile: "tile";
+    readonly Tree: "tree";
+    readonly TreeFolder: "tree-folder";
+    readonly TreeFile: "tree-file";
+};
+declare const Classes: { readonly [K in keyof typeof _classes]: `${(typeof _classes)[K]}`; };
+export { Classes };