@astronox/core 0.2.1 → 0.2.2

package/src/patterns/Combobox/Combobox.astro

@@ -1,5 +1,9 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
+import type {
+  PreferenceBinding,
+  PreferenceNumberBounds,
+} from '../../client/preferences';
 import type { Tone } from '../../theme/contracts';
 import type {
   ComboboxOption,
@@ -15,6 +19,7 @@ type SharedProps = Omit<HTMLAttributes<'div'>, 'id'> & {
   id: string;
   label: string;
   disabled?: boolean;
+  preference?: PreferenceBinding;
   size?: ComboboxSize;
   tone?: Tone;
   width?: 'auto' | 'fill';
@@ -41,6 +46,7 @@ type NumberProps = SharedProps & {
   value: number;
   decrementLabel: string;
   incrementLabel: string;
+  preferenceBounds?: PreferenceNumberBounds;
 };
 
 type Props = OptionsProps | NumberProps;
@@ -130,6 +136,8 @@ if (mode === 'number') {
     'max',
     'min',
     'mode',
+    'preference',
+    'preferenceBounds',
     'size',
     'step',
     'tone',
@@ -185,6 +193,7 @@ if (mode === 'number') {
     'mode',
     'options',
     'placeholder',
+    'preference',
     'removeLabel',
     'searchPlaceholder',
     'selectionMode',
@@ -233,6 +242,20 @@ const searchId = `${props.id}-search`;
   data-combobox-number-step={step}
   data-disabled={disabled ? true : undefined}
   data-tone={resolvedTone}
+  data-preference-id={props.preference?.id}
+  data-preference-path={props.preference?.path}
+  data-preference-control={
+    props.preference
+      ? mode === 'number'
+        ? 'combobox-number'
+        : 'combobox-options'
+      : undefined
+  }
+  data-preference-number-bounds={
+    mode === 'number' && (props as NumberProps).preferenceBounds
+      ? JSON.stringify((props as NumberProps).preferenceBounds)
+      : undefined
+  }
 >
   <span class="combobox__sizer" aria-hidden="true">
     {

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/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}>

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}