@scalewing/react 1.41.0 → 1.42.0

package/dist/index.d.ts

@@ -6,7 +6,11 @@ export { Switch, switchCheckedTones, switchLayouts, type SwitchCheckedTone, type
 export { DateField, dateFieldEntries, type DateFieldEntry, type DateFieldLabels, type DateFieldProps, type WeekStart, } from './components/DateField.js';
 export { CalendarButton, type CalendarButtonLabels, type CalendarButtonProps, type CalendarButtonRange, } from './components/CalendarButton.js';
 export { DateRangeButton, type DateRangeButtonLabels, type DateRangeButtonProps, type DateRangeButtonValue, type DateRangePreset, } from './components/DateRangeButton.js';
+export { Article, articleTitleElements, type ArticleCover, type ArticleProps, type ArticleTitleElement, } from './components/Article.js';
+export { FileField, type FileFieldProps, type FileFieldValue, } from './components/FileField.js';
+export { DocumentViewer, type DocumentViewerLabels, type DocumentViewerProps, } from './components/DocumentViewer.js';
 export { ListGroup, type ListGroupProps } from './components/ListGroup.js';
+export { inspectMarkdown, markdownOmissionKinds, MarkdownView, type MarkdownHeading, type MarkdownInspection, type MarkdownImage, type MarkdownImageResolver, type MarkdownOmission, type MarkdownOmissionCounts, type MarkdownOmissionKind, type MarkdownOptions, type MarkdownViewProps, } from './components/MarkdownView.js';
 export { ListRow, type ListRowProps } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, type ListGroupMaxHeight, type ListGroupVariant, type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone, } from './list-options.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
@@ -45,7 +49,7 @@ export { Inline, type InlineProps } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export type { SplitProps } from './components/Split.js';
 export { Nav, navAppearances, type NavAppearance, type NavProps, } from './components/Nav.js';
-export { NavCount, type NavCountProps } from './components/NavCount.js';
+export { NavCount, navCountTones, type NavCountProps, type NavCountTone, } from './components/NavCount.js';
 export { SectionNav, sectionNavAppearances, type SectionNavAppearance, type SectionNavItem, type SectionNavProps, } from './components/SectionNav.js';
 export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, segmentedSizes, type SegmentedSize, type SegmentedItem, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, type ComboboxAction, type ComboboxBadge, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type ComboboxSize, } from './components/Combobox.js';

package/dist/index.js

@@ -5,7 +5,11 @@ export { Switch, switchCheckedTones, switchLayouts, } from './components/Switch.
 export { DateField, dateFieldEntries, } from './components/DateField.js';
 export { CalendarButton, } from './components/CalendarButton.js';
 export { DateRangeButton, } from './components/DateRangeButton.js';
+export { Article, articleTitleElements, } from './components/Article.js';
+export { FileField, } from './components/FileField.js';
+export { DocumentViewer, } from './components/DocumentViewer.js';
 export { ListGroup } from './components/ListGroup.js';
+export { inspectMarkdown, markdownOmissionKinds, MarkdownView, } from './components/MarkdownView.js';
 export { ListRow } from './components/ListRow.js';
 export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, } from './list-options.js';
 export { Checkbox } from './components/Checkbox.js';
@@ -42,7 +46,7 @@ export { Stepper, stepperLimitAppearances, } from './components/Stepper.js';
 export { Inline } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export { Nav, navAppearances, } from './components/Nav.js';
-export { NavCount } from './components/NavCount.js';
+export { NavCount, navCountTones, } from './components/NavCount.js';
 export { SectionNav, sectionNavAppearances, } from './components/SectionNav.js';
 export { SegmentedControl, segmentedSizes, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, } from './components/Combobox.js';

package/dist/list-options.d.ts

