@astronox/core 0.2.4 → 0.3.1

package/src/components/feedback/PreferenceBootstrap/PreferenceBootstrap.astro

@@ -100,9 +100,7 @@ const payload = definitions.map((definition) => ({
         if (from in next && !(to in next)) next[to] = next[from];
         delete next[from];
       }
-      for (const [key, fallback] of Object.entries(
-        migration.defaults ?? {},
-      )) {
+      for (const [key, fallback] of Object.entries(migration.defaults ?? {})) {
         if (!(key in next)) next[key] = fallback;
       }
       return next;
@@ -117,11 +115,7 @@ const payload = definitions.map((definition) => ({
       for (const migration of migrations) {
         const previous = parse(
           read(
-            storageKey(
-              definition,
-              migration.fromVersion,
-              migration.fromKey,
-            ),
+            storageKey(definition, migration.fromVersion, migration.fromKey),
           ),
         );
         const migrated = migrate(previous, migration);
@@ -138,9 +132,7 @@ const payload = definitions.map((definition) => ({
 
     const previousSnapshot = window[globalKey];
     const snapshot = {
-      values: isRecord(previousSnapshot?.values)
-        ? previousSnapshot.values
-        : {},
+      values: isRecord(previousSnapshot?.values) ? previousSnapshot.values : {},
       rawValues: isRecord(previousSnapshot?.rawValues)
         ? previousSnapshot.rawValues
         : {},
@@ -190,7 +182,9 @@ const payload = definitions.map((definition) => ({
       const options = [...root.querySelectorAll('[data-combobox-option]')];
       const available = options
         .map((option) => Number(option.dataset.comboboxOption))
-        .filter((value) => Number.isFinite(value) && value >= min && value <= max)
+        .filter(
+          (value) => Number.isFinite(value) && value >= min && value <= max,
+        )
         .sort((left, right) => left - right);
       const bounded = Math.min(max, Math.max(min, Number(requestedValue)));
       const value =
@@ -202,10 +196,7 @@ const payload = definitions.map((definition) => ({
             )
           : Math.min(
               max,
-              Math.max(
-                min,
-                min + Math.round((bounded - min) / step) * step,
-              ),
+              Math.max(min, min + Math.round((bounded - min) / step) * step),
             );
 
       root.dataset.comboboxNumberMin = String(min);
@@ -228,8 +219,10 @@ const payload = definitions.map((definition) => ({
       const increment = root.querySelector(
         '[data-combobox-number-step="increment"]',
       );
-      if (decrement instanceof HTMLButtonElement) decrement.disabled = value <= min;
-      if (increment instanceof HTMLButtonElement) increment.disabled = value >= max;
+      if (decrement instanceof HTMLButtonElement)
+        decrement.disabled = value <= min;
+      if (increment instanceof HTMLButtonElement)
+        increment.disabled = value >= max;
     };
     const applyOptions = (root, requestedValue) => {
       const requested = Array.isArray(requestedValue)
@@ -291,7 +284,8 @@ const payload = definitions.map((definition) => ({
       if (root instanceof HTMLElement && root.matches('[data-preference-id]')) {
         applyBinding(root);
       }
-      for (const element of root.querySelectorAll?.('[data-preference-id]') ?? []) {
+      for (const element of root.querySelectorAll?.('[data-preference-id]') ??
+        []) {
         applyBinding(element);
       }
     };
@@ -350,8 +344,8 @@ const payload = definitions.map((definition) => ({
         detail?.mode === 'number'
           ? detail.value
           : root.dataset.comboboxSelectionMode === 'multiple'
-            ? detail?.values ?? []
-            : detail?.values?.[0] ?? '',
+            ? (detail?.values ?? [])
+            : (detail?.values?.[0] ?? ''),
       );
     };
     const handlePreferenceChange = (event) => {
@@ -385,7 +379,10 @@ const payload = definitions.map((definition) => ({
         for (const node of record.addedNodes) applyBindings(node);
       }
     });
-    observer.observe(document.documentElement, { childList: true, subtree: true });
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+    });
     document.addEventListener('change', handleChange, true);
     document.addEventListener('combobox:change', handleComboboxChange);
     document.addEventListener(changeEvent, handlePreferenceChange);

package/src/components/feedback/Spinner/Spinner.astro

@@ -28,5 +28,4 @@ const resolvedTone = tone ?? dataTone;
   data-tone={resolvedTone}
   data-widget="spinner"
   role="status"
-  aria-label={label}
-></span>
+  aria-label={label}></span>

package/src/components/feedback/Tooltip/tooltipController.ts

@@ -135,10 +135,7 @@ export function initTooltip(root: HTMLElement): () => void {
       viewport.right - viewportGap,
       boundaryRect?.right ?? viewport.right - viewportGap,
     );
-    const maximumInlineSize = Math.max(
-      0,
-      horizontalRight - horizontalLeft,
-    );
+    const maximumInlineSize = Math.max(0, horizontalRight - horizontalLeft);
     const maximumBlockSize = Math.max(
       0,
       viewport.bottom - viewport.top - viewportGap * 2,

package/src/components/forms/ChoiceGroup/ChoiceGroup.css

@@ -19,10 +19,7 @@
 .choice-group__options {
   display: grid;
   min-inline-size: 0;
-  grid-template-columns: repeat(
-    var(--choice-group-columns),
-    minmax(0, 1fr)
-  );
+  grid-template-columns: repeat(var(--choice-group-columns), minmax(0, 1fr));
   gap: var(--nox-space-2);
 }
 

package/src/components/forms/DateTimeInput/DateTimeInput.astro

@@ -3,7 +3,8 @@ import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
 import TextInput from '../TextInput/TextInput.astro';
 
-type Props = Omit<HTMLAttributes<'input'>, 'type'> & {
+type Props = Omit<HTMLAttributes<'input'>, 'autofocus' | 'type'> & {
+  autofocus?: boolean | 'desktop';
   invalid?: boolean;
   tone?: Tone;
 };

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

@@ -34,8 +34,9 @@ const { formId, stateKey }: Props = Astro.props;
       return item ? [item] : [];
     };
     const getComboboxRoot = (form, key) =>
-      [...form.querySelectorAll('[data-prepared-form-combobox]')]
-        .find((candidate) => candidate.dataset.preparedFormCombobox === 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 &&
@@ -110,7 +111,10 @@ const { formId, stateKey }: Props = Astro.props;
         button.type = 'button';
         button.role = 'option';
         button.tabIndex = -1;
-        button.setAttribute('aria-selected', String(selected.has(option.value)));
+        button.setAttribute(
+          'aria-selected',
+          String(selected.has(option.value)),
+        );
         button.dataset.comboboxOption = option.value;
         button.dataset.comboboxSearchText = option.label;
         button.dataset.interactionAccent = 'start';
@@ -194,10 +198,8 @@ const { formId, stateKey }: Props = Astro.props;
       childList: true,
       subtree: true,
     });
-    document.addEventListener(
-      'DOMContentLoaded',
-      () => observer.disconnect(),
-      { once: true },
-    );
+    document.addEventListener('DOMContentLoaded', () => observer.disconnect(), {
+      once: true,
+    });
   })();
 </script>

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

@@ -0,0 +1,48 @@
+import type { PreparedFormState } from './contracts';
+
+export function parsePreparedFormState(
+  value: unknown,
+): PreparedFormState | null {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return null;
+  const state = value as PreparedFormState;
+
+  for (const record of [state.values, state.choices]) {
+    if (
+      record !== undefined &&
+      (!record ||
+        typeof record !== 'object' ||
+        Array.isArray(record) ||
+        Object.values(record).some((item) => typeof item !== 'string'))
+    ) {
+      return null;
+    }
+  }
+
+  if (state.comboboxes === undefined) return state;
+  if (
+    !state.comboboxes ||
+    typeof state.comboboxes !== 'object' ||
+    Array.isArray(state.comboboxes)
+  ) {
+    return null;
+  }
+  for (const combobox of Object.values(state.comboboxes)) {
+    if (
+      !combobox ||
+      typeof combobox !== 'object' ||
+      !Array.isArray(combobox.options) ||
+      !Array.isArray(combobox.values) ||
+      combobox.values.some((item) => typeof item !== 'string') ||
+      combobox.options.some(
+        (option) =>
+          !option ||
+          typeof option !== 'object' ||
+          typeof option.label !== 'string' ||
+          typeof option.value !== 'string',
+      )
+    ) {
+      return null;
+    }
+  }
+  return state;
+}

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

@@ -31,5 +31,5 @@ const resolvedTone = tone ?? dataTone;
   data-invalid={resolvedInvalid ? true : undefined}
   data-size={size}
   data-tone={resolvedTone}
-  aria-invalid={resolvedInvalid ? 'true' : ariaInvalid}
->{value}</textarea>
+  aria-invalid={resolvedInvalid ? 'true' : ariaInvalid}>{value}</textarea
+>

package/src/components/icons/BurnIcon.astro

@@ -20,5 +20,6 @@ const {
   <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
   <path
     class="circle-symbol-icon__fill"
-    d="M17 7c1 5-3 6-3 10 0 1.5.8 2.7 2 3.4-.3-2.4 1.3-3.4 2.2-5.4 2.3 2 3.8 4.1 3.8 6.4 0 3.2-2.7 5.6-6 5.6s-6-2.4-6-5.8C10 15.7 15.7 13 17 7Z"></path>
+    d="M17 7c1 5-3 6-3 10 0 1.5.8 2.7 2 3.4-.3-2.4 1.3-3.4 2.2-5.4 2.3 2 3.8 4.1 3.8 6.4 0 3.2-2.7 5.6-6 5.6s-6-2.4-6-5.8C10 15.7 15.7 13 17 7Z"
+  ></path>
 </svg>

package/src/components/icons/FieldIcon.astro

@@ -21,8 +21,14 @@ const {
   focusable={focusable}
 >
   <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
-  <rect class="circle-symbol-icon__mark" x="9" y="9" width="14" height="14" rx="1"
-  ></rect>
-  <path class="circle-symbol-icon__mark" d="M13.7 9v14m4.6-14v14M9 13.7h14M9 18.3h14"
-  ></path>
+  <rect
+    class="circle-symbol-icon__mark"
+    x="9"
+    y="9"
+    width="14"
+    height="14"
+    rx="1"></rect>
+  <path
+    class="circle-symbol-icon__mark"
+    d="M13.7 9v14m4.6-14v14M9 13.7h14M9 18.3h14"></path>
 </svg>

package/src/components/icons/GrassIcon.astro

@@ -24,6 +24,7 @@ const {
   <path
     class="circle-symbol-icon__fill"
     d="M23.5 8.5c.2 8.4-3.7 14-11.7 15.2-3.1-6.8.2-13.5 11.7-15.2Z"></path>
-  <path class="circle-symbol-icon__highlight" d="M10.4 23.5c2.2-5.3 5.4-8.7 10.2-11.6"
-  ></path>
+  <path
+    class="circle-symbol-icon__highlight"
+    d="M10.4 23.5c2.2-5.3 5.4-8.7 10.2-11.6"></path>
 </svg>

package/src/components/icons/SlowIcon.astro

@@ -20,6 +20,5 @@ const {
   <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
   <path
     class="circle-symbol-icon__mark"
-    d="M16 8v16M9 12l14 8M9 20l14-8M13 10l3 3 3-3M13 22l3-3 3 3"
-  ></path>
+    d="M16 8v16M9 12l14 8M9 20l14-8M13 10l3 3 3-3M13 22l3-3 3 3"></path>
 </svg>

package/src/components/icons/StunIcon.astro

@@ -18,5 +18,6 @@ const {
   focusable={focusable}
 >
   <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
-  <path class="circle-symbol-icon__fill" d="m18 7-8 11h5l-1 7 8-11h-5l1-7Z"></path>
+  <path class="circle-symbol-icon__fill" d="m18 7-8 11h5l-1 7 8-11h-5l1-7Z"
+  ></path>
 </svg>

package/src/components/icons/WaterIcon.astro

@@ -25,6 +25,7 @@ const {
     class="circle-symbol-icon__fill"
     d="M16 5.5c3.1 4.2 7.5 9 7.5 13.3A7.5 7.5 0 1 1 8.5 18.8C8.5 14.5 12.9 9.7 16 5.5Z"
   ></path>
-  <path class="circle-symbol-icon__highlight" d="M12.2 19.2a4.5 4.5 0 0 0 4.5 4.1"
-  ></path>
+  <path
+    class="circle-symbol-icon__highlight"
+    d="M12.2 19.2a4.5 4.5 0 0 0 4.5 4.1"></path>
 </svg>

package/src/components/index.ts

@@ -30,6 +30,7 @@ export type {
   PreparedFormOption,
   PreparedFormState,
 } from './forms/PreparedFormBootstrap/contracts';
+export { parsePreparedFormState } from './forms/PreparedFormBootstrap/parsePreparedFormState';
 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';
@@ -39,6 +40,7 @@ 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';
 export { default as MediaFrame } from './media/MediaFrame/MediaFrame.astro';
+export { default as AdSlot } from './monetization/AdSlot/AdSlot.astro';
 export { default as Breadcrumbs } from './navigation/Breadcrumbs/Breadcrumbs.astro';
 export { default as DesktopNavigation } from './navigation/DesktopNavigation.astro';
 export { default as Header } from './navigation/Header.astro';

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

@@ -87,8 +87,7 @@ const resolvedCanvasId = canvasId ?? `${frameId}-canvas`;
     class="canvas-frame__feedback"
     data-canvas-frame-feedback
     role="alert"
-    hidden
-  ></span>
+    hidden></span>
 </nox-canvas-frame>
 
 <script>

package/src/components/media/CanvasFrame/canvasFrameController.ts

@@ -53,10 +53,7 @@ export function markCanvasFrameReady(root: HTMLElement): void {
   root.dataset.canvasFrameReady = 'true';
 }
 
-export function markCanvasFrameError(
-  root: HTMLElement,
-  message: string,
-): void {
+export function markCanvasFrameError(root: HTMLElement, message: string): void {
   const loading = root.querySelector<HTMLElement>(
     '[data-canvas-frame-loading]',
   );

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

@@ -63,11 +63,9 @@ const resolvedTone = tone ?? dataTone;
   data-fullscreen-region={fullscreen ? true : undefined}
   data-widget="embed-frame"
   data-tone={resolvedTone}
-  aria-busy={
-    activation === 'immediate' && loadingIndicator === 'spinner'
-      ? 'true'
-      : 'false'
-  }
+  aria-busy={activation === 'immediate' && loadingIndicator === 'spinner'
+    ? 'true'
+    : 'false'}
 >
   <iframe
     {...attrs}
@@ -78,16 +76,11 @@ const resolvedTone = tone ?? dataTone;
     width={width}
     height={height}
     loading={loading}
-    allowfullscreen
-  ></iframe>
+    allowfullscreen></iframe>
   {
     activation === 'manual' && activationLabel ? (
       <span class="embed-frame__activation" data-embed-frame-activation-layer>
-        <Button
-          type="button"
-          prominent
-          data-embed-frame-activate
-        >
+        <Button type="button" prominent data-embed-frame-activate>
           {activationLabel}
         </Button>
       </span>

package/src/components/media/EmbedFrame/embedFrameController.ts

@@ -1,6 +1,8 @@
 const activateEvent = 'nox:embed-frame:activate';
 
-export function activateEmbedFrame(root: HTMLElement): HTMLIFrameElement | null {
+export function activateEmbedFrame(
+  root: HTMLElement,
+): HTMLIFrameElement | null {
   const iframe = root.querySelector<HTMLIFrameElement>(
     '[data-embed-frame-content]',
   );
@@ -14,9 +16,7 @@ export const initEmbedFrame = (root: HTMLElement): (() => void) => {
   const iframe = root.querySelector<HTMLIFrameElement>(
     '[data-embed-frame-content]',
   );
-  const loading = root.querySelector<HTMLElement>(
-    '[data-embed-frame-loading]',
-  );
+  const loading = root.querySelector<HTMLElement>('[data-embed-frame-loading]');
   const activationLayer = root.querySelector<HTMLElement>(
     '[data-embed-frame-activation-layer]',
   );

package/src/components/monetization/AdSlot/AdSlot.astro

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { AdSlotState } from '../../../ads/contracts';
+
+type Props = Omit<HTMLAttributes<'aside'>, 'aria-label'> & {
+  label: string;
+  size?: 'compact' | 'standard' | 'tall';
+  state?: AdSlotState;
+};
+
+const {
+  class: className,
+  label,
+  size = 'standard',
+  state = 'idle',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<aside
+  {...attrs}
+  class:list={['ad-slot', className]}
+  data-ad-size={size}
+  data-ad-state={state}
+  data-widget="ad-slot"
+  aria-label={label}
+  aria-busy={state === 'loading' ? 'true' : 'false'}
+>
+  <div class="ad-slot__content"><slot /></div>
+  <div class="ad-slot__fallback">
+    <slot name="fallback"><div class="ad-slot__fallback-canvas"></div></slot>
+  </div>
+</aside>

package/src/components/monetization/AdSlot/AdSlot.css

@@ -0,0 +1,53 @@
+.ad-slot {
+  --ad-slot-min-block-size: 6rem;
+
+  display: grid;
+  inline-size: 100%;
+  min-block-size: var(--ad-slot-min-block-size);
+  overflow: hidden;
+  place-items: center;
+}
+
+.ad-slot[data-ad-size='compact'] {
+  --ad-slot-min-block-size: 4rem;
+}
+
+.ad-slot[data-ad-size='tall'] {
+  --ad-slot-min-block-size: 15rem;
+}
+
+.ad-slot__content,
+.ad-slot__fallback {
+  grid-area: 1 / 1;
+  inline-size: 100%;
+}
+
+.ad-slot__fallback {
+  display: none;
+  block-size: 100%;
+}
+
+.ad-slot__fallback-canvas {
+  block-size: 100%;
+  min-block-size: var(--ad-slot-min-block-size);
+  background:
+    linear-gradient(
+      135deg,
+      transparent 0 46%,
+      color-mix(in srgb, var(--nox-theme-border-base) 55%, transparent) 46% 54%,
+      transparent 54% 100%
+    ),
+    var(--nox-surface-muted);
+  border: 1px solid var(--nox-theme-border-base);
+  inline-size: 100%;
+}
+
+.ad-slot[data-ad-state='blocked'] .ad-slot__content,
+.ad-slot[data-ad-state='unavailable'] .ad-slot__content {
+  display: none;
+}
+
+.ad-slot[data-ad-state='blocked'] .ad-slot__fallback,
+.ad-slot[data-ad-state='unavailable'] .ad-slot__fallback {
+  display: block;
+}

package/src/components/navigation/DesktopNavigation.css

@@ -87,8 +87,7 @@
     min-width: 4.75rem;
   }
 
-  .site-nav__action
-    > .dropdown[data-dropdown-trigger-appearance='bar'] {
+  .site-nav__action > .dropdown[data-dropdown-trigger-appearance='bar'] {
     min-width: 0;
     block-size: 100%;
     border-radius: 0;

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

@@ -33,15 +33,11 @@
   column-gap: var(--nox-space-4);
 }
 
-.site-footer__content[data-footer-columns='2'][
-  data-footer-column-separator='divider'
-] {
+.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__content[data-footer-columns='2'][data-footer-column-separator='divider']
   > .site-footer__group:nth-child(even)::before {
   display: inline-grid;
   width: calc(
@@ -146,9 +142,7 @@
     grid-column: auto;
   }
 
-  .site-footer__content[data-footer-columns='2'][
-    data-footer-column-separator='divider'
-  ]
+  .site-footer__content[data-footer-columns='2'][data-footer-column-separator='divider']
     > .site-footer__group:nth-child(even)::before {
     content: none;
   }

package/src/components/navigation/MobileNavigation.astro

@@ -51,6 +51,8 @@ const fallbackItems = [...leftItems, ...rightItems].flatMap((item) =>
 const resolvedMobileItems = mobileItems ?? fallbackItems;
 const resolvedHasUtilityActions =
   hasUtilityActions ?? Astro.slots.has('utility-actions');
+const utilityControlCount =
+  mobileUtilityItems.length + Number(resolvedHasUtilityActions);
 ---
 
 <div class="site-nav__mobile" data-mobile-navigation>
@@ -124,7 +126,10 @@ const resolvedHasUtilityActions =
       mobileFooterItems.length > 0 ? (
         <div class="site-nav__mobile-controls">
           {mobileUtilityItems.length > 0 || resolvedHasUtilityActions ? (
-            <ul class="site-nav__mobile-utility">
+            <ul
+              class="site-nav__mobile-utility"
+              style={`--mobile-navigation-control-count: ${utilityControlCount};`}
+            >
               {mobileUtilityItems.map((item) => (
                 <li>
                   <NavigationLink
@@ -147,7 +152,10 @@ const resolvedHasUtilityActions =
           ) : null}
 
           {mobileFooterItems.length > 0 ? (
-            <ul class="site-nav__mobile-footer">
+            <ul
+              class="site-nav__mobile-footer"
+              style={`--mobile-navigation-control-count: ${mobileFooterItems.length};`}
+            >
               {mobileFooterItems.map((item) => (
                 <li>
                   <NavigationLink

package/src/components/navigation/MobileNavigation.css

@@ -94,8 +94,7 @@
   border-radius: var(--nox-radius-md);
 }
 
-.site-nav__mobile-action
-  > .dropdown[data-dropdown-trigger-appearance='bar'] {
+.site-nav__mobile-action > .dropdown[data-dropdown-trigger-appearance='bar'] {
   min-width: 0;
   block-size: var(--nox-site-header-compact-height);
   border-radius: 0;
@@ -175,19 +174,14 @@
 .site-nav__mobile-utility,
 .site-nav__mobile-footer {
   display: grid;
+  grid-template-columns: repeat(
+    var(--mobile-navigation-control-count, 1),
+    minmax(0, 1fr)
+  );
   margin: 0;
   padding: 0;
-  list-style: none;
-}
-
-.site-nav__mobile-utility {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--nox-space-3);
-}
-
-.site-nav__mobile-footer {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: var(--nox-space-3);
+  list-style: none;
 }
 
 .site-nav__mobile-utility-link,
@@ -239,16 +233,8 @@ html[data-mobile-navigation-open] body {
   }
 
   .site-nav__mobile-footer-link[data-mobile-navigation-accent]:hover {
-    border-color: color-mix(
-      in srgb,
-      var(--mobile-navigation-accent) 88%,
-      #000
-    );
-    background: color-mix(
-      in srgb,
-      var(--mobile-navigation-accent) 88%,
-      #000
-    );
+    border-color: color-mix(in srgb, var(--mobile-navigation-accent) 88%, #000);
+    background: color-mix(in srgb, var(--mobile-navigation-accent) 88%, #000);
     color: #fff;
   }
 }

package/src/components/navigation/navigationTypes.ts

@@ -1,8 +1,5 @@
 import type { AstroComponent } from '../widgetTypes';
-import type {
-  DisplayMedia,
-  NavigationLinkItem,
-} from '../../display/contracts';
+import type { DisplayMedia, NavigationLinkItem } from '../../display/contracts';
 
 export type MobileNavigationLabels = {
   closeLabel?: string;