Merge branch 'master' of https://github.com/IgniteUI/igniteui-webcomponents into dmdimitrov/chat-ai-component

Author: teodosiah

package-lock.json

@@ -52,7 +52,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.0",
+    "@floating-ui/dom": "^1.7.2",
     "@lit-labs/virtualizer": "^2.1.0",
     "@lit/context": "^1.1.5",
     "lit": "^3.3.0"
@@ -62,10 +62,10 @@
     "@custom-elements-manifest/analyzer": "^0.10.4",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^9.0.13",
-    "@storybook/addon-docs": "^9.0.13",
-    "@storybook/addon-links": "^9.0.13",
-    "@storybook/web-components-vite": "^9.0.13",
+    "@storybook/addon-a11y": "^9.0.15",
+    "@storybook/addon-docs": "^9.0.15",
+    "@storybook/addon-links": "^9.0.15",
+    "@storybook/web-components-vite": "^9.0.15",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/test-runner": "^0.20.2",
@@ -85,13 +85,13 @@
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
-    "playwright": "^1.53.1",
+    "playwright": "^1.53.2",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
     "sass-embedded": "~1.78.0",
     "sinon": "^21.0.0",
-    "storybook": "^9.0.13",
+    "storybook": "^9.0.15",
     "stylelint": "^16.21.0",
     "stylelint-config-standard-scss": "^15.0.1",
     "stylelint-prettier": "^5.0.3",
@@ -101,7 +101,7 @@
     "typedoc": "~0.27.9",
     "typedoc-plugin-localization": "^3.0.6",
     "typescript": "^5.8.3",
-    "vite": "^6.3.5"
+    "vite": "^7.0.0"
   },
   "peerDependencies": {
     "@supabase/supabase-js": "^2.49.4",

package.json

@@ -15,24 +15,29 @@ $material: map.merge($material, (
     content-background: map.get(calendar-theme.$material, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$material, 'actions-divider-color'),
 ));
+$material-calendar-border-color: map.get(calendar-theme.$material, 'border-color');
 $bootstrap: map.merge($bootstrap, (
     default-size: map.get(calendar-theme.$bootstrap, 'default-size'),
     border-radius: map.get(calendar-theme.$bootstrap, 'border-radius'),
     border-color: map.get(calendar-theme.$bootstrap, 'border-color'),
     content-background: map.get(calendar-theme.$bootstrap, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$bootstrap, 'actions-divider-color'),
 ));
+$bootstrap-calendar-border-color: map.get(calendar-theme.$bootstrap, 'border-color');
 $fluent: map.merge($fluent, (
     default-size: map.get(calendar-theme.$fluent, 'default-size'),
     border-radius: map.get(calendar-theme.$fluent, 'border-radius'),
     border-color: map.get(calendar-theme.$fluent, 'border-color'),
     content-background: map.get(calendar-theme.$fluent, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$fluent, 'actions-divider-color'),
 ));
+$fluent-calendar-border-color: map.get(calendar-theme.$fluent, 'border-color');
 $indigo: map.merge($indigo, (
     default-size: map.get(calendar-theme.$indigo, 'default-size'),
     border-radius: map.get(calendar-theme.$indigo, 'border-radius'),
     border-color: map.get(calendar-theme.$indigo, 'border-color'),
     content-background: map.get(calendar-theme.$indigo, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$indigo, 'actions-divider-color'),
 ));
+$indigo-calendar-border-color: map.get(calendar-theme.$indigo, 'border-color');
+

src/components/date-range-picker/themes/dark/_themes.scss

@@ -4,4 +4,6 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $bootstrap), 'ig-daterangepicker');
+
+    --calendar-border-color: #{$bootstrap-calendar-border-color};
 }

src/components/date-range-picker/themes/dark/date-range-picker.bootstrap.scss