@@ -50,13 +50,16 @@ export type ListRowInput = {
     valueBadge: BadgeTone | undefined;
     selected: boolean | undefined;
     pressable: boolean;
+    unread: boolean;
+    unreadLabel: string | undefined;
 };
 /**
  * Fails closed on a ListRow it cannot draw: an empty title or value, an
  * unknown tone, title appearance, value tone, badge tone or accessory, a
  * `valueDetail`, `valueTone` or `valueBadge` with no value, a value both
- * toned and a badge, or `selected` on a row that is not a button or link
- * (its check would be a state nothing can read).
+ * toned and a badge, `selected` on a row that is not a button or link
+ * (its check would be a state nothing can read), or an unread row with no
+ * words for its dot (a colour alone says nothing).
  */
 export declare function assertListRow(input: ListRowInput): void;
 /**

package/dist/list-options.js

@@ -41,8 +41,9 @@ export function listMaxHeightStyle(maxHeight) {
  * Fails closed on a ListRow it cannot draw: an empty title or value, an
  * unknown tone, title appearance, value tone, badge tone or accessory, a
  * `valueDetail`, `valueTone` or `valueBadge` with no value, a value both
- * toned and a badge, or `selected` on a row that is not a button or link
- * (its check would be a state nothing can read).
+ * toned and a badge, `selected` on a row that is not a button or link
+ * (its check would be a state nothing can read), or an unread row with no
+ * words for its dot (a colour alone says nothing).
  */
 export function assertListRow(input) {
     if (isBlank(input.title))
@@ -62,6 +63,10 @@ export function assertListRow(input) {
         throw new RangeError('A ListRow value is a toned figure or a badge, not both');
     if (input.value !== undefined && isBlank(input.value))
         throw new RangeError('ListRow value must be non-empty text');
+    if (input.unreadLabel !== undefined && isBlank(input.unreadLabel))
+        throw new RangeError('ListRow unreadLabel must be non-empty text');
+    if (input.unread && input.unreadLabel === undefined)
+        throw new RangeError('An unread ListRow needs an unreadLabel to say so');
     if (input.selected !== undefined && !input.pressable)
         throw new RangeError('A ListRow choice (selected) needs onPress or href to say its state');
     if (input.value === undefined &&

package/dist/styles.css

@@ -57,6 +57,7 @@
   --sw-dialog-max: 32rem;
   --sw-dialog-max-lg: 56rem;
   --sw-dialog-max-xl: 65rem;
+  --sw-reading-max: 46rem;
   --sw-select-max: 16rem;
   --sw-split-min: 14rem;
   --sw-split-size: 22rem;
@@ -130,6 +131,7 @@
   --sw-dialog-max: 32rem;
   --sw-dialog-max-lg: 56rem;
   --sw-dialog-max-xl: 65rem;
+  --sw-reading-max: 46rem;
   --sw-select-max: 16rem;
   --sw-split-min: 14rem;
   --sw-split-size: 22rem;
@@ -2940,6 +2942,497 @@ body {
   .sw-list-row-check { border-color: CanvasText; }
 }
 
+.sw-list-row-unread {
+  border: calc(var(--sw-space-2) / 2) solid var(--sw-color-accent);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-block;
+  height: var(--sw-space-2);
+  margin-inline-start: var(--sw-space-2);
+  vertical-align: middle;
+  width: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  .sw-list-row-unread { border-color: CanvasText; }
+}
+
+.sw-list-row-tag {
+  align-self: center;
+  display: inline-flex;
+  flex: none;
+  white-space: nowrap;
+}
+
+.sw-list-item-action {
+  align-items: center;
+  display: flex;
+}
+
+.sw-list-item-action > .sw-list-row {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-inline-end: var(--sw-space-2);
+}
+
+.sw-list-row-action {
+  display: inline-flex;
+  flex: none;
+  padding-inline-end: var(--sw-space-4);
+}
+
+.sw-list-group-plain .sw-list-row-action { padding-inline-end: 0; }
+
+@supports selector(:has(*)) {
+  @media (hover: hover) {
+    .sw-list-item-action:has(> .sw-list-row-pressable:hover:not(.sw-list-row-disabled)) {
+      background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+    }
+
+    .sw-list-item-action > .sw-list-row-pressable:hover:not(.sw-list-row-disabled) {
+      background: transparent;
+    }
+  }
+}
+
+.sw-file-field-frame {
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.sw-file-field-empty { background: var(--sw-color-subtle); }
+
+.sw-file-field-chosen {
+  align-items: center;
+  background: var(--sw-color-surface);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2) var(--sw-space-3);
+  padding: var(--sw-space-2) var(--sw-space-2) var(--sw-space-2) var(--sw-space-4);
+}
+
+.sw-field-invalid .sw-file-field-frame { border-color: var(--sw-color-danger); }
+
+/* A drag wins over an error's edge: it says where the file goes. */
+.sw-file-field-frame.sw-file-field-dragging {
+  background: var(--sw-color-accentSubtle);
+  border-color: var(--sw-color-accent);
+  outline: 1px solid var(--sw-color-accent);
+}
+
+/* On the tint, muted words fall under 4.5:1 in light palettes: every word takes the text colour. */
+.sw-file-field-dragging :is(.sw-file-field-choose, .sw-file-field-drop, .sw-file-field-detail, .sw-file-field-icon) {
+  color: var(--sw-color-text);
+}
+
+/* Disabled, the frame's hairline is dashed, as a disabled text control's. */
+.sw-file-field-disabled { border-style: dashed; }
+
+.sw-file-field-zone {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: inherit;
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  gap: var(--sw-space-1);
+  justify-content: center;
+  line-height: 20px;
+  margin: 0;
+  min-height: var(--sw-control-md-min-height);
+  padding: var(--sw-space-6) var(--sw-space-4);
+  text-align: center;
+  width: 100%;
+}
+
+.sw-file-field-zone:focus { outline: none; }
+
+.sw-file-field-zone:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-file-field-choose {
+  color: var(--sw-color-text);
+  font-weight: 600;
+}
+
+.sw-file-field-drop { color: var(--sw-color-muted); }
+
+.sw-file-field-zone:disabled {
+  background-color: var(--sw-color-subtle);
+  border-style: dashed;
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: currentColor;
+  border-radius: inherit;
+}
+
+.sw-file-field-zone:disabled .sw-file-field-choose { color: var(--sw-color-muted); }
+
+@media (pointer: coarse) {
+  .sw-file-field-drop { display: none; }
+}
+
+.sw-file-field-icon {
+  align-items: center;
+  color: var(--sw-color-muted);
+  display: flex;
+  flex: none;
+}
+
+.sw-file-field-file {
+  display: flex;
+  flex: 1 1 calc(4 * var(--sw-space-8));
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sw-file-field-name {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 20px;
+  overflow-wrap: anywhere;
+}
+
+.sw-file-field-detail {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.sw-file-field-chosen > .sw-button {
+  flex: none;
+  margin-inline-start: auto;
+}
+
+@media (forced-colors: active) {
+  .sw-file-field-frame { border-color: CanvasText; }
+  .sw-field-invalid .sw-file-field-frame { border-color: Mark; }
+  .sw-file-field-frame.sw-file-field-dragging { border-color: Highlight; outline-color: Highlight; }
+  .sw-file-field-choose { color: ButtonText; }
+  .sw-file-field-zone:disabled,
+  .sw-file-field-zone:disabled .sw-file-field-choose { color: GrayText; }
+}
+
+.sw-article {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  max-inline-size: var(--sw-reading-max);
+  min-width: 0;
+}
+
+.sw-article-cover {
+  aspect-ratio: 3 / 1;
+  background: var(--sw-color-subtle);
+  border-start-end-radius: inherit;
+  border-start-start-radius: inherit;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+.sw-article-body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: var(--sw-space-6) var(--sw-space-8);
+}
+
+.sw-article-header {
+  display: flex;
+  flex-direction: column;
+  margin-block-end: var(--sw-space-3);
+  min-width: 0;
+}
+
+.sw-article-top {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+  justify-content: space-between;
+  margin-block-end: var(--sw-space-3);
+}
+
+.sw-article-eyebrow {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.sw-article-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+}
+
+.sw-article-actions:only-child { margin-inline-start: auto; }
+
+.sw-article-title { overflow-wrap: anywhere; }
+
+.sw-article-meta {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  margin-block-start: var(--sw-space-3);
+  overflow-wrap: anywhere;
+}
+
+.sw-article-content {
+  margin-block-start: var(--sw-space-4);
+  min-width: 0;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-article-cover { aspect-ratio: 2 / 1; }
+  .sw-article-body { padding: var(--sw-space-5); }
+}
+
+.sw-document-viewer {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+  border-radius: var(--sw-radius-lg);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding-block-end: var(--sw-space-4);
+}
+
+.sw-document-viewer-stage {
+  box-sizing: border-box;
+  min-width: 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  padding: var(--sw-space-5);
+  touch-action: pan-x pan-y;
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-document-viewer-stage { padding: var(--sw-space-3); }
+}
+
+.sw-document-viewer-stage:focus { outline: none; }
+
+.sw-document-viewer-stage:focus-visible {
+  border-radius: var(--sw-radius-lg);
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: calc(-1 * var(--sw-focus-ring-width));
+}
+
+.sw-document-viewer-page {
+  aspect-ratio: 1 / var(--sw-document-page-aspect);
+  background: var(--sw-color-surface);
+  box-shadow: var(--sw-elevation-sm);
+  margin-inline: auto;
+  position: relative;
+  width: var(--sw-document-page-width);
+}
+
+.sw-document-viewer-page > canvas {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.sw-document-viewer-text {
+  --scale-round-x: 1px;
+  --scale-round-y: 1px;
+  --min-font-size: 1;
+  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
+  --min-font-size-inv: calc(1 / var(--min-font-size));
+  forced-color-adjust: none;
+  inset: 0;
+  letter-spacing: normal;
+  line-height: 1;
+  overflow: clip;
+  position: absolute;
+  text-align: initial;
+  text-size-adjust: none;
+  transform-origin: 0 0;
+  word-spacing: normal;
+}
+
+.sw-document-viewer-text :is(span, br) {
+  color: transparent;
+  cursor: text;
+  position: absolute;
+  transform-origin: 0% 0%;
+  user-select: text;
+  white-space: pre;
+}
+
+.sw-document-viewer-text > :not(.markedContent),
+.sw-document-viewer-text .markedContent span:not(.markedContent) {
+  --font-height: 0;
+  --scale-x: 1;
+  --rotate: 0deg;
+  font-size: calc(var(--text-scale-factor) * var(--font-height));
+  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
+}
+
+.sw-document-viewer-text .markedContent { display: contents; }
+
+.sw-document-viewer-text ::selection {
+  background: color-mix(in srgb, var(--sw-color-accent) 30%, transparent);
+  color: transparent;
+}
+
+.sw-document-viewer-bar {
+  align-items: center;
+  display: flex;
+  gap: var(--sw-space-3);
+  justify-content: center;
+  padding-inline: var(--sw-space-3);
+}
+
+.sw-button.sw-document-viewer-step {
+  border-radius: var(--sw-radius-pill);
+  flex: none;
+  min-height: var(--sw-space-8);
+  min-width: var(--sw-space-8);
+  padding-inline: 0;
+}
+
+.sw-document-viewer-status {
+  font-family: var(--sw-font-sans);
+  font-size: 15px;
+  font-variant-numeric: tabular-nums;
+  line-height: 20px;
+  text-align: center;
+}
+
+.sw-document-viewer-message {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  justify-content: center;
+  min-height: calc(4 * var(--sw-space-8));
+  text-align: center;
+}
+
+.sw-document-viewer-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  justify-content: center;
+  margin-block-start: var(--sw-space-2);
+}
+
+@media (forced-colors: active) {
+  .sw-document-viewer { border: 1px solid CanvasText; }
+  .sw-document-viewer-page { outline: 1px solid CanvasText; }
+}
+
+.sw-markdown {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: 17px;
+  letter-spacing: -0.2px;
+  line-height: 25px;
+  overflow-wrap: anywhere;
+}
+
+:where(.sw-markdown) > *,
+:where(.sw-markdown-quote) > *,
+:where(.sw-markdown-list li) > * { margin-block: 0; }
+
+:where(.sw-markdown, .sw-markdown-quote, .sw-markdown-list li) > * + * {
+  margin-block-start: var(--sw-space-4);
+}
+
+:where(.sw-markdown) > * + .sw-markdown-heading { margin-block-start: var(--sw-space-6); }
+:where(.sw-markdown) > .sw-markdown-heading + * { margin-block-start: var(--sw-space-2); }
+
+.sw-markdown-heading {
+  color: var(--sw-color-text);
+  font-weight: 600;
+  scroll-margin-block-start: var(--sw-space-6);
+}
+
+.sw-markdown-heading-1 {
+  font-size: 20px;
+  letter-spacing: -0.3px;
+  line-height: 28px;
+}
+
+.sw-markdown-heading-2 {
+  font-size: 17px;
+  line-height: 25px;
+}
+
+.sw-markdown-heading-3 {
+  font-size: 15px;
+  letter-spacing: -0.2px;
+  line-height: 20px;
+}
+
+.sw-markdown-list {
+  padding-inline-start: var(--sw-space-5);
+}
+
+.sw-markdown-list > li + li { margin-block-start: var(--sw-space-2); }
+
+[data-theme] .sw-markdown-link {
+  color: var(--sw-color-accent);
+  text-decoration-line: underline;
+}
+
+[data-theme] .sw-markdown-link:hover {
+  text-decoration-thickness: var(--sw-focus-ring-width);
+}
+
+[data-theme] .sw-markdown-quote :is(.sw-markdown-link, .sw-markdown-caption) {
+  color: var(--sw-color-text);
+}
+
+.sw-markdown-quote {
+  background: var(--sw-color-accentSubtle);
+  border-inline-start: var(--sw-space-1) solid var(--sw-color-accent);
+  border-radius: var(--sw-radius-sm);
+  margin-inline: 0;
+  padding: var(--sw-space-3) var(--sw-space-4);
+}
+
+.sw-markdown-figure {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  margin-inline: 0;
+}
+
+.sw-markdown-image {
+  border-radius: var(--sw-radius-md);
+  display: block;
+  height: auto;
+  width: 100%;
+}
+
+.sw-markdown-caption {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+}
+
+@media (forced-colors: active) {
+  .sw-markdown-quote { border: 1px solid CanvasText; border-inline-start-width: var(--sw-space-1); }
+}
+
 [data-theme] .sw-section-nav-count,
 [data-theme] .sw-nav-count {
   align-items: center;
@@ -2959,6 +3452,17 @@ body {
   padding-inline: var(--sw-space-1);
 }
 
+/*
+ * NavCount's `tone="accent"`: a count that is news, not work waiting (what
+ * was added since the person last looked), is the accent fill with its
+ * on-colour figures (4.5:1 in every palette, as a primary Button's label).
+ * One class more specific than the pill, so it wins in any order.
+ */
+[data-theme] .sw-nav-count.sw-nav-count-accent {
+  background: var(--sw-color-accent);
+  color: var(--sw-color-onAccent);
+}
+
 /*
  * A Nav link holding a count lays out as SectionNav's link does: the words
  * and the pill centred on one line a space-2 apart (the space text node

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.41.0",
+  "version": "1.42.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",
@@ -14,13 +14,18 @@
     "url": "https://github.com/nestor-garcia-dev/scalewing/issues"
   },
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "./*/document-viewer-worker.*"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./document-viewer-worker": {
+      "types": "./dist/document-viewer-worker.d.ts",
+      "import": "./dist/document-viewer-worker.js"
+    },
     "./styles.css": {
       "types": "./styles.css.d.ts",
       "default": "./dist/styles.css"
@@ -38,6 +43,8 @@
     "README.md"
   ],
   "dependencies": {
+    "markdown-it": "14.3.2",
+    "pdfjs-dist": "6.4.299",
     "@scalewing/tokens": "^1.5.0"
   },
   "peerDependencies": {
@@ -47,6 +54,7 @@
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "14.6.1",
+    "@types/markdown-it": "14.2.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "jsdom": "^27.0.0",