@astronox/core 0.2.0 → 0.2.1

package/README.md

@@ -1,8 +1,8 @@
 # AstroNox Core
 
-AstroNox Core is the shared Astro foundation used by AstroNox sites. It owns
-reusable components, composition primitives, interaction patterns, display
-contracts, SEO helpers, and the complete default stylesheet.
+AstroNox Core is a reusable foundation for Astro applications. It provides
+components, composition primitives, interaction patterns, display contracts,
+internationalization and SEO infrastructure, and a complete shared stylesheet.
 
 Product data, product routes, branding, integrations, and business rules stay
 in the consuming site.
@@ -33,11 +33,13 @@ import { Stack, SurfaceGroup } from '@astronox/core/composition';
 </Stack>
 ```
 
-Load the shared visual system once from the consuming application's stylesheet:
+Load the shared visual system once from the consuming application's root
+layout:
 
-```css
-@import '@astronox/core/styles.css';
-@import './site-theme.css';
+```astro
+---
+import '@astronox/core/styles.css';
+---
 ```
 
 Use the remaining entry points for layouts, patterns, primitives, display
@@ -50,26 +52,3 @@ and responsive media presentation are available through the `i18n`, `routing`,
 definitions, translations, route names, product metadata, and assets. Generic
 component labels can extend `defaultCoreMessages` through
 `resolveCoreMessages()` while retaining the English fallback.
-
-## Local Development
-
-`astronox-core` is the only source of truth. A consuming project may link this
-package locally while developing a shared change, but committed dependencies
-must always reference a released package version.
-
-The expected workflow is:
-
-1. Keep an exact published version in the consumer manifest and lockfile.
-2. Link the sibling package locally without touching either file with
-   `npm install --no-save --package-lock=false ../astronox-core`.
-3. Implement and validate the generic change through the linked consumer.
-4. Publish a prerelease or stable package version.
-5. Update the exact consumer dependency before deployment.
-
-Do not edit installed package files or copy `src` folders between projects.
-
-## Releases
-
-AstroNox Core follows semantic versioning. Public entry points are compatibility
-boundaries; internal files may change without notice. The initial `0.x` series
-is reserved for stabilizing the API with the first production consumers.

package/package.json

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

package/src/components/actions/MediaTrigger/MediaTrigger.astro

@@ -4,29 +4,37 @@ import type { DisplayMedia } from '../../../display/contracts';
 import type { Tone } from '../../../theme/contracts';
 import Media from '../../../primitives/media/Media/Media.astro';
 
-type Props = Omit<HTMLAttributes<'button'>, 'type'> & {
+type SharedProps = {
   accentTone?: Tone;
   label: string;
   media: DisplayMedia;
   tone?: Tone;
 };
 
+type Props = SharedProps &
+  Omit<HTMLAttributes<'a'>, 'href' | 'type'> & {
+    href?: string;
+  };
+
 const {
   accentTone,
   class: className,
   'data-tone': dataTone,
+  href,
   label,
   media,
   tone,
   ...attrs
 }: Props = Astro.props;
 const resolvedTone = tone ?? dataTone;
+const Root = href ? 'a' : 'button';
 ---
 
-<button
+<Root
   {...attrs}
   class:list={['media-trigger', className]}
-  type="button"
+  href={href}
+  type={href ? undefined : 'button'}
   aria-label={label}
   data-tone={resolvedTone}
   data-widget="media-trigger"
@@ -52,4 +60,4 @@ const resolvedTone = tone ?? dataTone;
       </span>
     ) : null
   }
-</button>
+</Root>

package/src/components/actions/MediaTrigger/MediaTrigger.css

@@ -12,6 +12,7 @@
   background: transparent;
   color: inherit;
   font: inherit;
+  text-decoration: none;
   cursor: pointer;
   isolation: isolate;
 }

package/src/components/content/MarkdownContent/MarkdownContent.css

@@ -211,7 +211,6 @@
 .markdown-content__change-label {
   min-width: 0;
   flex: none;
-  font-weight: var(--nox-font-weight-medium);
   overflow-wrap: anywhere;
 }
 

package/src/components/content/MarkdownContent/MarkdownNode.astro

@@ -112,6 +112,7 @@ const listItems =
     <div class="markdown-content__change">
       <span class="markdown-content__change-label">
         {node.label.map((child) => <MarkdownInline node={child} />)}
