@astronox/core 0.1.0

package/src/patterns/Combobox/contracts.ts

@@ -0,0 +1,18 @@
+import type { DisplayMedia } from '../../display/contracts';
+import type { AstroComponent } from '../../components/widgetTypes';
+import type { Tone } from '../../theme/contracts';
+
+export type ComboboxOption = {
+  value: string;
+  label: string;
+  description?: string;
+  icon?: AstroComponent;
+  iconTone?: Tone;
+  media?: DisplayMedia;
+  keywords?: readonly string[];
+  disabled?: boolean;
+};
+
+export type ComboboxMode = 'number' | 'options';
+export type ComboboxSelectionMode = 'multiple' | 'single';
+export type ComboboxSize = 'lg' | 'md' | 'sm';

package/src/patterns/Dropdown/Dropdown.astro

@@ -0,0 +1,127 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { DisplayMedia } from '../../display/contracts';
+import ArrowDownIcon from '../../components/icons/ArrowDownIcon.astro';
+import Media from '../../primitives/media/Media/Media.astro';
+
+type DropdownAlignment = 'center' | 'end' | 'start';
+type DropdownPlacement = 'bottom' | 'top';
+type DropdownSize = 'sm' | 'md' | 'lg';
+type DropdownTrigger = 'click' | 'hover';
+type DropdownTriggerAppearance = 'bar' | 'default';
+type DropdownTriggerIndicator = 'chevron-down';
+type DropdownTriggerLabel = 'accessible' | 'visible';
+type DropdownTriggerMediaFrame = 'bordered';
+type DropdownTriggerMediaShape = 'circle' | 'rectangle';
+
+type Props = Omit<HTMLAttributes<'div'>, 'id'> & {
+  id: string;
+  label: string;
+  align?: DropdownAlignment;
+  attached?: boolean;
+  active?: boolean;
+  indicator?: DropdownTriggerIndicator;
+  maxVisibleItems?: number;
+  placement?: DropdownPlacement;
+  size?: DropdownSize;
+  trigger?: DropdownTrigger;
+  triggerAppearance?: DropdownTriggerAppearance;
+  triggerLabel?: DropdownTriggerLabel;
+  triggerMedia?: DisplayMedia;
+  triggerMediaFrame?: DropdownTriggerMediaFrame;
+  triggerMediaShape?: DropdownTriggerMediaShape;
+};
+
+const {
+  align = 'start',
+  attached = false,
+  active = false,
+  id,
+  indicator,
+  label,
+  maxVisibleItems = 5,
+  placement = 'bottom',
+  size = 'md',
+  trigger: triggerMode = 'click',
+  triggerAppearance = 'default',
+  triggerLabel = 'visible',
+  triggerMedia,
+  triggerMediaFrame,
+  triggerMediaShape = 'rectangle',
+  class: className,
+  ...attrs
+} = Astro.props;
+const contentId = `${id}-content`;
+const triggerId = `${id}-trigger`;
+---
+
+<div
+  {...attrs}
+  class:list={['dropdown', className]}
+  data-dropdown
+  data-dropdown-align={align}
+  data-dropdown-attached={attached ? true : undefined}
+  data-dropdown-placement={placement}
+  data-dropdown-size={size}
+  data-dropdown-trigger-appearance={triggerAppearance}
+  data-dropdown-trigger-mode={triggerMode}
+  style={`--dropdown-visible-items: ${maxVisibleItems}`}
+>
+  <button
+    class="dropdown__trigger"
+    id={triggerId}
+    type="button"
+    aria-controls={contentId}
+    aria-expanded="false"
+    data-dropdown-trigger
+    data-navigation-control={triggerAppearance === 'bar' ? true : undefined}
+    data-navigation-control-active={active ? true : undefined}
+    data-navigation-control-appearance={triggerAppearance}
+    aria-label={triggerLabel === 'accessible' ? label : undefined}
+  >
+    <span data-navigation-control-content>
+      {
+        triggerMedia ? (
+          <span
+            class="dropdown__trigger-media"
+            data-navigation-control-media
+            data-navigation-control-media-frame={triggerMediaFrame}
+            data-navigation-control-media-shape={triggerMediaShape}
+            aria-hidden="true"
+          >
+            <Media media={triggerMedia} fit="cover" size="fill" />
+          </span>
+        ) : null
+      }
+      <span
+        data-navigation-control-label
+        data-navigation-control-label-accessible={triggerLabel === 'accessible'
+          ? true
+          : undefined}
+      >
+        {label}
+      </span>
+      {
+        indicator ? (
+          <span data-navigation-control-indicator aria-hidden="true">
+            {indicator === 'chevron-down' ? <ArrowDownIcon /> : null}
+          </span>
+        ) : null
+      }
+    </span>
+  </button>
+
+  <div class="dropdown__content" id={contentId} hidden data-dropdown-content>
+    <slot />
+  </div>
+</div>
+
+<script>
+  import { initDropdown } from './dropdownController';
+
+  for (const root of document.querySelectorAll('[data-dropdown]')) {
+    if (root instanceof HTMLElement) {
+      initDropdown(root);
+    }
+  }
+</script>

