@material/list - npm Package Compare versions

Comparing version 0.26.0 to 0.27.0

package.json

 {
   "name": "@material/list",
   "description": "The Material Components for the web list component",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "license": "Apache-2.0",
@@ -18,5 +18,5 @@ "keywords": [
     "@material/typography": "^0.3.0",
-    "@material/ripple": "^0.26.0",
-    "@material/theme": "^0.25.0"
+    "@material/ripple": "^0.27.0",
+    "@material/theme": "^0.27.0"
   }
 }

README.md

@@ -102,3 +102,3 @@ <!--docs:
       Two-line item
-      <span class="mdc-list-item__text__secondary">Secondary text</span>
+      <span class="mdc-list-item__secondary-text">Secondary text</span>
     </span>
@@ -365,3 +365,3 @@ </li>
       Ali Connors
-      <span class="mdc-list-item__text__secondary">Lunch this afternoon? I was...</span>
+      <span class="mdc-list-item__secondary-text">Lunch this afternoon? I was...</span>
     </span>
@@ -389,1 +389,52 @@
 ```
+
+### CSS Classes
+
+#### Blocks
+
+CSS Class | Description
+--- | ---
+`mdc-list` | A container for rows (`mdc-list-item`s)
+`mdc-list-group` | Wraps one or more `mdc-list` and/or `mdc-list-divider` elements
+`mdc-list-item` | An individual row in an `mdc-list`
+`mdc-list-divider` | Separates two rows or two lists using a horizontal bar
+
+#### Modifiers
+
+CSS Class | Description
+--- | ---
+`mdc-list--dense` | Increases the density of the list, making it appear more compact
+`mdc-list--avatar-list` | Configures the leading tiles of each row to display images instead of icons
+`mdc-list--two-line` | Increases the height of the row to give it greater visual separation from adjacent rows
+`mdc-list-item--selected` | Styles the row in a selected\* state
+`mdc-list-item--activated` | Styles the row in an activated\* state
+`mdc-list-divider--inset` | Increases the leading margin of the divider so that it does not intersect the avatar column
+
+\* **Note**: the difference between _selected_ and _activated_ states:
+
+- _Selected_ is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.
+  Multiple items in a list can be _selected_ at the same time.
+- _Activated_ is more permanent within the page's lifetime. E.g., the currently highlighted destination in a nav drawer.
+  Only one item in a list can be _activated_ at a time.
+
+#### Elements
+
+CSS Class | Description
+--- | ---
+`mdc-list-item__start-detail` | The leading tile in the row (in LTR languages, the left-most)
+`mdc-list-item__end-detail` | The trailing tile in the row (in LTR languages, the right-most)
+`mdc-list-item__text` | Primary text for the row (displayed as the middle tile)
+`mdc-list-item__secondary-text` | Secondary text for the row (displayed in the middle tile)
+`mdc-list-group__subheader` | Heading text displayed above each list in a group
+
+### Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-list-item-primary-text-ink-color($color)` | Sets the ink color of the primary text
+`mdc-list-item-secondary-text-ink-color($color)` | Sets the ink color of the secondary text
+`mdc-list-item-graphic-fill-color($color)` | Sets the fill color of the graphic (`__start-detail`)
+`mdc-list-item-graphic-ink-color($color)` | Sets the ink color of the graphic (`__start-detail`)
+`mdc-list-item-meta-ink-color($color)` | Sets the ink color of the meta data (`__end-detail`)
+`mdc-list-divider-color($color)` | Sets the color of the divider
+`mdc-list-group-subheader-ink-color($color)` | Sets the ink color of the list group subheader

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60679

increased by23.73%

Number of package files

7

increased by40%

Lines of code

690

increased by38%

Number of lines in readme file

438

increased by13.18%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@material/ripple@0.27.0(transitive)

• + Added@material/theme@0.27.0(transitive)

• - Removed@material/ripple@0.26.0(transitive)

• - Removed@material/theme@0.25.0(transitive)

• Updated@material/ripple@^0.27.0

• Updated@material/theme@^0.27.0