CornerOverlay

Usage

Clickable Overlay Content

The overlay is pointer-events: none by default. Set overlayPointerEvents="auto" only when the overlay itself must receive pointer input.

<template>
  <TxCornerOverlay overlay-pointer-events="auto" :offset-x="-4" :offset-y="-4">
    <TxAvatar :src="avatarUrl" />
    <template #overlay>
      <button type="button" aria-label="Open profile actions">•••</button>
    </template>
  </TxCornerOverlay>
</template>

CSS Offset Values

<template>
  <TxCornerOverlay offset-x="calc(100% - 12px)" offset-y="-0.25rem">
    <span>Base</span>
    <template #overlay>
      <TxBadge value="New" />
    </template>
  </TxCornerOverlay>
</template>

String offsets are preserved. Numeric offsets are converted to pixels.

Best Practices

• Keep overlays decorative by default; aria-hidden means important status should also be represented in nearby text or labels.
• Use negative offsets for badges that sit partly outside avatars or thumbnails.
• Set overlayPointerEvents="auto" only for intentional interactive overlays, and provide a semantic control inside the slot.
• Avoid large overlay content. This component is designed for small marks, not popovers or menus.
• Keep the base content's size stable; the overlay is positioned absolutely and does not reserve layout space.

API Reference

Props

Slots

Events

No public events are emitted.

Exposed Methods

No public instance methods are exposed.

Overview

• The root renders an inline-block span with position: relative.
• The overlay is rendered only when the overlay slot exists.
• The overlay layer is absolutely positioned; while decorative (overlayPointerEvents="none", the default) it is marked aria-hidden="true", and with overlayPointerEvents="auto" it is exposed so a focusable control inside stays reachable.
• placement selects which x/y inset pair is written: top/left, top/right, bottom/left, or bottom/right.
• offsetX controls left or right; offsetY controls top or bottom.
• Number offsets become pixel values, while string offsets are passed through as-is.
• overlayPointerEvents maps directly to the overlay style.
• No click, focus, or keyboard behavior is added by the component.

Technologies

• Reviewed against packages/tuffex/packages/components/src/corner-overlay/src/types.ts, TxCornerOverlay.vue, and corner-overlay.test.ts.
• The overlay slot is conditional and aria-hidden only while decorative (overlayPointerEvents="none"); overlayPointerEvents="auto" exposes it so an interactive control is reachable. Product-critical status still needs text or a labeled control outside a decorative layer.
• overlayPointerEvents="auto" only forwards CSS pointer behavior. The slotted control owns all keyboard, focus, and label semantics.
• Component source: packages/tuffex/packages/components/src/corner-overlay/src/TxCornerOverlay.vue.
• Types: packages/tuffex/packages/components/src/corner-overlay/src/types.ts.
• Verified coverage: Coverage: packages/tuffex/packages/components/src/corner-overlay/__tests__/corner-overlay.test.ts verifies absent overlay rendering, aria-hidden overlay output, default placement, placement-to-inset styles, string offsets, and pointer-event forwarding.