@kenlo/sds-design-system 0.9.9

package/components/Menu/menu-variants.js

@@ -0,0 +1,89 @@
+/**
+ * The Menu vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Menu/Menu.tsx.
+ */
+export const MENU_PLACEMENTS = ['bottom', 'bottomLeft', 'bottomRight'];
+export const MENU_INTENTS = ['primary', 'neutral', 'error', 'success', 'alert'];
+
+/**
+ * Trigger shapes.
+ *
+ * KDLS spells these as `variant` and offers navButton | pill | avatar | iconButton. All
+ * four are here. `custom` is the fifth and is SDS's own: a caller that needs a shape this
+ * list does not have supplies the trigger itself, rather than waiting for the list to
+ * grow.
+ */
+export const MENU_TRIGGERS = ['navButton', 'pill', 'avatar', 'iconButton', 'custom'];
+
+function assertOneOf(label, value, allowed) {
+  if (!allowed.includes(value)) {
+    throw new Error(`Unknown menu ${label}: "${value}". Allowed: ${allowed.join(', ')}`);
+  }
+  return value;
+}
+
+export const assertPlacement = (v) => assertOneOf('placement', v, MENU_PLACEMENTS);
+export const assertTrigger = (v) => assertOneOf('trigger', v, MENU_TRIGGERS);
+export const assertIntent = (v) => (v === undefined ? v : assertOneOf('intent', v, MENU_INTENTS));
+
+/**
+ * Normalises whatever the caller passed into one list of rows.
+ *
+ * Two APIs, both of which KDLS had: an `items` array for a menu built from data, and
+ * attribute tags for one written out. They produce the same shape so the template only
+ * knows about one.
+ */
+export function normaliseItems({ items, item }) {
+  const tags = item === undefined ? [] : [].concat(item);
+  const defs = items === undefined ? [] : items;
+
+  const fromTags = tags.map((tag, index) => ({
+    key: tag.key ?? `tag-${index}`,
+    // `custom` is a row that is not a choice: markup living in the panel, the way KDLS
+    // drops a ColorPicker into a Menu.Group. It is not focusable, does not close the
+    // menu, and the keyboard steps over it.
+    type: tag.separator ? 'divider' : (tag.section ? 'section' : (tag.custom ? 'custom' : undefined)),
+    label: tag.label,
+    renderBody: tag.renderBody,
+    icon: tag.icon,
+    intent: tag.intent,
+    badge: tag.badge,
+    href: tag.href,
+    targetBlank: tag.targetBlank,
+    active: tag.active,
+    disabled: tag.disabled,
+    onClick: tag.onClick,
+    children: tag.children,
+  }));
+
+  return [...defs, ...fromTags];
+}
+
+/**
+ * A row and, when it is expanded, the rows inside it — as one flat list.
+ *
+ * The keyboard walks one list. An expandable row that holds three children is four
+ * landing places when it is open and one when it is shut, and the arrow keys have to
+ * agree with what is on screen: stepping into a collapsed submenu moves the highlight to
+ * something nobody can see.
+ *
+ * `depth` is what the renderer indents by; `parent` is the index of the row that owns it.
+ */
+export function flattenRows(rows, expanded = {}) {
+  const out = [];
+  rows.forEach((row, index) => {
+    const key = row.key ?? index;
+    const hasChildren = Array.isArray(row.children) && row.children.length > 0;
+    out.push({ ...row, key, depth: 0, expandable: hasChildren, expanded: Boolean(expanded[key]) });
+    if (!hasChildren || !expanded[key]) return;
+    row.children.forEach((child, childIndex) => {
+      out.push({ ...child, key: `${key}-${childIndex}`, depth: 1, parent: key });
+    });
+  });
+  return out;
+}
+
+/** Rows a keyboard can land on — a divider or a section header is not one of them. */
+export const isSelectable = (row) =>
+  row.type !== 'divider' && row.type !== 'section' && row.type !== 'custom' && !row.disabled;

package/components/Menu/menu.marko

