@canlooks/can-ui 0.0.98 → 0.0.100

package/dist/esm/components/slidableActions/slidableActions.style.js

@@ -10,73 +10,75 @@ export const classes = defineInnerClasses('slidable-actions', [
     'actionItemIcon'
 ]);
 export const style = defineCss(({ background }) => css `
-    position: relative;
-    overflow: hidden;
-
-    .${classes.content} {
-        touch-action: pan-y;
+    @layer reset {
         position: relative;
-        z-index: 1;
-    }
+        overflow: hidden;
 
-    .${classes.actions} {
-        position: absolute;
-        inset: 0;
+        .${classes.content} {
+            touch-action: pan-y;
+            position: relative;
+            z-index: 1;
+        }
 
-        .${classes.actionsLeft}, .${classes.actionsRight} {
-            width: 100%;
-            height: 100%;
+        .${classes.actions} {
             position: absolute;
-            top: 0;
+            inset: 0;
 
-            .${classes.actionItem} {
+            .${classes.actionsLeft}, .${classes.actionsRight} {
                 width: 100%;
                 height: 100%;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                color: ${background.content};
                 position: absolute;
                 top: 0;
 
-                .${classes.actionItemButton} {
-                    flex: 1;
+                .${classes.actionItem} {
+                    width: 100%;
+                    height: 100%;
                     display: flex;
                     flex-direction: column;
-                    align-items: center;
                     justify-content: center;
-                    padding: 0 18px;
-                    border-radius: 0;
-                }
+                    color: ${background.content};
+                    position: absolute;
+                    top: 0;
 
-                .${classes.actionItemIcon} {
-                    display: flex;
+                    .${classes.actionItemButton} {
+                        flex: 1;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        justify-content: center;
+                        padding: 0 18px;
+                        border-radius: 0;
+                    }
+
+                    .${classes.actionItemIcon} {
+                        display: flex;
+                    }
                 }
             }
-        }
 
-        .${classes.actionsLeft} {
-            right: 100%;
+            .${classes.actionsLeft} {
+                right: 100%;
 
-            .${classes.actionItem} {
-                align-items: flex-end;
-                right: 0;
+                .${classes.actionItem} {
+                    align-items: flex-end;
+                    right: 0;
+                }
             }
-        }
 
-        .${classes.actionsRight} {
-            left: 100%;
+            .${classes.actionsRight} {
+                left: 100%;
 
-            .${classes.actionItem} {
-                align-items: flex-start;
-                left: 0;
+                .${classes.actionItem} {
+                    align-items: flex-start;
+                    left: 0;
+                }
             }
         }
-    }
 
-    &:not([data-dragging=true]) {
-        .${classes.content}, .${classes.actionItem} {
-            transition: translate .25s ease-out;
+        &:not([data-dragging=true]) {
+            .${classes.content}, .${classes.actionItem} {
+                transition: translate .25s ease-out;
+            }
         }
     }
 `);

package/dist/esm/components/slider/slider.style.js

