@astronox/core 0.2.1 → 0.2.3

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/TextInput/TextInput.astro

@@ -1,10 +1,11 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
+import type { PreferenceBinding } from '../../../client/preferences';
 import type { Tone } from '../../../theme/contracts';
 import CloseIcon from '../../icons/CloseIcon.astro';
 
 type TextInputFraming = 'embedded' | 'standalone';
-type TextInputType = 'search' | 'text';
+type TextInputType = 'datetime-local' | 'search' | 'text';
 type TextInputAutofocus = boolean | 'desktop';
 
 type Props = Omit<HTMLAttributes<'input'>, 'autofocus' | 'type'> & {
@@ -13,6 +14,7 @@ type Props = Omit<HTMLAttributes<'input'>, 'autofocus' | 'type'> & {
   clearLabel?: string;
   framing?: TextInputFraming;
   invalid?: boolean;
+  preference?: PreferenceBinding;
   tone?: Tone;
   type?: TextInputType;
 };
@@ -26,6 +28,7 @@ const {
   'data-tone': dataTone,
   framing = 'standalone',
   invalid = false,
+  preference,
   tone,
   type = 'text',
   ...attrs
@@ -43,6 +46,9 @@ const resolvedTone = tone ?? dataTone;
   data-tone={resolvedTone}
   data-text-input-autofocus={autofocus === 'desktop' ? 'desktop' : undefined}
   data-text-input-field
+  data-preference-id={preference?.id}
+  data-preference-path={preference?.path}
+  data-preference-control={preference ? 'text' : undefined}
 >
   <input
     {...attrs}

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

@@ -0,0 +1,35 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+type Props = HTMLAttributes<'textarea'> & {
+  invalid?: boolean;
+  size?: 'default' | 'compact';
+  tone?: Tone;
+  value?: string;
+};
+
+const {
+  'aria-invalid': ariaInvalid,
+  class: className,
+  'data-tone': dataTone,
+  invalid = false,
+  size = 'default',
+  tone,
+  value = '',
+  ...attrs
+}: Props = Astro.props;
+const resolvedInvalid =
+  invalid || ariaInvalid === true || ariaInvalid === 'true';
+const resolvedTone = tone ?? dataTone;
+---
+
+<textarea
+  {...attrs}
+  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

@@ -0,0 +1,62 @@
+.textarea {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 28rem;
+  resize: vertical;
+  padding: var(--nox-field-control-padding-inline);
+  border: var(--nox-border-width) solid var(--nox-field-border);
+  border-radius: var(--nox-radius-sm);
+  outline: 0;
+  background: var(--nox-field-background);
+  color: var(--nox-field-color);
+  font-family: inherit;
+  font-size: var(--nox-field-control-font-size);
+  font-weight: var(--nox-font-weight-regular);
+  letter-spacing: 0;
+  line-height: 1.5;
+  transition:
+    border-color var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+    box-shadow var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+}
+
+.textarea::placeholder {
+  color: var(--nox-field-placeholder);
+  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);
+}
+
+.textarea[data-invalid] {
+  border-color: var(--nox-field-border-invalid);
+}
+
+.textarea:disabled {
+  background: var(--nox-field-background-disabled);
+  color: var(--nox-text-disabled);
+  cursor: not-allowed;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .textarea:not(:disabled):not(:focus):not([data-invalid]):hover {
+    border-color: var(--nox-field-border-hover);
+  }
+}
+
+@media (width < 48rem), (hover: none) and (pointer: coarse) {
+  .textarea {
+    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/BackIcon.astro

@@ -0,0 +1,26 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const {
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <path
+    d="M13 8 6 15l7 7M7 15h10c5 0 8 3 8 8"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2.4"></path>
+</svg>

package/src/components/icons/DeleteIcon.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    d="M9 10H23M13 10V7H19V10M11 10L12 25H20L21 10M14.5 14V21M17.5 14V21"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"></path>
+</svg>

package/src/components/icons/StatusIndicatorIcon.astro

@@ -0,0 +1,16 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+const attrs: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <circle cx="16" cy="16" r="8" fill="currentColor"></circle>
+</svg>

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export { default as ActionListItem } from './actions/ActionListItem/ActionListItem.astro';
 export { default as Button } from './actions/Button/Button.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';
 export { default as ScrollToTop } from './actions/ScrollToTop/ScrollToTop.astro';
 export { default as CardBody } from './content/CardBody/CardBody.astro';
@@ -16,11 +17,22 @@ export { default as MetricTile } from './data-display/MetricTile/MetricTile.astr
 export { default as Tag } from './data-display/Tag/Tag.astro';
 export { default as TextPair } from './data-display/TextPair/TextPair.astro';
 export { default as Checkbox } from './forms/Checkbox/Checkbox.astro';
+export { default as ChoiceGroup } from './forms/ChoiceGroup/ChoiceGroup.astro';
+export type { ChoiceOption } from './forms/ChoiceGroup/contracts';
+export { default as DateTimeInput } from './forms/DateTimeInput/DateTimeInput.astro';
 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 Tooltip } from './feedback/Tooltip/Tooltip.astro';
 export { default as CanvasFrame } from './media/CanvasFrame/CanvasFrame.astro';
 export { default as EmbedFrame } from './media/EmbedFrame/EmbedFrame.astro';
@@ -35,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';
@@ -49,18 +62,22 @@ 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';
 export { default as ArrowRightIcon } from './icons/ArrowRightIcon.astro';
 export { default as ArrowUpDownIcon } from './icons/ArrowUpDownIcon.astro';
 export { default as ArrowUpIcon } from './icons/ArrowUpIcon.astro';
+export { default as BackIcon } from './icons/BackIcon.astro';
 export { default as BulletIcon } from './icons/BulletIcon.astro';
 export { default as BurnIcon } from './icons/BurnIcon.astro';
+export { default as CheckIcon } from './icons/CheckIcon.astro';
 export { default as ClearIcon } from './icons/ClearIcon.astro';
 export { default as CloseIcon } from './icons/CloseIcon.astro';
 export { default as CopyIcon } from './icons/CopyIcon.astro';
 export { default as DayIcon } from './icons/DayIcon.astro';
+export { default as DeleteIcon } from './icons/DeleteIcon.astro';
 export { default as DollarIcon } from './icons/DollarIcon.astro';
 export { default as DownloadIcon } from './icons/DownloadIcon.astro';
 export { default as EnterFullscreenIcon } from './icons/EnterFullscreenIcon.astro';
@@ -80,6 +97,7 @@ export { default as RibbonIcon } from './icons/RibbonIcon.astro';
 export { default as SlashIcon } from './icons/SlashIcon.astro';
 export { default as SlowIcon } from './icons/SlowIcon.astro';
 export { default as StarIcon } from './icons/StarIcon.astro';
+export { default as StatusIndicatorIcon } from './icons/StatusIndicatorIcon.astro';
 export { default as StunIcon } from './icons/StunIcon.astro';
 export { default as TableSortIcon } from './icons/TableSortIcon.astro';
 export { default as WaterIcon } from './icons/WaterIcon.astro';

package/src/components/media/CanvasFrame/CanvasFrame.astro

@@ -3,24 +3,18 @@ import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
 import Button from '../../actions/Button/Button.astro';
 import Spinner from '../../feedback/Spinner/Spinner.astro';
-import FullscreenControl from '../../../patterns/Fullscreen/FullscreenControl.astro';
 
 type CanvasAspectRatio = '16/9' | '4/3';
 type CanvasActivation = 'immediate' | 'manual';
 type CanvasWheelInput = 'canvas' | 'page';
 
-type CanvasFullscreen = {
-  enterLabel: string;
-  exitLabel: string;
-};
-
 type Props = HTMLAttributes<'div'> & {
   activation?: CanvasActivation;
   activationLabel?: string;
   aspectRatio?: CanvasAspectRatio;
   canvasId?: string;
   frameId: string;
-  fullscreen?: CanvasFullscreen;
+  fullscreen?: boolean;
   loadingLabel: string;
   title: string;
   tone?: Tone;
@@ -95,16 +89,6 @@ const resolvedCanvasId = canvasId ?? `${frameId}-canvas`;
     role="alert"
     hidden
   ></span>
-  {
-    fullscreen ? (
-      <FullscreenControl
-        targetId={frameId}
-        enterLabel={fullscreen.enterLabel}
-        exitLabel={fullscreen.exitLabel}
-        placement="overlay"
-      />
-    ) : null
-  }
 </nox-canvas-frame>
 
 <script>

package/src/components/media/EmbedFrame/EmbedFrame.astro

@@ -3,19 +3,12 @@ import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
 import Button from '../../actions/Button/Button.astro';
 import Spinner from '../../feedback/Spinner/Spinner.astro';
-import FullscreenControl from '../../../patterns/Fullscreen/FullscreenControl.astro';
 
 type EmbedAspectRatio = '16/9' | '4/3';
 type EmbedActivation = 'immediate' | 'manual';
 type EmbedLoading = 'eager' | 'lazy';
 type EmbedLoadingIndicator = 'none' | 'spinner';
 
-type EmbedFullscreen = {
-  enterLabel: string;
-  exitLabel: string;
-  overlayOffset?: 'default' | 'native-controls';
-};
-
 type Props = Omit<
   HTMLAttributes<'iframe'>,
   'height' | 'loading' | 'src' | 'title' | 'width'
@@ -24,7 +17,7 @@ type Props = Omit<
   activationLabel?: string;
   aspectRatio?: EmbedAspectRatio;
   frameId?: string;
-  fullscreen?: EmbedFullscreen;
+  fullscreen?: boolean;
   loading?: EmbedLoading;
   loadingIndicator?: EmbedLoadingIndicator;
   loadingLabel: string;
@@ -111,17 +104,6 @@ const resolvedTone = tone ?? dataTone;
       </span>
     ) : null
   }
-  {
-    fullscreen ? (
-      <FullscreenControl
-        targetId={frameId ?? ''}
-        enterLabel={fullscreen.enterLabel}
-        exitLabel={fullscreen.exitLabel}
-        placement="overlay"
-        overlayOffset={fullscreen.overlayOffset}
-      />
-    ) : null
-  }
 </nox-embed-frame>
 
 <script>

package/src/components/media/EmbedFrame/EmbedFrame.css

@@ -1,6 +1,4 @@
 .embed-frame {
-  --nox-fullscreen-native-controls-block-size: 2.5rem;
-
   position: relative;
   display: block;
   inline-size: 100%;

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}