@astronox/core 0.1.0

package/src/components/feedback/Tooltip/tooltipController.ts

@@ -0,0 +1,371 @@
+const initializedAttribute = 'data-tooltip-initialized';
+const generatedIdAttribute = 'data-tooltip-generated-id';
+const hideDelayMs = 80;
+const noop = (): void => undefined;
+
+let nextTooltipId = 0;
+
+function getTrigger(root: HTMLElement): HTMLElement | null {
+  if (root.dataset.tooltipTriggerScope === 'ancestor') {
+    return (
+      root.parentElement?.closest<HTMLElement>('[data-tooltip-trigger]') ?? null
+    );
+  }
+
+  const explicitTrigger = root.querySelector<HTMLElement>(
+    ':scope > [data-tooltip-trigger]',
+  );
+  if (explicitTrigger) return explicitTrigger;
+
+  return (
+    Array.from(root.children).find(
+      (child): child is HTMLElement =>
+        child instanceof HTMLElement && !child.matches('[data-tooltip-panel]'),
+    ) ?? null
+  );
+}
+
+function isNaturallyFocusable(element: HTMLElement): boolean {
+  return element.matches(
+    'a[href], button, input, select, textarea, summary, [contenteditable="true"]',
+  );
+}
+
+function getCssLength(
+  element: HTMLElement,
+  property: string,
+  fallback: number,
+): number {
+  const value = Number.parseFloat(
+    window.getComputedStyle(element).getPropertyValue(property),
+  );
+  return Number.isFinite(value) ? value : fallback;
+}
+
+function getViewportBounds() {
+  const viewport = window.visualViewport;
+  const left = viewport?.offsetLeft ?? 0;
+  const top = viewport?.offsetTop ?? 0;
+
+  return {
+    left,
+    top,
+    right: left + (viewport?.width ?? document.documentElement.clientWidth),
+    bottom: top + (viewport?.height ?? document.documentElement.clientHeight),
+  };
+}
+
+function appendDescriptionId(
+  currentValue: string | null,
+  panelId: string,
+): string {
+  return [...new Set([...(currentValue?.split(/\s+/) ?? []), panelId])]
+    .filter(Boolean)
+    .join(' ');
+}
+
+export function initTooltip(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') return noop;
+
+  const trigger = getTrigger(root);
+  const panel = root.querySelector<HTMLElement>(
+    ':scope > [data-tooltip-panel]',
+  );
+  if (!trigger || !panel) return noop;
+
+  const hoverOnly = root.dataset.tooltipActivation === 'hover';
+  root.setAttribute(initializedAttribute, 'true');
+  const hadTriggerAttribute = trigger.hasAttribute('data-tooltip-trigger');
+  trigger.setAttribute('data-tooltip-trigger', '');
+
+  const previousTabIndex = trigger.getAttribute('tabindex');
+  const previousDescription = trigger.getAttribute('aria-describedby');
+  const previousPanelId = panel.id;
+
+  if (
+    !hoverOnly &&
+    !isNaturallyFocusable(trigger) &&
+    previousTabIndex === null
+  ) {
+    trigger.tabIndex = 0;
+  }
+
+  if (!panel.id) {
+    nextTooltipId += 1;
+    panel.id = `nox-tooltip-${nextTooltipId}`;
+    panel.setAttribute(generatedIdAttribute, 'true');
+  }
+  trigger.setAttribute(
+    'aria-describedby',
+    appendDescriptionId(previousDescription, panel.id),
+  );
+
+  let closeTimer: number | undefined;
+  let positionFrame: number | undefined;
+  let hoveredTrigger = false;
+  let hoveredPanel = false;
+  let openListenersActive = false;
+  let pinned = false;
+
+  const isOpen = (): boolean => panel.matches(':popover-open');
+
+  const cancelScheduledClose = (): void => {
+    if (closeTimer === undefined) return;
+    window.clearTimeout(closeTimer);
+    closeTimer = undefined;
+  };
+
+  const position = (): void => {
+    if (!isOpen()) return;
+
+    const viewport = getViewportBounds();
+    const viewportGap = getCssLength(panel, '--tooltip-viewport-gap', 8);
+    const triggerGap = getCssLength(panel, '--tooltip-trigger-gap', 8);
+    const triggerRect = trigger.getBoundingClientRect();
+    const boundary =
+      root.dataset.tooltipAlignTo === 'boundary'
+        ? root.closest<HTMLElement>('[data-tooltip-boundary]')
+        : null;
+    const boundaryRect = boundary?.getBoundingClientRect();
+    const horizontalLeft = Math.max(
+      viewport.left + viewportGap,
+      boundaryRect?.left ?? viewport.left + viewportGap,
+    );
+    const horizontalRight = Math.min(
+      viewport.right - viewportGap,
+      boundaryRect?.right ?? viewport.right - viewportGap,
+    );
+    const maximumInlineSize = Math.max(
+      0,
+      horizontalRight - horizontalLeft,
+    );
+    const maximumBlockSize = Math.max(
+      0,
+      viewport.bottom - viewport.top - viewportGap * 2,
+    );
+
+    panel.style.maxInlineSize = `${Math.floor(maximumInlineSize)}px`;
+    panel.style.maxBlockSize = `${Math.floor(maximumBlockSize)}px`;
+    panel.style.visibility = 'hidden';
+    panel.style.left = `${Math.round(horizontalLeft)}px`;
+    panel.style.top = `${Math.round(viewport.top + viewportGap)}px`;
+
+    const measuredPanel = panel.getBoundingClientRect();
+    const availableAbove =
+      triggerRect.top - viewport.top - viewportGap - triggerGap;
+    const availableBelow =
+      viewport.bottom - triggerRect.bottom - viewportGap - triggerGap;
+    const placement =
+      measuredPanel.height <= availableAbove || availableAbove >= availableBelow
+        ? 'top'
+        : 'bottom';
+    const availableBlockSize = Math.max(
+      0,
+      placement === 'top' ? availableAbove : availableBelow,
+    );
+
+    panel.style.maxBlockSize = `${Math.floor(availableBlockSize)}px`;
+    const panelRect = panel.getBoundingClientRect();
+    const horizontalAnchor = boundaryRect ?? triggerRect;
+    const centeredLeft =
+      horizontalAnchor.left + (horizontalAnchor.width - panelRect.width) / 2;
+    const left = Math.min(
+      horizontalRight - panelRect.width,
+      Math.max(horizontalLeft, centeredLeft),
+    );
+    const top =
+      placement === 'top'
+        ? triggerRect.top - triggerGap - panelRect.height
+        : triggerRect.bottom + triggerGap;
+
+    panel.style.left = `${Math.round(left)}px`;
+    panel.style.top = `${Math.round(top)}px`;
+    panel.style.removeProperty('visibility');
+  };
+
+  const requestPosition = (): void => {
+    if (!isOpen() || positionFrame !== undefined) return;
+    positionFrame = window.requestAnimationFrame(() => {
+      positionFrame = undefined;
+      position();
+    });
+  };
+
+  const hide = (): void => {
+    cancelScheduledClose();
+    removeOpenListeners();
+    if (!isOpen()) return;
+
+    panel.hidePopover();
+    panel.hidden = true;
+    panel.style.removeProperty('left');
+    panel.style.removeProperty('top');
+    panel.style.removeProperty('max-inline-size');
+    panel.style.removeProperty('max-block-size');
+    panel.style.removeProperty('visibility');
+  };
+
+  const close = (): void => {
+    pinned = false;
+    hide();
+  };
+
+  const show = (): void => {
+    cancelScheduledClose();
+    if (isOpen()) {
+      requestPosition();
+      return;
+    }
+
+    document.dispatchEvent(
+      new CustomEvent('tooltip:open', { detail: { root } }),
+    );
+    panel.hidden = false;
+    panel.showPopover();
+    position();
+    addOpenListeners();
+  };
+
+  const scheduleClose = (): void => {
+    cancelScheduledClose();
+    closeTimer = window.setTimeout(() => {
+      closeTimer = undefined;
+      if (
+        !pinned &&
+        !hoveredTrigger &&
+        !hoveredPanel &&
+        !trigger.matches(':focus-within')
+      ) {
+        hide();
+      }
+    }, hideDelayMs);
+  };
+
+  const handleTriggerPointerEnter = (event: PointerEvent): void => {
+    if (hoverOnly && event.pointerType === 'touch') return;
+    hoveredTrigger = true;
+    show();
+  };
+  const handleTriggerPointerLeave = (event: PointerEvent): void => {
+    if (hoverOnly && event.pointerType === 'touch') return;
+    hoveredTrigger = false;
+
+    if (hoverOnly) {
+      if (!trigger.matches(':focus-within')) hide();
+      return;
+    }
+
+    scheduleClose();
+  };
+  const handlePanelPointerEnter = (): void => {
+    hoveredPanel = true;
+    cancelScheduledClose();
+  };
+  const handlePanelPointerLeave = (): void => {
+    hoveredPanel = false;
+    scheduleClose();
+  };
+  const handleFocusIn = (): void => {
+    if (
+      hoverOnly &&
+      !trigger.matches(':focus-visible') &&
+      !trigger.querySelector(':focus-visible')
+    ) {
+      return;
+    }
+
+    show();
+  };
+  const handleFocusOut = (): void => scheduleClose();
+  const handleTriggerClick = (): void => {
+    if (pinned) {
+      close();
+      return;
+    }
+
+    pinned = true;
+    show();
+  };
+  const handleDocumentPointerDown = (event: PointerEvent): void => {
+    if (
+      event.target instanceof Node &&
+      (root.contains(event.target) || trigger.contains(event.target))
+    ) {
+      return;
+    }
+    close();
+  };
+  const handleDocumentKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape' && isOpen()) close();
+  };
+  const handleOtherTooltipOpen = (event: Event): void => {
+    if (!(event instanceof CustomEvent) || event.detail?.root === root) return;
+    close();
+  };
+  function addOpenListeners(): void {
+    if (openListenersActive) return;
+    openListenersActive = true;
+    document.addEventListener('pointerdown', handleDocumentPointerDown);
+    document.addEventListener('keydown', handleDocumentKeyDown);
+    document.addEventListener('tooltip:open', handleOtherTooltipOpen);
+    window.addEventListener('resize', requestPosition);
+    window.addEventListener('scroll', requestPosition, true);
+    window.visualViewport?.addEventListener('resize', requestPosition);
+    window.visualViewport?.addEventListener('scroll', requestPosition);
+  }
+  function removeOpenListeners(): void {
+    if (!openListenersActive) return;
+    openListenersActive = false;
+    document.removeEventListener('pointerdown', handleDocumentPointerDown);
+    document.removeEventListener('keydown', handleDocumentKeyDown);
+    document.removeEventListener('tooltip:open', handleOtherTooltipOpen);
+    window.removeEventListener('resize', requestPosition);
+    window.removeEventListener('scroll', requestPosition, true);
+    window.visualViewport?.removeEventListener('resize', requestPosition);
+    window.visualViewport?.removeEventListener('scroll', requestPosition);
+  }
+
+  trigger.addEventListener('pointerenter', handleTriggerPointerEnter);
+  trigger.addEventListener('pointerleave', handleTriggerPointerLeave);
+  trigger.addEventListener('focusin', handleFocusIn);
+  trigger.addEventListener('focusout', handleFocusOut);
+  if (!hoverOnly) trigger.addEventListener('click', handleTriggerClick);
+  if (!hoverOnly) {
+    panel.addEventListener('pointerenter', handlePanelPointerEnter);
+    panel.addEventListener('pointerleave', handlePanelPointerLeave);
+  }
+
+  return () => {
+    close();
+    cancelScheduledClose();
+    if (positionFrame !== undefined) {
+      window.cancelAnimationFrame(positionFrame);
+    }
+    trigger.removeEventListener('pointerenter', handleTriggerPointerEnter);
+    trigger.removeEventListener('pointerleave', handleTriggerPointerLeave);
+    trigger.removeEventListener('focusin', handleFocusIn);
+    trigger.removeEventListener('focusout', handleFocusOut);
+    if (!hoverOnly) trigger.removeEventListener('click', handleTriggerClick);
+    if (!hoverOnly) {
+      panel.removeEventListener('pointerenter', handlePanelPointerEnter);
+      panel.removeEventListener('pointerleave', handlePanelPointerLeave);
+    }
+    removeOpenListeners();
+
+    if (previousTabIndex === null) trigger.removeAttribute('tabindex');
+    else trigger.setAttribute('tabindex', previousTabIndex);
+
+    if (previousDescription === null) {
+      trigger.removeAttribute('aria-describedby');
+    } else {
+      trigger.setAttribute('aria-describedby', previousDescription);
+    }
+
+    if (!hadTriggerAttribute) trigger.removeAttribute('data-tooltip-trigger');
+    if (panel.hasAttribute(generatedIdAttribute)) {
+      panel.removeAttribute(generatedIdAttribute);
+      panel.id = previousPanelId;
+    }
+    root.removeAttribute(initializedAttribute);
+  };
+}

