@aiaiai-pt/design-system 0.42.0 → 0.44.0

package/components/ActionFormRenderer.svelte

@@ -5,6 +5,8 @@
   import Button from "./Button.svelte";
   import Alert from "./Alert.svelte";
   import CodeBlock from "./CodeBlock.svelte";
+  import Combobox from "./Combobox.svelte";
+  import DateTimePicker from "./DateTimePicker.svelte";
   import Input from "./Input.svelte";
   import MapPicker from "./MapPicker.svelte";
   import FileUpload from "./FileUpload.svelte";
@@ -69,6 +71,17 @@
      *  the attachment_keys payload contract; the CONSUMER owns transport/auth
      *  (FileUpload philosophy). Omitted → file params render disabled. */
     uploadFile?: (file: File) => Promise<{ key: string } | { error: string }>;
+    /** Lookup for `object_reference`-typed parameters (#629 PR1b): receives the
+     *  parameter's `object_type` (the entity type code), the operator's query,
+     *  and the parameter's optional `object_filter`; returns picker items. The
+     *  renderer owns the Combobox UI + value plumbing; the CONSUMER owns
+     *  transport/auth/tenancy (the uploadFile seam pattern — the DS stays
+     *  presentation-only). Omitted → object_reference params render disabled. */
+    searchEntities?: (
+      typeCode: string,
+      query: string,
+      filter?: Record<string, string>,
+    ) => Promise<SelectOption[]>;
     /** Environment-specific captcha (e.g. Turnstile), rendered above the button
      *  in submit modes. */
     captcha?: Snippet;
@@ -112,6 +125,7 @@
     schema = null,
     onApply = undefined,
     uploadFile = undefined,
+    searchEntities = undefined,
     captcha = undefined,
     submitLabel = "Submit",
     boundary = undefined,
@@ -264,14 +278,20 @@
   }
 
   function sectionName(parameter: Entity): string {
-    const visibility = parameter.visibility;
-    if (visibility && typeof visibility === "object" && !Array.isArray(visibility)) {
-      const section = (visibility as Record<string, unknown>).section;
-      if (section) return String(section);
-    }
+    // Mirrors the BFF `_parameter_section` precedence (action_schema.py):
+    // ui_schema.section_label → ui_schema.section → visibility.section_label
+    // → visibility.section → "Details". `||` (not `??`) to match Python `or`
+    // falsy-chaining — an empty string falls through to the next rung.
     const uiSchema = parameter.ui_schema;
     if (uiSchema && typeof uiSchema === "object" && !Array.isArray(uiSchema)) {
-      const section = (uiSchema as Record<string, unknown>).section;
+      const row = uiSchema as Record<string, unknown>;
+      const section = row.section_label || row.section;
+      if (section) return String(section);
+    }
+    const visibility = parameter.visibility;
+    if (visibility && typeof visibility === "object" && !Array.isArray(visibility)) {
+      const row = visibility as Record<string, unknown>;
+      const section = row.section_label || row.section;
       if (section) return String(section);
     }
     return "Details";
@@ -400,6 +420,54 @@
     }
   }
 
