@happyvertical/smrt-content 0.55.16 → 0.55.17

package/dist/svelte/components/ContentEditor.svelte

@@ -1016,7 +1016,7 @@ function removeAsset(id: string) {
 }
 </script>
 
-<div class="form-container">
+<div class="form-container" data-smrt-component="ContentEditor">
   <div class="editor-grid" class:editor-grid--with-sidebar={showChatSidebar}>
     <!-- LEFT COLUMN (Document Canvas) -->
     <Form
@@ -1521,6 +1521,8 @@ function removeAsset(id: string) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .form-container {
     width: 100%;
     margin: 0 auto;
@@ -1712,8 +1714,8 @@ function removeAsset(id: string) {
     padding: 1.25rem;
     height: 100%;
     box-sizing: border-box;
-    background: var(--smrt-color-surface-container-low, #f8fafc);
-    color: var(--smrt-color-on-surface, #1f2937);
+    background: var(--smrt-color-surface-container-low);
+    color: var(--smrt-color-on-surface);
   }
 
   .chat-sidebar-empty-state h3,
@@ -1757,7 +1759,7 @@ function removeAsset(id: string) {
     align-items: center;
     background: var(--smrt-color-surface);
     border: 1px solid var(--smrt-color-outline);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     padding: 0.25rem 0.25rem 0.25rem 0.75rem;
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
     color: var(--smrt-color-on-surface);
@@ -1948,7 +1950,7 @@ function removeAsset(id: string) {
   .evidence-status {
     align-items: center;
     border: 1px solid var(--smrt-color-outline-variant);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     display: inline-flex;
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-bold, 800);
@@ -2050,7 +2052,7 @@ function removeAsset(id: string) {
   }
 
   .add-reference-row :global(.add-reference-button:hover) {
-    background: var(--smrt-color-surface-container-low, #f1f5f9);
+    background: var(--smrt-color-surface-container-low);
   }
   
   .media-gallery :global(.add-image-btn) {
@@ -2058,19 +2060,19 @@ function removeAsset(id: string) {
     align-items: center;
     gap: 0.5rem;
     background: var(--smrt-color-surface, white);
-    border: 1px solid var(--smrt-color-outline, #cbd5e1);
+    border: 1px solid var(--smrt-color-outline);
     padding: 0.75rem 1.25rem;
     border-radius: var(--smrt-radius-md, 0.5rem);
-    color: var(--smrt-color-on-surface-variant, #475569);
+    color: var(--smrt-color-on-surface-variant);
     font-weight: var(--smrt-typography-weight-medium, 500);
     cursor: pointer;
     transition: all 0.2s;
   }
 
   .media-gallery :global(.add-image-btn:hover) {
-    border-color: var(--smrt-color-primary, #94a3b8);
-    color: var(--smrt-color-on-surface, #1e293b);
-    background: var(--smrt-color-surface-container-low, #f1f5f9);
+    border-color: var(--smrt-color-primary);
+    color: var(--smrt-color-on-surface);
+    background: var(--smrt-color-surface-container-low);
   }
 
   .editor-toolbar-right :global(.save-button) {
@@ -2101,7 +2103,7 @@ function removeAsset(id: string) {
 
   .save-notice {
     font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-    color: var(--smrt-color-primary, #3b82f6);
+    color: var(--smrt-color-primary);
   }
 
   .inline-uploader-container {
@@ -2110,7 +2112,7 @@ function removeAsset(id: string) {
     max-height: 60vh;
     overflow-y: auto;
     background: var(--smrt-color-surface);
-    border: 1px solid var(--smrt-color-outline-variant, #e2e8f0);
+    border: 1px solid var(--smrt-color-outline-variant);
     margin-top: 1rem;
     border-radius: 0.75rem;
     box-shadow: var(--smrt-elevation-2, 0 4px 6px -1px color-mix(in srgb, var(--smrt-color-shadow) 5%, transparent), 0 2px 4px -1px color-mix(in srgb, var(--smrt-color-shadow) 3%, transparent));
@@ -2185,7 +2187,7 @@ function removeAsset(id: string) {
     border-radius: 0.5rem;
     overflow: hidden;
     border: 2px solid transparent;
-    background: var(--smrt-color-surface-container-high, #242424);
+    background: var(--smrt-color-surface-container-high);
     transition: border-color 0.2s;
   }
 
@@ -2198,7 +2200,7 @@ function removeAsset(id: string) {
   }
 
   .media-item.is-thumbnail {
-    border-color: var(--smrt-color-primary, #3b82f6);
+    border-color: var(--smrt-color-primary);
   }
 
   .media-item-image {
@@ -2244,18 +2246,18 @@ function removeAsset(id: string) {
     background: var(--smrt-color-surface);
   }
 
-  .media-item-overlay :global(.btn-remove-asset:hover) {
-    background: var(--smrt-color-error-container) !important;
-    color: var(--smrt-color-error) !important;
-    border-color: var(--smrt-color-error) !important;
+  .media-item-overlay :global(.btn-remove-asset:hover:not(:disabled):not(.disabled)) {
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-error);
+    border-color: var(--smrt-color-error);
   }
 
   .thumbnail-badge {
     position: absolute;
     top: 0.25rem;
     left: 0.25rem;
-    background: var(--smrt-color-primary, #3b82f6);
-    color: var(--smrt-color-on-primary, #ffffff);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
     font-size: var(--smrt-typography-label-small-size, 0.65rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
     padding: 0.15rem 0.4rem;
@@ -2268,14 +2270,14 @@ function removeAsset(id: string) {
   .drop-zone {
     position: relative;
     transition: border-color 0.2s, background 0.2s;
-    border: 2px dashed var(--smrt-color-outline-variant, #e2e8f0);
+    border: 2px dashed var(--smrt-color-outline-variant);
     border-radius: 0.75rem;
     padding: 1.5rem;
   }
 
   .drop-zone-active {
-    border-color: var(--smrt-color-primary, #3b82f6);
-    background: color-mix(in srgb, var(--smrt-color-primary, #3b82f6) 6%, transparent);
+    border-color: var(--smrt-color-primary);
+    background: color-mix(in srgb, var(--smrt-color-primary) 6%, transparent);
   }
 
   .drop-overlay {
@@ -2287,14 +2289,14 @@ function removeAsset(id: string) {
     align-items: center;
     justify-content: center;
     gap: 0.75rem;
-    background: color-mix(in srgb, var(--smrt-color-primary, #3b82f6) 12%, var(--smrt-color-surface, white) 88%);
+    background: color-mix(in srgb, var(--smrt-color-primary) 12%, var(--smrt-color-surface, white) 88%);
     border-radius: 0.5rem;
     pointer-events: none;
     animation: drop-pulse 0.3s ease-out;
   }
 
   .drop-overlay svg {
-    color: var(--smrt-color-primary, #3b82f6);
+    color: var(--smrt-color-primary);
     opacity: 0.8;
   }
 
@@ -2302,4 +2304,5 @@ function removeAsset(id: string) {
     from { opacity: 0; transform: scale(0.96); }
     to { opacity: 1; transform: scale(1); }
   }
+}
 </style>

package/dist/svelte/components/ContentGovernanceAssignmentEditor.svelte

@@ -100,7 +100,7 @@ function handleSubmit() {
 }
 </script>
 
-<div class="governance-editor-shell">
+<div class="governance-editor-shell" data-smrt-component="ContentGovernanceAssignmentEditor">
   <Form class="governance-editor" onsubmit={(event) => {
     event.preventDefault();
     handleSubmit();
@@ -180,6 +180,8 @@ function handleSubmit() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .governance-editor-shell :global(.governance-editor) {
     display: grid;
     gap: 0.75rem;
@@ -203,4 +205,5 @@ function handleSubmit() {
     align-items: center;
     gap: 0.5rem;
   }
+}
 </style>

package/dist/svelte/components/ContentGovernanceManager.svelte

@@ -141,7 +141,7 @@ function cancelEditing() {
 }
 </script>
 
-<div class="governance-manager">
+<div class="governance-manager" data-smrt-component="ContentGovernanceManager">
   <div class="governance-manager__header">
     <div>
       <h3>{t(M['content.governance_manager.content_governance'])}</h3>
@@ -299,6 +299,8 @@ function cancelEditing() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .governance-manager {
     display: grid;
     gap: 1rem;
@@ -343,4 +345,5 @@ function cancelEditing() {
   .error {
     color: var(--smrt-color-error);
   }
+}
 </style>

package/dist/svelte/components/ContentGovernancePanel.svelte

@@ -1088,7 +1088,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
 }
 </script>
 
-<div class="factual-workflow">
+<div class="factual-workflow" data-smrt-component="ContentGovernancePanel">
   {#if isSectionVisible('factAudit')}
     <details class="editor-drawer" open={(factAudit?.counts.total ?? 0) > 0}>
     <summary class="editor-drawer-header">
@@ -1848,6 +1848,8 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
 />
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .editor-drawer {
     margin: 0 0 2rem 0;
     padding: 0;
@@ -2070,9 +2072,13 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
   }
 
   .fact-chip :global(.fact-chip__remove) {
-    background: transparent !important;
-    color: var(--smrt-color-error) !important;
-    padding: 0 !important;
+    background: transparent;
+    color: var(--smrt-color-error);
+    padding: 0;
+  }
+
+  .fact-chip :global(.fact-chip__remove:hover:not(:disabled):not(.disabled)) {
+    background: transparent;
   }
 
   .review-card {
@@ -2225,7 +2231,7 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
   }
 
   .pill {
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     padding: 0.2rem 0.55rem;
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-bold, 700);
@@ -2279,4 +2285,5 @@ function getVersionProvenanceCopy(version: ContentVersionData) {
     background: color-mix(in srgb, var(--smrt-color-primary) 10%, transparent);
     color: var(--smrt-color-on-primary-container);
   }
+}
 </style>

package/dist/svelte/components/ContentGovernancePolicyEditor.svelte

@@ -46,7 +46,7 @@ function handleSubmit() {
 }
 </script>
 
-<div class="governance-editor-shell">
+<div class="governance-editor-shell" data-smrt-component="ContentGovernancePolicyEditor">
   <Form class="governance-editor" onsubmit={(event) => {
     event.preventDefault();
     handleSubmit();
@@ -88,6 +88,8 @@ function handleSubmit() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .governance-editor-shell :global(.governance-editor) {
     display: grid;
     gap: 0.75rem;
@@ -109,4 +111,5 @@ function handleSubmit() {
     display: flex;
     gap: 0.75rem;
   }
+}
 </style>

package/dist/svelte/components/ContentGovernanceProfileEditor.svelte

@@ -87,7 +87,7 @@ function handleSubmit() {
 }
 </script>
 
-<div class="governance-editor-shell">
+<div class="governance-editor-shell" data-smrt-component="ContentGovernanceProfileEditor">
   <Form class="governance-editor" onsubmit={(event) => {
     event.preventDefault();
     handleSubmit();
@@ -156,6 +156,8 @@ function handleSubmit() {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .governance-editor-shell :global(.governance-editor) {
     display: grid;
     gap: 0.75rem;
@@ -186,4 +188,5 @@ function handleSubmit() {
     align-items: center;
     flex-wrap: wrap;
   }
+}
 </style>

package/dist/svelte/components/ContentImageBrowser.svelte

@@ -76,7 +76,7 @@ function handleSelect(selected: ImageLike | File | string) {
 }
 </script>
 
-<div class="content-image-browser">
+<div class="content-image-browser" data-smrt-component="ContentImageBrowser">
   {#if assets.length}
     <div class="asset-grid">
       {#each assets as asset, index (asset.id || `${getAssetLabel(asset)}-${index}`)}
@@ -131,6 +131,8 @@ function handleSelect(selected: ImageLike | File | string) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .content-image-browser {
     display: grid;
     gap: 1rem;
@@ -251,4 +253,5 @@ function handleSelect(selected: ImageLike | File | string) {
     border-radius: 0.5rem;
     overflow: hidden;
   }
+}
 </style>

package/dist/svelte/components/ContentImageChooser.svelte

@@ -51,7 +51,7 @@ function cycle(delta: number) {
 </script>
 
 {#if activeImage}
-  <div class="content-image-chooser" aria-label={t(M['content.content_image_chooser.body_images'])}>
+  <div class="content-image-chooser" aria-label={t(M['content.content_image_chooser.body_images'])} data-smrt-component="ContentImageChooser">
     {#if hasMultiple}
       <Button
         variant="ghost"
@@ -97,6 +97,8 @@ function cycle(delta: number) {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .content-image-chooser {
     display: inline-flex;
     align-items: center;
@@ -109,7 +111,7 @@ function cycle(delta: number) {
     border: 1px solid var(--smrt-color-outline-variant);
     background: var(--smrt-color-surface-container);
     color: var(--smrt-color-on-surface);
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     cursor: pointer;
   }
 
@@ -138,8 +140,9 @@ function cycle(delta: number) {
   .content-image-chooser :global(.chooser-preview img) {
     width: 2rem;
     height: 2rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     object-fit: cover;
     background: var(--smrt-color-surface-container-high);
   }
+}
 </style>

package/dist/svelte/components/ContentList.svelte

@@ -2702,7 +2702,7 @@ const tableColumns: DataTableColumn<ContentListRow>[] = $derived([
 <div
   class="content-list-wrapper"
   class:data-surface-highlighted={surfaceHighlighted}
-  bind:this={surfaceRoot}
+  bind:this={surfaceRoot} data-smrt-component="ContentList"
 >
 
   <div class="content-controls">
@@ -3424,6 +3424,8 @@ const tableColumns: DataTableColumn<ContentListRow>[] = $derived([
 />
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .content-list-wrapper {
     display: flex;
     flex-direction: column;
@@ -3581,7 +3583,7 @@ const tableColumns: DataTableColumn<ContentListRow>[] = $derived([
   .type-pill {
     display: inline-flex;
     align-items: center;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     padding: 0.2rem 0.65rem;
     font-size: var(--smrt-typography-label-medium-size, 0.72rem);
     font-weight: var(--smrt-typography-weight-bold, 700);
@@ -3597,13 +3599,13 @@ const tableColumns: DataTableColumn<ContentListRow>[] = $derived([
   }
 
   .type-pill--document {
-    background: color-mix(in srgb, var(--smrt-color-tertiary, #0f766e) 12%, transparent);
-    color: var(--smrt-color-tertiary, #0f766e);
+    background: color-mix(in srgb, var(--smrt-color-tertiary) 12%, transparent);
+    color: var(--smrt-color-tertiary);
   }
 
   .type-pill--mirror {
-    background: color-mix(in srgb, var(--smrt-color-secondary, #9333ea) 12%, transparent);
-    color: var(--smrt-color-secondary, #9333ea);
+    background: color-mix(in srgb, var(--smrt-color-secondary) 12%, transparent);
+    color: var(--smrt-color-secondary);
   }
 
   /* Shared Card Styles */
@@ -3628,7 +3630,7 @@ const tableColumns: DataTableColumn<ContentListRow>[] = $derived([
     height: 160px;
     border-bottom: 1px solid var(--smrt-color-outline-variant);
     overflow: hidden;
-    background: var(--smrt-color-surface-container-high, #242424);
+    background: var(--smrt-color-surface-container-high);
   }
 
   .content-header {
@@ -3664,7 +3666,7 @@ const tableColumns: DataTableColumn<ContentListRow>[] = $derived([
 
   .badge {
     padding: 0.25rem 0.6rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     font-size: var(--smrt-typography-label-medium-size, 0.75rem);
     font-weight: var(--smrt-typography-weight-semibold, 600);
     text-transform: uppercase;
@@ -3746,17 +3748,17 @@ const tableColumns: DataTableColumn<ContentListRow>[] = $derived([
     border-color: var(--smrt-color-outline);
   }
 
-  .view-btn {
-    color: var(--smrt-color-primary) !important;
+  .content-actions .view-btn {
+    color: var(--smrt-color-primary);
   }
 
   .content-actions :global(.delete-btn) {
-    color: var(--smrt-color-error) !important;
+    color: var(--smrt-color-error);
   }
 
-  .content-actions :global(.delete-btn:hover) {
-    background: var(--smrt-color-error-container) !important;
-    border-color: var(--smrt-color-error) !important;
+  .content-actions :global(.content-action-btn.delete-btn:not(:disabled):hover) {
+    background: var(--smrt-color-error-container);
+    border-color: var(--smrt-color-error);
   }
 
   /* GRID View Specifics */
@@ -3828,7 +3830,7 @@ const tableColumns: DataTableColumn<ContentListRow>[] = $derived([
     justify-content: center;
     min-height: 2.4rem;
     padding: 0 0.85rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     border: 1px solid var(--smrt-color-outline-variant);
     background: transparent;
     color: var(--smrt-color-on-surface);
@@ -4105,4 +4107,5 @@ const tableColumns: DataTableColumn<ContentListRow>[] = $derived([
       transition: none;
     }
   }
+}
 </style>

package/dist/svelte/components/ContentListLifecyclePanel.svelte

@@ -351,6 +351,8 @@ function retryPreview() {
 </Modal>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .lifecycle,
   .actions {
     display: flex;
@@ -382,6 +384,7 @@ function retryPreview() {
   }
 
   .error {
-    color: var(--smrt-color-error, #b3261e);
+    color: var(--smrt-color-error);
   }
+}
 </style>

package/dist/svelte/components/ContentMetadataFields.svelte

@@ -96,7 +96,7 @@ function updateTags(value: string) {
 </script>
 
 {#snippet metadataFields()}
-  <div class="content-metadata-fields">
+  <div class="content-metadata-fields" data-smrt-component="ContentMetadataFields">
     {#if shown.has('author')}
       <FormGroup label={fieldLabel(t(M['content.content_fields.author']))} id="{idPrefix}-author">
         <Input
@@ -162,7 +162,7 @@ function updateTags(value: string) {
 {/snippet}
 
 {#if disclosure}
-  <details class="content-metadata-details" open={disclosure.open}>
+  <details class="content-metadata-details" open={disclosure.open} data-smrt-component="ContentMetadataFields">
     <summary>{disclosure.label}</summary>
     {@render metadataFields()}
   </details>
@@ -171,6 +171,8 @@ function updateTags(value: string) {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .content-metadata-fields {
     display: grid;
     gap: 1rem;
@@ -190,4 +192,5 @@ function updateTags(value: string) {
   .content-metadata-details[open] > summary {
     margin-bottom: 0.75rem;
   }
+}
 </style>

package/dist/svelte/components/ContentPictureDrawer.svelte

@@ -276,7 +276,7 @@ function handleFiles(event: Event & { currentTarget: HTMLInputElement }) {
 }
 </script>
 
-<div class="content-picture-drawer">
+<div class="content-picture-drawer" data-smrt-component="ContentPictureDrawer">
   <header class="drawer-header">
     <h2>{t(M['content.content_picture_drawer.title'])}</h2>
     {#if onClose}
@@ -428,6 +428,8 @@ function handleFiles(event: Event & { currentTarget: HTMLInputElement }) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .content-picture-drawer {
     display: grid;
     gap: 0.75rem;
@@ -560,7 +562,7 @@ function handleFiles(event: Event & { currentTarget: HTMLInputElement }) {
     place-items: center;
     min-width: 1.5rem;
     height: 1.5rem;
-    border-radius: var(--smrt-radius-full, 999px);
+    border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-primary);
     color: var(--smrt-color-on-primary);
     font-size: var(--smrt-typography-body-small-size, 0.8rem);
@@ -588,7 +590,7 @@ function handleFiles(event: Event & { currentTarget: HTMLInputElement }) {
   .tag {
     display: inline-block;
     padding: 0.05rem 0.4rem;
-    border-radius: var(--smrt-radius-full, 999px);
+    border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-surface-container-high);
     color: var(--smrt-color-on-surface-variant);
     font-size: var(--smrt-typography-body-small-size, 0.72rem);
@@ -610,4 +612,5 @@ function handleFiles(event: Event & { currentTarget: HTMLInputElement }) {
   .drawer-actions :global(button) {
     min-height: 2.75rem;
   }
+}
 </style>

package/dist/svelte/components/ContentReferencesPanel.svelte

@@ -90,7 +90,7 @@ function removeReference(id: string) {
 }
 </script>
 
-<div class="content-references-panel">
+<div class="content-references-panel" data-smrt-component="ContentReferencesPanel">
   {#if visibleReferences.length}
     <div class="reference-list">
       {#each visibleReferences as reference, index (reference.id || getSafeReferenceUrl(reference) || `${getReferenceLabel(reference)}-${index}`)}
@@ -145,6 +145,8 @@ function removeReference(id: string) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .content-references-panel {
     display: grid;
     gap: 0.875rem;
@@ -234,4 +236,5 @@ function removeReference(id: string) {
     min-height: 2.5rem;
     border-radius: 0.5rem;
   }
+}
 </style>

package/dist/svelte/components/ContentReviewStatusTray.svelte

@@ -69,7 +69,7 @@ let {
 {/snippet}
 
 {#if items.length > 0}
-  <div class="content-review-status-tray" role="group" aria-label={label}>
+  <div class="content-review-status-tray" role="group" aria-label={label} data-smrt-component="ContentReviewStatusTray">
     {#each items as item (item.id)}
       <Button
         variant="ghost"
@@ -90,6 +90,8 @@ let {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .content-review-status-tray {
     display: inline-flex;
     align-items: center;
@@ -133,7 +135,7 @@ let {
     bottom: 0.35rem;
     width: 0.45rem;
     height: 0.45rem;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-outline);
   }
 
@@ -142,7 +144,7 @@ let {
   }
 
   .content-review-status-tray :global(.tray-button--warning .tray-button__indicator) {
-    background: var(--smrt-color-tertiary, #d97706);
+    background: var(--smrt-color-tertiary);
   }
 
   .content-review-status-tray :global(.tray-button--success .tray-button__indicator) {
@@ -157,4 +159,5 @@ let {
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
   }
+}
 </style>

package/dist/svelte/components/ContentStatusFields.svelte

@@ -61,7 +61,7 @@ function updateField(key: string, value: unknown) {
 }
 </script>
 
-<div class="content-status-fields" class:simple>
+<div class="content-status-fields" class:simple data-smrt-component="ContentStatusFields">
   {#if shown.has('type')}
     <FormGroup label={t(M['content.content_fields.type'])} id="{idPrefix}-type">
       <Select name="type" value={data.type || 'article'} onchange={(event) => updateField('type', event.currentTarget.value)}>
@@ -104,6 +104,8 @@ function updateField(key: string, value: unknown) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .content-status-fields {
     display: flex;
     align-items: end;
@@ -128,4 +130,5 @@ function updateField(key: string, value: unknown) {
   .content-status-fields.simple :global(.form-label) {
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
   }
+}
 </style>