@semiont/react-ui 0.5.26 → 0.5.28

package/src/styles/core/forms.css

@@ -61,17 +61,18 @@
   gap: 0.5rem;
 }
 
+/* Inline-flex with a gap so the control never touches its text — the gap on
+   the FIELD wrapper only helps when the input is a sibling; several forms
+   nest the input inside the label, where only this reaches. */
 .semiont-form__checkbox-label,
 .semiont-form__radio-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
   font-size: 0.875rem;
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-form__checkbox-label,
-[data-theme="dark"] .semiont-form__radio-label {
-  color: var(--semiont-text-primary);
-}
-
 /* Form actions */
 .semiont-form__actions {
   display: flex;
@@ -102,6 +103,15 @@
   color: var(--semiont-text-secondary);
 }
 
+/* A help sentence scoped to a whole inline row rather than one column —
+   full width under the row, so its height never stretches the row's flex
+   siblings. Right-aligned: the row's `--end` column is what it describes,
+   and the sentence should end beneath that cell. */
+.semiont-form__help--row {
+  margin-top: 0.5rem;
+  text-align: right;
+}
+
 /* Fieldset and legend */
 .semiont-form__fieldset {
   border: 1px solid var(--semiont-color-gray-200);
@@ -121,10 +131,6 @@
   padding: 0 0.5rem;
 }
 
-[data-theme="dark"] .semiont-form__legend {
-  color: var(--semiont-text-primary);
-}
-
 /* Note: Disabled states for form controls are defined in their respective core files */
 
 /* Panel form elements */
