@fairgarden/design 0.1.0-alpha.0

package/components/Link/Link.d.ts

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Link (§9.3): which build (`kind`), the long-index visited mark (`index`),
+ * the external mark (`external`), the list link's color-only hover (`list`)
+ * and the muted ancestor ink (`muted`). Color axes inherit the scope and are
+ * never defaulted [D133].
+ */
+export declare const link: (props?: ({
+    kind?: "inline" | "nav" | "title" | "standalone" | "backref" | "noteref" | null | undefined;
+    index?: boolean | null | undefined;
+    external?: boolean | null | undefined;
+    list?: boolean | null | undefined;
+    muted?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type LinkVariants = VariantProps<typeof link>;
+export type LinkKind = NonNullable<LinkVariants['kind']>;
+/** Props for Link: anchor props, `render`, and the kind, mark and color axes. */
+export interface LinkProps extends Omit<useRender.ComponentProps<'a'>, 'className'>, LinkVariants {
+    /**
+     * Which build: `inline` (default) underlines in running text; `standalone`
+     * is the caps module link with a trailing ›; `nav` has no rest underline
+     * and marks the current page; `title` stretches over a card or list item;
+     * `noteref` and `backref` are the note call and return (§9.3).
+     */
+    kind?: LinkVariants['kind'];
+    /**
+     * Adds the screen-only visited ✓ used in long indexes, such as reference
+     * and archive lists. Default `false` [D174, D175].
+     */
+    index?: LinkVariants['index'];
+    /**
+     * Adds the arrow-open mark and "(external site)" for assistive technology.
+     * Default `false`.
+     */
+    external?: LinkVariants['external'];
+    /**
+     * With `kind="nav"`: a list link (nav-panel, footer, drawer and breadcrumb
+     * lists), whose hover is `--role-link-hover` color only, plus the
+     * `--ds-stroke-1-5` `--role-accent` underline where that ink is
+     * `--primary12`. Without it, `nav` is bare navigation text (bar and
+     * utility items, page numbers, toolbar links), whose hover is the
+     * `--border-size-2` `--role-accent` underline (§9.3) [D181]. Default
+     * `false`.
+     */
+    list?: LinkVariants['list'];
+    /**
+     * Rests in `--role-muted` instead of `--primary12`, as a breadcrumb's
+     * ancestors. Hover takes `--role-link-hover` only (the underline is added
+     * where that ink is `--primary12`); with `kind="nav"` it replaces the bar
+     * item's bare-text underline (§9.3, §9.8) [D181]. Default `false`.
+     */
+    muted?: LinkVariants['muted'];
+    /**
+     * Primary Radix scale: the link text and focus ring. Never defaulted;
+     * omitted, it inherits the scope [D133].
+     */
+    primary?: LinkVariants['primary'];
+    /**
+     * Secondary Radix scale: the accent underline. Never defaulted; omitted,
+     * it inherits the scope.
+     */
+    secondary?: LinkVariants['secondary'];
+    /** Extra class names, added after the module's own. */
+    className?: string;
+}
+/**
+ * A semantic anchor. `render` swaps the element, for example
+ * `render={<NextLink href="/trails" />}`.
+ *
+ * - `kind="inline"` (default): `--role-accent` underline in running text.
+ * - `kind="standalone"`: caps module link with a trailing ›.
+ * - `kind="nav"`: no rest underline; hover the bare-text underline; current via
+ *   `aria-current="page"` or `data-active`.
+ * - `kind="title"`: stretched card or list-item title link [D157].
+ * - `kind="noteref"` / `kind="backref"`: note call and ↩ return, never underlined.
+ * - `index`: the screen-only visited ✓ for long indexes [D174, D175].
+ * - `external`: the arrow-open mark plus "(external site)" for assistive technology.
+ * - `list`: with `nav`, the list link's color-only hover (nav panels, footers, drawers).
+ * - `muted`: the `--role-muted` ancestor ink with a color-only hover (breadcrumbs).
+ */
+export declare function Link(props: LinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+//# sourceMappingURL=Link.d.ts.map

package/components/Link/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AASjE;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;;;;;;8EAuBf,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,IAAI,CAAC,CAAA;AACpD,MAAM,MAAM,QAAQ,GAAG,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAA;AAExD,iFAAiF;AACjF,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,WAAW,CAAC,EACtD,YAAY;IACd;;;;;OAKG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAA;IACnC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAA;IAC3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;IACrC,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAoCD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,0EA4FpC"}

package/components/Link/Link.js

@@ -0,0 +1,140 @@
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Icon, iconHost } from '../Icon';
+import { cx } from '../../utils/className';
+import { cleanUrl, printUrl } from '../../utils/printUrl';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './link.module.css';
+/**
+ * Link (§9.3): which build (`kind`), the long-index visited mark (`index`),
+ * the external mark (`external`), the list link's color-only hover (`list`)
+ * and the muted ancestor ink (`muted`). Color axes inherit the scope and are
+ * never defaulted [D133].
+ */
+export const link = cva(styles.base, {
+    variants: {
+        kind: {
+            inline: styles.inline,
+            standalone: styles.standalone,
+            nav: styles.nav,
+            backref: styles.backref,
+            title: styles.title,
+            noteref: styles.noteref,
+        },
+        index: { true: styles.index },
+        external: { true: styles.external },
+        list: { true: styles.list },
+        muted: { true: styles.muted },
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'inline',
+        external: false,
+        list: false,
+        muted: false,
+    },
+});
+/** Word joiner: keeps a trailing mark on the last word's line without an underlined gap. */
+const JOIN = '\u2060';
+const PRINT_URL_KINDS = new Set(['inline', 'standalone', 'title']);
+/**
+ * The URL printed inline after the link (§7.6.1): only for absolute URLs of
+ * ≤ 30 cleaned characters whose text is not already the URL. Longer URLs take
+ * a lettered link note, which the page (not the Link) collects.
+ */
+function printedUrl(href, children) {
+    const cleaned = printUrl(href);
+    if (cleaned === null)
+        return null;
+    // A bare URL prints once, as itself.
+    if (typeof children === 'string') {
+        const text = children.trim();
+        const asUrl = /^https?:\/\//i.test(text) ? text : `https://${text}`;
+        if (cleanUrl(asUrl) === cleaned)
+            return null;
+    }
+    return cleaned;
+}
+/**
+ * The external mark: a long shaft with an `arrow-open` head (6 px arms at
+ * ±30°, round caps) at the inline tier, drawn custom (§1.5.12, §6.10).
+ */
+function ArrowOpenMark({ className }) {
+    return (React.createElement("svg", { className: className, viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false" },
+        React.createElement("path", { d: "M3.5 12.5 12.5 3.5M6.7 5.05 12.5 3.5 10.95 9.3", vectorEffect: "non-scaling-stroke" })));
+}
+/**
+ * A semantic anchor. `render` swaps the element, for example
+ * `render={<NextLink href="/trails" />}`.
+ *
+ * - `kind="inline"` (default): `--role-accent` underline in running text.
+ * - `kind="standalone"`: caps module link with a trailing ›.
+ * - `kind="nav"`: no rest underline; hover the bare-text underline; current via
+ *   `aria-current="page"` or `data-active`.
+ * - `kind="title"`: stretched card or list-item title link [D157].
+ * - `kind="noteref"` / `kind="backref"`: note call and ↩ return, never underlined.
+ * - `index`: the screen-only visited ✓ for long indexes [D174, D175].
+ * - `external`: the arrow-open mark plus "(external site)" for assistive technology.
+ * - `list`: with `nav`, the list link's color-only hover (nav panels, footers, drawers).
+ * - `muted`: the `--role-muted` ancestor ink with a color-only hover (breadcrumbs).
+ */
+export function Link(props) {
+    const { render, ref, className, kind, index, external, list, muted, primary, secondary, children, ...elementProps } = props;
+    const scope = useScopeAttributes();
+    const resolvedKind = kind ?? 'inline';
+    const renderHref = React.isValidElement(render) && typeof render.props === 'object' && render.props !== null
+        ? render.props.href
+        : undefined;
+    const shortUrl = PRINT_URL_KINDS.has(resolvedKind)
+        ? printedUrl(elementProps.href ?? renderHref, children)
+        : null;
+    const trailing = (React.createElement(React.Fragment, null,
+        external ? (React.createElement(React.Fragment, null,
+            JOIN,
+            React.createElement(ArrowOpenMark, { className: `${styles.glyph} ${styles.arrow}` }),
+            React.createElement("span", { className: styles.visuallyHidden }, " (external site)"))) : null,
+        shortUrl !== null ? React.createElement("span", { className: styles.printUrl },
+            "(",
+            shortUrl,
+            ")") : null));
+    const visitedMark = index ? (React.createElement(React.Fragment, null,
+        JOIN,
+        React.createElement(Icon, { name: "check", className: `${styles.glyph} ${styles.visitedMark}` }))) : null;
+    const content = resolvedKind === 'standalone' ? (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: styles.text },
+            children,
+            trailing),
+        React.createElement(Icon, { name: "chevron_right", weight: "interactive", className: `${styles.glyph} ${styles.chevron}` }),
+        visitedMark)) : (React.createElement(React.Fragment, null,
+        children,
+        trailing,
+        visitedMark));
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'a',
+        props: {
+            ...scope,
+            ...mergeProps(elementProps, {
+                className: link({
+                    kind,
+                    index,
+                    external,
+                    list,
+                    muted,
+                    primary,
+                    secondary,
+                    // The standalone link hosts its interactive chevron.
+                    className: resolvedKind === 'standalone' ? cx(iconHost, className) : className,
+                }),
+                children: content,
+            }),
+        },
+    });
+}
+//# sourceMappingURL=Link.js.map

