@astronox/core 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astronox/core",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Reusable Astro components, patterns, styles, and infrastructure for AstroNox sites.",
   "license": "MIT",
   "keywords": [

package/src/components/content/CardHeader/CardHeader.astro

@@ -17,6 +17,12 @@ type Props = HTMLAttributes<'header'> &
     headingLevel?: HeadingLevel;
     sticky?: boolean;
     tone?: Tone;
+    trigger?: {
+      controls: string;
+      expanded: boolean;
+      hidden?: boolean;
+      label: string;
+    };
   };
 
 const {
@@ -29,6 +35,7 @@ const {
   headingLevel = 2,
   sticky = false,
   tone,
+  trigger,
   ...attrs
 }: Props = Astro.props;
 const HeadingTag = `h${headingLevel}` as const;
@@ -80,6 +87,19 @@ const resolvedTone = tone ?? dataTone;
           ) : null
         }
       </Inline>
+      {
+        trigger ? (
+          <button
+            class="card-header__trigger"
+            type="button"
+            aria-controls={trigger.controls}
+            aria-expanded={trigger.expanded}
+            aria-label={trigger.label}
+            hidden={trigger.hidden}
+            data-card-header-trigger
+          />
+        ) : null
+      }
     </div>
 
     {

package/src/components/content/CardHeader/CardHeader.css

@@ -90,12 +90,33 @@
 }
 
 .card-header__main {
+  position: relative;
   display: grid;
   min-width: 0;
   align-content: center;
   padding: var(--nox-space-3) var(--nox-space-5);
 }
 
+.card-header__main:has(> .card-header__trigger) > [data-composition='inline'] {
+  pointer-events: none;
+}
+
+.card-header__trigger {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.card-header__trigger:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-tone-focus-ring);
+  outline-offset: calc(var(--nox-focus-ring-width) * -1);
+}
+
 .card-header[data-has-end='true'] .card-header__main {
   padding-block: var(--nox-space-1);
 }

package/src/components/content/CodeBlock/CodeBlock.astro

@@ -39,9 +39,8 @@ const resolvedTone = tone ?? dataTone;
         data-code-block-content
         data-code-block-presentation={presentation}
         data-wrap={wrap ? true : undefined}
-      >
-        {text}
-      </pre>
+        set:text={text}
+      />
       <Button
         class="code-block__copy"
         type="button"
@@ -74,9 +73,8 @@ const resolvedTone = tone ?? dataTone;
       data-code-block-presentation={presentation}
       data-tone={resolvedTone}
       data-wrap={wrap ? true : undefined}
-    >
-      {text}
-    </pre>
+      set:text={text}
+    />
   )
 }
 

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

@@ -72,6 +72,7 @@ export function initTooltip(root: HTMLElement): () => void {
     ':scope > [data-tooltip-panel]',
   );
   if (!trigger || !panel) return noop;
+  const activeTrigger = trigger;
 
   const hoverOnly = root.dataset.tooltipActivation === 'hover';
   root.setAttribute(initializedAttribute, 'true');
