@astronox/core 0.2.2 → 0.2.3

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 = {

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

@@ -259,10 +259,13 @@ function renderInline(node: MarkdownInline): Node {
     return text;
   }
   if (node.type === 'symbol') return renderSymbol(node);
-  if (node.type === 'strong' || node.type === 'emphasis') {
-    const element = document.createElement(
-      node.type === 'strong' ? 'strong' : 'em',
-    );
+  if (node.type === 'strong') {
+    const element = createElement('strong', 'markdown-content__strong');
+    appendInline(element, node.children);
+    return element;
+  }
+  if (node.type === 'emphasis') {
+    const element = document.createElement('em');
     appendInline(element, node.children);
     return element;
   }

package/src/components/data-display/TextPair/TextPair.css

@@ -1,6 +1,10 @@
 .text-pair {
   --text-pair-primary-color: var(--nox-text);
+  --text-pair-primary-font-size: inherit;
+  --text-pair-primary-letter-spacing: inherit;
+  --text-pair-primary-text-transform: none;
   --text-pair-secondary-color: var(--nox-text-muted);
+  --text-pair-secondary-font-size: var(--nox-font-size-sm);
 
   display: grid;
   min-width: 0;
@@ -27,9 +31,11 @@
 .text-pair__primary {
   min-width: 0;
   color: var(--text-pair-primary-color);
-  font-size: inherit;
+  font-size: var(--text-pair-primary-font-size);
+  letter-spacing: var(--text-pair-primary-letter-spacing);
   line-height: inherit;
   overflow-wrap: anywhere;
+  text-transform: var(--text-pair-primary-text-transform);
 }
 
 .text-pair__primary[data-text-color='muted'] {
@@ -58,7 +64,7 @@
 .text-pair__secondary {
   min-width: 0;
   color: var(--text-pair-secondary-color);
-  font-size: var(--nox-font-size-sm);
+  font-size: var(--text-pair-secondary-font-size);
   line-height: 1.35;
   overflow-wrap: anywhere;
 }

package/src/components/forms/PreparedFormBootstrap/PreparedFormBootstrap.astro

@@ -0,0 +1,203 @@
+---
+type Props = {
+  formId: string;
+  stateKey: string;
+};
+
+const { formId, stateKey }: Props = Astro.props;
+---
+
+<script is:inline define:vars={{ formId, stateKey }}>
+  (() => {
+    const isRecord = (value) =>
+      typeof value === 'object' && value !== null && !Array.isArray(value);
+    const readState = () => {
+      const state = window[stateKey];
+      return isRecord(state) ? state : null;
+    };
+    const createTag = (value, label) => {
+      const tag = document.createElement('span');
+      tag.className = 'tag';
+      tag.dataset.widget = 'tag';
+      tag.dataset.size = 'sm';
+      tag.dataset.comboboxTag = value;
+      const tagLabel = document.createElement('span');
+      tagLabel.className = 'tag__label';
+      tagLabel.dataset.tagLabel = '';
+      tagLabel.textContent = label;
+      tag.append(tagLabel);
+      return tag;
+    };
+    const getNamedFields = (form, name) => {
+      const item = form.elements.namedItem(name);
+      if (item instanceof RadioNodeList) return [...item];
+      return item ? [item] : [];
+    };
+    const getComboboxRoot = (form, key) =>
+      [...form.querySelectorAll('[data-prepared-form-combobox]')]
+        .find((candidate) => candidate.dataset.preparedFormCombobox === key);
+    const isComboboxReady = (root) =>
+      root instanceof HTMLElement &&
+      root.querySelector('[data-combobox-options]') instanceof HTMLElement &&
+      root.querySelector('[data-combobox-empty]') instanceof HTMLElement &&
+      root.querySelector('[data-combobox-values]') instanceof HTMLElement &&
+      root.querySelector('[data-combobox-placeholder]') instanceof HTMLElement;
+    const isFormReady = (form, state) => {
+      if (isRecord(state.values)) {
+        for (const name of Object.keys(state.values)) {
+          if (getNamedFields(form, name).length === 0) return false;
+        }
+      }
+      if (isRecord(state.choices)) {
+        for (const [name, value] of Object.entries(state.choices)) {
+          if (
+            typeof value !== 'string' ||
+            !getNamedFields(form, name).some(
+              (field) =>
+                field instanceof HTMLInputElement && field.value === value,
+            )
+          ) {
+            return false;
+          }
+        }
+      }
+      if (isRecord(state.comboboxes)) {
+        for (const key of Object.keys(state.comboboxes)) {
+          if (!isComboboxReady(getComboboxRoot(form, key))) return false;
+        }
+      }
+      return true;
+    };
+    const applyCombobox = (form, key, state) => {
+      if (!isRecord(state) || !Array.isArray(state.options)) return;
+      const root = getComboboxRoot(form, key);
+      if (!(root instanceof HTMLElement)) return;
+      const optionsRoot = root.querySelector('[data-combobox-options]');
+      const empty = root.querySelector('[data-combobox-empty]');
+      const valuesRoot = root.querySelector('[data-combobox-values]');
+      const placeholder = root.querySelector('[data-combobox-placeholder]');
+      if (
+        !(optionsRoot instanceof HTMLElement) ||
+        !(empty instanceof HTMLElement) ||
+        !(valuesRoot instanceof HTMLElement) ||
+        !(placeholder instanceof HTMLElement)
+      ) {
+        return;
+      }
+
+      optionsRoot
+        .querySelectorAll('[data-combobox-option]')
+        .forEach((node) => node.remove());
+      root
+        .querySelectorAll('template[data-combobox-tag-template]')
+        .forEach((node) => node.remove());
+      const options = state.options.filter(
+        (option) =>
+          isRecord(option) &&
+          typeof option.label === 'string' &&
+          typeof option.value === 'string',
+      );
+      const selected = new Set(
+        Array.isArray(state.values)
+          ? state.values.filter((value) => typeof value === 'string')
+          : [],
+      );
+
+      options.forEach((option, index) => {
+        const button = document.createElement('button');
+        button.className = 'combobox__option';
+        button.id = `${root.id || key}-option-${index}`;
+        button.type = 'button';
+        button.role = 'option';
+        button.tabIndex = -1;
+        button.setAttribute('aria-selected', String(selected.has(option.value)));
+        button.dataset.comboboxOption = option.value;
+        button.dataset.comboboxSearchText = option.label;
+        button.dataset.interactionAccent = 'start';
+        const content = document.createElement('span');
+        content.className = 'combobox__option-content';
+        const label = document.createElement('span');
+        label.className = 'combobox__option-label';
+        label.textContent = option.label;
+        content.append(label);
+        button.append(content);
+        optionsRoot.insertBefore(button, empty);
+
+        const template = document.createElement('template');
+        template.dataset.comboboxTagTemplate = option.value;
+        template.content.append(createTag(option.value, option.label));
+        root.append(template);
+      });
+
+      valuesRoot
+        .querySelectorAll('[data-combobox-tag]')
+        .forEach((node) => node.remove());
+      for (const value of selected) {
+        const option = options.find((candidate) => candidate.value === value);
+        if (option) {
+          valuesRoot.insertBefore(createTag(value, option.label), placeholder);
+        }
+      }
+      placeholder.hidden = selected.size > 0;
+      empty.hidden = options.length > 0;
+    };
+    const apply = () => {
+      const form = document.getElementById(formId);
+      const state = readState();
+      if (
+        !(form instanceof HTMLFormElement) ||
+        !state ||
+        !isFormReady(form, state)
+      ) {
+        return false;
+      }
+
+      if (isRecord(state.values)) {
+        for (const [name, value] of Object.entries(state.values)) {
+          if (typeof value !== 'string') continue;
+          for (const field of getNamedFields(form, name)) {
+            if (
+              field instanceof HTMLInputElement ||
+              field instanceof HTMLTextAreaElement ||
+              field instanceof HTMLSelectElement
+            ) {
+              field.value = value;
+            }
+          }
+        }
+      }
+      if (isRecord(state.choices)) {
+        for (const [name, value] of Object.entries(state.choices)) {
+          if (typeof value !== 'string') continue;
+          for (const field of getNamedFields(form, name)) {
+            if (field instanceof HTMLInputElement) {
+              field.checked = field.value === value;
+            }
+          }
+        }
+      }
+      if (isRecord(state.comboboxes)) {
+        for (const [key, combobox] of Object.entries(state.comboboxes)) {
+          applyCombobox(form, key, combobox);
+        }
+      }
+      form.dataset.preparedFormBootstrap = 'true';
+      return true;
+    };
+
+    if (apply()) return;
+    const observer = new MutationObserver(() => {
+      if (!apply()) return;
+      observer.disconnect();
+    });
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+    });
+    document.addEventListener(
+      'DOMContentLoaded',
+      () => observer.disconnect(),
+      { once: true },
+    );
+  })();
+</script>

package/src/components/forms/PreparedFormBootstrap/contracts.ts

@@ -0,0 +1,15 @@
+export type PreparedFormOption = {
+  label: string;
+  value: string;
+};
+
+export type PreparedFormCombobox = {
+  options: readonly PreparedFormOption[];
+  values: readonly string[];
+};
+
+export type PreparedFormState = {
+  choices?: Readonly<Record<string, string>>;
+  comboboxes?: Readonly<Record<string, PreparedFormCombobox>>;
+  values?: Readonly<Record<string, string>>;
+};

package/src/components/forms/Textarea/Textarea.astro

@@ -4,6 +4,7 @@ import type { Tone } from '../../../theme/contracts';
 
 type Props = HTMLAttributes<'textarea'> & {
   invalid?: boolean;
+  size?: 'default' | 'compact';
   tone?: Tone;
   value?: string;
 };
@@ -13,6 +14,7 @@ const {
   class: className,
   'data-tone': dataTone,
   invalid = false,
+  size = 'default',
   tone,
   value = '',
   ...attrs
@@ -27,6 +29,7 @@ const resolvedTone = tone ?? dataTone;
   class:list={['textarea', className]}
   data-widget="textarea"
   data-invalid={resolvedInvalid ? true : undefined}
+  data-size={size}
   data-tone={resolvedTone}
   aria-invalid={resolvedInvalid ? 'true' : ariaInvalid}
 >{value}</textarea>

package/src/components/forms/Textarea/Textarea.css

@@ -25,6 +25,10 @@
   opacity: 1;
 }
 
+.textarea[data-size='compact'] {
+  min-height: calc(var(--nox-field-control-block-size) * 2);
+}
+
 .textarea:focus {
   border-color: var(--nox-field-border-active);
   box-shadow: var(--nox-field-focus-shadow);
@@ -51,4 +55,8 @@
     min-height: 20rem;
     font-size: var(--nox-font-size-md);
   }
+
+  .textarea[data-size='compact'] {
+    min-height: calc(var(--nox-field-control-block-size) * 2);
+  }
 }

package/src/components/index.ts

@@ -23,6 +23,12 @@ export { default as DateTimeInput } from './forms/DateTimeInput/DateTimeInput.as
 export { default as FieldError } from './forms/FieldError/FieldError.astro';
 export { default as FieldGroup } from './forms/FieldGroup/FieldGroup.astro';
 export { default as FieldLabel } from './forms/FieldLabel/FieldLabel.astro';
+export { default as PreparedFormBootstrap } from './forms/PreparedFormBootstrap/PreparedFormBootstrap.astro';
+export type {
+  PreparedFormCombobox,
+  PreparedFormOption,
+  PreparedFormState,
+} from './forms/PreparedFormBootstrap/contracts';
 export { default as TextInput } from './forms/TextInput/TextInput.astro';
 export { default as Textarea } from './forms/Textarea/Textarea.astro';
 export { default as Spinner } from './feedback/Spinner/Spinner.astro';
@@ -41,6 +47,7 @@ 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 Footer } from './navigation/Footer/Footer.astro';
 export { default as SubNavigation } from './navigation/SubNavigation/SubNavigation.astro';
 export { default as SeoHead } from './seo/SeoHead.astro';
 export * from './content/CodeBlock/contracts';
