@astronox/core 0.1.0

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

@@ -0,0 +1,47 @@
+---
+import ArrowUpDownIcon from '../../icons/ArrowUpDownIcon.astro';
+import ArrowDownIcon from '../../icons/ArrowDownIcon.astro';
+import ArrowRightIcon from '../../icons/ArrowRightIcon.astro';
+import ArrowUpIcon from '../../icons/ArrowUpIcon.astro';
+import BulletIcon from '../../icons/BulletIcon.astro';
+import EqualIcon from '../../icons/EqualIcon.astro';
+import FieldIcon from '../../icons/FieldIcon.astro';
+import GrassIcon from '../../icons/GrassIcon.astro';
+import MountainIcon from '../../icons/MountainIcon.astro';
+import WaterIcon from '../../icons/WaterIcon.astro';
+import type { MarkdownSymbol } from './contracts';
+
+type Props = {
+  node: MarkdownSymbol;
+};
+
+const { node }: Props = Astro.props;
+const Icon = {
+  adjustment: ArrowUpDownIcon,
+  'arrow-right': ArrowRightIcon,
+  bullet: BulletIcon,
+  decrease: ArrowDownIcon,
+  increase: ArrowUpIcon,
+  neutral: EqualIcon,
+  'terrain-field': FieldIcon,
+  'terrain-grass': GrassIcon,
+  'terrain-mountain': MountainIcon,
+  'terrain-water': WaterIcon,
+}[node.name];
+---
+
+<span
+  class="markdown-content__symbol"
+  data-markdown-symbol={node.name}
+  data-tone={node.tone}
+  lang={node.lang}
+>
+  <Icon class="markdown-content__symbol-icon" />
+  {node.label ? (
+    <span class="markdown-content__symbol-label">{node.label}</span>
+  ) : node.accessibleLabel ? (
+    <span class="markdown-content__visually-hidden">
+      {node.accessibleLabel}
+    </span>
+  ) : null}
+</span>

package/src/components/content/MarkdownContent/contracts.ts

@@ -0,0 +1,181 @@
+import type { DisplayMedia } from '../../../display/contracts';
+import type { Tone } from '../../../theme/contracts';
+
+export type MarkdownText = {
+  type: 'text';
+  lang?: string;
+  value: string;
+};
+
+export type MarkdownSymbolName =
+  | 'adjustment'
+  | 'arrow-right'
+  | 'bullet'
+  | 'decrease'
+  | 'increase'
+  | 'neutral'
+  | 'terrain-field'
+  | 'terrain-grass'
+  | 'terrain-mountain'
+  | 'terrain-water';
+
+export type MarkdownSymbol = {
+  type: 'symbol';
+  accessibleLabel?: string;
+  lang?: string;
+  label?: string;
+  name: MarkdownSymbolName;
+  tone?: Tone;
+};
+
+export type MarkdownStrong = {
+  type: 'strong';
+  children: readonly MarkdownInline[];
+};
+
+export type MarkdownEmphasis = {
+  type: 'emphasis';
+  children: readonly MarkdownInline[];
+};
+
+export type MarkdownInlineCode = {
+  type: 'code';
+  value: string;
+};
+
+export type MarkdownLink = {
+  type: 'link';
+  children: readonly MarkdownInline[];
+  external: boolean;
+  href: string;
+  lang?: string;
+  treatment?: 'reference';
+};
+
+export type MarkdownBreak = {
+  type: 'break';
+};
+
+export type MarkdownInline =
+  | MarkdownText
+  | MarkdownStrong
+  | MarkdownEmphasis
+  | MarkdownInlineCode
+  | MarkdownLink
+  | MarkdownBreak
+  | MarkdownSymbol;
+
+export type MarkdownParagraph = {
+  type: 'paragraph';
+  children: readonly MarkdownInline[];
+};
+
+export type MarkdownCodeBlock = {
+  type: 'code';
+  language?: string;
+  value: string;
+};
+
+export type MarkdownQuote = {
+  type: 'quote';
+  children: readonly MarkdownBlock[];
+  tone?: Tone;
+};
+
+export type MarkdownSeparator = {
+  type: 'separator';
+  emphasis?: 'default' | 'muted';
+};
+
+export type MarkdownListMarker = {
+  lang?: string;
+  label?: string;
+  symbol: Extract<
+    MarkdownSymbolName,
+    | 'adjustment'
+    | 'arrow-right'
+    | 'bullet'
+    | 'decrease'
+    | 'increase'
+    | 'neutral'
+  >;
+  tone: Tone;
+};
+
+export type MarkdownChangeDelta = {
+  accessibleLabel: string;
+  lang?: string;
+  sign: 'minus' | 'neutral' | 'plus';
+  tone: Tone;
+  value: string;
+};
+
+type MarkdownChangeBase = {
+  type: 'change';
+  label: readonly MarkdownInline[];
+};
+
+export type MarkdownChange =
+  | (MarkdownChangeBase & {
+      presentation: 'statement';
+      value: readonly MarkdownInline[];
+    })
+  | (MarkdownChangeBase & {
+      presentation: 'transition';
+      after: string;
+      before: string;
+      delta?: MarkdownChangeDelta;
+      suffix?: readonly MarkdownInline[];
+      transitionLabel: string;
+      valueLang?: string;
+    });
+
+export type MarkdownResource = {
+  layout: 'compact' | 'detailed';
+  media: DisplayMedia;
+  mediaPlacement: 'inline' | 'lead';
+  mediaScale: 'compact' | 'featured';
+  title: readonly MarkdownInline[];
+};
+
+export type MarkdownListItem = {
+  children: readonly MarkdownBlock[];
+  heading?: readonly MarkdownInline[];
+  marker?: MarkdownListMarker;
+  resource?: MarkdownResource;
+};
+
+export type MarkdownList = {
+  type: 'list';
+  items: readonly MarkdownListItem[];
+};
+
+export type MarkdownHeadingLevel = 2 | 3 | 4 | 5 | 6;
+
+export type MarkdownHeading = {
+  type: 'heading';
+  children: readonly MarkdownInline[];
+  id: string;
+  level: MarkdownHeadingLevel;
+};
+
+export type MarkdownBlock =
+  | MarkdownParagraph
+  | MarkdownCodeBlock
+  | MarkdownChange
+  | MarkdownHeading
+  | MarkdownQuote
+  | MarkdownSeparator
+  | MarkdownList;
+
+export type MarkdownSection = {
+  type: 'section';
+  blocks: readonly MarkdownBlock[];
+  id: string;
+  level: MarkdownHeadingLevel;
+  title: string;
+};
+
+export type MarkdownDocument = {
+  blocks: readonly (MarkdownBlock | MarkdownSection)[];
+};