@@ -0,0 +1,560 @@
+<!-- sds-menu — ported from kdls-design-system v2.5.1 (0f3edf8) components/Menu/Menu.tsx.
+
+A trigger and a floating list. Two ways to fill it, both of which KDLS had:
+
+  <sds-menu label="Ações">
+    <@item onClick=onEdit>Editar</@item>
+    <@item separator/>
+    <@item intent="error" onClick=onDelete>Excluir</@item>
+  </sds-menu>
+
+  <sds-menu label="Ações" items=rows/>
+
+KDLS gave its items a React context carrying `close` and `listboxId`, and had them read
+Nav's context as well. Marko 5 has no context, so the menu owns the whole list and renders
+each row itself — see `.claude/component-rules.md` §2c.
+
+Not ported in this pass, and each for a stated reason:
+
+  name, code, agency   the profile header, which belongs to the avatar trigger below
+  accordion            a row that expands inside the panel instead of flying out; it is
+                       the submenu case in another shape and waits on the same decision
+  onChange             belongs to the searchable variant, which is not here either
+
+  submenus     a nested floating list with its own focus management; it belongs with
+               Popover, which is not ported either
+  search       needs Input inside the panel, and a filtering decision that is not KDLS's
+               to make for us
+  pill, avatar trigger shapes that render an sds-pill and an sds-avatar
+  tooltip      still open on touch behaviour
+
+Placement is CSS rather than measured positioning. KDLS computes the panel's position in
+JavaScript; on a page that renders on the server, a menu that only knows where to sit
+after hydration is a menu that jumps. The three placements KDLS offers are all below the
+trigger, so CSS does them — and when Popover lands with real collision detection, this
+grows into it. -->
+
+import { assertPlacement, assertTrigger, assertIntent, normaliseItems, flattenRows, isSelectable }
+  from "./menu-variants.js";
+
+import chevronIcon from "../../icons/generated/fluent-chevron-down-regular.marko";
+// The fallback glyph for an icon trigger with no icon of its own: "more", which is what an
+// unlabelled menu on a row means everywhere it appears.
+import moreIcon from "../../icons/generated/fluent-more-horizontal-regular.marko";
+
+class {
+  onCreate() {
+    this.state = { open: false, activeIndex: -1, expanded: {} };
+  }
+
+  onMount() {
+    // Closing on an outside click is what makes a menu feel like a menu. The listener is
+    // on the document because the click that should close it happens outside this tree.
+    this.onDocumentClick = (event) => {
+      if (!this.isOpen) return;
+
+      // `this.el` rather than `getEl("root")`, and no optional chaining.
+      //
+      // `getEl("root")?.contains(…)` reads as safe and is the opposite: when the lookup
+      // returns nothing the whole expression is undefined, which is falsy, so the guard
+      // falls through and the menu closes itself on the very click that opened it. That
+      // is exactly what happened with the pill trigger on the portal's own bar — it
+      // opened and shut in one click, and a click that did not reach the document opened
+      // it fine, which is what pointed here.
+      //
+      // A menu that cannot find its own element has no business deciding the click was
+      // outside it, so an absent root now means "do nothing" rather than "close".
+      const root = this.el ?? this.getEl("root");
+      if (!root || root.contains(event.target)) return;
+
+      this.close();
+    };
+    document.addEventListener("click", this.onDocumentClick);
+  }
+
+  onDestroy() {
+    document.removeEventListener("click", this.onDocumentClick);
+  }
+
+  /**
+   * The rows the panel shows, with the children of any expanded row folded in.
+   *
+   * The keyboard walks one list, so an expandable row has to contribute its children to
+   * that list exactly when they are on screen — otherwise the arrows step into a submenu
+   * nobody has opened.
+   */
+  get rows() {
+    return flattenRows(normaliseItems(this.input), this.state.expanded);
+  }
+
+  /**
+   * Open or close a row that holds others.
+   *
+   * Inside the panel rather than beside it, which is the `accordion` form KDLS offers and
+   * the only one ported. Its default is a floating fly-out that opens to the right, and
+   * on a phone there is no right to open into — KDLS knows this and forces the accordion
+   * inside a vertical Nav. A design system for public products only needs the one that
+   * works in both places.
+   */
+  toggleRow(key) {
+    const expanded = { ...this.state.expanded };
+    if (expanded[key]) delete expanded[key];
+    else expanded[key] = true;
+    this.state.expanded = expanded;
+  }
+
+  get isOpen() {
+    return this.input.open !== undefined ? this.input.open : this.state.open;
+  }
+
+  /** Reports first, then moves its own state — a controlled caller may refuse. */
+  setOpen(next) {
+    this.input.onOpenChange?.(next);
+    if (this.input.open === undefined) this.state.open = next;
+    if (next) this.wantsFocus = true;
+  }
+
+  /**
+   * An opened menu puts the caret where the next keystroke belongs.
+   *
+   * With a header holding a search box, that is the box: the reason to open a list of
+   * sixty is to narrow it, and making someone click the field first is asking twice. With
+   * no search box it is the first row, so the arrow keys work without a click at all.
+   *
+   * It runs on update rather than on open: the panel does not exist yet at the moment the
+   * state changes, so there is nothing to focus.
+   */
+  onUpdate() {
+    // A filtered list is a different list. The highlight was an index into the old one, so
+    // after typing it pointed at whatever happened to be in that position — arrow-down
+    // from the search box landed on a row nobody had looked for.
+    const size = this.rows.length;
+    if (size !== this.lastSize) {
+      this.lastSize = size;
+      this.state.activeIndex = this.rows.findIndex((row) => isSelectable(row));
+    }
+
+    if (!this.wantsFocus || !this.isOpen) return;
+    this.wantsFocus = false;
+
+    const panel = this.getEl("panel");
+    if (!panel) return;
+
+    const field = panel.querySelector("input, textarea, [contenteditable='true']");
+    if (field) {
+      field.focus();
+      return;
+    }
+
+    this.state.activeIndex = this.rows.findIndex((row) => isSelectable(row));
+    panel.querySelector("[role='listbox']")?.focus();
+  }
+
+  toggle() {
+    this.setOpen(!this.isOpen);
+    this.state.activeIndex = -1;
+  }
+
+  close() {
+    this.setOpen(false);
+    this.state.activeIndex = -1;
+  }
+
+  /** Moves the highlight, skipping dividers, section headers and disabled rows. */
+  move(step) {
+    const rows = this.rows;
+    const selectable = rows
+      .map((row, index) => (isSelectable(row) ? index : -1))
+      .filter((index) => index !== -1);
+    if (!selectable.length) return;
+
+    const current = selectable.indexOf(this.state.activeIndex);
+    const next = current === -1
+      ? (step > 0 ? 0 : selectable.length - 1)
+      : (current + step + selectable.length) % selectable.length;
+
+    this.state.activeIndex = selectable[next];
+  }
+
+  handleTriggerKey(event) {
+    if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (!this.isOpen) this.setOpen(true);
+      this.move(1);
+      return;
+    }
+    if (event.key === "Escape") this.close();
+  }
+
+  handleListKey(event) {
+    // The header can hold a text field, and the keys mean different things inside it:
+    // Space is a space, not a choice, and an arrow should hand the caret to the list
+    // rather than move a highlight nobody is looking at.
+    const typing = event.target.matches?.("input, textarea, [contenteditable='true']");
+
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      this.move(1);
+      if (typing) this.getEl("panel")?.querySelector("[role='listbox']")?.focus();
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      this.move(-1);
+      if (typing) this.getEl("panel")?.querySelector("[role='listbox']")?.focus();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.close();
+      this.getEl("trigger")?.focus();
+      return;
+    }
+    if (event.key === "Enter" || (event.key === " " && !typing)) {
+      const row = this.rows[this.state.activeIndex];
+      if (row) {
+        event.preventDefault();
+        this.pick(row, event);
+      }
+    }
+  }
+
+  pick(row, event) {
+    if (row.disabled) {
+      event.preventDefault();
+      return;
+    }
+    row.onClick?.(event);
+    // A menu that stays open after a choice is a menu nobody trusts they clicked.
+    this.close();
+  }
+}
+
+$ {
+  const {
+    label,
+    icon,
+    trigger = "navButton",
+    placement = "bottom",
+    triggerActive = false,
+    emptyMessage = "Nenhuma opção",
+    open: openInput,
+    onOpenChange,
+    zIndex,
+    class: extraClass = "",
+  } = input;
+
+  assertPlacement(placement);
+  assertTrigger(input.triggerBody ? "custom" : trigger);
+
+  const renderable = (value) => (value && value.renderBody) || value;
+
+  const rows = component.rows;
+  for (const row of rows) assertIntent(row.intent);
+
+  const ariaLabel = input["aria-label"] ?? input.ariaLabel ?? label ?? null;
+  if (!ariaLabel) {
+    throw new Error("sds-menu needs a `label`, or an `aria-label` when the trigger shows no text.");
+  }
+
+  // `component.id`, not a random string: Marko's is the same on the server and in the
+  // browser, and a random one drawn in the render block is neither.
+  const listboxId = `sds-menu-${component.id}`;
+  // A visible label and an aria-label together mean the label is a value and the aria-label
+  // is its name — the trigger has to say both.
+  const namesItself = Boolean(label) && Boolean(input["aria-label"] ?? input.ariaLabel);
+  // Controlled when the caller passes `open`, as in Floating and Popover: a menu holding
+  // something that opens a fullscreen panel of its own has to be closable by whatever
+  // opened that panel.
+  const open = openInput !== undefined ? openInput : state.open;
+
+  const rootClass = [
+    "sds-menu",
+    `sds-menu--${placement}`,
+    open ? "sds-menu--open" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+
+  const triggerClass = [
+    "sds-menu__btn",
+    `sds-menu__btn--${trigger}`,
+    open ? "sds-menu__btn--open" : "",
+    triggerActive ? "sds-menu__btn--active" : "",
+  ].filter(Boolean).join(" ");
+
+  const rowClass = (row) => [
+    "sds-menu__item",
+    row.active ? "sds-menu__item--active" : "",
+    row.disabled ? "sds-menu__item--disabled" : "",
+    row.intent ? `sds-menu__item--${row.intent}` : "",
+  ].filter(Boolean).join(" ");
+}
+
+<div key="root" class=rootClass>
+  <if(input.triggerBody)>
+    <span
+      key="trigger"
+      class="sds-menu__trigger-custom"
+      role="button"
+      tabindex="0"
+      aria-expanded=(open ? "true" : "false")
+      aria-haspopup="listbox"
+      aria-controls=(open ? listboxId : null)
+      aria-label=ariaLabel
+      on-click("toggle")
+      on-keydown("handleTriggerKey")
+    >
+      <${renderable(input.triggerBody)}/>
+    </span>
+  </if>
+  <else-if(trigger === "pill")>
+    <!-- A chip that opens a list. KDLS calls this `variant="pill"` and builds its own
+         subheader out of it; the pill is a real <button>, and telling it that it opens a
+         listbox is what stops it announcing itself as a pressed switch.
+
+         No `active`: a pill that opens a list is not a filter that is on. See the Pill's
+         own header for that rule. -->
+    <sds-pill
+      key="trigger"
+      label=label
+      iconLeft=icon
+      iconRight=chevronIcon
+      onClick=() => component.toggle()
+      aria-haspopup="listbox"
+      aria-expanded=(open ? "true" : "false")
+      aria-controls=(open ? listboxId : null)
+      aria-label=(label ? null : ariaLabel)
+    />
+  </else-if>
+  <else-if(trigger === "iconButton")>
+    <!-- A glyph that opens a list — the "…" on a table row, the bell on a header. The
+         vocabulary has accepted `iconButton` since the port and there was no branch for
+         it: the trigger fell through to the nav button, so a caller who asked for a bare
+         icon got a labelled bar with a chevron, and `buttonIcon`, `iconVariant` and
+         `iconSize` were read by nothing at all. No error, just a different control.
+
+         The name is required, as it is on any icon button: a glyph carries none. -->
+    <sds-icon-button
+      key="trigger"
+      variant=(input.iconVariant ?? "neutral")
+      size=(input.iconSize ?? "md")
+      aria-label=(ariaLabel ?? label ?? "Menu")
+      aria-expanded=(open ? "true" : "false")
+      aria-haspopup="listbox"
+      aria-controls=(open ? listboxId : null)
+      onClick=() => component.toggle()
+    >
+      <@icon><${renderable(input.buttonIcon ?? icon ?? moreIcon)}/></@icon>
+    </sds-icon-button>
+  </else-if>
+  <else-if(trigger === "avatar")>
+    <!-- A face that opens a list — the account menu. The avatar is drawn by sds-avatar and
+         the button around it is what makes it a control: an <img> with an onclick announces
+         itself as an image, and a profile menu nobody can reach by keyboard is a profile
+         menu for some people only.
+
+         The name comes from `ariaLabel`, because the avatar itself is decorative here: its
+         initials are already in the panel header below, and hearing them twice says
+         nothing the second time. -->
+    <button
+      key="trigger"
+      type="button"
+      class="sds-menu__avatar-btn"
+      aria-expanded=(open ? "true" : "false")
+      aria-haspopup="listbox"
+      aria-controls=(open ? listboxId : null)
+      aria-label=(ariaLabel ?? name ?? "Conta")
+      on-click("toggle")
+      on-keydown("handleTriggerKey")
+    >
+      <sds-avatar src=input.src initials=input.initials size=(input.avatarSize ?? "sm") alt=""/>
+    </button>
+  </else-if>
+  <else>
+    <button
+      key="trigger"
+      type="button"
+      class=triggerClass
+      aria-expanded=(open ? "true" : "false")
+      aria-haspopup="listbox"
+      aria-controls=(open ? listboxId : null)
+      aria-label=(label ? null : ariaLabel)
+      aria-labelledby=(namesItself ? `${listboxId}-name ${listboxId}-value` : null)
+      on-click("toggle")
+      on-keydown("handleTriggerKey")
+    >
+      <if(icon)>
+        <span class="sds-menu__btn-icon" aria-hidden="true">
+          <sds-icon><${renderable(icon)}/></sds-icon>
+        </span>
+      </if>
+      <!-- When the visible label is a *value* rather than a name — a font size reading
+           "16" — the caller says what it is with aria-label and both are pointed at, so a
+           screen reader hears "Tamanho do texto 16" instead of "16, button". An aria-label
+           on its own would replace the value; the visible label on its own leaves the
+           value with nothing to say what it means. Same as the Select's nav trigger. -->
+      <if(namesItself)>
+        <span id=`${listboxId}-name` class="sds-visually-hidden">${ariaLabel}</span>
+      </if>
+      <if(label)>
+        <span id=(namesItself ? `${listboxId}-value` : null) class="sds-menu__btn-label">${label}</span>
+      </if>
+      <span class="sds-menu__btn-chevron" aria-hidden="true">
+        <sds-icon size="sm"><fluent-chevron-down-regular/></sds-icon>
+      </span>
+    </button>
+  </else>
+
+  <if(open)>
+    <div
+      key="panel"
+      class="sds-menu__panel"
+      style=(zIndex !== undefined ? `z-index:${zIndex}` : null)
+      on-keydown("handleListKey")
+    >
+      <!-- The list is wrapped, not placed directly in the panel. The wrapper is what
+           carries the panel's vertical padding and, with the panel's 480px cap, what
+           scrolls: without it a long menu is clipped at the cap with no way to reach the
+           rest of it. -->
+      <if(input.header)>
+        <div class="sds-menu__header">
+          <${input.header}/>
+        </div>
+      </if>
+
+      <div class="sds-menu__panel-body">
+        <!-- The list holds focus and names the row the arrows are on. Without
+             aria-activedescendant a screen reader hears the list and never the row. -->
+        <ul
+          class="sds-menu__list"
+          id=listboxId
+          role="listbox"
+          aria-label=ariaLabel
+          aria-activedescendant=(state.activeIndex >= 0 ? `${listboxId}-row-${state.activeIndex}` : null)
+          tabindex="-1"
+        >
+          <if(!rows.length)>
+            <li class="sds-menu__empty">${emptyMessage}</li>
+          </if>
+
+          <for|row, index| of=rows>
+            <if(row.type === "divider")>
+              <li class="sds-menu__separator" role="separator"/>
+            </if>
+            <else-if(row.type === "section")>
+              <li class="sds-menu__group-title" role="presentation">${row.label}</li>
+            </else-if>
+            <else-if(row.type === "custom")>
+              <!-- Markup in the panel rather than a choice in it — KDLS drops a
+                   ColorPicker into a Menu.Group the same way. mousedown is stopped here
+                   because the thing inside opens a panel of its own, and a click out
+                   there would otherwise read as a click outside this one. -->
+              <li class="sds-menu__custom" role="presentation"
+                on-mousedown((event) => event.stopPropagation())>
+                <${row.renderBody}/>
+              </li>
+            </else-if>
+            <else>
+              <li role="none" class=(row.depth ? "sds-menu__child" : null)>
+                <macro|{ }| name="rowContent">
+                  <if(row.icon)>
+                    <span class="sds-menu__item-icon" aria-hidden="true">
+                      <sds-icon size="sm"><${renderable(row.icon)}/></sds-icon>
+                    </span>
+                  </if>
+                  <!-- An item can explain itself two ways, as in KDLS: the label becomes
+                       the trigger, or a separate info affordance sits beside it. -->
+                  <if(row.tooltip && !row.tooltipIcon)>
+                    <sds-tooltip content=row.tooltip placement=(row.tooltipPosition ?? "top")>
+                      <span class="sds-menu__item-label">
+                        <if(row.renderBody)><${row.renderBody}/></if>
+                        <else>${row.label}</else>
+                      </span>
+                    </sds-tooltip>
+                  </if>
+                  <else>
+                    <span class="sds-menu__item-label">
+                      <if(row.renderBody)><${row.renderBody}/></if>
+                      <else>${row.label}</else>
+                    </span>
+                  </else>
+                  <if(row.tooltip && row.tooltipIcon)>
+                    <span class="sds-menu__item-tooltip-icon">
+                      <sds-tooltip content=row.tooltip placement=(row.tooltipPosition ?? "top")/>
+                    </span>
+                  </if>
+                  <if(row.badge)>
+                    <sds-badge label=row.badge variant="scheme-color" appearance="tone-50" size="sm"/>
+                  </if>
+                </macro>
+
+                <if(row.expandable)>
+                  <!-- A row that opens the rows under it, in the panel rather than beside
+                       it. A real <button>, so Enter and Space come from the browser rather
+                       than from a keydown handler; `role="option"` because a listbox may
+                       only hold options and groups, and ARIA allows `aria-expanded` on an
+                       option. KDLS uses a <div role="option"> with its own key handling,
+                       and nests a second listbox inside the first, which is not valid. -->
+                  <button
+                    type="button"
+                    id=`${listboxId}-row-${index}`
+                    class=`${rowClass(row)} sds-menu__item--expandable`
+                    role="option"
+                    aria-selected="false"
+                    aria-expanded=(row.expanded ? "true" : "false")
+                    disabled=(row.disabled || null)
+                    data-active=(index === state.activeIndex ? "true" : null)
+                    on-click(() => component.toggleRow(row.key))
+                  >
+                    <rowContent/>
+                    <span class="sds-menu__item-chevron" aria-hidden="true">
+                      <sds-icon size="sm"><fluent-chevron-down-regular/></sds-icon>
+                    </span>
+                  </button>
+                </if>
+                <else-if(row.href)>
+                  <a
+                    id=`${listboxId}-row-${index}`
+                    class=rowClass(row)
+                    role="option"
+                    aria-selected=(row.active ? "true" : "false")
+                    aria-disabled=(row.disabled ? "true" : null)
+                    data-active=(index === state.activeIndex ? "true" : null)
+                    href=(row.disabled ? null : row.href)
+                    target=(row.targetBlank ? "_blank" : null)
+                    rel=(row.targetBlank ? "noopener noreferrer" : null)
+                    on-click("pick", row)
+                  >
+                    <rowContent/>
+                  </a>
+                </else-if>
+                <else>
+                  <button
+                    type="button"
+                    id=`${listboxId}-row-${index}`
+                    class=rowClass(row)
+                    role="option"
+                    aria-selected=(row.active ? "true" : "false")
+                    disabled=(row.disabled || null)
+                    data-active=(index === state.activeIndex ? "true" : null)
+                    on-click("pick", row)
+                  >
+                    <rowContent/>
+                  </button>
+                </else>
+              </li>
+            </else>
+          </for>
+        </ul>
+      </div>
+
+      <!-- Pinned below the list rather than inside it, so it stays put while the rows
+           scroll — which is the whole point of a footer on a menu that can be long. -->
+      <if(input.footer)>
+        <div class="sds-menu__panel-footer">
+          <${input.footer}/>
+        </div>
+      </if>
+    </div>
+  </if>
+</div>