svelte-multiselect - npm Package Compare versions

Comparing version 1.1.7 to 1.1.8

package.json

 {
   "name": "svelte-multiselect",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "Svelte multi-select component",
@@ -32,2 +32,2 @@ "keywords": [
   }
-}
+}

README.md

@@ -86,6 +86,8 @@ <div class="maybe-hide">
 
-### CSS variable props
+There are 3 ways to style this component.
 
-There are 3 ways to style this component. The first, if you only want to make small adjustments, allows you to pass the following CSS variables directly to the component as props.
+### With CSS variables
 
+The first, if you only want to make small adjustments, allows you to pass the following CSS variables directly to the component as props.
+
 - `border: var(--sms-border, 1pt solid lightgray)`: Border around top-level `div.multiselect`. Change this to e.g. to `1px solid red` to indicate this form field is in an invalid state.
@@ -109,5 +111,5 @@ - `border-radius: var(--sms-border-radius, 5pt)`: `div.multiselect` border radius.
 
-### CSS Frameworks
+### With CSS frameworks
 
-The second method allows you to pass in custom class names to the important DOM elements of this component for use with CSS frameworks like [Tailwind CSS](https://tailwindcss.com).
+The second method allows you to pass in custom classes to the important DOM elements of this component to target them with frameworks like [Tailwind CSS](https://tailwindcss.com).
 
@@ -120,13 +122,13 @@ - `outerDivClass`
 
-A simplified version of the DOM structure of this component showing where these classes are inserted is as follows:
+This simplified version of the DOM structure of this component shows where these classes are inserted:
 
-```html
-<div class="outerDivClass">
-  <ul class="ulTokensClass">
-    <li class="liTokenClass">First selected tag</li>
-    <li class="liTokenClass">Second selected tag</li>
+```svelte
+<div class={outerDivClass}>
+  <ul class={ulTokensClass}>
+    <li class={liTokenClass}>First selected tag</li>
+    <li class={liTokenClass}>Second selected tag</li>
   </ul>
-  <ul class="ulOptionsClass">
-    <li class="liOptionClass">First available option</li>
-    <li class="liOptionClass">Second available option</li>
+  <ul class={ulOptionsClass}>
+    <li class={liOptionClass}>First available option</li>
+    <li class={liOptionClass}>Second available option</li>
   </ul>
@@ -136,5 +138,5 @@ </div>
 
-### Granular Control through global CSS
+### Granular control through global CSS
 
-You can alternatively style every part of this component with more fine-grained control by using the following `global` CSS selectors. Overriding properties that the component already sets internally requires the `!important` keyword.
+You can alternatively style every part of this component with more fine-grained control by using the following `:global()` CSS selectors. **Note**: Overriding properties that the component already sets internally requires the `!important` keyword.
 
@@ -141,0 +143,0 @@ ```css

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

Improved metrics

Total package byte prevSize

19800

increased by2.75%

Number of lines in readme file

173

increased by1.17%

No dependency changes