@meshmakers/octo-ui 3.5.110 → 3.5.140

package/lib/runtime-browser/styles/_button.scss

@@ -106,6 +106,28 @@
     @include octo-button-primary-disabled;
   }
 
+  // Destructive SOLID button (`themeColor="error"` + default fill, AB#6464): error fill, so a delete
+  // confirm differs from Cancel without reading the label (action guideline §2.4). Only the solid fill
+  // class matches: a flat / outline error button (e.g. a danger text action in a toolbar) stays flat
+  // (guideline §2.2 / §9) - this mixin is also used by the list, grid and page toolbars.
+  &.k-button-solid-error {
+    background: var(--theme-status-error, var(--bubblegum));
+    border-color: var(--theme-status-error, var(--bubblegum));
+    color: var(--theme-text-on-accent, var(--deep-sea));
+
+    .k-svg-icon,
+    .k-icon,
+    svg {
+      fill: var(--theme-text-on-accent, var(--deep-sea));
+      color: var(--theme-text-on-accent, var(--deep-sea));
+    }
+
+    &:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--theme-status-error, var(--bubblegum)) 88%, var(--theme-text-primary, white));
+      border-color: color-mix(in srgb, var(--theme-status-error, var(--bubblegum)) 88%, var(--theme-text-primary, white));
+    }
+  }
+
   // Selected FLAT toggles (e.g. the list view's row-filter command, `themeColor="primary"
   // fillMode="flat"`): the primary branch above has the same specificity as `.k-selected` and
   // comes later, so it would paint selected and unselected alike. This rule is more specific and

package/lib/runtime-browser/styles/_dialog-actions.scss

@@ -0,0 +1,51 @@
+// Dialog action rows - THE one definition (AB#6464, Studio action guideline §2.2 / §2.4).
+//
+// Every dialog footer carries the class `mm-dialog-actions`:
+//   * `<kendo-dialog-actions>` gets it from `MmDialogActionsDirective` (@meshmakers/shared-ui),
+//     which also switches Kendo's default `stretched` layout to `end`;
+//   * hand-made footers (`<div class="mm-dialog-actions">`, e.g. the MeshBoard config dialogs)
+//     write the class themselves and need no CSS of their own.
+//
+// The look: right-aligned, buttons keep their natural width at the control height (34 px), gap
+// from the spacing token, a wrapped second row instead of clipping at 390 px, and a destructive
+// confirm (`themeColor="error"`) that reads as danger without reading the label.
+// Only tokens - no hard-coded colour or pixel values (fallbacks mirror `_theme.scss`).
+@mixin dialog-actions {
+  .mm-dialog-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--theme-space-2, 8px);
+    flex-shrink: 0;
+
+    .k-button {
+      flex: 0 0 auto;
+      width: auto;
+      // Kendo's medium button is 39 px; the action rows use the 34 px control height.
+      height: var(--theme-control-height-md, 34px);
+      min-height: var(--theme-control-height-md, 34px);
+      padding-block: 0;
+      box-sizing: border-box;
+    }
+
+    // Outline / flat destructive confirms (e.g. the entity page's Delete): the generic action-row
+    // rules force a neutral border and text colour with !important, so restate the danger look.
+    .k-button:is(.k-button-outline-error, .k-button-flat-error) {
+      color: var(--theme-status-error, var(--bubblegum)) !important;
+      border-color: var(--theme-status-error, var(--bubblegum)) !important;
+
+      &:hover:not(:disabled) {
+        background: var(--theme-status-error-subtle, transparent) !important;
+        border-color: var(--theme-status-error, var(--bubblegum)) !important;
+      }
+    }
+  }
+
+  // Hand-made footers have no Kendo chrome: give them the divider and the padding that
+  // `kendo-dialog-actions` brings along.
+  div.mm-dialog-actions {
+    padding: var(--theme-space-2, 8px) var(--theme-space-4, 16px);
+    border-top: 1px solid var(--theme-border-subtle, var(--octo-mint-20));
+  }
+}

package/lib/runtime-browser/styles/_styles.scss

@@ -3,6 +3,7 @@
 @use "flat-button" as *;
 @use "field-input" as *;
 @use "button" as *;
+@use "dialog-actions" as *;
 
 @mixin styles {
   // Direct dockview element overrides - needed because ViewEncapsulation blocks global styles
@@ -2261,6 +2262,9 @@
     }
   }
 
+  // Dialog action rows: right-aligned 34 px buttons, token gap, danger confirm (AB#6464)
+  @include dialog-actions;
+
   // Dialog Danger variant - for production/staging confirmation dialogs
   .mm-dialog-danger .k-dialog {
     border-color: var(--theme-status-error, var(--bubblegum-50));

package/lib/runtime-browser/styles/_theme.scss

@@ -48,6 +48,9 @@
   --theme-space-7: 28px;
   --theme-space-8: 32px;
 
+  // Control height (new, AB#6464): buttons in dialog action rows and other compact controls.
+  --theme-control-height-md: 34px;
+
   // Radius — symmetric edges, no pills (new).
   --theme-radius-xs: 2px; // chips
   --theme-radius-sm: 4px; // buttons, inputs, tabs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meshmakers/octo-ui",
-  "version": "3.5.110",
+  "version": "3.5.140",
   "peerDependencies": {
     "@ngx-translate/core": "^17.0.0 || ^18.0.0",
     "@angular/animations": "^22.0.0",