@happyvertical/smrt-content 0.34.5 → 0.34.6

package/dist/svelte/components/ContentGovernancePanel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import {
   type ContentCorrectionData,
   type ContentGovernanceDefinitionsData,
@@ -1078,22 +1079,22 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
             <span><strong>{factAudit?.counts.contradicted ?? 0}</strong> contradicted</span>
             <span><strong>{factAudit?.counts.needs_review ?? 0}</strong> review</span>
           </div>
-          <button
+          <Button
+            variant="secondary"
             type="button"
-            class="secondary-button"
             disabled={factAuditBusy || selectedClaimCount === 0}
             onclick={() => void recheckSelectedClaims()}
           >
             {factAuditBusy ? 'Checking...' : `Recheck selected (${selectedClaimCount})`}
-          </button>
-          <button
+          </Button>
+          <Button
+            variant="secondary"
             type="button"
-            class="secondary-button"
             disabled={factAuditBusy}
             onclick={() => void repairFactAudit()}
           >
             {factAuditBusy ? 'Repairing...' : 'Repair audit'}
-          </button>
+          </Button>
         </div>
         <p class="claim-audit-help">
           {t(M['content.governance_panel.article_claims_help'])}
@@ -1141,9 +1142,9 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                     </summary>
                     <div class="claim-audit-item__body">
                       <div class="claim-audit-item__actions">
-                        <button
+                        <Button
+                          variant="secondary"
                           type="button"
-                          class="secondary-button"
                           disabled={factAuditBusy || !getClaimId(claim)}
                           onclick={() => {
                             const claimId = getClaimId(claim);
@@ -1151,7 +1152,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                           }}
                         >
                           {t(M['content.governance_panel.recheck_support'])}
-                        </button>
+                        </Button>
                       </div>
                       {#if claim.claimQuote}
                         <p><strong>{t(M['content.governance_panel.article_claim_label'])}</strong> {claim.claimQuote}</p>
@@ -1233,13 +1234,15 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                         {fact.status} · confidence {formatPercent(fact.confidence)}
                       </span>
                     </div>
-                    <button
+                    <Button
+                      variant="ghost"
+                      size="sm"
                       type="button"
                       class="fact-chip__remove"
                       onclick={() => fact.id && removeFact(fact.id)}
                     >
                       Remove
-                    </button>
+                    </Button>
                   </div>
                 {/each}
               </div>
@@ -1253,9 +1256,9 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                 bind:value={factQuery}
                 placeholder={t(M['content.governance_panel.search_fact_catalog'])}
               />
-              <button type="button" onclick={searchFactsFirstPage}>
+              <Button variant="primary" type="button" onclick={searchFactsFirstPage}>
                 Search
-              </button>
+              </Button>
             </div>
 
             {#if catalogError}
@@ -1278,13 +1281,15 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                           {fact.status} · {fact.domain || 'general'} · confidence {formatPercent(fact.confidence)}
                         </span>
                       </div>
-                      <button
+                      <Button
+                        variant="ghost"
+                        size="sm"
                         type="button"
                         disabled={!fact.id || selectedFactIds.includes(fact.id ?? '')}
                         onclick={() => addFact(fact)}
                       >
                         {!fact.id || selectedFactIds.includes(fact.id ?? '') ? 'Selected' : 'Add'}
-                      </button>
+                      </Button>
                     </div>
                   {/each}
                 </div>
@@ -1299,22 +1304,24 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                     {/if}
                   </span>
                   <div class="fact-pagination__actions">
-                    <button
+                    <Button
+                      variant="ghost"
+                      size="sm"
                       type="button"
-                      class="secondary-button"
                       disabled={catalogLoading || catalogPage <= 1}
                       onclick={browsePreviousFacts}
                     >
                       Previous
-                    </button>
-                    <button
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
                       type="button"
-                      class="secondary-button"
                       disabled={catalogLoading || !catalogHasNextPage}
                       onclick={browseNextFacts}
                     >
                       Next
-                    </button>
+                    </Button>
                   </div>
                 </div>
               {/if}
@@ -1414,7 +1421,8 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
 
       <div class="review-actions">
         {#each activeProfileReviewActions as action (action.policyKey ?? action.kind)}
-          <button
+          <Button
+            variant="primary"
             type="button"
             disabled={reviewBusy !== null}
             onclick={() => void runReview(action)}
@@ -1424,7 +1432,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
             {:else}
               Run {action.label}
             {/if}
-          </button>
+          </Button>
         {/each}
       </div>
 
@@ -1450,7 +1458,8 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
             placeholder={t(M['content.governance_panel.optional_review_instructions'])}
           ></textarea>
         </label>
-        <button
+        <Button
+          variant="primary"
           type="button"
           disabled={reviewBusy !== null || !canRunCustomReview()}
           onclick={() =>
@@ -1468,7 +1477,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
           {:else}
             Run {customReviewButtonLabel}
           {/if}
-        </button>
+        </Button>
       </div>
 
       <div class="review-list">
@@ -1697,13 +1706,14 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
           {t(M['content.governance_panel.publish_immediately'])}
         </label>
 
-        <button
+        <Button
+          variant="primary"
           type="button"
           disabled={correctionBusy || correctionSummary.trim().length === 0}
           onclick={() => void issueCorrection()}
         >
           {correctionBusy ? 'Issuing correction...' : 'Issue Correction'}
-        </button>
+        </Button>
 
         <div class="review-list">
           <div class="section-caption">{t(M['content.governance_panel.published_history'])}</div>
@@ -1736,14 +1746,14 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
             <div style="display: flex; align-items: center; gap: 0.5rem;">
               Versions
             </div>
-            <button
+            <Button
+              variant="secondary"
               type="button"
-              class="secondary-button"
               disabled={versionBusy}
               onclick={(e) => { e.preventDefault(); void createSnapshot(); }}
             >
               {versionBusy ? 'Working...' : 'Create Snapshot'}
-            </button>
+            </Button>
           </div>
           <svg class="drawer-icon" style="margin-left: 1rem;" viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
         </summary>
@@ -1765,9 +1775,9 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                 {/if}
                 <div class="version-card__footer">
                   <span>{formatTimestamp(version.createdAt)}</span>
-                  <button
+                  <Button
+                    variant="secondary"
                     type="button"
-                    class="secondary-button"
                     disabled={versionBusy || version.version === null || version.version === undefined}
                     onclick={() => {
                       if (
@@ -1779,7 +1789,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
                     }}
                   >
                     Restore
-                  </button>
+                  </Button>
                 </div>
               </div>
             {/each}
@@ -1943,30 +1953,6 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
     font-weight: var(--smrt-typography-weight-medium, 500);
   }
 
-  .fact-search button,
-  .review-actions button {
-    border: none;
-    border-radius: 0.5rem;
-    padding: 0.7rem 0.95rem;
-    background: var(--smrt-color-primary);
-    color: var(--smrt-color-on-primary, white);
-    cursor: pointer;
-    font-weight: var(--smrt-typography-weight-semibold, 600);
-  }
-
-  .fact-search button:disabled,
-  .review-actions button:disabled,
-  .fact-pagination button:disabled {
-    cursor: not-allowed;
-    opacity: 0.65;
-  }
-
-  .secondary-button {
-    background: var(--smrt-color-surface);
-    color: var(--smrt-color-on-surface);
-    border: 1px solid var(--smrt-color-outline-variant);
-  }
-
   .fact-chip-list,
   .fact-catalog__list,
   .claim-audit-group,
@@ -2060,7 +2046,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
     gap: 0.25rem;
   }
 
-  .fact-chip__remove {
+  .fact-chip :global(.fact-chip__remove) {
     background: transparent !important;
     color: var(--smrt-color-error) !important;
     padding: 0 !important;

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":"AAKA,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;AAgoDD,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":"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"}

package/dist/svelte/components/ContentGovernancePolicyEditor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { ContentReviewPolicyData } from '../../mock-smrt-client';
 import { M } from '../i18n.tools.js';
 
@@ -70,11 +71,11 @@ function handleSubmit() {
     Enabled
   </label>
   <div class="actions">
-    <button type="submit">{t(M['content.governance_policy_editor.save_policy'])}</button>
+    <Button variant="primary" type="submit">{t(M['content.governance_policy_editor.save_policy'])}</Button>
     {#if onCancel}
-      <button type="button" class="secondary" onclick={() => onCancel?.()}>
+      <Button variant="secondary" type="button" onclick={() => onCancel?.()}>
         Cancel
-      </button>
+      </Button>
     {/if}
   </div>
 </form>

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

@@ -1 +1 @@
-{"version":3,"file":"ContentGovernancePolicyEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernancePolicyEditor.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAItE,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAiFD,QAAA,MAAM,6BAA6B,2CAAwC,CAAC;AAC5E,KAAK,6BAA6B,GAAG,UAAU,CAAC,OAAO,6BAA6B,CAAC,CAAC;AACtF,eAAe,6BAA6B,CAAC"}
+{"version":3,"file":"ContentGovernancePolicyEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernancePolicyEditor.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAItE,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC1C,MAAM,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,uBAAuB,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAkFD,QAAA,MAAM,6BAA6B,2CAAwC,CAAC;AAC5E,KAAK,6BAA6B,GAAG,UAAU,CAAC,OAAO,6BAA6B,CAAC,CAAC;AACtF,eAAe,6BAA6B,CAAC"}

package/dist/svelte/components/ContentGovernanceProfileEditor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type {
   ContentGovernanceProfileData,
   ContentReviewPolicyData,
@@ -105,9 +106,9 @@ function handleSubmit() {
   <div class="requirements">
     <div class="requirements__header">
       <strong>Requirements</strong>
-      <button type="button" class="secondary" onclick={addRequirement}>
+      <Button variant="secondary" type="button" onclick={addRequirement}>
         {t(M['content.governance_profile_editor.add_requirement'])}
-      </button>
+      </Button>
     </div>
 
     {#each draft.requirements as requirement, index (`${requirement.policyKey}-${index}`)}
@@ -128,19 +129,19 @@ function handleSubmit() {
           <input type="checkbox" bind:checked={requirement.blocking} />
           Blocking
         </label>
-        <button type="button" class="secondary" onclick={() => removeRequirement(index)}>
+        <Button variant="danger" type="button" onclick={() => removeRequirement(index)}>
           Remove
-        </button>
+        </Button>
       </div>
     {/each}
   </div>
 
   <div class="actions">
-    <button type="submit">{t(M['content.governance_profile_editor.save_profile'])}</button>
+    <Button variant="primary" type="submit">{t(M['content.governance_profile_editor.save_profile'])}</Button>
     {#if onCancel}
-      <button type="button" class="secondary" onclick={() => onCancel?.()}>
+      <Button variant="secondary" type="button" onclick={() => onCancel?.()}>
         Cancel
-      </button>
+      </Button>
     {/if}
   </div>
 </form>

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

@@ -1 +1 @@
-{"version":3,"file":"ContentGovernanceProfileEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernanceProfileEditor.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,4BAA4B,EAC5B,uBAAuB,EACxB,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,4BAA4B,CAAC,KAAK,IAAI,CAAC;IACjE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA+ID,QAAA,MAAM,8BAA8B,2CAAwC,CAAC;AAC7E,KAAK,8BAA8B,GAAG,UAAU,CAAC,OAAO,8BAA8B,CAAC,CAAC;AACxF,eAAe,8BAA8B,CAAC"}
+{"version":3,"file":"ContentGovernanceProfileEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentGovernanceProfileEditor.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,4BAA4B,EAC5B,uBAAuB,EACxB,MAAM,wBAAwB,CAAC;AAIhC,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,4BAA4B,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,4BAA4B,CAAC,KAAK,IAAI,CAAC;IACjE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAgJD,QAAA,MAAM,8BAA8B,2CAAwC,CAAC;AAC7E,KAAK,8BAA8B,GAAG,UAAU,CAAC,OAAO,8BAA8B,CAAC,CAAC;AACxF,eAAe,8BAA8B,CAAC"}

package/dist/svelte/components/ContentImageBrowser.svelte

@@ -4,6 +4,7 @@ import {
   ImageUploader,
 } from '@happyvertical/smrt-images/svelte';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { ContentEditorAsset } from '../content-editor-form';
 import { M } from '../i18n.editor.js';
 
@@ -87,13 +88,13 @@ function handleSelect(selected: ImageLike | File | string) {
           </div>
           <div class="asset-actions">
             {#if onUseAsset}
-              <button type="button" onclick={() => onUseAsset?.(asset)}>{selectActionLabel}</button>
+              <Button variant="ghost" type="button" class="asset-action-btn" onclick={() => onUseAsset?.(asset)}>{selectActionLabel}</Button>
             {/if}
             {#if onUseAsThumbnail && assetId && thumbnailAssetId !== assetId}
-              <button type="button" onclick={() => onUseAsThumbnail?.(assetId)}>Thumbnail</button>
+              <Button variant="ghost" type="button" class="asset-action-btn" onclick={() => onUseAsThumbnail?.(assetId)}>Thumbnail</Button>
             {/if}
             {#if onRemoveAsset && assetId}
-              <button type="button" class="danger" onclick={() => onRemoveAsset?.(assetId)}>Remove</button>
+              <Button variant="ghost" type="button" class="asset-action-btn asset-action-btn--danger" onclick={() => onRemoveAsset?.(assetId)}>Remove</Button>
             {/if}
           </div>
         </article>
@@ -108,14 +109,14 @@ function handleSelect(selected: ImageLike | File | string) {
       <ImageUploader {apiBaseUrl} onSelect={handleSelect} onCancel={() => showUploader = false} />
     </div>
   {:else if onSelectImage}
-    <button type="button" class="add-image-button" onclick={() => showUploader = true}>
+    <Button variant="ghost" type="button" class="asset-action-btn add-image-button" onclick={() => showUploader = true}>
       <svg viewBox="0 0 24 24" aria-hidden="true">
         <rect x="3" y="3" width="18" height="18" rx="2"></rect>
         <circle cx="8.5" cy="8.5" r="1.5"></circle>
         <path d="m21 15-5-5L5 21"></path>
       </svg>
       {addButtonLabel}
-    </button>
+    </Button>
   {/if}
 </div>
 
@@ -197,7 +198,7 @@ function handleSelect(selected: ImageLike | File | string) {
     gap: 0.5rem;
   }
 
-  button {
+  .content-image-browser :global(.asset-action-btn) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -214,19 +215,19 @@ function handleSelect(selected: ImageLike | File | string) {
     padding: 0.5rem 0.875rem;
   }
 
-  button:hover {
+  .content-image-browser :global(.asset-action-btn:hover) {
     background: var(--smrt-color-surface-container-high);
   }
 
-  button.danger {
+  .content-image-browser :global(.asset-action-btn--danger) {
     color: var(--smrt-color-error);
   }
 
-  .add-image-button {
+  .content-image-browser :global(.add-image-button) {
     justify-self: start;
   }
 
-  .add-image-button svg {
+  .content-image-browser :global(.add-image-button svg) {
     width: 1rem;
     height: 1rem;
     fill: none;

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

@@ -1 +1 @@
-{"version":3,"file":"ContentImageBrowser.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentImageBrowser.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,SAAS,EAEf,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAIjE,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AA+GD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ContentImageBrowser.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentImageBrowser.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,SAAS,EAEf,MAAM,mCAAmC,CAAC;AAG3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAIjE,MAAM,WAAW,KAAK;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAgHD,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/ContentImageChooser.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import {
   type ContentBodyFormat,
   extractBodyImages,
@@ -48,7 +49,9 @@ function cycle(delta: number) {
 {#if activeImage}
   <div class="content-image-chooser" aria-label={t(M['content.content_image_chooser.body_images'])}>
     {#if hasMultiple}
-      <button
+      <Button
+        variant="ghost"
+        size="sm"
         type="button"
         class="chooser-arrow"
         aria-label={t(M['content.content_image_chooser.previous_body_image'])}
@@ -57,10 +60,12 @@ function cycle(delta: number) {
         <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <polyline points="15 18 9 12 15 6"></polyline>
         </svg>
-      </button>
+      </Button>
     {/if}
 
-    <button
+    <Button
+      variant="ghost"
+      size="sm"
       type="button"
       class="chooser-preview"
       aria-label={t(M['content.content_image_chooser.focus_selected_body_image'])}
@@ -68,10 +73,12 @@ function cycle(delta: number) {
     >
       <img src={activeImage.src} alt={activeImage.alt || 'Body image'} />
       <span>{normalizedIndex + 1} / {images.length}</span>
-    </button>
+    </Button>
 
     {#if hasMultiple}
-      <button
+      <Button
+        variant="ghost"
+        size="sm"
         type="button"
         class="chooser-arrow"
         aria-label={t(M['content.content_image_chooser.next_body_image'])}
@@ -80,7 +87,7 @@ function cycle(delta: number) {
         <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <polyline points="9 18 15 12 9 6"></polyline>
         </svg>
-      </button>
+      </Button>
     {/if}
   </div>
 {/if}
@@ -93,8 +100,8 @@ function cycle(delta: number) {
     min-height: 2.75rem;
   }
 
-  .chooser-arrow,
-  .chooser-preview {
+  .content-image-chooser :global(.chooser-arrow),
+  .content-image-chooser :global(.chooser-preview) {
     border: 1px solid var(--smrt-color-outline-variant);
     background: var(--smrt-color-surface-container);
     color: var(--smrt-color-on-surface);
@@ -102,7 +109,7 @@ function cycle(delta: number) {
     cursor: pointer;
   }
 
-  .chooser-arrow {
+  .content-image-chooser :global(.chooser-arrow) {
     width: 2.25rem;
     height: 2.25rem;
     display: grid;
@@ -110,12 +117,12 @@ function cycle(delta: number) {
     padding: 0;
   }
 
-  .chooser-arrow:disabled {
+  .content-image-chooser :global(.chooser-arrow:disabled) {
     cursor: not-allowed;
     opacity: 0.38;
   }
 
-  .chooser-preview {
+  .content-image-chooser :global(.chooser-preview) {
     display: inline-flex;
     align-items: center;
     gap: 0.45rem;
@@ -124,7 +131,7 @@ function cycle(delta: number) {
     font-weight: var(--smrt-typography-weight-bold, 650);
   }
 
-  .chooser-preview img {
+  .content-image-chooser :global(.chooser-preview img) {
     width: 2rem;
     height: 2rem;
     border-radius: var(--smrt-radius-full, 9999px);

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

@@ -1 +1 @@
-{"version":3,"file":"ContentImageChooser.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentImageChooser.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,iBAAiB,EAGvB,MAAM,mBAAmB,CAAC;AAI3B,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAmED,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ContentImageChooser.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentImageChooser.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,iBAAiB,EAGvB,MAAM,mBAAmB,CAAC;AAI3B,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAoED,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}