@astronox/core 0.1.0

package/src/components/navigation/NavigationControl.css

@@ -0,0 +1,166 @@
+[data-navigation-control] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  border: 0;
+  border-radius: var(--nox-radius-sm);
+  background: transparent;
+  color: var(--nox-text-muted);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wide);
+  line-height: 1;
+  text-decoration: none;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+[data-navigation-control-content] {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--nox-space-1);
+}
+
+[data-navigation-control-media] {
+  display: grid;
+  flex: 0 0 auto;
+  inline-size: 1.5rem;
+  block-size: 1rem;
+  place-items: center;
+  overflow: hidden;
+  border-radius: var(--nox-radius-xs);
+}
+
+[data-navigation-control-media] .media {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+[data-navigation-control-media-frame='bordered'] {
+  border: var(--nox-border-width) solid var(--nox-border);
+}
+
+[data-navigation-control-media-shape='circle'] {
+  inline-size: 2rem;
+  block-size: 2rem;
+  margin-inline-end: var(--nox-space-1);
+  border-radius: 50%;
+}
+
+[data-navigation-control-label-accessible] {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+[data-navigation-control-label] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-navigation-control-indicator] {
+  display: grid;
+  inline-size: 1rem;
+  block-size: 1rem;
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--nox-text-subtle);
+  font-size: var(--nox-font-size-xs);
+  line-height: 1;
+}
+
+[data-navigation-control-indicator] > svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+[data-navigation-control][data-navigation-control-appearance='bar'] {
+  block-size: 100%;
+  padding: 0 var(--nox-space-4);
+  border-radius: 0;
+}
+
+[data-navigation-control][data-navigation-control-appearance='bar']::after {
+  position: absolute;
+  right: var(--nox-space-4);
+  bottom: var(--nox-space-2);
+  left: var(--nox-space-4);
+  height: 3px;
+  border-radius: var(--nox-radius-pill);
+  background: var(--nox-link-active);
+  content: '';
+  opacity: 0;
+  transform: translateY(var(--nox-space-1));
+}
+
+[data-navigation-control][data-navigation-control-appearance='bar'][aria-current='page'] {
+  color: var(--nox-link-active);
+}
+
+[data-navigation-control][data-navigation-control-appearance='bar'][data-navigation-control-active] {
+  color: var(--nox-link-active);
+}
+
+[data-navigation-control][data-navigation-control-appearance='bar'][data-navigation-control-active]::after {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+[data-navigation-control][data-navigation-control-appearance='inline'] {
+  color: inherit;
+  text-decoration-color: color-mix(in srgb, var(--nox-link) 45%, transparent);
+  text-underline-offset: 0.2em;
+}
+
+[data-navigation-control][aria-disabled='true'] {
+  color: var(--nox-text-disabled);
+  cursor: not-allowed;
+}
+
+[data-navigation-control]:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-focus-ring);
+  outline-offset: var(--nox-focus-ring-offset);
+}
+
+[data-dropdown-open] > [data-navigation-control][data-dropdown-trigger] {
+  color: var(--nox-link-hover);
+}
+
+[data-dropdown-open]
+  > [data-navigation-control][data-dropdown-trigger][data-navigation-control-appearance='bar'] {
+  background: var(--nox-surface-muted);
+}
+
+@media (hover: hover) {
+  [data-navigation-control]:where([href], button):hover {
+    color: var(--nox-link-hover);
+  }
+
+  [data-navigation-control][data-navigation-control-appearance='bar']:where(
+      [href],
+      button
+    ):hover {
+    background: var(--nox-surface-muted);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-navigation-control],
+  [data-navigation-control]::after {
+    transition:
+      background-color var(--nox-motion-duration-sm)
+        var(--nox-motion-easing-standard),
+      color var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+      opacity var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+      transform var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+  }
+}

package/src/components/navigation/NavigationItemContent.astro

@@ -0,0 +1,24 @@
+---
+import type { NavigationItem } from '../../display/contracts';
+import Media from '../../primitives/media/Media/Media.astro';
+
+type Props = {
+  item: NavigationItem;
+};
+
+const { item } = Astro.props;
+---
+
+{
+  item.media ? (
+    <span
+      data-navigation-control-media
+      data-navigation-control-media-frame={item.mediaFrame}
+      data-navigation-control-media-shape={item.mediaShape}
+      aria-hidden="true"
+    >
+      <Media media={item.media} fit="cover" size="fill" />
+    </span>
+  ) : null
+}
+<span data-navigation-control-label>{item.label}</span>

package/src/components/navigation/NavigationLink.astro