@@ -55,6 +62,7 @@ export * from './media/EmbedFrame/embedFrameController';
 export * from './navigation/mobileNavigationController';
 export * from './navigation/navigationState';
 export * from './navigation/navigationTypes';
+export * from './navigation/Footer/contracts';
 export * from './widgetTypes';
 export { default as ArrowDownIcon } from './icons/ArrowDownIcon.astro';
 export { default as ArrowLeftIcon } from './icons/ArrowLeftIcon.astro';

package/src/components/navigation/Breadcrumbs/Breadcrumbs.astro

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'astro/types';
 import type { BreadcrumbItem } from '../../../display/contracts';
 import type { Tone } from '../../../theme/contracts';
 import { defaultCoreMessages } from '../../../i18n/coreMessages';
+import ArrowRightIcon from '../../icons/ArrowRightIcon.astro';
 
 type Props = HTMLAttributes<'nav'> & {
   items: readonly BreadcrumbItem[];
@@ -18,7 +19,7 @@ const {
   tone,
   ...attrs
 } = Astro.props;
-const resolvedTone = tone ?? dataTone;
+const resolvedTone = tone ?? dataTone ?? 'info';
 ---
 
 {
@@ -38,6 +39,9 @@ const resolvedTone = tone ?? dataTone;
 
           return (
             <li class="breadcrumbs__item">
+              {index > 0 ? (
+                <ArrowRightIcon class="breadcrumbs__separator" />
+              ) : null}
               {isNavigable ? (
                 <a href={href} aria-current={isCurrent ? 'page' : undefined}>
                   {item.label}

package/src/components/navigation/Breadcrumbs/Breadcrumbs.css

@@ -1,7 +1,7 @@
 .breadcrumbs {
   min-width: 0;
   overflow: hidden;
-  color: var(--nox-text-muted);
+  color: var(--nox-tone-color);
   font-size: var(--nox-font-size-sm);
   font-weight: var(--nox-font-weight-medium);
   line-height: 1.35;
@@ -25,7 +25,7 @@
 .breadcrumbs__item {
   display: inline-flex;
   flex: 0 0 auto;
-  align-items: stretch;
+  align-items: center;
   min-width: 0;
 }
 
@@ -39,15 +39,13 @@
   align-items: center;
 }
 
-.breadcrumbs__item + .breadcrumbs__item::before {
-  display: inline-flex;
-  align-items: center;
+.breadcrumbs__separator {
+  display: block;
+  width: 0.625rem;
+  height: 0.625rem;
+  flex: 0 0 auto;
   margin-inline: var(--nox-space-2);
-  color: color-mix(in srgb, var(--nox-tone-color) 55%, var(--nox-text-subtle));
-  content: '›';
-  font-size: var(--nox-font-size-md);
-  font-weight: var(--nox-font-weight-strong);
-  line-height: 1;
+  color: var(--nox-tone-color);
 }
 
 .breadcrumbs a {
@@ -56,7 +54,8 @@
   align-items: center;
   align-self: stretch;
   border-radius: var(--nox-radius-sm);
-  color: inherit;
+  color: var(--nox-tone-color);
+  font-weight: var(--nox-content-link-emphasis-font-weight);
   margin-inline: -0.1875rem;
   padding-inline: 0.1875rem;
   text-decoration: none;
@@ -71,19 +70,15 @@
 
 @media (hover: hover) and (pointer: fine) {
   .breadcrumbs a:hover {
-    color: var(--nox-tone-text);
     text-decoration-line: underline;
-    text-decoration-thickness: 0.125rem;
   }
 }
 
 .breadcrumbs a:focus-visible {
-  color: var(--nox-tone-text);
-  text-decoration-line: underline;
-  text-decoration-thickness: 0.125rem;
+  color: var(--nox-tone-color);
 }
 
 .breadcrumbs [aria-current='page'] {
-  color: var(--nox-tone-text);
+  color: var(--nox-tone-color);
   font-weight: var(--nox-font-weight-strong);
 }

package/src/components/navigation/Footer/Footer.astro

@@ -0,0 +1,102 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+import type { FooterGroup, FooterItem } from './contracts';
+import ArrowRightIcon from '../../icons/ArrowRightIcon.astro';
+
+type Props = HTMLAttributes<'footer'> & {
+  columnSeparator?: 'divider' | 'none';
+  columns?: 1 | 2;
+  groups: readonly FooterGroup[];
+  label: string;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  columnSeparator = 'none',
+  columns = 1,
+  'data-tone': dataTone,
+  groups,
+  label,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+const visibleGroups = groups.filter(({ items }) => items.length > 0);
+const resolveRel = (target: FooterItem['target'], rel?: FooterItem['rel']) =>
+  rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined);
+---
+
+<footer
+  {...attrs}
+  class:list={['site-footer', className]}
+  data-tone={resolvedTone}
+  data-widget="site-footer"
+>
+  <nav
+    class="site-footer__content"
+    aria-label={label}
+    data-footer-columns={columns}
+    data-footer-column-separator={columnSeparator}
+  >
+    {
+      visibleGroups.map(({ items }) => (
+        <span class="site-footer__group">
+          {items.map(
+            (
+              {
+                href,
+                label: itemLabel,
+                marker,
+                prefix,
+                rel,
+                separator = 'divider',
+                target,
+                tone: itemTone,
+              },
+              index,
+            ) => (
+              <>
+                {index > 0 ? (
+                  separator === 'divider' ? (
+                    <span class="site-footer__separator" aria-hidden="true">
+                      |
+                    </span>
+                  ) : (
+                    <span class="site-footer__spacer" aria-hidden="true" />
+                  )
+                ) : null}
+                <span class="site-footer__item">
+                  {prefix ? (
+                    <span class="site-footer__prefix">{prefix}</span>
+                  ) : null}
+                  {href ? (
+                    <a
+                      href={href}
+                      rel={resolveRel(target, rel)}
+                      target={target}
+                      data-tone={itemTone}
+                    >
+                      {marker === 'arrow' ? (
+                        <ArrowRightIcon class="site-footer__marker" />
+                      ) : null}
+                      <span>{itemLabel}</span>
+                    </a>
+                  ) : (
+                    <span class="site-footer__label" data-tone={itemTone}>
+                      {marker === 'arrow' ? (
+                        <ArrowRightIcon class="site-footer__marker" />
+                      ) : null}
+                      <span>{itemLabel}</span>
+                    </span>
+                  )}
+                </span>
+              </>
+            ),
+          )}
+        </span>
+      ))
+    }
+  </nav>
+</footer>