@pandacss/preset-base 0.9.0 → 0.11.0

package/dist/index.d.mts

@@ -475,6 +475,29 @@ declare const preset: {
                 translate: any;
             };
         };
+        bleed: {
+            properties: {
+                inline: {
+                    type: "property";
+                    value: "marginInline";
+                };
+                block: {
+                    type: "property";
+                    value: "marginBlock";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                '--bleed-x': string;
+                '--bleed-y': string;
+                marginInline: "calc(var(--bleed-x, 0) * -1)";
+                marginBlock: "calc(var(--bleed-y, 0) * -1)";
+            };
+        };
+        visuallyHidden: {
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                srOnly: true;
+            };
+        };
     };
 };
 

package/dist/index.d.ts

@@ -475,6 +475,29 @@ declare const preset: {
                 translate: any;
             };
         };
+        bleed: {
+            properties: {
+                inline: {
+                    type: "property";
+                    value: "marginInline";
+                };
+                block: {
+                    type: "property";
+                    value: "marginBlock";
+                };
+            };
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                '--bleed-x': string;
+                '--bleed-y': string;
+                marginInline: "calc(var(--bleed-x, 0) * -1)";
+                marginBlock: "calc(var(--bleed-y, 0) * -1)";
+            };
+        };
+        visuallyHidden: {
+            transform(props: _pandacss_types_dist_pattern.Props<_pandacss_types_dist_pattern.PatternProperties>): {
+                srOnly: true;
+            };
+        };
     };
 };
 

package/dist/index.js

@@ -38,9 +38,9 @@ var conditions = {
   readOnly: "&:is(:read-only, [data-read-only])",
   readWrite: "&:read-write",
   empty: "&:is(:empty, [data-empty])",
-  checked: "&:is(:checked, [data-checked], [aria-checked=true])",
+  checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
   enabled: "&:enabled",
-  expanded: "&:is([aria-expanded=true], [data-expanded])",
+  expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])',
   highlighted: "&[data-highlighted]",
   before: "&::before",
   after: "&::after",
@@ -64,9 +64,9 @@ var conditions = {
   peerFocusWithin: ".peer:focus-within ~ &",
   peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
   peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled]) ~ &",
-  peerChecked: ".peer:is(:checked, [data-checked], [aria-checked=true]) ~ &",
+  peerChecked: '.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &',
   peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
-  peerExpanded: ".peer:is([aria-expanded=true], [data-expanded]) ~ &",
+  peerExpanded: '.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &',
   peerPlaceholderShown: ".peer:placeholder-shown ~ &",
   groupFocus: ".group:is(:focus, [data-focus]) &",
   groupHover: ".group:is(:hover, [data-hover]) &",
