@canlooks/can-ui 0.0.98 → 0.0.100

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

@@ -9,203 +9,205 @@ export const classes = defineInnerClasses('input-base', [
 export function useStyle({ color }) {
     const colorValue = useColor(color);
     return useCss(({ spacing, background, divider, borderRadius, text, easing, gray }) => css `
-        display: flex;
-        gap: ${spacing[2]}px;
-        align-items: center;
-        cursor: text;
-        transition: border-color .25s ${easing.easeOut};
-        position: relative;
-
-        &[data-variant=outlined] {
-            background-color: ${background.content};
-        }
-
-        &[data-size=medium] {
-            min-height: 32px;
-            padding: 0 ${spacing[4]}px;
-        }
-
-        &[data-size=small] {
-            min-height: 24px;
-            padding: 0 ${spacing[3]}px;
-        }
-
-        &[data-size=large] {
-            min-height: 40px;
-            padding: 3px ${spacing[5]}px;
-        }
+        @layer reset {
+            display: flex;
+            gap: ${spacing[2]}px;
+            align-items: center;
+            cursor: text;
+            transition: border-color .25s ${easing.easeOut};
+            position: relative;
 
-        &[data-variant=outlined] {
-            border: 1px solid ${color === 'primary' ? divider : colorValue};
-            border-radius: ${borderRadius}px;
-
-            &:before,
-            &:after {
-                content: '';
-                width: 0;
-                height: 0;
-                border-style: solid;
-                border-color: transparent;
-                border-width: 2px;
-                border-radius: inherit;
-                position: absolute;
-                display: none;
-                pointer-events: none;
-                z-index: 3;
-            }
-    
-            &:before {
-                top: -1px;
-                right: -1px;
-                border-top-color: ${colorValue};
-                border-left-color: ${colorValue};
-            }
-    
-            &:after {
-                bottom: -1px;
-                left: -1px;
-                border-bottom-color: ${colorValue};
-                border-right-color: ${colorValue};
-            }
-    
-            &:not(:has([data-disabled=true])):hover {
-                ${color === 'primary' ? `border-color: ${gray(.5)};` : ''}
-            }
-    
-            &:not(:has([data-read-only=true]))[data-focused=true],
-            &:not(:has([data-read-only=true])):has(:focus) {
-                &:before, &:after {
-                    display: block;
-                    animation: ${borderAnim} .4s ${easing.easeOut} forwards;
-                }
+            &[data-variant=outlined] {
+                background-color: ${background.content};
             }
 
-            &[data-shape=rounded] {
-                border-radius: 1000em;
+            &[data-size=medium] {
+                min-height: 32px;
+                padding: 0 ${spacing[4]}px;
             }
-        }
-        
-        &[data-variant=underlined] {
-            border-bottom: 1px solid ${divider};
 
-            &:not([data-disabled=true]):hover {
-                border-color: ${gray(.5)};
+            &[data-size=small] {
+                min-height: 24px;
+                padding: 0 ${spacing[3]}px;
             }
 
-            &:after {
-                content: '';
-                width: 0;
-                height: 2px;
-                background-color: ${colorValue};
-                position: absolute;
-                bottom: -1px;
-                left: 0;
-                transition: width .25s ${easing.easeOut};
-                z-index: 3;
+            &[data-size=large] {
+                min-height: 40px;
+                padding: 3px ${spacing[5]}px;
             }
 
-            &:not(:has([data-read-only=true]))[data-focused=true],
-            &:not(:has([data-read-only=true])):has(:focus) {
-                &:after {
-                    width: 100%;
+            &[data-variant=outlined] {
+                border: 1px solid ${color === 'primary' ? divider : colorValue};
+                border-radius: ${borderRadius}px;
+
+                &::before,
+                &::after {
+                    content: '';
+                    width: 0;
+                    height: 0;
+                    border-style: solid;
+                    border-color: transparent;
+                    border-width: 2px;
+                    border-radius: inherit;
+                    position: absolute;
+                    display: none;
+                    pointer-events: none;
+                    z-index: 3;
+                }
+
+                &::before {
+                    top: -1px;
+                    right: -1px;
+                    border-top-color: ${colorValue};
+                    border-left-color: ${colorValue};
                 }
-            }
-        }
 
-        &:has([data-disabled=true]) {
-            cursor: not-allowed;
-            background-color: ${gray(.1)};
+                &::after {
+                    bottom: -1px;
+                    left: -1px;
+                    border-bottom-color: ${colorValue};
+                    border-right-color: ${colorValue};
+                }
 
-            [data-disabled=true] {
-                cursor: not-allowed;
-            }
-        }
+                &:not(:has([data-disabled=true])):hover {
+                    ${color === 'primary' ? `border-color: ${gray(.5)};` : ''}
+                }
 
-        &:has([data-read-only=true]) {
-            cursor: default;
+                &:not(:has([data-read-only=true]))[data-focused=true],
+                &:not(:has([data-read-only=true])):has(:focus) {
+                    &::before, &::after {
+                        display: block;
+                        animation: ${borderAnim} .4s ${easing.easeOut} forwards;
+                    }
+                }
 
-            [data-read-only=true] {
-                cursor: default;
+                &[data-shape=rounded] {
+                    border-radius: 1000em;
+                }
             }
-        }
-
-        .${classes.content} {
-            flex: 1;
-            min-width: 0;
 
-            input, textarea {
-                color: ${text.primary};
+            &[data-variant=underlined] {
+                border-bottom: 1px solid ${divider};
 
-                &::placeholder {
-                    color: ${text.placeholder};
+                &:not([data-disabled=true]):hover {
+                    border-color: ${gray(.5)};
                 }
 
-                &[data-hidden=true] {
+                &::after {
+                    content: '';
+                    width: 0;
+                    height: 2px;
+                    background-color: ${colorValue};
                     position: absolute;
-                    opacity: 0;
-                    inset: 0;
-                    pointer-events: none;
+                    bottom: -1px;
+                    left: 0;
+                    transition: width .25s ${easing.easeOut};
+                    z-index: 3;
                 }
-            }
-        }
 
-        &[data-compact=row] {
-            &:hover {
-                z-index: 1;
+                &:not(:has([data-read-only=true]))[data-focused=true],
+                &:not(:has([data-read-only=true])):has(:focus) {
+                    &::after {
+                        width: 100%;
+                    }
+                }
             }
 
-            &:not(:has([data-read-only=true]))[data-focused=true],
-            &:not(:has([data-read-only=true])):has(:focus) {
-                z-index: 2;
-            }
-    
-            &:not([data-last=true]) {
-                &, &:before, &:after {
-                    border-top-right-radius: 0;
-                    border-bottom-right-radius: 0;
+            &:has([data-disabled=true]) {
+                cursor: not-allowed;
+                background-color: ${gray(.1)};
+
+                [data-disabled=true] {
+                    cursor: not-allowed;
                 }
             }
-    
-            &:not([data-first=true]) {
-                margin-left: -1px;
-    
-                &, &:before, &:after {
-                    border-top-left-radius: 0;
-                    border-bottom-left-radius: 0;
+
+            &:has([data-read-only=true]) {
+                cursor: default;
+
+                [data-read-only=true] {
+                    cursor: default;
                 }
             }
-        }
-    
-        &[data-compact=column] {
-            &:hover {
-                z-index: 1;
-            }
 
-            &:not(:has([data-read-only=true]))[data-focused=true],
-            &:not(:has([data-read-only=true])):has(:focus) {
-                z-index: 2;
+            .${classes.content} {
+                flex: 1;
+                min-width: 0;
+
+                input, textarea {
+                    color: ${text.primary};
+
+                    &::placeholder {
+                        color: ${text.placeholder};
+                    }
+
+                    &[data-hidden=true] {
+                        position: absolute;
+                        opacity: 0;
+                        inset: 0;
+                        pointer-events: none;
+                    }
+                }
             }
-    
-            &:not([data-last=true]) {
-                &, &:before, &:after {
-                    border-bottom-left-radius: 0;
-                    border-bottom-right-radius: 0;
+
+            &[data-compact=row] {
+                &:hover {
+                    z-index: 1;
+                }
+
+                &:not(:has([data-read-only=true]))[data-focused=true],
+                &:not(:has([data-read-only=true])):has(:focus) {
+                    z-index: 2;
+                }
+
+                &:not([data-last=true]) {
+                    &, &::before, &::after {
+                        border-top-right-radius: 0;
+                        border-bottom-right-radius: 0;
+                    }
+                }
+
+                &:not([data-first=true]) {
+                    margin-left: -1px;
+
+                    &, &::before, &::after {
+                        border-top-left-radius: 0;
+                        border-bottom-left-radius: 0;
+                    }
                 }
             }
-    
-            &:not([data-first=true]) {
-                margin-top: -1px;
-    
-                &, &:before, &:after {
-                    border-top-left-radius: 0;
-                    border-top-right-radius: 0;
+
+            &[data-compact=column] {
+                &:hover {
+                    z-index: 1;
+                }
+
+                &:not(:has([data-read-only=true]))[data-focused=true],
+                &:not(:has([data-read-only=true])):has(:focus) {
+                    z-index: 2;
+                }
+
+                &:not([data-last=true]) {
+                    &, &::before, &::after {
+                        border-bottom-left-radius: 0;
+                        border-bottom-right-radius: 0;
+                    }
+                }
+
+                &:not([data-first=true]) {
+                    margin-top: -1px;
+
+                    &, &::before, &::after {
+                        border-top-left-radius: 0;
+                        border-top-right-radius: 0;
+                    }
                 }
             }
-        }
 
-        .${classes.prefix},
-        .${classes.suffix} {
-            color: ${text.secondary};
+            .${classes.prefix},
+            .${classes.suffix} {
+                color: ${text.secondary};
+            }
         }
     `, [colorValue]);
 }

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

@@ -5,24 +5,26 @@ export const classes = defineInnerClasses('loading', [
     'mask'
 ]);
 export const style = css `
-    position: relative;
-    z-index: 0;
-    
-    &[data-fill=true] {
-        width: 100%;
-        height: 100%;
-        flex: 1;
-    }
-
-    .${classes.container} {
-        width: 100%;
-        height: 100%;
+    @layer reset {
         position: relative;
         z-index: 0;
-    }
+
+        &[data-fill=true] {
+            width: 100%;
+            height: 100%;
+            flex: 1;
+        }
+
+        .${classes.container} {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            z-index: 0;
+        }
 
 
-    .${classes.mask} {
-        z-index: 1;
+        .${classes.mask} {
+            z-index: 1;
+        }
     }
 `;

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

@@ -9,14 +9,16 @@ export function useStyle({ color, borderWidth }) {
     return useCss(({ mode }) => {
         const borderColor = mode === 'light' ? Color(colorValue).alpha(.6).string() : colorValue;
         return css `
-            .${classes.indicator} {
-                width: 100%;
-                height: 100%;
-                aspect-ratio: 1;
-                border-radius: 50%;
-                border: ${borderWidth}px solid;
-                border-color: ${borderColor} transparent;
-                animation: ${spinning} 1.25s infinite;
+            @layer reset {
+                .${classes.indicator} {
+                    width: 100%;
+                    height: 100%;
+                    aspect-ratio: 1;
+                    border-radius: 50%;
+                    border: ${borderWidth}px solid;
+                    border-color: ${borderColor} transparent;
+                    animation: ${spinning} 1.25s infinite;
+                }
             }
         `;
     }, [colorValue, borderWidth]);

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

@@ -7,28 +7,30 @@ export const classes = defineInnerClasses('loading-mask', [
     'progress'
 ]);
 export const style = defineCss(({ spacing, text }) => css `
-    .${classes.indicator} {
-        display: flex;
-        gap: ${spacing[2]}px;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
+    @layer reset {
+        .${classes.indicator} {
+            display: flex;
+            gap: ${spacing[2]}px;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
 
-        .${classes.text} {
-            color: ${text.secondary};
+            .${classes.text} {
+                color: ${text.secondary};
+            }
         }
-    }
 
-    .${classes.progress} {
-        width: calc(100% - 24px);
-        max-width: 300px;
+        .${classes.progress} {
+            width: calc(100% - 24px);
+            max-width: 300px;
 
-        .${progressClasses.track} {
-            height: 4px;
+            .${progressClasses.track} {
+                height: 4px;
+            }
         }
-    }
 
-    &[data-show-progress=true] .${classes.indicator} {
-        flex-direction: row;
+        &[data-show-progress=true] .${classes.indicator} {
+            flex-direction: row;
+        }
     }
 `);

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

@@ -3,5 +3,7 @@ import { defineInnerClasses } from '../../utils';
 import { menuListPadding } from '../menuItem/menuItem.style';
 export const classes = defineInnerClasses('menu');
 export const style = css `
-    padding: ${menuListPadding}px;
+    @layer reset {
+        padding: ${menuListPadding}px;
+    }
 `;