@primer/react-brand 0.74.0 → 0.75.0-rc.96de7cef

package/esm/river/RiverAccordion/RiverAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"RiverAccordion.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.tsx"],"sourcesContent":["import React, {createContext, forwardRef, useCallback, useContext, useMemo, useState, useRef, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {TriangleDownIcon, TriangleUpIcon} from '@primer/octicons-react'\n\nimport {Heading, type HeadingProps, Link, Text} from '../..'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\nimport {useId} from '../../hooks/useId'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverAccordion.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\ntype RiverAccordionContextType = {\n  openIndex: number\n  setOpenIndex: (index: number) => void\n  variant: RiverAccordionVariant\n}\n\nconst RiverAccordionContext = createContext<RiverAccordionContextType | null>(null)\n\nconst useRiverAccordionContext = (): RiverAccordionContextType => {\n  const context = useContext(RiverAccordionContext)\n  if (context === null) {\n    throw new Error('useRiverAccordionContext must be used within a RiverAccordion component')\n  }\n  return context\n}\n\ntype RiverAccordionItemContextType = {\n  index: number\n  isOpen: boolean\n  id: string\n}\n\nconst RiverAccordionItemContext = createContext<RiverAccordionItemContextType | null>(null)\n\nconst useRiverAccordionItemContext = (): RiverAccordionItemContextType => {\n  const context = useContext(RiverAccordionItemContext)\n  if (context === null) {\n    throw new Error('useRiverAccordionItemContext must be used within a RiverAccordion component')\n  }\n  return context\n}\n\nexport const RiverAccordionVariants = ['default', 'gridline'] as const\nexport type RiverAccordionVariant = (typeof RiverAccordionVariants)[number]\n\nexport type RiverAccordionProps = React.PropsWithChildren<{\n  align?: 'start' | 'end'\n  variant?: RiverAccordionVariant\n}> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionRoot = forwardRef<HTMLDivElement, RiverAccordionProps>(\n  ({align = 'start', variant = 'default', children, className, ...rest}, forwardedRef) => {\n    const containerRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)\n    const [openIndex, setOpenIndex] = useState(0)\n\n    const accordionComponents = useMemo(() => {\n      return React.Children.toArray(children).reduce<{\n        items: React.ReactElement<RiverAccordionItemProps>[]\n        visuals: React.ReactElement<RiverAccordionVisualProps>[]\n      }>(\n        (acc, child) => {\n          if (!isRiverAccordionItem(child)) {\n            return acc\n          }\n\n          const visualChild = React.Children.toArray(child.props.children).find(isRiverAccordionVisual)\n\n          if (visualChild) {\n            acc.items.push(child)\n            acc.visuals.push(visualChild)\n          }\n\n          return acc\n        },\n        {items: [], visuals: []},\n      )\n    }, [children])\n\n    const items = accordionComponents.items.map((item, index) => React.cloneElement(item, {key: index, index}))\n    const visuals = accordionComponents.visuals.map((visual, index) =>\n      React.cloneElement(visual, {key: index, 'aria-hidden': true}),\n    )\n\n    const contextValue = useMemo(\n      () => ({\n        openIndex,\n        setOpenIndex,\n        variant,\n      }),\n      [openIndex, setOpenIndex, variant],\n    )\n\n    return (\n      <RiverAccordionContext.Provider value={contextValue}>\n        <div\n          ref={containerRef}\n          className={clsx(\n            styles.RiverAccordion,\n            styles[`RiverAccordion__align-${align}`],\n            styles[`RiverAccordion--variant-${variant}`],\n            variant === 'gridline' && gridlineStyles.gridline,\n            className,\n          )}\n          {...rest}\n        >\n          <div className={styles.RiverAccordion__accordionContainer}>{items}</div>\n          <div className={styles.RiverAccordion__visualsContainer}>\n            <div className={styles.RiverAccordion__visualsWrapper}>{visuals}</div>\n          </div>\n        </div>\n      </RiverAccordionContext.Provider>\n    )\n  },\n)\n\nexport type RiverAccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactElement<RiverAccordionHeadingProps | RiverAccordionContentProps>[]\n  index?: number\n}\n\nconst RiverAccordionItem = ({className, index, children, ...props}: RiverAccordionItemProps) => {\n  const {openIndex} = useRiverAccordionContext()\n  const panelId = useId()\n  const isOpen = index === openIndex\n  const panelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (panelRef.current) {\n      // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n      // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n      // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n      panelRef.current.toggleAttribute('inert', !isOpen)\n    }\n  }, [isOpen])\n\n  const itemContextValue = useMemo(\n    () => ({\n      id: panelId,\n      // Index optional for consumers, but always provided by parent\n      index: index as number,\n      isOpen,\n    }),\n    [panelId, index, isOpen],\n  )\n\n  const {heading, content, visual} = useMemo(() => {\n    return React.Children.toArray(children).reduce<{\n      heading: React.ReactElement<RiverAccordionHeadingProps> | null\n      content: React.ReactElement<RiverAccordionContentProps> | null\n      visual: React.ReactElement<RiverAccordionVisualProps> | null\n    }>(\n      (acc, child) => {\n        if (isRiverAccordionHeading(child)) {\n          acc.heading = child\n        }\n\n        if (isRiverAccordionContent(child)) {\n          acc.content = child\n        }\n\n        if (isRiverAccordionVisual(child)) {\n          acc.visual = child\n        }\n\n        return acc\n      },\n      {heading: null, content: null, visual: null},\n    )\n  }, [children])\n\n  if (!heading || !content || !visual) {\n    return null\n  }\n\n  return (\n    <RiverAccordionItemContext.Provider value={itemContextValue}>\n      <div\n        className={clsx(styles.RiverAccordion__item, isOpen && styles['RiverAccordion__item--open'], className)}\n        {...props}\n      >\n        {heading}\n        <div ref={panelRef} className={styles.RiverAccordion__panel} id={panelId} aria-hidden={!isOpen}>\n          {content}\n          {visual}\n        </div>\n      </div>\n    </RiverAccordionItemContext.Provider>\n  )\n}\n\nexport type RiverAccordionHeadingProps = HeadingProps\n\nconst RiverAccordionHeading = ({as = 'h3', children, className, size = '6', ...props}: RiverAccordionHeadingProps) => {\n  const {setOpenIndex} = useRiverAccordionContext()\n  const {id, index, isOpen} = useRiverAccordionItemContext()\n\n  const onClick = useCallback(() => {\n    if (!isOpen) {\n      setOpenIndex(index)\n    }\n  }, [index, isOpen, setOpenIndex])\n\n  return (\n    <Heading size={size} as={as} className={clsx(styles.RiverAccordion__heading, className)} {...props}>\n      <button\n        type=\"button\"\n        className={styles.RiverAccordion__trigger}\n        onClick={onClick}\n        aria-disabled={isOpen}\n        aria-controls={id}\n        aria-expanded={isOpen}\n      >\n        {children}\n        <span aria-hidden=\"true\" className={styles.RiverAccordion__icon}>\n          {isOpen ? <TriangleUpIcon size={24} /> : <TriangleDownIcon size={24} />}\n        </span>\n      </button>\n    </Heading>\n  )\n}\n\nexport type RiverAccordionContentProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionContent = ({className, children, ...props}: RiverAccordionContentProps) => {\n  const childrenWithStyledText = useMemo(() => {\n    const isLink = createComponentTypeGuard(Link)\n    const isText = createComponentTypeGuard(Text)\n\n    return React.Children.toArray(children).map(child => {\n      if (isText(child)) {\n        return React.cloneElement(child, {\n          as: child.props.as ?? 'p',\n          variant: child.props.variant ?? 'muted',\n          size: child.props.size ?? '300',\n        })\n      }\n\n      if (isLink(child)) {\n        return React.cloneElement(child, {\n          variant: child.props.variant ?? 'accent',\n        })\n      }\n\n      return child\n    })\n  }, [children])\n\n  return (\n    <div className={clsx(styles.RiverAccordion__content, className)} {...props}>\n      {childrenWithStyledText}\n    </div>\n  )\n}\n\nexport type RiverAccordionVisualProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionVisual = ({className, ...props}: RiverAccordionVisualProps) => {\n  const {variant} = useRiverAccordionContext()\n\n  return (\n    <div\n      className={clsx(\n        styles.RiverAccordion__visual,\n        variant === 'gridline' && styles['RiverAccordion__visual--has-background'],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement(element) && element.type === componentType\n\nconst isRiverAccordionItem = createComponentTypeGuard(RiverAccordionItem)\nconst isRiverAccordionContent = createComponentTypeGuard(RiverAccordionContent)\nconst isRiverAccordionHeading = createComponentTypeGuard(RiverAccordionHeading)\nconst isRiverAccordionVisual = createComponentTypeGuard(RiverAccordionVisual)\n\n/**\n * Use the RiverAccordion to create collapsible content panels with associated visuals.\n * @see https://primer.style/brand/components/RiverAccordion\n */\nexport const RiverAccordion = Object.assign(RiverAccordionRoot, {\n  Content: RiverAccordionContent,\n  Heading: RiverAccordionHeading,\n  Item: RiverAccordionItem,\n  Visual: RiverAccordionVisual,\n})\n"],"mappings":"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"}
+{"version":3,"file":"RiverAccordion.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.tsx"],"sourcesContent":["import React, {createContext, forwardRef, useCallback, useContext, useMemo, useState, useRef, useEffect} from 'react'\nimport {clsx} from 'clsx'\nimport {TriangleDownIcon, TriangleUpIcon, type Icon} from '@primer/octicons-react'\n\nimport {Heading, type HeadingProps, Link, Text} from '../..'\nimport {useProvidedRefOrCreate} from '../../hooks/useRef'\nimport {useId} from '../../hooks/useId'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** Main Stylesheet (as a CSS Module) */\nimport styles from './RiverAccordion.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\ntype RiverAccordionContextType = {\n  openIndex: number\n  setOpenIndex: (index: number) => void\n  variant: RiverAccordionVariant\n}\n\nconst RiverAccordionContext = createContext<RiverAccordionContextType | null>(null)\n\nconst useRiverAccordionContext = (): RiverAccordionContextType => {\n  const context = useContext(RiverAccordionContext)\n  if (context === null) {\n    throw new Error('useRiverAccordionContext must be used within a RiverAccordion component')\n  }\n  return context\n}\n\ntype RiverAccordionItemContextType = {\n  index: number\n  isOpen: boolean\n  id: string\n}\n\nconst RiverAccordionItemContext = createContext<RiverAccordionItemContextType | null>(null)\n\nconst useRiverAccordionItemContext = (): RiverAccordionItemContextType => {\n  const context = useContext(RiverAccordionItemContext)\n  if (context === null) {\n    throw new Error('useRiverAccordionItemContext must be used within a RiverAccordion component')\n  }\n  return context\n}\n\nexport const RiverAccordionVariants = ['default', 'gridline'] as const\nexport type RiverAccordionVariant = (typeof RiverAccordionVariants)[number]\n\nexport type RiverAccordionProps = React.PropsWithChildren<{\n  align?: 'start' | 'end'\n  variant?: RiverAccordionVariant\n}> &\n  React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionRoot = forwardRef<HTMLDivElement, RiverAccordionProps>(\n  ({align = 'start', variant = 'default', children, className, ...rest}, forwardedRef) => {\n    const containerRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)\n    const [openIndex, setOpenIndex] = useState(0)\n\n    const accordionComponents = useMemo(() => {\n      return React.Children.toArray(children).reduce<{\n        items: React.ReactElement<RiverAccordionItemProps>[]\n        visuals: React.ReactElement<RiverAccordionVisualProps>[]\n      }>(\n        (acc, child) => {\n          if (!isRiverAccordionItem(child)) {\n            return acc\n          }\n\n          const visualChild = React.Children.toArray(child.props.children).find(isRiverAccordionVisual)\n\n          if (visualChild) {\n            acc.items.push(child)\n            acc.visuals.push(visualChild)\n          }\n\n          return acc\n        },\n        {items: [], visuals: []},\n      )\n    }, [children])\n\n    const items = accordionComponents.items.map((item, index) => React.cloneElement(item, {key: index, index}))\n    const visuals = accordionComponents.visuals.map((visual, index) =>\n      React.cloneElement(visual, {key: index, 'aria-hidden': true}),\n    )\n    const activeItemHasBackground =\n      variant === 'gridline' && (accordionComponents.visuals[openIndex]?.props.hasBackground ?? true)\n\n    const contextValue = useMemo(\n      () => ({\n        openIndex,\n        setOpenIndex,\n        variant,\n      }),\n      [openIndex, setOpenIndex, variant],\n    )\n\n    return (\n      <RiverAccordionContext.Provider value={contextValue}>\n        <div\n          ref={containerRef}\n          className={clsx(\n            styles.RiverAccordion,\n            styles[`RiverAccordion__align-${align}`],\n            styles[`RiverAccordion--variant-${variant}`],\n            activeItemHasBackground && styles['RiverAccordion--active-item-has-background'],\n            variant === 'gridline' && gridlineStyles.gridline,\n            className,\n          )}\n          {...rest}\n        >\n          <div className={styles.RiverAccordion__accordionContainer}>{items}</div>\n          <div className={styles.RiverAccordion__visualsContainer}>\n            <div className={styles.RiverAccordion__visualsWrapper}>{visuals}</div>\n          </div>\n        </div>\n      </RiverAccordionContext.Provider>\n    )\n  },\n)\n\nexport type RiverAccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactElement<RiverAccordionHeadingProps | RiverAccordionContentProps>[]\n  index?: number\n}\n\nconst RiverAccordionItem = ({className, index, children, ...props}: RiverAccordionItemProps) => {\n  const {openIndex} = useRiverAccordionContext()\n  const panelId = useId()\n  const isOpen = index === openIndex\n  const panelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (panelRef.current) {\n      // Workaround to avoid React 18 / 19 type mismatches with the `inert` attribute.\n      // This approach won't immediately apply the attribute in pure SSR contexts, only post-hydration\n      // TODO: Move back to JSX when React 19 is fully adopted in Dotcom.\n      panelRef.current.toggleAttribute('inert', !isOpen)\n    }\n  }, [isOpen])\n\n  const itemContextValue = useMemo(\n    () => ({\n      id: panelId,\n      // Index optional for consumers, but always provided by parent\n      index: index as number,\n      isOpen,\n    }),\n    [panelId, index, isOpen],\n  )\n\n  const {heading, content, visual} = useMemo(() => {\n    return React.Children.toArray(children).reduce<{\n      heading: React.ReactElement<RiverAccordionHeadingProps> | null\n      content: React.ReactElement<RiverAccordionContentProps> | null\n      visual: React.ReactElement<RiverAccordionVisualProps> | null\n    }>(\n      (acc, child) => {\n        if (isRiverAccordionHeading(child)) {\n          acc.heading = child\n        }\n\n        if (isRiverAccordionContent(child)) {\n          acc.content = child\n        }\n\n        if (isRiverAccordionVisual(child)) {\n          acc.visual = child\n        }\n\n        return acc\n      },\n      {heading: null, content: null, visual: null},\n    )\n  }, [children])\n\n  if (!heading || !content || !visual) {\n    return null\n  }\n\n  return (\n    <RiverAccordionItemContext.Provider value={itemContextValue}>\n      <div\n        className={clsx(styles.RiverAccordion__item, isOpen && styles['RiverAccordion__item--open'], className)}\n        {...props}\n      >\n        {heading}\n        <div ref={panelRef} className={styles.RiverAccordion__panel} id={panelId} aria-hidden={!isOpen}>\n          {content}\n          {visual}\n        </div>\n      </div>\n    </RiverAccordionItemContext.Provider>\n  )\n}\n\nexport type RiverAccordionHeadingProps = HeadingProps & {\n  leadingVisual?: React.ReactElement | Icon\n}\n\nconst RiverAccordionHeading = ({\n  as = 'h3',\n  children,\n  className,\n  leadingVisual: LeadingVisual,\n  size = '6',\n  ...props\n}: RiverAccordionHeadingProps) => {\n  const {setOpenIndex} = useRiverAccordionContext()\n  const {id, index, isOpen} = useRiverAccordionItemContext()\n\n  const onClick = useCallback(() => {\n    if (!isOpen) {\n      setOpenIndex(index)\n    }\n  }, [index, isOpen, setOpenIndex])\n\n  return (\n    <Heading size={size} as={as} className={clsx(styles.RiverAccordion__heading, className)} {...props}>\n      <button\n        type=\"button\"\n        className={clsx(\n          styles.RiverAccordion__trigger,\n          LeadingVisual && styles['RiverAccordion__trigger--has-leading-visual'],\n        )}\n        onClick={onClick}\n        aria-disabled={isOpen}\n        aria-controls={id}\n        aria-expanded={isOpen}\n      >\n        {LeadingVisual && (\n          <span aria-hidden=\"true\" className={styles.RiverAccordion__leadingVisual}>\n            {typeof LeadingVisual === 'function' ? <LeadingVisual /> : LeadingVisual}\n          </span>\n        )}\n        {LeadingVisual ? <span className={styles.RiverAccordion__headingText}>{children}</span> : children}\n        <span aria-hidden=\"true\" className={styles.RiverAccordion__icon}>\n          {isOpen ? <TriangleUpIcon size={24} /> : <TriangleDownIcon size={24} />}\n        </span>\n      </button>\n    </Heading>\n  )\n}\n\nexport type RiverAccordionContentProps = React.HTMLAttributes<HTMLDivElement>\n\nconst RiverAccordionContent = ({className, children, ...props}: RiverAccordionContentProps) => {\n  const childrenWithStyledText = useMemo(() => {\n    const isLink = createComponentTypeGuard(Link)\n    const isText = createComponentTypeGuard(Text)\n\n    return React.Children.toArray(children).map(child => {\n      if (isText(child)) {\n        return React.cloneElement(child, {\n          as: child.props.as ?? 'p',\n          variant: child.props.variant ?? 'muted',\n          size: child.props.size ?? '300',\n        })\n      }\n\n      if (isLink(child)) {\n        return React.cloneElement(child, {\n          variant: child.props.variant ?? 'accent',\n        })\n      }\n\n      return child\n    })\n  }, [children])\n\n  return (\n    <div className={clsx(styles.RiverAccordion__content, className)} {...props}>\n      {childrenWithStyledText}\n    </div>\n  )\n}\n\nexport type RiverAccordionVisualProps = React.HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Displays a padded background when the parent RiverAccordion uses the gridline variant.\n   * @default true\n   */\n  hasBackground?: boolean\n}\n\nconst RiverAccordionVisual = ({className, hasBackground = true, ...props}: RiverAccordionVisualProps) => {\n  const {variant} = useRiverAccordionContext()\n\n  return (\n    <div\n      className={clsx(\n        styles.RiverAccordion__visual,\n        variant === 'gridline' && hasBackground && styles['RiverAccordion__visual--has-background'],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst createComponentTypeGuard =\n  <T,>(componentType: React.ComponentType<T>) =>\n  (element: unknown): element is React.ReactElement<T> =>\n    React.isValidElement(element) && element.type === componentType\n\nconst isRiverAccordionItem = createComponentTypeGuard(RiverAccordionItem)\nconst isRiverAccordionContent = createComponentTypeGuard(RiverAccordionContent)\nconst isRiverAccordionHeading = createComponentTypeGuard(RiverAccordionHeading)\nconst isRiverAccordionVisual = createComponentTypeGuard(RiverAccordionVisual)\n\n/**\n * Use the RiverAccordion to create collapsible content panels with associated visuals.\n * @see https://primer.style/brand/components/RiverAccordion\n */\nexport const RiverAccordion = Object.assign(RiverAccordionRoot, {\n  Content: RiverAccordionContent,\n  Heading: RiverAccordionHeading,\n  Item: RiverAccordionItem,\n  Visual: RiverAccordionVisual,\n})\n"],"mappings":"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"}