@@ -74,10 +74,10 @@ var conditions = {
   groupFocusWithin: ".group:focus-within &",
   groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
   groupDisabled: ".group:is(:disabled, [disabled], [data-disabled]) &",
-  groupChecked: ".group:is(:checked, [data-checked], [aria-checked=true]) &",
-  groupExpanded: ".group:is([aria-expanded=true], [data-expanded]) &",
+  groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
+  groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
   groupInvalid: ".group:invalid &",
-  indeterminate: "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed])",
+  indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate")',
   required: "&:required",
   valid: "&:is(:valid, [data-valid])",
   invalid: "&:is(:invalid, [data-invalid])",
@@ -90,7 +90,7 @@ var conditions = {
   selected: "&:is([aria-selected=true], [data-selected])",
   default: "&:default",
   optional: "&:optional",
-  open: "&[open]",
+  open: '&:is([open], [data-open], [data-state="open"])',
   fullscreen: "&:fullscreen",
   loading: "&:is([data-loading], [aria-busy=true])",
   currentPage: "&[aria-current=page]",
@@ -424,6 +424,11 @@ var border = {
     values: "borders",
     shorthand: "borderStart"
   },
+  borderInlineStartWidth: {
+    className: "border-s",
+    values: "borderWidths",
+    shorthand: "borderStartWidth"
+  },
   borderInlineStartColor: {
     className: "border-s",
     values: "colors",
@@ -442,6 +447,11 @@ var border = {
     values: "borders",
     shorthand: "borderEnd"
   },
+  borderInlineEndWidth: {
+    className: "border-e",
+    values: "borderWidths",
+    shorthand: "borderEndWidth"
+  },
   borderInlineEndColor: {
     className: "border-e",
     values: "colors",
@@ -562,6 +572,9 @@ var divide = {
 
 // src/utilities/effects.ts
 var effects = {
+  opacity: {
+    values: "opacity"
+  },
   boxShadow: {
     shorthand: "shadow",
     className: "shadow",
@@ -2399,6 +2412,30 @@ var float = definePattern({
     };
   }
 });
+var bleed = definePattern({
+  properties: {
+    inline: { type: "property", value: "marginInline" },
+    block: { type: "property", value: "marginBlock" }
+  },
+  transform(props) {
+    const { inline = "0", block = "0", ...rest } = props;
+    return {
+      "--bleed-x": `spacing.${inline}`,
+      "--bleed-y": `spacing.${block}`,
+      marginInline: "calc(var(--bleed-x, 0) * -1)",
+      marginBlock: "calc(var(--bleed-y, 0) * -1)",
+      ...rest
+    };
+  }
+});
+var visuallyHidden = definePattern({
+  transform(props) {
+    return {
+      srOnly: true,
+      ...props
+    };
+  }
+});
 var patterns = {
   box,
   flex,
@@ -2417,7 +2454,9 @@ var patterns = {
   wrap,
   container,
   divider,
-  float
+  float,
+  bleed,
+  visuallyHidden
 };
 
 // src/index.ts

package/dist/index.mjs

@@ -11,9 +11,9 @@ var conditions = {
   readOnly: "&:is(:read-only, [data-read-only])",
   readWrite: "&:read-write",
   empty: "&:is(:empty, [data-empty])",
-  checked: "&:is(:checked, [data-checked], [aria-checked=true])",
+  checked: '&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])',
   enabled: "&:enabled",
-  expanded: "&:is([aria-expanded=true], [data-expanded])",
+  expanded: '&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])',
   highlighted: "&[data-highlighted]",
   before: "&::before",
   after: "&::after",
@@ -37,9 +37,9 @@ var conditions = {
   peerFocusWithin: ".peer:focus-within ~ &",
   peerFocusVisible: ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
   peerDisabled: ".peer:is(:disabled, [disabled], [data-disabled]) ~ &",
-  peerChecked: ".peer:is(:checked, [data-checked], [aria-checked=true]) ~ &",
+  peerChecked: '.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &',
   peerInvalid: ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
-  peerExpanded: ".peer:is([aria-expanded=true], [data-expanded]) ~ &",
+  peerExpanded: '.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &',
   peerPlaceholderShown: ".peer:placeholder-shown ~ &",
   groupFocus: ".group:is(:focus, [data-focus]) &",
   groupHover: ".group:is(:hover, [data-hover]) &",
@@ -47,10 +47,10 @@ var conditions = {
   groupFocusWithin: ".group:focus-within &",
   groupFocusVisible: ".group:is(:focus-visible, [data-focus-visible]) &",
   groupDisabled: ".group:is(:disabled, [disabled], [data-disabled]) &",
-  groupChecked: ".group:is(:checked, [data-checked], [aria-checked=true]) &",
-  groupExpanded: ".group:is([aria-expanded=true], [data-expanded]) &",
+  groupChecked: '.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &',
+  groupExpanded: '.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &',
   groupInvalid: ".group:invalid &",
-  indeterminate: "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed])",
+  indeterminate: '&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate")',
   required: "&:required",
   valid: "&:is(:valid, [data-valid])",
   invalid: "&:is(:invalid, [data-invalid])",
@@ -63,7 +63,7 @@ var conditions = {
   selected: "&:is([aria-selected=true], [data-selected])",
   default: "&:default",
   optional: "&:optional",
-  open: "&[open]",
+  open: '&:is([open], [data-open], [data-state="open"])',
   fullscreen: "&:fullscreen",
   loading: "&:is([data-loading], [aria-busy=true])",
   currentPage: "&[aria-current=page]",
@@ -397,6 +397,11 @@ var border = {
     values: "borders",
     shorthand: "borderStart"
   },
+  borderInlineStartWidth: {
+    className: "border-s",
+    values: "borderWidths",
+    shorthand: "borderStartWidth"
+  },
   borderInlineStartColor: {
     className: "border-s",
     values: "colors",
@@ -415,6 +420,11 @@ var border = {
     values: "borders",
     shorthand: "borderEnd"
   },
+  borderInlineEndWidth: {
+    className: "border-e",
+    values: "borderWidths",
+    shorthand: "borderEndWidth"
+  },
   borderInlineEndColor: {
     className: "border-e",
     values: "colors",
@@ -535,6 +545,9 @@ var divide = {
 
 // src/utilities/effects.ts
 var effects = {
+  opacity: {
+    values: "opacity"
+  },
   boxShadow: {
     shorthand: "shadow",
     className: "shadow",
@@ -2372,6 +2385,30 @@ var float = definePattern({
     };
   }
 });
+var bleed = definePattern({
+  properties: {
+    inline: { type: "property", value: "marginInline" },
+    block: { type: "property", value: "marginBlock" }
+  },
+  transform(props) {
+    const { inline = "0", block = "0", ...rest } = props;
+    return {
+      "--bleed-x": `spacing.${inline}`,
+      "--bleed-y": `spacing.${block}`,
+      marginInline: "calc(var(--bleed-x, 0) * -1)",
+      marginBlock: "calc(var(--bleed-y, 0) * -1)",
+      ...rest
+    };
+  }
+});
+var visuallyHidden = definePattern({
+  transform(props) {
+    return {
+      srOnly: true,
+      ...props
+    };
+  }
+});
 var patterns = {
   box,
   flex,
@@ -2390,7 +2427,9 @@ var patterns = {
   wrap,
   container,
   divider,
-  float
+  float,
+  bleed,
+  visuallyHidden
 };
 
 // src/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/preset-base",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "The base preset for Panda CSS that contains the conditions and utilities",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -14,7 +14,7 @@
     "dist"
   ],
   "dependencies": {
-    "@pandacss/types": "0.9.0"
+    "@pandacss/types": "0.11.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format=esm,cjs --dts",