@semiont/react-ui 0.5.25 → 0.5.27

package/src/components/navigation/NavigationTabs.css

@@ -36,10 +36,6 @@
   align-items: center;
 }
 
-[data-theme="dark"] .semiont-nav-section__header-button {
-  color: inherit;
-}
-
 .semiont-nav-section__header-button:hover {
   opacity: 0.8;
 }
@@ -68,10 +64,6 @@
   text-align: left;
 }
 
-[data-theme="dark"] .semiont-nav-section__header-text {
-  color: inherit;
-}
-
 .semiont-nav-section__header-icon {
   display: flex;
   align-items: center;
@@ -99,14 +91,6 @@
   outline-offset: 2px;
 }
 
-[data-theme="dark"] .semiont-nav-section__header-icon {
-  color: var(--semiont-text-secondary);
-}
-
-[data-theme="dark"] .semiont-nav-section__header-icon:hover {
-  background: var(--semiont-bg-tertiary);
-}
-
 [data-theme="dark"] .semiont-nav-section__header-icon:focus-visible {
   outline-color: var(--semiont-color-primary-400);
 }
@@ -361,10 +345,6 @@
   outline-color: var(--semiont-color-primary-400);
 }
 
-[data-theme="dark"] .semiont-resource-tab__link:visited {
-  color: inherit !important;
-}
-
 /* Resource tab icon (emoji) */
 .semiont-resource-tab__icon {
   flex-shrink: 0;

package/src/components/pdf-annotation/PdfAnnotationCanvas.css

@@ -20,14 +20,170 @@
 
 /* stylelint-disable semiont/accessibility -- Error indicator added by semantic-indicators.css */
 .semiont-pdf-annotation-canvas__error {
-  color: var(--error-color);
+  color: var(--semiont-color-error);
 }
 
 [data-theme="dark"] .semiont-pdf-annotation-canvas__error {
-  color: var(--error-color);
+  color: var(--semiont-color-error);
 }
 /* stylelint-enable semiont/accessibility */
 
+/*
+ * The scrolling column (PDF-CONTINUOUS-SCROLL S1). Every page owns a slot so
+ * the scrollbar reflects the whole document; only pages near the viewport are
+ * mounted, and an unmounted slot holds its space with an estimated height set
+ * inline. `max-height` is what makes this a scroll container at all — without
+ * it the column grows to its content and the page scrolls instead, which
+ * still works but defeats the windowing.
+ */
+/*
+ * Viewport = the pages plus their strip, side by side. The strip LEADS — it
+ * hugs the content's leading edge, where a page rail conventionally lives
+ * (Preview, Acrobat), so the reader's eye finds it before the page.
+ */
+.semiont-pdf-annotation-canvas__viewport {
+  display: flex;
+  gap: 0.5rem;
+  align-items: stretch;
+}
+
+.semiont-pdf-annotation-canvas__viewport[data-axis="horizontal"] {
+  flex-direction: column;
+}
+
+.semiont-pdf-annotation-canvas__column {
+  display: flex;
+  flex: 1 1 auto;
+  gap: 1rem;
+  align-items: center;
+}
+
+/*
+ * Both blocks below key off ONE attribute, so the strip can never end up
+ * running across the direction the document scrolls.
+ */
+/*
+ * The column does NOT scroll. The pane the viewer sits in already does
+ * (`flex: 1; min-height: 0`), and giving the column a viewport-relative
+ * height of its own produced a scroller inside a scroller — two bars along
+ * one axis, the inner one redundant with the page rail beside it.
+ */
+.semiont-pdf-annotation-canvas__column[data-axis="vertical"] {
+  flex-direction: column;
+}
+
+.semiont-pdf-annotation-canvas__column[data-axis="horizontal"] {
+  flex-direction: row;
+}
+
+.semiont-pdf-annotation-canvas__slot {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+/*
+ * The page strip: the document's shape in miniature. Rectangles only — no
+ * rasterization — so a 400-page scan costs 400 empty divs, not 400 renders.
+ */
+/*
+ * The strip scrolls — a 70-page document cannot fit its numbered rectangles in
+ * one screen — but it must not show a scrollbar. Two scrollbars side by side
+ * read as two controls for one thing, and the strip's own moves the strip
+ * rather than the document, so it looks broken. Position is carried by the
+ * highlighted page, and the strip follows the reader on its own.
+ */
+.semiont-pdf-annotation-canvas__strip {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 2px;
+  padding: 0.5rem;
+  scrollbar-width: none; /* standard; Firefox + recent Chromium */
+}
+
+/*
+ * WebKit/Safari, which has no `scrollbar-width` support to rely on.
+ *
+ * This hides a SCROLLBAR, not content: `scrollbar-width: none` above already
+ * does the same for every other engine, the rail still scrolls by wheel and
+ * drag, and each page is a focusable button — so tabbing through the rail
+ * scrolls it, which is the keyboard path the rule is protecting.
+ */
+.semiont-pdf-annotation-canvas__strip::-webkit-scrollbar {
+  display: none; /* stylelint-disable-line semiont/accessibility */
+}
+
+/*
+ * The rail hugs the leading edge of the content and stays put while the
+ * document scrolls past it — `sticky` rather than a fixed-height box, so it
+ * follows the reader without claiming a second scroll region in the layout.
+ */
+.semiont-pdf-annotation-canvas__strip[data-axis="vertical"] {
+  position: sticky;
+  top: 0;
+  flex-direction: column;
+  align-self: flex-start;
+  align-items: center;
+  max-height: 100vh;
+  overflow-y: auto;
+  border-right: 1px solid var(--semiont-border-secondary);
+}
+
+.semiont-pdf-annotation-canvas__strip[data-axis="horizontal"] {
+  position: sticky;
+  top: 0;
+  flex-direction: row;
+  align-items: flex-end;
+  max-width: 100%;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--semiont-border-secondary);
+}
+
+.semiont-pdf-annotation-canvas__strip-page {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  padding: 0;
+  border: 1px solid var(--semiont-border-primary);
+  border-radius: 1px;
+  background: var(--semiont-bg-secondary);
+  color: var(--semiont-text-tertiary);
+  font-size: var(--semiont-text-2xs);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.semiont-pdf-annotation-canvas__strip-page:hover {
+  background: var(--semiont-bg-hover);
+}
+
+/* The reader's position, legible at a glance across a long strip. */
+.semiont-pdf-annotation-canvas__strip-page[aria-current="page"] {
+  border-color: var(--semiont-color-primary-600);
+  background: var(--semiont-color-primary-500);
+  color: var(--semiont-color-neutral-0);
+  font-weight: var(--semiont-font-semibold);
+}
+
+/*
+ * Palette tokens are one fixed hue in both themes, so this marker needs a real
+ * variant — the accent steps lighter against a dark surface (the treatment
+ * `.semiont-checkbox:checked` uses), and the number flips to dark type, which
+ * at this size reads far better on that lighter blue than white does.
+ */
+[data-theme="dark"] .semiont-pdf-annotation-canvas__strip-page[aria-current="page"] {
+  border-color: var(--semiont-color-primary-400);
+  background: var(--semiont-color-primary-400);
+  color: var(--semiont-color-neutral-900);
+}
+
+.semiont-pdf-annotation-canvas__strip-page:focus-visible {
+  outline: 2px solid var(--semiont-focus-ring);
+  outline-offset: 1px;
+}
+
 .semiont-pdf-annotation-canvas__container {
   position: relative;
   display: inline-block;
@@ -83,12 +239,12 @@
   justify-content: center;
   gap: 1rem;
   padding: 1rem;
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--semiont-border-primary);
 }
 
 .semiont-pdf-annotation-canvas__button {
   padding: 0.5rem 1rem;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--semiont-border-primary);
   border-radius: 4px;
   background: transparent;
   cursor: pointer;
@@ -101,11 +257,11 @@
 }
 
 .semiont-pdf-annotation-canvas__button:hover:not(:disabled) {
-  background-color: var(--hover-color, rgba(0, 0, 0, 0.05));
+  background-color: var(--semiont-bg-hover);
 }
 
 .semiont-pdf-annotation-canvas__button:focus-visible {
-  outline: 2px solid var(--focus-color, #0066cc);
+  outline: 2px solid var(--semiont-focus-ring);
   outline-offset: 2px;
 }