@flamingo-stack/openframe-frontend-core 0.0.711 → 0.0.712

package/src/components/features/software/software-action-form.tsx

@@ -0,0 +1,199 @@
+'use client';
+
+import { type ReactNode, useState } from 'react';
+import { PlusCircleIcon } from '../../icons-v2-generated';
+import { Button, type PageActionButton, PageLayout, RadioGroupBlock } from '../../ui';
+import { PACKAGE_MANAGER_OS } from './package-managers';
+import { SoftwareScheduleFields, type SoftwareScheduleTiming } from './schedule-fields';
+import { SOFTWARE_ACTION_COPY, type SoftwareActionKind } from './software-action-copy';
+import { newSoftwareRow, type SoftwareRow } from './software-row';
+import { type PackageSearchSlotProps, SoftwareRowFields } from './software-row-fields';
+
+/** Run the packages now, or at a scheduled start. */
+export type SoftwareRunMode = 'now' | 'schedule';
+
+/** Everything the form holds: the packages and when they run. The devices are the host's. */
+export interface SoftwareActionFormValues<TRef extends string = string> {
+  rows: SoftwareRow[];
+  mode: SoftwareRunMode;
+  date: Date | null;
+  time: string;
+  timeReference: TRef;
+}
+
+/** What the device picker slot is told: which devices the chosen packages can run on. */
+export interface SoftwareDeviceScope {
+  /** The OS of every chosen catalog, sorted, e.g. `['MAC_OS', 'WINDOWS']`. */
+  osTypes: string[];
+  /**
+   * The same list as one string. It changes exactly when the candidate devices
+   * do, so it is the key to remount a picker by.
+   */
+  osTypesKey: string;
+}
+
+export interface SoftwareActionFormProps<TRef extends string = string> {
+  action: SoftwareActionKind;
+  /** "Back" over the title and the phone's "Cancel"; left out, the form shows neither (a picture of the form). */
+  onBack?: () => void;
+  /**
+   * Render the page header (the title, "Back" and the primary button). Default
+   * true; a host that shows the form under a heading of its own passes false.
+   */
+  showHeader?: boolean;
+  /** The header's primary button: run now or schedule, by the chosen mode. */
+  onSubmit: (values: SoftwareActionFormValues<TRef>) => void;
+  submitDisabled?: boolean;
+  submitting?: boolean;
+  /** How a schedule's start is read. */
+  timing: SoftwareScheduleTiming<TRef>;
+  /** What the form opens with. `timeReference` is required: the form cannot guess the host's default. */
+  initialValues: Partial<SoftwareActionFormValues<TRef>> & { timeReference: TRef };
+  /** The "Software Name" field of each row. */
+  renderPackageSearch: (field: PackageSearchSlotProps) => ReactNode;
+  /** "Device Selection": the host's picker for the given scope. */
+  renderDevicePicker: (scope: SoftwareDeviceScope) => ReactNode;
+  /** Offer "Add Software" (several packages in one run). Default true; false is a one-package form. */
+  addRows?: boolean;
+  /**
+   * `stacked` (default): the run choice, then the schedule's fields under it.
+   * `inline`: on a wide form the two choices sit side by side with the
+   * schedule's fields on the same row, so the devices start higher.
+   */
+  runModeLayout?: 'stacked' | 'inline';
+  /** The "Device Selection" heading over the picker. Default true; a host that titles the picker itself passes false. */
+  showDeviceHeading?: boolean;
+  className?: string;
+}
+
+const INITIAL_ROWS = (): SoftwareRow[] => [newSoftwareRow('row-0')];
+
+/**
+ * Install Software (design 591:8524) and Update Software (409:48080 / 409:48175):
+ * which catalog packages, now or on a schedule, on which devices. One form for
+ * both flows.
+ *
+ * The packages and the timing are form state; the devices are not. Searching a
+ * catalog and picking devices are the host's queries, so both are slots: the
+ * product passes its data-bound field and picker, a fixture passes static ones.
+ */
+export function SoftwareActionForm<TRef extends string = string>({
+  action,
+  onBack,
+  showHeader = true,
+  onSubmit,
+  submitDisabled = false,
+  submitting = false,
+  timing,
+  initialValues,
+  renderPackageSearch,
+  renderDevicePicker,
+  addRows = true,
+  runModeLayout = 'stacked',
+  showDeviceHeading = true,
+  className = 'px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]',
+}: SoftwareActionFormProps<TRef>) {
+  const copy = SOFTWARE_ACTION_COPY[action];
+
+  const [rows, setRows] = useState<SoftwareRow[]>(() => initialValues.rows ?? INITIAL_ROWS());
+  const [mode, setMode] = useState<SoftwareRunMode>(initialValues.mode ?? 'now');
+  const [date, setDate] = useState<Date | null>(initialValues.date ?? null);
+  const [time, setTime] = useState(initialValues.time ?? '');
+  const [timeReference, setTimeReference] = useState<TRef>(initialValues.timeReference);
+
+  // The picker's frame: devices on the OS the chosen packages install on.
+  const osTypesKey = [...new Set(rows.map(row => PACKAGE_MANAGER_OS[row.packageManager]))].sort().join(',');
+
+  const actions: PageActionButton[] = [
+    ...(onBack ? [{ label: 'Cancel', onClick: onBack, variant: 'outline' as const, showOnlyMobile: true }] : []),
+    {
+      label: mode === 'now' ? copy.runLabel : copy.scheduleLabel,
+      variant: 'accent',
+      onClick: () => onSubmit({ rows, mode, date, time, timeReference }),
+      disabled: submitDisabled,
+      loading: submitting,
+    },
+  ];
+
+  const updateRow = (next: SoftwareRow) => setRows(current => current.map(row => (row.key === next.key ? next : row)));
+  const removeRow = (key: string) => setRows(current => current.filter(row => row.key !== key));
+  const addRow = () => setRows(current => [...current, newSoftwareRow(crypto.randomUUID())]);
+
+  const inline = runModeLayout === 'inline';
+  const runModeField = (
+    <RadioGroupBlock
+      name="runMode"
+      variant="grouped"
+      orientation={inline ? 'horizontal' : 'vertical'}
+      value={mode}
+      onValueChange={value => setMode(value as SoftwareRunMode)}
+      options={copy.modes}
+      itemClassName="py-[var(--spacing-system-sf)]"
+    />
+  );
+  const scheduleFields = mode === 'schedule' && (
+    <SoftwareScheduleFields
+      date={date}
+      time={time}
+      timeReference={timeReference}
+      timing={timing}
+      onDateChange={setDate}
+      onTimeChange={setTime}
+      onTimeReferenceChange={setTimeReference}
+      columns={inline ? 'fill' : 'page'}
+    />
+  );
+
+  return (
+    <PageLayout
+      title={copy.formTitle}
+      backButton={onBack ? { label: 'Back', onClick: onBack } : undefined}
+      actions={actions}
+      actionsVariant="primary-buttons"
+      showHeader={showHeader}
+      className={className}
+    >
+      {rows.map(row => (
+        <SoftwareRowFields
+          key={row.key}
+          row={row}
+          removable={rows.length > 1}
+          onChange={updateRow}
+          onRemove={() => removeRow(row.key)}
+          renderPackageSearch={renderPackageSearch}
+        />
+      ))}
+
+      {addRows && (
+        <Button
+          type="button"
+          variant="outline"
+          size="small"
+          className="self-start"
+          onClick={addRow}
+          leftIcon={<PlusCircleIcon size={24} className="text-ods-text-secondary" />}
+        >
+          Add Software
+        </Button>
+      )}
+
+      {inline ? (
+        <div className="flex flex-col gap-[var(--spacing-system-l)] content-lg:flex-row content-lg:items-end">
+          <div className="min-w-0 content-lg:flex-1">{runModeField}</div>
+          {scheduleFields && <div className="min-w-0 content-lg:flex-1">{scheduleFields}</div>}
+        </div>
+      ) : (
+        <>
+          {runModeField}
+          {scheduleFields}
+        </>
+      )}
+
+      {showDeviceHeading && (
+        <h2 className="pt-[var(--spacing-system-l)] text-ods-text-primary text-h2">Device Selection</h2>
+      )}
+
+      {renderDevicePicker({ osTypes: osTypesKey.split(','), osTypesKey })}
+    </PageLayout>
+  );
+}

