@kyndryl-design-system/shidoka-applications 2.62.2 → 2.63.0

package/common/helpers/swiper.js

@@ -1,2 +1,2 @@
-import{a as e}from"../../vendor/@kyndryl-design-system/shidoka-icons-IJ2y2-L_.js";const n={slidesPerView:1.25,centeredSlides:!0,spaceBetween:16,breakpoints:{672:{slidesPerView:"auto",spaceBetween:24}},keyboard:{enabled:!0},mousewheel:{enabled:!0,forceToAxis:!0},navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"},scrollbar:{el:".swiper-scrollbar",draggable:!0},pagination:{el:".swiper-pagination",clickable:!0,type:"fraction"},on:{init:function(n){n.navigation.prevEl.innerHTML=e,n.navigation.nextEl.innerHTML=e,t(n)},transitionEnd:function(e){t(e)},scrollbarDragEnd:function(e){t(e)}}},t=e=>{const n=e.el.getBoundingClientRect();e.slides.forEach((e=>{const t=e.getBoundingClientRect();t.left<n.left||t.right>n.width+n.left?(e.classList.add("off-screen"),e.setAttribute("aria-disabled","true")):(e.classList.remove("off-screen"),e.setAttribute("aria-disabled","false"))}))};export{n as SwiperConfig};
+import{a as e}from"../../vendor/@kyndryl-design-system/shidoka-icons-DALQfz_R.js";const n={slidesPerView:1.25,centeredSlides:!0,spaceBetween:16,breakpoints:{672:{slidesPerView:"auto",spaceBetween:24}},keyboard:{enabled:!0},mousewheel:{enabled:!0,forceToAxis:!0},navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"},scrollbar:{el:".swiper-scrollbar",draggable:!0},pagination:{el:".swiper-pagination",clickable:!0,type:"fraction"},on:{init:function(n){n.navigation.prevEl.innerHTML=e,n.navigation.nextEl.innerHTML=e,t(n)},transitionEnd:function(e){t(e)},scrollbarDragEnd:function(e){t(e)}}},t=e=>{const n=e.el.getBoundingClientRect();e.slides.forEach((e=>{const t=e.getBoundingClientRect();t.left<n.left||t.right>n.width+n.left?(e.classList.add("off-screen"),e.setAttribute("aria-disabled","true")):(e.classList.remove("off-screen"),e.setAttribute("aria-disabled","false"))}))};export{n as SwiperConfig};
 //# sourceMappingURL=swiper.js.map

package/common/scss/form-input.scss

@@ -68,7 +68,6 @@ input,
 textarea {
   @include typography.type-body-02;
   pointer-events: auto;
-
   border-color: var(--kd-color-border-forms-default);
   color: var(--kd-color-text-forms-input-field-text);
   transition: background-color 150ms ease-out, border-color 150ms ease-out,
@@ -78,11 +77,10 @@ textarea {
   outline-offset: -2px;
 
   .ai-connected & {
-    border-color: var(--kd-color-border-variants-ai);
-    background: var(--kd-color-background-forms-ai-default);
+    background: var(--kd-color-background-forms-default);
 
     &:focus-visible {
-      outline-color: var(--kd-color-border-variants-ai);
+      outline-color: var(--kd-color-border-variants-focus);
     }
   }
 

package/common/scss/gradients.scss

@@ -0,0 +1,124 @@
+$ai-gradient-default: var(
+  --kd-gradient-border-ai-default,
+  linear-gradient(
+    to bottom,
+    var(--kd-color-border-ai-default-gradient-start),
+    var(--kd-color-border-ai-default-gradient-end)
+  )
+);
+
+@mixin border-gradient-ai(
+  $gradient,
+  $radius: 8px,
+  $width: 1px,
+  $surface: var(--kd-color-background-ui-hollow-default)
+) {
+  box-sizing: border-box;
+  border-radius: $radius;
+  border: $width solid transparent;
+
+  background: linear-gradient(#{$surface}, #{$surface}) padding-box,
+    #{$gradient} border-box;
+
+  background-clip: padding-box, border-box;
+  background-origin: border-box, border-box;
+
+  background-size: calc(100% + 2px) calc(100% + 2px), cover;
+  background-position: center, center;
+  background-repeat: no-repeat, no-repeat;
+}
+
+@mixin outline-gradient-ai(
+  $gradient,
+  $radius: 8px,
+  $width: 1px,
+  $surface: var(--kd-color-background-ui-hollow-default),
+  $outside: false
+) {
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: if($outside, -#{$width}, 0);
+    border-radius: $radius;
+    pointer-events: none;
+    z-index: 1;
+
+    background: #{$gradient};
+
+    padding: #{$width};
+    -webkit-mask: linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+  }
+}
+
+@mixin gradient-ring($radius, $width, $bg, $g: $ai-gradient-default) {
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: $radius;
+    padding: $width;
+    background: $g;
+    pointer-events: none;
+    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask: linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    box-shadow: inset 0 0 0 999px #0000;
+    z-index: 1;
+  }
+  background: $bg;
+}
+
+.g-border-ai {
+  @include border-gradient-ai($gradient: $ai-gradient-default);
+}
+
+.g-outline-ai {
+  @include outline-gradient-ai($gradient: $ai-gradient-default);
+}
+
+/// Gradient Backgrounds for AI-connected components
+:root {
+  --ai-radial-strength: 20%;
+  --ai-radial-outer: 75%;
+  --ai-right-strength: 15%;
+  --ai-right-spread: 55%;
+}
+
+dialog.ai-connected.gradient-bkg {
+  background-color: var(--kd-color-background-container-ai-default);
+
+  background-image: radial-gradient(
+      circle at 0% 0%,
+      color-mix(
+          in oklab,
+          var(--kd-color-border-ai-default-gradient-start)
+            var(--ai-radial-strength),
+          transparent
+        )
+        0%,
+      transparent 35%
+    ),
+    radial-gradient(
+      circle at 100% 50%,
+      color-mix(
+          in oklab,
+          var(--kd-color-border-ai-default-gradient-end)
+            var(--ai-right-strength),
+          transparent
+        )
+        0%,
+      transparent var(--ai-right-spread)
+    );
+
+  background-repeat: no-repeat, no-repeat;
+  background-position: 0 0, 100% 50%;
+  background-size: cover, cover;
+}

package/common/scss/menu-item.scss

@@ -1,7 +1,9 @@
-@use './global.scss';
+@use '../scss/global.scss';
 @use '@kyndryl-design-system/shidoka-foundation/scss/mixins/elevation.scss';
 @use '@kyndryl-design-system/shidoka-foundation/scss/mixins/typography.scss';
+@use '../../common/scss/gradients.scss' as gradient;
 
+// ==== mixins ====
 @mixin state-colors($bg, $text, $icon: null) {
   background-color: $bg;
 
@@ -23,13 +25,13 @@
     color: var(--kd-color-text-level-disabled);
   }
 
-  &:hover {
+  &,
+  & * {
     cursor: not-allowed;
-    background-color: $bg-default;
   }
 
-  kyn-checkbox:hover {
-    cursor: not-allowed;
+  &:hover {
+    background-color: $bg-default;
   }
 }
 
@@ -37,22 +39,74 @@
   color: var(--kd-color-text-variant-destructive);
   border-top: 1px solid var(--kd-color-border-level-tertiary);
 
-  &:hover:not([disabled]) {
+  .menu-item-inner-el {
+    color: var(--kd-color-text-variant-destructive);
+  }
+
+  &:hover {
     background-color: var(--kd-color-status-error-light);
   }
 
-  .menu-item-inner-el {
-    color: var(--kd-color-text-variant-destructive);
+  &:focus-visible {
+    outline: 2px solid var(--kd-color-border-button-primary-destructive-default);
+    background-color: var(--kd-color-status-error-light);
+
+    .menu-item-inner-el {
+      color: var(--kd-color-text-level-primary);
+    }
   }
 }
 
-.menu-item[highlighted] {
-  outline: 1px solid var(--kd-color-border-variants-focus);
+@mixin border-gradient-ai(
+  $gradient,
+  $radius: 4px,
+  $width: 1px,
+  $surface: transparent
+) {
+  box-sizing: border-box;
+  border: $width solid transparent;
+  border-radius: $radius;
+  background: linear-gradient(#{$surface}, #{$surface}) padding-box,
+    #{$gradient} border-box;
+  background-clip: padding-box, border-box;
 }
 
-.menu-item {
+// Centralized pressed mixin to avoid drift between variants.
+// $layered=true uses `background` (not `background-color`) to overwrite any gradient layers.
+// $important=true adds `!important` to the background
+@mixin pressed($bg, $text, $icon, $layered: true, $important: true) {
+  @if $layered {
+    @if $important {
+      background: $bg !important;
+    } @else {
+      background: $bg;
+    }
+  } @else {
+    @if $important {
+      background-color: $bg !important;
+    } @else {
+      background-color: $bg;
+    }
+  }
+
+  border: 1px solid transparent;
+
+  .menu-item-inner-el {
+    color: $text;
+  }
+
+  slot[name='icon']::slotted(span),
+  .check-icon {
+    color: $icon;
+  }
+}
+
+// ==== defaults ====
+:host .menu-item {
   background-color: var(--kd-color-background-menu-state-default);
   transition: background-color 150ms ease-out;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
 
   .menu-item-inner-el {
     color: var(--kd-color-text-level-primary);
@@ -63,258 +117,181 @@
     }
   }
 
-  // hover
-  &:hover:not([disabled]) {
-    @include state-colors(
-      var(--kd-color-background-menu-state-hover),
-      var(--kd-color-text-level-light),
-      var(--kd-color-icon-light)
-    );
+  // 1) focus/open (general; disabled/readonly/destructive overrides below)
+  &:focus,
+  &:focus-within,
+  &:focus-visible {
+    outline-color: var(--kd-color-border-variants-focus);
+    background-color: var(--kd-color-background-menu-state-focused);
   }
 
-  // readonly
-  &[readonly] {
+  // 2) disabled
+  &[disabled] {
+    @include disabled-common(var(--kd-color-background-menu-state-default));
+    outline: none;
+    border: none;
+  }
+  // ensure disabled wins over general focus styles
+  &[disabled]:focus,
+  &[disabled]:focus-within,
+  &[disabled]:focus-visible {
+    outline: none;
     border: none;
+  }
+
+  // 3) readonly (non-disabled)
+  &[readonly] {
     cursor: default;
+
+    background-color: var(--kd-color-background-menu-state-default);
+  }
+  &[readonly]:hover,
+  &[readonly]:active,
+  &[readonly]:focus,
+  &[readonly]:focus-visible {
     background-color: var(--kd-color-background-menu-state-default);
 
-    &:hover,
-    &:active:not([disabled]),
-    &:active,
-    &:focus-visible {
-      background-color: var(--kd-color-background-menu-state-default);
-      border: none;
-      outline: none;
-
-      .menu-item-inner-el {
-        color: var(--kd-color-text-level-primary);
-      }
-
-      &.check-icon {
-        color: var(--kd-color-icon-primary);
-      }
-
-      slot[name='icon']::slotted(span) {
-        color: var(--kd-color-icon-primary);
-      }
+    .menu-item-inner-el {
+      color: var(--kd-color-text-level-primary);
     }
-
-    // disabled + readonly
-    &[disabled] {
-      @include disabled-common(var(--kd-color-background-forms-default));
-
-      &:hover {
-        .menu-item-inner-el {
-          color: var(--kd-color-text-level-disabled);
-        }
-
-        &.check-icon {
-          color: var(--kd-color-icon-disabled);
-        }
-
-        slot[name='icon']::slotted(span) {
-          color: var(--kd-color-icon-disabled);
-        }
-      }
+    & .check-icon {
+      color: var(--kd-color-icon-primary);
     }
-
-    // selected + readonly
-    &[selected]:not([disabled]) {
-      background-color: var(--kd-color-background-forms-default);
-
-      &:hover {
-        background: var(--kd-color-background-forms-default);
-      }
+    slot[name='icon']::slotted(span) {
+      color: var(--kd-color-icon-primary);
     }
+  }
 
-    &[selected]:not([disabled]):hover,
-    &[selected]:not([disabled]):active {
-      background: var(--kd-color-background-forms-default);
-
-      .menu-item-inner-el {
-        color: var(--kd-color-text-level-primary);
-      }
-
-      &.check-icon {
-        color: var(--kd-color-icon-primary);
-      }
-
-      slot[name='icon']::slotted(span) {
-        color: var(--kd-color-icon-primary);
-      }
-    }
+  // selected + readonly
+  &[readonly][selected] {
+    background-color: var(--kd-color-background-forms-default);
+  }
+  &[readonly][selected]:hover,
+  &[readonly][selected]:active {
+    background-color: var(--kd-color-background-forms-default);
+  }
 
-    &:is(:active, [highlighted]) {
-      background: var(--kd-color-background-forms-default) !important;
-    }
+  // highlighted/active guard
+  &[readonly]:active,
+  &[readonly][highlighted] {
+    background: var(--kd-color-background-forms-default) !important;
   }
 
-  // focus / focus-within
-  &:is(:focus, :focus-within, :focus-visible):not([disabled]) {
+  // 4) hover (non-AI)
+  &:hover {
     @include state-colors(
-      var(--kd-color-background-menu-state-open),
-      var(--kd-color-text-level-primary)
+      var(--kd-color-background-menu-state-hover),
+      var(--kd-color-text-level-light),
+      var(--kd-color-icon-light)
     );
-    outline: 2px solid var(--kd-color-border-variants-focus);
-    outline-offset: -2px;
   }
+  // cancel hover when readonly/disabled/ai-connected/destructive
+  // &[disabled]:hover,
+  // &[readonly]:hover,
+  // &.ai-connected:hover,
+  // &.destructive:hover {
 
-  // selected
-  &[selected]:not([disabled]) {
+  // }
+
+  // 5) selected (non-disabled)
+  &[selected] {
     @include state-colors(
       var(--kd-color-background-menu-state-open),
       var(--kd-color-text-level-primary)
     );
-
-    &:hover {
-      @include state-colors(
-        var(--kd-color-background-menu-state-hover),
-        var(--kd-color-text-level-light)
-      );
-    }
   }
-
-  // highlighted
-  &[highlighted]:not([disabled]),
-  &[selected][highlighted]:not([disabled]),
-  &[highlighted]:is(:focus, :focus-within, :focus-visible):not([disabled]) {
+  &[selected]:hover {
     @include state-colors(
       var(--kd-color-background-menu-state-hover),
       var(--kd-color-text-level-light)
     );
   }
 
-  // active / pressed
-  &:active:not([disabled]),
-  &:has(:active):not([disabled]),
-  &[selected]:active:not([disabled]),
-  &[selected]:has(:active):not([disabled]),
-  &[highlighted]:active:not([disabled]),
-  &[highlighted]:has(:active):not([disabled]),
-  &[selected][highlighted]:active:not([disabled]),
-  &[selected][highlighted]:has(:active):not([disabled]) {
-    @include state-colors(
-      var(--kd-color-background-menu-state-pressed),
-      var(--kd-color-text-level-light)
-    );
-  }
-
-  // disabled
-  &[disabled] {
-    @include disabled-common(var(--kd-color-background-menu-state-default));
-  }
-
+  // leave commented out for now as it causes issues with keyboard nav
+  // 6) highlighted (non-disabled)
+  // &[highlighted] {
+  //   @include state-colors(
+  //     var(--kd-color-background-menu-state-hover),
+  //     var(--kd-color-text-level-light)
+  //   );
+  //   // default (non-AI) focus ring
+  //   outline: 1px solid var(--kd-color-border-variants-focus);
+  // }
+
+  // ----- AI variant -----
   &.ai-connected {
     background-color: var(--kd-color-background-menu-state-ai-default);
+    color: var(--kd-color-text-level-primary);
   }
 
-  // destructive
-  &.destructive {
-    @include destructive-common;
-  }
+  // &.ai-connected:focus,
+  // &.ai-connected:focus-within,
+  // &.ai-connected:focus-visible {
+  // }
 
-  // AI variant
-  &.ai-connected:not(.option-is-readonly) {
-    @include state-colors(
-      var(--kd-color-background-menu-state-ai-pressed),
-      var(--kd-color-text-level-light)
-    );
+  &.ai-connected:hover {
+    background-color: var(--kd-color-background-menu-state-ai-hover);
 
-    &:hover:not([disabled]) {
-      @include state-colors(
-        var(--kd-color-background-menu-state-ai-hover),
-        var(--kd-color-text-level-light)
-      );
+    .menu-item-inner-el {
+      color: var(--kd-color-text-level-primary);
     }
-
-    &:is(:focus, :focus-within, :focus-visible):not([disabled]) {
-      @include state-colors(
-        var(--kd-color-background-menu-state-ai-open),
-        var(--kd-color-text-level-primary)
-      );
-      outline: 2px solid var(--kd-color-border-button-ai-state-focused) !important;
-      outline-offset: -2px !important;
-    }
-
-    &:active:not([disabled]) {
-      @include state-colors(
-        var(--kd-color-background-menu-state-ai-pressed),
-        var(--kd-color-text-level-light)
-      );
+    slot[name='icon']::slotted(span),
+    .check-icon {
+      color: var(--kd-color-icon-primary);
     }
+  }
 
-    &[selected]:not([disabled]),
-    &[highlighted]:not([disabled]) {
-      @include state-colors(
-        var(--kd-color-background-menu-state-ai-open),
-        var(--kd-color-text-level-primary)
-      );
-
-      &:hover {
-        @include state-colors(
-          var(--kd-color-background-menu-state-ai-hover),
-          var(--kd-color-text-level-light)
-        );
-      }
-    }
+  &.ai-connected[highlighted] {
+    background-color: var(--kd-color-background-menu-state-ai-focused);
+  }
 
-    &[disabled] {
-      @include disabled-common(
-        var(--kd-color-background-menu-state-ai-default)
-      );
+  &.ai-connected[selected]:hover,
+  &.ai-connected[highlighted]:hover {
+    @include state-colors(
+      var(--kd-color-background-menu-state-ai-hover),
+      var(--kd-color-text-level-primary)
+    );
+    slot[name='icon']::slotted(span),
+    .check-icon {
+      color: var(--kd-color-icon-primary);
     }
+  }
 
-    &.destructive {
-      @include destructive-common;
-    }
+  &.ai-connected:active,
+  &.ai-connected[data-pressed],
+  &.ai-connected:hover:active,
+  &.ai-connected:hover[data-pressed] {
+    @include pressed(
+      var(--kd-color-background-menu-state-ai-pressed),
+      var(--kd-color-text-level-primary),
+      var(--kd-color-icon-primary),
+      $layered: true,
+      $important: true
+    );
   }
-}
 
-// duplicate explicit selectors retained (for specificity)
-.menu-item[highlighted]:not([disabled]) {
-  @include state-colors(
-    var(--kd-color-background-menu-state-hover),
-    var(--kd-color-text-level-light)
-  );
-}
+  &.ai-connected[disabled] {
+    @include disabled-common(var(--kd-color-background-menu-state-ai-default));
+  }
 
-.menu-item:is(:focus, :focus-visible):not([disabled]) {
-  @include state-colors(
-    var(--kd-color-background-menu-state-open),
-    var(--kd-color-text-level-primary)
-  );
-  outline: 2px solid var(--kd-color-border-variants-focus);
-  outline-offset: -2px;
+  // Destructive variant
+  &.destructive {
+    @include destructive-common;
+  }
 }
 
-.menu-item:active:not([disabled]) {
-  @include state-colors(
+// ---- pressed states (non-AI) ----
+:host .menu-item:active,
+:host .menu-item[data-pressed],
+:host .menu-item[selected]:active,
+:host .menu-item[selected][data-pressed],
+:host .menu-item[highlighted]:active,
+:host .menu-item[highlighted][data-pressed] {
+  @include pressed(
     var(--kd-color-background-menu-state-pressed),
-    var(--kd-color-text-level-light)
-  );
-}
-
-.menu-item.ai-connected[highlighted]:not([disabled]) {
-  @include state-colors(
-    var(--kd-color-background-menu-state-ai-open),
-    var(--kd-color-text-level-light)
-  );
-}
-
-.menu-item.ai-connected:is(:focus, :focus-within, :focus-visible):not(
-    [disabled]
-  ) {
-  @include state-colors(
-    var(--kd-color-background-menu-state-ai-open),
-    var(--kd-color-text-level-primary)
-  );
-  outline: 2px solid var(--kd-color-border-variants-focus);
-  outline-offset: -2px;
-}
-
-.menu-item.ai-connected:active:not([disabled]) {
-  @include state-colors(
-    var(--kd-color-background-menu-state-ai-pressed),
-    var(--kd-color-text-level-light)
+    var(--kd-color-text-level-light),
+    var(--kd-color-icon-light),
+    $layered: true,
+    $important: true
   );
 }