package/esm/river/RiverAccordion/RiverAccordion.module-Cr6Q-qkm.css

@@ -0,0 +1 @@
+.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB{grid-gap:0;grid-template:"visual""accordion"/1fr;gap:0;display:grid;position:relative}@media screen and (width>=63.25rem){.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB{--gap-width:var(--brand-Grid-spacing-column-gap);--column-and-gap-width:calc((100% + var(--gap-width)) / 12);--4-grid-columns:calc(4 * var(--column-and-gap-width));--7-grid-columns-minus-last-gap:calc((7 * var(--column-and-gap-width)) - var(--gap-width));gap:var(--column-and-gap-width);grid-template-rows:auto}.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3{grid-template-columns:var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);grid-template-areas:"accordion visual"}.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ{grid-template-columns:var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);grid-template-areas:"visual accordion"}}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{padding-inline:var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);padding-block:var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);position:relative}@media screen and (width>=63.25rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{--gap-width:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);--half-column:calc(50% - var(--gap-width) / 2);gap:var(--gap-width);align-items:center}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3{grid-template-columns:var(--half-column) var(--half-column);grid-template-areas:"accordion visual"}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ{grid-template-columns:var(--half-column) var(--half-column);grid-template-areas:"visual accordion"}}@media (width>=80rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__RiverAccordion-module__RiverAccordion--active-item-has-background___z_IlG .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{margin-inline:calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));margin-block-start:calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock))}@media screen and (width>=48rem) and (width<=63.24rem){.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB{max-width:618px;margin-inline:auto}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__RiverAccordion-module__RiverAccordion--active-item-has-background___z_IlG .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6{border-radius:0}.Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{grid-area:accordion}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{grid-area:visual}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6{border-radius:var(--base-size-6);grid-template-columns:subgrid;grid-template-rows:subgrid;width:100%;display:grid;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob{opacity:0;width:100%;height:100%;transition:opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default), scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);grid-area:1/1;align-items:center;display:flex;scale:1.05}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>*{border-radius:var(--base-size-6);-o-object-fit:contain;object-fit:contain;width:100%;height:auto;display:block;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob img,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob picture,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob video{border-radius:var(--base-size-6);-o-object-fit:contain;object-fit:contain;width:100%;height:auto;display:block}.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>* img,.Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob>* video{border-radius:var(--base-size-6);-o-object-fit:cover;object-fit:cover;width:100%;height:auto;display:block}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB{padding:var(--base-size-32);background:var(--brand-RiverAccordion-visual-background,var(--brand-color-canvas-subtle));justify-content:center;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB>*{border-radius:var(--base-size-6);justify-content:center;align-items:center;max-width:100%;height:auto;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB img,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB picture,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB video{border-radius:var(--base-size-6);max-width:100%;height:auto}@media screen and (width>=63.25rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--active-item-has-background___z_IlG{grid-template-columns:1fr 1fr;align-items:stretch;gap:0;padding:0}.Primer_Brand__RiverAccordion-module__RiverAccordion--active-item-has-background___z_IlG .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding:var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock) var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);flex-direction:column;justify-content:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3.Primer_Brand__RiverAccordion-module__RiverAccordion--active-item-has-background___z_IlG .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding-inline-end:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap)}.Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ.Primer_Brand__RiverAccordion-module__RiverAccordion--active-item-has-background___z_IlG .Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds{padding-inline-start:var(--brand-RiverAccordion-variant-gridline-spacing-contentGap)}.Primer_Brand__RiverAccordion-module__RiverAccordion--active-item-has-background___z_IlG .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx{margin:0}.Primer_Brand__RiverAccordion-module__RiverAccordion--active-item-has-background___z_IlG .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6{height:100%}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB{padding:var(--base-size-64);justify-content:center;align-items:center}.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB>*,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB img,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB picture,.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6>.Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB video{border-radius:var(--base-size-6)}}:is(.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:first-child) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:first-child,.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(2)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(2),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(3)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(3),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(4)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(4),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(5)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(5),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(6)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(6),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(7)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(7),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(8)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(8),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(9)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(9),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2:nth-child(10)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:nth-child(10),.Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB:not(:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2)) .Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob:first-child){opacity:1;z-index:1;scale:1}.Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds .Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob{clip:rect(0, 0, 0, 0);word-wrap:normal;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX{border-bottom:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-start:var(--base-size-32);position:relative}@media screen and (width<=63.24rem){.Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4 .Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:last-child{border-bottom:none}}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:not(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2) .Primer_Brand__RiverAccordion-module__RiverAccordion__heading___O56M6{color:var(--brand-color-text-muted)}.Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50{color:inherit;cursor:pointer;font:inherit;text-align:left;width:100%;padding:0;padding:var(--base-size-4);margin:0;margin:calc(var(--base-size-4) * -1);background:0 0;border:none;justify-content:space-between;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__trigger--has-leading-visual___NFSnt{gap:var(--base-size-20);justify-content:flex-start}.Primer_Brand__RiverAccordion-module__RiverAccordion__leadingVisual___TZ5da{height:var(--base-size-20);width:var(--base-size-20);flex-shrink:0;justify-content:center;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__leadingVisual___TZ5da>*{width:100%;height:100%}.Primer_Brand__RiverAccordion-module__RiverAccordion__headingText___VHHmp{flex:1;min-width:0}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50{cursor:auto;cursor:initial}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:not(.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2) .Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50:after{content:"";width:100%;height:100%;display:block;position:absolute}.Primer_Brand__RiverAccordion-module__RiverAccordion__panel___Y4GUN{transition:grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default), margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default), padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);grid-template-rows:0fr;margin-block-start:var(--base-size-32);display:grid;overflow-y:clip}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__panel___Y4GUN{grid-template-rows:1fr;margin-block-start:var(--base-size-12);padding-block-end:var(--base-size-32)}.Primer_Brand__RiverAccordion-module__RiverAccordion__content___87sh8{align-items:flex-start;gap:var(--base-size-20);flex-direction:column;min-height:0;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX:has(.Primer_Brand__RiverAccordion-module__RiverAccordion__leadingVisual___TZ5da) .Primer_Brand__RiverAccordion-module__RiverAccordion__content___87sh8{padding-inline-start:calc(var(--base-size-20) + var(--base-size-20))}.Primer_Brand__RiverAccordion-module__RiverAccordion__icon___FMAZH{color:var(--brand-color-text-muted);flex-shrink:0;align-items:center;display:flex}.Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2 .Primer_Brand__RiverAccordion-module__RiverAccordion__icon___FMAZH{color:var(--brand-color-text-default)}

package/esm/river/RiverAccordion/RiverAccordion.module.js

@@ -1,17 +1,21 @@
-import './RiverAccordion.module-BTU_metB.css';var e = {
+import './RiverAccordion.module-Cr6Q-qkm.css';var e = {
 	RiverAccordion: "Primer_Brand__RiverAccordion-module__RiverAccordion___cECsB",
 	"RiverAccordion__align-start": "Primer_Brand__RiverAccordion-module__RiverAccordion__align-start___wbXB3",
 	"RiverAccordion__align-end": "Primer_Brand__RiverAccordion-module__RiverAccordion__align-end___Zq4qJ",
 	"RiverAccordion--variant-gridline": "Primer_Brand__RiverAccordion-module__RiverAccordion--variant-gridline___1SmA4",
-	RiverAccordion__visualsWrapper: "Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6",
-	"RiverAccordion__visual--has-background": "Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB",
+	"RiverAccordion--active-item-has-background": "Primer_Brand__RiverAccordion-module__RiverAccordion--active-item-has-background___z_IlG",
 	RiverAccordion__visualsContainer: "Primer_Brand__RiverAccordion-module__RiverAccordion__visualsContainer___IvQlx",
+	RiverAccordion__visualsWrapper: "Primer_Brand__RiverAccordion-module__RiverAccordion__visualsWrapper___Z8Yr6",
 	RiverAccordion__accordionContainer: "Primer_Brand__RiverAccordion-module__RiverAccordion__accordionContainer___a80ds",
 	RiverAccordion__visual: "Primer_Brand__RiverAccordion-module__RiverAccordion__visual___aIsob",
+	"RiverAccordion__visual--has-background": "Primer_Brand__RiverAccordion-module__RiverAccordion__visual--has-background___JQ9GB",
 	"RiverAccordion__item--open": "Primer_Brand__RiverAccordion-module__RiverAccordion__item--open___YH6K2",
 	RiverAccordion__item: "Primer_Brand__RiverAccordion-module__RiverAccordion__item___SheMX",
 	RiverAccordion__heading: "Primer_Brand__RiverAccordion-module__RiverAccordion__heading___O56M6",
 	RiverAccordion__trigger: "Primer_Brand__RiverAccordion-module__RiverAccordion__trigger___1RM50",
+	"RiverAccordion__trigger--has-leading-visual": "Primer_Brand__RiverAccordion-module__RiverAccordion__trigger--has-leading-visual___NFSnt",
+	RiverAccordion__leadingVisual: "Primer_Brand__RiverAccordion-module__RiverAccordion__leadingVisual___TZ5da",
+	RiverAccordion__headingText: "Primer_Brand__RiverAccordion-module__RiverAccordion__headingText___VHHmp",
 	RiverAccordion__panel: "Primer_Brand__RiverAccordion-module__RiverAccordion__panel___Y4GUN",
 	RiverAccordion__content: "Primer_Brand__RiverAccordion-module__RiverAccordion__content___87sh8",
 	RiverAccordion__icon: "Primer_Brand__RiverAccordion-module__RiverAccordion__icon___FMAZH"

package/esm/river/RiverAccordion/RiverAccordion.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"RiverAccordion.module.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.module.css"],"sourcesContent":[".RiverAccordion {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto auto;\n  grid-template-areas:\n    'visual'\n    'accordion';\n  gap: 0;\n  position: relative;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverAccordion {\n    --gap-width: var(--brand-Grid-spacing-column-gap);\n    --column-and-gap-width: calc((100% + var(--gap-width)) / 12);\n\n    --4-grid-columns: calc(4 * var(--column-and-gap-width));\n    --7-grid-columns-minus-last-gap: calc((7 * var(--column-and-gap-width)) - var(--gap-width));\n\n    grid-template-rows: auto;\n    gap: var(--column-and-gap-width);\n  }\n\n  .RiverAccordion__align-start {\n    grid-template-columns: var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);\n    grid-template-areas: 'accordion visual';\n  }\n\n  .RiverAccordion__align-end {\n    grid-template-columns: var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);\n    grid-template-areas: 'visual accordion';\n  }\n}\n\n/* Gridline variant */\n\n.RiverAccordion--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n  padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverAccordion--variant-gridline {\n    --gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n    --half-column: calc(50% - var(--gap-width) / 2);\n\n    gap: var(--gap-width);\n    align-items: center;\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-start {\n    grid-template-columns: var(--half-column) var(--half-column);\n    grid-template-areas: 'accordion visual';\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-end {\n    grid-template-columns: var(--half-column) var(--half-column);\n    grid-template-areas: 'visual accordion';\n  }\n}\n\n@media (min-width: 80rem) {\n  .RiverAccordion--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n  margin-inline: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));\n  margin-block-start: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock));\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverAccordion {\n    max-width: 618px;\n    margin-inline: auto;\n  }\n\n  .RiverAccordion--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n  border-radius: 0;\n}\n\n.RiverAccordion__accordionContainer {\n  grid-area: accordion;\n}\n\n.RiverAccordion__visualsContainer {\n  grid-area: visual;\n}\n\n.RiverAccordion__visualsWrapper {\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-xlarge);\n  display: grid;\n  grid-template-columns: subgrid;\n  grid-template-rows: subgrid;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual {\n  grid-column: 1;\n  grid-row: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n  scale: 1.05;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n  display: block;\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-xlarge);\n  object-fit: contain;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n  border-radius: var(--brand-borderRadius-medium);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual picture,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual video {\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: inherit;\n  object-fit: contain;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  object-fit: cover;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--base-size-32);\n  background: var(--brand-RiverAccordion-visual-background, var(--brand-color-canvas-subtle));\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > * {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n  max-width: 100%;\n  height: 100%;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) {\n    padding: 0;\n    gap: 0;\n    align-items: stretch;\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__accordionContainer {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock)\n      var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-start:has(.RiverAccordion__visual--has-background)\n    .RiverAccordion__accordionContainer {\n    padding-inline-end: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-end:has(.RiverAccordion__visual--has-background)\n    .RiverAccordion__accordionContainer {\n    padding-inline-start: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n  }\n\n  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {\n    margin: 0;\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {\n    height: 100%;\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n    align-items: center;\n    justify-content: center;\n    padding: var(--base-size-64);\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > *,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n    border-radius: var(--brand-borderRadius-large);\n  }\n}\n\n/* Show the visual when the corresponding accordion item is open */\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(1)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(2)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(2),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(3)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(3),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(4)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(4),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(5)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(5),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(6)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(6),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(7)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(7),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(8)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(8),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(9)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(9),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(10)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(10),\n/* Just in case all accordions are somehow closed, show the first visual */\n.RiverAccordion:not(:has(.RiverAccordion__item--open)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1) {\n  opacity: 1;\n  scale: 1;\n  z-index: 1;\n}\n\n/* Visually hide visuals inside the accordion */\n.RiverAccordion__accordionContainer .RiverAccordion__visual {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  word-wrap: normal;\n  border: 0;\n}\n\n.RiverAccordion__item {\n  position: relative;\n  padding-block-start: var(--base-size-32);\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n@media screen and (max-width: 63.24rem) {\n  .RiverAccordion--variant-gridline .RiverAccordion__item:last-child {\n    border-bottom: none;\n  }\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__heading {\n  color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__trigger {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--base-size-4);\n  margin: calc(var(--base-size-4) * -1);\n}\n\n.RiverAccordion__item--open .RiverAccordion__trigger {\n  cursor: initial;\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__trigger::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.RiverAccordion__panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n  margin-block-start: var(--base-size-32);\n  overflow-y: clip;\n}\n\n.RiverAccordion__item--open .RiverAccordion__panel {\n  margin-block-start: var(--base-size-12);\n  padding-block-end: var(--base-size-32);\n  grid-template-rows: 1fr;\n}\n\n.RiverAccordion__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  min-height: 0;\n  gap: var(--base-size-20);\n}\n\n.RiverAccordion__icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__item--open .RiverAccordion__icon {\n  color: var(--brand-color-text-default);\n}\n"],"mappings":""}
+{"version":3,"file":"RiverAccordion.module.js","names":[],"sources":["../../../src/river/RiverAccordion/RiverAccordion.module.css"],"sourcesContent":[".RiverAccordion {\n  display: grid;\n  grid-template-columns: 1fr;\n  grid-template-rows: auto auto;\n  grid-template-areas:\n    'visual'\n    'accordion';\n  gap: 0;\n  position: relative;\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverAccordion {\n    --gap-width: var(--brand-Grid-spacing-column-gap);\n    --column-and-gap-width: calc((100% + var(--gap-width)) / 12);\n\n    --4-grid-columns: calc(4 * var(--column-and-gap-width));\n    --7-grid-columns-minus-last-gap: calc((7 * var(--column-and-gap-width)) - var(--gap-width));\n\n    grid-template-rows: auto;\n    gap: var(--column-and-gap-width);\n  }\n\n  .RiverAccordion__align-start {\n    grid-template-columns: var(--4-grid-columns) var(--7-grid-columns-minus-last-gap);\n    grid-template-areas: 'accordion visual';\n  }\n\n  .RiverAccordion__align-end {\n    grid-template-columns: var(--7-grid-columns-minus-last-gap) var(--4-grid-columns);\n    grid-template-areas: 'visual accordion';\n  }\n}\n\n/* Gridline variant */\n\n.RiverAccordion--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n  padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverAccordion--variant-gridline {\n    --gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n    --half-column: calc(50% - var(--gap-width) / 2);\n\n    gap: var(--gap-width);\n    align-items: center;\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-start {\n    grid-template-columns: var(--half-column) var(--half-column);\n    grid-template-areas: 'accordion visual';\n  }\n\n  .RiverAccordion--variant-gridline.RiverAccordion__align-end {\n    grid-template-columns: var(--half-column) var(--half-column);\n    grid-template-areas: 'visual accordion';\n  }\n}\n\n@media (min-width: 80rem) {\n  .RiverAccordion--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverAccordion--active-item-has-background .RiverAccordion__visualsContainer {\n  margin-inline: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));\n  margin-block-start: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock));\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverAccordion {\n    max-width: 618px;\n    margin-inline: auto;\n  }\n\n  .RiverAccordion--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverAccordion--active-item-has-background .RiverAccordion__visualsWrapper {\n  border-radius: 0;\n}\n\n.RiverAccordion__accordionContainer {\n  grid-area: accordion;\n}\n\n.RiverAccordion__visualsContainer {\n  grid-area: visual;\n}\n\n.RiverAccordion__visualsWrapper {\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--base-size-6);\n  display: grid;\n  grid-template-columns: subgrid;\n  grid-template-rows: subgrid;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual {\n  grid-column: 1;\n  grid-row: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  opacity: 0;\n  scale: 1.05;\n  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    scale var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {\n  display: block;\n  width: 100%;\n  height: auto;\n  overflow: hidden;\n  border-radius: var(--base-size-6);\n  object-fit: contain;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual picture,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual video {\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: var(--base-size-6);\n  object-fit: contain;\n}\n\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * img,\n.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * video {\n  display: block;\n  width: 100%;\n  height: auto;\n  border-radius: var(--base-size-6);\n  object-fit: cover;\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--base-size-32);\n  background: var(--brand-RiverAccordion-visual-background, var(--brand-color-canvas-subtle));\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > * {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--base-size-6);\n}\n\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--base-size-6);\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverAccordion--active-item-has-background {\n    padding: 0;\n    gap: 0;\n    align-items: stretch;\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .RiverAccordion--active-item-has-background .RiverAccordion__accordionContainer {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    padding: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock)\n      var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);\n  }\n\n  .RiverAccordion__align-start.RiverAccordion--active-item-has-background .RiverAccordion__accordionContainer {\n    padding-inline-end: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n  }\n\n  .RiverAccordion__align-end.RiverAccordion--active-item-has-background .RiverAccordion__accordionContainer {\n    padding-inline-start: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);\n  }\n\n  .RiverAccordion--active-item-has-background .RiverAccordion__visualsContainer {\n    margin: 0;\n  }\n\n  .RiverAccordion--active-item-has-background .RiverAccordion__visualsWrapper {\n    height: 100%;\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {\n    align-items: center;\n    justify-content: center;\n    padding: var(--base-size-64);\n  }\n\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > *,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,\n  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {\n    border-radius: var(--base-size-6);\n  }\n}\n\n/* Show the visual when the corresponding accordion item is open */\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(1)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(2)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(2),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(3)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(3),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(4)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(4),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(5)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(5),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(6)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(6),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(7)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(7),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(8)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(8),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(9)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(9),\n.RiverAccordion:has(.RiverAccordion__item--open:nth-child(10)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(10),\n/* Just in case all accordions are somehow closed, show the first visual */\n.RiverAccordion:not(:has(.RiverAccordion__item--open)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1) {\n  opacity: 1;\n  scale: 1;\n  z-index: 1;\n}\n\n/* Visually hide visuals inside the accordion */\n.RiverAccordion__accordionContainer .RiverAccordion__visual {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  word-wrap: normal;\n  border: 0;\n}\n\n.RiverAccordion__item {\n  position: relative;\n  padding-block-start: var(--base-size-32);\n  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n@media screen and (max-width: 63.24rem) {\n  .RiverAccordion--variant-gridline .RiverAccordion__item:last-child {\n    border-bottom: none;\n  }\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__heading {\n  color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__trigger {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  margin: 0;\n  padding: 0;\n  text-align: left;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--base-size-4);\n  margin: calc(var(--base-size-4) * -1);\n}\n\n.RiverAccordion__trigger--has-leading-visual {\n  gap: var(--base-size-20);\n  justify-content: flex-start;\n}\n\n.RiverAccordion__leadingVisual {\n  align-items: center;\n  display: flex;\n  flex-shrink: 0;\n  height: var(--base-size-20);\n  justify-content: center;\n  width: var(--base-size-20);\n}\n\n.RiverAccordion__leadingVisual > * {\n  height: 100%;\n  width: 100%;\n}\n\n.RiverAccordion__headingText {\n  flex: 1;\n  min-width: 0;\n}\n\n.RiverAccordion__item--open .RiverAccordion__trigger {\n  cursor: initial;\n}\n\n.RiverAccordion__item:not(.RiverAccordion__item--open) .RiverAccordion__trigger::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.RiverAccordion__panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    margin-block-start var(--brand-animation-duration-default) var(--brand-animation-easing-default),\n    padding-block-end var(--brand-animation-duration-default) var(--brand-animation-easing-default);\n  margin-block-start: var(--base-size-32);\n  overflow-y: clip;\n}\n\n.RiverAccordion__item--open .RiverAccordion__panel {\n  margin-block-start: var(--base-size-12);\n  padding-block-end: var(--base-size-32);\n  grid-template-rows: 1fr;\n}\n\n.RiverAccordion__content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  min-height: 0;\n  gap: var(--base-size-20);\n}\n\n.RiverAccordion__item:has(.RiverAccordion__leadingVisual) .RiverAccordion__content {\n  padding-inline-start: calc(var(--base-size-20) + var(--base-size-20));\n}\n\n.RiverAccordion__icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--brand-color-text-muted);\n}\n\n.RiverAccordion__item--open .RiverAccordion__icon {\n  color: var(--brand-color-text-default);\n}\n"],"mappings":""}

package/lib/Hero/sub-components/HeroLabel.d.ts

@@ -3,5 +3,6 @@ import type { BaseProps } from '../../component-helpers';
 export type HeroLabelProps = Omit<TextProps, 'as' | 'ref' | 'animate'> & Omit<BaseProps<HTMLSpanElement>, 'animate'> & {
     animate?: boolean;
     animationDelay?: number;
+    initialText?: string;
 };
 export declare const HeroLabel: import("react").ForwardRefExoticComponent<Omit<HeroLabelProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/SubdomainNavBar/NavigationVisbilityObserver.d.ts

@@ -1,5 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { BaseProps } from '../component-helpers';
-type NavigationVisibilityObserverProps = PropsWithChildren<BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>>;
+type NavigationVisibilityObserverProps = PropsWithChildren<BaseProps<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement> & {
+    overflowMenuLabel: string;
+}>;
 export declare const NavigationVisbilityObserver: React.ForwardRefExoticComponent<Omit<NavigationVisibilityObserverProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export {};

package/lib/SubdomainNavBar/SubdomainNavBar.d.ts

@@ -3,16 +3,26 @@ import React, { PropsWithChildren } from 'react';
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css';
-export type SubdomainNavBarProps = {
+export type SubdomainNavBarMenuLabels = {
     /**
-     * Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,
-     * `SubdomainNavBar.SecondaryAction` and `SubdomainNavBar.Search`
+     * Visible and accessible label for the closed narrow menu control.
      */
-    children?: React.ReactNode | React.ReactElement<SubdomainNavBarLinkProps> | React.ReactElement<SearchProps> | React.ReactElement<CTAActionProps>;
+    menuLabel: string;
     /**
-     * Forward a custom HTML class attribute
+     * Visible and accessible label for the open narrow menu control.
      */
-    className?: string;
+    closeLabel: string;
+    /**
+     * Visible and accessible label for the desktop overflow menu control.
+     */
+    overflowMenuLabel: string;
+};
+export type SubdomainNavBarProps = Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+    /**
+     * Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,
+     * `SubdomainNavBar.SecondaryAction` and `SubdomainNavBar.Search`
+     */
+    children?: React.ReactNode | React.ReactElement<SubdomainNavBarLinkProps> | React.ReactElement<SubdomainNavBarSearchProps> | React.ReactElement<CTAActionProps>;
     /**
      * Fixes the navigation bar to the top of the viewport. Defaults to `true`.
      */
@@ -22,7 +32,15 @@ export type SubdomainNavBarProps = {
      */
     fullWidth?: boolean;
     /**
-     * The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assisitive technologies.
+     * Optional React element rendered after the navigation links.
+     */
+    leadingComponent?: React.ReactElement;
+    /**
+     * Optional React element rendered after the actions.
+     */
+    trailingComponent?: React.ReactElement;
+    /**
+     * The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assistive technologies.
      */
     title: string;
     /**
@@ -37,41 +55,160 @@ export type SubdomainNavBarProps = {
      * When the menu is opened or closed on narrow viewports, this callback is called with the new open state.
      */
     onNarrowMenuToggle?: (isOpen: boolean) => void;
+    /**
+     * Customizable visible and accessible menu labels.
+     */
+    menuLabels?: Partial<SubdomainNavBarMenuLabels>;
+    /**
+     * ID of the element that receives focus when the skip-to-content link is activated.
+     * Defaults to the first rendered `main` element that is not hidden from assistive technologies.
+     */
+    skipToContentTargetId?: string;
+};
+export type SubdomainNavBarHandle = HTMLElement & {
+    openSearch: () => void;
+    closeSearch: () => void;
 };
-declare function Root({ children, className, fixed, fullWidth, logoHref, title, titleHref, onNarrowMenuToggle, ...rest }: SubdomainNavBarProps): import("react/jsx-runtime").JSX.Element;
 export type SubdomainNavBarLinkProps = {
     href: string;
     isExternal?: boolean;
-    'data-navitemid'?: string;
 } & React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
-declare function Link({ href, className, children, isExternal, ...rest }: PropsWithChildren<SubdomainNavBarLinkProps>): import("react/jsx-runtime").JSX.Element;
+declare function Link({ href, className, children, isExternal, 'aria-current': ariaCurrent, 'aria-hidden': ariaHidden, tabIndex, ...rest }: PropsWithChildren<SubdomainNavBarLinkProps>): import("react/jsx-runtime").JSX.Element;
 export type SubdomainNavBarSearchResultProps = {
     title: string;
     description: string;
     url: string;
     date: string;
     category?: string;
+    group?: string;
+    isExternal?: boolean;
+};
+export type SubdomainNavBarSearchResultGroupProps = {
+    title: string;
+    results: SubdomainNavBarSearchResultProps[];
 };
-type HandlerEvent = MouseEvent | TouchEvent | FocusEvent;
-type SearchProps = {
+export type SubdomainNavBarSearchResults = SubdomainNavBarSearchResultProps[] | SubdomainNavBarSearchResultGroupProps[];
+export type SubdomainNavBarSearchLabels = {
+    /**
+     * Accessible label for the search input. Defaults to "Search".
+     */
+    searchLabel: string;
+    /**
+     * Visible and accessible label for the close action. Defaults to "Close".
+     */
+    closeLabel: string;
+    /**
+     * Accessible label for an untitled search result group. Defaults to "Results".
+     */
+    resultsLabel: string;
+    /**
+     * Accessible label for grouped search results without a search term. Defaults to "Search results".
+     */
+    searchResultsLabel: string;
+    /**
+     * Formats the default search placeholder and dialog label using the navigation title.
+     */
+    formatSearchWithTitle: (title: string) => string;
+    /**
+     * Formats the accessible label for the responsive search trigger.
+     */
+    formatSearchTrigger: (placeholder: string) => string;
+    /**
+     * Formats the visible heading for ungrouped search results.
+     */
+    formatResultsHeading: (searchTerm: string) => string;
+    /**
+     * Formats the accessible label for grouped search results.
+     */
+    formatResultsLabel: (searchTerm: string) => string;
+    /**
+     * Formats the search result count announcement.
+     */
+    formatSuggestions: (count: number) => string;
+};
+export type SubdomainNavBarSearchProps = {
     onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    ref: React.RefObject<HTMLInputElement>;
     active?: boolean;
+    className?: string;
     title?: string;
-    handlerFn?: (event: HandlerEvent) => void;
-    autoComplete?: boolean;
-    searchResults?: SubdomainNavBarSearchResultProps[];
+    onSearchOpen?: () => void;
+    onSearchClose?: () => void;
+    /**
+     * Placeholder text shown in the search trigger and the opened search input.
+     */
+    placeholder?: string;
+    /**
+     * Optional keyboard shortcut hint shown in the search trigger. Pass an empty string to hide it.
+     */
+    shortcutLabel?: string;
+    /**
+     * Optional global keyboard shortcut that opens the search dialog. Omit or pass `false` to disable it.
+     * Supports single keys and modifier combinations, such as `/` or `Command+Option+k`.
+     */
+    keyboardShortcut?: string | false;
+    searchResults?: SubdomainNavBarSearchResults;
     searchTerm?: string;
+    /**
+     * Customizable visible and accessible search text. Unspecified labels use the English defaults.
+     */
+    labels?: Partial<SubdomainNavBarSearchLabels>;
 };
 type CTAActionProps = {
     href: string;
 } & React.HTMLAttributes<HTMLAnchorElement>;
 declare function PrimaryAction({ children, href, ...rest }: PropsWithChildren<CTAActionProps>): import("react/jsx-runtime").JSX.Element;
 declare function SecondaryAction({ children, href, ...rest }: PropsWithChildren<CTAActionProps>): import("react/jsx-runtime").JSX.Element;
-export declare const SubdomainNavBar: typeof Root & {
+export declare const SubdomainNavBar: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "title" | "children"> & {
+    /**
+     * Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,
+     * `SubdomainNavBar.SecondaryAction` and `SubdomainNavBar.Search`
+     */
+    children?: React.ReactNode | React.ReactElement<SubdomainNavBarLinkProps> | React.ReactElement<SubdomainNavBarSearchProps> | React.ReactElement<CTAActionProps>;
+    /**
+     * Fixes the navigation bar to the top of the viewport. Defaults to `true`.
+     */
+    fixed?: boolean;
+    /**
+     * Fill the maximum width of the parent container. Defaults to `false`.
+     */
+    fullWidth?: boolean;
+    /**
+     * Optional React element rendered after the navigation links.
+     */
+    leadingComponent?: React.ReactElement;
+    /**
+     * Optional React element rendered after the actions.
+     */
+    trailingComponent?: React.ReactElement;
+    /**
+     * The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assistive technologies.
+     */
+    title: string;
+    /**
+     * The URL for the site. Typically used to link the titleText prop value to the site root.
+     */
+    titleHref?: string;
+    /**
+     * Optionally change the URL of the logo
+     */
+    logoHref?: string;
+    /**
+     * When the menu is opened or closed on narrow viewports, this callback is called with the new open state.
+     */
+    onNarrowMenuToggle?: (isOpen: boolean) => void;
+    /**
+     * Customizable visible and accessible menu labels.
+     */
+    menuLabels?: Partial<SubdomainNavBarMenuLabels>;
+    /**
+     * ID of the element that receives focus when the skip-to-content link is activated.
+     * Defaults to the first rendered `main` element that is not hidden from assistive technologies.
+     */
+    skipToContentTargetId?: string;
+} & React.RefAttributes<SubdomainNavBarHandle>> & {
     Link: typeof Link;
-    Search: React.ForwardRefExoticComponent<Omit<SearchProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Search: React.ForwardRefExoticComponent<SubdomainNavBarSearchProps & React.RefAttributes<HTMLInputElement>>;
     PrimaryAction: typeof PrimaryAction;
     SecondaryAction: typeof SecondaryAction;
     testIds: {

package/lib/SubdomainNavBar/SubdomainNavBarLinkContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type SubdomainNavBarLinkContextValue = {
+    isOverflowed?: boolean;
+    onLinkClick?: React.MouseEventHandler<HTMLAnchorElement>;
+};
+export declare const SubdomainNavBarLinkContext: React.Context<SubdomainNavBarLinkContextValue>;
+export declare function useSubdomainNavBarLinkContext(): SubdomainNavBarLinkContextValue;
+export {};

package/lib/SubdomainNavBar/useSearchKeyboardShortcut.d.ts

@@ -0,0 +1,7 @@
+type UseSearchKeyboardShortcutOptions = {
+    disabled: boolean;
+    keyboardShortcut?: string | false;
+    onTrigger: () => void;
+};
+export declare function useSearchKeyboardShortcut({ disabled, keyboardShortcut, onTrigger, }: UseSearchKeyboardShortcutOptions): void;
+export {};

package/lib/SubdomainNavBar/useSearchResults.d.ts

@@ -0,0 +1,23 @@
+import { type KeyboardEvent, type RefObject } from 'react';
+import type { SubdomainNavBarSearchResultProps, SubdomainNavBarSearchResults } from './SubdomainNavBar';
+export type NormalizedSearchResultGroup = {
+    title?: string;
+    results: Array<{
+        result: SubdomainNavBarSearchResultProps;
+        index: number;
+    }>;
+};
+type UseSearchResultsOptions = {
+    dialogRef: RefObject<HTMLDialogElement | null>;
+    searchResults?: SubdomainNavBarSearchResults;
+};
+export declare function useSearchResults({ dialogRef, searchResults }: UseSearchResultsOptions): {
+    activeDescendant: number;
+    handleSearchResultKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    hasGroupedSearchResults: boolean;
+    hasSearchResults: boolean;
+    normalizedSearchResultGroups: NormalizedSearchResultGroup[];
+    resetActiveDescendant: () => void;
+    searchResultsLength: number;
+};
+export {};

package/lib/SubdomainNavBar/useVisibilityObserver.d.ts

@@ -2,4 +2,4 @@ import { RefObject } from 'react';
 export type VisibilityMap = {
     [key: string]: boolean;
 };
-export declare function useVisibilityObserver(navigationRef: RefObject<HTMLUListElement | null>, children: any): VisibilityMap[];
+export declare function useVisibilityObserver(navigationRef: RefObject<HTMLUListElement | null>, overflowRef: RefObject<HTMLElement | null>, measurementKey: string, disabled?: boolean): VisibilityMap[];

package/lib/TextCursorAnimation/TextCursorAnimation.d.ts

@@ -1,18 +1,23 @@
 import React, { PropsWithChildren } from 'react';
 import { TextProps } from '../Text/Text';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/base.css';
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/text-cursor-animation/colors-with-modes.css';
 export declare const testIds: {
     root: string;
+    readonly text: string;
     readonly cursor: string;
 };
 export type TextCursorAnimationProps = {
     /**
-     * Whether to animate the text reveal with a sliding wipe animation
-     * and a cursor that transitions from grey to green.
+     * Whether to animate the text with a typing effect.
      */
     animate?: boolean;
+    /**
+     * Optional text to type before transitioning to the final text
+     */
+    initialText?: string;
     ['data-testid']?: string;
     delay?: number;
     waitForPageLoad?: boolean;
 } & React.HTMLAttributes<HTMLSpanElement> & Omit<TextProps, 'animate' | 'as'>;
-export declare function TextCursorAnimation({ children, className, animate, 'data-testid': testId, delay, waitForPageLoad, variant, }: PropsWithChildren<TextCursorAnimationProps>): import("react/jsx-runtime").JSX.Element;
+export declare function TextCursorAnimation({ children, className, animate, initialText, 'data-testid': testId, delay, waitForPageLoad, variant, }: PropsWithChildren<TextCursorAnimationProps>): import("react/jsx-runtime").JSX.Element;