package/src/patterns/Dropdown/Dropdown.css

@@ -0,0 +1,100 @@
+.dropdown {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  min-width: 0;
+}
+
+.dropdown > [data-dropdown-trigger] {
+  block-size: 100%;
+}
+
+.dropdown__trigger[data-navigation-control-appearance='default'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-surface);
+  color: var(--nox-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.dropdown[data-dropdown-size='sm']
+  .dropdown__trigger[data-navigation-control-appearance='default'] {
+  min-block-size: 2.25rem;
+  padding-inline: var(--nox-space-3);
+}
+
+.dropdown[data-dropdown-size='md']
+  .dropdown__trigger[data-navigation-control-appearance='default'] {
+  min-block-size: 2.75rem;
+  padding-inline: var(--nox-space-4);
+}
+
+.dropdown[data-dropdown-size='lg']
+  .dropdown__trigger[data-navigation-control-appearance='default'] {
+  min-block-size: 3.25rem;
+  padding-inline: var(--nox-space-5);
+}
+
+.dropdown__trigger:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-focus-ring);
+  outline-offset: var(--nox-focus-ring-offset);
+}
+
+.dropdown__content {
+  position: absolute;
+  z-index: 90;
+  display: grid;
+  min-width: 11rem;
+  max-width: calc(100vw - var(--nox-page-gutter) * 2);
+  max-block-size: min(
+    calc(100dvh - var(--nox-space-4) * 2),
+    calc(var(--dropdown-visible-items, 5) * 2.75rem + var(--nox-space-2) * 2)
+  );
+  padding: var(--nox-space-2) 0;
+  gap: 0;
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-top: 3px solid var(--nox-link-active);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-surface);
+  box-shadow: var(--nox-shadow-surface);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.dropdown__content[hidden] {
+  display: none;
+}
+
+.dropdown[data-dropdown-placement='bottom'] .dropdown__content {
+  top: 100%;
+}
+
+.dropdown[data-dropdown-attached][data-dropdown-placement='bottom']
+  .dropdown__content {
+  top: calc(100% + var(--dropdown-attached-block-offset, 0px));
+  border-top: 3px solid var(--nox-link-active);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  box-shadow: none;
+}
+
+.dropdown[data-dropdown-placement='top'] .dropdown__content {
+  bottom: calc(100% + var(--nox-space-2));
+}
+
+.dropdown[data-dropdown-align='start'] .dropdown__content {
+  left: 0;
+}
+
+.dropdown[data-dropdown-align='center'] .dropdown__content {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.dropdown[data-dropdown-align='end'] .dropdown__content {
+  right: 0;
+}

package/src/patterns/Dropdown/dropdownController.ts

@@ -0,0 +1,157 @@
+import { getFocusableElements } from '../../client/focus';
+
+type DropdownTriggerMode = 'click' | 'hover';
+
+const initializedAttribute = 'data-dropdown-initialized';
+const noop = (): void => undefined;
+
+const getTriggerMode = (root: HTMLElement): DropdownTriggerMode =>
+  root.dataset.dropdownTriggerMode === 'hover' ? 'hover' : 'click';
+
+export function initDropdown(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') {
+    return noop;
+  }
+
+  const trigger = root.querySelector<HTMLElement>('[data-dropdown-trigger]');
+  const content = root.querySelector<HTMLElement>('[data-dropdown-content]');
+
+  if (!trigger || !content) {
+    return noop;
+  }
+
+  root.setAttribute(initializedAttribute, 'true');
+
+  const triggerMode = getTriggerMode(root);
+  const hoverMedia = window.matchMedia('(hover: hover)');
+  let isOpen = !content.hidden;
+
+  const canOpenOnHover = (): boolean =>
+    triggerMode === 'hover' && hoverMedia.matches;
+
+  const setOpen = (nextOpen: boolean, restoreFocus = false): void => {
+    isOpen = nextOpen;
+    trigger.setAttribute('aria-expanded', String(isOpen));
+    content.hidden = !isOpen;
+    root.toggleAttribute('data-dropdown-open', isOpen);
+
+    if (restoreFocus) {
+      trigger.focus();
+    }
+  };
+
+  const openAndFocusFirstItem = (): void => {
+    setOpen(true);
+
+    window.requestAnimationFrame(() => {
+      const firstFocusable = getFocusableElements(content)[0];
+
+      if (firstFocusable) {
+        firstFocusable.focus();
+      }
+    });
+  };
+
+  const close = (restoreFocus = false): void => {
+    if (!isOpen) {
+      return;
+    }
+
+    setOpen(false, restoreFocus);
+  };
+
+  const handleTriggerClick = (): void => {
+    if (canOpenOnHover()) {
+      setOpen(true);
+      return;
+    }
+
+    setOpen(!isOpen);
+  };
+
+  const handleRootPointerEnter = (): void => {
+    if (canOpenOnHover()) {
+      setOpen(true);
+    }
+  };
+
+  const handleRootPointerLeave = (event: PointerEvent): void => {
+    const nextTarget = event.relatedTarget;
+
+    if (nextTarget instanceof Node && root.contains(nextTarget)) {
+      return;
+    }
+
+    if (canOpenOnHover() && !root.contains(document.activeElement)) {
+      close();
+    }
+  };
+
+  const handleTriggerFocus = (): void => {
+    if (triggerMode === 'hover') {
+      setOpen(true);
+    }
+  };
+
+  const handleTriggerKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      openAndFocusFirstItem();
+    }
+  };
+
+  const handleContentKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      close(true);
+    }
+  };
+
+  const handleDocumentClick = (event: MouseEvent): void => {
+    const target = event.target;
+
+    if (target instanceof Node && !root.contains(target)) {
+      close();
+    }
+  };
+
+  const handleDocumentFocusin = (event: FocusEvent): void => {
+    const target = event.target;
+
+    if (target instanceof Node && !root.contains(target)) {
+      close();
+    }
+  };
+
+  const handleDocumentKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape') {
+      close(true);
+    }
+  };
+
+  setOpen(isOpen);
+
+  trigger.addEventListener('click', handleTriggerClick);
+  trigger.addEventListener('focus', handleTriggerFocus);
+  trigger.addEventListener('keydown', handleTriggerKeydown);
+  content.addEventListener('keydown', handleContentKeydown);
+  root.addEventListener('pointerenter', handleRootPointerEnter);
+  root.addEventListener('pointerleave', handleRootPointerLeave);
+  document.addEventListener('click', handleDocumentClick);
+  document.addEventListener('focusin', handleDocumentFocusin);
+  document.addEventListener('keydown', handleDocumentKeydown);
+
+  return () => {
+    close();
+    trigger.removeEventListener('click', handleTriggerClick);
+    trigger.removeEventListener('focus', handleTriggerFocus);
+    trigger.removeEventListener('keydown', handleTriggerKeydown);
+    content.removeEventListener('keydown', handleContentKeydown);
+    root.removeEventListener('pointerenter', handleRootPointerEnter);
+    root.removeEventListener('pointerleave', handleRootPointerLeave);
+    document.removeEventListener('click', handleDocumentClick);
+    document.removeEventListener('focusin', handleDocumentFocusin);
+    document.removeEventListener('keydown', handleDocumentKeydown);
+    root.removeAttribute(initializedAttribute);
+  };
+}