@@ -4,4 +4,6 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $fluent), 'ig-daterangepicker');
+
+    --calendar-border-color: #{$fluent-calendar-border-color};
 }

src/components/date-range-picker/themes/dark/date-range-picker.fluent.scss

@@ -4,4 +4,10 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $indigo), 'ig-daterangepicker');
+
+    --calendar-border-color: #{$indigo-calendar-border-color};
+
+    igc-dialog[open]::part(base) {
+        box-shadow: var(--ig-elevation-7);
+    }
 }

src/components/date-range-picker/themes/dark/date-range-picker.indigo.scss

@@ -4,4 +4,6 @@
 
 :host {
     @include css-vars-from-theme(diff(light.$base, $material), 'ig-daterangepicker');
+
+    --calendar-border-color: #{$material-calendar-border-color};
 }

src/components/date-range-picker/themes/dark/date-range-picker.material.scss

@@ -16,24 +16,28 @@ $material: map.merge($material, (
     content-background: map.get(calendar-theme.$material, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$material, 'actions-divider-color'),
 ));
+$material-calendar-border-color: map.get(calendar-theme.$material, 'border-color');
 $bootstrap: map.merge($bootstrap, (
     default-size: map.get(calendar-theme.$bootstrap, 'default-size'),
     border-radius: map.get(calendar-theme.$bootstrap, 'border-radius'),
     border-color: map.get(calendar-theme.$bootstrap, 'border-color'),
     content-background: map.get(calendar-theme.$bootstrap, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$bootstrap, 'actions-divider-color'),
 ));
+$bootstrap-calendar-border-color: map.get(calendar-theme.$bootstrap, 'border-color');
 $fluent: map.merge($fluent, (
     default-size: map.get(calendar-theme.$fluent, 'default-size'),
     border-radius: map.get(calendar-theme.$fluent, 'border-radius'),
     border-color: map.get(calendar-theme.$fluent, 'border-color'),
     content-background: map.get(calendar-theme.$fluent, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$fluent, 'actions-divider-color'),
 ));
+$fluent-calendar-border-color: map.get(calendar-theme.$fluent, 'border-color');
 $indigo: map.merge($indigo, (
     default-size: map.get(calendar-theme.$indigo, 'default-size'),
     border-radius: map.get(calendar-theme.$indigo, 'border-radius'),
     border-color: map.get(calendar-theme.$indigo, 'border-color'),
     content-background: map.get(calendar-theme.$indigo, 'content-background'),
     actions-divider-color: map.get(calendar-theme.$indigo, 'actions-divider-color')
 ));
+$indigo-calendar-border-color: map.get(calendar-theme.$indigo, 'border-color');

src/components/date-range-picker/themes/light/_themes.scss

@@ -4,20 +4,14 @@
 $theme: $bootstrap;
 
 :host {
+    --calendar-border-color: #{$bootstrap-calendar-border-color};
+
     igc-dialog {
         igc-calendar {
             border: none;
         }
     }
 
-    igc-dialog::part(base) {
-        border: rem(1px) solid var-get($theme, 'border-color');
-    }
-
-    igc-focus-trap {
-        box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
-    }
-
     ::part(helper-text) {
         @include type-style('body-2');
 

src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss

@@ -5,6 +5,7 @@ $theme: $material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+    --calendar-border-color: #{$material-calendar-border-color};
 
     igc-dialog {
         box-shadow: none;
@@ -21,6 +22,7 @@ $theme: $material;
 
     igc-dialog[open]::part(base) {
         box-shadow: var(--ig-elevation-24);
+        border: rem(1px) solid var(--calendar-border-color);
     }
 
     igc-dialog::part(content) {
@@ -40,6 +42,7 @@ $theme: $material;
 
         border-radius: var-get($theme, 'border-radius');
         background: var-get($theme, 'content-background');
+        box-shadow: 0 0 0 rem(1px) var(--calendar-border-color);
     }
 
     igc-popover::part(container) {