@astronox/core 0.1.0

package/src/components/actions/CardAction/CardAction.css

@@ -0,0 +1,188 @@
+.card-action {
+  --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-action-size: var(--nox-section-responsive-block-size);
+  --card-action-icon-size: var(--nox-compact-media-responsive-size);
+  --card-action-hover-seed: var(--nox-tone-seed);
+
+  display: grid;
+  min-width: 0;
+  min-height: var(--card-action-size);
+  grid-template-columns: minmax(0, 1fr);
+  padding: 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);
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.card-action[data-has-visual] {
+  grid-template-columns: var(--card-action-size) minmax(0, 1fr);
+}
+
+.card-action[data-has-visual][data-card-action-visual-position='end'] {
+  grid-template-columns: minmax(0, 1fr) var(--card-action-size);
+}
+
+.card-action[data-card-action-hover-tone='info'] {
+  --card-action-hover-seed: var(--nox-source-tone-info);
+}
+
+.card-action[data-card-action-hover-tone='success'] {
+  --card-action-hover-seed: var(--nox-source-tone-success);
+}
+
+.card-action[data-card-action-hover-tone='warning'] {
+  --card-action-hover-seed: var(--nox-source-tone-warning);
+}
+
+.card-action[data-card-action-hover-tone='danger'] {
+  --card-action-hover-seed: var(--nox-source-tone-danger);
+}
+
+.card-action__visual {
+  grid-column: 1;
+  grid-row: 1;
+  display: grid;
+  min-width: 0;
+  min-height: var(--card-action-size);
+  place-items: center;
+  border-inline-end: var(--surface-border-width) solid
+    var(--surface-border-color);
+  background: var(--nox-tone-background-strong);
+  color: var(--nox-tone-color);
+}
+
+.card-action[data-card-action-visual-position='end']
+  .card-action__visual {
+  grid-column: 2;
+  border-inline-start: var(--surface-border-width) solid
+    var(--surface-border-color);
+  border-inline-end: 0;
+}
+
+.card-action__icon {
+  display: block;
+  inline-size: var(--card-action-icon-size);
+  block-size: var(--card-action-icon-size);
+  color: var(--nox-tone-color);
+}
+
+.card-action__media {
+  --media-object-inline-size: 100%;
+  --media-object-block-size: 100%;
+  --media-object-max-inline-size: var(--card-action-icon-size);
+  --media-object-max-block-size: var(--card-action-icon-size);
+
+  inline-size: var(--card-action-size);
+  block-size: var(--card-action-size);
+}
+
+.card-action__label {
+  display: grid;
+  min-width: 0;
+  min-height: var(--card-action-size);
+  place-items: center;
+  padding: var(--nox-space-3) var(--nox-space-5);
+  color: var(--nox-tone-text);
+  font-size: var(--nox-font-size-md);
+  font-weight: var(--nox-font-weight-strong);
+  line-height: var(--nox-line-height-tight);
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+.card-action[data-card-action-label-treatment='heading']
+  .card-action__label {
+  font-size: var(--nox-font-size-lg);
+  letter-spacing: var(--nox-letter-spacing-wide);
+  text-transform: uppercase;
+}
+
+.card-action[data-has-visual] .card-action__label {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.card-action[data-card-action-visual-position='end']
+  .card-action__label {
+  grid-column: 1;
+}
+
+.card-action__label-full,
+.card-action__label-compact {
+  min-width: 0;
+}
+
+.card-action__label-compact {
+  display: none;
+}
+
+.card-action:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-tone-focus-ring);
+  outline-offset: var(--nox-focus-ring-offset);
+  background: color-mix(
+    in srgb,
+    var(--card-action-hover-seed) 12%,
+    var(--nox-mix-light)
+  );
+}
+
+.card-action:disabled,
+.card-action[aria-disabled='true'] {
+  opacity: 0.58;
+  cursor: not-allowed;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .card-action:hover:not(:disabled, [aria-disabled='true']) {
+    background: color-mix(
+      in srgb,
+      var(--card-action-hover-seed) 12%,
+      var(--nox-mix-light)
+    );
+  }
+}
+
+.card-action:active:not(:disabled, [aria-disabled='true']) {
+  background: color-mix(
+    in srgb,
+    var(--card-action-hover-seed) 18%,
+    var(--nox-mix-light)
+  );
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .card-action {
+    transition:
+      background-color var(--nox-motion-duration-sm)
+        var(--nox-motion-easing-standard),
+      transform var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+  }
+
+  .card-action:active:not(:disabled, [aria-disabled='true']) {
+    transform: translateY(1px);
+  }
+}
+
+@media (width < 48rem) {
+  .card-action[data-card-action-compact-label]
+    .card-action__label-full {
+    display: none;
+  }
+
+  .card-action[data-card-action-compact-label]
+    .card-action__label-compact {
+    display: block;
+  }
+
+  .card-action__label {
+    padding-inline: var(--nox-space-3);
+  }
+}