package/src/components/data-display/BadgeList/BadgeList.astro

@@ -0,0 +1,54 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { DisplayBadge } from '../../../display/contracts';
+import type { Tone } from '../../../theme/contracts';
+
+type Props = HTMLAttributes<'div'> & {
+  badges: readonly DisplayBadge[];
+  label?: string;
+  tone?: Tone;
+};
+
+const {
+  badges,
+  class: className,
+  'data-tone': dataTone,
+  label,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<div
+  {...attrs}
+  class:list={['badge-list', className]}
+  aria-label={label}
+  data-widget="badge-list"
+  data-tone={resolvedTone}
+>
+  {
+    badges.map((item) =>
+      item.href ? (
+        <a
+          class="badge-list__item"
+          href={item.href}
+          data-tone={item.tone}
+          title={item.description}
+        >
+          <span>{item.label}</span>
+          {item.value !== undefined ? <span>{item.value}</span> : null}
+        </a>
+      ) : (
+        <span
+          class="badge-list__item"
+          data-tone={item.tone}
+          title={item.description}
+        >
+          <span>{item.label}</span>
+          {item.value !== undefined ? <span>{item.value}</span> : null}
+        </span>
+      ),
+    )
+  }
+</div>

package/src/components/data-display/BadgeList/BadgeList.css

@@ -0,0 +1,29 @@
+.badge-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--nox-space-2);
+}
+
+.badge-list__item {
+  display: inline-flex;
+  min-width: 0;
+  min-height: 1.75rem;
+  align-items: center;
+  padding: var(--nox-space-1) var(--nox-space-3);
+  gap: var(--nox-space-1);
+  border: var(--nox-border-width) solid var(--nox-tone-border);
+  border-radius: var(--nox-radius-pill);
+  background: var(--nox-tone-background);
+  color: var(--nox-tone-text);
+  font-size: var(--nox-font-size-xs);
+  font-weight: var(--nox-font-weight-strong);
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .badge-list__item[href]:hover {
+    background: var(--nox-tone-hover-background);
+  }
+}

