@usefragments/ui 1.5.4 → 1.7.0

package/src/components/Editor/Editor.contract.json

@@ -1,17 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Editor",
-  "description": "Rich text editor with formatting toolbar, auto-save, and word count",
-  "category": "forms",
-  "tags": [
-    "editor",
-    "rich-text",
-    "markdown",
-    "toolbar",
-    "writing",
-    "blog",
-    "content"
-  ],
+  "description": "Edits rich text with formatting, autosave, and a word count.",
+  "category": "inputs",
+  "tags": ["editor", "rich-text", "markdown", "toolbar", "writing", "blog", "content"],
   "status": "stable",
   "dependencies": [
     {
@@ -123,11 +115,7 @@
       "description": "Editor size preset: \"sm\" (120px), \"md\" (200px), or \"lg\" (400px)",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["sm", "md", "lg"]
     },
     "maxLength": {
       "type": "number",
@@ -142,27 +130,26 @@
   },
   "usage": {
     "when": [
-      "Building blog post or article editors",
-      "Need rich text editing with formatting controls",
-      "Content management with auto-save and word count",
-      "Markdown or WYSIWYG editing interfaces"
+      "Blog posts and long-form articles",
+      "Text that needs formatting controls beside it",
+      "Drafts that autosave and report a word count",
+      "Markdown or WYSIWYG authoring"
     ],
     "whenNot": [
-      "Simple single-line text input (use Input)",
-      "Plain multi-line without formatting (use Textarea)",
-      "Chat/AI prompt input (use Prompt)",
+      "Single-line text (use Input)",
+      "Multi-line with no formatting (use Textarea)",
+      "Chat or AI prompt input (use Prompt)",
       "Code editing (use CodeBlock)"
     ],
     "guidelines": [
-      "Use compound pattern for custom toolbar layouts",
-      "Install @tiptap/react, @tiptap/starter-kit, and @tiptap/extension-link for rich text mode",
-      "Falls back to a markdown-aware textarea when TipTap is not installed",
-      "Use onAutoSave for periodic content persistence",
-      "onAutoSave may return a Promise; save status updates after the async save resolves/rejects",
-      "Use size prop (sm/md/lg) to control editor height",
-      "Use maxLength to show character limit with visual warning states",
-      "New formats (headings, blockquote, orderedList, undo, redo) are opt-in via the formats prop",
-      "Use toolbarIcons to swap in icons from any icon package without changing toolbar button labels or accessibility behavior"
+      "Compose Editor.Toolbar and Editor.Content to control toolbar layout",
+      "Rich text needs @tiptap/react, @tiptap/starter-kit, and @tiptap/extension-link",
+      "Without TipTap it falls back to a markdown-aware textarea",
+      "onAutoSave may return a Promise; save status updates once it settles",
+      "size sets the minimum body height: sm 120px, md 200px, lg 400px",
+      "maxLength drives the counter's warning and over-limit states",
+      "Headings, blockquote, orderedList, undo, and redo are opt-in via formats",
+      "toolbarIcons swaps glyphs without changing labels or keyboard behavior"
     ],
     "accessibility": [
       "Toolbar has role=\"toolbar\" with aria-label",
@@ -177,47 +164,47 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Editor with default toolbar and status bar",
+      "description": "Toolbar and status bar you get with no configuration.",
       "code": "<Editor placeholder=\"Start typing your masterpiece here...\" />"
     },
     {
       "name": "With Auto-Save and Publish",
-      "description": "Full compound usage with custom toolbar, auto-save indicator, and publish button",
+      "description": "Save state sits next to the primary action in the toolbar.",
       "code": "<Editor\n  placeholder=\"Start typing your masterpiece here...\"\n  onValueChange={(v) => console.log(v)}\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n      <Editor.ToolbarButton format=\"strikethrough\" />\n      <Editor.ToolbarButton format=\"link\" />\n      <Editor.ToolbarButton format=\"code\" />\n      <Editor.ToolbarButton format=\"bulletList\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Actions\">\n      <Editor.StatusIndicator status=\"saved\" />\n      <Button variant=\"accent\" size=\"sm\">\n        Publish\n      </Button>\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"
     },
     {
-      "name": "Minimal",
-      "description": "Editor with subset of formats",
-      "code": "<Editor\n  placeholder=\"Quick note...\"\n  formats={['bold', 'italic', 'code']}\n/>"
+      "name": "Save Failed",
+      "description": "A failed autosave turns the status text red.",
+      "code": "<Editor defaultValue=\"This draft could not be saved.\">\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Status\">\n      <Editor.StatusIndicator status=\"error\" />\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"
     },
     {
       "name": "Disabled",
-      "description": "Non-interactive editor with content",
+      "description": "Dimmed and inert, but the text stays readable.",
       "code": "<Editor\n  defaultValue=\"This content cannot be edited.\"\n  disabled\n/>"
     },
     {
       "name": "Read Only",
-      "description": "Visible content, non-editable",
+      "description": "Text can be selected and copied, but never changed.",
       "code": "<Editor\n  defaultValue=\"This content is read-only. You can select and copy text but cannot modify it.\"\n  readOnly\n/>"
     },
     {
       "name": "Custom Toolbar",
-      "description": "Compound usage with custom toolbar layout and separator",
+      "description": "Separators split the controls into labelled clusters.",
       "code": "<Editor\n  placeholder=\"Write your blog post...\"\n  onValueChange={(v) => console.log(v)}\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Basic formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Advanced formatting\">\n      <Editor.ToolbarButton format=\"link\" />\n      <Editor.ToolbarButton format=\"code\" />\n      <Editor.ToolbarButton format=\"bulletList\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Status\">\n      <Editor.StatusIndicator status=\"saving\" />\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"
     },
     {
       "name": "Full Formatting",
-      "description": "All format options including headings, blockquote, ordered list, undo/redo",
+      "description": "Every opt-in format switched on, at the tallest preset.",
       "code": "<Editor\n  placeholder=\"Write an article...\"\n  size=\"lg\"\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"History\">\n      <Editor.ToolbarButton format=\"undo\" />\n      <Editor.ToolbarButton format=\"redo\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Headings\">\n      <Editor.ToolbarButton format=\"heading1\" />\n      <Editor.ToolbarButton format=\"heading2\" />\n      <Editor.ToolbarButton format=\"heading3\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n      <Editor.ToolbarButton format=\"strikethrough\" />\n      <Editor.ToolbarButton format=\"code\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Block formatting\">\n      <Editor.ToolbarButton format=\"bulletList\" />\n      <Editor.ToolbarButton format=\"orderedList\" />\n      <Editor.ToolbarButton format=\"blockquote\" />\n      <Editor.ToolbarButton format=\"link\" />\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"
     },
     {
       "name": "With Character Limit",
-      "description": "Editor with maxLength showing character count indicator with warning and error states",
+      "description": "The counter warns near 280 characters and turns red past it.",
       "code": "<Editor\n  placeholder=\"Write a tweet-sized message...\"\n  maxLength={280}\n  size=\"sm\"\n  formats={['bold', 'italic', 'link']}\n/>"
     },
     {
       "name": "Small Size",
-      "description": "Compact editor with sm size preset (120px min-height)",
+      "description": "A 120px body with a trimmed toolbar, for tight spaces.",
       "code": "<Editor\n  placeholder=\"Quick note...\"\n  size=\"sm\"\n  formats={['bold', 'italic', 'code']}\n/>"
     }
   ],
@@ -253,11 +240,7 @@
       "maxLength: number - character limit with visual indicator",
       "toolbarIcons: Partial<Record<EditorFormat, ReactNode | (state) => ReactNode>> - custom toolbar icons"
     ],