package/src/patterns/Fullscreen/FullscreenControl.astro

@@ -0,0 +1,103 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../theme/contracts';
+import Button from '../../components/actions/Button/Button.astro';
+import EnterFullscreenIcon from '../../components/icons/EnterFullscreenIcon.astro';
+import ExitFullscreenIcon from '../../components/icons/ExitFullscreenIcon.astro';
+import ExternalLinkIcon from '../../components/icons/ExternalLinkIcon.astro';
+
+type FullscreenControlPlacement = 'inline' | 'overlay';
+type FullscreenOverlayOffset = 'default' | 'native-controls';
+type FullscreenUnsupportedFallback = {
+  href: string;
+  label: string;
+  target?: '_blank' | '_self';
+};
+
+type Props = Omit<HTMLAttributes<'button'>, 'aria-controls' | 'type'> & {
+  enterLabel: string;
+  exitLabel: string;
+  overlayOffset?: FullscreenOverlayOffset;
+  placement?: FullscreenControlPlacement;
+  targetId: string;
+  tone?: Tone;
+  unsupportedFallback?: FullscreenUnsupportedFallback;
+};
+
+const {
+  class: className,
+  enterLabel,
+  exitLabel,
+  overlayOffset = 'default',
+  placement = 'inline',
+  targetId,
+  tone,
+  unsupportedFallback,
+  ...attrs
+}: Props = Astro.props;
+const resolvedClass = ['fullscreen-control', className]
+  .filter(Boolean)
+  .join(' ');
+---
+
+<Button
+  {...attrs}
+  class={resolvedClass}
+  type="button"
+  borderless={placement === 'inline'}
+  full={placement === 'inline'}
+  iconOnly
+  size={placement === 'overlay' ? 'md' : undefined}
+  tone={tone}
+  aria-controls={targetId}
+  aria-label={enterLabel}
+  aria-pressed="false"
+  title={enterLabel}
+  data-fullscreen-control
+  data-fullscreen-enter-label={enterLabel}
+  data-fullscreen-exit-label={exitLabel}
+  data-fullscreen-overlay-offset={overlayOffset}
+  data-fullscreen-placement={placement}
+  data-fullscreen-target={targetId}
+>
+  <span class="fullscreen-control__icon" data-fullscreen-enter-icon>
+    <EnterFullscreenIcon />
+  </span>
+  <span class="fullscreen-control__icon" data-fullscreen-exit-icon>
+    <ExitFullscreenIcon />
+  </span>
+</Button>
+
+{
+  unsupportedFallback ? (
+    <Button
+      href={unsupportedFallback.href}
+      target={unsupportedFallback.target ?? '_blank'}
+      borderless={placement === 'inline'}
+      full={placement === 'inline'}
+      iconOnly
+      size={placement === 'overlay' ? 'md' : undefined}
+      tone={tone}
+      aria-label={unsupportedFallback.label}
+      title={unsupportedFallback.label}
+      hidden
+      data-fullscreen-unsupported-fallback
+    >
+      <span class="fullscreen-control__icon">
+        <ExternalLinkIcon />
+      </span>
+    </Button>
+  ) : null
+}
+
+<script>
+  import { initFullscreenControl } from './fullscreenController';
+
+  for (const control of document.querySelectorAll(
+    '[data-fullscreen-control]',
+  )) {
+    if (control instanceof HTMLButtonElement) {
+      initFullscreenControl(control);
+    }
+  }
+</script>

