@semiont/react-ui 0.5.24 → 0.5.26

package/src/components/resource/panels/TaggingPanel.tsx

@@ -82,6 +82,14 @@ export function TaggingPanel({
   sourceLanguage,
 }: TaggingPanelProps) {
   const t = useTranslations('TaggingPanel');
+  const ta = useTranslations('AssistProgress');
+
+  // Dismiss parity: tag was the one assist surface with no way to clear a
+  // finished progress display, because it had no `closeProgress` key to
+  // label the control. Same wiring as every other surface.
+  const handleDismissProgress = useCallback(() => {
+    session?.client.mark.dismissProgress();
+  }, [session]);
 
   // Subscribe to the per-KB tag-schema registry. Schemas are runtime-
   // registered by the KB at session start (see frame.addTagSchema).
@@ -355,7 +363,19 @@ export function TaggingPanel({
             title={t('annotateTags')}
             isAssisting={isAssisting}
             progress={progress}
-            progressProps={{ showPercentBar: true }}
+            progressProps={{
+              showPercentBar: true,
+              onDismiss: handleDismissProgress,
+              translations: {
+                cancel: t('cancel'),
+                inProgress: t('annotating'),
+                complete: t('complete'),
+                failed: t('failed'),
+                paramsTitle: ta('paramsTitle'),
+                processing: (label) => ta('processing', { label }),
+                close: ta('close'),
+              },
+            }}
             form={
               <>
                   {/* Empty-state — registry has resolved with no schemas. */}

package/src/components/resource/panels/__tests__/AssistSection.test.tsx

@@ -126,7 +126,7 @@ describe('AssistSection', () => {
         />
       );
 
-      expect(screen.getByText('Request Parameters:')).toBeInTheDocument();
+      expect(screen.getByText('paramsTitle')).toBeInTheDocument();
       expect(screen.getByText('Find important points')).toBeInTheDocument();
       expect(screen.getByText(/Instructions:/)).toBeInTheDocument();
       expect(screen.getByText('5')).toBeInTheDocument();
@@ -506,7 +506,7 @@ describe('AssistSection', () => {
         />
       );
 
-      expect(screen.queryByText('Request Parameters:')).not.toBeInTheDocument();
+      expect(screen.queryByText('paramsTitle')).not.toBeInTheDocument();
     });
   });
 });

package/src/components/resource/panels/__tests__/AssistShell.test.tsx

@@ -13,6 +13,11 @@ import { AssistShell } from '../AssistShell';
 
 const progress = { stage: 'analyzing', percentage: 50, message: 'working' };
 