-    "a11yRules": [
-      "A11Y_TOOLBAR_ROLE",
-      "A11Y_BUTTON_LABEL",
-      "A11Y_LIVE_REGION"
-    ]
+    "a11yRules": ["A11Y_TOOLBAR_ROLE", "A11Y_BUTTON_LABEL", "A11Y_LIVE_REGION"]
   },
   "ai": {
     "compositionPattern": "compound",

package/src/components/Editor/Editor.module.scss

@@ -1,19 +1,26 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
-
-// ============================================
-// Editor Root
-// ============================================
+@use "../../recipes/action" as action;
+@use "../../recipes/layout" as layout;
+@use "../../recipes/prose" as prose;
+@use "../../recipes/target" as target;
+@use "../../recipes/typography" as typography;
 
 .editor {
   @include form-group-surface;
+
+  // Component-scoped registered vocabulary: these are declared here as the
+  // token source for the editor's size presets, not ad-hoc custom properties.
+  --fui-editor-min-block-sm: 120px;
+  --fui-editor-min-block-md: 200px;
+  --fui-editor-min-block-lg: 400px;
+
   display: flex;
   flex-direction: column;
-  width: 100%;
-  min-width: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
   overflow: hidden;
 
-  // Focus ring (Enhancement #7)
   &:focus-within:not([data-disabled]) {
     @include focus-ring;
   }
@@ -23,50 +30,30 @@
     pointer-events: none;
   }
 
-  &[data-readonly] {
-    .contentTextarea {
-      cursor: default;
-    }
-  }
-
-  // Size variants (Enhancement #2)
-  &[data-size="sm"] {
-    .content,
-    .contentTextarea,
-    :global(.tiptap) {
-      min-height: 120px;
-    }
+  &[data-readonly] .contentTextarea {
+    cursor: default;
   }
 
-  &[data-size="md"] {
-    .content,
-    .contentTextarea,
-    :global(.tiptap) {
-      min-height: 200px;
-    }
-  }
-
-  &[data-size="lg"] {
-    .content,
-    .contentTextarea,
-    :global(.tiptap) {
-      min-height: 400px;
+  @each $size in ("sm", "md", "lg") {
+    &[data-size="#{$size}"] {
+      .content,
+      .contentTextarea,
+      :global(.tiptap) {
+        min-block-size: var(--fui-editor-min-block-#{$size});
+      }
     }
   }
 }
 
-// ============================================
-// Toolbar
-// ============================================
-
-.toolbar {
+.toolbar,
+.statusBar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
-  border-bottom: 1px solid var(--fui-form-group-border, $fui-border);
+  gap: layout.gap("sm");
+  padding-block: layout.gap("xs");
+  padding-inline: layout.gap("sm");
   background-color: color-mix(
     in srgb,
     var(--fui-form-group-bg, $fui-bg-secondary) 72%,
@@ -74,222 +61,185 @@
   );
 }
 
-// ============================================
-// Toolbar Group
-// ============================================
+.toolbar {
+  border-block-end: var(--fui-stroke-hairline, 1px) solid var(--fui-form-group-border, $fui-border);
+}
 
-.toolbarGroup {
+.toolbarGroup,
+.statusBarLeft,
+.statusBarRight {
   display: flex;
   align-items: center;
-  gap: var(--fui-space-0-5, $fui-space-0-5);
+  gap: layout.gap("xs");
 }
 
-// ============================================
-// Toolbar Button
-// ============================================
-
 .toolbarButton {
   @include button-reset;
-  @include interactive-base;
-  @include touch-target;
+  @include action.base;
+  @include action.icon-only("sm");
+  @include target.hit-area("compact");
 
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--fui-button-height-sm, $fui-button-height-sm);
-  min-height: var(--fui-button-height-sm, $fui-button-height-sm);
-  padding: 0;
-  border: 1px solid transparent;
+  border: var(--fui-stroke-hairline, 1px) solid transparent;
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   background-color: transparent;
   color: var(--fui-text-secondary, $fui-text-secondary);
+  cursor: pointer;
 
   &:hover:not(:disabled) {
-    background-color: var(--fui-field-bg, $fui-bg-elevated);
     border-color: var(--fui-form-group-border, $fui-border);
+    background-color: var(--fui-field-bg, $fui-bg-elevated);
     color: var(--fui-text-primary, $fui-text-primary);
   }
 
   &:active:not(:disabled) {
-    background-color: var(--fui-field-selection-bg, $fui-bg-hover);
     border-color: var(--fui-field-selection-border, $fui-color-accent);
+    background-color: var(--fui-field-selection-bg, $fui-bg-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
   }
 
   svg {
-    width: var(--fui-icon-sm, $fui-icon-sm); // 14px
-    height: var(--fui-icon-sm, $fui-icon-sm);
+    @include action.glyph("sm");
   }
 }
 
 .toolbarButtonActive {
-  color: var(--fui-text-primary, $fui-text-primary);
-  background-color: var(--fui-field-selection-bg, $fui-bg-hover);
   border-color: var(--fui-field-selection-border, $fui-color-accent);
-  box-shadow: inset 0 0 0 1px
+  background-color: var(--fui-field-selection-bg, $fui-bg-hover);
+  color: var(--fui-text-primary, $fui-text-primary);
+  box-shadow: inset 0 0 0 var(--fui-stroke-hairline, 1px)
     color-mix(in srgb, var(--fui-field-selection-border, $fui-color-accent) 55%, transparent);
-
-  &:hover:not(:disabled) {
-    background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
-    color: var(--fui-text-primary, $fui-text-primary);
-  }
 }
 
-// ============================================
-// Separator
-// ============================================
-
 .separator {
-  width: 1px;
-  height: 1rem;
+  inline-size: var(--fui-stroke-hairline, 1px);
+  block-size: var(--fui-icon-md, $fui-icon-md);
+  margin-inline: layout.gap("xs");
   background-color: var(--fui-form-group-border, $fui-border);
-  margin: 0 var(--fui-space-1, $fui-space-1);
   flex-shrink: 0;
 }
 
-// ============================================
-// Status Indicator
-// ============================================
+.statusIndicator,
+.statusBarItem {
+  @include typography.role("caption");
+
+  white-space: nowrap;
+}
 
 .statusIndicator {
-  @include section-label-text;
+  padding-inline: layout.gap("sm");
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  white-space: nowrap;
-  padding: 0 var(--fui-space-2, $fui-space-2);
 }
 
-.statusError {
+.statusError,
+.statusBarItemError {
   color: var(--fui-color-danger-text, $fui-color-danger-text);
 }
 
-// ============================================
-// Content
-// ============================================
+.statusBarItemWarning {
+  color: var(--fui-color-warning-text, $fui-color-warning-text);
+}
 
 .content {
   flex: 1;
-  min-height: 200px;
+  min-block-size: var(--fui-editor-min-block-md);
   overflow-y: auto;
 }
 
-.contentRich {
-  // TipTap editor styling
-  :global(.tiptap) {
-    padding: var(--fui-space-3, $fui-space-3);
-    min-height: 200px;
-    outline: none;
-    @include text-base;
-    line-height: var(--fui-line-height-relaxed, $fui-line-height-relaxed);
-    font-size: var(--fui-font-size-base, $fui-font-size-base);
-
-    &:focus-visible {
-      outline: none;
-    }
+.contentRich :global(.tiptap) {
+  @include prose.root;
 
-    // Placeholder
-    p.is-editor-empty:first-child::before {
-      content: attr(data-placeholder);
-      float: left;
-      color: var(--fui-text-tertiary, $fui-text-tertiary);
-      pointer-events: none;
-      height: 0;
-    }
+  min-block-size: var(--fui-editor-min-block-md);
+  padding: layout.gap("lg");
+  outline: none;
 
-    // Headings (Enhancement #4)
-    // Heading scale matches Markdown's prose scale (h1=3xl, h2=xl, h3=lg) so the
-    // editing canvas mirrors how the rendered content reads.
-    h1 {
-      font-size: var(--fui-font-size-3xl, $fui-font-size-3xl);
-      font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
-      line-height: var(--fui-line-height-tight, $fui-line-height-tight);
-      margin: 0 0 var(--fui-space-3, $fui-space-3);
-    }
+  &:focus-visible {
+    outline: none;
+  }
 
-    h2 {
-      font-size: var(--fui-font-size-xl, $fui-font-size-xl);
-      font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
-      line-height: var(--fui-line-height-tight, $fui-line-height-tight);
-      margin: 0 0 var(--fui-space-2, $fui-space-2);
-    }
+  p {
+    @include prose.paragraph;
+  }
 
-    h3 {
-      font-size: var(--fui-font-size-lg, $fui-font-size-lg);
-      font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
-      line-height: var(--fui-line-height-tight, $fui-line-height-tight);
-      margin: 0 0 var(--fui-space-2, $fui-space-2);
+  @for $level from 1 through 6 {
+    h#{$level} {
+      @include prose.heading($level);
     }
+  }
 
-    // Blockquote (Enhancement #5)
-    blockquote {
-      border-left: 3px solid var(--fui-color-accent, $fui-color-accent);
-      padding-left: var(--fui-space-4, $fui-space-4);
-      margin: 0 0 var(--fui-space-2, $fui-space-2);
-      color: var(--fui-text-secondary, $fui-text-secondary);
-      font-style: italic;
-    }
+  blockquote {
+    @include prose.blockquote;
 
-    // Inline code — padding matches Markdown's inline <code> (0.125em 0.375em)
-    code {
-      background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
-      border-radius: var(--fui-radius-sm, $fui-radius-sm);
-      padding: 0.125em 0.375em;
-      font-family: var(--fui-font-mono, $fui-font-mono);
-      font-size: 0.9em;
-    }
+    color: var(--fui-text-secondary, $fui-text-secondary);
+    font-style: italic;
+  }
 
-    // Links
-    a {
-      color: var(--fui-color-accent, $fui-color-accent);
-      text-decoration: underline;
-      cursor: pointer;
+  code {
+    @include prose.inline-code;
+  }
 
-      &:hover {
-        color: var(--fui-color-accent-hover, $fui-color-accent-hover);
-      }
-    }
+  a {
+    @include prose.link;
 
-    // Unordered lists
-    ul {
-      padding-left: var(--fui-space-5, $fui-space-5);
-      list-style-type: disc;
-    }
+    color: var(--fui-color-accent, $fui-color-accent);
+    cursor: pointer;
+  }
 
-    // Ordered lists (Enhancement #3)
-    ol {
-      padding-left: var(--fui-space-5, $fui-space-5);
-      list-style-type: decimal;
-    }
+  ul {
+    @include prose.list("disc");
+  }
 
-    // Strikethrough
-    s {
-      text-decoration: line-through;
-    }
+  ol {
+    @include prose.list("decimal");
+  }
 
-    // Paragraphs
-    p {
-      margin: 0 0 var(--fui-space-2, $fui-space-2);
+  s {
+    text-decoration: line-through;
+  }
+}
 
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
+// TipTap's Placeholder extension is not a dependency, so the empty-document
+// placeholder is driven from the wrapper's own data-placeholder attribute.
+// An empty ProseMirror doc is exactly one paragraph holding a trailing break.
+.contentRich[data-placeholder]:has(
+    :global(.tiptap) > p:only-child > br:global(.ProseMirror-trailingBreak)
+  ) {
+  position: relative;
+
+  &::before {
+    @include typography.role("body-relaxed");
+
+    content: attr(data-placeholder);
+    position: absolute;
+    inset-block-start: layout.gap("lg");
+    inset-inline-start: layout.gap("lg");
+    inset-inline-end: layout.gap("lg");
+    color: var(--fui-text-tertiary, $fui-text-tertiary);
+    pointer-events: none;
   }
 }
 
 .contentTextarea {
   @include button-reset;
-  @include text-base;
+  @include typography.role("body-relaxed");
 
+  // button-reset marks pressables select-none; typed text must stay selectable.
+  user-select: text;
   display: block;
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
-  padding: var(--fui-space-3, $fui-space-3);
+  inline-size: 100%;
+  block-size: 100%;
+  min-block-size: var(--fui-editor-min-block-md);
+  padding: layout.gap("lg");
+  border: 0;
   background: transparent;
-  border: none;
   resize: none;
   overflow-y: auto;
-  line-height: var(--fui-line-height-relaxed, $fui-line-height-relaxed);
-  font-size: var(--fui-font-size-base, $fui-font-size-base);
 
   &::placeholder {
     color: var(--fui-text-tertiary, $fui-text-tertiary);
@@ -304,17 +254,9 @@
   }
 }
 
-// ============================================
-// Status Bar
-// ============================================
-
 .statusBar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
-  border-top: 1px solid var(--fui-form-group-border, $fui-border);
+  border-block-start: var(--fui-stroke-hairline, 1px) solid
+    var(--fui-form-group-border, $fui-border);
   background-color: color-mix(
     in srgb,
     var(--fui-form-group-bg, $fui-bg-secondary) 56%,
@@ -322,31 +264,6 @@
   );
 }
 
-.statusBarLeft {
-  display: flex;
-  align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
-}
-
 .statusBarRight {
-  display: flex;
-  align-items: center;
-  gap: var(--fui-space-2, $fui-space-2);
-  margin-left: auto;
-}
-
-.statusBarItem {
-  @include helper-text;
-  white-space: nowrap;
-}
-
-// maxLength indicator states (Enhancement #1)
-.statusBarItemWarning {
-  color: var(--fui-color-warning-text, $fui-color-warning-text);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
-}
-
-.statusBarItemError {
-  color: var(--fui-color-danger-text, $fui-color-danger-text);
-  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  margin-inline-start: auto;
 }