package/src/components/features/software/software-row-fields.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { TrashIcon } from '../../icons-v2-generated';
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, TruncateText } from '../../ui';
+import {
+  PACKAGE_MANAGER_ICON,
+  PACKAGE_MANAGER_LABEL,
+  PACKAGE_MANAGERS,
+  type SupportedPackageManager,
+} from './package-managers';
+import type { SelectedPackage, SoftwareRow } from './software-row';
+
+/** What the "Software Name" slot is handed: one catalog, the picked package and its writer. */
+export interface PackageSearchSlotProps {
+  packageManager: SupportedPackageManager;
+  value: SelectedPackage | null;
+  onChange: (pkg: SelectedPackage | null) => void;
+}
+
+export interface SoftwareRowFieldsProps {
+  row: SoftwareRow;
+  removable: boolean;
+  onChange: (row: SoftwareRow) => void;
+  onRemove: () => void;
+  /**
+   * The "Software Name" field. A slot, because searching a catalog is the
+   * host's query: the product passes its data-bound picker, a fixture a static one.
+   */
+  renderPackageSearch: (field: PackageSearchSlotProps) => ReactNode;
+}
+
+/** A value over its label; a missing value draws the muted empty mark. */
+function InfoCell({ value, label }: { value: string | null | undefined; label: string }) {
+  return (
+    <div className="flex min-w-0 flex-1 flex-col justify-center">
+      <div className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
+        {value ? (
+          <div className="min-w-0 flex-1">
+            <TruncateText>{value}</TruncateText>
+          </div>
+        ) : (
+          <div className="min-w-0 flex-1 text-h4">
+            <span className="text-ods-text-secondary">—</span>
+          </div>
+        )}
+      </div>
+      <p className="truncate text-ods-text-secondary text-h6">{label}</p>
+    </div>
+  );
+}
+
+/** One package to install or update: its manager, the package, and what the catalog says about it. */
+export function SoftwareRowFields({ row, removable, onChange, onRemove, renderPackageSearch }: SoftwareRowFieldsProps) {
+  return (
+    <div className="flex flex-col gap-[var(--spacing-system-l)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-l)] content-lg:flex-row content-lg:items-end">
+      <div className="min-w-0 flex-1">
+        <Select
+          value={row.packageManager}
+          onValueChange={value => onChange({ ...row, packageManager: value as SupportedPackageManager, pkg: null })}
+        >
+          <SelectTrigger label="Package Manager" labelVariant="large">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {PACKAGE_MANAGERS.map(manager => {
+              const Icon = PACKAGE_MANAGER_ICON[manager];
+              return (
+                <SelectItem key={manager} value={manager}>
+                  <span className="flex items-center gap-[var(--spacing-system-xsf)]">
+                    <Icon size={20} className="shrink-0 text-ods-text-secondary" />
+                    {PACKAGE_MANAGER_LABEL[manager]}
+                  </span>
+                </SelectItem>
+              );
+            })}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="min-w-0 flex-1">
+        {renderPackageSearch({
+          packageManager: row.packageManager,
+          value: row.pkg,
+          onChange: pkg => onChange({ ...row, pkg }),
+        })}
+      </div>
+
+      <InfoCell value={row.pkg?.description} label="Description" />
+
+      <div className="flex min-w-0 flex-1 items-end gap-[var(--spacing-system-lf)]">
+        <InfoCell value={row.pkg?.version} label="Current Version" />
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          aria-label="Remove software"
+          onClick={onRemove}
+          disabled={!removable}
+          leftIcon={<TrashIcon size={24} className="text-ods-error" />}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/features/software/software-row.ts

@@ -0,0 +1,22 @@
+import type { SupportedPackageManager } from './package-managers';
+
+/** A catalog package the user picked, kept whole so the row can show its description and version. */
+export interface SelectedPackage {
+  id: string;
+  name: string;
+  description: string | null;
+  version: string | null;
+  /** Homebrew only: a formula and a cask can share a name. */
+  packageType: 'FORMULA' | 'CASK' | null;
+}
+
+/** One "Package Manager + Software Name" row of the form. */
+export interface SoftwareRow {
+  key: string;
+  packageManager: SupportedPackageManager;
+  pkg: SelectedPackage | null;
+}
+
+export function newSoftwareRow(key: string): SoftwareRow {
+  return { key, packageManager: 'BREW', pkg: null };
+}

package/src/components/features/sortable-list/index.ts

@@ -1,4 +1,5 @@
 export { SLOT_STICKINESS } from './slot-geometry';
+export { SortableDragHandle, type SortableGripProps } from './sortable-drag-handle';
 export { SortableList, type SortableListProps } from './sortable-list';
 export { SortableMoveButtons, type SortableMoveButtonsProps } from './sortable-move-buttons';
 export { type SortableDragHandleProps, type SortableItem, useSortableItem } from './use-sortable-item';

package/src/components/features/sortable-list/sortable-drag-handle.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { cn } from '../../../utils/cn';
+import { DraggerIcon } from '../../icons-v2-generated/interface/dragger-icon';
+import { Button } from '../../ui/button';
+import type { SortableDragHandleProps as DragHandleBindings } from './use-sortable-item';
+
+export interface SortableGripProps {
+  /** `useSortableItem().dragHandleProps` of the row this grip belongs to. */
+  handleProps: DragHandleBindings;
+  /** Names the row for assistive tech ("Drag Billing to reorder"). */
+  label?: string;
+  className?: string;
+}
+
+/**
+ * THE grip of a {@link SortableList} row: the lib `Button`, so every sortable
+ * list has the same handle (size, focus ring, keyboard: Arrow Up / Arrow Down
+ * move the row). Render it while `dragAndDropEnabled` is true and
+ * `SortableMoveButtons` otherwise:
+ *
+ * ```tsx
+ * const { itemRef, dragHandleProps, dragAndDropEnabled } = useSortableItem();
+ * {dragAndDropEnabled ? <SortableDragHandle handleProps={dragHandleProps} /> : <SortableMoveButtons … />}
+ * ```
+ */
+export function SortableDragHandle({ handleProps, label, className }: SortableGripProps) {
+  return (
+    <Button
+      type="button"
+      variant="transparent"
+      size="icon-sm"
+      aria-label={label ? `Drag ${label} to reorder` : 'Drag to reorder'}
+      // Spread whole, as `useSortableItem` asks: the grip's ref and its arrow keys.
+      {...handleProps}
+      // `touch-none`: the browser must not take the gesture for a scroll.
+      className={cn('shrink-0 cursor-grab touch-none text-ods-text-secondary hover:text-ods-text-primary', className)}
+      leftIcon={<DraggerIcon />}
+    />
+  );
+}

package/src/components/layout/page-heading.tsx

@@ -72,13 +72,23 @@ export function PageHeading({
 const SENTENCE_MARK = /([.:?!]+)(?=\s|$)/g;
 const ONLY_MARKS = /^\s*[.:?!]+\s*$/;
 
+/**
+ * Which of a brand's two colours a heading's eyebrow and marks take: its accent
+ * (the default) or its secondary colour (`PLATFORM_BRAND`'s `secondaryStem`:
+ * OpenFrame's marketing pages are cyan there, its product screens yellow).
+ * `secondary` needs a named `platform`.
+ */
+export type HeadingAccentTone = 'accent' | 'secondary';
+
 /**
  * The accent a heading's marks take, as an ODS class: a named platform's brand
  * accent (`getPlatformBrandClasses`, the one platform → token table), else the
  * accent of the platform the page runs on (`text-ods-accent`).
  */
-export function headingAccentClass(platform?: string | null): string {
-  return platform ? getPlatformBrandClasses(platform).accentText : 'text-ods-accent';
+export function headingAccentClass(platform?: string | null, tone: HeadingAccentTone = 'accent'): string {
+  if (!platform) return 'text-ods-accent';
+  const classes = getPlatformBrandClasses(platform);
+  return tone === 'secondary' ? classes.secondaryText : classes.accentText;
 }
 
 /**
@@ -92,8 +102,12 @@ export function headingAccentClass(platform?: string | null): string {
  * its own colour for its letters). A mark inside a number or a version
  * (`$6.7M`, `v1.5.0`) is not a sentence mark and is left alone.
  */
-export function accentSentenceMarks(node: ReactNode, platform?: string | null): ReactNode {
-  return accentMarks(node, headingAccentClass(platform));
+export function accentSentenceMarks(
+  node: ReactNode,
+  platform?: string | null,
+  tone: HeadingAccentTone = 'accent',
+): ReactNode {
+  return accentMarks(node, headingAccentClass(platform, tone));
 }
 
 function accentMarks(node: ReactNode, accentClassName: string): ReactNode {
@@ -157,6 +171,8 @@ export interface SectionHeadingProps {
    * that shows ANOTHER product. Omitted: the platform the page runs on.
    */
   platform?: string | null;
+  /** Which of `platform`'s colours: its accent (default) or its secondary colour. */
+  tone?: HeadingAccentTone;
   /** Extra classes on the outer row. */
   className?: string;
 }
@@ -175,16 +191,17 @@ export function SectionHeading({
   action,
   level = 'section',
   platform,
+  tone = 'accent',
   className,
 }: SectionHeadingProps) {
-  const accentClassName = headingAccentClass(platform);
+  const accentClassName = headingAccentClass(platform, tone);
   const layout = SECTION_HEADING_LAYOUT[level];
   const Tag = level === 'page' ? 'h1' : 'h2';
   const stack = (
     <div className={layout.stack}>
       {eyebrow ? <span className={`text-h5 ${accentClassName}`}>{eyebrow}</span> : null}
       <Tag className={layout.heading}>
-        {accentSentenceMarks(title, platform)}
+        {accentSentenceMarks(title, platform, tone)}
         {punctuation ? <span className={accentClassName}>{punctuation}</span> : null}
       </Tag>
       {intro ? <div className={layout.intro}>{intro}</div> : null}

package/src/components/navigation/index.ts

@@ -9,6 +9,7 @@ export { NavPanel, isMegaMenu } from './nav-panel';
 export type { NavPanelProps } from './nav-panel';
 export { NavItemRow } from './nav-item-row';
 export type { NavItemRowProps, NavItemRowVariant } from './nav-item-row';
+export type { AskAiOpenDetail } from './mingo-ai-button';
 export { ASK_AI_OPEN_EVENT, MingoAiButton, openAskAi } from './mingo-ai-button';
 export type { MingoAiButtonProps } from './mingo-ai-button';
 export { MobileNavSheet, MOBILE_NAV_SHEET_ID, siteNavHasMobileMenus } from './mobile-nav-sheet';
@@ -23,6 +24,10 @@ export type { SlidingSidebarProps } from './sliding-sidebar';
 
 export { StickySectionNav, useSectionNavigation } from './sticky-section-nav';
 export type { StickyNavSection } from './sticky-section-nav';
+// The scroll spy behind a section nav that keeps the URL on the section being
+// read (`syncHash`, two levels of anchors): the docs and trust-center spy.
+export { useScrollSpy } from '../docs/use-scroll-spy';
+export type { UseScrollSpyOptions } from '../docs/use-scroll-spy';
 
 export { NAVIGATION_SIDEBAR_WIDTH_VAR, NavigationSidebar } from './navigation-sidebar';
 export type { NavigationSidebarProps } from './navigation-sidebar';

package/src/components/navigation/mingo-ai-button.tsx

@@ -23,10 +23,13 @@ export interface MingoAiButtonProps extends React.ButtonHTMLAttributes<HTMLButto
    *  key cap beside the label. Default false. */
   shortcutHint?: boolean;
   /** `inline` (default): the header launcher, the height and type of the menu
-   *  items beside it. `field`: the full-width row that opens the mobile menu
-   *  (the name reads as the field's prompt). ONE component, so every Mingo
-   *  launcher carries the same identity, ring and event. */
-  variant?: 'inline' | 'field';
+   *  items beside it; its name collapses with the menus below `lg`. `button`:
+   *  the same launcher inside a page (a card, the head of a row of questions):
+   *  the name and the key cap always show. `field`: the full-width row that
+   *  opens the mobile menu (the name reads as the field's prompt). ONE
+   *  component, so every Mingo launcher carries the same identity, ring and
+   *  event. */
+  variant?: 'inline' | 'button' | 'field';
 }
 
 const MINGO_ACCENT = 'var(--ods-flamingo-cyan-base)';
@@ -34,18 +37,29 @@ const MINGO_ACCENT = 'var(--ods-flamingo-cyan-base)';
 /** The event the mounted chat panel (`EmbeddableChat`) opens on. */
 export const ASK_AI_OPEN_EVENT = 'ask-ai:open';
 
+/** What an `ask-ai:open` event carries. */
+export interface AskAiOpenDetail {
+  source: string;
+  /** A question to send as soon as the chat is open. Absent: the chat only opens. */
+  prompt?: string;
+}
+
 /**
- * Open the chat of `source`. Coalesced to '' so a source-less call still
- * matches the panel's own `runtime.source ?? ''` comparison (undefined !== ''
- * would make the panel silently ignore the event).
+ * Open the chat of `source`, and with `prompt` ask it that question once.
+ * `source` is coalesced to '' so a source-less call still matches the panel's
+ * own `runtime.source ?? ''` comparison (undefined !== '' would make the panel
+ * silently ignore the event).
  */
-export function openAskAi(source?: string): void {
-  window.dispatchEvent(new CustomEvent(ASK_AI_OPEN_EVENT, { detail: { source: source ?? '' } }));
+export function openAskAi(source?: string, options?: { prompt?: string }): void {
+  const prompt = options?.prompt?.trim();
+  const detail: AskAiOpenDetail = prompt ? { source: source ?? '', prompt } : { source: source ?? '' };
+  window.dispatchEvent(new CustomEvent<AskAiOpenDetail>(ASK_AI_OPEN_EVENT, { detail }));
 }
 
 /**
- * THE Mingo AI launcher, in the site header's right cluster and at the top of
- * the mobile menu (`variant="field"`): the round identity glyph, the
+ * THE Mingo AI launcher, in the site header's right cluster, inside a page
+ * (`variant="button"`: the FAQ's ask card, the head of a row of questions) and
+ * at the top of the mobile menu (`variant="field"`): the round identity glyph, the
  * assistant's name and an optional shortcut hint, sized like the menu items
  * beside it. Stateless: clicking dispatches an `ask-ai:open`
  * CustomEvent (source-filtered) that the mounted `EmbeddableChat` panel
@@ -75,6 +89,8 @@ export function MingoAiButton({
   // Known after hydration only: until then the hint keeps its space, empty.
   const visitor = useVisitorOs();
   const field = variant === 'field';
+  // In a page nothing collapses: there is no menu beside it to make room for.
+  const inPage = variant === 'button';
 
   const commandKey = visitor.known && usesCommandKey(visitor.os);
 
@@ -162,7 +178,10 @@ export function MingoAiButton({
       {/* In the header the name collapses below lg, with the menus: on a phone
           the launcher is its glyph alone (the name stays the accessible name). */}
       <span
-        className={cn('relative whitespace-nowrap', field ? 'min-w-0 flex-1 truncate' : 'hidden text-h6 lg:inline')}
+        className={cn(
+          'relative whitespace-nowrap',
+          field ? 'min-w-0 flex-1 truncate' : inPage ? 'text-h6' : 'hidden text-h6 lg:inline',
+        )}
       >
         {label}
       </span>
@@ -170,7 +189,12 @@ export function MingoAiButton({
         // A key cap in the label's own type (never smaller: a hint nobody can
         // read is decoration) and the label's colour, which clears 4.5:1 on
         // the bar. It keeps its width before the platform is known.
-        <kbd className="relative hidden h-6 min-w-9 items-center justify-center rounded border border-ods-border px-[var(--spacing-system-xxs)] text-h6 lg:inline-flex">
+        <kbd
+          className={cn(
+            'relative h-6 min-w-9 items-center justify-center rounded border border-ods-border px-[var(--spacing-system-xxs)] text-h6',
+            inPage ? 'inline-flex' : 'hidden lg:inline-flex',
+          )}
+        >
           {visitor.known ? shortcutLabel(visitor.os, 'K') : ''}
         </kbd>
       )}