@astronox/core 0.2.2 → 0.2.4

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/icons/CircleSymbolIcon.css

@@ -3,17 +3,17 @@
   --circle-symbol-icon-surface: color-mix(
     in srgb,
     var(--circle-symbol-icon-seed) 32%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --circle-symbol-icon-border: color-mix(
     in srgb,
     var(--circle-symbol-icon-seed) 74%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
   --circle-symbol-icon-mark: color-mix(
     in srgb,
     var(--circle-symbol-icon-seed) 82%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
 
   color: var(--circle-symbol-icon-mark);

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export { default as ActionListItem } from './actions/ActionListItem/ActionListItem.astro';
 export { default as Button } from './actions/Button/Button.astro';
+export { default as ThemeToggle } from './actions/ThemeToggle/ThemeToggle.astro';
 export { default as CardAction } from './actions/CardAction/CardAction.astro';
 export { default as IdentityProviderAction } from './actions/IdentityProviderAction/IdentityProviderAction.astro';
 export { default as MediaTrigger } from './actions/MediaTrigger/MediaTrigger.astro';
@@ -23,10 +24,17 @@ 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';
 export { default as PreferenceBootstrap } from './feedback/PreferenceBootstrap/PreferenceBootstrap.astro';
+export { default as ThemeBootstrap } from './feedback/ThemeBootstrap/ThemeBootstrap.astro';
 export { default as Tooltip } from './feedback/Tooltip/Tooltip.astro';
 export { default as CanvasFrame } from './media/CanvasFrame/CanvasFrame.astro';
 export { default as EmbedFrame } from './media/EmbedFrame/EmbedFrame.astro';
@@ -41,6 +49,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 +64,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/DesktopNavigation.css

@@ -81,7 +81,10 @@
 
   .site-nav__action > * {
     min-width: 5.75rem;
-    border-radius: var(--nox-radius-md);
+  }
+
+  .site-nav__action > [data-theme-toggle-appearance='circle'] {
+    min-width: 4.75rem;
   }
 
   .site-nav__action

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>

package/src/components/navigation/Footer/Footer.css

@@ -0,0 +1,155 @@
+.site-footer {
+  color: var(--nox-text-muted);
+}
+
+.site-footer__content {
+  --site-footer-item-gap: var(--nox-space-2);
+  --site-footer-marker-gap: 0.0625rem;
+
+  display: grid;
+  width: var(--nox-page-width);
+  margin-inline: auto;
+  justify-items: center;
+  gap: var(--nox-space-1);
+  padding-block-end: calc(
+    var(--nox-section-compact-block-size) + var(--nox-space-7)
+  );
+  font-size: var(--nox-font-size-sm);
+  line-height: 1.25;
+  text-align: center;
+}
+
+.site-footer__group {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.site-footer__content[data-footer-columns='2'] {
+  grid-template-columns: repeat(2, max-content);
+  justify-content: center;
+  column-gap: var(--nox-space-4);
+}
+
+.site-footer__content[data-footer-columns='2'][
+  data-footer-column-separator='divider'
+] {
+  column-gap: 0;
+}
+
+.site-footer__content[data-footer-columns='2'][
+  data-footer-column-separator='divider'
+]
+  > .site-footer__group:nth-child(even)::before {
+  display: inline-grid;
+  width: calc(
+    var(--site-footer-item-gap) + var(--site-footer-item-gap) + 0.5em
+  );
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--nox-border);
+  content: '|';
+  line-height: 1;
+}
+
+.site-footer__content[data-footer-columns='2']
+  > .site-footer__group:last-child:nth-child(odd) {
+  grid-column: 1 / -1;
+}
+
+.site-footer__item {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0;
+}
+
+.site-footer__separator {
+  display: inline-grid;
+  width: calc(
+    var(--site-footer-item-gap) + var(--site-footer-item-gap) + 0.5em
+  );
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--nox-border);
+  line-height: 1;
+}
+
+.site-footer__spacer {
+  width: var(--site-footer-item-gap);
+  flex: 0 0 auto;
+}
+
+.site-footer__prefix + :is(a, .site-footer__label) {
+  margin-inline-start: var(--nox-space-1);
+}
+
+.site-footer a,
+.site-footer__label {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--site-footer-marker-gap);
+}
+
+.site-footer__marker {
+  display: block;
+  width: 0.625rem;
+  height: 0.625rem;
+  flex: 0 0 auto;
+  color: var(--nox-text-muted);
+}
+
+.site-footer a {
+  color: var(--nox-content-link-color);
+  font-weight: var(--nox-content-link-emphasis-font-weight);
+  text-decoration: none;
+}
+
+.site-footer a[data-tone],
+.site-footer__label[data-tone] {
+  color: var(--nox-tone-color);
+}
+
+.site-footer a:focus-visible {
+  border-radius: var(--nox-radius-sm);
+  outline: var(--nox-focus-ring-width) solid var(--nox-tone-focus-ring);
+  outline-offset: var(--nox-focus-ring-offset);
+  color: var(--nox-content-link-color);
+}
+
+.site-footer a[data-tone]:focus-visible {
+  color: var(--nox-tone-color);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .site-footer a:hover {
+    color: var(--nox-content-link-color);
+    text-decoration-line: underline;
+  }
+
+  .site-footer a[data-tone]:hover {
+    color: var(--nox-tone-color);
+  }
+}
+
+@media (width < 48rem) {
+  .site-footer__content[data-footer-columns='2'] {
+    grid-template-columns: minmax(0, 1fr);
+    column-gap: 0;
+  }
+
+  .site-footer__content[data-footer-columns='2']
+    > .site-footer__group:last-child:nth-child(odd) {
+    grid-column: auto;
+  }
+
+  .site-footer__content[data-footer-columns='2'][
+    data-footer-column-separator='divider'
+  ]
+    > .site-footer__group:nth-child(even)::before {
+    content: none;
+  }
+}