+  // `object_reference` picker state (#629 PR1b): per-parameter items + loading
+  // for the lazy-search Combobox. A per-key generation counter drops stale
+  // responses (the host's validateGen pattern) so a slow early query can't
+  // clobber a fast later one.
+  let referenceItems = $state<Record<string, SelectOption[]>>({});
+  let referenceLoading = $state<Record<string, boolean>>({});
+  const referenceSearchGen: Record<string, number> = {};
+
+  function objectFilter(parameter: Entity): Record<string, string> | undefined {
+    const filter = parameter.object_filter;
+    return filter && typeof filter === "object" && !Array.isArray(filter)
+      ? (filter as Record<string, string>)
+      : undefined;
+  }
+
+  async function handleReferenceSearch(parameter: Entity, query: string) {
+    if (!searchEntities) return;
+    const key = parameterKey(parameter);
+    const gen = (referenceSearchGen[key] = (referenceSearchGen[key] ?? 0) + 1);
+    referenceLoading = { ...referenceLoading, [key]: true };
+    try {
+      const items = await searchEntities(
+        String(parameter.object_type ?? ""),
+        query,
+        objectFilter(parameter),
+      );
+      if (referenceSearchGen[key] !== gen) return;
+      referenceItems = { ...referenceItems, [key]: Array.isArray(items) ? items : [] };
+    } catch {
+      if (referenceSearchGen[key] === gen) referenceItems = { ...referenceItems, [key]: [] };
+    } finally {
+      if (referenceSearchGen[key] === gen)
+        referenceLoading = { ...referenceLoading, [key]: false };
+    }
+  }
+
+  // `datetime` params keep an ISO 8601 STRING in the value bag (the platform's
+  // datetime wire vocabulary — `$now` resolves to one) so the payload stays
+  // plain JSON; the DateTimePicker speaks Date on its prop edge.
+  function datetimeValue(value: unknown): Date | null {
+    if (value instanceof Date) return value;
+    if (typeof value === "string" && value) {
+      const parsed = new Date(value);
+      if (!Number.isNaN(parsed.getTime())) return parsed;
+    }
+    return null;
+  }
+
   function removeFile(key: string, storageKey: string) {
     fileUploads = {
       ...fileUploads,
@@ -490,6 +558,33 @@
       onchange={(value: string) => setValue(key, value === "true")}
       aria-required={ariaRequired}
     />
+  {:else if type === "datetime"}
+    <!-- `datetime` parameter (#629 PR1b): the DS date+time picker. The value
+         bag carries an ISO 8601 string (see datetimeValue). `datetime` is the
+         platform's one wire token today (sheets + ActionParam docs). -->
+    <DateTimePicker
+      label={String(parameter.label ?? key)}
+      value={datetimeValue(values[key])}
+      readonly={!editable}
+      onchange={(date: Date) => setValue(key, date.toISOString())}
+    />
+  {:else if type === "object_reference"}
+    <!-- `object_reference` parameter (#629 PR1b): lazy-search Combobox over
+         the entity type named by `object_type`; `object_filter` rides the
+         injected searchEntities seam. No seam → disabled (the file-param
+         convention for a missing consumer transport). -->
+    <Combobox
+      label={String(parameter.label ?? key)}
+      items={referenceItems[key] ?? []}
+      value={String(values[key] ?? "")}
+      placeholder={typeof parameter.object_type === "string" && parameter.object_type
+        ? `Search ${parameter.object_type}...`
+        : "Search..."}
+      disabled={!searchEntities || !editable}
+      loading={referenceLoading[key] ?? false}
+      onsearch={(query: string) => handleReferenceSearch(parameter, query)}
+      onchange={(value: string) => setValue(key, value)}
+    />
   {:else if type === "file"}
     <!-- `file` parameter (#75 M5 slice 4b): upload-as-you-attach. The keys
          ride payload.attachment_keys; raw_values never sees this param. -->

package/components/ActionFormRenderer.svelte.d.ts

@@ -8,6 +8,10 @@ import { type RendererMode } from "./action-form-renderer-payload";
  * compatible.
  */
 type Entity = Record<string, unknown>;
+type SelectOption = {
+    value: string;
+    label: string;
+};
 type ActionSchema = {
     found?: boolean;
     schema_version?: string;
@@ -54,6 +58,13 @@ interface Props {
     } | {
         error: string;
     }>;
+    /** Lookup for `object_reference`-typed parameters (#629 PR1b): receives the
+     *  parameter's `object_type` (the entity type code), the operator's query,
+     *  and the parameter's optional `object_filter`; returns picker items. The
+     *  renderer owns the Combobox UI + value plumbing; the CONSUMER owns
+     *  transport/auth/tenancy (the uploadFile seam pattern — the DS stays
+     *  presentation-only). Omitted → object_reference params render disabled. */
+    searchEntities?: (typeCode: string, query: string, filter?: Record<string, string>) => Promise<SelectOption[]>;
     /** Environment-specific captcha (e.g. Turnstile), rendered above the button
      *  in submit modes. */
     captcha?: Snippet;

package/components/MegaMenu.svelte

@@ -0,0 +1,247 @@
+<!--
+  @component MegaMenu
+
+  Category mega-menu for many-section portals (#507): a single "Services ▾"
+  disclosure in the primary band that opens a full-width panel of category
+  columns, so ~20 verticals collapse into one trigger instead of overflowing
+  the bar. Modelled on the GOV.UK "Menu" / Designers Italia mega-nav pattern.
+
+  Semantics: a disclosure (`button[aria-expanded][aria-controls]` + panel),
+  NOT a `menu` role — the panel holds plain links in labelled groups, which
+  screen readers navigate as ordinary lists. Escape closes and restores focus
+  to the trigger; clicking outside or navigating closes. The trigger reads as
+  current (underline bar) when any contained link is current.
+
+  Desktop-only affordance: below `--breakpoint` it renders nothing — small
+  screens keep their native menu (SiteHeader's unified disclosure), which the
+  consumer feeds the same category groups.
+
+  Layout note: the panel is absolutely positioned against the NEAREST
+  POSITIONED ANCESTOR — inside `SiteHeader` (position: sticky) it spans the
+  full header band, which is the intended composition:
+
+  @example
+  <SiteHeader>
+    {#snippet nav()}
+      <ServiceNavigation label="Primary" items={primary} />
+      <MegaMenu label="Serviços" categories={buckets} />
+    {/snippet}
+  </SiteHeader>
+-->
+<script>
+  let {
+    /** @type {string} Visible trigger label (localize it). */
+    label = "Services",
+    /** @type {Array<{ label: string, items: Array<{ href: string, label: string, current?: boolean }> }>} */
+    categories = [],
+    /** @type {string} id linking the trigger to the panel (unique per page). */
+    menuId = "mega-menu",
+    /** @type {string} */
+    class: className = "",
+    /** @type {import('svelte').Snippet | undefined} Trigger icon (chevron). */
+    icon = undefined,
+    ...rest
+  } = $props();
+
+  let open = $state(false);
+  /** @type {HTMLElement | undefined} */
+  let root = $state(undefined);
+  /** @type {HTMLButtonElement | undefined} */
+  let trigger = $state(undefined);
+
+  const hasCurrent = $derived(
+    categories.some((c) => (c.items ?? []).some((i) => i.current)),
+  );
+
+  function onDocumentClick(event) {
+    if (open && root && !root.contains(event.target)) open = false;
+  }
+  function onDocumentKeydown(event) {
+    if (event.key === "Escape" && open) {
+      open = false;
+      trigger?.focus();
+    }
+  }
+</script>
+
+{#if categories.length > 0}
+  <div class="mega-menu {className}" bind:this={root} {...rest}>
+    <button
+      type="button"
+      class="mega-menu-trigger"
+      class:current={hasCurrent}
+      aria-expanded={open}
+      aria-controls={menuId}
+      bind:this={trigger}
+      onclick={() => (open = !open)}
+    >
+      {label}
+      {#if icon}{@render icon()}{:else}
+        <svg
+          class="mega-menu-chevron"
+          class:open
+          viewBox="0 0 16 16"
+          aria-hidden="true"
+        >
+          <path
+            d="M4 6l4 4 4-4"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      {/if}
+    </button>
+
+    {#if open}
+      <div id={menuId} class="mega-menu-panel">
+        {#each categories as category (category.label)}
+          <section class="mega-menu-category" aria-label={category.label}>
+            <h3 class="mega-menu-heading">{category.label}</h3>
+            <ul class="mega-menu-list">
+              {#each category.items ?? [] as item (item.href)}
+                <li class="mega-menu-item">
+                  <a
+                    href={item.href}
+                    class="mega-menu-link"
+                    aria-current={item.current ? "page" : undefined}
+                    onclick={() => (open = false)}
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              {/each}
+            </ul>
+          </section>
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<svelte:document onclick={onDocumentClick} onkeydown={onDocumentKeydown} />
+
+<style>
+  .mega-menu {
+    display: flex;
+    align-items: stretch;
+  }
+
+  /* The trigger reads as a peer of ServiceNavigation's links: same type ramp,
+     full band height, and the same accent underline bar when a contained link
+     is the current page. */
+  .mega-menu-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    height: 100%;
+    padding-inline: var(--space-md);
+    border: none;
+    background: none;
+    color: var(--color-text-secondary);
+    font-family: var(--type-label-font);
+    font-size: var(--nav-service-link-size);
+    font-weight: var(--raw-font-weight-medium);
+    cursor: pointer;
+    transition: color var(--duration-fast) var(--easing-default);
+  }
+  .mega-menu-trigger:hover,
+  .mega-menu-trigger[aria-expanded="true"] {
+    color: var(--color-text);
+  }
+  .mega-menu-trigger:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+  .mega-menu-trigger.current {
+    color: var(--color-text);
+    font-weight: var(--raw-font-weight-semibold);
+    box-shadow: inset 0 calc(-1 * var(--nav-service-underline)) 0 0
+      var(--color-accent);
+  }
+  .mega-menu-chevron {
+    width: var(--icon-size-sm);
+    height: var(--icon-size-sm);
+    transition: transform var(--duration-fast) var(--easing-default);
+  }
+  .mega-menu-chevron.open {
+    transform: rotate(180deg);
+  }
+
+  /* Full-width panel anchored under the band (the nearest positioned ancestor
+     — SiteHeader's sticky banner). Category columns auto-flow; the panel
+     scrolls internally rather than covering the page (#507 overflow fix). */
+  .mega-menu-panel {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    z-index: 50;
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(var(--nav-mega-column-min-width), 1fr)
+    );
+    gap: var(--space-lg);
+    padding: var(--space-lg) var(--content-padding-x);
+    max-height: var(--nav-mega-panel-max-height);
+    overflow-y: auto;
+    background: var(--color-surface-raised);
+    border-top: var(--border-width) solid var(--color-border);
+    border-bottom: var(--border-width) solid var(--color-border);
+    box-shadow: var(--shadow-md);
+  }
+
+  .mega-menu-heading {
+    margin: 0 0 var(--space-2xs);
+    font-family: var(--type-label-font);
+    font-size: var(--type-body-sm-size);
+    font-weight: var(--raw-font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--color-text-secondary);
+  }
+  .mega-menu-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .mega-menu-item {
+    display: flex;
+  }
+  .mega-menu-link {
+    flex: 1;
+    padding: var(--space-2xs) var(--space-2xs);
+    border-radius: var(--radius-md);
+    color: var(--color-text);
+    text-decoration: none;
+    font-family: var(--type-label-font);
+    font-size: var(--type-body-sm-size);
+  }
+  .mega-menu-link:hover {
+    background: var(--color-surface-tertiary);
+  }
+  .mega-menu-link:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+  .mega-menu-link[aria-current="page"] {
+    background: var(--color-surface-tertiary);
+    font-weight: var(--raw-font-weight-semibold);
+  }
+
+  /* Desktop-only: small screens use the consumer's native menu (SiteHeader's
+     unified disclosure), grouped by the same categories. */
+  @media (max-width: 47.99rem) {
+    .mega-menu {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .mega-menu-chevron {
+      transition: none;
+    }
+  }
+</style>

package/components/MegaMenu.svelte.d.ts

@@ -0,0 +1,49 @@
+export default MegaMenu;
+type MegaMenu = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * MegaMenu
+ *
+ * Category mega-menu for many-section portals (#507): a single "Services ▾"
+ * disclosure in the primary band that opens a full-width panel of category
+ * columns, so ~20 verticals collapse into one trigger instead of overflowing
+ * the bar. Modelled on the GOV.UK "Menu" / Designers Italia mega-nav pattern.
+ *
+ * Semantics: a disclosure (`button[aria-expanded][aria-controls]` + panel),
+ * NOT a `menu` role — the panel holds plain links in labelled groups, which
+ * screen readers navigate as ordinary lists. Escape closes and restores focus
+ * to the trigger; clicking outside or navigating closes. The trigger reads as
+ * current (underline bar) when any contained link is current.
+ *
+ * Desktop-only affordance: below `--breakpoint` it renders nothing — small
+ * screens keep their native menu (SiteHeader's unified disclosure), which the
+ * consumer feeds the same category groups.
+ *
+ * Layout note: the panel is absolutely positioned against the NEAREST
+ * POSITIONED ANCESTOR — inside `SiteHeader` (position: sticky) it spans the
+ * full header band, which is the intended composition:
+ *
+ * @example
+ * <SiteHeader>
+ *   {#snippet nav()}
+ *     <ServiceNavigation label="Primary" items={primary} />
+ *     <MegaMenu label="Serviços" categories={buckets} />
+ *   {/snippet}
+ * </SiteHeader>
+ */
+declare const MegaMenu: import("svelte").Component<{
+    label?: string;
+    categories?: any[];
+    menuId?: string;
+    class?: string;
+    icon?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    label?: string;
+    categories?: any[];
+    menuId?: string;
+    class?: string;
+    icon?: any;
+} & Record<string, any>;

package/components/Panel.svelte

@@ -18,6 +18,11 @@
   <Panel open persistent side="left" title="History">
     Always-visible sidebar content
   </Panel>
+
+  @example Modeless drawer (fixed slide-over, page behind stays interactive)
+  <Panel open modeless title="Execute action" onclose={() => showAction = false}>
+    Action form here — focus moves to the heading, Escape closes while inside
+  </Panel>
 -->
 <script module>
   let _panelUid = 0;
@@ -40,6 +45,14 @@
     side = 'right',
     /** @type {boolean} When true, removes backdrop and focus trap. Panel becomes an inline layout element. */
     persistent = false,
+    /** @type {boolean} Modeless drawer (#629): stays a FIXED slide-over like the
+     * default mode, but with no backdrop, no aria-modal, and no focus trap —
+     * the page behind remains browsable/interactive. On open the panel is a
+     * labelled region and focus MOVES to its heading (announced, not trapped);
+     * Escape closes only while focus is inside the panel; focus returns to the
+     * previously-focused element on close (the host owns any deep-link
+     * fallback). Ignored when `persistent` is set. */
+    modeless = false,
     /** @type {boolean} When false, body doesn't scroll — children manage their own overflow. */
     scrollBody = true,
     /** @type {(() => void) | undefined} */
@@ -62,10 +75,17 @@
 
   const FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 
+  // Resolved mode: persistent wins over modeless (persistent consumers are
+  // inline layout elements — a fixed slide-over would be a breaking change).
+  const isPersistent = $derived(persistent);
+  const isModeless = $derived(modeless && !persistent);
+  const isDialog = $derived(!persistent && !modeless);
+
   // Focus trap: save previous focus, trap Tab, restore on close
-  // Skipped in persistent mode (panel is inline, not modal)
+  // Skipped in persistent and modeless modes (persistent is inline; modeless
+  // deliberately leaves the page behind reachable — focus moved, not trapped)
   $effect(() => {
-    if (!open || !panelEl || persistent) return;
+    if (!open || !panelEl || !isDialog) return;
 
     const previouslyFocused = /** @type {HTMLElement | null} */ (document.activeElement);
 
@@ -107,11 +127,41 @@
   function handleBackdropClick() {
     onclose?.();
   }
+
+  // Modeless drawer (#629): initial focus to the panel heading (announces the
+  // labelled region without trapping), Escape scoped to the PANEL element so
+  // it closes only while focus is inside, previous focus restored on close.
+  $effect(() => {
+    if (!open || !panelEl || !isModeless) return;
+
+    const previouslyFocused = /** @type {HTMLElement | null} */ (document.activeElement);
+
+    const heading = /** @type {HTMLElement | null} */ (
+      panelEl.querySelector('.panel-heading-focus')
+    );
+    heading?.focus();
+
+    /** @param {KeyboardEvent} e */
+    function handlePanelKeydown(e) {
+      if (e.key === 'Escape') onclose?.();
+    }
+
+    panelEl.addEventListener('keydown', handlePanelKeydown);
+
+    return () => {
+      panelEl?.removeEventListener('keydown', handlePanelKeydown);
+      // Deep-link entries have no meaningful previous focus (body) — the HOST
+      // owns that fallback (e.g. page H1); restoring a disconnected node is a
+      // no-op by contract.
+      if (previouslyFocused?.isConnected) previouslyFocused.focus();
+    };
+  });
 </script>
 
 {#if open}
-  <!-- Backdrop (hidden in persistent mode) -->
-  {#if !persistent}
+  <!-- Backdrop (dialog mode only — persistent is inline, modeless leaves the
+       page behind visible and interactive) -->
+  {#if isDialog}
     <div
       class="panel-backdrop"
       onclick={handleBackdropClick}
@@ -122,18 +172,25 @@
   <!-- Panel -->
   <aside
     bind:this={panelEl}
-    class="panel panel-{width} panel-side-{side} {persistent ? 'panel-persistent' : ''} {className}"
-    role={persistent ? 'complementary' : 'dialog'}
-    aria-modal={persistent ? undefined : 'true'}
+    class="panel panel-{width} panel-side-{side} {isPersistent ? 'panel-persistent' : ''} {className}"
+    role={isPersistent ? 'complementary' : isModeless ? 'region' : 'dialog'}
+    aria-modal={isDialog ? 'true' : undefined}
     aria-label={!header ? title : undefined}
     aria-labelledby={header ? headerId : undefined}
     {...rest}
   >
     <div class="panel-header">
       {#if header}
-        <div id={headerId}>{@render header()}</div>
+        <div
+          id={headerId}
+          class="panel-heading-focus"
+          tabindex={isModeless ? -1 : undefined}
+        >{@render header()}</div>
       {:else if title}
-        <h2 class="panel-title">{title}</h2>
+        <h2
+          class="panel-title panel-heading-focus"
+          tabindex={isModeless ? -1 : undefined}
+        >{title}</h2>
       {/if}
       {#if !persistent}
         <button

package/components/Panel.svelte.d.ts

@@ -23,6 +23,11 @@ type Panel = {
  * <Panel open persistent side="left" title="History">
  *   Always-visible sidebar content
  * </Panel>
+ *
+ * @example Modeless drawer (fixed slide-over, page behind stays interactive)
+ * <Panel open modeless title="Execute action" onclose={() => showAction = false}>
+ *   Action form here — focus moves to the heading, Escape closes while inside
+ * </Panel>
  */
 declare const Panel: import("svelte").Component<{
     open?: boolean;
@@ -30,6 +35,7 @@ declare const Panel: import("svelte").Component<{
     width?: string;
     side?: string;
     persistent?: boolean;
+    modeless?: boolean;
     scrollBody?: boolean;
     onclose: any;
     class?: string;
@@ -43,6 +49,7 @@ type $$ComponentProps = {
     width?: string;
     side?: string;
     persistent?: boolean;
+    modeless?: boolean;
     scrollBody?: boolean;
     onclose: any;
     class?: string;

package/components/ServiceNavigation.svelte

@@ -161,6 +161,11 @@
       flex-direction: column;
       align-items: stretch;
       min-width: var(--nav-service-dropdown-min-width);
+      /* #507 overflow fix: many sections used to grow the dropdown past the
+         viewport and cover the page — cap it and scroll internally instead. */
+      max-width: calc(100vw - 2 * var(--content-padding-x));
+      max-height: min(70vh, 28rem);
+      overflow-y: auto;
       padding: var(--space-2xs);
       background: var(--color-surface);
       border: var(--border-width) solid var(--color-border);

package/components/index.d.ts

@@ -19,6 +19,7 @@ export { default as ListItem } from "./ListItem.svelte";
 export { default as PageContainer } from "./PageContainer.svelte";
 export { default as AppFrame } from "./AppFrame.svelte";
 export { default as SiteHeader } from "./SiteHeader.svelte";
+export { default as MegaMenu } from "./MegaMenu.svelte";
 export { default as SiteFooter } from "./SiteFooter.svelte";
 export { default as SkipLink } from "./SkipLink.svelte";
 export { default as TextSizeAdjuster } from "./TextSizeAdjuster.svelte";

package/components/index.js

@@ -36,6 +36,7 @@ export { default as PageContainer } from "./PageContainer.svelte";
 // Public site shell (locked a11y chrome — citizen portal, #7/#71)
 export { default as AppFrame } from "./AppFrame.svelte";
 export { default as SiteHeader } from "./SiteHeader.svelte";
+export { default as MegaMenu } from "./MegaMenu.svelte";
 export { default as SiteFooter } from "./SiteFooter.svelte";
 export { default as SkipLink } from "./SkipLink.svelte";
 export { default as TextSizeAdjuster } from "./TextSizeAdjuster.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",

package/tokens/components.css

@@ -229,6 +229,11 @@
      rendered standalone, without SiteHeader's unified menu). */
   --nav-service-dropdown-min-width: 12rem;
 
+  /* MegaMenu (#507) — category column sizing + the panel's internal-scroll cap
+     so an 8-category panel scrolls inside itself instead of covering the page. */
+  --nav-mega-column-min-width: 13rem;
+  --nav-mega-panel-max-height: min(70vh, 32rem);
+
   /* ═══════════════════════════════════════════════
      DATA DISPLAY
      ═══════════════════════════════════════════════ */