@consumidor-positivo/aurora 1.1.0 → 1.2.0

package/astro/Header/NavbarLink/index.astro

@@ -0,0 +1,137 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Text from '../../Text/index.astro'
+import IconChevronDown from '../../icons/default/IconChevronDown.astro'
+
+export type NavbarItem = {
+  name: string
+  href?: string
+  active?: boolean
+  dropdown?: NavbarItem[]
+}
+
+/**
+ * The React version takes an `onClick` per item. Astro has no callback props:
+ * items are plain links, so give them an `href` (or wire the click from the
+ * page's own `<script>`).
+ */
+export type Props = HTMLAttributes<'div'> & NavbarItem & {
+  /** Overrides the generated id that ties the trigger to its dropdown. */
+  dropdownId?: string
+}
+
+const {
+  name,
+  href,
+  active = false,
+  dropdown,
+  dropdownId,
+  class: className,
+  ...rest
+} = Astro.props
+
+const isDropdown = !!dropdown?.length
+const slug = name
+  .toLowerCase()
+  .normalize('NFD')
+  .replace(/[̀-ͯ]/g, '')
+  .replace(/[^a-z0-9]+/g, '-')
+  .replace(/^-|-$/g, '')
+const panelId = dropdownId ?? `au-header-dropdown-${slug}`
+
+---
+
+<div
+  class:list={[
+    'au-header__navbar-item',
+    isDropdown && 'au-header__navbar-item--is-dropdown',
+    active && 'au-header__navbar-item--is-active',
+    className,
+  ]}
+  data-element={isDropdown ? 'au-header-navbar-item' : undefined}
+  {...rest}>
+  {
+    isDropdown ? (
+      <button
+        type="button"
+        aria-expanded="false"
+        aria-haspopup="true"
+        aria-controls={panelId}
+        title={name}
+        class:list={[
+          'au-header__navbar-link',
+          'au-header__navbar-link--is-dropdown',
+          active && 'au-header__navbar-link--is-active',
+        ]}>
+        <Text as="span" variant="heading-micro" weight="light">
+          {name}
+        </Text>
+        <IconChevronDown aria-hidden="true" />
+      </button>
+    ) : (
+      <Text
+        as="a"
+        variant="heading-micro"
+        weight="light"
+        href={href}
+        title={name}
+        class:list={[
+          'au-header__navbar-link',
+          active && 'au-header__navbar-link--is-active',
+        ]}>
+        {name}
+      </Text>
+    )
+  }
+
+  {
+    isDropdown && (
+      <div id={panelId} class="au-header__dropdown" aria-hidden="true">
+        {dropdown?.map((item) => (
+          <Text
+            as="a"
+            variant="heading-micro"
+            weight="light"
+            href={item.href}
+            title={item.name}
+            tabindex="-1"
+            class:list={[
+              'au-header__dropdown-link',
+              item.active && 'au-header__dropdown-link--is-active',
+            ]}>
+            {item.name}
+          </Text>
+        ))}
+      </div>
+    )
+  }
+</div>
+
+<script>
+  import { elementController } from '@consumidor-positivo/aurora/astro/runtime'
+
+  const OPEN_CLASS = 'au-header__navbar-item--is-open'
+
+  elementController('au-header-navbar-item', ({ root, query, queryAll, on }) => {
+    const trigger = query<HTMLButtonElement>('.au-header__navbar-link')
+    const dropdown = query<HTMLElement>('.au-header__dropdown')
+    const links = queryAll<HTMLAnchorElement>('.au-header__dropdown-link')
+
+    function toggle(isOpen: boolean) {
+      root.classList.toggle(OPEN_CLASS, isOpen)
+      trigger?.setAttribute('aria-expanded', String(isOpen))
+      dropdown?.setAttribute('aria-hidden', String(!isOpen))
+      links.forEach((link) => {
+        link.tabIndex = isOpen ? 0 : -1
+      })
+    }
+
+    on('mouseenter', () => toggle(true))
+    on('mouseleave', () => toggle(false))
+    on('focusin', () => toggle(true))
+    on('focusout', (event) => {
+      if (root.contains(event.relatedTarget as Node)) return
+      toggle(false)
+    })
+  })
+</script>

package/astro/Header/Navigation/index.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+export type Props = HTMLAttributes<'div'>
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div class:list={['au-header__navigation', className]} {...rest}>
+  <slot />
+</div>

package/astro/Header/Profile/index.astro

