@rohal12/spindle 0.59.10 → 0.59.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rohal12/spindle",
-  "version": "0.59.10",
+  "version": "0.59.12",
   "type": "module",
   "description": "A Preact-based story format for Twine 2.",
   "license": "Unlicense",

package/src/components/macros/Computed.tsx

@@ -93,8 +93,6 @@ defineMacro({
     { name: 'expression', type: 'expression', required: true },
   ],
   render({ rawArgs }, ctx) {
-    const [mergedVars, mergedTemps, mergedLocals, mergedTrans] = ctx.merged!;
-
     let target: string;
     let expr: string;
     try {
@@ -133,13 +131,9 @@ defineMacro({
     }
 
     // The merged values only decide when to recompute; computeAndApply reads
-    // the current ones.
-    ctx.hooks.useLayoutEffect(compute, [
-      mergedVars,
-      mergedTemps,
-      mergedLocals,
-      mergedTrans,
-    ]);
+    // the current ones. The tuple is renewed with them and with the render
+    // counts, which rendered() / hasRendered() read.
+    ctx.hooks.useLayoutEffect(compute, [ctx.merged]);
 
     return null;
   },

package/src/components/macros/For.tsx

@@ -3,6 +3,7 @@ import { LocalsValuesContext } from '../../markup/render';
 import { defineMacro } from '../../define-macro';
 import { MacroError } from './MacroError';
 import { stableKey } from '../../utils/stable-key';
+import { controlEditVersion } from '../../utils/control-edits';
 import type { ASTNode } from '../../markup/ast';
 import { checkVariableName } from '../../utils/namespace';
 import { LocalsScope } from './locals-scope';
@@ -76,6 +77,14 @@ function ForIteration({
   );
 }
 
+/** What {for} remembers of its iterations between renders. */
+interface IterationKeys {
+  contents: string[];
+  generations: number[];
+  next: number;
+  edits: number;
+}
+
 defineMacro({
   name: 'for',
   block: true,
@@ -88,6 +97,12 @@ defineMacro({
   ],
   render({ rawArgs, children = [] }, ctx) {
     const parentValues = useContext(LocalsValuesContext);
+    const keys = ctx.hooks.useRef<IterationKeys>({
+      contents: [],
+      generations: [],
+      next: 0,
+      edits: controlEditVersion(),
+    }).current;
 
     let loop: ReturnType<typeof loopArgs>;
     let list: unknown[];
@@ -112,9 +127,27 @@ defineMacro({
     }
 
     const { itemVar, indexVar } = loop;
+    // An iteration is remounted when its item's contents change, so mount-only
+    // macros run again for the new item (#45) -- unless the change is a
+    // reader editing the item through a control: remounting would drop the
+    // control's focus after the first keystroke.
+    const edited = controlEditVersion() !== keys.edits;
+    keys.edits = controlEditVersion();
+    const generations = list.map((item, i) => {
+      const contents = stableKey(item);
+      if (
+        keys.generations[i] === undefined ||
+        (contents !== keys.contents[i] && !edited)
+      ) {
+        keys.generations[i] = keys.next++;
+      }
+      keys.contents[i] = contents;
+      return keys.generations[i]!;
+    });
+    keys.contents.length = keys.generations.length = list.length;
     const content = list.map((item, i) => (
       <ForIteration
-        key={`${i}-${stableKey(item)}`}
+        key={`${i}-${generations[i]}`}
         parentValues={parentValues}
         itemVar={itemVar}
         itemValue={item}

package/src/components/macros/If.tsx

@@ -1,8 +1,7 @@
 import { defineMacro } from '../../define-macro';
 import { MacroError } from './MacroError';
 import type { Branch } from '../../markup/ast';
-import { selectBranch } from './branches';
-import { wrapContent } from './display';
+import { selectBranch, renderBranch } from './branches';
 
 /**
  * The {if}/{elseif}/{else} branch whose condition holds, else the {else}
@@ -37,11 +36,7 @@ defineMacro({
       );
     }
     if (!branch) return null;
-    return wrapContent(
-      ctx.resolve!(branch.className),
-      ctx.resolve!(branch.id),
-      ctx.renderNodes(branch.children),
-    );
+    return renderBranch(branch, ctx);
   },
   text({ branches = [] }, ctx) {
     const branch = selectIfBranch(branches, ctx.evaluate);

package/src/components/macros/SaveManager.tsx

@@ -345,12 +345,15 @@ export function SaveManagerContent() {
                 class="playthrough-group"
                 key={group.playthrough.id}
               >
-                <div
+                <button
+                  type="button"
                   class="playthrough-header"
+                  aria-expanded={!isCollapsed}
                   onClick={() => toggleCollapse(group.playthrough.id)}
                 >
                   <span
                     class={`playthrough-chevron ${isCollapsed ? '' : 'open'}`}
+                    aria-hidden="true"
                   >
                     ▶
                   </span>
@@ -361,7 +364,7 @@ export function SaveManagerContent() {
                   <span class="playthrough-date">
                     {formatDate(group.playthrough.createdAt)}
                   </span>
-                </div>
+                </button>
 
                 {!isCollapsed && (
                   <div class="playthrough-saves">

package/src/components/macros/Switch.tsx

@@ -1,7 +1,7 @@
 import { defineMacro } from '../../define-macro';
 import { MacroError } from './MacroError';
 import type { Branch } from '../../markup/ast';
-import { selectBranch } from './branches';
+import { selectBranch, renderBranch } from './branches';
 
 /**
  * The first {case} branch whose value equals `value`, else the {default}
@@ -20,6 +20,7 @@ defineMacro({
   name: 'switch',
   subMacros: ['case', 'default'],
   parameters: [{ name: 'expression', type: 'expression', required: true }],
+  interpolate: true,
   merged: true,
   render({ rawArgs, branches = [] }, ctx) {
     let switchValue: unknown;
@@ -46,7 +47,8 @@ defineMacro({
       );
     }
 
-    return branch && <>{ctx.renderNodes(branch.children)}</>;
+    if (!branch) return null;
+    return renderBranch(branch, ctx);
   },
   text({ rawArgs, branches = [] }, ctx) {
     const branch = selectCase(ctx.evaluate(rawArgs), branches, ctx.evaluate);

package/src/components/macros/Widget.tsx

@@ -1,6 +1,4 @@
-import { registerWidget } from '../../widgets/widget-registry';
-import { astContainsChildren } from '../../widgets/ast-scanner';
-import { registerBlockMacro, type ASTNode } from '../../markup/ast';
+import { registerWidgetDef } from '../../widgets/register-widget-def';
 import { defineMacro } from '../../define-macro';
 import { checkVariableName } from '../../utils/namespace';
 import { MacroError } from './MacroError';
@@ -10,22 +8,6 @@ import {
   type WidgetDef,
 } from '../../widgets/widget-def';
 
-/**
- * Register the widget a definition declares, with its body. Widgets whose
- * body renders {@children} take a closing tag, so they are registered as
- * block macros too: passages parsed later nest their content. A parameter
- * that no namespace can hold throws (see registerWidget), registering
- * nothing.
- */
-export function registerWidgetDef(
-  { name, params }: WidgetDef,
-  body: ASTNode[],
-): void {
-  const isBlock = astContainsChildren(body);
-  registerWidget(name, body, params, isBlock);
-  if (isBlock) registerBlockMacro(name);
-}
-
 defineMacro({
   name: 'widget',
   block: true,

package/src/components/macros/WidgetInvocation.tsx

@@ -7,6 +7,8 @@ import { splitArgs } from './arg-utils';
 import { createNamespace } from '../../utils/namespace';
 import { useRenderOptions } from '../../hooks/use-render-options';
 import { LocalsScope } from './locals-scope';
+import { useInterpolate } from '../../hooks/use-interpolate';
+import { wrapContent } from './display';
 
 export { splitArgs };
 
@@ -20,17 +22,14 @@ interface WidgetInvocationProps {
 }
 
 export function WidgetInvocation(props: WidgetInvocationProps) {
-  const { className, id } = props;
-  const content = <WidgetContent {...props} />;
-  // Invocation selectors (`{.badge#hero Stats}`) need an element to land on.
-  if (!className && !id) return content;
-  return (
-    <span
-      class={className}
-      id={id}
-    >
-      {content}
-    </span>
+  const resolve = useInterpolate();
+  // Invocation selectors (`{.badge#hero Stats}`) need an element to land on;
+  // dynamic ones (`{.{$theme} Stats}`) follow the state like a built-in
+  // macro's.
+  return wrapContent(
+    resolve(props.className),
+    resolve(props.id),
+    <WidgetContent {...props} />,
   );
 }
 
@@ -39,8 +38,6 @@ function WidgetContent({
   params,
   rawArgs,
   invocationChildren,
-  className,
-  id,
 }: WidgetInvocationProps) {
   const renderOptions = useRenderOptions();
   const parentValues = renderOptions.locals;
@@ -49,16 +46,9 @@ function WidgetContent({
 
   const childrenValue = invocationChildren?.length ? invocationChildren : null;
 
-  // Parameterized widgets always get their own local scope, even when invoked
-  // without arguments: missing parameters shadow outer locals as undefined.
-  if (params.length === 0) {
-    return (
-      <WidgetChildrenContext.Provider value={childrenValue}>
-        {renderNodes(body, renderOptions)}
-      </WidgetChildrenContext.Provider>
-    );
-  }
-
+  // Every widget gets its own local scope, even when it declares no
+  // parameters or is invoked without arguments: missing parameters shadow
+  // outer locals as undefined, and the body's own locals stay in the widget.
   const argExprs = rawArgs ? splitArgs(rawArgs) : [];
   const values: unknown[] = [];
 

package/src/components/macros/branches.ts

@@ -1,4 +1,7 @@
+import type { ComponentChildren, VNode } from 'preact';
 import type { Branch } from '../../markup/ast';
+import type { MacroContext } from '../../define-macro';
+import { wrapContent } from './display';
 
 /**
  * The branch a conditional block ({if}, {switch}) shows: the first of
@@ -16,3 +19,20 @@ export function selectBranch(
   }
   return fallback;
 }
+
+/**
+ * A selected branch's content, in a wrapper if the branch has CSS selectors
+ * (`{.hot#id case 1}`). The macro must be defined with `interpolate`.
+ */
+export function renderBranch(
+  branch: Branch,
+  ctx: Pick<MacroContext, 'resolve'> & {
+    renderNodes: (nodes: Branch['children']) => ComponentChildren;
+  },
+): VNode<any> {
+  return wrapContent(
+    ctx.resolve!(branch.className),
+    ctx.resolve!(branch.id),
+    ctx.renderNodes(branch.children),
+  );
+}

package/src/define-macro.ts

@@ -10,6 +10,7 @@ import {
   useMemo,
 } from 'preact/hooks';
 import { useInterpolate } from './hooks/use-interpolate';
+import { noteControlEdit } from './utils/control-edits';
 import { useMergedLocals } from './hooks/use-merged-locals';
 import { useRenderOptions } from './hooks/use-render-options';
 import {
@@ -228,6 +229,7 @@ export function defineMacro<const P extends readonly ParameterDef[] = []>(
       // In program order, also when mutation code performs the input
       ctx.getValue = () => getByPath(readState().variables, segments);
       ctx.setValue = (value: unknown) => {
+        noteControlEdit();
         // The commit mutation code uses, which keeps the references among
         // variables: a write to a draft copies only the path written, and
         // other variables sharing the object would keep the old one.

package/src/hooks/use-modal-focus.ts

@@ -10,7 +10,7 @@ const FOCUSABLE = [
   'textarea:not([disabled])',
   'iframe',
   '[contenteditable="true"]',
-  '[tabindex]:not([tabindex="-1"])',
+  '[tabindex]',
 ].join(',');
 
 /**
@@ -27,10 +27,57 @@ function isRendered(el: HTMLElement): boolean {
   return true;
 }
 
+/** The `tabindex` of `el` as an integer, or null when absent or invalid. */
+function tabIndexAttr(el: HTMLElement): number | null {
+  const raw = el.getAttribute('tabindex');
+  if (raw === null || !/^\s*[+-]?\d+\s*$/.test(raw)) return null;
+  return parseInt(raw, 10);
+}
+
+/**
+ * Whether the tab key can reach `el`: a negative tabindex only allows
+ * scripted focus, and of a radio group the browser tabs to the checked
+ * member only (the first one when none is checked).
+ */
+function isTabStop(el: HTMLElement): boolean {
+  const tabIndex = tabIndexAttr(el);
+  if (tabIndex !== null && tabIndex < 0) return false;
+  if (el instanceof HTMLInputElement && el.type === 'radio' && el.name) {
+    const group = Array.from(
+      (
+        el.form ?? (el.getRootNode() as ParentNode)
+      ).querySelectorAll<HTMLInputElement>('input[type="radio"]'),
+    ).filter((r) => r.name === el.name && r.form === el.form && !r.disabled);
+    const stop = group.find((r) => r.checked) ?? group[0];
+    return el === stop;
+  }
+  return true;
+}
+
+/**
+ * The elements of `root` in the order Tab visits them: positive tabindexes
+ * first, ascending, then the others in document order.
+ */
 function focusables(root: HTMLElement): HTMLElement[] {
-  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
-    (el) => !el.hidden && !el.closest('[hidden], [inert]') && isRendered(el),
+  const stops = Array.from(
+    root.querySelectorAll<HTMLElement>(FOCUSABLE),
+  ).filter(
+    (el) =>
+      !el.hidden &&
+      !el.closest('[hidden], [inert]') &&
+      // Also covers controls disabled by a <fieldset disabled> ancestor
+      !el.matches(':disabled') &&
+      isRendered(el) &&
+      isTabStop(el),
   );
+  const positive = (el: HTMLElement) => Math.max(tabIndexAttr(el) ?? 0, 0);
+  // Array.prototype.sort is stable: equal tabindexes keep document order
+  return [
+    ...stops
+      .filter((el) => positive(el) > 0)
+      .sort((a, b) => positive(a) - positive(b)),
+    ...stops.filter((el) => positive(el) === 0),
+  ];
 }
 
 interface ModalEntry {

package/src/index.tsx

@@ -27,7 +27,7 @@ import {
 import { blockWidgetNames, parseWidgetDef } from './widgets/widget-def';
 import { parseMarkup } from './markup/parse';
 import { registerBlockMacro } from './markup/ast';
-import { registerWidgetDef } from './components/macros/Widget';
+import { registerWidgetDefinitions } from './widgets/register-widget-def';
 import { errorMessage } from './utils/error-message';
 import type { ASTNode } from './markup/ast';
 import './macros/register-builtins';
@@ -193,6 +193,14 @@ export function boot() {
   // Enter runtime phase — handlers registered from here on are cleaned on restart
   enterRuntimePhase();
 
+  // Pass 2: Full parse and register widgets from passages tagged "widget",
+  // before StoryInit runs so that it can invoke them
+  for (const [, passage] of storyData.passages) {
+    if (passage.tags.includes('widget')) {
+      registerWidgetDefinitions(parseMarkup(passage.content), passage.name);
+    }
+  }
+
   // Run StoryInit, restore the session if the page was refreshed, and fire
   // storyinit after all state is settled (defaults + StoryInit + session)
   initializeStory(loadSession(storyData.ifid));
@@ -205,27 +213,6 @@ export function boot() {
   ];
   if (markup.length > 0) stopWithErrors(markup);
 
-  // Pass 2: Full parse and register widgets from passages tagged "widget"
-  for (const [, passage] of storyData.passages) {
-    if (passage.tags.includes('widget')) {
-      const widgetAST = parseMarkup(passage.content);
-      for (const node of widgetAST) {
-        if (node.type === 'macro' && node.name === 'widget' && node.rawArgs) {
-          // Read and registered as the {widget} macro does
-          const def = parseWidgetDef(node.rawArgs);
-          try {
-            registerWidgetDef(def, node.children as ASTNode[]);
-          } catch (err) {
-            // As the {widget} macro refuses it: the others still register
-            console.error(
-              `spindle: widget "${def.name}" in passage "${passage.name}" was not registered: ${errorMessage(err)}`,
-            );
-          }
-        }
-      }
-    }
-  }
-
   // Reset action ID counters on every navigation (the passage remounts even
   // when its name is unchanged). Controls that stay mounted, e.g. in
   // StoryInterface, keep their IDs: allocation skips IDs still registered.

package/src/js-lexer.ts

@@ -128,7 +128,7 @@ const OPERAND_ENDS: ReadonlySet<TokenType> = new Set([
  * whether a `{` opens a block or an object literal, which decides whether a
  * `/` after its `}` opens a regex and a `%` a transient: after the `:` of a
  * conditional it opens an object literal (`a ? b : {} / 2`), not a block as
- * after a label; after a block's `}` it opens another block (`{}{} %n = 1`),
+ * after a label, and a `function` or `class` there is an expression; after a block's `}` it opens another block (`{}{} %n = 1`),
  * and so it does on a new line after a statement (`p⏎{} %n = 1`).
  */
 const SigilParser = class extends (Parser as unknown as Base) {
@@ -146,6 +146,8 @@ const SigilParser = class extends (Parser as unknown as Base) {
   closedBlock = false;
   /** The value of the token before the one being finished. */
   prevValue: unknown;
+  /** The type of the token before the last one. */
+  typeBeforeLast: TokenType = tt.eof;
   /** Look ahead after a `%name` starting a line (off in look-aheads). */
   lookahead = true;
   /**
@@ -222,6 +224,21 @@ const SigilParser = class extends (Parser as unknown as Base) {
         (prevType === tt.dot || prevType === tt.questionDot)) ||
       ((type === tt._function || type === tt._class) &&
         notABody(self.input, self.pos));
+    // acorn takes a `function` or `class` for a statement's (whose `}` a
+    // regex may follow) after the `:` of a conditional, and `async function`
+    // always. Both are expressions where an operand is (`a ? b : class {} / 2`,
+    // `x = async function () {} / 2`): read them as after what comes before.
+    if (!property && (type === tt._function || type === tt._class)) {
+      const afterAsync =
+        type === tt._function &&
+        prevType === tt.name &&
+        this.prevValue === 'async' &&
+        !this.breakHere;
+      const before = afterAsync ? this.typeBeforeLast : prevType;
+      self.type =
+        before === tt.colon && this.colonEndsTernary ? tt.parenL : before;
+    }
+    this.typeBeforeLast = prevType;
     // @ts-expect-error acorn internals
     super.finishToken(property ? tt.name : type, value);
     // A variable named `of` (`const of of list`): acorn takes it for the

package/src/markup/render.tsx

@@ -348,7 +348,11 @@ function convertDomNode(
   return null;
 }
 
-/** Inline elements where block-level markdown (lists, headings) is invalid. */
+/**
+ * Elements whose content is phrasing content only, so block-level markdown
+ * (lists, headings, paragraphs) is invalid in them: inline elements, and
+ * block elements such as headings and buttons that only take inline children.
+ */
 const INLINE_ELEMENTS = new Set([
   'a',
   'abbr',
@@ -356,17 +360,27 @@ const INLINE_ELEMENTS = new Set([
   'bdi',
   'bdo',
   'br',
+  'button',
   'cite',
   'code',
   'data',
   'dfn',
   'em',
   'i',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
   'kbd',
   'label',
+  'legend',
   'mark',
   'meter',
+  'option',
   'output',
+  'p',
   'progress',
   'q',
   'rp',
@@ -524,25 +538,43 @@ function useDirectAttributes(
   return direct.length > 0 ? elementRef : undefined;
 }
 
+const decodedText = new Map<string, string>();
 const decodedAttributeText = new Map<string, string>();
 
 /**
- * Decode character references (`&amp;`, `&#123;`) in attribute text the way
- * the HTML parser decodes an attribute value, by letting it parse one.
+ * Decode character references (`&amp;`, `&#123;`) in `text` the way the HTML
+ * parser decodes them, by letting it parse them: in an attribute value, or
+ * else in element text.
  */
-function decodeAttributeText(text: string): string {
+function decodeReferences(
+  text: string,
+  cache: Map<string, string>,
+  parse: (text: string) => string | null,
+): string {
   if (!text.includes('&')) return text;
-  let decoded = decodedAttributeText.get(text);
+  let decoded = cache.get(text);
   if (decoded === undefined) {
-    const html = `<i title="${text.replace(/"/g, '&quot;')}"></i>`;
-    decoded =
-      (parseHtmlInert(html).firstChild as Element).getAttribute('title') ??
-      text;
-    decodedAttributeText.set(text, decoded);
+    decoded = parse(text) ?? text;
+    cache.set(text, decoded);
   }
   return decoded;
 }
 
+function decodeAttributeText(text: string): string {
+  return decodeReferences(text, decodedAttributeText, (t) => {
+    const html = `<i title="${t.replace(/"/g, '&quot;')}"></i>`;
+    return (parseHtmlInert(html).firstChild as Element).getAttribute('title');
+  });
+}
+
+/** Literal text outside markdown (preformatted and SVG elements). */
+function decodeText(text: string): string {
+  return decodeReferences(text, decodedText, (t) => {
+    const html = `<i>${t.replace(/</g, '&lt;')}</i>`;
+    return parseHtmlInert(html).firstChild!.textContent;
+  });
+}
+
 /** A `{` and a sigil starting a reference, in a code attribute. */
 const SIGIL_REFERENCE = /\{[$_@%]\w/;
 
@@ -725,7 +757,8 @@ function renderMacro(node: MacroNode, key: string) {
  * Render a non-text AST node to a Preact element.
  */
 function renderSingleNode(node: ASTNode): preact.ComponentChildren {
-  if (node.type === 'text') return node.value;
+  // Authored text outside markdown still has its character references decoded
+  if (node.type === 'text') return decodeText(node.value);
   const key = nodeKey(node);
   switch (node.type) {
     case 'variable':

package/src/markup/spindle.peggy

@@ -233,6 +233,7 @@ Content
 Item
   = TextRun
   / Escape
+  / Comment
   / LinkLexeme
   / HtmlElement
   / VoidCloser
@@ -291,6 +292,7 @@ Tokens
 TokenItem
   = TextRun
   / Escape
+  / Comment
   / LinkLexeme
   / &{ return !textMode; } tag:HtmlOpen { return tag; }
   / &{ return !textMode; } tag:HtmlClose { return VOID_TAGS.has(tag.lower) ? null : tag; }
@@ -317,6 +319,15 @@ Here
 TextRun
   = value:$[^\\{[<]+ { return lexeme('text', location(), { value }); }
 
+/**
+ * A closed HTML comment, opaque: its tags and macros are not markup, and
+ * rendering drops it. (An unclosed `<!--` is ordinary text.)
+ */
+Comment
+  = value:$("<!--" (">" / "->" / (!"-->" .)* "-->")) {
+      return lexeme('text', location(), { value });
+    }
+
 /**
  * A backslash run. Before a brace, an odd run escapes it; in text mode the
  * run is also paired up (`\\` is one backslash), in passage text markdown

package/src/saves/save-manager.ts

@@ -36,7 +36,16 @@ export function setSaveTitlePassage(content: string): void {
   saveTitlePassageContent = content;
 }
 
+/**
+ * The title of a save. The SaveTitle passage and title generators may draw
+ * random numbers; like the save hooks they must not advance the story's PRNG
+ * (see withoutDraws()).
+ */
 function generateTitle(payload: SavePayload): string {
+  return withoutDraws(() => generateTitleNow(payload));
+}
+
+function generateTitleNow(payload: SavePayload): string {
   // SaveTitle passage takes precedence
   if (saveTitlePassageContent) {
     try {

package/src/story-init.ts

@@ -1,6 +1,7 @@
 import { h, render } from 'preact';
 import { useStoryStore, recordStoryInitState, missingPassage } from './store';
 import { parseMarkup } from './markup/parse';
+import { registerWidgetDefinitions } from './widgets/register-widget-def';
 import { renderNodes } from './markup/render';
 import { setSaveTitlePassage } from './saves/save-manager';
 import { emit } from './event-emitter';
@@ -35,6 +36,9 @@ export function executeStoryInit() {
   const storyInit = state.storyData.passages.get('StoryInit');
   if (storyInit) {
     const ast = parseMarkup(storyInit.content);
+    // Its own widgets are usable from the passage itself: the macros render
+    // before the {widget} definitions' effects run.
+    registerWidgetDefinitions(ast, 'StoryInit');
 
     // Mount into a persistent hidden container. It stays mounted until the
     // next execution (restart) — this lets async effects (useEffect,

package/src/styles.css

@@ -430,6 +430,11 @@ tw-storydata {
 
 .playthrough-header {
   display: flex;
+  width: 100%;
+  border: 0;
+  background: none;
+  font-family: inherit;
+  text-align: left;
   align-items: center;
   gap: 0.5em;
   padding: 0.4em 0;