@@ -106,6 +107,7 @@ export function initTooltip(root: HTMLElement): () => void {
   let hoveredPanel = false;
   let openListenersActive = false;
   let pinned = false;
+  let lastPointerType = '';
 
   const isOpen = (): boolean => panel.matches(':popover-open');
 
@@ -239,12 +241,12 @@ export function initTooltip(root: HTMLElement): () => void {
   };
 
   const handleTriggerPointerEnter = (event: PointerEvent): void => {
-    if (hoverOnly && event.pointerType === 'touch') return;
+    if (event.pointerType === 'touch') return;
     hoveredTrigger = true;
     show();
   };
   const handleTriggerPointerLeave = (event: PointerEvent): void => {
-    if (hoverOnly && event.pointerType === 'touch') return;
+    if (event.pointerType === 'touch') return;
     hoveredTrigger = false;
 
     if (hoverOnly) {
@@ -263,6 +265,7 @@ export function initTooltip(root: HTMLElement): () => void {
     scheduleClose();
   };
   const handleFocusIn = (): void => {
+    if (lastPointerType === 'touch') return;
     if (
       hoverOnly &&
       !trigger.matches(':focus-visible') &&
@@ -274,7 +277,23 @@ export function initTooltip(root: HTMLElement): () => void {
     show();
   };
   const handleFocusOut = (): void => scheduleClose();
-  const handleTriggerClick = (): void => {
+  const handleTriggerPointerDown = (event: PointerEvent): void => {
+    lastPointerType = event.pointerType;
+  };
+  const handleTriggerKeyDown = (): void => {
+    lastPointerType = '';
+  };
+  const handleTriggerClick = (event: MouseEvent): void => {
+    const pointerType =
+      'PointerEvent' in window && event instanceof PointerEvent
+        ? event.pointerType
+        : lastPointerType;
+    if (hoverOnly && pointerType !== 'touch') return;
+    if (pointerType === 'touch') {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
     if (pinned) {
       close();
       return;
@@ -299,6 +318,12 @@ export function initTooltip(root: HTMLElement): () => void {
     if (!(event instanceof CustomEvent) || event.detail?.root === root) return;
     close();
   };
+  const visibilityObserver =
+    'IntersectionObserver' in window
+      ? new IntersectionObserver((entries) => {
+          if (entries.some((entry) => !entry.isIntersecting)) close();
+        })
+      : null;
   function addOpenListeners(): void {
     if (openListenersActive) return;
     openListenersActive = true;
@@ -309,6 +334,7 @@ export function initTooltip(root: HTMLElement): () => void {
     window.addEventListener('scroll', requestPosition, true);
     window.visualViewport?.addEventListener('resize', requestPosition);
     window.visualViewport?.addEventListener('scroll', requestPosition);
+    visibilityObserver?.observe(activeTrigger);
   }
   function removeOpenListeners(): void {
     if (!openListenersActive) return;
@@ -320,13 +346,16 @@ export function initTooltip(root: HTMLElement): () => void {
     window.removeEventListener('scroll', requestPosition, true);
     window.visualViewport?.removeEventListener('resize', requestPosition);
     window.visualViewport?.removeEventListener('scroll', requestPosition);
+    visibilityObserver?.unobserve(activeTrigger);
   }
 
+  trigger.addEventListener('pointerdown', handleTriggerPointerDown);
   trigger.addEventListener('pointerenter', handleTriggerPointerEnter);
   trigger.addEventListener('pointerleave', handleTriggerPointerLeave);
   trigger.addEventListener('focusin', handleFocusIn);
   trigger.addEventListener('focusout', handleFocusOut);
-  if (!hoverOnly) trigger.addEventListener('click', handleTriggerClick);
+  trigger.addEventListener('keydown', handleTriggerKeyDown);
+  trigger.addEventListener('click', handleTriggerClick);
   if (!hoverOnly) {
     panel.addEventListener('pointerenter', handlePanelPointerEnter);
     panel.addEventListener('pointerleave', handlePanelPointerLeave);
@@ -338,11 +367,14 @@ export function initTooltip(root: HTMLElement): () => void {
     if (positionFrame !== undefined) {
       window.cancelAnimationFrame(positionFrame);
     }
+    visibilityObserver?.disconnect();
+    trigger.removeEventListener('pointerdown', handleTriggerPointerDown);
     trigger.removeEventListener('pointerenter', handleTriggerPointerEnter);
     trigger.removeEventListener('pointerleave', handleTriggerPointerLeave);
     trigger.removeEventListener('focusin', handleFocusIn);
     trigger.removeEventListener('focusout', handleFocusOut);
-    if (!hoverOnly) trigger.removeEventListener('click', handleTriggerClick);
+    trigger.removeEventListener('keydown', handleTriggerKeyDown);
+    trigger.removeEventListener('click', handleTriggerClick);
     if (!hoverOnly) {
       panel.removeEventListener('pointerenter', handlePanelPointerEnter);
       panel.removeEventListener('pointerleave', handlePanelPointerLeave);

package/src/components/navigation/Breadcrumbs/Breadcrumbs.astro

@@ -16,6 +16,7 @@ const {
   'data-tone': dataTone,
   items,
   label = defaultCoreMessages.navigation.breadcrumbs,
+  tabindex: tabIndex = 0,
   tone,
   ...attrs
 } = Astro.props;
@@ -28,6 +29,7 @@ const resolvedTone = tone ?? dataTone ?? 'info';
       {...attrs}
       class:list={['breadcrumbs', className]}
       aria-label={label}
+      tabindex={tabIndex}
       data-widget="breadcrumbs"
       data-tone={resolvedTone}
     >

package/src/components/navigation/Breadcrumbs/Breadcrumbs.css

@@ -1,17 +1,26 @@
 .breadcrumbs {
   min-width: 0;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: thin;
+  touch-action: pan-x pan-y;
   color: var(--nox-tone-color);
   font-size: var(--nox-font-size-sm);
   font-weight: var(--nox-font-weight-medium);
   line-height: 1.35;
 }
 
+.breadcrumbs:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-tone-focus-ring);
+  outline-offset: calc(var(--nox-focus-ring-width) * -1);
+}
+
 .breadcrumbs__list {
   display: flex;
   flex-wrap: nowrap;
   align-items: stretch;
-  min-width: 0;
+  min-width: max-content;
   min-block-size: calc(
     1.35em + var(--site-main-content-gap, var(--nox-space-5)) +
       var(--site-main-content-gap, var(--nox-space-5))
@@ -30,8 +39,7 @@
 }
 
 .breadcrumbs__item:last-child {
-  flex: 1 1 auto;
-  overflow: hidden;
+  flex: 0 0 auto;
 }
 
 .breadcrumbs__item > span {
@@ -63,8 +71,6 @@
 }
 
 .breadcrumbs__item:last-child > :is(a, span) {
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 

package/src/composition/Grid/Grid.css

@@ -1,5 +1,5 @@
 .grid-container {
-  container-type: inline-size;
+  container: nox-grid / inline-size;
   min-width: 0;
 }
 

package/src/composition/SurfaceGroup/SurfaceGroup.css

@@ -17,24 +17,32 @@
 }
 
 .surface-group:has(> [data-sticky-surface])::before {
-  --surface-group-sticky-occlusion-size: calc(
-    var(--nox-layout-gap) + var(--nox-section-responsive-block-size)
-  );
-
   position: sticky;
   z-index: 39;
   top: 0;
   display: block;
   min-width: 0;
-  min-height: var(--surface-group-sticky-occlusion-size);
+  min-height: var(
+    --surface-group-sticky-occlusion-size,
+    calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size))
+  );
   visibility: hidden;
-  flex: 0 0 var(--surface-group-sticky-occlusion-size);
-  margin-block-end: calc(-1 * var(--surface-group-sticky-occlusion-size));
+  flex: 0 0
+    var(
+      --surface-group-sticky-occlusion-size,
+      calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size))
+    );
+  margin-block-end: calc(
+    -1 *
+      var(
+        --surface-group-sticky-occlusion-size,
+        calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size))
+      )
+  );
   background: var(--nox-page-background);
   content: '';
 }
 
-.surface-group:has(> [data-sticky-surface]):not([data-sticky-measured])::before,
 .surface-group[data-sticky-active]::before {
   visibility: visible;
 }
@@ -61,8 +69,8 @@
 
 .surface-group
   > [data-surface]:not([hidden]):has(~ [data-surface]:not([hidden])) {
-  border-end-start-radius: 0;
-  border-end-end-radius: 0;
+  border-end-start-radius: var(--surface-group-connected-border-end-radius, 0);
+  border-end-end-radius: var(--surface-group-connected-border-end-radius, 0);
 }
 
 .surface-group > [data-surface]:not([hidden]) ~ [data-surface]:not([hidden]) {
@@ -70,11 +78,3 @@
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-
-@container nox-surface-group (width < 32rem) {
-  .surface-group:has(> [data-sticky-surface])::before {
-    --surface-group-sticky-occlusion-size: calc(
-      var(--nox-layout-gap) + var(--nox-section-compact-block-size)
-    );
-  }
-}

package/src/composition/SurfaceGroup/stickySurfaceGroupController.ts

@@ -46,6 +46,10 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
 
     const stickyOffset =
       Number.parseFloat(window.getComputedStyle(stickySurface).top) || 0;
+    root.style.setProperty(
+      '--surface-group-sticky-occlusion-size',
+      `${stickyOffset + stickySurface.getBoundingClientRect().height}px`,
+    );
     observer = new IntersectionObserver(
       ([entry]) => {
         if (!entry) return;
@@ -74,10 +78,14 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
 
   root.setAttribute('data-sticky-initialized', 'true');
   window.addEventListener('resize', scheduleObserve, { passive: true });
+  const resizeObserver =
+    'ResizeObserver' in window ? new ResizeObserver(scheduleObserve) : null;
+  resizeObserver?.observe(stickySurface);
   observe();
 
   return () => {
     window.removeEventListener('resize', scheduleObserve);
+    resizeObserver?.disconnect();
     observer?.disconnect();
     sentinel.remove();
 
@@ -88,5 +96,6 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
     root.removeAttribute('data-sticky-active');
     root.removeAttribute('data-sticky-initialized');
     root.removeAttribute('data-sticky-measured');
+    root.style.removeProperty('--surface-group-sticky-occlusion-size');
   };
 };

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);