@astronox/core 0.2.0 → 0.2.2

package/src/patterns/Combobox/comboboxController.ts

@@ -12,6 +12,11 @@ type SetComboboxValueOptions = {
   emit?: boolean;
 };
 
+export type ComboboxNumberBounds = {
+  min: number;
+  max: number;
+};
+
 type NumberBounds = {
   min: number;
   max: number;
@@ -93,6 +98,17 @@ function normalizeNumber(value: number, bounds: NumberBounds): number {
   return Math.min(bounds.max, Math.max(bounds.min, stepped));
 }
 
+function syncNumberOptionBounds(
+  root: HTMLElement,
+  bounds: NumberBounds,
+): void {
+  for (const option of getOptions(root)) {
+    const value = Number(option.dataset.comboboxOption);
+    option.hidden =
+      !Number.isFinite(value) || value < bounds.min || value > bounds.max;
+  }
+}
+
 export function setComboboxValues(
   root: HTMLElement,
   requestedValues: readonly string[],
@@ -186,6 +202,43 @@ export function setComboboxNumberValue(
   }
 }
 
+export function setComboboxNumberBounds(
+  root: HTMLElement,
+  { min, max }: ComboboxNumberBounds,
+): void {
+  if (root.dataset.comboboxMode !== 'number') return;
+
+  const currentBounds = getNumberBounds(root);
+  const optionValues = getOptions(root)
+    .map((option) => Number(option.dataset.comboboxOption))
+    .filter(Number.isFinite);
+  const renderedValues = new Set(optionValues);
+  if (
+    !currentBounds ||
+    !Number.isInteger(min) ||
+    !Number.isInteger(max) ||
+    min > max ||
+    !renderedValues.has(min) ||
+    !renderedValues.has(max)
+  ) {
+    throw new RangeError(
+      'Combobox number bounds must be ordered rendered values aligned to the configured step',
+    );
+  }
+
+  root.dataset.comboboxNumberMin = String(min);
+  root.dataset.comboboxNumberMax = String(max);
+  const bounds = getNumberBounds(root);
+  const input = root.querySelector<HTMLInputElement>(
+    '[data-combobox-number-input]',
+  );
+  if (!bounds || !input) return;
+
+  syncNumberOptionBounds(root, bounds);
+  setComboboxNumberValue(root, Number(input.value));
+  root.dispatchEvent(new Event('combobox:number-bounds-change'));
+}
+
 export function initCombobox(root: HTMLElement): () => void {
   if (root.getAttribute(initializedAttribute) === 'true') return noop;
 
@@ -343,6 +396,12 @@ export function initCombobox(root: HTMLElement): () => void {
       : null;
 
   const resetFilter = (): void => {
+    if (mode === 'number') {
+      const bounds = getNumberBounds(root);
+      if (bounds) syncNumberOptionBounds(root, bounds);
+      return;
+    }
+
     if (search) search.value = '';
     for (const option of getOptions(root)) option.hidden = false;
     if (empty) empty.hidden = getOptions(root).length > 0;
@@ -736,6 +795,11 @@ export function initCombobox(root: HTMLElement): () => void {
     close();
   };
 
+  const handleNumberBoundsChange = (): void => {
+    setActiveOption(null);
+    schedulePanelPosition();
+  };
+
   if (mode === 'options' && trigger && search) {
     control.addEventListener('click', handleOptionsControlClick);
     trigger.addEventListener('click', handleOptionsTriggerClick);
@@ -759,6 +823,10 @@ export function initCombobox(root: HTMLElement): () => void {
   }
   optionsRoot.addEventListener('click', handleOptionClick);
   root.addEventListener('combobox:clear', handleClear);
+  root.addEventListener(
+    'combobox:number-bounds-change',
+    handleNumberBoundsChange,
+  );
 
   return () => {
     close();
@@ -778,6 +846,10 @@ export function initCombobox(root: HTMLElement): () => void {
     }
     optionsRoot.removeEventListener('click', handleOptionClick);
     root.removeEventListener('combobox:clear', handleClear);
+    root.removeEventListener(
+      'combobox:number-bounds-change',
+      handleNumberBoundsChange,
+    );
     panel.style.removeProperty('--combobox-panel-inline-start');
     panel.style.removeProperty('--combobox-panel-block-start');
     panel.style.removeProperty('--combobox-panel-inline-size');

package/src/patterns/Fullscreen/FullscreenControl.astro

@@ -6,8 +6,6 @@ import EnterFullscreenIcon from '../../components/icons/EnterFullscreenIcon.astr
 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;
@@ -17,8 +15,6 @@ type FullscreenUnsupportedFallback = {
 type Props = Omit<HTMLAttributes<'button'>, 'aria-controls' | 'type'> & {
   enterLabel: string;
   exitLabel: string;
-  overlayOffset?: FullscreenOverlayOffset;
-  placement?: FullscreenControlPlacement;
   targetId: string;
   tone?: Tone;
   unsupportedFallback?: FullscreenUnsupportedFallback;
@@ -28,8 +24,6 @@ const {
   class: className,
   enterLabel,
   exitLabel,
-  overlayOffset = 'default',
-  placement = 'inline',
   targetId,
   tone,
   unsupportedFallback,
@@ -44,10 +38,9 @@ const resolvedClass = ['fullscreen-control', className]
   {...attrs}
   class={resolvedClass}
   type="button"
-  borderless={placement === 'inline'}
-  full={placement === 'inline'}
+  borderless
+  full
   iconOnly
-  size={placement === 'overlay' ? 'md' : undefined}
   tone={tone}
   aria-controls={targetId}
   aria-label={enterLabel}
@@ -56,8 +49,6 @@ const resolvedClass = ['fullscreen-control', className]
   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>
@@ -73,10 +64,9 @@ const resolvedClass = ['fullscreen-control', className]
     <Button
       href={unsupportedFallback.href}
       target={unsupportedFallback.target ?? '_blank'}
-      borderless={placement === 'inline'}
-      full={placement === 'inline'}
+      borderless
+      full
       iconOnly
-      size={placement === 'overlay' ? 'md' : undefined}
       tone={tone}
       aria-label={unsupportedFallback.label}
       title={unsupportedFallback.label}

package/src/patterns/Fullscreen/FullscreenControl.css

@@ -15,32 +15,6 @@
   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;

package/src/patterns/Modal/Modal.astro

@@ -4,7 +4,7 @@ import type { Tone } from '../../theme/contracts';
 import ModalClose from './ModalClose.astro';
 
 type ModalCloseControl = 'default' | 'delegated';
-type ModalSizing = 'content' | 'viewport';
+type ModalSizing = 'adaptive' | 'confirmation' | 'content' | 'viewport';
 
 type Props = HTMLAttributes<'dialog'> & {
   id: string;

package/src/patterns/Modal/Modal.css

@@ -48,6 +48,33 @@ html:has(.modal[open]) [data-site-viewport] {
   overflow: auto;
 }
 
+.modal[data-sizing='confirmation'] .modal__content {
+  inline-size: min(42rem, 100%);
+  block-size: auto;
+  max-block-size: 100%;
+  align-self: center;
+  overflow: auto;
+}
+
+.modal[data-sizing='adaptive'] .modal__content {
+  display: flex;
+  block-size: 100%;
+  min-block-size: 0;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.modal[data-sizing='adaptive']
+  .modal__content
+  > [data-composition='surface-group'] {
+  inline-size: 100%;
+  min-block-size: 0;
+  max-block-size: 100%;
+  flex: 0 1 auto;
+  overflow: hidden;
+}
+
 .modal__default-close {
   position: absolute;
   z-index: 1;
@@ -81,7 +108,17 @@ html:has(.modal[open]) [data-site-viewport] {
     padding-inline: 0;
   }
 
-  .modal__content [data-surface] {
+  .modal:not(
+      [data-sizing='adaptive'],
+      [data-sizing='confirmation']
+    )
+    .modal__content
+    [data-surface] {
     border-radius: 0;
   }
+
+  .modal:is([data-sizing='adaptive'], [data-sizing='confirmation'])
+    .modal__content {
+    padding: var(--nox-space-2);
+  }
 }

package/src/patterns/Table/Table.astro

@@ -3,14 +3,17 @@ import type { HTMLAttributes } from 'astro/types';
 import type {
   TableColumn,
   TablePaginationModel,
+  TableProgressiveModel,
   TableRow,
 } from '../../display/contracts';
+import { tableProgressiveBatchSize } from '../../display/tableProgressive';
 import type { Tone } from '../../theme/contracts';
 import SurfaceGroup from '../../composition/SurfaceGroup/SurfaceGroup.astro';
 import TableBody from './TableBody.astro';
 import TableFooter from './TableFooter.astro';
 import TableHeader from './TableHeader.astro';
 import TablePagination from './TablePagination.astro';
+import TableSkeleton from './TableSkeleton.astro';
 import {
   getTableColumnDensity,
   getTableMinimumInlineSize,
@@ -33,6 +36,7 @@ type TablePaginationMessages = {
 
 type Props = Omit<HTMLAttributes<'div'>, 'style'> & {
   caption: string;
+  clientProgressive?: boolean;
   columns: readonly TableColumn[];
   density?: 'regular' | 'compact';
   emptyMessage: string;
@@ -44,6 +48,8 @@ type Props = Omit<HTMLAttributes<'div'>, 'style'> & {
   pagination?: TablePaginationModel;
   paginationKey?: string;
   paginationMessages?: TablePaginationMessages;
+  preparation?: 'automatic' | 'controlled';
+  progressive?: false | TableProgressiveModel;
   rowSizing?: 'content' | 'fill';
   rows: readonly TableRow[];
   skeletonRows?: number;
@@ -54,6 +60,7 @@ type Props = Omit<HTMLAttributes<'div'>, 'style'> & {
 
 const {
   caption,
+  clientProgressive = false,
   class: className,
   columns,
   'data-tone': dataTone,
@@ -67,6 +74,8 @@ const {
   pagination,
   paginationKey,
   paginationMessages,
+  preparation = 'automatic',
+  progressive,
   rowSizing = 'content',
   rows,
   skeletonRows,
@@ -95,6 +104,62 @@ const columnDensity = getTableColumnDensity(columns);
 const resolvedTone = tone ?? dataTone;
 const hasSortableColumns = columns.some((column) => column.sort);
 const hasFooter = Astro.slots.has('footer');
+const configuredProgressive =
+  progressive && typeof progressive === 'object' ? progressive : undefined;
+const batchSize = Math.max(
+  1,
+  Math.floor(configuredProgressive?.batchSize ?? tableProgressiveBatchSize),
+);
+const resolvedRows = rows.map((row, index): TableRow => ({
+  ...row,
+  key: row.key ?? `${paginationKey ?? 'table'}-${index + 1}`,
+}));
+const inferredProgressive =
+  progressive === undefined && resolvedRows.length > batchSize
+    ? {
+        batchSize,
+        entries: resolvedRows.map((row) => ({
+          key: row.key!,
+          filters: row.filters,
+          sortValues: row.sortValues,
+        })),
+      }
+    : undefined;
+const progressiveModel =
+  progressive === false
+    ? undefined
+    : configuredProgressive ?? inferredProgressive;
+const hasProgressiveRows = Boolean(
+  progressiveModel && progressiveModel.entries.length > batchSize,
+);
+const hasProgressivePagination = hasProgressiveRows || clientProgressive;
+const initialSkeletonRows = Math.max(
+  1,
+  Math.floor(
+    skeletonRows ??
+      Math.min(
+        batchSize,
+        (progressiveModel?.entries.length ?? resolvedRows.length) || 1,
+      ),
+  ),
+);
+const preparesRows =
+  (resolvedRows.length > 0 || clientProgressive) && !errorMessage;
+const initialLoadingState = errorMessage
+  ? 'error'
+  : resolvedRows.length === 0 && !clientProgressive
+    ? 'empty'
+    : 'pending';
+const progressiveManifest = hasProgressiveRows
+  ? JSON.stringify({
+      ...progressiveModel,
+      batchSize,
+    }).replaceAll('<', '\\u003c')
+  : undefined;
+const rowKeys = new Set(resolvedRows.map((row) => row.key));
+const progressiveKeys = new Set(
+  progressiveModel?.entries.map((entry) => entry.key) ?? [],
+);
 
 if (header === 'visible' && hasSortableColumns && !sortMessages) {
   throw new Error('Sortable table columns require localized sort messages');
@@ -102,6 +167,21 @@ if (header === 'visible' && hasSortableColumns && !sortMessages) {
 if (pagination?.nextHref && !paginationMessages) {
   throw new Error('Paginated tables require localized pagination messages');
 }
+if (clientProgressive && !paginationMessages) {
+  throw new Error('Client-progressive tables require localized messages');
+}
+if (progressiveModel?.sources && !paginationKey) {
+  throw new Error('External progressive tables require a stable pagination key');
+}
+if (rowKeys.size !== resolvedRows.length) {
+  throw new Error('Table rows require unique keys');
+}
+if (
+  progressiveModel &&
+  progressiveKeys.size !== progressiveModel.entries.length
+) {
+  throw new Error('Progressive table entries require unique keys');
+}
 ---
 
 <div
@@ -110,18 +190,32 @@ if (pagination?.nextHref && !paginationMessages) {
   data-widget="table"
   data-composition="table"
   data-table-column-density={columnDensity}
+  data-table-client-progressive={clientProgressive ? true : undefined}
   data-table-density={density}
   data-table-inline-overflow={inlineOverflow}
   data-table-index-minimum-rem={
     minimumInlineSize ? Number.parseFloat(minimumInlineSize) : undefined
   }
   data-table-layout={layout}
+  data-table-loading-state={initialLoadingState}
+  data-table-preparation={preparation}
   data-table-key={paginationKey}
   data-table-scroll-root
   data-table-sticky-header={stickyHeader ? true : undefined}
   data-tone={resolvedTone}
   style={tableStyle}
 >
+  {
+    preparesRows ? (
+      <script is:inline>
+        document.documentElement.setAttribute('data-nox-table-enhanced', '');
+        document.currentScript?.parentElement?.setAttribute(
+          'aria-busy',
+          'true',
+        );
+      </script>
+    ) : null
+  }
   <SurfaceGroup>
     <slot name="heading" />
     {
@@ -137,17 +231,17 @@ if (pagination?.nextHref && !paginationMessages) {
       filterEmptyMessage={filterEmptyMessage}
       layout={layout}
       rowSizing={rowSizing}
-      rows={rows}
+      rows={resolvedRows}
+      skeletonRows={preparesRows ? initialSkeletonRows : 0}
     />
     {
-      pagination && paginationMessages ? (
+      hasProgressivePagination || (pagination && paginationMessages) ? (
         <TablePagination
-          columns={columns}
-          errorLabel={paginationMessages.error}
-          loadingLabel={paginationMessages.loading}
-          nextLabel={paginationMessages.nextPage}
+          errorLabel={paginationMessages?.error ?? ''}
+          loadingLabel={paginationMessages?.loading ?? ''}
+          nextLabel={paginationMessages?.nextPage ?? ''}
           pagination={pagination}
-          skeletonRows={skeletonRows}
+          progressive={hasProgressivePagination}
         />
       ) : null
     }
@@ -159,6 +253,27 @@ if (pagination?.nextHref && !paginationMessages) {
       ) : null
     }
   </SurfaceGroup>
+  {
+    progressiveManifest ? (
+      <script
+        is:inline
+        type="application/json"
+        data-table-progressive-manifest
+        set:html={progressiveManifest}
+      />
+    ) : null
+  }
+  {
+    preparesRows ? (
+      <template data-table-skeleton-template>
+        <table>
+          <tbody>
+            <TableSkeleton columns={columns} rows={initialSkeletonRows} />
+          </tbody>
+        </table>
+      </template>
+    ) : null
+  }
 </div>
 
 <script>

package/src/patterns/Table/Table.css

@@ -17,7 +17,8 @@
   min-inline-size: 0;
 }
 
-.table[data-table-column-density='compact'] {
+.table[data-table-column-density='compact'],
+.table[data-table-layout='index'] {
   --table-cell-padding-inline: var(--nox-space-1);
   --table-edge-padding-inline: var(--nox-space-3);
   --table-header-letter-spacing: 0;

package/src/patterns/Table/TableBody.astro

@@ -5,6 +5,7 @@ import type { Tone } from '../../theme/contracts';
 import TableSortIcon from '../../components/icons/TableSortIcon.astro';
 import TextBlock from '../../primitives/text/TextBlock/TextBlock.astro';
 import TableCellContent from './TableCell.astro';
+import TableSkeleton from './TableSkeleton.astro';
 import {
   getTableColumnAlignment,
   type TableLayout,
@@ -20,6 +21,7 @@ type Props = HTMLAttributes<'div'> & {
   layout?: TableLayout;
   rowSizing?: 'content' | 'fill';
   rows: readonly TableRow[];
+  skeletonRows?: number;
 };
 
 const {
@@ -33,6 +35,7 @@ const {
   layout = 'default',
   rowSizing = 'content',
   rows,
+  skeletonRows = 0,
   ...attrs
 }: Props = Astro.props;
 
@@ -86,6 +89,11 @@ const stateMessage =
           ))
         }
       </tr>
+      {
+        skeletonRows > 0 ? (
+          <TableSkeleton columns={columns} rows={skeletonRows} />
+        ) : null
+      }
       {
         state && stateMessage ? (
           <tr class="table-body__row" data-table-state={state}>
@@ -102,12 +110,14 @@ const stateMessage =
           </tr>
         ) : (
           rows.map((row) => {
-            const rowHref = row.href;
+            const rowHref = row.disabled ? undefined : row.href;
 
             return (
               <tr
                 class="table-body__row"
                 hidden={row.hidden}
+                aria-disabled={row.disabled ? 'true' : undefined}
+                data-disabled={row.disabled ? 'true' : undefined}
                 data-table-row
                 data-table-row-key={row.key}
                 data-table-row-href={rowHref}

package/src/patterns/Table/TableBody.css

@@ -166,6 +166,12 @@
   cursor: pointer;
 }
 
+.table-body__row[data-disabled='true'] {
+  opacity: 0.4;
+  filter: grayscale(0.65);
+  cursor: not-allowed;
+}
+
 .table-body__row[data-table-row-href]:focus-within {
   --table-primary-link-color: var(--nox-link-hover);
 }

package/src/patterns/Table/TableCell.css

@@ -41,6 +41,12 @@
   min-inline-size: max-content;
 }
 
+.table-cell[data-table-cell-kind='actions'] {
+  inline-size: max-content;
+  min-inline-size: max-content;
+  overflow: visible;
+}
+
 .table-cell[data-table-cell-kind='tags']:not([data-wrap])
   > [data-composition='inline']
   > [data-widget='tag'] {

package/src/patterns/Table/TableCellValue.astro

@@ -6,6 +6,7 @@ import TextPair from '../../components/data-display/TextPair/TextPair.astro';
 import Media from '../../primitives/media/Media/Media.astro';
 import Inline from '../../composition/Inline/Inline.astro';
 import Tag from '../../components/data-display/Tag/Tag.astro';
+import Button from '../../components/actions/Button/Button.astro';
 
 type Props = {
   cell: TableCell;
@@ -84,3 +85,33 @@ const formatValue = (value: DisplayTextValue): string => String(value);
     </Inline>
   ) : null
 }
+
+{
+  cell.kind === 'actions' ? (
+    <Inline align="center" gap="xs" justify="end" wrap={false}>
+      {cell.actions.map((action) => {
+        const Icon = action.icon;
+
+        return (
+          <Button
+            aria-controls={action.modalTargetId}
+            aria-haspopup={action.modalTargetId ? 'dialog' : undefined}
+            aria-label={action.label}
+            borderless={action.borderless !== false}
+            href={action.href}
+            hoverTone={action.hoverTone}
+            iconOnly
+            size="sm"
+            title={action.label}
+            tone={action.tone}
+            data-modal-open={action.modalTargetId}
+          >
+            <span data-tone={action.iconTone}>
+              <Icon />
+            </span>
+          </Button>
+        );
+      })}
+    </Inline>
+  ) : null
+}

package/src/patterns/Table/TableFooter.astro

@@ -6,6 +6,7 @@ type TableFooterPadding = 'none' | 'sm' | 'md' | 'lg';
 
 type Props = HTMLAttributes<'div'> & {
   padding?: TableFooterPadding;
+  surface?: boolean;
   tone?: Tone;
 };
 
@@ -13,6 +14,7 @@ const {
   class: className,
   'data-tone': dataTone,
   padding = 'md',
+  surface = true,
   tone,
   ...attrs
 }: Props = Astro.props;
@@ -26,7 +28,7 @@ const resolvedTone = tone ?? dataTone;
   data-padding={padding}
   data-table-footer
   data-tone={resolvedTone}
-  data-surface
+  data-surface={surface ? true : undefined}
 >
   <slot />
 </div>

package/src/patterns/Table/TableHeader.astro

@@ -53,6 +53,7 @@ const hasSortableColumns = columns.some((column) => column.sort);
               type="button"
               data-table-sort-column={column.id}
               data-table-sort-direction="none"
+              data-table-sort-first-direction={column.sort.firstDirection}
               data-table-sort-label={column.label}
               data-table-sort-type={column.sort.type}
               data-table-sort-tie-breaker={column.sort.tieBreaker}