@astronox/core 0.2.1 → 0.2.3

package/src/components/actions/IdentityProviderAction/IdentityProviderAction.astro

@@ -0,0 +1,35 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+import Button from '../Button/Button.astro';
+
+type Props = HTMLAttributes<'button'> & {
+  label: string;
+  pendingLabel?: string;
+  tone?: Tone;
+};
+
+const {
+  label,
+  pendingLabel = label,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+---
+
+<Button
+  {...attrs}
+  type="button"
+  prominent
+  tone={tone}
+  data-auth-provider-action
+  data-auth-provider-label={label}
+  data-auth-provider-pending-label={pendingLabel}
+>
+  {
+    Astro.slots.has('leading') ? (
+      <span slot="leading"><slot name="leading" /></span>
+    ) : null
+  }
+  <span data-auth-provider-action-label>{label}</span>
+</Button>

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

@@ -11,9 +11,20 @@
   block-size: var(--nox-section-compact-block-size);
   min-block-size: 0;
   box-shadow: var(--nox-shadow-surface);
+  opacity: 0.8;
+}
+
+.scroll-to-top.nox-button:is(:focus-visible, :active) {
+  opacity: 1;
 }
 
 html:has(dialog[open]) .scroll-to-top,
 html:has(:fullscreen) .scroll-to-top {
   display: none;
 }
+
+@media (hover: hover) and (pointer: fine) {
+  .scroll-to-top.nox-button:hover {
+    opacity: 1;
+  }
+}

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

