ontotext-yasgui-web-component 1.8.3 → 1.8.4

package/README.md

@@ -182,6 +182,7 @@ The "config" value of "ngce-prop-config" or "[config]" is an object with followi
   - closes_other_tabs_by_left_mouse_click
   - full_screen
   - esc
+  - move_focus_out_of_editor (only the description in the dialog; Esc followed by Tab or Shift+Tab always moves the focus out of the editor)
 - **themeName** (optional): Specifies the theme that YASQE should use: 
   - Must match a theme name recognized by CodeMirror (e.g., `dracula`, `monokai`). Theme CSS is required CodeMirror
   themes are entirely CSS-based, so the corresponding CSS must be loaded via `<link>`, import, or injected `<style>`
@@ -204,6 +205,25 @@ The "config" value of "ngce-prop-config" or "[config]" is an object with followi
     - Fallback behavior: If themeName is not provided or the required CSS rules for that theme are missing,
     CodeMirror/YASQE will automatically fall back to the default theme to ensure the editor remains readable.
     
+### Styling
+
+The keyboard focus outline of the component can be styled with CSS variables:
+
+| Variable                     | Default   |
+|------------------------------|-----------|
+| `--yasgui-focus-ring-color`  | `#000042` |
+| `--yasgui-focus-ring-width`  | `2px`     |
+| `--yasgui-focus-ring-style`  | `solid`   |
+| `--yasgui-focus-ring-offset` | `2px`     |
+
+The add tab button draws the outline inside, because the tab panel overlaps it, so it ignores `--yasgui-focus-ring-offset`.
+
+```CSS
+ontotext-yasgui {
+  --yasgui-focus-ring-color: #1a73e8;
+}
+```
+
 ### ontotext version and GraphDB Version Compatibility
 
 | ontotext-yasgui-web-component | Workbench | GraphDB Version |