@canlooks/can-ui 0.0.97 → 0.0.99

package/dist/cjs/components/menuItem/menuItem.style.js

@@ -32,119 +32,121 @@ function useStyle({ color }) {
         const focusedBg = gray(mode === 'light' ? .05 : .23);
         const disabledOrActive = gray(mode === 'light' ? .1 : .17);
         return (0, react_1.css) `
-            display: flex;
-            align-items: center;
-            gap: ${spacing[3]}px;
-            border-radius: ${borderRadius}px;
-            cursor: pointer;
-            color: ${text.primary};
-            padding: ${exports.paddingHorizontal.medium}px 12px;
-            position: relative;
-            -webkit-tap-highlight-color: transparent;
-            
-            &[data-size=small] {
-                gap: ${spacing[2]}px;
-                padding: ${exports.paddingHorizontal.small}px 6px;
-            }
-        
-            &[data-size=large] {
-                gap: ${spacing[4]}px;
-                padding: ${exports.paddingHorizontal.large}px 15px;
-            }
-        
-            transition: background-color .25s ${easing.easeOut};
-        
-            &:hover, &[data-focused=true] {
-                background-color: ${focusedBg};
-            }
+            @layer reset {
+                display: flex;
+                align-items: center;
+                gap: ${spacing[3]}px;
+                border-radius: ${borderRadius}px;
+                cursor: pointer;
+                color: ${text.primary};
+                padding: ${exports.paddingHorizontal.medium}px 12px;
+                position: relative;
+                -webkit-tap-highlight-color: transparent;
 
-            &[data-emphasized=true] {
-                color: ${colorValue};
-            }
-        
-            &:active {
-                transition: background-color 0s;
-                background-color: ${disabledOrActive};
-            }
-        
-            &[data-selected=true] {
-                background-color: ${selectedBg};
+                &[data-size=small] {
+                    gap: ${spacing[2]}px;
+                    padding: ${exports.paddingHorizontal.small}px 6px;
+                }
+
+                &[data-size=large] {
+                    gap: ${spacing[4]}px;
+                    padding: ${exports.paddingHorizontal.large}px 15px;
+                }
+
+                transition: background-color .25s ${easing.easeOut};
 
                 &:hover, &[data-focused=true] {
-                    background-color: ${selectedAndFocused};
+                    background-color: ${focusedBg};
                 }
 
-                .${exports.classes.content} {
-                    font-weight: bold;
+                &[data-emphasized=true] {
                     color: ${colorValue};
                 }
-                
+
                 &:active {
-                    background-color: ${selectedActive};
+                    transition: background-color 0s;
+                    background-color: ${disabledOrActive};
                 }
-            }
 
-            &[data-disabled=true] {
-                cursor: not-allowed;
-                color: ${text.disabled};
-                background-color: ${disabledOrActive};
-            }
+                &[data-selected=true] {
+                    background-color: ${selectedBg};
 
-            .${exports.classes.checkbox} {
-                display: flex;
-            }
+                    &:hover, &[data-focused=true] {
+                        background-color: ${selectedAndFocused};
+                    }
 
-            .${exports.classes.content} {
-                flex: 1;
-            }
+                    .${exports.classes.content} {
+                        font-weight: bold;
+                        color: ${colorValue};
+                    }
+
+                    &:active {
+                        background-color: ${selectedActive};
+                    }
+                }
+
+                &[data-disabled=true] {
+                    cursor: not-allowed;
+                    color: ${text.disabled};
+                    background-color: ${disabledOrActive};
+                }
+
+                .${exports.classes.checkbox} {
+                    display: flex;
+                }
 
-            &[data-ellipsis=true] {
                 .${exports.classes.content} {
+                    flex: 1;
+                }
+
+                &[data-ellipsis=true] {
+                    .${exports.classes.content} {
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+
+                .${exports.classes.suffix} {
+                    max-width: 70%;
                     white-space: nowrap;
-                    overflow: hidden;
                     text-overflow: ellipsis;
+                    overflow: hidden;
                 }
-            }
 
-            .${exports.classes.suffix} {
-                max-width: 70%;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
-            }
+                .${exports.classes.prefix} {
+                    color: ${text.secondary};
+                }
 
-            .${exports.classes.prefix} {
-                color: ${text.secondary};
-            }
+                &[data-emphasized=true],
+                &[data-selected=true] {
+                    .${exports.classes.prefix} {
+                        color: ${colorValue};
+                    }
+                }
 
-            &[data-emphasized=true],
-            &[data-selected=true] {
-                .${exports.classes.prefix} {
-                    color: ${colorValue};
+                &:has(+ .${exports.classes.children} .${exports.classes.root}[data-selected=true]) {
+                    .${exports.classes.content} {
+                        color: ${colorValue};
+                    }
+
+                    .${exports.classes.prefix},
+                    .${exports.classes.arrow} {
+                        color: ${colorValue};
+                    }
                 }
-            }
 
-            &:has(+ .${exports.classes.children} .${exports.classes.root}[data-selected=true]) {
-                .${exports.classes.content} {
-                    color: ${colorValue};
+                .${exports.classes.suffix} {
+                    color: ${text.disabled};
                 }
 
-                .${exports.classes.prefix},
                 .${exports.classes.arrow} {
-                    color: ${colorValue};
-                }
-            }
-            
-            .${exports.classes.suffix} {
-                color: ${text.disabled};
-            }
+                    color: ${text.placeholder};
+                    transition: transform .25s ${easing.easeOut};
 
-            .${exports.classes.arrow} {
-                color: ${text.placeholder};
-                transition: transform .25s ${easing.easeOut};
-        
-                &[data-open=true] {
-                    transform: rotate(180deg);
+                    &[data-open=true] {
+                        transform: rotate(180deg);
+                    }
                 }
             }
         `;
@@ -152,8 +154,10 @@ function useStyle({ color }) {
 }
 exports.menuListPadding = 4;
 exports.childrenStyle = (0, utils_1.defineCss)(({ background }) => (0, react_1.css) `
-    .${exports.classes.childrenWrap} {
-        padding: ${exports.menuListPadding}px;
-        background-color: ${background.fixed};
+    @layer reset {
+        .${exports.classes.childrenWrap} {
+            padding: ${exports.menuListPadding}px;
+            background-color: ${background.fixed};
+        }
     }
 `);

package/dist/cjs/components/modal/modal.style.js

@@ -7,16 +7,18 @@ exports.classes = (0, utils_1.defineInnerClasses)('modal', [
     'modal',
 ]);
 exports.style = (0, react_1.css) `
-    .${exports.classes.modal} {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
+    @layer reset {
+        .${exports.classes.modal} {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            pointer-events: none;
 
-        > * {
-            pointer-events: all;
+            > * {
+                pointer-events: all;
+            }
         }
     }
 `;

package/dist/cjs/components/optionsBase/optionsBase.js

@@ -91,8 +91,7 @@ searchValue, selectedValue, onToggleSelected, ...props }) => {
                 params.opt?.onPointerEnter?.(e);
                 setVerticalIndex(-1);
             },