package/components/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/components/Link/Link.tsx"],"names":[],"mappings":"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"}

package/components/Link/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Link';
+//# sourceMappingURL=index.d.ts.map

package/components/Link/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/Link/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/components/Link/index.js

@@ -0,0 +1,2 @@
+export * from './Link';
+//# sourceMappingURL=index.js.map

package/components/Link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/Link/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/components/Link/link.module.css

@@ -0,0 +1,330 @@
+/*
+ * Link (§9.3). CVA function `link` in Link.tsx.
+ * Parts: base (the anchor: text and underline), text (standalone label),
+ * glyph (› chevron, ↗ external arrow-open), visitedMark (`index` only),
+ * visuallyHidden ("(external site)"), printUrl (short URL, print only).
+ * Colors follow the §9.3 Color roles table through role variables only.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.printUrl {
+  composes: typeUrl from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base,
+  .text {
+    text-decoration-thickness: var(--ds-stroke-1-5);
+    text-underline-offset: 0.15em;
+    /* Unbroken through descenders, so it prints as a clean rule (§9.3 Tokens). */
+    text-decoration-skip-ink: none;
+  }
+
+  .base {
+    color: var(--primary12);
+    text-decoration-line: none;
+    border-radius: var(--radius-1);
+    /* The focus ring wraps each line fragment with its own radius (§9.3). */
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+
+  .glyph {
+    display: inline-block;
+    flex: none;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    vertical-align: -0.125em;
+  }
+
+  /* Material Symbols Rounded chevron_right, inline tier (§6.10) [D166]. */
+  .chevron {
+    color: var(--role-glyph);
+    fill: currentColor;
+  }
+
+  /* Custom arrow-open external mark (§1.5.12, §6.10 exception) in the text ink. */
+  .arrow {
+    color: var(--primary12);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: var(--ds-stroke-1-25);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Material Symbols Rounded check, inline tier; always present, space reserved. */
+  .visitedMark {
+    margin-inline-start: 0.25em;
+  }
+
+  .visuallyHidden {
+    position: absolute;
+    inline-size: var(--border-size-1);
+    block-size: var(--border-size-1);
+    margin: calc(var(--border-size-1) * -1);
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .printUrl {
+    display: none;
+  }
+
+  /* Hover transitions [D181]: --ds-duration-quick, --ease-out-3; instant under --motionNotOK. */
+  @media (prefers-reduced-motion: no-preference) {
+    .base,
+    .text {
+      transition:
+        color var(--ds-duration-quick) var(--ease-out-3),
+        text-decoration-color var(--ds-duration-quick) var(--ease-out-3),
+        text-decoration-thickness var(--ds-duration-quick) var(--ease-out-3);
+    }
+  }
+
+  /* Forced colors: the visited mark is removed (§9.3). */
+  @media (forced-colors: active) {
+    .visitedMark {
+      display: none;
+    }
+  }
+}
+
+.standalone {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+@layer variants {
+  /* Inline: surrounding type; --role-accent underline at --ds-stroke-1-5. */
+  .inline {
+    text-decoration-line: underline;
+    text-decoration-color: var(--role-accent);
+  }
+
+  /* Standalone: type-label caps module link, underline under the label only,
+     › after a --ds-space-12 gap; 44 px tall [D160, D165]. */
+  .standalone {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ds-space-12);
+    min-block-size: var(--ds-size-hit);
+    vertical-align: middle;
+  }
+
+  .standalone .text {
+    text-decoration-line: underline;
+    text-decoration-color: var(--role-accent);
+  }
+
+  /* External: the arrow-open mark joins the last word at a word-space gap. */
+  .external .arrow {
+    margin-inline-start: 0.25em;
+  }
+
+  /* Navigation: component type, no rest underline [D80]; 44 px tall. */
+  .nav {
+    display: inline-flex;
+    align-items: center;
+    min-block-size: var(--ds-size-hit);
+  }
+
+  /* Title: no rest underline; the hit area stretches over the item [D157].
+     The item (§12.1) is the positioned ancestor. */
+  .title {
+    text-underline-offset: 0.1em;
+  }
+
+  .title::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+
+  /* Note reference and back-reference: surrounding ink, never underlined,
+     with a --size-px-5 target [D62, D174]. */
+  .noteref,
+  .backref {
+    position: relative;
+    color: inherit;
+  }
+
+  .noteref::before,
+  .backref::before {
+    content: '';
+    position: absolute;
+    /* Physical offsets: centering is direction-agnostic with the translate. */
+    top: 50%;
+    left: 50%;
+    inline-size: max(100%, var(--size-px-5));
+    block-size: max(100%, var(--size-px-5));
+    translate: -50% -50%;
+  }
+
+  /* Muted: the ancestor ink at rest, as a breadcrumb's ancestors (§9.8) [D80]. */
+  .muted {
+    color: var(--role-muted);
+  }
+
+  /* Visited mark at rest: the ground color, so the reserved ✓ is invisible. */
+  .index .visitedMark {
+    color: var(--role-ground);
+    fill: var(--role-ground);
+  }
+}
+
+@layer states {
+  .base:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /*
+   * Hover [D181]: an ink change, never a transform.
+   * - Body link (inline): the rest underline stays; the text takes
+   *   --role-link-hover and the underline thickens to --border-size-2.
+   * - Chevron link (standalone): the label takes --role-link-hover; the ›
+   *   swaps to the next tier's weight (Icon weight="interactive").
+   * - Bare navigation text (nav): a --border-size-2 --role-accent underline
+   *   at a --size-px-1 offset (bar and utility items, page numbers, toolbar
+   *   links).
+   * - Card title link (title): --role-link-hover only, plus the underline
+   *   where --role-link-hover is --primary12 (--ds-link-hover-line).
+   * - List link (nav list, below; nav-panel, footer, drawer and breadcrumb
+   *   lists) and the muted ancestor (muted): the same color-only hover.
+   * Press keeps the [D84] line change: the underline thickens and turns
+   * --primary12.
+   */
+  .inline:hover {
+    color: var(--role-link-hover);
+    text-decoration-thickness: var(--border-size-2);
+  }
+
+  .inline:active {
+    text-decoration-color: var(--primary12);
+    text-decoration-thickness: var(--border-size-2);
+  }
+
+  .standalone:hover .text {
+    color: var(--role-link-hover);
+  }
+
+  .standalone:active .text {
+    text-decoration-color: var(--primary12);
+    text-decoration-thickness: var(--border-size-2);
+  }
+
+  .nav:not([aria-current='page'], [data-active]):hover {
+    text-decoration-line: underline;
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  .nav:active {
+    text-decoration-line: underline;
+    text-decoration-color: var(--primary12);
+    text-decoration-thickness: var(--border-size-2);
+  }
+
+  /* Current: the --ds-stroke-3 bar plus --font-weight-7 (nav only). */
+  .nav[aria-current='page'],
+  .nav[data-active] {
+    text-decoration-line: underline;
+    text-decoration-color: var(--primary12);
+    text-decoration-thickness: var(--ds-stroke-3);
+    font-weight: var(--font-weight-7);
+  }
+
+  .title:hover {
+    color: var(--role-link-hover);
+    text-decoration-line: var(--ds-link-hover-line);
+    text-decoration-color: var(--role-accent);
+  }
+
+  /*
+   * List link (nav-panel, footer, drawer and breadcrumb lists) and the muted
+   * ancestor ink (breadcrumb ancestors): --role-link-hover only, plus a
+   * --ds-stroke-1-5 --role-accent underline where that ink is --primary12
+   * (--ds-link-hover-line). On `nav` it replaces the bar item's bare-text
+   * underline (§9.3, §9.8) [D181].
+   */
+  .list:hover,
+  .muted:hover {
+    color: var(--role-link-hover);
+  }
+
+  .nav.list:not([aria-current='page'], [data-active]):hover,
+  .nav.muted:not([aria-current='page'], [data-active]):hover {
+    text-decoration-line: var(--ds-link-hover-line);
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--ds-stroke-1-5);
+    text-underline-offset: 0.15em;
+  }
+
+  .title:focus-visible {
+    text-decoration-line: underline;
+    text-decoration-color: var(--role-accent);
+  }
+
+  .title:active {
+    text-decoration-line: underline;
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+  }
+
+  .noteref:hover,
+  .noteref:active,
+  .backref:hover,
+  .backref:active {
+    font-weight: var(--font-weight-7);
+  }
+
+  /*
+   * Forced colors flatten inks, so every color-only hover adds an underline
+   * [D181]; the list selectors match the rule above, so they win it.
+   */
+  @media (forced-colors: active) {
+    .inline:hover,
+    .standalone:hover .text,
+    .title:hover,
+    .list:hover,
+    .muted:hover,
+    .nav.list:not([aria-current='page'], [data-active]):hover,
+    .nav.muted:not([aria-current='page'], [data-active]):hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  /* :visited may change color properties only, so the mark swaps ink (R6, D175). */
+  .index:visited .visitedMark {
+    color: var(--primary12);
+    fill: var(--primary12);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Visited marks and back-references never print (§7.6, D174). */
+    .visitedMark,
+    .backref {
+      display: none;
+    }
+
+    .standalone,
+    .nav {
+      min-block-size: auto;
+    }
+
+    /* Short URLs print inline in parentheses (§7.6.1); inline-block keeps the
+       underline off the URL. */
+    .printUrl {
+      display: inline-block;
+      margin-inline-start: 0.25em;
+    }
+  }
+}