+        <span>:</span>
       </span>
       {node.presentation === 'statement' ? (
         <span class="markdown-content__change-values">

package/src/components/forms/Checkbox/Checkbox.astro

@@ -0,0 +1,60 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+import CheckIcon from '../../icons/CheckIcon.astro';
+import CloseIcon from '../../icons/CloseIcon.astro';
+
+type Props = Omit<HTMLAttributes<'input'>, 'class' | 'id' | 'type'> & {
+  id: string;
+  label: string;
+  class?: string;
+  invalid?: boolean;
+  tone?: Tone;
+};
+
+const {
+  'aria-invalid': ariaInvalid,
+  class: className,
+  'data-tone': dataTone,
+  disabled = false,
+  id,
+  invalid = false,
+  label,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedInvalid =
+  invalid || ariaInvalid === true || ariaInvalid === 'true';
+const resolvedTone = tone ?? dataTone;
+---
+
+<label
+  class:list={['checkbox-field', className]}
+  for={id}
+  data-disabled={disabled ? true : undefined}
+  data-invalid={resolvedInvalid ? true : undefined}
+  data-tone={resolvedTone}
+  data-widget="checkbox"
+>
+  <input
+    {...attrs}
+    id={id}
+    class="checkbox"
+    type="checkbox"
+    disabled={disabled}
+    aria-invalid={resolvedInvalid ? 'true' : ariaInvalid}
+  />
+  <span class="checkbox__label">
+    <span class="checkbox__label-text">{label}</span>
+    <span class="checkbox__state" aria-hidden="true">
+      <CheckIcon
+        class="checkbox__icon checkbox__icon--checked"
+        data-tone="success"
+      />
+      <CloseIcon
+        class="checkbox__icon checkbox__icon--unchecked"
+        data-tone="danger"
+      />
+    </span>
+  </span>
+</label>

package/src/components/forms/Checkbox/Checkbox.css

@@ -0,0 +1,126 @@
+.checkbox-field {
+  position: relative;
+  display: grid;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  inline-size: 100%;
+  block-size: var(--nox-field-control-block-size);
+  place-items: center;
+  padding: var(--nox-space-2);
+  overflow: clip;
+  border: var(--nox-border-width) solid var(--nox-field-border);
+  border-radius: var(--nox-radius-sm);
+  background: var(--nox-field-background-disabled);
+  color: var(--nox-text-disabled);
+  cursor: pointer;
+  transition:
+    border-color var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+    box-shadow var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+    background-color var(--nox-motion-duration-sm)
+      var(--nox-motion-easing-standard),
+    color var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+}
+
+.checkbox {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.checkbox__label {
+  display: inline-grid;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  grid-template-columns: 0.75rem minmax(0, auto) 0.75rem;
+  align-items: center;
+  gap: var(--nox-space-1);
+  color: inherit;
+  font-size: var(--nox-font-size-xs);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wide);
+  line-height: 1;
+  overflow-wrap: anywhere;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.checkbox__label::before {
+  content: '';
+  inline-size: 0.75rem;
+}
+
+.checkbox__label-text {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.checkbox__state {
+  display: grid;
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
+  place-items: center;
+}
+
+.checkbox__icon {
+  grid-area: 1 / 1;
+  inline-size: 100%;
+  block-size: 100%;
+  transition: opacity var(--nox-motion-duration-sm)
+    var(--nox-motion-easing-standard);
+}
+
+.checkbox__icon--checked {
+  color: var(--nox-tone-color);
+  opacity: 0;
+}
+
+.checkbox__icon--unchecked {
+  color: var(--nox-text-disabled);
+  opacity: 1;
+}
+
+.checkbox-field:has(.checkbox:checked) {
+  background: var(--nox-field-background);
+  color: var(--nox-tone-text);
+}
+
+.checkbox:checked ~ .checkbox__label .checkbox__icon--checked {
+  opacity: 1;
+}
+
+.checkbox:checked ~ .checkbox__label .checkbox__icon--unchecked {
+  opacity: 0;
+}
+
+.checkbox-field:has(.checkbox:focus-visible) {
+  border-color: var(--nox-field-border-active);
+  box-shadow: var(--nox-field-focus-shadow);
+}
+
+.checkbox-field[data-invalid] {
+  border-color: var(--nox-field-border-invalid);
+}
+
+.checkbox-field[data-disabled] {
+  border-color: var(--nox-field-border);
+  background: var(--nox-field-background-disabled);
+  color: var(--nox-text-disabled);
+  cursor: not-allowed;
+}
+
+.checkbox-field[data-disabled] .checkbox {
+  cursor: not-allowed;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .checkbox-field:not([data-disabled]):hover {
+    border-color: var(--nox-field-border-hover);
+  }
+}

package/src/components/forms/FieldGroup/FieldGroup.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+type Props = Omit<HTMLAttributes<'fieldset'>, 'disabled'> & {
+  label: string;
+  disabled?: boolean;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  disabled = false,
+  label,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<fieldset
+  {...attrs}
+  class:list={['field-group', className]}
+  disabled={disabled}
+  data-disabled={disabled ? true : undefined}
+  data-tone={resolvedTone}
+  data-widget="field-group"
+>
+  <legend class="field-group__label">{label}</legend>
+  <div class="field-group__content">
+    <slot />
+  </div>
+</fieldset>

package/src/components/forms/FieldGroup/FieldGroup.css

@@ -0,0 +1,30 @@
+.field-group {
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.field-group__label {
+  display: inline-flex;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  align-items: center;
+  color: var(--nox-tone-text);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wide);
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+  text-transform: uppercase;
+}
+
+.field-group__content {
+  min-inline-size: 0;
+  margin-block-start: var(--nox-space-2);
+}
+
+.field-group[data-disabled] .field-group__label {
+  color: var(--nox-text-disabled);
+}

package/src/components/icons/CheckIcon.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M7 16.5L13 22.5L25 9.5"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/index.ts

@@ -15,7 +15,9 @@ export { default as IconList } from './data-display/IconList/IconList.astro';
 export { default as MetricTile } from './data-display/MetricTile/MetricTile.astro';
 export { default as Tag } from './data-display/Tag/Tag.astro';
 export { default as TextPair } from './data-display/TextPair/TextPair.astro';
+export { default as Checkbox } from './forms/Checkbox/Checkbox.astro';
 export { default as FieldError } from './forms/FieldError/FieldError.astro';
+export { default as FieldGroup } from './forms/FieldGroup/FieldGroup.astro';
 export { default as FieldLabel } from './forms/FieldLabel/FieldLabel.astro';
 export { default as TextInput } from './forms/TextInput/TextInput.astro';
 export { default as Spinner } from './feedback/Spinner/Spinner.astro';

package/src/composition/Grid/Grid.astro

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'astro/types';
 
 type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type GridColumns = 1 | 2 | 3 | 4 | 'content-sidebar';
+type GridFlow = 'row' | 'column';
 type GridRows = 1 | 2 | 3 | 4;
 type GridItemAlignment = 'start' | 'center' | 'end' | 'stretch';
 type GridCollapseAt = 'none' | 'sm' | 'md' | 'lg' | 'xl';
@@ -14,8 +15,10 @@ type Props = Omit<HTMLAttributes<'div'>, 'class' | 'style'> & {
   collapseAt?: GridCollapseAt;
   class?: string;
   compactColumns?: 1 | 2 | 3 | 4;
+  compactFlow?: GridFlow;
   gap?: GridGap;
   columns?: GridColumns;
+  flow?: GridFlow;
   justifyItems?: GridItemAlignment;
   lastRow?: GridLastRow;
   minTrackWidth?: string;
@@ -28,8 +31,10 @@ const {
   collapseAt = 'md',
   class: className,
   compactColumns,
+  compactFlow,
   gap = 'md',
   columns,
+  flow = 'row',
   justifyItems = 'stretch',
   lastRow = 'preserve',
   minTrackWidth = '16rem',
@@ -52,6 +57,8 @@ const gridVariables = {
   ...(compactColumns
     ? { '--grid-compact-columns': String(compactColumns) }
     : {}),
+  '--grid-compact-flow': compactFlow ?? flow,
+  '--grid-flow': flow,
   ...(rows ? { '--grid-rows': String(rows) } : {}),
   '--grid-align-items': alignItems,
   '--grid-justify-items': justifyItems,
@@ -69,7 +76,9 @@ const gridStyle = Object.entries(gridVariables)
     data-align-items={alignItems}
     data-collapse-at={collapseMode}
     data-compact-columns={compactColumns}
+    data-compact-flow={compactFlow}
     data-columns={typeof columns === 'number' ? columns : undefined}
+    data-flow={flow}
     data-gap={gap}
     data-justify-items={justifyItems}
     data-layout={layout}

package/src/composition/Grid/Grid.css

@@ -8,6 +8,7 @@
   min-width: 0;
   align-items: var(--grid-align-items);
   gap: var(--grid-gap);
+  grid-auto-flow: var(--grid-flow);
   justify-items: var(--grid-justify-items);
 }
 
@@ -300,7 +301,58 @@
 
 @container (width < 24rem) {
   .grid[data-compact-columns] {
+    grid-auto-flow: var(--grid-compact-flow);
     grid-template-columns: repeat(var(--grid-compact-columns), minmax(0, 1fr));
+    grid-template-rows: none;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-span='1'] {
+    grid-column: span 1;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-span='2'] {
+    grid-column: span 2;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-span='3'] {
+    grid-column: span 3;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-span='4'] {
+    grid-column: span 4;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-row-span='1'] {
+    grid-row: span 1;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-row-span='2'] {
+    grid-row: span 2;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-row-span='3'] {
+    grid-row: span 3;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-compact-row-span='4'] {
+    grid-row: span 4;
+  }
+
+  .grid[data-compact-columns]
+    > [data-composition='grid-item'][data-sizing='fill-track'] {
+    --grid-item-fill-track-contain: none;
+    --grid-item-fill-track-content-block-size: auto;
+    --grid-item-fill-track-content-inset: auto;
+    --grid-item-fill-track-content-position: static;
+    --grid-item-fill-track-overflow: visible;
   }
 
   .grid[data-last-row='fill'][data-compact-columns] > * {

package/src/composition/GridItem/GridItem.astro

@@ -14,8 +14,11 @@ type Props = Omit<GridItemAttributes, 'class' | 'style'> & {
   alignSelf?: GridItemAlignment;
   class?: string;
   collapseOrder?: GridItemCollapseOrder;
+  compactRowSpan?: GridItemSpan;
+  compactSpan?: GridItemSpan;
   justifySelf?: GridItemAlignment;
   position?: GridItemPosition;
+  rowSpan?: GridItemSpan;
   sizing?: GridItemSizing;
   span?: GridItemSpan;
 };
@@ -25,8 +28,11 @@ const {
   alignSelf = 'auto',
   class: className,
   collapseOrder = 'preserve',
+  compactRowSpan,
+  compactSpan,
   justifySelf = 'auto',
   position = 'static',
+  rowSpan = 1,
   sizing = 'auto',
   span = 1,
   ...attrs
@@ -39,8 +45,11 @@ const {
   data-composition="grid-item"
   data-align-self={alignSelf}
   data-collapse-order={collapseOrder}
+  data-compact-row-span={compactRowSpan}
+  data-compact-span={compactSpan}
   data-justify-self={justifySelf}
   data-position={position}
+  data-row-span={rowSpan}
   data-sizing={sizing}
   data-span={span}
 >

package/src/composition/GridItem/GridItem.css

@@ -69,6 +69,18 @@
   grid-column: span 4;
 }
 
+.grid-item[data-row-span='2'] {
+  grid-row: span 2;
+}
+
+.grid-item[data-row-span='3'] {
+  grid-row: span 3;
+}
+
+.grid-item[data-row-span='4'] {
+  grid-row: span 4;
+}
+
 .grid-item[data-sizing='fill-track'] {
   --grid-item-fill-track-contain: size layout;
   --grid-item-fill-track-content-block-size: 100%;

package/src/display/contracts.ts

@@ -242,6 +242,7 @@ export type TableCell = {
 
 export type TableRow = {
   key?: string;
+  disabled?: boolean;
   href?: string;
   hidden?: boolean;
   filters?: Readonly<Record<string, readonly string[]>>;

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

@@ -102,12 +102,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/tableFilterController.ts

@@ -13,8 +13,57 @@ type CachedFilterValues = {
 };
 
 const initializedAttribute = 'data-table-filters-initialized';
+const externalFiltersAttribute = 'data-table-filter-external';
+const exclusionsAttribute = 'data-table-filter-exclusions';
+const refreshEvent = 'table-filter:refresh';
 const noop = (): void => undefined;
 
+export function setTableExternalFilterActive(
+  root: HTMLElement,
+  key: string,
+  active: boolean,
+): void {
+  setTokenAttribute(root, externalFiltersAttribute, key, active);
+}
+
+export function setTableRowFilterExclusion(
+  row: HTMLElement,
+  key: string,
+  excluded: boolean,
+): void {
+  setTokenAttribute(row, exclusionsAttribute, key, excluded);
+}
+
+function setTokenAttribute(
+  element: HTMLElement,
+  attribute: string,
+  key: string,
+  enabled: boolean,
+): void {
+  const normalizedKey = key.trim();
+  if (!normalizedKey || /\s/.test(normalizedKey)) {
+    throw new Error('Table filter keys must be non-empty tokens');
+  }
+
+  const tokens = new Set(
+    (element.getAttribute(attribute) ?? '')
+      .split(/\s+/)
+      .filter(Boolean),
+  );
+  if (enabled) tokens.add(normalizedKey);
+  else tokens.delete(normalizedKey);
+
+  if (tokens.size > 0) {
+    element.setAttribute(attribute, [...tokens].join(' '));
+  } else {
+    element.removeAttribute(attribute);
+  }
+}
+
+export function refreshTableFilters(root: HTMLElement): void {
+  root.dispatchEvent(new Event(refreshEvent));
+}
+
 export function initTableFilters(root: HTMLElement): () => void {
   if (root.getAttribute(initializedAttribute) === 'true') return noop;
 
@@ -79,7 +128,11 @@ export function initTableFilters(root: HTMLElement): () => void {
     const activeSelections = [...selections.entries()].filter(
       ([, value]) => value.length > 0,
     );
-    const active = query.length > 0 || activeSelections.length > 0;
+    const hasExternalFilter =
+      root.hasAttribute(externalFiltersAttribute) ||
+      rows.some((row) => row.hasAttribute(exclusionsAttribute));
+    const active =
+      query.length > 0 || activeSelections.length > 0 || hasExternalFilter;
     let visibleRows = 0;
 
     for (const row of rows) {
@@ -92,7 +145,10 @@ export function initTableFilters(root: HTMLElement): () => void {
         ([field, selectedValue]) =>
           (cached.values[field] ?? []).includes(selectedValue),
       );
-      const visible = matchesSearch && matchesSelections;
+      const visible =
+        matchesSearch &&
+        matchesSelections &&
+        !row.hasAttribute(exclusionsAttribute);
 
       if (row.hidden !== !visible) row.hidden = !visible;
       if (visible) visibleRows += 1;
@@ -168,6 +224,7 @@ export function initTableFilters(root: HTMLElement): () => void {
   applyFilters();
   search?.addEventListener('input', handleSearch);
   root.addEventListener('combobox:change', handleComboboxChange);
+  root.addEventListener(refreshEvent, scheduleFilters);
   table.addEventListener('table:rows-appended', handleRowsAppended);
   table.addEventListener(
     'table:progressive-complete',
@@ -182,6 +239,7 @@ export function initTableFilters(root: HTMLElement): () => void {
     }
     search?.removeEventListener('input', handleSearch);
     root.removeEventListener('combobox:change', handleComboboxChange);
+    root.removeEventListener(refreshEvent, scheduleFilters);
     table.removeEventListener('table:rows-appended', handleRowsAppended);
     table.removeEventListener(
       'table:progressive-complete',

package/src/patterns/Table/tableLayout.ts

@@ -25,7 +25,7 @@ const compactIndexRoleMinimums = {
 
 const regularIndexRoleMinimums = {
   ...compactIndexRoleMinimums,
-  value: 7,
+  value: 8.5,
 } satisfies Record<TableColumnRole, number>;
 
 export function getTableColumnDensity(
@@ -39,6 +39,7 @@ export function getTableColumnTemplate(
   layout: TableLayout = 'default',
   indexSizing: TableIndexSizing = 'compact',
 ): string {
+  const columnDensity = getTableColumnDensity(columns);
   const indexMinimums = getIndexRoleMinimums(columns);
 
   return columns
@@ -46,7 +47,7 @@ export function getTableColumnTemplate(
       layout === 'index'
         ? indexSizing === 'overflow'
           ? 'max-content'
-          : getIndexColumnTrack(column.role, indexMinimums)
+          : getIndexColumnTrack(column.role, indexMinimums, columnDensity)
         : getDefaultColumnTrack(column),
     )
     .join(' ');
@@ -91,9 +92,15 @@ function getIndexRoleMinimums(
 function getIndexColumnTrack(
   role: TableColumnRole,
   minimums: Record<TableColumnRole, number>,
+  density: 'compact' | 'regular',
 ): string {
   const minimum = `${minimums[role]}rem`;
-  return role === 'primary' ? `minmax(${minimum}, 1fr)` : minimum;
+  if (role === 'primary') {
+    const weight = density === 'compact' ? 2 : 1;
+    return `minmax(${minimum}, ${weight}fr)`;
+  }
+  if (role === 'value') return `minmax(${minimum}, 1fr)`;
+  return minimum;
 }
 
 function getDefaultColumnTrack(column: TableColumn): string {

package/src/styles/style.css

@@ -41,8 +41,10 @@
 @import '../components/data-display/Tag/Tag.css' layer(components);
 @import '../components/data-display/TextPair/TextPair.css'
   layer(components);
+@import '../components/forms/Checkbox/Checkbox.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/feedback/Tooltip/Tooltip.css' layer(components);
 @import '../components/feedback/Spinner/Spinner.css' layer(components);