@@ -0,0 +1,81 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import IconBell from '../../icons/default/IconBell.astro'
+import IconChevronDown from '../../icons/default/IconChevronDown.astro'
+import IconMenu from '../../icons/default/IconMenu.astro'
+
+export type NotificationsConfig = {
+  visible?: boolean
+  count?: number
+  hasUnread?: boolean
+}
+
+/**
+ * The React version takes `onClickMenu` and `notifications.onClick`. Astro has
+ * no callback props: the buttons carry `data-au-header-profile` values so the
+ * page's own `<script>` can wire them.
+ */
+export type Props = HTMLAttributes<'div'> & {
+  fullName: string
+  notifications?: NotificationsConfig
+}
+
+const {
+  fullName,
+  notifications = {},
+  class: className,
+  ...rest
+} = Astro.props
+
+const { visible = true, hasUnread = false, count } = notifications
+const shouldShowBadge = (count && count > 0) || hasUnread
+
+const initialLetters = fullName
+  ?.split(' ')
+  .map((part) => part[0])
+  .slice(0, 2)
+  .join('')
+
+---
+
+<div class:list={['au-header__profile', className]} {...rest}>
+  {
+    visible && (
+      <button
+        type="button"
+        class="au-header__profile-notifications"
+        data-au-header-profile="notifications"
+        aria-label={
+          shouldShowBadge
+            ? `Notificações, ${count && count > 0 ? count : 'novas'}`
+            : 'Notificações'
+        }>
+        <IconBell aria-hidden="true" />
+        {shouldShowBadge && (
+          <span class="au-header__profile-notifications-badge" aria-hidden="true">
+            {count && count > 0 ? count : null}
+          </span>
+        )}
+      </button>
+    )
+  }
+
+  <button
+    type="button"
+    class="au-header__profile-menu-mobile"
+    data-au-header-profile="menu"
+    aria-label="Abrir menu de perfil">
+    <IconMenu aria-hidden="true" />
+  </button>
+
+  <button
+    type="button"
+    class="au-header__profile-menu"
+    data-au-header-profile="menu"
+    aria-label={`Menu de ${fullName}`}>
+    <span class="au-header__profile-letters" aria-hidden="true">
+      {initialLetters}
+    </span>
+    <IconChevronDown aria-hidden="true" />
+  </button>
+</div>

package/astro/Header/index.astro

@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../dist/components/Header/styles.css'
+
+export type Props = HTMLAttributes<'header'> & {
+  position?: 'static' | 'fixed'
+}
+
+const { position = 'static', class: className, ...rest } = Astro.props
+---
+
+<header
+  role="banner"
+  class:list={['au-header', `au-header--${position}`, className]}
+  {...rest}>
+  <div class="au-header__container">
+    <slot />
+  </div>
+</header>

package/astro/Icon/index.astro

@@ -0,0 +1,49 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../dist/components/Icon/styles.css'
+
+export type IconSize = 'large' | 'medium' | 'small' | 'default'
+export type IconColor = 'dark' | 'info' | 'default' | 'success'
+
+export type Props = Omit<HTMLAttributes<'div'>, 'color'> & {
+  /**
+   * Raw `<svg>` markup. Unlike the React `Icon`, ids inside it are not
+   * namespaced per instance, so avoid markup that defines `id`/`url(#…)`.
+   */
+  markup: string
+  /** React icon name, e.g. `IconChevronDown` → `au-icon--iconchevrondown`. */
+  name?: string
+  size?: IconSize
+  color?: IconColor
+  rawColor?: string
+}
+
+const {
+  markup,
+  name,
+  size,
+  color,
+  rawColor,
+  class: className,
+  // Astro passes `class:list` on a component through as a raw prop; without
+  // picking it up here it would land in `...rest` and overwrite the classes
+  // this component builds.
+  'class:list': classList,
+  ...rest
+} = Astro.props
+---
+
+<div
+  class:list={[
+    'au-icon',
+    name && `au-icon--${name.toLowerCase()}`,
+    rawColor && 'au-icon--color-raw',
+    color && color !== 'default' && `au-icon--color-${color}`,
+    size && size !== 'default' && `au-icon--size-${size}`,
+    className,
+    classList,
+  ]}
+  style={rawColor ? `color: ${rawColor}` : undefined}
+  {...rest}
+  set:html={markup}
+/>

package/astro/Logo/ac/Tertiary.astro