package/src/components/actions/MediaTrigger/MediaTrigger.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+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'> & {
+  accentTone?: Tone;
+  label: string;
+  media: DisplayMedia;
+  tone?: Tone;
+};
+
+const {
+  accentTone,
+  class: className,
+  'data-tone': dataTone,
+  label,
+  media,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<button
+  {...attrs}
+  class:list={['media-trigger', className]}
+  type="button"
+  aria-label={label}
+  data-tone={resolvedTone}
+  data-widget="media-trigger"
+>
+  <Media
+    class="media-trigger__media"
+    media={media}
+    fit="contain"
+    size="fill"
+    data-tone={accentTone}
+  />
+  {
+    accentTone ? (
+      <span
+        class="media-trigger__sparkles"
+        data-tone={accentTone}
+        aria-hidden="true"
+      >
+        <span class="media-trigger__sparkle" />
+        <span class="media-trigger__sparkle" />
+        <span class="media-trigger__sparkle" />
+        <span class="media-trigger__sparkle" />
+      </span>
+    ) : null
+  }
+</button>

package/src/components/actions/MediaTrigger/MediaTrigger.css

@@ -0,0 +1,175 @@
+.media-trigger {
+  position: relative;
+  display: grid;
+  inline-size: 100%;
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+  padding: var(--nox-space-4);
+  place-items: center;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  isolation: isolate;
+}
+
+.media-trigger__media {
+  z-index: 1;
+  inline-size: 100%;
+  block-size: 100%;
+  filter: drop-shadow(
+      0 0 var(--nox-space-1)
+        color-mix(in srgb, var(--nox-tone-color) 42%, transparent)
+    )
+    drop-shadow(
+      0 0 var(--nox-space-2)
+        color-mix(in srgb, var(--nox-tone-color) 16%, transparent)
+    )
+    brightness(1.01);
+  transform: scale(1);
+  transform-origin: center;
+}
+
+.media-trigger__sparkles {
+  position: absolute;
+  z-index: 2;
+  inset: var(--nox-space-3);
+  opacity: 1;
+  pointer-events: none;
+}
+
+.media-trigger__sparkle {
+  position: absolute;
+  display: block;
+  inline-size: var(--nox-space-3);
+  block-size: var(--nox-space-3);
+  background: color-mix(
+    in srgb,
+    var(--nox-tone-color) 62%,
+    var(--nox-mix-light)
+  );
+  clip-path: polygon(
+    50% 0,
+    60% 38%,
+    100% 50%,
+    60% 62%,
+    50% 100%,
+    40% 62%,
+    0 50%,
+    40% 38%
+  );
+  filter: drop-shadow(
+    0 0 var(--nox-space-1)
+      color-mix(in srgb, var(--nox-tone-color) 78%, transparent)
+  );
+  opacity: 0.58;
+}
+
+.media-trigger__sparkle:nth-child(1) {
+  inset-block-start: 12%;
+  inset-inline-start: 26%;
+}
+
+.media-trigger__sparkle:nth-child(2) {
+  inset-block-start: 24%;
+  inset-inline-end: 18%;
+}
+
+.media-trigger__sparkle:nth-child(3) {
+  inset-block-end: 22%;
+  inset-inline-start: 16%;
+}
+
+.media-trigger__sparkle:nth-child(4) {
+  inset-block-end: 12%;
+  inset-inline-end: 28%;
+}
+
+.media-trigger:focus-visible .media-trigger__media {
+  filter: drop-shadow(
+      0 0 var(--nox-focus-ring-width)
+        color-mix(in srgb, var(--nox-tone-focus-ring) 88%, transparent)
+    )
+    drop-shadow(
+      0 0 var(--nox-space-2)
+        color-mix(in srgb, var(--nox-tone-color) 32%, transparent)
+    )
+    brightness(1.04);
+  transform: scale(1.02);
+}
+
+.media-trigger:focus-visible .media-trigger__sparkles {
+  opacity: 0;
+  visibility: hidden;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .media-trigger:hover .media-trigger__media {
+    filter: drop-shadow(
+        0 0 var(--nox-space-1)
+          color-mix(in srgb, var(--nox-tone-color) 58%, transparent)
+      )
+      drop-shadow(
+        0 0 var(--nox-space-3)
+          color-mix(in srgb, var(--nox-tone-color) 24%, transparent)
+      )
+      brightness(1.04);
+    transform: scale(1.035);
+  }
+
+  .media-trigger:hover .media-trigger__sparkles {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .media-trigger__media {
+    transition:
+      filter var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+      transform var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+  }
+
+  .media-trigger__sparkle {
+    animation: media-trigger-sparkle 2.6s ease-in-out infinite;
+  }
+
+  .media-trigger__sparkle:nth-child(2) {
+    animation-delay: -0.65s;
+  }
+
+  .media-trigger__sparkle:nth-child(3) {
+    animation-delay: -1.3s;
+  }
+
+  .media-trigger__sparkle:nth-child(4) {
+    animation-delay: -1.95s;
+  }
+
+  .media-trigger:focus-visible .media-trigger__sparkle,
+  .media-trigger:hover .media-trigger__sparkle {
+    animation: none;
+  }
+}
+
+@keyframes media-trigger-sparkle {
+  0%,
+  28%,
+  100% {
+    opacity: 0.16;
+    transform: scale(0.45) rotate(0deg);
+  }
+
+  12% {
+    opacity: 0.92;
+    transform: scale(1) rotate(45deg);
+  }
+
+  20% {
+    opacity: 0.38;
+    transform: scale(0.68) rotate(72deg);
+  }
+}

package/src/components/actions/ScrollToTop/ScrollToTop.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import Button from '../Button/Button.astro';
+import ArrowUpIcon from '../../icons/ArrowUpIcon.astro';
+
+type Props = Omit<HTMLAttributes<'button'>, 'type'> & {
+  label: string;
+};
+
+const { class: className, label, ...attrs }: Props = Astro.props;
+const resolvedClass = ['scroll-to-top', className].filter(Boolean).join(' ');
+---
+
+<Button
+  {...attrs}
+  class={resolvedClass}
+  type="button"
+  aria-label={label}
+  title={label}
+  hoverTone="info"
+  iconOnly
+  hidden
+  data-scroll-to-top
+>
+  <ArrowUpIcon />
+</Button>
+
+<script>
+  import { initScrollToTop } from './scrollToTopController';
+
+  for (const control of document.querySelectorAll('[data-scroll-to-top]')) {
+    if (control instanceof HTMLButtonElement) {
+      initScrollToTop(control);
+    }
+  }
+</script>

package/src/components/actions/ScrollToTop/ScrollToTop.css

@@ -0,0 +1,19 @@
+.scroll-to-top.nox-button {
+  position: fixed;
+  z-index: 45;
+  inset-inline-end: calc(
+    var(--nox-space-5) + env(safe-area-inset-right)
+  );
+  inset-block-end: calc(
+    var(--nox-space-5) + env(safe-area-inset-bottom)
+  );
+  inline-size: var(--nox-section-compact-block-size);
+  block-size: var(--nox-section-compact-block-size);
+  min-block-size: 0;
+  box-shadow: var(--nox-shadow-surface);
+}
+
+html:has(dialog[open]) .scroll-to-top,
+html:has(:fullscreen) .scroll-to-top {
+  display: none;
+}

package/src/components/actions/ScrollToTop/scrollToTopController.ts

@@ -0,0 +1,32 @@
+const initializedAttribute = 'data-scroll-to-top-initialized';
+const noop = (): void => undefined;
+
+export function initScrollToTop(control: HTMLButtonElement): () => void {
+  if (control.getAttribute(initializedAttribute) === 'true') return noop;
+
+  const viewport = document.querySelector<HTMLElement>('[data-site-viewport]');
+  if (!viewport) return noop;
+
+  control.setAttribute(initializedAttribute, 'true');
+
+  const sync = (): void => {
+    control.hidden =
+      viewport.scrollTop <= 0 || document.fullscreenElement !== null;
+  };
+
+  const scrollToTop = (): void => {
+    viewport.scrollTo({ top: 0, behavior: 'auto' });
+  };
+
+  viewport.addEventListener('scroll', sync, { passive: true });
+  document.addEventListener('fullscreenchange', sync);
+  control.addEventListener('click', scrollToTop);
+  sync();
+
+  return () => {
+    viewport.removeEventListener('scroll', sync);
+    document.removeEventListener('fullscreenchange', sync);
+    control.removeEventListener('click', scrollToTop);
+    control.removeAttribute(initializedAttribute);
+  };
+}

package/src/components/content/CardBody/CardBody.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'div'> & {
+  id?: string;
+  inset?: 'default' | 'none';
+  overlayBoundary?: boolean;
+};
+
+const {
+  class: className,
+  id,
+  inset = 'default',
+  overlayBoundary = false,
+  ...attrs
+}: Props = Astro.props;
+---
+
+<div
+  {...attrs}
+  class:list={['card-body', className]}
+  id={id}
+  data-widget="card-body"
+  data-surface
+  data-inset={inset}
+  data-overlay-boundary={overlayBoundary ? true : undefined}
+>
+  <div class="card-body__content">
+    <slot />
+  </div>
+</div>

package/src/components/content/CardBody/CardBody.css

@@ -0,0 +1,74 @@
+.card-body {
+  --surface-border-width: var(--nox-border-width);
+  --surface-border-color: var(--nox-border);
+  --surface-radius: var(--nox-radius-md);
+  --surface-background: var(--nox-surface);
+  --card-body-border-color: var(--surface-border-color);
+
+  container-type: inline-size;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  border: var(--surface-border-width) solid var(--card-body-border-color);
+  border-radius: var(--surface-radius);
+  background: var(--surface-background);
+  color: var(--nox-text);
+  line-height: 1.7;
+  overflow-wrap: anywhere;
+}
+
+.card-body__content {
+  --nox-content-padding: var(--nox-space-5);
+  --nox-content-inline-inset: var(--nox-content-padding);
+
+  display: grid;
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  gap: var(--nox-space-4);
+  padding: var(--nox-content-padding);
+}
+
+.card-body[data-inset='none'] .card-body__content {
+  --nox-content-padding: 0px;
+  --nox-content-inline-inset: 0px;
+
+  gap: 0;
+  padding: 0;
+}
+
+.card-body[data-inset='none'] {
+  overflow: clip;
+}
+
+.card-body p {
+  margin: 0;
+}
+
+.card-body a {
+  color: var(--nox-link);
+  text-underline-offset: 0.2em;
+}
+
+.card-body strong {
+  color: var(--nox-text);
+  font-weight: var(--nox-font-weight-strong);
+}
+
+@container (width < 32rem) {
+  .card-body__content {
+    --nox-content-padding: var(--nox-space-4);
+    --nox-content-inline-inset: var(--nox-content-padding);
+
+    gap: var(--nox-space-3);
+    padding: var(--nox-content-padding);
+  }
+
+  .card-body[data-inset='none'] .card-body__content {
+    --nox-content-padding: 0px;
+    --nox-content-inline-inset: 0px;
+
+    gap: 0;
+    padding: 0;
+  }
+}

package/src/components/content/CardFooter/CardFooter.astro

@@ -0,0 +1,58 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { DisplayMedia } from '../../../display/contracts';
+import type { Tone } from '../../../theme/contracts';
+import Media from '../../../primitives/media/Media/Media.astro';
+
+type Props = HTMLAttributes<'footer'> & {
+  media?: DisplayMedia;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  media,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+const hasAction = Astro.slots.has('action');
+const hasMedia = Boolean(media);
+---
+
+<footer
+  {...attrs}
+  class:list={['card-footer', className]}
+  data-widget="card-footer"
+  data-surface
+  data-surface-sizing="content"
+  data-has-action={hasAction ? true : undefined}
+  data-has-media={hasMedia ? true : undefined}
+  data-tone={resolvedTone}
+>
+  <div class="card-footer__layout">
+    {
+      media ? (
+        <div class="card-footer__media" aria-hidden="true">
+          <Media
+            class="card-footer__image"
+            media={media}
+            fit="contain"
+            size="intrinsic"
+          />
+        </div>
+      ) : null
+    }
+    <div class="card-footer__content">
+      <slot />
+    </div>
+    {
+      hasAction ? (
+        <div class="card-footer__action">
+          <slot name="action" />
+        </div>
+      ) : null
+    }
+  </div>
+</footer>