@astronox/core 0.1.0

package/src/components/content/CardFooter/CardFooter.css

@@ -0,0 +1,102 @@
+.card-footer {
+  --surface-border-width: var(--nox-border-width);
+  --surface-border-color: var(--nox-border);
+  --surface-radius: var(--nox-radius-md);
+  --surface-background: var(--nox-surface-muted);
+
+  container-type: inline-size;
+  min-width: 0;
+  overflow: clip;
+  border: var(--surface-border-width) solid var(--surface-border-color);
+  border-radius: var(--surface-radius);
+  background: var(--surface-background);
+  color: var(--nox-text-muted);
+}
+
+.card-footer__layout {
+  --card-footer-size: var(--nox-section-block-size);
+  --card-footer-media-size: var(--nox-compact-media-responsive-size);
+
+  display: grid;
+  min-width: 0;
+  min-height: var(--card-footer-size);
+  align-items: center;
+}
+
+.card-footer[data-has-media] .card-footer__layout {
+  grid-template-columns: var(--card-footer-size) minmax(0, 1fr);
+}
+
+.card-footer[data-has-action] .card-footer__layout {
+  grid-template-columns: minmax(0, 1fr) var(--card-footer-size);
+}
+
+.card-footer[data-has-media][data-has-action] .card-footer__layout {
+  grid-template-columns:
+    var(--card-footer-size)
+    minmax(0, 1fr)
+    var(--card-footer-size);
+}
+
+.card-footer__media {
+  display: grid;
+  min-width: 0;
+  min-height: var(--card-footer-size);
+  place-items: center;
+  border-inline-end: var(--nox-border-width) solid var(--surface-border-color);
+  background: var(--nox-surface-strong);
+}
+
+.card-footer__image {
+  --media-object-inline-size: 100%;
+  --media-object-block-size: 100%;
+  --media-object-max-inline-size: var(--card-footer-media-size);
+  --media-object-max-block-size: var(--card-footer-media-size);
+
+  inline-size: var(--card-footer-size);
+  block-size: var(--card-footer-size);
+}
+
+.card-footer__content {
+  display: grid;
+  min-width: 0;
+  min-height: var(--card-footer-size);
+  align-items: center;
+  padding: var(--nox-space-3) var(--nox-space-5);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-medium);
+  line-height: var(--nox-line-height-tight);
+  overflow-wrap: anywhere;
+}
+
+.card-footer__content a {
+  color: var(--nox-link);
+  text-underline-offset: 0.2em;
+}
+
+.card-footer__content strong {
+  font-weight: var(--nox-font-weight-strong);
+}
+
+.card-footer__action {
+  display: grid;
+  min-width: 0;
+  min-height: var(--card-footer-size);
+  place-items: stretch;
+  overflow: hidden;
+  border-inline-start: var(--nox-border-width) solid var(--surface-border-color);
+}
+
+.card-footer__action > .nox-button[data-button-borderless] {
+  --nox-button-background: transparent;
+}
+
+@container (width < 32rem) {
+  .card-footer__layout {
+    --card-footer-size: var(--nox-section-compact-block-size);
+  }
+
+  .card-footer__content {
+    padding-inline: var(--nox-space-4);
+  }
+}

package/src/components/content/CardHeader/CardHeader.astro

@@ -0,0 +1,96 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+import type { DisplayMedia, TextWeight } from '../../../display/contracts';
+import type {
+  AstroComponent,
+  HeadingLevel,
+} from '../../widgetTypes';
+import Inline from '../../../composition/Inline/Inline.astro';
+import Media from '../../../primitives/media/Media/Media.astro';
+
+type HeaderVisual =
+  | { icon?: AstroComponent; media?: never }
+  | { icon?: never; media: DisplayMedia };
+
+type Props = HTMLAttributes<'header'> &
+  HeaderVisual & {
+    title: string;
+    endWeight?: TextWeight;
+    headingLevel?: HeadingLevel;
+    sticky?: boolean;
+    tone?: Tone;
+  };
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  title,
+  endWeight = 'strong',
+  icon: Icon,
+  media,
+  headingLevel = 2,
+  sticky = false,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const HeadingTag = `h${headingLevel}` as const;
+const hasVisual = Boolean(Icon || media);
+const hasEnd = Astro.slots.has('end');
+const hasAction = Astro.slots.has('action');
+const resolvedTone = tone ?? dataTone;
+---
+
+<header
+  {...attrs}
+  class:list={['card-header', className]}
+  data-widget="card-header"
+  data-surface
+  data-has-action={hasAction ? 'true' : undefined}
+  data-has-end={hasEnd ? 'true' : undefined}
+  data-has-visual={hasVisual ? 'true' : 'false'}
+  data-sticky-surface={sticky ? true : undefined}
+  data-tone={resolvedTone}
+>
+  <div class="card-header__layout">
+    {
+      hasVisual ? (
+        <div class="card-header__media" aria-hidden="true">
+          {Icon ? (
+            <Icon />
+          ) : media ? (
+            <Media
+              class="card-header__image"
+              media={media}
+              fit="contain"
+              size="intrinsic"
+            />
+          ) : null}
+        </div>
+      ) : null
+    }
+
+    <div class="card-header__main">
+      <Inline align="center" gap="md" justify="between">
+        <HeadingTag class="card-header__title" data-card-header-title>
+          {title}
+        </HeadingTag>
+        {
+          hasEnd ? (
+            <span class="card-header__end" data-text-weight={endWeight}>
+              <slot name="end" />
+            </span>
+          ) : null
+        }
+      </Inline>
+    </div>
+
+    {
+      hasAction ? (
+        <div class="card-header__action">
+          <slot name="action" />
+        </div>
+      ) : null
+    }
+  </div>
+</header>