package/src/patterns/Fullscreen/FullscreenControl.css

@@ -0,0 +1,49 @@
+.fullscreen-control__icon {
+  display: grid;
+  place-items: center;
+}
+
+.fullscreen-control [data-fullscreen-exit-icon] {
+  display: none;
+}
+
+.fullscreen-control[aria-pressed='true'] [data-fullscreen-enter-icon] {
+  display: none;
+}
+
+.fullscreen-control[aria-pressed='true'] [data-fullscreen-exit-icon] {
+  display: grid;
+}
+
+.fullscreen-control[data-fullscreen-placement='overlay'].nox-button {
+  position: absolute;
+  z-index: 2;
+  display: none;
+  inset-inline-end: var(--nox-space-3);
+  inset-block-end: var(--nox-space-3);
+  inline-size: var(--nox-section-responsive-block-size);
+  block-size: var(--nox-section-responsive-block-size);
+  min-block-size: 0;
+  border-radius: var(--nox-radius-md);
+  box-shadow: var(--nox-shadow-surface);
+}
+
+[data-fullscreen-region]:fullscreen
+  .fullscreen-control[data-fullscreen-placement='overlay'].nox-button {
+  display: inline-flex;
+}
+
+[data-fullscreen-region]:fullscreen
+  .fullscreen-control[data-fullscreen-placement='overlay'][data-fullscreen-overlay-offset='native-controls'].nox-button {
+  inset-block-end: calc(
+    var(--nox-fullscreen-native-controls-block-size, 2.5rem) +
+      var(--nox-space-3)
+  );
+}
+
+[data-fullscreen-region]:fullscreen {
+  inline-size: 100vw;
+  block-size: 100vh;
+  aspect-ratio: auto;
+  background: var(--nox-surface);
+}

