@happyvertical/smrt-content 0.34.6 → 0.34.8

package/dist/svelte/components/ContentEditor.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { ImageLike } from '@happyvertical/smrt-images/svelte';
 import { ImageUploader } from '@happyvertical/smrt-images/svelte';
+import { Form, Input, Select, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import { untrack } from 'svelte';
@@ -75,10 +76,17 @@ let {
   onCancel,
 }: Props = $props();
 
-let editForm = $state<HTMLFormElement | null>(null);
+// Unique per-instance form id so triggerSave() targets THIS editor's form even
+// when multiple ContentEditor / GovernedContentEditor instances are mounted
+// (a hardcoded id + getElementById would resolve to the first match in the DOM).
+const formId = $props.id();
 
 export function triggerSave() {
   if (saveDisabled) return;
+  const editForm =
+    typeof document !== 'undefined'
+      ? (document.getElementById(formId) as HTMLFormElement | null)
+      : null;
   if (editForm?.requestSubmit) {
     editForm.requestSubmit();
     return;
@@ -921,9 +929,8 @@ function removeAsset(id: string) {
 <div class="form-container">
   <div class="editor-grid" class:editor-grid--with-sidebar={showChatSidebar}>
     <!-- LEFT COLUMN (Document Canvas) -->
-    <form
-      bind:this={editForm}
-      id="content-edit-form"
+    <Form
+      id={formId}
       class="editor-main-col"
       onsubmit={handleSubmit}
     >
@@ -947,31 +954,31 @@ function removeAsset(id: string) {
       <div class="editor-toolbar">
         <div class="editor-toolbar-left">
           <div class="mui-field">
-            <select id="type-select" bind:value={formData.type} class="mui-input">
+            <Select id="type-select" bind:value={formData.type} class="mui-input">
               <option value="article">Article</option>
               <option value="document">Document</option>
               <option value="mirror">Mirror</option>
-            </select>
+            </Select>
             <label for="type-select">Type</label>
           </div>
           <div class="mui-field">
-            <select id="state-select" bind:value={formData.state} class="mui-input">
+            <Select id="state-select" bind:value={formData.state} class="mui-input">
               <option value="active">Active</option>
               <option value="highlighted">Highlighted</option>
               <option value="deprecated">Deprecated</option>
-            </select>
+            </Select>
             <label for="state-select">State</label>
           </div>
           <div class="mui-field">
-            <select id="status-select" bind:value={formData.status} class="mui-input">
+            <Select id="status-select" bind:value={formData.status} class="mui-input">
               <option value="draft">Draft</option>
               <option value="published">Published</option>
               <option value="archived">Archived</option>
-            </select>
+            </Select>
             <label for="status-select">Status</label>
           </div>
           <div class="mui-field">
-            <input id="publish-date-input" type="datetime-local" bind:value={formData.publish_date} class="mui-input" />
+            <Input id="publish-date-input" type="datetime-local" bind:value={formData.publish_date} class="mui-input" />
             <label for="publish-date-input">{t(M['content.content_editor.publish_date'])}</label>
           </div>
         </div>
@@ -989,12 +996,12 @@ function removeAsset(id: string) {
         <p class="save-notice">{saveNotice}</p>
       {/if}
 
-      <input 
-         type="text" 
-         class="document-title-input" 
+      <Input
+         type="text"
+         class="document-title-input"
          bind:value={formData.title}
          placeholder={t(M['content.content_editor.document_title_placeholder'])}
-         required 
+         required
       />
 
       {#if showUndoBanner}
@@ -1139,15 +1146,15 @@ function removeAsset(id: string) {
         <div class="editor-drawer-content">
           <label>
             Author:
-            <input type="text" bind:value={formData.author} placeholder={t(M['content.content_editor.author_name_placeholder'])} />
+            <Input type="text" bind:value={formData.author} placeholder={t(M['content.content_editor.author_name_placeholder'])} />
           </label>
           <label>
             Description:
-            <textarea bind:value={formData.description} rows="2" placeholder={t(M['content.content_editor.brief_summary_placeholder'])}></textarea>
+            <Textarea bind:value={formData.description} rows={2} placeholder={t(M['content.content_editor.brief_summary_placeholder'])}></Textarea>
           </label>
           <label>
             {t(M['content.content_editor.tags_comma_separated'])}
-            <input
+            <Input
               type="text"
               value={(formData.tags || []).join(', ')}
               placeholder={t(M['content.content_editor.tags_placeholder'])}
@@ -1205,11 +1212,11 @@ function removeAsset(id: string) {
                            : M['content.content_editor.evidence_item_plural'],
                        ),
                      })}</span>
-                     <select bind:value={bulkEvidenceStatus} disabled={selectedEvidenceCount === 0 || Boolean(evidenceBusy)}>
+                     <Select bind:value={bulkEvidenceStatus} disabled={selectedEvidenceCount === 0 || Boolean(evidenceBusy)}>
                        {#each evidenceStatuses as status}
                          <option value={status}>{status}</option>
                        {/each}
-                     </select>
+                     </Select>
                      <Button
                        variant="ghost"
                        size="sm"
@@ -1273,6 +1280,7 @@ function removeAsset(id: string) {
                              <details class="resource-claim">
                                <summary>
                                  <label class="evidence-select">
+                                   <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
                                    <input
                                      type="checkbox"
                                      checked={isResourceClaimSelected(claim)}
@@ -1356,22 +1364,22 @@ function removeAsset(id: string) {
                  </div>
                {/if}
                <div class="add-reference-row">
-                  <input type="text" bind:value={newReferenceId} placeholder={t(M['content.content_editor.reference_id_or_url_placeholder'])} />
+                  <Input type="text" bind:value={newReferenceId} placeholder={t(M['content.content_editor.reference_id_or_url_placeholder'])} />
                   <Button variant="ghost" type="button" class="add-reference-button" onclick={addReference}>Add</Button>
                </div>
             </div>
 
             <label>
               URL:
-              <input type="url" bind:value={formData.url} />
+              <Input type="url" bind:value={formData.url} />
             </label>
             <label>
               {t(M['content.content_editor.file_key'])}
-              <input type="text" bind:value={formData.fileKey} />
+              <Input type="text" bind:value={formData.fileKey} />
             </label>
           </div>
       </details>
-    </form>
+    </Form>
 
     {#if showChatSidebar}
       <aside class="editor-sidebar-col">
@@ -1430,7 +1438,7 @@ function removeAsset(id: string) {
     }
   }
 
-  .document-title-input {
+  .form-container :global(.document-title-input) {
     width: 100%;
     font-size: var(--smrt-typography-display-medium-size, 2.5rem);
     font-weight: var(--smrt-typography-weight-bold, 800);
@@ -1445,7 +1453,7 @@ function removeAsset(id: string) {
     font-family: inherit;
   }
 
-  .document-title-input::placeholder {
+  .form-container :global(.document-title-input)::placeholder {
     color: var(--smrt-color-outline-variant);
   }
 
@@ -1504,7 +1512,7 @@ function removeAsset(id: string) {
     z-index: 1;
   }
 
-  .mui-input {
+  .mui-field :global(.mui-input) {
     padding: 0.5rem 0.75rem;
     border-radius: 0.375rem;
     border: 1px solid var(--smrt-color-outline-variant);
@@ -1518,15 +1526,16 @@ function removeAsset(id: string) {
     transition: border-color 0.2s;
   }
 
-  .mui-input:focus {
+  .mui-field :global(.mui-input:focus) {
     outline: none;
     border-color: var(--smrt-color-primary);
   }
 
-  .editor-main-col {
+  .form-container :global(.editor-main-col) {
     display: flex;
     flex-direction: column;
     background: transparent;
+    width: 100%;
   }
 
   .editor-sidebar-col {
@@ -1612,11 +1621,6 @@ function removeAsset(id: string) {
     font-size: var(--smrt-typography-headline-small-size, 1.5rem);
   }
 
-  .form-container form {
-    display: block;
-    width: 100%;
-  }
-
   .form-container label {
     display: flex;
     flex-direction: column;
@@ -1626,34 +1630,6 @@ function removeAsset(id: string) {
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
   }
 
-  .form-container input,
-  .form-container select,
-  .form-container textarea {
-    padding: 0.75rem;
-    border: 1px solid var(--smrt-color-outline);
-    border-radius: 0.5rem;
-    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    transition: border-color 0.2s, box-shadow 0.2s;
-    font-family: inherit;
-    box-sizing: border-box;
-    width: 100%;
-    background: var(--smrt-color-surface-container-low);
-    color: var(--smrt-color-on-surface);
-  }
-
-  .form-container input:focus,
-  .form-container select:focus,
-  .form-container textarea:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
-  }
-
-  .form-container textarea {
-    resize: vertical;
-    min-height: 120px;
-  }
-  
   .references-section {
     display: flex;
     flex-direction: column;
@@ -1775,7 +1751,7 @@ function removeAsset(id: string) {
     font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
   }
 
-  .evidence-bulk-toolbar select {
+  .evidence-bulk-toolbar :global(.select) {
     border: 1px solid var(--smrt-color-outline-variant);
     border-radius: 0.375rem;
     padding: 0.25rem 0.5rem;
@@ -1953,7 +1929,7 @@ function removeAsset(id: string) {
     gap: 0.5rem;
   }
   
-  .add-reference-row input {
+  .add-reference-row :global(.input) {
     flex: 1;
   }
 

package/dist/svelte/components/ContentEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentEditor.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAEV,mCAAmC,EACnC,0CAA0C,EAE3C,MAAM,gCAAgC,CAAC;AAKxC,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,wBAAwB,CAAC;AAiBhC,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,0CAA0C,CAAC;IACrE,wBAAwB,CAAC,EAAE,mCAAmC,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,MAAM,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAwuCD,QAAA,MAAM,aAAa;;MAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ContentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentEditor.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAEV,mCAAmC,EACnC,0CAA0C,EAE3C,MAAM,gCAAgC,CAAC;AAKxC,OAAO,KAAK,EAEV,kBAAkB,EAEnB,MAAM,wBAAwB,CAAC;AAiBhC,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,0CAA0C,CAAC;IACrE,wBAAwB,CAAC,EAAE,mCAAmC,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,MAAM,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAivCD,QAAA,MAAM,aAAa;;MAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/svelte/components/ContentGovernanceAssignmentEditor.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { Form, Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import type {
@@ -95,81 +96,87 @@ function handleSubmit() {
 }
 </script>
 
-<form class="governance-editor" onsubmit={(event) => {
-  event.preventDefault();
-  handleSubmit();
-}}>
-  <label>
-    Label
-    <input type="text" bind:value={draft.label} />
-  </label>
-  <label>
-    {t(M['content.governance_assignment_editor.content_type'])}
-    <input type="text" bind:value={draft.contentType} required />
-  </label>
-  <label>
-    {t(M['content.governance_assignment_editor.content_variant'])}
-    <input type="text" bind:value={draft.contentVariant} />
-  </label>
-  <label>
-    {t(M['content.governance_assignment_editor.publication_profile'])}
-    <select bind:value={draft.publicationProfileKey}>
-      <option value="" disabled={profiles.length > 0}>{t(M['content.governance_assignment_editor.select_a_profile'])}</option>
-      {#each profiles as profile (profile.key)}
-        <option value={profile.key}>{profile.label}</option>
-      {/each}
-    </select>
-  </label>
-  <label>
-    {t(M['content.governance_assignment_editor.correction_profile'])}
-    <select bind:value={draft.correctionProfileKey}>
-      <option value="" disabled={profiles.length > 0}>{t(M['content.governance_assignment_editor.select_a_profile'])}</option>
-      {#each profiles as profile (profile.key)}
-        <option value={profile.key}>{profile.label}</option>
-      {/each}
-    </select>
-  </label>
-  <label>
-    {t(M['content.governance_assignment_editor.default_fact_relationship'])}
-    <select bind:value={draft.defaultFactRelationship}>
-      <option value="supports">supports</option>
-      <option value="referenced_in">referenced_in</option>
-      <option value="contradicts">contradicts</option>
-      <option value="related">related</option>
-    </select>
-  </label>
-
-  <div class="checkbox-grid">
-    <label class="checkbox">
-      <input type="checkbox" bind:checked={draft.enabled} />
-      Enabled
+<div class="governance-editor-shell">
+  <Form class="governance-editor" onsubmit={(event) => {
+    event.preventDefault();
+    handleSubmit();
+  }}>
+    <label>
+      Label
+      <Input type="text" bind:value={draft.label} />
     </label>
-    <label class="checkbox">
-      <input type="checkbox" bind:checked={draft.factLinkingEnabled} />
-      {t(M['content.governance_assignment_editor.fact_linking'])}
+    <label>
+      {t(M['content.governance_assignment_editor.content_type'])}
+      <Input type="text" bind:value={draft.contentType} required />
     </label>
-    <label class="checkbox">
-      <input type="checkbox" bind:checked={draft.transparencyEnabled} />
-      Transparency
+    <label>
+      {t(M['content.governance_assignment_editor.content_variant'])}
+      <Input type="text" bind:value={draft.contentVariant} />
     </label>
-    <label class="checkbox">
-      <input type="checkbox" bind:checked={draft.enforcePublishReadiness} />
-      {t(M['content.governance_assignment_editor.enforce_publish_readiness'])}
+    <label>
+      {t(M['content.governance_assignment_editor.publication_profile'])}
+      <Select bind:value={draft.publicationProfileKey}>
+        <option value="" disabled={profiles.length > 0}>{t(M['content.governance_assignment_editor.select_a_profile'])}</option>
+        {#each profiles as profile (profile.key)}
+          <option value={profile.key}>{profile.label}</option>
+        {/each}
+      </Select>
     </label>
-  </div>
-
-  <div class="actions">
-    <Button variant="primary" type="submit">{t(M['content.governance_assignment_editor.save_assignment'])}</Button>
-    {#if onCancel}
-      <Button variant="secondary" type="button" onclick={() => onCancel?.()}>
-        Cancel
-      </Button>
-    {/if}
-  </div>
-</form>
+    <label>
+      {t(M['content.governance_assignment_editor.correction_profile'])}
+      <Select bind:value={draft.correctionProfileKey}>
+        <option value="" disabled={profiles.length > 0}>{t(M['content.governance_assignment_editor.select_a_profile'])}</option>
+        {#each profiles as profile (profile.key)}
+          <option value={profile.key}>{profile.label}</option>
+        {/each}
+      </Select>
+    </label>
+    <label>
+      {t(M['content.governance_assignment_editor.default_fact_relationship'])}
+      <Select bind:value={draft.defaultFactRelationship}>
+        <option value="supports">supports</option>
+        <option value="referenced_in">referenced_in</option>
+        <option value="contradicts">contradicts</option>
+        <option value="related">related</option>
+      </Select>
+    </label>
+
+    <div class="checkbox-grid">
+      <label class="checkbox">
+        <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
+        <input type="checkbox" bind:checked={draft.enabled} />
+        Enabled
+      </label>
+      <label class="checkbox">
+        <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
+        <input type="checkbox" bind:checked={draft.factLinkingEnabled} />
+        {t(M['content.governance_assignment_editor.fact_linking'])}
+      </label>
+      <label class="checkbox">
+        <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
+        <input type="checkbox" bind:checked={draft.transparencyEnabled} />
+        Transparency
+      </label>
+      <label class="checkbox">
+        <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
+        <input type="checkbox" bind:checked={draft.enforcePublishReadiness} />
+        {t(M['content.governance_assignment_editor.enforce_publish_readiness'])}
+      </label>
+    </div>
+
+    <div class="actions">
+      <Button variant="primary" type="submit">{t(M['content.governance_assignment_editor.save_assignment'])}</Button>
+      {#if onCancel}
+        <Button variant="secondary" type="button" onclick={() => onCancel?.()}>
+          Cancel
+        </Button>
+      {/if}
+    </div>
+  </Form>
+</div>
 
 <style>
-  .governance-editor {
+  .governance-editor-shell :global(.governance-editor) {
     display: grid;
     gap: 0.75rem;
   }
@@ -180,11 +187,6 @@ function handleSubmit() {
     font-size: var(--smrt-typography-label-large-size, 0.9rem);
   }
 
-  input,
-  select {
-    width: 100%;
-  }
-
   .checkbox-grid,
   .actions {
     display: flex;

package/dist/svelte/components/ContentGovernanceAssignmentEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentGovernanceAssignmentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernanceAssignmentEditor.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,+BAA+B,EAC/B,4BAA4B,EAC7B,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC,+BAA+B,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAC1C,MAAM,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,+BAA+B,CAAC,KAAK,IAAI,CAAC;IACvE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAsKD,QAAA,MAAM,iCAAiC,2CAAwC,CAAC;AAChF,KAAK,iCAAiC,GAAG,UAAU,CAAC,OAAO,iCAAiC,CAAC,CAAC;AAC9F,eAAe,iCAAiC,CAAC"}
+{"version":3,"file":"ContentGovernanceAssignmentEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernanceAssignmentEditor.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,+BAA+B,EAC/B,4BAA4B,EAC7B,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC,+BAA+B,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,4BAA4B,EAAE,CAAC;IAC1C,MAAM,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,+BAA+B,CAAC,KAAK,IAAI,CAAC;IACvE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA6KD,QAAA,MAAM,iCAAiC,2CAAwC,CAAC;AAChF,KAAK,iCAAiC,GAAG,UAAU,CAAC,OAAO,iCAAiC,CAAC,CAAC;AAC9F,eAAe,iCAAiC,CAAC"}

package/dist/svelte/components/ContentGovernancePanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
+import { Input, Select, Textarea } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { Button } from '@happyvertical/smrt-ui/ui';
 import {
@@ -1128,6 +1129,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                   <details class="claim-audit-item">
                     <summary>
                       <label class="claim-audit-select">
+                        <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
                         <input
                           type="checkbox"
                           checked={isClaimSelected(claim)}
@@ -1251,7 +1253,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
 
           {#if showFactCatalog}
             <div class="fact-search">
-              <input
+              <Input
                 type="text"
                 bind:value={factQuery}
                 placeholder={t(M['content.governance_panel.search_fact_catalog'])}
@@ -1361,13 +1363,13 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
       {#if reviewProfiles.length > 0}
         <label class="workflow-field">
           {t(M['content.governance_panel.review_profile'])}
-          <select bind:value={activeReviewProfileKey}>
+          <Select bind:value={activeReviewProfileKey}>
             {#each reviewProfiles as profile (profile.profileKey)}
               <option value={profile.profileKey}>
                 {formatProfileLabel(profile.profileKey)}
               </option>
             {/each}
-          </select>
+          </Select>
         </label>
       {/if}
 
@@ -1440,23 +1442,23 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
         {#if availableCustomPolicies.length > 0}
           <label class="workflow-field">
             {t(M['content.governance_panel.app_review_policy'])}
-            <select bind:value={activeCustomPolicyKey}>
+            <Select bind:value={activeCustomPolicyKey}>
               {#each availableCustomPolicies as policy (policy.key)}
                 <option value={policy.key}>
                   {policy.label}
                 </option>
               {/each}
-            </select>
+            </Select>
           </label>
         {/if}
 
         <label class="workflow-field">
           {customReviewButtonLabel}
-          <textarea
-            rows="3"
+          <Textarea
+            rows={3}
             bind:value={customReviewText}
             placeholder={t(M['content.governance_panel.optional_review_instructions'])}
-          ></textarea>
+          ></Textarea>
         </label>
         <Button
           variant="primary"
@@ -1666,7 +1668,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
 
         <label class="workflow-field">
           Summary
-          <input
+          <Input
             type="text"
             bind:value={correctionSummary}
             placeholder={t(M['content.governance_panel.what_was_wrong'])}
@@ -1675,33 +1677,34 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
 
         <label class="workflow-field">
           {t(M['content.governance_panel.related_fact'])}
-          <select bind:value={correctionFactId}>
+          <Select bind:value={correctionFactId}>
             <option value="">{t(M['content.governance_panel.general_correction'])}</option>
             {#each selectedFactsResolved as fact (fact.id)}
               <option value={fact.id ?? ''}>{fact.textRefined}</option>
             {/each}
-          </select>
+          </Select>
         </label>
 
         <label class="workflow-field">
           {t(M['content.governance_panel.corrected_fact_text'])}
-          <textarea
-            rows="4"
+          <Textarea
+            rows={4}
             bind:value={correctedFactText}
             placeholder={t(M['content.governance_panel.provide_corrected_wording'])}
-          ></textarea>
+          ></Textarea>
         </label>
 
         <label class="workflow-field">
           {t(M['content.governance_panel.public_note'])}
-          <textarea
-            rows="3"
+          <Textarea
+            rows={3}
             bind:value={correctionPublicNote}
             placeholder={t(M['content.governance_panel.optional_public_correction_note'])}
-          ></textarea>
+          ></Textarea>
         </label>
 
         <label class="checkbox-row">
+          <!-- raw-primitive-allow: native checkbox; no Provider-free checkbox primitive (Toggle is a switch with different semantics, CheckboxInput requires a Provider) -->
           <input type="checkbox" bind:checked={publishCorrection} />
           {t(M['content.governance_panel.publish_immediately'])}
         </label>
@@ -1930,20 +1933,6 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
     font-size: var(--smrt-typography-body-medium-size, 0.85rem);
   }
 
-  .fact-search input,
-  .workflow-field input,
-  .workflow-field textarea,
-  .workflow-field select {
-    width: 100%;
-    box-sizing: border-box;
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-    border: 1px solid var(--smrt-color-outline);
-    background: var(--smrt-color-surface);
-    color: var(--smrt-color-on-surface);
-    font-family: inherit;
-  }
-
   .workflow-field {
     display: flex;
     flex-direction: column;

package/dist/svelte/components/ContentGovernancePanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentGovernancePanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernancePanel.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,EAIL,KAAK,0BAA0B,EAQ/B,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EAEd,MAAM,wBAAwB,CAAC;AAMhC,MAAM,MAAM,6BAA6B,GACrC,WAAW,GACX,OAAO,GACP,SAAS,GACT,cAAc,GACd,aAAa,GACb,UAAU,CAAC;AASf,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAC/D,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7E,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,cAAc,CAAC,EAAE,6BAA6B,EAAE,CAAC;CAClD;AAioDD,QAAA,MAAM,sBAAsB;gCA34Bc,MAAM;MA24BoB,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"ContentGovernancePanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernancePanel.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAIL,KAAK,0BAA0B,EAQ/B,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EAEd,MAAM,wBAAwB,CAAC;AAMhC,MAAM,MAAM,6BAA6B,GACrC,WAAW,GACX,OAAO,GACP,SAAS,GACT,cAAc,GACd,aAAa,GACb,UAAU,CAAC;AASf,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAC/D,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7E,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,cAAc,CAAC,EAAE,6BAA6B,EAAE,CAAC;CAClD;AAooDD,QAAA,MAAM,sBAAsB;gCA74Bc,MAAM;MA64BoB,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}