@@ -0,0 +1,28 @@
+---
+import Logo from '../index.astro'
+import type { HTMLAttributes } from 'astro/types'
+
+export type Props = HTMLAttributes<'div'>
+---
+
+<Logo label="Acordo Certo" {...Astro.props}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="133"
+    height="34"
+    fill="none"
+    viewBox="0 0 133 34">
+    <path
+      fill="#02BEDF"
+      d="M9.2658 5.5076c-2.3282 0-4.6446.8473-6.4182 2.5507C1.0325 9.803.0211 12.144.0003 14.6535c-.0207 2.5093.9462 4.8681 2.7287 6.6424l9.1201 9.078c4.6743 4.6526 12.2787 4.6526 16.953 0l1.3643-1.358c.7949-.7912 1.2339-1.8452 1.2339-2.967a4.1982 4.1982 0 0 0-.4775-1.9396 4.2576 4.2576 0 0 0-.4776-.7174c-.089-.1062-.1809-.2125-.2788-.3099a4.0324 4.0324 0 0 0-.7712-.5993 2.3072 2.3072 0 0 0-.1452-.0857c-.6288-.3572-1.3376-.5402-2.0643-.5402-1.124 0-2.1829.4369-2.9808 1.2281-.8364.7883-1.8625 1.3108-2.9747 1.5233a6.0418 6.0418 0 0 1-1.136.1063c-1.5986 0-3.0992-.6199-4.2292-1.7447l-.015-.0177-.0178-.0148c-.0296-.0295-.0562-.062-.0859-.0915a2.512 2.512 0 0 1-.1216-.1269l-.0534-.0621c-.0505-.0561-.0978-.1121-.1453-.1682-.0059-.0089-.0119-.0148-.0178-.0207-.8572-1.0539-1.3258-2.3588-1.3258-3.7374 0-1.1721.3411-2.2909.9729-3.2504.0059-.0089.0118-.0177.0147-.0266.0416-.062.0831-.121.1276-.1801.0149-.0206.0296-.0443.0474-.0679.0356-.0472.0713-.0915.1069-.1387.0267-.0325.0503-.0679.077-.1004.0297-.0354.0623-.0708.092-.1092.0356-.0384.0682-.0797.1038-.1181a5.1986 5.1986 0 0 1 .1245-.1299c.0267-.0266.0534-.0561.0801-.0827h.0029l3.224-3.2149-3.0341-3.02c-1.8626-1.854-4.3213-2.787-6.7622-2.787"
+    />
+    <path
+      fill="#0048DB"
+      d="M43.4126 15.8316c1.7617-1.7536 2.7287-4.0829 2.7287-6.5598 0-2.4769-.97-4.8061-2.7287-6.5597-3.6332-3.6165-9.5472-3.6165-13.1804 0l-8.6396 8.6027-2.5745 2.5624-1.9159 1.9072c-.0445.0443-.0831.0915-.1246.1358-.0534.059-.1098.1151-.1573.1741-.0415.0532-.08.1063-.1186.1595-.0444.059-.0889.1151-.1304.1771a2.7042 2.7042 0 0 0-.0742.124c-.0474.0767-.0949.1535-.1364.2332-.0119.0236-.0238.0502-.0356.0738-.0505.1004-.0978.1978-.1394.3011 0 .0059-.0029.0089-.0059.0148-.5012 1.2458-.3767 2.6865.3767 3.8319l.0088.0177c.0653.0974.1365.189.2077.2805.0148.0177.0266.0384.0414.0561.0831.1033.175.2037.2728.2982.006.0059.009.0088.0119.0147l.0297.0295c.694.6909 1.5868 1.1101 2.5507 1.2045.1364.0118.2759.0207.4182.0207.1424 0 .2788-.0059.4152-.0207.0327-.0029.0653-.0118.0979-.0147a5.168 5.168 0 0 0 .3085-.0443c.0564-.0118.1098-.0266.1661-.0413.0771-.0178.1541-.0355.2282-.0561.0623-.0177.1247-.0443.187-.0679.0653-.0236.1304-.0443.1957-.0709.0622-.0266.1216-.059.1839-.0856.0623-.0295.1246-.0561.1839-.0886.0623-.0324.1216-.0738.1839-.1092.0564-.0325.1127-.0649.1661-.1004.0593-.0383.1156-.0856.175-.1269.0533-.0384.1067-.0738.1571-.1152.0534-.0442.1009-.0915.1513-.1357.0534-.0473.1098-.0916.1602-.1447 1.1181-1.0539 2.5773-1.6326 4.1255-1.6326 1.038 0 2.0525.2657 2.9363.7676.4656.2539.9105.5875 1.305.9801.1542.1536.2994.3189.4359.4901.2461.3041.4628.6288.6437.9742.0563.1063.1067.2126.1571.3218.0119.0266.0208.0561.0356.0827.0356.0797.0712.1624.1008.245.0149.0443.0297.0856.0445.1299.0237.0679.0505.1358.0712.2066.0149.0473.0266.0975.0415.1447.0178.065.0387.1299.0564.1978.0119.0502.0208.1033.0326.1535.0149.065.0297.1299.0416.1949.0089.0531.0177.1062.0266.1623.0089.065.0208.127.0297.1919l.0178.1683c.006.062.0118.124.0177.1889.003.0561.0059.1152.0059.1742 0 .0532.006.1092.006.1624l10.2264-10.1762-.0029-.0059Z"
+    />
+    <path
+      fill="#313131"
+      d="M55.1016 27.8449c0-3.5751 2.5417-6.176 6.2728-6.176 1.3999 0 2.702.3691 3.6125.9506l-.2491 1.9603c-.7919-.5107-1.9872-.8679-3.221-.8679-2.4024 0-4.081 1.6945-4.081 4.133 0 2.4385 1.6104 4.1095 4.1522 4.1095 1.2131 0 2.3342-.3425 3.1261-.8532l.255 1.9927c-.9105.558-2.1444.9063-3.5443.9063-3.8023 0-6.3202-2.6008-6.3202-6.1523l-.003-.003ZM78.0977 28.6332h-9.2358c.35 2.5064 2.3312 3.5515 4.5467 3.5515 1.5156 0 2.7048-.2775 4.0335-.9742h.2107v1.6709c-1.3761.8118-2.7998 1.113-4.5467 1.113-3.8467 0-6.3678-2.4149-6.3678-6.176 0-3.7611 2.6812-6.1524 5.9467-6.1524 3.2654 0 5.644 2.0666 5.644 5.2933 0 .4871-.0712 1.1838-.2343 1.6709l.003.003Zm-1.7262-1.9957c-.092-1.8333-1.3288-3.274-3.6629-3.274-1.8181 0-3.5204 1.1366-3.8467 3.5988h7.5096v-.3248ZM79.9531 21.7782h1.7054l.2759 2.0724h.1631c.6525-1.1838 2.0287-2.158 3.7548-2.1817h.3499l-.2728 2.1345h-.1008c-2.005 0-3.6836 1.4613-3.6836 4.0622v5.7567h-2.1919V21.7752v.003ZM94.4101 33.6021c-.7237.2775-1.4682.3956-2.2156.3956-2.9154 0-4.339-1.6946-4.339-4.9921v-5.7332l.6466-4.9921h1.569v3.7375h3.8259v1.9041h-3.8259l.0237 5.1073c0 1.9278.6999 2.9256 2.4735 2.9256.7 0 1.1893-.1624 1.5838-.3483l.258 1.9956ZM95.2882 27.7977c0-3.5515 2.8235-6.1288 6.2728-6.1288 3.449 0 6.273 2.5773 6.273 6.1288s-2.776 6.1996-6.297 6.1996c-3.5202 0-6.2518-2.6009-6.2518-6.1996h.003Zm10.3098 0c0-2.3913-1.774-4.0858-4.034-4.0858-2.2601 0-4.0336 1.6945-4.0336 4.0858s1.7736 4.1567 4.0126 4.1567 4.058-1.7182 4.058-4.1567h-.003ZM61.3153 16.5299a6.531 6.531 0 0 1-2.5773-.4812 5.9154 5.9154 0 0 1-1.9575-1.3314 5.7733 5.7733 0 0 1-1.2427-1.9485c-.2966-.7675-.442-1.5852-.4361-2.406a7.1984 7.1984 0 0 1 .4361-2.5152 6.2103 6.2103 0 0 1 1.2515-2.0606 5.7983 5.7983 0 0 1 1.9635-1.3846 6.3245 6.3245 0 0 1 2.5863-.5049c.8304-.0177 1.6579.1447 2.4172.4813a4.6145 4.6145 0 0 1 1.8269 1.3668l.2076-1.5056h2.3312v11.9239h-2.3281l-.2344-1.5292a4.5732 4.5732 0 0 1-1.827 1.3904 5.6884 5.6884 0 0 1-2.4172.5107m.4241-3.1086c.4419 0 .8809-.0856 1.2873-.2598a3.2464 3.2464 0 0 0 1.038-.6938 3.122 3.122 0 0 0 .9135-2.2525c0-.437-.0861-.868-.2551-1.2694a3.3046 3.3046 0 0 0-.6999-1.0215 3.1211 3.1211 0 0 0-1.0381-.682 3.3708 3.3708 0 0 0-1.2872-.245 3.2965 3.2965 0 0 0-1.2516.2362 3.1732 3.1732 0 0 0-1.0291.6583 2.9995 2.9995 0 0 0-.6822 1.0097 3.3206 3.3206 0 0 0-.2522 1.3137c-.0029.4428.0801.8827.2522 1.2931.1571.3838.3944.7262.697 1.0096a3.1153 3.1153 0 0 0 1.038.6584c.4034.1623.8364.245 1.2724.2391l-.003.0059ZM88.0675 16.5564a6.9385 6.9385 0 0 1-2.6011-.4812 6.6579 6.6579 0 0 1-2.1028-1.3285 6.1852 6.1852 0 0 1-1.91-4.5434 5.8703 5.8703 0 0 1 .5278-2.4917 6.4384 6.4384 0 0 1 1.4504-1.9957 6.6587 6.6587 0 0 1 2.1028-1.3285 7.1533 7.1533 0 0 1 5.1548 0c.7771.307 1.4888.7558 2.0968 1.3285a6.241 6.241 0 0 1 1.4207 1.9957 6.0636 6.0636 0 0 1 .516 2.4917c.0089.8709-.169 1.7329-.516 2.53a6.269 6.269 0 0 1-1.4207 2.0104 6.631 6.631 0 0 1-2.0968 1.3285 6.9683 6.9683 0 0 1-2.6189.4812m-.003-3.1972c.4241 0 .8482-.0767 1.2427-.2302a3.1126 3.1126 0 0 0 .9995-.6584 3.1266 3.1266 0 0 0 .9223-2.2614 3.253 3.253 0 0 0-.2372-1.2458 3.087 3.087 0 0 0-.6614-.986 3.0849 3.0849 0 0 0-1.0054-.6348 3.284 3.284 0 0 0-1.2368-.2302c-.4241 0-.8482.0767-1.2427.2302a3.016 3.016 0 0 0-.9995.6584c-.2847.2834-.516.617-.6762.986-.1661.3956-.2521.8178-.2462 1.2458-.0059.434.0801.8621.2462 1.2606.1572.375.3885.7145.6762 1.0008.2847.2805.6199.5048.9907.6584a3.2275 3.2275 0 0 0 1.2278.2066ZM111.069 16.5295a6.5269 6.5269 0 0 1-2.577-.4812c-1.474-.6082-2.634-1.7949-3.2-3.2828-.297-.7676-.442-1.5853-.436-2.406a7.187 7.187 0 0 1 .436-2.5153 6.2072 6.2072 0 0 1 1.251-2.0606c.552-.5934 1.219-1.0658 1.964-1.3846.815-.3484 1.699-.5196 2.586-.5048a4.3126 4.3126 0 0 1 2.04.434c.522.2715.982.6405 1.359 1.0922l.694-5.2253h2.969v15.9742h-2.649l-.202-1.5292a4.6012 4.6012 0 0 1-1.835 1.3905 5.6909 5.6909 0 0 1-2.397.5019m.421-3.1057c.442 0 .881-.0856 1.288-.2598a3.258 3.258 0 0 0 1.038-.6938c.293-.2893.525-.6317.685-1.0096a3.2245 3.2245 0 0 0 0-2.5064 3.22 3.22 0 0 0-.697-1.0215 3.1296 3.1296 0 0 0-1.038-.682 3.3774 3.3774 0 0 0-1.288-.245 3.292 3.292 0 0 0-1.251.2362c-.386.1476-.736.372-1.029.6583a2.9902 2.9902 0 0 0-.682 1.0097c-.175.4162-.259.862-.253 1.3137-.006.4428.081.8857.253 1.2931.157.3837.394.7262.697 1.0096a3.105 3.105 0 0 0 1.038.6583c.397.1595.821.2392 1.248.2362h-.009v.003ZM126.326 16.5564a6.8975 6.8975 0 0 1-2.595-.4812 6.5264 6.5264 0 0 1-2.103-1.3285 6.0764 6.0764 0 0 1-1.406-2.0105 6.241 6.241 0 0 1-.507-2.53 5.8256 5.8256 0 0 1 .531-2.4917 6.4374 6.4374 0 0 1 1.45-1.9956 6.6946 6.6946 0 0 1 2.103-1.3285 7.1539 7.1539 0 0 1 5.155 0c.78.307 1.492.7587 2.103 1.3285a6.324 6.324 0 0 1 1.417 1.9957c.35.7852.528 1.6355.523 2.4916a6.1071 6.1071 0 0 1-.523 2.53c-.335.7558-.815 1.4407-1.417 2.0105a6.6972 6.6972 0 0 1-2.103 1.3285c-.836.3277-1.726.493-2.625.4812m-.003-3.2002c.424 0 .848-.0768 1.243-.2303a3.1566 3.1566 0 0 0 1.005-.6583 3.2937 3.2937 0 0 0 .683-3.5072 2.9725 2.9725 0 0 0-.662-.986c-.288-.2835-.626-.5078-.999-.6584-.395-.1565-.819-.2332-1.243-.2303-.424-.003-.845.0738-1.237.2303-.377.1506-.718.375-1.005.6583a3.184 3.184 0 0 0-.674.9861 3.0012 3.0012 0 0 0-.252 1.2458 3.1093 3.1093 0 0 0 1.934 2.9197c.386.1535.795.2332 1.21.2303M96.3645 4.2543h2.7434l.2581 1.9248a3.6415 3.6415 0 0 1 1.628-1.7625 4.5239 4.5239 0 0 1 2.011-.3601h.857l-.397 2.9935a8.4115 8.4115 0 0 0-1.679.375c-.38.115-.729.31-1.029.5667-.308.2775-.555.617-.721.995a3.7443 3.7443 0 0 0-.2697 1.5055v5.6919h-3.4225l.0207-11.9328v.003ZM69.7607 10.2267c0-3.6932 2.6219-6.3265 6.6169-6.3265 1.4889 0 2.7643.3306 3.6629.8472l-.3914 3.032c-.7563-.4459-1.7351-.7027-2.963-.7027-1.9605 0-3.31 1.2458-3.31 3.1529 0 1.9071 1.2991 3.1766 3.3307 3.1766 1.2279 0 2.1919-.3012 2.9482-.7499l.3825 3.0556c-.8987.493-2.1501.8472-3.639.8472-4.0396 0-6.6407-2.657-6.6407-6.3265l.0029-.0059Z"
+    />
+  </svg>
+</Logo>

