@astronox/core 0.3.1 → 0.4.1

package/src/patterns/Combobox/comboboxController.ts

@@ -352,6 +352,7 @@ export function initCombobox(root: HTMLElement): () => void {
   let activeOption: HTMLButtonElement | null = null;
   let positionFrame: number | null = null;
   let viewportListenersAttached = false;
+  let openAtPointerDown: boolean | null = null;
 
   const isOpen = (): boolean => root.hasAttribute('data-combobox-open');
 
@@ -391,6 +392,18 @@ export function initCombobox(root: HTMLElement): () => void {
     }
   };
 
+  const scrollOptionIntoView = (option: HTMLElement | null): void => {
+    if (!option) return;
+    const optionsRect = optionsRoot.getBoundingClientRect();
+    const optionRect = option.getBoundingClientRect();
+
+    if (optionRect.top < optionsRect.top) {
+      optionsRoot.scrollTop -= optionsRect.top - optionRect.top;
+    } else if (optionRect.bottom > optionsRect.bottom) {
+      optionsRoot.scrollTop += optionRect.bottom - optionsRect.bottom;
+    }
+  };
+
   const positionPanel = (): void => {
     if (!isOpen()) return;
 
@@ -490,7 +503,13 @@ export function initCombobox(root: HTMLElement): () => void {
     const target = event.target;
     if (target instanceof Node && panel.contains(target)) return;
 
-    if (window.matchMedia(compactViewportQuery).matches) {
+    const siteViewport = document.querySelector<HTMLElement>(
+      '[data-site-viewport]',
+    );
+    const isSiteScroll = siteViewport
+      ? target === siteViewport
+      : target === document || target === window;
+    if (isSiteScroll && window.matchMedia(compactViewportQuery).matches) {
       close();
       blurFocusedDescendant();
       return;
@@ -547,6 +566,10 @@ export function initCombobox(root: HTMLElement): () => void {
     resetFilter();
     if (panel.matches(':popover-open')) panel.hidePopover();
     panel.hidden = true;
+    panel.style.removeProperty('--combobox-panel-inline-start');
+    panel.style.removeProperty('--combobox-panel-block-start');
+    panel.style.removeProperty('--combobox-panel-inline-size');
+    panel.style.removeProperty('--combobox-panel-available-block-size');
 
     if (restoreFocus) owner.focus();
   };
@@ -573,7 +596,7 @@ export function initCombobox(root: HTMLElement): () => void {
         (option) => option.getAttribute('aria-selected') === 'true',
       ) ?? null;
     setActiveOption(null);
-    selectedOption?.scrollIntoView({ block: 'nearest' });
+    scrollOptionIntoView(selectedOption);
 
     if (focusSearch && search) {
       window.requestAnimationFrame(() => {
@@ -601,7 +624,7 @@ export function initCombobox(root: HTMLElement): () => void {
           visibleOptions.length;
     const nextOption = visibleOptions[nextIndex] ?? null;
     setActiveOption(nextOption);
-    nextOption?.scrollIntoView({ block: 'nearest' });
+    scrollOptionIntoView(nextOption);
   };
 
   const selectOption = (
@@ -687,13 +710,23 @@ export function initCombobox(root: HTMLElement): () => void {
   };
 
   const toggleControl = (restoreFocus = true): void => {
-    if (isOpen()) {
+    const wasOpen = openAtPointerDown ?? isOpen();
+    openAtPointerDown = null;
+    if (wasOpen) {
       close(restoreFocus);
     } else {
       open();
     }
   };
 
+  const handleOwnerPointerDown = (): void => {
+    openAtPointerDown = isOpen();
+  };
+
+  const handleOwnerPointerCancel = (): void => {
+    openAtPointerDown = null;
+  };
+
   const handleOptionsTriggerClick = (): void => {
     toggleControl(false);
   };
@@ -703,6 +736,7 @@ export function initCombobox(root: HTMLElement): () => void {
   };
 
   const handleOwnerKeydown = (event: KeyboardEvent): void => {
+    openAtPointerDown = null;
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
       if (!isOpen()) {
@@ -799,12 +833,9 @@ export function initCombobox(root: HTMLElement): () => void {
   const handleNumberInputClick = (): void => {
     if (!numberInput) return;
 
-    if (isOpen()) {
-      close();
-    } else {
-      open(false);
-      numberInput.select();
-    }
+    const wasOpen = openAtPointerDown ?? isOpen();
+    toggleControl(false);
+    if (!wasOpen) numberInput.select();
   };
 
   const handleNumberInput = (): void => {
@@ -825,7 +856,7 @@ export function initCombobox(root: HTMLElement): () => void {
       });
     }
     setActiveOption(matchingOption ?? null);
-    matchingOption?.scrollIntoView({ block: 'nearest' });
+    scrollOptionIntoView(matchingOption ?? null);
   };
 
   const handleNumberInputChange = (): void => {
@@ -851,7 +882,7 @@ export function initCombobox(root: HTMLElement): () => void {
           (option) => option.getAttribute('aria-selected') === 'true',
         ) ?? null;
       setActiveOption(selectedOption);
-      selectedOption?.scrollIntoView({ block: 'nearest' });
+      scrollOptionIntoView(selectedOption);
     }
   };
 
@@ -877,6 +908,8 @@ export function initCombobox(root: HTMLElement): () => void {
 
   if (mode === 'options' && trigger && search) {
     control.addEventListener('click', handleOptionsControlClick);
+    trigger.addEventListener('pointerdown', handleOwnerPointerDown);
+    trigger.addEventListener('pointercancel', handleOwnerPointerCancel);
     trigger.addEventListener('click', handleOptionsTriggerClick);
     trigger.addEventListener('keydown', handleOwnerKeydown);
     search.addEventListener('input', filterOptions);
@@ -884,6 +917,8 @@ export function initCombobox(root: HTMLElement): () => void {
   }
 
   if (mode === 'number' && numberInput) {
+    numberInput.addEventListener('pointerdown', handleOwnerPointerDown);
+    numberInput.addEventListener('pointercancel', handleOwnerPointerCancel);
     numberInput.addEventListener('click', handleNumberInputClick);
     numberInput.addEventListener('input', handleNumberInput);
     numberInput.addEventListener('change', handleNumberInputChange);
@@ -908,10 +943,14 @@ export function initCombobox(root: HTMLElement): () => void {
     detachViewportListeners();
     controlResizeObserver?.disconnect();
     control.removeEventListener('click', handleOptionsControlClick);
+    trigger?.removeEventListener('pointerdown', handleOwnerPointerDown);
+    trigger?.removeEventListener('pointercancel', handleOwnerPointerCancel);
     trigger?.removeEventListener('click', handleOptionsTriggerClick);
     trigger?.removeEventListener('keydown', handleOwnerKeydown);
     search?.removeEventListener('input', filterOptions);
     search?.removeEventListener('keydown', handleSearchKeydown);
+    numberInput?.removeEventListener('pointerdown', handleOwnerPointerDown);
+    numberInput?.removeEventListener('pointercancel', handleOwnerPointerCancel);
     numberInput?.removeEventListener('click', handleNumberInputClick);
     numberInput?.removeEventListener('input', handleNumberInput);
     numberInput?.removeEventListener('change', handleNumberInputChange);

package/src/patterns/Dropdown/dropdownController.ts

@@ -25,6 +25,7 @@ export function initDropdown(root: HTMLElement): () => void {
   const triggerMode = getTriggerMode(root);
   const hoverMedia = window.matchMedia('(hover: hover)');
   let isOpen = !content.hidden;
+  let openAtPointerDown: boolean | null = null;
 
   const canOpenOnHover = (): boolean =>
     triggerMode === 'hover' && hoverMedia.matches;
@@ -61,12 +62,17 @@ export function initDropdown(root: HTMLElement): () => void {
   };
 
   const handleTriggerClick = (): void => {
-    if (canOpenOnHover()) {
-      setOpen(true);
-      return;
-    }
+    const wasOpen = openAtPointerDown ?? isOpen;
+    openAtPointerDown = null;
+    setOpen(!wasOpen);
+  };
+
+  const handleTriggerPointerDown = (): void => {
+    openAtPointerDown = isOpen;
+  };
 
-    setOpen(!isOpen);
+  const handleTriggerPointerCancel = (): void => {
+    openAtPointerDown = null;
   };
 
   const handleRootPointerEnter = (): void => {
@@ -88,12 +94,13 @@ export function initDropdown(root: HTMLElement): () => void {
   };
 
   const handleTriggerFocus = (): void => {
-    if (triggerMode === 'hover') {
+    if (canOpenOnHover()) {
       setOpen(true);
     }
   };
 
   const handleTriggerKeydown = (event: KeyboardEvent): void => {
+    openAtPointerDown = null;
     if (event.key === 'ArrowDown') {
       event.preventDefault();
       openAndFocusFirstItem();
@@ -131,6 +138,8 @@ export function initDropdown(root: HTMLElement): () => void {
 
   setOpen(isOpen);
 
+  trigger.addEventListener('pointerdown', handleTriggerPointerDown);
+  trigger.addEventListener('pointercancel', handleTriggerPointerCancel);
   trigger.addEventListener('click', handleTriggerClick);
   trigger.addEventListener('focus', handleTriggerFocus);
   trigger.addEventListener('keydown', handleTriggerKeydown);
@@ -143,6 +152,8 @@ export function initDropdown(root: HTMLElement): () => void {
 
   return () => {
     close();
+    trigger.removeEventListener('pointerdown', handleTriggerPointerDown);
+    trigger.removeEventListener('pointercancel', handleTriggerPointerCancel);
     trigger.removeEventListener('click', handleTriggerClick);
     trigger.removeEventListener('focus', handleTriggerFocus);
     trigger.removeEventListener('keydown', handleTriggerKeydown);

package/src/patterns/Fullscreen/FullscreenControl.astro

@@ -4,13 +4,6 @@ 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 FullscreenUnsupportedFallback = {
-  href: string;
-  label: string;
-  target?: '_blank' | '_self';
-};
 
 type Props = Omit<
   HTMLAttributes<'button'>,
@@ -21,7 +14,7 @@ type Props = Omit<
   exitLabel: string;
   targetId: string;
   tone?: Tone;
-  unsupportedFallback?: FullscreenUnsupportedFallback;
+  unavailableLabel?: string;
 };
 
 const {
@@ -30,7 +23,7 @@ const {
   exitLabel,
   targetId,
   tone,
-  unsupportedFallback,
+  unavailableLabel = enterLabel,
   ...attrs
 }: Props = Astro.props;
 const resolvedClass = ['fullscreen-control', className]
@@ -54,6 +47,7 @@ const resolvedClass = ['fullscreen-control', className]
   data-fullscreen-enter-label={enterLabel}
   data-fullscreen-exit-label={exitLabel}
   data-fullscreen-target={targetId}
+  data-fullscreen-unavailable-label={unavailableLabel}
 >
   <span class="fullscreen-control__icon" data-fullscreen-enter-icon>
     <EnterFullscreenIcon />
@@ -63,27 +57,6 @@ const resolvedClass = ['fullscreen-control', className]
   </span>
 </Button>
 
-{
-  unsupportedFallback ? (
-    <Button
-      href={unsupportedFallback.href}
-      target={unsupportedFallback.target ?? '_blank'}
-      borderless
-      full
-      iconOnly
-      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';
 

package/src/patterns/Fullscreen/fullscreenController.ts

@@ -6,32 +6,30 @@ export function initFullscreenControl(control: HTMLButtonElement): () => void {
 
   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;
+  const initiallyDisabled = control.disabled;
+  const enterLabel = control.dataset.fullscreenEnterLabel ?? '';
+  const exitLabel = control.dataset.fullscreenExitLabel ?? '';
+  const unavailableLabel =
+    control.dataset.fullscreenUnavailableLabel ?? enterLabel;
+  const setUnavailable = (): void => {
+    control.disabled = true;
+    control.setAttribute('aria-disabled', 'true');
+    control.setAttribute('aria-label', unavailableLabel);
+    control.setAttribute('aria-pressed', 'false');
+    control.title = unavailableLabel;
+    control.setAttribute('data-fullscreen-unavailable', '');
   };
   if (
     document.fullscreenEnabled !== true ||
     !target ||
     typeof target.requestFullscreen !== 'function'
   ) {
-    showUnsupportedFallback();
+    setUnavailable();
     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;
@@ -49,11 +47,7 @@ export function initFullscreenControl(control: HTMLButtonElement): () => void {
         await target.requestFullscreen();
       }
     } catch {
-      if (fallback instanceof HTMLAnchorElement) {
-        showUnsupportedFallback();
-      } else {
-        sync();
-      }
+      setUnavailable();
     }
   };
 
@@ -65,7 +59,9 @@ export function initFullscreenControl(control: HTMLButtonElement): () => void {
     control.removeEventListener('click', toggle);
     document.removeEventListener('fullscreenchange', sync);
     control.removeAttribute(initializedAttribute);
-    control.hidden = false;
-    if (fallback instanceof HTMLAnchorElement) fallback.hidden = true;
+    control.removeAttribute('data-fullscreen-unavailable');
+    control.removeAttribute('aria-disabled');
+    control.disabled = initiallyDisabled;
+    sync();
   };
 }

package/src/patterns/Table/Table.css

@@ -49,7 +49,10 @@
 
 .table[data-table-sticky-header]:has([data-sticky-surface])
   [data-table-header] {
-  top: calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size));
+  top: var(
+    --surface-group-sticky-occlusion-size,
+    calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size))
+  );
 }
 
 @container nox-table (width < 32rem) {
@@ -60,7 +63,10 @@
 
   .table[data-table-sticky-header]:has([data-sticky-surface])
     [data-table-header] {
-    top: calc(var(--nox-layout-gap) + var(--nox-section-compact-block-size));
+    top: var(
+      --surface-group-sticky-occlusion-size,
+      calc(var(--nox-layout-gap) + var(--nox-section-compact-block-size))
+    );
   }
 }
 

package/src/patterns/Table/TableFilterPanel.astro

@@ -0,0 +1,84 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { DisplayMedia } from '../../display/contracts';
+import type { Tone } from '../../theme/contracts';
+import type {
+  AstroComponent,
+  HeadingLevel,
+} from '../../components/widgetTypes';
+import ArrowDownIcon from '../../components/icons/ArrowDownIcon.astro';
+import CardBody from '../../components/content/CardBody/CardBody.astro';
+import CardHeader from '../../components/content/CardHeader/CardHeader.astro';
+import SurfaceGroup from '../../composition/SurfaceGroup/SurfaceGroup.astro';
+
+type HeaderVisual =
+  | { icon?: AstroComponent; media?: never }
+  | { icon?: never; media: DisplayMedia };
+
+type Props = Omit<HTMLAttributes<'div'>, 'id'> &
+  HeaderVisual & {
+    id: string;
+    title: string;
+    collapseAt?: 'sm' | 'md' | 'lg' | 'xl';
+    headingLevel?: HeadingLevel;
+    tone?: Tone;
+  };
+
+const {
+  class: className,
+  collapseAt = 'lg',
+  headingLevel = 2,
+  icon,
+  id,
+  media,
+  title,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const contentId = `${id}-content`;
+const hasAction = Astro.slots.has('action');
+const headerVisual: HeaderVisual = media ? { media } : { icon };
+---
+
+<SurfaceGroup
+  {...attrs}
+  id={id}
+  class:list={['table-filter-panel', className]}
+  data-table-filter-panel
+  data-table-filter-panel-collapse-at={collapseAt}
+  tone={tone}
+>
+  <CardHeader
+    {...headerVisual}
+    title={title}
+    headingLevel={headingLevel}
+    tone={tone}
+    trigger={{
+      controls: contentId,
+      expanded: false,
+      label: title,
+    }}
+  >
+    <span slot="end" class="table-filter-panel__indicator" aria-hidden="true">
+      <ArrowDownIcon />
+    </span>
+    {
+      hasAction ? (
+        <Fragment slot="action">
+          <slot name="action" />
+        </Fragment>
+      ) : null
+    }
+  </CardHeader>
+  <CardBody id={contentId} overlayBoundary data-table-filter-panel-content>
+    <slot />
+  </CardBody>
+</SurfaceGroup>
+
+<script>
+  import { initTableFilterPanel } from './tableFilterPanelController';
+
+  for (const root of document.querySelectorAll('[data-table-filter-panel]')) {
+    if (root instanceof HTMLElement) initTableFilterPanel(root);
+  }
+</script>

package/src/patterns/Table/TableFilterPanel.css

@@ -0,0 +1,139 @@
+.table-filter-panel__indicator {
+  display: none;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  flex: none;
+  transition: transform var(--nox-motion-duration-sm)
+    var(--nox-motion-easing-standard);
+}
+
+.table-filter-panel .card-header__trigger {
+  display: none;
+}
+
+.table-filter-panel__indicator > svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.table-filter-panel[data-table-filter-panel-compact]
+  .table-filter-panel__indicator {
+  display: block;
+}
+
+.table-filter-panel[data-table-filter-panel-compact] .card-header__trigger {
+  display: block;
+}
+
+.table-filter-panel[data-table-filter-panel-compact]:not(
+    [data-table-filter-panel-open]
+  ) {
+  --surface-group-connected-border-end-radius: var(--nox-radius-md);
+}
+
+.table-filter-panel[data-table-filter-panel-compact]:not(
+    [data-table-filter-panel-open]
+  )
+  > [data-table-filter-panel-content] {
+  display: none;
+}
+
+.table-filter-panel[data-table-filter-panel-compact][data-table-filter-panel-open]
+  .table-filter-panel__indicator {
+  transform: rotate(180deg);
+}
+
+@container nox-grid (width < 24rem) {
+  .table-filter-panel[data-table-filter-panel-collapse-at='sm']:not(
+      [data-table-filter-panel-open]
+    ) {
+    --surface-group-connected-border-end-radius: var(--nox-radius-md);
+  }
+
+  .table-filter-panel[data-table-filter-panel-collapse-at='sm']
+    .table-filter-panel__indicator,
+  .table-filter-panel[data-table-filter-panel-collapse-at='sm']
+    .card-header__trigger {
+    display: block;
+  }
+
+  .table-filter-panel[data-table-filter-panel-collapse-at='sm']:not(
+      [data-table-filter-panel-open]
+    )
+    > [data-table-filter-panel-content] {
+    display: none;
+  }
+}
+
+@container nox-grid (width < 36rem) {
+  .table-filter-panel[data-table-filter-panel-collapse-at='md']:not(
+      [data-table-filter-panel-open]
+    ) {
+    --surface-group-connected-border-end-radius: var(--nox-radius-md);
+  }
+
+  .table-filter-panel[data-table-filter-panel-collapse-at='md']
+    .table-filter-panel__indicator,
+  .table-filter-panel[data-table-filter-panel-collapse-at='md']
+    .card-header__trigger {
+    display: block;
+  }
+
+  .table-filter-panel[data-table-filter-panel-collapse-at='md']:not(
+      [data-table-filter-panel-open]
+    )
+    > [data-table-filter-panel-content] {
+    display: none;
+  }
+}
+
+@container nox-grid (width < 44rem) {
+  .table-filter-panel[data-table-filter-panel-collapse-at='lg']:not(
+      [data-table-filter-panel-open]
+    ) {
+    --surface-group-connected-border-end-radius: var(--nox-radius-md);
+  }
+
+  .table-filter-panel[data-table-filter-panel-collapse-at='lg']
+    .table-filter-panel__indicator,
+  .table-filter-panel[data-table-filter-panel-collapse-at='lg']
+    .card-header__trigger {
+    display: block;
+  }
+
+  .table-filter-panel[data-table-filter-panel-collapse-at='lg']:not(
+      [data-table-filter-panel-open]
+    )
+    > [data-table-filter-panel-content] {
+    display: none;
+  }
+}
+
+@container nox-grid (width < 54rem) {
+  .table-filter-panel[data-table-filter-panel-collapse-at='xl']:not(
+      [data-table-filter-panel-open]
+    ) {
+    --surface-group-connected-border-end-radius: var(--nox-radius-md);
+  }
+
+  .table-filter-panel[data-table-filter-panel-collapse-at='xl']
+    .table-filter-panel__indicator,
+  .table-filter-panel[data-table-filter-panel-collapse-at='xl']
+    .card-header__trigger {
+    display: block;
+  }
+
+  .table-filter-panel[data-table-filter-panel-collapse-at='xl']:not(
+      [data-table-filter-panel-open]
+    )
+    > [data-table-filter-panel-content] {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .table-filter-panel__indicator {
+    transition: none;
+  }
+}

package/src/patterns/Table/TableSkeleton.css

@@ -17,9 +17,6 @@
 
 [data-nox-table-enhanced]
   .table[data-table-loading-state='pending']
-  .table-body__row[data-table-row],
-[data-nox-table-enhanced]
-  .table[data-table-loading-state='refreshing']
   .table-body__row[data-table-row] {
   display: none;
 }