@@ -5,6 +5,7 @@ type Props = HTMLAttributes<'div'> & {
   id?: string;
   inset?: 'default' | 'none';
   overlayBoundary?: boolean;
+  scrollable?: boolean;
 };
 
 const {
@@ -12,6 +13,7 @@ const {
   id,
   inset = 'default',
   overlayBoundary = false,
+  scrollable = false,
   ...attrs
 }: Props = Astro.props;
 ---
@@ -24,6 +26,7 @@ const {
   data-surface
   data-inset={inset}
   data-overlay-boundary={overlayBoundary ? true : undefined}
+  data-scrollable={scrollable ? true : undefined}
 >
   <div class="card-body__content">
     <slot />

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

@@ -41,13 +41,22 @@
   overflow: clip;
 }
 
+.card-body[data-scrollable] {
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.card-body[data-scrollable] .card-body__content {
+  min-block-size: 100%;
+  align-self: flex-start;
+}
+
 .card-body p {
   margin: 0;
 }
 
 .card-body a {
-  color: var(--nox-link);
-  text-underline-offset: 0.2em;
+  color: var(--nox-content-link-color);
 }
 
 .card-body strong {
@@ -55,6 +64,11 @@
   font-weight: var(--nox-font-weight-strong);
 }
 
+.card-body a strong {
+  color: inherit;
+  font-weight: var(--nox-content-link-emphasis-font-weight);
+}
+
 @container (width < 32rem) {
   .card-body__content {
     --nox-content-padding: var(--nox-space-4);

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

@@ -18,6 +18,7 @@ const {
 }: Props = Astro.props;
 const resolvedTone = tone ?? dataTone;
 const hasAction = Astro.slots.has('action');
+const hasLeadingAction = Astro.slots.has('leading-action');
 const hasMedia = Boolean(media);
 ---
 
@@ -28,10 +29,18 @@ const hasMedia = Boolean(media);
   data-surface
   data-surface-sizing="content"
   data-has-action={hasAction ? true : undefined}
+  data-has-leading-action={hasLeadingAction ? true : undefined}
   data-has-media={hasMedia ? true : undefined}
   data-tone={resolvedTone}
 >
   <div class="card-footer__layout">
+    {
+      hasLeadingAction ? (
+        <div class="card-footer__leading-action">
+          <slot name="leading-action" />
+        </div>
+      ) : null
+    }
     {
       media ? (
         <div class="card-footer__media" aria-hidden="true">

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

@@ -31,6 +31,10 @@
   grid-template-columns: minmax(0, 1fr) var(--card-footer-size);
 }
 
+.card-footer[data-has-leading-action] .card-footer__layout {
+  grid-template-columns: var(--card-footer-size) minmax(0, 1fr);
+}
+
 .card-footer[data-has-media][data-has-action] .card-footer__layout {
   grid-template-columns:
     var(--card-footer-size)
@@ -38,6 +42,31 @@
     var(--card-footer-size);
 }
 
+.card-footer[data-has-leading-action][data-has-action]
+  .card-footer__layout {
+  grid-template-columns:
+    var(--card-footer-size)
+    minmax(0, 1fr)
+    var(--card-footer-size);
+}
+
+.card-footer[data-has-leading-action][data-has-media]
+  .card-footer__layout {
+  grid-template-columns:
+    var(--card-footer-size)
+    var(--card-footer-size)
+    minmax(0, 1fr);
+}
+
+.card-footer[data-has-leading-action][data-has-media][data-has-action]
+  .card-footer__layout {
+  grid-template-columns:
+    var(--card-footer-size)
+    var(--card-footer-size)
+    minmax(0, 1fr)
+    var(--card-footer-size);
+}
+
 .card-footer__media {
   display: grid;
   min-width: 0;
@@ -64,29 +93,42 @@
   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);
+  font-weight: var(--nox-font-weight-regular);
   line-height: var(--nox-line-height-tight);
   overflow-wrap: anywhere;
 }
 
 .card-footer__content a {
-  color: var(--nox-link);
-  text-underline-offset: 0.2em;
+  color: var(--nox-content-link-color);
+  font-weight: var(--nox-content-link-emphasis-font-weight);
 }
 
 .card-footer__content strong {
   font-weight: var(--nox-font-weight-strong);
 }
 
+.card-footer__content a strong {
+  font-weight: var(--nox-content-link-emphasis-font-weight);
+}
+
+.card-footer__leading-action,
 .card-footer__action {
   display: grid;
   min-width: 0;
   min-height: var(--card-footer-size);
   place-items: stretch;
   overflow: hidden;
+}
+
+.card-footer__leading-action {
+  border-inline-end: var(--nox-border-width) solid var(--surface-border-color);
+}
+
+.card-footer__action {
   border-inline-start: var(--nox-border-width) solid var(--surface-border-color);
 }
 
+.card-footer__leading-action > .nox-button[data-button-borderless],
 .card-footer__action > .nox-button[data-button-borderless] {
   --nox-button-background: transparent;
 }

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

@@ -20,6 +20,7 @@ const {
   compactContent,
   compactText,
   compactVisual = 'show',
+  density = 'default',
   disabled = false,
   direction,
   full = false,
@@ -32,11 +33,15 @@ const {
   mediaSize = 'default',
   meta,
   mode = 'link',
+  textLayout = 'inline',
+  textTreatment = 'default',
   tone,
   title,
   ...attrs
 }: Props = Astro.props;
-const accessibleLabel = `${label} : ${title}${meta !== undefined ? ` ${meta}` : ''}`;
+const accessibleLabel = [label, title, meta]
+  .filter((value) => value !== undefined && value !== '')
+  .join(' ');
 const isDisabled = disabled || (mode === 'link' && !href);
 const isInteractive = mode === 'link' && !isDisabled;
 const Root = isInteractive ? 'a' : 'span';
@@ -65,6 +70,7 @@ const resolvedTone = tone ?? dataTone;
   data-collapse={collapse}
   data-compact-content={resolvedCompactContent}
   data-compact-visual={compactVisual}
+  data-density={density}
   data-disabled={isDisabled ? 'true' : 'false'}
   data-direction={direction}
   data-full={full ? 'true' : 'false'}
@@ -74,6 +80,7 @@ const resolvedTone = tone ?? dataTone;
   data-media-position={hasVisual ? mediaPosition : undefined}
   data-media-size={hasVisual ? mediaSize : undefined}
   data-mode={mode}
+  data-text-treatment={textTreatment}
   data-tone={resolvedTone}
 >
   <span class="card-link__layout">
@@ -109,12 +116,14 @@ const resolvedTone = tone ?? dataTone;
         <span class="card-link__compact-text" aria-hidden="true">
           {compactText}
         </span>
-        <span class="card-link__label">{label}</span>
+        {label ? <span class="card-link__label">{label}</span> : null}
         <TextPair
           class="card-link__text"
-          layout="inline"
+          layout={textLayout}
           primary={title}
+          primaryWeight={isInteractive ? 'medium' : 'strong'}
           secondary={meta}
+          secondaryWeight={textTreatment === 'heading' ? 'regular' : 'medium'}
         />
       </span>
     </span>

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

@@ -202,6 +202,20 @@
   gap: var(--nox-space-1);
 }
 
+.card-link[data-density='relaxed'] .card-link__layout {
+  --card-link-size: calc(
+    var(--nox-navigation-block-size) + var(--nox-space-5)
+  );
+}
+
+.card-link[data-density='relaxed'] .card-link__content {
+  padding: var(--nox-space-5) var(--nox-space-6);
+}
+
+.card-link[data-density='relaxed'] .card-link__text {
+  gap: var(--nox-space-3);
+}
+
 .card-link__compact-text {
   display: none;
   min-width: 0;
@@ -233,6 +247,14 @@
   align-items: center;
 }
 
+.card-link[data-text-treatment='heading'] .card-link__text {
+  --text-pair-primary-font-size: var(--nox-font-size-lg);
+  --text-pair-primary-letter-spacing: var(--nox-letter-spacing-wide);
+  --text-pair-primary-text-transform: uppercase;
+  --text-pair-secondary-font-size: var(--nox-font-size-md);
+  line-height: var(--nox-line-height-tight);
+}
+
 .card-link[data-interactive='true']:active {
   background: var(--card-link-active-background);
 }
@@ -287,6 +309,16 @@
 }
 
 @media (width < 48rem) {
+  .card-link[data-density='relaxed'] .card-link__layout {
+    --card-link-size: calc(
+      var(--nox-navigation-block-size) + var(--nox-space-4)
+    );
+  }
+
+  .card-link[data-density='relaxed'] .card-link__content {
+    padding: var(--nox-space-4) var(--nox-space-5);
+  }
+
   .card-link[data-compact-content] .card-link__layout {
     --card-link-size: var(--nox-navigation-compact-block-size);
     --card-link-media-size: 2.125rem;

package/src/components/content/MarkdownContent/MarkdownContent.css

@@ -171,7 +171,7 @@
 
 .markdown-content__resource-title {
   font-size: var(--nox-font-size-md);
-  font-weight: var(--nox-font-weight-strong);
+  font-weight: var(--nox-font-weight-regular);
   line-height: var(--nox-line-height-tight);
 }
 
@@ -298,13 +298,23 @@
 }
 
 .markdown-content__link {
-  color: var(--nox-tone-color);
+  color: var(--nox-content-link-color);
   overflow-wrap: anywhere;
   text-decoration: none;
 }
 
-.markdown-content__link[data-markdown-link-treatment='reference'] {
-  font-weight: var(--nox-font-weight-strong);
+.markdown-content__link[data-markdown-link-treatment='primary'] {
+  font-weight: var(--nox-content-link-emphasis-font-weight);
+}
+
+.markdown-content .markdown-content__strong {
+  font-weight: var(--nox-font-weight-medium);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .markdown-content__link:hover {
+    text-decoration-line: underline;
+  }
 }
 
 .markdown-content [data-tone] {

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

@@ -19,7 +19,7 @@ const { node }: Props = Astro.props;
   ) : node.type === 'symbol' ? (
     <MarkdownSymbol node={node} />
   ) : node.type === 'strong' ? (
-    <strong>
+    <strong class="markdown-content__strong">
       {node.children.map((child) => <Astro.self node={child} />)}
     </strong>
   ) : node.type === 'emphasis' ? (

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

@@ -49,7 +49,7 @@ export type MarkdownLink = {
   external: boolean;
   href: string;
   lang?: string;
-  treatment?: 'reference';
+  treatment?: 'primary';
 };
 
 export type MarkdownBreak = {