@astronox/core 0.1.0

package/src/components/icons/MountainIcon.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  class: className,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  class:list={['circle-symbol-icon', className]}
+  data-terrain-icon="mountain"
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
+  <path
+    class="circle-symbol-icon__fill"
+    d="m5.5 24 7.3-13 3.1 5.1 3.4-7.1 7.2 15H5.5Z"></path>
+  <path
+    class="circle-symbol-icon__highlight"
+    d="m10.8 14.6 2-3.6 3.1 5.1 1.4-2.9 2.4 3.6-3.5-1.1-2.5 2.1-2.9-3.2Z"
+  ></path>
+</svg>

package/src/components/icons/NightIcon.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  class: className,
+  width = 32,
+  height = 32,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  class={className}
+  width={width}
+  height={height}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <path
+    d="M22.5 19.25A7.5 7.5 0 0 1 12.75 9.5a7.5 7.5 0 1 0 9.75 9.75Z"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/icons/PlayIcon.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="M10 7.5V24.5L24 16L10 7.5Z"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/icons/PlusIcon.astro

@@ -0,0 +1,21 @@
+---
+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="M16 4V28M4 16H28"
+    stroke="currentColor"
+    stroke-width="3"
+    stroke-linecap="round"></path>
+</svg>

package/src/components/icons/PoisonIcon.astro

