@cronos-labs/ui 0.7.2 → 0.8.0

package/dist/Footer/index.d.ts

@@ -3,6 +3,9 @@ export interface FooterLinkItem {
     target: string;
     external: boolean;
     localizeTarget?: boolean;
+    /** Renders the link greyed and non-interactive, with `badge` beside it if given. */
+    disabled?: boolean;
+    badge?: string;
 }
 export interface FooterLinkGroup {
     group: string;

package/dist/Footer/index.js

@@ -5,7 +5,7 @@ import { buildLocalizedPath } from '../locale/routes.js';
 import { useCurrentLocale } from '../locale/hooks.js';
 import { desktopViewportQuery } from '../tokens.js';
 import { useOptionalBrand } from '../brand/index.js';
-import { FooterColumn, FooterColumnHeading, FooterContainer, FooterCopyright, FooterColumnsGrid, FooterDesktopLocaleSlot, FooterDisclaimer, FooterDisclaimerStack, FooterGrid, FooterLegalButton, FooterLegalDivider, FooterLegalLink as FooterLegalLinkStyled, FooterLegalMeta, FooterLegalNav, FooterLegalText, FooterLocaleSlot, FooterLink as FooterLinkStyled, FooterLinkList, FooterMobileCopyright, FooterMobileDivider, FooterMobileLegalDividerTrack, FooterMobileLegalMeta, FooterMobileLegalNav, FooterShell, FooterWaitlistSlot, FooterWordmark, FooterWordmarkImage, } from './styles.js';
+import { FooterColumn, FooterColumnHeading, FooterContainer, FooterCopyright, FooterColumnsGrid, FooterDesktopLocaleSlot, FooterDisclaimer, FooterDisclaimerStack, FooterGrid, FooterLegalButton, FooterLegalDivider, FooterLegalLink as FooterLegalLinkStyled, FooterLegalMeta, FooterLegalNav, FooterLegalText, FooterLocaleSlot, FooterLink as FooterLinkStyled, FooterLinkBadge, FooterLinkDisabled, FooterLinkList, FooterMobileCopyright, FooterMobileDivider, FooterMobileLegalDividerTrack, FooterMobileLegalMeta, FooterMobileLegalNav, FooterShell, FooterWaitlistSlot, FooterWordmark, FooterWordmarkImage, } from './styles.js';
 const buildFooterHref = (target, locale, localize = true) => {
     if (target.startsWith('/') && localize) {
         return buildLocalizedPath(target, locale);
@@ -38,6 +38,9 @@ export function Footer({ brandWordmarkSrc, columns, content, forceDocumentNaviga
         };
     }, []);
     const renderFooterLink = (link) => {
+        if (link.disabled) {
+            return (_jsxs(FooterLinkDisabled, { "aria-disabled": "true", "aria-label": `${link.label} ${link.badge ?? ''}`.trim(), children: [_jsx("span", { children: link.label }), link.badge ? _jsx(FooterLinkBadge, { children: link.badge }) : null] }, link.target));
+        }
         return (_jsx(FooterLinkStyled, { href: buildFooterHref(link.target, locale, link.localizeTarget ?? true), ...getExternalLinkProps(link.external), children: _jsx("span", { children: link.label }) }, link.target));
     };
     const renderLegalLink = (link) => {

package/dist/Footer/styles.d.ts

@@ -40,6 +40,12 @@ export declare const FooterLinkList: import("styled-components/dist/types").ISty
 export declare const FooterLink: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
+export declare const FooterLinkDisabled: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const FooterLinkBadge: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
 export declare const FooterLegalMeta: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;

package/dist/Footer/styles.js

@@ -172,6 +172,39 @@ export const FooterLink = styled.a `
     font-size: ${({ theme }) => theme.typography.fontSize.body};
   }
 `;
+/* A greyed column link: the link's type, dimmed, with no hover. */
+export const FooterLinkDisabled = styled.span `
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: fit-content;
+  color: ${({ theme }) => theme.colors.ink};
+  font-size: 0.875rem;
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
+  line-height: 1.5;
+  opacity: 0.5;
+  cursor: default;
+
+  ${({ theme }) => theme.mediaQueries.lg} {
+    font-size: ${({ theme }) => theme.typography.fontSize.body};
+  }
+`;
+export const FooterLinkBadge = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 18px;
+  padding: 0 8px;
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  background: rgb(0 0 0 / 0.1);
+  color: currentColor;
+  font-size: 0.5625rem;
+  font-weight: ${({ theme }) => theme.fontWeight.black};
+  letter-spacing: 0.1em;
+  line-height: 1;
+  text-transform: uppercase;
+  white-space: nowrap;
+`;
 export const FooterLegalMeta = styled.div `
   display: flex;
   flex-wrap: wrap;

package/dist/Header/NavDropdown.d.ts

@@ -2,10 +2,14 @@ import type { HeaderPresentationVariant } from './index.js';
 export interface NavDropdownItem {
     key: string;
     label: string;
-    href: string;
+    /** Absent on a disabled item. */
+    href?: string | undefined;
     ariaLabel?: string | undefined;
     external?: boolean | undefined;
     onClick?: ((event: React.MouseEvent<HTMLAnchorElement>) => void) | undefined;
+    /** Greyed and non-interactive, with `badge` beside the label if given. */
+    disabled?: boolean | undefined;
+    badge?: string | undefined;
 }
 interface NavDropdownProps {
     label: string;

package/dist/Header/NavDropdown.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { NavDropdown as NavDropdownRoot, NavDropdownChevron, NavDropdownLabel, NavDropdownList, NavDropdownMenu, NavDropdownOption, NavDropdownTrigger, } from './styles.js';
+import { NavDropdown as NavDropdownRoot, NavDropdownChevron, NavDropdownDisabledOption, NavDropdownLabel, NavDropdownList, NavDropdownMenu, NavDropdownOption, NavDropdownOptionBadge, NavDropdownTrigger, } from './styles.js';
 const buildMenuId = (label) => `header-nav-dropdown-${label.toLowerCase().replace(/\s+/gu, '-')}`;
 export function NavDropdown({ label, items, variant, contrast, }) {
     const [isOpen, setIsOpen] = useState(false);
@@ -32,7 +32,7 @@ export function NavDropdown({ label, items, variant, contrast, }) {
             document.removeEventListener('keydown', handleKeyDown);
         };
     }, [isOpen]);
-    return (_jsxs(NavDropdownRoot, { ref: rootRef, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), children: [_jsxs(NavDropdownTrigger, { type: "button", "$variant": variant, "$contrast": contrast, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, onClick: () => setIsOpen((currentValue) => !currentValue), children: [_jsx(NavDropdownLabel, { "$contrast": contrast, children: label }), _jsx(NavDropdownChevron, { "$open": isOpen, "aria-hidden": "true" })] }), _jsx(NavDropdownMenu, { "$open": isOpen, id: menuId, role: "menu", "aria-label": label, children: _jsx(NavDropdownList, { children: items.map((item) => (_jsx(NavDropdownOption, { role: "menuitem", href: item.href, "aria-label": item.ariaLabel, onClick: (event) => {
+    return (_jsxs(NavDropdownRoot, { ref: rootRef, onMouseEnter: () => setIsOpen(true), onMouseLeave: () => setIsOpen(false), children: [_jsxs(NavDropdownTrigger, { type: "button", "$variant": variant, "$contrast": contrast, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": menuId, onClick: () => setIsOpen((currentValue) => !currentValue), children: [_jsx(NavDropdownLabel, { "$contrast": contrast, children: label }), _jsx(NavDropdownChevron, { "$open": isOpen, "aria-hidden": "true" })] }), _jsx(NavDropdownMenu, { "$open": isOpen, id: menuId, role: "menu", "aria-label": label, children: _jsx(NavDropdownList, { children: items.map((item) => item.disabled ? (_jsxs(NavDropdownDisabledOption, { role: "menuitem", "aria-disabled": "true", "aria-label": `${item.label} ${item.badge ?? ''}`.trim(), children: [item.label, item.badge ? _jsx(NavDropdownOptionBadge, { children: item.badge }) : null] }, item.key)) : (_jsx(NavDropdownOption, { role: "menuitem", href: item.href, "aria-label": item.ariaLabel, onClick: (event) => {
                             setIsOpen(false);
                             item.onClick?.(event);
                         }, ...(item.external ? { target: '_blank', rel: 'noreferrer' } : {}), children: item.label }, item.key))) }) })] }));

package/dist/Header/index.d.ts

@@ -10,6 +10,13 @@ export interface HeaderNavChild {
     label: string;
     route?: string;
     external?: boolean;
+    /**
+     * Renders the child greyed and non-interactive, with `badge` beside it if
+     * given — for a destination that is not open yet. A disabled child needs
+     * no `route`.
+     */
+    disabled?: boolean;
+    badge?: string;
 }
 export interface HeaderNavItem {
     label: string;
@@ -29,6 +36,8 @@ export interface HeaderContent {
 export interface HeaderWaitlistCta {
     href: string;
     onClick?: (event: React.MouseEvent<HTMLAnchorElement>, ctaLocation: 'nav_desktop' | 'nav_mobile') => void;
+    /** Renders the CTA greyed and non-interactive, keeping its place and label. */
+    disabled?: boolean;
 }
 interface HeaderProps {
     /** Overrides the wordmark from `<BrandProvider>`. Optional when one is present. */

package/dist/Header/index.js

@@ -8,11 +8,11 @@ import { desktopViewportQuery } from '../tokens.js';
 import { useOptionalBrand } from '../brand/index.js';
 import { normalizePathname } from './helper.js';
 import { NavDropdown } from './NavDropdown.js';
-import { BrandWordmarkMask, HeaderAction, HeaderActionArrow, HeaderBrandLink, HeaderFrame, HeaderMobileNav, HeaderMobileNavDisabledItem, HeaderMobileNavGroup, HeaderMobileNavGroupChevron, HeaderMobileNavGroupPanel, HeaderMobileNavGroupPanelInner, HeaderMobileNavGroupToggle, HeaderMobileNavSubLink, HeaderMobileNavSubList, HeaderMobileNavLink, HeaderMobileOverlay, HeaderMobileLocaleSlot, HeaderMobileSheet, HeaderMobileSoonBadge, HeaderMobileToggle, HeaderMobileToggleIcon, HeaderMobileWaitlistArrow, HeaderMobileWaitlistLabel, HeaderMobileWaitlistLink, HeaderShell, Nav, NavBadge, NavBadgeLabel, Wordmark, } from './styles.js';
+import { BrandWordmarkMask, HeaderAction, HeaderActionArrow, HeaderBrandLink, HeaderFrame, HeaderMobileNav, HeaderMobileNavDisabledItem, HeaderMobileNavGroup, HeaderMobileNavGroupChevron, HeaderMobileNavGroupPanel, HeaderMobileNavGroupPanelInner, HeaderMobileNavGroupToggle, HeaderMobileNavSubDisabledItem, HeaderMobileNavSubLink, HeaderMobileNavSubList, HeaderMobileNavLink, HeaderMobileOverlay, HeaderMobileLocaleSlot, HeaderMobileSheet, HeaderMobileSoonBadge, HeaderMobileToggle, HeaderMobileToggleIcon, HeaderMobileWaitlistArrow, HeaderMobileWaitlistLabel, HeaderMobileWaitlistLink, HeaderShell, Nav, NavBadge, NavBadgeLabel, Wordmark, } from './styles.js';
 function MobileNavGroup({ label, items }) {
     const [isExpanded, setIsExpanded] = useState(false);
     const panelId = `mobile-nav-group-${label.toLowerCase().replace(/\s+/gu, '-')}`;
-    return (_jsxs(HeaderMobileNavGroup, { children: [_jsxs(HeaderMobileNavGroupToggle, { type: "button", "aria-expanded": isExpanded, "aria-controls": panelId, onClick: () => setIsExpanded((currentValue) => !currentValue), children: [label, _jsx(HeaderMobileNavGroupChevron, { "$open": isExpanded, "aria-hidden": "true" })] }), _jsx(HeaderMobileNavGroupPanel, { "$open": isExpanded, id: panelId, children: _jsx(HeaderMobileNavGroupPanelInner, { "$open": isExpanded, children: _jsx(HeaderMobileNavSubList, { "aria-hidden": !isExpanded, children: items.map((item) => (_jsx(HeaderMobileNavSubLink, { href: item.href, "aria-label": item.ariaLabel, tabIndex: isExpanded ? undefined : -1, onClick: item.onClick, ...(item.external ? { target: '_blank', rel: 'noreferrer' } : {}), children: item.label }, item.key))) }) }) })] }));
+    return (_jsxs(HeaderMobileNavGroup, { children: [_jsxs(HeaderMobileNavGroupToggle, { type: "button", "aria-expanded": isExpanded, "aria-controls": panelId, onClick: () => setIsExpanded((currentValue) => !currentValue), children: [label, _jsx(HeaderMobileNavGroupChevron, { "$open": isExpanded, "aria-hidden": "true" })] }), _jsx(HeaderMobileNavGroupPanel, { "$open": isExpanded, id: panelId, children: _jsx(HeaderMobileNavGroupPanelInner, { "$open": isExpanded, children: _jsx(HeaderMobileNavSubList, { "aria-hidden": !isExpanded, children: items.map((item) => item.disabled ? (_jsxs(HeaderMobileNavSubDisabledItem, { "aria-disabled": "true", "aria-label": `${item.label} ${item.badge ?? ''}`.trim(), children: [item.label, item.badge ? _jsx(HeaderMobileSoonBadge, { children: item.badge }) : null] }, item.key)) : (_jsx(HeaderMobileNavSubLink, { href: item.href, "aria-label": item.ariaLabel, tabIndex: isExpanded ? undefined : -1, onClick: item.onClick, ...(item.external ? { target: '_blank', rel: 'noreferrer' } : {}), children: item.label }, item.key))) }) }) })] }));
 }
 export function Header({ brandWordmarkSrc, content, forceDocumentNavigation = false, homeHref, isExternalHref, mobilePresentation, navItems, presentation, shouldAnimatePresentation, waitlistCta, }) {
     const brand = useOptionalBrand();
@@ -100,8 +100,16 @@ export function Header({ brandWordmarkSrc, content, forceDocumentNavigation = fa
                             const label = item.label;
                             if (item.children && item.children.length > 0) {
                                 const dropdownItems = item.children
-                                    .filter((child) => Boolean(child.route))
+                                    .filter((child) => Boolean(child.route) || child.disabled)
                                     .map((child) => {
+                                    if (child.disabled || !child.route) {
+                                        return {
+                                            key: child.key,
+                                            label: child.label,
+                                            disabled: true,
+                                            badge: child.badge,
+                                        };
+                                    }
                                     const childHref = resolveHref(child.route);
                                     return {
                                         key: child.key,
@@ -129,14 +137,22 @@ export function Header({ brandWordmarkSrc, content, forceDocumentNavigation = fa
                                         : (event) => {
                                             handleInternalNavigation(event, href);
                                         }, ...(item.external ? { target: '_blank', rel: 'noreferrer' } : {}), children: content_ }, item.label));
-                        }) }), _jsx(HeaderMobileToggle, { type: "button", "aria-label": isMobileMenuOpen ? 'Close navigation menu' : 'Open navigation menu', "aria-expanded": isMobileMenuOpen, "aria-controls": "mobile-navigation", onClick: () => setIsMobileMenuOpen((currentValue) => !currentValue), children: _jsx(HeaderMobileToggleIcon, { "$open": isMobileMenuOpen, children: _jsx("span", {}) }) }), waitlistCta ? (_jsxs(HeaderAction, { "$variant": presentation.variant, href: resolveHref(waitlistCta.href), onClick: forceDocumentNavigation
+                        }) }), _jsx(HeaderMobileToggle, { type: "button", "aria-label": isMobileMenuOpen ? 'Close navigation menu' : 'Open navigation menu', "aria-expanded": isMobileMenuOpen, "aria-controls": "mobile-navigation", onClick: () => setIsMobileMenuOpen((currentValue) => !currentValue), children: _jsx(HeaderMobileToggleIcon, { "$open": isMobileMenuOpen, children: _jsx("span", {}) }) }), waitlistCta?.disabled ? (_jsxs(HeaderAction, { as: "span", "$variant": presentation.variant, "$disabled": true, "aria-disabled": "true", children: [content.joinWaitlist, _jsx(HeaderActionArrow, { "aria-hidden": "true", children: "\u2192" })] })) : waitlistCta ? (_jsxs(HeaderAction, { "$variant": presentation.variant, href: resolveHref(waitlistCta.href), onClick: forceDocumentNavigation
                             ? undefined
                             : (event) => handleWaitlistCtaClick(event, 'nav_desktop'), children: [content.joinWaitlist, _jsx(HeaderActionArrow, { "aria-hidden": "true", children: "\u2192" })] })) : null] }), isMobileMenuOpen ? (_jsx(HeaderMobileOverlay, { onClick: () => setIsMobileMenuOpen(false), children: _jsxs(HeaderMobileSheet, { id: "mobile-navigation", role: "dialog", "aria-modal": "true", "aria-label": "Navigation menu", onClick: (event) => event.stopPropagation(), children: [_jsx(HeaderMobileNav, { "aria-label": "Mobile navigation", children: enabledNavItems.map((item) => {
                                 const label = item.label;
                                 if (item.children && item.children.length > 0) {
                                     const groupItems = item.children
-                                        .filter((child) => Boolean(child.route))
+                                        .filter((child) => Boolean(child.route) || child.disabled)
                                         .map((child) => {
+                                        if (child.disabled || !child.route) {
+                                            return {
+                                                key: child.key,
+                                                label: child.label,
+                                                disabled: true,
+                                                badge: child.badge,
+                                            };
+                                        }
                                         const childHref = resolveHref(child.route);
                                         return {
                                             key: child.key,
@@ -165,7 +181,7 @@ export function Header({ brandWordmarkSrc, content, forceDocumentNavigation = fa
                                                 setIsMobileMenuOpen(false);
                                                 handleInternalNavigation(event, href);
                                             }, ...(item.external ? { target: '_blank', rel: 'noreferrer' } : {}), children: [label, item.badge ? (_jsx(HeaderMobileSoonBadge, { children: item.badge })) : null] }, item.label));
-                            }) }), _jsx(HeaderMobileLocaleSlot, { children: _jsx(LocaleSelector, { ariaLabel: content.localeSelectorAriaLabel, forceDocumentNavigation: forceDocumentNavigation, inlineMenu: true, menuPlacement: "down", onLocaleSelect: () => setIsMobileMenuOpen(false) }) }), waitlistCta ? (_jsxs(HeaderMobileWaitlistLink, { href: resolveHref(waitlistCta.href), onClick: forceDocumentNavigation
+                            }) }), _jsx(HeaderMobileLocaleSlot, { children: _jsx(LocaleSelector, { ariaLabel: content.localeSelectorAriaLabel, forceDocumentNavigation: forceDocumentNavigation, inlineMenu: true, menuPlacement: "down", onLocaleSelect: () => setIsMobileMenuOpen(false) }) }), waitlistCta?.disabled ? (_jsxs(HeaderMobileWaitlistLink, { as: "span", "$disabled": true, "aria-disabled": "true", children: [_jsx(HeaderMobileWaitlistLabel, { children: content.waitlistEmailCta }), _jsx(HeaderMobileWaitlistArrow, { "aria-hidden": "true", children: "\u2192" })] })) : waitlistCta ? (_jsxs(HeaderMobileWaitlistLink, { href: resolveHref(waitlistCta.href), onClick: forceDocumentNavigation
                                 ? () => setIsMobileMenuOpen(false)
                                 : (event) => handleWaitlistCtaClick(event, 'nav_mobile'), children: [_jsx(HeaderMobileWaitlistLabel, { children: content.waitlistEmailCta }), _jsx(HeaderMobileWaitlistArrow, { "aria-hidden": "true", children: "\u2192" })] })) : null] }) })) : null] }));
 }

package/dist/Header/styles.d.ts

@@ -77,6 +77,12 @@ export declare const NavDropdownList: import("styled-components/dist/types").ISt
 export declare const NavDropdownOption: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
+export declare const NavDropdownDisabledOption: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const NavDropdownOptionBadge: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
 export declare const NavBadge: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
@@ -87,6 +93,7 @@ export declare const HeaderAction: import("styled-components/dist/types").IStyle
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }, {
     $variant: HeaderPresentationVariant;
+    $disabled?: boolean | undefined;
 }>> & string;
 export declare const HeaderActionArrow: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
@@ -138,6 +145,9 @@ export declare const HeaderMobileNavSubList: import("styled-components/dist/type
 export declare const HeaderMobileNavSubLink: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
+export declare const HeaderMobileNavSubDisabledItem: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
 export declare const HeaderMobileNavDisabledItem: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
@@ -147,9 +157,11 @@ export declare const HeaderMobileSoonBadge: import("styled-components/dist/types
 export declare const HeaderMobileLocaleSlot: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
-export declare const HeaderMobileWaitlistLink: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
+export declare const HeaderMobileWaitlistLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;
+}, {
+    $disabled?: boolean | undefined;
+}>> & string;
 export declare const HeaderMobileWaitlistLabel: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;

package/dist/Header/styles.js

@@ -398,6 +398,43 @@ export const NavDropdownOption = styled.a `
     outline-offset: -3px;
   }
 `;
+/* A greyed dropdown entry: the option's shape without its hover or link
+   semantics, the badge in the disabled nav item's muted pill. */
+export const NavDropdownDisabledOption = styled.span `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 44px;
+  padding: 12px;
+  border-radius: 8px;
+  color: inherit;
+  font-size: 1rem;
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  letter-spacing: -0.02em;
+  line-height: ${({ theme }) => theme.typography.lineHeight.tight};
+  text-align: left;
+  white-space: nowrap;
+  opacity: 0.5;
+  cursor: default;
+`;
+export const NavDropdownOptionBadge = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  height: 18px;
+  padding: 0 8px;
+  border-radius: ${({ theme }) => theme.borderRadius.pill};
+  background: rgb(0 0 0 / 0.08);
+  color: currentColor;
+  font-size: 0.5625rem;
+  font-weight: ${({ theme }) => theme.fontWeight.black};
+  letter-spacing: 0.1em;
+  line-height: ${({ theme }) => theme.typography.lineHeight.tight};
+  text-transform: uppercase;
+  white-space: nowrap;
+`;
 export const NavBadge = styled.span `
   display: inline-flex;
   align-items: center;
@@ -458,6 +495,20 @@ export const HeaderAction = styled.a `
     outline-offset: 3px;
   }
 
+  /* Disabled: rendered as a span, so no hover lift and no focus ring;
+     dimmed in place so the layout does not move when it goes live. */
+  ${({ $disabled }) => $disabled
+    ? `
+    opacity: 0.55;
+    cursor: default;
+
+    &:hover {
+      opacity: 0.55;
+      transform: none;
+    }
+  `
+    : ''}
+
   ${({ theme }) => theme.mediaQueries.lg} {
     display: inline-flex;
     min-width: ${({ theme }) => theme.layout.headerActionWidth};
@@ -698,6 +749,22 @@ export const HeaderMobileNavSubLink = styled.a `
     outline-offset: -4px;
   }
 `;
+/* A greyed entry inside an expanded mobile group: the sub-link's shape,
+   dimmed, with no hover. */
+export const HeaderMobileNavSubDisabledItem = styled.span `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 40px;
+  padding: 8px 12px;
+  color: ${({ theme }) => theme.colors.textDarkSubtle};
+  font-size: ${({ theme }) => theme.typography.fontSize.bodySm};
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+  letter-spacing: -0.02em;
+  line-height: ${({ theme }) => theme.typography.lineHeight.compact};
+  opacity: 0.55;
+  cursor: default;
+`;
 export const HeaderMobileNavDisabledItem = styled.span `
   display: inline-flex;
   align-items: center;
@@ -751,6 +818,8 @@ export const HeaderMobileWaitlistLink = styled.a `
   color: ${({ theme }) => theme.colors.textDarkSubtle};
   text-decoration: none;
   overflow: hidden;
+  opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
 
   &:focus-visible {
     outline: 2px solid ${({ theme }) => theme.colors.ink};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronos-labs/ui",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Shared Header, Footer, Seo, locale and theme primitives for Cronos web properties.",
   "license": "UNLICENSED",
   "type": "module",