@@ -0,0 +1,121 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { NavigationItem } from '../../display/contracts';
+import { isNavigationItemActive } from './navigationState';
+import ActionListItem from '../actions/ActionListItem/ActionListItem.astro';
+import NavigationItemContent from './NavigationItemContent.astro';
+
+type NavigationLinkAccent = 'start';
+type NavigationLinkAppearance = 'bar' | 'inline' | 'menu';
+type NavigationLinkElement = 'auto' | 'button';
+
+type Props = Omit<HTMLAttributes<'a'>, 'href'> &
+  Omit<HTMLAttributes<'button'>, 'type'> & {
+    accent?: NavigationLinkAccent;
+    appearance?: NavigationLinkAppearance;
+    as?: NavigationLinkElement;
+    currentPath?: string;
+    disabled?: boolean;
+    item: NavigationItem;
+    type?: HTMLAttributes<'button'>['type'];
+  };
+
+const {
+  accent,
+  appearance = 'inline',
+  as = 'auto',
+  class: className,
+  currentPath,
+  disabled = false,
+  item,
+  type = 'button',
+  ...attrs
+} = Astro.props;
+const isActive =
+  currentPath !== undefined &&
+  (isNavigationItemActive(item, currentPath) ||
+    Boolean(
+      item.items?.some((child) => isNavigationItemActive(child, currentPath)),
+    ));
+const isDisabled = disabled || item.disabled;
+const target = item.target;
+const hreflang = item.hreflang;
+const rel =
+  item.rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined);
+const classes = [className];
+const shouldRenderButton = as === 'button';
+---
+
+{
+  appearance === 'menu' ? (
+    <ActionListItem
+      {...attrs}
+      accent={accent}
+      active={isActive}
+      as={shouldRenderButton ? 'button' : 'auto'}
+      class={className}
+      disabled={isDisabled}
+      href={item.href}
+      hreflang={hreflang}
+      rel={rel}
+      target={target}
+      title={item.description}
+      type={type}
+      aria-current={isActive && item.href && !isDisabled ? 'page' : undefined}
+    >
+      <span data-navigation-control-content>
+        <NavigationItemContent item={item} />
+      </span>
+    </ActionListItem>
+  ) : !isDisabled && shouldRenderButton ? (
+    <button
+      {...attrs}
+      class:list={classes}
+      data-interaction-accent={accent}
+      data-interaction-accent-active={accent && isActive ? true : undefined}
+      data-navigation-control
+      data-navigation-control-active={isActive ? true : undefined}
+      data-navigation-control-appearance={appearance}
+      title={item.description}
+      type={type}
+    >
+      <span data-navigation-control-content>
+        <NavigationItemContent item={item} />
+      </span>
+    </button>
+  ) : item.href && !isDisabled ? (
+    <a
+      {...attrs}
+      class:list={classes}
+      data-interaction-accent={accent}
+      data-interaction-accent-active={accent && isActive ? true : undefined}
+      data-navigation-control
+      data-navigation-control-active={isActive ? true : undefined}
+      data-navigation-control-appearance={appearance}
+      href={item.href}
+      hreflang={hreflang}
+      aria-current={isActive ? 'page' : undefined}
+      title={item.description}
+      target={target}
+      rel={rel}
+    >
+      <span data-navigation-control-content>
+        <NavigationItemContent item={item} />
+      </span>
+    </a>
+  ) : (
+    <span
+      {...attrs}
+      class:list={classes}
+      data-interaction-accent={accent}
+      data-navigation-control
+      data-navigation-control-appearance={appearance}
+      aria-disabled="true"
+      title={item.description}
+    >
+      <span data-navigation-control-content>
+        <NavigationItemContent item={item} />
+      </span>
+    </span>
+  )
+}

package/src/components/navigation/NavigationLinks.astro

@@ -0,0 +1,27 @@
+---
+import type { NavigationItem } from '../../display/contracts';
+import NavigationLink from './NavigationLink.astro';
+import { isNavigationGroupItem } from './navigationState';
+
+type NavigationLinkAppearance = 'bar' | 'inline' | 'menu';
+
+type Props = {
+  items: readonly NavigationItem[];
+  currentPath?: string;
+  appearance?: NavigationLinkAppearance;
+};
+
+const { appearance = 'inline', currentPath, items } = Astro.props;
+---
+
+{
+  items.map((item) =>
+    isNavigationGroupItem(item) ? null : (
+      <NavigationLink
+        item={item}
+        currentPath={currentPath}
+        appearance={appearance}
+      />
+    ),
+  )
+}

package/src/components/navigation/NavigationMenuList.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { NavigationItem } from '../../display/contracts';
+import NavigationLink from './NavigationLink.astro';
+
+type Props = HTMLAttributes<'ul'> & {
+  currentPath?: string;
+  items: readonly NavigationItem[];
+  linkClass?: string;
+  listClass?: string;
+};
+
+const {
+  class: className,
+  currentPath,
+  items,
+  linkClass,
+  listClass,
+  ...attrs
+}: Props = Astro.props;
+---
+
+<ul {...attrs} class:list={['navigation-menu-list', listClass, className]}>
+  {
+    items.map((item) => (
+      <li>
+        <NavigationLink
+          item={item}
+          currentPath={currentPath}
+          accent="start"
+          appearance="menu"
+          class={linkClass}
+        />
+      </li>
+    ))
+  }
+</ul>

