@vaadin/vaadin-lumo-styles 25.0.0-beta4 → 25.0.0-beta5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "25.0.0-beta4",
+  "version": "25.0.0-beta5",
   "publishConfig": {
     "access": "public"
   },
@@ -44,9 +44,9 @@
     "web-component"
   ],
   "dependencies": {
-    "@vaadin/component-base": "25.0.0-beta4",
-    "@vaadin/icon": "25.0.0-beta4",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-beta4"
+    "@vaadin/component-base": "25.0.0-beta5",
+    "@vaadin/icon": "25.0.0-beta5",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta5"
   },
   "devDependencies": {
     "cssnano": "^7.1.1",
@@ -60,5 +60,5 @@
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1"
   },
-  "gitHead": "707c30af7ed0afacc13c0afb27d047b043160d1f"
+  "gitHead": "ba59e1404cc4bef2dd685476247f758eb28c9922"
 }

package/src/components/avatar-group.css

@@ -5,40 +5,20 @@
  */
 @media lumo_components_avatar-group {
   :host {
-    display: block;
-    width: 100%; /* prevent collapsing inside non-stretching column flex */
     --vaadin-avatar-size: var(--lumo-size-m);
     --vaadin-avatar-group-overlap: 8px;
     /* Deprecated property name (overlap-border), for backwards compatibility */
     --vaadin-avatar-group-overlap-border: var(--vaadin-avatar-group-gap, 2px);
   }
 
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  [part='container'] {
-    display: flex;
-    position: relative;
-    width: 100%;
-    flex-wrap: nowrap;
-  }
-
-  ::slotted(vaadin-avatar:not(:first-of-type)) {
-    mask-image: url('data:image/svg+xml;utf8,<svg viewBox=%220 0 300 300%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22><path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M300 0H0V300H300V0ZM150 200C177.614 200 200 177.614 200 150C200 122.386 177.614 100 150 100C122.386 100 100 122.386 100 150C100 177.614 122.386 200 150 200Z%22 fill=%22black%22/></svg>');
+  ::slotted(vaadin-avatar) {
+    --_gap: var(--vaadin-avatar-group-overlap-border);
+    --_outline-width: var(--vaadin-avatar-outline-width);
     mask-size: calc(300% + var(--vaadin-avatar-group-overlap-border) * 6 - var(--vaadin-avatar-outline-width) * 6);
   }
 
-  ::slotted(vaadin-avatar:not([dir='rtl']):not(:first-of-type)) {
-    margin-left: calc(var(--vaadin-avatar-group-overlap) * -1 - var(--vaadin-avatar-outline-width));
-    mask-position: calc(50% - var(--vaadin-avatar-size) + var(--vaadin-avatar-group-overlap));
-  }
-
-  ::slotted(vaadin-avatar[dir='rtl']:not(:first-of-type)) {
-    margin-right: calc(var(--vaadin-avatar-group-overlap) * -1);
-    mask-position: calc(
-      50% + var(--vaadin-avatar-size) - var(--vaadin-avatar-group-overlap) + var(--vaadin-avatar-outline-width)
-    );
+  ::slotted(vaadin-avatar:not(:first-of-type)) {
+    margin-inline-start: calc(var(--_overlap) * -1 - var(--vaadin-avatar-outline-width));
   }
 
   :host([theme~='xlarge']) {

package/src/components/avatar.css

@@ -8,8 +8,8 @@
     --vaadin-avatar-outline-width: var(--vaadin-focus-ring-width, 2px);
     border: var(--vaadin-avatar-outline-width) solid transparent;
     margin: calc(var(--vaadin-avatar-outline-width) * -1);
-    color: var(--lumo-secondary-text-color);
-    background-color: var(--lumo-contrast-10pct);
+    color: var(--vaadin-avatar-text-color, var(--lumo-secondary-text-color));
+    background-color: var(--vaadin-avatar-background, var(--lumo-contrast-10pct));
     outline: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -43,7 +43,7 @@
   }
 
   :host([has-color-index])::before {
-    border: none;
+    outline: none;
     box-shadow: inset 0 0 0 2px var(--vaadin-avatar-user-color);
   }