@c8y/style 1024.15.13 → 1024.16.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/style",
-  "version": "1024.15.13",
+  "version": "1024.16.5",
   "license": "Apache-2.0",
   "author": "Cumulocity GmbH",
   "description": "Styles for Cumulocity IoT applications",

package/styles/components/data-input/_c8y-ai-chat.scss

@@ -1,5 +1,5 @@
-@use '../../../variables/index'as *;
-@use "../../mixins/tab-focus";
+@use '../../../variables/index' as *;
+@use '../../mixins/tab-focus';
 /**
  * C8Y AI Chat - AI chat widget component
  *
@@ -14,6 +14,7 @@
  * - Font-size em values (1.2em, 1.5em, 2em): Relative heading sizes
  * - Line-height values (1.7): Unitless ratio
  * - Z-index values: Stacking order
+ * - Working indicator dot gap (2px): Fine visual spacing smaller than $size-4
  */
 
 c8y-widget-ai-chat-section {
@@ -33,13 +34,14 @@ c8y-widget-ai-chat-section {
 
 c8y-agent-chat {
   width: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .chat-input {
   display: flex;
   width: 100%;
   flex-direction: column;
-  gap: $size-8;
   padding: $size-16 $size-16 $size-4 $size-16;
   background-color: $component-background-default;
   border-top: 1px solid var(--c8y-root-component-border-color);
@@ -52,12 +54,14 @@ c8y-agent-chat {
     width: 100%;
 
     textarea {
-      border-radius: 20px !important;
+      border-top-right-radius: $size-20 !important;
+      border-top-left-radius: $size-20 !important;
       min-height: $size-40;
-      padding-top: $size-10;
-      padding-right: $size-40;
-      padding-bottom: $size-10;
-      padding-left: $size-16;
+      padding-top: $size-16;
+      padding-right: $size-48;
+      padding-bottom: $size-16;
+      padding-left: $size-24;
+      margin-bottom: 0px;
 
       &::-webkit-scrollbar {
         width: unset;
@@ -83,15 +87,42 @@ c8y-agent-chat {
       }
     }
 
+    &.chat-input-with-action-bar textarea {
+      padding-bottom: calc(var(--c8y-unit-base) * 6);
+    }
+
+    &.chat-input-with-action-bar .chat-action-bar {
+      border-top: 1px solid var(--c8y-root-component-border-color);
+    }
+
     .chat-input-group-btn {
       position: absolute;
-      right: $size-4;
-      bottom: $size-4;
+      right: $size-8;
+      top: $size-8;
 
       .btn-dot {
         margin: 0 !important;
         height: $form-control-height-base !important;
         border-radius: 50%;
+        &:active, &:hover {
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+
+  .chat-action-bar {
+    width: 100%;
+    border: 1px solid var(--c8y-form-control-border-color-default);
+    border-top: 0;
+    border-bottom-left-radius: $size-20;
+    border-bottom-right-radius: $size-20;
+    padding: $size-8;
+    .btn-dot {
+      height: $form-control-height-base !important;
+      border-radius: 50%;
+      &:active, &:hover {
+        border-radius: 50%;
       }
     }
   }
@@ -120,7 +151,7 @@ c8y-agent-chat {
   align-self: flex-start;
   min-width: 0;
   width: 100%;
-  margin-top: $size-16;
+  // margin-top: $size-16;
   padding: $size-16 $size-24 $size-16 $size-16;
 
   h1 {
@@ -198,9 +229,7 @@ c8y-agent-chat {
   }
 }
 
-
 c8y-ai-chat {
-
   // Visually hidden label included when users copy-paste from the chat, e.g. to report issues.
   .hidden-copy-label {
     display: block;
@@ -216,11 +245,11 @@ c8y-ai-chat {
       flex-direction: column;
       max-width: 100%;
       min-inline-size: 1rem;
-      transition: all .35s ease;
+      transition: all 0.35s ease;
 
-      &:has([aria-expanded="true"]) {
+      &:has([aria-expanded='true']) {
         min-inline-size: 100%;
-        transition: all .35s ease;
+        transition: all 0.35s ease;
       }
 
       &:focus-within {
@@ -252,8 +281,72 @@ c8y-ai-chat {
         margin-bottom: 0;
       }
     }
+  }
+
+  .working-indicator__dots {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 2px;
+
+    span {
+      width: $size-4;
+      height: $size-4;
+      border-radius: 50%;
+      background-color: currentColor;
+      opacity: 0.2;
+      animation: working-indicator-dot 1.2s ease-in-out infinite;
+
+      &:nth-child(2) {
+        animation-delay: 0.2s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.4s;
+      }
+    }
+  }
+
+  @keyframes working-indicator-dot {
+    0%,
+    80%,
+    100% {
+      opacity: 0.2;
+    }
+
+    40% {
+      opacity: 1;
+    }
+  }
+}
+
+c8y-ai-chat-speech-to-text {
+  // While recognition is running the microphone turns to the danger color and its icon pulses to
+  // signal that the app is actively listening.
+  .c8y-speech-to-text-btn--listening {
+    color: var(--c8y-palette-status-danger, var(--c8y-brand-primary));
 
+    .c8y-speech-to-text-btn__icon {
+      animation: speech-to-text-pulse 1.4s ease-in-out infinite;
+    }
   }
 
+  @keyframes speech-to-text-pulse {
+    0%,
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
 
+    50% {
+      opacity: 0.55;
+      transform: scale(1.18);
+    }
+  }
+
+  // Respect users who prefer reduced motion: keep the color change but drop the pulsing.
+  @media (prefers-reduced-motion: reduce) {
+    .c8y-speech-to-text-btn--listening .c8y-speech-to-text-btn__icon {
+      animation: none;
+    }
+  }
 }

package/styles/components/status-feedback-and-notifications/_code.scss

@@ -68,6 +68,25 @@ pre {
     font-size: inherit;
     overflow-wrap: break-word;
   }
+
+  &[data-label]{
+    position: relative;
+    padding-top: $margin-24;
+    border-radius: $btn-border-radius-base;
+    &::before{
+      content: attr(data-label);
+      display: inline-block;
+      background-color: $text-muted;
+      color: $component-background-default;
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding: 0 4px;
+      text-transform: uppercase;
+      font-size: 10px;
+      font-family: $font-family-base;
+    }
+  }
 }
 
 // pre:has(code) {

package/styles/core/buttons/_button-groups.scss

@@ -132,6 +132,16 @@
 .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
   @include border-radius.border-left-radius(0);
 }
+// adjust margin and border radius when nested btn-group with dropdown is using cdkTrapFocus
+.btn-group:has(.btn-group + .cdk-visually-hidden:last-child){
+   > .btn-group{
+      margin-left: -2px;
+     > .btn:first-child {
+      @include border-radius.border-left-radius(0);
+      @include border-radius.border-right-radius($btn-border-radius-base);
+    }
+  }
+}
 
 // On active and open, don't show outline
 .btn-group .dropdown-toggle:active,

package/styles/core/forms/_forms.scss

@@ -80,6 +80,11 @@ fieldset.c8y-fieldset {
   padding-block-end: 0;
   padding-inline-start: 1.1428571429em;
   min-inline-size: 100%;
+
+  &.ai-tool-call__fieldset{
+     padding-inline-start: 0.742857em;
+  }
+
   &--lg {
     padding-block-start: 1rem;
     padding-inline-end: 1.5em;

package/styles/utilities/_borders.scss

@@ -7,6 +7,9 @@
  *
  * Intentionally hardcoded values:
  * - 1px border widths: Standard border width, not spacing
+ * - 0 border radius: Reset, not a size on the token scale
+ * - 50% and 9999px border radius: Shape ratios for circles and pills, which have to
+ *   hold at any element size, so they cannot come from the fixed $size-* scale
  */
 
 .border-all {
@@ -129,9 +132,38 @@
 }
 
 
-// Removed unused border-radius utilities - verified 0 usages:
-// .b-r-8, .b-r-24, .b-r-32, .b-r-40
+// border radius
+//
+// `.b-r-4` was never defined, in the SCSS layer or the LESS one before it, yet two ai-chat templates
+// carried the class from a scale that only existed on paper. Defining it here would have given those
+// two surfaces a radius they never had, so the dead class was removed from them in the same change.
+// `.b-r-2` stays undefined: nothing uses it and nothing documents it.
 
+.b-r-0 {
+  border-radius: 0 !important;
+}
+.b-r-4 {
+  border-radius: $size-4 !important;
+}
+.b-r-8 {
+  border-radius: $size-8 !important;
+}
 .b-r-16 {
   border-radius: $size-16 !important;
 }
+.b-r-24 {
+  border-radius: $size-24 !important;
+}
+.b-r-32 {
+  border-radius: $size-32 !important;
+}
+.b-r-40 {
+  border-radius: $size-40 !important;
+}
+
+.b-r-circle {
+  border-radius: 50% !important;
+}
+.b-r-pill {
+  border-radius: 9999px !important;
+}

package/styles/utilities/_contextual-colors.scss

@@ -31,46 +31,74 @@
 .text-primary {
   @include text-emphasis.text-emphasis-variant(var(--c8y-root-component-brand-primary,$brand-primary));
 }
-// Removed unused: .text-primary-light, .text-primary-dark
+.text-primary-light {
+  @include text-emphasis.text-emphasis-variant($brand-primary-light);
+}
+.text-primary-dark {
+  @include text-emphasis.text-emphasis-variant($brand-primary-dark);
+}
 
 // Accent text colors
 .text-accent {
   @include text-emphasis.text-emphasis-variant($brand-accent);
 }
-// Removed unused: .text-accent-light, .text-accent-dark
-// Note: .text-accent was NOT in cat5-text-utils.txt (step 225), only light/dark were.
-// Checking cat5-text-utils.txt again...
-// It lists: .text-accent-dark, .text-accent-light. NOT .text-accent.
+.text-accent-light {
+  @include text-emphasis.text-emphasis-variant($brand-accent-light);
+}
+.text-accent-dark {
+  @include text-emphasis.text-emphasis-variant($brand-accent-dark);
+}
 
 // Success text colors
 .text-success {
   @include text-emphasis.text-emphasis-variant($status-success);
 }
-// Removed unused: .text-success-light, .text-success-dark
+.text-success-light {
+  @include text-emphasis.text-emphasis-variant($status-success-light);
+}
+.text-success-dark {
+  @include text-emphasis.text-emphasis-variant($status-success-dark);
+}
 
 // Info text colors
 .text-info {
   @include text-emphasis.text-emphasis-variant($status-info);
 }
-// Removed unused: .text-info-light, .text-info-dark
+.text-info-light {
+  @include text-emphasis.text-emphasis-variant($status-info-light);
+}
+.text-info-dark {
+  @include text-emphasis.text-emphasis-variant($status-info-dark);
+}
 
 // Warning text colors
 .text-warning {
   @include text-emphasis.text-emphasis-variant($status-warning);
 }
-// Removed unused: .text-warning-light, .text-warning-high, .text-warning-dark
+.text-warning-light {
+  @include text-emphasis.text-emphasis-variant($status-warning-light);
+}
+// Dropped on purpose, not restored: .text-warning-high
+.text-warning-dark {
+  @include text-emphasis.text-emphasis-variant($status-warning-dark);
+}
 
 // Danger text colors
 .text-danger {
   @include text-emphasis.text-emphasis-variant($status-danger);
 }
-// Removed unused: .text-danger-light, .text-danger-dark
-
-// Gray text colors
-// Removed unused gray text colors - verified 0 usages:
-// .text-gray-10...100
+.text-danger-light {
+  @include text-emphasis.text-emphasis-variant($status-danger-light);
+}
+.text-danger-dark {
+  @include text-emphasis.text-emphasis-variant($status-danger-dark);
+}
 
 // backwards compatibility
+//
+// Dropped on purpose and deliberately not restored: .text-gray-medium, .text-gray-medium-dark,
+// .text-gray-light, .text-gray-white. A few legacy templates still carry these class names; that is
+// harmless, since the class simply does not match anything.
 
 .text-gray-darker {
   @include text-emphasis.text-emphasis-variant($brand-primary-dark);
@@ -80,20 +108,14 @@
   @include text-emphasis.text-emphasis-variant($gray-30);
 }
 
-// Removed unused: .text-gray-medium-dark, .text-gray-medium
-
 .text-gray {
   @include text-emphasis.text-emphasis-variant($gray-50);
 }
 
-// Removed unused: .text-gray-light
-
 .text-gray-lighter {
   @include text-emphasis.text-emphasis-variant($gray-90);
 }
 
-// Removed unused: .text-gray-white
-
 //================================
 // Contextual backgrounds
 //================================
@@ -105,13 +127,29 @@
   @include background-variant.bg-variant($brand-primary-light);
 }
 
-// Removed unused: .bg-complementary
+.bg-complementary {
+  @include background-variant.bg-variant($brand-complementary);
+}
 
-// Removed unused: .bg-accent, .bg-accent-dark, .bg-accent-light
-// cat6-bg-utils.txt list: .bg-accent, .bg-accent-dark, .bg-accent-light.
+.bg-accent {
+  @include background-variant.bg-variant($brand-accent);
+}
+.bg-accent-light {
+  @include background-variant.bg-variant($brand-accent-light);
+}
+.bg-accent-dark {
+  @include background-variant.bg-variant($brand-accent-dark);
+}
 
-// Removed unused: .bg-success, .bg-success-dark, .bg-success-light
-// cat6-bg-utils.txt list: .bg-success, .bg-success-dark, .bg-success-light.
+.bg-success {
+  @include background-variant.bg-variant($status-success);
+}
+.bg-success-light {
+  @include background-variant.bg-variant($status-success-light);
+}
+.bg-success-dark {
+  @include background-variant.bg-variant($status-success-dark);
+}
 
 .bg-info {
   @include background-variant.bg-variant($status-info);
@@ -119,16 +157,30 @@
 .bg-info-light {
   @include background-variant.bg-variant($status-info-light);
 }
-// Removed unused: .bg-info-dark (cat6 lists .bg-info-dark, but not .bg-info or .bg-info-light)
+.bg-info-dark {
+  @include background-variant.bg-variant($status-info-dark);
+}
 
 .bg-warning {
   @include background-variant.bg-variant($status-warning);
 }
-// Removed unused: .bg-warning-light, .bg-warning-lightest, .bg-warning-dark (cat6 lists these)
-// cat6 does NOT list .bg-warning.
+.bg-warning-light {
+  @include background-variant.bg-variant($status-warning-light);
+}
+.bg-warning-dark {
+  @include background-variant.bg-variant($status-warning-dark);
+}
+// Dropped on purpose, not restored: .bg-warning-lightest, .bg-transparent
 
-// Removed unused: .bg-danger, .bg-danger-light, .bg-danger-dark
-// cat6 lists .bg-danger, .bg-danger-light, .bg-danger-dark.
+.bg-danger {
+  @include background-variant.bg-variant($status-danger);
+}
+.bg-danger-light {
+  @include background-variant.bg-variant($status-danger-light);
+}
+.bg-danger-dark {
+  @include background-variant.bg-variant($status-danger-dark);
+}
 
 .bg-checkered {
   background-image:
@@ -142,7 +194,13 @@
 
 // Levels
 
-// Removed unused: bg-level-4, bg-level-3
+.bg-level-4 {
+   @include background-variant.bg-variant(var(--c8y-level-4));
+}
+
+.bg-level-3 {
+   @include background-variant.bg-variant(var(--c8y-level-3));
+}
 
 .bg-level-2 {
    @include background-variant.bg-variant(var(--c8y-level-2));
@@ -156,10 +214,16 @@
    @include background-variant.bg-variant(var(--c8y-level-0));
 }
 
-// Removed unused: .bg-transparent
-
 // Grays
-// Removed unused: .bg-gray-10...100
+// Numbered gray text/background utilities, driven by the gray palette tokens.
+@each $step in (10, 20, 30, 40, 50, 60, 70, 80, 90, 100) {
+  .text-gray-#{$step} {
+    @include text-emphasis.text-emphasis-variant(var(--c8y-palette-gray-#{$step}));
+  }
+  .bg-gray-#{$step} {
+    @include background-variant.bg-variant(var(--c8y-palette-gray-#{$step}));
+  }
+}
 
 .bg-inherit {
   @include background-variant.bg-variant(inherit);

package/styles/utilities/_position.scss

@@ -7,7 +7,7 @@
  *
  * Intentionally hardcoded values:
  * - 0 values: Zero position offsets, not spacing
- * - Position keywords: relative, absolute, static, sticky
+ * - Position keywords: relative, absolute, static, sticky, fixed
  */
 
 .p-relative {
@@ -22,6 +22,9 @@
 .p-sticky {
   position: sticky !important;
 }
+.p-fixed {
+  position: fixed !important;
+}
 
 .top-0 {
   top: 0 !important;
@@ -29,9 +32,12 @@
 .left-0 {
   left: 0 !important;
 }
-
-// Removed unused positioning utilities - verified 0 usages:
-// .right-0, .bottom-0
+.right-0 {
+  right: 0 !important;
+}
+.bottom-0 {
+  bottom: 0 !important;
+}
 
 // media queries
 @media (max-width: $screen-xs-max) {
@@ -47,6 +53,9 @@
   .p-sticky-xs {
     position: sticky !important;
   }
+  .p-fixed-xs {
+    position: fixed !important;
+  }
   .top-0-xs {
     top: 0 !important;
   }
@@ -74,6 +83,9 @@
   .p-sticky-sm {
     position: sticky !important;
   }
+  .p-fixed-sm {
+    position: fixed !important;
+  }
   .top-0-sm {
     top: 0 !important;
   }
@@ -101,6 +113,9 @@
   .p-sticky-md {
     position: sticky !important;
   }
+  .p-fixed-md {
+    position: fixed !important;
+  }
   .top-0-md {
     top: 0 !important;
   }
@@ -128,6 +143,9 @@
   .p-sticky-lg {
     position: sticky !important;
   }
+  .p-fixed-lg {
+    position: fixed !important;
+  }
   .top-0-lg {
     top: 0 !important;
   }

package/styles/utilities/_sizing.scss

@@ -73,6 +73,8 @@
   height: 100% !important;
 }
 
+// Superseded by .fit-h-md, which follows the .class-{breakpoint} convention used by
+// every other responsive utility. Kept so existing markup keeps working.
 .fit-h--md{
   @media (min-width: $screen-md-min){
     height: 100% !important;
@@ -83,6 +85,31 @@
   height: 20px !important;
 }
 
+//media queries
+@media (max-width: $screen-xs-max) {
+  .fit-h-xs {
+    height: 100% !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .fit-h-sm {
+    height: 100% !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .fit-h-md {
+    height: 100% !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .fit-h-lg {
+    height: 100% !important;
+  }
+}
+
 // Sticky header
 .sticky-header-top-0 {
   position: sticky !important;