package/src/components/content/CardHeader/CardHeader.css

@@ -0,0 +1,164 @@
+.card-header {
+  --surface-border-width: var(--nox-border-width);
+  --surface-border-color: var(--nox-border);
+  --surface-radius: var(--nox-radius-md);
+  --surface-background: var(--nox-tone-background);
+  --card-header-border-color: var(--surface-border-color);
+
+  container-type: inline-size;
+  min-width: 0;
+  overflow: clip;
+  border: var(--surface-border-width) solid var(--card-header-border-color);
+  border-radius: var(--surface-radius);
+  background: var(--surface-background);
+}
+
+.card-header[data-sticky-surface] {
+  position: sticky;
+  z-index: 41;
+  top: var(--nox-layout-gap);
+}
+
+.card-header__layout {
+  --card-header-size: var(--nox-section-responsive-block-size);
+  --card-header-icon-size: var(--nox-compact-media-responsive-size);
+  --card-header-media-size: var(--nox-compact-media-responsive-size);
+  --card-header-title-size: 1.55rem;
+
+  display: grid;
+  min-width: 0;
+  block-size: var(--card-header-size);
+}
+
+.card-header[data-has-visual='true'] .card-header__layout {
+  grid-template-columns: var(--card-header-size) minmax(0, 1fr);
+}
+
+.card-header[data-has-action='true'] .card-header__layout {
+  grid-template-columns: minmax(0, 1fr) var(--card-header-size);
+}
+
+.card-header[data-has-visual='true'][data-has-action='true']
+  .card-header__layout {
+  grid-template-columns:
+    var(--card-header-size)
+    minmax(0, 1fr)
+    var(--card-header-size);
+}
+
+.card-header__media {
+  display: grid;
+  min-width: 0;
+  min-height: var(--card-header-size);
+  place-items: center;
+  border-inline-end: var(--nox-border-width) solid
+    var(--card-header-border-color);
+  background: var(--nox-tone-background-strong);
+  color: var(--nox-tone-color);
+}
+
+.card-header__media svg {
+  display: block;
+  width: var(--card-header-icon-size);
+  height: var(--card-header-icon-size);
+}
+
+.card-header__image {
+  --media-object-inline-size: 100%;
+  --media-object-block-size: 100%;
+  --media-object-max-inline-size: var(--card-header-media-size);
+  --media-object-max-block-size: var(--card-header-media-size);
+
+  inline-size: var(--card-header-size);
+  block-size: var(--card-header-size);
+}
+
+.card-header__action {
+  display: grid;
+  min-width: 0;
+  min-height: var(--card-header-size);
+  place-items: stretch;
+  overflow: hidden;
+  border-inline-start: var(--nox-border-width) solid
+    var(--card-header-border-color);
+  background: var(--nox-tone-background-strong);
+  color: var(--nox-tone-color);
+}
+
+.card-header__action > .nox-button[data-button-borderless] {
+  --nox-button-background: transparent;
+}
+
+.card-header__main {
+  display: grid;
+  min-width: 0;
+  align-content: center;
+  padding: var(--nox-space-3) var(--nox-space-5);
+}
+
+.card-header[data-has-end='true'] .card-header__main {
+  padding-block: var(--nox-space-1);
+}
+
+.card-header__title {
+  min-width: 0;
+  flex: 1 1 auto;
+  margin: 0;
+  color: var(--nox-tone-text);
+  font-size: var(--card-header-title-size);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wide);
+  line-height: 1.05;
+  overflow-wrap: anywhere;
+  text-transform: uppercase;
+}
+
+.card-header[data-has-end='true'] .card-header__title {
+  flex: 0 0 auto;
+  overflow-wrap: normal;
+  white-space: nowrap;
+}
+
+.card-header__end {
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+  flex: 1 1 0;
+  align-items: center;
+  justify-content: flex-end;
+  color: var(--nox-text-muted);
+  font-size: var(--card-header-title-size);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wide);
+  line-height: 1.05;
+  overflow-wrap: anywhere;
+  text-align: end;
+}
+
+.card-header__end[data-text-weight='regular'] {
+  font-weight: var(--nox-font-weight-regular);
+}
+
+.card-header__end[data-text-weight='medium'] {
+  font-weight: var(--nox-font-weight-medium);
+}
+
+.card-header__end[data-text-weight='strong'] {
+  font-weight: var(--nox-font-weight-strong);
+}
+
+@container (width < 32rem) {
+  .card-header__main {
+    padding-inline: var(--nox-space-4);
+  }
+}
+
+@media (width < 48rem) {
+  .card-header__layout {
+    --card-header-title-size: var(--nox-font-size-md);
+  }
+
+  .card-header__main {
+    padding-inline: var(--nox-space-4);
+  }
+}

