@ponchia/ui 0.6.4 → 0.6.6

package/classes/index.d.ts

@@ -263,16 +263,69 @@ export declare const cls: {
   readonly reportMeta: 'ui-report__meta';
   readonly reportToc: 'ui-report__toc';
   readonly reportSummary: 'ui-report__summary';
+  readonly reportDecision: 'ui-report__decision';
+  readonly reportDecisionKicker: 'ui-report__decision-kicker';
+  readonly reportDecisionTitle: 'ui-report__decision-title';
+  readonly reportDecisionBody: 'ui-report__decision-body';
+  readonly reportDecisionMeta: 'ui-report__decision-meta';
+  readonly reportDecisionGrid: 'ui-report__decision-grid';
+  readonly reportDecisionItem: 'ui-report__decision-item';
+  readonly reportDecisionLabel: 'ui-report__decision-label';
+  readonly reportDecisionValue: 'ui-report__decision-value';
   readonly reportSection: 'ui-report__section';
   readonly reportSectionUnnumbered: 'ui-report__section--unnumbered';
   readonly reportSectionHead: 'ui-report__section-head';
   readonly reportFinding: 'ui-report__finding';
+  readonly reportFindingCritical: 'ui-report__finding--critical';
+  readonly reportFindingMajor: 'ui-report__finding--major';
+  readonly reportFindingMinor: 'ui-report__finding--minor';
+  readonly reportFindingResolved: 'ui-report__finding--resolved';
+  readonly reportFindingTitle: 'ui-report__finding-title';
+  readonly reportFindingClaim: 'ui-report__finding-claim';
+  readonly reportFindingImpact: 'ui-report__finding-impact';
+  readonly reportFindingRemediation: 'ui-report__finding-remediation';
+  readonly reportFindingEvidence: 'ui-report__finding-evidence';
+  readonly reportFindingCaveat: 'ui-report__finding-caveat';
   readonly reportEvidence: 'ui-report__evidence';
   readonly reportFigure: 'ui-report__figure';
   readonly reportCaption: 'ui-report__caption';
   readonly reportSources: 'ui-report__sources';
   readonly reportAppendix: 'ui-report__appendix';
   readonly reportFootnotes: 'ui-report__footnotes';
+  readonly reportActions: 'ui-report__actions';
+  readonly reportAction: 'ui-report__action';
+  readonly reportActionStatus: 'ui-report__action-status';
+  readonly reportActionTitle: 'ui-report__action-title';
+  readonly reportActionOwner: 'ui-report__action-owner';
+  readonly reportActionDue: 'ui-report__action-due';
+  readonly reportActionPriority: 'ui-report__action-priority';
+  readonly reportActionCriteria: 'ui-report__action-criteria';
+  readonly reportActionSource: 'ui-report__action-source';
+  readonly claim: 'ui-claim';
+  readonly claimSupported: 'ui-claim--supported';
+  readonly claimPartial: 'ui-claim--partial';
+  readonly claimDisputed: 'ui-claim--disputed';
+  readonly claimUnsupported: 'ui-claim--unsupported';
+  readonly claimUnknown: 'ui-claim--unknown';
+  readonly claimStatement: 'ui-claim__statement';
+  readonly claimStatus: 'ui-claim__status';
+  readonly claimScope: 'ui-claim__scope';
+  readonly claimBasis: 'ui-claim__basis';
+  readonly claimLimits: 'ui-claim__limits';
+  readonly claimRefs: 'ui-claim__refs';
+  readonly claimCaveat: 'ui-claim__caveat';
+  readonly evidenceGrid: 'ui-evidence-grid';
+  readonly evidenceLedger: 'ui-evidence-ledger';
+  readonly evidenceItem: 'ui-evidence-item';
+  readonly evidenceItemTitle: 'ui-evidence-item__title';
+  readonly evidenceItemMeta: 'ui-evidence-item__meta';
+  readonly evidenceItemBody: 'ui-evidence-item__body';
+  readonly evidenceItemKind: 'ui-evidence-item__kind';
+  readonly evidenceItemMethod: 'ui-evidence-item__method';
+  readonly evidenceItemWindow: 'ui-evidence-item__window';
+  readonly evidenceItemValue: 'ui-evidence-item__value';
+  readonly evidenceItemSource: 'ui-evidence-item__source';
+  readonly evidenceItemCaveat: 'ui-evidence-item__caveat';
   readonly compare: 'ui-compare';
   readonly compare2up: 'ui-compare--2up';
   readonly compareCol: 'ui-compare__col';
@@ -585,6 +638,14 @@ export interface CompareOpts {
   /** Pin exactly two equal columns (hard before/after) instead of the auto-fitting set. */
   cols?: 2;
 }
+export interface ReportFindingOpts {
+  /** Severity/status band. Pair with an author-written label; tone is not the only signal. */
+  severity?: 'critical' | 'major' | 'minor' | 'resolved';
+}
+export interface ClaimOpts {
+  /** Evidence status. Pair with written status text; tone is only a scanning aid. */
+  status?: 'supported' | 'partial' | 'disputed' | 'unsupported' | 'unknown';
+}
 export interface ChipOpts {
   accent?: boolean;
 }
@@ -787,6 +848,8 @@ export interface Ui {
   num(opts?: NumOpts): string;
   delta(opts?: DeltaOpts): string;
   compare(opts?: CompareOpts): string;
+  reportFinding(opts?: ReportFindingOpts): string;
+  claim(opts?: ClaimOpts): string;
   chip(opts?: ChipOpts): string;
   link(opts?: LinkOpts): string;
   dot(opts?: DotOpts): string;

package/classes/index.js

@@ -279,16 +279,69 @@ export const cls = Object.freeze({
   reportMeta: 'ui-report__meta',
   reportToc: 'ui-report__toc',
   reportSummary: 'ui-report__summary',
+  reportDecision: 'ui-report__decision',
+  reportDecisionKicker: 'ui-report__decision-kicker',
+  reportDecisionTitle: 'ui-report__decision-title',
+  reportDecisionBody: 'ui-report__decision-body',
+  reportDecisionMeta: 'ui-report__decision-meta',
+  reportDecisionGrid: 'ui-report__decision-grid',
+  reportDecisionItem: 'ui-report__decision-item',
+  reportDecisionLabel: 'ui-report__decision-label',
+  reportDecisionValue: 'ui-report__decision-value',
   reportSection: 'ui-report__section',
   reportSectionUnnumbered: 'ui-report__section--unnumbered',
   reportSectionHead: 'ui-report__section-head',
   reportFinding: 'ui-report__finding',
+  reportFindingCritical: 'ui-report__finding--critical',
+  reportFindingMajor: 'ui-report__finding--major',
+  reportFindingMinor: 'ui-report__finding--minor',
+  reportFindingResolved: 'ui-report__finding--resolved',
+  reportFindingTitle: 'ui-report__finding-title',
+  reportFindingClaim: 'ui-report__finding-claim',
+  reportFindingImpact: 'ui-report__finding-impact',
+  reportFindingRemediation: 'ui-report__finding-remediation',
+  reportFindingEvidence: 'ui-report__finding-evidence',
+  reportFindingCaveat: 'ui-report__finding-caveat',
   reportEvidence: 'ui-report__evidence',
   reportFigure: 'ui-report__figure',
   reportCaption: 'ui-report__caption',
   reportSources: 'ui-report__sources',
   reportAppendix: 'ui-report__appendix',
   reportFootnotes: 'ui-report__footnotes',
+  reportActions: 'ui-report__actions',
+  reportAction: 'ui-report__action',
+  reportActionStatus: 'ui-report__action-status',
+  reportActionTitle: 'ui-report__action-title',
+  reportActionOwner: 'ui-report__action-owner',
+  reportActionDue: 'ui-report__action-due',
+  reportActionPriority: 'ui-report__action-priority',
+  reportActionCriteria: 'ui-report__action-criteria',
+  reportActionSource: 'ui-report__action-source',
+  claim: 'ui-claim',
+  claimSupported: 'ui-claim--supported',
+  claimPartial: 'ui-claim--partial',
+  claimDisputed: 'ui-claim--disputed',
+  claimUnsupported: 'ui-claim--unsupported',
+  claimUnknown: 'ui-claim--unknown',
+  claimStatement: 'ui-claim__statement',
+  claimStatus: 'ui-claim__status',
+  claimScope: 'ui-claim__scope',
+  claimBasis: 'ui-claim__basis',
+  claimLimits: 'ui-claim__limits',
+  claimRefs: 'ui-claim__refs',
+  claimCaveat: 'ui-claim__caveat',
+  evidenceGrid: 'ui-evidence-grid',
+  evidenceLedger: 'ui-evidence-ledger',
+  evidenceItem: 'ui-evidence-item',
+  evidenceItemTitle: 'ui-evidence-item__title',
+  evidenceItemMeta: 'ui-evidence-item__meta',
+  evidenceItemBody: 'ui-evidence-item__body',
+  evidenceItemKind: 'ui-evidence-item__kind',
+  evidenceItemMethod: 'ui-evidence-item__method',
+  evidenceItemWindow: 'ui-evidence-item__window',
+  evidenceItemValue: 'ui-evidence-item__value',
+  evidenceItemSource: 'ui-evidence-item__source',
+  evidenceItemCaveat: 'ui-evidence-item__caveat',
   compare: 'ui-compare',
   compare2up: 'ui-compare--2up',
   compareCol: 'ui-compare__col',
@@ -721,6 +774,31 @@ const meterTone = (tone) =>
     tone,
   );
 
+const reportFindingSeverity = (severity) =>
+  toneClass(
+    'reportFinding',
+    {
+      critical: cls.reportFindingCritical,
+      major: cls.reportFindingMajor,
+      minor: cls.reportFindingMinor,
+      resolved: cls.reportFindingResolved,
+    },
+    severity,
+  );
+
+const claimStatus = (status) =>
+  toneClass(
+    'claim',
+    {
+      supported: cls.claimSupported,
+      partial: cls.claimPartial,
+      disputed: cls.claimDisputed,
+      unsupported: cls.claimUnsupported,
+      unknown: cls.claimUnknown,
+    },
+    status,
+  );
+
 export const ui = {
   button: ({ variant, icon, size } = {}) =>
     j(
@@ -745,6 +823,8 @@ export const ui = {
       invert && cls.deltaInvert,
     ),
   compare: ({ cols } = {}) => j(cls.compare, cols === 2 && cls.compare2up),
+  reportFinding: ({ severity } = {}) => j(cls.reportFinding, reportFindingSeverity(severity)),
+  claim: ({ status } = {}) => j(cls.claim, claimStatus(status)),
   chip: ({ accent } = {}) => j(cls.chip, accent && cls.chipAccent),
   link: ({ arrow, cta } = {}) => j(cls.link, arrow && cls.linkArrow, cta && cls.linkCta),
   dot: ({ tone, live } = {}) => j(cls.dot, dotTone(tone), live && cls.dotLive),

package/css/report.css

@@ -30,6 +30,24 @@
   counter-reset: report-section;
 }
 
+.ui-report > *,
+.ui-report__cover > *,
+.ui-report__head > *,
+.ui-report__toc > *,
+.ui-report__summary > *,
+.ui-report__decision > *,
+.ui-report__finding > *,
+.ui-report__evidence > *,
+.ui-report__section > *,
+.ui-report__figure > *,
+.ui-claim > *,
+.ui-evidence-grid > *,
+.ui-evidence-ledger > *,
+.ui-compare > *,
+.ui-compare__col > * {
+  min-inline-size: 0;
+}
+
 .ui-report__cover {
   align-content: end;
   border-block-end: 1px solid var(--line);
@@ -142,8 +160,204 @@
   border-inline-start: 2px solid var(--accent);
 }
 
+.ui-report__decision {
+  background: var(--panel);
+  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
+  border-inline-start: 3px solid var(--accent);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+}
+
+.ui-report__decision-kicker {
+  color: var(--accent-text);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.ui-report__decision-title {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: var(--text-lg);
+  font-weight: var(--display-weight);
+  letter-spacing: 0;
+  line-height: 1.18;
+  margin: 0;
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+.ui-report__decision-body {
+  color: var(--text-soft);
+  line-height: 1.6;
+  margin: 0;
+  max-inline-size: var(--report-measure);
+}
+
+.ui-report__decision-meta {
+  color: var(--text-dim);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.45rem 0.75rem;
+  letter-spacing: 0;
+}
+
+.ui-report__decision-grid {
+  border-block-start: 1px solid var(--line);
+  display: grid;
+  gap: 0;
+}
+
+.ui-report__decision-item {
+  align-items: start;
+  border-block-end: 1px solid var(--line);
+  display: grid;
+  gap: var(--space-xs);
+  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
+  padding-block: var(--space-xs);
+}
+
+.ui-report__decision-label,
+.ui-report__decision-value {
+  margin: 0;
+}
+
+.ui-report__decision-label {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-report__decision-value {
+  color: var(--text-soft);
+  line-height: 1.5;
+}
+
 .ui-report__finding {
-  border-inline-start: 2px solid var(--line-strong);
+  --report-finding-tone: var(--line-strong);
+
+  border-inline-start: 2px solid var(--report-finding-tone);
+}
+
+.ui-report__finding--critical {
+  --report-finding-tone: var(--danger);
+}
+
+.ui-report__finding--major {
+  --report-finding-tone: var(--warning);
+}
+
+.ui-report__finding--minor {
+  --report-finding-tone: var(--info);
+}
+
+.ui-report__finding--resolved {
+  --report-finding-tone: var(--success);
+}
+
+.ui-report__finding-title,
+.ui-report__finding-claim,
+.ui-report__finding-impact,
+.ui-report__finding-remediation,
+.ui-report__finding-evidence,
+.ui-report__finding-caveat {
+  margin: 0;
+}
+
+.ui-report__finding-title {
+  color: var(--text);
+  font-size: var(--text-md);
+  font-weight: 650;
+  line-height: 1.25;
+}
+
+.ui-report__finding-claim {
+  color: var(--text);
+  line-height: 1.6;
+}
+
+.ui-report__finding-impact,
+.ui-report__finding-remediation,
+.ui-report__finding-evidence {
+  color: var(--text-soft);
+  line-height: 1.55;
+}
+
+.ui-report__finding-caveat {
+  color: var(--text-dim);
+  font-size: var(--text-sm);
+  line-height: 1.55;
+}
+
+.ui-claim {
+  --claim-tone: var(--accent);
+
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-inline-start: 2px solid var(--claim-tone);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-xs);
+  padding: var(--space-sm);
+}
+
+.ui-claim--supported {
+  --claim-tone: var(--success);
+}
+
+.ui-claim--partial {
+  --claim-tone: var(--warning);
+}
+
+.ui-claim--disputed,
+.ui-claim--unsupported {
+  --claim-tone: var(--danger);
+}
+
+.ui-claim--unknown {
+  --claim-tone: var(--info);
+}
+
+.ui-claim__statement,
+.ui-claim__status,
+.ui-claim__scope,
+.ui-claim__basis,
+.ui-claim__limits,
+.ui-claim__refs,
+.ui-claim__caveat {
+  margin: 0;
+}
+
+.ui-claim__statement {
+  color: var(--text);
+  font-weight: 650;
+  line-height: 1.45;
+}
+
+.ui-claim__status,
+.ui-claim__scope,
+.ui-claim__refs {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.ui-claim__basis,
+.ui-claim__limits,
+.ui-claim__caveat {
+  color: var(--text-soft);
+  font-size: var(--text-sm);
+  line-height: 1.55;
 }
 
 .ui-report__evidence {
@@ -208,6 +422,142 @@
   text-transform: uppercase;
 }
 
+.ui-evidence-grid {
+  display: grid;
+  gap: var(--space-sm);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+}
+
+.ui-evidence-item {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: 0.35rem;
+  padding: var(--space-sm);
+}
+
+.ui-evidence-item__title {
+  color: var(--text);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  margin: 0;
+}
+
+.ui-evidence-item__meta {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+}
+
+.ui-evidence-item__body {
+  color: var(--text-soft);
+  font-size: var(--text-sm);
+  line-height: 1.55;
+  margin: 0;
+}
+
+.ui-evidence-item__kind,
+.ui-evidence-item__method,
+.ui-evidence-item__window,
+.ui-evidence-item__value,
+.ui-evidence-item__source,
+.ui-evidence-item__caveat {
+  margin: 0;
+}
+
+.ui-evidence-item__kind,
+.ui-evidence-item__method,
+.ui-evidence-item__window,
+.ui-evidence-item__source {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.ui-evidence-item__value {
+  color: var(--text);
+  font-size: var(--text-md);
+  font-weight: 650;
+}
+
+.ui-evidence-item__caveat {
+  color: var(--text-dim);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.ui-evidence-ledger {
+  display: grid;
+  gap: var(--space-sm);
+}
+
+.ui-report__actions {
+  border-block-start: 1px solid var(--line);
+  display: grid;
+  gap: 0;
+}
+
+.ui-report__action {
+  align-items: start;
+  border-block-end: 1px solid var(--line);
+  display: grid;
+  gap: var(--space-xs);
+  grid-template-columns: minmax(0, 1fr) auto;
+  padding-block: var(--space-sm);
+}
+
+.ui-report__action-status {
+  align-self: start;
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-report__action-title,
+.ui-report__action-owner,
+.ui-report__action-due,
+.ui-report__action-priority,
+.ui-report__action-criteria,
+.ui-report__action-source {
+  margin: 0;
+}
+
+.ui-report__action-title {
+  color: var(--text);
+  font-weight: 650;
+  line-height: 1.45;
+}
+
+.ui-report__action-owner,
+.ui-report__action-due,
+.ui-report__action-priority,
+.ui-report__action-source {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.ui-report__action-criteria {
+  color: var(--text-soft);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+@media (max-width: 32rem) {
+  .ui-report__decision-item,
+  .ui-report__action {
+    grid-template-columns: 1fr;
+  }
+}
+
 .ui-report__sources,
 .ui-report__appendix,
 .ui-report__footnotes {
@@ -343,13 +693,44 @@
     min-block-size: auto;
   }
 
+  /* Chromium-class print engines overprint grid rows across page breaks
+     (fragmented grid tracks restart at the page top, on top of the running
+     content). Demote ONLY the vertical document-flow wrappers to block flow
+     and emulate their gap with margins; multi-column grids (.ui-compare,
+     .ui-meter__row, .ui-report__decision-item, .ui-evidence-grid, …) keep
+     grid — their content is break-inside-avoided as a unit instead. */
+  .ui-report,
+  .ui-report__section,
+  .ui-report__figure,
+  .ui-report__actions,
+  .ui-evidence-ledger {
+    display: block;
+  }
+
+  .ui-report > * + * {
+    margin-block-start: var(--report-gap);
+  }
+
+  .ui-report__section > * + * {
+    margin-block-start: var(--space-md);
+  }
+
+  .ui-report__figure > * + *,
+  .ui-evidence-ledger > * + * {
+    margin-block-start: var(--space-sm);
+  }
+
   .ui-report__cover,
   .ui-report__head,
-  .ui-report__section,
+  .ui-report__decision,
   .ui-report__summary,
   .ui-report__finding,
   .ui-report__evidence,
-  .ui-report__figure {
+  .ui-report__figure,
+  .ui-report__toc,
+  .ui-claim,
+  .ui-evidence-item,
+  .ui-report__action {
     break-inside: avoid;
   }
 

package/css/sources.css

@@ -117,11 +117,13 @@
   gap: var(--space-sm);
   list-style: none;
   margin: 0;
+  min-inline-size: 0;
   padding: 0;
 }
 
 .ui-source-list__item {
   margin: 0;
+  min-inline-size: 0;
 }
 
 /* --- Source card — a single source preview. --- */
@@ -132,15 +134,28 @@
   border-radius: var(--radius-md);
   display: grid;
   gap: 0.3rem;
+  min-inline-size: 0;
   padding: 0.75rem 0.9rem;
   print-color-adjust: exact;
 }
 
+.ui-source-card:target,
+.ui-source-card.is-source-active {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--src-tone) 22%, transparent);
+  outline: 2px solid var(--src-tone);
+  outline-offset: 2px;
+}
+
+.ui-source-card > * {
+  min-inline-size: 0;
+}
+
 .ui-source-card__title {
   color: var(--text);
   font-size: var(--text-sm);
   font-weight: 600;
   margin: 0;
+  overflow-wrap: break-word;
 }
 
 .ui-source-card__origin {
@@ -148,17 +163,20 @@
   font-family: var(--mono);
   font-size: var(--text-2xs);
   letter-spacing: var(--tracking-wide);
+  overflow-wrap: anywhere;
 }
 
 .ui-source-card__time {
   color: var(--text-dim);
   font-family: var(--mono);
   font-size: var(--text-2xs);
+  overflow-wrap: anywhere;
 }
 
 .ui-source-card__excerpt {
   color: var(--text-soft);
   margin: 0;
+  overflow-wrap: anywhere;
 }
 
 .ui-source-card__actions {

package/css/tokens.css

@@ -282,8 +282,15 @@
   --shadow-raised: 0 0 0 1px var(--text);
 }
 
+:root[data-contrast='high'] {
+  --line: var(--line-strong);
+  --text-dim: var(--text-soft);
+  --focus-ring: var(--accent);
+  --shadow-raised: 0 0 0 1px var(--text);
+}
+
 @media (prefers-contrast: more) {
-  :root {
+  :root:root {
     --line: var(--line-strong);
     --text-dim: var(--text-soft);
     --focus-ring: var(--accent);