package/astro/Logo/cp/Primary.astro

@@ -0,0 +1,32 @@
+---
+import Logo from '../index.astro'
+import type { HTMLAttributes } from 'astro/types'
+
+export type Props = HTMLAttributes<'div'>
+---
+
+<Logo label="Consumidor Positivo" {...Astro.props}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="169"
+    height="40"
+    fill="none"
+    viewBox="0 0 169 40">
+    <path
+      fill="#0048DB"
+      d="M8.7422 10.4236c0-3.6266 2.8938-6.2569 6.4334-6.2569 3.5397 0 6.4335 2.6303 6.4335 6.2569 0 3.6267-2.8459 6.3282-6.4574 6.3282-3.6116 0-6.4095-2.654-6.4095-6.3282Z"
+    />
+    <path
+      fill="#04D98C"
+      d="m15.4314 23.9323.9576-.949 6.5505-6.4916c2.7541-2.7295 7.2358-2.7295 9.9914 0 1.358 1.3458 2.0956 3.1459 2.0688 5.055-.0268 1.8643-.8419 3.6322-2.1732 4.9501l-2.489 2.4667-.0028.0028-7.4432 7.3764-1.0422 1.0328-.2947.2921c-.007.0014-.0141.0041-.0226.0055-3.5622 3.2019-9.0888 3.0998-12.5256-.3046l-6.1119-6.0571.4189.0755c2.7682.5017 5.2672-.7114 7.264-2.6763l4.854-4.7783Z"
+    />
+    <path
+      fill="#0048DB"
+      d="M1.725 29.9118c2.8459.5157 5.7665-.3815 7.8183-2.4024l4.7652-4.6902-2.1351-2.1159c-1.4116-1.399-3.2745-2.102-5.1276-2.102-2.5313 0-5.0387 1.3123-6.346 3.9607a6.3347 6.3347 0 0 0-.5443 1.6212c-.4062 2.1145-.0282 4.025 1.2706 5.6154a.2552.2552 0 0 0 .148.0867l.151.0279v-.0014Z"
+    />
+    <path
+      fill="#313131"
+      d="M43.332 10.3692c0-3.6768 2.6033-6.3523 6.4266-6.3523 1.4327 0 2.747.3576 3.6796.9547l-.255 2.0264c-.8128-.5253-2.0145-.8801-3.2795-.8801-2.461 0-4.1811 1.7433-4.1811 4.2499s1.6482 4.2261 4.2515 4.2261c1.2425 0 2.3808-.3451 3.1936-.8703l.2705 2.0405c-.9312.5731-2.1976.9308-3.6317.9308-3.8937 0-6.4731-2.6742-6.4731-6.3285l-.0014.0028ZM54.8789 10.3214c0-3.6543 2.8907-6.3046 6.4266-6.3046s6.4265 2.6503 6.4265 6.3046c0 3.6543-2.8427 6.3763-6.4505 6.3763-3.6077 0-6.4026-2.6742-6.4026-6.3763Zm10.5583 0c0-2.4602-1.8158-4.2021-4.1331-4.2021-2.3174 0-4.1332 1.7434-4.1332 4.2021 0 2.4587 1.8158 4.2739 4.1092 4.2739s4.1571-1.7673 4.1571-4.2739ZM69.4609 4.4055h1.8638l.2395 1.887h.1676c.6452-1.1463 1.9595-2.2447 4.0853-2.2447 3.2006 0 5.0404 2.0532 5.0404 5.1583v7.1396h-2.3413V9.6835c0-2.2208-1.2665-3.5346-3.2964-3.5346-2.2695 0-3.4401 1.863-3.4401 3.8923v6.3045h-2.3174V4.4055h-.0014ZM92.9296 13.0451c0 2.149-1.7918 3.6543-5.3277 3.6543-2.4132 0-4.2755-.7646-4.9925-1.1463l.2395-1.863c1.2424.6689 3.0808 1.242 4.8248 1.242 2.03 0 2.9626-.7646 2.9626-1.8151 0-1.3378-1.3862-1.5758-2.9865-1.911-3.1527-.5971-4.9207-1.504-4.9207-3.7965 0-2.2926 2.0539-3.391 4.777-3.391 1.6721 0 3.5119.4535 4.6107 1.0266l-.2296 1.8068C90.8123 6.2309 89.0839 5.69 87.53 5.69c-1.5538 0-2.5089.4774-2.5089 1.5997 0 1.266 1.2904 1.48 3.488 1.9349 2.4371.4774 4.4191 1.2899 4.4191 3.8204h.0014ZM94.3047 11.3496V4.4001h2.3173v6.758c0 2.2207 1.1707 3.391 3.2485 3.391 2.0775 0 3.2485-1.1942 3.2485-3.367v-6.758h2.317v6.9255c0 3.391-2.269 5.3019-5.5894 5.3019-3.3204 0-5.5419-1.9349-5.5419-5.3019ZM127.539 9.1765v7.1396h-2.318V9.6778c0-2.2207-1.29-3.5585-3.32-3.5585-2.245 0-3.416 1.8152-3.416 3.3191v6.8777h-2.341V9.6778c0-2.077-.979-3.5585-3.297-3.5585-2.317 0-3.44 1.887-3.44 3.8923v6.3045h-2.317V4.352h1.864l.239 1.9095h.168c.645-1.1463 2.054-2.2447 4.181-2.2447 2.245 0 3.631.907 4.347 2.2687h.072c.645-1.1703 2.245-2.2687 4.371-2.2687 3.201 0 5.208 2.0532 5.208 5.1583l-.001.0014ZM128.812 1.7093c0-.883.741-1.5758 1.553-1.5758.859 0 1.6.7168 1.6 1.5758 0 .859-.717 1.5519-1.6 1.5519-.835 0-1.553-.6929-1.553-1.5519Zm.406 2.6672h2.318v11.9401h-2.318V4.3765ZM146.197 16.6241h-1.605l-.329-2.4812h-.168c-.693 1.3378-2.365 2.5545-4.611 2.5545-3.655 0-6.211-2.7221-6.211-6.2806 0-3.5586 2.556-6.4003 6.211-6.4003 2.15 0 3.584 1.1223 4.276 2.3165h.168l.829-6.2102h1.416v12.5851l.024 3.9148v.0014Zm-2.245-6.2792c0-2.2446-1.768-4.2739-4.252-4.2739-2.341 0-4.157 1.7434-4.157 4.2739 0 2.5306 1.864 4.2739 4.181 4.2739 2.509 0 4.228-2.101 4.228-4.2739ZM147.859 10.3214c0-3.6543 2.891-6.3046 6.427-6.3046 3.536 0 6.427 2.6503 6.427 6.3046 0 3.6543-2.843 6.3763-6.45 6.3763-3.606 0-6.402-2.6742-6.402-6.3763h-.002Zm10.559 0c0-2.4602-1.816-4.2021-4.133-4.2021-2.318 0-4.134 1.7434-4.134 4.2021 0 2.4587 1.816 4.2739 4.11 4.2739 2.293 0 4.157-1.7673 4.157-4.2739ZM162.277 4.3686h1.792l.24 1.8856h.167c.669-1.2181 2.078-2.2207 3.846-2.2447h.358l-.279 2.1968h-.104c-2.054 0-3.774 1.504-3.774 4.1782v5.9214h-2.246V4.3686ZM43.81 24.2294l2.5794-.024.3578 1.3209h.1916c.5973-.9069 2.0299-1.7673 4.181-1.7673 3.75 0 6.1632 2.8178 6.1632 6.3989s-2.6512 6.4242-6.2111 6.4242c-1.6242 0-2.9864-.7407-3.5598-1.5039h-.1916v4.9216h-3.5119V24.2294h.0014Zm10.0089 5.9524c0-1.9588-1.4326-3.2712-3.2485-3.2712-1.8158 0-3.3203 1.4321-3.3203 3.2712 0 1.8392 1.4327 3.2474 3.3203 3.2474 1.8877 0 3.2485-1.3378 3.2485-3.2474ZM58.9727 30.1579c0-3.6529 3.0343-6.3989 6.7125-6.3989 3.6782 0 6.6886 2.746 6.6886 6.3989 0 3.6529-2.9625 6.4482-6.7126 6.4482-3.75 0-6.6885-2.77-6.6885-6.4482Zm9.8892 0c0-1.8152-1.3862-3.1755-3.1767-3.1755-1.7905 0-3.2006 1.3617-3.2006 3.1755s1.4101 3.1994 3.1766 3.1994c1.7666 0 3.2007-1.3617 3.2007-3.1994ZM84.6793 32.6896c0 2.4601-2.1258 3.8922-5.6138 3.8922-2.7709 0-4.7769-.9069-5.184-1.1463l.3437-2.6953c1.4101.7168 3.2865 1.2379 4.9587 1.2379 1.3622 0 2.0299-.4535 2.0299-1.1942 0-.9308-.9311-1.0745-2.0778-1.3139-3.8698-.6928-5.3743-1.6954-5.3743-3.964 0-2.6024 2.4132-3.7487 5.1362-3.7487 1.8158 0 3.7021.4056 4.8967.9787l-.3353 2.6855c-1.1946-.6689-2.9146-1.228-4.5628-1.228-1.0509 0-1.6482.3577-1.6482 1.0745 0 .9787.9551 1.0744 3.2006 1.5039 2.5089.4774 4.2276 1.3843 4.2276 3.9162l.0028.0015ZM86.3945 24.2085h3.5838v12.0134h-3.5838V24.2085ZM86.1562 20.7775c0-1.1941.9791-2.0531 2.03-2.0531 1.1228 0 2.0779.9068 2.0779 2.0531s-.9312 2.0292-2.0779 2.0292-2.03-.9068-2.03-2.0292ZM100.746 20.778c0-1.1941.979-2.0531 2.03-2.0531 1.123 0 2.078.9068 2.078 2.0531s-.931 2.0292-2.078 2.0292c-1.147 0-2.03-.9068-2.03-2.0292Zm.238 3.3389h3.584v12.1063h-3.584V24.1169ZM105.449 24.1155h3.632l3.058 6.8776h.192l3.082-6.8776h3.608l-5.877 12.1063h-1.792l-5.901-12.1063h-.002ZM119.02 30.1579c0-3.6529 3.034-6.3989 6.712-6.3989s6.689 2.746 6.689 6.3989c0 3.6529-2.963 6.4482-6.713 6.4482s-6.688-2.77-6.688-6.4482Zm9.89 0c0-1.8152-1.386-3.1755-3.177-3.1755-1.79 0-3.2 1.3617-3.2 3.1755s1.41 3.1994 3.177 3.1994c1.766 0 3.2-1.3617 3.2-3.1994ZM99.2613 36.1545a5.4513 5.4513 0 0 1-1.4087.3422 9.0914 9.0914 0 0 1-1.2819.1084 6.2234 6.2234 0 0 1-2.0004-.3056 3.7235 3.7235 0 0 1-1.5313-.9393 4.3735 4.3735 0 0 1-.9819-1.694 7.902 7.902 0 0 1-.3521-2.5123v-3.8584l.8424-6.6087h2.5723v3.5374h3.5781v3.0192h-3.5077v3.9542a2.4419 2.4419 0 0 0 .5354 1.7743c.4212.3816.9776.576 1.5453.5394a3.076 3.076 0 0 0 .9396-.131 5.7665 5.7665 0 0 0 .6579-.2436l.3944 3.0192-.0014-.0014Z"
+    />
+  </svg>
+</Logo>