-            children: null,
-            scrollHere: void 0
+            children: null
         });
         if (options) {
             return filteredOptions.map((opt, index) => {

package/dist/cjs/components/optionsBase/optionsBase.style.js

@@ -7,15 +7,17 @@ exports.classes = (0, utils_1.defineInnerClasses)('options-base', [
     'optionsList'
 ]);
 exports.style = (0, react_1.css) `
-    .${exports.classes.optionsList} {
-        width: 100%;
-        height: 100%;
-        flex: 1;
-        overflow: hidden;
-        max-height: ${32 * 8}px;
+    @layer reset {
+        .${exports.classes.optionsList} {
+            width: 100%;
+            height: 100%;
+            flex: 1;
+            overflow: hidden;
+            max-height: ${32 * 8}px;
 
-        &:hover {
-            overflow: hidden auto;
+            &:hover {
+                overflow: hidden auto;
+            }
         }
     }
 `;

package/dist/cjs/components/overlayBase/overlayBase.style.js

@@ -12,22 +12,24 @@ exports.style = (0, utils_1.defineCss)(theme => {
     return [
         (0, app_style_1.appStyleCallback)(theme),
         (0, react_1.css) `
-            position: fixed;
-            inset: 0;
-            z-index: ${theme_1.zIndex.overlay};
+            @layer reset {
+                position: fixed;
+                inset: 0;
+                z-index: ${theme_1.zIndex.overlay};
 
-            &[data-custom-container=true] {
-                position: absolute;
-            }
+                &[data-custom-container=true] {
+                    position: absolute;
+                }
 
-            .${exports.classes.mask} {
-                background-color: rgba(0, 0, 0, .5);
-                position: absolute;
-                inset: 0;
-            }
+                .${exports.classes.mask} {
+                    background-color: rgba(0, 0, 0, .5);
+                    position: absolute;
+                    inset: 0;
+                }
 
-            &:not([data-open=true]) {
-                pointer-events: none;
+                &:not([data-open=true]) {
+                    pointer-events: none;
+                }
             }
         `
     ];

package/dist/cjs/components/pagination/pagination.style.js

@@ -13,43 +13,45 @@ exports.classes = (0, utils_1.defineInnerClasses)('pagination', [
     'counter'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-    gap: ${spacing[3]}px;
-
-    .${exports.classes.pager} {
+    @layer reset {
         display: flex;
-    }
-
-    .${exports.classes.button} {
-        padding-left: 3px;
-        padding-right: 3px;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-end;
+        gap: ${spacing[3]}px;
 
-        &[data-size=small] {
-            min-width: 24px;
+        .${exports.classes.pager} {
+            display: flex;
         }
 
-        &[data-size=medium] {
-            min-width: 32px;
-        }
+        .${exports.classes.button} {
+            padding-left: 3px;
+            padding-right: 3px;
+
+            &[data-size=small] {
+                min-width: 24px;
+            }
 
-        &[data-size=large] {
-            min-width: 40px;
+            &[data-size=medium] {
+                min-width: 32px;
+            }
+
+            &[data-size=large] {
+                min-width: 40px;
+            }
         }
-    }
 
-    .${exports.classes.jumper} {
-        display: flex;
-        align-items: center;
-        gap: ${spacing[3]}px;
-        
-        .${exports.classes.input} {
-            width: 45px;
+        .${exports.classes.jumper} {
+            display: flex;
+            align-items: center;
+            gap: ${spacing[3]}px;
+
+            .${exports.classes.input} {
+                width: 45px;
 
-            .${input_style_1.classes.input} {
-                text-align: center;
+                .${input_style_1.classes.input} {
+                    text-align: center;
+                }
             }
         }
     }

package/dist/cjs/components/palette/palette.style.d.ts

@@ -17,5 +17,5 @@ export declare const classes: {
 } & {
     root: string;
 };
-export declare const getTranparentBackground: (a: string, b: string) => string;
+export declare const getTransparentBackground: (a: string, b: string) => string;
 export declare const style: () => import("@emotion/react").SerializedStyles;