eccenca · github-actions · Feb 24, 2026 · Mar 10, 2026 · Mar 17, 2026 · Mar 24, 2026
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,13 +28,20 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<ColorField />`
     -   input component for colors
     -   uses a subset from the configured color palette by default, but it also allows to enter custom colors
+-   `<MultiSuggestField />`
+    -   `MultiSuggestFieldSelectionProps` provides `newlyRemoved` for callbacks set when removing a selected item
+-   `<HtmlContentClock />`
+    -   inline `code` uses same gray background highlighting like code blocks
 -   CSS custom properties
     -   beside the color palette we now mirror the most important layout configuration variables as CSS custom properties
 -   new icons:
     -   `state-confirmed-all`
     -   `state-declined-all`
--   `<MultiSuggestField />`
-    -   `MultiSuggestFieldSelectionProps` provides `newlyRemoved` for callbacks set when removing a selected item
+    -   `data-sourceschema`
+    -   `data-targetschema`
+    -   `operation-ai-generate`
+    -   `toggler-pin-empty`
+    -   `toggler-pin-filled`
 
 ### Fixed
 
@@ -62,6 +69,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 -   `<MultiSuggestField />`
     -   `onSelection` now sets `newlySelected` only for add actions and no longer sets it to the last element
     -   border of the BlueprintJS `Tag` elements were fixed
+-   `<Modal />`
+    -   fix specificity for pointer-events rules on SVG
 -   `<Button />`
     -   badge is correctly displayed when `badge={0}`
 -   Focus outlines

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "25.0.0",
+    "version": "25.1.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -89,7 +89,7 @@
         "compute-scroll-into-view": "^3.1.1",
         "he": "^1.2.0",
         "jshint": "^2.13.6",
-        "lodash": "^4.17.21",
+        "lodash": "^4.18.1",
         "n3": "^1.26.0",
         "re-resizable": "^6.10.3",
         "react": "^16.13.1",
@@ -165,9 +165,10 @@
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
         "storybook": "^8.6.14",
-        "stylelint": "^16.18.0",
-        "stylelint-config-recess-order": "^6.0.0",
-        "stylelint-config-standard-scss": "^14.0.0",
+        "stylelint": "^17.6.0",
+        "stylelint-config-recess-order": "^7.7.0",
+        "stylelint-config-standard-scss": "^17.0.0",
+        "stylelint-order": "^8.1.1",
         "ts-node": "^10.9.2",
         "tsc-esm-fix": "^3.1.2",
         "typescript": "5.5.3",
@@ -183,7 +184,10 @@
         "node-sass-package-importer/**/postcss": "^8.5.6",
         "string-width": "^4.2.3",
         "wrap-ansi": "^7.0.0",
-        "hast-util-from-parse5": "8.0.0"
+        "hast-util-from-parse5": "8.0.0",
+        "**/picomatch": "^2.3.2",
+        "**/minimatch": "^3.1.4",
+        "**/lodash": "^4.18.0"
     },
     "husky": {
         "hooks": {

diff --git a/src/cmem/markdown/Markdown.stories.tsx b/src/cmem/markdown/Markdown.stories.tsx
@@ -36,15 +36,15 @@ This is a paragraph.
     * another line
 3. third item
 
-This is a paragraph with a [text link](http://example.com/) and a footnote reference [^1].
+This is a paragraph with a [text link](http://example.com/), some \`inline code\`, and a footnote reference [^1].
 
 ## Headline level 2
 ### Headline level 3
 #### Headline level 4
 ##### Headline level 5
 ###### Headline level 6
 
-    This is a code block. 
+    This is a code block.
 
 \`\`\`
 another code block

diff --git a/src/cmem/markdown/markdown.scss b/src/cmem/markdown/markdown.scss
@@ -55,8 +55,8 @@
     a[href=""]:not(#{$eccgui-selector-text-spot-highlight}) {
         font-size: $eccgui-size-typo-caption;
         line-height: $eccgui-size-typo-caption-lineheight;
-        text-decoration: none;
         vertical-align: super;
+        text-decoration: none;
 
         &::before {
             content: "[";

diff --git a/src/components/Breadcrumb/breadcrumb.scss b/src/components/Breadcrumb/breadcrumb.scss
@@ -19,8 +19,8 @@ $eccgui-color-breadcrumb-link: $eccgui-color-accent !default;
         width: $eccgui-size-block-whitespace;
         height: auto;
         margin: 0;
-        text-align: center;
         vertical-align: middle;
+        text-align: center;
         content: ">";
         background: none;
     }
@@ -61,8 +61,8 @@ $eccgui-color-breadcrumb-link: $eccgui-color-accent !default;
 .#{$eccgui}-breadcrumb__item {
     display: inline-block;
     overflow: hidden;
-    font-size: inherit;
     text-overflow: ellipsis;
+    font-size: inherit;
 
     a {
         @extend .#{$eccgui}-breadcrumb__item;

diff --git a/src/components/Button/button.scss b/src/components/Button/button.scss
@@ -166,7 +166,9 @@ $button-intents: (
     // special case override: blueprint do not use configured colors here
     @include eccgui-enhance-blueprint-button-intent("primary");
     @include eccgui-enhance-blueprint-button-intent("accent");
+    @include eccgui-enhance-blueprint-button-intent("success");
     @include eccgui-enhance-blueprint-button-intent("warning");
+    @include eccgui-enhance-blueprint-button-intent("danger");
 }
 
 .#{$ns}-button-text {

diff --git a/src/components/Dialog/dialog.scss b/src/components/Dialog/dialog.scss
@@ -41,7 +41,7 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(
     max-width: calc(100vw - 4rem);
     max-height: calc(100vh - 4rem);
     margin: 2rem;
-    pointer-events: all;
+    pointer-events: auto;
     user-select: text;
 
     & > * {
@@ -50,7 +50,7 @@ $eccgui-color-modal-backdrop: eccgui-color-rgba(
         max-width: 100%;
     }
 
-    * {
+    *:has(> svg) {
         pointer-events: all;
     }
 

diff --git a/src/components/Form/form.scss b/src/components/Form/form.scss
@@ -71,8 +71,8 @@ form {
 
 .#{$eccgui}-fieldset {
     legend {
-        display: block;
         float: left;
+        display: block;
         width: 100%;
         color: $eccgui-color-applicationheader-text;
     }
@@ -133,9 +133,9 @@ form {
 .#{$eccgui}-fieldset__fielditems {
     &:not(:first-child) {
         &::before {
+            clear: both;
             display: block;
             height: $eccgui-size-block-whitespace;
-            clear: both;
             content: " ";
         }
     }

diff --git a/src/components/Icon/canonicalIconNames.tsx b/src/components/Icon/canonicalIconNames.tsx
@@ -73,6 +73,8 @@ const canonicalIcons = {
     "data-time": icons.Time,
     "data-datetime": icons.EventSchedule,
     "data-number": icons.StringInteger,
+    "data-sourceschema": icons.PortOutput,
+    "data-targetschema": icons.PortInput,
 
     "entity-human": icons.User,
     "entity-robot": icons.Bot,
@@ -138,6 +140,7 @@ const canonicalIcons = {
     "navigation-up": icons.ArrowUp,
 
     "operation-aggregation": icons.DataCollection,
+    "operation-ai-generate": icons.AiGenerate,
     "operation-autolayout": icons.ChartNetwork,
     "operation-clear": icons.Close,
     "operation-commit": icons.Commit,
@@ -212,6 +215,8 @@ const canonicalIcons = {
     "toggler-star-filled": icons.StarFilled,
     "toggler-table": icons.Table,
     "toggler-tree": icons.TreeViewAlt,
+    "toggler-pin-empty": icons.Pin,
+    "toggler-pin-filled": icons.PinFilled,
 
     "form-template": icons.Parameter,
 

diff --git a/src/components/Pagination/pagination.scss b/src/components/Pagination/pagination.scss
@@ -15,8 +15,8 @@ $eccgui-size-pagination-height-large: $pt-button-height-large !default;
 
     .#{$prefix}--form-item,
     .#{$prefix}--select-input {
-        font-size: 100%;
         text-overflow: clip;
+        font-size: 100%;
     }
 }
 

diff --git a/src/components/Tabs/tabs.scss b/src/components/Tabs/tabs.scss
@@ -39,15 +39,15 @@ $tab-indicator-width: 3px !default;
         max-width: 15rem;
         margin-bottom: $tab-indicator-width;
         color: inherit;
-        border-radius: 0;
         outline: none;
+        border-radius: 0;
 
         .#{$ns}-button-text {
             overflow-x: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
 
-            //min-width: 6em;
+            // min-width: 6em;
         }
 
         &::before,

diff --git a/src/components/Toolbar/toolbar.scss b/src/components/Toolbar/toolbar.scss
@@ -1,9 +1,8 @@
 .#{$eccgui}-toolbar {
     display: flex;
     flex-flow: row wrap;
-    align-content: center;
+    place-content: center flex-start;
     align-items: center;
-    justify-content: flex-start;
 }
 
 .#{$eccgui}-toolbar--vertical {

diff --git a/src/components/Typography/_reset.scss b/src/components/Typography/_reset.scss
@@ -28,6 +28,7 @@ button {
 
 svg {
     padding: 0;
+
     // forgotten in reset import but necessary to fix problems when used together with MDL resets
     margin: 0;
     font: inherit;

diff --git a/src/components/Typography/typography.scss b/src/components/Typography/typography.scss
@@ -13,20 +13,26 @@ html {
 
 body {
     font-family: $eccgui-font-family-default;
-    font-weight: $eccgui-font-weight-regular;
-    text-rendering: optimizelegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+
     // User-facing text may contain Unicode symbols (e.g. "★") that fall outside the primary font stack.
     // Browsers pick different system fallback fonts for such characters, causing glyphs to render at
     // different optical sizes (smaller in Firefox). font-size-adjust normalises the fallback font size
     // by matching the primary font's x-height, reducing the visual size discrepancy across browsers.
     font-size-adjust: from-font;
+    font-weight: $eccgui-font-weight-regular;
+    text-rendering: optimizelegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 code {
     font-family: $eccgui-font-family-monospace;
     font-size: 0.9em;
+
+    .#{$eccgui}-typography__contentblock &,
+    &.#{$eccgui}-typography__text {
+        background-color: $eccgui-color-workspace-background;
+    }
 }
 
 strong {

diff --git a/src/extensions/react-flow/_react-flow_v12.scss b/src/extensions/react-flow/_react-flow_v12.scss
@@ -6,8 +6,8 @@
  */
 
 .react-flow {
-    direction: ltr;
     z-index: 0;
+    direction: ltr;
 }
 
 .react-flow__pane {

diff --git a/src/extensions/react-flow/handles/_handles.scss b/src/extensions/react-flow/handles/_handles.scss
@@ -62,10 +62,10 @@ div.react-flow__handle {
             inset: 0;
             display: none;
             cursor: pointer;
-            content: " ";
-            border-radius: 100%;
             outline: dotted $eccgui-size-flow-handle-border currentcolor;
             outline-offset: $eccgui-size-flow-handle * 0.75 + $eccgui-size-flow-handle-border * 0.5;
+            content: " ";
+            border-radius: 100%;
 
             .react-flow__node:hover & {
                 display: block;
@@ -207,9 +207,9 @@ div.react-flow__handle-bottom {
 .#{$eccgui}-graphviz__node--hidehandles {
     & ~ .react-flow__handle:not(.connectable) {
         z-index: -1;
+        visibility: hidden;
         width: 1px;
         height: 1px;
-        visibility: hidden;
         border: none;
 
         &.react-flow__handle-top {

diff --git a/src/includes/carbon-components/_requisits.scss b/src/includes/carbon-components/_requisits.scss
@@ -8,11 +8,13 @@
     $use-flexbox-grid: $use-flexbox-grid
 );
 @use "~@carbon/react/scss/utilities/_visually-hidden";
-// we replicate the function here because the distinct import is not ossible via @carbon/react
+
+// we replicate the function here because the distinct import is not possible via @carbon/react
 // @import "~@carbon/styles/scss/components/ui-shell/functions";
 @function mini-units($count) {
     @return 0.5rem * $count;
 }
+
 @import "~@carbon/react/scss/feature-flags";
 @import "~@carbon/react/scss/colors";
 @import "~@carbon/react/scss/theme";