feat(utilities): add border-*-ai utilities

docs/fundamentals/styles/borders.md

@@ -50,8 +50,27 @@ Customize the radius using the following utils:
 
 > **Note:** Since `rounded-2` is the default shape for _Element_, it is possible to use the shorthand `rounded` CSS class.
 
+## AI gradient borders
+
+Add a 1px gradient border to any element using the AI border utility classes.
+The gradient border is rendered via a masked pseudo-element and works with both opaque and transparent backgrounds.
+
+| Class                   | Description                                |
+| ----------------------- | ------------------------------------------ |
+| `.border-horizontal-ai` | Horizontal (left-to-right) gradient border |
+| `.border-vertical-ai`   | Vertical (top-to-bottom) gradient border   |
+
+The element must have a `border-radius` set for the gradient to follow the rounded shape.
+
+```html
+<span class="badge border-horizontal-ai">AI generated</span>
+<div class="card border-vertical-ai">...</div>
+```
+
 ## Examples
 
 <si-docs-component example="borders/borders" height="300"></si-docs-component>
 
 <si-docs-component example="shapes/shapes" height="300"></si-docs-component>
+
+<si-docs-component example="ai-border/ai-border" height="300"></si-docs-component>

playwright/e2e/element-examples/static.spec.ts

@@ -4,6 +4,7 @@
  */
 import { test } from '../../support/test-helpers';
 
+test('ai-border/ai-border', ({ si }) => si.static());
 test('badges/badges', ({ si }) => si.static());
 test('buttons/buttons', ({ si }) => si.static());
 test('buttons/button-groups', ({ si }) => si.static());

playwright/snapshots/static.spec.ts-snapshots/ai-border--ai-border.yaml

@@ -0,0 +1,2 @@
+- text: AI generated AI insights
+- paragraph: AI-generated content with a vertical gradient border

projects/element-theme/src/styles/bootstrap/_utilities.scss

@@ -105,3 +105,46 @@ $status-colors: (
     color: #{$value} !important; // stylelint-disable-line declaration-no-important
   }
 }
+
+// AI gradient border utilities.
+// Two filled mask layers with `exclude` compositing subtract the inner area,
+// leaving only a 1px border ring visible. Works with transparent backgrounds.
+@mixin border-ai($angle) {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(
+      $angle,
+      #{semantic-tokens.$element-base-1-selected} -6.48%,
+      #{semantic-tokens.$element-base-1-hover} -0.82%,
+      #{semantic-tokens.$element-ui-0} 49.58%,
+      #{semantic-tokens.$element-base-1-hover} 101.07%,
+      #{semantic-tokens.$element-base-1-selected} 106.73%
+    );
+    mask-image:
+      linear-gradient(
+        #{semantic-tokens.$element-text-primary},
+        #{semantic-tokens.$element-text-primary}
+      ),
+      linear-gradient(
+        #{semantic-tokens.$element-text-primary},
+        #{semantic-tokens.$element-text-primary}
+      );
+    mask-clip: border-box, content-box;
+    mask-composite: exclude;
+    padding: 1px;
+    pointer-events: none;
+  }
+}
+
+.border-horizontal-ai {
+  @include border-ai(90deg);
+}
+
+.border-vertical-ai {
+  @include border-ai(180deg);
+}

src/app/examples/ai-border/ai-border.html

@@ -0,0 +1,8 @@
+<div class="mb-5">
+  <span class="badge border-horizontal-ai">AI generated</span>
+</div>
+<div>
+  <si-card class="border-vertical-ai" heading="AI insights">
+    <p class="card-body card-text" body>AI-generated content with a vertical gradient border</p>
+  </si-card>
+</div>

src/app/examples/ai-border/ai-border.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Siemens 2016 - 2026
+ * SPDX-License-Identifier: MIT
+ */
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { SiCardComponent } from '@siemens/element-ng/card';
+
+@Component({
+  selector: 'app-sample',
+  imports: [SiCardComponent],
+  templateUrl: './ai-border.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'p-5 bg-base-1'
+  }
+})
+export class SampleComponent {}