@canlooks/can-ui 0.0.98 → 0.0.99

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

@@ -13,15 +13,17 @@ function useStyle({ variant }) {
             ? (0, color_1.default)(text.primary).alpha(.8).string()
             : (0, color_1.default)(background.content).alpha(.8).string();
         return (0, react_1.css) `
-            position: absolute;
-            inset: 0;
-            z-index: 1;
-            background-color: ${bgColor};
-            display: flex;
-            flex-direction: column;
-            gap: ${spacing[3]}px;
-            align-items: center;
-            justify-content: center;
+            @layer reset {
+                position: absolute;
+                inset: 0;
+                z-index: 1;
+                background-color: ${bgColor};
+                display: flex;
+                flex-direction: column;
+                gap: ${spacing[3]}px;
+                align-items: center;
+                justify-content: center;
+            }
         `;
     }, [variant]);
 }

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

@@ -12,57 +12,59 @@ exports.classes = (0, utils_1.defineInnerClasses)('badge', [
 function useStyle({ color }) {
     const colorValue = (0, utils_1.useColor)(color);
     return (0, utils_1.useCss)(({ easing }) => (0, react_1.css) `
-        display: inline-flex;
-        position: relative;
+        @layer reset {
+            display: inline-flex;
+            position: relative;
 
-        .${exports.classes.badge} {
-            .${exports.classes.badgeWrap} {
-                line-height: 1;
-                background-color: ${colorValue};
-                color: #ffffff;
-                border: 1px solid #ffffff;
-                font-size: ${13 / 14}em;
-                top: 0;
-                left: 0;
-                transition: transform .25s ${easing.swing};
-            }
-        }
-
-        &:has(.${exports.classes.children}) {
-            .${exports.classes.badge},
-            .${exports.classes.badgeWrap} {
-                position: absolute;
+            .${exports.classes.badge} {
+                .${exports.classes.badgeWrap} {
+                    line-height: 1;
+                    background-color: ${colorValue};
+                    color: #ffffff;
+                    border: 1px solid #ffffff;
+                    font-size: ${13 / 14}em;
+                    top: 0;
+                    left: 0;
+                    transition: transform .25s ${easing.swing};
+                }
             }
 
-            .${exports.classes.badgeWrap} {
-                transform: translate(-50%, -50%);
-            }
-        }
+            &:has(.${exports.classes.children}) {
+                .${exports.classes.badge},
+                .${exports.classes.badgeWrap} {
+                    position: absolute;
+                }
 
-        &[data-variant=standard] {
-            .${exports.classes.badgeWrap} {
-                border-radius: 1000em;
-                padding: 2px 6px 3px;
+                .${exports.classes.badgeWrap} {
+                    transform: translate(-50%, -50%);
+                }
             }
-        }
 
-        &[data-variant=dot] {
-            .${exports.classes.badgeWrap} {
-                width: 9px;
-                height: 9px;
-                border-radius: 50%;
+            &[data-variant=standard] {
+                .${exports.classes.badgeWrap} {
+                    border-radius: 1000em;
+                    padding: 2px 6px 3px;
+                }
             }
-        }
 
-        &[data-zero=true] {
-            .${exports.classes.badgeWrap} {
-                transform: scale(0);
-                transition: transform .25s ${easing.easeOut};
+            &[data-variant=dot] {
+                .${exports.classes.badgeWrap} {
+                    width: 9px;
+                    height: 9px;
+                    border-radius: 50%;
+                }
             }
 
-            &:has(.${exports.classes.children}) {
+            &[data-zero=true] {
                 .${exports.classes.badgeWrap} {
-                    transform: translate(-50%, -50%) scale(0);
+                    transform: scale(0);
+                    transition: transform .25s ${easing.easeOut};
+                }
+
+                &:has(.${exports.classes.children}) {
+                    .${exports.classes.badgeWrap} {
+                        transform: translate(-50%, -50%) scale(0);
+                    }
                 }
             }
         }

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

@@ -13,81 +13,83 @@ exports.classes = (0, utils_1.defineInnerClasses)('bottom-navigation', [
 exports.style = (0, utils_1.defineCss)(({ background, text, easing, colors }) => {
     const primaryColor = (0, color_1.default)(colors.primary.main);
     return (0, react_1.css) `
-        height: 56px;
-        background-color: ${background.content};
-        display: flex;
-        position: absolute;
-        inset: auto 0 0;
-
-        .${exports.classes.item} {
-            line-height: 1;
-            flex: 1;
+        @layer reset {
+            height: 56px;
+            background-color: ${background.content};
             display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 4px;
-            cursor: pointer;
-            color: ${text.secondary};
-            transition: background-color .25s ${easing.easeOut};
-            -webkit-tap-highlight-color: transparent;
-            
-            &:hover {
-                &:not([data-active=true]) {
-                    background-color: ${(0, color_1.default)(text.primary).alpha(.03).string()};
-                }
+            position: absolute;
+            inset: auto 0 0;
 
-                &[data-active=true] {
-                    background-color: ${primaryColor.alpha(.03).string()};
+            .${exports.classes.item} {
+                line-height: 1;
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 4px;
+                cursor: pointer;
+                color: ${text.secondary};
+                transition: background-color .25s ${easing.easeOut};
+                -webkit-tap-highlight-color: transparent;
+
+                &:hover {
+                    &:not([data-active=true]) {
+                        background-color: ${(0, color_1.default)(text.primary).alpha(.03).string()};
+                    }
+
+                    &[data-active=true] {
+                        background-color: ${primaryColor.alpha(.03).string()};
+                    }
                 }
-            }
 
-            &:active {
-                transition: background-color 0s;
+                &:active {
+                    transition: background-color 0s;
+
+                    &:not([data-active=true]) {
+                        background-color: rgba(0, 0, 0, .06);
+                    }
 
-                &:not([data-active=true]) {
-                    background-color: rgba(0, 0, 0, .06);
+                    &[data-active=true] {
+                        background-color: ${primaryColor.alpha(.06).string()};
+                    }
                 }
 
                 &[data-active=true] {
-                    background-color: ${primaryColor.alpha(.06).string()};
+                    color: ${colors.primary.main};
                 }
-            }
-            
-            &[data-active=true] {
-                color: ${colors.primary.main};
-            }
-
-            .${exports.classes.icon} {
-                display: flex;
-                font-size: ${18 / 14}em;
-            }
 
-            .${exports.classes.label} {
-                transition-property: font-size, transform, height;
-                transition-duration: .25s;
-                transition-timing-function: ${easing.easeOut};
-            }
+                .${exports.classes.icon} {
+                    display: flex;
+                    font-size: ${18 / 14}em;
+                }
 
-            &[data-show-label-inactive=true]:not([data-active=true]) {
                 .${exports.classes.label} {
-                    font-size: ${12 / 14}em;
+                    transition-property: font-size, transform, height;
+                    transition-duration: .25s;
+                    transition-timing-function: ${easing.easeOut};
                 }
-            }
 
-            &:not([data-show-label-inactive=true]):not([data-active=true]) {
-                .${exports.classes.label} {
-                    height: 0;
-                    transform: scale(0);
+                &[data-show-label-inactive=true]:not([data-active=true]) {
+                    .${exports.classes.label} {
+                        font-size: ${12 / 14}em;
+                    }
                 }
-            }
 
-            &[data-active=true] {
-                .${exports.classes.label} {
-                    height: 1em;
-                    font-size: 1em;
-                    transform: scale(1);
-                    transition-timing-function: ${easing.bounce};
+                &:not([data-show-label-inactive=true]):not([data-active=true]) {
+                    .${exports.classes.label} {
+                        height: 0;
+                        transform: scale(0);
+                    }
+                }
+
+                &[data-active=true] {
+                    .${exports.classes.label} {
+                        height: 1em;
+                        font-size: 1em;
+                        transform: scale(1);
+                        transition-timing-function: ${easing.bounce};
+                    }
                 }
             }
         }

package/dist/cjs/components/boundary/errorBoundary.style.js

@@ -6,15 +6,17 @@ const utils_1 = require("../../utils");
 const placeholder_style_1 = require("../placeholder/placeholder.style");
 exports.classes = (0, utils_1.defineInnerClasses)('error-boundary');
 exports.style = (0, utils_1.defineCss)(({ spacing, background, borderRadius }) => (0, react_1.css) `
-    justify-content: flex-start;
-    padding: ${spacing[8]}px;
-
-    .${placeholder_style_1.classes.description} {
-        width: 100%;
-        background-color: ${background.content};
-        border-radius: ${borderRadius}px;
+    @layer reset {
+        justify-content: flex-start;
         padding: ${spacing[8]}px;
-        margin-top: ${spacing[8]}px;
-        overflow: auto;
+
+        .${placeholder_style_1.classes.description} {
+            width: 100%;
+            background-color: ${background.content};
+            border-radius: ${borderRadius}px;
+            padding: ${spacing[8]}px;
+            margin-top: ${spacing[8]}px;
+            overflow: auto;
+        }
     }
 `);

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

@@ -7,11 +7,13 @@ exports.classes = (0, utils_1.defineInnerClasses)('breadcrumb', [
     'separator'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_1.css) `
-    display: flex;
-    align-items: center;
-    gap: ${spacing[3]}px;
-    
-    .${exports.classes.separator} {
-        color: ${text.disabled};
+    @layer reset {
+        display: flex;
+        align-items: center;
+        gap: ${spacing[3]}px;
+
+        .${exports.classes.separator} {
+            color: ${text.disabled};
+        }
     }
 `);

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

@@ -9,14 +9,16 @@ exports.classes = (0, utils_1.defineInnerClasses)('bubble', [
     'content'
 ]);
 exports.style = (0, utils_1.defineCss)(({ background, boxShadow, borderRadius }) => (0, react_1.css) `
-    z-index: ${theme_1.zIndex.popper};
+    @layer reset {
+        z-index: ${theme_1.zIndex.popper};
 
-    .${exports.classes.content} {
-        background-color: ${background.content};
-        box-shadow: ${boxShadow[0]};
-        border-radius: ${borderRadius}px;
-        padding: 4px;
-    }
+        .${exports.classes.content} {
+            background-color: ${background.content};
+            box-shadow: ${boxShadow[0]};
+            border-radius: ${borderRadius}px;
+            padding: 4px;
+        }
 
-    ${(0, popper_style_1.popperArrowStyle)(background.content)}
+        ${(0, popper_style_1.popperArrowStyle)(background.content)}
+    }
 `);

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

@@ -14,48 +14,50 @@ exports.classes = (0, utils_1.defineInnerClasses)('bubble-confirm', [
     'footer'
 ]);
 exports.style = (0, utils_1.defineCss)(({ boxShadow, borderRadius, background, spacing, colors, text }) => (0, react_1.css) `
-    min-width: 180px;
-    max-width: 340px;
-    z-index: ${theme_1.zIndex.bubbleConfirm};
+    @layer reset {
+        min-width: 180px;
+        max-width: 340px;
+        z-index: ${theme_1.zIndex.bubbleConfirm};
 
-    .${exports.classes.bubble} {
-        border-radius: ${borderRadius}px;
-        box-shadow: ${boxShadow[0]};
-        background-color: ${background.content};
-        display: flex;
-        gap: ${spacing[4]}px;
-        padding: ${spacing[5]}px;
-
-        .${exports.classes.icon} {
-            color: ${colors.warning.main};
-            font-size: 1.2em;
-        }
-
-        .${exports.classes.info} {
-            flex: 1;
-            min-width: 0;
+        .${exports.classes.bubble} {
+            border-radius: ${borderRadius}px;
+            box-shadow: ${boxShadow[0]};
+            background-color: ${background.content};
             display: flex;
-            flex-direction: column;
-            gap: ${spacing[3]}px;
-
-            .${exports.classes.title} {
-                font-weight: bold;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
-            }
+            gap: ${spacing[4]}px;
+            padding: ${spacing[5]}px;
 
-            .${exports.classes.content} {
-                color: ${text.secondary};
+            .${exports.classes.icon} {
+                color: ${colors.warning.main};
+                font-size: 1.2em;
             }
 
-            .${exports.classes.footer} {
+            .${exports.classes.info} {
+                flex: 1;
+                min-width: 0;
                 display: flex;
-                justify-content: flex-end;
-                gap: ${spacing[2]}px;
+                flex-direction: column;
+                gap: ${spacing[3]}px;
+
+                .${exports.classes.title} {
+                    font-weight: bold;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+
+                .${exports.classes.content} {
+                    color: ${text.secondary};
+                }
+
+                .${exports.classes.footer} {
+                    display: flex;
+                    justify-content: flex-end;
+                    gap: ${spacing[2]}px;
+                }
             }
         }
-    }
 
-    ${(0, popper_style_1.popperArrowStyle)(background.content)}
+        ${(0, popper_style_1.popperArrowStyle)(background.content)}
+    }
 `);