@dscout/particle 1.0.0-alpha.51 → 1.0.0-alpha.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dscout/particle",
-  "version": "1.0.0-alpha.51",
+  "version": "1.0.0-alpha.53",
   "description": "A pattern library for building dscout user interfaces",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
@@ -65,7 +65,6 @@
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.0.0",
     "@types/chai-dom": "^0.0.13",
-    "@types/lodash": "^4.14.181",
     "@types/react": "18.3.18",
     "@types/react-dom": "^18.0.0",
     "@types/react-router": "^3.0.28",
@@ -88,7 +87,6 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "husky": "^1.3.1",
     "lint-staged": "^8.0.1",
-    "lodash": "^4.17.21",
     "playwright": "^1.53.1",
     "postcss": "^8.4.8",
     "postcss-cli": "^9.1.0",
@@ -104,21 +102,14 @@
     "vite": "^5.4.8",
     "vitest": "^3.2.3"
   },
+  "dependencies": {
+    "@floating-ui/dom": "1.4.2"
+  },
   "peerDependencies": {
-    "@floating-ui/dom": "1.4.2",
-    "lodash": "^4.17.21",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
-  "peerDependenciesMeta": {
-    "lodash": {
-      "optional": true
-    },
-    "@floating-ui/dom": {
-      "optional": true
-    }
-  },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"

package/styles/_base.scss

@@ -22,29 +22,29 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-h1:where(:not(.particle-exclude *)),
-h2:where(:not(.particle-exclude *)),
-h3:where(:not(.particle-exclude *)),
-h4:where(:not(.particle-exclude *)),
-h5:where(:not(.particle-exclude *)),
-h6:where(:not(.particle-exclude *)),
-p:where(:not(.particle-exclude *)) {
+h1:where(:not(.particle-exclude, .particle-exclude *)),
+h2:where(:not(.particle-exclude, .particle-exclude *)),
+h3:where(:not(.particle-exclude, .particle-exclude *)),
+h4:where(:not(.particle-exclude, .particle-exclude *)),
+h5:where(:not(.particle-exclude, .particle-exclude *)),
+h6:where(:not(.particle-exclude, .particle-exclude *)),
+p:where(:not(.particle-exclude, .particle-exclude *)) {
   font-size: var(--font-size--base);
   font-weight: normal;
   margin-bottom: 1em;
 }
 
-i:where(:not(.particle-exclude *)), em:where(:not(.particle-exclude *)) { font-style: italic; }
-b:where(:not(.particle-exclude *)), strong:where(:not(.particle-exclude *)) { font-weight: var(--font-weight--bold); }
-s:where(:not(.particle-exclude *)), strike:where(:not(.particle-exclude *)) { text-decoration: line-through; }
-u:where(:not(.particle-exclude *)) {
+i:where(:not(.particle-exclude, .particle-exclude *)), em:where(:not(.particle-exclude, .particle-exclude *)) { font-style: italic; }
+b:where(:not(.particle-exclude, .particle-exclude *)), strong:where(:not(.particle-exclude, .particle-exclude *)) { font-weight: var(--font-weight--bold); }
+s:where(:not(.particle-exclude, .particle-exclude *)), strike:where(:not(.particle-exclude, .particle-exclude *)) { text-decoration: line-through; }
+u:where(:not(.particle-exclude, .particle-exclude *)) {
   text-decoration: underline;
   text-decoration-skip: objects;
 }
-small:where(:not(.particle-exclude *)) { font-size: var(--font-size--s); }
-mark:where(:not(.particle-exclude *)) { background-color: var(--color--marker); }
+small:where(:not(.particle-exclude, .particle-exclude *)) { font-size: var(--font-size--s); }
+mark:where(:not(.particle-exclude, .particle-exclude *)) { background-color: var(--color--marker); }
 
-hr:where(:not(.particle-exclude *)) {
+hr:where(:not(.particle-exclude, .particle-exclude *)) {
   border-style: solid;
   border-width: 0;
   border-top-width: 1px;
@@ -53,15 +53,15 @@ hr:where(:not(.particle-exclude *)) {
   margin-top: 2em;
 }
 
-label:where(:not(.particle-exclude *)) {
+label:where(:not(.particle-exclude, .particle-exclude *)) {
   display: inline-block;
 }
 
-pre:where(:not(.particle-exclude *)) {
+pre:where(:not(.particle-exclude, .particle-exclude *)) {
   display: block;
   white-space: pre-wrap;
 }
-code:where(:not(.particle-exclude *)) {
+code:where(:not(.particle-exclude, .particle-exclude *)) {
   background-color: rgba(var(--color--main-rgb), .05);
   border: 1px solid transparent;
   border-radius:  var(--radius--small);
@@ -70,7 +70,7 @@ code:where(:not(.particle-exclude *)) {
   padding: 0.2em 0.3em 0.1em;
   white-space: inherit;
 }
-pre:where(:not(.particle-exclude *)) code:where(:not(.particle-exclude *)) {
+pre:where(:not(.particle-exclude, .particle-exclude *)) code:where(:not(.particle-exclude, .particle-exclude *)) {
   display: block;
   padding: .75em;
 }

package/styles/_reset.scss

@@ -9,39 +9,39 @@
   box-sizing: border-box;
 }
 
-div:where(:not(.particle-exclude *)),
-article:where(:not(.particle-exclude *)),
-section:where(:not(.particle-exclude *)),
-main:where(:not(.particle-exclude *)),
-footer:where(:not(.particle-exclude *)),
-header:where(:not(.particle-exclude *)),
-form:where(:not(.particle-exclude *)),
-fieldset:where(:not(.particle-exclude *)),
-pre:where(:not(.particle-exclude *)),
-code:where(:not(.particle-exclude *)),
-p:where(:not(.particle-exclude *)),
-ul:where(:not(.particle-exclude *)),
-ol:where(:not(.particle-exclude *)),
-li:where(:not(.particle-exclude *)),
-dl:where(:not(.particle-exclude *)),
-dt:where(:not(.particle-exclude *)),
-dd:where(:not(.particle-exclude *)),
-textarea:where(:not(.particle-exclude *)),
-input:where(:not(.particle-exclude *)),
-label:where(:not(.particle-exclude *)),
-select:where(:not(.particle-exclude *)) {
+div:where(:not(.particle-exclude, .particle-exclude *)),
+article:where(:not(.particle-exclude, .particle-exclude *)),
+section:where(:not(.particle-exclude, .particle-exclude *)),
+main:where(:not(.particle-exclude, .particle-exclude *)),
+footer:where(:not(.particle-exclude, .particle-exclude *)),
+header:where(:not(.particle-exclude, .particle-exclude *)),
+form:where(:not(.particle-exclude, .particle-exclude *)),
+fieldset:where(:not(.particle-exclude, .particle-exclude *)),
+pre:where(:not(.particle-exclude, .particle-exclude *)),
+code:where(:not(.particle-exclude, .particle-exclude *)),
+p:where(:not(.particle-exclude, .particle-exclude *)),
+ul:where(:not(.particle-exclude, .particle-exclude *)),
+ol:where(:not(.particle-exclude, .particle-exclude *)),
+li:where(:not(.particle-exclude, .particle-exclude *)),
+dl:where(:not(.particle-exclude, .particle-exclude *)),
+dt:where(:not(.particle-exclude, .particle-exclude *)),
+dd:where(:not(.particle-exclude, .particle-exclude *)),
+textarea:where(:not(.particle-exclude, .particle-exclude *)),
+input:where(:not(.particle-exclude, .particle-exclude *)),
+label:where(:not(.particle-exclude, .particle-exclude *)),
+select:where(:not(.particle-exclude, .particle-exclude *)) {
   margin: 0 0 0.75em;
 }
 
-*:where(:not(.particle-exclude *)):first-child {
+*:where(:not(.particle-exclude, .particle-exclude *)):first-child {
   margin-top: 0;
 }
 
-*:where(:not(.particle-exclude *)):last-child {
+*:where(:not(.particle-exclude, .particle-exclude *)):last-child {
   margin-bottom: 0;
 }
 
-button:where(:not(.particle-exclude *)) {
+button:where(:not(.particle-exclude, .particle-exclude *)) {
   background-color: inherit;
   border: inherit;
   color: inherit;
@@ -51,21 +51,21 @@ button:where(:not(.particle-exclude *)) {
   padding: 0;
 }
 
-legend:where(:not(.particle-exclude *)) {
+legend:where(:not(.particle-exclude, .particle-exclude *)) {
   padding: 0;
 }
 
-fieldset:where(:not(.particle-exclude *)) {
+fieldset:where(:not(.particle-exclude, .particle-exclude *)) {
   border: none;
   padding: 0;
 }
 
-a:where(:not(.particle-exclude *)) {
+a:where(:not(.particle-exclude, .particle-exclude *)) {
   color: inherit;
   text-decoration: inherit;
 }
 
-*:where(:not(.particle-exclude *)):focus-visible {
+*:where(:not(.particle-exclude, .particle-exclude *)):focus-visible {
   outline: var(--focus--color) var(--focus--style) var(--focus--width);
   outline-offset: var(--focus--offset);
 }

package/styles/utilities/_alignment.scss

@@ -6,7 +6,7 @@
 
 /*=== Flex ===*/
 
-.flex:where(:not(.particle-exclude *)) {
+.flex:where(:not(.particle-exclude, .particle-exclude *)) {
   align-items: center;
   display: flex;
 
@@ -16,7 +16,7 @@
   }
 }
 
-.inline-flex:where(:not(.particle-exclude *)) {
+.inline-flex:where(:not(.particle-exclude, .particle-exclude *)) {
   align-items: center;
   display: inline-flex;
 
@@ -65,7 +65,7 @@
 .justify--end { justify-content: flex-end; }
 .justify--stretch { justify-content: stretch; }
 
-.wrap:where(:not(.particle-exclude *)) { flex-wrap: wrap; }
+.wrap:where(:not(.particle-exclude, .particle-exclude *)) { flex-wrap: wrap; }
 .wrap--reverse { flex-wrap: wrap-reverse; }
 
 

package/styles/utilities/_borders.scss

@@ -1,4 +1,4 @@
-.border:where(:not(.particle-exclude *)) { border-style: solid; border-width: 1px; }
+.border:where(:not(.particle-exclude, .particle-exclude *)) { border-style: solid; border-width: 1px; }
 .border--t { border-top-style: solid; border-top-width: 1px; }
 .border--r { border-right-style: solid; border-right-width: 1px; }
 .border--b { border-bottom-style: solid; border-bottom-width: 1px; }

package/styles/utilities/_typography.scss

@@ -90,7 +90,7 @@
 }
 
 /*=== Simple Truncate ===*/
-.truncate:where(:not(.particle-exclude *)) {
+.truncate:where(:not(.particle-exclude, .particle-exclude *)) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/styles/utilities/_visibility.scss

@@ -22,8 +22,8 @@ the `visually-hidden` class, also available with the alias `.sr-only`.
 .visibility--hidden { visibility: hidden; }
 .visibility--visible { visibility: visible; }
 
-.sr-only:where(:not(.particle-exclude *)),
-.visually-hidden:where(:not(.particle-exclude *)) {
+.sr-only:where(:not(.particle-exclude, .particle-exclude *)),
+.visually-hidden:where(:not(.particle-exclude, .particle-exclude *)) {
   border: 0;
   clip: rect(0,0,0,0);
   height: 1px;