@astronox/core 0.2.1 → 0.2.3

package/src/patterns/Table/tableSortController.ts

@@ -1,3 +1,10 @@
+import {
+  hasTableProgressive,
+  refreshTableProgressive,
+  setTableProgressiveSort,
+  updateTableProgressiveEntry,
+} from './tableProgressiveController';
+
 type SortDirection = 'ascending' | 'descending';
 type SortType = 'number' | 'text';
 type SortValue = string | number | null;
@@ -134,30 +141,35 @@ export function initTableSort(root: HTMLElement): () => void {
     const id = button.dataset.tableSortColumn;
     const type = button.dataset.tableSortType;
     if (!id || (type !== 'number' && type !== 'text')) return;
+    const firstDirection =
+      button.dataset.tableSortFirstDirection === 'ascending'
+        ? 'ascending'
+        : 'descending';
+    const secondDirection =
+      firstDirection === 'ascending' ? 'descending' : 'ascending';
 
     if (state?.id !== id) {
       state = {
         id,
         type,
-        direction: 'descending',
+        direction: firstDirection,
         tieBreaker: button.dataset.tableSortTieBreaker,
       };
-      root.dispatchEvent(new CustomEvent('table:load-all', { bubbles: true }));
-    } else if (state.direction === 'descending') {
-      state = { ...state, direction: 'ascending' };
+    } else if (state.direction === firstDirection) {
+      state = { ...state, direction: secondDirection };
     } else {
       state = null;
     }
 
     updateButtons();
-    scheduleSort();
+    if (!setTableProgressiveSort(root, state)) scheduleSort();
   };
 
   const handleRowsAppended = (event: Event): void => {
     const detail = (event as CustomEvent<{ rows?: readonly HTMLElement[] }>)
       .detail;
     registerRows(detail?.rows ?? []);
-    scheduleSort();
+    if (!hasTableProgressive(root)) scheduleSort();
   };
 
   const handleSortValuesChanged = (): void => {
@@ -169,7 +181,7 @@ export function initTableSort(root: HTMLElement): () => void {
 
     state = null;
     updateButtons();
-    scheduleSort();
+    if (!setTableProgressiveSort(root, null)) scheduleSort();
   };
 
   registerRows(getRows());
@@ -208,9 +220,15 @@ export function setTableSortValues(
   };
   sortValuesCache.set(row, nextValues);
   row.dataset.tableSortValues = JSON.stringify(nextValues);
+  const root = row.closest<HTMLElement>('[data-table-scroll-root]');
+  const key = row.dataset.tableRowKey;
+  if (root && key) {
+    updateTableProgressiveEntry(root, key, { sortValues: nextValues });
+  }
 }
 
 export function refreshTableSort(root: HTMLElement): void {
+  if (refreshTableProgressive(root)) return;
   root.dispatchEvent(
     new CustomEvent('table:sort-values-changed', { bubbles: true }),
   );

package/src/styles/base.css

@@ -70,7 +70,20 @@ body {
 }
 
 a {
-  color: inherit;
+  color: var(--nox-content-link-color);
+  font-weight: var(--nox-content-link-font-weight);
+  text-decoration: none;
+  text-decoration-thickness: 0.0625rem;
+  text-underline-offset: 0.2em;
+}
+
+a[data-tone] {
+  color: var(--nox-tone-color);
+}
+
+strong a,
+a strong {
+  font-weight: var(--nox-content-link-emphasis-font-weight);
 }
 
 a:focus-visible,
@@ -83,6 +96,12 @@ button {
   font: inherit;
 }
 
+@media (hover: hover) and (pointer: fine) {
+  a:where([href]:hover) {
+    text-decoration-line: underline;
+  }
+}
+
 img,
 svg,
 video {
@@ -104,7 +123,6 @@ p {
   overflow-y: auto;
   background: var(--nox-page-background);
   overscroll-behavior-y: contain;
-  scrollbar-gutter: stable both-edges;
 }
 
 .site-main {
@@ -113,18 +131,19 @@ p {
   display: grid;
   width: var(--nox-page-width);
   margin: 0 auto;
-  padding-block: var(--site-main-content-gap) var(--nox-space-7);
-  gap: var(--nox-layout-gap);
+  padding-block: var(--site-main-content-gap);
+  align-content: start;
 }
 
 .site-main__content {
   display: grid;
   min-width: 0;
+  align-content: start;
   gap: var(--site-main-content-gap);
 }
 
 .site-main:has(> .site-main__content > .breadcrumbs) {
-  padding-block-start: 0;
+  padding-block: 0 var(--site-main-content-gap);
 }
 
 .site-main__content:has(> .breadcrumbs) {
@@ -134,8 +153,6 @@ p {
 @media (width < 48rem) {
   .site-main {
     --site-main-content-gap: var(--nox-space-4);
-
-    padding-block-end: var(--nox-space-6);
   }
 }
 

package/src/styles/interaction.css

@@ -29,6 +29,22 @@
   transform-origin: center;
 }
 
+@media (hover: none) and (pointer: coarse) {
+  :where(
+      a[href],
+      button,
+      summary,
+      [role='button'],
+      [role='link'],
+      [tabindex]:not(input, select, textarea)
+    ):focus-visible {
+    --nox-focus-ring: transparent;
+    --nox-tone-focus-ring: transparent;
+
+    outline: none;
+  }
+}
+
 @media (hover: hover) and (pointer: fine) {
   [data-interaction-accent]:hover {
     background: var(--nox-interaction-accent-hover-background);

package/src/styles/style.css

@@ -42,10 +42,12 @@
 @import '../components/data-display/TextPair/TextPair.css'
   layer(components);
 @import '../components/forms/Checkbox/Checkbox.css' layer(components);
+@import '../components/forms/ChoiceGroup/ChoiceGroup.css' layer(components);
 @import '../components/forms/FieldLabel/FieldLabel.css' layer(components);
 @import '../components/forms/FieldError/FieldError.css' layer(components);
 @import '../components/forms/FieldGroup/FieldGroup.css' layer(components);
 @import '../components/forms/TextInput/TextInput.css' layer(components);
+@import '../components/forms/Textarea/Textarea.css' layer(components);
 @import '../components/feedback/Tooltip/Tooltip.css' layer(components);
 @import '../components/feedback/Spinner/Spinner.css' layer(components);
 @import '../components/icons/CurrencyIcon.css' layer(components);
@@ -58,6 +60,7 @@
 @import '../components/navigation/Breadcrumbs/Breadcrumbs.css'
   layer(components);
 @import '../components/navigation/Header.css' layer(components);
+@import '../components/navigation/Footer/Footer.css' layer(components);
 @import '../components/navigation/NavigationBrand.css' layer(components);
 @import '../components/navigation/NavigationControl.css' layer(components);
 @import '../components/navigation/NavigationMenuList.css' layer(components);

package/src/styles/tokens.css

@@ -9,6 +9,11 @@
   --nox-source-tone-warning: #d97706;
   --nox-source-tone-danger: #dc2626;
 
+  /* Shared textual-link recipe. */
+  --nox-content-link-color: var(--nox-source-tone-info);
+  --nox-content-link-font-weight: var(--nox-font-weight-regular);
+  --nox-content-link-emphasis-font-weight: var(--nox-font-weight-medium);
+
   /* Public map seeds. Component states derive their full treatment from these. */
   --nox-source-map-available: #00b86b;
   --nox-source-map-unavailable: #f43f5e;