package/src/components/content/CardLink/CardLink.astro

@@ -0,0 +1,138 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { AstroComponent } from '../../widgetTypes';
+import type { DisplayCardLink } from '../../../display/contracts';
+import type { Tone } from '../../../theme/contracts';
+import TextPair from '../../data-display/TextPair/TextPair.astro';
+import Media from '../../../primitives/media/Media/Media.astro';
+
+type Props = Omit<HTMLAttributes<'a'>, 'href' | 'media'> &
+  DisplayCardLink & {
+    class?: string;
+    'data-tone'?: Tone;
+    icon?: AstroComponent;
+  };
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  collapse = 'none',
+  compactContent,
+  compactText,
+  compactVisual = 'show',
+  disabled = false,
+  direction,
+  full = false,
+  href,
+  icon: Icon,
+  iconTone,
+  label,
+  media,
+  mediaPosition = 'start',
+  mediaSize = 'default',
+  meta,
+  mode = 'link',
+  tone,
+  title,
+  ...attrs
+}: Props = Astro.props;
+const accessibleLabel = `${label} : ${title}${meta !== undefined ? ` ${meta}` : ''}`;
+const isDisabled = disabled || (mode === 'link' && !href);
+const isInteractive = mode === 'link' && !isDisabled;
+const Root = isInteractive ? 'a' : 'span';
+const hasVisual = Boolean(Icon || media);
+const hasContentMedia = Boolean(Icon && media);
+const resolvedCompactContent =
+  compactContent === 'media' && hasContentMedia
+    ? 'media'
+    : compactContent === 'text' && compactText !== undefined
+      ? 'text'
+      : !compactContent && compactText !== undefined
+        ? 'text'
+        : undefined;
+const resolvedTone = tone ?? dataTone;
+---
+
+<Root
+  {...attrs}
+  aria-disabled={mode === 'link' && isDisabled ? 'true' : undefined}
+  role={mode === 'link' && isDisabled ? 'link' : undefined}
+  class:list={['card-link', className]}
+  href={isInteractive ? href : undefined}
+  aria-label={accessibleLabel}
+  data-widget="card-link"
+  data-surface
+  data-collapse={collapse}
+  data-compact-content={resolvedCompactContent}
+  data-compact-visual={compactVisual}
+  data-disabled={isDisabled ? 'true' : 'false'}
+  data-direction={direction}
+  data-full={full ? 'true' : 'false'}
+  data-interactive={isInteractive ? 'true' : 'false'}
+  data-has-content-media={hasContentMedia ? 'true' : 'false'}
+  data-has-visual={hasVisual ? 'true' : 'false'}
+  data-media-position={hasVisual ? mediaPosition : undefined}
+  data-media-size={hasVisual ? mediaSize : undefined}
+  data-mode={mode}
+  data-tone={resolvedTone}
+>
+  <span class="card-link__layout">
+    {
+      hasVisual && mediaPosition === 'start' ? (
+        <span class="card-link__media" aria-hidden="true">
+          {Icon ? (
+            <Icon class="card-link__icon" data-tone={iconTone} />
+          ) : media ? (
+            <Media
+              media={media}
+              fit="contain"
+              size="intrinsic"
+            />
+          ) : null}
+        </span>
+      ) : null
+    }
+
+    <span class="card-link__content">
+      {
+        hasContentMedia && media ? (
+          <span class="card-link__content-media" aria-hidden="true">
+            <Media
+              media={media}
+              fit="contain"
+              size="intrinsic"
+            />
+          </span>
+        ) : null
+      }
+      <span class="card-link__content-copy">
+        <span class="card-link__compact-text" aria-hidden="true">
+          {compactText}
+        </span>
+        <span class="card-link__label">{label}</span>
+        <TextPair
+          class="card-link__text"
+          layout="inline"
+          primary={title}
+          secondary={meta}
+        />
+      </span>
+    </span>
+
+    {
+      hasVisual && mediaPosition === 'end' ? (
+        <span class="card-link__media" aria-hidden="true">
+          {Icon ? (
+            <Icon class="card-link__icon" data-tone={iconTone} />
+          ) : media ? (
+            <Media
+              media={media}
+              fit="contain"
+              size="intrinsic"
+            />
+          ) : null}
+        </span>
+      ) : null
+    }
+  </span>
+</Root>