@astronox/core 0.1.0

package/src/components/content/CardLink/CardLink.css

@@ -0,0 +1,362 @@
+.card-link {
+  --surface-border-width: var(--nox-border-width);
+  --surface-border-color: var(--nox-border);
+  --surface-radius: var(--nox-radius-md);
+  --surface-background: color-mix(
+    in srgb,
+    var(--nox-tone-color) 8%,
+    var(--nox-surface)
+  );
+  --card-link-border-color: var(--surface-border-color);
+  --card-link-hover-background: var(--nox-surface-strong);
+  --card-link-active-background: var(--nox-border-muted);
+
+  container-type: inline-size;
+  display: block;
+  min-width: 0;
+  overflow: clip;
+  border: var(--surface-border-width) solid var(--card-link-border-color);
+  border-radius: var(--surface-radius);
+  background: var(--surface-background);
+  color: var(--nox-text);
+  text-decoration: none;
+}
+
+.card-link[data-full='true'] {
+  flex: 1 1 0;
+  width: 100%;
+}
+
+.card-link__layout {
+  --card-link-size: var(--nox-navigation-block-size);
+  --card-link-media-size: 2.35rem;
+  --card-link-artwork-max-size: calc(
+    var(--card-link-size) - (var(--nox-space-1) * 2)
+  );
+
+  display: grid;
+  min-width: 0;
+  min-height: var(--card-link-size);
+}
+
+.card-link[data-media-position='start'] .card-link__layout {
+  grid-template-columns: var(--card-link-size) minmax(0, 1fr);
+}
+
+.card-link[data-media-position='end'] .card-link__layout {
+  grid-template-columns: minmax(0, 1fr) var(--card-link-size);
+}
+
+.card-link__media {
+  display: grid;
+  min-width: 0;
+  min-height: var(--card-link-size);
+  place-items: center;
+  background: color-mix(in srgb, var(--nox-tone-color) 15%, var(--nox-surface));
+}
+
+.card-link[data-media-position='start'] .card-link__media {
+  border-inline-end: var(--nox-border-width) solid var(--card-link-border-color);
+}
+
+.card-link[data-media-position='end'] .card-link__media {
+  border-inline-start: var(--nox-border-width) solid
+    var(--card-link-border-color);
+}
+
+.card-link__media [data-widget='media'] {
+  inline-size: var(--card-link-size);
+  block-size: var(--card-link-size);
+  --media-object-inline-size: auto;
+  --media-object-block-size: auto;
+  --media-object-max-inline-size: var(--card-link-artwork-max-size);
+  --media-object-max-block-size: var(--card-link-artwork-max-size);
+}
+
+.card-link__icon {
+  display: block;
+  inline-size: var(--card-link-media-size);
+  block-size: var(--card-link-media-size);
+}
+
+.card-link__icon[data-tone] {
+  color: var(--nox-tone-color);
+}
+
+.card-link__content {
+  --card-link-content-media-size: calc(
+    var(--card-link-size) - (var(--nox-space-2) * 2)
+  );
+
+  display: grid;
+  min-width: 0;
+  min-block-size: var(--card-link-size);
+  grid-template-rows: minmax(0, 1fr);
+  align-items: center;
+  box-sizing: border-box;
+  padding: var(--nox-space-2) var(--nox-space-4);
+  overflow-wrap: anywhere;
+}
+
+.card-link[data-has-content-media='true'][data-media-position='start']
+  .card-link__content {
+  grid-template-columns:
+    var(--card-link-content-media-size)
+    minmax(0, 1fr);
+  column-gap: var(--nox-space-3);
+}
+
+.card-link[data-has-content-media='true'][data-media-position='end']
+  .card-link__content {
+  grid-template-columns:
+    minmax(0, 1fr)
+    var(--card-link-content-media-size);
+  column-gap: var(--nox-space-3);
+}
+
+.card-link__content-media {
+  display: grid;
+  grid-row: 1;
+  inline-size: var(--card-link-content-media-size);
+  block-size: var(--card-link-size);
+  margin-block: calc(0px - var(--nox-space-2));
+  align-self: center;
+  place-items: center;
+}
+
+.card-link[data-media-position='start'] .card-link__content-media {
+  grid-column: 1;
+}
+
+.card-link[data-media-position='end'] .card-link__content-media {
+  grid-column: 2;
+}
+
+.card-link__content-media [data-widget='media'] {
+  display: flex;
+  inline-size: 100%;
+  block-size: 100%;
+  align-items: center;
+  justify-content: center;
+  --media-object-inline-size: auto;
+  --media-object-block-size: auto;
+  --media-object-max-inline-size: 100%;
+  --media-object-max-block-size: 100%;
+}
+
+.card-link[data-media-size='compact'] {
+  --card-link-resolved-media-size: var(--nox-compact-media-responsive-size);
+}
+
+.card-link[data-media-size='small'] {
+  --card-link-resolved-media-size: calc(
+    var(--nox-compact-media-responsive-size) - var(--nox-space-3)
+  );
+}
+
+.card-link:is(
+    [data-media-size='compact'],
+    [data-media-size='small']
+  )
+  .card-link__layout {
+  --card-link-artwork-max-size: var(--card-link-resolved-media-size);
+}
+
+.card-link:is(
+    [data-media-size='compact'],
+    [data-media-size='small']
+  )
+  .card-link__content {
+  --card-link-content-media-size: var(--card-link-resolved-media-size);
+}
+
+.card-link:is(
+    [data-media-size='compact'],
+    [data-media-size='small']
+  )
+  :is(.card-link__media, .card-link__content-media)
+  [data-widget='media'] {
+  --media-object-inline-size: 100%;
+  --media-object-block-size: 100%;
+  --media-object-max-inline-size: var(--card-link-resolved-media-size);
+  --media-object-max-block-size: var(--card-link-resolved-media-size);
+}
+
+.card-link[data-has-content-media='true'][data-media-position='start']
+  .card-link__content-copy {
+  grid-column: 2;
+}
+
+.card-link[data-has-content-media='true'][data-media-position='end']
+  .card-link__content-copy {
+  grid-column: 1;
+}
+
+.card-link__content-copy {
+  display: grid;
+  grid-row: 1;
+  min-width: 0;
+  align-self: center;
+  align-content: center;
+  justify-self: stretch;
+  gap: var(--nox-space-1);
+}
+
+.card-link__compact-text {
+  display: none;
+  min-width: 0;
+  color: var(--nox-tone-text);
+  font-size: var(--nox-font-size-md);
+  font-weight: var(--nox-font-weight-strong);
+  line-height: 1;
+  overflow-wrap: anywhere;
+}
+
+.card-link[data-direction='next'] .card-link__content-copy {
+  justify-items: end;
+  text-align: end;
+}
+
+.card-link__label {
+  min-width: 0;
+  color: var(--nox-text-muted);
+  font-size: var(--nox-font-size-xs);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wider);
+  line-height: 1;
+  overflow-wrap: anywhere;
+  text-transform: uppercase;
+}
+
+.card-link__text {
+  --text-pair-primary-color: var(--nox-tone-text);
+  align-items: center;
+}
+
+.card-link[data-interactive='true']:active {
+  background: var(--card-link-active-background);
+}
+
+.card-link[data-interactive='true']:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-tone-focus-ring);
+  outline-offset: var(--nox-focus-ring-offset);
+  background: var(--card-link-hover-background);
+}
+
+.card-link[data-interactive='true']:focus-visible .card-link__label {
+  color: var(--nox-tone-text);
+}
+
+.card-link[data-interactive='true']:focus-visible .card-link__text {
+  --text-pair-secondary-color: var(--nox-tone-text);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .card-link[data-interactive='true']:hover {
+    background: var(--card-link-hover-background);
+  }
+
+  .card-link[data-interactive='true']:hover .card-link__label {
+    color: var(--nox-tone-text);
+  }
+
+  .card-link[data-interactive='true']:hover .card-link__text {
+    --text-pair-secondary-color: var(--nox-tone-text);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .card-link,
+  .card-link__label {
+    transition:
+      background-color var(--nox-motion-duration-sm)
+        var(--nox-motion-easing-standard),
+      color var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+      transform var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+  }
+
+  .card-link[data-interactive='true']:active {
+    transform: translateY(1px);
+  }
+}
+
+.card-link[data-disabled='true'] {
+  opacity: 0.4;
+  filter: grayscale(0.65);
+  cursor: not-allowed;
+}
+
+@media (width < 48rem) {
+  .card-link[data-compact-content] .card-link__layout {
+    --card-link-size: var(--nox-navigation-compact-block-size);
+    --card-link-media-size: 2.125rem;
+  }
+
+  .card-link[data-compact-content] .card-link__content {
+    padding-inline: var(--nox-space-3);
+  }
+
+  .card-link[data-compact-content] :is(.card-link__label, .card-link__text) {
+    display: none;
+  }
+
+  .card-link[data-compact-content='text'] .card-link__compact-text {
+    display: block;
+    align-self: center;
+  }
+
+  .card-link[data-compact-content='text'] .card-link__content-media {
+    display: none;
+  }
+
+  .card-link[data-compact-content] .card-link__content {
+    grid-template-columns: minmax(0, 1fr);
+    place-items: center;
+    text-align: center;
+  }
+
+  .card-link[data-compact-content][data-has-content-media='true']
+    .card-link__content {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .card-link[data-compact-content='text'] .card-link__content-copy {
+    justify-self: center;
+    justify-items: center;
+    text-align: center;
+  }
+
+  .card-link[data-compact-content='media'][data-has-content-media='true']
+    .card-link__content-media {
+    grid-area: 1 / 1;
+    place-self: center;
+  }
+
+  .card-link[data-compact-content='media'] .card-link__content-copy {
+    display: none;
+  }
+
+  .card-link[data-compact-content][data-compact-visual='hide']
+    .card-link__layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .card-link[data-compact-content][data-compact-visual='hide']
+    .card-link__media {
+    display: none;
+  }
+}
+
+@container (width < 12rem) {
+  .card-link[data-collapse='icon'][data-has-visual='true'] .card-link__layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .card-link[data-collapse='icon'][data-has-visual='true'] .card-link__media {
+    border-inline: 0;
+  }
+
+  .card-link[data-collapse='icon'][data-has-visual='true'] .card-link__content {
+    display: none;
+  }
+}

package/src/components/content/CodeBlock/CodeBlock.astro

@@ -0,0 +1,102 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import Button from '../../actions/Button/Button.astro';
+import CopyIcon from '../../icons/CopyIcon.astro';
+import type { Tone } from '../../../theme/contracts';
+import type {
+  CodeBlockCopy,
+  CodeBlockPresentation,
+} from './contracts';
+
+type Props = HTMLAttributes<'pre'> & {
+  copy?: CodeBlockCopy;
+  presentation?: CodeBlockPresentation;
+  text: string;
+  tone?: Tone;
+  wrap?: boolean;
+};
+
+const {
+  class: className,
+  copy,
+  'data-tone': dataTone,
+  presentation = 'default',
+  text,
+  tone,
+  wrap = false,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+{
+  copy ? (
+    <nox-code-block
+      {...attrs}
+      class:list={['code-block-shell', className]}
+      data-widget="code-block"
+      data-tone={resolvedTone}
+    >
+      <pre
+        class="code-block"
+        data-code-block-content
+        data-code-block-presentation={presentation}
+        data-wrap={wrap ? true : undefined}
+      >{text}</pre>
+      <Button
+        class="code-block__copy"
+        type="button"
+        size="sm"
+        borderless
+        iconOnly
+        hoverTone="info"
+        aria-label={copy.copyLabel}
+        title={copy.copyLabel}
+        lang={copy.lang}
+        data-code-block-copy
+        data-copy-label={copy.copyLabel}
+        data-copied-label={copy.copiedLabel}
+        data-copy-unavailable-label={copy.unavailableLabel}
+      >
+        <CopyIcon />
+      </Button>
+      <span
+        class="code-block__status"
+        aria-live="polite"
+        lang={copy.lang}
+        data-code-block-status
+      />
+    </nox-code-block>
+  ) : (
+    <pre
+      {...attrs}
+      class:list={['code-block', className]}
+      data-widget="code-block"
+      data-code-block-presentation={presentation}
+      data-tone={resolvedTone}
+      data-wrap={wrap ? true : undefined}
+    >{text}</pre>
+  )
+}
+
+<script>
+  import { initCodeBlock } from './codeBlockController';
+
+  class NoxCodeBlockElement extends HTMLElement {
+    cleanup?: () => void;
+
+    connectedCallback() {
+      this.cleanup?.();
+      this.cleanup = initCodeBlock(this);
+    }
+
+    disconnectedCallback() {
+      this.cleanup?.();
+      this.cleanup = undefined;
+    }
+  }
+
+  if (!customElements.get('nox-code-block')) {
+    customElements.define('nox-code-block', NoxCodeBlockElement);
+  }
+</script>

package/src/components/content/CodeBlock/CodeBlock.css

@@ -0,0 +1,85 @@
+.code-block {
+  min-width: 0;
+  padding: var(--nox-space-4);
+  overflow: auto;
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-surface-muted);
+  color: var(--nox-text);
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  font-size: var(--nox-font-size-xs);
+  font-weight: var(--nox-font-weight-regular);
+  line-height: 1.65;
+  margin: 0;
+  white-space: pre;
+}
+
+.code-block-shell {
+  --code-block-light-line-height: 1.125rem;
+  --code-block-copy-size: calc(
+    var(--code-block-light-line-height) + var(--nox-space-3) +
+      var(--nox-space-3) + var(--nox-border-width) +
+      var(--nox-border-width)
+  );
+
+  position: relative;
+  display: block;
+  min-width: 0;
+}
+
+.code-block-shell .code-block {
+  box-sizing: border-box;
+  inline-size: 100%;
+  padding-inline-end: calc(
+    var(--code-block-copy-size) + var(--nox-space-3)
+  );
+}
+
+.code-block[data-code-block-presentation='light'] {
+  padding-block: var(--nox-space-3);
+  border-color: var(--nox-border);
+  border-radius: 0;
+  background: var(--nox-surface-muted);
+  color: var(--nox-text);
+  line-height: var(--code-block-light-line-height);
+}
+
+.code-block__copy {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inline-size: var(--code-block-copy-size);
+  block-size: var(--code-block-copy-size);
+  min-height: 0;
+  background: transparent;
+}
+
+.code-block__copy:active:not([disabled], [aria-disabled='true']) {
+  background: transparent;
+}
+
+@media (hover: hover) {
+  .code-block__copy[data-button-hover-tone]:hover:not(
+      [disabled],
+      [aria-disabled='true']
+    ) {
+    background: transparent;
+  }
+}
+
+.code-block__status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.code-block[data-wrap] {
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}

package/src/components/content/CodeBlock/codeBlockController.ts

@@ -0,0 +1,60 @@
+import { copyText } from '../../../client/clipboard';
+
+const initializedAttribute = 'data-code-block-initialized';
+const feedbackDurationMs = 1600;
+const noop = (): void => undefined;
+
+export function initCodeBlock(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') return noop;
+
+  const content = root.querySelector<HTMLElement>('[data-code-block-content]');
+  const copyButton = root.querySelector<HTMLButtonElement>(
+    '[data-code-block-copy]',
+  );
+  const status = root.querySelector<HTMLElement>('[data-code-block-status]');
+  if (!content || !copyButton || !status) return noop;
+
+  root.setAttribute(initializedAttribute, 'true');
+  const copyLabel = copyButton.dataset.copyLabel ?? '';
+  const copiedLabel = copyButton.dataset.copiedLabel ?? copyLabel;
+  const unavailableLabel =
+    copyButton.dataset.copyUnavailableLabel ?? copyLabel;
+  let feedbackTimeout: number | undefined;
+
+  const setButtonLabel = (label: string): void => {
+    copyButton.setAttribute('aria-label', label);
+    copyButton.title = label;
+    status.textContent = label;
+  };
+
+  const restoreLabelLater = (): void => {
+    if (feedbackTimeout !== undefined) {
+      window.clearTimeout(feedbackTimeout);
+    }
+    feedbackTimeout = window.setTimeout(() => {
+      setButtonLabel(copyLabel);
+      status.textContent = '';
+      feedbackTimeout = undefined;
+    }, feedbackDurationMs);
+  };
+
+  const handleCopy = async (): Promise<void> => {
+    try {
+      await copyText(content.textContent ?? '');
+      setButtonLabel(copiedLabel);
+    } catch {
+      setButtonLabel(unavailableLabel);
+    }
+    restoreLabelLater();
+  };
+
+  copyButton.addEventListener('click', handleCopy);
+
+  return () => {
+    copyButton.removeEventListener('click', handleCopy);
+    if (feedbackTimeout !== undefined) {
+      window.clearTimeout(feedbackTimeout);
+    }
+    root.removeAttribute(initializedAttribute);
+  };
+}

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

@@ -0,0 +1,8 @@
+export type CodeBlockCopy = {
+  copiedLabel: string;
+  copyLabel: string;
+  lang?: string;
+  unavailableLabel: string;
+};
+
+export type CodeBlockPresentation = 'default' | 'light';

package/src/components/content/InlineDefinition/InlineDefinition.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+type Props = HTMLAttributes<'p'> & {
+  'data-tone'?: Tone;
+  term: string;
+  text?: string;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  term,
+  text,
+  ...attrs
+}: Props = Astro.props;
+const hasText = text !== undefined && text.length > 0;
+---
+
+<p
+  {...attrs}
+  class:list={['inline-definition', className]}
+  data-widget="inline-definition"
+  data-tone={dataTone}
+>
+  <strong class="inline-definition__term">{term}</strong>
+  {hasText ? <span class="inline-definition__separator">:</span> : null}
+  {hasText ? <span class="inline-definition__text"> {text}</span> : null}
+  {!hasText ? <slot /> : null}
+</p>

package/src/components/content/InlineDefinition/InlineDefinition.css

@@ -0,0 +1,9 @@
+.inline-definition {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.inline-definition__term {
+  color: var(--nox-text);
+  font-weight: var(--nox-font-weight-strong);
+}

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

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type {
+  CodeBlockCopy,
+} from '../CodeBlock/contracts';
+import MarkdownNode from './MarkdownNode.astro';
+import type { MarkdownDocument } from './contracts';
+
+type Props = HTMLAttributes<'div'> & {
+  codeBlockCopy?: CodeBlockCopy;
+  document: MarkdownDocument;
+};
+
+const {
+  class: className,
+  codeBlockCopy,
+  document,
+  ...attrs
+}: Props = Astro.props;
+---
+
+<div
+  {...attrs}
+  class:list={['markdown-content', className]}
+  data-widget="markdown-content"
+>
+  {
+    document.blocks.map((block) => (
+      <MarkdownNode node={block} codeBlockCopy={codeBlockCopy} />
+    ))
+  }
+</div>