Merge branch 'master' into igniteui-webcomponents-1441

Author: simeonoff

package-lock.json

@@ -64,13 +64,13 @@
     "@custom-elements-manifest/analyzer": "^0.10.3",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^8.4.4",
-    "@storybook/addon-actions": "^8.4.4",
-    "@storybook/addon-essentials": "^8.4.4",
-    "@storybook/addon-links": "^8.4.4",
-    "@storybook/web-components": "^8.4.4",
-    "@storybook/web-components-vite": "^8.4.4",
-    "@types/mocha": "^10.0.9",
+    "@storybook/addon-a11y": "^8.4.5",
+    "@storybook/addon-actions": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/web-components": "^8.4.5",
+    "@storybook/web-components-vite": "^8.4.5",
+    "@types/mocha": "^10.0.10",
     "@web/test-runner": "^0.19.0",
     "@web/test-runner-playwright": "^0.11.0",
     "autoprefixer": "^10.4.20",
@@ -82,7 +82,7 @@
     "globby": "^14.0.2",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^5.0.4",
-    "igniteui-theming": "^14.2.0",
+    "igniteui-theming": "^14.3.0",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.10",
     "lit-analyzer": "^2.0.3",
@@ -95,11 +95,11 @@
     "sass": "^1.78.0",
     "sass-embedded": "^1.78.0",
     "sinon": "^19.0.2",
-    "storybook": "^8.4.4",
+    "storybook": "^8.4.5",
     "stylelint": "^16.10.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-prettier": "^5.0.2",
-    "stylelint-scss": "^6.9.0",
+    "stylelint-scss": "^6.10.0",
     "ts-lit-plugin": "^2.0.2",
     "tslib": "^2.8.1",
     "typedoc": "^0.26.11",

package.json

@@ -16,6 +16,9 @@ $mark-length: 24;
 [part~='control'] {
     --size: #{rem(20px)};
 
+    width: var(--size);
+    height: var(--size);
+    min-width: var(--size);
     position: relative;
     display: inline-flex;
     user-select: none;
@@ -45,22 +48,25 @@ $mark-length: 24;
 }
 
 [part~='indicator'] {
+    --indicator-size: #{rem(18px)};
+
     display: flex;
+    align-items: center;
+    justify-content: center;
     position: absolute;
     inset: 0;
     stroke-linecap: square;
-    stroke-width: 3;
+    stroke-width: var(--mark-stroke, 3);
     stroke-dasharray: $mark-length;
     stroke-dashoffset: $mark-length;
     fill: none;
     opacity: 0;
     z-index: 1;
-    transform: scale(.45);
     transform-origin: center;
 
     svg {
-        width: 100%;
-        height: 100%;
+        width: var(--indicator-size);
+        height: var(--indicator-size);
     }
 }
 
@@ -82,6 +88,11 @@ label {
         stroke-dashoffset: 41;
         opacity: 1;
         transform: rotate(45deg) scale(.45) translateX(-.25rem);
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
     }
 }
 

src/components/checkbox/themes/checkbox.base.scss

@@ -19,18 +19,15 @@ $theme: $bootstrap;
 }
 
 [part~='indicator'] {
-    stroke-width: 3;
-    transform: scale(.7);
+    --indicator-size: #{rem(11px)};
+
     transition: none;
 }
 
 [part~='control'] {
     --size: #{rem(16px)};
 
     border-radius: var-get($theme, 'border-radius-ripple');
-    width: var(--size);
-    height: var(--size);
-    min-width: var(--size);
     transition: all .15s ease-in-out;
     background: var-get($theme, 'empty-fill-color');
 
@@ -92,8 +89,6 @@ $theme: $bootstrap;
     }
 
     [part~='indicator'] {
-        stroke-dashoffset: 41;
-        opacity: 1;
         transform: rotate(45deg) translateX(-.075rem) scale(.7);
     }
 }

src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss

@@ -19,10 +19,6 @@ $disabled-color: var-get($theme, 'disabled-color');
 }
 
 [part~='control'] {
-    width: var(--size, rem(20px));
-    height: var(--size, rem(20px));
-    min-width: var(--size, rem(20px));
-
     // Removing visual artifacts, to understand the problem see
     // https://stackoverflow.com/questions/69658462/inset-box-shadow-visual-artifacts-in-google-chrome
     transform: translate3d(0, 0, 0);
@@ -42,8 +38,8 @@ $disabled-color: var-get($theme, 'disabled-color');
 }
 
 [part~='indicator'] {
-    stroke-width: 1.5;
-    transform: scale(.8);
+    --indicator-size: #{rem(16px)};
+    --mark-stroke: 1.5;
 }
 
 :host(:hover) {

src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss

@@ -25,9 +25,6 @@ $error-color-hover: var-get($theme, 'error-color-hover');
     --size: #{rem(16px)};
 
     border-radius: var-get($theme, 'border-radius-ripple');
-    width: var(--size, rem(16px));
-    height: var(--size, rem(16px));
-    min-width: var(--size, rem(16px));
 
     &::after {
         border-radius: var-get($theme, 'border-radius');
@@ -41,14 +38,15 @@ $error-color-hover: var-get($theme, 'error-color-hover');
 }
 
 [part~='indicator'] {
+    --indicator-size: #{rem(13px)};
+
     stroke: unset;
     stroke-linecap: unset;
     stroke-width: unset;
     stroke-dasharray: unset;
     stroke-dashoffset: unset;
     fill: var-get($theme, 'tick-color');
     transition: none;
-    transform: scale(.8);
 
     rect {
         fill: none;

src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss

@@ -16,16 +16,10 @@ $theme: $material;
     @include type-style('subtitle-1');
 }
 
-label {
-    gap: rem(2px);
-}
-
 [part~='control'] {
-    --size: #{rem(20px)};
-
-    width: calc(var(--size) * 2);
-    height: calc(var(--size) * 2);
-    min-width: calc(var(--size) * 2);
+    // We expose that css variable to override the padding of
+    // the checkbox control in components that we nest it in like List and Tree.
+    padding: var(--control-padding, rem(20px));
     transition: background .15s ease-in;
 
     &::after {
@@ -52,6 +46,8 @@ label {
 }
 
 [part~='base'] {
+    gap: rem(2px);
+
     &:hover {
         [part~='control'] {
             &::before {

src/components/checkbox/themes/shared/checkbox/checkbox.material.scss

@@ -15,6 +15,10 @@
 }
 
 ::slotted(*) {
+    // We're not able to target the control part of the checkbox
+    // that's why we exposed that css variable (https://github.com/w3c/csswg-drafts/issues/3896)
+    --control-padding: 0;
+
     margin: 0;
     font: inherit;
     opacity: inherit;
@@ -24,6 +28,12 @@
     flex-grow: 1;
 }
 
+[part='header'] {
+    display: flex;
+    flex-direction: column;
+    gap: rem(2px);
+}
+
 [part='start'],
 [part='end'] {
     display: flex;
@@ -37,5 +47,5 @@
 }
 
 [part='subtitle'] {
-    @include type-style('caption');
+    @include type-style('body-2');
 }

src/components/list/themes/item.base.scss

@@ -22,7 +22,7 @@ $theme: $material;
     }
 
     [part='title'] {
-        color: var-get($theme, 'item-text-color-hover');
+        color: var-get($theme, 'item-title-color-hover');
     }
 
     [part='subtitle'] {

src/components/list/themes/shared/item/list-item.common.scss

@@ -11,6 +11,7 @@ $theme: $fluent;
     border-bottom: none;
 }
 
-[part='title'] {
+[part='title'],
+[part='subtitle'] {
     @include type-style('caption');
 }