@ponchia/ui 0.6.4 → 0.6.5

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 {
@@ -345,11 +695,14 @@
 
   .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-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);