@sltsh/site-mark

The SLT site mark is a small provenance mark for public SLT product sites. It shows the SLT glyph and the label slt.sh:/, and links the whole mark to https://slt.sh/ in the current tab. It is not a status badge, menu or general-purpose widget.

The package is a dependency-free native custom element. It makes no network requests and uses no storage, timers, observers or global listeners.

The implementation, tests and documentation are available under the MIT License. The SLT name and glyph are reserved brand assets with separate terms in BRAND.md.

Family guides

This package documents only its own contract. The family brand and motion rules stay in the canonical guides, which this package does not copy:

• SLT brand design
• SLT family motion

Adopting the mark does not authorize shell styling elsewhere in a product. Each product keeps its own content, navigation, voice, typography and motion.

Installation

npm install @sltsh/site-mark

Import the registration entry once, then place the element:

import "@sltsh/site-mark/register";

<slt-site-mark></slt-site-mark>

The entry is marked as a side effect, so bundlers keep the registration. Importing it in Node or a server-rendered environment without DOM globals is safe and does nothing. Importing it again in a browser, or when slt-site-mark is already defined, is safe and keeps the existing definition.

If registration never runs, the empty element has no box and no link. The host page stays complete.

Interface

| Part | Value | | ------------------------ | ---------------------------------------------------------------------------- | | Entry point | @sltsh/site-mark/register | | Element | <slt-site-mark> | | Attribute | placement="fixed" or placement="inline" | | Custom properties | --slt-site-mark-bottom, --slt-site-mark-right, --slt-site-mark-z-index | | Standard HTML attributes | hidden, class, style |

Nothing else is configurable. The link, label, glyph, colors, sizes, typography and states are fixed. The element has an open shadow root for inspection and for this package's tests. The shadow internals are not a supported interface.

Placement

A missing or invalid placement value resolves to fixed. Only the exact values fixed and inline are valid.

Fixed places the mark at the bottom-right corner of the viewport.

• Default offsets are 20px plus the safe-area inset. Below a 600px viewport width they are 16px plus the safe-area inset.
• The default stacking level is 40: above ordinary content and below modal dialogs, menus, consent notices and other blocking interfaces.
• Fixed placement causes no document layout shift.

Override the offsets and stacking level with the placement custom properties:

slt-site-mark {
  --slt-site-mark-bottom: calc(76px + env(safe-area-inset-bottom));
  --slt-site-mark-right: calc(20px + env(safe-area-inset-right));
  --slt-site-mark-z-index: 40;
}

The consuming project owns collision review. The mark must not cover primary controls, persistent navigation, legal notices, chat launchers or required content. Adjust --slt-site-mark-bottom for a persistent bottom bar. The package has no collision detection.

Inline (placement="inline") participates in normal flow. It applies no fixed offsets and no surrounding margin. Use it when every fixed corner is occupied, or in a footer.

The mark is 44px high and at least 120px wide. It is about 127px wide with the default monospace font. If an inline mark upgrade shifts visible content in a consumer, reserve that footprint in the consumer. The package adds no global CSS.

Visual and interaction contract

| Property | Value | | ------------------- | ------------------------------------------------------------------- | | Height | 44px including a 1px boundary | | Width | At least 120px, about 127px with the cursor gap | | Padding | 10px horizontal | | Glyph | 24px square, 9px gap to the label | | Cursor gap | One monospace character space (1ch) after the label | | Label | slt.sh:/, 13px monospace, no forced case or tracking | | Field | #11151c, opaque | | Label and structure | #e2e8f3 | | Cursor and focus | #e4c058 | | Glyph accent | #59cdc8 | | Boundary at rest | rgba(226, 232, 243, 0.22), raised to #e2e8f3 on hover and focus | | Content at rest | 0.72 opacity, or 0.88 when (hover: none) |

The field is opaque and the host and link are never faded, so contrast does not depend on the host page. Hover and keyboard focus raise the content to full opacity and reveal a static 2px gold cursor one character space after the label. The gap and the cursor slot are reserved at rest, so the mark never changes size. The cursor never blinks, types or loops.

Transitions use the host's --slt-motion-feedback and --slt-ease-out when defined, and fall back to 160ms and cubic-bezier(.22, 1, .36, 1). With prefers-reduced-motion: reduce there is no transition and the state commits at once. A live preference change applies without a reload. In forced-colors mode the mark uses system colors.

Accessibility

• The whole mark is one real anchor with the accessible name An SLT project — visit slt.sh.
• The SVG glyph and the cursor are aria-hidden.
• Activation is ordinary anchor behavior. The package does not intercept navigation or open a new tab.
• The mark is one tab stop. :focus-visible draws a 2px gold outline with a 3px offset and a 2px dark outer ring, so keyboard focus remains visible on light host pages.
• The target is at least 44px high in both placements.

Asset provenance

The glyph is embedded as three inline SVG paths in the viewBox 350 360 555 535, copied unchanged from the #slt-glyph definition in the slt.sh site's index.html. The fills are the canonical values: #e2e8f3 for the main stroke, #59cdc8 for the teal accent and #e4c058 for the gold accent. The package ships no raster image, redraws nothing, recolors nothing with a filter and requests no font: it prefers an installed SLT Mono face and falls back to a system monospace stack.

License

The implementation, tests and documentation are licensed under the MIT License. The SLT name and glyph are excluded from that grant. Their permitted use is defined in BRAND.md.

Validation

Requires Node 24. Playwright browsers must be installed for the browser tests.

npm install
npm run typecheck
npm test
npm run pack:audit

• npm test builds, then runs the Node tests and the Playwright tests. The Node tests cover import without DOM globals, idempotent registration, tree shaking and the packed file list. The Playwright tests use the public element in Chromium, Firefox and WebKit.
• npm run demo serves demo/ at http://127.0.0.1:4183/demo/. The demo has light, dark, dense and long-page hosts, with fixed, inline and custom bottom-offset examples.
• Real device safe-area values, rendered contrast on busy surfaces, forced colors and the packed install in a consumer need review outside these tests.