@@ -0,0 +1,24 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+type Props = HTMLAttributes<'svg'>;
+const {
+  class: className,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  class:list={['circle-symbol-icon', className]}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
+  <path
+    class="circle-symbol-icon__fill"
+    d="M16 7s-7 8.2-7 13a7 7 0 0 0 14 0c0-4.8-7-13-7-13Z"></path>
+</svg>

package/src/components/icons/RibbonIcon.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+const { class: className, ...props }: Props = Astro.props;
+---
+
+<svg
+  {...props}
+  class:list={['ribbon-icon', className]}
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
+>
+  <path
+    d="M8 14.5 6.5 22l5.5-3 5.5 3-1.5-7.5"
+    stroke="currentColor"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+  <circle cx="12" cy="8" r="6" stroke="currentColor" stroke-width="1.75"
+  ></circle>
+  <circle cx="12" cy="8" r="2.5" fill="currentColor"></circle>
+</svg>

package/src/components/icons/SlashIcon.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 24 32"
+  fill="none"
+  shape-rendering="geometricPrecision"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M18.5 3L5.5 29"
+    stroke="currentColor"
+    stroke-width="3"
+    stroke-linecap="round"></path>
+</svg>

package/src/components/icons/SlowIcon.astro

@@ -0,0 +1,25 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+type Props = HTMLAttributes<'svg'>;
+const {
+  class: className,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  class:list={['circle-symbol-icon', className]}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
+  <path
+    class="circle-symbol-icon__mark"
+    d="M16 8v16M9 12l14 8M9 20l14-8M13 10l3 3 3-3M13 22l3-3 3 3"
+  ></path>
+</svg>

package/src/components/icons/StarIcon.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  class: className,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  class:list={['star-icon', className]}
+  viewBox="0 0 24 24"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <path
+    d="m12 2.75 2.76 5.6 6.18.9-4.47 4.36 1.05 6.16L12 16.86l-5.52 2.91 1.05-6.16-4.47-4.36 6.18-.9L12 2.75Z"
+    fill="currentColor"
+    stroke="currentColor"
+    stroke-linejoin="round"
+    stroke-width="1.25"></path>
+</svg>

package/src/components/icons/StunIcon.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+type Props = HTMLAttributes<'svg'>;
+const {
+  class: className,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  class:list={['circle-symbol-icon', className]}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
+  <path class="circle-symbol-icon__fill" d="m18 7-8 11h5l-1 7 8-11h-5l1-7Z"></path>
+</svg>

package/src/components/icons/TableSortIcon.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 16 16"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <path
+    d="m4.5 6 3.5-3.5L11.5 6"
+    data-table-sort-arrow="ascending"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="1.5"></path>
+  <path
+    d="m4.5 10 3.5 3.5 3.5-3.5"
+    data-table-sort-arrow="descending"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="1.5"></path>
+</svg>

package/src/components/icons/WaterIcon.astro

@@ -0,0 +1,30 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  class: className,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  class:list={['circle-symbol-icon', className]}
+  data-terrain-icon="water"
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
+  <path
+    class="circle-symbol-icon__fill"
+    d="M16 5.5c3.1 4.2 7.5 9 7.5 13.3A7.5 7.5 0 1 1 8.5 18.8C8.5 14.5 12.9 9.7 16 5.5Z"
+  ></path>
+  <path class="circle-symbol-icon__highlight" d="M12.2 19.2a4.5 4.5 0 0 0 4.5 4.1"
+  ></path>
+</svg>

package/src/components/index.ts

@@ -0,0 +1,83 @@
+export { default as ActionListItem } from './actions/ActionListItem/ActionListItem.astro';
+export { default as Button } from './actions/Button/Button.astro';
+export { default as CardAction } from './actions/CardAction/CardAction.astro';
+export { default as MediaTrigger } from './actions/MediaTrigger/MediaTrigger.astro';
+export { default as ScrollToTop } from './actions/ScrollToTop/ScrollToTop.astro';
+export { default as CardBody } from './content/CardBody/CardBody.astro';
+export { default as CardFooter } from './content/CardFooter/CardFooter.astro';
+export { default as CardHeader } from './content/CardHeader/CardHeader.astro';
+export { default as CardLink } from './content/CardLink/CardLink.astro';
+export { default as CodeBlock } from './content/CodeBlock/CodeBlock.astro';
+export { default as InlineDefinition } from './content/InlineDefinition/InlineDefinition.astro';
+export { default as MarkdownContent } from './content/MarkdownContent/MarkdownContent.astro';
+export { default as BadgeList } from './data-display/BadgeList/BadgeList.astro';
+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 FieldError } from './forms/FieldError/FieldError.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';
+export { default as Tooltip } from './feedback/Tooltip/Tooltip.astro';
+export { default as CanvasFrame } from './media/CanvasFrame/CanvasFrame.astro';
+export { default as EmbedFrame } from './media/EmbedFrame/EmbedFrame.astro';
+export { default as MediaFrame } from './media/MediaFrame/MediaFrame.astro';
+export { default as Breadcrumbs } from './navigation/Breadcrumbs/Breadcrumbs.astro';
+export { default as DesktopNavigation } from './navigation/DesktopNavigation.astro';
+export { default as Header } from './navigation/Header.astro';
+export { default as MobileNavigation } from './navigation/MobileNavigation.astro';
+export { default as NavigationBrand } from './navigation/NavigationBrand.astro';
+export { default as NavigationItemContent } from './navigation/NavigationItemContent.astro';
+export { default as NavigationLink } from './navigation/NavigationLink.astro';
+export { default as NavigationLinks } from './navigation/NavigationLinks.astro';
+export { default as NavigationMenuList } from './navigation/NavigationMenuList.astro';
+export { default as SkipLink } from './navigation/SkipLink/SkipLink.astro';
+export { default as SubNavigation } from './navigation/SubNavigation/SubNavigation.astro';
+export { default as SeoHead } from './seo/SeoHead.astro';
+export * from './content/CodeBlock/contracts';
+export * from './content/CodeBlock/codeBlockController';
+export * from './content/MarkdownContent/contracts';
+export * from './data-display/MetricTile/metricTileController';
+export * from './forms/FieldError/fieldErrorState';
+export * from './forms/TextInput/textInputController';
+export * from './feedback/Tooltip/tooltipController';
+export * from './media/CanvasFrame/canvasFrameController';
+export * from './media/EmbedFrame/embedFrameController';
+export * from './navigation/mobileNavigationController';
+export * from './navigation/navigationState';
+export * from './navigation/navigationTypes';
+export * from './widgetTypes';
+export { default as ArrowDownIcon } from './icons/ArrowDownIcon.astro';
+export { default as ArrowLeftIcon } from './icons/ArrowLeftIcon.astro';
+export { default as ArrowRightIcon } from './icons/ArrowRightIcon.astro';
+export { default as ArrowUpDownIcon } from './icons/ArrowUpDownIcon.astro';
+export { default as ArrowUpIcon } from './icons/ArrowUpIcon.astro';
+export { default as BulletIcon } from './icons/BulletIcon.astro';
+export { default as BurnIcon } from './icons/BurnIcon.astro';
+export { default as ClearIcon } from './icons/ClearIcon.astro';
+export { default as CloseIcon } from './icons/CloseIcon.astro';
+export { default as CopyIcon } from './icons/CopyIcon.astro';
+export { default as DayIcon } from './icons/DayIcon.astro';
+export { default as DollarIcon } from './icons/DollarIcon.astro';
+export { default as DownloadIcon } from './icons/DownloadIcon.astro';
+export { default as EnterFullscreenIcon } from './icons/EnterFullscreenIcon.astro';
+export { default as EqualIcon } from './icons/EqualIcon.astro';
+export { default as ExitFullscreenIcon } from './icons/ExitFullscreenIcon.astro';
+export { default as ExternalLinkIcon } from './icons/ExternalLinkIcon.astro';
+export { default as FieldIcon } from './icons/FieldIcon.astro';
+export { default as GrassIcon } from './icons/GrassIcon.astro';
+export { default as InfoIcon } from './icons/InfoIcon.astro';
+export { default as MinusIcon } from './icons/MinusIcon.astro';
+export { default as MountainIcon } from './icons/MountainIcon.astro';
+export { default as NightIcon } from './icons/NightIcon.astro';
+export { default as PlayIcon } from './icons/PlayIcon.astro';
+export { default as PlusIcon } from './icons/PlusIcon.astro';
+export { default as PoisonIcon } from './icons/PoisonIcon.astro';
+export { default as RibbonIcon } from './icons/RibbonIcon.astro';
+export { default as SlashIcon } from './icons/SlashIcon.astro';
+export { default as SlowIcon } from './icons/SlowIcon.astro';
+export { default as StarIcon } from './icons/StarIcon.astro';
+export { default as StunIcon } from './icons/StunIcon.astro';
+export { default as TableSortIcon } from './icons/TableSortIcon.astro';
+export { default as WaterIcon } from './icons/WaterIcon.astro';

package/src/components/media/CanvasFrame/CanvasFrame.astro

@@ -0,0 +1,130 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+import Button from '../../actions/Button/Button.astro';
+import Spinner from '../../feedback/Spinner/Spinner.astro';
+import FullscreenControl from '../../../patterns/Fullscreen/FullscreenControl.astro';
+
+type CanvasAspectRatio = '16/9' | '4/3';
+type CanvasActivation = 'immediate' | 'manual';
+type CanvasWheelInput = 'canvas' | 'page';
+
+type CanvasFullscreen = {
+  enterLabel: string;
+  exitLabel: string;
+};
+
+type Props = HTMLAttributes<'div'> & {
+  activation?: CanvasActivation;
+  activationLabel?: string;
+  aspectRatio?: CanvasAspectRatio;
+  canvasId?: string;
+  frameId: string;
+  fullscreen?: CanvasFullscreen;
+  loadingLabel: string;
+  title: string;
+  tone?: Tone;
+  wheelInput?: CanvasWheelInput;
+};
+
+const {
+  activation = 'immediate',
+  activationLabel,
+  aspectRatio = '16/9',
+  canvasId,
+  class: className,
+  'data-tone': dataTone,
+  frameId,
+  fullscreen,
+  loadingLabel,
+  title,
+  tone,
+  wheelInput = 'canvas',
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+const resolvedCanvasId = canvasId ?? `${frameId}-canvas`;
+---
+
+<nox-canvas-frame
+  {...attrs}
+  id={frameId}
+  class:list={['canvas-frame', className]}
+  data-aspect-ratio={aspectRatio}
+  data-canvas-frame-active={activation === 'immediate' ? 'true' : undefined}
+  data-canvas-frame-activation={activation}
+  data-canvas-frame-loading-label={loadingLabel}
+  data-canvas-frame-wheel-input={wheelInput}
+  data-fullscreen-region={fullscreen ? true : undefined}
+  data-tone={resolvedTone}
+  data-widget="canvas-frame"
+  aria-busy={activation === 'immediate' ? 'true' : 'false'}
+>
+  <canvas
+    id={resolvedCanvasId}
+    class="canvas-frame__content"
+    data-canvas-frame-content
+    aria-label={title}
+    tabindex="-1"
+  >
+    {title}
+  </canvas>
+  {
+    activation === 'manual' && activationLabel ? (
+      <span class="canvas-frame__activation" data-canvas-frame-activation-layer>
+        <Button type="button" prominent data-canvas-frame-activate>
+          {activationLabel}
+        </Button>
+      </span>
+    ) : null
+  }
+  <span
+    class="canvas-frame__loading"
+    data-canvas-frame-loading
+    hidden={activation === 'manual'}
+  >
+    <Spinner
+      data-canvas-frame-loading-indicator
+      label={loadingLabel}
+      size="lg"
+    />
+  </span>
+  <span
+    class="canvas-frame__feedback"
+    data-canvas-frame-feedback
+    role="alert"
+    hidden
+  ></span>
+  {
+    fullscreen ? (
+      <FullscreenControl
+        targetId={frameId}
+        enterLabel={fullscreen.enterLabel}
+        exitLabel={fullscreen.exitLabel}
+        placement="overlay"
+      />
+    ) : null
+  }
+</nox-canvas-frame>
+
+<script>
+  import { initCanvasFrame } from './canvasFrameController';
+
+  class NoxCanvasFrameElement extends HTMLElement {
+    cleanup?: () => void;
+
+    connectedCallback() {
+      this.cleanup?.();
+      this.cleanup = initCanvasFrame(this);
+    }
+
+    disconnectedCallback() {
+      this.cleanup?.();
+      this.cleanup = undefined;
+    }
+  }
+
+  if (!customElements.get('nox-canvas-frame')) {
+    customElements.define('nox-canvas-frame', NoxCanvasFrameElement);
+  }
+</script>

package/src/components/media/CanvasFrame/CanvasFrame.css

@@ -0,0 +1,59 @@
+.canvas-frame {
+  position: relative;
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  overflow: hidden;
+  background: var(--nox-surface);
+}
+
+.canvas-frame[data-aspect-ratio='16/9'] {
+  aspect-ratio: 16 / 9;
+}
+
+.canvas-frame[data-aspect-ratio='4/3'] {
+  aspect-ratio: 4 / 3;
+}
+
+.canvas-frame__content {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
+  background: var(--nox-surface);
+  outline: 0;
+}
+
+.canvas-frame__activation,
+.canvas-frame__loading {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: var(--nox-surface);
+}
+
+.canvas-frame__activation {
+  z-index: 1;
+}
+
+.canvas-frame__loading {
+  z-index: 2;
+  pointer-events: none;
+}
+
+.canvas-frame__feedback {
+  position: absolute;
+  z-index: 3;
+  inset-block-start: var(--nox-space-3);
+  inset-inline: var(--nox-space-3);
+  max-inline-size: 48rem;
+  margin-inline: auto;
+  padding: var(--nox-space-3) var(--nox-space-4);
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-surface);
+  color: var(--nox-text);
+  box-shadow: var(--nox-shadow-surface);
+  pointer-events: none;
+}