@happyvertical/smrt-content 0.34.5 → 0.34.7

package/dist/svelte/components/ContentGovernanceProfileEditor.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+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 type {
   ContentGovernanceProfileData,
   ContentReviewPolicyData,
@@ -81,72 +83,76 @@ function handleSubmit() {
 }
 </script>
 
-<form class="governance-editor" onsubmit={(event) => {
-  event.preventDefault();
-  handleSubmit();
-}}>
-  <label>
-    Key
-    <input type="text" bind:value={draft.key} required />
-  </label>
-  <label>
-    Label
-    <input type="text" bind:value={draft.label} />
-  </label>
-  <label>
-    Description
-    <textarea rows="2" bind:value={draft.description}></textarea>
-  </label>
-  <label class="checkbox">
-    <input type="checkbox" bind:checked={draft.enabled} />
-    Enabled
-  </label>
-
-  <div class="requirements">
-    <div class="requirements__header">
-      <strong>Requirements</strong>
-      <button type="button" class="secondary" onclick={addRequirement}>
-        {t(M['content.governance_profile_editor.add_requirement'])}
-      </button>
+<div class="governance-editor-shell">
+  <Form class="governance-editor" onsubmit={(event) => {
+    event.preventDefault();
+    handleSubmit();
+  }}>
+    <label>
+      Key
+      <Input type="text" bind:value={draft.key} required />
+    </label>
+    <label>
+      Label
+      <Input type="text" bind:value={draft.label} />
+    </label>
+    <label>
+      Description
+      <Textarea rows={2} bind:value={draft.description}></Textarea>
+    </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.enabled} />
+      Enabled
+    </label>
+
+    <div class="requirements">
+      <div class="requirements__header">
+        <strong>Requirements</strong>
+        <Button variant="secondary" type="button" onclick={addRequirement}>
+          {t(M['content.governance_profile_editor.add_requirement'])}
+        </Button>
+      </div>
+
+      {#each draft.requirements as requirement, index (`${requirement.policyKey}-${index}`)}
+        <div class="requirement-row">
+          <label>
+            Policy
+            <Select bind:value={requirement.policyKey}>
+              {#each policies as policy (policy.key)}
+                <option value={policy.key}>{policy.label}</option>
+              {/each}
+            </Select>
+          </label>
+          <label>
+            Label
+            <Input type="text" bind:value={requirement.label} />
+          </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={requirement.blocking} />
+            Blocking
+          </label>
+          <Button variant="danger" type="button" onclick={() => removeRequirement(index)}>
+            Remove
+          </Button>
+        </div>
+      {/each}
     </div>
 
-    {#each draft.requirements as requirement, index (`${requirement.policyKey}-${index}`)}
-      <div class="requirement-row">
-        <label>
-          Policy
-          <select bind:value={requirement.policyKey}>
-            {#each policies as policy (policy.key)}
-              <option value={policy.key}>{policy.label}</option>
-            {/each}
-          </select>
-        </label>
-        <label>
-          Label
-          <input type="text" bind:value={requirement.label} />
-        </label>
-        <label class="checkbox">
-          <input type="checkbox" bind:checked={requirement.blocking} />
-          Blocking
-        </label>
-        <button type="button" class="secondary" onclick={() => removeRequirement(index)}>
-          Remove
-        </button>
-      </div>
-    {/each}
-  </div>
-
-  <div class="actions">
-    <button type="submit">{t(M['content.governance_profile_editor.save_profile'])}</button>
-    {#if onCancel}
-      <button type="button" class="secondary" onclick={() => onCancel?.()}>
-        Cancel
-      </button>
-    {/if}
-  </div>
-</form>
+    <div class="actions">
+      <Button variant="primary" type="submit">{t(M['content.governance_profile_editor.save_profile'])}</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;
   }
@@ -157,12 +163,6 @@ function handleSubmit() {
     font-size: var(--smrt-typography-label-large-size, 0.9rem);
   }
 
-  input,
-  select,
-  textarea {
-    width: 100%;
-  }
-
   .checkbox {
     display: flex;
     align-items: center;

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":"AAMA,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;AAqJD,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"}

package/dist/svelte/components/ContentList.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 import { ConfirmDialog } from '@happyvertical/smrt-ui/feedback';
+import { Input, Select } from '@happyvertical/smrt-ui/forms';
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
 import type { Snippet } from 'svelte';
 import { untrack } from 'svelte';
 import { M } from '../i18n.contribution.js';
@@ -151,23 +153,23 @@ function cancelDelete() {
   
   <div class="content-controls">
     <div class="search-filters">
-      <input type="text" placeholder={t(M['content.content_list.search_placeholder'])} bind:value={searchTerm} />
-      
+      <Input type="text" placeholder={t(M['content.content_list.search_placeholder'])} bind:value={searchTerm} />
+
       {#if !type}
-        <select bind:value={selectedType}>
+        <Select bind:value={selectedType}>
           <option value="All Types">{t(M['content.content_list.all_types'])}</option>
           <option value="Articles">Articles</option>
           <option value="Documents">Documents</option>
           <option value="Mirrors">Mirrors</option>
-        </select>
+        </Select>
       {/if}
-      
-      <select bind:value={selectedStatus}>
+
+      <Select bind:value={selectedStatus}>
         <option value="All Statuses">{t(M['content.content_list.all_statuses'])}</option>
         <option value="Published">Published</option>
         <option value="Draft">Draft</option>
         <option value="Archived">Archived</option>
-      </select>
+      </Select>
       
       {#if controls}
         {@render controls()}
@@ -176,10 +178,14 @@ function cancelDelete() {
     
     <div class="actions-group">
       <div class="view-toggles">
-        <button 
+        <Button
+          variant="ghost"
+          size="sm"
           type="button"
-          class:active={viewMode === 'grid'} 
+          class={`view-toggle-btn${viewMode === 'grid' ? ' view-toggle-btn--active' : ''}`}
+          aria-pressed={viewMode === 'grid'}
           onclick={() => viewMode = 'grid'}
+          aria-label={t(M['content.content_list.grid_view'])}
           title={t(M['content.content_list.grid_view'])}
         >
           <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none">
@@ -188,11 +194,15 @@ function cancelDelete() {
             <rect x="14" y="14" width="7" height="7"></rect>
             <rect x="3" y="14" width="7" height="7"></rect>
           </svg>
-        </button>
-        <button 
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
           type="button"
-          class:active={viewMode === 'detailed'} 
+          class={`view-toggle-btn${viewMode === 'detailed' ? ' view-toggle-btn--active' : ''}`}
+          aria-pressed={viewMode === 'detailed'}
           onclick={() => viewMode = 'detailed'}
+          aria-label={t(M['content.content_list.detailed_list'])}
           title={t(M['content.content_list.detailed_list'])}
         >
           <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none">
@@ -203,11 +213,15 @@ function cancelDelete() {
             <line x1="3" y1="12" x2="3.01" y2="12"></line>
             <line x1="3" y1="18" x2="3.01" y2="18"></line>
           </svg>
-        </button>
-        <button 
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
           type="button"
-          class:active={viewMode === 'compact'} 
+          class={`view-toggle-btn${viewMode === 'compact' ? ' view-toggle-btn--active' : ''}`}
+          aria-pressed={viewMode === 'compact'}
           onclick={() => viewMode = 'compact'}
+          aria-label={t(M['content.content_list.compact_list'])}
           title={t(M['content.content_list.compact_list'])}
         >
           <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none">
@@ -215,16 +229,16 @@ function cancelDelete() {
             <line x1="3" y1="12" x2="21" y2="12"></line>
             <line x1="3" y1="18" x2="21" y2="18"></line>
           </svg>
-        </button>
+        </Button>
       </div>
-      
-      <button class="add-button" type="button" onclick={() => onAdd()}>
+
+      <Button variant="ghost" class="add-button" type="button" onclick={() => onAdd()}>
         <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none">
           <line x1="12" y1="5" x2="12" y2="19"></line>
           <line x1="5" y1="12" x2="19" y2="12"></line>
         </svg>
         {t(M['content.content_list.add_content'])}
-      </button>
+      </Button>
     </div>
   </div>
 
@@ -261,8 +275,8 @@ function cancelDelete() {
                 {#if getViewHref?.(content)}
                   <a class="icon-btn" href={getViewHref(content) || '#'} title={t(M['content.content_list.view_published_article'])} aria-label={t(M['content.content_list.view_published_article'])}>🔎</a>
                 {/if}
-                <button class="icon-btn" type="button" onclick={() => onEdit(content)} title={t(M['content.content_list.edit'])} aria-label={t(M['content.content_list.edit'])}>✏️</button>
-                <button class="icon-btn delete-icon" type="button" onclick={() => handleDeleteContent(content)} title={t(M['content.content_list.delete'])} aria-label={t(M['content.content_list.delete'])}>🗑️</button>
+                <Button variant="ghost" size="sm" class="icon-btn" type="button" onclick={() => onEdit(content)} title={t(M['content.content_list.edit'])} aria-label={t(M['content.content_list.edit'])}>✏️</Button>
+                <Button variant="ghost" size="sm" class="icon-btn delete-icon" type="button" onclick={() => handleDeleteContent(content)} title={t(M['content.content_list.delete'])} aria-label={t(M['content.content_list.delete'])}>🗑️</Button>
               </td>
             </tr>
           {/each}
@@ -314,14 +328,15 @@ function cancelDelete() {
             {#if getViewHref?.(content)}
               <a href={getViewHref(content) || '#'} class="quiet-action">{t(M['content.content_list.view_article'])}</a>
             {/if}
-            <button type="button" class="quiet-action" onclick={() => onEdit(content)}>{t(M['content.content_list.edit'])}</button>
-            <button
+            <Button variant="ghost" type="button" class="quiet-action" onclick={() => onEdit(content)}>{t(M['content.content_list.edit'])}</Button>
+            <Button
+              variant="ghost"
               type="button"
               class="quiet-action quiet-action--danger"
               onclick={() => handleDeleteContent(content)}
             >
               {t(M['content.content_list.delete'])}
-            </button>
+            </Button>
           </div>
         </article>
       {/each}
@@ -374,8 +389,8 @@ function cancelDelete() {
               {#if getViewHref?.(content)}
                 <a href={getViewHref(content) || '#'} class="view-btn">{t(M['content.content_list.view_article_button'])}</a>
               {/if}
-              <button onclick={() => onEdit(content)}>{t(M['content.content_list.edit'])}</button>
-              <button onclick={() => handleDeleteContent(content)} class="delete-btn">{t(M['content.content_list.delete'])}</button>
+              <Button variant="ghost" type="button" class="content-action-btn" onclick={() => onEdit(content)}>{t(M['content.content_list.edit'])}</Button>
+              <Button variant="ghost" type="button" class="content-action-btn delete-btn" onclick={() => handleDeleteContent(content)}>{t(M['content.content_list.delete'])}</Button>
             </div>
           </div>
         </div>
@@ -425,8 +440,8 @@ function cancelDelete() {
     align-items: center;
   }
 
-  .search-filters input,
-  .search-filters select {
+  .search-filters :global(.input),
+  .search-filters :global(.select) {
     padding: 0.5rem 0.9rem;
     border: 1px solid var(--smrt-color-outline);
     border-radius: 0.5rem;
@@ -436,13 +451,6 @@ function cancelDelete() {
     color: var(--smrt-color-on-surface);
   }
 
-  .search-filters input:focus,
-  .search-filters select:focus {
-    outline: none;
-    border-color: var(--smrt-color-primary);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--smrt-color-primary) 20%, transparent);
-  }
-
   .actions-group {
     display: flex;
     gap: 0.75rem;
@@ -457,7 +465,7 @@ function cancelDelete() {
     border: 1px solid var(--smrt-color-outline-variant);
   }
 
-  .view-toggles button {
+  .view-toggles :global(.view-toggle-btn) {
     background: transparent;
     border: none;
     padding: 0.4rem;
@@ -470,18 +478,18 @@ function cancelDelete() {
     transition: all 0.2s;
   }
 
-  .view-toggles button:hover {
+  .view-toggles :global(.view-toggle-btn:hover) {
     color: var(--smrt-color-on-surface);
     background: color-mix(in srgb, var(--smrt-color-shadow) 5%, transparent);
   }
 
-  .view-toggles button.active {
+  .view-toggles :global(.view-toggle-btn.view-toggle-btn--active) {
     background: var(--smrt-color-surface);
     color: var(--smrt-color-on-surface);
     box-shadow: var(--smrt-elevation-1, 0 1px 2px rgba(0,0,0,0.1));
   }
 
-  .add-button {
+  .actions-group :global(.add-button) {
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -500,7 +508,7 @@ function cancelDelete() {
     transition: transform 0.2s, box-shadow 0.2s;
   }
 
-  .add-button:hover {
+  .actions-group :global(.add-button:hover) {
     transform: translateY(-1px);
     box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--smrt-color-primary) 50%, transparent);
   }
@@ -660,7 +668,7 @@ function cancelDelete() {
     padding-top: 1rem;
   }
 
-  .content-actions button,
+  .content-actions :global(.content-action-btn),
   .content-actions a {
     flex: 1;
     padding: 0.5rem 1rem;
@@ -676,7 +684,7 @@ function cancelDelete() {
     text-decoration: none;
   }
 
-  .content-actions button:hover,
+  .content-actions :global(.content-action-btn:hover),
   .content-actions a:hover {
     background: var(--smrt-color-surface-variant);
     border-color: var(--smrt-color-outline);
@@ -686,11 +694,11 @@ function cancelDelete() {
     color: var(--smrt-color-primary) !important;
   }
 
-  .delete-btn {
+  .content-actions :global(.delete-btn) {
     color: var(--smrt-color-error) !important;
   }
 
-  .delete-btn:hover {
+  .content-actions :global(.delete-btn:hover) {
     background: var(--smrt-color-error-container) !important;
     border-color: var(--smrt-color-error) !important;
   }
@@ -754,7 +762,7 @@ function cancelDelete() {
     min-width: 8.5rem;
   }
 
-  .quiet-action {
+  .content-row__actions :global(.quiet-action) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -769,11 +777,11 @@ function cancelDelete() {
     cursor: pointer;
   }
 
-  .quiet-action:hover {
+  .content-row__actions :global(.quiet-action:hover) {
     background: var(--smrt-color-surface-container-low);
   }
 
-  .quiet-action--danger {
+  .content-row__actions :global(.quiet-action--danger) {
     color: var(--smrt-color-error);
   }
 
@@ -855,7 +863,7 @@ function cancelDelete() {
     white-space: nowrap;
   }
 
-  .icon-btn {
+  .actions-cell :global(.icon-btn) {
     background: transparent;
     border: none;
     cursor: pointer;
@@ -866,12 +874,12 @@ function cancelDelete() {
     opacity: 0.7;
   }
 
-  .icon-btn:hover {
+  .actions-cell :global(.icon-btn:hover) {
     background: var(--smrt-color-surface-variant);
     opacity: 1;
   }
 
-  .delete-icon:hover {
+  .actions-cell :global(.delete-icon:hover) {
     background: var(--smrt-color-error-container);
   }
 
@@ -912,8 +920,8 @@ function cancelDelete() {
       width: 100%;
     }
 
-    .search-filters input,
-    .search-filters select,
+    .search-filters :global(.input),
+    .search-filters :global(.select),
     .add-button {
       width: 100%;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ContentList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentList.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKrC,KAAK,gBAAgB,GAAG;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IAClD,MAAM,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;CAC/C,CAAC;AA4WF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ContentList.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ContentList.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKrC,KAAK,gBAAgB,GAAG;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IAClD,MAAM,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,MAAM,GAAG,IAAI,CAAC;CAC/C,CAAC;AA8WF,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}