@pgcorp/ui-kit 0.3.0 → 0.4.0

package/README.md

@@ -113,6 +113,42 @@ TypeScript показывают доступные subpaths при импорт
 The complete machine-readable catalog is declared in `package.json#exports`.
 IDEs and TypeScript expose the available subpaths during import.
 
+### Реестры и свободный ввод / Registries and custom values
+
+`STable` владеет служебными колонками выбора и раскрытия. Consumer передаёт
+controlled keys и доменный контент, не копирует checkbox, disclosure или CSS:
+
+`STable` owns selection and disclosure columns. Consumers provide controlled
+keys and domain content instead of copying checkboxes, disclosures, or CSS:
+
+```vue
+<STable
+  v-model:selected-row-keys="selectedRowKeys"
+  v-model:expanded-row-keys="expandedRowKeys"
+  :columns="columns"
+  :data="rows"
+  :get-row-key="(row) => row.id"
+  :get-row-label="(row) => row.name"
+  selection-mode="multiple"
+  aria-label="Поставщики"
+  @row-contextmenu="openRowMenu"
+>
+  <template #row-details="{ row }">
+    <SupplierDetails :supplier="row" />
+  </template>
+</STable>
+```
+
+Для служебных столбцов доступны `headerPresentation: 'assistive'`,
+`width: '2xs'` и `width: 'content'`. `SCombobox` принимает новое строковое
+значение через `allow-custom-value`; `SPageHeader` сочетает `appearance="bare"`
+с `title-presentation="assistive"` для доступного заголовка без визуальной полосы.
+
+Utility columns support `headerPresentation: 'assistive'`, `width: '2xs'`, and
+`width: 'content'`. `SCombobox` accepts a new string value with
+`allow-custom-value`; `SPageHeader` combines `appearance="bare"` with
+`title-presentation="assistive"` for an accessible zero-chrome heading.
+
 ## Темы и стили / Themes and styles
 
 Для обычного приложения подключайте полный style entrypoint один раз:

package/docs/public-api.md

@@ -18,6 +18,10 @@
 
 Компонентный contract выражается через typed props, slots, events и exposed
 methods. Внутренний DOM, CSS-классы и private modules не являются API.
+Публичные source-SFC объявляют runtime props и events локально: consumer Vue
+compiler регистрирует их без межфайлового filesystem type resolver.
+Публикуемый production-source компилируется с `target/lib: ES2020`, совпадающим
+с baseline `@vue/tsconfig/tsconfig.dom.json`, и не требует скрытых полифиллов.
 
 ## English
 
@@ -37,3 +41,7 @@ Primary groups:
 
 Component contracts are expressed through typed props, slots, events, and exposed
 methods. Internal DOM, CSS classes, and private modules are not API.
+Public source SFCs declare runtime props and events locally, so the consumer Vue
+compiler registers them without a cross-file filesystem type resolver.
+Published production source compiles with the `target/lib: ES2020` baseline from
+`@vue/tsconfig/tsconfig.dom.json` and does not require implicit polyfills.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pgcorp/ui-kit",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Typed Vue 3 design system with accessible components, semantic themes, and workbench patterns.",
   "type": "module",
   "types": "./index.ts",

package/src/components/layout/SAppShell.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, getCurrentInstance, useSlots } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
+import { hasOwn } from '../../internal/es2020'
 import { useOwnedAttrs } from '../../internal/ownedAttrs'
 import { validateNonEmptyString } from '../../internal/runtimeContract'
 import SBadge from '../shared/data-display/SBadge.vue'