@@ -218,10 +224,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-form-field__label {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-form-field__label--with-checkbox {
   display: flex;
   align-items: center;
@@ -235,30 +237,16 @@
   font-weight: var(--semiont-font-medium);
 }
 
-[data-theme="dark"] .semiont-form-field__info {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-form-field__char-count {
   font-size: var(--semiont-text-xs);
   color: var(--semiont-text-tertiary);
   text-align: right;
 }
 
-[data-theme="dark"] .semiont-form-field__char-count {
-  color: var(--semiont-text-tertiary);
-}
-
 /* Note: Basic form controls (.semiont-textarea, .semiont-select, .semiont-checkbox)
    are now defined in /styles/core/ as they are fundamental UI elements.
    See: core/textareas.css, core/selects.css, core/checkboxes.css */
 
-/* Scrollable form body — keeps form within viewport height */
-.semiont-form--scrollable {
-  overflow-y: auto;
-  max-height: 70vh;
-  padding-right: 0.25rem;
-}
 
 /* Inline row — lays out multiple fields side by side */
 .semiont-form__inline-row {
@@ -274,13 +262,31 @@
 }
 
 /* Grow modifier — field takes remaining space */
-.semiont-form__field--grow {
+/* A slider column: flexible, but a 0-to-1 range gains nothing past ~26rem —
+   uncapped it stretches into a band and drags the row's other columns apart. */
+.semiont-form__field--slider {
   flex: 1;
   min-width: 0;
+  max-width: 26rem;
+}
+
+/* Pushed to the row's end — pairs with a right-aligned `__help--row`
+   footnote below, so the sentence ends under the cell it describes instead
+   of floating at the far left with a void to its right. */
+.semiont-form__field--end {
+  margin-left: auto;
 }
 
 /* Narrow modifier — fixed compact width for short numeric inputs */
+/* Sized by content with a floor, not a fixed box: a fixed 5.5rem wrapped
+   labels like "Max resources" onto two lines, which stretched that column
+   and knocked the row's inputs out of alignment. */
 .semiont-form__field--narrow {
-  width: 5.5rem;
+  width: auto;
+  min-width: 5.5rem;
   flex-shrink: 0;
 }
+
+.semiont-form__field--inline > .semiont-form__label {
+  white-space: nowrap;
+}

package/src/styles/core/indicators.css

@@ -131,10 +131,6 @@
   color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-indicator__label {
-  color: var(--semiont-text-secondary);
-}
-
 /* Indicator Badge (dot with count) */
 .semiont-indicator-badge {
   position: relative;

package/src/styles/core/inputs.css

@@ -160,10 +160,6 @@
   min-width: 0;
 }
 
-[data-theme="dark"] .semiont-input--addon {
-  border: none;
-}
-
 .semiont-input--addon:focus-visible,
 .semiont-input--addon:focus {
   outline: none;

package/src/styles/core/progress.css

@@ -83,7 +83,7 @@
 }
 
 [data-theme="dark"] .semiont-progress__fill--warning {
-  background-color: var(--semiont-color-warning);
+  background-color: var(--semiont-color-warning-light);
 }
 
 .semiont-progress__fill--error {
@@ -91,7 +91,7 @@
 }
 
 [data-theme="dark"] .semiont-progress__fill--error {
-  background-color: var(--semiont-color-error);
+  background-color: var(--semiont-color-error-light);
 }
 
 /* With Label */
@@ -108,10 +108,6 @@
   color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-progress__label {
-  color: var(--semiont-text-secondary);
-}
-
 /* Indeterminate Progress */
 .semiont-progress--indeterminate .semiont-progress__fill {
   width: 30%;
@@ -140,31 +136,3 @@
   }
 }
 
-/* Legacy Compatibility Mappings (deprecated - use base classes above)
-   These will be removed in a future version. Update components to use .semiont-progress */
-.semiont-progress-bar,
-.semiont-panel-progress {
-  position: relative;
-  width: 100%;
-  height: 0.5rem;
-  background-color: var(--semiont-bg-secondary);
-  border-radius: var(--semiont-radius-full);
-  overflow: hidden;
-}
-
-[data-theme="dark"] .semiont-progress-bar,
-[data-theme="dark"] .semiont-panel-progress {
-  background-color: var(--semiont-bg-tertiary);
-}
-
-.semiont-progress-bar__fill,
-.semiont-panel-progress__fill {
-  height: 100%;
-  background-color: var(--semiont-color-primary-500);
-  transition: width 0.3s ease;
-}
-
-[data-theme="dark"] .semiont-progress-bar__fill,
-[data-theme="dark"] .semiont-panel-progress__fill {
-  background-color: var(--semiont-color-primary-500);
-}

package/src/styles/core/sliders.css

@@ -212,10 +212,6 @@
   color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-slider__labels {
-  color: var(--semiont-text-secondary);
-}
-
 /* Small labels variant — reduced font size for compact inline contexts */
 .semiont-slider__labels--small {
   font-size: 0.6875rem;

package/src/styles/core/toggles.css

@@ -17,10 +17,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-toggle-label__text {
-  color: var(--semiont-text-primary);
-}
-
 /* Toggle Switch */
 .semiont-toggle {
   position: relative;

package/src/styles/features/resource-discovery.css

@@ -203,6 +203,19 @@
   color: var(--semiont-color-gray-300);
 }
 
+/* Semantic-fallback caption: explains WHY these results, without competing
+   with them. Quieter than the heading it sits under (SEMANTIC-FALLBACK P3b). */
+.semiont-card__documents-note {
+  margin: -0.25rem 0 0.75rem;
+  font-size: 0.8125rem;
+  font-style: italic;
+  color: var(--semiont-color-gray-600);
+}
+
+[data-theme="dark"] .semiont-card__documents-note {
+  color: var(--semiont-color-gray-400);
+}
+
 .semiont-card__warning {
   padding: 1rem;
   background: var(--semiont-color-yellow-50);

package/src/styles/features/resource-viewer.css

@@ -173,20 +173,12 @@
   color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-browse-view__content h6 {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-browse-view__content p {
   margin-bottom: 1em;
   line-height: var(--semiont-leading-relaxed);
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-browse-view__content p {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-browse-view__content ul,
 .semiont-browse-view__content ol {
   margin-bottom: 1em;
@@ -207,10 +199,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-browse-view__content li {
-  color: var(--semiont-text-primary);
-}
-
 /* Nested lists */
 .semiont-browse-view__content ul ul,
 .semiont-browse-view__content ol ol,
@@ -627,41 +615,11 @@
   margin-bottom: 0.5rem;
 }
 
-[data-theme="dark"] .semiont-page__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-page__subtitle {
   color: var(--semiont-text-secondary);
   font-size: 1rem;
 }
 
-[data-theme="dark"] .semiont-page__subtitle {
-  color: var(--semiont-text-secondary);
-}
-
-.semiont-page__reference-notice {
-  background-color: var(--semiont-color-blue-50);
-  border: 1px solid var(--semiont-color-blue-200);
-  border-radius: var(--semiont-radius-md);
-  padding: 0.75rem 1rem;
-  margin-top: 1rem;
-}
-
-[data-theme="dark"] .semiont-page__reference-notice {
-  background-color: rgba(59, 130, 246, 0.1);
-  border-color: var(--semiont-color-blue-800);
-}
-
-.semiont-page__reference-notice-text {
-  color: var(--semiont-color-blue-700);
-  font-size: 0.875rem;
-}
-
-[data-theme="dark"] .semiont-page__reference-notice-text {
-  color: var(--semiont-color-blue-300);
-}
-
 /* Image Annotation Canvas */
 .semiont-svg-drawing-canvas {
   position: relative;

package/src/styles/features/resource.css

@@ -79,10 +79,6 @@
   }
 }
 
-.semiont-form__entity-types-display {
-  margin-top: 0.5rem;
-}
-
 .semiont-form__entity-type-tags {
   display: flex;
   flex-wrap: wrap;

package/src/styles/motivations/motivation-assessment.css

@@ -246,7 +246,7 @@
 }
 
 [data-theme="dark"] .semiont-assessment-star {
-  color: var(--semiont-color-warning);
+  color: var(--semiont-color-warning-light);
 }
 
 .semiont-assessment-star:hover {
@@ -258,5 +258,5 @@
 }
 
 [data-theme="dark"] .semiont-assessment-star--filled {
-  color: var(--semiont-color-warning);
+  color: var(--semiont-color-warning-light);
 }

package/src/styles/panels/history-panel.css

@@ -20,10 +20,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-history-panel__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-history-panel__loading {
   margin: 0;
   padding: 0.5rem;
@@ -102,10 +98,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-history-group__type {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-history-group__type-icon {
   font-size: var(--semiont-panel-icon-size);
 }
@@ -115,10 +107,6 @@
   color: var(--semiont-text-tertiary);
 }
 
-[data-theme="dark"] .semiont-history-group__count {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-history-group__events {
   display: flex;
   flex-direction: column;
@@ -174,19 +162,11 @@
   margin-left: auto;
 }
 
-[data-theme="dark"] .semiont-history-event__timestamp {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-history-event__text--quoted {
   font-style: italic;
   color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-history-event__text--quoted {
-  color: var(--semiont-text-secondary);
-}
-
 /* Entity types container - tags themselves use .semiont-tag from core */
 .semiont-history-event__entity-types {
   display: flex;
@@ -214,19 +194,11 @@
   color: var(--semiont-text-tertiary);
 }
 
-[data-theme="dark"] .semiont-history-event__detail {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-history-event__detail-value {
   color: var(--semiont-text-primary);
   font-weight: var(--semiont-font-medium);
 }
 
-[data-theme="dark"] .semiont-history-event__detail-value {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-history-event__detail-value--uppercase {
   text-transform: uppercase;
 }
@@ -236,10 +208,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-history-event__action {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-history-event__text {
   font-size: var(--semiont-text-sm);
   color: var(--semiont-text-secondary);
@@ -250,10 +218,6 @@
   line-height: 1.5;
 }
 
-[data-theme="dark"] .semiont-history-event__text {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-history-event__meta {
   display: flex;
   align-items: center;
@@ -276,10 +240,6 @@
   color: var(--semiont-text-tertiary);
 }
 
-[data-theme="dark"] .semiont-history-event__time {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-history-event__link {
   font-size: var(--semiont-text-xs);
   color: var(--semiont-color-primary-600);

package/src/styles/panels/user-panel.css

@@ -19,6 +19,3 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-user-panel__title {
-  color: var(--semiont-text-primary);
-}

package/src/styles/patterns/panel-helpers.css

@@ -28,10 +28,6 @@
   margin-left: 0.5rem;
 }
 
-[data-theme="dark"] .semiont-annotation-prompt__char-count {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-annotation-prompt__actions {
   display: flex;
   gap: 0.5rem;
@@ -101,26 +97,3 @@
   color: var(--semiont-color-blue-300);
 }
 
-/* Progress Bar (moved to panel-sections.css as .semiont-panel-progress) */
-.semiont-progress-bar {
-  position: relative;
-  width: 100%;
-  height: 0.5rem;
-  background-color: var(--semiont-bg-secondary);
-  border-radius: var(--semiont-radius-full);
-  overflow: hidden;
-}
-
-.semiont-progress-bar__fill {
-  height: 100%;
-  background-color: var(--semiont-color-primary-500);
-  transition: width 0.3s ease;
-}
-
-[data-theme="dark"] .semiont-progress-bar__fill {
-  background-color: var(--semiont-color-primary-500);
-}
-
-[data-theme="dark"] .semiont-progress-bar {
-  background-color: var(--semiont-bg-tertiary);
-}

package/src/styles/patterns/panel-sections.css

@@ -43,10 +43,6 @@
   letter-spacing: 0.05em;
 }
 
-[data-theme="dark"] .semiont-panel-section__heading {
-  color: var(--semiont-text-secondary);
-}
-
 /* Section Content */
 .semiont-panel-section__content {
   display: flex;
@@ -120,10 +116,6 @@
   outline-offset: -2px;
 }
 
-[data-theme="dark"] .semiont-panel-tab {
-  color: var(--semiont-text-secondary);
-}
-
 [data-theme="dark"] .semiont-panel-tab:focus-visible {
   outline-color: var(--semiont-color-primary-400);
 }
@@ -197,29 +189,17 @@
   margin-right: 0.5rem;
 }
 
-[data-theme="dark"] .semiont-panel-field__label {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-panel-field__value {
   font-size: var(--semiont-text-sm);
   color: var(--semiont-text-primary);
   font-weight: var(--semiont-font-medium);
 }
 
-[data-theme="dark"] .semiont-panel-field__value {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-panel-field__value--empty {
   color: var(--semiont-text-tertiary);
   font-style: italic;
 }
 
-[data-theme="dark"] .semiont-panel-field__value--empty {
-  color: var(--semiont-text-tertiary);
-}
-
 /* Section Input Areas */
 .semiont-panel-input-area {
   padding: 1rem;
@@ -308,20 +288,12 @@
   letter-spacing: 0.05em;
 }
 
-[data-theme="dark"] .semiont-panel-card__label {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-panel-card__value {
   font-size: var(--semiont-text-2xl);
   font-weight: var(--semiont-font-semibold);
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-panel-card__value {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-panel-card__change {
   font-size: var(--semiont-text-xs);
   display: flex;
@@ -345,30 +317,6 @@
   color: var(--semiont-color-error-light);
 }
 
-/* Progress Bar (for panels) */
-.semiont-panel-progress {
-  position: relative;
-  width: 100%;
-  height: 0.5rem;
-  background-color: var(--semiont-bg-secondary);
-  border-radius: var(--semiont-radius-full);
-  overflow: hidden;
-}
-
-[data-theme="dark"] .semiont-panel-progress {
-  background-color: var(--semiont-bg-tertiary);
-}
-
-.semiont-panel-progress__fill {
-  height: 100%;
-  background-color: var(--semiont-color-primary-500);
-  transition: width 0.3s ease;
-}
-
-[data-theme="dark"] .semiont-panel-progress__fill {
-  background-color: var(--semiont-color-primary-500);
-}
-
 /* User Lists */
 .semiont-panel-user-list {
   display: flex;
@@ -426,15 +374,8 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-panel-user__name {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-panel-user__status {
   font-size: var(--semiont-text-xs);
   color: var(--semiont-text-tertiary);
 }
 
-[data-theme="dark"] .semiont-panel-user__status {
-  color: var(--semiont-text-tertiary);
-}

package/src/styles/patterns/panels-base.css

@@ -20,18 +20,10 @@
   background: var(--semiont-bg-secondary);
 }
 
-[data-theme="dark"] .semiont-panel--secondary {
-  background: var(--semiont-bg-secondary);
-}
-
 .semiont-panel--tertiary {
   background: var(--semiont-bg-tertiary);
 }
 
-[data-theme="dark"] .semiont-panel--tertiary {
-  background: var(--semiont-bg-tertiary);
-}
-
 .semiont-panel--bordered {
   border: 1px solid var(--semiont-border-primary);
 }
@@ -58,10 +50,6 @@
   margin-bottom: var(--semiont-panel-header-margin-bottom);
 }
 
-[data-theme="dark"] .semiont-panel-header__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-panel-header__icon {
   font-size: 1.25rem;
   line-height: 1;
@@ -76,10 +64,6 @@
   font-size: var(--semiont-text-sm);
 }
 
-[data-theme="dark"] .semiont-panel-header__count {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-panel-header__actions {
   display: flex;
   gap: 0.5rem;
@@ -162,10 +146,6 @@
   font-size: var(--semiont-text-sm);
 }
 
-[data-theme="dark"] .semiont-panel-empty {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-panel-empty__icon {
   font-size: 3rem;
   opacity: 0.3;
@@ -191,10 +171,6 @@
   margin-bottom: 0.5rem;
 }
 
-[data-theme="dark"] .semiont-panel-subtitle {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-panel-text {
   font-size: var(--semiont-text-sm);
   font-weight: var(--semiont-font-medium);
@@ -204,10 +180,6 @@
   white-space: nowrap;
 }
 
-[data-theme="dark"] .semiont-panel-text {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-panel-text-secondary {
   font-size: var(--semiont-text-xs);
   color: var(--semiont-color-gray-500);
@@ -270,10 +242,6 @@
   color: var(--semiont-color-gray-300);
 }
 
-[data-theme="dark"] .semiont-panel__section-title--collapsible:hover {
-  background: var(--semiont-bg-tertiary);
-}
-
 .semiont-panel__section-title--collapsible:focus-visible {
   outline: 2px solid var(--semiont-color-primary-500);
   outline-offset: 2px;