package/src/components/navigation/NavigationMenuList.css

@@ -0,0 +1,6 @@
+.navigation-menu-list {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

package/src/components/navigation/SkipLink/SkipLink.astro

@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = Omit<HTMLAttributes<'a'>, 'href'> & {
+  href: `#${string}`;
+};
+
+const { class: className, href, ...attrs }: Props = Astro.props;
+---
+
+<a
+  {...attrs}
+  class:list={['skip-link', className]}
+  href={href}
+  data-widget="skip-link"
+>
+  <slot />
+</a>

package/src/components/navigation/SkipLink/SkipLink.css

@@ -0,0 +1,26 @@
+.skip-link {
+  position: fixed;
+  inset-block-start: var(--nox-space-2);
+  inset-inline-start: var(--nox-space-2);
+  z-index: 100;
+  padding: var(--nox-space-2) var(--nox-space-4);
+  border: var(--nox-border-width) solid var(--nox-tone-border);
+  border-radius: var(--nox-radius-sm);
+  background: var(--nox-surface);
+  color: var(--nox-tone-text);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-strong);
+  text-decoration: none;
+  transform: translateY(calc(-100% - var(--nox-space-4)));
+}
+
+.skip-link:focus-visible {
+  transform: translateY(0);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .skip-link {
+    transition: transform var(--nox-motion-duration-sm)
+      var(--nox-motion-easing-standard);
+  }
+}

package/src/components/navigation/SubNavigation/SubNavigation.astro

@@ -0,0 +1,124 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+import type { SubNavigationItem } from '../navigationTypes';
+import Media from '../../../primitives/media/Media/Media.astro';
+
+type Props = HTMLAttributes<'nav'> & {
+  items: readonly SubNavigationItem[];
+  label?: string;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  items,
+  label = 'Navigation de section',
+  tone,
+  ...attrs
+} = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+{
+  items.length > 0 ? (
+    <nav
+      {...attrs}
+      class:list={['sub-navigation', className]}
+      aria-label={label}
+      data-widget="sub-navigation"
+      data-surface
+      data-tone={resolvedTone}
+    >
+      <ul class="sub-navigation__list">
+        {items.map((item) => {
+          const Icon = item.icon;
+          const media = item.media;
+          const isActive = item.active ?? false;
+          const hasVisual = Boolean(Icon || media);
+
+          return (
+            <li class="sub-navigation__item">
+              {item.disabled ? (
+                <span
+                  class="sub-navigation__link"
+                  aria-current={isActive ? 'page' : undefined}
+                  aria-disabled="true"
+                  data-active={isActive ? true : undefined}
+                  data-has-visual={hasVisual ? true : undefined}
+                >
+                  {hasVisual ? (
+                    <span
+                      class:list={[
+                        'sub-navigation__visual',
+                        media && 'sub-navigation__visual--media',
+                      ]}
+                      aria-hidden="true"
+                    >
+                      {Icon ? (
+                        <Icon />
+                      ) : media ? (
+                        <Media
+                          class="sub-navigation__image"
+                          media={media}
+                          fit="contain"
+                          size="intrinsic"
+                        />
+                      ) : null}
+                    </span>
+                  ) : null}
+                  <span
+                    class:list={[
+                      'sub-navigation__label',
+                      hasVisual && 'sub-navigation__label--with-visual',
+                    ]}
+                  >
+                    {item.label}
+                  </span>
+                </span>
+              ) : (
+                <a
+                  class="sub-navigation__link"
+                  href={item.href}
+                  aria-current={isActive ? 'page' : undefined}
+                  data-active={isActive ? true : undefined}
+                  data-has-visual={hasVisual ? true : undefined}
+                >
+                  {hasVisual ? (
+                    <span
+                      class:list={[
+                        'sub-navigation__visual',
+                        media && 'sub-navigation__visual--media',
+                      ]}
+                      aria-hidden="true"
+                    >
+                      {Icon ? (
+                        <Icon />
+                      ) : media ? (
+                        <Media
+                          class="sub-navigation__image"
+                          media={media}
+                          fit="contain"
+                          size="intrinsic"
+                        />
+                      ) : null}
+                    </span>
+                  ) : null}
+                  <span
+                    class:list={[
+                      'sub-navigation__label',
+                      hasVisual && 'sub-navigation__label--with-visual',
+                    ]}
+                  >
+                    {item.label}
+                  </span>
+                </a>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  ) : null
+}