package/src/components/forms/FieldError/FieldError.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+type Props = HTMLAttributes<'p'> & {
+  text?: string;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  hidden,
+  text = '',
+  tone = 'danger',
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = dataTone ?? tone;
+---
+
+<p
+  {...attrs}
+  class:list={['field-error', className]}
+  data-tone={resolvedTone}
+  data-widget="field-error"
+  role="status"
+  aria-live="polite"
+  hidden={hidden ?? text.length === 0}
+>
+  {text}
+</p>

package/src/components/forms/FieldError/FieldError.css

@@ -0,0 +1,12 @@
+.field-error {
+  margin: 0;
+  color: var(--nox-tone-color);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-medium);
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.field-error[hidden] {
+  display: none;
+}

package/src/components/forms/FieldError/fieldErrorState.ts

@@ -0,0 +1,21 @@
+export function setFieldError(
+  control: HTMLElement,
+  error: HTMLElement,
+  message: string,
+): void {
+  const invalid = message.length > 0;
+
+  control.toggleAttribute('data-invalid', invalid);
+  if (invalid) control.setAttribute('aria-invalid', 'true');
+  else control.removeAttribute('aria-invalid');
+
+  error.textContent = message;
+  error.hidden = !invalid;
+}
+
+export function clearFieldError(
+  control: HTMLElement,
+  error: HTMLElement,
+): void {
+  setFieldError(control, error, '');
+}

package/src/components/forms/FieldLabel/FieldLabel.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+type Props = HTMLAttributes<'label'> & {
+  for: string;
+  disabled?: boolean;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  disabled = false,
+  for: htmlFor,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<label
+  {...attrs}
+  class:list={['field-label', className]}
+  for={htmlFor}
+  data-widget="field-label"
+  data-disabled={disabled ? true : undefined}
+  data-tone={resolvedTone}
+  aria-disabled={disabled ? 'true' : undefined}
+>
+  <slot />
+</label>

package/src/components/forms/FieldLabel/FieldLabel.css

@@ -0,0 +1,17 @@
+.field-label {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  color: var(--nox-tone-text);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wide);
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+  text-transform: uppercase;
+}
+
+.field-label[data-disabled] {
+  color: var(--nox-text-disabled);
+  cursor: not-allowed;
+}

package/src/components/forms/TextInput/TextInput.astro

@@ -0,0 +1,79 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+import CloseIcon from '../../icons/CloseIcon.astro';
+
+type TextInputFraming = 'embedded' | 'standalone';
+type TextInputType = 'search' | 'text';
+type TextInputAutofocus = boolean | 'desktop';
+
+type Props = Omit<HTMLAttributes<'input'>, 'autofocus' | 'type'> & {
+  autofocus?: TextInputAutofocus;
+  clearable?: boolean;
+  clearLabel?: string;
+  framing?: TextInputFraming;
+  invalid?: boolean;
+  tone?: Tone;
+  type?: TextInputType;
+};
+
+const {
+  'aria-invalid': ariaInvalid,
+  autofocus = false,
+  class: className,
+  clearable: requestedClearable,
+  clearLabel = 'Effacer le champ',
+  'data-tone': dataTone,
+  framing = 'standalone',
+  invalid = false,
+  tone,
+  type = 'text',
+  ...attrs
+}: Props = Astro.props;
+const clearable = requestedClearable ?? type === 'search';
+const resolvedInvalid =
+  invalid || ariaInvalid === true || ariaInvalid === 'true';
+const resolvedTone = tone ?? dataTone;
+---
+
+<span
+  class="text-input-field"
+  data-clearable={clearable ? true : undefined}
+  data-framing={framing}
+  data-tone={resolvedTone}
+  data-text-input-autofocus={autofocus === 'desktop' ? 'desktop' : undefined}
+  data-text-input-field
+>
+  <input
+    {...attrs}
+    class:list={['text-input', className]}
+    type={type}
+    autofocus={autofocus === true}
+    data-widget="text-input"
+    data-framing={framing}
+    data-invalid={resolvedInvalid ? true : undefined}
+    aria-invalid={resolvedInvalid ? 'true' : ariaInvalid}
+    data-text-input-control
+  />
+  {
+    clearable ? (
+      <button
+        class="text-input__clear"
+        type="button"
+        aria-label={clearLabel}
+        data-text-input-clear
+        hidden
+      >
+        <CloseIcon />
+      </button>
+    ) : null
+  }
+</span>
+
+<script>
+  import { initTextInput } from './textInputController';
+
+  for (const root of document.querySelectorAll('[data-text-input-field]')) {
+    if (root instanceof HTMLElement) initTextInput(root);
+  }
+</script>

package/src/components/forms/TextInput/TextInput.css

@@ -0,0 +1,121 @@
+.text-input-field {
+  position: relative;
+  display: grid;
+  min-width: 0;
+  color: var(--nox-field-color);
+}
+
+.text-input {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: var(--nox-field-control-block-size);
+  padding: 0 var(--nox-field-control-padding-inline);
+  border: var(--nox-border-width) solid var(--nox-field-border);
+  border-radius: var(--nox-radius-sm);
+  outline: 0;
+  background: var(--nox-field-background);
+  color: var(--nox-field-color);
+  font-family: inherit;
+  font-size: var(--nox-field-control-font-size);
+  font-weight: var(--nox-font-weight-regular);
+  letter-spacing: 0;
+  line-height: 1.35;
+  text-align: start;
+  transition:
+    border-color var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+    box-shadow var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+}
+
+.text-input-field[data-clearable] .text-input {
+  padding-inline-end: calc(var(--nox-field-control-padding-inline) + 1.25rem);
+}
+
+.text-input[type='search'] {
+  appearance: textfield;
+}
+
+.text-input[type='search']::-webkit-search-cancel-button {
+  display: none;
+}
+
+.text-input::placeholder {
+  color: var(--nox-field-placeholder);
+  opacity: 1;
+}
+
+.text-input[data-framing='embedded'] {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.text-input-field:focus-within .text-input,
+.text-input:focus {
+  border-color: var(--nox-field-border-active);
+  box-shadow: var(--nox-field-focus-shadow);
+}
+
+.text-input-field[data-framing='embedded']:focus-within .text-input,
+.text-input[data-framing='embedded']:focus {
+  box-shadow: none;
+}
+
+.text-input[data-invalid] {
+  border-color: var(--nox-field-border-invalid);
+}
+
+.text-input:disabled {
+  background: var(--nox-field-background-disabled);
+  color: var(--nox-text-disabled);
+  cursor: not-allowed;
+}
+
+.text-input:disabled::placeholder {
+  color: var(--nox-text-disabled);
+}
+
+.text-input__clear {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: var(--nox-space-2);
+  display: grid;
+  inline-size: 1.5rem;
+  padding: 0;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  color: var(--nox-tone-color);
+  cursor: pointer;
+}
+
+.text-input__clear[hidden] {
+  display: none;
+}
+
+.text-input__clear svg {
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+}
+
+.text-input__clear:focus-visible {
+  outline: 0;
+  color: var(--nox-tone-text);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .text-input:not(:disabled):not(:focus):not([data-invalid]):hover {
+    border-color: var(--nox-field-border-hover);
+  }
+
+  .text-input__clear:hover {
+    color: var(--nox-tone-text);
+  }
+}
+
+@media (width < 48rem), (hover: none) and (pointer: coarse) {
+  .text-input {
+    font-size: var(--nox-font-size-md);
+  }
+}