package/astro/Logo/index.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+export type Props = HTMLAttributes<'div'> & {
+  /** Announced by screen readers; without it the logo is decorative. */
+  label?: string
+}
+
+const { label, class: className, ...rest } = Astro.props
+---
+
+<div
+  class:list={['au-logo', className]}
+  {...label ? { role: 'img', 'aria-label': label } : {}}
+  {...rest}>
+  <slot />
+</div>
+
+<style is:global>
+  /*
+   * The one rule of `Logo/styles.scss`, inlined. The React entry for `Logo` is
+   * a barrel, so the bundler folds that stylesheet into a shared chunk whose
+   * name is not stable, and there is no `dist/components/Logo/styles.css` to
+   * point at. Keep this in sync if the source file grows.
+   */
+  .au-logo > svg {
+    display: block;
+  }
+</style>

package/astro/NavbarVertical/Link/index.astro

@@ -0,0 +1,101 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Text from '../../Text/index.astro'
+import IconChevronDown from '../../icons/default/IconChevronDown.astro'
+import IconChevronUp from '../../icons/default/IconChevronUp.astro'
+
+export type NavbarVerticalItem = {
+  name: string
+  href?: string
+  active?: boolean
+  dropdown?: NavbarVerticalItem[]
+}
+
+/**
+ * The React version takes an `onClick` per item. Astro has no callback props:
+ * items are plain links, so give them an `href`.
+ */
+export type Props = Omit<HTMLAttributes<'div'>, 'color'> & NavbarVerticalItem
+
+const {
+  name,
+  href,
+  active = false,
+  dropdown,
+  class: className,
+  ...rest
+} = Astro.props
+
+const isDropdown = !!dropdown?.length
+// Same rule as React: a group starts open when it is the active one.
+const startsOpen = isDropdown && active
+const Tag = isDropdown ? 'div' : 'a'
+---
+
+<Text
+  as={Tag}
+  href={isDropdown ? undefined : href}
+  variant="heading-micro"
+  weight="light"
+  data-element={isDropdown ? 'au-navbar-vertical-link' : undefined}
+  class:list={[
+    'au-navbar-vertical__link',
+    active && 'au-navbar-vertical__link--is-active',
+    startsOpen && 'au-navbar-vertical__link--is-open',
+    className,
+  ]}
+  {...rest}>
+  <slot name="icon" />
+  {name}
+
+  {
+    isDropdown && (
+      <Fragment>
+        <div class="au-navbar-vertical__toggle" aria-hidden="true">
+          <span hidden={!startsOpen} data-au-chevron="up">
+            <IconChevronUp />
+          </span>
+          <span hidden={startsOpen} data-au-chevron="down">
+            <IconChevronDown />
+          </span>
+        </div>
+        <div class="au-navbar-vertical__dropdown">
+          {dropdown?.map((item) => (
+            <Text
+              as="a"
+              href={item.href}
+              variant="heading-micro"
+              weight="light"
+              title={item.name}
+              class:list={[
+                'au-navbar-vertical__dropdown-link',
+                item.active && 'au-navbar-vertical__dropdown-link--is-active',
+              ]}>
+              {item.name}
+            </Text>
+          ))}
+        </div>
+      </Fragment>
+    )
+  }
+</Text>
+
+<script>
+  import { elementController } from '@consumidor-positivo/aurora/astro/runtime'
+
+  const OPEN_CLASS = 'au-navbar-vertical__link--is-open'
+
+  elementController('au-navbar-vertical-link', ({ root, query, on }) => {
+    const up = query<HTMLElement>('[data-au-chevron="up"]')
+    const down = query<HTMLElement>('[data-au-chevron="down"]')
+
+    on('click', (event) => {
+      // Clicking a link inside the group navigates; only the row toggles.
+      if ((event.target as Element | null)?.closest('.au-navbar-vertical__dropdown-link')) return
+
+      const isOpen = root.classList.toggle(OPEN_CLASS)
+      if (up) up.hidden = !isOpen
+      if (down) down.hidden = isOpen
+    })
+  })
+</script>

