Skip to main content
Compendium / Specs & Documents / Criteria & Constraints / Edge Case Tag
#304

Edge Case Tag

Chip flagging a known edge case attached to an AC — the failure-mode breadcrumb that travels with the criterion.

STABLE DO
#badge #real-content #dark-mode-tested #responsive
Live
EDGE AC-09 leap-second tick skips the cache TTL window
Spec

Intent

Specs collect edge cases as the spec matures. This chip pins one edge case to an AC so reviewers can trace why an "obvious" criterion grew the gnarly clause it now carries.

Acceptance Criteria

  • [ ] Triangle warning glyph + label
  • [ ] Carries originating AC reference
  • [ ] Short prose body (≤ 60 chars typical)
  • [ ] Negative: does NOT imply severity by itself (separate concern)
  • [ ] Pure markup
// edge-case-tag.astro
---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 304,
  slug: 'edge-case-tag',
  name: 'Edge Case Tag',
  category: 'specs-documents',
  subcategory: 'criteria-and-constraints',
  pillar: 'do',
  description: 'Chip flagging a known edge case attached to an AC — the failure-mode breadcrumb that travels with the criterion.',
  spec: `## Intent
Specs collect edge cases as the spec matures. This chip pins one edge case to an AC so reviewers can trace why an "obvious" criterion grew the gnarly clause it now carries.

## Acceptance Criteria
- [ ] Triangle warning glyph + label
- [ ] Carries originating AC reference
- [ ] Short prose body (≤ 60 chars typical)
- [ ] Negative: does NOT imply severity by itself (separate concern)
- [ ] Pure markup`,
  tags: ['badge', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 89, a11y: 'aa', themed: true, animated: false },
};

const tag = { ac: 'AC-09', text: 'leap-second tick skips the cache TTL window' };
---

<div data-this-component class="w-full flex justify-center overflow-hidden p-2">
  <div class="inline-flex items-stretch border-4 border-black bg-paper text-black max-w-full">
    <span class="bg-do text-black font-black flex items-center justify-center px-2 border-e-4 border-black">
      <svg viewBox="0 0 16 16" class="w-4 h-4" aria-hidden="true">
        <polygon points="8,2 15,14 1,14" fill="none" stroke="currentColor" stroke-width="2" />
        <line x1="8" y1="6" x2="8" y2="10" stroke="currentColor" stroke-width="2" />
        <circle cx="8" cy="12" r="1" fill="currentColor" />
      </svg>
    </span>
    <div class="px-2 py-1.5 flex items-baseline gap-2 min-w-0">
      <span class="font-mono text-[9px] uppercase tracking-widest font-black shrink-0">EDGE</span>
      <span class="font-mono text-[9px] uppercase tracking-widest opacity-60 shrink-0">{tag.ac}</span>
      <span class="text-[11px] leading-snug truncate">{tag.text}</span>
    </div>
  </div>
</div>