@astronox/core 0.1.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,34 +33,22 @@ 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
 contracts, configuration, theme, client behavior, data validation, and SEO.
 Deep imports into the physical `src` tree are not part of the public API.
 
-## 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. Implement and commit the generic change in this repository.
-2. Validate it from the relevant linked consumer.
-3. Publish a prerelease or stable package version.
-4. Update consumers through their dependency management workflow.
-
-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.
+Locale catalogs, localized routing, preference persistence, localized metadata,
+and responsive media presentation are available through the `i18n`, `routing`,
+`seo`, and `display` entry points. Consuming sites provide their own locale
+definitions, translations, route names, product metadata, and assets. Generic
+component labels can extend `defaultCoreMessages` through
+`resolveCoreMessages()` while retaining the English fallback.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astronox/core",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Reusable Astro components, patterns, styles, and infrastructure for AstroNox sites.",
   "license": "MIT",
   "keywords": [
@@ -35,9 +35,11 @@
     "./config": "./src/config/index.ts",
     "./data": "./src/data/index.ts",
     "./display": "./src/display/index.ts",
+    "./i18n": "./src/i18n/index.ts",
     "./layouts": "./src/layouts/index.ts",
     "./patterns": "./src/patterns/index.ts",
     "./primitives": "./src/primitives/index.ts",
+    "./routing": "./src/routing/index.ts",
     "./seo": "./src/seo/index.ts",
     "./theme": "./src/theme/index.ts",
     "./styles.css": "./src/styles/style.css",

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/components/navigation/Breadcrumbs/Breadcrumbs.astro

@@ -2,6 +2,7 @@
 import type { HTMLAttributes } from 'astro/types';
 import type { BreadcrumbItem } from '../../../display/contracts';
 import type { Tone } from '../../../theme/contracts';
+import { defaultCoreMessages } from '../../../i18n/coreMessages';
 
 type Props = HTMLAttributes<'nav'> & {
   items: readonly BreadcrumbItem[];
@@ -13,7 +14,7 @@ const {
   class: className,
   'data-tone': dataTone,
   items,
-  label = "Fil d'Ariane",
+  label = defaultCoreMessages.navigation.breadcrumbs,
   tone,
   ...attrs
 } = Astro.props;

package/src/components/navigation/SubNavigation/SubNavigation.astro

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
 import type { SubNavigationItem } from '../navigationTypes';
 import Media from '../../../primitives/media/Media/Media.astro';
+import { defaultCoreMessages } from '../../../i18n/coreMessages';
 
 type Props = HTMLAttributes<'nav'> & {
   items: readonly SubNavigationItem[];
@@ -14,7 +15,7 @@ const {
   class: className,
   'data-tone': dataTone,
   items,
-  label = 'Navigation de section',
+  label = defaultCoreMessages.navigation.section,
   tone,
   ...attrs
 } = Astro.props;

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/display/index.ts

@@ -1 +1,2 @@
 export * from './contracts';
+export * from './responsiveMedia';