package/astro/NavbarVertical/index.astro

@@ -0,0 +1,27 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import '../../dist/components/NavbarVertical/styles.css'
+
+/**
+ * The React version takes `renderItem`/`renderAlert`/`renderActions` render
+ * props; Astro has none, so the items go in the default slot and the other two
+ * in named slots.
+ */
+export type Props = HTMLAttributes<'div'>
+
+const { class: className, ...rest } = Astro.props
+---
+
+<div class:list={['au-navbar-vertical', className]} {...rest}>
+  <slot />
+  {
+    Astro.slots.has('alert') && (
+      <div class="au-navbar-vertical__alert">
+        <slot name="alert" />
+      </div>
+    )
+  }
+  <div class="au-navbar-vertical__actions">
+    <slot name="actions" />
+  </div>
+</div>

package/astro/Tabs/TabPanel/index.astro

@@ -0,0 +1,23 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+export type Props = HTMLAttributes<'div'> & {
+  /** Must match the `tab` of the entry in the parent `tabs` prop. */
+  tab: string
+  /** Set on the panel matching `initialTab` — the others render hidden. */
+  active?: boolean
+}
+
+const { tab, active = false, class: className, ...rest } = Astro.props
+---
+
+<div
+  role="tabpanel"
+  id={`au-tabpanel-${tab}`}
+  aria-labelledby={`au-tab-${tab}`}
+  data-tab={tab}
+  hidden={!active}
+  class:list={['au-tabs__children', `children-${tab}`, className]}
+  {...rest}>
+  <slot />
+</div>