From b5bcc6b1d1fdd452ed1b28f95b75a8f75a78e563 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 9 Apr 2026 08:30:17 +0300 Subject: [PATCH 1/5] feat(button-group): update button group styles and implement new properties --- .../button-group/_button-group-theme.scss | 376 +++--------------- 1 file changed, 48 insertions(+), 328 deletions(-) diff --git a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss index 1cd13a4877e..8a5e4a56a75 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss @@ -13,8 +13,6 @@ $outline-btn-indent: rem(2px); $variant: map.get($theme, '_meta', 'theme'); - $bootstrap-theme: $variant == 'bootstrap'; - $indigo-theme: $variant == 'indigo'; $group-item-min-width: map.get(( 'material': rem(42px), 'fluent': rem(42px), @@ -22,18 +20,6 @@ 'indigo': rem(32px), ), $variant); - %item-overlay { - &::before { - content: ''; - z-index: -1; - position: absolute; - pointer-events: none; - width: 100%; - height: 100%; - background: var-get($theme, 'item-focused-background'); - } - } - %igx-group-display { display: flex; box-shadow: var-get($theme, 'elevation'); @@ -72,7 +58,11 @@ } &:not(:nth-child(1)) { - margin-inline-start: rem(-1px); + @if $variant != 'fluent' { + margin-inline-start: rem(-1px); + } @else { + border-inline-start: 0; + } } &:first-of-type { @@ -105,36 +95,13 @@ } } - @if $variant != 'fluent' { - &:active { - color: var-get($theme, 'item-hover-text-color'); - background: var-get($theme, 'item-hover-background'); - border-color: var-get($theme, 'item-hover-border-color'); - - igx-icon { - color: var-get($theme, 'item-hover-icon-color'); - } - } - } - - @if $variant == 'material' { - &:hover, - &:active { - @extend %item-overlay; - - background: var-get($theme, 'item-background'); - } - - &:hover { - &::before { - background: var-get($theme, 'item-hover-background'); - } - } - } + &:active { + color: var-get($theme, 'item-hover-text-color'); + background: var-get($theme, 'item-active-background'); + border-color: var-get($theme, 'item-hover-border-color'); - @if $variant == 'bootstrap' { - &:active { - @extend %item-overlay; + igx-icon { + color: var-get($theme, 'item-hover-icon-color'); } } @@ -144,11 +111,6 @@ --ig-icon-size: #{$icon-size}; } - - &:active { - background: var-get($theme, 'item-focused-background'); - color: var-get($theme, 'item-text-color'); - } } @if $variant == 'indigo' { @@ -161,91 +123,30 @@ } &:hover { - border-color: var-get($theme, 'item-hover-border-color'); z-index: 1; } &:active { - color: var-get($theme, 'item-hover-text-color'); - background: var-get($theme, 'item-hover-background'); - border-color: var-get($theme, 'item-hover-border-color'); z-index: 2; } } &[igxButton].igx-button--focused { - &:hover { - color: var-get($theme, 'item-hover-text-color'); - background: var-get($theme, 'item-hover-background'); - - igx-icon { - color: var-get($theme, 'item-hover-icon-color'); - } - } - - @if $variant != 'fluent' { - color: var-get($theme, 'item-hover-text-color'); - background: var-get($theme, 'item-hover-background'); - border-color: var-get($theme, 'item-hover-border-color'); - - igx-icon { - color: var-get($theme, 'item-hover-icon-color'); - } - } - - @if $variant == 'material' { - @extend %item-overlay; - - background: var-get($theme, 'item-background'); - - &::before { - background: var-get($theme, 'item-hover-background'); - } - - &:hover { - background: var-get($theme, 'item-background'); - - &::before { - background: var-get($theme, 'item-focused-hover-background'); - } - } - - &:active { - background: var-get($theme, 'item-background'); - color: var-get($theme, 'item-hover-text-color'); - - igx-icon { - color: var-get($theme, 'item-hover-icon-color'); - } + color: var-get($theme, 'item-focused-text-color'); + background: var-get($theme, 'item-focused-background'); + border-color: var-get($theme, 'item-focused-border-color'); - &::before { - background: var-get($theme, 'item-focused-background'); - } - } + igx-icon { + color: var-get($theme, 'item-icon-color'); } @if $variant == 'bootstrap' { - background: var-get($theme, 'item-background'); z-index: 1; box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color'); - - &:active { - background: var-get($theme, 'item-hover-background'); - color: var-get($theme, 'item-hover-text-color'); - - igx-icon { - color: var-get($theme, 'item-hover-icon-color'); - } - } } @if $variant == 'fluent' { - background: var-get($theme, 'item-background'); - color: var-get($theme, 'item-text-color'); - - igx-icon { - color: var-get($theme, 'item-icon-color'); - } + border-color: var-get($theme, 'item-border-color'); &::after { content: ''; @@ -257,36 +158,20 @@ height: calc(100% - (#{$outline-btn-indent} * 2)); box-shadow: 0 0 0 rem(1px) var-get($theme, 'item-focused-border-color'); } - - &:active { - background: var-get($theme, 'item-focused-background'); - } } @if $variant == 'indigo' { - color: var-get($theme, 'item-focused-text-color'); - background: var-get($theme, 'item-focused-background'); - border-color: var-get($theme, 'item-focused-border-color'); box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color'); z-index: 2; + } - igx-icon { - color: var-get($theme, 'item-icon-color'); - } - - &:hover { - border-color: var-get($theme, 'item-hover-border-color'); - } - - &:active { - color: var-get($theme, 'item-hover-text-color'); - background: var-get($theme, 'item-hover-background'); - border-color: var-get($theme, 'item-hover-border-color'); + &:hover { + background: var-get($theme, 'item-focused-hover-background'); + border-color: var-get($theme, 'item-focused-hover-border-color'); + } - igx-icon { - color: var-get($theme, 'item-hover-icon-color'); - } - } + &:active { + background: var-get($theme, 'item-active-background'); } } } @@ -337,219 +222,54 @@ } } - @if $variant == 'material' { - &:hover { - @extend %item-overlay; - - background: var-get($theme, 'item-selected-background'); - - &::before { - background: var-get($theme, 'item-selected-hover-background'); - } - } - - &:active { - @extend %item-overlay; - - color: var-get($theme, 'item-selected-hover-text-color'); - background: var-get($theme, 'item-selected-background'); - border-color: var-get($theme, 'item-selected-border-color'); - - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } + &:active { + border-color: var-get($theme, 'item-selected-hover-border-color'); + color: var-get($theme, 'item-selected-hover-text-color'); + background: var-get($theme, 'item-selected-active-background'); - &::before { - background: var-get($theme, 'item-selected-focus-background'); - } + igx-icon { + color: var-get($theme, 'item-selected-hover-icon-color'); } } - @if $variant == 'bootstrap' { - &:active { - @extend %item-overlay; + &[igxButton].igx-button--focused { + background: var-get($theme, 'item-selected-focus-background'); + border-color: var-get($theme, 'item-selected-hover-border-color'); + @if $variant == 'indigo' { color: var-get($theme, 'item-selected-text-color'); border-color: var-get($theme, 'item-selected-border-color'); - background: var-get($theme, 'item-selected-hover-background'); - - &::before { - background: var-get($theme, 'item-selected-focus-background'); - } + box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color'); + z-index: 2; } - } - @if $variant == 'fluent' { &:hover { - background: var-get($theme, 'item-selected-background'); - color: var-get($theme, 'item-selected-text-color'); - - @extend %item-overlay; + background: var-get($theme, 'item-selected-focus-hover-background'); - &::before { - background: var-get($theme, 'item-selected-hover-background'); - } - } - - &:active { - background: var-get($theme, 'item-selected-focus-background'); - color: var-get($theme, 'item-selected-text-color'); - - igx-icon { - color: var-get($theme, 'item-selected-icon-color'); + @if $variant != 'indigo' { + border-color: var-get($theme, 'item-selected-border-color'); + } @else { + border-color: var-get($theme, 'item-selected-hover-border-color'); } } - } - @if $variant == 'indigo' { &:active { - background: var-get($theme, 'item-selected-hover-background'); - color: var-get($theme, 'item-selected-hover-text-color'); + background: var-get($theme, 'item-selected-active-background'); border-color: var-get($theme, 'item-selected-hover-border-color'); - - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } - } - } - - &[igxButton].igx-button--focused { - @if $variant != 'fluent' { - &:hover { - color: var-get($theme, 'item-selected-hover-text-color'); - background: var-get($theme, 'item-selected-hover-background'); - border-color: var-get($theme, 'item-selected-hover-border-color'); - } - - &:active { - background: var-get($theme, 'item-selected-hover-background'); - color: var-get($theme, 'item-selected-hover-text-color'); - - &::before { - background: var-get($theme, 'item-selected-focus-background'); - } - - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } - } - } - - @if $variant == 'material' or $variant == 'fluent' { - &:hover { - @extend %item-overlay; - - &::before { - background: var-get($theme, 'item-selected-focus-hover-background'); - } - } - } - - @if $variant == 'material' { - background: var-get($theme, 'item-selected-background'); - color: var-get($theme, 'item-selected-hover-text-color'); - border-color: var-get($theme, 'item-selected-hover-border-color'); - - &::before { - background: var-get($theme, 'item-selected-hover-background'); - } - - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } - - &:hover { - background: var-get($theme, 'item-selected-background'); - - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } - } - - &:active { - background: var-get($theme, 'item-selected-background'); - } - } - - @if $variant == 'bootstrap' { - color: var-get($theme, 'item-selected-text-color'); - border-color: var-get($theme, 'item-selected-border-color'); - background: var-get($theme, 'item-selected-background'); - box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color'); - - igx-icon { - color: var-get($theme, 'item-selected-icon-color'); - } - } - - @if $variant == 'fluent' { - background: var-get($theme, 'item-selected-background'); - color: var-get($theme, 'item-selected-text-color'); - - igx-icon { - color: var-get($theme, 'item-selected-icon-color'); - } - - &:hover { - background: var-get($theme, 'item-selected-background'); - color: var-get($theme, 'item-selected-text-color'); - - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } - } - - &:active { - background: var-get($theme, 'item-selected-focus-background'); - } - } - - @if $variant == 'indigo' { - box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color'); - border-color: var-get($theme, 'item-selected-border-color'); - background: var-get($theme, 'item-selected-background'); - color: var-get($theme, 'item-selected-text-color'); - - igx-icon { - color: var-get($theme, 'item-selected-icon-color'); - } - - &:hover, - &:active { - border-color: var-get($theme, 'item-selected-hover-border-color'); - - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } - } } } &[igxButton][disabled='true'] { - position: relative; - - &::before { - position: absolute; - content: ''; - top: 0; - bottom: 0; - inset-inline-end: 0; - inset-inline-start: 0; - background: var-get($theme, 'disabled-selected-background'); + color: var-get($theme, 'disabled-selected-text-color'); + background: var-get($theme, 'disabled-selected-background'); + border-color: var-get($theme, 'disabled-selected-border-color'); + + igx-icon { + color: var-get($theme, 'disabled-selected-icon-color'); } @if $variant == 'indigo' { - color: var-get($theme, 'disabled-selected-text-color'); - background: var-get($theme, 'disabled-selected-background'); border: none; - - igx-icon { - color: var-get($theme, 'disabled-selected-icon-color'); - } - - &::before { - display: none; - } } } } From d4aaffd4b79e9366019ad61bfa0e57b3f0b47ba8 Mon Sep 17 00:00:00 2001 From: didimmova Date: Tue, 14 Apr 2026 14:08:29 +0300 Subject: [PATCH 2/5] feat(button-group): update button group styles --- .../button-group/_button-group-theme.scss | 60 +++++++++++++------ 1 file changed, 43 insertions(+), 17 deletions(-) diff --git a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss index 8a5e4a56a75..a4f4259e964 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss @@ -86,6 +86,7 @@ } &:hover { + z-index: 1; color: var-get($theme, 'item-hover-text-color'); background: var-get($theme, 'item-hover-background'); border-color: var-get($theme, 'item-hover-border-color'); @@ -96,9 +97,10 @@ } &:active { + z-index: 2; color: var-get($theme, 'item-hover-text-color'); background: var-get($theme, 'item-active-background'); - border-color: var-get($theme, 'item-hover-border-color'); + border-color: var-get($theme, 'item-active-border-color'); igx-icon { color: var-get($theme, 'item-hover-icon-color'); @@ -121,14 +123,6 @@ --ig-icon-size: #{$icon-size}; } - - &:hover { - z-index: 1; - } - - &:active { - z-index: 2; - } } &[igxButton].igx-button--focused { @@ -137,7 +131,11 @@ border-color: var-get($theme, 'item-focused-border-color'); igx-icon { - color: var-get($theme, 'item-icon-color'); + @if $variant == 'indigo' { + color: var-get($theme, 'item-icon-color'); + } @else { + color: var-get($theme, 'item-focused-text-color'); + } } @if $variant == 'bootstrap' { @@ -168,10 +166,22 @@ &:hover { background: var-get($theme, 'item-focused-hover-background'); border-color: var-get($theme, 'item-focused-hover-border-color'); + color: var-get($theme, 'item-focused-hover-text-color'); + + igx-icon { + color: var-get($theme, 'item-focused-hover-text-color'); + } + + @if $variant == 'indigo' { + igx-icon { + color: var-get($theme, 'item-hover-icon-color'); + } + } } &:active { background: var-get($theme, 'item-active-background'); + border-color: var-get($theme, 'item-active-border-color'); } } } @@ -202,7 +212,7 @@ background: var-get($theme, 'item-selected-background'); border-color: var-get($theme, 'item-selected-border-color'); position: relative; - z-index: 1; + z-index: 3; &[igxButton] { border-color: var-get($theme, 'item-selected-border-color'); @@ -223,7 +233,7 @@ } &:active { - border-color: var-get($theme, 'item-selected-hover-border-color'); + border-color: var-get($theme, 'item-selected-active-border-color'); color: var-get($theme, 'item-selected-hover-text-color'); background: var-get($theme, 'item-selected-active-background'); @@ -235,9 +245,21 @@ &[igxButton].igx-button--focused { background: var-get($theme, 'item-selected-focus-background'); border-color: var-get($theme, 'item-selected-hover-border-color'); + color: var-get($theme, 'item-selected-text-color'); + + igx-icon { + color: var-get($theme, 'item-selected-icon-color'); + } + + @if $variant == 'material' { + color: var-get($theme, 'item-selected-hover-text-color'); + + igx-icon { + color: var-get($theme, 'item-selected-hover-icon-color'); + } + } @if $variant == 'indigo' { - color: var-get($theme, 'item-selected-text-color'); border-color: var-get($theme, 'item-selected-border-color'); box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color'); z-index: 2; @@ -245,17 +267,21 @@ &:hover { background: var-get($theme, 'item-selected-focus-hover-background'); + color: var-get($theme, 'item-selected-hover-text-color'); + border-color: var-get($theme, 'item-selected-border-color'); - @if $variant != 'indigo' { - border-color: var-get($theme, 'item-selected-border-color'); - } @else { + igx-icon { + color: var-get($theme, 'item-selected-hover-icon-color'); + } + + @if $variant == 'indigo' { border-color: var-get($theme, 'item-selected-hover-border-color'); } } &:active { background: var-get($theme, 'item-selected-active-background'); - border-color: var-get($theme, 'item-selected-hover-border-color'); + border-color: var-get($theme, 'item-selected-active-border-color'); } } From cf95dc0093fe14a7d62e538c3e43932d297fb93d Mon Sep 17 00:00:00 2001 From: didimmova Date: Tue, 14 Apr 2026 15:55:58 +0300 Subject: [PATCH 3/5] fix(button-group): fix z-indexes --- .../components/button-group/_button-group-theme.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss index a4f4259e964..f807015248c 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss @@ -126,6 +126,7 @@ } &[igxButton].igx-button--focused { + z-index: 2; color: var-get($theme, 'item-focused-text-color'); background: var-get($theme, 'item-focused-background'); border-color: var-get($theme, 'item-focused-border-color'); @@ -139,7 +140,6 @@ } @if $variant == 'bootstrap' { - z-index: 1; box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color'); } @@ -160,7 +160,6 @@ @if $variant == 'indigo' { box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color'); - z-index: 2; } &:hover { @@ -212,7 +211,6 @@ background: var-get($theme, 'item-selected-background'); border-color: var-get($theme, 'item-selected-border-color'); position: relative; - z-index: 3; &[igxButton] { border-color: var-get($theme, 'item-selected-border-color'); @@ -262,7 +260,10 @@ @if $variant == 'indigo' { border-color: var-get($theme, 'item-selected-border-color'); box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color'); - z-index: 2; + } + + @if $variant == 'bootstrap' { + box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color'); } &:hover { From fcc815665a9ba64ed356178b178ed9b939582bf3 Mon Sep 17 00:00:00 2001 From: didimmova Date: Tue, 14 Apr 2026 18:22:19 +0300 Subject: [PATCH 4/5] feat(button-group): update active states and z-indexes --- .../button-group/_button-group-theme.scss | 55 +++++++++++-------- 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss index f807015248c..dfeab6925fd 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss @@ -85,26 +85,25 @@ } } - &:hover { - z-index: 1; + &:hover, + &:active { color: var-get($theme, 'item-hover-text-color'); - background: var-get($theme, 'item-hover-background'); - border-color: var-get($theme, 'item-hover-border-color'); igx-icon { color: var-get($theme, 'item-hover-icon-color'); } } + &:hover { + z-index: 1; + background: var-get($theme, 'item-hover-background'); + border-color: var-get($theme, 'item-hover-border-color'); + } + &:active { z-index: 2; - color: var-get($theme, 'item-hover-text-color'); background: var-get($theme, 'item-active-background'); border-color: var-get($theme, 'item-active-border-color'); - - igx-icon { - color: var-get($theme, 'item-hover-icon-color'); - } } @if $variant == 'fluent' { @@ -162,9 +161,8 @@ box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color'); } - &:hover { - background: var-get($theme, 'item-focused-hover-background'); - border-color: var-get($theme, 'item-focused-hover-border-color'); + &:hover, + &:active { color: var-get($theme, 'item-focused-hover-text-color'); igx-icon { @@ -178,6 +176,11 @@ } } + &:hover { + background: var-get($theme, 'item-focused-hover-background'); + border-color: var-get($theme, 'item-focused-hover-border-color'); + } + &:active { background: var-get($theme, 'item-active-background'); border-color: var-get($theme, 'item-active-border-color'); @@ -207,6 +210,7 @@ } %igx-group-item-selected { + z-index: 2; color: var-get($theme, 'item-selected-text-color'); background: var-get($theme, 'item-selected-background'); border-color: var-get($theme, 'item-selected-border-color'); @@ -220,24 +224,23 @@ color: var-get($theme, 'item-selected-icon-color'); } - &:hover { - border-color: var-get($theme, 'item-selected-hover-border-color'); + &:hover, + &:active { color: var-get($theme, 'item-selected-hover-text-color'); - background: var-get($theme, 'item-selected-hover-background'); igx-icon { color: var-get($theme, 'item-selected-hover-icon-color'); } } + &:hover { + border-color: var-get($theme, 'item-selected-hover-border-color'); + background: var-get($theme, 'item-selected-hover-background'); + } + &:active { border-color: var-get($theme, 'item-selected-active-border-color'); - color: var-get($theme, 'item-selected-hover-text-color'); background: var-get($theme, 'item-selected-active-background'); - - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } } &[igxButton].igx-button--focused { @@ -266,10 +269,9 @@ box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color'); } - &:hover { - background: var-get($theme, 'item-selected-focus-hover-background'); + &:hover, + &:active { color: var-get($theme, 'item-selected-hover-text-color'); - border-color: var-get($theme, 'item-selected-border-color'); igx-icon { color: var-get($theme, 'item-selected-hover-icon-color'); @@ -280,9 +282,14 @@ } } + &:hover { + background: var-get($theme, 'item-selected-focus-hover-background'); + border-color: var-get($theme, 'item-selected-border-color'); + } + &:active { - background: var-get($theme, 'item-selected-active-background'); border-color: var-get($theme, 'item-selected-active-border-color'); + background: var-get($theme, 'item-selected-active-background'); } } From d3d94849c540a2591319c0fc05523d919560c52a Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 16 Apr 2026 11:12:19 +0300 Subject: [PATCH 5/5] chore(deps): bump theming version --- package-lock.json | 64 ++++++++++++++++++++++++-- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- 3 files changed, 61 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 95f69ce683b..b6008d830d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "express": "^5.2.1", "fflate": "^0.8.1", "igniteui-i18n-core": "^1.0.2", - "igniteui-theming": "^25.0.3", + "igniteui-theming": "^25.2.0", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", @@ -3814,6 +3814,7 @@ "version": "1.26.0", "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.26.0.tgz", "integrity": "sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg==", + "dev": true, "license": "MIT", "dependencies": { "@hono/node-server": "^1.19.9", @@ -3854,6 +3855,7 @@ "version": "3.0.7", "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz", "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==", + "dev": true, "license": "MIT", "dependencies": { "eventsource-parser": "^3.0.1" @@ -14053,12 +14055,12 @@ } }, "node_modules/igniteui-theming": { - "version": "25.0.3", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.0.3.tgz", - "integrity": "sha512-Lq6NusLS6zOjL1E/5942+UNrvf4goeQlVb9XcCSzk7rMyA9Q6ybf9ltLHAag8O/vsIjMsr9FxJaJV3mTYErXzg==", + "version": "25.2.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.2.0.tgz", + "integrity": "sha512-bXRN379/vL05cDQl12jLABXALo+cXdD9zeYTlwURoEq1GrCkriYQnSqgwWmD/UdN/9Jc2MaMbsuXuYRZq5F71w==", "license": "MIT", "dependencies": { - "@modelcontextprotocol/sdk": "^1.25.0", + "@modelcontextprotocol/sdk": "^1.28.0", "sass-embedded": "~1.92.1", "zod": "^3.25.76" }, @@ -14066,6 +14068,46 @@ "igniteui-theming-mcp": "dist/mcp/index.js" } }, + "node_modules/igniteui-theming/node_modules/@modelcontextprotocol/sdk": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.29.0.tgz", + "integrity": "sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ==", + "license": "MIT", + "dependencies": { + "@hono/node-server": "^1.19.9", + "ajv": "^8.17.1", + "ajv-formats": "^3.0.1", + "content-type": "^1.0.5", + "cors": "^2.8.5", + "cross-spawn": "^7.0.5", + "eventsource": "^3.0.2", + "eventsource-parser": "^3.0.0", + "express": "^5.2.1", + "express-rate-limit": "^8.2.1", + "hono": "^4.11.4", + "jose": "^6.1.3", + "json-schema-typed": "^8.0.2", + "pkce-challenge": "^5.0.0", + "raw-body": "^3.0.0", + "zod": "^3.25 || ^4.0", + "zod-to-json-schema": "^3.25.1" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@cfworker/json-schema": "^4.1.1", + "zod": "^3.25 || ^4.0" + }, + "peerDependenciesMeta": { + "@cfworker/json-schema": { + "optional": true + }, + "zod": { + "optional": false + } + } + }, "node_modules/igniteui-theming/node_modules/chokidar": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", @@ -14082,6 +14124,18 @@ "url": "https://paulmillr.com/funding/" } }, + "node_modules/igniteui-theming/node_modules/eventsource": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz", + "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==", + "license": "MIT", + "dependencies": { + "eventsource-parser": "^3.0.1" + }, + "engines": { + "node": ">=18.0.0" + } + }, "node_modules/igniteui-theming/node_modules/readdirp": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", diff --git a/package.json b/package.json index ea5b4c84fe6..0fb8e27299a 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "express": "^5.2.1", "fflate": "^0.8.1", "igniteui-i18n-core": "^1.0.2", - "igniteui-theming": "^25.0.3", + "igniteui-theming": "^25.2.0", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index c6cb25e48fe..14bc9be87cb 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -75,7 +75,7 @@ "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", - "igniteui-theming": "^25.0.0", + "igniteui-theming": "^25.2.0", "igniteui-i18n-core": "^1.0.2", "@igniteui/material-icons-extended": "^3.1.0" },