1.0.102

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "1.0.101",
+  "version": "1.0.102",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@designestate/dees-domtools",
-      "version": "1.0.101",
+      "version": "1.0.102",
       "license": "MIT",
       "dependencies": {
         "@apiglobal/typedrequest": "^1.0.65",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-domtools",
-  "version": "1.0.101",
+  "version": "1.0.102",
   "private": false,
   "description": "tools to simplify complex css structures",
   "main": "dist_ts/index.js",

ts/domtools.css.breakpoints.ts

@@ -11,10 +11,10 @@ export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
 
 export const cssForTablet = (cssArg: CSSResult) => {
   return unsafeCSS(`
-    @container wccToolsViewport (min-width: ${tablet}px) {
+    @container wccToolsViewport (max-width: ${tablet}px) {
       ${cssArg.cssText}
     }
-    @media (min-width: ${tablet}px) {
+    @media (max-width: ${tablet}px) {
       ${cssArg.cssText}
     }
   `);
@@ -22,10 +22,10 @@ export const cssForTablet = (cssArg: CSSResult) => {
 
 export const cssForPhablet = (cssArg: CSSResult) => {
   return unsafeCSS(`
-    @container wccToolsViewport (min-width: ${phablet}px) {
+    @container wccToolsViewport (max-width: ${phablet}px) {
       ${cssArg.cssText}
     }
-    @media (min-width: ${phablet}px) {
+    @media (max-width: ${phablet}px) {
       ${cssArg.cssText}
     }
   `);
@@ -33,10 +33,10 @@ export const cssForPhablet = (cssArg: CSSResult) => {
 
 export const cssForPhone = (cssArg: CSSResult) => {
   return unsafeCSS(`
-    @container wccToolsViewport (min-width: ${phone}px) {
+    @container wccToolsViewport (max-width: ${phone}px) {
       ${cssArg.cssText}
     }
-    @media (min-width: ${phone}px) {
+    @media (max-width: ${phone}px) {
       ${cssArg.cssText}
     }
   `);