package/src/components/data-display/IconList/IconList.astro

@@ -0,0 +1,64 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { DisplayIconItem } from '../../../display/contracts';
+import type { Tone } from '../../../theme/contracts';
+
+type Props = HTMLAttributes<'div'> & {
+  'data-tone'?: Tone;
+  items: readonly DisplayIconItem[];
+  label?: string;
+  size?: 'small' | 'medium';
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  items,
+  label,
+  size = 'small',
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<div
+  {...attrs}
+  class:list={['icon-list', className]}
+  aria-label={label}
+  data-widget="icon-list"
+  data-icon-list-size={size}
+  data-tone={resolvedTone}
+>
+  {
+    items.map((item) => {
+      const Icon = item.icon;
+      const icon = (
+        <span class="icon-list__icon">
+          <Icon />
+        </span>
+      );
+      const value =
+        item.value !== undefined ? (
+          <span class="icon-list__value">{item.value}</span>
+        ) : null;
+
+      return (
+        <span
+          class="icon-list__item"
+          data-muted={item.muted ? 'true' : undefined}
+          data-tone={item.tone}
+          role="group"
+          aria-label={item.label}
+          title={item.label}
+        >
+          <span class="icon-list__visible" aria-hidden="true">
+            {item.iconPosition === 'end' ? value : icon}
+            {item.iconPosition === 'end' ? icon : value}
+          </span>
+        </span>
+      );
+    })
+  }
+</div>

package/src/components/data-display/IconList/IconList.css

@@ -0,0 +1,55 @@
+.icon-list {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: inherit;
+  gap: var(--nox-space-1);
+  color: var(--nox-text);
+}
+
+.icon-list__item,
+.icon-list__visible {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  gap: var(--nox-space-1);
+}
+
+.icon-list__item {
+  color: var(--nox-tone-color);
+}
+
+.icon-list__item[data-muted='true'] {
+  opacity: 0.4;
+  filter: grayscale(0.65);
+}
+
+.icon-list__icon {
+  display: grid;
+  flex: none;
+  inline-size: var(--icon-list-icon-size);
+  block-size: var(--icon-list-icon-size);
+  place-items: center;
+}
+
+.icon-list__icon > svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.icon-list__value {
+  color: var(--nox-text);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-regular);
+  line-height: 1;
+}
+
+.icon-list[data-icon-list-size='small'] {
+  --icon-list-icon-size: 1.25rem;
+}
+
+.icon-list[data-icon-list-size='medium'] {
+  --icon-list-icon-size: 1.75rem;
+}

package/src/components/data-display/MetricTile/MetricTile.astro

@@ -0,0 +1,68 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { DisplayMetric } from '../../../display/contracts';
+import type { Tone } from '../../../theme/contracts';
+import Tooltip from '../../feedback/Tooltip/Tooltip.astro';
+import MetricTileContent from './MetricTileContent.astro';
+
+type Props = HTMLAttributes<'dl'> &
+  DisplayMetric & {
+    class?: string;
+    'data-tone'?: Tone;
+  };
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  description,
+  icon,
+  items,
+  itemsLabel,
+  label,
+  tone,
+  unit,
+  value,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+{
+  description ? (
+    <Tooltip content={description} tone={resolvedTone}>
+      <dl
+        {...attrs}
+        class:list={['metric-tile', className]}
+        data-widget="metric-tile"
+        data-tooltip-trigger
+        data-tone={resolvedTone}
+      >
+        <MetricTileContent
+          hint
+          icon={icon}
+          items={items}
+          itemsLabel={itemsLabel}
+          label={label}
+          unit={unit}
+          value={value}
+        />
+      </dl>
+    </Tooltip>
+  ) : (
+    <dl
+      {...attrs}
+      class:list={['metric-tile', className]}
+      data-widget="metric-tile"
+      data-tone={resolvedTone}
+    >
+      <MetricTileContent
+        icon={icon}
+        items={items}
+        itemsLabel={itemsLabel}
+        label={label}
+        unit={unit}
+        value={value}
+      />
+    </dl>
+  )
+}

package/src/components/data-display/MetricTile/MetricTile.css