@@ -20,165 +20,167 @@ export function useStyle({ color }) {
         const darker = c.darken(.1).hex();
         const outlineColor = c.alpha(.15).string();
         return css `
-            min-height: 24px;
-            display: flex;
-            align-items: center;
-            gap: ${spacing[2]}px;
+            @layer reset {
+                min-height: 24px;
+                display: flex;
+                align-items: center;
+                gap: ${spacing[2]}px;
+
+                &[data-inset=true] {
+                    min-height: 0;
+                }
 
-            &[data-inset=true] {
-                min-height: 0;
-            }
+                .${classes.rail} {
+                    flex: 1;
+                    border-radius: 1000em;
+                    cursor: pointer;
+                    background-color: ${gray(.1)};
+                    transition: background-color .25s ${easing.easeOut};
+                    touch-action: none;
 
-            .${classes.rail} {
-                flex: 1;
-                border-radius: 1000em;
-                cursor: pointer;
-                background-color: ${gray(.1)};
-                transition: background-color .25s ${easing.easeOut};
-                touch-action: none;
+                    &:hover {
+                        background-color: ${mode === 'light' ? divider : gray(.05)};
+                    }
 
-                &:hover {
-                    background-color: ${mode === 'light' ? divider : gray(.05)};
+                    .${classes.railWrap} {
+                        height: 100%;
+                        position: relative;
+                        border-radius: inherit;
+                    }
                 }
 
-                .${classes.railWrap} {
+                &[data-orientation=vertical] {
+                    min-height: auto;
                     height: 100%;
-                    position: relative;
-                    border-radius: inherit;
-                }
-            }
+                    flex-direction: column;
 
-            &[data-orientation=vertical] {
-                min-height: auto;
-                height: 100%;
-                flex-direction: column;
+                    .${classes.rail} {
+                        height: 100%;
+                    }
 
-                .${classes.rail} {
-                    height: 100%;
+                    .${classes.handle} {
+                        transform: translate(-50%, 50%);
+                    }
                 }
 
                 .${classes.handle} {
-                    transform: translate(-50%, 50%);
+                    cursor: pointer;
+                    padding: 0;
+                    border-radius: 50%;
+                    border: 0 solid ${colorValue};
+                    position: absolute;
+                    z-index: 1;
+                    transform: translate(-50%, -50%);
+                    -webkit-tap-highlight-color: transparent;
                 }
-            }
 
-            .${classes.handle} {
-                cursor: pointer;
-                padding: 0;
-                border-radius: 50%;
-                border: 0 solid ${colorValue};
-                position: absolute;
-                z-index: 1;
-                transform: translate(-50%, -50%);
-                -webkit-tap-highlight-color: transparent;
-            }
-    
-            &:not([data-disable-outline=true]) {
-                .${classes.handle} {
-                    outline: 0 solid ${outlineColor};
-                }
-            }
-    
-            &[data-variant=filled] {
-                .${classes.handle} {
-                    transition: background-color .25s ${easing.easeOut}, outline-width .25s ${easing.easeOut};
-                    background-color: ${colorValue};
-                    
-                    &:hover {
-                        outline-width: 6px;
-                        background-color: ${lighter};
-                    }
-    
-                    &:active {
-                        transition: background-color 0s, outline-width .25s ${easing.swing};
-                        background-color: ${darker};
-                        outline-width: 9px;
-                    }
-    
-                    &:focus {
-                        transition: background-color .25s ${easing.easeOut}, outline-width .25s ${easing.swing};
-                        outline-width: 9px;
+                &:not([data-disable-outline=true]) {
+                    .${classes.handle} {
+                        outline: 0 solid ${outlineColor};
                     }
                 }
-            }
-    
-            &[data-variant=outlined] {
-                .${classes.handle} {
-                    transition: outline-width .25s ${easing.easeOut};
-                    background-color: ${background.content};
-                    border-width: 2px;
-    
-                    &:hover {
-                        outline-width: 6px;
-                    }
-    
-                    &:active,
-                    &:focus {
-                        transition: outline-width .25s ${easing.swing};
-                        outline-width: 9px;
+
+                &[data-variant=filled] {
+                    .${classes.handle} {
+                        transition: background-color .25s ${easing.easeOut}, outline-width .25s ${easing.easeOut};
+                        background-color: ${colorValue};
+
+                        &:hover {
+                            outline-width: 6px;
+                            background-color: ${lighter};
+                        }
+
+                        &:active {
+                            transition: background-color 0s, outline-width .25s ${easing.swing};
+                            background-color: ${darker};
+                            outline-width: 9px;
+                        }
+
+                        &:focus {
+                            transition: background-color .25s ${easing.easeOut}, outline-width .25s ${easing.swing};
+                            outline-width: 9px;
+                        }
                     }
                 }
-            }
 
-            .${classes.track} {
-                position: absolute;
-                background-color: ${colorValue};
+                &[data-variant=outlined] {
+                    .${classes.handle} {
+                        transition: outline-width .25s ${easing.easeOut};
+                        background-color: ${background.content};
+                        border-width: 2px;
+
+                        &:hover {
+                            outline-width: 6px;
+                        }
+
+                        &:active,
+                        &:focus {
+                            transition: outline-width .25s ${easing.swing};
+                            outline-width: 9px;
+                        }
+                    }
+                }
 
-                &:before {
-                    content: '';
-                    aspect-ratio: 1;
-                    border-radius: 50%;
+                .${classes.track} {
                     position: absolute;
-                    background-color: inherit;
-                }
-            }
+                    background-color: ${colorValue};
 
-            &[data-orientation=horizontal] {
-                .${classes.track}:before {
-                    height: 100%;
-                    top: 0;
-                    left: 0;
-                    transform: translateX(-50%);
+                    &::before {
+                        content: '';
+                        aspect-ratio: 1;
+                        border-radius: 50%;
+                        position: absolute;
+                        background-color: inherit;
+                    }
                 }
-            }
 
-            &[data-orientation=vertical] {
-                .${classes.track}:before {
-                    width: 100%;
-                    bottom: 0;
-                    left: 0;
-                    transform: translateY(50%);
+                &[data-orientation=horizontal] {
+                    .${classes.track}::before {
+                        height: 100%;
+                        top: 0;
+                        left: 0;
+                        transform: translateX(-50%);
+                    }
                 }
-            }
-
-            .${classes.mark} {
-                aspect-ratio: 1;
-                border: 2px solid ${gray(mode === 'light' ? .2 : .1)};
-                border-radius: 50%;
-                background-color: ${background.content};
-                position: absolute;
-                transform: translate(-50%, -50%);
 
-                &[data-active=true] {
-                    border-color: ${colorValue};
+                &[data-orientation=vertical] {
+                    .${classes.track}::before {
+                        width: 100%;
+                        bottom: 0;
+                        left: 0;
+                        transform: translateY(50%);
+                    }
                 }
 
-                .${classes.label} {
-                    color: ${text.secondary};
+                .${classes.mark} {
+                    aspect-ratio: 1;
+                    border: 2px solid ${gray(mode === 'light' ? .2 : .1)};
+                    border-radius: 50%;
+                    background-color: ${background.content};
                     position: absolute;
-                    font-size: ${13 / 14}em;
+                    transform: translate(-50%, -50%);
+
+                    &[data-active=true] {
+                        border-color: ${colorValue};
+                    }
+
+                    .${classes.label} {
+                        color: ${text.secondary};
+                        position: absolute;
+                        font-size: ${13 / 14}em;
+                    }
                 }
-            }
 
-            &[data-orientation=vertical] {
-                .${classes.mark} {
-                    transform: translate(-50%, 50%);
+                &[data-orientation=vertical] {
+                    .${classes.mark} {
+                        transform: translate(-50%, 50%);
+                    }
                 }
-            }
 
-            &[data-inset=true] {
-                .${classes.mark} {
-                    z-index: 2;
+                &[data-inset=true] {
+                    .${classes.mark} {
+                        z-index: 2;
+                    }
                 }
             }
         `;

package/dist/esm/components/snackbarBase/snackbarBase.style.js

@@ -17,131 +17,133 @@ export const style = defineCss(theme => {
     return [
         appStyleCallback(theme),
         css `
-            width: 100%;
-            height: auto;
-            display: flex;
-            flex-direction: column;
-            padding: ${spacing[5]}px;
-            position: fixed;
-            z-index: ${zIndex.snackbar};
-            pointer-events: none;
-
-            &[data-use-to=notification] {
-                flex-direction: column-reverse;
-            }
-
-            .${classes.itemWrap} {
+            @layer reset {
+                width: 100%;
+                height: auto;
                 display: flex;
-                align-items: flex-start;
-                overflow: visible;
-            }
-
-            &[data-place="0"], &[data-place="1"], &[data-place="2"] {
-                top: 0;
-            }
+                flex-direction: column;
+                padding: ${spacing[5]}px;
+                position: fixed;
+                z-index: ${zIndex.snackbar};
+                pointer-events: none;
+
+                &[data-use-to=notification] {
+                    flex-direction: column-reverse;
+                }
 
-            &[data-place="3"], &[data-place="4"], &[data-place="5"] {
-                bottom: 0;
-            }
+                .${classes.itemWrap} {
+                    display: flex;
+                    align-items: flex-start;
+                    overflow: visible;
+                }
 
-            &[data-place="0"],
-            &[data-place="3"] {
-                left: 0;
+                &[data-place="0"], &[data-place="1"], &[data-place="2"] {
+                    top: 0;
+                }
 
-                .${classes.itemWrap} {
-                    justify-content: flex-start;
+                &[data-place="3"], &[data-place="4"], &[data-place="5"] {
+                    bottom: 0;
                 }
-            }
 
-            &[data-place="1"],
-            &[data-place="4"] {
-                left: 50%;
-                transform: translateX(-50%);
+                &[data-place="0"],
+                &[data-place="3"] {
+                    left: 0;
 
-                .${classes.itemWrap} {
-                    justify-content: center;
+                    .${classes.itemWrap} {
+                        justify-content: flex-start;
+                    }
                 }
-            }
 
-            &[data-place="2"],
-            &[data-place="5"] {
-                right: 0;
+                &[data-place="1"],
+                &[data-place="4"] {
+                    left: 50%;
+                    transform: translateX(-50%);
 
-                .${classes.itemWrap} {
-                    justify-content: flex-end;
+                    .${classes.itemWrap} {
+                        justify-content: center;
+                    }
                 }
-            }
 
-            &[data-place="1"] .${classes.item} {
-                transform-origin: left top;
-            }
+                &[data-place="2"],
+                &[data-place="5"] {
+                    right: 0;
 
-            &[data-place="2"] .${classes.item} {
-                transform-origin: top;
-            }
+                    .${classes.itemWrap} {
+                        justify-content: flex-end;
+                    }
+                }
 
-            &[data-place="3"] .${classes.item} {
-                transform-origin: right top;
-            }
+                &[data-place="1"] .${classes.item} {
+                    transform-origin: left top;
+                }
 
-            &[data-place="4"] .${classes.item} {
-                transform-origin: left bottom;
-            }
+                &[data-place="2"] .${classes.item} {
+                    transform-origin: top;
+                }
 
-            &[data-place="5"] .${classes.item} {
-                transform-origin: bottom;
-            }
+                &[data-place="3"] .${classes.item} {
+                    transform-origin: right top;
+                }
 
-            &[data-place="6"] .${classes.item} {
-                transform-origin: right bottom;
-            }
+                &[data-place="4"] .${classes.item} {
+                    transform-origin: left bottom;
+                }
 
-            .${classes.item} {
-                pointer-events: all !important;
-                max-width: 60%;
-                display: flex;
-                gap: ${spacing[4]}px;
-                box-shadow: 2px 4px 18px rgba(0, 0, 0, .16);
-                padding: ${spacing[3]}px ${spacing[4]}px;
-                margin-bottom: ${spacing[4]}px;
-                border-radius: ${borderRadius}px;
-                background-color: ${background.content};
-
-                &[data-variant=filled] {
-                    color: #ffffff;
+                &[data-place="5"] .${classes.item} {
+                    transform-origin: bottom;
                 }
 
-                .${classes.icon} {
-                    font-size: ${17 / 14}em;
+                &[data-place="6"] .${classes.item} {
+                    transform-origin: right bottom;
                 }
 
-                .${classes.text} {
-                    flex: 1;
+                .${classes.item} {
+                    pointer-events: all !important;
+                    max-width: 60%;
+                    display: flex;
+                    gap: ${spacing[4]}px;
+                    box-shadow: 2px 4px 18px rgba(0, 0, 0, .16);
+                    padding: ${spacing[3]}px ${spacing[4]}px;
+                    margin-bottom: ${spacing[4]}px;
+                    border-radius: ${borderRadius}px;
+                    background-color: ${background.content};
+
+                    &[data-variant=filled] {
+                        color: #ffffff;
+                    }
 
-                    .${classes.title} {
+                    .${classes.icon} {
+                        font-size: ${17 / 14}em;
+                    }
+
+                    .${classes.text} {
                         flex: 1;
-                        font-weight: bold;
-                        font-size: ${15 / 14}em;
-                        margin-top: 2px;
 
-                        & + .${classes.content} {
-                            margin-top: 4px;
+                        .${classes.title} {
+                            flex: 1;
+                            font-weight: bold;
+                            font-size: ${15 / 14}em;
+                            margin-top: 2px;
+
+                            & + .${classes.content} {
+                                margin-top: 4px;
+                            }
                         }
-                    }
 
-                    .${classes.content} {
-                        margin-top: 2px;
+                        .${classes.content} {
+                            margin-top: 2px;
+                        }
                     }
-                }
 
-                .${classes.close} {
-                    margin: -4px -4px 0 0;
+                    .${classes.close} {
+                        margin: -4px -4px 0 0;
+                    }
                 }
-            }
 
-            &[data-use-to=notification] {
-                .${classes.item} {
-                    width: 360px;
+                &[data-use-to=notification] {
+                    .${classes.item} {
+                        width: 360px;
+                    }
                 }
             }
         `

package/dist/esm/components/status/status.style.js

@@ -6,19 +6,21 @@ export const classes = defineInnerClasses('status', [
     'dot'
 ]);
 export const style = defineCss(({ spacing, easing }) => css `
-    display: inline-flex;
-    align-items: center;
-    gap: ${spacing[2]}px;
+    @layer reset {
+        display: inline-flex;
+        align-items: center;
+        gap: ${spacing[2]}px;
 
-    .${classes.dot} {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-    }
+        .${classes.dot} {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+        }
 
-    &[data-animation=true] {
-        .${classes.icon} {
-            animation: ${statusAnim} .8s ${easing.easeInOut} infinite;
+        &[data-animation=true] {
+            .${classes.icon} {
+                animation: ${statusAnim} .8s ${easing.easeInOut} infinite;
+            }
         }
     }
 `);