package/src/patterns/Fullscreen/fullscreenController.ts

@@ -0,0 +1,73 @@
+const initializedAttribute = 'data-fullscreen-initialized';
+const noop = (): void => undefined;
+
+export function initFullscreenControl(
+  control: HTMLButtonElement,
+): () => void {
+  if (control.getAttribute(initializedAttribute) === 'true') return noop;
+
+  const targetId = control.dataset.fullscreenTarget;
+  const target = targetId ? document.getElementById(targetId) : null;
+  const fallbackCandidate = control.nextElementSibling;
+  const fallback =
+    fallbackCandidate instanceof HTMLAnchorElement &&
+    fallbackCandidate.hasAttribute('data-fullscreen-unsupported-fallback')
+      ? fallbackCandidate
+      : null;
+  const showUnsupportedFallback = (): void => {
+    control.hidden = true;
+    if (fallback instanceof HTMLAnchorElement) fallback.hidden = false;
+  };
+  if (
+    document.fullscreenEnabled !== true ||
+    !target ||
+    typeof target.requestFullscreen !== 'function'
+  ) {
+    showUnsupportedFallback();
+    return noop;
+  }
+
+  control.hidden = false;
+  if (fallback instanceof HTMLAnchorElement) fallback.hidden = true;
+  control.setAttribute(initializedAttribute, 'true');
+
+  const enterLabel = control.dataset.fullscreenEnterLabel ?? '';
+  const exitLabel = control.dataset.fullscreenExitLabel ?? '';
+
+  const sync = (): void => {
+    const active = document.fullscreenElement === target;
+    const label = active ? exitLabel : enterLabel;
+
+    control.setAttribute('aria-label', label);
+    control.setAttribute('aria-pressed', String(active));
+    control.title = label;
+  };
+
+  const toggle = async (): Promise<void> => {
+    try {
+      if (document.fullscreenElement === target) {
+        await document.exitFullscreen();
+      } else {
+        await target.requestFullscreen();
+      }
+    } catch {
+      if (fallback instanceof HTMLAnchorElement) {
+        showUnsupportedFallback();
+      } else {
+        sync();
+      }
+    }
+  };
+
+  control.addEventListener('click', toggle);
+  document.addEventListener('fullscreenchange', sync);
+  sync();
+
+  return () => {
+    control.removeEventListener('click', toggle);
+    document.removeEventListener('fullscreenchange', sync);
+    control.removeAttribute(initializedAttribute);
+    control.hidden = false;
+    if (fallback instanceof HTMLAnchorElement) fallback.hidden = true;
+  };
+}

package/src/patterns/GlitchOverlay/GlitchOverlay.astro

@@ -0,0 +1,50 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'div'>;
+
+const { class: className, ...attrs }: Props = Astro.props;
+const pixels = Array.from({ length: 28 }, (_, index) => ({
+  delay: (index * 97) % 1600,
+  duration: 1000 + ((index * 149) % 1800),
+  height: 2 + ((index * 7) % 9),
+  width: 8 + ((index * 11) % 34),
+  x: (index * 37 + 9) % 96,
+  y: (index * 23 + 7) % 96,
+}));
+---
+
+<div
+  {...attrs}
+  class:list={['glitch-overlay', className]}
+  aria-hidden="true"
+  data-glitch-overlay-root
+  data-widget="glitch-overlay"
+>
+  <span class="glitch-overlay__scanlines"></span>
+  <span class="glitch-overlay__pixels">
+    {
+      pixels.map((pixel) => (
+        <span
+          class="glitch-overlay__pixel"
+          style={[
+            `--glitch-delay: ${pixel.delay}ms`,
+            `--glitch-duration: ${pixel.duration}ms`,
+            `--glitch-height: ${pixel.height}px`,
+            `--glitch-width: ${pixel.width}px`,
+            `--glitch-x: ${pixel.x}%`,
+            `--glitch-y: ${pixel.y}%`,
+          ].join(';')}
+        />
+      ))
+    }
+  </span>
+</div>
+
+<script>
+  import { initGlitchOverlay } from './glitchOverlayController';
+
+  for (const root of document.querySelectorAll('[data-glitch-overlay-root]')) {
+    if (root instanceof HTMLElement) initGlitchOverlay(root);
+  }
+</script>