@@ -0,0 +1,103 @@
+.metric-tile {
+  --metric-tile-icon-size: 1.75rem;
+  --metric-tile-unit-size: var(--nox-font-size-sm);
+  --metric-tile-value-size: clamp(var(--nox-font-size-xl), 8cqi, 1.75rem);
+
+  container-type: inline-size;
+  display: grid;
+  min-width: 0;
+  min-height: 5.25rem;
+  align-content: center;
+  justify-items: center;
+  padding: var(--nox-space-4);
+  gap: var(--nox-space-2);
+  border: var(--nox-border-width) solid var(--nox-data-surface-border);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-data-surface-background);
+  margin: 0;
+  text-align: center;
+}
+
+.metric-tile__label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--nox-space-1);
+  color: var(--nox-tone-text);
+  font-size: var(--nox-font-size-xs);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wider);
+  line-height: 1.15;
+  overflow-wrap: anywhere;
+  text-transform: uppercase;
+}
+
+.metric-tile__hint {
+  display: grid;
+  inline-size: 1rem;
+  block-size: 1rem;
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--nox-tone-color);
+}
+
+.metric-tile__hint svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.metric-tile__value {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--nox-space-1);
+  min-width: 0;
+  color: var(--nox-text);
+  line-height: 1.05;
+  margin: 0;
+}
+
+.metric-tile__value strong {
+  font-size: var(--metric-tile-value-size);
+  font-weight: var(--nox-font-weight-strong);
+}
+
+.metric-tile__icon {
+  display: grid;
+  inline-size: var(--metric-tile-icon-size);
+  block-size: var(--metric-tile-icon-size);
+  flex: none;
+  align-self: center;
+  place-items: center;
+  color: var(--nox-tone-color);
+}
+
+.metric-tile__icon > svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.metric-tile__icon[data-position='start'] {
+  order: -1;
+}
+
+.metric-tile__unit {
+  color: var(--nox-text-muted);
+  font-size: var(--metric-tile-unit-size);
+  font-weight: var(--nox-font-weight-medium);
+}
+
+@media (width < 34rem) {
+  .metric-tile {
+    --metric-tile-icon-size: 1.5rem;
+    --metric-tile-unit-size: var(--nox-font-size-xs);
+    --metric-tile-value-size: var(--nox-font-size-lg);
+
+    min-height: 4.75rem;
+    padding: var(--nox-space-3);
+    gap: var(--nox-space-1);
+  }
+}

package/src/components/data-display/MetricTile/MetricTileContent.astro

@@ -0,0 +1,70 @@
+---
+import type {
+  DisplayIconItem,
+  DisplayMetricIcon,
+  DisplayTextValue,
+} from '../../../display/contracts';
+import InfoIcon from '../../icons/InfoIcon.astro';
+import IconList from '../IconList/IconList.astro';
+
+type Props = {
+  hint?: boolean;
+  icon?: DisplayMetricIcon;
+  items?: readonly DisplayIconItem[];
+  itemsLabel?: string;
+  label: string;
+  unit?: string;
+  value?: DisplayTextValue;
+};
+
+const {
+  hint = false,
+  icon,
+  items,
+  itemsLabel,
+  label,
+  unit,
+  value,
+}: Props = Astro.props;
+const ValueIcon = icon?.component;
+---
+
+<dt class="metric-tile__label">
+  <span>{label}</span>
+  {
+    hint ? (
+      <span class="metric-tile__hint" aria-hidden="true">
+        <InfoIcon />
+      </span>
+    ) : null
+  }
+</dt>
+<dd class="metric-tile__value">
+  {
+    items ? (
+      <IconList items={items} label={itemsLabel} size="medium" />
+    ) : (
+      <>
+        <strong data-metric-value>{value}</strong>
+        {icon && ValueIcon ? (
+          <span
+            class="metric-tile__icon"
+            data-position={icon.position ?? 'end'}
+            data-tone={icon.tone}
+            role="img"
+            aria-label={icon.label}
+          >
+            <ValueIcon />
+          </span>
+        ) : null}
+      </>
+    )
+  }
+  {
+    unit ? (
+      <span class="metric-tile__unit" data-metric-unit>
+        {unit}
+      </span>
+    ) : null
+  }
+</dd>

package/src/components/data-display/MetricTile/metricTileController.ts

@@ -0,0 +1,9 @@
+import type { DisplayTextValue } from '../../../display/contracts';
+
+export function setMetricTileValue(
+  root: HTMLElement,
+  value: DisplayTextValue,
+): void {
+  const valueNode = root.querySelector<HTMLElement>('[data-metric-value]');
+  if (valueNode) valueNode.textContent = String(value);
+}