@@ -98,8 +99,8 @@ function toKebabCase(value: string): string {
 function hasExplicitProp(propName: string): boolean {
   const vnodeProps = componentInstance.vnode.props
   return vnodeProps !== null && (
-    Object.hasOwn(vnodeProps, propName)
-    || Object.hasOwn(vnodeProps, toKebabCase(propName))
+    hasOwn(vnodeProps, propName)
+    || hasOwn(vnodeProps, toKebabCase(propName))
   )
 }
 

package/src/components/shared/complex/STree.vue

@@ -32,8 +32,36 @@
   </ul>
 </template>
 
+<script lang="ts">
+import type {
+  SelectionKey,
+  TreeActionsLayout,
+  TreeDensity,
+  TreeExpandControl,
+  TreeModel,
+  TreeRowVariant,
+  TreeSelection,
+  TreeSelectionRail,
+} from './types'
+
+/** Публичный контракт дерева принадлежит source-SFC runtime. / The public tree contract is owned by the source-SFC runtime. */
+export interface STreeProps<T extends object, K extends SelectionKey = SelectionKey> {
+  nodes: readonly T[]
+  model: TreeModel<T, K>
+  label: string
+  selection: TreeSelection<K>
+  expanded?: ReadonlySet<K>
+  density?: TreeDensity
+  actionsLayout?: TreeActionsLayout
+  expandControl?: TreeExpandControl
+  selectionRail?: TreeSelectionRail
+  rowVariant?: TreeRowVariant
+}
+</script>
+
 <script setup lang="ts" generic="T extends object, K extends SelectionKey">
 import { computed, nextTick, provide, ref, watch } from 'vue'
+import { lastItem } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import { assertSelectionKey, selectionKeyToken } from '../_internal/useSelectionRoving'
 import STreeNode from '../_internal/STreeNode.vue'
@@ -46,12 +74,9 @@ import {
 import { validateTreeModel } from './treeAdapter'
 import type {
   STreeNodeContentScope,
-  STreeProps,
-  SelectionKey,
   TreeActivationOrigin,
   TreeNodeActivationEvent,
   TreeNodeEvent,
-  TreeSelection,
 } from './types'
 
 defineOptions({ inheritAttrs: false })
@@ -172,7 +197,7 @@ function handleTreeItemKeydown(item: RegisteredTreeItem<T, K>, event: KeyboardEv
   }
   if (event.key === 'End') {
     event.preventDefault()
-    void focusItem(items.at(-1))
+    void focusItem(lastItem(items))
     return
   }
   if (event.key === 'ArrowRight' && item.hasChildren()) {

package/src/components/shared/complex/treeAdapter.ts

@@ -5,6 +5,7 @@ import {
   type SelectionIdentity,
   type SelectionKey,
 } from '../_internal/useSelectionRoving'
+import { withErrorCause } from '../../../internal/es2020'
 import type { TreeModel } from './types'
 
 export interface FlatTreeAdapter<T extends object, K extends SelectionKey> {
@@ -130,7 +131,7 @@ function readModelValue<R>(
   try {
     return reader()
   } catch (error) {
-    throw new TypeError(`STree: model.${field} failed at ${coordinate}`, { cause: error })
+    throw withErrorCause(new TypeError(`STree: model.${field} failed at ${coordinate}`), error)
   }
 }
 

package/src/components/shared/complex/types.ts

@@ -51,18 +51,7 @@ export type TreeExpandControl = 'button' | 'row'
 export type TreeSelectionRail = 'hidden' | 'visible'
 export type TreeRowVariant = 'default' | 'table'
 
-export interface STreeProps<T extends object, K extends SelectionKey = SelectionKey> {
-  nodes: readonly T[]
-  model: TreeModel<T, K>
-  label: string
-  selection: TreeSelection<K>
-  expanded?: ReadonlySet<K>
-  density?: TreeDensity
-  actionsLayout?: TreeActionsLayout
-  expandControl?: TreeExpandControl
-  selectionRail?: TreeSelectionRail
-  rowVariant?: TreeRowVariant
-}
+export type { STreeProps } from './STree.vue'
 
 export interface TreeNodeEvent<T extends object, K extends SelectionKey = SelectionKey> {
   node: T

package/src/components/shared/containers/SLeftSidebar.vue

@@ -33,7 +33,7 @@ import { type FunctionalComponent, type HTMLAttributes, type VNodeProps } from '
 import SPanel from './SPanel.vue';
 import SSidebarGroup from './SSidebarGroup.vue';
 import type { SAsyncStateContract } from '../feedback/SAsyncState.vue';
-import type { SidebarGroupEmits, SidebarSectionsState } from './sidebar';
+import type { SidebarSectionsState } from './sidebar';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
 
 defineOptions({ inheritAttrs: false });
@@ -48,6 +48,11 @@ export interface Props {
   scrollBehavior?: 'auto' | 'body' | 'self' | 'child';
 }
 
+interface Emits {
+  'update-sections': [state: SidebarSectionsState];
+  'toggle-section': [key: string];
+}
+
 withDefaults(defineProps<Props>(), {
   title: undefined,
   icon: undefined,
@@ -56,7 +61,7 @@ withDefaults(defineProps<Props>(), {
   scrollBehavior: 'child',
 });
 
-const emit = defineEmits<SidebarGroupEmits>();
+const emit = defineEmits<Emits>();
 const ownedAttrs = useOwnedAttrs({ component: 'SLeftSidebar', owner: 'left-sidebar root' });
 </script>
 

package/src/components/shared/containers/SPageHeader.css

@@ -19,6 +19,11 @@
   @apply px-0 pt-0;
 }
 
+.s-page-header[data-appearance='bare'] {
+  @apply border-0 bg-transparent p-0 shadow-none dark:bg-transparent;
+  border-radius: 0;
+}
+
 .s-page-header__copy {
   @apply min-w-0;
 }

package/src/components/shared/containers/SPageHeader.vue

@@ -8,7 +8,7 @@ withDefaults(defineProps<{
   description?: string
   eyebrow?: string
   headingLevel?: 1 | 2 | 3
-  appearance?: 'plain' | 'panel'
+  appearance?: 'bare' | 'plain' | 'panel'
   size?: 'compact' | 'default'
   actionsLayout?: 'responsive' | 'inline' | 'stacked'
   titlePresentation?: 'visible' | 'assistive'

package/src/components/shared/containers/SPopover.vue

@@ -93,6 +93,7 @@ import SButton, {
 } from '../controls/SButton.vue';
 import { useFloatingPosition, type FloatingPlacement } from '../../../composables/useFloatingPosition';
 import { findRelativeTabTarget, getFocusableElements } from '../../../internal/focusNavigation';
+import { lastItem } from '../../../internal/es2020';
 import { resolveInteractiveElement } from '../../../internal/interactiveElement';
 import { registerLayer, type LayerRegistration } from '../../../internal/layerStack';
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
@@ -495,7 +496,7 @@ function handlePanelTab(event: KeyboardEvent): void {
   const focusable = getFocusableElements(panel);
   const active = document.activeElement;
   const first = focusable[0];
-  const last = focusable.at(-1);
+  const last = lastItem(focusable);
   const leavesPanel = focusable.length === 0
     || (event.shiftKey ? active === panel || active === first : active === last);
   if (!leavesPanel) return;

package/src/components/shared/containers/SSidebarGroup.vue

@@ -16,6 +16,7 @@ import {
 } from 'vue';
 
 import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import { hasOwn, lastItem } from '../../../internal/es2020';
 import {
   sidebarGroupContextKey,
   type RegisteredSidebarSection,
@@ -27,7 +28,6 @@ import {
   createSidebarSectionsTransition,
   sidebarSectionsStateEqual,
   type SectionState,
-  type SidebarGroupEmits,
   type SidebarSectionReplacement,
   type SidebarSectionsState,
 } from './sidebar';
@@ -38,7 +38,12 @@ const props = defineProps<{
   sectionsState: SidebarSectionsState;
 }>();
 
-const emit = defineEmits<SidebarGroupEmits>();
+interface Emits {
+  'update-sections': [state: SidebarSectionsState];
+  'toggle-section': [key: string];
+}
+
+const emit = defineEmits<Emits>();
 
 const ownedAttrs = useOwnedAttrs({ component: 'SSidebarGroup', owner: 'sidebar group root' });
 const groupRef = ref<HTMLDivElement | null>(null);
@@ -147,7 +152,7 @@ function fitOpenSectionSizes(
 
   let delta = targetSize - [...sizes.values()].reduce((sum, size) => sum + size, 0);
   if (delta > 0) {
-    const growTarget = flexible ?? openSections.at(-1);
+    const growTarget = flexible ?? lastItem(openSections);
     if (growTarget) sizes.set(growTarget.key, sizes.get(growTarget.key)! + delta);
     delta = 0;
   }
@@ -200,7 +205,7 @@ function registerSection(registration: SidebarSectionRegistration): () => void {
   if (!(registration.element instanceof HTMLElement)) {
     throw new TypeError('SSidebarGroup: registered section element must be an HTMLElement');
   }
-  if (!Object.hasOwn(currentState(), registration.key)) {
+  if (!hasOwn(currentState(), registration.key)) {
     throw new Error(`SSidebarGroup: registered section '${registration.key}' has no controlled state`);
   }
   if (registrations.value.some((current) => current.key === registration.key)) {
@@ -371,7 +376,7 @@ function resizeSections(topKey: string, bottomKey: string, requestedTopSize: num
   );
   const delta = requestedTopSize - currentUpperSize;
   const shrinking = delta > 0 ? [...lower] : [...upper].reverse();
-  const growing = delta > 0 ? upper.at(-1) : lower[0];
+  const growing = delta > 0 ? lastItem(upper) : lower[0];
   let transferable = Math.abs(delta);
   transferable = Math.min(
     transferable,

package/src/components/shared/containers/sidebar.ts

@@ -163,7 +163,7 @@ export function createSidebarSectionsTransition(
     if (typeof replacement.key !== 'string' || replacement.key.trim().length === 0) {
       throw new TypeError(`SSidebarGroup: replacements[${index}].key must be a non-empty string`);
     }
-    if (!Object.hasOwn(current, replacement.key)) {
+    if (!hasOwn(current, replacement.key)) {
       throw new Error(`SSidebarGroup: cannot replace unknown section '${replacement.key}'`);
     }
     if (replacementsByKey.has(replacement.key)) {
@@ -204,3 +204,4 @@ export function sidebarSectionsStateEqual(
       && leftSection.minSize === rightSection.minSize;
   });
 }
+import { hasOwn } from '../../../internal/es2020';

package/src/components/shared/controls/SButton.vue

@@ -72,8 +72,8 @@ import { useTreeActionRegistration } from '../_internal/treeRuntime'
 import SBadge, { type BadgeSeverity } from '../data-display/SBadge.vue'
 import SProgressIndicator, { type SProgressIndicatorSize } from '../data-display/SProgressIndicator.vue'
 import type {
-  HrefLinkDestination,
-  RouterLinkDestination,
+  LinkBrowsingTarget,
+  LinkRouterTarget,
 } from './SLink'
 
 defineOptions({ inheritAttrs: false })
@@ -132,9 +132,14 @@ export type SButtonActionProps = SButtonPresentationProps & {
   type?: SButtonNativeType
 }
 
-export type SButtonNavigationProps = SButtonPresentationProps & (
-  | (HrefLinkDestination & { type?: never })
-  | (RouterLinkDestination & { type?: never })
+interface SButtonNavigationOptions {
+  target?: LinkBrowsingTarget
+  rel?: string
+}
+
+export type SButtonNavigationProps = SButtonPresentationProps & SButtonNavigationOptions & (
+  | { href: string; to?: never; type?: never }
+  | { href?: never; to: LinkRouterTarget; type?: never }
 )
 
 /** Strict action/navigation XOR with a shared button presentation. */

package/src/components/shared/controls/SCombobox.vue

@@ -62,7 +62,7 @@ export type SComboboxOptionGroup<TKey extends PublicSelectionKey = PublicSelecti
 export type SComboboxEntry<TKey extends PublicSelectionKey = PublicSelectionKey> = PublicSelectionEntry<TKey>
 export type SComboboxFilterMode = 'local' | 'manual'
 
-export interface Props<TKey extends PublicSelectionKey = PublicSelectionKey> {
+interface SharedProps<TKey extends PublicSelectionKey> {
   modelValue: TKey | null
   search: string
   options: readonly SComboboxEntry<TKey>[]
@@ -79,6 +79,18 @@ export interface Props<TKey extends PublicSelectionKey = PublicSelectionKey> {
   id?: string
   size?: 'sm' | 'md' | 'lg'
 }
+
+/**
+ * Custom values require a string-compatible model because the editable text is the committed identity.
+ * Свободные значения требуют string-compatible model, потому что введённый текст становится identity.
+ */
+export type Props<TKey extends PublicSelectionKey = PublicSelectionKey> = SharedProps<TKey> & {
+  allowCustomValue?: string extends TKey ? boolean : false
+}
+
+type ComponentProps<TKey extends PublicSelectionKey> = SharedProps<TKey> & {
+  allowCustomValue?: boolean
+}
 </script>
 
 <script setup lang="ts" generic="TKey extends SelectionKey = string">
@@ -106,7 +118,7 @@ import SListbox, { type SListboxMoveIntent } from './SListbox.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<Props<TKey>>(), {
+const props = withDefaults(defineProps<ComponentProps<TKey>>(), {
   filterMode: 'local',
   label: undefined,
   placeholder: 'Начните вводить для поиска',
@@ -119,6 +131,7 @@ const props = withDefaults(defineProps<Props<TKey>>(), {
   emptyLabel: 'Нет доступных вариантов',
   id: undefined,
   size: 'md',
+  allowCustomValue: false,
 })
 const emit = defineEmits<{
   'update:modelValue': [value: TKey | null]
@@ -156,13 +169,18 @@ const contract = computed(() => ({
   invalid: validateBoolean('SCombobox', 'invalid', props.invalid),
   emptyLabel: validateNonEmptyString('SCombobox', 'emptyLabel', props.emptyLabel),
   size: validateExactString('SCombobox', 'size', props.size, ['sm', 'md', 'lg'] as const),
+  allowCustomValue: validateBoolean('SCombobox', 'allowCustomValue', props.allowCustomValue),
   label: validateOptionalSelectionString('SCombobox', 'label', props.label),
   helpText: validateOptionalSelectionString('SCombobox', 'helpText', props.helpText),
   errorMessage: validateOptionalSelectionString('SCombobox', 'errorMessage', props.errorMessage),
 }))
 const inventory = computed(() => {
   const resolved = resolveSelectionInventory<TKey>('SCombobox', props.options)
-  validateSelectionModel('SCombobox', 'single', props.modelValue, resolved)
+  if (contract.value.allowCustomValue && typeof props.modelValue === 'string') {
+    selectionKeyToken('SCombobox', props.modelValue, 'modelValue')
+  } else {
+    validateSelectionModel('SCombobox', 'single', props.modelValue, resolved)
+  }
   return resolved
 })
 
@@ -231,6 +249,29 @@ const { anchorRef, panelRef, floatingStyle } = useFloatingPosition({
 
 type CloseReason = 'selection' | 'escape' | 'tab' | 'outside'
 
+function customValueFromSearch(): TKey | null {
+  if (!contract.value.allowCustomValue) return null
+  const value = validatedSearch.value.trim()
+  if (value.length === 0) return null
+
+  if (props.modelValue !== null) {
+    const currentToken = selectionKeyToken('SCombobox', props.modelValue, 'modelValue')
+    const currentOption = inventory.value.optionsByToken.get(currentToken)
+    if (currentOption?.option.label.trim() === value) return null
+    if (typeof props.modelValue === 'string' && props.modelValue === value) return null
+  }
+
+  return value as TKey
+}
+
+function commitCustomValue(): boolean {
+  const value = customValueFromSearch()
+  if (value === null) return false
+  emit('update:modelValue', value)
+  emit('update:search', String(value))
+  return true
+}
+
 function inputElement(): HTMLInputElement {
   const api = inputRef.value
   if (!api) throw new Error('SCombobox: SInputText API is unavailable')
@@ -239,7 +280,7 @@ function inputElement(): HTMLInputElement {
 
 function close(reason: CloseReason): void {
   if (!isOpen.value) return
-  void reason
+  if (reason === 'tab' || reason === 'outside') commitCustomValue()
   isOpen.value = false
   activeValue.value = null
   layerRegistration?.unregister({ restoreFocus: false })
@@ -305,7 +346,8 @@ async function onInputKeydown(event: KeyboardEvent): Promise<void> {
   }
   if (event.key === 'Enter' && isOpen.value) {
     event.preventDefault()
-    listboxRef.value?.selectActive()
+    if (activeValue.value !== null) listboxRef.value?.selectActive()
+    else if (commitCustomValue()) close('selection')
     return
   }
   if (event.key === 'Escape' && isOpen.value) {

package/src/components/shared/controls/SInteractiveSurface.vue

@@ -2,6 +2,7 @@
 import { computed, watchEffect, type VNodeChild } from 'vue'
 import { RouterLink, type RouteLocationRaw } from 'vue-router'
 import type { STooltipTriggerBinding } from '../data-display/STooltip.vue'
+import { hasOwn } from '../../../internal/es2020'
 import { resolveLinkTarget } from '../../../internal/linkTarget'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import {
@@ -195,7 +196,7 @@ const validatedTooltipTrigger = computed<STooltipTriggerBinding | undefined>(()
   }
   const record = candidate as Record<string, unknown>
   const unexpected = Object.keys(record).filter((key) => !TOOLTIP_TRIGGER_KEYS.includes(key as typeof TOOLTIP_TRIGGER_KEYS[number]))
-  const missing = TOOLTIP_TRIGGER_KEYS.filter((key) => !Object.hasOwn(record, key))
+  const missing = TOOLTIP_TRIGGER_KEYS.filter((key) => !hasOwn(record, key))
   if (unexpected.length > 0 || missing.length > 0) {
     throw new Error(`SInteractiveSurface: tooltipTrigger имеет недопустимый набор ключей; missing=${missing.join(',')}; unexpected=${unexpected.join(',')}. / SInteractiveSurface: tooltipTrigger has an invalid key set; missing=${missing.join(',')}; unexpected=${unexpected.join(',')}.`)
   }

package/src/components/shared/controls/SLink.ts

@@ -1,4 +1,3 @@
-import type { Component } from 'vue'
 import type {
   HistoryState,
   LocationQueryRaw,
@@ -67,19 +66,4 @@ export type RouterLinkDestination = LinkDestinationOptions & {
 /** Строгий XOR-контракт обычного destination. / Strict XOR contract for an ordinary destination. */
 export type LinkDestination = HrefLinkDestination | RouterLinkDestination
 
-/** Canonical presentation/state API owned by SLink. */
-export interface LinkPresentationProps {
-  readonly variant?: 'default' | 'subtle' | 'brand' | 'navigation' | 'bottom-navigation' | 'document'
-  readonly external?: boolean
-  readonly active?: boolean
-  readonly disabled?: boolean
-  readonly width?: 'fit' | 'full'
-  readonly size?: 'inherit' | 'sm' | 'md'
-  readonly underline?: 'hover' | 'always' | 'none'
-  readonly wrap?: 'normal' | 'anywhere'
-  readonly contentKind?: 'text' | 'identifier'
-  readonly leadingIcon?: Component
-}
-
-/** Полный discriminated public props contract SLink. / Complete discriminated public SLink props contract. */
-export type SLinkProps = LinkDestination & LinkPresentationProps
+export type { LinkPresentationProps, Props as SLinkProps } from './SLink.vue'

package/src/components/shared/controls/SLink.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  type Component,
   computed,
   type VNodeChild,
 } from 'vue'
@@ -12,13 +13,36 @@ import {
   type PassiveContentContract,
 } from '../../../internal/passiveContentContract'
 import type {
-  SLinkProps,
+  LinkBrowsingTarget,
+  LinkRouterTarget,
 } from './SLink'
 
 defineOptions({ inheritAttrs: false })
 
+/** Canonical presentation/state API owned by SLink. */
+export interface LinkPresentationProps {
+  readonly variant?: 'default' | 'subtle' | 'brand' | 'navigation' | 'bottom-navigation' | 'document'
+  readonly external?: boolean
+  readonly active?: boolean
+  readonly disabled?: boolean
+  readonly width?: 'fit' | 'full'
+  readonly size?: 'inherit' | 'sm' | 'md'
+  readonly underline?: 'hover' | 'always' | 'none'
+  readonly wrap?: 'normal' | 'anywhere'
+  readonly contentKind?: 'text' | 'identifier'
+  readonly leadingIcon?: Component
+}
+
+interface LinkDestinationOptions {
+  readonly target?: LinkBrowsingTarget
+  readonly rel?: string
+}
+
 /** Exact href/to XOR plus the canonical link presentation API. */
-export type Props = SLinkProps
+export type Props = LinkPresentationProps & LinkDestinationOptions & (
+  | { readonly href: string; readonly to?: never }
+  | { readonly href?: never; readonly to: LinkRouterTarget }
+)
 
 const props = withDefaults(defineProps<Props>(), {
   href: undefined,

package/src/components/shared/data-display/SDocBlock.vue

@@ -88,20 +88,20 @@ useInteractiveLeafRegistration({ owner: 'SDocBlock' });
 
 function escapeHighlightedCode(code: string): string {
   return code
-    .replaceAll('&', '&')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&#39;');
+    .replace(/&/gu, '&amp;')
+    .replace(/</gu, '&lt;')
+    .replace(/>/gu, '&gt;')
+    .replace(/"/gu, '&quot;')
+    .replace(/'/gu, '&#39;');
 }
 
 function escapeHtmlAttribute(value: string): string {
   return value
-    .replaceAll('&', '&amp;')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&#39;');
+    .replace(/&/gu, '&amp;')
+    .replace(/</gu, '&lt;')
+    .replace(/>/gu, '&gt;')
+    .replace(/"/gu, '&quot;')
+    .replace(/'/gu, '&#39;');
 }
 
 const markdownRenderer = new marked.Renderer();

package/src/components/shared/data-display/SLinkedSystemsList.vue

@@ -113,6 +113,7 @@ export interface Slots<T extends LinkedSystemListItem = LinkedSystemListItem> {
 
 <script setup lang="ts" generic="T extends LinkedSystemListItem = LinkedSystemListItem">
 import { computed, watchEffect } from 'vue'
+import { withErrorCause } from '../../../internal/es2020'
 import { useOwnedAttrs } from '../../../internal/ownedAttrs'
 import {
   validateBoolean,
@@ -169,11 +170,10 @@ function validateExternalUrl(value: unknown, index: number): void {
   try {
     parsedUrl = new URL(externalUrl)
   } catch (error: unknown) {
-    throw new TypeError(
+    throw withErrorCause(new TypeError(
       `SLinkedSystemsList: ${coordinate} должен быть абсолютным HTTP(S) URL или null; получено ${JSON.stringify(externalUrl)}. `
       + `/ SLinkedSystemsList: ${coordinate} must be an absolute HTTP(S) URL or null; received ${JSON.stringify(externalUrl)}.`,
-      { cause: error },
-    )
+    ), error)
   }
   if (
     (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:')