+/** AssistProgress requires a full translation set; the shell just passes it through. */
+const TR = { cancel: 'tr.cancel', inProgress: 'tr.inProgress', complete: 'tr.complete',
+  failed: 'tr.failed', close: 'tr.close', paramsTitle: 'tr.paramsTitle',
+  processing: (l: string) => `tr.processing(${l})` };
+
 describe('AssistShell', () => {
   beforeEach(() => {
     localStorage.clear();
@@ -21,12 +26,12 @@ describe('AssistShell', () => {
   it('renders the form when there is no progress, the progress when there is', () => {
     const { rerender } = render(
       <AssistShell assistType="tag" title="Annotate Tags" isAssisting={false} progress={null}
-        form={<button type="button">the form</button>} />,
+        form={<button type="button">the form</button>} progressProps={{ translations: TR }} />,
     );
     expect(screen.getByText('the form')).toBeInTheDocument();
     rerender(
       <AssistShell assistType="tag" title="Annotate Tags" isAssisting={true} progress={progress}
-        form={<button type="button">the form</button>} />,
+        form={<button type="button">the form</button>} progressProps={{ translations: TR }} />,
     );
     expect(screen.queryByText('the form')).not.toBeInTheDocument();
     expect(screen.getByText('working')).toBeInTheDocument();
@@ -37,7 +42,7 @@ describe('AssistShell', () => {
     const props = {
       assistType: 'highlight', title: 'Annotate Highlights', progress,
       form: <span>form</span>,
-      progressProps: { onDismiss, translations: { close: 'Close' } },
+      progressProps: { onDismiss, translations: { ...TR, close: 'Close' } },
     };
     const { rerender } = render(<AssistShell {...props} isAssisting={true} />);
     expect(screen.queryByLabelText('Close')).not.toBeInTheDocument();
@@ -50,7 +55,7 @@ describe('AssistShell', () => {
   it('persists the expand state per assist type', async () => {
     render(
       <AssistShell assistType="reference" title="Annotate References" isAssisting={false} progress={null}
-        form={<span>form</span>} />,
+        form={<span>form</span>} progressProps={{ translations: TR }} />,
     );
     await userEvent.click(screen.getByRole('button', { name: /Annotate References/ }));
     expect(screen.queryByText('form')).not.toBeInTheDocument();

package/src/components/resource/panels/__tests__/HighlightPanel.annotationProgress.test.tsx

@@ -169,7 +169,7 @@ describe('HighlightPanel + AssistSection Integration', () => {
         />
       );
 
-      expect(screen.getByText('Request Parameters:')).toBeInTheDocument();
+      expect(screen.getByText('paramsTitle')).toBeInTheDocument();
       expect(screen.getByText('Find important points')).toBeInTheDocument();
       expect(screen.getByText('5')).toBeInTheDocument();
     });

package/src/components/resource/panels/__tests__/ReferencesPanel.test.tsx

@@ -409,6 +409,32 @@ describe('ReferencesPanel Component', () => {
       expect(screen.getByText('Organization:')).toBeInTheDocument();
     });
 
+    it('renders the entity log with the SAME markup the progress display uses', () => {
+      // ASSIST-SURFACE-WARTS Lane B: this form-side log and AssistProgress's
+      // completed-entity log are the same concept. They had two class families
+      // (semiont-assist-widget__log* here, semiont-annotation-log* there) one
+      // panel apart — one concept, one markup.
+      const { container, rerender } = renderWithEventBus(
+        <ReferencesPanel
+          {...panelProps()}
+          isAssisting={false}
+          progress={{
+            stage: 'complete',
+            percentage: 100,
+            message: 'Annotation complete',
+            completedEntityTypes: [{ entityType: 'Person', foundCount: 5 }],
+          }}
+        />
+      );
+      rerender(
+        <ReferencesPanel {...panelProps()} isAssisting={false} progress={null} />
+      );
+
+      expect(container.querySelector('.semiont-annotation-log')).toBeInTheDocument();
+      expect(container.querySelector('.semiont-annotation-log-item')).toBeInTheDocument();
+      expect(container.querySelector('.semiont-assist-widget__log')).not.toBeInTheDocument();
+    });
+
     it('should hide entity type selection during detection', () => {
       renderWithEventBus(
         <ReferencesPanel

package/src/features/auth/auth.css

@@ -316,12 +316,12 @@
 }
 
 .semiont-form__input-row:focus-visible {
-  outline: 2px solid var(--semiont-focus-ring, #3b82f6);
+  outline: 2px solid var(--semiont-focus-ring);
   outline-offset: 2px;
 }
 
 [data-theme="dark"] .semiont-form__input-row:focus-visible {
-  outline-color: var(--semiont-focus-ring, #60a5fa);
+  outline-color: var(--semiont-focus-ring);
 }
 
 .semiont-form__input-row .semiont-input {
@@ -329,12 +329,12 @@
 }
 
 .semiont-form__input-row .semiont-input:focus-visible {
-  outline: 2px solid var(--semiont-focus-ring, #3b82f6);
+  outline: 2px solid var(--semiont-focus-ring);
   outline-offset: 2px;
 }
 
 [data-theme="dark"] .semiont-form__input-row .semiont-input:focus-visible {
-  outline-color: var(--semiont-focus-ring, #60a5fa);
+  outline-color: var(--semiont-focus-ring);
 }
 
 .semiont-form__url-status {
@@ -345,27 +345,27 @@
 }
 
 .semiont-form__url-status--checking {
-  color: var(--semiont-text-muted, #888888);
+  color: var(--semiont-text-tertiary);
   animation: spin 1s linear infinite;
   display: inline-block;
 }
 
 [data-theme="dark"] .semiont-form__url-status--checking {
-  color: var(--semiont-text-muted, #888888);
+  color: var(--semiont-text-tertiary);
 }
 
 .semiont-form__url-status--ok {
-  color: var(--semiont-success, #22c55e);
+  color: var(--semiont-color-success);
 }
 
 [data-theme="dark"] .semiont-form__url-status--ok {
-  color: var(--semiont-success, #22c55e);
+  color: var(--semiont-color-success);
 }
 
 .semiont-form__url-status--error {
-  color: var(--semiont-error, #ef4444);
+  color: var(--semiont-color-error);
 }
 
 [data-theme="dark"] .semiont-form__url-status--error {
-  color: var(--semiont-error, #ef4444);
+  color: var(--semiont-color-error);
 }

package/src/features/resource-viewer/__tests__/ResourceViewerPage.test.tsx

@@ -41,7 +41,7 @@ vi.mock('../../../hooks/useResourceContent', () => ({
 // SemiontClient (wired to a dummy baseUrl). The real client surface lets
 // createResourceViewerPageStateUnit run against the full namespace API without us
 // hand-stubbing every method it touches.
-const { stubBrowser } = vi.hoisted(() => {
+const { stubBrowser, stubClient } = vi.hoisted(() => {
   const { BehaviorSubject } = require('rxjs');
   const { SemiontClient, HttpTransport, HttpContentTransport } = require('@semiont/sdk');
   const { baseUrl } = require('@semiont/core');
@@ -63,7 +63,7 @@ const { stubBrowser } = vi.hoisted(() => {
     on: vi.fn(() => () => {}),
     stream: vi.fn(() => ({ subscribe: () => ({ unsubscribe: () => {} }) })),
   };
-  return { stubBrowser };
+  return { stubBrowser, stubClient: client };
 });
 
 vi.mock('../../../session/SemiontProvider', async () => {
@@ -76,6 +76,8 @@ vi.mock('../../../session/SemiontProvider', async () => {
   };
 });
 
+const capturedHistory = vi.hoisted(() => ({ props: null as any }));
+
 vi.mock('@semiont/react-ui', async () => {
   const actual = await vi.importActual('@semiont/react-ui');
   return {
@@ -84,7 +86,10 @@ vi.mock('@semiont/react-ui', async () => {
     Toolbar: () => <div data-testid="toolbar">Toolbar</div>,
     ToolbarPanels: ({ children }: any) => <div data-testid="toolbar-panels">{children}</div>,
     UnifiedAnnotationsPanel: () => <div data-testid="annotations-panel">Annotations</div>,
-    AnnotationHistory: () => <div data-testid="history-panel">History</div>,
+    AnnotationHistory: (props: any) => {
+      capturedHistory.props = props;
+      return <div data-testid="history-panel">History</div>;
+    },
     ResourceInfoPanel: () => <div data-testid="info-panel">Info</div>,
     CollaborationPanel: () => <div data-testid="collaboration-panel">Collaboration</div>,
     JsonLdPanel: () => <div data-testid="jsonld-panel">JSON-LD</div>,
@@ -118,6 +123,15 @@ vi.mock('../../../contexts/ResourceAnnotationsContext', () => ({
   ResourceAnnotationsProvider: ({ children }: any) => children,
 }));
 
+// Capture what ResourceViewerPage passes to useOutcomeToasts. The real hook is a
+// pure event subscription, so standing it in costs the other specs nothing.
+const outcomeToastsCalls = vi.hoisted(() => [] as unknown[]);
+vi.mock('../../../hooks/useOutcomeToasts', () => ({
+  useOutcomeToasts: (resourceId: unknown) => {
+    outcomeToastsCalls.push(resourceId);
+  },
+}));
+
 // Mock useEventSubscription at the direct path used by ResourceViewerPage
 // (the barrel export mock doesn't intercept direct context imports)
 const mockUseEventSubscriptions = vi.fn();
@@ -175,6 +189,23 @@ const renderWithProviders = (ui: React.ReactElement) => {
   );
 };
 
+describe('ResourceViewerPage — outcome toasts reach the user', () => {
+  // The decline/success toast was dropped for EVERY resource:
+  // `useOutcomeToasts(resource.id as string)` read a property
+  // `ResourceDescriptor` does not declare (it carries `@id`). The descriptor's
+  // open index signature made the access legal and the `as string` silenced its
+  // `unknown` type, so the hook's `event.resourceId !== resourceId` guard
+  // compared a real id against `undefined` and returned early every time.
+  it('subscribes with the resource id, not a property the descriptor lacks', () => {
+    outcomeToastsCalls.length = 0;
+    renderWithProviders(<ResourceViewerPage {...createMockProps()} />);
+
+    expect(outcomeToastsCalls).not.toHaveLength(0);
+    // Must be the resource's identity — `undefined` here silences every toast.
+    expect(outcomeToastsCalls[0]).toBe('test-123');
+  });
+});
+
 describe('ResourceViewerPage', () => {
   beforeEach(() => {
   });
@@ -228,6 +259,30 @@ describe('ResourceViewerPage', () => {
       localStorage.clear();
     });
 
+    it('clicking a history event focuses that annotation in the content', () => {
+      // ASSIST-SURFACE-WARTS Lane D. `handleEventClick` used to be a no-op with
+      // a stale comment, while HistoryEvent still rendered a focusable button
+      // labelled "View annotation" — a promise to screen-reader users that
+      // nothing kept. `beckon:focus` is the existing "scroll to and highlight"
+      // contract (BrowseView already subscribes); this makes the page a producer.
+      localStorage.setItem('activeToolbarPanel', 'history');
+      capturedHistory.props = null;
+      const props = createMockProps();
+      renderWithProviders(<ResourceViewerPage {...props} />);
+
+      expect(capturedHistory.props).not.toBeNull();
+
+      const focused: Array<string | null> = [];
+      const sub = stubClient.bus.get('beckon:focus').subscribe(({ annotationId }: any) => focused.push(annotationId));
+
+      expect(capturedHistory.props?.onEventClick).toBeTypeOf('function');
+      capturedHistory.props!.onEventClick('ann-42');
+      expect(focused).toEqual(['ann-42']);
+
+      sub.unsubscribe();
+      localStorage.clear();
+    });
+
     it('shows history panel when activePanel is history', () => {
       localStorage.setItem('activeToolbarPanel', 'history');
       const props = createMockProps();

package/src/features/resource-viewer/components/ResourceViewerPage.tsx

@@ -24,6 +24,7 @@ import type { BrowseMediaRenderers, AnnotateMediaRenderers } from '@semiont/reac
 import { useObservable } from '@semiont/react-ui';
 import { useResourceContent } from '../../../hooks/useResourceContent';
 import { useMediaToken } from '../../../hooks/useMediaToken';
+import { mediaUrl } from '../../../lib/media-url';
 import { useToast } from '../../../components/Toast';
 import { useOutcomeToasts } from '../../../hooks/useOutcomeToasts';
 import { useTheme } from '../../../contexts/ThemeContext';
@@ -139,6 +140,7 @@ export function ResourceViewerPage({
   // Translations
   const tw = useTranslations('ReferenceWizard');
   const tg = useTranslations('ResourceGenerate');
+  const ta = useTranslations('AssistProgress');
 
   const browser = useSemiont();
   const session = useObservable(browser.activeSession$);
@@ -185,9 +187,7 @@ export function ResourceViewerPage({
 
   // Binary path: fetch short-lived media token, construct URL
   const { token: mediaToken, loading: mediaTokenLoading } = useMediaToken(semiont ?? null, rUri);
-  const binaryContent = (isBinary && mediaToken && semiont)
-    ? `${semiont.baseUrl}/api/resources/${rUri}?token=${mediaToken}`
-    : '';
+  const binaryContent = (isBinary ? mediaUrl(semiont, rUri, mediaToken) : undefined) ?? '';
 
   const content = isBinary ? binaryContent : textContent;
   const contentLoading = isBinary ? mediaTokenLoading : textLoading;
@@ -396,7 +396,7 @@ export function ResourceViewerPage({
   // assist timed-out) live in useOutcomeToasts — they need only the resource id
   // and the toast surface. The registration below keeps the handlers that need
   // page-local dependencies (SDK actions, sparkles, settings, navigation).
-  useOutcomeToasts(resource.id as string);
+  useOutcomeToasts(rUri);
 
   // Single useEventSubscriptions call per file (enforced by
   // scripts/compliance/audit-hooks-ordering.ts); hooks like useOutcomeToasts
@@ -444,9 +444,17 @@ export function ResourceViewerPage({
     }
   }, [session]);
 
-  const handleEventClick = useCallback((_annotationId: string | null) => {
-    // ResourceViewer now manages scroll state internally
-  }, []);
+  // Clicking a history row reveals that annotation in the content. HistoryEvent
+  // renders these rows as buttons labelled "View annotation", so this used to be
+  // a focusable, screen-reader-announced control wired to a no-op.
+  // `beckon:focus` is the existing "scroll to and highlight" contract rather
+  // than a new prop chain — BrowseView already subscribed to it, AnnotateView
+  // now does too. See .plans/ASSIST-SURFACE-WARTS.md Lane D.
+  const handleEventClick = useCallback((id: string | null) => {
+    if (id) {
+      stateUnit?.beckon.focus(annotationId(id));
+    }
+  }, [stateUnit]);
 
   // Document rendering
   return (
@@ -475,6 +483,9 @@ export function ResourceViewerPage({
                 inProgress: tg('progressInProgress'),
                 complete: tg('progressComplete'),
                 failed: tg('progressFailed'),
+                paramsTitle: ta('paramsTitle'),
+                processing: (label) => ta('processing', { label }),
+                close: ta('close'),
               }}
             />
           )}

package/src/styles/core/inputs.css

@@ -137,7 +137,7 @@
   align-items: center;
   padding: 0.5rem 0.5rem 0.5rem 0.75rem;
   font-size: var(--semiont-text-sm);
-  font-family: var(--semiont-font-mono, monospace);
+  font-family: var(--semiont-font-mono);
   color: var(--semiont-text-tertiary);
   background-color: var(--semiont-color-gray-50);
   border-right: 1px solid var(--semiont-color-gray-300);

package/src/styles/features/compose.css

@@ -118,7 +118,7 @@
    highlight while a drag hovers. */
 .semiont-form__upload-dropzone[data-drag-over="true"] {
   border-color: var(--semiont-color-primary-500);
-  background: var(--semiont-color-primary-50, rgba(59, 130, 246, 0.06));
+  background: var(--semiont-color-primary-50);
 }
 
 /* Dark mode needs its own tint: primary-50 is a near-white wash that would

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

@@ -324,7 +324,7 @@
 }
 
 [data-theme="dark"] .semiont-browse-view__content tr:nth-child(even) td {
-  background: var(--semiont-color-gray-850, var(--semiont-color-gray-800));
+  background: var(--semiont-color-gray-800);
 }
 
 /* GFM task list checkboxes */

package/src/styles/features/static-pages.css

@@ -412,8 +412,8 @@
 }
 
 .semiont-static-warning-box {
-  background: var(--semiont-color-warning-50);
-  border-left: 4px solid var(--semiont-color-warning-500);
+  background: var(--semiont-color-amber-50);
+  border-left: 4px solid var(--semiont-color-amber-500);
   border-radius: 0.375rem;
   padding: 1rem 1.25rem;
   margin: 1.5rem 0;
@@ -427,7 +427,7 @@
 
 [data-theme="dark"] .semiont-static-warning-box {
   background: rgba(251, 146, 60, 0.1);
-  border-left-color: var(--semiont-color-warning-400);
+  border-left-color: var(--semiont-color-amber-400);
 }
 
 /* ========================================
@@ -447,27 +447,27 @@
 
 .semiont-static-badge-planned {
   background: rgba(251, 146, 60, 0.1);
-  color: var(--semiont-color-warning-700);
-  border: 1px solid var(--semiont-color-warning-200);
+  color: var(--semiont-color-amber-700);
+  border: 1px solid var(--semiont-color-amber-200);
 }
 
 .semiont-static-badge-active {
   background: rgba(34, 197, 94, 0.1);
-  color: var(--semiont-color-success-700);
-  border: 1px solid var(--semiont-color-success-200);
+  color: var(--semiont-color-green-700);
+  border: 1px solid var(--semiont-color-green-200);
 }
 
 /* Dark mode */
 [data-theme="dark"] .semiont-static-badge-planned {
   background: rgba(251, 146, 60, 0.15);
-  color: var(--semiont-color-warning-400);
-  border-color: var(--semiont-color-warning-600);
+  color: var(--semiont-color-amber-400);
+  border-color: var(--semiont-color-amber-600);
 }
 
 [data-theme="dark"] .semiont-static-badge-active {
   background: rgba(34, 197, 94, 0.15);
-  color: var(--semiont-color-success-400);
-  border-color: var(--semiont-color-success-600);
+  color: var(--semiont-color-green-400);
+  border-color: var(--semiont-color-green-600);
 }
 
 /* ========================================

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

@@ -33,8 +33,8 @@
   --semiont-motivation-comment-panel-bg-dark: rgba(55, 65, 81, 0.2);
 
   /* Button gradients */
-  --semiont-motivation-comment-button-bg: linear-gradient(to right, var(--semiont-color-purple-600), var(--semiont-color-indigo-600));
-  --semiont-motivation-comment-button-bg-hover: linear-gradient(to right, var(--semiont-color-purple-700), var(--semiont-color-indigo-700));
+  --semiont-motivation-comment-button-bg: linear-gradient(to right, var(--semiont-color-purple-600), var(--semiont-color-blue-600));
+  --semiont-motivation-comment-button-bg-hover: linear-gradient(to right, var(--semiont-color-purple-700), var(--semiont-color-blue-700));
 }
 
 /* ============================================

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

@@ -14,8 +14,8 @@
   /* Light theme colors */
   --semiont-motivation-reference-primary: var(--semiont-color-cyan-600);
   --semiont-motivation-reference-secondary: var(--semiont-color-blue-600);
-  --semiont-motivation-reference-bg: linear-gradient(to right, var(--semiont-color-cyan-200, #a5f3fc), var(--semiont-color-blue-200));
-  --semiont-motivation-reference-bg-hover: linear-gradient(to right, var(--semiont-color-cyan-300, #67e8f9), var(--semiont-color-blue-300));
+  --semiont-motivation-reference-bg: linear-gradient(to right, var(--semiont-color-cyan-200), var(--semiont-color-blue-200));
+  --semiont-motivation-reference-bg-hover: linear-gradient(to right, var(--semiont-color-cyan-300), var(--semiont-color-blue-300));
   --semiont-motivation-reference-border: rgba(6, 182, 212, 0.3);
   --semiont-motivation-reference-border-hover: rgba(6, 182, 212, 0.5);
   --semiont-motivation-reference-text: var(--semiont-color-gray-900);

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

@@ -405,12 +405,12 @@
 
 /* Login form pulsing border for first-launch nudge */
 @keyframes semiont-pulse-border {
-  0%, 100% { border-color: var(--semiont-color-primary-300, #93c5fd); }
-  50% { border-color: var(--semiont-color-primary-600, #2563eb); }
+  0%, 100% { border-color: var(--semiont-color-primary-300); }
+  50% { border-color: var(--semiont-color-primary-600); }
 }
 
 .semiont-panel__login-form--pulsing {
-  border: 2px solid var(--semiont-color-primary-400, #60a5fa);
-  border-radius: var(--semiont-panel-border-radius, 0.5rem);
+  border: 2px solid var(--semiont-color-primary-400);
+  border-radius: var(--semiont-panel-border-radius);
   animation: semiont-pulse-border 2s ease-in-out infinite;
 }

package/src/styles/utilities/motion.css

@@ -124,7 +124,7 @@
 .semiont-transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: var(--semiont-duration-base, 150ms);
+  transition-duration: var(--semiont-duration-base);
 }
 
 .semiont-transition-none {
@@ -134,58 +134,58 @@
 .semiont-transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: var(--semiont-duration-base, 150ms);
+  transition-duration: var(--semiont-duration-base);
 }
 
 .semiont-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: var(--semiont-duration-base, 150ms);
+  transition-duration: var(--semiont-duration-base);
 }
 
 .semiont-transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: var(--semiont-duration-base, 150ms);
+  transition-duration: var(--semiont-duration-base);
 }
 
 .semiont-transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: var(--semiont-duration-base, 150ms);
+  transition-duration: var(--semiont-duration-base);
 }
 
 /* Animation classes */
 .semiont-animate-fade-in {
-  animation: fadeIn var(--semiont-duration-base, 150ms) ease-in-out;
+  animation: fadeIn var(--semiont-duration-base) ease-in-out;
 }
 
 .semiont-animate-fade-out {
-  animation: fadeOut var(--semiont-duration-base, 150ms) ease-in-out;
+  animation: fadeOut var(--semiont-duration-base) ease-in-out;
 }
 
 .semiont-animate-slide-in-up {
-  animation: slideInUp var(--semiont-duration-moderate, 300ms) ease-out;
+  animation: slideInUp var(--semiont-duration-base) ease-out;
 }
 
 .semiont-animate-slide-in-down {
-  animation: slideInDown var(--semiont-duration-moderate, 300ms) ease-out;
+  animation: slideInDown var(--semiont-duration-base) ease-out;
 }
 
 .semiont-animate-slide-in-left {
-  animation: slideInLeft var(--semiont-duration-moderate, 300ms) ease-out;
+  animation: slideInLeft var(--semiont-duration-base) ease-out;
 }
 
 .semiont-animate-slide-in-right {
-  animation: slideInRight var(--semiont-duration-moderate, 300ms) ease-out;
+  animation: slideInRight var(--semiont-duration-base) ease-out;
 }
 
 .semiont-animate-scale-in {
-  animation: scaleIn var(--semiont-duration-base, 150ms) ease-out;
+  animation: scaleIn var(--semiont-duration-base) ease-out;
 }
 
 .semiont-animate-scale-out {
-  animation: scaleOut var(--semiont-duration-base, 150ms) ease-in;
+  animation: scaleOut var(--semiont-duration-base) ease-in;
 }
 
 .semiont-animate-spin {
@@ -299,13 +299,13 @@
   .semiont-motion-safe-transition-all {
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: var(--semiont-duration-base, 150ms);
+    transition-duration: var(--semiont-duration-base);
   }
 
   .semiont-motion-safe-transition-transform {
     transition-property: transform;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: var(--semiont-duration-base, 150ms);
+    transition-duration: var(--semiont-duration-base);
   }
 }