@canlooks/can-ui 0.0.98 → 0.0.100

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

@@ -15,101 +15,103 @@ export function useStyle({ size }) {
     return useCss(({ text, easing }) => {
         const blockColor = Color(text.primary);
         return css `
-            position: relative;
-
-            .${classes.scroller} {
-                height: 100%;
-                flex: 1;
+            @layer reset {
                 position: relative;
-                z-index: 0;
-                overflow: auto;
-                scrollbar-width: none;
 
-                &::-webkit-scrollbar {
-                    display: none;
+                .${classes.scroller} {
+                    height: 100%;
+                    flex: 1;
+                    position: relative;
+                    z-index: 0;
+                    overflow: auto;
+                    scrollbar-width: none;
+
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
                 }
-            }
 
-            &[data-variant=contain] {
-                &[data-vertical-scrollable=true] {
-                    padding-right: ${size};
+                &[data-variant=contain] {
+                    &[data-vertical-scrollable=true] {
+                        padding-right: ${size};
+                    }
+
+                    &[data-horizontal-scrollable=true] {
+                        padding-bottom: ${size};
+                    }
                 }
 
-                &[data-horizontal-scrollable=true] {
-                    padding-bottom: ${size};
+                .${classes.trackX},
+                .${classes.trackY},
+                .${classes.thumb},
+                .${classes.corner} {
+                    position: absolute;
+                    touch-action: none;
                 }
-            }
 
-            .${classes.trackX},
-            .${classes.trackY},
-            .${classes.thumb},
-            .${classes.corner} {
-                position: absolute;
-                touch-action: none;
-            }
+                .${classes.thumb} {
+                    min-width: ${size};
+                    min-height: ${size};
 
-            .${classes.thumb} {
-                min-width: ${size};
-                min-height: ${size};
+                    .${classes.block} {
+                        border-radius: calc(${size} * .5);
+                        position: absolute;
+                        inset: 2px;
+                        background: ${blockColor.alpha(.3).string()};
 
-                .${classes.block} {
-                    border-radius: calc(${size} * .5);
-                    position: absolute;
-                    inset: 2px;
-                    background: ${blockColor.alpha(.3).string()};
+                        &:hover {
+                            background: ${blockColor.alpha(.4).string()};
+                        }
+                    }
 
-                    &:hover {
-                        background: ${blockColor.alpha(.4).string()};
+                    &[data-dragging=true] .${classes.block} {
+                        background: ${blockColor.alpha(.6).string()};
                     }
                 }
 
-                &[data-dragging=true] .${classes.block} {
-                    background: ${blockColor.alpha(.6).string()};
+                .${classes.trackX} {
+                    height: ${size};
+                    left: 0;
+                    bottom: 0;
+                    right: ${size};
+                    display: none;
                 }
-            }
-
-            .${classes.trackX} {
-                height: ${size};
-                left: 0;
-                bottom: 0;
-                right: ${size};
-                display: none;
-            }
-
-            .${classes.trackY} {
-                width: ${size};
-                right: 0;
-                top: 0;
-                bottom: ${size};
-                display: none;
-            }
 
-            &[data-vertical-scrollable=true] {
                 .${classes.trackY} {
-                    display: block;
+                    width: ${size};
+                    right: 0;
+                    top: 0;
+                    bottom: ${size};
+                    display: none;
                 }
-            }
 
-            &[data-horizontal-scrollable=true] {
-                .${classes.trackX} {
-                    display: block;
+                &[data-vertical-scrollable=true] {
+                    .${classes.trackY} {
+                        display: block;
+                    }
                 }
-            }
 
-            &[data-autohide=true][data-variant=cover] {
-                .${classes.trackX},
-                .${classes.trackY},
-                .${classes.corner} {
-                    opacity: 0;
-                    transition: opacity .5s ${easing.easeIn};
+                &[data-horizontal-scrollable=true] {
+                    .${classes.trackX} {
+                        display: block;
+                    }
                 }
 
-                &[data-hover=true], &[data-dragging=true] {
+                &[data-autohide=true][data-variant=cover] {
                     .${classes.trackX},
                     .${classes.trackY},
                     .${classes.corner} {
-                        opacity: 1;
-                        transition: opacity 0s;
+                        opacity: 0;
+                        transition: opacity .5s ${easing.easeIn};
+                    }
+
+                    &[data-hover=true], &[data-dragging=true] {
+                        .${classes.trackX},
+                        .${classes.trackY},
+                        .${classes.corner} {
+                            opacity: 1;
+                            transition: opacity 0s;
+                        }
                     }
                 }
             }

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

@@ -15,109 +15,111 @@ export function useStyle({ indicatorColor }) {
         const hoverBg = bgColor.darken(mode === 'light' ? .04 : .12).hex();
         const activeBg = bgColor.darken(mode === 'light' ? .08 : .24).hex();
         return css `
-            display: inline-flex;
-            background-color: ${background.body};
-            border-radius: ${borderRadius}px;
-            padding: 2px;
-            position: relative;
-
-            .${classes.option} {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 6px;
-                padding: 4px 12px;
+            @layer reset {
+                display: inline-flex;
+                background-color: ${background.body};
                 border-radius: ${borderRadius}px;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                z-index: 1;
-                transition: background-color .3s ${easing.easeOut};
-                -webkit-tap-highlight-color: transparent;
-
-                &[data-active=true] {
-                    transition: background-color 0s;
-                }
+                padding: 2px;
+                position: relative;
 
-                &[data-orientation=vertical] {
-                    flex-direction: column;
-                }
+                .${classes.option} {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 6px;
+                    padding: 4px 12px;
+                    border-radius: ${borderRadius}px;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    z-index: 1;
+                    transition: background-color .3s ${easing.easeOut};
+                    -webkit-tap-highlight-color: transparent;
+
+                    &[data-active=true] {
+                        transition: background-color 0s;
+                    }
 
-                &[data-disabled=true] {
-                    cursor: not-allowed;
-                    color: ${text.disabled};
-                }
-            }
+                    &[data-orientation=vertical] {
+                        flex-direction: column;
+                    }
 
-            &[data-size=small] {
-                .${classes.option} {
-                    padding: 3px 12px;
+                    &[data-disabled=true] {
+                        cursor: not-allowed;
+                        color: ${text.disabled};
+                    }
                 }
-            }
 
-            &[data-size=large] {
-                .${classes.option} {
-                    padding: 11px 12px;
+                &[data-size=small] {
+                    .${classes.option} {
+                        padding: 3px 12px;
+                    }
                 }
-            }
-
-            &[data-full-width=true] {
-                display: flex;
 
-                .${classes.option} {
-                    flex: 1;
+                &[data-size=large] {
+                    .${classes.option} {
+                        padding: 11px 12px;
+                    }
                 }
-            }
 
-            &[data-orientation=vertical] {
-                flex-direction: column;
-            }
+                &[data-full-width=true] {
+                    display: flex;
 
-            .${classes.indicator} {
-                border-radius: ${borderRadius}px;
-                background-color: ${indicatorColorValue};
-                box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
-                position: absolute;
-                transition: all .3s ${easing.bounce};
-            }
+                    .${classes.option} {
+                        flex: 1;
+                    }
+                }
 
-            &[data-animating=true] {
-                .${classes.option} {
-                    transition: background-color 0s;
+                &[data-orientation=vertical] {
+                    flex-direction: column;
                 }
-            }
 
-            &:not([data-animating=true]) {
-                .${classes.option}[data-active=true] {
+                .${classes.indicator} {
+                    border-radius: ${borderRadius}px;
                     background-color: ${indicatorColorValue};
                     box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
+                    position: absolute;
+                    transition: all .3s ${easing.bounce};
                 }
-            }
 
-            &:not(:has([data-active=true])) {
-                .${classes.indicator} {
-                    display: none;
+                &[data-animating=true] {
+                    .${classes.option} {
+                        transition: background-color 0s;
+                    }
                 }
-            }
 
-            &:not([data-read-only=true]):not([data-disabled=true]) {
-                .${classes.option}:not([data-disabled=true]) {
-                    cursor: pointer;
+                &:not([data-animating=true]) {
+                    .${classes.option}[data-active=true] {
+                        background-color: ${indicatorColorValue};
+                        box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
+                    }
+                }
 
-                    &:not([data-active=true]):hover {
-                        background-color: ${hoverBg};
+                &:not(:has([data-active=true])) {
+                    .${classes.indicator} {
+                        display: none;
                     }
+                }
 
-                    &:not([data-active=true]):active {
-                        transition: background-color 0s;
-                        background-color: ${activeBg};
+                &:not([data-read-only=true]):not([data-disabled=true]) {
+                    .${classes.option}:not([data-disabled=true]) {
+                        cursor: pointer;
+
+                        &:not([data-active=true]):hover {
+                            background-color: ${hoverBg};
+                        }
+
+                        &:not([data-active=true]):active {
+                            transition: background-color 0s;
+                            background-color: ${activeBg};
+                        }
                     }
                 }
-            }
 
-            &[data-disabled=true] {
-                .${classes.option} {
-                    cursor: not-allowed;
+                &[data-disabled=true] {
+                    .${classes.option} {
+                        cursor: not-allowed;
+                    }
                 }
             }
         `;

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

@@ -9,48 +9,50 @@ export const classes = defineInnerClasses('select', [
     'backfillWrap'
 ]);
 export const style = defineCss(({ spacing, text, easing }) => css `
-    cursor: pointer;
-    position: relative;
+    @layer reset {
+        cursor: pointer;
+        position: relative;
 
-    .${classes.contentWrap} {
-        display: flex;
-        align-items: center;
-        gap: ${spacing[2]}px;
-    }
+        .${classes.contentWrap} {
+            display: flex;
+            align-items: center;
+            gap: ${spacing[2]}px;
+        }
 
-    .${classes.placeholder} {
-        flex: 1;
-        color: ${text.placeholder};
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
+        .${classes.placeholder} {
+            flex: 1;
+            color: ${text.placeholder};
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
 
-    .${classes.arrow} {
-        color: ${text.placeholder};
-        transition: transform .25s ${easing.easeOut};
+        .${classes.arrow} {
+            color: ${text.placeholder};
+            transition: transform .25s ${easing.easeOut};
 
-        &[data-open=true] {
-            transform: rotate(180deg);
+            &[data-open=true] {
+                transform: rotate(180deg);
+            }
         }
-    }
-
-    .${classes.backfill} {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        flex-wrap: wrap;
-        gap: ${spacing[1]}px;
 
-        .${tagClasses.root} {
+        .${classes.backfill} {
+            flex: 1;
             min-width: 0;
-        }
+            display: flex;
+            flex-wrap: wrap;
+            gap: ${spacing[1]}px;
 
-        .${tagClasses.content},
-        .${classes.backfillWrap} {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
+            .${tagClasses.root} {
+                min-width: 0;
+            }
+
+            .${tagClasses.content},
+            .${classes.backfillWrap} {
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
         }
     }
 `);

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

@@ -6,13 +6,15 @@ export const classes = defineInnerClasses('selected-list', [
     'optionWrap'
 ]);
 export const style = defineCss(({ spacing }) => css `
-    .${classes.optionWrap} {
-        margin-bottom: ${spacing[3]}px;
-    }
+    @layer reset {
+        .${classes.optionWrap} {
+            margin-bottom: ${spacing[3]}px;
+        }
 
-    .${alertClasses.title}, .${alertClasses.description} {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
+        .${alertClasses.title}, .${alertClasses.description} {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
     }
 `);

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

@@ -4,7 +4,9 @@ export const classes = defineInnerClasses('serial-input', [
     'inputItem'
 ]);
 export const style = defineCss(() => css `
-    .${classes.inputItem} input {
-        text-align: center;
+    @layer reset {
+        .${classes.inputItem} input {
+            text-align: center;
+        }
     }
 `);

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

@@ -8,44 +8,46 @@ export const classes = defineInnerClasses('skeleton', [
     'table'
 ]);
 export const style = defineCss(({ spacing, mode, gray, borderRadius }) => css `
-    display: flex;
-    background-color: ${gray(.08)};
-    position: relative;
-    overflow: hidden;
+    @layer reset {
+        display: flex;
+        background-color: ${gray(.08)};
+        position: relative;
+        overflow: hidden;
 
-    .${classes.children} {
-        padding: ${spacing[1]}px ${spacing[4]}px;
-        z-index: 1;
-    }
+        .${classes.children} {
+            padding: ${spacing[1]}px ${spacing[4]}px;
+            z-index: 1;
+        }
 
-    &:not(:has(.${classes.children})) {
-        height: 1em;
-    }
+        &:not(:has(.${classes.children})) {
+            height: 1em;
+        }
 
-    &:not([data-variant=circular]):not(:first-of-type) {
-        margin-top: 1em;
-    }
+        &:not([data-variant=circular]):not(:first-of-type) {
+            margin-top: 1em;
+        }
 
-    &[data-variant=rounded] {
-        border-radius: ${borderRadius}px;
-    }
+        &[data-variant=rounded] {
+            border-radius: ${borderRadius}px;
+        }
 
-    &[data-variant=circular] {
-        display: inline-flex;
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-    }
+        &[data-variant=circular] {
+            display: inline-flex;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+        }
 
-    &[data-animation=true] {
-        &:after {
-            content: '';
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            background-image: linear-gradient(90deg, transparent, ${mode === 'light' ? '#ffffff' : gray(.2)}, transparent);
-            animation: ${anim} 1.8s infinite;
+        &[data-animation=true] {
+            &::after {
+                content: '';
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                background-image: linear-gradient(90deg, transparent, ${mode === 'light' ? '#ffffff' : gray(.2)}, transparent);
+                animation: ${anim} 1.8s infinite;
+            }
         }
     }
 `);
@@ -59,29 +61,33 @@ const anim = keyframes `
     }
 `;
 export const articalStyle = defineCss(({ spacing }) => css `
-    display: flex;
-    gap: ${spacing[4]}px;
+    @layer reset {
+        display: flex;
+        gap: ${spacing[4]}px;
 
-    .${classes.text} {
-        flex: 1
+        .${classes.text} {
+            flex: 1
+        }
     }
 `);
 export const tableStyle = defineCss(({ spacing }) => css `
-    width: 100%;
-    border-spacing: ${spacing[4]}px;
+    @layer reset {
+        width: 100%;
+        border-spacing: ${spacing[4]}px;
 
-    tr:first-of-type {
-        .${classes.root} {
-            height: 24px;
-            margin-bottom: ${spacing[3]}px;
+        tr:first-of-type {
+            .${classes.root} {
+                height: 24px;
+                margin-bottom: ${spacing[3]}px;
+            }
         }
-    }
 
-    td {
-        padding: 0;
+        td {
+            padding: 0;
 
-        &:last-of-type {
-            width: 10%;
+            &:last-of-type {
+                width: 10%;
+            }
         }
     }
 `);